:root {
	/* General */
	--default-background-color: rgb(20, 21, 21);
	--default-border-radius: 0px;
	--default-box-shadow: 0 0px 20px rgba(0, 0, 0, 0.2);
	--color-light: #f8f8f8;
	--color-dark: #333;

	/* Intro Section */
	--intro-section-min-height: 100vh;
	--intro-section-height: min-content;
	--intro-section-background-color: var(--default-background-color);
	--intro-section-padding: 20px;

	/* Intro Image */
	--intro-image-width: 100vw;
	--intro-image-height: 100vh;
	--intro-image-border-radius: 0px;
	--intro-image-box-shadow: var(--intro-image-box-shadow);

	/* GSAP sections (formerly .section) */
	--gsap-min-height: 70vh;
	--gsap-height: min-content;

	/* Image Container */
	--image-container-width: 100%;
	--image-container-height: 100%;

	/* Parallax Image */
	--parallax-image-width: 100%;
	--parallax-image-height: 120%;

	/* Text Block */
	--text-block-background-color: var(--default-background-color);
	--text-block-padding: 50px;
	--text-block-border-radius: 0px;
	--text-block-max-width: 800px;
	--text-block-box-shadow: var(--default-box-shadow);

	--h1-color: var(--color-brand);
	--h2-color: var(--color-light);
	--p-color: var(--color-light);

	/* Mosaic Component */
	--mosaic-component-width: 100%;
	--mosaic-component-padding: 100px 0;
	--mosaic-component-background-color: var(--default-background-color);

	/* Mosaic Title */
	--mosaic-title-font-size: 3em;
	--mosaic-title-color: var(--color-dark);

	/* Mosaic Grid */
	--mosaic-grid-gap: 15px;
	--mosaic-grid-width: 70%;
	--mosaic-grid-max-width: 100vw;

	/* Mosaic Item */
	--mosaic-item-border-radius: var(--default-border-radius);
	--mosaic-item-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

	/* Mosaic Item Content Overlay */
	--mosaic-item-content-background-color: rgba(0, 0, 0, 0.3);
	--mosaic-item-content-border-radius: var(--default-border-radius);

	/* BiContent Component */
	--bicontent-height: 100vh;
	--bicontent-flex-gap: 0px;
	--bicontent-content-flex-grow: 1;
	--bicontent-image-wrapper-flex-grow: 1;

	/* BiContent Content */
	--bicontent-content-padding: 50px;
	--bicontent-content-background-color: var(--default-background-color);
	--bicontent-content-text-color: var(--color-light);

	/* BiContent Image */
	--bicontent-image-object-fit: cover;
	--bicontent-image-parallax-min-size: 110%;
	/* Minimum size for parallax movement (110% of wrapper) */
}

h1,
h2 {
	color: var(--color-brand);
	font-family: var(--font-family-title);
	font-weight: 700;
  font-size: 5rem;
}

h2 {
  font-weight: 600;
  font-size: 4rem;
  font-style: oblique;
}

p {
	font-family: var(--font-family);
	color: var(--color-light);

	span {
			font-weight: 500;
	}
}

/* Utility Class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* flex */
.shop-item__promo {
  display: flex;
}

/* centered */
.banner-msg,
.hero-video-background {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* column */
.shop-item,
.shop-item__content {
  display: flex;
  flex-direction: column;
}

/* Font family title */
.shop-item__promo {
  font-family: var(--font-family-title);
  font-weight: 900;
  font-style: italic;
}

/* BANNER MSG */
.banner-msg {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 3;
  background-color: #0b111e;
  color: var(--color-brand);
  padding: 10px 0;
  overflow: hidden;
  text-transform: uppercase;
}

/* ITEMS DESIGN */ 
.shop-item__link {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  overflow: hidden;
  margin: 0 0 75px 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
  padding: 2px;
  border-bottom: 1px solid #ddd;
}

.shop-item__link:hover {
  transform: translateY(-5px);
}

.shop-item {
  height: 100%;
  padding: 2px;
}

.shop-item__image-wrapper {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  background-color: inherit;
  /* background-image: var(--item--wallpaper); */
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #375b31;
  color: #375b31;
}

.shop-item__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.shop-item__promo {
  position: absolute;
  right: 0px;
  padding: 5px 10px;
  background: #0e4f2bc7;
  margin: 5px;
  color: white;
  z-index: 1;
  font-family: var(--font-family-subtitle);
  font-weight: 300;
  box-shadow: 0 0 5px black;

  p {
    color: #ccc;
  font-weight: 600;
  font-style: normal;
  font-family: var(--font-family-title);
  }
}

.shop-item__hook {
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background: #222222a8;
  padding: 4px;
  font-size: 0.7rem;
  font-weight: 300;
  color: #fff;
  font-family: var(--font-family);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.shop-item__link:hover .shop-item__image {
  transform: scale(1.05);
}

.shop-item__content {
  text-align: start;
  flex-grow: 1;
  gap: 5px;
  padding: 15px 0;
}

.shop-item__title {
  font-size: .9rem;
  font-weight: 300;
  color: #888;
  word-break: break-word;
  letter-spacing: .5px;
}

.shop-item__description {
  display: none;
  font-size: 0.8rem;
  color: #999;
  line-height: 1.2;
  word-break: break-word;
  margin: 0 0 10px 0;
}

.shop-item__price {
  font-size: 1.7rem;
  font-weight: 500;
  font-family: var(--font-family-title);
  font-weight: bold;
  color: var(--color-brand-third);
  display: block;
  margin-top: auto;
}

/* --- Hero Video Background Component --- */
.hero-video-background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  text-align: center;
  color: var(--color-white);
}

.hero-video-background__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(100%, auto, auto);
  height: clamp(100%, auto, auto);
  transform: translate(-50%, -50%);
}

.hero-video-background__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.hero-video-background__content {
  position: relative;
  z-index: 3;
  padding: var(--spacing-lg);
  
}

.background-circle {
  border-radius: 50%; /* Makes it a circle */
  background-color: rgba(173, 216, 230, 0.3); /* Light blue with some transparency */
  filter: blur(100px); /* Creates a soft, glowing effect */
  opacity: 0.7; /* Adjust opacity as needed */
  z-index: 5; /* Ensures it stays behind other content */
  /* Add any other default styles here */
}

/* Example of a custom rotation class if not using arbitrary Tailwind values */
.rotate-negative-40-69deg {
  transform: rotate(-40.69deg);
}

/* For the max-mdw:hidden classes if you're using custom media queries */
@media (max-width: 767px) { /* Example breakpoint for md */
  .max-mdw\:hidden {
      display: none !important;
  }
}

/* --- Content Section Component --- */
.content-section {
  padding: 25px;
  margin: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #5151512e;
  border-radius: 30px;
  gap: 100px;
  background: #334159;
  background: linear-gradient(69deg, rgba(51, 65, 89, 1) 0%, rgba(17, 17, 17, 0) 100%);
}

.content-section:last-of-type {
  border-bottom: none;
}

.content-section__body {
    display: flex; 
    flex-direction: row;
  }

.content-section__text {
    padding: 0 100px;
    display: flex;
    flex-direction: column;
  gap: 25px;
      
  h3 {
    font-size: 2rem;
    color:var(--color-brand);
      
    font-weight: 200;
    letter-spacing: 2px;
  }
  p {
    position: sticky;
    top: 50px;
    padding: 0;
    font-weight: 400;
    color: #bbb;
  }
  
  .btn {
    width: fit-content
      ;
  }
  
}

.content-section__media,
.content-section__image,
.content-section__video {
  width: 100%;
  height: auto;

  border-radius: 25px;
  img, video {
    height: 100%;
    object-fit: cover;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .content-section__body {
    flex-direction: column; 
  }
  .content-section--right{
    .content-section__media {
      order: 1;
  } 
  .content-section__text {
    order: 0;
  }
  }
}

/* --- Product Slider Component --- */
.product-slider {
  padding: var(--spacing-xxxxl) var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.product-slider__container {
  display: flex; /* Align buttons and track horizontally */
  align-items: center; /* Vertically center content */
  gap: var(--spacing-md);
  width: 100%;
}

.product-slider__track-wrapper {
  flex-grow: 1; /* Allows track wrapper to take available space */
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  padding-bottom: var(--spacing-lg);
  cursor: grab;
}

/* Hide scrollbar for Webkit browsers */
.product-slider__track-wrapper::-webkit-scrollbar {
  display: none;
}

.product-slider__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-lg);
  width: max-content;
  padding: 0 var(--spacing-sm);
}

.product-slider__item {
  flex: 0 0 auto; /* Prevents items from shrinking */
  width: 280px; /* Fixed width for each product item */
}

.product-slider__arrow {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xl);
  line-height: 1;
  transition: background-color var(--transition-speed-normal)
      var(--transition-ease),
    transform var(--transition-speed-fast) var(--transition-ease);
  flex-shrink: 0; /* Prevents buttons from shrinking */
  width: 40px;
  height: 40px;
  display: flex; /* Centers the arrow icon */
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.product-slider__arrow:hover:not(:disabled) {
  background-color: var(--color-secondary-dark);
  transform: translateY(-2px);
}

.product-slider__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Category Navigation Component --- */
.category__wrapper {
  padding: var(--spacing-xxl) var(--spacing-lg);
  background-color: var(--color-light-gray);
  border-radius: var(--border-radius-md);
  margin: var(--spacing-xxl) auto;
 
}

.category__list {
  display: flex; /* Arranges category items horizontally */
  flex-wrap: nowrap;
  justify-content: start;
  overflow: scroll;
  list-style: none;
  padding: 25px;
  margin: 0;
  gap:10px;
}

.category__link {
  display: block; /* Allows block-level padding/sizing while being a link */
  padding: var(--spacing-sm) var(--spacing-xl);
  background-color: var(--color-secondary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-base);
  font-weight: 500;
  transition: background-color var(--transition-speed-normal)
      var(--transition-ease),
    transform var(--transition-speed-fast) var(--transition-ease);
  white-space: nowrap;
}

.category__link:hover {
  background-color: var(--color-secondary-dark);
  transform: translateY(-2px);
}