/* SHARED COMPONENTS, hoisted out of the page stylesheets.

   The source defines these inside a single page's <style> block, but the
   theme needs them on screens that page's stylesheet is never enqueued on
   - the product card is defined only on the home page and is also the
   WooCommerce catalog card and the related-products card.

   MOVED, not copied, so there is exactly one definition and the catalog
   card cannot drift from the home page band. Loaded on every page.
   Add a selector prefix to SHARED_PREFIXES in bin/port-css.py to hoist
   another component. */


    .faq-group:first-of-type { padding-top: 120px; }

    .faq-group + .faq-group { border-top: 1px dotted var(--rule); }

    .faq-group .group-title {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 44px);
      line-height: 1.05;
      color: var(--ink);
      margin: 0 0 24px;
    }

    .faq-item + .faq-item { border-top: 1px dotted var(--rule); }

    .faq-item summary {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      cursor: pointer;
      list-style: none;
      padding: 20px 4px;
      transition: color 180ms ease;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item summary:hover .faq-q { color: var(--accent); }

    .faq-item summary:hover .faq-icon {
      background: var(--accent);
      color: #fff;
      transform: scale(1.08);
    }


    .faq-q {
      font-family: var(--font-display);
      font-size: clamp(18px, 2vw, 24px);
      line-height: 1.2;
      color: var(--ink);
      transition: color 180ms ease;
    }

    /* Pink active state on the open question */
    .faq-item[open] summary .faq-q { color: var(--accent); }


    .faq-icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 260ms cubic-bezier(.4,0,.2,1), background 200ms ease, color 200ms ease;
    }

    .faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--accent); color: #fff; }

    .faq-item[open] summary:hover .faq-icon { transform: rotate(45deg) scale(1.08); }