/* RYSN — site-wide custom CSS.
   Reserved for tiny non-Webflow behavior only (keyframes Webflow can't do,
   prefers-reduced-motion fallbacks, print styles, browser-quirk overrides).
   Section structure, component appearance, and responsive layout all live
   inside the Webflow Designer via existing Client-First / Relume classes. */

/* --- Pipeline smoke test (leave until first real feature ships) ---------- */
:root {
  --rysn-hello: "css-pipeline-ok";
}

/* --- Navbar scroll-state transitions --------------------------------------
   Smooths the visual swap between default (transparent + white text) and
   `is-scrolled` (solid + black text) states. Targets the nav container and
   its color-changing descendants only, so existing Webflow hover transitions
   on links stay intact. */
.navbar_container,
.navbar_container .navbar1_link,
.navbar_container .navbar14_link.is-cart,
.navbar_container .navbar14_link.is-cart > *,
.navbar_container .sm-mini-cart_count,
.navbar_container .rysn_logo,
.navbar_container .menu-icon1_line-top,
.navbar_container .menu-icon1_line-middle,
.navbar_container .menu-icon1_line-middle-inner,
.navbar_container .menu-icon1_line-bottom {
  transition:
    background-color 300ms cubic-bezier(0.625, 0.05, 0, 1),
    color 300ms cubic-bezier(0.625, 0.05, 0, 1),
    fill 300ms cubic-bezier(0.625, 0.05, 0, 1),
    padding 300ms cubic-bezier(0.625, 0.05, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .navbar_container,
  .navbar_container .navbar1_link,
  .navbar_container .navbar14_link.is-cart,
  .navbar_container .navbar14_link.is-cart > *,
  .navbar_container .sm-mini-cart_count,
  .navbar_container .rysn_logo,
  .navbar_container .menu-icon1_line-top,
  .navbar_container .menu-icon1_line-middle,
  .navbar_container .menu-icon1_line-middle-inner,
  .navbar_container .menu-icon1_line-bottom {
    transition: none;
  }
}

/* The regular nav links transition over an effective ~600ms because their
   inherited color "chases" the parent navbar's animated color (a quirk of
   how Webflow's `color: inherit` utility interacts with stacked transitions).
   The cart link is a plain <div> chain that doesn't chase, so it finished
   ~300ms ahead and looked out of sync. Match the visible duration by slowing
   the cart's color/fill transition to 600ms. */
.navbar_container .navbar14_link.is-cart,
.navbar_container .navbar14_link.is-cart > *,
.navbar_container .sm-mini-cart_count {
  transition-duration: 600ms, 600ms, 600ms, 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .navbar_container .navbar14_link.is-cart,
  .navbar_container .navbar14_link.is-cart > *,
  .navbar_container .sm-mini-cart_count {
    transition: none;
  }
}

/* Webflow hard-sets the current-page link to white, which is correct against
   the transparent top state but invisible once `.is-scrolled` flips the bar
   light. Restore inheritance in the scrolled state so the active link picks
   up the same dark color as its siblings. Underline (set by Webflow) stays. */
.navbar_container.is-scrolled .navbar1_link.w--current {
  color: inherit;
}

/* --- Swiper slider (Osmo Supply) ------------------------------------------
   Custom CSS for the Swiper.js slider resource. Pagination tokens, slide gap
   pattern, navigation button transition, and disabled-state hide. */
body{
  --swiper-pagination-color: currentColor;
  --swiper-pagination-bottom: auto;
  --swiper-pagination-bullet-size: 0.5em;
  --swiper-pagination-bullet-inactive-color: currentColor;
  --swiper-pagination-bullet-inactive-opacity: 0.15;
  --swiper-pagination-bullet-horizontal-gap: 0.25em;
  --swiper-wrapper-transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1);
}

.swiper-slide{
  --gap: 1.25em;
  padding-right: var(--gap);
}

.swiper-slide:last-of-type{
  margin-right: calc(-1 * var(--gap));
}

.swiper-navigation__button{
  transition: opacity 0.2s ease;
}

.swiper-button-disabled{
  opacity: 0;
  pointer-events: none;
}

/* Per-slider gap overrides (Figma-spec) */
.testimonials_slider-group .swiper-slide{
  --gap: 1.5em;
}

/* --- Product grid: drop right border on last card of each row -------------
   Assumes 3 cols on desktop, 2 cols on tablet, 1 col on mobile (Relume default).
   Webflow's CMS wraps each item in its own `.w-dyn-item`, so :nth-child has to
   target the wrapper — not the .product1_item itself, which is always the only
   child of its parent. */
@media screen and (min-width: 992px) {
  .product_list > .w-dyn-item:nth-child(3n) > .product1_item,
  .product_list > .w-dyn-item:last-child > .product1_item {
    border-right: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .product_list > .w-dyn-item:nth-child(2n) > .product1_item,
  .product_list > .w-dyn-item:last-child > .product1_item {
    border-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .product_list > .w-dyn-item > .product1_item {
    border-right: 0;
  }
}

/* --- Before/After Split Slider (Osmo Supply) ------------------------------
   Pseudo-element ring + hover scale on the splitter handle. Pseudo-elements
   can't be authored in Webflow Designer, so this lives here. */
img::selection {
  background: none;
}

.splitter-handle__center::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100em;
  opacity: 1;
  border: 1px solid white;
  transition: all 0.4s cubic-bezier(0.35, 1, 0.6, 1);
}

.splitter-handle:hover .splitter-handle__center::after {
  width: 130%;
  height: 130%;
  opacity: 0.5;
}

/* --- Underline link animation (Osmo Supply) -------------------------------
   Add `data-underline-link` to any link for a hover-draws underline. Add
   `data-underline-link="alt"` for the alt variant (existing underline swipes
   out, then a new one swipes in from the opposite side on hover).

   When a parent element carries `data-hover`, hovering the parent triggers
   the underline on a descendant `[data-underline-link]` — useful for cards
   where the whole tile should drive the link's hover state. */
[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}