/* ════════════════════════════════════════════════════════════
   Product listing / search / category — page chrome.
   Built on the live shop.css tokens (--primary, --text-1/2/3,
   --bg-card, --bg-input, --border, --radius, --shadow-sm).
   The product cards + grid come from shop.css; grouped sections
   from home.css.
   ════════════════════════════════════════════════════════════ */

/* ── Heading ─────────────────────────────────────────────── */
.pc-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pc-breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: .8rem; color: var(--text-3);
}
.pc-breadcrumb a { color: var(--text-3); text-decoration: none; transition: color .15s; }
.pc-breadcrumb a:hover { color: var(--primary); }
.pc-breadcrumb i { font-size: .7rem; }
.pc-title-row { display: flex; align-items: center; gap: 14px; }
.pc-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    background: var(--primary-t); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--primary);
    overflow: hidden;
}
.pc-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-title { font-size: 1.35rem; font-weight: 800; color: var(--text-1); margin: 0; line-height: 1.4; }
.pc-title .pc-q { color: var(--primary); }
.pc-sub { font-size: .82rem; color: var(--text-3); }

/* ── Subcategory pills ───────────────────────────────────── */
.pc-subcats-panel {
    margin-top: 8px; padding: 10px; border: 1px solid var(--border);
    border-radius: 12px; background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-input));
    box-shadow: var(--shadow-sm);
    position: relative;
}
.pc-subcats-head {
    display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
    color: var(--text-1); font-size: .7rem; font-weight: 850;
}
.pc-subcats-head i { color: var(--primary); font-size: .82rem; }
.pc-subcats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    overflow: visible;
    padding-bottom: 2px;
}
.pc-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px;
    font-size: .66rem; font-weight: 650;
    color: var(--text-2); background: var(--bg-card);
    border: 1px solid var(--border); text-decoration: none;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.pc-pill i { color: var(--text-3); font-size: .76rem; }
.pc-pill:hover { background: var(--primary-t); color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.pc-pill:hover i { color: var(--primary); }
.pc-pill .pc-pill-count {
    background: var(--bg-input); border-radius: 999px;
    padding: 1px 8px; font-size: .72rem; color: var(--text-3);
}
.pc-pill:hover .pc-pill-count { background: var(--primary-lt); color: var(--primary); }
/* ── Filter bar ──────────────────────────────────────────── */
.pc-filter-shell {
    container: pc-filter / inline-size;
    display: block; margin-bottom: 16px;
    position: relative; padding-bottom: 10px;
}
.pc-filter-shell::after {
    content: "";
    position: absolute;
    right: 4px;
    left: 4px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--border), var(--text-3), var(--border), transparent);
    opacity: 0;
    transition: opacity .18s ease;
}
.pc-filter-shell.has-horizontal-overflow::after { opacity: .75; }
.pc-filter-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    padding-bottom: 10px; overflow-x: auto; overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-3) 70%, var(--border)) transparent;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}
.pc-filter-bar.is-dragging {
    cursor: grabbing;
}
.pc-filter-bar.is-dragging * { cursor: grabbing !important; }
.pc-filter-bar::-webkit-scrollbar { display: block; height: 9px; }
.pc-filter-bar::-webkit-scrollbar-track { background: transparent; }
.pc-filter-bar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-3) 70%, var(--border));
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}
.pc-filter-bar::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.pc-filter-menu { position: relative; flex: 0 0 auto; }
.pc-filter-menu,
.pc-filter-actions { direction: rtl; }
.pc-filter-menu summary {
    min-height: 38px; display: inline-flex; align-items: center; gap: 7px;
    padding: 0 13px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-card); color: var(--text-2); box-shadow: var(--shadow-sm);
    font-size: .8rem; font-weight: 800; cursor: pointer; list-style: none;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.pc-filter-menu summary::-webkit-details-marker { display: none; }
.pc-filter-menu summary i { color: var(--text-3); font-size: .92rem; }
.pc-filter-menu[open] summary,
.pc-filter-menu.is-active summary {
    color: var(--primary); border-color: rgb(var(--main-color) / .35); background: var(--primary-t);
}
.pc-filter-panel {
    position: absolute; z-index: 260; top: calc(100% + 8px); right: 0;
    min-width: 280px; max-width: min(420px, calc(100vw - 36px));
    padding: 14px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 18px 45px rgb(15 23 42 / .14);
    box-sizing: border-box;
    -webkit-user-select: text;
    user-select: text;
    transform-origin: top right;
    animation: pc-filter-panel-in .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes pc-filter-panel-in {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.pc-filter-menu[data-panel-align="start"] > .pc-filter-panel { right: auto; left: 0; }
.pc-filter-menu[data-panel-align="end"] > .pc-filter-panel { right: 0; left: auto; }
.pc-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 10px;
}
.pc-panel-title { display: block; color: var(--text-1); font-size: .86rem; font-weight: 900; }
.pc-panel-close {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-input); color: var(--text-3);
    font-size: 1rem; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.pc-panel-close:hover { color: var(--primary); border-color: rgb(var(--main-color) / .35); background: var(--primary-t); }
.pc-choice-list {
    display: grid;
    gap: 8px;
    max-height: min(60vh, 528px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: 2px;
    scrollbar-width: thin;
}
.pc-choice-list::-webkit-scrollbar { width: 5px; }
.pc-choice-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.pc-choice {
    display: flex; align-items: center; gap: 8px;
    min-height: 36px; padding: 0 10px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--bg-input); color: var(--text-2);
    font-size: .8rem; cursor: pointer;
}
.pc-choice input { accent-color: var(--primary); }
.pc-choice:has(input:checked) { border-color: rgb(var(--main-color) / .45); background: var(--primary-t); color: var(--primary); font-weight: 800; }
.pc-price-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-field { display: grid; gap: 6px; min-width: 0; }
.pc-field span { color: var(--text-3); font-size: .75rem; }
.pc-field input {
    width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--bg-input); color: var(--text-1);
    font-size: .82rem; outline: none; font-family: inherit; -moz-appearance: textfield;
    text-align: right;
}
.pc-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }
.pc-field input::-webkit-inner-spin-button { display: none; }
.pc-attr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pc-attr-block { display: grid; gap: 7px; min-width: 0; }
.pc-attr-block summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    color: var(--text-1); font-size: .82rem; font-weight: 900;
    cursor: pointer; list-style: none;
}
.pc-attr-block summary::-webkit-details-marker { display: none; }
.pc-attr-block summary i { color: var(--text-3); transition: transform .15s; }
.pc-attr-block[open] summary i { transform: rotate(180deg); }
.pc-attr-count {
    margin-inline-start: auto; color: var(--text-3); font-size: .72rem; font-weight: 700;
}
.pc-attr-title { color: var(--text-1); font-size: .78rem; font-weight: 900; }
.pc-attr-options { display: grid; gap: 6px; max-height: 160px; overflow: auto; padding-left: 2px; }
.pc-attr-color {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid var(--border); flex-shrink: 0;
}
.pc-filter-actions { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.pc-filter-shell:not(.has-selected-filters):not(.has-pending-filters) .pc-filter-actions:not(:has(.pc-reset)) {
    display: none;
}
.pc-filter-shell .pc-apply {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px;
    background: #ed1b24; color: #fff; font-size: .82rem; font-weight: 900;
    cursor: pointer; white-space: nowrap; font-family: inherit;
    opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none;
    visibility: hidden;
    box-shadow: 0 10px 24px -14px rgba(237,27,36,.8);
    transition:
        opacity .18s ease,
        transform .22s cubic-bezier(.2,.8,.2,1),
        visibility .18s ease,
        background .15s,
        box-shadow .2s;
}
.pc-filter-shell.has-selected-filters .pc-apply,
.pc-filter-shell.has-pending-filters .pc-apply {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
    visibility: visible;
}
.pc-filter-shell.has-selected-filters .pc-apply:hover,
.pc-filter-shell.has-pending-filters .pc-apply:hover {
    background: #d01720;
    box-shadow: 0 14px 30px -14px rgba(237,27,36,.95);
    transform: translateY(-1px);
}
.pc-filter-shell .pc-reset {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 38px; padding: 0 13px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-card);
    color: var(--text-3); font-size: .8rem; text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.pc-filter-shell .pc-reset:hover { color: var(--red); border-color: var(--red); background: rgb(var(--danger-color) / .06); }
.pc-filter-badge {
    min-width: 18px; height: 18px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--primary); color: #fff;
    font-size: .68rem; font-weight: 900;
}
@media (min-width: 1181px) {
    .pc-filter-bar {
        direction: ltr;
        flex-direction: row-reverse;
    }
    .pc-filter-menu[open] > .pc-filter-panel {
        position: fixed;
        top: var(--pc-panel-top, -9999px);
        left: var(--pc-panel-left, -9999px);
        right: auto;
        z-index: 1000;
    }
}
@container pc-filter (max-width: 720px) {
    .pc-filter-bar {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pc-filter-bar::-webkit-scrollbar { display: none; }
    .pc-filter-menu { flex: 0 0 auto; }
    .pc-filter-menu[open] { flex: 0 0 auto; }
    .pc-filter-menu[open] summary { width: max-content; max-width: 100%; }
    .pc-filter-menu .pc-filter-panel { min-width: 0; }
}
@media (max-width: 1180px) {
    .pc-filter-shell { display: grid; grid-template-columns: 1fr; padding: 0 0 10px; }
    .pc-filter-bar {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pc-filter-bar::-webkit-scrollbar { display: none; }
    .pc-filter-menu { position: static; flex: 0 0 auto; }
    .pc-filter-menu[open] > .pc-filter-panel {
        position: fixed !important; z-index: 1000 !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important; min-width: 0 !important; max-width: none !important; margin-top: 0 !important;
        max-height: min(70vh, 460px) !important; overflow: auto !important;
        border-radius: 18px; box-shadow: 0 24px 70px rgb(15 23 42 / .28);
        transform-origin: bottom center;
        animation-name: pc-filter-panel-mobile-in;
    }
    .pc-filter-panel.is-mobile-detached {
        position: fixed !important; z-index: 1000 !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important; min-width: 0 !important; max-width: none !important; margin-top: 0 !important;
        max-height: min(70vh, 460px) !important; overflow: auto !important;
        border-radius: 18px; box-shadow: 0 24px 70px rgb(15 23 42 / .28);
        transform-origin: bottom center;
        animation-name: pc-filter-panel-mobile-in;
    }
    .pc-filter-menu[open] { flex: 0 0 auto; }
    .pc-filter-menu[open] summary { width: max-content; max-width: 100%; }
    .pc-attr-grid { grid-template-columns: 1fr; }
    .pc-filter-shell .pc-filter-actions {
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        left: max(12px, env(safe-area-inset-left));
        bottom: max(12px, env(safe-area-inset-bottom));
        z-index: 1105;
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin-inline-start: 0;
        padding: 8px;
        border: 1px solid rgb(255 255 255 / .08);
        border-radius: 18px;
        background: color-mix(in srgb, var(--bg-card) 90%, transparent);
        box-shadow: 0 14px 40px rgb(15 23 42 / .24);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 18px, 0) scale(.985);
        transition:
            opacity .2s ease,
            transform .24s cubic-bezier(.2,.8,.2,1),
            visibility .2s ease;
    }
    .pc-choice-list { max-height: min(42vh, 320px); }
    .pc-filter-shell.has-selected-filters .pc-filter-actions,
    .pc-filter-shell.has-pending-filters .pc-filter-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) scale(1);
    }
    .pc-filter-shell.has-selected-filters .pc-apply,
    .pc-filter-shell.has-pending-filters .pc-apply {
        flex: 1 1 auto;
        min-height: 44px;
        box-shadow: 0 10px 24px -14px rgba(237,27,36,.85);
    }
    .pc-filter-shell.has-selected-filters .pc-reset,
    .pc-filter-shell.has-pending-filters .pc-reset {
        flex: 0 0 auto;
        min-height: 44px;
        background: color-mix(in srgb, var(--bg-input) 92%, transparent);
    }
    .pc-filter-shell.has-selected-filters .pc-filter-menu[open] > .pc-filter-panel,
    .pc-filter-shell.has-pending-filters .pc-filter-menu[open] > .pc-filter-panel,
    .pc-filter-shell.has-selected-filters .pc-filter-panel.is-mobile-detached,
    .pc-filter-shell.has-pending-filters .pc-filter-panel.is-mobile-detached {
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 68px) !important;
        max-height: min(60vh, 380px) !important;
    }
}

@keyframes pc-filter-panel-mobile-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .pc-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .pc-filter-shell.is-filter-open .pc-filter-bar,
    .pc-filter-shell:has(.pc-filter-menu[open]) .pc-filter-bar {
        overflow-x: auto;
        overflow-y: hidden;
    }
    .pc-filter-shell:not(.has-selected-filters):not(.has-pending-filters) .pc-filter-actions:not(:has(.pc-reset)) {
        display: none;
    }
    .pc-filter-menu,
    .pc-filter-menu[open] {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .pc-filter-menu summary,
    .pc-filter-menu[open] summary {
        width: max-content;
        max-width: 72vw;
        white-space: nowrap;
    }
    .pc-filter-menu summary span:not(.pc-filter-badge) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pc-filter-actions { flex: 0 0 auto; }
    .pc-filter-shell.has-selected-filters .pc-filter-actions,
    .pc-filter-shell.has-pending-filters .pc-filter-actions {
        right: max(10px, env(safe-area-inset-right));
        left: max(10px, env(safe-area-inset-left));
        bottom: max(10px, env(safe-area-inset-bottom));
        border-radius: 16px;
    }
}

/* ── Toolbar (result count) ──────────────────────────────── */
@media (max-width: 420px) {
    .pc-price-panel { grid-template-columns: 1fr; }
    .pc-filter-menu summary,
    .pc-filter-shell .pc-apply,
    .pc-filter-shell .pc-reset { min-height: 40px; }
    .pc-choice-list { max-height: min(38vh, 272px); }
}

.pc-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.pc-count { font-size: .85rem; color: var(--text-3); }
/* Image-heavy categories use a homepage-style natural card flow, with a height
   guard for migrated legacy preview sheets that are much taller than a card. */
.pc-product-grid--natural-images {
    --pc-natural-image-max-height: 560px;
    display: block;
    columns: var(--home-masonry-card-width, 320px);
    column-gap: var(--home-masonry-gap, 12px);
}
.pc-product-grid--natural-images > .product-card {
    break-inside: avoid;
    margin: 0 0 var(--home-masonry-gap, 12px);
}
.pc-product-grid--natural-images .pcard--image .pcard-thumb {
    aspect-ratio: auto;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: var(--pc-natural-image-max-height);
}
.pc-product-grid--natural-images .pcard--image .pcard-img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--pc-natural-image-max-height);
    object-fit: contain;
    display: block;
}
.pc-product-grid--natural-images .pcard--image:hover .pcard-img,
.pc-product-grid--natural-images .pcard--image .pcard-thumb:hover .pcard-img--zoom {
    transform: none;
}
.pc-product-grid--natural-images .pcard--tall-cover .pcard-thumb {
    aspect-ratio: 4 / 3;
    display: block;
    max-height: none;
}
.pc-product-grid--natural-images .pcard--tall-cover .pcard-img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: top center;
}
.pc-category-masonry .masonry-card img {
    /* Reserve space until intrinsic dimensions become available. */
    aspect-ratio: auto 4 / 3;
}
.pc-category-masonry[data-js-masonry].is-js-masonry-ready {
    columns: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--home-masonry-gap, 12px);
}
.pc-category-masonry[data-js-masonry].is-js-masonry-ready > .pc-masonry-col {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    gap: var(--home-masonry-gap, 12px);
}
.pc-category-masonry[data-js-masonry].is-js-masonry-ready .masonry-item {
    margin: 0;
}
@media (max-width: 640px) {
    .pc-product-grid--natural-images {
        --pc-natural-image-max-height: 430px;
        display: grid;
        grid-template-columns: 1fr;
        columns: auto;
        gap: 16px;
    }
    .pc-product-grid--natural-images > .product-card {
        margin: 0;
    }
    .pc-category-masonry.masonry {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        columns: auto;
        gap: 16px;
        overflow: visible;
        margin-inline: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    .pc-category-masonry[data-js-masonry].is-js-masonry-ready {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
    }
    .pc-category-masonry[data-js-masonry].is-js-masonry-ready > .pc-masonry-col {
        display: contents;
    }
    .pc-category-masonry .masonry-item {
        flex: none;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .pc-category-masonry .masonry-card {
        width: 100%;
    }
    .pc-category-masonry .masonry-overlay {
        opacity: 0;
    }
}

/* ── Empty state ─────────────────────────────────────────── */
.pc-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 64px 0; color: var(--text-3); text-align: center;
}
.pc-empty i { font-size: 3rem; opacity: .4; }
.pc-empty p { font-size: .95rem; }

/* ── Grouped sections "view all" link ────────────────────── */
.pc-sec-all {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 15px; border-radius: 10px;
    font-size: .78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
    color: var(--text-2); background: var(--bg-card);
    border: 1px solid var(--border); text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.pc-sec-all:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-t); }

/* ── Media-type grouped search/category rows ─────────────── */
.pc-media-sections {
    display: grid;
    gap: 28px;
}
.pc-media-section {
    display: grid;
    gap: 12px;
}
.pc-media-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pc-media-title-wrap {
    min-width: 0;
}
.pc-media-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--text-1);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.5;
}
.pc-media-title i {
    color: var(--primary);
    font-size: 1.05rem;
}
.pc-media-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.pc-media-strip > .product-card {
    flex: 0 0 clamp(210px, 22vw, 300px);
    max-width: 300px;
    scroll-snap-align: start;
}
.pc-media-strip > .awc {
    flex-basis: clamp(280px, 32vw, 420px);
    max-width: 420px;
}
.pc-media-strip.pc-search-image-strip {
    gap: 12px;
    padding-block: 2px 10px;
}
.pc-search-image-item {
    position: relative;
    flex: 0 0 clamp(150px, 16vw, 230px);
    max-width: 230px;
    scroll-snap-align: start;
}
.pc-search-image-item .masonry-card {
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}
.pc-search-image-item .masonry-card:hover {
    border-color: transparent;
    box-shadow: none;
}
.pc-search-image-item .masonry-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.pc-search-image-item .masonry-overlay {
    border-radius: 8px;
}
.pc-search-image-item .masonry-card-action {
    top: 8px;
    right: 8px;
}
@media (max-width: 640px) {
    .pc-media-sections { gap: 24px; }
    .pc-media-hdr { align-items: flex-start; }
    .pc-media-strip {
        margin-inline: -14px;
        padding-inline: 14px;
        scrollbar-width: none;
    }
    .pc-media-strip::-webkit-scrollbar { display: none; }
    .pc-media-strip > .product-card {
        flex-basis: min(82vw, 320px);
        max-width: min(82vw, 320px);
    }
    .pc-search-image-item {
        flex-basis: min(44vw, 180px);
        max-width: min(44vw, 180px);
    }
    .pc-search-image-item .masonry-overlay {
        opacity: 0;
    }
}

/* ── Pagination ──────────────────────────────────────────── */
.pc-pagination {
    display: flex; justify-content: center; gap: 6px; margin-top: 30px; flex-wrap: wrap;
}
.pc-pagination .page-btn {
    min-width: 38px; height: 38px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: .85rem;
    color: var(--text-2); background: var(--bg-card);
    border: 1px solid var(--border); text-decoration: none;
    transition: background .16s, color .16s, border-color .16s;
}
.pc-pagination .page-btn:hover     { color: var(--primary); border-color: var(--primary); }
.pc-pagination .page-btn.current   { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.pc-pagination .page-btn[disabled] { opacity: .35; pointer-events: none; }

.pc-infinite {
    display: none; flex-direction: column; align-items: center; gap: 10px;
    margin-top: 30px; color: var(--text-3); font-size: .82rem;
}
.pc-infinite.is-ready { display: flex; }
.pc-infinite-status { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; }
.pc-infinite-status i { color: var(--primary); font-size: 1rem; }
.pc-infinite.is-loading .pc-infinite-status i { animation: pc-spin .75s linear infinite; }
.pc-infinite-retry {
    min-height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-2); cursor: pointer; font: inherit; font-weight: 700;
}
.pc-infinite-retry:hover { color: var(--primary); border-color: var(--primary); }
.pc-infinite[hidden], .pc-infinite-retry[hidden] { display: none; }
.pc-pagination.is-hidden-by-infinite { display: none; }
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .pc-toolbar { align-items: flex-start; }
}