/* ═══════════════════════════════════════
   HOME PAGE (редизайн, серпень 2026) — токени спільні з novo.css
═══════════════════════════════════════ */

/* На інших сторінках шрифт Manrope задає .page-wrap — головна цю обгортку не використовує */
.hero, .trust-strip, .cat-section, .prow-section, .brand-cta, .value-section {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Hero */
.hero {
  max-width: 1360px; margin: 20px auto 0; padding: 0;
}
.hero-inner {
  background: linear-gradient(120deg, #16324f 0%, #1f84db 100%);
  border-radius: var(--r); padding: 48px 44px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: center;
  position: relative; overflow: hidden; min-height: 280px;
}
.hero-inner::after {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.hero-eyebrow { color: #a9d6f7; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.hero-title { color: #fff; font-size: 32px; font-weight: 800 !important; line-height: 1.25; margin-bottom: 14px; max-width: 480px; }
.hero-sub { color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.6; max-width: 440px; margin-bottom: 24px; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-btn-primary {
  height: 48px; padding: 0 24px; background: #fff; color: var(--primary);
  border: none; border-radius: var(--r-xs); font-size: 14.5px; font-weight: 800;
  display: flex; align-items: center; gap: 8px; transition: var(--tr);
  cursor: pointer; outline: none;
}
.hero-btn-primary:hover, .hero-btn-primary:focus { background: #eef6fc; text-decoration: none; }
.hero-btn-ghost {
  height: 48px; padding: 0 22px; background: rgba(255,255,255,.12); color: #fff;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--r-xs);
  font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px;
  transition: var(--tr); cursor: pointer; outline: none;
}
.hero-btn-ghost:hover, .hero-btn-ghost:focus { background: rgba(255,255,255,.2); text-decoration: none; }
.hero-stats { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.hero-stat { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.1); border-radius: var(--r-sm); padding: 14px 18px; backdrop-filter: blur(6px); }
.hero-stat-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; }
.hero-stat-icon .icon { color: #fff; }
.hero-stat-num { color: #fff; font-size: 18px; font-weight: 800; line-height: 1.2; }
.hero-stat-lbl { color: rgba(255,255,255,.75); font-size: 12px; font-weight: 500; }
@media(max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; padding: 32px 20px; }
  .hero-title { font-size: 24px; }
  .hero-stats { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .hero-stats::-webkit-scrollbar { display: none; }
  .hero-stat { flex-shrink: 0; min-width: 190px; }
}

/* Trust strip under hero */
.trust-strip { max-width: 1360px; margin: 16px auto 0; padding: 0; background: #fff; }
.trust-strip-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: var(--white); border-radius: var(--r-sm); padding: 4px;
}
.ts-item { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: var(--r-xs); background: var(--light); }
.ts-icon { font-size: 20px; flex-shrink: 0; }
.ts-item strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--dark); }
.ts-item span { font-size: 11.5px; color: var(--mid); }
@media(max-width: 900px) { .trust-strip-inner { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 560px) { .trust-strip-inner { grid-template-columns: 1fr; } }

/* Category grid */
.cat-section { max-width: 1360px; margin: 40px auto 0; padding: 0; background: #fff; }
/* .section-head/.section-title/.section-link спільні з product.blade.php ("Схожі товари") — винесено в novo.css */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media(max-width: 1023px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-tile {
  background: var(--white); border-radius: var(--r-sm); box-shadow: var(--shadow);
  padding: 20px 16px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; transition: var(--tr);
}
.cat-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.cat-tile-icon {
  width: 54px; height: 54px; border-radius: 50%; background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary);
}
.cat-tile-name { font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.35; }
.cat-tile-cnt { font-size: 11px; color: var(--mid); }

/* Product rows (.prow-section/.prow-scroll) — винесено в novo.css: однакова
   карусель-картка тепер і на головній, і в "Схожі товари" на сторінці товару */

/* Brand / custom logo banner */
.brand-cta { max-width: 1360px; margin: 44px auto 0; padding: 0; background: #fff; }
.brand-cta-inner {
  background: var(--dark); border-radius: var(--r);
  padding: 40px 44px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 24px; align-items: center;
  position: relative; overflow: hidden;
}
.brand-cta-inner::before {
  content: ''; position: absolute; left: -40px; bottom: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,120,0,.12);
}
.brand-cta-eyebrow { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.brand-cta-title { color: #fff; font-size: 24px; font-weight: 800 !important; line-height: 1.3; margin-bottom: 10px; max-width: 460px; }
.brand-cta-sub { color: rgba(255,255,255,.65); font-size: 13.5px; line-height: 1.6; max-width: 440px; margin-bottom: 20px; }
.brand-cta-btn {
  height: 48px; padding: 0 24px; background: var(--orange); color: #fff;
  border: none; border-radius: var(--r-xs); font-size: 14.5px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px; transition: var(--tr); width: fit-content;
  cursor: pointer; outline: none;
}
.brand-cta-btn:hover, .brand-cta-btn:focus { background: #e56e00; text-decoration: none; }
.brand-cta-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; }
.brand-cta-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xs); background: #fff; }
@media(max-width: 860px) {
  .brand-cta-inner { grid-template-columns: 1fr; padding: 30px 20px; }
  .brand-cta-imgs { grid-template-columns: repeat(4, 1fr); }
}

/* Value props row */
.value-section { max-width: 1360px; margin: 44px auto 0; padding: 0 0 40px; background: #fff; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media(max-width: 860px) { .value-grid { grid-template-columns: 1fr; } }
.value-card { background: var(--white); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 24px; }
.value-icon { width: 46px; height: 46px; border-radius: var(--r-xs); background: var(--green-bg); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 14px; }
.value-title { font-size: 15px; font-weight: 800; margin-bottom: 7px; }
.value-desc { font-size: 13px; color: var(--mid); line-height: 1.6; }