/* Kitabkiro storefront base: design helmet rules + Bootstrap 5 overrides.
   Colours/sizes use --kb-* tokens only. */

/* Design static HTML uses content-box. Bootstrap sets border-box globally,
   which shrinks every max-width:var(--kb-container) + horizontal padding container by 48px.
   Scope content-box to .kb-root only (cart drawer stays outside). */
.kb-root {
  box-sizing: content-box;
}

.kb-root *,
.kb-root *::before,
.kb-root *::after {
  box-sizing: inherit;
}

/* Base rules taken from the design helmet styles */
body {
  margin: 0;
  background: var(--kb-surface-page);
  color: var(--kb-text-default);
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-16);
}

a {
  color: var(--kb-brand-navy-900);
  text-decoration: none;
}

a:hover {
  color: var(--kb-brand-green-700);
}

.kb-add:hover {
  background: var(--kb-brand-green-800);
}

.kb-ghost:hover {
  background: var(--kb-surface-sand-hover);
}

.kb-out:hover {
  background: var(--kb-brand-navy-900);
  color: #FFFFFF;
}

.kb-card {
  transition: box-shadow var(--kb-ease-hover), border-color var(--kb-ease-hover);
}

.kb-card:hover {
  border-color: var(--kb-border-hover);
  box-shadow: var(--kb-shadow-card-hover);
}

.kb-bk {
  transition: transform var(--kb-ease-book);
}

.kb-card:hover .kb-bk {
  transform: translateY(-6px);
}

.kb-cover {
  transition: transform var(--kb-ease-hover);
}

.kb-cover:hover {
  transform: translateY(-4px);
}

/* RECOMMENDATION (not in design): visible focus ring */
:focus-visible {
  outline: 2px solid var(--kb-brand-navy-900);
  outline-offset: 2px;
}

.kb-root a:focus-visible,
.kb-root button:focus-visible,
.kb-root input:focus-visible,
.kb-root select:focus-visible {
  outline: 2px solid var(--kb-brand-navy-900) !important;
  outline-offset: 2px;
}

/* SCR-002 listing controls — beat Bootstrap outline:0
   :focus for normal keyboard; .kb-is-focused when document lacks OS focus */
.kb-root .kb-filters__clear:focus,
.kb-root .kb-filters__check input:focus,
.kb-root .kb-filters__price-field input:focus,
.kb-root .kb-filter-chip__remove:focus,
.kb-root .kb-pagination a:focus,
.kb-root .kb-sort__select:focus,
.kb-root .kb-book-card__add:focus,
.kb-root .kb-filters__apply:focus,
.kb-root .kb-qty__btn:focus,
.kb-root .kb-purchase__add:focus,
.kb-root .kb-purchase__buy:focus,
.kb-root .kb-share__btn:focus,
.kb-root .kb-book-tabs__tab:focus,
.kb-root .kb-checkout-header__logo:focus,
.kb-root .kb-checkout-header__help:focus,
.kb-root .kb-checkout-steps__link:focus,
.kb-root .kb-cart-page__continue:focus,
.kb-root .kb-cart-line__remove:focus,
.kb-root .kb-cart-line__title:focus,
.kb-root .kb-order-summary__cta:focus,
.kb-root .kb-cart-empty__btn:focus,
.kb-root .kb-footer-checkout a:focus,
.kb-root .kb-filters__clear.kb-is-focused,
.kb-root .kb-filters__check input.kb-is-focused,
.kb-root .kb-filters__price-field input.kb-is-focused,
.kb-root .kb-filter-chip__remove.kb-is-focused,
.kb-root .kb-pagination a.kb-is-focused,
.kb-root .kb-sort__select.kb-is-focused,
.kb-root .kb-book-card__add.kb-is-focused,
.kb-root .kb-filters__apply.kb-is-focused,
.kb-root .kb-qty__btn.kb-is-focused,
.kb-root .kb-purchase__add.kb-is-focused,
.kb-root .kb-purchase__buy.kb-is-focused,
.kb-root .kb-share__btn.kb-is-focused,
.kb-root .kb-book-tabs__tab.kb-is-focused,
.kb-root .kb-checkout-header__logo.kb-is-focused,
.kb-root .kb-checkout-header__help.kb-is-focused,
.kb-root .kb-checkout-steps__link.kb-is-focused,
.kb-root .kb-cart-page__continue.kb-is-focused,
.kb-root .kb-cart-line__remove.kb-is-focused,
.kb-root .kb-cart-line__title.kb-is-focused,
.kb-root .kb-order-summary__cta.kb-is-focused,
.kb-root .kb-cart-empty__btn.kb-is-focused,
.kb-root .kb-footer-checkout a.kb-is-focused {
  outline-width: 2px !important;
  outline-style: solid !important;
  outline-color: var(--kb-brand-navy-900) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--kb-surface-page) !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Bootstrap 5: map primary/link to design tokens; prevent blue leak */
:root {
  --bs-body-font-family: var(--kb-font-body);
  --bs-body-color: var(--kb-text-default);
  --bs-body-bg: var(--kb-surface-page);
  --bs-primary: var(--kb-brand-green-700);
  --bs-primary-rgb: 47, 125, 50;
  --bs-link-color: var(--kb-brand-navy-900);
  --bs-link-hover-color: var(--kb-brand-green-700);
  --bs-border-color: var(--kb-border-default);
  --bs-border-radius: var(--kb-radius-md);
  --bs-border-radius-lg: var(--kb-radius-lg);
  --bs-border-radius-sm: var(--kb-radius-sm);
}

.btn-primary {
  --bs-btn-bg: var(--kb-brand-green-700);
  --bs-btn-border-color: var(--kb-brand-green-700);
  --bs-btn-hover-bg: var(--kb-brand-green-800);
  --bs-btn-hover-border-color: var(--kb-brand-green-800);
  --bs-btn-active-bg: var(--kb-brand-green-900);
  --bs-btn-active-border-color: var(--kb-brand-green-900);
  --bs-btn-font-weight: var(--kb-weight-bold);
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: var(--kb-container);
}