/* =========================
   BLACKWOOD MEMBER BOOKSHELF
   Private shelf drawer + staged shelves + image customisation
   Clean Phase 2C / 2E visual layer
========================= */

:root {
    --bookshelf-black: #050403;
    --bookshelf-deep: #0b0704;
    --bookshelf-panel: rgba(10, 7, 4, 0.86);
    --bookshelf-panel-soft: rgba(18, 12, 7, 0.78);
    --bookshelf-cream: #f1eadf;
    --bookshelf-muted: rgba(241, 234, 223, 0.66);
    --bookshelf-muted-soft: rgba(241, 234, 223, 0.48);
    --bookshelf-gold: #d5ad72;
    --bookshelf-copper: #b36a21;
    --bookshelf-copper-bright: #d18332;
    --bookshelf-line: rgba(179, 106, 33, 0.32);
    --bookshelf-line-strong: rgba(213, 173, 114, 0.54);
    --bookshelf-success: #9fc79f;
    --bookshelf-error: #d97968;
}

/* =========================
   OUTER WRAPPER
========================= */

.blackwood-bookshelf-section {
    position: relative;
}

.blackwood-bookshelf,
.blackwood-bookshelf * {
    box-sizing: border-box;
}

.blackwood-bookshelf {
    width: 100%;
    color: var(--bookshelf-cream);
}

.bookshelf-drawer {
    overflow: hidden;

    border: 1px solid var(--bookshelf-line);
    border-radius: 12px;

    background:
        radial-gradient(circle at top left, rgba(179, 106, 33, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)),
        rgba(5, 4, 3, 0.74);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.bookshelf-drawer-summary {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;

    padding: clamp(22px, 4vw, 34px);

    list-style: none;
    cursor: pointer;
}

.bookshelf-drawer-summary::-webkit-details-marker {
    display: none;
}

.bookshelf-drawer-summary::marker {
    content: "";
}

.bookshelf-drawer-title-block h2 {
    margin: 0 0 10px;

    color: var(--bookshelf-cream);

    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.02;
    font-weight: 400;
}

.bookshelf-drawer-title-block p {
    max-width: 760px;
    margin: 0;

    color: var(--bookshelf-muted);

    font-size: 15px;
    line-height: 1.65;
}

.bookshelf-kicker,
.bookshelf-modal-kicker {
    margin: 0 0 8px;

    color: var(--bookshelf-gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bookshelf-drawer-summary-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bookshelf-total-pill,
.bookshelf-stage-header > span,
.bookshelf-customisation-meta,
.bookshelf-stage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 8px 14px;

    border: 1px solid var(--bookshelf-line-strong);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.42);
    color: var(--bookshelf-gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bookshelf-drawer-chevrons {
    position: relative;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(213, 173, 114, 0.38);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.34);
}

.bookshelf-drawer-chevrons::before,
.bookshelf-drawer-chevrons::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 9px;
    height: 9px;

    border-right: 2px solid var(--bookshelf-gold);
    border-bottom: 2px solid var(--bookshelf-gold);

    transform: translate(-50%, -62%) rotate(45deg);
}

.bookshelf-drawer[open] .bookshelf-drawer-chevrons::before,
.bookshelf-drawer[open] .bookshelf-drawer-chevrons::after {
    transform: translate(-50%, -36%) rotate(225deg);
}

.bookshelf-drawer-panel {
    padding: 0 clamp(18px, 4vw, 34px) clamp(24px, 4vw, 36px);
}

/* =========================
   HEADER
========================= */

.bookshelf-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;

    margin: 0 0 20px;
    padding-top: 24px;

    border-top: 1px solid rgba(179, 106, 33, 0.2);
}

.bookshelf-header h3 {
    margin: 0 0 8px;

    color: var(--bookshelf-cream);

    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.05;
    font-weight: 400;
}

.bookshelf-header p {
    max-width: 720px;
    margin: 0;

    color: var(--bookshelf-muted);

    font-size: 14.5px;
    line-height: 1.6;
}

.bookshelf-add-button,
.bookshelf-modal-button {
    min-height: 42px;
    padding: 11px 18px;

    border: 1px solid rgba(213, 173, 114, 0.62);
    border-radius: 999px;

    background:
        radial-gradient(circle at top left, rgba(213, 173, 114, 0.16), transparent 44%),
        rgba(0, 0, 0, 0.44);
    color: var(--bookshelf-cream);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;

    cursor: pointer;
}

.bookshelf-add-button:hover,
.bookshelf-add-button:focus-visible,
.bookshelf-modal-button:hover,
.bookshelf-modal-button:focus-visible {
    border-color: rgba(255, 214, 154, 0.9);
    background-color: rgba(179, 106, 33, 0.18);
    outline: none;
}

/* =========================
   STAGE SUMMARY
========================= */

.bookshelf-stage-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin: 0 0 22px;
}

.bookshelf-stage-pill {
    min-height: 32px;
    padding: 7px 11px;

    border-color: rgba(179, 106, 33, 0.28);
    color: rgba(241, 234, 223, 0.56);
}

.bookshelf-stage-pill.has-books {
    border-color: rgba(213, 173, 114, 0.52);
    color: var(--bookshelf-gold);
}

.bookshelf-stage-pill span {
    display: inline-grid;
    place-items: center;

    min-width: 22px;
    height: 22px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);
    color: var(--bookshelf-cream);
}

/* =========================
   COMPACT CUSTOMISATION PANEL
========================= */

.bookshelf-customisation-panel {
    margin: 0 0 28px;
    padding: 20px;

    border: 1px solid rgba(179, 106, 33, 0.28);
    border-radius: 12px;

    background:
        radial-gradient(circle at top left, rgba(179, 106, 33, 0.12), transparent 38%),
        rgba(0, 0, 0, 0.28);
}

.bookshelf-customisation-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;

    margin-bottom: 14px;
}

.bookshelf-customisation-header h3 {
    margin: 0 0 8px;

    color: var(--bookshelf-cream);

    font-size: clamp(23px, 3vw, 32px);
    line-height: 1.08;
    font-weight: 400;
}

.bookshelf-customisation-header p,
.bookshelf-customisation-record p {
    margin: 0;

    color: var(--bookshelf-muted);

    font-size: 13.5px;
    line-height: 1.55;
}

.bookshelf-customisation-meta {
    flex-direction: column;

    min-width: 76px;
    min-height: 52px;
}

.bookshelf-customisation-meta strong {
    color: var(--bookshelf-cream);
    font-size: 14px;
}

.bookshelf-customisation-meta span {
    color: var(--bookshelf-gold);
    font-size: 8px;
}

.bookshelf-customisation-record {
    margin: 0 0 14px;
}

.bookshelf-customisation-selected-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;

    margin-top: 12px;
}

.bookshelf-customisation-selected-grid div {
    min-height: auto;
    padding: 9px 10px;

    border: 1px solid rgba(179, 106, 33, 0.22);
    border-radius: 9px;

    background: rgba(0, 0, 0, 0.32);
}

.bookshelf-customisation-selected-grid span {
    display: block;

    margin-bottom: 4px;

    color: var(--bookshelf-gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bookshelf-customisation-selected-grid strong {
    display: block;

    color: var(--bookshelf-cream);

    font-size: 11px;
    line-height: 1.25;
}

/* Filters */

.bookshelf-customisation-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin: 0 0 12px;
}

.bookshelf-customisation-filters button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 30px;
    padding: 6px 10px;

    border: 1px solid rgba(179, 106, 33, 0.28);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.36);
    color: rgba(241, 234, 223, 0.58);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    cursor: pointer;
}

.bookshelf-customisation-filters button:hover,
.bookshelf-customisation-filters button:focus-visible {
    border-color: rgba(213, 173, 114, 0.72);
    color: var(--bookshelf-cream);
    outline: none;
}

.bookshelf-customisation-filters button.is-active {
    border-color: rgba(213, 173, 114, 0.86);
    background: rgba(179, 106, 33, 0.15);
    color: var(--bookshelf-cream);
}

.bookshelf-customisation-filters strong {
    display: inline-grid;
    place-items: center;

    min-width: 19px;
    height: 19px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);
    color: var(--bookshelf-gold);

    font-size: 9px;
}

/* Status */

.bookshelf-status,
.bookshelf-customisation-status,
.bookshelf-modal-status {
    min-height: 20px;
    margin: 0 0 16px;

    color: var(--bookshelf-muted-soft);

    font-size: 13px;
    line-height: 1.5;
}

.bookshelf-status.is-success,
.bookshelf-customisation-status.is-success,
.bookshelf-modal-status.is-success {
    color: var(--bookshelf-success);
}

.bookshelf-status.is-error,
.bookshelf-customisation-status.is-error,
.bookshelf-modal-status.is-error {
    color: var(--bookshelf-error);
}

.bookshelf-status.is-loading,
.bookshelf-customisation-status.is-loading,
.bookshelf-modal-status.is-loading {
    color: var(--bookshelf-cream);
}

/* Customisation item cards */

.bookshelf-customisation-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;

    margin-top: 10px;
}

.bookshelf-customisation-item {
    position: relative;

    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 6px;
    align-items: start;

    min-height: 0;
    padding: 11px;

    border: 1px solid rgba(179, 106, 33, 0.28);
    border-radius: 10px;

    background:
        radial-gradient(circle at top left, rgba(213, 173, 114, 0.07), transparent 38%),
        rgba(0, 0, 0, 0.32);
    color: var(--bookshelf-cream);

    text-align: left;
    cursor: pointer;
}

.bookshelf-customisation-item:hover,
.bookshelf-customisation-item:focus-visible {
    border-color: rgba(213, 173, 114, 0.66);
    outline: none;
}

.bookshelf-customisation-item.is-selected {
    border-color: rgba(159, 199, 159, 0.72);
    background:
        radial-gradient(circle at top left, rgba(159, 199, 159, 0.12), transparent 38%),
        rgba(0, 0, 0, 0.38);
}

.bookshelf-customisation-item.is-locked {
    opacity: 0.46;
    cursor: not-allowed;
}

.bookshelf-customisation-item-image-wrap {
    position: relative;
    overflow: hidden;

    display: grid;
    place-items: center;

    width: 100%;
    min-height: 66px;
    aspect-ratio: 16 / 7;
    margin-bottom: 4px;

    border: 1px solid rgba(213, 173, 114, 0.22);
    border-radius: 8px;

    background:
        radial-gradient(circle at center, rgba(213, 173, 114, 0.13), transparent 58%),
        rgba(0, 0, 0, 0.34);
}

.bookshelf-customisation-item-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;
    max-height: 72px;

    object-fit: contain;
    object-position: center;

    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.5));
}

.bookshelf-customisation-item-image-wrap.is-empty span,
.bookshelf-customisation-item-image-wrap.is-image-missing span {
    color: rgba(241, 234, 223, 0.58);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bookshelf-customisation-item.is-locked .bookshelf-customisation-item-image-wrap img {
    filter:
        grayscale(1)
        brightness(0.58)
        drop-shadow(0 12px 16px rgba(0, 0, 0, 0.5));
}

.bookshelf-customisation-item-kicker {
    color: var(--bookshelf-gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bookshelf-customisation-item strong {
    display: block;

    color: var(--bookshelf-cream);

    font-size: 13px;
    line-height: 1.15;
}

.bookshelf-customisation-item small {
    display: -webkit-box;
    overflow: hidden;

    color: var(--bookshelf-muted);

    font-size: 11px;
    line-height: 1.35;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bookshelf-customisation-item em {
    display: -webkit-box;
    overflow: hidden;

    margin-top: auto;

    color: var(--bookshelf-gold);

    font-size: 10.5px;
    line-height: 1.3;
    font-style: italic;

    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.bookshelf-customisation-actions {
    margin-top: 18px;
}

/* =========================
   SHELF BOARD / STAGES
========================= */

.bookshelf-board {
    display: grid;
    gap: 18px;
}

.bookshelf-stage {
    position: relative;
    overflow: hidden;

    padding: 24px 20px 18px;

    border: 1px solid rgba(179, 106, 33, 0.32);
    border-radius: 11px;

    background:
        radial-gradient(circle at top left, rgba(179, 106, 33, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(30, 20, 12, 0.92), rgba(5, 4, 3, 0.96));

    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.bookshelf-stage.is-drag-over {
    border-color: rgba(159, 199, 159, 0.74);
    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.34),
        0 0 0 3px rgba(159, 199, 159, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.bookshelf-stage-header {
    position: relative;
    z-index: 20;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;

    margin-bottom: 18px;
}

.bookshelf-stage-header h3 {
    margin: 0 0 7px;

    color: var(--bookshelf-cream);

    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.05;
    font-weight: 400;
}

.bookshelf-stage-header p {
    margin: 0;

    color: var(--bookshelf-muted);

    font-size: 14px;
    line-height: 1.5;
}

.bookshelf-stage-header > span {
    min-height: 44px;
    align-self: start;
}

/* The actual visual shelf scene */

.bookshelf-stage-display {
    position: relative;
    overflow: hidden;

    min-height: 390px;
    margin-top: 16px;
    padding: 18px 24px 88px;

    border: 1px solid rgba(213, 173, 114, 0.14);
    border-radius: 10px;

    background-color: rgba(0, 0, 0, 0.34);

    box-shadow:
        inset 0 0 70px rgba(0, 0, 0, 0.54),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Soft top glass/shadow layer */
.bookshelf-stage-display::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 26%),
        radial-gradient(circle at 16% 8%, rgba(255, 238, 205, 0.07), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(60, 90, 130, 0.08), transparent 34%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.26) 100%);

    pointer-events: none;
}

/* Wooden shelf ledge */
.bookshelf-stage-display::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 78px;
    z-index: 14;

    height: 18px;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            rgba(54, 25, 9, 0.98),
            rgba(151, 82, 27, 0.82),
            rgba(49, 22, 8, 0.98)
        );

    box-shadow:
        0 -10px 35px rgba(0, 0, 0, 0.5),
        0 12px 22px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 214, 154, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.56);

    pointer-events: none;
}

.bookshelf-stage-spine-list,
.bookshelf-spine-list {
    position: relative;
    z-index: 18;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 26px;

    min-height: 300px;
    padding: 0 102px;
}

.bookshelf-stage-empty {
    position: relative;
    z-index: 18;

    display: grid;
    place-items: center;

    min-height: 180px;
    margin: 22px 20px 72px;
    padding: 22px;

    border: 1px dashed rgba(213, 173, 114, 0.26);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.22);
}

.bookshelf-stage-empty p {
    margin: 0;

    color: var(--bookshelf-muted-soft);

    font-size: 14px;
    text-align: center;
}

/* =========================
   SHELF DECORATION IMAGES
========================= */

.bookshelf-stage-customisation {
    position: absolute;
    inset: 0;
    z-index: 6;

    pointer-events: none;
}

.bookshelf-stage-decoration {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    writing-mode: horizontal-tb !important;

    pointer-events: none;
}

.bookshelf-stage-decoration img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(0 18px 20px rgba(0, 0, 0, 0.62))
        drop-shadow(0 0 6px rgba(213, 173, 114, 0.05))
        saturate(0.88)
        brightness(0.9);
}

/* Hide empty visual choices on the actual shelf */
.bookshelf-stage-decoration.has-text {
    display: none !important;
}

/* Lighting overlay */
.bookshelf-stage-decoration.bookshelf-stage-lighting {
    top: -60px;
    left: 50%;
    z-index: 3;

    width: min(760px, 108%);
    height: 350px;

    opacity: 0.38;
    mix-blend-mode: screen;

    transform: translateX(-50%);

    -webkit-mask-image: radial-gradient(circle, black 0%, black 42%, transparent 76%);
    mask-image: radial-gradient(circle, black 0%, black 42%, transparent 76%);
}

.bookshelf-stage-decoration.bookshelf-stage-lighting img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    mix-blend-mode: screen;

    filter:
        brightness(1.24)
        contrast(1.04)
        saturate(0.9);
}

/* Bookends */
.bookshelf-stage-decoration.bookshelf-stage-bookend {
    bottom: 78px;
    z-index: 15;

    width: 70px;
    height: 132px;

    opacity: 0.88;
}

.bookshelf-stage-decoration.bookshelf-stage-bookend.is-left {
    left: 18px;
}

.bookshelf-stage-decoration.bookshelf-stage-bookend.is-right {
    right: 18px;
    transform: scaleX(-1);
}

/* Hanging charm */
.bookshelf-stage-decoration.bookshelf-stage-charm {
    top: 28px;
    right: 132px;
    z-index: 12;

    width: 50px;
    height: 68px;

    opacity: 0.9;
}

.bookshelf-stage-decoration.bookshelf-stage-charm::before {
    content: "";
    position: absolute;
    top: -58px;
    left: 50%;

    width: 1px;
    height: 64px;

    background: rgba(213, 173, 114, 0.24);

    transform: translateX(-50%);
}

/* Shelf object */
.bookshelf-stage-decoration.bookshelf-stage-object {
    right: 128px;
    bottom: 78px;
    z-index: 16;

    width: 102px;
    height: 76px;

    opacity: 0.92;
}

/* Nameplate pulled forward */
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    left: 50%;
    bottom: 48px;
    z-index: 24;

    width: min(280px, 45%);
    height: 62px;

    opacity: 1;

    transform: translateX(-50%);
}

.bookshelf-stage-decoration.bookshelf-stage-nameplate img {
    filter:
        drop-shadow(0 18px 18px rgba(0, 0, 0, 0.74))
        drop-shadow(0 0 8px rgba(213, 173, 114, 0.14))
        saturate(0.98)
        brightness(1.03);
}

/* Broken image fallback */
.bookshelf-stage-decoration.is-image-missing {
    display: none !important;
}

/* =========================
   BOOK SPINES
========================= */

.bookshelf-book-slot {
    position: relative;
    z-index: 20;

    display: grid;
    justify-items: center;

    width: 88px;

    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

.bookshelf-book-slot.is-dragging {
    opacity: 0.42;
    transform: scale(0.96);
}

.bookshelf-book-slot.is-drop-before::before,
.bookshelf-book-slot.is-drop-after::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 0;

    width: 3px;

    border-radius: 999px;

    background: var(--bookshelf-success);
    box-shadow: 0 0 18px rgba(159, 199, 159, 0.46);
}

.bookshelf-book-slot.is-drop-before::before {
    left: -13px;
}

.bookshelf-book-slot.is-drop-after::after {
    right: -13px;
}

.bookshelf-spine-button {
    position: relative;
    z-index: 20;
    overflow: hidden;

    display: block;

    width: 76px;
    height: 244px;
    padding: 0;

    border: 1px solid rgba(213, 173, 114, 0.32);
    border-radius: 5px;

    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 18%, rgba(0, 0, 0, 0.26) 82%, rgba(255, 255, 255, 0.06)),
        rgba(0, 0, 0, 0.62);

    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.55),
        inset 7px 0 10px rgba(255, 255, 255, 0.05),
        inset -8px 0 12px rgba(0, 0, 0, 0.5);

    cursor: pointer;
}

.bookshelf-spine-button:hover,
.bookshelf-spine-button:focus-visible {
    border-color: rgba(255, 214, 154, 0.74);
    outline: none;
    transform: translateY(-4px);
}

.bookshelf-spine-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

.bookshelf-spine-button.is-owned {
    border-color: rgba(213, 173, 114, 0.52);
}

.bookshelf-spine-button.is-read {
    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.55),
        0 0 0 2px rgba(159, 199, 159, 0.08),
        inset 7px 0 10px rgba(255, 255, 255, 0.05),
        inset -8px 0 12px rgba(0, 0, 0, 0.5);
}

.bookshelf-spine-button.is-favourite {
    border-color: rgba(213, 173, 114, 0.86);
}

.bookshelf-spine-fallback {
    position: absolute;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 12px;

    color: var(--bookshelf-cream);

    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    writing-mode: vertical-rl;
}

.bookshelf-spine-button.is-image-missing .bookshelf-spine-fallback {
    display: flex;
}

.bookshelf-spine-badges {
    display: none;
}

/* Controls sit below the shelf scene, while the book spine sits on the wooden ledge */
.bookshelf-spine-controls {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 26;

    display: grid;
    gap: 5px;

    width: 88px;

    transform: translateX(-50%);
}

.bookshelf-spine-controls label {
    display: grid;
    gap: 3px;

    margin: 0;

    color: var(--bookshelf-gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.bookshelf-spine-controls select {
    width: 100%;
    min-height: 29px;
    padding: 5px 7px;

    border: 1px solid rgba(179, 106, 33, 0.42);
    border-radius: 6px;

    background: rgba(0, 0, 0, 0.78);
    color: var(--bookshelf-cream);

    font-size: 10px;
    font-weight: 700;
}

.bookshelf-spine-controls select:focus {
    border-color: rgba(213, 173, 114, 0.82);
    outline: none;
}

.bookshelf-order-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.bookshelf-order-controls button {
    min-height: 28px;

    border: 1px solid rgba(179, 106, 33, 0.44);
    border-radius: 6px;

    background: rgba(0, 0, 0, 0.72);
    color: var(--bookshelf-gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}

.bookshelf-order-controls button:hover,
.bookshelf-order-controls button:focus-visible {
    border-color: rgba(213, 173, 114, 0.82);
    color: var(--bookshelf-cream);
    outline: none;
}

.bookshelf-order-controls button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* =========================
   EMPTY / ERROR CARDS
========================= */

.bookshelf-empty-card {
    padding: clamp(22px, 4vw, 32px);

    border: 1px dashed rgba(179, 106, 33, 0.36);
    border-radius: 11px;

    background: rgba(0, 0, 0, 0.28);
    color: var(--bookshelf-muted);

    text-align: center;
}

.bookshelf-empty-card h3 {
    margin: 0 0 8px;

    color: var(--bookshelf-cream);

    font-size: clamp(24px, 4vw, 34px);
    font-weight: 400;
}

.bookshelf-empty-card p {
    margin: 0 0 10px;

    color: var(--bookshelf-muted);

    font-size: 14px;
    line-height: 1.6;
}

/* =========================
   MODAL
========================= */

.bookshelf-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
}

.bookshelf-modal-panel {
    position: relative;
    overflow: auto;

    width: min(980px, 100%);
    max-height: min(86vh, 880px);

    border: 1px solid rgba(213, 173, 114, 0.42);
    border-radius: 13px;

    background:
        radial-gradient(circle at top left, rgba(179, 106, 33, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(20, 13, 7, 0.98), rgba(4, 3, 2, 0.98));

    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.72);
}

.bookshelf-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;

    min-height: 34px;
    padding: 8px 12px;

    border: 1px solid rgba(213, 173, 114, 0.42);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.5);
    color: var(--bookshelf-cream);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    cursor: pointer;
}

.bookshelf-modal-inner {
    padding: clamp(26px, 5vw, 46px);
}

.bookshelf-modal-title {
    margin: 0 0 12px;

    color: var(--bookshelf-cream);

    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.05;
    font-weight: 400;
}

.bookshelf-modal-copy {
    max-width: 760px;
    margin: 0 0 24px;

    color: var(--bookshelf-muted);

    font-size: 15px;
    line-height: 1.65;
}

.bookshelf-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bookshelf-picker-book {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;

    min-height: 122px;
    padding: 14px;

    border: 1px solid rgba(179, 106, 33, 0.3);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.34);
    color: var(--bookshelf-cream);

    text-align: left;
    cursor: pointer;
}

.bookshelf-picker-book:hover,
.bookshelf-picker-book:focus-visible {
    border-color: rgba(213, 173, 114, 0.7);
    outline: none;
}

.bookshelf-picker-book img {
    width: 54px;
    height: 92px;

    border-radius: 4px;

    object-fit: contain;
}

.bookshelf-picker-book strong {
    display: block;

    margin-bottom: 5px;

    color: var(--bookshelf-cream);

    font-size: 16px;
    line-height: 1.25;
}

.bookshelf-picker-book span span {
    display: block;

    color: var(--bookshelf-muted);

    font-size: 12.5px;
    line-height: 1.4;
}

/* Record modal */

.bookshelf-record-layout {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: clamp(22px, 4vw, 36px);
    align-items: start;
}

.bookshelf-record-spine {
    width: 96px;
    height: 310px;

    border: 1px solid rgba(213, 173, 114, 0.38);
    border-radius: 6px;

    object-fit: contain;

    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.52);
}

.bookshelf-record-form {
    display: grid;
    gap: 16px;
}

.bookshelf-field {
    display: grid;
    gap: 8px;

    color: var(--bookshelf-gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bookshelf-field input,
.bookshelf-field select,
.bookshelf-field textarea,
.bookshelf-record-form select,
.bookshelf-record-form textarea {
    width: 100%;

    border: 1px solid rgba(179, 106, 33, 0.34);
    border-radius: 7px;

    background: rgba(0, 0, 0, 0.48);
    color: var(--bookshelf-cream);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.bookshelf-field input,
.bookshelf-field select,
.bookshelf-record-form select {
    min-height: 42px;
    padding: 9px 11px;
}

.bookshelf-field textarea,
.bookshelf-record-form textarea {
    min-height: 120px;
    padding: 12px;

    line-height: 1.55;
    resize: vertical;
}

.bookshelf-field input:focus,
.bookshelf-field select:focus,
.bookshelf-field textarea:focus,
.bookshelf-record-form select:focus,
.bookshelf-record-form textarea:focus {
    border-color: rgba(213, 173, 114, 0.78);
    outline: none;
    box-shadow: 0 0 0 3px rgba(179, 106, 33, 0.12);
}

.bookshelf-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bookshelf-check {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px;

    border: 1px solid rgba(179, 106, 33, 0.24);
    border-radius: 8px;

    background: rgba(0, 0, 0, 0.28);
    color: var(--bookshelf-muted);

    font-size: 13.5px;
    line-height: 1.35;
}

.bookshelf-check input {
    width: 18px;
    height: 18px;

    accent-color: var(--bookshelf-copper-bright);
}

.bookshelf-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.bookshelf-modal-button.primary {
    border-color: rgba(213, 173, 114, 0.82);
    background: rgba(179, 106, 33, 0.2);
}

.bookshelf-modal-button.danger {
    border-color: rgba(217, 121, 104, 0.62);
    color: #ffd3ca;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {
    .bookshelf-customisation-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bookshelf-customisation-selected-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bookshelf-stage-spine-list,
    .bookshelf-spine-list {
        gap: 22px;
        padding-inline: 84px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-object {
        right: 104px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-charm {
        right: 104px;
    }
}

@media (max-width: 980px) {
    .bookshelf-drawer-summary,
    .bookshelf-header,
    .bookshelf-customisation-header,
    .bookshelf-stage-header {
        grid-template-columns: 1fr;
    }

    .bookshelf-drawer-summary-side {
        justify-content: flex-start;
    }

    .bookshelf-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bookshelf-stage-decoration.bookshelf-stage-bookend {
        width: 58px;
        height: 112px;
    }
}

@media (max-width: 760px) {
    .bookshelf-customisation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bookshelf-customisation-selected-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bookshelf-stage-display {
        min-height: 340px;
        padding: 14px 12px 82px;
    }

    .bookshelf-stage-display::after {
        left: 12px;
        right: 12px;
        bottom: 72px;
    }

    .bookshelf-stage-spine-list,
    .bookshelf-spine-list {
        justify-content: center;
        gap: 18px;

        min-height: 260px;
        padding-inline: 8px;
    }

    .bookshelf-book-slot {
        width: 82px;
    }

    .bookshelf-spine-button {
        width: 68px;
        height: 218px;
    }

    .bookshelf-spine-controls {
        width: 82px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-bookend {
        display: none;
    }

    .bookshelf-stage-decoration.bookshelf-stage-object {
        right: 18px;
        bottom: 72px;

        width: 76px;
        height: 56px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-charm {
        top: 18px;
        right: 22px;

        width: 46px;
        height: 58px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        bottom: 42px;

        width: min(220px, 62%);
        height: 50px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-lighting {
        width: 100%;
        height: 230px;
    }

    .bookshelf-check-grid,
    .bookshelf-record-layout {
        grid-template-columns: 1fr;
    }

    .bookshelf-record-spine {
        width: 78px;
        height: 252px;
    }

    .bookshelf-modal {
        padding: 12px;
    }

    .bookshelf-modal-inner {
        padding: 24px 18px;
    }
}

@media (max-width: 520px) {
    .bookshelf-customisation-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .bookshelf-customisation-filters button {
        justify-content: space-between;
    }

    .bookshelf-stage {
        padding: 18px 14px;
    }

    .bookshelf-stage-display {
        min-height: 330px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-charm,
    .bookshelf-stage-decoration.bookshelf-stage-object {
        display: none;
    }

    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        width: min(200px, 68%);
    }
}

@media (max-width: 440px) {
    .bookshelf-customisation-grid,
    .bookshelf-customisation-selected-grid,
    .bookshelf-picker-grid,
    .bookshelf-customisation-filters {
        grid-template-columns: 1fr;
    }

    .bookshelf-stage-spine-list,
    .bookshelf-spine-list {
        gap: 16px;
    }

    .bookshelf-book-slot {
        width: 78px;
    }

    .bookshelf-spine-button {
        width: 64px;
        height: 204px;
    }

    .bookshelf-spine-controls {
        width: 78px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bookshelf-book-slot,
    .bookshelf-spine-button {
        transition: none;
    }
}
/* =========================
   NAMEPLATE FIX — SIT BELOW SHELF LEDGE
========================= */

.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    left: 50%;
    bottom: 10px;
    z-index: 17;

    width: min(230px, 36%);
    height: 44px;

    opacity: 0.96;

    transform: translateX(-50%);
}

.bookshelf-stage-decoration.bookshelf-stage-nameplate img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 12px 14px rgba(0, 0, 0, 0.72))
        drop-shadow(0 0 6px rgba(213, 173, 114, 0.12))
        saturate(0.96)
        brightness(1);
}

/* Keep the wooden shelf above the nameplate, but not cutting through it */
.bookshelf-stage-display::after {
    bottom: 78px;
    z-index: 19;
}

/* Keep book controls clickable and visually above the nameplate */
.bookshelf-spine-controls {
    z-index: 28;
}

/* Give the lower shelf area a little more room */
.bookshelf-stage-display {
    min-height: 405px;
    padding-bottom: 108px;
}

@media (max-width: 760px) {
    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        bottom: 8px;

        width: min(190px, 56%);
        height: 38px;
    }

    .bookshelf-stage-display {
        min-height: 365px;
        padding-bottom: 98px;
    }
}
/* =========================
   BOOK SPINE POLISH — REMOVE BOX BORDER
========================= */

.bookshelf-spine-button {
    border: 0;

    background: transparent;

    box-shadow:
        0 18px 26px rgba(0, 0, 0, 0.58),
        6px 0 10px rgba(0, 0, 0, 0.34);
}

.bookshelf-spine-button img {
    border-radius: 4px;

    filter:
        drop-shadow(0 14px 14px rgba(0, 0, 0, 0.46))
        saturate(0.94)
        brightness(0.96);
}

.bookshelf-spine-button:hover,
.bookshelf-spine-button:focus-visible {
    border: 0;
    outline: 1px solid rgba(213, 173, 114, 0.42);
    outline-offset: 4px;

    transform: translateY(-4px);
}

.bookshelf-spine-button.is-owned,
.bookshelf-spine-button.is-read,
.bookshelf-spine-button.is-favourite {
    border: 0;
}
/* =========================
   CUSTOMISATION COLLAPSIBLE DRAWER
========================= */

.bookshelf-customisation-drawer {
    padding: 0;
}

.bookshelf-customisation-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;

    padding: 18px 20px;

    list-style: none;
    cursor: pointer;
}

.bookshelf-customisation-summary::-webkit-details-marker {
    display: none;
}

.bookshelf-customisation-summary::marker {
    content: "";
}

.bookshelf-customisation-summary h3 {
    margin: 0 0 6px;

    color: var(--bookshelf-cream);

    font-size: clamp(23px, 3vw, 32px);
    line-height: 1.08;
    font-weight: 400;
}

.bookshelf-customisation-summary p {
    margin: 0;

    color: var(--bookshelf-muted);

    font-size: 13.5px;
    line-height: 1.55;
}

.bookshelf-customisation-summary-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bookshelf-customisation-toggle-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 8px 13px;

    border: 1px solid rgba(213, 173, 114, 0.48);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.36);
    color: var(--bookshelf-gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.bookshelf-customisation-drawer[open] .bookshelf-customisation-toggle-text {
    color: var(--bookshelf-cream);
}

.bookshelf-customisation-drawer[open] .bookshelf-customisation-toggle-text {
    font-size: 0;
}

.bookshelf-customisation-drawer[open] .bookshelf-customisation-toggle-text::after {
    content: "Close";

    font-size: 9px;
}

.bookshelf-customisation-inner {
    padding: 0 20px 20px;

    border-top: 1px solid rgba(179, 106, 33, 0.18);
}

.bookshelf-customisation-inner .bookshelf-customisation-record {
    padding-top: 16px;
}

@media (max-width: 760px) {
    .bookshelf-customisation-summary {
        grid-template-columns: 1fr;
    }

    .bookshelf-customisation-summary-side {
        justify-content: space-between;
    }
}
/* =========================
   FINAL SHELF FINE TUNE
   Light bloom + cleaner spines + forward nameplate
========================= */

/* 1) IMPORTANT:
   Let child decoration layers stack properly.
   The old z-index on the parent is trapping the nameplate behind the shelf.
*/
.bookshelf-stage-customisation {
    z-index: auto;
    pointer-events: none;
}

/* 2) LIGHTING:
   Bring the light further into view and soften it so it does not look cut off.
*/
.bookshelf-stage-display {
    overflow: hidden;
}

.bookshelf-stage-decoration.bookshelf-stage-lighting {
    top: -28px;
    left: 50%;
    z-index: 2;

    width: min(760px, 108%);
    height: 300px;

    opacity: 0.34;
    transform: translateX(-50%);
}

.bookshelf-stage-decoration.bookshelf-stage-lighting img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    mix-blend-mode: screen;

    filter:
        brightness(1.15)
        contrast(1.02)
        saturate(0.88);
}

/* 3) BOOKS:
   Remove the “button box” feeling so the spine art feels cleaner.
*/
.bookshelf-spine-button {
    overflow: visible;

    border: 0;
    background: transparent;
    box-shadow: none;
}

.bookshelf-spine-button:hover,
.bookshelf-spine-button:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-2px);
}

.bookshelf-spine-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;

    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}

/* Keep owned / read / favourite states subtle without reintroducing a full box */
.bookshelf-spine-button.is-owned img,
.bookshelf-spine-button.is-read img,
.bookshelf-spine-button.is-favourite img,
.bookshelf-spine-button.is-signed img {
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 6px rgba(213, 173, 114, 0.10));
}

/* 4) HELP THE SPINES SIT LOWER / FEEL RESTED ON THE SHELF */
.bookshelf-stage-display .bookshelf-spine-list,
.bookshelf-stage-display .bookshelf-stage-spine-list {
    align-items: end;
    padding: 14px 96px 64px;
}

.bookshelf-book-slot {
    width: 82px;
    gap: 6px;
}

.bookshelf-spine-button {
    width: 68px;
    height: 232px;
    margin-bottom: -2px;
}

/* 5) NAMEPLATE:
   Pull it visually forward so it sits over the front shelf ledge.
*/
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    left: 50%;
    bottom: 10px;
    z-index: 20;

    width: min(252px, 42%);
    height: 56px;

    opacity: 0.98;
    transform: translateX(-50%);
}

.bookshelf-stage-display::after {
    z-index: 8;
}

.bookshelf-stage-decoration.bookshelf-stage-nameplate img {
    filter:
        drop-shadow(0 12px 16px rgba(0, 0, 0, 0.56))
        drop-shadow(0 0 4px rgba(213, 173, 114, 0.08));
}

/* 6) BOOKENDS / OBJECTS:
   Slightly calmer placement so they support rather than compete.
*/
.bookshelf-stage-decoration.bookshelf-stage-bookend {
    bottom: 42px;
    width: 72px;
    height: 132px;
    opacity: 0.88;
}

.bookshelf-stage-decoration.bookshelf-stage-object {
    right: 124px;
    bottom: 46px;
    width: 100px;
    height: 72px;
    opacity: 0.92;
}

.bookshelf-stage-decoration.bookshelf-stage-charm {
    top: 24px;
    right: 124px;
    width: 52px;
    height: 68px;
    opacity: 0.92;
}

/* 7) Keep books above the shelf atmosphere, but below the front nameplate */
.bookshelf-stage-display .bookshelf-spine-list,
.bookshelf-stage-display .bookshelf-stage-spine-list,
.bookshelf-book-slot,
.bookshelf-spine-controls {
    position: relative;
    z-index: 12;
}

/* Tablet / mobile tidy */
@media (max-width: 760px) {
    .bookshelf-stage-decoration.bookshelf-stage-lighting {
        top: -18px;
        width: 108%;
        height: 220px;
        opacity: 0.30;
    }

    .bookshelf-stage-display .bookshelf-spine-list,
    .bookshelf-stage-display .bookshelf-stage-spine-list {
        padding: 10px 10px 62px;
        gap: 16px;
        justify-content: center;
    }

    .bookshelf-book-slot {
        width: 78px;
    }

    .bookshelf-spine-button {
        width: 64px;
        height: 214px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        bottom: 12px;
        width: min(210px, 64%);
        height: 48px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-object {
        right: 18px;
        width: 76px;
        height: 56px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-charm {
        right: 18px;
        width: 42px;
        height: 56px;
    }
}
/* =========================
   SHELF RECOVERY TUNE
   Books back on shelf + cleaner spines + forward nameplate
========================= */

/* Give the scene enough vertical room, but anchor the shelf line properly */
.bookshelf-stage-display {
    min-height: 430px;
    padding: 14px 24px 116px;
}

/* This is the physical wooden ledge the books should sit on */
.bookshelf-stage-display::after {
    bottom: 116px;
    z-index: 18;
}

/* Push the book row down so the spines sit on the shelf ledge */
.bookshelf-stage-display .bookshelf-spine-list,
.bookshelf-stage-display .bookshelf-stage-spine-list {
    align-items: flex-end;

    min-height: 390px;
    padding: 0 102px;
    gap: 26px;
}

/* Keep each book as a spine object, not a floating UI card */
.bookshelf-book-slot {
    width: 84px;
}

.bookshelf-spine-button {
    width: 72px;
    height: 236px;

    overflow: hidden;

    border: 0;
    background: transparent;
    box-shadow: none;
}

.bookshelf-spine-button img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 4px;

    object-fit: cover;
    object-position: center;

    filter:
        drop-shadow(0 14px 16px rgba(0, 0, 0, 0.56))
        saturate(0.96)
        brightness(0.98);
}

.bookshelf-spine-button:hover,
.bookshelf-spine-button:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: 1px solid rgba(213, 173, 114, 0.38);
    outline-offset: 4px;

    transform: translateY(-3px);
}

/* Controls sit just below the book spine, below the shelf ledge */
.bookshelf-spine-controls {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    z-index: 55;

    width: 88px;

    transform: translateX(-50%);
}

/* Nameplate comes right to the front and sits below the shelf */
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    left: 50%;
    bottom: 16px;
    z-index: 70;

    width: min(260px, 42%);
    height: 56px;

    opacity: 1;

    transform: translateX(-50%);
}

.bookshelf-stage-decoration.bookshelf-stage-nameplate img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 16px 18px rgba(0, 0, 0, 0.78))
        drop-shadow(0 0 8px rgba(213, 173, 114, 0.16))
        saturate(1)
        brightness(1.05);
}

/* Decorative objects sit on the same ledge as the books */
.bookshelf-stage-decoration.bookshelf-stage-bookend {
    bottom: 116px;
    z-index: 20;
}

.bookshelf-stage-decoration.bookshelf-stage-object {
    bottom: 118px;
    z-index: 22;
}

/* Light: no harsh cut-off, softer and wider */
.bookshelf-stage-decoration.bookshelf-stage-lighting {
    top: -38px;
    left: 50%;
    z-index: 4;

    width: min(760px, 108%);
    height: 320px;

    opacity: 0.28;
    mix-blend-mode: screen;

    transform: translateX(-50%);
}

.bookshelf-stage-decoration.bookshelf-stage-lighting img {
    object-fit: cover;
    object-position: center top;
    mix-blend-mode: screen;

    filter:
        brightness(1.12)
        contrast(1.02)
        saturate(0.88);
}

@media (max-width: 760px) {
    .bookshelf-stage-display {
        min-height: 390px;
        padding: 12px 12px 104px;
    }

    .bookshelf-stage-display::after {
        bottom: 104px;
    }

    .bookshelf-stage-display .bookshelf-spine-list,
    .bookshelf-stage-display .bookshelf-stage-spine-list {
        min-height: 340px;
        padding-inline: 8px;
        gap: 16px;
        justify-content: center;
    }

    .bookshelf-book-slot {
        width: 78px;
    }

    .bookshelf-spine-button {
        width: 64px;
        height: 212px;
    }

    .bookshelf-spine-controls {
        width: 78px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        bottom: 14px;
        width: min(210px, 64%);
        height: 46px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-object {
        bottom: 106px;
    }
}
/* =========================
   SHELF RESCUE TUNE
   Fix light rectangle + books sitting on shelf + nameplate forward
========================= */

/* Scene height and shelf ledge */
.bookshelf-stage-display {
    min-height: 400px;
    padding: 18px 24px 118px;
    overflow: hidden;
}

.bookshelf-stage-display::after {
    bottom: 92px;
    z-index: 14;
}

/* Stop the selected lighting image from showing as a hard rectangle */
.bookshelf-stage-decoration.bookshelf-stage-lighting {
    top: -18px;
    left: 50%;
    z-index: 3;

    width: min(760px, 110%);
    height: 300px;

    opacity: 0.5;
    transform: translateX(-50%);

    background:
        radial-gradient(circle at 50% 42%, rgba(255, 211, 128, 0.34), transparent 38%),
        radial-gradient(circle at 50% 45%, rgba(255, 173, 75, 0.18), transparent 64%);

    mix-blend-mode: screen;
    -webkit-mask-image: none;
    mask-image: none;
}

.bookshelf-stage-decoration.bookshelf-stage-lighting img {
    display: none;
}

/* Book row: bottom of books lines up with the shelf ledge */
.bookshelf-stage-display .bookshelf-spine-list,
.bookshelf-stage-display .bookshelf-stage-spine-list {
    position: relative;
    z-index: 18;

    height: 290px;
    min-height: 290px;
    padding: 0 102px;

    align-items: flex-end;
}

/* Book object is now exactly the spine height */
.bookshelf-book-slot {
    position: relative;
    z-index: 20;

    width: 88px;
    height: 244px;
    gap: 0;
}

/* Remove card/surround feel from the spine */
.bookshelf-spine-button {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 20;

    width: 76px;
    height: 244px;

    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;

    transform: translateX(-50%);
}

.bookshelf-spine-button:hover,
.bookshelf-spine-button:focus-visible {
    border: 0;
    outline: 1px solid rgba(213, 173, 114, 0.35);
    outline-offset: 4px;
    background: transparent;
    box-shadow: none;

    transform: translateX(-50%) translateY(-3px);
}

.bookshelf-spine-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        drop-shadow(0 12px 16px rgba(0, 0, 0, 0.48))
        brightness(0.96)
        saturate(0.96);
}

/* Controls sit below the shelf line */
.bookshelf-spine-controls {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    z-index: 52;

    width: 88px;

    transform: translateX(-50%);
}

/* Bookends and shelf objects sit on the ledge */
.bookshelf-stage-decoration.bookshelf-stage-bookend {
    bottom: 92px;
    z-index: 16;

    width: 70px;
    height: 132px;
}

.bookshelf-stage-decoration.bookshelf-stage-object {
    right: 128px;
    bottom: 92px;
    z-index: 17;

    width: 102px;
    height: 76px;
}

/* Nameplate sits in front, below the shelf lip */
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    left: 50%;
    bottom: 16px;
    z-index: 60;

    width: min(270px, 44%);
    height: 58px;

    opacity: 1;

    transform: translateX(-50%);
}

.bookshelf-stage-decoration.bookshelf-stage-nameplate img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 14px 16px rgba(0, 0, 0, 0.74))
        drop-shadow(0 0 8px rgba(213, 173, 114, 0.16))
        brightness(1.04)
        saturate(1);
}

/* Charm stays subtle */
.bookshelf-stage-decoration.bookshelf-stage-charm {
    top: 24px;
    right: 124px;
    z-index: 12;

    width: 48px;
    height: 64px;
}

/* Mobile tidy */
@media (max-width: 760px) {
    .bookshelf-stage-display {
        min-height: 365px;
        padding: 14px 12px 104px;
    }

    .bookshelf-stage-display::after {
        bottom: 82px;
    }

    .bookshelf-stage-display .bookshelf-spine-list,
    .bookshelf-stage-display .bookshelf-stage-spine-list {
        height: 260px;
        min-height: 260px;
        padding: 0 10px;
        gap: 16px;
        justify-content: center;
    }

    .bookshelf-book-slot {
        width: 78px;
        height: 214px;
    }

    .bookshelf-spine-button {
        width: 64px;
        height: 214px;
    }

    .bookshelf-spine-controls {
        width: 78px;
        top: calc(100% + 16px);
    }

    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        bottom: 12px;
        width: min(210px, 64%);
        height: 48px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-object {
        right: 18px;
        bottom: 82px;

        width: 76px;
        height: 56px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-charm {
        right: 18px;

        width: 42px;
        height: 56px;
    }
}
/* =========================================================
   BLACKWOOD BOOKSHELF — AUTHORITATIVE SHELF GEOMETRY
   Full spines + shared shelf baseline + fitted nameplate
   + bookends on shelf + non-clipped lighting
========================================================= */

.bookshelf-stage-display {
    --shelf-bottom: 88px;
    --shelf-height: 18px;
    --shelf-top: calc(var(--shelf-bottom) + var(--shelf-height));

    position: relative;
    overflow: hidden;

    min-height: 410px;
    padding: 0;

    isolation: isolate;
}


/* =========================================================
   LIGHTING
   Allow the selected lighting art to fade through the scene
   rather than stopping in a visible horizontal block.
========================================================= */

.bookshelf-stage-decoration.bookshelf-stage-lighting {
    position: absolute;

    top: -22px;
    left: 50%;
    bottom: 52px;

    z-index: 3;

    width: 112%;
    height: auto;

    opacity: 0.42;

    background: none !important;

    transform: translateX(-50%);

    mix-blend-mode: screen;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 5%,
            #000 68%,
            rgba(0, 0, 0, 0.72) 82%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 5%,
            #000 68%,
            rgba(0, 0, 0, 0.72) 82%,
            transparent 100%
        );
}

.bookshelf-stage-decoration.bookshelf-stage-lighting img {
    display: block !important;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    mix-blend-mode: screen;

    filter:
        brightness(1.08)
        contrast(1.02)
        saturate(0.9);
}


/* =========================================================
   WOODEN SHELF
========================================================= */

.bookshelf-stage-display::after {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: var(--shelf-bottom);

    z-index: 30;

    height: var(--shelf-height);

    border-radius: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(50, 23, 8, 1) 0%,
            rgba(108, 52, 16, 1) 18%,
            rgba(151, 81, 27, 0.98) 48%,
            rgba(111, 52, 16, 1) 76%,
            rgba(48, 21, 7, 1) 100%
        );

    box-shadow:
        0 -7px 18px rgba(0, 0, 0, 0.32),
        0 10px 17px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 215, 160, 0.18),
        inset 0 -2px 2px rgba(0, 0, 0, 0.5);

    pointer-events: none;
}


/* =========================================================
   BOOK ROW
   Absolute positioning gives every physical object the
   same shelf-top baseline.
========================================================= */

.bookshelf-stage-display .bookshelf-spine-list,
.bookshelf-stage-display .bookshelf-stage-spine-list {
    position: absolute;

    left: 92px;
    right: 92px;
    bottom: var(--shelf-top);

    z-index: 20;

    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;

    height: 272px;
    min-height: 0;

    padding: 0;
    gap: 30px;
}


/* =========================================================
   BOOK SLOT
========================================================= */

.bookshelf-book-slot {
    position: relative;

    flex: 0 0 78px;

    width: 78px;
    height: 270px;

    z-index: 21;
}


/* =========================================================
   BOOK SPINE
   Contain instead of cover = complete artwork visible.
========================================================= */

.bookshelf-spine-button {
    position: absolute;

    left: 50%;
    bottom: 0;

    z-index: 22;

    display: block;

    width: 74px;
    height: 270px;

    padding: 0;

    overflow: visible;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    transform: translateX(-50%);

    cursor: pointer;
}

.bookshelf-spine-button img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 3px;

    object-fit: contain;
    object-position: center bottom;

    filter:
        drop-shadow(0 12px 12px rgba(0, 0, 0, 0.56))
        brightness(0.98)
        saturate(0.96);
}

.bookshelf-spine-button:hover,
.bookshelf-spine-button:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;

    outline: 1px solid rgba(213, 173, 114, 0.34);
    outline-offset: 4px;

    transform: translateX(-50%) translateY(-3px);
}


/* =========================================================
   BOOK CONTROLS
   Controls live beneath the shelf rather than altering
   the book's physical height.
========================================================= */

.bookshelf-spine-controls {
    position: absolute;

    top: calc(100% + 30px);
    left: 50%;

    z-index: 60;

    width: 88px;

    transform: translateX(-50%);
}


/* =========================================================
   BOOKENDS
   Bottom edge = top surface of the timber shelf.
========================================================= */

.bookshelf-stage-decoration.bookshelf-stage-bookend {
    bottom: var(--shelf-top);

    z-index: 24;

    width: 78px;
    height: 126px;

    opacity: 0.96;
}

.bookshelf-stage-decoration.bookshelf-stage-bookend.is-left {
    left: 28px;
}

.bookshelf-stage-decoration.bookshelf-stage-bookend.is-right {
    right: 28px;

    transform: scaleX(-1);
}

.bookshelf-stage-decoration.bookshelf-stage-bookend img {
    object-position: center bottom;

    filter:
        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.68))
        brightness(0.98)
        saturate(0.94);
}


/* =========================================================
   SHELF OBJECT
========================================================= */

.bookshelf-stage-decoration.bookshelf-stage-object {
    right: 114px;
    bottom: var(--shelf-top);

    z-index: 25;

    width: 94px;
    height: 72px;

    opacity: 0.94;
}

.bookshelf-stage-decoration.bookshelf-stage-object img {
    object-position: center bottom;
}


/* =========================================================
   CHARM
========================================================= */

.bookshelf-stage-decoration.bookshelf-stage-charm {
    top: 22px;
    right: 116px;

    z-index: 16;

    width: 46px;
    height: 62px;

    opacity: 0.9;
}


/* =========================================================
   NAMEPLATE
   Small plate attached visually to the front face.
========================================================= */

.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    position: absolute;

    left: 50%;
    bottom: 30px;

    z-index: 42;

    width: min(200px, 32%);
    height: 42px;

    opacity: 1;

    transform: translateX(-50%);
}

.bookshelf-stage-decoration.bookshelf-stage-nameplate img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.72))
        brightness(1.02)
        saturate(0.98);
}


/* =========================================================
   STACKING
========================================================= */

.bookshelf-stage-customisation {
    z-index: auto;
    pointer-events: none;
}

.bookshelf-stage-display::before {
    z-index: 2;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 760px) {

    .bookshelf-stage-display {
        --shelf-bottom: 78px;
        --shelf-height: 16px;

        min-height: 370px;
    }

    .bookshelf-stage-display::after {
        left: 12px;
        right: 12px;
    }

    .bookshelf-stage-display .bookshelf-spine-list,
    .bookshelf-stage-display .bookshelf-stage-spine-list {
        left: 14px;
        right: 14px;

        height: 238px;

        justify-content: center;

        gap: 16px;
    }

    .bookshelf-book-slot {
        flex-basis: 68px;

        width: 68px;
        height: 236px;
    }

    .bookshelf-spine-button {
        width: 62px;
        height: 236px;
    }

    .bookshelf-spine-controls {
        top: calc(100% + 26px);

        width: 76px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-bookend {
        width: 60px;
        height: 104px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-bookend.is-left {
        left: 18px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-bookend.is-right {
        right: 18px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        bottom: 25px;

        width: min(170px, 46%);
        height: 36px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-object {
        right: 16px;

        width: 70px;
        height: 52px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-lighting {
        top: -12px;
        bottom: 42px;

        width: 116%;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 520px) {

    .bookshelf-stage-display {
        min-height: 350px;
    }

    .bookshelf-stage-display .bookshelf-spine-list,
    .bookshelf-stage-display .bookshelf-stage-spine-list {
        gap: 12px;
    }

    .bookshelf-book-slot {
        flex-basis: 62px;

        width: 62px;
        height: 218px;
    }

    .bookshelf-spine-button {
        width: 56px;
        height: 218px;
    }

    .bookshelf-stage-decoration.bookshelf-stage-nameplate {
        width: 150px;
        height: 32px;
    }
}
/* =========================================================
   BLACKWOOD SHELF POLISH
   Compact empty shelves + dimensional book spines
========================================================= */


/* =========================================================
   1. EMPTY SHELVES
   Keep the shelf available, but don't render the full scene.
========================================================= */

.bookshelf-stage:has(.bookshelf-stage-empty) {
    padding-bottom: 18px;
}

/* Collapse the large visual scene */
.bookshelf-stage:has(.bookshelf-stage-empty) .bookshelf-stage-display {
    min-height: 0;
    height: 58px;

    margin-top: 10px;

    border-color: rgba(213, 173, 114, 0.12);

    background:
        linear-gradient(
            180deg,
            rgba(28, 18, 10, 0.42),
            rgba(5, 4, 3, 0.62)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        inset 0 -12px 24px rgba(0, 0, 0, 0.24);
}

/* Hide scene decoration when there are no books */
.bookshelf-stage:has(.bookshelf-stage-empty)
.bookshelf-stage-customisation {
    display: none;
}

/* Hide the wooden shelf visual on the collapsed state */
.bookshelf-stage:has(.bookshelf-stage-empty)
.bookshelf-stage-display::after {
    display: none;
}

/* Remove atmospheric overlay */
.bookshelf-stage:has(.bookshelf-stage-empty)
.bookshelf-stage-display::before {
    display: none;
}

/* Turn the current large empty box into a subtle strip */
.bookshelf-stage:has(.bookshelf-stage-empty)
.bookshelf-stage-empty {
    min-height: 58px;

    margin: 0;
    padding: 12px 18px;

    border: 0;
    border-radius: 8px;

    background: transparent;
}

/* Slightly quieter empty text */
.bookshelf-stage:has(.bookshelf-stage-empty)
.bookshelf-stage-empty p {
    color: rgba(241, 234, 223, 0.38);

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   2. BOOK SPINE BODY
   Give each image a physical book-shaped container.
========================================================= */

.bookshelf-spine-button {
    isolation: isolate;

    overflow: hidden;

    border-radius: 4px 6px 6px 4px;

    background: #090705;

    box-shadow:
        4px 8px 14px rgba(0, 0, 0, 0.46),
        -2px 0 3px rgba(0, 0, 0, 0.34),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset -3px 0 4px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 2px rgba(0, 0, 0, 0.38);
}


/* =========================================================
   3. SPINE IMAGE
   Keep full artwork visible.
========================================================= */

.bookshelf-spine-button img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    object-fit: contain;
    object-position: center bottom;

    filter:
        brightness(0.97)
        contrast(1.03)
        saturate(0.95)
        drop-shadow(0 8px 10px rgba(0, 0, 0, 0.36));
}


/* =========================================================
   4. CURVED SPINE LIGHT
   Highlights the centre-left like a slightly rounded binding.
========================================================= */

.bookshelf-spine-button::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,

            rgba(0, 0, 0, 0.34) 0%,

            rgba(255, 255, 255, 0.06) 5%,

            rgba(255, 255, 255, 0.11) 12%,

            transparent 25%,

            transparent 68%,

            rgba(0, 0, 0, 0.10) 82%,

            rgba(0, 0, 0, 0.42) 100%
        );

    mix-blend-mode: soft-light;

    pointer-events: none;
}


/* =========================================================
   5. BINDING EDGES
   Adds top/bottom lips and a narrow outer ridge.
========================================================= */

.bookshelf-spine-button::after {
    content: "";

    position: absolute;
    inset: 1px;

    z-index: 3;

    border-radius: 3px 5px 5px 3px;

    box-shadow:
        inset 2px 0 1px rgba(255, 245, 220, 0.10),
        inset -2px 0 2px rgba(0, 0, 0, 0.42),
        inset 0 2px 1px rgba(255, 245, 220, 0.08),
        inset 0 -3px 2px rgba(0, 0, 0, 0.44);

    pointer-events: none;
}


/* =========================================================
   6. SMALL VARIATION
   Makes a row feel less digitally identical.
========================================================= */

.bookshelf-book-slot:nth-child(3n + 1)
.bookshelf-spine-button {
    transform:
        translateX(-50%)
        rotate(-0.35deg);
}

.bookshelf-book-slot:nth-child(3n + 2)
.bookshelf-spine-button {
    transform:
        translateX(-50%)
        rotate(0.2deg);
}

.bookshelf-book-slot:nth-child(3n)
.bookshelf-spine-button {
    transform:
        translateX(-50%)
        rotate(-0.12deg);
}


/* Preserve those tiny rotations on hover */
.bookshelf-book-slot:nth-child(3n + 1)
.bookshelf-spine-button:hover,
.bookshelf-book-slot:nth-child(3n + 1)
.bookshelf-spine-button:focus-visible {
    transform:
        translateX(-50%)
        translateY(-3px)
        rotate(-0.35deg);
}

.bookshelf-book-slot:nth-child(3n + 2)
.bookshelf-spine-button:hover,
.bookshelf-book-slot:nth-child(3n + 2)
.bookshelf-spine-button:focus-visible {
    transform:
        translateX(-50%)
        translateY(-3px)
        rotate(0.2deg);
}

.bookshelf-book-slot:nth-child(3n)
.bookshelf-spine-button:hover,
.bookshelf-book-slot:nth-child(3n)
.bookshelf-spine-button:focus-visible {
    transform:
        translateX(-50%)
        translateY(-3px)
        rotate(-0.12deg);
}


/* =========================================================
   7. CONTACT SHADOW
   Helps the books feel physically planted on the timber.
========================================================= */

.bookshelf-book-slot::after {
    content: "";

    position: absolute;

    left: 8px;
    right: 8px;
    bottom: -3px;

    z-index: 18;

    height: 7px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.58);

    filter: blur(3px);

    pointer-events: none;
}


/* Don't let the contact shadow interfere with drop markers */
.bookshelf-book-slot.is-drop-after::after {
    filter: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .bookshelf-stage:has(.bookshelf-stage-empty)
    .bookshelf-stage-display {
        height: 52px;
    }

    .bookshelf-stage:has(.bookshelf-stage-empty)
    .bookshelf-stage-empty {
        min-height: 52px;
    }

    .bookshelf-spine-button {
        border-radius: 3px 5px 5px 3px;
    }
}
/* Give the shelf a proper wooden front fascia */
.bookshelf-stage-display::after {
    height: 24px;

    background:
        linear-gradient(
            180deg,
            #8a461b 0%,
            #6b3212 18%,
            #4b210b 72%,
            #291006 100%
        );

    box-shadow:
        0 -2px 0 rgba(220, 151, 82, 0.18),
        0 3px 0 rgba(0, 0, 0, 0.72),
        0 12px 20px rgba(0, 0, 0, 0.56),
        inset 0 1px 0 rgba(255, 218, 170, 0.16),
        inset 0 -3px 5px rgba(0, 0, 0, 0.42);
}

/* Smaller plate, centred on the shelf fascia */
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    bottom: 66px;
    z-index: 40;

    width: min(180px, 28%);
    height: 36px;
}

/* Give the controls some breathing room beneath the shelf */
.bookshelf-spine-controls {
    top: calc(100% + 38px);
}
/* Give the controls proper room beneath the shelf */
.bookshelf-stage-display {
    min-height: 445px;
    padding-bottom: 132px;
}

.bookshelf-spine-controls {
    top: calc(100% + 30px);
}

/* Keep the front nameplate centred on the fascia */
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    bottom: 68px;
    width: min(180px, 28%);
    height: 36px;
}
/* =========================================================
   FINAL MICRO-TUNE
   Tighter books + slightly higher nameplate
========================================================= */

/* Bring books closer together */
.bookshelf-stage-display .bookshelf-spine-list,
.bookshelf-stage-display .bookshelf-stage-spine-list {
    gap: 18px;
}

/* Nudge the plate upward so it sits more convincingly on the fascia */
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    bottom: 74px;
}
/* =========================================================
   FINAL SHELF MICRO-TUNE
   Nudge final book + smaller/higher nameplate
========================================================= */

/* Move only the last book slightly left */
.bookshelf-stage-display .bookshelf-book-slot:last-child {
    transform: translateX(-8px);
}

/* Make the nameplate a little smaller and lift it */
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    bottom: 80px;

    width: min(164px, 25%);
    height: 32px;
}
/* =========================================================
   LAST SHELF MICRO-TUNE
   Tighter row + final book left + nameplate higher
========================================================= */

/* Tighten spacing across the whole row */
.bookshelf-stage-display .bookshelf-spine-list,
.bookshelf-stage-display .bookshelf-stage-spine-list {
    gap: 12px;
}

/* Pull the final book properly back into the row */
.bookshelf-stage-display .bookshelf-book-slot:last-child {
    transform: translateX(-22px);
}

/* Lift and slightly shrink the nameplate */
.bookshelf-stage-decoration.bookshelf-stage-nameplate {
    bottom: 88px;

    width: min(154px, 23%);
    height: 30px;
}
/* =========================================================
   SHELF ALIGNMENT CORRECTION
   Restore slot spacing + return final book to natural position
========================================================= */

/* Restore the spacing needed by the controls below */
.bookshelf-stage-display .bookshelf-spine-list,
.bookshelf-stage-display .bookshelf-stage-spine-list {
    gap: 18px;
}

/* Remove the special last-book nudge */
.bookshelf-stage-display .bookshelf-book-slot:last-child {
    transform: none;
}