/* Slater Essential CSS - Extracted from slater-45446.css */
/* Only includes styles actually used in the project */

/* CSS Variables (if not defined elsewhere, provide defaults) */
:root {
 --size-font: 16px;
 --color-dark: #1c2539;
 --color-light: #ffffff;
 --color-neutral-200: #f5f5f5;
  --color-neutral-300: #e5e5e5;
  --color-neutral-400: #9ca3af;
  --color-neutral-450: #8b949e;
  --color-neutral-500: #6b7280;
  --color-neutral-525: #5a6268;
  --color-neutral-600: #4b5563;
  --color-neutral-800: #1f2937;
  --color-electric: #00ff88;
  --color-purple: #8b5cf6;
  --color-coral: #ff6b6b;
  --color-rgb-gray: 107, 114, 128;
  --color-rgb-tint: 0, 255, 136;
  --color-rgb-light: 255, 255, 255;
  --gap-sm: 0.5em;
  --gap-xxs: 0.25em;
  --animation-default: 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  --animation-ease: 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  --animation-ease-double: 1.2s cubic-bezier(0.625, 0.05, 0, 1);
 --duration-default: 0.6s;
 --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
 --btn-height: 3em;
}

/* Base Styles */
html,
body {
  -webkit-font-smoothing: antialiased;
}

body { 
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior: none;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar{
  display: none;
}

/* Lenis Smooth Scroll Styles */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.lenis {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lenis::-webkit-scrollbar {
  display: none;
}

/* Selection */
::selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}

::-moz-selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}

a{
  color: inherit;
  text-decoration: none;
}

textarea{
  resize: none;
}

button{
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
}

[data-transition-theme="dark"]{ background-color: var(--color-dark); }
[data-transition-theme="light"]{ background-color: var(--color-neutral-200); }

:is(.wf-design-mode, .wf-editor) .transition{ display: none; }

/* ------------------------- BUTTONS & TAGS ------------------------------------------- */

.button[data-shape="round"],
.square-button[data-shape="round"]{ 
  border-radius: 3em;
}

.button[data-size="full"]{ 
  width: 100%;
}

div.button { 
  pointer-events: none;
}

:is(.wf-design-mode, .wf-editor) div.button{ 
  pointer-events: auto; 
}

.button-bg, .button, .tag-bg, button.tag{
  transition: all var(--animation-ease);
}

@media screen and (max-width: 991px){ 
  .button[data-responsive="tablet"]{ 
    width: 100%;
  } 
}

@media screen and (max-width: 767px){ 
  .button[data-responsive="landscape"]{
    width: 100%;
  }
}

@media screen and (max-width: 479px){ 
  .button[data-responsive="mobile"]{
    width: 100%;
  }
}



.button-label,
.button-icon {
  transform-origin: 50% var(--y, 1100%);
}

:is(.wf-design-mode, .wf-editor) .button-label { 
  transform-origin: 50% 1800%;
}

.button-label:not(:nth-of-type(1)),
.square-button .button-icon:not(:nth-of-type(1)) {
  position: absolute;
}

.button-label:nth-of-type(1),
.square-button .button-icon:nth-of-type(1) { 
  transform: rotate(calc(var(--r) * 0));
}

.button-label:nth-of-type(2),
.square-button .button-icon:nth-of-type(2) { 
  transform: rotate(calc(var(--r) * -1));
}

.button-label:nth-of-type(3),
.square-button .button-icon:nth-of-type(3) { 
  transform: rotate(calc(var(--r) * -2));
}

/* ------------------------- Custom Cursor ------------------------- */

.cursor-bubble,
body:has(main [data-button-rotate-hover]:hover) .cursor .cursor-bubble {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear var(--duration-default), color 0s linear var(--duration-default);
  clip-path: inset(50% round 100em);
}

body:has(.product-slider__inner [data-cursor-zone="neutral-600"]:hover) .cursor-bubble {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear 0s, color 0s linear 0s;
}

body:has(.product-slider__inner [data-cursor-zone="purple"]:hover) .cursor-bubble {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear 0s, color 0s linear 0s;
}

body:has(.product-slider__inner [data-cursor-zone="electric"]:hover) .cursor-bubble {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear 0s, color 0s linear 0s;
}

.cursor__drag-dot {
  transition: background-color 0s linear 0.25s;
}

body:has(.product-slider__inner [data-cursor-zone="neutral-600"]:hover) .cursor__drag-dot {
  transition: background-color 0s linear 0s;
}

body:has(.product-slider__inner [data-cursor-zone="purple"]:hover) .cursor__drag-dot {
  transition: background-color 0s linear 0s;
}

body:has(.product-slider__inner [data-cursor-zone="electric"]:hover) .cursor__drag-dot {
  transition: background-color 0s linear 0s;
}

.cursor-bubble, 
.cursor__drag-dots {
  margin-top: 0;
}

body:has([data-cursor]:hover, [data-flick-drag-status] [data-flick-cards-dragger]:hover, .product-slider__inner [data-gsap-slider-collection]:hover) .cursor-bubble {
  clip-path: inset(0% round 100em);  
}

.cursor-bubble__arrow {
  transform: rotate(-90deg);
  transition-delay: var(--duration-default);
}

body:has([data-vertical-slider] [data-cursor]:hover) .cursor-bubble__arrow {
  transition-delay: 0s;
  transform: rotate(0deg);
}

.cursor-bubble__arrow-svg,
body:has(main [data-button-rotate-hover]:hover) .cursor .cursor-bubble__arrow-svg {
  transition: transform var(--animation-default);
  transform: translateY(0%) rotate(0.001deg);
}

@media screen and (pointer: fine){
  
  body:has([data-cursor="prev"]:hover) .cursor-bubble__arrow-svg {
    transform: translateY(100%) rotate(0.001deg);
  }
  
  body:has([data-cursor="next"]:hover) .cursor-bubble__arrow-svg {
    transform: translateY(-100%) rotate(0.001deg);
  }  
  
}

.cursor-bubble__drag-span,
body:has(main [data-button-rotate-hover]:hover) .cursor .cursor-bubble__drag-span{
  transition: transform var(--animation-default);
  transform: translateY(100%) scale(0.5) rotate(0.001deg);
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status] [data-flick-cards-dragger]:hover, .product-slider__inner [data-gsap-slider-collection]:hover) .cursor-bubble__drag-span {
  transform: translateY(0%) scale(1) rotate(0.001deg);
}

.cursor__drag-dots,
body:has(main [data-button-rotate-hover]:hover) .cursor .cursor__drag-dots{
  transition: all var(--animation-default);
  width: 0em;
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status] [data-flick-cards-dragger]:hover, .product-slider__inner [data-gsap-slider-collection]:hover) .cursor__drag-dots {
  width: 6.5em;
  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status="grabbing"] [data-flick-cards-dragger]:hover, [data-gsap-drag-status="grabbing"] [data-gsap-slider-list]:hover) .cursor__drag-dots {
  width: 7.5em;
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status="grabbing"] [data-flick-cards-dragger]:hover, [data-gsap-drag-status="grabbing"] [data-gsap-slider-list]:hover) .cursor-bubble {
  clip-path: inset(7.5% round 100em);
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ------------------------- GSAP Slider -------------------------------------------------- */

[data-gsap-slider-init] {
  --slider-status: on; /* Turn slider on/off */
  --slider-spv: 3.1; /* Slides per view */ 
  --slider-gap: var(--gap-sm); /* Slides Gap */
}

@media screen and (max-width: 991px) {
   [data-gsap-slider-init] {
    --slider-status: on; /* Turn slider on/off */
    --slider-spv: 2.1; /* Slides per view */ 
    --slider-gap: 0.625em;/* Gap */
  } 
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] { 
    --slider-status: on; /* Turn slider on/off */
    --slider-spv: 1; /* Slides per view */ 
    --slider-gap: 0.625em;/* Gap */
  }
}

/* Settings */
[data-gsap-slider-item]:last-child {
	margin-right: 0;
}

[data-gsap-slider-rotate] [data-gsap-slider-item] {
  transform-origin: 50% 300%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-right: 0;
}

:is(.wf-design-mode, .wf-editor) {
  [data-gsap-slider-rotate] [data-gsap-slider-item] {
    position: relative;
    top: auto;
    left: auto;
    margin-right: 0.25em;
  }
}

/* Controls */
[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
	display: none;
}

[data-gsap-slider-control="next"][data-gsap-slider-control-status="not-active"],
[data-gsap-slider-control="prev"][data-gsap-slider-control-status="not-active"]{ 
  opacity: 0.2;
  pointer-events: none;
}

.product-slider [data-gsap-slider-init] [data-gsap-slider-control-status],
.product-slider [data-gsap-slider-init] [data-gsap-slider-control-status] .button-bg {
  transition: all var(--animation-default);
}

.product-slider [data-gsap-slider-init] [data-gsap-slider-control-status="active"] {
  color: var(--color-light);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.04);
}


.product-slider [data-gsap-slider-init] [data-gsap-slider-control-status="active"] .button-bg {
  background-color: var(--color-dark);
}

 

.product-slider [data-gsap-slider-rotate] [data-gsap-slider-item] {
  transform-origin: 50% 375%;
}

@media screen and (max-width: 767px) {
  .product-slider [data-gsap-slider-rotate] [data-gsap-slider-item] {
    transform-origin: 50% 325%;
  } 
}

/* Product Slider Collection - Products Modifier */
.gsap-slider__collection.is--products {
  height: auto;
  background: url('../upload/timeline.svg') center -80% no-repeat;
  background-size: 140%;
}

/* Product Card Dimensions */
.product-card { 
  overflow: hidden;
}

@media screen and (max-width: 991px) {
  .product-card { 
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  .product-card { 
    overflow: visible;
  }
  
  .gsap-slider__collection.is--products {
    overflow: visible;
  }
}

/* GSAP Slider Item - ensure proper dimensions */
[data-gsap-slider-rotate] [data-gsap-slider-item] {
  
}

@media screen and (max-width: 991px) {
  [data-gsap-slider-rotate] [data-gsap-slider-item] {
    
  }
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-rotate] [data-gsap-slider-item] {
     
  }
}

/* Product Slider List (Design Mode) */
:is(.wf-design-mode, .wf-editor) .product-slider__list{ 
  flex-direction: row; 
  justify-content: start; 
  align-items:center; 
  overflow: auto; 
  width: 100vw; 
}

:is(.wf-design-mode, .wf-editor) .product-slider__card{ 
  position: relative; 
  flex-shrink: 0; 
}