/* ==========================================================================
   Shop Local Makers - The Studio Shelves + the Specimen picker
   Field notes from twelve studios: shallow maker headers, shelves of group
   cards (same-named one-offs collapse to one card), a sticky chip rail for
   browse-by-maker, and the specimen page where every piece is numbered and
   individually buyable. Signature: the SPOKEN FOR stamp on add-to-cart.
   ========================================================================== */

.shelves,
.specimen {
    background: var(--color-bg);
    color: var(--color-text);
    /* Ink variants: legible small text on ivory (the brand gold and rose are
       2 to 3:1 accents, kept for borders, marks, and decoration). */
    --gold-ink: #82682F;
    --rose-ink: #96595E;
}

/* --- Masthead (bisque, the annex to the journal's charcoal) --------------- */

.shelves-head {
    background: var(--color-bisque);
    /* Tight on purpose (Gage, staging pass 2026-08-02): the masthead is a
       signpost, not a destination; shopping starts one scroll-flick down. */
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    position: relative;
}

.shelves-head::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-gold);
    opacity: 0.35;
}

.shelves-head__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.shelves-head__top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.shelves-head__label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.shelves-head__rule {
    flex: 1;
    height: 1px;
    background: var(--color-gold);
    opacity: 0.45;
}

.shelves-head__title {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin-top: var(--space-sm);
    text-wrap: balance;
}

.shelves-head__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
    margin-top: var(--space-sm);
}

.shelves-head__count {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Empty state (ported from the retired curation surface) --------------- */

.curation-empty {
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
}

.curation-empty__inner {
    max-width: 560px;
    margin: 0 auto;
}

.curation-empty__title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    margin: 0 0 var(--space-sm);
}

.curation-empty__text {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-style: italic;
    color: rgba(30, 30, 32, 0.65);
    margin: 0 0 var(--space-md);
}

.curation-empty__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.9rem 1.4rem;
    border: 1px solid var(--color-primary);
    transition: background 0.2s ease, color 0.2s ease;
}

.curation-empty__link:hover,
.curation-empty__link:focus-visible {
    background: var(--color-primary);
    color: var(--color-ivory);
}

/* --- Notices (no-JS add feedback) + live region ----------------------------- */

.shelves-notices {
    max-width: 1100px;
    margin: var(--space-md) auto 0;
    padding: 0 var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.shelves-notices--picker {
    padding: 0;
    margin: 0 0 var(--space-md);
}

.shelves-notices .woocommerce-message,
.shelves-notices .woocommerce-error,
.shelves-notices .woocommerce-info {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0.85rem 1.1rem;
    border-left: 3px solid var(--color-primary);
    background: var(--color-bisque);
    color: var(--color-charcoal);
}

.shelves-notices .woocommerce-error {
    border-left-color: var(--rose-ink);
}

.shelves-notices a {
    color: var(--color-primary);
}

.bb-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Sticky rail: maker chips + sort --------------------------------------- */

.shelves-rail {
    position: sticky;
    top: 68px; /* under the fixed site header */
    z-index: 40;
    background: var(--color-ivory);
    border-bottom: 1px solid rgba(30, 30, 32, 0.1);
    padding: 0.6rem var(--space-lg) 0.65rem;
}

.shelves-rail__chips {
    display: flex;
    align-items: center;
    gap: 0 0.9rem;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 1100px;
    margin: 0 auto 0.2rem;
    -webkit-overflow-scrolling: touch;
}

/* Fade the right edge so the row visibly continues past the viewport, but only
   while there IS more row: makers.js sets is-overflowing when the chips do not
   fit, and clears it at the end of the scroll. Faded unconditionally, the mask
   just clips the tail off the last maker's name and promises a row that is not
   there. */
.shelves-rail__chips.is-overflowing {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.shelves-rail__chips::-webkit-scrollbar {
    display: none;
}

.shelves-rail__chip {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-primary);
    padding: 0.55rem 0 0.5rem;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.shelves-rail__chip:hover,
.shelves-rail__chip:focus-visible {
    color: var(--color-charcoal);
}

.shelves-rail__chip.is-active {
    color: var(--color-charcoal);
    border-color: var(--color-gold);
}

.shelves-rail__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.9rem;
    max-width: 1100px;
    margin: 0 auto;
}

.shelves-rail__sort-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

.shelves-rail__sort-opt {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.shelves-rail__sort-opt:hover,
.shelves-rail__sort-opt:focus-visible {
    color: var(--color-charcoal);
}

.shelves-rail__sort-opt.is-active {
    color: var(--color-charcoal);
    border-color: var(--color-gold);
}

/* --- Maker shelves ---------------------------------------------------------- */

.shelves-body {
    padding-bottom: var(--space-md);
}

.shelf {
    padding: var(--space-lg) var(--space-lg) 0;
    scroll-margin-top: 150px; /* header + rail */
}

.shelf__inner {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(30, 30, 32, 0.1);
    padding-top: var(--space-md);
}

.shelf:first-child .shelf__inner {
    border-top: 0;
    padding-top: 0;
}

/* The field note: numeral, name, tally. Three lines maximum, on purpose. */
.shelf__note {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-bottom: var(--space-md);
}

.shelf__num {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--gold-ink);
}

.shelf__maker {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--color-charcoal);
}

.shelf__tally {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* --- Group cards -------------------------------------------------------------- */

.shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: var(--space-lg) var(--space-md);
}

.shelves-flat {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
}

.shelves-flat__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.shelf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shelf-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    /* Pulls the grid row's stretch slack (a 1-line title's card is shorter
       than a 2-line title's before this) into itself, so .shelf-card__spacer
       below has room to absorb it. */
    flex-grow: 1;
}

/* Sits between the frame and the text block. Takes 100% of the slack
   .shelf-card__link pulled in, so the frame (locked to aspect-ratio) and the
   name/count/price stack never distort, and the price-to-button gap stays a
   constant 0.6rem on every card while the button still lands bottom-aligned
   across a mixed 1-line/2-line title row. */
.shelf-card__spacer {
    flex: 1 0 0;
}

.shelf-card__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.shelf-card__frame {
    position: relative;
    display: block;
    /* Bailey shoots her one-off pieces at 3:4 (verified against the live
       catalog: 88 of 200 images are exactly 0.75). Matching the frame to
       that ratio means object-fit: cover renders those with zero crop;
       only the square/landscape outliers still fall to .is-contain. */
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-bg-alt);
}

/* Ghost frames: a multi-piece group reads as a stack at a glance. Two offset
   bisque frames behind the photo, structure only, no extra images. */
.shelf-card--stack {
    padding-top: 10px;
    padding-right: 10px;
}

.shelf-card--stack::before,
.shelf-card--stack::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(196, 162, 101, 0.5);
    border-radius: 4px;
    background: var(--color-bisque);
    /* Must track .shelf-card__frame's aspect-ratio so the ghost cards'
       bottom edges land flush with the real photo's, not short of it. */
    aspect-ratio: 3 / 4;
    z-index: 0;
}

.shelf-card--stack::before {
    top: 0;
    right: 0;
    left: 10px;
}

.shelf-card--stack::after {
    top: 5px;
    right: 5px;
    left: 5px;
    background: var(--color-ivory);
}

.shelf-card--stack .shelf-card__link {
    position: relative;
    z-index: 1;
}

.shelf-card__frame .shelf-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.shelf-card__link:hover .shelf-card__image,
.shelf-card__link:focus-visible .shelf-card__image {
    transform: scale(1.03);
}

/* Flat art (near-square sources) shows whole on the bisque mat, not cropped. */
.shelf-card__frame.is-contain .shelf-card__image,
.specimen-card__frame.is-contain .specimen-card__image {
    object-fit: contain;
}

.shelf-card__placeholder {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(36, 91, 97, 0.05) 0 12px, rgba(36, 91, 97, 0.09) 12px 24px);
}

.shelf-card__accent {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-top: 2px solid var(--color-gold);
    border-right: 2px solid var(--color-gold);
    opacity: 0.9;
}

.shelf-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.7rem;
}

.shelf-card__name {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--color-charcoal);
}

.shelf-card__maker {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(30, 30, 32, 0.72);
}

.shelf-card__count {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}

.shelf-card__count--low {
    color: var(--rose-ink);
}

.shelf-card__count--only {
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--gold-ink);
}

.shelf-card__price {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-charcoal);
    font-variant-numeric: tabular-nums;
}

/* --- Add buttons (singleton shelf cards + specimen cards) --------------------- */

.shelf-card__add,
.specimen-card__add {
    margin-top: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ivory);
    background: var(--color-primary);
    border: 0;
    border-radius: 2px;
    padding: 0.7rem 1rem;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.shelf-card__add:hover,
.shelf-card__add:focus-visible,
.specimen-card__add:hover,
.specimen-card__add:focus-visible {
    background: var(--color-charcoal);
    transform: translateY(-1px);
}

.shelf-card__add:focus-visible,
.specimen-card__add:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.shelf-card__add.is-busy,
.specimen-card__add.is-busy {
    opacity: 0.6;
    cursor: default;
}

.shelf-card__add.is-in-cart,
.specimen-card__add.is-in-cart {
    background: var(--color-charcoal);
}

.shelf-card__add.is-gone-note,
.specimen-card__add.is-gone-note {
    background: transparent;
    color: rgba(30, 30, 32, 0.75);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.04em;
    cursor: default;
}

.shelf-card__add.is-error,
.specimen-card__add.is-error {
    background: var(--rose-ink);
}

/* View Options: multi-variation groups get a button too, but a pill-shaped
   outline in charcoal (not teal-filled) so "add to cart" and "go choose a
   variation" never read as the same action at a glance. */
.shelf-card__view {
    margin-top: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    background: transparent;
    border: 1.5px solid var(--color-charcoal);
    border-radius: 999px;
    padding: 0.68rem 1rem;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shelf-card__view:hover,
.shelf-card__view:focus-visible {
    background: var(--color-charcoal);
    color: var(--color-ivory);
    transform: translateY(-1px);
}

.shelf-card__view:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* --- SPOKEN FOR stamp (the signature) ------------------------------------------ */

.shelf-card.is-claimed .shelf-card__frame::after,
.specimen-card.is-claimed .specimen-card__frame:first-of-type::after,
.specimen-card.is-claimed .specimen-card__strip::after {
    content: 'Spoken For';
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.45em 1em;
    border: 1.5px solid var(--color-gold);
    border-radius: 2px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-variant: small-caps;
    letter-spacing: 0.22em;
    white-space: nowrap;
    color: var(--color-charcoal);
    background: rgba(246, 243, 238, 0.92);
    box-shadow: 0 2px 10px rgba(30, 30, 32, 0.18);
    transform: translate(-50%, -50%) rotate(-8deg);
    pointer-events: none;
    z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
    .shelf-card.is-claimed .shelf-card__frame::after,
    .specimen-card.is-claimed .specimen-card__frame:first-of-type::after,
    .specimen-card.is-claimed .specimen-card__strip::after {
        animation: bb-stamp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@keyframes bb-stamp {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-8deg) scale(1.6);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-8deg) scale(1);
    }
}

/* --- Specimen picker page ----------------------------------------------------- */

.specimen-head {
    background: var(--color-bisque);
    padding: var(--space-lg) var(--space-lg);
}

.specimen-head__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.specimen-head__crumb {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
    display: flex;
    gap: 0.5em;
}

.specimen-head__crumb a {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(36, 91, 97, 0.3);
    padding: 0.35rem 0;
}

.specimen-head__crumb a:hover,
.specimen-head__crumb a:focus-visible {
    color: var(--color-charcoal);
}

.specimen-head__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    line-height: 1.05;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-sm);
    text-wrap: balance;
}

.specimen-head__meta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(30, 30, 32, 0.75);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
}

.specimen-head__maker {
    font-style: italic;
}

.specimen-head__tally {
    color: var(--color-primary);
}

.specimen-head__price {
    font-weight: 600;
    color: var(--color-charcoal);
    font-variant-numeric: tabular-nums;
}

.specimen-head__dot {
    color: var(--color-gold);
}

/* --- The numbered run ----------------------------------------------------------- */

.specimen-run {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
}

.specimen-run__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.specimen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: var(--space-lg) var(--space-md);
}

.specimen-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    scroll-margin-top: 100px;
}

.specimen-card__frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-bg-alt);
    flex-shrink: 0;
}

.specimen-card__frame .specimen-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.specimen-card__placeholder {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(36, 91, 97, 0.05) 0 12px, rgba(36, 91, 97, 0.09) 12px 24px);
}

/* Filmstrip: native scroll-snap, thumb-swiped; a sliver of the next frame
   peeks so the strip reads as swipeable without being told. */
.specimen-card__media {
    position: relative;
}

.specimen-card__strip {
    position: relative;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 4px;
    -webkit-overflow-scrolling: touch;
}

.specimen-card__strip::-webkit-scrollbar {
    display: none;
}

.specimen-card__strip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.specimen-card__strip .specimen-card__frame {
    flex: 0 0 92%;
    scroll-snap-align: start;
    border-radius: 0;
}

.specimen-card__strip .specimen-card__frame + .specimen-card__frame {
    margin-left: 2px;
}

/* The peek earns its keep on a thumb. With a mouse there are arrows on hover
   and dots underneath, so the sliver is just a cut-off second photo: fill the
   frame instead. */
@media (hover: hover) and (pointer: fine) {
    .specimen-card__strip .specimen-card__frame {
        flex-basis: 100%;
    }
}

.specimen-card__dots {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    padding-top: 0.5rem;
}

.specimen-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(196, 162, 101, 0.4);
    transition: background 0.3s ease, transform 0.3s ease;
}

.specimen-card__dot.is-current {
    background: var(--gold-ink);
    transform: scale(1.25);
}

/* Desktop-only filmstrip arrows (makers.js injects them under hover+fine). */
.specimen-card__arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    background: rgba(246, 243, 238, 0.9);
    color: var(--color-charcoal);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
}

.specimen-card__arrow--prev { left: 8px; }
.specimen-card__arrow--next { right: 8px; }

.specimen-card__media.has-arrows:hover .specimen-card__arrow,
.specimen-card__arrow:focus-visible {
    opacity: 1;
}

.specimen-card__arrow:hover {
    background: var(--color-ivory);
}

.specimen-card__arrow:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.specimen-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.7rem;
}

.specimen-card__num {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: var(--gold-ink);
}

.specimen-card__note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: 1.5;
    color: rgba(30, 30, 32, 0.7);
    margin: 0;
}

.specimen-card__price {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-charcoal);
    font-variant-numeric: tabular-nums;
}

.specimen-card__price del {
    color: rgba(30, 30, 32, 0.6);
    font-weight: 400;
    margin-right: 0.4em;
}

/* --- Specimen footer ---------------------------------------------------------- */

.specimen-foot {
    padding: var(--space-md) var(--space-lg) var(--space-xl);
}

.specimen-foot__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    border-top: 1px solid rgba(30, 30, 32, 0.1);
    padding-top: var(--space-md);
}

.specimen-foot__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(36, 91, 97, 0.35);
    padding-bottom: 1px;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.specimen-foot__link:hover,
.specimen-foot__link:focus-visible {
    color: var(--color-charcoal);
    border-color: var(--color-charcoal);
}

/* --- Cross-link + visit bands --------------------------------------------------- */

.shelves-cross {
    background: var(--color-charcoal);
    color: var(--color-ivory);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
}

.shelves-cross__inner {
    max-width: 640px;
    margin: 0 auto;
}

.shelves-cross__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-sm);
}

.shelves-cross__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    margin: 0 0 var(--space-sm);
}

.shelves-cross__text {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.7;
    opacity: 0.75;
    margin: 0 0 var(--space-md);
}

.shelves-cross__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-charcoal);
    background: var(--color-gold);
    padding: 0.85rem 1.5rem;
    border-radius: 2px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.shelves-cross__link:hover,
.shelves-cross__link:focus-visible {
    background: var(--color-ivory);
    transform: translateY(-1px);
}

.shelves-visit {
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
}

.shelves-visit__inner {
    max-width: 640px;
    margin: 0 auto;
}

.shelves-visit__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: var(--space-sm);
}

.shelves-visit__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: var(--color-charcoal);
    margin: 0 0 var(--space-sm);
}

.shelves-visit__text {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.7;
    color: rgba(30, 30, 32, 0.75);
    margin: 0 0 var(--space-md);
}

.shelves-visit__link {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-ivory);
    background: var(--color-primary);
    padding: 0.85rem 1.5rem;
    border-radius: 2px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.shelves-visit__link:hover,
.shelves-visit__link:focus-visible {
    background: var(--color-charcoal);
    transform: translateY(-1px);
}

/* --- Responsive -------------------------------------------------------------------- */

@media (max-width: 820px) {
    .shelves-head,
    .shelf,
    .shelves-flat,
    .specimen-head,
    .specimen-run,
    .specimen-foot,
    .shelves-cross,
    .shelves-visit {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .shelves-rail {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .shelves-head__meta {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .shelf-grid,
    .specimen-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
        gap: var(--space-md);
    }
}

@media (max-width: 560px) {
    .shelves-head,
    .shelf,
    .shelves-flat,
    .specimen-head,
    .specimen-run,
    .specimen-foot {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .shelves-rail {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .shelf-grid,
    .specimen-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md) var(--space-sm);
    }

    .shelf__note {
        gap: 0.2rem 0.6rem;
    }

    .shelf-card__name {
        font-size: 1rem;
    }
}

/* --- Reduced motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .shelf-card__image,
    .shelf-card__add,
    .shelf-card__view,
    .specimen-card__add,
    .shelves-cross__link,
    .shelves-visit__link,
    .shelves-rail__chip,
    .shelves-rail__sort-opt,
    .specimen-foot__link {
        transition-duration: 0.01ms;
    }

    .shelf-card__link:hover .shelf-card__image {
        transform: none;
    }

    .specimen-card__strip {
        scroll-behavior: auto;
    }
}

/* --- The piece page: one consignment one-off, full depth --------------------- */

.piece {
    background: var(--color-bg);
    color: var(--color-text);
    --gold-ink: #82682F;
    --rose-ink: #96595E;
}

.piece-main {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.piece-main__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.piece__hero {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-bg-alt);
}

.piece__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contain-fit photos (near-square / landscape / very tall) would letterbox
   inside the 4:5 frame, stranding the accent and hint in the empty bands.
   Shrink the frame to the image in both dimensions so the decorations always
   ride the actual photo edges, with no distortion and no re-stranding. */
.piece__hero.is-contain {
    aspect-ratio: auto;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    background: transparent;
}

.piece__hero.is-contain .piece__hero-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
}

.piece__hero--empty {
    background:
        repeating-linear-gradient(45deg, rgba(36, 91, 97, 0.05) 0 12px, rgba(36, 91, 97, 0.09) 12px 24px);
}

.piece__hero-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    background: rgba(246, 243, 238, 0.9);
    border-radius: 2px;
    padding: 0.3rem 0.55rem;
}

.piece__accent {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-top: 2px solid var(--color-gold);
    border-right: 2px solid var(--color-gold);
    opacity: 0.9;
}

.piece__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.piece__thumb {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-bg-alt);
}

.piece__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.piece__num {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: var(--gold-ink);
    margin: var(--space-sm) 0 0.4rem;
}

.piece__num--only {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.piece__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.05;
    color: var(--color-charcoal);
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

.piece__maker {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: rgba(30, 30, 32, 0.72);
    margin: 0 0 var(--space-sm);
}

.piece__price {
    font-family: var(--font-body);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 600;
    color: var(--color-charcoal);
    font-variant-numeric: tabular-nums;
    margin: 0 0 var(--space-sm);
}

.piece__buy .piece__add {
    width: 100%;
    max-width: 22rem;
    font-size: 0.9rem;
    padding: 0.95rem 1.2rem;
}

.piece__note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: rgba(30, 30, 32, 0.7);
    margin: 0.6rem 0 0;
}

.piece__desc {
    border-top: 1px solid rgba(30, 30, 32, 0.12);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

.piece__desc p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.75;
    color: rgba(30, 30, 32, 0.85);
    margin: 0;
    max-width: 52ch;
}

.piece__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    border-top: 1px solid rgba(30, 30, 32, 0.12);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

/* The SPOKEN FOR stamp lands on the hero when the piece page add fires. */
.piece:has(.piece__buy.is-claimed) .piece__hero::after {
    content: 'Spoken For';
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.45em 1em;
    border: 1.5px solid var(--color-gold);
    border-radius: 2px;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-variant: small-caps;
    letter-spacing: 0.22em;
    white-space: nowrap;
    color: var(--color-charcoal);
    background: rgba(246, 243, 238, 0.92);
    box-shadow: 0 2px 10px rgba(30, 30, 32, 0.18);
    transform: translate(-50%, -50%) rotate(-8deg);
    pointer-events: none;
    z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
    .piece:has(.piece__buy.is-claimed) .piece__hero::after {
        animation: bb-stamp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

/* Details link on picker cards: the door to the piece page. */
.specimen-card__details {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(36, 91, 97, 0.35);
    padding: 0.3rem 0 0.25rem;
    width: fit-content;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.specimen-card__details:hover,
.specimen-card__details:focus-visible {
    color: var(--color-charcoal);
    border-color: var(--color-charcoal);
}

@media (max-width: 820px) {
    .piece-main {
        padding: var(--space-md) var(--space-md) var(--space-lg);
    }

    .piece-main__inner {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}