/* Proobigriv additions on top of the Cartzilla theme */

/* The template ships Inter with Latin glyphs only — add the Cyrillic subsets. */
@font-face {
  font-display: swap;
  font-family: Inter;
  font-style: normal;
  font-weight: 300 800;
  src: url(../fonts/inter-variable-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-display: swap;
  font-family: Inter;
  font-style: normal;
  font-weight: 300 800;
  src: url(../fonts/inter-variable-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

.navbar-brand { font-weight: 800; letter-spacing: -.02em; }

/* Primary buttons: a deeper coral than the theme's #f55266 so white text
   reaches WCAG AA (base 4.57:1, hover 5.51:1, pressed 6.38:1).
   Same selectors as the theme; the wordmark and accents keep #f55266. */
.btn-primary,
.product-card .count-input:not(.collapsed) .product-card-button,
.product-card:hover .product-card-button,
[data-bs-theme=dark] .product-card:hover .product-card-button {
  --cz-btn-bg: #d8384f;
  --cz-btn-border-color: #d8384f;
  --cz-btn-hover-bg: #c42d45;
  --cz-btn-hover-border-color: #c42d45;
  --cz-btn-active-bg: #b3283e;
  --cz-btn-active-border-color: #b3283e;
  --cz-btn-disabled-bg: #d8384f;
  --cz-btn-disabled-border-color: #d8384f;
  --cz-btn-focus-shadow-rgb: 216, 56, 79;
}

.object-fit-contain { object-fit: contain; }
.product-card .ratio img { object-fit: contain; }
.product-card-out .ratio img { opacity: .55; }
/* "Комплект" (promotion bundle) badge: button coral for AA contrast with white text. */
.badge-bundle { background: #d8384f; color: #fff; }
/* Rows that scroll sideways on small screens instead of widening the page
   (product tabs, sub-category chips). */
.scroll-row { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.scroll-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .scroll-row.flex-md-wrap { overflow-x: visible; } }

/* Range slider labels stay inside the filter card: the lower one grows to the
   right of its handle, the upper one to the left. */
.range-slider-ui .noUi-handle-lower .noUi-tooltip { left: 0; transform: none; }
.range-slider-ui .noUi-handle-upper .noUi-tooltip { left: auto; right: 0; transform: none; }
/* Category tiles: product photos have white backgrounds; multiply them into
   the grey tile so the white box disappears (light theme only). */
.blend-photo { mix-blend-mode: multiply; }
[data-bs-theme=dark] .blend-photo { mix-blend-mode: normal; }
.brand-logo { max-width: 140px; object-fit: contain; }
[data-bs-theme=dark] .brand-logo { filter: grayscale(1) invert(1) brightness(1.4); }

/* Home hero: titles wrap (soft hyphens in long words) instead of overflowing,
   and each text slide clips its own content so it never shows over a neighbour. */
.hero-title { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); font-weight: 700; line-height: 1.15; overflow-wrap: break-word; hyphens: manual; }
.hero-text .swiper-slide { overflow: hidden; }

/* Hero photo sits on the gradient (openspec/changes/home-page-no-empty-areas).
   The slider's transforms isolate the photo from the gradient behind it, so the
   box repeats the gradient's colours at its position and the photo's white
   background is multiplied into them. Sized so the banner (386 px) ends level
   with the 8-entry category menu next to it. */
.hero-photo { width: 100%; max-width: 386px; aspect-ratio: 1; margin-left: auto; display: flex; align-items: center; justify-content: center;
              overflow: hidden; border-radius: 0 var(--cz-border-radius-xxl) var(--cz-border-radius-xxl) 0;
              background: linear-gradient(90deg, #cfe1f7 0%, #e7f0fd 100%); }
.hero-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (min-width: 1200px) { .hero-text .swiper-slide { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } }
@media (max-width: 1199.98px) {
  .hero-photo { max-width: 280px; margin: 0 auto 1.5rem; border-radius: var(--cz-border-radius-xl); background: linear-gradient(90deg, #b5d0f0 0%, #deeafb 100%); }
}
/* Dark theme: a white card only as large as the photo. */
[data-bs-theme=dark] .hero-photo { background: none; }
[data-bs-theme=dark] .hero-photo img { mix-blend-mode: normal; width: auto; height: auto; max-width: 72%; max-height: 72%; background: #fff; border-radius: var(--cz-border-radius-xl); padding: 1rem; }

/* Product size selector: the selected size is a light coral chip with dark text
   (small white text on coral would fail WCAG AA, see docs/design-system.md). */
.size-chip.is-selected { background: var(--cz-primary-bg-subtle); border-color: #d8384f; color: var(--cz-emphasis-color); }
[data-bs-theme=dark] .size-chip.is-selected { background: rgba(245, 82, 102, .18); color: #fff; }

/* Search suggestions under the header search box */
.search-suggest { max-height: 70vh; overflow-y: auto; margin-top: .5rem !important; left: 0; right: 3rem; width: auto !important; }
.search-suggest.show { display: block; }

/* Rating input in the review modal: hovering/checking a star highlights it and all before it (row-reverse). */
.star-rating-input label { cursor: pointer; color: var(--cz-border-color); transition: color .15s; }
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label { color: var(--cz-warning); }

/* Imported rich content (product descriptions, pages, posts) */
.product-description img, .page-content img, .post-content img { max-width: 100%; height: auto; border-radius: var(--cz-border-radius); }
.product-description table, .page-content table, .post-content table { width: 100%; margin-bottom: 1rem; font-size: .875rem; }
.product-description td, .product-description th, .page-content td, .page-content th { border: 1px solid var(--cz-border-color); padding: .5rem .75rem; }
.product-description h2, .product-description h3, .product-description h4 { font-size: 1rem; margin-top: 1.5rem; }
.product-description.is-collapsed { max-height: 600px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.category-description h2, .category-description h3 { font-size: 1.1rem; }

.toast-container .toast { min-width: 280px; }

/* Keep the fixed mobile filter / account buttons from covering the footer */
@media (max-width: 991.98px) {
  body:has(#filterSidebar), body:has(#accountSidebar) { padding-bottom: 4.5rem; }
}

/* Calculator: floor cross-section (calculator/_layers.php) and coverage bar. */
.calc-layers svg { max-height: 220px; }
.calc-layers .cl-tile { fill: #e0e5eb; } .calc-layers .cl-joint { fill: #fff; }
.calc-layers .cl-adhesive { fill: #cfd5dd; } .calc-layers .cl-primer { fill: #b9c1cc; }
.calc-layers .cl-base { fill: #9aa3af; } .calc-layers .cl-wood { fill: #d9bf9a; }
.calc-layers .cl-pet { fill: #eef1f6; } .calc-layers .cl-film { fill: #3b4350; }
.calc-layers .cl-reflect { fill: #c9ced6; } .calc-layers .cl-screed { fill: #c3cad3; }
.calc-layers .cl-insulation { fill: #f2e6b8; }
.calc-layers .cl-heat { stroke: var(--cz-primary); } .calc-layers .cl-heat-fill { fill: var(--cz-primary); }
.calc-layers .cl-badge { fill: var(--cz-dark); } .calc-layers .cl-badge-text { fill: #fff; font: 600 9px Inter, sans-serif; }
.calc-layer-list li { padding: .15rem 0; }
.calc-step-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-primary-bg-subtle); color: #d8384f; font-size: 1.1rem; }
.calc-coverage { max-width: 320px; } .calc-coverage-bar { background: var(--cz-primary); }
[data-bs-theme=dark] .calc-layers .cl-tile { fill: #4a5464; } [data-bs-theme=dark] .calc-layers .cl-joint { fill: #222934; }
[data-bs-theme=dark] .calc-layers .cl-adhesive { fill: #3d4654; } [data-bs-theme=dark] .calc-layers .cl-primer { fill: #333d4c; }
[data-bs-theme=dark] .calc-layers .cl-base { fill: #2a323e; } [data-bs-theme=dark] .calc-layers .cl-pet { fill: #5a6372; }
[data-bs-theme=dark] .calc-layers .cl-screed { fill: #3d4654; } [data-bs-theme=dark] .calc-layers .cl-badge { fill: #eef1f6; }
[data-bs-theme=dark] .calc-layers .cl-badge-text { fill: #181d25; } [data-bs-theme=dark] .calc-step-icon { background: rgba(245, 82, 102, .15); color: #f997a3; }

/* Calculator idle state: how-to steps with a small picture each (calculator/_steps.php). */
.calc-howto-step { display: grid; grid-template-columns: 112px 1fr; gap: .875rem; align-items: center; }
@media (max-width: 575.98px) { .calc-howto-step { grid-template-columns: 96px 1fr; } }
.calc-howto-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--cz-heading-color); margin-bottom: .25rem; }
.calc-step-pic.calc-howto-pic { height: 60px; }
.calc-howto-step p { line-height: 1.4; }
.calc-step-svg.calc-step-svg-sm { width: 28px; height: 28px; }
@media (max-width: 575.98px) { .calc-step-svg-sm { width: 26px; height: 26px; } .calc-howto-pic .btn { font-size: .65rem; padding: .25rem .4rem; } }
.calc-area-grid.calc-area-grid-sm { grid-template-columns: repeat(10, 7px); gap: 2px; }
.calc-area-grid.calc-area-grid-sm span { width: 7px; height: 7px; }
.calc-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--cz-dark); color: #fff; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.calc-step-pic { height: 110px; display: flex; align-items: center; justify-content: center; background: var(--cz-tertiary-bg); border-radius: var(--cz-border-radius-lg); }
.calc-step-pic .calc-layers, .calc-step-pic .calc-layers .row { width: 100%; }
.calc-step-pic .calc-layers svg { max-height: 40px; }
.calc-step-svg { width: 76px; height: 76px; fill: none; stroke: var(--cz-heading-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calc-step-svg circle[r="2.5"] { fill: var(--cz-primary); stroke: none; }
.calc-step-text { font: 700 10px Inter, sans-serif; fill: var(--cz-primary); stroke: none; }
.calc-area-grid { display: grid; grid-template-columns: repeat(10, 12px); gap: 3px; }
.calc-area-grid span { width: 12px; height: 12px; border-radius: 2px; background: var(--cz-border-color); transition: background .15s; }
.calc-area-grid span.on { background: var(--cz-primary); }
[data-bs-theme=dark] .calc-step-num { background: #eef1f6; color: #181d25; }

/* Information pages (pages/structured.php): icon circles and the numbered steps strip. */
.info-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-primary-bg-subtle); color: #d8384f; font-size: 1.2rem; }
[data-bs-theme=dark] .info-icon { background: rgba(245, 82, 102, .15); color: #f997a3; }
.info-steps { flex-direction: row; gap: 0; } /* the theme makes lists a gapped column, which breaks the row columns */
.info-step { position: relative; padding-left: 3.25rem; }
.info-step-num { position: absolute; left: calc(var(--bs-gutter-x, 1.5rem) * .5); top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--cz-dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
[data-bs-theme=dark] .info-step-num { background: #eef1f6; color: #181d25; }
@media (min-width: 768px) {
  .info-step { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-top: 3.25rem; }
  .info-step::after { content: ""; position: absolute; top: 19px; left: calc(var(--bs-gutter-x, 1.5rem) * .5 + 46px); right: 8px; height: 2px; background: var(--cz-border-color); }
  .info-step:last-child::after { display: none; }
}

/* Blog posts (blog/show.php): a reading column with styled imported HTML. */
.post-content { max-width: 720px; font-size: 1.0625rem; line-height: 1.75; color: var(--cz-body-color); }
.post-content p, .post-content ul, .post-content ol { margin-bottom: 1.25rem; }
.post-content h2, .post-content h3, .post-content h4 { color: var(--cz-heading-color); line-height: 1.3; margin: 2.5rem 0 1rem; scroll-margin-top: 1.5rem; }
.post-content h2 { font-size: 1.625rem; } .post-content h3 { font-size: 1.375rem; } .post-content h4 { font-size: 1.25rem; }
.post-content li { margin-bottom: .4rem; }
.post-content img { display: block; margin: 1.5rem auto; border-radius: var(--cz-border-radius-xl); }
.post-content table { border-collapse: collapse; margin: 1.5rem 0; }
.post-content th, .post-content td { padding: .6rem .9rem; border-bottom: 1px solid var(--cz-border-color); text-align: left; vertical-align: top; }
.post-content tr:nth-child(even) td { background: var(--cz-tertiary-bg); }
.post-content blockquote { margin: 1.75rem 0; padding: 1rem 1.25rem; background: var(--cz-tertiary-bg); border-left: 3px solid var(--cz-primary); border-radius: 0 var(--cz-border-radius-xl) var(--cz-border-radius-xl) 0; font-style: italic; }
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content .post-products { max-width: none; font-size: 1rem; line-height: 1.5; }
.post-content .post-products img { margin: 0; border-radius: 0; display: inline; }
.post-toc ol { padding-left: 1.1rem; } .post-toc li { margin-bottom: .35rem; }
.post-toc-link { display: block; padding: .35rem 0 .35rem .85rem; border-left: 2px solid var(--cz-border-color); color: var(--cz-body-color); font-size: .875rem; text-decoration: none; }
.post-toc-link:hover { border-color: var(--cz-primary); color: var(--cz-heading-color); }

/* Category page: sub-category slider with photos (catalog/category.php). */
.subcat-card { flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .5rem .5rem .75rem; border: 1px solid var(--cz-border-color); border-radius: var(--cz-border-radius-xl); color: var(--cz-heading-color); text-decoration: none; transition: border-color .15s; }
.subcat-card:hover { border-color: var(--cz-emphasis-color); }
.subcat-card.is-active { border-color: var(--cz-emphasis-color); box-shadow: inset 0 0 0 1px var(--cz-emphasis-color); }
.subcat-card-img { width: 100%; aspect-ratio: 1; border-radius: var(--cz-border-radius-lg); background: var(--cz-tertiary-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.subcat-card-img img { width: 82%; height: 82%; object-fit: contain; }
.subcat-card-name { font-size: .8125rem; font-weight: 500; line-height: 1.25; }
.subcat-card-count { font-size: .75rem; color: var(--cz-secondary-color); }

/* Tester feedback button (test app only): bottom-right, above fixed bottom bars on phones. */
.fb-button { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 1046; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
@media (max-width: 991.98px) { .fb-button { bottom: 5.5rem; } }
.fb-preview { min-height: 120px; display: flex; align-items: center; justify-content: center; }

/* Product page: the gallery stays in view while the buy column scrolls (below the fixed navbar). */
@media (min-width: 768px) { .product-gallery-sticky { position: sticky; top: 6.5rem; } }

/* Product page advantage tiles (rating, warranty, free delivery, payment). */
.adv-tile { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .75rem; border-radius: var(--cz-border-radius-lg); background: var(--cz-tertiary-bg); color: var(--cz-body-color); text-decoration: none; transition: background-color .15s; }
.adv-tile:hover { background: var(--cz-secondary-bg); }
.adv-tile-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cz-body-bg); color: #d8384f; font-size: 1.15rem; }
.adv-tile-icon .ci-star-filled { color: var(--cz-warning); }
.adv-tile-title { display: block; font-size: .875rem; font-weight: 600; color: var(--cz-heading-color); line-height: 1.3; }
.adv-tile-text { display: block; font-size: .75rem; color: var(--cz-secondary-color); line-height: 1.3; }
[data-bs-theme=dark] .adv-tile-icon { color: #f997a3; }