/** Shopify CDN: Minification failed

Line 280:0 Unexpected "#404-product-results"
Line 284:0 Unexpected "#404-product-results"
Line 289:2 Unexpected "#404-product-results"
Line 296:2 Unexpected "#404-product-results"
Line 302:2 Unexpected "#404-product-results"
Line 308:2 Unexpected "#404-product-results"
Line 314:2 Unexpected "#404-product-results"

**/
/* Custom CSS for Active Pool Supply Theme */

/* Placeholder image constraints for product gallery */
.product-media-main .aspect-ratio .placeholder-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-media-thumbnail .aspect-ratio .placeholder-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Product Manuals Section */
.product-manuals-container {
  margin: 2rem 0;
}

.product-manuals-container h4 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.product-manuals-container ul {
  list-style: disc;
  margin-left: 1.5rem;
  padding: 0;
}

.product-manuals-container li {
  margin: 0.75rem 0;
  line-height: 1.6;
}

.product-manuals-container a {
  color: rgb(var(--color-link));
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.product-manuals-container a:hover {
  opacity: 0.8;
}

/* Product Manuals Section */
.product-manuals-container {
  margin: 2rem 0;
}

.product-manuals-container h4 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.product-manuals-container ul {
  list-style: disc;
  margin-left: 1.5rem;
  padding: 0;
}

.product-manuals-container li {
  margin: 0.75rem 0;
  line-height: 1.6;
}

.product-manuals-container a {
  color: rgb(var(--color-link));
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.product-manuals-container a:hover {
  opacity: 0.8;
}

/* Product Resources Section */
.product-resources {
  padding: 0;
}

.product-resources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-resource-item {
  margin: 0;
  padding: 0;
}

.product-resource-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 4px;
  transition: all 0.2s ease;
  background-color: transparent;
}

.product-resource-link:hover {
  background-color: rgba(var(--color-foreground), 0.05);
  border-color: rgba(var(--color-foreground), 0.2);
  text-decoration: none;
}

.product-resource-link:focus {
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 2px;
}

.product-resource-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: rgb(var(--color-foreground));
}

.product-resource-icon svg {
  width: 100%;
  height: 100%;
}

.product-resource-description {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Tablet and up */
@media (min-width: 750px) {
  .product-resources-list {
    gap: 1rem;
  }

  .product-resource-link {
    padding: 1rem;
    gap: 1rem;
  }

  .product-resource-icon {
    width: 24px;
    height: 24px;
  }

  .product-resource-description {
    font-size: 1rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .product-resource-link {
    padding: 1.125rem;
  }
}

/* 404 Product Grid - Custom Grid Class */
.grid-404 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  column-gap: 2rem;
  row-gap: 2rem;
}

.grid-404 .grid-item {
  flex: none;
  list-style: none;
  padding: 0;
  width: calc(50% - 1rem);
  max-width: calc(50% - 1rem);
}

@media (min-width: 750px) {
  .grid-404 {
    column-gap: 3rem;
  }
  
  .grid-404 .grid-item {
    width: calc(33.33% - 2rem);
    max-width: calc(33.33% - 2rem);
  }
}

/* 404 Product Cards Styling - target descendants of product-card */
.grid-404 product-card.card-product .card-info,
.grid-404 product-card.card-product .card-eyebrow,
.grid-404 product-card.card-product .card-heading,
.grid-404 product-card.card-product .card-footer,
.grid-404 product-card.card-product .card-footer-intro,
.grid-404 product-card.card-product .price {
  text-align: left !important;
}

/* Target the product-card custom element - it IS the card, not a descendant */
.grid-404 product-card.card-product {
  /* Border: Uses box-shadow for inset border + drop shadow */
  /* Inset border: 1px solid using --color-border variable */
  /* Drop shadow: 3px shadow using --color-box-shadow variable */
  box-shadow: inset 0 0 0 1px var(--color-border), 0 3px 0 var(--color-box-shadow) !important;
  /* Fallback border in case CSS variables aren't defined */
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-base, 8px);
  /* Ensure card has padding like theme cards */
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
}

.grid-404 product-card.card-product .card-media {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

.grid-404 product-card.card-product .card-media .aspect-ratio {
  max-width: 100%;
  width: 100%;
  max-height: 500px;
}

.grid-404 product-card.card-product .card-media img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.grid-404 product-card.card-product .card-footer-intro {
  justify-content: flex-start !important;
}

/* Center the button */
.grid-404 product-card.card-product .card-product-actions {
  text-align: center !important;
}

.grid-404 product-card.card-product .card-product-actions .button {
  margin: 0 auto;
}

/* 404 Product Grid Container Padding */
#404-product-results {
  padding: 0 1.5rem;
}

#404-product-results .collection {
  padding: 0;
}

@media (min-width: 750px) {
  #404-product-results {
    padding: 0 2rem;
  }
}

/* 1000px–1455px: container-narrow has no padding, so add 5rem */
@media (min-width: 990px) {
  #404-product-results {
    padding: 0 3rem;
  }
}

@media (min-width: 1000px) and (max-width: 1455px) {
  #404-product-results {
    padding: 0 5rem;
  }
}

@media (min-width: 1200px) {
  #404-product-results {
    padding: 0 4rem;
  }
}

@media (min-width: 1456px) {
  #404-product-results {
    padding: 0 4rem;
  }
}