@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* ---------- Button ---------- */
.d45-btn, .d45-card, .d45-card *, .d45-city__option { box-sizing: border-box; }
.d45-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-target); padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-control);
  font-family: var(--font-display); font-size: 14px; line-height: 14px; font-weight: 400;
  text-transform: uppercase; text-decoration: none; letter-spacing: .02em;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.d45-btn--primary { background: var(--color-action-primary); color: var(--color-text-inverse); }
.d45-btn--primary:hover, .d45-btn--primary:active { background: var(--color-action-hover); }
.d45-btn--secondary { background: transparent; color: var(--color-action-hover); border-color: var(--color-action-primary); }
.d45-btn--secondary:hover, .d45-btn--secondary:active { background: var(--color-action-soft); border-color: var(--color-action-hover); }
.d45-btn:focus-visible { outline: 2px solid var(--color-action-hover); outline-offset: 2px; }
.d45-btn:disabled, .d45-btn[aria-disabled="true"] { background: var(--color-surface-subtle); color: var(--color-text-secondary); border-color: var(--color-border); cursor: not-allowed; }
.d45-btn--full { display: flex; width: 100%; }

/* ---------- Logo ---------- */
.d45-logo { display: block; width: auto; }

/* ---------- City selector ---------- */
.d45-city { position: relative; display: inline-block; font-family: var(--font-sans); }
.d45-city__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target);
  padding: 0; background: none; border: 0; color: inherit; cursor: pointer;
  font: 500 16px/22px var(--font-sans);
}
.d45-city__trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--radius-control); }
.d45-icon { flex: none; }
.d45-icon--up { transform: rotate(180deg); }
.d45-city__list {
  position: absolute; top: 100%; left: 0; z-index: 10; min-width: 100%;
  margin: var(--space-1) 0 0; padding: var(--space-1) 0; list-style: none;
  background: var(--color-surface); border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(2, 16, 2, .12);
}
.d45-city__option {
  display: block; width: 100%; padding: var(--space-1) var(--space-3); white-space: nowrap; text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--color-text-primary);
  font: 500 16px/22px var(--font-sans);
}
.d45-city__option:hover { background: var(--color-surface-subtle); }
.d45-city__option.is-selected { background: var(--color-action-soft); color: var(--color-action-hover); }
.d45-city__option:focus-visible { outline: 2px solid var(--color-action-hover); outline-offset: -2px; }

/* ---------- Product card ---------- */
.d45-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  font-family: var(--font-sans); color: var(--color-text-primary);
}
.d45-card__media { display: block; aspect-ratio: 16 / 9; background: var(--color-surface-subtle); }
.d45-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d45-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.d45-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.d45-card__title { margin: 0; font: 600 24px/29px var(--font-sans); }
.d45-card__price { font: 700 24px/29px var(--font-sans); white-space: nowrap; }
.d45-card__features { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-1); padding: 0; list-style: none; font: 400 14px/20px var(--font-sans); color: var(--color-text-secondary); }

/* ---------- Header ---------- */
.d45-header { font-family: var(--font-sans); color: var(--color-text-inverse); }
.d45-header--primary { background: transparent; }
.d45-header__inner { display: flex; align-items: center; gap: var(--space-8); margin: 0 auto; padding: var(--space-5) var(--space-6); }
.d45-header--1920 .d45-header__inner { max-width: var(--container-1920); }
.d45-header--1440 .d45-header__inner { max-width: var(--container-1440); }
.d45-header--990 .d45-header__inner { gap: var(--space-6); }
.d45-header__logo { flex: none; }
.d45-header__nav { display: flex; gap: var(--space-8); margin: 0 auto; }
.d45-header__nav a { color: inherit; text-decoration: none; font: 500 16px/22px var(--font-sans); }
.d45-header__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.d45-header__aside { display: flex; align-items: center; gap: var(--space-8); margin-left: auto; }
.d45-header--1920 .d45-header__aside, .d45-header--1440 .d45-header__aside { margin-left: 0; }
.d45-header__contact { display: flex; flex-direction: column; align-items: flex-end; }
.d45-header__phone { color: inherit; text-decoration: none; font: 700 16px/22px var(--font-sans); }
.d45-header__callback { padding: 0; background: none; border: 0; color: inherit; cursor: pointer; font: 400 14px/20px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; }
.d45-header a:focus-visible, .d45-header__callback:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }