/* Wspólne style dla Strony Craftmar */

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f4f4f5;
  border-left: 2px solid #09090b;
}
::-webkit-scrollbar-thumb {
  background: #09090b;
}
::-webkit-scrollbar-thumb:hover {
  background: #f25d0d;
}

/* Base Fonts */
body {
  font-family: 'Manrope', sans-serif;
  background-color: #f4f4f5;
  color: #09090b;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Space Grotesk', sans-serif;
}

/* Animations (Intersection Observer Fade-in) */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom UI Elements */
.card-hover:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0px 0px #09090b;
}

.diagonal-tape {
  background: repeating-linear-gradient(
      45deg,
      #f25d0d,
      #f25d0d 20px,
      #18181b 20px,
      #18181b 40px
  );
}

/* Gallery Zoom */
.gallery-zoom-container {
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.gallery-zoom-image {
  transition: transform 0.3s ease;
}
.gallery-zoom-container:hover .gallery-zoom-image {
  transform: scale(1.5);
}

/* Catalog Filter Checkbox */
.filter-checkbox {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 2px solid #09090b;
  border-radius: 0;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.filter-checkbox::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #09090b;
  background-color: #09090b;
}
.filter-checkbox:checked::before {
  transform: scale(1);
}
.filter-checkbox:checked {
  border-color: #f25d0d;
}
.filter-checkbox:checked::before {
   box-shadow: inset 1em 1em #f25d0d;
   background-color: #f25d0d;
}

/* Button Interaction (Buy) */
.btn-buy.added {
  background-color: #09090b;
  color: #ffffff;
  pointer-events: none;
}
.btn-buy.added::after {
  content: "DODANO";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #09090b;
}
.btn-buy.added span {
  opacity: 0;
}