.pc-catalog { width: min(1300px, calc(100% - 48px)); margin: 0 auto; padding: 126px 0 76px; color: #20383d; font-family: Inter, sans-serif; }
.pc-catalog *, .pc-catalog *::before, .pc-catalog *::after { box-sizing: border-box; }
.pc-catalog [hidden] { display: none !important; }
.pc-catalog button, .pc-catalog input, .pc-catalog select { font: inherit; }
.pc-catalog button { cursor: pointer; }
.pc-catalog :is(button, summary, input, select, a):focus-visible { outline: 3px solid #18a4b3; outline-offset: 3px; }
.pc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pc-controls { position: sticky; top: 96px; z-index: 30; padding: 25px 24px 18px; border: 1px solid #dfe9e8; border-radius: 30px; background: rgba(255,255,255,.97); box-shadow: 0 14px 38px -24px #20383d33; }
.pc-controls h1 { margin: 0 0 18px; text-align: center; font-size: clamp(23px, 2vw, 29px); font-weight: 750; line-height: 1.25; letter-spacing: -.035em; }
.pc-search { position: relative; max-width: 800px; margin: 0 auto 18px; }
.pc-search > svg { position: absolute; top: 50%; left: 18px; width: 20px; height: 20px; fill: none; stroke: #809a9f; stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }
.pc-search input { display: block; width: 100%; height: 48px; padding: 0 18px 0 48px; border: 1px solid #dbe6e5; border-radius: 99px; background: #fff; color: #20383d; font-size: 14px; text-overflow: ellipsis; }
.pc-search input::placeholder { color: #789095; opacity: 1; }
.pc-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.pc-filter { position: relative; }
.pc-filter > summary { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 11px; border: 1px solid #dbe6e5; border-radius: 99px; color: #3c565b; background: #fff; font-size: 11px; font-weight: 650; list-style: none; white-space: nowrap; cursor: pointer; user-select: none; }
.pc-filter > summary::-webkit-details-marker { display: none; }
.pc-filter > summary:hover, .pc-filter[open] > summary, .pc-filter.has-selection > summary { border-color: #76b6b6; color: #086b78; background: #f0f9f7; }
.pc-filter svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-chevron { margin-left: 5px; font-size: 12px; color: #7a969b; }
.pc-filter[open] .pc-chevron { transform: rotate(180deg); }
.pc-selected-count { color: #cf3625; }
.pc-filter-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 2; width: 310px; max-width: calc(100vw - 40px); padding: 18px; border: 1px solid #dbe6e5; border-radius: 20px; background: #fff; box-shadow: 0 15px 40px #20383d26; }
.pc-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5efed; }
.pc-filter-head strong { font-size: 14px; }
.pc-filter-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #f0f5f4; color: #4a6267; font-size: 20px !important; line-height: 1; }
.pc-filter-options { display: grid; gap: 2px; max-height: min(330px, 48vh); margin: 10px -6px; padding: 2px 6px; overflow-y: auto; overscroll-behavior: contain; }
.pc-option { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 37px; padding: 7px 3px; border: 0; border-radius: 8px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.pc-option:hover { background: #f3f9f7; }
.pc-option-check { position: relative; flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid #789095; border-radius: 3px; background: #fff; }
.pc-option[aria-checked="true"] .pc-option-check { border-color: #086b78; background: #086b78; }
.pc-option[aria-checked="true"] .pc-option-check::after { content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pc-option-text { flex: 1; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.pc-option-count { flex: 0 0 auto; padding: 3px 6px; border-radius: 7px; background: #f0f5f4; color: #617b80; font-size: 10px; font-variant-numeric: tabular-nums; }
.pc-option.is-unavailable { opacity: .4; cursor: default; }
.pc-filter-clear { border: 0; padding: 6px 0; background: transparent; color: #086b78; font-size: 11px !important; font-weight: 650 !important; }
.pc-active { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; padding-top: 14px; }
.pc-chip, .pc-reset { display: inline-flex; align-items: center; gap: 9px; min-height: 30px; padding: 6px 11px; border: 1px solid #d5e9e5; border-radius: 99px; background: #eef8f5; color: #086b78; font-size: 10px !important; line-height: 1.35; }
.pc-chip span:last-child { font-size: 16px; line-height: .8; }
.pc-reset { background: #fff; border-color: transparent; color: #637d81; text-decoration: underline; text-underline-offset: 3px; }
.pc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed #dbe6e5; }
.pc-count { margin: 0; color: #617b80; font-size: 12px; line-height: 1.5; }
.pc-count strong { color: #20383d; font-weight: 700; }
.pc-sort { display: flex; align-items: center; gap: 9px; color: #617b80; font-size: 12px; }
.pc-sort select { max-width: 175px; min-height: 34px; padding: 5px 28px 5px 12px; border: 1px solid #dbe6e5; border-radius: 99px; color: #20383d; background: #f8fbfa; font-size: 11px; font-weight: 650; }
.pc-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 22px; margin-top: 20px; }
.pc-product { display: flex; flex-direction: column; min-width: 0; padding: 13px 13px 19px; border: 1px solid #e2ecea; border-radius: 28px; background: #fff; box-shadow: 0 12px 34px -25px #20383d24; }
.pc-product-image { position: relative; aspect-ratio: 400 / 449; overflow: hidden; border-radius: 20px; background: #f5f8f8; }
.pc-product-image img { display: block; width: 100%; height: 100%; padding: 10px 4px; object-fit: contain; }
.pc-price { position: absolute; right: 11px; bottom: 12px; max-width: calc(100% - 20px); padding: 11px 15px; border-radius: 17px; color: #20383d; background: rgba(255,255,255,.97); box-shadow: 0 7px 18px #20383d0c; font-variant-numeric: tabular-nums; }
.pc-price-net { display: flex; align-items: baseline; justify-content: center; gap: 5px; white-space: nowrap; }
.pc-price-net strong { font-size: 16px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; }
.pc-price-net small, .pc-price-gross { color: #637d81; font-size: 10px; line-height: 1.7; }
.pc-price-gross { display: block; text-align: right; }
.pc-product-meta { display: flex; flex: 1; flex-direction: column; padding: 17px 6px 0; }
.pc-product-sku { display: block; margin-bottom: 8px; color: #718c90; font: 650 10px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.pc-product h2 { margin: 0 0 9px; font-size: 17px; line-height: 1.25; font-weight: 750; letter-spacing: -.02em; }
.pc-attributes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pc-attribute { display: flex; flex-direction: column; justify-content: center; min-height: 78px; padding: 12px; border: 1px solid #edf2f1; border-radius: 13px; background: #f7faf9; overflow-wrap: anywhere; }
.pc-attribute dt { margin-bottom: 6px; color: #6b858b; font-size: 8px; line-height: 1.5; letter-spacing: .065em; text-transform: uppercase; }
.pc-attribute dd { margin: 0; color: #20383d; font-size: 12px; font-weight: 550; line-height: 1.4; }
.pc-product-actions { display: grid; gap: 9px; margin-top: auto; padding-top: 20px; }
.pc-product-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid #dce3e5; border-radius: 14px; color: #253b40; background: #fff; font: 650 12px/1.4 Inter, sans-serif; text-align: center; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pc-catalog .pc-product-button { font: 650 12px/1.4 Inter, sans-serif; }
.pc-product-button--add { border-color: #b3c0c4; box-shadow: 0 2px 5px #20383d08, inset 0 1px 0 #fff; }
.pc-product-button--details { color: #50646b; font-weight: 550; }
.pc-catalog .pc-product-button--details { font-weight: 550; }
.pc-product-button:hover { border-color: #8b9da3; background: #fff; transform: translateY(-1px); box-shadow: 0 5px 14px #20383d10; }
.pc-product-button:active { background: #fff; transform: translateY(0); box-shadow: 0 1px 3px #20383d0c; }
.pc-product-button:focus-visible { outline: 2px solid #536b73; outline-offset: 3px; }
.pc-catalog .pc-product-button:focus-visible, .pc-details-dialog .pc-product-button:focus-visible { outline: 2px solid #536b73; outline-offset: 3px; }
.pc-product-button svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.pc-product-button--details svg { order: 2; }
.pc-product-button--details:hover svg { transform: translateX(3px); }
.pc-feedback { padding: 14px 18px; border: 1px solid #edc9bf; border-radius: 14px; color: #9c3423; background: #fff4ef; font-size: 13px; line-height: 1.5; }
.pc-details-dialog { width: min(780px, calc(100% - 40px)); max-width: none; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); padding: 0; overflow: hidden; border: 1px solid #dfe9e8; border-radius: 28px; color: #20383d; background: #fff; box-shadow: 0 25px 90px #20383d33; font-family: Inter, sans-serif; }
.pc-details-dialog[open] { display: flex; flex-direction: column; }
.pc-details-dialog::backdrop { background: #20383d80; }
.pc-details-dialog *, .pc-details-dialog *::before, .pc-details-dialog *::after { box-sizing: border-box; }
.pc-details-dialog [hidden] { display: none !important; }
.pc-details-dialog :is(button, a):focus-visible { outline: 3px solid #18a4b3; outline-offset: 3px; }
.pc-details-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 28px; border-bottom: 1px solid #e5efed; }
.pc-details-head h2 { margin: 0; font-size: 25px; font-weight: 750; letter-spacing: -.03em; }
.pc-details-head .pc-product-sku { margin-bottom: 5px; }
.pc-details-close { display: grid; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid #dbe6e5; border-radius: 50%; color: #637d81; background: #f5faf8; font: 400 25px/1 Inter, sans-serif; cursor: pointer; }
.pc-details-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 24px; padding: 24px 28px; overflow-y: auto; overscroll-behavior: contain; }
.pc-details-body > img { display: block; width: 100%; height: auto; max-height: 330px; padding: 14px; object-fit: contain; border-radius: 18px; background: #f5f8f8; }
.pc-details-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 22px; padding: 19px 28px; border-top: 1px solid #e5efed; background: #f8fbfa; }
.pc-details-footer .pc-product-button { width: auto; min-width: 220px; }
.pc-details-price { display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.pc-details-price > span { color: #637d81; font-size: 10px; line-height: 1.5; }
.pc-details-price > strong { font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.pc-details-price > small { color: #637d81; font-size: 11px; }
.pc-details-error { margin: 0; padding: 8px 28px; color: #9c3423; font-size: 12px; }
.pc-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 65px 20px; text-align: center; color: #647e83; font-size: 14px; line-height: 1.6; }
.pc-state p { max-width: 520px; margin: 0; }
.pc-state strong { color: #20383d; font-size: 22px; }
.pc-state button, .pc-more { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; padding: 12px 26px; border: 1px solid #7bbdbb; border-radius: 99px; background: #fff; color: #086b78; font-size: 13px; font-weight: 700; }
.pc-more { margin: 28px auto 0; }
.pc-more:hover, .pc-state button:hover { background: #edf8f4; }
.pc-more span { font-size: 19px; }
.pc-notice { max-width: 720px; margin: 30px auto; padding: 20px; border: 1px solid #dbe6e5; border-radius: 18px; font-size: 14px; line-height: 1.6; text-align: center; }
.pc-notice a { color: #086b78; text-decoration: underline; }
.pc-loader { width: 26px; height: 26px; border: 3px solid #dbe6e5; border-top-color: #086b78; border-radius: 50%; animation: pc-spin 1s linear infinite; }
@keyframes pc-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .pc-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 800px) {
    .pc-catalog { width: calc(100% - 32px); padding-top: 114px; }
    .pc-controls { position: relative; top: auto; padding: 22px 18px 16px; border-radius: 24px; }
    .pc-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-filter-panel { position: fixed; top: auto; right: 16px; bottom: 18px; left: 16px !important; width: auto; max-width: none; box-shadow: 0 0 0 100vmax #20383d45, 0 12px 40px #20383d33; }
    .pc-filter-options { max-height: min(360px, 52vh); }
    .pc-option { min-height: 44px; }
    .pc-option-text { font-size: 14px; }
    .pc-filter > summary { min-height: 38px; }
}
@media (max-width: 520px) {
    .pc-catalog { width: calc(100% - 24px); padding-top: 106px; padding-bottom: 44px; }
    .pc-controls { padding: 19px 13px 14px; border-radius: 22px; }
    .pc-controls h1 { font-size: 23px; }
    .pc-search input { font-size: 16px; }
    .pc-filters { gap: 6px; }
    .pc-filter > summary { padding: 7px 10px; font-size: 10px; gap: 5px; }
    .pc-filter > summary svg { width: 13px; height: 13px; }
    .pc-toolbar { gap: 10px; }
    .pc-count, .pc-sort { font-size: 10px; }
    .pc-sort { gap: 5px; }
    .pc-sort select { max-width: 134px; font-size: 10px; padding: 4px 16px 4px 8px; }
    .pc-products { gap: 11px; margin-top: 14px; }
    .pc-product { padding: 7px 7px 13px; border-radius: 20px; }
    .pc-product-image { border-radius: 14px; }
    .pc-product-meta { padding: 14px 2px 0; }
    .pc-product-sku { font-size: 8px; }
    .pc-product h2 { font-size: 15px; }
    .pc-price { right: 5px; bottom: 6px; padding: 8px 9px; border-radius: 13px; }
    .pc-price-net { gap: 3px; }
    .pc-price-net strong { font-size: 13px; }
    .pc-price-net small, .pc-price-gross { font-size: 8px; }
    .pc-attributes { gap: 5px; }
    .pc-attribute { padding: 8px 6px; min-height: 67px; border-radius: 10px; }
    .pc-attribute dt { font-size: 6px; letter-spacing: .045em; }
    .pc-attribute dd { font-size: 10px; }
    .pc-product-actions { padding-top: 14px; gap: 7px; }
    .pc-product-button { gap: 6px; padding: 10px 6px; border-radius: 12px; font-size: 10px; }
    .pc-catalog .pc-product-button { font-size: 10px; }
    .pc-product-button svg { flex-basis: 15px; width: 15px; height: 15px; }
    .pc-details-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 23px; }
    .pc-details-head { padding: 18px; }
    .pc-details-head h2 { font-size: 22px; }
    .pc-details-body { grid-template-columns: 1fr; gap: 15px; padding: 16px 18px; }
    .pc-details-body > img { max-height: 170px; }
    .pc-details-footer { flex-direction: column; align-items: stretch; gap: 13px; padding: 16px 18px; }
    .pc-details-footer .pc-product-button { width: 100%; min-width: 0; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pc-loader { animation: none; } .pc-product-button, .pc-product-button svg { transition: none; } .pc-product-button:hover, .pc-product-button--details:hover svg { transform: none; } }