/* ===========================================================================
   iPostelka — спільна дизайн-система: HERO, банер, кошик.
   Підключається на ВСІХ сторінках (головна, каталог, колекції, підбір, блог),
   щоб герой, банери й кошик виглядали однаково. Джерело правди — головна.

   Файл написаний "самодостатнім": він не залежить від Tailwind і перекриває
   старі утиліти, бо підключається після них.
   =========================================================================== */

:root {
  --ip-ink: #2a1e1c;          /* глибокий мокко — база темного героя */
  --ip-ink-2: #3a2824;
  --ip-ink-3: #4b332c;
  --ip-cream: #fef6f7;        /* колір сторінки, у який герой розчиняється */
  --ip-terracotta: #c98c77;
  --ip-terracotta-deep: #b76e5d;
  --ip-apricot: #e08e79;
  --ip-sand: #f5ba9c;
  --ip-blush: #f7c5b2;
  --ip-line: rgba(255, 255, 255, .16);
  --ip-glass: rgba(255, 255, 255, .10);
  --ip-glass-hover: rgba(255, 255, 255, .18);
  --ip-shadow-lift: 0 24px 60px rgba(30, 18, 15, .28);
}

/* ─────────────────────────────────────────────────────────────────────────
   1. HERO
   Раніше розмітка героя була розрахована на темний фон (text-white), а CSS
   від попереднього редизайну заливав секцію світлим градієнтом — білий текст
   на майже білому тлі був нечитабельним. Тут фон задається явно й остаточно.
   ───────────────────────────────────────────────────────────────────────── */

.ip-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(115% 85% at 6% -10%, rgba(224, 142, 121, .34) 0%, rgba(224, 142, 121, 0) 55%),
    radial-gradient(85% 75% at 102% 18%, rgba(245, 186, 156, .26) 0%, rgba(245, 186, 156, 0) 62%),
    linear-gradient(168deg, var(--ip-ink) 0%, var(--ip-ink-2) 40%, var(--ip-ink-3) 68%, #6b4438 88%, var(--ip-cream) 100%);
}

/* Тонкий діагональний блиск — дає відчуття тканини, а не пласкої заливки. */
.ip-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px);
  opacity: .7;
}

/* М'яке розчинення у фон сторінки, щоб не було різкої лінії обрізу. */
.ip-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 12%;
  min-height: 56px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(254, 246, 247, 0), var(--ip-cream));
}

.ip-hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
}
.ip-hero-glow--a {
  top: -18%;
  left: -14%;
  width: min(46rem, 70vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(224, 142, 121, .40) 0%, rgba(209, 123, 101, .16) 45%, transparent 70%);
}
.ip-hero-glow--b {
  top: 12%;
  right: -16%;
  width: min(44rem, 66vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(245, 186, 156, .30) 0%, rgba(224, 142, 121, .12) 48%, transparent 72%);
}

.ip-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 3.4vw, 3rem) clamp(3rem, 6vw, 5.5rem);
}

/* ── Верхня смуга довіри ─────────────────────────────────────────────── */
.ip-hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .9rem;
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--ip-line);
}
.ip-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: var(--ip-glass);
  border: 1px solid var(--ip-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .88);
}
.ip-hero-rating b { color: #ffc978; font-weight: 800; display: inline-flex; align-items: center; gap: .3rem; }
.ip-hero-rating svg { width: 14px; height: 14px; fill: #ffc978; color: #ffc978; }
.ip-hero-trust-meta {
  display: none;
  align-items: center;
  gap: 1rem;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}
.ip-hero-trust-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.ip-hero-trust-meta svg { width: 15px; height: 15px; }
.ip-hero-dot { color: rgba(255, 255, 255, .3); }
@media (min-width: 640px) { .ip-hero-trust-meta { display: flex; } }

/* ── Сітка ───────────────────────────────────────────────────────────── */
.ip-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .ip-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}

/* ── Копірайт ────────────────────────────────────────────────────────── */
.ip-hero-copy { min-width: 0; }

.ip-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  background: var(--ip-glass);
  border: 1px solid var(--ip-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ip-blush);
}
.ip-hero-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ip-sand);
  box-shadow: 0 0 0 0 rgba(245, 186, 156, .7);
  animation: ip-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes ip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 186, 156, .55); }
  70%      { box-shadow: 0 0 0 9px rgba(245, 186, 156, 0); }
}

.ip-hero-title {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.15rem, 4.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}
.ip-hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ip-blush) 0%, #f1a88d 48%, #e8896a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ip-hero-lede {
  margin: clamp(.9rem, 1.8vw, 1.35rem) 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.72;
  /* Головна причина, чому герой не читався: тут був майже прозорий рожевий. */
  color: rgba(255, 255, 255, .84);
}
.ip-hero-lede strong { color: #fff; font-weight: 650; }

/* ── УТП-чипи ────────────────────────────────────────────────────────── */
.ip-hero-usp {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin: clamp(1.3rem, 2.4vw, 1.9rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .ip-hero-usp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ip-hero-usp li {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .85rem;
  border-radius: 14px;
  background: var(--ip-glass);
  border: 1px solid var(--ip-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.ip-hero-usp li:hover { background: var(--ip-glass-hover); transform: translateY(-1px); }
.ip-hero-usp i, .ip-hero-usp svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ip-sand); }
.ip-hero-usp li:nth-child(2) svg { color: #6ee7b7; }
.ip-hero-usp li:nth-child(3) svg { color: #ffc978; }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.ip-hero-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
}
@media (min-width: 640px) { .ip-hero-actions { flex-direction: row; align-items: center; } }

.ip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: .97rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ip-btn svg { width: 19px; height: 19px; }
.ip-btn--primary {
  color: #fff;
  background: linear-gradient(100deg, var(--ip-apricot) 0%, #c86e58 100%);
  box-shadow: 0 16px 38px rgba(200, 110, 88, .42);
}
.ip-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(200, 110, 88, .52);
}
.ip-btn--primary:active { transform: translateY(0); }
.ip-btn--ghost {
  color: #fff;
  background: var(--ip-glass);
  border-color: var(--ip-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ip-btn--ghost:hover { color: #fff; background: var(--ip-glass-hover); transform: translateY(-2px); }
.ip-btn--ghost svg { color: var(--ip-sand); }

/* ── Статистика ──────────────────────────────────────────────────────── */
.ip-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 34rem;
  margin: clamp(1.6rem, 3vw, 2.3rem) 0 0;
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--ip-line);
}
.ip-hero-stats div { min-width: 0; }
.ip-hero-stats dt {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ip-sand);
}
.ip-hero-stats div:nth-child(2) dt { color: #fff; }
.ip-hero-stats dd {
  margin: .25rem 0 0;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, .62);
}

/* ── Права колонка (вітрина) ─────────────────────────────────────────── */
.ip-hero-showcase { position: relative; min-width: 0; }
.ip-hero-showcase > * { position: relative; }

/* ─────────────────────────────────────────────────────────────────────────
   2. HERO — компактний варіант для каталогу, колекцій, підбору
   ───────────────────────────────────────────────────────────────────────── */

.ip-hero--listing .ip-hero-inner {
  padding-block: clamp(1.75rem, 3.4vw, 2.75rem) clamp(2.25rem, 4.5vw, 3.5rem);
}
.ip-hero--listing .ip-hero-title { max-width: 22ch; }
.ip-hero--listing .ip-hero-lede { max-width: 62ch; }

/* Розгорнутий SEO-текст категорії лишається читабельним на темному тлі. */
.ip-hero--listing .ip-hero-copy > p {
  max-width: 62ch;
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
}
.ip-hero--listing .ip-hero-copy > p strong { color: #fff; font-weight: 650; }
.ip-hero--listing .ip-hero-copy h2 {
  margin: 1.6rem 0 .5rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ip-blush);
}
.ip-hero--listing .ip-hero-copy h3 {
  margin: 1.2rem 0 .4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
}
.ip-hero--listing .ip-hero-copy ul { max-width: 62ch; margin: .5rem 0 0 1.1rem; }
.ip-hero--listing .ip-hero-copy li {
  margin: .3rem 0;
  line-height: 1.7;
  list-style: disc;
  color: rgba(255, 255, 255, .8);
}
.ip-hero--listing .ip-hero-copy li strong,
.ip-hero--listing .ip-hero-copy li b { color: #fff; }

.ip-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: clamp(1.3rem, 2.4vw, 1.8rem);
}
.ip-hero-chips a {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--ip-glass);
  border: 1px solid var(--ip-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.ip-hero-chips a:hover {
  background: var(--ip-glass-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. HERO — варіант для статей блогу (фото + та сама темна основа)
   ───────────────────────────────────────────────────────────────────────── */

.ip-hero--article { min-height: clamp(19rem, 46vh, 30rem); display: flex; align-items: flex-end; }
.ip-hero--article .ip-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ip-hero--article::before {
  background-image:
    linear-gradient(to top, rgba(42, 30, 28, .92) 0%, rgba(42, 30, 28, .62) 45%, rgba(42, 30, 28, .34) 100%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 7px);
  opacity: 1;
}
.ip-hero--article .ip-hero-inner {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}
.ip-hero--article .ip-hero-title { max-width: 24ch; }
/* Підпис авторства — E-E-A-T-сигнал, тому має виглядати як частина обкладинки,
   а не як другий рядок хлібних крихт (саме так він читався раніше). */
.ip-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .65rem;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}
.ip-hero-meta > span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--ip-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ip-hero-meta svg { width: 15px; height: 15px; color: var(--ip-sand); flex: 0 0 auto; }
.ip-hero-meta .ip-hero-author {
  gap: .55rem;
  padding-left: .55rem;
  background: linear-gradient(100deg, rgba(224, 142, 121, .28), rgba(255, 255, 255, .08));
  border-color: rgba(245, 186, 156, .34);
  color: #fff;
}
.ip-hero-meta .ip-hero-author strong { color: #fff; font-weight: 800; }
.ip-hero-meta .ip-hero-author > span {
  color: rgba(255, 255, 255, .68);
  font-weight: 500;
}
.ip-hero-meta .ip-hero-author > span::before { content: '·'; margin-right: .45rem; opacity: .6; }
@media (max-width: 560px) {
  .ip-hero-meta .ip-hero-author > span { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. Верхній банер — один вигляд на всіх сторінках
   Раніше: на головній мокко-градієнт, на решті сайту — малиновий.
   ───────────────────────────────────────────────────────────────────────── */

.ip-topbar,
#unified-promo-banner {
  background: linear-gradient(90deg, #8b5a52 0%, #c98c77 48%, #8f6a60 100%);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.ip-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem;
  text-align: center;
}
.ip-topbar svg { width: 16px; height: 16px; }
.ip-topbar b { font-weight: 800; }
.ip-topbar [data-shipping-banner] { display: inline-flex; align-items: center; gap: .4rem; }
/* Досягнутий поріг безкоштовної доставки — єдиний випадок зміни кольору. */
.ip-topbar-win,
#unified-promo-banner.ip-topbar-win {
  background: linear-gradient(90deg, #2f7d5b 0%, #4aa37a 48%, #2f7d5b 100%);
}

/* ─────────────────────────────────────────────────────────────────────────
   5. Кошик — однакова панель на головній і на статичних сторінках
   ───────────────────────────────────────────────────────────────────────── */

.cart-panel,
#cart-panel {
  background: linear-gradient(180deg, #fffdfc 0%, #fff7f3 100%);
  box-shadow: -26px 0 70px rgba(42, 30, 28, .22);
}
.cart-panel header,
#cart-panel > div:first-child {
  background: linear-gradient(100deg, var(--ip-ink) 0%, var(--ip-ink-2) 100%);
  border-bottom: 0;
  color: #fff;
  padding: 1.05rem 1.15rem;
}
.cart-panel header h2,
#cart-panel > div:first-child h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.cart-panel header .cart-close,
#cart-panel > div:first-child button {
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-weight: 700;
  transition: background .18s ease, color .18s ease;
}
.cart-panel header .cart-close:hover,
#cart-panel > div:first-child button:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.cart-panel .cart-total-line b,
#cart-panel [data-cart-total] { color: var(--ip-terracotta-deep); }

.cart-panel .checkout-open,
.cart-panel .primary {
  background: linear-gradient(100deg, var(--ip-apricot) 0%, #c86e58 100%);
  box-shadow: 0 14px 32px rgba(200, 110, 88, .34);
  border: 0;
  color: #fff;
  font-weight: 800;
}
.cart-panel .checkout-open:hover:not(:disabled),
.cart-panel .primary:hover:not(:disabled) { transform: translateY(-1px); }

/* ─────────────────────────────────────────────────────────────────────────
   6. Плаваючі кнопки — однакові на головній і на статичних сторінках.
   На головній права кнопка була зламана: у контейнері 24×24 з overflow:hidden
   лежала іконка 32×32, тож стрілку «нагору» обрізало.
   ───────────────────────────────────────────────────────────────────────── */

.ip-fab {
  position: fixed;
  bottom: 1.25rem;
  z-index: 70;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(201, 140, 119, .78), rgba(183, 110, 93, .84));
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 18px 42px rgba(82, 55, 50, .28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ip-fab:hover {
  background: linear-gradient(135deg, rgba(201, 140, 119, .95), rgba(183, 110, 93, 1));
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(82, 55, 50, .36);
}
.ip-fab svg { width: 24px; height: 24px; }
.ip-fab-left, .ai-fab { left: 1.25rem; }
.ip-fab-right { right: 1.25rem; }

/* Дві іконки в одній кнопці: Telegram угорі сторінки, стрілка — після прокрутки. */
.ip-fab-right { position: fixed; }
.ip-fab-right .fab-ic {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: transform .3s ease, opacity .2s ease;
}
.ip-fab-right .fab-send { transform: none; opacity: 1; }
.ip-fab-right .fab-arrow { transform: rotate(45deg) scale(.5); opacity: 0; }
.ip-fab-right.show-arrow .fab-send { transform: rotate(-45deg) scale(.5); opacity: 0; }
.ip-fab-right.show-arrow .fab-arrow { transform: none; opacity: 1; }

@media (max-width: 480px) {
  .ip-fab { width: 50px; height: 50px; bottom: 1rem; }
  .ip-fab-left, .ai-fab { left: 1rem; }
  .ip-fab-right { right: 1rem; }
  .ip-fab svg { width: 21px; height: 21px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   7. Доступність і мобільні
   ───────────────────────────────────────────────────────────────────────── */

.ip-hero :where(a, button):focus-visible {
  outline: 3px solid var(--ip-sand);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (max-width: 640px) {
  .ip-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .ip-hero-stats dt { font-size: 1.25rem; }
  .ip-hero-stats dd { font-size: .68rem; }
  .ip-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-hero-eyebrow::before { animation: none; }
  .ip-btn, .ip-hero-usp li, .ip-hero-chips a { transition: none; }
}