/*
Theme Name: Shoptimizer Child Theme
Theme URI: 
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   budewell.com.ua — Стилі головної сторінки (консолідовано)
   Версія: 1.0.4
   Складено з: палітра + sections_base + Hero + H2-1…H2-8

   ОПТИМІЗАЦІЇ ПРОТИ ОКРЕМИХ ФАЙЛІВ:
   • повторювані кольори винесено в токени (:root)
   • центрування заголовків/тексту згруповано в одне правило
   • центрування кнопок перенесено в базу .hp-section
   • реюз-компоненти (feature-grid, картки-модифікатори) зібрано в один блок

   Drop-in заміна: працює з уже вставленою розміткою, переклеювати не треба.
   Вставляти у style.css дочірньої теми ПІД шапкою-коментарем теми.
   ============================================================ */


/* ============================================================
   1. ТОКЕНИ
   ============================================================ */
:root {
  /* Бренд (золота схема — клон теми WordPress, primary #dc9814) */
  --bw-primary:        #DC9814; /* акцент, кнопки, посилання */
  --bw-primary-bright: #FFAC33; /* яскравий помаранчевий — hover кнопок, акценти */
  --bw-secondary:      #F2BE54; /* м?який золотий компаньйон, фон-колонка Hero */
  --bw-surface:        #FDF5E3; /* фон тёплих секцій, картки-контраст */
  --bw-text:           #2C2008; /* основний текст */
  --bw-muted:          #6E4F12; /* другорядний текст */
  --bw-base:           #FFFFFF; /* білий фон секцій */

  /* Службові */
  --bw-border:         #EFE2C2; /* стандартна рамка карток */
  --bw-border-strong:  #E6D4A6; /* рамка контрастних карток */
  --bw-muted-2:        #8E7038; /* підписи галереї, опис схеми */
  --bw-desc:           #6B5626; /* опис у feature-item */
  --bw-surface-2:      #F2E6C9; /* «поверхневий» блок схеми H2-1 */
  --bw-fact-border:    #F3E8C9; /* розділювачі смуги фактів */

  /* Контрастні «on-» (розділено для світлого primary) */
  --bw-on-primary:     #2C2008; /* текст на кнопках: ТЕМНИЙ, бо primary світлий */
  --bw-on-dark:        #FFFFFF; /* текст на темних підкладках (підписи фото) */

  /* CTA-акцент «Замовити» (зелений із теми) */
  --bw-cta:            #3BB54A; /* зелена кнопка замовлення */
  --bw-cta-hover:      #34A341; /* темніший зелений для hover */
  --bw-on-cta:         #FFFFFF; /* текст на зеленій кнопці */

  /* Тіні / затемнення */
  --bw-shadow:         rgba(44,32,8,0.12); /* тінь карток при наведенні */
  --bw-scrim:          rgba(20,14,2,0.72); /* затемнення під фото в галереї */
}


/* ============================================================
   2. SECTIONS BASE — спільний шар секцій
   ============================================================ */
.hp-section {
  padding-block: clamp(44px, 6vw, 84px);
  padding-inline: clamp(16px, 4vw, 24px); /* бічні поля при edge-to-edge фоні */
}

.hp-section--white   { background: var(--bw-base); }
.hp-section--surface { background: var(--bw-surface); }

.hp-section h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  color: var(--bw-text);
  line-height: 1.2;
  margin-bottom: 16px;
}

.hp-section .hp-lead {
  font-size: 16px;
  color: var(--bw-muted);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 28px;
}

/* CTA-кнопки секцій (Hero + hp-section) */
.hp-section .wp-block-button__link,
.hero-section .wp-block-button__link {
  border-radius: 6px;
  font-weight: 500;
  padding: 12px 24px;
  transition: background 0.2s, opacity 0.2s;
}
.hp-section .wp-block-button.is-style-fill .wp-block-button__link,
.hero-section .wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--bw-primary);
  color: var(--bw-on-primary);
}
.hp-section .wp-block-button.is-style-fill .wp-block-button__link:hover,
.hero-section .wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--bw-primary-bright);
  opacity: 1;
}
.hp-section .wp-block-button.is-style-outline .wp-block-button__link,
.hero-section .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--bw-primary);
  border-color: var(--bw-primary);
}
.hp-section .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hero-section .wp-block-button.is-style-outline .wp-block-button__link:hover {
  opacity: 0.85;
}

/* Зелена CTA-кнопка «Замовити».
   Застосувати: блок Button > Advanced > Additional CSS class(es) > cta-green */
.hp-section .wp-block-button.cta-green .wp-block-button__link,
.hero-section .wp-block-button.cta-green .wp-block-button__link {
  background: var(--bw-cta);
  color: var(--bw-on-cta);
  border-color: var(--bw-cta);
}
.hp-section .wp-block-button.cta-green .wp-block-button__link:hover,
.hero-section .wp-block-button.cta-green .wp-block-button__link:hover {
  background: var(--bw-cta-hover);
  opacity: 1;
}

/* Кнопки в усіх контентних секціях — по центру (дедуп з 6 секцій) */
.hp-section .wp-block-buttons {
  justify-content: center;
  gap: 12px;
}


/* ============================================================
   3. ЦЕНТРУВАННЯ заголовка + вступу
   (згруповано: H2-2, H2-3, H2-4, H2-5, H2-6, H2-7, H2-8)
   ============================================================ */
.palette-section h2,
.materials-section h2,
.quality-section h2,
.pigments-section h2,
.formats-section h2,
.support-section h2,
.gallery-section h2 {
  text-align: center;
}

.palette-section .hp-lead,
.materials-section .hp-lead,
.quality-section .hp-lead,
.pigments-section .hp-lead,
.formats-section .hp-lead,
.support-section .hp-lead,
.gallery-section .hp-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pigments-section .hp-lead {
  max-width: 760px;
}


/* ============================================================
   4. РЕЮЗ-КОМПОНЕНТИ
   ============================================================ */

/* --- Сітка тез з іконками (H2-4, H2-5, H2-6, H2-7) --- */
.feature-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); }

.feature-item {
  background: var(--bw-base);
  border-radius: 10px;
  padding: 20px 18px;
  border: 1px solid var(--bw-border);
}

.feature-item__icon {
  display: inline-block;
  color: var(--bw-primary);
  margin-bottom: 10px;
  line-height: 1;
}

.feature-item__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--bw-text);
  margin: 0 0 6px;
}

.feature-item__desc {
  font-size: 13px;
  color: var(--bw-desc);
  line-height: 1.5;
  margin: 0;
}

.feature-item__desc sub { font-size: 0.78em; }

/* Модифікатор: контрастні картки (охровий фон на світлих секціях) */
.feature-grid--contrast .feature-item {
  background: var(--bw-surface);
  border-color: var(--bw-border-strong);
}

/* Модифікатор: клікабельна картка-посилання */
.feature-item--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.feature-item--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px var(--bw-shadow);
  border-color: var(--bw-primary);
}
.feature-item--link .feature-item__title { color: var(--bw-text); }

/* Модифікатор: стан «Незабаром» */
.feature-item--soon { opacity: 0.82; }
.feature-item__badge {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  background: var(--bw-base);
  color: var(--bw-primary);
  border: 1px solid var(--bw-border-strong);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .feature-grid--3,
  .feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .feature-grid--3,
  .feature-grid--4 { grid-template-columns: 1fr; }
}


/* ============================================================
   5. HERO
   ============================================================ */
.hero-section {
  background: var(--bw-surface);
  padding: 0;
}

.hero-section > .wp-block-columns {
  gap: 0;
  margin-bottom: 0;
}
.hero-section > .wp-block-columns > .wp-block-column:first-child {
  padding: 56px 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-section > .wp-block-columns > .wp-block-column:last-child {
  background: var(--bw-secondary);
  min-height: 360px;
}

.hero-section .hero-image { margin: 0; height: 100%; }
.hero-section .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-section .hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bw-primary);
  margin-bottom: 14px;
}
.hero-section h1 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--bw-text);
  margin-bottom: 16px;
}
.hero-section .hero-sub {
  font-size: 15px;
  color: var(--bw-muted);
  line-height: 1.65;
  margin-bottom: 32px;
}

/* Hero-кнопки: ліворуч, власний gap (перебиває центрування секцій) */
.hero-section .wp-block-buttons {
  justify-content: flex-start;
  gap: 10px;
}
.hero-section .wp-block-button__link { font-size: 15px; }

/* Смуга міні-фактів */
.facts-bar {
  background: var(--bw-base);
  border-top: 1px solid var(--bw-border);
}
.facts-bar .wp-block-columns { margin-bottom: 0; gap: 0; }
.facts-bar .wp-block-column {
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid var(--bw-fact-border);
}
.facts-bar .wp-block-column:last-child { border-right: none; }
.facts-bar .fact-number {
  font-size: 26px;
  font-weight: 500;
  color: var(--bw-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.facts-bar .fact-label {
  font-size: 12px;
  color: var(--bw-muted);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .hero-section > .wp-block-columns { flex-direction: column; }
  .hero-section > .wp-block-columns > .wp-block-column:first-child { padding: 36px 24px 32px; }
  .hero-section > .wp-block-columns > .wp-block-column:last-child { min-height: 220px; }
  .facts-bar .wp-block-column { padding: 14px 8px; }
  .facts-bar .fact-number { font-size: 20px; }
}


/* ============================================================
   6. H2-1 — Що таке пігменти (self-contained, без hp-section)
   ============================================================ */
.info-section {
  background: var(--bw-base);
  padding: 56px clamp(16px, 4vw, 24px);
}
.info-section > .wp-block-columns { gap: 40px; margin-bottom: 0; }
.info-section h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  color: var(--bw-text);
  line-height: 1.2;
  margin-bottom: 16px;
}
.info-section p {
  font-size: 15px;
  color: var(--bw-muted);
  line-height: 1.7;
  margin-bottom: 14px;
}

.info-points { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.info-point { display: flex; gap: 12px; align-items: flex-start; }
.info-point__icon { color: var(--bw-primary); flex-shrink: 0; line-height: 1; margin-top: 2px; }
.info-point__text { font-size: 14px; color: var(--bw-muted); line-height: 1.5; margin: 0; }
.info-point__text strong { color: var(--bw-text); font-weight: 500; }
.info-point__text a { color: var(--bw-primary); text-decoration: none; font-weight: 500; }
.info-point__text a:hover { text-decoration: underline; }

.info-visual {
  background: var(--bw-surface);
  border-radius: 12px;
  padding: 32px 28px;
}
.info-schema__title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-primary);
  text-align: center;
  margin-bottom: 18px;
}
.info-schema__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-schema__card {
  background: var(--bw-base);
  border-radius: 10px;
  padding: 14px;
  border: 1px solid var(--bw-border);
  text-align: center;
}
.info-schema__block {
  height: 64px;
  border-radius: 6px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.info-schema__block--mass { background: var(--bw-primary); }
.info-schema__block--surface { background: var(--bw-surface-2); }
.info-schema__block--surface::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background: var(--bw-primary);
}
.info-schema__label { font-size: 13px; font-weight: 500; color: var(--bw-text); margin-bottom: 2px; }
.info-schema__desc { font-size: 11px; color: var(--bw-muted-2); line-height: 1.4; }

@media (max-width: 768px) {
  .info-section { padding: 36px clamp(16px, 4vw, 24px); }
  .info-section > .wp-block-columns { flex-direction: column; gap: 24px; }
  .info-visual { padding: 24px 20px; }
}


/* ============================================================
   7. H2-2 — Палітра кольорів
   ============================================================ */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0 0 30px;
}
.palette-card {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bw-border);
  background: var(--bw-base);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.palette-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px var(--bw-shadow);
}
.palette-swatch {
  display: flex;
  align-items: flex-end;
  height: 96px;
  padding: 10px;
  font-size: 11px;
  font-weight: 500;
}
.palette-name {
  display: block;
  padding: 12px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--bw-text);
}

@media (max-width: 768px) { .palette-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .palette-grid { grid-template-columns: 1fr; } }


/* ============================================================
   8. H2-3 — Матеріали
   ============================================================ */
.mat-tier-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-primary);
  margin: 0 0 14px;
}
.mat-grid { display: grid; gap: 14px; margin-bottom: 30px; }
.mat-grid--high   { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mat-grid--medium { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.mat-card {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bw-border);
  text-decoration: none;
}
.mat-card__img { display: block; }
.mat-card__img img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.mat-grid--high .mat-card__img img { height: 130px; }
.mat-grid--medium .mat-card__img img { height: 96px; }
.mat-card:hover .mat-card__img img { transform: scale(1.05); }

.mat-card__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 14px 10px;
  background: linear-gradient(to top, var(--bw-scrim), transparent);
}
.mat-card__name { color: var(--bw-on-dark); font-size: 14px; font-weight: 500; }
.mat-grid--medium .mat-card__name { font-size: 13px; }

@media (max-width: 768px) {
  .mat-grid--high,
  .mat-grid--medium { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .mat-grid--high,
  .mat-grid--medium { grid-template-columns: 1fr; }
}


/* ============================================================
   9. H2-4 — Критерії якості
   ============================================================ */
.quality-highlight {
  background: var(--bw-base);
  border-radius: 10px;
  border-left: 4px solid var(--bw-primary);
  padding: 22px 24px;
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.quality-highlight__badge {
  flex-shrink: 0;
  background: var(--bw-surface);
  color: var(--bw-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 2px;
}
.quality-highlight__text { font-size: 14px; color: var(--bw-muted); line-height: 1.6; margin: 0; }
.quality-highlight__text strong { color: var(--bw-text); font-weight: 500; }

@media (max-width: 560px) {
  .quality-highlight { flex-direction: column; gap: 12px; }
}


/* ============================================================
   10. H2-8 — Галерея (masonry)
   ============================================================ */
.gallery-masonry { column-count: 3; column-gap: 14px; }
@media (max-width: 768px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 480px) { .gallery-masonry { column-count: 1; } }

.gallery-item {
  break-inside: avoid;
  margin: 0 0 14px;
  background: var(--bw-base);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bw-border);
}
.gallery-item img { display: block; width: 100%; height: auto; }
.gallery-item figcaption { padding: 12px 14px; }
.gallery-caption__color { display: block; font-size: 13px; font-weight: 500; color: var(--bw-text); }
.gallery-caption__use { display: block; font-size: 12px; color: var(--bw-muted-2); margin-top: 2px; }

/* H2-5, H2-6, H2-7 спеціального CSS не мають — повністю на реюз-компонентах */