/* 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 {
        padding: 10%;
        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);
      }
    }

    /* =========================================================
       Product page
       ========================================================= */
    .pdp {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
      padding-bottom: var(--section-y);
    }

    /* gallery – CSS-only thumbnail switcher */
    .gallery {
      display: grid;
      grid-template-columns: 84px 1fr;
      gap: var(--space-4);
      align-self: start;
      position: sticky;
      top: calc(var(--header-h) + var(--space-5));

      .thumbs {
        display: grid;
        align-content: start;
        gap: var(--space-3);

        label {
          aspect-ratio: 1;
          overflow: hidden;
          background: var(--color-surface-muted);
          outline: 1px solid transparent;
          outline-offset: 2px;
          cursor: pointer;
          transition: outline-color var(--dur-fast);

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

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

      .stage {
        position: relative;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--color-surface-muted);

        figure {
          position: absolute;
          inset: 0;
          opacity: 0;
          transition: opacity var(--dur-slow) var(--ease-out);

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1.2s var(--ease-out);
          }
        }

        &:hover figure img {
          transform: scale(1.06);
        }

        .badge {
          position: absolute;
          top: var(--space-4);
          left: var(--space-4);
          z-index: 2;
          padding: 5px 12px;
          font-size: var(--fs-2xs);
          font-weight: 600;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          background: rgb(255 255 255 / 0.92);
        }
      }
    }

    .info {
      .cat {
        font-size: var(--fs-2xs);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--color-muted);
      }

      h1 {
        margin-top: var(--space-2);
        font-family: var(--font-serif);
        font-size: var(--fs-xl);
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.015em;
      }

      .price-row {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        margin-top: var(--space-3);

        strong {
          font-size: var(--fs-lg);
          font-weight: 500;
        }

        small {
          font-size: var(--fs-xs);
          color: var(--color-muted);
        }
      }

      .lede {
        margin-top: var(--space-4);
        color: var(--color-text-soft);
      }

      .stones-line {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-top: var(--space-4);
        font-size: var(--fs-sm);
        color: var(--color-text-soft);

        span {
          display: flex;
        }

        img {
          width: 28px;
          height: 28px;
          margin-left: -6px;
          border: 2px solid var(--c-white);
          border-radius: 50%;

          &:first-child {
            margin-left: 0;
          }
        }
      }
    }

    .buy {
      display: grid;
      gap: var(--space-5);
      margin-top: var(--space-6);
      padding-top: var(--space-6);
      border-top: 1px solid var(--color-border);

      fieldset {
        margin: 0;
        padding: 0;
        border: 0;
      }

      legend {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: var(--space-3);
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;

        a {
          font-weight: 400;
          letter-spacing: 0.06em;
          text-transform: none;
          color: var(--color-text-soft);
          text-decoration: underline;
          text-underline-offset: 3px;
        }
      }

      .seg {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);

        label {
          position: relative;
          cursor: pointer;
        }

        input {
          position: absolute;
          opacity: 0;
        }

        span {
          display: grid;
          min-width: 64px;
          padding: 10px 16px;
          font-size: var(--fs-sm);
          text-align: center;
          border: 1px solid var(--color-border);
          transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);

          small {
            font-size: var(--fs-2xs);
            color: var(--color-muted);
          }
        }

        label:hover span {
          border-color: var(--c-mist-300);
        }

        input:checked + span {
          color: var(--c-white);
          background: var(--c-ink-950);
          border-color: var(--c-ink-950);

          small {
            color: rgb(255 255 255 / 0.7);
          }
        }

        input:focus-visible + span {
          outline: 2px solid var(--color-accent);
          outline-offset: 2px;
        }
      }

      .row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--space-3);
      }

      .qty {
        display: flex;
        align-items: center;
        border: 1px solid var(--color-border);

        button {
          width: 42px;
          height: 52px;
          font-size: var(--fs-md);
          transition: background var(--dur-fast), opacity var(--dur-fast);

          &:hover:not(:disabled) {
            background: var(--color-surface-muted);
          }

          &:disabled {
            opacity: 0.3;
            cursor: not-allowed;
          }
        }

        input {
          width: 40px;
          text-align: center;
          border: 0;
          outline: 0;
          appearance: textfield;
          -moz-appearance: textfield;

          &::-webkit-inner-spin-button,
          &::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
        }
      }

      .like-btn {
        --liked: 0;

        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border: 1px solid var(--color-border);
        cursor: pointer;
        transition: border-color var(--dur-fast);

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

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

      .btn {
        width: 100%;
      }

      .assure {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        font-size: var(--fs-xs);
        color: var(--color-text-soft);
        background: var(--color-surface-soft);

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

    .perks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3) var(--space-5);
      margin-top: var(--space-6);

      li {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--fs-sm);
        color: var(--color-text-soft);
      }

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

    .acc {
      margin-top: var(--space-6);
      border-top: 1px solid var(--color-border);

      details {
        border-bottom: 1px solid var(--color-border);

        &::details-content {
          block-size: 0;
          overflow: hidden;
          transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
        }

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

        &[open] summary::after {
          transform: rotate(45deg);
        }
      }

      summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) 0;
        font-size: var(--fs-sm);
        font-weight: 600;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
          display: none;
        }

        &::after {
          content: "+";
          font-size: 1.2rem;
          font-weight: 300;
          transition: transform var(--dur-base) var(--ease-out);
        }
      }

      .acc-body {
        padding-bottom: var(--space-5);
        font-size: var(--fs-sm);
        color: var(--color-text-soft);

        p + p,
        ul {
          margin-top: var(--space-3);
        }

        ul {
          padding-left: 1.1em;
          list-style: disc;
        }

        table {
          width: 100%;
          border-collapse: collapse;

          th,
          td {
            padding: 8px 0;
            text-align: left;
            border-bottom: 1px solid var(--color-border);
          }

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

    /* stones in this piece */
    .in-piece {
      padding-block: var(--section-y);
      background: var(--color-surface-soft);

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

      article {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: var(--space-5);
        align-items: center;
        padding: var(--space-6);
        background: var(--c-white);
        border: 1px solid var(--color-border);

        img {
          width: 96px;
          filter: drop-shadow(0 10px 12px rgb(23 25 29 / 0.18));
          transition: transform var(--dur-slow) var(--ease-out);
        }

        &:hover img {
          transform: rotate(18deg) scale(1.06);
        }
      }

      h3 {
        font-family: var(--font-serif);
        font-size: var(--fs-lg);
        font-weight: 600;
      }

      .kw {
        margin-top: 2px;
        font-size: var(--fs-xs);
        letter-spacing: 0.08em;
        color: var(--color-text-soft);
      }

      p {
        margin-top: var(--space-2);
        font-size: var(--fs-sm);
        color: var(--color-text-soft);
      }
    }

    .related {
      padding-block: var(--section-y);
    }

    /* mobile purchase bar */
    .buy-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: var(--z-float);
      display: none;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--gutter);
      background: rgb(255 255 255 / 0.96);
      border-top: 1px solid var(--color-border);
      backdrop-filter: blur(10px);

      p {
        flex: 1;
        line-height: 1.25;
        font-size: var(--fs-sm);

        b {
          display: block;
          font-weight: 600;
        }
      }

      .btn {
        min-height: 46px;
      }
    }

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

      .gallery {
        position: static;
      }

      .in-piece .grid {
        grid-template-columns: 1fr;
      }

      .buy-bar {
        display: flex;
      }

      .site-footer {
        padding-bottom: 80px;
      }

      .to-top {
        bottom: 90px;
      }
    }

    @media (max-width: 560px) {
      .gallery {
        grid-template-columns: 1fr;

        .thumbs {
          order: 2;
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .perks {
        grid-template-columns: 1fr;
      }

      .in-piece article {
        grid-template-columns: 72px 1fr;
        padding: var(--space-5);

        img {
          width: 72px;
        }
      }
    }
    .gallery:has(#g-0:checked) .stage figure:nth-of-type(1) { opacity: 1; }
    .gallery:has(#g-0:checked) label[for="g-0"] { outline-color: var(--c-ink-950); }
    .gallery:has(#g-1:checked) .stage figure:nth-of-type(2) { opacity: 1; }
    .gallery:has(#g-1:checked) label[for="g-1"] { outline-color: var(--c-ink-950); }
    .gallery:has(#g-2:checked) .stage figure:nth-of-type(3) { opacity: 1; }
    .gallery:has(#g-2:checked) label[for="g-2"] { outline-color: var(--c-ink-950); }
    .gallery:has(#g-3:checked) .stage figure:nth-of-type(4) { opacity: 1; }
    .gallery:has(#g-3:checked) label[for="g-3"] { outline-color: var(--c-ink-950); }
    .gallery:has(#g-4:checked) .stage figure:nth-of-type(5) { opacity: 1; }
    .gallery:has(#g-4:checked) label[for="g-4"] { outline-color: var(--c-ink-950); }
    .gallery:has(#g-5:checked) .stage figure:nth-of-type(6) { opacity: 1; }
    .gallery:has(#g-5:checked) label[for="g-5"] { outline-color: var(--c-ink-950); }
    .gallery:has(#g-6:checked) .stage figure:nth-of-type(7) { opacity: 1; }
    .gallery:has(#g-6:checked) label[for="g-6"] { outline-color: var(--c-ink-950); }
    .gallery:has(#g-7:checked) .stage figure:nth-of-type(8) { opacity: 1; }
    .gallery:has(#g-7:checked) label[for="g-7"] { outline-color: var(--c-ink-950); }
    body:has(#pl-0:checked) label[for="pl-0"] { --liked: 1; }
    body:has(#pl-1:checked) label[for="pl-1"] { --liked: 1; }
    body:has(#pl-2:checked) label[for="pl-2"] { --liked: 1; }
    body:has(#pl-3:checked) label[for="pl-3"] { --liked: 1; }
    body:has(#pl-4:checked) label[for="pl-4"] { --liked: 1; }
  

    /* WordPress: favourites + sold-out */
    .like-btn.is-on .icon {
      fill: currentColor;
    }

    .info .sold-out {
      padding: var(--space-4) 0;
      color: var(--color-text-soft);
    }

    /* mobile: quantity + favourite on one line, full-width add to cart below */
    @media (max-width: 560px) {
      .buy .row {
        grid-template-columns: 1fr auto;
        grid-auto-flow: dense;

        > .btn {
          grid-column: 1 / -1;
        }
      }
    }

    /* =========================================================
       Reviews
       ========================================================= */
    .reviews {
      padding-block: var(--section-y);
      border-top: 1px solid var(--color-border);

      .stars {
        display: inline-flex;
        gap: 2px;
        font-size: 15px;
        line-height: 1;
        color: var(--c-mist-300);

        .on {
          color: var(--c-ink-950);
        }
      }
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: clamp(2rem, 1rem + 4vw, 5rem);
      align-items: start;
    }

    .reviews .summary {
      position: sticky;
      top: calc(var(--header-h, 80px) + var(--space-5));
      padding: var(--space-6);
      background: var(--color-surface-soft);

      .avg {
        display: flex;
        align-items: baseline;
        gap: 6px;

        strong {
          font-family: var(--font-serif);
          font-size: 3rem;
          font-weight: 600;
          line-height: 1;
        }

        span {
          color: var(--color-muted);
        }
      }

      .stars {
        margin-top: var(--space-3);
        font-size: 18px;
      }

      .based {
        margin-top: var(--space-2);
        font-size: var(--fs-xs);
        color: var(--color-text-soft);
      }

      .bars {
        display: grid;
        gap: 8px;
        margin-top: var(--space-5);

        li {
          display: grid;
          grid-template-columns: 28px 1fr 20px;
          align-items: center;
          gap: var(--space-2);
          font-size: var(--fs-xs);
          color: var(--color-text-soft);
        }

        b {
          height: 4px;
          background: linear-gradient(var(--c-ink-950), var(--c-ink-950)) 0 0 / var(--w) 100% no-repeat, var(--color-border);
        }

        em {
          font-style: normal;
          text-align: right;
        }
      }
    }

    .reviews .list {
      display: grid;
      gap: var(--space-5);

      .none {
        color: var(--color-text-soft);
      }
    }

    .review {
      padding-bottom: var(--space-5);
      border-bottom: 1px solid var(--color-border);

      header {
        display: flex;
        align-items: center;
        gap: var(--space-3);

        img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
        }

        div {
          display: grid;
          flex: 1;
        }

        small {
          font-size: var(--fs-xs);
          color: var(--color-muted);
        }
      }

      .text {
        margin-top: var(--space-3);
        color: var(--color-text-soft);
      }
    }

    .review-form {
      display: grid;
      gap: var(--space-4);
      padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
      border: 1px solid var(--color-border);

      h3 {
        font-family: var(--font-serif);
        font-size: var(--fs-lg);
        font-weight: 600;
      }

      fieldset {
        margin: 0;
        padding: 0;
        border: 0;
      }

      legend,
      label > span {
        display: block;
        margin-bottom: 8px;
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

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

      :is(input[type="text"], input[type="email"], textarea) {
        width: 100%;
        padding: 12px 14px;
        font-size: var(--fs-sm);
        border: 1px solid var(--color-border);
        outline: 0;

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

      .btn {
        justify-self: start;
      }
    }

    /* star picker: inputs are in reverse order so "~" can light lower stars */
    .rate-stars {
      display: inline-flex;
      flex-direction: row-reverse;
      gap: 4px;

      input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      label {
        font-size: 28px;
        line-height: 1;
        color: var(--c-mist-300);
        cursor: pointer;
        transition: color var(--dur-fast), transform var(--dur-fast);

        &:hover {
          transform: scale(1.1);
        }
      }

      input:checked ~ label,
      label:hover,
      label:hover ~ label {
        color: var(--c-ink-950);
      }

      input:focus-visible + label {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
      }
    }

    @media (max-width: 860px) {
      .reviews-grid {
        grid-template-columns: 1fr;
      }

      .reviews .summary {
        position: static;
      }

      .review-form .two {
        grid-template-columns: 1fr;
      }
    }