/* ============================================================================
   ViewChat — Creators, desktop landing (>= 992px only).

   Everything here is scoped to `.creators-desktop` / `.cdk-*` or to
   `body.models-page` inside the desktop media query. The mobile Creators
   landing (< 992px) lives in css/creators-pages.css and is not touched by a
   single rule in this file — the only selector that leaves the media query is
   the `display:none` default below, which keeps the desktop markup out of the
   mobile document.
   ========================================================================== */

.creators-desktop { display: none; }

@media (min-width: 992px) {

  /* --- accent face --------------------------------------------------------- */
  /* Allura Regular (SIL OFL 1.1, licence in /fonts/allura/OFL.txt), served
     from this project — no CDN. Three official subsets so Latin, Latin-Ext
     and Vietnamese all resolve locally; every other script falls back to the
     sans below and never requests a file that does not exist. Used by exactly
     one word in the AI headline — never by nav, cards, body copy or footer. */
  @font-face {
    font-family: 'Allura';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/allura/allura-regular-latin.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;
  }

  @font-face {
    font-family: 'Allura';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/allura/allura-regular-latin-ext.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;
  }

  @font-face {
    font-family: 'Allura';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/allura/allura-regular-vietnamese.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;
  }

  /* --- tokens ------------------------------------------------------------ */
  /* Declared on the page body, not on .creators-desktop: the header sits
     outside that subtree and still has to reach the coral. */
  body.models-page {
    --cdk-coral: #fd2944;
    --cdk-lilac: #7c5cff;
    --cdk-lilac-soft: #9b7cff;
    --cdk-ink: #111116;
    --cdk-muted: #57575f;
    --cdk-muted-2: #8a8a93;
    --cdk-paper: #fbfaf9;
    --cdk-panel: #ffffff;
    --cdk-shell: min(100% - 96px, 1290px);
    --cdk-card-w: 212px;
    --cdk-card-h: 350px;
    --cdk-card-gap: 16px;
  }

  .creators-desktop {
    display: block;
    position: relative;
    background: var(--cdk-paper);
    color: var(--cdk-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  /* The legacy catalog markup is gone, but its page-level tint is not what
     this composition wants. Desktop-only override; mobile keeps the original
     body background from css/our-models.css. */
  body.models-page { background: var(--cdk-paper); }
  /* menu.js wraps the document in .wsmenucontainer, and menu.css gives it
     overflow:hidden — that turns it into a scroll container and a sticky
     descendant has nowhere to stick. `clip` keeps the same clipping without
     creating one. Both are scoped to this page at desktop width, where the
     off-canvas menu those rules exist for is never used. */
  body.models-page .wsmenucontainer { overflow: clip; }
  body.models-page #page { overflow: clip; }
  body.models-page footer.footer { position: relative; z-index: 1; }

  .cdk-shell {
    width: var(--cdk-shell);
    margin: 0 auto;
  }

  /* --- header ------------------------------------------------------------ */
  /* The header never moves. It is simply the topmost layer, so the rising
     sheet passes underneath it instead of over the menu. */
  body.models-page .header-wrapper { z-index: 1200; }

  /* Light, near-transparent bar over the hero. Only the Creators page at
     desktop width is addressed; no global header selector is redefined. */
  /* .tra-menu .wsmainfull carries background-color: transparent !important,
     so the veil has to answer in kind. */
  body.models-page .wsmainfull {
    background-color: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: saturate(1.35) blur(18px);
    backdrop-filter: saturate(1.35) blur(18px);
    border-bottom: 1px solid rgba(20, 20, 26, .055);
    box-shadow: 0 6px 22px rgba(24, 20, 40, .04) !important;
  }

  body.models-page .wsmenu > .wsmenu-list > li > a.h-link {
    color: #16161b;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
  }

  body.models-page .wsmenu > .wsmenu-list > li > a.h-link:hover {
    color: var(--cdk-coral) !important;
  }

  /* Below 1320 the template nav no longer shares a row with the logo and the
     bar grows to two rows. The type steps down so the glass layer stays as
     shallow as possible; the hero and the panel then clear it by measurement
     (see the narrow-desktop block at the end of this file). Creators page
     only — no other page's header is touched. */
  @media (max-width: 1319.98px) {
    body.models-page .wsmenu > .wsmenu-list > li > a.h-link { font-size: 14px; }
  }

  @media (max-width: 1199.98px) {
    body.models-page .wsmenu > .wsmenu-list > li > a.h-link { font-size: 13.5px; }
  }

  /* Active item: coral with the thin underline from the reference. */
  body.models-page .models-nav-item > a.h-link,
  body.models-page .models-nav-item.is-current > a.h-link,
  body.models-page .models-nav-item > a.h-link:hover {
    position: relative;
    color: var(--cdk-coral) !important;
    font-weight: 700;
  }

  body.models-page .models-nav-item.is-current > a.h-link::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 22px;
    left: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--cdk-coral);
  }

  /* Кнопка Download своего вида на этой странице не имеет: используется
     общая кнопка сайта (.btn--theme, css/pink-theme.css). Здесь когда-то
     стояла белая пилюля с чёрным текстом и тенью, потом красная под
     about.html — оба варианта сняты, отдельного стиля кнопки у Creators
     больше нет. */

  body.models-page .lang-btn--desktop .lang-btn__label {
    color: #16161b;
    font-weight: 700;
  }

  /* --- hero -------------------------------------------------------------- */
  /* The hero is the back layer: one viewport tall and stuck to the top for as
     long as the desktop landing is on screen. It never translates — the sheet
     in front of it is what moves, so the photograph stays put while the white
     page rises over it. */
  .cdk-hero {
    /* purple-theme.css sets `section { position: relative!important }`, which
       silently downgrades sticky. Only !important can answer !important. */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 132px 0 96px;
    overflow: hidden;
    background: linear-gradient(180deg, #fdfcfc 0%, #faf8f7 100%);
  }

  .cdk-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  /* No card, no radius, no border, no shadow: the photograph is the scene.
     The mask dissolves it into the paper on the left so the copy sits on a
     clean surface with no vertical seam anywhere. */
  .cdk-hero__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% 10%;
    -webkit-mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, .05) 17%,
        rgba(0, 0, 0, .34) 27%,
        rgba(0, 0, 0, .74) 36%,
        rgba(0, 0, 0, .94) 44%,
        #000 51%);
    mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, .05) 17%,
        rgba(0, 0, 0, .34) 27%,
        rgba(0, 0, 0, .74) 36%,
        rgba(0, 0, 0, .94) 44%,
        #000 51%);
  }

  .cdk-hero__shell {
    position: relative;
    z-index: 1;
  }

  .cdk-hero__copy { max-width: 33.5em; }

  .cdk-eyebrow {
    display: block;
    margin-bottom: 22px;
    color: var(--cdk-coral);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .cdk-hero__title {
    margin: 0;
    color: var(--cdk-ink);
    font-size: clamp(3.9rem, 5.45vw, 5.6rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .97;
  }

  /* The full stop only. "Digital" is also a span, and must not be turned
     into the coral dot. */
  .cdk-hero__title span,
  .cdk-ai__title span:not(.cdk-ai__digital) {
    display: inline-block;
    width: .22em;
    height: .22em;
    margin-left: .05em;
    overflow: hidden;
    border-radius: 50%;
    background: var(--cdk-coral);
    color: transparent;
    text-indent: 110%;
    vertical-align: baseline;
    white-space: nowrap;
  }

  .cdk-hero__lede {
    max-width: 20.5em;
    margin: 30px 0 0;
    color: #3f3f47;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .cdk-hero__avatars {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 30px;
  }

  .cdk-hero__avatar {
    width: 42px;
    height: 42px;
    margin-right: -3px;
    overflow: hidden;
    border: 2.5px solid #fff;
    border-radius: 50%;
    background: #e9e4e1;
    box-shadow: 0 2px 8px rgba(24, 20, 30, .10);
  }

  .cdk-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }

  .cdk-hero__more {
    display: inline-flex;
    align-items: center;
    height: 41px;
    margin-left: 16px;
    padding: 0 20px;
    border-radius: 999px;
    background: rgba(240, 238, 237, .92);
    color: #3a3a40;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* --- all creators ------------------------------------------------------ */
  .cdk-all,
  .cdk-ai {
    position: relative;
    z-index: 1;
  }

  /* The sheet's leading edge: rounded corners and a soft lift so it reads as a
     page rising over the photograph rather than the next section scrolling in. */
  .cdk-all {
    box-shadow: 0 -18px 44px rgba(24, 18, 40, .10);
    /* The panel rides up over the hero and its corners dissolve the cut in
       the photograph, so there is no straight seam anywhere along the join.
       The top padding clears the glass header, so the heading, the filters
       and the search never arrive underneath it. */
    margin-top: -24px;
    padding: 92px 0 6px;
    overflow: hidden;
    border-radius: 44px 44px 0 0;
    background: var(--cdk-panel);
  }

  .cdk-all__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
  }

  .cdk-all__title-wrap {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }

  .cdk-all__title-wrap h2 {
    margin: 0;
    color: var(--cdk-ink);
    font-size: clamp(1.95rem, 2.2vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
  }

  .cdk-all__sub {
    color: var(--cdk-muted-2);
    font-size: 14px;
    font-weight: 500;
  }

  .cdk-all__controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .cdk-filters {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cdk-filter {
    height: 40px;
    padding: 0 20px;
    border: 1px solid rgba(20, 20, 26, .12);
    border-radius: 999px;
    background: #fff;
    color: #3a3a42;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }

  .cdk-filter:hover { border-color: rgba(20, 20, 26, .26); }

  .cdk-filter.is-active {
    border-color: #16161b;
    background: #16161b;
    color: #fff;
  }

  .cdk-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 250px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(20, 20, 26, .12);
    border-radius: 999px;
    background: #fff;
    color: var(--cdk-muted-2);
    cursor: text;
    transition: border-color .18s ease;
  }

  .cdk-search:focus-within { border-color: rgba(20, 20, 26, .34); }

  .cdk-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--cdk-ink);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }

  .cdk-search input::placeholder { color: var(--cdk-muted-2); }
  .cdk-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .cdk-search svg { flex: 0 0 auto; }

  .cdk-all__empty {
    margin: 40px 0 24px;
    color: var(--cdk-muted);
    font-size: 15px;
    text-align: center;
  }

  /* --- the belt ---------------------------------------------------------- */
  /* Native horizontal overflow supplies touch drag, trackpad panning and the
     reduced-motion fallback; the automatic travel is one CSS transform on the
     track. No scroll listener is ever attached. */
  .cdk-marquee {
    padding: 16px 0 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }

  .cdk-marquee::-webkit-scrollbar { display: none; }

  /* No gap on the track itself: translateX(-50%) is only seamless when the
     repeating unit is exactly one group *plus* the space that follows it, so
     that space is the group's own margin instead of a flex gap that exists
     between groups but not after the last one. */
  .cdk-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
  }

  .cdk-marquee.is-running .cdk-marquee__track {
    animation: cdk-belt var(--cdk-belt-duration, 45s) linear infinite;
  }

  .cdk-marquee.is-paused .cdk-marquee__track { animation-play-state: paused; }

  /* Fewer than six results: a plain row inside the page shell. The track is
     no longer max-content, so the cards keep their own size and simply sit
     left-aligned — one result is one card, not a stretched or repeated one. */
  .cdk-marquee.is-static {
    overflow: visible;
  }

  .cdk-marquee.is-static .cdk-marquee__track {
    width: var(--cdk-shell);
    margin: 0 auto;
    gap: var(--cdk-card-gap);
    animation: none;
  }

  @keyframes cdk-belt {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  .cdk-marquee__group {
    display: flex;
    flex: 0 0 auto;
    gap: var(--cdk-card-gap);
    margin-right: var(--cdk-card-gap);
  }

  /* --- creator card ------------------------------------------------------ */
  .cdk-card {
    --cdk-lift: 0px;
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--cdk-card-w);
    height: var(--cdk-card-h);
    overflow: hidden;
    border-radius: 17px;
    background: #eae5e2;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    transform: translateY(var(--cdk-lift));
    transition: transform .34s cubic-bezier(.22, .61, .36, 1), box-shadow .34s cubic-bezier(.22, .61, .36, 1);
  }

  .cdk-card:hover {
    --cdk-lift: -5px;
    box-shadow: 0 16px 30px rgba(20, 16, 32, .15);
  }

  .cdk-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  .cdk-card:hover .cdk-card__img { transform: scale(1.045); }

  .cdk-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 9, 12, 0) 46%, rgba(10, 9, 12, .30) 66%, rgba(10, 9, 12, .82) 100%);
  }

  .cdk-card__meta {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: block;
  }

  .cdk-card__country {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: rgba(22, 20, 26, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .94);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }

  .cdk-card__name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
  }

  .cdk-card__verified { flex: 0 0 auto; color: var(--cdk-coral); }

  .cdk-card__role {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .82);
    font-size: 12.5px;
    font-weight: 500;
  }

  /* A short elastic acknowledgement of the tap. The endpoints are written
     against --cdk-lift, so the card settles back into whatever state it is in
     (hovered or not) instead of snapping when the class is removed. */
  @keyframes cdk-select {
    0%   { transform: translateY(var(--cdk-lift)) scale(1); }
    32%  { transform: translateY(calc(var(--cdk-lift) + 3px)) scale(.976); }
    66%  { transform: translateY(calc(var(--cdk-lift) - 4px)) scale(1.014); }
    100% { transform: translateY(var(--cdk-lift)) scale(1); }
  }

  .cdk-card.is-selected,
  .cdk-ai__card.is-selected {
    animation: cdk-select 420ms cubic-bezier(.34, 1.32, .5, 1);
  }

  .cdk-card:focus-visible,
  .cdk-ai__card:focus-visible {
    outline: 2px solid var(--cdk-coral);
    outline-offset: 4px;
  }

  /* --- AI creators ------------------------------------------------------- */
  .cdk-ai {
    padding: 26px 0 56px;
    background: var(--cdk-panel);
    scroll-margin-top: 104px;
  }

  .cdk-ai__panel {
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(0, 1.42fr);
    align-items: stretch;
    gap: 28px;
    padding: 14px;
    border-radius: 26px;
    background:
      radial-gradient(120% 150% at 0% 0%, #e5dffa 0%, #eee9fb 42%, #f7f4fc 72%, #fbfaff 100%);
  }

  .cdk-ai__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 18px 0 18px 26px;
  }

  .cdk-eyebrow--lilac { color: var(--cdk-lilac); margin-bottom: 18px; }

  .cdk-ai__title {
    margin: 0;
    color: var(--cdk-ink);
    font-size: clamp(2.4rem, 3.1vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1.02;
  }

  /* "Digital" is the one editorial accent in the headline: the script face,
     a soft lavender, a touch larger than the sans so the two read as one
     line rather than two sizes. line-height is pinned to 1 so the taller
     glyphs cannot open up the headline's leading. No glow, no shadow, no
     motion. */
  .cdk-ai__title .cdk-ai__digital {
    position: relative;
    top: .05em;
    margin: 0 .04em 0 .1em;
    color: var(--cdk-lilac-soft);
    font-family: 'Allura', 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.34em;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .012em;
    text-shadow: none;
  }

  /* Allura is Latin/Latin-Ext/Vietnamese only. Where the translated word is
     Cyrillic, CJK, Thai or Arabic it correctly falls back to the sans — and
     the optical size tuned for a script's small x-height is far too large
     there, so those languages get the sans-appropriate size instead. i18n.js
     stamps lang-<code> on <html>, which is what selects them. */
  html.lang-ru .cdk-ai__title .cdk-ai__digital,
  html.lang-ko .cdk-ai__title .cdk-ai__digital,
  html.lang-ja .cdk-ai__title .cdk-ai__digital,
  html.lang-zh .cdk-ai__title .cdk-ai__digital,
  html.lang-tw .cdk-ai__title .cdk-ai__digital,
  html.lang-th .cdk-ai__title .cdk-ai__digital,
  html.lang-ar .cdk-ai__title .cdk-ai__digital {
    top: 0;
    margin: 0 0 0 .04em;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: inherit;
  }

  .cdk-ai__lede {
    max-width: 22em;
    margin: 20px 0 0;
    color: #4b4b55;
    font-size: 15.5px;
    line-height: 1.5;
  }

  .cdk-ai__cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .cdk-ai__card {
    --cdk-lift: 0px;
    position: relative;
    display: block;
    height: clamp(268px, 20vw, 330px);
    overflow: hidden;
    border-radius: 15px;
    background: #ded9dd;
    color: #fff;
    text-decoration: none;
    transform: translateY(var(--cdk-lift));
    transition: transform .34s cubic-bezier(.22, .61, .36, 1), box-shadow .34s cubic-bezier(.22, .61, .36, 1);
  }

  .cdk-ai__card:hover {
    --cdk-lift: -5px;
    box-shadow: 0 16px 30px rgba(40, 26, 80, .18);
  }

  .cdk-ai__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  .cdk-ai__card:hover img { transform: scale(1.045); }

  .cdk-ai__card-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 10, 16, 0) 52%, rgba(12, 10, 16, .74) 100%);
  }

  .cdk-ai__card-copy {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 18px;
  }

  .cdk-ai__card-copy strong {
    display: block;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  .cdk-ai__card-copy span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .84);
    font-size: 12.5px;
    font-weight: 500;
  }

  /* --- wide desktop -------------------------------------------------------- */
  /* The belt is full-bleed at every width; on very wide screens the shell
     opens with it so the AI panel keeps the reference's near-full-width
     proportion instead of shrinking into the middle. */
  @media (min-width: 1600px) {
    body.models-page { --cdk-shell: min(100% - 128px, 1560px); }
  }

  /* --- narrow desktop ----------------------------------------------------- */
  @media (max-width: 1279.98px) {
    body.models-page { --cdk-shell: min(100% - 64px, 1140px); }
    /* Scrolled bar is ~140px here instead of 71px, so both the hero copy and
       the panel heading open up by the same difference. */
    .cdk-hero { padding-top: 176px; }
    .cdk-all { padding-top: 164px; }
    .cdk-ai__panel { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.2fr); }
    .cdk-ai__copy { padding-left: 16px; }
    .cdk-search { width: 200px; }
    .cdk-filter { padding: 0 16px; }
  }

  @media (max-width: 1099.98px) {
    .cdk-all__head { flex-wrap: wrap; }
    .cdk-all__controls { width: 100%; justify-content: flex-start; }
    .cdk-ai__panel { grid-template-columns: minmax(0, 1fr); }
    .cdk-ai__copy { padding: 12px 10px 4px; }
  }

  /* --- reduced motion ----------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .cdk-marquee.is-running .cdk-marquee__track { animation: none; }

    .cdk-card,
    .cdk-ai__card,
    .cdk-card__img,
    .cdk-ai__card img { transition: none; }

    .cdk-card:hover,
    .cdk-ai__card:hover { --cdk-lift: 0px; }

    .cdk-card:hover .cdk-card__img,
    .cdk-ai__card:hover img { transform: none; }

    .cdk-card.is-selected,
    .cdk-ai__card.is-selected { animation: none; }
  }
}