/* product titles – compact, per client feedback */
    .pcard .name {
      font-family: var(--font-sans);
      font-size: var(--fs-base);
      font-weight: 500;
    }

    /* liked heart on product cards */
    .pcard .wish {
      --liked: 0;

      cursor: pointer;

      .icon {
        fill: rgb(23 25 29 / calc(var(--liked)));
        transition: fill var(--dur-fast);
      }
    }

    /* white studio shots sit on the light product grey */
    .pcard.is-design .media {
      background: var(--product-bg);

      img {
        object-fit: contain;
        mix-blend-mode: multiply;
      }
    }

    .crumbs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      padding-block: var(--space-5);
      font-size: var(--fs-xs);
      letter-spacing: 0.04em;
      color: var(--color-muted);

      li + li::before {
        content: "/";
        margin-right: var(--space-2);
        color: var(--c-mist-300);
      }

      a:hover {
        color: var(--color-text);
      }

      [aria-current] {
        color: var(--color-text);
      }
    }

    /* =========================================================
       Category page
       ========================================================= */
    .cat-hero {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: var(--space-7);
      padding-bottom: var(--space-8);

      .serif {
        font-size: var(--fs-2xl);

        em {
          display: block;
          color: var(--color-text-soft);
        }
      }

      p {
        max-width: 48ch;
        margin-top: var(--space-4);
        color: var(--color-text-soft);
      }

      .facts {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
        margin-top: var(--space-5);
        font-size: var(--fs-sm);
        color: var(--color-text-soft);

        li {
          display: inline-flex;
          align-items: center;
          gap: var(--space-2);
        }

        .icon {
          width: 18px;
          height: 18px;
          color: var(--color-text);
        }
      }

      .art {
        position: relative;
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 100%;
        gap: var(--space-3);
        height: 380px;

        img {
          width: 100%;
          height: 100%;
          min-height: 0;
          object-fit: cover;
        }

        .stack {
          display: grid;
          grid-template-rows: 1fr 1fr;
          gap: var(--space-3);
          height: 100%;
          min-height: 0;

          img {
            min-height: 0;
          }
        }
      }
    }

    .chips {
      display: flex;
      gap: var(--space-2);
      padding-block: var(--space-4);
      overflow-x: auto;
      border-block: 1px solid var(--color-border);
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

      :is(label, a) {
        flex-shrink: 0;
        padding: 8px 16px;
        font-size: var(--fs-xs);
        letter-spacing: 0.06em;
        white-space: nowrap;
        color: var(--color-text-soft);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        cursor: pointer;
        transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);

        &:hover {
          color: var(--color-text);
          border-color: var(--c-mist-300);
        }

        b {
          margin-left: 4px;
          font-weight: 400;
          color: var(--color-muted);
        }
      }
    }

    .catalog {
      display: grid;
      grid-template-columns: 250px 1fr;
      gap: var(--space-7);
      padding-block: var(--space-6) var(--section-y);
    }

    .filters {
      position: sticky;
      top: calc(var(--header-h) + var(--space-5));
      align-self: start;

      .filter-toggle {
        display: none;
      }

      fieldset {
        margin: 0;
        padding: 0 0 var(--space-5);
        border: 0;
        border-bottom: 1px solid var(--color-border);

        & + fieldset {
          padding-top: var(--space-5);
        }
      }

      legend {
        margin-bottom: var(--space-3);
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }

      .opt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: 6px 0;
        font-size: var(--fs-sm);
        color: var(--color-text-soft);
        cursor: pointer;
        transition: color var(--dur-fast);

        &:hover {
          color: var(--color-text);
        }

        b {
          font-weight: 400;
          font-size: var(--fs-xs);
          color: var(--color-muted);
        }
      }

      .check {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 6px 0;
        font-size: var(--fs-sm);
        color: var(--color-text-soft);
        cursor: pointer;

        input {
          width: 16px;
          height: 16px;
          margin: 0;
          accent-color: var(--c-ink-950);
        }
      }

      .stones {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-2);

        label {
          position: relative;
          cursor: pointer;
        }

        input {
          position: absolute;
          opacity: 0;
        }

        img {
          width: 100%;
          aspect-ratio: 1;
          border-radius: 50%;
          outline: 1px solid transparent;
          outline-offset: 3px;
          transition: outline-color var(--dur-fast), transform var(--dur-base) var(--ease-out);
        }

        input:checked + img,
        label:hover img {
          outline-color: var(--c-ink-950);
          transform: scale(1.06);
        }
      }

      .price-range {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--fs-xs);
        color: var(--color-muted);

        input {
          width: 100%;
          padding: 9px 10px;
          font-size: var(--fs-sm);
          border: 1px solid var(--color-border);
          outline: 0;

          &:focus {
            border-color: var(--c-ink-950);
          }
        }
      }
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      margin-bottom: var(--space-5);
      font-size: var(--fs-sm);
      color: var(--color-text-soft);

      .count span {
        display: none;
      }

      .sort {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);

        select {
          padding: 8px 32px 8px 12px;
          font-size: var(--fs-sm);
          background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317191d' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
          border: 1px solid var(--color-border);
          appearance: none;
          outline: 0;
        }
      }
    }

    .catalog .product-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-7) var(--space-5);
    }

    .catalog .pcard[hidden],
    .empty[hidden],
    .pager[hidden],
    .clear-all[hidden] {
      display: none;
    }

    .toolbar .count {
      display: flex;
      align-items: center;
      gap: var(--space-4);

      b {
        font-weight: 600;
        color: var(--color-text);
      }

      .clear-all {
        font-size: var(--fs-xs);
        text-decoration: underline;
        text-underline-offset: 3px;
        color: var(--color-text-soft);

        &:hover {
          color: var(--color-text);
        }
      }
    }

    .empty {
      display: grid;
      justify-items: center;
      gap: var(--space-5);
      padding: var(--space-8) var(--space-5);
      text-align: center;
      background: var(--color-surface-soft);
      border: 1px dashed var(--c-mist-300);

      p {
        max-width: 40ch;
        color: var(--color-text-soft);

        b {
          display: block;
          margin-bottom: var(--space-2);
          font-size: var(--fs-md);
          color: var(--color-text);
        }
      }
    }

    .pager {
      display: flex;
      justify-content: center;
      gap: var(--space-2);
      margin-top: var(--space-8);

      a {
        display: grid;
        place-items: center;
        min-width: 42px;
        height: 42px;
        padding: 0 var(--space-3);
        font-size: var(--fs-sm);
        border: 1px solid var(--color-border);
        transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);

        &:hover {
          border-color: var(--c-ink-950);
        }

        &[aria-current] {
          color: var(--c-white);
          background: var(--c-ink-950);
          border-color: var(--c-ink-950);
        }
      }
    }

    .design-band {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-6);
      margin-bottom: var(--section-y);
      padding: clamp(2rem, 1rem + 3vw, 3.5rem);
      color: #eef1f4;
      background: linear-gradient(90deg, #bfc5cc 0%, #657383 50%, #17191d 100%);

      .serif {
        font-size: var(--fs-xl);
        color: #fff;
      }

      p {
        margin-top: var(--space-2);
        font-size: var(--fs-sm);
        color: rgb(238 241 244 / 0.85);
      }
    }

    @media (max-width: 1024px) {
      .cat-hero {
        grid-template-columns: 1fr;

        .art {
          height: 300px;
        }
      }

      .catalog {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      .filters {
        position: static;
        border: 1px solid var(--color-border);

        .filter-toggle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: var(--space-4);
          font-size: var(--fs-xs);
          font-weight: 600;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          cursor: pointer;

          .icon {
            width: 18px;
            height: 18px;
            transition: transform var(--dur-base) var(--ease-out);
          }
        }

        .inner {
          display: none;
          padding: 0 var(--space-4) var(--space-4);
        }

        &:has(#filter-toggle:checked) {
          .inner {
            display: block;
          }

          .filter-toggle .icon {
            transform: rotate(180deg);
          }
        }
      }

      .catalog .product-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        margin: 0;
        padding: 0;
        overflow: visible;
      }

      .catalog .product .quick {
        display: none;
      }

      .design-band {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 560px) {
      .cat-hero .art {
        height: 220px;
      }

      .catalog .product-grid {
        gap: var(--space-6) var(--space-3);
      }
    }

    .catalog-wrap:has(#f-all:checked) :is(.chips, .filters) label[for="f-all"] { color: var(--color-text); border-color: var(--c-ink-950); font-weight: 600; }
    .catalog-wrap:has(#f-elements:checked) :is(.chips, .filters) label[for="f-elements"] { color: var(--color-text); border-color: var(--c-ink-950); font-weight: 600; }
    .catalog-wrap:has(#f-starry:checked) :is(.chips, .filters) label[for="f-starry"] { color: var(--color-text); border-color: var(--c-ink-950); font-weight: 600; }
    .catalog-wrap:has(#f-chakras:checked) :is(.chips, .filters) label[for="f-chakras"] { color: var(--color-text); border-color: var(--c-ink-950); font-weight: 600; }
    .catalog-wrap:has(#f-intention:checked) :is(.chips, .filters) label[for="f-intention"] { color: var(--color-text); border-color: var(--c-ink-950); font-weight: 600; }
    .catalog-wrap:has(#f-nature:checked) :is(.chips, .filters) label[for="f-nature"] { color: var(--color-text); border-color: var(--c-ink-950); font-weight: 600; }
    .catalog-wrap:has(#f-custom:checked) :is(.chips, .filters) label[for="f-custom"] { color: var(--color-text); border-color: var(--c-ink-950); font-weight: 600; }
    body:has(#cl-0:checked) label[for="cl-0"] { --liked: 1; }
    body:has(#cl-1:checked) label[for="cl-1"] { --liked: 1; }
    body:has(#cl-2:checked) label[for="cl-2"] { --liked: 1; }
    body:has(#cl-3:checked) label[for="cl-3"] { --liked: 1; }
    body:has(#cl-4:checked) label[for="cl-4"] { --liked: 1; }
    body:has(#cl-5:checked) label[for="cl-5"] { --liked: 1; }
    body:has(#cl-6:checked) label[for="cl-6"] { --liked: 1; }
    body:has(#cl-7:checked) label[for="cl-7"] { --liked: 1; }
    body:has(#cl-8:checked) label[for="cl-8"] { --liked: 1; }

  

    /* WordPress: collections are real category links */
    .chips a[aria-current],
    .filters .opt[aria-current] {
      color: var(--color-text);
      border-color: var(--c-ink-950);
      font-weight: 600;
    }