@layer components {

  .btn-primary {

    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium        hover:bg-primary-dark transition-all duration-300        shadow-md hover:shadow-lg transform hover:-translate-y-0.5;

  }

  .btn-secondary {

    @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium        hover:bg-primary hover:text-white transition-all duration-300        shadow-md hover:shadow-lg transform hover:-translate-y-0.5;

  }

  .nav-link {

    @apply text-luxury hover:text-primary transition-colors duration-300 relative        after:content-[''] after:absolute after:bottom-0 after:left-0        after:w-0 after:h-0.5 after:bg-primary        hover:after:w-full after:transition-all after:duration-300;

  }

  .product-card {

    @apply bg-white rounded-xl shadow-md overflow-hidden        hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1;

  }

  .product-card img {

    @apply transition-transform duration-500 hover:scale-105;

  }

  .section-title {

    @apply text-3xl md:text-4xl font-serif text-luxury text-center mb-8        relative pb-4 after:content-[''] after:absolute        after:bottom-0 after:left-1/2 after:-translate-x-1/2        after:w-24 after:h-1 after:bg-primary;

  }

  .slide60 {

    @apply lg:w-[60%] relative group h-[280px] md:h-[400px] lg:h-[500px];

  }

  .slide40 {

    @apply lg:w-[40%] bg-gradient-to-br from-primary-light via-primary to-primary-dark rounded-2xl p-1 md:p-1 lg:p-1 mt-1 lg:mt-0 h-auto lg:h-[500px] flex;

  }

}

.card {

  @apply bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-300;

}

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.animate-fadeIn {

  animation: fadeIn 0.5s ease-out;

}

body {

  @apply font-sans text-dark bg-white overflow-x-hidden;

}

* {

  box-sizing: border-box;

}

html,

body {

  overflow-x: hidden;

  width: 100%;

  max-width: 100%;

}

html {

  scroll-behavior: smooth;

}

.container {

  @apply mx-auto px-4 max-w-[1300px] overflow-x-hidden;

}

.btn-primary {

  @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-primary-dark transition-all duration-300 shadow-soft hover:shadow-medium transform hover:-translate-y-0.5;

}

.btn-secondary {

  @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition-all duration-300 shadow-soft hover:shadow-medium transform hover:-translate-y-0.5;

}

.nav-link {

  @apply text-dark hover:text-primary transition-colors duration-300 relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-primary hover:after:w-full after:transition-all after:duration-300;

}

#mainNav {

  position: sticky !important;

  top: 0 !important;

  z-index: 1 !important;

  transition: all 0.3s ease !important;

  will-change: transform !important;

}

#mainNav.sticky-active {

  background: rgba(255, 255, 255, 0.98) !important;

  backdrop-filter: blur(20px) !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;

}

@supports (position: sticky) {

  #mainNav {

    position: sticky !important;

    top: 0 !important;

  }

}

.product-card {

  @apply bg-white rounded-xl shadow-soft overflow-hidden hover:shadow-medium transition-all duration-300 transform hover:-translate-y-1;

}

.product-card img {

  @apply transition-transform duration-500 hover:scale-105;

}

.section-title {

  @apply text-3xl md:text-4xl font-serif text-dark text-center mb-8 relative pb-4 after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-24 after:h-1 after:bg-primary;

}

input,

select,

textarea {

  @apply rounded-lg border-gray-200 focus:border-primary focus:ring focus:ring-primary/20 transition-all duration-300;

}

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.animate-fadeIn {

  animation: fadeIn 0.5s ease-out;

}

.hover-lift {

  @apply transition-transform duration-300 hover:-translate-y-1;

}

.hover-glow {

  @apply transition-shadow duration-300 hover:shadow-medium;

}

.text-gradient {

  @apply bg-gradient-to-r from-primary to-primary-dark bg-clip-text text-transparent;

}

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.animate-float-ring {

  animation: float-ring 3s ease-in-out infinite;

}

.animate-float-ring-slow {

  animation: float-ring-slow 4s ease-in-out infinite;

}

.animate-float-jewelry {

  animation: float-jewelry 2.5s ease-in-out infinite;

}

.group:hover .animate-float-ring {

  animation-duration: 2s;

}

.group:hover .animate-float-ring-slow {

  animation-duration: 3s;

}

.group:hover .animate-float-jewelry {

  animation-duration: 2s;

}

:root {

  --primary: #92d6ad;

  --primary-dark: #7bc59a;

}

body,

html {

  overflow-x: hidden;

  width: 100%;

  max-width: 100%;

}

#catSegBar .seg {

  width: 6px;

  background: #e5e7eb;

  border-radius: 2px;

  transition: height 200ms ease, background-color 200ms ease;

}

#catSegBar .seg.active {

  background: #92d6ad;

}

#catLeft,

#catRight {

  opacity: 0.5;

  transition: opacity 0.3s ease;

}

#catLeft:hover,

#catRight:hover {

  opacity: 1;

}

#catLeft.opacity-50,

#catRight.opacity-50 {

  opacity: 0.5;

}

*,

::before,

::after {

  --tw-border-spacing-x: 0;

  --tw-border-spacing-y: 0;

  --tw-translate-x: 0;

  --tw-translate-y: 0;

  --tw-rotate: 0;

  --tw-skew-x: 0;

  --tw-skew-y: 0;

  --tw-scale-x: 1;

  --tw-scale-y: 1;

  --tw-pan-x: ;

  --tw-pan-y: ;

  --tw-pinch-zoom: ;

  --tw-scroll-snap-strictness: proximity;

  --tw-gradient-from-position: ;

  --tw-gradient-via-position: ;

  --tw-gradient-to-position: ;

  --tw-ordinal: ;

  --tw-slashed-zero: ;

  --tw-numeric-figure: ;

  --tw-numeric-spacing: ;

  --tw-numeric-fraction: ;

  --tw-ring-inset: ;

  --tw-ring-offset-width: 0px;

  --tw-ring-offset-color: #fff;

  --tw-ring-color: rgb(59 130 246 / 0.5);

  --tw-ring-offset-shadow: 0 0 #0000;

  --tw-ring-shadow: 0 0 #0000;

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  --tw-blur: ;

  --tw-brightness: ;

  --tw-contrast: ;

  --tw-grayscale: ;

  --tw-hue-rotate: ;

  --tw-invert: ;

  --tw-saturate: ;

  --tw-sepia: ;

  --tw-drop-shadow: ;

  --tw-backdrop-blur: ;

  --tw-backdrop-brightness: ;

  --tw-backdrop-contrast: ;

  --tw-backdrop-grayscale: ;

  --tw-backdrop-hue-rotate: ;

  --tw-backdrop-invert: ;

  --tw-backdrop-opacity: ;

  --tw-backdrop-saturate: ;

  --tw-backdrop-sepia: ;

  --tw-contain-size: ;

  --tw-contain-layout: ;

  --tw-contain-paint: ;

  --tw-contain-style: ;

}

::backdrop {

  --tw-border-spacing-x: 0;

  --tw-border-spacing-y: 0;

  --tw-translate-x: 0;

  --tw-translate-y: 0;

  --tw-rotate: 0;

  --tw-skew-x: 0;

  --tw-skew-y: 0;

  --tw-scale-x: 1;

  --tw-scale-y: 1;

  --tw-pan-x: ;

  --tw-pan-y: ;

  --tw-pinch-zoom: ;

  --tw-scroll-snap-strictness: proximity;

  --tw-gradient-from-position: ;

  --tw-gradient-via-position: ;

  --tw-gradient-to-position: ;

  --tw-ordinal: ;

  --tw-slashed-zero: ;

  --tw-numeric-figure: ;

  --tw-numeric-spacing: ;

  --tw-numeric-fraction: ;

  --tw-ring-inset: ;

  --tw-ring-offset-width: 0px;

  --tw-ring-offset-color: #fff;

  --tw-ring-color: rgb(59 130 246 / 0.5);

  --tw-ring-offset-shadow: 0 0 #0000;

  --tw-ring-shadow: 0 0 #0000;

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  --tw-blur: ;

  --tw-brightness: ;

  --tw-contrast: ;

  --tw-grayscale: ;

  --tw-hue-rotate: ;

  --tw-invert: ;

  --tw-saturate: ;

  --tw-sepia: ;

  --tw-drop-shadow: ;

  --tw-backdrop-blur: ;

  --tw-backdrop-brightness: ;

  --tw-backdrop-contrast: ;

  --tw-backdrop-grayscale: ;

  --tw-backdrop-hue-rotate: ;

  --tw-backdrop-invert: ;

  --tw-backdrop-opacity: ;

  --tw-backdrop-saturate: ;

  --tw-backdrop-sepia: ;

  --tw-contain-size: ;

  --tw-contain-layout: ;

  --tw-contain-paint: ;

  --tw-contain-style: ;

} /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

*,

::after,

::before {

  box-sizing: border-box;

  border-width: 0;

  border-style: solid;

  border-color: #e5e7eb;

}

::after,

::before {

  --tw-content: "";

}

:host,

html {

  line-height: 1.5;

  -webkit-text-size-adjust: 100%;

  -moz-tab-size: 4;

  tab-size: 4;

  font-family: Montserrat, sans-serif;

  font-feature-settings: normal;

  font-variation-settings: normal;

  -webkit-tap-highlight-color: transparent;

}

body {

  margin: 0;

  line-height: inherit;

}

hr {

  height: 0;

  color: inherit;

  border-top-width: 1px;

}

abbr:where([title]) {

  -webkit-text-decoration: underline dotted;

  text-decoration: underline dotted;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  font-size: inherit;

  font-weight: inherit;

}

a {

  color: inherit;

  text-decoration: inherit;

}

b,

strong {

  font-weight: bolder;

}

code,

kbd,

pre,

samp {

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,

    "Liberation Mono", "Courier New", monospace;

  font-feature-settings: normal;

  font-variation-settings: normal;

  font-size: 1em;

}

small {

  font-size: 80%;

}

sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}

sub {

  bottom: -0.25em;

}

sup {

  top: -0.5em;

}

table {

  text-indent: 0;

  border-color: inherit;

  border-collapse: collapse;

}

button,

input,

optgroup,

select,

textarea {

  font-family: inherit;

  font-feature-settings: inherit;

  font-variation-settings: inherit;

  font-size: 100%;

  font-weight: inherit;

  line-height: inherit;

  letter-spacing: inherit;

  color: inherit;

  margin: 0;

  padding: 0;

}

button,

select {

  text-transform: none;

}

button,

input:where([type="button"]),

input:where([type="reset"]),

input:where([type="submit"]) {

  -webkit-appearance: button;

  background-color: transparent;

  background-image: none;

}

:-moz-focusring {

  outline: auto;

}

:-moz-ui-invalid {

  box-shadow: none;

}

progress {

  vertical-align: baseline;

}

::-webkit-inner-spin-button,

::-webkit-outer-spin-button {

  height: auto;

}

[type="search"] {

  -webkit-appearance: textfield;

  outline-offset: -2px;

}

::-webkit-search-decoration {

  -webkit-appearance: none;

}

::-webkit-file-upload-button {

  -webkit-appearance: button;

  font: inherit;

}

summary {

  display: list-item;

}

blockquote,

dd,

dl,

figure,

h1,

h2,

h3,

h4,

h5,

h6,

hr,

p,

pre {

  margin: 0;

}

fieldset {

  margin: 0;

  padding: 0;

}

legend {

  padding: 0;

}

menu,

ol,

ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

dialog {

  padding: 0;

}

textarea {

  resize: vertical;

}

input::placeholder,

textarea::placeholder {

  opacity: 1;

  color: #9ca3af;

}

[role="button"],

button {

  cursor: pointer;

}

:disabled {

  cursor: default;

}

audio,

canvas,

embed,

iframe,

img,

object,

svg,

video {

  display: block;

  vertical-align: middle;

}

img,

video {

  max-width: 100%;

  height: auto;

}

[hidden]:where(:not([hidden="until-found"])) {

  display: none;

}

.container {

  width: 100%;

}

@media (min-width: 640px) {

  .container {

    max-width: 640px;

  }

}

@media (min-width: 768px) {

  .container {

    max-width: 768px;

  }

}

@media (min-width: 1024px) {

  .container {

    max-width: 1024px;

  }

}

@media (min-width: 1280px) {

  .container {

    max-width: 1280px;

  }

}

@media (min-width: 1560px) {

  .container {

    max-width: 1560px;

  }

}

.section-title {

  position: relative;

  margin-bottom: 2rem;

  padding-bottom: 1rem;

  text-align: center;

  font-family: Playfair Display, serif;

  font-size: 1.875rem;

  line-height: 2.25rem;

  --tw-text-opacity: 1;

  color: rgb(44 44 44 / var(--tw-text-opacity, 1));

}

.section-title::after {

  position: absolute;

  bottom: 0px;

  left: 50%;

  height: 0.25rem;

  width: 6rem;

  --tw-translate-x: -50%;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

  --tw-bg-opacity: 1;

  background-color: rgb(146 214 173 / var(--tw-bg-opacity, 1));

  --tw-content: "";

  content: var(--tw-content);

}

@media (min-width: 768px) {

  .section-title {

    font-size: 2.25rem;

    line-height: 2.5rem;

  }

}

.pointer-events-none {

  pointer-events: none;

}

.pointer-events-auto {

  pointer-events: auto;

}

.invisible {

  visibility: hidden;

}

.fixed {

  position: fixed;

}

.absolute {

  position: absolute;

}

.relative {

  position: relative;

}

.sticky {

  position: sticky;

}

.inset-0 {

  inset: 0px;

}

.inset-x-0 {

  left: 0px;

  right: 0px;

}

.bottom-0 {

  bottom: 0px;

}

.left-0 {

  left: 0px;

}

.left-2 {

  left: 0.5rem;

}

.left-3 {

  left: 0.75rem;

}

.left-4 {

  left: 1rem;

}

.right-0 {

  right: 0px;

}

.right-2 {

  right: 0.5rem;

}

.right-3 {

  right: 0.75rem;

}

.top-0 {

  top: 0px;

}

.top-1\/2 {

  top: 50%;

}

.top-full {

  top: 100%;

}

.end-0 {

  inset-inline-end: 0px;

}

.start-0 {

  inset-inline-start: 0px;

}

.bottom-12 {

  bottom: 3rem;

}

.left-8 {

  left: 2rem;

}

.top-2 {

  top: 0.5rem;

}

.-top-2 {

  top: -0.5rem;

}

.left-1\/2 {

  left: 50%;

}

.z-10 {

  z-index: 10;

}

.z-50 {

  z-index: 50;

}

.z-\[60\] {

  z-index: 60;

}

.z-\[70\] {

  z-index: 70;

}

.z-30 {

  z-index: 30;

}

.z-40 {

  z-index: 40;

}

.z-20 {

  z-index: 20;

}

.-z-10 {

  z-index: -10;

}

.col-span-1 {

  grid-column: span 1 / span 1;

}

.col-span-3 {

  grid-column: span 3 / span 3;

}

.mx-8 {

  margin-left: 2rem;

  margin-right: 2rem;

}

.mx-auto {

  margin-left: auto;

  margin-right: auto;

}

.mb-1 {

  margin-bottom: 0.25rem;

}

.mb-2 {

  margin-bottom: 0.5rem;

}

.mb-3 {

  margin-bottom: 0.75rem;

}

.mb-4 {

  margin-bottom: 1rem;

}

.mb-6 {

  margin-bottom: 1.5rem;

}

.ml-2 {

  margin-left: 0.5rem;

}

.ml-auto {

  margin-left: auto;

}

.mt-2 {

  margin-top: 0.5rem;

}

.mt-3 {

  margin-top: 0.75rem;

}

.mt-4 {

  margin-top: 1rem;

}

.mr-3 {

  margin-right: 0.75rem;

}

.mt-1 {

  margin-top: 0.25rem;

}

.mt-auto {

  margin-top: auto;

}

.mb-10 {

  margin-bottom: 2.5rem;

}

.mb-12 {

  margin-bottom: 3rem;

}

.mb-16 {

  margin-bottom: 4rem;

}

.mt-10 {

  margin-top: 2.5rem;

}

.mt-12 {

  margin-top: 3rem;

}

.mt-16 {

  margin-top: 4rem;

}

.mt-0 {

  margin-top: 0px;

}

.block {

  display: block;

}

.inline-block {

  display: inline-block;

}

.flex {

  display: flex;

}

.inline-flex {

  display: inline-flex;

}

.grid {

  display: grid;

}

.hidden {

  display: none;

}

.h-0\.5 {

  height: 0.125rem;

}

.h-10 {

  height: 2.5rem;

}

.h-12 {

  height: 3rem;

}

.h-16 {

  height: 4rem;

}

.h-2 {

  height: 0.5rem;

}

.h-24 {

  height: 6rem;

}

.h-3 {

  height: 0.75rem;

}

.h-4 {

  height: 1rem;

}

.h-5 {

  height: 1.25rem;

}

.h-6 {

  height: 1.5rem;

}

.h-8 {

  height: 2rem;

}

.h-full {

  height: 100%;

}

.h-\[140px\] {

  height: 140px;

}

.h-\[280px\] {

  height: 280px;

}

.h-auto {

  height: auto;

}

.h-\[120px\] {

  height: 120px;

}

.h-\[200px\] {

  height: 200px;

}

.h-\[260px\] {

  height: 260px;

}

.h-\[2px\] {

  height: 2px;

}

.min-h-screen {

  min-height: 100vh;

}

.min-h-\[300px\] {

  min-height: 300px;

}

.min-h-\[60px\] {

  min-height: 60px;

}

.w-10 {

  width: 2.5rem;

}

.w-12 {

  width: 3rem;

}

.w-16 {

  width: 4rem;

}

.w-24 {

  width: 6rem;

}

.w-3 {

  width: 0.75rem;

}

.w-4 {

  width: 1rem;

}

.w-5 {

  width: 1.25rem;

}

.w-6 {

  width: 1.5rem;

}

.w-64 {

  width: 16rem;

}

.w-8 {

  width: 2rem;

}

.w-80 {

  width: 20rem;

}

.w-full {

  width: 100%;

}

.w-1\/2 {

  width: 50%;

}

.w-2 {

  width: 0.5rem;

}

.w-\[60px\] {

  width: 60px;

}

.min-w-\[18px\] {

  min-width: 18px;

}

.max-w-md {

  max-width: 28rem;

}

.max-w-sm {

  max-width: 24rem;

}

.max-w-xl {

  max-width: 36rem;

}

.max-w-2xl {

  max-width: 42rem;

}

.max-w-5xl {

  max-width: 64rem;

}

.max-w-\[180px\] {

  max-width: 180px;

}

.max-w-xs {

  max-width: 20rem;

}

.flex-1 {

  flex: 1 1 0%;

}

.flex-shrink-0 {

  flex-shrink: 0;

}

.-translate-x-full {

  --tw-translate-x: -100%;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.-translate-y-1\/2 {

  --tw-translate-y: -50%;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.translate-x-full {

  --tw-translate-x: 100%;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.-translate-x-1\/2 {

  --tw-translate-x: -50%;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.-translate-y-full {

  --tw-translate-y: -100%;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.translate-x-0 {

  --tw-translate-x: 0px;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.transform {

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

@keyframes pulse {

  50% {

    opacity: 0.5;

  }

}

.animate-pulse {

  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}

.cursor-pointer {

  cursor: pointer;

}

.select-none {

  -webkit-user-select: none;

  user-select: none;

}

.grid-cols-2 {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}

.grid-cols-3 {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}

.grid-cols-1 {

  grid-template-columns: repeat(1, minmax(0, 1fr));

}

.flex-col {

  flex-direction: column;

}

.flex-wrap {

  flex-wrap: wrap;

}

.items-start {

  align-items: flex-start;

}

.items-center {

  align-items: center;

}

.justify-center {

  justify-content: center;

}

.justify-between {

  justify-content: space-between;

}

.gap-1 {

  gap: 0.25rem;

}

.gap-2 {

  gap: 0.5rem;

}

.gap-3 {

  gap: 0.75rem;

}

.gap-4 {

  gap: 1rem;

}

.gap-1\.5 {

  gap: 0.375rem;

}

.gap-6 {

  gap: 1.5rem;

}

.gap-8 {

  gap: 2rem;

}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {

  --tw-space-x-reverse: 0;

  margin-right: calc(0.5rem * var(--tw-space-x-reverse));

  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));

}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {

  --tw-space-y-reverse: 0;

  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));

  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));

}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {

  --tw-space-y-reverse: 0;

  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));

  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));

}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {

  --tw-space-y-reverse: 0;

  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));

  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));

}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {

  --tw-space-y-reverse: 0;

  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));

  margin-bottom: calc(1rem * var(--tw-space-y-reverse));

}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {

  --tw-space-x-reverse: 0;

  margin-right: calc(0.25rem * var(--tw-space-x-reverse));

  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));

}

.space-x-12 > :not([hidden]) ~ :not([hidden]) {

  --tw-space-x-reverse: 0;

  margin-right: calc(3rem * var(--tw-space-x-reverse));

  margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));

}

.overflow-hidden {

  overflow: hidden;

}

.overflow-visible {

  overflow: visible;

}

.overflow-y-auto {

  overflow-y: auto;

}

.overflow-x-hidden {

  overflow-x: hidden;

}

.whitespace-nowrap {

  white-space: nowrap;

}

.rounded {

  border-radius: 0.25rem;

}

.rounded-2xl {

  border-radius: 1rem;

}

.rounded-full {

  border-radius: 9999px;

}

.rounded-lg {

  border-radius: 0.5rem;

}

.rounded-xl {

  border-radius: 0.75rem;

}

.rounded-md {

  border-radius: 0.375rem;

}

.rounded-bl-none {

  border-bottom-left-radius: 0px;

}

.rounded-tl-none {

  border-top-left-radius: 0px;

}

.rounded-br-none {

  border-bottom-right-radius: 0px;

}

.rounded-tr-none {

  border-top-right-radius: 0px;

}

.border {

  border-width: 1px;

}

.border-b {

  border-bottom-width: 1px;

}

.border-t {

  border-top-width: 1px;

}

.border-r {

  border-right-width: 1px;

}

.border-none {

  border-style: none;

}

.border-gray-100 {

  --tw-border-opacity: 1;

  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));

}

.border-gray-200 {

  --tw-border-opacity: 1;

  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));

}

.border-gray-300 {

  --tw-border-opacity: 1;

  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));

}

.border-primary {

  --tw-border-opacity: 1;

  border-color: rgb(146 214 173 / var(--tw-border-opacity, 1));

}

.border-gray-200\/60 {

  border-color: rgb(229 231 235 / 0.6);

}

.border-transparent {

  border-color: transparent;

}

.border-white\/10 {

  border-color: rgb(255 255 255 / 0.1);

}

.bg-black\/50 {

  background-color: rgb(0 0 0 / 0.5);

}

.bg-gray-100 {

  --tw-bg-opacity: 1;

  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));

}

.bg-gray-200 {

  --tw-bg-opacity: 1;

  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));

}

.bg-gray-50 {

  --tw-bg-opacity: 1;

  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));

}

.bg-primary {

  --tw-bg-opacity: 1;

  background-color: rgb(146 214 173 / var(--tw-bg-opacity, 1));

}

.bg-primary\/10 {

  background-color: rgb(146 214 173 / 0.1);

}

.bg-white {

  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

}

.bg-white\/20 {

  background-color: rgb(255 255 255 / 0.2);

}

.bg-white\/95 {

  background-color: rgb(255 255 255 / 0.95);

}

.bg-\[\#8ad1a675\] {

  background-color: #8ad1a675;

}

.bg-white\/10 {

  background-color: rgb(255 255 255 / 0.1);

}

.bg-gray-900 {

  --tw-bg-opacity: 1;

  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));

}

.bg-green-500 {

  --tw-bg-opacity: 1;

  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));

}

.bg-white\/80 {

  background-color: rgb(255 255 255 / 0.8);

}

.bg-white\/90 {

  background-color: rgb(255 255 255 / 0.9);

}

.bg-gradient-to-br {

  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));

}

.bg-gradient-to-r {

  background-image: linear-gradient(to right, var(--tw-gradient-stops));

}

.bg-gradient-to-t {

  background-image: linear-gradient(to top, var(--tw-gradient-stops));

}

.bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/diamond-upholstery\.png\'\)\] {

  background-image: url("https://www.transparenttextures.com/patterns/diamond-upholstery.png");

}

.from-green-400 {

  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-green-50 {

  --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-pink-500 {

  --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-primary {

  --tw-gradient-from: #92d6ad var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(146 214 173 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-primary\/10 {

  --tw-gradient-from: rgb(146 214 173 / 0.1) var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(146 214 173 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-primary\/20 {

  --tw-gradient-from: rgb(146 214 173 / 0.2) var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(146 214 173 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-gray-50 {

  --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-black\/70 {

  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-primary-light {

  --tw-gradient-from: #a8dfbf var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(168 223 191 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-\[\#a8937f\] {

  --tw-gradient-from: #a8937f var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(168 147 127 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-black\/90 {

  --tw-gradient-from: rgb(0 0 0 / 0.9) var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-blue-50 {

  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-emerald-500 {

  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-orange-50 {

  --tw-gradient-from: #fff7ed var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-pink-50 {

  --tw-gradient-from: #fdf2f8 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(253 242 248 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-purple-50 {

  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-red-50 {

  --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-teal-400 {

  --tw-gradient-from: #2dd4bf var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-teal-50 {

  --tw-gradient-from: #f0fdfa var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(240 253 250 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-white\/40 {

  --tw-gradient-from: rgb(255 255 255 / 0.4) var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-yellow-50 {

  --tw-gradient-from: #fefce8 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(254 252 232 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-primary\/90 {

  --tw-gradient-from: rgb(146 214 173 / 0.9) var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(146 214 173 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.from-primary\/95 {

  --tw-gradient-from: rgb(146 214 173 / 0.95) var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(146 214 173 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.via-black\/20 {

  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from),

    rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);

}

.via-primary {

  --tw-gradient-to: rgb(146 214 173 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from),

    #92d6ad var(--tw-gradient-via-position), var(--tw-gradient-to);

}

.via-black\/50 {

  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from),

    rgb(0 0 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);

}

.to-emerald-50 {

  --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);

}

.to-emerald-500 {

  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);

}

.to-primary-dark {

  --tw-gradient-to: #7ac598 var(--tw-gradient-to-position);

}

.to-primary\/10 {

  --tw-gradient-to: rgb(146 214 173 / 0.1) var(--tw-gradient-to-position);

}

.to-primary\/5 {

  --tw-gradient-to: rgb(146 214 173 / 0.05) var(--tw-gradient-to-position);

}

.to-red-500 {

  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);

}

.to-gray-100 {

  --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);

}

.to-transparent {

  --tw-gradient-to: transparent var(--tw-gradient-to-position);

}

.to-\[\#3d7788\] {

  --tw-gradient-to: #3d7788 var(--tw-gradient-to-position);

}

.to-\[\#6a0f76\] {

  --tw-gradient-to: #6a0f76 var(--tw-gradient-to-position);

}

.to-\[\#cabeb2\] {

  --tw-gradient-to: #cabeb2 var(--tw-gradient-to-position);

}

.to-black\/40 {

  --tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);

}

.to-blue-100 {

  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);

}

.to-green-100 {

  --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position);

}

.to-orange-100 {

  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);

}

.to-pink-100 {

  --tw-gradient-to: #fce7f3 var(--tw-gradient-to-position);

}

.to-purple-100 {

  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);

}

.to-red-100 {

  --tw-gradient-to: #fee2e2 var(--tw-gradient-to-position);

}

.to-teal-100 {

  --tw-gradient-to: #ccfbf1 var(--tw-gradient-to-position);

}

.to-yellow-100 {

  --tw-gradient-to: #fef9c3 var(--tw-gradient-to-position);

}

.to-\[rgb\(45\2c 127\2c 78\2c 0\.9\)\] {

  --tw-gradient-to: rgb(45, 127, 78, 0.9) var(--tw-gradient-to-position);

}

.to-\[rgb\(45\2c 127\2c 78\2c 0\.95\)\] {

  --tw-gradient-to: rgb(45, 127, 78, 0.95) var(--tw-gradient-to-position);

}

.object-contain {

  object-fit: contain;

}

.object-cover {

  object-fit: cover;

}

.p-2 {

  padding: 0.5rem;

}

.p-3 {

  padding: 0.75rem;

}

.p-4 {

  padding: 1rem;

}

.p-6 {

  padding: 1.5rem;

}

.p-8 {

  padding: 2rem;

}

.p-1 {

  padding: 0.25rem;

}

.p-1\.5 {

  padding: 0.375rem;

}

.px-1\.5 {

  padding-left: 0.375rem;

  padding-right: 0.375rem;

}

.px-2 {

  padding-left: 0.5rem;

  padding-right: 0.5rem;

}

.px-3 {

  padding-left: 0.75rem;

  padding-right: 0.75rem;

}

.px-4 {

  padding-left: 1rem;

  padding-right: 1rem;

}

.px-6 {

  padding-left: 1.5rem;

  padding-right: 1.5rem;

}

.py-0\.5 {

  padding-top: 0.125rem;

  padding-bottom: 0.125rem;

}

.py-1 {

  padding-top: 0.25rem;

  padding-bottom: 0.25rem;

}

.py-12 {

  padding-top: 3rem;

  padding-bottom: 3rem;

}

.py-2 {

  padding-top: 0.5rem;

  padding-bottom: 0.5rem;

}

.py-2\.5 {

  padding-top: 0.625rem;

  padding-bottom: 0.625rem;

}

.py-3 {

  padding-top: 0.75rem;

  padding-bottom: 0.75rem;

}

.py-4 {

  padding-top: 1rem;

  padding-bottom: 1rem;

}

.px-1 {

  padding-left: 0.25rem;

  padding-right: 0.25rem;

}

.py-20 {

  padding-top: 5rem;

  padding-bottom: 5rem;

}

.py-6 {

  padding-top: 1.5rem;

  padding-bottom: 1.5rem;

}

.py-16 {

  padding-top: 4rem;

  padding-bottom: 4rem;

}

.py-8 {

  padding-top: 2rem;

  padding-bottom: 2rem;

}

.pl-10 {

  padding-left: 2.5rem;

}

.pl-12 {

  padding-left: 3rem;

}

.pr-4 {

  padding-right: 1rem;

}

.pt-2 {

  padding-top: 0.5rem;

}

.pt-4 {

  padding-top: 1rem;

}

.pb-4 {

  padding-bottom: 1rem;

}

.pb-6 {

  padding-bottom: 1.5rem;

}

.pb-8 {

  padding-bottom: 2rem;

}

.pt-0 {

  padding-top: 0px;

}

.pt-3 {

  padding-top: 0.75rem;

}

.pt-8 {

  padding-top: 2rem;

}

.text-left {

  text-align: left;

}

.text-center {

  text-align: center;

}

.text-right {

  text-align: right;

}

.font-serif {

  font-family: Playfair Display, serif;

}

.text-2xl {

  font-size: 1.5rem;

  line-height: 2rem;

}

.text-lg {

  font-size: 1.125rem;

  line-height: 1.75rem;

}

.text-sm {

  font-size: 0.875rem;

  line-height: 1.25rem;

}

.text-xl {

  font-size: 1.25rem;

  line-height: 1.75rem;

}

.text-xs {

  font-size: 0.75rem;

  line-height: 1rem;

}

.text-base {

  font-size: 1rem;

  line-height: 1.5rem;

}

.text-3xl {

  font-size: 1.875rem;

  line-height: 2.25rem;

}

.text-4xl {

  font-size: 2.25rem;

  line-height: 2.5rem;

}

.font-bold {

  font-weight: 700;

}

.font-medium {

  font-weight: 500;

}

.font-semibold {

  font-weight: 600;

}

.uppercase {

  text-transform: uppercase;

}

.leading-relaxed {

  line-height: 1.625;

}

.leading-tight {

  line-height: 1.25;

}

.tracking-wider {

  letter-spacing: 0.05em;

}

.text-blue-500 {

  --tw-text-opacity: 1;

  color: rgb(59 130 246 / var(--tw-text-opacity, 1));

}

.text-gray-400 {

  --tw-text-opacity: 1;

  color: rgb(156 163 175 / var(--tw-text-opacity, 1));

}

.text-gray-500 {

  --tw-text-opacity: 1;

  color: rgb(107 114 128 / var(--tw-text-opacity, 1));

}

.text-gray-600 {

  --tw-text-opacity: 1;

  color: rgb(75 85 99 / var(--tw-text-opacity, 1));

}

.text-gray-700 {

  --tw-text-opacity: 1;

  color: rgb(55 65 81 / var(--tw-text-opacity, 1));

}

.text-gray-900 {

  --tw-text-opacity: 1;

  color: rgb(17 24 39 / var(--tw-text-opacity, 1));

}

.text-green-500 {

  --tw-text-opacity: 1;

  color: rgb(34 197 94 / var(--tw-text-opacity, 1));

}

.text-green-600 {

  --tw-text-opacity: 1;

  color: rgb(22 163 74 / var(--tw-text-opacity, 1));

}

.text-orange-500 {

  --tw-text-opacity: 1;

  color: rgb(249 115 22 / var(--tw-text-opacity, 1));

}

.text-primary {

  --tw-text-opacity: 1;

  color: rgb(146 214 173 / var(--tw-text-opacity, 1));

}

.text-white {

  --tw-text-opacity: 1;

  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

}

.text-yellow-300 {

  --tw-text-opacity: 1;

  color: rgb(253 224 71 / var(--tw-text-opacity, 1));

}

.text-primary-darker {

  --tw-text-opacity: 1;

  color: rgb(95 181 137 / var(--tw-text-opacity, 1));

}

.text-white\/80 {

  color: rgb(255 255 255 / 0.8);

}

.text-white\/90 {

  color: rgb(255 255 255 / 0.9);

}

.text-amber-800 {

  --tw-text-opacity: 1;

  color: rgb(146 64 14 / var(--tw-text-opacity, 1));

}

.text-luxury {

  --tw-text-opacity: 1;

  color: rgb(44 44 44 / var(--tw-text-opacity, 1));

}

.text-teal-800 {

  --tw-text-opacity: 1;

  color: rgb(17 94 89 / var(--tw-text-opacity, 1));

}

.text-white\/60 {

  color: rgb(255 255 255 / 0.6);

}

.line-through {

  -webkit-text-decoration-line: line-through;

  text-decoration-line: line-through;

}

.placeholder-white\/50::placeholder {

  color: rgb(255 255 255 / 0.5);

}

.opacity-0 {

  opacity: 0;

}

.opacity-70 {

  opacity: 0.7;

}

.opacity-80 {

  opacity: 0.8;

}

.opacity-90 {

  opacity: 0.9;

}

.opacity-50 {

  opacity: 0.5;

}

.opacity-10 {

  opacity: 0.1;

}

.shadow-2xl {

  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.shadow-sm {

  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.shadow-xl {

  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),

    0 8px 10px -6px rgb(0 0 0 / 0.1);

  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),

    0 8px 10px -6px var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.shadow-lg {

  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),

    0 4px 6px -4px rgb(0 0 0 / 0.1);

  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),

    0 4px 6px -4px var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.shadow-md {

  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),

    0 2px 4px -2px var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.backdrop-blur-lg {

  --tw-backdrop-blur: blur(16px);

  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)

    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)

    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)

    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)

    var(--tw-backdrop-sepia);

  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)

    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)

    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)

    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)

    var(--tw-backdrop-sepia);

}

.backdrop-blur-sm {

  --tw-backdrop-blur: blur(4px);

  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)

    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)

    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)

    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)

    var(--tw-backdrop-sepia);

  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)

    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)

    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)

    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)

    var(--tw-backdrop-sepia);

}

.transition-all {

  transition-property: all;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}

.transition-colors {

  transition-property: color, background-color, border-color, fill, stroke,

    -webkit-text-decoration-color;

  transition-property: color, background-color, border-color,

    text-decoration-color, fill, stroke;

  transition-property: color, background-color, border-color,

    text-decoration-color, fill, stroke, -webkit-text-decoration-color;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}

.transition-opacity {

  transition-property: opacity;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}

.transition-transform {

  transition-property: transform;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}

.transition {

  transition-property: color, background-color, border-color, fill, stroke,

    opacity, box-shadow, transform, filter, -webkit-text-decoration-color,

    -webkit-backdrop-filter;

  transition-property: color, background-color, border-color,

    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,

    backdrop-filter;

  transition-property: color, background-color, border-color,

    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,

    backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}

.duration-200 {

  transition-duration: 200ms;

}

.duration-300 {

  transition-duration: 300ms;

}

.duration-700 {

  transition-duration: 700ms;

}

.ease-in-out {

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

.ease-out {

  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

}

.card {

  border-radius: 1rem;

  border-width: 1px;

  --tw-border-opacity: 1;

  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));

  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  transition-property: all;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 300ms;

}

.card:hover {

  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),

    0 2px 4px -2px var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.animate-fadeIn {

  animation: fadeIn 0.5s ease-out;

}

.after\:absolute::after {

  content: var(--tw-content);

  position: absolute;

}

.after\:bottom-0::after {

  content: var(--tw-content);

  bottom: 0px;

}

.after\:left-0::after {

  content: var(--tw-content);

  left: 0px;

}

.after\:h-0\.5::after {

  content: var(--tw-content);

  height: 0.125rem;

}

.after\:w-0::after {

  content: var(--tw-content);

  width: 0px;

}

.after\:bg-primary::after {

  content: var(--tw-content);

  --tw-bg-opacity: 1;

  background-color: rgb(146 214 173 / var(--tw-bg-opacity, 1));

}

.after\:transition-all::after {

  content: var(--tw-content);

  transition-property: all;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}

.after\:duration-300::after {

  content: var(--tw-content);

  transition-duration: 300ms;

}

.after\:content-\[\'\'\]::after {

  --tw-content: "";

  content: var(--tw-content);

}

.hover\:-translate-y-0\.5:hover {

  --tw-translate-y: -0.125rem;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.hover\:scale-105:hover {

  --tw-scale-x: 1.05;

  --tw-scale-y: 1.05;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.hover\:border-primary\/30:hover {

  border-color: rgb(146 214 173 / 0.3);

}

.hover\:border-primary\/20:hover {

  border-color: rgb(146 214 173 / 0.2);

}

.hover\:bg-gray-100:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));

}

.hover\:bg-gray-50:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));

}

.hover\:bg-primary:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(146 214 173 / var(--tw-bg-opacity, 1));

}

.hover\:bg-primary-dark:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(122 197 152 / var(--tw-bg-opacity, 1));

}

.hover\:bg-primary\/10:hover {

  background-color: rgb(146 214 173 / 0.1);

}

.hover\:bg-primary\/5:hover {

  background-color: rgb(146 214 173 / 0.05);

}

.hover\:bg-white\/30:hover {

  background-color: rgb(255 255 255 / 0.3);

}

.hover\:bg-primary-darker:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(95 181 137 / var(--tw-bg-opacity, 1));

}

.hover\:bg-primary\/20:hover {

  background-color: rgb(146 214 173 / 0.2);

}

.hover\:bg-white:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

}

.hover\:bg-white\/90:hover {

  background-color: rgb(255 255 255 / 0.9);

}

.hover\:text-gray-600:hover {

  --tw-text-opacity: 1;

  color: rgb(75 85 99 / var(--tw-text-opacity, 1));

}

.hover\:text-gray-700:hover {

  --tw-text-opacity: 1;

  color: rgb(55 65 81 / var(--tw-text-opacity, 1));

}

.hover\:text-primary:hover {

  --tw-text-opacity: 1;

  color: rgb(146 214 173 / var(--tw-text-opacity, 1));

}

.hover\:text-primary-dark:hover {

  --tw-text-opacity: 1;

  color: rgb(122 197 152 / var(--tw-text-opacity, 1));

}

.hover\:text-red-500:hover {

  --tw-text-opacity: 1;

  color: rgb(239 68 68 / var(--tw-text-opacity, 1));

}

.hover\:text-white:hover {

  --tw-text-opacity: 1;

  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

}

.hover\:text-primary\/80:hover {

  color: rgb(146 214 173 / 0.8);

}

.hover\:shadow-md:hover {

  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),

    0 2px 4px -2px var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.hover\:after\:w-full:hover::after {

  content: var(--tw-content);

  width: 100%;

}

.focus\:bg-white:focus {

  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

}

.focus\:shadow-lg:focus {

  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),

    0 4px 6px -4px rgb(0 0 0 / 0.1);

  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),

    0 4px 6px -4px var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.focus\:outline-none:focus {

  outline: 2px solid transparent;

  outline-offset: 2px;

}

.focus\:ring-2:focus {

  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0

    var(--tw-ring-offset-width) var(--tw-ring-offset-color);

  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0

    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),

    var(--tw-shadow, 0 0 #0000);

}

.focus\:ring-primary:focus {

  --tw-ring-opacity: 1;

  --tw-ring-color: rgb(146 214 173 / var(--tw-ring-opacity, 1));

}

.focus\:ring-primary\/20:focus {

  --tw-ring-color: rgb(146 214 173 / 0.2);

}

.focus\:ring-white\/20:focus {

  --tw-ring-color: rgb(255 255 255 / 0.2);

}

.group:hover .group-hover\:visible {

  visibility: visible;

}

.group:hover .group-hover\:translate-x-1 {

  --tw-translate-x: 0.25rem;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.group:hover .group-hover\:rotate-180 {

  --tw-rotate: 180deg;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.group:hover .group-hover\:scale-105 {

  --tw-scale-x: 1.05;

  --tw-scale-y: 1.05;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.group:hover .group-hover\:scale-110 {

  --tw-scale-x: 1.1;

  --tw-scale-y: 1.1;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))

    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}

.group:hover .group-hover\:bg-\[\#8ad1a675\] {

  background-color: #8ad1a675;

}

.group:hover .group-hover\:from-emerald-600 {

  --tw-gradient-from: #059669 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.group:hover .group-hover\:from-teal-500 {

  --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.group:hover .group-hover\:from-yellow-500 {

  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);

  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}

.group:hover .group-hover\:via-primary {

  --tw-gradient-to: rgb(146 214 173 / 0) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-from),

    #92d6ad var(--tw-gradient-via-position), var(--tw-gradient-to);

}

.group:hover .group-hover\:to-amber-600 {

  --tw-gradient-to: #d97706 var(--tw-gradient-to-position);

}

.group:hover .group-hover\:to-green-600 {

  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);

}

.group:hover .group-hover\:to-teal-700 {

  --tw-gradient-to: #0f766e var(--tw-gradient-to-position);

}

.group:hover .group-hover\:font-semibold {

  font-weight: 600;

}

.group:hover .group-hover\:text-primary {

  --tw-text-opacity: 1;

  color: rgb(146 214 173 / var(--tw-text-opacity, 1));

}

.group:hover .group-hover\:opacity-100 {

  opacity: 1;

}

.group:focus .group-focus\:outline-none {

  outline: 2px solid transparent;

  outline-offset: 2px;

}

@media (min-width: 640px) {

  .sm\:col-span-2 {

    grid-column: span 2 / span 2;

  }

  .sm\:mb-0 {

    margin-bottom: 0px;

  }

  .sm\:mb-10 {

    margin-bottom: 2.5rem;

  }

  .sm\:mb-3 {

    margin-bottom: 0.75rem;

  }

  .sm\:mb-4 {

    margin-bottom: 1rem;

  }

  .sm\:h-16 {

    height: 4rem;

  }

  .sm\:h-32 {

    height: 8rem;

  }

  .sm\:h-8 {

    height: 2rem;

  }

  .sm\:h-\[135px\] {

    height: 135px;

  }

  .sm\:h-\[250px\] {

    height: 250px;

  }

  .sm\:w-20 {

    width: 5rem;

  }

  .sm\:w-32 {

    width: 8rem;

  }

  .sm\:w-8 {

    width: 2rem;

  }

  .sm\:grid-cols-2 {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .sm\:flex-row {

    flex-direction: row;

  }

  .sm\:gap-4 {

    gap: 1rem;

  }

  .sm\:gap-6 {

    gap: 1.5rem;

  }

  .sm\:p-4 {

    padding: 1rem;

  }

  .sm\:p-6 {

    padding: 1.5rem;

  }

  .sm\:px-4 {

    padding-left: 1rem;

    padding-right: 1rem;

  }

  .sm\:text-left {

    text-align: left;

  }

  .sm\:text-lg {

    font-size: 1.125rem;

    line-height: 1.75rem;

  }

  .sm\:text-sm {

    font-size: 0.875rem;

    line-height: 1.25rem;

  }

  .sm\:text-xl {

    font-size: 1.25rem;

    line-height: 1.75rem;

  }

}

@media (min-width: 768px) {

  .md\:mb-4 {

    margin-bottom: 1rem;

  }

  .md\:block {

    display: block;

  }

  .md\:flex {

    display: flex;

  }

  .md\:hidden {

    display: none;

  }

  .md\:h-10 {

    height: 2.5rem;

  }

  .md\:h-5 {

    height: 1.25rem;

  }

  .md\:h-\[180px\] {

    height: 180px;

  }

  .md\:h-\[400px\] {

    height: 400px;

  }

  .md\:h-40 {

    height: 10rem;

  }

  .md\:h-\[152px\] {

    height: 152px;

  }

  .md\:h-\[280px\] {

    height: 280px;

  }

  .md\:h-\[6rem\] {

    height: 6rem;

  }

  .md\:w-96 {

    width: 24rem;

  }

  .md\:w-5 {

    width: 1.25rem;

  }

  .md\:w-40 {

    width: 10rem;

  }

  .md\:w-\[8rem\] {

    width: 8rem;

  }

  .md\:w-80 {

    width: 20rem;

  }

  .md\:w-auto {

    width: auto;

  }

  .md\:grid-cols-4 {

    grid-template-columns: repeat(4, minmax(0, 1fr));

  }

  .md\:grid-cols-2 {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .md\:flex-row {

    flex-direction: row;

  }

  .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {

    --tw-space-x-reverse: 0;

    margin-right: calc(0.75rem * var(--tw-space-x-reverse));

    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));

  }

  .md\:p-1 {

    padding: 0.25rem;

  }

  .md\:p-2 {

    padding: 0.5rem;

  }

  .md\:p-6 {

    padding: 1.5rem;

  }

  .md\:py-3 {

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

  }

  .md\:py-6 {

    padding-top: 1.5rem;

    padding-bottom: 1.5rem;

  }

  .md\:text-3xl {

    font-size: 1.875rem;

    line-height: 2.25rem;

  }

  .md\:text-base {

    font-size: 1rem;

    line-height: 1.5rem;

  }

  .md\:text-lg {

    font-size: 1.125rem;

    line-height: 1.75rem;

  }

  .md\:text-xl {

    font-size: 1.25rem;

    line-height: 1.75rem;

  }

  .md\:text-2xl {

    font-size: 1.5rem;

    line-height: 2rem;

  }

  .md\:text-4xl {

    font-size: 2.25rem;

    line-height: 2.5rem;

  }

  .md\:text-5xl {

    font-size: 3rem;

    line-height: 1;

  }

}

@media (min-width: 1024px) {

  .lg\:col-span-5 {

    grid-column: span 5 / span 5;

  }

  .lg\:col-span-7 {

    grid-column: span 7 / span 7;

  }

  .lg\:mt-0 {

    margin-top: 0px;

  }

  .lg\:h-\[220px\] {

    height: 220px;

  }

  .lg\:h-\[500px\] {

    height: 500px;

  }

  .lg\:h-14 {

    height: 3.5rem;

  }

  .lg\:h-\[320px\] {

    height: 320px;

  }

  .lg\:h-\[360px\] {

    height: 360px;

  }

  .lg\:w-\[40\%\] {

    width: 40%;

  }

  .lg\:w-\[60\%\] {

    width: 60%;

  }

  .lg\:w-14 {

    width: 3.5rem;

  }

  .lg\:-translate-y-\[46px\] {

    --tw-translate-y: -46px;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y))

      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))

      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

  }

  .lg\:grid-cols-12 {

    grid-template-columns: repeat(12, minmax(0, 1fr));

  }

  .lg\:grid-cols-8 {

    grid-template-columns: repeat(8, minmax(0, 1fr));

  }

  .lg\:grid-cols-9 {

    grid-template-columns: repeat(9, minmax(0, 1fr));

  }

  .lg\:grid-cols-4 {

    grid-template-columns: repeat(4, minmax(0, 1fr));

  }

  .lg\:flex-row {

    flex-direction: row;

  }

  .lg\:gap-6 {

    gap: 1.5rem;

  }

  .lg\:gap-4 {

    gap: 1rem;

  }

  .lg\:p-1 {

    padding: 0.25rem;

  }

  .lg\:p-4 {

    padding: 1rem;

  }

  .lg\:text-2xl {

    font-size: 1.5rem;

    line-height: 2rem;

  }

  .lg\:text-3xl {

    font-size: 1.875rem;

    line-height: 2.25rem;

  }

  .lg\:text-sm {

    font-size: 0.875rem;

    line-height: 1.25rem;

  }

}

.announcement-slider {

  position: relative;

}

.announcement-slider:hover .announcement-prev,

.announcement-slider:hover .announcement-next {

  opacity: 1;

}

.announcement-slider .swiper-slide {

  text-align: center;

}

:root {

  --primary: #92d6ad;

  --primary-dark: #7bc59a;

}

.line-clamp-2 {

  overflow: hidden;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  min-height: 2.5rem;

  max-height: 2.5rem;

}

.bestSellersSwiper .swiper-wrapper {

  display: flex;

  align-items: stretch;

}

.bestSellersSwiper .swiper-slide {

  width: auto;

  flex-shrink: 0;

  min-width: 280px;

  max-width: 300px;

  display: flex;

  justify-content: center;

}

@media (min-width: 1280px) {

  .bestSellersSwiper .swiper-wrapper {

    justify-content: space-between;

  }

  .bestSellersSwiper .swiper-slide {

    width: calc(20% - 4px);

    max-width: 100% !important;

    min-width: calc(20% - 4px);

    flex: 0 0 auto;

  }

}

@media (max-width: 640px) {

  .bestSellersSwiper .swiper-slide {

    min-width: 280px;

    max-width: 360px;

  }

}

@media (min-width: 641px) and (max-width: 1023px) {

  .bestSellersSwiper .swiper-slide {

    min-width: 230px;

    max-width: 250px;

  }

}

@media (min-width: 1024px) {

  .bestSellersSwiper .swiper-slide {

    min-width: 220px;

    max-width: 240px;

  }

}

.premium-product-card {

  background: white;

  border-radius: 0.75rem;

  overflow: hidden;

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

  transition: all 0.3s ease;

  border: 1px solid #e5e7eb;

  height: 100%;

  display: flex;

  flex-direction: column;

}

.premium-product-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),

    0 2px 4px -1px rgba(0, 0, 0, 0.06);

  border-color: #92d6ad;

}

.premium-image-container {

  background: #f9fafb;

  border-radius: 12px;

  overflow: hidden;

  position: relative;

  flex-shrink: 0;

  width: 100%;

}

.premium-image-container img {

  width: 100%;

  height: 100%;

}

.product-content {

  flex: 1;

  display: flex;

  flex-direction: column;

  padding: 16px;

  gap: 12px;

}

.premium-price-badge {

  background: #ffffff;

  border: 1px solid rgb(231 231 231);

  border-radius: 12px;

  transition: all 0.3s ease;

  min-height: 48px;

}

.premium-product-card:hover .premium-price-badge {

  box-shadow: 0 4px 12px rgba(146, 214, 173, 0.2);

  border-color: rgba(146, 214, 173, 0.3);

}

.premium-feature-box {

  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

  border: 1px solid rgba(146, 214, 173, 0.15);

  border-radius: 8px;

  transition: all 0.3s ease;

  padding: 8px 6px;

  text-align: center;

}

.premium-feature-box:hover {

  background: linear-gradient(

    135deg,

    rgba(146, 214, 173, 0.1) 0%,

    rgba(146, 214, 173, 0.05) 100%

  );

  border-color: rgba(146, 214, 173, 0.3);

  transform: translateY(-1px);

}

.premium-details-btn {

  background: linear-gradient(136deg, #41c375 0%, #92d6ad 100%);

  border-radius: 10px;

  color: white;

  transition: all 0.3s ease;

}

.premium-details-btn:hover {

  background: linear-gradient(

    135deg,

    var(--primary) 0%,

    var(--primary-dark) 100%

  );

  border-color: var(--primary);

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(146, 214, 173, 0.3);

}

.image-indicators {

  position: absolute;

  bottom: 8px;

  left: 8px;

  right: 8px;

  display: flex;

  justify-content: center;

  gap: 3px;

  z-index: 5;

}

.indicator-dot {

  flex: 1;

  height: 4px;

  border-radius: 2px;

  transition: all 0.2s ease;

  cursor: pointer;

  border: none;

  background: rgba(255, 255, 255, 0.6);

}

.indicator-dot.active {

  background: #92d6ad;

  box-shadow: 0 0 8px rgba(146, 214, 173, 0.6);

}

.indicator-dot.inactive {

  background: rgb(204 204 204 / 32%);

}

.indicator-dot:hover {

  background: #92d6ad;

  opacity: 0.8;

}

#kategori-butonlar {

  overflow-x: hidden;

  width: 100%;

  max-width: 1500px;

  margin: 0 auto;

}

.kategoriSwiper {

  overflow: hidden !important;

  width: 100%;

  max-width: 100%;

  position: relative;

  padding: 0 16px;

}

.kategoriSwiper .swiper-slide {

  width: auto;

  height: auto;

  display: flex;

  justify-content: center;

  margin-right: 0;

  flex-shrink: 0;

  min-width: 0;

  box-sizing: border-box;

  padding: 0 2px;

}

.kategori-swiper-button-next,

.kategori-swiper-button-prev {

  background: white;

  border-radius: 50%;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  width: 40px;

  height: 40px;

  color: #92d6ad;

  border: 1px solid #e5e7eb;

  transition: all 0.3s ease;

  top: 50% !important;

  transform: translateY(-50%);

}

.kategori-swiper-button-next {

  right: 8px !important;

}

.kategori-swiper-button-prev {

  left: 8px !important;

}

.kategori-swiper-button-next:hover,

.kategori-swiper-button-prev:hover {

  background: #92d6ad;

  color: white;

  transform: translateY(-50%) scale(1.1);

}

.kategori-swiper-button-next:after,

.kategori-swiper-button-prev:after {

  font-size: 14px;

  font-weight: bold;

}

.kategori-swiper-pagination {

  bottom: 0;

}

.kategori-swiper-pagination .swiper-pagination-bullet {

  background: #d1d5db;

  opacity: 0.5;

  transition: all 0.3s ease;

}

.kategori-swiper-pagination .swiper-pagination-bullet-active {

  background: #92d6ad;

  opacity: 1;

  transform: scale(1.2);

}

.kategoriSwiper .swiper-wrapper {

  align-items: center;

  padding: 0;

  margin: 0;

  width: 100%;

  display: flex;

  overflow: visible;

  position: relative;

}

#kategori-butonlar .card {

  box-shadow: none;

  border: none;

  background: none;

  min-height: 120px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: relative;

  overflow: hidden;

  max-width: 100%;

  width: 100%;

  box-sizing: border-box;

}

#kategori-butonlar .card img {

  max-width: 100%;

  height: auto;

  transition: all 0.3s ease;

}

#kategori-butonlar .card:hover img {

  transform: scale(1.05);

}

@media (max-width: 640px) {

  #kategori-butonlar {

    overflow-x: hidden;

    width: 110vw;

    max-width: 100%; 

    position: relative;

  }

  .kategoriSwiper {

    padding: 0 25px;

    overflow: visible;

  }

  .kategoriSwiper .swiper-slide {

    min-width: 110px;

    max-width: 130px;

  }

  .kategori-swiper-button-next,

  .kategori-swiper-button-prev {

    width: 36px;

    height: 36px;

  }

  .kategori-swiper-button-next:after,

  .kategori-swiper-button-prev:after {

    font-size: 12px;

  }

  #kategori-butonlar .card {

    min-height: 100px;

    padding: 0.75rem;

    max-width: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e9e9e9;

  }

  #kategori-butonlar .card img {

    max-width: 80%;

  }

  body,

  html {

    overflow-x: hidden;

    width: 100%;

    max-width: 100%;

  }

}

@media (min-width: 641px) and (max-width: 1023px) {

  #kategori-butonlar .card {

    min-height: 110px;

  }

}

.relatedProductsSwiper .swiper-wrapper {

  display: flex;

  align-items: stretch;

}

.relatedProductsSwiper .swiper-slide {

  width: auto;

  flex-shrink: 0;

  min-width: 280px;

  max-width: 320px;

  display: flex;

  justify-content: center;

  height: auto;

}

@media (min-width: 1280px) {

  .relatedProductsSwiper .swiper-wrapper {

    justify-content: space-between;

  }

  .relatedProductsSwiper .swiper-slide {

    width: calc(20% - 4px);

    max-width: 100% !important;

    min-width: calc(20% - 4px);

    flex: 0 0 auto;

  }

}

@media (max-width: 640px) {

  .relatedProductsSwiper .swiper-slide {

    min-width: 280px;

    max-width: 360px;

  }

}

@media (min-width: 641px) and (max-width: 1023px) {

  .relatedProductsSwiper .swiper-slide {

    min-width: 230px;

    max-width: 250px;

  }

}

@media (min-width: 1024px) {

  .relatedProductsSwiper .swiper-slide {

    min-width: 220px;

    max-width: 240px;

  }

}

.bg-primary {

  background-color: var(--primary) !important;

}

.border-primary {

  border-color: var(--primary) !important;

}

.bestSellersSwiper .swiper-button-next:after,

.bestSellersSwiper .swiper-button-prev:after {

  display: none;

}

.custom-nav-btn {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: white;

  border: 2px solid #e5e7eb;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  cursor: pointer;

}

.custom-nav-btn:hover {

  border-color: var(--primary);

  color: var(--primary);

}

.custom-nav-btn:hover i {

  color: var(--primary) !important;

}

.swiper-pagination {

  display: flex;

  gap: 6px;

  justify-content: center;

  width: auto !important;

  margin: 0 auto;

}

.swiper-pagination-bullet {

  width: 30px !important;

  height: 3px !important;

  border-radius: 2px !important;

  background: rgba(255, 255, 255, 0.3) !important;

  opacity: 1 !important;

  transition: all 0.3s ease;

  flex-shrink: 0;

}

.swiper-pagination-bullet-active {

  background: white !important;

  transform: scale(1.2);

}

.vertical-hero-slider .swiper-pagination {

  position: absolute !important;

  bottom: 20px !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  width: auto !important;

  z-index: 10;

  display: flex !important;

  gap: 8px !important;

  justify-content: center !important;

}

.vertical-hero-slider .swiper-pagination-bullet {

  width: 40px !important;

  height: 4px !important;

  border-radius: 2px !important;

  background: rgba(255, 255, 255, 0.4) !important;

  margin: 0 4px !important;

}

.vertical-hero-slider .swiper-pagination-bullet-active {

  background: white !important;

  transform: scale(1.1);

  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

}

.product-content {

  display: flex;

  flex-direction: column;

  gap: 2px;

  padding: 16px;

  flex: 1;

  justify-content: space-between;

}

.line-clamp-2 {

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.group:hover .mega-menu-dropdown {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}

.mega-menu-dropdown a:hover {

  background-color: rgba(146, 214, 173, 0.1) !important;

  transform: translateX(4px);

  transition: all 0.2s ease;

}

.group:hover .fa-chevron-down {

  transform: rotate(180deg);

  transition: transform 0.3s ease;

}

.cok-satan-icon {

  position: absolute;

  right: 50px;

  top: 50px;

  z-index: 9;

  height: 120px;

}

.collection-class {

  background-color: #fff;

}

.vertical-image {

  height: 190px;

  position: relative;

  top: -88px;

  left: -30px;

}

@media (max-width: 431px) {

  .vertical-image {

    height: 107px;

    position: relative;

    top: -16px;

    left: 0px;

  }

}

.featured-collection-slider .swiper-slide {

  opacity: 1;

  transition: opacity 0.5s ease;

}

.featured-collection-slider .swiper-slide-active {

  opacity: 1;

}

.featured-collection-slider .swiper-button-prev::after,

.featured-collection-slider .swiper-button-next::after {

  display: none;

}

.featured-collection-slider .swiper-pagination {

  display: flex;

  gap: 6px;

  justify-content: center;

}

.featured-collection-slider .swiper-pagination-bullet {

  flex: 1;

  max-width: 100px;

  height: 2px !important;

  border-radius: 0 !important;

  background: rgba(0, 0, 0, 0.2) !important;

  opacity: 1 !important;

  transition: all 0.3s ease;

}

.featured-collection-slider .swiper-pagination-bullet-active {

  background: black !important;

}

.products-slider {

  overflow: . relatedProductsSwiper . premium-image-container visible;

  position: relative;

  padding: 0 4px;

}

.products-slider .swiper-wrapper {

  display: flex;

  align-items: stretch;

}

.products-slider .swiper-slide {

  height: auto;

}

.swiper-button-next:after,

.swiper-button-prev:after {

  font-family: swiper-icons;

  font-size: 1rem;

}

.relatedProductsSwiper .swiper-button-next,

.relatedProductsSwiper .swiper-button-prev {

  background: white;

  border-radius: 9999px;

  box-shadow: 0 2px 8px 0 rgba(146, 214, 173, 0.13);

  width: 44px;

  height: 44px;

  color: #92d6ad;

  border: 1.5px solid #e5e7eb;

  top: 50% !important;

  transform: translateY(-50%);

  right: 0 !important;

  left: auto !important;

  margin: 0;

}

.relatedProductsSwiper .swiper-button-prev {

  left: 0 !important;

  right: auto !important;

}

@media (max-width: 1024px) {

  .relatedProductsSwiper .swiper-button-next,

  .relatedProductsSwiper .swiper-button-prev {

    width: 36px;

    height: 36px;

  }

}

.relatedProductsSwiper .premium-product-card {

  min-height: 320px;

  margin: auto;

}

.relatedProductsSwiper .premium-image-container {

  aspect-ratio: 1;

}

.relatedProductsSwiper .product-content {

  padding: 0.25rem;

}

.relatedProductsSwiper .premium-price-badge {

  margin: 0.25rem;

  padding: 0.25rem;

}

.relatedProductsSwiper .premium-price-badge .text-xl {

  font-size: 0.875rem;

  line-height: 1.25rem;

}

.relatedProductsSwiper .premium-price-badge .text-xs {

  font-size: 0.625rem;

  line-height: 0.75rem;

}

.info-icon-wrapper .text-xs {

  font-size: 0.625rem;

  line-height: 0.75rem;

}

.relatedProductsSwiper h3 {

  font-size: 0.75rem;

  line-height: 1rem;

  margin-bottom: 0.25rem;

}

.relatedProductsSwiper .premium-details-btn {

  padding: 0.375rem 0.5rem;

  font-size: 0.625rem;

}

.relatedProductsSwiper .premium-details-btn i {

  font-size: 0.5rem;

}

.relatedProductsSwiper .image-indicators {

  bottom: 4px;

  left: 4px;

  right: 4px;

  gap: 2px;

}

.relatedProductsSwiper .indicator-dot {

  height: 2px;

}

.relatedProductsSwiper .absolute.top-3 {

  top: 0.5rem;

}

.relatedProductsSwiper .absolute.top-3.right-3 {

  right: 0.5rem;

}

.relatedProductsSwiper .absolute.top-3.left-3 {

  left: 0.5rem;

}

.relatedProductsSwiper .w-8.h-8 {

  width: 1.5rem;

  height: 1.5rem;

}

.relatedProductsSwiper .swiper-button-next,

.relatedProductsSwiper .swiper-button-prev {

  background: white;

  border-radius: 50%;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  width: 44px;

  height: 44px;

  color: #92d6ad;

  border: 1px solid #e5e7eb;

  transition: all 0.3s ease;

}

.relatedProductsSwiper .swiper-button-next:hover,

.relatedProductsSwiper .swiper-button-prev:hover {

  background: #92d6ad;

  color: white;

}

.relatedProductsSwiper .swiper-button-next:after,

.relatedProductsSwiper .swiper-button-prev:after {

  font-size: 18px;

  font-weight: bold;

}

.relatedProductsSwiper .swiper-slide {

  transition: transform 0.3s ease;

}

.relatedProductsSwiper .swiper-slide:hover {

  transform: translateY(-2px);

}

@media (max-width: 768px) {

  .relatedProductsSwiper .swiper-button-next,

  .relatedProductsSwiper .swiper-button-prev {

    width: 36px;

    height: 36px;

  }

  .relatedProductsSwiper .swiper-button-next:after,

  .relatedProductsSwiper .swiper-button-prev:after {

    font-size: 14px;

  }

} /* XS - Extra small devices (telefon <768px) - media query gerekmez */

.col-xs-1 {

  width: 8.33333333%;

  float: left;

} /* ... diğer col-xs-* lar ... */

.col-xs-12 {

  width: 100%;

  float: left;

} /* SM - Small devices (tablet ≥768px) */

@media (min-width: 768px) {

  .col-sm-1 {

    width: 8.33333333%;

    float: left;

  }

  .col-sm-2 {

    width: 16.66666667%;

    float: left;

  }

  .col-sm-3 {

    width: 25%;

    float: left;

  }

  .col-sm-4 {

    width: 33.33333333%;

    float: left;

  }

  .col-sm-5 {

    width: 41.66666667%;

    float: left;

  }

  .col-sm-6 {

    width: 50%;

    float: left;

  }

  .col-sm-7 {

    width: 58.33333333%;

    float: left;

  }

  .col-sm-8 {

    width: 66.66666667%;

    float: left;

  }

  .col-sm-9 {

    width: 75%;

    float: left;

  }

  .col-sm-10 {

    width: 83.33333333%;

    float: left;

  }

  .col-sm-11 {

    width: 91.66666667%;

    float: left;

  }

  .col-sm-12 {

    width: 100%;

    float: left;

  }

} /* MD - Medium devices (desktop ≥992px) */

@media (min-width: 992px) {

  .col-md-1 {

    width: 8.33333333%;

    float: left;

  }

  .col-md-2 {

    width: 16.66666667%;

    float: left;

  }

  .col-md-3 {

    width: 25%;

    float: left;

  }

  .col-md-4 {

    width: 33.33333333%;

    float: left;

  }

  .col-md-5 {

    width: 41.66666667%;

    float: left;

  }

  .col-md-6 {

    width: 50%;

    float: left;

  }

  .col-md-7 {

    width: 58.33333333%;

    float: left;

  }

  .col-md-8 {

    width: 66.66666667%;

    float: left;

  }

  .col-md-9 {

    width: 75%;

    float: left;

  }

  .col-md-10 {

    width: 83.33333333%;

    float: left;

  }

  .col-md-11 {

    width: 91.66666667%;

    float: left;

  }

  .col-md-12 {

    width: 100%;

    float: left;

  }

} /* LG - Large devices (large desktop ≥1200px) */

@media (min-width: 1200px) {

  .col-lg-1 {

    width: 8.33333333%;

    float: left;

  }

  .col-lg-2 {

    width: 16.66666667%;

    float: left;

  }

  .col-lg-3 {

    width: 25%;

    float: left;

  }

  .col-lg-4 {

    width: 33.33333333%;

    float: left;

  }

  .col-lg-5 {

    width: 41.66666667%;

    float: left;

  }

  .col-lg-6 {

    width: 50%;

    float: left;

  }

  .col-lg-7 {

    width: 58.33333333%;

    float: left;

  }

  .col-lg-8 {

    width: 66.66666667%;

    float: left;

  }

  .col-lg-9 {

    width: 75%;

    float: left;

  }

  .col-lg-10 {

    width: 83.33333333%;

    float: left;

  }

  .col-lg-11 {

    width: 91.66666667%;

    float: left;

  }

  .col-lg-12 {

    width: 100%;

    float: left;

  }

} /* Clearfix helper */

.row::after {

  content: "";

  display: table;

  clear: both;

}

@layer components {

  .btn-primary {

    @apply bg-primary text-white px-4 py-2.5 rounded-lg font-medium text-sm        hover:bg-primary-dark transition-all duration-200        shadow-sm hover:shadow-md;

  }

  .btn-secondary {

    @apply border border-gray-300 text-gray-700 px-4 py-2.5 rounded-lg font-medium text-sm        hover:bg-gray-50 hover:border-gray-400 transition-all duration-200        shadow-sm hover:shadow-md;

  }

  .nav-link {

    @apply text-luxury hover:text-primary transition-colors duration-300 relative        after:content-[''] after:absolute after:bottom-0 after:left-0        after:w-0 after:h-0.5 after:bg-primary        hover:after:w-full after:transition-all after:duration-300;

  }

  .product-card {

    @apply bg-white rounded-xl shadow-md overflow-hidden        hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1;

  }

  .product-card img {

    @apply transition-transform duration-500 hover:scale-105;

  }

  .section-title {

    @apply text-2xl md:text-3xl font-semibold text-gray-900 text-center mb-6        relative pb-3 after:content-[''] after:absolute        after:bottom-0 after:left-1/2 after:-translate-x-1/2        after:w-16 after:h-0.5 after:bg-primary;

  }

}

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.animate-fadeIn {

  animation: fadeIn 0.5s ease-out;

}

.product-gallery {

  position: relative;

  overflow: hidden;

  border-radius: 1rem;

  background: #f8fafc;

}

.product-gallery img {

  background: white;

  width: 100%;

  height: 100%;

  object-fit: contain;

  transition: all 0.3s ease;

}

.thumbnail-item {

  transition: all 0.3s ease;

}

.thumbnail-item:hover {

  transform: scale(1.05);

  opacity: 0.8 !important;

}

.thumbnail-item.active {

  border-color: #92d6ad !important;

  opacity: 1 !important;

  transform: scale(1);

}

.thumbnail-item:not(.active) {

  border-color: transparent !important;

  opacity: 0.6 !important;

}

.thumbnail-scroll-container {

  scrollbar-width: none;

  -ms-overflow-style: none;

}

.thumbnail-scroll-container::-webkit-scrollbar {

  display: none;

}

.thumbnail-scroll-container {

  scroll-behavior: smooth;

}

.scroll-indicator {

  transition: all 0.3s ease;

}

.scroll-indicator.active {

  background-color: #92d6ad;

  transform: scale(1.2);

}

.ring-size-scroll-container {

  scrollbar-width: none;

  -ms-overflow-style: none;

  cursor: grab;

  user-select: none;

}

.ring-size-scroll-container::-webkit-scrollbar {

  display: none;

}

.ring-size-scroll-container:active {

  cursor: grabbing;

}

.ring-size-item {

  transition: all 0.3s ease;

  transform-origin: center center;

  box-shadow: none;

}

.ring-size-item.selected {

  border-color: #92d6ad !important;

  box-shadow: 0 4px 16px 0 rgba(146, 214, 173, 0.15);

  background: #f6fff9;

}

.ring-size-item.selected i {

  color: #92d6ad !important;

}

.ring-scroll-arrow {

  transition: all 0.3s ease;

  opacity: 1 !important;

  background: #fff;

  border: 1.5px solid #e5e7eb;

  color: #92d6ad;

  z-index: 20;

}

.ring-scroll-arrow:hover {

  background: #e6f7ef;

  border-color: #92d6ad;

  color: #92d6ad;

  transform: scale(1.05);

}

.ring-size-scroll-container {

  scroll-behavior: smooth;

}

.media-tab {

  transition: all 0.3s ease;

  border: 1px solid #e5e7eb;

}

.media-tab.active {

  background: linear-gradient(135deg, #92d6ad 0%, #7ac598 100%);

  color: white;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(146, 214, 173, 0.3);

}

.media-tab:not(.active) {

  background: #f8fafc;

  color: #6b7280;

}

.media-tab:not(.active):hover {

  background: rgba(146, 214, 173, 0.1);

  color: #92d6ad;

}

.related-product {

  transition: all 0.3s ease;

  border: 1px solid #f3f4f6;

}

.related-product:hover {

  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

  border-color: #92d6ad;

}

.tab-btn.active {

  background: white;

  color: #2c2c2c;

  border-bottom-color: #92d6ad;

}

.tab-btn:not(.active) {

  background: #f8fafc;

  color: #6b7280;

}

.tab-btn:not(.active):hover {

  background: #f1f5f9;

  color: #374151;

}

.tab-content {

  display: none;

}

.tab-content.active {

  display: block;

}

.premium-product-card {

  background: white;

  border-radius: 0.75rem;

  overflow: hidden;

  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,

    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,

    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,

    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,

    rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,

    rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;

  transition: all 0.3s ease;

  border: none;

  height: 100%;

  display: flex;

  flex-direction: column;

}

.premium-product-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),

    0 2px 4px -1px rgba(0, 0, 0, 0.06);

  border-color: #92d6ad;

}

.image-indicators {

  position: absolute;

  bottom: 8px;

  left: 8px;

  right: 8px;

  display: flex;

  justify-content: center;

  gap: 3px;

  z-index: 5;

}

.indicator-dot {

  flex: 1;

  height: 3px;

  border-radius: 2px;

  transition: all 0.2s ease;

  cursor: pointer;

  border: none;

  background: rgba(255, 255, 255, 0.6);

}

.indicator-dot.active {

  background: #92d6ad;

  box-shadow: 0 0 8px rgba(146, 214, 173, 0.6);

}

.indicator-dot.inactive {

  background: rgba(255, 255, 255, 0.6);

}

.indicator-dot:hover {

  background: #92d6ad;

  opacity: 0.8;

}

.premium-image-container {

  aspect-ratio: 1;

  position: relative;

  overflow: hidden;

}

.aspect-video {

  aspect-ratio: 16 / 12;

}

.premium-price-badge {

  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

  border-radius: 0.4rem;

  border: 1px solid #e2e8f0;

}

.premium-details-btn {

  background: linear-gradient(135deg, #92d6ad 0%, #7ac598 100%);

  color: white;

  border: none;

  border-radius: 0.5rem;

  transition: all 0.3s ease;

}

.premium-details-btn:hover {

  background: linear-gradient(135deg, #7ac598 0%, #5fb589 100%);

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(146, 214, 173, 0.4);

}

.product-content {

  padding: 0.5rem;

  flex-grow: 1;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

}

.line-clamp-2 {

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.relatedProductsSwiper .premium-product-card {

  max-width: 320px;

  min-height: 280px;

  margin: auto;

}

.relatedProductsSwiper .premium-image-container {

  aspect-ratio: 1;

}

.relatedProductsSwiper .product-content {

  padding: 0.25rem;

}

.relatedProductsSwiper .premium-price-badge {

  margin: 0.25rem;

  padding: 0.25rem;

}

.relatedProductsSwiper .premium-price-badge .text-xl {

  font-size: 0.875rem;

  line-height: 1.25rem;

}

.relatedProductsSwiper .premium-price-badge .text-xs {

  font-size: 0.625rem;

  line-height: 0.75rem;

}

.relatedProductsSwiper h3 {

  font-size: 0.75rem;

  line-height: 1rem;

  margin-bottom: 0.25rem;

}

.relatedProductsSwiper .premium-details-btn {

  padding: 0.375rem 0.5rem;

  font-size: 0.625rem;

}

.relatedProductsSwiper .premium-details-btn i {

  font-size: 0.5rem;

}

.relatedProductsSwiper .image-indicators {

  bottom: 4px;

  left: 4px;

  right: 4px;

  gap: 2px;

}

.relatedProductsSwiper .indicator-dot {

  height: 2px;

}

.relatedProductsSwiper .absolute.top-3 {

  top: 0.5rem;

}

.relatedProductsSwiper .absolute.top-3.right-3 {

  right: 0.5rem;

}

.relatedProductsSwiper .absolute.top-3.left-3 {

  left: 0.5rem;

}

.relatedProductsSwiper .w-8.h-8 {

  width: 1.5rem;

  height: 1.5rem;

}

.tabs-premium {

  display: flex;

  gap: 0.5rem;

  background: #f8fafc;

  border-radius: 1.5rem;

  padding: 0.25rem;

  box-shadow: 0 2px 8px 0 rgba(146, 214, 173, 0.07);

  margin-bottom: 1.5rem;

}

.tab-btn-premium {

  flex: 1 1 0;

  padding: 0.75rem 1.5rem;

  border-radius: 1.25rem;

  font-size: 1rem;

  font-weight: 600;

  color: #6b7280;

  background: transparent;

  border: none;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: none;

  cursor: pointer;

  position: relative;

  outline: none;

}

.tab-btn-premium.active {

  background: linear-gradient(90deg, #a8dfbf 0%, #92d6ad 100%);

  color: #1a2c1a;

  box-shadow: 0 4px 16px 0 rgba(146, 214, 173, 0.13);

  z-index: 2;

}

.tab-btn-premium:not(.active):hover {

  background: #e5f6ee;

  color: #5fb589;

}

.tab-content-premium {

  opacity: 0;

  transform: translateY(10px);

  pointer-events: none;

  transition: opacity 0.3s, transform 0.3s;

  display: none;

}

.tab-content-premium.active {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

  display: block;

}

.tabs-minimal {

  display: flex;

  justify-content: center;

  gap: 2rem;

  border-bottom: 1.5px solid #e5e7eb;

  margin-bottom: 1.5rem;

  background: none;

  box-shadow: none;

  border-radius: 0;

  padding: 0;

}

.tab-btn-minimal {

  background: none;

  border: none;

  outline: none;

  font-size: 0.8rem;

  font-weight: 500;

  color: #6b7280;

  padding: 0.75rem 0;

  border-bottom: 2.5px solid transparent;

  transition: color 0.2s, border-color 0.2s;

  cursor: pointer;

  margin-bottom: -1.5px;

}

.tab-btn-minimal.active {

  color: #1a2c1a;

  border-bottom: 2.5px solid #92d6ad;

  background: none;

}

.tab-btn-minimal:not(.active):hover {

  color: #92d6ad;

}

.tab-content-minimal {

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s;

  display: none;

}

.tab-content-minimal.active {

  opacity: 1;

  pointer-events: auto;

  display: block;

}

.popupshare {

  position: absolute;

}

.popupshare {

  background: #fff;

  padding: 25px;

  border-radius: 15px;

  top: -150%;

  max-width: 450px;

  opacity: 0;

  pointer-events: none;

  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);

  transform: translate(-50%, -50%) scale(1.2);

  transition: top 0s 0.2s ease-in-out, opacity 0.2s 0s ease-in-out,

    transform 0.2s 0s ease-in-out;

  left: -150%;

}

@media (max-width: 999px) {

  .popupshare.show {

    top: 50%;

    left: 50%;

    opacity: 1;

    pointer-events: auto;

    z-index: 5;

    width: 350px;

    transform: translate(-87%, -50%) scale(1);

    transition: top 0s 0s ease-in-out, opacity 0.2s 0s ease-in-out,

      transform 0.2s 0s ease-in-out;

  }

  .field button {

    font-size: 16px;

    padding: 8px 0;

    width: 50%;

  }

}

@media (min-width: 1000px) {

  .popupshare.show {

    top: 50%;

    left: 50%;

    opacity: 1;

    pointer-events: auto;

    z-index: 5;

    width: 450px;

    transform: translate(-190%, -50%) scale(1);

    transition: top 0s 0s ease-in-out, opacity 0.2s 0s ease-in-out,

      transform 0.2s 0s ease-in-out;

  }

}

.popupshare :is(header, .popicons, .field) {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.popupshare header {

  padding-bottom: 15px;

  border-bottom: 1px solid #ebedf9;

}

header span {

  font-size: 21px;

  font-weight: 600;

}

header .close,

.popicons a {

  display: flex;

  align-items: center;

  border-radius: 50%;

  justify-content: center;

  transition: all 0.3s ease-in-out;

}

header .close {

  color: #878787;

  font-size: 17px;

  background: #f2f3fb;

  height: 33px;

  width: 33px;

  cursor: pointer;

}

header .close:hover {

  background: #ebedf9;

}

.popupshare .popshare {

  margin: 20px 0;

}

.popupshare .popicons {

  margin: 15px 0 20px 0;

}

.popshare p {

  font-size: 16px;

  text-align: left;

}

.popshare .popicons a {

  height: 50px;

  width: 50px;

  font-size: 20px;

  text-decoration: none;

  border: 1px solid transparent;

}

.popicons a i {

  transition: transform 0.3s ease-in-out;

}

.popshare .field {

  margin: 12px 0 -5px 0;

  height: 45px;

  border-radius: 4px;

  padding: 0 5px;

  border: 1px solid #e1e1e1;

}

.field.active {

  border-color: #92d6ad;

}

.field i {

  width: 50px;

  font-size: 18px;

  text-align: center;

}

.field.active i {

  color: #92d6ad;

}

.field input {

  width: 100%;

  height: 100%;

  border: none;

  outline: none;

  font-size: 15px;

  background: transparent;

  text-align: left;

}

.field button {

  color: #fff;

  padding: 5px 18px;

  background: #92d6ad;

}

.field button:hover {

  background: #8d39fa;

} /*paylaş butonu sonu*/ /*checkbox tasarımı başı*/ /**,*:after,*:before {	box-sizing: border-box;}*/

.checkbox-group {

  display: flex;

}



@supports (height: 100dvh) {

  .h-screen { height: 100dvh; }

}



@supports (-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0)) {

  .drawer-overlay {

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

  }

}



/* iOS Özel Düzeltmeler */

@supports (-webkit-touch-callout: none) {

  #drawerPanel {

    -webkit-transform: translate3d(0, 0, 0);

    will-change: transform;

    backface-visibility: hidden;

  }

  

  /* iOS Safe Area Desteği */

  .min-h-screen {

    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));

  }

  

  /* iOS Drawer Düzeltmeleri */

  #quickViewDrawer {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 9999;

    -webkit-overflow-scrolling: touch;

  }

  

  #drawerPanel {

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

  }

  

  /* iOS Viewport Height Düzeltmeleri */

  .h-screen-ios {

    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));

  }

  

  .max-h-screen-ios {

    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));

  }

  

  /* iOS Touch Events */

  * {

    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none;

  }

  

  /* iOS Scroll Momentum */

  .ios-scroll {

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

  }

  

  /* iOS Transform Hardware Acceleration */

  .ios-accelerated {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    will-change: transform;

  }

}



/* iOS Safari Özel Düzeltmeler */

@supports (-webkit-appearance: none) {

  /* Safari'de viewport height sorunları */

  .vh-100-safari {

    height: 100vh;

    height: calc(var(--vh, 1vh) * 100);

  }

  

  /* Safari drawer overflow */

  #drawerPanel {

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

  }

}



/* QuickView Özel Stiller */

.quickview-product-content {

  padding: 0;

}



/* QuickView Loading Animasyonları */

@keyframes quickview-pulse {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.5; }

}



.quickview-loading-dots div {

  animation: quickview-pulse 1.4s ease-in-out infinite both;

}



.quickview-loading-dots div:nth-child(1) { animation-delay: -0.32s; }

.quickview-loading-dots div:nth-child(2) { animation-delay: -0.16s; }



/* QuickView Header - Normal element (sticky değil) */

.quickview-header {

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  /* Sticky özelliklerini kaldırdık - tüm drawer kaydırılabilir */

}



/* QuickView Buton Hover Efektleri */

#quickViewAddToCart:hover {

  box-shadow: 0 20px 25px -5px rgba(146, 214, 173, 0.3), 0 10px 10px -5px rgba(146, 214, 173, 0.1);

}



/* QuickView Content Scrollbar */

.quickview-content::-webkit-scrollbar {

  width: 4px;

}



.quickview-content::-webkit-scrollbar-track {

  background: #f1f5f9;

}



.quickview-content::-webkit-scrollbar-thumb {

  background: #92d6ad;

  border-radius: 2px;

}



.quickview-content::-webkit-scrollbar-thumb:hover {

  background: #7bc59a;

}



/* QuickView Responsive Düzeltmeler */

@media (max-width: 768px) {

  .quickview-product-content {

    padding: 0 1rem;

  }

  

  #quickViewActions {

    padding-bottom: env(safe-area-inset-bottom);

  }

}



/* QuickView Drawer - Tüm Alan Kaydırılabilir */

#quickViewContent {

  /* Tüm drawer alanı kaydırılabilir */

  height: 100%;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;

}



/* QuickView Header - Sticky değil, normal element */

#quickViewContent .bg-white\/95 {

  position: relative !important;

  top: auto !important;

  z-index: auto !important;

  /* Sticky özelliklerini kaldırdık */

}



/* iOS 26 Safari Bug Düzeltmeleri */

/* Stack Overflow Çözümü: https://stackoverflow.com/questions/79753701/ios-26-safari-web-layouts-are-breaking-due-to-fixed-sticky-position-elements-g */



/* iOS 26 için fixed position düzeltmeleri */

@supports (-webkit-touch-callout: none) {

  /* iOS 26'da fixed position elementlerin kaymasını önle */

  #quickViewDrawer,

  #mobileSidebar,

  .fixed,

  [style*="position: fixed"] {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    will-change: transform;

  }

  

  /* iOS 26'da body position fixed durumunda scroll düzeltmesi */

  body[style*="position: fixed"] {

    -webkit-overflow-scrolling: touch;

    overflow: hidden;

  }

  

  /* iOS 26'da drawer'ların tam ekran olmasını sağla */

  #quickViewDrawer {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 9999 !important;

  }

  

  #mobileSidebar {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 9999 !important;

  }

  

  /* iOS 26'da backdrop blur düzeltmesi */

  #quickViewBackdrop,

  #mobileSidebarOverlay {

    -webkit-backdrop-filter: blur(4px);

    backdrop-filter: blur(4px);

  }

}



/* iOS 26 Safari özel düzeltmeler */

@media screen and (-webkit-min-device-pixel-ratio: 0) {

  /* Safari'de viewport height sorunları */

  .vh-100-ios26 {

    height: 100vh;

    height: calc(var(--vh, 1vh) * 100);

  }

  

  /* iOS 26'da drawer overflow */

  #drawerPanel,

  #mobileSidebarContent {

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

  }

}



/* Mobil Arama Sonuçları - Sayfa İçinde Normal Element */

#mobileSearchResults {

  position: relative !important;

  z-index: 10 !important;

  /* Sayfa ile birlikte scroll olması için */

  -webkit-transform: none;

  transform: none;

  will-change: auto;

  /* Normal document flow'da kalması için */

  display: block;

  visibility: visible;

  opacity: 1;

}



/* Mobil Arama Input - Focus durumunda sonuçların kaybolmaması */

#mobileSearchInput:focus + #mobileSearchResults,

#mobileSearchInput:not(:focus) + #mobileSearchResults {

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

}



/* Mobil Arama Sonuçları Container - Normal document flow */

.mobile-search-results-container {

  position: relative;

  z-index: 10;

  /* Normal document flow'da kalması için */

  -webkit-transform: none;

  transform: none;

  will-change: auto;

}



/* Mobil Arama Sonuçları - Sayfa İçinde Görünüm */

#mobileSearchResults {

  /* Sayfa içinde normal element olarak davranması için */

  position: relative !important;

  top: auto !important;

  left: auto !important;

  right: auto !important;

  bottom: auto !important;

  width: 100% !important;

  max-width: none !important;

  /* Normal document flow'da kalması için */

  display: block;

  visibility: visible;

  opacity: 1;

  /* Sayfa ile birlikte scroll olması için */

  transform: none !important;

  -webkit-transform: none !important;

  /* Normal margin/padding */

  margin: 0;

  padding: 0;

}



.required {

    color: red;

    font-weight: 400;

    font-size: 13px

}

.success, .warning, .attention, .information {

    border-radius: 0;

    border-width: 0 0 0 5px;

    color: #000;

    margin-bottom: 20px;

    margin-top: 0;

    padding: 10px;

    padding-left: 35px

}

.success > a, .warning > a, .attention > a, .information > a {

    color: #c00000 !important;

    text-decoration: none

}

.success > a:hover, .warning > a:hover, .attention > a:hover, .information > a:hover {

    color: #ff000a !important;

    text-decoration: underline

}

.success .close, .warning .close, .attention .close, .information .close {

    float: right;

    padding-top: 4px;

    padding-right: 4px;

    cursor: pointer;

    margin: 4px;

    color: #444

}

.attention {

    background: #fff5cc url(../image/attention.png) 10px center no-repeat;

    border: 1px solid #F2DD8C

}

.warning {

    background: #ffd1d1 url(../image/warning.png) 10px center no-repeat;

    border: 1px solid #F8ACAC

}

.success {

    background: #a0d468 none repeat scroll 0 0;

    border-color: #8cc474;

    background: #a0d468 url(../image/success.png) 10px center no-repeat;

    border: 1px solid #8cc474

}

.help {

    color: #999;

    font-size: 10px;

    font-weight: 400;

    display: block

}

.error {

    display: block;

    color: red;

    margin-top: 6px

}

.welcome {

    color: #636E75;

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 21px;

    font-weight: 400;

    text-shadow: 0 0 1px rgba(0, 0, 0, 0.01)

}