/* ======================================
   03. HERO SLIDER CUSTOMIZATION
====================================== */

.hero-slider {
  position: relative;

  .page-section {
    padding-top: 0 !important;
  }

  /* EQUAL-HEIGHT SLIDES. Fluid Engine rows are minmax(Xpx, auto), so a
     matching editor row count (19) only sets a MINIMUM height — any text
     block that renders taller than its row span (fonts clamp() while rows
     scale linearly with vw, so they drift at non-1440 widths) stretches
     its rows and that slide alone grows. Meanwhile Swiper's own
     `.swiper-slide { height: 100% }` resolves against the auto-height
     wrapper to content height AND blocks flex align-stretch, leaving the
     shorter slides top-aligned with a page-background strip below them.
     `height: auto` re-enables stretch (all slides match the tallest);
     then the content-wrapper/fluid-engine chain fills the stretched
     slide, and the grid's minmax(X, auto) rows share the extra space
     proportionally — full-grid image blocks reach the slide edges with
     no leftover band above or below the grid (don't center the grid
     instead: that leaves a visible strip on the shorter slides that
     widens as the viewport narrows). */
  .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;

    .content-wrapper {
      flex: 1 1 auto;
    }

    .fluid-engine {
      height: 100%;
    }
  }

  .custom-nav-cluster {
    position: absolute;
    /* Fluid offsets/sizes track the Fluid Engine's vw-based grid so the
       cluster compresses in lockstep with slide content. Reference: 1440px
       design width (48px = 3.33vw, 80px = 5.56vw, 57px = 3.96vw, 12px = 0.83vw).
       Design rule: keep the bottom-right area clear at 1440 in the editor
       and it stays clear at every desktop-layout width down to 768px. */
    right: clamp(16px, 3.33vw, 48px);
    bottom: clamp(16px, 3.33vw, 48px);
    z-index: 20;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(6px, 0.83vw, 12px);
    box-sizing: border-box;
    pointer-events: auto;

    .nav-btn {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      width: clamp(44px, 5.56vw, 80px);
      height: clamp(31px, 3.96vw, 57px);
      padding: 0;
      margin: 0;
      background: transparent;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
      outline: none;
      border-radius: 1000px;
      color: var(--white);
      border: 1px solid hsla(var(--white-hsl), 0.2);

      svg {
        display: block;
        width: clamp(16px, 1.67vw, 24px);
        height: auto;
      }

      &:active {
        transform: scale(0.96);
      }

      &.swiper-button-disabled {
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
      }
    }

    /* Tablet: stack the arrows vertically — one button wide instead of two,
       which frees horizontal space beside slide CTAs and lets the buttons
       stay at a comfortable tap size */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      flex-direction: column;
      gap: 8px;

      .nav-btn {
        width: 64px;
        height: 48px;

        svg {
          width: 20px;
        }
      }
    }

    @media screen and (max-width: 767px) {
      right: 24px;
      bottom: 40px;
      gap: 8px;

      .nav-btn {
        width: 64px;
        height: 48px;

        svg {
          width: 24px;
        }
      }
    }
  }
}

/* --- Premium Badge Spark SVG --- */
#block-543f9306ced1e8071540 h1 em:first-of-type::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: -1.25rem;
  vertical-align: top;
  transform: translateY(-20%);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='58' height='58' viewBox='0 0 58 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.138 28.7445L0 18.9921L0.507258 17.7383L24.7953 27.5513L6.29761 9.05441L7.25379 8.09823L25.4692 26.3141L15.8198 2.43112L17.0743 1.92387L26.9854 26.4546V0H28.3381V25.586L37.9216 1.8657L39.1762 2.37296L29.3767 26.6259L47.8965 8.10583L48.8532 9.06252L30.3759 27.5401L54.6366 17.7383L55.1438 18.9921L31.0049 28.7445H57.0714V30.0972H31.0963L55.2101 39.84L54.7029 41.0938L30.4492 31.2945L48.9722 49.8174L48.016 50.7736L29.2137 31.9712L39.1757 56.6284L37.9212 57.1357L28.3378 33.4138L24.138 28.7445Z' fill='%23F6F5F1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* ======================================
   04. PRODUCT SUMMARY BLOCK (#collection-grid)
====================================== */

body:not(.sqs-edit-mode-active) #collection-grid .summary-block {
  /* Global Summary Block Adjustments */
  .summary-item {
    margin-bottom: 0 !important;
  }

  /* --- Typography --- */
  .summary-title,
  .product-price {
    font-family: var(--heading-font-font-family);
    font-size: var(--heading-4-size) !important;
  }

  @media screen and (max-width: 767px) {
    .summary-title,
    .product-price {
      font-size: 1.2rem !important;
    }
  }

  /* --- Layout Settings: Position Metadata Below Content --- */
  .summary-block-setting-metadata-position-below-content {
    .summary-metadata-container--below-content {
      margin-top: 0 !important;
    }
  }

  /* --- Carousel Controls Layout --- */
  .summary-item-list-container {
    display: flex !important;
    flex-direction: column !important;
  }

  /* --- Carousel: Borders & Styling --- */
  .sqs-gallery-design-carousel {
    order: 1;
    border-top: 1px solid var(--black);
    margin-top: -1px !important;
    margin-bottom: 0 !important;

    /* Flex row equalizes card heights so separator borders always run
       the full height (items are inline-block by default and each stops
       at its own content height). Items keep their JS-set inline widths
       via flex: 0 0 auto, so Squarespace's paging math is unaffected. */
    display: flex !important;
    align-items: stretch !important;

    .summary-item {
      border-right: 1px solid var(--black);
      box-sizing: border-box;
      padding: 2% !important;
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 0 0 auto !important;

      &:first-child {
        border-left: 1px solid var(--black);
      }
    }
  }

  /* --- Header: Hide Title & Draw Bottom Border --- */
  .summary-block-header {
    order: 2;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);

    .summary-heading {
      display: none !important;
    }
  }

  @media screen and (max-width: 767px) {
    .summary-block-header {
      padding: 2px 0 !important;
    }
  }

  /* --- Pager Container --- */
  .summary-carousel-pager {
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px;
    height: 44px !important;
  }

  /* --- Prev/Next Buttons --- */
  .summary-carousel-pager-prev,
  .summary-carousel-pager-next {
    width: 44px !important;
    height: 44px !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    color: var(--black);
    background: transparent !important;
    flex-shrink: 0;

    &::before {
      display: none !important;
    }

    svg path {
      stroke: var(--black);
      transition: opacity 0.2s ease;
    }

    &:hover svg path {
      opacity: 0.5;
    }

    &.sqs-disabled {
      opacity: 0.25 !important;
      cursor: default;
      pointer-events: none;
    }
  }

  .sqs-gallery-controls .next,
  .sqs-gallery-design-carousel .previous {
    margin: 0 !important;
  }

  /* --- Pagination Counter (Injected by JS) --- */
  .glowup-pager-counter {
    font-family: var(--body-font-font-family);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--black);
    min-width: 40px;
    text-align: center;
    position: relative;
    line-height: 1;
  }

  /* --- Individual Summary Item Layout --- */
  .summary-item {
    /* Thumbnail Styling */
    .summary-thumbnail-outer-container {
      border-radius: 10px;
      padding: 12% 10%;
      background: var(--accent);
      margin-bottom: 20px;
      overflow: hidden;
      isolation: isolate;
    }

    /* Content Grid Layout */
    .summary-content {
      display: grid !important;
      grid-template-columns: 1fr max-content;
      grid-template-areas:
        "title price"
        "excerpt excerpt"
        "tags tags";
      /* 1fr excerpt row + flex-grow pins the tag row to the card bottom,
         so tag baselines align across cards of different content heights */
      grid-template-rows: auto 1fr auto;
      flex-grow: 1;
      row-gap: 15px;
      align-items: baseline;
    }

    .summary-title {
      grid-area: title;
      margin: 0 !important;
      padding-right: 15px;
    }

    .summary-price {
      grid-area: price;
      margin: 0 !important;
      text-align: right;
    }

    .summary-excerpt {
      grid-area: excerpt;
      margin: 0 !important;
    }

    /* --- Tags & Metadata --- */
    .summary-metadata-container {
      position: relative;
      grid-area: tags;
      width: 100%;
      overflow: hidden;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: 18px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, var(--siteBackgroundColor));
      }
    }

    .summary-metadata-item--tags {
      font-size: 0 !important; /* hides SQS comma separators between tag links */
      color: transparent !important;
      /* Flex gap spaces pills on both axes — fixes zero vertical
         spacing when pills wrap to a second line */
      display: flex !important;
      width: max-content;
      flex-wrap: nowrap;
      gap: 2px;

      a {
        font-size: 0.7rem !important;
        color: var(--black) !important;
        display: inline-block;
        flex: 0 0 auto;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border: 1px solid var(--black);
        border-radius: 30px;
        padding: 10px 15px;
        font-weight: 500;
        text-decoration: none !important;
        transition: all 0.2s ease;

        &:hover {
          background-color: var(--black);
          color: var(--white) !important;
        }
      }
    }

    @media screen and (max-width: 767px) {
      .summary-content {
        grid-template-rows: auto auto auto;
        row-gap: 6px;
      }

      .summary-excerpt p {
        font-size: 12px;
      }

    }

    /* --- Thumbnail Drop Shadow (Safari-safe) --- */
    .summary-thumbnail-container {
      overflow: visible !important;
      margin-bottom: 0 !important;
    }

    .summary-thumbnail.img-wrapper {
      overflow: visible !important;
    }

    .summary-thumbnail-image {
      filter:
        drop-shadow(0px 3px 4px rgba(18, 12, 8, 0.32))
        drop-shadow(0px 16px 16px rgba(18, 12, 8, 0.18))
        drop-shadow(0px 48px 40px rgba(18, 12, 8, 0.10));
      will-change: filter;
      transform: translateZ(0);
      /* Same motion as the services accordion images (scale 1.03 / 0.55s) */
      transition: transform 0.55s ease;
    }

    &:hover .summary-thumbnail-image {
      transform: translateZ(0) scale(1.03);
    }
  }
}


/* ======================================
   05. PLATFORMS/LOGO BAR BLOCK
====================================== */

#platforms-supported {
  .user-items-list-item-container {
    grid-gap: 0 !important;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    /* Always 6-up on desktop/tablet — overrides Squarespace's responsive
       column drop (4+2 stragglers). 6 items = one clean row. */
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .list-item {
    border-right: 1px solid var(--black);
    padding: 4% 2% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    &:last-child {
      border-right: 0;
    }
  }

  .list-item-media {
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;

    .list-item-media-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 30% 25%;
    }
  }

  .list-item-content {
    display: none !important;
  }

  .user-items-list-simple[data-layout-width="full"] {
    padding: 0 !important;
  }

  /* Tablet: keep 6-up but relax the inner padding so logos stay legible
     in the narrower cells */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .list-item-media .list-item-media-inner {
      padding: 22% 15% !important;
    }
  }

  /* Mobile: 3x2 grid (no stragglers with 6 items), kept compact */
  @media screen and (max-width: 767px) {
    .user-items-list-item-container {
      grid-template-columns: repeat(3, 1fr) !important;
    }

    .list-item {
      padding: 6% 4% !important;

      /* row ends: no right border on items 3 and 6 */
      &:nth-child(3n) {
        border-right: 0;
      }

      /* divider between the two rows */
      &:nth-child(-n+3) {
        border-bottom: 1px solid var(--black);
      }
    }

    .list-item-media .list-item-media-inner {
      padding: 16% 18% !important;
    }
  }
}




/* --- FAQs Image Sizing --- */
#faqs {
  .sqs-image {
    width: 100%;
    height: 100%;
    padding: 3%;
    box-sizing: border-box;
  }
}


/* ======================================
   07. PRODUCTS OVERVIEW (HORIZONTAL ACCORDION)
====================================== */

#products-overview {
  /* Fixed height grid with accordion columns */
  .user-items-list-item-container {
    height: 70vh !important;
    grid-auto-rows: 1fr !important;
    grid-template-columns:
      var(--services-track-1, 1fr)
      var(--services-track-2, 1fr)
      var(--services-track-3, 1fr) !important;
    transition: grid-template-columns 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
    grid-gap: 0px !important;
  }

  .user-items-list-item-container:has(.list-item:nth-of-type(1):hover) {
    --services-track-1: 1.4fr;
    --services-track-2: 0.8fr;
    --services-track-3: 0.8fr;
  }

  .user-items-list-item-container:has(.list-item:nth-of-type(2):hover) {
    --services-track-1: 0.8fr;
    --services-track-2: 1.4fr;
    --services-track-3: 0.8fr;
  }

  .user-items-list-item-container:has(.list-item:nth-of-type(3):hover) {
    --services-track-1: 0.8fr;
    --services-track-2: 0.8fr;
    --services-track-3: 1.4fr;
  }

  /* --- Individual List Items --- */
  .list-item {
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: filter 0.55s ease !important;
  }

  .user-items-list-item-container:has(.list-item:hover) .list-item {
    filter: brightness(0.65);
  }

  .user-items-list-item-container:has(.list-item:hover) .list-item:hover {
    filter: brightness(1);
  }

  /* --- Media & Image Handling --- */
  .list-item-media {
    margin-bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .list-item-media-inner {
    padding-bottom: 0 !important;
    height: 100% !important;
  }

  .list-image {
    height: 100% !important;
    object-fit: cover !important;
    top: 0 !important;
    transition: transform 0.55s ease !important;
  }

  .list-item:hover .list-image {
    transform: scale(1.03);
  }

  /* --- Content Overlay --- */
  .list-item-content {
    display: flex !important;
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 44px 40px !important;
    align-items: flex-end;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.2) 40%,
      transparent 100%
    ) !important;
  }

  .list-item-content__text-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px;
    width: 100%;
  }

  .list-item-content__title {
    color: white !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: none !important;
    white-space: nowrap;
    transition: none !important;
  }

  .list-item-content__description {
    color: white !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: none !important;
    opacity: 0.75;
    transition: none !important;

    p {
      margin: 0 !important;
    }
  }

  /* --- Full-card Link --- */
  /* The visible button is hidden; home.js injects an invisible
     .glowup-card-link overlay <a> into each .list-item pointing at
     the button's URL, so the whole card is clickable. */
  .list-item-content__button-wrapper {
    display: none !important;
  }

  .list-item .glowup-card-link {
    position: absolute;
    inset: 0;
    z-index: 10;
  }

  /* --- Tablet: keep the 3-col accordion, stack title over count
     and relax spacing for the narrower columns --- */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .user-items-list-item-container {
      height: 60vh !important;
    }

    .list-item-content {
      padding: 28px 24px !important;
    }

    .list-item-content__text-wrapper {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 6px !important;
    }

    .list-item-content__title {
      white-space: normal;
      font-size: 2rem !important;
    }

    .list-item-content__description {
      font-size: 0.9rem !important;
    }
  }

  /* --- Mobile: stack the three cards full-width. Hover accordion
     doesn't exist on touch; cards are simple tappable banners --- */
  @media screen and (max-width: 767px) {
    /* Full bleed — zero the native full-width auto-layout gutter
       (small vw-based side padding Squarespace still applies even
       with data-layout-width="full") */
    .user-items-list-simple[data-layout-width="full"] {
      padding: 0 !important;
    }

    /* Zero the native 2vmax top padding on the outer .user-items-list
       wrapper (one level above .user-items-list-simple) so the first
       card sits flush against the section's top edge too */
    .user-items-list {
      padding-top: 0 !important;
    }

    .user-items-list-item-container {
      height: auto !important;
      grid-template-columns: 1fr !important;
      grid-auto-rows: auto !important;
    }

    /* 1:1 square cards instead of the old fixed 280px short banner */
    .list-item {
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
    }

    .list-item-content {
      padding: 20px !important;
    }

    .list-item-content__title {
      font-size: 2.4rem !important;
    }
  }
}


/* ======================================
   08. TESTIMONIALS BLOCK
====================================== */



#testimonials {
  /* Converted from Simple List to Carousel (July 2026) so all three
     testimonials stay reachable at every breakpoint — Squarespace's
     own column settings (3/2/1) drive the layout, no grid hardcodes.
     The carousel's __gutter side padding is what caused the
     misalignment: zero it so slides run flush with the content edges. */
  .user-items-list-carousel__gutter {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Native prev/next arrows hidden — swipe/scroll is enough on mobile */
  .mobile-arrows {
    display: none !important;
  }

  .list-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
    /* every slide carries its divider — slides move in a carousel,
       so there is no stable "last" column to suppress */
    border-right: 1px solid var(--black);
    padding: 12% 0;
    box-sizing: border-box;
  }

  /* --- Remove intermediate wrappers from layout calculation --- */
  .list-item-content,
  .list-item-content__text-wrapper {
    display: contents !important;
  }

  /* --- Title/Rating Stars --- */
  .list-item-content__title {
    order: 1 !important;
    text-align: center !important;
    width: 100%;
    margin-top: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    margin-bottom: auto !important;

    /* Five stars rating */
    &::before {
      content: '★★★★★';
      display: block;
      font-size: 1.75rem;
      color: var(--black);
      letter-spacing: 5px;
      margin-bottom: 25px;
    }
  }

  .list-item-content__description {
    font-family: var(--meta-font-font-family);
    text-transform: uppercase;
    font-weight: 600;
  }

  /* --- Image (Middle) --- */
  /* The carousel renames the media wrapper: .list-item-media (simple
     list) became .user-items-list-carousel__media-container. Both kept
     for safety. */
  .list-item-media,
  .user-items-list-carousel__media-container {
    order: 2 !important;
    margin: 35px auto 25px auto !important;
    width: 80px !important;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }

  .list-item-media-inner,
  .user-items-list-carousel__media-inner {
    border: 1px solid var(--black) !important;
    border-radius: 50% !important;
    overflow: hidden;
    box-sizing: border-box;
    height: 100%;
  }

  .user-items-list-carousel__media {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* --- Description (Bottom) --- */
  .list-item-content__description {
    order: 3 !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100%;
  }

  /* (No grid-template-columns hardcodes and no per-breakpoint item
     hiding: the carousel's own 3/2/1 column settings handle layout,
     and every testimonial stays reachable by scrolling.) */
}



/* ======================================
   10. ANIMATIONS
====================================== */

@keyframes slow-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.asterisk {
  animation: slow-spin 25s linear infinite;
}