:root {
  --brand-accent: #c64528;
  --brand-accent-strong: #b91c07;
  --brand-surface: #f6f0ed;
  --brand-ink: #1a1918;
  --brand-muted: #979494;
  --brand-secondary: #d26547;
  --brand-accent-soft: #e6ae99;
  --brand-accent-deep: #920c04;
  --brand-ink-soft: #3b3b3b;
  --brand-accent-rgb: 198, 69, 40;
  --brand-accent-glow: rgba(198, 69, 40, 0.22);
  --brand-success: #39a96b;
  --brand-surface-strong: #e6ae99;
  --bs-primary: var(--brand-accent);
  --bs-primary-rgb: var(--brand-accent-rgb);
  --bs-link-color: var(--brand-accent);
  --bs-link-hover-color: var(--brand-accent-strong);
}

.text-primary,
.text-color-theme {
  color: var(--brand-accent) !important;
}

.bg-light-theme {
  background: var(--brand-accent-soft) !important;
}

.bg-light-blue {
  background: var(--brand-surface) !important;
}

.bg-brand-surface {
  background: var(--brand-surface) !important;
}

.text-gradient-6 {
  background: -webkit-linear-gradient(
    135deg,
    var(--brand-accent) 0%,
    var(--brand-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.button-theme,
.button-gradient-6,
.btn-primary {
  background-color: var(--brand-accent);
  background-image: linear-gradient(
    135deg,
    var(--brand-accent) 0%,
    var(--brand-secondary) 100%
  );
  border-color: var(--brand-accent);
  color: #fff !important;
  box-shadow: 0 12px 30px var(--brand-accent-glow);
}

.button-theme:hover,
.button-theme:focus,
.button-gradient-6:hover,
.button-gradient-6:focus,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-accent-strong);
  background-image: linear-gradient(
    135deg,
    var(--brand-accent-strong) 0%,
    var(--brand-accent-deep) 100%
  );
  border-color: var(--brand-accent-deep);
  color: #fff !important;
}

.button-outline-theme {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}

.button-outline-theme:hover,
.button-outline-theme:focus {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}

.pagination .page-item .page-link:hover,
.pagination .page-item.active .page-link {
  background: var(--brand-accent-soft);
  color: var(--brand-ink);
}

.filter.filter-style-3 ul li:hover,
.filter.filter-style-3 ul li.active,
.filter.filter-style-3 ul li.mixitup-control-active {
  color: var(--brand-accent);
}

.filter.filter-style-3 ul li:after {
  background: var(--brand-accent);
}

.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  opacity: 1;
  visibility: visible;
}

.site-preloader-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-preloader-logo {
  width: min(420px, 72vw);
  max-height: 56vh;
  height: auto;
  object-fit: contain;
  display: block;
  animation: site-preloader-fade 1.5s ease-in-out infinite;
}

.loaded .site-preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

@keyframes site-preloader-fade {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.preloader {
  background: linear-gradient(
      180deg,
      rgba(var(--brand-accent-rgb), 0.1) 0%,
      rgba(246, 240, 237, 0.98) 100%
    ),
    var(--brand-surface);
}

.preloader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 116px;
  height: 116px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 45px rgba(26, 25, 24, 0.08);
  transform: translate(-50%, -58%);
}

.preloader::after {
  content: "Stitch-It-In";
  position: absolute;
  top: calc(50% + 58px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--brand-ink);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preloader div {
  z-index: 2;
}

.preloader-1 div .loader-path {
  stroke: var(--brand-accent) !important;
}

.preloader-2 div span {
  background: var(--brand-accent) !important;
  background: linear-gradient(to right, var(--brand-accent) 10%, transparent 40%) !important;
}

.preloader-2 div span:before {
  background: var(--brand-accent) !important;
}

.preloader-3 div span:before,
.preloader-3 div span:after {
  background: rgba(var(--brand-accent-rgb), 0.22) !important;
}

.site-footer-main {
  background: var(--brand-ink) !important;
  color: var(--brand-surface) !important;
}

.site-footer-bottom {
  background: var(--brand-ink-soft) !important;
  color: var(--brand-surface) !important;
}

.site-footer-main h1,
.site-footer-main h2,
.site-footer-main h3,
.site-footer-main h4,
.site-footer-main h5,
.site-footer-main h6,
.site-footer-bottom h1,
.site-footer-bottom h2,
.site-footer-bottom h3,
.site-footer-bottom h4,
.site-footer-bottom h5,
.site-footer-bottom h6,
.site-footer-main p,
.site-footer-bottom p,
.site-footer-main span,
.site-footer-bottom span,
.site-footer-main li,
.site-footer-bottom li {
  color: inherit !important;
}

.site-footer-main a:not([class^="button"]),
.site-footer-bottom a:not([class^="button"]) {
  color: var(--brand-surface) !important;
}

.site-footer-main a:not([class^="button"]):hover,
.site-footer-bottom a:not([class^="button"]):hover {
  color: var(--brand-accent-soft) !important;
}

.site-footer-main .list-dash li:before {
  color: var(--brand-accent);
}

.site-footer-bottom .button-circle-social-facebook {
  background: var(--brand-accent) !important;
  color: #fff !important;
}

.site-footer-bottom .button-circle-social-facebook:hover,
.site-footer-bottom .button-circle-social-facebook:focus {
  background: var(--brand-accent-strong) !important;
}

.scrolltotop .button-circle-dark {
  background: var(--brand-accent) !important;
  color: #fff !important;
}

.scrolltotop .button-circle-dark:hover,
.scrolltotop .button-circle-dark:focus {
  background: var(--brand-accent-strong) !important;
}