@charset "UTF-8";
:root {
  --sticky-header-enabled: 1;
}

/**
 * Header section (migrated from Shopify inline styles).
 * We keep Shopify's DOM/classes, but scope the variable overrides to `.fs-header`.
 */
.fs-header {
  --header-grid-template: "main-nav logo secondary-nav" / minmax(0, 1fr) auto minmax(0, 1fr);
  --header-padding-block: var(--spacing-4-5);
  --header-background-opacity: 0.68;
  --header-background-blur-radius: 0px;
  --header-transparent-text-color: 255 255 255;
  --header-logo-width: 65px;
  --header-logo-height: 42px;
  position: sticky;
  top: 0;
  z-index: 10;
  /* From the old inline snippet at the bottom of the export */
}
.fs-header .mega-menu {
  background: #0037a5;
}
.fs-header .mega-menu__nav a {
  color: white;
}

.shopify-section--announcement-bar ~ .fs-header {
  top: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px));
}

@media screen and (min-width: 700px) {
  .fs-header {
    --header-logo-width: 95px;
    --header-logo-height: 61px;
    --header-padding-block: var(--spacing-8-5);
  }
}
@media screen and (min-width: 1150px) {
  .fs-header {
    --header-grid-template: "logo main-nav secondary-nav" / auto minmax(0, 1fr) minmax(0, max-content);
  }
}
.fs-hero {
  /* Mirrors the important Shopify inline variables, but scoped to this block */
  --slideshow-background: #f2f2f2;
  --slideshow-controls-color: 255 255 255;
  /* Shopify uses this to pull the first section under the sticky header */
  margin-block-start: calc(-1 * var(--header-height) * var(--section-is-first));
  /* Slide-level variables (Shopify originally set these on a per-block id) */
}
.fs-hero .slideshow__slide {
  --slideshow-slide-background: #f2f2f2;
  --slideshow-slide-controls-color: 255 255 255;
}
.fs-hero {
  /* Replaces inline style="--content-over-media-..." */
}
.fs-hero .fs-hero__media {
  --content-over-media-content-max-width: 780px;
  --content-over-media-overlay: 0 0 0 / 0.65;
}
.fs-hero {
  /* Replaces inline style="--text-color: ..." */
}
.fs-hero .fs-hero__text {
  --text-color: 255 255 255;
}
.fs-hero {
  /* Replaces inline CTA button variables */
}
.fs-hero .fs-hero__cta {
  --button-background: 255 255 255 / var(--button-background-opacity, 1);
  --button-outline-color: 255 255 255;
  --button-text-color: 0 0 0;
}
.fs-hero {
  /* From the original inline CSS */
}
.fs-hero [data-sequence=subheading] {
  max-width: 80%;
  margin-inline: auto;
}

.fs-collection-link-blocks {
  /**
   * Ported from Shopify inline styles for "image link blocks".
   * Controls item width + responsive layout via CSS variables.
   */
}
.fs-collection-link-blocks .image-link-blocks {
  --image-link-blocks-item-width: 32vw;
  --image-link-blocks-grid: auto / auto-flow var(--image-link-blocks-item-width);
  --content-over-media-gap: var(--grid-gutter);
}
@media screen and (min-width: 700px) {
  .fs-collection-link-blocks .image-link-blocks {
    --image-link-blocks-item-width: 18vw;
  }
}
@media screen and (min-width: 1000px) {
  .fs-collection-link-blocks .image-link-blocks {
    --image-link-blocks-items-per-row: 6;
    --image-link-blocks-grid: auto / auto-flow calc(
      var(--container-inner-width) / var(--image-link-blocks-items-per-row) -
        (var(--grid-gutter) / var(--image-link-blocks-items-per-row) *
          (var(--image-link-blocks-items-per-row) - 1))
    );
  }
}
@media screen and (min-width: 1400px) {
  .fs-collection-link-blocks .image-link-blocks {
    --image-link-blocks-items-per-row: 7;
  }
}

.fs-featured-collection {
  /* Use the same card/grid styles as the working `shop.php` implementation,
     but scoped to this block so it doesn't affect other pages/components. */
}
.fs-featured-collection .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5em;
  margin-bottom: 2em;
}
.fs-featured-collection .product-card {
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fs-featured-collection .product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.fs-featured-collection .product-card .product-image {
  width: 100%;
  height: auto;
  display: block;
}
.fs-featured-collection .product-card-content {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  flex: 1;
}
.fs-featured-collection .product-title-link {
  text-decoration: none;
  color: #333;
  transition: color 0.2s ease;
}
.fs-featured-collection .product-title-link:hover {
  color: #007cba;
}
.fs-featured-collection .product-title-wrapper .swp-product-title {
  margin: 0;
  font-size: 1em;
  color: inherit;
}
.fs-featured-collection .product-pricing-wrapper {
  font-weight: 600;
  color: #333;
}
.fs-featured-collection .product-button-wrapper {
  margin-top: auto;
}
.fs-featured-collection {
  /* Hide ShopWP wrapper sections if they get injected near our cards */
}
.fs-featured-collection section[data-wpshopify-component] {
  display: none !important;
}

/**
 * Scrolling Text block (`fs/scrolling-text`)
 * Mirrors the few inline styles from Shopify export by setting the same CSS variables.
 */
.fs-scrolling-text {
  --section-background-hash: 020000504007030202409009100537990;
  --section-spacing-inline: 0;
  --scrolling-text-font-size: 5rem;
}
@media screen and (min-width: 700px) {
  .fs-scrolling-text {
    --scrolling-text-font-size: 8.75rem;
  }
}

.fs-scrolling-text + * {
  --previous-section-background-hash: 020000504007030202409009100537990;
}

.fs-collection-breadcrumbs {
  /* Migrated from the Shopify inline breadcrumb styles */
  display: block;
  padding: 1rem 5rem;
  color: #050504;
  background-color: #ffffff;
}
.fs-collection-breadcrumbs .home-icon-container {
  display: inline-block;
  margin-right: 4px;
  vertical-align: sub;
}
.fs-collection-breadcrumbs li {
  display: inline-block;
}
.fs-collection-breadcrumbs a {
  text-decoration: none;
  font-size: 15px;
  color: inherit;
}
.fs-collection-breadcrumbs .breadcrumb-delimeter:not(:last-child)::after {
  content: "›";
  font-size: 18px;
  display: inline-block;
  margin-left: 0.75rem;
  margin-right: 0.5rem;
  speak: none;
}
.fs-collection-breadcrumbs [aria-current=page] {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
}

/* Existing template layout styles (moved from inline <style> in the template) */
.wps-collection-single-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.wps-collections-wrapper {
  width: 100%;
  max-width: 100%;
}

#collection_products {
  margin-top: 2em;
}

#collection_products_sorting {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/*# sourceMappingURL=style.css.map */