/* === CSS Variables === */
:root {
  --basic-primary: #ea580c;
  --basic-accent: #c2410c;
  --basic-highlight: #431407;
  --basic-text: #1f2937;
  --basic-bg: #fff7ed;
  --basic-link: #ea580c;
  --basic-border: #fed7aa;
  --basic-container-width: 1200px;
  --basic-header-bg: #ffffff;
  --basic-header-text: #1f2937;
  --basic-header-link: #1f2937;
  --basic-header-link-hover: #1f2937;
  --basic-header-border: rgba(255,255,255,0.1);
  --basic-footer-bg: #7c2d12;
  --basic-footer-text: #ffffff;
  --basic-footer-heading: #ffffff;
  --basic-footer-link: #ffffff;
  --basic-footer-link-hover: #ffffff;
  --basic-footer-border: rgba(255,255,255,0.1);
}
:where(body.basic-front){color:var(--basic-text);background:var(--basic-bg)}
:where(body.basic-front) a{color:var(--basic-link)}
body.basic-front{--bs-heading-color:var(--basic-primary);--bs-body-color:var(--basic-text);--bs-body-bg:var(--basic-bg);--bs-link-color:var(--basic-link)}
:where(body.basic-front) :where(h1,h2,h3,h4,h5,h6){color:var(--basic-primary)}

/* === Responsive (breakpoint: 768px) === */
@media (max-width:768px){
  .fve-cols-stack{grid-template-columns:1fr !important}
  .fve-cols-stack > .fve-col:empty{display:none !important}
  .fve-cols-2{grid-template-columns:repeat(2,1fr) !important}
  .fve-cols-3{grid-template-columns:repeat(3,1fr) !important}
  .fve-hide-mobile{display:none !important}
}
@media (min-width:769px){
  .fve-hide-desktop{display:none !important}
}