.faq {

    details {
      interpolate-size: allow-keywords;

      summary {
        cursor: pointer;
      }

      .tb-arw {
        transition: rotate 0.3s ease, scale 0.3s ease;
      }

      &[open] .tb-arw {
        rotate: 180deg;
      }

      &::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
      }

      &[open]::details-content {
        height: auto;
      }
    }

    /* Hover: the catalog's list-dim (hvr_op-lst fades every sibling to 50%) reads as too
       much for a simple hover — keep siblings at full opacity and signal the hovered row
       with a subtle caret grow instead. Scale composes with the open-state rotate. */
    @media (hover: hover) and (pointer: fine) {

      ul:has(.hvr_op-lst:is(:hover, :focus-visible)) .hvr_op-lst:not(:is(:hover, :focus-visible)) {
        opacity: 1;
      }

      summary:is(:hover, :focus-visible) .tb-arw {
        scale: 1.2;
      }

    }
  }