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

* {
    box-sizing: border-box;
}

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

a {
    color: inherit;
}

.pc-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--pc-line);
    background: rgba(4, 13, 28, .9);
    backdrop-filter: blur(16px);
}

.pc-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;
}

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

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

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

.pc-navlinks a,
.pc-inline-form button,
.pc-admin-topbar button,
.pc-admin-site-link,
.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    color: var(--pc-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;
}

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

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

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

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

.pc-alert,
.pc-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(--pc-radius);
    background: rgba(47, 35, 12, .84);
    color: #fff3cc;
}

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

.pc-sidebar {
    align-self: start;
    position: sticky;
    top: 96px;
    padding: 16px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    background:
        linear-gradient(180deg, rgba(8, 21, 42, .88), rgba(6, 16, 32, .92)),
        url("/assets/images/pc-store/backgrounds/pc-bg-sidebar-900x1400.jpg") center / cover;
}

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

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

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

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

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

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

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

.pc-category-link {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 8px;
    border: 1px solid rgba(127, 215, 255, .18);
    border-radius: var(--pc-radius);
    background: rgba(5, 16, 31, .74);
    text-decoration: none;
}

.pc-category-link img {
    width: 88px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}

.pc-category-link strong {
    display: block;
    font-size: .98rem;
}

.pc-category-link span {
    color: var(--pc-muted);
    font-size: .82rem;
}

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

.pc-category-header {
    min-height: 170px;
    margin-bottom: 20px;
    padding: 22px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: end;
}

.pc-category-header h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .65);
}

.pc-section {
    margin-bottom: 30px;
}

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

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

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

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

.pc-product-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    min-height: 100%;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    background: var(--pc-panel);
}

/* picture is inline by default, which would put the card's image in a line box and leave a
   descender gap under it. GAME has no wrapper, so matching it means making this one disappear. */
.pc-product-card picture {
    display: block;
}

.pc-product-card img {
    width: 100%;
    /* height: auto is what makes aspect-ratio apply. The width/height attributes on the tag map to
       presentational-hint CSS, and an explicit height wins over aspect-ratio - so the 4/3 rule below
       was being ignored and the frame rendered at the attribute's 480px, roughly 9:20. The
       attributes stay: they still give the browser the intrinsic ratio before this stylesheet
       arrives, which is what keeps the layout from shifting. */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, .04);
}

.pc-product-card-body {
    padding: 12px;
}

.pc-product-card h3 {
    min-height: 2.8em;
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.4;
}

.pc-product-card h3 a {
    text-decoration: none;
}

.pc-product-card .pc-meta {
    color: var(--pc-muted);
    font-size: .84rem;
}

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

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

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

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

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

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

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

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

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

.pc-gallery {
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.pc-admin-login-page {
    background:
        linear-gradient(180deg, rgba(3, 8, 18, .45), rgba(3, 8, 18, .9)),
        url("/assets/images/pc-store/backgrounds/pc-bg-admin-login-1600x900.jpg") center / cover fixed;
}

body.pc-member-login-page {
    background:
        linear-gradient(180deg, rgba(3, 8, 18, .45), rgba(3, 8, 18, .9)),
        url("/assets/images/pc-store/backgrounds/pc-bg-member-login-1600x900.jpg") center / cover fixed;
}

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

.pc-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(--pc-line);
    background: rgba(4, 13, 28, .94);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .pc-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);
    }

    .pc-sidebar {
        position: static;
    }

    .pc-category-links {
        grid-template-columns: repeat(5, minmax(150px, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
    }

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

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

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

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

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

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

@media (max-width: 620px) {
    .pc-product-grid,
    .pc-admin-grid {
        grid-template-columns: 1fr;
    }

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

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

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

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

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

.pc-order-followup,
.pc-checkout-expectation {
    margin: 20px 0;
    padding: 18px;
    border: 1px solid var(--pc-line-strong);
    border-left: 4px solid var(--pc-cyan);
    border-radius: var(--pc-radius);
    color: var(--pc-text);
    background: rgba(6, 17, 31, .72);
    line-height: 1.7;
}

.pc-order-followup h2 {
    margin: 0 0 12px;
    color: var(--pc-gold);
    font-size: 1.3rem;
}

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

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

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

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

.pc-order-followup dt {
    color: var(--pc-muted);
}

.pc-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. */
.pc-form-crosslink { margin: 0 0 16px; }
.pc-form-crosslink a { display: inline-block; padding: 8px 14px; border: 1px solid #2c4a7c; border-radius: 8px; color: #1c3a68; font-weight: 700; text-decoration: none; }
.pc-form-crosslink a:hover { background: #eef4fc; }

/* ==========================================================================
   UI-CARD-01  PC storefront product card behaviour contract
   (Conversion Priority round, 2026-08-16)

   This block changes BEHAVIOUR only. The PC skin — panel fill, gold price, cyan
   rules, radii — is untouched; PC keeps looking like PC. What it adopts is the
   contract already proven on .book-product-card in G5.

   WHY THIS EXISTS
   Measured on production at 1440px with real catalogue data: .pc-product-card h3
   had no line clamp (computed -webkit-line-clamp: none) and no break rules, so
   titles ran 2-4 lines depending on the product name. Because the price sat
   immediately after the title in normal flow, everything below the title moved
   with it. Two of the five rows on /pc had their price and 供貨 lines off by
   22-23px from their neighbours:

       row y=1487  titleH [67, 90, 67, 67]  ->  priceY [1787, 1810, 1787, 1787]
       row y=1932  titleH [67, 67, 45, 45]  ->  priceY [2232, 2232, 2210, 2210]

   A 72-character unbroken title also grew one card from 492px to 752px, which is
   the same failure waiting on any product name pasted in from a supplier feed.

   THE CONTRACT (identical to book-store.css "G5 storefront product card";
   game-store.css carries the same block with GAME's own skin)
   1. Fixed image aspect ratio, so every card in a row starts its text at the same y.
   2. Title occupies exactly --pc-card-title-lines lines: min-height reserves them,
      line-clamp caps them. The title never decides the card height.
   3. 供貨 is reserved and clamped at 2 lines for the same reason.
   4. Price + 供貨 form a bottom block pushed down by margin-top:auto, so their
      position is stable whether the title is one line or three, and whether or not
      the commerce P0 供貨 row is rendered at all.
   5. Long unbroken text always has a break opportunity.
   ========================================================================== */

.pc-product-card {
    --pc-card-title-lines: 3;
    --pc-card-title-line-height: 1.4;
    --pc-card-meta-line-height: 1.4;
}

.pc-product-card-body {
    /* Column flex is what lets rule 4's margin-top:auto work at all. */
    display: flex;
    flex-direction: column;
}

.pc-product-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--pc-card-title-lines);
    line-clamp: var(--pc-card-title-lines);
    overflow: hidden;
    /* Reserve and cap the same number of lines: reserving alone still lets a long
       title grow, capping alone still lets a short one shrink the card. */
    min-height: calc(var(--pc-card-title-lines) * var(--pc-card-title-line-height) * 1em);
    line-height: var(--pc-card-title-line-height);
    /* Product names arrive from the PC admin with no guaranteed break opportunities. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pc-product-card .pc-price {
    margin-top: auto;
}

.pc-product-card .pc-product-availability {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * var(--pc-card-meta-line-height) * 1em);
    margin-top: 4px;
    line-height: var(--pc-card-meta-line-height);
    overflow-wrap: anywhere;
}

/* One column means a much wider card, so the same title fits in fewer lines. */
@media (max-width: 620px) {
    .pc-product-card {
        --pc-card-title-lines: 2;
    }
}

/* ------------------------------------------------------------------
   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.
   ------------------------------------------------------------------ */
.pc-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;
}

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

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

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

.pc-section-head { flex-wrap: wrap; gap: .75rem; }

/* The hero copy block. The H1 keeps its size; the sentence under it is the category's own
   one-line description, kept short because the hero is only 170px tall on a phone. */
.pc-category-header-copy {
    max-width: 46rem;
}

.pc-category-header-copy p {
    margin: 6px 0 0;
    color: var(--pc-text);
    font-size: .95rem;
    line-height: 1.55;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}

/* ==========================================================================
   MOBILE-OVERFLOW-01 — the same defect BOOK fixed, in the two stores that
   did not get the fix.

   All three storefronts share one product-detail structure: a two-column grid
   whose right-hand column holds .pc-detail-text with white-space: pre-line.
   Product copy arrives from the admin and contains long runs with no break
   opportunity. Grid items default to min-width:auto, so that min-content floor
   propagates into the track: the grid resolves to a single column wider than
   the grid itself, and the gallery is stretched to match - a victim, not the
   cause. The fixed mobile CTA bar then sizes to the widened layout viewport,
   which is what makes the page scroll sideways.

   BOOK diagnosed and fixed this and the other two were left alone. Measured on
   production at 375px on 2026-08-30, before this change:

       /game-store/product/TVGAME093   scrollWidth 406 vs 375   (+31px)
       /game-store/product/TVGAME026   scrollWidth 406 vs 375   (+31px)
       /game-store/product/PCGAME080   scrollWidth 406 vs 375   (+31px)
       /book-store/product/BK-LNV-00349            375 vs 375   (0, already fixed)

   Every GAME product page, on every phone. PC measured 0 today, but it has the
   identical structure and only escapes because its current copy happens to
   break; it is included so the third store cannot become the next report.
   ========================================================================== */

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

.pc-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;
}