/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 28 2026 | 19:36:19 */
/* ==================================================
   BLKFOG – HERO BUTTON (LEVEL UP SYSTEM)
================================================== */

:root {
  --bf-black: #1A1A1A;
  --bf-black-deep: #0F0F0F;
  --bf-bg: #F5F5F3;
  --bf-white: #f2f2f2;
}

/* Base */
.blkfog-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
    padding: 20px 48px;
  border: 1.5px solid var(--bf-black);
  background: transparent;
  color: var(--bf-black);
  font-weight: 600;
   font-size: 1.4rem;
  letter-spacing: 0.06em;

  text-transform: uppercase;
  text-decoration: none;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.2s ease;
}

/* Subtle Press Depth */
.blkfog-button:active {
  transform: translateY(1px);
}

/* Arrow default = angled */
.blkfog-button .arrow {
  display: inline-block;
  transform: rotate(-45deg) translateY(-1px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover / focus */
.blkfog-button:hover,
.blkfog-button:focus-visible {
  background-color: var(--bf-black);
  color: var(--bf-bg);
  border-color: var(--bf-black);
}

/* Arrow animates to straight */
.blkfog-button:hover .arrow,
.blkfog-button:focus-visible .arrow {
  transform: rotate(0deg);
}

/* Spacing Variants */
.blkfog-button--hero {
  margin-top: 26px;
}

.blkfog-button--about {
  margin-top: 0;
}

.blkfog-button--product {
  margin-top: 3vh;
  margin-bottom: 3vh;
}

/* ==================================================
   BLKFOG – WHITE REVERSE MODIFIER
================================================== */

.blkfog-button--white {
  border: 1.5px solid var(--bf-white);
  background: transparent;
  color: var(--bf-white);
}

/* Hover / focus for white version */
.blkfog-button--white:hover,
.blkfog-button--white:focus-visible {
  background-color: var(--bf-white);
  color: var(--bf-black);
  border-color: var(--bf-white);
}

/* Arrow inherits automatically, but keep it explicit */
.blkfog-button--white .arrow {
  color: inherit;
}

/* WHITE BUTTON BASE */
.blkfog-button.blkfog-button--white,
.blkfog-button.blkfog-button--white:visited {
  background: transparent;
  color: var(--bf-white);
  border: 1.5px solid var(--bf-white);
}

/* WHITE BUTTON HOVER / FOCUS / ACTIVE */
.blkfog-button.blkfog-button--white:hover,
.blkfog-button.blkfog-button--white:focus,
.blkfog-button.blkfog-button--white:active,
.blkfog-button.blkfog-button--white:visited:hover {
  background-color: var(--bf-white);
  color: var(--bf-black);
  border-color: var(--bf-white);
}
/* =======================================
   BLKFOG – FILTER BUTTON OVERRIDE
======================================= */

.bf-filter-menu button,
.bf-filter-menu button:hover,
.bf-filter-menu button:focus,
.bf-filter-menu button:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--bf-muted) !important;
}

.bf-filter-menu button:hover,
.bf-filter-menu button.active {
  color: var(--bf-black) !important;
}



/* Mobile */
@media (max-width: 768px) {
  .blkfog-button--hero {
    font-size: 0.7rem;
    padding: 12px 24px;
  }
}