/* ── Screen-reader only ──────────────────────────────── */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0);
      white-space: nowrap; border: 0;
    }

    /* ── Shop-specific page-intro override ─────────────── */
    .page-intro {
      padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
    }

    /* ── Shop controls area ──────────────────────────────── */
    .shop-controls {
      padding: clamp(.8rem, 1.5vw, 1.2rem) 0;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    /* Category row */
    .shop-cats {
      display: flex;
      align-items: center;
      gap: .9rem;
      flex-wrap: wrap;
    }

    .cat-dot {
      color: var(--muted);
      font-size: .6rem;
      line-height: 1;
      user-select: none;
    }

    .cat-btn {
      background: none;
      border: none;
      color: var(--muted);
      font-family: var(--sans);
      font-size: .6rem;
      font-weight: 400;
      letter-spacing: .2em;
      text-transform: uppercase;
      cursor: pointer;
      padding: .2rem 0 .4rem;
      position: relative;
      transition: color .25s;
    }
    .cat-btn::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 1px;
      background: var(--bone);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease, opacity .25s ease;
      opacity: 0;
    }
    .cat-btn.is-active {
      color: var(--bone);
    }
    .cat-btn.is-active::after {
      transform: scaleX(1);
      opacity: .45;
    }
    @media (hover: hover) {
      .cat-btn:hover { color: var(--bone); }
      .cat-btn:hover::after { transform: scaleX(1); opacity: .7; }
    }

    /* Secondary / sub-category row */
    .shop-subcats {
      display: flex;
      align-items: center;
      gap: .7rem;
      flex-wrap: wrap;
      animation: subcats-appear .22s ease both;
    }
    .shop-subcats[hidden] { display: none; }

    @keyframes subcats-appear {
      from { opacity: 0; transform: translateY(-3px); }
      to   { opacity: 1; transform: none; }
    }

    .subcat-dot {
      color: var(--muted);
      font-size: .45rem;
      line-height: 1;
      user-select: none;
      opacity: .4;
    }

    .subcat-btn {
      background: none;
      border: none;
      color: var(--muted);
      font-family: var(--sans);
      font-size: .52rem;
      font-weight: 400;
      letter-spacing: .14em;
      text-transform: uppercase;
      cursor: pointer;
      padding: .15rem 0 .3rem;
      position: relative;
      transition: color .2s;
    }
    .subcat-btn::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 1px;
      background: var(--dim);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease, opacity .2s ease;
      opacity: 0;
    }
    /* Number of objects, quieter than the name: "RINGS 4" */
    .subcat-count {
      margin-left: .45em;
      letter-spacing: .06em;
      opacity: .55;
      font-variant-numeric: tabular-nums;
    }
    .subcat-btn.is-active {
      color: var(--bone);
      opacity: .8;
    }
    .subcat-btn.is-active::after {
      transform: scaleX(1);
      opacity: .3;
    }
    @media (hover: hover) {
      .subcat-btn:hover { color: var(--bone); opacity: .75; }
      .subcat-btn:hover::after { transform: scaleX(1); opacity: .45; }
    }

    /* Row 2: search + meta + mobile toggle */
    .shop-row2 {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    .shop-search-wrap { flex: 1; }

    .shop-search {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--line);
      color: var(--bone);
      font-family: var(--sans);
      font-size: .68rem;
      font-weight: 300;
      letter-spacing: .08em;
      padding: .4rem 0;
      outline: none;
      transition: border-color .25s;
    }
    .shop-search:focus { border-color: rgba(233,228,216,.45); }
    .shop-search::placeholder { color: var(--muted); }
    .shop-search::-webkit-search-cancel-button { display: none; }

    /* Meta controls: price + sort */
    .shop-meta {
      display: flex;
      gap: 2rem;
      align-items: center;
      flex-shrink: 0;
    }

    .shop-select-wrap { position: relative; }

    .shop-select {
      appearance: none;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--line);
      color: var(--dim);
      font-family: var(--sans);
      font-size: .58rem;
      font-weight: 400;
      letter-spacing: .18em;
      text-transform: uppercase;
      padding: .3rem 1.6rem .3rem 0;
      cursor: pointer;
      outline: none;
      transition: color .25s, border-color .25s;
      /* Chevron */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239e9a90' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0 center;
    }
    .shop-select:focus { color: var(--bone); border-color: rgba(233,228,216,.45); }
    .shop-select option { background: #111; color: var(--bone); }

    /* Mobile filter toggle — hidden on desktop */
    .mobile-filter-toggle {
      display: none;
      background: none;
      border: none;
      border-bottom: 1px solid var(--line);
      color: var(--dim);
      font-family: var(--sans);
      font-size: .58rem;
      font-weight: 400;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding: .3rem 0;
      cursor: pointer;
      flex-shrink: 0;
      transition: color .25s;
    }
    .mobile-filter-toggle:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

    /* Mobile filter panel */
    .mobile-filter-panel {
      display: none; /* shown via JS on mobile only */
      flex-direction: column;
      gap: 2rem;
      padding: 1.6rem 0;
      border-top: 1px solid var(--line);
      margin-top: .4rem;
    }
    .mobile-filter-panel.is-open {
      display: flex;
    }

    .mfp-section {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .mfp-cats {
      display: flex;
      flex-direction: column;
      gap: .8rem;
    }

    .mcat-btn {
      background: none;
      border: none;
      color: var(--muted);
      font-family: var(--sans);
      font-size: .64rem;
      font-weight: 400;
      letter-spacing: .2em;
      text-transform: uppercase;
      cursor: pointer;
      padding: .2rem 0;
      text-align: left;
      transition: color .25s;
    }
    .mcat-btn.is-active { color: var(--bone); }

    /* Mobile primary category row — hidden on desktop */
    .mob-cats-wrap { display: none; }

    .mfp-close {
      background: none;
      border: none;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-family: var(--sans);
      font-size: .58rem;
      font-weight: 400;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding: 1rem 0 0;
      cursor: pointer;
      text-align: left;
      transition: color .25s;
    }
    .mfp-close:hover { color: var(--bone); }

    /* ── Loading state ───────────────────────────────────── */
    .state-loading {
      padding: clamp(4rem, 8vw, 6rem) 0;
      min-height: 12rem;
    }

    /* ── Shop grid ───────────────────────────────────────── */
    .shop-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: clamp(2rem, 4vw, 4rem);
      row-gap: clamp(4rem, 8vw, 7rem);
      padding: clamp(2rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 7rem);
      border-bottom: 1px solid var(--line);
    }

    /* Each card is one centred column: image, then text and actions on the
       same axis. Cards in a row share a height and their actions line up. */
    .shop-item {
      scroll-margin-top: 6rem;
      display: flex;
      flex-direction: column;
      text-align: center;
    }
    /* Arrived via a /shop/#<slug> link (e.g. from Facebook or Instagram) */
    .shop-item--targeted { animation: shop-item-target 3.5s ease-out 1; }
    @keyframes shop-item-target {
      0%, 35% { box-shadow: 0 0 0 1px var(--accent); }
      100%    { box-shadow: 0 0 0 1px transparent; }
    }
    @media (prefers-reduced-motion: reduce) {
      .shop-item--targeted { animation: none; box-shadow: 0 0 0 1px var(--accent); }
    }

    /* Square frame: portrait objects and landscape pictures get the same
       space, so neither is lost in a wide, shallow box. The photograph is
       pinned to the centre of the frame (absolute + inset + margin:auto),
       which centres it in every browser regardless of its own proportions. */
    .shop-item-img {
      display: block;
      position: relative;
      overflow: hidden;
      background: var(--ink);
      aspect-ratio: 1 / 1;
      width: 100%;
      max-height: 34rem;
    }
    .shop-item-img img {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: 50% 50%;
      transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
    }
    /* Browsers without aspect-ratio: keep a square frame by padding */
    @supports not (aspect-ratio: 1 / 1) {
      .shop-item-img { height: 0; padding-bottom: 100%; }
    }
    .shop-item-img:hover img { transform: scale(1.03); }
    .shop-item-img:focus-visible { outline: 1px solid var(--bone); }

    /* When a listing has no image, suppress the reserved image area entirely */
    .shop-item--no-image .shop-item-img { display: none; }

    .shop-item-detail {
      padding-top: 1.6rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 30rem;
      width: 100%;
      margin: 0 auto;
    }
    /* Actions sit at the foot of the card, so Buy Now lines up across a row */
    .shop-item-detail > .rule-link,
    .shop-item-actions { margin-top: auto; }
    .shop-item-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: baseline;
      gap: .9rem 2.2rem;
    }
    /* Same size as on the object pages, so Buy Now is clearly visible */
    .shop-item-detail .rule-link { font-size: .74rem; }
    .shop-item-buy { padding-left: 0; padding-right: 0; color: var(--bone); }
    .shop-item-actions .rule-link + .rule-link { color: var(--dim); }

    .shop-item-detail .eyebrow {
      display: block;
      margin-bottom: .7rem;
    }

    .shop-item-title {
      font-family: var(--serif);
      font-weight: 300;
      font-size: clamp(1.4rem, 2.2vw, 2rem);
      line-height: 1.05;
      letter-spacing: -.01em;
      margin: 0 0 .65rem;
    }

    .shop-item-subtitle {
      font-family: var(--serif);
      font-size: clamp(.95rem, 1.3vw, 1.1rem);
      line-height: 1.4;
      color: var(--dim);
      margin: -.25rem 0 .8rem;
    }

    /* Size line under the subtitle: quiet, factual, never dominant */
    .shop-item-dimensions {
      font-family: var(--sans);
      font-size: .78rem;
      letter-spacing: .04em;
      line-height: 1.5;
      color: var(--muted);
      margin: 0 0 .8rem;
    }
    .shop-item-subtitle + .shop-item-dimensions { margin-top: -.4rem; }

    .shop-item-price {
      font-family: var(--sans);
      font-size: .85rem;
      font-weight: 400;
      letter-spacing: .14em;
      color: var(--dim);
      margin: 0 0 1.1rem;
      text-transform: uppercase;
    }

    /* ── Shop states (empty / no-results / error / vacation) */
    .shop-state {
      padding: clamp(5rem, 12vw, 10rem) 0;
    }

    .shop-state-inner {
      max-width: 36rem;
    }

    .state-headline {
      font-size: clamp(2.8rem, 6vw, 6rem);
      line-height: .95;
      margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    }
    .state-headline em {
      color: var(--dim);
      font-style: italic;
    }

    .shop-state-sub {
      font-family: var(--serif);
      font-size: clamp(1.1rem, 1.8vw, 1.55rem);
      color: var(--dim);
      line-height: 1.4;
      margin: 0 0 clamp(2rem, 4vw, 3rem);
    }

    .shop-state-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.4rem;
    }

    /* ── Telephone reveal ────────────────────────────────── */
    .tel-reveal-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: .7rem;
    }

    .tel-trigger {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      font-family: var(--sans);
      font-size: .64rem;
      font-weight: 400;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--bone);
      /* Match .rule-link style */
      display: inline-block;
      padding-bottom: .4rem;
      background: linear-gradient(var(--bone), var(--bone)) left bottom / 100% 1px no-repeat;
      transition: background-size .4s ease, color .25s;
    }
    @media (hover: hover) {
      .tel-trigger:hover { background-size: 24% 1px; }
    }
    .tel-trigger:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

    .tel-panel-outer {
      overflow: hidden;
      max-height: 0;
      transition: max-height 300ms ease;
    }
    .tel-panel-outer.is-open {
      max-height: 5rem;
    }

    .tel-panel {
      display: flex;
      align-items: baseline;
      gap: 1.8rem;
      flex-wrap: wrap;
      padding-bottom: .2rem;
      opacity: 0;
      transform: translateY(5px);
      transition: opacity 280ms ease, transform 280ms ease;
    }
    .tel-panel-outer.is-open .tel-panel {
      opacity: 1;
      transform: none;
    }

    .tel-number {
      font-family: var(--sans);
      font-size: .7rem;
      font-weight: 300;
      letter-spacing: .12em;
      color: var(--bone);
    }

    /* ── Conversation section ────────────────────────────── */
    .shop-converse {
      padding: clamp(5rem, 10vw, 9rem) 0 0;
    }

    .shop-converse-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: end;
    }

    .shop-converse-inner .eyebrow {
      grid-column: 1 / -1;
      display: block;
      margin-bottom: 1.5rem;
    }

    .converse-headline {
      font-size: clamp(2.5rem, 5vw, 5.5rem);
      line-height: .95;
      margin: 0;
    }

    .converse-body {
      font-family: var(--serif);
      font-size: clamp(1rem, 1.6vw, 1.45rem);
      color: var(--dim);
      margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
      line-height: 1.5;
    }

    .converse-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.4rem;
    }

    /* ── Responsive ──────────────────────────────────────── */
    @media (max-width: 1100px) {
      .shop-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 700px) {
      .shop-cats { display: none; }
      .shop-meta { display: none; }
      .mobile-filter-toggle { display: block; }

      /* Mobile primary row */
      .mob-cats-wrap {
        display: block;
        position: relative;
        order: -1;   /* category row first, its sub-categories beneath it */
      }
      .mob-cats {
        display: flex;
        align-items: center;
        gap: .9rem;
      }
      .mob-cat-dot {
        color: var(--muted);
        font-size: .6rem;
        line-height: 1;
        user-select: none;
      }
      .mob-cat-btn,
      .mob-more-btn {
        background: none;
        border: none;
        color: var(--muted);
        font-family: var(--sans);
        font-size: .6rem;
        font-weight: 400;
        letter-spacing: .2em;
        text-transform: uppercase;
        cursor: pointer;
        padding: .6rem 0 .4rem;
        min-height: 44px;
        white-space: nowrap;
        display: inline-flex;
        align-items: flex-end;
        position: relative;
        transition: color .25s;
        -webkit-tap-highlight-color: transparent;
      }
      .mob-cat-btn::after,
      .mob-more-btn::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 1px;
        background: var(--bone);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease, opacity .25s ease;
        opacity: 0;
      }
      .mob-cat-btn.is-active,
      .mob-more-btn.is-active { color: var(--bone); }
      .mob-cat-btn.is-active::after,
      .mob-more-btn.is-active::after { transform: scaleX(1); opacity: .45; }
      .mob-cat-btn:focus-visible,
      .mob-more-btn:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

      /* MORE dropdown panel */
      .mob-more-panel {
        position: absolute;
        top: calc(100% + .3rem);
        left: 0;
        background: #0d0d0d;
        border: 1px solid var(--line);
        padding: .5rem 0;
        z-index: 20;
        min-width: 13rem;
      }
      .mob-more-item {
        display: block;
        width: 100%;
        background: none;
        border: none;
        color: var(--dim);
        font-family: var(--sans);
        font-size: .6rem;
        font-weight: 400;
        letter-spacing: .2em;
        text-transform: uppercase;
        cursor: pointer;
        padding: .75rem 1.1rem;
        text-align: left;
        min-height: 44px;
        transition: color .2s;
        -webkit-tap-highlight-color: transparent;
      }
      .mob-more-item.is-active { color: var(--bone); }
      .mob-more-item:hover     { color: var(--bone); }
      .mob-more-item:focus-visible { outline: 1px solid var(--bone); outline-offset: -2px; }

      /* Secondary row — horizontally scrollable on mobile */
      #shop-subcats {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .5rem;
        scrollbar-width: none;
      }
      #shop-subcats::-webkit-scrollbar { display: none; }
      .subcat-btn { min-height: 44px; white-space: nowrap; }

      .shop-grid {
        grid-template-columns: 1fr;
        row-gap: clamp(3rem, 8vw, 5rem);
      }

      .shop-item-img { max-height: none; }
      .shop-item-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }

      .shop-converse-inner {
        grid-template-columns: 1fr;
      }
    }

    /* Very narrow phones: room for a chosen category's name in place of "More" */
    @media (max-width: 359px) {
      .mob-cats { gap: .55rem; }
      .mob-cat-btn, .mob-more-btn { letter-spacing: .12em; }
    }

    @media (max-width: 500px) {
      .tel-panel {
        flex-direction: column;
        gap: .8rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .shop-subcats { animation: none !important; }
      .subcat-btn::after { transition: none !important; }
      .mob-cat-btn::after,
      .mob-more-btn::after { transition: none !important; }
      .mob-more-item { transition: none !important; }
      .tel-panel-outer { transition: none !important; }
      .tel-panel { transition: none !important; }
      .shop-item-img img { transition: none !important; }
    }

    /* ── Catalogue integration ─────────────────────────────────── */
    .shop-item--reserved { opacity: .72; }
    .shop-item-reserved {
      display: block;
      font-size: .74rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: .35em;
    }

    /* Delivery footnote */
    .footnote-mark { color: inherit; text-decoration: none; }
    .shop-delivery-note { font-family: var(--serif); font-size: .9rem; line-height: 1.5; color: var(--muted); max-width: 40rem; margin: clamp(2rem, 5vw, 4rem) 0; }
    .shop-delivery-note a { color: inherit; }