:root {
  --h-header: 72px;
  --header-top: 16px;
  --content-max: 1200px;
  --content-pad: 24px;
  --content-pad-mobile: 16px;
  --brand: #528403;
  --brand-dark: #436c02;
  --brand-soft: #e2eebd;
  --qty-btn-bg: #dbdbdb;
  --qty-btn-bg-hover: #b5b5b5;
  --qty-btn-fg: #436c02;
  --qty-btn-fg-hover: #ffffff;
  --b-first-color: white;
  --t-first-color: black;
  --b-second-color: white;
  --t-second-color: black;
  --transition: 0.3s;
  --s-title: 20px;
  --spacer: 4px;
  --header-height: var(--h-header);
  --font-family: 'Inter', sans-serif;
  --bs-font-sans-serif: var(--font-family);
  --bs-font-monospace: var(--font-family);
}

/* Generic content container — keeps inner content away from viewport edges */
header > .content,
footer > .content,
section > .content {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  box-sizing: border-box;
}

@media (max-width: 800px) {
  header > .content,
  footer > .content,
  section > .content {
    padding: 0 var(--content-pad-mobile);
  }
}
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Inter", sans-serif;;
  background: #ffffff;
}

a {
  text-decoration: none;
  color: var(--t-first-color);
}