/* ============================================================
   BlueBird Tech — Base: reset, типографіка, контейнер, утиліти
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--bbt-font-sans);
  font-size: var(--bbt-body-md-size);
  line-height: var(--bbt-body-md-lh);
  color: var(--bbt-fg-primary);
  background: var(--bbt-bg-canvas);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  inline-size: 100%;
}

:focus-visible {
  outline: 2px solid var(--bbt-bg-accent);
  outline-offset: 2px;
}

.bbt-container {
  inline-size: 100%;
  max-inline-size: var(--bbt-container-max);
  margin-inline: auto;
  padding-inline: var(--bbt-container-pad);
}

@media (max-width: 767px) {
  .bbt-container {
    padding-inline: var(--bbt-container-pad-m);
  }
}

.bbt-display-md {
  font-size: var(--bbt-display-md-size);
  line-height: var(--bbt-display-md-lh);
  letter-spacing: var(--bbt-display-md-ls);
  font-weight: var(--bbt-display-weight);
}

.bbt-display-sm {
  font-size: var(--bbt-display-sm-size);
  line-height: var(--bbt-display-sm-lh);
  letter-spacing: var(--bbt-display-sm-ls);
  font-weight: var(--bbt-display-weight);
}

.bbt-heading-xl {
  font-size: var(--bbt-heading-xl-size);
  line-height: var(--bbt-heading-xl-lh);
  letter-spacing: var(--bbt-heading-xl-ls);
  font-weight: var(--bbt-heading-weight);
}

.bbt-heading-lg {
  font-size: var(--bbt-heading-lg-size);
  line-height: var(--bbt-heading-lg-lh);
  letter-spacing: var(--bbt-heading-lg-ls);
  font-weight: var(--bbt-heading-weight);
}

.bbt-heading-md {
  font-size: var(--bbt-heading-md-size);
  line-height: var(--bbt-heading-md-lh);
  letter-spacing: var(--bbt-heading-md-ls);
  font-weight: var(--bbt-heading-weight);
}

.bbt-heading-sm {
  font-size: var(--bbt-heading-sm-size);
  line-height: var(--bbt-heading-sm-lh);
  letter-spacing: var(--bbt-heading-sm-ls);
  font-weight: var(--bbt-heading-weight);
}

.bbt-heading-xs {
  font-size: var(--bbt-heading-xs-size);
  line-height: var(--bbt-heading-xs-lh);
  letter-spacing: var(--bbt-heading-xs-ls);
  font-weight: var(--bbt-heading-weight);
}

.bbt-title-lg {
  font-size: var(--bbt-title-lg-size);
  line-height: var(--bbt-title-lg-lh);
  letter-spacing: var(--bbt-title-lg-ls);
  font-weight: var(--bbt-title-lg-weight);
}

.bbt-title-md {
  font-size: var(--bbt-title-md-size);
  line-height: var(--bbt-title-md-lh);
  letter-spacing: var(--bbt-title-md-ls);
  font-weight: var(--bbt-title-md-weight);
}

.bbt-title-sm {
  font-size: var(--bbt-title-sm-size);
  line-height: var(--bbt-title-sm-lh);
  font-weight: var(--bbt-title-sm-weight);
}

.bbt-body-lg { font-size: var(--bbt-body-lg-size); line-height: var(--bbt-body-lg-lh); }
.bbt-body-md { font-size: var(--bbt-body-md-size); line-height: var(--bbt-body-md-lh); }
.bbt-body-sm { font-size: var(--bbt-body-sm-size); line-height: var(--bbt-body-sm-lh); }
.bbt-body-xs { font-size: var(--bbt-body-xs-size); line-height: var(--bbt-body-xs-lh); }
.bbt-body-md-strong { font-size: var(--bbt-body-md-size); line-height: var(--bbt-body-md-lh); font-weight: 500; }
.bbt-body-sm-strong { font-size: var(--bbt-body-sm-size); line-height: var(--bbt-body-sm-lh); font-weight: 500; }

.bbt-mono-label-xs,
.bbt-mono-label-sm,
.bbt-mono-label-md {
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  text-transform: uppercase;
}

.bbt-mono-label-xs {
  font-size: var(--bbt-mono-label-xs-size);
  line-height: var(--bbt-mono-label-xs-lh);
  letter-spacing: var(--bbt-mono-label-xs-ls);
}

.bbt-mono-label-sm {
  font-size: var(--bbt-mono-label-sm-size);
  line-height: var(--bbt-mono-label-sm-lh);
  letter-spacing: var(--bbt-mono-label-sm-ls);
}

.bbt-mono-label-md {
  font-size: var(--bbt-mono-label-md-size);
  line-height: var(--bbt-mono-label-md-lh);
  letter-spacing: var(--bbt-mono-label-md-ls);
}

.bbt-mono-data-md {
  font-family: var(--bbt-font-mono);
  font-size: var(--bbt-mono-data-md-size);
  line-height: var(--bbt-mono-data-md-lh);
  letter-spacing: var(--bbt-mono-data-md-ls);
  font-weight: var(--bbt-mono-data-md-weight);
}

.bbt-mono-data-sm {
  font-family: var(--bbt-font-mono);
  font-size: var(--bbt-mono-data-sm-size);
  line-height: var(--bbt-mono-data-sm-lh);
  letter-spacing: var(--bbt-mono-data-sm-ls);
  font-weight: var(--bbt-mono-data-sm-weight);
}

.bbt-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bbt-skip-link:focus-visible {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 300;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip: auto;
  padding: 12px 16px;
  background: var(--bbt-bg-inverse);
  color: var(--bbt-fg-inverse);
  font-family: var(--bbt-font-mono);
  font-size: var(--bbt-mono-label-sm-size);
  letter-spacing: var(--bbt-mono-label-sm-ls);
  text-transform: uppercase;
}

/* Цінова механіка: показ цін вмикається по регіону, прапорець на body.
   Ховається тільки ціна, дія в картці лишається. */

body[data-prices='off'] [data-price] {
  display: none !important;
}

body[data-prices='off'] .bbt-product-card__buy,
body[data-prices='off'] .bbt-merch-card__buy {
  justify-content: flex-end;
}

/* Регіон-механіка: контентні варіанти позначаються data-region-panel,
   перемикачі — data-region-target (кнопки завжди видимі).
   Ховаємо всі панелі, що НЕ збігаються з body[data-region] — панель,
   що збігається, зберігає власний display (flex/grid/будь-який).
   body без data-region (no-JS): у розмітці index.html дефолт
   data-region="eu_nato" стоїть прямо на body.
   Контракт однаковий для статики і WP. */

body[data-region='eu_nato'] [data-region-panel]:not([data-region-panel='eu_nato']),
body[data-region='us'] [data-region-panel]:not([data-region-panel='us']),
body[data-region='me'] [data-region-panel]:not([data-region-panel='me']),
body[data-region='apac'] [data-region-panel]:not([data-region-panel='apac']) {
  display: none !important;
}