/* ============================================
   HAMADA BAKERY — Typography System
   Fluid scaling via clamp()
   min(mobile) → preferred(fluid) → max(desktop)
   ============================================ */

:root {
  /* Hero heading: 56px mobile → 96px desktop (плавно і виразно навіть на середніх екранах) */
  --text-hero: clamp(56px, 6vw + 16px, 96px);

  /* Section titles: 44px → 72px */
  --text-section: clamp(44px, 4vw + 16px, 72px);

  /* Card titles: 21px → 25px */
  --text-card-title: clamp(21px, 1.2vw + 10px, 25px);

  /* Ціни: 28px → 34px (золоті, виразні, читабельні) */
  --text-price: clamp(28px, 1.2vw + 16px, 34px);

  /* Navbar logo: 22px → 30px */
  --text-logo: clamp(22px, 1.5vw + 10px, 30px);

  /* Navbar links: 15px → 17px */
  --text-nav: clamp(15px, 0.8vw + 8px, 17px);

  /* Body text: 15px → 17px */
  --text-body: clamp(15px, 0.6vw + 8px, 17px);

  /* Descriptions (card): 14px → 15px */
  --text-desc: clamp(14px, 0.5vw + 8px, 15px);

  /* Chips / labels / categories: 13px → 14px */
  --text-chip: clamp(13px, 0.4vw + 8px, 14px);

  /* Social proof strip: 15px → 16px */
  --text-proof: clamp(15px, 0.5vw + 8px, 16px);

  /* Copyright / legal: 13px (фіксований мінімум) */
  --text-legal: 13px;
}

/* --- Застосування --- */

/* Hero */
.hero-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  line-height: 1.05;
}

.hero-title__ivory {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 700;
  font-style: italic;
  color: #FAF6F0;
  letter-spacing: -0.01em;
}

.hero-title__caramel {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 700;
  font-style: italic;
  color: #C4956A;
  letter-spacing: -0.01em;
}

.hero-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  color: #FAF6F0;
  opacity: 0.85;
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Section titles */
.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--text-section);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #E8D5B0;
}

/* Navbar logo */
.navbar-logo,
.navbar__logo,
.logo-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--text-logo);
  font-weight: 700;
  font-style: italic;
  color: #FAF6F0;
  white-space: nowrap;
}

/* Navbar links */
.navbar__links a,
.nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-nav);
  font-weight: 500;
  color: #FAF6F0;
  opacity: 0.9;
}

/* Card title */
.product-card__title,
.card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--text-card-title);
  font-weight: 600;
  font-style: italic;
  color: #E8D5B0;
  line-height: 1.2;
}

/* Card description */
.product-card__desc,
.card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-desc);
  color: #9CA3AF;
  line-height: 1.55;
}

/* Card category label */
.product-card__category,
.card-category {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-chip);
  font-weight: 600;
  color: #C4956A;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Price */
.product-card__price,
.price-amount {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: var(--text-price);
  font-weight: 400;
  color: #C4956A;
  letter-spacing: -0.01em;
}

/* Price unit "за 6 шт." */
.product-card__unit,
.price-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-chip);
  color: #E8D5B0;
  opacity: 0.8;
}

/* Chips */
.chip {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-chip);
  font-weight: 400;
  color: #E8D5B0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(196, 149, 106, 0.12);
  border: 1px solid rgba(196, 149, 106, 0.45);
}

/* Body text */
.body-text {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-body);
  color: #FAF6F0;
  line-height: 1.65;
}

/* Social proof strip */
.social-proof {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-proof);
  color: #FAF6F0;
  letter-spacing: 0.02em;
}

/* Footer links */
.footer__links a {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-desc);
  color: #FAF6F0;
  opacity: 0.8;
}

/* Footer headings */
.footer__col-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  font-style: italic;
  color: #E8D5B0;
}

/* Copyright */
.footer__bottom {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-legal);
  color: #6B7280;
}

/* Filter tabs */
.filter-tab,
.pill-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.2vw, 15px);
  font-weight: 500;
  padding: clamp(8px, 0.8vw, 10px) clamp(16px, 1.6vw, 22px);
}

/* Form labels */
.form-field label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.1vw, 14px);
  color: #FAF6F0;
  opacity: 0.8;
  letter-spacing: 0.03em;
}

/* Form inputs */
.form-field input,
.form-field textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.3vw, 16px);
  color: #FAF6F0;
}

/* Cart drawer title */
.cart-drawer__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 700;
  font-style: italic;
  color: #E8D5B0;
}

/* Cart item name */
.cart-item__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  font-style: italic;
  color: #E8D5B0;
}

/* Cart total */
.cart-drawer__total-price {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(26px, 2.5vw, 32px);
  color: #E8D5B0;
}

/* ============================================
   MOBILE OVERRIDES (≤ 768px)
   clamp() handles most cases automatically.
   These are safety nets for edge cases.
   ============================================ */

@media (max-width: 768px) {
  /* Navbar на мобайлі */
  .navbar,
  .site-header {
    padding: 14px 20px;
  }

  /* Hero — щільніший line-height на малих екранах */
  .hero-title {
    line-height: 1.0;
    letter-spacing: -0.03em;
  }

  /* Section title — трохи менший відступ */
  .section-title {
    margin-bottom: 24px;
  }

  /* Картки — повна ширина в 1 колонку */
  .products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Chips — переносяться */
  .product-card__chips,
  .card-badges {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Footer — 2 колонки замість 4 */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Footer logo менший на мобайлі */
  .footer__logo {
    font-size: 28px;
  }

  /* Кошик — повний екран знизу */
  .cart-drawer {
    width: 100vw;
    border-radius: 20px 20px 0 0;
    top: auto;
    bottom: 0;
    height: 90vh;
    transform: translateY(100%);
  }

  .cart-drawer--open,
  .cart-drawer.open {
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  /* Картки — ще компактніші */
  .product-card__body,
  .card-content {
    padding: 14px 16px;
  }

  /* Фільтри — горизонтальний скрол */
  .filters-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filters-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-tabs,
  .filter-pills {
    display: flex;
    gap: 8px;
    padding: 0 20px;
    white-space: nowrap;
  }

  /* Footer — 1 колонка */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}