/* «Благодать» — стилі компонентів (префікс bl-). Використовуються JSX-компонентами системи. */

/* ── Layout utilities ── */
.bl-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.bl-section { padding: var(--space-7) 0; }

/* ── Button ── */
.bl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-comfort);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bl-btn--lg { min-height: var(--tap-large); padding: var(--space-3) var(--space-6); }
.bl-btn--full { width: 100%; }
.bl-btn:disabled, .bl-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.bl-btn--primary { background: var(--action-primary); color: #fff; }
.bl-btn--primary:hover:not(:disabled) { background: var(--action-primary-hover); color: #fff; }
.bl-btn--primary:active:not(:disabled) { background: var(--action-primary-active); }

.bl-btn--secondary { background: var(--surface-card); color: var(--teal-700); border-color: var(--teal-600); }
.bl-btn--secondary:hover:not(:disabled) { background: var(--teal-50); color: var(--teal-700); }
.bl-btn--secondary:active:not(:disabled) { background: var(--teal-100); }

.bl-btn--ghost { background: transparent; color: var(--teal-700); }
.bl-btn--ghost:hover:not(:disabled) { background: var(--teal-50); color: var(--teal-700); }
.bl-btn--ghost:active:not(:disabled) { background: var(--teal-100); }

.bl-btn--phone { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-200); }
.bl-btn--phone:hover:not(:disabled) { background: var(--teal-100); color: var(--teal-800); }
.bl-btn--phone:active:not(:disabled) { background: var(--teal-200); }

/* ── Badge ── */
.bl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}
.bl-badge--success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.bl-badge--order { background: var(--sand-100); color: var(--ink-700); border-color: var(--sand-200); }
.bl-badge--neutral { background: var(--paper); color: var(--ink-700); border-color: var(--sand-200); }

/* ── TrustBadge ── */
.bl-trust {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--heritage-tint);
  border-radius: var(--radius-md);
}
.bl-trust__icon { color: var(--teal-700); flex: none; display: flex; }
.bl-trust__label { font-weight: var(--weight-semibold); font-size: var(--text-small); color: var(--ink-900); line-height: 1.3; }
.bl-trust__sub { font-size: var(--text-small); color: var(--ink-700); line-height: 1.3; }

/* ── Input / Select ── */
.bl-field { display: flex; flex-direction: column; gap: var(--space-2); }
.bl-field__label { font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink-900); }
.bl-field__hint { font-size: var(--text-small); color: var(--ink-700); }
.bl-input, .bl-select {
  min-height: var(--tap-comfort);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  color: var(--ink-900);
  width: 100%;
}
.bl-input::placeholder { color: var(--ink-500); }
.bl-input:hover, .bl-select:hover { border-color: var(--ink-700); }
.bl-input:focus-visible, .bl-select:focus-visible { border-color: var(--teal-600); }
.bl-input--error, .bl-select--error { border-color: var(--error-border); border-width: 2px; }
.bl-field__error { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-small); color: var(--error-text); }
.bl-select-wrap { position: relative; }
.bl-select { appearance: none; padding-right: var(--space-7); }
.bl-select-wrap__chevron { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-700); display: flex; }

/* ── SiteHeader ── */
.bl-header { background: var(--paper); border-bottom: 1px solid var(--border-subtle); }
.bl-header__top { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-4) 0; }
.bl-wordmark { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 28px; color: var(--teal-700); text-decoration: none; line-height: 1.1; }
.bl-wordmark:hover { color: var(--teal-800); }
.bl-wordmark__sub { display: block; font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-small); color: var(--ink-700); margin-top: 2px; }
.bl-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 20px; font-weight: var(--weight-semibold); color: var(--ink-900); text-decoration: none; min-height: var(--tap-min); }
.bl-header__phone:hover { color: var(--teal-700); }
.bl-header__phone-note { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--ink-700); }
.bl-header__nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) 0; }
.bl-header__navlink {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-size);
  color: var(--ink-900);
  text-decoration: none;
}
.bl-header__navlink:hover { background: var(--sand-50); color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; }
.bl-header__navlink[aria-current="page"] { color: var(--teal-700); font-weight: var(--weight-semibold); }
.bl-header__search { position: relative; flex: 1 1 260px; max-width: 380px; }
.bl-header__search .bl-input { padding-left: var(--space-7); }
.bl-header__search-icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--ink-700); display: flex; pointer-events: none; }

/* ── Breadcrumbs ── */
.bl-crumbs { padding: var(--space-3) 0; }
.bl-crumbs__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; font-size: var(--text-small); }
.bl-crumbs__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.bl-crumbs__link { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-1); color: var(--teal-700); }
.bl-crumbs__sep { color: var(--ink-500); display: flex; }
.bl-crumbs__current { color: var(--ink-700); padding: 0 var(--space-1); }

/* ── SiteFooter ── */
.bl-footer { background: var(--surface-footer); color: var(--text-on-dark); padding: var(--space-7) 0 var(--space-6); }
.bl-footer a { color: var(--link-on-dark); }
.bl-footer a:hover { color: #fff; }
.bl-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.bl-footer__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 20px; margin: 0 0 var(--space-3); color: #fff; }
.bl-footer__phone { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 22px; font-weight: var(--weight-semibold); color: #fff !important; text-decoration: none; min-height: var(--tap-min); }
.bl-footer__phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bl-footer__note { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid rgba(232, 241, 239, 0.25); font-size: var(--text-small); color: var(--link-on-dark); }

/* ── Фото-плейсхолдер (архівні фото низької якості → нова фотосесія) ── */
.bl-photo-ph {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--sand-50), var(--sand-50) 12px, var(--sand-100) 12px, var(--sand-100) 24px);
  border: 1px dashed var(--sand-300);
  color: var(--ink-700);
  font-size: var(--text-small);
  text-align: center;
}
.bl-photo-ph__label { background: var(--paper); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); }

/* ── ProductCard ── */
.bl-product-card {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.bl-product-card__photo { aspect-ratio: 4 / 3; border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; }
.bl-product-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); flex: 1; }
.bl-product-card__name { font-size: var(--text-body-size); font-weight: var(--weight-semibold); line-height: 1.35; color: var(--ink-900); margin: 0; }
.bl-product-card__price { font-size: var(--text-price); font-weight: var(--weight-semibold); color: var(--ink-900); }
.bl-product-card__price small { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--ink-700); }
.bl-product-card__cta { margin-top: auto; }

/* ── ProductTabs ── */
.bl-tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 2px solid var(--border-subtle); }
.bl-tabs__tab {
  min-height: var(--tap-comfort);
  padding: var(--space-2) var(--space-4);
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-body-size); font-weight: var(--weight-medium);
  color: var(--ink-700);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.bl-tabs__tab:hover { color: var(--teal-700); background: var(--sand-50); }
.bl-tabs__tab[aria-selected="true"] { color: var(--teal-700); font-weight: var(--weight-semibold); border-bottom-color: var(--teal-600); }
.bl-tabs__panel { padding: var(--space-5) 0; }

/* ── SizeTable ── */
.bl-size-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-size); }
.bl-size-table caption { text-align: left; font-size: var(--text-small); color: var(--ink-700); padding-bottom: var(--space-3); }
.bl-size-table th {
  background: var(--sand-100); color: var(--ink-900);
  font-weight: var(--weight-semibold); text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--sand-200);
}
.bl-size-table td { padding: var(--space-3) var(--space-4); border: 1px solid var(--sand-200); }
.bl-size-table tbody tr:nth-child(even) { background: var(--sand-50); }
.bl-size-table tbody tr:hover { background: var(--teal-50); }
.bl-size-table__size { font-weight: var(--weight-semibold); }

/* ── Callout ── */
.bl-callout {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
}
.bl-callout__icon { flex: none; display: flex; margin-top: 2px; }
.bl-callout__title { font-weight: var(--weight-semibold); margin: 0 0 var(--space-1); font-size: var(--text-body-size); }
.bl-callout__body { font-size: var(--text-small); margin: 0; max-width: var(--measure); }
.bl-callout--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.bl-callout--info { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }
.bl-callout--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }

/* ── Accordion ── */
.bl-accordion { border-top: 1px solid var(--border-subtle); }
.bl-accordion__item { border-bottom: 1px solid var(--border-subtle); }
.bl-accordion__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%; min-height: var(--tap-large);
  padding: var(--space-3) var(--space-2);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-body-size); font-weight: var(--weight-semibold);
  color: var(--ink-900); text-align: left;
}
.bl-accordion__header:hover { color: var(--teal-700); background: var(--sand-50); }
.bl-accordion__chevron { flex: none; color: var(--teal-700); display: flex; transition: transform 150ms ease; }
.bl-accordion__header[aria-expanded="true"] .bl-accordion__chevron { transform: rotate(180deg); }
.bl-accordion__panel { padding: 0 var(--space-2) var(--space-4); color: var(--ink-700); }
.bl-accordion__panel p { margin: 0 0 var(--space-2); }

/* ── ReviewCard ── */
.bl-review {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.bl-review__text { margin: 0; color: var(--ink-900); }
.bl-review__meta { display: flex; align-items: baseline; gap: var(--space-2); }
.bl-review__name { font-weight: var(--weight-semibold); color: var(--ink-900); }
.bl-review__city { font-size: var(--text-small); color: var(--ink-700); }

/* ── CheckoutStepper ── */
.bl-stepper { display: flex; flex-direction: column; gap: var(--space-5); }
.bl-stepper__step { display: flex; gap: var(--space-4); }
.bl-stepper__num {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-600); color: #fff;
  font-weight: var(--weight-semibold); font-size: var(--text-small);
}
.bl-stepper__content { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-2); }
.bl-stepper__title { font-size: var(--text-h3); font-weight: var(--weight-semibold); font-family: var(--font-body); margin: 4px 0; }
.bl-stepper__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.bl-radio {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-comfort);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-sm);
  cursor: pointer; background: var(--surface-card);
  font-size: var(--text-body-size);
}
.bl-radio:hover { border-color: var(--teal-600); }
.bl-radio--checked { border-color: var(--teal-600); background: var(--teal-50); }
.bl-radio input { width: 22px; height: 22px; accent-color: var(--teal-600); margin: 0; flex: none; }

/* ── CallbackForm ── */
.bl-callback {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.bl-callback__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 24px; margin: 0; }
.bl-callback__note { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--ink-700); }
.bl-callback__success { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--success-text); }