.pc-page, .pc-picker, .pc-bookmark-wrap {
    --pc-ink: #243e3b;
    --pc-muted: #506763;
    --pc-soft: #f0f9f7;
    --pc-line: #d4e4e0;
    --pc-action: #087b75;
    --pc-pink: #a72260;
    color: var(--pc-ink);
}
.pc-page { padding: 28px clamp(12px, 3vw, 40px); background: #fff; }
.pc-page *, .pc-picker * { box-sizing: border-box; }
.pc-page h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; margin: 18px 0 24px; color: var(--pc-ink); }
.pc-back { color: var(--pc-action); text-decoration: underline; }
.pc-small { display: block; color: var(--pc-muted); font-size: .875rem; font-weight: 400; }
.pc-toolbar, .pc-picker { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; padding: 18px; background: var(--pc-soft); border-radius: 12px; }
.pc-toolbar > div:first-child { flex: 1 1 150px; }
.pc-toolbar strong { display: block; }
.pc-choice { flex: 3 1 280px; min-width: 0; }
.pc-choice label { display: block; margin-bottom: 6px; }
.pc-choice select { width: 100%; max-width: 100%; min-height: 44px; color: var(--pc-ink); background-color: #fff; font-size: 1rem; }
.pc-current-choice { display: none; }
.pc-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--pc-line); border-radius: 8px; background: #fff; color: var(--pc-ink); font: inherit; line-height: 1.4; text-decoration: none; white-space: normal; text-align: center; }
.pc-button:hover { color: var(--pc-action); border-color: var(--pc-action); text-decoration: underline; }
.pc-button.pc-primary { background: var(--pc-action); border-color: var(--pc-action); color: #fff; font-weight: 600; }
.pc-button:disabled { opacity: .65; cursor: not-allowed; }
.pc-countbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 18px 0 12px; }
.pc-countbar p { margin: 0; }
.pc-scroll-controls { display: flex; justify-content: flex-end; gap: 10px; margin: 12px 0; }
.pc-scroll-controls[hidden] { display: none; }
.pc-scroll { overflow: auto; max-height: 76vh; max-height: 76dvh; border: 1px solid var(--pc-line); border-radius: 10px; scrollbar-color: #648d85 #eef7f4; scroll-padding: 4px 12px 12px 180px; }
.pc-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; table-layout: fixed; margin: 0; }
.pc-table th, .pc-table td { width: 240px; min-width: 240px; max-width: 240px; padding: 16px; background: #fff; color: var(--pc-ink); border-right: 1px solid var(--pc-line); border-bottom: 1px solid var(--pc-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; font-weight: 400; }
.pc-table th:first-child { width: 170px; min-width: 170px; max-width: 170px; position: sticky; left: 0; z-index: 2; background: var(--pc-soft); font-weight: 600; }
.pc-table thead th { position: sticky; top: 0; z-index: 3; }
.pc-table thead th:first-child { z-index: 4; vertical-align: bottom; }
.pc-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pc-saved { color: var(--pc-pink); font-size: .875rem; }
.pc-remove { min-width: 44px; min-height: 44px; border: 0; border-radius: 6px; background: #fff; color: var(--pc-muted); font: inherit; font-size: 1.5rem; }
.pc-image { width: 100%; height: 112px; object-fit: contain; display: block; margin: 6px 0 12px; background: #fff; }
.pc-product-title { display: block; font-weight: 600; margin-bottom: 6px; }
.pc-table .pc-primary { width: 100%; margin-top: 12px; }
.pc-cart { display: block; font-size: .875rem; color: #155e51; margin-top: 9px; }
.pc-price { font-variant-numeric: tabular-nums; }
.pc-price-note { margin: 14px 0; }
.pc-page :is(a, button, select):focus-visible, .pc-scroll:focus-visible,
.pc-picker :is(a, button, select, input):focus-visible, .pc-check input:focus-visible,
.pc-bookmark-wrap :is(button, a):focus-visible { outline: 3px solid #07645e; outline-offset: 3px; }
.pc-picker { margin-bottom: 20px; }
.pc-picker h3 { margin: 0; font-size: 1.15rem; color: var(--pc-ink); }
.pc-picker p { margin: 5px 0 0; }
.pc-picker .pc-picker-copy { flex: 1 1 240px; }
.pc-picker .pc-choice { flex: 1 1 180px; }
.pc-picker [role="status"] { flex-basis: 100%; margin: 0; }
.pc-check { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 10px 0; color: #243e3b; }
.pc-check input { width: 20px; height: 20px; accent-color: #087b75; }
.pc-check input:disabled + span { color: #60716e; }
.pc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pc-bookmark-wrap { display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: center; max-width: 100%; }
.pc-bookmark-wrap .pc-bookmark { position: relative; min-height: 44px; }
.pc-bookmark-wrap .pc-bookmark[aria-pressed="true"] { background: #fff0f6; color: var(--pc-pink); border: 1px solid var(--pc-pink); }
.pc-bookmark-wrap .pc-tooltip { display: none; position: absolute; left: 0; top: calc(100% + 5px); z-index: 30; width: min(260px, 75vw); padding: 9px 12px; border-radius: 6px; color: #fff; background: #243e3b; font-size: .875rem; font-weight: 400; }
.pc-bookmark:hover .pc-tooltip, .pc-bookmark:focus .pc-tooltip { display: block; }
.pc-bookmark.pc-tooltip-hidden .pc-tooltip { display: none; }
.pc-bookmark-wrap > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--pc-action); text-decoration: underline; }
@media (max-width: 640px) {
    .pc-page { padding: 18px 12px; }
    .pc-toolbar { padding: 13px; gap: 12px; }
    .pc-choice { flex-basis: 100%; }
    .pc-table th:first-child { width: 110px; min-width: 110px; max-width: 110px; padding: 12px 9px; font-size: .875rem; }
    .pc-table th, .pc-table td { width: clamp(174px, calc(100vw - 138px), 220px); min-width: clamp(174px, calc(100vw - 138px), 220px); max-width: clamp(174px, calc(100vw - 138px), 220px); padding: 12px; }
    .pc-current-choice { display: block; margin-top: 8px; font-size: .875rem; overflow-wrap: anywhere; }
    .pc-image { height: 78px; }
    .pc-scroll { scroll-padding-left: 120px; }
    .pc-toolbar > button { width: 100%; }
    .pc-countbar > a { width: 100%; }
}
/* On short/zoomed viewports, never let a large sticky product head hide all rows. */
@media (max-height: 650px) {
    .pc-scroll { max-height: none; }
    .pc-table thead th { top: auto; }
}
@media (forced-colors: active) {
    .pc-button, .pc-remove, .pc-bookmark { border: 1px solid ButtonText; }
    .pc-table th, .pc-table td { border-color: CanvasText; }
}
@media print {
    .pc-scroll { overflow: visible; max-height: none; }
    .pc-table th { position: static !important; }
    .pc-toolbar, .pc-remove, .pc-scroll-controls { display: none; }
}