@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Poppins", "Satoshi", sans-serif;
  --font-satoshi: "Satoshi", sans-serif;
  --font-heading: "Clash Grotesk", sans-serif;
}

.static::before {
  background-image:
    url("../images/grain.svg"),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.22) 0 2px,
      rgba(0, 0, 0, 0.08) 2px 4px,
      transparent 4px 7px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.09) 0 1px,
      rgba(255, 255, 255, 0.18) 1px 2px,
      transparent 2px 5px
    );
}

.frame {
  display: block;
}

.frame .media,
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  font-family: var(--font-body);
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: #111;
}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: 0;
  background: #111;
  color: #fff;
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.cacti-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.cacti-product-card-image {
  display: block;
  aspect-ratio: 257 / 266;
  overflow: hidden;
  background: #ddd;
}

.cacti-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cacti-hidden {
  display: none !important;
}

@media (max-width: 1024px) {
  .cacti-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cacti-theme .shell {
    width: min(100vw, calc(100vw - 24px));
  }

  .cacti-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}