/* v3 design tokens shared by both builds (v3 plan U6, KTD4). GENERATED by lib/v3/port/split_css.rb
   from the handoff's two :root blocks; do not hand-edit (run bin/rails v3:port:css).

   The two builds keep separate defaults and theme blocks, exactly as the handoff does:
     desktop  dark by default, light when html[data-theme="light"]      -> v3/desktop/theme.css
     mobile   light by default, dark when html[data-theme="dark"]       -> v3/mobile/theme.css
   This file holds the tokens whose value is identical in both builds and never flipped by a theme
   block: brand colours, the Mulish font stacks, the easing and the z-index scale. Everything that
   differs per build or per theme (backgrounds, surfaces, text, borders, chips) stays in the theme
   files so each build renders exactly like its handoff pages.

   Renamed roles (the handoff names the same role differently per build; keep using the name the
   build's CSS uses, the values are not interchangeable):
     surface   desktop --cb-surface (#1f2636 dark / #fff light)   mobile --cb-panel (#141926 dark / #fff light)
     chrome    desktop --cb-chrome  (#0e1320)                      mobile --cb-header-bg (#10131c)
   Desktop pages that reuse mobile markup get --cb-panel, --cb-text-sec and --cb-chip-active from the
   shim in v3/desktop/theme.css (--cb-panel maps to --cb-bg there, as in the handoff). */
:root{--cb-link:#40b3de;--cb-link-deep:#2a8fb8;--cb-commit:#7bc178;--cb-warn:#f5a623;--cb-error:#e74c3c;--cb-heart:#ff5a5f;--cb-font-light:'Mulish',system-ui,-apple-system,sans-serif;--cb-font-regular:'Mulish',system-ui,-apple-system,sans-serif;--cb-font-semibold:'Mulish',system-ui,-apple-system,sans-serif;--cb-font-bold:'Mulish',system-ui,-apple-system,sans-serif;--cb-ease:cubic-bezier(.32,.72,.24,1);--cb-z-chrome:50;--cb-z-sheet:70}
/* Self-hosted Mulish (v3 plan U6, KTD5): the handoff's production/assets/css/fonts.css with the
   five woff2 subsets served from app/assets/fonts/mulish, plus the desktop "Cubebrush Header"
   face from desktop.css pointing at the same latin file instead of fonts.gstatic.com.
   GENERATED by lib/v3/port/split_css.rb; do not hand-edit. */
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0gotcqA-c4712b15c912f4c3e65a1fef6ed5fc678ce7726941540094cd62d1e066fa52c8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk2wotcqA-918998976ba5336f4983e2375ab5040f6a64c4b56eadd03b16301201a72e4d3a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0AotcqA-9ba608c039d604b71be297aa193926d308f4ab882f35ee15f4e2eefc8cf34461.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0QotcqA-5904deb1479ee920719a1604c8769ef2186fc9fd3c05d26f032f0edfd4aa5555.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk3wot-a6526453b8a068e9d14abfedb532b8c76274a6df8910147deaf9d546625b30ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0gotcqA-c4712b15c912f4c3e65a1fef6ed5fc678ce7726941540094cd62d1e066fa52c8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk2wotcqA-918998976ba5336f4983e2375ab5040f6a64c4b56eadd03b16301201a72e4d3a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0AotcqA-9ba608c039d604b71be297aa193926d308f4ab882f35ee15f4e2eefc8cf34461.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0QotcqA-5904deb1479ee920719a1604c8769ef2186fc9fd3c05d26f032f0edfd4aa5555.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk3wot-a6526453b8a068e9d14abfedb532b8c76274a6df8910147deaf9d546625b30ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0gotcqA-c4712b15c912f4c3e65a1fef6ed5fc678ce7726941540094cd62d1e066fa52c8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk2wotcqA-918998976ba5336f4983e2375ab5040f6a64c4b56eadd03b16301201a72e4d3a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0AotcqA-9ba608c039d604b71be297aa193926d308f4ab882f35ee15f4e2eefc8cf34461.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0QotcqA-5904deb1479ee920719a1604c8769ef2186fc9fd3c05d26f032f0edfd4aa5555.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk3wot-a6526453b8a068e9d14abfedb532b8c76274a6df8910147deaf9d546625b30ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0gotcqA-c4712b15c912f4c3e65a1fef6ed5fc678ce7726941540094cd62d1e066fa52c8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk2wotcqA-918998976ba5336f4983e2375ab5040f6a64c4b56eadd03b16301201a72e4d3a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0AotcqA-9ba608c039d604b71be297aa193926d308f4ab882f35ee15f4e2eefc8cf34461.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0QotcqA-5904deb1479ee920719a1604c8769ef2186fc9fd3c05d26f032f0edfd4aa5555.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk3wot-a6526453b8a068e9d14abfedb532b8c76274a6df8910147deaf9d546625b30ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0gotcqA-c4712b15c912f4c3e65a1fef6ed5fc678ce7726941540094cd62d1e066fa52c8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk2wotcqA-918998976ba5336f4983e2375ab5040f6a64c4b56eadd03b16301201a72e4d3a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0AotcqA-9ba608c039d604b71be297aa193926d308f4ab882f35ee15f4e2eefc8cf34461.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0QotcqA-5904deb1479ee920719a1604c8769ef2186fc9fd3c05d26f032f0edfd4aa5555.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk3wot-a6526453b8a068e9d14abfedb532b8c76274a6df8910147deaf9d546625b30ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0gotcqA-c4712b15c912f4c3e65a1fef6ed5fc678ce7726941540094cd62d1e066fa52c8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk2wotcqA-918998976ba5336f4983e2375ab5040f6a64c4b56eadd03b16301201a72e4d3a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0AotcqA-9ba608c039d604b71be297aa193926d308f4ab882f35ee15f4e2eefc8cf34461.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk0QotcqA-5904deb1479ee920719a1604c8769ef2186fc9fd3c05d26f032f0edfd4aa5555.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk3wot-a6526453b8a068e9d14abfedb532b8c76274a6df8910147deaf9d546625b30ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Same Mulish typeface, isolated from page-specific font loading. Optional prevents late swaps. */
@font-face{font-family:'Cubebrush Header';font-style:normal;font-weight:300 800;font-display:optional;src:url("https://djm6btoj9k6cu.cloudfront.net/assets/mulish/1Ptvg83HX_SGhgqk3wot-a6526453b8a068e9d14abfedb532b8c76274a6df8910147deaf9d546625b30ec.woff2") format('woff2')}
/* Base rules identical in both handoff builds (their first two base rules). GENERATED by lib/v3/port/split_css.rb; do not hand-edit. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* v3 utilities (v3 plan U6, KTD4). Hand-written, the one base file the port script does not generate.
   Only rules the Rails rendering needs to reproduce the handoff's layout; nothing here is visible on its own.

   Turbo Frames are custom elements and render `display: inline` by default, which would wrap the handoff's
   block layouts in an inline box. `display: contents` makes a frame layout-transparent once it has content,
   the same rule the legacy stylesheets use (main-styles.scss); a lazy frame stays inline (an empty inline box
   takes no space) until it completes. `[hidden]` from reset.css still wins on a hidden frame. */
turbo-frame:not([loading="lazy"]),
turbo-frame[loading="lazy"][complete=""] {
  display: contents;
}
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */.cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
/* The avatar's square crop (services/v3/avatar_crop.js; fix-c's parity sweep M22), on both builds: a
   dimmed page, a card with the image and Cropper.js's square, Cancel and Use photo. Cropper.js's own rules are v3/base/cropper.css,
   a plain-CSS copy of _cropperjs.scss (v1.6.2) so the v3 bundles stay Sass-free (spec/requests/v3/assets_spec.rb). */
.cb-crop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,12,18,.72)}
.cb-crop-panel{width:min(520px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:14px;background:var(--cb-card,#fff);color:var(--cb-text,#141721);box-shadow:0 18px 48px rgba(10,12,18,.35)}
.cb-crop-title{margin:0;font:600 16px/1.3 var(--cb-font-semibold,inherit)}
.cb-crop-stage{position:relative;min-height:220px;max-height:60vh;overflow:hidden;border-radius:10px;background:#0b0d12}
.cb-crop-image{display:block;max-width:100%}
.cb-crop-actions{display:flex;justify-content:flex-end;gap:10px}
.cb-crop-cancel,.cb-crop-apply{appearance:none;cursor:pointer;height:40px;padding:0 18px;border-radius:999px;font:600 13px/1 var(--cb-font-semibold,inherit)}
.cb-crop-cancel{border:1px solid var(--cb-border,#d9dce3);background:transparent;color:var(--cb-text,#141721)}
.cb-crop-apply{border:1px solid var(--cb-link,#40b3de);background:var(--cb-link,#40b3de);color:#fff}
.cb-crop .cropper-view-box,.cb-crop .cropper-face{border-radius:50%}
.cb-crop .cropper-view-box{outline:2px solid #fff;outline-color:rgba(255,255,255,.85)}
/* Cubebrush desktop - single shared stylesheet. Tokens mirror production/assets/css/site.css (dark theme values); never import that file. Shared primitives: .dh-chrome, .dh-paper-bg, .dh-section, .dh-sechead, .dh-grid, .cb-pcard, .dh-cat, .hm-footer, .cb-drawer + .hm-acct-*, .cb-gsheet. */
:root{--cb-amber:#f3a649;--cb-bg:#141926;--cb-surface:#1f2636;--cb-card:#1f2636;--cb-chrome:#0e1320;--cb-text:#e8eaf0;--cb-sec:#9aa3b6;--cb-muted:#a1aabb;--cb-border:rgba(255,255,255,.08);--cb-border-hard:rgba(255,255,255,.14);--cb-footer-bg:#10131c;--gut:clamp(20px,2.6vw,40px);color-scheme:dark}
:root{--cb-stars-empty:rgba(255,255,255,.18);--cb-chip-bg:#232a3b;--cb-slab:#1f2636;--cb-line-dark:rgba(255,255,255,.08);--cb-line-dark-hard:rgba(255,255,255,.14)}
/* Light theme (drawer toggle) - token values copied from mobile site.css :root (light). Chrome, hero, footer and drawer stay dark, as on mobile. */
[data-theme="light"]{--cb-bg:#f9f8fb;--cb-surface:#fff;--cb-card:#fff;--cb-text:#2c3242;--cb-sec:#5a6478;--cb-muted:#646e80;--cb-border:#eceef2;--cb-border-hard:#d2d7db;--cb-chip-bg:#f1f3f6;--cb-stars-empty:#d2d7db;--cb-slab:#eceef3;color-scheme:light}
[data-theme="light"] .dh-paper-bg{background-image:radial-gradient(rgba(20,23,33,.09) .8px,transparent 1.2px)}
[data-theme="light"] .dh-paper-bg::before{background:radial-gradient(48% 34% at 10% 22%,rgba(64,179,222,.08),transparent 70%),radial-gradient(38% 30% at 88% 58%,rgba(243,166,73,.07),transparent 70%),radial-gradient(34% 26% at 50% 96%,rgba(123,193,120,.07),transparent 70%)}
[data-theme="light"] .dh-paper-rule::before{background:linear-gradient(90deg,transparent,rgba(20,23,33,.22),transparent)}
[data-theme="light"] .cb-pcard{box-shadow:0 6px 20px rgba(20,23,33,.10),0 2px 4px rgba(20,23,33,.06);border:1px solid var(--cb-border)}
[data-theme="light"] .cb-pcard:hover{box-shadow:0 12px 28px rgba(20,23,33,.16),0 2px 5px rgba(20,23,33,.08)}
[data-theme="light"] .dh-arrow{background:#fff;color:#2c3242;border-color:var(--cb-border-hard);box-shadow:0 6px 18px rgba(20,23,33,.16)}
[data-theme="light"] .dh-tab{color:var(--cb-sec)}
[data-theme="light"] .dh-tab[aria-selected="true"]{color:var(--cb-text)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(20,23,33,.18)}
[data-theme="light"] .cb-devstate{background:rgba(255,255,255,.9);border-color:var(--cb-border-hard)}
/* Desktop pages that reuse mobile markup map the mobile token names onto the desktop palette. The handoff
   repeats this block in checkout.css, discounts.css, product.css, products-edit.css, products-new.css, store.css, user.css; the port writes it once here (no other desktop :root
   defines these names, so the cascade is unchanged). */
:root{--cb-panel:var(--cb-bg);--cb-text-sec:var(--cb-sec);--cb-chip-active:rgba(64,179,222,.12)}
html,body{margin:0;padding:0}
body{font:400 14px/22px var(--cb-font-regular);color:var(--cb-text);background:var(--cb-bg);-webkit-font-smoothing:antialiased;min-height:100vh}
img,svg{max-width:100%;display:block}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* Cursor defaults for custom controls; component drag/zoom cursors take precedence. */
:where([role="link"],[role="button"],[role="tab"],[role="checkbox"],[role="radio"],[role="switch"],[role="option"],[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"],[data-href],summary,select,input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],input[type="file"],input[type="range"],input[type="color"],label:has(input:is([type="checkbox"],[type="radio"]))){cursor:pointer}
[data-cb-lightbox]{cursor:zoom-in}
:is(button,input,select,textarea):disabled:where(:not([aria-busy="true"])),button[aria-disabled="true"],[role][aria-disabled="true"],label:has(input:is([type="checkbox"],[type="radio"]):disabled){cursor:not-allowed}
a{color:var(--cb-link-text,var(--cb-link));text-decoration:none}
a:hover{color:var(--cb-link-text,var(--cb-link))}
h1,h2,h3{margin:0;font-weight:600;line-height:1.25}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cb-link);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:6px}
.cb-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cb-skip{position:absolute;left:8px;top:8px;background:var(--cb-link);color:#fff;padding:8px 12px;border-radius:6px;z-index:100;transform:translateY(-200%);transition:transform 200ms var(--cb-ease)}
.cb-skip:focus{transform:translateY(0)}
.cb-skip:hover{color:#fff}
/* Match the initial body state before deferred behavior runs. */
body[data-cb-state="guest"] [data-cb-state-only]:not([data-cb-state-only~="guest"]),
body[data-cb-state="user"] [data-cb-state-only]:not([data-cb-state-only~="user"]),
body[data-cb-state="seller"] [data-cb-state-only]:not([data-cb-state-only~="seller"]),
body[data-cb-state="admin"] [data-cb-state-only]:not([data-cb-state-only~="admin"]),
body[data-cb-state="guest"] [data-cb-state-not~="guest"],
body[data-cb-state="user"] [data-cb-state-not~="user"],
body[data-cb-state="seller"] [data-cb-state-not~="seller"],
body[data-cb-state="admin"] [data-cb-state-not~="admin"]{display:none!important}
/* generic sheet host (from site.css; shared selector list with .cb-drawer-host tripped the extractor) */
.cb-sheet-host{position:fixed;inset:0;z-index:var(--cb-z-sheet);pointer-events:none}
.cb-sheet-host.is-open{pointer-events:auto}
.cb-sheet-backdrop{position:absolute;inset:0;background:rgba(20,23,33,0);transition:background 240ms var(--cb-ease)}
.cb-sheet-host.is-open .cb-sheet-backdrop{background:rgba(20,23,33,.5)}
/* micro-interactions - same vocabulary as mobile */
[data-cb-btn],[data-cb-icon],[data-cb-text],[data-cb-card]{transition:transform 140ms ease,background-color 160ms ease,color 160ms ease,box-shadow 160ms ease,border-color 160ms ease,filter 160ms ease,opacity 140ms ease}
[data-cb-btn]:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 18px rgba(20,23,33,.18)}
[data-cb-btn]:active{transform:translateY(0);filter:brightness(.96)}
[data-cb-icon]:hover,[data-cb-text]:hover{color:var(--cb-link-text,var(--cb-link))}
[data-cb-card]:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(20,23,33,.22)}
/* Links in running text are underlined, not told apart by colour alone (WCAG 1.4.1; QA item 246, axe
   link-in-text-block): the checkout's legal line, settings hints, the PayPal note, the legal pages' closing
   paragraphs, the checkout's refund note, the library and receipt bylines, and the receipt's help and claim footers. Not nav, buttons or cards. */
:is(.ch-legal, .set-row-sub, .set-section-hint, .pp-paypal .text, .tos-end-body, .la-end-body, .pp-end-body, .lc-end-body, .lib-card-byline, .or-item-author, .or-claim-foot, .or-help, .ch-trust-fine) a { text-decoration: underline; text-underline-offset: 2px; }
/* The legal pages' own paragraphs, lists and table cells follow the same rule (QA item 258, v3-master's
   ruling on 246's note), not only their closing paragraphs. Scoped by each page's root, since `pp-` is also
   the product page's prefix. */
/* So do each page's opening paragraphs and its TL;DR list (QA item 258b); the section nav and the end buttons
   are outside all three, so they keep their own treatment. */
:is(.tos-page, .pp-page, .la-page, .lc-page) :is(.tos-body, .pp-body, .la-body, .lc-body) :is(p, li, dd, [role="cell"]) a,
:is(.tos-page, .pp-page, .la-page, .lc-page) :is(.tos-lede, .pp-lede, .la-lede, .lc-lede) a,
:is(.tos-page, .pp-page, .la-page, .lc-page) :is(.tos-tldr, .pp-tldr, .la-tldr, .lc-tldr) :is(p, li) a { text-decoration: underline; text-underline-offset: 2px; }
/* MN10: the signed-out notice (V3::Shell::SignedOutDialogComponent), on any page, so its styles are here. */
dialog.cb-signed-out{border:0;border-radius:12px;padding:28px 28px 24px;width:min(420px,calc(100vw - 32px));background:var(--cb-panel,#fff);color:var(--cb-text,#1d2230);box-shadow:0 24px 64px rgba(0,0,0,.35)}
dialog.cb-signed-out::backdrop{background:rgba(8,10,16,.62)}
.cb-signed-out-title{margin:0 0 10px;font:600 20px/1.3 var(--cb-font-semibold,inherit);color:inherit}
.cb-signed-out-message{margin:0;font:400 14px/1.5 var(--cb-font-regular,inherit);color:var(--cb-text-sec,var(--cb-muted,#5a6478))}
.cb-signed-out-reload{border:0;border-radius:999px;padding:12px 22px;background:var(--cb-commit,#6abd6e);color:#fff;font:600 13px/1 var(--cb-font-semibold,inherit);letter-spacing:1.4px;text-transform:uppercase;cursor:pointer}
.cb-signed-out-reload:focus-visible{outline:2px solid var(--cb-link,#40b3de);outline-offset:3px}
.cb-signed-out-actions{display:flex;justify-content:flex-end;margin-top:20px}
/* Marc's ruling on tester-r's contrast findings (r39/r40): the fills keep their colours, and white text on
   the brand blue, green, red and purple fills gets a subtle diffuse shadow so it reads a little better.
   One token, both builds, both themes. */
:root{--cb-on-fill-shadow:0 1px 2px rgba(0,0,0,.28)}
.dh-signup,.dh-hero-cta,.mp-cta,.gh-hero-cta,.hm-earn-cta.is-commit,.hm-earn-cta.is-link,.dh-feat-tag,.cb-pcard-chip,.cb-pcard-discount,.cb-pcard-adult-label,.pp-deal-off,.lib-download-btn,.ch-pay-btn,.ch-discount-redeem,.ch-item-tag-bundle,.ms-bundle-tag,.ms-bundle-add,.ms-bundle-panel .ms-bundle-save,.set-btn.is-danger{text-shadow:var(--cb-on-fill-shadow)}
/* ── paper backdrop ── */
.dh-paper-bg{position:relative;isolation:isolate;min-height:100vh;background-color:var(--cb-bg);background-image:radial-gradient(rgba(255,255,255,.045) .8px,transparent 1.2px);background-size:22px 22px}
.dh-paper-bg::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;filter:blur(50px);background:radial-gradient(48% 34% at 10% 22%,rgba(64,179,222,.15),transparent 70%),radial-gradient(38% 30% at 88% 58%,rgba(243,166,73,.125),transparent 70%),radial-gradient(34% 26% at 50% 96%,rgba(123,193,120,.115),transparent 70%)}
.dh-paper-rule{position:relative}
.dh-paper-rule::before{content:'';position:absolute;left:50%;top:0;width:64px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.dh-paper-rule::after{content:'';position:absolute;left:50%;top:-3px;width:7px;height:7px;border-radius:50%;transform:translateX(-50%);background:var(--cb-amber);box-shadow:0 0 0 3px var(--cb-bg)}
/* ── chrome ── */
.dh-chrome{--cb-font-light:'Cubebrush Header',system-ui,-apple-system,sans-serif;--cb-font-regular:'Cubebrush Header',system-ui,-apple-system,sans-serif;--cb-font-semibold:'Cubebrush Header',system-ui,-apple-system,sans-serif;--cb-font-bold:'Cubebrush Header',system-ui,-apple-system,sans-serif;position:sticky;top:0;z-index:var(--cb-z-chrome);background:var(--cb-chrome);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.dh-chrome.is-scrolled{border-color:var(--cb-line-dark);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.dh-chrome-inner{max-width:calc(1640px + 2 * var(--gut));margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:28px}
.dh-logo{display:inline-flex;align-items:center;gap:10px;flex:none;line-height:0;color:#e8eaf0}
.dh-logo img{width:36px;height:36px}
.dh-wordmark,.hm-footer-brand span{font:300 20px/1 var(--cb-font-light);letter-spacing:-.2px;color:#fff}
.dh-nav{display:flex;align-items:center;gap:22px;flex:none}
.dh-nav a{color:#9aa3b6;font:600 13px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;padding:6px 0}
.dh-nav>a{gap:6px;min-height:40px;padding:0}
.dh-nav svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dh-nav>:is(a,.dh-market-toggle)>svg{width:14px;height:14px}
.dh-search{flex:3 1 360px;min-width:260px;max-width:820px;height:44px;padding:0 16px;background:rgba(255,255,255,.08);border:1px solid var(--cb-line-dark);border-radius:999px;display:flex;align-items:center;gap:10px}
.dh-search:focus-within{border-color:rgba(64,179,222,.5)}
.dh-search svg{width:16px;height:16px;stroke:#9aa3b6;fill:none;stroke-width:1.8;stroke-linecap:round;flex:none}
.dh-search input{flex:1;height:100%;min-width:0;background:transparent;border:0;outline:0;color:#e8eaf0;font:400 13px/1 var(--cb-font-regular)}
.dh-search input::placeholder{color:#9aa3b6}
.dh-kbd{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:rgba(255,255,255,.06);border:1px solid var(--cb-line-dark);border-radius:4px;font:600 10px/1 var(--cb-font-bold);color:#9aa3b6;letter-spacing:.4px;flex:none}
.dh-spacer{flex:1 1 0;min-width:12px}
.dh-actions{display:flex;align-items:center;gap:10px;flex:none}
.dh-iconbtn{color:#9aa3b6;position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%}
.dh-iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dh-quick{display:flex;align-items:center;gap:6px}
.dh-quick-link{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:999px;color:#e8eaf0;font:600 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.dh-quick-link svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dh-quick-link .chev{width:12px;height:12px;margin-left:-2px}
.dh-menu{position:relative}
.dh-menu-pop{position:absolute;top:calc(100% + 10px);left:0;min-width:200px;background:#1b2230;border:1px solid var(--cb-line-dark);border-radius:10px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity 160ms,transform 200ms var(--cb-ease),visibility 160ms;z-index:60}
.dh-menu-pop::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.dh-menu:hover .dh-menu-pop,.dh-menu:focus-within .dh-menu-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.dh-menu-pop a{display:block;padding:10px 12px;border-radius:6px;color:#e8eaf0;font:600 12px/1 var(--cb-font-semibold);letter-spacing:1.2px;text-transform:uppercase}
.dh-menu-pop a:hover{background:rgba(255,255,255,.06);color:var(--cb-link-text,var(--cb-link))}
.dh-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--cb-error);color:#fff;font:700 10px/1 var(--cb-font-bold);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--cb-chrome)}
.dh-iconbtn [data-cb-theme-icon]{display:inline-flex}
.dh-iconbtn .cb-theme-sun{stroke:#f5a623}
.dh-iconbtn .cb-theme-moon{stroke:#c9d3ff}
@media(max-width:1500px){.dh-quick-link{font-size:0;gap:0;padding:0 10px}.dh-quick-link .chev{display:none}}
.dh-cart-count{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;background:var(--cb-link);color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font:700 9px/1 var(--cb-font-bold);box-shadow:0 0 0 2px var(--cb-chrome)}
.dh-signin{color:#e8eaf0;font:600 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;padding:8px 6px}
.dh-signup{display:inline-flex;align-items:center;height:38px;padding:0 18px;background:var(--cb-link);color:#fff;border-radius:999px;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;box-shadow:0 4px 14px rgba(64,179,222,.32)}
/* The base a:hover outranks a one-class colour, so a link-blue anchor button names its own hover text colour (in dark the text took the button's own blue). */
.dh-signup:hover{color:#fff}
.dh-hamburger{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:#e8eaf0;position:relative;margin-left:4px}
.dh-hamburger svg{width:26px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
/* Unread dot (rendered by desktop.js as .dh-hamburger-dot) shortens the top line to make room, as on mobile. */
.dh-hamburger:has(.dh-hamburger-dot:not([hidden])) .dh-hb-top{x2:20}
@media(max-width:1180px){.dh-nav a span{display:none}.dh-search{max-width:520px}.dh-kbd{display:none}}
@media(max-width:960px){.dh-nav{display:none}}
/* ── hero ── */
.dh-hero{position:relative;background:var(--cb-chrome);color:#fff;overflow:hidden}
.dh-hero-photo{position:absolute;inset:0;background:url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/illustrations/hero-art-653e7a0f792c4dbe46e6cc5553121f6f717d5d4b347a3c4daed217f1dea939bc.webp") center 35%/cover no-repeat;opacity:.32}
/* Prevent a default-photo flash while the local admin settings are being read. */
.cb-home-background-pending .dh-hero-photo{background-image:none!important}
.dh-hero-blob{position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none}
.dh-hero-blob.a{top:-180px;left:-160px;width:720px;height:720px;background:radial-gradient(circle,rgba(243,166,73,.25),rgba(243,166,73,0) 65%);animation:cb-hero-drift 14s ease-in-out infinite}
.dh-hero-blob.b{bottom:-240px;right:-120px;width:760px;height:760px;background:radial-gradient(circle,rgba(64,179,222,.25),rgba(64,179,222,0) 65%);animation:cb-hero-drift-2 18s ease-in-out infinite}
.dh-hero-hatch{position:absolute;inset:0;opacity:.08;mix-blend-mode:screen;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23fff' stroke-width='.7'/%3E%3C/svg%3E") 0 0/6px 6px repeat}
.dh-hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,19,32,.2) 0%,rgba(14,19,32,.45) 55%,rgba(14,19,32,.92) 100%)}
.dh-hero-inner{position:relative;max-width:calc(1640px + 2 * var(--gut));margin:0 auto;padding:32px var(--gut) 40px}
/* Show the hero copy and actions on the first paint, without separate entrance fades. */
.dh-eyebrow-pill{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;font:600 11px/1 var(--cb-font-bold);letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:16px}
.dh-eyebrow-pill svg{width:13px;height:13px;stroke:#9ed79a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dh-hero h1{margin:0 0 12px;font:300 clamp(36px,3.6vw,56px)/1.1 var(--cb-font-light);letter-spacing:-1.2px;max-width:1180px;text-wrap:balance}
.dh-hero h1 b{font-weight:700}
.dh-hero-sub{margin:0 0 32px;font:400 18px/1.5 var(--cb-font-regular);color:rgba(255,255,255,.78);max-width:900px}
.dh-intents{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1320px;margin:0 auto}
@media(max-width:900px){.dh-intents{grid-template-columns:1fr}}
@media(max-width:700px){.dh-eyebrow-pill{display:none}}
/* Store avatars are square (same rule as mobile site.css [data-cb-avatar-kind="store"]): SVG has its own outline → no clip; uploaded <img> → rounded square. */
[data-cb-avatar-kind="store"]{border-radius:0!important;overflow:visible!important;background:transparent!important}
[data-cb-avatar-kind="store"]:has(img){overflow:hidden!important;border-radius:18%!important}
[data-cb-avatar-kind="store"] img{border-radius:inherit!important}
.dh-avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-left:4px;overflow:hidden;transition:transform 140ms}
.dh-avatar:hover{transform:translateY(-1px)}
.dh-avatar svg{width:100%;height:100%;display:block}
.dh-intent{display:block;border-radius:16px;background:var(--grad),rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px);color:#fff;position:relative;overflow:hidden}
.dh-intent-art{position:relative;aspect-ratio:16/9;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 15%,transparent),color-mix(in srgb,var(--tint) 3%,transparent));border-bottom:1px solid var(--cb-line-dark);display:flex;align-items:center;justify-content:center;padding:18px 24px}
.dh-intent-art img{width:92%;height:92%;object-fit:contain}
.dh-intent-body{padding:20px 24px 22px}
.dh-intent-eyebrow{font:700 11px/1 var(--cb-font-bold);letter-spacing:1.6px;text-transform:uppercase;color:var(--tint);margin-bottom:8px}
.dh-intent-title{font:700 24px/1.2 var(--cb-font-bold);letter-spacing:-.3px;margin-bottom:10px}
.dh-intent-copy{font:400 14px/1.55 var(--cb-font-regular);color:rgba(255,255,255,.78);margin-bottom:22px;min-height:38px}
.dh-hero-cta{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;background:var(--tint);color:var(--cb-chrome);border-radius:999px;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.2px;text-transform:uppercase;position:relative;overflow:hidden}
.dh-hero-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dh-hero-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-110%);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.dh-intent:hover .dh-hero-cta::after{transform:translateX(110%)}
/* ── signed-in hero: featured mosaic ── */
.dh-userhero{position:relative;background:var(--cb-chrome);padding:36px var(--gut) 44px;border-bottom:1px solid var(--cb-line-dark)}
.dh-userhero-inner{max-width:1640px;margin:0 auto}
.dh-userhero .dh-sechead h2{color:#e8eaf0}
.dh-userhero .dh-seeall{color:#9aa3b6}
.dh-featgrid{display:grid;grid-template-columns:1.5fr 1.5fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:clamp(380px,32vw,560px)}
.dh-feat{position:relative;display:block;border-radius:14px;overflow:hidden;background:#1b2230;color:#fff;isolation:isolate}
.dh-feat.is-lg,.dh-feat.is-promo{grid-row:span 2}
.dh-feat-img{position:absolute;inset:0;background:var(--img) center/cover no-repeat;transition:transform 480ms cubic-bezier(.22,.61,.36,1)}
.dh-feat:hover .dh-feat-img{transform:scale(1.04)}
.dh-feat-img.is-contain{background-size:contain;background-position:center 12%;background-color:#1e7fb8;background-image:var(--img),linear-gradient(160deg,#2aa1dc,#1e6fa6)}
.dh-feat.is-promo .dh-feat-img{background-image:var(--img),linear-gradient(160deg,#2aa1dc,#1a5f8e);background-size:auto 58%,cover;background-position:center 14%,center}
.dh-feat-wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,24,.05) 30%,rgba(10,14,24,.55) 65%,rgba(10,14,24,.9))}
.dh-feat-body{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dh-feat.is-sm .dh-feat-body{padding:16px 18px;gap:6px}
.dh-feat.is-promo .dh-feat-body{top:0;justify-content:flex-end;padding:28px 32px;gap:10px;background:linear-gradient(180deg,transparent 40%,rgba(14,40,64,.85))}
.dh-feat-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:4px;font:800 10px/1 var(--cb-font-bold);letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:var(--cb-link)}
.dh-feat-tag.is-news{background:var(--cb-amber);color:#1a1409}
.dh-feat-tag.is-sponsored{background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.dh-feat-tag.is-sale{background:var(--cb-error)}
.dh-feat-title{font:700 clamp(18px,1.5vw,26px)/1.2 var(--cb-font-bold);letter-spacing:-.3px;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.dh-feat.is-sm .dh-feat-title{font-size:clamp(15px,1.05vw,18px)}
.dh-feat-by{font:400 13px/1.3 var(--cb-font-regular);color:rgba(255,255,255,.75)}
.dh-feat-by span{color:var(--cb-link-text,var(--cb-link))}
.dh-feat-sub{font:400 15px/1.5 var(--cb-font-regular);color:rgba(255,255,255,.85);max-width:420px;margin-bottom:6px}
.dh-feat-meta{display:inline-flex;align-items:center;gap:8px;font:400 13px/1 var(--cb-font-regular);color:rgba(255,255,255,.7)}
.dh-feat-meta .cb-stars{font-size:14px;color:rgba(255,255,255,.25)}
.dh-feat-dot{opacity:.5}
.dh-feat-price{position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(14,19,32,.72);backdrop-filter:blur(8px);color:#fff;font:700 15px/1 var(--cb-font-bold);border:1px solid rgba(255,255,255,.14);transition:background-color 160ms,color 160ms}
.dh-feat-price s{color:rgba(255,255,255,.55);font:400 12px/1 var(--cb-font-regular)}
.dh-feat:hover .dh-feat-price{background:var(--cb-link);border-color:var(--cb-link)}
.dh-feat.is-sm .dh-feat-price{height:28px;padding:0 11px;font-size:13px;top:12px;right:12px}
.dh-feat .dh-hero-cta{margin-top:4px}
@media(max-width:1100px){.dh-featgrid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}.dh-feat{aspect-ratio:16/10}.dh-feat.is-lg,.dh-feat.is-promo{grid-row:auto}.dh-feat.is-promo .dh-feat-img{background-size:auto 36%,cover;background-position:right 24px top 20px,center}.dh-feat.is-promo .dh-feat-body{padding:22px 24px;background:linear-gradient(180deg,transparent 20%,rgba(14,40,64,.9) 60%)}}
.dh-recommended .dh-sechead h2 em{font-style:normal;color:var(--cb-link-text,var(--cb-link))}
/* ── sections ── */
.dh-section{padding:52px var(--gut)}
/* Slab edges dissolve to TRANSPARENT (not to --cb-bg) so the fixed backdrop blobs show through the fade instead of meeting a hard opaque edge. */
.dh-slab{position:relative;background:var(--cb-slab);padding:56px var(--gut)}
.dh-slab.fade-top{background:linear-gradient(180deg,transparent,var(--cb-slab) 110px)}
.dh-slab.fade-bottom{background:linear-gradient(0deg,transparent,var(--cb-slab) 110px)}
.dh-slab.fade-top+.dh-slab.fade-bottom{margin-top:0}
.dh-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.dh-eyebrow{font:700 11px/1 var(--cb-font-bold);letter-spacing:2px;text-transform:uppercase;color:var(--cb-link-text,var(--cb-link));margin-bottom:12px}
.dh-sechead h2{font:300 clamp(28px,2.6vw,38px)/1.1 var(--cb-font-light);letter-spacing:-.6px;color:var(--cb-text)}
.dh-sechead p{margin-top:8px;font:400 15px/1.5 var(--cb-font-regular);color:var(--cb-sec);max-width:720px}
.dh-seeall{display:inline-flex;align-items:center;gap:8px;color:var(--cb-sec);font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;padding:8px 0}
.dh-seeall svg,.dh-outline svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dh-outline{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 32px;white-space:nowrap;flex:none;color:var(--cb-link-text,var(--cb-link));border:1px solid var(--cb-link);border-radius:999px;font:700 13px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase}
.dh-center{display:flex;justify-content:center;margin-top:36px}
/* product grids */
.dh-grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.dh-grid.is-2rows>:nth-child(n+7){display:none}
@media(min-width:960px){.dh-grid{grid-template-columns:repeat(4,1fr)}.dh-grid.is-2rows>:nth-child(n+7){display:block}.dh-grid.is-2rows>:nth-child(n+9){display:none}}
@media(min-width:1280px){.dh-grid{grid-template-columns:repeat(5,1fr)}.dh-grid.is-2rows>:nth-child(n+9){display:block}.dh-grid.is-2rows>:nth-child(n+11){display:none}}
@media(min-width:1600px){.dh-grid{grid-template-columns:repeat(6,1fr)}.dh-grid.is-2rows>:nth-child(n+11){display:block}}
/* featured rail */
.dh-rail-wrap{position:relative}
/* The rail bleeds to the viewport edges (padding = page gutter, cancelled by negative margins) so the clip line is the screen edge, never a line inside the page. */
.dh-rail{--pad:var(--gut);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--pad) - 2*18px)/3);gap:18px;overflow-x:auto;scroll-snap-type:none;cursor:grab;scroll-padding-inline:var(--pad);scrollbar-width:none;padding:10px var(--pad) 34px;margin:-10px calc(-1 * var(--pad)) -34px}
.dh-rail::-webkit-scrollbar{display:none}
.dh-rail>li{position:relative;-webkit-user-drag:none;user-select:none}
.dh-rail img{-webkit-user-drag:none}
.dh-rail.is-dragging{cursor:grabbing;user-select:none}
.dh-rail.is-dragging>li{pointer-events:none}
.dh-rail.is-dragging .cb-pcard{transform:none!important;transition:none!important}
@media(min-width:960px){.dh-rail{grid-auto-columns:calc((100% - 2*var(--pad) - 3*18px)/4)}}
@media(min-width:1280px){.dh-rail{grid-auto-columns:calc((100% - 2*var(--pad) - 4*18px)/5)}}
@media(min-width:1600px){.dh-rail{grid-auto-columns:calc((100% - 2*var(--pad) - 5*18px)/6)}}
.dh-pick{position:absolute;top:10px;left:10px;z-index:4;display:inline-flex;align-items:center;gap:5px;padding:4.5px 9px;background:rgba(20,23,33,.85);backdrop-filter:blur(8px);color:#fff;border-radius:999px;font:700 9px/1 var(--cb-font-bold);letter-spacing:.8px;text-transform:uppercase}
.dh-pick svg{width:11px;height:11px;fill:var(--cb-warn)}
.dh-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--cb-surface);border:1px solid var(--cb-border-hard);box-shadow:0 6px 18px rgba(0,0,0,.32);z-index:3;color:var(--cb-text);display:inline-flex;align-items:center;justify-content:center}
.dh-arrow.prev{left:-22px}
.dh-arrow.next{right:-22px}
.dh-rail-wrap .dh-arrow{top:calc(50% - 12px);z-index:6}
.dh-rail>li:hover{z-index:2}
.dh-arrow:disabled{opacity:.4;cursor:not-allowed}
.dh-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* tabs */
.dh-tabs{position:relative;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--cb-border-hard);margin-bottom:28px}
/* Sliding underline: same as mobile (.hm-tab-indicator, positioned by wireTabs in mobile-compat.js; opt in with data-tab-slider). */
.hm-tab-indicator{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--cb-link);border-radius:2px;pointer-events:none;transform:translate3d(0,0,0);transition:transform 320ms cubic-bezier(.32,.72,.24,1),width 320ms cubic-bezier(.32,.72,.24,1),background-color 320ms ease;will-change:transform,width}
.has-indicator .dh-tab[aria-selected="true"]{border-bottom-color:transparent}
/* ── toolbar: sticky row under the chrome shared by marketplace + store (tabs left, search pill + controls right), centred at 1200 ── */
/* Opaque (covers the paper dots and whatever scrolls under it); a shadow appears once pinned. */
.dh-toolbar{position:sticky;top:var(--cb-chrome-h,73px);z-index:40;background:var(--cb-bg);border-bottom:1px solid var(--cb-border);padding:0 var(--gut);transition:box-shadow 220ms}
.dh-toolbar.is-pinned{box-shadow:0 8px 24px rgba(20,23,33,.12)}
.dh-toolbar.is-static{position:relative;top:auto;box-shadow:none}
.dh-toolbar-inner{max-width:1640px;margin:0 auto;display:flex;align-items:center;gap:16px;height:56px}
.dh-toolbar .dh-tabs{border:0;margin:0;flex:1;gap:24px;height:100%}
.dh-toolbar .dh-tab{padding:0;height:100%;display:inline-flex;align-items:center;border-bottom-width:3px;margin:0;white-space:nowrap}
/* tabs read as navigation: caps + pipe separators, like mobile .ms-crumb-tabs */
.dh-tabs[data-tab-slider]{gap:0}
.dh-tabs[data-tab-slider] .dh-tab,.dh-tabs[data-tab-slider] .ms-crumb-tab{font:600 13px/1 var(--cb-font-bold);letter-spacing:1.6px;text-transform:uppercase;color:var(--cb-sec);padding:12px 18px 16px;white-space:nowrap;flex:none}
.dh-toolbar .dh-tabs[data-tab-slider] .dh-tab,.dh-toolbar .dh-tabs[data-tab-slider] .ms-crumb-tab{padding:0 18px}
.dh-tabs[data-tab-slider] .dh-tab:first-child{padding-left:0}
.dh-tabs[data-tab-slider] .dh-tab[aria-selected="true"],.dh-tabs[data-tab-slider] .ms-crumb-tab[aria-selected="true"]{color:var(--cb-text);font-weight:700}
.dh-tabs[data-tab-slider] .dh-tab+.dh-tab{position:relative}
/* r38 A14: the separator has empty alternative text, so it stays out of the tab's name ("| Course content"); the plain declaration first is the fallback. */
.dh-tabs[data-tab-slider] .dh-tab+.dh-tab::before{content:'|';content:'|' / '';position:absolute;left:-3px;top:50%;transform:translateY(-50%);color:var(--cb-border-hard);font-weight:400;letter-spacing:0;pointer-events:none}
.dh-tabs[data-tab-slider] .dh-tab[hidden]+.dh-tab::before{display:none}
.dh-toolbar-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.dh-search-pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 12px;border-radius:999px;border:1px solid var(--cb-border-hard);color:var(--cb-sec);transition:border-color 160ms}
.dh-search-pill:focus-within{border-color:var(--cb-link)}
.dh-search-pill input{width:220px;background:transparent;border:0;outline:0;color:var(--cb-text);font:400 13px/1 var(--cb-font-regular)}
.dh-search-pill svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.dh-search-pill button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:inherit}
.dh-ftoggle{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--cb-border-hard);color:var(--cb-text);font:600 12px/1 var(--cb-font-bold);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;transition:opacity 220ms var(--cb-ease),max-width 260ms var(--cb-ease),padding 260ms var(--cb-ease),margin-left 260ms var(--cb-ease),border-color 220ms;max-width:200px;overflow:hidden}
.dh-ftoggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.dh-ftoggle[aria-expanded="true"]{background:var(--cb-slab);border-color:var(--cb-border)}
.dh-ftoggle.dh-filter-toggle[aria-expanded="true"]{background:var(--cb-slab);border-color:var(--cb-link)}
.dh-ftoggle .n{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--cb-link);color:#fff;font:700 10px/1 var(--cb-font-bold);display:inline-flex;align-items:center;justify-content:center}
.dh-toolbar.is-stuck .dh-ftoggle.is-collapsible{opacity:0;max-width:0;padding-left:0;padding-right:0;border-color:transparent;margin-left:-12px;pointer-events:none}
@media(max-width:1180px){.dh-search-pill input{width:150px}}
/* ── filters panel (shared by marketplace + store; markup mirrors the mobile filter sheet). Animated open/close via grid-rows; compact inline groups instead of mobile's accordions. ── */
.dh-filters{position:relative;z-index:20;padding:0 var(--gut);display:grid;grid-template-rows:1fr;transition:grid-template-rows 320ms var(--cb-ease)}
.dh-filters.is-closed{grid-template-rows:0fr}
.dh-filters-clip{min-height:0;overflow:hidden;max-width:1640px;width:100%;margin:0 auto}
.dh-filters:not(.is-closed):not(.is-transitioning)>.dh-filters-clip{overflow:visible}
.dh-filters-inner{margin:14px 0 0;background:var(--cb-slab);border:1px solid var(--cb-border);border-radius:12px;padding:14px 18px 12px;transition:opacity 220ms,transform 320ms var(--cb-ease)}
.dh-filters.is-closed .dh-filters-inner{opacity:0;transform:translateY(-8px)}
.dh-fhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dh-fhead .title{font:700 14px/1 var(--cb-font-bold);color:var(--cb-text)}
.dh-reset{color:var(--cb-sec);font:600 11px/1 var(--cb-font-bold);letter-spacing:1.2px;text-transform:uppercase;padding:6px 0}
.dh-reset:hover{color:var(--cb-link-text,var(--cb-link))}
.dh-reset:disabled{color:var(--cb-muted);opacity:.6;cursor:default}
.dh-fblock,.dh-fgroup,.dh-fsection{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;min-height:36px}
.dh-flabel,.dh-fsection-head{white-space:nowrap;font:700 10.5px/1 var(--cb-font-bold);letter-spacing:1.5px;text-transform:uppercase;color:var(--cb-sec);margin:0;width:auto;height:auto;flex:none;display:inline-flex;align-items:center;gap:6px}
.dh-fsection-head{pointer-events:none;text-align:left}
.dh-fsection-head .chev{display:none}
.dh-fsection-head .label{flex:none}
.dh-fsection-head .count{min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--cb-link);color:#fff;font:700 9px/1 var(--cb-font-bold);display:inline-flex;align-items:center;justify-content:center}
.dh-fsection-body{display:block;padding:0}
.dh-fsections{display:flex;flex-wrap:wrap;gap:4px 28px;padding:6px 0 4px;border-top:1px solid var(--cb-border);margin-top:6px}
.dh-fsections:not(:has(.dh-fsection:not([hidden]))){display:none}
.dh-frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 36px;padding-top:8px;border-top:1px solid var(--cb-border);margin-top:6px}
.dh-chips{display:flex;flex-wrap:wrap;gap:6px}
.dh-chip{white-space:nowrap;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--cb-border-hard);background:transparent;color:var(--cb-text);font:600 12px/1 var(--cb-font-semibold);letter-spacing:.2px;transition:background 140ms,border-color 140ms,color 140ms}
.dh-chip:hover{border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}
.dh-chip[aria-pressed="true"]{background:var(--cb-link);border-color:var(--cb-link);color:#fff}
.dh-segment{display:inline-flex;padding:2px;border-radius:999px;background:var(--cb-surface);border:1px solid var(--cb-border)}
.dh-segment button{height:26px;padding:0 14px;border-radius:999px;color:var(--cb-sec);font:600 12px/1 var(--cb-font-semibold);transition:background 140ms,color 140ms}
.dh-segment button[aria-pressed="true"]{background:var(--cb-link);color:#fff}
.dh-price{display:flex;align-items:center;gap:10px;height:30px;font:600 12px/1 var(--cb-font-semibold);color:var(--cb-text)}
.dh-range{position:relative;width:min(240px,24vw);height:30px;display:flex;align-items:center}
.dh-range-track{position:absolute;left:0;right:0;height:4px;border-radius:2px;background:var(--cb-border-hard)}
.dh-range-fill{position:absolute;height:4px;border-radius:2px;background:var(--cb-link);left:0;right:calc(100% - var(--hi,100%))}
.dh-range input{position:absolute;left:0;right:0;width:100%;margin:0;appearance:none;background:transparent;height:30px}
.dh-range input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--cb-link);box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:grab}
.dh-range input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--cb-link);cursor:grab}
.dh-rating{display:inline-flex;gap:6px}
.dh-rating button{height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--cb-border-hard);color:var(--cb-text);font:600 12px/1 var(--cb-font-semibold);display:inline-flex;align-items:center;gap:3px;transition:background 140ms,border-color 140ms,color 140ms}
.dh-rating button .star{color:#f5a623;font-size:13px}
.dh-rating button:hover{border-color:var(--cb-link)}
.dh-rating button[aria-pressed="true"]{background:var(--cb-link);border-color:var(--cb-link);color:#fff}
.dh-rating button[aria-pressed="true"] .star{color:#fff}
.dh-fempty{padding:60px 20px;text-align:center;color:var(--cb-sec)}
.dh-fempty b{display:block;color:var(--cb-text);font:600 18px/1.3 var(--cb-font-semibold);margin-bottom:6px}
/* one underline animation everywhere: static/mobile underlines off whenever the slider is present */
.has-indicator [role="tab"]::after{display:none!important}
.has-indicator [role="tab"]{border-bottom-color:transparent!important}
/* Mobile bottom sheets (.ms-edit-sheet) become centred dialogs on desktop: same markup, scale+fade instead of slide-up. */
.ms-edit-sheet{position:fixed;inset:0;z-index:95;display:none}
.ms-edit-sheet.is-open{display:block}
.ms-edit-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background 220ms cubic-bezier(.32,.72,.24,1)}
.ms-edit-sheet.is-shown .ms-edit-sheet-backdrop{background:rgba(20,23,33,.55)}
.ms-edit-sheet-panel{background:var(--cb-card);color:var(--cb-text)}
.ms-edit-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px}
.ms-edit-sheet-title{font:600 20px/1.2 var(--cb-font-semibold)}
.ms-edit-sheet-cancel{color:var(--cb-link-text,var(--cb-link));font:700 12px/1 var(--cb-font-bold);letter-spacing:1.2px;text-transform:uppercase}
.ms-edit-sheet-body{padding:0 22px 18px;overflow:auto}
/* body-prefixed so these beat the identical-specificity mobile rules in the page stylesheets (loaded later); centring uses the translate property, which mobile never sets. */
body .ms-edit-sheet .ms-edit-sheet-panel{position:absolute;left:50%;top:max(48px,8vh);bottom:auto;right:auto;width:min(560px,calc(100vw - 48px));max-width:none;max-height:calc(100vh - max(48px,8vh) * 2);border-radius:16px;translate:-50% 0;transform:scale(.96);opacity:0;transition:transform 260ms var(--cb-ease),opacity 200ms ease;box-shadow:0 30px 80px rgba(0,0,0,.45)}
body .ms-edit-sheet.is-shown .ms-edit-sheet-panel{transform:scale(1);opacity:1}
.ms-edit-sheet .ms-edit-sheet-handle{display:none}
.ms-edit-sheet .ms-edit-sheet-head{padding-top:18px}
.ms-edit-sheet .ms-edit-sheet-body{overflow-y:auto;flex:1 1 auto;min-height:0;padding-bottom:26px}
.ms-edit-sheet .ms-edit-sheet-body>.ms-edit-form-row:last-child,.ms-edit-sheet .ms-edit-sheet-body>[data-ms-post-images],.ms-edit-sheet .ms-edit-sheet-body>[data-up-post-images]{margin-bottom:18px}
/* Dialog surfaces follow mobile: panel = card, fields = bg (dark: #1f2636 / #141926; light: #f9f8fb / #fff). */
.ms-edit-sheet-panel,.cb-sheet,.ms-modal{background:var(--cb-card)}
.ms-edit-sheet .ms-edit-form-input,.ms-edit-sheet .ms-edit-form-textarea,.ms-edit-sheet .ms-post-group,.ms-edit-sheet .ms-post-add-image,.ms-edit-sheet .ms-postkind:not(.is-active){background:var(--cb-bg);border-color:var(--cb-border-hard)}
/* Light mode: dialogs use the mobile light palette (tinted panel, white fields) instead of white on white. */
[data-theme="light"] .ms-edit-sheet-panel,[data-theme="light"] .cb-sheet,[data-theme="light"] .ms-modal{background:#f9f8fb}
[data-theme="light"] .ms-edit-sheet .ms-edit-form-input,[data-theme="light"] .ms-edit-sheet .ms-edit-form-textarea,[data-theme="light"] .ms-edit-sheet .ms-post-group,[data-theme="light"] .ms-edit-sheet .ms-post-add-image,[data-theme="light"] .ms-edit-sheet .ms-poll-opt .ms-edit-form-input{background:#fff;border-color:#d2d7db}
[data-theme="light"] .ms-edit-sheet .ms-postkind:not(.is-active){background:#fff;border-color:#d2d7db}
[data-theme="light"] .ms-edit-sheet .ms-edit-sheet-head{border-bottom:1px solid #eceef2}
.ms-edit-sheet .ms-edit-form-textarea{resize:vertical;min-height:96px}
html{scrollbar-gutter:stable}
/* Composer sections collapse per post type (from site.css; attribute selectors the class-based extractor skipped). */
[data-ms-post-launch],[data-ms-post-sale],[data-ms-post-poll],[data-ms-post-images],[data-up-post-poll],[data-up-post-images],[data-up-post-message],[data-ms-post-message]{overflow:hidden;max-height:800px;opacity:1;transition:max-height 260ms cubic-bezier(.32,.72,.24,1),opacity 160ms ease,margin-bottom 280ms cubic-bezier(.32,.72,.24,1),padding-top 280ms cubic-bezier(.32,.72,.24,1),padding-bottom 280ms cubic-bezier(.32,.72,.24,1)}
[data-ms-post-launch].is-collapsed,[data-ms-post-sale].is-collapsed,[data-ms-post-poll].is-collapsed,[data-ms-post-images].is-collapsed,[data-up-post-poll].is-collapsed,[data-up-post-images].is-collapsed,[data-up-post-message].is-collapsed,[data-ms-post-message].is-collapsed{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;pointer-events:none}
/* Cover adjust bar: a single-row toolbar in the page right under the cover band, sticking under the site header on scroll (Michael's manual testing, 2026-10-20: floated at the window's bottom it went unnoticed). */
body .ms-cover-adjust{position:sticky;top:var(--cb-chrome-h,102px);bottom:auto;width:min(920px,calc(100% - 48px));margin:12px auto 0;padding:0;z-index:40}
body .ms-cover-adjust-card{display:flex;align-items:center;gap:18px;padding:12px 16px;border-radius:14px}
body .ms-cover-adjust-row1{display:contents}
body .ms-cover-adjust-row2,body .ms-cover-adjust-row3{margin:0;gap:10px}
body .ms-cover-adjust-row2{flex:0 0 auto}
body .ms-cover-adjust-row3{flex:1 1 200px;min-width:160px}
body .ms-cover-adjust-change{flex:0 0 auto;white-space:nowrap}
body .ms-cover-adjust-row-label{width:auto}
body .ms-cover-adjust-change{order:-2}
body .ms-cover-adjust-row2{order:-1}
body .ms-cover-adjust-cancel{margin-left:auto}
body .ms-cover-adjust-row3 input[type="range"]{min-width:120px}
body .ms-cover-tint-custom.is-active{box-shadow:0 0 0 2px var(--cb-link)}
body .ms-cover-tint-custom.is-active svg{opacity:0}
body .ms-cover-drag-hint{top:50%;translate:-50% -50%}
body .ms-cover-presets{grid-template-columns:repeat(3,1fr);margin-top:14px}
body .ms-cover-upload+*{margin-top:18px}
@media(max-width:900px){body .ms-cover-adjust-card{flex-wrap:wrap}body .ms-cover-adjust-row3{flex-basis:100%}}
/* composer field: white card so it stands out from the feed */
.dh-paper-bg .ms-pc-field{background:var(--cb-card);border:1px solid var(--cb-border);box-shadow:0 2px 8px rgba(20,23,33,.06)}
/* store link inside product cards (cards are <a>, so this is a span; desktop.js routes the click) */
.cb-pcard-store{color:var(--cb-link-text,var(--cb-link));cursor:pointer}
.cb-pcard-store:hover{text-decoration:underline}
.dh-tab{padding:12px 0 16px;font:500 14px/1 var(--cb-font-bold);color:var(--cb-sec);border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:.2px;transition:color .16s}
.dh-tab[aria-selected="true"]{font-weight:700;color:var(--cb-text);border-bottom-color:var(--cb-link)}
/* category tiles */
.dh-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(min-width:1280px){.dh-cats{grid-template-columns:repeat(10,1fr)}}
.dh-cat{position:relative;display:block;aspect-ratio:5/6;border-radius:4px;overflow:hidden;background:var(--cb-chrome);box-shadow:0 1px 2px rgba(0,0,0,.2),0 12px 28px -16px rgba(0,0,0,.5);transition:transform 220ms cubic-bezier(.22,.61,.36,1)}
.dh-cat:hover{transform:translateY(-4px)}
.dh-cat-thumb{position:absolute;inset:0;background:var(--bg) center/cover no-repeat;filter:saturate(.9);transition:transform 320ms cubic-bezier(.22,.61,.36,1)}
.dh-cat:hover .dh-cat-thumb{transform:scale(1.06)}
.dh-cat-dark{position:absolute;inset:0;background:linear-gradient(160deg,rgba(20,32,56,.55),rgba(10,18,36,.72));transition:opacity 240ms}
.dh-cat-color{position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--cat-tint) 78%,transparent),color-mix(in srgb,var(--cat-tint) 62%,#000 20%));opacity:0;transition:opacity 240ms}
.dh-cat:hover .dh-cat-dark{opacity:0}
.dh-cat:hover .dh-cat-color{opacity:1}
.dh-cat-wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 40%,rgba(0,0,0,.55))}
.dh-cat-label{text-shadow:0 1px 8px rgba(0,0,0,.5)}
.dh-cat-label svg{filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.dh-cat-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px 10px;color:#fff;text-align:center;font:700 11px/1.25 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase}
.dh-cat-label svg{width:38px;height:38px;fill:#fff}
.dh-cat-label svg [fill="none"]{stroke:#fff;stroke-width:1.6}
.dh-cat-stripe{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cat-tint)}
/* news band */
.dh-band{position:relative;max-width:1640px;margin:0 auto;border-radius:24px;overflow:hidden;background:linear-gradient(120deg,#1f7fcc,#2d8fcc 40%,#5b8def);min-height:240px;color:#fff;display:grid;grid-template-columns:1.2fr 1fr}
.dh-band-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px);background-size:24px 24px;opacity:.6;-webkit-mask-image:radial-gradient(60% 80% at 80% 50%,#000,transparent 70%);mask-image:radial-gradient(60% 80% at 80% 50%,#000,transparent 70%)}
.dh-band-copy{position:relative;padding:40px 48px;display:flex;flex-direction:column;justify-content:center}
.dh-band-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;background:rgba(255,255,255,.16);border-radius:999px;font:700 11px/1 var(--cb-font-bold);letter-spacing:1.6px;text-transform:uppercase;width:fit-content;margin-bottom:16px}
.dh-band h2{font:300 clamp(30px,3vw,44px)/1.05 var(--cb-font-light);letter-spacing:-.6px;margin-bottom:14px;max-width:540px}
.dh-band h2 b{font-weight:700}
.dh-band p{font:400 16px/1.55 var(--cb-font-regular);color:rgba(255,255,255,.86);max-width:540px;margin-bottom:24px}
.dh-band-actions{display:flex;align-items:center;gap:14px}
.dh-band-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 26px;background:#fff;color:#1f7fcc;border-radius:999px;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase}
.dh-band-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dh-band-link{color:#fff;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;opacity:.9}
.dh-band-link:hover{color:#fff}
.dh-band-art{position:relative}
.dh-band-art img{position:absolute;right:24px;top:24px;bottom:24px;height:calc(100% - 48px);width:auto;max-width:94%;object-fit:contain;object-position:right center;filter:drop-shadow(0 12px 28px rgba(20,23,33,.22))}
@media(max-width:900px){.dh-band{grid-template-columns:1fr}.dh-band-art{display:none}}
/* The category search (tester-r's Discovery round, item 1): the marketplace lists every category of the
   picked resource, so a name narrows them. */
.dh-fsearch{display:block;width:100%;box-sizing:border-box;height:36px;margin:10px 0 2px;padding:0 12px;border:1px solid var(--cb-border);border-radius:8px;background:transparent;color:var(--cb-text);font:400 13px/1 var(--cb-font-regular)}
.dh-fsearch[hidden]{display:none}
.dh-fsearch::placeholder{color:var(--cb-text-sec,var(--cb-muted))}
.dh-fsearch-empty{margin:10px 0 2px;color:var(--cb-text-sec,var(--cb-muted));font:400 13px/1.4 var(--cb-font-regular)}
.dh-fsearch-empty[hidden]{display:none}

/* ── product card (verbatim mobile .cb-pcard, dark tokens) ── */
/* Card internals scale with card width via container query units. --u = 1px at a ≥300px card (6-up at 1920 CSS px - the approved size), and shrinks proportionally below that, floored at .78px. */
.cb-pcard{--u:clamp(.78px,calc(100cqw / 300),1px);container-type:inline-size;background:var(--cb-card);border-radius:12px;overflow:hidden;display:block;color:inherit;box-shadow:0 6px 18px rgba(20,23,33,.10),0 1px 3px rgba(20,23,33,.06);transition:box-shadow 160ms var(--cb-ease),transform 160ms var(--cb-ease)}
.cb-pcard:hover{box-shadow:0 14px 32px rgba(20,23,33,.18),0 2px 5px rgba(20,23,33,.10);transform:translateY(-2px);color:inherit}
.cb-pcard-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a4560,#6a7390 60%,#b49a74)}
.cb-pcard-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 200ms}
/* gallery preview - cards with data-gallery get prev/next arrows on hover */
.cb-pcard-nav{position:absolute;top:50%;transform:translateY(-50%);width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:50%;background:rgba(20,23,33,.72);color:#fff;display:inline-flex;align-items:center;justify-content:center;z-index:4;opacity:0;transition:opacity 160ms,background-color 160ms;backdrop-filter:blur(4px)}
.cb-pcard-nav.prev{left:8px}
.cb-pcard-nav.next{right:8px}
.cb-pcard:hover .cb-pcard-nav{opacity:1}
.cb-pcard-nav:hover{background:rgba(20,23,33,.92)}
.cb-pcard-nav svg{width:calc(17 * var(--u));height:calc(17 * var(--u));stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cb-pcard-dots{position:absolute;left:50%;bottom:calc(12 * var(--u));transform:translateX(-50%);display:flex;gap:5px;z-index:5;padding:5px 7px;border-radius:999px;background:rgba(20,23,33,.45);opacity:.7;transition:opacity 160ms;pointer-events:none}
.cb-pcard:hover .cb-pcard-dots{opacity:1}
.cb-pcard-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45)}
.cb-pcard-dots i.on{background:#fff}
.cb-pcard-thumb .scrim{position:absolute;inset:auto 0 0 0;height:52px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.4));pointer-events:none}
/* Badges - desktop sizes (mobile is 10px); sale badge is the loudest. */
.cb-pcard-chip{position:absolute;background:rgba(20,23,33,.82);color:#fff;font:700 calc(10.8 * var(--u))/1 var(--cb-font-semibold);letter-spacing:.5px;padding:calc(5.5 * var(--u)) calc(8 * var(--u));border-radius:4px;z-index:2}
.cb-pcard-chip.is-stock-critical{background:var(--cb-error);display:inline-flex;align-items:center;gap:6px;padding:calc(7 * var(--u)) calc(10 * var(--u));border-radius:5px;box-shadow:0 2px 6px rgba(20,23,33,.3)}
.cb-pcard-chip.is-stock-critical svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}
.cb-pcard-discount{white-space:nowrap;position:absolute;right:calc(10 * var(--u));bottom:calc(10 * var(--u));z-index:3;background:var(--cb-error);color:#fff;font:800 calc(12.6 * var(--u))/1 var(--cb-font-bold);letter-spacing:.6px;padding:calc(7 * var(--u)) calc(10 * var(--u));border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.3)}
/* Video trailer marker - top-left of the thumb, where nothing else lives. Mirrors mobile .cb-pcard-chip.is-3d styling. */
.cb-pcard-video{position:absolute;top:calc(10 * var(--u));left:calc(10 * var(--u));z-index:3;display:inline-flex;align-items:center;gap:6px;height:calc(25 * var(--u));padding:0 calc(9 * var(--u)) 0 calc(7 * var(--u));border-radius:999px;background:rgba(20,23,33,.78);color:#fff;font:700 calc(10 * var(--u))/1 var(--cb-font-semibold);letter-spacing:.8px;text-transform:uppercase;backdrop-filter:blur(6px)}
.cb-pcard-video svg{width:calc(14 * var(--u));height:calc(14 * var(--u));fill:#fff}
.dh-pick~.cb-pcard .cb-pcard-video,li:has(.dh-pick) .cb-pcard-video{top:auto;bottom:10px;left:10px}
li:has(.dh-pick) .cb-pcard-thumb:has(.cb-pcard-chip) .cb-pcard-video{bottom:calc(46 * var(--u))}
.cb-pcard-heart{position:absolute;top:calc(10 * var(--u));right:calc(10 * var(--u));z-index:3;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:50%;background:rgba(20,23,33,.55);color:#fff;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:background-color 160ms ease,transform 140ms ease}
.cb-pcard-heart:hover{background:rgba(20,23,33,.8)}
.cb-pcard-heart[aria-pressed="true"]{background:var(--cb-heart);box-shadow:0 2px 6px rgba(255,90,95,.4)}
.cb-pcard-heart svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.cb-pcard-body{padding:calc(12 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u))}
.cb-pcard-title{font:600 calc(16 * var(--u))/1.45 var(--cb-font-semibold);color:var(--cb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-pcard-byline{font:400 calc(13 * var(--u))/1.35 var(--cb-font-regular);color:var(--cb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-pcard-byline span{color:var(--cb-link-text,var(--cb-link))}
/* The footer row gives way in this order when a card is narrow or the figures long (QA item 177: 4,329 ratings beside $600 struck and $396, or a $2,800 price in a display currency, pushed the cart button out of the card): the rating and the price line start at their narrowest (the count under the stars, the struck price above the sale price, as the legacy card stacked it) and grow back to one line each, the rating first; if even that does not fit, the price and the button take a second row under the rating. The button never shrinks and an amount never breaks. */
.cb-pcard-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:0 calc(8 * var(--u)) calc(8 * var(--u));gap:calc(4 * var(--u)) 10px;margin-bottom:4px;min-height:calc(36 * var(--u))}
.cb-pcard-rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 7px;color:var(--cb-muted);font:400 calc(13 * var(--u))/1 var(--cb-font-regular);padding-left:calc(8 * var(--u));width:min-content;max-width:max-content;flex:100 0 auto}
.cb-pcard-rating>span{white-space:nowrap}
.cb-stars{position:relative;display:inline-flex;color:var(--cb-stars-empty);font-size:calc(17 * var(--u));line-height:1;letter-spacing:1px}
.cb-stars::before{content:"\2605 \2605 \2605 \2605 \2605"}
.cb-stars-fill{position:absolute;top:0;left:0;bottom:0;color:#f5a623;overflow:hidden;white-space:nowrap;width:var(--fill,0%);letter-spacing:1px}
.cb-stars-fill::before{content:"\2605 \2605 \2605 \2605 \2605"}
.cb-pcard-priceline{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;width:min-content;max-width:max-content;flex:1 0 auto;margin-left:auto}
.cb-pcard-price{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;column-gap:6px;row-gap:2px;font:700 calc(17 * var(--u))/1 var(--cb-font-semibold);color:var(--cb-text);padding:calc(6 * var(--u)) calc(10 * var(--u));border-radius:6px;transition:background-color 160ms,color 160ms,transform 160ms}
.cb-pcard:hover .cb-pcard-price{background:var(--cb-link);color:#fff}
.cb-pcard:hover .cb-pcard-price .cb-pcard-price-was{color:rgba(255,255,255,.7)}
.cb-pcard:hover .cb-pcard-title{color:var(--cb-link-text,var(--cb-link))}
.cb-pcard-price.is-sale{color:var(--cb-link-text,var(--cb-link))}
.cb-pcard-price-was{color:var(--cb-muted);font-weight:400;text-decoration:line-through;font-size:calc(12 * var(--u))}
.cb-pcard-price bdi{white-space:nowrap}
.cb-pcard-add{flex:none;display:inline-flex;align-items:center;justify-content:center;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:999px;background:var(--cb-link);color:#fff;box-shadow:0 2px 6px rgba(64,179,222,.35);transition:transform 140ms ease,filter 140ms ease,background-color 160ms ease}
.cb-pcard-add:hover{transform:translateY(-1px);filter:brightness(1.06)}
.cb-pcard-add svg{width:calc(17 * var(--u));height:calc(17 * var(--u));stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cb-pcard-add[data-cart-state="added"]{background:var(--cb-commit);box-shadow:0 2px 6px rgba(123,193,120,.35)}
.cb-pcard-add[data-cart-state="remove-hover"]{background:var(--cb-error);box-shadow:0 2px 6px rgba(217,83,79,.4)}
.cb-pcard-add .cart-glyph-add,.cb-pcard-add .cart-glyph-check,.cb-pcard-add .cart-glyph-x{display:none}
.cb-pcard-add[data-cart-state="add"] .cart-glyph-add,.cb-pcard-add:not([data-cart-state]) .cart-glyph-add,.cb-pcard-add[data-cart-state="added"] .cart-glyph-check,.cb-pcard-add[data-cart-state="remove-hover"] .cart-glyph-x{display:inline}
.cb-pcard-add.cb-fly-src-pop{animation:cb-fly-src-pop 280ms cubic-bezier(.34,1.56,.64,1);will-change:transform;z-index:2}
@keyframes cb-fly-src-pop{0%{transform:scale(1)}25%{transform:scale(.965)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
/* cart button in chrome plays the mobile .hm-floatcart role (catch + confetti + count) */
.hm-floatcart-host{position:fixed;top:82px;right:var(--gut);z-index:60;pointer-events:none}
.hm-floatcart{position:relative;width:52px;height:52px;border-radius:50%;background:var(--cb-link);color:#fff;box-shadow:0 6px 18px rgba(20,23,33,.32),0 2px 4px rgba(20,23,33,.18);display:inline-flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity 200ms cubic-bezier(.22,.61,.36,1),transform 200ms cubic-bezier(.22,.61,.36,1),filter 160ms;float:right}
/* Empty carts cannot be revealed by scrolling or a delayed add animation. */
:root:not([data-cb-cart-filled]) :is(.hm-floatcart,.dh-cartpop),.hm-floatcart[hidden]{display:none!important}
.hm-floatcart.is-shown{opacity:1;transform:translateY(0);pointer-events:auto}
.hm-floatcart:hover{filter:brightness(1.06);color:#fff}
.hm-floatcart svg{width:26px;height:26px;display:block}
.hm-floatcart-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--cb-error);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 11px/1 var(--cb-font-semibold);border:2px solid #fff}
.hm-floatcart.cb-cart-catch{animation:cb-cart-catch 460ms cubic-bezier(.34,1.56,.64,1)}
@keyframes cb-cart-catch{0%{transform:translateY(0) scale(1)}30%{transform:translateY(2px) scale(.95)}55%{transform:translateY(-2px) scale(1.14)}80%{transform:translateY(0) scale(.98)}100%{transform:translateY(0) scale(1)}}
.cb-confetti{position:absolute;pointer-events:none;will-change:transform,opacity;z-index:60;animation:cb-confetti 800ms linear forwards,cb-confetti-fade 800ms linear forwards}
@keyframes cb-confetti{0%{transform:translate(-50%,-50%) scale(.4) rotate(0)}10%{transform:translate(calc(-50% + var(--cb-confetti-dx) * .1),calc(-50% + var(--cb-confetti-dy) * .1)) scale(1) rotate(calc(var(--cb-confetti-rot) * .1))}100%{transform:translate(calc(-50% + var(--cb-confetti-dx)),calc(-50% + var(--cb-confetti-dy))) scale(.92) rotate(var(--cb-confetti-rot))}}
@keyframes cb-confetti-fade{0%{opacity:0}10%,70%{opacity:1}100%{opacity:0}}
.cb-receipt-layer{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.cb-receipt-viewport{position:absolute;pointer-events:none;overflow:hidden;filter:drop-shadow(0 6px 14px rgba(96,76,12,.25)) drop-shadow(0 1px 2px rgba(96,76,12,.15))}
.cb-receipt-paper{will-change:transform,opacity;animation:cb-receipt-extrude 800ms cubic-bezier(.22,.61,.36,1) forwards;position:absolute;left:0;right:0;bottom:0;background:#fdf2c7;color:rgba(96,76,12,.82);padding:12px 14px 26px;font:700 9px/1.1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;gap:6px;clip-path:polygon(0% 0%,100% 0%,100% calc(100% - 14px),96% 100%,92% calc(100% - 14px),88% 100%,84% calc(100% - 14px),80% 100%,76% calc(100% - 14px),72% 100%,68% calc(100% - 14px),64% 100%,60% calc(100% - 14px),56% 100%,52% calc(100% - 14px),48% 100%,44% calc(100% - 14px),40% 100%,36% calc(100% - 14px),32% 100%,28% calc(100% - 14px),24% 100%,20% calc(100% - 14px),16% 100%,12% calc(100% - 14px),8% 100%,4% calc(100% - 14px),0% 100%,0% calc(100% - 14px))}
.cb-receipt-divider{height:0;border-top:1px dashed rgba(96,76,12,.55)}
.cb-receipt-thanks{text-align:center;font-size:16px;font-weight:800;letter-spacing:.24em;color:rgba(96,76,12,.92);flex:1 1 auto;display:flex;align-items:center;justify-content:center}
@keyframes cb-receipt-extrude{0%{transform:translateY(100%);opacity:0}18%{opacity:1}70%{transform:translateY(0)}100%{transform:translateY(-90px);opacity:0}}
/* cart popover (desktop) - light panel under the floating cart. Target ~300×640 with 1 item + 4 recs so it fits 768px-tall screens. */
.dh-cartpop{position:absolute;top:64px;right:0;width:308px;clear:both;background:#fff;color:#2c3242;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25);z-index:60;opacity:0;transform:translateY(-8px);transition:opacity 200ms var(--cb-ease),transform 240ms var(--cb-ease);pointer-events:none;max-height:calc(100vh - 170px);display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain}
.dh-cartpop::before{content:'';position:absolute;top:-6px;right:20px;width:12px;height:12px;background:#fff;transform:rotate(45deg);border-radius:2px}
.dh-cartpop.is-open{opacity:1;transform:none;pointer-events:auto}
/* Preview-only product controls must not intercept the open cart in short windows. */
body:has(.dh-cartpop.is-open) .pp-devswitch{visibility:hidden;pointer-events:none}
.dh-cartpop-tip{display:flex;align-items:center;gap:10px;margin:14px 14px 12px;padding:10px 12px;background:#e3f4fb;border-radius:6px;color:var(--cb-link-text,var(--cb-link));font:400 13px/1.35 var(--cb-font-regular)}
.dh-cartpop-tip svg{width:18px;height:18px;flex:none;fill:var(--cb-link)}
.dh-cartpop-tip small{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:#5a6478}
.dh-cartpop-tip.is-applied{background:#e8f5ed;color:#26763d}
.dh-cartpop-tip.is-applied svg{fill:currentColor}
.dh-cartpop-saving{display:flex;justify-content:space-between;gap:16px;flex:none;padding:0 16px 12px;color:#26763d;font-size:13px;line-height:1.4}
.dh-cartpop-items{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px;flex:none}
.dh-cartpop-items[data-scroll]{max-height:232px;scroll-behavior:smooth;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d2d7db transparent;padding-right:10px;margin-right:4px;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
.dh-cartpop-items[data-scroll]::-webkit-scrollbar{width:6px}
.dh-cartpop-items[data-scroll]::-webkit-scrollbar-thumb{background:#d2d7db;border-radius:3px}
.dh-cartpop-items[data-scroll]::-webkit-scrollbar-track{background:transparent}
.dh-cartpop-tip,.dh-cartpop-buy,.dh-cartpop-sub{flex:none}
.dh-cartpop-sub{display:flex;align-items:center;gap:10px;margin:16px 14px 10px;font:600 11px/1 var(--cb-font-semibold);letter-spacing:1.6px;text-transform:uppercase;color:#939ca2}
.dh-cartpop-sub::after{content:'';flex:1;height:1px;background:#eceef2}
.dh-cartpop-also{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d2d7db transparent;min-height:0}
.dh-cartpop-also::-webkit-scrollbar{width:6px}
.dh-cartpop-also::-webkit-scrollbar-thumb{background:#d2d7db;border-radius:3px}
.dh-cartpop-item{display:flex;align-items:center;gap:10px;border-radius:6px;margin:0 -6px;padding:4px 6px}
.dh-cartpop-item.is-new{animation:dh-cart-new 1.6s ease-out}
@keyframes dh-cart-new{0%{background:rgba(123,193,120,.28);box-shadow:inset 3px 0 0 var(--cb-commit)}60%{background:rgba(123,193,120,.18);box-shadow:inset 3px 0 0 var(--cb-commit)}100%{background:transparent;box-shadow:inset 3px 0 0 transparent}}
.dh-cartpop-item img{width:56px;height:56px;border-radius:4px;object-fit:cover;flex:none}
.dh-cartpop-item .t{flex:1;min-width:0;font:600 13px/1.3 var(--cb-font-semibold);color:#2c3242}
.dh-cartpop-item .t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-cartpop-item .t small{display:block;color:#939ca2;font:400 12px/1.3 var(--cb-font-regular);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-cartpop-item .t b{display:block;color:#5a6478;font:600 13px/1.3 var(--cb-font-semibold);margin-top:3px}
.dh-cartpop-rm{width:24px;height:24px;border-radius:50%;color:#939ca2;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:color 140ms,background 140ms}
.dh-cartpop-rm:hover{color:var(--cb-error);background:rgba(231,76,60,.10)}
.dh-cartpop-rm svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.dh-cartpop-buy{display:flex;align-items:stretch;background:var(--cb-commit);color:#fff;transition:filter 140ms}
.dh-cartpop-buy:hover{color:#fff;filter:brightness(1.05)}
.dh-cartpop-buy span{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:56px;font:600 13px/1 var(--cb-font-semibold);letter-spacing:2.2px;text-transform:uppercase}
.dh-cartpop-buy span small{font:600 11px/1 var(--cb-font-semibold);letter-spacing:0;text-transform:none;opacity:.85}
.dh-cartpop-buy b{display:flex;align-items:center;padding:0 14px;border-left:1px solid rgba(255,255,255,.35);font:700 17px/1 var(--cb-font-semibold)}
.dh-cartpop-empty{padding:26px 20px 22px;text-align:center;color:#5a6478;font:400 13px/1.5 var(--cb-font-regular)}
.dh-cartpop-empty b{display:block;color:#2c3242;font:600 15px/1.3 var(--cb-font-semibold);margin-bottom:4px}
.dh-cartpop-also{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.dh-cartpop-also li{display:flex;align-items:center;gap:10px}
.dh-cartpop-also a{flex:1;min-width:0;display:flex;align-items:center;gap:10px;color:#2c3242;font:400 13px/1.3 var(--cb-font-regular)}
.dh-cartpop-also a:hover{color:var(--cb-link-text,var(--cb-link))}
.dh-cartpop-also img{width:56px;height:56px;border-radius:4px;object-fit:cover;flex:none}
.dh-cartpop-also .t{min-width:0}
.dh-cartpop-also .t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-cartpop-also .t small{display:block;color:#939ca2;font-size:12px;margin-top:2px}
.dh-cartpop-also .cb-pcard-add{--u:1px;width:28px;height:28px;flex:none}
.dh-cartpop-also .cb-pcard-add svg{width:14px;height:14px}
/* A line whose product sold out (QA item 205), in the checkout's field-error red. */
.dh-cartpop-item .t small.dh-cartpop-sold-out{color:#d94848}
/* CO11: the title links to its product, in the row's own colour. */
.dh-cartpop-item .t a.dh-cartpop-title{color:inherit;text-decoration:none}
.dh-cartpop-item .t a.dh-cartpop-title:hover{text-decoration:underline}
/* A card the reader owns (visitor sweep MK6): a ringed check, not a cart; a press opens the product. */
.cb-pcard-add[data-cart-state="owned"]{background:var(--cb-card);box-shadow:inset 0 0 0 2px var(--cb-commit)}
.cb-pcard-add[data-cart-state="owned"] .cart-glyph-check{display:inline;stroke:var(--cb-commit)}
.cb-pcard-add[data-cart-state="owned"]:hover{transform:none;filter:none}
/* Master's New release / New update (visitor sweep MK7), in the chip slot. */
.cb-pcard-chip.is-new{background:var(--cb-link);color:#fff}
.cb-pcard-chip.is-new[hidden]{display:none}
/* Master's like and comment counts (visitor sweep MK13), beside the rating. */
.cb-pcard-stat{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font:600 11px/1 var(--cb-font-semibold);color:var(--cb-sec);text-decoration:none;white-space:nowrap}
.cb-pcard-stat svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
a.cb-pcard-stat:hover{color:var(--cb-link-text,var(--cb-link))}
/* Master's staff stamps (visitor sweep MK10), staff grids only. */
.cb-pcard-staff{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;z-index:2;pointer-events:none}
.cb-pcard-staff span{padding:3px 6px;border-radius:4px;background:rgba(20,23,33,.78);color:#fff;font:700 9.5px/1 var(--cb-font-bold);letter-spacing:.4px}
/* The NSFW cluster's cross-sell row above the grid (visitor sweep MK9). */
.mp-cross-sell{margin:0 0 24px}
.mp-cross-sell-title{font:700 16px/1.3 var(--cb-font-semibold);color:var(--cb-text);margin:0 0 12px}
/* Master's minimum price in the filter (visitor sweep MK21), where the floor's label was. */
.cb-price-min{display:inline-flex;align-items:center;gap:2px;font:600 12px/1 var(--cb-font-semibold);color:var(--cb-sec)}
.cb-price-min input{width:52px;height:28px;padding:0 6px;border-radius:6px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);color:var(--cb-text);font:500 12px/1 var(--cb-font-regular);-moz-appearance:textfield}
.cb-price-min input::-webkit-inner-spin-button,.cb-price-min input::-webkit-outer-spin-button{-webkit-appearance:none}
/* M1 (Michael's manual testing): the admin's card menu opens inside the thumbnail, which clips; while it is open
   the card lets it out and stands above its neighbours. */
.cb-pcard:has(.nt-menu-pop:not([hidden])){overflow:visible;position:relative;z-index:30}
.cb-pcard:has(.nt-menu-pop:not([hidden])) .cb-pcard-thumb{overflow:visible}
/* ── footer (mobile content, desktop layout) ── */
.hm-footer{background:var(--cb-footer-bg);color:#e8eaf0;padding:0 var(--gut) 32px;position:relative}
.hm-footer>*{position:relative;z-index:1}
/* Segments compete for width: each flex-grow oscillates on a staggered cycle, so one swells while neighbours give way. flex-grow animates on the compositor-less layout path but only on 10 tiny boxes - negligible. */
.hm-rainbow{display:flex;height:3px;margin:0 calc(-1 * var(--gut)) 32px;position:relative;overflow:hidden}
/* EXPERIMENT: rainbow above the chrome. Revert = delete .hm-rainbow-top elements from pages + this rule. */
.hm-rainbow-top{margin:0;position:sticky;top:0;z-index:var(--cb-z-chrome)}
.hm-rainbow-top~.dh-chrome{top:3px}
.hm-rainbow>span{display:block;height:100%;animation:hm-rainbow-breathe 14s ease-in-out infinite;animation-delay:calc(var(--i,0) * -2.6s)}
@keyframes hm-rainbow-breathe{0%,100%{flex-grow:4}30%{flex-grow:22}55%{flex-grow:9}75%{flex-grow:16}}
@media(prefers-reduced-motion:reduce){.hm-rainbow>span{animation:none}}
.hm-footer-trust,.hm-footer-grid,.hm-footer-bottom{max-width:1640px;margin-left:auto;margin-right:auto}
.hm-footer-trust{display:flex;align-items:center;gap:14px;padding:0 0 22px;margin-bottom:28px;border-bottom:1px solid var(--cb-line-dark)}
.hm-footer-trust-icon{width:40px;height:40px;border-radius:50%;background:rgba(123,193,120,.18);color:#9ed79a;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.hm-footer-trust-icon svg{width:22px;height:22px}
.hm-footer-trust-title{font:700 13px/1.2 var(--cb-font-semibold);letter-spacing:.2px;margin-bottom:3px}
.hm-footer-trust-sub{font:400 12px/1.4 var(--cb-font-regular);color:rgba(232,234,240,.62)}
.hm-footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;align-items:start}
@media(max-width:900px){.hm-footer-grid{grid-template-columns:1fr 1fr}}
.hm-footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.hm-footer-brand img{width:36px;height:36px}
.hm-footer-col-head{font:400 17px/1 var(--cb-font-regular);color:var(--cb-link-text,var(--cb-link));margin-bottom:18px}
.hm-footer-col-list{display:flex;flex-direction:column;gap:14px}
.hm-footer-col-list a{font:400 15px/1.2 var(--cb-font-regular);color:#e8eaf0;transition:color 160ms}
.hm-footer-col-list a:hover{color:var(--cb-link-text,var(--cb-link))}
.hm-footer-social{display:flex;gap:14px;margin-bottom:24px}
.hm-footer-social a{width:44px;height:44px;border-radius:50%;background:var(--cb-link);color:#0e1320;display:inline-flex;align-items:center;justify-content:center;transition:transform 140ms,filter 140ms}
.hm-footer-social a:hover{transform:translateY(-1px);filter:brightness(1.1);color:#0e1320}
.hm-footer-social svg{width:20px;height:20px}
.hm-footer-stats{font:400 14px/26px var(--cb-font-regular);color:#e8eaf0}
.hm-footer-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--cb-line-dark);display:flex;justify-content:space-between;gap:16px;font:400 13px/1.4 var(--cb-font-regular);color:rgba(232,234,240,.55)}
/* ── account drawer (mobile classes; desktop = fixed right panel) ── */
.cb-drawer-host{position:fixed;inset:0;z-index:var(--cb-z-sheet)}
.cb-drawer-backdrop{position:absolute;inset:0;background:rgba(20,23,33,0);transition:background 240ms var(--cb-ease)}
.cb-drawer-host.is-open .cb-drawer-backdrop{background:rgba(20,23,33,.55)}
.cb-drawer{position:absolute;top:0;bottom:0;right:0;width:360px;max-width:92vw;background:#1b2230;color:#e8eaf0;transform:translateX(110%);transition:transform 300ms var(--cb-ease);overflow-y:auto;display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(0,0,0,.45)}
.cb-drawer-host.is-open .cb-drawer{transform:translateX(0)}
.hm-acct-card{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;color:inherit}
.hm-acct-card>div:nth-child(2){flex:1;min-width:0}
.hm-acct-avatar{width:36px;height:36px;border-radius:50%;flex:none;overflow:visible}
.hm-acct-avatar svg{width:100%;height:100%;display:block}
.hm-acct-actions{display:flex;align-items:center;justify-content:space-around;padding:4px 16px 16px;border-bottom:1px solid var(--cb-line-dark)}
.hm-acct-action{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#9aa3b6;position:relative;transition:color 160ms,transform 140ms}
.hm-acct-action:hover{color:var(--cb-link-text,var(--cb-link));transform:translateY(-1px)}
.hm-acct-action.is-dollar{width:100%;height:46px;gap:10px;padding:0 18px;border:1px solid rgba(123,193,120,.35);border-radius:999px;background:rgba(123,193,120,.1);color:#a4dda1;font:600 14px/1 var(--cb-font-semibold)}
.hm-acct-action.is-dollar:hover{color:#c6ecc4;background:rgba(123,193,120,.17)}
.hm-referral-coin{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#2fa34a;color:#fff;font-size:17px;font-weight:700}
.hm-acct-action svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-acct-action-badge{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--cb-error);color:#fff;font:700 10px/1 var(--cb-font-semibold);display:inline-flex;align-items:center;justify-content:center}
.hm-acct-row-icon.is-sun{color:#f5a623}
[data-cb-theme-icon] .cb-theme-moon{display:none}
[data-theme="light"] [data-cb-theme-icon] .cb-theme-sun{display:none}
[data-theme="light"] [data-cb-theme-icon] .cb-theme-moon{display:inline-block}
[data-theme="light"] .hm-acct-row-icon.is-sun{color:#c9d3ff}
.hm-acct-name{font:700 14px/1.2 var(--cb-font-semibold);color:var(--cb-link-text,var(--cb-link))}
.hm-acct-sub{font:400 12px/1.4 var(--cb-font-regular);color:#9aa3b6;margin-top:2px}
/* The credit balance under the name (buyer-account parity sweep M6). */
.hm-acct-credit{font:600 12px/1.4 var(--cb-font-semibold);color:#3aa86a;margin-top:2px}
.hm-acct-close{width:32px;height:32px;color:#9aa3b6;display:inline-flex;align-items:center;justify-content:center;transition:color 160ms;margin-left:auto}
.hm-acct-close:hover{color:#fff}
.hm-acct-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.hm-acct-section{padding:12px 0;border-bottom:1px solid var(--cb-line-dark)}
.hm-acct-section:last-child{border-bottom:0}
.hm-acct-row{display:flex;align-items:center;gap:14px;padding:11px 22px;color:#e8eaf0;width:100%;text-align:left;transition:background-color 160ms}
.hm-acct-row:hover{background:rgba(255,255,255,.04);color:#e8eaf0}
.hm-acct-row-icon{width:22px;flex:none;display:inline-flex;justify-content:center;color:#9aa3b6}
.hm-acct-row-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-acct-row-label{font:600 13px/1 var(--cb-font-semibold);letter-spacing:1.6px;text-transform:uppercase}
.cb-drawer-host.is-open .hm-acct-section,.cb-drawer-host.is-open .hm-acct-card,.cb-drawer-host.is-open .hm-acct-actions{animation:hmAcctFall 380ms cubic-bezier(.32,.72,.24,1) backwards}
.cb-drawer-host.is-open .hm-acct-card{animation-delay:20ms}
.cb-drawer-host.is-open .hm-acct-actions{animation-delay:70ms}
.cb-drawer-host.is-open .hm-acct-section:nth-of-type(1){animation-delay:100ms}
.cb-drawer-host.is-open .hm-acct-section:nth-of-type(2){animation-delay:140ms}
@keyframes hmAcctFall{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
/* ── guest auth interstitial (desktop = centered modal; same intents as mobile cb-gsheet) ── */
.cb-gsheet-host{position:fixed;inset:0;z-index:calc(var(--cb-z-sheet) + 1);display:flex;align-items:center;justify-content:center;padding:24px}
.cb-gsheet-backdrop{position:absolute;inset:0;background:rgba(20,23,33,0);transition:background 240ms var(--cb-ease)}
.cb-gsheet-host.is-open .cb-gsheet-backdrop{background:rgba(20,23,33,.6)}
/* The panel is dark in both themes, so it carries its own text colour: the heading has none and took the light theme's dark text (QA item 209). */
.cb-gsheet{position:relative;width:420px;max-width:100%;background:#1b2230;color:#e8eaf0;border:1px solid var(--cb-line-dark);border-radius:20px;padding:28px 28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(12px) scale(.96);opacity:0;transition:transform 260ms var(--cb-ease),opacity 200ms}
.cb-gsheet-host.is-open .cb-gsheet{transform:none;opacity:1}
.cb-gsheet-icon{width:48px;height:48px;border-radius:50%;background:rgba(64,179,222,.14);color:var(--cb-link-text,var(--cb-link));display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.cb-gsheet-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-gsheet h2{font:700 20px/1.25 var(--cb-font-bold);margin-bottom:6px}
.cb-gsheet p{font:400 14px/1.55 var(--cb-font-regular);color:#9aa3b6;margin-bottom:22px}
.cb-gsheet-actions{display:flex;flex-direction:column;gap:10px}
.cb-gsheet-primary{display:inline-flex;align-items:center;justify-content:center;height:46px;border-radius:999px;background:var(--cb-link);color:#fff;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase}
/* The base a:hover outranks a one-class colour, so a link-blue anchor button names its own hover text colour (in dark the text took the button's own blue). */
.cb-gsheet-primary:hover{color:#fff}
.cb-gsheet-secondary{display:inline-flex;align-items:center;justify-content:center;height:46px;border-radius:999px;border:1px solid var(--cb-line-dark-hard);color:#e8eaf0;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase}
.cb-gsheet-close{position:absolute;top:14px;right:14px;width:32px;height:32px;color:#9aa3b6;display:inline-flex;align-items:center;justify-content:center}
.cb-gsheet-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* ── dev state switcher (DEPLOY: strip) ── */
.cb-devstate{position:fixed;left:14px;bottom:14px;z-index:99;display:flex;gap:2px;padding:3px;background:rgba(14,19,32,.85);border:1px solid var(--cb-line-dark);border-radius:999px;backdrop-filter:blur(8px)}
.cb-devstate button{font:600 10px/1 var(--cb-font-bold);letter-spacing:1px;text-transform:uppercase;padding:6px 10px;border-radius:999px;color:var(--cb-sec)}
.cb-devstate button[aria-pressed="true"]{background:var(--cb-link);color:#fff}
/* ── keyframes ── */
@keyframes cb-hero-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-2%) scale(1.04)}}
@keyframes cb-hero-drift-2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,1%) scale(1.05)}}
@keyframes cb-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Lightbox (JS-injected .cb-lightbox; class extractor never sees it)
   The handoff caps the stage at 960px and the frame at 100vh - 160px; v3 fills the viewport instead
   (v3-master's ruling for Michael, 2026-10-13: the lightbox showed a product image smaller than the
   page's own gallery). The controller fits the frame to the stage and never past the image's own size. */
.cb-lightbox{position: fixed; inset: 0; background: rgba(8,12,16,.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 48px 16px; animation: cbLbFade 160ms ease-out;}
@keyframes cbLbFade { from { opacity: 0 } to { opacity: 1 } }
.cb-lightbox-close{position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;}
.cb-lightbox-close:hover{background: rgba(255,255,255,.14);}
.cb-lightbox-stage{max-width: 100%; width: 100%; height: 100%; min-height: 0; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;}
.cb-lightbox-image{width: auto; max-width: 100%; max-height: 100%; background-size: cover; background-position: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.55);}
.cb-lightbox-caption{color: rgba(255,255,255,.8); font: 500 12px/1.4 var(--cb-font-regular); letter-spacing: .2px; text-align: center; max-width: 480px;}

/* "Open original" under the caption (D5), for a trigger that names its file: a message's image. */
.cb-lightbox-original{display:inline-flex;align-items:center;margin-top:10px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:600 11px/1 var(--cb-font-semibold);letter-spacing:1.2px;text-transform:uppercase;text-decoration:none}
.cb-lightbox-original:hover,.cb-lightbox-original:focus-visible{background:rgba(255,255,255,.22)}
.cb-lightbox-original[hidden]{display:none}
/* Bundle editor (desktop): thin overlay scrollbars, no horizontal scroll, no wrapping on short labels. Bundle purple (#7c5cff) is intentional and shared with mobile + checkout. */
.ms-bundle-panel .ms-bundle-body,.ms-bundle-panel .ms-bundle-picker-list{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.ms-bundle-panel .ms-bundle-body::-webkit-scrollbar,.ms-bundle-panel .ms-bundle-picker-list::-webkit-scrollbar{width:6px;height:0}
.ms-bundle-panel .ms-bundle-body::-webkit-scrollbar-thumb,.ms-bundle-panel .ms-bundle-picker-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
[data-theme="light"] .ms-bundle-panel .ms-bundle-body,[data-theme="light"] .ms-bundle-panel .ms-bundle-picker-list{scrollbar-color:rgba(20,23,33,.22) transparent}
[data-theme="light"] .ms-bundle-panel .ms-bundle-body::-webkit-scrollbar-thumb,[data-theme="light"] .ms-bundle-panel .ms-bundle-picker-list::-webkit-scrollbar-thumb{background:rgba(20,23,33,.22)}
.ms-bundle-panel .ms-bundle-disc-input-row{display:flex;align-items:center;gap:12px}
.ms-bundle-panel .ms-bundle-disc-suffix,.ms-bundle-panel .ms-bundle-picker-head>span:first-child,.ms-bundle-panel .ms-bundle-picker-title{white-space:nowrap}
.ms-bundle-panel .ms-bundle-head{padding-top:6px}
.ms-bundle-eyebrow{display:flex;align-items:center;gap:8px}
.ms-bundle-save{white-space:nowrap}
/* Bundle editor: same surface logic as the post composer (panel = card, fields = bg, inactive pills = bg), rounded on all four corners since it is a centred dialog on desktop. Selectors carry .ms-edit-sheet so they beat the extracted store.css rules that load after this file. */
.ms-edit-sheet .ms-edit-sheet-panel.ms-bundle-panel{border-radius:16px;overflow:hidden;max-height:min(85vh,760px)!important}
.ms-edit-sheet .ms-bundle-panel .ms-bundle-head{background:rgba(124,92,255,.10);border-bottom:1px solid rgba(124,92,255,.22);padding:18px 22px 14px}
.ms-edit-sheet .ms-bundle-panel .ms-bundle-body{padding:20px 22px 18px}
.ms-edit-sheet .ms-bundle-panel .ms-bundle-foot{background:var(--cb-card);border-top:1px solid var(--cb-border);padding:14px 22px}
.ms-edit-sheet .ms-bundle-panel .ms-bundle-input,.ms-edit-sheet .ms-bundle-panel .ms-bundle-add-empty,.ms-edit-sheet .ms-bundle-panel .ms-bundle-chip-add,.ms-edit-sheet .ms-bundle-panel .ms-bundle-picker,.ms-edit-sheet .ms-bundle-panel .ms-bundle-disc:not(.is-active),.ms-edit-sheet .ms-bundle-panel .ms-bundle-none-hint,.ms-edit-sheet .ms-bundle-panel .ms-bundle-delete{background:var(--cb-bg);border-color:var(--cb-border-hard)}
.ms-edit-sheet .ms-bundle-panel .ms-bundle-picker-head{background:var(--cb-card);border-bottom:1px solid var(--cb-border)}
.ms-edit-sheet .ms-bundle-panel .ms-bundle-pickitem:hover{background:var(--cb-card)}
.ms-edit-sheet .ms-bundle-panel .ms-bundle-toggle:not(.is-on){background:var(--cb-border-hard)}
[data-theme="light"] .ms-edit-sheet .ms-bundle-panel .ms-bundle-input,[data-theme="light"] .ms-edit-sheet .ms-bundle-panel .ms-bundle-add-empty,[data-theme="light"] .ms-edit-sheet .ms-bundle-panel .ms-bundle-chip-add,[data-theme="light"] .ms-edit-sheet .ms-bundle-panel .ms-bundle-picker,[data-theme="light"] .ms-edit-sheet .ms-bundle-panel .ms-bundle-disc:not(.is-active),[data-theme="light"] .ms-edit-sheet .ms-bundle-panel .ms-bundle-none-hint,[data-theme="light"] .ms-edit-sheet .ms-bundle-panel .ms-bundle-delete{background:#fff;border-color:#d2d7db}
/* Bundle strip: 1–3 products = grid (all visible); 4+ = single-row snap scroller with edge fades (data-fade-l / data-fade-r set by JS). */
.ms-bundle .ms-bundle-strip{display:grid;gap:10px;overflow:visible;grid-template-columns:repeat(3,minmax(0,1fr))}
.ms-bundle .ms-bundle-strip[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.ms-bundle .ms-bundle-strip[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ms-bundle .ms-bundle-strip .ms-bundle-strip-item{flex:0 0 auto;width:auto;min-width:0}
.ms-bundle .ms-bundle-strip[data-count="2"] .ms-bundle-strip-thumb{aspect-ratio:16/10}
.ms-bundle .ms-bundle-strip-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-bundle .ms-bundle-strip-wrap{position:relative}
.ms-bundle .ms-bundle-strip.is-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 14px 8px;scroll-padding-left:14px}
.ms-bundle .ms-bundle-strip.is-row::-webkit-scrollbar{display:none}
.ms-bundle .ms-bundle-strip.is-row .ms-bundle-strip-item{flex:0 0 150px;scroll-snap-align:start}
.ms-bundle .ms-bundle-strip-wrap::before,.ms-bundle .ms-bundle-strip-wrap::after{content:'';position:absolute;top:0;bottom:2px;width:56px;pointer-events:none;opacity:0;transition:opacity 160ms;z-index:1}
.ms-bundle .ms-bundle-add{white-space:nowrap}
.ms-bundle .ms-bundle-strip-wrap::before{left:0;background:linear-gradient(90deg,var(--cb-card),transparent)}
.ms-bundle .ms-bundle-strip-wrap::after{right:0;background:linear-gradient(270deg,var(--cb-card),transparent)}
.ms-bundle .ms-bundle-strip-wrap[data-fade-l="1"]::before,.ms-bundle .ms-bundle-strip-wrap[data-fade-r="1"]::after{opacity:1}
.ms-bundle .ms-bundle-strip-more,.ms-bundle .ms-bundle-strip-item[hidden]{display:none}
/* Arrows sit INSIDE the card (the bundle card clips overflow), on the fade zone, hover-revealed. Drag-to-scroll handles the rest. */
.ms-bundle .ms-bundle-strip-wrap .dh-arrow{top:calc(50% - 22px);width:32px;height:32px;z-index:2;opacity:0;transition:opacity 160ms,transform 160ms}
.ms-bundle .ms-bundle-strip-wrap .dh-arrow.prev{left:10px}
.ms-bundle .ms-bundle-strip-wrap .dh-arrow.next{right:10px}
.ms-bundle .ms-bundle-strip-wrap:hover[data-fade-l="1"] .dh-arrow.prev,.ms-bundle .ms-bundle-strip-wrap:hover[data-fade-r="1"] .dh-arrow.next{opacity:1}
.ms-bundle .ms-bundle-strip-wrap:not([data-fade-l="1"]) .dh-arrow.prev,.ms-bundle .ms-bundle-strip-wrap:not([data-fade-r="1"]) .dh-arrow.next{pointer-events:none}
.ms-bundle .ms-bundle-strip.is-row{cursor:grab}
.ms-bundle .ms-bundle-strip.is-row.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.ms-bundle .ms-bundle-strip.is-row.is-dragging .ms-bundle-strip-item{pointer-events:none}
.ms-bundle .ms-bundle-strip.is-row .ms-bundle-strip-item,.ms-bundle .ms-bundle-strip.is-row img{-webkit-user-drag:none;user-select:none}
.ms-bundle .ms-bundle-strip.is-row{scroll-snap-type:none;will-change:scroll-position;padding:14px 14px 16px}

/* The owner's reorder handles on the Bundles pane (fix-c's parity sweep M21): one per bundle, one per
   product in its strip. The owner's strip wraps each product in a cell that holds the link and the
   handle (a button cannot sit inside the link); the cell takes the item's place in the grid or the row. */
.ms-bundle{position:relative}
.ms-bundle-drag,.ms-bundle-strip-drag{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:999px;background:rgba(20,23,33,.78);color:#fff;cursor:grab;touch-action:none;box-shadow:0 2px 6px rgba(20,23,33,.25)}
.ms-bundle-drag:active,.ms-bundle-strip-drag:active{cursor:grabbing}
.ms-bundle-drag svg,.ms-bundle-strip-drag svg{width:14px;height:14px}
.ms-bundle-drag{top:12px;right:54px}
.ms-bundle-strip-cell{position:relative;display:flex;min-width:0}
.ms-bundle .ms-bundle-strip .ms-bundle-strip-cell>.ms-bundle-strip-item{flex:1 1 auto;width:100%;min-width:0}
.ms-bundle-strip-drag{top:6px;left:6px;width:26px;height:26px;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 2px 6px rgba(20,23,33,.25)}
.ms-bundle .ms-bundle-strip.is-row .ms-bundle-strip-cell{flex:0 0 150px;scroll-snap-align:start}
/* Generic chip (shared by marketplace filters + bulk category picker) */
.dmp-chip[aria-pressed="true"]{background:var(--cb-link)!important;border-color:var(--cb-link)!important;color:#fff!important}
.dmp-chip{white-space:nowrap}
.dmp-chip:hover{border-color:var(--cb-link)}
/* ═══════════ Icon system (see CLAUDE.md › Icons) ═══════════
   Two kinds only:
   1. OUTLINE  (default for every 24-grid glyph): single stroke, currentColor, 1.5px (Linearicons-style grid; Lucide-style outlines kept by decision - Linearicons is licensed but used only for a handful of filled 20-grid glyphs, see CLAUDE.md), round caps/joins. Dark ink in light mode,
      light ink in dark mode, always via color inheritance. Use at 14–24px.
   3. LINEARICONS (.cb-ico-li): licensed filled 20-grid glyphs, single colour via currentColor, never stroked. Used sparingly (see CLAUDE.md).
   4. TILE (.cb-ico-tile): 32px+ tile icon - Linearicons glyph filled flat with one rainbow-palette colour, no outline, no background (#cbt-* symbols, 20-grid). Replaces two-tone for the seller toolbar.
   2. TWO-TONE (.cb-ico-fill): dark #0e1320 outline with flat brand fills (cart bubble, default avatars, category tiles).
      Same artwork in both themes. Use at 28px and up, never for small chrome glyphs.
   This rule normalises every outline glyph to one weight so per-icon stroke-width attributes and the scattered
   per-context overrides above stop mattering. Two-tone icons opt out with .cb-ico-fill. */
svg[viewBox="0 0 24 24"]:not(.cb-ico-fill){stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
svg[viewBox="0 0 24 24"]:not(.cb-ico-fill) *{vector-effect:non-scaling-stroke}
.cb-ico-li,.cb-ico-li *{fill:currentColor!important;stroke:none!important}
.cb-ico-tile,.cb-ico-tile *{stroke:none!important}
svg.cb-ico-fill,svg.cb-ico-fill *{stroke:#0e1320;stroke-width:1.5;stroke-linejoin:round;vector-effect:none}
/* signed-in chrome: logo mark only, search takes the room */
body:not([data-cb-state="guest"]) .dh-wordmark{display:none}
body:not([data-cb-state="guest"]) .dh-search{max-width:none}
.dh-search input{font-size:14px}
/* Local preview feedback uses the established chrome palette. */
.cb-preview-notice{position:fixed;bottom:64px;left:50%;transform:translateX(-50%);z-index:10000;max-width:calc(100vw - 32px);padding:12px 18px;border:1px solid #40b3de;border-radius:12px;background:#141926;color:#e8eaf0;box-shadow:0 8px 24px #0005;font:600 14px/1.5 Mulish,sans-serif}
.cb-preview-notice[hidden]{display:none}
/* Homepage hero retains its approved layout; illustration assets are original. */
.dh-band-art img{width:100%;height:100%;max-height:300px;object-fit:contain}
.dh-feat.is-promo .dh-feat-img{background-size:auto 65%;background-position:center 10%}
/* Category buttons keep the dark palette in both themes, with subtle photos. */
.dh-cat{--cb-surface:#1f2636;--cb-border:rgba(255,255,255,.08);--cb-text:#e8eaf0;border-radius:12px;border:1px solid var(--cb-border);background:var(--cb-surface);box-shadow:none}
.dh-cat:hover{border-color:var(--cat-tint);background:color-mix(in srgb,var(--cat-tint) 7%,var(--cb-surface))}
.dh-cat-label{color:var(--cb-text);text-shadow:none;letter-spacing:.4px;font-size:11px;line-height:1.4;gap:16px}
.dh-cat-label svg{width:32px;height:32px;padding:10px;border-radius:14px;background:var(--cat-tint);color:#0e1320;filter:none;box-sizing:content-box}
.dh-cat-stripe{height:2px;opacity:.65}
/* Home weekly freebies: match .dh-grid card widths at every desktop breakpoint. */
.dh-freebies{scroll-margin-top:calc(var(--cb-chrome-h,64px) + 24px)}
.dh-freebies .dh-sechead{flex-wrap:wrap}
.dh-freebies .dh-arrow:disabled{visibility:hidden}
.dh-freebies .dh-rail{grid-auto-columns:calc((100% - 2*18px)/3)}
@media(min-width:960px){.dh-freebies .dh-rail{grid-auto-columns:calc((100% - 3*18px)/4)}}
@media(min-width:1280px){.dh-freebies .dh-rail{grid-auto-columns:calc((100% - 4*18px)/5)}}
@media(min-width:1600px){.dh-freebies .dh-rail{grid-auto-columns:calc((100% - 5*18px)/6)}}
/* Desktop category photos: intentionally low contrast behind the labels. */
.dh-cat-thumb{opacity:.22}
.dh-cat-dark{background:linear-gradient(160deg,rgba(20,32,56,.25),rgba(10,18,36,.45))}
.dh-cat-color{opacity:0}
.dh-cat:hover .dh-cat-color{opacity:.2}
.dh-cat-wash{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.3))}
/* Successful empty responses: same type, palette and simple line icons as the existing pages. */
.cb-empty{grid-column:1/-1;box-sizing:border-box;width:100%;padding:48px 20px;text-align:center;color:var(--cb-text)}
.cb-empty-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 20px;border:1px solid var(--cb-border-hard);border-radius:18px;background:var(--cb-panel);color:var(--cb-link-text,var(--cb-link))}
.cb-empty-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cb-empty-title{margin:0 0 10px;font:600 20px/1.35 var(--cb-font-regular);letter-spacing:0;text-transform:none;color:var(--cb-text)}
.cb-empty-copy{max-width:390px;margin:0 auto;font:400 14px/1.65 var(--cb-font-regular);color:var(--cb-sec);text-wrap:pretty}
.cb-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:24px}
.cb-empty-action{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:11px 20px;border:1px solid var(--cb-link);border-radius:999px;background:var(--cb-link);color:#101824;font:600 13px/1.5 var(--cb-font-regular);text-decoration:none;cursor:pointer}
.cb-empty-action.is-secondary{background:transparent;border-color:var(--cb-border-hard);color:var(--cb-text)}
.cb-empty-action:hover{filter:brightness(1.08)}
/* The base a:hover outranks a one-class colour, so a link-blue anchor button names its own hover text colour (in dark the text took the button's own blue). */
.cb-empty-action:not(.is-secondary):hover{color:#101824}
.cb-empty-action:focus-visible{outline:2px solid var(--cb-link);outline-offset:4px}
[data-store-empty]{grid-column:1/-1;min-width:0}
[data-store-empty][hidden],.cb-empty[hidden]{display:none!important}
@media(max-width:360px){.cb-empty{padding:36px 16px}.cb-empty-actions{flex-direction:column}}
.dh-fempty:has(>.cb-empty){padding:0}
/* Marketplace dropdown: desktop counterpart of the mobile category menu. */
.dh-market-toggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:#9aa3b6;font:600 13px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.dh-market-toggle:hover,.dh-market-toggle[aria-expanded="true"]{color:#e8eaf0}
.dh-market-toggle svg{transition:transform 180ms ease}
.dh-market-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.dh-market-host{position:fixed;inset:var(--market-top,var(--cb-chrome-h)) 0 0;z-index:49;pointer-events:none}
[data-theme="light"] .dh-market-host{--cb-link:#087ba5;--cb-amber:#946017}
.dh-market-backdrop{position:absolute;inset:0;background:rgba(8,12,20,.48);opacity:0;transition:opacity 180ms ease;pointer-events:auto}
.dh-market-panel{position:relative;left:var(--market-left,var(--gut));width:min(1160px,calc(100% - 2 * var(--gut)));max-height:calc(100dvh - var(--market-top,var(--cb-chrome-h)) - 20px);margin:0;padding:22px 26px 0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:var(--cb-bg);color:var(--cb-text);border:1px solid var(--cb-border-hard);border-top:0;border-radius:0 0 18px 18px;box-shadow:0 24px 60px rgba(0,0,0,.25);pointer-events:auto;opacity:0;transform:translateY(-8px);transition:opacity 180ms ease,transform 180ms ease}
.dh-market-host.is-open .dh-market-backdrop,.dh-market-host.is-open .dh-market-panel{opacity:1}
.dh-market-host.is-open .dh-market-panel{transform:none}
body:has(.dh-market-host:not([hidden])) .hm-floatcart-host{visibility:hidden}
.dh-market-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.dh-market-head h2{margin:0;font:600 19px/1.3 var(--cb-font-semibold);letter-spacing:0;color:var(--cb-text)}
.dh-market-close{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border:1px solid var(--cb-border-hard);border-radius:50%;color:var(--cb-sec)}
.dh-market-close:hover{color:var(--cb-text);background:var(--cb-card)}
.dh-market-panel svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dh-nav .dh-market-panel a{color:var(--cb-sec);font:400 13px/1.4 var(--cb-font-regular);letter-spacing:0;text-transform:none;padding:0;text-decoration:none}
.dh-nav .dh-market-panel a span{display:block}
.dh-nav .dh-market-panel .dh-market-title-link{display:inline-flex;align-items:center;gap:10px;font:inherit;color:var(--cb-text)}
.dh-nav .dh-market-panel .dh-market-title-link:hover{color:var(--cb-link-text,var(--cb-link))}
.dh-nav .dh-market-panel .dh-market-feature{display:flex;align-items:center;gap:18px;padding:12px 18px 12px 12px;margin-bottom:22px;background:var(--cb-card);border:1px solid var(--cb-border-hard);border-radius:12px;color:var(--cb-text);transition:border-color 160ms ease}
.dh-market-feature:hover{border-color:var(--cb-link)}
.dh-market-feature img{display:block;width:128px;height:80px;object-fit:cover;flex:none;border-radius:7px}
.dh-market-feature-copy{flex:1;min-width:0}
.dh-nav .dh-market-panel .dh-market-kicker{margin-bottom:4px;color:var(--cb-amber);font:700 10px/1.3 var(--cb-font-bold);letter-spacing:1.5px;text-transform:uppercase}
.dh-market-feature strong{display:block;color:var(--cb-text);font:600 17px/1.4 var(--cb-font-semibold)}
.dh-nav .dh-market-panel .dh-market-byline{margin-top:3px;color:var(--cb-sec);font:400 12px/1.4 var(--cb-font-regular)}
.dh-nav .dh-market-panel .dh-market-offer{flex:none;padding:7px 12px;border:1px solid var(--cb-border-hard);border-radius:999px;color:var(--cb-amber);font-weight:700;white-space:nowrap}
.dh-market-feature>svg{color:var(--cb-link-text,var(--cb-link))}
.dh-market-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 30px;padding-bottom:22px}
.dh-market-group{min-width:0}
.dh-market-group h3{margin:0 0 8px;padding-left:11px;border-left:3px solid var(--market-tint);font:600 16px/1.3 var(--cb-font-semibold)}
.dh-nav .dh-market-group h3 a{display:flex;align-items:center;justify-content:space-between;min-height:30px;color:var(--cb-text);font:600 16px/1.3 var(--cb-font-semibold)}
.dh-market-group h3 svg{color:var(--cb-muted);margin-right:8px}
.dh-market-group ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:0 4px;margin:0;padding:0;list-style:none}
.dh-market-group li{min-width:0}
.dh-nav .dh-market-group li a{display:flex;align-items:center;min-height:32px;padding:5px 8px;border-radius:6px}
.dh-nav .dh-market-group a:hover{color:var(--cb-link-text,var(--cb-link));background:var(--cb-card)}
.dh-market-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:16px 0 20px;border-top:1px solid var(--cb-border-hard)}
.dh-nav .dh-market-foot a{display:inline-flex;align-items:center;gap:10px;min-height:36px;color:var(--cb-link-text,var(--cb-link));font-weight:700}
.dh-nav .dh-market-foot a:hover{color:var(--cb-text)}
.dh-market-toggle:focus-visible,.dh-market-panel a:focus-visible,.dh-market-panel button:focus-visible{outline:2px solid var(--cb-link);outline-offset:3px;border-radius:5px}
@media(max-width:1180px){.dh-chrome-inner{gap:12px}.dh-search{min-width:180px}.dh-spacer{display:none}.dh-nav{display:flex}.dh-nav>a:not([href*="marketplace.html"]){display:none}.dh-market-panel{padding:18px 20px 0}.dh-market-grid{gap:18px 20px}.dh-market-feature img{width:112px;height:72px}}
@media(max-width:960px){.dh-market-grid{gap:18px 16px}.dh-market-group li a{font-size:12px}.dh-market-panel{width:calc(100% - 32px)}.dh-toolbar .dh-tabs{min-width:0;overflow-x:auto;scrollbar-width:thin}}
/* Let search yield space to the account controls in narrow desktop windows. */
@media(max-width:900px){.dh-chrome-inner .dh-search{min-width:0}}
/* Owner-approved Safari 200% correction: preserve search width below 760px. */
@media(max-width:760px){
  .dh-chrome-inner{flex-wrap:wrap}
  .dh-chrome-inner .dh-search{order:5;flex:1 0 100%;max-width:none}
  .dh-actions{margin-left:auto}
  .hm-floatcart-host{top:calc(var(--cb-chrome-h,128px) + 12px)}
  .dh-cartpop{max-height:calc(100dvh - var(--cb-chrome-h,128px) - 100px);overflow-y:auto}
  .dh-cartpop-also{flex-shrink:0;max-height:inherit}
}
@media(max-width:700px){.dh-market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dh-market-feature{gap:12px}.dh-market-feature img{width:88px;height:64px}}
@media(prefers-reduced-motion:reduce){.dh-market-panel,.dh-market-backdrop,.dh-market-toggle svg{transition:none}}
/* Interaction motion: short, interruptible and independent of application state.
   Keep this block identical in site.css and desktop.css. No page entrance effects. */
:root{--cb-motion-fast:140ms;--cb-motion-panel:180ms;--cb-motion-ease:cubic-bezier(.2,.7,.2,1)}
/* Menus appear at their final hit targets. Hidden menus leave immediately. */
:root body .cb-dd-menu:not(.dh-menu-pop){animation:cb-menu-enter var(--cb-motion-fast) ease-out}
@keyframes cb-menu-enter{from{opacity:.4}to{opacity:1}}
:root body .dh-menu-pop{transition-duration:var(--cb-motion-fast);transition-delay:0s}
/* Existing panel directions are retained. Avoid staggered or delayed controls. */
:root body :is(.cb-drawer,.cb-sheet,.cb-gsheet,.cb-picker,.hm-filter-panel,.hm-filter-drawer,.hm-cart-sheet,.dh-market-panel,.dh-cartpop,.ms-edit-sheet-panel,.ms-owner-menu-panel,.os-modal,.bp-modal,.bl-compose,.wl-sheet,.wl-share-modal,.nt-confirm-dialog,.bl-sheet-panel,.cu-sheet-panel,.st-sheet-panel,.lc-toc-panel,.tc-toc-panel,.pp-toc-panel,.pa-toc-panel,.da-toc-panel,.cbm-modal){transition-duration:var(--cb-motion-panel)!important;transition-delay:0s!important;transition-timing-function:var(--cb-motion-ease)!important}
:root body :is(.cb-drawer-backdrop,.cb-sheet-backdrop,.cb-gsheet-backdrop,.cb-picker-backdrop,.hm-filter-backdrop,.dh-market-backdrop,.ms-edit-sheet-backdrop,.os-modal-backdrop,.bp-modal-backdrop,.wl-sheet-backdrop,.wl-share-backdrop,.nt-confirm-backdrop){transition-duration:var(--cb-motion-fast)!important;transition-delay:0s!important}
:root body :is([class$="-sheet-panel"],[class$="-toc-panel"],[class$="-toc-card"],.wl-share,.nt-confirm,.cbm-root,.ms-owner-menu,.or-cloud,.bl-sheet,.cu-sheet,.st-sheet){transition-duration:var(--cb-motion-panel)!important;transition-delay:0s!important}
:root body :is(.la-toc-sheet,.lc-toc-sheet,.pp-toc-sheet,.tos-toc-sheet,.ap-cloud-providers,.hm-mp-dropdown,.mp-search-wrap,.mp-search-form){transition-duration:var(--cb-motion-panel)!important;transition-delay:0s!important}
:root body :is(.la-toc-scrim,.lc-toc-scrim,.pp-toc-scrim,.tos-toc-scrim,.bl-sheet-backdrop,.cu-sheet-backdrop,.st-sheet-backdrop,.ms-owner-menu-backdrop,.or-cloud-backdrop,.hm-mp-backdrop){transition-duration:var(--cb-motion-fast)!important;transition-delay:0s!important}
:root body .cb-drawer-host.is-open :is(.hm-acct-section,.hm-acct-card,.hm-acct-actions){animation:none!important}
:root body :is(.dh-market-host,.cb-drawer-host,.cb-sheet-host,.cb-gsheet-host,.cb-picker-host,.os-modal-host,.bp-modal-host,.bl-compose-host,.wl-sheet-host,.wl-share-host,.ms-edit-sheet,.ms-owner-menu,.bl-sheet,.cu-sheet,.st-sheet)[inert],
:root body :is(.dh-market-host,.cb-drawer-host,.cb-sheet-host,.cb-gsheet-host,.cb-picker-host,.os-modal-host,.bp-modal-host,.bl-compose-host,.wl-sheet-host,.wl-share-host,.ms-edit-sheet,.ms-owner-menu,.bl-sheet,.cu-sheet,.st-sheet)[inert] *{pointer-events:none!important}
/* Disclosures keep state, content and counts synchronous with the action. */
:root body :is(.dh-filters,.dh-filters-inner,.hm-filter-section-body,.pp-desc-body,.ms-panel-host,.ms-store-content){transition-duration:var(--cb-motion-panel)!important;transition-delay:0s!important}
:root body .is-tab-enter{animation:cb-content-enter var(--cb-motion-fast) ease-out;transition:none}
:root body .cb-lightbox{transition:opacity var(--cb-motion-fast) ease-out}
@keyframes cb-content-enter{from{opacity:.65}to{opacity:1}}
:root body :is(.pp-files-extra,.cb-replies,.cb-comment-replies,.cb-reply-form,.ch-item-files):not([hidden]){animation:cb-content-enter var(--cb-motion-fast) ease-out}
/* Native disclosures progressively enhance; older engines toggle immediately. */
@supports (interpolate-size:allow-keywords){
  :root body details::details-content{interpolate-size:allow-keywords;height:0;opacity:0;overflow:clip;transition:height var(--cb-motion-panel) var(--cb-motion-ease),opacity var(--cb-motion-fast),content-visibility var(--cb-motion-panel) allow-discrete}
  :root body details[open]::details-content{height:auto;opacity:1}
}
/* Native dialogs keep showModal()/close() semantics and focus immediate. */
:root body dialog.cb-referral-dialog{opacity:0;translate:0 8px;transition:opacity var(--cb-motion-fast),translate var(--cb-motion-panel) var(--cb-motion-ease),display var(--cb-motion-panel) allow-discrete,overlay var(--cb-motion-panel) allow-discrete}
:root body dialog.cb-referral-dialog[open]{opacity:1;translate:0 0}
:root body dialog.cb-referral-dialog:not([open]){pointer-events:none}
:root body dialog.cb-referral-dialog::backdrop{opacity:0;transition:opacity var(--cb-motion-fast),display var(--cb-motion-panel) allow-discrete,overlay var(--cb-motion-panel) allow-discrete}
:root body dialog.cb-referral-dialog[open]::backdrop{opacity:1}
:root body dialog.cb-referral-dialog:not([open])::backdrop{pointer-events:none}
@starting-style{
  :root body dialog.cb-referral-dialog[open]{opacity:0;translate:0 8px}
  :root body dialog.cb-referral-dialog[open]::backdrop{opacity:0}
  :root body .dh-cartpop.is-open{opacity:0;transform:translateY(-6px)}
  :root body .dh-market-host.is-open .dh-market-panel{opacity:0;transform:translateY(-6px)}
  :root body .cb-drawer-host.is-open .cb-drawer{transform:translateX(100%)}
  :root body :is(.os-modal-host,.bp-modal-host).is-open :is(.os-modal,.bp-modal){opacity:0;transform:translateY(8px) scale(.99)}
  :root body [data-shown] :is(.la-toc-sheet,.lc-toc-sheet,.pp-toc-sheet,.tos-toc-sheet){transform:translateY(100%)}
}
/* Includes inline page styles and pseudo-elements. Functional timers never
   depend on transitionend; motion preferences can change while a panel is open. */
@media(prefers-reduced-motion:reduce){
  :root{--cb-motion-fast:0ms;--cb-motion-panel:0ms}
  html:root{scroll-behavior:auto!important}
  :root body *,:root body *::before,:root body *::after,:root body details::details-content{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
/* Shared disclosure chevrons: open strokes, matching dropdown weight and size.
   Keep component-owned rotation and spacing; never apply this to media or status icons. */
:root body[data-cb-state] svg.cb-chevron,
:root body[data-cb-state] :is(.pp-desc-toggle,.pp-files-more,.ep-filters-head,.hm-filter-section-head,.dh-fsection-head,.cu-import-head,.dpt-more,.dpt-chapter-head,.ch-item-chev,.la-jump-btn,.pp-jump-btn,.lc-jump-btn,.tos-jump-btn,.st-prod-btn)>svg{
  flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
:root body[data-cb-state] svg:is(.cb-chevron,.cb-dd-chevron)>*,
:root body[data-cb-state] :is(.pp-desc-toggle,.pp-files-more,.ep-filters-head,.hm-filter-section-head,.dh-fsection-head,.cu-import-head,.dpt-more,.dpt-chapter-head,.ch-item-chev,.la-jump-btn,.pp-jump-btn,.lc-jump-btn,.tos-jump-btn,.st-prod-btn)>svg>*{
  fill:none;stroke:currentColor;stroke-width:inherit;stroke-linecap:round;stroke-linejoin:round;
}
:root{--cb-link-text:#40b3de}
[data-theme="light"]{--cb-link-text:#248eb3}
/* Owner-approved contrast pass: preserve white CTA labels and existing fill colors. */
.ap-price-flag-label[role=button]{cursor:pointer}
/* checkout.css: rules script-extracted from production/assets/css/site.css for every mobile class this page uses that desktop.css does not define. Re-extract rather than hand-edit. */
.ch-express{background: transparent; padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 10px;}
.ch-express-btn{width: 100%; height: 50px; border-radius: 6px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 14px/1 "Mulish", -apple-system, BlinkMacSystemFont, sans-serif; transition: filter 160ms ease, transform 80ms ease;}
.ch-express-btn:hover{filter: brightness(1.05);}
.ch-express-btn:active{transform: translateY(1px);}
.ch-express-btn.is-applepay{background: #000; color: #fff;}
.ch-express-btn.is-googlepay{background: #fff; color: #3c4043; border: 1px solid #d2d7db;}
.ch-express-btn.is-paypal{background: #ffc439; color: #003087;}
.ch-express-btn b{font: 700 14px/1 "Mulish", sans-serif;}
.ch-express-amount{font: 700 14px/1 "Mulish", sans-serif;}
.ch-paypal-word{display: inline-flex; align-items: center; font: 700 16px/1 Helvetica, Arial, sans-serif; font-style: italic;}
.ch-paypal-word i{font-style: italic; color: #003087;}
.ch-items{background: transparent; border-top: 1px solid var(--cb-border);}
.ch-item{border-bottom: 1px solid var(--cb-border);}
.ch-item:last-child{border-bottom: none;}
.ch-item-row{display: flex; align-items: center; gap: 12px; padding: 14px 18px;}
.ch-item-remove{width: 26px; height: 26px; border-radius: 999px; border: none; background: transparent; color: var(--cb-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color 140ms ease, color 140ms ease;}
.ch-item-remove:hover{background: rgba(217,72,72,.10); color: #d94848;}
.ch-item-thumb{width: 48px; height: 48px; border-radius: 4px; background-color: #cfd5db; background-size: cover; background-position: center; flex: none;}
.ch-item-thumb-bundle{background: #7c5cff; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(124,92,255,.4);}
.ch-item-body{flex: 1; min-width: 0;}
.ch-item-eyebrow{display: flex; align-items: center; gap: 6px; margin-bottom: 4px;}
.ch-item-tag-bundle{padding: 2px 6px; border-radius: 3px; background: #7c5cff; color: #fff; font: 700 8px/1 var(--cb-font-semibold); letter-spacing: 1px; text-transform: uppercase;}
.ch-item-save{font: 700 10px/1 var(--cb-font-semibold); color: #7c5cff; letter-spacing: .4px;}
.ch-item-title{font: 700 14px/18px var(--cb-font-bold); color: var(--cb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ch-item-meta{margin-top: 2px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-text-sec, var(--cb-muted)); display: flex; align-items: center; gap: 6px;}
.ch-item-sep{opacity: .6;}
.ch-item-inside{background: transparent; border: none; cursor: pointer; padding: 0; color: #7c5cff; font: 600 11px/16px var(--cb-font-semibold); letter-spacing: .4px; text-transform: uppercase;}
.ch-item-price-col{display: flex; flex-direction: column; align-items: flex-end; flex: none;}
.ch-item-price{font: 600 14px/1 var(--cb-font-semibold); color: var(--cb-text);}
.ch-item-price-was{font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); text-decoration: line-through; margin-bottom: 4px;}
.ch-item-chev{width: 24px; height: 24px; background: transparent; border: none; cursor: pointer; color: var(--cb-muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none;}
.ch-item-chev svg{transition: transform .18s ease;}
.ch-item-bundle[data-cb-bundle-open="true"] .ch-item-chev svg{transform: rotate(180deg);}
.ch-item-bundle{background: rgba(124,92,255,.06);}
.ch-bundle-contents{padding: 8px 18px 14px 60px; border-top: 1px solid rgba(124,92,255,.22); background: transparent;}
.ch-bundle-child{display: flex; align-items: center; gap: 12px; padding: 8px 0;}
.ch-bundle-child-thumb{width: 32px; height: 32px; border-radius: 4px; background-size: cover; background-position: center; flex: none;}
.ch-bundle-child-title{flex: 1; min-width: 0; font: 500 12px/16px var(--cb-font-regular); color: var(--cb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ch-bundle-child-price{font: 500 12px/1 var(--cb-font-regular); color: var(--cb-muted); flex: none;}
/* CO10: a held product inside a bundle says why and has its own remove. */
.ch-bundle-child-state{display:block;font:400 11px/1.4 var(--cb-font-regular);color:#d94848}
.ch-bundle-child-remove{width:26px;height:26px;border-radius:999px;border:none;background:transparent;color:var(--cb-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background-color 140ms ease,color 140ms ease}
.ch-bundle-child-remove:hover{background:rgba(217,72,72,.10);color:#d94848}
.ch-bundle-child-remove:focus-visible{outline:2px solid var(--cb-accent, #40b3de);outline-offset:2px}
.ch-bundle-saved{margin-top: 6px; padding-top: 8px; border-top: 1px dashed rgba(124,92,255,.22); display: flex; justify-content: space-between; font: 600 12px/1 var(--cb-font-semibold); color: #7c5cff;}
.ch-nudge{margin: 14px 18px 0; padding: 14px 16px; background: rgba(64,179,222,.08); border: 1px solid rgba(64,179,222,.30); border-radius: 10px; display: flex; align-items: flex-start; gap: 12px;}
.ch-nudge.is-max{background: rgba(123,193,120,.08); border: 1px solid rgba(123,193,120,.50); align-items: center;}
.ch-nudge-icon{flex: none; color:var(--cb-link-text,var(--cb-link)); margin-top: 2px; display: inline-flex;}
.ch-nudge.is-max .ch-nudge-icon{color: var(--cb-commit); margin-top: 0;}
.ch-nudge-body{flex: 1; min-width: 0;}
.ch-nudge-row{display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;}
.ch-nudge-text{flex: 1; min-width: 0;}
.ch-nudge-headline{font: 700 14px/20px var(--cb-font-bold); color: var(--cb-text);}
.ch-nudge-sub{margin-top: 2px; font: 400 12.5px/18px var(--cb-font-regular); color: var(--cb-text-sec, var(--cb-muted));}
.ch-nudge:not(.is-max) .ch-nudge-headline{font: 600 13px/18px var(--cb-font-semibold);}
.ch-nudge-cta{flex-shrink: 0; color:var(--cb-link-text,var(--cb-link)); font: 700 12px/18px var(--cb-font-bold); letter-spacing: .6px; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;}
.ch-nudge-cta:hover{text-decoration: none; opacity: .8;}
.ch-nudge-bar{margin-top: 8px; height: 4px; border-radius: 2px; background: rgba(64,179,222,.18); position: relative; overflow: hidden;}
.ch-nudge.is-max .ch-nudge-bar{background: rgba(123,193,120,.20);}
.ch-nudge-bar-fill{position: absolute; inset: 0 auto 0 0; background: var(--cb-link); border-radius: 2px; transition: width .3s ease;}
.ch-nudge.is-max .ch-nudge-bar-fill{background: var(--cb-commit);}
.ch-tax{margin-top: 14px; background: rgb(233, 234, 235); border-top: 1px solid var(--cb-border); border-bottom: 1px solid var(--cb-border); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.ch-tax-label{font: 600 11px/1.4 var(--cb-font-semibold); color: var(--cb-text-sec, var(--cb-muted)); letter-spacing: 1.4px; text-transform: uppercase; flex: 1; min-width: 0;}
.ch-tax-country{background: transparent; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--cb-text); text-decoration: underline; text-transform: uppercase; letter-spacing: 1.4px;}
.ch-tax-amt{font: 700 14px/1 var(--cb-font-bold); color: var(--cb-text);}
.ch-field{position: relative;}
.ch-field-error{margin: 6px 0 0; padding: 0; font: 400 12px/1.4 var(--cb-font-regular); color: #d94848;}
.ch-input.is-error, .ch-textarea.is-error{border-color: #d94848 !important; box-shadow: 0 0 0 3px rgba(217,72,72,.12) !important;}
.ch-alert-wrap{padding: 4px 18px 0;}
.ch-alert{margin: 0 0 12px; padding: 10px 12px; background: rgba(217,72,72,.08); border: 1px solid rgba(217,72,72,.35); border-radius: 6px; display: flex; align-items: flex-start; gap: 10px; color: #b3392f; font: 600 13px/18px var(--cb-font-semibold);}
.ch-alert svg{flex: none; margin-top: 1px;}
.ch-discount{background: transparent; padding: 18px 18px 4px;}
.ch-discount-label{font: 600 14px/1.3 var(--cb-font-semibold); color: var(--cb-text); margin-bottom: 10px;}
.ch-discount-codes{display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px;}
.ch-discount-chip{display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; background: rgba(123,193,120,.10); border: 1px solid rgba(123,193,120,.34); border-radius: 6px; color: var(--cb-commit); font: 600 12px/1 var(--cb-font-semibold); letter-spacing: .4px;}
.ch-discount-chip-pct{margin-left: auto; margin-right: 4px; font: 700 12px/1 var(--cb-font-bold); letter-spacing: .4px;}
.ch-discount-chip-remove{width: 22px; height: 22px; border-radius: 999px; background: transparent; border: none; cursor: pointer; color: inherit; padding: 0; display: inline-flex; align-items: center; justify-content: center;}
.ch-discount-form{display: flex; gap: 8px;}
.ch-discount-input{flex: 1; height: 42px; padding: 0 14px; background: var(--cb-card); border: 1px solid rgb(210, 215, 219); border-radius: 4px; font: 400 12px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-text); outline: none; transition: border-color 140ms ease, box-shadow 140ms ease;}
.ch-discount-input:focus{border-color: var(--cb-link); box-shadow: 0 0 0 3px rgba(64,179,222,.16);}
.ch-discount-input.is-error{border-color: #d94848; box-shadow: 0 0 0 3px rgba(217,72,72,.12);}
.ch-discount-redeem{flex: none; height: 42px; padding: 0 22px; background: var(--cb-commit); color: #fff; border: none; border-radius: 4px; cursor: pointer; font: 700 12px/1 var(--cb-font-bold); letter-spacing: 1.6px; text-transform: uppercase; transition: filter 140ms ease;}
.ch-discount-redeem:hover{filter: brightness(1.06);}
.ch-discount-error{margin: 8px 0 0; font: 400 12px/16px var(--cb-font-regular); color: #d94848;}
.ch-totals{background: transparent; padding: 14px 18px 14px;}
.ch-total-line{display: flex; justify-content: space-between; padding: 4px 0; font: 400 13px/20px var(--cb-font-regular); color: var(--cb-text-sec, var(--cb-muted)); font-variant-numeric: tabular-nums;}
.ch-total-discount{color: var(--cb-commit);}
.ch-total-row{display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--cb-border);}
/* CO12: PayPal's own Pay in 4 message under the total. Its iframe is a light document: a dark page's color-scheme would give it an opaque white backdrop, so the host says light. */
.ch-paypal-message{margin-top:10px;min-height:20px;color-scheme:light}
.ch-paypal-message:empty{display:none}
.ch-total-label{font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text-sec, var(--cb-muted)); letter-spacing: 1.6px; text-transform: uppercase;}
.ch-total-value{font: 700 22px/1 var(--cb-font-bold); color: var(--cb-text); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px;}
.ch-total-currency{font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: .6px;}
.ch-gift, .ch-email, .ch-acct-nudge{background: transparent;}
.ch-gift{padding: 16px 18px 4px;}
.ch-email{padding: 14px 18px 4px;}
.ch-acct-nudge{padding: 12px 18px 14px;}
.ch-input, .ch-textarea{width: 100%; background: var(--cb-card); border: 1px solid rgb(210, 215, 219); border-radius: 4px; font: 400 14px/1.4 var(--cb-font-regular); color: var(--cb-text); outline: none; box-sizing: border-box; transition: border-color 140ms ease, box-shadow 140ms ease;}
.ch-input{height: 44px; padding: 0 14px;}
.ch-textarea{padding: 10px 14px; resize: none; font-family: inherit;}
.ch-input:focus, .ch-textarea:focus{border-color: var(--cb-link); box-shadow: 0 0 0 3px rgba(64,179,222,.16);}
.ch-input-has-icon{padding-left: 36px !important;}
.ch-gift-input-wrap{position: relative;}
.ch-gift-input-icon{position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cb-muted); pointer-events: none;}
.ch-gift-form{margin-top: 12px; display: flex; flex-direction: column; gap: 10px;}
.ch-helper{margin: 0; font: 400 11px/16px var(--cb-font-regular); color: var(--cb-muted);}
.ch-gift-toggle, .ch-check-row{display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font: 400 13px/1.4 var(--cb-font-regular); color: var(--cb-text);}
.ch-check-row-stacked{align-items: flex-start;}
.ch-check-row-stacked .ch-checkbox-box{margin-top: 1px;}
.ch-check-row small{display: block; margin-top: 2px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted);}
.ch-checkbox-input{position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;}
.ch-checkbox-box{width: 18px; height: 18px; border-radius: 3px; flex: none; background: transparent; border: 1px solid var(--cb-border-hard, var(--cb-border)); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background-color 140ms ease, border-color 140ms ease;}
.ch-checkbox-box svg{opacity: 0; transition: opacity 140ms ease;}
.ch-checkbox-input:checked + .ch-checkbox-box{background: var(--cb-commit); border-color: var(--cb-commit);}
.ch-checkbox-input:checked + .ch-checkbox-box svg{opacity: 1;}
.ch-checkbox-input.is-blue:checked + .ch-checkbox-box.is-blue{background: var(--cb-link); border-color: var(--cb-link);}
.ch-gift-label{font: 400 14px/1.3 var(--cb-font-regular);}
.ch-email .ch-check-row{margin-top: 12px; font: 400 13px/1.4 var(--cb-font-regular);}
.ch-divider{margin-top: 14px; padding: 18px 18px 4px; display: flex; align-items: center; gap: 12px;}
.ch-divider-line{flex: 1; height: 1px; background: var(--cb-border);}
.ch-divider-label{font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: 1.4px; text-transform: uppercase;}
.ch-methods{padding: 0 18px 14px;}
.ch-method{background: var(--cb-card); border: 1px solid var(--cb-border-hard); border-top: none;}
.ch-method:first-child{border-top: 1px solid var(--cb-border-hard); border-radius: 6px 6px 0 0;}
.ch-method:last-child{border-radius: 0 0 6px 6px;}
.ch-method:first-child:last-child{border-radius: 6px;}
.ch-method-body{max-height: 0; opacity: 0; padding: 0 14px; overflow: hidden; transition: max-height 280ms cubic-bezier(.32,.72,.24,1), opacity 180ms ease, padding 280ms cubic-bezier(.32,.72,.24,1); display: flex; flex-direction: column; gap: 10px;}
.ch-method.is-open .ch-method-body{max-height: 340px; opacity: 1; padding: 0 14px 14px;}
.ch-method-head{width: 100%; padding: 14px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; color: var(--cb-text); text-align: left; transition: background-color 160ms ease;}
.ch-method-head:hover{background: rgba(64,179,222,.04);}
.ch-method-radio::after{content: ""; width: 0; height: 0; border-radius: 50%; background: var(--cb-commit); transition: width 180ms cubic-bezier(.34,1.56,.64,1), height 180ms cubic-bezier(.34,1.56,.64,1);}
.ch-method.is-open .ch-method-radio::after{width: 8px; height: 8px;}
.ch-method-radio{width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--cb-border-hard, var(--cb-border)); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: border-color 140ms ease;}
.ch-method.is-open .ch-method-radio{border-color: var(--cb-commit);}
.ch-method.is-open .ch-method-radio::after{content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-commit);}
.ch-method-label{flex: 1; font: 600 13px/1 var(--cb-font-semibold); color: var(--cb-text);}
.ch-method-mark{flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--cb-muted);}
.ch-card-mark{display: inline-block; width: 22px; height: 14px; border-radius: 2px; font: 700 8px/14px system-ui; text-align: center; letter-spacing: .5px;}
.ch-card-visa{background: #1a1f71; color: #fff;}
.ch-card-mc{background: linear-gradient(90deg,#eb001b 50%,#f79e1b 50%);}
.ch-card-amex{background: #006fcf; color: #fff; font-size: 7px;}
.ch-pill-affirm{display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 8px; border-radius: 4px; background: #0FA0EA; color: #fff; font: 700 11px/1 var(--cb-font-bold); letter-spacing: .2px;}
.ch-pill-klarna{display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 8px; border-radius: 4px; background: #FFA8CD; color: #17120F; font: 700 11px/1 var(--cb-font-bold); letter-spacing: .2px;}
.ch-usdc-word{font: 700 11px/1 var(--cb-font-bold); color: #2775CA; letter-spacing: .2px;}
.ch-method-row{display: flex; gap: 10px;}
.ch-method-row .ch-input{flex: 1; min-width: 0;}
.ch-method-note{margin: 0; font: 400 13px/1.5 var(--cb-font-regular); color: var(--cb-muted);}
.ch-pay-cta{padding: 14px 18px 22px;}
.ch-pay-btn{width: 100%; height: 52px; background: var(--cb-commit); color: #fff; border: none; border-radius: 6px; cursor: pointer; font: 700 14px/1 var(--cb-font-bold); letter-spacing: 2px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter 140ms ease, transform 80ms ease; box-shadow: 0 4px 14px rgba(123,193,120,.34);}
.ch-pay-btn:hover{filter: brightness(1.06);}
.ch-pay-btn:active{transform: translateY(1px);}
.ch-trust{margin-top: 0; background: rgb(233, 234, 235); border-top: 1px solid #d2d7db; padding: 18px 18px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;}
.ch-trust-aster{font-size: 11px; margin-left: 1px; color: var(--cb-muted);}
.ch-trust-fine{flex-basis: 100%; margin: 6px 0 0; padding: 0; font: 400 13px/19.5px var(--cb-font-regular); color: var(--cb-muted); text-align: center;}
.ch-trust-fine a{color:var(--cb-link-text,var(--cb-link)); text-decoration: none;}
.ch-trust-fine a:hover{text-decoration: underline;}
.ch-trust-fine sup{color: inherit; margin-right: 1px;}
.ch-trust-item{display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; color: var(--cb-text-sec, #6b7280);}
.ch-trust-item span{font: 700 10px/1.2 var(--cb-font-bold); color: var(--cb-text-sec, #6b7280); letter-spacing: .8px; text-transform: uppercase; text-align: center;}
.ch-trust-item{position: relative;}
.ch-trust-aster{display: inline; vertical-align: baseline; font-size: inherit; margin-left: 1px; color: var(--cb-muted); top: 0;}
.ch-trust-fine{margin: 10px 18px; padding: 0; font: 400 13px/19.5px var(--cb-font-regular); color: var(--cb-muted); text-align: center;}
.ch-trust-fine a{color:var(--cb-link-text,var(--cb-link)); text-decoration: none;}
.ch-trust-fine a:hover{text-decoration: underline;}
.ch-trust-fine sup{color: inherit; margin-right: 1px;}
.ch-legal{margin: 0; padding: 14px 18px 0; background: rgb(233, 234, 235); font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted); text-align: center;}
.ch-legal a{color:var(--cb-link-text,var(--cb-link)); text-decoration: none;}
.ch-legal a:hover{text-decoration: underline;}

/* A line the buyer already owns (QA item 193) or whose product sold out (QA item 205): said under its meta line, in the field-error red. */
.ch-item-owned,.ch-item-sold-out{margin: 4px 0 0; font: 400 12px/1.4 var(--cb-font-regular); color: #d94848;}
.ch-item-owned a{color: inherit; text-decoration: underline;}
.ch-items > .cb-feedback{margin: 10px 0;}

/* A ticked gift box shows its fields even before v3--checkout--gift-message connects (QA item 225): a pre-connect tick no longer leaves a ticked box over a hidden form. !important beats the global [hidden] rule. */
.ch-gift:has(.ch-gift-toggle input:checked) .ch-gift-form[hidden]{display:flex!important}
/* discounts.css: rules script-extracted from production/assets/css/site.css for mobile classes this page uses that desktop.css does not define. Re-extract rather than hand-edit. */
/* Desktop-owned component port. Original mobile page layouts are excluded. */
@keyframes hmbg-blobA {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(7px,-8px,0) scale(1.08); }
  100% { transform: translate3d(14px,-16px,0) scale(1.14); }
}
@keyframes hmbg-blobB {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-9px,6px,0) scale(1.10); }
  100% { transform: translate3d(-18px,12px,0) scale(1.18); }
}
@keyframes hmbg-blobC {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(5px,-4px,0) scale(1.06); }
  100% { transform: translate3d(10px,-8px,0) scale(1.12); }
}
:where(.dc-port) .hm-featured-dots .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cb-border-hard);
  border: none; padding: 0; cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
:where(.dc-port) .hm-featured-dots .dot.is-active{
  background: var(--cb-link);
  transform: scale(1.2);
}
:where(.dc-port) .pp-license-option.is-selected{ background: var(--cb-chip-active); }
@keyframes pp-tab-underline-in {
  from { transform: scaleX(.55); opacity: .4; }
  to   { transform: scaleX(1); opacity: 1; }
}
:where(.dc-port) .cb-comments{
  background: var(--cb-panel);
  padding: 8px 16px 28px;
}
:where(.dc-port) .cb-avatar{
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font: 600 13px/1 var(--cb-font-semibold);
  letter-spacing: .4px;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #7c8edb, #3a4ea3);
}
:where(.dc-port) .cb-avatar[data-name="Marc Brunet"]{ background: linear-gradient(135deg,#e8a76b,#a85c3a); }
:where(.dc-port) .cb-avatar[data-name="Nazário Baltazar"]{ background: linear-gradient(135deg,#7c8edb,#3a4ea3); }
:where(.dc-port) .cb-avatar[data-name="Ayumu Sato"]{ background: linear-gradient(135deg,#7bc178,#3e9c50); }
:where(.dc-port) .cb-avatar[data-name="Frey"]{ background: linear-gradient(135deg,#e95d8e,#9b2756); }
:where(.dc-port) .cb-avatar[data-name="Jean-Philippe Mongeau"]{ background: linear-gradient(135deg,#9b6bd8,#5a338d); }
:where(.dc-port) .cb-avatar[data-name="You"]{ background: linear-gradient(135deg,#3fb6a8,#1d6f6c); }
:where(.dc-port) .cb-comments-composer .cb-avatar{ width: 32px; height: 32px; font-size: 12px; }
:where(.dc-port) .cb-comments-composer-open{
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 12px;
}
:where(.dc-port) .cb-comments-composer-row{ display: flex; gap: 10px; align-items: flex-start; }
:where(.dc-port) .cb-comments-composer-row .cb-avatar{ width: 32px; height: 32px; font-size: 12px; }
:where(.dc-port) .cb-comments-textarea{
  flex: 1; min-width: 0; resize: vertical;
  background: transparent; border: none;
  color: var(--cb-text);
  font: 400 14px/22px var(--cb-font-regular);
  outline: none;
  min-height: 56px;
}
:where(.dc-port) .cb-comments-composer-actions{
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--cb-border);
}
:where(.dc-port) .cb-comments-actions-spacer{ flex: 1; }
:where(.dc-port) .cb-comments-btn-attach{
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cb-muted); cursor: pointer;
  font: 500 12px/1 var(--cb-font-semibold);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
:where(.dc-port) .cb-comments-btn-attach:hover{ background: var(--cb-bg); border-color: var(--cb-border); color:var(--cb-link-text,var(--cb-link)); }
:where(.dc-port) .cb-comments-btn-attach:disabled{ opacity: .5; cursor: not-allowed; }
:where(.dc-port) .cb-comments-btn-attach svg{ display: inline-block; }
:where(.dc-port) .cb-comments-attachments{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 2px;
}
:where(.dc-port) .cb-comments-btn-primary{
  height: 36px; padding: 0 18px; border-radius: 999px;
  background: var(--cb-link); color: #fff; border: none;
  cursor: pointer;
  font: 700 11px/1 var(--cb-font-bold);
  letter-spacing: 1.4px; text-transform: uppercase;
}
:where(.dc-port) .cb-comments-btn-primary:hover:not(:disabled){ filter: brightness(1.05); }
:where(.dc-port) .cb-comments-btn-primary:disabled{ background: var(--cb-border); cursor: not-allowed; }
:where(.dc-port) .cb-comments-btn-ghost{
  height: 36px; padding: 0 16px; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--cb-border);
  color: var(--cb-text); cursor: pointer;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.2px; text-transform: uppercase;
}
:where(.dc-port) .cb-comments-btn-ghost:hover{ border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
:where(.dc-port) .cb-comments-filter{
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0 12px;
  position: relative;
}
:where(.dc-port) border-bottom: 1px solid var(--cb-border);
  position: relative;
}
.cb-comments-filter-label{
  font: 600 12px/1 var(--cb-font-semibold);
  color: var(--cb-text);
  letter-spacing: 1px; text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--cb-link);
}
:where(.dc-port) .cb-comments-sort-menu{
  position: absolute; top: 100%; right: 0;
  margin-top: 6px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(20,23,33,.12);
  padding: 4px 0;
  z-index: 10;
  min-width: 160px;
}
:root:not([data-theme="light"]) .cb-comments-sort-menu{ box-shadow: 0 8px 24px rgba(0,0,0,.45); }
:where(.dc-port) .cb-comments-sort-menu[hidden]{ display: none; }
:where(.dc-port) .cb-comments-sort-menu button{
  display: block; width: 100%; text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: none; cursor: pointer;
  color: var(--cb-text);
  font: 400 13px/1 var(--cb-font-regular);
  transition: background .12s ease, color .12s ease;
}
:where(.dc-port) .cb-comments-sort-menu button:hover{ background: var(--cb-bg); }
:where(.dc-port) .cb-comments-sort-menu button.is-active{ background: var(--cb-link); color: #fff; }
:where(.dc-port) .cb-thread + .cb-thread{ margin-top: 6px; }
:where(.dc-port) .cb-comment{
  display: block;
  padding-top: 18px;
}
:where(.dc-port) .cb-comment[data-depth="1"],:where(.dc-port) .cb-comment[data-depth="2"]{
  padding-top: 12px;
}
:where(.dc-port) .cb-comment[data-depth="1"] .cb-avatar,:where(.dc-port) .cb-comment[data-depth="2"] .cb-avatar,:where(.dc-port) .cb-comment[data-depth="1"] .cb-comment-avatar,:where(.dc-port) .cb-comment[data-depth="2"] .cb-comment-avatar{ width: 30px; height: 30px; }
:where(.dc-port) .cb-comment-head{
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 6px;
}
:where(.dc-port) .cb-comment-meta{
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap;
}
:where(.dc-port) .cb-comment-author{
  font: 600 13px/1.2 var(--cb-font-semibold);
  color:var(--cb-link-text,var(--cb-link));
}
:where(.dc-port) .cb-comment-date{
  margin-top: 3px;
  width: 100%;
  font: 400 12px/16px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .cb-comment-badge{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--cb-link);
  color: #fff;
  font: 700 9px/1 var(--cb-font-bold);
  letter-spacing: .4px;
  text-transform: uppercase;
}
:where(.dc-port) .cb-comment-badge.is-seller{ background: var(--cb-link); }
:where(.dc-port) .cb-comment-badge.is-customer{ background: var(--cb-commit); }
:where(.dc-port) .cb-comment-menu{
  flex: none;
  background: transparent; border: none; cursor: pointer;
  padding: 4px; border-radius: 4px;
  color: var(--cb-muted);
  display: inline-flex; margin-top: -2px;
  transition: background-color 160ms ease;
}
:where(.dc-port) .cb-comment-menu:hover{ background: var(--cb-card); }
:where(.dc-port) .cb-comment-menu[aria-expanded="true"]{ background: var(--cb-card); }
:where(.dc-port) .cb-comment-menu-dropdown button.is-danger{ color: var(--cb-error); }
:where(.dc-port) .cb-comment-menu-dropdown button.is-danger:hover{ background: rgba(217,83,79,.08); }
:where(.dc-port) .cb-comment.is-deleted .cb-comment-text,:where(.dc-port) .cb-comment.is-deleted .cb-comment-image,:where(.dc-port) .cb-comment.is-deleted .cb-comment-actions{ display: none; }
:where(.dc-port) .cb-comment.is-deleted .cb-comment-deleted{
  display: block;
  font: 400 12px/18px var(--cb-font-regular);
  font-style: italic;
  color: var(--cb-muted);
  padding: 4px 0 12px;
}
:where(.dc-port) .cb-comment-text{
  font: 400 14px/21px var(--cb-font-regular);
  color: var(--cb-text);
  text-wrap: pretty;
  white-space: pre-wrap;
  margin: 0 0 10px;
}
:where(.dc-port) .cb-comment-reply{
  background: transparent; border: none; cursor: pointer; padding: 0;
  color:var(--cb-link-text,var(--cb-link));
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
}
:where(.dc-port) .cb-replies{
  list-style: none;
  margin-left: 46px;
  padding-left: 14px;
  border-left: 2px solid var(--cb-border);
}
:where(.dc-port) .cb-replies li{ list-style: none; }
:where(.dc-port) .cb-comments-pager{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 22px 0 6px;
  padding-top: 16px;
  border-top: 1px solid var(--cb-border);
}
:where(.dc-port) .cb-comments-pager-btn{
  background: transparent;
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  height: 44px; padding: 0 22px;
  cursor: pointer;
  color: var(--cb-text);
  font: 600 13px/1 var(--cb-font-semibold);
  letter-spacing: .4px;
  transition: border-color 160ms ease, color 160ms ease;
}
:where(.dc-port) .cb-comments-pager-btn:hover:not(:disabled){ border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
:where(.dc-port) .cb-comments-pager-btn:disabled{ color: var(--cb-muted); cursor: not-allowed; opacity: .6; }
:where(.dc-port) .cb-comment-avatar{
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font: 600 13px/1 var(--cb-font-semibold);
  background: linear-gradient(135deg, #7c8edb, #3a4ea3);
}
:where(.dc-port) .cb-comment-avatar[data-cb-avatar]{ background: transparent; padding: 0; }
:where(.dc-port) .cb-comment-avatar[data-cb-avatar] svg{ width: 100%; height: 100%; display: block; }
:where(.dc-port) .cb-threads{ list-style: none; padding: 0; margin: 0; }
:where(.dc-port) .cb-comments-composer-collapsed{
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  margin: 8px 0 0;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease;
}
:where(.dc-port) .cb-comments-composer-collapsed:hover{ border-color: var(--cb-link); background: rgba(64,179,222,.04); }
:where(.dc-port) .cb-comments-composer-avatar{
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3fb6a8, #1d6f6c);
  color: #fff;
  font: 600 12px/1 var(--cb-font-semibold);
}
:where(.dc-port) .cb-comments-composer-avatar[data-cb-avatar]{ background: transparent; padding: 0; }
:where(.dc-port) .cb-comments-composer-avatar[data-cb-avatar] svg{ width: 100%; height: 100%; display: block; }
:where(.dc-port) .cb-comments-composer-placeholder{
  flex: 1; min-width: 0;
  font: 400 13px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .cb-comments-filter-sort{
  background: transparent; border: none; cursor: pointer;
  padding: 4px 0;
  color: var(--cb-text);
  font: 400 13px/1 var(--cb-font-regular);
  display: inline-flex; align-items: center; gap: 6px;
}
:where(.dc-port) .cb-comments-filter-sort svg{ transition: transform 180ms ease; }
:where(.dc-port) .cb-comments-filter-sort[aria-expanded="true"] svg{ transform: rotate(180deg); }
:where(.dc-port) .cb-comment-foot{
  display: flex; align-items: center; gap: 18px;
  margin-top: 8px;
  font: 400 12px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .cb-comment-react{
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  color: var(--cb-muted);
  font: inherit;
  transition: color 160ms ease;
}
:where(.dc-port) .cb-comment-react svg{ transition: transform 160ms ease; }
:where(.dc-port) .cb-comment-react:hover{ color: #ff4d6d; }
:where(.dc-port) .cb-comment-react:hover svg{ transform: scale(1.08); }
:where(.dc-port) .cb-comment-react[aria-pressed="true"]{ color: #ff4d6d; }
:where(.dc-port) .cb-comment-react[aria-pressed="true"] svg{ fill: currentColor; stroke: currentColor; }
:where(.dc-port) .cb-comment-toggle-replies{
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0 0 48px;
  background: transparent; border: none; cursor: pointer;
  color:var(--cb-link-text,var(--cb-link));
  font: 600 12px/1 var(--cb-font-semibold);
  padding: 6px 0;
}
:where(.dc-port) .cb-comment-toggle-replies:hover{ text-decoration: underline; }
:where(.dc-port) .cb-comment-attachments{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0 10px;
}
:where(.dc-port) .cb-comment-attachments[data-count="1"]{ grid-template-columns: minmax(0, 200px); }
:where(.dc-port) .cb-comment-attachments[data-count="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(.dc-port) .cb-comment-attachments[data-count="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.dc-port) .cb-comment-attach{
  display: block;
  background: var(--cb-card) center/cover no-repeat;
  border-radius: 6px;
  aspect-ratio: 1;
  border: 1px solid var(--cb-border);
  transition: border-color 160ms ease, transform 140ms ease;
}
:where(.dc-port) .cb-comment-attach:hover{ border-color: var(--cb-link); transform: translateY(-1px); }
@keyframes cbLbFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cb-heart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(.85); }
  55%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes cb-fly-src-pop {
  0%   { transform: scale(1);    }
  25%  { transform: scale(.965); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1);    }
}
@keyframes hmAcctFall {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
:where(.dc-port) .hm-filter-section{
  border-top: 1px solid var(--cb-border);
}
:where(.dc-port) .hm-filter-section:first-of-type{ border-top: 0; }
:where(.dc-port) .hm-filter-section-head{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
  background: transparent; width: 100%; text-align: left;
  cursor: pointer;
}
:where(.dc-port) .hm-filter-section-head .label{
  flex: 1;
  font: 400 11px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  letter-spacing: 2px; text-transform: uppercase;
}
:where(.dc-port) .hm-filter-section-head .count{
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--cb-link); color: #fff;
  font: 400 11px/1 var(--cb-font-regular);
  display: inline-flex; align-items: center; justify-content: center;
}
:where(.dc-port) .hm-filter-section-head .count[hidden]{ display: none; }
:where(.dc-port) .hm-filter-section-head .chev{
  width: 12px; height: 12px;
  transform: rotate(0);
  transition: transform 180ms ease;
  color: var(--cb-muted);
  stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
:where(.dc-port) .hm-filter-section[data-open="true"] .hm-filter-section-head .chev{ transform: rotate(180deg); }
:where(.dc-port) .hm-filter-section-body{
  display: block;
  max-height: 0;
  padding: 0;
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(.22,.61,.36,1),
              padding   200ms cubic-bezier(.22,.61,.36,1);
}
:where(.dc-port) .hm-filter-section[data-open="true"] .hm-filter-section-body{
  max-height: 500px;
  padding: 0 0 14px;
}
@keyframes cb-section-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
:where(.dc-port) .hm-filter-section.is-entering{
  animation: cb-section-enter 320ms cubic-bezier(.22,.61,.36,1) both;
}
@media  (prefers-reduced-motion: reduce) {:where(.dc-port) .hm-filter-section.is-entering{ animation: none; }
:where(.dc-port) .hm-filter-section-body{ transition: none; }}
:where(.dc-port) .hm-filter-label{
  font: 400 11px/1 var(--cb-font-regular);
  color: var(--cb-muted); text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 12px;
}
:where(.dc-port) .hm-filter-chips{
  display: flex; flex-wrap: wrap; gap: 8px;
}
:where(.dc-port) .hm-filter-chip{
  height: 32px; padding: 0 14px;
  display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--cb-chip-bg); color: var(--cb-text);
  font: 400 12px/1 var(--cb-font-regular);
  cursor: pointer;
  border: 0;
  transition: background-color 160ms ease, color 160ms ease;
}
:where(.dc-port) .hm-filter-chip[aria-pressed="true"]{ background: var(--cb-link); color: #fff; }
:where(.dc-port) .hm-filter-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
:where(.dc-port) .hm-filter-head .title{
  font: 400 17px/1 var(--cb-font-regular);
  color: var(--cb-text);
}
:where(.dc-port) .hm-filter-head-actions{
  display: inline-flex; align-items: center; gap: 14px;
}
:where(.dc-port) .hm-filter-reset{
  font: 400 12px/1 var(--cb-font-regular);
  color:var(--cb-link-text,var(--cb-link));
  text-transform: uppercase; letter-spacing: 1.4px;
  background: transparent; border: 0; cursor: pointer;
  padding: 4px 8px;
}
:where(.dc-port) .hm-filter-close{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cb-chip-bg); color: var(--cb-text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0;
}
:where(.dc-port) .hm-filter-close svg{ width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
:where(.dc-port) .hm-filter-apply{
  width: 100%; height: 46px; border: none; border-radius: 999px;
  background: var(--cb-link); color: #fff;
  font: 400 13px/1 var(--cb-font-regular);
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; margin-top: 8px;
  transition: filter 140ms ease, transform 140ms ease;
}
:where(.dc-port) .hm-filter-apply:hover{ filter: brightness(1.06); transform: translateY(-1px); }
:where(.dc-port) .cb-sheet-handle{
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--cb-border-hard);
  margin: 0 auto 16px;
}
@keyframes hmAcctFall {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
:where(.dc-port) .cb-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  border-radius: 999px;
  font: 400 13px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase;
  background: var(--cb-link); color: #fff;
  box-shadow: 0 4px 14px rgba(64,179,222,.34), 0 0 0 0 rgba(64,179,222,0);
  transition: transform 180ms var(--cb-ease), box-shadow 220ms var(--cb-ease);
}
:where(.dc-port) .cb-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(64,179,222,.50), 0 0 0 6px rgba(64,179,222,.10);
  text-decoration: none;
}
:where(.dc-port) .cb-btn:active{ transform: translateY(0); }
:where(.dc-port) .cb-btn:not(.cb-btn-ghost):hover{ color: #fff; }
:where(.dc-port) .cb-btn-ghost{
  background: transparent; color: var(--cb-text); border: 1px solid var(--cb-border-hard);
  box-shadow: none;
}
:where(.dc-port) .cb-btn-ghost:hover{
  background: var(--cb-bg-subtle, rgba(64,179,222,.06));
  border-color: var(--cb-link);
  box-shadow: 0 0 0 4px rgba(64,179,222,.08);
}
@keyframes cb-cart-catch {
  0%   { transform: translateY(0)    scale(1);    }
  30%  { transform: translateY(2px)  scale(.95);  }
  55%  { transform: translateY(-2px) scale(1.14); }
  80%  { transform: translateY(0)    scale(.98);  }
  100% { transform: translateY(0)    scale(1);    }
}
@keyframes cb-confetti {
  0%   { transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
  10%  { transform: translate(calc(-50% + var(--cb-confetti-dx) * .10), calc(-50% + var(--cb-confetti-dy) * .10)) scale(1) rotate(calc(var(--cb-confetti-rot) * .10)); }
  100% { transform: translate(calc(-50% + var(--cb-confetti-dx)), calc(-50% + var(--cb-confetti-dy))) scale(.92) rotate(var(--cb-confetti-rot)); }
}
@keyframes cb-confetti-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cb-receipt-extrude {
  0%   { transform: translateY(100%); opacity: 1; }
  15%  { transform: translateY(85%);  opacity: 1; }
  70%  { transform: translateY(20%);  opacity: .55; }
  100% { transform: translateY(0);    opacity: 0; }
}
:where(.dc-port) .hm-mp-foot .cb-btn{ min-height: 44px; padding: 10px 24px; font-size: 12px; letter-spacing: 1.6px; }
:where(.dc-port) .ch-checkbox-input.is-blue:checked + .ch-checkbox-box.is-blue{
  background: var(--cb-link);
  border-color: var(--cb-link);
}
:where(.dc-port) .ah-section{
  padding: 28px 18px 40px;
  max-width: 480px; margin: 0 auto;
  position: relative; z-index: 2;
}
:where(.dc-port) .ah-intro{
  text-align: center;
  margin-bottom: 22px;
}
:where(.dc-port) .ah-title{
  margin: 0;
  font: 300 28px/34px "Mulish", var(--cb-font-light, system-ui);
  letter-spacing: -.2px;
  color: var(--cb-text);
}
:where(.dc-port) .ah-sub{
  margin: 8px 0 0;
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
}
:where(.dc-port) .ah-card{
  background: var(--cb-panel);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  padding: 22px 20px 24px;
  box-shadow: 0 6px 18px rgba(20,23,33,.06);
}
:where(.dc-port) .ah-social-stack{
  display: flex; flex-direction: column; gap: 10px;
}
:where(.dc-port) .ah-social{
  width: 100%; height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border-hard);
  border-radius: 999px;
  color: var(--cb-text);
  font: 600 14px/1 var(--cb-font-semibold);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
}
:where(.dc-port) .ah-social:hover{ background: var(--cb-bg); border-color: var(--cb-link); }
:where(.dc-port) .ah-social:active{ transform: translateY(1px); }
:where(.dc-port) .ah-social-icon{
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
:where(.dc-port) .ah-divider{
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
}
:where(.dc-port) .ah-divider-line{ flex: 1; height: 1px; background: var(--cb-border-hard); }
:where(.dc-port) .ah-divider-label{
  font: 600 11px/1 var(--cb-font-semibold);
  color: var(--cb-muted);
  letter-spacing: 2px; text-transform: uppercase;
}
:where(.dc-port) .ah-form{ display: flex; flex-direction: column; }
:where(.dc-port) .ah-field{
  margin-bottom: 14px;
  position: relative;
}
:where(.dc-port) .ah-field-label{
  display: block; margin-bottom: 6px;
  font: 600 13px/18px var(--cb-font-semibold);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cb-text-sec, var(--cb-muted));
}
:where(.dc-port) .ah-input-wrap{ position: relative; }
:where(.dc-port) .ah-input{
  width: 100%; height: 46px;
  padding: 0 14px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border-hard);
  border-radius: 6px;
  color: var(--cb-text);
  font: 400 15px/1 var(--cb-font-regular);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
:where(.dc-port) .ah-input:focus{
  border-color: var(--cb-link);
  box-shadow: 0 0 0 3px rgba(64,179,222,.18);
}
:where(.dc-port) .ah-input.is-error{
  border-color: #d94848 !important;
  box-shadow: 0 0 0 3px rgba(217,72,72,.12) !important;
}
:where(.dc-port) .ah-input-with-slot{ padding-right: 44px; }
:where(.dc-port) .ah-input-slot{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--cb-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 140ms ease;
}
:where(.dc-port) .ah-input-slot:hover{ color: var(--cb-text); }
:where(.dc-port) .ah-input-slot .ah-eye-off{ display: none; }
:where(.dc-port) .ah-input-slot[aria-pressed="true"] .ah-eye{ display: none; }
:where(.dc-port) .ah-input-slot[aria-pressed="true"] .ah-eye-off{ display: inline; }
:where(.dc-port) .ah-field-help{
  margin: 6px 0 0;
  padding: 0;
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .ah-field-error{
  margin: 6px 0 0;
  padding: 0;
  font: 400 12px/16px var(--cb-font-regular);
  color: #d94848;
}
:where(.dc-port) .ah-field.is-error .ah-field-help{ display: none; }
:where(.dc-port) .ah-row{
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 18px;
}
:where(.dc-port) .ah-link{
  color:var(--cb-link-text,var(--cb-link));
  font: 600 13px/1 var(--cb-font-semibold);
  text-decoration: none;
}
:where(.dc-port) .ah-link:hover{ text-decoration: underline; }
:where(.dc-port) .ah-check{
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
  font: 400 13px/1.4 var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
}
:where(.dc-port) .ah-check-stacked{
  align-items: flex-start;
  margin: 2px 0 18px;
  font: 400 13px/19px var(--cb-font-regular);
}
:where(.dc-port) .ah-check-stacked .ah-check-box{ margin-top: 1px; }
:where(.dc-port) .ah-check-input{
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
:where(.dc-port) .ah-check-box{
  width: 20px; height: 20px; border-radius: 4px; flex: none;
  background: transparent;
  border: 1.5px solid var(--cb-border-hard);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background-color 140ms ease, border-color 140ms ease;
}
:where(.dc-port) .ah-check-box svg{ opacity: 0; transition: opacity 140ms ease; }
:where(.dc-port) .ah-check-input:checked + .ah-check-box{
  background: var(--cb-link);
  border-color: var(--cb-link);
}
:where(.dc-port) .ah-check-input:checked + .ah-check-box svg{ opacity: 1; }
:where(.dc-port) .ah-check-input.is-blue:checked + .ah-check-box.is-blue{
  background: var(--cb-link);
  border-color: var(--cb-link);
}
:where(.dc-port) .ah-submit{
  width: 100%; height: 48px;
  border: none; border-radius: 999px;
  cursor: pointer;
  background: var(--cb-link); color: #fff;
  font: 600 14px/1 var(--cb-font-semibold);
  letter-spacing: .2px;
  box-shadow: 0 4px 14px rgba(64,179,222,.34), 0 0 0 0 rgba(64,179,222,0);
  transition: transform 180ms var(--cb-ease), box-shadow 220ms var(--cb-ease), filter 140ms ease, background-color 140ms ease, color 140ms ease;
}
:where(.dc-port) .ah-submit:hover{
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(64,179,222,.50), 0 0 0 6px rgba(64,179,222,.10);
}
:where(.dc-port) .ah-submit:active{ transform: translateY(0); filter: brightness(.96); }
:where(.dc-port) .ah-submit-commit{
  background: var(--cb-commit);
  box-shadow: 0 4px 14px rgba(123,193,120,.34), 0 0 0 0 rgba(123,193,120,0);
}
:where(.dc-port) .ah-submit-commit:hover{
  box-shadow: 0 6px 20px rgba(123,193,120,.50), 0 0 0 6px rgba(123,193,120,.10);
}
:where(.dc-port) .ah-submit:disabled{
  background: #dfe3ea;
  color: #9aa3b6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}
:where(.dc-port) .ah-switch{
  margin: 22px 0 0;
  text-align: center;
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
}
:where(.dc-port) .ah-switch .ah-link{ font-weight: 600; font-size: 14px; line-height: 22px; }
:root:not([data-theme="light"]) .ah-submit:disabled{
  background: #2a3246;
  color: #5a6478;
}
:root:not([data-theme="light"]) .ah-card{
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}
:root:not([data-theme="light"]) .ah-social:hover{
  background: rgba(255,255,255,.04);
}
:where(.dc-port) .os-eyebrow{
  font: 400 11px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  letter-spacing: 2.6px; text-transform: uppercase;
}
:where(.dc-port) .os-eyebrow-cta{ color: var(--cb-commit); font-weight: 600; }
:where(.dc-port) .os-hero{
  padding: 36px 22px 32px;
  text-align: center;
  border-bottom: 1px solid var(--cb-border);
  background: transparent;
  position: relative; z-index: 1;
}
:where(.dc-port) .os-hero .os-eyebrow{ margin-bottom: 18px; }
:where(.dc-port) .os-hero-art{
  display: block;
  width: 78%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 18px;
}
:where(.dc-port) .os-h1{
  font: 300 30px/36px "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-text);
  margin: 0 0 14px;
  letter-spacing: -.4px;
  text-wrap: balance;
}
:where(.dc-port) .os-sub{
  font: 400 15px/23px var(--cb-font-regular);
  color: var(--cb-muted);
  margin: 0 auto 24px;
  max-width: 320px; text-wrap: pretty;
}
:where(.dc-port) .os-sub strong{ color: var(--cb-text); font-weight: 600; }
:where(.dc-port) .os-cta{
  height: 52px; padding: 0 36px;
  background: var(--cb-commit); color: #fff;
  border: none; border-radius: 4px;
  font: 600 13px/1 var(--cb-font-semibold);
  letter-spacing: 2.4px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(123,193,120,.32);
  transition: filter 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
:where(.dc-port) .os-cta:hover{ filter: brightness(1.06); box-shadow: 0 6px 18px rgba(123,193,120,.40); }
:where(.dc-port) .os-cta:active{ transform: translateY(1px); }
:where(.dc-port) .os-cta-hero{ min-width: 200px; }
:where(.dc-port) .os-cta-foot{
  margin: 14px 0 0;
  font: 400 12px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  letter-spacing: .2px;
}
:where(.dc-port) .os-proof{
  background: var(--cb-card);
  padding: 22px 22px 24px;
  border-bottom: 1px solid var(--cb-border);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  position: relative; z-index: 1;
}
:where(.dc-port) .os-proof-cell{ text-align: center; }
:where(.dc-port) .os-proof-cell + .os-proof-cell{ border-left: 1px solid var(--cb-border); }
:where(.dc-port) .os-proof-num{
  font: 300 19px/1 "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-text);
  letter-spacing: -.4px;
  margin-bottom: 6px; white-space: nowrap;
}
:where(.dc-port) .os-proof-lbl{
  font: 400 10px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  letter-spacing: 2px; text-transform: uppercase;
}
:where(.dc-port) .os-carousel-wrap{
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--cb-border);
  background: transparent;
  position: relative; z-index: 1;
  overflow: hidden;
}
:where(.dc-port) .os-carousel{ overflow: hidden; }
:where(.dc-port) .os-carousel-track{
  display: flex;
  transform: translateX(0);
  transition: transform 420ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
:where(.dc-port) .os-slide{
  flex: 0 0 100%;
  padding: 0 22px;
  box-sizing: border-box;
}
:where(.dc-port) .os-slide-eyebrow{
  display: flex; align-items: center; gap: 8px;
  color: var(--cb-commit);
  margin-bottom: 10px;
}
:where(.dc-port) .os-slide-eyebrow span{
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 2.4px; text-transform: uppercase;
}
:where(.dc-port) .os-slide-title{
  font: 600 19px/24px var(--cb-font-semibold);
  color: var(--cb-text);
  margin: 0 0 8px;
  letter-spacing: -.1px;
}
:where(.dc-port) .os-slide-body{
  font: 400 14px/21px var(--cb-font-regular);
  color: var(--cb-muted);
  margin: 0 0 16px; text-wrap: pretty;
}
:where(.dc-port) .os-vis{
  height: 208px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  position: relative; overflow: hidden;
}
:where(.dc-port) .os-carousel-dots{
  display: flex; justify-content: center;
  gap: 7px; margin-top: 22px;
}
:where(.dc-port) .os-dot{
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--cb-border);
  border: none; padding: 0; cursor: pointer;
  transition: width 280ms ease, background 280ms ease;
}
:where(.dc-port) .os-dot.is-active{ width: 22px; background: var(--cb-commit); }
:where(.dc-port) .os-trust{
  background: #2c3242; color: #fff;
  padding: 32px 22px 28px; text-align: center;
  position: relative; z-index: 1;
}
:where(.dc-port) .os-trust-eyebrow{
  font: 600 11px/1 var(--cb-font-semibold);
  color: rgba(255,255,255,.55);
  letter-spacing: 2.6px; text-transform: uppercase;
  margin-bottom: 10px;
}
:where(.dc-port) .os-trust-h{
  font: 300 18px/24px "Mulish", var(--cb-font-light, system-ui);
  color: #fff; margin: 0 auto 22px; max-width: 300px;
}
:where(.dc-port) .os-trust-marks{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; max-width: 320px; margin: 0 auto;
}
:where(.dc-port) .os-pm{
  height: 36px; background: #fff; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--cb-font-bold);
  letter-spacing: 1px; text-transform: uppercase;
}
:where(.dc-port) .os-trust-div{
  display: flex; align-items: center; gap: 10px;
  max-width: 320px; margin: 22px auto 12px;
}
:where(.dc-port) .os-trust-line{ flex: 1; height: 1px; background: rgba(255,255,255,.12); }
:where(.dc-port) .os-trust-mid{
  font: 600 10px/1 var(--cb-font-semibold);
  color: rgba(255,255,255,.55);
  letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap;
}
:where(.dc-port) .os-trust-cryptos{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; max-width: 220px; margin: 0 auto;
}
:where(.dc-port) .os-coin{
  height: 36px; background: #fff;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 8px;
}
:where(.dc-port) .os-coin i{
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font: 700 9px/1 var(--cb-font-bold); font-style: normal;
}
:where(.dc-port) .os-coin b{
  color: #1a1f2c;
  font: 700 11px/1 var(--cb-font-bold);
  letter-spacing: .5px;
}
:where(.dc-port) .os-value{
  padding: 34px 22px 30px;
  border-bottom: 1px solid var(--cb-border);
  text-align: center;
  background: transparent;
  position: relative; z-index: 1;
}
:where(.dc-port) .os-value .os-eyebrow,:where(.dc-port) .os-value .os-eyebrow-cta{ margin-bottom: 12px; display: inline-block; }
:where(.dc-port) .os-value-h{
  font: 300 22px/28px "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-text); margin: 0 0 10px;
}
:where(.dc-port) .os-value-body{
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-muted); margin: 0 auto;
  max-width: 320px; text-wrap: pretty;
}
:where(.dc-port) .os-chart{
  margin: 18px auto 0;
  height: 64px; max-width: 320px;
}
:where(.dc-port) .os-chart svg{ display: block; width: 100%; height: 100%; }
:where(.dc-port) .os-rev-grid{
  display: grid; gap: 10px;
  max-width: 320px; margin: 22px auto 0;
}
:where(.dc-port) .os-rev-row{
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  padding: 16px 16px 14px;
  text-align: left;
  display: grid; grid-template-columns: 64px 1fr;
  gap: 14px; align-items: start;
}
:where(.dc-port) .os-rev-pct{
  font: 300 32px/1 "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-commit);
  letter-spacing: -1px; padding-top: 2px;
}
:where(.dc-port) .os-rev-lede{
  font: 600 13px/18px var(--cb-font-semibold);
  color: var(--cb-text); margin-bottom: 4px;
}
:where(.dc-port) .os-rev-body{
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-muted); text-wrap: pretty;
}
:where(.dc-port) .os-rev-foot{
  margin: 16px auto 0;
  font: 400 12px/18px var(--cb-font-regular);
  color: var(--cb-muted);
  max-width: 320px;
}
:where(.dc-port) .os-cta-block{
  padding: 28px 22px; text-align: center;
  border-bottom: 1px solid var(--cb-border);
  background: transparent;
  position: relative; z-index: 1;
}
:where(.dc-port) .os-cta-block .os-cta{
  height: 52px; width: 100%; max-width: 320px;
}
:where(.dc-port) .os-faq{
  background: transparent;
  position: relative; z-index: 1;
}
:where(.dc-port) .os-faq-head{
  padding: 32px 22px 18px;
  display: flex; align-items: baseline; justify-content: space-between;
}
:where(.dc-port) .os-faq-all{
  font: 600 11px/1 var(--cb-font-semibold);
  color: var(--cb-text);
  letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none;
}
:where(.dc-port) .os-faq-all:hover{ color:var(--cb-link-text,var(--cb-link)); }
:where(.dc-port) .os-faq-row{
  border-bottom: 1px solid var(--cb-border);
}
:where(.dc-port) .os-faq-row > summary{
  list-style: none;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--cb-text);
  font: 600 15px/22px var(--cb-font-semibold);
}
:where(.dc-port) .os-faq-row > summary::-webkit-details-marker{ display: none; }
:where(.dc-port) .os-faq-chev{
  flex: 0 0 auto; width: 20px; height: 20px;
  color: var(--cb-muted);
  transition: transform 220ms ease;
  display: inline-flex; align-items: center; justify-content: center;
}
:where(.dc-port) .os-faq-row[open] .os-faq-chev{ transform: rotate(180deg); }
:where(.dc-port) .os-faq-body{
  padding: 0 22px 18px;
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-muted);
  text-wrap: pretty;
}
:where(.dc-port) .os-sticky-cta{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 10px 14px 14px;
  margin: 0 auto; max-width: 480px;
  background: linear-gradient(to top, var(--cb-bg) 60%, transparent);
  pointer-events: auto;
}
:where(.dc-port) .os-sticky-cta .os-cta{
  width: 100%; height: 48px;
  box-shadow: 0 6px 18px rgba(123,193,120,.36);
}
:where(.dc-port) .os-modal-host{
  position: fixed; inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  pointer-events: none;
}
:where(.dc-port) .os-modal-host.is-open{ pointer-events: auto; }
:where(.dc-port) .os-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(8,12,16,0);
  transition: background 240ms ease;
}
:where(.dc-port) .os-modal-host.is-open .os-modal-backdrop{
  background: rgba(8,12,16,.35);
}
:where(.dc-port) .os-modal{
  position: relative;
  width: 100%; max-width: 360px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--cb-panel);
  color: var(--cb-text);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  transform: translateY(8px) scale(.96);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.32,.72,.24,1), opacity 200ms ease;
  padding: 22px 22px 26px;
  text-align: center;
}
:where(.dc-port) .os-modal-host.is-open .os-modal{ transform: translateY(0) scale(1); opacity: 1; }
:where(.dc-port) .os-modal-close{
  position: absolute; top: 14px; right: 12px;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--cb-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
:where(.dc-port) .os-modal-mark{
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(123,193,120,.18);
  border: 1.5px solid var(--cb-commit);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  color: var(--cb-text);
  box-shadow: 0 6px 14px rgba(123,193,120,.18);
}
:where(.dc-port) .os-modal-title{
  margin: 0 0 6px;
  font: 300 22px/28px "Mulish", var(--cb-font-light, system-ui);
}
:where(.dc-port) .os-modal-intro{
  margin: 6px 0 14px;
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-text);
}
:where(.dc-port) .os-modal-sub{
  margin: 0 0 14px;
  font: 400 13px/20px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .os-modal-form{
  margin-top: 14px;
  text-align: left;
  border-top: 1px solid var(--cb-border);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
:where(.dc-port) .os-modal-label{
  font: 400 13px/1 var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
  margin-bottom: -8px;
}
:where(.dc-port) .os-modal-area{
  width: 100%; min-height: 80px;
  padding: 10px 12px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border-hard);
  border-radius: 4px;
  font: 400 14px/20px var(--cb-font-regular);
  color: var(--cb-text);
  outline: none; resize: vertical;
  box-sizing: border-box;
}
:where(.dc-port) .os-modal-area:focus{
  border-color: var(--cb-link);
  box-shadow: 0 0 0 3px rgba(64,179,222,.16);
}
:where(.dc-port) .os-modal-form .os-cta{
  margin-top: 6px;
  width: 100%;
}
:root:not([data-theme="light"]) .os-vis,:root:not([data-theme="light"]) .os-rev-row{
  background: var(--cb-card);
}
:root:not([data-theme="light"]) .os-trust{
  background: #1a1f2c;
}
@keyframes os-spin-a { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes os-spin-b { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes os-spin-c { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes os-breathe-a {
  0%   { transform: translate3d(0,0,0)         rotate(0deg)   scale(1, 1); }
  50%  { transform: translate3d(4px,-3px,0)    rotate(1.2deg) scale(1.55, .50); }
  100% { transform: translate3d(0,0,0)         rotate(0deg)   scale(1, 1); }
}
@keyframes os-breathe-b {
  0%   { transform: translate3d(0,0,0)         rotate(0deg)   scale(1, 1); }
  50%  { transform: translate3d(-5px,2px,0)    rotate(-1.4deg) scale(1.55, .50); }
  100% { transform: translate3d(0,0,0)         rotate(0deg)   scale(1, 1); }
}
@keyframes os-breathe-c {
  0%   { transform: translate3d(0,0,0)         rotate(0deg)   scale(1, 1); }
  50%  { transform: translate3d(3px,-2px,0)    rotate(.8deg)  scale(1.55, .50); }
  100% { transform: translate3d(0,0,0)         rotate(0deg)   scale(1, 1); }
}
:where(.dc-port) .bp-eyebrow{
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 2.6px; text-transform: uppercase;
}
:where(.dc-port) .bp-eyebrow-light{ color: rgba(255,255,255,.78); margin-bottom: 14px; }
:where(.dc-port) .bp-eyebrow-accent{ color: var(--bp-accent); margin-bottom: 12px; display: inline-block; }
:where(.dc-port) .bp-h1{
  font: 300 32px/36px "Mulish", var(--cb-font-light, system-ui);
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -.4px;
  text-wrap: balance;
}
:where(.dc-port) .bp-h1 strong{ font-weight: 700; color: #ffffff; }
:where(.dc-port) .bp-h2{
  font: 300 22px/28px "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-text);
  margin: 0 0 12px;
  letter-spacing: -.2px;
  text-wrap: balance;
}
:where(.dc-port) .bp-accent-strong{ color: var(--bp-accent); font-weight: 600; }
:where(.dc-port) .bp-hero{
  background:
    linear-gradient(180deg, rgba(14,53,83,.44) 0%, rgba(14,53,83,0) 70%),
    linear-gradient(0deg, #25A4E4 0%, #26D0F2 100%);
  padding: 28px 22px 36px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}
:where(.dc-port) .bp-h1{
  text-shadow: 0 1px 2px rgba(0,0,0,.20);
}
:where(.dc-port) .bp-hero-sub,:where(.dc-port) .bp-hero-foot{
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
:where(.dc-port) .bp-hero::before{
  content: "";
  position: absolute; inset: 0;
  background: url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/illustrations/affiliate-pattern-7322096da30ef0ed2d948b820c363f0708649373695a37801ce0faba77a1691c.svg") repeat;
  background-size: 420px 423px;
  opacity: .55;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
:where(.dc-port) .bp-hero-inner{ position: relative; z-index: 1; }
:where(.dc-port) .bp-hero-img{
  display: block;
  margin: 0 auto 6px;
  width: 100%;
  max-width: 420px;
  height: auto;
}
:where(.dc-port) .bp-hero-sub{
  font: 500 14px/22px var(--cb-font-medium, var(--cb-font-regular));
  color: rgba(255,255,255,.78);
  margin: 0 auto 22px;
  max-width: 320px;
  text-wrap: pretty;
}
:where(.dc-port) .bp-cta-light{
  height: 52px; padding: 0 36px;
  background: #ffffff;
  border: none; border-radius: 4px;
  color: var(--bp-hero-bot);
  font: 700 13px/1 var(--cb-font-bold);
  letter-spacing: 2.4px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: filter 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
:where(.dc-port) .bp-cta-light:hover{ filter: brightness(1.04); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
:where(.dc-port) .bp-cta-light:active{ transform: translateY(1px); }
:where(.dc-port) .bp-hero-foot{
  margin-top: 14px;
  font: 500 12px/16px var(--cb-font-medium, var(--cb-font-regular));
  color: rgba(255,255,255,.78);
}
:where(.dc-port) .bp-proof{
  background: var(--cb-card);
  padding: 22px 18px;
  border-bottom: 1px solid var(--cb-border);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  position: relative; z-index: 1;
}
:where(.dc-port) .bp-proof-cell{ text-align: center; padding: 2px 4px; }
:where(.dc-port) .bp-proof-cell + .bp-proof-cell{ border-left: 1px solid var(--cb-border); }
:where(.dc-port) .bp-proof-num{
  font: 300 22px/26px "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-text);
  letter-spacing: -.4px;
  margin-bottom: 4px;
}
:where(.dc-port) .bp-proof-lbl{
  font: 600 9.5px/13px var(--cb-font-semibold);
  color: var(--cb-muted);
  letter-spacing: 1.2px; text-transform: uppercase;
  text-wrap: balance;
}
:where(.dc-port) .bp-calc{
  padding: 38px 22px 32px;
  border-bottom: 1px solid var(--cb-border);
  text-align: center;
  background: transparent;
  position: relative; z-index: 1;
}
:where(.dc-port) .bp-calc-intro{
  font: 400 13px/20px var(--cb-font-regular);
  color: var(--cb-muted);
  margin: 0 auto 22px;
  max-width: 300px;
  text-wrap: pretty;
}
:where(.dc-port) .bp-calc-intro strong{ color: var(--cb-text); font-weight: 600; }
:where(.dc-port) .bp-calc-intro s{ color: var(--cb-muted); }
:where(.dc-port) .bp-calc-card{
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 20px 18px 22px;
  margin: 0 auto 22px;
  max-width: 320px;
}
:where(.dc-port) .bp-calc-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 20px;
  margin-bottom: 14px;
}
:where(.dc-port) .bp-calc-chip-mark{
  width: 22px; height: 22px; border-radius: 11px;
  background: linear-gradient(135deg, #d8453d 0%, #9c2820 100%);
  color: #ffffff;
  font: 700 9px/22px var(--cb-font-bold);
  text-align: center;
  letter-spacing: .3px;
}
:where(.dc-port) .bp-calc-chip-name{
  font: 600 12px/1 var(--cb-font-semibold);
  color: var(--cb-text);
}
:where(.dc-port) .bp-calc-chip-price{
  font: 400 12px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  display: inline-flex; align-items: baseline; gap: 5px;
}
:where(.dc-port) .bp-calc-chip-price s{ opacity: .7; font-size: 11px; }
:where(.dc-port) .bp-calc-readout{
  font: 300 52px/1 "Mulish", var(--cb-font-light, system-ui);
  color: var(--bp-accent);
  letter-spacing: -1px;
  margin-bottom: 4px;
}
:where(.dc-port) .bp-calc-formula{
  font: 400 12px/16px var(--cb-font-regular);
  color: var(--cb-muted);
  margin-bottom: 18px;
}
:where(.dc-port) .bp-calc-bar-head{
  display: flex; align-items: center; justify-content: space-between;
  font: 600 11px/1 var(--cb-font-semibold);
  color: var(--cb-muted);
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 10px;
}
:where(.dc-port) .bp-calc-bar-count{
  color: var(--cb-text);
  font: 600 14px/1 var(--cb-font-semibold);
  letter-spacing: 0; text-transform: none;
}
:where(.dc-port) .bp-calc-slider{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--cb-border);
  outline: none; cursor: pointer;
}
:where(.dc-port) .bp-calc-slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bp-accent);
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(58,161,240,.45);
  cursor: grab;
}
:where(.dc-port) .bp-calc-slider::-webkit-slider-thumb:active{ cursor: grabbing; }
:where(.dc-port) .bp-calc-slider::-moz-range-thumb{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bp-accent);
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(58,161,240,.45);
  cursor: grab;
}
:where(.dc-port) .bp-calc-ticks{
  display: flex; justify-content: space-between;
  font: 400 10px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  margin-top: 8px;
}
:where(.dc-port) .bp-calc-foot{
  font: 400 12px/18px var(--cb-font-regular);
  color: var(--cb-muted);
  max-width: 300px; margin: 0 auto;
  text-wrap: pretty;
}
:where(.dc-port) .bp-calc-foot strong{ color: var(--cb-text); font-weight: 600; }
:where(.dc-port) .bp-how{
  padding: 36px 22px 30px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg);
  position: relative; z-index: 1;
}
:where(.dc-port) .bp-how-head{ text-align: center; margin-bottom: 22px; }
:where(.dc-port) .bp-steps{
  display: grid; gap: 12px;
  max-width: 360px; margin: 0 auto;
}
:where(.dc-port) .bp-step{
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: start;
}
:where(.dc-port) .bp-step-icon{
  width: 40px; height: 40px; border-radius: 20px;
  background: rgba(58,161,240,.12);
  color: var(--bp-accent);
  display: grid; place-items: center;
  grid-row: 1 / span 2;
  align-self: center;
}
:where(.dc-port) .bp-step-icon-art{
  width: 72px; height: 72px; border-radius: 12px;
  background: rgba(58,161,240,.10);
  padding: 6px;
  align-self: start;
}
:where(.dc-port) .bp-step-icon-art img{
  width: 100%; height: 100%; display: block;
  object-fit: contain;
}
:where(.dc-port) .bp-step-num{
  font: 600 10px/1 var(--cb-font-semibold);
  color: var(--bp-accent);
  letter-spacing: 1.6px; text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 4px;
}
:where(.dc-port) .bp-step-body{ grid-column: 2; }
:where(.dc-port) .bp-step-title{
  font: 600 15px/20px var(--cb-font-semibold);
  color: var(--cb-text);
  margin-bottom: 4px;
}
:where(.dc-port) .bp-step-text{
  font: 400 13px/20px var(--cb-font-regular);
  color: var(--cb-muted);
  text-wrap: pretty;
}
:where(.dc-port) .bp-dark{
  background: #2c3242;
  color: #ffffff;
  padding: 36px 22px 34px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.2);
  position: relative; z-index: 1;
}
:where(.dc-port) .bp-dark-h{
  font: 300 22px/28px "Mulish", var(--cb-font-light, system-ui);
  color: #ffffff;
  margin: 0 0 14px;
  letter-spacing: -.2px;
}
:where(.dc-port) .bp-dark-body{
  font: 400 14px/22px var(--cb-font-regular);
  color: rgba(255,255,255,.62);
  margin: 0 auto 12px;
  max-width: 320px;
  text-wrap: pretty;
}
:where(.dc-port) .bp-dark-body strong{ color: #ffffff; font-weight: 600; }
:where(.dc-port) .bp-dark-body-sm{ font-size: 13px; line-height: 20px; }
:where(.dc-port) .bp-dark.bp-dark-naked{
  background: transparent;
  color: var(--cb-text);
  border-bottom: 1px solid var(--cb-border);
}
:where(.dc-port) .bp-dark.bp-dark-naked .bp-dark-h{
  color: var(--cb-text);
}
:where(.dc-port) .bp-dark.bp-dark-naked .bp-dark-body{
  color: var(--cb-muted);
}
:where(.dc-port) .bp-dark.bp-dark-naked .bp-dark-body strong{
  color: var(--cb-text);
}
:where(.dc-port) .bp-ghost-pill{
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 28px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.65);
  border-radius: 24px;
  color: #ffffff;
  font: 600 12px/1 var(--cb-font-semibold);
  letter-spacing: 2.2px; text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
  transition: border-color 140ms ease, background 140ms ease;
}
:where(.dc-port) .bp-ghost-pill:hover{ border-color: #ffffff; background: rgba(255,255,255,.05); color: #ffffff; text-decoration: none; }
:where(.dc-port) .bp-dollar-svg,:where(.dc-port) .bp-mega-svg,:where(.dc-port) .bp-share-svg,:where(.dc-port) .bp-share-art{
  display: block; max-width: 320px; width: 100%;
  margin: 8px auto 0;
}
:where(.dc-port) .bp-share-svg,:where(.dc-port) .bp-share-art{ max-width: 360px; }
:where(.dc-port) .bp-share-art{ height: auto; }
:where(.dc-port) .bp-mega-scene{
  position: relative;
  max-width: 360px;
  margin: 14px auto 0;
}
:where(.dc-port) .bp-mega-art{
  display: block;
  width: 100%;
  height: auto;
}
:where(.dc-port) .bp-library{
  padding: 36px 0 30px;
  border-bottom: 1px solid var(--cb-border);
  text-align: center;
  background: transparent;
  position: relative; z-index: 1;
}
:where(.dc-port) .bp-library-head{ padding: 0 22px; }
:where(.dc-port) .bp-library-sub{
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-muted);
  margin: 0 auto 22px;
  max-width: 320px;
  text-wrap: pretty;
}
:where(.dc-port) .bp-library-rail{
  display: flex; gap: 14px;
  padding: 0 22px 6px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
:where(.dc-port) .bp-library-rail::-webkit-scrollbar{ display: none; }
:where(.dc-port) .bp-library-card{
  flex: 0 0 168px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
:where(.dc-port) .bp-library-cover{
  height: 168px; border-radius: 4px;
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
:where(.dc-port) .bp-library-shine{
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), transparent 60%);
}
:where(.dc-port) .bp-library-glyph{
  font: 700 24px/26px var(--cb-font-bold);
  color: #ffffff;
  letter-spacing: -.5px;
  text-shadow: 0 2px 6px rgba(0,0,0,.18);
  position: relative;
  text-align: center;
  padding: 0 12px;
}
:where(.dc-port) .bp-library-meta{ padding: 10px 2px 4px; text-align: left; }
:where(.dc-port) .bp-library-title{
  font: 600 13px/18px var(--cb-font-semibold);
  color: var(--cb-text);
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(.dc-port) .bp-library-byline{
  font: 400 12px/16px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .bp-library-byline span{ color: var(--bp-accent); }
:where(.dc-port) .bp-library-tail{ flex: 0 0 8px; }
:where(.dc-port) .bp-tests{
  background: transparent;
  padding: 36px 0 30px;
  border-bottom: 1px solid var(--cb-border);
  position: relative; z-index: 1;
}
:where(.dc-port) .bp-tests-head{ text-align: center; padding: 0 22px; margin-bottom: 22px; }
:where(.dc-port) .bp-tests-rail{
  display: flex; gap: 12px;
  padding: 0 22px 6px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
:where(.dc-port) .bp-tests-rail::-webkit-scrollbar{ display: none; }
:where(.dc-port) .bp-test{
  flex: 0 0 260px;
  scroll-snap-align: start;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 18px 16px 16px;
  display: flex; flex-direction: column;
}
:where(.dc-port) .bp-test-quote{
  font: 700 32px/.8 Georgia, serif;
  color: var(--bp-accent);
  opacity: .35;
  margin-bottom: 4px;
}
:where(.dc-port) .bp-test-body{
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-text);
  flex: 1;
  text-wrap: pretty;
  margin: 0 0 14px;
}
:where(.dc-port) .bp-test-foot{ display: flex; align-items: center; gap: 10px; }
:where(.dc-port) .bp-test-avatar{
  width: 32px; height: 32px; border-radius: 16px;
  color: #ffffff;
  display: grid; place-items: center;
  font: 700 13px/1 var(--cb-font-bold);
}
:where(.dc-port) .bp-test-who{
  font: 600 12px/16px var(--cb-font-semibold);
  color: var(--cb-text);
}
:where(.dc-port) .bp-test-role{
  font: 400 11px/15px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .bp-tests-tail{ flex: 0 0 8px; }
:where(.dc-port) .bp-stripe{
  background: var(--bp-stripe);
  color: #ffffff;
  padding: 32px 22px 30px;
  text-align: center;
  position: relative; z-index: 1;
}
:where(.dc-port) .bp-stripe-h{
  font: 300 24px/30px "Mulish", var(--cb-font-light, system-ui);
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: -.2px;
  text-wrap: balance;
}
:where(.dc-port) .bp-stripe-sub{
  font: 400 14px/22px var(--cb-font-regular);
  color: rgba(255,255,255,.86);
  margin-bottom: 22px;
  text-wrap: pretty;
}
:where(.dc-port) .bp-sticky{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 10px 14px 14px;
  margin: 0 auto; max-width: 480px;
  background: linear-gradient(to top, var(--cb-bg) 60%, transparent);
  pointer-events: auto;
}
:where(.dc-port) .bp-cta-blue{
  width: 100%; height: 48px;
  background: var(--bp-accent);
  border: none; border-radius: 4px;
  color: #ffffff;
  font: 700 13px/1 var(--cb-font-bold);
  letter-spacing: 2.4px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(58,161,240,.36);
  transition: filter 140ms ease, transform 80ms ease;
}
:where(.dc-port) .bp-cta-blue:hover{ filter: brightness(1.06); }
:where(.dc-port) .bp-cta-blue:active{ transform: translateY(1px); }
:where(.dc-port) .bp-cta-blue:disabled{
  background: rgba(58,161,240,.32);
  cursor: not-allowed;
  box-shadow: none;
}
:where(.dc-port) .bp-modal-host{
  position: fixed; inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  pointer-events: none;
}
:where(.dc-port) .bp-modal-host.is-open{ pointer-events: auto; }
:where(.dc-port) .bp-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(8,12,16,0);
  transition: background 240ms ease;
}
:where(.dc-port) .bp-modal-host.is-open .bp-modal-backdrop{
  background: rgba(8,12,16,.35);
}
:where(.dc-port) .bp-modal{
  position: relative;
  width: 100%; max-width: 360px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--cb-panel);
  color: var(--cb-text);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  transform: translateY(8px) scale(.96);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.32,.72,.24,1), opacity 200ms ease;
  padding: 22px 22px 26px;
}
:where(.dc-port) .bp-modal-host.is-open .bp-modal{ transform: translateY(0) scale(1); opacity: 1; }
:where(.dc-port) .bp-modal-close{
  position: absolute; top: 14px; right: 12px;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--cb-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
:where(.dc-port) .bp-modal-mark{
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(58,161,240,.14);
  border: 1.5px solid var(--bp-accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 6px 14px rgba(58,161,240,.18);
}
:where(.dc-port) .bp-modal-title{
  margin: 0 0 14px;
  font: 300 22px/28px "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-text);
  text-align: center;
}
:where(.dc-port) .bp-modal-form{ display: flex; flex-direction: column; gap: 0; }
:where(.dc-port) .bp-modal-intro{
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-muted);
  margin: 0 0 18px;
  text-wrap: pretty;
}
:where(.dc-port) .bp-modal-label{
  display: block;
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-text);
  margin-bottom: 8px;
}
:where(.dc-port) .bp-modal-area{
  width: 100%; min-height: 150px;
  padding: 12px 14px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border-hard);
  border-radius: 4px;
  font: 400 14px/20px var(--cb-font-regular);
  color: var(--cb-text);
  outline: none; resize: vertical;
  box-sizing: border-box;
}
:where(.dc-port) .bp-modal-area:focus{
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px rgba(58,161,240,.16);
}
:where(.dc-port) .bp-modal-check{
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px;
  cursor: pointer;
  font: 400 14px/1.4 var(--cb-font-regular);
  color: var(--cb-text);
  user-select: none;
}
:where(.dc-port) .bp-modal-check input{
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
:where(.dc-port) .bp-modal-check-box{
  width: 20px; height: 20px; border-radius: 4px; flex: none;
  background: transparent;
  border: 1.5px solid var(--cb-border-hard);
  display: inline-flex; align-items: center; justify-content: center;
  color: #ffffff;
  transition: background-color 140ms ease, border-color 140ms ease;
}
:where(.dc-port) .bp-modal-check-box svg{ opacity: 0; transition: opacity 140ms ease; }
:where(.dc-port) .bp-modal-check input:checked + .bp-modal-check-box{
  background: var(--bp-accent);
  border-color: var(--bp-accent);
}
:where(.dc-port) .bp-modal-check input:checked + .bp-modal-check-box svg{ opacity: 1; }
:where(.dc-port) .bp-modal-check a{ color: var(--bp-accent); text-decoration: none; }
:where(.dc-port) .bp-modal-check a:hover{ text-decoration: underline; }
:where(.dc-port) .bp-cta-submit{ margin-top: 22px; height: 44px; }
:where(.dc-port) .bp-modal-success{
  text-align: center;
  padding-top: 6px;
}
:where(.dc-port) .bp-modal-success-mark{
  width: 56px; height: 56px; border-radius: 28px;
  background: rgba(58,161,240,.14);
  color: var(--bp-accent);
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
:where(.dc-port) .bp-modal-success-title{
  font: 300 20px/26px "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-text);
  margin: 0 0 8px;
}
:where(.dc-port) .bp-modal-success-body{
  font: 400 13px/20px var(--cb-font-regular);
  color: var(--cb-muted);
  margin: 0 auto;
  max-width: 280px;
  text-wrap: pretty;
}
:where(.dc-port) .bp-modal-success-close{
  margin-top: 18px; height: 40px; padding: 0 22px;
  background: transparent;
  border: 1px solid var(--cb-border-hard);
  border-radius: 4px;
  color: var(--cb-text);
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
}
:root:not([data-theme="light"]) .bp-dark{ background: #1a1f2c; }
:root:not([data-theme="light"]) .bp-dark.bp-dark-naked{ background: transparent; }
:root:not([data-theme="light"]) .bp-passive-tile,:root:not([data-theme="light"]) .bp-step,:root:not([data-theme="light"]) .bp-calc-card,:root:not([data-theme="light"]) .bp-test{ background: var(--cb-card); }
:where(.dc-port) .os-vis-art{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:where(.dc-port) .bp-img{
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  flex: none;
}
:where(.dc-port) .bp-img:not(:empty){ display: block; }
:where(.dc-port) .bl-card-badge{
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  background: rgba(20,23,33,.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font: 700 10.5px/1 var(--cb-font-bold);
  color: #fff;
  letter-spacing: .7px; text-transform: uppercase;
}
:where(.dc-port) .bl-avatar{
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cb-link);
  color: #fff;
  font: 700 12px/1 var(--cb-font-bold);
  flex: none;
  letter-spacing: .2px;
  user-select: none;
  overflow: hidden;
}
:where(.dc-port) .bl-avatar svg{ width: 100%; height: 100%; display: block; }
:where(.dc-port) .bl-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font: 700 11px/1 var(--cb-font-bold);
  letter-spacing: .4px; text-transform: uppercase;
  background: rgba(64,179,222,.14);
  color:var(--cb-link-text,#40b3de);
}
:where(.dc-port) .bl-pill.is-lg{
  padding: 7px 13px 7px 11px;
  font-size: 12px;
}
:where(.dc-port) .bl-pill-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
:where(.dc-port) .bl-pill-tips{ background: rgba(64,179,222,.14); color:var(--cb-link-text,#40b3de); }
:where(.dc-port) .bl-pill-tutorials{ background: rgba(123,193,120,.16); color: #5ea758; }
:where(.dc-port) .bl-pill-tutorials .bl-pill-dot{ background: #7bc178; }
:where(.dc-port) .bl-pill-updates{ background: rgba(245,166,35,.16); color: #c08815; }
:where(.dc-port) .bl-pill-updates .bl-pill-dot{ background: #f5a623; }
:where(.dc-port) .bl-pill-news .bl-pill-dot{ background: #e95d8e; }
:where(.dc-port) .bl-pill-interviews .bl-pill-dot{ background: #9b6bd8; }
:root:not([data-theme="light"]) .bl-pill-tips{ color: #5fc7ec; }
:root:not([data-theme="light"]) .bl-pill-tutorials{ color: #94d28f; }
:root:not([data-theme="light"]) .bl-pill-updates{ color: #f5b94e; }
:where(.dc-port) .bl-hero{
  padding: 22px 16px 18px;
  background: var(--cb-panel);
}
:where(.dc-port) .bl-eyebrow{
  font: 600 11px/1 var(--cb-font-bold);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--cb-muted);
  margin-bottom: 8px;
}
:where(.dc-port) .bl-h1{
  font: 300 32px/36px "Mulish", var(--cb-font-light, system-ui);
  color: var(--cb-text); letter-spacing: -.4px;
  margin: 0 0 8px;
}
:where(.dc-port) .bl-hero-sub{
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
  margin: 0 0 16px;
  max-width: 360px;
}
:where(.dc-port) .bl-write{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px;
  
  width: 100%; text-align: left;
  font: inherit;
  cursor: pointer;
  background: rgba(64,179,222,.07);
  border: 1px solid #d5edf6;
  border-radius: 12px;
  text-decoration: none; color: inherit;
}
:where(.dc-port) .bl-write:hover{ background: rgba(64,179,222,.10); text-decoration: none; color: inherit; }
:root:not([data-theme="light"]) .bl-write{
  background: rgba(64,179,222,.07);
  border-color: rgba(64,179,222,.22);
}
:where(.dc-port) .bl-write-icon{
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(64,179,222,.18);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  color:var(--cb-link-text,var(--cb-link));
}
:where(.dc-port) .bl-write-body{ flex: 1; min-width: 0; }
:where(.dc-port) .bl-write-title{
  display: block;
  font: 700 12.5px/16px var(--cb-font-bold);
  color: var(--cb-text);
  margin-bottom: 2px;
}
:where(.dc-port) .bl-write-sub{
  display: block;
  font: 400 12px/15px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .bl-write-cta{
  flex: none;
  height: 34px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cb-link); color: #fff;
  border-radius: 999px;
  font: 700 11px/1 var(--cb-font-bold);
  letter-spacing: .6px; text-transform: uppercase;
}
:where(.dc-port) .bl-compose-host{
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
}
:where(.dc-port) .bl-compose-host.is-open{ pointer-events: auto; }
:where(.dc-port) .bl-compose-host .cb-sheet-backdrop{
  position: absolute; inset: 0;
  background: rgba(12,16,26,0);
  transition: background 220ms cubic-bezier(.32,.72,.24,1);
}
:where(.dc-port) .bl-compose-host.is-open .cb-sheet-backdrop{ background: rgba(12,16,26,.45); }
:where(.dc-port) .bl-compose{
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  margin: 0 auto;
  max-width: 480px;
  background: var(--cb-panel);
  color: var(--cb-text);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.32,.72,.24,1);
  overflow: hidden;
}
:where(.dc-port) .bl-compose-host.is-open .bl-compose{ transform: translateY(0); }
:where(.dc-port) .bl-compose-head{
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--cb-panel);
  border-bottom: 1px solid var(--cb-border);
}
:where(.dc-port) .bl-compose-close{
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cb-text);
  transition: background .12s ease;
}
:where(.dc-port) .bl-compose-close:hover{ background: rgba(0,0,0,.04); }
:root:not([data-theme="light"]) .bl-compose-close:hover{ background: rgba(255,255,255,.06); }
:where(.dc-port) .bl-compose-title{
  font: 700 16px/1 var(--cb-font-bold);
  color: var(--cb-text); letter-spacing: -.1px;
}
:where(.dc-port) .bl-compose-draft{
  margin-left: auto;
  padding: 7px 12px;
  background: transparent; color: var(--cb-muted);
  border: 1px solid var(--cb-border-hard); border-radius: 999px;
  font: 600 11px/1 var(--cb-font-bold); letter-spacing: .4px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
:where(.dc-port) .bl-compose-draft:hover{ color: var(--cb-text); border-color: var(--cb-link); }
:where(.dc-port) .bl-compose-body{
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 24px;
}
:where(.dc-port) .bl-compose-foot{
  flex-shrink: 0;
  padding: 12px 16px 14px;
  background: var(--cb-panel);
  border-top: 1px solid var(--cb-border);
  box-shadow: 0 -8px 16px -10px rgba(20,23,33,.10);
}
:where(.dc-port) .bl-compose-preview{
  width: 100%; height: 46px;
  background: var(--cb-link); color: #fff;
  border: none; border-radius: 999px;
  font: 700 13px/1 var(--cb-font-bold);
  letter-spacing: .8px; text-transform: uppercase;
  cursor: pointer;
  transition: filter .12s ease;
}
:where(.dc-port) .bl-compose-preview:hover{ filter: brightness(1.08); }
:where(.dc-port) .bl-field{ margin-bottom: 18px; }
:where(.dc-port) .bl-field-label{
  font: 700 11px/1 var(--cb-font-bold);
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--cb-text); margin-bottom: 8px;
}
:where(.dc-port) .bl-field-help{
  font: 400 11.5px/16px var(--cb-font-regular);
  color: var(--cb-muted); margin-top: 6px;
}
:where(.dc-port) .bl-field-input,:where(.dc-port) .bl-field-select{
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border); border-radius: 10px;
  font: 500 14px/1 var(--cb-font-regular);
  color: var(--cb-text); outline: none;
  box-sizing: border-box;
  transition: border-color .12s ease;
}
:where(.dc-port) .bl-field-input::placeholder{ color: var(--cb-muted); }
:where(.dc-port) .bl-field-input:focus,:where(.dc-port) .bl-field-select[aria-expanded="true"]{ border-color: var(--cb-link); }
:where(.dc-port) .bl-field-select{
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; text-align: left;
}
:where(.dc-port) .bl-field-select.is-empty{ color: var(--cb-muted); }
:where(.dc-port) .bl-field-select svg{ color: var(--cb-sec); flex-shrink: 0; }
:where(.dc-port) .bl-field-menu{
  margin-top: 6px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border); border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px -10px rgba(20,23,33,.18);
}
:root:not([data-theme="light"]) .bl-field-menu{ box-shadow: none; }
:where(.dc-port) .bl-field-menu[hidden]{ display: none; }
:where(.dc-port) .bl-field-menu button{
  display: block; width: 100%;
  padding: 12px 14px; text-align: left;
  background: transparent; border: none; cursor: pointer;
  font: 500 13.5px/1 var(--cb-font-regular);
  color: var(--cb-text);
  border-bottom: 1px solid var(--cb-border);
  transition: background .12s ease, color .12s ease;
}
:where(.dc-port) .bl-field-menu button:last-child{ border-bottom: none; }
:where(.dc-port) .bl-field-menu button:hover{ background: var(--cb-bg); }
:where(.dc-port) .bl-field-menu button.is-selected{ background: rgba(64,179,222,.10); color:var(--cb-link-text,var(--cb-link)); font-weight: 700; }
:root:not([data-theme="light"]) .bl-field-menu button.is-selected{ background: rgba(64,179,222,.18); }
:where(.dc-port) .bl-field-image{
  width: 100%; box-sizing: border-box;
  height: 168px; border-radius: 10px;
  border: 1.5px dashed var(--cb-border-hard);
  background: var(--cb-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
:where(.dc-port) .bl-field-image:hover{ border-color: var(--cb-link); }
:where(.dc-port) .bl-field-image-icon{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cb-chip-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cb-sec);
}
:where(.dc-port) .bl-field-image-line{
  font: 500 12.5px/1 var(--cb-font-regular);
  color: var(--cb-sec);
}
:where(.dc-port) .bl-field-image-line a{
  color:var(--cb-link-text,var(--cb-link)); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
:where(.dc-port) .bl-field-image-meta{
  font: 400 11px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .bl-editor{
  background: var(--cb-card);
  border: 1px solid var(--cb-border); border-radius: 10px;
  overflow: hidden;
  transition: border-color .12s ease;
}
:where(.dc-port) .bl-editor:focus-within{ border-color: var(--cb-link); }
:where(.dc-port) .bl-editor-toolbar{
  display: flex; align-items: center; gap: 2px;
  padding: 8px;
  border-bottom: 1px solid var(--cb-border);
  overflow-x: auto;
  scrollbar-width: none;
}
:where(.dc-port) .bl-editor-toolbar::-webkit-scrollbar{ display: none; }
:where(.dc-port) .bl-editor-tool{
  flex-shrink: 0;
  width: 34px; height: 34px; padding: 0; border-radius: 6px;
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cb-sec);
  transition: background .12s ease, color .12s ease;
}
:where(.dc-port) .bl-editor-tool:hover{ background: rgba(64,179,222,.08); color:var(--cb-link-text,var(--cb-link)); }
:where(.dc-port) .bl-editor-tool svg{ width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
:where(.dc-port) .bl-editor-tool[data-bold] svg{ stroke-width: 2.4; }
:where(.dc-port) .bl-editor-divider{
  flex-shrink: 0;
  width: 1px; align-self: stretch; margin: 4px 4px;
  background: var(--cb-border);
}
:where(.dc-port) .bl-editor-textarea{
  width: 100%; min-height: 180px;
  padding: 14px;
  background: transparent; border: none; outline: none; resize: vertical;
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-text);
  box-sizing: border-box;
}
:where(.dc-port) .bl-editor-textarea::placeholder{ color: var(--cb-muted); }
:where(.dc-port) .bl-author-card-label{
  font: 700 10.5px/1 var(--cb-font-bold);
  color: var(--cb-muted);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin: 12px 0 8px;
}
:where(.dc-port) .bl-author-card{
  background: var(--cb-card);
  border: 1px solid var(--cb-border); border-radius: 12px;
  padding: 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
:where(.dc-port) .bl-compose-body .bl-author-card{ margin: 0; }
:where(.dc-port) .bl-author-card-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: #e95d8e;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font: 700 14px/1 var(--cb-font-bold);
}
:where(.dc-port) .bl-author-card-body{ flex: 1; min-width: 0; }
:where(.dc-port) .bl-author-card-name{
  font: 700 13px/1 var(--cb-font-bold);
  color: var(--cb-text); margin-bottom: 4px;
}
:where(.dc-port) .bl-author-card-bio{
  font: 400 11.5px/16px var(--cb-font-regular);
  color: var(--cb-sec); margin-bottom: 10px;
}
:where(.dc-port) .bl-author-card-row{
  display: flex; gap: 8px; align-items: center;
}
:where(.dc-port) .bl-author-card-row .social{
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
:where(.dc-port) .bl-author-card-row .social.tw{ background: #1da1f2; }
:where(.dc-port) .bl-author-card-row .social.fb{ background: #1877f2; }
:where(.dc-port) .bl-author-card-row .social.li{ background: #0a66c2; }
:where(.dc-port) .bl-author-card-row .social svg{ width: 11px; height: 11px; fill: currentColor; }
:where(.dc-port) .bl-author-card-edit{
  margin-left: auto;
  padding: 6px 14px;
  background: #3f4a60; color: #fff;
  border: none; border-radius: 999px;
  font: 700 10.5px/1 var(--cb-font-bold);
  letter-spacing: .6px; text-transform: uppercase;
  cursor: pointer;
  transition: filter .12s ease;
}
:where(.dc-port) .bl-author-card-edit:hover{ filter: brightness(1.1); }
:where(.dc-port) .bl-author-card-foot{
  font: 400 11px/16px var(--cb-font-regular);
  color: var(--cb-muted); margin-top: 8px;
}
:where(.dc-port) .bl-featured{
  background: var(--cb-panel);
  padding-top: 4px; padding-bottom: 22px;
}
:where(.dc-port) .bl-section-head{
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 16px 12px;
}
:where(.dc-port) .bl-section-title{
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1 var(--cb-font-bold);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cb-text);
}
:where(.dc-port) .bl-section-link{
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 12px/1 var(--cb-font-bold);
  letter-spacing: .4px;
  color: var(--cb-muted);
  text-decoration: none;
}
:where(.dc-port) .bl-section-link:hover{ color: var(--cb-text); text-decoration: none; }
:where(.dc-port) .bl-card{
  display: block;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(20,23,33,.04), 0 14px 28px -18px rgba(20,23,33,.22);
  margin: 0 16px 12px;
}
:where(.dc-port) .bl-card:hover{ text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(20,23,33,.04), 0 18px 36px -18px rgba(20,23,33,.28); }
:root:not([data-theme="light"]) .bl-card{ box-shadow: none; }
:where(.dc-port) .bl-card-hero .bp-img{ border-radius: 0; }
:where(.dc-port) .bl-card-body{
  padding: 16px 16px 18px;
}
:where(.dc-port) .bl-card-meta{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
:where(.dc-port) .bl-meta{
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 12px/1 var(--cb-font-bold);
  color: var(--cb-muted);
}
:where(.dc-port) .bl-meta svg{ width: 12px; height: 12px; }
:where(.dc-port) .bl-card-title{
  font: 600 18px/23px var(--cb-font-bold);
  color: var(--cb-text);
  letter-spacing: -.2px;
  margin: 0 0 8px;
}
:where(.dc-port) .bl-card-excerpt{
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
  margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:where(.dc-port) .bl-card-foot{
  display: flex; align-items: center; gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--cb-border);
}
:where(.dc-port) .bl-card-author{
  font: 700 13px/1 var(--cb-font-bold);
  color: var(--cb-text);
}
:where(.dc-port) .bl-card-date{
  margin-left: auto;
  font: 500 12px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .bl-card-secondary{
  display: flex !important;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
}
:where(.dc-port) .bl-card-secondary .bp-img{
  flex: 0 0 112px;
}
:where(.dc-port) .bl-secondary-body{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
:where(.dc-port) .bl-secondary-title{
  font: 600 14px/18px var(--cb-font-bold);
  color: var(--cb-text);
  letter-spacing: -.05px;
  margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:where(.dc-port) .bl-secondary-meta{
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font: 500 12px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .bl-secondary-author{
  font: 700 12px/1 var(--cb-font-bold);
  color: var(--cb-text-sec, var(--cb-muted));
}
:where(.dc-port) .bl-secondary-dot{ opacity: .6; }
:where(.dc-port) .bl-filters{
  background: var(--cb-panel);
  border-top: 1px solid var(--cb-border);
  padding: 14px 0 12px;
}
:where(.dc-port) .bl-tabs{
  display: flex; gap: 22px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative; 
}
:where(.dc-port) .bl-tabs::-webkit-scrollbar{ display: none; }
:where(.dc-port) .bl-tabs.has-indicator .bl-tab.is-active::after,:where(.dc-port) .bl-tabs.has-indicator .bl-tab[aria-selected="true"]::after{ display: none; }
:where(.dc-port) .bl-tab{
  background: transparent; border: none;
  padding: 6px 0 10px;
  font: 700 13px/1 var(--cb-font-bold);
  letter-spacing: .2px;
  color: var(--cb-muted);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 140ms ease;
}
:where(.dc-port) .bl-tab.is-active,:where(.dc-port) .bl-tab[aria-selected="true"]{
  color: var(--cb-text);
}
:where(.dc-port) .bl-tab.is-active::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--cb-link);
}
:where(.dc-port) .bl-chips{
  display: flex; gap: 8px;
  padding: 14px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
:where(.dc-port) .bl-chips::-webkit-scrollbar{ display: none; }
:where(.dc-port) .bl-chip{
  flex: none;
  height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  font: 600 12px/1 var(--cb-font-semibold);
  color: var(--cb-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
:where(.dc-port) .bl-chip:hover{ border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
:where(.dc-port) .bl-chip.is-active{
  background: var(--cb-link);
  border-color: var(--cb-link);
  color: #fff;
}
:where(.dc-port) .bl-chip-count{
  font: 600 11px/1 var(--cb-font-semibold);
  opacity: .7;
}
:where(.dc-port) .bl-chip.is-active .bl-chip-count{ opacity: .9; }
:where(.dc-port) .bl-list{
  background: var(--cb-panel);
  border-top: 1px solid var(--cb-border);
}
:where(.dc-port) .bl-row{
  display: flex; gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cb-border);
  text-decoration: none; color: inherit;
}
:where(.dc-port) .bl-row:hover{ background: rgba(64,179,222,.04); text-decoration: none; color: inherit; }
:where(.dc-port) .bl-row .bp-img{
  flex: 0 0 102px;
}
:where(.dc-port) .bl-row-body{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
:where(.dc-port) .bl-row-author{
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
  font: 600 12px/1 var(--cb-font-bold);
  color: var(--cb-text-sec, var(--cb-muted));
}
:where(.dc-port) .bl-row-title{
  font: 700 15px/20px var(--cb-font-bold);
  color: var(--cb-text);
  letter-spacing: -.05px;
  margin: 0 0 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:where(.dc-port) .bl-row-excerpt{
  font: 400 13px/18px var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
  margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:where(.dc-port) .bl-row-meta{
  margin-top: auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
:where(.dc-port) .bl-row-date{
  margin-left: auto;
  font: 500 12px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .bl-loadmore{
  padding: 18px 16px 28px;
  background: var(--cb-panel);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  border-top: 1px solid var(--cb-border);
}
:where(.dc-port) .bl-loadmore-btn{
  width: 100%; max-width: 360px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cb-card);
  color:var(--cb-link-text,var(--cb-link));
  border: 1px solid var(--cb-border-hard);
  border-radius: 999px;
  font: 700 12.5px/1 var(--cb-font-bold);
  letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer;
}
:where(.dc-port) .bl-loadmore-btn:hover{ background: rgba(64,179,222,.05); border-color: var(--cb-link); }
:root:not([data-theme="light"]) .bl-loadmore-btn{ background: rgba(64,179,222,.10); border-color: rgba(64,179,222,.32); }
:where(.dc-port) .bl-loadmore-meta{
  margin: 0;
  font: 500 12.5px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .bl-loadmore-meta b{ color: var(--cb-text); font-weight: 700; }
:where(.dc-port) .bl-newsletter{
  margin: 8px 16px 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, #1f7fcc 0%, #5b8def 100%);
  padding: 22px 20px;
  color: #fff;
  position: relative; overflow: hidden;
}
:root:not([data-theme="light"]) .bl-newsletter{
  background: linear-gradient(160deg, rgba(64,179,222,.18) 0%, rgba(123,193,120,.14) 100%);
  color: var(--cb-text);
}
:where(.dc-port) .bl-newsletter-blob{
  position: absolute; top: -30px; right: -30px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}
:root:not([data-theme="light"]) .bl-newsletter-blob{ background: rgba(64,179,222,.12); }
:where(.dc-port) .bl-newsletter-inner{ position: relative; }
:where(.dc-port) .bl-newsletter-eyebrow{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  font: 700 10px/1 var(--cb-font-bold);
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 12px;
}
:root:not([data-theme="light"]) .bl-newsletter-eyebrow{ background: rgba(64,179,222,.18); }
:where(.dc-port) .bl-newsletter-h{
  font: 700 22px/26px var(--cb-font-bold);
  letter-spacing: -.3px;
  margin: 0 0 6px;
}
:where(.dc-port) .bl-newsletter-body{
  font: 400 13px/19px var(--cb-font-regular);
  opacity: .92;
  margin: 0 0 14px;
}
:root:not([data-theme="light"]) .bl-newsletter-body{ opacity: .85; }
:where(.dc-port) .bl-newsletter-form{ display: flex; gap: 8px; }
:where(.dc-port) .bl-newsletter-input{
  flex: 1; height: 44px; padding: 0 16px;
  background: rgba(255,255,255,.95);
  color: #2c3242;
  border: none; outline: none;
  border-radius: 999px;
  font: 500 13px/1 var(--cb-font-regular);
}
:root:not([data-theme="light"]) .bl-newsletter-input{
  background: rgba(255,255,255,.08);
  color: var(--cb-text);
}
:where(.dc-port) .bl-newsletter-btn{
  height: 44px; padding: 0 20px;
  background: #2c3242; color: #fff;
  border: none; border-radius: 999px;
  font: 700 12px/1 var(--cb-font-bold);
  letter-spacing: .6px; text-transform: uppercase;
  cursor: pointer;
}
:root:not([data-theme="light"]) .bl-newsletter-btn{ background: #40b3de; }
:where(.dc-port) .bl-newsletter-social{
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
}
:root:not([data-theme="light"]) .bl-newsletter-social{ border-top-color: rgba(255,255,255,.08); }
:where(.dc-port) .bl-newsletter-social-label{
  font: 600 11px/1 var(--cb-font-bold);
  opacity: .8;
}
:root:not([data-theme="light"]) .bl-newsletter-social-label{ opacity: .65; }
:where(.dc-port) .bl-newsletter-social-row{
  display: inline-flex; gap: 8px; margin-left: auto;
}
:where(.dc-port) .bl-social{
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
:root:not([data-theme="light"]) .bl-social{ background: rgba(255,255,255,.08); }
:where(.dc-port) .bl-social:hover{ background: rgba(255,255,255,.24); text-decoration: none; }
:where(.dc-port) .bl-post{ background: var(--cb-panel); position: relative; }
:where(.dc-port) .bl-progress{
  position: sticky; top: 0; z-index: 4;
  height: 3px; background: var(--cb-border);
}
:where(.dc-port) .bl-progress-fill{
  height: 100%; width: 0;
  background: var(--cb-link);
  transition: width .12s ease-out;
}
:where(.dc-port) .bl-back{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 16px 4px;
  background: transparent; border: none;
  font: 600 11px/1 var(--cb-font-bold);
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--cb-text-sec, var(--cb-muted));
  text-decoration: none;
}
:where(.dc-port) .bl-back:hover{ color: var(--cb-text); text-decoration: none; }
:where(.dc-port) .bl-post-head{ padding: 14px 16px 18px; }
:where(.dc-port) .bl-post-head .bl-pill{ margin-bottom: 12px; }
:where(.dc-port) .bl-post-h{
  font: 300 28px/34px "Mulish", var(--cb-font-light, system-ui);
  letter-spacing: -.4px;
  color: var(--cb-text);
  margin: 0 0 18px;
}
:where(.dc-port) .bl-post-meta{
  display: flex; align-items: center; gap: 10px;
}
:where(.dc-port) .bl-post-byline{ min-width: 0; }
:where(.dc-port) .bl-post-author{
  font: 700 13px/1 var(--cb-font-bold);
  color: var(--cb-text);
}
:where(.dc-port) .bl-post-sub{
  font: 500 13px/19px var(--cb-font-regular);
  color: var(--cb-muted);
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}
:where(.dc-port) .bl-post-dot{ opacity: .6; }
:where(.dc-port) .bl-post-hero{
  margin: 0; padding: 0 16px 18px;
}
:where(.dc-port) .bl-post-body{
  padding: 0 18px 8px;
  max-width: 640px;
  margin: 0 auto;
}
:where(.dc-port) .bl-post-lead{
  font: 500 16px/26px var(--cb-font-regular);
  color: var(--cb-text);
  margin: 0 0 18px;
}
:where(.dc-port) .bl-post-body p{
  font: 400 14px/24px var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
  margin: 0 0 16px;
}
:where(.dc-port) .bl-post-body h2{
  font: 700 16px/22px var(--cb-font-bold);
  color: var(--cb-text);
  margin: 24px 0 10px;
}
:where(.dc-port) .bl-post-list{
  margin: 0 0 16px; padding-left: 18px;
  font: 400 14px/24px var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
}
:where(.dc-port) .bl-post-list li{ margin-bottom: 4px; }
:where(.dc-port) .bl-post-figure{
  margin: 18px -2px 22px;
}
:where(.dc-port) .bl-post-figure figcaption{
  font: 500 11.5px/16px var(--cb-font-regular);
  color: var(--cb-muted);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}
:where(.dc-port) .bl-post-quote{
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--cb-link);
  background: #f7fbfd;
  border-radius: 0 8px 8px 0;
  font: 500 14px/22px var(--cb-font-regular);
  font-style: italic;
  color: var(--cb-text);
}
:root:not([data-theme="light"]) .bl-post-quote{ background: rgba(64,179,222,.06); }
:where(.dc-port) .bl-post-tags{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 16px 22px;
}
:where(.dc-port) .bl-tag{
  padding: 6px 11px;
  background: var(--cb-chip-bg);
  border-radius: 999px;
  font: 600 11px/1 var(--cb-font-bold);
  color: var(--cb-text-sec, var(--cb-muted));
}
:where(.dc-port) .bl-author-card{
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 16px 22px;
  padding: 16px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 14px;
}
:where(.dc-port) .bl-author-body{ flex: 1; min-width: 0; }
:where(.dc-port) .bl-author-name{
  font: 700 14px/1 var(--cb-font-bold);
  color: var(--cb-text);
  margin-bottom: 4px;
}
:where(.dc-port) .bl-author-bio{
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-text-sec, var(--cb-muted));
  margin: 0 0 10px;
}
:where(.dc-port) .bl-author-actions{ display: flex; gap: 8px; }
:where(.dc-port) .bl-author-follow{
  height: 30px; padding: 0 14px;
  background: var(--cb-link); color: #fff;
  border: none; border-radius: 999px;
  font: 700 11px/1 var(--cb-font-bold);
  letter-spacing: .4px;
  cursor: pointer;
}
:where(.dc-port) .bl-author-store{
  height: 30px; padding: 0 14px;
  display: inline-flex; align-items: center;
  background: transparent;
  color: var(--cb-text);
  border: 1px solid var(--cb-border-hard);
  border-radius: 999px;
  font: 700 11px/1 var(--cb-font-bold);
  letter-spacing: .4px;
  text-decoration: none;
}
:where(.dc-port) .bl-author-store:hover{ border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); text-decoration: none; }
@keyframes ms-cover-drag-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
:where(.dc-port) .ms-owner-menu-item.is-danger{ color: #c4564a; }
@keyframes cb-hero-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
@keyframes cb-toggle-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(255,255,255,.08); }
}
:where(.dc-port) .ah-intent{
  max-width: 420px; margin: 0 auto 18px;
  padding: 12px 16px;
  background: rgba(64,179,222,.08);
  border: 1px solid rgba(64,179,222,.28);
  border-radius: 10px;
  font: 400 13px/1.4 var(--cb-font-regular);
  color: var(--cb-text);
  text-align: left;
  display: none;
}
:where(.dc-port) .ah-intent[data-cb-intent-visible]{ display: flex; gap: 10px; align-items: flex-start; }
:where(.dc-port) .ah-intent svg{ flex-shrink: 0; color:var(--cb-link-text,var(--cb-link)); margin-top: 1px; }
:where(.dc-port) .ah-intent strong{ font-weight: 600; color: var(--cb-text); }
:where(.dc-port) .cb-skeleton{
  background: linear-gradient(
    90deg,
    rgba(122, 132, 153, 0.08) 0%,
    rgba(122, 132, 153, 0.18) 50%,
    rgba(122, 132, 153, 0.08) 100%
  );
  background-size: 200% 100%;
  animation: cb-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
:where(.dc-port) .cb-skeleton-circle{ border-radius: 999px; }
@keyframes cb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media  (prefers-reduced-motion: reduce) {:where(.dc-port) .cb-skeleton{ animation: none; }}
:where(.dc-port) .cb-skel-row > .cb-skeleton-circle{ width: 44px; height: 44px; flex-shrink: 0; }
:where(.dc-port) .cb-skel-row > .cb-skel-text > .cb-skeleton{ width: 60%; height: 13px; }
:where(.dc-port) .cb-skel-row > .cb-skel-text > .cb-skeleton + .cb-skeleton{ width: 40%; height: 11px; margin-top: 7px; }
:where(.dc-port) .cb-num-row{
  display: flex; align-items: stretch;
  border: 1px solid var(--cb-border); border-radius: 6px;
  background: var(--cb-card);
  overflow: hidden;
}
:where(.dc-port) .cb-num-row.is-off{ background: var(--cb-bg); opacity: .6; }
:where(.dc-port) .cb-num-prefix{
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; padding: 0 6px;
  border-right: 1px solid var(--cb-border);
  font: 500 11px/1 var(--cb-font-regular);
  color: var(--cb-muted); letter-spacing: .5px;
  background: var(--cb-card);
  flex-shrink: 0;
}
:where(.dc-port) .cb-num-input{
  flex: 1; min-width: 0; height: 44px; padding: 0 12px;
  border: none; background: transparent;
  color: var(--cb-text);
  font: 500 16px/1 var(--cb-font-regular);
  outline: none;
  -moz-appearance: textfield;
  box-sizing: border-box;
}
:where(.dc-port) .cb-num-input::-webkit-inner-spin-button,:where(.dc-port) .cb-num-input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
:where(.dc-port) .cb-num-stepper{
  display: flex; align-items: stretch;
  background: transparent;
  flex-shrink: 0;
}
:where(.dc-port) .cb-num-stepper button{
  width: 38px; padding: 0;
  background: transparent; color: var(--cb-text);
  border: none; border-left: 1px solid var(--cb-border);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
:where(.dc-port) .cb-num-stepper button:hover:not(:disabled){ background: var(--cb-bg); }
:where(.dc-port) .cb-num-stepper button:disabled{ color: var(--cb-muted); cursor: not-allowed; }
:where(.dc-port) .cb-num-stepper svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
:where(.dc-port) .cb-skel-card > .cb-skeleton:nth-child(2){ width: 80%; height: 14px; }
:where(.dc-port) .cb-skel-card > .cb-skeleton:nth-child(3){ width: 50%; height: 11px; }
:where(.dc-port) .cb-skel-message > .cb-skeleton-circle{ width: 46px; height: 46px; flex-shrink: 0; }
:where(.dc-port) .cb-skel-message > .cb-skel-text > .cb-skeleton:nth-child(1){ width: 50%; height: 13px; }
:where(.dc-port) .cb-skel-message > .cb-skel-text > .cb-skeleton:nth-child(2){ width: 85%; height: 11px; margin-top: 7px; }
:where(.dc-port) .cb-pager{
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 22px 18px 28px;
  background: var(--cb-bg);
}
:where(.dc-port) .cb-pager-btn{
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: var(--cb-card); border: 1px solid var(--cb-border);
  border-radius: 999px; color: var(--cb-text);
  font: 400 11px/1 var(--cb-font-regular);
  letter-spacing: 1.6px; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
}
:where(.dc-port) .cb-pager-btn:hover:not(:disabled){ background: var(--cb-bg); }
:where(.dc-port) .cb-pager-btn:disabled{ opacity: .45; cursor: not-allowed; }
:where(.dc-port) .cb-pager-info{
  font: 400 12px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
:where(.dc-port) .cb-picker-mini.n-4{ grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
:where(.dc-port) .cb-picker-mini.n-4 .cb-picker-mini-hero{ grid-row: 1 / span 3; }
:where(.dc-port) .cb-picker-mini.is-empty{
  display: flex; align-items: center; justify-content: center;
  background: var(--cb-bg); color: var(--cb-muted);
  border: 1px dashed var(--cb-border-hard);
  font: 400 9px/1 var(--cb-font-regular);
  text-transform: uppercase; letter-spacing: 1px;
}
:where(.dc-port) .cb-mailsent{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: #f4faf3;
  border: 1px solid #b0daae;
  border-radius: 8px;
}
:root:not([data-theme="light"]) .cb-mailsent{
  background: rgba(123,193,120,.12);
  border-color: rgba(123,193,120,.35);
}
:where(.dc-port) .cb-mailsent-icon{
  flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(123,193,120,.22);
  color: #7bc178;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
:where(.dc-port) .cb-mailsent-body{ flex: 1; min-width: 0; color: var(--cb-sec); font: 400 12px/18px var(--cb-font-regular); }
:where(.dc-port) .cb-mailsent-body b{ color: var(--cb-text); font-weight: 600; }
:where(.dc-port) .cb-mailsent-title{
  font: 600 13px/18px var(--cb-font-semibold);
  color: var(--cb-text);
  margin-bottom: 2px;
}
:where(.dc-port) .cb-mailsent-sub a{
  color:var(--cb-link-text,var(--cb-link)); font-weight: 600;
  text-decoration: none; cursor: pointer;
}
:where(.dc-port) .cb-mailsent-sub a:hover{ text-decoration: underline; }
:where(.dc-port) .cb-mailsent-resent{
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px;
  color: #7bc178; font-weight: 600;
}
:where(.dc-port) .cb-mailsent-resent[hidden]{ display: none; }
:where(.dc-port) .cb-mailsent.is-flush{
  padding: 0;
  background: transparent;
  border: 0;
}
:where(.dc-port) .ms-owner-menu-confirm-go.is-warn{
  background: #eab411; color: #2c3242;
}
:where(.dc-port) .ms-owner-menu-confirm-go.is-warn:hover{ background: #d8a40c; }
:where(.dc-port) .ms-owner-menu-confirm-go.is-primary{
  background: #40b3de;
}
:where(.dc-port) .ms-owner-menu-confirm-go.is-primary:hover{ background: #3aa2ca; }
:where(.dc-port) .set-tabs{
  background: var(--cb-bg);
  border-bottom: 1px solid var(--cb-border);
}
:where(.dc-port) .set-tabs-eyebrow{
  padding: 14px 18px 6px;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--cb-muted);
}
:where(.dc-port) .set-tabs-strip{
  display: flex; gap: 6px;
  padding: 6px 14px 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:where(.dc-port) .set-tabs-strip::-webkit-scrollbar{ display: none; }
:where(.dc-port) .set-tab{
  flex: 0 0 auto;
  scroll-snap-align: center;
  padding: 9px 14px;
  border-radius: 999px;
  font: 500 13px/1 var(--cb-font-regular);
  text-decoration: none;
  background: transparent;
  color: var(--cb-text);
  border: 1px solid var(--cb-border);
  white-space: nowrap;
}
:where(.dc-port) .set-tab:hover:not(.is-active){ background: var(--cb-card); }
:where(.dc-port) .set-tab.is-active{
  background: var(--cb-text);
  color: var(--cb-bg);
  border-color: var(--cb-text);
  font-weight: 600;
}
:where(.dc-port) .set-page-header{ padding: 18px 18px 8px; }
:where(.dc-port) .set-page-title{
  margin: 0;
  font: 700 22px/1.2 var(--cb-font-bold);
  color: var(--cb-text);
}
:where(.dc-port) .set-page-intro{
  margin: 6px 0 0;
  font: 400 13px/20px var(--cb-font-regular);
  color: var(--cb-muted);
  text-wrap: pretty;
}
:where(.dc-port) .set-section{ padding: 20px 18px 4px; }
:where(.dc-port) .set-section.is-danger .set-section-title{ color: #c4564a; }
:where(.dc-port) .set-section.is-danger .set-section-body{
  background: rgba(196,86,74,.06);
  border-color: rgba(196,86,74,.30);
}
:root:not([data-theme="light"]) .set-section.is-danger .set-section-body{
  background: rgba(196,86,74,.12);
  border-color: rgba(196,86,74,.40);
}
:where(.dc-port) .set-section-title{
  font: 600 13px/1 var(--cb-font-semibold);
  color: var(--cb-text);
  letter-spacing: .4px;
}
:where(.dc-port) .set-section-hint{
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-muted);
  margin-top: 4px;
  text-wrap: pretty;
}
:where(.dc-port) .set-section-body{
  margin-top: 12px;
  padding: 14px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  display: flex; flex-direction: column;
  gap: 12px;
}
:where(.dc-port) .set-field{
  display: flex; flex-direction: column;
  gap: 6px;
}
:where(.dc-port) .set-field-label{
  font: 600 13px/18px var(--cb-font-semibold);
  color: var(--cb-text);
}
:where(.dc-port) .set-field-hint{
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .set-input-wrap{
  display: flex; align-items: stretch;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  overflow: hidden;
}
:root:not([data-theme="light"]) .set-input-wrap{ background: #0d1117; border-color: #262d3a; }
:where(.dc-port) .set-input-wrap:focus-within{
  border-color: var(--cb-link);
  box-shadow: 0 0 0 2px rgba(52,182,234,.20);
}
:where(.dc-port) .set-input-prefix,:where(.dc-port) .set-input-suffix{
  display: inline-flex; align-items: center;
  padding: 0 10px;
  background: var(--cb-bg);
  color: var(--cb-muted);
  font: 500 12px/1 var(--cb-font-regular);
  white-space: nowrap;
}
:where(.dc-port) .set-input-prefix{ border-right: 1px solid var(--cb-border); }
:where(.dc-port) .set-input,:where(.dc-port) .set-textarea{
  flex: 1; min-width: 0;
  padding: 10px 12px;
  background: transparent; border: none; outline: none;
  font: 500 13px/20px var(--cb-font-regular);
  color: var(--cb-text);
  box-sizing: border-box;
}
:where(.dc-port) .set-textarea{
  resize: vertical;
  min-height: 80px;
}
:where(.dc-port) .set-select{ position: relative; }
:where(.dc-port) .set-select-btn{
  width: 100%; height: 42px;
  padding: 0 12px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  cursor: pointer; text-align: left;
  outline: none;
  color: var(--cb-text);
  font: 500 13px/1 var(--cb-font-regular);
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
:root:not([data-theme="light"]) .set-select-btn{ background: #0d1117; border-color: #262d3a; }
:where(.dc-port) .set-select.is-open .set-select-btn{ border-color: var(--cb-link); }
:where(.dc-port) .set-select-btn-caret{
  flex: none;
  width: 14px; height: 14px;
  color: var(--cb-muted);
  transition: transform .15s ease;
}
:where(.dc-port) .set-select.is-open .set-select-btn-caret{ transform: rotate(180deg); }
:where(.dc-port) .set-select-current{
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:where(.dc-port) .set-select-menu{
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 30;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20,23,33,.18);
  overflow: hidden; max-height: 280px; overflow-y: auto;
}
:root:not([data-theme="light"]) .set-select-menu{ background: #0d1117; box-shadow: 0 10px 28px rgba(0,0,0,.5); }
:where(.dc-port) .set-select-menu[hidden]{ display: none; }
:where(.dc-port) .set-select-opt{
  padding: 11px 14px;
  font: 500 13px/1.3 var(--cb-font-regular);
  color: var(--cb-text);
  cursor: pointer;
}
:where(.dc-port) .set-select-opt:hover{ background: var(--cb-bg); }
:where(.dc-port) .set-select-opt.is-active{
  font-weight: 600;
  color:var(--cb-link-text,var(--cb-link));
  background: var(--cb-bg);
}
:where(.dc-port) .set-toggle{
  display: flex; align-items: flex-start; gap: 12px;
}
:where(.dc-port) .set-toggle-text{ flex: 1; min-width: 0; }
:where(.dc-port) .set-toggle-label{
  font: 600 13px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
}
:where(.dc-port) .set-toggle-hint{
  font: 400 12px/18px var(--cb-font-regular);
  color: var(--cb-muted);
  margin-top: 2px;
  text-wrap: pretty;
}
:where(.dc-port) .set-toggle-hint a{
  color:var(--cb-link-text,var(--cb-link));
  font-weight: 600;
  text-decoration: none;
}
:where(.dc-port) .set-toggle-hint a:hover{ text-decoration: underline; }
:where(.dc-port) .set-toggle-switch{
  flex: none;
  width: 42px; height: 24px;
  padding: 0;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
:where(.dc-port) .set-toggle-switch[aria-pressed="true"]{
  background: var(--switch-on, var(--cb-link));
  border-color: var(--switch-on, var(--cb-link));
}
:where(.dc-port) .set-toggle-switch-thumb{
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: left 160ms cubic-bezier(.32,.72,.24,1);
}
:where(.dc-port) .set-toggle-switch[aria-pressed="true"] .set-toggle-switch-thumb{ left: 20px; }
:where(.dc-port) .set-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 13px 22px;
  border-radius: 999px;
  font: 600 12px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
:where(.dc-port) .set-btn:disabled{ opacity: .5; cursor: not-allowed; }
:where(.dc-port) .set-btn.is-primary{
  background: var(--cb-link);
  color: #fff;
  border-color: var(--cb-link);
  box-shadow: 0 4px 12px rgba(64,179,222,.32);
}
:where(.dc-port) .set-btn.is-primary:hover:not(:disabled){ background: #3aa2ca; border-color: #3aa2ca; }
:where(.dc-port) .set-btn.is-outline{
  color: var(--cb-text);
  border-color: var(--cb-border);
}
:where(.dc-port) .set-btn.is-outline:hover{ background: var(--cb-bg); }
:where(.dc-port) .set-btn.is-danger{
  background: #c4564a;
  color: #fff;
  border-color: #c4564a;
}
:where(.dc-port) .set-btn.is-danger:hover{ background: #ad4438; }
:where(.dc-port) .set-btn.is-ghost{ color:var(--cb-link-text,var(--cb-link)); }
:where(.dc-port) .set-btn.is-ghost:hover{ background: rgba(64,179,222,.10); }
:where(.dc-port) .set-btn.is-ghost-danger{ color: #c4564a; }
:where(.dc-port) .set-btn.is-ghost-danger:hover{ background: rgba(196,86,74,.10); }
:where(.dc-port) .set-btn-sm{
  padding: 7px 12px;
  letter-spacing: 1.2px;
  font-size: 11px;
  box-shadow: none;
}
:where(.dc-port) .set-actions{
  display: flex; gap: 10px;
  justify-content: flex-end;
  padding: 20px 18px 0;
}
:where(.dc-port) .set-actions.is-split{ justify-content: space-between; align-items: center; }
:where(.dc-port) .set-actions.is-start{ justify-content: flex-start; }
:where(.dc-port) .set-actions.is-center{ justify-content: center; }
:where(.dc-port) .set-actions.is-inline{
  padding: 0;
}
:where(.dc-port) .set-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
:where(.dc-port) .set-error{
  display: flex; align-items: center; gap: 6px;
  font: 500 11px/16px var(--cb-font-regular);
  color: #c98a16;
  margin-top: 2px;
}
:where(.dc-port) .set-error svg{ flex: none; }
:where(.dc-port) .set-success-msg{
  display: flex; align-items: center; gap: 6px;
  font: 500 11px/16px var(--cb-font-regular);
  color: #3aa86a;
  margin-top: 2px;
}
:where(.dc-port) .set-success-msg svg{ flex: none; }
:where(.dc-port) .set-link-tile{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  margin: 0 18px 14px;
}
:where(.dc-port) .set-link-tile:hover{ background: var(--cb-card); }
:root:not([data-theme="light"]) .set-link-tile{ background: #11161f; }
:where(.dc-port) .set-link-tile-icon{ flex: none; color: var(--cb-muted); }
:where(.dc-port) .set-link-tile-body{ flex: 1; min-width: 0; }
:where(.dc-port) .set-link-tile-title{
  font: 600 13px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
}
:where(.dc-port) .set-link-tile-sub{
  margin-top: 2px;
  font: 400 12px/17px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .set-link-tile-arrow{ flex: none; color: var(--cb-muted); }
:where(.dc-port) .set-banner{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  font: 500 12px/18px var(--cb-font-regular);
  color: var(--cb-text);
  text-wrap: pretty;
}
:where(.dc-port) .set-banner svg{ flex: none; margin-top: 1px; }
:where(.dc-port) .set-banner b{ font: 700 12px/18px var(--cb-font-bold); }
:where(.dc-port) .set-banner span.set-banner-sub{ color: var(--cb-muted); }
:where(.dc-port) .set-banner.is-info{
  background: rgba(64,179,222,.10);
  border: 1px solid rgba(64,179,222,.32);
}
:where(.dc-port) .set-banner.is-info svg{ color:var(--cb-link-text,var(--cb-link)); }
:where(.dc-port) .set-banner.is-warn{
  background: rgba(245,166,35,.10);
  border: 1px solid rgba(245,166,35,.32);
}
:where(.dc-port) .set-banner.is-warn svg{ color: #c98a16; }
:where(.dc-port) .set-banner.is-success{
  background: rgba(58,168,106,.08);
  border: 1px solid rgba(58,168,106,.28);
}
:where(.dc-port) .set-banner.is-success svg{ color: #3aa86a; }
/* The tax status disc (QA items 251, 258): green for a declaration in order, amber otherwise, its glyph
   white. The glyph carries its own class so it outranks the banner's `svg` colour rules above, which drew
   it in the banner's own tone on a disc of that tone, where it could not be seen. */
:where(.dc-port) .set-banner .set-status-disc{ display:inline-flex; align-items:center; justify-content:center; flex:none; border-radius:999px; }
:where(.dc-port) .set-banner .set-status-disc.is-ok{ background:#3aa86a; }
:where(.dc-port) .set-banner .set-status-disc.is-warn{ background:#d18a16; }
:where(.dc-port) .set-banner .set-status-disc > .set-status-glyph{ color:#fff; }
:where(.dc-port) .set-row{
  display: flex; align-items: center; gap: 12px;
  padding: 0;
}
:where(.dc-port) .set-row + .set-row{
  padding-top: 12px;
  border-top: 1px solid var(--cb-border);
}
:where(.dc-port) .set-row-body{ flex: 1; min-width: 0; }
:where(.dc-port) .set-row-title{
  font: 600 13px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
}
:where(.dc-port) .set-row-sub{
  margin-top: 2px;
  font: 400 12px/16px var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .set-avatar-row{
  display: flex; align-items: center; gap: 14px;
}
:where(.dc-port) .set-avatar-disc{
  width: 64px; height: 64px;
  border-radius: 999px;
  background-size: cover; background-position: center;
  overflow: hidden;
  flex: none;
}
:where(.dc-port) .set-avatar-disc svg{ display: block; width: 100%; height: 100%; }
:where(.dc-port) .set-avatar-body{ flex: 1; min-width: 0; }
:where(.dc-port) .set-avatar-title{
  font: 600 13px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
}
:where(.dc-port) .set-avatar-sub{
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-muted);
  margin-top: 2px;
}
:where(.dc-port) .set-avatar-actions{
  display: flex; gap: 8px;
  margin-top: 8px;
}
:where(.dc-port) .set-feat{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 4px;
}
:where(.dc-port) .set-feat + .set-feat{ border-top: 1px solid var(--cb-border); padding-top: 12px; }
:where(.dc-port) .set-feat-icon{
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
:where(.dc-port) .set-feat-icon.is-blue{ background: rgba(64,179,222,.13);  color:var(--cb-link-text,#40b3de); }
:where(.dc-port) .set-feat-icon.is-green{ background: rgba(58,168,106,.13);  color: #3aa86a; }
:where(.dc-port) .set-feat-icon.is-orange{ background: rgba(243,166,73,.14);  color: #d68d2a; }
:where(.dc-port) .set-feat-icon.is-purple{ background: rgba(124,92,255,.13);  color: #7c5cff; }
:where(.dc-port) .set-feat-body{ flex: 1; min-width: 0; }
:where(.dc-port) .set-feat-title{
  font: 600 13.5px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
}
:where(.dc-port) .set-feat-hint{
  font: 400 12px/17px var(--cb-font-regular);
  color: var(--cb-muted);
  margin-top: 3px;
  text-wrap: pretty;
}
:where(.dc-port) .set-feat-hint a{
  color:var(--cb-link-text,var(--cb-link));
  font-weight: 600;
  text-decoration: none;
}
:where(.dc-port) .set-feat-hint a:hover{ text-decoration: underline; }
:where(.dc-port) .set-feat-switch{ flex: none; margin-top: 2px; }
:where(.dc-port) .set-radio-card{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  cursor: pointer;
  text-align: left;
  color: var(--cb-text);
  font: 500 13px/1.4 var(--cb-font-regular);
  width: 100%;
}
:where(.dc-port) .set-radio-card.is-active{
  background: var(--cb-bg);
  border-color: var(--cb-link);
  font-weight: 600;
  font-family: var(--cb-font-semibold);
}
:where(.dc-port) .set-radio-dot{
  width: 18px; height: 18px;
  border-radius: 999px;
  flex: none; margin-top: 1px;
  background: transparent;
  border: 2px solid var(--cb-border);
  display: inline-flex; align-items: center; justify-content: center;
}
:where(.dc-port) .set-radio-card.is-active .set-radio-dot{
  background: var(--cb-link);
  border-color: var(--cb-link);
}
:where(.dc-port) .set-radio-card.is-active .set-radio-dot::after{
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #fff;
}
:where(.dc-port) .set-radio-text{ flex: 1; }
:where(.dc-port) .set-check-stack{
  margin-left: 30px;
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
:where(.dc-port) .set-check-card{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  cursor: pointer;
  text-align: left;
  color: var(--cb-text);
  font: 500 12px/1.5 var(--cb-font-regular);
  width: 100%;
  text-wrap: pretty;
}
:where(.dc-port) .set-check-card.is-active{
  background: var(--cb-bg);
  border-color: var(--cb-link);
  font-weight: 600;
}
:where(.dc-port) .set-check-box{
  width: 16px; height: 16px;
  border-radius: 4px;
  flex: none; margin-top: 1px;
  background: transparent;
  border: 2px solid var(--cb-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
:where(.dc-port) .set-check-card.is-active .set-check-box{
  background: var(--cb-link);
  border-color: var(--cb-link);
}
:where(.dc-port) .set-check-card.is-active .set-check-box::after{
  content: "✓";
  font: 700 11px/1 var(--cb-font-bold);
}
:where(.dc-port) .set-code-row{
  display: flex; align-items: flex-start; gap: 12px;
}
:where(.dc-port) .set-code-row + .set-code-row{
  padding-top: 12px;
  border-top: 1px solid var(--cb-border);
}
:where(.dc-port) .set-code-body{ flex: 1; min-width: 0; }
:where(.dc-port) .set-code-head{
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
:where(.dc-port) .set-code-mono{
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--cb-bg);
  color: var(--cb-text);
  font: 700 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .4px;
}
:where(.dc-port) .set-code-pill{
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 11px/1 var(--cb-font-semibold);
}
:where(.dc-port) .set-code-pill.is-active{ background: rgba(58,168,106,.14); color: #3aa86a; }
:where(.dc-port) .set-code-pill.is-scheduled{ background: rgba(64,179,222,.14); color:var(--cb-link-text,#40b3de); }
:where(.dc-port) .set-code-pill.is-expired{ background: var(--cb-bg);        color: var(--cb-muted); }
:where(.dc-port) .set-code-meta{
  font: 500 13px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
  margin-top: 8px;
}
:where(.dc-port) .set-code-sub{
  font: 400 12px/16px var(--cb-font-regular);
  color: var(--cb-muted);
  margin-top: 2px;
}
:where(.dc-port) .set-code-actions{
  display: flex; flex-direction: column;
  gap: 6px;
  flex: none;
}
:where(.dc-port) .set-bullet-list{
  margin: 0;
  padding-left: 18px;
  color: var(--cb-muted);
  font: 400 13px/22px var(--cb-font-regular);
}
:where(.dc-port) .set-help-note{
  font: 500 12px/18px var(--cb-font-regular);
  color: var(--cb-muted);
  padding: 8px 12px;
  background: var(--cb-bg);
  border-radius: 8px;
  margin-top: 4px;
}
:root:not([data-theme="light"]) .set-help-note{ background: #11161f; }
:where(.dc-port) .set-help-note a{
  color:var(--cb-link-text,var(--cb-link));
  font-weight: 600;
  text-decoration: none;
}
:where(.dc-port) .set-help-note a:hover{ text-decoration: underline; }
:where(.dc-port) .set-help-link{
  align-self: flex-start;
  color:var(--cb-link-text,var(--cb-link));
  font: 500 12px/1 var(--cb-font-regular);
  text-decoration: none;
}
:where(.dc-port) .set-help-link:hover{ text-decoration: underline; }
:where(.dc-port) .set-bottom-pad{ height: 32px; }
:where(.dc-port) .sd-count{
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cb-bg);
  color: var(--cb-muted);
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 0;
  vertical-align: 1px;
}
:root:not([data-theme="light"]) .sd-count{ background: #1a1f2c; }
:where(.dc-port) .sd-list{ display: flex; flex-direction: column; gap: 10px; }
:where(.dc-port) .sd-card{
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: background 140ms ease, border-color 140ms ease;
}
:where(.dc-port) .sd-card:hover{ background: var(--cb-bg); border-color: var(--cb-border-hard); }
:root:not([data-theme="light"]) .sd-card:hover{ background: #1a1f2c; }
:where(.dc-port) .sd-card-thumb{
  width: 72px; height: 72px; flex: none;
  border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: var(--cb-bg);
  box-shadow: inset 0 0 0 1px rgba(20,23,33,.06);
}
:where(.dc-port) .sd-card-body{ flex: 1; min-width: 0; }
:where(.dc-port) .sd-card-title{
  font: 600 13.5px/1.25 var(--cb-font-semibold);
  color: var(--cb-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:where(.dc-port) .sd-card-seller{
  margin-top: 3px;
  font: 400 12px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
:where(.dc-port) .sd-card-seller b{ color: var(--cb-text); font-weight: 600; }
:where(.dc-port) .sd-card-prices{
  margin-top: 6px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
:where(.dc-port) .sd-card-was{
  color: var(--cb-muted);
  font: 500 12px/1 var(--cb-font-regular);
  text-decoration: line-through;
}
:where(.dc-port) .sd-card-now{
  color: var(--cb-text);
  font: 700 14px/1 var(--cb-font-bold);
}
:where(.dc-port) .sd-card-save{
  font: 600 11px/1 var(--cb-font-semibold);
  color: #3aa86a;
}
:where(.dc-port) .sd-card-meta{
  margin-top: 7px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
:where(.dc-port) .sd-pill{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: .2px;
}
:where(.dc-port) .sd-pill.is-percent{ background: rgba(217,140,79,.14); color: #d97f3a; }
:where(.dc-port) .sd-pill.is-ending{ background: rgba(196,86,74,.10);  color: #c4564a; }
:where(.dc-port) .sd-pill.is-new{ background: rgba(58,168,106,.14); color: #3aa86a; }
:where(.dc-port) .sd-pill.is-time{ background: var(--cb-bg); color: var(--cb-muted); }
:root:not([data-theme="light"]) .sd-pill.is-time{ background: #1a1f2c; }
:where(.dc-port) .sd-pill svg{ flex: none; }
:where(.dc-port) .set-code-mono{
  border: none;
  cursor: pointer;
  transition: background 140ms ease;
}
:where(.dc-port) .set-code-mono:hover{ background: var(--cb-border); }
:root:not([data-theme="light"]) .set-code-mono:hover{ background: #262d3a; }
:where(.dc-port) .fp-empty:has(>.cb-empty),:where(.dc-port) .nt-empty:has(>.cb-empty),:where(.dc-port) .cv-empty:has(>.cb-empty),:where(.dc-port) .ph-empty-year:has(>.cb-empty){padding:0;display:block;border:0;background:transparent}
/* fix-a's settings sweep SEQ12: a switched-off store's Store tab, red as master drew it. */
.set-tab.is-marked { color: var(--cb-error); }

/* ─────────── About page styles ───────────
       Editorial layout - different rhythm from the doc pages (terms /
       privacy). Stacks of soft cards, generous whitespace, big type
       at the top. Classes scoped under `.ab-*`. */
.ab-page:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { padding-bottom: 40px; }
/* Hero */
.ab-hero:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      background:
        radial-gradient(800px 500px at 20% -10%, rgba(64,179,222,.10), transparent 60%),
        radial-gradient(700px 500px at 110% 110%, rgba(253,198,78,.07), transparent 60%),
        var(--cb-header-bg);
      color: #e8eaf0;
      padding: 36px 20px 40px;
      position: relative;
      overflow: hidden;
    }
.ab-hero-eyebrow:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 11px 5px 9px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: rgba(232,234,240,.78);
    }
.ab-hero-eyebrow .dot:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { width: 6px; height: 6px; border-radius: 50%; background: #7bc178; display: inline-block; }
.ab-hero h1:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 14px 0 0;
      font: 300 38px/1.05 var(--cb-font-light);
      letter-spacing: -.8px;
      text-wrap: balance;
    }
.ab-hero h1 strong:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font-weight: 600; color: #c1f0ed;
    }
.ab-hero-sub:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 14px 0 0;
      font: 400 15px/22px var(--cb-font-regular);
      color: rgba(232,234,240,.78); max-width: 38em;
      text-wrap: pretty;
    }
/* Illustration sits as a full-width banner above the headline,
       centered, ~220px tall on mobile. Background continues the hero
       gradient so the figure appears to float on the dark band. */
.ab-hero-art:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: flex; align-items: center; justify-content: center;
      width: 100%; height: 220px;
      margin: -10px 0 18px;
      pointer-events: none;
    }
.ab-hero-art img:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: block;
      max-width: 100%; max-height: 100%;
      height: 100%; width: auto;
    }
/* Section frame */
.ab-sec:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { padding: 36px 16px 4px; }
.ab-sec h2:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 0 0 6px;
      font: 600 22px/28px var(--cb-font-semibold);
      letter-spacing: -.2px; color: var(--cb-text);
      text-wrap: balance;
    }
.ab-sec .ab-kicker:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 10px;
    }
.ab-sec p:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 12px 0 0;
      font: 400 14.5px/24px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty;
    }
.ab-sec p b:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: var(--cb-text); font-weight: 600; }
/* Stats band */
.ab-stats:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin-top: 24px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      padding: 4px 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
.ab-stat:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      padding: 18px 16px;
      border-top: 1px solid var(--cb-border);
      border-left: 1px solid var(--cb-border);
    }
.ab-stat:nth-child(-n+2):where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { border-top: 0; }
.ab-stat:nth-child(2n+1):where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { border-left: 0; }
.ab-stat-n:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font: 700 26px/1 var(--cb-font-semibold);
      color: var(--cb-text); letter-spacing: -.5px;
      font-variant-numeric: tabular-nums;
    }
.ab-stat-l:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin-top: 6px;
      font: 400 12px/16px var(--cb-font-regular);
      color: var(--cb-muted);
    }
/* Promise cards (mirror the brand commitments from terms/privacy) */
.ab-promises:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 14px 0 0;
      display: grid; gap: 12px;
    }
.ab-promise:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: grid; grid-template-columns: 44px 1fr;
      column-gap: 14px; align-items: start;
      padding: 16px 16px 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      width: 44px; height: 44px; border-radius: 12px;
      display: inline-flex; align-items: center; justify-content: center;
    }
.ab-promise-icon svg:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { width: 22px; height: 22px; }
.ab-promise--green .ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { background: rgba(123,193,120,.14); color: #2f7a53; }
.ab-promise--blue  .ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { background: rgba(64,179,222,.14); color: #1d6f8e; }
.ab-promise--amber .ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { background: rgba(253,198,78,.18); color: #7a5a0a; }
.ab-promise--red   .ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { background: rgba(236,77,77,.10);  color: #c14a3a; }
:root:not([data-theme="light"]) .ab-promise--green .ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: #a8d8a4; }
:root:not([data-theme="light"]) .ab-promise--blue  .ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: #9ddef3; }
:root:not([data-theme="light"]) .ab-promise--amber .ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: #fde2a7; }
:root:not([data-theme="light"]) .ab-promise--red   .ab-promise-icon:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: #f3a7a0; }
.ab-promise-title:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font: 600 15px/20px var(--cb-font-semibold);
      color: var(--cb-text); margin-bottom: 4px;
    }
.ab-promise-body:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font: 400 13.5px/20px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty;
    }
.ab-promise-body a:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
      border-bottom: 1px solid rgba(64,179,222,.32);
    }
/* Founder note */
.ab-note:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 14px 0 0; padding: 22px 18px 18px;
      background: var(--cb-panel);
      border: 1px solid var(--cb-border);
      border-radius: 14px;
      position: relative;
    }
.ab-note:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"]))::before {
      content: ""; position: absolute; left: 18px; top: -1px;
      width: 36px; height: 3px; border-radius: 0 0 3px 3px;
      background: #FDC64E;
    }
.ab-note-quote:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font: 300 19px/28px var(--cb-font-light);
      color: var(--cb-text); text-wrap: pretty;
      letter-spacing: -.1px;
    }
.ab-note-quote b:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { font-weight: 600; }
.ab-note-sign:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin-top: 14px; padding-top: 14px;
      border-top: 1px solid var(--cb-border);
      display: flex; align-items: center; gap: 12px;
    }
.ab-note-avatar:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      width: 38px; height: 38px; border-radius: 50%;
      background: linear-gradient(135deg, #40b3de, #1d6f8e);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font: 700 15px/1 var(--cb-font-semibold);
    }
.ab-note-who:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { font: 600 13px/18px var(--cb-font-semibold); color: var(--cb-text); }
.ab-note-role:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { font: 400 12px/16px var(--cb-font-regular); color: var(--cb-muted); }
/* For buyers / for sellers / for partners - horizontal row cards.
       Kicker + title + body on the left, big arrow on the right. */
.ab-tracks:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { margin: 14px 0 0; display: grid; gap: 10px; }
.ab-track:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: grid;
      grid-template-columns: 1fr 28px;
      align-items: center; column-gap: 16px;
      padding: 14px 16px 14px 18px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-left: 4px solid var(--ab-track-accent, var(--cb-link));
      border-radius: 12px;
      text-decoration: none; color: inherit;
      transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    }
/* Per-track accent - matches the homepage hero Shop/Sell/Earn palette */
.ab-track--shop:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { --ab-track-accent: #40b3de; }
.ab-track--sell:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { --ab-track-accent: #7bc178; }
.ab-track--earn:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { --ab-track-accent: #f3a649; }
.ab-track--shop .ab-track-kicker:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color:var(--cb-link-text,#40b3de); }
.ab-track--sell .ab-track-kicker:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: #5a9e57; }
.ab-track--earn .ab-track-kicker:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: #c87f1f; }
:root:not([data-theme="light"]) .ab-track--sell .ab-track-kicker:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: #a8d8a4; }
:root:not([data-theme="light"]) .ab-track--earn .ab-track-kicker:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: #f5bc7a; }
.ab-track:hover:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      border-color: var(--ab-track-accent, var(--cb-link));
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(20,23,33,.06);
    }
.ab-track:hover .ab-track-arrow:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color: var(--ab-track-accent, var(--cb-link)); }
.ab-track-content:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { min-width: 0; }
.ab-track-kicker:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: block;
      font: 400 10px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
      margin-bottom: 6px;
    }
.ab-track-title:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font: 600 16px/22px var(--cb-font-semibold); color: var(--cb-text);
    }
.ab-track-body:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 4px 0 0;
      font: 400 13px/19px var(--cb-font-regular); color: var(--cb-sec);
      text-wrap: pretty;
    }
.ab-track-arrow:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cb-muted);
      transition: color 160ms ease, transform 160ms ease;
    }
.ab-track:hover .ab-track-arrow:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { color:var(--cb-link-text,var(--cb-link)); transform: translateX(3px); }
/* Where we are */
.ab-where-photo-frame:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: block;
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 14px;
      margin: 16px 0 14px;
      box-shadow: 0 8px 28px rgba(20,23,33,.10);
      /* --ab-px is updated by JS on scroll. Range: ~-40px..+40px.
         The image inside is 25% taller than the frame, giving headroom
         for translation without revealing edges. */
      --ab-px: 0px;
    }
.ab-where-photo:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      position: absolute; left: 0; right: 0;
      top: -12.5%; height: 125%;
      width: 100%; object-fit: cover; object-position: center 38%;
      transform: translateY(var(--ab-px, 0px));
      will-change: transform;
      transition: transform 80ms linear;
    }
@media (prefers-reduced-motion: reduce) {
      .ab-where-photo:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { transform: none !important; transition: none; }
    }
.ab-where-caption:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: flex; align-items: center; gap: 8px;
      margin: -8px 0 18px;
      font: 400 11.5px/16px var(--cb-font-regular);
      letter-spacing: .3px;
      color: var(--cb-muted);
    }
.ab-where-caption .dot:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { width: 4px; height: 4px; border-radius: 50%; background: #f3a649; }
.ab-where:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: grid; grid-template-columns: 1fr; gap: 12px;
      margin: 14px 0 0;
    }
.ab-where-card:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      padding: 16px 16px 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.ab-where-card dt:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 6px;
    }
.ab-where-card dd:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 0;
      font: 500 14px/20px var(--cb-font-regular);
      color: var(--cb-text);
    }
.ab-where-card dd a:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
      border-bottom: 1px solid rgba(64,179,222,.32);
    }
/* End CTA band */
.ab-end:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      margin: 32px 0 0; padding: 22px 16px 24px;
      background: var(--cb-header-bg); color: #fff;
      border-radius: 16px;
      text-align: center;
    }
.ab-end-h:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      font: 600 20px/26px var(--cb-font-semibold);
      letter-spacing: -.1px; margin-bottom: 14px;
      text-wrap: balance;
    }
.ab-end-row:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ab-end-btn:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) {
      display: inline-flex; align-items: center; justify-content: center;
      height: 44px; padding: 0 18px; border-radius: 999px;
      text-decoration: none; cursor: pointer; border: none;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      transition: filter 160ms ease;
    }
.ab-end-btn--primary:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { background: #40b3de; color: #fff; }
.ab-end-btn--secondary:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.22); }
.ab-end-btn:hover:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { filter: brightness(1.08); }
@media (min-width: 720px) {
      .ab-hero:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { padding: 64px 40px 60px; }
      .ab-hero h1:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { font-size: 56px; line-height: 1; }
      .ab-hero-art:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { height: 300px; margin: -12px 0 24px; }
      .ab-sec:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { padding: 56px 40px 4px; }
      .ab-stats:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { grid-template-columns: repeat(4, 1fr); }
      .ab-stat:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { border-top: 0; }
      .ab-stat:nth-child(2n+1):where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { border-left: 0; }
      .ab-stat:not(:first-child):where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { border-left: 1px solid var(--cb-border); }
      .ab-promises:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { grid-template-columns: repeat(2, 1fr); }
      .ab-where:where(body[data-cb-page-css~="about"],body[data-cb-page-css~="about"] *,:has(>body[data-cb-page-css~="about"])) { grid-template-columns: repeat(2, 1fr); }
    }



/* v3 desktop checkout: the dark rules (v3 plan U24; KTD4, KD6).
 *
 * `production-desktop/assets/css/checkout.css` ends with 19 `[data-theme="dark"]` rules. U6's port
 * dropped them as "dead desktop dark rules" — true of a handoff page, which sets `data-theme` only
 * when the reader picks light, and false of a v3 page: the desktop layout writes `data-theme`
 * explicitly on every request ("html[data-theme] is always explicit (`dark` or `light`)", U7), so
 * `html[data-theme="dark"]` is present for the default reader and these rules are live. Without
 * them the checkout's panels, inputs, methods, nudge and trust row keep their light-theme
 * backgrounds on a dark page.
 *
 * Restored verbatim from the handoff @ 2f4fe50, in its own order, as this page's own file so U6's
 * shared checkout.css is untouched. The same drop affects `store.css` (7 rules, U16) and
 * `product.css` (1 rule, U14); reported to the master rather than fixed here.
 */
[data-theme="dark"] .ch-tax:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: #1a2030; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);}
[data-theme="dark"] .ch-trust:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: #1a2030; border-top: 1px solid rgba(255,255,255,.06);}
[data-theme="dark"] .ch-trust-item:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])), [data-theme="dark"] .ch-trust-item span:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {color: rgba(255,255,255,.62);}
[data-theme="dark"] .ch-trust-fine:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {color: rgba(255,255,255,.50);}
[data-theme="dark"] .ch-legal:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: #1a2030; margin: 0; padding: 14px 18px; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.06); text-align: center;}
[data-theme="dark"] .ch-method:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])), [data-theme="dark"] .ch-method:first-child:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: #1f2636; border-color: rgba(255,255,255,.10);}
[data-theme="dark"] .ch-method-radio:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {border-color: rgba(255,255,255,.22);}
[data-theme="dark"] .ch-method-note:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {color: rgba(255,255,255,.55);}
[data-theme="dark"] .ch-input:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])), [data-theme="dark"] .ch-textarea:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])), [data-theme="dark"] .ch-discount-input:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: #1f2636; border-color: rgba(255,255,255,.18); color: var(--cb-text);}
[data-theme="dark"] .ch-input:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"]))::placeholder, [data-theme="dark"] .ch-textarea:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"]))::placeholder, [data-theme="dark"] .ch-discount-input:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"]))::placeholder {color: rgba(255,255,255,.32);}
[data-theme="dark"] .ch-express-btn.is-googlepay:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {border-color: rgba(255,255,255,.20);}
[data-theme="dark"] .ch-item-bundle:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: rgba(124,92,255,.10);}
[data-theme="dark"] .ch-bundle-contents:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: transparent;}
[data-theme="dark"] .ch-nudge:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: rgba(64,179,222,.10); border-color: rgba(64,179,222,.30);}
[data-theme="dark"] .ch-nudge.is-max:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: rgba(123,193,120,.10); border-color: rgba(123,193,120,.35);}
[data-theme="dark"] .ch-discount-chip:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: rgba(123,193,120,.12); border-color: rgba(123,193,120,.40);}
[data-theme="dark"] .ch-alert:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {background: rgba(236,77,77,.12); border-color: rgba(236,77,77,.40); color: #ff8a85;}
[data-theme="dark"] .ch-method-mark:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {color: rgba(255,255,255,.62);}
[data-theme="dark"] .ch-card-mark.ch-card-mc:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {}

/* No cart control on a checkout page. The handoff's `checkout.html` carries no `.hm-floatcart-host`
   on either build — `marketplace.html` and the other browsing pages do — because a bubble that
   opens the cart is noise on the page that *is* the cart. The v3 layouts render the control on
   every page (it is U7's and U8's, and the cross-tab reveal needs it in the DOM everywhere else),
   so the page that does not want it hides it here. `display:none`, not `visibility`, so it leaves
   the accessibility tree as well as the picture. */
.hm-floatcart-host:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {display:none!important}

/* The business block has one field here, not two: `tax_regions` stores a VAT number and the two
   business flags and has no column for a company name (docs/v3/decisions/pending/
   U24-business-name-field.md). The design's `.ch-business-fields` is a two-column grid whose third
   child, the "verified before any exemption" note, therefore sits under the first field; with one
   field the note flows into the empty second cell and reads as a caption beside the input. Spanning
   it keeps the field the width the design draws it and the note where the design puts it. */
.dch-wrap .ch-business-fields > .ch-tax-help:where(body[data-cb-page-css~="checkout"],body[data-cb-page-css~="checkout"] *,:has(>body[data-cb-page-css~="checkout"])) {grid-column: 1 / -1;}
/* ─────────── Contact page styles ───────────
       A clean grid of routed-by-purpose email addresses, a simple
       mailto form for everything else, and the office card. Scoped
       under `.ct-*`. */
/* Hero illustration banner above the title - matches about/licenses pattern. */
.ct-hero-art:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      display: flex; align-items: center; justify-content: center;
      width: 100%; height: 200px;
      margin: -4px 0 18px;
      pointer-events: none;
    }
.ct-hero-art img:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      display: block;
      max-width: 100%; max-height: 100%;
      height: 100%; width: auto;
    }
.ct-page:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { padding: 28px 16px 60px; background: var(--cb-bg); }
/* Header */
.ct-eyebrow:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 2.4px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 14px;
    }
.ct-h1:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      margin: 0;
      font: 300 38px/1.05 var(--cb-font-light);
      color: var(--cb-text); letter-spacing: -.5px;
      text-wrap: balance;
    }
.ct-h1 strong:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { font-weight: 600; }
.ct-lede:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      margin: 14px 0 0;
      font: 400 15px/24px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty; max-width: 38em;
    }
.ct-lede a:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color:var(--cb-link-text,var(--cb-link)); text-decoration: none; border-bottom: 1px solid rgba(64,179,222,.32); }
/* SLA pill */
.ct-sla:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 18px;
      padding: 6px 12px 6px 10px;
      background: rgba(123,193,120,.14);
      border: 1px solid rgba(123,193,120,.32);
      border-radius: 999px;
      font: 400 12px/1 var(--cb-font-regular);
      color: #2f7a53;
    }
:root:not([data-theme="light"]) .ct-sla:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color: #a8d8a4; }
.ct-sla b:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color: inherit; font-weight: 700; }
/* Email grid - single column inside the 480px-capped .cb-app shell.
       Viewport-width media queries can't help here because the container
       is fixed-width; we'd just end up overflowing the phone frame. */
.ct-grid:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      margin-top: 28px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
.ct-card:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      display: flex; flex-direction: column;
      padding: 18px 16px 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      text-decoration: none; color: inherit;
      transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    }
.ct-card:hover:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      border-color: var(--cb-link);
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(20,23,33,.08);
    }
.ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      width: 36px; height: 36px; border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 10px;
    }
.ct-card-icon svg:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { width: 18px; height: 18px; }
.ct-card--blue   .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { background: rgba(64,179,222,.14); color: #1d6f8e; }
.ct-card--green  .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { background: rgba(123,193,120,.14); color: #2f7a53; }
.ct-card--amber  .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { background: rgba(253,198,78,.18); color: #7a5a0a; }
.ct-card--rose   .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { background: rgba(247,120,120,.16); color: #c14a3a; }
.ct-card--violet .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { background: rgba(124,92,255,.14); color: #5946c5; }
.ct-card--mint   .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { background: rgba(111,215,201,.20); color: #1e7c6d; }
:root:not([data-theme="light"]) .ct-card--blue   .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color: #9ddef3; }
:root:not([data-theme="light"]) .ct-card--green  .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color: #a8d8a4; }
:root:not([data-theme="light"]) .ct-card--amber  .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color: #fde2a7; }
:root:not([data-theme="light"]) .ct-card--rose   .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color: #f3a7a0; }
:root:not([data-theme="light"]) .ct-card--violet .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color: #b8a9ff; }
:root:not([data-theme="light"]) .ct-card--mint   .ct-card-icon:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { color: #a8e8de; }
.ct-card-title:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      font: 600 15px/20px var(--cb-font-semibold);
      color: var(--cb-text); margin-bottom: 4px;
    }
.ct-card-sub:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      font: 400 12.5px/18px var(--cb-font-regular);
      color: var(--cb-muted); text-wrap: pretty; margin-bottom: 12px;
      overflow-wrap: break-word; word-break: normal; min-width: 0;
    }
.ct-card-mail:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      font: 600 13.5px/18px var(--cb-font-semibold);
      color:var(--cb-link-text,var(--cb-link)); border-bottom: 1px solid rgba(64,179,222,.32);
      align-self: flex-start;
    }
.ct-card-tag:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      align-self: flex-end;
      padding: 3px 8px; border-radius: 999px;
      font: 600 9.5px/1 var(--cb-font-semibold);
      letter-spacing: 1px; text-transform: uppercase;
      background: var(--cb-chip-bg); color: var(--cb-muted);
      margin-bottom: -4px; margin-top: 8px;
    }
.ct-card-row:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      display: flex; justify-content: space-between; align-items: center; gap: 10px;
    }
/* Section spacers */
.ct-section:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { margin-top: 36px; }
.ct-section-h:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      margin: 0 0 6px;
      font: 600 18px/24px var(--cb-font-semibold);
      color: var(--cb-text); letter-spacing: -.1px;
    }
.ct-section-sub:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      margin: 0 0 16px;
      font: 400 13.5px/20px var(--cb-font-regular);
      color: var(--cb-muted); text-wrap: pretty;
    }
/* Quick-form (mailto-based fallback) */
.ct-form:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      padding: 18px 16px 16px;
    }
.ct-field:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { display: block; margin-bottom: 12px; }
.ct-field label:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      display: block;
      font: 500 12px/1 var(--cb-font-semibold);
      letter-spacing: .2px;
      color: var(--cb-sec); margin-bottom: 6px;
    }
.ct-field input:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])), .ct-field textarea:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      width: 100%;
      background: var(--cb-panel);
      border: 1px solid var(--cb-border-hard);
      border-radius: 8px; padding: 10px 12px;
      font: 400 14px/20px var(--cb-font-regular);
      color: var(--cb-text);
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }
.ct-field input:focus:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])), .ct-field textarea:focus:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      outline: none;
      border-color: var(--cb-link);
      box-shadow: 0 0 0 3px rgba(64,179,222,.18);
    }
/* Custom select uses site.js's [data-set-select] component - same
       look + behavior as Settings pages, so the open menu is themed. */
.ct-field textarea:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { min-height: 110px; resize: vertical; }
.ct-field-help:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      font: 400 11.5px/16px var(--cb-font-regular);
      color: var(--cb-muted); margin-top: 6px;
    }
.ct-form-row:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ct-form-row .ct-field-help:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { flex: 1; margin: 0; }
.ct-submit:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      height: 44px; padding: 0 22px; border-radius: 999px;
      background: #40b3de; color: #fff; border: none; cursor: pointer;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      transition: filter 160ms ease;
    }
.ct-submit:hover:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { filter: brightness(1.08); }
/* Office & social card row */
.ct-meta:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px;
    }
@media (min-width: 720px) { .ct-meta:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { grid-template-columns: 1.4fr 1fr; } }
.ct-office:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      padding: 18px 16px 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.ct-office-eyebrow:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 10px;
    }
.ct-office-name:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { font: 600 16px/22px var(--cb-font-semibold); color: var(--cb-text); }
.ct-office-addr:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { margin-top: 4px; font: 400 13.5px/20px var(--cb-font-regular); color: var(--cb-sec); }
.ct-office-meta:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cb-border);
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    }
.ct-office-meta dt:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { font: 400 10.5px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 4px; }
.ct-office-meta dd:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { margin: 0; font: 500 13px/18px var(--cb-font-regular); color: var(--cb-text); }
.ct-social:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      padding: 18px 16px 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      display: flex; flex-direction: column;
    }
.ct-social-eyebrow:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 10px;
    }
.ct-social-title:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      font: 600 16px/22px var(--cb-font-semibold); color: var(--cb-text);
      margin-bottom: 10px;
    }
.ct-social-row:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.ct-social-link:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--cb-chip-bg);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cb-text); text-decoration: none;
      transition: background 160ms ease, color 160ms ease;
    }
.ct-social-link:hover:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { background: var(--cb-link); color: #fff; }
.ct-social-link svg:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { width: 18px; height: 18px; }

/* Master's ContactFormProtection: the bots' trap field sits off-screen (not display:none, which some
   bots skip); the Turnstile widget keeps the form's rhythm. */
.ct-field-website:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-turnstile:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { margin: 4px 0 12px; }
.ct-turnstile-fallback:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { margin-top: 8px; }
/* Send while the spam check is unverified (QA item 241): shared--turnstile disables it, and it looked
   enabled. Drawn as the product form's disabled Publish is (no disabled token exists), with the note
   under the widget saying why; neither shows once the check passes, nor the note beside the fallback. */
.ct-submit:disabled:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { background: var(--cb-bg); border: 1px solid var(--cb-border-hard); color: var(--cb-muted); cursor: not-allowed; filter: none; }
.ct-turnstile-note:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { display: none; margin-top: 8px; }
.ct-form:has(.ct-submit:disabled) .ct-turnstile-note:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { display: block; }
.ct-form:has(.ct-turnstile-fallback:not([hidden])) .ct-turnstile-note:where(body[data-cb-page-css~="contact"],body[data-cb-page-css~="contact"] *,:has(>body[data-cb-page-css~="contact"])) { display: none; }
/* ───────── Conversations (cv-*) ─────────
       Two views, swapped in-DOM by JS (no URL change):
         · Inbox  - list of dialogs with tab filter (All / Users / Cubebrush / Trash)
         · Thread - single dialog with messages + attachments + compose strip

       BACKEND:
         GET /api/me/conversations?tab=all|users|cubebrush|trash&page=N
         GET /api/me/conversations/:id  → { user, messages: [{ from:'me'|'them', author, when, body, attachments }] }
         POST /api/me/conversations/:id/messages { body, files[] } → 201
         POST /api/me/conversations/:id/favorite     → toggles fav
         POST /api/me/conversations/:id/trash        → soft-delete
         POST /api/me/conversations/:id/restore      → from trash
         The swipe-to-reveal gesture exposes the same actions surfaced
         via the heart icon (favorite) and the trailing trash button.
         Optimistic update on tap; reconcile on response. */
/* Page head */
.cv-head:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: var(--cb-card); border-bottom: 1px solid var(--cb-border); padding: 24px 16px 14px; }
.cv-h1:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { margin: 0; font: 300 28px/1.1 var(--cb-font-light), Mulish, system-ui; color: var(--cb-text); letter-spacing: -.2px; }
.cv-sub:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { margin: 6px 0 0; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted); }
/* Tabs */
.cv-tabs:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: flex; align-items: center; justify-content: space-between;
      gap: 4px;
      padding: 12px 12px 0;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
      overflow-x: auto;
    }
.cv-tabs:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"]))::-webkit-scrollbar { display: none; }
.cv-tabs-left:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { display: flex; gap: 4px; }
.cv-tab:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      background: transparent; border: none; cursor: pointer;
      padding: 10px 10px 14px;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: var(--cb-muted);
      white-space: nowrap;
    }
.cv-tab[aria-current="page"]:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      color: var(--cb-text);
      border-bottom-color: var(--cb-text);
    }
.cv-tab b:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      color: inherit;
      font-weight: 700;
    }
/* Dialog rows */
.cv-list:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: var(--cb-card); }
.cv-row:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      position: relative; overflow: hidden;
      background: var(--cb-card);
      transition: max-height .26s cubic-bezier(.4,0,.2,1), opacity .18s ease-out;
    }
.cv-row[hidden]:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { display: none; }
.cv-row.is-removing:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { opacity: 0; max-height: 0; pointer-events: none; }
/* Trailing action layer (revealed by swipe) */
.cv-row-actions:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      position: absolute; inset: 0;
      display: flex; justify-content: flex-end;
      pointer-events: none;
    }
.cv-row.is-revealed .cv-row-actions:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { pointer-events: auto; }
.cv-row-action:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      width: 78px;
      display: inline-flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 6px;
      border: none; cursor: pointer;
      color: #fff;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
    }
.cv-row-action.is-fav:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: #f5a623; }
.cv-row-action.is-trash:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: #ec5a5a; }
.cv-row-action svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 22px; height: 22px; }
/* Delete for good, on a trashed row in Pin's place (buyer-account parity sweep M4); armed after one tap. */
.cv-row-action.is-delete:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: #b8403a; }
.cv-row-action.is-delete.is-armed:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: #8a2620; }
/* Foreground (the swipable row). The bottom divider lives here
       (not on .cv-row) so the underlying yellow/red action layer
       never peeks through where the row border would be. */
.cv-row-fg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      position: relative;
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px 16px;
      background: var(--cb-card);
      cursor: pointer;
      user-select: none; touch-action: pan-y;
      border-left: 3px solid transparent;
      border-bottom: 1px solid var(--cb-border);
      transform: translate3d(0, 0, 0);
      transition: transform .22s cubic-bezier(.2,.8,.2,1);
    }
.cv-row.is-revealed .cv-row-fg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      transform: translate3d(-156px, 0, 0);
    }
.cv-row.is-dragging .cv-row-fg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      transition: none;
    }
/* Unread treatment - blue left rail + faint blue overlay */
.cv-row[data-read="false"] .cv-row-fg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      background:
        linear-gradient(rgba(64,179,222,.07), rgba(64,179,222,.07)),
        var(--cb-card);
      border-left-color: var(--cb-link);
    }
:root:not([data-theme="light"]) .cv-row[data-read="false"] .cv-row-fg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      background:
        linear-gradient(rgba(64,179,222,.10), rgba(64,179,222,.10)),
        var(--cb-card);
    }
.cv-avatar:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      width: 44px; height: 44px;
      border-radius: 50%;
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font: 600 16px/1 var(--cb-font-semibold);
      letter-spacing: .2px;
      flex: none;
      overflow: hidden;
    }
/* When the data-cb-avatar SVG portrait is injected by site.js,
       drop the solid-color initials backdrop and let the SVG own the
       circle. */
.cv-avatar[data-cb-avatar]:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      background: transparent !important;
      padding: 0;
    }
.cv-avatar[data-cb-avatar] svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 100%; height: 100%; display: block; }
/* r38 A7: the row opens with its own button, laid out as the row was. */
.cv-row-open:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; margin: 0; padding: 0;
               border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cv-row-open:focus-visible:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { outline: 2px solid var(--cb-link); outline-offset: 2px; border-radius: 8px; }
.cv-meta:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { flex: 1; min-width: 0; }
.cv-meta-top:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: flex; align-items: baseline; gap: 8px;
      margin-bottom: 4px;
    }
.cv-meta-name:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      font: 600 13px/1 var(--cb-font-semibold);
      color:var(--cb-link-text,var(--cb-link));
    }
.cv-meta-when:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.cv-meta-body:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: flex; align-items: flex-start; gap: 8px;
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.cv-meta-snippet:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-wrap: pretty;
    }
.cv-staff-mark:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px;
      flex: none; overflow: hidden;
    }
.cv-staff-mark[data-cb-avatar]:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: transparent !important; padding: 0; }
.cv-staff-mark[data-cb-avatar] svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 100%; height: 100%; display: block; }
.cv-heart-btn:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      flex: none; align-self: flex-start; padding-top: 2px;
      background: transparent; border: none; cursor: pointer;
      padding: 4px; margin-top: -4px; margin-right: -4px;
      color: var(--cb-muted);
      display: inline-flex; align-items: center; justify-content: center;
    }
.cv-heart-btn[aria-pressed="true"]:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: #ec5a5a; }
.cv-heart-btn svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 18px; height: 18px; }
.cv-heart-btn[aria-pressed="false"] svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { fill: none; stroke: currentColor; stroke-width: 1.8; }
.cv-heart-btn[aria-pressed="true"] svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { fill: currentColor; stroke: none; }
/* Empty state */
.cv-empty:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      padding: 64px 24px 56px; text-align: center;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.cv-empty-icon:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: inline-flex; align-items: center; justify-content: center;
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--cb-bg); margin-bottom: 14px;
      color: var(--cb-muted);
    }
.cv-empty-title:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      font: 300 22px/1.2 var(--cb-font-light);
      color: var(--cb-text); letter-spacing: -.1px;
      margin-bottom: 8px;
    }
.cv-empty-sub:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted); max-width: 280px; margin: 0 auto;
    }
.cv-empty[hidden]:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { display: none; }
/* ─── Thread view ─── */
.cv-thread:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: var(--cb-card); display: none; }
.cv-thread.is-active:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { display: block; }
.cv-thread-head:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 14px 16px;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.cv-thread-back:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])), .cv-thread-trash:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      background: transparent; border: none; cursor: pointer;
      padding: 0;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.8px; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 6px;
    }
.cv-thread-back:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: var(--cb-text); }
.cv-thread-back svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 14px; height: 14px; }
.cv-thread-trash:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: var(--cb-muted); }
.cv-thread-trash:hover:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: var(--cb-text); }
.cv-msg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 18px 16px;
      border-bottom: 1px solid var(--cb-border);
    }
.cv-msg-author-mark:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      width: 36px; height: 36px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      flex: none;
      overflow: hidden;
    }
.cv-msg-author-mark.is-staff:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { background: #e8413c; border-radius: 4px; }
.cv-msg-author-mark.is-staff svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 24px; height: 24px; fill: #fff; }
.cv-msg-author-mark.is-user:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: #fff; font: 600 14px/1 var(--cb-font-semibold); }
.cv-msg-author-mark[data-cb-avatar]:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      background: transparent !important;
      padding: 0;
    }
.cv-msg-author-mark[data-cb-avatar] svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 100%; height: 100%; display: block; }
.cv-msg-body:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { flex: 1; min-width: 0; }
.cv-msg-top:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: flex; align-items: baseline; gap: 8px;
      margin-bottom: 8px;
    }
.cv-msg-author:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      font: 600 13px/1 var(--cb-font-semibold);
      color:var(--cb-link-text,var(--cb-link));
    }
.cv-msg-when:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.cv-msg-text:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-muted);
      white-space: pre-wrap;
      text-wrap: pretty;
    }
.cv-msg-atts:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      margin-top: 12px;
      display: grid; grid-template-columns: 1fr; gap: 8px;
    }
.cv-att:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px 8px 8px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      border-radius: 6px;
      cursor: zoom-in;
      text-align: left;
      width: 100%;
    }
.cv-att-thumb:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      width: 40px; height: 40px; border-radius: 3px;
      flex: none;
      background-size: cover; background-position: center;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--cb-border);
      overflow: hidden;
    }
.cv-att-meta:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { flex: 1; min-width: 0; }
.cv-att-name:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: block;
      font: 400 12px/1.2 var(--cb-font-regular);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.cv-att-size:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: block;
      margin-top: 3px;
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.cv-att-zoom:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: var(--cb-muted); flex: none; }
.cv-att-zoom svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 20px; height: 20px; }
/* Compose strip */
.cv-compose:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { padding: 16px; background: var(--cb-bg); }
.cv-compose-textarea:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      width: 100%; resize: vertical; min-height: 76px;
      padding: 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 6px;
      font: 400 14px/20px var(--cb-font-regular);
      color: var(--cb-text);
      outline: none;
      box-sizing: border-box;
    }
.cv-compose-textarea:focus:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { border-color: var(--cb-link); }
.cv-compose-actions:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      display: flex; align-items: center; justify-content: flex-end;
      gap: 14px; margin-top: 12px;
    }
.cv-compose-attach:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      background: transparent; border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
      padding: 0;
    }
.cv-compose-attach:hover:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: var(--cb-text); }
.cv-compose-send:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      height: 44px; padding: 0 32px;
      border-radius: 4px; border: none;
      background: #7bc178; color: #fff;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 2px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(123,193,120,.35);
    }
.cv-compose-send:disabled:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      background: var(--cb-bg);
      color: var(--cb-muted);
      cursor: not-allowed;
      box-shadow: none;
    }
/* Trash's 30-day note (M4), as master's Trash said it. */
.cv-trash-note:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      margin: 0; padding: 10px 16px;
      background: var(--cb-bg); color: var(--cb-muted);
      font: 400 12px/18px var(--cb-font-regular);
      border-bottom: 1px solid var(--cb-border);
    }
/* The author's own message: Sent or Seen (M2), and its delete control (M3). */
.cv-msg-receipt:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.cv-msg-receipt:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"]))::before { content: '·'; margin-right: 8px; }
.cv-msg-receipt[data-read="true"]:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: var(--cb-link); }
.cv-msg-delete:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) {
      margin-left: auto; align-self: center;
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; padding: 0;
      border: none; border-radius: 999px; background: transparent;
      color: var(--cb-muted); cursor: pointer;
    }
.cv-msg-delete svg:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { width: 15px; height: 15px; }
.cv-msg-delete:hover:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: #c4564a; background: var(--cb-bg); }
.cv-msg-delete.is-armed:where(body[data-cb-page-css~="conversations"],body[data-cb-page-css~="conversations"] *,:has(>body[data-cb-page-css~="conversations"])) { color: #fff; background: #c4564a; }
/* Inherits the same legal-doc visual language as terms.html / privacy.html
       to keep "things you sign" feeling consistent. Classes prefixed `.la-*`
       (legal-agreement) so future shared extraction is cleaner. */
.la-page:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { padding: 28px 16px 64px; background: var(--cb-bg); }
.la-eyebrow:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2.4px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 14px; }
.la-h1:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin: 0; font: 300 38px/1.05 var(--cb-font-light); color: var(--cb-text); letter-spacing: -.5px; text-wrap: balance; }
.la-lede:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin: 14px 0 0; font: 400 15px/24px var(--cb-font-regular); color: var(--cb-sec); text-wrap: pretty; }
.la-lede b:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { color: var(--cb-text); font-weight: 600; }
.la-lede a:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), .la-body a:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), .la-tldr a:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), .la-card a:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), .la-list a:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
      border-bottom: 1px solid rgba(64,179,222,.32);
    }
.la-revstamp:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 18px; padding: 6px 12px 6px 10px;
      background: var(--cb-chip-bg); border: 1px solid var(--cb-border);
      border-radius: 999px;
      font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.la-revstamp .dot:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { width: 6px; height: 6px; border-radius: 50%; background: #FDC64E; }
.la-revstamp b:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { color: var(--cb-text); font-weight: 600; }
/* TL;DR card */
.la-tldr:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      margin-top: 28px; padding: 20px 18px 16px;
      background: var(--cb-card); border: 1px solid var(--cb-border);
      border-radius: 12px;
      box-shadow: 0 1px 0 rgba(20,23,33,.02), 0 6px 20px rgba(20,23,33,.04);
    }
.la-tldr-pill:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: rgba(123,193,120,.14);
      border-radius: 999px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: #2f7a53;
      margin-bottom: 14px;
    }
.la-tldr-title:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { font: 600 17px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.la-tldr-sub:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin: 4px 0 14px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted); }
.la-tldr ul:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.la-tldr li:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      display: grid; grid-template-columns: 22px 1fr; column-gap: 12px;
      font: 400 14px/21px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty;
    }
.la-tldr li b:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { color: var(--cb-text); font-weight: 600; }
.la-tldr-mark:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(64,179,222,.12); color: #1d6f8e;
      display: inline-flex; align-items: center; justify-content: center;
    }
.la-tldr li.la-tldr-yes .la-tldr-mark:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { background: rgba(123,193,120,.16); color: #2f7a53; }
.la-tldr li.la-tldr-no  .la-tldr-mark:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { background: rgba(236,77,77,.10); color: #c14a3a; }
/* Sticky jump pill (matches terms/privacy behavior + chrome reveal) */
.la-jump:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      position: sticky; top: calc(var(--cb-chrome-h, 102px) + 8px); z-index: 4;
      margin-top: 24px;
      background: linear-gradient(to bottom, var(--cb-bg) 70%, transparent);
      padding: 6px 0 10px; pointer-events: none;
      transition: top 240ms cubic-bezier(.22,.61,.36,1);
    }
.la-jump > *:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { pointer-events: auto; }
.hm-fixed-chrome.is-hidden ~ main .la-jump:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { top: 8px; }
.la-jump-btn:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; width: 100%; height: 44px; padding: 0 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border-hard);
      border-radius: 999px; cursor: pointer;
      color: var(--cb-text); font: 600 13px/1 var(--cb-font-semibold);
      text-align: left;
      box-shadow: 0 8px 18px rgba(20,23,33,.08);
      transition: border-color 160ms ease;
    }
.la-jump-btn:hover:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { border-color: var(--cb-link); }
.la-jump-btn-lbl:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      display: inline-flex; align-items: center; gap: 10px; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
/* TOC sheet */
.la-toc-host:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      position: fixed; top: 0; bottom: 0;
      left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 480px;
      z-index: 90; display: none; pointer-events: none;
    }
.la-toc-host[data-open]:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { display: block; }
.la-toc-host[data-open] > *:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { pointer-events: auto; }
.la-toc-scrim:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      position: absolute; inset: 0; background: rgba(20,23,33,0);
      transition: background-color 240ms cubic-bezier(.32,.72,.24,1);
    }
.la-toc-host[data-shown] .la-toc-scrim:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { background: rgba(20,23,33,.5); }
.la-toc-sheet:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(.32,.72,.24,1);
      max-height: 85vh; overflow-y: auto;
      background: var(--cb-card);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      box-shadow: 0 -16px 40px rgba(0,0,0,.25);
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
.la-toc-host[data-shown] .la-toc-sheet:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { transform: translateY(0); }
.la-toc-handle:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { display: flex; justify-content: center; padding: 10px 0 6px; }
.la-toc-handle span:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { width: 40px; height: 4px; border-radius: 2px; background: var(--cb-border-hard); }
.la-toc-head:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      padding: 6px 16px 12px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--cb-border);
    }
.la-toc-head h2:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin: 4px 0 0; font: 600 18px/22px var(--cb-font-semibold); color: var(--cb-text); }
.la-toc-eyebrow:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      font: 400 10px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted);
    }
.la-toc-close:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      width: 36px; height: 36px; border: none; background: transparent;
      color: var(--cb-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
.la-toc-nav:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { padding: 6px 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.la-toc-nav a:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 10px; border-radius: 8px;
      text-decoration: none; color: var(--cb-text);
      transition: background-color 160ms ease;
    }
.la-toc-nav a:hover:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { background: var(--cb-chip-bg); }
.la-toc-nav a[aria-current="true"]:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { background: var(--cb-chip-active); color:var(--cb-link-text,var(--cb-link)); }
.la-toc-num:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      flex: 0 0 28px; font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: 1.2px; font-variant-numeric: tabular-nums;
    }
.la-toc-nav a[aria-current="true"] .la-toc-num:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { color:var(--cb-link-text,var(--cb-link)); }
.la-toc-lbl:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { flex: 1; min-width: 0; font: 500 14px/19px var(--cb-font-regular); }
.la-toc-nav a[aria-current="true"] .la-toc-lbl:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { font-weight: 600; }
/* Body */
.la-body:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      margin-top: 14px; background: var(--cb-panel);
      border: 1px solid var(--cb-border); border-radius: 12px;
      padding: 6px 16px 24px;
    }
.la-section:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { padding: 22px 0 4px; border-bottom: 1px dashed var(--cb-border); }
.la-section:last-of-type:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { border-bottom: 0; }
.la-section-head:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.la-section-num:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      min-width: 28px;
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: 1.6px;
      font-variant-numeric: tabular-nums;
    }
.la-section-h:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      margin: 0;
      font: 600 19px/26px var(--cb-font-semibold);
      color: var(--cb-text); letter-spacing: -.1px;
      scroll-margin-top: calc(var(--cb-chrome-h, 102px) + 56px);
    }
.la-section p:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      margin: 0 0 12px; padding-left: 40px;
      font: 400 14.5px/23px var(--cb-font-regular);
      color: var(--cb-text); text-wrap: pretty;
    }
.la-section p b:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { font-weight: 600; }
.la-section p.la-allcaps:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      font: 600 12.5px/19px var(--cb-font-semibold);
      letter-spacing: .15px; color: var(--cb-sec);
    }
.la-sub:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      margin: 16px 0 8px 40px !important;
      font: 600 13.5px/20px var(--cb-font-semibold) !important;
      color: var(--cb-text) !important;
      letter-spacing: .1px;
    }
.la-list:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin: 0 0 12px; padding: 0 0 0 40px; list-style: none; }
.la-list li:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      position: relative; padding: 0 0 10px 18px;
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-text); text-wrap: pretty;
    }
.la-list li:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"]))::before {
      content: ""; position: absolute; left: 0; top: 10px;
      width: 5px; height: 5px; border-radius: 50%; background: var(--cb-muted);
    }
.la-promise:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      margin: 4px 0 14px 40px !important; padding: 12px 14px 10px !important;
      background: rgba(123,193,120,.10);
      border-left: 3px solid #7bc178;
      border-radius: 6px;
      font: 500 13.5px/21px var(--cb-font-semibold) !important;
      color: #1f5d3a !important;
    }
:root:not([data-theme="light"]) .la-promise:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { color: #a8d8a4 !important; }
/* Card (e.g. Cubebrush Licenses lookup, contact) */
.la-card:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      margin: 6px 0 6px 40px; padding: 14px 14px 12px;
      background: var(--cb-chip-bg);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
    }
.la-card dl:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin: 0; display: grid; grid-template-columns: 110px 1fr; column-gap: 12px; row-gap: 6px; }
.la-card dt:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { font: 500 12px/18px var(--cb-font-regular); color: var(--cb-muted); }
.la-card dd:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin: 0; font: 500 13.5px/18px var(--cb-font-regular); color: var(--cb-text); }
/* End block */
.la-end:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      margin: 24px 0 0; padding: 16px 16px 14px;
      background: var(--cb-chip-bg);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.la-end-eyebrow:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 10px;
    }
.la-end-body:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { font: 400 13.5px/20px var(--cb-font-regular); color: var(--cb-sec); }
.la-end-body b:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { color: var(--cb-text); font-weight: 600; }
.la-end-row:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.la-end-btn:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      flex: 1 1 0; min-width: 0;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      height: 42px; padding: 0 14px; border-radius: 999px;
      background: var(--cb-card); color: var(--cb-text);
      border: 1px solid var(--cb-border-hard);
      text-decoration: none;
      font: 500 12px/1 var(--cb-font-regular);
    }
.la-end-btn:hover:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
.la-end-btn--cta:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) {
      flex: 0 0 auto; padding: 0 18px;
      background: #40b3de; color: #fff; border: none;
      font-weight: 600; cursor: pointer;
    }
.la-end-btn--cta:hover:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { color: #fff; filter: brightness(1.06); }
/* Hamburger conditional dot + clipped top bar (consistent with other pages) */
body[data-cb-state="user"] .hm-hamburger-top:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), body[data-cb-state="seller"] .hm-hamburger-top:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), body[data-cb-state="admin"] .hm-hamburger-top:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { stroke-dasharray: 18 100; }
@media (min-width: 720px) {
      .la-page:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { padding: 40px 32px 80px; }
      .la-h1:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { font-size: 46px; }
      .la-body:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { padding: 6px 28px 32px; }
      .la-section p:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), .la-list:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), .la-sub:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { padding-left: 56px; }
      .la-section-h:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { font-size: 22px; line-height: 28px; }
      .la-promise:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])), .la-card:where(body[data-cb-page-css~="distribution-agreement"],body[data-cb-page-css~="distribution-agreement"] *,:has(>body[data-cb-page-css~="distribution-agreement"])) { margin-left: 56px !important; }
    }
/* ───────── Following page (fp-*) ─────────
       Account-gated list page: every signed-in user has one, listing
       the stores and creators they follow. Reuses chrome/drawer/footer
       from the rest of the site; only the body content is page-specific.

       BACKEND:
         GET  /api/me/following?type=all|store|user&sort=recent|name|active&q=…
              → { items: [{ id, type, name, handle, followers, activityLabel, followedAt }] }
         POST /api/follow/:targetUserOrStore { handle }     (toggle)
              → { isFollowing: bool, followerCount: int }
         DELETE /api/follow/:targetUserOrStore               (idempotent alt)

         The frontend toggles "Following → Follow" optimistically and
         dims the row; on response, reconcile any drift in follower
         count. The seed list below is hardcoded for prototype review. */
.fp-page-header:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
      padding: 24px 16px 22px;
    }
.fp-page-title:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      font: 300 28px/1.1 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text);
      letter-spacing: -.2px;
      margin: 0;
    }
.fp-page-sub:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      margin-top: 6px;
      font: 400 13px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.fp-page-sub strong:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { color: var(--cb-text); font-weight: 400; }
/* Type segmented control */
.fp-types:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      display: flex; gap: 6px;
      padding: 12px 14px 0;
      background: var(--cb-bg);
    }
.fp-type:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      flex: 1; height: 34px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 999px;
      color: var(--cb-text);
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
.fp-type[aria-pressed="true"]:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      background: var(--cb-text);
      border-color: var(--cb-text);
      color: var(--cb-bg);
    }
.fp-type-count:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      font: 600 10px/1 var(--cb-font-semibold);
      opacity: .65;
    }
/* Toolbar */
.fp-toolbar:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 14px 12px;
      background: var(--cb-bg);
      border-bottom: 1px solid var(--cb-border);
    }
.fp-search:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      flex: 1; min-width: 0; position: relative;
      height: 40px;
      display: flex; align-items: center; gap: 10px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 999px;
      padding: 0 14px;
    }
.fp-search svg:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { color: var(--cb-muted); flex-shrink: 0; }
.fp-search input:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      border: none; outline: none; background: transparent;
      flex: 1; min-width: 0;
      font: 400 13px/1 var(--cb-font-regular);
      color: var(--cb-text);
    }
.fp-search-clear:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      background: transparent; border: none; padding: 0;
      color: var(--cb-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
.fp-search-clear[hidden]:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { display: none; }
.fp-sort:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      position: relative; flex-shrink: 0;
    }
@media (max-width: 420px) {
      .fp-toolbar:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { flex-wrap: wrap; }
      .fp-search:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { flex-basis: 100%; }
      .fp-sort:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { margin-left: auto; }
    }
.fp-sort-btn:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      height: 40px; padding: 0 14px;
      display: inline-flex; align-items: center; gap: 8px;
      font: 400 12px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-text); cursor: pointer;
      border: 1px solid var(--cb-border); border-radius: 999px;
      background: var(--cb-card);
    }
.fp-sort-menu:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
      min-width: 180px; padding: 6px 0;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 6px;
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }
:root:not([data-theme="light"]) .fp-sort-menu:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.fp-sort-menu[hidden]:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { display: none; }
.fp-sort-opt:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      display: block; width: 100%;
      padding: 10px 14px;
      background: transparent; border: none;
      text-align: left;
      font: 400 13px/1 var(--cb-font-regular);
      color: var(--cb-text);
      cursor: pointer;
    }
.fp-sort-opt:hover:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { background: var(--cb-bg); }
.fp-sort-opt.is-selected:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { color:var(--cb-link-text,var(--cb-link)); }
/* List + rows */
.fp-list:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { background: var(--cb-bg); padding-bottom: 28px; }
.fp-row:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
      transition: opacity .2s ease;
      text-decoration: none;
    }
.fp-row[data-following="false"]:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { opacity: .55; }
.fp-row[hidden]:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { display: none; }
.fp-avatar:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      width: 48px; height: 48px;
      border-radius: 50%;
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font: 600 15px/1 var(--cb-font-semibold);
      letter-spacing: .5px;
      flex: 0 0 auto;
    }
.fp-avatar.is-store:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { border-radius: 8px; }
.fp-meta:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { min-width: 0; flex: 1; }
.fp-name-row:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      display: flex; align-items: center; gap: 6px;
      font: 600 14px/1.2 var(--cb-font-semibold);
      color: var(--cb-text);
    }
.fp-name:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.fp-badge:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      flex: none;
      font: 700 9px/1 var(--cb-font-bold);
      letter-spacing: .8px; text-transform: uppercase;
      color: var(--cb-muted);
      border: 1px solid var(--cb-border); border-radius: 3px;
      padding: 2px 5px;
    }
.fp-handle-row:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      margin-top: 4px;
      font: 400 12px/1.4 var(--cb-font-regular);
      color: var(--cb-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.fp-handle-sep:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { margin: 0 6px; opacity: .5; }
.fp-activity:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      margin-top: 4px;
      font: 400 11px/1.4 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.fp-activity.is-fresh:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { color: #23a05a; }
.fp-follow-btn:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      height: 34px; padding: 0 14px;
      border-radius: 999px;
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer;
      flex: 0 0 auto;
      background: var(--cb-link); border: none; color: #fff;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
.fp-follow-btn[aria-pressed="true"]:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      background: transparent;
      border: 1px solid var(--cb-border);
      color: var(--cb-text);
    }
.fp-follow-btn .glyph-check:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { display: none; }
.fp-follow-btn[aria-pressed="true"] .glyph-check:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { display: inline-block; }
/* Empty state */
.fp-empty:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      background: var(--cb-bg);
      padding: 72px 24px;
      text-align: center;
      min-height: 320px;
    }
.fp-empty-icon:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      width: 64px; height: 64px; border-radius: 50%;
      background: var(--cb-card); border: 1px solid var(--cb-border);
      margin: 0 auto 18px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cb-muted);
    }
.fp-empty-title:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      font: 400 16px/1.3 var(--cb-font-regular);
      color: var(--cb-text);
      margin-bottom: 8px;
    }
.fp-empty-sub:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      font: 400 13px/1.5 var(--cb-font-regular);
      color: var(--cb-muted);
      max-width: 320px; margin: 0 auto 22px;
    }
.fp-empty-cta:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) {
      display: inline-flex; align-items: center; gap: 8px;
      height: 44px; padding: 0 22px;
      background: var(--cb-link);
      border: none; border-radius: 999px;
      color: #fff;
      font: 400 12px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase;
      text-decoration: none;
    }
.fp-empty-cta:hover:where(body[data-cb-page-css~="following"],body[data-cb-page-css~="following"] *,:has(>body[data-cb-page-css~="following"])) { filter: brightness(1.08); }
.auth-preview-note:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {font-size:11px;color:var(--cb-text-sec);border:1px solid var(--cb-border);padding:8px;border-radius:6px}
.auth-preview-link:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {font-size:12px;margin-top:22px}
.ah-card [hidden]:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {display:none}
.ah-card h2:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {font-size:19px}
.ah-card p:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {line-height:1.6;overflow-wrap:anywhere}
.ah-card button.ah-link:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {background:none;border:0;cursor:pointer;font:inherit;padding:6px 0}
.ah-card button:disabled:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {opacity:.6;cursor:default}
.ah-submit:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {display:flex;justify-content:center;align-items:center;text-decoration:none}
.ah-input-slot:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {font-size:11px;width:56px}
.cb-mailsent:where(body[data-cb-page-css~="forgot-password"],body[data-cb-page-css~="forgot-password"] *,:has(>body[data-cb-page-css~="forgot-password"])) {display:block}
/* ───────── Library page (lib-*) ─────────
       Long-form content-view of every product the signed-in user owns
       or got free. Reuses .cb-pcard markup for visual consistency with
       the rest of the marketplace, but with library-specific overlays:
         · OWNED badge (top-right, green)
         · BOUGHT date pill (top-left, dark)
         · File-size pill (bottom-right, white pill)
       Footer swaps the cart-add button for a Download button with
       idle → downloading (progress) → done flow.

       BACKEND:
         GET /api/me/library?tab=all|recent|subs|free&sort=…&page=N
           → { items: [{ id, slug, title, author, category, thumb,
                         boughtOn, licenseLabel, fileSize, isVideo,
                         episodeRange }], total, hasMore }
         GET /api/me/library/:id/download → 302 to signed S3 URL.
           UI fakes a 1.4-2.1s progress bar; real flow streams the
           bytes and surfaces actual progress.
         GET /api/me/library/:id/receipt  → PDF (or signed URL).
         POST /api/me/library/:id/hide    → 200 (excludes from list). */
/* Header */
.lib-header:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { background: var(--cb-card); border-bottom: 1px solid var(--cb-border); }
.lib-h1-block:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { padding: 24px 16px 14px; }
.lib-h1:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      margin: 0;
      font: 300 28px/1.1 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text); letter-spacing: -.2px;
    }
.lib-sub:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      margin: 6px 0 0;
      font: 400 13px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.lib-sub strong:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { color: var(--cb-text); font-weight: 600; }
/* Tab rail (horizontal scroll) */
.lib-tabs-wrap:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: relative;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), rgba(0,0,0,.15) 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), rgba(0,0,0,.15) 100%);
    }
.lib-tabs:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: relative;
      display: flex; gap: 24px; overflow-x: auto;
      padding: 4px 16px 0;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      scroll-padding-left: 16px;
    }
.lib-tabs:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"]))::-webkit-scrollbar { display: none; }
.lib-tab:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      flex: none; height: 40px;
      display: inline-flex; align-items: center;
      font: 400 13px/1 var(--cb-font-regular);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: var(--cb-muted);
      border: none; background: transparent; padding: 0;
      border-bottom: 2px solid transparent;
      white-space: nowrap; cursor: pointer;
      scroll-snap-align: start;
    }
.lib-tab[aria-pressed="true"]:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      color: var(--cb-text);
      border-bottom-color: var(--cb-link);
    }
/* Slider supersedes the per-tab static underline (mirrors .hm-tab-rail.has-indicator). */
.lib-tabs.has-indicator .lib-tab[aria-pressed="true"]:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { border-bottom-color: transparent; }
.lib-tab-indicator:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; left: 0; bottom: 0;
      height: 2px; width: 0;
      background: var(--cb-link);
      transform: translate3d(0, 0, 0);
      transition: transform 240ms cubic-bezier(.32,.72,.24,1),
                  width     240ms cubic-bezier(.32,.72,.24,1);
      pointer-events: none;
      will-change: transform, width;
    }
/* Sort + Filter row */
.lib-toolbar:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px;
      background: var(--cb-bg);
      border-bottom: 1px solid var(--cb-border);
      position: relative;
    }
.lib-sort:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { position: relative; flex-shrink: 0; }
.lib-sort-btn:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; border: none; padding: 0; cursor: pointer;
      font: 400 13px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-text);
    }
.lib-sort-btn svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { transition: transform .15s; }
.lib-sort-btn[aria-expanded="true"] svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { transform: rotate(180deg); }
.lib-sort-menu:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; top: calc(100% + 10px); left: -6px;
      min-width: 200px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 6px;
      box-shadow: 0 8px 24px rgba(20,23,33,.12);
      padding: 4px 0; overflow: hidden; z-index: 10;
    }
:root:not([data-theme="light"]) .lib-sort-menu:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.lib-sort-menu[hidden]:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { display: none; }
.lib-sort-opt:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: block; width: 100%; padding: 12px 18px;
      background: transparent; border: none; text-align: left;
      font: 400 14px/1 var(--cb-font-regular); color: var(--cb-text);
      cursor: pointer;
    }
.lib-sort-opt:hover:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { background: var(--cb-bg); }
.lib-sort-opt.is-selected:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { background: var(--cb-link); color: #fff; }
.lib-filter-btn:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      margin-left: auto;
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; border: 1px solid var(--cb-border-hard);
      border-radius: 999px; height: 36px; padding: 0 14px;
      cursor: pointer; color: var(--cb-text);
      font: 400 12px/1 var(--cb-font-regular);
      letter-spacing: 1.4px; text-transform: uppercase;
    }
.lib-filter-btn:hover:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { background: var(--cb-card); }
/* Feed wrapper */
.lib-feed-wrap:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { background: var(--cb-bg); padding: 16px 14px 20px; }
.lib-feed:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
/* Library-specific .cb-pcard overlays. We reuse .cb-pcard for layout
       but override the chip slots to fit library context. */
.lib-card:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { position: relative; }
/* Need overflow:visible on the card so the ⋯ menu popup can escape;
       but that also breaks the thumb's top-corner clip inherited from
       .cb-pcard. Force the radius on the thumb directly. */
.lib-card .cb-pcard:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { overflow: visible; }
.lib-card .cb-pcard-thumb:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
.lib-card-bought:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; left: 8px; top: 8px; z-index: 4;
      display: inline-flex; align-items: center; gap: 4px;
      background: rgba(20,23,33,.82); color: #fff;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: .4px;
      padding: 5px 7px; border-radius: 3px;
    }
.lib-card-bought svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { width: 10px; height: 10px; }
.lib-card-owned:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; right: 8px; top: 8px; z-index: 4;
      display: inline-flex; align-items: center; gap: 4px;
      background: #7bc178; color: #fff;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: .6px;
      padding: 5px 7px; border-radius: 3px;
    }
.lib-card-owned svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { width: 10px; height: 10px; }
.lib-card-size:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; right: 8px; bottom: 8px; z-index: 4;
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(255,255,255,.92); color: #2c3242;
      font: 600 13px/18px var(--cb-font-semibold);
      padding: 6px 9px 6px 8px; border-radius: 999px;
      box-shadow: 0 1px 2px rgba(0,0,0,.18);
    }
.lib-card-size svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { width: 12px; height: 12px; }
/* An adult cover's gate (buyer-account parity sweep M8) holds a line to Settings where the size pill
   sits, so the pill (and "NEW UPDATE") wait until the gate is lifted. */
.cb-pcard-thumb:has(.cb-pcard-adult:not([hidden])) :is(.lib-card-size, .lib-card-updated):where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { display: none; }
/* "NEW UPDATE" (buyer-account parity sweep M7): the bottom-left corner, opposite the size pill. */
.lib-card-updated:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; left: 8px; bottom: 8px; z-index: 4;
      display: inline-flex; align-items: center;
      background: var(--cb-link); color: #fff;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: .6px;
      padding: 5px 7px; border-radius: 3px;
    }
/* Footer row override: owned pill + download button (replaces price + add-to-cart).
       Spec from the JSX uses `padding: 0 8px 8px` with `height: 32`, but with
       site-wide box-sizing: border-box the 8px bottom padding eats into the
       button height and the button hugs the card edge. Drop the fixed height
       (the 32px button drives the row size), keep an explicit bottom padding,
       and add a bit of breathing room at the bottom. */
.lib-card-footer:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0 12px 14px;
      margin-top: 10px;
    }
.lib-license-pill:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: inline-flex; align-items: center; gap: 6px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: .6px; text-transform: uppercase;
      color: #7bc178;
      background: rgba(123,193,120,.12);
      border: 1px solid rgba(123,193,120,.40);
      padding: 6px 9px; border-radius: 999px;
      margin-left: 8px;
    }
.lib-license-pill svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { width: 11px; height: 11px; }
.lib-download-btn:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: relative; overflow: hidden;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      height: 32px; padding: 0 12px; min-width: 112px;
      border: none; border-radius: 999px;
      background: var(--cb-link); color: #fff;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: .8px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(64,179,222,.35);
    }
.lib-download-btn:hover:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { filter: brightness(1.05); }
.lib-download-btn[data-state="downloading"]:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      cursor: progress;
    }
.lib-download-btn[data-state="done"]:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      background: #7bc178;
      box-shadow: 0 2px 6px rgba(123,193,120,.35);
    }
.lib-download-fill:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; left: 0; top: 0; bottom: 0; width: 0;
      background: rgba(255,255,255,.18);
      transition: width .08s linear;
    }
.lib-download-btn span:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: relative;
      display: inline-flex; align-items: center; gap: 8px;
    }
.lib-download-btn .glyph svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { width: 14px; height: 14px; }
.lib-download-btn .label-idle:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])), .lib-download-btn .label-doing:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])), .lib-download-btn .label-done:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: none;
    }
.lib-download-btn[data-state="idle"] .label-idle:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])), .lib-download-btn[data-state="downloading"] .label-doing:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])), .lib-download-btn[data-state="done"] .label-done:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: inline-flex;
      align-items: center; gap: 8px;
    }
/* Replace cb-pcard-heart corner with the ⋯ menu trigger on the
       card body. The body's flex grid hosts the title + the ⋯. */
.lib-card-body:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      padding: 12px 16px 0;
      display: flex; align-items: flex-start; gap: 8px;
    }
.lib-card-body-meta:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { min-width: 0; flex: 1; }
.lib-card-title:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      font: 600 15px/22px var(--cb-font-semibold);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.lib-card-byline:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      margin-top: 2px;
      font: 400 13px/18px var(--cb-font-regular);
      color: var(--cb-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.lib-card-byline a:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { color:var(--cb-link-text,var(--cb-link)); text-decoration: none; }
.lib-card-menu-wrap:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: relative; flex-shrink: 0; margin-top: -2px;
      display: inline-flex;
    }
.lib-card-menu:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      width: 32px; height: 32px;
      border-radius: 999px; border: none;
      background: transparent; cursor: pointer;
      color: var(--cb-muted);
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0;
    }
.lib-card-menu:hover:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])), .lib-card-menu[aria-expanded="true"]:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      background: var(--cb-bg); color: var(--cb-text);
    }
.lib-card-menu-pop:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; top: calc(100% + 4px); right: 0;
      min-width: 220px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(20,23,33,.18);
      overflow: hidden; padding: 6px 0; z-index: 20;
    }
:root:not([data-theme="light"]) .lib-card-menu-pop:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.lib-card-menu-pop[hidden]:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { display: none; }
.lib-card-menu-pop button:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: flex; align-items: center; gap: 12px;
      width: 100%; padding: 11px 14px;
      background: transparent; border: none; text-align: left;
      color: var(--cb-text); cursor: pointer;
      font: 400 13px/1 var(--cb-font-regular);
    }
.lib-card-menu-pop button:hover:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { background: var(--cb-bg); }
.lib-card-menu-pop button.is-muted:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { color: var(--cb-muted); }
.lib-card-menu-pop button svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      width: 16px; height: 16px;
      color: var(--cb-muted); flex-shrink: 0;
    }
.lib-card-menu-pop hr:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      border: 0; height: 1px; background: var(--cb-border); margin: 4px 0;
    }
/* Lazy-load sentinel + load-more footer */
.lib-end:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      background: var(--cb-bg);
      padding: 4px 18px 32px;
      text-align: center;
    }
.lib-loading:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 18px 0;
      color: var(--cb-muted);
      font: 400 12px/1 var(--cb-font-regular);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
.lib-loading-spinner:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      width: 14px; height: 14px;
      border: 2px solid var(--cb-muted); border-right-color: transparent;
      border-radius: 50%;
      animation: lib-spin .8s linear infinite;
    }
@keyframes lib-spin { to { transform: rotate(360deg); } }
.lib-showing:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      font: 400 12px/1 var(--cb-font-regular);
      letter-spacing: 1.5px;
      color: var(--cb-text);
      text-transform: uppercase;
      margin-bottom: 18px;
      padding-top: 10px;
    }
.lib-showing strong:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { font-weight: 600; }
.lib-loadmore:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      border: 1px solid var(--cb-border-hard);
      background: transparent;
      color: var(--cb-text);
      font: 400 13px/1 var(--cb-font-regular);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 14px 28px;
      border-radius: 999px;
      cursor: pointer;
    }
.lib-loadmore:hover:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { background: var(--cb-card); }
.lib-done:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      font: 400 12px/1 var(--cb-font-regular);
      letter-spacing: 1.5px;
      color: var(--cb-muted);
      text-transform: uppercase;
      padding: 18px 0;
    }
/* Empty state */
.lib-empty:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      padding: 72px 28px 96px;
      background: var(--cb-bg);
      text-align: center;
      min-height: 480px;
      display: flex; flex-direction: column; align-items: center;
    }
.lib-empty-art:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: relative;
      width: 168px; height: 168px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 28px;
    }
.lib-empty-glow:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: absolute; inset: 0; border-radius: 50%;
      background: radial-gradient(circle at 50% 40%, rgba(64,179,222,.18), transparent 65%);
    }
.lib-empty-tile:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      position: relative;
      width: 112px; height: 112px; border-radius: 24px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 18px rgba(20,23,33,.10);
    }
.lib-empty-tile svg:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { color: var(--cb-muted); }
.lib-empty-title:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      font: 300 22px/1.2 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text);
      letter-spacing: -.1px;
      margin-bottom: 10px;
    }
.lib-empty-sub:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-muted);
      max-width: 320px;
      margin: 0 auto 28px;
    }
.lib-empty-cta:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--cb-link); color: #fff;
      font: 600 13px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      padding: 14px 22px; border-radius: 999px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(64,179,222,.35);
    }
.lib-empty-alt:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
      margin-top: 16px;
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted);
      letter-spacing: 1.4px; text-transform: uppercase;
      text-decoration: none;
    }
.lib-empty-alt:hover:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { color:var(--cb-link-text,var(--cb-link)); }
/* Hide cards that don't match the current tab */
.lib-card[hidden]:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { display: none; }

/* The rating and comments line (buyer-account parity sweep M12). The stars are the product card's;
   their size is set here, since the card's own reads a variable the library card does not set. */
.lib-card-stats:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  flex-wrap: wrap; row-gap: 4px;
  font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);
}
.lib-card-stats .cb-stars:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { font-size: 13px; }
.lib-card-stats > span:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { white-space: nowrap; }
.lib-card-comments:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"]))::before { content: "\00B7"; margin-right: 8px; }
/* r38 A8: the card's title is its link, styled as the title was. */
.lib-card-title-link:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { color: inherit; text-decoration: none; }
.lib-card-title-link:focus-visible:where(body[data-cb-page-css~="library"],body[data-cb-page-css~="library"] *,:has(>body[data-cb-page-css~="library"])) { outline: 2px solid var(--cb-link); outline-offset: 2px; border-radius: 4px; }
/* Reuses the legal-doc shell from terms/privacy (chrome, jump pill,
       TOC sheet) so the three "legal-ish" pages feel like one product.
       Class prefix: .lc-* (licenses). */
/* Hero illustration banner above the title - matches about.html pattern. */
.lc-hero-art:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      display: flex; align-items: center; justify-content: center;
      width: 100%; height: 200px;
      margin: -4px 0 18px;
      pointer-events: none;
    }
.lc-hero-art img:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      display: block;
      max-width: 100%; max-height: 100%;
      height: 100%; width: auto;
    }
.lc-page:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { padding: 28px 16px 64px; background: var(--cb-bg); }
.lc-eyebrow:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2.4px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 14px; }
.lc-h1:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin: 0; font: 300 38px/1.05 var(--cb-font-light); color: var(--cb-text); letter-spacing: -.5px; text-wrap: balance; }
.lc-lede:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin: 14px 0 0; font: 400 15px/24px var(--cb-font-regular); color: var(--cb-sec); text-wrap: pretty; }
.lc-lede b:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color: var(--cb-text); font-weight: 600; }
.lc-lede a:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])), .lc-body a:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])), .lc-card a:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color:var(--cb-link-text,var(--cb-link)); text-decoration: none; border-bottom: 1px solid rgba(64,179,222,.32); }
.lc-revstamp:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 18px; padding: 6px 12px 6px 10px;
      background: var(--cb-chip-bg); border: 1px solid var(--cb-border);
      border-radius: 999px;
      font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.lc-revstamp .dot:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { width: 6px; height: 6px; border-radius: 50%; background: #FDC64E; }
.lc-revstamp b:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color: var(--cb-text); font-weight: 600; }
/* Comparison table - the headline visual */
.lc-compare:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      margin: 22px 0 0;
      display: grid;
      grid-template-columns: 1fr; gap: 12px;
    }
.lc-tier:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-left: 4px solid var(--lc-accent, var(--cb-link));
      border-radius: 12px;
      padding: 16px 16px 14px;
    }
.lc-tier--basic:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { --lc-accent: #8b80e0; }
.lc-tier--commercial:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { --lc-accent: #F77878; }
.lc-tier--studio:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { --lc-accent: #6fd7c9; }
.lc-tier-head:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 10px; margin-bottom: 10px;
    }
.lc-tier-name:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      font: 600 17px/22px var(--cb-font-semibold);
      color: var(--cb-text);
    }
.lc-tier-tag:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: var(--lc-accent, var(--cb-muted));
    }
.lc-tier-table:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      border-top: 1px dashed var(--cb-border);
      padding-top: 10px;
      display: grid; grid-template-columns: 1fr; row-gap: 12px;
    }
.lc-tier-row-label:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      font: 400 10px/1 var(--cb-font-regular);
      color: var(--cb-muted);
      letter-spacing: 1.4px; text-transform: uppercase;
      margin-bottom: 3px;
    }
.lc-tier-row-val:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      font: 600 14px/19px var(--cb-font-semibold);
      color: var(--cb-text);
    }
.lc-tier-foot:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      margin-top: 12px; padding-top: 10px;
      border-top: 1px dashed var(--cb-border);
      font: 400 12.5px/18px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty;
    }
.lc-compare-foot:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      margin-top: 8px;
      font: 400 11.5px/16px var(--cb-font-regular);
      color: var(--cb-muted);
    }
/* Sticky jump pill (matches terms/privacy) */
.lc-jump:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      position: sticky; top: calc(var(--cb-chrome-h, 102px) + 8px); z-index: 4;
      margin-top: 24px;
      background: linear-gradient(to bottom, var(--cb-bg) 70%, transparent);
      padding: 6px 0 10px; pointer-events: none;
      transition: top 240ms cubic-bezier(.22,.61,.36,1);
    }
.lc-jump > *:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { pointer-events: auto; }
.hm-fixed-chrome.is-hidden ~ main .lc-jump:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { top: 8px; }
.lc-jump-btn:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; width: 100%; height: 44px; padding: 0 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border-hard);
      border-radius: 999px; cursor: pointer;
      color: var(--cb-text); font: 600 13px/1 var(--cb-font-semibold);
      text-align: left;
      box-shadow: 0 8px 18px rgba(20,23,33,.08);
      transition: border-color 160ms ease;
    }
.lc-jump-btn:hover:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { border-color: var(--cb-link); }
.lc-jump-btn-lbl:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      display: inline-flex; align-items: center; gap: 10px; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.lc-toc-host:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      position: fixed; top: 0; bottom: 0;
      left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 480px;
      z-index: 90; display: none; pointer-events: none;
    }
.lc-toc-host[data-open]:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { display: block; }
.lc-toc-host[data-open] > *:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { pointer-events: auto; }
.lc-toc-scrim:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { position: absolute; inset: 0; background: rgba(20,23,33,0); transition: background-color 240ms cubic-bezier(.32,.72,.24,1); }
.lc-toc-host[data-shown] .lc-toc-scrim:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { background: rgba(20,23,33,.5); }
.lc-toc-sheet:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(.32,.72,.24,1);
      max-height: 85vh; overflow-y: auto;
      background: var(--cb-card);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      box-shadow: 0 -16px 40px rgba(0,0,0,.25);
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
.lc-toc-host[data-shown] .lc-toc-sheet:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { transform: translateY(0); }
.lc-toc-handle:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { display: flex; justify-content: center; padding: 10px 0 6px; }
.lc-toc-handle span:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { width: 40px; height: 4px; border-radius: 2px; background: var(--cb-border-hard); }
.lc-toc-head:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { padding: 6px 16px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cb-border); }
.lc-toc-head h2:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin: 4px 0 0; font: 600 18px/22px var(--cb-font-semibold); color: var(--cb-text); }
.lc-toc-eyebrow:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { font: 400 10px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted); }
.lc-toc-close:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { width: 36px; height: 36px; border: none; background: transparent; color: var(--cb-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lc-toc-nav:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { padding: 6px 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.lc-toc-nav a:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 10px; border-radius: 8px;
      text-decoration: none; color: var(--cb-text);
      transition: background-color 160ms ease;
    }
.lc-toc-nav a:hover:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { background: var(--cb-chip-bg); }
.lc-toc-nav a[aria-current="true"]:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { background: var(--cb-chip-active); color:var(--cb-link-text,var(--cb-link)); }
.lc-toc-num:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { flex: 0 0 28px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: 1.2px; font-variant-numeric: tabular-nums; }
.lc-toc-nav a[aria-current="true"] .lc-toc-num:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color:var(--cb-link-text,var(--cb-link)); }
.lc-toc-lbl:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { flex: 1; min-width: 0; font: 500 14px/19px var(--cb-font-regular); }
.lc-toc-nav a[aria-current="true"] .lc-toc-lbl:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { font-weight: 600; }
/* Body */
.lc-body:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin-top: 14px; background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 12px; padding: 6px 16px 24px; }
.lc-section:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { padding: 22px 0 4px; border-bottom: 1px dashed var(--cb-border); }
.lc-section:last-of-type:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { border-bottom: 0; }
.lc-section-head:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.lc-section-num:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      min-width: 28px;
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: 1.6px;
      font-variant-numeric: tabular-nums;
    }
.lc-section-h:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      margin: 0;
      font: 600 19px/26px var(--cb-font-semibold);
      color: var(--cb-text); letter-spacing: -.1px;
      scroll-margin-top: calc(var(--cb-chrome-h, 102px) + 56px);
    }
.lc-section p:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin: 0 0 12px; padding-left: 40px; font: 400 14.5px/23px var(--cb-font-regular); color: var(--cb-text); text-wrap: pretty; }
.lc-section p b:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { font-weight: 600; }
.lc-sub:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin: 16px 0 8px 40px !important; font: 600 13.5px/20px var(--cb-font-semibold) !important; color: var(--cb-text) !important; letter-spacing: .1px; }
.lc-list:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin: 0 0 12px; padding: 0 0 0 40px; list-style: none; }
.lc-list li:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      position: relative; padding: 0 0 10px 18px;
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-text); text-wrap: pretty;
    }
.lc-list li:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"]))::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--cb-muted); }
/* FAQ - accordion */
.lc-faq:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin: 0 0 12px; padding-left: 40px; display: grid; gap: 8px; }
.lc-faq details:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      overflow: hidden;
    }
.lc-faq summary:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      list-style: none;
      cursor: pointer;
      padding: 14px 44px 14px 14px;
      position: relative;
      font: 600 14px/20px var(--cb-font-semibold);
      color: var(--cb-text);
    }
.lc-faq summary:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"]))::-webkit-details-marker { display: none; }
.lc-faq summary:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"]))::after {
      content: ""; position: absolute; right: 16px; top: 50%;
      width: 10px; height: 10px;
      border-right: 2px solid var(--cb-muted);
      border-bottom: 2px solid var(--cb-muted);
      transform: translateY(-70%) rotate(45deg);
      transition: transform 200ms ease, border-color 200ms ease;
    }
.lc-faq details[open] summary:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"]))::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--cb-link); }
.lc-faq details[open] summary:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color:var(--cb-link-text,var(--cb-link)); }
.lc-faq-body:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      padding: 0 14px 14px;
      font: 400 13.5px/21px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty;
    }
.lc-faq-body p:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { padding: 0 !important; margin: 0 0 8px !important; font: inherit !important; color: inherit !important; }
.lc-faq-body p:last-child:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin-bottom: 0 !important; }
.lc-faq-body b:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color: var(--cb-text); font-weight: 600; }
/* Section accent pill - color-codes which tier a passage applies to */
.lc-pill:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 2px 8px;
      border-radius: 999px;
      font: 600 9.5px/1 var(--cb-font-semibold);
      letter-spacing: 1px; text-transform: uppercase;
      margin-left: 6px; vertical-align: middle;
    }
.lc-pill--basic:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { background: rgba(139,128,224,.16); color: #4f44a8; }
.lc-pill--commercial:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { background: rgba(247,120,120,.16); color: #b04545; }
.lc-pill--studio:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { background: rgba(111,215,201,.20); color: #1e7c6d; }
:root:not([data-theme="light"]) .lc-pill--basic:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color: #b8a9ff; }
:root:not([data-theme="light"]) .lc-pill--commercial:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color: #f3a7a0; }
:root:not([data-theme="light"]) .lc-pill--studio:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color: #a8e8de; }
/* End block */
.lc-end:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { margin: 24px 0 0; padding: 16px 16px 14px; background: var(--cb-chip-bg); border: 1px solid var(--cb-border); border-radius: 12px; }
.lc-end-eyebrow:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 10px; }
.lc-end-body:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { font: 400 13.5px/20px var(--cb-font-regular); color: var(--cb-sec); }
.lc-end-body b:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color: var(--cb-text); font-weight: 600; }
.lc-end-row:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lc-end-btn:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      flex: 1 1 0; min-width: 0;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      height: 42px; padding: 0 14px; border-radius: 999px;
      background: var(--cb-card); color: var(--cb-text);
      border: 1px solid var(--cb-border-hard);
      text-decoration: none;
      font: 500 12px/1 var(--cb-font-regular);
    }
.lc-end-btn:hover:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
.lc-end-btn--cta:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) {
      flex: 0 0 auto; padding: 0 18px;
      background: #40b3de; color: #fff; border: none;
      font-weight: 600; cursor: pointer;
    }
.lc-end-btn--cta:hover:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { color: #fff; filter: brightness(1.06); }
body[data-cb-state="user"] .hm-hamburger-top:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])), body[data-cb-state="seller"] .hm-hamburger-top:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])), body[data-cb-state="admin"] .hm-hamburger-top:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { stroke-dasharray: 18 100; }
@media (min-width: 720px) {
      .lc-page:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { padding: 40px 32px 80px; }
      .lc-h1:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { font-size: 46px; }
      .lc-body:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { padding: 6px 28px 32px; }
      .lc-section p:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])), .lc-list:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])), .lc-sub:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])), .lc-faq:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { padding-left: 56px; }
      .lc-section-h:where(body[data-cb-page-css~="licenses"],body[data-cb-page-css~="licenses"] *,:has(>body[data-cb-page-css~="licenses"])) { font-size: 22px; line-height: 28px; }
    }
/* v3 plan U13: the desktop marketplace page (D:marketplace.html).
   1. The page's inline stylesheet, verbatim ("Marketplace-local (dmp-). Promote to desktop.css on 2nd use.").
   2. Four structural rules for the lazy page chain inside the grid. A loaded products_page_N frame
      (it keeps its src) joins the grid (display:contents, like the legacy frames); a pending one —
      lazy, paused behind the click, or every page under ?lazy=off — keeps its box as the full-width
      row that carries the design's Load more control. base/utilities.css makes every frame that is not
      a loading lazy one display:contents, so the .dh-center spans the row itself too (at 900
      the 40th card left it a cell in the last row). Its margin plus the grid gap adds up to the 36px
      the design leaves under the grid. */
.dmp-hero:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {position:relative;padding:28px var(--gut) 20px;background:var(--cb-bg)}
.dmp-hero-inner:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {max-width:1640px;margin:0 auto}
.dmp-hero .dh-sechead:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {margin-bottom:16px;align-items:center}
/* r38 A18: each dot is a 24x24 button (WCAG 2.5.8), the 8px dot drawn in its middle. */
.dmp-dots:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {display:flex;gap:0}.dmp-dots button:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {position:relative;width:24px;height:24px;border-radius:50%;background:transparent}.dmp-dots button:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"]))::before {content:'';position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--cb-border-hard);transition:background 160ms,transform 160ms}.dmp-dots button[aria-selected="true"]:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"]))::before {background:var(--cb-link);transform:scale(1.25)}
.dmp-carousel:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {position:relative}
.dmp-slides:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:16px}
.dmp-slides:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"]))::-webkit-scrollbar {display:none}
.dmp-slide:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {position:relative;scroll-snap-align:start;height:clamp(300px,calc(var(--vw,100vw) / 4.2),520px);overflow:hidden;background:#1b2230;color:#fff}
.dmp-slide-img:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {position:absolute;inset:0;background:var(--img) center/cover no-repeat;transform:scale(1.02)}
.dmp-slide-wash:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,24,.88) 0%,rgba(10,14,24,.6) 38%,rgba(10,14,24,.1) 70%)}
.dmp-slide-copy:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:40px clamp(28px,4vw,72px);max-width:720px}
.dmp-slide-copy h2:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {font:700 clamp(26px,2.6vw,42px)/1.1 var(--cb-font-bold);letter-spacing:-.5px;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.dmp-slide-copy p:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {font:400 clamp(14px,1.05vw,17px)/1.55 var(--cb-font-regular);color:rgba(255,255,255,.85);max-width:560px}
.dmp-slide-actions:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {display:flex;align-items:center;gap:16px;margin-top:6px}
.dmp-slide-price:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {font:700 22px/1 var(--cb-font-bold)}.dmp-slide-price s:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {color:rgba(255,255,255,.55);font:400 15px/1 var(--cb-font-regular);margin-right:8px}
.dmp-carousel .dh-arrow:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {top:50%}
.dmp-results:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {padding:22px var(--gut) 60px}
.dmp-meta:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;font:400 13px/1 var(--cb-font-regular);color:var(--cb-sec)}
.dmp-meta b:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {color:var(--cb-text);font-weight:600}
@media(max-width:900px){.dmp-slide:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {height:auto;aspect-ratio:16/10}.dmp-slide-wash:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {background:linear-gradient(180deg,rgba(10,14,24,.15),rgba(10,14,24,.9))}.dmp-slide-copy:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {justify-content:flex-end}}
/* the lazy page chain (v3 plan U13 approach 3) */
/* QA item 247: the lazy chain's frames follow the list (every page's cards are <li>s in #mp-grid
   itself), so the Load more row is no longer a grid row; it keeps the grid's 18px gap above it. */
#mp-grid ~ turbo-frame .dh-center:where(body[data-cb-page-css~="marketplace"],body[data-cb-page-css~="marketplace"] *,:has(>body[data-cb-page-css~="marketplace"])) {margin-top:18px}
/* Mass upload (v3 plan U37, R36). The page's own inline <style> from
 * production-desktop/store/products/bulk/index.html, ported verbatim and page-scoped (KTD4, KD6):
 * declare it with `v3_page_css 'mass-upload'` and the Sprockets preprocessor rewrites every selector
 * to `:where(body[data-cb-page-css~="mass-upload"])`, so these rules reach this page and no other.
 *
 * `bp-` is the shared seller-page frame (head, buttons, sticky foot) and `bi-` is the importer
 * itself (dropzone, analyze steps, review grid, card, done). The handoff's own comment above the
 * block: "bi-: Import a folder. drop -> analyze (Claude) -> review grid -> done. Reuses ap-/bp-
 * tokens; see products-bulk-ai.js".
 *
 * Two families this file does NOT carry, because the desktop bundle already has them from the page's
 * own <link>s: `.ap-*` (products-new.css, which this page links) and `.cb-feedback*` (feedback.css).
 * The mobile twin of this file has to carry the two `.ap-` rules it uses; see the note there.
 */
/* bi-: Import a folder. drop → analyze (Claude) → review grid → done. Reuses ap-/bp- tokens; see products-bulk-ai.js */
main:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {max-width:1280px;margin:0 auto;padding:28px var(--gut) 32px}
.bp-head:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.bp-head h1:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {font:400 28px/1.15 var(--cb-font-light);color:var(--cb-text);margin:0 0 4px}.bp-head p:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:0;font:400 14px/1.5 var(--cb-font-regular);color:var(--cb-sec);max-width:70ch}
.bp-cancel:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {color:var(--cb-error);font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.bp-cancel svg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.bi-sheet:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:var(--cb-card);border:1px solid var(--cb-border);border-radius:14px;box-shadow:0 6px 18px rgba(20,23,33,.10),0 2px 4px rgba(20,23,33,.06)}
[data-theme="light"] .bi-sheet:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:rgba(20,23,33,.06)}
/* drop */
.bi-drop:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {padding:26px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:26px;align-items:start}
.bi-dropzone:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border:1.5px dashed var(--cb-border-hard);border-radius:12px;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:36px;background:var(--cb-bg);transition:border-color .15s,background .15s}
.bi-dropzone.is-over:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:var(--cb-link);background:color-mix(in srgb,var(--cb-link) 8%,var(--cb-bg))}
.bi-dropzone .cb-ico-tile:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:44px;height:44px;color:var(--cb-link-text,var(--cb-link))}
.bi-drop-title:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {font:400 22px/1.2 var(--cb-font-light);color:var(--cb-text)}.bi-drop-sub:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {font:400 13px/1.5 var(--cb-font-regular);color:var(--cb-sec);max-width:44ch}
.bi-drop-actions:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap;justify-content:center}
.bp-btn:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {height:42px;padding:0 20px;border-radius:999px;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:filter .15s,background .15s;cursor:pointer}
.bp-btn.primary:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:var(--cb-link);color:#fff}.bp-btn.primary:hover:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {filter:brightness(1.08)}.bp-btn.ghost:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border:1px solid var(--cb-border-hard);color:var(--cb-text);background:transparent}.bp-btn.ghost:hover:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}.bp-btn:disabled:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {opacity:.45;pointer-events:none}
.bp-btn svg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:16px;height:16px}
.bi-how:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;flex-direction:column;gap:14px;padding:6px 4px}
.bi-how h2:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:0;font:700 11px/1 var(--cb-font-bold);letter-spacing:1.6px;text-transform:uppercase;color:var(--cb-sec)}
.bi-how ol:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
.bi-how li:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font:400 13px/1.45 var(--cb-font-regular);color:var(--cb-sec)}
.bi-how li:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"]))::before {counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--cb-chip-bg,#f1f3f6);color:var(--cb-text);font:700 12px/28px var(--cb-font-bold);text-align:center}
.bi-how li b:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:block;color:var(--cb-text);font-weight:600;margin-bottom:2px}
.bi-how-note:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin-top:auto;padding:12px 14px;border-radius:10px;background:var(--cb-chip-bg,#f1f3f6);font:400 12px/1.5 var(--cb-font-regular);color:var(--cb-sec)}.bi-how-note b:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {color:var(--cb-text);font-weight:600}
/* analyze */
.bi-analyze:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {padding:34px 40px 38px;max-width:720px;margin:0 auto}
.bi-analyze h2:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:0 0 4px;font:400 24px/1.2 var(--cb-font-light);color:var(--cb-text)}.bi-analyze p:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:0 0 22px;font:400 13px/1.5 var(--cb-font-regular);color:var(--cb-sec)}
.bi-bar:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {height:6px;border-radius:3px;background:var(--cb-chip-bg,#f1f3f6);overflow:hidden;margin-bottom:22px}.bi-bar>i:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:block;height:100%;width:0;background:var(--cb-link);transition:width .4s cubic-bezier(.4,0,.2,1)}
.bi-steps:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bi-steps li:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;font:500 14px/1.3 var(--cb-font-regular);color:var(--cb-muted);transition:background .2s,color .2s}
.bi-steps li[data-status="busy"]:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {color:var(--cb-text);background:color-mix(in srgb,var(--cb-link) 8%,transparent)}.bi-steps li[data-status="done"]:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {color:var(--cb-text)}
.bi-steps li>span:first-child:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:24px;height:24px;border-radius:50%;border:1.5px solid var(--cb-border-hard);display:inline-flex;align-items:center;justify-content:center;position:relative}
.bi-steps li>span:first-child svg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.bi-steps li[data-status="done"]>span:first-child:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:var(--cb-commit);border-color:var(--cb-commit)}.bi-steps li[data-status="done"]>span:first-child svg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {opacity:1}
.bi-steps li[data-status="busy"]>span:first-child:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:var(--cb-link);border-top-color:transparent;animation:bi-spin .8s linear infinite}
@keyframes bi-spin{to{transform:rotate(360deg)}}
.bi-steps small:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:block;font:400 12px/1.3 var(--cb-font-regular);color:var(--cb-muted);margin-top:2px;min-height:12px}
/* review */
.bi-toolbar:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--cb-border);flex-wrap:wrap}
.bi-toolbar-title:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {font:600 15px/1.2 var(--cb-font-semibold);color:var(--cb-text)}.bi-toolbar-title small:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:block;font:400 12px/1.4 var(--cb-font-regular);color:var(--cb-sec);margin-top:2px}
.bi-filters:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;gap:6px;margin-left:auto}
.bi-filters button:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])), .bi-toolbar .bp-btn.small:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--cb-border-hard);background:transparent;color:var(--cb-sec);font:600 12px/1 var(--cb-font-semibold);display:inline-flex;align-items:center;gap:6px;letter-spacing:0;text-transform:none;white-space:nowrap}
.bi-filters button[aria-pressed="true"]:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link));background:color-mix(in srgb,var(--cb-link) 10%,transparent)}
.bi-filters button b:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {font-weight:700}
.bi-note:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:12px 22px 0;padding:10px 14px;border-radius:8px;background:color-mix(in srgb,var(--cb-warn) 14%,transparent);color:var(--cb-text);font:400 12px/1.5 var(--cb-font-regular)}
.bi-grid:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;padding:22px}
.bi-card:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:var(--cb-card);border:1px solid var(--cb-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(20,23,33,.08),0 2px 4px rgba(20,23,33,.05);transition:box-shadow .18s,transform .18s,border-color .18s}
.bi-card:hover:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {box-shadow:0 12px 28px rgba(20,23,33,.14),0 2px 5px rgba(20,23,33,.08);transform:translateY(-2px)}
.bi-card.needs-review:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:color-mix(in srgb,var(--cb-warn) 55%,var(--cb-border))}
.bi-card[data-status="draft"]:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {opacity:.82}
.bi-cover:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {aspect-ratio:16/9;position:relative;background:var(--cb-chip-bg,#f1f3f6);overflow:hidden}.bi-cover img:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:100%;height:100%;object-fit:cover;display:block}
.bi-nocover:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font:600 13px/1.4 var(--cb-font-semibold);color:var(--cb-muted)}.bi-nocover small:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {font-weight:400;font-size:11px}
.bi-cover-tag:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])), .bi-src:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {position:absolute;bottom:8px;font:600 10px/1 var(--cb-font-semibold);letter-spacing:.8px;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:rgba(14,19,32,.72);color:#fff;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
.bi-cover-tag:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {left:8px}.bi-src:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {right:8px;text-transform:none;letter-spacing:0;font-weight:500;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-strip:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;gap:6px;padding:8px 12px 0}.bi-thumb:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:48px;height:32px;border-radius:5px;overflow:hidden;border:1.5px solid transparent;padding:0;background:var(--cb-chip-bg);cursor:pointer;flex:none}.bi-thumb img:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:100%;height:100%;object-fit:cover;display:block}.bi-thumb:hover:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:var(--cb-link)}
.bi-thumb-more:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:48px;height:32px;border-radius:5px;background:var(--cb-chip-bg);display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--cb-font-semibold);color:var(--cb-sec)}
.bi-body:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {padding:12px 12px 6px;display:grid;gap:10px}
.bi-field:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:grid;gap:5px;min-width:0}
.bi-label:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:inline-flex;align-items:center;gap:7px;font:700 10.5px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-sec)}
.bi-conf:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:8px;height:8px;border-radius:50%;flex:none;background:var(--cb-commit);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-commit) 25%,transparent)}
.bi-conf.is-mid:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:var(--cb-warn);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-warn) 28%,transparent)}.bi-conf.is-lo:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:var(--cb-error);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-error) 25%,transparent)}
.bi-input:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:100%;height:38px;padding:0 10px;border-radius:7px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);color:var(--cb-text);font:500 14px/1.3 var(--cb-font-regular);outline:0;box-sizing:border-box}.bi-input:focus:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:var(--cb-link);box-shadow:0 0 0 3px rgba(64,179,222,.16)}
select.bi-input:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cb-sec) 50%),linear-gradient(135deg,var(--cb-sec) 50%,transparent 50%);background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.bi-row2:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:grid;grid-template-columns:1fr 128px;gap:10px}
.bi-money:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;align-items:center;height:38px;border-radius:7px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);overflow:hidden}.bi-money b:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {padding:0 0 0 10px;font:600 13px/1 var(--cb-font-semibold);color:var(--cb-muted)}.bi-money .bi-input:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border:0;background:transparent;height:36px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield}.bi-money .bi-input:focus:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {box-shadow:none}.bi-money:focus-within:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:var(--cb-link);box-shadow:0 0 0 3px rgba(64,179,222,.16)}.bi-money input:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"]))::-webkit-inner-spin-button, .bi-money input:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"]))::-webkit-outer-spin-button {-webkit-appearance:none}
.bi-desc-toggle:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:none;border:0;padding:0;cursor:pointer}.bi-desc-toggle svg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .15s}.bi-desc-toggle[aria-expanded="true"] svg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {transform:rotate(180deg)}
.bi-desc:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {height:auto;padding:8px 10px;resize:vertical;font-weight:400;line-height:1.45}
.bi-desc-peek:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:0;font:400 12.5px/1.5 var(--cb-font-regular);color:var(--cb-sec);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bi-files:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;align-items:center;gap:8px;font:400 12px/1 var(--cb-font-regular);color:var(--cb-sec);padding:4px 0 2px}.bi-files svg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}.bi-files b:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {color:var(--cb-text);font-weight:600}
.bi-link:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin-left:auto;background:none;border:0;padding:0;color:var(--cb-link-text,var(--cb-link));font:600 12px/1 var(--cb-font-semibold);cursor:pointer}
.bi-filelist:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {list-style:none;margin:0;padding:8px 10px;border-radius:7px;background:var(--cb-chip-bg,#f1f3f6);display:grid;gap:4px;max-height:160px;overflow:auto;font:400 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cb-sec)}.bi-filelist li:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;justify-content:space-between;gap:10px}.bi-filelist li span:first-child:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bi-card-foot:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;align-items:center;gap:10px;padding:10px 12px 12px;margin-top:auto;border-top:1px solid var(--cb-border)}
.bi-seg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:inline-flex;border:1px solid var(--cb-border-hard);border-radius:999px;overflow:hidden}.bi-seg button:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {height:30px;padding:0 14px;border:0;background:transparent;color:var(--cb-sec);font:600 12px/1 var(--cb-font-semibold);cursor:pointer}.bi-seg button[aria-checked="true"]:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:var(--cb-commit);color:#fff}.bi-seg button[data-bi-status="draft"][aria-checked="true"]:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {background:var(--cb-warn)}
.bi-remove:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin-left:auto;width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--cb-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.bi-remove:hover:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {color:var(--cb-error);background:color-mix(in srgb,var(--cb-error) 12%,transparent)}.bi-remove svg:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.bi-empty-filter:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {grid-column:1/-1;padding:48px;text-align:center;color:var(--cb-sec);font:400 14px/1.4 var(--cb-font-regular)}
/* foot */
.bp-foot:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {position:sticky;bottom:16px;z-index:30;margin-top:18px;background:color-mix(in srgb,var(--cb-card) 94%,transparent);backdrop-filter:blur(8px);border:1px solid var(--cb-border);border-radius:14px;padding:14px 20px;display:flex;align-items:center;gap:16px;box-shadow:0 12px 32px rgba(20,23,33,.18),0 2px 6px rgba(20,23,33,.08)}
[data-theme="light"] .bp-foot:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:rgba(20,23,33,.06)}
.bp-foot-meta:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {font:400 13px/1.3 var(--cb-font-regular);color:var(--cb-sec)}.bp-foot-meta b:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {color:var(--cb-text);font-weight:600}
.bp-toolbar-spacer:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {flex:1}
.bi-legend:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:inline-flex;gap:14px;align-items:center;font:400 12px/1 var(--cb-font-regular);color:var(--cb-sec)}.bi-legend span:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:inline-flex;align-items:center;gap:6px}
/* done */
.bi-done:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {padding:56px 40px;text-align:center;max-width:560px;margin:0 auto}.bi-done .cb-ico-tile:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:56px;height:56px;color:var(--cb-commit);margin:0 auto 14px}
.bi-done h2:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:0 0 6px;font:400 26px/1.2 var(--cb-font-light);color:var(--cb-text)}.bi-done p:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {margin:0 0 22px;font:400 14px/1.5 var(--cb-font-regular);color:var(--cb-sec)}
.bi-done-actions:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dh-paper-bg .dh-toast:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {position:fixed;left:50%;bottom:96px;transform:translate(-50%,10px);background:#141926;color:#fff;border:1px solid rgba(255,255,255,.12);padding:12px 18px;border-radius:999px;font:600 13px/1 var(--cb-font-semibold);opacity:0;transition:opacity .2s,transform .2s;z-index:80;pointer-events:none}.dh-paper-bg .dh-toast.is-shown:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.bi-drop:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {grid-template-columns:1fr}
/* A tablet (the desktop build at 768-900) cannot fit the foot's count, legend and two buttons on one
   line; the primary button ran 61px past a 768 screen (QA item 216). */
.bp-foot:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {flex-wrap:wrap}}
/* More details (sweep M7, 2026-10-14): master's row's other fields, in the card's own language */
.bi-more:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:grid;gap:10px;margin-top:8px}
.bi-more[hidden]:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:none}
.bi-more-cats:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:grid;gap:6px}
.bi-more-label:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {font:600 11px/1.2 var(--cb-font-semibold);color:var(--cb-sec);letter-spacing:.4px;text-transform:uppercase}
.bi-check:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;align-items:center;gap:8px;font:500 13px/1.3 var(--cb-font-regular);color:var(--cb-text);cursor:pointer}
.bi-check input:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {width:16px;height:16px;margin:0;accent-color:var(--cb-link)}
.bi-suggested:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {max-width:160px}
.bi-suggested input:disabled:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {opacity:.5}
/* A file on its way, in the card's list, with its cancel (sweep M7 e) */
.bi-file-pending:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:flex;align-items:center;gap:8px}
.bi-file-pending>span:first-child:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-file-pending [data-bi-file-status]:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {color:var(--cb-sec);white-space:nowrap}
.bi-file-cancel:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--cb-border-hard);background:transparent;color:var(--cb-sec);font:600 14px/1 var(--cb-font-regular);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.bi-file-cancel:hover:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {border-color:#ec4d4d;color:#ec4d4d}
/* From Dropbox on a card's file line (sweep M7 d) */
.bi-dropbox:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {display:inline-flex;flex:none;margin-left:4px}
.bi-files .bi-link:where(body[data-cb-page-css~="mass-upload"],body[data-cb-page-css~="mass-upload"] *,:has(>body[data-cb-page-css~="mass-upload"])) {white-space:nowrap;flex:none}
/* ─────── Notifications page (nt-*) ───────
       BACKEND:
         GET    /api/me/notifications?tab=all|ratings|comments|sales|updates&page=N
                → { items: [{ id, kind, actor, avatar, product, hrs, read, rating?, comment?, thread?, update? }], totalPages, counts: {...} }
         POST   /api/me/notifications/mark-all-read         → 200
         POST   /api/me/notifications/:id/read              → { read: bool }
         DELETE /api/me/notifications/:id                   → 200
         DELETE /api/me/notifications?tab=<tab>             → { removed: N }  (clear-all)
       Swipe-to-reveal (mark-read / delete) and pull-to-refresh are
       deferred to native; this page exposes those actions via the
       per-row ⋯ menu so they work on desktop + mobile click. */
/* ─── Page header ─── */
.nt-head:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: var(--cb-card); border-bottom: 1px solid var(--cb-border); padding: 24px 16px 18px; }
.nt-head-row:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nt-h1:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { margin: 0; font: 300 28px/1.1 var(--cb-font-light), Mulish, system-ui; color: var(--cb-text); letter-spacing: -.2px; }
.nt-mark-all:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      background: transparent; border: none; cursor: pointer; padding: 0;
      font: 400 12px/1 var(--cb-font-regular);
      letter-spacing: 1.4px; text-transform: uppercase;
      color:var(--cb-link-text,var(--cb-link)); flex: none;
    }
.nt-mark-all[hidden]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: none; }
.nt-sub:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { margin: 6px 0 0; font: 400 13px/18px var(--cb-font-regular); color: var(--cb-muted); }
.nt-sub strong:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { color: var(--cb-text); font-weight: 400; }
/* ─── Tab scroller ─── */
.nt-tabs-wrap:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
.nt-tabs-wrap:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"]))::-webkit-scrollbar { display: none; }
.nt-tabs:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      display: inline-flex; align-items: center; gap: 0;
      padding: 0 8px;
      min-width: 100%;
    }
.nt-tab:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      background: transparent; border: none; cursor: pointer;
      padding: 14px 12px 12px;
      display: inline-flex; align-items: center; gap: 6px;
      border-bottom: 2px solid transparent;
      color: var(--cb-muted);
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      white-space: nowrap; flex: none;
      transition: color .15s, border-color .15s;
    }
.nt-tab[aria-selected="true"]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      color: var(--cb-text);
      border-bottom-color: var(--cb-link);
    }
.nt-tab-count:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: .4px; text-transform: none;
      font-variant-numeric: tabular-nums;
      color: var(--cb-muted);
    }
.nt-tab[aria-selected="true"] .nt-tab-count:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { color: var(--cb-text); }
/* ─── Toolbar (filter label + Clear all) ─── */
.nt-toolbar:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 12px 18px;
      background: var(--cb-bg);
      border-bottom: 1px solid var(--cb-border);
    }
.nt-toolbar-label:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted); font-variant-numeric: tabular-nums;
    }
.nt-clear-all:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      background: transparent; border: none; padding: 0; cursor: pointer;
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
      text-decoration: underline; text-underline-offset: 3px;
    }
.nt-clear-all:hover:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { color: var(--cb-text); }
/* ─── Day group ─── */
.nt-day-label:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      padding: 12px 16px 6px;
      background: var(--cb-bg);
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.nt-day-group:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: var(--cb-card); }
.nt-day-group[hidden]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: none; }
/* ─── Row ─── */
.nt-row:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      position: relative;
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px 16px 14px 20px;
      border-bottom: 1px solid var(--cb-border);
      background: var(--cb-card);
      color: var(--cb-text);
      text-decoration: none;
      cursor: pointer;
      transition: background .12s ease, opacity .22s ease-out, max-height .26s cubic-bezier(.4,0,.2,1);
    }
.nt-row:last-child:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { border-bottom: none; }
.nt-row[hidden]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: none; }
/* Only clip while the row is in the collapse-out animation;
       otherwise the per-row ⋯ menu (absolutely positioned) gets
       cropped by the row’s box. */
.nt-row.is-removing:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { overflow: hidden; opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom: none; pointer-events: none; }
.nt-row[data-read="false"]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: rgba(64,179,222,.06); }
:root:not([data-theme="light"]) .nt-row[data-read="false"]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: rgba(64,179,222,.08); }
.nt-row:hover:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: var(--cb-bg); }
.nt-row[data-read="false"]:hover:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: rgba(64,179,222,.10); }
.nt-unread-dot:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      position: absolute; left: 7px; top: 26px;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--cb-link);
    }
.nt-row[data-read="true"] .nt-unread-dot:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: none; }
/* Thumb + actor avatar (stacked) */
.nt-thumb-wrap:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { position: relative; flex: none; }
.nt-thumb:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      width: 52px; height: 52px; border-radius: 4px;
      background-color: var(--cb-bg);
      background-size: cover; background-position: center;
      overflow: hidden;
      display: inline-flex; align-items: center; justify-content: center;
    }
.nt-thumb svg:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { color: var(--cb-muted); }
.nt-thumb-actor:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      position: absolute; right: -6px; bottom: -6px;
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--cb-card);
      display: inline-flex; align-items: center; justify-content: center;
    }
.nt-actor-avatar:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      width: 22px; height: 22px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font: 700 9px/1 var(--cb-font-semibold);
      letter-spacing: .4px;
      color: #fff;
    }
/* Text block */
.nt-text:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { flex: 1; min-width: 0; padding-right: 28px; }
.nt-sentence:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted);
      text-wrap: pretty;
    }
.nt-sentence strong:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { color: var(--cb-text); font-weight: 600; }
.nt-quote:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      margin-top: 6px;
      padding-left: 10px;
      border-left: 2px solid var(--cb-border);
      font: 400 12px/17px var(--cb-font-regular);
      color: var(--cb-muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
.nt-time:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      margin-top: 6px;
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.nt-stars:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      display: inline-flex; align-items: center; gap: 1px;
      vertical-align: -1px;
      margin-left: 4px;
    }
.nt-stars svg:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { width: 11px; height: 11px; }
.nt-stars .filled:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { color: #f5a623; }
.nt-stars .empty:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { color: rgba(122,132,153,.28); }
/* Per-row ⋯ menu */
.nt-menu:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { position: absolute; top: 12px; right: 12px; }
.nt-menu-btn:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      width: 28px; height: 28px; padding: 0;
      background: transparent; border: none; cursor: pointer;
      color: var(--cb-muted);
      border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
    }
.nt-menu-btn:hover:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])), .nt-menu-btn[aria-expanded="true"]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: var(--cb-bg); color: var(--cb-text); }
.nt-menu-pop:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      position: absolute; top: calc(100% + 4px); right: 0;
      min-width: 180px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(20,23,33,.18);
      overflow: hidden; padding: 6px 0; z-index: 30;
    }
:root:not([data-theme="light"]) .nt-menu-pop:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.nt-menu-pop[hidden]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: none; }
.nt-menu-pop button:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      display: block; width: 100%; padding: 11px 14px;
      background: transparent; border: none; text-align: left;
      color: var(--cb-text);
      font: 400 13px/1 var(--cb-font-regular);
      cursor: pointer;
    }
.nt-menu-pop button:hover:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: var(--cb-bg); }
.nt-menu-pop button.is-danger:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { color: #ec5a5a; }
/* ─── Empty state ─── */
.nt-empty:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      padding: 64px 24px 56px;
      text-align: center;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.nt-empty[hidden]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: none; }
.nt-empty-icon:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      display: inline-flex; align-items: center; justify-content: center;
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--cb-bg);
      margin-bottom: 14px;
      color: var(--cb-muted);
    }
.nt-empty-title:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      font: 300 22px/1.2 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text);
      margin-bottom: 8px; letter-spacing: -.1px;
    }
.nt-empty-sub:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted);
      max-width: 280px; margin: 0 auto 22px;
    }
.nt-empty-cta:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      display: inline-flex; align-items: center; justify-content: center;
      height: 44px; padding: 0 22px; border-radius: 22px;
      background: var(--cb-link); color: #fff;
      font: 600 13px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      text-decoration: none;
    }
.nt-empty-cta:hover:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { filter: brightness(1.05); }
/* ─── Clear-all confirm modal ─── */
.nt-confirm-host:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(10,16,24,0);
      backdrop-filter: blur(0);
      display: flex; align-items: center; justify-content: center;
      padding: 24px; pointer-events: none;
      transition: background 160ms ease-out, backdrop-filter 160ms ease-out;
    }
.nt-confirm-host[hidden]:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: none; }
.nt-confirm-host.is-open:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      background: rgba(10,16,24,.55);
      backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
      pointer-events: auto;
    }
.nt-confirm:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      width: 100%; max-width: 320px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      box-shadow: 0 24px 60px rgba(0,0,0,.35);
      padding: 22px 22px 18px;
      transform: translateY(12px) scale(.98); opacity: 0;
      transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease-out;
    }
.nt-confirm-host.is-open .nt-confirm:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { transform: translateY(0) scale(1); opacity: 1; }
.nt-confirm-icon:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(236,90,90,.12); color: #ec5a5a;
      margin-bottom: 14px;
    }
.nt-confirm-title:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      font: 300 20px/1.25 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text);
      letter-spacing: -.2px; margin-bottom: 6px;
    }
.nt-confirm-body:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted); margin-bottom: 18px;
    }
.nt-confirm-actions:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { display: flex; gap: 10px; justify-content: flex-end; }
.nt-confirm-cancel:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])), .nt-confirm-go:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      height: 38px; padding: 0 18px; border-radius: 6px;
      font: 700 11px/1 var(--cb-font-bold);
      letter-spacing: 1.6px; text-transform: uppercase;
      cursor: pointer;
    }
.nt-confirm-cancel:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: transparent; border: 1px solid var(--cb-border); color: var(--cb-text); }
.nt-confirm-cancel:hover:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { background: var(--cb-bg); }
.nt-confirm-go:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) {
      background: #ec5a5a; border: none; color: #fff;
      box-shadow: 0 2px 8px rgba(236,90,90,.35);
    }
.nt-confirm-go:hover:where(body[data-cb-page-css~="notifications"],body[data-cb-page-css~="notifications"] *,:has(>body[data-cb-page-css~="notifications"])) { filter: brightness(1.05); }

/* ───────── Order confirmation (or-*) ─────────
       BACKEND:
         GET  /api/me/orders/:id → {
           id, email, total, isGift, signedIn,
           items: [{
             id, slug, title, author, categoryLabel, thumb,
             state: 'ready'|'processing'|'gift-sent',
             eyebrow?, eyebrowIcon?,
             files: [{ id, name, bytes, kind, url }],
             giftRecipient?
           }]
         }
         POST /api/me/orders/:id/files/:fileId/download → signed URL; client
              should stream + track progress via the fetch ReadableStream,
              not the mock setInterval here.
         POST /api/me/orders/:id/cloud → { provider: 'email'|'dropbox'|'gdrive'|'onedrive' }
              Queues a server-to-server transfer or sends a links email.
         POST /api/me/orders/:id/claim → { password }
              Sets a password on the guest account that placed this order,
              attaching it to a new user record so future re-downloads work.
         GET  /api/me/orders/:id/receipt → application/pdf (signed URL)

       Each line-item state is independent - one item can be 'processing'
       while another is 'ready'. The UI renders each block from its own
       state, not the order's. */
/* Scenario routing - show only the active block */
[data-or-scenario-block]:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
[data-or-scenario-block].is-active:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: block; }
/* ─── Hero ─── */
.or-hero:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
      padding: 28px 18px 22px;
      display: flex; gap: 14px; align-items: flex-start;
    }
.or-hero-disc:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      width: 44px; height: 44px; border-radius: 50%;
      background: #f4faf3;
      border: 1px solid #b0daae;
      display: inline-flex; align-items: center; justify-content: center;
      flex: none;
      color: #7bc178;
    }
:root:not([data-theme="light"]) .or-hero-disc:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: rgba(123,193,120,.12);
      border-color: rgba(123,193,120,.35);
    }
.or-hero-body:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { flex: 1; min-width: 0; }
.or-hero-title:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      font: 300 26px/1.15 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text); letter-spacing: -.2px;
      margin: 0;
    }
.or-hero-sub:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin: 8px 0 0;
      font: 400 14px/20px var(--cb-font-regular);
      color: var(--cb-sec);
    }
.or-hero-sub strong:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: var(--cb-text); font-weight: 600; }
.or-hero-meta:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 12px;
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      font: 400 12px/16px var(--cb-font-regular);
      letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.or-hero-meta b:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: var(--cb-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.or-hero-meta .or-hero-dot:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      width: 3px; height: 3px; border-radius: 50%; background: var(--cb-muted);
    }
.or-hero-receipt:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      color:var(--cb-link-text,var(--cb-link)); cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px;
      background: none; border: none; padding: 0;
      font: inherit; text-transform: inherit; letter-spacing: inherit;
    }
.or-hero-receipt:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { text-decoration: underline; }
/* ─── Items list ─── */
.or-items:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: var(--cb-bg); padding: 14px 16px 4px; }
.or-item:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: var(--cb-card);
      border-radius: 10px;
      border: 1px solid var(--cb-border);
      overflow: hidden;
      margin-bottom: 14px;
    }
.or-item-eyebrow:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      padding: 14px 16px 0;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      color:var(--cb-link-text,#40b3de);
      display: inline-flex; align-items: center; gap: 6px;
    }
.or-item-titles:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { padding: 14px 16px 12px; }
.or-item-titles.has-eyebrow:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { padding-top: 6px; }
.or-item-title:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      font: 600 17px/1.25 var(--cb-font-semibold);
      color: var(--cb-text); letter-spacing: -.1px;
      margin: 0;
    }
.or-item-author:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 4px;
      font: 400 13px/20px var(--cb-font-regular);
      color: var(--cb-sec);
    }
.or-item-author a:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color:var(--cb-link-text,var(--cb-link)); text-decoration: none; }
.or-item-author b:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: var(--cb-text); font-weight: 600; }
.or-item-hero:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin: 0 16px;
      aspect-ratio: 16 / 9;
      border-radius: 4px;
      background-size: cover; background-position: center;
      background-color: #2c3242;
      box-shadow: inset 0 0 0 1px rgba(20,23,33,.06);
      position: relative;
    }
:root:not([data-theme="light"]) .or-item-hero:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.or-item-hero:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"]))::after {
      content: ''; position: absolute; inset: 0; border-radius: 4px;
      background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.18) 100%);
    }
/* ─── State body (ready / processing / gift) ─── */
.or-item-body:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { padding: 4px 16px 16px; }
.or-item-files-head:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      font: 600 12px/16px var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-muted);
      padding: 12px 0 10px;
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
.or-files:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: flex; flex-direction: column; gap: 6px; }
/* ─── Attachment row ─── */
.or-att:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--cb-bg);
      border-radius: 4px;
      position: relative; overflow: hidden;
    }
:root:not([data-theme="light"]) .or-att:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #1a1f2c; }
.or-att-progress:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      position: absolute; inset: 0 auto 0 0;
      width: 0;
      background: rgba(64,179,222,.14);
      transition: width .12s linear;
      pointer-events: none;
    }
/* File-type glyph - colored folded-document SVG injected by JS
       (.pp-file-icon parity with the product page). The SVG itself
       carries its color + extension label, so the tile is transparent. */
.or-att-glyph:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      width: 36px; height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      flex: none; position: relative; z-index: 1;
    }
.or-att-glyph svg:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: block; }
.or-att-meta:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { flex: 1; min-width: 0; position: relative; z-index: 1; }
.or-att-name:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      font: 600 14px/20px var(--cb-font-semibold);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.or-att-sub:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 2px;
      font: 400 12px/16px var(--cb-font-regular);
      color: var(--cb-muted);
      font-variant-numeric: tabular-nums;
    }
.or-att-sub b:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: var(--cb-text); font-weight: 600; }
/* Sub-state spans: only the matching one shows */
.or-att .or-att-sub-static:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])), .or-att .or-att-sub-dl:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])), .or-att .or-att-sub-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
.or-att[data-state="idle"] .or-att-sub-static:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: inline; }
.or-att[data-state="downloading"] .or-att-sub-dl:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: inline; }
.or-att[data-state="done"] .or-att-sub-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: inline; }
.or-att-btn:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      position: relative; z-index: 1; flex: none;
      width: 36px; height: 36px; border-radius: 999px;
      background: transparent;
      color: var(--cb-muted);
      border: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
.or-att[data-state="downloading"] .or-att-btn:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { cursor: default; }
.or-att[data-state="done"] .or-att-btn:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: #7bc178; color: #fff;
    }
.or-att .or-att-btn-idle:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])), .or-att .or-att-btn-dl:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])), .or-att .or-att-btn-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
.or-att[data-state="idle"] .or-att-btn-idle:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: inline-flex; }
.or-att[data-state="downloading"] .or-att-btn-dl:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: inline-flex; }
.or-att[data-state="done"] .or-att-btn-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: inline-flex; }
.or-spinner:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      display: inline-block; width: 14px; height: 14px;
      border: 2px solid var(--cb-link); border-right-color: transparent;
      border-radius: 50%; animation: or-spin .8s linear infinite;
    }
.or-spinner.is-small:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { width: 12px; height: 12px; border-width: 2px; }
.or-spinner.is-md:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { width: 16px; height: 16px; }
@keyframes or-spin { to { transform: rotate(360deg); } }
/* ─── Download All / Send to cloud CTA ─── */
.or-item-cta:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 12px;
      width: 100%; height: 46px;
      background: #40b3de; color: #fff;
      border: none; border-radius: 999px;
      font: 700 13px/18px var(--cb-font-bold);
      letter-spacing: 1.6px; text-transform: uppercase;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      box-shadow: 0 4px 12px rgba(64,179,222,.30);
      text-decoration: none;
    }
.or-item-cta:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #3aa2ca; }
.or-cta-foot:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 8px; text-align: center;
      font: 400 13px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
/* ─── State banners (processing / gift / oversized warn) ─── */
.or-banner:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      border-radius: 6px; padding: 14px 14px;
      display: flex; align-items: flex-start; gap: 12px;
    }
.or-banner-block:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { margin: 16px; }
.or-banner-title:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      font: 600 13px/18px var(--cb-font-semibold);
      color: var(--cb-text);
    }
.or-banner-title b:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: #7bc178; font-weight: 600; }
.or-banner-sub:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 4px;
      font: 400 13px/20px var(--cb-font-regular);
      color: var(--cb-sec);
    }
.or-banner.is-info:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #eef6fb; border: 1px solid #bfe1ee; }
.or-banner.is-info svg:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])), .or-banner.is-info .or-spinner:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color:var(--cb-link-text,var(--cb-link)); }
:root:not([data-theme="light"]) .or-banner.is-info:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: rgba(64,179,222,.10); border-color: rgba(64,179,222,.30); }
.or-banner.is-success:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #f4faf3; border: 1px solid #b0daae; }
.or-banner.is-success svg:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: #7bc178; }
:root:not([data-theme="light"]) .or-banner.is-success:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: rgba(123,193,120,.12); border-color: rgba(123,193,120,.35); }
.or-banner.is-warn:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: rgba(245,166,35,.10);
      border: 1px solid rgba(245,166,35,.40);
    }
.or-banner.is-warn svg:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: #d18a16; }
.or-banner > svg:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])), .or-banner > .or-spinner:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { flex: none; margin-top: 1px; }
.or-banner-body:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { flex: 1; min-width: 0; color: var(--cb-sec); font: 400 13px/20px var(--cb-font-regular); }
.or-banner-body b:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: var(--cb-text); font-weight: 600; }
/* Warn banner sits inside .or-item-body - it gets natural inset already,
       so just give it a little vertical breathing room. */
.or-banner.is-warn:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { margin-bottom: 10px; }
/* ─── Account claim card (unsigned only) ─── */
.or-claim:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin: 0 16px 16px;
      padding: 22px 20px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
    }
.or-claim-heading:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: flex; align-items: center; gap: 12px; }
.or-claim-icon:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(64,179,222,.12); color: var(--cb-link-text,var(--cb-link)); }
.or-claim-title:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { font: 600 18px/24px var(--cb-font-semibold); color: var(--cb-text); margin: 0; }
.or-claim-sub:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { margin: 10px 0 0; font: 400 14px/20px var(--cb-font-regular); color: var(--cb-sec); }
.or-claim-email:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 12px; height: 44px; padding: 0 12px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      border-radius: 4px;
      display: flex; align-items: center; gap: 8px;
      font: 400 14px/20px var(--cb-font-regular);
      color: var(--cb-sec);
    }
:root:not([data-theme="light"]) .or-claim-email:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #1a1f2c; }
.or-claim-email-eb:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      color: var(--cb-muted);
      font: 600 12px/16px var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
    }
.or-claim-email-addr:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      color: var(--cb-text); flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.or-claim-pwd:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 8px; width: 100%; height: 44px; padding: 0 12px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 4px;
      font: 400 16px/1 var(--cb-font-regular);
      color: var(--cb-text); outline: none;
      box-sizing: border-box;
    }
.or-claim-pwd:focus:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { border-color: var(--cb-link); box-shadow: 0 0 0 2px rgba(52,182,234,.20); }
.or-claim-agree:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { margin-top: 12px; display: flex; align-items: flex-start; gap: 10px; }
.or-claim-agree input:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { margin-top: 3px; flex: none; accent-color: var(--cb-link); }
.or-claim-agree label:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { font: 400 13px/20px var(--cb-font-regular); color: var(--cb-sec); cursor: pointer; }
.or-claim-agree a:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color:var(--cb-link-text,var(--cb-link)); font-weight: 600; text-decoration: none; }
.or-claim-submit:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 12px; width: 100%; height: 46px;
      background: #7bc178; color: #fff;
      border: none; border-radius: 4px;
      font: 700 13px/18px var(--cb-font-bold);
      letter-spacing: 1.8px; text-transform: uppercase;
      cursor: pointer;
      transition: background .15s ease, color .15s ease;
    }
.or-claim-submit:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #6ab168; }
.or-claim-submit:disabled:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: #dfe3ea; color: #9aa3b6; cursor: not-allowed;
    }
:root:not([data-theme="light"]) .or-claim-submit:disabled:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #2a3246; color: #5a6478; }
.or-claim-foot:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 10px;
      font: 400 13px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.or-claim.is-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: #f4faf3;
      border-color: #b0daae;
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      color: #7bc178;
    }
:root:not([data-theme="light"]) .or-claim.is-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: rgba(123,193,120,.12); border-color: rgba(123,193,120,.35); }
.or-claim.is-done > *:not(.or-claim-done):where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
.or-claim-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; align-items: center; gap: 12px; }
.or-claim.is-done .or-claim-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: flex; }
.or-claim-done-msg:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { font: 600 13px/18px var(--cb-font-semibold); color: var(--cb-text); }
.or-claim-done-msg a:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color:var(--cb-link-text,var(--cb-link)); text-decoration: none; }
/* ─── Email-gate card (no-email guest checkout) ───
       Sits between hero and items when the buyer didn't provide an email
       at checkout. Files are visible but downloads are gated until the
       user submits an address.
       BACKEND:
         POST /api/me/orders/:id/email {email} → 200 unlocks download
         endpoints + queues a confirmation email. */
.or-email-gate:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin: 14px 16px 0;
      padding: 18px 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(64,179,222,.08);
    }
:root:not([data-theme="light"]) .or-email-gate:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.or-email-gate-eb:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      color:var(--cb-link-text,#40b3de);
      display: inline-flex; align-items: center; gap: 6px;
    }
.or-email-gate-eb svg:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { flex: none; }
.or-email-gate-title:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin: 8px 0 0;
      font: 600 16px/1.25 var(--cb-font-semibold); color: var(--cb-text);
    }
.or-email-gate-sub:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin: 6px 0 0;
      font: 400 13px/20px var(--cb-font-regular); color: var(--cb-sec);
    }
.or-email-gate-input:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 14px; width: 100%; height: 46px; padding: 0 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 4px;
      font: 400 14px/1 var(--cb-font-regular);
      color: var(--cb-text); outline: none;
      box-sizing: border-box;
    }
.or-email-gate-input:focus:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      border-color: var(--cb-link);
      box-shadow: 0 0 0 2px rgba(52,182,234,.20);
    }
.or-email-gate-submit:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 10px; width: 100%; height: 46px;
      background: #7bc178; color: #fff;
      border: none; border-radius: 999px;
      font: 700 13px/18px var(--cb-font-bold);
      letter-spacing: 1.6px; text-transform: uppercase;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      box-shadow: 0 4px 12px rgba(123,193,120,.30);
      transition: background .15s ease;
    }
.or-email-gate-submit:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #6ab168; }
.or-email-gate-submit:disabled:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: #dfe3ea; color: #9aa3b6; cursor: not-allowed;
      box-shadow: none;
    }
:root:not([data-theme="light"]) .or-email-gate-submit:disabled:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #2a3246; color: #5a6478; }
.or-email-gate-foot:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin: 10px 0 0; text-align: center;
      font: 400 13px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.or-email-gate-foot a:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color:var(--cb-link-text,var(--cb-link)); text-decoration: none; }
.or-email-gate-foot a:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { text-decoration: underline; }
/* Sent state - card flips green, hides form, shows confirmation. */
.or-email-gate.is-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: #f4faf3;
      border-color: #b0daae;
      box-shadow: none;
    }
:root:not([data-theme="light"]) .or-email-gate.is-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: rgba(123,193,120,.12);
      border-color: rgba(123,193,120,.35);
    }
/* When the gate is submitted, hide the form and reveal the
       .cb-mailsent done card (which lives inside the gate). */
.or-email-gate.is-done > *:not(.or-email-gate-done):where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
.or-email-gate-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
.or-email-gate.is-done .or-email-gate-done:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: flex; }
/* Lock overlay on items inside the needs-email scenario. */
[data-or-gate-state="locked"] .or-att-btn:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])), [data-or-gate-state="locked"] .or-item-cta:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      opacity: .45; pointer-events: none; cursor: not-allowed;
      box-shadow: none;
    }
[data-or-gate-state="locked"] .or-item-files-head:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"]))::after {
      content: 'Locked';
      margin-left: auto;
      padding: 4px 8px; border-radius: 999px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      color: var(--cb-muted);
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 4px;
    }
:root:not([data-theme="light"]) [data-or-gate-state="locked"] .or-item-files-head:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"]))::after {
      background: #1a1f2c;
      border-color: rgba(255,255,255,.08);
    }
/* ─── Help row ─── */
.or-help:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin: 0 16px 16px;
      padding: 14px 16px;
      background: var(--cb-bg);
      border-radius: 8px;
      display: flex; align-items: center; gap: 10px;
      font: 400 13px/20px var(--cb-font-regular);
      color: var(--cb-sec);
    }
:root:not([data-theme="light"]) .or-help:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #1a1f2c; }
.or-help a:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color:var(--cb-link-text,var(--cb-link)); cursor: pointer; text-decoration: none; }
.or-help a:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { text-decoration: underline; }
.or-help > svg:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { flex: none; color: var(--cb-sec); }
/* ─── Back to marketplace ─── */
.or-back-wrap:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { padding: 4px 16px 24px; }
.or-back:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      height: 46px; border-radius: 999px;
      background: transparent;
      border: 1px solid var(--cb-border-hard);
      font: 700 13px/18px var(--cb-font-bold);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-text); text-decoration: none;
    }
.or-back:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: var(--cb-card); }
/* ─── Cloud handoff sheet (oversized) ─── */
.or-cloud:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      position: fixed; inset: 0; z-index: 95;
      pointer-events: none;
    }
.or-cloud[hidden]:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
.or-cloud.is-open:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { pointer-events: auto; }
.or-cloud-backdrop:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0);
      transition: background 220ms cubic-bezier(.32,.72,.24,1);
    }
.or-cloud.is-shown .or-cloud-backdrop:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: rgba(0,0,0,.5); }
.or-cloud-panel:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      margin: 0 auto; max-width: 480px;
      background: var(--cb-card); color: var(--cb-text);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(.32,.72,.24,1);
      box-shadow: 0 -10px 32px rgba(0,0,0,.25);
      max-height: 88vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-bottom: 22px;
    }
.or-cloud.is-shown .or-cloud-panel:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { transform: translateY(0); }
.or-cloud-handle:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      width: 36px; height: 4px; border-radius: 2px;
      background: var(--cb-border-hard);
      margin: 8px auto 6px;
    }
.or-cloud-head:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { padding: 6px 18px 4px; display: flex; align-items: flex-start; gap: 10px; }
.or-cloud-head-body:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { flex: 1; min-width: 0; }
.or-cloud-title:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { font: 600 16px/1.25 var(--cb-font-semibold); color: var(--cb-text); margin: 0; }
.or-cloud-sub:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { margin: 4px 0 0; font: 400 13px/20px var(--cb-font-regular); color: var(--cb-sec); }
.or-cloud-close:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      width: 32px; height: 32px; border-radius: 999px;
      background: transparent; border: none; color: var(--cb-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; flex: none;
    }
.or-cloud-options:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.or-cloud-opt:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; min-height: 60px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      border-radius: 8px;
      text-align: left; cursor: pointer; width: 100%;
      color: inherit;
    }
:root:not([data-theme="light"]) .or-cloud-opt:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #1a1f2c; border-color: rgba(255,255,255,.06); }
.or-cloud-opt:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: var(--cb-card); }
:root:not([data-theme="light"]) .or-cloud-opt:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #232a3a; }
.or-cloud-opt-icon:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      width: 36px; height: 36px; border-radius: 6px;
      background: var(--cb-card);
      display: inline-flex; align-items: center; justify-content: center; flex: none;
    }
:root:not([data-theme="light"]) .or-cloud-opt-icon:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: #2a3144; }
.or-cloud-opt-body:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { flex: 1; min-width: 0; }
.or-cloud-opt-label-row:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: flex; align-items: center; gap: 8px; }
.or-cloud-opt-label:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { font: 600 13px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.or-cloud-opt-badge:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      font: 700 9px/1 var(--cb-font-bold);
      letter-spacing: 1px; text-transform: uppercase;
      color: #7bc178;
      background: #f4faf3;
      border: 1px solid #b0daae;
      border-radius: 999px; padding: 3px 6px;
    }
:root:not([data-theme="light"]) .or-cloud-opt-badge:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: rgba(123,193,120,.12); border-color: rgba(123,193,120,.35); }
.or-cloud-opt-sub:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: block; margin-top: 3px;
      font: 400 13px/18px var(--cb-font-regular); color: var(--cb-sec); }
.or-cloud-foot:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      padding: 10px 18px 4px;
      font: 400 13px/18px var(--cb-font-regular);
      color: var(--cb-muted); text-align: center;
    }
.or-cloud-foot a:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color:var(--cb-link-text,var(--cb-link)); cursor: pointer; text-decoration: none; }
.or-cloud-foot a:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { text-decoration: underline; }
.or-cloud-sent:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { padding: 14px 18px 6px; }
.or-cloud-sent-disc:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      width: 48px; height: 48px; border-radius: 50%;
      background: #f4faf3; border: 1px solid #b0daae;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 10px; color: #7bc178;
    }
:root:not([data-theme="light"]) .or-cloud-sent-disc:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: rgba(123,193,120,.12); border-color: rgba(123,193,120,.35); }
.or-cloud-sent-title:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { font: 600 16px/1.25 var(--cb-font-semibold); color: var(--cb-text); margin: 0; }
.or-cloud-sent-sub:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { margin: 4px 0 0; font: 400 13px/20px var(--cb-font-regular); color: var(--cb-sec); }
.or-cloud-sent-cta:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      margin-top: 16px; width: 100%; height: 46px;
      background: #7bc178; color: #fff;
      border: none; border-radius: 4px;
      font: 700 12px/1 var(--cb-font-bold);
      letter-spacing: 1.6px; text-transform: uppercase;
      cursor: pointer;
    }
.or-cloud[data-stage="pick"] .or-cloud-sent:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
.or-cloud[data-stage="sent"] .or-cloud-pick:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: none; }
/* ─── Dev-only scenario switcher (bottom-left, mirrors site.js reload btn).
         DEPLOY: Strip this block - backend renders one scenario per real
         order, not a switcher. ─── */
.or-devswitch:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      position: fixed; left: 14px; bottom: 70px; z-index: 80;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      box-shadow: 0 6px 22px rgba(20,23,33,.12);
      padding: 6px;
      display: flex; gap: 4px; flex-wrap: wrap;
      max-width: 260px;
    }
:root:not([data-theme="light"]) .or-devswitch:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { box-shadow: 0 6px 22px rgba(0,0,0,.4); }
.or-devswitch-btn:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: transparent; border: none;
      padding: 6px 9px; border-radius: 6px;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: .6px; text-transform: uppercase;
      color: var(--cb-sec); cursor: pointer;
    }
.or-devswitch-btn:hover:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { background: var(--cb-bg); color: var(--cb-text); }
.or-devswitch-btn.is-active:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) {
      background: var(--cb-link); color: #fff;
    }
/* r25 B4: a locked receipt's way in. The note's sign-in link, and the shared claim card's two links. */
.or-locked-note a:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: var(--cb-link-text, var(--cb-link)); font-weight: 600; text-decoration: underline; }
.or-claim-shared-actions:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.or-claim-shared-actions a.or-claim-submit:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0 24px; text-decoration: none; }
.or-claim-shared-alt:where(body[data-cb-page-css~="orders-index"],body[data-cb-page-css~="orders-index"] *,:has(>body[data-cb-page-css~="orders-index"])) { color: var(--cb-link-text, var(--cb-link)); font: 600 14px/20px var(--cb-font-semibold); text-decoration: underline; }
/* Mirrors the structure of distribution-agreement.html. Classes
       are reused with the same `.la-*` (legal-agreement) namespace
       so a future shared extraction is one move. */
.la-page:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { padding: 28px 16px 64px; background: var(--cb-bg); }
.la-eyebrow:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2.4px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 14px; }
.la-h1:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 0; font: 300 38px/1.05 var(--cb-font-light); color: var(--cb-text); letter-spacing: -.5px; text-wrap: balance; }
.la-lede:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 14px 0 0; font: 400 15px/24px var(--cb-font-regular); color: var(--cb-sec); text-wrap: pretty; }
.la-lede b:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { color: var(--cb-text); font-weight: 600; }
.la-lede a:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), .la-body a:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), .la-tldr a:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), .la-card a:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), .la-list a:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none; border-bottom: 1px solid rgba(64,179,222,.32);
    }
.la-revstamp:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 18px; padding: 6px 12px 6px 10px;
      background: var(--cb-chip-bg); border: 1px solid var(--cb-border);
      border-radius: 999px;
      font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.la-revstamp .dot:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { width: 6px; height: 6px; border-radius: 50%; background: #FDC64E; }
.la-revstamp b:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { color: var(--cb-text); font-weight: 600; }
.la-tldr:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      margin-top: 28px; padding: 20px 18px 16px;
      background: var(--cb-card); border: 1px solid var(--cb-border);
      border-radius: 12px;
      box-shadow: 0 1px 0 rgba(20,23,33,.02), 0 6px 20px rgba(20,23,33,.04);
    }
.la-tldr-pill:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: rgba(123,193,120,.14); border-radius: 999px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: #2f7a53; margin-bottom: 14px;
    }
.la-tldr-title:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font: 600 17px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.la-tldr-sub:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 4px 0 14px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted); }
.la-tldr ul:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.la-tldr li:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      display: grid; grid-template-columns: 22px 1fr; column-gap: 12px;
      font: 400 14px/21px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty;
    }
.la-tldr li b:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { color: var(--cb-text); font-weight: 600; }
.la-tldr-mark:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(64,179,222,.12); color: #1d6f8e;
      display: inline-flex; align-items: center; justify-content: center;
    }
.la-tldr li.la-tldr-yes .la-tldr-mark:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { background: rgba(123,193,120,.16); color: #2f7a53; }
.la-tldr li.la-tldr-no  .la-tldr-mark:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { background: rgba(236,77,77,.10); color: #c14a3a; }
.la-jump:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      position: sticky; top: calc(var(--cb-chrome-h, 102px) + 8px); z-index: 4;
      margin-top: 24px;
      background: linear-gradient(to bottom, var(--cb-bg) 70%, transparent);
      padding: 6px 0 10px; pointer-events: none;
      transition: top 240ms cubic-bezier(.22,.61,.36,1);
    }
.la-jump > *:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { pointer-events: auto; }
.hm-fixed-chrome.is-hidden ~ main .la-jump:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { top: 8px; }
.la-jump-btn:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; width: 100%; height: 44px; padding: 0 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border-hard);
      border-radius: 999px; cursor: pointer;
      color: var(--cb-text); font: 600 13px/1 var(--cb-font-semibold);
      text-align: left;
      box-shadow: 0 8px 18px rgba(20,23,33,.08);
      transition: border-color 160ms ease;
    }
.la-jump-btn:hover:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { border-color: var(--cb-link); }
.la-jump-btn-lbl:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      display: inline-flex; align-items: center; gap: 10px; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.la-toc-host:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      position: fixed; top: 0; bottom: 0;
      left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 480px;
      z-index: 90; display: none; pointer-events: none;
    }
.la-toc-host[data-open]:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { display: block; }
.la-toc-host[data-open] > *:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { pointer-events: auto; }
.la-toc-scrim:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { position: absolute; inset: 0; background: rgba(20,23,33,0); transition: background-color 240ms cubic-bezier(.32,.72,.24,1); }
.la-toc-host[data-shown] .la-toc-scrim:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { background: rgba(20,23,33,.5); }
.la-toc-sheet:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(.32,.72,.24,1);
      max-height: 85vh; overflow-y: auto;
      background: var(--cb-card);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      box-shadow: 0 -16px 40px rgba(0,0,0,.25);
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
.la-toc-host[data-shown] .la-toc-sheet:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { transform: translateY(0); }
.la-toc-handle:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { display: flex; justify-content: center; padding: 10px 0 6px; }
.la-toc-handle span:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { width: 40px; height: 4px; border-radius: 2px; background: var(--cb-border-hard); }
.la-toc-head:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      padding: 6px 16px 12px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--cb-border);
    }
.la-toc-head h2:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 4px 0 0; font: 600 18px/22px var(--cb-font-semibold); color: var(--cb-text); }
.la-toc-eyebrow:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font: 400 10px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted); }
.la-toc-close:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { width: 36px; height: 36px; border: none; background: transparent; color: var(--cb-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.la-toc-nav:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { padding: 6px 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.la-toc-nav a:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 10px; border-radius: 8px;
      text-decoration: none; color: var(--cb-text);
      transition: background-color 160ms ease;
    }
.la-toc-nav a:hover:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { background: var(--cb-chip-bg); }
.la-toc-nav a[aria-current="true"]:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { background: var(--cb-chip-active); color:var(--cb-link-text,var(--cb-link)); }
.la-toc-num:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { flex: 0 0 28px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: 1.2px; font-variant-numeric: tabular-nums; }
.la-toc-nav a[aria-current="true"] .la-toc-num:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { color:var(--cb-link-text,var(--cb-link)); }
.la-toc-lbl:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { flex: 1; min-width: 0; font: 500 14px/19px var(--cb-font-regular); }
.la-toc-nav a[aria-current="true"] .la-toc-lbl:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font-weight: 600; }
.la-body:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      margin-top: 14px; background: var(--cb-panel);
      border: 1px solid var(--cb-border); border-radius: 12px;
      padding: 6px 16px 24px;
    }
.la-section:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { padding: 22px 0 4px; border-bottom: 1px dashed var(--cb-border); }
.la-section:last-of-type:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { border-bottom: 0; }
.la-section-head:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.la-section-num:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      min-width: 28px;
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: 1.6px; font-variant-numeric: tabular-nums;
    }
.la-section-h:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      margin: 0;
      font: 600 19px/26px var(--cb-font-semibold);
      color: var(--cb-text); letter-spacing: -.1px;
      scroll-margin-top: calc(var(--cb-chrome-h, 102px) + 56px);
    }
.la-section p:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 0 0 12px; padding-left: 40px; font: 400 14.5px/23px var(--cb-font-regular); color: var(--cb-text); text-wrap: pretty; }
.la-section p b:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font-weight: 600; }
.la-section p.la-allcaps:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font: 600 12.5px/19px var(--cb-font-semibold); letter-spacing: .15px; color: var(--cb-sec); }
.la-sub:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 16px 0 8px 40px !important; font: 600 13.5px/20px var(--cb-font-semibold) !important; color: var(--cb-text) !important; letter-spacing: .1px; }
.la-list:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 0 0 12px; padding: 0 0 0 40px; list-style: none; }
.la-list li:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      position: relative; padding: 0 0 10px 18px;
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-text); text-wrap: pretty;
    }
.la-list li:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"]))::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--cb-muted); }
.la-promise:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      margin: 4px 0 14px 40px !important; padding: 12px 14px 10px !important;
      background: rgba(64,179,222,.10); border-left: 3px solid #40b3de;
      border-radius: 6px;
      font: 500 13.5px/21px var(--cb-font-semibold) !important;
      color: #1d6f8e !important;
    }
:root:not([data-theme="light"]) .la-promise:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { color: #9ddef3 !important; }
.la-card:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      margin: 6px 0 6px 40px; padding: 14px 14px 12px;
      background: var(--cb-chip-bg); border: 1px solid var(--cb-border); border-radius: 10px;
    }
.la-card dl:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 0; display: grid; grid-template-columns: 110px 1fr; column-gap: 12px; row-gap: 6px; }
.la-card dt:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font: 500 12px/18px var(--cb-font-regular); color: var(--cb-muted); }
.la-card dd:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin: 0; font: 500 13.5px/18px var(--cb-font-regular); color: var(--cb-text); }
.la-end:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      margin: 24px 0 0; padding: 16px 16px 14px;
      background: var(--cb-chip-bg); border: 1px solid var(--cb-border); border-radius: 12px;
    }
.la-end-eyebrow:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 10px; }
.la-end-body:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font: 400 13.5px/20px var(--cb-font-regular); color: var(--cb-sec); }
.la-end-body b:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { color: var(--cb-text); font-weight: 600; }
.la-end-row:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.la-end-btn:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      flex: 1 1 0; min-width: 0;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      height: 42px; padding: 0 14px; border-radius: 999px;
      background: var(--cb-card); color: var(--cb-text);
      border: 1px solid var(--cb-border-hard);
      text-decoration: none;
      font: 500 12px/1 var(--cb-font-regular);
    }
.la-end-btn:hover:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
.la-end-btn--cta:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) {
      flex: 0 0 auto; padding: 0 18px;
      background: #40b3de; color: #fff; border: none;
      font-weight: 600; cursor: pointer;
    }
.la-end-btn--cta:hover:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { color: #fff; filter: brightness(1.06); }
body[data-cb-state="user"] .hm-hamburger-top:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), body[data-cb-state="seller"] .hm-hamburger-top:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), body[data-cb-state="admin"] .hm-hamburger-top:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { stroke-dasharray: 18 100; }
@media (min-width: 720px) {
      .la-page:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { padding: 40px 32px 80px; }
      .la-h1:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font-size: 46px; }
      .la-body:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { padding: 6px 28px 32px; }
      .la-section p:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), .la-list:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), .la-sub:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { padding-left: 56px; }
      .la-section-h:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { font-size: 22px; line-height: 28px; }
      .la-promise:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])), .la-card:where(body[data-cb-page-css~="partner-agreement"],body[data-cb-page-css~="partner-agreement"] *,:has(>body[data-cb-page-css~="partner-agreement"])) { margin-left: 56px !important; }
    }
/* ─────────── Privacy-policy page styles ───────────
       Structurally identical to terms.html (chrome, jump pill,
       bottom-sheet TOC, cookie banner). Class names use a `.pp-*`
       prefix instead of `.tos-*` so the two files stay independent
       - a future shared extraction can collapse them. */
.pp-page:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { padding: 28px 16px 64px; background: var(--cb-bg); }
.pp-eyebrow:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 2.4px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 14px;
    }
.pp-h1:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 0;
      font: 300 38px/1.05 var(--cb-font-light);
      color: var(--cb-text); letter-spacing: -.5px;
    }
.pp-lede:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 14px 0 0;
      font: 400 15px/24px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty;
    }
.pp-lede b:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { color: var(--cb-text); font-weight: 600; }
.pp-lede a:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-body a:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-tldr a:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-card a:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-list a:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
      border-bottom: 1px solid rgba(64,179,222,.32);
    }
.pp-lede a:hover:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { border-bottom-color: var(--cb-link); }
.pp-revstamp:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 18px; padding: 6px 12px 6px 10px;
      background: var(--cb-chip-bg); border: 1px solid var(--cb-border);
      border-radius: 999px;
      font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.pp-revstamp .dot:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { width: 6px; height: 6px; border-radius: 50%; background: #FDC64E; }
.pp-revstamp b:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { color: var(--cb-text); font-weight: 600; }
/* ─── TL;DR card ─── */
.pp-tldr:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin-top: 28px; padding: 20px 18px 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      box-shadow: 0 1px 0 rgba(20,23,33,.02), 0 6px 20px rgba(20,23,33,.04);
    }
.pp-tldr-pill:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: rgba(123,193,120,.14);
      border-radius: 999px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: #2f7a53;
      margin-bottom: 14px;
    }
.pp-tldr-title:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 600 17px/1.2 var(--cb-font-semibold);
      color: var(--cb-text);
    }
.pp-tldr-sub:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 4px 0 14px;
      font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted);
    }
.pp-tldr ul:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pp-tldr li:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: grid; grid-template-columns: 22px 1fr; column-gap: 12px;
      font: 400 14px/21px var(--cb-font-regular);
      color: var(--cb-sec); text-wrap: pretty;
    }
.pp-tldr li b:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { color: var(--cb-text); font-weight: 600; }
.pp-tldr-mark:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(64,179,222,.12); color: #1d6f8e;
      display: inline-flex; align-items: center; justify-content: center;
    }
.pp-tldr li.pp-tldr-no .pp-tldr-mark:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      background: rgba(236,77,77,.10); color: #c14a3a;
    }
.pp-tldr li.pp-tldr-yes .pp-tldr-mark:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      background: rgba(123,193,120,.16); color: #2f7a53;
    }
.pp-tldr-foot:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid var(--cb-border);
      font: 400 12px/18px var(--cb-font-regular); color: var(--cb-muted);
    }
/* ─── Contact tile ─── */
.pp-contact:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: flex; align-items: center; gap: 12px;
      margin-top: 18px; padding: 12px 14px;
      background: rgba(64,179,222,.08);
      border: 1px solid rgba(64,179,222,.22);
      border-radius: 10px;
      text-decoration: none; color: #1d6f8e;
      transition: background-color 160ms ease;
    }
:root:not([data-theme="light"]) .pp-contact:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      background: rgba(64,179,222,.10);
      border-color: rgba(64,179,222,.32); color: #9ddef3;
    }
.pp-contact:hover:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { background: rgba(64,179,222,.14); border-bottom-color: rgba(64,179,222,.32); }
.pp-contact-icon:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
      background: #40b3de; color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
    }
.pp-contact-lbl:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase; color: var(--cb-muted);
    }
.pp-contact-mail:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin-top: 4px; font: 600 14px/1 var(--cb-font-semibold); }
.pp-contact-chev:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin-left: auto; flex: none; color: inherit; opacity: .7; }
/* ─── Sticky jump pill ─── */
.pp-jump:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      position: sticky; top: calc(var(--cb-chrome-h, 102px) + 8px); z-index: 4;
      margin-top: 24px;
      background: linear-gradient(to bottom, var(--cb-bg) 70%, transparent);
      padding: 6px 0 10px; pointer-events: none;
      transition: top 240ms cubic-bezier(.22,.61,.36,1);
    }
.pp-jump > *:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { pointer-events: auto; }
/* When the chrome auto-hides on scroll-down, the pill rises with it so
       it stays glued to the top of the visible viewport instead of leaving
       a 100-ish-px dead band above itself. Matches the chrome's transition. */
.hm-fixed-chrome.is-hidden ~ main .pp-jump:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { top: 8px; }
.pp-jump-btn:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; width: 100%; height: 44px; padding: 0 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border-hard);
      border-radius: 999px; cursor: pointer;
      color: var(--cb-text); font: 600 13px/1 var(--cb-font-semibold);
      text-align: left;
      box-shadow: 0 8px 18px rgba(20,23,33,.08);
      transition: border-color 160ms ease;
    }
.pp-jump-btn:hover:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { border-color: var(--cb-link); }
.pp-jump-btn-lbl:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: inline-flex; align-items: center; gap: 10px; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
/* TOC sheet (identical structure to terms.html) */
.pp-toc-host:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      position: fixed; top: 0; bottom: 0;
      left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 480px;
      z-index: 90; display: none; pointer-events: none;
    }
.pp-toc-host[data-open]:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { display: block; }
.pp-toc-host[data-open] > *:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { pointer-events: auto; }
.pp-toc-scrim:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      position: absolute; inset: 0; background: rgba(20,23,33,0);
      transition: background-color 240ms cubic-bezier(.32,.72,.24,1);
    }
.pp-toc-host[data-shown] .pp-toc-scrim:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { background: rgba(20,23,33,.5); }
.pp-toc-sheet:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(.32,.72,.24,1);
      max-height: 85vh; overflow-y: auto;
      background: var(--cb-card);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      box-shadow: 0 -16px 40px rgba(0,0,0,.25);
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
.pp-toc-host[data-shown] .pp-toc-sheet:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { transform: translateY(0); }
.pp-toc-handle:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { display: flex; justify-content: center; padding: 10px 0 6px; }
.pp-toc-handle span:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { width: 40px; height: 4px; border-radius: 2px; background: var(--cb-border-hard); }
.pp-toc-head:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      padding: 6px 16px 12px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--cb-border);
    }
.pp-toc-head h2:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin: 4px 0 0; font: 600 18px/22px var(--cb-font-semibold); color: var(--cb-text); }
.pp-toc-eyebrow:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 400 10px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted);
    }
.pp-toc-close:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      width: 36px; height: 36px; border: none; background: transparent;
      color: var(--cb-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
.pp-toc-nav:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { padding: 6px 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.pp-toc-nav a:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 10px; border-radius: 8px;
      text-decoration: none; color: var(--cb-text);
      transition: background-color 160ms ease;
    }
.pp-toc-nav a:hover:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { background: var(--cb-chip-bg); }
.pp-toc-nav a[aria-current="true"]:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { background: var(--cb-chip-active); color:var(--cb-link-text,var(--cb-link)); }
.pp-toc-num:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      flex: 0 0 28px; font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: 1.2px; font-variant-numeric: tabular-nums;
    }
.pp-toc-nav a[aria-current="true"] .pp-toc-num:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { color:var(--cb-link-text,var(--cb-link)); }
.pp-toc-lbl:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { flex: 1; min-width: 0; font: 500 14px/19px var(--cb-font-regular); }
.pp-toc-nav a[aria-current="true"] .pp-toc-lbl:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { font-weight: 600; }
/* ─── Body sections ─── */
.pp-body:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin-top: 14px;
      background: var(--cb-panel);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      padding: 6px 16px 24px;
    }
.pp-section:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      padding: 22px 0 4px;
      border-bottom: 1px dashed var(--cb-border);
    }
.pp-section:last-of-type:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { border-bottom: 0; }
.pp-section-head:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
    }
.pp-section-num:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      min-width: 28px;
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: 1.6px;
      font-variant-numeric: tabular-nums;
    }
.pp-section-h:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 0;
      font: 600 19px/26px var(--cb-font-semibold);
      color: var(--cb-text); letter-spacing: -.1px;
      scroll-margin-top: calc(var(--cb-chrome-h, 102px) + 56px);
    }
.pp-section p:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 0 0 12px; padding-left: 40px;
      font: 400 14.5px/23px var(--cb-font-regular);
      color: var(--cb-text); text-wrap: pretty;
    }
.pp-lead:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 6px 0 10px !important; padding-left: 40px;
      font: 600 13.5px/20px var(--cb-font-semibold) !important;
      color: var(--cb-text) !important;
    }
.pp-list:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 0 0 12px; padding: 0 0 0 40px;
      list-style: none;
    }
.pp-list li:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      position: relative; padding: 0 0 10px 18px;
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-text); text-wrap: pretty;
    }
.pp-list li:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"]))::before {
      content: ""; position: absolute; left: 0; top: 10px;
      width: 5px; height: 5px; border-radius: 50%; background: var(--cb-muted);
    }
/* Brand-promise callout (green) - for never-sell / never-train-AI lines */
.pp-promise:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 4px 0 14px 40px !important; padding: 12px 14px 10px !important;
      background: rgba(123,193,120,.10);
      border-left: 3px solid #7bc178;
      border-radius: 6px;
      font: 500 13.5px/21px var(--cb-font-semibold) !important;
      color: #1f5d3a !important;
    }
:root:not([data-theme="light"]) .pp-promise:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { color: #a8d8a4 !important; }
/* Category cards - one per CCPA category we collect */
.pp-cats:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin: 4px 0 8px 40px; display: grid; gap: 10px; }
.pp-cat:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      padding: 14px 14px 12px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
    }
.pp-cat-h:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 8px;
    }
.pp-cat-letter:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      flex: 0 0 26px; width: 26px; height: 26px;
      background: var(--cb-chip-bg); border-radius: 6px;
      display: inline-flex; align-items: center; justify-content: center;
      font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-sec);
    }
.pp-cat-title:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 600 14px/1 var(--cb-font-semibold); color: var(--cb-text);
    }
.pp-cat dl:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 0;
      display: grid; grid-template-columns: 84px 1fr;
      column-gap: 12px; row-gap: 6px;
    }
.pp-cat dt:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 400 11px/16px var(--cb-font-regular); color: var(--cb-muted);
      letter-spacing: 1px; text-transform: uppercase;
    }
.pp-cat dd:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 0; font: 400 13px/18px var(--cb-font-regular); color: var(--cb-text);
    }
.pp-cat-tag:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin-left: auto; padding: 3px 8px; border-radius: 999px;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: .8px; text-transform: uppercase;
    }
.pp-cat-tag--no:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      background: rgba(236,77,77,.10); color: #c14a3a;
    }
/* Sub-processors table */
.pp-procs:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 4px 0 12px 40px;
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      overflow: hidden;
    }
.pp-proc-row:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: grid;
      grid-template-columns: 1.1fr 1.6fr .7fr;
      column-gap: 14px;
      padding: 12px 14px;
      align-items: start;
      border-top: 1px solid var(--cb-border);
    }
.pp-proc-row:first-child:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { border-top: 0; background: var(--cb-chip-bg); }
.pp-proc-row:first-child > div:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.pp-proc-name:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 600 13.5px/19px var(--cb-font-semibold); color: var(--cb-text);
    }
.pp-proc-name a:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
      border-bottom: 1px solid rgba(64,179,222,.32);
    }
.pp-proc-purpose:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 400 12.5px/18px var(--cb-font-regular); color: var(--cb-sec);
    }
.pp-proc-loc:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 500 11px/16px var(--cb-font-regular); color: var(--cb-muted);
      letter-spacing: .3px;
    }
/* Retention table - same row treatment as sub-processors */
.pp-retention:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 4px 0 12px 40px;
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      overflow: hidden;
    }
.pp-retention-row:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.4fr;
      column-gap: 14px;
      padding: 12px 14px;
      align-items: start;
      border-top: 1px solid var(--cb-border);
    }
.pp-retention-row:first-child:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      background: var(--cb-chip-bg);
      border-top: 0;
    }
.pp-retention-row:first-child > div:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.pp-retention-what:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 600 13px/19px var(--cb-font-semibold); color: var(--cb-text);
    }
.pp-retention-how-long:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 600 13px/19px var(--cb-font-semibold);
      color:var(--cb-link-text,var(--cb-link)); font-variant-numeric: tabular-nums;
    }
.pp-retention-why:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 400 12.5px/18px var(--cb-font-regular); color: var(--cb-sec);
    }
/* Generic info card (used for contact box at bottom) */
.pp-card:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 6px 0 6px 40px; padding: 14px 14px 12px;
      background: var(--cb-chip-bg);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
    }
.pp-card dl:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin: 0; display: grid; grid-template-columns: 88px 1fr; column-gap: 12px; row-gap: 6px; }
.pp-card dt:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { font: 500 12px/18px var(--cb-font-regular); color: var(--cb-muted); }
.pp-card dd:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin: 0; font: 500 13.5px/18px var(--cb-font-regular); color: var(--cb-text); }
/* End-of-policy footer block */
.pp-end:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      margin: 24px 0 0; padding: 16px 16px 14px;
      background: var(--cb-chip-bg);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.pp-end-eyebrow:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 10px;
    }
.pp-end-body:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { font: 400 13.5px/20px var(--cb-font-regular); color: var(--cb-sec); }
.pp-end-body b:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { color: var(--cb-text); font-weight: 600; }
.pp-end-row:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pp-end-btn:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      flex: 1 1 0; min-width: 0;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      height: 42px; padding: 0 14px; border-radius: 999px;
      background: var(--cb-card); color: var(--cb-text);
      border: 1px solid var(--cb-border-hard);
      text-decoration: none;
      font: 500 12px/1 var(--cb-font-regular);
    }
.pp-end-btn:hover:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
.pp-end-btn--cta:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      flex: 0 0 auto; padding: 0 18px;
      background: #40b3de; color: #fff; border: none;
      font-weight: 600; cursor: pointer;
    }
.pp-end-btn--cta:hover:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { color: #fff; filter: brightness(1.06); }
/* Cookie banner (same as terms.html - second-chance disclosure) */
.pp-cookie:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      position: fixed; left: 12px; right: 12px; bottom: 12px;
      max-width: 460px; margin-left: auto; margin-right: auto;
      padding: 14px 14px 12px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border-hard);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(20,23,33,.18);
      z-index: 80;
      display: grid;
      grid-template-columns: 36px 1fr auto;
      column-gap: 12px; align-items: center;
      transform: translateY(120%);
      transition: transform 320ms cubic-bezier(.32,.72,.24,1);
    }
.pp-cookie[data-shown]:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { transform: translateY(0); }
.pp-cookie-icon:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      width: 36px; height: 36px; border-radius: 50%;
      background: rgba(253,198,78,.18); color: #8a6d1f;
      display: inline-flex; align-items: center; justify-content: center;
    }
.pp-cookie-body:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { font: 400 12.5px/18px var(--cb-font-regular); color: var(--cb-sec); }
.pp-cookie-body b:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { color: var(--cb-text); font-weight: 600; }
.pp-cookie-body a:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
      border-bottom: 1px solid rgba(64,179,222,.32);
    }
.pp-cookie-ok:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) {
      /* Its own 36px, the icon's height, centred on the copy: stretched, it grew as tall as the copy did. */
      align-self: center;
      height: 36px;
      white-space: nowrap;
      padding: 0 14px;
      background: #40b3de; color: #fff;
      border: none; border-radius: 999px;
      font: 600 12px/1 var(--cb-font-semibold); cursor: pointer;
      transition: filter 160ms ease;
    }
.pp-cookie-ok:hover:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { filter: brightness(1.12); }
/* Hamburger top bar: full-length by default; clipped via dash pattern
       when the page state shows the notification dot, so the bar and dot
       don't visually collide. */
body[data-cb-state="user"] .hm-hamburger-top:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), body[data-cb-state="seller"] .hm-hamburger-top:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), body[data-cb-state="admin"] .hm-hamburger-top:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { stroke-dasharray: 18 100; }
@media (min-width: 720px) {
      .pp-page:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { padding: 40px 32px 80px; }
      .pp-h1:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { font-size: 46px; }
      .pp-body:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { padding: 6px 28px 32px; }
      .pp-section p:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-list:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-lead:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { padding-left: 56px; }
      .pp-section-h:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { font-size: 22px; line-height: 28px; }
      .pp-promise:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin-left: 56px !important; }
      .pp-cats:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-procs:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-retention:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])), .pp-card:where(body[data-cb-page-css~="privacy"],body[data-cb-page-css~="privacy"] *,:has(>body[data-cb-page-css~="privacy"])) { margin-left: 56px; }
    }
/* The desktop product page's own rules (v3 plan U14, KTD4, KD6).

   `production-desktop/p/<slug>/index.html` and `production-desktop/p/templates/index.html` style
   these families in a `<style>` block inside the page rather than in `assets/css/`, so U6's
   link-driven port could not see them (the case U9 recorded for `.dmp-*` and `.ms-modal-*`).
   Byte-identical in both of those pages. Copied verbatim from that block @ handoff 2f4fe50, in its
   own order, minus three things:

     - the `.pp-devswitch*` cluster, the handoff's own QA furniture ("DEPLOY: strip" in its
       comment), which `HANDOFF_DEV_CHROME_CSS` hides in the comparison harness. The app reaches the
       same states through the QA query parameters in docs/v3/checklists/product.md.
     - the three `.dpp-wrap .cb-comments*` rules, which U15 already ported into
       `v3/desktop/units/u15_comments.css` because they belong to that component. Duplicating them
       here would be two writers on one declaration.
     - nothing else. Every other declaration is the handoff's, character for character.

   Two invisible changes, both explained where they appear: the ownership/licensing gate keys off a
   body CLASS instead of a body data attribute (the v3 layouts expose `content_for :body_class` and
   no data-attribute hook, KTD18 gives the layouts to U7/U8), and `.pp-human`'s page override is
   written one class deeper so it survives the bundle order.

   The first half is shared with `v3/mobile/pages/product.css` (the desktop page reuses the mobile
   `pp-*` blocks; the handoff's own comment says so). The `dpp-*` half at the bottom is the desktop
   layer that places them. */

/* ─── Ownership-state gating ────────────────────────────────────
   Surfaces tagged with [data-pp-own-only="..."] only show when body's
   ownership state matches. Inverse: [data-pp-own-not="..."] hides when
   state matches. Same trick used for licensing variants.

   IMPORTANT - uses :not(...) to hide non-matching elements rather
   than `display: revert` on matching ones. revert reverts to the
   user-agent stylesheet (inline for <a>/<button>, block for <div>)
   which clobbers `display: inline-flex` on the buy-now CTA, the
   add-to-cart button, and the closed-state of .pp-license-menu.
   Documented as the canonical pattern in CLAUDE.md for
   data-cb-state-only.

   SUBSTITUTION (v3): the handoff writes the ancestor as
   `body[data-pp-own="none"]`; here it is `body.pp-own-none`. The v3 layouts render `<body>` and
   offer `content_for :body_class` and no data-attribute slot, so the state travels as a class.
   Element+class and element+attribute weigh the same (0,1,1), the ancestor is still `body`, and the
   markup keeps every `data-pp-own-only` / `data-pp-licensing-only` attribute the handoff writes, so
   the cascade and the rendered result are unchanged. `V3::ProductPage::Viewer#body_classes` is the one
   place that emits them. */
body.pp-own-none       [data-pp-own-only]:not([data-pp-own-only~="none"]):where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-own-basic      [data-pp-own-only]:not([data-pp-own-only~="basic"]):where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-own-commercial [data-pp-own-only]:not([data-pp-own-only~="commercial"]):where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { display: none !important; }

body.pp-own-none       [data-pp-own-not~="none"]:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-own-basic      [data-pp-own-not~="basic"]:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-own-commercial [data-pp-own-not~="commercial"]:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { display: none !important; }

/* "Preview as purchased" (`?view_as_purchased=true`): the seller, or an admin, sees the owned state
   without the buyer's own actions, which they cannot use. The server refuses their rating, and a tip,
   a gift, an upgrade or a message to the seller would be to themselves (v3-master, 2026-10-13).
   `Viewer#body_classes` writes the class for a preview only, never for a reader who bought. */
body.pp-preview-purchased .pp-rate:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-preview-purchased .pp-tip:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-preview-purchased .op-tip-disclosure:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-preview-purchased .pp-gift-cta:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-preview-purchased .pp-upgrade-cta:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-preview-purchased .op-contact:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { display: none !important; }

body.pp-lic-basic-only [data-pp-licensing-only]:not([data-pp-licensing-only~="basic-only"]):where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-lic-both       [data-pp-licensing-only]:not([data-pp-licensing-only~="both"]):where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { display: none !important; }

/* ─── PURCHASED stamp on the gallery (replaces the price stamp on
   owned states). Positioned bottom-left over the gallery frame.
   Matches the .pp-price-stamp slot from the JSX scaffold. */
.pp-purchased-stamp:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  position: absolute; left: 0; bottom: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 0 4px 4px 0;
  background: #7bc178; color: #fff;
  font: 700 13px/1 var(--cb-font-bold);
  letter-spacing: 1.4px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  pointer-events: none;
}
.pp-purchased-stamp svg:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { flex: none; }

/* ─── Owned-license summary card (used by both basic + commercial
   buy-block variants). Neutral card surface with a tinted-green disc -
   lets the green check do the affordance work without the whole
   container shouting. Mirrors the JSX scaffold. */
.pp-owned-card:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  margin-bottom: 14px;
}
.pp-owned-card-icon:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(123,193,120,.15); color: #7bc178;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.pp-owned-card-body:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { flex: 1; min-width: 0; }
.pp-owned-card-title:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  font: 600 13px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
}
.pp-owned-card-sub:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  margin-top: 2px;
  font: 400 12px/1.3 var(--cb-font-regular);
  color: var(--cb-muted);
}

/* Upgrade CTA - same shape as .pp-buy-now but bluer accent so it reads
   as "extend what you own" rather than "first purchase". */
.pp-upgrade-cta:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 56px;
  background: #40b3de; color: #fff;
  border: none; border-radius: 999px;
  font: 700 13px/1 var(--cb-font-bold);
  letter-spacing: 1.6px; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 12px rgba(64,179,222,.30);
}
.pp-upgrade-cta:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { background: #3aa2ca; color: #fff; text-decoration: none; }

/* Buy-as-a-gift secondary action (ghost, quieter than the primary). */
.pp-gift-cta:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px;
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--cb-border-hard);
  border-radius: 999px;
  font: 600 12px/1 var(--cb-font-semibold);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--cb-text); cursor: pointer; text-decoration: none;
}
.pp-gift-cta:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { background: var(--cb-bg); }

/* Tip block - preset chips, custom input + stepper, send button.
   Contained card (full border + padding) matching the original design,
   not just a top-divider section. */
.pp-tip:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  margin-top: 22px;
  padding: 18px 16px 16px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
}
.pp-tip-head:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { display: flex; align-items: center; gap: 8px; }
.pp-tip-icon:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { color: #7bc178; flex: none; }
.pp-tip-title:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  font: 600 14px/1.2 var(--cb-font-semibold); color: var(--cb-text);
}
.pp-tip-sub:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  margin-top: 4px;
  font: 400 12px/18px var(--cb-font-regular); color: var(--cb-muted);
  margin-bottom: 12px;
}
.pp-tip-presets:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.pp-tip-preset:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  flex: 1; min-width: 56px; height: 44px;
  background: transparent; color: var(--cb-text);
  border: 1px solid var(--cb-border-hard);
  border-radius: 6px; cursor: pointer;
  font: 600 13px/1 var(--cb-font-semibold);
}
.pp-tip-preset:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { background: var(--cb-bg); }
.pp-tip-preset.is-active:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  background: rgba(64,179,222,.10);
  border-color: var(--cb-link);
  color:var(--cb-link-text,var(--cb-link));
}
/* Custom amount uses the shared .cb-num-row stepper component. */
.pp-tip-send:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  margin-top: 12px; width: 100%; height: 56px;
  background: #7bc178; color: #fff;
  border: none; border-radius: 999px;
  font: 700 13px/1 var(--cb-font-bold);
  letter-spacing: 1.6px; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(123,193,120,.35);
}
.pp-tip-send:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { background: #6ab168; }

/* Download files button - sits inside the tip card under Send tip,
   owned-state CTA in link-blue outline so it doesn't compete with
   the green tip primary above it. Matches the JSX original. */
.pp-tip-download:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  margin-top: 10px; width: 100%; height: 46px;
  background: transparent;
  border: 1px solid var(--cb-link);
  border-radius: 999px;
  color:var(--cb-link-text,var(--cb-link));
  font: 600 12px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.pp-tip-download:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { background: rgba(64,179,222,.08); }

/* Sticky bar download CTA - owned-state variant of .pp-stickybar-cta. */
body.pp-own-basic .pp-stickybar-cta:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), body.pp-own-commercial .pp-stickybar-cta:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  background: var(--cb-link);
}

/* Page-local override: bump pp-human's top spacing so it doesn't crowd
   the tip-send pill. The shared style sets margin-top: 8px which is too
   tight when stacked under a 56px CTA pill.

   ORDER-PROOF: the class is written twice. `.pp-human` also carries a margin-top in
   `v3/mobile/core/04_product_page.css` (desktop: `v3/desktop/product.css`), which both bundles
   require AFTER `require_tree ./v3/<build>/pages`, so a rule of equal specificity here would lose
   to it. The doubled class matches exactly the same node and moves nothing else. */
.pp-human.pp-human:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { margin-top: 16px; }

/* Interactive "Rate this" row - only shows on owned states. */
.pp-rate:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: rgba(64,179,222,.08);
  border: 1px solid rgba(64,179,222,.30);
  border-radius: 8px;
}
/* The handoff writes this pair as `[data-theme="dark"] …`. The desktop build's default IS dark and
   keys it on `:not([data-theme="light"])` (KTD4, and U6's asset spec asserts the desktop bundle
   carries no `[data-theme="dark"]` at all, because such a rule is dead there). Same two
   declarations, same elements; the mobile file keeps the handoff's spelling, where light is the
   default. */
:root:not([data-theme="light"]) .pp-rate:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  background: rgba(64,179,222,.12);
  border-color: rgba(64,179,222,.30);
}
.pp-rate-label:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  flex: 1; min-width: 0;
  font: 600 13px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
}
.pp-rate-stars:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  display: inline-flex; gap: 2px;
  font-size: 22px; line-height: 1;
}
.pp-rate-star:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  background: transparent; border: none; padding: 2px 1px;
  cursor: pointer; color: var(--cb-border-hard);
  transition: color .08s ease, transform .08s ease;
  line-height: 1;
}
.pp-rate-star:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { transform: scale(1.08); }
.pp-rate-star.is-on:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { color: #f5a623; }
.pp-rate[data-state="done"]:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  background: rgba(123,193,120,.10);
  border-color: rgba(123,193,120,.40);
}
:root:not([data-theme="light"]) .pp-rate[data-state="done"]:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  background: rgba(123,193,120,.14);
  border-color: rgba(123,193,120,.40);
}
.pp-rate[data-state="done"] .pp-rate-label:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { color: #7bc178; }
/* Stars stay interactive in the done state - users can change
   their rating; we just keep the confirmed green skin. */
.pp-rate-saved:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  display: none; align-items: center; gap: 4px;
  margin-left: 6px;
  color: #7bc178; font-weight: 600;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: .4px;
}
.pp-rate[data-state="done"] .pp-rate-saved.is-flash:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { display: inline-flex; }

/* ── desktop layout (dpp-). Mobile pp-* blocks are reused as-is; these rules only place them. ── */
.dpp-wrap:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {max-width:1200px;margin:0 auto;padding:24px var(--gut) 8px}
.dpp-wrap .pp-seller:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .pp-gallery:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .pp-header:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .pp-buy:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .pp-desc:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .pp-social:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .pp-files:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .pp-tabs-wrap:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .pp-tabs:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .dpp-wrap .cb-comments:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {padding-left:0;padding-right:0;background:transparent}
.dpp-wrap .pp-buy:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"]))::after {display:none}
/* seller bar - live: avatar · by X in Cat · software tags · Message / Follow */
.dpp-seller:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {display:flex;align-items:center;gap:18px;padding:0 0 18px}
.dpp-seller .pp-seller-avatar:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {width:52px;height:52px}
.dpp-seller-by:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {font:400 13px/20px var(--cb-font-regular);color:var(--cb-sec)}.dpp-seller-by a:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {font-weight:600}
.dpp-seller-tags:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {flex:0 1 auto;min-width:0;max-width:560px;text-align:left;font:400 13px/20px var(--cb-font-regular);color:var(--cb-sec);border-left:1px solid var(--cb-border);padding-left:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpp-seller-actions:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {display:flex;gap:10px;margin-left:auto}
.dpp-pill:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 20px;border-radius:999px;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;color:#fff;background:var(--cb-link)}
.dpp-pill.is-ghost:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {background:transparent;border:1px solid var(--cb-link);color:var(--cb-link-text,var(--cb-link))}
.dpp-pill svg:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* gallery - full column width; thumbs 4-up like live */
.dpp-wrap .pp-gallery:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {padding-top:0}
.dpp-wrap .pp-gallery-frame:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {border-radius:14px}
.dpp-wrap .pp-thumbs:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {margin-top:14px}
.dpp-wrap .pp-thumbs-rail:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {gap:14px}
.dpp-wrap .pp-thumb:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {width:calc((100% - 42px) / 4);height:auto;aspect-ratio:16/10;border-radius:10px;opacity:.7;transition:opacity 160ms}
.dpp-wrap .pp-thumb:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {opacity:1}
.dpp-wrap .pp-thumbs-fade:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {display:none}
.dpp-price-stamp:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {position:absolute;right:0;bottom:0;z-index:2;background:rgba(14,19,32,.92);color:#fff;font:700 22px/1 var(--cb-font-bold);padding:16px 22px;border-radius:14px 0 0 0;pointer-events:none}
/* two columns */
.dpp-cols:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 56px;align-items:start;margin-top:30px}
.dpp-side:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {position:sticky;top:calc(var(--cb-chrome-h,73px) + 20px)}
.dpp-wrap .pp-header:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {padding-top:0}
.dpp-wrap .pp-header h1:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {font:600 28px/36px var(--cb-font-semibold);letter-spacing:-.3px}
.dpp-wrap .pp-buy:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {padding-top:0}
.dpp-wrap .pp-buy-now:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {margin-top:14px}
.dpp-wrap .pp-tabs-wrap:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {border-top:0;margin-top:8px}
.dpp-wrap .pp-tab[aria-selected="true"]:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"]))::after {left:0;right:0}
/* r38 A14: the separator has empty alternative text, so it stays out of the tab's name ("| Course content"); the plain declaration first is the fallback. */
.dpp-wrap .pp-tabs:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {gap:0}.dpp-wrap .pp-tab:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {font:600 13px/1 var(--cb-font-bold);letter-spacing:1.6px;text-transform:uppercase;padding:0 18px;position:relative}.dpp-wrap .pp-tab:first-child:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {padding-left:0}.dpp-wrap .pp-tab+.pp-tab:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"]))::before {content:'|';content:'|' / '';position:absolute;left:-3px;top:50%;transform:translateY(-50%);color:var(--cb-border-hard);font-weight:400;letter-spacing:0}
.dpp-wrap .pp-desc:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {padding-top:22px}
.dpp-wrap .pp-desc-body:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {max-height:420px}
.dpp-wrap .pp-desc-toggle:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {width:auto;padding:0 22px;margin-top:6px}
/* `.dpp-wrap .cb-comments-pager`, `.dpp-wrap .cb-comments` (padding/background) and
   `.dpp-wrap .cb-comments` (margin-top) sit here in the handoff's block; U15 ported them into
   v3/desktop/units/u15_comments.css, which the bundle requires after this file. */
.dpp-wrap .pp-files:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {border-top:1px solid var(--cb-border);margin-top:24px;padding-top:22px}
.dpp-wrap .pp-social:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {margin-top:18px;padding-bottom:0}
.dpp-wrap .pp-social-btn:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {height:46px}
.dpp-report:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {display:flex;justify-content:flex-end;margin-top:14px}
.dpp-rail:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {padding-top:36px}
@media(max-width:1100px){.dpp-cols:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {grid-template-columns:1fr}.dpp-side:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {position:static;max-width:520px}}
@media(max-width:800px){.dpp-seller:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {flex-wrap:wrap}.dpp-seller-tags:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {border:0;padding:0;flex-basis:100%;white-space:normal}.dpp-wrap .pp-thumb:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {width:calc((100% - 14px) / 2)}}

/* ─── Adult gate over the gallery (v3 plan U14, R17; pending decision
   U14-product-adult-gate). Not in the handoff, which draws an adult product's cover unblurred and
   marks it only with the `18+` badge beside the rating. The app blurs it today for anyone who has
   not opted in, and Appendix C lists that as a live buyer protection, so the gate is built from
   this page's own vocabulary: the card gate U9 drew, in the red the `.dpt-nsfw` badge uses. Three
   rules; a decline deletes them and one template. */
.pp-adult:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(14,19,32,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* The rail is part of the same cover: a gate over the frame alone would leave six sharp
   thumbnails of the images it is hiding. Lifted with the gate, by the class the controller adds. */
.pp-gallery:has(.pp-adult):not(.is-adult-revealed) .pp-thumb:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { filter: blur(8px); }
.pp-adult-label:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 5px; background: #e74c3c; color: #fff;
  font: 700 12px/1 var(--cb-font-bold); letter-spacing: .6px;
}
.pp-adult-reveal:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {
  height: 34px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.7); color: #fff;
  font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase;
}
.pp-adult-reveal:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { background: rgba(255,255,255,.12); }
/* QA item 127: the line under Show that points at Settings (signed-in, not opted in). */
.pp-adult-settings:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { max-width: 88%; color: rgba(255,255,255,.88); font: 500 12px/1.4 var(--cb-font-regular); text-align: center; text-decoration: none; }
.pp-adult-settings span:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { text-decoration: underline; }
.pp-adult-settings:hover:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .pp-adult-settings:focus-visible:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) { color: #fff; }
/* A sold-out product (QA item 205): Buy now's place, greyed, not a control. */
.pp-buy-now.is-sold-out:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])), .pp-stickybar-cta.is-sold-out:where(body[data-cb-page-css~="product"],body[data-cb-page-css~="product"] *,:has(>body[data-cb-page-css~="product"])) {background:#c9cfd6;color:#5a6478;box-shadow:none;cursor:not-allowed;pointer-events:none;filter:none;transform:none}
/* Edit products (ep-*): the inline <style> of the handoff's production-desktop/store/products/edit/index.html,
   ported verbatim (v3 plan U32, KD6, KTD4). The handoff writes the mobile block first and the desktop
   layout layer after it, byte for byte, and so does this file; the mobile build's copy is
   v3/mobile/pages/products-edit.css. Page-scoped: v3_page_css 'products-edit' marks the body and
   lib/v3/page_css.rb scopes every rule here to it.
   ORDER-PROOF (one rule): the handoff links assets/css/products-edit.css and puts this block after it,
   but the v3 entrypoint requires `require_tree ./v3/desktop/pages` *before* `require
   v3/desktop/products-edit` (U10's finding). The one selector both files carry is `.cb-pager`, so it is
   written one class deeper here (`.ep-pager-wrap .cb-pager`) and wins on specificity in either order.
   Nothing else in the two files overlaps. */
body.ep-body:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { background: var(--cb-bg); }
.ep-head:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: var(--cb-card);
border-bottom: 1px solid var(--cb-border);
padding: 20px 16px 18px;
display: flex; align-items: flex-start; gap: 12px;
}
.ep-h1:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
margin: 0;
font: 300 26px/1.1 var(--cb-font-light), Mulish, system-ui;
color: var(--cb-text); letter-spacing: -.2px;
}
.ep-sub:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
margin: 6px 0 0;
font: 400 13px/18px var(--cb-font-regular);
color: var(--cb-muted);
}
.ep-sub b:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { color: var(--cb-text); font-weight: 600; }
.ep-cancel:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: transparent; border: none; cursor: pointer; padding: 4px 0;
color: #ec4d4d;
font: 600 12px/1 var(--cb-font-regular);
letter-spacing: 1.6px; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 6px;
}
.ep-cancel svg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ep-filters:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { background: var(--cb-bg); border-bottom: 1px solid var(--cb-border); }
.ep-filters-head:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
background: transparent; border: none; cursor: pointer;
color: var(--cb-text); text-align: left;
font: inherit;
}
.ep-filters-head > svg:first-child:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 16px; height: 16px; flex-shrink: 0;
fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ep-filters-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
font: 500 12px/1 var(--cb-font-regular);
letter-spacing: 1.4px; text-transform: uppercase;
white-space: nowrap; flex-shrink: 0;
}
.ep-filters-summary:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
margin-left: auto; color: var(--cb-muted);
font: 400 12px/1 var(--cb-font-regular);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
.ep-filters-caret:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 16px; height: 16px; flex-shrink: 0;
fill: var(--cb-muted);
transition: transform .15s ease;
}
.ep-filters.is-open .ep-filters-caret:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { transform: rotate(180deg); }
.ep-filters-body:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
padding: 4px 16px 18px;
display: flex; flex-direction: column; gap: 16px;
}
.ep-filters-body[hidden]:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { display: none; }
.ep-section-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
font: 400 11px/1 var(--cb-font-regular);
letter-spacing: 1.6px; text-transform: uppercase;
color: var(--cb-muted);
}
.ep-section-head:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.ep-section-head-val:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
font: 500 12px/1 var(--cb-font-regular);
color: var(--cb-text);
font-variant-numeric: tabular-nums;
}
.ep-select-wrap:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { position: relative; }
.ep-select:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 100%; height: 44px; padding: 0 12px;
background: var(--cb-card);
border: 1px solid var(--cb-border); border-radius: 6px;
color: var(--cb-text);
font: 400 14px/1 var(--cb-font-regular);
display: inline-flex; align-items: center; justify-content: space-between;
cursor: pointer; outline: none; text-align: left;
}
.ep-select[aria-expanded="true"]:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { border-color: var(--cb-link); }
.ep-select svg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { fill: var(--cb-muted); width: 14px; height: 14px; flex-shrink: 0; }
.ep-select.is-narrow:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { padding: 0 10px; }
.ep-dropdown:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 6px;
box-shadow: 0 8px 24px rgba(20,23,33,.18);
overflow: hidden; max-height: 280px; overflow-y: auto;
}
.ep-dropdown[hidden]:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { display: none; }
.ep-opt:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 100%; padding: 12px 14px; border: none; background: transparent;
font: 400 14px/1 var(--cb-font-regular);
color: var(--cb-text); cursor: pointer; text-align: left;
}
.ep-opt:hover:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { background: var(--cb-bg); }
.ep-opt.is-active:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { background: var(--cb-bg); color:var(--cb-link-text,var(--cb-link)); }
.ep-section-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { margin-bottom: 8px; }
.ep-range:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: relative; height: 28px; padding: 12px 0;
touch-action: none;
}
.ep-range-track:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: absolute; left: 8px; right: 8px; top: 12px; height: 4px;
background: var(--cb-border); border-radius: 2px;
}
.ep-range-fill:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: absolute; top: 12px; height: 4px;
background: var(--cb-link); border-radius: 2px;
}
.ep-range-thumb:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: absolute; top: 4px; width: 20px; height: 20px;
background: var(--cb-link); border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(20,23,33,.25);
cursor: grab; touch-action: none;
}
.ep-bulk:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: var(--cb-card);
border: 1px solid var(--cb-border);
border-radius: 8px;
padding: 14px 14px 16px;
}
.ep-bulk-help:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
font: 400 12px/17px var(--cb-font-regular);
color: var(--cb-muted);
margin: 6px 0 14px;
}
.ep-bulk-row:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
display: flex; gap: 8px;
margin-top: 10px;
}
.ep-bulk-row .ep-select-wrap:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { flex: 1; }
.ep-bulk-row .ep-select-wrap.is-unit:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { flex: 0 0 78px; }
.ep-bulk-row .ep-select-wrap.is-unit.is-off:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { opacity: .4; pointer-events: none; }
.ep-bulk-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
flex: 1; min-width: 0; height: 44px; padding: 0 12px;
border: 1px solid var(--cb-border); border-radius: 6px;
background: var(--cb-card); color: var(--cb-text);
font: 500 15px/1 var(--cb-font-regular);
outline: none; box-sizing: border-box;
-moz-appearance: textfield;
}
.ep-bulk-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"]))::-webkit-inner-spin-button, .ep-bulk-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"]))::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ep-bulk-input:focus:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { border-color: var(--cb-link); }
.ep-bulk-apply:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
height: 44px; padding: 0 18px;
background: var(--cb-link); color: #fff;
border: none; border-radius: 6px;
font: 500 13px/1 var(--cb-font-regular); letter-spacing: .6px;
cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.ep-bulk-apply:hover:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { filter: brightness(1.05); }
.ep-selbar:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { background: var(--cb-bg); border-bottom: 1px solid var(--cb-border); }
.ep-selbar-row:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
}
.ep-selbar-toggle:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 4px;
background: transparent; border: none; cursor: pointer;
color: var(--cb-text);
font: inherit;
}
.ep-checkbox:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 22px; height: 22px; border-radius: 4px;
background: var(--cb-card);
border: 1.5px solid var(--cb-border);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ep-checkbox.is-some:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { background: var(--cb-link); border-color: var(--cb-link); }
.ep-checkbox.is-all:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { background: var(--cb-link); border-color: var(--cb-link); }
.ep-checkbox-mark:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
opacity: 0;
}
.ep-checkbox.is-all .ep-checkbox-mark:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { opacity: 1; }
.ep-checkbox-dash:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 10px; height: 2px; background: #fff; border-radius: 1px;
display: none;
}
.ep-checkbox.is-some:not(.is-all) .ep-checkbox-dash:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { display: inline-block; }
.ep-checkbox.is-some:not(.is-all) .ep-checkbox-mark:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { display: none; }
.ep-selbar-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
font: 500 13px/1 var(--cb-font-regular);
}
.ep-sort-wrap:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { margin-left: auto; position: relative; }
.ep-sort-btn:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: transparent; border: none; cursor: pointer;
color: var(--cb-muted);
font: 400 12px/1 var(--cb-font-regular);
letter-spacing: 1.4px; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 6px;
}
.ep-sort-btn svg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 12px; height: 12px; fill: currentColor;
transition: transform .15s;
}
.ep-sort-btn[aria-expanded="true"] svg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { transform: rotate(180deg); }
.ep-sort-dropdown:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
min-width: 220px;
background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 6px;
box-shadow: 0 8px 24px rgba(20,23,33,.18); overflow: hidden;
}
.ep-sort-dropdown[hidden]:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { display: none; }
.ep-cross-banner:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
padding: 10px 16px 12px;
border-top: 1px solid var(--cb-border);
display: flex; align-items: center; gap: 10px;
font: 400 12px/16px var(--cb-font-regular); color: var(--cb-muted);
}
.ep-cross-banner.is-all:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: rgba(64,179,222,.08);
}
.ep-cross-banner svg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--cb-link); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ep-cross-banner-msg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { flex: 1; color: var(--cb-text); }
.ep-cross-banner-msg b:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { font-weight: 600; }
.ep-cross-action:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: transparent; border: none; cursor: pointer;
color:var(--cb-link-text,var(--cb-link));
font: 600 12px/1 var(--cb-font-regular);
letter-spacing: .4px; white-space: nowrap;
}
.ep-card:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: var(--cb-card);
border-bottom: 1px solid var(--cb-border);
position: relative;
}
.ep-card-rail:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: #f5b400;
}
.ep-card-body:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
padding: 14px 16px;
display: flex; flex-direction: column; gap: 12px;
}
.ep-card-row1:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
display: flex; align-items: center; gap: 12px;
}
.ep-row-check:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 24px; height: 24px; padding: 0;
border: 1.5px solid var(--cb-border);
background: var(--cb-card);
border-radius: 4px; cursor: pointer; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.ep-row-check.is-on:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { background: var(--cb-link); border-color: var(--cb-link); }
.ep-row-check svg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
opacity: 0;
}
.ep-row-check.is-on svg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { opacity: 1; }
.ep-thumb:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 56px; height: 56px; flex-shrink: 0;
border-radius: 6px; overflow: hidden; position: relative;
box-shadow: inset 0 0 0 1px var(--cb-border);
background-size: cover; background-position: center;
}
a.ep-thumb:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { display: block; }
.ep-sale-tag:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: absolute; left: 0; bottom: 0;
background: #f5b400; color: #1c1408;
font: 700 8px/1 var(--cb-font-regular); letter-spacing: .6px;
padding: 3px 5px;
text-transform: uppercase;
}
/* QA item 179: the name input and an unpublished row's tag in one cell, one grid item on desktop. */
.ep-name-cell:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* QA item 20: an unpublished row's tag, which opens the product's form (where Publish is). */
.ep-status-tag:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
flex-shrink: 0; white-space: nowrap;
padding: 4px 8px; border: 1px solid var(--cb-border); border-radius: 999px;
color: var(--cb-muted); text-decoration: none;
font: 700 10px/1 var(--cb-font-regular); letter-spacing: .6px; text-transform: uppercase;
}
.ep-status-tag:hover:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { border-color: var(--cb-link); color: var(--cb-link-text, var(--cb-link)); }
.ep-name-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
flex: 1; min-width: 0; height: 40px;
padding: 0 12px;
border: 1px solid var(--cb-border); border-radius: 6px;
background: var(--cb-card); color: var(--cb-text);
font: 500 14px/1 var(--cb-font-regular);
outline: none; box-sizing: border-box;
}
.ep-name-input:focus:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { border-color: var(--cb-link); }
.ep-card-row2:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
padding-left: 36px;
}
.ep-card-row2 label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.ep-card-row2 .ep-section-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { margin-bottom: 0; }
.ep-price-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
width: 100%; height: 40px; padding: 0 12px;
border: 1px solid var(--cb-border); border-radius: 6px;
background: var(--cb-card); color: var(--cb-text);
font: 500 14px/1 var(--cb-font-regular);
outline: none; box-sizing: border-box;
-moz-appearance: textfield;
}
.ep-price-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"]))::-webkit-inner-spin-button, .ep-price-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"]))::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ep-price-input:focus:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { border-color: var(--cb-link); }
.ep-price-input:disabled:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: var(--cb-bg); color: var(--cb-muted); cursor: not-allowed;
}
.ep-pager-wrap:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: var(--cb-bg);
border-bottom: 1px solid var(--cb-border);
}
.ep-savebar:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
position: sticky; bottom: 0; z-index: 30;
background: var(--cb-card);
border-top: 1px solid var(--cb-border);
box-shadow: 0 -4px 14px rgba(20,23,33,.06);
padding: 14px 24px calc(18px + env(safe-area-inset-bottom, 0px));
display: flex; align-items: center; gap: 12px;
}
.ep-savebar-meta:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
flex: 0 0 auto;
font: 500 12px/1.3 var(--cb-font-regular);
color: var(--cb-muted);
min-width: 70px;
}
.ep-savebar-meta.is-dirty:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) { color: #b07b00; }
.ep-savebar-actions:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
flex: 1; display: flex; justify-content: flex-end;
}
.ep-btn-save:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
flex: 1 1 0; max-width: 240px;
height: 46px; padding: 0 16px;
border-radius: 999px;
font: 600 13px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase;
cursor: pointer; white-space: nowrap;
background: var(--cb-link); color: #fff;
border: 1px solid var(--cb-link);
}
.ep-btn-save:disabled:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {
background: var(--cb-bg); color: var(--cb-muted);
border-color: var(--cb-border); cursor: not-allowed;
}

/* desktop layout: one sheet. header → filter toolbar → bulk band → list (quiet cells) → pager → sticky save */
main:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {max-width:1120px;margin:0 auto;padding:28px var(--gut) 72px}
.cb-app main>*:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:transparent}
.cb-app main>.ep-sheet:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-sheet:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:var(--cb-card);border:1px solid var(--cb-border);border-radius:14px;box-shadow:0 6px 18px rgba(20,23,33,.10),0 2px 4px rgba(20,23,33,.06);overflow:clip;position:relative;z-index:1}
[data-theme="light"] .ep-sheet:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {border-color:rgba(20,23,33,.06)}
.ep-head:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:transparent;border-bottom:0;padding:26px 28px 6px;align-items:center}
.ep-h1:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {font-size:28px}
.ep-sub:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {margin-top:6px;max-width:64ch}
.ep-cancel:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {padding:8px 12px;border-radius:999px;border:1px solid transparent}.ep-cancel:hover:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {border-color:currentColor;background:rgba(236,77,77,.06)}
/* filter toolbar */
.ep-filters:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:transparent;border-bottom:0;padding:14px 28px 0}
.ep-filters-head:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:none}
.ep-filters-body:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:flex!important;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:14px 28px;padding:0}
.ep-filters-body>div:first-child:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {flex:0 0 260px}
.ep-filters-body>div:nth-child(2):where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {flex:1 1 320px;max-width:460px}
.ep-section-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {margin-bottom:8px;color:var(--cb-sec);font-weight:600;letter-spacing:1.4px}
.ep-select:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-bulk-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {height:42px;border-color:var(--cb-border-hard)}
.ep-select:hover:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-bulk-input:hover:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {border-color:var(--cb-sec)}
.ep-range:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {height:42px;padding:19px 0}.ep-range-track:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-range-fill:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {top:19px}.ep-range-thumb:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {top:11px}
.ep-range-track:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:var(--cb-border-hard)}
/* bulk adjust band */
.ep-filters-body>.ep-bulk:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {flex:1 0 100%;margin-top:6px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--cb-chip-bg,#f1f3f6);border:1px solid var(--cb-border)}
.ep-bulk .ep-section-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {margin:0 6px 0 0;white-space:nowrap}
.ep-bulk .ep-bulk-help:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {order:9;margin:0 0 0 auto;text-align:right;max-width:34ch;font-size:12px;line-height:16px}
.ep-bulk>.ep-select-wrap:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {flex:0 0 240px}.ep-bulk .ep-select:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {min-width:0;height:40px}
.ep-bulk .ep-bulk-row:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:flex;gap:8px;align-items:center;margin:0}
.ep-bulk .ep-bulk-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {width:96px;flex:none;height:40px;text-align:right;font-variant-numeric:tabular-nums}
.ep-bulk .ep-select-wrap.is-unit:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {flex:0 0 84px}
.ep-bulk-apply:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {height:40px;border-radius:999px;padding:0 20px;font-weight:600}
/* list toolbar: count · sort */
.ep-selbar:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:transparent;border-bottom:0;margin-top:22px;padding:0 28px}
.ep-selbar-row:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {padding:0 0 10px;gap:14px}
.ep-selbar-row>.ep-selbar-toggle:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:none}
.ep-list-count:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {font:400 12px/1 var(--cb-font-regular);color:var(--cb-muted);font-variant-numeric:tabular-nums}.ep-list-count b:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {color:var(--cb-text);font-weight:600}
.ep-sort-btn:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {color:var(--cb-sec);padding:8px 10px;border-radius:999px;border:1px solid var(--cb-border-hard)}.ep-sort-btn:hover:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {color:var(--cb-text)}
.ep-cross-banner:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {margin:0 0 10px;border-top:0;border-radius:8px;padding:10px 14px;background:rgba(64,179,222,.08)}
/* table */
.ep-table-head:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-card .ep-card-body:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:grid;grid-template-columns:44px 56px minmax(0,1fr) 140px 160px;gap:0 14px;align-items:center}
.ep-table-head:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {margin:0 28px;padding:0 6px 10px;border-bottom:1px solid var(--cb-border-hard);font:700 11px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-sec)}
.ep-table-head>span:nth-child(4):where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-table-head>span:nth-child(5):where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {text-align:right;padding-right:12px}
.ep-table-head .ep-selbar-toggle:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:inline-flex;grid-column:1/3;padding:0;gap:10px;color:var(--cb-sec);font:inherit}
.ep-table-head .ep-selbar-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {font:inherit}
.ep-checkbox:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-row-check:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {width:20px;height:20px;border-color:var(--cb-border-hard);border-radius:5px}
.ep-checkbox-mark:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-row-check svg:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {width:12px;height:12px}
[data-ep-cards]:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {padding:0 28px}
.ep-card:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:block;border:0;border-bottom:1px solid var(--cb-border);border-radius:0;background:transparent;padding:0;margin:0}
.ep-card:last-child:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {border-bottom:0}
.ep-card:hover:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:color-mix(in srgb,var(--cb-chip-bg,#f1f3f6) 55%,transparent)}
.ep-card .ep-card-body:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {padding:8px 6px}
.ep-card .ep-card-row1:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-card .ep-card-row2:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:contents}
.ep-card .ep-card-row2 label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:block;position:relative;min-width:0}
.ep-card .ep-card-row2 .ep-section-label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:none}
.ep-card .ep-thumb:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {width:56px;height:56px;border-radius:6px}
.ep-card-rail:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {width:3px;border-radius:0 2px 2px 0;background:#f5b400;left:-28px}
.ep-card:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {position:relative}
/* quiet cells: borders only on hover/focus */
.ep-name-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-price-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {height:40px;border-color:transparent;background:transparent;transition:border-color .12s,background .12s}
.ep-card:hover .ep-name-input:not(:disabled):where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-card:hover .ep-price-input:not(:disabled):where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {border-color:var(--cb-border-hard);background:var(--cb-card)}
.ep-name-input:focus:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-price-input:focus:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {border-color:var(--cb-link)!important;background:var(--cb-card)!important;box-shadow:0 0 0 3px rgba(64,179,222,.16)}
.ep-price-input:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {text-align:right;font-variant-numeric:tabular-nums;padding-left:26px}
.ep-card .ep-card-row2 label:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"]))::before {content:'$';position:absolute;left:12px;top:50%;transform:translateY(-50%);font:500 13px/1 var(--cb-font-regular);color:var(--cb-muted);pointer-events:none}
.ep-price-input:disabled:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:transparent;color:var(--cb-muted);border-color:transparent;text-decoration:line-through;text-decoration-color:rgba(245,180,0,.7)}
.ep-card .ep-card-row2 label:has(.ep-price-input:disabled):where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"]))::before {color:var(--cb-muted);opacity:.6}
.ep-card .ep-card-row2 label:has(.ep-price-input:disabled):where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"]))::after {content:'On sale · price locked';position:absolute;right:12px;top:100%;margin-top:-4px;font:400 10px/1 var(--cb-font-regular);color:#b07b00;opacity:0;pointer-events:none;transition:opacity .12s}
.ep-card:hover .ep-card-row2 label:has(.ep-price-input:disabled):where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"]))::after {opacity:1}
/* pager */
.ep-pager-wrap:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:transparent;border-bottom:0;padding:6px 28px 8px}
/* ORDER-PROOF: one class deeper than the handoff writes it, see the file header. */
.ep-pager-wrap .cb-pager:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {background:transparent;padding:14px 0 8px}
.ep-pager-wrap>div:last-child:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {display:none}
/* save bar */
.ep-savebar:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {position:sticky;bottom:0;margin:0;max-width:none;border-radius:0;padding:14px 28px calc(14px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--cb-card) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--cb-border-hard);box-shadow:0 -8px 24px rgba(20,23,33,.06)}
.ep-savebar-meta:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {font-size:13px}
.ep-btn-save:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {flex:none;max-width:none;height:44px;padding:0 26px}
@media(max-width:1000px){.ep-table-head:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])), .ep-card .ep-card-body:where(body[data-cb-page-css~="products-edit"],body[data-cb-page-css~="products-edit"] *,:has(>body[data-cb-page-css~="products-edit"])) {grid-template-columns:44px 48px minmax(0,1fr) 120px 130px}}
/* ───────── Purchases (ph-*) ─────────
       BACKEND:
         GET /api/me/orders?year=YYYY → { orders: [{ id, date, monthLabel, total, items: [{ id, slug, title, author, price, licenseLabel, thumb }] }] }
         GET /api/me/orders/:id/receipt → application/pdf (or signed URL)
         GET /api/me/orders/:id/items/:itemId/receipt → per-line-item receipt
         GET /api/me/orders/export?year=YYYY → text/csv (whole-year export)
       Receipts can take a few hundred ms to generate; the UI uses an
       idle → generating → done state so it doesn't double-fire. */
.ph-header:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { background: var(--cb-card); border-bottom: 1px solid var(--cb-border); padding: 24px 16px 22px; }
.ph-h1:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { margin: 0; font: 300 28px/1.1 var(--cb-font-light), Mulish, system-ui; color: var(--cb-text); letter-spacing: -.2px; }
.ph-sub:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { margin: 6px 0 0; font: 400 13px/18px var(--cb-font-regular); color: var(--cb-muted); }
.ph-toolbar:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px;
      background: var(--cb-bg);
      border-bottom: 1px solid var(--cb-border);
      position: relative;
    }
.ph-year:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { position: relative; flex-shrink: 0; }
.ph-year-btn:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; border: none; padding: 0; cursor: pointer;
      font: 400 13px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-text);
    }
.ph-year-btn svg:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { transition: transform .15s; }
.ph-year-btn[aria-expanded="true"] svg:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { transform: rotate(180deg); }
.ph-year-menu:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      position: absolute; top: calc(100% + 10px); left: -6px;
      min-width: 160px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 6px;
      box-shadow: 0 8px 24px rgba(20,23,33,.12);
      padding: 4px 0; overflow: hidden; z-index: 10;
    }
:root:not([data-theme="light"]) .ph-year-menu:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.ph-year-menu[hidden]:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { display: none; }
.ph-year-opt:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: block; width: 100%; padding: 12px 18px;
      background: transparent; border: none; text-align: left;
      font: 400 14px/1 var(--cb-font-regular); color: var(--cb-text);
      cursor: pointer;
    }
.ph-year-opt:hover:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { background: var(--cb-bg); }
.ph-year-opt.is-selected:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { background: var(--cb-link); color: #fff; }
.ph-export:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      margin-left: auto;
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; border: 1px solid var(--cb-border-hard);
      border-radius: 999px; height: 36px; padding: 0 14px;
      cursor: pointer; color: var(--cb-text);
      font: 400 12px/1 var(--cb-font-regular);
      letter-spacing: 1.4px; text-transform: uppercase;
    }
.ph-export:hover:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { background: var(--cb-card); }
.ph-list:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { background: var(--cb-bg); padding: 14px 14px 28px; }
.ph-group:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { margin-bottom: 8px; }
.ph-group-head:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      padding: 10px 4px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.ph-order:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      overflow: visible;
      margin-bottom: 14px;
    }
.ph-order-head:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--cb-border);
      background: var(--cb-bg);
      gap: 12px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
.ph-order-date:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      font: 600 13px/1.2 var(--cb-font-semibold); color: var(--cb-text);
    }
.ph-order-id:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      margin-top: 4px;
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--cb-muted);
      font-variant-numeric: tabular-nums;
    }
.ph-order-total:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      font: 600 16px/1 var(--cb-font-semibold); color: var(--cb-text);
      font-variant-numeric: tabular-nums; flex: none;
    }
/* A refunded order and line (QA item 267): the Receipt's words, as a quiet tag. A line refunded in full is
   struck through, since its files went with the refund. */
.ph-order-refund:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])), .ph-line-refund:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: inline-block; margin-top: 6px; padding: 3px 7px;
      border: 1px solid var(--cb-border); border-radius: 999px;
      font: 600 10px/1 var(--cb-font-semibold); letter-spacing: .8px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.ph-line-refund:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { display: block; width: fit-content; }
.ph-line[data-refund="full"] .ph-line-price:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { text-decoration: line-through; color: var(--cb-muted); }
/* Line items */
.ph-line:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px;
      text-decoration: none;
      border-bottom: 1px solid var(--cb-border);
    }
.ph-line:last-of-type:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { border-bottom: none; }
.ph-line-thumb:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      width: 48px; height: 48px; border-radius: 6px;
      flex: none;
      box-shadow: inset 0 0 0 1px rgba(20,23,33,.06);
      background-size: cover; background-position: center;
    }
.ph-line-meta:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { min-width: 0; flex: 1; }
.ph-line-title:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: block;
      font: 600 13px/1.3 var(--cb-font-semibold);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.ph-line-sub:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      margin-top: 3px;
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.ph-line-price:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      font: 600 13px/1 var(--cb-font-semibold);
      color: var(--cb-text);
      font-variant-numeric: tabular-nums;
      flex: none;
    }
.ph-line-menu:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { position: relative; flex: none; }
.ph-line-menu-btn:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      width: 28px; height: 28px; padding: 0;
      border-radius: 999px; border: none;
      background: transparent; color: var(--cb-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
.ph-line-menu-btn:hover:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])), .ph-line-menu-btn[aria-expanded="true"]:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      background: var(--cb-bg);
    }
.ph-line-menu-pop:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      position: absolute; top: calc(100% + 4px); right: 0;
      min-width: 200px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(20,23,33,.18);
      overflow: hidden; padding: 6px 0; z-index: 20;
    }
:root:not([data-theme="light"]) .ph-line-menu-pop:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.ph-line-menu-pop[hidden]:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { display: none; }
.ph-line-menu-pop button:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: block; width: 100%; padding: 11px 14px;
      background: transparent; border: none; text-align: left;
      color: var(--cb-text);
      font: 400 13px/1 var(--cb-font-regular);
      cursor: pointer;
    }
.ph-line-menu-pop button:hover:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { background: var(--cb-bg); }
/* Action row - same bg as the card-head strip, with matching
       bottom corners so it doesn't square off the card's rounded
       corners. (Without these radii, the rect bg cuts through the
       parent's border-radius curve and the corner reads as broken.) */
.ph-actions:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: flex; gap: 10px;
      padding: 12px 16px;
      border-top: 1px solid var(--cb-border);
      background: var(--cb-bg);
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
.ph-receipt-btn:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      flex: 1;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      height: 38px; border-radius: 999px; border: none;
      background: var(--cb-link); color: #fff;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(64,179,222,.30);
      transition: background .2s ease;
    }
.ph-receipt-btn:hover:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { filter: brightness(1.05); }
.ph-receipt-btn[data-state="generating"]:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { cursor: progress; }
.ph-receipt-btn[data-state="done"]:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      background: #7bc178; box-shadow: 0 2px 6px rgba(123,193,120,.30);
    }
.ph-receipt-spinner:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      width: 14px; height: 14px;
      border: 2px solid #fff; border-right-color: transparent;
      border-radius: 50%;
      animation: ph-spin .8s linear infinite;
      display: inline-block;
    }
@keyframes ph-spin { to { transform: rotate(360deg); } }
/* State spans inside the receipt button: the active one shows as a
       flex row so the SVG vertically centers with the label. Inline
       display would baseline-align the SVG and visibly shift the text. */
.ph-receipt-btn > span:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: none;
      align-items: center;
      gap: 8px;
    }
.ph-receipt-btn[data-state="idle"] .when-idle:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])), .ph-receipt-btn[data-state="generating"] .when-generating:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])), .ph-receipt-btn[data-state="done"] .when-done:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { display: inline-flex; }
/* Empty (year w/ no orders, OR no orders ever) */
.ph-empty:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])), .ph-empty-year:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      padding: 40px 28px 56px;
      text-align: center;
    }
.ph-empty:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      padding: 72px 28px 96px;
      min-height: 480px;
      display: flex; flex-direction: column; align-items: center;
    }
.ph-empty-art:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      position: relative;
      width: 168px; height: 168px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 28px;
    }
.ph-empty-art-glow:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      position: absolute; inset: 0; border-radius: 50%;
      background: radial-gradient(circle at 50% 40%, rgba(64,179,222,.18), transparent 65%);
    }
.ph-empty-art-tile:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      position: relative;
      width: 112px; height: 112px; border-radius: 24px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 18px rgba(20,23,33,.10);
    }
.ph-empty-title:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      font: 300 22px/1.2 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text);
      margin-bottom: 10px;
    }
.ph-empty-sub:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-muted);
      max-width: 320px; margin: 0 auto 28px;
    }
.ph-empty-cta:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--cb-link); color: #fff;
      font: 600 13px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      padding: 14px 22px; border-radius: 999px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(64,179,222,.35);
    }
.ph-empty-cta:hover:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { filter: brightness(1.05); }
.ph-empty-year:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) {
      background: var(--cb-bg);
      padding: 56px 24px;
      color: var(--cb-muted);
      font: 400 14px/22px var(--cb-font-regular);
    }
.ph-empty-year[hidden]:where(body[data-cb-page-css~="purchases"],body[data-cb-page-css~="purchases"] *,:has(>body[data-cb-page-css~="purchases"])) { display: none; }
.auth-preview-note:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {font-size:11px;color:var(--cb-text-sec);border:1px solid var(--cb-border);padding:8px;border-radius:6px}
.auth-preview-link:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {font-size:12px;margin-top:22px}
.ah-card [hidden]:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {display:none}
.ah-card h2:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {font-size:19px}
.ah-card p:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {line-height:1.6;overflow-wrap:anywhere}
.ah-card button.ah-link:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {background:none;border:0;cursor:pointer;font:inherit;padding:6px 0}
.ah-card button:disabled:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {opacity:.6;cursor:default}
.ah-submit:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {display:flex;justify-content:center;align-items:center;text-decoration:none}
.ah-input-slot:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {font-size:11px;width:56px}
.cb-mailsent:where(body[data-cb-page-css~="reset-password"],body[data-cb-page-css~="reset-password"] *,:has(>body[data-cb-page-css~="reset-password"])) {display:block}

/* fix-a's settings sweep: the coupon's store links (SEQ11); master's "earn discounts" (SEQ10). */
.set-code-owner:where(body[data-cb-page-css~="settings-discounts"],body[data-cb-page-css~="settings-discounts"] *,:has(>body[data-cb-page-css~="settings-discounts"])) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.set-earn:where(body[data-cb-page-css~="settings-discounts"],body[data-cb-page-css~="settings-discounts"] *,:has(>body[data-cb-page-css~="settings-discounts"])) { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; text-align: center; }
/* fix-a's settings sweep: the coupon's store links (SEQ11); master's "earn discounts" (SEQ10). */
.set-code-owner:where(body[data-cb-page-css~="settings-discounts"],body[data-cb-page-css~="settings-discounts"] *,:has(>body[data-cb-page-css~="settings-discounts"])) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.set-earn:where(body[data-cb-page-css~="settings-discounts"],body[data-cb-page-css~="settings-discounts"] *,:has(>body[data-cb-page-css~="settings-discounts"])) { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; text-align: center; }



.cb-da-modal:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { position: fixed; inset: 0; z-index: 100; display: flex; align-items: stretch; justify-content: center; pointer-events: none; }
.cb-da-modal[data-cb-da-open]:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { pointer-events: auto; }
.cb-da-scrim:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        position: absolute; inset: 0;
        background: rgba(20, 23, 33, 0);
        transition: background-color 240ms cubic-bezier(.32,.72,.24,1);
      }
.cb-da-modal[data-cb-da-shown] .cb-da-scrim:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { background: rgba(20, 23, 33, .58); backdrop-filter: blur(2px); }
.cb-da-card:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        position: relative; z-index: 1;
        width: 100%; max-width: 480px;
        margin: auto;
        background: var(--cb-card);
        border-radius: 16px;
        box-shadow: 0 32px 80px rgba(0,0,0,.42), 0 4px 14px rgba(0,0,0,.18);
        display: flex; flex-direction: column;
        max-height: calc(100vh - 32px); max-height: calc(100svh - 32px);
        overflow: hidden;
        transform: translateY(24px) scale(.985);
        opacity: 0;
        transition: transform 280ms cubic-bezier(.32,.72,.24,1), opacity 240ms ease;
      }
.cb-da-modal[data-cb-da-shown] .cb-da-card:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { transform: translateY(0) scale(1); opacity: 1; }
.cb-da-head:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { padding: 18px 18px 14px; border-bottom: 1px solid var(--cb-border); }
.cb-da-pill:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px;
        background: rgba(253,198,78,.18); color: #7a5a0a;
        border-radius: 999px;
        font: 600 10px/1 var(--cb-font-semibold);
        letter-spacing: 1.4px; text-transform: uppercase;
        margin-bottom: 10px;
      }
:root:not([data-theme="light"]) .cb-da-pill:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { color: #fde2a7; }
.cb-da-title:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { margin: 0; font: 600 20px/26px var(--cb-font-semibold); color: var(--cb-text); letter-spacing: -.2px; }
.cb-da-sub:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { margin: 6px 0 0; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-sec); }
.cb-da-preview:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        flex: 1; min-height: 240px;
        overflow-y: auto; overscroll-behavior: contain;
        padding: 16px 18px 24px;
        background: var(--cb-bg);
        scroll-behavior: smooth;
      }
.cb-da-preview:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"]))::-webkit-scrollbar { width: 8px; }
.cb-da-preview:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"]))::-webkit-scrollbar-thumb { background: var(--cb-border-hard); border-radius: 4px; }
.cb-da-preview h3:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { margin: 18px 0 8px; font: 600 14px/20px var(--cb-font-semibold); color: var(--cb-text); }
.cb-da-preview h3:first-of-type:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { margin-top: 0; }
.cb-da-preview p:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { margin: 0 0 10px; font: 400 13px/20px var(--cb-font-regular); color: var(--cb-sec); text-wrap: pretty; }
.cb-da-preview p b:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { color: var(--cb-text); font-weight: 600; }
.cb-da-preview a:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { color:var(--cb-link-text,var(--cb-link)); text-decoration: none; border-bottom: 1px solid rgba(64,179,222,.32); }
.cb-da-preview .cb-da-callout:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        margin: 4px 0 14px; padding: 10px 12px;
        background: rgba(123,193,120,.10);
        border-left: 3px solid #7bc178;
        border-radius: 6px;
        font: 500 12.5px/19px var(--cb-font-semibold);
        color: #1f5d3a;
      }
:root:not([data-theme="light"]) .cb-da-preview .cb-da-callout:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { color: #a8d8a4; }
.cb-da-preview .cb-da-num:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        font: 400 11px/1 var(--cb-font-regular);
        letter-spacing: 1.4px; color: var(--cb-muted);
        margin-bottom: 4px; display: block;
      }
.cb-da-preview .cb-da-end-mark:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        margin-top: 14px; padding-top: 12px;
        border-top: 1px solid var(--cb-border);
        font: 400 11px/16px var(--cb-font-regular);
        color: var(--cb-muted); text-align: center;
      }
.cb-da-preview .cb-da-end-mark b:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { color: var(--cb-text); font-weight: 600; }
.cb-da-progress:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { height: 6px; background: var(--cb-border); position: relative; }
.cb-da-progress-fill:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        position: absolute; left: 0; top: 0; bottom: 0;
        width: 0%; background: linear-gradient(to right, #FDC64E, #7bc178);
        transition: width 80ms linear;
      }
.cb-da-foot:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { padding: 14px 18px 16px; background: var(--cb-card); border-top: 1px solid var(--cb-border); }
.cb-da-check:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        display: grid; grid-template-columns: 20px 1fr; column-gap: 10px;
        align-items: flex-start; cursor: pointer;
        padding: 8px 10px 8px 0; border-radius: 8px; position: relative;
      }
.cb-da-check input[type="checkbox"]:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
      }
.cb-da-check-box:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        width: 20px; height: 20px; border-radius: 5px;
        border: 1.5px solid var(--cb-border-hard);
        background: var(--cb-panel);
        display: inline-flex; align-items: center; justify-content: center;
        color: transparent; margin-top: 1px;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
      }
.cb-da-check input:checked + .cb-da-check-box:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        background: #40b3de; border-color: #40b3de; color: #fff;
      }
.cb-da-check[data-cb-da-locked]:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { opacity: .55; cursor: not-allowed; }
.cb-da-check-text:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { font: 400 13px/19px var(--cb-font-regular); color: var(--cb-text); }
.cb-da-check-text a:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { color:var(--cb-link-text,var(--cb-link)); text-decoration: none; border-bottom: 1px solid rgba(64,179,222,.32); }
.cb-da-check-text [data-cb-da-check-locked]:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { color: var(--cb-muted); }
.cb-da-actions:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { display: flex; gap: 8px; margin-top: 12px; }
.cb-da-btn:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        height: 44px; padding: 0 16px; border-radius: 999px;
        font: 600 12px/1 var(--cb-font-semibold);
        letter-spacing: 1.2px; text-transform: uppercase;
        cursor: pointer; border: 1px solid transparent;
        text-decoration: none;
        transition: filter 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
      }
.cb-da-btn-ghost:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { flex: 0 0 auto; background: transparent; color: var(--cb-text); border-color: var(--cb-border-hard); }
.cb-da-btn-ghost:hover:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
.cb-da-btn-primary:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { flex: 1; background: #40b3de; color: #fff; }
.cb-da-btn-primary:hover:not(:disabled):where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { filter: brightness(1.08); }
.cb-da-btn-primary:disabled:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { background: var(--cb-border-hard); color: var(--cb-muted); cursor: not-allowed; }
/* Dev affordance - re-show the modal once accepted, for testing.
         BACKEND: remove entirely in production. */
.cb-da-reset:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) {
        position: fixed; bottom: 14px; right: 14px; z-index: 50;
        padding: 6px 12px;
        background: var(--cb-text); color: var(--cb-panel);
        border: none; border-radius: 999px; cursor: pointer;
        font: 600 10px/1 var(--cb-font-semibold);
        letter-spacing: 1.2px; text-transform: uppercase;
        opacity: .55; transition: opacity 160ms ease;
      }
.cb-da-reset:hover:where(body[data-cb-page-css~="settings-store"],body[data-cb-page-css~="settings-store"] *,:has(>body[data-cb-page-css~="settings-store"])) { opacity: 1; }



/* ─────── Balance (bl-*) ───────
       BACKEND:
         GET    /api/me/balance          → { ready, processing, nextDate, accountEmail,
                                              kpis:{dailyAvg,past30,total},
                                              months:[{label,shortLabel,value}],
                                              activityPeriods:[{label, rows:[{label,value,prev}]}],
                                              payouts:[{id,year,dateLabel,account,amount}],
                                              payoutMethod:{method:'paypal',email,threshold} }
         POST   /api/me/balance/settings  { method, email, threshold } → 200
         GET    /api/me/balance/export.csv (history)

       Sample data below is illustrative - mirrors the desktop /balance
       comparison-table structure. Activity periods are paired so the
       prior column compares to the same window N weeks earlier. */
body.bl-body:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { background: var(--cb-bg); }
/* Page header */
.bl-head:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
      padding: 24px 16px 18px;
    }
.bl-h1:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin: 0;
      font: 300 28px/1.1 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text); letter-spacing: -.2px;
    }
.bl-sub:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin: 6px 0 0;
      font: 400 13px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
/* Hero - ready for payout */
.bl-hero:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding: 20px 16px 22px;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.bl-hero-eyebrow:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.bl-hero-amount:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: flex; align-items: baseline; gap: 2px;
      margin-top: 6px;
      color: #3aa86a;
      font: 300 44px/1 var(--cb-font-light), Mulish, system-ui;
      letter-spacing: -1px;
    }
.bl-hero-amount.is-empty:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { color: var(--cb-text); }
.bl-hero-curr:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font-size: 22px; line-height: 1; font-weight: 300;
    }
.bl-hero-frac:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font-size: 22px; line-height: 1; font-weight: 300;
      opacity: .55;
    }
.bl-hero-meta:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 10px;
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.bl-hero-meta b:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { color: var(--cb-text); font-weight: 600; }
/* Still-processing card */
.bl-proc:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 14px;
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      border-radius: 8px;
    }
.bl-proc-icon:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
      background: rgba(122,132,153,.14);
      color: var(--cb-muted);
      display: inline-flex; align-items: center; justify-content: center;
    }
.bl-proc-icon svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bl-proc-text:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { flex: 1; min-width: 0; }
.bl-proc-label:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: .2px;
    }
.bl-proc-val:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 4px;
      font: 500 16px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
.bl-proc-hint:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 11px/15px var(--cb-font-regular);
      color: var(--cb-muted); text-align: right; max-width: 130px;
    }
/* Payout method strip */
.bl-payout:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 14px;
      display: flex; align-items: center; gap: 12px;
      width: 100%;
      background: transparent;
      border: 1px solid var(--cb-border-hard);
      border-radius: 8px;
      padding: 12px 14px;
      cursor: pointer; text-align: left;
      color: var(--cb-text);
      font: inherit;
      transition: border-color .15s;
    }
.bl-payout:hover:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { border-color: var(--cb-link); }
.bl-pp-glyph:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
      background: #003087;
      display: inline-flex; align-items: center; justify-content: center;
      color: #fff;
      font: 700 14px/1 var(--cb-font-bold), Mulish, system-ui;
      letter-spacing: -.5px;
    }
.bl-pp-glyph span:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { display: inline-flex; }
.bl-pp-glyph .bl-pp-p1:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { color: #009cde; }
.bl-pp-glyph .bl-pp-p2:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { color: #fff; }
.bl-payout-info:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { flex: 1; min-width: 0; }
.bl-payout-lead:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: .2px;
    }
.bl-payout-email:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 3px;
      font: 600 13px/1 var(--cb-font-semibold);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.bl-payout-change:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color:var(--cb-link-text,var(--cb-link));
    }
/* KPI strip */
.bl-kpis:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: grid; grid-template-columns: repeat(3, 1fr);
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.bl-kpi:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding: 14px 12px 16px;
      min-width: 0;
      border-left: 1px solid var(--cb-border);
    }
.bl-kpi:first-child:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding-left: 16px; border-left: none;
    }
.bl-kpi:last-child:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding-right: 16px;
    }
.bl-kpi-label:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 10px/1.2 var(--cb-font-regular);
      color: var(--cb-muted);
      letter-spacing: 1.4px; text-transform: uppercase;
      min-height: 24px;
    }
.bl-kpi-val:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 6px;
      font: 500 18px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text); letter-spacing: -.2px;
      font-variant-numeric: tabular-nums;
    }
@media (max-width: 360px) {
      .bl-kpi:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])), .bl-kpi:first-child:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])), .bl-kpi:last-child:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { padding-left: 8px; padding-right: 8px; }
      .bl-kpi-val:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { font-size: 15px; }
    }
/* Trend chart card */
.bl-trend:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin: 16px 16px 0;
      padding: 18px 18px 20px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.bl-trend-head:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { display: flex; align-items: flex-start; gap: 8px; }
.bl-trend-head-text:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { flex: 1; }
.bl-trend-eyebrow:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.bl-trend-title:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 6px;
      font: 500 15px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
.bl-range:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: inline-flex; gap: 0;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      border-radius: 999px;
      padding: 2px;
    }
.bl-range-btn:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      appearance: none; border: none; cursor: pointer;
      padding: 6px 8px;
      border-radius: 999px;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1px; text-transform: uppercase;
      background: transparent;
      color: var(--cb-muted);
      transition: background .15s, color .15s;
    }
.bl-range-btn.is-active:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      background: var(--cb-card);
      color: var(--cb-text);
      box-shadow: 0 1px 2px rgba(20,23,33,.08);
    }
.bl-chart-wrap:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { position: relative; margin-top: 18px; }
.bl-chart-svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { display: block; overflow: visible; width: 100%; }
.bl-bar-rect:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      fill: rgba(64,179,222,.55);
      transition: fill .12s ease;
    }
.bl-bar-cell:hover .bl-bar-rect:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { fill: var(--cb-link); }
.bl-chart-readout:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      position: absolute; top: -12px; left: 0;
      font: 500 12px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
.bl-chart-readout.is-empty:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { display: none; }
.bl-chart-readout-label:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { color: var(--cb-muted); margin-right: 8px; }
.bl-x-axis:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 8px;
      display: grid;
      font: 400 10px/1 var(--cb-font-regular);
      color: var(--cb-muted);
      letter-spacing: .4px;
    }
.bl-x-tick:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { text-align: center; }
/* Activity card */
.bl-activity:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin: 16px 16px 0;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      overflow: hidden;
    }
.bl-activity-head:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 100%; text-align: left;
      background: transparent; border: none; cursor: pointer;
      padding: 16px 18px;
      display: flex; align-items: center; gap: 12px;
      font: inherit;
      box-sizing: border-box;
    }
.bl-activity-head:focus-visible:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      outline: 2px solid var(--cb-link); outline-offset: -2px;
      border-radius: 12px;
    }
.bl-activity-head-text:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { flex: 1; min-width: 0; }
.bl-activity-eyebrow:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.bl-activity-period:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 6px;
      display: flex; align-items: center; gap: 6px;
      font: 500 15px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
.bl-period-nav:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      appearance: none; border: none; cursor: pointer;
      width: 22px; height: 22px; padding: 0; border-radius: 999px;
      background: transparent;
      color: var(--cb-text);
      display: inline-flex; align-items: center; justify-content: center;
      transition: background .12s, opacity .12s;
    }
.bl-period-nav:hover:not(:disabled):where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { background: var(--cb-bg); }
.bl-period-nav:disabled:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { opacity: .4; cursor: default; color: var(--cb-muted); }
.bl-period-nav svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bl-activity-caret:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 18px; height: 18px;
      fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      transition: transform .15s;
    }
.bl-activity.is-open .bl-activity-caret:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { transform: rotate(180deg); }
.bl-activity-body:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding: 0 18px 14px;
    }
.bl-activity-body[hidden]:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { display: none; }
.bl-row:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 10px 0;
      border-top: 1px solid var(--cb-border);
    }
.bl-row:first-child:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { border-top: none; }
.bl-row.is-total:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      border-top: 1px solid var(--cb-border-hard);
      margin-top: 4px;
      padding-top: 14px;
    }
.bl-row-label:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      flex: 1; min-width: 0;
      font: 400 13px/1.3 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.bl-row.is-total .bl-row-label:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font-weight: 600; color: var(--cb-text);
    }
.bl-row-vals:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { text-align: right; min-width: 0; }
.bl-row-amount:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 600 14px/1 var(--cb-font-semibold);
      color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
.bl-row.is-total .bl-row-amount:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font-size: 15px; font-weight: 700;
    }
.bl-row-prev:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 4px;
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted);
      display: inline-flex; align-items: center; gap: 5px;
    }
.bl-row-prev .bl-arrow-up:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { color: #3aa86a; font: 700 10px/1 var(--cb-font-bold); }
.bl-row-prev .bl-arrow-down:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { color: #e15a5a; font: 700 10px/1 var(--cb-font-bold); }
/* History card */
.bl-history:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding: 24px 16px 8px;
    }
.bl-history-head:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: flex; align-items: baseline; gap: 8px;
      padding: 0 4px 10px;
    }
.bl-history-title:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      flex: 1;
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.bl-history-export:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      appearance: none; cursor: pointer;
      background: transparent; border: none;
      padding: 0;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color:var(--cb-link-text,var(--cb-link));
    }
.bl-history-card:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      overflow: hidden;
    }
.bl-year:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding: 12px 16px 8px;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-muted);
      background: var(--cb-bg);
      border-top: 1px solid var(--cb-border);
    }
.bl-year:first-child:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { border-top: none; }
.bl-payout-row:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      border-top: 1px solid var(--cb-border);
    }
.bl-payout-check:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 36px; height: 36px; border-radius: 999px;
      background: rgba(64,179,222,.10);
      color:var(--cb-link-text,var(--cb-link));
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
.bl-payout-check svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bl-payout-meta:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { flex: 1; min-width: 0; }
.bl-payout-date:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 600 14px/1.2 var(--cb-font-semibold);
      color: var(--cb-text);
    }
.bl-payout-acct:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 3px;
      font: 400 11px/1.3 var(--cb-font-regular);
      color: var(--cb-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.bl-payout-vals:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { text-align: right; flex-shrink: 0; }
.bl-payout-amt:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 600 14px/1.2 var(--cb-font-semibold);
      color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
.bl-payout-fee:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 3px;
      font: 400 10px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: .3px;
    }
.bl-history-collapse:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      max-height: 0; opacity: 0; overflow: hidden;
      transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .18s ease;
    }
.bl-history-collapse.is-open:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      max-height: 2400px; opacity: 1;
      transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .35s ease .1s;
    }
.bl-history-toggle:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 100%; text-align: center;
      padding: 14px 16px;
      border-top: 1px solid var(--cb-border);
      background: transparent; border-left: none; border-right: none; border-bottom: none;
      cursor: pointer;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color:var(--cb-link-text,var(--cb-link));
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    }
.bl-history-toggle svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 12px; height: 12px;
      fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
      transition: transform .3s cubic-bezier(.22,1,.36,1);
    }
.bl-history-toggle.is-open svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { transform: rotate(180deg); }
.bl-history-note:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin: 12px 4px 0;
      font: 400 11px/16px var(--cb-font-regular);
      color: var(--cb-muted);
      display: flex; align-items: flex-start; gap: 6px;
    }
.bl-history-note-i:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
      background: rgba(122,132,153,.18); color: var(--cb-muted);
      display: inline-flex; align-items: center; justify-content: center;
      font: 700 9px/1 var(--cb-font-bold);
    }
/* ─── Bottom sheet (payout settings) ─── */
.bl-sheet:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      position: fixed; inset: 0; z-index: 80;
      pointer-events: none;
    }
.bl-sheet.is-open:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { pointer-events: auto; }
.bl-sheet-backdrop:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      position: absolute; inset: 0;
      background: rgba(20,23,33,0);
      transition: background 240ms cubic-bezier(.32,.72,.24,1);
    }
.bl-sheet.is-shown .bl-sheet-backdrop:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { background: rgba(20,23,33,.5); }
.bl-sheet-panel:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      margin: 0 auto; max-width: 480px;
      background: var(--cb-card); color: var(--cb-text);
      border-top-left-radius: 18px; border-top-right-radius: 18px;
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.32,.72,.24,1);
      box-shadow: 0 -8px 30px rgba(0,0,0,.25);
      max-height: 92vh;
      display: flex; flex-direction: column;
    }
.bl-sheet.is-shown .bl-sheet-panel:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { transform: translateY(0); }
.bl-sheet-handle:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: flex; justify-content: center; padding: 8px 0 4px;
    }
.bl-sheet-handle:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"]))::after {
      content: ''; width: 38px; height: 4px; border-radius: 99px;
      background: var(--cb-border-hard);
    }
.bl-sheet-body:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding: 4px 18px max(28px, env(safe-area-inset-bottom, 28px));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
.bl-sheet-title:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 500 16px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text); margin-bottom: 4px;
    }
.bl-sheet-sub:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted); margin-bottom: 20px;
    }
.bl-sheet-label:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 10px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 8px;
    }
.bl-method-opt:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      appearance: none; cursor: pointer;
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; text-align: left;
      background: transparent;
      border: 1.5px solid var(--cb-border);
      border-radius: 10px;
      color: var(--cb-text);
      font: inherit;
      width: 100%;
      margin-bottom: 14px;
    }
.bl-method-opt.is-active:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      background: rgba(64,179,222,.08);
      border-color: var(--cb-link);
    }
.bl-radio:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 18px; height: 18px; border-radius: 999px;
      border: 2px solid var(--cb-border-hard);
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
      transition: border-color .12s;
    }
.bl-method-opt.is-active .bl-radio:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { border-color: var(--cb-link); }
.bl-radio:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"]))::after {
      content: ''; width: 8px; height: 8px; border-radius: 999px;
      background: var(--cb-link);
      transform: scale(0); transition: transform .15s;
    }
.bl-method-opt.is-active .bl-radio:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"]))::after { transform: scale(1); }
.bl-method-text:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { flex: 1; min-width: 0; }
.bl-method-name:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { font: 600 14px/1 var(--cb-font-semibold); color: var(--cb-text); }
.bl-method-sub:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { margin-top: 3px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); }
.bl-wire:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 14px; margin-bottom: 22px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
    }
.bl-wire svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { flex-shrink: 0; margin-top: 1px; width: 18px; height: 18px; fill: none; stroke: var(--cb-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bl-wire-text:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { flex: 1; min-width: 0; }
.bl-wire-title:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 600 13px/1.3 var(--cb-font-semibold);
      color: var(--cb-text);
    }
.bl-wire-sub:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      margin-top: 4px;
      font: 400 12px/17px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.bl-wire-sub a:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      color:var(--cb-link-text,var(--cb-link)); font-weight: 600; text-decoration: none;
    }
.bl-input:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 100%; box-sizing: border-box; padding: 12px 14px;
      background: var(--cb-bg); color: var(--cb-text);
      border: 1px solid var(--cb-border);
      border-radius: 10px; outline: none;
      font: 500 14px/1 var(--cb-font-semibold), var(--cb-font-regular);
      margin-bottom: 22px;
    }
.bl-input:focus:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { border-color: var(--cb-link); }
.bl-thresh-row:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: flex; gap: 6px; margin-bottom: 24px;
    }
.bl-thresh-btn:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      flex: 1; padding: 10px 0;
      appearance: none; cursor: pointer;
      background: var(--cb-bg);
      color: var(--cb-text);
      border: 1px solid var(--cb-border);
      border-radius: 999px;
      font: 600 12px/1 var(--cb-font-semibold);
    }
.bl-thresh-btn.is-active:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      background: var(--cb-link); color: #fff; border-color: var(--cb-link);
    }
.bl-sheet-actions:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { display: flex; gap: 10px; }
.bl-btn-secondary:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      flex: 1; height: 48px; cursor: pointer;
      background: transparent;
      border: 1px solid var(--cb-border-hard);
      border-radius: 999px;
      color: var(--cb-text);
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
    }
.bl-btn-primary:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      flex: 2; height: 48px; cursor: pointer;
      background: var(--cb-link); color: #fff;
      border: none; border-radius: 999px;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(64,179,222,.35);
    }
.bl-btn-primary:hover:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { filter: brightness(1.05); }
/* Empty state */
.bl-empty:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      padding: 40px 24px 60px;
      display: flex; flex-direction: column; align-items: center;
      text-align: center;
    }
.bl-empty-icon:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      width: 72px; height: 72px; border-radius: 999px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cb-muted); margin-bottom: 18px;
    }
.bl-empty-icon svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bl-empty-title:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 300 22px/1.2 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text); margin-bottom: 10px;
    }
.bl-empty-sub:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-muted); max-width: 280px; margin-bottom: 24px;
    }
.bl-empty-cta:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--cb-link); color: #fff;
      font: 600 13px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      padding: 14px 22px; border-radius: 999px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(64,179,222,.35);
    }
.bl-empty-cta:hover:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { color: #fff; }
.bl-empty-cta svg:where(body[data-cb-page-css~="store-balance-index"],body[data-cb-page-css~="store-balance-index"] *,:has(>body[data-cb-page-css~="store-balance-index"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Balance page (bl-*), v3 plan U33.
   Ported verbatim from the handoff's production/store/balance/index.html inline <style>, which is
   byte-identical (modulo indentation) to production-desktop/assets/css/pages/store-balance-index.css.
   Page-scoped by V3::PageCss through `v3_page_css 'store-balance'` (KTD4). */
/* ─────── Balance (bl-*) ───────
   BACKEND:
     GET    /api/me/balance          → { ready, processing, nextDate, accountEmail,
                                          kpis:{dailyAvg,past30,total},
                                          months:[{label,shortLabel,value}],
                                          activityPeriods:[{label, rows:[{label,value,prev}]}],
                                          payouts:[{id,year,dateLabel,account,amount}],
                                          payoutMethod:{method:'paypal',email,threshold} }
     POST   /api/me/balance/settings  { method, email, threshold } → 200
     GET    /api/me/balance/export.csv (history)

   Sample data below is illustrative - mirrors the desktop /balance
   comparison-table structure. Activity periods are paired so the
   prior column compares to the same window N weeks earlier. */

body.bl-body:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { background: var(--cb-bg); }

/* Page header */
.bl-head:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  background: var(--cb-card);
  border-bottom: 1px solid var(--cb-border);
  padding: 24px 16px 18px;
}
.bl-h1:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin: 0;
  font: 300 28px/1.1 var(--cb-font-light), Mulish, system-ui;
  color: var(--cb-text); letter-spacing: -.2px;
}
.bl-sub:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin: 6px 0 0;
  font: 400 13px/18px var(--cb-font-regular);
  color: var(--cb-muted);
}

/* Hero - ready for payout */
.bl-hero:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding: 20px 16px 22px;
  background: var(--cb-card);
  border-bottom: 1px solid var(--cb-border);
}
.bl-hero-eyebrow:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 11px/1 var(--cb-font-regular);
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cb-muted);
}
.bl-hero-amount:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: flex; align-items: baseline; gap: 2px;
  margin-top: 6px;
  color: #3aa86a;
  font: 300 44px/1 var(--cb-font-light), Mulish, system-ui;
  letter-spacing: -1px;
}
.bl-hero-amount.is-empty:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: var(--cb-text); }
/* r29 M2: green is money on its way; a balance owed is red, one below the minimum is plain. */
.bl-hero-amount.is-owed:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: #d9534f; }
.bl-hero-amount.is-below:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: var(--cb-text); }
.bl-hero-curr:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font-size: 22px; line-height: 1; font-weight: 300;
}
.bl-hero-frac:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font-size: 22px; line-height: 1; font-weight: 300;
  opacity: .55;
}
.bl-hero-meta:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 10px;
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-muted);
}
.bl-hero-meta b:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: var(--cb-text); font-weight: 600; }

/* Still-processing card */
.bl-proc:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 14px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
}
.bl-proc-icon:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: rgba(122,132,153,.14);
  color: var(--cb-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.bl-proc-icon svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bl-proc-text:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { flex: 1; min-width: 0; }
.bl-proc-label:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 12px/1 var(--cb-font-regular);
  color: var(--cb-muted); letter-spacing: .2px;
}
.bl-proc-val:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 4px;
  font: 500 16px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.bl-proc-hint:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 11px/15px var(--cb-font-regular);
  color: var(--cb-muted); text-align: right; max-width: 130px;
}

/* Payout method strip */
.bl-payout:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 14px;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--cb-border-hard);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer; text-align: left;
  color: var(--cb-text);
  font: inherit;
  transition: border-color .15s;
}
.bl-payout:hover:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { border-color: var(--cb-link); }
.bl-pp-glyph:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: #003087;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font: 700 14px/1 var(--cb-font-bold), Mulish, system-ui;
  letter-spacing: -.5px;
}
.bl-pp-glyph span:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { display: inline-flex; }
.bl-pp-glyph .bl-pp-p1:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: #009cde; }
.bl-pp-glyph .bl-pp-p2:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: #fff; }
.bl-payout-info:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { flex: 1; min-width: 0; }
.bl-payout-lead:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 11px/1 var(--cb-font-regular);
  color: var(--cb-muted); letter-spacing: .2px;
}
.bl-payout-email:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 3px;
  font: 600 13px/1 var(--cb-font-semibold);
  color: var(--cb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bl-payout-change:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  color:var(--cb-link-text,var(--cb-link));
}

/* KPI strip */
.bl-kpis:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--cb-card);
  border-bottom: 1px solid var(--cb-border);
}
.bl-kpi:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding: 14px 12px 16px;
  min-width: 0;
  border-left: 1px solid var(--cb-border);
}
.bl-kpi:first-child:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding-left: 16px; border-left: none;
}
.bl-kpi:last-child:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding-right: 16px;
}
.bl-kpi-label:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 10px/1.2 var(--cb-font-regular);
  color: var(--cb-muted);
  letter-spacing: 1.4px; text-transform: uppercase;
  min-height: 24px;
}
.bl-kpi-val:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 6px;
  font: 500 18px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text); letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 360px) {
  .bl-kpi:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])), .bl-kpi:first-child:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])), .bl-kpi:last-child:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { padding-left: 8px; padding-right: 8px; }
  .bl-kpi-val:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { font-size: 15px; }
}

/* Trend chart card */
.bl-trend:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin: 16px 16px 0;
  padding: 18px 18px 20px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
}
.bl-trend-head:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { display: flex; align-items: flex-start; gap: 8px; }
.bl-trend-head-text:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { flex: 1; }
.bl-trend-eyebrow:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 11px/1 var(--cb-font-regular);
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cb-muted);
}
.bl-trend-title:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 6px;
  font: 500 15px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}
.bl-range:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: inline-flex; gap: 0;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  padding: 2px;
}
.bl-range-btn:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  appearance: none; border: none; cursor: pointer;
  padding: 6px 8px;
  border-radius: 999px;
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1px; text-transform: uppercase;
  background: transparent;
  color: var(--cb-muted);
  transition: background .15s, color .15s;
}
.bl-range-btn.is-active:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  background: var(--cb-card);
  color: var(--cb-text);
  box-shadow: 0 1px 2px rgba(20,23,33,.08);
}
.bl-chart-wrap:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { position: relative; margin-top: 18px; }
.bl-chart-svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { display: block; overflow: visible; width: 100%; }
.bl-bar-rect:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  fill: rgba(64,179,222,.55);
  transition: fill .12s ease;
}
.bl-bar-cell:hover .bl-bar-rect:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { fill: var(--cb-link); }
.bl-chart-readout:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  position: absolute; top: -12px; left: 0;
  font: 500 12px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}
.bl-chart-readout.is-empty:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { display: none; }
.bl-chart-readout-label:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: var(--cb-muted); margin-right: 8px; }
.bl-x-axis:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 8px;
  display: grid;
  font: 400 10px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  letter-spacing: .4px;
}
.bl-x-tick:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { text-align: center; }

/* Activity card */
.bl-activity:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin: 16px 16px 0;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  overflow: hidden;
}
.bl-activity-head:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  font: inherit;
  box-sizing: border-box;
}
.bl-activity-head:focus-visible:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  outline: 2px solid var(--cb-link); outline-offset: -2px;
  border-radius: 12px;
}
.bl-activity-head-text:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { flex: 1; min-width: 0; }
.bl-activity-eyebrow:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 11px/1 var(--cb-font-regular);
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cb-muted);
}
.bl-activity-period:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
  font: 500 15px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}
.bl-period-nav:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  appearance: none; border: none; cursor: pointer;
  width: 22px; height: 22px; padding: 0; border-radius: 999px;
  background: transparent;
  color: var(--cb-text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, opacity .12s;
}
.bl-period-nav:hover:not(:disabled):where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { background: var(--cb-bg); }
.bl-period-nav:disabled:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { opacity: .4; cursor: default; color: var(--cb-muted); }
.bl-period-nav svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bl-activity-caret:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 18px; height: 18px;
  fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s;
}
.bl-activity.is-open .bl-activity-caret:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { transform: rotate(180deg); }
.bl-activity-body:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding: 0 18px 14px;
}
.bl-activity-body[hidden]:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { display: none; }
.bl-row:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--cb-border);
}
.bl-row:first-child:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { border-top: none; }
.bl-row.is-total:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  border-top: 1px solid var(--cb-border-hard);
  margin-top: 4px;
  padding-top: 14px;
}
.bl-row-label:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  flex: 1; min-width: 0;
  font: 400 13px/1.3 var(--cb-font-regular);
  color: var(--cb-muted);
}
.bl-row.is-total .bl-row-label:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font-weight: 600; color: var(--cb-text);
}
.bl-row-vals:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { text-align: right; min-width: 0; }
.bl-row-amount:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 600 14px/1 var(--cb-font-semibold);
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.bl-row.is-total .bl-row-amount:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font-size: 15px; font-weight: 700;
}
.bl-row-prev:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 4px;
  font: 400 11px/1 var(--cb-font-regular);
  color: var(--cb-muted);
  display: inline-flex; align-items: center; gap: 5px;
}
.bl-row-prev .bl-arrow-up:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: #3aa86a; font: 700 10px/1 var(--cb-font-bold); }
.bl-row-prev .bl-arrow-down:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: #e15a5a; font: 700 10px/1 var(--cb-font-bold); }

/* History card */
.bl-history:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding: 24px 16px 8px;
}
.bl-history-head:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 4px 10px;
}
.bl-history-title:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  flex: 1;
  font: 400 11px/1 var(--cb-font-regular);
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cb-muted);
}
.bl-history-export:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  appearance: none; cursor: pointer;
  background: transparent; border: none;
  padding: 0;
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  color:var(--cb-link-text,var(--cb-link));
}
.bl-history-card:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  overflow: hidden;
}
.bl-year:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding: 12px 16px 8px;
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cb-muted);
  background: var(--cb-bg);
  border-top: 1px solid var(--cb-border);
}
.bl-year:first-child:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { border-top: none; }
.bl-payout-row:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--cb-border);
}
.bl-payout-check:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(64,179,222,.10);
  color:var(--cb-link-text,var(--cb-link));
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bl-payout-check svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bl-payout-meta:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { flex: 1; min-width: 0; }
.bl-payout-date:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 600 14px/1.2 var(--cb-font-semibold);
  color: var(--cb-text);
}
.bl-payout-acct:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 3px;
  font: 400 11px/1.3 var(--cb-font-regular);
  color: var(--cb-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bl-payout-vals:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { text-align: right; flex-shrink: 0; }
.bl-payout-amt:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 600 14px/1.2 var(--cb-font-semibold);
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.bl-payout-fee:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 3px;
  font: 400 10px/1 var(--cb-font-regular);
  color: var(--cb-muted); letter-spacing: .3px;
}
.bl-history-collapse:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}
.bl-history-collapse.is-open:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  max-height: 2400px; opacity: 1;
  transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .35s ease .1s;
}
.bl-history-toggle:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 100%; text-align: center;
  padding: 14px 16px;
  border-top: 1px solid var(--cb-border);
  background: transparent; border-left: none; border-right: none; border-bottom: none;
  cursor: pointer;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  color:var(--cb-link-text,var(--cb-link));
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.bl-history-toggle svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.bl-history-toggle.is-open svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { transform: rotate(180deg); }
.bl-history-note:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin: 12px 4px 0;
  font: 400 11px/16px var(--cb-font-regular);
  color: var(--cb-muted);
  display: flex; align-items: flex-start; gap: 6px;
}
.bl-history-note-i:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
  background: rgba(122,132,153,.18); color: var(--cb-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 9px/1 var(--cb-font-bold);
}

/* ─── Bottom sheet (payout settings) ─── */
.bl-sheet:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none;
}
.bl-sheet.is-open:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { pointer-events: auto; }
.bl-sheet-backdrop:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  position: absolute; inset: 0;
  background: rgba(20,23,33,0);
  transition: background 240ms cubic-bezier(.32,.72,.24,1);
}
.bl-sheet.is-shown .bl-sheet-backdrop:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { background: rgba(20,23,33,.5); }
.bl-sheet-panel:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 auto; max-width: 480px;
  background: var(--cb-card); color: var(--cb-text);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,.24,1);
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  max-height: 92vh;
  display: flex; flex-direction: column;
}
.bl-sheet.is-shown .bl-sheet-panel:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { transform: translateY(0); }
.bl-sheet-handle:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: flex; justify-content: center; padding: 8px 0 4px;
}
.bl-sheet-handle:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"]))::after {
  content: ''; width: 38px; height: 4px; border-radius: 99px;
  background: var(--cb-border-hard);
}
.bl-sheet-body:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding: 4px 18px max(28px, env(safe-area-inset-bottom, 28px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bl-sheet-title:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 500 16px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text); margin-bottom: 4px;
}
.bl-sheet-sub:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-muted); margin-bottom: 20px;
}
.bl-sheet-label:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 10px/1 var(--cb-font-regular);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cb-muted); margin-bottom: 8px;
}
.bl-method-opt:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left;
  background: transparent;
  border: 1.5px solid var(--cb-border);
  border-radius: 10px;
  color: var(--cb-text);
  font: inherit;
  width: 100%;
  margin-bottom: 14px;
}
.bl-method-opt.is-active:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  background: rgba(64,179,222,.08);
  border-color: var(--cb-link);
}
.bl-radio:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid var(--cb-border-hard);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color .12s;
}
.bl-method-opt.is-active .bl-radio:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { border-color: var(--cb-link); }
.bl-radio:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"]))::after {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--cb-link);
  transform: scale(0); transition: transform .15s;
}
.bl-method-opt.is-active .bl-radio:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"]))::after { transform: scale(1); }
.bl-method-text:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { flex: 1; min-width: 0; }
.bl-method-name:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { font: 600 14px/1 var(--cb-font-semibold); color: var(--cb-text); }
.bl-method-sub:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { margin-top: 3px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); }
.bl-wire:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 22px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
}
.bl-wire svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { flex-shrink: 0; margin-top: 1px; width: 18px; height: 18px; fill: none; stroke: var(--cb-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bl-wire-text:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { flex: 1; min-width: 0; }
.bl-wire-title:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 600 13px/1.3 var(--cb-font-semibold);
  color: var(--cb-text);
}
.bl-wire-sub:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin-top: 4px;
  font: 400 12px/17px var(--cb-font-regular);
  color: var(--cb-muted);
}
.bl-wire-sub a:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  color:var(--cb-link-text,var(--cb-link)); font-weight: 600; text-decoration: none;
}
.bl-input:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  background: var(--cb-bg); color: var(--cb-text);
  border: 1px solid var(--cb-border);
  border-radius: 10px; outline: none;
  font: 500 14px/1 var(--cb-font-semibold), var(--cb-font-regular);
  margin-bottom: 22px;
}
.bl-input:focus:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { border-color: var(--cb-link); }
.bl-thresh-row:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.bl-thresh-btn:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  flex: 1; padding: 10px 0;
  appearance: none; cursor: pointer;
  background: var(--cb-bg);
  color: var(--cb-text);
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  font: 600 12px/1 var(--cb-font-semibold);
}
.bl-thresh-btn.is-active:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  background: var(--cb-link); color: #fff; border-color: var(--cb-link);
}
.bl-sheet-actions:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { display: flex; gap: 10px; }
.bl-btn-secondary:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  flex: 1; height: 48px; cursor: pointer;
  background: transparent;
  border: 1px solid var(--cb-border-hard);
  border-radius: 999px;
  color: var(--cb-text);
  font: 600 12px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
}
.bl-btn-primary:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  flex: 2; height: 48px; cursor: pointer;
  background: var(--cb-link); color: #fff;
  border: none; border-radius: 999px;
  font: 600 12px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(64,179,222,.35);
}
.bl-btn-primary:hover:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { filter: brightness(1.05); }

/* Empty state */
.bl-empty:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  padding: 40px 24px 60px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.bl-empty-icon:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  width: 72px; height: 72px; border-radius: 999px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cb-muted); margin-bottom: 18px;
}
.bl-empty-icon svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bl-empty-title:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 300 22px/1.2 var(--cb-font-light), Mulish, system-ui;
  color: var(--cb-text); margin-bottom: 10px;
}
.bl-empty-sub:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-muted); max-width: 280px; margin-bottom: 24px;
}
.bl-empty-cta:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cb-link); color: #fff;
  font: 600 13px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 14px 22px; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(64,179,222,.35);
}
.bl-empty-cta:hover:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { color: #fff; }
.bl-empty-cta svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  

/* ─── Added by the port (v3 plan U33), not the handoff ───────────────────────
   1. The prototype's sheet uses `.is-open` for pointer events and `.is-shown`,
      added a frame later, for the transition. U9's overlay host adds `.is-open`
      only, after its own forced layout, which is the same two-step in one
      class; these two rules map the `.is-shown` ones onto it. */
.bl-sheet.is-open .bl-sheet-backdrop:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { background: rgba(20,23,33,.5); }
.bl-sheet.is-open .bl-sheet-panel:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { transform: translateY(0); }

/* 2. The threshold chips are radio inputs rather than buttons, so the choice
      posts with the form and survives with no JavaScript. The input itself is
      not drawn; the label wears the handoff's own `.bl-thresh-btn`. */
.bl-thresh-input:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { position: absolute; opacity: 0; pointer-events: none; }
/*    The checked radio is the chip that is on (QA item 85): it wears the handoff's `.is-active` look
      (the old rule set its text to the background's blue, so the default $20 read as an empty
      pill), and a server-drawn `.is-active` chip the seller has moved off reads as a plain one. */
.bl-thresh-btn:has(.bl-thresh-input:checked):where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { background: var(--cb-link); border-color: var(--cb-link); color: #fff; }
.bl-thresh-btn.is-active:not(:has(.bl-thresh-input:checked)):where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { background: var(--cb-bg); border-color: var(--cb-border); color: var(--cb-text); }
.bl-thresh-btn:focus-within:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { outline: 2px solid var(--cb-link); outline-offset: 2px; }
/* r29 M4: the chip is a <label>, so its text sat at the start; centred as the handoff's buttons are. */
.bl-thresh-btn:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { position: relative; display: inline-flex; align-items: center; justify-content: center; }

/* 3. Three states the handoff does not draw and the page needs: the hint under
      the sheet's password field, an empty payout history, and the payout
      failure notice (`U33-payout-failure-notice.md`). All three reuse the
      card's own type scale and the note's own shape. */
.bl-sheet-hint:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { margin: 6px 2px 0; font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); }
.bl-history-empty:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { padding: 20px 16px; font: 400 13px/1.5 var(--cb-font-regular); color: var(--cb-muted); }
/* The failure notice is the note's shape at the page's own card weight: money that did not
   arrive cannot read as a footnote under the payout list. Background, border and radius are the
   card's (`.bl-trend`, `.bl-activity`); the badge and the title are the note's own. */
.bl-history-note-failure:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--cb-card); border: 1px solid #e74c3c; border-radius: 12px;
  color: var(--cb-text);
  font: 400 12px/18px var(--cb-font-regular);
}
.bl-history-note-failure .bl-history-note-i:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { background: #e74c3c; color: #fff; margin-top: 2px; }
.bl-history-note-title:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { font: 500 13px/1.4 var(--cb-font-semibold), var(--cb-font-regular); margin-bottom: 4px; }
.bl-history-note-action:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { display: inline-block; margin-top: 8px; color: var(--cb-link); }

/* 4. "Show all N payouts" is a native <details> so it opens with no script; the
      handoff's own toggle and collapse classes are on the summary and the body. */
.bl-history-collapse-details > summary:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { list-style: none; cursor: pointer; }
.bl-history-collapse-details > summary:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"]))::-webkit-details-marker { display: none; }
.bl-history-collapse-details[open] > .bl-history-toggle svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])), .bl-history-collapse-details[open] > summary svg:where(body[data-cb-page-css~="store-balance"],body[data-cb-page-css~="store-balance"] *,:has(>body[data-cb-page-css~="store-balance"])) { transform: rotate(180deg); }
/* ─────── Customers / Followers (cu-*) ───────
       BACKEND:
         GET    /api/me/customers?tab=&payingOnly=&sort=&q=&page=N
                → { items: [{ email, name, purchases, spent, lastActivity, orders: [...] }],
                    total: N, totalPages: N }
         GET    /api/me/followers?q=&page=N
                → { items: [...], total }
         POST   /api/me/followers/import       { emails: [...] | csvFile }
         POST   /api/me/messages               { to, subject, body, orderId? }
         POST   /api/me/refunds                { orderId, amount, reason }     → 200
         GET    /api/me/customers/export.csv   (auth, streams CSV)
         GET    /api/me/followers/export.csv
       Refund window: 12 months from order date. Server is source of
       truth - client disables the button at that threshold but server
       must re-check on POST. */
body.cu-body:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { background: var(--cb-bg); }
/* Page head */
.cu-head:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 20px 16px 6px;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.cu-eyebrow:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 8px;
    }
.cu-h1:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      margin: 0;
      font: 300 28px/1 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text); letter-spacing: -.5px;
    }
/* Tabs */
.cu-tabs:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; gap: 0;
      border-bottom: 1px solid var(--cb-border);
      background: var(--cb-bg);
      padding: 0 16px;
      position: relative;        /* anchor for the sliding indicator */
    }
.cu-tab:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; background: transparent; border: none; cursor: pointer;
      padding: 14px 4px; margin-right: 24px;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-muted);
      border-bottom: 2px solid transparent;
      transition: color .15s, border-color .15s;
    }
.cu-tab[aria-pressed="true"]:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { color: var(--cb-text); }
/* Slider supersedes the per-tab static underline (mirrors .hm-tab-rail.has-indicator) */
.cu-tabs.has-indicator .cu-tab[aria-pressed="true"]:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-bottom-color: transparent; }
.cu-tab-indicator:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      position: absolute; left: 0; bottom: -1px;
      height: 2px; width: 0;
      background: var(--cb-link);
      transform: translate3d(0, 0, 0);
      transition: transform 240ms cubic-bezier(.32,.72,.24,1),
                  width     240ms cubic-bezier(.32,.72,.24,1);
      pointer-events: none;
      will-change: transform, width;
    }
/* Toolbar (total count + paying toggle + export) */
.cu-toolbar:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 14px 16px 8px;
      border-bottom: 1px solid var(--cb-border);
      background: var(--cb-card);
    }
.cu-toolbar-row:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; align-items: baseline; gap: 8px;
    }
.cu-toolbar-label:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.cu-toolbar-count:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 600 22px/1 var(--cb-font-semibold), Mulish, system-ui;
      color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
.cu-toolbar-spacer:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { flex: 1; }
.cu-export:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; background: transparent; border: none; cursor: pointer;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color:var(--cb-link-text,var(--cb-link)); padding: 4px 0;
    }
.cu-export:hover:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { filter: brightness(.95); }
.cu-paying:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none;
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 10px; cursor: pointer;
      background: transparent; border: none; padding: 0;
      font: inherit; color: inherit;
      user-select: none;
    }
.cu-paying-knob:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 38px; height: 22px; border-radius: 999px; position: relative;
      background: var(--cb-border-hard);
      transition: background .18s ease;
      flex-shrink: 0;
    }
.cu-paying-knob:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"]))::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 18px; height: 18px; border-radius: 999px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
      transition: left .18s ease;
    }
.cu-paying.is-on .cu-paying-knob:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { background: var(--cb-link); }
.cu-paying.is-on .cu-paying-knob:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"]))::after { left: 18px; }
.cu-paying-label:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 500 13px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
/* Search + sort chip */
.cu-search-wrap:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 12px 16px 10px;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.cu-search:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px; border-radius: 10px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      transition: border-color .15s;
    }
.cu-search.is-email:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-color: var(--cb-link); }
.cu-search svg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-search input:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex: 1; min-width: 0;
      border: none; outline: none; background: transparent;
      font: 400 14px/1 var(--cb-font-regular); color: var(--cb-text);
    }
.cu-search-email-pill:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex-shrink: 0;
      font: 600 9px/1 var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
      color:var(--cb-link-text,var(--cb-link)); background: rgba(64,179,222,.1);
      padding: 4px 7px; border-radius: 999px;
    }
.cu-sort-row:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { display: flex; gap: 8px; margin-top: 10px; }
.cu-sort-chip:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-radius: 999px;
      border: 1px solid var(--cb-border);
      background: var(--cb-card); color: var(--cb-text);
      font: 600 11px/1 var(--cb-font-semibold);
      transition: border-color .15s, background .15s;
    }
.cu-sort-chip:hover:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-color: var(--cb-link); }
.cu-sort-chip svg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-sort-chip-value:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { color: var(--cb-muted); font-weight: 500; }
/* Import-followers card (followers tab) */
.cu-import:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      margin: 14px 16px 22px;
      border-radius: 12px;
      border: 1px solid var(--cb-border);
      background: var(--cb-card);
      overflow: hidden;
    }
.cu-import-head:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; border: none; background: transparent; cursor: pointer;
      width: 100%; padding: 14px 16px;
      display: flex; align-items: center; gap: 12px; text-align: left;
      font: inherit; color: inherit;
    }
.cu-import-icon:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
      background: rgba(64,179,222,.12); color:var(--cb-link-text,var(--cb-link));
      display: inline-flex; align-items: center; justify-content: center;
    }
.cu-import-icon svg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-import-text:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { flex: 1; min-width: 0; }
.cu-import-title:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { font: 600 14px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.cu-import-sub:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { margin-top: 3px; font: 400 12px/1.3 var(--cb-font-regular); color: var(--cb-muted); }
.cu-import-caret:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 18px; height: 18px; fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; flex-shrink: 0; }
.cu-import.is-open .cu-import-caret:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { transform: rotate(180deg); }
.cu-import-body:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      max-height: 0; opacity: 0; overflow: hidden;
      transition: max-height .3s cubic-bezier(.22,1,.36,1), opacity .15s ease;
    }
.cu-import.is-open .cu-import-body:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      max-height: 600px; opacity: 1;
      transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease .1s;
    }
.cu-import-inner:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 14px 16px 22px;
      border-top: 1px solid var(--cb-border);
    }
.cu-import-intro:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 400 12px/18px var(--cb-font-regular); color: var(--cb-muted); margin-bottom: 12px;
    }
.cu-form-label:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 400 10px/1 var(--cb-font-regular);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 6px;
    }
.cu-import-row:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { display: flex; gap: 8px; margin-bottom: 14px; }
.cu-import-row input:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex: 1; padding: 10px 12px; border-radius: 10px;
      border: 1px solid var(--cb-border); background: var(--cb-bg);
      outline: none; font: 400 13px/1 var(--cb-font-regular); color: var(--cb-text);
    }
.cu-import-row input:focus:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-color: var(--cb-link); }
.cu-import-add:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; border: none; cursor: pointer;
      background: var(--cb-commit); color: #fff;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
      padding: 0 16px; border-radius: 10px;
    }
.cu-import-add:hover:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { filter: brightness(1.05); }
.cu-import-drop:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 18px 12px; border-radius: 10px; text-align: center;
      border: 1.5px dashed var(--cb-border);
      background: var(--cb-bg); margin-bottom: 10px;
      font: 400 13px/1.3 var(--cb-font-regular); color: var(--cb-text);
    }
.cu-import-drop-sep:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { color: var(--cb-muted); }
.cu-import-tmpl:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { color:var(--cb-link-text,var(--cb-link)); font-weight: 600; cursor: pointer; }
.cu-import-submit:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 100%; appearance: none; border: none; cursor: pointer;
      background: var(--cb-link); color: #fff;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      padding: 14px 0; border-radius: 999px;
      box-shadow: 0 4px 12px rgba(64,179,222,.32);
    }
/* Customer rows */
.cu-row:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      border-bottom: 1px solid var(--cb-border);
      background: transparent;
      transition: background .15s;
    }
.cu-row.is-expanded:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { background: var(--cb-bg); }
.cu-row-head:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; border: none; cursor: pointer; background: transparent;
      width: 100%; text-align: left;
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      font: inherit; color: inherit;
    }
.cu-avatar:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font: 600 13px/1 var(--cb-font-semibold);
      background: rgba(64,179,222,.14);
      color:var(--cb-link-text,var(--cb-link));
    }
.cu-avatar.is-unknown:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      background: var(--cb-bg); color: var(--cb-muted);
    }
.cu-avatar.is-unknown svg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-row-id:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { flex: 1; min-width: 0; }
.cu-row-name:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 600 14px/1.2 var(--cb-font-semibold);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.cu-row-name.is-unknown:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      color: var(--cb-muted); font-style: italic;
    }
.cu-row-email:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      margin-top: 3px; font: 400 12px/1.3 var(--cb-font-regular); color: var(--cb-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.cu-row-spent:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      text-align: right; flex-shrink: 0;
    }
.cu-row-spent-amt:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 600 14px/1.2 var(--cb-font-semibold); color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
.cu-row-spent-count:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      margin-top: 3px; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.cu-row-caret:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 16px; height: 16px; margin-left: 6px;
      fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      transition: transform .2s;
      flex-shrink: 0;
    }
.cu-row.is-expanded .cu-row-caret:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { transform: rotate(180deg); }
/* Expanded panel */
.cu-row-body:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { padding-bottom: 10px; }
.cu-row-actions:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; gap: 8px;
      padding: 4px 16px 10px 18px;
    }
.cu-action-chip:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-radius: 999px;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
    }
.cu-action-chip svg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cu-action-msg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { background: var(--cb-link); color: #fff; border: none; }
.cu-action-msg:hover:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { filter: brightness(1.05); color: #fff; }
.cu-action-view:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { background: var(--cb-card); color: var(--cb-text); border: 1px solid var(--cb-border); }
/* Order lines (expanded) */
.cu-order:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 14px 10px 18px;
      border-top: 1px dashed var(--cb-border);
    }
.cu-order-date:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex-shrink: 0; padding: 4px 7px; border-radius: 6px;
      background: var(--cb-bg); color: var(--cb-muted);
      margin-top: 1px;
      font: 600 9.5px/1.15 var(--cb-font-semibold);
      letter-spacing: .4px;
      text-align: center; min-width: 44px;
    }
.cu-order-main:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { flex: 1; min-width: 0; }
.cu-order-title:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 500 12.5px/1.35 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; word-break: break-word;
    }
.cu-order-foot:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      margin-top: 4px; display: flex; align-items: center; gap: 12px;
      font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.cu-order-price:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
.cu-order-msg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: inline-flex; align-items: center; gap: 4px;
      color:var(--cb-link-text,var(--cb-link)); cursor: pointer;
      background: transparent; border: none; padding: 4px 0;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1px; text-transform: uppercase;
    }
.cu-order-msg svg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cu-order-spacer:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { flex: 1; }
.cu-order-refund:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 5px 9px; border-radius: 999px;
      border: 1px solid var(--cb-border); background: var(--cb-card);
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1px; text-transform: uppercase;
      color: #c4564a; cursor: pointer;
    }
.cu-order-refund:hover:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { filter: brightness(.96); }
.cu-order-refund.is-disabled:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      background: transparent; color: var(--cb-muted);
      opacity: .55; cursor: not-allowed;
    }
.cu-order-refund svg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cu-empty-orders:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 4px 16px 6px 18px;
      font: 400 11px/1.4 var(--cb-font-regular);
      color: var(--cb-muted); font-style: italic;
    }
/* Pagination info row (uses shared .cb-pager - styles live in site.css) */
.cu-pager-info-row:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      text-align: center;
      font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
      padding: 0 16px 24px;
    }
/* ─── Bottom-sheet primitive ─── */
.cu-sheet:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      position: fixed; inset: 0; z-index: 80;
      pointer-events: none;
    }
.cu-sheet.is-open:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { pointer-events: auto; }
.cu-sheet-backdrop:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.45);
      opacity: 0;
      transition: opacity .25s;
    }
/* v3's overlay controller opens a sheet with `is-open`; the port's `is-shown` still counts (QA item 86). */
.cu-sheet:is(.is-open, .is-shown) .cu-sheet-backdrop:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { opacity: 1; }
.cu-sheet-panel:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      margin: 0 auto;
      max-width: 480px;
      background: var(--cb-card); color: var(--cb-text);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.22,1,.36,1);
      box-shadow: 0 -10px 30px rgba(0,0,0,.25);
      max-height: 85vh;
      display: flex; flex-direction: column;
    }
.cu-sheet:is(.is-open, .is-shown) .cu-sheet-panel:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { transform: translateY(0); }
.cu-sheet-handle:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; justify-content: center;
      padding: 8px 0 4px;
    }
.cu-sheet-handle:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"]))::after {
      content: ''; width: 36px; height: 4px; border-radius: 999px;
      background: var(--cb-border);
    }
.cu-sheet-title:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 8px 16px 12px;
      font: 600 14px/1.2 var(--cb-font-semibold);
      border-bottom: 1px solid var(--cb-border);
    }
.cu-sheet-body:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
      /* Bottom safe-area padding so the last option / sticky-feeling row
         isn't flush with the device edge. Sheets without a footer (sort)
         use this; footed sheets (refund, message) bake the pad into their
         action row. */
      padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
/* Sort sheet options */
.cu-sort-opt:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; border: none; background: transparent; cursor: pointer;
      width: 100%; text-align: left;
      padding: 14px 16px;
      border-bottom: 1px solid var(--cb-border);
      display: flex; align-items: center; gap: 12px;
      font: inherit; color: inherit;
    }
.cu-sort-opt:last-child:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-bottom: none; }
.cu-sort-opt:hover:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { background: var(--cb-bg); }
.cu-radio:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0;
      border: 2px solid var(--cb-border);
      display: inline-flex; align-items: center; justify-content: center;
      transition: border-color .12s;
    }
.cu-sort-opt.is-selected .cu-radio:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-color: var(--cb-link); }
.cu-radio:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"]))::after {
      content: ''; width: 8px; height: 8px; border-radius: 999px;
      background: var(--cb-link);
      transform: scale(0); transition: transform .15s;
    }
.cu-sort-opt.is-selected .cu-radio:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"]))::after { transform: scale(1); }
.cu-sort-opt-text:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { flex: 1; min-width: 0; }
.cu-sort-opt-label:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { font: 600 13px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.cu-sort-opt-hint:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { margin-top: 2px; font: 400 11px/1.3 var(--cb-font-regular); color: var(--cb-muted); }
/* Message sheet */
.cu-msg-form:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { padding: 14px 16px; }
.cu-msg-ctx:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; align-items: center; gap: 10px;
      padding: 10px; margin-bottom: 12px; border-radius: 10px;
      background: var(--cb-bg); border: 1px solid var(--cb-border);
    }
.cu-msg-ctx-date:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 4px 8px; border-radius: 6px; background: var(--cb-card);
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: .6px; color: var(--cb-muted);
      flex-shrink: 0;
    }
.cu-msg-ctx-body:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { flex: 1; min-width: 0; }
.cu-msg-ctx-title:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 500 12px/1.3 var(--cb-font-semibold); color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.cu-msg-ctx-meta:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { margin-top: 2px; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); }
.cu-msg-ctx-price:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text); }
.cu-msg-input:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 100%; box-sizing: border-box;
      padding: 10px 12px; border-radius: 10px;
      border: 1px solid var(--cb-border); background: var(--cb-bg);
      outline: none;
      font: 400 13px/1 var(--cb-font-regular); color: var(--cb-text);
      margin-bottom: 12px;
    }
.cu-msg-input:focus:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-color: var(--cb-link); }
.cu-msg-textarea:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical;
      padding: 12px; border-radius: 10px;
      border: 1px solid var(--cb-border); background: var(--cb-bg);
      outline: none;
      font: 400 13px/1.5 var(--cb-font-regular); color: var(--cb-text);
      margin-bottom: 12px;
      font-family: inherit;
    }
.cu-msg-textarea:focus:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-color: var(--cb-link); }
.cu-msg-help:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); margin-bottom: 14px;
    }
.cu-msg-actions:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { display: flex; gap: 8px; }
.cu-btn-secondary:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex: 1; appearance: none; cursor: pointer;
      padding: 12px 0; border-radius: 999px;
      background: transparent; color: var(--cb-muted);
      border: 1px solid var(--cb-border);
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.3px; text-transform: uppercase;
    }
.cu-btn-primary:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex: 2; appearance: none; cursor: pointer; border: none;
      padding: 12px 0; border-radius: 999px;
      background: var(--cb-link); color: #fff;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.3px; text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(64,179,222,.32);
    }
.cu-btn-primary:disabled:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      background: rgba(64,179,222,.4); cursor: not-allowed; box-shadow: none;
    }
.cu-btn-danger:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex: 2; appearance: none; cursor: pointer; border: none;
      padding: 12px 0; border-radius: 999px;
      background: #c4564a; color: #fff;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.3px; text-transform: uppercase;
    }
.cu-btn-danger:disabled:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      background: rgba(196,86,74,.4); cursor: not-allowed;
    }
/* Refund sheet */
.cu-rf-form:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { padding: 14px 16px 18px; }
.cu-rf-amount-row:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; gap: 8px; margin-bottom: 12px;
    }
.cu-rf-amount-opt:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex: 1; appearance: none; cursor: pointer; text-align: left;
      padding: 10px 12px; border-radius: 10px;
      background: var(--cb-bg);
      border: 1.5px solid var(--cb-border);
      color: var(--cb-text);
      transition: border-color .12s, background .12s;
    }
.cu-rf-amount-opt.is-selected:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      background: rgba(64,179,222,.08); border-color: var(--cb-link);
    }
.cu-rf-amount-label:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { font: 600 12px/1.1 var(--cb-font-semibold); color: var(--cb-text); }
.cu-rf-amount-hint:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { margin-top: 4px; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); }
.cu-rf-partial:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
      padding: 10px 12px; border-radius: 10px;
      border: 1px solid var(--cb-border); background: var(--cb-bg);
    }
.cu-rf-partial.is-over:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { border-color: #c4564a; }
.cu-rf-partial-currency:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { color: var(--cb-muted); font: 500 14px/1 var(--cb-font-semibold); }
.cu-rf-partial input:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      flex: 1; min-width: 0;
      border: none; background: transparent; outline: none;
      font: 500 14px/1 var(--cb-font-semibold); color: var(--cb-text);
    }
.cu-rf-partial-of:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
      flex-shrink: 0;
    }
.cu-rf-reasons:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
    }
.cu-rf-reason:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      appearance: none; cursor: pointer;
      padding: 7px 12px; border-radius: 999px;
      border: 1px solid var(--cb-border);
      background: var(--cb-card);
      color: var(--cb-muted);
      font: 600 11px/1 var(--cb-font-semibold);
      transition: border-color .12s, color .12s, background .12s;
    }
.cu-rf-reason.is-selected:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      border-color: var(--cb-link);
      background: rgba(64,179,222,.08);
      color: var(--cb-text);
    }
.cu-rf-warn:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 10px; margin-bottom: 14px; border-radius: 8px;
      background: rgba(196,86,74,.07); border: 1px solid rgba(196,86,74,.25);
      font: 400 11px/1.45 var(--cb-font-regular); color: var(--cb-text);
    }
.cu-rf-done:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      padding: 28px 20px 24px; text-align: center;
    }
.cu-rf-done-icon:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      width: 56px; height: 56px; border-radius: 999px; margin: 0 auto 14px;
      background: rgba(58,168,106,.14); color: #3aa86a;
      display: inline-flex; align-items: center; justify-content: center;
    }
.cu-rf-done-icon svg:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cu-rf-done-title:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { font: 600 15px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.cu-rf-done-sub:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      margin-top: 6px;
      font: 400 12px/1.5 var(--cb-font-regular); color: var(--cb-muted);
      max-width: 260px; margin-inline: auto;
    }
.cu-rf-done-btn:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) {
      margin-top: 18px;
      appearance: none; cursor: pointer;
      border: 1px solid var(--cb-border); background: var(--cb-card); color: var(--cb-text);
      border-radius: 999px;
      padding: 10px 22px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.3px; text-transform: uppercase;
    }
/* Which order an item is from (tester-r's seller/admin round, item B). */
.cu-order-number:where(body[data-cb-page-css~="store-customers-index"],body[data-cb-page-css~="store-customers-index"] *,:has(>body[data-cb-page-css~="store-customers-index"])) { font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: .02em; }
/* Customers page (cu-*), v3 plan U33.
   Ported verbatim from the handoff's production/store/customers/index.html inline <style>, which is
   byte-identical (modulo indentation) to production-desktop/assets/css/pages/store-customers-index.css.
   Page-scoped by V3::PageCss through `v3_page_css 'store-customers'` (KTD4). */
/* ─────── Customers / Followers (cu-*) ───────
   BACKEND:
     GET    /api/me/customers?tab=&payingOnly=&sort=&q=&page=N
            → { items: [{ email, name, purchases, spent, lastActivity, orders: [...] }],
                total: N, totalPages: N }
     GET    /api/me/followers?q=&page=N
            → { items: [...], total }
     POST   /api/me/followers/import       { emails: [...] | csvFile }
     POST   /api/me/messages               { to, subject, body, orderId? }
     POST   /api/me/refunds                { orderId, amount, reason }     → 200
     GET    /api/me/customers/export.csv   (auth, streams CSV)
     GET    /api/me/followers/export.csv
   Refund window: 12 months from order date. Server is source of
   truth - client disables the button at that threshold but server
   must re-check on POST. */

body.cu-body:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: var(--cb-bg); }

/* Page head */
.cu-head:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 20px 16px 6px;
  background: var(--cb-card);
  border-bottom: 1px solid var(--cb-border);
}
.cu-eyebrow:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 400 11px/1 var(--cb-font-regular);
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cb-muted); margin-bottom: 8px;
}
.cu-h1:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  margin: 0;
  font: 300 28px/1 var(--cb-font-light), Mulish, system-ui;
  color: var(--cb-text); letter-spacing: -.5px;
}

/* Tabs */
.cu-tabs:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg);
  padding: 0 16px;
  position: relative;        /* anchor for the sliding indicator */
}
.cu-tab:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; background: transparent; border: none; cursor: pointer;
  padding: 14px 4px; margin-right: 24px;
  font: 600 12px/1 var(--cb-font-semibold);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cb-muted);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.cu-tab[aria-pressed="true"]:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { color: var(--cb-text); }
/* Slider supersedes the per-tab static underline (mirrors .hm-tab-rail.has-indicator) */
.cu-tabs.has-indicator .cu-tab[aria-pressed="true"]:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-bottom-color: transparent; }
.cu-tab-indicator:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: var(--cb-link);
  transform: translate3d(0, 0, 0);
  transition: transform 240ms cubic-bezier(.32,.72,.24,1),
              width     240ms cubic-bezier(.32,.72,.24,1);
  pointer-events: none;
  will-change: transform, width;
}

/* Toolbar (total count + paying toggle + export) */
.cu-toolbar:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-card);
}
.cu-toolbar-row:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; align-items: baseline; gap: 8px;
}
.cu-toolbar-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 400 11px/1 var(--cb-font-regular);
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cb-muted);
}
.cu-toolbar-count:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 600 22px/1 var(--cb-font-semibold), Mulish, system-ui;
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.cu-toolbar-spacer:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { flex: 1; }
.cu-export:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; background: transparent; border: none; cursor: pointer;
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  color:var(--cb-link-text,var(--cb-link)); padding: 4px 0;
}
.cu-export:hover:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { filter: brightness(.95); }

.cu-paying:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; cursor: pointer;
  background: transparent; border: none; padding: 0;
  font: inherit; color: inherit;
  user-select: none;
}
.cu-paying-knob:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 38px; height: 22px; border-radius: 999px; position: relative;
  background: var(--cb-border-hard);
  transition: background .18s ease;
  flex-shrink: 0;
}
.cu-paying-knob:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"]))::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .18s ease;
}
.cu-paying.is-on .cu-paying-knob:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: var(--cb-link); }
.cu-paying.is-on .cu-paying-knob:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"]))::after { left: 18px; }
.cu-paying-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 500 13px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}

/* Search + sort chip */
.cu-search-wrap:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 12px 16px 10px;
  background: var(--cb-card);
  border-bottom: 1px solid var(--cb-border);
}
.cu-search:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  transition: border-color .15s;
}
.cu-search.is-email:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-color: var(--cb-link); }
.cu-search svg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-search input:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: 400 14px/1 var(--cb-font-regular); color: var(--cb-text);
}
.cu-search-email-pill:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex-shrink: 0;
  font: 600 9px/1 var(--cb-font-semibold);
  letter-spacing: 1.2px; text-transform: uppercase;
  color:var(--cb-link-text,var(--cb-link)); background: rgba(64,179,222,.1);
  padding: 4px 7px; border-radius: 999px;
}
.cu-sort-row:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; gap: 8px; margin-top: 10px; }
.cu-sort-chip:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-card); color: var(--cb-text);
  font: 600 11px/1 var(--cb-font-semibold);
  transition: border-color .15s, background .15s;
}
.cu-sort-chip:hover:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-color: var(--cb-link); }
.cu-sort-chip svg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-sort-chip-value:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { color: var(--cb-muted); font-weight: 500; }

/* Import-followers card (followers tab) */
.cu-import:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  margin: 14px 16px 22px;
  border-radius: 12px;
  border: 1px solid var(--cb-border);
  background: var(--cb-card);
  overflow: hidden;
}
.cu-import-head:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; border: none; background: transparent; cursor: pointer;
  width: 100%; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; color: inherit;
}
.cu-import-icon:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background: rgba(64,179,222,.12); color:var(--cb-link-text,var(--cb-link));
  display: inline-flex; align-items: center; justify-content: center;
}
.cu-import-icon svg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-import-text:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { flex: 1; min-width: 0; }
.cu-import-title:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 14px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.cu-import-sub:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin-top: 3px; font: 400 12px/1.3 var(--cb-font-regular); color: var(--cb-muted); }
.cu-import-caret:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 18px; height: 18px; fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; flex-shrink: 0; }
.cu-import.is-open .cu-import-caret:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { transform: rotate(180deg); }

.cu-import-body:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s cubic-bezier(.22,1,.36,1), opacity .15s ease;
}
.cu-import.is-open .cu-import-body:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  max-height: 600px; opacity: 1;
  transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease .1s;
}
.cu-import-inner:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 14px 16px 22px;
  border-top: 1px solid var(--cb-border);
}
.cu-import-intro:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 400 12px/18px var(--cb-font-regular); color: var(--cb-muted); margin-bottom: 12px;
}
.cu-form-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 400 10px/1 var(--cb-font-regular);
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cb-muted); margin-bottom: 6px;
}
.cu-import-row:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; gap: 8px; margin-bottom: 14px; }
.cu-import-row input:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--cb-border); background: var(--cb-bg);
  outline: none; font: 400 13px/1 var(--cb-font-regular); color: var(--cb-text);
}
.cu-import-row input:focus:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-color: var(--cb-link); }
.cu-import-add:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; border: none; cursor: pointer;
  background: var(--cb-commit); color: #fff;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 0 16px; border-radius: 10px;
}
.cu-import-add:hover:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { filter: brightness(1.05); }
.cu-import-drop:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 18px 12px; border-radius: 10px; text-align: center;
  border: 1.5px dashed var(--cb-border);
  background: var(--cb-bg); margin-bottom: 10px;
  font: 400 13px/1.3 var(--cb-font-regular); color: var(--cb-text);
}
.cu-import-drop-sep:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { color: var(--cb-muted); }
.cu-import-tmpl:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { color:var(--cb-link-text,var(--cb-link)); font-weight: 600; cursor: pointer; }
.cu-import-submit:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 100%; appearance: none; border: none; cursor: pointer;
  background: var(--cb-link); color: #fff;
  font: 600 12px/1 var(--cb-font-semibold);
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 14px 0; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(64,179,222,.32);
}

/* Customer rows */
.cu-row:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  border-bottom: 1px solid var(--cb-border);
  background: transparent;
  transition: background .15s;
}
.cu-row.is-expanded:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: var(--cb-bg); }
.cu-row-head:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; border: none; cursor: pointer; background: transparent;
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  font: inherit; color: inherit;
}
.cu-avatar:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--cb-font-semibold);
  background: rgba(64,179,222,.14);
  color:var(--cb-link-text,var(--cb-link));
}
.cu-avatar.is-unknown:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  background: var(--cb-bg); color: var(--cb-muted);
}
.cu-avatar.is-unknown svg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cu-row-id:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { flex: 1; min-width: 0; }
.cu-row-name:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 600 14px/1.2 var(--cb-font-semibold);
  color: var(--cb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cu-row-name.is-unknown:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  color: var(--cb-muted); font-style: italic;
}
.cu-row-email:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  margin-top: 3px; font: 400 12px/1.3 var(--cb-font-regular); color: var(--cb-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cu-row-spent:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  text-align: right; flex-shrink: 0;
}
.cu-row-spent-amt:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 600 14px/1.2 var(--cb-font-semibold); color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.cu-row-spent-count:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  margin-top: 3px; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
}
.cu-row-caret:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 16px; height: 16px; margin-left: 6px;
  fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s;
  flex-shrink: 0;
}
.cu-row.is-expanded .cu-row-caret:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { transform: rotate(180deg); }

/* Expanded panel */
.cu-row-body:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { padding-bottom: 10px; }
.cu-row-actions:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; gap: 8px;
  padding: 4px 16px 10px 18px;
}
.cu-action-chip:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1.2px; text-transform: uppercase;
}
.cu-action-chip svg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cu-action-msg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: var(--cb-link); color: #fff; border: none; }
.cu-action-msg:hover:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { filter: brightness(1.05); color: #fff; }
.cu-action-view:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: var(--cb-card); color: var(--cb-text); border: 1px solid var(--cb-border); }

/* Order lines (expanded) */
.cu-order:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px 10px 18px;
  border-top: 1px dashed var(--cb-border);
}
.cu-order-date:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex-shrink: 0; padding: 4px 7px; border-radius: 6px;
  background: var(--cb-bg); color: var(--cb-muted);
  margin-top: 1px;
  font: 600 9.5px/1.15 var(--cb-font-semibold);
  letter-spacing: .4px;
  text-align: center; min-width: 44px;
}
.cu-order-main:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { flex: 1; min-width: 0; }
.cu-order-title:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 500 12.5px/1.35 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.cu-order-foot:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  margin-top: 4px; display: flex; align-items: center; gap: 12px;
  font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
}
.cu-order-price:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.cu-order-msg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: inline-flex; align-items: center; gap: 4px;
  color:var(--cb-link-text,var(--cb-link)); cursor: pointer;
  background: transparent; border: none; padding: 4px 0;
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1px; text-transform: uppercase;
}
.cu-order-msg svg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cu-order-spacer:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { flex: 1; }
.cu-order-refund:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--cb-border); background: var(--cb-card);
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1px; text-transform: uppercase;
  color: #c4564a; cursor: pointer;
}
.cu-order-refund:hover:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { filter: brightness(.96); }
.cu-order-refund.is-disabled:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  background: transparent; color: var(--cb-muted);
  opacity: .55; cursor: not-allowed;
}
.cu-order-refund svg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cu-empty-orders:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 4px 16px 6px 18px;
  font: 400 11px/1.4 var(--cb-font-regular);
  color: var(--cb-muted); font-style: italic;
}

/* Pagination info row (uses shared .cb-pager - styles live in site.css) */
.cu-pager-info-row:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  text-align: center;
  font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
  padding: 0 16px 24px;
}

/* ─── Bottom-sheet primitive ─── */
.cu-sheet:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none;
}
.cu-sheet.is-open:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { pointer-events: auto; }
.cu-sheet-backdrop:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .25s;
}
.cu-sheet.is-shown .cu-sheet-backdrop:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { opacity: 1; }
.cu-sheet-panel:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  max-width: 480px;
  background: var(--cb-card); color: var(--cb-text);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  max-height: 85vh;
  display: flex; flex-direction: column;
}
.cu-sheet.is-shown .cu-sheet-panel:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { transform: translateY(0); }
.cu-sheet-handle:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; justify-content: center;
  padding: 8px 0 4px;
}
.cu-sheet-handle:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"]))::after {
  content: ''; width: 36px; height: 4px; border-radius: 999px;
  background: var(--cb-border);
}
.cu-sheet-title:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 8px 16px 12px;
  font: 600 14px/1.2 var(--cb-font-semibold);
  border-bottom: 1px solid var(--cb-border);
}
.cu-sheet-body:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Bottom safe-area padding so the last option / sticky-feeling row
     isn't flush with the device edge. Sheets without a footer (sort)
     use this; footed sheets (refund, message) bake the pad into their
     action row. */
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

/* Sort sheet options */
.cu-sort-opt:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; border: none; background: transparent; cursor: pointer;
  width: 100%; text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cb-border);
  display: flex; align-items: center; gap: 12px;
  font: inherit; color: inherit;
}
.cu-sort-opt:last-child:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-bottom: none; }
.cu-sort-opt:hover:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: var(--cb-bg); }
.cu-radio:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid var(--cb-border);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .12s;
}
.cu-sort-opt.is-selected .cu-radio:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-color: var(--cb-link); }
.cu-radio:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"]))::after {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--cb-link);
  transform: scale(0); transition: transform .15s;
}
.cu-sort-opt.is-selected .cu-radio:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"]))::after { transform: scale(1); }
.cu-sort-opt-text:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { flex: 1; min-width: 0; }
.cu-sort-opt-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 13px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.cu-sort-opt-hint:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin-top: 2px; font: 400 11px/1.3 var(--cb-font-regular); color: var(--cb-muted); }

/* Message sheet */
.cu-msg-form:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { padding: 14px 16px; }
.cu-msg-ctx:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin-bottom: 12px; border-radius: 10px;
  background: var(--cb-bg); border: 1px solid var(--cb-border);
}
.cu-msg-ctx-date:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 4px 8px; border-radius: 6px; background: var(--cb-card);
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: .6px; color: var(--cb-muted);
  flex-shrink: 0;
}
.cu-msg-ctx-body:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { flex: 1; min-width: 0; }
.cu-msg-ctx-title:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 500 12px/1.3 var(--cb-font-semibold); color: var(--cb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cu-msg-ctx-meta:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin-top: 2px; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); }
.cu-msg-ctx-price:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text); }
.cu-msg-input:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--cb-border); background: var(--cb-bg);
  outline: none;
  font: 400 13px/1 var(--cb-font-regular); color: var(--cb-text);
  margin-bottom: 12px;
}
.cu-msg-input:focus:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-color: var(--cb-link); }
.cu-msg-textarea:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical;
  padding: 12px; border-radius: 10px;
  border: 1px solid var(--cb-border); background: var(--cb-bg);
  outline: none;
  font: 400 13px/1.5 var(--cb-font-regular); color: var(--cb-text);
  margin-bottom: 12px;
  font-family: inherit;
}
.cu-msg-textarea:focus:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-color: var(--cb-link); }
.cu-msg-help:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); margin-bottom: 14px;
}
.cu-msg-actions:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; gap: 8px; }
.cu-btn-secondary:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex: 1; appearance: none; cursor: pointer;
  padding: 12px 0; border-radius: 999px;
  background: transparent; color: var(--cb-muted);
  border: 1px solid var(--cb-border);
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.3px; text-transform: uppercase;
}
.cu-btn-primary:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex: 2; appearance: none; cursor: pointer; border: none;
  padding: 12px 0; border-radius: 999px;
  background: var(--cb-link); color: #fff;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.3px; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(64,179,222,.32);
}
.cu-btn-primary:disabled:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  background: rgba(64,179,222,.4); cursor: not-allowed; box-shadow: none;
}
.cu-btn-danger:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex: 2; appearance: none; cursor: pointer; border: none;
  padding: 12px 0; border-radius: 999px;
  background: #c4564a; color: #fff;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.3px; text-transform: uppercase;
}
.cu-btn-danger:disabled:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  background: rgba(196,86,74,.4); cursor: not-allowed;
}

/* Refund sheet */
.cu-rf-form:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { padding: 14px 16px 18px; }
.cu-rf-amount-row:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.cu-rf-amount-opt:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex: 1; appearance: none; cursor: pointer; text-align: left;
  padding: 10px 12px; border-radius: 10px;
  background: var(--cb-bg);
  border: 1.5px solid var(--cb-border);
  color: var(--cb-text);
  transition: border-color .12s, background .12s;
}
.cu-rf-amount-opt.is-selected:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  background: rgba(64,179,222,.08); border-color: var(--cb-link);
}
.cu-rf-amount-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 12px/1.1 var(--cb-font-semibold); color: var(--cb-text); }
.cu-rf-amount-hint:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin-top: 4px; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); }

.cu-rf-partial:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--cb-border); background: var(--cb-bg);
}
.cu-rf-partial.is-over:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { border-color: #c4564a; }
.cu-rf-partial-currency:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { color: var(--cb-muted); font: 500 14px/1 var(--cb-font-semibold); }
.cu-rf-partial input:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font: 500 14px/1 var(--cb-font-semibold); color: var(--cb-text);
}
.cu-rf-partial-of:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
  flex-shrink: 0;
}

.cu-rf-reasons:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.cu-rf-reason:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  appearance: none; cursor: pointer;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-card);
  color: var(--cb-muted);
  font: 600 11px/1 var(--cb-font-semibold);
  transition: border-color .12s, color .12s, background .12s;
}
.cu-rf-reason.is-selected:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  border-color: var(--cb-link);
  background: rgba(64,179,222,.08);
  color: var(--cb-text);
}

.cu-rf-warn:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 10px; margin-bottom: 14px; border-radius: 8px;
  background: rgba(196,86,74,.07); border: 1px solid rgba(196,86,74,.25);
  font: 400 11px/1.45 var(--cb-font-regular); color: var(--cb-text);
}

.cu-rf-done:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  padding: 28px 20px 24px; text-align: center;
}
.cu-rf-done-icon:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  width: 56px; height: 56px; border-radius: 999px; margin: 0 auto 14px;
  background: rgba(58,168,106,.14); color: #3aa86a;
  display: inline-flex; align-items: center; justify-content: center;
}
.cu-rf-done-icon svg:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cu-rf-done-title:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 15px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.cu-rf-done-sub:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  margin-top: 6px;
  font: 400 12px/1.5 var(--cb-font-regular); color: var(--cb-muted);
  max-width: 260px; margin-inline: auto;
}
.cu-rf-done-btn:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
  margin-top: 18px;
  appearance: none; cursor: pointer;
  border: 1px solid var(--cb-border); background: var(--cb-card); color: var(--cb-text);
  border-radius: 999px;
  padding: 10px 22px;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.3px; text-transform: uppercase;
}
  

/* ─── Added by the port (v3 plan U33), not the handoff ───────────────────────
   1. The prototype's sheets use `.is-open` for pointer events and `.is-shown`,
      added a frame later, for the transition. U9's overlay host adds `.is-open`
      only, after its own forced layout, which is the same two-step in one
      class; these two rules map the `.is-shown` ones onto it. */
.cu-sheet.is-open .cu-sheet-backdrop:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { opacity: 1; }
.cu-sheet.is-open .cu-sheet-panel:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { transform: translateY(0); }

/* 2. The import card is a native <details>, so it opens with no script; the
      handoff's own head and body classes sit on the summary and the panel. */
.cu-import > summary:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { list-style: none; }
.cu-import > summary:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"]))::-webkit-details-marker { display: none; }
.cu-import[open] .cu-import-caret:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { transform: rotate(180deg); }
.cu-import[open] .cu-import-body:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { max-height: none; }

/* 3. Four elements the handoff has no class for: the export form (a wrapper the
      POST needs and the toolbar must not see), the search form (the same), the
      import's "send an update" row (a live control the handoff does not draw,
      U33-followers-import-controls) and the store-not-enabled notice. */
.cu-export-form:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])), .cu-search-form:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: contents; }
.cu-import-update:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px;
                    font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted); }
.cu-import-notice:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
                    background: var(--cb-bg); border: 1px solid var(--cb-border);
                    font: 400 12px/1.5 var(--cb-font-regular); color: var(--cb-text); }
.cu-import-notice a:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { color: var(--cb-link); }
/* fix-a's dashboard sweep: master's "Download CSV template" link (SD8), and a
   tip's own line under its item (SD4), its amount in the muted tone. */
.cu-import-template:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: inline-block; margin: 0 0 8px;
                      font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-link); }
.cu-order-tip .cu-order-price:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { color: var(--cb-muted); }
/* The SDQ rulings: master's page sizes (SDQ10) and the customer's rating of an
   item (SDQ12). */
.cu-per-page:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 8px 0 0;
               font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted); }
.cu-per-page-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin-right: 4px; }
.cu-per-page-opt:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { padding: 2px 8px; border-radius: 6px; color: var(--cb-text); text-decoration: none; }
.cu-per-page-opt.is-current:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: var(--cb-bg); border: 1px solid var(--cb-border); font-weight: 700; }
.cu-order-rating:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font-size: 12px; margin-top: 2px; }

/* 4. The list sits in a Turbo Frame, which is an inline element the page's flow
      would otherwise size wrongly. */
.cu-body turbo-frame:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: contents; }

/* 5. The import's own two additions: the count line the controller writes, and the confirm row it
      reveals before an import is sent (v3 plan U33's test scenario). */
.cu-import-count:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin: 10px 0 0; font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted); }
.cu-import-confirm:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0;
                     padding: 10px 12px; border-radius: 8px; background: var(--cb-bg);
                     border: 1px solid var(--cb-border);
                     font: 400 12px/1.5 var(--cb-font-regular); color: var(--cb-text); }
.cu-import-confirm-yes:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])), .cu-import-confirm-no:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { appearance: none; cursor: pointer; border-radius: 999px;
                     padding: 6px 12px; font: 500 12px/1 var(--cb-font-semibold), var(--cb-font-regular); }
.cu-import-confirm-yes:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: var(--cb-link); color: #fff; border: 0; }
.cu-import-confirm-no:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { background: transparent; color: var(--cb-muted); border: 1px solid var(--cb-border); }

/* 6. The tab strip's underline. The prototype builds `.cu-tab-indicator` in JavaScript and slides
      it under the pressed tab, measuring the tab's box; the ported CSS therefore has no static
      underline at all (`.cu-tab` sets `border-bottom: 2px solid transparent` and the pressed rule
      changes only the colour of the text). Rendering the handoff's own element inside the pressed
      tab puts the same 2px line in the same place with no measurement and no script: it stretches
      to the tab rather than being translated to it. */
.cu-tab:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { position: relative; text-decoration: none; }
.cu-tab .cu-tab-indicator:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { left: 0; right: 0; width: auto; transform: none; transition: none;
                            bottom: -3px; } /* -1px from the strip, past the tab's own 2px transparent bottom border */
/* Which order an item is from (tester-r's seller/admin round, item B). */
.cu-order-number:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: .02em; }

/* Store-management parity (fix-c's sweep M13, M14): the customers filters and the followers counts. */
.cu-filters:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 10px; }
.cu-filter:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cu-filter-product:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { flex: 1 1 200px; }
.cu-filter-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 10px/1 var(--cb-font-semibold); letter-spacing: 1px; text-transform: uppercase; color: var(--cb-muted); }
.cu-filter-select:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])), .cu-filter-date:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
      height: 36px; padding: 0 10px; border-radius: 10px; min-width: 0;
      border: 1px solid var(--cb-border); background: var(--cb-bg); color: var(--cb-text);
      font: 400 13px/1 var(--cb-font-regular);
    }
.cu-filter-select:focus:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])), .cu-filter-date:focus:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { outline: none; border-color: var(--cb-link); }
.cu-filter-actions:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: flex; align-items: center; gap: 10px; }
.cu-filter-apply:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
      appearance: none; cursor: pointer; height: 36px; padding: 0 14px; border-radius: 10px;
      border: 1px solid var(--cb-link); background: var(--cb-link); color: #fff;
      font: 600 12px/1 var(--cb-font-semibold);
    }
.cu-filter-clear:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-link-text, var(--cb-link)); text-decoration: underline; }
.cu-search-wrap > .cu-filter-actions:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin-top: 10px; }
.cu-foll-stats:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 16px 14px; }
.cu-foll-stat:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) {
      display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px;
      background: var(--cb-card); border: 1px solid var(--cb-border);
    }
.cu-foll-stat-value:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 20px/1.1 var(--cb-font-semibold); color: var(--cb-text); font-variant-numeric: tabular-nums; }
.cu-foll-stat-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 600 12px/1.2 var(--cb-font-semibold); color: var(--cb-text); }
.cu-foll-stat-period:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 400 11px/1.2 var(--cb-font-regular); color: var(--cb-muted); }
.cu-row-since-label:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); white-space: nowrap; }
.cu-row-since-date:where(body[data-cb-page-css~="store-customers"],body[data-cb-page-css~="store-customers"] *,:has(>body[data-cb-page-css~="store-customers"])) { margin-top: 4px; font: 600 13px/1.2 var(--cb-font-semibold); color: var(--cb-text); white-space: nowrap; }
/* Sales & coupons (sl-*): the inline <style> of the handoff's
   production-desktop/store/discounts/index.html, ported verbatim (v3 plan U34, KD6, KTD4).
   The mobile build's copy is v3/mobile/pages/store-discounts.css; the two files are the same
   rules in the same order, differing in four values (.sl-mode-icon background, color and svg
   size, .sl-notify background) plus this file's 13-line desktop layout layer at the end, which
   the handoff writes after the shared block and so does this file, byte for byte.
   Page-scoped: v3_page_css 'store-discounts' marks the body and lib/v3/page_css.rb scopes every
   rule here to it, so nothing below reaches another page.
   Two rules are inert and kept because the handoff has them (KD6): `.sl-card-body` in the desktop
   layer, which no markup renders (discounts.js writes the card's fields as direct children of
   `.sl-card`), and `.sl-list>.sl-empty` alongside it. */
.sl-page:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-bg); min-height: 100vh; }
body.sl-body:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-bg); }
.sl-head:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: var(--cb-card);
border-bottom: 1px solid var(--cb-border);
padding: 20px 16px 18px;
}
.sl-head-row:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 14px;
}
.sl-mode-wrap:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { position: relative; flex: 1; min-width: 0; }
.sl-mode-btn:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 100%; min-height: 56; padding: 8px 12px;
background: var(--cb-card); border: 1px solid var(--cb-border-hard);
border-radius: 8px;
display: flex; align-items: center; gap: 10px;
cursor: pointer; text-align: left;
font: inherit; color: inherit;
transition: border-color .15s;
}
.sl-mode-btn[aria-expanded="true"]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: var(--cb-link); }
.sl-mode-icon:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px;
background: transparent;
display: inline-flex; align-items: center; justify-content: center;
color: #f5a623;
}
.sl-mode-icon svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 24px; height: 24px; }
.sl-mode-text:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { flex: 1; min-width: 0; }
.sl-mode-name:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: block;
font: 500 15px/1.2 var(--cb-font-regular); color: var(--cb-text);
}
.sl-mode-name-count:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-muted); font-weight: 400; }
.sl-mode-sub:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: block; margin-top: 2px;
font: 400 11px/1.2 var(--cb-font-regular); color: var(--cb-muted);
}
.sl-mode-chevron:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 14px; height: 14px; flex-shrink: 0;
transition: transform .15s; fill: var(--cb-muted);
}
.sl-mode-btn[aria-expanded="true"] .sl-mode-chevron:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { transform: rotate(180deg); }
.sl-mode-pop:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px;
box-shadow: 0 8px 24px rgba(20,23,33,.18);
overflow: hidden;
}
.sl-mode-pop[hidden]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: none; }
.sl-mode-pop-item:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
padding: 12px 14px; cursor: pointer;
background: transparent;
border: none; width: 100%; text-align: left;
font: inherit; color: inherit;
transition: background .12s;
}
.sl-mode-pop-item:hover:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-bg); }
.sl-mode-pop-item.is-active:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-bg); }
.sl-mode-pop-label:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { font: 500 14px/1.2 var(--cb-font-regular); color: var(--cb-text); }
.sl-mode-pop-sub:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { font: 400 12px/1.3 var(--cb-font-regular); color: var(--cb-muted); margin-top: 3px; }
.sl-cancel:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: transparent; border: none; cursor: pointer;
color: #ec4d4d;
font: 600 12px/1 var(--cb-font-regular);
letter-spacing: 1.6px; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 0; align-self: flex-start; margin-top: 4px;
}
.sl-cancel svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sl-copy:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
margin-bottom: 12px;
font: 400 13px/18px var(--cb-font-regular); color: var(--cb-muted);
}
.sl-notify:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: transparent;
border: 1px solid var(--cb-border-hard);
border-radius: 8px;
overflow: hidden;
}
.sl-notify.is-on:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: rgba(64,179,222,.08); border-color: var(--cb-link); }
.sl-notify-row:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: flex; align-items: flex-start; gap: 0; }
.sl-notify-toggle:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex: 1; min-width: 0;
background: transparent; border: none;
padding: 12px 4px 12px 14px;
display: flex; align-items: center; gap: 12px;
cursor: pointer; text-align: left;
font: inherit; color: inherit;
}
.sl-checkbox:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 22px; height: 22px; border-radius: 4px;
background: var(--cb-card);
border: 1.5px solid var(--cb-border);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .15s, border-color .15s;
}
.sl-checkbox svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.sl-checkbox.is-on:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-link); border-color: var(--cb-link); }
.sl-checkbox.is-on svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { opacity: 1; }
.sl-notify-text:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { flex: 1; min-width: 0; }
.sl-notify-title:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: block; font: 500 14px/1.2 var(--cb-font-regular); color: var(--cb-text); }
.sl-notify-sub:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: block; margin-top: 3px; font: 400 12px/16px var(--cb-font-regular); color: var(--cb-muted); }
.sl-notify-sub b:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { font-weight: 600; color: var(--cb-text); }
.sl-notify-info:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
margin: 12px 12px 0 0;
width: 22px; height: 22px; padding: 0;
background: transparent;
color: var(--cb-muted);
border: 1.5px solid var(--cb-muted);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
font: 700 12px/1 ui-monospace, monospace;
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s;
}
.sl-notify-info[aria-expanded="true"]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: var(--cb-text); color: var(--cb-card); border-color: var(--cb-text);
}
.sl-notify-tip:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
margin: 0 12px 12px;
padding: 12px 14px;
background: #2c3242; color: #f4f6fa;
border-radius: 6px;
font: 400 12px/17px var(--cb-font-regular);
position: relative;
}
.sl-notify-tip[hidden]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: none; }
.sl-notify-tip:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"]))::before {
content: ''; position: absolute; top: -6px; right: 30px;
width: 12px; height: 12px; background: #2c3242;
transform: rotate(45deg);
}
.sl-notify-feature-row:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: flex; align-items: center; gap: 12px;
padding: 4px 14px 12px;
font: 600 12px/1 var(--cb-font-regular); letter-spacing: .4px;
}
.sl-notify-feature-row[hidden]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: none; }
.sl-feature-btn:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: transparent; border: none; cursor: pointer;
padding: 0; font: inherit;
}
.sl-feature-btn.is-all:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color:var(--cb-link-text,var(--cb-link)); }
.sl-feature-btn.is-none:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-muted); font-weight: 400; }
.sl-notify-feature-sep:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-muted); font-weight: 400; }
.sl-notify-feature-hint:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
margin-left: auto;
font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: 0;
}
.sl-list:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
padding: 18px 16px 22px;
display: flex; flex-direction: column; gap: 14px;
}
.sl-card:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: var(--cb-card);
border: 1px solid var(--cb-border);
  box-shadow: 0 6px 18px rgba(20,23,33,.10), 0 2px 4px rgba(20,23,33,.06);
  transition: box-shadow .18s, transform .18s;
border-radius: 10px;
padding: 14px;
display: flex; flex-direction: column; gap: 14px;
position: relative;
}
.sl-card.has-conflict:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: #ec4d4d; }
.sl-card:hover:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { box-shadow: 0 12px 28px rgba(20,23,33,.16), 0 2px 5px rgba(20,23,33,.08); }
[data-theme="light"] .sl-card:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: rgba(20,23,33,.06); }
.sl-card-head:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: flex; align-items: center; gap: 10px; }
.sl-card-idx:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
font: 600 11px/1 var(--cb-font-regular);
letter-spacing: 1.6px; text-transform: uppercase;
color: var(--cb-muted);
}
.sl-card-idx-total:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { font-weight: 400; }
.sl-status:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
font: 600 10px/1 var(--cb-font-regular); letter-spacing: .4px;
padding: 4px 8px; border-radius: 999px;
display: inline-flex; align-items: center; gap: 5px;
}
.sl-status-dot:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 6px; height: 6px; border-radius: 50%; }
.sl-status.is-active:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: rgba(94,157,93,.14); color: #3f7e3e; }
.sl-status.is-active .sl-status-dot:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: #5e9d5d; }
.sl-status.is-soon:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: rgba(245,180,0,.14); color: #9c7a00; }
.sl-status.is-soon .sl-status-dot:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: #f5b400; }
.sl-status.is-ended:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: rgba(122,132,153,.14); color: #5a6478; }
.sl-status.is-ended .sl-status-dot:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: #9aa3b6; }
/* A rule the server kept as a draft (a refused save): not running, whatever its dates
   (tester-r's Sales & coupons round). The error colours the card's own field messages use. */
.sl-status.is-draft:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: rgba(214,69,69,.12); color: #b23b3b; }
.sl-status.is-draft .sl-status-dot:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: #d64545; }
.sl-delete:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
margin-left: auto;
width: 30px; height: 30px; padding: 0;
background: transparent; border: none; cursor: pointer;
color: var(--cb-muted); border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
}
.sl-delete svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sl-delete:hover:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: #ec4d4d; background: rgba(236,77,77,.06); }
.sl-label:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
font: 400 11px/1 var(--cb-font-regular);
letter-spacing: 1.4px; text-transform: uppercase;
color: var(--cb-muted); margin-bottom: 8px;
}
.sl-label-aux:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--cb-muted);
}
.sl-code-input:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--cb-border-hard); border-radius: 6px;
background: var(--cb-card); color: var(--cb-text);
font: 600 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 1px;
outline: none; text-transform: uppercase;
}
.sl-code-input:focus:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: var(--cb-link); }
.sl-applies-wrap:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { position: relative; }
.sl-applies-btn:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 100%; min-height: 48px; padding: 8px 10px;
background: var(--cb-card); border: 1px solid var(--cb-border-hard);
border-radius: 6px;
display: flex; align-items: center; gap: 10px;
cursor: pointer; text-align: left; outline: none;
font: inherit; color: inherit;
}
.sl-applies-btn[aria-expanded="true"]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: var(--cb-link); }
.sl-applies-thumb:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 32px; height: 32px; flex-shrink: 0; border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--cb-border);
background-size: cover; background-position: center;
}
.sl-applies-icon:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 32px; height: 32px; flex-shrink: 0; border-radius: 4px;
background: rgba(64,179,222,.12);
display: inline-flex; align-items: center; justify-content: center;
color:var(--cb-link-text,var(--cb-link));
}
.sl-applies-icon svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-applies-text:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { flex: 1; min-width: 0; }
.sl-applies-name:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
font: 500 14px/1.2 var(--cb-font-regular); color: var(--cb-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-applies-meta:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { font: 400 11px/1.2 var(--cb-font-regular); color: var(--cb-muted); margin-top: 2px; }
.sl-applies-placeholder:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { flex: 1; font: 400 14px/1 var(--cb-font-regular); color: var(--cb-muted); }
.sl-applies-caret:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 14px; height: 14px; flex-shrink: 0; fill: var(--cb-muted); }
.sl-applies-pop:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 55; /* over the sticky save bar (z 50), as .sl-cal: on the last card its lower options were under the bar (tester-r's Sales & coupons round, item 9a) */
background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 6px;
box-shadow: 0 8px 24px rgba(20,23,33,.18);
overflow: hidden;
display: flex; flex-direction: column;
max-height: 360px;
}
.sl-applies-pop[hidden]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: none; }
.sl-applies-search:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex-shrink: 0;
padding: 10px 10px 8px;
background: var(--cb-card);
border-bottom: 1px solid var(--cb-border);
position: relative;
}
.sl-applies-search input:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 100%; height: 36px; padding: 0 32px;
background: var(--cb-bg);
border: 1px solid var(--cb-border-hard); border-radius: 6px;
color: var(--cb-text);
font: 500 13px/1 var(--cb-font-regular);
outline: none;
}
.sl-applies-search input:focus:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: var(--cb-link); }
.sl-applies-search-icon:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
position: absolute; left: 22px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
pointer-events: none;
}
.sl-applies-search-clear:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
position: absolute; right: 18px; top: 50%;
transform: translateY(-50%);
width: 18px; height: 18px; padding: 0;
background: var(--cb-border); color: var(--cb-card);
border: none; border-radius: 50%;
display: none; align-items: center; justify-content: center;
cursor: pointer;
}
.sl-applies-search-clear.is-shown:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: inline-flex; }
.sl-applies-search-clear svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.sl-applies-list:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex: 1; min-height: 0; overflow-y: auto;
}
.sl-applies-opt:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
padding: 10px 12px; display: flex; align-items: center; gap: 10px;
background: transparent; cursor: pointer;
border: none; width: 100%; text-align: left;
font: inherit; color: inherit;
transition: background .12s;
}
.sl-applies-opt:hover:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-bg); }
.sl-applies-opt.is-active:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-bg); }
.sl-applies-opt-thumb:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 28px; height: 28px; flex-shrink: 0; border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--cb-border);
background-size: cover; background-position: center;
}
.sl-applies-opt-icon:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 28px; height: 28px; flex-shrink: 0; border-radius: 4px;
background: rgba(64,179,222,.12);
display: inline-flex; align-items: center; justify-content: center;
color:var(--cb-link-text,var(--cb-link));
}
.sl-applies-opt-icon svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-applies-opt-text:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { flex: 1; min-width: 0; }
.sl-applies-opt-title:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { font: 500 13px/1.2 var(--cb-font-regular); color: var(--cb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-applies-opt-sub:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { font: 400 11px/1.2 var(--cb-font-regular); color: var(--cb-muted); margin-top: 2px; }
.sl-applies-opt-check:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--cb-link); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sl-applies-storewide:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-bottom: 1px solid var(--cb-border); }
.sl-applies-section-head:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
padding: 10px 12px 4px;
font: 400 10px/1 var(--cb-font-regular); letter-spacing: 1.6px; text-transform: uppercase;
color: var(--cb-muted);
border-top: 1px solid var(--cb-border);
margin-top: 2px;
}
.sl-applies-empty:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
padding: 20px 14px;
text-align: center;
font: 400 12px/17px var(--cb-font-regular); color: var(--cb-muted);
}
.sl-applies-empty b:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-text); }
.sl-presets:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: flex; gap: 6px; margin-bottom: 10px;
overflow-x: auto; padding-bottom: 2px;
scrollbar-width: none;
}
.sl-presets:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"]))::-webkit-scrollbar { display: none; }
.sl-preset:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex-shrink: 0; height: 30px; padding: 0 12px;
background: var(--cb-card); color: var(--cb-muted);
border: 1px solid var(--cb-border-hard);
border-radius: 999px;
font: 500 12px/1 var(--cb-font-regular);
cursor: pointer; white-space: nowrap;
transition: background .12s, color .12s, border-color .12s;
}
.sl-preset.is-active:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: var(--cb-link); color: #fff; border-color: var(--cb-link);
}
.sl-amount-row:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: flex; gap: 8px; align-items: flex-start; }
.sl-amount-input:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex: 1; min-width: 0; height: 44px; padding: 0 12px;
border: 1px solid var(--cb-border-hard); border-radius: 6px;
background: var(--cb-card); color: var(--cb-text);
font: 500 15px/1 var(--cb-font-regular);
outline: none;
-moz-appearance: textfield;
}
.sl-amount-input:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"]))::-webkit-inner-spin-button, .sl-amount-input:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"]))::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sl-amount-input:focus:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: var(--cb-link); }
.sl-unit-toggle:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: flex;
background: var(--cb-bg);
border: 1px solid var(--cb-border-hard);
border-radius: 6px;
padding: 2px;
}
.sl-unit-btn:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 38px; height: 40px;
background: transparent;
border: none; border-radius: 5px;
font: 600 14px/1 var(--cb-font-regular);
color: var(--cb-muted);
cursor: pointer;
transition: background .12s, color .12s, box-shadow .12s;
}
.sl-unit-btn.is-active:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: var(--cb-card); color: var(--cb-text);
box-shadow: 0 1px 2px rgba(20,23,33,.12);
}
.sl-preview:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
margin-top: 10px; padding: 10px 12px;
background: rgba(123,193,120,.08);
border: 1px solid rgba(123,193,120,.35);
border-radius: 6px;
display: flex; align-items: center; gap: 10px;
font: 400 13px/1.3 var(--cb-font-regular); color: var(--cb-text);
}
.sl-preview[hidden]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: none; }
.sl-preview svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: #5e9d5d; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sl-preview-was:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { text-decoration: line-through; color: var(--cb-muted); }
.sl-preview-new:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: #3f7e3e; font-weight: 700; }
.sl-preview-save:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-muted); margin-left: 8px; white-space: nowrap; }
.sl-preview > span:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { flex: 1; min-width: 0; }
.sl-dates:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sl-dates.is-single:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { grid-template-columns: 1fr; }
.sl-date-wrap:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { position: relative; }
.sl-date-input:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 100%; height: 44px; padding: 0 36px 0 12px;
border: 1px solid var(--cb-border-hard); border-radius: 6px;
background: var(--cb-card); color: var(--cb-text);
font: 500 14px/1 var(--cb-font-regular);
outline: none;
}
.sl-date-input:focus:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: var(--cb-link); }
.sl-date-cal-btn:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; padding: 0; border-radius: 6px;
background: transparent; border: none; color: var(--cb-muted); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.sl-date-cal-btn:hover:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-text); }
.sl-date-cal-btn svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-cal:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
position: absolute; z-index: 55; /* over the sticky save bar (z 50): QA item 90 */
top: calc(100% + 6px); left: 0;
width: min(320px, calc(100vw - 32px));
background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 10px;
box-shadow: 0 10px 28px rgba(20,23,33,.18);
padding: 14px;
}
.sl-cal.is-right:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { left: auto; right: 0; }
/* Opens above its field near the foot of the page (QA item 90, discount_rules_controller#placeCalendar). */
.sl-cal.is-up:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { top: auto; bottom: calc(100% + 6px); }
.sl-cal-head:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
}
.sl-cal-nav:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 32px; height: 32px; padding: 0; border-radius: 6px;
background: transparent; border: 1px solid var(--cb-border-hard); color: var(--cb-text); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.sl-cal-nav svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sl-cal-title:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex: 1; text-align: center;
font: 600 13px/1 var(--cb-font-semibold); color: var(--cb-text);
}
.sl-cal-weekdays:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
margin-bottom: 6px;
}
.sl-cal-weekday:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
text-align: center;
font: 500 11px/1 var(--cb-font-regular); letter-spacing: 0.6px;
color: var(--cb-muted); padding: 6px 0;
}
.sl-cal-grid:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.sl-cal-day:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
aspect-ratio: 1;
padding: 0; border-radius: 6px;
background: transparent;
color: var(--cb-text);
border: 1px solid transparent;
font: 500 14px/1 var(--cb-font-regular);
cursor: pointer;
}
.sl-cal-day:hover:not(:disabled):not(.is-selected):where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-bg); }
.sl-cal-day.is-today:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: var(--cb-border); }
.sl-cal-day.is-selected:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { background: var(--cb-link); color: #fff; }
.sl-cal-day:disabled:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-muted); opacity: .4; cursor: not-allowed; }
.sl-cal-day-blank:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { aspect-ratio: 1; }
.sl-cal-foot:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
display: flex; gap: 8px; margin-top: 12px;
padding-top: 12px; border-top: 1px solid var(--cb-border);
}
.sl-cal-foot button:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex: 1; height: 38px; padding: 0; border-radius: 6px;
background: transparent; border: 1px solid var(--cb-border-hard);
cursor: pointer;
font: 500 13px/1 var(--cb-font-regular);
}
.sl-cal-today:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-text); }
.sl-cal-clear:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-muted); }
.sl-conflict:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
padding: 10px 12px;
background: rgba(236,77,77,.08);
border: 1px solid rgba(236,77,77,.35);
border-radius: 6px;
display: flex; align-items: flex-start; gap: 10px;
font: 400 12px/16px var(--cb-font-regular); color: #a83333;
}
.sl-conflict svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sl-email-row:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: transparent; border: none; cursor: pointer;
margin: -2px -4px -4px;
padding: 10px 4px 4px;
border-top: 1px dashed var(--cb-border);
display: flex; align-items: center; gap: 10px;
text-align: left;
width: calc(100% + 8px);
font: inherit; color: inherit;
}
.sl-email-row .sl-checkbox:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 20px; height: 20px; }
.sl-email-row .sl-checkbox svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 12px; height: 12px; }
.sl-email-label:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex: 1;
font: 500 12px/1.3 var(--cb-font-regular);
color: var(--cb-text);
display: inline-flex; align-items: center; gap: 6px;
}
.sl-email-row.is-off .sl-email-label:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-muted); }
/* fix-a's dashboard sweep SD22: a rule followers were already emailed about,
   its row off and disabled, with a note. SD25: the compose note turns into a
   warning when the message links somewhere else. */
.sl-email-row[disabled]:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { cursor: default; opacity: .7; }
.sl-email-sent:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { margin-left: auto; font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted); }
.sl-followers-note.is-warning:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: var(--cb-warn); }
/* SDQ19: a deleted saved rule, until Save removes it. */
.sl-removed:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--cb-border);
              border-radius: 12px; font: 400 13px/1.4 var(--cb-font-regular); color: var(--cb-muted); }
.sl-removed-undo:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
                   font: 700 13px/1.4 var(--cb-font-semibold); color: var(--cb-link); }
.sl-email-label svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-empty:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: var(--cb-card);
border: 1px dashed var(--cb-border);
border-radius: 10px;
padding: 40px 20px;
text-align: center;
}
.sl-empty-icon:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 56px; height: 56px; margin: 0 auto 14px;
border-radius: 50%;
background: rgba(64,179,222,.10);
display: inline-flex; align-items: center; justify-content: center;
}
.sl-empty-icon svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 26px; height: 26px; fill: none; stroke: var(--cb-link); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-empty-title:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { font: 500 16px/1.3 var(--cb-font-regular); color: var(--cb-text); margin-bottom: 6px; }
.sl-empty-sub:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted);
margin-bottom: 18px; max-width: 280px; margin-inline: auto;
}
.sl-empty-cta:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])), .sl-add-another:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
height: 44px; padding: 0 18px;
background: var(--cb-link); color: #fff;
border: none; border-radius: 999px;
font: 600 13px/1 var(--cb-font-regular); letter-spacing: 1.2px; text-transform: uppercase;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
}
.sl-empty-cta svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])), .sl-add-another svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sl-add-another:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
width: 100%; height: 50px;
background: transparent;
border: 1.5px dashed var(--cb-border-hard);
border-radius: 10px;
color:var(--cb-link-text,var(--cb-link));
justify-content: center;
}
.sl-add-another:hover:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { border-color: var(--cb-link); background: rgba(64,179,222,.04); }
.sl-savebar:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
position: sticky; bottom: 0; z-index: 50;
background: var(--cb-card);
border-top: 1px solid var(--cb-border);
box-shadow: 0 -4px 14px rgba(20,23,33,.06);
padding: 14px 24px calc(18px + env(safe-area-inset-bottom, 0px));
display: flex; align-items: center; gap: 16px;
}
.sl-savebar-meta:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex: 1 1 0;
font: 500 12px/1.3 var(--cb-font-regular);
color: var(--cb-muted);
text-align: left;
}
.sl-savebar-meta.is-dirty:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { color: #b07b00; }
.sl-savebtn:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
flex: 0 0 auto;
height: 46px; padding: 0 22px;
background: var(--cb-link); color: #fff;
border: 1px solid var(--cb-link); border-radius: 999px;
font: 600 13px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: filter .12s;
}
.sl-savebtn:hover:not(:disabled):where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { filter: brightness(1.05); }
.sl-savebtn:disabled:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
background: var(--cb-bg); color: var(--cb-muted);
border-color: var(--cb-border); cursor: not-allowed;
}
.sl-savebtn svg:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sl-saved-toast:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {
position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(8px);
z-index: 60;
padding: 10px 16px;
background: #2c3242; color: #fff;
border-radius: 999px;
font: 500 12px/1 var(--cb-font-regular); letter-spacing: .8px; text-transform: uppercase;
box-shadow: 0 6px 20px rgba(20,23,33,.18);
opacity: 0; pointer-events: none;
transition: opacity .2s, transform .2s;
}
.sl-saved-toast.is-shown:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) { opacity: 1; transform: translateX(-50%) translateY(0); }
/* dsl-: live = mode picker + notify + one row per rule (applies-to · amount · unit · from · to · delete) + save/cancel. Mobile rule cards become rows on wide screens. */
main:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {max-width:1280px;margin:0 auto;padding:28px var(--gut) 80px}
.sl-page:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])), .sl-body:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {background:transparent;min-height:0}
/* This page also mounts as a section inside the store; style its own surface, independent of the main tag. */
.sl-head:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {background:transparent;padding-left:0;padding-right:0;border-bottom:0;box-shadow:none}
.sl-head-row:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {display:flex;align-items:center;gap:16px}
.sl-mode-wrap:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {flex:0 0 360px}
/* Rule cards keep the mobile stack (the JS template is flat) but sit two-up on desktop so several rules scan at once. */
.sl-list:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:16px;padding:0;align-items:start}
.sl-list>.sl-add-another:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])), .sl-list>.sl-empty:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {grid-column:1/-1}
.sl-card:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {border-radius:14px;margin:0}
.sl-card-idx:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {white-space:nowrap}
@media(max-width:1000px){.sl-card-body:where(body[data-cb-page-css~="store-discounts"],body[data-cb-page-css~="store-discounts"] *,:has(>body[data-cb-page-css~="store-discounts"])) {grid-template-columns:1fr}}
/* ─────── Stats (st-*) ───────
       BACKEND:
         GET /api/me/stats?productId=&period=7d|30d|90d|12m|all
              → { kpis, revenue:[{label,v}], priorRevenue:[…],
                  views, wishlists, purchases,         (daily series)
                  funnel:{views,wishlists,purchases},
                  sources:[…], countries:[…],
                  dayHour:[[…]],                       (7 × 4 grid)
                  followers:{total, gained, spark:[…]},
                  topProducts:[…], products:[…] }
         GET /api/me/products/summary (for the picker)

       All numbers below are mocked client-side. Period switch only
       multiplies a seed; on the real API each period reshapes the
       series. Empty state hooks off `?empty=1` for QA. */
body.st-body:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { background: var(--cb-bg); }
/* Page header */
.st-head:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.st-head-inner:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { padding: 24px 18px 8px; }
.st-eyebrow:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 11px/1.2 var(--cb-font-regular);
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 6px;
    }
.st-h1:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 22px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text); margin: 0 0 6px;
    }
.st-sub:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted); margin: 0;
    }
/* Product picker button */
.st-prod-btn:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin: 10px 18px 16px; appearance: none; cursor: pointer;
      display: flex; align-items: center; gap: 10px; width: calc(100% - 36px);
      padding: 11px 14px;
      background: var(--cb-bg);
      color: var(--cb-text);
      border: 1px solid var(--cb-border); border-radius: 10px;
      text-align: left;
      font: inherit;
      transition: border-color .15s;
    }
.st-prod-btn:hover:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { border-color: var(--cb-link); }
.st-prod-btn > svg:first-child:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 16px; height: 16px; flex-shrink: 0;
      fill: none; stroke: var(--cb-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
.st-prod-btn-text:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { flex: 1; min-width: 0; }
.st-prod-btn-lead:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 10px/1 var(--cb-font-regular);
      letter-spacing: 1.3px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.st-prod-btn-name:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 4px;
      font: 500 14px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.st-prod-btn-caret:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 14px; height: 14px;
      fill: none; stroke: var(--cb-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    }
/* Period tabs */
.st-period:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; gap: 4px;
      padding: 14px 18px 0;
      background: var(--cb-card);
    }
.st-period-btn:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      flex: 1; appearance: none; cursor: pointer;
      padding: 8px 0;
      background: transparent;
      color: var(--cb-muted);
      border: none; border-radius: 999px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: .6px;
      transition: background .15s, color .15s;
    }
.st-period-btn.is-active:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      background: var(--cb-text); color: var(--cb-card);
    }
/* KPI hero grid */
.st-kpi-grid:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      padding: 14px 18px 0;
      background: linear-gradient(to bottom, var(--cb-card) 0, var(--cb-bg) 18px);
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
.st-kpi:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      padding: 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.st-kpi.is-hero:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      grid-column: span 2;
      padding: 16px 16px 14px;
    }
.st-kpi-label:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 10px/1.2 var(--cb-font-regular);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 8px;
    }
.st-kpi-value:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 20px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text); letter-spacing: -.3px;
    }
.st-kpi.is-hero .st-kpi-value:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { font-size: 30px; }
.st-kpi-delta:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 6px; display: flex; align-items: center; gap: 4px;
      font: 600 11px/1 var(--cb-font-semibold);
    }
.st-kpi-delta.is-good:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: #3aa86a; }
.st-kpi-delta.is-bad:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: #c4564a; }
.st-kpi-delta.is-flat:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: var(--cb-muted); }
.st-kpi-delta svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.st-kpi-delta.is-bad svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { transform: rotate(180deg); }
.st-kpi-delta.is-flat svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { transform: rotate(90deg); }
.st-kpi-delta-aux:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: var(--cb-muted); font-weight: 400; margin-left: 2px; }
/* Cards (charts / panels) */
.st-card:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin: 14px 18px 0;
      padding: 16px 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.st-card-head:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 8px; margin-bottom: 4px;
    }
.st-card-title:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 13px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
.st-card-sub:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.st-card-action:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1.3px; text-transform: uppercase;
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
      background: transparent; border: none; cursor: pointer; padding: 0;
    }
.st-card-action:hover:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { filter: brightness(.95); }
/* Bar chart */
.st-chart-readout:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      min-height: 18px; margin-top: 4px;
      font: 400 11px/18px var(--cb-font-regular); color: var(--cb-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.st-chart-readout b:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: var(--cb-text); font-weight: 600; }
.st-chart-legend:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; gap: 12px;
      font: 400 10px/18px var(--cb-font-regular); color: var(--cb-muted);
    }
.st-chart-legend-swatch:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 8px; height: 8px; border-radius: 2px;
      background: var(--cb-link);
      display: inline-block;
    }
.st-chart-legend-dash:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 12px; height: 0;
      border-top: 1.5px dashed var(--cb-muted);
      display: inline-block;
    }
.st-bars-wrap:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: flex-end; gap: 2px;
      margin-top: 12px; position: relative;
    }
.st-bars-wrap.is-dense:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { gap: 1px; }
.st-bar-cell:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      flex: 1; height: 100%;
      display: flex; align-items: flex-end; justify-content: center;
      cursor: pointer;
    }
.st-bar:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 100%; min-height: 2px;
      background: var(--cb-link);
      opacity: .67;
      border-top-left-radius: 2px; border-top-right-radius: 2px;
      transition: opacity .12s ease;
    }
.st-bar-cell:hover .st-bar:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { opacity: 1; }
.st-prior-overlay:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
    }
.st-x-axis:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; gap: 2px;
      margin-top: 6px; height: 11px;
    }
.st-x-axis.is-dense:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { gap: 1px; }
.st-x-tick:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      flex: 1; min-width: 0; position: relative; height: 100%;
      font: 400 9px/1.2 var(--cb-font-regular); color: var(--cb-muted);
    }
.st-x-tick span:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: absolute; top: 0; left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }
/* Funnel */
.st-funnel-rows:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { display: flex; flex-direction: column; gap: 10px; }
.st-funnel-row-head:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 5px;
    }
.st-funnel-row-name:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; gap: 8px;
      font: 500 12px/1 var(--cb-font-semibold);
      color: var(--cb-text);
    }
.st-funnel-swatch:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 8px; height: 8px; border-radius: 2px;
    }
.st-funnel-step:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 11px/1 var(--cb-font-regular);
      color: var(--cb-muted); margin-left: 4px;
    }
.st-funnel-val:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 13px/1 var(--cb-font-semibold);
      color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
.st-funnel-track:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: relative; height: 8px;
      background: var(--cb-bg); border-radius: 99px;
    }
.st-funnel-fill:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: absolute; inset: 0;
      border-radius: 99px;
      transition: width .35s cubic-bezier(.32,.72,.24,1);
    }
.st-funnel-foot:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 12px; padding-top: 12px;
      border-top: 1px dashed var(--cb-border);
      display: flex; justify-content: space-between; gap: 8px;
      font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted);
    }
.st-funnel-foot b:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: var(--cb-text); font-weight: 600; }
/* Wishlist callout */
.st-wish:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin: 14px 18px 0;
      padding: 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      display: flex; align-items: center; gap: 12px;
    }
.st-wish-icon:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
      background: rgba(196,86,74,.12); color: #c4564a;
      display: inline-flex; align-items: center; justify-content: center;
    }
.st-wish-icon svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { width: 20px; height: 20px; fill: currentColor; }
.st-wish-text:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { flex: 1; min-width: 0; }
.st-wish-title:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 14px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
.st-wish-sub:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 3px;
      font: 400 12px/1.4 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.st-wish-cta:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      flex-shrink: 0;
      padding: 8px 12px; border-radius: 999px;
      background: var(--cb-link); color: #fff;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: 1px; text-transform: uppercase;
      text-decoration: none;
      border: none; cursor: pointer;
    }
.st-wish-cta:hover:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { filter: brightness(1.05); color: #fff; }
/* Top products */
.st-tp-list:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { padding: 0; }
.st-tp-row:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px;
      border-top: 1px dashed var(--cb-border);
    }
.st-tp-row:first-child:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { border-top: 1px solid var(--cb-border); }
.st-tp-rank:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 22px; text-align: center; flex-shrink: 0;
      font: 600 13px/1 var(--cb-font-semibold); color: var(--cb-muted);
    }
.st-tp-main:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { flex: 1; min-width: 0; }
.st-tp-title:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 12.5px/1.3 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.st-tp-meta:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 3px; display: flex; gap: 10px;
      font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.st-tp-spark:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { flex-shrink: 0; }
.st-tp-rev:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      flex-shrink: 0; text-align: right; min-width: 56px;
      font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
/* Sources + countries */
.st-src-rows:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { display: flex; flex-direction: column; gap: 10px; }
.st-src-head:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; justify-content: space-between;
      font: 500 12px/1 var(--cb-font-semibold); color: var(--cb-text);
      margin-bottom: 4px;
    }
.st-src-name:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%;
    }
.st-src-vals:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font-variant-numeric: tabular-nums;
    }
.st-src-pct:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: var(--cb-muted); font-weight: 400; margin-left: 6px; }
.st-src-track:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: relative; height: 6px;
      background: var(--cb-bg); border-radius: 99px;
    }
.st-src-fill:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: absolute; inset: 0;
      border-radius: 99px;
      background: #7a8499;
    }
.st-src-fill.is-primary:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { background: var(--cb-link); }
.st-c-row:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 0;
      border-top: 1px dashed var(--cb-border);
    }
.st-c-row:first-child:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { border-top: none; }
.st-c-flag:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 600 13px/1 var(--cb-font-semibold);
      color: var(--cb-text); min-width: 22px;
    }
.st-c-label:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      flex: 1;
      font: 500 12.5px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
.st-c-pct:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
      font-variant-numeric: tabular-nums;
    }
.st-c-rev:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      min-width: 50px; text-align: right;
      font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text);
      font-variant-numeric: tabular-nums;
    }
/* Heatmap */
.st-heat:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: grid; grid-template-columns: 34px repeat(4, 1fr); gap: 4px;
    }
.st-heat-col:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      text-align: center;
    }
.st-heat-col-name:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 600 10px/1 var(--cb-font-semibold); color: var(--cb-text);
    }
.st-heat-col-sub:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 2px;
      font: 400 9px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.st-heat-rowname:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center;
      font: 600 10px/1 var(--cb-font-semibold); color: var(--cb-muted);
    }
.st-heat-cell:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      height: 28px; border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      font: 600 10px/1 var(--cb-font-semibold);
    }
.st-heat-cell.is-peak:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { outline: 1.5px solid #3aa86a; outline-offset: -1.5px; }
.st-heat-legend:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 10px; display: flex; align-items: center; gap: 6px;
      font: 400 10px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.st-heat-legend-swatch:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 14px; height: 10px; border-radius: 2px;
      display: inline-block;
    }
/* Followers card (collapsed + expanded) */
.st-foll-collapsed:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: calc(100% - 36px);
      margin: 14px 18px 0;
      padding: 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      display: flex; align-items: center; gap: 12px;
      appearance: none; cursor: pointer;
      font: inherit; color: inherit; text-align: left;
    }
.st-foll-collapsed:hover:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { border-color: var(--cb-link); }
.st-foll-icon:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
      background: rgba(122,92,219,.12); color: #7a5cdb;
      display: inline-flex; align-items: center; justify-content: center;
    }
.st-foll-icon svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-foll-text:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { flex: 1; min-width: 0; }
.st-foll-row:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: baseline; gap: 8px;
      font: 500 14px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
.st-foll-delta:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 600 11px/1 var(--cb-font-semibold);
    }
.st-foll-delta.is-good:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: #3aa86a; }
.st-foll-delta.is-bad:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { color: #c4564a; }
.st-foll-sub:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 3px;
      font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted);
    }
.st-foll-spark:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { flex-shrink: 0; }
.st-foll-expand-icon:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 11px; height: 11px; opacity: .7; flex-shrink: 0;
      fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
.st-foll-expanded:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin: 14px 18px 0;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      overflow: hidden;
    }
.st-foll-expanded-head:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 12px 12px 14px;
      border-bottom: 1px solid var(--cb-border);
    }
.st-foll-expanded-head .st-foll-icon:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { width: 30px; height: 30px; }
.st-foll-expanded-head .st-foll-icon svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { width: 16px; height: 16px; }
.st-foll-close:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      appearance: none; cursor: pointer;
      width: 30px; height: 30px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; color: var(--cb-muted);
      border: none; border-radius: 999px;
    }
.st-foll-close:hover:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { background: var(--cb-bg); }
.st-foll-close svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-foll-expanded-body:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { padding: 12px 14px; }
.st-foll-expanded-hdr:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
    }
.st-foll-expanded-total:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 22px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text); letter-spacing: -.3px;
    }
.st-foll-expanded-meta:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
/* Mini spark trio */
.st-trio:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin: 14px 18px 0;
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
    }
.st-trio-tile:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      appearance: none; cursor: pointer; text-align: left;
      padding: 12px 10px 10px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      display: flex; flex-direction: column; gap: 6px;
      position: relative;
      font: inherit; color: inherit;
    }
.st-trio-tile:hover:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { border-color: var(--cb-link); }
.st-trio-head:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; justify-content: space-between;
    }
.st-trio-label:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 9px/1.2 var(--cb-font-regular);
      letter-spacing: 1.1px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.st-trio-expand:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 11px; height: 11px; opacity: .7;
      fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
.st-trio-val:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 16px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text); letter-spacing: -.2px;
    }
.st-trio-spark:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { margin-top: 2px; }
.st-trio-expanded:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin: 14px 18px 0;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      overflow: hidden;
    }
.st-trio-tabs-row:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; gap: 4px;
      padding: 8px 8px 8px 12px;
      border-bottom: 1px solid var(--cb-border);
    }
.st-trio-tabs:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; gap: 4px; flex: 1; min-width: 0;
    }
.st-trio-tab:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      appearance: none; cursor: pointer;
      padding: 6px 10px;
      background: transparent;
      color: var(--cb-muted);
      border: none; border-radius: 999px;
      font: 600 10px/1 var(--cb-font-semibold);
      letter-spacing: .5px; white-space: nowrap;
      transition: background .15s, color .15s;
    }
.st-trio-tab.is-active:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      background: var(--cb-text); color: var(--cb-card);
    }
.st-trio-expanded-body:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { padding: 12px 14px; }
.st-trio-expanded-hdr:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
    }
.st-trio-expanded-total:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 22px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text); letter-spacing: -.3px;
    }
/* Empty state (?empty=1 querystring) */
.st-empty:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      padding: 60px 32px 80px; text-align: center;
    }
.st-empty-icon:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 64px; height: 64px; border-radius: 999px;
      margin: 0 auto 16px;
      background: var(--cb-bg);
      color: var(--cb-muted);
      display: inline-flex; align-items: center; justify-content: center;
    }
.st-empty-icon svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-empty-title:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 16px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text); margin-bottom: 6px;
    }
.st-empty-sub:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 400 12px/1.5 var(--cb-font-regular);
      color: var(--cb-muted);
      max-width: 280px; margin-inline: auto;
    }
.st-empty-cta:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: inline-flex; align-items: center; justify-content: center;
      margin-top: 20px;
      padding: 11px 24px; border-radius: 999px;
      background: var(--cb-link); color: #fff;
      text-decoration: none;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.3px; text-transform: uppercase;
    }
.st-empty-cta:hover:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { filter: brightness(1.05); color: #fff; }
/* ─── Product picker bottom sheet ─── */
.st-sheet:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: fixed; inset: 0; z-index: 80;
      pointer-events: none;
    }
.st-sheet.is-open:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { pointer-events: auto; }
.st-sheet-backdrop:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: absolute; inset: 0;
      background: rgba(20,23,33,0);
      transition: background 240ms cubic-bezier(.32,.72,.24,1);
    }
.st-sheet.is-shown .st-sheet-backdrop:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { background: rgba(20,23,33,.5); }
.st-sheet-panel:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      margin: 0 auto; max-width: 480px;
      background: var(--cb-card); color: var(--cb-text);
      border-top-left-radius: 18px; border-top-right-radius: 18px;
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.32,.72,.24,1);
      box-shadow: 0 -10px 30px rgba(0,0,0,.25);
      max-height: 85vh;
      display: flex; flex-direction: column;
    }
.st-sheet.is-shown .st-sheet-panel:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { transform: translateY(0); }
.st-sheet-handle:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; justify-content: center; padding: 8px 0 4px;
    }
.st-sheet-handle:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"]))::after {
      content: ''; width: 38px; height: 4px; border-radius: 99px;
      background: var(--cb-border-hard);
    }
.st-sheet-title:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      padding: 8px 18px 12px;
      font: 500 16px/1 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
    }
.st-sheet-search:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      padding: 4px 18px 12px;
      border-bottom: 1px solid var(--cb-border);
    }
.st-sheet-search-inner:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      display: flex; align-items: center; gap: 8px;
      background: var(--cb-bg); border-radius: 10px;
      padding: 0 10px; height: 38px;
    }
.st-sheet-search-inner svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-sheet-search-inner input:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      flex: 1; min-width: 0;
      appearance: none; border: none; outline: none;
      background: transparent; color: var(--cb-text);
      font: 400 13px/1 var(--cb-font-regular);
      padding: 0;
    }
.st-sheet-search-clear:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      appearance: none; cursor: pointer; border: none;
      background: transparent; color: var(--cb-muted);
      padding: 4px;
      display: inline-flex; align-items: center; justify-content: center;
    }
.st-sheet-search-clear svg:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { width: 14px; height: 14px; }
.st-sheet-body:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
.st-sheet-opt:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      appearance: none; cursor: pointer; width: 100%;
      display: flex; align-items: center; gap: 12px;
      padding: 12px 18px; text-align: left;
      background: transparent;
      border: none; border-bottom: 1px solid var(--cb-border);
      color: var(--cb-text);
      font: inherit;
      transition: background .12s;
    }
.st-sheet-opt:last-child:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { border-bottom: none; }
.st-sheet-opt:hover:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { background: var(--cb-bg); }
.st-radio:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0;
      border: 2px solid var(--cb-border-hard);
      display: inline-flex; align-items: center; justify-content: center;
      transition: border-color .12s;
    }
.st-sheet-opt.is-selected .st-radio:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { border-color: var(--cb-link); }
.st-radio:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"]))::after {
      content: ''; width: 8px; height: 8px; border-radius: 999px;
      background: var(--cb-link);
      transform: scale(0); transition: transform .15s;
    }
.st-sheet-opt.is-selected .st-radio:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"]))::after { transform: scale(1); }
.st-sheet-opt-text:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { flex: 1; min-width: 0; }
.st-sheet-opt-title:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      font: 500 13px/1.3 var(--cb-font-semibold), var(--cb-font-regular);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.st-sheet-opt-sub:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      margin-top: 2px;
      font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
    }
.st-sheet-empty:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      padding: 32px 18px; text-align: center;
      font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted);
    }
/* ─── Entry animations ──────────────────────────────────────────
       Trio + followers expanded cards: fade + small drop on mount.
       Re-runs on internal tab switch - desirable, makes data swap visible.
       Bars: grow from 0 height on render. Same scaling-via-transform
       trick so we don't need to know the final pixel height. */
@keyframes st-card-enter {
      from { opacity: 0; transform: translateY(-6px) scale(.985); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
.st-trio-expanded:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])), .st-foll-expanded:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      animation: st-card-enter 320ms cubic-bezier(.22,1,.36,1);
      transform-origin: top center;
    }
@keyframes st-bar-grow {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
.st-bar:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) {
      transform-origin: bottom;
      animation: st-bar-grow 420ms cubic-bezier(.22,1,.36,1) both;
    }
/* Stagger the bars left → right for a subtle wave. JS sets
       --st-bar-i so the delay scales with index. */
.st-bar:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { animation-delay: calc(var(--st-bar-i, 0) * 9ms); }
@media (prefers-reduced-motion: reduce) {
      .st-trio-expanded:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])), .st-foll-expanded:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])), .st-bar:where(body[data-cb-page-css~="store-stats-index"],body[data-cb-page-css~="store-stats-index"] *,:has(>body[data-cb-page-css~="store-stats-index"])) { animation: none; }
    }
/* Stats page (st-*), v3 plan U33.
   Ported verbatim from the handoff's production/store/stats/index.html inline <style>, which is
   byte-identical (modulo indentation) to production-desktop/assets/css/pages/store-stats-index.css:
   these three pages are one build. Page-scoped by V3::PageCss through `v3_page_css 'store-stats'`
   (KTD4), so `body.st-body` and the bare element rules below reach this page only. */
/* ─────── Stats (st-*) ───────
   BACKEND:
     GET /api/me/stats?productId=&period=7d|30d|90d|12m|all
          → { kpis, revenue:[{label,v}], priorRevenue:[…],
              views, wishlists, purchases,         (daily series)
              funnel:{views,wishlists,purchases},
              sources:[…], countries:[…],
              dayHour:[[…]],                       (7 × 4 grid)
              followers:{total, gained, spark:[…]},
              topProducts:[…], products:[…] }
     GET /api/me/products/summary (for the picker)

   All numbers below are mocked client-side. Period switch only
   multiplies a seed; on the real API each period reshapes the
   series. Empty state hooks off `?empty=1` for QA. */

body.st-body:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { background: var(--cb-bg); }

/* Page header */
.st-head:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  background: var(--cb-card);
  border-bottom: 1px solid var(--cb-border);
}
.st-head-inner:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { padding: 24px 18px 8px; }
.st-eyebrow:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 11px/1.2 var(--cb-font-regular);
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cb-muted); margin-bottom: 6px;
}
.st-h1:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 22px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text); margin: 0 0 6px;
}
.st-sub:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-muted); margin: 0;
}

/* Product picker button */
.st-prod-btn:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin: 10px 18px 16px; appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: calc(100% - 36px);
  padding: 11px 14px;
  background: var(--cb-bg);
  color: var(--cb-text);
  border: 1px solid var(--cb-border); border-radius: 10px;
  text-align: left;
  font: inherit;
  transition: border-color .15s;
}
.st-prod-btn:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { border-color: var(--cb-link); }
.st-prod-btn > svg:first-child:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: var(--cb-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.st-prod-btn-text:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { flex: 1; min-width: 0; }
/* The two lines are spans inside a button, so each is a block of its own; inline, "FOR" ran into the
   product's name (r29 M5). */
.st-prod-btn-lead:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])), .st-prod-btn-name:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { display: block; }
.st-prod-btn-lead:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 10px/1 var(--cb-font-regular);
  letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--cb-muted);
}
.st-prod-btn-name:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 4px;
  font: 500 14px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-prod-btn-caret:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 14px; height: 14px;
  fill: none; stroke: var(--cb-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Period tabs */
.st-period:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; gap: 4px;
  padding: 14px 18px 0;
  background: var(--cb-card);
}
.st-period-btn:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  flex: 1; appearance: none; cursor: pointer;
  padding: 8px 0;
  background: transparent;
  color: var(--cb-muted);
  border: none; border-radius: 999px;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: .6px;
  transition: background .15s, color .15s;
}
.st-period-btn.is-active:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  background: var(--cb-text); color: var(--cb-card);
}

/* KPI hero grid */
.st-kpi-grid:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  padding: 14px 18px 0;
  background: linear-gradient(to bottom, var(--cb-card) 0, var(--cb-bg) 18px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.st-kpi:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  padding: 14px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
}
.st-kpi.is-hero:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  grid-column: span 2;
  padding: 16px 16px 14px;
}
.st-kpi-label:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 10px/1.2 var(--cb-font-regular);
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cb-muted); margin-bottom: 8px;
}
.st-kpi-value:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 20px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text); letter-spacing: -.3px;
}
.st-kpi.is-hero .st-kpi-value:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { font-size: 30px; }
.st-kpi-delta:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 6px; display: flex; align-items: center; gap: 4px;
  font: 600 11px/1 var(--cb-font-semibold);
}
.st-kpi-delta.is-good:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: #3aa86a; }
.st-kpi-delta.is-bad:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: #c4564a; }
.st-kpi-delta.is-flat:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: var(--cb-muted); }
.st-kpi-delta svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.st-kpi-delta.is-bad svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { transform: rotate(180deg); }
.st-kpi-delta.is-flat svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { transform: rotate(90deg); }
.st-kpi-delta-aux:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: var(--cb-muted); font-weight: 400; margin-left: 2px; }

/* Cards (charts / panels) */
.st-card:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin: 14px 18px 0;
  padding: 16px 14px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
}
.st-card-head:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.st-card-title:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 13px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}
.st-card-sub:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 11px/1 var(--cb-font-regular);
  color: var(--cb-muted);
}
.st-card-action:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1.3px; text-transform: uppercase;
  color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
  background: transparent; border: none; cursor: pointer; padding: 0;
}
.st-card-action:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { filter: brightness(.95); }

/* Bar chart */
.st-chart-readout:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  min-height: 18px; margin-top: 4px;
  font: 400 11px/18px var(--cb-font-regular); color: var(--cb-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-chart-readout b:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: var(--cb-text); font-weight: 600; }
.st-chart-legend:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; gap: 12px;
  font: 400 10px/18px var(--cb-font-regular); color: var(--cb-muted);
}
.st-chart-legend-swatch:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--cb-link);
  display: inline-block;
}
.st-chart-legend-dash:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 12px; height: 0;
  border-top: 1.5px dashed var(--cb-muted);
  display: inline-block;
}

.st-bars-wrap:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: flex-end; gap: 2px;
  margin-top: 12px; position: relative;
}
.st-bars-wrap.is-dense:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { gap: 1px; }
.st-bar-cell:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  flex: 1; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer;
}
.st-bar:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 100%; min-height: 2px;
  background: var(--cb-link);
  opacity: .67;
  border-top-left-radius: 2px; border-top-right-radius: 2px;
  transition: opacity .12s ease;
}
.st-bar-cell:hover .st-bar:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { opacity: 1; }
.st-prior-overlay:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.st-x-axis:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; gap: 2px;
  margin-top: 6px; height: 11px;
}
.st-x-axis.is-dense:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { gap: 1px; }
.st-x-tick:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  flex: 1; min-width: 0; position: relative; height: 100%;
  font: 400 9px/1.2 var(--cb-font-regular); color: var(--cb-muted);
}
.st-x-tick span:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Funnel */
.st-funnel-rows:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { display: flex; flex-direction: column; gap: 10px; }
.st-funnel-row-head:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.st-funnel-row-name:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--cb-font-semibold);
  color: var(--cb-text);
}
.st-funnel-swatch:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 8px; height: 8px; border-radius: 2px;
}
.st-funnel-step:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 11px/1 var(--cb-font-regular);
  color: var(--cb-muted); margin-left: 4px;
}
.st-funnel-val:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 13px/1 var(--cb-font-semibold);
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.st-funnel-track:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: relative; height: 8px;
  background: var(--cb-bg); border-radius: 99px;
}
.st-funnel-fill:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: absolute; inset: 0;
  border-radius: 99px;
  transition: width .35s cubic-bezier(.32,.72,.24,1);
}
.st-funnel-foot:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--cb-border);
  display: flex; justify-content: space-between; gap: 8px;
  font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted);
}
.st-funnel-foot b:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: var(--cb-text); font-weight: 600; }

/* Wishlist callout */
.st-wish:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin: 14px 18px 0;
  padding: 14px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
}
.st-wish-icon:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  background: rgba(196,86,74,.12); color: #c4564a;
  display: inline-flex; align-items: center; justify-content: center;
}
.st-wish-icon svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { width: 20px; height: 20px; fill: currentColor; }
.st-wish-text:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { flex: 1; min-width: 0; }
.st-wish-title:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 14px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}
.st-wish-sub:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 3px;
  font: 400 12px/1.4 var(--cb-font-regular);
  color: var(--cb-muted);
}
.st-wish-cta:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  flex-shrink: 0;
  padding: 8px 12px; border-radius: 999px;
  background: var(--cb-link); color: #fff;
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none;
  border: none; cursor: pointer;
}
.st-wish-cta:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { filter: brightness(1.05); color: #fff; }

/* Top products */
.st-tp-list:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { padding: 0; }
.st-tp-row:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-top: 1px dashed var(--cb-border);
}
.st-tp-row:first-child:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { border-top: 1px solid var(--cb-border); }
.st-tp-rank:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 22px; text-align: center; flex-shrink: 0;
  font: 600 13px/1 var(--cb-font-semibold); color: var(--cb-muted);
}
.st-tp-main:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { flex: 1; min-width: 0; }
.st-tp-title:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 12.5px/1.3 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-tp-meta:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 3px; display: flex; gap: 10px;
  font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
}
.st-tp-spark:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { flex-shrink: 0; }
.st-tp-rev:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  flex-shrink: 0; text-align: right; min-width: 56px;
  font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}

/* Sources + countries */
.st-src-rows:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { display: flex; flex-direction: column; gap: 10px; }
.st-src-head:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; justify-content: space-between;
  font: 500 12px/1 var(--cb-font-semibold); color: var(--cb-text);
  margin-bottom: 4px;
}
.st-src-name:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%;
}
.st-src-vals:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font-variant-numeric: tabular-nums;
}
.st-src-pct:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: var(--cb-muted); font-weight: 400; margin-left: 6px; }
.st-src-track:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: relative; height: 6px;
  background: var(--cb-bg); border-radius: 99px;
}
.st-src-fill:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: absolute; inset: 0;
  border-radius: 99px;
  background: #7a8499;
}
.st-src-fill.is-primary:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { background: var(--cb-link); }

.st-c-row:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--cb-border);
}
.st-c-row:first-child:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { border-top: none; }
.st-c-flag:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 600 13px/1 var(--cb-font-semibold);
  color: var(--cb-text); min-width: 22px;
}
.st-c-label:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  flex: 1;
  font: 500 12.5px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}
.st-c-pct:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
  font-variant-numeric: tabular-nums;
}
.st-c-rev:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  min-width: 50px; text-align: right;
  font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}

/* Heatmap */
.st-heat:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: grid; grid-template-columns: 34px repeat(4, 1fr); gap: 4px;
}
.st-heat-col:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  text-align: center;
}
.st-heat-col-name:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 600 10px/1 var(--cb-font-semibold); color: var(--cb-text);
}
.st-heat-col-sub:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 2px;
  font: 400 9px/1 var(--cb-font-regular); color: var(--cb-muted);
}
.st-heat-rowname:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center;
  font: 600 10px/1 var(--cb-font-semibold); color: var(--cb-muted);
}
.st-heat-cell:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font: 600 10px/1 var(--cb-font-semibold);
}
.st-heat-cell.is-peak:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { outline: 1.5px solid #3aa86a; outline-offset: -1.5px; }
.st-heat-legend:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 10px; display: flex; align-items: center; gap: 6px;
  font: 400 10px/1 var(--cb-font-regular); color: var(--cb-muted);
}
.st-heat-legend-swatch:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 14px; height: 10px; border-radius: 2px;
  display: inline-block;
}

/* Followers card (collapsed + expanded) */
.st-foll-collapsed:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: calc(100% - 36px);
  margin: 14px 18px 0;
  padding: 14px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
  appearance: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.st-foll-collapsed:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { border-color: var(--cb-link); }
/* The strip is a link to the followers list (Michael's testing, 2026-10-20): no underline, and the
   base `a:hover` link colour stays off its text. */
a.st-foll-collapsed:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])), a.st-foll-collapsed:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: inherit; text-decoration: none; }
.st-foll-collapsed:focus-visible:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { outline: 2px solid var(--cb-link); outline-offset: 2px; border-radius: 12px; }
.st-foll-icon:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  background: rgba(122,92,219,.12); color: #7a5cdb;
  display: inline-flex; align-items: center; justify-content: center;
}
.st-foll-icon svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-foll-text:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { flex: 1; min-width: 0; }
.st-foll-row:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: baseline; gap: 8px;
  font: 500 14px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}
.st-foll-delta:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 600 11px/1 var(--cb-font-semibold);
}
.st-foll-delta.is-good:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: #3aa86a; }
.st-foll-delta.is-bad:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { color: #c4564a; }
.st-foll-sub:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 3px;
  font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted);
}
.st-foll-spark:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { flex-shrink: 0; }
.st-foll-expand-icon:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 11px; height: 11px; opacity: .7; flex-shrink: 0;
  fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.st-foll-expanded:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin: 14px 18px 0;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  overflow: hidden;
}
.st-foll-expanded-head:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px;
  border-bottom: 1px solid var(--cb-border);
}
.st-foll-expanded-head .st-foll-icon:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { width: 30px; height: 30px; }
.st-foll-expanded-head .st-foll-icon svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { width: 16px; height: 16px; }
.st-foll-close:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  appearance: none; cursor: pointer;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--cb-muted);
  border: none; border-radius: 999px;
}
.st-foll-close:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { background: var(--cb-bg); }
.st-foll-close svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-foll-expanded-body:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { padding: 12px 14px; }
.st-foll-expanded-hdr:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.st-foll-expanded-total:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 22px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text); letter-spacing: -.3px;
}
.st-foll-expanded-meta:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
}

/* Mini spark trio */
.st-trio:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin: 14px 18px 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.st-trio-tile:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  appearance: none; cursor: pointer; text-align: left;
  padding: 12px 10px 10px;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  font: inherit; color: inherit;
}
.st-trio-tile:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { border-color: var(--cb-link); }
.st-trio-head:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; justify-content: space-between;
}
.st-trio-label:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 9px/1.2 var(--cb-font-regular);
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--cb-muted);
}
.st-trio-expand:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 11px; height: 11px; opacity: .7;
  fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.st-trio-val:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 16px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text); letter-spacing: -.2px;
}
.st-trio-spark:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { margin-top: 2px; }
.st-trio-expanded:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin: 14px 18px 0;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  overflow: hidden;
}
.st-trio-tabs-row:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--cb-border);
}
.st-trio-tabs:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; gap: 4px; flex: 1; min-width: 0;
}
.st-trio-tab:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  appearance: none; cursor: pointer;
  padding: 6px 10px;
  background: transparent;
  color: var(--cb-muted);
  border: none; border-radius: 999px;
  font: 600 10px/1 var(--cb-font-semibold);
  letter-spacing: .5px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.st-trio-tab.is-active:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  background: var(--cb-text); color: var(--cb-card);
}
.st-trio-expanded-body:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { padding: 12px 14px; }
.st-trio-expanded-hdr:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.st-trio-expanded-total:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 22px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text); letter-spacing: -.3px;
}

/* Empty state (?empty=1 querystring) */
.st-empty:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  padding: 60px 32px 80px; text-align: center;
}
.st-empty-icon:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 64px; height: 64px; border-radius: 999px;
  margin: 0 auto 16px;
  background: var(--cb-bg);
  color: var(--cb-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.st-empty-icon svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-empty-title:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 16px/1.2 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text); margin-bottom: 6px;
}
.st-empty-sub:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 400 12px/1.5 var(--cb-font-regular);
  color: var(--cb-muted);
  max-width: 280px; margin-inline: auto;
}
.st-empty-cta:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 20px;
  padding: 11px 24px; border-radius: 999px;
  background: var(--cb-link); color: #fff;
  text-decoration: none;
  font: 600 11px/1 var(--cb-font-semibold);
  letter-spacing: 1.3px; text-transform: uppercase;
}
.st-empty-cta:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { filter: brightness(1.05); color: #fff; }

/* ─── Product picker bottom sheet ─── */
.st-sheet:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none;
}
.st-sheet.is-open:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { pointer-events: auto; }
.st-sheet-backdrop:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: absolute; inset: 0;
  background: rgba(20,23,33,0);
  transition: background 240ms cubic-bezier(.32,.72,.24,1);
}
.st-sheet.is-shown .st-sheet-backdrop:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { background: rgba(20,23,33,.5); }
.st-sheet-panel:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 auto; max-width: 480px;
  background: var(--cb-card); color: var(--cb-text);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,.24,1);
  box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  max-height: 85vh;
  display: flex; flex-direction: column;
}
.st-sheet.is-shown .st-sheet-panel:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { transform: translateY(0); }
.st-sheet-handle:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; justify-content: center; padding: 8px 0 4px;
}
.st-sheet-handle:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"]))::after {
  content: ''; width: 38px; height: 4px; border-radius: 99px;
  background: var(--cb-border-hard);
}
.st-sheet-title:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  padding: 8px 18px 12px;
  font: 500 16px/1 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
}
.st-sheet-search:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  padding: 4px 18px 12px;
  border-bottom: 1px solid var(--cb-border);
}
.st-sheet-search-inner:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  display: flex; align-items: center; gap: 8px;
  background: var(--cb-bg); border-radius: 10px;
  padding: 0 10px; height: 38px;
}
.st-sheet-search-inner svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-sheet-search-inner input:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  flex: 1; min-width: 0;
  appearance: none; border: none; outline: none;
  background: transparent; color: var(--cb-text);
  font: 400 13px/1 var(--cb-font-regular);
  padding: 0;
}
.st-sheet-search-clear:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  appearance: none; cursor: pointer; border: none;
  background: transparent; color: var(--cb-muted);
  padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.st-sheet-search-clear svg:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { width: 14px; height: 14px; }
.st-sheet-body:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
.st-sheet-opt:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; text-align: left;
  background: transparent;
  border: none; border-bottom: 1px solid var(--cb-border);
  color: var(--cb-text);
  font: inherit;
  transition: background .12s;
}
.st-sheet-opt:last-child:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { border-bottom: none; }
.st-sheet-opt:hover:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { background: var(--cb-bg); }
.st-radio:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid var(--cb-border-hard);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .12s;
}
.st-sheet-opt.is-selected .st-radio:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { border-color: var(--cb-link); }
.st-radio:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"]))::after {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--cb-link);
  transform: scale(0); transition: transform .15s;
}
.st-sheet-opt.is-selected .st-radio:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"]))::after { transform: scale(1); }
.st-sheet-opt-text:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { flex: 1; min-width: 0; }
.st-sheet-opt-title:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  font: 500 13px/1.3 var(--cb-font-semibold), var(--cb-font-regular);
  color: var(--cb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-sheet-opt-sub:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  margin-top: 2px;
  font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted);
}
.st-sheet-empty:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  padding: 32px 18px; text-align: center;
  font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted);
}

/* ─── Entry animations ──────────────────────────────────────────
   Trio + followers expanded cards: fade + small drop on mount.
   Re-runs on internal tab switch - desirable, makes data swap visible.
   Bars: grow from 0 height on render. Same scaling-via-transform
   trick so we don't need to know the final pixel height. */
@keyframes st-card-enter {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.st-trio-expanded:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])), .st-foll-expanded:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  animation: st-card-enter 320ms cubic-bezier(.22,1,.36,1);
  transform-origin: top center;
}
@keyframes st-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.st-bar:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) {
  transform-origin: bottom;
  animation: st-bar-grow 420ms cubic-bezier(.22,1,.36,1) both;
}
/* Stagger the bars left → right for a subtle wave. JS sets
   --st-bar-i so the delay scales with index. */
.st-bar:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { animation-delay: calc(var(--st-bar-i, 0) * 9ms); }
@media (prefers-reduced-motion: reduce) {
  .st-trio-expanded:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])), .st-foll-expanded:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])), .st-bar:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { animation: none; }
}
  

/* ─── Added by the port (v3 plan U33), not the handoff ───────────────────────
   The prototype drives its sheet with two classes: `.is-open` turns pointer
   events on and `.is-shown`, added a frame later, runs the transition. U9's
   overlay host adds `.is-open` only — after its own forced layout, so the
   transition still plays — which is the same two-step in one class. These two
   rules map the handoff's `.is-shown` rules onto it; nothing else changes, and
   the handoff's own `.is-shown` rules above are left in place. */
.st-sheet.is-open .st-sheet-backdrop:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { background: rgba(20,23,33,.5); }
.st-sheet.is-open .st-sheet-panel:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { transform: translateY(0); }

/* The picker's options arrive in a lazily loaded Turbo Frame. It is `block`, not
   `contents`: an element with `display: contents` generates no box, so the frame
   would never intersect the viewport and Turbo would never load it. `min-height`
   keeps it intersecting while it still holds only the skeleton. */
.st-sheet-panel > turbo-frame:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { display: block; min-height: 1px; overflow-y: auto; }

/* The window tabs are links rather than buttons, so the window is a query parameter and the tabs
   work with no JavaScript. A `<button>` centres its own label and an `<a>` does not, so the two
   rules a button gets for free are written out here; nothing else about the pill changes. */
.st-period-btn:where(body[data-cb-page-css~="store-stats"],body[data-cb-page-css~="store-stats"] *,:has(>body[data-cb-page-css~="store-stats"])) { text-align: center; text-decoration: none; }
/* store.css — the desktop store page's own rules (v3 plan U16, KTD4, KD6).
   Ported verbatim from the inline <style> block of D:store/marcbrunet/index.html (handoff 2f4fe50):
   the sort dropdown, the two centred modals (Share, Message), the post-comments sheet, and the
   desktop layout pass (dst-) over the ms-* families the desktop bundle already carries in
   v3/desktop/store.css.erb. Page-scoped when compiled (body[data-cb-page-css~="store"]), so the
   template declares `v3_page_css 'store'`. Class names never change.

   ORDER-PROOF (U31, 2026-09-09): 23 rules here carry a leading `html ` that the handoff does not
   write. The handoff links `assets/css/store.css` in <head> and this block *after* it, so the
   block wins; the desktop entrypoint requires `require_tree ./v3/desktop/pages` at line 42 and
   `v3/desktop/store` at line 51, which inverts that — and `:where()` page scoping adds no
   specificity, so every rule below that the base family also declares was inert. The whole
   desktop layout pass was therefore not applied: the avatar rendered at the mobile 96px instead
   of 84px, the name in `400 24px` instead of `700 28px`, the identity band without its 412px
   min-height, and the seller toolbar in two columns instead of four. `html ` adds one
   element-level step (0-1-1), which beats the base's plain class rules and still loses to every
   modifier in this file (`[data-theme="light"] .ms-seller-card`, `.ms-seller-card.is-primary`),
   so nothing inside this file changes order. Three rules inside two `@media` blocks carry it too
   (`.ms-seller-toolbar` and `.ms-seller-grid` at 1100px, `.ms-identity` at 800px): a media query
   adds no specificity, so an unprefixed rule there loses to the prefixed rule above it and the
   toolbar stayed in four columns at 900 wide, where the design wraps it to two. The same rules
   revert to the handoff's verbatim text the day `v3/desktop/store` is required above the pages
   tree, which is U6's file and the move U10's note already asked for. */


.ms-sort-wrap:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { position: relative; display: inline-block; }
.ms-sort[aria-expanded="true"] .ms-sort-chev:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { transform: rotate(180deg); }
.ms-sort-chev:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { transition: transform .15s ease; }
.ms-sort-menu:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
position: absolute; top: calc(100% + 8px); left: -10px;
min-width: 180px;
background: var(--cb-card);
border: 1px solid var(--cb-border);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(20,23,33,.12);
padding: 4px 0;
z-index: 30;
overflow: hidden;
}
html:not([data-theme="light"]) .ms-sort-menu:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.ms-sort-menu[hidden]:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { display: none; }
.ms-sort-opt:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
display: block; width: 100%;
padding: 12px 18px;
background: transparent; border: none;
text-align: left;
font: 400 14px/1 var(--cb-font-regular);
color: var(--cb-text);
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.ms-sort-opt:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: var(--cb-bg); }
.ms-sort-opt.is-selected:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: var(--cb-link); color: #fff; }
.ms-modal-host:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
position: fixed; inset: 0;
z-index: 80;
display: flex; align-items: center; justify-content: center;
padding: 20px;
pointer-events: none;
}
.ms-modal-host.is-open:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { pointer-events: auto; }
.ms-modal-backdrop:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
position: absolute; inset: 0;
background: rgba(12,16,26,0);
transition: background 220ms cubic-bezier(.32,.72,.24,1);
}
.ms-modal-host.is-open .ms-modal-backdrop:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: rgba(12,16,26,.72); }
.ms-modal:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
position: relative;
width: 100%; max-width: 360px;
max-height: calc(100vh - 40px);
overflow: hidden;
display: flex; flex-direction: column;
background: var(--cb-card);
color: var(--cb-text);
border-radius: 6px;
box-shadow: 0 12px 40px rgba(0,0,0,.32);
transform: translateY(8px) scale(.96);
opacity: 0;
transition: transform 240ms cubic-bezier(.32,.72,.24,1), opacity 200ms ease;
}
html:not([data-theme="light"]) .ms-modal:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.ms-modal-host.is-open .ms-modal:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { transform: translateY(0) scale(1); opacity: 1; }
.ms-modal-head:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--cb-border);
}
.ms-modal-title:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
margin: 0;
flex: 0 0 auto;
font: 400 14px/1 var(--cb-font-regular);
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--cb-text);
display: inline-flex; align-items: center; gap: 10px;
}
.ms-modal-title svg:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { color:var(--cb-link-text,var(--cb-link)); }
.ms-modal-head > .spacer:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { flex: 1; }
.ms-modal-close:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
width: 28px; height: 28px; padding: 0;
background: transparent; border: none; cursor: pointer;
color: var(--cb-muted);
display: inline-flex; align-items: center; justify-content: center;
border-radius: 4px;
transition: background .12s ease, color .12s ease;
}
.ms-modal-close:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: rgba(0,0,0,.04); color: var(--cb-text); }
html:not([data-theme="light"]) .ms-modal-close:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: rgba(255,255,255,.06); }
.ms-modal-body:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { padding: 18px 20px 20px; overflow-y: auto; }
.ms-share-label:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
font: 400 14px/1 var(--cb-font-regular);
color: var(--cb-muted);
margin-bottom: 10px;
}
.ms-share-input:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
width: 100%; height: 44px;
border: 1px solid var(--cb-border-hard);
border-radius: 4px;
padding: 0 14px;
background: var(--cb-bg);
font: 400 14px/1 var(--cb-font-regular);
color: var(--cb-text);
outline: none; box-sizing: border-box;
}
.ms-share-input:focus:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { border-color: var(--cb-link); }
.ms-share-note:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
font: 400 13px/1.5 var(--cb-font-regular);
color: var(--cb-muted);
margin: 12px 0 18px; text-align: center;
}
.ms-share-grid:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 10px;
}
.ms-share-btn:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
height: 46px; border: none; border-radius: 4px;
color: #fff;
font: 600 13px/1 var(--cb-font-semibold);
letter-spacing: 2px; text-transform: uppercase;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
cursor: pointer;
transition: filter .12s ease;
}
.ms-share-btn:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { filter: brightness(1.08); }
.ms-share-btn.fb:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: #4267B2; }
.ms-share-btn.x:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: #000000; }
.ms-share-copy:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
width: 100%; height: 46px;
background: var(--cb-card);
border: 1px solid var(--cb-border-hard);
border-radius: 4px;
color: var(--cb-text);
font: 400 13px/1 var(--cb-font-regular);
letter-spacing: 2px; text-transform: uppercase;
cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ms-share-copy:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: var(--cb-bg); }
.ms-share-copy.is-copied:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
background: rgba(123,193,120,.12);
border-color: var(--cb-commit, #7bc178);
color: var(--cb-commit, #7bc178);
}
.ms-msg-intro:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
font: 400 13px/1.5 var(--cb-font-regular);
color: var(--cb-muted);
margin: 0 0 14px;
}
.ms-msg-intro strong:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { color: var(--cb-text); font-weight: 400; }
.ms-msg-labelrow:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 6px;
}
.ms-msg-labelrow label:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
font: 400 11px/1 var(--cb-font-regular);
color: var(--cb-muted);
text-transform: uppercase; letter-spacing: 1.6px;
}
.ms-msg-counter:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
font: 400 11px/1 var(--cb-font-regular);
color: var(--cb-muted);
}
.ms-msg-counter.is-near:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { color: #c4602e; }
.ms-msg-area:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
width: 100%;
border: 1px solid var(--cb-border-hard);
border-radius: 4px;
padding: 12px 14px;
background: var(--cb-bg);
font: 400 14px/1.45 var(--cb-font-regular);
color: var(--cb-text);
outline: none; resize: vertical;
min-height: 120px;
margin-bottom: 16px;
box-sizing: border-box;
transition: border-color .12s ease;
}
.ms-msg-area:focus:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { border-color: var(--cb-link); }
.ms-msg-actions:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-msg-cancel:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-msg-send:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
height: 46px; border-radius: 4px;
font: 400 13px/1 var(--cb-font-regular);
letter-spacing: 2px; text-transform: uppercase;
cursor: pointer;
}
.ms-msg-cancel:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
background: var(--cb-card);
border: 1px solid var(--cb-border-hard);
color: var(--cb-text);
}
.ms-msg-cancel:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: var(--cb-bg); }
.ms-msg-send:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
background: var(--cb-link); color: #fff; border: none;
font: 600 13px/1 var(--cb-font-semibold);
}
.ms-msg-send:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { filter: brightness(1.08); }
.ms-msg-send:disabled:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
background: var(--cb-bg);
color: var(--cb-muted);
border: 1px solid var(--cb-border);
cursor: not-allowed;
filter: none;
}
.ms-msg-success:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
padding: 32px 8px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ms-msg-success-mark:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
width: 48px; height: 48px; border-radius: 999px;
background: rgba(35,160,90,.14);
display: inline-flex; align-items: center; justify-content: center;
color: #23a05a;
}
.ms-msg-success-title:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
font: 400 15px/1.4 var(--cb-font-regular);
color: var(--cb-text);
}
.ms-msg-success-sub:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
font: 400 13px/1.5 var(--cb-font-regular);
color: var(--cb-muted);
max-width: 240px;
}
#ms-post-comments-sheet .cb-sheet:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
display: flex; flex-direction: column;
max-height: 90vh;
padding: 0;
}
.ms-comments-head:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px 14px;
border-bottom: 1px solid var(--cb-border);
}
.ms-comments-head-title:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
flex: 1; min-width: 0;
font: 600 14px/1.3 var(--cb-font-semibold);
color: var(--cb-text);
letter-spacing: .1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-comments-head-count:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
font: 400 12px/1.3 var(--cb-font-regular);
color: var(--cb-muted);
flex-shrink: 0;
}
.ms-comments-close:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
width: 32px; height: 32px; padding: 0;
border: none; background: transparent;
color: var(--cb-muted);
border-radius: 6px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s ease, color .12s ease;
}
.ms-comments-close:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: rgba(0,0,0,.04); color: var(--cb-text); }
html:not([data-theme="light"]) .ms-comments-close:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: rgba(255,255,255,.06); }
.ms-comments-scroll:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
flex: 1; min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.ms-comments-scroll .cb-comments:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
padding: 8px 16px 24px;
}

/* ── desktop layout (dst-). Live: full-bleed cover with centred identity; band at 1640; 6-up grid. ── */
html .ms-identity:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {min-height:412px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.ms-identity .ms-cover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-identity .ms-cover-tint:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-identity .ms-cover-scrim:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {position:absolute;inset:0}
.ms-identity .ms-cover-tint:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {pointer-events:none}
html .ms-cover-art:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {width:100%;height:100%}
html .ms-identity-inner:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {position:relative;z-index:1;max-width:680px;margin:0 auto;padding:28px var(--gut);display:flex;flex-direction:column;align-items:center;gap:8px}
html .ms-avatar:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {width:84px;height:84px;margin-bottom:4px}
.ms-identity .ms-stats:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {margin-bottom:4px}
.ms-identity .ms-bio:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {margin:0 auto 4px}
.ms-identity .ms-actions:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {margin:6px 0 0}
.ms-identity .ms-socials:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {margin-top:10px}
html .ms-name:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {font:700 28px/1.2 var(--cb-font-bold);color:#fff;display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.ms-topseller:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:999px;background:linear-gradient(135deg,#fdc64f,#f5a623);color:#2b1d00;font:700 11px/1 var(--cb-font-bold);letter-spacing:1.2px;text-transform:uppercase;box-shadow:0 2px 8px rgba(245,166,35,.35);cursor:help;vertical-align:middle}
.ms-topseller svg:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {width:14px;height:14px}
html .ms-bio:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {font:400 14px/22px var(--cb-font-regular);color:rgba(255,255,255,.9)}
html .ms-actions:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:flex;gap:12px;justify-content:center;margin-top:6px}
/* owner / preview banner: full-width band, content aligned to the 1640 column, action kept clear of the floating cart */
html .ms-owner-banner:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {max-width:none;margin:0;padding:10px max(calc(var(--gut) + 72px),calc((100% - 1640px) / 2)) 10px max(var(--gut),calc((100% - 1640px) / 2))}
html .ms-owner-banner-action:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {white-space:nowrap;flex:none}
/* product grid runs full-width (gutter only), same as the marketplace; band is the shared .dh-toolbar */
html .ms-pane:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {padding-left:var(--gut);padding-right:var(--gut);background:transparent}
.ms-band.dh-toolbar:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {margin-top:0}
.ms-panel:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {max-width:calc(1640px + 2 * var(--gut));margin:0 auto;padding:0 var(--gut) 40px;overflow:hidden;opacity:0;transform:translateY(-8px);transition:opacity 260ms ease,transform 300ms var(--cb-ease)}
.ms-panel.is-shown:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {opacity:1;transform:none}
/* sticky children (Add a product price column) need no overflow clip and no transform on the ancestor once the open animation is done */
.ms-panel.is-shown:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {overflow:visible;transform:none}
.ms-panel-bar:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 6px;border-bottom:1px solid var(--cb-border);margin-bottom:8px}
.ms-panel-title:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {font:700 11px/1 var(--cb-font-bold);letter-spacing:1.6px;text-transform:uppercase;color:var(--cb-sec)}
.ms-panel-close:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--cb-border-hard);color:var(--cb-text);font:700 12px/1 var(--cb-font-bold);letter-spacing:1.2px;text-transform:uppercase}.ms-panel-close:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}.ms-panel-close svg:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.ms-panel-body main:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {padding-top:8px;padding-left:0;padding-right:0}
html .ms-seller-card-icon:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {background:transparent!important;width:24px;height:24px;border-radius:0;flex:none;display:inline-flex;align-items:center;justify-content:center}
html .ms-seller-card-icon svg:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {width:24px;height:24px}
.ms-panel-body .ap-head .ap-h1:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:none}
.ms-panel-body .sl-savebar:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {border:0!important;box-shadow:none!important;background:transparent!important;padding:16px 0 20px}
.ms-panel-body .sl-savebar-meta:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:none!important}
.ms-panel-body .ap-head:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {padding-bottom:6px}
.ms-panel-body .ap-head .ap-text-btn.is-danger:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-panel-body .ap-savebar .ap-text-btn.is-danger:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-panel-body .sl-head-row>a:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-panel-body .sl-head-row>button:not(.sl-mode-btn):not([data-sl-mode]):where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:none}
.ms-panel-title:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-panel-close:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {white-space:nowrap}
.ms-panel-body .sl-list:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {grid-template-columns:repeat(auto-fill,minmax(460px,1fr))}
[data-ms-store-content].is-collapsed:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:none}
.ms-seller-card[aria-current="true"]:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {outline:2px solid var(--cb-link);outline-offset:2px}
/* Manage store (owner): one row of four quiet tiles on the page surface; green stays on the icon + hover, not the whole slab. */
html .ms-seller-toolbar:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {max-width:none;margin:0;padding:18px max(var(--gut),calc((100% - 1640px) / 2));background:color-mix(in srgb,var(--cb-commit) 14%,var(--cb-bg));border-top:1px solid color-mix(in srgb,var(--cb-commit) 45%,transparent);border-bottom:1px solid color-mix(in srgb,var(--cb-commit) 45%,transparent);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:28px}
html .ms-seller-toolbar-eyebrow:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {padding:0;flex:none;font:700 11px/1 var(--cb-font-bold);letter-spacing:1.8px;color:var(--cb-commit);display:inline-flex;align-items:center;gap:8px}
[data-theme="light"] .ms-seller-toolbar:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {background:color-mix(in srgb,var(--cb-commit) 22%,#fff);border-top-color:color-mix(in srgb,var(--cb-commit) 40%,#fff);border-bottom-color:color-mix(in srgb,var(--cb-commit) 40%,#fff)}
[data-theme="light"] .ms-seller-toolbar-eyebrow:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {color:#3f8a3c}
[data-theme="light"] .ms-seller-card:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {background:#fff;border-color:color-mix(in srgb,var(--cb-commit) 55%,#fff);box-shadow:0 2px 8px rgba(63,138,60,.14)}
.ms-seller-toolbar-eyebrow:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"]))::before {content:'';width:8px;height:8px;border-radius:50%;background:var(--cb-commit)}
html .ms-seller-grid:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
html .ms-seller-card:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {min-height:60px;padding:10px 16px;display:flex;align-items:center;gap:12px;background:var(--cb-card);color:var(--cb-text);border:1px solid color-mix(in srgb,var(--cb-commit) 38%,var(--cb-border));border-radius:12px;box-shadow:0 2px 8px rgba(20,23,33,.06);transition:transform 140ms,box-shadow 160ms,border-color 160ms}
html .ms-seller-card:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {filter:none;color:var(--cb-text);transform:translateY(-2px);border-color:var(--cb-commit);box-shadow:0 10px 24px rgba(20,23,33,.14),0 0 0 3px color-mix(in srgb,var(--cb-commit) 18%,transparent)}
html .ms-seller-card-label:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {font:600 14px/1.2 var(--cb-font-semibold);color:var(--cb-text)}
/* primary action */
.ms-seller-card.is-primary:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {background:var(--cb-commit);border-color:var(--cb-commit);color:#fff;box-shadow:0 6px 16px rgba(123,193,120,.3)}
.ms-seller-card.is-primary:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {border-color:var(--cb-commit);filter:brightness(1.05);color:#fff}
.ms-seller-card.is-primary .ms-seller-card-label:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {color:#fff}
.ms-seller-card.is-primary .cb-ico-tile:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {color:#fff!important}
@media(max-width:1100px){html .ms-seller-toolbar:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {grid-template-columns:1fr;gap:12px}html .ms-seller-grid:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {grid-template-columns:repeat(2,1fr)}}
/* filters only apply to the product grid: hide panel + toggle on Posts / Bundles */
body:has(.ms-pane[data-ms-pane="posts"]:not([hidden])) #dh-filters:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), body:has(.ms-pane[data-ms-pane="bundles"]:not([hidden])) #dh-filters:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), body:has(.ms-pane[data-ms-pane="posts"]:not([hidden])) .dh-ftoggle[aria-controls="dh-filters"]:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), body:has(.ms-pane[data-ms-pane="bundles"]:not([hidden])) .dh-ftoggle[aria-controls="dh-filters"]:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:none}

html .ms-sort:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {height:38px;border-radius:999px;border:1px solid var(--cb-border-hard);padding:0 14px}
html .ms-pane:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {padding-top:24px;padding-bottom:40px}
.ms-pane .dh-grid:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {padding:0}
html .ms-loadmore-wrap:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.ms-pane[data-ms-pane="posts"] .ms-posts:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-pane[data-ms-pane="posts"] .ms-pc-host:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {max-width:760px;margin-left:auto;margin-right:auto}
.ms-pane[data-ms-pane="bundles"] .ms-bundles:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])), .ms-pane[data-ms-pane="bundles"] .ms-bundle-list:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:grid;grid-template-columns:repeat(auto-fill,minmax(520px,1fr));gap:20px}
.ms-modal-host .ms-modal:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {max-width:480px}
/* owner edit sheets: keep out of the render tree until opened (mobile relies on the 480px app column to clip them) */
.ms-edit-sheet:not(.is-open):where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {display:none}
html .ms-edit-sheet-panel:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {max-width:560px}
html .cb-sheet:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {max-width:560px}
@media(max-width:800px){html .ms-identity:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {min-height:320px}}

/* The lazy page chain inside the store grid (v3 plan U16, the U13 rule for `#mp-grid`):
   a loaded products_page_N frame (it keeps its src) joins the grid, a pending one keeps its
   box as the full-width row that carries the handoff's `.ms-loadmore-wrap`. base/utilities.css
   already makes every frame that is not a loading lazy one display:contents, so the foot spans
   the row itself too. */
/* QA item 247: the frames now follow the list instead of sitting in it, so these three rules
   have nothing left to place. */

/* ─────────── Owner mode (v3 plan U31) ───────────
   Two things the handoff's prototype does outside its own stylesheets, and nothing new.

   1) `.ms-avatar` is the positioning context of the camera badge (`.ms-avatar-camera` is
      `position:absolute; right:-4px; bottom:-4px`, v3/desktop/store.css.erb:130). cover-edit.js
      sets `position:relative` on the element when it mounts the badge; the badge is rendered by
      the server here, so the rule is a rule. `html ` for the ORDER-PROOF reason above.
   2) `.cb-toast` is the floating message `cbToast(msg, ms, {label, onClick})` builds — the Undo
      that Archive and Delete offer and the confirmation every other owner action shows. The
      handoff defines the element once, in the mobile build's `assets/css/site.css` (ported by U6
      into v3/mobile/core/38_wishlist_picker_sheet.css:263-294) and creates it on desktop from
      mobile-compat.js with no rules to match, so the desktop prototype shows an unstyled line of
      text. These five rules are that mobile block, verbatim, page-scoped to the store page. */
html .ms-avatar:has(.ms-avatar-camera):where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {position:relative}
.cb-toast:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
position: fixed; left: 50%; bottom: 24px;
transform: translateX(-50%) translateY(12px);
z-index: 200;
max-width: min(440px, calc(100% - 24px));
min-width: 220px;
padding: 11px 8px 11px 16px;
background: #2c3242; color: #fff;
border-radius: 999px;
font: 500 13px/1.3 var(--cb-font-regular);
box-shadow: 0 8px 28px rgba(20,23,33,.30);
display: flex; align-items: center; gap: 12px;
opacity: 0; pointer-events: none;
transition: opacity 220ms ease, transform 220ms cubic-bezier(.32,.72,.24,1);
}
.cb-toast.is-shown:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
opacity: 1; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.cb-toast-msg:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-toast-action:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {
flex: none;
background: transparent; border: none; cursor: pointer;
color: #59c3ee;
font: 700 11px/1 var(--cb-font-bold);
letter-spacing: 1.4px; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px;
}
.cb-toast-action:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) { background: rgba(89,195,238,.15); }

/* The dark rules U6's port dropped as dead (2026-09-10). Dead on a handoff page, which writes
 * `data-theme` only when the reader picks light; live on a v3 page, because `layouts/v3_desktop`
 * writes the attribute explicitly on every request (U7). All seven of `production-desktop/assets/
 * css/store.css`'s are here now, verbatim and page-scoped so no other page is restyled: the master
 * restored the two whose elements this page already rendered, on U24's report, and U42 brought the
 * five poll rules with the markup that draws them. `spec/requests/v3/assets_spec.rb` holds the
 * contract, page-agnostically.
 */
[data-theme="dark"] .cb-comments-sort-menu:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {box-shadow: 0 8px 24px rgba(0,0,0,.45);}
[data-theme="dark"] .ms-loadmore:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {background: rgba(64,179,222,.10); border-color: rgba(64,179,222,.32);}
[data-theme="dark"] .ms-post-kind.k-poll:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {background: rgba(46,205,184,.18); color: #4dd1be;}
[data-theme="dark"] .ms-post-poll-pct:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {color: #4dd1be;}
[data-theme="dark"] .ms-post-poll-bar:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {background: rgba(46,205,184,.22);}
[data-theme="dark"] .ms-post-poll-opt:hover:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {border-color: rgba(46,205,184,.55);}
[data-theme="dark"] .ms-post-poll-opt.is-voted-mine:where(body[data-cb-page-css~="store"],body[data-cb-page-css~="store"] *,:has(>body[data-cb-page-css~="store"])) {border-color: rgba(46,205,184,.85); background: rgba(46,205,184,.08);}
/* ─────────── Terms-of-service page styles ───────────
       Scoped under .tos-* so they don't leak into the rest of the
       site. The page is a long-form legal doc; the goal is high
       legibility, a calm rhythm, and easy section-jumping. */
.tos-page:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { padding: 28px 16px 64px; background: var(--cb-bg); }
/* ─── Header card ─── */
.tos-eyebrow:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 2.4px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 14px;
    }
.tos-h1:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 0;
      font: 300 38px/1.05 var(--cb-font-light);
      color: var(--cb-text); letter-spacing: -.5px;
    }
.tos-lede:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 14px 0 0;
      font: 400 15px/24px var(--cb-font-regular);
      color: var(--cb-sec);
      text-wrap: pretty;
    }
.tos-lede b:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { color: var(--cb-text); font-weight: 600; }
.tos-lede a:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])), .tos-body a:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])), .tos-tldr a:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])), .tos-card a:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])), .tos-after a:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])), .tos-list a:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      color:var(--cb-link-text,var(--cb-link));
      text-decoration: none;
      border-bottom: 1px solid rgba(64,179,222,.32);
    }
.tos-lede a:hover:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { border-bottom-color: var(--cb-link); }
.tos-revstamp:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 18px;
      padding: 6px 12px 6px 10px;
      background: var(--cb-chip-bg);
      border: 1px solid var(--cb-border);
      border-radius: 999px;
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.tos-revstamp .dot:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      width: 6px; height: 6px; border-radius: 50%;
      background: #FDC64E; display: inline-block;
    }
.tos-revstamp b:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { color: var(--cb-text); font-weight: 600; }
/* ─── Plain-English TL;DR card ─── */
.tos-tldr:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin-top: 28px;
      padding: 20px 18px 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      box-shadow: 0 1px 0 rgba(20,23,33,.02), 0 6px 20px rgba(20,23,33,.04);
    }
.tos-tldr-head:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 14px;
    }
.tos-tldr-pill:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: rgba(123,193,120,.14);
      border-radius: 999px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color: #2f7a53;
    }
.tos-tldr-title:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 600 17px/1.2 var(--cb-font-semibold);
      color: var(--cb-text);
    }
.tos-tldr-sub:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: -4px 0 14px;
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.tos-tldr ul:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 0; padding: 0; list-style: none;
      display: grid; gap: 10px;
    }
.tos-tldr li:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: grid;
      grid-template-columns: 22px 1fr;
      column-gap: 12px;
      font: 400 14px/21px var(--cb-font-regular);
      color: var(--cb-sec);
      text-wrap: pretty;
    }
.tos-tldr li b:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { color: var(--cb-text); font-weight: 600; }
.tos-tldr li .tos-tldr-mark:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(64,179,222,.12);
      color: #1d6f8e;
      display: inline-flex; align-items: center; justify-content: center;
    }
.tos-tldr li.tos-tldr-no .tos-tldr-mark:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      background: rgba(236,77,77,.10);
      color: #c14a3a;
    }
.tos-tldr li.tos-tldr-yes .tos-tldr-mark:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      background: rgba(123,193,120,.16);
      color: #2f7a53;
    }
.tos-tldr-foot:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--cb-border);
      font: 400 12px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
/* ─── Arbitration callout ─── */
.tos-notice:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: grid;
      grid-template-columns: 36px 1fr;
      column-gap: 14px; align-items: start;
      margin-top: 20px;
      padding: 16px 16px 16px 14px;
      background: #fff8e5;
      border: 1px solid #f4d27a;
      border-radius: 10px;
      color: #7a5a0a;
    }
:root:not([data-theme="light"]) .tos-notice:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      background: rgba(253,198,78,.12);
      border-color: rgba(253,198,78,.42);
      color: #fde2a7;
    }
.tos-notice-bang:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      width: 28px; height: 28px; border-radius: 50%;
      background: #FDC64E; color: #3b2a08;
      display: inline-flex; align-items: center; justify-content: center;
      font: 700 16px/1 var(--cb-font-semibold);
    }
.tos-notice-body:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 400 13.5px/20px var(--cb-font-regular);
    }
.tos-notice-body b:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { font-weight: 700; }
/* ─── Contact tile ─── */
.tos-contact:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: flex; align-items: center; gap: 12px;
      margin-top: 14px;
      padding: 12px 14px;
      background: rgba(64,179,222,.08);
      border: 1px solid rgba(64,179,222,.22);
      border-radius: 10px;
      text-decoration: none;
      color: #1d6f8e;
      transition: background-color 160ms ease;
    }
:root:not([data-theme="light"]) .tos-contact:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      background: rgba(64,179,222,.10);
      border-color: rgba(64,179,222,.32);
      color: #9ddef3;
    }
.tos-contact:hover:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { background: rgba(64,179,222,.14); border-bottom-color: rgba(64,179,222,.32); }
.tos-contact-icon:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
      background: #40b3de; color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
    }
.tos-contact-lbl:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 1.6px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.tos-contact-mail:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin-top: 4px;
      font: 600 14px/1 var(--cb-font-semibold);
    }
.tos-contact-chev:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin-left: auto; flex: none;
      color: inherit; opacity: .7;
    }
/* ─── Sticky jump-to-section bar ─── */
.tos-jump:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      position: sticky;
      top: calc(var(--cb-chrome-h, 102px) + 8px);
      z-index: 4;
      margin-top: 24px;
      background: linear-gradient(to bottom, var(--cb-bg) 70%, transparent);
      padding: 6px 0 10px;
      pointer-events: none;
      transition: top 240ms cubic-bezier(.22,.61,.36,1);
    }
.tos-jump > *:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { pointer-events: auto; }
/* When the chrome auto-hides on scroll-down, the pill rises with it so
       it stays glued to the top of the visible viewport instead of leaving
       a 100-ish-px dead band above itself. Matches the chrome's transition. */
.hm-fixed-chrome.is-hidden ~ main .tos-jump:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { top: 8px; }
.tos-jump-btn:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; width: 100%; height: 44px; padding: 0 16px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border-hard);
      border-radius: 999px; cursor: pointer;
      color: var(--cb-text); font: 600 13px/1 var(--cb-font-semibold);
      text-align: left;
      box-shadow: 0 8px 18px rgba(20,23,33,.08);
      transition: border-color 160ms ease;
    }
.tos-jump-btn:hover:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { border-color: var(--cb-link); }
.tos-jump-btn-lbl:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: inline-flex; align-items: center; gap: 10px;
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
/* ─── TOC bottom sheet ─── */
.tos-toc-host:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      position: fixed; top: 0; bottom: 0;
      left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 480px;
      z-index: 90; display: none; pointer-events: none;
    }
.tos-toc-host[data-open]:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { display: block; }
.tos-toc-host[data-open] > *:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { pointer-events: auto; }
.tos-toc-scrim:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      position: absolute; inset: 0;
      background: rgba(20,23,33,0);
      transition: background-color 240ms cubic-bezier(.32,.72,.24,1);
    }
.tos-toc-host[data-shown] .tos-toc-scrim:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { background: rgba(20,23,33,.5); }
.tos-toc-sheet:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(.32,.72,.24,1);
      max-height: 85vh; overflow-y: auto;
      background: var(--cb-card);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      box-shadow: 0 -16px 40px rgba(0,0,0,.25);
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
.tos-toc-host[data-shown] .tos-toc-sheet:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { transform: translateY(0); }
.tos-toc-handle:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: flex; align-items: center; justify-content: center;
      padding: 10px 0 6px;
    }
.tos-toc-handle span:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      width: 40px; height: 4px; border-radius: 2px;
      background: var(--cb-border-hard); display: block;
    }
.tos-toc-head:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      padding: 6px 16px 12px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--cb-border);
    }
.tos-toc-head h2:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 4px 0 0;
      font: 600 18px/22px var(--cb-font-semibold);
      color: var(--cb-text);
    }
.tos-toc-eyebrow:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 400 10px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--cb-muted);
    }
.tos-toc-close:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      width: 36px; height: 36px; border: none; background: transparent;
      color: var(--cb-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
.tos-toc-nav:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      padding: 6px 8px 16px;
      display: flex; flex-direction: column; gap: 2px;
    }
.tos-toc-nav a:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 10px; border-radius: 8px;
      text-decoration: none; color: var(--cb-text);
      transition: background-color 160ms ease;
    }
.tos-toc-nav a:hover:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { background: var(--cb-chip-bg); }
.tos-toc-nav a[aria-current="true"]:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      background: var(--cb-chip-active);
      color:var(--cb-link-text,var(--cb-link));
    }
.tos-toc-num:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      flex: 0 0 28px;
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: 1.2px;
      font-variant-numeric: tabular-nums;
    }
.tos-toc-nav a[aria-current="true"] .tos-toc-num:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { color:var(--cb-link-text,var(--cb-link)); }
.tos-toc-lbl:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      flex: 1; min-width: 0;
      font: 500 14px/19px var(--cb-font-regular);
    }
.tos-toc-nav a[aria-current="true"] .tos-toc-lbl:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { font-weight: 600; }
/* ─── Body sections ─── */
.tos-body:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin-top: 14px;
      background: var(--cb-panel);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
      padding: 6px 16px 24px;
    }
.tos-section:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      padding: 22px 0 4px;
      border-bottom: 1px dashed var(--cb-border);
    }
.tos-section:last-of-type:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { border-bottom: 0; }
.tos-section-head:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: flex; align-items: baseline; gap: 12px;
      margin-bottom: 12px;
    }
.tos-section-num:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      min-width: 28px;
      font: 400 12px/1 var(--cb-font-regular);
      color: var(--cb-muted); letter-spacing: 1.6px;
      font-variant-numeric: tabular-nums;
    }
.tos-section-h:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 0;
      font: 600 19px/26px var(--cb-font-semibold);
      color: var(--cb-text); letter-spacing: -.1px;
      scroll-margin-top: calc(var(--cb-chrome-h, 102px) + 56px);
    }
.tos-section p:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 0 0 12px; padding-left: 40px;
      font: 400 14.5px/23px var(--cb-font-regular);
      color: var(--cb-text);
      text-wrap: pretty;
    }
.tos-section p.tos-allcaps:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 600 12.5px/19px var(--cb-font-semibold);
      letter-spacing: .15px;
      color: var(--cb-sec);
    }
.tos-lead:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 6px 0 10px !important; padding-left: 40px;
      font: 600 13.5px/20px var(--cb-font-semibold) !important;
      color: var(--cb-text) !important;
    }
.tos-list:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 0 0 12px; padding: 0 0 0 40px;
      list-style: none;
    }
.tos-list li:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      position: relative; padding: 0 0 10px 18px;
      font: 400 14px/22px var(--cb-font-regular);
      color: var(--cb-text);
      text-wrap: pretty;
    }
.tos-list li:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"]))::before {
      content: ""; position: absolute; left: 0; top: 10px;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--cb-muted);
    }
/* Highlight callouts inline with a section - used for the AI,
       no-data-sale, cookies, and 2FA paragraphs so the brand-promise
       lines visually pop out of the surrounding legalese. */
.tos-promise:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 4px 0 14px 40px !important; padding: 12px 14px 10px !important;
      background: rgba(123,193,120,.10);
      border-left: 3px solid #7bc178;
      border-radius: 6px;
      font: 500 13.5px/21px var(--cb-font-semibold) !important;
      color: #1f5d3a !important;
      padding-left: 14px !important;
    }
:root:not([data-theme="light"]) .tos-promise:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      background: rgba(123,193,120,.10);
      color: #a8d8a4 !important;
    }
/* DMCA address card */
.tos-card:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 6px 0 6px 40px; padding: 14px 14px 12px;
      background: var(--cb-chip-bg);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
    }
.tos-card dt:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 500 12px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.tos-card dd:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 0;
      font: 500 13.5px/18px var(--cb-font-regular);
      color: var(--cb-text);
    }
.tos-card dl:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 0; display: grid;
      grid-template-columns: 88px 1fr;
      column-gap: 12px; row-gap: 6px;
    }
/* End-of-agreement footer block */
.tos-end:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      margin: 24px 0 0;
      padding: 16px 16px 14px;
      background: var(--cb-chip-bg);
      border: 1px solid var(--cb-border);
      border-radius: 12px;
    }
.tos-end-eyebrow:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 400 11px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 10px;
    }
.tos-end-body:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 400 13.5px/20px var(--cb-font-regular);
      color: var(--cb-sec);
    }
.tos-end-body b:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { color: var(--cb-text); font-weight: 600; }
.tos-end-row:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
    }
.tos-end-btn:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      flex: 1 1 0; min-width: 0;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      height: 42px; padding: 0 14px; border-radius: 999px;
      background: var(--cb-card); color: var(--cb-text);
      border: 1px solid var(--cb-border-hard);
      text-decoration: none;
      font: 500 12px/1 var(--cb-font-regular);
    }
.tos-end-btn:hover:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); }
.tos-end-btn--cta:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      flex: 0 0 auto; padding: 0 18px;
      background: #40b3de; color: #fff; border: none;
      font-weight: 600; cursor: pointer;
    }
.tos-end-btn--cta:hover:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { color: #fff; filter: brightness(1.06); }
/* ─── Cookie banner ─── */
.tos-cookie:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      position: fixed; left: 12px; right: 12px; bottom: 12px;
      max-width: 460px; margin-left: auto; margin-right: auto;
      padding: 14px 14px 12px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border-hard);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(20,23,33,.18);
      z-index: 80;
      display: grid;
      grid-template-columns: 36px 1fr auto;
      column-gap: 12px; align-items: center;
      transform: translateY(120%);
      transition: transform 320ms cubic-bezier(.32,.72,.24,1);
    }
.tos-cookie[data-shown]:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { transform: translateY(0); }
.tos-cookie-icon:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      width: 36px; height: 36px; border-radius: 50%;
      background: rgba(253,198,78,.18); color: #8a6d1f;
      display: inline-flex; align-items: center; justify-content: center;
    }
.tos-cookie-body:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      font: 400 12.5px/18px var(--cb-font-regular);
      color: var(--cb-sec);
    }
.tos-cookie-body b:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { color: var(--cb-text); font-weight: 600; }
.tos-cookie-body a:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
      border-bottom: 1px solid rgba(64,179,222,.32);
    }
.tos-cookie-ok:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) {
      /* Its own 36px, the icon's height, centred on the copy: stretched, it grew as tall as the copy did. */
      align-self: center;
      height: 36px;
      white-space: nowrap;
      padding: 0 14px;
      background: #40b3de; color: #fff;
      border: none; border-radius: 999px;
      font: 600 12px/1 var(--cb-font-semibold);
      cursor: pointer;
      transition: filter 160ms ease;
    }
.tos-cookie-ok:hover:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { filter: brightness(1.12); }
/* Hamburger top bar: full-length by default; clipped via dash pattern
       when the page state shows the notification dot, so the bar and dot
       don't visually collide. SVG attrs can't be CSS-overridden, so we use
       stroke-dasharray to truncate the drawn portion. */
body[data-cb-state="user"] .hm-hamburger-top:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])), body[data-cb-state="seller"] .hm-hamburger-top:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])), body[data-cb-state="admin"] .hm-hamburger-top:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { stroke-dasharray: 18 100; }
/* ─── Desktop widening ─── */
@media (min-width: 720px) {
      .tos-page:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { padding: 40px 32px 80px; }
      .tos-h1:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { font-size: 46px; }
      .tos-body:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { padding: 6px 28px 32px; }
      .tos-section p:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])), .tos-list:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { padding-left: 56px; }
      .tos-lead:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { padding-left: 56px; }
      .tos-section-h:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { font-size: 22px; line-height: 28px; }
      .tos-promise:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { margin-left: 56px !important; }
      .tos-card:where(body[data-cb-page-css~="terms"],body[data-cb-page-css~="terms"] *,:has(>body[data-cb-page-css~="terms"])) { margin-left: 56px; }
    }
/* The follower-email compose step (v3 plan U34), which the design's own copy promises twice and
   draws nowhere: docs/v3/decisions/pending/U34-followers-email-prompt.md.

   Not a port of a handoff page, and the only rules in this unit that are not. They exist because
   U9's dialog primitive draws itself with the handoff's open-store modal family (`.os-modal*`),
   which the desktop bundle scopes to `.dc-port` (page-components.css.erb:1040, page-layouts.css.erb:376)
   — and `body.dc-port` retunes tokens the whole page reads, so this page cannot wear it. The mobile
   bundle styles the same family unscoped (mobile/core/22_open_store_page.css:481), which is why
   there is no mobile copy of this file.

   So: the same declarations the desktop bundle already carries for `.dc-port`, with that one scope
   dropped, and four rules of layout inside the panel written in the page's own `sl-` vocabulary.
   Page-scoped by lib/v3/page_css.rb to `body[data-cb-page-css~="u34_followers_dialog"]`, so nothing
   here reaches another page. If Marc declines the prompt, this file and the dialog go together. */

.os-modal-host:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) {
  position: fixed; inset: 0;
  z-index: 75;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.os-modal-host.is-open:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) { pointer-events: auto; }
.os-modal-backdrop:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) {
  position: absolute; inset: 0;
  background: rgba(8,12,16,0);
  transition: background 240ms ease;
}
.os-modal-host.is-open .os-modal-backdrop:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) { background: rgba(8,12,16,.35); }
.os-modal:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) {
  position: relative;
  width: min(540px, calc(100vw - 64px)); max-width: 540px;
  max-height: calc(100dvh - 80px);
  margin: auto;
  overflow: auto;
  background: var(--cb-panel, var(--cb-card));
  color: var(--cb-text);
  border: 1px solid var(--cb-line-dark-hard, var(--cb-border-hard));
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  transform: translateY(8px) scale(.96);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.32,.72,.24,1), opacity 200ms ease;
  padding: 22px 22px 26px;
  text-align: center;
}
.os-modal-host.is-open .os-modal:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) { transform: translateY(0) scale(1); opacity: 1; }
.os-modal-close:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) {
  position: absolute; top: 14px; right: 12px;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--cb-sec);
}
.os-modal-title:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) {
  margin: 0 0 6px;
  font: 700 18px/1.25 var(--cb-font-bold, inherit);
  color: var(--cb-text);
}

/* The panel's own contents, in the page's vocabulary. */
.sl-followers-copy:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) { margin: 0 0 10px; color: var(--cb-sec); font-size: 13px; }
.sl-followers-message:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) {
  display: block; box-sizing: border-box; width: 100%;
  min-height: 116px; resize: vertical;
  padding: 10px 12px;
  background: var(--cb-card); color: var(--cb-text);
  border: 1px solid var(--cb-border-hard); border-radius: 10px;
  font: 400 14px/1.5 var(--cb-font-regular, inherit);
}
.sl-followers-message:focus:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) { outline: none; border-color: var(--cb-link); box-shadow: 0 0 0 2px rgba(64,179,222,.12); }
.sl-followers-actions:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
}
.sl-followers-note:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) { margin: 14px 0 0; color: var(--cb-sec); font-size: 12px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .os-modal:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])), .os-modal-backdrop:where(body[data-cb-page-css~="u34_followers_dialog"],body[data-cb-page-css~="u34_followers_dialog"] *,:has(>body[data-cb-page-css~="u34_followers_dialog"])) { transition: none; }
}
/*
 * The desktop profile page's own styles (v3 plan U42, KTD4, KTD6): the inline <style> block of
 * `production-desktop/user.html`, ported verbatim and page-scoped to `user`
 * (`v3_page_css 'user'`, lib/v3/page_css.rb). U6 ported the page's *linked* stylesheet
 * (assets/css/user.css -> v3/desktop/user.css); this is the block the port could not see, the same
 * case U15 flagged for the product page's `.cb-comments*` rules and U16 for the store page's.
 *
 * ORDER-PROOF: four rules carry a leading `html ` (U16's and U31's workaround, documented in
 * `v3/desktop/pages/store.css`). `v3_desktop.css` requires `require_tree ./v3/desktop/pages` at
 * line 42 and `v3/desktop/user` at line 51, so a page file loses to the family it is meant to
 * override and `:where()` page scoping adds no specificity. The handoff's own order is the
 * opposite — user.css is linked at line 22 and this block is at line 43 — so these four are the
 * design's, not this unit's. The day U6's entrypoint requires `v3/desktop/user` above the pages
 * tree (U10's note and U31's gotcha 1 ask for it), the prefixes revert to the handoff's text.
 * The `[data-theme="dark"]` rules stay as the handoff writes them. U16's gotcha said the desktop
 * bundle must carry none, which was true while every desktop rule was unscoped; a page-scoped file
 * is the answer the master settled at U24 and restated for this unit on 2026-09-10 — those rules
 * are live on a v3 page (`layouts/v3_desktop` writes `data-theme` explicitly, U7) and scoping keeps
 * them off every other page. The five poll rules at the end are the ones U6's port dropped as dead;
 * they are `store.css`'s and `user.css`'s alike, and this page draws the same poll.
 *
 * The trap that workaround sets: a media query adds no specificity either, so an unprefixed rule
 * inside `@media` would lose to a prefixed rule above it.
 */

.up-identity:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { background: #141926; }
.up-identity .ms-identity-inner:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { padding-top: 36px; padding-bottom: 30px; }
.up-handle:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
font: 400 13px/1 var(--cb-font-regular);
color: rgba(208,213,224,.7);
letter-spacing: .4px;
margin: -6px 0 14px;
}
.up-eyebrow:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
padding: 18px 22px 10px;
font: 600 11px/1 var(--cb-font-semibold);
letter-spacing: 2px; text-transform: uppercase;
color: var(--cb-muted);
display: flex; align-items: baseline; justify-content: space-between;
}
.up-eyebrow-count:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
font: 400 11px/1 var(--cb-font-regular);
color: var(--cb-muted);
letter-spacing: .4px; text-transform: none;
}
.up-band-sep:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
height: 8px;
background: linear-gradient(180deg, #141926 0%, var(--cb-bg) 100%);
}
.ms-modal-host:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
position: fixed; inset: 0;
z-index: 80;
display: flex; align-items: center; justify-content: center;
padding: 20px;
pointer-events: none;
}
.ms-modal-host.is-open:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { pointer-events: auto; }
.ms-modal-backdrop:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
position: absolute; inset: 0;
background: rgba(12,16,26,0);
transition: background 220ms cubic-bezier(.32,.72,.24,1);
}
.ms-modal-host.is-open .ms-modal-backdrop:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { background: rgba(12,16,26,.72); }
.ms-modal:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
position: relative;
width: 100%; max-width: 360px;
max-height: calc(100vh - 40px);
overflow: hidden;
display: flex; flex-direction: column;
background: var(--cb-card);
color: var(--cb-text);
border-radius: 6px;
box-shadow: 0 12px 40px rgba(0,0,0,.32);
transform: translateY(8px) scale(.96);
opacity: 0;
transition: transform 240ms cubic-bezier(.32,.72,.24,1), opacity 200ms ease;
}
[data-theme="dark"] .ms-modal:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.ms-modal-host.is-open .ms-modal:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { transform: translateY(0) scale(1); opacity: 1; }
.ms-modal-head:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--cb-border);
}
.ms-modal-title:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
margin: 0; flex: 0 0 auto;
font: 400 14px/1 var(--cb-font-regular);
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--cb-text);
display: inline-flex; align-items: center; gap: 10px;
}
.ms-modal-title svg:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { color:var(--cb-link-text,var(--cb-link)); }
.ms-modal-head > .spacer:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { flex: 1; }
.ms-modal-close:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
width: 28px; height: 28px; padding: 0;
background: transparent; border: none; cursor: pointer;
color: var(--cb-muted);
display: inline-flex; align-items: center; justify-content: center;
border-radius: 4px;
transition: background .12s ease, color .12s ease;
}
.ms-modal-close:hover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { background: rgba(0,0,0,.04); color: var(--cb-text); }
[data-theme="dark"] .ms-modal-close:hover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { background: rgba(255,255,255,.06); }
.ms-modal-body:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { padding: 18px 20px 20px; overflow-y: auto; }
.ms-msg-intro:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
font: 400 13px/1.5 var(--cb-font-regular);
color: var(--cb-muted);
margin: 0 0 14px;
}
.ms-msg-intro strong:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { color: var(--cb-text); font-weight: 400; }
.ms-msg-labelrow:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 6px;
}
.ms-msg-labelrow label:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
font: 400 11px/1 var(--cb-font-regular);
color: var(--cb-muted);
text-transform: uppercase; letter-spacing: 1.6px;
}
.ms-msg-counter:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); }
.ms-msg-counter.is-near:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { color: #c4602e; }
.ms-msg-area:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
width: 100%;
border: 1px solid var(--cb-border-hard);
border-radius: 4px;
padding: 12px 14px;
background: var(--cb-bg);
font: 400 14px/1.45 var(--cb-font-regular);
color: var(--cb-text);
outline: none; resize: vertical;
min-height: 120px;
margin-bottom: 16px;
box-sizing: border-box;
transition: border-color .12s ease;
}
.ms-msg-area:focus:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { border-color: var(--cb-link); }
.ms-msg-actions:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-msg-cancel:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), .ms-msg-send:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
height: 46px; border-radius: 4px;
font: 400 13px/1 var(--cb-font-regular);
letter-spacing: 2px; text-transform: uppercase;
cursor: pointer;
}
.ms-msg-cancel:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { background: var(--cb-card); border: 1px solid var(--cb-border-hard); color: var(--cb-text); }
.ms-msg-cancel:hover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { background: var(--cb-bg); }
.ms-msg-send:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
background: var(--cb-link); color: #fff; border: none;
font: 600 13px/1 var(--cb-font-semibold);
}
.ms-msg-send:hover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { filter: brightness(1.08); }
.ms-msg-send:disabled:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
background: var(--cb-bg);
color: var(--cb-muted);
border: 1px solid var(--cb-border);
cursor: not-allowed; filter: none;
}
.ms-msg-success:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
padding: 32px 8px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ms-msg-success-mark:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
width: 48px; height: 48px; border-radius: 999px;
background: rgba(35,160,90,.14);
display: inline-flex; align-items: center; justify-content: center;
color: #23a05a;
}
.ms-msg-success-title:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { font: 400 15px/1.4 var(--cb-font-regular); color: var(--cb-text); }
.ms-msg-success-sub:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
font: 400 13px/1.5 var(--cb-font-regular); color: var(--cb-muted); max-width: 240px;
}
#ms-post-comments-sheet .cb-sheet:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { display: flex; flex-direction: column; max-height: 90vh; padding: 0; }
.ms-comments-head:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px 14px;
border-bottom: 1px solid var(--cb-border);
}
.ms-comments-head-title:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
flex: 1; min-width: 0;
font: 600 14px/1.3 var(--cb-font-semibold);
color: var(--cb-text);
letter-spacing: .1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-comments-head-count:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { font: 400 12px/1.3 var(--cb-font-regular); color: var(--cb-muted); flex-shrink: 0; }
.ms-comments-close:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
width: 32px; height: 32px; padding: 0;
border: none; background: transparent;
color: var(--cb-muted); border-radius: 6px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s ease, color .12s ease;
}
.ms-comments-close:hover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { background: rgba(0,0,0,.04); color: var(--cb-text); }
[data-theme="dark"] .ms-comments-close:hover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { background: rgba(255,255,255,.06); }
.ms-comments-scroll:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {
flex: 1; min-height: 0;
overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.ms-comments-scroll .cb-comments:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) { padding: 8px 16px 24px; }

/* ── desktop layout (dup-). No live desktop page exists; mobile IA centred in a 760px reading column. ── */
html .ms-identity.up-identity:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {position:relative;overflow:hidden;min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px var(--gut);background:transparent}
.up-identity .ms-cover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), .up-identity .ms-cover-scrim:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {position:absolute;inset:0}
.up-identity .ms-cover-art:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {width:100%;height:100%}
.up-identity .ms-identity-inner:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {position:relative;z-index:1}
.ms-identity .ms-cover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {position:absolute;inset:0;background-size:cover;background-position:50% 50%}
.up-identity .ms-name:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), .up-identity .ms-stats:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), .up-identity .ms-stat:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), .up-identity .ms-bio:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), .up-identity .ms-identity-inner:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {color:#fff}
.up-identity .ms-stats:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), .up-identity .up-handle:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {color:rgba(255,255,255,.8)}
.up-identity .ms-identity-inner:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.up-identity .ms-avatar:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {width:96px;height:96px}
.up-identity .ms-name:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {font:700 28px/1.2 var(--cb-font-bold)}
.up-identity .ms-identity-inner:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {position:relative;z-index:1}
.ms-identity .ms-cover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {position:absolute;inset:0;background-size:cover;background-position:50% 50%}
.up-identity .ms-actions:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {display:flex;gap:12px;justify-content:center;margin-top:6px}
.up-band-sep:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {display:none}
html .up-eyebrow:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), html .ms-posts:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), html .ms-pc-host:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])), html .up-composer:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {max-width:760px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;background:transparent}
main:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {padding-bottom:40px}
.ms-modal-host .ms-modal:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {max-width:480px}
.ms-edit-sheet:not(.is-open):where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {display:none}
html .ms-edit-sheet-panel:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {max-width:560px}
html .cb-sheet:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {max-width:560px}

/* The five dark rules U6's port dropped as dead (master, 2026-09-10). Dead on a handoff page,
   which writes `data-theme` only when the reader picks light; live on a v3 page, because
   `layouts/v3_desktop` writes the attribute explicitly on every request (U7). Verbatim from
   `production-desktop/assets/css/store.css` (and, identically, from its `user.css`), and page-scoped
   like every other rule in this file, so no other page is restyled. */
[data-theme="dark"] .ms-post-kind.k-poll:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {background: rgba(46,205,184,.18); color: #4dd1be;}
[data-theme="dark"] .ms-post-poll-pct:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {color: #4dd1be;}
[data-theme="dark"] .ms-post-poll-bar:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {background: rgba(46,205,184,.22);}
[data-theme="dark"] .ms-post-poll-opt:hover:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {border-color: rgba(46,205,184,.55);}
[data-theme="dark"] .ms-post-poll-opt.is-voted-mine:where(body[data-cb-page-css~="user"],body[data-cb-page-css~="user"] *,:has(>body[data-cb-page-css~="user"])) {border-color: rgba(46,205,184,.85); background: rgba(46,205,184,.08);}
/* ───────── Wishlists page (wl-*) ─────────
       Single file with two views, switched by URL hash:
         wishlists.html                  → index (cards)
         wishlists.html#<id>             → detail (product grid)
       Index cards link to detail via hash anchors so the back nav
       works with the browser's history.

       BACKEND:
         GET    /api/me/wishlists                       → { wishlists: [{ id, name, isDefault, isPrivate, description, items: [productId, ...], updatedAt }] }
         GET    /api/me/wishlists/:id                   → full wishlist + populated product details
         POST   /api/me/wishlists                       → create { name, isPrivate } → { wishlist }
         PATCH  /api/me/wishlists/:id                   → update name | isPrivate | description
         DELETE /api/me/wishlists/:id                   → 200 (default Favorites can't be deleted - return 409)
         POST   /api/me/wishlists/:id/items             → add { productId }
         DELETE /api/me/wishlists/:id/items/:productId  → remove

         Share link is signed + revocable: GET /api/me/wishlists/:id/share-url
         → { url, expiresAt } so private wishlists can still be shared
         via link without making the underlying wishlist public.
       Empty Favorites + 0 other lists = first-time empty state. */
/* ─── Index header ─── */
.wl-index-header:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 24px 18px 16px;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.wl-index-titlerow:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: flex; align-items: baseline; justify-content: space-between;
    }
.wl-h1:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      margin: 0;
      font: 300 28px/1.15 var(--cb-font-light), Mulish, system-ui;
      letter-spacing: -.3px; color: var(--cb-text);
    }
.wl-count:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 500 12px/1 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.wl-byline:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      margin: 6px 0 14px;
      font: 400 13px/19px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.wl-byline strong:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      color: var(--cb-text); font-weight: 400;
    }
.wl-index-actions:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: flex; gap: 10px;
    }
.wl-btn-new:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      flex: 1; height: 42px; padding: 0 14px;
      background: var(--cb-link); color: #fff; border: none;
      border-radius: 999px;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
.wl-btn-new:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { filter: brightness(1.06); }
.wl-btn-icon:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 42px; height: 42px;
      background: transparent;
      border: 1px solid var(--cb-border-hard);
      border-radius: 999px; cursor: pointer;
      color: var(--cb-text);
      display: inline-flex; align-items: center; justify-content: center;
    }
.wl-btn-icon:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: var(--cb-bg); }
/* ─── Index list ─── */
.wl-list:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 14px 14px 24px;
      display: flex; flex-direction: column; gap: 12px;
      background: var(--cb-bg);
    }
.wl-card:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 14px;
      box-shadow: 0 2px 6px rgba(20,23,33,.06);
      text-decoration: none; color: inherit;
      display: block;
      position: relative;
      transition: box-shadow .16s ease;
    }
:root:not([data-theme="light"]) .wl-card:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.wl-card:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { box-shadow: 0 6px 14px rgba(20,23,33,.10); }
/* When a card's ⋯ menu is open it has to paint above sibling cards
       below it; without this, the popup ends up behind the next card.
       Inline-style toggle since toggling the class through JS is enough
       to flip stacking, no transition needed. */
.wl-card.has-menu-open:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { z-index: 5; }
/* Collage */
.wl-collage:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      height: 170px; margin: 6px;
      border-radius: 12px; overflow: hidden;
      display: grid; gap: 2px;
      background: var(--cb-border);
    }
.wl-collage.n-4:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.wl-collage.n-3:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr); }
.wl-collage.n-2:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.wl-collage.n-1:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.wl-cover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background-size: cover; background-position: center;
    }
.wl-collage.n-4 .wl-hero:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { grid-row: 1 / span 3; }
.wl-collage.n-3 .wl-hero:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { grid-row: 1 / span 2; }
/* Empty collage variant */
.wl-collage.is-empty:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      height: 170px; margin: 6px;
      background: var(--cb-bg);
      border: 1px dashed var(--cb-border-hard);
      color: var(--cb-muted);
      display: flex; align-items: center; justify-content: center;
      font: 400 13px/1 var(--cb-font-regular);
    }
/* Card body */
.wl-card-body:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 4px 14px 14px;
      display: flex; align-items: center; gap: 10px;
    }
.wl-card-meta:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { flex: 1; min-width: 0; }
.wl-card-titlerow:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: flex; align-items: center; gap: 8px;
      font: 600 15px/1.2 var(--cb-font-semibold);
      color: var(--cb-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.wl-card-title:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wl-pill:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      flex: none;
      font: 700 9px/1 var(--cb-font-semibold);
      letter-spacing: .8px; text-transform: uppercase;
      padding: 3px 6px; border-radius: 4px;
      display: inline-flex; align-items: center; gap: 4px;
    }
.wl-pill.is-default:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      color: #ff5a5f;
      background: rgba(255,90,95,.12);
    }
.wl-pill.is-private:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      color: var(--cb-muted);
      background: var(--cb-bg);
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 0;
    }
.wl-card-sub:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      margin-top: 4px;
      font: 400 12px/1.4 var(--cb-font-regular);
      color: var(--cb-muted);
    }
.wl-card-menu-wrap:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      position: relative; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
    }
.wl-card-menu:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 36px; height: 36px;
      background: transparent; border: none; cursor: pointer;
      color: var(--cb-muted);
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 999px;
    }
.wl-card-menu:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: var(--cb-bg); color: var(--cb-text);
    }
/* ─── Index empty state ─── */
.wl-empty:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 60px 28px 80px; text-align: center;
      background: var(--cb-bg);
    }
.wl-empty-art:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 88px; height: 88px; margin: 0 auto 22px;
      border-radius: 50%;
      background: rgba(255,90,95,.10);
      display: inline-flex; align-items: center; justify-content: center;
    }
.wl-empty-art svg:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { color: rgba(255,90,95,.85); }
.wl-empty-title:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 300 22px/1.2 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text);
      margin-bottom: 10px; letter-spacing: -.2px;
    }
.wl-empty-sub:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 400 13px/20px var(--cb-font-regular);
      color: var(--cb-muted);
      max-width: 280px; margin: 0 auto 22px;
    }
.wl-empty-sub strong:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { color: var(--cb-text); font-weight: 600; }
.wl-empty-cta:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: inline-flex; align-items: center; justify-content: center;
      height: 44px; padding: 0 28px; border-radius: 999px;
      background: var(--cb-link); color: #fff;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      text-decoration: none;
    }
.wl-empty-cta:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { filter: brightness(1.06); }
.wl-empty-alt:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: block; margin: 10px auto 0;
      background: transparent; border: none; cursor: pointer;
      font: 400 13px/1 var(--cb-font-regular);
      color:var(--cb-link-text,var(--cb-link));
      padding: 6px 8px;
    }
/* ─── Detail view ─── */
.wl-detail:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: none; background: var(--cb-bg); }
.wl-detail.is-active:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: block; }
.wl-detail-header:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 14px 8px 18px 12px;
      background: var(--cb-card);
      border-bottom: 1px solid var(--cb-border);
    }
.wl-detail-topbar:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: flex; align-items: center;
      margin-bottom: 12px;
    }
.wl-back:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 6px 6px 4px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      color:var(--cb-link-text,var(--cb-link)); text-decoration: none;
    }
.wl-back:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { filter: brightness(1.06); }
.wl-detail-actions:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      margin-left: auto;
      display: flex; gap: 4px;
    }
.wl-detail-act-btn:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 36px; height: 36px;
      background: transparent; border: none; cursor: pointer;
      color: var(--cb-text); border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      position: relative;
    }
.wl-detail-act-btn:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: var(--cb-bg); }
.wl-detail-h1:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      margin: 0 6px;
      font: 300 30px/1.1 var(--cb-font-light), Mulish, system-ui;
      letter-spacing: -.3px; color: var(--cb-text);
      display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    }
.wl-detail-meta:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      margin: 8px 6px 0;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      font: 400 12px/18px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.wl-privacy-toggle:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: transparent; border: none; padding: 0; cursor: pointer;
      color: var(--cb-muted);
      font: 400 12px/18px var(--cb-font-regular);
      display: inline-flex; align-items: center; gap: 5px;
    }
.wl-privacy-toggle:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { color: var(--cb-text); }
.wl-detail-desc:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      color: var(--cb-muted); font-style: italic;
    }
/* Detail items list */
.wl-detail-items:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 14px 12px 28px;
      display: flex; flex-direction: column; gap: 12px;
    }
.wl-detail-empty:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 60px 28px 80px; text-align: center;
      background: var(--cb-bg);
    }
.wl-detail-empty-art:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 88px; height: 88px; margin: 0 auto 22px;
      border-radius: 50%;
      background: var(--cb-card);
      display: inline-flex; align-items: center; justify-content: center;
    }
.wl-detail-empty-art svg:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { color: var(--cb-muted); }
.wl-detail-empty-title:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 300 22px/1.2 var(--cb-font-light), Mulish, system-ui;
      color: var(--cb-text);
      margin-bottom: 8px; letter-spacing: -.2px;
    }
.wl-detail-empty-sub:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 400 13px/20px var(--cb-font-regular);
      color: var(--cb-muted);
      max-width: 280px; margin: 0 auto 22px;
    }
.wl-detail-empty-sub strong:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { color: var(--cb-text); font-weight: 600; }
.wl-detail-empty-cta:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: inline-flex; align-items: center; justify-content: center;
      height: 44px; padding: 0 28px; border-radius: 999px;
      background: var(--cb-link); color: #fff;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      text-decoration: none;
    }
.wl-detail-empty-cta:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { filter: brightness(1.06); color: #fff; }
/* ─── Bottom sheets (new, edit) + share modal ─── */
.wl-sheet-host:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      position: fixed; inset: 0;
      z-index: 90;
      pointer-events: none;
    }
.wl-sheet-host[hidden]:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: none; }
.wl-sheet-host.is-open:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { pointer-events: auto; }
.wl-sheet-backdrop:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      position: absolute; inset: 0;
      background: rgba(8,11,18,0);
      transition: background 220ms cubic-bezier(.32,.72,.24,1);
    }
.wl-sheet-host.is-open .wl-sheet-backdrop:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: rgba(8,11,18,.55);
    }
.wl-sheet:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      position: absolute; left: 0; right: 0; bottom: 0;
      margin: 0 auto; max-width: 480px;
      max-height: 88vh;
      display: flex; flex-direction: column;
      background: var(--cb-card);
      color: var(--cb-text);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      box-shadow: 0 -12px 36px rgba(0,0,0,.32);
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(.32,.72,.24,1);
    }
.wl-sheet-host.is-open .wl-sheet:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { transform: translateY(0); }
.wl-sheet-handle:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 40px; height: 4px; border-radius: 2px;
      background: var(--cb-border-hard, rgba(0,0,0,.18));
      margin: 8px auto 0;
      flex-shrink: 0;
    }
.wl-sheet-head:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 18px 8px;
      flex-shrink: 0;
    }
.wl-sheet-title:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 700 18px/1.2 var(--cb-font-semibold);
      color: var(--cb-text);
      margin: 0;
    }
.wl-sheet-close:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 30px; height: 30px; padding: 0;
      background: transparent; border: none; cursor: pointer;
      color: var(--cb-muted);
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 999px;
    }
.wl-sheet-close:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: var(--cb-bg); color: var(--cb-text); }
.wl-sheet-body:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 4px 18px 18px;
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 14px;
    }
.wl-sheet-foot:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 12px 18px max(22px, env(safe-area-inset-bottom, 22px));
      border-top: 1px solid var(--cb-border);
      background: var(--cb-card);
      flex-shrink: 0;
    }
.wl-eyebrow:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 600 11px/1 var(--cb-font-semibold);
      color: var(--cb-muted);
      letter-spacing: 1.4px; text-transform: uppercase;
      margin-bottom: 8px;
    }
.wl-eyebrow .locked:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      color: var(--cb-muted); opacity: .8; margin-left: 4px;
      text-transform: none; letter-spacing: 0;
    }
.wl-input:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 100%; height: 44px;
      padding: 0 14px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border-hard);
      border-radius: 10px;
      font: 400 14px/1 var(--cb-font-regular);
      color: var(--cb-text);
      outline: none;
      box-sizing: border-box;
      transition: border-color .12s ease;
    }
.wl-input:focus:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { border-color: var(--cb-link); }
.wl-input-readonly:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 100%; height: 44px;
      padding: 0 14px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      font: 400 14px/1 var(--cb-font-regular);
      color: var(--cb-muted);
      display: inline-flex; align-items: center;
      box-sizing: border-box;
    }
.wl-textarea:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 100%; padding: 10px 14px;
      background: var(--cb-bg);
      border: 1px solid var(--cb-border-hard);
      border-radius: 10px;
      font: 400 14px/1.4 var(--cb-font-regular);
      color: var(--cb-text);
      outline: none;
      box-sizing: border-box;
      resize: vertical;
      min-height: 70px;
    }
.wl-textarea:focus:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { border-color: var(--cb-link); }
/* Toggle row - boxed with icon, mirrors WLToggleRow in the JSX. */
.wl-toggle-card:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color .12s ease;
    }
.wl-toggle-card:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { border-color: var(--cb-border-hard); }
.wl-toggle-icon:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 32px; height: 32px; border-radius: 8px;
      background: var(--cb-bg);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cb-text); flex-shrink: 0;
    }
.wl-toggle-text:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { flex: 1; min-width: 0; }
.wl-toggle-label:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 600 13px/1.3 var(--cb-font-semibold);
      color: var(--cb-text);
    }
.wl-toggle-hint:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      margin-top: 3px;
      font: 400 12px/16px var(--cb-font-regular);
      color: var(--cb-muted);
    }
.wl-switch:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 38px; height: 22px; flex: none;
      background: var(--cb-border-hard);
      border: none; border-radius: 999px; padding: 0;
      position: relative; cursor: pointer;
      transition: background .18s ease;
    }
.wl-switch:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"]))::before {
      content: '';
      position: absolute; top: 2px; left: 2px;
      width: 18px; height: 18px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
      transition: left .18s ease;
    }
.wl-switch[aria-pressed="true"]:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: var(--cb-link); }
.wl-switch[aria-pressed="true"]:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"]))::before { left: 18px; }
/* Share row - inline navigation-style row inside the edit sheet,
       only visible when the wishlist is public. */
.wl-row-link:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border);
      border-radius: 10px;
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: border-color .12s ease;
    }
.wl-row-link:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { border-color: var(--cb-border-hard); }
.wl-row-link[hidden]:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: none; }
.wl-row-link-icon:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 32px; height: 32px; border-radius: 8px;
      background: var(--cb-bg);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cb-text); flex-shrink: 0;
    }
.wl-row-link-text:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { flex: 1; min-width: 0; }
.wl-row-link-title:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: block; font: 600 13px/1.3 var(--cb-font-semibold); color: var(--cb-text); }
.wl-row-link-sub:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: block; margin-top: 3px; font: 400 12px/16px var(--cb-font-regular); color: var(--cb-muted); }
.wl-row-link-chev:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { color: var(--cb-muted); flex-shrink: 0; }
/* Delete: two-state. Plain button → inline confirm card.
       Mirrors the JSX confirm pattern. */
.wl-delete-sep:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding-top: 10px;
      border-top: 1px solid var(--cb-border);
    }
.wl-delete-btn:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 100%; height: 44px; padding: 0 14px;
      background: transparent;
      border: 1px solid var(--cb-border);
      border-radius: 999px;
      color: #c0392b;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.6px; text-transform: uppercase;
      cursor: pointer;
    }
.wl-delete-btn:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { border-color: rgba(192,57,43,.45); }
.wl-delete-confirm:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 14px; border-radius: 10px;
      background: rgba(192,57,43,.08);
      border: 1px solid rgba(192,57,43,.32);
    }
.wl-delete-confirm[hidden]:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: none; }
.wl-delete-confirm-title:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 600 13px/1.3 var(--cb-font-semibold);
      color: #c0392b; margin-bottom: 6px;
    }
.wl-delete-confirm-body:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 400 12px/18px var(--cb-font-regular);
      color: var(--cb-muted); margin-bottom: 12px;
    }
.wl-delete-confirm-actions:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: flex; gap: 8px; }
.wl-delete-confirm-cancel:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])), .wl-delete-confirm-go:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      flex: 1; height: 38px; padding: 0 12px;
      border-radius: 999px;
      font: 600 11px/1 var(--cb-font-semibold);
      letter-spacing: 1.4px; text-transform: uppercase;
      cursor: pointer;
    }
.wl-delete-confirm-cancel:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: transparent;
      border: 1px solid var(--cb-border-hard);
      color: var(--cb-text);
    }
.wl-delete-confirm-go:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: #c0392b; border: none; color: #fff;
    }
.wl-save-btn:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 100%; height: 46px;
      background: var(--cb-link); border: none;
      border-radius: 999px;
      color: #fff;
      font: 600 13px/1 var(--cb-font-semibold);
      letter-spacing: 1.8px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(64,179,222,.30);
    }
.wl-save-btn:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { filter: brightness(1.06); }
.wl-save-btn:disabled:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: var(--cb-border);
      color: var(--cb-muted);
      cursor: not-allowed;
      box-shadow: none;
    }
/* Share modal - reuses .ms-modal-* spec from store page but
       scoped to .wl-share-modal so we don't depend on store.html. */
.wl-share-host:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      position: fixed; inset: 0;
      z-index: 95;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      pointer-events: none;
    }
.wl-share-host[hidden]:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { display: none; }
.wl-share-host.is-open:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { pointer-events: auto; }
.wl-share-host .wl-sheet-backdrop:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: rgba(8,11,18,0);
    }
.wl-share-host.is-open .wl-sheet-backdrop:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: rgba(8,11,18,.55); }
.wl-share-modal:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      position: relative;
      width: 100%; max-width: 360px;
      background: var(--cb-card);
      color: var(--cb-text);
      border-radius: 12px;
      box-shadow: 0 20px 48px rgba(0,0,0,.32);
      overflow: hidden;
      transform: translateY(8px) scale(.96); opacity: 0;
      transition: transform 240ms cubic-bezier(.32,.72,.24,1), opacity 200ms ease;
    }
.wl-share-host.is-open .wl-share-modal:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      transform: translateY(0) scale(1); opacity: 1;
    }
.wl-share-head:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      padding: 18px 20px;
      border-bottom: 1px solid var(--cb-border);
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
    }
.wl-share-head h2:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      margin: 0;
      font: 400 14px/1 var(--cb-font-regular);
      letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--cb-text);
    }
.wl-share-close:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 28px; height: 28px; padding: 0;
      background: transparent; border: none; cursor: pointer;
      color: var(--cb-muted);
      border-radius: 4px;
      display: inline-flex; align-items: center; justify-content: center;
    }
.wl-share-close:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: var(--cb-bg); color: var(--cb-text); }
.wl-share-body:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { padding: 18px 20px 20px; }
.wl-share-label:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 400 14px/1 var(--cb-font-regular);
      color: var(--cb-muted); margin-bottom: 10px;
    }
.wl-share-link:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 100%; height: 44px;
      border: 1px solid var(--cb-border-hard);
      border-radius: 6px;
      padding: 0 14px;
      background: var(--cb-bg);
      font: 400 13px/1 var(--cb-font-regular);
      color: var(--cb-text);
      outline: none; box-sizing: border-box;
      font-variant-numeric: tabular-nums;
    }
.wl-share-note:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      font: 400 13px/1.5 var(--cb-font-regular);
      color: var(--cb-muted);
      margin: 12px 0 18px; text-align: center;
    }
.wl-share-grid:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;
    }
.wl-share-btn:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      height: 46px; border: none; border-radius: 6px;
      color: #fff;
      font: 600 13px/1 var(--cb-font-semibold);
      letter-spacing: 2px; text-transform: uppercase;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      cursor: pointer;
    }
.wl-share-btn:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { filter: brightness(1.08); }
.wl-share-btn.fb:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: #4267B2; }
.wl-share-btn.x:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: #000000; }
.wl-share-copy:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      width: 100%; height: 46px;
      background: var(--cb-card);
      border: 1px solid var(--cb-border-hard);
      border-radius: 6px;
      color: var(--cb-text);
      font: 400 13px/1 var(--cb-font-regular);
      letter-spacing: 2px; text-transform: uppercase;
      cursor: pointer;
    }
.wl-share-copy:hover:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { background: var(--cb-bg); }
.wl-share-copy.is-copied:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: rgba(123,193,120,.12);
      border-color: var(--cb-commit, #7bc178);
      color: var(--cb-commit, #7bc178);
    }
/* Generic toast (post-action confirmations) */
.wl-toast-host:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      position: fixed; left: 50%; top: 18px;
      transform: translate(-50%, -20px);
      z-index: 110;
      max-width: calc(100% - 32px);
      opacity: 0;
      transition: transform 240ms cubic-bezier(.32,.72,.24,1), opacity 200ms cubic-bezier(.32,.72,.24,1);
      pointer-events: none;
    }
.wl-toast-host.is-open:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      transform: translate(-50%, 0);
      opacity: 1;
      pointer-events: auto;
    }
.wl-toast:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      display: inline-flex; align-items: center; gap: 12px;
      background: rgba(28,32,42,.96); color: #fff;
      border-radius: 999px; padding: 10px 18px;
      font: 600 13px/1 var(--cb-font-semibold);
      box-shadow: 0 10px 28px rgba(0,0,0,.35);
    }
.wl-toast button:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {
      background: transparent; border: none; padding: 0; cursor: pointer;
      color: #7ad9ff;
      font: 600 12px/1 var(--cb-font-semibold);
      letter-spacing: 1.2px; text-transform: uppercase;
      white-space: nowrap;
    }

/* Dragging a list into order (buyer-account sweep M10, v3--social--wishlist-order). */
.wl-list .wl-card.is-drag-ghost:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { opacity: .35; }
.wl-list .wl-card.is-drag-chosen:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.wl-list .wl-card.sortable-fallback:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) { opacity: .9 !important; pointer-events: none; }

/* The owner's handle links to their profile (fix-c's visitor sweep ST12). */
.wl-byline-owner:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {color: inherit; text-decoration: none;}
.wl-byline-owner:hover strong:where(body[data-cb-page-css~="wishlists"],body[data-cb-page-css~="wishlists"] *,:has(>body[data-cb-page-css~="wishlists"])) {text-decoration: underline;}
/* Search suggestions (Michael, 2026-09-30: the legacy autocomplete, restored as a departure from
   the handoff, which draws no suggestion list; docs/v3/DECISIONS.md). Not a handoff pixel: the
   panel and its rows are the shared dropdown vocabulary (`.cb-dd-menu`, `.cb-dd-option` in
   v3/shared/dropdowns), and these rules only add what a combobox list needs on top of it.

   v3--shell--search-suggest moves the open list to <body> and writes its left, top, width and
   max-height, so nothing here depends on the search box it belongs to. `.cb-suggest--chrome` is a
   list under the header search: dark in both themes, like the chrome's own menus (`.dh-menu-pop`).
   The highlighted row is `aria-selected`, which the dropdown vocabulary draws as a chosen option
   with a tick; here it is only where the arrow keys are, so it takes the hover tint and no tick. */
:root body[data-cb-state] .cb-suggest{position:fixed;z-index:65;margin:0;overflow-y:auto;overscroll-behavior:contain}
:root body[data-cb-state] .cb-suggest[hidden]{display:none}
:root body[data-cb-state] .cb-suggest.cb-suggest--chrome{--cb-card:#1f2636;--cb-text:#e8eaf0;--cb-sec:#9aa3b6;--cb-border-hard:rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.45)}
:root body[data-cb-state] .cb-suggest .cb-suggest-option{display:flex;align-items:center;gap:10px;padding-right:12px}
:root body[data-cb-state] .cb-suggest .cb-suggest-option svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--cb-sec);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root body[data-cb-state] .cb-suggest .cb-suggest-option[aria-selected="true"]{background:rgba(64,179,222,.12);color:var(--cb-text);font-weight:400}
:root body[data-cb-state] .cb-suggest .cb-suggest-option[aria-selected="true"]::after{content:none}
:root body[data-cb-state] .cb-suggest .cb-suggest-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root body[data-cb-state] .cb-suggest .cb-suggest-rest{font-family:var(--cb-font-bold);font-weight:700}
/* v3 feedback surfaces (v3 plan U10, KTD4, KD6). The same file sits in both builds.
   Ported from the owner-approved gallery `handoff/feedback/preview.css` @ 2f4fe50: the warning and
   info variants, the waiting spinner, the file-status row, the site-banner host and the floating
   message. `handoff/FEEDBACK.md` calls these "additional warning/info variants, file contexts and
   the toast demonstration [that] currently live under handoff/feedback/" - approved design, not yet
   wired into the production pages, which is what this unit wires.

   RULE ORDER IS THE GALLERY'S. Several of these rules tie on specificity with each other
   (`.cb-feedback{padding:13px}` at narrow widths versus `.preview-toast`'s own padding), so the
   order they appear in decides the pixels. Keep them in `preview.css` order when editing.

   Two things the port had to change, both invisible:

   1. Three rules are written one class deeper than the gallery writes them, marked ORDER-PROOF
      below. The base `.cb-feedback` rules live in `v3/<build>/feedback.css` (U6's verbatim port of
      the production stylesheet), and the desktop entrypoint requires that file AFTER
      `require_tree ./v3/desktop/pages`, so a rule of equal specificity here would lose to it on the
      desktop build (mobile requires them the other way round). The extra class is one the element
      already carries, so the rules match exactly the same nodes and nothing else moves.
   2. The gallery's page chrome is NOT here (`.preview-chrome`, `.example-page`, `.context`,
      `.image-dropzone`, `.standalone-controls`, its `--cb-sec` lightening and its
      `.cb-feedback{margin-top:12px}` / `min-height:40px` tuning). Those belong to the review page
      and live in the preview document (spec/components/previews/v3/feedback/shared/_document.html.slim),
      so a real v3 page keeps its own tokens and feedback.css geometry. */

/* Severity variants. Error is the base rule in feedback.css. */
.cb-feedback.is-warning{border-color:color-mix(in srgb,var(--cb-warn) 40%,transparent);border-left-color:var(--cb-warn);background:color-mix(in srgb,var(--cb-warn) 6%,var(--cb-card))}
.cb-feedback.is-info{border-color:color-mix(in srgb,var(--cb-link) 40%,transparent);border-left-color:var(--cb-link);background:color-mix(in srgb,var(--cb-link) 6%,var(--cb-card))}
.cb-feedback.is-warning .cb-feedback-icon{color:var(--cb-warn);border-color:var(--cb-warn)}
.cb-feedback.is-info .cb-feedback-icon{color:var(--cb-link);border-color:var(--cb-link)}

/* File status rows: one row per transfer or processing state (FEEDBACK.md, "Use ... file rows for
   individual transfer/processing states"). `.file-type` is transparent: the badge colour comes from
   the glyph's own fill, as the gallery's later override sets it. */
.file-row{display:flex;align-items:center;gap:14px;border:1px solid var(--cb-border-hard);background:var(--cb-card);padding:14px 16px;border-radius:10px;margin-top:10px}
.file-type{width:34px;min-height:42px;display:grid;place-items:center;border-radius:4px;background:transparent;color:white;font-size:10px;font-weight:800;flex:none}
.file-body{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:700;display:block;overflow-wrap:anywhere;line-height:1.45}
.file-meta{font-size:12px;color:var(--cb-sec);margin-top:5px}
.file-status{font-size:12px;color:var(--cb-sec);display:flex;align-items:center;gap:5px}
.file-row progress{display:block;margin-top:10px;width:100%;height:5px;accent-color:var(--cb-link)}

/* The site banner: one shared connection, session or service message, full bleed under the header. */
#banner-host .cb-feedback{margin:0;border-radius:0;border-width:0 0 1px 0;padding:16px 30px}
#banner-host .cb-feedback-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px}
#banner-host .cb-feedback-title,#banner-host .cb-feedback-copy{grid-column:1}
#banner-host .cb-feedback-actions{grid-column:2;grid-row:1/3;align-self:center;margin:0}
/* Dismiss on the button's centre line (Michael's bug, 2026-10-21): the panel aligns its row to the top,
   and the body centres its button, so Dismiss rode a few pixels high. Without a button it centres on
   the text. */
#banner-host .cb-feedback>.toast-dismiss{align-self:center}
#banner-host button{font-family:Mulish,system-ui}
#banner-host :focus-visible,.preview-toast :focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}

/* Narrow widths, in the gallery's position: before the toast block, so the toast's own padding wins
   the tie the gallery lets it win. */
@media(max-width:500px){
  .file-row{gap:10px;padding:12px}
  .file-status{font-size:11px}
  .file-type{width:29px}
  #banner-host .cb-feedback{padding:15px 18px}
  #banner-host .cb-feedback-body{display:block}
  #banner-host .cb-feedback-actions{margin-top:12px}
  /* The button wraps under the text here: Dismiss joins its row, at the same height. */
  #banner-host .cb-feedback:has(.cb-feedback-actions)>.toast-dismiss{align-self:flex-end}
  #banner-host .cb-feedback-actions>*,#banner-host .cb-feedback>.toast-dismiss{min-height:44px}
  /* ORDER-PROOF (2 of 3): `.cb-feedback-actions button` in feedback.css would otherwise win. */
  .cb-feedback .cb-feedback-actions button{min-height:44px}
  /* ORDER-PROOF (3 of 3): `.cb-feedback` in feedback.css would otherwise win. */
  .cb-feedback.cb-feedback{padding:13px}
}

/* The floating message. "Floating messages reuse the static alert shape, colors and icons" and
   "Simple confirmations show a remaining-time bar, enter/exit with brief motion and pause while
   hovered, focused or the tab is hidden" (FEEDBACK.md).
   ORDER-PROOF (1 of 3): `.preview-toast`'s padding-bottom has to beat `.cb-feedback`'s shorthand. */
/* `--cb-toast-lift`: the height of a fixed bottom bar that is showing (the mobile product page's
   sticky buy bar, v3--product--sticky-buybar), so the toast is never underneath it. */
.toast-host{position:fixed;bottom:calc(24px + var(--cb-toast-lift, 0px));inset-inline:16px;display:flex;justify-content:center;pointer-events:none;z-index:20}
.cb-feedback.preview-toast{position:relative;max-width:460px;flex-basis:auto;margin:0;padding-bottom:18px;pointer-events:auto;overflow:hidden;box-shadow:0 5px 20px #0002;animation:feedback-enter 160ms ease-out both}
html[data-theme=light] .preview-toast{--cb-sec:#5a6478}
.preview-toast[hidden]{display:none}
.preview-toast.is-leaving{pointer-events:none;animation:feedback-leave 140ms ease-in both}
.toast-dismiss{flex:none;border:0;border-radius:6px;background:transparent;color:var(--cb-sec);cursor:pointer;min-height:36px;padding:6px 8px;font:700 12px/1.4 Mulish,system-ui}
.toast-dismiss:hover{color:var(--cb-text)}
.toast-dismiss:focus-visible{outline:2px solid var(--cb-link);outline-offset:-2px}
.toast-lifetime{position:absolute;inset:auto 0 0;height:3px;background:color-mix(in srgb,var(--cb-commit) 18%,transparent)}
.toast-lifetime-bar{display:block;width:100%;height:100%;background:var(--cb-commit);transform-origin:left}

/* Waiting states: the panel icon becomes the spinner, and so does the file status marker.
   `.feedback-spinner` is also in v3/<build>/pages/u9_primitives.css; the rules are identical and the
   master deletes U9's copy when both branches merge (U9 handoff, "For U10"). */
.cb-feedback.is-waiting>.cb-feedback-icon,.feedback-spinner,.file-status.is-waiting:before{box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:feedback-spin .85s linear infinite}
.feedback-spinner{display:inline-block;width:16px;height:16px;flex:none;color:var(--cb-link)}
.file-status.is-waiting:before{content:'';display:inline-block;width:12px;height:12px;flex:none;color:var(--cb-link)}

@keyframes feedback-spin{to{transform:rotate(360deg)}}
@keyframes feedback-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes feedback-leave{to{opacity:0;transform:translateY(6px)}}

@media(max-width:500px){
  .toast-host{bottom:calc(16px + var(--cb-toast-lift, 0px))}
  .preview-toast{gap:9px}
  .toast-dismiss{padding-inline:6px}
}

/* "Honor reduced motion": no entry or exit motion, no spin. The remaining-time bar steps once per
   second instead, which the toast controller does through the Web Animations easing
   (app/javascript/controllers/v3/feedback/toast_controller.js), not here. */
@media(prefers-reduced-motion:reduce){
  /* Same one-class-deeper selector as the toast rule above, so `animation:none` wins over it. */
  .cb-feedback.preview-toast,.cb-feedback.preview-toast.is-leaving{animation:none}
  .cb-feedback.is-waiting>.cb-feedback-icon,.feedback-spinner,.file-status.is-waiting:before{animation:none}
}

/* The flash bridge's gutter: `main#main` has no padding of its own and the handoff's alerts always
   sit inside a gutted section, so the page-level host carries the build's gutter. The one class
   this unit adds that the handoff does not have, because the handoff has no Rails flash.
   `--gut` is a desktop token; mobile falls back to 16px, the phone build's page inset. */
.cb-feedback-flash{padding-inline:var(--gut,16px)}
.cb-feedback-flash:empty{display:none}
/* U11 auth modal (v3 plan U11, KTD4, KD6).
 *
 * The `.cbm-*` rules of the handoff's auth modal, ported verbatim from the
 * <style id="cbm-style"> block of production-desktop/auth-modal.html @ 2f4fe50.
 * They are inline on the handoff page and are therefore NOT in the CSS files
 * U6's port reads (U6: "Inline <style> blocks in the handoff pages are not in
 * the CSS files and therefore not ported; the page unit ports its own into
 * pages/"). desktop.css and site.css carry only one `.cbm-root` reduced-motion
 * rule between them.
 *
 * The desktop and mobile blocks are byte-identical once the handoff's prose
 * comment is stripped, so both builds get the same file: the handoff ships ONE
 * auth modal, a centred card that themes itself from `data-cbm-theme` on
 * `.cbm-root`, independent of the page's `html[data-theme]`. Its own
 * `@media (max-width: 380px)` is the only narrow-screen change; there is no
 * bottom-sheet variant.
 *
 * Picked up by the entrypoint's `require_tree ./v3/<build>/pages`; no
 * entrypoint or seam is edited.
 */

.cbm-root {
  --cbm-link:        #40b3de;
  --cbm-link-deep:   #2a8fb8;
  --cbm-commit:      #7bc178;
  --cbm-bg:          #f9f8fb;
  --cbm-panel:       #ffffff;
  --cbm-elevated:    #ffffff;
  --cbm-text:        #2c3242;
  --cbm-sec:         #5a6478;
  --cbm-muted:       #939ca2;
  --cbm-border:      #eceef2;
  --cbm-border-hard: #d2d7db;
  --cbm-chip:        #f1f3f6;
  --cbm-field:       #ffffff;
  --cbm-scrim:       rgba(18, 21, 30, .58);
  --cbm-shadow:      0 24px 70px rgba(20, 24, 34, .30), 0 4px 14px rgba(20, 24, 34, .14);
  --cbm-ease:        cubic-bezier(.32, .72, .24, 1);
  --cbm-disabled-bg: #e4e7ed;
  --cbm-disabled-fg: #aab1bf;
  font-family: "Mulish", system-ui, -apple-system, sans-serif;
}
.cbm-root[data-cbm-theme="dark"] {
  --cbm-bg:          #141926;
  --cbm-panel:       #1b2130;
  --cbm-elevated:    #1f2636;
  --cbm-text:        #e8eaf0;
  --cbm-sec:         #9aa3b6;
  --cbm-muted:       #6f7a8f;
  --cbm-border:      rgba(255,255,255,.09);
  --cbm-border-hard: rgba(255,255,255,.16);
  --cbm-chip:        #232a3b;
  --cbm-field:       #11151f;
  --cbm-scrim:       rgba(6, 8, 13, .66);
  --cbm-shadow:      0 24px 70px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4);
  --cbm-disabled-bg: #2a3246;
  --cbm-disabled-fg: #5a6478;
}
@media (prefers-color-scheme: dark) {
  .cbm-root[data-cbm-theme="auto"] {
    --cbm-bg:          #141926;
    --cbm-panel:       #1b2130;
    --cbm-elevated:    #1f2636;
    --cbm-text:        #e8eaf0;
    --cbm-sec:         #9aa3b6;
    --cbm-muted:       #6f7a8f;
    --cbm-border:      rgba(255,255,255,.09);
    --cbm-border-hard: rgba(255,255,255,.16);
    --cbm-chip:        #232a3b;
    --cbm-field:       #11151f;
    --cbm-scrim:       rgba(6, 8, 13, .66);
    --cbm-shadow:      0 24px 70px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4);
    --cbm-disabled-bg: #2a3246;
    --cbm-disabled-fg: #5a6478;
  }
}
.cbm-root *, .cbm-root *::before, .cbm-root *::after { box-sizing: border-box; }

/* Overlay + scrim */
.cbm-root {
  position: fixed; inset: 0; z-index: 9000;
  align-items: flex-start; justify-content: center;
  padding: 20px;
  background: var(--cbm-scrim);
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--cbm-ease), visibility 0s linear .22s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  perspective: 1500px;
}
.cbm-root[hidden] { display: none; }
.cbm-root:not([hidden]) { display: flex; }
.cbm-root.is-open { opacity: 1; visibility: visible; transition: opacity .22s var(--cbm-ease); }

/* Modal card */
.cbm-modal {
  position: relative;
  width: 100%; max-width: 408px;
  margin: 0 auto;
  background: var(--cbm-panel);
  border: 1px solid var(--cbm-border);
  border-radius: 18px;
  box-shadow: var(--cbm-shadow);
  padding: 26px 24px 22px;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
/* Flip-in animation - replayed on open AND on mode switch (card only,
   so the scrim never blinks). Direction depends on which side you tap. */
.cbm-modal.is-flip-left  { animation: cbm-flip-left  .5s cubic-bezier(.2,.8,.26,1.05) both; }
.cbm-modal.is-flip-right { animation: cbm-flip-right .5s cubic-bezier(.2,.8,.26,1.05) both; }
@keyframes cbm-flip-left {
  from { transform: perspective(1700px) rotateY(-18deg) translateX(-10px) scale(.965); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: perspective(1700px) rotateY(0deg) translateX(0) scale(1); opacity: 1; }
}
@keyframes cbm-flip-right {
  from { transform: perspective(1700px) rotateY(18deg) translateX(10px) scale(.965); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: perspective(1700px) rotateY(0deg) translateX(0) scale(1); opacity: 1; }
}

/* Close */
.cbm-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--cbm-chip); color: var(--cbm-sec);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, transform .08s ease;
}
.cbm-close:hover { background: var(--cbm-border-hard); color: var(--cbm-text); }
.cbm-close:active { transform: scale(.94); }
.cbm-close svg { width: 17px; height: 17px; }

/* Brand + illustration banner (full-bleed top; illustration swaps per mode) */
.cbm-hero {
  position: relative;
  margin: -26px -24px 16px;
  height: 116px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 22px;
  background: linear-gradient(150deg, #e9f5fb 0%, #f1effb 100%);
  border-bottom: 1px solid var(--cbm-border);
  border-radius: 17px 17px 0 0;
  overflow: hidden;
}
.cbm-root[data-cbm-theme="dark"] .cbm-hero {
  background: linear-gradient(150deg, #10151f 0%, #171321 100%);
  border-bottom-color: rgba(255,255,255,.08);
}
@media (prefers-color-scheme: dark) {
  .cbm-root[data-cbm-theme="auto"] .cbm-hero {
    background: linear-gradient(150deg, #10151f 0%, #171321 100%);
    border-bottom-color: rgba(255,255,255,.08);
  }
}
.cbm-hero-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.cbm-hero-mark { width: 30px; height: 30px; display: block; flex: none; object-fit: contain; }
.cbm-hero-word { font: 300 21px/1 "Mulish", system-ui, sans-serif; letter-spacing: -.3px; color: var(--cbm-text); }
.cbm-root[data-cbm-theme="dark"] .cbm-hero-word { color: #afbecc; }
@media (prefers-color-scheme: dark) {
  .cbm-root[data-cbm-theme="auto"] .cbm-hero-word { color: #afbecc; }
}
.cbm-hero-art { height: 98px; width: auto; display: none; flex: none; margin-right: 26px; }
.cbm-root[data-cbm-mode="signin"] .cbm-hero-art[data-cbm-hero="signin"],
.cbm-root[data-cbm-mode="signup"] .cbm-hero-art[data-cbm-hero="signup"] { display: block; }
@media (max-width: 380px) {
  .cbm-hero { height: 104px; margin: -24px -18px 14px; padding: 0 16px; }
  .cbm-hero-art { height: 82px; margin-right: 24px; }
  .cbm-hero-word { font-size: 19px; }
}

/* Segmented mode switch */
.cbm-seg {
  position: relative;
  display: flex; gap: 0;
  background: var(--cbm-chip);
  border-radius: 11px;
  padding: 4px;
  margin-bottom: 14px;
}
.cbm-seg-thumb {
  position: absolute; top: 4px; left: 4px; bottom: 4px;
  width: calc(50% - 4px);
  background: var(--cbm-elevated);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(20,24,34,.12), 0 0 0 1px rgba(20,24,34,.03);
  transition: transform .28s var(--cbm-ease);
}
.cbm-root[data-cbm-theme="dark"] .cbm-seg-thumb { box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.cbm-root[data-cbm-mode="signup"] .cbm-seg-thumb { transform: translateX(100%); }
.cbm-seg-btn {
  position: relative; z-index: 1;
  flex: 1; height: 36px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  font: 700 13.5px/1 "Mulish", sans-serif;
  color: var(--cbm-muted);
  transition: color .2s ease;
}
.cbm-root[data-cbm-mode="signin"] .cbm-seg-btn[data-cbm-target="signin"],
.cbm-root[data-cbm-mode="signup"] .cbm-seg-btn[data-cbm-target="signup"] {
  color: var(--cbm-text);
}

/* Heading */
.cbm-title { margin: 0; font: 300 21px/1.2 "Mulish", sans-serif; letter-spacing: -.01em; color: var(--cbm-text); }
.cbm-sub { margin: 5px 0 0; font: 400 13px/1.45 "Mulish", sans-serif; color: var(--cbm-sec); }

/* Intent context line (optional) */
.cbm-intent {
  display: none;
  gap: 9px; align-items: flex-start;
  margin: 16px 0 0;
  padding: 11px 13px;
  background: rgba(64,179,222,.09);
  border: 1px solid rgba(64,179,222,.22);
  border-radius: 10px;
  font: 400 13px/1.45 "Mulish", sans-serif; color: var(--cbm-sec);
}
.cbm-intent.is-shown { display: flex; }
.cbm-intent svg { flex: none; width: 17px; height: 17px; color: var(--cbm-link); margin-top: 1px; }
.cbm-intent strong { color: var(--cbm-text); font-weight: 700; }

/* Social */
.cbm-social-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cbm-social {
  width: 100%; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid var(--cbm-border-hard); border-radius: 10px;
  background: var(--cbm-elevated); color: var(--cbm-text);
  font: 700 13.5px/1 "Mulish", sans-serif; cursor: pointer; white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, transform .08s ease;
}
.cbm-social:hover { border-color: var(--cbm-link); }
.cbm-social:active { transform: translateY(1px); }
.cbm-social svg { width: 19px; height: 19px; flex: none; }

/* Divider */
.cbm-divider { display: flex; align-items: center; gap: 12px; margin: 13px 0; }
.cbm-divider-line { flex: 1; height: 1px; background: var(--cbm-border-hard); }
.cbm-divider-label { font: 700 10.5px/1 "Mulish", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cbm-muted); }

/* Forms - only the active mode's form shows */
.cbm-form { display: none; flex-direction: column; }
.cbm-root[data-cbm-mode="signin"] .cbm-form[data-cbm-form="signin"],
.cbm-root[data-cbm-mode="signup"] .cbm-form[data-cbm-form="signup"] { display: flex; }

.cbm-field { margin-bottom: 10px; }
.cbm-label {
  display: block; margin-bottom: 5px;
  font: 700 10.5px/1 "Mulish", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cbm-sec);
}
.cbm-input-wrap { position: relative; }
.cbm-input {
  width: 100%; height: 44px; padding: 0 14px;
  font: 400 14.5px/1 "Mulish", sans-serif; color: var(--cbm-text);
  background: var(--cbm-field);
  border: 1px solid var(--cbm-border-hard); border-radius: 10px;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.cbm-input::placeholder { color: var(--cbm-muted); }
.cbm-input:focus { border-color: var(--cbm-link); box-shadow: 0 0 0 3px rgba(64,179,222,.18); }
.cbm-input.has-slot { padding-right: 46px; }
.cbm-input.is-error { border-color: #d94848; box-shadow: 0 0 0 3px rgba(217,72,72,.12); }

.cbm-slot {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--cbm-muted); cursor: pointer;
  transition: color .14s ease;
}
.cbm-slot:hover { color: var(--cbm-text); }
.cbm-slot svg { width: 18px; height: 18px; }
.cbm-slot .cbm-eye-off { display: none; }
.cbm-slot[aria-pressed="true"] .cbm-eye { display: none; }
.cbm-slot[aria-pressed="true"] .cbm-eye-off { display: inline; }

.cbm-help { margin: 6px 0 0; font: 400 11.5px/1.4 "Mulish", sans-serif; color: var(--cbm-muted); }
.cbm-error { margin: 6px 0 0; font: 600 11.5px/1.4 "Mulish", sans-serif; color: #d94848; }
.cbm-field.is-error .cbm-help { display: none; }

/* Sign-in row */
.cbm-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 14px; }

/* Checkbox (remember + agree) */
.cbm-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  font: 400 13px/1.4 "Mulish", sans-serif; color: var(--cbm-sec); }
.cbm-check.is-stacked { align-items: flex-start; margin: 2px 0 12px; line-height: 1.45; }
.cbm-check-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cbm-check-box {
  width: 20px; height: 20px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--cbm-border-hard); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s ease, border-color .14s ease;
}
.cbm-check.is-stacked .cbm-check-box { margin-top: 1px; }
.cbm-check-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .14s ease; }
.cbm-check-input:checked + .cbm-check-box { background: var(--cbm-link); border-color: var(--cbm-link); }
.cbm-check-input:checked + .cbm-check-box svg { opacity: 1; }
.cbm-check-input:focus-visible + .cbm-check-box { box-shadow: 0 0 0 3px rgba(64,179,222,.25); }

/* Links */
.cbm-link { color: var(--cbm-link); font-weight: 700; text-decoration: none; }
.cbm-link:hover { text-decoration: underline; }

/* Submit */
.cbm-submit {
  width: 100%; height: 46px; margin-top: 2px;
  border: none; border-radius: 999px;
  font: 800 14px/1 "Mulish", sans-serif; letter-spacing: .01em;
  color: #fff; background: var(--cbm-link); cursor: pointer;
  box-shadow: 0 4px 14px rgba(64,179,222,.34);
  transition: transform .16s var(--cbm-ease), box-shadow .22s var(--cbm-ease), filter .14s ease, background .14s ease;
}
.cbm-submit:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(64,179,222,.46); }
.cbm-submit:active { transform: translateY(0); filter: brightness(.97); }
.cbm-submit.is-commit { background: var(--cbm-commit); box-shadow: 0 4px 14px rgba(123,193,120,.34); }
.cbm-submit.is-commit:hover { box-shadow: 0 7px 22px rgba(123,193,120,.46); }
.cbm-submit:disabled {
  background: var(--cbm-disabled-bg); color: var(--cbm-disabled-fg);
  box-shadow: none; cursor: not-allowed; transform: none;
}

/* Footer switch line */
.cbm-foot { margin: 12px 0 0; text-align: center; font: 400 13.5px/1.5 "Mulish", sans-serif; color: var(--cbm-sec); }
.cbm-foot-signin, .cbm-foot-signup { display: none; }
.cbm-root[data-cbm-mode="signin"] .cbm-foot-signin { display: block; }
.cbm-root[data-cbm-mode="signup"] .cbm-foot-signup { display: block; }

/* Title/sub per mode */
.cbm-when-signin, .cbm-when-signup { display: none; }
.cbm-root[data-cbm-mode="signin"] .cbm-when-signin { display: block; }
.cbm-root[data-cbm-mode="signup"] .cbm-when-signup { display: block; }

/* Legal microcopy under sign-up button reuses agree row; keep tap target big */
@media (max-width: 380px) {
  .cbm-modal { padding: 24px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cbm-root, .cbm-modal, .cbm-seg-thumb, .cbm-submit { transition-duration: .01ms !important; }
  .cbm-modal.is-flip-left, .cbm-modal.is-flip-right { animation-duration: .01ms !important; }
}
  

/* ── The confirmation-code screen (/sign_up_success) ────────────────────────
 * No handoff design; see docs/v3/decisions/pending/U11-signup-confirmation-code-screen.md.
 * Built from the handoff's own field tokens so it sits inside .ah-card like every
 * other auth control: the box is .ah-input at one character wide, the row is the
 * .ah-form gap, and the resend line is .ah-field-help beside an .ah-link.
 * Four class names the handoff has no equivalent for: .ah-code, .ah-code-inputs,
 * .ah-code-input, .ah-code-resend.
 */
.ah-code { display: block; }
.ah-code-inputs { display: flex; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.ah-code-input {
  width: 46px; height: 54px; padding: 0;
  text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 0;
}
.ah-code-resend { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0 0; text-align: center; }
.ah-code-resend .ah-link { background: none; border: 0; cursor: pointer; font: inherit; padding: 6px 0; }
.ah-code-resend .ah-link[disabled] { opacity: .6; cursor: default; }
@media (max-width: 380px) {
  .ah-code-input { width: 40px; height: 48px; font-size: 19px; }
  .ah-code-inputs { gap: 6px; }
}

/* U11 shipped two ORDER-PROOF rules here against the page-scoped CSS leak (`.ah-card p{line-height:1.6}` from
   pages/forgot-password.css reaching the sign-up card). Removed by the master on 2026-09-09: page files are scoped
   when compiled (lib/v3/page_css.rb), so a page file no longer reaches another page. */
/* The desktop product page's own rules for the comments region (v3 plan U15).

   `production-desktop/p/<slug>/index.html` styles the ported mobile `.cb-comments`
   family inline, in the page rather than in `assets/css/`, so U6's port did not
   take them (the case U9's note describes for `.dmp-*` and `.ms-modal-*`). The
   three that belong to this component are copied verbatim from lines 256, 289 and
   295 of that page @ handoff 2f4fe50; the rest of that block is the product
   layout and belongs to U14.

   A unit file, not a page file (KTD4, master decision 2026-09-09): it belongs to
   this component wherever the component is placed, and `.dpp-wrap` is U14's
   wrapper, so nothing here applies until the product page ships. The comments
   preview carries the class so a comparison row measures the component in the
   context the design draws it in. */
.dpp-wrap .cb-comments { padding-left: 0; padding-right: 0; background: transparent; }
.dpp-wrap .cb-comments-pager { justify-content: center; }
.dpp-wrap .cb-comments { margin-top: 8px; }
/* The 404's box (v3 plan U18).
 *
 * The handoff writes these three declarations as an inline style on <main> in
 * both builds of 404.html. The box is a wrapper inside <main> here, so the site
 * banner the layout puts at the top of <main> spans the page above it rather
 * than sitting inside the box (QA item 198). `div.` keeps the specificity <main>
 * gave it, so the handoff's 80px still wins over .dc-404's own padding.
 */
div.v3-page-error {
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
}
/* The two programme pages' calls to action when the viewer is a guest (v3 plan U18).
 *
 * The handoff draws every "Open store" and "Apply in 60 seconds" as a <button>,
 * because its prototype opens the modal for everyone. The live endpoints behind
 * both modals require an account, so a guest gets the same control as a link to
 * sign-in instead (docs/v3/decisions/pending/U18-invite-modal-states.md). The
 * classes are the handoff's, and its rules set `height`, `min-width` and padding
 * that an inline <a> ignores; these four declarations give the anchor the box the
 * button already has, and nothing else. A signed-in viewer's button is untouched.
 */
a.os-cta,
a.bp-cta-light,
a.bp-cta-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* v3 Library and Purchases: the four rules the handoff has no equivalent for
   (v3 plan U20, KTD4). Identical on both builds, so both files are the same;
   they are bundled unscoped, beside the page-scoped ports of the two pages.

   Every one of them exists because a state the design draws cannot be made
   true, or because a control the design draws has to hold something more:

   1. `.lib-download-fill` sweeps instead of filling to a percentage. A signed
      redirect to the CDN reports no progress to the page, so the bar shows that
      something is happening rather than claiming a figure.
   2. `.lib-download-wrap` and `.lib-files-menu`: a product whose version ships
      no archive cannot be delivered in one request (`deliver_download` redirects
      to the first signed link), so its Download button opens the file list. The
      wrapper is rendered only for those cards; every other card is the
      handoff's bare button.
   3. `.lib-renew-*`: the reset-downloads dialog, which the handoff does not draw.
   4. `.lib-invoice-*`: the "Download receipt" modal, which it does not draw either.

   The menus and panels are the handoff's own `.lib-card-menu-pop` shape, so
   nothing new is invented visually. */

/* 1 — the indeterminate download sweep */
@keyframes lib-download-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.lib-download-btn[data-state="downloading"] .lib-download-fill {
  width: 100%;
  animation: lib-download-sweep 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lib-download-btn[data-state="downloading"] .lib-download-fill {
    animation: none;
    width: 100%;
  }
}

/* 2 — the file list a multi-file product opens */
.lib-download-wrap { position: relative; display: inline-flex; }
.lib-files-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 240px; max-height: 280px; overflow: auto;
  background: var(--cb-card);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 23, 33, .18);
  padding: 6px 0; z-index: 20;
}
:root:not([data-theme="light"]) .lib-files-menu { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.lib-files-menu[hidden] { display: none; }
.lib-files-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
  color: var(--cb-text); text-decoration: none;
  font: 400 13px/1 var(--cb-font-regular);
}
.lib-files-menu a:hover { background: var(--cb-bg); }
.lib-files-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-files-size { color: var(--cb-muted); flex-shrink: 0; font-size: 12px; }

/* 3 — the reset-downloads dialog */
.lib-renew-lead { margin: 0 0 10px; font: 400 14px/20px var(--cb-font-regular); color: var(--cb-text); }
.lib-renew-body { margin: 0 0 14px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted); }
.lib-renew-actions { margin: 14px 0 18px; }
.lib-renew-error:empty { display: none; }
.lib-renew-note {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--cb-border); border-radius: 8px;
  background: var(--cb-bg);
  font: 400 12px/18px var(--cb-font-regular); color: var(--cb-muted);
}
.lib-renew-note strong { color: var(--cb-text); }
.lib-renew-steps { margin: 8px 0 0; padding-left: 18px; }
.lib-renew-steps li { margin-bottom: 4px; }

/* 4 — the receipt modal */
.lib-invoice-lead { margin: 0 0 12px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted); }
.lib-invoice-input { width: 100%; resize: vertical; min-height: 90px; }
.lib-invoice-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
/* v3 plan U21: the Following page's one addition to the handoff's own rules.

   The handoff's page script drives five sibling sections of `<main>` (the header,
   the type filter, the toolbar, the list and the empty host); a Stimulus
   controller needs one element around them, and its targets must be its
   descendants. `.fp-page` is that element and nothing else: `display: contents`
   removes it from layout entirely, so every section lays out as a child of `main`
   exactly as the design draws it — the same rule U6's base utilities give a
   loaded `<turbo-frame>`, and for the same reason.

   A unit file, not the page file: `v3/<build>/pages/following.css` is the
   handoff's stylesheet, ported byte for byte. Unit files are bundled unscoped
   (KTD4), which is safe here because `.fp-page` exists on no other page. */
.fp-page { display: contents; }
/* v3 order receipt: the rules the handoff has no equivalent for (v3 plan U25, KTD4).
   Identical on both builds, so both files are the same; bundled unscoped, beside the
   page-scoped port of the page itself (v3/<build>/pages/orders-index.css).

   Every one exists because a state the design draws cannot be made true, or because a
   control the design draws has to hold something more:

   1. `.or-att-progress` sweeps instead of filling to a percentage. `products#download`
      answers a 302 to a signed CloudFront URL and the browser downloads the file itself,
      so nothing here can measure bytes. U20 filed the same difference for the Library's
      button; this is the same rule on the receipt's rows.
   2. The two download controls are links, not buttons: a cross-origin redirect cannot be
      followed by `fetch`, so they carry `data-turbo="false"` and a per-platform target
      (app/javascript/controllers/CLAUDE.md). Three declarations put a link back to the
      button the design draws.
   3. `.or-claim-*` additions: the address is an input rather than a static span (a buyer
      who mistyped at checkout must be able to fix it before the account is created), and
      the card carries the OAuth stack, the inline error and the six-digit code step the
      design does not draw. See docs/v3/decisions/pending/U25-claim-card-live-capabilities.md.
   4. `.or-cta-foot-link` and `.or-cloud-foot-link`: the design's two footer links are
      `<a href="#">`; here they are buttons, because they open a sheet and close one.

   Nothing new is invented visually: every declaration below either neutralises a default
   the design's own element does not have, or reuses the page's own tokens. */

/* 1 — the indeterminate download sweep */
@keyframes or-att-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
.or-att[data-state="downloading"] .or-att-progress {
  width: 32%;
  animation: or-att-sweep 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .or-att[data-state="downloading"] .or-att-progress {
    animation: none;
    width: 100%;
  }
}

/* 2 — a link wearing the design's button */
a.or-att-btn,
a.or-item-cta {
  text-decoration: none;
}
a.or-att-btn:hover,
a.or-item-cta:hover {
  text-decoration: none;
}
a.or-att-btn[aria-disabled="true"],
a.or-item-cta[aria-disabled="true"] {
  pointer-events: none;
}

/* 3 — the claim card's live extras */
.or-claim-email-addr {
  /* An input in the slot the design fills with a span: same font, same colour, no chrome. */
  appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  font: inherit;
  line-height: inherit;
}
.or-claim-email-addr::placeholder { color: var(--cb-muted); }
.or-claim-email:focus-within {
  border-color: var(--cb-link);
  box-shadow: 0 0 0 2px rgba(52, 182, 234, .20);
}
.or-claim-email-gate .or-email-gate-eb { margin-top: 12px; }
.or-claim-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  background: rgba(231, 76, 60, .08);
  border: 1px solid rgba(231, 76, 60, .28);
  font: 400 13px/19px var(--cb-font-regular);
  color: var(--cb-text);
}
.or-claim-error-action {
  color: var(--cb-link-text, var(--cb-link));
  font-weight: 600;
  text-decoration: none;
}
.or-claim .ah-social-stack { margin-top: 14px; }
.or-claim-divider {
  margin: 14px 0 2px;
  text-align: center;
  font: 400 12px/16px var(--cb-font-regular);
  color: var(--cb-muted);
}
.or-claim-done:not([hidden]) { display: block; }
.or-claim-done-head { display: flex; align-items: center; gap: 12px; }
.or-claim-done .ah-code { margin-top: 14px; }
.or-claim-actions { margin-top: 16px; }

/* 4 — the two footer controls the design draws as links */
.or-cta-foot-link,
.or-cloud-foot-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--cb-link-text, var(--cb-link));
}
.or-cta-foot-link:hover,
.or-cloud-foot-link:hover { text-decoration: underline; }

/* The summary the hero's control scrolls to takes focus; the outline the design gives it
   is `.is-highlighted`, so the focus ring would double it. */
.or-purchase-summary:focus { outline: none; }
/* The tip dialog (v3 plan U26). Unit-wide, bundled unscoped (KTD4): the dialog is opened from the
   product page today and from anywhere a tip card is put tomorrow.

   The whole dialog is a departure the handoff does not draw — its tip card asks for
   `POST /api/tips` and a "sending → sent" flip on the Send button — so nothing here is a pixel of
   the design being reproduced; it is the design's own parts arranged for a payment.
   docs/v3/decisions/pending/U26-tip-payment-dialog.md.

   Two of those parts are already global in both bundles and are used as they are: the checkout's
   method accordion (`.ch-method*`, `.ch-pay-btn`, `.ch-card-mark`, `.ch-usdc-word`) and U10's
   feedback panel. The third, the modal shell, is not: on mobile `.os-modal*` is global, but on
   desktop every one of its rules is written `:where(.dc-port) .os-modal…`, and `.dc-port` is a body
   class the handoff puts on desktop pages that host ported mobile components — which the product
   page is not. An unstyled dialog is what that scope produced the first time this shipped.

   So the shell keeps its own family, `tip-modal*`, whose rules are the handoff's `.os-modal` rules
   verbatim (identical in `desktop/page-components.css.erb` and `mobile/core/22_open_store_page.css`
   — the same numbers in both), with one change: the panel is `min(420px, 100vw - 32px)` rather than
   360px, because a payment accordion does not fit a confirmation's width. Renaming rather than
   un-scoping keeps `.os-modal` exactly where the handoff put it: adding a global copy of those
   rules would override any page-scoped `.os-modal` a page unit writes, since `:where()` carries no
   specificity and the units tree is bundled after the pages tree. */

.tip-modal-host {
  position: fixed; inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.tip-modal-host.is-open { pointer-events: auto; }
.tip-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8,12,16,0);
  transition: background 240ms ease;
}
.tip-modal-host.is-open .tip-modal-backdrop { background: rgba(8,12,16,.35); }
.tip-modal {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--cb-panel);
  color: var(--cb-text);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  transform: translateY(8px) scale(.96);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.32,.72,.24,1), opacity 200ms ease;
  padding: 22px 22px 26px;
  text-align: center;
}
.tip-modal-host.is-open .tip-modal { transform: translateY(0) scale(1); opacity: 1; }
.tip-modal-close {
  position: absolute; top: 14px; right: 12px;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--cb-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.tip-modal-mark {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(123,193,120,.18);
  border: 1.5px solid var(--cb-commit);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  color: var(--cb-text);
  box-shadow: 0 6px 14px rgba(123,193,120,.18);
}
.tip-modal-title {
  margin: 0 0 6px;
  font: 300 22px/28px "Mulish", var(--cb-font-light, system-ui);
}
.tip-modal-intro {
  margin: 6px 0 14px;
  font: 400 14px/22px var(--cb-font-regular);
  color: var(--cb-text);
}

/* The payment surface inside it. `.ch-methods` is padded for the checkout's summary column; inside
   a modal panel that padding is already there, and the panel's centred text is the confirmation's,
   not a payment form's. */
.tip-modal .tip-methods { padding: 0; margin-top: 4px; text-align: left; }

/* The send button repeats the amount, so it belongs to the method that will take it rather than to
   a separate footer as it does at checkout. */
.tip-modal .ch-pay-btn.tip-pay { height: 46px; border-radius: 999px; font-size: 12px; letter-spacing: 1.4px; }
.tip-modal .ch-method-body .ch-pay-btn.tip-pay { margin-top: 2px; }
.tip-modal .ch-pay-btn.tip-pay[disabled] { opacity: .55; cursor: default; box-shadow: none; }

/* A settled, waiting or refused tip: one feedback panel and one way out. */
.tip-modal .tip-state { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 4px; }

/* The Payment Element's own loading line, the same shape the checkout's card row uses. */
.tip-modal .ch-payment-loading { display: flex; align-items: center; gap: 8px; font: 400 13px/1.4 var(--cb-font-regular); color: var(--cb-muted); }

/* The open method's body has to be able to hold Stripe's element, which is taller than the 340px
   the checkout's own accordion allows for its four short rows, and grows again when Link opens its
   email, phone and name rows. A capped, clipped flex column then shrank its last child: the Send
   button was squeezed to a 12px sliver (QA older item 56). The open body is as tall as what it holds
   (the panel scrolls), and nothing in it shrinks. The cap stays a number so the accordion animates. */
.tip-modal .ch-method.is-open .ch-method-body { max-height: 2000px; overflow: visible; }
.tip-modal .ch-method-body > * { flex-shrink: 0; }
/* Display currencies (v3 plan U27). Two properties, and neither is a handoff pixel: the ported
   `v3/shared/currency.css` is the design, unchanged.

   The handoff's currency dialog is its own panel — `.cb-currency-dialog` carries the width, the
   padding, the card background and the shadow — while U9's host reset assumes a host whose child
   carries the box, so it gives every `dialog[data-cb-overlay]` `inset:0` with `height:auto` and
   `max-width:none`. Both are the browser's own modal defaults being neutralised, and this panel
   needs them:

   * `height:fit-content` — a modal with `inset:0` and `height:auto` stretches from the top of the
     viewport to the bottom; `fit-content` is what `margin:auto` centres (measured: 620px tall at
     the handoff's own position, against a full-viewport panel without it).
   * `max-width:calc(100% - 6px - 2em)` — the UA's own modal cap, which the handoff's mobile dialog
     is sitting on: at 390 it is 356px wide, and without the cap `width:calc(100% - 24px)` makes it
     366px and rewraps the explanation.

   Class specificity beats U9's zero-specificity `:where()`; everything else it sets still applies. */
dialog.cb-currency-dialog[data-cb-overlay] { height: fit-content; max-width: calc(100% - 6px - 2em) }
/* v3 unit CSS: notifications and conversations (v3 plan U30, KTD4). Bundled unscoped from
   v3/<build>/units/, so it applies wherever the two pages' markup renders.

   Three rules, and nothing else. Every other line of these two pages is the handoff's own,
   ported verbatim into v3/<build>/pages/{notifications,conversations}.css.

   1. `.cv-msg.is-pending` — the in-flight bubble the composer appends while a send is in the
      air. The design draws no such state; this is its own `.cv-msg` dimmed, with "Sending…" in
      the `.cv-msg-when` slot it already has.
      (docs/v3/decisions/pending/U30-message-pending-state.md)
   2. `a.cv-att` — the design's attachment card is a screenshot with `cursor: zoom-in`. A
      Cubebrush message can carry a zip or a psd, which opens rather than zooms, so the anchor
      form of the same card gets the pointer cursor. No new class name.
   3. `.cv-compose-files` — the host U10's file rows render into while attachments upload; the
      handoff's compose strip leaves that state undrawn ("render thumb previews above the
      action row"). Spacing only. */

.cv-msg.is-pending { opacity: .55; }
.cv-msg.is-pending .cv-msg-when { font-style: italic; }
a.cv-att { cursor: pointer; text-decoration: none; }
.cv-compose-files { margin-bottom: 10px; display: grid; gap: 8px; }
.cv-compose-files[hidden] { display: none; }
/* r38 A9: a file is taken off the message with its own control. */
.cv-compose-files .file-remove { margin-left: 4px; width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%;
                                  background: none; color: var(--cb-sec); font-size: 18px; line-height: 1; cursor: pointer; }
.cv-compose-files .file-remove:hover { background: var(--cb-bg); color: var(--cb-text); }
.cv-compose-files .file-remove:focus-visible { outline: 2px solid var(--cb-link); outline-offset: 1px; }
/* u35_uploads.css: the one desktop rule the handoff has no name for (v3 plan U35, KD6, KTD4).

   Everything else the desktop upload region needs is already in v3/desktop/pn-review.css.erb, which
   U6 ported whole from production-desktop/assets/css/pn-review.css.

   `.pn-file-resume` is the recovery control on a stopped row. The desktop page draws no failed row at
   all, so it has no control and no rule; the approved `CB_UPLOAD_NETWORK` action ("Resume upload") has
   to live somewhere. It takes the grid cell the progress bar occupies — the bar means nothing on a row
   that stopped — so the row's height, its five columns and the position of every other control are the
   design's, unchanged. Filed as docs/v3/decisions/pending/U35-desktop-row-recovery-states.md. */

.pn-file-resume{justify-self:stretch;width:180px;height:28px;padding:0 10px;font:600 12px/1 var(--cb-font-semibold);white-space:nowrap}

/* ORDER-PROOF. `v3/desktop/store.css` styles the product card's owner controls:

     .cb-pcard-owner-drag, .cb-pcard-owner-kebab { position:absolute; width:32px; height:32px;
       border-radius:999px; background:rgba(20,23,33,.78); color:#fff; z-index:3; box-shadow:...;
       backdrop-filter:blur(4px) }

   and the handoff's file row reuses that same class on its drag handle
   (D:store/products/new/index.html:440), where `pn-review.css` puts it back to a static 24 px
   transparent handle. On the handoff those two files never meet: the product-new page links
   pn-review.css and not store.css. The v3 bundle concatenates every page's CSS, and `require
   v3/desktop/store` sits AFTER `require v3/desktop/pn-review` in the desktop entrypoint, so the card's
   rule wins and the handle becomes a 32 px absolutely-positioned circle. It then leaves the grid flow,
   every cell of the row shifts one column left, the file name is squeezed to 44 px and each row grows
   13 px taller — measured before this rule, against the handoff: 79 px rows instead of 66 px.

   One class deeper is enough (`.pn-file > .pn-file-drag` beats `.cb-pcard-owner-drag`), which is why
   this is a rule and not an entrypoint change: only U6 owns the entrypoint. The alternative fix, if
   the master would rather have it, is moving `require v3/desktop/store` above `pn-review` there.
   U36 inherits this: the product form is the page where the two classes meet. */
.pn-file > .pn-file-drag{position:static;width:24px;height:32px;border-radius:6px;background:transparent;color:var(--cb-muted);border:0;padding:0;z-index:auto;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;left:auto;top:auto;cursor:grab}
/* u36_category_sheet.css: the categories dialog on the desktop build (v3 plan U36, KD6, KTD4).

   The handoff draws a category picker on one build only. The desktop Listing card shows the chosen
   categories as chips with a `+ Add` chip that nothing in the prototype wires
   (`pn-review.js` binds the suggestion chips and the per-chip x, never `.pn-chip.is-add`) — so the
   desktop page as delivered cannot pick a category at all, and category is one of the four rows its
   own publish gate refuses to pass without. The answer proposed in
   docs/v3/decisions/pending/U36-desktop-category-sheet.md is the mobile page's own sheet, unchanged,
   centred on the desktop viewport instead of docked to the bottom edge.

   These are that sheet's rules, ported from the same inline <style> block as the mobile page file
   (v3/mobile/pages/product-form.css @ handoff 2f4fe50) — the two builds' entrypoints require
   separate trees, and only U6 may add a require to either, so a rule that both builds need is
   written in both. Everything below the ORDER-PROOF divider is what makes it a desktop dialog: the
   panel is centred and capped rather than full-bleed, and nothing else changes.
   (No "*" followed by "/" may appear in this comment.) */

/* Categories sheet */
    .ap-catsheet {
      position: fixed; inset: 0; z-index: 100;
      pointer-events: none;
    }
.ap-catsheet.is-open { pointer-events: auto; }
.ap-catsheet-backdrop {
      position: absolute; inset: 0;
      background: rgba(20,23,33,0);
      transition: background 240ms cubic-bezier(.32,.72,.24,1);
    }
.ap-catsheet.is-shown .ap-catsheet-backdrop { background: rgba(20,23,33,.55); }
.ap-catsheet-panel {
      position: absolute; left: 0; right: 0; bottom: 0;
      margin: 0 auto; max-width: 480px;
      height: calc(100vh - 24px);
      background: var(--cb-bg);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      display: flex; flex-direction: column; overflow: hidden;
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(.32,.72,.24,1);
      box-shadow: 0 -10px 30px rgba(0,0,0,.18);
    }
.ap-catsheet.is-shown .ap-catsheet-panel { transform: translateY(0); }
.ap-catsheet-handle {
      display: flex; justify-content: center;
      padding: 8px 0 4px; flex-shrink: 0;
      background: var(--cb-card);
    }
.ap-catsheet-handle::after {
      content: ''; width: 38px; height: 4px; border-radius: 4px;
      background: var(--cb-border-hard); opacity: .7;
    }
.ap-catsheet-header {
      padding: 4px 16px 12px; flex-shrink: 0;
      border-bottom: 1px solid var(--cb-border);
      background: var(--cb-card);
    }
.ap-catsheet-titlerow {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
.ap-catsheet-title {
      font: 300 22px/1.1 var(--cb-font-regular);
      color: var(--cb-text); letter-spacing: -.2px;
    }
.ap-catsheet-close {
      width: 32px; height: 32px; border-radius: 999px;
      background: var(--cb-bg); border: 1px solid var(--cb-border);
      cursor: pointer; color: var(--cb-text);
      display: inline-flex; align-items: center; justify-content: center;
    }
.ap-catsheet-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ap-catsheet-search {
      position: relative;
      background: var(--cb-bg); border: 1px solid var(--cb-border);
      border-radius: 999px; height: 38px;
      display: flex; align-items: center;
    }
.ap-catsheet-search svg {
      width: 14px; height: 14px; fill: none; stroke: var(--cb-muted); stroke-width: 2; stroke-linecap: round;
      margin-left: 14px; flex-shrink: 0;
    }
.ap-catsheet-search input {
      flex: 1; height: 100%; padding: 0 12px;
      background: transparent; border: none; outline: none;
      font: 400 14px/1 var(--cb-font-regular); color: var(--cb-text);
    }
.ap-catsheet-primary {
      background: #2c3242;
      border-bottom: 1px solid rgba(0,0,0,.2);
      overflow-x: auto; overflow-y: hidden;
      scrollbar-width: none;
    }
.ap-catsheet-primary::-webkit-scrollbar { display: none; }
.ap-catsheet-primary-row {
      display: flex; gap: 0; padding: 0 4px;
    }
.ap-cattab {
      flex: none; position: relative;
      background: transparent;
      color: rgba(255,255,255,.65);
      border: none; cursor: pointer;
      padding: 14px 16px 12px;
      font: 500 13px/1 var(--cb-font-regular);
      letter-spacing: .2px;
      display: inline-flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
.ap-cattab.is-active {
      background: #1f2530;
      color: #fff;
      font-weight: 700;
    }
.ap-cattab.is-active::after {
      content: ''; position: absolute; left: 12px; right: 12px; bottom: 0;
      height: 2px; background: var(--cb-link);
      border-radius: 2px;
    }
.ap-cattab-count {
      min-width: 18px; height: 18px; padding: 0 5px;
      border-radius: 999px;
      background: var(--cb-link); color: #fff;
      font: 700 10px/1 var(--cb-font-regular);
      display: inline-flex; align-items: center; justify-content: center;
    }
.ap-catsheet-body {
      flex: 1; position: relative; overflow: hidden;
    }
.ap-catsheet-scroll {
      position: absolute; inset: 0;
      overflow-y: auto;
      background: var(--cb-bg);
      padding: 8px 16px 32px;
      -webkit-overflow-scrolling: touch;
    }
.ap-catsheet-section { margin-top: 16px; }
.ap-catsheet-section-head {
      font: 700 10px/1 var(--cb-font-regular);
      letter-spacing: 2.2px; text-transform: uppercase;
      color: var(--cb-muted); margin-bottom: 10px;
    }
.ap-catsheet-chips {
      display: flex; flex-wrap: wrap; gap: 8px;
    }
.ap-catchip {
      min-height: 36px; padding: 8px 12px;
      background: var(--cb-card);
      border: 1.5px solid var(--cb-border);
      border-radius: 999px;
      color: var(--cb-text);
      font: 500 13px/1 var(--cb-font-regular);
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
    }
.ap-catchip.is-on {
      background: rgba(64,179,222,.10);
      border-color: var(--cb-link);
      color:var(--cb-link-text,var(--cb-link));
      font-weight: 700;
    }
.ap-catchip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ap-catsheet-empty {
      padding: 40px 0; text-align: center;
      font: 400 13px/1.5 var(--cb-font-regular); color: var(--cb-muted);
    }
.ap-catsheet-empty b { color: var(--cb-text); }
.ap-catsheet-fade {
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 32px; pointer-events: none; z-index: 2;
      background: linear-gradient(to bottom, transparent, var(--cb-bg));
    }
.ap-catsheet-foot {
      border-top: 1px solid var(--cb-border);
      background: var(--cb-card);
      padding: 12px 16px;
      display: flex; align-items: center; gap: 10px;
      flex-shrink: 0;
    }
.ap-catsheet-foot-count {
      flex: 1;
      font: 400 12px/1.3 var(--cb-font-regular); color: var(--cb-muted);
    }
.ap-catsheet-foot-count b { color: var(--cb-text); font-weight: 700; }
.ap-catsheet-save {
      height: 40px; padding: 0 22px;
      background: #7ac845; color: #fff;
      border: none; border-radius: 999px;
      font: 700 11px/1 var(--cb-font-regular); letter-spacing: 1.8px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 2px 0 rgba(0,0,0,.06);
    }
/* The footer's Cancel: the dialog's secondary button, as tall as SAVE and level with it (343.png). */
.ap-catsheet-cancel {
      height: 40px; padding: 0 20px;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; color: var(--cb-text);
      border: 1px solid var(--cb-border); border-radius: 999px;
      font: 700 11px/1 var(--cb-font-regular); letter-spacing: 1.8px; text-transform: uppercase;
      cursor: pointer;
    }
.ap-catsheet-cancel:hover { border-color: var(--cb-muted); }

/* ---- the desktop dialog ------------------------------------------------------------------------
   The mobile sheet is docked to the bottom edge and full width. On desktop it is a centred dialog,
   which is the only difference the proposal asks for. */
.ap-catsheet .ap-catsheet-panel{
  position:relative; left:auto; right:auto; bottom:auto;
  width:min(560px, calc(100vw - 64px)); max-width:560px;
  /* A height, not a max-height: `.ap-catsheet-body` is `flex:1` over an absolutely positioned
     scroller, so an auto-height panel gives it nothing to be 1 of — the chips then overflow under
     the sticky footer instead of scrolling under it. */
  height:min(720px, calc(100vh - 96px));
  border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  transform:translateY(12px) scale(.98);
}
.ap-catsheet.is-shown .ap-catsheet-panel{transform:none}
.ap-catsheet{display:flex; align-items:center; justify-content:center}
.ap-catsheet-handle{display:none}

/* The mobile sheet is hidden by one thing only: its panel is absolutely positioned against the
   bottom edge and translated 100% down, so a closed sheet is off-screen. A centred dialog has no
   edge to slide past, so the closed desktop sheet has to be hidden outright — without this it
   paints over the page, which is exactly how it was found: a region capture of the topbar came back
   with "Select categories" across it. `visibility` rather than `display` keeps the transition, and
   takes the closed dialog out of the accessibility tree and out of hit-testing as well. */
.ap-catsheet{visibility:hidden; opacity:0; transition:opacity 200ms ease, visibility 0s linear 200ms}
.ap-catsheet.is-open{visibility:visible; opacity:1; transition:opacity 200ms ease}

/* The footer's note when a pick past the limit is refused (v3-master's ruling), and each tab's name
   over its matches while a search looks across every tab. */
.ap-catsheet-limit { display: block; margin-top: 3px; font: 600 12px/1.3 var(--cb-font-regular); color: #ec4d4d; }
.ap-catsheet-limit[hidden] { display: none; }
.ap-catsheet-pane-head { margin: 4px 0 10px; font: 800 13px/1.2 var(--cb-font-regular); color: var(--cb-text); }
.ap-catsheet-pane-head[hidden] { display: none; }
.ap-catsheet.is-searching [data-primary-pane]:not([hidden]) + [data-primary-pane]:not([hidden]) { margin-top: 18px; }
/* u36_product_form.css: the two rules the desktop product form needs and the handoff has no name
   for (v3 plan U36, KD6, KTD4).

   Everything the desktop page draws is already ported: U6 took production-desktop/assets/css/
   pn-review.css whole as v3/desktop/pn-review.css.erb and products-new.css as
   v3/desktop/products-new.css, and the desktop entrypoint requires both. So this file is not a page
   port. It is the same ORDER-PROOF problem U35 documented, on the second class the two files share.

   ORDER-PROOF. The handoff's preview tile reuses the product card's owner-drag class on its drag
   handle (D:store/products/new/index.html:388, class="cb-pcard-owner-drag pn-media-drag"), where
   pn-review.css restyles it as a 26 px hover-revealed pip:

     .pn-media-drag,.pn-media-x{position:absolute;top:6px;width:26px;height:26px;opacity:0;z-index:2}
     .pn-media-drag{left:6px}
     .pn-media-drag svg{width:12px;height:12px}

   v3/desktop/store.css styles the same class as the card's 32 px circle with a shadow and a blur,
   and `require v3/desktop/store` sits AFTER `require v3/desktop/pn-review` in the desktop
   entrypoint, so on a bundle that concatenates every page's CSS the card's rule wins: each preview
   handle grows to 32 px, moves 2 px down and right, gains a drop shadow and a backdrop blur, and
   sits above the remove button instead of beside it. On the handoff the two files never meet — the
   product-new page links pn-review.css and not store.css. This is U35's `.pn-file-drag` finding on
   the media grid, which U35's note said this unit would inherit.

   One class deeper is enough (`.pn-media-item > .pn-media-drag` beats `.cb-pcard-owner-drag`), which
   is why this is a rule and not an entrypoint change: only U6 owns the entrypoint. The alternative
   fix, for the master, is moving `require v3/desktop/store` above `pn-review` there, which would
   retire this file and U35's rule together.

   The focus rule is not cosmetic: store.css removes the outline from this class
   (`.cb-pcard-owner-drag:focus,.cb-pcard-owner-drag:focus-visible{outline:none}`), and a keyboard
   seller reordering previews would have nothing to see. It restores the v3 base ring
   (v3/desktop/core/00_base.css:16).
   (No "*" followed by "/" may appear in this comment.) */

.pn-media-item > .pn-media-drag{width:26px;height:26px;left:6px;top:6px;z-index:2;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.pn-media-item > .pn-media-drag svg{width:12px;height:12px}
.pn-media-item > .pn-media-drag:focus-visible{outline:2px solid var(--cb-link);outline-offset:2px}

/* A preview tile that has no image yet — the seconds between the upload finishing and
   ProcessProductImageWorker writing `image`, and the seconds before that while the bytes travel.
   Both used to render as `background-image:url('')`: an empty grey box indistinguishable from a
   failure. The tile now carries its own state, and the label sits on the same dark plate the drag
   and remove buttons use (pn-review.css:214) so the two read as one control set. */
.pn-media-item.is-pending .pn-media-open{cursor:default;filter:saturate(.55) brightness(.82)}
.pn-media-item[data-preview-state="failed"] .pn-media-open{filter:grayscale(1) brightness(.7)}
.pn-media-note{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3px 6px;background:rgba(20,23,33,.78);color:#fff;font:600 11px/1.4 var(--cb-font-semibold);text-align:center;pointer-events:none}
.pn-media-progress{position:absolute;left:0;bottom:0;z-index:3;height:3px;width:0;background:var(--cb-link);transition:width .18s ease-out}

/* QA item 51: the Category row's status line when a new Page layout cleared the old layout's
   categories; the row hint's type (.pn-row2-h), and nothing at all while it is empty. */
.pn-cat-note{margin:8px 0 0;font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted)}
.pn-cat-note:empty{display:none}

/* QA item 52: the freebies flag is drawn on every page and hidden while the Basic price is not zero;
   .ap-price-flag's own display would otherwise show it. */
.ap-price-flag[hidden]{display:none}

/* QA item 247: the row's toggle is its own button around the check and the label (the row holds the
   info dot and the stock input, so it can no longer be the button). It fills the row up to them, so a
   click anywhere on the label side toggles as before. */
.ap-price-flag-toggle{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ap-price-flag-toggle[aria-disabled="true"]{cursor:default}

/* The Markdown cheat sheet under the description (MarkdownHelpComponent, both builds): a centred
   dialog the "Markdown syntax" button opens in place, rather than a link that left the editor. */
.pn-mdhelp-open{padding:0;border:0;background:none;font:inherit;color:var(--cb-link-text,var(--cb-link));cursor:pointer}
.pn-mdhelp-host{display:flex;align-items:center;justify-content:center;padding:16px;z-index:90}
.pn-mdhelp-backdrop{position:absolute;inset:0;background:rgba(8,12,16,.5);opacity:0;transition:opacity 200ms ease}
.pn-mdhelp-host.is-open .pn-mdhelp-backdrop{opacity:1}
.pn-mdhelp{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--cb-card);color:var(--cb-text);border:1px solid var(--cb-border);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:18px 20px 20px;opacity:0;transform:translateY(8px) scale(.98);transition:transform 200ms ease,opacity 200ms ease}
.pn-mdhelp-host.is-open .pn-mdhelp{opacity:1;transform:none}
.pn-mdhelp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pn-mdhelp-title{margin:0;font:400 20px/26px var(--cb-font-light,var(--cb-font-regular));color:var(--cb-text)}
.pn-mdhelp-close{width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--cb-border);background:transparent;color:var(--cb-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.pn-mdhelp-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pn-mdhelp-table{width:100%;border-collapse:collapse;font:400 13px/18px var(--cb-font-regular);color:var(--cb-text)}
.pn-mdhelp-table th{text-align:left;font:700 10px/1 var(--cb-font-regular);letter-spacing:1.6px;text-transform:uppercase;color:var(--cb-muted);padding:0 0 8px}
.pn-mdhelp-table td{padding:7px 0;border-top:1px solid var(--cb-border);vertical-align:middle}
.pn-mdhelp-table td:first-child{padding-right:14px;width:58%}
.pn-mdhelp-table code{font:400 12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--cb-bg);border:1px solid var(--cb-border);border-radius:4px;padding:2px 6px;overflow-wrap:anywhere}
.pn-mdhelp-strong{font-weight:700}
.pn-mdhelp-em{font-style:italic}
.pn-mdhelp-heading{font:700 16px/20px var(--cb-font-regular)}
.pn-mdhelp-link{color:var(--cb-link-text,var(--cb-link));text-decoration:underline}
.pn-mdhelp-code{font:400 12px/16px ui-monospace,SFMono-Regular,Menlo,monospace}
.pn-mdhelp-more{display:inline-block;margin-top:14px;color:var(--cb-link-text,var(--cb-link));text-decoration:none;font:600 13px/18px var(--cb-font-regular)}

/* The 3D cards' chips (What is included, Included formats) are labels around a hidden checkbox, and the
   server's `.is-on` is drawn once: a chip the seller ticked looked off until a reload. On while checked
   (2026-10-13, found with the phone's M9). */
.pn-chips label.pn-chip:has(input:checked) { background: var(--cb-text); color: var(--cb-card); border-color: var(--cb-text); }
.pn-chips label.pn-chip:not(:has(input:checked)).is-on { background: transparent; color: var(--cb-text); border-color: var(--cb-border-hard); }

/* Add a product's way to the mass uploader (fix-a's parity sweep, M11), under the top bar. */
.pn-mass-upload { display: block; margin: -6px 0 14px; text-align: right; font: 600 12px/1.4 var(--cb-font-semibold); color: var(--cb-link-text, var(--cb-link)); text-decoration: none; }
.pn-mass-upload:hover { text-decoration: underline; }
.pn-mass-upload.is-disabled { color: var(--cb-muted); cursor: not-allowed; text-decoration: none; }
/* v3 editor and admin tools (v3 plan U38). Page-scoped rules for the surfaces the handoff has no
   markup for; everything the handoff draws (the compose sheet, the insert dialogs, the review note,
   the home editor bar and dialog) is styled by the ported files as it stands.

   1. The review note's action (Submit for review / Publish) is a button styled as the note's own
      links (`.bl-review-note a` in blog-article.css), which the handoff draws but never fills;
      pending decision U38-preview-publish-controls. A feedback panel raised on the note sits under
      the sentence.
   2. Admin tools on public pages (the tile pills, the marketplace editor bar, the freebie review
      bar, the product admin menu): the handoff's editor-bar vocabulary (`.dh-home-admin` in
      home-editor.css) reused, plus the geometry those surfaces need. The pill overlay repeats the
      featured grid's tracks (04_signed_in_hero.css) so each pill lands on its tile without
      touching U12's tile markup.
   3. The home editor dialog on U9's native dialog host: the host keeps the handoff's panel rules,
      the inner wrappers are neutral. */
.bl-review-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.bl-review-note-action{margin-left:12px;padding:0;border:0;background:none;color:var(--cb-link-text,var(--cb-link));text-decoration:underline;font:inherit;cursor:pointer}
.bl-review-note-action:disabled{opacity:.5;cursor:progress}
.bl-review-note .cb-feedback{flex-basis:100%;margin:12px 0 0}

.dh-home-admin-status:not([hidden]){display:block}
.dh-home-admin-status.is-error{color:var(--cb-error,#e74c3c)}
/* The pill overlay is the featured grid's last child, absolutely placed over the grid's own box (H1:
   rendered after the hero, it started at the hero's bottom edge, a row below the cards). */
.dh-featgrid:has(>.dh-home-tile-editor){position:relative}
.dh-home-tile-editor{position:absolute;inset:0;z-index:2;pointer-events:none}
.dh-home-tile-editor-grid{display:grid;grid-template-columns:1.5fr 1.5fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:100%}
.dh-feat.is-empty{background:transparent;border:1px dashed var(--cb-line-dark)}
.dh-home-tile-editor-grid>.is-lg,.dh-home-tile-editor-grid>.is-promo{grid-row:span 2}
.dh-home-tile-pill{pointer-events:auto;position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border:1px solid var(--cb-border-hard);border-radius:8px;background:var(--cb-card);color:var(--cb-text);font:600 12px/1.4 var(--cb-font-semibold);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.dh-home-tile-pill svg{width:14px;height:14px}
.dh-home-tile-pill:hover{border-color:var(--cb-link)}
.dh-home-tile-pill:focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
.dh-home-tile-editor-grid>div{position:relative}
@media(max-width:1100px){.dh-home-tile-editor-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}.dh-home-tile-editor-grid>div{aspect-ratio:16/10}.dh-home-tile-editor-grid>.is-lg,.dh-home-tile-editor-grid>.is-promo{grid-row:auto}}

/* U9's overlay base sets height:auto with inset:0 on the fixed host, which stretches a native dialog
   to the viewport; the handoff's dialog keeps the UA's fit-content, so the panel is as tall as its form. */
.dh-home-editor{height:fit-content}
.dh-home-editor-backdrop,.dh-home-editor-panel{display:contents}
.dh-home-editor-alert .cb-feedback{margin:0;flex:1}
.dh-home-editor-alert:has(.cb-feedback){padding:0;border:0}

.dh-admin-bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.dh-home-admin button.is-primary{background:var(--cb-link);border-color:var(--cb-link);color:#fff}
.dh-home-admin button:disabled{opacity:.5;cursor:not-allowed}
.dh-featured-editor-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.dh-featured-editor-slide{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:start;padding:14px;border:1px solid var(--cb-border);border-radius:10px;background:var(--cb-bg)}
/* The row's form wraps the figure, the fields and the buttons (a slide is one submit), so it lays out as its children: they are the grid's three columns (QA item 96: the form was one 96px cell). */
.dh-featured-editor-slide>form{display:contents}
/* A checkbox's label reads on one line, the box before its words: the handoff's editor labels are grids for a caption over a field, which stacked the box above "Published" (QA item 96; the banner editor's two toggles too). */
.dh-home-editor label:has(>input[type="checkbox"]){display:flex;align-items:center;justify-content:flex-start;gap:8px}
.dh-home-editor label>input[type="checkbox"]{flex:none;width:auto;min-height:0;margin:0}
.dh-featured-editor-slide figure{margin:0;width:96px;height:54px;border-radius:6px;overflow:hidden;background:var(--cb-panel,var(--cb-card))}
.dh-featured-editor-slide figure img{width:100%;height:100%;object-fit:cover;display:block}
.dh-featured-editor-slide-fields{display:grid;gap:10px}
.dh-featured-editor-slide-order{display:flex;flex-direction:column;gap:6px}
.dh-home-editor button.dh-featured-editor-mini{min-height:32px;padding:4px 10px}
.dh-featured-editor-empty{color:var(--cb-sec);font:400 13px/1.5 var(--cb-font-regular)}

.cb-pcard-admin-menu{position:absolute;top:8px;left:8px;z-index:5}
.cb-pcard-admin-menu .nt-menu{position:static}
.cb-pcard-admin-menu .nt-menu-pop{left:0;right:auto;min-width:220px}
/* M1: the row menu's own rules live on the notifications page, so on a card the popup sat in the flow and its
   link rows ran inline. It is placed under the button, and every row is a line of its own. */
.cb-pcard-admin-menu .nt-menu-pop{position:absolute;top:calc(100% + 6px);display:flex;flex-direction:column;z-index:30}
.cb-pcard-admin-menu .nt-menu-pop[hidden]{display:none}
.cb-pcard-admin-menu .cb-dd-option{display:block;text-align:left;text-decoration:none;white-space:nowrap}
/* The admin card menu is admin-only chrome the handoff does not draw: its button is the store owner's
   kebab chip (U31 .cb-pcard-owner-kebab) at the thumb's top-left (the master, 2026-09-29, QA item 53).
   The row-menu button styles live on the notifications page only, so the card had none and the
   bare icon vanished on a light cover. */
.cb-pcard-admin-menu .nt-menu-btn{width:32px;height:32px;border-radius:999px;background:rgba(20,23,33,.78);color:#fff;border:none;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(20,23,33,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.cb-pcard-admin-menu .nt-menu-btn svg{width:16px;height:16px;fill:currentColor}
/* The video badge shares that corner: on an admin's card it sits right of the chip. */
.cb-pcard-thumb:has(> .cb-pcard-admin-menu) .cb-pcard-video{left:48px}
.cb-pcard-admin-stamp{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;background:#e74c3c;color:#fff;font:800 10px/1 var(--cb-font-semibold);letter-spacing:.5px;margin-left:6px}
/* The admin card's Edit categories & cluster page (fix-c's visitor sweep MK5). */
.v3-admin-cats{max-width:720px;margin:32px auto;padding:0 16px;color:var(--cb-text)}
.v3-admin-cats-title{font:700 24px/1.2 var(--cb-font-semibold);margin:0 0 6px}
.v3-admin-cats-product{margin:0 0 20px;color:var(--cb-sec)}
.v3-admin-cats-error{color:var(--cb-error);margin:0 0 16px}
.v3-admin-cats-form{display:grid;gap:18px}
.v3-admin-cats-field{display:grid;gap:8px;border:0;padding:0;margin:0}
.v3-admin-cats-field>span,.v3-admin-cats-field legend{font:600 13px/1.2 var(--cb-font-semibold);color:var(--cb-sec)}
.v3-admin-cats-field select{height:38px;border-radius:6px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);color:var(--cb-text);padding:0 10px}
.v3-admin-cats-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 16px}
.v3-admin-cats-check{display:flex;gap:8px;align-items:center;font:500 13px/1.3 var(--cb-font-regular)}
.v3-admin-cats-save{justify-self:start}
.v3-admin-cats-resource{grid-template-columns:1fr auto;align-items:end;margin-bottom:12px}
/*
 * U51: official store discovery (handoff 086fa58, production-desktop/assets/css/desktop.css, the block headed
 * "Official store discovery, using the existing navigation surfaces."), ported verbatim.
 * Styles the "Cubebrush Store / Official" link at the top of the desktop Marketplace menu
 * (CatalogNavComponent, .dh-market-panel). The footer row (a.cb-official-store-footer) has no rules of its own.
 */
.dh-nav .dh-market-panel .cb-official-store-link,#marketplace-menu .cb-official-store-link{display:flex;align-items:center;gap:12px;min-height:62px;padding:12px 14px;margin:0 0 16px;background:var(--cb-card);border:1px solid var(--cb-border-hard,var(--cb-border));border-radius:10px;color:var(--cb-text);text-decoration:none;font:600 14px/1.4 var(--cb-font-semibold);letter-spacing:0;text-transform:none;transition:border-color 140ms ease,background 140ms ease}
.dh-nav .dh-market-panel .cb-official-store-link:hover,#marketplace-menu .cb-official-store-link:hover{border-color:var(--cb-link);background:var(--cb-bg);text-decoration:none}
.cb-official-store-link .cb-official-store-mark{display:flex!important;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;background:#142533;border-radius:8px}
.cb-official-store-link .cb-official-store-mark img{display:block;width:24px;height:24px;object-fit:contain}
.cb-official-store-link .cb-official-store-label{min-width:0}
.dh-nav .dh-market-panel .cb-official-store-link .cb-official-store-badge,#marketplace-menu .cb-official-store-link .cb-official-store-badge{display:inline-flex;align-items:center;padding:4px 7px;background:#40b3de18;border-radius:5px;color:var(--cb-link-text,var(--cb-link));font:700 10px/1.2 var(--cb-font-bold);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.cb-official-store-link>svg{flex:0 0 16px;width:16px;height:16px;margin-left:auto;color:var(--cb-link-text,var(--cb-link));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-official-store-link:focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
@media(max-width:360px){#marketplace-menu .cb-official-store-link{gap:8px;padding:10px}#marketplace-menu .cb-official-store-link .cb-official-store-label{font-size:13px}}
/*
 * The official Cubebrush store (v3 plan U54): production/assets/css/official-store.css of the
 * 2026-09-13 handoff (086fa58), verbatim, which both builds link. Bundled unscoped with the
 * unit files (KTD4): every rule is under an `.official-*` class or `[data-official-store]`,
 * which V3::Store::PageComponent puts on the official store's root (the handoff puts it on
 * <body>). `.css.erb` only for the fingerprinted pattern (KTD4).
 *
 * After the verbatim block, the app's own rules, each saying why.
 */
/* Official store additions. Shared chrome, cards and type remain the storefront reference. */
[data-official-store] .official-identity{min-height:412px;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;text-align:center;background:#142533;color:#fff}
.official-cover,.official-cover-pattern{position:absolute;inset:0;pointer-events:none}
.official-cover{background:radial-gradient(ellipse at 15% 90%,#24505b 0,transparent 48%),radial-gradient(ellipse at 90% 0,#294767 0,transparent 54%),#142533}
.official-cover-pattern{background:url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/illustrations/affiliate-pattern-7322096da30ef0ed2d948b820c363f0708649373695a37801ce0faba77a1691c.svg") repeat;background-size:330px;opacity:.065}
.official-cover>img{position:absolute;width:320px;height:320px;left:4%;top:70px;opacity:.05;transform:rotate(-12deg)}
.official-cover:after{content:"";position:absolute;right:-50px;top:-170px;width:470px;height:470px;border:1px solid #6fd7c930;border-radius:80px;transform:rotate(28deg);box-shadow:0 0 0 65px #6fd7c908,0 0 0 130px #6fd7c908}
[data-official-store] .ms-identity-inner{position:relative;z-index:1;max-width:720px;padding:30px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto}
.official-avatar{width:80px;height:80px;display:grid;place-items:center;margin:0 0 2px}
.official-avatar img{display:block;object-fit:contain;width:62px;height:62px}
[data-official-store] .ms-name{font:700 30px/1.2 var(--cb-font-bold);margin:0;color:#fff}
.official-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid #6fd7c954;border-radius:20px;color:#a8ebe2;background:#6fd7c910;font:700 11px/1.2 var(--cb-font-bold);letter-spacing:.8px;text-transform:uppercase}
.official-badge svg{width:13px;height:13px}
.official-tagline{font:600 21px/1.4 var(--cb-font-semibold);margin:8px 0 0;color:#fff}
[data-official-store] .ms-bio{font:400 14px/1.6 var(--cb-font-regular);margin:0;color:#c5d2da;max-width:480px}
[data-official-store] .ms-actions{display:flex;justify-content:center;gap:12px;margin:14px 0 0}
[data-official-store] .ms-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;text-decoration:none;border:0;background:var(--cb-link);color:#fff;border-radius:999px;font:700 12px/1.2 var(--cb-font-bold);letter-spacing:1px;text-transform:uppercase;cursor:pointer}
[data-official-store] .official-contact{background:transparent;border:1px solid #ffffff55;color:#fff;box-shadow:none}
[data-official-store] .official-follow[aria-pressed=true]{background:#6fd7c926;border:1px solid #6fd7c9;color:#fff;box-shadow:none}
.official-toolbar{display:flex;align-items:center;justify-content:space-between;gap:22px}
.official-toolbar .ms-crumb-tab{text-transform:uppercase;letter-spacing:1px}
.official-tools{display:flex;align-items:center;gap:12px;min-width:0}
.official-search{position:relative;margin:0;display:flex;align-items:center;gap:10px}
.official-search>svg{width:16px;height:16px;flex-shrink:0;color:var(--cb-muted)}
.official-search input{min-width:0}
[data-official-store] .dh-ftoggle{white-space:nowrap}
[data-official-store] .ms-sort-menu{min-width:190px;border-radius:10px;left:auto;right:0;padding:6px;box-shadow:0 10px 28px #0003}
[data-official-store] .ms-sort-opt{border-radius:6px;padding:12px;text-transform:none;line-height:1.3}
.official-filter-count{font-size:11px;background:var(--cb-link);color:#fff;width:18px;height:18px;line-height:18px;border-radius:50%}
.official-filters{display:flex;align-items:center;gap:28px;padding:22px var(--gut,20px);border-top:1px solid var(--cb-border);background:var(--cb-card)}
.official-filters fieldset{display:flex;gap:22px;flex-wrap:wrap;border:0;padding:0;margin:0}
.official-filters legend{font:700 11px/1.3 var(--cb-font-bold);text-transform:uppercase;letter-spacing:1px;color:var(--cb-muted);margin-bottom:14px}
.official-filters label{display:inline-flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.official-filters input{accent-color:var(--cb-link);width:16px;height:16px;margin:0}
.official-reset,.official-text-link{padding:0;border:0;background:transparent;color:var(--cb-link-text,var(--cb-link));font:600 13px/1.5 var(--cb-font-semibold);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.official-reset{margin-top:26px}
.official-pane{padding:26px var(--gut,20px) 52px;min-height:360px}
.official-section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.official-section-head h2{font:700 16px/1.5 var(--cb-font-bold);color:var(--cb-text);margin:0;display:flex;gap:10px;align-items:center}
.official-section-head h2>span{font:400 13px/1.5 var(--cb-font-regular);color:var(--cb-muted)}
.official-catalog-note{margin:0;font:400 12px/1.5 var(--cb-font-regular);color:var(--cb-muted)}
.official-catalog-note>span{padding:0 5px}
.official-grid .official-product{min-width:0;display:block;margin:0;padding:0}
.official-product-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;border-radius:inherit;overflow:hidden}
.official-product .cb-pcard-body{flex:1}
.official-product h3.cb-pcard-title{margin:0 0 4px;font-weight:700}
.official-product .cb-pcard-byline{margin:0;line-height:1.6}
.official-product .cb-pcard-byline>span{color:var(--cb-link-text,var(--cb-link))}
.official-product .cb-pcard-footer{justify-content:space-between;gap:6px;min-height:42px}
.official-product-kind{font:400 11px/1.4 var(--cb-font-regular);color:var(--cb-muted)}
.official-preview-link{display:flex;align-items:center;gap:5px;font:700 12px/1.3 var(--cb-font-bold);color:var(--cb-link-text,var(--cb-link))}
.official-right-arrow{transform:rotate(-90deg);width:14px;height:14px}
.official-product a:hover .official-preview-link{text-decoration:underline;text-underline-offset:3px}
.official-empty,.official-posts-empty{padding:56px 20px 70px;text-align:center;margin:auto;max-width:560px}
.official-empty h2,.official-posts-empty h2{font:700 23px/1.4 var(--cb-font-bold);color:var(--cb-text);margin:14px 0 12px}
.official-empty p,.official-posts-empty p{font:400 15px/1.7 var(--cb-font-regular);color:var(--cb-muted);margin:0 0 24px}
.official-posts-empty img{display:block;object-fit:contain;margin:auto}
.official-text-link{display:inline-flex;align-items:center;gap:5px}
.official-results{position:absolute!important}
.official-dialog{padding:0;width:min(620px,calc(100% - 40px));max-height:calc(100dvh - 48px);margin:auto;border:1px solid var(--cb-border);border-radius:16px;box-shadow:0 20px 80px #0005;background:var(--cb-card);color:var(--cb-text);overflow:auto;overscroll-behavior:contain;opacity:0;transform:translateY(8px) scale(.985);transition:opacity 160ms ease,transform 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
.official-dialog[open]{opacity:1;transform:none}
.official-dialog::backdrop{background:#0e1320b8;opacity:0;transition:opacity 160ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
.official-dialog[open]::backdrop{opacity:1}
@starting-style{.official-dialog[open]{opacity:0;transform:translateY(8px) scale(.985)}.official-dialog[open]::backdrop{opacity:0}}
.official-dialog-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.official-close{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:36px;height:36px;background:#0e1320eb;color:#fff;border:1px solid #ffffff40;border-radius:50%;font:400 25px/1 Arial,sans-serif;cursor:pointer;z-index:1}
.official-dialog-body{padding:28px}
.official-dialog-body h2{font:700 25px/1.3 var(--cb-font-bold);margin:0 0 16px}
.official-dialog-body>p{font:400 15px/1.7 var(--cb-font-regular);color:var(--cb-muted);margin:0 0 20px}
.official-dialog-body .official-eyebrow{font:700 11px/1.4 var(--cb-font-bold);text-transform:uppercase;letter-spacing:1px;color:var(--cb-link-text,var(--cb-link));margin:0 0 8px}
.official-eyebrow>span[aria-hidden]{padding:0 6px;color:var(--cb-muted)}
.official-concept-note{border:1px solid var(--cb-border);background:var(--cb-bg);border-radius:10px;padding:15px 18px;margin:24px 0;font:400 13px/1.6 var(--cb-font-regular);color:var(--cb-muted)}
.official-concept-note strong{color:var(--cb-text);font-weight:700}
.official-concept-note p{margin:4px 0 0}
.official-share-dialog{max-width:470px}
.official-share-dialog .official-dialog-body{padding-top:32px}
.official-share-dialog h2{padding-right:22px;font-size:22px;margin-bottom:24px}
.official-share-dialog label{display:block}
.official-copy{width:100%;margin-top:16px}
.official-dialog-body .official-copy-status{margin:12px 0 0;font-size:13px}
#official-follow-dialog .official-text-link{margin-left:18px}
[data-official-store] [hidden]{display:none!important}
[data-official-store] :is(.official-product-link,button,input,a):focus-visible{outline:2px solid var(--cb-link);outline-offset:4px}
[data-official-store] .official-product-link:focus-visible{outline-offset:2px}
[data-official-store="mobile"] .official-identity{min-height:362px}
[data-official-store="mobile"] .ms-identity-inner{padding:24px 20px;gap:7px}
[data-official-store="mobile"] .official-avatar{width:68px;height:68px}
[data-official-store="mobile"] .official-avatar img{width:54px;height:54px}
[data-official-store="mobile"] .ms-name{font-size:26px}
[data-official-store="mobile"] .official-tagline{font-size:19px}
[data-official-store="mobile"] .official-cover>img{left:-120px;opacity:.04}
[data-official-store="mobile"] .official-toolbar{display:block;padding:0 16px}
[data-official-store="mobile"] .ms-crumb-tabs{display:flex;gap:24px;height:54px;border-bottom:1px solid var(--cb-border)}
[data-official-store="mobile"] .ms-crumb-tab{flex:none;position:relative;padding:0;border:0;background:transparent;color:var(--cb-muted);font:700 12px/1.3 var(--cb-font-bold);text-transform:uppercase;letter-spacing:1px;cursor:pointer}
[data-official-store="mobile"] .ms-crumb-tab.is-active{color:var(--cb-text);border-bottom:3px solid var(--cb-link)}
[data-official-store="mobile"] .official-tools{display:flex;flex-wrap:wrap;gap:12px;padding:14px 0}
[data-official-store="mobile"] .official-search{flex-basis:100%;height:40px;padding:0 13px;border:1px solid var(--cb-border);border-radius:22px;background:var(--cb-card)}
[data-official-store="mobile"] .official-search input{width:100%;background:transparent;border:0;outline:0;color:var(--cb-text);font:400 13px/1.4 var(--cb-font-regular)}
[data-official-store="mobile"] .ms-sort{font-size:11px;height:36px;border:1px solid var(--cb-border);border-radius:22px;padding:0 12px}
[data-official-store="mobile"] .ms-sort-menu{right:auto;left:0}
[data-official-store="mobile"] .dh-ftoggle{background:transparent;border:0;color:var(--cb-muted);font:700 11px/1 var(--cb-font-bold);letter-spacing:.7px;text-transform:uppercase;display:flex;align-items:center;gap:6px;min-height:36px;padding:0;cursor:pointer}
[data-official-store="mobile"] .official-share{margin-left:auto}
[data-official-store="mobile"] .official-filters{align-items:flex-start;flex-direction:column;gap:16px;padding:20px}
[data-official-store="mobile"] .official-filters fieldset{flex-direction:column;gap:16px}
[data-official-store="mobile"] .official-reset{margin-top:0}
[data-official-store="mobile"] .official-pane{padding:22px 14px 34px}
[data-official-store="mobile"] .official-section-head{gap:8px;align-items:flex-start;flex-direction:column;margin-bottom:18px}
[data-official-store="mobile"] .official-grid{display:grid;gap:20px;padding:0}
[data-official-store="mobile"] .official-product .cb-pcard-footer{padding:0 16px 14px}
[data-official-store="mobile"] .official-product .cb-pcard-body{padding:14px 16px}
@media(max-width:1050px){[data-official-store="desktop"] .official-toolbar{flex-wrap:wrap;gap:0;padding-bottom:12px}[data-official-store="desktop"] .official-tools{flex:1;justify-content:flex-end}[data-official-store="desktop"] .official-search{width:220px}}
@media(max-width:1050px){[data-official-store="desktop"] .official-tools .dh-ftoggle{width:38px;height:38px;padding:0;flex:0 0 38px;justify-content:center}[data-official-store="desktop"] .official-tools .dh-ftoggle>span{display:none}[data-official-store="desktop"] .official-tools .dh-ftoggle>svg{display:block;flex:0 0 16px;width:16px;height:16px;margin:0}}
@media(max-width:700px){[data-official-store="desktop"] .official-tools{flex-wrap:wrap;justify-content:flex-start;gap:10px}[data-official-store="desktop"] .official-search{flex:1;min-width:180px}.official-dialog-body{padding:22px}.official-filters{flex-wrap:wrap}.official-filters fieldset{gap:14px}.official-section-head{flex-wrap:wrap}.official-catalog-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.official-dialog,.official-dialog::backdrop{transition:none;transform:none}}

/* ── U54 additions ─────────────────────────────────────────────────────────────────────────
 * The tools belong to the Store tab: the handoff's official-store.js hides `.official-tools` on
 * Posts and Bundles. U16's panes controller switches the panes, so the same rule is written in
 * CSS, as the handoff's own store page does for its filter toggle (pages/store.css). */
[data-official-store]:has(.ms-pane[data-ms-pane="posts"]:not([hidden])) .official-tools,[data-official-store]:has(.ms-pane[data-ms-pane="bundles"]:not([hidden])) .official-tools{display:none}

/* ORDER-PROOF against pages/store.css, the regular store page's inline block (U16), which the
 * official page shares through `v3_page_css 'store'` but the handoff's official page never
 * loads: its `html .ms-pane{padding-top:24px;padding-bottom:40px}` (0,1,1) outranks the
 * handoff's `.official-pane` (0,1,0) and took 14px off the Posts pane. Desktop only: the mobile
 * build has no such rule, and `[data-official-store="mobile"] .official-pane` stands. */
[data-official-store="desktop"] .official-pane{padding:26px var(--gut,20px) 52px}

/* U9's host reset (u9_primitives.css) gives every `dialog[data-cb-overlay]` `inset:0` with
 * `height:auto`, for hosts whose child carries the box; the official dialogs are their own box,
 * so they stretched to the viewport's height. `fit-content` is what `margin:auto` centres, at the
 * handoff's height. U27 needed the same for its currency dialog (u27_currency.css). */
dialog.official-dialog[data-cb-overlay]{height:fit-content}
/* The owned product view, desktop (v3 plan U58; R17, R23, R24, KTD4, KD6).

   `production-desktop/assets/css/owned-product.css` @ handoff 086fa58, ported verbatim in its own
   order, with three kinds of change, each forced by how the app reaches the same page:

     - Every selector is written one `html` deeper. The handoff links owned-product.css LAST — after
       product.css, product-templates.css, listing.css, desktop-features.css, referral.css and
       feedback.css — so it wins every tie. v3 bundles `units/` before those shared files
       (v3_desktop.css, U6), so a tie would go to them instead; `.dpp-wrap .dpp-product-layout
       .dpp-side>.pp-header{padding:0 0 20px}` in product-templates.css took the Creator card's
       padding that way. One type selector is the smallest step there is: a rule of this file that
       ties a later file now wins, as it does in the handoff, and one that is a type selector short
       of a later rule now ties it and still loses, as it does in the handoff. This is U10's
       "ORDER-PROOF rule against a later shared file" (KTD4), applied to the whole file because the
       whole file is later than those in the handoff. `@keyframes` are left alone.
     - `body:is([data-pp-own="basic"],[data-pp-own="commercial"])` is `body.op-owned-product`.
       The v3 layouts expose `content_for :body_class` and no body data attribute (U14's same
       substitution for its `pp-own-*` gate); `V3::ProductPage::Viewer#body_classes` writes
       `op-owned-product` for an owner, exactly when the handoff script adds it.
     - The eight rules that start at `.op-about` are scoped to `.op-owned-course`. The handoff's
       script builds the `.op-about` wrapper only for an owner; here it is part of every course
       product's shared fragment (KTD19: the fragment cannot know who is looking), so without the
       scope an unowned course page would get the owned layout's border, margins and hidden gallery.
       Each of these rules already wins in the handoff, so the result on an owned page is the same.

   The course player's rules (`.op-screen` onwards) and the partner callout's (`.op-partner-*`) are
   part of the same file and ported with it: the learning area's frame uses the first, U59 fills the
   player and U60 the callout, and neither needs its own copy.

   After the port, under "Additions", the rules the app needs to reach the handoff's rendered page
   without moving nodes, each with its reason. This file is a `units/` file: bundled unscoped after
   the page files, so every selector carries the handoff's `op-` vocabulary (KTD4). */

/* Owned desktop products. Separate from the approved pre-purchase layout. */
html body.op-owned-product .dpp-wrap .pp-files{display:none!important}
html .op-shell{color:var(--cb-text);font-family:var(--cb-font-regular);margin:24px 0 36px}
html .op-shell *, html .op-downloads *{box-sizing:border-box}
html .op-shell button,html .op-downloads button{font:inherit;cursor:pointer}
html .op-shell [hidden],html .op-downloads [hidden]{display:none!important}
html .op-shell svg,html .op-downloads svg,html .op-download-main svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

html .op-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}
html .op-heading h1{font:700 clamp(24px,2.3vw,36px)/1.25 var(--cb-font-bold);margin:0 0 9px;overflow-wrap:anywhere}
html .op-by{font-size:14px;color:var(--cb-sec);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html .op-owned{display:inline-flex;align-items:center;gap:6px;color:var(--cb-success-text,var(--cb-commit));font-size:12px;font-weight:700}
html .op-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
html .op-button,html .op-download-main{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 18px;background:var(--cb-card);color:var(--cb-text);border:1px solid var(--cb-border);border-radius:999px;text-decoration:none;font-weight:700!important;font-size:13px!important}
html .op-button:hover{border-color:var(--cb-link)}
html .op-primary,html .op-download-main{background:var(--cb-commit);border-color:transparent;color:#fff!important}
html .op-primary:hover,html .op-download-main:hover{filter:brightness(1.05)}
html .op-shell button:disabled,html .op-downloads button:disabled{opacity:.5;cursor:not-allowed}
html .op-shell :focus-visible,html .op-downloads :focus-visible,html .op-download-main:focus-visible{outline:2px solid var(--cb-link);outline-offset:4px}
html .op-workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}
html .op-stage{min-width:0}
html .op-screen{aspect-ratio:16/9;position:relative;background:#0e1320;border-radius:16px;overflow:hidden;border:1px solid var(--cb-border)}
html .op-screen video{display:block;width:100%;height:100%;object-fit:contain;background:#0e1320}
html .op-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;border:0;background:linear-gradient(transparent,rgba(14,19,32,.42));color:#fff;font-weight:700!important;text-shadow:0 1px 4px #000}
html .op-play-disc{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--cb-link);box-shadow:0 6px 30px #0005}
html .op-play-disc svg{width:30px;height:30px;fill:currentColor;stroke:none;margin-left:3px}
html .op-loading{position:absolute;inset:0;background:#0e1320d9;color:#fff;display:flex;gap:12px;align-items:center;justify-content:center}
html .op-spinner{display:inline-block;width:20px;height:20px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:op-spin .75s linear infinite;flex:none}
@keyframes op-spin{to{transform:rotate(360deg)}}
html .op-player-error{position:absolute;inset:0;background:#0e1320ed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;color:#fff;text-align:center}
html .op-player-error p{max-width:440px;line-height:1.6;margin:0;color:#c6ccd8}
html .op-current{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:20px}
html .op-eyebrow{color:var(--cb-sec);font-size:12px;line-height:1.5;margin:0 0 5px}
html .op-current h2{font:700 20px/1.35 var(--cb-font-bold);margin:0}
html .op-lesson-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
html .op-lesson-tools .op-button{white-space:nowrap}
html .op-rail{border:1px solid var(--cb-border);border-radius:16px;background:var(--cb-card);overflow:hidden;min-width:0}
html .op-rail-head{padding:20px;border-bottom:1px solid var(--cb-border)}
html .op-rail-head h2{font:700 18px/1.3 var(--cb-font-bold);margin:0 0 8px}
html .op-progress-copy{font-size:12px;color:var(--cb-sec);margin-bottom:12px}
html .op-progress{width:100%;height:4px;display:block;accent-color:var(--cb-commit);border:0;border-radius:4px;overflow:hidden;background:var(--cb-border)}
html .op-progress::-webkit-progress-bar{background:var(--cb-border)}html .op-progress::-webkit-progress-value{background:var(--cb-commit)}
html .op-search{display:block;width:100%;min-height:42px;background:var(--cb-bg);border:1px solid var(--cb-border);border-radius:9px;padding:10px 12px;font:400 13px/1.4 var(--cb-font-regular);color:var(--cb-text)}
html .op-search-label{display:block;font-size:12px;color:var(--cb-sec);margin:18px 0 6px}
html .op-lessons{max-height:560px;max-height:min(560px,65vh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--cb-border) transparent}
html .op-chapter{border-bottom:1px solid var(--cb-border)}html .op-chapter:last-child{border:0}
html .op-chapter summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;padding:16px 18px;font-size:13px;font-weight:700;line-height:1.4}
html .op-chapter summary::-webkit-details-marker{display:none}
html .op-chapter summary svg{transition:transform .15s}
html .op-chapter[open]>summary svg{transform:rotate(180deg)}
html .op-lesson{display:grid;grid-template-columns:22px minmax(0,1fr) auto;width:100%;align-items:center;gap:10px;padding:14px 18px!important;background:transparent;border:0;border-left:3px solid transparent;color:var(--cb-sec);text-align:left;font-size:13px!important;line-height:1.45!important}
html .op-lesson:hover{background:var(--cb-bg)}
html .op-lesson[aria-current="true"]{border-left-color:var(--cb-link);background:rgba(64,179,222,.09);color:var(--cb-text)}
html .op-lesson.is-complete .op-lesson-mark{color:var(--cb-commit)}
html .op-lesson-time{font-size:11px;color:var(--cb-sec);white-space:nowrap}
html .op-lesson-body{min-width:0}html .op-lesson-saved{display:block;color:var(--cb-link-text,var(--cb-link));font-size:11px;margin-top:5px}html .op-lesson-progress{display:block;height:3px;border-radius:3px;background:var(--cb-border);margin-top:7px;overflow:hidden}html .op-lesson-progress>span{display:block;height:100%;background:var(--cb-link)}html .op-lesson.is-complete .op-lesson-saved{color:var(--cb-sec)}html .op-lesson.is-complete .op-lesson-progress>span{background:var(--cb-commit)}html .op-restart{margin-top:12px}
html .op-rail-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--cb-border);padding:16px 18px;font-size:13px;color:var(--cb-sec)}
html .op-link{border:0;background:transparent;color:var(--cb-link-text,var(--cb-link));padding:4px 0;font-weight:700!important;font-size:13px!important}
html .op-empty{padding:20px;color:var(--cb-sec);font-size:14px;line-height:1.6}
html .op-feedback{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:16px 18px;margin-top:22px;background:var(--cb-card);border:1px solid var(--cb-border);border-radius:14px}
html .op-feedback .pp-rate{flex:1 1 270px;display:flex;align-items:center;gap:10px;margin:0;padding:0!important;border:0!important;background:transparent!important;min-width:0}
html .op-feedback .pp-rate-label{flex:none;font-size:13px;white-space:nowrap}
html .op-feedback .pp-rate-stars{display:flex;gap:2px;margin-left:0;flex:none}
html .op-feedback .pp-rate-star{font-size:25px;line-height:1;min-width:30px;min-height:36px;padding:4px 2px}
html .op-feedback .pp-rate-saved{display:none!important}
html .op-feedback-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
html .op-feedback .op-contact{font-size:12px!important;min-height:40px;padding:8px 14px;white-space:nowrap}
html .op-feedback .op-link{white-space:nowrap}
html .op-owned-course .op-about{margin:30px 0;padding-top:28px;border-top:1px solid var(--cb-border)}
html .op-owned-course .op-about [role="tabpanel"]{scroll-margin-top:calc(var(--cb-chrome-h,76px) + 24px)}
html .op-owned-course .op-about .dpp-product-layout{margin-top:0!important}
html .op-owned-course .dpp-wrap .op-about .dpp-cols.dpp-product-layout{grid-template-areas:"details purchase";grid-template-rows:auto}
html .op-owned-course .op-about .pp-gallery{display:none!important}
html .op-owned-course .op-about .pp-title{font-size:22px}
html .op-owned-course .op-about .pp-tab[data-tab="course"],html .op-owned-course .op-about #pp-tab-course{display:none!important}
html .op-owned-course .pp-stickybar{display:none!important}
html .op-download-main{width:100%;margin-bottom:12px;min-height:54px;font-family:var(--cb-font-bold);cursor:pointer;letter-spacing:.8px;text-transform:uppercase}
html .op-download-caption{font-size:12px;color:var(--cb-sec);margin:0 0 20px;text-align:center}
html .op-downloads{width:min(820px,calc(100vw - 48px));max-height:calc(100dvh - 64px);padding:0;border:1px solid var(--cb-border);border-radius:18px;background:var(--cb-card);color:var(--cb-text);box-shadow:0 24px 90px #0005;font-family:var(--cb-font-regular)}
html .op-downloads::backdrop{background:#0e1320b3}
html .op-downloads[open]{display:flex;flex-direction:column;animation:op-enter .16s ease-out}
@keyframes op-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
html .op-dl-head{padding:24px;border-bottom:1px solid var(--cb-border);flex:none}
html .op-dl-title{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
html .op-dl-title h2{font:700 24px/1.2 var(--cb-font-bold);margin:0 0 8px}
html .op-dl-title p{font-size:13px;line-height:1.5;color:var(--cb-sec);margin:0 0 18px}
html .op-close{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--cb-border);border-radius:50%;background:transparent;color:var(--cb-sec);flex:none}
html .op-dl-scroll{overflow:auto;overscroll-behavior:contain;padding:0 24px;min-height:100px}
html .op-file{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--cb-border)}
html .op-file-icon{width:40px;height:44px;display:grid;place-items:center;font-size:10px;font-weight:800;background:rgba(64,179,222,.12);color:var(--cb-link-text,var(--cb-link));border-radius:7px;flex:none}
html .op-file-icon:has(svg){background:transparent}html .op-file-icon svg{width:36px;height:36px;stroke:none;fill:initial}
html .op-file-info{flex:1;min-width:0}html .op-file-name{font-size:14px;overflow-wrap:anywhere;line-height:1.5}html .op-file-meta{font-size:12px;color:var(--cb-sec);margin-top:3px}
/* The month's allowance under the size (tester-r's buyer-account round, 2026-10-13). */
.op-file-allowance{font-size:12px;color:var(--cb-sec);margin-top:2px}
html .op-file .op-button{padding:9px 12px;min-width:44px}
html .op-dl-foot{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid var(--cb-border);font-size:12px;color:var(--cb-sec);flex:none}
html .op-cloud-actions{padding:0 24px 20px;flex:none;color:var(--cb-sec);font-size:12px}
html .op-cloud-actions>span{display:block;margin-bottom:10px}html .op-cloud-buttons{display:flex;gap:10px;flex-wrap:wrap}
html .op-cloud-actions svg{width:20px;height:20px}
html .op-cloud-actions button[data-cloud-job]{cursor:default}
html .op-large-product .op-dl-foot{padding-bottom:12px}
html .op-large-notice{padding:14px 16px;margin-bottom:14px;border:1px solid var(--cb-border);border-radius:10px;background:var(--cb-bg);line-height:1.6}
html .op-large-notice strong{font-size:14px;color:var(--cb-text)}html .op-large-notice p{font-size:13px;margin:5px 0 0}html .op-large-notice .op-cloud-space{font-size:12px;margin-top:8px}
@media(max-width:800px){html .op-large-product .op-cloud-actions{padding:0 18px 18px}html .op-large-notice{padding:12px 14px}}
html .op-status:empty{display:none}html .op-status{margin:14px 0 0;padding:12px 14px;border:1px solid var(--cb-border);border-radius:9px;font-size:13px;line-height:1.5;display:flex;gap:10px;align-items:center;background:var(--cb-bg)}
html .op-status[data-kind="error"]{border-color:var(--cb-error);color:var(--cb-text)}
@media(min-width:1800px){html .op-workspace{grid-template-columns:minmax(0,1fr) 390px}}
@media(max-width:1050px){html .op-workspace{grid-template-columns:minmax(0,1fr) 300px;gap:16px}html .op-current{display:block}html .op-current>.op-button{margin-top:14px}html .op-lesson-tools{align-items:flex-start}html .op-lesson-tools .op-button{padding:9px 12px}}
@media(max-width:800px){html .op-workspace{grid-template-columns:1fr}html .op-heading{align-items:flex-start;flex-direction:column;gap:16px}html .op-lessons{max-height:380px}html .op-heading h1{font-size:26px}html .op-current{display:flex}html .op-downloads{width:calc(100vw - 24px)}html .op-dl-head{padding:18px}html .op-dl-scroll{padding:0 18px}html .op-file .op-dl-label{display:none}html .op-dl-foot{flex-wrap:wrap}html .op-lesson-tools{gap:15px}}
@media(max-width:900px){html .op-owned-course .dpp-wrap .op-about .dpp-cols.dpp-product-layout{grid-template-areas:"details" "purchase"}html .op-feedback .pp-rate{flex-basis:100%}html .op-feedback-links{width:100%}}
@media(prefers-reduced-motion:reduce){html .op-downloads[open]{animation:none}html .op-chapter summary svg{transition:none}html .op-spinner{animation-duration:1.5s}}

/* Owned layout refinement: shared column alignment and a compact secondary area. */
html .op-owned-product .dpp-wrap{--op-rail-width:350px;--op-col-gap:24px}
html .op-owned-course .op-workspace{grid-template-columns:minmax(0,1fr) var(--op-rail-width);gap:var(--op-col-gap)}
html .op-owned-course .dpp-wrap .op-about .dpp-cols.dpp-product-layout{grid-template-columns:minmax(0,1fr) var(--op-rail-width);column-gap:var(--op-col-gap)}
html .op-owned-course .op-about .dpp-side{position:static;display:flex;flex-direction:column;gap:18px}
html .op-owned-course .op-about .dpp-side>.pp-header,html .op-owned-course .op-about .pp-buy{padding:20px;background:var(--cb-card);border:1px solid var(--cb-border);border-radius:14px}
html .op-owned-course .op-about .op-panel-heading{font:700 16px/1.4 var(--cb-font-bold);margin:0 0 16px;color:var(--cb-text)}
html .op-owned-course .op-about .pp-header>.pp-title,html .op-owned-course .op-about .pp-header>.pp-rating-row,html .op-owned-course .op-about .pp-header>.pp-bottom-row,
html .op-owned-course .op-about .op-download-main,html .op-owned-course .op-about .op-download-caption,html .op-owned-product .pp-tip-download{display:none!important}
html .op-owned-course .op-about .dpp-side #dpt-seller{margin:0}
html .op-owned-course .op-about .pp-owned-card{background:transparent;border:0;padding:0;align-items:flex-start;margin-bottom:18px}
html .op-owned-course .op-about .pp-owned-card-title{font-size:14px;line-height:1.4}
html .op-owned-course .op-about .pp-owned-card-sub{font-size:13px;line-height:1.6;color:var(--cb-sec);margin-top:5px}
html .op-owned-course .op-about .pp-upgrade-cta,html .op-owned-course .op-about .pp-gift-cta{height:auto;min-height:44px;padding:11px 14px;font-size:13px;line-height:1.4;letter-spacing:.2px;text-transform:none;text-align:center}
html .op-owned-course .op-about .pp-upgrade-cta{box-shadow:none}
html .op-owned-course .op-about .pp-desc-body{max-height:none!important;overflow:visible;mask-image:none;-webkit-mask-image:none}
html .op-owned-course .op-about .pp-desc-toggle{display:none!important}
html .op-tip-disclosure{margin-top:20px;border:1px solid var(--cb-border);border-radius:12px;background:var(--cb-card);padding:0 16px}
html .op-tip-disclosure>summary{display:flex;align-items:center;gap:10px;min-height:52px;list-style:none;cursor:pointer;font:700 13px/1.4 var(--cb-font-bold);color:var(--cb-text)}
html .op-tip-disclosure>summary::-webkit-details-marker{display:none}
html .op-tip-disclosure>summary>span{flex:1}
html .op-tip-disclosure>summary>svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .op-tip-disclosure>summary>svg:last-child{width:17px;height:17px;color:var(--cb-sec);transition:transform .15s}
html .op-tip-disclosure[open]>summary>svg:last-child{transform:rotate(180deg)}
html .op-owned-product .op-tip-disclosure .pp-tip{margin:0;padding:0 0 16px;background:transparent;border:0;border-radius:0}
html .op-tip-disclosure .pp-tip-head{display:none}
html .op-tip-disclosure .pp-tip-sub{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--cb-sec)}
html .op-owned-course .op-about .pp-header>.op-tip-disclosure{border:0;border-top:1px solid var(--cb-border);border-radius:0;margin:18px 0 0;padding:0;background:transparent}
html .op-owned-course .op-about .pp-header>.op-tip-disclosure>summary{min-height:48px;padding-top:8px}
html .op-owned-course .op-about .pp-header>.op-tip-disclosure .pp-tip{padding-bottom:0}
html .op-tip-disclosure>summary:focus-visible,html .op-utilities :focus-visible{outline:2px solid var(--cb-link);outline-offset:4px}
html .op-utilities{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;padding-top:22px;margin-top:30px;border-top:1px solid var(--cb-border);scroll-margin-top:200px}
html .op-owned-product .dpp-wrap .op-utilities .pp-social{display:flex;align-items:center;gap:10px;flex:1 1 540px;padding:0;margin:0;min-width:0}
html .op-utilities .pp-social-row{margin:0;flex:none}
html .op-owned-product .dpp-wrap .op-utilities .pp-social-btn{flex:none;height:40px;min-width:44px;padding:0 12px;border:1px solid var(--cb-border);border-radius:8px;background:var(--cb-card);color:var(--cb-sec);font-size:12px;letter-spacing:0;white-space:nowrap}
html .op-utilities .pp-social-btn .pp-social-glyph{flex:0 0 20px;width:20px;height:20px}
html .op-owned-product .dpp-wrap .op-utilities .pp-social-btn:hover{color:var(--cb-text);border-color:var(--cb-link);filter:none}
html .op-utilities .pp-copylink-host,html .op-utilities .pp-social>.pp-copylink{flex:1;min-width:0}
html .op-utilities .pp-copylink{height:40px}
html .op-utilities .ps-report-actions,html .op-utilities .dpp-report{margin:0;padding:0;gap:18px;flex:none}
html .op-utilities .ps-report-actions button{font-weight:600}
html .op-partner-promo{flex:1 0 100%;display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:16px 24px;padding:22px 24px;border:1px solid var(--cb-border);border-radius:14px;background:var(--cb-card)}
html .op-partner-art{display:block;width:104px;height:104px;object-fit:contain;pointer-events:none}
html .op-partner-copy{flex:1 1 400px;min-width:0}
html .op-partner-eyebrow{margin:0 0 7px!important;font:700 11px/1.4 var(--cb-font-bold);letter-spacing:1px;text-transform:uppercase;color:var(--cb-link)!important}
html .op-partner-promo h2{margin:0 0 8px;font:700 21px/1.4 var(--cb-font-bold);color:var(--cb-text)}
html .op-partner-promo h2 span{color:var(--cb-link)}
html .op-partner-promo p{margin:0;font-size:13px;line-height:1.6;color:var(--cb-sec)}
html .op-partner-promo .op-partner-note{margin-top:4px}
html .op-partner-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex:none;padding:12px 22px;border:0;border-radius:24px;background:var(--cb-link);color:#fff!important;font:700 13px/1.5 var(--cb-font-bold);text-decoration:none;cursor:pointer}
html .op-partner-cta:hover{filter:brightness(1.06)}
html .op-partner-cta:disabled{opacity:.55;cursor:default}
html .op-share-status{grid-column:2/-1;overflow-wrap:anywhere}
html .op-share-status:empty{display:none}
@media(max-width:1050px){html .op-partner-promo{grid-template-columns:88px minmax(0,1fr)}html .op-partner-art{width:88px;height:88px;grid-row:1/3}html .op-partner-cta{grid-column:2;justify-self:start}}
@media(max-width:650px){html .op-partner-promo{padding:20px;grid-template-columns:68px minmax(0,1fr);column-gap:16px}html .op-partner-art{width:68px;height:68px;grid-row:1;align-self:start;margin-top:16px}html .op-partner-cta{grid-column:1/-1;width:100%}html .op-partner-promo h2{font-size:19px}html .op-share-status{grid-column:1/-1}}
@media(min-width:1800px){html .op-owned-product .dpp-wrap{--op-rail-width:390px}}
@media(max-width:1050px){html .op-owned-product .dpp-wrap{--op-rail-width:300px;--op-col-gap:16px}}
@media(max-width:900px){
 html .op-owned-course .op-workspace,html .op-owned-course .dpp-wrap .op-about .dpp-cols.dpp-product-layout{grid-template-columns:minmax(0,1fr)}
 html .op-owned-course .op-about .dpp-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;margin-top:24px}
 html .op-owned-course .op-lessons{max-height:380px}
}
@media(max-width:650px){
 html .op-owned-course .op-about .dpp-side{grid-template-columns:minmax(0,1fr)}
 html .op-owned-product .dpp-wrap .op-utilities .pp-social{flex-wrap:wrap}
 html .op-utilities .pp-copylink-host,html .op-utilities .pp-social>.pp-copylink{flex-basis:100%}
 html .op-utilities .ps-report-actions{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){html .op-tip-disclosure>summary>svg:last-child{transition:none}}

/* ─── Additions (v3 plan U58) ──────────────────────────────────────────────────────────────────

   The handoff reaches its owned layout by moving nodes after load (`owned-product.js`). The app
   renders the owned markup on the server, so where the script moves an element these rules place it.

   Purchased products no longer show the wishlist label — `production/assets/css/product-safety.css`
   lines 2-3 (the owner's 13 September correction), the only two rules of that file that are this
   unit's; the rest is U60's. Same body-class substitution as above. */
html body.op-owned-product .pp-wishlist{display:none!important}
html body.op-owned-product .pp-bottom-row:has(>.pp-wishlist:only-child){display:none!important}

/* The owned course's side column is "Your license" above "Creator": the script moves `.pp-buy`
   before `.pp-header` (`side.insertBefore(buy, creator)`). The side column is already a flex column
   here (and a grid at 900px), so `order` places it without a second copy of the buy box, which
   carries the page's one per-viewer frame. */
html .op-owned-course .op-about .dpp-side>.pp-buy{order:-1}

/* The script moves the seller bar's Message pill out of the Creator card into the learning area's
   `.op-feedback` row, where it becomes "Contact seller". The learning area renders its own labeled
   button (it arrives in the owned frame), so the pill the fragment still carries is hidden here. */
html .op-owned-course .op-about .dpp-seller-actions .dpp-pill.is-ghost{display:none!important}

/* The learning area's placeholder, while the owned frame is on its way: the same shell with the
   player's 16:9 box and the rail's column, so the page below does not jump when it arrives. It is
   inert and hidden from assistive technology; this only keeps its heading row the height the real
   one will be. */
html .op-shell[data-op-placeholder] .op-heading{min-height:74px}
html .op-shell[data-op-placeholder] .op-rail{min-height:320px}
/* A download refusal in the status line (QA item 76): the code's words, then its action (Reload,
   Sign in) at the end of the line; and, on its own line inside the lesson actions, why Download
   lesson is off for a lesson this licence plays but no download path serves. */
html .op-status-text{flex:1 1 auto;min-width:0}
html .op-status-action{flex:none;margin-left:auto;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;background:var(--cb-card);color:var(--cb-text);border:1px solid var(--cb-border);border-radius:999px;text-decoration:none;font-weight:700!important;font-size:12px!important;cursor:pointer;white-space:nowrap}
html .op-status-action:hover{border-color:var(--cb-link)}
html .op-download-note{flex-basis:100%;margin:0;font-size:12px;line-height:1.5;color:var(--cb-muted);text-align:right}
/* The course player, desktop (v3 plan U59; R17, KTD4).

   The learning area's own rules — `.op-screen`, `.op-start`, `.op-loading`, `.op-player-error`, the
   eyebrow and title, the action row and its wrap at 1050 and 800px, the rail, its chapters, lessons,
   saved lines and slim bars — are the handoff's `owned-product.css`, which U58 ported whole
   (`u58_owned_product.css`). This file only seats Plyr inside the design's screen: the handoff's
   reference uses the browser's native bar "as a reference fallback, not an instruction to remove
   Plyr" (handoff/OWNED_PRODUCTS.md, "Retain Plyr"), and asks for Cubebrush styling, white labels on
   coloured controls, visible focus and readable captions.

   Plyr's own stylesheet is loaded by the player (`plyr3.7.8.css`, the legacy page's), so every rule
   here is scoped to `.op-screen` and carries one `html` more, the shape U58's port uses, to win over
   it and over the shared files bundled after `units/`. */

/* The player fills the 16:9 screen; the video is letterboxed inside it on the screen's own colour. */
html .op-screen .plyr{position:absolute;inset:0;height:100%;background:#0e1320;border-radius:0;
  --plyr-color-main:var(--cb-link);
  --plyr-video-background:#0e1320;
  --plyr-video-control-color:#fff;
  --plyr-video-control-color-hover:#fff;
  --plyr-font-family:var(--cb-font-regular);
  --plyr-captions-background:rgba(14,19,32,.86);
  --plyr-captions-text-color:#fff;
  --plyr-menu-background:var(--cb-card);
  --plyr-menu-color:var(--cb-text);
  --plyr-tooltip-background:var(--cb-card);
  --plyr-tooltip-color:var(--cb-text)}
html .op-screen .plyr__video-wrapper{height:100%;background:#0e1320}
html .op-screen .plyr video{width:100%;height:100%;object-fit:contain}
html .op-screen .plyr__poster{background-size:contain;background-color:#0e1320}

/* Visible focus on every Plyr control, the learning area's own outline (`.op-shell :focus-visible`). */
html .op-screen .plyr button:focus-visible,html .op-screen .plyr input:focus-visible{outline:2px solid var(--cb-link);outline-offset:2px}

/* The design's start button, loading and failure layers sit over the player, as they sit over the
   reference's `<video>`. */
html .op-screen>.op-start,html .op-screen>.op-loading,html .op-screen>.op-player-error{z-index:2}

/* Captions a little larger than Plyr's default on a 16:9 stage this size. */
html .op-screen .plyr__captions{font-size:clamp(15px,1.6vw,22px)}
/* Product reports, Mark as NSFW and the NSFW categories, desktop (v3 plan U60; R16, R17, R5, KTD4, KD6).

   `production/assets/css/product-safety.css` @ handoff 086fa58, the shared file both builds load,
   ported verbatim in its own order except for what the app does not build:

     - Every selector is written one `html` deeper, U58's rule for a `units/` file: the handoff links
       product-safety.css LAST on the product page and the marketplace (after product.css, listing.css,
       desktop-features.css, referral.css, feedback.css and owned-product.css), so it wins every tie;
       v3 bundles `units/` before those shared files (v3_desktop.css), so a tie would go to them
       instead. One type selector is the smallest step that keeps the handoff's order both ways.
       `@keyframes` are left alone.
     - Not ported, each by a ruling or a unit that already owns it:
         `body:is([data-pp-own=…]) .pp-wishlist` (lines 2-3): U58's owned layout hides the label.
         `html[data-cb-adult-locked] …`, `.ps-page-gate`: the whole-page lock. Plan U60 approach 5
           (ruling (2), 2026-09-23) keeps the product page as it is and gates the gallery's Show
           instead; see docs/v3/decisions/pending/U60-adult-page-gate.md.
         `[data-nsfw="true"] … img{filter:blur(24px)}`, `.ps-adult-thumb`, `.ps-cover-gate`,
           `.ps-adult-hidden`: the blur is unchanged (plan U60 approach 4; rulings 2 and follow-up 3):
           U9's card gate and U14's gallery gate stay, lifted client-side for an opted-in account.
           Mature mode `hide` is not adopted (ruling 1), so nothing is hidden from a listing.
         `.ps-nsfw-empty`: the mobile prototype's own empty line for its client-side filter; the app's
           NSFW feed is a server query and its empty state is U13's.

   Under "Additions", the one rule set the app needs to reach the rendered page without moving nodes. */

html .ps-report-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0}
html .ps-report-actions button{font:700 12px/1.5 var(--cb-font-regular);color:var(--cb-sec);border:0;background:none;cursor:pointer;padding:8px 0;display:inline-flex;gap:7px;align-items:center}
html .ps-report-actions button:hover{color:var(--cb-link)}
html .ps-report-actions button:disabled{cursor:default;color:var(--cb-sec);opacity:.7}
html .ps-report-actions svg,html .ps-dialog svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
html .ps-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:540px;max-height:calc(100dvh - 40px);padding:28px;border:1px solid var(--cb-border-hard);border-radius:18px;background:var(--cb-card);color:var(--cb-text);box-shadow:0 24px 90px #0005;overflow:auto;font:400 14px/1.6 var(--cb-font-regular)}
html .ps-dialog *{box-sizing:border-box}
html .ps-dialog::backdrop{background:#090e1bb3}
html .ps-dialog[open]{animation:ps-enter .16s ease-out}
html .ps-dialog h2{font:700 24px/1.3 var(--cb-font-bold);margin:0 36px 8px 0}
html .ps-dialog p{margin:0 0 18px;color:var(--cb-sec)}
html .ps-dialog .ps-product-name{font-size:13px;overflow-wrap:anywhere;padding-bottom:16px;border-bottom:1px solid var(--cb-border)}
html .ps-dialog .ps-close{position:absolute;right:16px;top:16px;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--cb-sec);cursor:pointer}
html .ps-dialog .ps-close:hover{background:var(--cb-bg);color:var(--cb-text)}
html .ps-dialog label,html .ps-dialog .ps-field-label{display:block;font-weight:700;margin:18px 0 8px}
html .ps-dialog textarea{width:100%;min-height:150px;resize:vertical;border:1px solid var(--cb-border-hard);border-radius:10px;background:var(--cb-bg);color:var(--cb-text);font:inherit;padding:13px 15px}
html .ps-field-meta{display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--cb-sec);margin-top:6px}
html .ps-field-meta span:last-child{white-space:nowrap}
html .ps-dialog :focus-visible,html .ps-report-actions :focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
html .ps-dialog [aria-invalid="true"]{border-color:var(--cb-error)}
html .ps-select{position:relative}
html .ps-select-trigger{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--cb-border-hard);border-radius:10px;background:var(--cb-bg);color:var(--cb-text);padding:12px 15px;font:inherit;text-align:left;cursor:pointer}
html .ps-select-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
html .ps-options{position:absolute;z-index:2;left:0;right:0;top:calc(100% + 6px);padding:6px;background:var(--cb-card);border:1px solid var(--cb-border-hard);border-radius:12px;box-shadow:0 12px 30px #0003}
html .ps-options button{display:block;width:100%;padding:11px 12px;border:0;border-radius:7px;background:none;color:var(--cb-text);text-align:left;font:inherit;cursor:pointer}
html .ps-options button:hover,html .ps-options button[aria-selected="true"]{background:var(--cb-bg);color:var(--cb-link)}
html .ps-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:24px}
html .ps-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid var(--cb-border-hard);border-radius:999px;background:transparent;color:var(--cb-text);padding:11px 22px;font:700 13px/1.4 var(--cb-font-regular);text-decoration:none;cursor:pointer;text-align:center}
html .ps-button.ps-primary{background:var(--cb-commit);border-color:transparent;color:#fff}
html .ps-button.ps-auth{background:var(--cb-link);border-color:transparent;color:#fff}
html .ps-button:disabled{opacity:.6;cursor:wait}
html .ps-status{border-radius:10px;padding:12px 14px;margin-top:16px;background:var(--cb-bg);color:var(--cb-text);display:flex;align-items:center;gap:10px}
html .ps-status:empty{display:none}
html .ps-status[data-kind="error"]{border:1px solid var(--cb-error)}
html .ps-spinner{width:18px;height:18px;border:2px solid var(--cb-border-hard);border-top-color:var(--cb-link);border-radius:50%;animation:ps-spin .8s linear infinite;flex:none}
html .ps-age{display:inline-flex;align-items:center;justify-content:center;font:800 24px/1 var(--cb-font-bold);margin-bottom:18px;border:1px solid var(--cb-border-hard);border-radius:14px;width:64px;height:60px}
html .ps-nsfw-categories{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
html .ps-category{min-height:40px;padding:9px 15px;border:1px solid var(--cb-border-hard);border-radius:999px;background:var(--cb-card);color:var(--cb-sec);font:700 13px/1.4 var(--cb-font-regular);cursor:pointer}
html .ps-category[aria-pressed="true"]{border-color:var(--cb-link);color:var(--cb-link);background:color-mix(in srgb,var(--cb-link) 10%,var(--cb-card))}
html .ps-category:focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
@keyframes ps-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes ps-spin{to{transform:rotate(360deg)}}
@media(max-width:600px){html .ps-dialog{padding:24px 20px}html .ps-dialog textarea{font-size:16px}html .ps-actions .ps-button{flex:1}html .ps-report-actions{justify-content:flex-start;gap:22px;margin:18px 16px}}
@media(prefers-reduced-motion:reduce){html .ps-dialog[open]{animation:none}html .ps-spinner{animation-duration:1.6s}}

/* ── Additions ─────────────────────────────────────────────────────────────────────────────────── */

/* The NSFW categories sit between the result count and the grid (`#mp-grid.before(categories)` in
   product-safety.js, where `.dmp-meta` is the grid's previous sibling). In the app both of those are
   inside the results frame, which U13's grid renders and every round trip replaces, and the chips are
   not: they are the page's, drawn beside the frame (`V3::Safety::NsfwCategoriesComponent`). A frame
   that has loaded is `display: contents` (v3/base/utilities.css), so its children lay out in
   `.dmp-results` itself; while the chips show, that section becomes a column and the count and the
   failed-load host are ordered ahead of them, which is the handoff's order with no node moved. Flex
   items do not collapse margins, and none of the four has a margin on the side that meets another, so
   the spacing is the block layout's (`.dmp-meta` 16px under, the chips 24px under). */
html .dmp-results:has(>.ps-nsfw-categories:not([hidden])){display:flex;flex-direction:column}
html .dmp-results:has(>.ps-nsfw-categories:not([hidden]))>turbo-frame>*{order:2}
html .dmp-results:has(>.ps-nsfw-categories:not([hidden]))>.ps-nsfw-categories{order:1}
html .dmp-results:has(>.ps-nsfw-categories:not([hidden]))>turbo-frame>:is(#mp-results-alert,.dmp-meta){order:0}
/* A product's visibility for staff (tester-r's seller/admin round, item A): its state, then Make visible. */
html .ps-report-visibility{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
html .ps-report-visibility-state{font:400 12px/1.5 var(--cb-font-regular);color:var(--cb-muted)}
/* v3 UI primitives (v3 plan U9). Implementation rules the plan's own technical
   decisions need, not handoff pixels: the same file sits in both builds.
   1. Native <dialog> hosts (KTD7 approach 1): the overlay host is the handoff's own
      host element rendered as a <dialog>, so the browser's dialog defaults (a bordered,
      padded, white, shrink-wrapped box and a tinted ::backdrop) are neutralised at
      zero specificity; every handoff host class still wins.
   2. (moved) The loading indicator `.feedback-spinner` lived here until U10 landed;
      pages/u10_feedback.css carries it now, in the same tree, so nothing else changed.
   3. The product card adult gate, pending decision U9-product-card-adult-gate:
      the plan prescribes the gate markup on every adult card; the handoff has no
      such state, so these rules are the proposal's "after" and go with its answer. */
:where(dialog[data-cb-overlay]){position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible}
:where(dialog[data-cb-overlay])::backdrop{background:transparent}
:where(dialog[data-cb-overlay]:not([open])){display:block}
:where(dialog[data-cb-overlay])[hidden]{display:none!important}
:where(dialog.cb-lightbox){position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;color:inherit;overflow:visible}
:where(dialog.cb-lightbox)::backdrop{background:transparent}

/* .feedback-spinner and @keyframes feedback-spin moved to pages/u10_feedback.css (the feedback system owns them; U9 carried a copy until U10 landed). */

.cb-pcard-thumb:has(.cb-pcard-adult:not([hidden])) img{filter:blur(18px);transform:scale(1.08)}
.cb-pcard-adult{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(20,23,33,.28);color:#fff;text-align:center}
.cb-pcard-adult-label{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;background:#e74c3c;color:#fff;font:800 11px/1 var(--cb-font-semibold);letter-spacing:.6px}
.cb-pcard-adult-reveal{min-height:32px;padding:0 14px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(20,23,33,.55);color:#fff;font:600 12px/1 var(--cb-font-semibold);cursor:pointer}
.cb-pcard-adult-reveal:hover{background:rgba(20,23,33,.8)}
.cb-pcard-adult-reveal:focus-visible{outline:2px solid var(--cb-link);outline-offset:2px}

/* Lightbox Previous / Next (v3 plan U9's primitive, added at U14).

   A departure from the handoff, which draws the lightbox as a stage, a caption and Close only:
   Michael asked on 2026-09-09 for visible controls, because the arrow keys and the swipe the
   primitive already implements are not discoverable. Filed as
   docs/v3/decisions/pending/U14-lightbox-prev-next.md.

   The shape is the Close button's, so the three controls read as one set, and the glyphs are the
   rail arrows the handoff builds for every scrolling row. The controller renders them only when the
   group holds more than one image, so a single-image lightbox is unchanged. */
.cb-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; z-index: 1;
}
.cb-lightbox-nav:hover { background: rgba(255,255,255,.14); }
.cb-lightbox-nav.prev { left: max(12px, env(safe-area-inset-left)); }
.cb-lightbox-nav.next { right: max(12px, env(safe-area-inset-right)); }
/* With arrows, the image keeps clear of them: the stage fills the viewport less the arrows' gutters
   (12px + 40px + 12px each side), so no arrow sits over the picture (2026-10-13). */
.cb-lightbox.has-nav { padding-left: 64px; padding-right: 64px; }

/* The card is a box with real links (Michael, 2026-09-29): the seller's name opens the store, so the
   card can no longer be one link. `.cb-pcard-cover` stretches the product link over the whole card
   under the controls; the title and the seller's name are real links above it; the heart, the dots,
   Add to cart, the gallery and the owner controls already sit higher. Visuals are unchanged: the
   title keeps its colours, and the card keeps its focus ring when its title link has focus. */
.cb-pcard{position:relative}
.cb-pcard-cover{position:absolute;inset:0;z-index:1}
.cb-pcard-title>a,.cb-pcard-title>a:hover{color:inherit;text-decoration:none;position:relative;z-index:2}
.cb-pcard a,.cb-pcard a:hover{opacity:1}
.cb-pcard-store{position:relative;z-index:2}
.cb-pcard .dc-save-more{z-index:2}
.cb-pcard-adult{pointer-events:none}
.cb-pcard-adult-reveal{pointer-events:auto}
/* QA item 127: the line under Show that points at Settings (signed-in, not opted in). */
.cb-pcard-adult-settings{pointer-events:auto;max-width:88%;color:rgba(255,255,255,.88);font:500 11px/1.35 var(--cb-font-regular);text-decoration:none}
.cb-pcard-adult-settings span{text-decoration:underline;white-space:nowrap}
.cb-pcard-adult-settings:hover,.cb-pcard-adult-settings:focus-visible{color:#fff}
.cb-pcard-title>a:focus-visible{outline:none}
.cb-pcard:has(.cb-pcard-title>a:focus-visible){outline:2px solid var(--cb-link);outline-offset:2px}
.cb-pcard .cb-pcard-add{position:relative;z-index:2}
/* The byline clips its overflow (the ellipsis), which cut the seller link's focus ring: padding
   gives the ring room and the negative margin keeps the layout where it was. */
.cb-pcard-byline{padding-block:4px;margin-block:-4px}
/* Desktop compositions for the newly ported page families.
   Component skins live in page-components.css and pages/*.css; desktop geometry lives here. */
.dc-port{--bp-accent:var(--cb-link);--bp-hero-top:#3aa1f0;--bp-hero-bot:#2c8fe0;--bp-stripe:#43a8e6;--cb-header-bg:var(--cb-chrome);--cb-bg-subtle:var(--cb-chip-bg);--cb-panel:var(--cb-bg);--cb-text-sec:var(--cb-sec);--cb-chip-active:rgba(64,179,222,.12);--cb-header-fg:#e8eaf0;--cb-header-sec:#9aa3b6;--cb-header-mute:#6f7a8f;--cb-search-bg:#1a1f2c;--cb-z-toast:90}
.dc-main{--cb-muted:var(--cb-sec);width:100%;max-width:calc(1440px + 2*var(--gut));min-height:calc(100vh - 450px);margin:0 auto;padding:44px var(--gut) 64px;font-size:15px;line-height:1.6}
.dc-main>section,.dc-main>div{min-width:0}
.dc-main h1{font-family:var(--cb-font-light);font-size:clamp(32px,2.8vw,44px);font-weight:300;line-height:1.18;letter-spacing:-.8px}
.dc-main :is(input,textarea,select){max-width:100%}
.dc-main [hidden]{display:none!important}
.dc-main :is(.cb-empty,.ph-empty-year,.nt-empty,.fp-empty,.st-empty){grid-column:1/-1}
.dc-main :is(.lib-header,.ph-header,.fp-page-header,.nt-head,.cv-head,.st-head,.bl-head,.cu-head){padding:0 0 28px;background:transparent}
.dc-main :is(.lib-sub,.ph-sub,.fp-sub,.nt-sub,.cv-sub,.st-sub,.bl-sub,.set-page-intro){font-size:15px;line-height:1.6;color:var(--cb-sec)}
.dc-main :is(button,a,input,textarea,select):focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
.dc-main :is(.cb-pager,.lib-feed-wrap,.ph-list,.fp-list,.nt-day-group,.nt-day-label,.cv-list){background:transparent}
.dc-port .hm-footer{margin-top:0}
/* Auth: an appropriately sized form, with the same rounded controls as the desktop chrome. */
/* A column, because the feedback slot (layouts/v3/_flash) renders inside main: in a row its hosts sat
   beside the form and pushed it off centre. The banner host keeps the full width; a section alert
   sits above the form, at the form's width. */
.dc-auth{display:flex;flex-direction:column;align-items:center;padding-block:52px 64px}
.dc-auth>#banner-host{align-self:stretch}
.dc-auth>.cb-feedback-flash{width:100%;max-width:480px;margin-bottom:24px;padding-inline:0}
.dc-auth .ah-section{width:100%;max-width:480px;padding:0;background:transparent}
.dc-auth .ah-intro{margin-bottom:24px}
.dc-auth .ah-intro-art{display:block;width:120px;height:112px;object-fit:contain;margin:0 auto 20px}
.dc-auth .ah-card{padding:28px;border:1px solid var(--cb-border-hard);border-radius:16px;background:var(--cb-card)}
.dc-auth .ah-input{min-height:46px;font-size:15px;border-radius:10px}
.dc-auth .ah-submit{min-height:46px;border-radius:999px;font-size:13px}
.dc-auth .ah-title{font-size:36px}
.dc-auth .ah-sub{max-width:440px;margin-inline:auto;font-size:15px;line-height:1.6}
.dc-auth-modal{max-width:820px;text-align:center;padding-block:80px}
.dc-404{max-width:800px;text-align:center;padding-block:90px}
.dc-404 img{max-width:260px;max-height:220px;object-fit:contain}
.dc-404 .dc-error-code{font:300 96px/1 var(--cb-font-light);letter-spacing:-3px;color:var(--cb-link-text,var(--cb-link));margin-bottom:20px}
.dc-404 h1{margin:0 0 14px;font-size:32px}
/* Artist programs: balanced hero, readable feature sections, bounded artwork. */
:is(.dc-open-store,.dc-become-a-partner){max-width:none;padding:0}
.dc-program-copy{min-width:0}
.dc-open-store .os-hero,.dc-become-a-partner .bp-hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr);align-items:center;gap:72px;max-width:calc(1280px + 2*var(--gut));min-height:440px;margin:0 auto;padding:64px var(--gut);text-align:left}
/* Keep the content columns in place while the navy hero spans the page. */
.dc-open-store .os-hero{--cb-text:#e8eaf0;--cb-muted:#b8c9db;max-width:none;padding-inline:max(var(--gut),calc((100% - 1280px)/2));isolation:isolate;background:linear-gradient(180deg,#243b5b 0%,#16253b 100%);border-bottom-color:rgba(255,255,255,.08)}
.dc-open-store .os-hero-art,.dc-become-a-partner .bp-hero-img{position:static;grid-column:2;grid-row:1;width:100%;max-width:340px;height:280px;object-fit:contain;margin:0 auto}
.dc-program-copy{grid-column:1;grid-row:1}
.dc-open-store .os-h1,.dc-become-a-partner .bp-h1{font-size:clamp(36px,3.4vw,50px);line-height:1.14;max-width:680px;margin:0 0 20px}
.dc-open-store .os-h1 br{display:none}
body.dc-port .dc-open-store .os-trust{background:transparent}
.dc-open-store .os-sub,.dc-become-a-partner .bp-hero-sub{font-size:17px;line-height:1.65;max-width:600px;margin:0 0 24px}
.dc-open-store .os-cta,.dc-become-a-partner :is(.bp-cta-light,.bp-cta-blue){width:auto;min-width:190px;max-width:100%;height:46px;border-radius:999px;padding:0 28px;letter-spacing:1.3px;font-size:12px}
.dc-open-store .os-cta{color:#fff;box-shadow:0 6px 18px rgba(123,193,120,.2)}
.dc-open-store .os-cta-foot,.dc-become-a-partner .bp-hero-foot{margin-top:14px;font-size:12px}
.dc-open-store .os-hero .os-eyebrow,.dc-become-a-partner .bp-eyebrow{line-height:1.5;margin-bottom:14px;letter-spacing:1.8px}
.dc-become-a-partner .bp-hero{padding:0;border-bottom:1px solid var(--cb-line-dark)}
.dc-open-store .os-hero::before,.dc-become-a-partner .bp-hero::before{content:"";position:absolute;inset:0;background:url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/illustrations/affiliate-pattern-7322096da30ef0ed2d948b820c363f0708649373695a37801ce0faba77a1691c.svg") repeat;background-size:420px 423px;opacity:.4;mix-blend-mode:soft-light;pointer-events:none}
.dc-open-store .os-hero::before{z-index:-1;opacity:.22}
.dc-open-store .os-proof,.dc-become-a-partner .bp-proof{display:flex;justify-content:center;gap:0;padding:24px max(var(--gut),calc((100% - 1060px)/2));border-block:1px solid var(--cb-border-hard);background:transparent}
.dc-open-store .os-proof-cell,.dc-become-a-partner .bp-proof-cell{flex:1;padding:0 24px;max-width:none}
.dc-open-store .os-proof-num,.dc-become-a-partner .bp-proof-num{font-size:27px;line-height:1.25}
.dc-open-store .os-proof-lbl,.dc-become-a-partner .bp-proof-lbl{font-size:10px;margin-top:5px}
.dc-open-store .os-carousel-wrap{max-width:calc(1280px + 2*var(--gut));padding:48px var(--gut);margin:0 auto}
.dc-open-store .os-carousel{position:relative;overflow:hidden;border:1px solid var(--cb-border);border-radius:16px;background:var(--cb-card)}
.dc-open-store .os-slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:12px 40px;align-content:center;min-height:300px;padding:38px 64px;text-align:left}
.dc-open-store .os-slide-eyebrow{grid-column:1;margin:0;align-self:end}
.dc-open-store .os-slide-title{grid-column:1;font-size:28px;line-height:1.25;margin:0}
.dc-open-store .os-slide-body{grid-column:1;max-width:460px;margin:0;font-size:15px;line-height:1.7}
.dc-open-store .os-vis{grid-column:2;grid-row:1/4;align-self:center;display:flex;align-items:center;justify-content:center;min-height:0;height:220px;border:0;background:transparent;margin:0}
.dc-open-store .os-vis-art{display:block;width:100%;height:220px;object-fit:contain}
.dc-open-store .os-carousel-dots{padding:0 0 20px;margin:0}
.dc-open-store .os-carousel .dh-arrow{width:34px;height:34px;top:50%;font-size:24px}
.dc-open-store .os-carousel .dh-arrow.prev{left:12px}
.dc-open-store .os-carousel .dh-arrow.next{right:12px}
.dc-open-store .os-trust{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.3fr);gap:12px 64px;max-width:calc(1280px + 2*var(--gut));padding:32px var(--gut) 44px;margin:0 auto;background:transparent;text-align:left;border-bottom:1px solid var(--cb-border)}
.dc-open-store .os-trust-eyebrow{grid-column:1;color:var(--cb-sec);margin:0;line-height:1.5}
.dc-open-store .os-trust-h{grid-column:1;grid-row:2/5;max-width:400px;font-size:24px;line-height:1.35;color:var(--cb-text);margin:0}
.dc-open-store .os-trust-marks{grid-column:2;grid-row:1/3;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;width:100%;margin:0}
.dc-open-store .os-pm{height:38px;border:1px solid var(--cb-border-hard);border-radius:8px}
.dc-open-store .os-trust-div{grid-column:2;max-width:none;margin:4px 0}
.dc-open-store .os-trust-mid{color:var(--cb-sec)}
.dc-open-store .os-trust-line{background:var(--cb-border-hard)}
.dc-open-store .os-trust-cryptos{grid-column:2;max-width:none;width:220px;margin:0}
.dc-open-store .os-coin{border:1px solid var(--cb-border-hard);border-radius:8px}
.dc-open-store .dc-revenue{display:grid;grid-template-columns:minmax(250px,.75fr) minmax(0,1.4fr);gap:20px 60px;align-items:start;max-width:calc(1280px + 2*var(--gut));padding:52px var(--gut);margin:auto;text-align:left;border-bottom:1px solid var(--cb-border)}
.dc-open-store .dc-section-intro{grid-column:1;grid-row:1/3}
.dc-open-store .os-value-h{font-size:28px;line-height:1.3;font-weight:400;margin:0}
.dc-open-store .os-rev-grid{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:none;margin:0}
.dc-open-store .os-rev-row{display:block;border-radius:14px;padding:22px;background:var(--cb-card)}
.dc-open-store .os-rev-pct{font-size:38px;font-weight:400;padding:0;margin-bottom:14px}
.dc-open-store .os-rev-lede{font-size:15px;line-height:1.5}
.dc-open-store .os-rev-body{font-size:14px;line-height:1.65}
.dc-open-store .os-rev-foot{grid-column:2;max-width:none;margin:0;font-size:12px}
.dc-seller-benefits{max-width:calc(1280px + 2*var(--gut));margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:48px var(--gut)}
.dc-seller-benefits .os-value{display:block;min-height:0;padding:0 28px 0 0;border:0;border-right:1px solid var(--cb-border);text-align:left}
.dc-seller-benefits .os-value:last-child{border-right:0;padding-right:0}
.dc-seller-benefits .os-value-h{font-size:24px;margin-bottom:16px}
.dc-seller-benefits .os-value-body{font-size:15px;line-height:1.7;max-width:none;margin:0}
.dc-seller-benefits .os-chart{width:100%;height:64px;max-width:none;margin:20px 0 0}
.dc-open-store .os-cta-block{max-width:none;padding:8px var(--gut) 44px;margin:0 auto;border-bottom:1px solid var(--cb-border)}
.dc-open-store .os-cta-block .os-cta{width:auto;height:46px}
.dc-open-store .os-faq{max-width:960px;padding:42px var(--gut) 56px;margin:auto}
.dc-open-store .os-faq-head{padding:0 0 20px}
.dc-open-store .os-faq-row>summary{padding:20px 0;font-size:16px}
.dc-open-store .os-faq-body{padding:0 36px 20px 0;font-size:15px;line-height:1.7}
.dc-become-a-partner .bp-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:64px;align-items:center;max-width:calc(1120px + 2*var(--gut));padding:56px var(--gut);margin:auto;text-align:left}
.dc-become-a-partner .bp-h2{font-size:30px;line-height:1.25;font-weight:400;margin:0 0 18px;max-width:none}
.dc-become-a-partner .bp-calc-intro{font-size:16px;line-height:1.7;max-width:480px;margin:0 0 20px}
.dc-become-a-partner .bp-calc-foot{max-width:480px;margin:0;font-size:13px;line-height:1.6}
.dc-become-a-partner .bp-calc-card{max-width:none;width:100%;margin:0;padding:28px;border-radius:16px;text-align:center}
.dc-become-a-partner .bp-calc-readout{font-size:56px;margin:6px 0 10px}
.dc-become-a-partner .bp-calc-formula{font-size:13px;margin-bottom:28px}
.dc-become-a-partner .bp-how,.dc-become-a-partner .bp-tests{max-width:calc(1280px + 2*var(--gut));margin:auto;padding:44px var(--gut);background:transparent}
.dc-become-a-partner :is(.bp-how-head,.bp-tests-head){padding:0;margin-bottom:26px;text-align:left}
.dc-become-a-partner .bp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:none;margin:0}
.dc-become-a-partner .bp-step{grid-template-columns:76px minmax(0,1fr);gap:8px 20px;padding:24px;border-radius:14px}
.dc-become-a-partner .bp-step-num{grid-column:2;margin:6px 0 0;align-self:end}
.dc-become-a-partner .bp-step-body{grid-column:2}
.dc-become-a-partner .bp-step-title{font-size:18px;line-height:1.3;margin-bottom:10px}
.dc-become-a-partner .bp-step-text{font-size:14px;line-height:1.65}
.dc-become-a-partner .bp-dark{padding:44px max(var(--gut),calc((100% - 1120px)/2));border-block:1px solid var(--cb-line-dark);background:var(--cb-chrome)}
.dc-become-a-partner .bp-dark-h{font-size:28px;line-height:1.3;margin:0 0 18px}
.dc-become-a-partner .bp-dark-body{font-size:16px;line-height:1.7;max-width:760px;margin:0 auto 14px;color:#b4bed0}
.dc-become-a-partner .bp-dark-body-sm{font-size:14px}
.dc-become-a-partner .bp-dark.bp-dark-naked{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);align-items:center;gap:64px;text-align:left;padding-block:40px;background:transparent;border-color:var(--cb-border)}
.dc-become-a-partner .bp-dark-naked .bp-dark-body{max-width:none;margin:0;color:var(--cb-sec)}
.dc-become-a-partner .bp-share-art,.dc-become-a-partner .bp-mega-scene{width:100%;max-width:320px;height:250px;margin:0 auto;object-fit:contain}
.dc-become-a-partner .bp-mega-art{width:100%;height:100%;object-fit:contain}
.dc-become-a-partner .bp-library{max-width:none;margin:0;padding:44px var(--gut) 30px;text-align:left}
.dc-become-a-partner .bp-library-head{max-width:1640px;margin:0 auto;padding:0 0 26px}
.dc-become-a-partner .bp-library-sub{font-size:15px;line-height:1.65;max-width:720px;margin:0}
.dc-become-a-partner .bp-tests-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;overflow:visible;padding:0}
.dc-become-a-partner .bp-test{padding:24px;border-radius:14px;min-width:0}
.dc-become-a-partner .bp-test-body{font-size:15px;line-height:1.7}
.dc-become-a-partner .bp-tests-tail{display:none}
.dc-become-a-partner .bp-stripe{padding:38px var(--gut);border-top:1px solid var(--cb-line-dark)}
.dc-become-a-partner .bp-stripe-h{font-size:28px;line-height:1.3}
.dc-port .os-sticky-cta,.dc-port .bp-sticky{left:auto;right:var(--gut);bottom:18px;transform:none;width:auto;max-width:none;padding:0;border:0;background:none}
.dc-port .os-sticky-cta .os-cta,.dc-port .bp-sticky .bp-cta-blue{width:auto;min-width:190px;height:44px;border-radius:999px;padding:0 24px;font-size:12px;letter-spacing:1.2px}
/* Editorial: heading above the content; featured stories use the available width. */
.dc-blog{display:block;max-width:calc(1440px + 2*var(--gut))}
.dc-blog .bl-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:64px;align-items:center;padding:0 0 32px;background:transparent}
.dc-blog .bl-eyebrow,.dc-blog .bl-h1,.dc-blog .bl-hero-sub{grid-column:1}
.dc-blog .bl-h1{margin:0 0 14px;max-width:none}
.dc-blog .bl-h1 br{display:none}
.dc-blog .bl-hero-sub{max-width:680px;font-size:15px;line-height:1.65;margin:0}
.dc-blog .bl-write{grid-column:2;grid-row:1/4;margin:0;padding:16px;border-radius:12px}
.dc-blog .bl-featured{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%;max-width:none;margin:0;padding:0 0 32px;background:transparent}
.dc-blog .bl-section-head{grid-column:1/-1;margin:0}
.dc-blog .bl-card{display:flex;flex-direction:column;margin:0;height:100%;min-width:0;overflow:hidden;border:1px solid var(--cb-border);border-radius:14px;box-shadow:none}
.dc-blog :is(.bl-card,.bl-row)>.bp-img{width:100%;height:auto;min-height:0;aspect-ratio:16/9;flex:none;border-radius:0}
.dc-blog :is(.bl-card,.bl-row)>.bp-img>img{position:absolute;inset:0}
.dc-blog .bl-card-body{display:flex;flex-direction:column;flex:1;padding:20px}
.dc-blog .bl-card-excerpt{font-size:14px;line-height:1.65;-webkit-line-clamp:3;margin-bottom:18px}
.dc-blog .bl-card-foot{margin-top:auto}
.dc-blog :is(.bl-card-title,.bl-secondary-title){font-size:21px;line-height:1.4}
.dc-blog .bl-filters{padding:18px 0;border-block:1px solid var(--cb-border);background:transparent;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.dc-blog .bl-filters > form, :where(.dc-port) .bl-filters > form{display:contents} /* QA item 246: the forms only wrap the tab and chip rows */
.dc-blog .bl-tabs{padding:0;margin:0;height:42px;gap:22px}
.dc-blog .bl-tab{font-size:12px;text-transform:uppercase;letter-spacing:1.3px}
.dc-blog .bl-chips{padding:0;margin:0;flex-wrap:wrap;gap:8px}
.dc-blog .bl-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 0;background:transparent}
.dc-blog .bl-row{display:flex;flex-direction:column;gap:0;min-width:0;border:1px solid var(--cb-border);border-radius:14px;background:var(--cb-card);padding:0;overflow:hidden}
.dc-blog .bl-row-body{padding:20px}
.dc-blog .bl-row-title{font-size:20px;line-height:1.4}
.dc-blog .bl-loadmore{background:transparent;padding:8px 0 32px}
.dc-blog .bl-newsletter{display:grid;grid-template-columns:minmax(0,720px) clamp(160px,20vw,260px);justify-content:center;align-items:center;gap:40px;padding:36px;border-radius:16px;overflow:hidden}
.dc-blog .bl-newsletter-inner{grid-column:1;grid-row:1;width:100%;min-width:0;max-width:720px;margin:auto}
.dc-blog .bl-newsletter-art{display:block;position:relative;grid-column:2;grid-row:1;width:100%;height:auto;aspect-ratio:14/11;object-fit:contain;margin:0;pointer-events:none}
.dc-blog .bl-newsletter-input{min-width:0}
@media(max-width:760px){.dc-blog .bl-newsletter{grid-template-columns:minmax(0,1fr);gap:18px}.dc-blog .bl-newsletter-art{grid-column:1;grid-row:1;width:148px;margin:auto}.dc-blog .bl-newsletter-inner{grid-row:2}}
/* Article geometry and formatting: blog-article.css. */
/* About, contact and legal: keep reading measures sane and illustrations beside introductions. */
.dc-about,.dc-contact{max-width:calc(1200px + 2*var(--gut))}
.dc-about .ab-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.7fr);gap:56px;align-items:center;padding:24px 0 44px;background:transparent;color:var(--cb-text)}
.dc-about .ab-hero h1{color:var(--cb-text)}
.dc-about .ab-hero h1 strong{color:var(--cb-link-text,var(--cb-link))}
.dc-about .ab-hero-sub{color:var(--cb-sec);font-size:16px;line-height:1.75;max-width:none}
.dc-about .ab-hero-eyebrow{color:var(--cb-sec);background:var(--cb-chip-bg)}
.dc-about .ab-hero-art{grid-column:2;grid-row:1;margin:0;height:270px}
.dc-about .ab-hero-art img{width:100%;height:100%;object-fit:contain}
.dc-about .ab-sec{padding:36px 0;border-top:1px solid var(--cb-border);background:transparent}
.dc-about .ab-sec h2{font-size:28px;line-height:1.3;font-weight:400}
.dc-about .ab-sec>p{max-width:850px;font-size:16px;line-height:1.75}
.dc-about .ab-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
.dc-about .ab-promises{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dc-about .ab-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dc-about .ab-promise,.dc-about .ab-track{border-radius:14px;padding:24px}
.dc-about .ab-location{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.dc-about .ab-location-copy{min-width:0}
.dc-about .ab-location-copy>p{font-size:16px;line-height:1.75}
.dc-about .ab-location-figure{margin:0;width:100%;max-width:583px;justify-self:end}
.dc-about .ab-where-photo-frame{aspect-ratio:auto;max-height:none;overflow:hidden;border-radius:14px;margin:0 0 18px}
.dc-about .ab-where-photo{position:static;display:block;width:100%;height:auto;object-fit:contain;transform:none;transition:none;will-change:auto}
.dc-about .ab-where{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.dc-about .ab-location .ab-where{grid-template-columns:1fr;gap:12px;margin-top:22px}
.dc-about .ab-location .ab-where-card{margin:0;overflow-wrap:anywhere}
.dc-about .ab-location .ab-where-caption{align-items:baseline;margin:0;line-height:1.5}
@media(max-width:760px){.dc-about .ab-location{grid-template-columns:1fr;gap:26px}.dc-about .ab-location-figure{justify-self:start}}
.dc-about .ab-note{padding:30px;border-radius:14px}
.dc-about .ab-note-quote{font-size:23px;line-height:1.6;max-width:900px}
.dc-contact .ct-page{padding:0;background:transparent}
.dc-contact .dc-contact-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr);gap:64px;align-items:center;padding:8px 0 36px}
.dc-contact .ct-hero-art{grid-column:2;grid-row:1;height:240px;margin:0}
.dc-contact .ct-hero-art img{width:100%;height:100%;object-fit:contain}
.dc-contact .ct-lede{max-width:700px;font-size:16px;line-height:1.7}
.dc-contact .ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dc-contact .ct-card{padding:24px;border:1px solid var(--cb-border);border-radius:14px}
.dc-contact .ct-card-title{font-size:17px}
.dc-contact .ct-card-sub{font-size:14px;line-height:1.6}
.dc-contact .ct-section{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.5fr);gap:14px 50px;padding:36px 0}
.dc-contact .ct-section-h{grid-column:1;grid-row:1;font-size:26px;line-height:1.3}
.dc-contact .ct-section-sub{grid-column:1;grid-row:2;font-size:15px;line-height:1.65}
.dc-contact .ct-form,.dc-contact .ct-meta{grid-column:2;grid-row:1/4;margin:0}
.dc-contact .ct-form{padding:24px;border:1px solid var(--cb-border);border-radius:14px;background:var(--cb-card)}
.dc-legal{max-width:calc(1160px + 2*var(--gut))}
/* Marc's review (2026-10-24): the handoff set the first block in the page's full width, left-aligned, and the
   sections in a centered 820px column. Every block now shares the sections' column. */
.dc-legal :is(.tos-page,.pp-page,.la-page,.lc-page){position:relative;max-width:820px;margin-inline:auto;padding:0;background:transparent}
.dc-legal :is(.tos-h1,.pp-h1,.la-h1,.lc-h1){margin:12px 0 20px}
.dc-legal :is(.tos-lede,.pp-lede,.la-lede,.lc-lede){max-width:820px;font-size:16px;line-height:1.75}
.dc-legal :is(.lc-hero-art,.pp-hero-art,.la-hero-art){float:right;width:200px;height:185px;margin:0 0 24px 40px}
.dc-legal :is(.lc-hero-art,.pp-hero-art,.la-hero-art) img{width:100%;height:100%;object-fit:contain}
.dc-legal .lc-compare{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:14px}
.dc-legal .lc-tier{min-width:0;padding:22px;border-radius:14px}
.dc-legal .lc-tier-head{align-items:flex-start;flex-direction:column;gap:8px}
.dc-legal .lc-tier-foot{font-size:13px;line-height:1.6}
.dc-legal :is(.tos-tldr,.pp-tldr,.la-tldr){max-width:900px;border-radius:14px;padding:26px}
.dc-legal :is(.tos-body,.pp-body,.la-body,.lc-body){max-width:820px;margin-inline:auto;font-size:16px;line-height:1.8}
.dc-legal :is(.tos-body,.pp-body,.la-body,.lc-body) :is(p,li){font-size:15px;line-height:1.8}
.dc-legal :is(.tos-section,.pp-section,.la-section,.lc-section){scroll-margin-top:140px}
.dc-legal :is(.tos-jump,.pp-jump,.la-jump,.lc-jump){clear:both;border-radius:12px;margin:28px auto;max-width:820px;top:var(--cb-chrome-h)}
.dc-legal :is(.tos-end,.pp-end,.la-end,.lc-end){max-width:820px;margin-inline:auto}
/* Product and account collections. Preserve full-width product grids. */
:is(.dc-library,.dc-wishlists){max-width:none}
.dc-library :is(.lib-h1-block,.lib-tabs){padding-inline:0}
.dc-library .lib-feed-wrap{padding:0}
.dc-library .lib-feed{padding:24px 0}
.dc-library .lib-feed>*,.dc-wishlists .dc-wish-grid>*{min-width:0}
.dc-library .lib-card-inner{display:flex;flex-direction:column;height:100%}
.dc-library .lib-card:has(.lib-card-menu[aria-expanded="true"]){z-index:5}
.dc-library .lib-card-footer{flex-direction:column;align-items:stretch;margin-top:auto;padding-top:12px}
.dc-library .lib-license-pill{align-self:flex-start;margin-left:0}
.dc-library .lib-feed,.dc-wishlists :is(.hm-grid,.dc-wish-grid,.wl-list){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dc-wishlists .wl-list{padding:24px 0}
.dc-wishlists .wl-list>*{min-width:0;margin:0}
.dc-wishlists .wl-collage{height:auto;aspect-ratio:16/9}
.dc-wishlists .wl-collage:not(.is-empty){background:transparent}
.dc-wishlists .wl-collage .wl-cover{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover}
.dc-wishlists .wl-collage.n-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dc-wishlists :is(.wl-index-header,.wl-list,.wl-detail,.wl-detail-header,.wl-empty,.wl-detail-empty){background:transparent}
.dc-purchases{max-width:calc(1280px + 2*var(--gut))}
.dc-purchases .ph-list{display:flex;flex-direction:column;gap:26px;padding:20px 0}
.dc-purchases .ph-group{margin:0}
.dc-purchases .ph-order{border:1px solid var(--cb-border);border-radius:12px;overflow:visible;display:grid;grid-template-columns:220px minmax(0,1fr);margin-top:12px;background:var(--cb-card)}
.dc-purchases .ph-order-head{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;padding:22px;border:0;background:transparent}
.dc-purchases .ph-order-lines{grid-column:2;grid-row:1/3;padding:10px 0;border-left:1px solid var(--cb-border)}
.dc-purchases .ph-actions{grid-column:1;padding:0 22px 22px;border:0;background:transparent;align-self:start}
.dc-purchases .ph-receipt-btn{width:auto;min-width:120px;height:38px;box-shadow:none}
.dc-purchases .ph-line{padding:12px 20px}
.dc-purchases .ph-line-title{font-size:15px}
.dc-purchases .ph-line-sub{font-size:13px;line-height:1.5}
.dc-following{max-width:calc(1280px + 2*var(--gut))}
.dc-following .fp-types{padding:0 0 14px;gap:28px;justify-content:flex-start;background:transparent}
.dc-following .fp-type{flex:none;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;padding:14px 0;font-size:12px;letter-spacing:1.2px}
.dc-following .fp-type[aria-pressed="true"]{color:var(--cb-text);background:transparent;border-bottom:3px solid var(--cb-link)}
.dc-following .fp-toolbar{padding:0 0 22px;gap:16px;background:transparent}
.dc-following .fp-search{max-width:520px;border:1px solid var(--cb-border-hard)}
.dc-following .fp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:4px 0}
.dc-following .fp-row{border:1px solid var(--cb-border);border-radius:12px;background:var(--cb-card);padding:20px}
.dc-following .fp-name{font-size:16px}
.dc-following .fp-meta{font-size:13px;line-height:1.6}
.dc-notifications{max-width:calc(1100px + 2*var(--gut))}
.dc-notifications .nt-row{padding:18px 20px;min-height:84px}
.dc-notifications :is(.nt-toolbar,.nt-tabs-wrap){padding-inline:0;background:transparent}
.dc-notifications .nt-sentence{font-size:15px;line-height:1.6}
.dc-notifications .nt-time{font-size:12px}
.dc-conversations{max-width:calc(1200px + 2*var(--gut))}
.dc-conversations .cv-tabs{background:transparent}
.dc-conversations .cv-row{padding:0}
.dc-conversations .cv-row-fg{padding:18px 20px}
.dc-conversations .cv-meta-name{font-size:15px}
.dc-conversations .cv-meta-snippet{font-size:14px;line-height:1.6}
.dc-conversations .cv-thread{width:100%;max-width:none;margin:0}
.dc-conversations .cv-thread-body{min-height:400px;max-height:60vh;overflow-y:auto}
.dc-conversation-title{font-size:23px;font-weight:400;margin:12px 18px 24px}
.dc-conversations .cv-msg-text{white-space:pre-wrap;font-size:15px;line-height:1.65}
.dc-conversations .cv-row-open:focus-visible{outline-offset:-3px}
/* Settings use a quiet sidebar and one panel per section, not nested mobile cards. */
.dc-settings{position:relative;max-width:calc(1280px + 2*var(--gut));padding-left:calc(var(--gut) + 232px)}
.dc-settings .set-tabs{position:absolute;left:var(--gut);top:44px;width:196px;margin:0;padding:0;background:transparent;border:0;border-radius:0}
.dc-settings .set-tabs-strip{display:flex;flex-direction:column;overflow:visible;gap:4px;padding:0}
.dc-settings .set-tab{width:100%;padding:13px 16px;text-align:left;border:0;border-radius:10px;font-size:14px}
.dc-settings .set-tab.is-active{background:var(--cb-chip-active);color:var(--cb-link-text,var(--cb-link))}
.dc-settings .set-tab::after{display:none}
/* Reserve the floating cart's corner so it never covers the artwork. */
.dc-settings .set-page-header{display:grid;grid-template-columns:minmax(0,1fr) 192px;align-items:center;gap:32px;min-height:152px;padding:0 64px 28px 0}
.dc-settings .set-heading-copy{min-width:0;max-width:640px}
.dc-settings .set-page-art{display:block;width:192px;height:152px;object-fit:contain;pointer-events:none;user-select:none}
.dc-settings .set-section{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.7fr);gap:32px;padding:26px 0;margin:0;border:0;border-top:1px solid var(--cb-border);border-radius:0;background:transparent}
.dc-setting-caption{min-width:0}
.dc-settings .set-section-title{font-size:17px;line-height:1.4;letter-spacing:0}
.dc-settings .set-section-hint{font-size:13px;line-height:1.65;margin-top:10px;max-width:240px}
.dc-settings .set-section-body{min-width:0;margin:0;padding:22px;gap:18px;border:1px solid var(--cb-border);border-radius:14px;background:var(--cb-card)}
.dc-settings .set-section:not(:has(.dc-setting-caption)) .set-section-body{grid-column:1/-1}
.dc-settings .set-row{gap:20px}
.dc-settings :is(.set-input,.set-select-btn){min-height:44px;font-size:14px;border-radius:9px}
.dc-settings .set-field-label{font-size:13px;line-height:1.4}
.dc-settings .set-field-hint{font-size:13px;line-height:1.5}
.dc-settings .set-toggle-title,.dc-settings .set-row-title{font-size:14px;line-height:1.5}
.dc-settings .set-toggle-sub,.dc-settings .set-row-sub{font-size:12px;line-height:1.5}
.dc-settings .set-actions{padding:20px 0 0}
.dc-settings .set-actions.is-inline{padding:4px 0 0}
.dc-settings .set-bottom-pad{height:0}
.dc-settings .set-section.is-danger .set-section-body{background:rgba(196,86,74,.06)}
/* QA item 275: "Delete my account" sits in the middle of its panel, which is as tall as the hint beside it. */
.dc-settings .set-section.is-danger .set-section-body{display:flex;flex-direction:column;justify-content:center}
.dc-settings .set-section.is-danger .set-actions.is-inline{padding:0}
.dc-settings .set-link-tile{margin:0 0 24px;border-radius:12px}
/* Seller dashboards and orders. Use actual rendered class names, including loading shells. */
:is(.dc-stats,.dc-balance,.dc-customers){max-width:calc(1400px + 2*var(--gut))}
.dc-stats .st-head{display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:40px;align-items:center}
.dc-stats .st-head-inner{padding:0;min-width:0}
.dc-stats .st-prod-btn{grid-column:2;align-self:center;width:100%;margin:0;min-height:44px;border:1px solid var(--cb-border-hard);border-radius:999px}
.dc-stats .st-period{padding:0 0 20px;margin:0;justify-content:flex-start;gap:8px;background:transparent}
.dc-stats .st-period-btn{flex:none;min-width:72px;padding:10px 18px;min-height:38px;border:1px solid var(--cb-border-hard);border-radius:999px;font-size:12px;background:transparent}
.dc-stats .st-period-btn.is-active{background:var(--cb-chip-active);border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}
.dc-stats [data-st-content]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0}
.dc-stats .st-kpi-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:0;padding:0;background:transparent}
.dc-stats .st-kpi{grid-column:auto;min-width:0;border-radius:12px;padding:20px}
.dc-stats .st-kpi-value{font-size:28px;line-height:1.25}
.dc-stats .st-kpi-label{font-size:11px;line-height:1.5}
.dc-stats .st-card{margin:0;padding:24px;min-width:0;border:1px solid var(--cb-border);border-radius:14px}
.dc-stats .st-card:has(.st-bars-wrap){grid-column:1/-1}
.dc-stats .st-card-title{font-size:16px}
.dc-stats .st-bars-wrap{height:230px}
.dc-stats .st-card:has(.st-heat){overflow:auto}
.dc-stats .st-wish{grid-column:1/-1;margin:0;border-radius:12px}
.dc-stats [data-st-content]>div:has(>.st-foll-collapsed){grid-column:1/-1}
.dc-stats .st-trio{height:100%;padding:0;margin:0;gap:14px}
.dc-stats .st-trio-tile{padding:22px 16px;border-radius:12px}
.dc-stats [data-st-content]>div:empty{display:none}
.dc-balance [data-bl-content]{padding:0}
.dc-balance .bl-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:10px 64px;background:transparent;padding:12px 0 28px;border-bottom:1px solid var(--cb-border)}
.dc-balance :is(.bl-hero-eyebrow,.bl-hero-amount,.bl-hero-meta){grid-column:1}
.dc-balance .bl-hero-amount{font-size:50px;line-height:1.2}
.dc-balance .bl-proc{grid-column:2;grid-row:1/3;margin:0;padding:18px;border:1px solid var(--cb-border);border-radius:12px;background:var(--cb-card)}
.dc-balance .bl-payout{grid-column:2;grid-row:3;margin:0;padding:16px;border-radius:12px}
.dc-balance .bl-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:24px 0;background:transparent;border:0}
.dc-balance .bl-kpi{border:1px solid var(--cb-border);border-radius:12px;background:var(--cb-card);padding:20px}
.dc-balance .bl-kpi-val{font-size:26px}
.dc-balance :is(.bl-trend,.bl-activity,.bl-history){padding:24px;margin:0 0 22px;border:1px solid var(--cb-border);border-radius:14px;background:var(--cb-card)}
.dc-balance .bl-trend-title,.dc-balance .bl-history-title{font-size:20px}
.dc-balance .bl-chart-svg{height:230px}
.dc-balance .bl-history-card{border-radius:10px}
.dc-customers .cu-tabs{padding:0;border-bottom:1px solid var(--cb-border);background:transparent}
.dc-customers .cu-tab{font-size:12px;letter-spacing:1.4px;padding:16px 20px}
.dc-customers .cu-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;background:transparent}
.dc-customers .cu-toolbar-row{gap:18px;padding:0;flex:1}
.dc-customers .cu-paying{margin:0}
.dc-customers .cu-search-wrap{display:flex;align-items:center;gap:16px;padding:0 0 20px;background:transparent}
.dc-customers .cu-search{max-width:560px;flex:1;border:1px solid var(--cb-border-hard);border-radius:999px;height:42px}
.dc-customers .cu-sort-row{margin:0;padding:0}
.dc-customers .cu-sort-chip{height:40px;border:1px solid var(--cb-border-hard);background:transparent}
.dc-customers .cu-row{border:1px solid var(--cb-border);border-radius:12px;margin-bottom:12px;background:var(--cb-card)}
.dc-customers .cu-row-head{padding:18px 22px}
.dc-customers .cu-row-name{font-size:15px}
.dc-customers .cu-row-email{font-size:13px}
.dc-customers .cu-import{border-radius:12px;margin:20px 0}
.dc-customers .cu-foll-stats{margin:0 0 4px}
.dc-orders{max-width:calc(1200px + 2*var(--gut))}
.dc-orders article{padding:0}
.dc-orders .or-hero{padding:4px 0 28px;background:transparent}
.dc-orders .or-items{padding:0;background:transparent}
.dc-orders .or-item{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;margin:0 0 24px;padding:24px;border:1px solid var(--cb-border);border-radius:14px;background:var(--cb-card)}
.dc-orders .dc-order-product{min-width:0}
.dc-orders .or-item-titles{padding:0 0 16px}
.dc-orders .or-item-title{font-size:18px;line-height:1.4}
.dc-orders .or-item-author{font-size:13px;line-height:1.6}
.dc-orders .or-item-hero{height:160px;aspect-ratio:16/9;margin:0;border-radius:10px;background-size:cover}
.dc-orders .or-item-body{padding:0;min-width:0}
.dc-orders .or-item-files-head{margin:0 0 12px;font-size:12px; line-height:16px;}
.dc-orders .or-att{padding:12px;border-radius:8px}
.dc-orders .or-att-name{font-size:14px}
.dc-orders .or-item-cta{min-height:42px;border-radius:999px}
.dc-orders .or-banner-block{margin:0;padding:22px;border-radius:12px;align-self:start}
/* QA item 232: a partially refunded line stacks its refund banner over its files in the right-hand column */
.dc-orders .or-item[data-or-refund="partial"]{grid-template-rows:auto 1fr;row-gap:16px}
.dc-orders .or-item[data-or-refund="partial"] .dc-order-product{grid-row:1 / span 2}
.dc-orders .or-item[data-or-refund="partial"] > :not(.dc-order-product){grid-column:2}
.dc-orders :is(.or-claim,.or-email-gate){max-width:640px;margin:24px auto;padding:28px;border-radius:14px}
.dc-orders .or-help{background:transparent;padding:22px 0}
.dc-orders .or-item-eyebrow{padding:0 0 12px}
/* Desktop overlays are centered dialogs with room to read and scroll. */
.dc-port .cb-sheet-host{position:fixed;inset:0;z-index:70}
.dc-port :is(.cb-sheet,.hm-filter-sheet){width:min(680px,calc(100vw - 64px));max-height:calc(100dvh - 96px);margin-inline:auto;border-radius:16px}
.dc-port :is(.os-modal-host,.bp-modal-host){z-index:75}
.dc-port :is(.os-modal,.bp-modal){width:min(540px,calc(100vw - 64px));max-width:540px;max-height:calc(100dvh - 80px);margin:auto;border:1px solid var(--cb-line-dark-hard);border-radius:16px;overflow:auto}
.dc-port :is(.cu-sheet,.st-sheet,.bl-sheet){z-index:75;display:flex;align-items:center;justify-content:center;visibility:hidden}
.dc-port :is(.cu-sheet,.st-sheet,.bl-sheet).is-open{visibility:visible}
.dc-port :is(.cu-sheet-panel,.st-sheet-panel,.bl-sheet-panel){position:relative;inset:auto;width:min(680px,calc(100vw - 64px));max-width:680px;max-height:calc(100dvh - 96px);margin:auto;border-radius:16px;transform:translateY(12px);opacity:0}
/* QA item 86: v3's overlay controller marks an open sheet `is-open` (the handoff ports named it
   `is-shown`); either shows the panel, which stayed at opacity 0 behind a dimmed page. */
.dc-port :is(.is-open,.is-shown)>:is(.cu-sheet-panel,.st-sheet-panel,.bl-sheet-panel){transform:none;opacity:1}
.dc-port :is(.cu-sheet-handle,.st-sheet-handle,.bl-sheet-handle){display:none}
.dc-dialog-close{position:absolute;right:14px;top:14px;z-index:2;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--cb-border);border-radius:50%;background:var(--cb-card);color:var(--cb-sec);font:400 24px/1 var(--cb-font-regular);cursor:pointer}
.dc-dialog-close:hover{color:var(--cb-text);border-color:var(--cb-link)}
.dc-port :is(.st-sheet-title,.cu-sheet-title){font-size:20px;line-height:1.4;padding:24px 64px 18px 24px}
.dc-port .bl-sheet-body{padding:28px}
.dc-port .bl-sheet-title{font-size:20px;line-height:1.4;padding-right:40px}
.dc-port :is(.st-sheet-opt-title,.cu-sort-title,.bl-method-title){font-size:14px}
.dc-port .cb-da-card{width:min(760px,calc(100vw - 64px));max-width:760px;max-height:calc(100dvh - 96px)}
.dc-port :is(.cb-da-head,.cb-da-preview,.cb-da-foot){padding:24px 28px}
.dc-port .cb-da-title{font-size:24px;line-height:1.3}
.dc-port .cb-da-preview p{font-size:14px;line-height:1.7}
.dc-port .cb-da-preview h3{font-size:16px;line-height:1.5}
@media(min-width:960px){.dc-library .lib-feed,.dc-wishlists :is(.hm-grid,.dc-wish-grid,.wl-list){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1280px){.dc-library .lib-feed,.dc-wishlists :is(.hm-grid,.dc-wish-grid,.wl-list){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1600px){.dc-library .lib-feed,.dc-wishlists :is(.hm-grid,.dc-wish-grid,.wl-list){grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1100px){
 .dc-conversations.dc-conversation-active{display:grid;grid-template-columns:360px minmax(0,1fr);column-gap:28px;row-gap:0;align-items:start}
/* The list and the thread sit in their own columns whatever else <main> holds first: the grid placed children
   in order, so on /conversations/new (no turbo_stream_from before the list) the zero-height banner host took the
   first cell, the list the second (the right) and the thread wrapped below it on the left (tester-r's r34b T1).
   Everything else spans the row and, at zero height, adds no gap. */
.dc-conversations.dc-conversation-active>*:not(#cv-inbox):not(.cv-thread){grid-column:1/-1}
.dc-conversation-active #cv-inbox{grid-column:1}
.dc-conversation-active .cv-thread{grid-column:2}
 .dc-conversation-active #cv-inbox{display:block!important;position:sticky;top:92px;max-height:calc(100vh - 120px);overflow:auto}
 .dc-conversation-active .cv-thread{min-width:0;border:1px solid var(--cb-border);border-radius:14px;background:var(--cb-card);overflow:hidden}
 .dc-conversation-active .cv-header{padding-top:20px}
 .dc-conversation-active .cv-meta-when{display:none}
 .dc-conversation-active .cv-row-fg{padding:16px 12px}
 .dc-conversation-active .cv-head h1{font-size:28px}
 .dc-conversation-active .cv-tabs{gap:8px}.dc-conversation-active .cv-tab{padding-inline:6px;letter-spacing:.4px}
}
@media(max-width:1100px){
 .dc-main{padding-top:32px}
 .dc-open-store .os-hero,.dc-become-a-partner .bp-hero-inner{grid-template-columns:minmax(0,1.3fr) minmax(230px,.8fr);gap:36px;padding-block:48px;min-height:380px}
 .dc-open-store .os-hero-art,.dc-become-a-partner .bp-hero-img{height:230px}
 .dc-open-store .os-h1,.dc-become-a-partner .bp-h1{font-size:36px}
 .dc-open-store .os-slide{padding:32px 56px;column-gap:24px}
 .dc-open-store .dc-revenue{grid-template-columns:1fr;gap:24px}
 .dc-open-store .dc-section-intro,.dc-open-store .os-rev-grid,.dc-open-store .os-rev-foot{grid-column:1;grid-row:auto}
 .dc-seller-benefits{gap:22px}.dc-seller-benefits .os-value{padding-right:20px}.dc-seller-benefits .os-value-h{font-size:21px}
 .dc-become-a-partner .bp-calc{gap:36px;grid-template-columns:minmax(0,1fr) minmax(340px,1fr)}
 .dc-become-a-partner .bp-step{grid-template-columns:1fr;padding:20px}
 .dc-become-a-partner .bp-step-icon{grid-column:1;grid-row:auto;width:64px;height:64px}
 .dc-become-a-partner .bp-step-num,.dc-become-a-partner .bp-step-body{grid-column:1}
 .dc-become-a-partner .bp-dark.bp-dark-naked{gap:32px}
 .dc-blog .bl-hero{grid-template-columns:1fr 300px;gap:28px}
 .dc-blog .bl-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dc-contact .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dc-contact .dc-contact-hero,.dc-about .ab-hero{gap:28px}
 .dc-contact .ct-section{gap:20px 32px;grid-template-columns:220px minmax(0,1fr)}
 .dc-settings{padding-left:calc(var(--gut) + 192px)}
 .dc-settings .set-tabs{width:165px;top:32px}
 .dc-settings .set-page-header{grid-template-columns:minmax(0,1fr) 152px;gap:24px;min-height:128px}
 .dc-settings .set-page-art{width:152px;height:128px}
 .dc-settings .set-section{grid-template-columns:1fr;gap:16px}
 .dc-settings .set-section-hint{max-width:none}
 .dc-stats .st-kpi{padding:16px 12px}.dc-stats .st-kpi-value{font-size:25px}
 .dc-stats .st-kpi-grid{gap:12px}
 .dc-orders .or-item{grid-template-columns:230px minmax(0,1fr);gap:22px}
 .dc-orders .or-item-hero{height:130px}
}
@media(max-width:800px){
 .dc-open-store .os-hero,.dc-become-a-partner .bp-hero-inner{gap:24px;grid-template-columns:minmax(0,1.5fr) minmax(180px,.7fr)}
 .dc-open-store .os-hero-art,.dc-become-a-partner .bp-hero-img{height:200px}
 .dc-seller-benefits{grid-template-columns:1fr;gap:26px}
 .dc-seller-benefits .os-value{padding:0 0 26px;border-right:0;border-bottom:1px solid var(--cb-border)}
 .dc-become-a-partner .bp-calc{gap:24px;grid-template-columns:1fr 1fr}
 .dc-become-a-partner .bp-calc-card{padding:20px}
 .dc-stats .st-head-inner{grid-template-columns:1fr 270px}
 .dc-stats [data-st-content]{grid-template-columns:1fr}
 .dc-stats .st-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .dc-legal .lc-compare{gap:12px}.dc-legal .lc-tier{padding:16px}
 .dc-blog .bl-hero{grid-template-columns:1fr}.dc-blog .bl-write{grid-column:1;grid-row:auto;max-width:420px;margin-top:22px}
 .dc-about .ab-tracks{grid-template-columns:1fr}
}
/* Product page styles - extracted verbatim from production/assets/css/site.css (.pp-*, .cb-comments*, .cb-lightbox, .cb-num-*). Desktop layout overrides live in the page (dpp-). Re-extract rather than hand-edit if mobile changes. */
.hm-section-label{padding: 22px 16px 14px; display: flex; align-items: baseline; justify-content: space-between; background: transparent;}
.hm-section-label .lbl{font: 600 15px/1.1 var(--cb-font-semibold); color: var(--cb-text); letter-spacing: 1.2px; text-transform: uppercase;}
.hm-section-label .more{font: 400 13px/1 var(--cb-font-regular); color:var(--cb-link-text,var(--cb-link)); letter-spacing: 1.5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 10px 0; transition: opacity 140ms ease;}
.hm-section-label .more:hover{opacity: .8; text-decoration: none;}
.hm-section-label.bg{background: transparent;}
.pp-more{background: transparent; padding-bottom: 12px;}
.pp-more .hm-section-label.bg{background: transparent;}
.pp-breadcrumbs{display: flex; gap: 6px; padding: 12px 16px 0; font: 400 11px/1 var(--cb-font-regular); letter-spacing: .4px; color: var(--cb-muted); margin: 0; background: transparent;}
.pp-breadcrumbs li{list-style: none;}
.pp-breadcrumbs li + li::before{content: "›"; margin-right: 6px; color: var(--cb-muted);}
.pp-breadcrumbs a{color: var(--cb-text-sec, var(--cb-muted));}
.pp-breadcrumbs a:hover{color:var(--cb-link-text,var(--cb-link));}
.pp-seller{background: transparent; padding: 14px 16px;}
.pp-seller-card{display: flex; align-items: center; gap: 12px;}
.pp-seller-avatar{width: 44px; height: 44px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #e8a76b, #a85c3a); border: 1px solid var(--cb-border); display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 16px/1 var(--cb-font-bold); overflow: hidden;}
.pp-seller-avatar[data-cb-avatar]{background: transparent !important; padding: 0;}
.pp-seller-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.pp-seller-info{flex: 1; min-width: 0;}
.pp-seller-name{font: 600 15px/1.2 var(--cb-font-semibold); color: var(--cb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-seller-meta{margin-top: 4px; display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); white-space: nowrap;}
.pp-seller-meta b{color: var(--cb-sec, var(--cb-text-sec)); font-weight: 600;}
.pp-seller-visit{height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cb-link); background: transparent; color:var(--cb-link-text,var(--cb-link)); cursor: pointer; font: 400 11px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase; flex: none; display: inline-flex; align-items: center; transition: background-color 160ms ease;}
.pp-seller-visit:hover{background: rgba(64,179,222,.08); text-decoration: none;}
.pp-category{background: transparent; padding: 4px 16px 14px; border-bottom: 1px solid var(--cb-border); font: 400 12px/18px var(--cb-font-regular); color: var(--cb-muted);}
.pp-category a{color:var(--cb-link-text,var(--cb-link));}
.pp-category .sub a{color: var(--cb-text-sec, var(--cb-muted));}
.pp-gallery{background: transparent; padding: 16px 16px 14px;}
/* QA item 269: the frame is the cover's own shape (`--pp-cover-ratio`, set from the cover's size; 16:9
   without one), held to the viewport's height, and every slide is drawn whole inside it: a portrait
   cover was cropped to 16:9. */
.pp-gallery-frame{position: relative; aspect-ratio: var(--pp-cover-ratio, 16 / 9); max-height: 85vh; border-radius: 12px; overflow: hidden; background: #0e1524; box-shadow: 0 4px 12px rgba(20,23,33,.16);}
.pp-gallery-slide{position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 350ms ease; background-size: contain; background-repeat: no-repeat; background-position: center;}
.pp-gallery-slide.is-active{opacity: 1; pointer-events: auto;}
.pp-gallery-slide img{width: 100%; height: 100%; object-fit: cover;}
.pp-price-stamp{position: absolute; left: 0; bottom: 16px; display: inline-flex; align-items: baseline; gap: 8px; background: rgba(20,23,33,.86); color: #fff; padding: 10px 16px 10px 14px; border-radius: 0 4px 4px 0; box-shadow: 0 2px 6px rgba(0,0,0,.25);}
.pp-price-stamp .was{font: 400 13px/1 var(--cb-font-regular); color: rgba(255,255,255,.5); text-decoration: line-through;}
.pp-price-stamp .now{font: 700 18px/1 var(--cb-font-bold);}
.pp-gallery-dots{position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none;}
.pp-gallery-dot{width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.5); transition: all 200ms ease;}
.pp-gallery-dot.is-active{width: 18px; background: #fff;}
.pp-thumbs{position: relative; margin-top: 10px;}
.pp-thumbs-rail{display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;}
.pp-thumbs-fade{position: absolute; top: 0; bottom: 2px; width: 36px; pointer-events: none; transition: opacity 200ms ease;}
.pp-thumbs-fade-r{right: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--cb-panel) 100%);}
.pp-thumbs-fade-l{left: 0; width: 28px; background: linear-gradient(to left, rgba(255,255,255,0) 0%, var(--cb-panel) 100%); opacity: 0;}
.pp-thumbs.is-scrolled-end .pp-thumbs-fade-r{opacity: 0;}
.pp-thumbs.is-scrolled-start .pp-thumbs-fade-l{opacity: 1;}
.pp-thumb{flex: none; width: 56px; height: 46px; border-radius: 6px; padding: 0; cursor: pointer; background: #0a0c12; background-size: cover; background-position: center; border: 1px solid var(--cb-border); opacity: .75; transition: opacity 160ms ease, border-color 160ms ease;}
.pp-thumb.is-active{border: 2px solid var(--cb-link); opacity: 1;}
.pp-header{background: transparent; padding: 4px 16px 16px;}
.pp-header h1{margin: 0; font: 600 22px/28px var(--cb-font-semibold); color: var(--cb-text); text-wrap: pretty; letter-spacing: -.1px;}
.pp-rating-row{margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--cb-font-regular); color: var(--cb-muted);}
.pp-stars-amber{display: inline-flex; align-items: center; gap: 2px; color: #e8a93b;}
.pp-stars-amber svg{width: 18px; height: 18px;}
.pp-rating-score{color: var(--cb-text); font-weight: 600;}
.pp-bottom-row{margin-top: 14px; display: flex; align-items: center; justify-content: space-between;}
.pp-wishlist{display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; padding: 0; font: 400 13px/1 var(--cb-font-regular); color:var(--cb-link-text,var(--cb-link)); letter-spacing: .2px; transition: color 160ms ease;}
.pp-wishlist svg{width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill 160ms ease, stroke 160ms ease;}
.pp-wishlist[aria-pressed="true"]{color: var(--cb-heart, #ff5a5f);}
.pp-wishlist[aria-pressed="true"] svg{fill: currentColor; stroke: currentColor;}
.pp-stat-likes svg{fill: var(--cb-muted) !important; stroke: none !important;}
.pp-stats{display: inline-flex; align-items: center; gap: 14px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);}
.pp-stats > span{display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;}
.pp-stats svg{width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.pp-stat-rotator{position: relative; display: inline-flex; align-items: center; height: 16px; min-width: 84px; justify-content: flex-end;}
.pp-stat-rot{position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity 280ms cubic-bezier(.22,.61,.36,1), transform 280ms cubic-bezier(.22,.61,.36,1); pointer-events: none;}
.pp-stat-rot.is-active{opacity: 1; transform: translateY(0); pointer-events: auto;}
.pp-stat-rot[data-stat="likes"] svg{fill: currentColor; stroke: none;}
.pp-buy{background: transparent; padding: 8px 16px 18px; position: relative;}
.pp-buy::after{content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(to bottom, var(--cb-panel) 0%, var(--cb-bg) 100%); pointer-events: none;}
.pp-license-toggle{width: 100%; display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 14px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px; color: var(--cb-text); font: 400 14px/1 var(--cb-font-regular); cursor: pointer;}
.pp-license-toggle .lbl{display: inline-flex; align-items: center; gap: 10px;}
.pp-license-toggle .kind{font: 600 13px/1 var(--cb-font-semibold); color: var(--cb-muted); letter-spacing: 1px; text-transform: uppercase;}
.pp-license-toggle .price{color: var(--cb-text); font-weight: 600;}
.pp-license-toggle .chev{color: var(--cb-muted); transition: transform 180ms ease;}
.pp-license-toggle[aria-expanded="true"] .chev{transform: rotate(180deg);}
.pp-license-menu{margin-top: 6px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px; overflow: hidden; display: none;}
.pp-license-menu.is-open{display: block;}
.pp-license-option{width: 100%; text-align: left; padding: 12px 14px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--cb-border);}
.pp-license-option:last-of-type{border-bottom: 0;}
.pp-license-option.is-selected{background: var(--cb-chip-active);}
.pp-license-option .head{font: 600 13px/1.3 var(--cb-font-semibold); color: var(--cb-text);}
.pp-license-option .desc{margin-top: 2px; font: 400 12px/1.3 var(--cb-font-regular); color: var(--cb-muted);}
.pp-license-option .opt-price{font: 700 14px/1 var(--cb-font-bold); color: var(--cb-text); flex: none;}
/* Pay what you want (tester-r's Sales & coupons round): the handoff has no buyer side for it, so the
   field takes the licence toggle's own box. */
.pp-pwyw{margin-top: 12px;}
.pp-pwyw[hidden]{display: none;}
.pp-pwyw-label{display: block; margin-bottom: 6px; font: 600 13px/1 var(--cb-font-semibold); color: var(--cb-muted); letter-spacing: 1px; text-transform: uppercase;}
.pp-pwyw-field{display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 14px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px;}
.pp-pwyw-field:focus-within{border-color: var(--cb-link);}
.pp-pwyw-currency{font: 600 16px/1 var(--cb-font-semibold); color: var(--cb-muted);}
.pp-pwyw-input{flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--cb-text); font: 600 16px/1 var(--cb-font-semibold);}
.pp-pwyw-input[aria-invalid="true"]{color: var(--cb-danger, #ec4d4d);}
.pp-pwyw-hint{margin: 6px 0 0; font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted);}
.pp-pwyw-error{margin: 4px 0 0; font: 600 12px/1.4 var(--cb-font-semibold); color: var(--cb-danger, #ec4d4d);}
.pp-license-more{display: block; padding: 10px 14px; background: transparent; color:var(--cb-link-text,var(--cb-link)); font: 400 12px/1 var(--cb-font-regular); border-top: 1px solid var(--cb-border);}
.pp-buy-now{margin-top: 12px; width: 100%; height: 56px; border-radius: 999px; border: none; background: var(--cb-commit); color: #fff; cursor: pointer; font: 700 15px/1 var(--cb-font-bold); letter-spacing: 1.6px; text-transform: uppercase; box-shadow: 0 4px 12px rgba(123,193,120,.35); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: filter 160ms ease, transform 140ms ease;}
.pp-buy-now:hover{filter: brightness(1.06); transform: translateY(-1px); text-decoration: none; color: #fff;}
.pp-buy-now:active{transform: translateY(0); filter: brightness(.95);}
button.pp-add-cart{margin-top: 10px; width: 100%; height: 46px; border-radius: 999px; background: transparent; border: 1px solid var(--cb-border-hard); color: var(--cb-text); cursor: pointer; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; box-shadow: none;}
button.pp-add-cart:hover{transform: none; filter: none; border-color: var(--cb-link); background: rgba(64,179,222,.05);}
button.pp-add-cart svg{width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;}
button.pp-add-cart[data-cart-state="added"]{background: rgba(123,193,120,.12); border-color: var(--cb-commit); color: var(--cb-commit); box-shadow: none;}
button.pp-add-cart[data-cart-state="added"]:hover{background: rgba(123,193,120,.12); border-color: var(--cb-commit);}
button.pp-add-cart[data-cart-state="remove-hover"]{background: rgba(217,83,79,.10); border-color: var(--cb-error); color: var(--cb-error); box-shadow: none;}
button.pp-add-cart .cart-glyph-add, button.pp-add-cart .cart-glyph-check, button.pp-add-cart .cart-glyph-x{display: none;}
button.pp-add-cart[data-cart-state="add"] .cart-glyph-add, button.pp-add-cart:not([data-cart-state]) .cart-glyph-add{display: inline;}
button.pp-add-cart[data-cart-state="added"] .cart-glyph-check{display: inline;}
button.pp-add-cart[data-cart-state="remove-hover"] .cart-glyph-x{display: inline;}
button.pp-add-cart[data-cart-state="added"] .pp-add-cart-label::before{content: "In your cart";}
button.pp-add-cart[data-cart-state="added"] .pp-add-cart-label{font-size: 0; letter-spacing: 0;}
button.pp-add-cart[data-cart-state="added"] .pp-add-cart-label::before{font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase;}
button.pp-add-cart[data-cart-state="remove-hover"] .pp-add-cart-label{font-size: 0; letter-spacing: 0;}
button.pp-add-cart[data-cart-state="remove-hover"] .pp-add-cart-label::before{content: "Remove from cart"; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase;}
.pp-volume{margin-top: 14px; padding: 16px 16px 14px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 10px;}
.pp-volume-head{display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px;}
.pp-volume-head-text{display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 1;}
.pp-volume-head-icon{width: 26px; height: 26px; border-radius: 50%; background: #e8f5ed; color: #1f7a3e; display: inline-flex; align-items: center; justify-content: center; flex: none;}
.pp-volume-head-icon svg{width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;}
.pp-volume-headline{font: 600 14px/1.35 var(--cb-font-semibold); color: var(--cb-text); text-wrap: pretty;}
.pp-volume-amt{font: 500 12px/1 var(--cb-font-regular); color: var(--cb-muted); flex: none; white-space: nowrap;}
.pp-volume-bar{position: relative; height: 8px; margin-bottom: 4px;}
.pp-volume-track{position: absolute; inset: 0; border-radius: 999px; background: var(--cb-border);}
.pp-volume-proj{position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: repeating-linear-gradient(45deg, #b6e6c7 0 6px, #cfeed9 6px 12px);}
.pp-volume-fill{position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #2ca85f, #34c46f);}
.pp-volume-marker{position: absolute; top: -2px; width: 2px; height: 12px; border-radius: 1px; transform: translateX(-1px); background: var(--cb-muted); opacity: .35;}
.pp-volume-marker.is-reached{background: #1c7a44; opacity: 1;}
.pp-volume-marker.is-projected{background: #5cb27c; opacity: .9;}
.pp-volume-labels{position: relative; height: 18px; margin-bottom: 14px; margin-top: 8px;}
.pp-volume-label{position: absolute; font: 600 14px/1 var(--cb-font-semibold); color: var(--cb-muted); letter-spacing: .2px; white-space: nowrap;}
.pp-volume-label.is-reached{font-weight: 700; color: #1c7a44;}
.pp-volume-sub{margin-top: 8px; font: 400 13px/19.5px var(--cb-font-regular); color: var(--cb-muted);}
.pp-paypal{margin-top: 14px; padding: 10px 14px; background: transparent; border: 1px solid var(--cb-border); border-radius: 8px; display: flex; align-items: center; gap: 10px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-text-sec, var(--cb-muted));}
/* PayPal's light badge, in both themes (QA item 145): the handoff's navy badge (#003087) under its
   navy wordmark drew the word invisible. White with a faint navy edge puts it at 12.6:1. */
.pp-paypal .badge{flex: none; padding: 4px 6px; border-radius: 3px; background: #fff; color: #003087; box-shadow: inset 0 0 0 1px rgba(0,48,135,.18); font: 700 10px/1 var(--cb-font-bold);}
.pp-paypal b{color: var(--cb-text);}
.pp-human{margin-top: 8px; padding: 10px 12px; background: rgba(123,193,120,.08); border: 1px solid rgba(123,193,120,.34); border-radius: 8px; display: flex; align-items: center; gap: 10px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-text-sec, var(--cb-muted));}
.pp-human-icon{flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(123,193,120,.18); color: #5fa756; display: inline-flex; align-items: center; justify-content: center;}
.pp-human-icon svg{width: 16px; height: 16px;}
.pp-human-body{min-width: 0;}
.pp-human-body b{color: var(--cb-text); font-weight: 700;}
.pp-tabs-wrap{background: transparent; border-top: 1px solid var(--cb-border); border-bottom: 1px solid var(--cb-border);}
.pp-tabs{display: flex; gap: 24px; background: transparent; margin: 0; border: none; border-radius: 0; padding: 0 16px; position: relative;}
.pp-tabs.has-indicator .pp-tab[aria-selected="true"]::after{display: none;}
.pp-tab{flex: none; height: 48px; display: inline-flex; align-items: center; background: transparent; border: none; cursor: pointer; padding: 0; border-radius: 0; color: var(--cb-muted); font: 400 13px/1 var(--cb-font-regular); letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; position: relative; transition: color 200ms var(--cb-ease);}
.pp-tab[aria-selected="true"]{background: transparent; color: var(--cb-text); box-shadow: none;}
.pp-tab[aria-selected="true"]::after{content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; background: var(--cb-link); border-radius: 2px 2px 0 0; animation: pp-tab-underline-in 220ms cubic-bezier(.32,.72,.24,1);}
.pp-desc{background: transparent; padding: 20px 16px 8px; position: relative;}
.pp-desc-body{position: relative; max-height: 280px; overflow: hidden; transition: max-height 320ms cubic-bezier(.32,.72,.24,1); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 64px), transparent 100%);}
.pp-desc-body.is-expanded{-webkit-mask-image: none; mask-image: none;}
.pp-desc-body h3{font: 600 15px/1.2 var(--cb-font-semibold); color: var(--cb-text); margin: 18px 0 8px;}
.pp-desc-body h3:first-child{margin-top: 0;}
.pp-desc-body p{font: 400 14px/22px var(--cb-font-regular); color: var(--cb-text); margin: 0 0 12px;}
.pp-desc-body ul{margin: 0 0 12px; padding: 0; list-style: disc inside; font: 400 14px/22px var(--cb-font-regular); color: var(--cb-text);}
.pp-desc-body ul li{padding: 2px 0;}
.pp-desc-fade{display: none;}
.pp-desc-toggle{position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; background: transparent; border: 1px solid var(--cb-border); border-radius: 8px; cursor: pointer; margin: 6px 0 0; padding: 0; font: 600 12px/1 var(--cb-font-semibold); color:var(--cb-link-text,var(--cb-link)); letter-spacing: 1.6px; text-transform: uppercase; transition: background-color 160ms ease, border-color 160ms ease;}
.pp-desc-toggle:hover{background: rgba(64,179,222,.06); border-color: var(--cb-link);}
.pp-desc-toggle svg{width: 10px; height: 10px; fill: var(--cb-link); transition: transform 220ms ease;}
.pp-desc-toggle[aria-expanded="true"] svg{transform: rotate(180deg);}
.pp-social{background: transparent; padding: 14px 16px 18px;}
.pp-social-row{display: flex; gap: 8px; margin-bottom: 10px;}
.pp-social-btn{flex: 1; height: 42px; padding: 0 12px; border-radius: 6px; border: none; background: transparent; color: #fff; font: 700 13px/1 var(--cb-font-bold); letter-spacing: .6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: filter 160ms ease;}
.pp-social-btn:hover{filter: brightness(1.06); text-decoration: none; color: #fff;}
.pp-social-btn.is-fb{background: #1877F2;}
.pp-social-btn.is-x{background: #000;}
.pp-social-glyph{font: 700 16px/1 Georgia, "Times New Roman", serif;}
.pp-social-btn.is-x .pp-social-glyph{font-family: var(--cb-font-bold); font-size: 14px;}
.pp-copylink{display: flex; align-items: stretch; height: 42px; border-radius: 6px; border: 1px solid var(--cb-border); background: var(--cb-card); overflow: hidden;}
.pp-copylink-url{flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 12px; font: 500 13px/1 var(--cb-font-regular); color: var(--cb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-copylink-btn{flex: none; padding: 0 14px; background: transparent; color:var(--cb-link-text,var(--cb-link)); border: none; border-left: 1px solid var(--cb-border); cursor: pointer; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;}
.pp-copylink-btn svg{width: 12px; height: 12px;}
.pp-copylink-btn .pp-copy-check{display: none;}
.pp-copylink-btn.is-copied{background: var(--cb-commit); color: #fff;}
.pp-copylink-btn.is-copied .pp-copy-icon{display: none;}
.pp-copylink-btn.is-copied .pp-copy-check{display: inline;}
.pp-payments{margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.pp-payments-label{font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); margin-right: 4px;}
.pp-pay{height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font: 700 9px/1 var(--cb-font-bold); letter-spacing: .4px;}
.pp-report-row{margin-top: 14px; text-align: center;}
.pp-report{font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); text-decoration: none; border-bottom: 1px dotted var(--cb-muted); padding-bottom: 1px;}
.pp-report:hover{color: var(--cb-text); border-bottom-color: var(--cb-text); text-decoration: none;}
.pp-files{background: transparent; padding: 6px 16px 20px;}
.pp-files-head{font: 600 15px/1.2 var(--cb-font-semibold); color: var(--cb-text); letter-spacing: .1px; margin: 0 0 4px;}
.pp-files-sub{margin: 0 0 12px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted);}
.pp-files-list{background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 12px; overflow: hidden;}
.pp-file{display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: transparent; border: 0; border-radius: 0; margin: 0; position: relative;}
.pp-file + .pp-file::before{content: ""; position: absolute; left: 56px; right: 14px; top: 0; height: 1px; background: var(--cb-border);}
.pp-file-icon{flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;}
.pp-file-icon svg{width: 30px; height: 30px;}
.pp-file-body{flex: 1; min-width: 0;}
.pp-file-name{font: 600 14px/1.3 var(--cb-font-semibold); color: var(--cb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-file-size{font: 400 13px/18px var(--cb-font-regular); color: var(--cb-muted); margin-top: 4px;}
.pp-files-more{display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 14px 14px; background: transparent; border: 0; border-top: 1px solid var(--cb-border); cursor: pointer; font: 600 13px/1 var(--cb-font-semibold); color:var(--cb-link-text,var(--cb-link)); letter-spacing: .2px;}
.pp-files-more .pp-files-more-meta{color: var(--cb-muted); font-weight: 400; margin-left: 6px;}
.pp-files-more .pp-files-more-meta[hidden]{display: none;}
.pp-files-more svg{width: 12px; height: 12px; margin-left: 6px; transition: transform 200ms ease; fill: var(--cb-link);}
.pp-files-more[aria-expanded="true"] svg{transform: rotate(180deg);}
.cb-comments{background: transparent; padding: 8px 16px 28px;}
.cb-comments-composer{width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 10px; cursor: pointer; text-align: left; margin: 0 0 4px; transition: border-color 160ms ease, background-color 160ms ease;}
.cb-comments-composer:hover{border-color: var(--cb-link); background: rgba(64,179,222,.04);}
.cb-comments-composer .cb-avatar{width: 32px; height: 32px; font-size: 12px;}
.cb-comments-composer-hint{flex: 1; min-width: 0; font: 400 13px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comments-composer-open{background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 10px; padding: 12px;}
.cb-comments-composer-row{display: flex; gap: 10px; align-items: flex-start;}
.cb-comments-composer-row .cb-avatar{width: 32px; height: 32px; font-size: 12px;}
.cb-comments-textarea{flex: 1; min-width: 0; resize: vertical; background: transparent; border: none; color: var(--cb-text); font: 400 14px/22px var(--cb-font-regular); outline: none; min-height: 56px;}
.cb-comments-composer-actions{display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--cb-border);}
.cb-comments-actions-spacer{flex: 1;}
.cb-comments-btn-attach{display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--cb-muted); cursor: pointer; font: 500 12px/1 var(--cb-font-semibold); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;}
.cb-comments-btn-attach:hover{background: transparent; border-color: var(--cb-border); color:var(--cb-link-text,var(--cb-link));}
.cb-comments-btn-attach:disabled{opacity: .5; cursor: not-allowed;}
.cb-comments-attach-counter{display: inline-flex; align-items: center; margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: var(--cb-link); color: #fff; font: 700 9px/1 var(--cb-font-bold); letter-spacing: .4px;}
.cb-comments-btn-attach svg{display: inline-block;}
.cb-comments-attachments{display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px;}
.cb-comments-attachment{position: relative; width: 84px; height: 84px; border-radius: 8px; border: 1px solid var(--cb-border); background-size: cover; background-position: center; overflow: visible;}
.cb-comments-attachment-remove{position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #1a2229; color: #fff; border: 1px solid var(--cb-border); cursor: pointer; font: 700 14px/1 var(--cb-font-bold); display: inline-flex; align-items: center; justify-content: center; padding: 0;}
.cb-comments-btn-primary{height: 36px; padding: 0 18px; border-radius: 999px; background: var(--cb-link); color: #fff; border: none; cursor: pointer; font: 700 11px/1 var(--cb-font-bold); letter-spacing: 1.4px; text-transform: uppercase;}
.cb-comments-btn-primary:hover:not(:disabled){filter: brightness(1.05);}
.cb-comments-btn-primary:disabled{background: var(--cb-border); cursor: not-allowed;}
.cb-comments-btn-ghost{height: 36px; padding: 0 16px; border-radius: 999px; background: transparent; border: 1px solid var(--cb-border); color: var(--cb-text); cursor: pointer; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase;}
.cb-comments-btn-ghost:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link));}
.cb-comments-filter{display: flex; align-items: center; gap: 16px; padding: 18px 0 12px; position: relative;}
border-bottom: 1px solid var(--cb-border); position: relative; } .cb-comments-filter-label{font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text); letter-spacing: 1px; text-transform: uppercase; padding-bottom: 4px; border-bottom: 2px solid var(--cb-link);}
.cb-comments-sort{background: transparent; border: none; cursor: pointer; padding: 0 0 4px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); display: inline-flex; align-items: center; gap: 6px;}
.cb-comments-sort svg{transition: transform 180ms ease;}
.cb-comments-sort[aria-expanded="true"] svg{transform: rotate(180deg);}
.cb-comments-sort-menu{position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(20,23,33,.12); padding: 4px 0; z-index: 10; min-width: 160px;}
.cb-comments-sort-menu[hidden]{display: none;}
.cb-comments-sort-menu button{display: block; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: none; cursor: pointer; color: var(--cb-text); font: 400 13px/1 var(--cb-font-regular); transition: background .12s ease, color .12s ease;}
.cb-comments-sort-menu button:hover{background: var(--cb-bg);}
.cb-comments-sort-menu button.is-active{background: var(--cb-link); color: #fff;}
.cb-comments-list{list-style: none; padding: 0; margin: 0;}
.cb-thread + .cb-thread{margin-top: 6px;}
.cb-comment{display: block; padding-top: 18px;}
.cb-comment[data-depth="1"], .cb-comment[data-depth="2"]{padding-top: 12px;}
.cb-comment[data-depth="1"] .cb-avatar, .cb-comment[data-depth="2"] .cb-avatar, .cb-comment[data-depth="1"] .cb-comment-avatar, .cb-comment[data-depth="2"] .cb-comment-avatar{width: 30px; height: 30px;}
.cb-comment-body{min-width: 0;}
.cb-comment-head{display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px;}
.cb-comment-meta{flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;}
.cb-comment-author{font: 600 13px/1.2 var(--cb-font-semibold); color:var(--cb-link-text,var(--cb-link));}
.cb-comment-date{margin-top: 3px; width: 100%; font: 400 12px/16px var(--cb-font-regular); color: var(--cb-muted);}
.cb-comment-badge{display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 3px; background: var(--cb-link); color: #fff; font: 700 9px/1 var(--cb-font-bold); letter-spacing: .4px; text-transform: uppercase;}
.cb-comment-badge.is-seller{background: var(--cb-link);}
.cb-comment-badge.is-customer{background: var(--cb-commit);}
.cb-comment-rating{display: inline-flex; align-items: center; gap: 1px;}
.cb-comment-menu{flex: none; background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 4px; color: var(--cb-muted); display: inline-flex; margin-top: -2px; transition: background-color 160ms ease;}
.cb-comment-menu:hover{background: var(--cb-card);}
.cb-comment-menu[aria-expanded="true"]{background: var(--cb-card);}
.cb-comment-menu-wrap{position: relative; flex: none;}
.cb-comment-menu-dropdown{position: absolute; top: calc(100% + 4px); right: 0; min-width: 140px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.16); z-index: 5; overflow: hidden;}
.cb-comment-menu-dropdown button{display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: none; cursor: pointer; color: var(--cb-text); font: 500 13px/1 var(--cb-font-semibold);}
.cb-comment-menu-dropdown button:hover{background: rgba(64,179,222,.08);}
.cb-comment-menu-dropdown button.is-danger{color: var(--cb-error);}
.cb-comment-menu-dropdown button.is-danger:hover{background: rgba(217,83,79,.08);}
.cb-comment-menu-dropdown svg{width: 14px; height: 14px;}
.cb-comment.is-deleted .cb-comment-text, .cb-comment.is-deleted .cb-comment-image, .cb-comment.is-deleted .cb-comment-actions{display: none;}
.cb-comment.is-deleted .cb-comment-deleted{display: block; font: 400 12px/18px var(--cb-font-regular); font-style: italic; color: var(--cb-muted); padding: 4px 0 12px;}
.cb-comment-deleted{display: none;}
.cb-comment-text{font: 400 14px/21px var(--cb-font-regular); color: var(--cb-text); text-wrap: pretty; white-space: pre-wrap; margin: 0 0 10px;}
.cb-comment-images{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; max-width: 280px; margin: 0 0 12px;}
.cb-comment-images .cb-comment-image{width: 100%; max-width: none; margin: 0; aspect-ratio: 1 / 1; border-radius: 6px;}
.cb-comment-images .cb-comment-image-label{display: none;}
.cb-comment-image{display: block; width: 100%; max-width: 120px; margin: 0 0 12px; padding: 0; border-radius: 8px; border: 1px solid var(--cb-border); background-size: cover; background-position: center; position: relative; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3;}
.cb-comment-image-label{font-size: 10px !important; padding: 5px 8px !important;}
button.cb-comment-image{font: inherit; color: inherit;}
.cb-comment-image:hover{border-color: var(--cb-link);}
.cb-comment-image-label{position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); color: #fff; font: 500 11px/1.2 var(--cb-font-regular);}
.cb-comment-actions{display: flex; align-items: center; gap: 16px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comment-vote{display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--cb-muted); font: inherit;}
.cb-comment-vote.is-active[data-vote="up"]{color: var(--cb-commit);}
.cb-comment-vote.is-active[data-vote="down"]{color: #d97757;}
.cb-comment-vote.is-active svg{fill: currentColor; stroke: currentColor;}
.cb-comment-reply{background: transparent; border: none; cursor: pointer; padding: 0; color:var(--cb-link-text,var(--cb-link)); font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase;}
.cb-comments-reply-box{margin-top: 10px; padding: 10px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px;}
.cb-comments-reply-box textarea{width: 100%; min-height: 72px; background: transparent; border: none; outline: none; color: var(--cb-text); font: 400 14px/20px var(--cb-font-regular); resize: none; padding: 6px 4px;}
.cb-comments-reply-box-actions{display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--cb-border);}
.cb-replies-toggle{display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; padding: 0; margin: 12px 0 0 46px; color:var(--cb-link-text,var(--cb-link)); font: 600 12px/1 var(--cb-font-semibold);}
.cb-replies-toggle svg{transition: transform 180ms ease;}
.cb-replies-toggle[aria-expanded="true"] svg{transform: rotate(180deg);}
.cb-replies{list-style: none; margin-left: 46px; padding-left: 14px; border-left: 2px solid var(--cb-border);}
.cb-replies li{list-style: none;}
.cb-comments-pager{display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--cb-border);}
.cb-comments-pager-btn{background: transparent; border: 1px solid var(--cb-border); border-radius: 999px; height: 44px; padding: 0 22px; cursor: pointer; color: var(--cb-text); font: 600 13px/1 var(--cb-font-semibold); letter-spacing: .4px; transition: border-color 160ms ease, color 160ms ease;}
.cb-comments-pager-btn:hover:not(:disabled){border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link));}
.cb-comments-pager-btn:disabled{color: var(--cb-muted); cursor: not-allowed; opacity: .6;}
.cb-comments-pager-page{font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comments-pager-page b{color: var(--cb-text); font-weight: 700;}
.cb-comments-pager-meta{text-align: center; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); margin: 8px 0 0;}
.cb-comment-avatar{flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 600 13px/1 var(--cb-font-semibold); background: linear-gradient(135deg, #7c8edb, #3a4ea3);}
.cb-comment-avatar[data-cb-avatar]{background: transparent; padding: 0;}
.cb-comment-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.cb-threads{list-style: none; padding: 0; margin: 0;}
.cb-comments-composer-collapsed{width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 8px 0 0; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 999px; cursor: pointer; text-align: left; transition: border-color 160ms ease, background-color 160ms ease;}
.cb-comments-composer-collapsed:hover{border-color: var(--cb-link); background: rgba(64,179,222,.04);}
.cb-comments-composer-avatar{flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3fb6a8, #1d6f6c); color: #fff; font: 600 12px/1 var(--cb-font-semibold);}
.cb-comments-composer-avatar[data-cb-avatar]{background: transparent; padding: 0;}
.cb-comments-composer-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.cb-comments-composer-placeholder{flex: 1; min-width: 0; font: 400 13px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comments-filter-sort{background: transparent; border: none; cursor: pointer; padding: 4px 0; color: var(--cb-text); font: 400 13px/1 var(--cb-font-regular); display: inline-flex; align-items: center; gap: 6px;}
.cb-comments-filter-sort svg{transition: transform 180ms ease;}
.cb-comments-filter-sort[aria-expanded="true"] svg{transform: rotate(180deg);}
.cb-comment-foot{display: flex; align-items: center; gap: 18px; margin-top: 8px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comment-react{display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--cb-muted); font: inherit; transition: color 160ms ease;}
.cb-comment-react svg{transition: transform 160ms ease;}
.cb-comment-react:hover{color: #ff4d6d;}
.cb-comment-react:hover svg{transform: scale(1.08);}
.cb-comment-react[aria-pressed="true"]{color: #ff4d6d;}
.cb-comment-react[aria-pressed="true"] svg{fill: currentColor; stroke: currentColor;}
.cb-comment-toggle-replies{display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 48px; background: transparent; border: none; cursor: pointer; color:var(--cb-link-text,var(--cb-link)); font: 600 12px/1 var(--cb-font-semibold); padding: 6px 0;}
.cb-comment-toggle-replies:hover{text-decoration: underline;}
.cb-comment-attachments{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px;}
.cb-comment-attachments[data-count="1"]{grid-template-columns: minmax(0, 200px);}
.cb-comment-attachments[data-count="2"]{grid-template-columns: repeat(2, minmax(0, 1fr));}
.cb-comment-attachments[data-count="3"]{grid-template-columns: repeat(3, minmax(0, 1fr));}
.cb-comment-attach{display: block; background: var(--cb-card) center/cover no-repeat; border-radius: 6px; aspect-ratio: 1; border: 1px solid var(--cb-border); transition: border-color 160ms ease, transform 140ms ease;}
.cb-comment-attach:hover{border-color: var(--cb-link); transform: translateY(-1px);}
.cb-lightbox{position: fixed; inset: 0; background: rgba(8,12,16,.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 48px 16px; animation: cbLbFade 160ms ease-out;}
.cb-lightbox-close{position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;}
.cb-lightbox-close:hover{background: rgba(255,255,255,.14);}
.cb-lightbox-stage{max-width: 100%; width: 100%; height: 100%; min-height: 0; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;}
.cb-lightbox-image{width: auto; max-width: 100%; max-height: 100%; background-size: cover; background-position: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.55);}
.cb-lightbox-caption{color: rgba(255,255,255,.8); font: 500 12px/1.4 var(--cb-font-regular); letter-spacing: .2px; text-align: center; max-width: 480px;}
.pp-related{background: transparent; padding-bottom: 16px; position: relative;}
.pp-related::before{content: ""; display: block; height: 8px; background: linear-gradient(to bottom, var(--cb-panel) 0%, var(--cb-bg) 100%);}
.pp-stickybar{position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 480px; background: var(--cb-panel); border-top: 1px solid var(--cb-border); padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; transform: translateY(110%); transition: transform 240ms ease; z-index: 30; box-shadow: 0 -4px 16px rgba(20,23,33,.10);}
.pp-stickybar.is-shown{transform: translateY(0);}
.pp-stickybar-text{flex: 1; min-width: 0;}
.pp-stickybar-price{font: 700 16px/1 var(--cb-font-bold); color: var(--cb-text);}
.pp-stickybar-sub{margin-top: 3px; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-stickybar-cta{flex: none; height: 46px; padding: 0 22px; border-radius: 999px; background: var(--cb-commit); color: #fff; border: none; cursor: pointer; font: 700 13px/1 var(--cb-font-bold); letter-spacing: 1.4px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 12px rgba(123,193,120,.35); transition: filter 160ms ease, transform 140ms ease;}
.pp-stickybar-cta:hover{filter: brightness(1.06); transform: translateY(-1px); color: #fff; text-decoration: none;}
.pp-stickybar-cta:active{transform: translateY(0); filter: brightness(.95);}
.cb-stars{position: relative; display: inline-flex; font-size: 15px; line-height: 1; color: #dadde4; letter-spacing: 1px;}
.cb-stars::before{content: "\2605 \2605 \2605 \2605 \2605";}
.cb-stars-fill{position: absolute; top: 0; left: 0; bottom: 0; color: #f5a623; overflow: hidden; width: var(--fill, 100%); white-space: nowrap; letter-spacing: 1px;}
.cb-stars-fill::before{content: "\2605 \2605 \2605 \2605 \2605";}
.hm-tab-indicator{position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--cb-link); border-radius: 2px; pointer-events: none; transform: translate3d(0, 0, 0); transition: transform 320ms cubic-bezier(.32,.72,.24,1), width 320ms cubic-bezier(.32,.72,.24,1); will-change: transform, width;}
[data-cb-avatar-kind="store"]{border-radius: 0 !important; overflow: visible !important;}
[data-cb-avatar-kind="store"]:has(img){overflow: hidden !important; border-radius: 18% !important;}
[data-cb-avatar-kind="store"] img{border-radius: inherit !important;}
.cb-num-row{display: flex; align-items: stretch; border: 1px solid var(--cb-border); border-radius: 6px; background: var(--cb-card); overflow: hidden;}
.cb-num-row.is-off{background: transparent; opacity: .6;}
.cb-num-prefix{display: inline-flex; align-items: center; justify-content: center; width: 48px; padding: 0 6px; border-right: 1px solid var(--cb-border); font: 500 11px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: .5px; background: var(--cb-card); flex-shrink: 0;}
.cb-num-input{flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: none; background: transparent; color: var(--cb-text); font: 500 16px/1 var(--cb-font-regular); outline: none; -moz-appearance: textfield; box-sizing: border-box;}
.cb-num-input::-webkit-inner-spin-button, .cb-num-input::-webkit-outer-spin-button{-webkit-appearance: none; margin: 0;}
.cb-num-stepper{display: flex; align-items: stretch; background: transparent; flex-shrink: 0;}
.cb-num-stepper button{width: 38px; padding: 0; background: transparent; color: var(--cb-text); border: none; border-left: 1px solid var(--cb-border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}
.cb-num-stepper button:hover:not(:disabled){background: transparent;}
.cb-num-stepper button:disabled{color: var(--cb-muted); cursor: not-allowed;}
.cb-num-stepper svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;}
@keyframes pp-tab-underline-in { from { transform: scaleX(.55); opacity: .4; } to   { transform: scaleX(1); opacity: 1; } }
@keyframes cbLbFade { from { opacity: 0 } to { opacity: 1 } }
/* Purchase guidance must remain readable in both themes. */
:root .pp-owned-card-sub,:root .pp-tip-sub{color:var(--cb-sec)}

/* A sale and a stock limit in the buy box (tester-r's product-page round; v3-master's ruling, parity with
   master's cover stamp). The handoff draws neither on the page, only on the card. */
.pp-deal{margin:0 0 10px}
/* A registered buyer's e-mail link, signed out (r25 B2). */
.pp-signin-owned{box-sizing:border-box;width:min(1640px,calc(100% - 2 * var(--gut, 24px)));margin:16px auto 0;padding:12px 16px;border:1px solid var(--cb-link);border-radius:10px;background:rgba(64,179,222,.08);color:var(--cb-text);font:14px/1.45 var(--cb-font-regular)}
.pp-signin-owned-lead{font-family:var(--cb-font-semibold);font-weight:600}
.pp-signin-owned-link{color:var(--cb-link-text,var(--cb-link));font-weight:600;text-decoration:underline}
.pp-deal-off{display:inline-block;padding:5px 10px;border-radius:999px;background:#ec4d4d;color:#fff;font:700 11px/1 var(--cb-font-bold);letter-spacing:1px}
.pp-license-toggle .was,.pp-license-option .opt-was{margin-right:6px;color:var(--cb-muted);font-weight:400;text-decoration:line-through}
.pp-license-toggle .was[hidden]{display:none}
.pp-stock-left{margin:8px 0 0;text-align:center;font:600 12px/1.4 var(--cb-font-semibold);color:#ec4d4d}
/* A paused product's note from its seller, under Unavailable (M7). */
.pp-paused-note{margin:10px 0 0;text-align:center;font:13px/1.45 var(--cb-font-regular);color:var(--cb-text-sub,#5a6478)}

/* "Merge accounts?" for a guest purchase's link opened while signed in as someone else (the visitor sweep's PB6). */
.pp-merge-text{margin:0 0 10px;font:400 14px/1.5 var(--cb-font-regular);color:var(--cb-text);overflow-wrap:anywhere}
.pp-merge-error{margin:0 0 10px;font:600 13px/1.4 var(--cb-font-semibold);color:#d4524f}
.pp-merge-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.pp-merge-host{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent}
.pp-merge-host[hidden]{display:none}
.pp-merge-backdrop{position:absolute;inset:0;background:rgba(8,12,16,.45)}
.pp-merge-panel{position:relative;width:min(480px,calc(100vw - 32px));padding:22px 22px 20px;background:var(--cb-panel,var(--cb-card));color:var(--cb-text);border:1px solid var(--cb-border-hard);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.45)}
.pp-merge-title{margin:0 0 12px;font:700 18px/1.25 var(--cb-font-bold);color:var(--cb-text)}
.pp-merge-close{position:absolute;top:14px;right:12px;width:28px;height:28px;padding:0;background:transparent;border:0;cursor:pointer;color:var(--cb-muted)}
/* The page is not .dc-port, where the shared .cb-btn look lives, so the dialog's two buttons carry it here. */
.pp-merge-actions .cb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:999px;border:0;cursor:pointer;font:400 12px/1 var(--cb-font-regular);letter-spacing:1.6px;text-transform:uppercase;background:var(--cb-link);color:#fff;box-shadow:0 4px 14px rgba(64,179,222,.34)}
.pp-merge-actions .cb-btn-ghost{background:transparent;color:var(--cb-text);border:1px solid var(--cb-border-hard);box-shadow:none}
.pp-merge-actions .cb-btn:disabled{opacity:.6;cursor:default}
/* PB11: a corporate reader's price is per seat (v3--product--corporate-price). */
.pp-seats-note{margin:0 0 8px;font:600 12px/1.4 var(--cb-font-semibold);color:var(--cb-muted)}
/* Product page templates (dpt-). Layered over product.css + the dpp- page rules. */
/* ── wide layout: 1640 cap; buy box rises beside the hero ── */
.dpt-wrap.dpp-wrap{max-width:calc(1640px + 2 * var(--gut));padding-top:22px}
.dpt-cols.dpp-cols{grid-template-columns:minmax(0,1fr) 380px;gap:0 48px;margin-top:0}
.dpt-wrap .dpp-side{top:calc(var(--cb-chrome-h,73px) + 18px)}
.dpt-wrap .pp-header{padding-top:26px}
.dpt-wrap .pp-desc-toggle{white-space:nowrap}
.dpt-wrap .pp-header h1{font:600 30px/38px var(--cb-font-semibold)}
.dpt-wrap .pp-thumb{width:calc((100% - 70px) / 6)}
@media(max-width:1300px){.dpt-cols.dpp-cols{grid-template-columns:minmax(0,1fr) 340px;gap:0 36px}.dpt-wrap .pp-thumb{width:calc((100% - 56px) / 5)}}
@media(max-width:1100px){.dpt-cols.dpp-cols{grid-template-columns:1fr}.dpt-wrap .pp-thumb{width:calc((100% - 42px) / 4)}}
/* Product identity belongs with the purchase decision. Source order stays
   gallery, purchase, details, including when the desktop layout stacks. */
.dpp-wrap .dpp-cols.dpp-product-layout{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"gallery purchase" "details purchase";grid-template-rows:auto 1fr;gap:0 48px}
.dpp-product-layout>.pp-gallery{grid-area:gallery;min-width:0}
.dpp-product-layout>.dpp-side{grid-area:purchase;min-width:0;max-width:none;position:sticky;top:calc(var(--cb-chrome-h,73px) + 18px)}
.dpp-product-layout>.dpp-main{grid-area:details;min-width:0}
.dpp-wrap .dpp-product-layout .dpp-side>.pp-header{padding:0 0 20px}
.dpp-wrap .dpp-product-layout .pp-header h1{font:600 clamp(22px,1.8vw,28px)/1.25 var(--cb-font-semibold);overflow-wrap:anywhere;text-wrap:pretty}
.dpp-product-layout .pp-rating-row{margin-top:10px}
.dpp-product-layout .pp-bottom-row{margin-top:10px;flex-wrap:wrap;gap:10px}
.dpp-product-layout .pp-wishlist{min-height:32px;line-height:1.4;text-align:left}
/* Six complete thumbnails; larger galleries retain the existing rail controls. */
.dpp-wrap .pp-thumbs .pp-thumb{width:calc((100% - 70px) / 6);height:auto;aspect-ratio:16/10}
@media(max-width:1300px){.dpp-wrap .dpp-cols.dpp-product-layout{grid-template-columns:minmax(0,1fr) 340px;column-gap:36px}}
@media(max-width:1100px){.dpp-wrap .dpp-cols.dpp-product-layout{grid-template-columns:minmax(0,1fr) 300px;column-gap:28px}}
@media(max-width:900px){
  .dpp-wrap .dpp-cols.dpp-product-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"gallery" "purchase" "details";grid-template-rows:auto;row-gap:24px}
  .dpp-product-layout>.dpp-side{position:static}
}
@media(max-width:600px){.dpp-wrap .pp-thumbs .pp-thumb{width:calc((100% - 42px) / 4)}}
/* Seller context stays with the product title and purchase controls. */
.dpp-product-layout .dpp-side #dpt-seller{--seller-cart-inset:0px;margin:0 0 20px;container:product-seller / inline-size}
.dpp-product-layout .dpp-side .dpp-seller{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px 6px;padding:0;align-items:center}
.dpp-product-layout .dpp-side .pp-seller-avatar{width:40px;height:40px;grid-column:1;grid-row:1}
.dpp-product-layout .dpp-side .pp-seller-info{grid-column:2;grid-row:1}
.dpp-product-layout .dpp-side .dpp-seller-by{font-size:13px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpp-product-layout .dpp-side .dpp-seller-tags{grid-column:2 / -1;grid-row:2;border:0;padding:0;white-space:normal;font-size:12px;line-height:1.5}
.dpp-product-layout .dpp-side .dpp-seller-actions{grid-column:3;grid-row:1;gap:6px;margin:0 var(--seller-cart-inset) 0 0;flex-wrap:nowrap}
.dpp-product-layout .dpp-side .dpp-pill{height:36px;padding:0 8px;gap:5px;font-size:11px;letter-spacing:.5px;justify-content:center;flex:none}
.dpp-product-layout .dpp-side .dpp-pill svg{width:18px;height:18px;stroke-width:2.2;flex:none}
.dpp-product-layout .dpp-side .dpp-seller-actions>a{width:36px;padding:0}
.dpp-product-layout .dpp-side .dpp-seller-actions>a span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dpp-product-layout .dpp-side [data-cb-follow]{width:84px}
.dpp-product-layout .dpp-side [data-cb-follow] svg{display:none}
/* A narrow purchase panel keeps both actions on the avatar's row. The label
   remains available to assistive technology and the button retains its tooltip. */
@container product-seller (max-width:250px){
  .dpp-product-layout .dpp-side [data-cb-follow]{width:36px;padding:0}
  .dpp-product-layout .dpp-side [data-cb-follow] svg{display:block}
  .dpp-product-layout .dpp-side [data-cb-follow] span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* Only the seller actions yield to a visible cart. Gallery, sidebar and seller
   tags keep their original geometry; wide outer gutters need no inset. */
@media(min-width:901px){
  body:has(.hm-floatcart.is-shown:not([hidden])) .dpp-product-layout #dpt-seller{--seller-cart-inset:clamp(0px,calc(924px - 50vw),64px)}
  @container product-seller (max-width:320px){
    body:has(.hm-floatcart.is-shown:not([hidden])) .dpp-product-layout .dpp-side [data-cb-follow]{width:36px;padding:0}
    body:has(.hm-floatcart.is-shown:not([hidden])) .dpp-product-layout .dpp-side [data-cb-follow] svg{display:block}
    body:has(.hm-floatcart.is-shown:not([hidden])) .dpp-product-layout .dpp-side [data-cb-follow] span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  }
}
/* Wide desktop: six 16:10 thumbnails beside a 16:9 image. The column formula
   accounts for the 12px gallery gap and five 10px thumbnail gaps. No height cap. */
@media(min-width:1200px){
  .dpp-wrap .dpp-product-layout>.pp-gallery{display:grid;grid-template-columns:minmax(0,1fr) calc((900% - 908px) / 69);gap:12px;padding-bottom:0;align-items:stretch}
  .dpp-product-layout .pp-gallery-frame{width:100%;min-width:0;align-self:start}
  .dpp-wrap .dpp-product-layout .pp-thumbs{margin:0;min-height:0}
  .dpp-wrap .dpp-product-layout .pp-thumbs-rail{position:absolute;inset:0;flex-direction:column;gap:10px;padding:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}
  .dpp-wrap .dpp-product-layout .pp-thumbs .pp-thumb{width:100%;height:calc((100% - 50px) / 6);aspect-ratio:16/10}
  .dpp-product-layout .pp-thumbs>.dh-arrow{left:50%;right:auto;top:-14px;width:30px;height:30px;transform:translateX(-50%)}
  .dpp-product-layout .pp-thumbs>.dh-arrow.next{top:auto;bottom:-14px}
  .dpp-product-layout .pp-thumbs>.dh-arrow:hover{transform:translateX(-50%) scale(1.05)}
  .dpp-product-layout .pp-thumbs>.dh-arrow svg{width:17px;height:17px;transform:rotate(90deg)}
}
/* ── shared module shell ── */
.dpt-hud-chip svg,.dpt-vbtn svg,.dpt-viewer-hint svg,.dpt-stat-v svg,.dpt-verified svg,.dpt-chapter-head svg,.dpt-more svg,.dpt-thumb-3d svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dpt-lesson svg{fill:currentColor;stroke:none}
.dpt-lesson svg[viewBox] rect,.dpt-lesson svg path[d^="M8 12"]{fill:none;stroke:currentColor;stroke-width:1.5}
.dpt-play-btn svg{fill:#fff;stroke:none}
.dpt-mod{margin-top:22px;background:var(--cb-card);border:1px solid var(--cb-border);border-radius:14px;overflow:hidden}
/* strip = scan-once summary above the tabs (head + stats only); deep = the module's full body inside its own tab */
.dpt-mod.is-strip .dpt-mod-head{padding-bottom:12px}
.dpt-mod.is-strip .dpt-stats:last-child{border-bottom:0}
.dpt-mod.is-deep{margin-top:18px}
.dpt-mod.is-deep>.dpt-mod-body:first-child{padding-top:6px}
.dpt-mod.is-deep>.dpt-sets:first-child{padding-top:18px}
.dpt-mod.is-deep>.dpt-chapters:first-child{padding-top:8px}
/* 3D: hero-piece switcher in the viewer */
.dpt-pieces{position:absolute;left:14px;right:14px;bottom:58px;display:flex;align-items:center;gap:6px;padding:6px;border-radius:10px;background:rgba(14,19,32,.72);backdrop-filter:blur(6px);overflow:hidden}
.dpt-piece{flex:none;width:44px;height:44px;border-radius:7px;border:2px solid transparent;background-size:cover;background-position:center;cursor:pointer;padding:0;opacity:.75;transition:opacity .15s,border-color .15s,transform .15s}
.dpt-piece:hover{opacity:1}
.dpt-piece.is-active{opacity:1;border-color:#40b3de;transform:scale(1.06)}
.dpt-pieces-n{margin-left:auto;padding:0 8px;white-space:nowrap;color:#aeb6c6;font:600 11px/1 var(--cb-font-semibold);letter-spacing:.4px}
.dpt-viewer-model{transition:opacity .16s}
.dpt-viewer-model.is-swapping{opacity:0}
@media(max-width:1300px){.dpt-piece:nth-child(n+9){display:none}}
/* 3D: all-pieces grid reuses the sheet */
.dpt-sheet.is-pieces .dpt-cell{aspect-ratio:1;background-color:#1b2436}
.dpt-sheet.is-pieces .dpt-cell::after{display:none}
.dpt-cell-n{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 7px;background:linear-gradient(transparent,rgba(14,19,32,.85));color:#e8eaf0;font:600 11px/1.2 var(--cb-font-semibold);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Images: blurred index of the non-preview files */
.dpt-index{position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:6px;margin:0 20px 20px;padding:10px;border-radius:12px;background:var(--cb-bg);border:1px solid var(--cb-border);max-height:236px;overflow:hidden}
.dpt-index-tile{aspect-ratio:2/3;border-radius:5px;overflow:hidden;position:relative;background-size:cover;background-position:center;pointer-events:none;opacity:.85}
.dpt-index-tile::before{content:"";position:absolute;inset:0;background:inherit;background-size:cover;background-position:inherit;filter:blur(3px) saturate(.8);transform:scale(1.12)}
.dpt-index-tile::after{content:"";position:absolute;inset:0;background:rgba(14,19,32,.25)}
.dpt-index-overlay{position:absolute;left:0;right:0;bottom:0;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:18px;gap:4px;background:linear-gradient(transparent,var(--cb-bg) 85%);color:var(--cb-text);text-align:center;pointer-events:none}
.dpt-index-overlay strong{font:600 15px/1.2 var(--cb-font-semibold)}
.dpt-index-overlay span{font:400 12px/1 var(--cb-font-regular);color:var(--cb-muted)}
.dpt-more.is-open svg{transform:rotate(180deg)}
.dpt-mod-head{display:flex;align-items:center;gap:12px;padding:16px 20px 0}
.dpt-mod-title{font:600 15px/1.2 var(--cb-font-semibold);color:var(--cb-text);letter-spacing:.1px}
.dpt-mod-spacer{flex:1}
.dpt-verified{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:rgba(123,193,120,.14);color:#7bc178;font:600 11px/1 var(--cb-font-semibold);letter-spacing:.3px;position:relative;cursor:help}
.dpt-verified svg{width:12px;height:12px}
.dpt-verified[data-tip]:hover::after{content:attr(data-tip);position:absolute;right:0;top:calc(100% + 8px);z-index:5;width:260px;padding:10px 12px;border-radius:8px;background:#141926;color:#e8eaf0;font:400 12px/1.45 var(--cb-font-regular);letter-spacing:0;box-shadow:0 8px 24px rgba(0,0,0,.35);text-align:left;white-space:normal}
.dpt-mod-body{padding:16px 20px 20px}
/* stat strip */
.dpt-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-bottom:1px solid var(--cb-border)}
@media(max-width:1300px){.dpt-stats{grid-template-columns:repeat(3,1fr)}.dpt-stat:nth-child(3n){border-right:0}.dpt-stat:nth-child(n+4){border-top:1px solid var(--cb-border)}}
.dpt-stat{padding:16px 20px;border-right:1px solid var(--cb-border);min-width:0}
.dpt-stat:last-child{border-right:0}
.dpt-stat-k{font:600 11px/1 var(--cb-font-semibold);letter-spacing:.9px;text-transform:uppercase;color:var(--cb-muted)}
.dpt-stat-v{margin-top:8px;font:600 16px/1.25 var(--cb-font-semibold);color:var(--cb-text);text-wrap:balance}
.dpt-stat-v small{font:400 12px/1 var(--cb-font-regular);color:var(--cb-muted);margin-left:4px}
.dpt-stat-v.is-ok{color:#7bc178}
.dpt-stat-v.is-no{color:var(--cb-muted);font-weight:400}
.dpt-stat-v svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
/* chips */
.dpt-chips{display:flex;flex-wrap:wrap;gap:8px}
.dpt-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--cb-border-hard);border-radius:8px;font:600 12px/1 var(--cb-font-semibold);color:var(--cb-text);letter-spacing:.2px;background:transparent;white-space:nowrap}
.dpt-chip .ext{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 6px;border-radius:4px;background:var(--cb-text);color:var(--cb-card);font:700 10px/1 var(--cb-font-bold);letter-spacing:.6px}
.dpt-chip.is-off{opacity:.5;text-decoration:line-through}
.dpt-chip .ver{color:var(--cb-muted);font-weight:400}
.dpt-sub{margin:18px 0 10px;font:600 11px/1 var(--cb-font-semibold);letter-spacing:.9px;text-transform:uppercase;color:var(--cb-muted)}
.dpt-sub:first-child{margin-top:0}
/* software tiles (lettered, no logos) */
.dpt-soft{display:flex;flex-wrap:wrap;gap:10px}
.dpt-soft-tile{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 6px;border:1px solid var(--cb-border);border-radius:10px;background:var(--cb-bg)}
.dpt-soft-mark{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font:700 12px/1 var(--cb-font-bold);color:#fff;letter-spacing:-.2px;flex:none}
.dpt-soft-name{font:600 13px/1.2 var(--cb-font-semibold);color:var(--cb-text)}
.dpt-soft-ver{font:400 11px/1.2 var(--cb-font-regular);color:var(--cb-muted);margin-top:2px}
.dpt-soft-tile.is-no{opacity:.55}
.dpt-soft-tile.is-no .dpt-soft-mark{background:var(--cb-border-hard)!important;color:var(--cb-muted)}
/* ── 3D viewer (turntable mock) ── */
.dpt-viewer{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,#1b2436 0%,#0e1524 70%);overflow:hidden;user-select:none;cursor:grab;perspective:1400px}
.dpt-viewer.is-dragging{cursor:grabbing}
.dpt-viewer-floor{position:absolute;left:-40%;right:-40%;bottom:-14%;height:70%;transform:rotateX(72deg);transform-origin:50% 100%;background-image:linear-gradient(rgba(64,179,222,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(64,179,222,.18) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 100%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000 30%,transparent 75%)}
.dpt-viewer-stage{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.dpt-viewer-model{width:58%;aspect-ratio:16/10;border-radius:10px;background-size:cover;background-position:center;box-shadow:0 40px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,-6deg));transition:filter .25s;will-change:transform}
.dpt-viewer[data-mode="wire"] .dpt-viewer-model{filter:grayscale(1) contrast(1.4) brightness(.8)}
.dpt-viewer[data-mode="wire"] .dpt-viewer-model::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(64,179,222,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(64,179,222,.55) 1px,transparent 1px),linear-gradient(45deg,transparent 49.5%,rgba(64,179,222,.35) 50%,transparent 50.5%);background-size:28px 28px,28px 28px,28px 28px;mix-blend-mode:screen}
.dpt-viewer[data-mode="shaded"] .dpt-viewer-model{filter:grayscale(1) contrast(.9) brightness(1.05)}
.dpt-viewer-model{position:relative}
.dpt-viewer-hud{position:absolute;left:14px;top:14px;display:flex;gap:8px;pointer-events:none}
.dpt-hud-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(14,19,32,.72);color:#e8eaf0;font:600 11px/1 var(--cb-font-semibold);letter-spacing:.4px;backdrop-filter:blur(6px)}
.dpt-hud-chip svg{width:12px;height:12px}
.dpt-viewer-hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);color:rgba(232,234,240,.7);font:400 12px/1 var(--cb-font-regular);letter-spacing:.3px;display:inline-flex;align-items:center;gap:8px;pointer-events:none;transition:opacity .3s}
.dpt-viewer.is-touched .dpt-viewer-hint{opacity:0}
.dpt-viewer-hint svg{width:16px;height:16px}
.dpt-viewer-bar{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:8px}
.dpt-vbtn{height:32px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(14,19,32,.72);color:#e8eaf0;font:600 11px/1 var(--cb-font-semibold);letter-spacing:.6px;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:6px}
.dpt-vbtn:hover{border-color:rgba(255,255,255,.35)}
.dpt-vbtn[aria-pressed="true"]{background:#40b3de;border-color:#40b3de;color:#fff}
.dpt-vbtn svg{width:14px;height:14px}
.dpt-vbtn.is-icon{width:32px;padding:0;justify-content:center}
.dpt-viewer-bar .grow{flex:1}
.dpt-thumb-3d{position:relative;display:grid;place-items:center;background:#0e1524!important;color:#e8eaf0;font:700 11px/1 var(--cb-font-bold);letter-spacing:1px}
.dpt-thumb-3d svg{width:26px;height:26px;margin-bottom:6px}
.dpt-thumb-3d span{display:grid;place-items:center}
/* ── tutorial ── */
.dpt-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.dpt-play-btn{width:72px;height:72px;border-radius:50%;background:#40b3de;box-shadow:0 8px 30px rgba(64,179,222,.5);display:grid;place-items:center;pointer-events:auto;cursor:pointer;border:0;transition:transform .15s}
.dpt-play-btn:hover{transform:scale(1.06)}
.dpt-play-btn svg{width:28px;height:28px;fill:#fff;margin-left:4px}
.dpt-dur{position:absolute;right:14px;top:14px;height:26px;padding:0 10px;border-radius:999px;background:rgba(14,19,32,.72);color:#e8eaf0;font:600 11px/26px var(--cb-font-semibold);letter-spacing:.4px;backdrop-filter:blur(6px)}
.dpt-chapters{border-top:1px solid var(--cb-border)}
.dpt-chapter{border-bottom:1px solid var(--cb-border)}
.dpt-chapter:last-child{border-bottom:0}
.dpt-chapter-head{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px;background:transparent;border:0;text-align:left;cursor:pointer;color:var(--cb-text)}
.dpt-chapter-head:hover{background:var(--cb-bg)}
.dpt-chapter-n{width:28px;height:28px;border-radius:8px;background:var(--cb-bg);border:1px solid var(--cb-border);display:grid;place-items:center;font:700 11px/1 var(--cb-font-bold);color:var(--cb-muted);flex:none}
.dpt-chapter-t{flex:1;min-width:0;font:600 14px/1.3 var(--cb-font-semibold)}
.dpt-chapter-m{font:400 12px/1 var(--cb-font-regular);color:var(--cb-muted);white-space:nowrap}
.dpt-chapter-head svg{width:14px;height:14px;color:var(--cb-muted);transition:transform .2s}
.dpt-chapter[data-open="true"] .dpt-chapter-head svg{transform:rotate(180deg)}
.dpt-lessons{display:none;padding:0 20px 10px 62px}
.dpt-chapter[data-open="true"] .dpt-lessons{display:block}
/* QA item 151: an ungrouped course's lessons, with no chapter head and so no number badge to clear */
.dpt-chapter.is-flat .dpt-lessons{padding:8px 20px 10px}
.dpt-lesson{display:flex;align-items:center;gap:12px;padding:9px 0;font:400 13px/1.3 var(--cb-font-regular);color:var(--cb-sec)}
.dpt-lesson svg{width:14px;height:14px;color:var(--cb-muted);flex:none}
.dpt-lesson .t{flex:1;min-width:0}
.dpt-lesson .d{font-size:12px;color:var(--cb-muted);white-space:nowrap}
.dpt-lesson .free{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:rgba(64,179,222,.14);color:var(--cb-link-text,#40b3de);font:600 10px/1 var(--cb-font-semibold);letter-spacing:.6px;text-transform:uppercase}
.dpt-lesson.is-free{color:var(--cb-text)}
.dpt-lesson.is-free svg{color:var(--cb-link-text,#40b3de)}
.dpt-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;background:transparent;border:0;border-top:1px solid var(--cb-border);color:var(--cb-link-text,var(--cb-link));font:600 12px/1 var(--cb-font-semibold);letter-spacing:.6px;text-transform:uppercase;cursor:pointer}
.dpt-more:hover{background:var(--cb-bg)}
.dpt-more svg{width:12px;height:12px}
/* ── 2D: contact sheet ── */
.dpt-sets{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px 0}
.dpt-set{display:inline-flex;align-items:center;white-space:nowrap;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--cb-border-hard);background:transparent;color:var(--cb-text);font:600 12px/1 var(--cb-font-semibold);cursor:pointer}
.dpt-set:hover{background:var(--cb-bg)}
.dpt-set[aria-pressed="true"]{background:var(--cb-text);color:var(--cb-card);border-color:var(--cb-text)}
.dpt-set .n{color:inherit;opacity:.6;margin-left:4px;font-weight:400}
.dpt-sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px 20px 18px}
@media(max-width:1300px){.dpt-sheet{grid-template-columns:repeat(5,1fr)}}
@media(max-width:900px){.dpt-sheet{grid-template-columns:repeat(4,1fr)}}
.dpt-cell{aspect-ratio:2/3;border-radius:8px;background-size:cover;background-position:var(--pos,center);border:0;cursor:zoom-in;position:relative;overflow:hidden;background-color:var(--cb-bg);transition:transform .15s}
.dpt-cell:hover{transform:scale(1.03);z-index:1}
.dpt-cell::after{display:none;content:attr(data-n);position:absolute;left:6px;bottom:6px;height:18px;padding:0 6px;border-radius:4px;background:rgba(14,19,32,.7);color:#e8eaf0;font:600 10px/18px var(--cb-font-semibold);letter-spacing:.3px}
.dpt-cell[hidden]{display:none}
/* real-upload template extras */
.dpt-nsfw{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;background:#e74c3c;color:#fff;font:700 10px/1 var(--cb-font-bold);letter-spacing:.6px;margin-left:6px}
.dpt-viewer-model.is-portrait{width:auto;height:78%;aspect-ratio:1;background-size:cover;background-position:50% 15%}
/* Portrait product renders should show the entire asset inside the approved wide gallery. */
body[data-pp-template="elf"] .pp-gallery-slide[data-cb-lightbox]{background-size:contain;background-repeat:no-repeat;background-color:#0e1524}
.dpt-sheet.is-pieces .dpt-cell[style*="background-size"]{background-size:300% auto}
/* Sketchfab slide: poster until loaded, then iframe fills the frame */
.dpt-sf-slide{background:#0e1524}
.dpt-sf-poster{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.dpt-sf-poster::before{content:"";position:absolute;inset:0;background:rgba(14,21,36,.45)}
.dpt-sf-play{position:relative;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;border:0;background:#fff;color:#141926;font:700 13px/1 var(--cb-font-bold);letter-spacing:.4px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.dpt-sf-play:hover{transform:translateY(-1px)}
.dpt-sf-play svg{width:18px;height:18px;fill:none;stroke:currentColor}
.dpt-sf-by{position:absolute;right:14px;bottom:12px;color:rgba(255,255,255,.75);font:600 11px/1 var(--cb-font-semibold);letter-spacing:.6px;text-transform:uppercase}
.dpt-sf-slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dpt-thumb-3d{position:relative}
.dpt-thumb-3d::before{content:"";position:absolute;inset:0;background:rgba(14,21,36,.55);border-radius:inherit}
.dpt-thumb-3d>span{position:relative}
/* files: multi-column grid on the wide layout; products can ship hundreds */
.dpt-wrap .pp-files-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--cb-card)}
@media(max-width:1300px){.dpt-wrap .pp-files-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dpt-wrap .pp-file{border-bottom:1px solid var(--cb-border);border-right:1px solid var(--cb-border);padding:12px 14px}
.dpt-wrap .pp-file+.pp-file::before{display:none}
.dpt-wrap .pp-file:nth-child(3n){border-right:0}
@media(max-width:1300px){.dpt-wrap .pp-file:nth-child(3n){border-right:1px solid var(--cb-border)}.dpt-wrap .pp-file:nth-child(2n){border-right:0}}
.dpt-wrap .pp-file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpt-wrap .pp-file[hidden]{display:none}
.dpt-wrap .pp-files-more{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:0;background:var(--cb-card);color:var(--cb-link-text,var(--cb-link));font:600 13px/1 var(--cb-font-semibold);cursor:pointer}
.dpt-wrap .pp-files-more:hover{background:var(--cb-bg)}
.dpt-wrap .pp-files-more svg{width:14px;height:14px;fill:none;stroke:currentColor}
.dpt-wrap .pp-files-more.is-open svg{transform:rotate(180deg)}
/* Watermark on seller-chosen previews: full lockup (mark + wordmark) tiled at 45°, low alpha, offset rows. BACKEND: burned into the served preview JPGs server-side with the same tile (assets/img/wm-lockup-white.png), alpha .02 (screen blend), phase randomised per image. */
.dpt-wm{position:absolute;inset:-60%;pointer-events:none;opacity:.02;transform:rotate(-45deg);background-image:url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/brand/wm-lockup-white-5bc1634faae1af9e0c03d854516dafb349725f851b094dd3bbfb8f04c5c5c897.png"),url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/brand/wm-lockup-white-5bc1634faae1af9e0c03d854516dafb349725f851b094dd3bbfb8f04c5c5c897.png");background-size:420px auto,420px auto;background-position:0 0,210px 90px;background-repeat:repeat;mix-blend-mode:screen}
.dpt-cell .dpt-wm{opacity:.02;background-size:280px auto,280px auto;background-position:0 0,140px 60px}
.cb-lightbox .cb-lightbox-image{position:relative;overflow:hidden}
.cb-lightbox .cb-lightbox-image .dpt-wm{opacity:.02;background-size:520px auto,520px auto;background-position:0 0,260px 111px}
/* section labels in the deep module share the 20px inset of the sheet / index */
.dpt-mod.is-deep>.dpt-sub{margin:18px 20px 10px}
.dpt-mod.is-deep>.dpt-sets+.dpt-sub{margin-top:16px}
.dpt-more+.dpt-sub{margin-top:20px}
/* thumb rail = standard rail: arrows appear only when it overflows, disabled at the edges */
.pp-thumbs .dh-arrow{display:none;top:calc(50% - 1px)}
.pp-thumbs.is-scrollable .dh-arrow{display:inline-flex}
.pp-thumbs .dh-arrow.prev{left:-14px}
.pp-thumbs .dh-arrow.next{right:-14px}
.pp-thumbs.is-scrolled-start.is-scrollable .dh-arrow.prev,.pp-thumbs.is-scrolled-end.is-scrollable .dh-arrow.next{opacity:1}
.pp-thumbs:not(.is-scrolled-start) .dh-arrow.prev,.pp-thumbs.is-scrolled-end .dh-arrow.next{opacity:.35;pointer-events:none}
/* course: what-you-get summary replaces the generic file list; the chapter list is the file list */
.dpt-sum{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--cb-card);border:1px solid var(--cb-border);border-radius:12px;overflow:hidden}
.dpt-sum-i{padding:14px 16px;border-right:1px solid var(--cb-border);display:flex;flex-direction:column;gap:3px}
.dpt-sum-i:last-child{border-right:0}
.dpt-sum-i b{font:600 18px/1.1 var(--cb-font-semibold);color:var(--cb-text)}
.dpt-sum-i span{font:400 12px/1.3 var(--cb-font-regular);color:var(--cb-muted)}
.dpt-sum-link{display:inline-block;margin-top:10px;font:600 13px/1 var(--cb-font-semibold);color:var(--cb-link-text,var(--cb-link));text-decoration:none}
.dpt-sum-link:hover{text-decoration:underline}
.dpt-lesson.is-extra{color:var(--cb-text)}
.dpt-lesson.is-extra .d{color:var(--cb-link-text,var(--cb-link));font-weight:600}
.dpt-ext{flex:none;height:18px;padding:0 6px;border-radius:4px;background:#e74c3c;color:#fff;font:700 9.5px/18px var(--cb-font-bold);letter-spacing:.5px}
button.dpt-lesson{width:100%;background:transparent;border:0;text-align:left;cursor:pointer;border-radius:8px;padding:9px 8px;margin:0 -8px}
button.dpt-lesson:hover{background:var(--cb-bg)}
button.dpt-lesson svg{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(64,179,222,.14);fill:#40b3de;color:var(--cb-link-text,#40b3de)}
/* stat strip now leads the Product details panel */
#pp-tab-details>.dpt-mod.is-strip{margin-top:16px;margin-bottom:6px}
/* thumb rail cursor = every other rail: grab, grabbing while dragging (thumbs are buttons, so override their pointer) */
.pp-thumbs-rail{cursor:grab}
.pp-thumbs-rail .pp-thumb{cursor:grab}
.pp-thumbs-rail.is-dragging,.pp-thumbs-rail.is-dragging .pp-thumb{cursor:grabbing}
.pp-thumbs-rail.is-dragging .pp-thumb{pointer-events:none}
.pp-thumbs-rail .pp-thumb:active{cursor:grabbing}
/* ── audio: player + track list ── */
.dpa-player{margin-top:18px;background:var(--cb-card);border:1px solid var(--cb-border);border-radius:14px;padding:16px 18px 12px}
.dpa-now{display:flex;align-items:center;gap:14px}
.dpa-play{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--cb-link);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,filter .12s}
.dpa-play:hover{transform:scale(1.04);filter:brightness(1.05)}
.dpa-play svg{width:24px;height:24px;fill:currentColor;stroke:none}
.dpa-play .i-play{margin-left:3px}
.dpa-player .i-pause{display:none}
.dpa-player.is-playing .dpa-play .i-pause{display:block}
.dpa-player.is-playing .dpa-play .i-play{display:none}
.dpa-now-meta{flex:1;min-width:0}
.dpa-now-t{font:600 17px/1.2 var(--cb-font-semibold);color:var(--cb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpa-now-s{display:flex;align-items:center;gap:10px;margin-top:4px;font:400 12.5px/1 var(--cb-font-regular);color:var(--cb-muted)}
.dpa-preview-tag{height:20px;padding:0 8px;border-radius:5px;background:rgba(64,179,222,.14);color:var(--cb-link-text,var(--cb-link));font:600 10px/20px var(--cb-font-semibold);letter-spacing:.4px;text-transform:uppercase}
.dpa-time{font:600 13px/1 var(--cb-font-semibold);color:var(--cb-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.dpa-time .sep{color:var(--cb-muted);margin:0 5px}
.dpa-wave{position:relative;height:88px;margin:14px 0 10px;cursor:pointer;outline:none;border-radius:8px}
.dpa-wave:focus-visible{box-shadow:0 0 0 2px var(--cb-link)}
.dpa-wave canvas{display:block;width:100%;height:100%}
.dpa-wave-hover{position:absolute;top:-4px;bottom:-4px;width:1px;background:rgba(255,255,255,.55);pointer-events:none;transform:translateX(-.5px)}
.dpa-wave-hover span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);padding:2px 6px;border-radius:4px;background:var(--cb-text);color:var(--cb-card);font:600 11px/1.4 var(--cb-font-semibold);white-space:nowrap}
.dpa-ctl{display:flex;align-items:center;gap:6px}
.dpa-ctl .grow{flex:1}
.dpa-ico{width:36px;height:36px;border-radius:999px;border:0;background:transparent;color:var(--cb-sec);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.dpa-ico:hover{background:var(--cb-bg);color:var(--cb-text)}
.dpa-ico[aria-pressed="true"]{color:var(--cb-link-text,var(--cb-link));background:rgba(64,179,222,.12)}
.dpa-ico svg{width:18px;height:18px;fill:none;stroke:currentColor}
.dpa-vol{display:flex;align-items:center;gap:2px;margin-left:6px}
.dpa-vol input{width:96px;height:4px;appearance:none;background:linear-gradient(90deg,var(--cb-link) calc(var(--vol,.8)*100%),var(--cb-border-hard) 0);border-radius:2px;outline:none}
.dpa-vol input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--cb-link)}
.dpa-kbd{font:400 11.5px/1 var(--cb-font-regular);color:var(--cb-muted);margin-right:14px}
.dpa-kbd kbd{display:inline-block;padding:2px 5px;border-radius:4px;background:var(--cb-bg);border:1px solid var(--cb-border-hard);font:600 10px/1 var(--cb-font-semibold);color:var(--cb-sec);margin:0 1px}
.dpa-buy-all{font:600 12.5px/1 var(--cb-font-semibold);color:var(--cb-link-text,var(--cb-link));text-decoration:none}
.dpa-buy-all:hover{text-decoration:underline}
.dpa-tracks-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px 4px}
.dpa-tracks-head .dpt-sub{margin:0}
.dpa-filter input{height:34px;width:260px;padding:0 12px;border-radius:999px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);color:var(--cb-text);font:400 13px/1 var(--cb-font-regular);outline:none}
.dpa-filter input:focus{border-color:var(--cb-link)}
.dpa-tracks{list-style:none;margin:0;padding:8px 8px 12px}
.dpa-track{display:grid;grid-template-columns:44px minmax(0,1fr) 200px 70px 84px 160px 48px;gap:14px;align-items:center;padding:8px 12px;border-radius:10px;cursor:pointer;color:var(--cb-text)}
.dpa-track:hover{background:var(--cb-bg)}
.dpa-track.is-current{background:rgba(64,179,222,.08)}
.dpa-track[hidden]{display:none}
.dpa-track-play{width:36px;height:36px;border-radius:50%;border:0;background:var(--cb-bg);color:var(--cb-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.dpa-track-play .n{font:600 12px/1 var(--cb-font-semibold);color:var(--cb-muted)}
.dpa-track-play svg{display:none;width:16px;height:16px;fill:currentColor}
.dpa-track:hover .dpa-track-play .n,.dpa-track.is-current .dpa-track-play .n{display:none}
.dpa-track:hover .dpa-track-play .i-play{display:block}
.dpa-track.is-current .dpa-track-play{background:var(--cb-link);color:#fff}
.dpa-track.is-playing:hover .dpa-track-play .i-play{display:none}
.dpa-track.is-playing:hover .dpa-track-play .i-pause{display:block}
.dpa-eq{display:none;gap:2px;align-items:flex-end;height:14px}
.dpa-track.is-playing:not(:hover) .dpa-eq{display:inline-flex}
.dpa-track.is-playing:not(:hover) .dpa-track-play .i-play{display:none}
.dpa-eq i{width:3px;background:#fff;border-radius:1px;animation:dpa-eq .9s ease-in-out infinite}
.dpa-eq i:nth-child(2){animation-delay:.2s}
.dpa-eq i:nth-child(3){animation-delay:.4s}
@keyframes dpa-eq{0%,100%{height:4px}50%{height:14px}}
.dpa-track-t{font:600 14px/1.3 var(--cb-font-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpa-track.is-current .dpa-track-t{color:var(--cb-link-text,var(--cb-link))}
.dpa-mini{width:200px;height:28px;opacity:.9}
.dpa-track-m{font:500 12px/1 var(--cb-font-regular);color:var(--cb-muted);white-space:nowrap}
.dpa-track-tags{display:flex;gap:4px;overflow:hidden}
.dpa-track-tags span{height:20px;padding:0 7px;border-radius:999px;border:1px solid var(--cb-border);font:500 11px/20px var(--cb-font-regular);color:var(--cb-sec);white-space:nowrap}
.dpa-track-d{font:500 12px/1 var(--cb-font-regular);color:var(--cb-muted);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:1300px){.dpa-track{grid-template-columns:44px minmax(0,1fr) 70px 84px 48px}.dpa-mini,.dpa-track-tags{display:none}}
/* The ART School templates in the v3 shell, every version (v3 plan U45; QA items 105, 137).

   The versions are made on master (item 104's ruling), and U45 fitted each one to the v3 shell in its
   own stylesheet, behind its .art-school-vN--v3 class. A version master has made since (v6) has none
   of that, so the fit lives here, for any ART School root: a version master adds next needs no v3
   edit (spec/js_tests/v3/art_school_subnav.spec.js and art_school_mobile.spec.js read the versions
   from the template files). The comments frame, the one fit a stylesheet cannot make, is
   V3::ProductPage::CustomTemplateFit's.

   Specificity is the contract. Every rule beats a template's own (.art-school-vN 0,1,0;
   .art-school-vN.art-school-vN--mobile 0,2,0; .art-school-vN section 0,1,1) and loses to a version's
   own --v3 rules (0,2,0 desktop, 0,3,0 mobile, 0,4,1 hidden chrome), which say the same thing. */

/* Desktop: dock the sub-nav and the sale banner at the height the shell measures (73px + the 3px
   rainbow, scrolled 76px), not the legacy header's 64px, and layer them under the chrome's own menus:
   40, where .dh-toolbar parks, the banner one above. */
main [class^="art-school-v"],main [class*=" art-school-v"]{--as-cb-header-offset:var(--cb-chrome-h,76px)}
main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-subnav{z-index:40}
main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-sticky-sale{z-index:41}

/* Mobile: the chrome is 121px (bar + search row) and hides on scroll-down; the sub-nav docks under it
   while it is up and at the viewport top while it is away. The legacy page wrapped the template in
   .mproduct-view-block, whose 24px/40px padding the template's negative margins cancel; main#main has
   none, so the trim pulled the hero under the chrome and the last section into the footer. */
main :is([class^="art-school-v"],[class*=" art-school-v"])[class*="--mobile"]{--as-cb-header-offset:var(--cb-chrome-h,121px);margin-top:0;margin-bottom:0}
.hm-fixed-chrome.is-hidden ~ main :is([class^="art-school-v"],[class*=" art-school-v"]){--as-cb-header-offset:0px}

/* The desktop sub-nav below 1100px: eight section links and the brand pill stop fitting and the
   document scrolled sideways (187px at 900). The link row scrolls instead, with no visible scrollbar,
   keeping the bar's height so the active link's underline is not clipped. */
@media (max-width:1100px){
  main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-subnav{padding:0 16px}
  main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-subnav-inner{gap:16px}
  main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-subnav-brand{flex:none;padding-right:14px}
  main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-subnav-links{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;height:var(--as-subnav-height)}
  main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-subnav-links::-webkit-scrollbar{display:none}
}

/* The v3 comments thread inside the template: the template's blanket `section { padding: 100px 40px }`
   reaches the thread's own <section>, and U15's .cb-comments card is flattened on the v3 product page
   by .dpp-wrap rules this page has no .dpp-wrap for. */
main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-comments-wrap section{padding:0}
main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-comments-wrap .cb-comments{padding-left:0;padding-right:0;background:transparent;margin-top:8px}
main :is([class^="art-school-v"],[class*=" art-school-v"]) .as-comments-wrap .cb-comments-pager{justify-content:center}
/* Individual listings use the existing desktop product columns and rails. */
[data-desktop-listing] .pp-files-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;background:transparent;border:0;overflow:visible}
[data-desktop-listing] .pp-file{min-width:0;padding:12px;border:1px solid var(--cb-border);border-radius:10px;background:var(--cb-card)}
[data-desktop-listing] .pp-file-body{min-width:0}
[data-desktop-listing] .pp-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-desktop-listing] .pp-files-more{grid-column:1/-1;background:transparent;border-radius:10px}
[data-desktop-listing] .pp-gallery-dot{padding:0;border:0}
[data-desktop-listing] .dpp-seller-actions{margin-right:70px}
[data-desktop-listing] .pp-devswitch>:nth-child(-n+2){display:none}
[data-desktop-listing] .pp-gallery-slide:focus-visible{outline:3px solid var(--cb-link);outline-offset:-3px}
[data-desktop-listing] [hidden]{display:none!important}
.dl-comments-empty{padding:36px 20px;text-align:center;color:var(--cb-sec);line-height:1.7}
@media(max-width:1180px){[data-desktop-listing] .pp-files-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
[data-desktop-listing] .pp-gallery-dots{pointer-events:auto;z-index:3;gap:2px}
[data-desktop-listing] button.pp-gallery-dot{width:24px;height:24px;position:relative;background:transparent;cursor:pointer;flex:none}
[data-desktop-listing] button.pp-gallery-dot::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:3px;background:#ffffff80}
[data-desktop-listing] button.pp-gallery-dot.is-active::after{width:18px;background:#fff}
/* Add a product. Scoped pn-. Tokens from desktop.css. */
.pn-wrap svg{max-width:24px;max-height:24px}
/* no unsized-SVG flash while mounting */
.pn-wrap{max-width:calc(1640px + 2 * var(--gut));margin:0 auto;padding:28px var(--gut) 72px}
.pn-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start}
.pn-side{align-self:stretch}
@media(max-width:1200px){.pn-cols{grid-template-columns:1fr}.pn-side-sticky{position:static}}
.pn-h1{font:300 clamp(24px,2vw,30px)/1.1 var(--cb-font-light);letter-spacing:-.4px;color:var(--cb-text);margin:0;text-align:center;flex:1}
.pn-lead{font:400 15px/1.5 var(--cb-font-regular);color:var(--cb-text-sec,var(--cb-muted));max-width:760px;margin:0 0 26px;text-wrap:pretty}
.pn-card{background:var(--cb-card);border:1px solid var(--cb-border);border-radius:14px;margin-bottom:18px;overflow:hidden}
.pn-card-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--cb-border)}
.pn-card-head h2{font:600 15px/1.2 var(--cb-font-semibold);color:var(--cb-text);margin:0;flex:1;min-width:0}
.pn-prog{width:180px;height:6px;border-radius:3px;background:var(--cb-bg);overflow:hidden;position:relative}
.pn-prog-bar{position:absolute;inset:0;width:var(--p);background:var(--cb-link);border-radius:3px;transition:width .6s}
.pn-prog-n{font:600 12px/1 var(--cb-font-semibold);color:var(--cb-muted);white-space:nowrap}
.pn-jobs{list-style:none;margin:0;padding:6px 20px 10px}
.pn-jobs li{display:flex;align-items:center;gap:10px;padding:9px 0;font:400 13px/1.4 var(--cb-font-regular);color:var(--cb-text);border-bottom:1px solid var(--cb-border)}
.pn-jobs li:last-child{border-bottom:0}
.pn-jobs li small{margin-left:auto;color:var(--cb-muted);font-size:12px;white-space:nowrap}
.pn-jobs svg,.pn-row-ico svg,.pn-legend svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.is-ok>svg,.pn-row.is-ok .pn-row-ico,.pn-legend .is-ok{color:var(--cb-commit)}
.is-warn>svg,.pn-row.is-warn .pn-row-ico,.pn-legend .is-warn{color:var(--cb-warn)}
.is-run>svg,.pn-row.is-run .pn-row-ico,.pn-legend .is-run{color:var(--cb-link-text,var(--cb-link))}
.pn-jobs li.is-wait{color:var(--cb-muted);padding-left:26px}
.pn-spin{animation:pn-spin 1s linear infinite}
@keyframes pn-spin{to{transform:rotate(360deg)}}
.pn-legend{display:flex;gap:14px;font:600 11px/1 var(--cb-font-semibold);letter-spacing:.4px;text-transform:uppercase}
.pn-legend span{display:inline-flex;align-items:center;gap:5px}
.pn-row{display:grid;grid-template-columns:24px 170px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 20px;border-bottom:1px solid var(--cb-border)}
.pn-row:last-child{border-bottom:0}
.pn-row.is-warn{background:rgba(245,166,35,.06)}
.pn-row-ico{display:flex;align-items:center;height:20px}
/* The image-pack card's toggled check: no box of its own while shown, so the icon lays out as before. */
.pn-row-tick:not([hidden]){display:contents}
.pn-row-k{font:600 13px/20px var(--cb-font-semibold);color:var(--cb-text)}
.pn-row-v{font:500 14px/20px var(--cb-font-semibold);color:var(--cb-text);min-width:0;overflow-wrap:anywhere}
.pn-row-note{font:400 12px/1.5 var(--cb-font-regular);color:var(--cb-muted);margin-top:4px;text-wrap:pretty}
.pn-row-note code{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--cb-bg);padding:2px 5px;border-radius:4px;color:var(--cb-text)}
.pn-dim{color:var(--cb-muted);font-weight:400}
.pn-row-act{display:flex;gap:8px;align-items:center;justify-content:flex-end;min-width:140px}
.pn-btn{height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--cb-text);background:var(--cb-text);color:var(--cb-card);font:600 12px/1 var(--cb-font-semibold);letter-spacing:.2px;cursor:pointer;white-space:nowrap}
.pn-btn.is-ghost{background:transparent;color:var(--cb-text);border-color:var(--cb-border-hard)}
.pn-btn.is-ghost:hover{background:var(--cb-bg)}
.pn-btn.is-primary{background:var(--cb-link);border-color:var(--cb-link);color:#fff;height:40px;padding:0 20px;font-size:13px}
.pn-btn.is-confirmed{background:transparent;border-color:transparent;color:var(--cb-commit);pointer-events:none}
.pn-input{height:32px;width:150px;padding:0 10px;border-radius:8px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);color:var(--cb-text);font:500 13px/1 var(--cb-font-regular)}
.pn-input::placeholder{color:var(--cb-muted)}
.pn-toggle{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--cb-font-semibold);color:var(--cb-text);cursor:pointer;position:relative}
.pn-toggle input{position:absolute;opacity:0}
.pn-toggle span{width:36px;height:20px;border-radius:10px;background:var(--cb-border-hard);position:relative;transition:background .15s}
.pn-toggle span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.pn-toggle input:checked+span{background:var(--cb-error)}
.pn-toggle input:checked+span::after{transform:translateX(16px)}
.pn-tplpick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 20px}
.pn-tpl{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:10px;border:1px solid var(--cb-border-hard);cursor:pointer;position:relative}
.pn-tpl input{position:absolute;opacity:0}
.pn-tpl.is-on{border-color:var(--cb-link);box-shadow:0 0 0 1px var(--cb-link) inset}
.pn-tpl-name{font:600 14px/1.2 var(--cb-font-semibold);color:var(--cb-text)}
.pn-tpl-why{font:400 12px/1.3 var(--cb-font-regular);color:var(--cb-muted)}
.pn-tpl.is-on .pn-tpl-why{color:var(--cb-link-text,var(--cb-link))}
.pn-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.pn-actions .grow{flex:1}
.pn-side-sticky{position:sticky;top:92px;max-height:calc(100vh - 108px);overflow:auto;scrollbar-width:none}
.pn-side-sticky::-webkit-scrollbar{display:none}
.pn-side-title{font:700 11px/1 var(--cb-font-bold);letter-spacing:2px;text-transform:uppercase;color:var(--cb-link-text,var(--cb-link));margin-bottom:12px}
.pn-preview{display:block;border-radius:14px;overflow:hidden;background:var(--cb-card);border:1px solid var(--cb-border);color:inherit;text-decoration:none}
.pn-preview:hover{border-color:var(--cb-border-hard)}
.pn-preview-img{display:block;aspect-ratio:16/10;background-size:cover;background-position:50% 18%}
.pn-preview-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.pn-preview-body strong{font:600 15px/1.25 var(--cb-font-semibold);color:var(--cb-text)}
.pn-preview-body span{font:400 12px/1.4 var(--cb-font-regular);color:var(--cb-muted)}
.pn-preview-cta{color:var(--cb-link-text,var(--cb-link))!important;font-weight:600!important;margin-top:6px}
.pn-side-note{font:400 12px/1.5 var(--cb-font-regular);color:var(--cb-muted);margin-top:14px;text-wrap:pretty}
/* rows waiting on the upload: dimmed, values hidden until the job lands */
.pn-row.is-wait{opacity:.45}
.pn-row.is-wait .pn-row-act{visibility:hidden}
.pn-row.is-wait .pn-row-ico::before{content:"";display:block;width:14px;height:14px;margin:3px;border-radius:50%;border:1.5px dashed var(--cb-border-hard)}
.pn-row{transition:opacity .4s}
.pn-card-head h2 span{color:var(--cb-muted);font-weight:400}
/* single-page Add a product */
.pn-topbar{display:flex;align-items:center;gap:20px;margin-bottom:22px;padding-right:72px}
.pn-textbtn{display:inline-flex;align-items:center;gap:6px;color:var(--cb-link-text,var(--cb-link));font:600 12px/1 var(--cb-font-semibold);letter-spacing:.6px;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.pn-textbtn svg{width:16px;height:16px;fill:none;stroke:currentColor}
.pn-textbtn.is-danger{color:var(--cb-error)}
.pn-hint{font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted);white-space:nowrap}
.pn-read{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:6px;background:rgba(123,193,120,.14);color:var(--cb-commit);font:600 11px/1 var(--cb-font-semibold);letter-spacing:.3px}
.pn-read svg{width:13px;height:13px;fill:none;stroke:currentColor}
.pn-files{padding:12px 20px 16px;display:flex;flex-direction:column;gap:10px}
.pn-file-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:1212px}
.pn-file{display:grid;grid-template-columns:24px 44px minmax(0,1fr) 180px 28px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--cb-border);border-radius:10px;background:var(--cb-card);position:relative}
.pn-file-ext{display:flex;align-items:center;justify-content:center;height:44px;border-radius:8px;background:var(--cb-bg);color:var(--cb-text);font:700 11px/1 var(--cb-font-bold);letter-spacing:.5px}
.pn-file-name{font:600 13px/1.3 var(--cb-font-semibold);color:var(--cb-text);overflow-wrap:anywhere}
.pn-file-meta{font:400 12px/1.3 var(--cb-font-regular);color:var(--cb-muted);margin-top:2px}
.pn-file-bar{height:6px;border-radius:3px;background:var(--cb-bg);overflow:hidden;position:relative}
.pn-file-bar span{position:absolute;inset:0;width:var(--p);background:var(--cb-link);border-radius:3px;transition:width .5s}
.pn-file-bar span.is-done{background:var(--cb-commit)}
.pn-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;aspect-ratio:16/9;margin-top:16px;margin:0 20px 20px;border:1px dashed var(--cb-border-hard);border-radius:10px;color:var(--cb-text);font:400 14px/1.4 var(--cb-font-regular);text-align:center}
.pn-drop a{color:var(--cb-link-text,var(--cb-link))}
.pn-drop small{color:var(--cb-muted);font-size:12px}
.pn-drop.is-compact{flex-direction:row;justify-content:space-between;min-height:0;padding:12px 16px;margin:0;font-size:13px}
.pn-form{padding:6px 20px 20px;display:flex;flex-direction:column;gap:16px}
.pn-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pn-label{font:600 13px/18px var(--cb-font-semibold);color:var(--cb-muted);letter-spacing:.2px}
.pn-label small{font-weight:400;text-transform:none;letter-spacing:0}
.pn-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pn-input.is-wide{width:100%;height:40px;font-size:14px}
.pn-textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);color:var(--cb-text);font:400 14px/1.5 var(--cb-font-regular);resize:vertical}
.pn-textarea::placeholder{color:var(--cb-muted)}
.pn-sub-hint{font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted)}
.pn-sub-hint a,a.pn-sub-hint{color:var(--cb-link-text,var(--cb-link));text-decoration:none}
.pn-chips{display:flex;flex-wrap:wrap;gap:6px}
.pn-chip{display:inline-flex;align-items:center;gap:6px;height:30px;white-space:nowrap;padding:0 10px 0 12px;border-radius:999px;border:1px solid var(--cb-border-hard);color:var(--cb-text);font:600 12px/1 var(--cb-font-semibold);background:transparent}
.pn-chip.is-on{background:var(--cb-text);color:var(--cb-card);border-color:var(--cb-text)}
.pn-chip button{all:unset;cursor:pointer;font-size:14px;line-height:1;opacity:.7}
.pn-chip.is-add{cursor:pointer;color:var(--cb-link-text,var(--cb-link));border-style:dashed}
.pn-seg{display:flex;gap:6px;flex-wrap:wrap}
.pn-seg label{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--cb-border-hard);color:var(--cb-text);font:600 13px/1 var(--cb-font-semibold);cursor:pointer;position:relative;white-space:nowrap}
.pn-seg input{position:absolute;opacity:0}
/* The checked radio's label, as the seller clicks: `.is-on` was drawn by the server and never moved, so the
   old pick stayed highlighted (M5's check, fix-a). */
.pn-seg label:has(input:checked){border-color:var(--cb-link);box-shadow:0 0 0 1px var(--cb-link) inset;color:var(--cb-link-text,var(--cb-link))}
.pn-seg label:has(input:focus-visible){outline:2px solid var(--cb-link);outline-offset:2px}
.pn-checks{display:flex;gap:22px;flex-wrap:wrap}
.pn-checks.is-col{flex-direction:column;gap:10px}
.pn-check{display:inline-flex;align-items:center;gap:8px;font:400 13px/1 var(--cb-font-regular);color:var(--cb-text);cursor:pointer;position:relative}
.pn-check input{position:absolute;opacity:0}
.pn-check span{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--cb-border-hard);position:relative;flex:none}
.pn-check input:checked+span{background:var(--cb-link);border-color:var(--cb-link)}
.pn-check input:checked+span::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pn-check small{color:var(--cb-muted);font-size:12px}
.pn-details{border-top:1px solid var(--cb-border);padding-top:14px}
.pn-details summary{font:600 13px/1 var(--cb-font-semibold);color:var(--cb-text);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.pn-details summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.pn-details[open] summary::before{transform:rotate(45deg)}
.pn-details .pn-2col{margin-top:14px}
.pn-media{display:flex;flex-direction:column;gap:12px;padding:16px 20px 20px}
.pn-media-cover{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--cb-bg);box-shadow:0 6px 18px rgba(20,23,33,.12)}
.pn-media-cover img,.pn-media-item img{width:100%;height:100%;object-fit:cover;display:block}
.pn-media-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:0;padding:0}
.pn-media-item{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--cb-bg);list-style:none}
.pn-media-item.is-more{display:flex;align-items:center;justify-content:center;color:var(--cb-muted);font:600 13px/1 var(--cb-font-semibold);border:1px dashed var(--cb-border-hard)}
.pn-media-item.is-video::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border:9px solid transparent;border-left:14px solid #fff;transform:translate(-30%,-50%);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));z-index:1;pointer-events:none}
.pn-media-tag{position:absolute;left:8px;bottom:8px;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;padding:4px 8px;border-radius:5px;background:rgba(14,19,32,.78);color:#fff;font:600 11px/1 var(--cb-font-semibold)}
.pn-money{display:flex;align-items:center;height:40px;border-radius:8px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);overflow:hidden}
.pn-money span{padding:0 12px;border-right:1px solid var(--cb-border-hard);color:var(--cb-muted);font:600 12px/1 var(--cb-font-semibold);height:100%;display:flex;align-items:center}
.pn-money input{flex:1;min-width:0;border:0;background:transparent;padding:0 12px;color:var(--cb-text);font:600 16px/1 var(--cb-font-semibold);outline:none}
.pn-btn.is-block{width:100%;height:48px;font-size:15px;margin-top:14px;border-radius:999px}
.pn-preview.is-mini{display:grid;grid-template-columns:96px 1fr;margin-top:14px}
.pn-preview.is-mini .pn-preview-img{aspect-ratio:auto;height:100%}
.pn-preview.is-mini .pn-preview-body{padding:12px 14px}
.pn-preview.is-mini strong{font-size:13px}
.pn-side .pn-card{margin-bottom:0}
[data-pn-prefill]{transition:box-shadow .5s}
.pn-flash{box-shadow:0 0 0 3px rgba(123,193,120,.35)!important}
/* Authenticity + price flags: lifted from production/store/products/new (mobile), same classes */
.pn-caps{font:400 11px/1.2 var(--cb-font-regular)!important;letter-spacing:1.6px;text-transform:uppercase;color:var(--cb-muted)!important}
.pn-flags{padding:12px 20px 20px}
.ap-flag{width:100%;min-height:52px;padding:14px 16px;background:var(--cb-bg);border:1px solid var(--cb-border);border-radius:8px;display:flex;align-items:flex-start;gap:12px;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ap-flag+.ap-flag{margin-top:8px}
.ap-flag.is-on{background:rgba(64,179,222,.08);border-color:var(--cb-link)}
.ap-flag.is-on.is-warn{background:rgba(236,77,77,.08);border-color:#ec4d4d}
.ap-flag.is-on.is-protect{background:rgba(123,193,120,.10);border-color:#7bc178}
.ap-flag-check{margin-top:1px;width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--cb-border-hard);background:var(--cb-card);border-radius:3px;display:inline-flex;align-items:center;justify-content:center}
.ap-flag-check svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ap-flag.is-on .ap-flag-check{background:var(--cb-link);border-color:var(--cb-link)}
.ap-flag.is-on.is-warn .ap-flag-check{background:#ec4d4d;border-color:#ec4d4d}
.ap-flag.is-on.is-protect .ap-flag-check{background:#7bc178;border-color:#7bc178}
.ap-flag.is-on .ap-flag-check svg{opacity:1}
.ap-flag-icon{flex-shrink:0;margin-top:1px;display:inline-flex;align-items:center}
.ap-flag-icon svg{width:18px;height:18px}
.ap-flag-text{flex:1;min-width:0}
.ap-flag-label{display:block;font:600 14px/1.3 var(--cb-font-semibold);color:var(--cb-text)}
.ap-flag-sub{display:block;margin-top:4px;font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted);text-wrap:pretty}
.ap-flag-sub em{font-style:normal;color:var(--cb-commit)}
.ap-price-link{display:inline-flex;align-items:center;gap:4px;color:var(--cb-link-text,var(--cb-link));font:400 12px/1 var(--cb-font-regular);text-decoration:none}
.ap-price-link svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-price-flags{padding-top:14px;border-top:1px solid var(--cb-border);display:flex;flex-direction:column;gap:12px}
.ap-price-flag{display:flex;align-items:center;gap:10px;cursor:pointer;background:transparent;border:none;padding:0;width:100%;text-align:left;font:inherit;color:inherit}
.ap-price-check{width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--cb-border-hard);background:var(--cb-card);border-radius:3px;display:inline-flex;align-items:center;justify-content:center}
.ap-price-check svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ap-price-flag[data-pressed="true"] .ap-price-check{background:#7bc178;border-color:#7bc178}
.ap-price-flag[data-pressed="true"] .ap-price-check svg{opacity:1}
.ap-price-flag-label{font:500 13px/1.3 var(--cb-font-regular);color:var(--cb-text)}
.ap-info-wrap{position:relative;display:inline-flex}
.ap-info-dot{width:18px;height:18px;padding:0;border-radius:50%;background:var(--cb-bg);color:var(--cb-muted);border:1px solid var(--cb-border-hard);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:700 10px/1 var(--cb-font-regular)}
.ap-info-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:220px;padding:8px 10px;border-radius:8px;background:var(--cb-text);color:var(--cb-card);font:400 12px/1.4 var(--cb-font-regular);box-shadow:0 8px 18px rgba(20,23,33,.28);z-index:5}
.ap-info-tip[hidden]{display:none}
.ap-info-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--cb-text)}
.pn-btn.is-ghost.is-block{height:44px;margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px}
.pn-btn.is-ghost.is-block svg{width:16px;height:16px;fill:none;stroke:currentColor}
/* compact authenticity in the side column */
.pn-side .pn-card+.pn-card{margin-top:14px}
.is-auth-side .pn-flags{padding:10px 14px 14px}
.is-auth-side .ap-flag{padding:10px 12px;min-height:0;gap:10px;align-items:center}
.is-auth-side .ap-flag-label{font-size:14px}
.is-auth-side .ap-flag-sub{display:none}
.is-auth-side .ap-flag.is-on .ap-flag-sub{display:block;font-size:13px;margin-top:2px; line-height:19px;}
.is-auth-side .ap-flag.is-on{align-items:flex-start}
.pn-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.pn-suggest-k{font:600 11px/1 var(--cb-font-semibold);color:var(--cb-muted);letter-spacing:.3px;margin-right:2px}
.pn-chip.is-sug{height:26px;font-size:11px;border-style:dashed;color:var(--cb-link-text,var(--cb-link));cursor:pointer}
.pn-chip.is-sug:hover{border-style:solid}
.pn-suggest-why{font:400 11px/1 var(--cb-font-regular);color:var(--cb-muted);margin-left:2px}
.pn-drop.is-compact{aspect-ratio:auto;margin-top:0}
.pn-media-cover .pn-media-tag{font-size:12px;padding:6px 10px}
.pn-media-grid{max-width:1212px}
/* price: pay-what-you-want swaps the rows (mobile flips a card; desktop cross-fades) */
.pn-price-rows{display:flex;flex-direction:column;gap:16px;animation:pn-fade .25s}
@keyframes pn-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pn-money.is-green{border-color:#7bc178}
.pn-money.is-green span{color:#7bc178;border-color:#7bc178}
.pn-label .ap-info-wrap{margin-left:6px;vertical-align:middle}
.pn-stock-input{margin-left:auto;width:72px;height:30px;padding:0 10px;border-radius:6px;border:1px solid #7bc178;background:var(--cb-bg);color:var(--cb-text);font:600 13px/1 var(--cb-font-semibold);text-align:right;outline:none;animation:pn-fade .2s}
.pn-stock-input[hidden]{display:none}
/* media grid: click = lightbox, drag handle = reorder (services/v3/reorder), × = remove, + = add */
.pn-media-open{position:absolute;inset:0;border:0;padding:0;background-size:cover;background-position:center;cursor:zoom-in;transition:transform .2s}
.pn-media-item:hover .pn-media-open{transform:scale(1.04)}
.pn-media-item .pn-media-tag{pointer-events:none;z-index:1}
.pn-media-drag,.pn-media-x{position:absolute;top:6px;width:26px;height:26px;border-radius:999px;background:rgba(20,23,33,.78);color:#fff;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;z-index:2}
.pn-media-item:hover .pn-media-drag,.pn-media-item:hover .pn-media-x,.pn-media-item.cb-pcard-dragging .pn-media-drag{opacity:1}
.pn-media-drag{left:6px;cursor:grab;touch-action:none}
.pn-media-drag svg{width:12px;height:12px;fill:currentColor}
.pn-media-x{right:6px}
.pn-media-x svg{width:12px;height:12px;fill:none;stroke:currentColor}
.pn-media-x:hover{background:#ec4d4d}
.pn-media-grid.is-reordering{user-select:none}
.pn-media-grid.is-reordering>li{transition:transform 150ms cubic-bezier(.32,.72,.24,1)}
.pn-media-grid>li.cb-pcard-dragging{position:relative;z-index:5;transition:none;box-shadow:0 0 0 2px var(--cb-link),0 14px 32px rgba(20,23,33,.32);transform-origin:center}
.pn-media-grid>li.cb-pcard-dragging .pn-media-open{transform:scale(1.03)}
.pn-media-item.is-add{background:transparent;border:1px dashed var(--cb-border-hard)}
.pn-media-addbtn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--cb-link-text,var(--cb-link));font:600 12px/1 var(--cb-font-semibold);cursor:pointer}
.pn-media-addbtn svg{width:18px;height:18px;fill:none;stroke:currentColor}
.pn-media-item.is-add:hover{border-color:var(--cb-link);background:rgba(64,179,222,.06)}
.pn-media-item.is-removing{transform:scale(.85);opacity:0;transition:transform .18s,opacity .18s}
.cb-lightbox{z-index:1000}
/* Product view (ported from production/store/products/new - same classes, desktop sizes) */
.pn-pv{max-width:1212px}
.ap-seg{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--cb-bg);border:1px solid var(--cb-border);border-radius:8px;padding:3px;margin-bottom:12px}
.ap-seg-btn{height:40px;background:transparent;color:var(--cb-muted);border:none;border-radius:6px;font:600 14px/1 var(--cb-font-semibold);letter-spacing:.2px;cursor:pointer;transition:background .12s,color .12s,box-shadow .12s}
.ap-seg-btn.is-active{background:var(--cb-card);color:var(--cb-text);box-shadow:0 1px 2px rgba(20,23,33,.08)}
.ap-drop{border:1.5px dashed var(--cb-border-hard);border-radius:10px;background:var(--cb-bg);background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(122,132,153,.05) 11px 12px);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px}
.ap-drop-text{font:400 14px/1.5 var(--cb-font-regular);color:var(--cb-muted);text-align:center}
.ap-drop-text-sec{opacity:.7}
.ap-drop-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px}
.ap-btn-primary{height:48px;padding:0 18px;background:var(--cb-link);color:#fff;border:none;border-radius:999px;font:700 13px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.ap-btn-primary:hover{filter:brightness(1.05)}
.ap-btn-primary svg{width:16px;height:16px;fill:none;stroke:currentColor}
.ap-btn-outline{height:44px;padding:0 18px;background:transparent;color:var(--cb-text);border:1px solid var(--cb-border-hard);border-radius:8px;font:600 13px/1 var(--cb-font-semibold);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}
.ap-btn-outline:hover{border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}
.ap-btn-outline svg{width:16px;height:16px;fill:none;stroke:currentColor}
.ap-drop.is-empty-3d,.ap-drop.is-empty-video{gap:0}
.ap-drop.is-empty-3d>*,.ap-drop.is-empty-video>*{width:100%;max-width:360px}
.ap-embed-row{display:flex;gap:6px;align-items:stretch}
.ap-embed-input{flex:1;min-width:0;height:40px;padding:0 12px;background:var(--cb-card);color:var(--cb-text);border:1px solid var(--cb-border);border-radius:8px;font:400 13px/1 var(--cb-font-regular);outline:none}
.ap-embed-input.is-error{border-color:#ec4d4d}
.ap-embed-input:focus{border-color:var(--cb-link)}
.ap-embed-btn{height:40px;padding:0 20px;background:var(--cb-link);color:#fff;border:none;border-radius:999px;font:700 12px/1 var(--cb-font-bold);letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;flex:0 0 auto}
.ap-embed-err{margin-top:6px;font:400 12px/1.3 var(--cb-font-regular);color:#ec4d4d}
.ap-divider-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;font:500 10px/1 var(--cb-font-regular);letter-spacing:1.6px;color:var(--cb-muted);text-transform:uppercase}
.ap-divider-or::before,.ap-divider-or::after{content:"";flex:1;height:1px;background:var(--cb-border)}
.ap-media-fill{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#0a0c12;border:1px solid var(--cb-border);box-shadow:0 6px 18px rgba(20,23,33,.12)}
.ap-media-fill img,.ap-media-fill video,.ap-media-fill iframe{width:100%;height:100%;display:block;object-fit:cover;border:none}
.ap-media-fill.is-picture{cursor:grab;user-select:none}
.ap-media-fill.is-picture.is-dragging{cursor:grabbing}
/* B2: the ready picture is dragged to reposition it */
.ap-media-fill[data-cover-state="ready"].is-picture img{cursor:grab;user-select:none}
.ap-media-fill.is-dragging img{cursor:grabbing}
.ap-media-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,0) 65%,rgba(0,0,0,.35) 100%);pointer-events:none}
.ap-media-chips{position:absolute;top:10px;right:10px;display:flex;gap:6px}
/* A cover the worker is still attaching (QA item 213): the dark box with its note, no image. */
.ap-media-fill.is-processing{display:flex;align-items:center;justify-content:center;cursor:default}
.ap-media-processing{color:#fff;opacity:.85;font:600 13px/1.4 var(--cb-font-semibold)}
/* The chosen cover while its bytes travel and while the worker processes it: the seller's own image,
   dimmed, under "Uploading… N%" and then "Processing…" (tester-r's retest, 2026-10-12: the frame went black). */
.ap-media-fill.is-processing img{position:absolute;inset:0;opacity:.45}
.ap-media-fill.is-processing img~.ap-media-processing{position:relative;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* A picture the worker gave up on: says so, with Retry and Replace (tester-r's retest, 2026-10-12). */
.ap-media-fill.is-failed{display:flex;align-items:center;justify-content:center;cursor:default;padding:0 24px}
.ap-media-failed{text-align:center;color:#fff}
.ap-media-failed-text{margin:0 0 12px;font:600 13px/1.4 var(--cb-font-semibold)}
.ap-media-failed-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ap-media-failed .ap-chip{background:rgba(255,255,255,.16)}
.ap-media-failed .ap-chip:hover{background:rgba(255,255,255,.26)}
.ap-chip{height:30px;padding:0 12px;background:rgba(20,23,33,.72);color:#fff;border:none;border-radius:999px;font:600 12px/1 var(--cb-font-semibold);cursor:pointer;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(6px)}
.ap-chip svg{width:13px;height:13px;fill:none;stroke:currentColor}
.ap-chip.is-danger{background:rgba(236,77,77,.92)}
.ap-media-name{position:absolute;left:12px;bottom:10px;right:120px;color:#fff;font:500 12px/1.2 var(--cb-font-regular);text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-aspect-badge{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;font:600 10px/1 var(--cb-font-regular);letter-spacing:.6px;padding:5px 8px;border-radius:4px}
.ap-media-hint{margin-top:10px;font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted);text-align:center}
.ap-3d-logo{display:flex;justify-content:center;margin-bottom:12px}
.ap-3d-logo img{height:24px;width:auto;display:block;opacity:.9}
.ap-video-logos{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:12px}
.ap-video-logos svg{width:26px;height:26px}
.ap-cloud{width:100%}
.ap-cloud-toggle{width:100%;height:44px;padding:0 14px;background:transparent;color:var(--cb-text);border:1px solid var(--cb-border-hard);border-radius:8px;font:600 13px/1 var(--cb-font-semibold);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ap-cloud-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor}
.ap-cloud-toggle .ap-caret{transition:transform .18s;margin-left:2px}
.ap-cloud[data-expanded="true"] .ap-cloud-toggle .ap-caret{transform:rotate(180deg)}
.ap-cloud-grid{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s cubic-bezier(.4,0,.2,1)}
.ap-cloud[data-expanded="true"] .ap-cloud-grid{grid-template-rows:1fr}
.ap-cloud-grid>div{overflow:hidden}
.ap-cloud-providers{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .22s}
.ap-cloud[data-expanded="true"] .ap-cloud-providers{opacity:1;transform:none}
.ap-cloud-prov{height:40px;padding:0 12px;background:var(--cb-card);color:var(--cb-text);border:1px solid var(--cb-border);border-radius:8px;font:600 13px/1 var(--cb-font-semibold);cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;overflow:hidden}
.ap-cloud-prov:hover{border-color:var(--cb-link)}
.ap-cloud-prov-icon{width:22px;height:22px;border-radius:6px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.ap-cloud-prov-icon svg{width:16px;height:16px;fill:currentColor}
.ap-cloud-prov-name{overflow:hidden;text-overflow:ellipsis}
.pn-media-grid{margin-top:16px}
.pn-previews-head{display:flex;align-items:baseline;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid var(--cb-border);max-width:1212px}
.pn-drop.is-previews{aspect-ratio:auto;min-height:110px;margin:12px 0 0;max-width:1212px}
.pn-media-grid{margin-top:12px;max-width:1212px}
.ap-cloud.is-files{width:100%}
.ap-cloud.is-files .ap-cloud-toggle{height:44px;font-size:14px}
.ap-cloud.is-files .ap-cloud-prov{height:44px;font-size:14px}
.pn-drop.is-previews{gap:10px;padding:20px}
/* every drop target shares the striped dark surface */
.pn-media-item.is-add{background:var(--cb-bg);background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(122,132,153,.05) 11px 12px);border:1.5px dashed var(--cb-border-hard)}
.pn-drop.is-dragover,.ap-drop.is-dragover,.pn-media-item.is-add.is-dragover{border-color:var(--cb-link);background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(64,179,222,.12) 11px 12px)}
.ap-drop.is-compact{aspect-ratio:auto;padding:28px 24px;gap:12px;max-width:1212px;margin-top:12px}
/* file rows: rename, remove (the handoff's drag handle here is not wired in v3: no file-order endpoint) */
.pn-file-drag{position:static;width:24px;height:32px;border-radius:6px;background:transparent;color:var(--cb-muted);cursor:grab;touch-action:none;display:inline-flex;align-items:center;justify-content:center}
.pn-file-drag svg{width:14px;height:14px;fill:currentColor}
.pn-file:hover .pn-file-drag{color:var(--cb-text)}
.pn-file-list.is-reordering{user-select:none}
.pn-file-list.is-reordering>li{transition:transform 150ms cubic-bezier(.32,.72,.24,1)}
.pn-file-list>li.cb-pcard-dragging{z-index:5;transition:none;box-shadow:0 0 0 2px var(--cb-link),0 14px 32px rgba(20,23,33,.32)}
.pn-file-name{display:flex;align-items:center;gap:2px;min-width:0}
.pn-file-stem{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;padding:1px 3px;margin-left:-3px;outline:none}
.pn-file-stem[contenteditable="true"]{background:var(--cb-bg);box-shadow:0 0 0 1px var(--cb-link);white-space:nowrap;overflow:visible;text-overflow:clip}
.pn-file-dot{color:var(--cb-muted);flex:none}
.pn-file-rename{width:24px;height:24px;border:0;background:transparent;color:var(--cb-muted);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;margin-left:4px;flex:none}
.pn-file:hover .pn-file-rename,.pn-file-rename:focus-visible{opacity:1}
.pn-file-rename:hover{color:var(--cb-text);background:var(--cb-bg)}
.pn-file-rename svg{width:13px;height:13px;fill:none;stroke:currentColor}
.pn-file-x{width:28px;height:28px;border:0;background:transparent;color:var(--cb-muted);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0}
.pn-file:hover .pn-file-x{opacity:1}
.pn-file-x:hover{background:rgba(236,77,77,.12);color:#ec4d4d}
.pn-file-x svg{width:14px;height:14px;fill:none;stroke:currentColor}
.pn-file-pos{position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;border-radius:10px 0 0 10px;background:var(--cb-link);opacity:0}
/* mounted inline on the store page */
.ms-panel-body .pn-topbar{display:none}
.ms-panel-body .pn-wrap{padding-top:0;max-width:none}
/* Product view body always reserves the 16:9 frame, whatever child is rendered (empty state, embed, image) → no height jump on tab switch / mount */
.pn-pv [data-ap-media-body]{position:relative;aspect-ratio:16/9;max-width:1212px}
.pn-pv [data-ap-media-body]>.ap-drop,.pn-pv [data-ap-media-body]>.ap-media-fill{position:absolute;inset:0;aspect-ratio:auto;height:100%;box-sizing:border-box}
.pn-pv .ap-drop.is-empty-3d,.pn-pv .ap-drop.is-empty-video{overflow:auto;justify-content:center}
.pn-pv .ap-drop{transition:none}
/* tighter side column */
.pn-side .pn-card-head{padding:12px 16px}
.pn-side .pn-form{padding:4px 16px 14px;gap:12px}
.pn-side .pn-field{gap:4px}
.pn-side .pn-money{height:36px}
.pn-side .pn-money input{font-size:15px}
.pn-side .ap-price-flags{padding-top:10px;gap:8px}
.pn-side .pn-card+.pn-card{margin-top:10px}
.is-auth-side .pn-flags{padding:8px 12px 12px}
.is-auth-side .ap-flag{padding:8px 10px;gap:8px}
.is-auth-side .ap-flag+.ap-flag{margin-top:6px}
.is-auth-side .ap-flag-label{font-size:14px}
.pn-btn.is-primary.is-block{height:44px;margin-top:10px;font-size:14px}
.pn-btn.is-ghost.is-block{height:40px;margin-top:8px;font-size:12.5px}
.pn-side-note{margin-top:10px;font-size:11.5px}
.pn-preview.is-mini{margin-top:10px}
.pn-side .pn-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* "Shown as" template cards */
.pn-label-sub{font-weight:400;text-transform:none;letter-spacing:0;color:var(--cb-muted);margin-left:6px}
.pn-tplcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pn-tplcard{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;row-gap:2px;align-items:start;padding:10px;border:1px solid var(--cb-border-hard);border-radius:10px;cursor:pointer;background:var(--cb-card);transition:border-color .12s,box-shadow .12s}
.pn-tplcard:hover{border-color:var(--cb-text)}
.pn-tplcard input{position:absolute;opacity:0;pointer-events:none}
.pn-tplcard.is-on{border-color:var(--cb-link);box-shadow:0 0 0 1px var(--cb-link) inset}
.pn-tplcard-wire{grid-row:1/4;display:block;aspect-ratio:120/56;border-radius:6px;background:var(--cb-bg);padding:6px;color:var(--cb-muted)}
.pn-tplcard-wire svg{width:100%;height:100%;max-width:none;max-height:none;fill:currentColor;stroke:currentColor;stroke-width:1.2;opacity:.75}
.pn-tplcard-wire svg rect{stroke:none}
.pn-tplcard.is-on .pn-tplcard-wire{color:var(--cb-link-text,var(--cb-link))}
.pn-tplcard-name{font:600 13.5px/1.2 var(--cb-font-semibold);color:var(--cb-text);margin-top:1px}
.pn-tplcard-desc{font:400 12px/1.45 var(--cb-font-regular);color:var(--cb-muted);text-wrap:pretty}
.pn-tplcard-preview{align-self:end;margin-top:4px;font:600 12px/1 var(--cb-font-semibold);color:var(--cb-link-text,var(--cb-link));text-decoration:none}
.pn-tplcard-preview:hover{text-decoration:underline}
/* first-run guide */
.pn-intro{position:relative;display:flex;align-items:center;gap:20px;padding:18px 56px 18px 22px;margin-bottom:18px;border-radius:14px;background:linear-gradient(90deg,rgba(64,179,222,.10),rgba(123,193,120,.08));border:1px solid rgba(64,179,222,.25)}
.pn-intro[hidden]{display:none}
.pn-intro-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1}
.pn-intro-step{display:flex;gap:12px;align-items:flex-start}
.pn-intro-step strong{display:block;font:600 14px/1.3 var(--cb-font-semibold);color:var(--cb-text)}
.pn-intro-step span:not(.pn-step-n){display:block;margin-top:3px;font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted);text-wrap:pretty}
.pn-step-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--cb-link);color:#fff;font:700 13px/26px var(--cb-font-bold);text-align:center}
.pn-intro-x{position:absolute;right:12px;top:12px;width:30px;height:30px;border:0;border-radius:999px;background:transparent;color:var(--cb-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pn-intro-x:hover{background:var(--cb-bg);color:var(--cb-text)}
.pn-intro-x svg{width:14px;height:14px;fill:none;stroke:currentColor}
/* card titles with a why line */
.pn-card-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pn-card-title h2{flex:none}
.pn-why{margin:0;font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted);text-wrap:pretty}
/* layout picker: compact rows */
.pn-tplcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pn-tplcard{grid-template-columns:20px 64px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-items:center;padding:10px 12px}
.pn-tplcard::before{content:"";grid-row:1/3;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--cb-border-hard);background:var(--cb-card);box-sizing:border-box}
.pn-tplcard.is-on::before{border:5px solid var(--cb-link)}
.pn-tplcard-wire{grid-row:1/3;padding:4px}
.pn-tplcard-name{grid-column:3}
.pn-tplcard-desc{grid-column:3;font-size:12px}
.pn-tplcard-preview{grid-column:4;grid-row:1/3;align-self:center;margin:0;font-size:12px;white-space:nowrap}
.pn-tplcard-sug{grid-column:4;grid-row:1;justify-self:end;align-self:start;margin:-4px -4px 0 0;height:18px;padding:0 7px;border-radius:5px;background:rgba(64,179,222,.14);color:var(--cb-link-text,var(--cb-link));font:600 10px/18px var(--cb-font-semibold);letter-spacing:.4px;text-transform:uppercase}
.pn-tplcard.is-on .pn-tplcard-preview{grid-row:2}
/* Listing: label column + control column, one hairline per row */
.pn-rows{display:flex;flex-direction:column}
.pn-row2{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:18px 20px;border-bottom:1px solid var(--cb-border)}
.pn-row2:last-child{border-bottom:0}
.pn-row2-t{font:600 14px/1.3 var(--cb-font-semibold);color:var(--cb-text)}
.pn-row2-h{margin-top:4px;font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted);text-wrap:pretty}
.pn-row2-v{min-width:0;display:flex;flex-direction:column;gap:8px}
.pn-row2 .pn-input.is-wide{max-width:640px}
.pn-row2 .pn-textarea{max-width:760px}
.pn-row2 .pn-suggest{margin-top:2px}
.pn-seo{border-top:0;padding:0}
.pn-seo summary{min-height:52px;box-sizing:border-box;padding:16px 20px;font-size:14px;line-height:1.4}
.pn-seo summary::-webkit-details-marker{display:none}
.pn-seo summary:hover{background:color-mix(in srgb,var(--cb-link) 5%,transparent)}
.pn-seo summary:focus-visible{outline:2px solid var(--cb-link);outline-offset:-4px;border-radius:6px}
.pn-seo-optional{margin-left:auto;color:var(--cb-muted);font-weight:400;font-size:12px}
.pn-seo-body{padding:0 20px 20px}
.pn-seo-body>.pn-row2-h{margin:0}
.pn-seo .pn-2col{max-width:760px;margin-top:14px}
.pn-row2 .pn-2col .pn-field{gap:6px}
/* Page layout: collapsed to the current pick; Change expands the options */
.pn-layout-cur{display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--cb-link);border-radius:10px;max-width:640px;background:rgba(64,179,222,.06)}
.pn-layout-cur .pn-tplcard-wire{width:72px;flex:none;padding:4px}
.pn-layout-cur .pn-tplcard-wire svg{opacity:.9}
.pn-layout-cur-t{flex:1;min-width:0}
.pn-layout-cur-t strong{display:block;font:600 14px/1.2 var(--cb-font-semibold);color:var(--cb-text)}
.pn-layout-cur-t span{display:block;margin-top:2px;font:400 12px/1.4 var(--cb-font-regular);color:var(--cb-muted)}
.pn-layout-cur .pn-tplcard-sug{position:static;margin:0;height:20px;line-height:20px}
.pn-layout-cur button{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--cb-border-hard);background:transparent;color:var(--cb-text);font:600 12px/1 var(--cb-font-semibold);cursor:pointer;white-space:nowrap}
.pn-layout-cur button:hover{background:var(--cb-bg)}
.pn-layout-pick .pn-tplcards{display:none;margin-top:8px;max-width:640px;grid-template-columns:1fr}
.pn-layout-pick.is-open .pn-tplcards{display:grid}
.pn-layout-pick.is-open .pn-layout-cur{display:none}
.pn-tplcard .pn-tplcard-sug{display:none}
/* Page layout: 2×2 tall tiles, nothing preselected */
.pn-layout-pick .pn-tplcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px;margin-top:0}
.pn-layout-pick .pn-tplcard{display:flex;flex-direction:column;gap:0;padding:14px 14px 12px;aspect-ratio:5/4;border-radius:12px}
.pn-layout-pick .pn-tplcard::before{position:absolute;top:12px;right:12px}
.pn-layout-pick .pn-tplcard-wire{width:100%;aspect-ratio:auto;flex:1;min-height:0;padding:14px 18px;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.pn-layout-pick .pn-tplcard-wire svg{width:100%;height:auto;max-height:100%}
.pn-layout-pick .pn-tplcard-name{font-size:15px}
.pn-layout-pick .pn-tplcard-desc{margin-top:3px;font-size:12px;line-height:1.4}
.pn-layout-pick .pn-tplcard-preview{align-self:flex-start;margin-top:8px;font-size:12px}
.pn-layout-pick .pn-tplcard.is-sug::after{content:"Suggested";position:absolute;top:12px;left:12px;height:20px;padding:0 7px;border-radius:5px;background:rgba(64,179,222,.14);color:var(--cb-link-text,var(--cb-link));font:600 10px/20px var(--cb-font-semibold);letter-spacing:.4px;text-transform:uppercase}
.pn-layout-pick .pn-tplcard-wire svg{stroke-width:1.2;opacity:.85}
.pn-layout-pick .pn-tplcard-wire svg rect{fill:currentColor;stroke:none}
.pn-layout-pick .pn-tplcard-wire svg path{stroke:currentColor}
/* per-layout spec cards */
[data-pn-for]{display:none}
[data-pn-for].is-for{display:block}
.pn-card-head .pn-read{flex:none}
/* course builder */
.pn-chapters{list-style:none;margin:0;padding:8px 20px 4px;display:flex;flex-direction:column;gap:10px}
.pn-chapter{border:1px solid var(--cb-border);border-radius:10px;background:var(--cb-card);overflow:hidden}
.pn-chapter-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--cb-bg)}
.pn-chapter-t{font:600 14px/1.2 var(--cb-font-semibold);color:var(--cb-text);padding:1px 4px;border-radius:4px;outline:none}
.pn-chapter-t[contenteditable="true"]{background:var(--cb-card);box-shadow:0 0 0 1px var(--cb-link)}
.pn-chapter-meta{margin-left:auto;font:400 12px/1 var(--cb-font-regular);color:var(--cb-muted);white-space:nowrap}
.pn-chapter-head .pn-file-rename{opacity:0}
.pn-chapter-head:hover .pn-file-rename{opacity:1}
.pn-lessons{list-style:none;margin:0;padding:4px 8px 6px;display:flex;flex-direction:column}
.pn-lesson{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px}
.pn-lesson:hover{background:var(--cb-bg)}
.pn-lesson-ico{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--cb-muted)}
.pn-lesson-ico svg{width:16px;height:16px;fill:none;stroke:currentColor}
.pn-lesson-t{flex:1;min-width:0;font:400 13.5px/1.3 var(--cb-font-regular);color:var(--cb-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 4px;border-radius:4px;outline:none}
.pn-lesson-t[contenteditable="true"]{background:var(--cb-card);box-shadow:0 0 0 1px var(--cb-link);overflow:visible}
.pn-lesson-d{font:500 12px/1 var(--cb-font-regular);color:var(--cb-muted);width:44px;text-align:right}
.pn-lesson-free{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--cb-font-regular);color:var(--cb-muted);cursor:pointer;position:relative;margin-left:8px;width:100px}
.pn-lesson-free input{position:absolute;opacity:0}
.pn-lesson-free span{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--cb-border-hard);position:relative;flex:none}
.pn-lesson-free input:checked+span{background:var(--cb-link);border-color:var(--cb-link)}
.pn-lesson-free input:checked+span::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.pn-lesson-free input:checked~*{color:var(--cb-link-text,var(--cb-link))}
.pn-chapter-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 18px}
.pn-chapters.is-reordering,.pn-lessons.is-reordering{user-select:none}
.pn-chapters>li.cb-pcard-dragging,.pn-lessons>li.cb-pcard-dragging{z-index:5;box-shadow:0 0 0 2px var(--cb-link),0 14px 32px rgba(20,23,33,.32);background:var(--cb-card)}
.pn-lesson .pn-file-drag{width:20px;color:var(--cb-border-hard)}
.pn-lesson:hover .pn-file-drag{color:var(--cb-muted)}
[data-pn-check-for]{display:none}
[data-pn-check-for].is-for{display:grid}
/* Course mode for Product files: chapter header rows live in the same list as the files */
.pn-file-list.is-course{gap:6px}
.pn-file.is-chapter{grid-template-columns:24px minmax(0,1fr) auto 28px;background:var(--cb-bg);border-color:var(--cb-border);padding:8px 12px;margin-top:10px}
.pn-file.is-chapter:first-child{margin-top:0}
.pn-file.is-chapter .pn-file-body{display:flex;align-items:center;gap:8px}
.pn-file.is-chapter .pn-file-stem{font:600 14px/1.2 var(--cb-font-semibold)}
.pn-chapter-meta{font:400 12px/1 var(--cb-font-regular);color:var(--cb-muted);white-space:nowrap}
.pn-file-list.is-course .pn-file:not(.is-chapter){margin-left:28px}
.pn-file-free{display:none;align-items:center;gap:6px;justify-self:start;font:500 11.5px/1 var(--cb-font-regular);color:var(--cb-muted);cursor:pointer;position:relative;white-space:nowrap}
.pn-file-list.is-course .pn-file[data-kind="video"] .pn-file-free{display:inline-flex}
.pn-file-free input{position:absolute;opacity:0}
.pn-file-free span{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--cb-border-hard);position:relative;flex:none}
.pn-file-free input:checked+span{background:var(--cb-link);border-color:var(--cb-link)}
.pn-file-free input:checked+span::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.pn-file-free input:checked~*{color:var(--cb-link-text,var(--cb-link))}
.pn-file-list.is-course .pn-file{grid-template-columns:24px 44px minmax(0,1fr) 110px 180px 28px}
.pn-file-list:not(.is-course) .pn-file-free{display:none}
.pn-add-chapter{margin-left:auto;height:32px;font-size:12px}
.pn-file-list.is-course .pn-file-drag{color:var(--cb-muted)}
.pn-file-list.is-course .pn-file.is-chapter{grid-template-columns:24px minmax(0,1fr) auto 28px}
.pn-file-list.is-course .pn-file.is-chapter .pn-file-body{min-width:0}
.pn-file.is-chapter .pn-file-stem{max-width:100%}
.pn-file.is-chapter .pn-file-rename{opacity:0;margin-left:2px}
.pn-file.is-chapter:hover .pn-file-rename{opacity:1}
.pn-file.is-chapter.is-drop-target{border-color:var(--cb-link);box-shadow:0 0 0 1px var(--cb-link) inset}
.pn-file.is-block-drag{background:var(--cb-card)}
.pn-file-list.is-course .pn-file:not(.is-chapter) .pn-file-free{display:inline-flex;visibility:hidden}
.pn-file-list.is-course .pn-file[data-kind="video"] .pn-file-free{visibility:visible}
.pn-file-list[data-group-mode="2d"] .pn-file-free{display:none!important}
.pn-file-list[data-group-mode="2d"] .pn-file{grid-template-columns:24px 44px minmax(0,1fr) 180px 28px}
.pn-file-list[data-group-mode="2d"] .pn-file.is-chapter{grid-template-columns:24px minmax(0,1fr) auto 28px}
/* Save remains available while the listing and uploads are unfinished. */
.pn-side-sticky{top:148px;max-height:calc(100vh - 164px)}
@media(max-width:1200px){.pn-side-sticky{position:static;max-height:none;overflow:visible}}
.pn-publish-controls{padding:18px;margin-bottom:14px;background:var(--cb-card);border:1px solid var(--cb-border-hard);border-radius:12px}
.pn-publish-actions{display:grid;grid-template-columns:1.25fr 1fr;gap:10px}
.pn-publish-actions .pn-btn{height:44px;margin:0;padding:0 14px;border-radius:999px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.pn-publish-actions .pn-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pn-btn.is-draft{background:color-mix(in srgb,var(--cb-link) 12%,var(--cb-card));border:1px solid var(--cb-link);color:var(--cb-text)}
.pn-btn.is-draft:hover{background:color-mix(in srgb,var(--cb-link) 22%,var(--cb-card))}
.pn-btn[data-pn-publish]:disabled{background:var(--cb-bg);border-color:var(--cb-border-hard);color:var(--cb-muted);cursor:not-allowed;filter:none;box-shadow:none;transform:none}
.pn-publish-actions .pn-btn:focus-visible,.pn-topbar [data-pn-draft]:focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
.pn-publication-status h2{margin:18px 0 12px;font:600 14px/1.4 var(--cb-font-semibold);color:var(--cb-text)}
.pn-ready-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pn-ready-list li{display:flex;gap:9px;align-items:flex-start;font:400 13px/19px var(--cb-font-regular);color:var(--cb-muted)}
.pn-ready-list li::before{content:"";flex:none;width:14px;height:14px;box-sizing:border-box;margin-top:2px;border:1px solid var(--cb-border-hard);border-radius:50%}
.pn-ready-list li.is-ready::before{border:0;background:var(--cb-link);mask:url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/icons/css-ed93a4edfe-52d618b71851901fcc4cab6329bef56ba9504e5fef3bf66e618f42c8db2a72c5.svg") center/contain no-repeat}
.pn-ready-list strong{display:block;font:600 13px/19px var(--cb-font-semibold);color:var(--cb-text)}
.pn-ready-list span{display:block;margin-top:2px}
.pn-ready-list span:empty{display:none}
.pn-draft-hint{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--cb-border);font:400 13px/19.5px var(--cb-font-regular);color:var(--cb-muted)}
.pn-publish-controls .pn-side-note:empty{display:none}
.pn-topbar [data-pn-draft]{padding:11px 16px;border:1px solid var(--cb-link);border-radius:999px;background:color-mix(in srgb,var(--cb-link) 10%,var(--cb-card));color:var(--cb-text);text-transform:none;font-size:13px;letter-spacing:0}
/* Choose previews modal */
.pn-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:32px}
.pn-modal[hidden]{display:none}
.pn-modal-back{position:absolute;inset:0;background:rgba(12,16,26,.6);backdrop-filter:blur(2px)}
.pn-modal-panel{position:relative;width:min(1180px,100%);max-height:calc(100vh - 64px);display:flex;flex-direction:column;background:var(--cb-card);border:1px solid var(--cb-border);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;animation:pn-fade .2s}
.pn-modal-head{display:flex;align-items:flex-start;gap:16px;padding:18px 20px 12px;border-bottom:1px solid var(--cb-border)}
.pn-modal-head h2{margin:0;font:600 17px/1.2 var(--cb-font-semibold);color:var(--cb-text)}
.pn-modal-head>div{flex:1;min-width:0}
.pn-modal-head .pn-why{margin-top:4px}
.pn-pick-count{font:600 14px/1 var(--cb-font-semibold);color:var(--cb-muted);white-space:nowrap;padding-top:4px}
.pn-pick-count b{color:var(--cb-link-text,var(--cb-link));font-size:18px}
.pn-pick-count.is-full b{color:#7bc178}
.pn-modal-x{width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--cb-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pn-modal-x:hover{background:var(--cb-bg);color:var(--cb-text)}
.pn-modal-x svg{width:16px;height:16px;fill:none;stroke:currentColor}
.pn-modal-tools{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--cb-border)}
.pn-modal-tools .pn-chips{flex:1}
.pn-modal-tools .pn-chip{cursor:pointer;height:28px;font-size:12px}
.pn-modal-tools-r{display:flex;gap:8px}
.pn-pick-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;padding:16px 20px;overflow:auto;min-height:0}
.pn-pick-grid{grid-auto-rows:max-content;align-content:start}
.pn-pack-folder{display:flex;align-items:center;gap:8px;color:var(--cb-muted);font:400 12px/1.4 var(--cb-font-regular)}
.pn-pack-folder select{max-width:220px;height:36px;border:1px solid var(--cb-border-hard);border-radius:8px;padding:6px 36px 6px 10px;background-color:var(--cb-bg);color:var(--cb-text);font:400 13px/1.4 var(--cb-font-regular);cursor:pointer}
.pn-modal-tools{flex-wrap:wrap}
.pn-modal-tools-r{margin-left:auto}
.pn-pack-status{display:flex;align-items:center;gap:10px;margin:12px 20px;padding:12px;border:1px solid var(--cb-border);border-radius:10px;color:var(--cb-text);font:400 13px/1.5 var(--cb-font-regular)}
.pn-pack-status[hidden]{display:none}
.pn-pack-status svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;color:var(--cb-link-text,var(--cb-link))}
.pn-pack-status.is-error{border-color:var(--cb-error);color:var(--cb-text)}
.pn-pick-grid:empty{padding:0}
.pn-pack-folder select:focus-visible,.pn-pick:focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
@media(max-width:1000px){.pn-pick-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:600px){.pn-pick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pn-modal{padding:12px}.pn-modal-foot{flex-wrap:wrap}.pn-pack-folder select{max-width:170px}}
@media(prefers-reduced-motion:reduce){.pn-pack-status .pn-spin{animation:none}}
.pn-pick{position:relative;aspect-ratio:2/3;border-radius:8px;border:0;padding:0;background-size:cover;background-color:var(--cb-bg);cursor:pointer;overflow:hidden;transition:transform .12s}
.pn-pick:hover{transform:scale(1.03)}
.pn-pick[hidden]{display:none}
.pn-pick::before{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 0 var(--cb-link);transition:box-shadow .12s}
.pn-pick.is-on::before{box-shadow:inset 0 0 0 3px var(--cb-link)}
.pn-pick::after{content:"";position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(14,19,32,.5)}
.pn-pick.is-on::after{background:var(--cb-link) url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/icons/css-ae095e2bcb-b6c1aff97bba71489dec9fd1855fdae3e8f535375cd2584b653ef3fac1711233.svg") center/12px no-repeat;border-color:var(--cb-link)}
.pn-pick.is-dim{opacity:.4}
.pn-pick-n{position:absolute;left:6px;bottom:6px;padding:2px 5px;border-radius:4px;background:rgba(14,19,32,.7);color:#e8eaf0;font:600 10px/1.3 var(--cb-font-semibold)}
.pn-modal-foot{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--cb-border)}
.pn-modal-foot .grow{flex:1}
.pn-modal-foot .pn-btn.is-primary{height:40px}

/* M1: a media panel's "From Dropbox". */
.pn-dropbox-import{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.pn-previews-head + .pn-dropbox-import{display:flex;align-items:flex-start;margin:0 0 10px}
.pn-dropbox-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--cb-border-hard);border-radius:8px;background:transparent;color:var(--cb-text);font:600 13px/1 var(--cb-font-semibold);cursor:pointer}
.pn-dropbox-btn svg{color:#0061FF;fill:currentColor}
.pn-dropbox-btn:disabled{opacity:.6;cursor:progress}

/* M2: a video cover's own thumbnail, as chips beside Change and Delete. */
.ap-video-thumb{display:contents}
/* products-edit.css: rules script-extracted from production/assets/css/site.css for mobile classes this page uses that desktop.css does not define. Re-extract rather than hand-edit. */
.cb-pager{display: flex; align-items: center; justify-content: center; gap: 18px; padding: 22px 18px 28px; background: var(--cb-bg);}
.cb-pager-btn{display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 999px; color: var(--cb-text); font: 400 11px/1 var(--cb-font-regular); letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; text-decoration: none;}
.cb-pager-btn:hover:not(:disabled){background: var(--cb-bg);}
.cb-pager-btn:disabled{opacity: .45; cursor: not-allowed;}
.cb-pager-info{font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: 1px; font-variant-numeric: tabular-nums;}
/* products-new.css: rules script-extracted from production/assets/css/site.css for mobile classes this page uses that desktop.css does not define. Re-extract rather than hand-edit. */
.cb-num-row{display: flex; align-items: stretch; border: 1px solid var(--cb-border); border-radius: 6px; background: var(--cb-card); overflow: hidden;}
.cb-num-row.is-off{background: var(--cb-bg); opacity: .6;}
.cb-num-prefix{display: inline-flex; align-items: center; justify-content: center; width: 48px; padding: 0 6px; border-right: 1px solid var(--cb-border); font: 500 11px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: .5px; background: var(--cb-card); flex-shrink: 0;}
.cb-num-input{flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: none; background: transparent; color: var(--cb-text); font: 500 16px/1 var(--cb-font-regular); outline: none; -moz-appearance: textfield; box-sizing: border-box;}
.cb-num-input::-webkit-inner-spin-button, .cb-num-input::-webkit-outer-spin-button{-webkit-appearance: none; margin: 0;}
.cb-num-stepper{display: flex; align-items: stretch; background: transparent; flex-shrink: 0;}
.cb-num-stepper button{width: 38px; padding: 0; background: transparent; color: var(--cb-text); border: none; border-left: 1px solid var(--cb-border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}
.cb-num-stepper button:hover:not(:disabled){background: var(--cb-bg);}
.cb-num-stepper button:disabled{color: var(--cb-muted); cursor: not-allowed;}
.cb-num-stepper svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;}
/* store.css: rules script-extracted from production/assets/css/site.css for every mobile class this page uses that desktop.css does not define. Re-extract rather than hand-edit. */
.hm-stack-item{display: block;}
.cb-comments{background: transparent; padding: 8px 16px 28px;}
.cb-avatar{flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 600 13px/1 var(--cb-font-semibold); letter-spacing: .4px; border-radius: 6px; border: 1px solid var(--cb-border); width: 36px; height: 36px; background: linear-gradient(135deg, #7c8edb, #3a4ea3);}
.cb-avatar[data-name="Marc Brunet"]{background: linear-gradient(135deg,#e8a76b,#a85c3a);}
.cb-avatar[data-name="Nazário Baltazar"]{background: linear-gradient(135deg,#7c8edb,#3a4ea3);}
.cb-avatar[data-name="Ayumu Sato"]{background: linear-gradient(135deg,#7bc178,#3e9c50);}
.cb-avatar[data-name="Frey"]{background: linear-gradient(135deg,#e95d8e,#9b2756);}
.cb-avatar[data-name="Jean-Philippe Mongeau"]{background: linear-gradient(135deg,#9b6bd8,#5a338d);}
.cb-avatar[data-name="You"]{background: linear-gradient(135deg,#3fb6a8,#1d6f6c);}
.cb-comments-composer .cb-avatar{width: 32px; height: 32px; font-size: 12px;}
.cb-comments-composer-open{background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 10px; padding: 12px;}
.cb-comments-composer-row{display: flex; gap: 10px; align-items: flex-start;}
.cb-comments-composer-row .cb-avatar{width: 32px; height: 32px; font-size: 12px;}
.cb-comments-textarea{flex: 1; min-width: 0; resize: vertical; background: transparent; border: none; color: var(--cb-text); font: 400 14px/22px var(--cb-font-regular); outline: none; min-height: 56px;}
.cb-comments-composer-actions{display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--cb-border);}
.cb-comments-actions-spacer{flex: 1;}
.cb-comments-btn-attach{display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--cb-muted); cursor: pointer; font: 500 12px/1 var(--cb-font-semibold); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;}
.cb-comments-btn-attach:hover{background: transparent; border-color: var(--cb-border); color:var(--cb-link-text,var(--cb-link));}
.cb-comments-btn-attach:disabled{opacity: .5; cursor: not-allowed;}
.cb-comments-btn-attach svg{display: inline-block;}
.cb-comments-attachments{display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px;}
.cb-comments-btn-primary{height: 36px; padding: 0 18px; border-radius: 999px; background: var(--cb-link); color: #fff; border: none; cursor: pointer; font: 700 11px/1 var(--cb-font-bold); letter-spacing: 1.4px; text-transform: uppercase;}
.cb-comments-btn-primary:hover:not(:disabled){filter: brightness(1.05);}
.cb-comments-btn-primary:disabled{background: var(--cb-border); cursor: not-allowed;}
.cb-comments-btn-ghost{height: 36px; padding: 0 16px; border-radius: 999px; background: transparent; border: 1px solid var(--cb-border); color: var(--cb-text); cursor: pointer; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase;}
.cb-comments-btn-ghost:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link));}
.cb-comments-filter{display: flex; align-items: center; gap: 16px; padding: 18px 0 12px; position: relative;}
border-bottom: 1px solid var(--cb-border); position: relative; } .cb-comments-filter-label{font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text); letter-spacing: 1px; text-transform: uppercase; padding-bottom: 4px; border-bottom: 2px solid var(--cb-link);}
.cb-comments-sort-menu{position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(20,23,33,.12); padding: 4px 0; z-index: 10; min-width: 160px;}
.cb-comments-sort-menu[hidden]{display: none;}
.cb-comments-sort-menu button{display: block; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: none; cursor: pointer; color: var(--cb-text); font: 400 13px/1 var(--cb-font-regular); transition: background .12s ease, color .12s ease;}
.cb-comments-sort-menu button:hover{background: var(--cb-bg);}
.cb-comments-sort-menu button.is-active{background: var(--cb-link); color: #fff;}
.cb-thread + .cb-thread{margin-top: 6px;}
.cb-comment{display: block; padding-top: 18px;}
.cb-comment[data-depth="1"], .cb-comment[data-depth="2"]{padding-top: 12px;}
.cb-comment[data-depth="1"] .cb-avatar, .cb-comment[data-depth="2"] .cb-avatar, .cb-comment[data-depth="1"] .cb-comment-avatar, .cb-comment[data-depth="2"] .cb-comment-avatar{width: 30px; height: 30px;}
.cb-comment-head{display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px;}
.cb-comment-meta{flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;}
.cb-comment-author{font: 600 13px/1.2 var(--cb-font-semibold); color:var(--cb-link-text,var(--cb-link));}
.cb-comment-date{margin-top: 3px; width: 100%; font: 400 12px/16px var(--cb-font-regular); color: var(--cb-muted);}
.cb-comment-badge{display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 3px; background: var(--cb-link); color: #fff; font: 700 9px/1 var(--cb-font-bold); letter-spacing: .4px; text-transform: uppercase;}
.cb-comment-badge.is-seller{background: var(--cb-link);}
.cb-comment-badge.is-customer{background: var(--cb-commit);}
.cb-comment-menu{flex: none; background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 4px; color: var(--cb-muted); display: inline-flex; margin-top: -2px; transition: background-color 160ms ease;}
.cb-comment-menu:hover{background: var(--cb-card);}
.cb-comment-menu[aria-expanded="true"]{background: var(--cb-card);}
.cb-comment.is-deleted .cb-comment-text, .cb-comment.is-deleted .cb-comment-image, .cb-comment.is-deleted .cb-comment-actions{display: none;}
.cb-comment.is-deleted .cb-comment-deleted{display: block; font: 400 12px/18px var(--cb-font-regular); font-style: italic; color: var(--cb-muted); padding: 4px 0 12px;}
.cb-comment-text{font: 400 14px/21px var(--cb-font-regular); color: var(--cb-text); text-wrap: pretty; white-space: pre-wrap; margin: 0 0 10px;}
.cb-comment-reply{background: transparent; border: none; cursor: pointer; padding: 0; color:var(--cb-link-text,var(--cb-link)); font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase;}
.cb-replies{list-style: none; margin-left: 46px; padding-left: 14px; border-left: 2px solid var(--cb-border);}
.cb-replies li{list-style: none;}
.cb-comment-avatar{flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 600 13px/1 var(--cb-font-semibold); background: linear-gradient(135deg, #7c8edb, #3a4ea3);}
.cb-comment-avatar[data-cb-avatar]{background: transparent; padding: 0;}
.cb-comment-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.cb-threads{list-style: none; padding: 0; margin: 0;}
.cb-comments-composer-collapsed{width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 8px 0 0; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 999px; cursor: pointer; text-align: left; transition: border-color 160ms ease, background-color 160ms ease;}
.cb-comments-composer-collapsed:hover{border-color: var(--cb-link); background: rgba(64,179,222,.04);}
.cb-comments-composer-avatar{flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3fb6a8, #1d6f6c); color: #fff; font: 600 12px/1 var(--cb-font-semibold);}
.cb-comments-composer-avatar[data-cb-avatar]{background: transparent; padding: 0;}
.cb-comments-composer-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.cb-comments-composer-placeholder{flex: 1; min-width: 0; font: 400 13px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comments-filter-sort{background: transparent; border: none; cursor: pointer; padding: 4px 0; color: var(--cb-text); font: 400 13px/1 var(--cb-font-regular); display: inline-flex; align-items: center; gap: 6px;}
.cb-comments-filter-sort svg{transition: transform 180ms ease;}
.cb-comments-filter-sort[aria-expanded="true"] svg{transform: rotate(180deg);}
.cb-comment-foot{display: flex; align-items: center; gap: 18px; margin-top: 8px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comment-react{display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--cb-muted); font: inherit; transition: color 160ms ease;}
.cb-comment-react svg{transition: transform 160ms ease;}
.cb-comment-react:hover{color: #ff4d6d;}
.cb-comment-react:hover svg{transform: scale(1.08);}
.cb-comment-react[aria-pressed="true"]{color: #ff4d6d;}
.cb-comment-react[aria-pressed="true"] svg{fill: currentColor; stroke: currentColor;}
.cb-comment-toggle-replies{display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 48px; background: transparent; border: none; cursor: pointer; color:var(--cb-link-text,var(--cb-link)); font: 600 12px/1 var(--cb-font-semibold); padding: 6px 0;}
.cb-comment-toggle-replies:hover{text-decoration: underline;}
.hm-stack{padding: 14px 14px 4px; background: transparent; display: flex; flex-direction: column; gap: 14px;}
.cb-sheet{position: absolute; left: 50%; right: auto; bottom: 0; width: 100%; max-width: 480px; transform: translateX(-50%) translateY(100%); max-height: 85vh; overflow-y: auto; background: var(--cb-panel); border-radius: 18px 18px 0 0; padding: 8px 0 24px; transition: transform 300ms var(--cb-ease); box-shadow: 0 -10px 40px rgba(0,0,0,.15);}
.cb-sheet-host.is-open .cb-sheet{transform: translateX(-50%) translateY(0);}
.cb-sheet-handle{width: 40px; height: 4px; border-radius: 2px; background: var(--cb-border-hard); margin: 0 auto 16px;}
@media print{.cb-app{max-width: 100%;}}
.bl-compose-host .cb-sheet-backdrop{position: absolute; inset: 0; background: rgba(12,16,26,0); transition: background 220ms cubic-bezier(.32,.72,.24,1);}
.bl-compose-host.is-open .cb-sheet-backdrop{background: rgba(12,16,26,.45);}
.ms-identity{position: relative; background: #141926; overflow: hidden; color: #f2f4f8;}
/* height/padding owned by the store page's inline CSS (412px floor) */
.ms-cover{position: absolute; inset: 0;}
/* The tint the cover editor paints and the store saved (overlay_color), between the cover and the scrim; it had no box, so no tint ever showed (2026-10-20). */
.ms-identity .ms-cover-tint{position: absolute; inset: 0; pointer-events: none;}
.ms-cover-art{display: block; width: 100%; height: 100%;}
.ms-cover-scrim{position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,25,38,.3) 0%, rgba(20,25,38,.8) 100%); pointer-events: none;}
/* default SVG art only */
.ms-identity.has-custom-cover .ms-cover-scrim{display: none;}
.ms-identity.has-custom-cover .ms-identity-inner{text-shadow: 0 1px 2px rgba(0,0,0,.45);}
/* legibility without a scrim */
.ms-identity-inner{position: relative; z-index: 1; padding: 30px 22px 28px; text-align: center;}
.ms-avatar{width: 96px; height: 96px; border-radius: 10px; border: 1px solid rgba(255,255,255,.32); background: rgba(58,69,88,.7); display: inline-flex; align-items: center; justify-content: center; color: #e8eaf0; font: 500 32px/1 var(--cb-font-regular); letter-spacing: 1px; margin: 0 auto 16px; overflow: hidden;}
.ms-avatar[data-cb-avatar]{background: transparent; padding: 0; border: none; border-radius: 10px;}
.ms-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block; border-radius: 8px;}
.ms-name{margin: 0 0 12px; font: 400 24px/1.2 var(--cb-font-regular); color: #f2f4f8; letter-spacing: -.1px; text-shadow: 0 1px 4px rgba(0,0,0,.5);}
.ms-stats{display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; row-gap: 10px; margin-bottom: 16px; font: 400 13.5px/1 var(--cb-font-regular); color: rgba(208,213,224,.85);}
.ms-stat{display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;}
.ms-bio{max-width: 420px; margin: 0 auto 20px; font: 400 14px/1.6 var(--cb-font-regular); color: #d5dae4; text-shadow: 0 1px 3px rgba(0,0,0,.5);}
.ms-actions{display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;}
.ms-btn{height: 44px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: none; border-radius: 999px; font: 400 12px/1 var(--cb-font-regular); letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; transition: filter 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease;}
.ms-btn:active{transform: translateY(1px);}
.ms-btn-message{background: var(--cb-link); color: #fff; box-shadow: 0 6px 14px rgba(64,179,222,.30);}
.ms-btn-message:hover{filter: brightness(1.06);}
.ms-btn-follow{background: var(--cb-link); color: #fff; box-shadow: 0 6px 14px rgba(64,179,222,.30);}
.ms-btn-follow:hover{filter: brightness(1.06);}
.ms-btn-follow.is-following{background: transparent; color: #e8eaf0; border: 1px solid rgba(255,255,255,.32); box-shadow: none;}
.ms-btn-follow.is-following:hover{background: rgba(255,255,255,.06);}
.ms-btn-ghost{background: transparent; color: #e8eaf0; border: 1.5px solid rgba(255,255,255,.35); box-shadow: none;}
.ms-btn-ghost:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55);}
.ms-socials{display: flex; justify-content: center; gap: 10px;}
.ms-social{width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 1px solid rgba(255,255,255,.32); color: #fff; text-decoration: none; transition: background-color 140ms ease;}
.ms-social:hover{background: rgba(255,255,255,.10); text-decoration: none;}
.ms-band{background: var(--cb-bg); border-bottom: 1px solid var(--cb-border);}
.ms-owner-banner{display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(64,179,222,.10); border-bottom: 1px solid rgba(64,179,222,.35); color: var(--cb-text);}
.ms-owner-banner-icon{width: 28px; height: 28px; border-radius: 999px; background: rgba(64,179,222,.18); color:var(--cb-link-text,var(--cb-link)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.ms-owner-banner-icon svg{width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;}
.ms-owner-banner-text{flex: 1; min-width: 0;}
.ms-owner-banner-title{font: 600 13px/1.2 var(--cb-font-semibold); color: var(--cb-text);}
.ms-owner-banner-sub{margin-top: 2px; font: 400 11px/1.3 var(--cb-font-regular); color: var(--cb-muted);}
.ms-owner-banner-action{appearance: none; border: 1.5px solid var(--cb-link); background: transparent; color:var(--cb-link-text,var(--cb-link)); font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; cursor: pointer; flex-shrink: 0;}
.ms-owner-banner-action:hover{background: rgba(64,179,222,.06);}
.ms-owner-banner.is-preview{background: #22293a; border-bottom-color: rgba(255,255,255,.08); color: #fff;}
.ms-owner-banner.is-preview .ms-owner-banner-icon{background: rgba(255,255,255,.10); color: #9ad7ff;}
.ms-owner-banner.is-preview .ms-owner-banner-title{color: #fff;}
.ms-owner-banner.is-preview .ms-owner-banner-sub{color: rgba(255,255,255,.65);}
.ms-owner-banner.is-preview .ms-owner-banner-action{color: #9ad7ff; border-color: #9ad7ff;}
.ms-owner-banner.is-preview .ms-owner-banner-action:hover{background: rgba(255,255,255,.06);}
.ms-avatar-camera{position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--cb-link); color: #fff; border: 2px solid #0c1424; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 4;}
.ms-avatar-camera svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
/* The adjust bar sits in the page right under the cover band and sticks under the site header, never to the window's bottom, where it went unnoticed (2026-10-20). */
.ms-cover-adjust{position: sticky; top: var(--cb-chrome-h, 102px); bottom: auto; z-index: 40; padding: 12px 12px 0; pointer-events: auto;}
.ms-cover-adjust-card{background: rgba(20,25,38,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.45); padding: 12px 14px 14px;}
.ms-cover-adjust-row1{display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.ms-cover-adjust-row2, .ms-cover-adjust-row3{display: flex; align-items: center; gap: 8px; margin-bottom: 10px;}
.ms-cover-adjust-row3{margin-bottom: 0;}
.ms-cover-adjust-row-label{font: 400 10px/1 var(--cb-font-regular); color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 1.4px; width: 50px; flex-shrink: 0;}
.ms-cover-adjust-thumb{width: 36px; height: 36px; border-radius: 4px; background: #000; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.15); flex-shrink: 0;}
.ms-cover-adjust-change{flex: 1; height: 36px; padding: 0 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: #fff; font: 500 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; text-align: left;}
.ms-cover-adjust-change:hover{background: rgba(255,255,255,.14);}
.ms-cover-adjust-cancel, .ms-cover-adjust-apply{height: 36px; padding: 0 14px; border-radius: 999px; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; flex-shrink: 0;}
.ms-cover-adjust-cancel{background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.18);}
.ms-cover-adjust-apply{background: var(--cb-link); color: #fff; border: none; padding: 0 16px;}
.ms-cover-adjust-apply:hover{filter: brightness(1.05);}
.ms-cover-tint-swatches{display: flex; gap: 6px; flex: 1; flex-wrap: wrap;}
.ms-cover-tint-sw{width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0; display: inline-block;}
.ms-cover-tint-sw.is-active{box-shadow: 0 0 0 2px rgba(20,25,38,.96), 0 0 0 4px var(--cb-link);}
.ms-cover-tint-custom{display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.45); cursor: pointer; position: relative; overflow: hidden;}
.ms-cover-tint-custom input[type="color"]{position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; cursor: pointer; opacity: 0;}
.ms-cover-tint-custom svg{width: 11px; height: 11px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-linecap: round; pointer-events: none;}
.ms-cover-adjust-row3 input[type="range"]{flex: 1; accent-color: var(--cb-link); -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,.18); border-radius: 2px; outline: none;}
.ms-cover-adjust-row3 input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--cb-link); border: 2px solid #fff; cursor: grab;}
.ms-cover-adjust-dim-val{font: 400 11px/1 var(--cb-font-regular); color: rgba(255,255,255,.85); width: 36px; text-align: right; flex-shrink: 0;}
.ms-identity.is-editing-pos, .ms-cover.is-editing-pos{cursor: grab; touch-action: none;}
.ms-identity.is-editing-pos:active, .ms-cover.is-editing-pos:active{cursor: grabbing;}
.ms-cover-drag-hint{position: absolute; left: 50%; top: 28px; transform: translateX(-50%) translateY(-6px); opacity: 0; z-index: 5; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; background: rgba(20,25,38,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #fff; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: .4px; box-shadow: 0 4px 14px rgba(0,0,0,.32); transition: opacity 300ms ease, transform 300ms cubic-bezier(.32,.72,.24,1);}
.ms-cover-drag-hint.is-shown{opacity: 1; transform: translateX(-50%) translateY(0); animation: ms-cover-drag-hint-bob 1.8s ease-in-out infinite;}
.ms-cover-drag-hint svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
@media (prefers-reduced-motion: reduce){.ms-cover-drag-hint.is-shown{animation: none;}}
.ms-cover-tint-overlay{position: absolute; inset: 0; pointer-events: none; background: transparent; opacity: 0; transition: background .15s ease, opacity .15s ease; z-index: 1;}
.ms-edit-sheet{position: fixed; inset: 0; z-index: 95; pointer-events: none;}
.ms-edit-sheet.is-open{pointer-events: auto;}
.ms-edit-sheet-backdrop{position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 220ms cubic-bezier(.32,.72,.24,1);}
.ms-edit-sheet.is-shown .ms-edit-sheet-backdrop{background: rgba(0,0,0,.5);}
.ms-edit-sheet-panel{position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px; background: var(--cb-card); color: var(--cb-text); border-top-left-radius: 16px; border-top-right-radius: 16px; transform: translateY(100%); transition: transform 300ms cubic-bezier(.32,.72,.24,1); box-shadow: 0 -10px 32px rgba(0,0,0,.25); max-height: 88vh; display: flex; flex-direction: column;}
.ms-edit-sheet.is-shown .ms-edit-sheet-panel{transform: translateY(0);}
.ms-edit-sheet-handle{width: 40px; height: 4px; border-radius: 2px; background: var(--cb-border-hard); margin: 14px auto 16px; flex-shrink: 0;}
.ms-edit-sheet-head{display: flex; align-items: center; justify-content: space-between; padding: 0 18px 14px;}
.ms-edit-sheet-title{font: 400 17px/1 var(--cb-font-regular); color: var(--cb-text);}
.ms-edit-sheet-cancel{background: transparent; border: none; cursor: pointer; padding: 0; font: 400 12px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-muted);}
.ms-edit-sheet-body{padding: 0 18px 26px; overflow-y: auto; padding-bottom: max(26px, env(safe-area-inset-bottom, 0px));}
.ms-edit-sheet-eyebrow{font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted); margin: 18px 0 10px;}
.ms-cover-upload{width: 100%; height: 48px; background: var(--cb-link); border: none; border-radius: 999px; color: #fff; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 12px rgba(64,179,222,.35); display: inline-flex; align-items: center; justify-content: center; gap: 8px;}
.ms-cover-upload svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.ms-cover-presets{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.ms-cover-preset{height: 80px; border-radius: 8px; border: 1px solid var(--cb-border); color: #fff; cursor: pointer; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.5); padding: 0;}
.ms-cover-preset:focus-visible{outline: 2px solid var(--cb-link); outline-offset: 2px;}
.ms-edit-form-row{margin-bottom: 14px;}
.ms-socials-section{margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--cb-border);}
.ms-socials-eyebrow{font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 4px;}
.ms-socials-hint{font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); margin-bottom: 14px;}
.ms-social-row{display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.ms-social-row-icon{width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: transparent; border: 1px solid var(--cb-border); display: inline-flex; align-items: center; justify-content: center; color: var(--cb-text);}
.ms-social-row-icon svg{width: 16px; height: 16px; fill: currentColor;}
.ms-social-row .ms-edit-form-input{flex: 1;}
.ms-pc-host{padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 10px;}
.ms-pc-field{width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: transparent; border: 1px solid var(--cb-border); border-radius: 999px; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, background .15s;}
.ms-pc-field:hover{border-color: var(--cb-link); background: rgba(64,179,222,.04);}
.ms-pc-avatar{width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;}
.ms-pc-avatar[data-cb-avatar]{background: transparent; padding: 0;}
.ms-pc-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.ms-pc-prompt{flex: 1; min-width: 0; font: 400 14px/1 var(--cb-font-regular); color: var(--cb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-pc-kinds{display: flex; gap: 6px; flex-wrap: wrap;}
.ms-pc-pill{appearance: none; cursor: pointer; padding: 8px 16px; background: transparent; border: 1px solid var(--cb-border-hard); border-radius: 999px; color: var(--cb-text); font: 500 13px/1 var(--cb-font-regular); transition: border-color .12s, color .12s, background .12s;}
.ms-pc-pill:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); background: rgba(64,179,222,.06);}
.ms-bundle-create{width: calc(100% - 32px); margin: 14px 16px 8px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--cb-card); border: 1.5px dashed var(--cb-border-hard); border-radius: 12px; cursor: pointer; text-align: left; color: var(--cb-text);}
.ms-bundle-create:hover{border-color: var(--cb-link); border-style: solid;}
.ms-bundle-create-icon{width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; background: rgba(124,92,255,.10); color: #7c5cff; display: inline-flex; align-items: center; justify-content: center;}
.ms-bundle-create-icon svg{width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.ms-bundle-create-text{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;}
.ms-bundle-create-title{font: 600 14px/1.2 var(--cb-font-semibold); color: var(--cb-text);}
.ms-bundle-create-sub{font: 400 11px/1.3 var(--cb-font-regular); color: var(--cb-muted);}
.ms-bundle-create-plus{width: 30px; height: 30px; border-radius: 999px; background: var(--cb-link); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.ms-bundle-create-plus svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;}
.ms-postkind-row{display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px;}
.ms-postkind{appearance: none; cursor: pointer; padding: 8px 16px; background: transparent; border: 1px solid var(--cb-border-hard); border-radius: 999px; color: var(--cb-text); font: 500 13px/1 var(--cb-font-regular); transition: border-color .12s, color .12s, background .12s;}
.ms-postkind:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); background: rgba(64,179,222,.06);}
.ms-postkind.is-active{background: var(--cb-link); border-color: var(--cb-link); color: #fff;}
.ms-postkind.is-active:hover{filter: brightness(1.05);}
.ms-postkind-hint{margin: -6px 0 14px; font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); min-height: 16px; transition: opacity 180ms ease;}
.ms-postkind-hint.is-swapping{opacity: 0;}
.ms-post-images-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 8px;}
.ms-post-images-grid > div{position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--cb-border);}
.ms-post-images-grid > div button{position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(20,23,33,.85); color: #fff; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;}
.ms-post-images-grid > div button svg{width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}
.ms-post-add-image{aspect-ratio: 1 / 1; width: 100%; padding: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1.5px dashed var(--cb-border-hard); border-radius: 10px; color: var(--cb-muted); font: 500 11px/1 var(--cb-font-regular); letter-spacing: .2px; cursor: pointer;}
.ms-post-add-image:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link));}
.ms-post-add-image.is-hidden{display: none;}
.ms-post-add-image svg{width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;}
.ms-poll-opts{display: flex; flex-direction: column; gap: 6px;}
.ms-poll-opt{display: flex; align-items: center; gap: 8px;}
.ms-poll-opt .ms-edit-form-input{flex: 1;}
.ms-poll-rm{appearance: none; cursor: pointer; flex-shrink: 0; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: transparent; color: var(--cb-muted); border: 1px solid var(--cb-border-hard); display: inline-flex; align-items: center; justify-content: center;}
.ms-poll-rm:hover{border-color: #ec4d4d; color: #ec4d4d;}
.ms-poll-rm svg{width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;}
.ms-poll-add{margin-top: 8px; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: transparent; color:var(--cb-link-text,var(--cb-link)); border: 1px dashed var(--cb-link); font: 600 12px/1 var(--cb-font-semibold); letter-spacing: .4px;}
.ms-poll-add:hover:not(:disabled){background: rgba(64,179,222,.06);}
.ms-poll-add:disabled{opacity: .4; cursor: not-allowed;}
.ms-poll-add svg{width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;}
.ms-post-group{padding: 14px; background: transparent; border: 1px solid var(--cb-border); border-radius: 10px;}
.ms-post-group-label{font: 600 11px/1 var(--cb-font-semibold); color: var(--cb-muted); letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 8px;}
.ms-post-group-hint{font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); margin-bottom: 12px;}
.ms-post-price-row{display: flex; gap: 8px; margin-top: 8px;}
.ms-post-price-row .ms-edit-form-input{flex: 1; min-width: 0;}
.ms-bundle-panel{display: flex !important; flex-direction: column !important; max-height: 92% !important; padding: 0 !important;}
.ms-bundle-panel .ms-bundle-head{display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; flex-shrink: 0;}
.ms-bundle-panel .ms-bundle-head-title{font: 700 18px/1.2 var(--cb-font-semibold); color: var(--cb-text);}
.ms-bundle-panel .ms-bundle-close{background: transparent; border: none; cursor: pointer; color: var(--cb-muted); padding: 6px; display: inline-flex;}
.ms-bundle-panel .ms-bundle-close svg{width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;}
.ms-bundle-panel .ms-bundle-body{flex: 1; overflow-y: auto; padding: 4px 18px 14px; display: flex; flex-direction: column; gap: 16px;}
.ms-bundle-panel .ms-bundle-label{font: 600 11px/1 var(--cb-font-semibold); color: var(--cb-muted); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;}
.ms-bundle-panel .ms-bundle-input{width: 100%; height: 44px; padding: 0 14px; box-sizing: border-box; background: var(--cb-card); color: var(--cb-text); border: 1px solid var(--cb-border-hard); border-radius: 10px; font: 400 14px/1 var(--cb-font-regular); outline: none;}
.ms-bundle-panel .ms-bundle-input:focus{border-color: var(--cb-link);}
.ms-bundle-panel .ms-bundle-input.ms-bundle-textarea{height: auto; padding: 10px 14px; line-height: 1.4; resize: vertical;}
.ms-bundle-panel .ms-bundle-input.ms-bundle-input-num{width: 120px; font-weight: 600;}
.ms-bundle-panel select.ms-bundle-input{appearance: none; -webkit-appearance: none; background-image: url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/icons/css-f9dc61eb18-6927db5566e97182edbe695cb4bc2fc5fac799ec0895edc7bc804d1eab60e64f.svg"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 34px;}
.ms-bundle-panel .ms-bundle-add-empty{width: 100%; padding: 14px; background: var(--cb-card); color: var(--cb-text); border: 1px dashed var(--cb-border-hard); border-radius: 10px; cursor: pointer; font: 500 13px/1.3 var(--cb-font-regular); display: flex; align-items: center; justify-content: center; gap: 8px;}
.ms-bundle-panel .ms-bundle-add-empty:hover{border-color: #7c5cff; color: #7c5cff;}
.ms-bundle-panel .ms-bundle-add-empty svg{width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;}
.ms-bundle-panel .ms-bundle-chips{display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none;}
.ms-bundle-panel .ms-bundle-chips::-webkit-scrollbar{display: none;}
.ms-bundle-panel .ms-bundle-chip{position: relative; flex-shrink: 0; width: 64px;}
.ms-bundle-panel .ms-bundle-chip-thumb{width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background-size: cover; background-position: center; border: 1px solid var(--cb-border);}
.ms-bundle-panel .ms-bundle-chip-rm{position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: #2c3242; color: #fff; border: 2px solid var(--cb-card); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}
.ms-bundle-panel .ms-bundle-chip-rm svg{width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}
.ms-bundle-panel .ms-bundle-chip-add{width: 64px; height: 64px; flex-shrink: 0; border-radius: 8px; background: transparent; color: var(--cb-text); border: 1px dashed var(--cb-border-hard); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}
.ms-bundle-panel .ms-bundle-chip-add:hover{border-color: #7c5cff; color: #7c5cff;}
.ms-bundle-panel .ms-bundle-chip-add svg{width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;}
.ms-bundle-panel .ms-bundle-min-warning{margin-top: 6px; font: 400 11px/1.4 var(--cb-font-regular); color: #e74c3c;}
.ms-bundle-panel .ms-bundle-picker{margin-top: 0; border: 1px solid var(--cb-border-hard); border-radius: 10px; background: var(--cb-card); overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); transition: max-height 320ms cubic-bezier(.32,.72,.24,1), opacity 200ms ease, transform 280ms cubic-bezier(.32,.72,.24,1), margin-top 200ms ease;}
.ms-bundle-panel .ms-bundle-picker.is-open{max-height: 420px; opacity: 1; transform: translateY(0); margin-top: 10px;}
.ms-bundle-panel .ms-bundle-picker-head{display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--cb-border); background: transparent;}
.ms-bundle-panel .ms-bundle-picker-head > span{font: 600 11px/1 var(--cb-font-semibold); color: var(--cb-muted); letter-spacing: 1.4px; text-transform: uppercase;}
.ms-bundle-panel .ms-bundle-picker-done{background: #7c5cff; color: #fff; border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase;}
:is(.ms-bundle-panel .ms-bundle-picker-list, .ms-post-picker-list){max-height: 280px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem{display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; background: transparent; border: 1px solid transparent;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem:hover{background: transparent;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem.is-on{background: rgba(124,92,255,.08); border-color: #7c5cff;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem-thumb{width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid var(--cb-border);}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem-title{flex: 1; min-width: 0; font: 500 12px/1.3 var(--cb-font-regular); color: var(--cb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem-price{font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-muted); flex-shrink: 0;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem-check{width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px; border: 1.5px solid var(--cb-border-hard); background: var(--cb-card); display: inline-flex; align-items: center; justify-content: center;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem.is-on .ms-bundle-pickitem-check{background: #7c5cff; border-color: #7c5cff;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem-check svg{width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0;}
:is(.ms-bundle-panel, .ms-post-picker-list) .ms-bundle-pickitem.is-on .ms-bundle-pickitem-check svg{opacity: 1;}
/* The composer's Launch and Sale rows are buttons in a listbox (QA item 178): full width, left-aligned,
   and a focus ring the keyboard can see. */
.ms-post-picker-list .ms-bundle-pickitem{width: 100%; text-align: left; font: inherit; color: inherit;}
.ms-post-picker-list .ms-bundle-pickitem:focus-visible{outline: 2px solid var(--cb-link); outline-offset: 2px;}
.ms-post-picker-list .ms-bundle-pickitem:hover{background: var(--cb-card);}
.ms-bundle-panel .ms-bundle-disc-row{display: flex; gap: 8px; margin-bottom: 8px;}
.ms-bundle-panel .ms-bundle-disc{flex: 1; padding: 10px 8px; background: var(--cb-card); color: var(--cb-text); border: 1px solid var(--cb-border-hard); border-radius: 8px; cursor: pointer; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: .6px;}
.ms-bundle-panel .ms-bundle-disc.is-active{background: #7c5cff; color: #fff; border-color: #7c5cff;}
.ms-bundle-panel .ms-bundle-disc-input-row{display: flex; align-items: center; gap: 12px;}
.ms-bundle-panel .ms-bundle-disc-suffix{color: var(--cb-muted); font: 500 13px/1.3 var(--cb-font-regular);}
.ms-bundle-panel .ms-bundle-preview{margin-top: 10px; padding: 10px 12px; background: rgba(124,92,255,.06); border: 1px solid rgba(124,92,255,.32); border-radius: 8px; display: flex; justify-content: space-between; align-items: baseline; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);}
.ms-bundle-panel .ms-bundle-preview strong{color: var(--cb-text); font: 700 16px/1 var(--cb-font-semibold); margin-right: 6px;}
.ms-bundle-panel .ms-bundle-preview-strike{text-decoration: line-through;}
.ms-bundle-panel .ms-bundle-preview-pct{margin-left: 6px; color: #7c5cff; font-weight: 700;}
.ms-bundle-panel .ms-bundle-none-hint{margin-top: 10px; padding: 10px 12px; background: transparent; border-radius: 8px; font: 400 12px/17px var(--cb-font-regular); color: var(--cb-muted); text-wrap: pretty;}
.ms-bundle-panel .ms-bundle-none-hint strong{color: var(--cb-text);}
.ms-bundle-panel .ms-bundle-toggle-row{display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;}
.ms-bundle-panel .ms-bundle-toggle-label{font: 600 14px/1.2 var(--cb-font-semibold); color: var(--cb-text); margin-bottom: 3px;}
.ms-bundle-panel .ms-bundle-toggle-hint{font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted);}
.ms-bundle-panel .ms-bundle-toggle{position: relative; flex-shrink: 0; width: 44px; height: 26px; padding: 0; background: var(--cb-border-hard); border: none; border-radius: 999px; cursor: pointer; margin-top: 2px; transition: background 180ms ease;}
.ms-bundle-panel .ms-bundle-toggle.is-on{background: #7c5cff;}
.ms-bundle-panel .ms-bundle-toggle-thumb{position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform 180ms ease;}
.ms-bundle-panel .ms-bundle-toggle.is-on .ms-bundle-toggle-thumb{transform: translateX(18px);}
.ms-bundle-panel .ms-bundle-delete-row{padding-top: 12px; border-top: 1px solid var(--cb-border);}
.ms-bundle-panel .ms-bundle-delete{width: 100%; height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--cb-border); border-radius: 999px; color: #c0392b; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer;}
.ms-bundle-panel .ms-bundle-delete:hover{background: rgba(192,57,43,.04);}
.ms-bundle-panel .ms-bundle-confirm{padding: 14px; border-radius: 10px; background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.32);}
.ms-bundle-panel .ms-bundle-confirm-title{font: 600 13px/1.3 var(--cb-font-semibold); color: #c0392b; margin-bottom: 6px;}
.ms-bundle-panel .ms-bundle-confirm-text{font: 400 12px/18px var(--cb-font-regular); color: var(--cb-muted); margin-bottom: 12px;}
.ms-bundle-panel .ms-bundle-confirm-actions{display: flex; gap: 8px;}
.ms-bundle-panel .ms-bundle-confirm-cancel, .ms-bundle-panel .ms-bundle-confirm-go{flex: 1; height: 38px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase;}
.ms-bundle-panel .ms-bundle-confirm-cancel{background: transparent; border: 1px solid var(--cb-border-hard); color: var(--cb-text);}
.ms-bundle-panel .ms-bundle-confirm-go{background: #c0392b; border: none; color: #fff;}
.ms-bundle-panel .ms-bundle-foot{padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cb-border); background: var(--cb-card); flex-shrink: 0;}
.ms-bundle-panel .ms-bundle-save{width: 100%; height: 46px; background: #7c5cff; color: #fff; border: none; border-radius: 999px; font: 600 13px/1 var(--cb-font-semibold); letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer;}
.ms-bundle-panel .ms-bundle-save:disabled{background: var(--cb-border-hard); cursor: not-allowed;}
.ms-edit-form-label{display: block; margin-bottom: 6px; font: 400 11px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-muted);}
.ms-edit-form-input, .ms-edit-form-textarea{width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--cb-border); border-radius: 8px; background: transparent; color: var(--cb-text); font: 400 14px/1.4 var(--cb-font-regular); outline: none;}
.ms-edit-form-input:focus, .ms-edit-form-textarea:focus{border-color: var(--cb-link);}
.ms-edit-form-textarea{min-height: 88px; resize: vertical;}
.ms-edit-form-help{margin-top: 6px; font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted);}
.ms-edit-form-save{width: 100%; height: 48px; margin-top: 8px; background: var(--cb-link); border: none; border-radius: 999px; color: #fff; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 12px rgba(64,179,222,.35);}
.ms-edit-form-save:hover{filter: brightness(1.05);}
.ms-seller-toolbar{padding: 18px 18px 20px; background: transparent; border-bottom: 1px solid var(--cb-border);}
.ms-seller-toolbar-eyebrow{padding: 0 2px 12px; font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted);}
.ms-seller-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.ms-seller-card{display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; background: var(--cb-commit); color: #fff; border: none; border-radius: 8px; cursor: pointer; text-align: left; text-decoration: none; box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 -1px 0 rgba(0,0,0,.08); transition: transform .08s ease, filter .15s ease; position: relative;}
.ms-seller-card:hover{filter: brightness(1.06); color: #fff;}
.ms-seller-card:active{transform: translateY(1px); filter: brightness(.96);}
.ms-seller-card.is-disabled{background: var(--cb-border-hard); color: rgba(255,255,255,.85); opacity: .78; cursor: not-allowed; box-shadow: none;}
.ms-seller-card.is-disabled:hover{filter: none;}
.ms-seller-card-icon{width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: #fff;}
.ms-seller-card-icon svg{width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.ms-seller-card-text{display: flex; flex-direction: column; gap: 3px; min-width: 0;}
.ms-seller-card-label{font: 500 14px/1.15 var(--cb-font-regular); letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-seller-card-sub{font: 400 11px/1.2 var(--cb-font-regular); color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px;}
.ms-seller-card-sub svg{width: 11px; height: 11px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.cb-pcard-owner-drag, .cb-pcard-owner-kebab{position: absolute; width: 32px; height: 32px; border-radius: 999px; background: rgba(20,23,33,.78); color: #fff; border: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; box-shadow: 0 2px 6px rgba(20,23,33,.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.cb-pcard-owner-drag{left: 8px; top: 8px; cursor: grab;}
.cb-pcard-owner-drag:active{cursor: grabbing;}
.cb-pcard-owner-kebab{right: 8px; top: 8px;}
.cb-pcard-owner-drag svg, .cb-pcard-owner-kebab svg{width: 14px; height: 14px; fill: currentColor;}
.cb-pcard-owner-kebab svg{width: 16px; height: 16px;}
.cb-pcard-owner-kebab svg{fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.cb-pcard-owner-drag{touch-action: none;}
.cb-pcard-owner-drag:focus, .cb-pcard-owner-drag:focus-visible{outline: none;}
/* Dragging is off under any order but Featured, or with a filter (v3--seller--sortable-products): no handle (QA item 32). */
[data-cb-reorder="off"] .cb-pcard-owner-drag{display: none;}
/* Drag-to-reorder: lifted card follows the pointer, neighbours slide aside (FLIP). Ring hugs the 12px card radius. */
.dh-grid.is-reordering{user-select: none; -webkit-user-select: none;}
.dh-grid.is-reordering > li{transition: transform 150ms cubic-bezier(.32,.72,.24,1);}
.dh-grid.is-reordering > li.cb-pcard-dragging{position: relative; z-index: 5; transition: none;}
.dh-grid > li.cb-pcard-dragging .cb-pcard{transform: scale(1.03); box-shadow: 0 0 0 2px var(--cb-link), 0 14px 32px rgba(20,23,33,.32); transition: transform 160ms ease, box-shadow 160ms ease;}
.dh-grid > li.cb-pcard-dragging .cb-pcard-owner-drag{cursor: grabbing; background: var(--cb-link);}
.dh-grid > li.cb-pcard-drop-settle .cb-pcard{transition: transform 160ms ease, box-shadow 160ms ease;}
.ms-owner-menu{position: fixed; inset: 0; z-index: 90; pointer-events: none;}
.ms-owner-menu.is-open{pointer-events: auto;}
.ms-owner-menu-backdrop{position: absolute; inset: 0; background: rgba(20,23,33, 0); transition: background 240ms cubic-bezier(.32,.72,.24,1);}
.ms-owner-menu.is-shown .ms-owner-menu-backdrop{background: rgba(20,23,33, .55);}
.ms-owner-menu-panel{position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px; /* desktop overrides below turn this into an anchored popover */ background: var(--cb-card); color: var(--cb-text); border-top-left-radius: 16px; border-top-right-radius: 16px; transform: translateY(100%); transition: transform 300ms cubic-bezier(.32,.72,.24,1); box-shadow: 0 -10px 30px rgba(0,0,0,.25); max-height: 88vh; display: flex; flex-direction: column;}
.ms-owner-menu.is-shown .ms-owner-menu-panel{transform: translateY(0);}
.ms-owner-menu-handle{display: flex; justify-content: center; padding: 8px 0 4px;}
.ms-owner-menu-handle::after{content: ''; width: 38px; height: 4px; border-radius: 4px; background: var(--cb-border-hard); opacity: .7;}
.ms-owner-menu-head{display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; border-bottom: 1px solid var(--cb-border);}
.ms-owner-menu-thumb{width: 44px; height: 44px; border-radius: 6px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--cb-border); flex-shrink: 0;}
.ms-owner-menu-title{flex: 1; min-width: 0; font: 600 14px/1.3 var(--cb-font-semibold); color: var(--cb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-owner-menu-body{flex: 1; overflow-y: auto; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));}
.ms-owner-menu-item{width: 100%; appearance: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--cb-border); color: var(--cb-text); font: 500 14px/1 var(--cb-font-regular);}
.ms-owner-menu-item:last-child{border-bottom: none;}
.ms-owner-menu-item:hover{background: var(--cb-bg);}
.ms-owner-menu-item.is-danger{color: #c4564a;}
.ms-owner-menu-item svg{width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.ms-band-row{display: flex; align-items: center; padding: 18px 18px; box-sizing: border-box;}
.ms-band-crumb{padding: 14px 18px 0; border-bottom: 1px solid var(--cb-border); align-items: flex-end;}
.ms-band-sort{padding-top: 12px; padding-bottom: 16px;}
.ms-crumb-tabs{display: inline-flex; align-items: center; gap: 14px; font: 400 13px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase;}
.ms-crumb-tab{background: transparent; border: none; padding: 6px 0 14px; cursor: pointer; color: var(--cb-muted); font: inherit; letter-spacing: inherit; position: relative; transition: color 220ms ease, font-weight 0ms;}
.ms-crumb-tab::after{content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--cb-link); transform: scaleX(0); transform-origin: center; transition: transform 280ms cubic-bezier(.32,.72,.24,1);}
.ms-crumb-tab.is-active{color: var(--cb-text); font-weight: 600;}
.ms-crumb-tab.is-active::after{transform: scaleX(1);}
.ms-crumb-tab:hover{color: var(--cb-text);}
.ms-crumb-sep{color: var(--cb-muted); font-weight: 300; opacity: .55; padding-bottom: 14px; padding-top: 6px;}
.ms-crumb-search{margin-left: auto; margin-bottom: 8px; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--cb-border-hard); border-radius: 999px; color: var(--cb-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background 140ms ease;}
.ms-crumb-search:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link));}
.ms-crumb-search[aria-expanded="true"]{background: var(--cb-link); border-color: var(--cb-link); color: #fff;}
.ms-search-wrap{max-height: 0; overflow: hidden; transition: max-height 220ms ease, padding 220ms ease; padding: 0 18px;}
.ms-search-wrap.is-open{max-height: 96px; padding: 14px 18px 14px;}
.ms-search-form{display: flex; gap: 8px; align-items: center;}
.ms-search-input{flex: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--cb-card); border: 1px solid var(--cb-border-hard); border-radius: 999px;}
.ms-search-input svg{width: 16px; height: 16px; flex: none; color: var(--cb-muted); stroke: currentColor; fill: none; stroke-width: 2;}
.ms-search-input input{flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: 500 13.5px/1 var(--cb-font-regular); color: var(--cb-text);}
.ms-search-cancel{background: transparent; border: none; cursor: pointer; padding: 6px 4px; font: 600 13px/1 var(--cb-font-semibold); color:var(--cb-link-text,var(--cb-link));}
.ms-sort{display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 6px 0; color: var(--cb-text); font: 700 13px/1 var(--cb-font-bold); letter-spacing: 2px; text-transform: uppercase; cursor: pointer;}
.ms-sort:hover{color:var(--cb-link-text,var(--cb-link));}
.ms-sort-value{color: inherit;}
.ms-sort-spacer{flex: 1;}
.ms-text-btn{display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 6px 4px; color: var(--cb-text-sec, var(--cb-muted)); font: 400 12.5px/1 var(--cb-font-regular); letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; transition: color 140ms ease;}
.ms-text-btn:hover{color: var(--cb-text);}
.ms-text-btn + .ms-text-btn{margin-left: 10px;}
.ms-pane{background: transparent;}
.ms-pane[hidden]{display: none;}
.ms-feed{background: transparent; padding: 0;}
.ms-feed .hm-stack{display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 4px;}
.ms-feed .hm-stack-item{list-style: none;}
.ms-loadmore-wrap{padding: 14px 18px 28px; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 12px;}
.ms-loadmore{width: 100%; max-width: 360px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--cb-card); color:var(--cb-link-text,var(--cb-link)); border: 1px solid var(--cb-border-hard); border-radius: 999px; font: 700 12.5px/1 var(--cb-font-bold); letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;}
.ms-loadmore:hover{background: rgba(64,179,222,.05); border-color: var(--cb-link);}
.ms-loadmore-meta{font: 500 11.5px/1 var(--cb-font-regular); color: var(--cb-muted);}
.ms-loadmore-meta b{color: var(--cb-text); font-weight: 700;}
.ms-posts{background: transparent; padding: 14px 12px 24px; display: flex; flex-direction: column; gap: 12px;}
.ms-post{background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 12px; padding: 14px 16px 12px;}
.ms-post-head{display: flex; gap: 10px; align-items: center; margin-bottom: 10px;}
.ms-post-avatar{width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--cb-link); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--cb-font-bold); overflow: hidden;}
.ms-post-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.ms-post-byline{flex: 1; min-width: 0;}
.ms-post-author{font: 700 14px/1 var(--cb-font-bold); color: var(--cb-text);}
.ms-post-date{margin-top: 4px; font: 500 11.5px/1 var(--cb-font-regular); color: var(--cb-muted);}
.ms-post-body{margin: 0 0 10px; font: 400 14px/22px var(--cb-font-regular); color: var(--cb-text);}
.ms-bundles{background: transparent; padding: 14px 12px 24px; display: flex; flex-direction: column; gap: 12px;}
.ms-bundle{background: rgba(124,92,255,.06); border: 1px solid rgba(124,92,255,.22); border-radius: 12px; padding: 16px 16px 14px;}
.ms-bundle-eyebrow{display: flex; align-items: center; gap: 8px; margin-bottom: 6px;}
.ms-bundle-tag{padding: 2px 7px; border-radius: 3px; background: #7c5cff; color: #fff; font: 700 8.5px/1 var(--cb-font-bold); letter-spacing: 1.2px; text-transform: uppercase;}
.ms-bundle-save{font: 700 10.5px/1 var(--cb-font-bold); color: #7c5cff; letter-spacing: .6px;}
.ms-bundle-title{margin: 0 0 6px; font: 700 17px/22px var(--cb-font-bold); color: var(--cb-text);}
.ms-bundle-sub{margin: 0 0 12px; font: 400 13px/19px var(--cb-font-regular); color: var(--cb-muted);}
.ms-bundle-foot{display: flex; align-items: center; justify-content: space-between; gap: 14px;}
.ms-post.is-pinned{border-color: rgba(64,179,222,.32); box-shadow: 0 1px 0 rgba(64,179,222,.10) inset;}
.ms-post-pin{display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 7px; background: rgba(64,179,222,.14); color:var(--cb-link-text,var(--cb-link)); border-radius: 4px; font: 700 9px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase;}
.ms-post-pin svg{width: 10px; height: 10px; fill: currentColor;}
.ms-post-kind{display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 4px; font: 700 9px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase; margin-left: auto;}
.ms-post-kind.k-launch{background: rgba(123,193,120,.16); color: #6aaa67;}
.ms-post-kind.k-sale{background: rgba(231,76,60,.14);   color: #d44e3f;}
.ms-post-kind.k-gallery{background: rgba(192,103,200,.14); color: #a857b1;}
.ms-post-kind.k-poll{background: rgba(28,168,150,.18);  color: #169081;}
.ms-post-kind.k-artwork{background: rgba(64,179,222,.14);  color: #2a8fbf;}
.ms-post-kind svg{width: 10px; height: 10px;}
.ms-post-title{margin: 0 0 6px; font: 700 16px/22px var(--cb-font-bold); color: var(--cb-text);}
/* Posts: uncropped single image, count-aware multi-image previews. */
.ms-post-imgs{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:10px;grid-template-columns:repeat(2,minmax(0,1fr));}
.ms-post-imgs > *{display:block;position:relative;min-width:0;overflow:hidden;cursor:zoom-in;background-size:cover;background-position:center;background-repeat:no-repeat;}
.ms-post-imgs > button{padding:0;border:0;color:inherit;background-color:transparent;}
.ms-post-imgs img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;}
.ms-post-imgs.n1{grid-template-columns:minmax(0,1fr);}
.ms-post-imgs.n1 > :not(img):not(:has(img)){aspect-ratio:var(--ms-image-ratio,4/3);background-size:contain;}
.ms-post-imgs.n2 > *, .ms-post-imgs.n3 > *, .ms-post-imgs.n4 > *{aspect-ratio:1;}
.ms-post-imgs.n3 > :first-child{grid-column:1 / -1;aspect-ratio:2;}
.ms-post-imgs:is(.n2,.n3,.n4) img{width:100%;height:100%;object-fit:cover;}
.ms-post-imgs:is(.n2,.n3,.n4) > :not(img) > img{position:absolute;inset:0;}
.ms-post-imgs > [data-extra]::after{content:'+' attr(data-extra);position:absolute;inset:0;background:rgba(15,18,28,.55);color:#fff;display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--cb-font-bold);letter-spacing:.5px;}
.ms-post-launch{display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(123,193,120,.07); border: 1px solid rgba(123,193,120,.22); margin-bottom: 10px; text-decoration: none; color: inherit; transition: background .15s ease, border-color .15s ease;}
.ms-post-launch:hover{background: rgba(123,193,120,.12); border-color: rgba(123,193,120,.34); text-decoration: none;}
.ms-post-launch-thumb{width: 80px; height: 80px; flex: none; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.06);}
.ms-post-launch-body{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;}
.ms-post-launch-eyebrow{font: 700 9.5px/1 var(--cb-font-semibold); color: #6aaa67; letter-spacing: 1.4px; text-transform: uppercase;}
.ms-post-launch-title{font: 700 14px/18px var(--cb-font-bold); color: var(--cb-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.ms-post-launch-priceline{display: inline-flex; align-items: baseline; gap: 8px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); margin-top: 2px;}
.ms-post-launch-priceline b{font: 700 14px/1 var(--cb-font-bold); color: var(--cb-text);}
.ms-post-launch-priceline s{color: var(--cb-muted);}
.ms-post-sale{position: relative; margin-bottom: 10px; padding: 14px 16px; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #fff; border-radius: 10px; overflow: hidden;}
.ms-post-sale::before{content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 30%, rgba(255,255,255,.18), transparent 60%); pointer-events: none;}
.ms-post-sale > *{position: relative;}
.ms-post-sale-pct{font: 800 38px/1 var(--cb-font-bold); letter-spacing: -1px;}
.ms-post-sale-pct span{font: 700 14px/1 var(--cb-font-semibold); margin-left: 4px; letter-spacing: 0; text-transform: uppercase; vertical-align: 6px;}
.ms-post-sale-row{display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap;}
.ms-post-sale-code{display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(255,255,255,.18); border: 1px dashed rgba(255,255,255,.55); border-radius: 6px; font: 700 13px/1 var(--cb-font-bold); letter-spacing: 1.5px; cursor: copy; transition: background .15s ease;}
.ms-post-sale-code:hover{background: rgba(255,255,255,.28);}
.ms-post-sale-code svg{width: 12px; height: 12px; opacity: .85;}
.ms-post-sale-code.is-copied{background: rgba(123,193,120,.35);}
.ms-post-sale-ends{font: 600 11px/1 var(--cb-font-semibold); opacity: .92; letter-spacing: .4px;}
.ms-post-poll{margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px;}
.ms-post-poll-opt{position: relative; padding: 10px 12px; background: transparent; border: 1px solid var(--cb-border); border-radius: 8px; cursor: pointer; overflow: hidden; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 13px/1.3 var(--cb-font-medium, var(--cb-font-regular)); color: var(--cb-text); transition: border-color .15s ease, background .15s ease;}
.ms-post-poll-opt:hover{border-color: rgba(28,168,150,.5);}
.ms-post-poll-opt.is-voted-mine{border-color: rgba(28,168,150,.8); background: rgba(28,168,150,.06);}
.ms-post-poll-bar{position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(28,168,150,.18); transition: width 720ms cubic-bezier(.22,.61,.36,1); z-index: 0;}
.ms-post-poll-opt > *:not(.ms-post-poll-bar){position: relative; z-index: 1;}
.ms-post-poll-pct{flex: 0 0 auto; font: 700 12px/1 var(--cb-font-bold); color: #169081; min-width: 36px; text-align: right;}
.ms-post-poll-meta{margin-top: 4px; font: 500 11.5px/1.3 var(--cb-font-regular); color: var(--cb-muted); display: flex; gap: 8px; align-items: center;}
.ms-post-poll-meta::before{content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5;}
.ms-post-poll-meta span:first-child::before{display: none;}
.ms-post-actions{display: flex; align-items: center; gap: 20px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--cb-border);}
.ms-post-actions button{display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--cb-muted); font: 500 13px/1 var(--cb-font-medium, var(--cb-font-regular)); transition: color .15s ease;}
.ms-post-actions button svg{width: 18px; height: 18px; transition: transform .18s ease;}
.ms-post-actions button:hover{color: var(--cb-text);}
.ms-post-actions button.is-liked{color: var(--cb-heart, #ff5a5f);}
.ms-post-actions button.is-liked svg{fill: var(--cb-heart, #ff5a5f); transform: scale(1.08);}
.ms-post-actions button.is-open{color:var(--cb-link-text,var(--cb-link));}
.ms-post-actions .ms-post-share{margin-left: auto;}
.ms-bundle{padding: 0; background: var(--cb-card); border-color: rgba(124,92,255,.22); overflow: hidden; box-shadow: 0 4px 12px rgba(20,23,33,.06);}
.ms-bundle-head{padding: 12px 14px 10px; background: rgba(124,92,255,.06); border-bottom: 1px solid rgba(124,92,255,.22);}
.ms-bundle-head .ms-bundle-eyebrow{margin-bottom: 6px;}
.ms-bundle.is-undiscounted .ms-bundle-head{background: transparent; border-bottom: none; padding: 14px 14px 8px;}
.ms-bundle.is-undiscounted{border-color: var(--cb-border);}
.ms-bundle-section{font: 700 10px/1 var(--cb-font-semibold); color: var(--cb-muted); letter-spacing: 2px; text-transform: uppercase;}
.ms-bundle-title{font: 700 16px/22px var(--cb-font-bold); margin: 0 0 4px;}
.ms-bundle.is-undiscounted .ms-bundle-title{font-size: 17px;}
.ms-bundle-sub{margin: 0; font: 400 12px/16px var(--cb-font-regular); color: var(--cb-muted);}
.ms-bundle-strip{display: flex; gap: 10px; padding: 14px 14px 6px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
.ms-bundle-strip::-webkit-scrollbar{display: none;}
.ms-bundle.is-undiscounted .ms-bundle-strip{padding: 10px 14px 14px;}
.ms-bundle-strip-item{flex: 0 0 124px; scroll-snap-align: start; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px; overflow: hidden; cursor: pointer; display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.ms-bundle-strip-item:hover{transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,23,33,.10); border-color: rgba(124,92,255,.35); text-decoration: none;}
.ms-bundle-strip-thumb{aspect-ratio: 1/1; background-size: cover; background-position: center;}
.ms-bundle-strip-body{padding: 6px 8px 8px;}
.ms-bundle-strip-title{font: 600 11px/1.25 var(--cb-font-semibold); color: var(--cb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-bundle-strip-price{margin-top: 3px; font: 700 11px/1 var(--cb-font-bold); color: var(--cb-text);}
.ms-bundle-pricerow{padding: 8px 14px 14px; display: flex; align-items: center; gap: 12px;}
.ms-bundle-priceblock{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;}
.ms-bundle-priceblock .priceline{display: inline-flex; align-items: baseline; gap: 8px;}
.ms-bundle-priceblock .now{font: 700 18px/1 var(--cb-font-semibold); color: var(--cb-text);}
.ms-bundle-priceblock .was{font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); text-decoration: line-through;}
.ms-bundle-priceblock .meta{font: 500 11px/1.3 var(--cb-font-regular); color: var(--cb-muted);}
.ms-bundle-add{height: 40px; padding: 0 18px; background: #7c5cff; color: #fff; border: none; border-radius: 999px; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 6px rgba(124,92,255,.4); display: inline-flex; align-items: center; gap: 6px; transition: filter .15s ease, background .18s ease, box-shadow .18s ease;}
.ms-bundle-add:hover{filter: brightness(1.06);}
.ms-bundle-add.is-added{background: #7bc178; box-shadow: 0 2px 6px rgba(123,193,120,.35);}
.ms-bundle-add.is-added:hover{background: #d9534f; box-shadow: 0 2px 6px rgba(217,83,79,.4);}
.ms-bundle-add svg{width: 12px; height: 12px;}
.ms-avatar:has(.ms-avatar-camera){overflow: visible !important;}
.ms-owner-menu-confirm{padding: 14px 16px 18px;}
.ms-owner-menu-confirm-title{font: 600 15px/1.3 var(--cb-font-semibold); color: var(--cb-text); margin: 0 0 6px;}
.ms-owner-menu-confirm-sub{font: 400 13px/19px var(--cb-font-regular); color: var(--cb-sec); margin: 0 0 16px;}
.ms-owner-menu-confirm-actions{display: flex; gap: 8px;}
.ms-owner-menu-confirm-cancel, .ms-owner-menu-confirm-go{flex: 1; height: 46px; border-radius: 999px; border: none; cursor: pointer; font: 700 12px/1 var(--cb-font-bold); letter-spacing: 1.6px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease;}
.ms-owner-menu-confirm-cancel{background: var(--cb-bg); border: 1px solid var(--cb-border); color: var(--cb-text);}
.ms-owner-menu-confirm-cancel:hover{background: var(--cb-card);}
.ms-owner-menu-confirm-go{background: #ec4d4d; color: #fff;}
.ms-owner-menu-confirm-go:hover{background: #d43d3d;}
.ms-owner-menu-confirm-go.is-warn{background: #eab411; color: #2c3242;}
.ms-owner-menu-confirm-go.is-warn:hover{background: #d8a40c;}
.ms-owner-menu-confirm-go.is-primary{background: #40b3de;}
.ms-owner-menu-confirm-go.is-primary:hover{background: #3aa2ca;}
.ms-owner-menu-stock{padding: 14px 16px 18px;}
.ms-owner-menu-stock-row{display: flex; align-items: center; gap: 12px; margin-bottom: 14px;}
.ms-owner-menu-stock-input{flex: 1; height: 46px; padding: 0 14px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 4px; font: 400 16px/1 var(--cb-font-regular); font-variant-numeric: tabular-nums; color: var(--cb-text); outline: none; box-sizing: border-box;}
.ms-owner-menu-stock-input:focus{border-color: var(--cb-link); box-shadow: 0 0 0 2px rgba(52,182,234,.20);}
.ms-owner-menu-stock-input:disabled{background: var(--cb-bg); color: var(--cb-muted); cursor: not-allowed;}
.ms-owner-menu-stock-toggle{display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--cb-font-regular); color: var(--cb-sec); cursor: pointer; user-select: none; white-space: nowrap;}
.ms-owner-menu-stock-toggle input{accent-color: var(--cb-link);}
.ms-owner-menu-stock-hint{font: 400 12px/18px var(--cb-font-regular); color: var(--cb-muted); margin: 0 0 14px;}
@keyframes ms-cover-drag-hint-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50%      { transform: translateX(-50%) translateY(-3px); } }
/* filter sheet (restored host) */
.hm-filter-section{border-top: 1px solid var(--cb-border);}
.hm-filter-section:first-of-type{border-top: 0;}
.hm-filter-section-head{display: flex; align-items: center; gap: 10px; padding: 12px 0; background: transparent; width: 100%; text-align: left; cursor: pointer;}
.hm-filter-section-head .label{flex: 1; font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); letter-spacing: 2px; text-transform: uppercase;}
.hm-filter-section-head .count{min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--cb-link); color: #fff; font: 400 11px/1 var(--cb-font-regular); display: inline-flex; align-items: center; justify-content: center;}
.hm-filter-section-head .count[hidden]{display: none;}
.hm-filter-section-head .chev{width: 12px; height: 12px; transform: rotate(0); transition: transform 180ms ease; color: var(--cb-muted); stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
.hm-filter-section[data-open="true"] .hm-filter-section-head .chev{transform: rotate(180deg);}
.hm-filter-section-body{display: block; max-height: 0; padding: 0; overflow: hidden; transition: max-height 280ms cubic-bezier(.22,.61,.36,1), padding   200ms cubic-bezier(.22,.61,.36,1);}
.hm-filter-section[data-open="true"] .hm-filter-section-body{max-height: 500px; padding: 0 0 14px;}
.hm-filter-section.is-entering{animation: cb-section-enter 320ms cubic-bezier(.22,.61,.36,1) both;}
.hm-filter-label{font: 400 11px/1 var(--cb-font-regular); color: var(--cb-muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;}
.hm-filter-chips{display: flex; flex-wrap: wrap; gap: 8px;}
.hm-filter-chip{height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--cb-chip-bg); color: var(--cb-text); font: 400 12px/1 var(--cb-font-regular); cursor: pointer; border: 0; transition: background-color 160ms ease, color 160ms ease;}
.hm-filter-chip[aria-pressed="true"]{background: var(--cb-link); color: #fff;}
.hm-filter-segment{display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--cb-border-hard);}
.hm-filter-segment button{padding: 8px 18px; cursor: pointer; background: transparent; color: var(--cb-text); font: 400 12px/1 var(--cb-font-regular); border: 0; border-right: 1px solid var(--cb-border-hard);}
.hm-filter-segment button:last-child{border-right: 0;}
.hm-filter-segment button[aria-pressed="true"]{background: var(--cb-link); color: #fff;}
.hm-filter-rating{display: flex; gap: 8px;}
.hm-filter-rating button{height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; border: 1px solid var(--cb-border-hard); background: transparent; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-text); cursor: pointer;}
.hm-filter-rating button[aria-pressed="true"]{border-color: var(--cb-link); background: var(--cb-chip-active);}
.hm-filter-rating .star{color: #f5a623;}
.hm-filter-price{display: flex; align-items: center; gap: 12px;}
.hm-filter-price .lo, .hm-filter-price .hi{font: 400 13px/1 var(--cb-font-regular); color: var(--cb-text); min-width: 28px;}
.hm-filter-price .hi{min-width: 48px; text-align: right;}
.hm-filter-price input[type="range"]{flex: 1; -webkit-appearance: none; appearance: none; height: 3px; background: var(--cb-border); border-radius: 2px; background-image: linear-gradient(to right, var(--cb-link) 0%, var(--cb-link) var(--pct, 100%), var(--cb-border) var(--pct, 100%)); outline: none;}
.hm-filter-price input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--cb-link); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.3);}
.hm-filter-price input[type="range"]::-moz-range-thumb{width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--cb-link); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.3);}
.hm-filter-head{display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;}
.hm-filter-head .title{font: 400 17px/1 var(--cb-font-regular); color: var(--cb-text);}
.hm-filter-head-actions{display: inline-flex; align-items: center; gap: 14px;}
.hm-filter-reset{font: 400 12px/1 var(--cb-font-regular); color:var(--cb-link-text,var(--cb-link)); text-transform: uppercase; letter-spacing: 1.4px; background: transparent; border: 0; cursor: pointer; padding: 4px 8px;}
.hm-filter-close{width: 28px; height: 28px; border-radius: 50%; background: var(--cb-chip-bg); color: var(--cb-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0;}
.hm-filter-close svg{width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round;}
.hm-filter-apply{width: 100%; height: 46px; border: none; border-radius: 999px; background: var(--cb-link); color: #fff; font: 400 13px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; cursor: pointer; margin-top: 8px; transition: filter 140ms ease, transform 140ms ease;}
.hm-filter-apply:hover{filter: brightness(1.06); transform: translateY(-1px);}
/* socials editor rows (site.css) */
.ms-social-row-icon{width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--cb-bg); border: 1px solid var(--cb-border); display: inline-flex; align-items: center; justify-content: center; color: var(--cb-text);}
/* ═══ Owner menu as an anchored popover (desktop). Placement (left/top) is written by store.js placeMenu(). ═══ */
.ms-owner-menu-backdrop{background: transparent !important;}
.ms-owner-menu-panel{position: fixed; left: 0; top: 0; right: auto; bottom: auto; margin: 0; width: 300px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 24px)); border-radius: 12px; border: 1px solid var(--cb-border-hard); box-shadow: 0 18px 44px rgba(20,23,33,.22), 0 2px 6px rgba(20,23,33,.10); transform: translateY(-6px) scale(.97); opacity: 0; transform-origin: top right; transition: transform 160ms cubic-bezier(.2,.8,.2,1), opacity 140ms; overflow: hidden;}
.ms-owner-menu.is-up .ms-owner-menu-panel{transform-origin: bottom right; transform: translateY(6px) scale(.97);}
.ms-owner-menu.is-shown .ms-owner-menu-panel{transform: none; opacity: 1;}
.ms-owner-menu-handle{display: none;}
.ms-owner-menu-head{padding: 12px 14px; gap: 10px;}
.ms-owner-menu-thumb{width: 36px; height: 36px;}
.ms-owner-menu-title{font-size: 13px;}
.ms-owner-menu-body{padding: 6px; padding-bottom: 6px;}
.ms-owner-menu-item{padding: 9px 10px; border-bottom: 0; border-radius: 8px; gap: 12px; font-size: 13px;}
.ms-owner-menu-item svg{width: 16px; height: 16px;}
.ms-owner-menu-item:hover, .ms-owner-menu-item:focus-visible{background: var(--cb-chip-bg, #f1f3f6); outline: none;}
.ms-owner-menu-item.is-danger{margin-top: 4px; border-top: 1px solid var(--cb-border); border-radius: 0 0 8px 8px; padding-top: 12px;}
.ms-owner-menu-confirm, .ms-owner-menu-stock{padding: 10px 10px 6px;}
/* toggle rows (bundle menu) */
.ms-owner-menu-toggle{cursor: pointer; align-items: flex-start;}
.ms-owner-menu-toggle input{position: absolute; opacity: 0; width: 0; height: 0;}
.ms-owner-menu-check{width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--cb-border-hard); background: var(--cb-card); display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; transition: background .12s, border-color .12s;}
.ms-owner-menu-check svg{width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0;}
.ms-owner-menu-check.is-on{background: var(--cb-link); border-color: var(--cb-link);}
.ms-owner-menu-check.is-on svg{opacity: 1;}
.ms-owner-menu-toggle-text{display: grid; gap: 2px; min-width: 0;}
.ms-owner-menu-toggle-text b{font: 600 13px/1.3 var(--cb-font-semibold); color: var(--cb-text);}
.ms-owner-menu-toggle-text small{font: 400 11.5px/1.4 var(--cb-font-regular); color: var(--cb-sec);}
.ms-owner-menu-sub{display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 10px 6px 40px; font: 500 12px/1 var(--cb-font-regular); color: var(--cb-sec); transition: opacity .15s;}
.ms-owner-menu-sub.is-off{opacity: .4; pointer-events: none;}
.ms-owner-menu-select{height: 30px; padding: 0 26px 0 10px; border-radius: 6px; border: 1px solid var(--cb-border-hard); background: var(--cb-bg); color: var(--cb-text); font: 500 12px/1 var(--cb-font-regular); appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--cb-sec) 50%),linear-gradient(135deg,var(--cb-sec) 50%,transparent 50%); background-position: calc(100% - 13px) 12px, calc(100% - 8px) 12px; background-size: 5px 5px; background-repeat: no-repeat;}
/* bundle kebab: same disc, sits in the head's top-right */
.ms-bundle-head{position: relative;}
.ms-bundle-kebab{position: absolute; right: 12px; top: 10px;}
.ms-bundle-head .ms-bundle-eyebrow, .ms-bundle-head .ms-bundle-title{padding-right: 44px;}
/* ═══ Store row: a bundle's products shown as a horizontal row inside the store grid ═══ */
.ms-store-row-li{grid-column: 1 / -1; list-style: none; padding: 10px 0 2px;}
.ms-store-row{position: relative;}
.ms-store-row-head{display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 12px; min-height: 38px;}
.ms-store-row-head::after{content: ""; order: 1; flex: 1; height: 1.5px; background: linear-gradient(90deg, color-mix(in srgb, #7c5cff 25%, transparent), #7c5cff); border-radius: 1px; min-width: 40px;}
.ms-store-row-head .ms-store-row-cta, .ms-store-row-head .ms-store-row-count{order: 2;}
.ms-store-row[aria-label] .ms-store-row-head:has(.ms-store-row-count)::after{background: var(--cb-border-hard);}
.ms-store-row-title{margin: 0; font: 700 12px/1 var(--cb-font-bold); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cb-sec);}
.ms-store-row-link{font: 600 12px/1 var(--cb-font-semibold); color:var(--cb-link-text,var(--cb-link)); white-space: nowrap;}
.ms-store-row-link:hover{text-decoration: underline;}
.ms-store-row-count{font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted); white-space: nowrap;}
.ms-store-row-wrap{position: relative; margin: 0 -16px; padding: 0;}
.ms-store-row-rail{--cols: 4; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: none; scrollbar-width: none; padding: 12px 16px 28px; margin: -12px 0 -20px; scroll-padding-inline: 16px; cursor: grab; will-change: scroll-position;}
.ms-store-row-rail::-webkit-scrollbar{display: none;}
.ms-store-row-rail.is-dragging{cursor: grabbing; scroll-snap-type: none; user-select: none;}
.ms-store-row-rail.is-dragging .ms-store-row-card{pointer-events: none;}
.ms-store-row-card{flex: 0 0 calc((100% - 32px - (var(--cols) - 1) * 18px) / var(--cols)); scroll-snap-align: start; -webkit-user-drag: none; user-select: none;}
.ms-store-row-rail.is-dragging .cb-pcard, .ms-bundle-strip.is-dragging .ms-bundle-strip-item{transform: none !important; transition: none !important;}
.ms-store-row-card img{-webkit-user-drag: none;}
.ms-store-row-wrap .dh-arrow{opacity: 0; transition: opacity .16s; z-index: 3;}
.ms-store-row-wrap:hover[data-fade-l="1"] .dh-arrow.prev, .ms-store-row-wrap:hover[data-fade-r="1"] .dh-arrow.next{opacity: 1;}
.ms-store-row-wrap:not([data-fade-l="1"]) .dh-arrow.prev, .ms-store-row-wrap:not([data-fade-r="1"]) .dh-arrow.next{pointer-events: none;}
.ms-store-row-wrap .dh-arrow.prev{left: -10px;}
.ms-store-row-wrap .dh-arrow.next{right: -10px;}
.ms-store-row-wrap .dh-arrow{top: calc(50% - 8px);}
.ms-store-row-card .cb-pcard-owner-drag, .ms-store-row-card .cb-pcard-owner-kebab, .ms-store-row-card .cb-pcard-heart{display: none !important;}
.ms-owner-menu-panel{display: flex; flex-direction: column;}
.ms-owner-menu-body{overflow-y: auto; min-height: 0;}
.ms-owner-menu-pct{display: inline-flex; align-items: center; gap: 6px;}
.ms-owner-menu-pct b{font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-sec);}
.ms-owner-menu-pct-input{width: 64px; text-align: right; background-image: none; padding: 0 8px; -moz-appearance: textfield; font-variant-numeric: tabular-nums;}
.ms-owner-menu-pct-input::-webkit-inner-spin-button, .ms-owner-menu-pct-input::-webkit-outer-spin-button{-webkit-appearance: none;}
.ms-owner-menu-presets{justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-top: -2px;}
.ms-owner-menu-pill{height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--cb-border-hard); background: transparent; color: var(--cb-sec); font: 600 11.5px/1 var(--cb-font-semibold); cursor: pointer; transition: border-color .12s, color .12s, background .12s;}
.ms-owner-menu-pill:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link));}
.ms-owner-menu-pill.is-on{background: var(--cb-link); border-color: var(--cb-link); color: #fff;}
/* the product sheet's Add to bundle body (sweep M2, 2026-10-14) */
.ms-owner-menu-bundles{padding: 10px 10px 6px;}
.ms-owner-menu-bundles > .ms-owner-menu-confirm-title, .ms-owner-menu-bundles > .ms-owner-menu-confirm-sub{padding: 0 6px;}
.ms-owner-menu-bundle-new{display: flex; gap: 8px; align-items: center; padding: 8px 6px 12px;}
.ms-owner-menu-bundle-new .ms-owner-menu-select{flex: 1; background-image: none; padding: 0 10px;}
.ms-owner-menu-bundle-new .ms-owner-menu-pill{height: 30px; white-space: nowrap; flex: none;}
.ms-store-row-head{align-items: center;}
.ms-store-row-cta{display: inline-flex; align-items: center; gap: 10px;}
.ms-store-row-save{padding: 6px 10px; border-radius: 6px; background: #7c5cff; color: #fff; font: 700 11px/1 var(--cb-font-bold); letter-spacing: 1.4px; text-transform: uppercase;}
.ms-store-row-buy{height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #7c5cff; background: color-mix(in srgb, #7c5cff 10%, var(--cb-card)); color: var(--cb-text); font: 600 13px/1 var(--cb-font-semibold); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s, box-shadow .15s;}
.ms-store-row-buy b{font-weight: 700; color: #7c5cff;}
.ms-store-row-buy s{color: var(--cb-muted); font-weight: 400; font-size: 12px;}
.ms-store-row-buy:hover{background: #7c5cff; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(124,92,255,.32);}
.ms-store-row-buy:hover b{color: #fff;}
.ms-store-row-buy:hover s{color: rgba(255,255,255,.75);}
.ms-store-row-buy.is-added{background: var(--cb-commit); border-color: var(--cb-commit); color: #fff;}
.ms-store-row-buy.is-added b{color: #fff;}
.ms-store-row-buy.is-added s{display: none;}
.ms-store-row-buy.is-added span{display: inline-flex; align-items: center; gap: 8px;}
.ms-store-row-buy.is-added:hover{background: var(--cb-commit); box-shadow: none; transform: none;}

/* The owner's card states (V3::Store::Owner::StateBadgeComponent, Michael's request 2026-10-12): drafts,
   hidden and Made-with-AI products appear in the owner's own grid only, each saying so. Top centre of
   the thumb, clear of the drag handle, the kebab, the stock chip and the discount. */
.ms-owner-states{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:4px;pointer-events:none;white-space:nowrap}
.ms-owner-state{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:800 10px/1 var(--cb-font-bold, var(--cb-font-regular));letter-spacing:.8px;text-transform:uppercase;color:#fff;background:rgba(20,23,33,.82);box-shadow:0 2px 6px rgba(20,23,33,.25)}
.ms-owner-state.is-draft{background:#e0a100;color:#1b1406}
.ms-owner-state.is-hidden{background:rgba(20,23,33,.82)}
.ms-owner-state.is-ai{background:#7c5cff}

/* M7: the stock editor's sold count with Reset, and its advanced options. */
.ms-owner-menu-stock-sold{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 14px;font:400 13px/1.4 var(--cb-font-regular);color:var(--cb-sec);}
.ms-owner-menu-stock-sold[hidden]{display:none;}
.ms-owner-menu-stock-reset{background:none;border:1px solid var(--cb-border-hard);border-radius:4px;padding:6px 12px;color:var(--cb-text);font:600 12px/1 var(--cb-font-semibold);cursor:pointer;}
.ms-owner-menu-stock-advanced{margin:0 0 14px;border-top:1px solid var(--cb-border);padding-top:10px;}
.ms-owner-menu-stock-advanced summary{cursor:pointer;font:600 13px/1.4 var(--cb-font-semibold);color:var(--cb-text);}
.ms-owner-menu-stock-field{display:flex;flex-direction:column;gap:6px;margin-top:12px;font:400 13px/1.4 var(--cb-font-regular);color:var(--cb-sec);}
.ms-owner-menu-stock-field small{font-size:12px;color:var(--cb-muted);}
.ms-owner-menu-stock-text{width:100%;box-sizing:border-box;padding:10px 12px;background:var(--cb-card);border:1px solid var(--cb-border);border-radius:4px;font:400 14px/1.4 var(--cb-font-regular);color:var(--cb-text);resize:vertical;}
.ms-owner-menu-stock-advanced .ms-owner-menu-stock-toggle{margin-top:12px;white-space:normal;line-height:1.4;}
.ms-owner-menu-stock-advanced .ms-owner-menu-stock-toggle + .ms-owner-menu-stock-text{margin-top:8px;}
.ms-owner-menu-stock-row .ms-owner-menu-stock-input{min-width:0;}
/* r29 M3: a copied bundle link (?pane=bundles#bundle-<id>) lands the bundle below the fixed header. */
.ms-bundle[id]{scroll-margin-top:calc(var(--cb-chrome-h,76px) + 24px);}
/* r30 T2: an off row looks off, and says why under its label. */
.ms-owner-menu-item:disabled{opacity:.55;cursor:not-allowed;flex-wrap:wrap;row-gap:2px;}
.ms-owner-menu-item:disabled:hover{background:transparent;}
.ms-owner-menu-note{flex-basis:100%;padding-left:28px;font:400 11.5px/1.4 var(--cb-font-regular);color:var(--cb-sec);white-space:normal;text-align:left;}

/* A bundle with nothing a buyer can get, shown to its owner only (v3-master's ruling on tester-r's r34c). */
.ms-bundle.is-unavailable{opacity: .92;}
.ms-bundle-unavailable{display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 16px 16px; padding: 12px 14px; border: 1px dashed var(--cb-border); border-radius: 10px;}
.ms-bundle-unavailable-note{margin: 0; font: 400 13px/18px var(--cb-font-regular); color: var(--cb-muted);}
.ms-bundle-unavailable-edit{background: transparent; border: 1px solid var(--cb-border); border-radius: 999px; padding: 8px 14px; cursor: pointer; color: var(--cb-link-text, var(--cb-link)); font: 700 11px/1 var(--cb-font-semibold); letter-spacing: 1px; text-transform: uppercase;}
.ms-bundle-unavailable-edit:hover{border-color: var(--cb-link);}
/* user.css: rules script-extracted from production/assets/css/site.css for every mobile class this page uses that desktop.css does not define. Re-extract rather than hand-edit. */
.cb-comments{background: transparent; padding: 8px 16px 28px;}
.cb-avatar{flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 600 13px/1 var(--cb-font-semibold); letter-spacing: .4px; border-radius: 6px; border: 1px solid var(--cb-border); width: 36px; height: 36px; background: linear-gradient(135deg, #7c8edb, #3a4ea3);}
.cb-avatar[data-name="Marc Brunet"]{background: linear-gradient(135deg,#e8a76b,#a85c3a);}
.cb-avatar[data-name="Nazário Baltazar"]{background: linear-gradient(135deg,#7c8edb,#3a4ea3);}
.cb-avatar[data-name="Ayumu Sato"]{background: linear-gradient(135deg,#7bc178,#3e9c50);}
.cb-avatar[data-name="Frey"]{background: linear-gradient(135deg,#e95d8e,#9b2756);}
.cb-avatar[data-name="Jean-Philippe Mongeau"]{background: linear-gradient(135deg,#9b6bd8,#5a338d);}
.cb-avatar[data-name="You"]{background: linear-gradient(135deg,#3fb6a8,#1d6f6c);}
.cb-comments-composer .cb-avatar{width: 32px; height: 32px; font-size: 12px;}
.cb-comments-composer-open{background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 10px; padding: 12px;}
.cb-comments-composer-row{display: flex; gap: 10px; align-items: flex-start;}
.cb-comments-composer-row .cb-avatar{width: 32px; height: 32px; font-size: 12px;}
.cb-comments-textarea{flex: 1; min-width: 0; resize: vertical; background: transparent; border: none; color: var(--cb-text); font: 400 14px/22px var(--cb-font-regular); outline: none; min-height: 56px;}
.cb-comments-composer-actions{display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--cb-border);}
.cb-comments-actions-spacer{flex: 1;}
.cb-comments-btn-attach{display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--cb-muted); cursor: pointer; font: 500 12px/1 var(--cb-font-semibold); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;}
.cb-comments-btn-attach:hover{background: transparent; border-color: var(--cb-border); color:var(--cb-link-text,var(--cb-link));}
.cb-comments-btn-attach:disabled{opacity: .5; cursor: not-allowed;}
.cb-comments-btn-attach svg{display: inline-block;}
.cb-comments-attachments{display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px;}
.cb-comments-btn-primary{height: 36px; padding: 0 18px; border-radius: 999px; background: var(--cb-link); color: #fff; border: none; cursor: pointer; font: 700 11px/1 var(--cb-font-bold); letter-spacing: 1.4px; text-transform: uppercase;}
.cb-comments-btn-primary:hover:not(:disabled){filter: brightness(1.05);}
.cb-comments-btn-primary:disabled{background: var(--cb-border); cursor: not-allowed;}
.cb-comments-btn-ghost{height: 36px; padding: 0 16px; border-radius: 999px; background: transparent; border: 1px solid var(--cb-border); color: var(--cb-text); cursor: pointer; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase;}
.cb-comments-btn-ghost:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link));}
.cb-comments-filter{display: flex; align-items: center; gap: 16px; padding: 18px 0 12px; position: relative;}
border-bottom: 1px solid var(--cb-border); position: relative; } .cb-comments-filter-label{font: 600 12px/1 var(--cb-font-semibold); color: var(--cb-text); letter-spacing: 1px; text-transform: uppercase; padding-bottom: 4px; border-bottom: 2px solid var(--cb-link);}
.cb-comments-sort-menu{position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(20,23,33,.12); padding: 4px 0; z-index: 10; min-width: 160px;}
.cb-comments-sort-menu[hidden]{display: none;}
.cb-comments-sort-menu button{display: block; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: none; cursor: pointer; color: var(--cb-text); font: 400 13px/1 var(--cb-font-regular); transition: background .12s ease, color .12s ease;}
.cb-comments-sort-menu button:hover{background: var(--cb-bg);}
.cb-comments-sort-menu button.is-active{background: var(--cb-link); color: #fff;}
.cb-thread + .cb-thread{margin-top: 6px;}
.cb-comment{display: block; padding-top: 18px;}
.cb-comment[data-depth="1"], .cb-comment[data-depth="2"]{padding-top: 12px;}
.cb-comment[data-depth="1"] .cb-avatar, .cb-comment[data-depth="2"] .cb-avatar, .cb-comment[data-depth="1"] .cb-comment-avatar, .cb-comment[data-depth="2"] .cb-comment-avatar{width: 30px; height: 30px;}
.cb-comment-head{display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px;}
.cb-comment-meta{flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;}
.cb-comment-author{font: 600 13px/1.2 var(--cb-font-semibold); color:var(--cb-link-text,var(--cb-link));}
.cb-comment-date{margin-top: 3px; width: 100%; font: 400 12px/16px var(--cb-font-regular); color: var(--cb-muted);}
.cb-comment-menu{flex: none; background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 4px; color: var(--cb-muted); display: inline-flex; margin-top: -2px; transition: background-color 160ms ease;}
.cb-comment-menu:hover{background: var(--cb-card);}
.cb-comment-menu[aria-expanded="true"]{background: var(--cb-card);}
.cb-comment.is-deleted .cb-comment-text, .cb-comment.is-deleted .cb-comment-image, .cb-comment.is-deleted .cb-comment-actions{display: none;}
.cb-comment.is-deleted .cb-comment-deleted{display: block; font: 400 12px/18px var(--cb-font-regular); font-style: italic; color: var(--cb-muted); padding: 4px 0 12px;}
.cb-comment-text{font: 400 14px/21px var(--cb-font-regular); color: var(--cb-text); text-wrap: pretty; white-space: pre-wrap; margin: 0 0 10px;}
.cb-comment-reply{background: transparent; border: none; cursor: pointer; padding: 0; color:var(--cb-link-text,var(--cb-link)); font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase;}
.cb-replies{list-style: none; margin-left: 46px; padding-left: 14px; border-left: 2px solid var(--cb-border);}
.cb-replies li{list-style: none;}
.cb-comment-avatar{flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 600 13px/1 var(--cb-font-semibold); background: linear-gradient(135deg, #7c8edb, #3a4ea3);}
.cb-comment-avatar[data-cb-avatar]{background: transparent; padding: 0;}
.cb-comment-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.cb-threads{list-style: none; padding: 0; margin: 0;}
.cb-comments-composer-collapsed{width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 8px 0 0; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 999px; cursor: pointer; text-align: left; transition: border-color 160ms ease, background-color 160ms ease;}
.cb-comments-composer-collapsed:hover{border-color: var(--cb-link); background: rgba(64,179,222,.04);}
.cb-comments-composer-avatar{flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3fb6a8, #1d6f6c); color: #fff; font: 600 12px/1 var(--cb-font-semibold);}
.cb-comments-composer-avatar[data-cb-avatar]{background: transparent; padding: 0;}
.cb-comments-composer-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.cb-comments-composer-placeholder{flex: 1; min-width: 0; font: 400 13px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comments-filter-sort{background: transparent; border: none; cursor: pointer; padding: 4px 0; color: var(--cb-text); font: 400 13px/1 var(--cb-font-regular); display: inline-flex; align-items: center; gap: 6px;}
.cb-comments-filter-sort svg{transition: transform 180ms ease;}
.cb-comments-filter-sort[aria-expanded="true"] svg{transform: rotate(180deg);}
.cb-comment-foot{display: flex; align-items: center; gap: 18px; margin-top: 8px; font: 400 12px/1 var(--cb-font-regular); color: var(--cb-muted);}
.cb-comment-react{display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--cb-muted); font: inherit; transition: color 160ms ease;}
.cb-comment-react svg{transition: transform 160ms ease;}
.cb-comment-react:hover{color: #ff4d6d;}
.cb-comment-react:hover svg{transform: scale(1.08);}
.cb-comment-react[aria-pressed="true"]{color: #ff4d6d;}
.cb-comment-react[aria-pressed="true"] svg{fill: currentColor; stroke: currentColor;}
.cb-comment-toggle-replies{display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 48px; background: transparent; border: none; cursor: pointer; color:var(--cb-link-text,var(--cb-link)); font: 600 12px/1 var(--cb-font-semibold); padding: 6px 0;}
.cb-comment-toggle-replies:hover{text-decoration: underline;}
.cb-sheet{position: absolute; left: 50%; right: auto; bottom: 0; width: 100%; max-width: 480px; transform: translateX(-50%) translateY(100%); max-height: 85vh; overflow-y: auto; background: var(--cb-panel); border-radius: 18px 18px 0 0; padding: 8px 0 24px; transition: transform 300ms var(--cb-ease); box-shadow: 0 -10px 40px rgba(0,0,0,.15);}
.cb-sheet-host.is-open .cb-sheet{transform: translateX(-50%) translateY(0);}
.cb-sheet-handle{width: 40px; height: 4px; border-radius: 2px; background: var(--cb-border-hard); margin: 0 auto 16px;}
.bl-compose-host .cb-sheet-backdrop{position: absolute; inset: 0; background: rgba(12,16,26,0); transition: background 220ms cubic-bezier(.32,.72,.24,1);}
.bl-compose-host.is-open .cb-sheet-backdrop{background: rgba(12,16,26,.45);}
.ms-identity{position: relative; background: #141926; overflow: hidden; color: #f2f4f8;}
.ms-identity-inner{position: relative; z-index: 1; padding: 30px 22px 28px; text-align: center;}
.ms-avatar{width: 96px; height: 96px; border-radius: 10px; border: 1px solid rgba(255,255,255,.32); background: rgba(58,69,88,.7); display: inline-flex; align-items: center; justify-content: center; color: #e8eaf0; font: 500 32px/1 var(--cb-font-regular); letter-spacing: 1px; margin: 0 auto 16px; overflow: hidden;}
.ms-avatar[data-cb-avatar]{background: transparent; padding: 0; border: none; border-radius: 10px;}
.ms-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block; border-radius: 8px;}
.ms-name{margin: 0 0 12px; font: 400 24px/1.2 var(--cb-font-regular); color: #f2f4f8; letter-spacing: -.1px; text-shadow: 0 1px 4px rgba(0,0,0,.5);}
.ms-stats{display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; row-gap: 10px; margin-bottom: 16px; font: 400 13.5px/1 var(--cb-font-regular); color: rgba(208,213,224,.85);}
.ms-stat{display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;}
.ms-bio{max-width: 420px; margin: 0 auto 20px; font: 400 14px/1.6 var(--cb-font-regular); color: #d5dae4; text-shadow: 0 1px 3px rgba(0,0,0,.5);}
.ms-actions{display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;}
.ms-btn{height: 44px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: none; border-radius: 999px; font: 400 12px/1 var(--cb-font-regular); letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; transition: filter 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease;}
.ms-btn:active{transform: translateY(1px);}
.ms-btn-message{background: var(--cb-link); color: #fff; box-shadow: 0 6px 14px rgba(64,179,222,.30);}
.ms-btn-message:hover{filter: brightness(1.06);}
.ms-btn-follow{background: var(--cb-link); color: #fff; box-shadow: 0 6px 14px rgba(64,179,222,.30);}
.ms-btn-follow:hover{filter: brightness(1.06);}
.ms-btn-follow.is-following{background: transparent; color: #e8eaf0; border: 1px solid rgba(255,255,255,.32); box-shadow: none;}
.ms-btn-follow.is-following:hover{background: rgba(255,255,255,.06);}
.ms-identity.is-editing-pos, .ms-cover.is-editing-pos{cursor: grab; touch-action: none;}
.ms-identity.is-editing-pos:active, .ms-cover.is-editing-pos:active{cursor: grabbing;}
.ms-edit-sheet{position: fixed; inset: 0; z-index: 95; pointer-events: none;}
.ms-edit-sheet.is-open{pointer-events: auto;}
.ms-edit-sheet-backdrop{position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 220ms cubic-bezier(.32,.72,.24,1);}
.ms-edit-sheet.is-shown .ms-edit-sheet-backdrop{background: rgba(0,0,0,.5);}
.ms-edit-sheet-panel{position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px; background: var(--cb-card); color: var(--cb-text); border-top-left-radius: 16px; border-top-right-radius: 16px; transform: translateY(100%); transition: transform 300ms cubic-bezier(.32,.72,.24,1); box-shadow: 0 -10px 32px rgba(0,0,0,.25); max-height: 88vh; display: flex; flex-direction: column;}
.ms-edit-sheet.is-shown .ms-edit-sheet-panel{transform: translateY(0);}
.ms-edit-sheet-handle{width: 40px; height: 4px; border-radius: 2px; background: var(--cb-border-hard); margin: 14px auto 16px; flex-shrink: 0;}
.ms-edit-sheet-head{display: flex; align-items: center; justify-content: space-between; padding: 0 18px 14px;}
.ms-edit-sheet-title{font: 400 17px/1 var(--cb-font-regular); color: var(--cb-text);}
.ms-edit-sheet-cancel{background: transparent; border: none; cursor: pointer; padding: 0; font: 400 12px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-muted);}
.ms-edit-sheet-body{padding: 0 18px 26px; overflow-y: auto; padding-bottom: max(26px, env(safe-area-inset-bottom, 0px));}
.ms-edit-form-row{margin-bottom: 14px;}
.ms-social-row .ms-edit-form-input{flex: 1;}
.ms-pc-host{padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 10px;}
.ms-pc-field{width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: transparent; border: 1px solid var(--cb-border); border-radius: 999px; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, background .15s;}
.ms-pc-field:hover{border-color: var(--cb-link); background: rgba(64,179,222,.04);}
.ms-pc-avatar{width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;}
.ms-pc-avatar[data-cb-avatar]{background: transparent; padding: 0;}
.ms-pc-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.ms-pc-prompt{flex: 1; min-width: 0; font: 400 14px/1 var(--cb-font-regular); color: var(--cb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-pc-kinds{display: flex; gap: 6px; flex-wrap: wrap;}
.ms-pc-pill{appearance: none; cursor: pointer; padding: 8px 16px; background: transparent; border: 1px solid var(--cb-border-hard); border-radius: 999px; color: var(--cb-text); font: 500 13px/1 var(--cb-font-regular); transition: border-color .12s, color .12s, background .12s;}
.ms-pc-pill:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); background: rgba(64,179,222,.06);}
.ms-postkind-row{display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px;}
.ms-postkind{appearance: none; cursor: pointer; padding: 8px 16px; background: transparent; border: 1px solid var(--cb-border-hard); border-radius: 999px; color: var(--cb-text); font: 500 13px/1 var(--cb-font-regular); transition: border-color .12s, color .12s, background .12s;}
.ms-postkind:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link)); background: rgba(64,179,222,.06);}
.ms-postkind.is-active{background: var(--cb-link); border-color: var(--cb-link); color: #fff;}
.ms-postkind.is-active:hover{filter: brightness(1.05);}
.ms-postkind-hint{margin: -6px 0 14px; font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); min-height: 16px; transition: opacity 180ms ease;}
.ms-postkind-hint.is-swapping{opacity: 0;}
.ms-post-images-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 8px;}
.ms-post-images-grid > div{position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--cb-border);}
.ms-post-images-grid > div button{position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(20,23,33,.85); color: #fff; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;}
.ms-post-images-grid > div button svg{width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}
.ms-post-add-image{aspect-ratio: 1 / 1; width: 100%; padding: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1.5px dashed var(--cb-border-hard); border-radius: 10px; color: var(--cb-muted); font: 500 11px/1 var(--cb-font-regular); letter-spacing: .2px; cursor: pointer;}
.ms-post-add-image:hover{border-color: var(--cb-link); color:var(--cb-link-text,var(--cb-link));}
.ms-post-add-image.is-hidden{display: none;}
.ms-post-add-image svg{width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;}
.ms-poll-opts{display: flex; flex-direction: column; gap: 6px;}
.ms-poll-opt{display: flex; align-items: center; gap: 8px;}
.ms-poll-opt .ms-edit-form-input{flex: 1;}
.ms-poll-rm{appearance: none; cursor: pointer; flex-shrink: 0; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: transparent; color: var(--cb-muted); border: 1px solid var(--cb-border-hard); display: inline-flex; align-items: center; justify-content: center;}
.ms-poll-rm:hover{border-color: #ec4d4d; color: #ec4d4d;}
.ms-poll-rm svg{width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;}
.ms-poll-add{margin-top: 8px; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: transparent; color:var(--cb-link-text,var(--cb-link)); border: 1px dashed var(--cb-link); font: 600 12px/1 var(--cb-font-semibold); letter-spacing: .4px;}
.ms-poll-add:hover:not(:disabled){background: rgba(64,179,222,.06);}
.ms-poll-add:disabled{opacity: .4; cursor: not-allowed;}
.ms-poll-add svg{width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;}
.ms-post-price-row .ms-edit-form-input{flex: 1; min-width: 0;}
.ms-edit-form-label{display: block; margin-bottom: 6px; font: 400 11px/1 var(--cb-font-regular); letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-muted);}
.ms-edit-form-input, .ms-edit-form-textarea{width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--cb-border); border-radius: 8px; background: transparent; color: var(--cb-text); font: 400 14px/1.4 var(--cb-font-regular); outline: none;}
.ms-edit-form-input:focus, .ms-edit-form-textarea:focus{border-color: var(--cb-link);}
.ms-edit-form-textarea{min-height: 88px; resize: vertical;}
.ms-edit-form-help{margin-top: 6px; font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted);}
.ms-edit-form-save{width: 100%; height: 48px; margin-top: 8px; background: var(--cb-link); border: none; border-radius: 999px; color: #fff; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 12px rgba(64,179,222,.35);}
.ms-edit-form-save:hover{filter: brightness(1.05);}
.ms-posts{background: transparent; padding: 14px 12px 24px; display: flex; flex-direction: column; gap: 12px;}
.ms-post{background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 12px; padding: 14px 16px 12px;}
.ms-post-head{display: flex; gap: 10px; align-items: center; margin-bottom: 10px;}
.ms-post-avatar{width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--cb-link); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--cb-font-bold); overflow: hidden;}
.ms-post-avatar[data-cb-avatar] svg{width: 100%; height: 100%; display: block;}
.ms-post-byline{flex: 1; min-width: 0;}
.ms-post-author{font: 700 14px/1 var(--cb-font-bold); color: var(--cb-text);}
.ms-post-date{margin-top: 4px; font: 500 11.5px/1 var(--cb-font-regular); color: var(--cb-muted);}
.ms-post-body{margin: 0 0 10px; font: 400 14px/22px var(--cb-font-regular); color: var(--cb-text);}
.ms-post.is-pinned{border-color: rgba(64,179,222,.32); box-shadow: 0 1px 0 rgba(64,179,222,.10) inset;}
.ms-post-kind{display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 4px; font: 700 9px/1 var(--cb-font-semibold); letter-spacing: 1.2px; text-transform: uppercase; margin-left: auto;}
.ms-post-kind.k-launch{background: rgba(123,193,120,.16); color: #6aaa67;}
.ms-post-kind.k-sale{background: rgba(231,76,60,.14);   color: #d44e3f;}
.ms-post-kind.k-gallery{background: rgba(192,103,200,.14); color: #a857b1;}
.ms-post-kind.k-poll{background: rgba(28,168,150,.18);  color: #169081;}
.ms-post-kind.k-artwork{background: rgba(64,179,222,.14);  color: #2a8fbf;}
.ms-post-kind svg{width: 10px; height: 10px;}
.ms-post-title{margin: 0 0 6px; font: 700 16px/22px var(--cb-font-bold); color: var(--cb-text);}
/* Posts: uncropped single image, count-aware multi-image previews. */
.ms-post-imgs{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:10px;grid-template-columns:repeat(2,minmax(0,1fr));}
.ms-post-imgs > *{display:block;position:relative;min-width:0;overflow:hidden;cursor:zoom-in;background-size:cover;background-position:center;background-repeat:no-repeat;}
.ms-post-imgs > button{padding:0;border:0;color:inherit;background-color:transparent;}
.ms-post-imgs img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;}
.ms-post-imgs.n1{grid-template-columns:minmax(0,1fr);}
.ms-post-imgs.n1 > :not(img):not(:has(img)){aspect-ratio:var(--ms-image-ratio,4/3);background-size:contain;}
.ms-post-imgs.n2 > *, .ms-post-imgs.n3 > *, .ms-post-imgs.n4 > *{aspect-ratio:1;}
.ms-post-imgs.n3 > :first-child{grid-column:1 / -1;aspect-ratio:2;}
.ms-post-imgs:is(.n2,.n3,.n4) img{width:100%;height:100%;object-fit:cover;}
.ms-post-imgs:is(.n2,.n3,.n4) > :not(img) > img{position:absolute;inset:0;}
.ms-post-imgs > [data-extra]::after{content:'+' attr(data-extra);position:absolute;inset:0;background:rgba(15,18,28,.55);color:#fff;display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--cb-font-bold);letter-spacing:.5px;}
.ms-post-poll{margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px;}
.ms-post-poll-opt{position: relative; padding: 10px 12px; background: transparent; border: 1px solid var(--cb-border); border-radius: 8px; cursor: pointer; overflow: hidden; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 13px/1.3 var(--cb-font-medium, var(--cb-font-regular)); color: var(--cb-text); transition: border-color .15s ease, background .15s ease;}
.ms-post-poll-opt:hover{border-color: rgba(28,168,150,.5);}
.ms-post-poll-opt.is-voted-mine{border-color: rgba(28,168,150,.8); background: rgba(28,168,150,.06);}
.ms-post-poll-bar{position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(28,168,150,.18); transition: width 720ms cubic-bezier(.22,.61,.36,1); z-index: 0;}
.ms-post-poll-opt > *:not(.ms-post-poll-bar){position: relative; z-index: 1;}
.ms-post-poll-label{flex: 1 1 auto; min-width: 0; text-align: left; overflow-wrap: anywhere; word-break: break-word;}
.ms-post-poll-pct{flex: 0 0 auto; font: 700 12px/1 var(--cb-font-bold); color: #169081; min-width: 36px; text-align: right;}
.ms-post-poll-meta{margin-top: 4px; font: 500 11.5px/1.3 var(--cb-font-regular); color: var(--cb-muted); display: flex; gap: 8px; align-items: center;}
.ms-post-poll-meta::before{content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5;}
.ms-post-poll-meta span:first-child::before{display: none;}
.ms-post-actions{display: flex; align-items: center; gap: 20px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--cb-border);}
.ms-post-actions button{display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--cb-muted); font: 500 13px/1 var(--cb-font-medium, var(--cb-font-regular)); transition: color .15s ease;}
.ms-post-actions button svg{width: 18px; height: 18px; transition: transform .18s ease;}
.ms-post-actions button:hover{color: var(--cb-text);}
.ms-post-actions button.is-liked{color: var(--cb-heart, #ff5a5f);}
.ms-post-actions button.is-liked svg{fill: var(--cb-heart, #ff5a5f); transform: scale(1.08);}
.ms-post-actions button.is-open{color:var(--cb-link-text,var(--cb-link));}
/* The post's own menu (Edit, Pin, Delete) sits in this row, so the row's button rule reached its items:
   no padding, 18px rows, and the inline "Delete this post?" at 13px (QA item 15). Its items take the
   handoff's own menu styles again, the comment menu's, which the menu is built on. */
.ms-post-actions .cb-comment-menu-dropdown button{display: flex; width: 100%; justify-content: flex-start; padding: 10px 14px; color: var(--cb-text); white-space: nowrap;}
.ms-post-actions .cb-comment-menu-dropdown button:hover{background: rgba(64,179,222,.08); color: var(--cb-text);}
.ms-post-actions .cb-comment-menu-dropdown button.is-danger{color: var(--cb-error);}
.ms-post-actions .cb-comment-menu-dropdown button.is-danger:hover{background: rgba(217,83,79,.08);}
.ms-post-actions .cb-comment-menu-dropdown svg{width: 14px; height: 14px; transform: none;}
.ms-post-actions .ms-post-share{margin-left: auto;}
.ms-avatar:has(.ms-avatar-camera){overflow: visible !important;}
/* cover banner (shared with store.css) */
.ms-cover{position: absolute; inset: 0;}
/* The tint the cover editor paints and the store saved (overlay_color), between the cover and the scrim; it had no box, so no tint ever showed (2026-10-20). */
.ms-identity .ms-cover-tint{position: absolute; inset: 0; pointer-events: none;}
.ms-cover-art{display: block; width: 100%; height: 100%;}
.ms-cover-scrim{position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,25,38,.3) 0%, rgba(20,25,38,.8) 100%); pointer-events: none;}
/* The adjust bar sits in the page right under the cover band and sticks under the site header, never to the window's bottom, where it went unnoticed (2026-10-20). */
.ms-cover-adjust{position: sticky; top: var(--cb-chrome-h, 102px); bottom: auto; z-index: 40; padding: 12px 12px 0; pointer-events: auto;}
.ms-cover-adjust-card{background: rgba(20,25,38,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.45); padding: 12px 14px 14px;}
.ms-cover-adjust-row1{display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.ms-cover-adjust-row2, .ms-cover-adjust-row3{display: flex; align-items: center; gap: 8px; margin-bottom: 10px;}
.ms-cover-adjust-row3{margin-bottom: 0;}
.ms-cover-adjust-row-label{font: 400 10px/1 var(--cb-font-regular); color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 1.4px; width: 50px; flex-shrink: 0;}
.ms-cover-adjust-thumb{width: 36px; height: 36px; border-radius: 4px; background: #000; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.15); flex-shrink: 0;}
.ms-cover-adjust-change{flex: 1; height: 36px; padding: 0 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: #fff; font: 500 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; text-align: left;}
.ms-cover-adjust-change:hover{background: rgba(255,255,255,.14);}
.ms-cover-adjust-cancel, .ms-cover-adjust-apply{height: 36px; padding: 0 14px; border-radius: 999px; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; flex-shrink: 0;}
.ms-cover-adjust-cancel{background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.18);}
.ms-cover-adjust-apply{background: var(--cb-link); color: #fff; border: none; padding: 0 16px;}
.ms-cover-adjust-apply:hover{filter: brightness(1.05);}
.ms-cover-tint-swatches{display: flex; gap: 6px; flex: 1; flex-wrap: wrap;}
.ms-cover-tint-sw{width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0; display: inline-block;}
.ms-cover-tint-sw.is-active{box-shadow: 0 0 0 2px rgba(20,25,38,.96), 0 0 0 4px var(--cb-link);}
.ms-cover-tint-custom{display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.45); cursor: pointer; position: relative; overflow: hidden;}
.ms-cover-tint-custom input[type="color"]{position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; cursor: pointer; opacity: 0;}
.ms-cover-tint-custom svg{width: 11px; height: 11px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-linecap: round; pointer-events: none;}
.ms-cover-adjust-row3 input[type="range"]{flex: 1; accent-color: var(--cb-link); -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,.18); border-radius: 2px; outline: none;}
.ms-cover-adjust-row3 input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--cb-link); border: 2px solid #fff; cursor: grab;}
.ms-cover-adjust-dim-val{font: 400 11px/1 var(--cb-font-regular); color: rgba(255,255,255,.85); width: 36px; text-align: right; flex-shrink: 0;}
.ms-cover-drag-hint{position: absolute; left: 50%; top: 28px; transform: translateX(-50%) translateY(-6px); opacity: 0; z-index: 5; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; background: rgba(20,25,38,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #fff; font: 600 11px/1 var(--cb-font-semibold); letter-spacing: .4px; box-shadow: 0 4px 14px rgba(0,0,0,.32); transition: opacity 300ms ease, transform 300ms cubic-bezier(.32,.72,.24,1);}
.ms-cover-drag-hint.is-shown{opacity: 1; transform: translateX(-50%) translateY(0); animation: ms-cover-drag-hint-bob 1.8s ease-in-out infinite;}
.ms-cover-drag-hint svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.ms-cover-tint-overlay{position: absolute; inset: 0; pointer-events: none; background: transparent; opacity: 0; transition: background .15s ease, opacity .15s ease; z-index: 1;}
.ms-cover-upload{width: 100%; height: 48px; background: var(--cb-link); border: none; border-radius: 999px; color: #fff; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 12px rgba(64,179,222,.35); display: inline-flex; align-items: center; justify-content: center; gap: 8px;}
.ms-cover-upload svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.ms-cover-presets{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.ms-cover-preset{height: 80px; border-radius: 8px; border: 1px solid var(--cb-border); color: #fff; cursor: pointer; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: 1.4px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.5); padding: 0;}
.ms-cover-preset:focus-visible{outline: 2px solid var(--cb-link); outline-offset: 2px;}
/* edit sheets (shared with store.css) */
.ms-btn-ghost{background: transparent; color: #e8eaf0; border: 1.5px solid rgba(255,255,255,.35); box-shadow: none;}
.ms-btn-ghost:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55);}
/* socials editor rows (site.css) */
.ms-socials-section{margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--cb-border);}
.ms-socials-eyebrow{font: 400 11px/1 var(--cb-font-regular); letter-spacing: 2px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 4px;}
.ms-socials-hint{font: 400 11px/1.4 var(--cb-font-regular); color: var(--cb-muted); margin-bottom: 14px;}
.ms-social-row{display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.ms-social-row-icon{width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--cb-bg); border: 1px solid var(--cb-border); display: inline-flex; align-items: center; justify-content: center; color: var(--cb-text);}
.ms-social-row-icon svg{width: 16px; height: 16px; fill: currentColor;}
/* avatar camera badge (store.css) */
.ms-avatar-camera{position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--cb-link); color: #fff; border: 2px solid #0c1424; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 4;}
.ms-avatar-camera svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}

/* The account's social profiles (store.css's row; fix-c's visitor sweep ST12). */
.ms-socials{display: flex; justify-content: center; gap: 10px;}
.ms-social{width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 1px solid rgba(255,255,255,.32); color: #fff; text-decoration: none; transition: background-color 140ms ease;}
.ms-social:hover{background: rgba(255,255,255,.10); text-decoration: none;}
/* Shared desktop feedback and account access, using the established palette. */
.dc-access{max-width:700px;min-height:60vh;margin:0 auto;padding:100px 32px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:20px}
.dc-access h1{font-size:38px;font-weight:300;margin:0}
.dc-access p{max-width:540px;line-height:1.7;color:var(--cb-muted);margin:0 0 12px}
.dc-action{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:12px 26px;border-radius:28px;background:var(--cb-blue,#40b3de);color:#fff;font-weight:600;text-decoration:none}
.dc-access>a:last-child{color:var(--cb-blue,#40b3de);font-size:14px}
.dc-auth-result{margin-top:20px;padding:18px;border:1px solid var(--cb-border);border-radius:12px}
.dc-auth-result p{font-size:14px;line-height:1.6}
.dc-auth-result .dc-action{width:100%}
.dc-access~main[hidden],main[hidden],.dc-hidden[hidden]{display:none!important}
.dc-saves{color:var(--cb-text);background:var(--cb-surface,#202737);border:1px solid var(--cb-border);border-radius:18px;padding:28px;width:min(480px,calc(100vw - 64px));max-height:80vh;overflow:auto}
.dc-saves::backdrop{background:#080e19b3}
.dc-saves h2{font-size:24px;font-weight:400;margin:0 40px 8px 0}
.dc-saves p{font-size:14px;line-height:1.6;color:var(--cb-muted)}
.dc-saves-close{position:absolute;right:18px;top:18px;border:0;background:none;color:inherit;font-size:28px;width:40px;height:40px;cursor:pointer}
.dc-saves-options{display:grid;gap:8px;margin:20px 0}
.dc-saves-options label{display:flex;gap:14px;align-items:center;border:1px solid var(--cb-border);border-radius:10px;padding:15px;cursor:pointer}
.dc-saves-options input{accent-color:var(--cb-blue,#40b3de);width:19px;height:19px}
.dc-saves-options small{display:block;color:var(--cb-muted);font-size:12px;margin-top:4px}
.dc-saves-new{display:flex;gap:8px;flex-wrap:wrap}
.dc-saves-new label{font-size:13px;width:100%}
.dc-saves-new input{flex:1;min-width:150px;min-height:42px;border-radius:8px;background:var(--cb-bg);color:inherit;border:1px solid var(--cb-border);padding:10px 12px}
.dc-saves-new button{border:0;border-radius:22px;padding:10px 16px;background:var(--cb-blue,#40b3de);color:#fff;cursor:pointer}
.dc-saves .dc-action{border:0;width:100%;margin-top:18px;cursor:pointer}
.dc-save-more{height:28px;width:28px;display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:50%;color:var(--cb-muted);background:transparent;cursor:pointer;letter-spacing:2px;font-size:18px;flex-shrink:0}
.dc-save-more:hover,.dc-save-more:focus-visible{color:var(--cb-text);background:var(--cb-hover)}
.dc-wish-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:24px 0}
.dc-wish-grid .cb-pcard{height:100%}
.dc-wish-grid .cb-pcard-body{padding:14px}
.dc-wish-grid .cb-pcard-heart{margin-left:auto}
@media(max-width:1100px){.dc-wish-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dc-checkout-empty{padding:48px 24px;text-align:center}
.dc-checkout-empty p{color:var(--cb-muted);margin-bottom:24px}
.dc-checkout-empty[hidden],.ch-main [hidden]{display:none!important}
.cb-pcard-body{position:relative}
.cb-pcard-body:has(.dc-save-more) .cb-pcard-title{padding-right:24px}
.cb-pcard-body>.dc-save-more{position:absolute;right:6px;top:8px}
.dc-wishlists .wl-actions{justify-content:flex-start}
.dc-wishlists #wl-new-btn{max-width:240px;flex:none}
.dc-wishlists .wl-collage img{width:100%;height:100%;object-fit:cover;min-height:0}
/* Desktop secondary panels. Keep mobile sheets in the mobile build. */
:root body :is(.wl-sheet-host,.bl-compose-host,.or-cloud,.la-toc-host,.lc-toc-host,.pp-toc-host,.tos-toc-host,#ms-post-comments-sheet){
 position:fixed;inset:0;max-width:none;width:auto;transform:none;padding:32px;
 align-items:center;justify-items:center;
}
:root body :is(.wl-sheet-host,.bl-compose-host,.or-cloud,#ms-post-comments-sheet):not([hidden]),
:root body :is(.la-toc-host,.lc-toc-host,.pp-toc-host,.tos-toc-host)[data-open]{display:grid}
:root body :is(.wl-sheet-host,.bl-compose-host,.or-cloud,#ms-post-comments-sheet)[hidden]{display:none}
:root body :is(.wl-sheet,.bl-compose,.or-cloud-panel,.la-toc-sheet,.lc-toc-sheet,.pp-toc-sheet,.tos-toc-sheet),
:root body #ms-post-comments-sheet .cb-sheet{
 position:relative;inset:auto;margin:0;width:min(560px,calc(100vw - 64px));max-width:none;
 max-height:calc(100dvh - 64px);min-height:0;border:1px solid var(--cb-border);border-radius:16px;
 background:var(--cb-card);color:var(--cb-text);box-shadow:0 24px 64px rgba(0,0,0,.3);
 transform:translateY(8px) scale(.98);opacity:0;
 transition:transform var(--cb-motion-panel) var(--cb-motion-ease),opacity var(--cb-motion-fast) ease;
}
:root body :is(.wl-sheet-host,.bl-compose-host,.or-cloud).is-open>:is(.wl-sheet,.bl-compose,.or-cloud-panel),
:root body [data-shown]>:is(.la-toc-sheet,.lc-toc-sheet,.pp-toc-sheet,.tos-toc-sheet),
:root body #ms-post-comments-sheet.is-open .cb-sheet{transform:none;opacity:1}
:root body :is(.wl-sheet-handle,.or-cloud-handle,.la-toc-handle,.lc-toc-handle,.pp-toc-handle,.tos-toc-handle),
:root body #ms-post-comments-sheet .cb-sheet-handle{display:none}
:root body :is(.wl-sheet,.bl-compose){overflow:hidden}
:root body .wl-sheet-head{padding:24px 28px 16px}
:root body .wl-sheet-title{font-size:22px;line-height:1.3}
:root body .wl-sheet-body{padding:0 28px 24px;min-height:0;overscroll-behavior:contain}
:root body .wl-sheet-foot{padding:18px 28px;display:flex;gap:12px;justify-content:flex-end}
:root body .dc-dialog-cancel{min-height:44px;padding:0 22px;border:1px solid var(--cb-border-hard);border-radius:999px;background:transparent;color:var(--cb-text);font:600 13px/1 var(--cb-font-semibold);cursor:pointer}
:root body .dc-dialog-cancel:hover{border-color:var(--cb-link)}
:root body .wl-save-btn{width:auto;min-width:168px;padding:0 24px;box-shadow:none}
:root body .wl-sheet-close{width:36px;height:36px}
:root body .wl-share-modal{max-width:480px;max-height:calc(100dvh - 64px);overflow:auto;border-radius:16px}
/* Give long comments and article editing their own scroll area. */
:root body #ms-post-comments-sheet .cb-sheet{width:min(760px,calc(100vw - 64px));padding:0;overflow:hidden}
:root body #ms-post-comments-sheet .ms-comments-head{padding:22px 28px;flex-shrink:0}
:root body #ms-post-comments-sheet .ms-comments-scroll{padding:8px 28px 28px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
:root body .bl-compose{width:min(920px,calc(100vw - 64px));height:min(840px,calc(100dvh - 64px))}
:root body .bl-compose-head{padding:20px 28px;background:var(--cb-card)}
:root body .bl-compose-title{font-size:22px}
:root body .bl-compose-body{padding:24px 28px;overscroll-behavior:contain}
:root body .bl-compose-foot{padding:18px 28px;display:flex;justify-content:flex-end;background:var(--cb-card);box-shadow:none}
:root body .bl-compose-preview{width:auto;min-width:200px;padding-inline:24px}
:root body .bl-compose-draft{font-size:13px;padding:11px 18px;color:var(--cb-text)}
:root body .bl-compose :is(.bl-field-input,.bl-field-select,[contenteditable]){font-size:14px;line-height:1.6}
/* Contents dialogs use the full viewport scrim, with a readable navigation column. */
:root body :is(.la-toc-sheet,.lc-toc-sheet,.pp-toc-sheet,.tos-toc-sheet){display:flex;flex-direction:column;overflow:hidden;padding:0}
:root body :is(.la-toc-head,.lc-toc-head,.pp-toc-head,.tos-toc-head){padding:22px 28px 18px;flex-shrink:0}
:root body :is(.la-toc-nav,.lc-toc-nav,.pp-toc-nav,.tos-toc-nav){padding:12px 18px 20px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
:root body :is(.la-toc-head,.lc-toc-head,.pp-toc-head,.tos-toc-head) h2{font-size:22px;line-height:1.3}
:root body .or-cloud-panel{padding:0;overflow-y:auto}
:root body .or-cloud-head{padding:24px 28px 8px}
:root body .or-cloud-title{font-size:22px;line-height:1.3}
:root body .or-cloud-sub{font-size:14px;line-height:1.6;margin-top:8px}
:root body .or-cloud-options{padding:16px 28px}
:root body .or-cloud-opt-label{font-size:14px}
:root body .or-cloud-opt-sub{font-size:12px;line-height:1.5}
:root body .or-cloud-foot{font-size:13px;padding:0 28px 24px}
:root body .or-cloud-sent{padding:28px}
:root body .or-cloud-sent-cta{border-radius:999px;width:auto;padding:0 24px}
/* Inbox actions must be discoverable without swiping or dragging a row. */
:root body .dc-conversations .cv-row{display:flex;align-items:stretch;border-bottom:1px solid var(--cb-border)}
:root body .dc-conversations .cv-row[hidden]{display:none}
:root body .dc-conversations .cv-row-fg{flex:1;min-width:0;order:0;transform:none;border-bottom:0;user-select:auto}
:root body .dc-conversations .cv-row-actions{position:static;inset:auto;order:1;pointer-events:auto;align-items:center;padding-right:14px}
:root body .dc-conversations .cv-row[data-read="false"] .cv-row-actions{background:linear-gradient(rgba(64,179,222,.10),rgba(64,179,222,.10)),var(--cb-card)}
:root[data-theme="light"] body .dc-conversations .cv-row[data-read="false"] .cv-row-actions{background:linear-gradient(rgba(64,179,222,.07),rgba(64,179,222,.07)),var(--cb-card)}
:root body .dc-conversations .cv-heart-btn{align-self:center;padding:8px;margin:0}
:root body .dc-conversations .cv-row-action.is-fav{display:none}
:root body .dc-conversations .cv-row-action.is-trash{width:36px;height:36px;border-radius:8px;background:transparent;color:var(--cb-muted);font-size:0;gap:0}
:root body .dc-conversations .cv-row-action.is-trash:hover{color:#ec5a5a;background:rgba(236,90,90,.1)}
:root body .dc-conversations .cv-row-action svg{width:18px;height:18px}
@starting-style{
 :root body [data-shown]>:is(.la-toc-sheet,.lc-toc-sheet,.pp-toc-sheet,.tos-toc-sheet){transform:translateY(8px) scale(.98);opacity:0}
}
@media(prefers-reduced-motion:reduce){
 :root body :is(.wl-sheet,.bl-compose,.or-cloud-panel,.la-toc-sheet,.lc-toc-sheet,.pp-toc-sheet,.tos-toc-sheet),
 :root body #ms-post-comments-sheet .cb-sheet{transition:none}
}
/* Header activity previews share the site's dropdown surfaces and typography. */
.dh-iconbtn[aria-controls^="dh-"][aria-expanded="true"]{background:rgba(64,179,222,.14);color:var(--cb-link-text,#40b3de)}
.dh-activity{position:fixed;z-index:65;width:420px;max-width:calc(100vw - 24px);max-height:min(620px,calc(100dvh - var(--activity-top,86px) - 16px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--cb-border-hard);border-radius:12px;background:var(--cb-card);color:var(--cb-text);box-shadow:0 16px 40px rgba(0,0,0,.25);text-align:left;letter-spacing:0;animation:dh-activity-in 140ms ease-out}
.dh-activity[hidden]{display:none}
.dh-activity{--cb-muted:#9ca6b8}
[data-theme="light"] .dh-activity{--cb-muted:#657084;--cb-link:#087ba5}
.dh-activity-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--cb-border);flex:none}
.dh-activity-head h2{margin:0;font:700 18px/1.3 var(--cb-font-semibold)}
.dh-activity-count{display:block;margin-top:3px;font:400 12px/1.4 var(--cb-font-regular);color:var(--cb-muted)}
.dh-activity-mark,.dh-activity-retry{flex:none;border:0;border-radius:6px;background:transparent;color:var(--cb-link-text,var(--cb-link));font:600 12px/1.4 var(--cb-font-semibold);padding:7px 3px;cursor:pointer}
.dh-activity-mark:hover,.dh-activity-retry:hover{text-decoration:underline}
.dh-activity-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:var(--cb-border-hard) transparent}
/* The list is the panel's scroll box in both states of its lazy frame. utilities.css gives a completed lazy frame `display: contents` (0,2,1), which left no box to scroll: the rows could not shrink and the panel's `overflow: hidden` cut the last row and the footer. */
.dh-activity>turbo-frame.dh-activity-list,.dh-activity>turbo-frame.dh-activity-list[complete]{display:block}
.dh-activity-items{list-style:none;padding:0;margin:0}
.dh-activity-items>li+li{border-top:1px solid var(--cb-border)}
.dh-activity-row{display:flex;align-items:flex-start;gap:12px;padding:15px 20px;color:var(--cb-text);text-decoration:none;cursor:pointer}
.dh-activity-row.is-unread{background:rgba(64,179,222,.065)}
.dh-activity-row:hover,.dh-activity-row:focus-visible{background:rgba(64,179,222,.13);text-decoration:none}
.dh-activity-art{display:block;flex:none;width:42px;height:42px;border-radius:8px;overflow:hidden;background:var(--cb-bg)}
.dh-activity-art img,.dh-activity-art svg{display:block;width:100%;height:100%;object-fit:cover}
.dh-activity-copy{flex:1;min-width:0}
.dh-activity-name{display:block;font:600 14px/1.4 var(--cb-font-semibold);margin-bottom:3px}
.dh-activity-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font:400 13px/1.55 var(--cb-font-regular);color:var(--cb-sec)}
.dh-activity-row.is-unread .dh-activity-text{color:var(--cb-text)}
.dh-activity-time{display:block;margin-top:5px;color:var(--cb-muted);font:400 11px/1.4 var(--cb-font-regular)}
.dh-activity-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--cb-link);margin-top:6px;visibility:hidden}
.dh-activity-row.is-unread .dh-activity-dot{visibility:visible}
.dh-activity-foot{flex:none;border-top:1px solid var(--cb-border);padding:4px 12px}
.dh-activity-foot a{display:block;text-align:center;padding:12px;color:var(--cb-link-text,var(--cb-link));border-radius:7px;font:600 13px/1.4 var(--cb-font-semibold);text-decoration:none}
.dh-activity-foot a:hover{background:rgba(64,179,222,.1)}
.dh-activity :is(a,button):focus-visible{outline:2px solid var(--cb-link);outline-offset:-3px}
.dh-activity-state{padding:36px 28px;text-align:center;min-height:130px;font:400 13px/1.6 var(--cb-font-regular);color:var(--cb-muted)}
.dh-activity-state strong{display:block;color:var(--cb-text);font-size:15px;font-weight:600}
.dh-activity-state p{margin:8px 0 0}
@keyframes dh-activity-in{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.dh-activity{animation:none}}
/* Same toolbar primitives as marketplace/store, scoped to account collections. */
.dc-collection-toolbar{margin-inline:calc(-1 * var(--gut));border-top:1px solid var(--cb-border);background:var(--cb-bg)}
.dc-collection-toolbar .dh-toolbar-inner{min-width:0;height:64px}
.dc-collection-toolbar .dh-tabs{min-width:0;overflow-x:auto;scrollbar-width:none;flex:1}
.dc-collection-toolbar .dh-tabs::-webkit-scrollbar{display:none}
.dc-collection-toolbar .dh-tab{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;cursor:pointer}
.dc-collection-toolbar .dh-toolbar-right{flex-shrink:0}
.dc-collection-toolbar .dh-search-pill{margin:0;background:transparent;min-width:170px}
.dc-collection-toolbar .dh-search-pill input{min-width:0;width:clamp(130px,14vw,220px);height:36px}
.dc-collection-toolbar input[type="search"]::-webkit-search-cancel-button{display:none}
.dc-collection-toolbar .dh-search-pill button{border:0;background:transparent;padding:0;cursor:pointer;flex:none}
.dc-collection-toolbar .dc-search-clear{font-size:20px}
.dc-collection-toolbar .dh-ftoggle{background:transparent;border:1px solid var(--cb-border-hard);border-radius:999px;cursor:pointer;height:38px;max-width:none;overflow:visible}
.dc-collection-toolbar .dh-ftoggle[aria-expanded="true"]{background:var(--cb-slab);border-color:var(--cb-link)}
.dc-collection-toolbar button:disabled{opacity:.45;cursor:default}
.dc-collection-toolbar .dc-sort{position:relative}
.dc-collection-toolbar .dc-sort-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;z-index:4;background:var(--cb-card);border:1px solid var(--cb-border-hard);border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.dc-sort-menu button,.dc-menu-option{position:relative;display:block;flex:none;width:100%;min-height:38px;padding:10px 34px 10px 12px;border:0;border-radius:7px;text-align:left;background:transparent;color:var(--cb-text);cursor:pointer;font:400 13px/1.4 var(--cb-font-regular);letter-spacing:0;text-transform:none}
.dc-sort-menu button:hover,.dc-sort-menu button:focus-visible,.dc-menu-option:hover,.dc-menu-option:focus-visible{background:var(--cb-hover,rgba(64,179,222,.12))}
.dc-sort-menu [aria-checked="true"],.dc-menu-option[aria-selected="true"]{color:var(--cb-link-text,var(--cb-link));background:rgba(64,179,222,.1);font-weight:600}
.dc-sort-menu [aria-checked="true"]::after,.dc-menu-option[aria-selected="true"]::after{content:"";position:absolute;right:14px;top:calc(50% - 6px);width:5px;height:9px;border:solid currentColor;border-width:0 1.7px 1.7px 0;transform:rotate(45deg)}
.dc-collection-filters{margin-inline:calc(-1 * var(--gut))}
.dc-collection-filters:has(.dc-facet-trigger[aria-expanded="true"]){z-index:41}
.dc-collection-facets{display:flex;align-items:center;flex-wrap:wrap;gap:10px 28px}
.dc-facet-field{flex-direction:row;min-width:0}
.dc-facet-field:first-child:not(:last-child){flex-basis:100%;padding-bottom:10px;border-bottom:1px solid var(--cb-border)}
.dc-facet-select{position:relative;width:220px;min-width:0;max-width:100%}
.dc-facet-trigger{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;height:34px;padding:0 13px;border:1px solid var(--cb-border-hard);border-radius:999px;background:transparent;color:var(--cb-text);font:600 12px/1.4 var(--cb-font-regular);cursor:pointer;text-align:left}
.dc-facet-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-facet-trigger>svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--cb-sec);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.dc-facet-trigger:hover{border-color:var(--cb-sec)}
.dc-facet-trigger[aria-expanded="true"]{border-color:var(--cb-link);box-shadow:0 0 0 2px rgba(64,179,222,.12)}
.dc-facet-trigger[aria-expanded="true"]>svg{transform:rotate(180deg)}
.dc-facet-trigger.is-filtered{color:var(--cb-link-text,var(--cb-link))}
.dc-facet-panel{position:absolute;left:0;top:calc(100% + 8px);z-index:8;display:flex;flex-direction:column;box-sizing:border-box;width:max(100%,240px);max-width:calc(100vw - 24px);padding:6px;border:1px solid var(--cb-border-hard);border-radius:12px;background:var(--cb-card);box-shadow:0 12px 30px rgba(0,0,0,.2);overflow:hidden}
.dc-facet-panel.is-above{top:auto;bottom:calc(100% + 8px)}
/* Viewport fitting must be immediate, including under the global reduced-motion rule. */
.dc-facet-panel{transition-property:none}
.dc-facet-search{display:flex;align-items:center;gap:8px;flex:none;margin:3px 3px 6px;padding:0 10px;min-height:37px;border:1px solid var(--cb-border-hard);border-radius:7px;background:var(--cb-bg)}
.dc-facet-search:focus-within{border-color:var(--cb-link)}
.dc-facet-search>svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--cb-sec);stroke-width:1.8;stroke-linecap:round}
.dc-facet-search>input{min-width:0;width:100%;height:35px;padding:0;border:0;background:transparent;color:var(--cb-text);font:400 13px/1.4 var(--cb-font-regular);outline:0}
.dc-facet-search>input::placeholder{color:var(--cb-sec)}
.dc-facet-search>input:focus-visible{outline:0}
.dc-facet-options{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--cb-border-hard) transparent}
.dc-facet-no-match{margin:0;padding:13px 12px;color:var(--cb-sec);font:400 13px/1.5 var(--cb-font-regular)}
.dc-collection-filters .dc-menu-option:focus-visible,.dc-collection-toolbar .dc-sort-menu button:focus-visible{outline-offset:-2px}
.dc-collection-summary{display:flex;align-items:center;gap:16px;min-height:40px;padding-top:10px;color:var(--cb-sec);font-size:12px}
.dc-collection-reset{border:0;background:transparent;padding:8px 0;color:var(--cb-link-text,var(--cb-link));font:600 12px/1.4 var(--cb-font-regular);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.dc-collection-toolbar :is(button,input,select):focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
.dc-collection-toolbar .dh-search-pill input:focus-visible{outline:0}
.dc-collection-toolbar .wl-detail-actions{display:flex;gap:10px;margin-left:0}
.dc-collection-toolbar .wl-detail-act-btn{width:auto;padding:0 14px;gap:7px}
.dc-collection-toolbar #wl-new-btn{width:auto;height:38px;padding:0 16px;flex:none;margin:0;white-space:nowrap}
.dc-collection-old-actions,.dc-collection-filtering [data-wishlist-first-use]{display:none!important}
.dc-library .lib-header{padding-bottom:24px;border:0}
.dc-library .lib-h1-block{padding:0}
.dc-library .lib-feed{padding-top:14px}
.dc-wishlists .wl-index-header{padding:0 0 24px;border:0}
.dc-wishlists .wl-detail-header{padding-bottom:24px;border:0}
.dc-wishlists .wl-list{padding-top:14px}
.dc-wishlists .dc-wish-grid{margin-top:14px}
.dc-purchases .ph-list{padding-top:14px}
.dc-collection-toolbar [hidden],.dc-collection-summary [hidden],[data-collection-empty][hidden]{display:none!important}
/* Keep complete controls accessible as two orderly rows on narrower desktops. */
@media(max-width:1279px){
 .dc-collection-toolbar .dh-toolbar-inner{height:auto;min-height:112px;flex-wrap:wrap;gap:0;padding:0 0 12px}
 .dc-collection-toolbar .dh-tabs{flex-basis:100%;height:50px}
 .dc-collection-toolbar .dh-toolbar-right{width:100%;justify-content:flex-end}
 .dc-collection-toolbar .dh-search-pill{margin-right:auto;flex:1;max-width:430px}
 .dc-collection-toolbar .dh-search-pill input{width:100%;flex:1}
}
@media(prefers-reduced-motion:reduce){.dc-collection-toolbar .hm-tab-indicator{transition:none}}
/* Shared referral dialog; uses the established theme tokens on both builds. */
.cb-referral-dialog{box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:28px 32px 26px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--cb-border-hard);border-radius:18px;background:var(--cb-card);color:var(--cb-text);box-shadow:0 24px 70px rgba(0,0,0,.3);font:400 14px/1.6 var(--cb-font-regular,system-ui);text-align:center}
.cb-referral-dialog::backdrop{background:rgba(7,12,22,.68);backdrop-filter:blur(4px)}
.cb-referral-dialog *{box-sizing:border-box}
.cb-referral-close{position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--cb-border-hard);border-radius:50%;background:transparent;color:var(--cb-sec,var(--cb-muted));cursor:pointer}
.cb-referral-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cb-referral-art{display:block;width:132px;height:132px;object-fit:contain;margin:6px auto 16px}
.cb-referral-dialog h2{margin:0 0 12px;font:600 25px/1.25 var(--cb-font-semibold,system-ui);letter-spacing:-.35px;color:var(--cb-text)}
.cb-referral-dialog p{margin:0;color:var(--cb-sec,var(--cb-muted));font-size:14px;line-height:1.65}
.cb-referral-dialog strong{color:var(--cb-text);font-weight:700}
.cb-referral-code-label{display:block;margin:23px 0 8px;color:var(--cb-sec,var(--cb-muted));font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
.cb-referral-code-row{display:flex;gap:8px;padding:6px;border:1px solid var(--cb-border-hard);border-radius:10px;background:var(--cb-bg)}
.cb-referral-code{min-width:0;width:100%;padding:8px;border:0;background:transparent;color:var(--cb-text);text-align:center;font:600 19px/1.4 var(--cb-font-semibold,system-ui);letter-spacing:.5px}
.cb-referral-copy{flex:none;min-width:72px;padding:0 16px;border:0;border-radius:7px;background:var(--cb-commit,#7bc178);color:#153321;font:700 12px/1 var(--cb-font-bold,system-ui);cursor:pointer}
.cb-referral-status{min-height:25px;margin-top:5px!important;font-size:12px!important;color:var(--cb-link-text,var(--cb-link))!important}
.cb-referral-share{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 22px}
.cb-referral-share a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid var(--cb-border-hard);border-radius:999px;color:var(--cb-text);text-decoration:none;font-weight:600;font-size:13px}
.cb-referral-share a:hover{border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}
.cb-referral-share svg{width:16px;height:16px;fill:currentColor}
.cb-referral-discounts{color:var(--cb-link-text,var(--cb-link));text-underline-offset:4px;font-size:13px}
.cb-referral-dialog :is(a,button,input):focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
@media(max-width:480px){.cb-referral-dialog{padding:24px 20px 22px}.cb-referral-dialog h2{font-size:23px}.cb-referral-art{width:112px;height:112px}.cb-referral-code{font-size:17px}.cb-referral-copy{padding:0 13px}}
/* The same compact course reference anchors both earnings calculators. */
.bp-calc-product{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px;padding:0 0 22px;margin:0 0 24px;border-bottom:1px solid var(--cb-border);color:var(--cb-text);text-decoration:none;text-align:left;cursor:pointer}
.bp-calc-product-cover{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.bp-calc-product-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.bp-calc-product-title{font:600 16px/1.35 var(--cb-font-semibold);color:var(--cb-text)}
.bp-calc-product-meta{font:400 12px/1.5 var(--cb-font-regular);color:var(--cb-muted)}
.bp-calc-product-bottom{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-top:4px}
.bp-calc-product-price{font:600 14px/1.4 var(--cb-font-semibold);color:var(--cb-text);white-space:nowrap}
.bp-calc-product-price s{margin-left:5px;font:400 12px/1.4 var(--cb-font-regular);color:var(--cb-muted)}
.bp-calc-product-link{font:600 12px/1.4 var(--cb-font-semibold);color:var(--cb-link-text,var(--cb-link));text-decoration:underline;text-underline-offset:3px}
.bp-calc-product:hover .bp-calc-product-title{color:var(--cb-link-text,var(--cb-link))}
.bp-calc-product:focus-visible{outline:2px solid var(--cb-link);outline-offset:5px;border-radius:4px}
@media(max-width:600px){.bp-calc-product{grid-template-columns:76px minmax(0,1fr);gap:12px;padding-bottom:18px;margin-bottom:20px}.bp-calc-product-title{font-size:14px}.bp-calc-product-bottom{gap:6px 10px}.bp-calc-product-price{font-size:13px}}
/* Contextual feedback. Layouts and successful/empty states retain their design. */
.cb-feedback{box-sizing:border-box;display:flex;align-items:flex-start;gap:11px;width:100%;padding:14px 16px;margin:14px 0 0;border:1px solid color-mix(in srgb,var(--cb-error,#d76460) 38%,transparent);border-left:3px solid var(--cb-error,#d76460);border-radius:10px;background:color-mix(in srgb,var(--cb-error,#d76460) 6%,var(--cb-card,#202635));color:var(--cb-text,#e8eaf0);text-align:left;font:400 13px/1.5 var(--cb-font-regular,Arial,sans-serif);letter-spacing:0;white-space:normal;grid-column:1/-1;flex-basis:100%;scroll-margin:150px;overflow-wrap:anywhere}
.cb-feedback:focus{outline:none}
.cb-feedback:focus-visible{outline:2px solid var(--cb-link,#40b3de);outline-offset:3px}
.cb-feedback-icon{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1.5px solid var(--cb-error,#d76460);border-radius:50%;color:var(--cb-error,#d76460);font-weight:700;line-height:1;margin-top:1px}
.cb-feedback-body{min-width:0;flex:1}
.cb-feedback-title{display:block;font-weight:700;font-size:14px;line-height:1.45;color:var(--cb-text,#e8eaf0)}
.cb-feedback .cb-feedback-copy{margin:4px 0 0;color:var(--cb-sec,#a2acc0);font:inherit}
.cb-feedback-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.cb-feedback-actions button,.cb-feedback-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 14px;border:1px solid var(--cb-border-hard,#465168);border-radius:999px;background:transparent;color:var(--cb-text,#e8eaf0);font:600 12px/1.4 var(--cb-font-semibold,Arial,sans-serif);text-decoration:none;cursor:pointer;white-space:normal}
.cb-feedback-actions button:hover,.cb-feedback-actions a:hover{border-color:var(--cb-link,#40b3de);color:var(--cb-link,#40b3de)}
.cb-feedback-actions button:disabled{opacity:.55;cursor:wait}
.cb-feedback-actions :focus-visible{outline:2px solid var(--cb-link,#40b3de);outline-offset:3px}
.cb-feedback.is-success{border-color:var(--cb-commit,#7bc178);background:color-mix(in srgb,var(--cb-commit,#7bc178) 6%,var(--cb-card,#202635))}
.cb-feedback.is-success .cb-feedback-icon{border-color:var(--cb-commit,#7bc178);color:var(--cb-commit,#7bc178)}
.cb-field-error{display:block;color:color-mix(in srgb,var(--cb-error,#d76460) 70%,var(--cb-text,#e8eaf0));font:500 12px/1.5 var(--cb-font-regular,Arial,sans-serif);margin-top:6px;white-space:normal;text-align:left;letter-spacing:0;grid-column:1/-1}
.cb-field-error[hidden]{display:none}
.cb-invalid{border-color:var(--cb-error,#d76460)!important;box-shadow:0 0 0 1px var(--cb-error,#d76460)!important}
.cb-error-content{display:none!important}
.cb-load-error{padding:24px var(--gut,20px);width:100%;box-sizing:border-box}
.cb-load-error .cb-feedback{max-width:680px;margin:24px auto;padding:22px}
.set-actions:has(>.cb-feedback),.pn-publish-actions:has(>.cb-feedback),.bp-foot:has(>.cb-feedback),.bl-newsletter-form:has(>.cb-feedback),.ch-discount-form:has(>.cb-feedback){flex-wrap:wrap}
main:has(.cb-load-error) .lib-end,main:has(.cb-load-error) .cb-pager,main:has(.cb-load-error) .dc-collection-summary{display:none!important}
.bl-newsletter-form>.cb-field-error,.ch-discount-form>.cb-field-error{order:3;flex-basis:100%}
.bl-newsletter-form:has(>.cb-invalid),.ch-discount-form:has(>.cb-invalid){flex-wrap:wrap}
.cbm-root .cb-feedback{--cb-card:var(--cbm-panel);--cb-text:var(--cbm-text);--cb-sec:var(--cbm-sec);--cb-border-hard:var(--cbm-border-hard)}
.cv-compose>.cb-feedback{margin-bottom:12px}
[aria-busy="true"]{cursor:progress}
/* Native modal dialogs lock the page and any underlying custom drawer.
   CSS follows the open modal stack, so closing a child cannot unlock its parent. */
html:has(dialog:modal), html:has(dialog:modal) body { overflow: hidden !important; overscroll-behavior: none; }
body:has(dialog:modal) :is([aria-modal="true"]:not(dialog),.bl-compose-body,.cb-sheet-body) { overflow: hidden !important; }
dialog:modal { overscroll-behavior: contain; }
dialog:modal::backdrop { touch-action: none; }
/* Owner-requested comment emphasis and the existing Load more pattern. */
.cb-comments .cb-comment-react { min-width: 44px; min-height: 32px; gap: 8px; }
.cb-comments .cb-comment-react svg { width: 18px; height: 18px; flex: none; }
.cb-post-comments-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--cb-border); }
.cb-post-comments-pager button { background: transparent; border: 1px solid var(--cb-border); border-radius: 999px; min-height: 44px; padding: 0 22px; cursor: pointer; color: var(--cb-text); font: 600 13px/1 var(--cb-font-semibold); letter-spacing: .4px; }
.cb-post-comments-pager button:hover:not(:disabled) { border-color: var(--cb-link); color: var(--cb-link-text,var(--cb-link)); }
.cb-post-comments-pager button:disabled { color: var(--cb-muted); cursor: default; }
.cb-post-comments-pager [role="status"] { font: 400 12px/1.4 var(--cb-font-regular); color: var(--cb-muted); text-align: end; }
.cb-post-comments-pager[hidden] { display: none; }
/* The product editor's pressed Save: busy while the save runs, then how it went (Michael's manual
   pass, 2026-10-13). The notice it points at (aria-describedby) says why. */
[data-save-outcome="saved"]{box-shadow:0 0 0 2px var(--cb-commit)}
[data-save-outcome="failed"]{box-shadow:0 0 0 2px var(--cb-error)}
button[aria-busy="true"]{cursor:progress;opacity:.75}
/* Canonical article/composer formatting, copied into each build's own asset. */
body :is(.bl-post-body,.bl-richtext){font:400 17px/1.8 var(--cb-font-regular);color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)));overflow-wrap:anywhere;min-width:0}
body :is(.bl-post-body,.bl-richtext) :is(p,ul,ol,dl,blockquote,pre,figure,table){margin:0 0 1.4em}
body :is(.bl-post-body,.bl-richtext) p{font:inherit;color:inherit}
body :is(.bl-post-body,.bl-richtext) :is(h1,h2,h3,h4,h5,h6){font-family:var(--cb-font-semibold,var(--cb-font-regular));font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--cb-text);margin:1.65em 0 .65em;scroll-margin-top:calc(var(--bl-header-bottom,80px) + 24px)}
body :is(.bl-post-body,.bl-richtext) h1{font-size:2.1em}
body :is(.bl-post-body,.bl-richtext) h2{font-size:1.7em}
body :is(.bl-post-body,.bl-richtext) h3{font-size:1.4em}
body :is(.bl-post-body,.bl-richtext) h4{font-size:1.2em}
body :is(.bl-post-body,.bl-richtext) h5{font-size:1.08em;letter-spacing:0}
body :is(.bl-post-body,.bl-richtext) h6{font-size:1em;letter-spacing:.04em}
body :is(.bl-post-body,.bl-richtext)>:first-child{margin-top:0}
body .bl-post-body>.bl-post-lead{font-size:1.2em;line-height:1.65;color:var(--cb-text)}
body :is(.bl-post-body,.bl-richtext) :is(ul,ol){padding-left:1.6em;font:inherit;color:inherit;list-style-position:outside}
body :is(.bl-post-body,.bl-richtext) ul{list-style-type:disc}
body :is(.bl-post-body,.bl-richtext) ol{list-style-type:decimal}
body :is(.bl-post-body,.bl-richtext) li{margin:.35em 0;padding-left:.25em}
body :is(.bl-post-body,.bl-richtext) li :is(ul,ol){margin:.4em 0}
body :is(.bl-post-body,.bl-richtext) li p{margin:.4em 0}
body :is(.bl-post-body,.bl-richtext) blockquote{padding:8px 0 8px 24px;border:0;border-left:3px solid var(--cb-link);background:transparent;border-radius:0;font:500 1.15em/1.7 var(--cb-font-regular);color:var(--cb-text)}
body :is(.bl-post-body,.bl-richtext) blockquote>:last-child{margin-bottom:0}
body :is(.bl-post-body,.bl-richtext) blockquote cite{display:block;margin-top:12px;font-size:.8em;font-style:normal;color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)))}
body :is(.bl-post-body,.bl-richtext) a:not(.cb-pcard){color:var(--cb-link-text,var(--cb-link));text-decoration:underline;text-underline-offset:3px}
body :is(.bl-post-body,.bl-richtext) :is(strong,b){font-weight:700;color:var(--cb-text)}
body :is(.bl-post-body,.bl-richtext) :is(em,i){font-style:italic}
body :is(.bl-post-body,.bl-richtext) :is(s,del){text-decoration:line-through}
body :is(.bl-post-body,.bl-richtext) u{text-decoration:underline;text-underline-offset:3px}
body :is(.bl-post-body,.bl-richtext) mark{background:rgba(243,166,73,.24);color:var(--cb-text);padding:0 .15em;border-radius:3px}
body :is(.bl-post-body,.bl-richtext) :is(sub,sup){font-size:.75em;line-height:0;position:relative;vertical-align:baseline}
body :is(.bl-post-body,.bl-richtext) sup{top:-.5em}
body :is(.bl-post-body,.bl-richtext) sub{bottom:-.2em}
body :is(.bl-post-body,.bl-richtext) hr{height:1px;border:0;background:var(--cb-border-hard,var(--cb-border));margin:2em 0;clear:both}
body :is(.bl-post-body,.bl-richtext) code{font: .88em/1.65 ui-monospace,Consolas,monospace;padding:.12em .3em;background:var(--cb-chip-bg,var(--cb-card));border-radius:4px;color:var(--cb-text)}
body :is(.bl-post-body,.bl-richtext) pre{max-width:100%;overflow:auto;padding:20px;border:1px solid var(--cb-border);border-radius:10px;background:var(--cb-card);white-space:pre;font: .88em/1.7 ui-monospace,Consolas,monospace;overflow-wrap:normal;tab-size:2}
body :is(.bl-post-body,.bl-richtext) pre code{padding:0;background:none;font:inherit}
body :is(.bl-post-body,.bl-richtext) .bl-table-wrap{max-width:100%;overflow:auto;margin:1.4em 0;border:1px solid var(--cb-border-hard,var(--cb-border));border-radius:8px;overscroll-behavior-x:contain}
body :is(.bl-post-body,.bl-richtext) table{width:100%;border-collapse:collapse;font-size:.9em;margin:0}
body :is(.bl-post-body,.bl-richtext) :is(th,td){padding:12px 16px;min-width:130px;border:1px solid var(--cb-border);text-align:left;vertical-align:top}
body :is(.bl-post-body,.bl-richtext) th{background:var(--cb-chip-bg,var(--cb-card));font-weight:700;color:var(--cb-text)}
body :is(.bl-post-body,.bl-richtext) caption{text-align:left;padding:12px 16px;color:var(--cb-text);font-weight:600}
body :is(.bl-post-body,.bl-richtext) :is(img,video){max-width:100%}
body :is(.bl-post-body,.bl-richtext)>img,body :is(.bl-post-body,.bl-richtext) figure>img{display:block;width:100%;height:auto;border-radius:10px}
body :is(.bl-post-body,.bl-richtext) figure{min-width:0;margin-inline:0}
body :is(.bl-post-body,.bl-richtext) figcaption{font-size:13px;line-height:1.6;font-style:normal;color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)));text-align:center;margin:10px 0 0}
body .bl-post-figure>.bp-img{height:auto!important;aspect-ratio:16/9;max-height:none;overflow:hidden;border-radius:10px!important}
body .bl-post-figure>.bp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important}
body :is(.bl-post-body,.bl-richtext) .bl-video{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:var(--cb-card);border-radius:10px;margin:1.4em 0}
body :is(.bl-post-body,.bl-richtext) .bl-video iframe{display:block;width:100%;height:100%;border:0;position:absolute;inset:0}
body :is(.bl-post-body,.bl-richtext) video{width:100%;border-radius:10px}
body :is(.bl-post-body,.bl-richtext) audio{width:100%;max-width:100%}
body .bl-product-embed{width:min(360px,100%);margin:28px auto!important;text-align:left;font:400 14px/1.5 var(--cb-font-regular)}
body .bl-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0}
body .bl-product-grid>.bl-product-embed{width:100%;margin:0!important}
body .bl-product-embed .cb-pcard{width:100%;text-decoration:none!important;color:var(--cb-text)}
body .bl-product-embed .cb-pcard img{border-radius:0}
body .bl-product-embed .cb-pcard-title{font-size:15px;line-height:1.45}
body .bl-product-embed .cb-pcard-byline{font-size:13px;line-height:1.5}
body .bl-product-embed .cb-pcard-rating{font-size:12px}
body .bl-product-unavailable{display:block;border:1px dashed var(--cb-border-hard,var(--cb-border));border-radius:10px;padding:22px;color:var(--cb-text-sec,var(--cb-muted));text-align:center}
body .bl-product-unavailable a{display:block;margin-top:6px}
.bl-align-left{text-align:left}
.bl-align-center{text-align:center}
.bl-align-right{text-align:right}
.bl-align-justify{text-align:justify}
body>.bl-progress{position:fixed;top:var(--bl-header-bottom,0px);left:0;right:0;height:3px;z-index:49;pointer-events:none;background:transparent}
body>.bl-progress .bl-progress-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--cb-link);transition:none}
.bl-review-note{max-width:760px;margin:0 auto 24px;padding:14px 18px;border:1px solid var(--cb-border-hard,var(--cb-border));border-radius:10px;font:14px/1.5 var(--cb-font-regular);color:var(--cb-text)}
.bl-review-note a{color:var(--cb-link-text,var(--cb-link));margin-left:12px;text-decoration:underline}
.bl-post [id]{scroll-margin-top:calc(var(--bl-header-bottom,80px) + 20px)}
@media(max-width:600px){body :is(.bl-post-body,.bl-richtext){font-size:16px;line-height:1.75}body .bl-product-grid{grid-template-columns:minmax(0,1fr)}body .bl-product-grid>.bl-product-embed{max-width:360px;margin-inline:auto!important}body :is(.bl-post-body,.bl-richtext) blockquote{padding-left:18px}body .bl-post-figure>.bp-img{aspect-ratio:16/9}}
/* Desktop article geometry; the body follows the full cover width. */
.dc-article{max-width:calc(1040px + 2*var(--gut));padding-top:28px}
.dc-article .bl-post,.dc-article .cb-comments{background:transparent}
.dc-article .bl-post-head,.dc-article .bl-post-body,.dc-article .bl-post-tags,.dc-article .bl-post-share,.dc-article .bl-author-card,.dc-article .cb-comments{width:100%;max-width:760px;margin-inline:auto}
.dc-article .bl-post-head{max-width:none;padding:20px 0 30px}
.dc-article .bl-back{display:flex;width:max-content;max-width:100%;padding:0;margin:0;line-height:1.5}
.dc-article .bl-post-h{font-size:clamp(32px,3vw,46px);line-height:1.2;margin-bottom:24px;text-wrap:balance}
.dc-article .bl-post-body{max-width:none;padding:36px 0 12px}
.dc-article .bl-post-hero{width:100%;height:auto;max-height:none;aspect-ratio:16/9;margin:0;padding:0;border-radius:14px;overflow:hidden;background:var(--cb-card)}
.dc-article .bl-post-hero>.bp-img{width:100%;height:100%!important;max-width:none;border-radius:0!important}
.dc-article .bl-post-hero img{display:block;width:100%;height:100%;object-fit:contain!important}
.dc-article .bl-post-tags{padding:8px 0 28px}
.dc-article .bl-author-card{padding:24px;margin-bottom:36px}
.dc-article .bl-author-bio{font-size:14px;line-height:1.7}
.dc-article .cb-comments{padding:0 0 28px}
@media(max-width:900px){.dc-article .bl-post-head{padding-block:18px 24px}.dc-article .bl-author-card{padding:20px}}
.bl-editor{overflow:visible}
.bl-editor-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:10px;border-bottom:1px solid var(--cb-border);align-items:center;height:auto;position:sticky;top:0;z-index:3;background:var(--cb-card);border-radius:8px 8px 0 0}
.bl-editor-tool{width:32px;min-width:32px;height:32px;font:700 13px/1 var(--cb-font-regular);border-radius:6px;color:var(--cb-text)}
.bl-editor-tool[aria-pressed=true]{color:var(--cb-link-text,var(--cb-link));background:var(--cb-chip-bg,rgba(64,179,222,.15));box-shadow:inset 0 0 0 1px var(--cb-link)}
.bl-editor-product{width:auto;padding:0 10px;color:var(--cb-link-text,var(--cb-link))}
.bl-format-select{appearance:none;max-width:140px;min-height:32px;padding:5px 28px 5px 10px;border:1px solid var(--cb-border-hard,var(--cb-border));border-radius:6px;background:var(--cb-card) url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/icons/css-b8596ef312-8f43f202def1e27eac6becba6b274823682aa83a04c1065ba1cc17131c31b914.svg") no-repeat right 8px center/12px;color:var(--cb-text);font:600 12px/1.5 var(--cb-font-regular);cursor:pointer}
body .bl-compose .bl-richtext{padding:20px;min-height:320px;outline:0;font-size:16px;line-height:1.75;max-height:none;overflow:visible;cursor:text}
.bl-richtext:empty::before{content:attr(data-placeholder);color:var(--cb-muted);pointer-events:none}
.bl-richtext:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-link);border-radius:0 0 8px 8px}
.bl-richtext .bl-video iframe{pointer-events:none}
.bl-richtext [data-bl-product]{position:relative;cursor:default}
.bl-richtext [data-bl-product] .cb-pcard{cursor:default}
.bl-richtext [data-bl-remove-product]{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:var(--cb-card);color:var(--cb-text);border:1px solid var(--cb-border);font:20px/1 system-ui;cursor:pointer;z-index:2}
.bl-richtext [data-bl-product]::after{content:'Product embed';border:1px solid var(--cb-border);position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:5px;background:var(--cb-card);color:var(--cb-text);font:600 11px/1.5 var(--cb-font-regular);pointer-events:none}
body .bl-compose-foot{gap:18px;align-items:center}
.bl-compose-status{margin:0;flex:1;color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)));font:13px/1.5 var(--cb-font-regular)}
.bl-compose-status.is-error,.bl-insert-error{color:var(--cb-error,#e74c3c)}
.bl-insert-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;border:1px solid var(--cb-border-hard,var(--cb-border));border-radius:14px;background:var(--cb-card,var(--cb-panel));color:var(--cb-text);box-shadow:0 20px 80px #0005;overflow:auto;overscroll-behavior:contain}
.bl-insert-dialog::backdrop{background:#060b17a6}
.bl-insert-dialog h2{margin:0 0 20px;font:600 22px/1.3 var(--cb-font-regular);color:var(--cb-text)}
.bl-insert-fields{display:grid;gap:16px}
.bl-insert-fields label{display:grid;gap:7px;font:600 13px/1.5 var(--cb-font-regular)}
.bl-insert-fields input{box-sizing:border-box;width:100%;min-width:0;min-height:42px;background:var(--cb-bg);border:1px solid var(--cb-border-hard,var(--cb-border));border-radius:8px;padding:10px 12px;font:400 14px/1.5 var(--cb-font-regular);color:var(--cb-text)}
.bl-insert-dialog :is(button,input):focus-visible{outline:2px solid var(--cb-link);outline-offset:2px}
.bl-insert-error{font-size:13px;line-height:1.5;margin:12px 0;min-height:0}
.bl-insert-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.bl-insert-actions button{border:1px solid var(--cb-border-hard,var(--cb-border));border-radius:999px;padding:10px 22px;color:var(--cb-text);background:transparent;font:700 13px/1.5 var(--cb-font-regular)}
.bl-insert-actions .bl-insert-primary{background:var(--cb-link);border-color:var(--cb-link);color:#fff}
.bl-insert-actions button:disabled{opacity:.45;cursor:not-allowed}
.bl-product-results{display:grid;gap:6px;max-height:300px;overflow:auto;overscroll-behavior:contain;padding:3px}
.bl-product-result{display:flex;width:100%;gap:12px;align-items:center;text-align:left;background:transparent;color:var(--cb-text);border:1px solid var(--cb-border);border-radius:8px;padding:10px}
.bl-product-result[aria-pressed=true]{border-color:var(--cb-link);background:var(--cb-chip-bg,rgba(64,179,222,.12))}
.bl-product-result img{width:80px;height:45px;object-fit:cover;border-radius:5px;flex-shrink:0}
.bl-product-result span{min-width:0}
.bl-product-result strong{display:block;font:600 13px/1.5 var(--cb-font-regular)}
.bl-product-result small{display:block;margin-top:3px;font:12px/1.4 var(--cb-font-regular);color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)))}
.bl-field-image.has-image{background-size:contain;background-position:center;background-repeat:no-repeat;min-height:180px}
.bl-field-image.has-image>*{visibility:hidden}
.bl-cover-remove{padding:8px 0;color:var(--cb-link-text,var(--cb-link));background:transparent;border:0;text-decoration:underline;cursor:pointer;font:13px/1.5 var(--cb-font-regular)}
body:has(#compose-sheet.is-open) :is(#cb-dev-state-switch,#cb-dev-reload){display:none!important}
@media(max-width:600px){.bl-editor-toolbar{gap:2px;padding:8px}.bl-editor-tool{width:30px;min-width:30px}.bl-editor-product{width:auto}body .bl-compose .bl-richtext{padding:16px}.bl-insert-dialog{padding:20px}body .bl-compose-foot{flex-wrap:wrap}.bl-compose-status{flex-basis:100%}}
.bl-field-image.is-dragging{outline:2px solid var(--cb-link);outline-offset:2px}

/* What master's article had around the body (the visitor sweep's BL7-BL9): Previous and Next post under the
   back link, the header's linked stamp, author and comment count, and the author card's links. */
.bl-post-nav{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;padding:0 2px}
.bl-post-nav-link{display:flex;flex-direction:column;gap:4px;max-width:48%;text-decoration:none;color:var(--cb-text)}
.bl-post-nav-link.is-next{margin-left:auto;text-align:right}
.bl-post-nav-dir{font:600 11px/1 var(--cb-font-bold);letter-spacing:1px;text-transform:uppercase;color:var(--cb-text-sec,var(--cb-muted))}
.bl-post-nav-title{font:400 13px/1.35 var(--cb-font-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-post-nav-link:hover .bl-post-nav-title{color:var(--cb-link-text,var(--cb-link))}
.bl-post-head a.bl-pill{text-decoration:none}
.bl-post-author a{color:inherit;text-decoration:none}
.bl-post-author a:hover{color:var(--cb-link-text,var(--cb-link))}
.bl-post-comments{color:inherit;text-decoration:none}
.bl-post-comments:hover{color:var(--cb-link-text,var(--cb-link))}
#comments{scroll-margin-top:90px}
.bl-author-site{display:inline-block;margin-top:6px;font:400 13px/1.4 var(--cb-font-regular);color:var(--cb-link-text,var(--cb-link));text-decoration:none;word-break:break-all}
.bl-author-socials{display:flex;gap:10px;margin-top:8px;color:var(--cb-text-sec,var(--cb-muted))}
.bl-author-socials a{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--cb-border-hard);border-radius:50%;color:inherit}
.bl-author-socials a:hover{color:var(--cb-link-text,var(--cb-link));border-color:var(--cb-link)}
.bl-author-posts{height:30px;padding:0 14px;display:inline-flex;align-items:center;background:transparent;color:var(--cb-text);border:1px solid var(--cb-border-hard);border-radius:999px;font:700 11px/1 var(--cb-font-bold);letter-spacing:.4px;text-decoration:none}
.bl-author-posts:hover{border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}
/* Staff only: put the post into Editors' Picks or take it out (BL13). */
.bl-post-staff{display:flex;align-items:center;gap:10px;margin-top:12px}
.bl-post-staff-btn{height:30px;padding:0 14px;border:1px dashed var(--cb-border-hard);border-radius:999px;background:transparent;color:var(--cb-text);font:700 11px/1 var(--cb-font-bold);letter-spacing:.4px;cursor:pointer}
.bl-post-staff-btn[aria-pressed="true"]{border-style:solid;border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}
.bl-post-staff-btn:disabled{opacity:.6;cursor:progress}
.bl-post-staff-note{font:400 12px/1.3 var(--cb-font-regular);color:var(--cb-text-sec,var(--cb-muted))}
/* Shared checkout tax notice and recovery controls; copied into each build. */
.ch-tax-panel{min-width:0;margin:22px 0;color:var(--cb-text);font:400 14px/1.6 var(--cb-font-regular)}
.ch-tax-panel h2{font:600 20px/1.4 var(--cb-font-semibold);margin:0 0 16px;color:var(--cb-text)}
.ch-tax-notice{padding:18px 20px;border:1px solid rgba(245,166,35,.5);border-radius:12px;background:rgba(245,166,35,.08);margin-bottom:20px;display:flex;gap:20px;align-items:center}
.ch-tax-notice-copy{flex:1;min-width:0}
.ch-tax-notice strong{display:block;margin-bottom:5px;font-size:15px;color:var(--cb-text)}
.ch-tax-notice p{margin:0;color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)));font-size:13px;line-height:1.65}
.ch-tax-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.ch-tax-panel button,.ch-tax-error button{font:600 13px/1.4 var(--cb-font-semibold);cursor:pointer}
.ch-tax-action{min-height:40px;padding:10px 16px;border:1px solid var(--cb-border-hard);border-radius:999px;background:var(--cb-card);color:var(--cb-text)}
.ch-tax-action.is-primary{background:var(--cb-commit);border-color:var(--cb-commit);color:#fff}
.ch-tax-panel details{border:1px solid var(--cb-border);border-radius:10px;padding:14px 16px;background:transparent}
.ch-tax-panel summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none;font-weight:600}
.ch-tax-panel summary::-webkit-details-marker{display:none}
.ch-tax-panel summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:4px;flex:none}
.ch-tax-panel details[open] summary::after{transform:rotate(225deg)}
.ch-tax-form{display:grid;gap:12px;margin-top:16px}
.ch-tax-panel label{display:grid;gap:7px;font-size:13px;font-weight:600}
.ch-tax-panel :is(select,input[type=text]){box-sizing:border-box;width:100%;min-width:0;min-height:44px;border-radius:8px;border:1px solid var(--cb-border-hard);padding:10px 12px;background:var(--cb-card);color:var(--cb-text);font:400 14px/1.5 var(--cb-font-regular)}
.ch-tax-panel select{cursor:pointer}
.ch-tax-help{font-size:13px;color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)));margin:10px 0; line-height:19px;}
.ch-tax-panel .ch-tax-business{display:flex;align-items:center;gap:10px;margin-top:18px;font-weight:400;font-size:14px;cursor:pointer}
.ch-tax-business input{width:18px;height:18px;accent-color:var(--cb-link);flex-shrink:0}
.ch-business-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ch-tax-status{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)))}
.ch-tax-error{padding:18px 20px;margin:18px 0;border:1px solid rgba(231,76,60,.5);border-radius:12px;background:rgba(231,76,60,.07);color:var(--cb-text);scroll-margin-top:100px}
.ch-tax-error h2{font:600 19px/1.4 var(--cb-font-semibold);margin:0 0 10px}
.ch-tax-error p{font-size:13px;line-height:1.7;margin:0 0 14px;color:var(--cb-text-sec,var(--cb-sec,var(--cb-muted)))}
.ch-tax-error a{color:var(--cb-link-text,var(--cb-link));font-size:13px;text-underline-offset:3px;align-self:center}
.ch-tax-error.is-review{border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.08)}
.ch-tax-panel :is(button,select,input,summary):focus-visible,.ch-tax-error :is(a,button):focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
.ch-tax-panel [hidden],.ch-tax-error[hidden]{display:none!important}
@media(max-width:1100px){.ch-tax-notice{align-items:flex-start;flex-direction:column;gap:14px}}
@media(max-width:600px){.ch-tax-panel{margin:20px 18px}.ch-tax-panel h2{font-size:18px}.ch-tax-notice{padding:16px}.ch-tax-actions{width:100%;gap:8px}.ch-tax-actions button{flex:1}.ch-business-fields{grid-template-columns:1fr}.ch-tax-error{margin:18px}.ch-tax-action{padding-inline:12px}}
/* A ticked business box shows the VAT field even before v3--checkout--tax-review connects (QA item 225). */
.ch-tax-panel:has([data-tax-business]:checked) .ch-business-fields[hidden]{display:grid!important}
/* Desktop checkout: payment details beside a persistent order summary. */
.dch-wrap{max-width:1280px;margin:0 auto;padding:34px var(--gut) 64px}
.dch-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}
.dch-head h1{font:300 40px/1.2 var(--cb-font-light);margin:0 0 9px}
.dch-head p{font:400 14px/1.6 var(--cb-font-regular);color:var(--cb-sec);margin:0}
.dch-cancel{font:600 13px/1.5 var(--cb-font-semibold);color:var(--cb-link-text,var(--cb-link));text-decoration:underline;text-underline-offset:4px}
.dch-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(355px,430px);gap:clamp(28px,4vw,64px);align-items:start}
.dch-details{min-width:0}
.dch-details>section,.dch-payment{padding:0 0 26px;margin:0 0 24px;border-bottom:1px solid var(--cb-border);background:transparent}
.dch-section-title,.dch-summary h2{font:600 20px/1.4 var(--cb-font-semibold);color:var(--cb-text);margin:0 0 16px}
.dch-details .ch-email{padding:0;margin:0 0 14px}
.dch-contact .ch-acct-nudge{padding:0 0 8px;background:transparent}
.dch-contact .ch-gift{padding:18px 0 0;margin-top:18px;border-top:1px solid var(--cb-border);background:transparent}
.dch-signed-in{font-size:13px;color:var(--cb-sec);margin:0 0 14px}
.dch-field-label{display:block;font:600 12px/1.5 var(--cb-font-semibold);margin-bottom:7px;color:var(--cb-sec)}
.dch-wrap :is(.ch-input,.ch-textarea,.ch-discount-input){border:1px solid var(--cb-border-hard);border-radius:8px;font-size:14px;letter-spacing:0;background:var(--cb-card);color:var(--cb-text);height:46px}
.dch-wrap .ch-textarea{height:auto;min-height:86px}
.dch-wrap .ch-input::placeholder{color:var(--cb-muted)}
.dch-wrap .ch-tax-panel{padding:0 0 26px;margin:0 0 24px;border-bottom:1px solid var(--cb-border)}
.dch-wrap .ch-tax-notice{flex-direction:column;align-items:stretch;gap:14px}
.dch-wrap .ch-tax-form{grid-template-columns:1fr auto;align-items:end}
.dch-wrap .ch-tax-form .ch-tax-help{grid-column:1/-1;margin:0}
.dch-wrap .ch-tax-form button{height:44px}
.dch-wrap .ch-express{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;background:transparent}
.dch-wrap .ch-express-btn{height:46px;border-radius:8px;font-size:13px}
.dch-wrap .ch-express-amount{display:none}
.dch-wrap .ch-divider{padding:20px 0;background:transparent}
.dch-wrap .ch-divider-label{font-size:11px;letter-spacing:.07em}
.dch-wrap .ch-methods{padding:0;background:transparent;display:grid;gap:8px}
.dch-wrap .ch-method,.dch-wrap .ch-method:first-child{border:1px solid var(--cb-border-hard);border-radius:10px;background:transparent;overflow:hidden}
.dch-wrap .ch-method.is-open{border-color:var(--cb-link);background:var(--cb-card)}
.dch-wrap .ch-method-head{padding:15px 16px;min-height:50px}
.dch-wrap .ch-method-label{font-size:14px}
.dch-wrap .ch-method-body{display:none;max-height:none;opacity:1;overflow:visible;transition:none;padding:0 16px 18px}
.dch-wrap .ch-method.is-open .ch-method-body{display:flex;max-height:none;padding:0 16px 18px}
.dch-wrap .ch-method-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dch-wrap .ch-method-row>.ch-field{min-width:0}
.dch-wrap .ch-method-note{font-size:13px;line-height:1.65;color:var(--cb-sec)}
.dch-summary{position:sticky;top:96px;min-width:0;border:1px solid var(--cb-border-hard);border-radius:16px;padding:24px;background:var(--cb-card)}
.dch-summary-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.dch-summary-top h2{margin:0}
.dch-summary-count{color:var(--cb-sec);font-size:12px}
.dch-summary .ch-items{border-top:0;margin:10px 0 0;max-height:340px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.dch-summary .ch-item-row{padding:16px 0;gap:12px;align-items:flex-start;flex-wrap:wrap}
.dch-summary .ch-item-thumb{width:88px;height:50px;border-radius:6px}
.dch-summary .ch-item-title{font-size:13px;line-height:1.5;white-space:normal;overflow:visible}
.dch-summary .ch-item-meta{font-size:11px;line-height:1.6;display:block}
.dch-summary .ch-item-price-col{margin-left:100px;margin-top:-2px;order:3;align-items:flex-start;flex-basis:calc(100% - 100px)}
.dch-summary .ch-item-price{font-size:14px}
.dch-summary .ch-item-remove{order:2;margin-left:auto;width:24px;height:24px}
.dch-summary .ch-item-thumb{order:0}
.dch-summary .ch-item-body{order:1}
.dch-summary .ch-nudge{padding:12px;margin:12px 0 20px;gap:9px;background:rgba(64,179,222,.05)}
.dch-summary .ch-nudge-row{flex-direction:column;gap:5px}
.dch-summary .ch-nudge-headline{font-size:12px;line-height:1.5}
.dch-summary .ch-nudge-sub{font-size:11px;line-height:1.6}
.dch-summary .ch-nudge-cta{font-size:11px}
.dch-summary .ch-discount{padding:0 0 16px;background:transparent}
.dch-summary .ch-discount-label{font-size:13px}
.dch-summary .ch-discount-input{min-width:0}
.dch-summary .ch-discount-redeem{height:46px;border-radius:8px;padding:0 15px;font-size:11px;letter-spacing:.5px}
.dch-summary .ch-totals{padding:14px 0 0;border-top:1px solid var(--cb-border);background:transparent}
.dch-summary .ch-total-line{font-size:13px;gap:15px}
.dch-summary .ch-total-value{font-size:28px}
.dch-summary .ch-tax{background:transparent!important;padding:7px 0;margin:0;border:0!important}
.dch-summary .ch-tax-label{font-size:12px;letter-spacing:0;text-transform:none;font-weight:400}
.dch-summary .ch-tax-country{font:inherit;text-transform:none;letter-spacing:0;color:var(--cb-link-text,var(--cb-link))}
.dch-summary .ch-tax-amt{font-size:13px;font-weight:400}
.dch-summary .ch-pay-cta{padding:22px 0 0}
.dch-summary .ch-pay-btn{height:50px;border-radius:999px;box-shadow:none;font-size:13px;letter-spacing:1px}
.dch-summary .ch-legal{padding:14px 0 0!important;background:transparent!important;border:0!important;font-size:11px;line-height:1.7;color:var(--cb-sec)}
.dch-wrap>.ch-trust{background:transparent!important;border-top:1px solid var(--cb-border);padding:24px 0 0;margin-top:28px;gap:24px;display:flex;justify-content:center;flex-wrap:wrap}
.dch-wrap .ch-trust-item{flex:0 1 180px}
.dch-wrap .ch-trust-fine{font-size:13px;margin:0;flex-basis:100%;color:var(--cb-sec); line-height:19px;}
.dch-wrap .ch-alert-wrap{padding:0}
.dch-wrap .ch-tax-error{margin:0 0 22px}
.dch-payment-status{font:400 13px/1.6 var(--cb-font-regular);color:var(--cb-sec);text-align:center;margin:12px 0 0}
.dch-wrap .ch-pay-btn.is-processing{opacity:1;display:flex;align-items:center;justify-content:center;gap:10px;cursor:wait}
.ch-pay-btn.is-processing::before{content:'';width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:dch-payment-spin .7s linear infinite}
@keyframes dch-payment-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ch-pay-btn.is-processing::before{animation:none}}
[data-checkout-empty=true] .dch-grid{display:block}
[data-checkout-empty=true] .dch-details,[data-checkout-empty=true] .dch-summary-top{display:none}
[data-checkout-empty=true] .dch-summary{position:static;background:transparent;border:0;padding:20px 0}
@media(max-width:1000px){.dch-grid{grid-template-columns:minmax(0,1fr) 350px;gap:24px}.dch-summary{padding:18px}.dch-wrap .ch-tax-form{grid-template-columns:1fr}.dch-wrap .ch-tax-form button{justify-self:start}.dch-wrap .ch-business-fields{grid-template-columns:1fr}}
@media(max-width:800px){.dch-grid{grid-template-columns:1fr}.dch-summary{position:static}.dch-head h1{font-size:32px}}
@media(max-height:900px){.dch-summary{position:static}}
@media(prefers-reduced-motion:no-preference){.dch-wrap .ch-method.is-open .ch-method-body{animation:cb-ui-menu-in 140ms ease both}}

/* A crypto payment open for the cart (Michael on :3000, 2026-10-13): above the held Pay. */
.ch-crypto-pending{margin:0 0 14px;padding:14px 16px;border:1px solid var(--cb-link);border-radius:10px;background:rgba(64,179,222,.08);color:var(--cb-text)}
.ch-crypto-pending-title{margin:0;font:600 15px/1.4 var(--cb-font-semibold)}
.ch-crypto-pending-body{margin:6px 0 0;font:400 13px/1.55 var(--cb-font-regular);color:var(--cb-sec)}
.ch-crypto-pending-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px}
.ch-crypto-pending-actions form{margin:0}
.ch-crypto-pending-status{color:var(--cb-link-text,var(--cb-link));font:600 13px/1.4 var(--cb-font-semibold);text-decoration:underline}
.ch-crypto-pending-other{background:none;border:1px solid var(--cb-border-hard);border-radius:6px;padding:8px 14px;color:var(--cb-text);font:600 13px/1 var(--cb-font-semibold);cursor:pointer}
.ch-pay-cta:has([data-crypto-pending]) .ch-pay-btn{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Floating messages on the desktop checkout sit at the top, under the header (tester-r r28): at the
   bottom centre the layout's toast host covered the card fields and the left of Pay at 1440x900. The
   host is the layout's, outside the page, so the page is found by its wrapper. */
body:has(.dch-wrap) .toast-host{top:92px;bottom:auto}
/* Desktop homepage administration. Public hero geometry is unchanged. */
.dh-home-admin{padding:14px var(--gut);border-bottom:1px solid var(--cb-border);background:var(--cb-card)}
.dh-home-admin-inner{max-width:1640px;margin:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dh-home-admin-heading{display:flex;align-items:center;gap:8px;font-weight:700}
.dh-home-admin svg,.dh-home-editor svg{width:18px;height:18px;flex:none}
.dh-home-admin-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.dh-home-admin-views{display:flex;padding:3px;border:1px solid var(--cb-border-hard);border-radius:9px;gap:3px}
.dh-home-admin button,.dh-home-editor button{min-height:38px;padding:8px 14px;border:1px solid var(--cb-border-hard);border-radius:8px;font:600 13px/1.4 var(--cb-font-semibold);display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dh-home-admin-views button{border-color:transparent;min-height:32px;padding:5px 12px}
.dh-home-admin-views [aria-pressed="true"]{background:var(--cb-chip-bg);color:var(--cb-link-text,var(--cb-link));border-color:var(--cb-border-hard)}
.dh-home-admin button:hover,.dh-home-editor button:hover{border-color:var(--cb-link)}
.dh-home-admin button:focus-visible,.dh-home-editor :is(button,input,textarea,select):focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
.dh-home-admin-note{margin:0;max-width:1640px;font-size:12px;color:var(--cb-sec)}
.dh-home-admin-status{max-width:1640px;margin:8px auto 0;font-size:13px;color:var(--cb-sec)}
body[data-cb-state="admin"][data-home-hero-view="guest"] .dh-hero{display:block!important}
body[data-cb-state="admin"][data-home-hero-view="guest"] :is(.dh-userhero,.dh-recommended){display:none!important}
body[data-cb-state="admin"][data-home-hero-view="signed"] .dh-hero{display:none!important}
body[data-cb-state="admin"][data-home-hero-view="signed"] .dh-userhero{display:block!important}
.dh-home-editor{width:min(720px,calc(100% - 48px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--cb-border-hard);border-radius:16px;background:var(--cb-card);color:var(--cb-text);box-shadow:0 16px 60px #0004;overflow:auto;overscroll-behavior:contain;opacity:0;transform:translateY(8px);transition:opacity .14s,transform .14s,display .14s allow-discrete,overlay .14s allow-discrete}
.dh-home-editor[open]{opacity:1;transform:none}
.dh-home-editor::backdrop{background:rgba(10,15,24,.6);opacity:0;transition:opacity .14s,display .14s allow-discrete,overlay .14s allow-discrete}
.dh-home-editor[open]::backdrop{opacity:1}
@starting-style{.dh-home-editor[open]{opacity:0;transform:translateY(8px)}.dh-home-editor[open]::backdrop{opacity:0}}
.dh-home-editor-head{padding:22px 24px 16px;display:flex;align-items:start;gap:20px;border-bottom:1px solid var(--cb-border)}
.dh-home-editor-head>div{flex:1}
.dh-home-editor h2{font-size:22px;line-height:1.3;margin:0 0 7px}
.dh-home-editor p{font-size:13px;line-height:1.6;color:var(--cb-sec);margin:0}
.dh-home-editor button.dh-home-editor-close{padding:8px;min-width:36px;border:0}
.dh-home-editor-fields{padding:20px 24px;display:grid;gap:18px}
.dh-home-editor-preview{margin:0;height:190px;border-radius:10px;overflow:hidden;background:var(--cb-bg);border:1px solid var(--cb-border)}
.dh-home-editor-preview img{width:100%;height:100%;object-fit:cover}
.dh-home-editor-upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dh-home-editor label{display:grid;gap:7px;font:600 13px/1.5 var(--cb-font-semibold);min-width:0}
.dh-home-editor input:not([type="range"]),.dh-home-editor textarea,.dh-home-editor select{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);color:var(--cb-text);border-radius:8px;font:400 14px/1.5 var(--cb-font-regular)}
.dh-home-editor textarea{resize:vertical;min-height:76px}
.dh-home-editor input[type="range"]{width:100%;accent-color:var(--cb-link);cursor:pointer}
.dh-home-editor-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dh-home-editor-card-fields{display:grid;gap:16px}
.dh-home-editor-help{font:400 12px/1.5 var(--cb-font-regular);color:var(--cb-sec)}
.dh-home-editor-alert{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--cb-border-hard);border-radius:9px;font-size:13px;line-height:1.5}
.dh-home-editor-alert.is-error{border-color:var(--cb-error)}
.dh-home-editor-spinner{animation:dh-home-editor-spin .8s linear infinite;stroke:currentColor;fill:none}
@keyframes dh-home-editor-spin{to{transform:rotate(360deg)}}
.dh-home-editor-foot{position:sticky;bottom:0;display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;background:var(--cb-card);border-top:1px solid var(--cb-border)}
.dh-home-editor-foot button:first-child{margin-right:auto}
.dh-home-editor button.is-primary{background:var(--cb-link);border-color:var(--cb-link);color:#fff}
.dh-home-editor button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1000px){.dh-home-admin-controls{margin-left:0}.dh-home-admin-inner{gap:10px 20px}}
@media(max-width:600px){.dh-home-editor{width:calc(100% - 24px)}.dh-home-editor-row{grid-template-columns:1fr}.dh-home-editor-fields,.dh-home-editor-head{padding:18px}.dh-home-editor-foot{padding:14px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.dh-home-editor,.dh-home-editor::backdrop{transition:none;transform:none}.dh-home-editor-spinner{animation:none}}
.dc-orders .or-purchase-license{font-size:14px;color:var(--cb-sec);margin:14px 0 0; line-height:20px;}
.dc-orders .or-item-title a{color:inherit;text-decoration:none}
.dc-orders .or-item-title a:hover{color:var(--cb-link-text,var(--cb-link))}
.dc-orders .or-att[hidden]{display:none!important}
.or-files-expand{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border:0;background:transparent;color:var(--cb-link-text,var(--cb-link));cursor:pointer;font:600 13px var(--cb-font-semibold)}
.or-expand-chevron{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.or-files-expand[aria-expanded=true] .or-expand-chevron{transform:rotate(225deg)}
.or-purchase-summary{max-width:460px;margin:28px 0 20px auto;border-top:1px solid var(--cb-border);padding:20px 0}
.or-purchase-summary h2{font:600 19px/1.4 var(--cb-font-semibold);margin:0 0 16px}
.or-purchase-total{display:flex;justify-content:space-between;gap:24px;margin:10px 0;font-size:14px;color:var(--cb-sec)}
.or-purchase-total:last-child{font-size:18px;color:var(--cb-text);border-top:1px solid var(--cb-border);padding-top:16px}
.or-purchase-summary.is-highlighted{outline:2px solid var(--cb-link);outline-offset:12px}
.or-purchase-actions{display:flex;align-items:center;justify-content:flex-end;gap:24px;margin:20px 0 32px;font-size:14px}
@media(max-width:800px){.dc-orders .or-item{grid-template-columns:200px minmax(0,1fr);gap:18px;padding:18px}}
.ch-payment-label{display:block;margin:0 0 6px;color:var(--cb-sec,var(--cb-text-sec));font:600 13px/19.5px var(--cb-font-regular)}
.ch-payment-hint{margin:7px 0 0;color:var(--cb-sec,var(--cb-muted));font:400 13px/19.5px var(--cb-font-regular)}
.ch-method-row>.ch-field{flex:1;min-width:0}
.ch-method[data-method="card"] [data-cb-validate^="cc-"]{font-variant-numeric:tabular-nums}
.ch-method[data-card-brand]:not([data-card-brand=""]) .ch-card-mark{opacity:.35;transition:opacity .12s}
.ch-method[data-card-brand="visa"] .ch-card-mark.ch-card-visa,.ch-method[data-card-brand="amex"] .ch-card-mark.ch-card-amex,.ch-method[data-card-brand="mc"] .ch-card-mark.ch-card-mc{opacity:1}
form.ch-method-body{margin:0}
@media(max-width:600px){.ch-method[data-method="card"] .ch-input,.ch-email .ch-input{font-size:16px}}
@media(prefers-reduced-motion:reduce){.ch-method .ch-card-mark{transition:none!important}}
.cb-currency-trigger{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:8px 12px;border:1px solid var(--cb-border-hard);border-radius:999px;background:transparent;color:var(--cb-text);font:600 12px/1.4 var(--cb-font-regular);cursor:pointer;white-space:nowrap}
.cb-currency-trigger:hover{border-color:var(--cb-link);color:var(--cb-link-text,var(--cb-link))}
.cb-currency-trigger:focus-visible,.cb-currency-close:focus-visible{outline:2px solid var(--cb-link);outline-offset:3px}
.cb-currency-trigger strong{font:700 12px/1.4 var(--cb-font-regular);letter-spacing:.6px}
.cb-currency-trigger svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-currency-trigger.hm-acct-row{display:flex;width:100%;gap:14px;border:0;border-radius:0;padding:18px 22px;color:#e8eaf0;font-size:13px;letter-spacing:1px;text-align:left;text-transform:uppercase}
.cb-currency-trigger.hm-acct-row .hm-acct-row-label{min-width:0;white-space:normal;line-height:1.4}
.cb-currency-trigger.hm-acct-row strong{flex:none;margin-left:auto;color:var(--cb-link-text,var(--cb-link))}
.cb-currency-trigger.hm-acct-row>svg{flex:none}
.cb-currency-footer{display:flex;justify-content:center;margin:0 0 18px;flex-basis:100%;width:100%}
.hm-footer .cb-currency-trigger{color:#e8eaf0;border-color:rgba(255,255,255,.18)}
.hm-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.hm-footer-bottom>.cb-currency-footer{order:1;flex-basis:auto;width:auto;margin:0}
.cb-currency-checkout{padding:0 0 20px;border-bottom:1px solid var(--cb-border);margin-bottom:20px}
.cb-currency-checkout .cb-currency-trigger{min-height:34px;padding:6px 12px}
.cb-currency-note{margin:10px 0 0;color:var(--cb-sec,var(--cb-text-sec));font:400 13px/20.8px var(--cb-font-regular)}
.cb-currency-dialog{box-sizing:border-box;width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:26px;border:1px solid var(--cb-border-hard);border-radius:16px;background:var(--cb-card);color:var(--cb-text);box-shadow:0 16px 60px rgba(0,0,0,.25);overflow:auto;overscroll-behavior:contain;font-family:var(--cb-font-regular);opacity:0;transform:translateY(8px);transition:opacity .14s,transform .14s,display .14s allow-discrete,overlay .14s allow-discrete}
.cb-currency-dialog[open]{opacity:1;transform:none}
.cb-currency-dialog::backdrop{background:rgba(10,15,24,.6);opacity:0;transition:opacity .14s,display .14s allow-discrete,overlay .14s allow-discrete}
.cb-currency-dialog[open]::backdrop{opacity:1}
@starting-style{.cb-currency-dialog[open]{opacity:0;transform:translateY(8px)}.cb-currency-dialog[open]::backdrop{opacity:0}}
.cb-currency-dialog h2{margin:0 32px 12px 0;font-size:22px;line-height:1.25;font-weight:700}
.cb-currency-dialog p{font-size:13px;line-height:1.65;color:var(--cb-sec,var(--cb-text-sec));margin:0 0 16px}
.cb-currency-close{position:absolute;right:15px;top:14px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--cb-sec);font:26px/1 var(--cb-font-regular);cursor:pointer}
.cb-currency-search{display:block;margin-bottom:12px}
.cb-currency-search input{box-sizing:border-box;width:100%;height:42px;padding:10px 12px;border-radius:8px;border:1px solid var(--cb-border-hard);background:var(--cb-bg);color:var(--cb-text);font:400 16px/1.4 var(--cb-font-regular)}
.cb-currency-search input:focus{outline:2px solid var(--cb-link);outline-offset:1px}
:root body[data-cb-state] .cb-currency-options.cb-dd-menu{position:static;display:block;max-height:min(320px,42dvh);overflow:auto;overscroll-behavior:contain;border:0;border-radius:0;padding:0;box-shadow:none}
:root body[data-cb-state] .cb-currency-options .cb-dd-option{display:flex;align-items:center;gap:14px;min-height:42px;font-size:14px}
body[data-cb-state] .cb-currency-options .cb-dd-option[hidden]{display:none}
.cb-currency-options strong{flex:0 0 38px;font-weight:700;font-size:12px;letter-spacing:.4px}
.cb-currency-dialog .cb-currency-source{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--cb-border);font-size:13px}
.cb-currency-source a{color:var(--cb-link-text,var(--cb-link));text-decoration:underline}
.cb-currency-dialog .cb-currency-no-results{padding:20px 8px;margin:0}
[data-cb-money-usd]{font-variant-numeric:tabular-nums}
@media(max-width:600px){.cb-currency-dialog{width:calc(100% - 24px);padding:22px}.cb-currency-trigger{min-height:44px}.cb-currency-checkout{margin-inline:20px}}
@media(prefers-reduced-motion:reduce){.cb-currency-dialog,.cb-currency-dialog::backdrop{transition:none;transform:none}}
/* Shared dropdown vocabulary. Layout and field sizing stay with their components. */
:root body[data-cb-state] .cb-dd-menu{box-sizing:border-box;background:var(--cb-card);color:var(--cb-text);border:1px solid var(--cb-border-hard);border-radius:12px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.2);text-transform:none;letter-spacing:0;scrollbar-width:thin;scrollbar-color:var(--cb-border-hard) transparent}
:root body[data-cb-state] .cb-dd-option{position:relative;box-sizing:border-box;width:100%;min-height:38px;padding:10px 34px 10px 12px;border:0;border-radius:7px;background:transparent;color:var(--cb-text);font:400 13px/1.4 var(--cb-font-regular);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;cursor:pointer;transition:background-color .12s,color .12s}
:root body[data-cb-state] .cb-dd-option:hover,:root body[data-cb-state] .cb-dd-option:focus-visible{background:rgba(64,179,222,.12);color:var(--cb-text)}
:root body[data-cb-state] .cb-dd-option:is([aria-selected="true"],[aria-checked="true"],.is-selected,.is-active){background:rgba(64,179,222,.1);color:var(--cb-link-text,var(--cb-link));font-weight:600}
:root body[data-cb-state] .cb-dd-option:is([aria-selected="true"],[aria-checked="true"],.is-selected,.is-active)::after{content:"";position:absolute;right:14px;top:calc(50% - 6px);width:5px;height:9px;border:solid currentColor;border-width:0 1.7px 1.7px 0;border-radius:0;transform:rotate(45deg);background:none}
:root body[data-cb-state] .cb-dd-option:is(:disabled,[aria-disabled="true"]){opacity:.5;cursor:not-allowed;background:transparent}
:root body[data-cb-state] .cb-dd-option:focus-visible{outline:2px solid var(--cb-link);outline-offset:-2px}
:root body[data-cb-state] .cb-dd-option:is(.is-danger,[data-danger]){color:var(--cb-error)}
:root body[data-cb-state] .cb-dd-option .desc,:root body[data-cb-state] .cb-dd-option .sl-mode-pop-sub{color:var(--cb-sec)}
:root body[data-cb-state] .sl-applies-opt-check{display:none}
:root body[data-cb-state] .cb-dd-chevron{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
:root body[data-cb-state] .cb-dd-trigger[aria-expanded="true"]>.cb-dd-chevron{transform:rotate(180deg)}
:root body[data-cb-state] .cb-dd-trigger[aria-expanded="false"]>.cb-dd-chevron{transform:none}
:root body[data-cb-state] .cb-dd-field{background:var(--cb-card);border:1px solid var(--cb-border-hard);border-radius:8px;color:var(--cb-text)}
:root body[data-cb-state] .cb-dd-field:hover{border-color:var(--cb-sec)}
:root body[data-cb-state] .cb-dd-field[aria-expanded="true"]{border-color:var(--cb-link);box-shadow:0 0 0 2px rgba(64,179,222,.12)}
:root body[data-cb-state] .cb-dd-toolbar{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--cb-border-hard);border-radius:999px;background:transparent;color:var(--cb-text);font:600 12px/1 var(--cb-font-bold);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;cursor:pointer}
:root body[data-cb-state] .cb-dd-toolbar[aria-expanded="true"]{border-color:var(--cb-link);background:var(--cb-slab,var(--cb-card))}
:root body[data-cb-state] .cb-dd-toolbar:hover{border-color:var(--cb-sec)}
:root body[data-cb-state] select:not([multiple]):not([size]){appearance:none;background-image:url("https://djm6btoj9k6cu.cloudfront.net/assets/v3/icons/css-dad9721069-3f3f93b3795136b0ac7ba6eb19986c7f55c9a799f1a7cd1c3980f44d72af5d1a.svg");background-repeat:no-repeat;background-size:14px 14px;background-position:right 12px center;padding-right:36px}
:root body[data-cb-state] select option{background:var(--cb-card);color:var(--cb-text)}
/* The navigation stays dark in both themes, matching the header. */
:root body[data-cb-state] .dh-menu-pop.cb-dd-menu{--cb-card:#1f2636;--cb-text:#e8eaf0;--cb-border-hard:rgba(255,255,255,.14)}
:root body[data-cb-state] .dh-menu-pop .cb-dd-option{display:block}
:root body[data-cb-state] .cb-dd-menu:not(.dc-facet-panel):not(.pp-license-menu):not(.dh-menu-pop):not(.sl-applies-pop){max-height:min(340px,70dvh);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:600px){:root body[data-cb-state] .cb-dd-option{min-height:44px;padding-top:12px;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){:root body[data-cb-state] .cb-dd-chevron{transition:none}}
/* A cart press held until its controller connects (QA item 224; layouts/v3/_head). The button says it
   heard the press: the pointer turns to progress and the button dims a little until the add lands. */
.pp-add-cart[data-cb-early-pressed],
.cb-pcard-add[data-cb-early-pressed] {
  cursor: progress;
  opacity: .7;
}
/* The desktop app's sign-in approval in the v3 shell (QA item 243; views v3/licensing/device_approvals).
   The v3 auth card draws the page; these rules add what that card has no class for: the code the app
   shows, the request's details, the Approve / Deny pair and the notice. Both builds, both themes,
   through the shell's own tokens. */
.ah-section.lic-page .lic-code{margin:4px 0 6px;font:600 26px/1.2 var(--cb-font-semibold,system-ui);letter-spacing:4px;color:var(--cb-text);text-align:center;font-variant-numeric:tabular-nums}
.ah-section.lic-page .lic-muted{color:var(--cb-text-sec,var(--cb-muted));font-size:13px;line-height:1.6}
.ah-section.lic-page .lic-details{margin:18px 0;padding:0;border-top:1px solid var(--cb-border)}
.ah-section.lic-page .lic-row{display:flex;flex-wrap:wrap;gap:2px 16px;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--cb-border)}
.ah-section.lic-page .lic-row dt{color:var(--cb-text-sec,var(--cb-muted));font-size:13px}
.ah-section.lic-page .lic-row dd{margin:0;color:var(--cb-text);font-size:14px;font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}
.ah-section.lic-page .lic-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 14px}
.ah-section.lic-page .lic-actions .ah-submit{flex:1 1 160px;margin:0}
.ah-section.lic-page .lic-secondary{flex:1 1 160px;min-height:44px;padding:0 18px;border:1px solid var(--cb-border);border-radius:999px;background:transparent;color:var(--cb-text);font:inherit;font-weight:600;cursor:pointer}
.ah-section.lic-page .lic-secondary:hover{border-color:var(--cb-text-sec,var(--cb-muted))}
.ah-section.lic-page .lic-notice{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:var(--cb-chip-bg,var(--cb-border));color:var(--cb-text);font-size:14px;line-height:1.55}
.ah-section.lic-page .lic-notice--success{border-left:3px solid var(--cb-commit)}
.ah-section.lic-page .lic-code-input{text-transform:uppercase;letter-spacing:2px}
.ah-section.lic-page p + p.lic-muted{margin-top:10px}

/* The desktop apps' devices in the v3 settings shell (QA item 252; views v3/licensing/devices). The
   shell draws the tabs, the header and the cards; these rules lay out each card's head and its rows,
   with the licensing page's own hooks. Both builds, both themes, through the shell's tokens. */
.lic-page > .lic-muted{margin:0 0 16px;color:var(--cb-text-sec,var(--cb-muted));font-size:13px;line-height:1.6}
.lic-page .lic-notice{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--cb-chip-bg,var(--cb-border));color:var(--cb-text);font-size:14px}
.lic-page .lic-empty{margin:0;color:var(--cb-text-sec,var(--cb-muted))}
.lic-page .lic-group-head .lic-muted{margin-top:4px;color:var(--cb-text-sec,var(--cb-muted));font-size:13px}
.lic-page .lic-devices{margin:0;padding:0;list-style:none}
.lic-page .lic-device{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 0;border-top:1px solid var(--cb-border)}
.lic-page .lic-device:first-child{border-top:0}
.lic-page .lic-device-main{flex:1 1 260px;min-width:0}
.lic-page .lic-device-name{color:var(--cb-text);font-weight:600;overflow-wrap:anywhere}
.lic-page .lic-device-meta{margin-top:2px;color:var(--cb-text-sec,var(--cb-muted));font-size:13px;overflow-wrap:anywhere}
.lic-page .lic-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--cb-chip-bg,var(--cb-border));color:var(--cb-text-sec,var(--cb-muted));font-size:12px;font-weight:500;vertical-align:middle}
.lic-page form.button_to{margin:0}
.lic-page .lic-btn--danger{min-height:36px;padding:0 16px;border:1px solid var(--cb-border);border-radius:999px;background:transparent;color:var(--cb-error,#e74c3c);font:inherit;font-weight:600;cursor:pointer}
.lic-page .lic-btn--danger:hover{border-color:var(--cb-error,#e74c3c)}
/* The phone's page header is inset 18px (.set-page-header); the paragraphs between it and the cards follow it. */
.lic-page.is-mobile > .lic-muted,.lic-page.is-mobile > .lic-notice{margin-left:18px;margin-right:18px}
/* A comment link lands on the comment (QA item 260): the comment mails and the bell link
   `?tab=comments&comment_id=N` (a blog article's `?comments=true&comment_id=N`), the thread marks N
   `.is-linked`, and v3--social--comment-link scrolls to it and gives it the focus. The tint spreads past
   the comment through its shadow, so nothing around it moves; the focus is already shown by the tint. */
.cb-comment.is-linked {
  border-radius: 10px;
  background: color-mix(in srgb, var(--cb-link) 12%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--cb-link) 12%, transparent);
}
.cb-comment.is-linked:focus { outline: none; }
/* With no comment named, the comments are scrolled to: clear of the fixed header. */
.cb-comments { scroll-margin-top: 96px; }
/* A comment's image while it uploads (QA item 271, Michael's manual pass): on a slow connection nothing
   said why Send was held. v3--social--comment-composer draws the state over the thumbnail: a progress ring
   with the percent, or "Interrupted" with Resume; the hint beside Send names what it waits for. */
.cb-comments-attachment-status {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: inherit;
  background: rgba(10, 14, 20, .55);
  color: #fff;
  text-align: center;
}
.cb-comments-attachment[data-state="uploading"] .cb-comments-attachment-status,
.cb-comments-attachment[data-state="failed"] .cb-comments-attachment-status,
.cb-comments-attachment[data-state="refused"] .cb-comments-attachment-status { display: flex; }
.cb-comments-attachment-ring {
  width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(#fff var(--progress, 0%), rgba(255, 255, 255, .25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
@media (prefers-reduced-motion: no-preference) {
  .cb-comments-attachment[data-state="uploading"] .cb-comments-attachment-ring { transition: background .3s linear; }
}
.cb-comments-attachment-percent,
.cb-comments-attachment-note {
  font: 600 11px/1.1 var(--cb-font-semibold, inherit);
  font-variant-numeric: tabular-nums;
}
.cb-comments-attachment-resume {
  padding: 3px 8px; border: 0; border-radius: 999px;
  background: #fff; color: #10131c;
  font: 600 11px/1 var(--cb-font-semibold, inherit);
  cursor: pointer;
}
.cb-comments-attachment-resume:focus-visible { outline: 2px solid var(--cb-link, #40b3de); outline-offset: 2px; }
.cb-comments-send-hint {
  align-self: center;
  margin-right: 8px;
  font: 400 12px/1.3 var(--cb-font-regular, inherit);
  color: var(--cb-muted);
}
.cb-comments-send-hint[hidden] { display: none; }
/* On a phone the hint has no room beside the buttons (it pushed Send off the edge): it takes a line of its
   own above them. */
@media (max-width: 600px) {
  .cb-comments-composer-actions:has(.cb-comments-send-hint:not([hidden])),
  .cb-comments-reply-box-actions:has(.cb-comments-send-hint:not([hidden])) { flex-wrap: wrap; }
  .cb-comments-send-hint { order: -1; flex: 1 0 100%; margin: 0 0 8px; text-align: right; }
}
/* Comments' moderation and trust, both builds.

   A comment report's reason (the visitor sweep's PB16): v3--social--comment-menu opens it under the comment's
   text on both builds. */
.cb-comment-report-form { display: grid; gap: 8px; margin: 10px 0 4px; padding: 12px; border: 1px solid var(--cb-border); border-radius: 10px; background: var(--cb-card); }
.cb-comment-report-form label { font: 600 13px/1.3 var(--cb-font-semibold); color: var(--cb-text); }
.cb-comment-report-form textarea { width: 100%; box-sizing: border-box; min-height: 72px; padding: 8px 10px; resize: vertical; border: 1px solid var(--cb-border); border-radius: 8px; background: transparent; color: var(--cb-text); font: 400 14px/1.45 var(--cb-font-regular); }
.cb-comment-report-form textarea:focus { outline: 2px solid var(--cb-link); outline-offset: 1px; }
.cb-comment-report-error { margin: 0; font: 600 12px/1.3 var(--cb-font-semibold); color: var(--cb-error); }
.cb-comment-report-error[hidden] { display: none; }
.cb-comment-report-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cb-comment-report-actions button { min-height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: .4px; }
.cb-comment-report-send { border: 0; background: var(--cb-link); color: #fff; }
.cb-comment-report-send:disabled { opacity: .6; cursor: default; }
.cb-comment-report-cancel { border: 1px solid var(--cb-border); background: transparent; color: var(--cb-text); }

/* A buyer's own rating of the product beside their comment (the visitor sweep's PB15), master's stars. The
   .cb-stars base is the product card's, on both builds. */
.cb-comment-author .cb-comment-stars { font-size: 12px; vertical-align: 1px; }
/* "Cubebrush Curated Collections" from the staff card menu (the visitor sweep's MK12), both builds:
   V3::Admin::CollectionsDialogComponent with its own host and panel classes, since U9's .os-modal family is
   styled on .dc-port pages only. */
.ac-host { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; margin: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; }
.ac-host[hidden] { display: none; }
.ac-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 16, .45); }
.ac-panel { position: relative; display: grid; gap: 12px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 22px 22px 20px; background: var(--cb-card); color: var(--cb-text); border: 1px solid var(--cb-border); border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.ac-title { margin: 0; padding-right: 32px; font: 700 18px/1.25 var(--cb-font-bold); color: var(--cb-text); }
.ac-close { position: absolute; top: 14px; right: 12px; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--cb-text); }
.ac-panel > [data-controller~="v3--admin--collections"] { display: grid; gap: 12px; }
.ac-hint { margin: 0; font: 400 13px/1.45 var(--cb-font-regular); opacity: .8; }
.ac-list { display: grid; gap: 6px; }
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; text-align: left; background: transparent; color: var(--cb-text); border: 1px solid var(--cb-border); border-radius: 10px; cursor: pointer; }
.ac-row:hover { border-color: var(--cb-link); }
.ac-row[aria-pressed="true"] { border-color: var(--cb-link); background: rgba(64, 179, 222, .08); }
.ac-row[aria-busy="true"] { opacity: .6; cursor: progress; }
.ac-row-body { display: grid; gap: 2px; min-width: 0; }
.ac-row-name { font: 600 14px/1.3 var(--cb-font-semibold); overflow-wrap: anywhere; }
.ac-row-count { font: 400 12px/1.3 var(--cb-font-regular); opacity: .7; }
.ac-row-check { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--cb-border); border-radius: 6px; }
.ac-row[aria-pressed="true"] .ac-row-check { border-color: var(--cb-link); background: var(--cb-link); box-shadow: inset 0 0 0 3px var(--cb-card); }
.ac-empty { margin: 0; font: 400 14px/1.4 var(--cb-font-regular); opacity: .8; }
.ac-error { margin: 0; font: 600 13px/1.4 var(--cb-font-semibold); color: var(--cb-error); }
.ac-error[hidden] { display: none; }
.ac-create { display: grid; gap: 6px; padding-top: 4px; border-top: 1px solid var(--cb-border); }
.ac-create-label { padding-top: 10px; font: 600 13px/1.3 var(--cb-font-semibold); }
.ac-create-row { display: flex; gap: 8px; }
.ac-create-input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--cb-border); border-radius: 8px; background: transparent; color: var(--cb-text); font: 400 14px/1 var(--cb-font-regular); }
.ac-create-btn { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--cb-link); color: #fff; cursor: pointer; font: 600 12px/1 var(--cb-font-semibold); letter-spacing: .4px; }
.ac-create-btn:disabled { opacity: .6; cursor: default; }
/*
 * v3 desktop stylesheet entrypoint (v3 plan U6, KTD4). GENERATED by lib/v3/port/split_css.rb; do not
 * hand-edit (bin/rails v3:port:css). Plain CSS, no sassc: the handoff's clamp(), min(), max() and env() survive.
 * The order mirrors the <link> order of the handoff's production-desktop pages, with the two stylesheets that
 * desktop.js appends to <head> (currency, dropdowns) last. Page-scoped
 * files live under v3/desktop/pages, bundled here where the handoff links them and scoped when compiled to
 * the page that declares them (body[data-cb-page-css], lib/v3/page_css.rb, v3_page_css in V3Helper);
 * unit-wide files live under v3/desktop/units, bundled unscoped right after. A unit adding either never
 * edits this file.
 * (No "*" followed by "/" may appear in this comment: it would close it and hide the directives below.)
 *































































 */