/* extracted from apps/portal/add-ons.html */
.page-head {
      padding: 8rem var(--gutter) 3.5rem;
      background: var(--paper-2);
      border-bottom: 1px solid var(--line);
    }
    .page-head__inner { max-width: var(--container); margin: 0 auto; }
    .grid-and-rail {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    @media (min-width: 1024px) {
      .grid-and-rail { grid-template-columns: 1fr 22rem; gap: 4rem; align-items: start; }
    }
    .addon-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.75rem;
    }
    @media (min-width: 700px) { .addon-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1280px) { .addon-grid { grid-template-columns: 1fr 1fr 1fr; } }
    .rail-wrap { position: sticky; top: 6rem; }
    @media (max-width: 1023px) { .rail-wrap { position: static; } }
    .cart-total {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 1.25rem;
      margin-top: 0.5rem;
      border-top: 1px solid var(--ink);
    }
    .cart-total__label {
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-soft);
    }
    .cart-total__value {
      font-family: var(--serif);
      font-size: 1.75rem;
    }
    .filter-row {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 2rem;
    }
    .filter-row button {
      background: transparent;
      border: 1px solid var(--line);
      padding: 0.65rem 1.1rem;
      font: inherit;
      font-size: 0.78rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-soft);
      cursor: pointer;
      transition: all 200ms ease;
    }
    .filter-row button:hover { color: var(--ink); border-color: var(--ink); }
    .filter-row button.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }