/* ============================================================================
   Klipist — touch.css
   App-like tap feedback (press states) and hover-guard for touch devices.
   Loaded site-wide after chrome.css, filemtime-
   versioned so it auto-busts. marker: klipist_touch
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Global touch hygiene
   --------------------------------------------------------------------------- */
body.klipist-redesign { -webkit-tap-highlight-color: transparent; }

body.klipist-redesign :is(
  a, button, [role="button"],
  .tile, .original-tile, .mh-pill, .mh-logo, .mf-logo,
  .mh-icon-btn, .mh-btn, .mh-menu-btn, .header-icon-btn, .header-menu-btn,
  .btn-play, .btn-mylist, .see-all, .mh-see-all,
  .credit-link, .a-credit-link, .menu-item, .vb-film-row, .vb-social-link
){ touch-action: manipulation; }

/* ---------------------------------------------------------------------------
   2. Press feedback. Scale gives a tactile press on (almost) everything. On
      dark / image elements we add a brightness LIFT (it pops). On transparent
      chrome (nav pills, header icons, share + add-to-list buttons) brightness
      is invisible because they're white-on-dark, so those get a peach
      background WASH instead. Pills skip the scale: they live in an
      overflow-x scroller that clips vertically, so a transform crops their top
      border — the wash alone is their feedback. Transitions are added only
      where the element had none, to avoid clobbering existing hover ones.
   --------------------------------------------------------------------------- */

/* transitions (multi-prop so we animate the press without clobbering existing
   hover colour/bg transitions) */
@media (prefers-reduced-motion: no-preference){
  body.klipist-redesign :is(
    .tile, .original-tile, .mh-icon-btn, .mh-btn, .mh-menu-btn,
    .header-icon-btn, .header-menu-btn, .mh-logo, .mf-logo,
    .b-social, .b-icon-square, .mh-btn-list,
    .taxo-tile, .ab-tile, .collection-card, .col-more-tile, .sm-film-tile,
    .menu-item, .site-nav a
  ){ transition: transform .12s ease, filter .12s ease, background-color .14s ease, border-color .14s ease, color .14s ease; }
}

/* SCALE press — tactile on everything EXCEPT pills (clip in the scroller) */
@media (prefers-reduced-motion: no-preference){
  body.klipist-redesign :is(
    .tile, .original-tile, .mh-icon-btn, .mh-btn, .mh-menu-btn,
    .header-icon-btn, .header-menu-btn, .btn-play, .btn-mylist, .see-all,
    .mh-see-all, .credit-link, .a-credit-link, .menu-item, .vb-film-row,
    .vb-social-link, .b-social, .b-icon-square, .mh-btn-list,
    .taxo-tile, .ab-tile, .collection-card, .col-more-tile, .sm-film-tile,
    .site-nav a
  ):active{ transform: scale(.97); }
}

/* BRIGHTNESS lift — dark / image / gradient elements where it actually shows */
body.klipist-redesign :is(
  .tile, .original-tile, .btn-play, .btn-mylist, .see-all, .mh-see-all,
  .credit-link, .a-credit-link, .vb-film-row, .vb-social-link,
  .taxo-tile, .ab-tile, .collection-card, .col-more-tile, .sm-film-tile
):active{ filter: brightness(1.18); }

/* BACKGROUND wash — transparent / white-on-dark chrome lights up on tap */
body.klipist-redesign :is(
  .mh-icon-btn, .mh-btn, .mh-menu-btn, .header-icon-btn,
  .header-menu-btn, .menu-item, .b-social, .b-icon-square, .mh-btn-list
):active{ background-color: rgba(230, 200, 189, .2); border-color: var(--accent, #e6c8bd); }

/* Nav pills — the primary mobile browse row. Deliberate press: scales in and
   lights up fully (peach fill + border + text). The nav gets top padding so the
   border can't clip against the overflow-x scroller's top edge (the "cut off"),
   and the press uses a clean ease (no overshoot → never grows past full size). */
body.klipist-redesign .mh-pill-nav{ padding-top: 6px; }
body.klipist-redesign .mh-pill{
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference){
  body.klipist-redesign .mh-pill:active{ transform: scale(.92); }
}
body.klipist-redesign .mh-pill:active{
  background-color: rgba(230, 200, 189, .22);
  border-color: var(--accent, #e6c8bd);
  color: var(--accent, #e6c8bd);
}

/* logos — gentle scale + brightness pop */
body.klipist-redesign :is(.mh-logo, .mf-logo):active{ filter: brightness(1.3); }
@media (prefers-reduced-motion: no-preference){
  body.klipist-redesign :is(.mh-logo, .mf-logo):active{ transform: scale(.94); }
}

/* ---------------------------------------------------------------------------
   3. Hover-guard sweep — on touch devices, kill the hover "grow"/shift so it
      can never stick after a tap. Only :active press feedback shows on touch;
      desktop (hover: hover) is unaffected. Selector set = every transform-on-
      hover rule found in the audit.
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(
    .taxo-tile, .ab-tile, .col-more-tile, .collection-card, .sm-film-tile,
    .submission-wall-cta, .m-submission-wall-cta, .ld-store-badge, .kl-to-top,
    .kl-auth-cta, .sm-btn-secondary, .menu-item, .see-all, .mh-see-all,
    .credit-link, .a-credit-link, .vb-film-row, .btn-play, .btn-mylist
  ):hover{ transform: none !important; }

  body.klipist-redesign :is(
    .col-film-row:hover .col-film-thumb-img,
    .col-film-row:hover .col-film-thumb-play svg,
    .ld-btn:hover .ld-btn-arr,
    .ld-explore-cell:hover .ld-explore-arr,
    .kl-auth-cta:hover svg
  ){ transform: none !important; }
}

/* ---------------------------------------------------------------------------
   5. Row scrollers — a near-vertical swipe that starts on a horizontal film row
      gets captured by the row (rubber-bands / drags the whole strip) instead of
      scrolling the page, so you get stuck. The row scrollers are overflow-x:auto,
      which makes the browser compute overflow-y:auto too; removing the vertical
      scroll axis lets the browser's native axis-lock send vertical swipes to the
      page while horizontal row scrolling still works.
      NB: touch-action is left at default on purpose — touch-action:pan-x on the
      row would block vertical PAGE scrolling for gestures that begin on it.
      Touch devices only; desktop rows live in a separate wrap. marker: klipist_row_panx
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(.mh-row-scroller, .mh-taxo-scroller){
    overflow-y: hidden;
  }
  /* originals tiles carry a drop shadow (0 8px 30px) — give it room inside the
     clip box, then pull the box back so row spacing is unchanged. */
  body.klipist-redesign .mh-row-scroller-originals{
    padding-top: 24px; padding-bottom: 40px;
    margin-top: -24px; margin-bottom: -40px;
  }
}

/* ---------------------------------------------------------------------------
   6. My List (/watchlist/) + Collections (/collections/) mobile pill-bar horizontal scroll.
      The logged-out empty state wraps its pills in .com-wrap, which is
      position:relative — and the .collection-overview-page article is too —
      both sitting under the global article{overflow:clip}. On iOS, a horizontal
      scroller nested under a positioned + clip ancestor loses touch-scroll: it
      overflows and nothing covers it, but the swipe is captured by the page
      (catches only intermittently). It's the same reason CSS position:sticky
      fails here (the sticky pills are pinned via JS position:fixed instead) and
      the same reason the PINNED pills DO scroll — fixed escapes the whole stack.
      Every other page's pills live in a STATIC .mh-wrap under a STATIC article,
      so they scroll fine. Fix: make the My List mobile wrap + article static so
      the ancestor chain matches the working pages (confirmed on-device via an
      ancestor-chain diagnostic). Safe on mobile — the desktop col-backdrop that
      needs the article positioned is display:none there, and the empty state
      has no backdrop sibling. Supporting bits on the nav: block (the wrap was
      flex; block is visually identical here — no flex-grow/margin:auto),
      overflow-y:hidden (1-D scroller like the film rows), padding-top:8px (the
      wrap lacked .mh-wrap's top padding so the bar sat ~8px high).
      marker: klipist_pillnav_static
   --------------------------------------------------------------------------- */
body.klipist-redesign .com-wrap .mh-pill-nav{ min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
body.klipist-redesign .co-page .home-mobile-wrap .com-wrap{ display: block; position: static; padding-top: 8px; }
@media (max-width: 1024px){
  body.klipist-redesign article.co-page{ position: static !important; }
}

/* ---------------------------------------------------------------------------
   7. App Store / Play Store wrapped app only. The store binary has a
      #121616 status-bar/notch colour baked in at build time (changing it needs
      a store reupload). Detection: html.kl-storeapp, set in header.php when
      navigator.standalone===true AND display-mode is NOT standalone — a combo
      unique to the store WebView wrapper (home-screen PWA = standalone+standalone,
      mobile Safari = neither). So paint the STICKY pinned pill bar (the one that
      appears once you scroll) #121616 there to match the notch, while mobile web
      + home-screen PWA keep the page's #160000. The logo header is left as-is.
      marker: klipist_storeapp_bar
   --------------------------------------------------------------------------- */
html.kl-storeapp body.klipist-redesign .mh-pill-nav.kl-pinned { background: #121616 !important; }

/* ---------------------------------------------------------------------------
   8. Mobile/PWA/app logo header spacing, across all pages: a bit more room
      ABOVE the klipist logo (top 14px -> 22px; env() keeps any notch inset on
      top), and a bit less BELOW it so the logo sits closer to the pill nav
      (bottom 14px -> 8px). marker: klipist_topbar_pad
   --------------------------------------------------------------------------- */
@media (max-width: 1024px){
  body.klipist-redesign .mh-topbar{
    padding-top: calc(22px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 8px !important;
  }
}

/* ---------------------------------------------------------------------------
   9. First pill left-alignment with the logo. The mobile pill nav has a 16px
      ::before scroll-edge spacer + 8px flex gap, so the first pill lands at 24px,
      while the logo (.mh-topbar padding-left) and page content sit at 20px. Trim
      the leading spacer to 12px (12 + 8px gap = 20px) so the first pill's left
      edge lines up with the logo. ::after (trailing) stays 16px for end breathing
      room. marker: klipist_pill_align
   --------------------------------------------------------------------------- */
body.klipist-redesign .mh-pill-nav::before{ flex: 0 0 12px !important; width: 12px !important; }

/* ---------------------------------------------------------------------------
   10. A little breathing room above the mobile masthead (.mh-hero) so it isn't
       jammed against the pill nav. Applies to the home-style mobile pages that
       carry .mh-hero (films, collections, my list). Mobile only; the desktop
       wrap uses a different masthead. marker: klipist_hero_top
   --------------------------------------------------------------------------- */
@media (max-width: 1024px){
  body.klipist-redesign .mh-hero{ margin-top: 8px; }
}

/* ---------------------------------------------------------------------------
   11. True-app touch: kill the iOS long-press callout (the "Copy / Share image…"
       menu) and text selection on UI chrome — tiles, posters, nav pills, bottom
       nav, logos, buttons. Real copy (synopsis, credits, headings) and inputs
       stay selectable because they're not in this list. Also stop the drag-ghost
       on tile/poster images. Touch devices only. marker: klipist_no_callout
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(
    a, button, [role="button"], .mh-pill, .kn-item, .kn-label,
    .tile, .original-tile, .taxo-tile, .ab-tile, .collection-card,
    .col-more-tile, .sm-film-tile, .mh-logo, .mf-logo,
    .mh-icon-btn, .mh-btn, .mh-menu-btn, .header-icon-btn, .header-menu-btn,
    .btn-play, .btn-mylist, .see-all, .mh-see-all, .menu-item, .mh-btn-list,
    .b-social, .b-icon-square, .vb-social-link
  ){ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

  body.klipist-redesign :is(
    .tile, .original-tile, .taxo-tile, .ab-tile, .collection-card,
    .sm-film-tile, .mh-hero, .still, .mh-logo, .mf-logo
  ) img{ -webkit-user-drag: none; }
}

/* ---------------------------------------------------------------------------
   12. Instant tab feedback. Native tab bars move the highlight the moment you
       tap; ours waited for the (sometimes slow) /films/ page to paint, so a tap
       felt dead. JS (klipist-links.js, kl_nav_feedback) now moves the active
       highlight to the tapped target instantly — .is-active for bottom-nav tabs,
       .mh-pill-active for category pills (both lit by their existing styles). The
       only thing here is a gentle "working" pulse on the tapped bottom-nav icon,
       on an animation DELAY so it shows ONLY if the load is actually slow (no
       flash on fast/cached navs — why the old top progress bar was pulled).
       NB: deliberately NO opacity dim on tapped links/pills — a held dim made the
       pill look like it went dark instead of lighting up on the heavy /films/
       page. marker: klipist_nav_loading
   --------------------------------------------------------------------------- */
@keyframes klNavLoadPulse{ 0%,100%{ opacity: .5; } 50%{ opacity: 1; } }
body.klipist-redesign .kn-item.kl-navloading .kn-ico{
  animation: klNavLoadPulse .8s ease-in-out .32s infinite;
}
@media (prefers-reduced-motion: reduce){
  body.klipist-redesign .kn-item.kl-navloading .kn-ico{ animation: none; }
}

/* Film-page tap targets that navigate but had no held tap state, so a tap felt
   dead during the load: term pills (.a-pill = Director/Country/Language/Subtitles,
   .b-tag = Genre/Mood), the round back button (.kl-mback, runs history.back()),
   the hero genre pill (.b-hero-primary-genre / .hero-primary-genre) and the
   "More by <director>" pill (.b-share-filmmaker-more / .share-filmmaker-more) —
   all already peach-accent pills, so .kl-lit just intensifies the wash. Added on
   pointerdown by kl_nav_feedback, reverted on scroll/cancel, held through the nav. */
body.klipist-redesign .a-pill.kl-lit,
body.klipist-redesign .b-tag.kl-lit,
body.klipist-redesign .kl-mback.kl-lit,
body.klipist-redesign .b-hero-primary-genre.kl-lit,
body.klipist-redesign .hero-primary-genre.kl-lit,
body.klipist-redesign .b-share-filmmaker-more.kl-lit,
body.klipist-redesign .share-filmmaker-more.kl-lit{
  background-color: rgba(230, 200, 189, .22) !important;
  border-color: var(--accent, #e6c8bd) !important;
  color: var(--accent, #e6c8bd) !important;
}

/* Film tiles/cards: tapping one navigates to the (slowish) watch page, so give a
   held "light up" — the poster brightens and stays lit through the load, instead
   of the old quick press that snapped back abruptly. Mobile home tiles (.mh-tile)
   had NO tap feedback at all before this. Gentle brighten + a short eased
   transition so a swipe that merely starts on a tile barely registers before
   pointercancel reverts it. */
body.klipist-redesign .tile.kl-lit,
body.klipist-redesign .original-tile.kl-lit,
body.klipist-redesign .mh-tile.kl-lit,
body.klipist-redesign .mh-t9-tile.kl-lit,
body.klipist-redesign .mh-orig-tile.kl-lit,
body.klipist-redesign .sm-film-tile.kl-lit,
body.klipist-redesign .smm-film.kl-lit,
body.klipist-redesign .b-more-row.kl-lit{
  filter: brightness(1.18) saturate(1.07);
  transition: filter .16s ease, transform .16s ease;
}

/* Tiles on TOUCH: the desktop press-scale (scale .97 in section 2) reads as an
   abrupt "grow" when it fires on a tap. Drop it on touch and use a dedicated
   touch effect instead — the brighten above PLUS a gentle poster zoom: the tile
   FRAME stays put while the .still poster scales inside its overflow-hidden art
   (Ken Burns), held through the watch-page load. Desktop keeps its scale press
   untouched. marker: klipist_tile_touch */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(.tile, .original-tile, .mh-tile, .mh-t9-tile, .mh-orig-tile, .sm-film-tile, .smm-film, .b-more-row):active{ transform: none !important; filter: brightness(1.18) saturate(1.07); }
  body.klipist-redesign :is(.tile, .original-tile, .mh-tile, .mh-t9-tile, .mh-orig-tile, .sm-film-tile, .smm-film).kl-lit .still{
    transform: scale(1.06);
    transition: transform .3s ease;
  }
}

/* ---------------------------------------------------------------------------
   App-like page transition — on internal navigations the content (the page
   <article>) eases IN smoothly instead of hard-appearing ("jump"). Reliable,
   JS-driven (no View Transitions API — iOS / older browsers lack it). The first
   page of a session still gets the cinematic entrance; subsequent navs get this
   quick whole-content fade. Chrome (header, bottom nav) sits outside <article>
   so it stays put — only the content crossfades. marker: klipist_xfade
   --------------------------------------------------------------------------- */
body.klipist-redesign article{ transition: opacity .34s ease; }
html.kl-xfade body.klipist-redesign article{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  body.klipist-redesign article{ transition: none; }
  html.kl-xfade body.klipist-redesign article{ opacity: 1; }
}

/* ---------------------------------------------------------------------------
   13. Lazy row rendering on the long home/films page. /films/ stacks ~50 film
       rows into a ~20000px page, and the browser was laying out + painting +
       fetching the background-image posters for EVERY row up front. The posters
       are CSS background-images on .still (not <img>), so loading="lazy" can't
       reach them — content-visibility:auto does: it skips offscreen rows entirely
       (no layout / paint / poster fetch) until you scroll near them, so the page
       paints + becomes interactive almost immediately and posters load on
       approach. contain-intrinsic-size reserves an estimated height so the
       scrollbar stays stable (the `auto` keyword makes the browser remember each
       row's real size after it has rendered once). Heroes (.mh-hero / .hero) are
       NOT rows, so they always render. Browsers without content-visibility
       (older iOS) just ignore it — no harm, no change. marker: klipist_cv_rows
   --------------------------------------------------------------------------- */
body.klipist-redesign .home-mobile-wrap .mh-row{
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
body.klipist-redesign .home-mobile-wrap .mh-row.mh-taxonomy{
  contain-intrinsic-size: auto 300px;
}
body.klipist-redesign .home-desktop-wrap .row{
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

/* ---------------------------------------------------------------------------
   14. Landing page (front-page.php, .ld-page) CTAs + store badges. On DESKTOP
       the hover lift (translateY -2px) + colour shift looks great — left as is.
       But .ld-btn was never in the touch hover-guard, so on touch a tap triggers
       :hover and the button stays LIFTED + recoloured (sticky hover), and there
       was no real press feedback. On touch we drop the desktop hover entirely and
       use a dedicated press instead: a quick scale-in + a surface-tuned tint per
       variant (white darkens, dark/badge lift, accent brightens, ghost gets a
       peach wash). Touch only — desktop untouched. marker: klipist_landing_touch
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(.ld-btn, .ldm-btn, .ld-store-badge, .ldm-store-badge){
    transition: transform .14s ease, filter .16s ease, background .2s ease, border-color .2s ease;
  }
  /* neutralise the sticky desktop hover (lift + colour change) on touch */
  body.klipist-redesign :is(.ld-btn, .ldm-btn, .ld-store-badge, .ldm-store-badge):hover{ transform: none; }
  body.klipist-redesign :is(.ld-btn-light, .ldm-btn-light):hover{ background: rgba(255,255,255,.94); }
  body.klipist-redesign :is(.ld-btn-dark, .ldm-btn-dark):hover{ background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.22); }
  body.klipist-redesign :is(.ld-btn-accent, .ldm-btn-accent):hover{ background: var(--accent); }
  body.klipist-redesign :is(.ld-btn-ghost, .ldm-btn-ghost):hover{ border-color: rgba(230,200,189,.28); color: var(--accent-2, #F7E0D3); }

  /* the press */
  body.klipist-redesign :is(.ld-btn, .ldm-btn):active{ transform: scale(.96); }
  body.klipist-redesign :is(.ld-store-badge, .ldm-store-badge):active{ transform: scale(.95); filter: brightness(1.14); }
  body.klipist-redesign :is(.ld-btn-light, .ldm-btn-light):active{ filter: brightness(.92); }
  body.klipist-redesign :is(.ld-btn-dark, .ldm-btn-dark):active{ filter: brightness(1.4); }
  body.klipist-redesign :is(.ld-btn-accent, .ldm-btn-accent):active{ filter: brightness(1.08); }
  body.klipist-redesign :is(.ld-btn-ghost, .ldm-btn-ghost):active{ background-color: rgba(230,200,189,.16); border-color: var(--accent, #e6c8bd); }
}
/* ============================================================================
   15. SITE-WIDE TOUCH COHERENCE. From a full per-page audit (see local
       TOUCH-AUDIT.md): every linking/clickable element gets a press that's
       consistent by element TYPE, and NO desktop hover lift bleeds onto mobile.
       touch.css section 2 already presses a core set (tiles, main buttons, icon
       buttons, vb rows, some links/cards) — this block fills the GAPS (page-
       specific families gp-*/sf-*/ab-*/pt-*/hp-*/sm-*/col-*/footer/menu/auth/
       checkout) + a complete hover-guard. Touch only — desktop untouched.
       marker: klipist_touch_coherence
   ============================================================================ */
@media (hover: none) and (pointer: coarse){

  /* 15.0 smooth, snappy presses for everything this block touches */
  body.klipist-redesign :is(
    .gp-pill,.credits-pill,.tag,.sf-pill,.sfm-cat-chip,.sfm-active-chip,.gp-moodchip,.gpm-moodchip,
    .menu-store,.footer-app-pill,.mf-app-pill,.ab-plat-pill,.abm-plat-pill,.hp-app-link,.hpm-app-link,
    .m-btn-play,.btn-share,.col-action,.ab-btn,.abm-btn,.sm-btn,.smm-btn,.pt-become-cta,.ptm-become-cta,
    .pt-btn,.hp-btn,.header-submit,.menu-auth-btn,.menu-overlay-close,.sfm-sheet-close,.sfm-sheet-apply,
    .gp-genre-more,.gpm-more,.gp-moodfilter-nav,.sf-grp-toggle,.sf-filter-head,.kl-auth-cta,
    .checkout_coupon .button,.footer-social-dot,.mf-social-dot,.row-arrow,.thwcfe-remove-uploaded,
    .sm-faq-q,.smm-faq-q,.b-social-primary,.b-social-more,.social,
    .mc-more-card,.ab-maker-cta-card,.ab-final-card,.abm-maker-cta,.abm-final-card,.pt-crosslink-card,
    .ptm-crosslink-card,.hp-crosslink-card,.menu-profile-row,.menu-submit-row,.col-film-row,.mc-film-row,
    .b-more-row,.kl-upload,.kl-upload-field,
    .crumbs a,.gp-topcrumbs a,.gp-breadcrumbs a,.gp-mast-crumb a,.sm-films-link,.footer-col a,
    .footer-meta a,.mf-legal a,.menu-legal a,.ext-link,.a-ext-link,.vb-platform-cta,.taxo-nav-link,
    .hp-contact-mail,.sm-team-link,.sm-faq-email,.pt-card-cta,.ptm-card-cta,.hp-card-cta,.col-film-more,
    .mc-film-more,.sm-about-promo-cta,.wordmark,.menu-overlay-wordmark
  ){ transition: transform .12s ease, opacity .12s ease, filter .14s ease, background-color .14s ease, border-color .14s ease; }

  /* 15.1 HOVER-GUARD — kill EVERY desktop hover transform/lift so nothing sticks on touch */
  body.klipist-redesign :is(
    .ab-btn,.ab-btn-primary,.ab-btn-ghost,.ab-plat-pill,.ab-maker-cta-card,.ab-team-card,.ab-final-card,.ab-tile,
    .pt-crosslink-card,.pt-card,.hp-crosslink-card,.hp-card,.sm-btn,.sm-btn-primary,.sm-btn-secondary,.sm-film-tile,.sm-vc,
    .vb-film-row,.vb-platform-cta,.header-submit,.col-action-primary,.collection-card,.col-more-tile,.taxo-tile,
    .submission-wall-cta,.m-submission-wall-cta,.menu-profile-row,.menu-submit-row,.menu-store,.ab-maker-cta,.ld-explore-cell,.ldm-explore-cell
  ):hover{ transform: none !important; }
  body.klipist-redesign .kl-checkout-page #place_order:hover{ transform: none !important; }
  body.klipist-redesign :is(.vb-film-row:hover .vb-film-arrow, .kl-auth-cta:hover svg){ transform: none !important; }
  body.klipist-redesign .kl-auth-form button[name="armFormSubmitBtn"]:hover,
  body.klipist-redesign .kl-auth-form .arm-df__form-control-submit-btn:hover{ transform: none !important; }
  body.klipist-redesign .kl-auth-form button[name="armFormSubmitBtn"]:hover::after,
  body.klipist-redesign .kl-auth-form .arm-df__form-control-submit-btn:hover::after{ transform: none !important; }

  /* 15.2 PILLS / TAGS / CHIPS — peach wash (matches the nav pills + film tags) */
  body.klipist-redesign :is(
    .gp-pill,.credits-pill,.tag,.sf-pill,.sfm-cat-chip,.sfm-active-chip,.gp-moodchip,.gpm-moodchip,
    .menu-store,.footer-app-pill,.mf-app-pill,.ab-plat-pill,.abm-plat-pill,.hp-app-link,.hpm-app-link
  ):active{ background-color: rgba(230,200,189,.22) !important; border-color: var(--accent,#e6c8bd) !important; }

  /* 15.3 BUTTONS / ICON BUTTONS / CTAs — press-in (scale) + fade (opacity): universal & coherent */
  body.klipist-redesign :is(
    .m-btn-play,.btn-share,.col-action,.col-action-primary,.col-action-icon,.ab-btn,.abm-btn,.sm-btn,.smm-btn,
    .pt-become-cta,.ptm-become-cta,.pt-btn,.hp-btn,.header-submit,.menu-auth-btn,.menu-auth-primary,.menu-auth-secondary,
    .menu-overlay-close,.sfm-sheet-close,.sfm-sheet-apply,.gp-genre-more,.gpm-more,.gp-moodfilter-nav,.sf-grp-toggle,
    .sf-filter-head,.kl-auth-cta,.checkout_coupon .button,.footer-social-dot,.mf-social-dot,.row-arrow,
    .thwcfe-remove-uploaded,.sm-faq-q,.smm-faq-q,.sm-faq-toggle,.smm-faq-toggle,.arm-df__fc-icon,
    .b-social-primary,.b-social-more,.social,.social-icon-only,.social-more
  ):active{ transform: scale(.97); opacity: .8; }
  body.klipist-redesign :is(.kl-auth-form button[name="armFormSubmitBtn"],.kl-auth-form .arm-df__form-control-submit-btn):active,
  body.klipist-redesign .kl-checkout-page #place_order:active{ transform: scale(.98); opacity: .85; }

  /* 15.4 LINK CARDS — gentle press-in + brightness lift */
  body.klipist-redesign :is(
    .mc-more-card,.ab-maker-cta-card,.ab-final-card,.abm-maker-cta,.abm-final-card,.pt-crosslink-card,
    .ptm-crosslink-card,.hp-crosslink-card,.menu-profile-row,.menu-submit-row,.col-film-row,.mc-film-row,
    .b-more-row,.kl-upload,.kl-upload-field
  ):active{ transform: scale(.99); filter: brightness(1.08); }

  /* 15.6 TEXT LINKS — quiet fade (no scale → text never jumps) */
  body.klipist-redesign :is(
    .crumbs a,.gp-topcrumbs a,.gp-breadcrumbs a,.gp-mast-crumb a,.sm-films-link,.footer-col a,.footer-meta a,
    .mf-legal a,.menu-legal a,.ext-link,.a-ext-link,.vb-platform-cta,.taxo-nav-link,.sf-active-chip-clear,
    .hp-contact-mail,.sm-team-link,.sm-team-band-link,.sm-faq-email,.pt-card-cta,.ptm-card-cta,.hp-card-cta,
    .hpm-card-cta,.kl-auth-altline a,.arm_forgotpassword_link a,.kl-auth-danger a,.col-film-more,.mc-film-more,
    .sm-about-promo-cta,.wordmark,.menu-overlay-wordmark
  ):active{ opacity: .55; }
}

/* ---------------------------------------------------------------------------
   16. Tile hover-guard. The shared chrome.css lift
       `:is(.tile,.top9-art,.original-tile,.taxo-tile,.genre-tile-v3,.mood-tile-v3,
       .collection-card,.col-more-tile):hover{ translateY(-4px) }` left the DESKTOP
       film tiles (.tile/.original-tile/.top9-art/.genre-tile-v3/.mood-tile-v3)
       unguarded, so on touch they lifted and STUCK on tap — the tile "grow" (the
       film page "more like this" .more-grid .tile, and touch tablets at desktop
       width). Kill it on touch; the touch effect is the brighten + poster zoom
       (sections tile_touch + 15). marker: klipist_tile_hoverguard
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(.tile,.top9-art,.original-tile,.genre-tile-v3,.mood-tile-v3,.taxo-tile,.mh-tile,.mh-t9-tile,.mh-orig-tile,.mh-taxo-tile,.mh-taxo-tile-mood,.sm-film-tile,.smm-film):hover{ transform: none !important; }
}

/* ---------------------------------------------------------------------------
   17. Coverage gap-fills (from the per-page el.matches audit). Small set of
       linking elements that no earlier rule reached. Touch only.
       marker: klipist_touch_gapfill
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  /* genre/mood ROW tiles on mobile /films/ — gradient tiles; match the desktop taxo-tile press */
  body.klipist-redesign :is(.mh-taxo-tile,.mh-taxo-tile-mood):active{ transform: scale(.97); filter: brightness(1.12); transition: transform .12s ease, filter .14s ease; }
  /* submission-wall CTAs (buttons) + the hidden-on-mobile back-to-top (tablets) */
  body.klipist-redesign :is(.submission-wall-cta,.m-submission-wall-cta,.kl-to-top):active{ transform: scale(.97); opacity: .85; transition: transform .12s ease, opacity .12s ease; }
  /* footer / chrome brand logo mark */
  body.klipist-redesign :is(.footer-brand .mark,.footer .mark,.menu-overlay .mark,.mark):active{ opacity: .55; transition: opacity .12s ease; }
  /* prominent links with no class hook: hero titles, director-name links, terms, ARMember popup link */
  body.klipist-redesign :is(.hero-title a,.b-hero-title a,.mh-hero-title a,.share-filmmaker-name a,.b-share-filmmaker-name a,.woocommerce-terms-and-conditions-link,.arm_form_popup_link):active{ opacity: .6; transition: opacity .12s ease; }
}

/* ---------------------------------------------------------------------------
   18. Inline prose/content links + a few mobile variants. Links inside body
       copy / FAQ answers (klipist.com/..., mailto:, etc.) had no hook — give
       them the same quiet fade as other text links so EVERY link responds.
       Scoped to p/li/dd so it never touches component links (pills/buttons/tiles
       live in divs, not paragraphs). Touch only. marker: klipist_touch_prose
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(p,li,dd,.hp-faq-a,.hpm-faq-a,.sm-faq-a,.smm-faq-a,.faq-a) a[href]:active{ opacity: .55; transition: opacity .12s ease; }
  body.klipist-redesign :is(.hpm-contact-mail,.hpm-card-cta,.ptm-card-cta,.smm-faq-email):active{ opacity: .55; }
  body.klipist-redesign :is(.hpm-crosslink-card,.ptm-crosslink-card,.abm-crosslink-card):active{ transform: scale(.99); filter: brightness(1.08); }
}

/* ---------------------------------------------------------------------------
   19. Final gap-fills. Landing "explore" grid cells (.ld-explore-cell /
       .ldm-explore-cell — link cards) + help meta links (Terms/Privacy in
       .hp-company-val). Touch only. marker: klipist_touch_gapfill2
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(.ld-explore-cell,.ldm-explore-cell):active{ transform: scale(.99); filter: brightness(1.09); transition: transform .12s ease, filter .14s ease; }
  body.klipist-redesign :is(.hp-company-val a,.hpm-company-val a):active{ opacity: .55; transition: opacity .12s ease; }
}

/* ---------------------------------------------------------------------------
   20. Accordions. Native <summary> toggles (help/landing/term/collection FAQs:
       .hp-faq-q/.hpm-faq-q/.ldm-faq-q/.gp-faq-q) had NO touch feedback — the
       earlier coverage audit only queried a/button/[role=button], so it skipped
       every <summary>. The JS toggles (.sm-faq-q/.sf-grp-toggle) had a button
       press. Give them all ONE coherent press: a peach wash on the question row +
       label/chevron → accent (no scale — rows shouldn't jump). marker: klipist_accordions
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.klipist-redesign :is(
    summary, .hp-faq-q, .hpm-faq-q, .ld-faq-q, .ldm-faq-q, .gp-faq-q,
    .sm-faq-q, .smm-faq-q, .sm-faq-toggle, .smm-faq-toggle, .sf-grp-toggle, .sf-filter-head
  ):active{
    background-color: rgba(230,200,189,.07) !important;
    color: var(--accent, #e6c8bd);
    transform: none;
    opacity: 1;
    transition: background-color .14s ease, color .14s ease;
  }
}