/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --spacing: 0.25rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --font-weight-medium: 500;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --color-primary: rgb(0, 191, 255);
  }
}
@layer utilities {
  .col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
  .col-span-9 {
    grid-column: span 9 / span 9 !important;
  }
  .grid {
    display: grid !important;
  }
  .h-5 {
    height: calc(var(--spacing) * 5) !important;
  }
  .w-5 {
    width: calc(var(--spacing) * 5) !important;
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4) !important;
  }
  .text-primary {
    color: var(--color-primary) !important;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
  }
}
.product-filter-nav {
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  ul {
    margin-bottom: -1px;
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  ul li a {
    display: inline-block;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: transparent;
    padding: calc(var(--spacing) * 4);
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
    &.active {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 2px;
      border-color: var(--color-primary);
      color: var(--color-primary);
    }
  }
}
.product-filter-search {
  position: relative;
  z-index: 0;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.product-filter-search-icon {
  pointer-events: none;
  position: absolute;
  top: calc(var(--spacing) * 5);
  display: flex;
  transform-origin: 0;
  align-items: center;
  padding-inline-start: calc(var(--spacing) * 0);
  &:is(:where(.group):is(.focus) *) {
    color: var(--color-primary);
  }
}
#product-filter-search-label {
  position: absolute;
  top: calc(var(--spacing) * 4);
  z-index: calc(10 * -1);
  transform-origin: 0;
  --tw-translate-x: calc(var(--spacing) * 9);
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-scale-x: 100%;
  --tw-scale-y: 100%;
  --tw-scale-z: 100%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:is(:where(.group):is(.active) *) {
    inset-inline-start: calc(var(--spacing) * 0);
  }
  &:is(:where(.group):is(.active) *) {
    --tw-translate-y: calc(var(--spacing) * -6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  &:is(:where(.group):is(.active) *) {
    --tw-scale-x: 75%;
    --tw-scale-y: 75%;
    --tw-scale-z: 75%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  &:is(:where(.group):is(.focus) *) {
    inset-inline-start: calc(var(--spacing) * 0);
  }
  &:is(:where(.group):is(.focus) *) {
    --tw-translate-y: calc(var(--spacing) * -6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  &:is(:where(.group):is(.focus) *) {
    --tw-scale-x: 75%;
    --tw-scale-y: 75%;
    --tw-scale-z: 75%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  &:is(:where(.group):is(.focus) *) {
    color: var(--color-primary);
  }
}
#product-filter-search-input {
  display: block;
  width: 100%;
  appearance: none;
  border-style: var(--tw-border-style);
  border-width: 0px;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
  background-color: transparent;
  padding-block: calc(var(--spacing) * 4);
  padding-inline-start: calc(var(--spacing) * 9);
  padding-inline-end: calc(var(--spacing) * 3);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-outline-style: none;
  outline-style: none;
  &:focus {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  &:focus {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  &:focus {
    border-color: var(--color-primary);
  }
  &:focus {
    color: var(--color-primary);
  }
}
.product-filter-search-result {
  margin-block: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0);
  text-align: right;
  font-size: var(--text-sm);
  line-height: calc(var(--spacing) * 12);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-font-weight: initial;
      --tw-border-style: solid;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-duration: initial;
    }
  }
}