:root {
    --book-bg: #06111f;
    --book-panel: rgba(10, 26, 48, .82);
    --book-panel-strong: rgba(8, 19, 35, .94);
    --book-line: rgba(127, 215, 255, .24);
    --book-line-strong: rgba(127, 215, 255, .48);
    --book-text: #f3fbff;
    --book-muted: #a9bed0;
    --book-cyan: #79dbff;
    --book-gold: #d7ad58;
    --book-purple: #9b72ff;
    --book-danger: #ff7d7d;
    --book-radius: 8px;
}

* {
    box-sizing: border-box;
}

body.book-store-body,
body.book-store-page {
    min-height: 100vh;
    margin: 0;
    color: var(--book-text);
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .72), rgba(3, 8, 28, .90)),
        url("/assets/images/book-store/backgrounds/book-page-bg-1920x1080.webp") center top / cover fixed;
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    letter-spacing: 0;
}

body.book-cart-page {
    background-image:
        linear-gradient(180deg, rgba(3, 8, 28, .72), rgba(3, 8, 28, .92)),
        url("/assets/images/book-store/backgrounds/book-page-bg-1920x1080.webp");
}

body.book-checkout-page {
    background-image:
        linear-gradient(180deg, rgba(3, 8, 28, .72), rgba(3, 8, 28, .92)),
        url("/assets/images/book-store/backgrounds/book-checkout-bg-1920x1080.webp");
}

a {
    color: inherit;
}

.book-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--book-line);
    background:
        linear-gradient(90deg, rgba(4, 10, 31, .94), rgba(19, 10, 48, .9)),
        url("/assets/images/book-store/backgrounds/book-page-bg-navy-1920x1080.webp") center / cover;
    backdrop-filter: blur(16px);
}

.book-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(1440px, calc(100% - 32px));
    min-height: 72px;
    margin: 0 auto;
}

.book-brand {
    display: inline-flex;
    align-items: center;
    min-width: 128px;
}

.book-brand img {
    width: 148px;
    max-width: 38vw;
    height: auto;
    display: block;
}

.book-navlinks {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.book-mobile-nav {
    display: none;
    width: 100%;
}

.book-mobile-nav summary {
    padding: 9px 14px;
    border: 1px solid var(--book-line);
    border-radius: var(--book-radius);
    background: rgba(13, 36, 64, .8);
    cursor: pointer;
    font-weight: 700;
}

.book-mobile-nav[open] .book-navlinks {
    margin-top: 8px;
}

.book-navlinks a,
.book-inline-form button,
.book-admin-topbar button,
.book-admin-site-link,
.book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--book-line);
    border-radius: var(--book-radius);
    color: var(--book-text);
    background: rgba(13, 36, 64, .72);
    text-decoration: none;
    font-size: .94rem;
    line-height: 1.2;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.book-navlinks a:hover,
.book-inline-form button:hover,
.book-admin-topbar button:hover,
.book-admin-site-link:hover,
.book-btn:hover {
    border-color: var(--book-cyan);
    background: rgba(20, 58, 96, .84);
    transform: translateY(-1px);
}

.book-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.book-inline-form button,
.book-admin-topbar button {
    cursor: pointer;
}

.book-member-name {
    color: var(--book-gold);
    font-weight: 700;
    white-space: nowrap;
}

.book-alert,
.book-admin-alert {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 12px 16px;
    border: 1px solid rgba(215, 173, 88, .5);
    border-radius: var(--book-radius);
    background: rgba(47, 35, 12, .84);
    color: #fff3cc;
}

.book-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 22px;
    width: min(1440px, calc(100% - 32px));
    margin: 28px auto 56px;
}

.book-sidebar {
    align-self: start;
    position: sticky;
    top: 96px;
    padding: 16px;
    border: 1px solid var(--book-line);
    border-radius: var(--book-radius);
    background:
        linear-gradient(180deg, rgba(8, 16, 44, .86), rgba(6, 12, 34, .92)),
        url("/assets/images/book-store/backgrounds/book-sidebar-bg-520x1500.webp") center top / cover;
}

.book-search {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.book-search label,
.book-field label {
    color: var(--book-muted);
    font-size: .9rem;
}

.book-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.book-input,
.book-select,
.book-textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--book-line);
    border-radius: var(--book-radius);
    color: var(--book-text);
    background: rgba(5, 15, 28, .86);
    outline: none;
}

.book-textarea {
    min-height: 150px;
    resize: vertical;
}

.book-input:focus,
.book-select:focus,
.book-textarea:focus {
    border-color: var(--book-cyan);
    box-shadow: 0 0 0 3px rgba(121, 219, 255, .12);
}

.book-category-links {
    display: grid;
    gap: 10px;
}

.book-category-link {
    display: block;
    overflow: visible;
    padding: 0;
    border: 1px solid rgba(127, 215, 255, .18);
    border-radius: var(--book-radius);
    background: rgba(5, 16, 31, .74);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.book-category-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.book-category-link:hover,
.book-category-link:focus-visible {
    border-color: var(--book-cyan);
    box-shadow: 0 0 20px rgba(121, 219, 255, .14);
    transform: translateY(-1px);
}

.book-content {
    min-width: 0;
}

.book-category-header {
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--book-line);
    border-radius: var(--book-radius);
}

.book-category-header img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
}

.book-section {
    margin-bottom: 30px;
    padding: 18px;
    border: 1px solid rgba(127, 215, 255, .14);
    border-radius: var(--book-radius);
    background:
        linear-gradient(180deg, rgba(7, 16, 42, .74), rgba(5, 12, 31, .84)),
        url("/assets/images/book-store/backgrounds/book-content-bg-1600x1000.webp") center / cover;
}

.book-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.book-section-head h1,
.book-section-head h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.book-section-head p {
    margin: 4px 0 0;
    color: var(--book-muted);
}

.book-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* .book-product-card and everything inside it are defined once, at the end of this file,
   under "G5 storefront product card". Do not re-declare them here: the card used to be
   described in three places (this block, the v5 theme block, and the v6 corrections), and
   that is how the decorative frame ended up painted straight through the title text. */

.book-price {
    color: var(--book-gold);
    font-weight: 800;
    font-size: 1.08rem;
}

.book-product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 12px 12px;
}

.book-btn {
    width: 100%;
    border-color: rgba(215, 173, 88, .42);
    background: rgba(54, 40, 13, .78);
}

.book-btn-primary {
    border-color: rgba(121, 219, 255, .62);
    background: linear-gradient(180deg, rgba(18, 94, 135, .95), rgba(13, 58, 96, .95));
}

.book-btn-danger {
    border-color: rgba(255, 125, 125, .54);
    background: rgba(94, 24, 30, .86);
}

.book-empty {
    padding: 24px;
    border: 1px dashed var(--book-line);
    border-radius: var(--book-radius);
    color: var(--book-muted);
    background: rgba(6, 17, 31, .64);
}

.book-detail {
    width: min(1180px, calc(100% - 32px));
    margin: 28px auto 56px;
}

.book-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 24px;
    align-items: start;
}

.book-gallery,
.book-form-panel,
.book-table-panel,
.book-detail-info,
.book-order-panel {
    border: 1px solid var(--book-line);
    border-radius: var(--book-radius);
    background: var(--book-panel);
}

.book-gallery {
    overflow: hidden;
}

.book-gallery-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, .04);
}

.book-gallery-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .32s ease;
}

.book-gallery-frame img.is-active {
    opacity: 1;
}

.book-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    padding: 10px;
}

.book-gallery-thumbs button {
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.book-gallery-thumbs button.is-active {
    border-color: var(--book-gold);
}

.book-gallery-thumbs img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.book-detail-info {
    padding: 22px;
}

.book-detail-info h1 {
    margin: 0 0 12px;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.book-detail-text {
    margin-top: 18px;
    color: #d8eaf5;
    line-height: 1.85;
    white-space: pre-line;
}

.book-form-panel,
.book-order-panel {
    width: min(760px, calc(100% - 32px));
    margin: 32px auto 56px;
    padding: 24px;
}

.book-form-panel.wide,
.book-table-panel.wide {
    width: min(1180px, calc(100% - 32px));
}

.book-form-panel h1,
.book-order-panel h1 {
    margin: 0 0 18px;
}

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

.book-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-field {
    display: grid;
    gap: 7px;
}

.book-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.book-upload-row .book-btn {
    width: auto;
    min-width: 116px;
    white-space: nowrap;
}

.book-validation {
    color: #ffd2d2;
    font-size: .9rem;
}

.book-captcha-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.book-captcha-row img {
    width: 180px;
    height: 72px;
    border-radius: var(--book-radius);
    border: 1px solid var(--book-line);
}

.book-table-panel {
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto 56px;
    overflow: hidden;
}

.book-table-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid var(--book-line);
}

.book-table-head h1 {
    margin: 0;
    font-size: 1.55rem;
}

.book-table-wrap {
    overflow-x: auto;
}

.book-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.book-table th,
.book-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(127, 215, 255, .14);
    vertical-align: middle;
}

.book-table th {
    color: var(--book-muted);
    font-weight: 700;
    background: rgba(6, 17, 31, .56);
}

.book-table td form {
    margin: 0;
}

.book-cart-image {
    width: 72px;
    aspect-ratio: 7 / 10;
    object-fit: cover;
    border-radius: 6px;
}

.book-order-links {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
}

.book-order-tabs {
    display: flex;
    gap: 8px;
    padding: 16px;
    flex-wrap: wrap;
}

/* The three storefront entry points on the cross-store order overview. Separate from
   .book-order-tabs, which filters which orders are listed: one navigates away, the other
   changes this page, and a customer must be able to tell them apart at a glance. */
.book-order-shops {
    display: flex;
    gap: 8px;
    padding: 0 16px 4px;
    flex-wrap: wrap;
}

.book-order-shops .book-btn { flex: 0 1 auto; }

.book-order-tabs a {
    padding: 9px 16px;
    border: 1px solid var(--book-line);
    border-radius: var(--book-radius);
    text-decoration: none;
}

.book-order-tabs a.is-active {
    color: #2b1b0d;
    background: var(--book-gold);
}

.book-cancel-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 8px;
}

.book-muted {
    color: var(--book-muted);
}

.book-total-row {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    align-items: center;
    padding: 18px;
    font-size: 1.15rem;
}

.book-total-row strong,
.book-total-row .book-price {
    white-space: nowrap;
}

.book-total-row .book-btn {
    width: auto;
    min-width: 118px;
    flex: 0 0 auto;
}

.book-footer {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 26px 16px 36px;
    color: var(--book-muted);
    border-top: 1px solid rgba(127, 215, 255, .12);
}

body.book-admin-login-page {
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .62), rgba(3, 8, 28, .92)),
        url("/assets/images/book-store/backgrounds/book-admin-bg-1920x1080.webp") center / cover fixed;
}

body.book-member-login-page {
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .62), rgba(3, 8, 28, .92)),
        url("/assets/images/book-store/backgrounds/book-login-bg-1600x1000.webp") center / cover fixed;
}

body.book-admin-body {
    min-height: 100vh;
    margin: 0;
    color: var(--book-text);
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .78), rgba(3, 8, 28, .96)),
        url("/assets/images/book-store/backgrounds/book-admin-bg-1920x1080.webp") center / cover fixed;
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.book-admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    padding: 20px 16px;
    /* inset already bounds this to the viewport; without an overflow rule the items
       past the fold render outside it and cannot be reached at all. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border-right: 1px solid var(--book-line);
    background: rgba(4, 13, 28, .94);
}

.book-admin-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--book-text);
    text-decoration: none;
    font-weight: 800;
}

.book-admin-logo img {
    width: 108px;
    height: auto;
}

.book-admin-sidebar nav {
    display: grid;
    gap: 8px;
}

.book-admin-sidebar nav a {
    padding: 11px 12px;
    border: 1px solid rgba(127, 215, 255, .16);
    border-radius: var(--book-radius);
    color: var(--book-text);
    text-decoration: none;
    background: rgba(12, 31, 56, .7);
}

.book-admin-sidebar nav a:hover {
    border-color: var(--book-cyan);
}

.book-admin-site-link {
    margin-top: 18px;
    width: 100%;
}

.book-admin-main {
    min-height: 100vh;
    margin-left: 270px;
}

.book-admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--book-line);
    background: rgba(5, 15, 29, .86);
    backdrop-filter: blur(14px);
}

.book-admin-topbar small {
    display: block;
    color: var(--book-muted);
}

.book-admin-topbar form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.book-admin-content {
    padding: 24px;
}

.book-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.book-admin-metric {
    padding: 18px;
    border: 1px solid var(--book-line);
    border-radius: var(--book-radius);
    background: var(--book-panel);
}

.book-admin-metric span {
    color: var(--book-muted);
}

.book-admin-metric strong {
    display: block;
    margin-top: 8px;
    font-size: 2rem;
}

.book-admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.book-inline-edit {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
    gap: 8px;
}

.book-thumb-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.book-thumb-list img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--book-line);
}

.book-thumb-item {
    display: grid;
    gap: 8px;
}

.book-thumb-item form {
    margin: 0;
}

.book-thumb-item .book-btn {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .86rem;
}

@media (max-width: 1180px) {
    .book-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .book-topbar-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 0;
    }

    .book-navlinks {
        justify-content: flex-start;
        width: 100%;
    }

    .book-shell {
        /* minmax(0, 1fr), not 1fr: the horizontally scrolling category strip has a
           min-content width of ~800px, and a bare 1fr track let it widen the whole page
           instead of scrolling inside itself. Measured at 430px: 840px document width. */
        grid-template-columns: minmax(0, 1fr);
    }

    .book-sidebar {
        position: static;
    }

    .book-category-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .book-detail-grid,
    .book-form-grid.two {
        grid-template-columns: 1fr;
    }

    .book-admin-sidebar {
        position: static;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--book-line);
        /* Static again: the page scrolls, so the sidebar must not be its own scroller. */
        overflow: visible;
        overscroll-behavior: auto;
    }

    .book-admin-main {
        margin-left: 0;
    }

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

    .book-inline-edit {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .book-desktop-nav {
        display: none;
    }

    .book-mobile-nav {
        display: block;
    }

    .book-product-grid,
    .book-admin-grid {
        grid-template-columns: 1fr;
    }

    .book-shell {
        width: min(100% - 20px, 1440px);
        margin-top: 14px;
    }

    .book-sidebar,
    .book-section {
        padding: 12px;
    }

    .book-navlinks a,
    .book-inline-form button {
        flex: 1 1 calc(50% - 8px);
        padding-inline: 10px;
        font-size: .88rem;
    }

    .book-captcha-row {
        grid-template-columns: 1fr;
    }

    .book-upload-row {
        grid-template-columns: 1fr;
    }

    .book-upload-row .book-btn {
        width: 100%;
    }

    .book-table-head,
    .book-total-row,
    .book-section-head,
    .book-admin-topbar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* v5 final literary theme */
:root {
    --book-bg: #250507;
    --book-panel: #f3e1b9;
    --book-panel-strong: #f8edcf;
    --book-line: rgba(126, 66, 24, .54);
    --book-line-strong: #9c5d20;
    --book-text: #f6e1ad;
    --book-muted: #81543c;
    --book-cyan: #c99542;
    --book-gold: #d4a14b;
    --book-danger: #9b2828;
    --book-radius: 8px;
}

body.book-store-body,
body.book-store-page,
body.book-home-page {
    color: #f7dfaa;
    background:
        linear-gradient(180deg, rgba(47, 4, 8, .18), rgba(25, 2, 5, .5)),
        url("/assets/images/book-store/backgrounds/book-home-outer-bg-1920x1200.webp") center top / cover fixed;
    font-family: "Noto Serif TC", "PMingLiU", "Microsoft JhengHei", serif;
}

body.book-category-page {
    background: url("/assets/images/book-store/backgrounds/book-category-page-bg-1920x1200.webp") center top / cover fixed;
}

body.book-product-detail-page {
    background: url("/assets/images/book-store/backgrounds/book-product-page-bg-1920x1200.webp") center top / cover fixed;
}

body.book-cart-page {
    background: url("/assets/images/book-store/backgrounds/book-cart-page-bg-1920x1200.webp") center top / cover fixed;
}

body.book-checkout-page {
    background: url("/assets/images/book-store/backgrounds/book-checkout-page-bg-1920x1200.webp") center top / cover fixed;
}

body.book-orders-page {
    background: url("/assets/images/book-store/backgrounds/book-orders-page-bg-1920x1200.webp") center top / cover fixed;
}

body.book-member-login-page {
    background: url("/assets/images/book-store/backgrounds/book-login-page-bg-1600x1000.webp") center top / cover fixed;
}

body.book-register-page {
    background: url("/assets/images/book-store/backgrounds/book-register-page-bg-1600x1000.webp") center top / cover fixed;
}

body.book-register-agreement-page {
    background: url("/assets/images/book-store/backgrounds/book-register-agreement-bg-1600x1000.webp") center top / cover fixed;
}

body.book-result-page {
    background: url("/assets/images/book-store/backgrounds/book-result-page-bg-1600x1000.webp") center top / cover fixed;
}

.book-topbar {
    border-color: rgba(208, 157, 70, .58);
    background: rgba(39, 6, 8, .94);
}

.book-navlinks a,
.book-inline-form button,
.book-admin-topbar button,
.book-admin-site-link,
.book-btn,
.book-mobile-nav summary {
    border-color: rgba(213, 164, 76, .52);
    color: #f6dfa7;
    background: linear-gradient(180deg, #70251d, #4c130f);
}

.book-navlinks a:hover,
.book-inline-form button:hover,
.book-admin-topbar button:hover,
.book-admin-site-link:hover,
.book-btn:hover {
    border-color: #edc77d;
    background: linear-gradient(180deg, #8a3528, #5c1812);
}

.book-shell {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 12px;
    width: min(1540px, calc(100% - 24px));
    align-items: start;
}

.book-sidebar {
    top: 88px;
    padding: 24px 18px;
    border: 1px solid #a76d31;
    color: #f4d998;
    background: url("/assets/images/book-store/backgrounds/book-sidebar-panel-360x1220.webp") center top / 100% 100% no-repeat;
}

.book-search label {
    color: #f1d99f;
}

.book-input,
.book-select,
.book-textarea {
    border-color: #9a642e;
    color: #4c2418;
    background: #f7e8c5;
}

.book-category-links {
    gap: 8px;
}

.book-category-link {
    display: block;
    width: 100%;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    line-height: 0;
    background: transparent;
    text-decoration: none;
}

.book-category-link::before,
.book-category-link::after {
    content: none;
}

.book-category-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.book-content {
    min-width: 0;
    min-height: 760px;
    padding: 28px;
    border: 2px solid #9a6128;
    border-radius: 8px;
    color: #4f2518;
    /* Surface is defined once, in "G6 BOOK main content surface" at the end of this file.
       This rule used to stretch book-main-content-panel-1600x1180.webp over the whole
       column with background-size: 100% 100%; that asset carries a pure-white 1px seam
       every 120px and the stretch smeared its texture, so it is no longer used. */
}

.book-category-header {
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.book-category-header img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

.book-section {
    padding: 16px;
    border: 0;
    color: #4c2619;
    background: transparent;
}

.book-section-head {
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid rgba(126, 70, 30, .35);
    padding-bottom: 12px;
}

.book-section-head h1,
.book-section-head h2,
.book-section-head p {
    color: #6e301d;
}

.book-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #6d4932;
    background: url("/assets/images/book-store/ui/book-empty-state-980x160.png") center / 100% 100% no-repeat;
}

.book-product-grid {
    gap: 12px;
}

/* The v5 theme used to stretch book-product-card-frame-255x430.png over the whole card with
   background-size: 100% 100%. See "G5 storefront product card" at the end of this file for why
   that could not work and what replaced it. */

.book-price {
    color: #7a281b;
}

.book-gallery,
.book-form-panel,
.book-table-panel,
.book-detail-info,
.book-order-panel {
    border: 1px solid #9f672f;
    color: #4d2619;
    background: #f4e3bd url("/assets/images/book-store/ui/book-form-panel-1000x900.webp") center / 100% 100% no-repeat;
}

.book-detail-text,
.book-table th,
.book-muted,
.book-field label {
    color: #74513b;
}

.book-table th {
    background: rgba(153, 91, 38, .13);
}

.book-table th,
.book-table td {
    border-color: rgba(126, 70, 30, .25);
}

body.book-cart-page .book-table-panel {
    background-image: url("/assets/images/book-store/ui/book-cart-panel-1400x900.webp");
}

body.book-checkout-page .book-form-panel {
    background-image: url("/assets/images/book-store/ui/book-checkout-panel-1400x1100.webp");
}

body.book-orders-page .book-table-panel,
body.book-orders-page .book-order-panel {
    background-image: url("/assets/images/book-store/ui/book-orders-panel-1400x950.webp");
}

body.book-register-page .book-form-panel {
    background-image: url("/assets/images/book-store/ui/book-register-card-1000x900.webp");
}

body.book-register-agreement-page .book-form-panel {
    background-image: url("/assets/images/book-store/ui/book-agreement-card-1000x760.webp");
}

body.book-result-page .book-form-panel,
body.book-result-page .book-order-panel {
    background-image: url("/assets/images/book-store/ui/book-success-card-900x620.webp");
}

body.book-fail-page .book-form-panel,
body.book-fail-page .book-order-panel {
    background-image: url("/assets/images/book-store/ui/book-fail-card-900x620.webp");
}

body.book-admin-login-page {
    background: url("/assets/images/book-store/backgrounds/book-admin-login-bg-1920x1200.webp") center top / cover fixed;
}

body.book-admin-body {
    background: url("/assets/images/book-store/backgrounds/book-admin-dashboard-bg-1920x1200.webp") center top / cover fixed;
}

.book-admin-sidebar {
    border-color: #9c612c;
    background: rgba(55, 10, 10, .95);
}

.book-admin-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    border-color: rgba(211, 160, 74, .35);
    background: rgba(103, 31, 24, .72);
}

.book-admin-sidebar nav img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.book-admin-topbar {
    border-color: rgba(211, 160, 74, .45);
    background: rgba(55, 10, 10, .9);
}

.book-admin-metric,
.book-admin-content .book-form-panel,
.book-admin-content .book-table-panel {
    color: #4d2619;
    background: #f4e3bd url("/assets/images/book-store/ui/book-admin-panel-1500x1000.webp") center / 100% 100% no-repeat;
}

@media (max-width: 920px) {
    .book-content {
        padding: 18px;
    }
}

@media (max-width: 620px) {
    .book-category-links {
        grid-template-columns: 1fr;
    }

    .book-content {
        padding: 12px;
    }

    .book-product-grid {
        grid-template-columns: 1fr;
    }
}

/* UI-BOOK-01. This rule used to be `font-size: 0; color: transparent`, which was presumably
   meant to let book-empty-state-980x160.png speak for itself — but that artwork carries no
   words, so every empty state on the storefront rendered as a blank 120px panel. A shopper
   whose search matched nothing saw what looked like a broken page instead of "沒有符合條件".
   Kept as a scoped rule so the admin `.book-empty m-3` variants are untouched; only the
   invisibility is reverted, the background art stays. */
.book-content .book-empty {
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    color: #6d4932;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

/* v6 layout corrections */
/* The v6 corrections replaced the panel image here with a flat two-stop gradient, which is
   what left the BOOK column looking washed out. Superseded by "G6 BOOK main content
   surface" at the end of this file. */

.book-search-form {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.book-search-form label {
    position: static;
    display: block;
    margin: 0;
    padding: 0;
    color: #f1d99f;
    line-height: 1.4;
}

.book-search-form__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: .65rem;
}

.book-search-form input,
.book-search-form button {
    position: static;
    min-height: 48px;
    margin: 0;
}

.book-category-hero {
    display: block;
    margin: 0 0 1.25rem;
}

.book-category-hero__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.book-section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: 100%;
    margin: 1.5rem 0 1.25rem;
    text-align: center;
}

.book-section-heading__row {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
    align-items: center;
    gap: 1.4rem;
    width: min(900px, 100%);
}

.book-section-heading__row h2 {
    position: static;
    margin: 0;
    padding: 0;
    color: #6e301d;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.15;
    white-space: nowrap;
}

.book-section-heading__line {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, #b7833d 35%, #b7833d);
}

.book-section-heading__line:last-child {
    background: linear-gradient(90deg, #b7833d, #b7833d 65%, transparent);
}

.book-section-heading > p,
.book-search-summary {
    position: static;
    margin: 0;
    padding: 0;
    color: #805436;
    line-height: 1.2;
    text-align: center;
}

.book-featured-section {
    padding-top: 16px;
}

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

.book-login-card {
    position: static;
    width: min(900px, calc(100% - 2rem));
    margin: 2.5rem auto;
    padding: 2.5rem;
    color: #4d2619;
    background: #f3e1b9 url('/assets/images/book-store/ui-fix-v2/book-login-panel-blank-v2.webp') center / 100% 100% no-repeat;
}

.book-login-card__header,
.book-login-form,
.book-form-field,
.book-captcha-row,
.book-login-actions {
    position: static;
}

.book-login-card__header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.book-login-card__header h1,
.book-login-card__header p {
    margin: 0;
}

.book-login-card__header p {
    margin-top: .4rem;
    color: #805436;
}

.book-login-form {
    display: grid;
    gap: 1.2rem;
}

.book-form-field {
    display: grid;
    gap: .45rem;
}

.book-form-field label {
    position: static;
    display: block;
    margin: 0;
    color: #5d2a1c;
    line-height: 1.35;
}

.book-form-field input {
    position: static;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: .7rem .9rem;
    box-sizing: border-box;
}

.book-login-card .book-captcha-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
}

.book-login-card .book-captcha-row img {
    display: block;
    width: 220px;
    height: 84px;
    object-fit: contain;
}

.book-captcha-refresh {
    min-height: 52px;
    white-space: nowrap;
}

.book-login-validation {
    min-height: 0;
}

.book-login-card .book-validation {
    color: #8c1f1f;
}

.book-login-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.book-login-actions .book-btn,
.book-register-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    text-align: center;
}

/* Book member cart and login layout refinements. */
.book-table-head h1 {
    flex: 1 1 auto;
    min-width: 0;
}

.book-table-head > .book-btn,
.book-order-links > .book-btn {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 1.25rem;
}

.book-login-card {
    box-sizing: border-box;
    min-height: 760px;
    padding: 84px 110px;
}

.book-login-card__header h1,
.book-login-card__header p,
.book-login-card .book-form-field label {
    color: #f5d38b;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(48, 10, 8, .9);
}

.book-login-card__header p {
    color: #eac77d;
}

.book-login-form {
    width: min(440px, 100%);
    margin: 0 auto;
}

.book-login-card .book-form-field input {
    width: 100%;
    min-height: 46px;
}

.book-login-card .book-captcha-row {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: .65rem;
}

.book-login-card .book-captcha-row img {
    width: 170px;
    height: 68px;
}

.book-login-card .book-captcha-row .book-captcha-refresh {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    min-height: 42px;
    padding-inline: 1.15rem;
}

/* Keep registration content inside the crimson panel and use readable gold text. */
body.book-register-page .book-form-panel,
body.book-register-agreement-page .book-form-panel {
    box-sizing: border-box;
    width: min(1000px, calc(100% - 2rem));
    margin: 2.5rem auto;
    padding: 200px 120px 80px;
    color: #f5d38b;
}

body.book-register-page .book-form-panel {
    min-height: 900px;
}

body.book-register-agreement-page .book-form-panel {
    min-height: 760px;
}

body.book-register-page .book-form-panel > h1,
body.book-register-agreement-page .book-form-panel > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.book-register-page .book-form-panel .book-detail-text,
body.book-register-agreement-page .book-form-panel .book-detail-text,
body.book-register-page .book-form-panel .book-field,
body.book-register-agreement-page .book-form-panel .book-field,
body.book-register-page .book-form-panel .book-field label,
body.book-register-agreement-page .book-form-panel .book-field label {
    color: #f5d38b;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(48, 10, 8, .9);
}

body.book-register-page .book-form-panel > form,
body.book-register-agreement-page .book-form-panel > form {
    width: min(640px, 100%);
    margin-inline: auto;
}

body.book-register-page .book-form-panel .book-input {
    min-height: 46px;
}

@media (max-width: 920px) {
    .book-store-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .book-store-layout .book-sidebar {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .book-login-card {
        min-height: 0;
        padding: 1.35rem;
        background: #f3e1b9;
        border: 3px double #c29554;
        border-radius: 18px;
    }

    .book-login-card .book-captcha-row,
    .book-login-actions {
        grid-template-columns: 1fr;
    }

    .book-login-card .book-captcha-row img {
        width: min(220px, 100%);
    }

    body.book-register-page .book-form-panel,
    body.book-register-agreement-page .book-form-panel {
        min-height: 0;
        padding: 1.5rem;
        background: #5d201b;
    }

    body.book-register-page .book-form-panel > h1,
    body.book-register-agreement-page .book-form-panel > h1 {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 1rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .book-search-form__controls {
        grid-template-columns: 1fr;
    }

    .book-section-heading__row {
        grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr);
        gap: .65rem;
    }
}

.book-order-followup,
.book-checkout-expectation {
    margin: 20px 0;
    padding: 18px;
    border: 1px solid rgba(126, 70, 30, .45);
    border-left: 4px solid #9f672f;
    border-radius: var(--book-radius);
    color: #4d2619;
    background: rgba(255, 248, 225, .86);
    line-height: 1.7;
}

.book-order-followup h2 {
    margin: 0 0 12px;
    color: #7a281b;
    font-size: 1.3rem;
}

.book-order-followup p,
.book-checkout-expectation p {
    margin: 0 0 8px;
}

.book-order-followup p:last-of-type,
.book-checkout-expectation p:last-child {
    margin-bottom: 0;
}

.book-order-followup dl {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
}

.book-order-followup dl div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
}

.book-order-followup dt {
    color: #74513b;
}

.book-order-followup dd {
    margin: 0;
}

/* Product Edit -> Inventory cross-link. Bidirectional navigation between the two screens that
   maintain the same product: the inventory page links here by AutoNo, this links back by PNo. */
.book-form-crosslink { margin: 0 0 16px; }
.book-form-crosslink a { display: inline-block; padding: 8px 14px; border: 1px solid #2c4a7c; border-radius: 8px; color: #1c3a68; font-weight: 700; text-decoration: none; }
.book-form-crosslink a:hover { background: #eef4fc; }

/* ==========================================================================
   G5 storefront product card  (Phase G: 前台現有架構一致化)

   Single source of truth for .book-product-card. The same partial renders on
   /book-store (精選產品 + 最新上市), /book-store/category/{key} (精選產品 + 其他產品)
   and /book-store/product/{pno} (同類別產品), so every rule here must hold for all three.

   WHY THIS EXISTS
   book-product-card-frame-255x430.png is not a plain border. Measured on the source
   bitmap, it carries a whole content layout baked in as ink, at these fractions of the
   image: an image well from y 8.84% to 67.79% (x 13.33%–87.06%), a divider rule at
   79.07%, a short rule at 90.70%, and a second inner border at 96.74%. The v5 theme
   painted it with `background: ... center / 100% 100%`, which stretches those interior
   rules to whatever height the card happens to be, while the DOM laid its content out
   from a fixed 13px padding. The two geometries never agreed, so the well's bottom edge
   and the divider landed inside the title text and the short rule landed inside the
   price/供貨 text — on every card, at every breakpoint.

   HOW IT IS FIXED
   The frame is now applied as a 9-slice border-image with a 20px slice. That keeps the
   outer double border and its rounded corners, drops the interior rules entirely (no
   `fill` keyword, so the middle slice is never painted), and — because the border width
   is a constant, not a percentage — the ornament can no longer grow into the text as the
   card gets bigger. The content box is therefore a guaranteed text-safe area: the
   decoration is confined to the border band by construction, not by tuned padding.
   The two interior rules that were doing real work are re-created as real CSS on the
   elements they belong to, so they track the content instead of the card height:
     - the image well  -> a 1px rule on .book-product-image
     - the divider     -> border-top on the price row

   THE CONTRACT (keep these invariants if you touch this block, and mirror them if this
   pattern is ever applied to .pc-product-card / .game-product-card)
   1. Fixed image aspect ratio, so every card in a row starts its text at the same y.
   2. Title occupies exactly --book-card-title-lines lines: min-height reserves them,
      line-clamp caps them. Never let the title decide the card height.
   3. 供貨 is reserved and clamped at 2 lines for the same reason.
   4. Price + 供貨 sit in a bottom block pushed down by margin-top:auto, so their
      position is stable whether or not the commerce P0 供貨 row is rendered at all.
   5. Any decoration is either inside the border band or is a border on the element it
      decorates. Nothing is positioned by percentage of card height.
   ========================================================================== */

.book-product-card {
    --book-card-frame: 24px;
    --book-card-title-lines: 3;
    --book-card-title-line-height: 1.45;
    --book-card-meta-line-height: 1.4;
    --book-card-parchment: #f4e6c6;
    --book-card-rule: #c08c3c;
    --book-card-ink: #4e2519;
    --book-card-ink-muted: #7a6142;

    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100%;
    padding: 0;
    border: var(--book-card-frame) solid transparent;
    /* Slice 160 because the corner flourish in the master art tapers out by ~150px; the
       sheet's edge runs are only 8px wide but they are pure straight rule, so stretching
       them along the card is lossless. See the asset note below. */
    border-image: url("/assets/images/book-store/ui/book-product-card-frame-v2-328x328.webp") 160 / var(--book-card-frame) / 0 stretch;
    border-radius: 0;
    color: var(--book-card-ink);
    /* padding-box: the border-image tiles carry their own cream, so the flat fill stops at
       the content box and cannot show through as a seam under the ornament. */
    background: var(--book-card-parchment) padding-box;
}

.book-product-image {
    display: block;
    overflow: hidden;
    border: 1px solid var(--book-card-rule);
    border-radius: 4px;
    background: #ead5a9;
}

/* picture is inline by default, which would put the card's image in a line box and leave a
   descender gap under it. Added with the responsive <source> in PERF-IMG-01; the frame itself
   is unchanged because aspect-ratio still governs the img. */
.book-product-card picture {
    display: block;
}

.book-product-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    background: #ead5a9;
}

.book-product-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 12px 6px 2px;
}

.book-product-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--book-card-title-lines);
    line-clamp: var(--book-card-title-lines);
    overflow: hidden;
    min-height: calc(var(--book-card-title-lines) * var(--book-card-title-line-height) * 1em);
    margin: 0 0 10px;
    color: var(--book-card-ink);
    font-size: .97rem;
    font-weight: 700;
    line-height: var(--book-card-title-line-height);
    /* Product names arrive from the BOOK admin with no guaranteed break opportunities
       (a 60-character unbroken latin title is enough to widen the whole document). */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.book-product-card h3 a {
    color: inherit;
    text-decoration: none;
}

.book-product-card h3 a:hover,
.book-product-card h3 a:focus-visible {
    text-decoration: underline;
}

/* Price and 供貨 are one block pinned to the bottom of the body, so they do not move
   when the title is short and do not move when the 供貨 row is absent. */
.book-product-card .book-price {
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid rgba(196, 149, 82, .55);
    color: #7a281b;
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.4;
}

.book-product-card .book-product-meta {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * var(--book-card-meta-line-height) * 1em);
    margin-top: 5px;
    color: var(--book-card-ink-muted);
    font-size: .82rem;
    line-height: var(--book-card-meta-line-height);
    overflow-wrap: anywhere;
}

/* The single-column breakpoint makes the card ~2.5x wider than the 255px the frame was
   drawn for. Trimming a line off the title there keeps the card from turning into a
   full-screen tile, and the wider measure fits more characters per line anyway. */
@media (max-width: 620px) {
    .book-product-card {
        --book-card-title-lines: 2;
        --book-card-frame: 20px;
    }

    .book-product-card-body {
        padding: 12px 8px 4px;
    }
}

/* ==========================================================================
   G6 BOOK main content surface  (Phase G: 前台現有架構一致化)

   Single source of truth for the .book-content surface. It was previously described in
   two places that disagreed: an early rule painted book-main-content-panel-1600x1180.webp
   with background-size: 100% 100%, and a later "v6 corrections" rule replaced the whole
   background with a flat #f7e9c9 -> #efdbb0 gradient. The later rule won, so the panel
   texture was downloaded but never painted and the column rendered as flat pale card.

   WHY THE OLD PANEL ASSET IS NOT SIMPLY RE-ENABLED
   Scanned pixel by pixel, book-main-content-panel-1600x1180.png carries a pure white,
   full-height, 1px column at x = 0, 120, 240, ... 1560 - fourteen of them, one every 120px.
   It is a tiling artefact from whatever produced the asset, and the same signature is in
   book-product-card-frame-255x430.png (x = 0, 120, 240) and book-search-input-250x58.png
   (x = 0). Those seams are the white lines visible on the storefront. Stretching the panel
   to 100% 100% also smeared its grain, since the column is far taller than the asset.

   HOW THE SURFACE IS BUILT NOW
   Texture and frame are separated, so neither can ever be stretched into mush:

     - the field is a seamless 840x840 parchment tile, mirrored in both axes from the plain
       centre of the master panel, painted at its natural size with `repeat`. It never
       scales, so it is crisp whether the column is 400px or 6000px tall.

     - the rules are the master panel as a 9-slice border-image, used WITHOUT `fill` so
       only the band is painted and the tile shows through. Measured on the master, the
       whole border motif - dark outer edge, then a double rule - lives inside its first
       35px, so the slice is 40. That matters: an earlier attempt sliced at 360 to try to
       catch the corner sprig too, which made the left and right edge slices 221px of
       mostly plain field stretched to ~1300px tall, and the parchment grain in them
       smeared into visible vertical streaks. At slice 40 the edge slices are pure
       straight rule, and stretching a straight rule along its own direction is lossless.

     - the corner sprigs, which slice 40 necessarily cuts off, come back as four pinned
       decals. They are not crops of the panel: a cropped corner carries the master's own
       edge-to-centre tone falloff and lands on the flat tile as a visibly pasted square.
       Each decal instead stores only the deviation from its own local parchment tone as
       alpha, so plain field is fully transparent and only ornament is painted. Their size
       is bound to the frame width by the same 9:1 ratio the slice uses (360 / 40), so the
       sprig always continues the band's rules at exactly the scale the band drew them.

   Every derived asset is verified to carry no full-length pure-white row or column, which
   is the specific defect this round exists to remove.

   Masters live in art-source/book-store/ (outside wwwroot, so they are not deployed) and
   the derivation is reproducible via tools/BookStoreAssets/.
   ========================================================================== */

.book-content {
    --book-surface: #f3e6c6;
    --book-surface-frame: 22px;
    /* 360 / 40: the decal's source size over the border-image slice. Keeping this ratio is
       what makes the sprig line up with the band's rules at every breakpoint. */
    --book-surface-corner: calc(var(--book-surface-frame) * 9);

    padding: 18px 20px 22px;
    border: var(--book-surface-frame) solid transparent;
    border-image: url("/assets/images/book-store/backgrounds/book-content-panel-1672x941.webp") 40 / var(--book-surface-frame) / 0 stretch;
    border-radius: 0;
    background-color: var(--book-surface);
    background-image:
        url("/assets/images/book-store/backgrounds/book-content-corner-tl-360x360.webp"),
        url("/assets/images/book-store/backgrounds/book-content-corner-tr-360x360.webp"),
        url("/assets/images/book-store/backgrounds/book-content-corner-bl-360x360.webp"),
        url("/assets/images/book-store/backgrounds/book-content-corner-br-360x360.webp"),
        radial-gradient(115% 85% at 50% 45%, rgba(255, 250, 235, .26), rgba(150, 104, 48, .10) 100%),
        url("/assets/images/book-store/backgrounds/book-content-parchment-tile-840x840.webp");
    background-position: left top, right top, left bottom, right bottom, center, left top;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size:
        var(--book-surface-corner) var(--book-surface-corner),
        var(--book-surface-corner) var(--book-surface-corner),
        var(--book-surface-corner) var(--book-surface-corner),
        var(--book-surface-corner) var(--book-surface-corner),
        auto,
        840px 840px;
    /* border-box so the decals start where the band starts; the band paints over their
       outermost 1/9, which is the part that duplicates the rules the band already drew. */
    background-origin: border-box;
    background-clip: border-box;
}

@media (max-width: 1180px) {
    .book-content {
        --book-surface-frame: 18px;
    }
}

/* Single column: two sprigs at 9x the frame width would meet in the middle of a 390px
   column and read as a band rather than as corners, so only the rules stay. */
@media (max-width: 620px) {
    .book-content {
        --book-surface-frame: 14px;
        padding: 12px 12px 16px;
        background-image:
            radial-gradient(115% 85% at 50% 45%, rgba(255, 250, 235, .26), rgba(150, 104, 48, .10) 100%),
            url("/assets/images/book-store/backgrounds/book-content-parchment-tile-840x840.webp");
        background-position: center, left top;
        background-repeat: no-repeat, repeat;
        background-size: auto, 840px 840px;
    }
}

/* ==========================================================================
   UI-BOOK-02  product detail must not overflow the phone viewport
   (Conversion Priority round, 2026-08-16)

   Measured on production at a 390px layout viewport: documentElement.scrollWidth
   was 411px while clientWidth was 390px, and the page could NOT be scrolled
   sideways (maxHorizontalScroll = 0) — so 21px of the product detail was simply
   clipped and unreachable, which is worse than a scrollbar because nothing hints
   that content is missing.

   The earlier note recorded .book-gallery as the cause. It is not: probed with
   width:min-content, .book-gallery measures 94px. The driver is .book-detail-info
   at 395px, which comes from .book-detail-text — it carries white-space: pre-line
   with default word-break, and BOOK product copy arrives from the admin containing
   long runs with no break opportunity (min-content 349px inside 22px padding).

   Grid items default to min-width:auto, so that min-content floor propagated into
   the track: .book-detail-grid resolved to a single 395px column inside a 358px
   grid, and .book-gallery was stretched to match — a victim, not the cause.

   Two declarations fix it, verified in-browser against production before being
   written here: scrollWidth 411 -> 390, track 395px -> 358px.
   ========================================================================== */

.book-detail-grid > * {
    /* Let the track shrink to the column instead of to the widest unbreakable word. */
    min-width: 0;
}

.book-detail-text {
    /* pre-line keeps the author's line breaks; this only adds break opportunities
       inside runs that would otherwise have none. */
    overflow-wrap: anywhere;
}

/* ==========================================================================
   UI-BOOK-01  empty-state actions
   ========================================================================== */

.book-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.book-empty-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    justify-content: center;
    color: #7a6142;
    font-size: .88rem;
}

.book-empty-categories a {
    color: #7a281b;
    font-weight: 700;
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   R4.2-A2 — "查看全部"
   The home page shows eight rotating items per section. A count of what
   is hidden is only honest if it comes with somewhere to go, so every
   capped section gets this link. 44px minimum target: it is a primary
   navigation action on a phone, not a footnote.
   ------------------------------------------------------------------ */
.book-view-all {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.book-view-all::after { content: "›"; font-size: 1.15em; line-height: 1; }

.book-view-all:hover,
.book-view-all:focus-visible { text-decoration: underline; }

.book-view-all--nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: .75rem;
}

.book-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }