/* ========================================================================
   СТРАНИЦА HOME — префикс hm-
   Всички числа са от docs/izmervaniya-home.md (макет 1920×6008,
   контейнер 1600 на x=160). Проценти спрямо контейнера, за да се
   мащабират заедно; кегли през clamp().
   ======================================================================== */

/* фонови плоскости — измерени, не предположени */
.hm-light    { background: var(--c-bg-1); }
.hm-light--2 { background: var(--c-bg-2); }


/* СЕКЦИЯ: HERO : НАЧАЛО --------------------------------------------------
   Макет: 202–809 (h 607). Снимката е оригиналът от PDF-а, без надписи. */
.hm-hero {
  position: relative;
  min-height: clamp(420px, 31.63vw, 607.3px);
  overflow: hidden;
  isolation: isolate;
  background: #171614;
}
.hm-hero__slides,
.hm-hero__slide {
  position: absolute;
  inset: 0;
}
.hm-hero__slide {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 680ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 680ms;
}
.hm-hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10, 10, 10, .42) 0%, rgba(10, 10, 10, .24) 44%, rgba(10, 10, 10, 0) 72%);
  pointer-events: none;
}
.hm-hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.hm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hm-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-top: clamp(40px, 6.615vw, 127px);
  padding-bottom: clamp(92px, 7vw, 134px);
  color: var(--c-white);
}
.hm-hero__inner--right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.hm-hero__eyebrow {
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.2;
}
.hm-hero__title {
  /* оптично подравняване: мастилото на „В“ трябва да опре в 160,
     а не кутията — страничният отстъп при 68px е 6px */
  margin-left: -.375%;
  margin-top: clamp(10px, 1.104vw, 21.2px);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: 1.135;
  letter-spacing: -.005em;
  max-width: 11.75em;
  margin-bottom: 0;
}
.hm-hero__lead {
  margin-top: clamp(14px, 1.365vw, 26.2px);
  font-size: var(--fs-hero-p);
  line-height: 1.3;
  max-width: 40em;
}
.hm-hero__cta { margin-top: clamp(18px, 1.589vw, 30.5px); }

.hm-hero__controls {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(18px, 1.875vw, 36px);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(10, 10, 10, .34);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
  backdrop-filter: blur(8px);
}
.hm-hero.is-ready .hm-hero__controls { display: flex; }
.hm-hero__toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.hm-hero__toggle:hover { border-color: var(--c-white); background: rgba(255, 255, 255, .12); }
.hm-hero__toggle[hidden] { display: none; }
.hm-hero__toggle:focus-visible,
.hm-hero__dot:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}
.hm-hero__dots {
  display: flex;
  align-items: center;
  gap: clamp(6px, .469vw, 9px);
}
.hm-hero__dot {
  display: grid;
  place-items: center;
  width: clamp(10px, .677vw, 13px);
  height: clamp(10px, .677vw, 13px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hm-hero__dot::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--c-white);
  border-radius: 50%;
  transition: background-color var(--t-fast);
}
.hm-hero__dot:hover::before { background: rgba(255, 255, 255, .5); }
.hm-hero__dot.is-active {
  width: clamp(15px, 1.042vw, 20px);
  height: clamp(15px, 1.042vw, 20px);
}
.hm-hero__dot.is-active::before { background: var(--c-white); }
@media (prefers-reduced-motion: reduce) {
  .hm-hero__slide { transition: none; }
}
/* СЕКЦИЯ: HERO : КРАЙ */


/* СЕКЦИЯ: КАТЕГОРИИ : НАЧАЛО --------------------------------------------
   Тук стои САМО обвивката на секцията. Самият блок с шестте плочки се
   повтаря и на categories — изнесен е в components.css. */
.hm-cats { padding-top: clamp(36px, 3.802vw, 73px); }
/* СЕКЦИЯ: КАТЕГОРИИ : КРАЙ */


/* СЕКЦИЯ: НОВО + ТОП ПРОДУКТИ : НАЧАЛО ----------------------------------- */
.hm-prods--novo { padding-top: clamp(48px, 8.125vw, 156px); }
.hm-prods--top  { padding-top: clamp(40px, 4.911vw, 94.3px); }

.hm-prods__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.hm-prods__title {
  /* заглавието не е на ръба на контейнера — отместено е с 13px навътре */
  margin-left: .8125%;
  font-size: var(--fs-h2-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.2;
}
.hm-prods__more {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, .625vw, 12px);
  margin-right: .9375%;
  color: var(--c-ink-2);
  font-size: var(--fs-eyebrow);
  font-feature-settings: normal;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--t-fast), gap var(--t-fast);
}
.hm-prods__more:hover { color: var(--c-ink); gap: clamp(12px, .938vw, 18px); }
.hm-prods__arrow { width: clamp(13px, .833vw, 16px); height: auto; object-fit: contain; }

.hm-prods__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 3%;
  row-gap: clamp(20px, 2.5vw, 48px);
  margin-top: clamp(16px, 1.125vw, 21.6px);
}
/* СЕКЦИЯ: НОВО + ТОП ПРОДУКТИ : КРАЙ */


/* СЕКЦИЯ: БАНЕР CABBO : НАЧАЛО -------------------------------------------
   Банерът е авторска графика — надписите върху опаковките и лентата
   с предимствата са част от нея, отгоре ѝ няма HTML текст. */
.hm-banner {
  /* Първият и последният ред на самата снимка са светли — затова банерът
     започва на 2838, а тъмното от 2840. */
  padding-top: clamp(40px, 6.354vw, 122px);
  padding-bottom: clamp(40px, 5.521vw, 106px);
}
.hm-banner__link { display: block; }
.hm-banner__img {
  /* макетът показва снимката 1598 широка в контейнер 1600 — центрирана */
  width: 99.875%;
  margin-inline: auto;
  height: auto;
  transition: opacity var(--t);
}
.hm-banner__link:hover .hm-banner__img { opacity: .93; }
/* СЕКЦИЯ: БАНЕР CABBO : КРАЙ */


/* СЕКЦИЯ: КАФЕ РЕШЕНИЯ : НАЧАЛО ------------------------------------------
   Бяла лента 3616–4081 (h 466), съдържанието е центрирано. */
.hm-solutions {
  background: var(--c-white);
  padding-top: clamp(44px, 5.297vw, 101.7px);
  padding-bottom: clamp(44px, 5.339vw, 102.5px);
}
.hm-solutions__inner { display: grid; justify-items: center; }
/* Логото, заглавието, чертата и абзацът са центрирани на x=956, не на 960.
   Бутоните отдолу СА на 960 — затова отместването е само тук. */
.hm-solutions__logo,
.hm-solutions__title,
.hm-solutions__rule,
.hm-solutions__lead { margin-right: .5%; }

.hm-solutions__logo { height: clamp(30px, 2.474vw, 47.5px); width: auto; object-fit: contain; }

.hm-solutions__title {
  margin-top: clamp(6px, .651vw, 12.5px);
  text-align: center;
  font-size: var(--fs-h2-mid);
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
  line-height: 1.2;
}
.hm-solutions__rule {
  display: block;
  width: clamp(110px, 8.698vw, 167px);
  height: 1px;
  /* −3px, колкото заглавието слезе: височината на секцията остава 466 */
  margin-top: clamp(10px, .943vw, 18.1px);
  background: var(--c-line);
}
.hm-solutions__lead {
  margin-top: clamp(14px, 1.464vw, 28.1px);
  max-width: 74em;
  text-align: center;
  color: var(--c-ink-2);
  font-size: var(--fs-lead);
  line-height: 1.3;
}

.hm-solutions__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2.95%;
  row-gap: clamp(12px, .833vw, 16px);
  width: 93.65%;
  margin-top: clamp(20px, 1.76vw, 33.8px);
}
.hm-solutions__grid > li { min-width: 0; display: grid; }
/* СЕКЦИЯ: КАФЕ РЕШЕНИЯ : КРАЙ */


/* СЕКЦИЯ: СЪЗДАВАМЕ РЕШЕНИЯ : НАЧАЛО ------------------------------------- */
.hm-story { padding-top: clamp(40px, 5.927vw, 113.8px); }

.hm-story__inner {
  display: grid;
  grid-template-columns: 46.28% 48.5%;
  column-gap: 5.22%;
  align-items: start;
}
.hm-story__text { min-width: 0; margin-top: clamp(0px, 4.427vw, 85px); }
.hm-story__img  { width: 100%; height: auto; }

.hm-story__eyebrow {
  color: var(--c-muted);
  font-size: var(--fs-eyebrow-l);
  letter-spacing: 0;
  line-height: 1.2;
}
.hm-story__title {
  margin-top: clamp(8px, .781vw, 15px);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.128;
  letter-spacing: 0;
}
.hm-story__p {
  margin-top: clamp(14px, 1.208vw, 23.2px);
  font-size: var(--fs-body);
  line-height: 1.757;
}
.hm-story__p--2 { margin-top: clamp(16px, 1.573vw, 30.2px); }
/* СЕКЦИЯ: СЪЗДАВАМЕ РЕШЕНИЯ : КРАЙ */


/* СЕКЦИЯ: ВСИЧКО ЗА КАФЕТО : НАЧАЛО --------------------------------------
   Снимката нарочно излиза 15px под фона на секцията — без overflow. */
.hm-usp { padding-top: clamp(32px, 3.406vw, 65.4px); }

.hm-usp__inner {
  display: grid;
  grid-template-columns: 48.5% 46.28%;
  column-gap: 5.22%;
  align-items: start;
}
.hm-usp__img {
  width: 100%;
  height: auto;
  margin-bottom: max(-15.2px, -.792vw);
  margin-left: clamp(0px, .125vw, 2.4px);
}
.hm-usp__text { min-width: 0; margin-top: clamp(20px, 2.24vw, 43px); }

.hm-usp__eyebrow {
  color: var(--c-muted);
  font-size: var(--fs-eyebrow-l);
  letter-spacing: 0;
  line-height: 1.2;
}
.hm-usp__title {
  margin-top: clamp(8px, .885vw, 17px);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.128;
  letter-spacing: 0;
}
.hm-usp__p {
  margin-top: clamp(16px, 1.521vw, 29.2px);
  font-size: var(--fs-body);
  line-height: 1.757;
}

.hm-usp__list { margin-top: clamp(6px, .682vw, 13.1px); }
.hm-usp__row {
  display: grid;
  grid-template-columns: 34.94% 1fr;
  align-items: center;
  min-height: clamp(40px, 2.552vw, 49px);
  padding-left: 1.89%;
  border-left: 1px solid var(--c-line-2);
}
.hm-usp__row + .hm-usp__row { margin-top: clamp(6px, .823vw, 15.8px); }

.hm-usp__term { display: grid; grid-template-columns: 23.4% 1fr; align-items: baseline; }
.hm-usp__num {
  color: var(--c-line);
  font-size: var(--fs-num);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.hm-usp__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  line-height: 1;
}
.hm-usp__desc {
  font-size: var(--fs-label);
  line-height: 1.3;
}
/* СЕКЦИЯ: ВСИЧКО ЗА КАФЕТО : КРАЙ */


/* СЕКЦИЯ: ЛЕНТА КАФЕ : НАЧАЛО -------------------------------------------- */
.hm-strip { background: var(--c-white); padding-top: clamp(40px, 6.667vw, 128px); }
.hm-strip__img { width: 100%; height: auto; }
/* СЕКЦИЯ: ЛЕНТА КАФЕ : КРАЙ */

/* ========================================================================
   HOME — RESPONSIVE.  Броят колони е записан в responsive.config.json.
   Всеки блок стои под маркера на своята секция — иначе `npm run sblasak`
   го чете като втори, чужд блок за същите класове.
   ======================================================================== */

/* СЕКЦИЯ: HERO : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .hm-hero {
    min-height: clamp(520px, 145vw, 570px);
  }
  .hm-hero__slide::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 10, .48) 0%, rgba(10, 10, 10, .12) 52%, rgba(10, 10, 10, .2) 100%),
      linear-gradient(90deg, rgba(10, 10, 10, .68) 0%, rgba(10, 10, 10, .3) 58%, rgba(10, 10, 10, .05) 100%);
  }
  .hm-hero__bg { object-position: center; }
  .hm-hero__inner {
    padding-top: clamp(42px, 11vw, 62px);
    padding-bottom: 106px;
  }
  .hm-hero__title {
    max-width: 10.5ch;
    margin-left: 0;
    margin-top: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
  }
  .hm-hero__controls { bottom: 12px; }
  .hm-hero__toggle { width: 44px; height: 44px; }
  .hm-hero__dots { gap: 0; }
  .hm-hero__dot,
  .hm-hero__dot.is-active { width: 48px; height: 48px; }
  .hm-hero__dot::before { width: 13px; height: 13px; }
  .hm-hero__dot.is-active::before { width: 20px; height: 20px; }
}
@media (max-width: 640px) {
  .hm-hero {
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .hm-hero__inner {
    padding-top: clamp(30px, 9vw, 42px);
    padding-bottom: 84px;
  }
  .hm-hero__lead {
    max-width: 23em;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.35;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
  }
  .hm-hero__cta {
    width: max-content;
    max-width: 100%;
    min-height: 44px;
    margin-top: 16px;
    padding-inline: 18px;
    white-space: nowrap;
    text-transform: uppercase;
  }
}
/* СЕКЦИЯ: HERO : КРАЙ */

/* СЕКЦИЯ: НОВО + ТОП ПРОДУКТИ : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .hm-prods--novo { padding-top: clamp(48px, 7vw, 80px); }
  .hm-prods--top  { padding-top: clamp(40px, 6vw, 68px); }
  .hm-prods__title { margin-left: 0; }
  .hm-prods__more { min-height: 44px; margin-right: 0; }
  .hm-prods__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 3vw, 32px);
    row-gap: clamp(20px, 3vw, 32px);
  }
}
@media (max-width: 480px) {
  .hm-prods__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }
  .hm-prods__head { flex-wrap: wrap; row-gap: 4px; }
}
/* СЕКЦИЯ: НОВО + ТОП ПРОДУКТИ : КРАЙ */

/* СЕКЦИЯ: БАНЕР CABBO : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .hm-banner {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(40px, 5vw, 64px);
  }
  .hm-banner__img { width: 100%; }
}
/* СЕКЦИЯ: БАНЕР CABBO : КРАЙ */

/* СЕКЦИЯ: КАФЕ РЕШЕНИЯ : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .hm-solutions {
    padding-top: clamp(44px, 6vw, 72px);
    padding-bottom: clamp(44px, 6vw, 72px);
  }
  .hm-solutions__logo,
  .hm-solutions__title,
  .hm-solutions__rule,
  .hm-solutions__lead { margin-right: 0; }
  .hm-solutions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(12px, 2vw, 24px);
    width: 100%;
  }
}
@media (max-width: 640px) {
  .hm-solutions__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .hm-solutions__lead { overflow-wrap: anywhere; }
}
/* СЕКЦИЯ: КАФЕ РЕШЕНИЯ : КРАЙ */

/* СЕКЦИЯ: СЪЗДАВАМЕ РЕШЕНИЯ : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .hm-story { padding-top: clamp(40px, 6vw, 72px); }
  .hm-story__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(24px, 4vw, 44px);
  }
  .hm-story__text { margin-top: 0; }
}
@media (max-width: 360px) {
  .hm-story__p { overflow-wrap: anywhere; }
}
/* СЕКЦИЯ: СЪЗДАВАМЕ РЕШЕНИЯ : КРАЙ */

/* СЕКЦИЯ: ВСИЧКО ЗА КАФЕТО : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .hm-usp { padding-top: clamp(32px, 5vw, 60px); }
  .hm-usp__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(24px, 4vw, 44px);
  }
  .hm-usp__text { margin-top: 0; }
  /* снимката слиза под текста: редът идва от DOM, не от координати */
  .hm-usp__img { margin-bottom: 0; margin-left: 0; order: 2; }
}
@media (max-width: 820px) {
  .hm-usp__row { min-height: 48px; }
}
@media (max-width: 640px) {
  .hm-usp__row { grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: 8px; }
  .hm-usp__term { grid-template-columns: auto 1fr; column-gap: 12px; }
  .hm-usp__desc { margin-top: 4px; }
}
@media (max-width: 360px) {
  .hm-usp__p { overflow-wrap: anywhere; }
}
/* СЕКЦИЯ: ВСИЧКО ЗА КАФЕТО : КРАЙ */

/* СЕКЦИЯ: ЛЕНТА КАФЕ : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .hm-strip { padding-top: clamp(40px, 6vw, 72px); }
}
/* СЕКЦИЯ: ЛЕНТА КАФЕ : КРАЙ */


/* ========================================================================
   СТРАНИЦА CATEGORIES — префикс ct-
   Числата са от docs/izmervaniya-categories.md (макет 1920×3554,
   контейнер 1600 на x=160). Хедърът, футърът, продуктовата карта и
   блокът с плочките се преизползват — тук е само това, което е ново.
   ======================================================================== */

/* СЕКЦИЯ: ХЕДЪР ВЪРХУ СНИМКА : НАЧАЛО ------------------------------------
   Разметката на хедъра е байт-идентична с home. Тук зад него има снимка
   на зърна, а черните ленти са полупрозрачни. Алфите са ИЗМЕРЕНИ по
   средни стойности на текстово-свободни ленти, не са предположени. */
[data-page="categories"] .site-header {
  background-color: var(--c-header);
  background-image: url('/resources/ika-redesign-v2/images/hdr-categories.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
[data-page="categories"] .site-header__top { background: rgba(0, 0, 0, .339); }
[data-page="categories"] .site-header__mid { background: rgba(0, 0, 0, .692); }
[data-page="categories"] .site-header__bar { background: rgba(0, 0, 0, .682); }
/* СЕКЦИЯ: ХЕДЪР ВЪРХУ СНИМКА : КРАЙ */


/* СЕКЦИЯ: ТРОХИ : НАЧАЛО -------------------------------------------------
   Бяла лента 202–274 (h 73). */
.ct-bar { background: var(--c-white); }
.ct-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: clamp(56px, 3.802vw, 73px);
}

.ct-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(6px, .443vw, 8.5px);
  color: var(--c-crumb);
  font-size: clamp(13px, .844vw, 16.2px);
  line-height: 1.2;
}
.ct-crumbs__list > li + li::before {
  content: '/';
  margin-right: clamp(6px, .443vw, 8.5px);
  color: var(--c-crumb);
}
.ct-crumbs__link { transition: color var(--t-fast); }
.ct-crumbs__link:hover { color: var(--c-ink); }
.ct-crumbs__current { color: var(--c-ink); }

/* Ширината стои на обвивката: процент върху самото поле се мери спрямо
   контейнер с неопределена ширина и се разрешава като auto. */
.ct-sort { position: relative; flex: none; width: 15.875%; margin-right: .40625%; }
.ct-sort__field {
  width: 100%;
  min-width: 0;
  height: clamp(44px, 2.24vw, 43px);
  margin-top: -3px;
  padding-inline: clamp(12px, .885vw, 17px) clamp(34px, 2.5vw, 48px);
  appearance: none;
  border: 1px solid var(--c-line-2);
  border-radius: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: clamp(13px, .844vw, 16.2px);
  font-feature-settings: normal;
  line-height: 1.2;
  cursor: pointer;
}
.ct-sort__arrow {
  position: absolute;
  right: clamp(10px, .755vw, 14.5px);
  top: 50%;
  width: clamp(10px, .651vw, 12.5px);
  height: auto;
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
}
/* СЕКЦИЯ: ТРОХИ : КРАЙ */


/* СЕКЦИЯ: КАТАЛОГ : НАЧАЛО ----------------------------------------------
   275–2464.  sidebar 313 · улей 99 · решетка 1188 = 3 × 364 + 2 × 48 */
.ct-catalog {
  background: var(--c-bg-1);
  padding-top: clamp(32px, 2.917vw, 56px);
  padding-bottom: clamp(48px, 5.99vw, 115px);
}
.ct-catalog__inner {
  display: grid;
  grid-template-columns: 19.5625% 74.25%;
  column-gap: 6.1875%;
  align-items: start;
}

/* --- филтри ------------------------------------------------------------ */
.ct-side { min-width: 0; }

/* Разстоянията между групите в макета НЕ са равни — мерени са поотделно.
   Специфичността е изравнена, иначе .ct-filter + .ct-filter (0,2,0) бие
   .ct-filter--price (0,1,0) и последната група тръгва нагоре. */
.ct-filter + .ct-filter { margin-top: clamp(24px, 2.625vw, 50.4px); }
.ct-filter:nth-of-type(3) { margin-top: clamp(24px, 2.99vw, 57.4px); }
.ct-filter:nth-of-type(4) { margin-top: clamp(24px, 3.25vw, 62.4px); }
.ct-filter.ct-filter--price { margin-top: clamp(24px, 3.25vw, 62.4px); }

.ct-filter__title {
  padding-bottom: clamp(8px, .75vw, 14.4px);
  border-bottom: 1px solid var(--c-line-2);
  font-size: clamp(15px, .943vw, 18.1px);
  font-weight: var(--fw-regular);
  font-feature-settings: normal;
  line-height: 1.2;
}
.ct-filter--price .ct-filter__title { padding-bottom: 0; border-bottom: 0; }

.ct-filter__list { margin-top: clamp(2px, .219vw, 4.2px); }
.ct-filter__row {
  display: flex;
  align-items: center;
  gap: clamp(8px, .599vw, 11.5px);
  min-height: clamp(36px, 2.141vw, 41.1px);
}

/* Кутийката за отметка е истински input — изрязана снимка не може да
   покаже състояние отметнато. 17×17 с рамка и лек градиент, както в макета. */
.ct-filter__box {
  flex: none;
  appearance: none;
  width: clamp(15px, .885vw, 17px);
  height: clamp(15px, .885vw, 17px);
  margin: 0;
  border: 1px solid var(--c-box);
  background: linear-gradient(135deg, #c4c9cf 0%, #e8e8e8 55%);
  /* полето няма видим текст, но одитът мери font-size на всеки input:
     под 16px iOS увеличава страницата при фокус */
  font-size: 16px;
  cursor: pointer;
}
.ct-filter__box:checked {
  border-color: var(--c-ink);
  background: var(--c-ink);
}
.ct-filter__label {
  min-width: 0;
  font-size: var(--fs-eyebrow);
  font-feature-settings: normal;
  line-height: 1.2;
  cursor: pointer;
}

.ct-filter__more {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, .411vw, 7.9px);
  margin-top: clamp(8px, .745vw, 14.3px);
  padding-bottom: clamp(1px, .057vw, 1.1px);
  border-bottom: 1px solid var(--c-ink);
  font-size: clamp(13px, .859vw, 16.5px);
  font-feature-settings: normal;
  line-height: 1;
  transition: opacity var(--t-fast);
}
.ct-filter__more:hover { opacity: .65; }
.ct-filter__chev { width: clamp(8px, .573vw, 11px); height: auto; object-fit: contain; }

/* --- плъзгач за цена --------------------------------------------------- */
.ct-price {
  position: relative;
  height: clamp(44px, 3.073vw, 59px);
  margin-top: clamp(12px, 1.141vw, 21.9px);
}
.ct-price__track,
.ct-price__fill {
  position: absolute;
  top: clamp(6px, .573vw, 11px);
  height: clamp(4px, .313vw, 6px);
}
.ct-price__track { left: .32%; right: 0; background: var(--c-muted); }
.ct-price__fill  { left: 15.65%; width: 52.08%; background: var(--c-ink-2); }

.ct-price__knob {
  position: absolute;
  top: 0;
  width: clamp(20px, 1.406vw, 27px);
  height: clamp(20px, 1.406vw, 27px);
  border: clamp(2px, .156vw, 3px) solid var(--c-white);
  border-radius: 50%;
  background: #000000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.ct-price__knob--min { left: 11.79%; }
.ct-price__knob--max { left: 63.23%; }

.ct-price__tag {
  position: absolute;
  top: clamp(24px, 1.651vw, 31.7px);
  display: grid;
  place-items: center;
  width: clamp(38px, 2.344vw, 45px);
  height: clamp(22px, 1.406vw, 27px);
  background: var(--c-ink-2);
  color: var(--c-white);
  font-size: clamp(13px, .844vw, 16.2px);
  line-height: 1;
}
.ct-price__tag--min { left: 9.14%; }
.ct-price__tag--max { left: 60.61%; }

/* --- резултати --------------------------------------------------------- */
.ct-results { min-width: 0; }

.ct-title {
  font-size: clamp(20px, 1.297vw, 24.9px);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.2;
}

.ct-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 4.0404%;
  row-gap: clamp(20px, 2.375vw, 45.6px);
  margin-top: clamp(16px, 1.411vw, 27.1px);
}

/* --- пагинация --------------------------------------------------------- */
.ct-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, .99vw, 19px);
  margin-top: clamp(32px, 3.542vw, 68px);
}
.ct-pager__step {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, .521vw, 10px);
  min-height: 44px;
  color: var(--c-ink);
  font-size: clamp(13px, .792vw, 15.2px);
  font-feature-settings: normal;
  line-height: 1;
  transition: opacity var(--t-fast);
}
.ct-pager__step:hover { opacity: .6; }
.ct-pager__arrow { width: clamp(10px, .755vw, 14.5px); height: auto; object-fit: contain; }

.ct-pager__list {
  display: flex;
  align-items: center;
  gap: clamp(6px, .677vw, 13px);
}
.ct-pager__num {
  display: grid;
  place-items: center;
  width: clamp(38px, 2.24vw, 43px);
  height: clamp(38px, 2.188vw, 42px);
  border: 1px solid var(--c-line-2);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: clamp(14px, 1.057vw, 20.3px);
  line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.ct-pager__num:hover { background: var(--c-line-2); }
.ct-pager__num--current {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-white);
}
.ct-pager__gap {
  display: block;
  width: 14px;
  height: 2px;
  background: radial-gradient(circle, var(--c-muted) 1px, transparent 1px) 0 0 / 6px 2px repeat-x;
}
/* СЕКЦИЯ: КАТАЛОГ : КРАЙ */


/* СЕКЦИЯ: КАТЕГОРИИ CT : НАЧАЛО ------------------------------------------
   Бяла лента 2465–2931 (h 467). Самите плочки са в components.css. */
.ct-cats {
  background: var(--c-white);
  padding-top: clamp(40px, 4.078vw, 78.3px);
  padding-bottom: clamp(40px, 4.401vw, 84.5px);
}
/* СЕКЦИЯ: КАТЕГОРИИ CT : КРАЙ */


/* СЕКЦИЯ: ЛЕНТА КАФЕ CT : НАЧАЛО ----------------------------------------- */
.ct-strip { background: var(--c-bg-1); padding-top: clamp(14px, 1.198vw, 23px); }
.ct-strip__img { width: 100%; height: auto; }
/* СЕКЦИЯ: ЛЕНТА КАФЕ CT : КРАЙ */


/* ========================================================================
   CATEGORIES — RESPONSIVE.  Броят колони е в responsive.config.json.
   Всеки блок стои под маркера на своята секция.
   ======================================================================== */

/* СЕКЦИЯ: ТРОХИ : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .ct-bar__inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 10px;
  }
  .ct-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .ct-crumbs__current { display: inline-flex; align-items: center; min-height: 44px; }
  .ct-sort { width: auto; min-width: 240px; margin-right: 0; }
  .ct-sort__field { height: 48px; margin-top: 0; }
}
@media (max-width: 820px) {
  /* под 820 iOS увеличава страницата при фокус в поле под 16px */
  .ct-sort__field { font-size: 16px; }
}
@media (max-width: 480px) {
  .ct-sort { width: 100%; min-width: 0; }
}
/* СЕКЦИЯ: ТРОХИ : КРАЙ */

/* СЕКЦИЯ: КАТАЛОГ : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .ct-catalog {
    padding-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(40px, 6vw, 72px);
  }
  /* Две колони → една. Редът идва от DOM: филтрите остават преди
     резултатите, за да не се разминават с реда на табулация. */
  .ct-catalog__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 4vw, 48px);
  }

  .ct-filter + .ct-filter,
  .ct-filter:nth-of-type(3),
  .ct-filter:nth-of-type(4),
  .ct-filter.ct-filter--price { margin-top: clamp(24px, 3vw, 36px); }

  .ct-filter__row { min-height: 48px; }
  /* целта за докосване е 48; видимата кутийка остава 20px */
  .ct-filter__box {
    width: 48px;
    height: 48px;
    margin-left: -14px;
    border: 0;
    background: none;
    display: grid;
    place-items: center;
  }
  .ct-filter__box::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid var(--c-box);
    background: linear-gradient(135deg, #c4c9cf 0%, #e8e8e8 55%);
  }
  .ct-filter__box:checked { background: none; }
  .ct-filter__box:checked::before { border-color: var(--c-ink); background: var(--c-ink); }
  .ct-filter__label { font-size: max(14px, var(--fs-eyebrow)); }
  .ct-filter__more { min-height: 44px; }

  .ct-price { height: 64px; }

  .ct-title { margin-bottom: 4px; }
  .ct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 3vw, 32px);
    row-gap: clamp(20px, 3vw, 32px);
  }

  .ct-pager { flex-wrap: wrap; row-gap: 12px; }
  .ct-pager__num { width: 48px; height: 48px; }
  .ct-pager__gap { width: 20px; }
}
@media (max-width: 480px) {
  .ct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }
  .ct-pager { gap: 8px; }
}
@media (max-width: 360px) {
  .ct-filter__label { overflow-wrap: anywhere; }
}
/* СЕКЦИЯ: КАТАЛОГ : КРАЙ */

/* СЕКЦИЯ: КАТЕГОРИИ CT : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .ct-cats {
    padding-top: clamp(36px, 3.802vw, 73px);
    padding-bottom: 0;
  }
}
/* СЕКЦИЯ: КАТЕГОРИИ CT : КРАЙ */

/* СЕКЦИЯ: ЛЕНТА КАФЕ CT : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .ct-strip { padding-top: clamp(14px, 2vw, 23px); }
}
/* СЕКЦИЯ: ЛЕНТА КАФЕ CT : КРАЙ */


/* ========================================================================
   СТРАНИЦА PRODUCT — префикс pr-
   Числата са от docs/izmervaniya-product.md (макет 1920×2893,
   контейнер 1600 на x=160). Хедърът, футърът и продуктовата карта
   се преизползват — тук е само това, което е ново.
   ======================================================================== */

/* СЕКЦИЯ: ХЕДЪР ВЪРХУ СНИМКА : НАЧАЛО ------------------------------------
   Разметката е байт-идентична с home. Тук зад хедъра има своя снимка,
   а черните ленти са полупрозрачни — същите алфи както при categories. */
[data-page="product"] .site-header {
  background-color: var(--c-header);
  background-image: url('/resources/ika-redesign-v2/images/hdr-product.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
[data-page="product"] .site-header__top { background: rgba(0, 0, 0, .339); }
[data-page="product"] .site-header__mid { background: rgba(0, 0, 0, .692); }
[data-page="product"] .site-header__bar { background: rgba(0, 0, 0, .682); }
/* СЕКЦИЯ: ХЕДЪР ВЪРХУ СНИМКА : КРАЙ */


/* СЕКЦИЯ: ТРОХИ : НАЧАЛО -------------------------------------------------
   Бяла лента 202–274 (h 73), както на categories. */
.pr-bar { background: var(--c-white); }
.pr-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: clamp(56px, 3.802vw, 73px);
}

.pr-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(6px, .443vw, 8.5px);
  color: var(--c-crumb);
  font-size: clamp(13px, .844vw, 16.2px);
  line-height: 1.2;
}
.pr-crumbs__list > li + li::before {
  content: '/';
  margin-right: clamp(6px, .443vw, 8.5px);
  color: var(--c-crumb);
}
.pr-crumbs__link { transition: color var(--t-fast); }
.pr-crumbs__link:hover { color: var(--c-ink); }

.pr-wish {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, .625vw, 12px);
  margin-top: -2px;
  color: var(--c-crumb);
  font-size: clamp(13px, .844vw, 16.2px);
  font-feature-settings: normal;
  line-height: 1.2;
  transition: color var(--t-fast);
}
.pr-wish:hover { color: var(--c-ink); }
.pr-wish__mark {
  flex: none;
  display: block;
  width: clamp(40px, 2.76vw, 53px);
  height: clamp(40px, 2.76vw, 53px);
  border: 1px solid #dfdfdf;
  border-radius: 50%;
  /* 28.7 е ШИРИНАТА НА КУТИЯТА: активът носи прозрачен резерв,
     мастилото на сърцето излиза 21px, колкото е в макета */
  background: var(--c-white) url('/resources/ika-redesign-v2/images/icons/ic-fav.png') center / clamp(22px, 1.495vw, 28.7px) auto no-repeat;
  transition: box-shadow var(--t);
}
.pr-wish:hover .pr-wish__mark { box-shadow: var(--shadow-soft-hover); }
.pr-wish.is-active .pr-wish__mark,
.pr-wish[aria-pressed="true"] .pr-wish__mark {
  background-image: url('/resources/ika-redesign-v2/images/icons/ic-fav-on.png');
}
/* СЕКЦИЯ: ТРОХИ : КРАЙ */


/* СЕКЦИЯ: ПРОДУКТ : НАЧАЛО -----------------------------------------------
   275–1414.  снимка 680 · улей 90 · текст 830 */
.pr-item {
  background: var(--c-bg-1);
  padding-top: clamp(28px, 3.073vw, 59px);
  padding-bottom: clamp(48px, 5.469vw, 105px);
}
.pr-item__inner {
  display: grid;
  grid-template-columns: 42.5% 51.875%;
  column-gap: 5.625%;
  align-items: start;
}

/* --- галерия ------------------------------------------------------------ */
.pr-gallery { min-width: 0; }
.pr-gallery__main { position: relative; }
.pr-gallery__img { width: 100%; height: auto; }

.pr-gallery__flags {
  position: absolute;
  top: 2.971%;
  left: 2.618%;
  display: flex;
  gap: clamp(3px, .276vw, 5.3px);
}

.pr-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(10px, 1.042vw, 20px);
  margin-top: clamp(20px, 2.396vw, 46px);
  align-items: start;
}
.pr-thumbs__item { min-width: 0; }
.pr-thumbs__btn {
  display: block;
  width: 100%;
  transition: box-shadow var(--t), transform var(--t);
}
.pr-thumbs__btn:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.pr-thumbs__img { width: 100%; height: auto; }

/* --- текстова колона ---------------------------------------------------- */
.pr-info { min-width: 0; display: grid; justify-items: start; }

.pr-info__brand {
  justify-self: end;
  width: auto;
  /* 36.5 е височината на МАСТИЛОТО; кутията е 40.5, защото активът
     носи 4px прозрачен резерв от всяка страна */
  height: clamp(26px, 2.109vw, 40.5px);
  object-fit: contain;
}

.pr-title {
  margin-top: clamp(16px, 1.922vw, 36.9px);
  color: var(--c-ink-2);
  font-size: clamp(24px, 1.891vw, 36.3px);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  line-height: 1.2;
}
.pr-specs {
  margin-top: clamp(6px, .484vw, 9.3px);
  color: var(--c-ink-2);
  font-size: clamp(14px, .927vw, 17.8px);
  line-height: 1.2;
}
.pr-desc {
  margin-top: clamp(14px, 1.349vw, 25.9px);
  /* Точката на пренасяне определя ширината: при 830 „и“ се събира на
     втория ред и целият трети ред тръгва различно. Макетът чупи под 802. */
  max-width: 95.8%;
  color: var(--c-crumb);
  font-size: var(--fs-eyebrow);
  line-height: 1.596;
}

/* --- бялата карта за покупка -------------------------------------------- */
.pr-buy {
  width: 100%;
  margin-top: clamp(20px, 1.974vw, 37.9px);
  padding: clamp(20px, 2.453vw, 47.1px) clamp(16px, 1.37vw, 26.3px) clamp(20px, 2.677vw, 51.4px) clamp(16px, 1.302vw, 25px);
  background: var(--c-white);
}

.pr-variant { border: 0; padding: 0; margin: 0; min-width: 0; }
.pr-variant__legend {
  padding: 0;
  font-size: clamp(14px, .906vw, 17.4px);
  line-height: 1.2;
}
.pr-variant__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, .927vw, 17.8px);
  margin-top: clamp(10px, .797vw, 15.3px);
}
/* истински radio-и: изборът трябва да е достъпен, не само нарисуван */
/* opacity: 0, не clip-path: одитът мери цели за докосване по ВСЕКИ
   видим input, а изрязаният с clip-path остава „видим“ с 1×1 кутия. */
.pr-variant__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
  border: 0;
}
.pr-variant__label {
  display: grid;
  place-items: center;
  width: clamp(64px, 4.063vw, 78px);
  height: clamp(40px, 2.083vw, 40px);
  border: 1px solid var(--c-line-2);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: clamp(14px, .927vw, 17.8px);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.pr-variant__label:hover { border-color: var(--c-ink); }
.pr-variant__radio:checked + .pr-variant__label {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-white);
}
.pr-variant__radio:focus-visible + .pr-variant__label { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* --- ред цена / брояч / кошница ----------------------------------------- */
.pr-order {
  display: flex;
  align-items: center;
  margin-top: clamp(18px, 1.839vw, 35.3px);
}

.pr-price {
  display: flex;
  align-items: center;
  /* междините в макета не са равни: 3px преди цената, 14px преди баджа */
  margin-right: auto;
  line-height: 1;
}
.pr-price__old {
  color: var(--c-grey);
  font-size: clamp(15px, 1.219vw, 23.4px);
}
.pr-price__now {
  margin-left: clamp(2px, .156vw, 3px);
  color: var(--c-price);
  font-size: clamp(26px, 2.208vw, 42.4px);
}
.pr-price__off {
  display: grid;
  place-items: center;
  margin-left: clamp(8px, .729vw, 14px);
  width: clamp(34px, 2.344vw, 45px);
  height: clamp(34px, 2.344vw, 45px);
  border-radius: 50%;
  background: var(--c-sale);
  color: var(--c-white);
  font-size: clamp(12.5px, .714vw, 13.7px);
  font-weight: var(--fw-medium);
}

.pr-qty {
  flex: none;
  display: grid;
  grid-template-columns: 1fr clamp(26px, 1.688vw, 32.4px);
  grid-template-rows: 1fr 1fr;
  width: clamp(80px, 4.844vw, 93px);
  height: clamp(56px, 3.906vw, 75px);
  margin-right: clamp(8px, .589vw, 11.3px);
  border: 1px solid var(--c-line-2);
  background: var(--c-white);
}
.pr-qty__field {
  grid-row: 1 / 3;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: clamp(18px, 1.573vw, 30.2px);
  line-height: 1;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.pr-qty__field::-webkit-outer-spin-button,
.pr-qty__field::-webkit-inner-spin-button { appearance: none; margin: 0; }

.pr-qty__btn {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--c-line-2);
  color: var(--c-ink);
  /* Raleway Light — така е в макета, само за тези два знака */
  font-family: var(--ff-alt);
  font-weight: 300;
  font-size: clamp(20px, 1.729vw, 33.2px);
  line-height: 1;
  transition: background-color var(--t-fast);
}
/* в макета минусът е ГОРЕ, плюсът долу */
.pr-qty__btn--down { grid-column: 2; grid-row: 1; }
.pr-qty__btn--up   { grid-column: 2; grid-row: 2; border-top: 1px solid var(--c-line-2); }
.pr-qty__btn:hover { background: var(--c-bg-1); }

.pr-cart {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, .729vw, 14px);
  /* vw, не проценти: .pr-order е flex контейнер с автоматична ширина
     и процентът се разрешава спрямо грешна база */
  width: clamp(200px, 15.885vw, 305px);
  height: clamp(56px, 3.906vw, 75px);
  background: var(--c-ink);
  color: var(--c-white);
  font-size: clamp(14px, .927vw, 17.8px);
  font-feature-settings: normal;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  transition: background-color var(--t), box-shadow var(--t);
}
.pr-cart:hover { background: #333333; box-shadow: var(--shadow-soft-hover); }
.pr-cart__ico { width: clamp(16px, 1.094vw, 21px); height: auto; object-fit: contain; }

/* --- хармоника ---------------------------------------------------------- */
.pr-acc {
  width: 100%;
  margin-top: clamp(24px, 2.641vw, 50.7px);
  border-bottom: 1px solid #e8ecef;
}
.pr-acc__row { border-top: 1px solid #e8ecef; }
.pr-acc__head { margin: 0; font-weight: var(--fw-regular); }
.pr-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding-block: clamp(12px, 1.094vw, 21px) clamp(12px, 1.229vw, 23.6px);
  padding-inline: clamp(10px, .729vw, 14px) 0;
  color: var(--c-ink);
  font-size: clamp(15px, .995vw, 19.1px);
  font-feature-settings: normal;
  line-height: 1.2;
  text-align: left;
  transition: color var(--t-fast);
}
.pr-acc__btn:hover { color: var(--c-accent); }
.pr-acc__sign {
  flex: none;
  color: var(--c-grey);
  font-weight: 300;
  font-size: clamp(24px, 1.943vw, 37.3px);
  line-height: .6;
}
/* СЕКЦИЯ: ПРОДУКТ : КРАЙ */


/* СЕКЦИЯ: МОЖЕ ДА ХАРЕСАТЕ СЪЩО : НАЧАЛО ---------------------------------
   1415–2293.  Фонът в макета не е плътен, а избледняващ градиент —
   от #eaeef1 до фона на страницата за около 185px. */
.pr-also {
  background: linear-gradient(180deg, var(--c-tint) 0, var(--c-bg-1) clamp(90px, 9.635vw, 185px));
  padding-top: clamp(44px, 5.078vw, 97.5px);
  padding-bottom: clamp(48px, 6.823vw, 131px);
}
.pr-also__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.pr-also__title {
  font-size: var(--fs-h2-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.2;
}
.pr-also__more {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, .625vw, 12px);
  margin-right: .9375%;
  color: var(--c-ink-2);
  font-size: var(--fs-eyebrow);
  font-feature-settings: normal;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--t-fast), gap var(--t-fast);
}
.pr-also__more:hover { color: var(--c-ink); gap: clamp(12px, .938vw, 18px); }
.pr-also__arrow { width: clamp(13px, .833vw, 16px); height: auto; object-fit: contain; }

.pr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 3%;
  row-gap: clamp(20px, 2.5vw, 48px);
  margin-top: clamp(18px, 1.688vw, 32.4px);
}
/* СЕКЦИЯ: МОЖЕ ДА ХАРЕСАТЕ СЪЩО : КРАЙ */


/* СЕКЦИЯ: ЛЕНТА КАФЕ PR : НАЧАЛО ----------------------------------------- */
.pr-strip { background: var(--c-bg-1); }
.pr-strip__img { width: 100%; height: auto; }
/* СЕКЦИЯ: ЛЕНТА КАФЕ PR : КРАЙ */


/* ========================================================================
   PRODUCT — RESPONSIVE.  Броят колони е в responsive.config.json.
   Всеки блок стои под маркера на своята секция.
   ======================================================================== */

/* СЕКЦИЯ: ТРОХИ : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .pr-bar__inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 10px;
  }
  .pr-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .pr-wish { min-height: 48px; }
}
/* СЕКЦИЯ: ТРОХИ : КРАЙ */

/* СЕКЦИЯ: ПРОДУКТ : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .pr-item {
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(40px, 6vw, 72px);
  }
  /* Две колони → една. Редът идва от DOM: галерия, после текст. */
  .pr-item__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(24px, 4vw, 44px);
  }
  .pr-gallery__main { max-width: 680px; margin-inline: auto; }
  .pr-thumbs { max-width: 680px; margin-inline: auto; }

  .pr-info__brand { justify-self: start; }
  .pr-title { margin-top: clamp(12px, 2vw, 24px); }
  .pr-buy { margin-top: clamp(18px, 3vw, 32px); }

  /* редът цена/брояч/кошница се пренася, затова има свой row-gap */
  .pr-order {
    flex-wrap: wrap;
    row-gap: 16px;
    margin-top: clamp(16px, 2.5vw, 28px);
  }
  .pr-price { margin-right: 0; width: 100%; }

  /* целите за докосване стават 48; кутията на брояча расте с тях */
  .pr-qty {
    grid-template-columns: 1fr 48px;
    width: 132px;
    height: 96px;
    margin-right: 12px;
  }
  .pr-cart { width: clamp(200px, 46%, 305px); }

  .pr-acc { margin-top: clamp(24px, 4vw, 44px); }
  .pr-acc__btn { padding-block: 14px; min-height: 48px; }
}

@media (max-width: 480px) {
  .pr-order { row-gap: 12px; }
  .pr-qty { margin-right: 10px; }
  .pr-cart { width: calc(100% - 142px); min-width: 0; }
}

@media (max-width: 360px) {
  .pr-desc, .pr-specs { overflow-wrap: anywhere; }
  .pr-order { flex-direction: column; align-items: stretch; }
  .pr-qty { margin-right: 0; }
  .pr-cart { width: 100%; }
}
/* СЕКЦИЯ: ПРОДУКТ : КРАЙ */

/* СЕКЦИЯ: МОЖЕ ДА ХАРЕСАТЕ СЪЩО : НАЧАЛО — responsive */
@media (max-width: 1024px) {
  .pr-also {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(40px, 6vw, 72px);
  }
  .pr-also__more { min-height: 44px; margin-right: 0; }
  .pr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 3vw, 32px);
    row-gap: clamp(20px, 3vw, 32px);
  }
}
@media (max-width: 480px) {
  .pr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }
  .pr-also__head { flex-wrap: wrap; row-gap: 4px; }
}
/* СЕКЦИЯ: МОЖЕ ДА ХАРЕСАТЕ СЪЩО : КРАЙ */