/* ========================================================================
   КОМПОНЕНТИ — бутони и продуктова карта
   ======================================================================== */

/* СЕКЦИЯ: БУТОНИ : НАЧАЛО */
.btn {
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: var(--fw-medium);
  line-height: 1.15;
  letter-spacing: .02em;
  box-shadow: var(--shadow-soft);
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
}
.btn:hover {
  box-shadow: var(--shadow-soft-hover);
  transform: translateY(-1px);
}

/* hero — 298×52 при 1920, фон #544e4f */
.btn--accent {
  width: clamp(210px, 18.625%, 298px);
  height: clamp(44px, 2.708vw, 52px);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: clamp(12.4px, .677vw, 13px);
  letter-spacing: .1em;
}
.btn--accent:hover { background: #635c5d; }

/* бяла секция — 341×56 при 1920, фон #333333 */
.btn--dark {
  width: 100%;
  height: clamp(46px, 2.927vw, 56.2px);
  padding-inline: 8px;
  background: var(--c-ink-2);
  color: var(--c-white);
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
}
.btn--dark:hover { background: #4a4a4a; }
/* СЕКЦИЯ: БУТОНИ : КРАЙ */


/* СЕКЦИЯ: ПРОДУКТОВА КАРТА : НАЧАЛО
   Макет: 364 × 587 — снимка 364×403 (1:1 с актива) + бяло тяло 184. */
.pcard {
  position: relative;
  min-width: 0;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t), transform var(--t);
}
.pcard:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

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

.pcard__media { position: relative; display: block; }
.pcard__img {
  width: 100%;
  height: auto;
  aspect-ratio: 364 / 403;
  object-fit: cover;
}

/* баджове — кръгове 45px, горе вляво */
.pcard__flags {
  position: absolute;
  top: 3.102%;
  left: 4.945%;
  display: flex;
  gap: clamp(3px, .26vw, 5px);
}
.pcard__flag {
  display: grid;
  place-items: center;
  width: clamp(34px, 2.344vw, 45px);
  height: clamp(34px, 2.344vw, 45px);
  border-radius: 50%;
  background: #383838;
  color: var(--c-white);
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  line-height: 1;
}
.pcard__flag--sale { background: var(--c-sale); font-size: var(--fs-badge-sale); }

/* сърце — бял кръг 45px, горе вдясно */
.pcard__fav {
  position: absolute;
  top: 2.129%;
  right: 5.22%;
  width: clamp(38px, 2.344vw, 45px);
  height: clamp(38px, 2.344vw, 45px);
  border-radius: 50%;
  background: var(--c-white);
  background-image: url('/resources/ika-redesign-v2/images/icons/ic-fav.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(17px, 1.094vw, 21px) auto;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--t), background-image var(--t-fast);
}
.pcard__fav:hover,
.pcard__fav.is-on {
  background-image: url('/resources/ika-redesign-v2/images/icons/ic-fav-on.png');
  box-shadow: var(--shadow-soft-hover);
}

.pcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(16px, 1.74vw, 33.4px) clamp(14px, 1.302vw, 25px) clamp(12px, 1.182vw, 22.7px);
}
.pcard__brand {
  display: block;
  color: var(--c-ink-3);
  font-size: var(--fs-mark);
  font-weight: var(--fw-medium);
  letter-spacing: .015em;
  line-height: 1;
}
.pcard__name {
  display: block;
  margin-top: clamp(4px, .443vw, 8.5px);
  color: var(--c-ink);
  font-size: clamp(16px, .938vw, 18px);
  font-weight: var(--fw-medium);
  line-height: 1.15;
}
.pcard__meta {
  display: block;
  margin-top: clamp(5px, .484vw, 9.3px);
  color: var(--c-ink-2);
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
}
.pcard__price {
  display: block;
  margin-top: auto;
  padding-top: clamp(12px, 1.318vw, 25.3px);
  color: var(--c-ink);
  font-size: var(--fs-price);
  font-weight: var(--fw-medium);
  line-height: 1.1;
}
.pcard__old {
  margin-left: clamp(4px, .365vw, 7px);
  color: var(--c-muted);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
}
/* СЕКЦИЯ: ПРОДУКТОВА КАРТА : КРАЙ */

/* ========================================================================
   КОМПОНЕНТИ — RESPONSIVE
   ======================================================================== */
@media (max-width: 1024px) {
  /* цел за докосване: проектира се на 48, не на 44 */
  .pcard__fav {
    width: 48px;
    height: 48px;
    background-size: 22px auto;
  }
  .pcard__flag { width: 42px; height: 42px; }
}

@media (max-width: 640px) {
  .pcard .pcard__flags { top: 10px; left: 10px; }
  .pcard .pcard__flag {
    width: 34px;
    height: 34px;
    font-size: 9px;
  }
  .pcard .pcard__flag--sale { font-size: 9px; }
  .pcard > .pcard__fav {
    top: 5px;
    right: 5px;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
  }
  .pcard > .pcard__fav::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background-color: var(--c-white);
    background-image: url('/resources/ika-redesign-v2/images/icons/ic-fav.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px auto;
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--t), background-image var(--t-fast);
  }
  .pcard > .pcard__fav:hover::before,
  .pcard > .pcard__fav.is-on::before {
    background-image: url('/resources/ika-redesign-v2/images/icons/ic-fav-on.png');
    box-shadow: var(--shadow-soft-hover);
  }
}

@media (max-width: 480px) {
  .pcard__body { padding: 14px 12px 13px; }
  .pcard .pcard__flag {
    width: 28px;
    height: 28px;
    font-size: 8px;
  }
  .pcard .pcard__flag--sale { font-size: 8px; }
  .pcard > .pcard__fav {
    top: 2px;
    right: 2px;
  }
  .pcard > .pcard__fav::before {
    inset: 8px;
    background-size: 15px auto;
  }
  .pcard__name { font-size: 14px; }
  .pcard__price { font-size: 18px; }
}

/* ========================================================================
   СЕКЦИЯ: ПЛОЧКИ НА КАТЕГОРИИТЕ : НАЧАЛО
   Блокът „БЪРЗ ДОСТЪП ДО КАТЕГОРИИТЕ“ се повтаря на home и на categories
   с еднаква геометрия: 6 плочки по 176px, стъпка 270, редът е центриран
   в контейнера 1600. Обвивката на секцията (отстъпите и фонът) е различна
   на двете страници и остава в pages.css.
   ======================================================================== */
.hm-cats__eyebrow,
.ct-cats__eyebrow {
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0;
  line-height: 1.2;
}
.hm-cats__title,
.ct-cats__title {
  margin-top: clamp(6px, .49vw, 9.4px);
  text-align: center;
  font-size: clamp(18px, 1.094vw, 21px);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.2;
}

.hm-cats__grid,
.ct-cats__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 1.25%;
  row-gap: clamp(20px, 2.083vw, 40px);
  margin-top: clamp(24px, 2.109vw, 40.5px);
}
.hm-cat,
.ct-cat { min-width: 0; }
.hm-cat__link,
.ct-cat__link { display: block; }
.hm-cat__ico,
.ct-cat__ico {
  width: 70.4%;
  max-width: 176px;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  transition: transform var(--t);
}
.hm-cat__link:hover .hm-cat__ico,
.ct-cat__link:hover .ct-cat__ico { transform: translateY(-3px) scale(1.03); }
.hm-cat__label,
.ct-cat__label {
  display: block;
  margin-top: clamp(8px, .677vw, 13px);
  text-align: center;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  font-feature-settings: normal;   /* български форми — както в макета */
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .hm-cats__grid,
  .ct-cats__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(12px, 2vw, 24px);
    row-gap: clamp(20px, 3vw, 36px);
  }
  .hm-cat__ico,
  .ct-cat__ico { width: min(100%, 176px); }
}
@media (max-width: 480px) {
  .hm-cats__grid,
  .ct-cats__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 14px;
    margin-top: 18px;
  }
  .hm-cat__ico,
  .ct-cat__ico { width: min(86%, 150px); }
  .hm-cat__label,
  .ct-cat__label { font-size: 12px; }
}
/* СЕКЦИЯ: ПЛОЧКИ НА КАТЕГОРИИТЕ : КРАЙ */