.cctv-shop { background: #faf9f7; padding: 0 0 70px; }
.cctv-shop svg { width: 24px; height: 24px; flex-shrink: 0; }
.cctv-shop .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cctv-pagebar { position: sticky; top: var(--cctv-header-height, 0px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; padding: 8px 0; background: #faf9f7; }
.cctv-pagebar .breadcrumbs { min-width: 0; margin: 0; }
.cctv-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.cctv-categories button { border: 1px solid #e5dfd9; border-radius: 10px; background: white; min-height: 44px; max-width: 100%; padding: 8px 14px; text-align: left; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cctv-categories button svg { width: 18px; height: 18px; color: var(--link); }
.cctv-categories span { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.cctv-categories small { flex-shrink: 0; padding: 2px 7px; border-radius: 6px; background: #f3f1ee; color: var(--muted); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cctv-categories button:hover { border-color: var(--action); background: #fff7ee; }
.cctv-categories button[aria-pressed="true"] { color: white; background: var(--action); border-color: var(--action); }
.cctv-categories button[aria-pressed="true"] :is(small,svg) { color: white; }
.cctv-categories button[aria-pressed="true"] small { background: rgb(255 255 255 / 20%); }
.cctv-catalogue { margin-top: 24px; }
.cctv-shop :is(input:not([type="checkbox"]),select,textarea) { width: 100%; background: white; border: 1px solid #dcd8d3; border-radius: 10px; padding: 12px 14px; min-height: 46px; color: var(--ink); font-size: 14px; }
.cctv-search { position: relative; flex: 1 1 300px; min-width: 0; max-width: 480px; }
.cctv-search svg { position: absolute; width: 18px; height: 18px; top: 50%; left: 14px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cctv-shop .cctv-search input { height: 44px; min-height: 44px; padding: 8px 14px 8px 40px; border-radius: 12px; }
.cctv-shop input::placeholder,.cctv-shop textarea::placeholder { color: #74716e; }
.cctv-cart-button { flex-shrink: 0; min-width: 175px; gap: 10px; margin-left: auto; }
.cctv-cart-button span { min-width: 26px; border-radius: 20px; padding: 2px 6px; background: white; color: var(--link); font-size: 13px; }
.cctv-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 24px; align-items: start; }
.cctv-filter { --cctv-filter-top: calc(var(--cctv-header-height, 0px) + var(--cctv-pagebar-height, 72px) + 12px); position: sticky; top: var(--cctv-filter-top); align-self: start; max-height: calc(100vh - var(--cctv-filter-top) - 16px); max-height: calc(100dvh - var(--cctv-filter-top) - 16px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9cec2 transparent; scrollbar-gutter: stable; padding: 18px; border: 1px solid #e8e3de; border-radius: 18px; background: white; min-width: 0; }
.cctv-filter:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.cctv-filter summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.cctv-filter__body { display: block; padding-top: 12px; }
.cctv-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.cctv-quick button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px dashed #cec7bf; border-radius: 10px; background: white; color: var(--ink); font-size: 12px; cursor: pointer; }
.cctv-quick svg { width: 16px; height: 16px; color: #8a8076; }
.cctv-quick button:hover { border-color: var(--action); background: #fff7ee; }
.cctv-quick button[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: white; }
.cctv-quick button[aria-pressed="true"] svg { color: white; }
.cctv-facet { border-bottom: 1px solid #f0ece7; }
.cctv-filter .cctv-facet > summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 2px; font-size: 13px; font-weight: 500; list-style: none; }
.cctv-facet > summary::-webkit-details-marker { display: none; }
.cctv-facet > summary > small { font-size: 11px; color: #81766b; }
.cctv-facet__chevron { margin-left: auto; flex: 0 0 7px; width: 7px; height: 7px; border-right: 1px solid #9b9086; border-bottom: 1px solid #9b9086; transform: rotate(45deg); position: relative; top: -2px; }
.cctv-facet[open] .cctv-facet__chevron { transform: rotate(225deg); top: 2px; }
.cctv-facet__options { padding: 4px 2px 14px; }
.cctv-facet__values { max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9cec2 transparent; padding: 2px 5px 2px 2px; }
.cctv-facet-option { gap: 9px; padding: 7px 0; min-height: 36px; align-items: flex-start; font-size: 12px; line-height: 1.5; }
.cctv-facet-option > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cctv-facet-option small { color: #8a8177; font-size: 11px; padding-top: 1px; }
.cctv-facet-option input { width: 16px; height: 16px; }
.cctv-facet-option:has(input:disabled) { color: #8d8882; cursor: not-allowed; }
.cctv-facet-option:has(input:checked) > span { color: var(--link); font-weight: 600; }
.cctv-facet-search { margin-bottom: 8px; }
.cctv-shop .cctv-facet-search input { min-height: 38px; padding: 8px 10px; font-size: 12px; }
.cctv-facet [data-price-hint] { display: block; margin-top: 10px; font-size: 11px; }
.cctv-selected-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cctv-selected-filters:empty { display: none; }
.cctv-selected-filters button { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #efcba7; background: #fff3e6; border-radius: 8px; color: var(--link); padding: 7px 10px; min-height: 36px; font-size: 12px; max-width: 100%; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.cctv-selected-filters button > span { font-size: 18px; line-height: 1; }
.cctv-results { min-width: 0; }
.cctv-filter [data-active-filter-count]:not(:empty) { background: var(--action); color: white; border-radius: 12px; padding: 1px 7px; font-size: 12px; margin-left: 5px; }
.cctv-filter label:not(.cctv-check) { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.cctv-filter fieldset { border: 0; padding: 0; min-width: 0; margin: 0; }
.cctv-filter legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.cctv-price-range { display: flex; gap: 8px; }
.cctv-price-range input { min-width: 0; padding: 10px !important; }
.cctv-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.cctv-check input,.cctv-cart input[type="checkbox"] { flex-shrink: 0; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--action); }
.cctv-reset { border: 0; background: transparent; min-height: 44px; padding: 5px 0; text-align: left; cursor: pointer; color: var(--link); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.cctv-help { padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.cctv-help p { margin: 10px 0 18px; color: var(--muted); }
.cctv-help .button { font-size: 12px; padding: 10px; width: 100%; }
.cctv-results__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 16px; margin-bottom: 20px; }
.cctv-results__heading h2 { flex-shrink: 0; font: 600 17px var(--font-body); margin: 0; }
.cctv-sort { position: relative; width: 280px; max-width: 100%; }
.cctv-sort:has([aria-expanded="true"]) { z-index: 25; }
.cctv-sort__trigger { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 16px; border: 1px solid #e5dfd9; border-radius: 14px; color: var(--ink); background: #fff; cursor: pointer; text-align: left; font-family: var(--font-body); }
.cctv-sort__trigger > svg { width: 20px; height: 20px; color: var(--link); }
.cctv-sort__caption { display: grid; gap: 2px; min-width: 0; }
.cctv-sort__caption > span { color: var(--muted); font-size: 12px; line-height: 1.25; }
.cctv-sort__caption strong { font-size: 14px; font-weight: 600; line-height: 1.4; }
.cctv-sort__trigger:hover, .cctv-sort__trigger[aria-expanded="true"] { border-color: var(--orange); background: #fffaf4; }
.cctv-sort__chevron { width: 8px; height: 8px; margin-left: auto; flex-shrink: 0; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.cctv-sort__trigger[aria-expanded="true"] .cctv-sort__chevron { transform: translateY(2px) rotate(225deg); border-color: var(--link); }
.cctv-sort__options { position: absolute; z-index: 1; top: calc(100% + 8px); left: 0; width: 100%; max-height: min(280px, 60dvh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid #e5dfd9; border-radius: 16px; background: #fff; box-shadow: 0 12px 32px #4b32151f; scrollbar-width: thin; scrollbar-color: #dfc9b1 transparent; }
.cctv-sort--upward .cctv-sort__options { top: auto; bottom: calc(100% + 8px); }
.cctv-sort__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; border: 0; border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink-soft); text-align: left; font: 400 14px/1.4 var(--font-body); cursor: pointer; }
.cctv-sort__option + .cctv-sort__option { margin-top: 2px; }
.cctv-sort__option > svg { width: 18px; height: 18px; visibility: hidden; color: var(--link); }
.cctv-sort__option:hover, .cctv-sort__option:focus-visible { color: var(--link); background: #fff6ed; }
.cctv-sort__option[aria-selected="true"] { background: #fff0e0; color: var(--link); font-weight: 600; }
.cctv-sort__option[aria-selected="true"] > svg { visibility: visible; }
.cctv-shop .cctv-sort__option:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.cctv-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.cctv-grid[aria-busy="true"] { cursor: progress; }
.cctv-product { display: flex; flex-direction: column; min-width: 0; background: white; border: 1px solid #e5dfd9; border-radius: 18px; overflow: hidden; }
.cctv-product:hover { border-color: #edb681; }
/* Fixed tracks prevent the image's intrinsic size from overflowing into the copy. */
.cctv-product__photo { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); place-items: center; flex-shrink: 0; min-height: 0; overflow: hidden; background: white; border: 0; width: 100%; padding: 20px; height: 196px; cursor: pointer; }
.cctv-product__photo img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 260px; max-height: 100%; object-fit: contain; }
.cctv-photo-fallback { color: var(--muted); display: grid; justify-items: center; gap: 12px; }
.cctv-photo-fallback svg { width: 64px; height: 64px; }
.cctv-image-missing::after { content: 'Фото уточняется'; font-size: 13px; color: var(--muted); }
.cctv-product__body { display: flex; flex-direction: column; padding: 0 20px 20px; flex: 1; }
.cctv-product__brand { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; color: var(--link); }
.cctv-product__brand span { color: var(--muted); font-weight: 400; overflow-wrap: anywhere; text-align: right; }
.cctv-product h3 { margin: 10px 0 12px; font: 600 16px/1.4 var(--font-body); overflow-wrap: anywhere; }
.cctv-product h3 button { all: unset; cursor: pointer; }
.cctv-product h3 button:hover { color: var(--link); }
.cctv-stock { color: #746759; font-size: 12px; margin-bottom: 14px; }
.cctv-stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: #a4998c; margin-right: 6px; vertical-align: middle; }
.cctv-stock--yes { color: #22764e; }
.cctv-stock--yes::before { background: #22764e; }
.cctv-product__specs { display: grid; gap: 5px; margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.cctv-product__specs div { display: flex; justify-content: space-between; gap: 12px; }
.cctv-product__specs dd { text-align: right; margin: 0; color: var(--ink-soft); }
.cctv-product__bottom { margin-top: auto; display: grid; gap: 14px; }
.cctv-product__bottom strong { font-size: 24px; letter-spacing: -.025em; }
.cctv-product__bottom .button { min-height: 44px; width: 100%; font-size: 14px; padding: 10px 16px; }
.cctv-pagination { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 32px 0 8px; }
.cctv-pagination span { color: var(--muted); font-size: 13px; text-align: center; }
.cctv-pagination .button { padding: 10px 20px; font-size: 14px; }
.cctv-empty { grid-column: 1/-1; text-align: center; padding: 60px 24px; border-radius: 18px; background: white; width: 100%; }
.cctv-empty svg { width: 60px; height: 60px; color: var(--orange); }
.cctv-catalogue-note { color: var(--muted); font-size: 12px; border-top: 1px solid #e5dfd9; margin: 32px 0 0; padding: 20px 0 0; }
.cctv-announcement { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 12px 20px; border-radius: 12px; background: var(--ink); color: white; font-size: 13px; z-index: 45; pointer-events: none; width: max-content; max-width: min(600px,90vw); }
.cctv-announcement:empty { display: none; }
body.cctv-dialog-open { overflow: hidden; }
.cctv-dialog { color: var(--ink); background: white; border: 1px solid #e5dfd9; border-radius: 24px; padding: 32px; max-height: 90dvh; max-width: calc(100% - 32px); width: 850px; overscroll-behavior: contain; }
.cctv-dialog::backdrop { background: rgb(25 22 19 / 48%); }
.cctv-close { border: 1px solid #e5dfd9; background: white; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 28px; line-height: 1; display: grid; place-items: center; flex-shrink: 0; margin-left: auto; }
.cctv-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 20px 0 32px; align-items: center; }
.cctv-detail__photo img { width: 100%; height: 280px; object-fit: contain; }
.cctv-detail h2 { font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; }
.cctv-detail__price { display: block; font-size: 28px; margin-bottom: 18px; }
.cctv-detail__grid .cctv-reset { display: block; margin-top: 8px; }
.cctv-spec-table { font-size: 14px; }
.cctv-spec-table div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 12px; border-bottom: 1px solid var(--line); }
.cctv-spec-table div:nth-child(odd) { background: #faf9f7; }
.cctv-spec-table dt { color: var(--muted); }
.cctv-spec-table dd { margin: 0; overflow-wrap: anywhere; }
.cctv-muted { color: var(--muted); font-size: 13px; }
.cctv-cart { margin: 0 0 0 auto; width: 520px; max-height: 100dvh; height: 100dvh; border-radius: 24px 0 0 24px; max-width: 100%; padding: 28px; }
.cctv-cart__header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 8px; }
.cctv-cart__header h2 { margin: 8px 0 0; font-size: 28px; }
.cctv-cart-line { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cctv-cart-line__photo { align-self: start; padding: 4px; }
.cctv-cart-line__photo img { width: 80px; height: 80px; object-fit: contain; }
.cctv-cart-line h3 { font: 600 14px/1.4 var(--font-body); overflow-wrap: anywhere; margin: 0 0 8px; }
.cctv-cart-line p { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.cctv-quantity { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cctv-quantity button { min-width: 40px; min-height: 44px; border: 1px solid var(--line); background: white; border-radius: 10px; cursor: pointer; }
.cctv-quantity span { min-width: 25px; text-align: center; }
.cctv-quantity .cctv-remove { color: var(--link); font-size: 12px; border: 0; padding: 8px; margin-left: auto; }
.cctv-cart__total { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 24px 0; align-items: center; }
.cctv-cart__total strong { font-size: 26px; }
.cctv-cart__total small,.cctv-cart__total p { grid-column: 1/-1; color: var(--muted); }
.cctv-cart__total p { color: var(--red); }
.cctv-cart form { background: #faf9f7; padding: 24px; border-radius: 18px; }
.cctv-cart form > p { color: var(--muted); font-size: 13px; }
.cctv-cart .form-field { margin-bottom: 16px; }
.cctv-cart .form-field label { font-size: 13px; }
.cctv-cart form :is(.cctv-check,.checkbox-field) { margin: 18px 0; }
.cctv-cart .checkbox-field { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; }
.cctv-cart .checkbox-field a { color: var(--link); text-decoration: underline; }
.cctv-cart [type="submit"] { width: 100%; margin-top: 12px; }
.cctv-cart [data-cart-success] { padding: 40px 0; overflow-wrap: anywhere; }
.cctv-success-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange-soft); color: var(--link); font-size: 32px; margin-bottom: 24px; }
.cctv-shop button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.cctv-shop :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.cctv-shop [hidden] { display: none !important; }
@media (max-width: 1150px) {
  .cctv-layout { grid-template-columns: 250px minmax(0,1fr); gap: 20px; }
  .cctv-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cctv-results__heading h2 { flex-basis: 100%; }
  .cctv-search { flex-basis: 260px; max-width: none; }
}
@media (max-width: 760px) {
  .cctv-categories button { padding-inline: 10px; }
  .cctv-cart-button { min-width: 0; padding: 10px 14px; font-size: 14px; }
  .cctv-shop .cctv-search input { font-size: 16px; }
  .cctv-layout { grid-template-columns: 1fr; }
  .cctv-filter { position: static; max-height: none; overflow: visible; scrollbar-gutter: auto; padding: 16px; }
  .cctv-filter__body { padding-top: 8px; }
  .cctv-quick { gap: 6px; margin-bottom: 18px; }
  .cctv-quick button { min-height: 40px; padding: 7px 10px; }
  .cctv-filter .cctv-facet > summary { min-height: 48px; }
  .cctv-help { display: none; }
  .cctv-product__body { padding: 0 14px 16px; }
  .cctv-product__photo { height: 180px; padding: 16px; }
  .cctv-results__heading h2 { font-size: 14px; }
  .cctv-results__heading { gap: 10px 16px; }
  .cctv-detail__grid { grid-template-columns: 1fr; }
  .cctv-detail__photo img { height: 220px; }
  .cctv-dialog { padding: 22px; }
}
@media (max-height: 520px) {
  .cctv-filter { position: static; max-height: none; overflow: visible; scrollbar-gutter: auto; }
}
@media (max-width: 460px) {
  .cctv-sort { width: 100%; }
  .cctv-grid { grid-template-columns: 1fr; }
  .cctv-product__photo { height: 196px; }
  .cctv-product__body { padding: 0 20px 20px; }
  .cctv-cart { padding: 20px; border-radius: 0; }
  .cctv-cart form { padding: 18px; }
  .cctv-cart-line { grid-template-columns: 60px minmax(0,1fr); gap: 12px; }
  .cctv-pagination { gap: 8px; }
  .cctv-pagination .button { padding: 10px 14px; }
}