/* =========================================================
   LUSTRO — Global Overrides
   Supplements lustro-ecom.webflow.shared.3ed97334a.css
   ========================================================= */

/* -----------------------------------------------------------
   1. Base font smoothing
   ----------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------
   2. Webflow widget state helpers  (replaces webflow.js work)
   ----------------------------------------------------------- */

/* Dropdown list — opacity/visibility transition; JS adds .w--open */
.w-dropdown-list {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.w-dropdown.w--open > .w-dropdown-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Tab panes — hidden by default; JS adds .w--tab-active */
.w-tab-pane {
  display: none;
}
.w-tab-pane.w--tab-active {
  display: block;
}

/* Tab links — active state */
.w-tab-link.w--current {
  /* inherits from main CSS; re-assert for safety */
}

/* Form done / error states */
.w-form-done,
.w-form-fail {
  display: none;
}
.w-form-done.w--form-done-success {
  display: block;
}
.w-form-fail.w--form-fail-show {
  display: block;
}

/* Cart sidebar — hidden until .cart--open added via Vue */
.w-commerce-commercecartcontainerwrapper {
  display: none !important;
}
.w-commerce-commercecartcontainerwrapper.cart--open {
  display: flex !important;
}

/* -----------------------------------------------------------
   3. IX2 scroll-reveal — Webflow slideInBottom preset
      outQuad = cubic-bezier(0.25, 0.46, 0.45, 0.94), 500ms, translateY 40px → 0
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ix2-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .ix2-reveal.ix2-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered reveal for grid children */
  .ix2-reveal-stagger > * {
    opacity: 0;
    transform: translateY(60px);
    transition:
      opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .ix2-reveal-stagger.ix2-visible > *:nth-child(1) { transition-delay: 0ms; }
  .ix2-reveal-stagger.ix2-visible > *:nth-child(2) { transition-delay: 100ms; }
  .ix2-reveal-stagger.ix2-visible > *:nth-child(3) { transition-delay: 200ms; }
  .ix2-reveal-stagger.ix2-visible > *:nth-child(4) { transition-delay: 300ms; }
  .ix2-reveal-stagger.ix2-visible > *:nth-child(5) { transition-delay: 400ms; }
  .ix2-reveal-stagger.ix2-visible > *:nth-child(6) { transition-delay: 500ms; }
  .ix2-reveal-stagger.ix2-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced-motion: always show */
@media (prefers-reduced-motion: reduce) {
  .ix2-reveal,
  .ix2-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -----------------------------------------------------------
   4. IX2 hero entrance animation
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ix2-hero-enter {
    opacity: 0;
    transform: translateY(2rem);
  }
  .ix2-hero-enter.ix2-entered {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1),
      transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ix2-hero-enter,
  .ix2-hero-enter.ix2-entered {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -----------------------------------------------------------
   6. Marquee animations  (replaces IX2 PAGE_FINISH triggers)
      community = 40s, review = 30s, follow = 30s
   ----------------------------------------------------------- */
@keyframes lustro-marquee {
  from { transform: translateX(0%); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Community marquee — overflow hidden + left-aligned for seamless CSS loop */
  .community-marquee-wrapper {
    overflow: hidden;
    justify-content: flex-start;
  }

  .community-marquee-block {
    animation: lustro-marquee 40s linear infinite;
    will-change: transform;
  }

  .review-marquee-block {
    animation: lustro-marquee 30s linear infinite;
    will-change: transform;
  }

  .follow-marquee-block {
    animation: lustro-marquee 30s linear infinite;
    will-change: transform;
  }

  /* Pause on hover for accessibility */
  .community-marquee-wrapper:hover .community-marquee-block,
  .review-marquee-wrapper:hover .review-marquee-block {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .community-marquee-block,
  .review-marquee-block,
  .follow-marquee-block {
    animation: none !important;
  }
}

/* -----------------------------------------------------------
   7. Navbar scroll state — white bg (matches IX2 a-28)
   ----------------------------------------------------------- */
.navbar-v1 {
  transition: background-color 0.5s ease;
  background-color: transparent;
}
.navbar-v1.navbar--scrolled {
  background-color: rgb(255, 255, 255) !important;
}

/* -----------------------------------------------------------
   8. Hover: Blog card image zoom (a-37/a-38)
   ----------------------------------------------------------- */
.blog-cards .blog-cards-image-block {
  overflow: hidden;
}
.blog-cards .blog-card-image {
  transition: transform 0.3s ease;
  transform: scale(1);
}
.blog-cards:hover .blog-card-image {
  transform: scale(1.2);
}

/* -----------------------------------------------------------
   9. Hover: Products card CTA (a-31/a-32) — translateY 20%
   ----------------------------------------------------------- */
.products-card .products-card-cta-block {
  opacity: 0;
  transform: translateY(20%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.products-card:hover .products-card-cta-block {
  opacity: 1;
  transform: translateY(0%);
  pointer-events: auto;
}

/* -----------------------------------------------------------
  10. Hover: Category card description expand (a-29/a-30)
   ----------------------------------------------------------- */
.category-card .category-card-description-block {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.category-card:hover .category-card-description-block {
  max-height: 200px;
  opacity: 1;
}

/* Category desktop grid — staggered placement (matches Webflow w-node grid-area) */
.category-cards-wrapper > .category-card-block:nth-child(1) { grid-area: 1 / 2 / 2 / 3; }
.category-cards-wrapper > .category-card-block:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
.category-cards-wrapper > .category-card-block:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
.category-cards-wrapper > .category-card-block:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }

@media screen and (max-width: 991px) {
  .category-cards-wrapper > .category-card-block:nth-child(1),
  .category-cards-wrapper > .category-card-block:nth-child(2),
  .category-cards-wrapper > .category-card-block:nth-child(3),
  .category-cards-wrapper > .category-card-block:nth-child(4) {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

/* -----------------------------------------------------------
  11. Hover: Button primary invert (a-42/a-43)
       White bg / black text → Black bg / white text
   ----------------------------------------------------------- */
.button-primary {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
.button-primary:hover {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.button-primary .button-text-01 {
  transition: color 0.3s ease;
}

/* -----------------------------------------------------------
  12. Hover: Button secondary (add-to-cart) invert (a-44/a-45)
   ----------------------------------------------------------- */
.button-secondary,
.w-commerce-commerceaddtocartbutton {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
.button-secondary:hover,
.w-commerce-commerceaddtocartbutton:hover {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

/* -----------------------------------------------------------
  13. FAQ accordion initial state
       .faq-answer-block collapsed, .faq-answer-wrapper at scale 0.7
   ----------------------------------------------------------- */
.faq-answer-block {
  overflow: hidden;
  height: 0px;
  transition: height 0.4s ease;
}
.faq-answer-wrapper {
  transform: scale3d(0.7, 0.7, 1);
  transition: transform 0.4s ease;
}
.faq-icon-v2 {
  transition: transform 0.4s ease;
}

/* -----------------------------------------------------------
  14. Product details accordion initial state
   ----------------------------------------------------------- */
.product-details-dropdown-answer-block {
  overflow: hidden;
  height: 0px;
  transition: height 0.3s ease;
}

/* -----------------------------------------------------------
  15. Popup banner initial + transition
   ----------------------------------------------------------- */
.popup-block {
  display: none;
}
.popup-block.popup-visible {
  display: flex;
}
.popup-banner {
  transition: transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s ease;
}
.popup-banner.popup-hidden {
  transform: scale3d(0.5, 0.5, 1);
}

/* -----------------------------------------------------------
  16. Product image gallery opacity transitions
   ----------------------------------------------------------- */
.product-details-large-image-block {
  position: relative;
}
.product-details-large-image-block img {
  transition: opacity 0.3s ease;
}
.product-details-small-image-block img {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* -----------------------------------------------------------
  17. Product filter sidebar — mobile slide in/out
   ----------------------------------------------------------- */
@media (max-width: 991px) {
  .product-filter-items-block {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
    z-index: 9999;
    background: #fff;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    display: block !important;
  }
  .product-filter-items-block.filter-panel-open {
    transform: translateX(0%);
  }
}

/* -----------------------------------------------------------
  18. Filter dropdown sections height accordion
   ----------------------------------------------------------- */
.product-filter-item-dropdown-lists-block {
  overflow: hidden;
  height: auto;
  transition: height 0.5s ease;
}
.product-filter-item-dropdown-lists-block.filter-collapsed {
  height: 0px;
}

/* -----------------------------------------------------------
  19. Slider overrides (category card slider)
   ----------------------------------------------------------- */
.category-card-slider-wrapper .w-slider-mask {
  display: flex;
}

/* -----------------------------------------------------------
  20. Mobile nav — show menu when open
   ----------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu.w--nav-menu-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    overflow-y: auto;
  }
}

/* -----------------------------------------------------------
  21. Blog first card — span 2 columns (matches Webflow w-node)
   ----------------------------------------------------------- */
.blog-first-card {
  grid-column: span 2;
}
@media screen and (max-width: 991px) {
  .blog-first-card {
    grid-column: span 1;
  }
}

/* -----------------------------------------------------------
  22. Category mobile — horizontal scroll/swipe
   ----------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .category-card-slider-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-card-slider-wrapper::-webkit-scrollbar {
    display: none;
  }
  .category-card-slider-wrapper .w-slider-mask {
    width: max-content;
    flex-wrap: nowrap;
  }
  .category-card-slide {
    width: 280px;
    flex-shrink: 0;
  }
}

/* -----------------------------------------------------------
  23. Review marquee wrapper — overflow + direction for loop
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .review-marquee-wrapper {
    overflow: hidden;
    justify-content: flex-start;
  }
}