/* ==========================================================================
   Тема — пренесена от РЕАЛНИЯ активен стилшийт на стария сайт
   (catalog/view/theme/bleached-black/stylesheet/stylesheet.css), не от
   предположения — виж README "Дизайн" бележката. Bootstrap CSS custom
   properties override-нати глобално (5.3 ги излага точно за това), вместо
   да пипаме всеки .btn-primary/.form-control поотделно.
   ========================================================================== */
:root {
  --bs-body-font-family: "Raleway", sans-serif;
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.25;
  --bs-body-color: #5b5b5b;
  --bs-body-bg: #fff;
  --bs-link-color: #000;
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: #333;
  --bs-link-hover-color-rgb: 51, 51, 51;
  --bs-primary: #000;
  --bs-primary-rgb: 0, 0, 0;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #444;
  font-family: "Raleway", sans-serif;
}

h1 { font-size: 33px; }
h2 { font-size: 27px; }
h3 { font-size: 21px; }

.btn {
  border-radius: 0;
}

.btn-primary {
  --bs-btn-bg: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-bg: rgba(0, 0, 0, 0.5);
  --bs-btn-hover-border-color: rgba(0, 0, 0, 0.5);
  --bs-btn-active-bg: rgba(0, 0, 0, 0.5);
  --bs-btn-active-border-color: rgba(0, 0, 0, 0.5);
  /* Bootstrap компилира --bs-btn-disabled-bg статично (не го смята от
     --bs-primary по рънтайм) — трябва изрично override, иначе disabled
     бутон си остава брандово синьо въпреки другите override-и по-горе
     (намерено от Весел при реален тест, 2026-11-09). */
  --bs-btn-disabled-bg: #000;
  --bs-btn-disabled-border-color: #000;
}

/* Пренесено 1:1 от archive breadcrumb (пунктирана горна/долна линия, не
   плътен фон) — виж README "Дизайн". */
.breadcrumb {
  background: transparent;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  padding: 8px 0;
  font-size: 0.9rem;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: #333;
}

/* Хедър на два реда (виж base.html) — sticky-ва се като ЦЯЛО, без JS
   преоразмеряване/прегрупиране при скрол (нарочно — Весел видя точно този
   "скок" между два различни layout-а на референтния стар сайт и изрично
   поиска да го избегнем тук, 2026-11-09). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
}

.utility-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.4rem;
  font-size: 0.85rem;
}

.main-navbar {
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
}

.navbar-brand img {
  display: block;
  height: 40px;
  width: auto;
}

/* Дивайдъри между елементите, не пълни бутони — виж README "Дизайн"
   (сверено срещу реалния стар сайт: тънки вертикални разделители между
   категориите, не кутийки). */
.category-nav .nav-item {
  border-right: 1px solid #ddd;
}

.category-nav .nav-item:last-child {
  border-right: none;
}

.category-nav .nav-link {
  color: #333;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding-inline: 1rem;
}

.category-nav .nav-link:hover {
  color: #000;
}

/* Истинският "page-title" на стария сайт — uppercase, тънко тегло, линия
   продължаваща ВДЯСНО от текста (не центрирана кутийка — това е само за
   .home-section-title на началната страница, виж по-долу). */
.page-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  text-transform: uppercase;
  font-weight: 300;
  color: #444;
}

.page-title::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid #ddd;
}

/* Центриран вариант (заглавието на категория и продукт) — линия и от двете страни
   на текста, вместо само вдясно. */
.page-title-centered {
  text-align: center;
}

.page-title-centered::before {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid #ddd;
}

.image-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.main-image-wrap {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #eee;
  width: 500px;
  max-width: 100%;
}

/* Всички снимки на продукта остават в HTML-а (crawlable) — само
   "активната" се вижда, останалите скрити с CSS, не изтрити от DOM-а
   (PhotoSwipe навигацията ги ползва независимо, виж frontend/src/entries/product.js). */
.gallery-item {
  display: none;
}

.gallery-item.active {
  display: block;
}

.gallery-item img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Стандартна стрелка върху главната снимка — нито лупа, нито "ръчичката"
   на линка (снимката е <a> заради lightbox-а). */
.gallery-item,
.gallery-item img {
  cursor: default;
}

/* @zoom-image/core инжектира тая снимка при hover (виж
   frontend/src/entries/product.js) — pointer-events:none, за да може
   кликът да мине "през" нея до <a>-то отдолу и да отвори PhotoSwipe
   lightbox-а, вместо zoom overlay-я да го поглъща. */
.zoom-overlay-img {
  pointer-events: none;
}

/* PhotoSwipe lightbox — стандартна стрелка вместо лупа върху снимката.
   Докато снимката е увеличена, остава "ръката" за влачене на библиотеката. */
.pswp--click-to-zoom.pswp--zoom-allowed:not(.pswp--zoomed-in) .pswp__img {
  cursor: default;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.thumbnails .thumb {
  padding: 0;
  border: 1px solid #ddd;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.thumbnails .thumb img {
  display: block;
}

.thumbnails .thumb.active {
  border-color: #333;
}

@media (max-width: 575.98px) {
  .image-row {
    flex-direction: column;
  }

  .thumbnails {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.product-info-block {
  max-width: 24rem;
}

.price {
  font-family: "PT Sans Narrow", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #707070;
  margin-top: 0.5rem;
}

.points {
  color: #707070;
  font-size: 0.9rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card .image-wrap,
.product-card .info {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Снимката е широка колкото самата картичка (колоната), не колкото файла —
   така съвпада с всичко друго на цяла ширина в картичката, без да зависи
   от конкретен елемент (напр. бутона "Купи"). */
.product-card .image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.product-card .info {
  text-align: center;
}

.related-name {
  color: #333;
  margin-top: 0.5rem;
  font-size: 20px;
}

.related-price {
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 400;
  color: #707070;
  font-size: 17px;
}

.out-of-stock {
  color: #b00020;
  font-size: 0.85rem;
}

.list-group-item-child {
  padding-left: 2rem;
  font-size: 0.9rem;
}

.subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.subcategory-link {
  padding: 0.4rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  text-decoration: none;
  color: #212529;
}

.empty {
  color: #777;
}

.manufacturer-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.manufacturer-logo {
  object-fit: contain;
}

/* Пренесено 1:1 от archive/.../stylesheet.css (виж components/shop/AppFooter.vue
   в Nuxt проекта за референцията и бележките защо точно тия стойности). */
.shop-footer {
  background: #fff;
  border-top: 1px solid #d7d7d7;
  padding-block: 2.5rem;
  margin-top: 30px;
}

.footer-header {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.125rem;
  margin-bottom: 13px;
  color: #000;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.4rem;
}

.footer-links a {
  color: #505050;
  text-decoration: none;
  font-size: 1rem;
}

.footer-links a:hover {
  color: #000;
}

.footer-link-disabled {
  color: #767676;
  font-size: 1rem;
  cursor: default;
}

.payments-row {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d7d7d7;
}

.legal-line {
  font-size: 10px;
  color: #000;
}

/* Начална страница — слайдшоу/секции пренесени по дух от pages/index.vue
   в Nuxt проекта (пунктирана линия + боксиран текст над секциите, малко
   по-различно от .page-title на останалите страници). */
.home-slideshow {
  background: #f5f5f5;
}

.slide-link {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.slide-image {
  height: auto;
}

.slide-title {
  position: absolute;
  top: 2rem;
  left: 2rem;
  padding: 0.6rem 1.1rem;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 1.3rem;
}

.home-section {
  padding-block: 2rem;
}

.home-section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.75rem;
}

.home-section-title::before,
.home-section-title::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed #aaa;
}

.home-section-title span {
  padding: 10px 18px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  background: #fff;
  color: #000;
  font-size: 1.5rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Социални мрежи на началната страница — като #social_block в стария сайт:
   бяла кутийка с рамка, която "сяда" върху линията над футъра (футърът е с
   margin-top 30px, кутийката е висока 46px -> влиза с 23px под линията). */
.social-row {
  position: relative;
  z-index: 1;
  margin: 30px 0 -53px;
  text-align: center;
}

.social-box {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 10px 18px;
  list-style: none;
  background: #fff;
  border: 1px solid #d7d7d7;
}

.social-box li {
  display: flex;
}

.social-link {
  display: flex;
  color: #908f8f;
  transition: color 0.15s;
}

.social-link:hover,
.social-link:focus-visible {
  color: #000;
}

/* място под кутийката, преди колоните на футъра (само на началната) */
main:has(.social-row) + .shop-footer .footer-col {
  padding-top: 63px;
}

/* Категорийна страница — сбита мрежа: 7px между продуктите
   хоризонтално (вместо стандартните 24px на Bootstrap), 24px вертикално. */
.products-grid-tight {
  --bs-gutter-x: 7px;
  --bs-gutter-y: 24px;
}


/* ==========================================================================
   Визия 1:1 със стария PHP сайт (dev.dataspot.org) — стойностите са взети
   от реално изчислените стилове в браузъра на стария сайт, 2026-11-10.
   ========================================================================== */

/* --- Трохички (общи за всички страници) --- */
.breadcrumb {
  font-size: 1rem;
  line-height: 20px;
  margin-bottom: 20px;
  --bs-breadcrumb-divider: "";
}

.breadcrumb-item {
  position: relative;
  padding: 0 20px;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 20px;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: none;
}

/* Разделител: тънка сива "стрелка" (завъртян квадрат с две рамки). */
.breadcrumb-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  transform: rotate(-45deg);
}

.breadcrumb-item a {
  color: #333;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #000;
}

.breadcrumb-item.active {
  color: #5b5b5b;
}

.breadcrumb-home {
  display: block;
  margin-top: 2px;
}

/* Заглавие на страница (h1) — еднакво на всички страници в стария сайт. */
.page-title {
  margin: 0;
  padding: 30px 0;
  font-size: 27px;
  line-height: 29.7px;
  font-weight: 400;
  color: #3e3e3e;
}

.page-title::before,
.page-title::after {
  border-top-color: #aaa;
}

/* --- Продуктова страница --- */
.product-page .main-image-wrap {
  border: 0;
}

.product-page .product-info-block {
  max-width: none;
}

.product-page .product-attrs {
  margin-bottom: 10px;
}

.product-page .product-attrs a {
  color: #000;
  text-decoration: none;
}

.product-page .price {
  font-family: "Raleway", sans-serif;
  font-size: 27px;
  line-height: 29.7px;
  font-weight: 500;
  color: #444;
  margin: 20px 0 10px;
}

.product-page .points {
  font-size: 1rem;
  color: #5b5b5b;
  margin-bottom: 10px;
}

.product-page .add-to-cart .form-label {
  font-size: 12px;
  margin-bottom: 5px;
}

.product-page .add-to-cart .qty-input {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  color: #555;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  margin-bottom: 20px;
}

.product-page .add-to-cart .btn-product-primary {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 15px;
  line-height: 20px;
  border: 0;
}

/* Лентата "Описание" — две плътни тъмни линии, текст в PT Sans Narrow. */
.product-tabs-bar {
  margin: 20px 0 15px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  font-family: "PT Sans Narrow", sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
}

.product-tabs-bar span {
  display: inline-block;
  padding: 10px 15px;
}

.product-page .product-description {
  font-size: 19px;
}

.product-page .product-description p,
.product-page .product-description ul,
.product-page .product-description ol {
  margin-bottom: 10px;
}

.product-page .product-description ul,
.product-page .product-description ol {
  padding-left: 40px;
}

.product-page .related-title {
  font-size: 21px;
  line-height: 23.1px;
  font-weight: 500;
  color: #444;
  margin: 20px 0 10px;
}

/* --- Категорийна страница --- */

/* Ляво меню: две плътни тъмни линии отгоре/отдолу, пунктир между редовете,
   PT Sans Narrow. Сивото е #767676 вместо оригиналното #888 — най-близкото,
   което минава контраста (4.5:1). */
.category-page .list-group {
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  border-radius: 0;
  margin-bottom: 20px;
}

.category-page .list-group-item {
  font-family: "PT Sans Narrow", sans-serif;
  font-size: 17px;
  line-height: 20px;
  color: #767676;
  background: #fff;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px dashed #ddd;
  text-decoration: none;
}

.category-page .list-group-item:last-child {
  border-bottom: 0;
}

.category-page .list-group-item:hover,
.category-page .list-group-item.active {
  color: #000;
  background: #fff;
}

.category-page .list-group-item-child {
  padding-left: 22px;
  font-size: 17px;
}

.category-page .subcategories-title {
  font-size: 21px;
  line-height: 23.1px;
  font-weight: 500;
  color: #444;
  margin: 20px 0 10px;
}

.category-page .subcategories {
  gap: 20px 44px;
  padding: 21px 32px;
  margin-bottom: 0 !important;
}

.category-page .subcategory-link {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.57);
  border-radius: 0;
  color: #333;
}

.category-page .subcategory-link:hover {
  background: #000;
  color: #fff;
}

.category-page .category-banner {
  margin-bottom: 20px;
}

.category-page .category-description {
  text-align: justify;
}

.category-page .category-description h2 {
  font-size: 27px;
  line-height: 29.7px;
  font-weight: 500;
  color: #444;
  margin: 20px 0 10px;
  text-align: left;
}

.category-page .category-description p,
.category-page .category-description ul,
.category-page .category-description ol {
  margin-bottom: 10px;
}

.category-page .category-description ul,
.category-page .category-description ol {
  padding-left: 40px;
}

/* --- Продукт в мрежа (категория, начало, марка, свързани) --- */
.product-card {
  position: relative;
  /* за 100cqw по-долу: снимката е квадрат, широк колкото картичката */
  container-type: inline-size;
}

.product-card .info {
  padding: 10px;
}

.related-name {
  margin-top: 0;
  line-height: 22px;
}

/* "Купи" като в стария сайт: малък бутон, който се появява върху името
   при посочване с мишката (или при фокус с клавиатура). Само за устройства
   с истинска мишка — на телефон/таблет няма "посочване", там бутонът
   остава видим на цяла ширина, както беше. */
@media (hover: hover) and (pointer: fine) {
  .product-card [data-cart-widget="quick-add"] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    /* точно под снимката (квадрат = ширината на картичката), върху името */
    top: calc(100cqw + 4px);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .product-card:hover [data-cart-widget="quick-add"],
  .product-card:focus-within [data-cart-widget="quick-add"] {
    opacity: 1;
    pointer-events: auto;
  }

  .product-card [data-cart-widget="quick-add"] .quick-add-btn {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 7px 8px;
    font-size: 17px;
    line-height: 20px;
  }
}

/* --- Начална страница --- */

/* Слайдерът НЕ е копие на стария (без "надничащи" съседни слайдове, по
   желание на Весел), но е със същия размер на слайда (1092px широк) и
   същото заглавие: черна кутийка, PT Sans Narrow, центрирана горе. */
.home-slideshow {
  background: transparent;
}

.home-slideshow .carousel {
  max-width: 1092px;
  margin: 0 auto;
}

.slide-title {
  left: 50%;
  top: 83px;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  padding: 15px;
  font-family: "PT Sans Narrow", sans-serif;
  font-size: 39px;
  line-height: 1.3;
  color: #fff;
  background: #000;
  box-shadow: 11px 10px 9px rgba(0, 0, 0, 0.32);
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .slide-title {
    top: 12px;
    padding: 8px 10px;
    font-size: 22px;
  }
}

.home-section {
  padding-top: 25px;
  padding-bottom: 0;
}

.home-section-title {
  margin: 0 0 25px;
}

.home-section-title span {
  padding: 10px;
  font-size: 26px;
  line-height: 33px;
  font-weight: 400;
}

/* --- Хедър --- */

/* Подредба като в стария сайт: лого вляво на два реда, вдясно горе малките
   линкове, под тях менюто в кутийки, подравнено вдясно. Залепва горе като
   ЕДИН блок, без да се преоразмерява при скрол (по желание на Весел —
   старият сайт "скачаше" към по-малък хедър). */
.site-header {
  padding: 10px 0 20px;
  border-bottom: 1px solid #d7d7d7;
}

.header-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo util"
    "logo menu";
  align-items: start;
}

.site-logo {
  grid-area: logo;
  display: block;
  margin-top: 7px;
}

.site-logo img {
  display: block;
  width: 317px;
  max-width: 100%;
  height: auto;
}

.utility-bar {
  grid-area: util;
  height: 40px;
  padding: 0;
  gap: 14px;
  font-size: 12px;
}

.main-navbar {
  grid-area: menu;
  margin-top: 5px;
  padding: 0;
  border: 0;
  justify-content: flex-end;
}

.main-navbar .navbar-collapse {
  justify-content: flex-end;
}

.main-navbar .category-nav .nav-item {
  border-right: 0;
}

.main-navbar .category-nav .nav-link {
  margin-right: -1px;
  padding: 9px 10px;
  border: 1px solid #ccc;
  font-size: 1rem;
  line-height: 20px;
  color: #4d4e48;
  text-transform: uppercase;
}

.main-navbar .category-nav .nav-link:hover,
.main-navbar .category-nav .nav-link.show {
  background: #eee;
  color: #000;
}

.main-navbar .category-nav .dropdown-toggle::after {
  display: none;
}

@media (max-width: 991.98px) {
  .site-header {
    padding: 4px 0 10px;
  }

  .header-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .utility-bar {
    flex: 0 0 100%;
    height: 32px;
  }

  .site-logo {
    margin-top: 0;
  }

  .site-logo img {
    width: 172px;
  }

  /* менюто "изчезва" като кутия: бутонът отива вдясно от логото, а
     разгънатият списък заема целия ред отдолу */
  .main-navbar {
    display: contents;
  }

  .main-navbar .navbar-toggler {
    margin-left: auto;
  }

  .main-navbar .navbar-collapse {
    flex: 0 0 100%;
    margin-top: 10px;
  }

  .main-navbar .category-nav .nav-link {
    margin-right: 0;
    margin-bottom: -1px;
  }
}

/* --- Футър --- */
.shop-footer {
  padding: 0;
}

.footer-col {
  padding-top: 33px;
  padding-bottom: 33px;
}

.footer-header {
  margin-bottom: 1px;
  line-height: 21px;
}

.footer-links {
  margin-bottom: 10px;
}

.footer-links li {
  margin-bottom: 0;
}

.payments-row {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 10px;
  border-top: 0;
}

.payment-logos img {
  display: inline-block;
  vertical-align: top;
  margin-right: 4px;
  max-width: 100%;
  height: auto;
}

.legal-line {
  text-align: left;
}

@media (max-width: 575.98px) {
  .footer-col {
    padding-top: 20px;
    padding-bottom: 0;
  }

  .payments-row {
    padding-top: 20px;
  }
}

/* --- Страница на марка --- */
.manufacturer-heading {
  margin-bottom: 0;
}

.manufacturer-title {
  font-size: 27px;
  line-height: 29.7px;
  font-weight: 500;
  color: #444;
  margin: 20px 0 30px;
}

/* --- Информационни страници --- */
.information-description p {
  margin-bottom: 10px;
}

.information-description a {
  color: #000;
  text-decoration: none;
}

.information-description a:hover {
  text-decoration: underline;
}

/* --- Поръчка (checkout) --- заглавието там е по-малко в стария сайт */
.checkout-title {
  font-size: 22px;
  line-height: 24.2px;
}

/* --- Марки (/marki) --- като /brands в стария сайт: индекс по букви,
   под него всяка буква със заглавие и марките в 4 колони */
.brands-index {
  margin-bottom: 10px;
  line-height: 28px;
}

.brands-index a {
  margin-left: 12px;
}

.brands-index a,
.brands-row a {
  color: #000;
  text-decoration: none;
}

.brands-index a:hover,
.brands-row a:hover {
  text-decoration: underline;
}

.brands-letter {
  font-size: 27px;
  line-height: 29.7px;
  font-weight: 500;
  color: #444;
  margin: 20px 0 10px;
  /* при скок от индекса буквата да не се скрие под залепения хедър */
  scroll-margin-top: 150px;
}

.brands-row > div {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* --- Търсачка --- */

/* В хедъра: малко поле с тънка долна линия и лупа, в реда с профила и
   количката. */
.header-search {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

/* Като в стария сайт: вижда се само лупата; полето е свито (ширина 0) и
   се разгъва, когато формата е на фокус или вече има въведен текст. */
.header-search input {
  width: 0;
  height: 24px;
  padding: 0;
  transition: width 0.2s ease, padding 0.2s ease;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  font-size: 12px;
}

.header-search input::placeholder {
  color: #767676;
}

.header-search {
  border-bottom-color: transparent;
}

.header-search:focus-within input,
.header-search input:not(:placeholder-shown) {
  width: 130px;
  padding: 0 4px;
}

.header-search:focus-within,
.header-search:has(input:not(:placeholder-shown)) {
  border-bottom-color: #000;
}

.header-search input:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 1px;
}

.header-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #333;
  cursor: pointer;
}

.header-search button:hover {
  color: #000;
}

@media (max-width: 575.98px) {
  .header-search:focus-within input,
  .header-search input:not(:placeholder-shown) {
    width: 84px;
  }

  .utility-bar {
    gap: 8px;
  }
}

/* На страницата с резултати: по-голямо поле + черен бутон. */
.search-page-form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto 30px;
}

.search-page-form .form-control {
  height: 34px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.search-page-form .btn {
  padding: 5px 16px;
  font-size: 14px;
}

/* "Език" в хедъра — засега само място (неактивен бутон), виж base.html. */
.header-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #333;
  font-size: 12px;
  white-space: nowrap;
  text-decoration: none;
}

.header-lang:hover,
.header-lang:focus-visible {
  color: #000;
  text-decoration: underline;
}

/* --- Хедър: ефектът при скрол от стария сайт (само на широк екран) ---
   Най-горе на страницата хедърът е голям (голямо лого, два реда). При скрол
   надолу се "залепва" горе и става нисък: логото се смалява, малките линкове
   се скриват, менюто се качва на един ред с логото.

   Направено е БЕЗ разместване на съдържанието (Cumulative Layout Shift —
   показател от Core Web Vitals / Lighthouse, който старият сайт нарушаваше):
   хедърът е position:fixed, а мястото под него е запазено с постоянен
   padding на body, така че страницата не "подскача". Самата промяна е само
   с transform/opacity (не се броят за разместване) и височината на белия
   фон (::before). Класът .is-compact се слага от малкия скрипт в base.html. */
@media (min-width: 992px) {
  html {
    /* при скок към котва/фокус елементът да не остава под залепения хедър */
    scroll-padding-top: 76px;
  }

  body {
    padding-top: 137px;
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 137px;
    padding: 10px 0 0;
    border-bottom: 0;
    background: transparent;
    /* долната част е прозрачна в ниския вид — кликовете минават през нея */
    pointer-events: none;
  }

  .site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 137px;
    background: #fff;
    border-bottom: 1px solid transparent;
    transition: height 0.25s ease, border-color 0.25s ease;
  }

  .header-grid > * {
    pointer-events: auto;
  }

  .site-logo {
    transform-origin: top left;
    transition: transform 0.25s ease;
  }

  .utility-bar,
  .main-navbar {
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.2s;
  }

  .site-header.is-compact::before {
    height: 60px;
    border-bottom-color: #d7d7d7;
  }

  .site-header.is-compact .site-logo {
    transform: translateY(-10px) scale(0.5);
  }

  .site-header.is-compact .utility-bar {
    opacity: 0;
    visibility: hidden;
  }

  .site-header.is-compact .main-navbar {
    transform: translateY(-46px);
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .site-header::before,
  .site-logo,
  .utility-bar,
  .main-navbar {
    transition: none;
  }
}

/* --- Странициране на категория (?page=N) ---
   Bootstrap .pagination в цветовете на сайта: черен текст, текущата
   страница е черна кутийка с бял текст. Ъглите са прави от общия
   --bs-border-radius: 0. */
.catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px dotted #ccc;
}

.catalog-pagination .pagination {
  flex-wrap: wrap;
  margin: 0;
  --bs-pagination-color: #333;
  --bs-pagination-hover-color: #000;
  --bs-pagination-hover-bg: #eee;
  --bs-pagination-focus-color: #000;
  --bs-pagination-focus-bg: #eee;
  --bs-pagination-focus-box-shadow: 0 0 0 2px #000;
  --bs-pagination-active-bg: #222;
  --bs-pagination-active-border-color: #222;
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-color: #5b5b5b;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-border-color: #ccc;
  --bs-pagination-font-size: 15px;
}

.catalog-pagination .page-link {
  min-width: 38px;
  text-align: center;
}

.catalog-pagination-info {
  margin: 0;
  font-size: 14px;
  color: #5b5b5b;
}

/* --- Контакт (/kontakti) --- данните на магазина вляво, формата вдясно */
.contact-grid {
  row-gap: 24px;
}

.contact-info dt {
  margin-top: 14px;
  font-weight: 600;
  color: #444;
}

.contact-info dt:first-child {
  margin-top: 0;
}

.contact-info dd {
  margin: 2px 0 0;
}

.contact-form {
  max-width: 560px;
}

.contact-form .form-label {
  margin-bottom: 4px;
  font-size: 14px;
}

.contact-form .form-control {
  border: 1px solid #767676;
}

.contact-captcha {
  max-width: 140px;
}

.contact-submit {
  padding: 8px 28px;
}

/* капан за ботове — извън екрана, недостъпен и за екранни четци (aria-hidden) */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Рекламации / връщане на стоки (/vrashtane-na-stoki) ---
   Вид като формата "Рекламации" в стария сайт: заглавия на групите 18px с
   тънка линия отдолу, малки етикети (12px) вдясно до полето, червена
   звездичка за задължителните, черни бутони "Назад" вляво и "Изпрати"
   вдясно. */
.return-form fieldset {
  margin-bottom: 10px;
}

.return-form legend {
  margin-bottom: 20px;
  padding: 7px 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 18px;
  color: #333;
}

.return-field {
  margin-bottom: 12px;
}

.return-label {
  padding-top: 7px;
  font-size: 12px;
  color: #5b5b5b;
}

.return-field.required .return-label::before {
  content: "* ";
  color: #c00;
  font-weight: 700;
}

.return-input {
  padding: 5px 10px;
  border: 1px solid #767676;
  font-size: 14px;
}

.return-input[type="date"],
.return-captcha {
  max-width: 180px;
}

.return-check {
  padding-top: 5px;
  font-size: 13px;
}

.return-check .form-check-input {
  border-color: #767676;
}

.return-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #5b5b5b;
}

.return-error {
  margin-top: 4px;
  font-size: 13px;
  color: #b00020;
}

.return-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.return-actions .btn {
  padding: 6px 16px;
}

@media (min-width: 576px) {
  .return-label {
    text-align: right;
  }
}

/* --- Намалена цена --- редовната цена зачертана и по-малка, до нея новата.
   Важи и за картичките, и за продуктовата страница. */
.price-old {
  margin-right: 6px;
  font-size: 0.8em;
  font-weight: 400;
  color: #707070;
}

.price-new {
  color: #b00020;
}

/* ==========================================================================
   Тесен екран (под 992px) — хедър и меню като мобилния вид на стария сайт
   (измерено на dev.dataspot.org при ширина 390px). Подредба отгоре надолу:
   лого на цялата ширина, търсене, количка, ред с профил и език, лента
   "Категории" с трите чертички, а под нея разгънатият списък.

   Както в стария сайт, на тесен екран хедърът НЕ е залепен горе — висок е
   около 360px и би заел половината екран.
   ========================================================================== */
@media (max-width: 991.98px) {
  .site-header {
    position: static;
    padding: 10px 0 20px;
  }

  .header-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  /* логото: от край до край, с естествения си размер като горна граница */
  .site-logo {
    margin: 0 calc(var(--bs-gutter-x) * -0.5);
  }

  .site-logo img {
    width: 100%;
    max-width: 399px;
    margin: 0 auto;
  }

  /* профил / език / търсене / количка: подреждат се наново с order —
     търсенето и количката са редове на цялата ширина, профилът и езикът
     са центрирани под тях */
  .utility-bar {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    gap: 0 16px;
    padding: 0;
  }

  .utility-bar > .header-search {
    order: 1;
    flex: 0 0 100%;
    height: 30px;
    margin-top: 14px;
    border: 1px solid #000;
  }

  /* полето е винаги разгънато (на широк екран се разгъва при фокус) */
  .utility-bar > .header-search input,
  .utility-bar > .header-search:focus-within input,
  .utility-bar > .header-search input:not(:placeholder-shown) {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
  }

  .utility-bar > .header-search button {
    width: 30px;
    height: 28px;
  }

  .utility-bar > [data-cart-widget="badge"] {
    order: 2;
    flex: 0 0 100%;
    margin-top: 14px;
  }

  .site-header .utility-bar .cart-badge-link {
    justify-content: space-between;
    height: 30px;
    padding: 0 9px 0 6px;
    border: 1px solid #000;
  }

  /* и двете са flex с центриране по височина — иначе линкът на профила
     (вътре в своя div) стои в горния край на реда и изглежда по-високо
     от езика */
  .utility-bar > [data-account-widget="nav"],
  .utility-bar > .header-lang {
    order: 3;
    display: flex;
    align-items: center;
    margin-top: 12px;
    min-height: 24px;
  }

  /* лентата "Категории" */
  .main-navbar {
    display: block;
    margin-top: 16px;
  }

  .main-navbar .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 12px 0 10px;
    border: 0;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-radius: 0;
    color: #5b5b5b;
    box-shadow: none;
  }

  .main-navbar .navbar-toggler:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  .navbar-toggler-label {
    font-size: 24px;
    line-height: 1;
  }

  /* разгънатият списък: редове на цялата ширина с тънка линия отдолу */
  .main-navbar .navbar-collapse {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .main-navbar .category-nav .nav-link {
    margin: 0;
    padding: 9px 7px 5px;
    border: 0;
    border-bottom: 1px solid #ccc;
    font-size: 15px;
    line-height: 20px;
    color: #000;
    text-transform: none;
  }

  /* подкатегориите (при нас се разгъват с докосване; в стария сайт на
     телефон не се виждат изобщо) — със същите редове, с отстъп */
  .main-navbar .category-nav .dropdown-menu {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .main-navbar .category-nav .dropdown-item {
    padding: 8px 7px 5px 22px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 15px;
    line-height: 20px;
    color: #000;
    white-space: normal;
  }
}

/* на широк екран бутонът за менюто го няма (navbar-expand-lg) */
@media (min-width: 992px) {
  .navbar-toggler-label,
  .navbar-toggler-bars {
    display: none;
  }
}

/* Футър на тесен екран (под 768px) — както в стария сайт: колоните са една
   под друга, с центриран текст и малко разстояние помежду си. */
@media (max-width: 767.98px) {
  .shop-footer {
    text-align: center;
  }

  .shop-footer .footer-col {
    padding-top: 0;
    padding-bottom: 10px;
  }

  .shop-footer .footer-col:first-child {
    padding-top: 30px;
  }

  main:has(.social-row) + .shop-footer .footer-col {
    padding-top: 0;
  }

  main:has(.social-row) + .shop-footer .footer-col:first-child {
    padding-top: 48px;
  }

  .shop-footer .payments-row {
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .shop-footer .payment-logos {
    justify-content: center;
  }

  .shop-footer .legal-line {
    margin-top: 10px;
    text-align: center;
  }
}

/* Профил + "Любими" в хедъра са два линка в едно малко Vue приложение
   (AccountNavLink.vue) — нареждат се един до друг, със същото разстояние
   като останалите линкове в реда. */
.utility-bar > [data-account-widget="nav"] {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 991.98px) {
  .utility-bar > [data-account-widget="nav"] {
    gap: 16px;
  }
}

/* Сърцето "любими" върху снимката на картичката (горе вдясно). */
.product-card .card-wishlist {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}