@import url('https://fonts.cdnfonts.com/css/optima?display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200;300;400;500;600;700;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');










/* =================== CENTRALIZED SCROLLING RULES =================== */
/* ALL SCROLLING BEHAVIOR IS HANDLED HERE ONLY - NO SCROLL RULES IN OTHER FILES */
/* =================== FONT IMPORTS - MUST BE FIRST =================== */
/* Arabic/Persian Fonts - Using available Google Fonts */
/* Chinese/Japanese Fonts */
/* European Language Fonts */
/* Layout Components */
/* =================== END FONT LOADING STATES =================== */
/* =================== CSS ROOT VARIABLES =================== */
:root {
  /* Core Color Palette - Kelp with RGB values for opacity */
  --kelp-50: #f7f7f6;
  --kelp-50-rgb: 247, 247, 246;
  --kelp-100: #e6e6e1;
  --kelp-100-rgb: 230, 230, 225;
  --kelp-200: #ccccc3;
  --kelp-200-rgb: 204, 204, 195;
  --kelp-300: #abab9d;
  --kelp-300-rgb: 171, 171, 157;
  --kelp-400: #888978;
  --kelp-400-rgb: 136, 137, 120;
  --kelp-500: #6d6e5e;
  --kelp-500-rgb: 109, 110, 94;
  --kelp-600: #56574a;
  --kelp-600-rgb: 86, 87, 74;
  --kelp-700: #46473d;
  --kelp-700-rgb: 70, 71, 61;
  --kelp-800: #3a3b34;
  --kelp-800-rgb: 58, 59, 52;
  --kelp-900: #32332e;
  --kelp-900-rgb: 50, 51, 46;
  --kelp-950: #1b1c17;
  --kelp-950-rgb: 27, 28, 23;
  
  /* Gold accent colors with RGB values for opacity */
  --gold: #d4af37;
  --gold-rgb: 212, 175, 55;
  --gold-light: #e9d192;
  --gold-light-rgb: 233, 209, 146;
  --gold-dark: #9a7e29;
  --gold-dark-rgb: 154, 126, 41;
  
  /* Additional accent colors */
  --accent-sage: #7c8569;
  --accent-sage-rgb: 124, 133, 105;
  --accent-olive: #5c6c3e;
  --accent-olive-rgb: 92, 108, 62;
  --accent-clay: #a68a72;
  --accent-clay-rgb: 166, 138, 114;
  --accent-sand: #d9c9b8;
  --accent-sand-rgb: 217, 201, 184;
  
  /* Semantic Color Assignments - Using kelp-50 as main bg now */
  --color-background-primary: var(--kelp-50);
  --color-background-secondary: var(--kelp-100);
  --color-background-tertiary: var(--kelp-200);
  --color-background-dark: var(--kelp-950);
  
  --color-text-primary: var(--kelp-950);
  --color-text-secondary: var(--kelp-800);
  --color-text-tertiary: var(--kelp-600);
  --color-text-light: var(--kelp-50);
  
  --color-accent-primary: var(--gold);
  --color-accent-secondary: var(--gold-light);
  
  /* Typography - Luxury font stack with Optima priority */
  --font-primary: 'Optima', 'Playfair Display', 'Crimson Text', 'Source Serif Pro', serif;
  --font-secondary: 'Optima', 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --font-luxury-serif: 'Optima', 'Playfair Display', 'Crimson Text', 'Source Serif Pro', serif;
  --font-luxury-sans: 'Optima', 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
    /* Animations */
--chat-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--chat-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--chat-transition-luxury: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Font weights - lighter for luxury appearance */
  --font-weight-light: 300;
  --font-weight-regular: 300; /* Changed from 400 to 300 for luxury */
  --font-weight-medium: 400; /* Changed from 500 to 400 */
  --font-weight-semibold: 500; /* Changed from 600 to 500 */
  --font-weight-bold: 600; /* Changed from 700 to 600 */
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;
  
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0.03em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  
  /* Header Text Sizes */
  --header-text-size: 0.8rem;
  --header-text-size-mobile: 0.65rem;
  
  /* Font Sizes */
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  
  
  
  /* Spacing System */
  --base-size: 1rem;
  --spacing-xxs: calc(var(--base-size) * 0.125); /* 2px */
  --spacing-xs: calc(var(--base-size) * 0.25);   /* 4px */
  --spacing-sm: calc(var(--base-size) * 0.5);    /* 8px */
  --spacing-md: calc(var(--base-size) * 1);      /* 16px */
  --spacing-lg: calc(var(--base-size) * 2);      /* 32px */
  --spacing-xl: calc(var(--base-size) * 4);      /* 64px */
  --spacing-xxl: calc(var(--base-size) * 8);     /* 128px */
  
  /* Borders */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 9999px;
  
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  
  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-hard: 0 30px 60px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Z-index layers */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1100;
  --z-index-fixed: 1200;
  --z-index-modal-backdrop: 1300;
  --z-index-modal: 1400;
  --z-index-popover: 1500;
  --z-index-tooltip: 1600;
  --z-index-cursor: 10000;
  
 
}
/* =================== SCROLLBAR REMOVAL =================== */
/* Hide scrollbar for Chrome, Safari, and Opera */
::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge, and Firefox - REMOVED GLOBAL RULE */
/* ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Cardo, Optima, serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*, ::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:  ;
  
 
}
::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:  ;
  
 
}
.\!container{
  width: 100% !important;
  
 
}
.container{
  width: 100%;
  
 
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  
 
  }
  .container{
    max-width: 640px;
  
 
  }
  
 
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  
 
  }
  .container{
    max-width: 768px;
  
 
  }
  
 
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  
 
  }
  .container{
    max-width: 1024px;
  
 
  }
  
 
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  
 
  }
  .container{
    max-width: 1280px;
  
 
  }
  
 
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  
 
  }
  .container{
    max-width: 1536px;
  
 
  }
  
 
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  
 
}
.pointer-events-none{
  pointer-events: none;
  
 
}
.\!visible{
  visibility: visible !important;
  
 
}
.visible{
  visibility: visible;
  
 
}
.invisible{
  visibility: hidden;
  
 
}
.collapse{
  visibility: collapse;
  
 
}
.static{
  position: static;
  
 
}
.\!fixed{
  position: fixed !important;
  
 
}
.fixed{
  position: fixed;
  
 
}
.absolute{
  position: absolute;
  
 
}
.relative{
  position: relative;
  
 
}
.sticky{
  position: sticky;
  
 
}
.inset-0{
  inset: 0px;
  
 
}
.-bottom-4{
  bottom: -1rem;
  
 
}
.-right-1{
  right: -0.25rem;
  
 
}
.-right-2{
  right: -0.5rem;
  
 
}
.-right-4{
  right: -1rem;
  
 
}
.-top-1{
  top: -0.25rem;
  
 
}
.-top-2{
  top: -0.5rem;
  
 
}
.bottom-0{
  bottom: 0px;
  
 
}
.bottom-2{
  bottom: 0.5rem;
  
 
}
.bottom-3{
  bottom: 0.75rem;
  
 
}
.bottom-4{
  bottom: 1rem;
  
 
}
.bottom-full{
  bottom: 100%;
  
 
}
.left-0{
  left: 0px;
  
 
}
.left-1\/2{
  left: 50%;
  
 
}
.left-2{
  left: 0.5rem;
  
 
}
.left-2\.5{
  left: 0.625rem;
  
 
}
.left-3{
  left: 0.75rem;
  
 
}
.left-4{
  left: 1rem;
  
 
}
.left-6{
  left: 1.5rem;
  
 
}
.left-64{
  left: 16rem;
  
 
}
.left-full{
  left: 100%;
  
 
}
.right-0{
  right: 0px;
  
 
}
.right-2{
  right: 0.5rem;
  
 
}
.right-2\.5{
  right: 0.625rem;
  
 
}
.right-3{
  right: 0.75rem;
  
 
}
.right-4{
  right: 1rem;
  
 
}
.right-6{
  right: 1.5rem;
  
 
}
.top-0{
  top: 0px;
  
 
}
.top-1\/2{
  top: 50%;
  
 
}
.top-2{
  top: 0.5rem;
  
 
}
.top-2\.5{
  top: 0.625rem;
  
 
}
.top-3{
  top: 0.75rem;
  
 
}
.top-4{
  top: 1rem;
  
 
}
.top-6{
  top: 1.5rem;
  
 
}
.top-\[var\(--header-height\)\]{
  top: var(--header-height);
  
 
}
.z-0{
  z-index: 0;
  
 
}
.z-10{
  z-index: 10;
  
 
}
.z-20{
  z-index: 20;
  
 
}
.z-40{
  z-index: 40;
  
 
}
.z-50{
  z-index: 50;
  
 
}
.z-\[9999\]{
  z-index: 9999;
  
 
}
.col-span-1{
  grid-column: span 1 / span 1;
  
 
}
.col-span-2{
  grid-column: span 2 / span 2;
  
 
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  
 
}
.mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  
 
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
  
 
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
  
 
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
  
 
}
.my-0\.5{
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  
 
}
.my-10{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  
 
}
.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  
 
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
  
 
}
.-mb-px{
  margin-bottom: -1px;
  
 
}
.-ml-0{
  margin-left: -0px;
  
 
}
.-ml-0\.5{
  margin-left: -0.125rem;
  
 
}
.mb-0{
  margin-bottom: 0px;
  
 
}
.mb-0\.5{
  margin-bottom: 0.125rem;
  
 
}
.mb-1{
  margin-bottom: 0.25rem;
  
 
}
.mb-1\.5{
  margin-bottom: 0.375rem;
  
 
}
.mb-12{
  margin-bottom: 3rem;
  
 
}
.mb-16{
  margin-bottom: 4rem;
  
 
}
.mb-2{
  margin-bottom: 0.5rem;
  
 
}
.mb-3{
  margin-bottom: 0.75rem;
  
 
}
.mb-4{
  margin-bottom: 1rem;
  
 
}
.mb-5{
  margin-bottom: 1.25rem;
  
 
}
.mb-6{
  margin-bottom: 1.5rem;
  
 
}
.mb-8{
  margin-bottom: 2rem;
  
 
}
.me-2{
  margin-inline-end: 0.5rem;
  
 
}
.ml-0{
  margin-left: 0px;
  
 
}
.ml-1{
  margin-left: 0.25rem;
  
 
}
.ml-2{
  margin-left: 0.5rem;
  
 
}
.ml-3{
  margin-left: 0.75rem;
  
 
}
.ml-4{
  margin-left: 1rem;
  
 
}
.ml-8{
  margin-left: 2rem;
  
 
}
.ml-auto{
  margin-left: auto;
  
 
}
.mr-1{
  margin-right: 0.25rem;
  
 
}
.mr-1\.5{
  margin-right: 0.375rem;
  
 
}
.mr-2{
  margin-right: 0.5rem;
  
 
}
.mr-3{
  margin-right: 0.75rem;
  
 
}
.mr-4{
  margin-right: 1rem;
  
 
}
.mr-5{
  margin-right: 1.25rem;
  
 
}
.mt-0{
  margin-top: 0px;
  
 
}
.mt-0\.5{
  margin-top: 0.125rem;
  
 
}
.mt-1{
  margin-top: 0.25rem;
  
 
}
.mt-1\.5{
  margin-top: 0.375rem;
  
 
}
.mt-2{
  margin-top: 0.5rem;
  
 
}
.mt-20{
  margin-top: 5rem;
  
 
}
.mt-3{
  margin-top: 0.75rem;
  
 
}
.mt-4{
  margin-top: 1rem;
  
 
}
.mt-6{
  margin-top: 1.5rem;
  
 
}
.mt-8{
  margin-top: 2rem;
  
 
}
.mt-auto{
  margin-top: auto;
  
 
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  
 
}
.block{
  display: block;
  
 
}
.inline-block{
  display: inline-block;
  
 
}
.inline{
  display: inline;
  
 
}
.flex{
  display: flex;
  
 
}
.inline-flex{
  display: inline-flex;
  
 
}
.table{
  display: table;
  
 
}
.grid{
  display: grid;
  
 
}
.contents{
  display: contents;
  
 
}
.hidden{
  display: none;
  
 
}
.aspect-\[4\/5\]{
  aspect-ratio: 4/5;
  
 
}
.aspect-square{
  aspect-ratio: 1 / 1;
  
 
}
.aspect-video{
  aspect-ratio: 16 / 9;
  
 
}
.h-0{
  height: 0px;
  
 
}
.h-0\.5{
  height: 0.125rem;
  
 
}
.h-1{
  height: 0.25rem;
  
 
}
.h-1\.5{
  height: 0.375rem;
  
 
}
.h-1\/3{
  height: 33.333333%;
  
 
}
.h-10{
  height: 2.5rem;
  
 
}
.h-12{
  height: 3rem;
  
 
}
.h-16{
  height: 4rem;
  
 
}
.h-2{
  height: 0.5rem;
  
 
}
.h-2\.5{
  height: 0.625rem;
  
 
}
.h-20{
  height: 5rem;
  
 
}
.h-24{
  height: 6rem;
  
 
}
.h-3{
  height: 0.75rem;
  
 
}
.h-3\.5{
  height: 0.875rem;
  
 
}
.h-32{
  height: 8rem;
  
 
}
.h-4{
  height: 1rem;
  
 
}
.h-48{
  height: 12rem;
  
 
}
.h-5{
  height: 1.25rem;
  
 
}
.h-56{
  height: 14rem;
  
 
}
.h-6{
  height: 1.5rem;
  
 
}
.h-64{
  height: 16rem;
  
 
}
.h-7{
  height: 1.75rem;
  
 
}
.h-72{
  height: 18rem;
  
 
}
.h-8{
  height: 2rem;
  
 
}
.h-80{
  height: 20rem;
  
 
}
.h-9{
  height: 2.25rem;
  
 
}
.h-96{
  height: 24rem;
  
 
}
.h-\[400px\]{
  height: 400px;
  
 
}
.h-\[420px\]{
  height: 420px;
  
 
}
.h-\[500px\]{
  height: 500px;
  
 
}
.h-\[600px\]{
  height: 600px;
  
 
}
.h-\[60vh\]{
  height: 60vh;
  
 
}
.h-\[calc\(100\%-2\.5rem\)\]{
  height: calc(100% - 2.5rem);
  
 
}
.h-\[calc\(100\%-60px\)\]{
  height: calc(100% - 60px);
  
 
}
.h-full{
  height: 100%;
  
 
}
.h-px{
  height: 1px;
  
 
}
.h-screen{
  height: 100vh;
  
 
}
.max-h-64{
  max-height: 16rem;
  
 
}
.max-h-80{
  max-height: 20rem;
  
 
}
.max-h-96{
  max-height: 24rem;
  
 
}
.max-h-\[70vh\]{
  max-height: 70vh;
  
 
}
.max-h-\[80vh\]{
  max-height: 80vh;
  
 
}
.max-h-\[90vh\]{
  max-height: 90vh;
  
 
}
.max-h-\[calc\(80vh-120px\)\]{
  max-height: calc(80vh - 120px);
  
 
}
.max-h-full{
  max-height: 100%;
  
 
}
.max-h-screen{
  max-height: 100vh;
  
 
}
.min-h-0{
  min-height: 0px;
  
 
}
.min-h-\[100px\]{
  min-height: 100px;
  
 
}
.min-h-\[300px\]{
  min-height: 300px;
  
 
}
.min-h-\[40px\]{
  min-height: 40px;
  
 
}
.min-h-\[500px\]{
  min-height: 500px;
  
 
}
.min-h-screen{
  min-height: 100vh;
  
 
}
.w-1{
  width: 0.25rem;
  
 
}
.w-1\.5{
  width: 0.375rem;
  
 
}
.w-1\/3{
  width: 33.333333%;
  
 
}
.w-1\/5{
  width: 20%;
  
 
}
.w-10{
  width: 2.5rem;
  
 
}
.w-11{
  width: 2.75rem;
  
 
}
.w-12{
  width: 3rem;
  
 
}
.w-16{
  width: 4rem;
  
 
}
.w-2{
  width: 0.5rem;
  
 
}
.w-2\.5{
  width: 0.625rem;
  
 
}
.w-20{
  width: 5rem;
  
 
}
.w-24{
  width: 6rem;
  
 
}
.w-3{
  width: 0.75rem;
  
 
}
.w-3\.5{
  width: 0.875rem;
  
 
}
.w-32{
  width: 8rem;
  
 
}
.w-4{
  width: 1rem;
  
 
}
.w-4\/5{
  width: 80%;
  
 
}
.w-40{
  width: 10rem;
  
 
}
.w-44{
  width: 11rem;
  
 
}
.w-5{
  width: 1.25rem;
  
 
}
.w-6{
  width: 1.5rem;
  
 
}
.w-64{
  width: 16rem;
  
 
}
.w-7{
  width: 1.75rem;
  
 
}
.w-8{
  width: 2rem;
  
 
}
.w-80{
  width: 20rem;
  
 
}
.w-9{
  width: 2.25rem;
  
 
}
.w-96{
  width: 24rem;
  
 
}
.w-\[280px\]{
  width: 280px;
  
 
}
.w-\[80px\]{
  width: 80px;
  
 
}
.w-full{
  width: 100%;
  
 
}
.w-px{
  width: 1px;
  
 
}
.min-w-0{
  min-width: 0px;
  
 
}
.min-w-\[200px\]{
  min-width: 200px;
  
 
}
.min-w-\[220px\]{
  min-width: 220px;
  
 
}
.min-w-full{
  min-width: 100%;
  
 
}
.max-w-2xl{
  max-width: 42rem;
  
 
}
.max-w-3xl{
  max-width: 48rem;
  
 
}
.max-w-4xl{
  max-width: 56rem;
  
 
}
.max-w-5xl{
  max-width: 64rem;
  
 
}
.max-w-6xl{
  max-width: 72rem;
  
 
}
.max-w-7xl{
  max-width: 80rem;
  
 
}
.max-w-\[1600px\]{
  max-width: 1600px;
  
 
}
.max-w-\[200px\]{
  max-width: 200px;
  
 
}
.max-w-\[70\%\]{
  max-width: 70%;
  
 
}
.max-w-\[80\%\]{
  max-width: 80%;
  
 
}
.max-w-full{
  max-width: 100%;
  
 
}
.max-w-lg{
  max-width: 32rem;
  
 
}
.max-w-max{
  max-width: -moz-max-content;
  max-width: max-content;
  
 
}
.max-w-md{
  max-width: 28rem;
  
 
}
.max-w-sm{
  max-width: 24rem;
  
 
}
.max-w-xl{
  max-width: 36rem;
  
 
}
.max-w-xs{
  max-width: 20rem;
  
 
}
.flex-1{
  flex: 1 1 0%;
  
 
}
.flex-shrink{
  flex-shrink: 1;
  
 
}
.flex-shrink-0{
  flex-shrink: 0;
  
 
}
.flex-grow{
  flex-grow: 1;
  
 
}
.grow{
  flex-grow: 1;
  
 
}
.border-collapse{
  border-collapse: collapse;
  
 
}
.-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-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-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));
  
 
}
.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));
  
 
}
.translate-x-5{
  --tw-translate-x: 1.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));
  
 
}
.translate-x-6{
  --tw-translate-x: 1.5rem;
  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));
  
 
}
.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));
  
 
}
.scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 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));
  
 
}
.scale-95{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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 ping{
  75%, 100%{
    transform: scale(2);
    opacity: 0;
  
 
  }
  
 
}
.animate-ping{
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  
 
}
@keyframes pulse{
  50%{
    opacity: .5;
  
 
  }
  
 
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  
 
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  
 
  }
  
 
}
.animate-spin{
  animation: spin 1s linear infinite;
  
 
}
.cursor-grab{
  cursor: grab;
  
 
}
.cursor-move{
  cursor: move;
  
 
}
.cursor-not-allowed{
  cursor: not-allowed;
  
 
}
.cursor-pointer{
  cursor: pointer;
  
 
}
.cursor-text{
  cursor: text;
  
 
}
.cursor-zoom-in{
  cursor: zoom-in;
  
 
}
.cursor-zoom-out{
  cursor: zoom-out;
  
 
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  
 
}
.resize{
  resize: both;
  
 
}
.list-inside{
  list-style-position: inside;
  
 
}
.list-disc{
  list-style-type: disc;
  
 
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
  
 
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  
 
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  
 
}
.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  
 
}
.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  
 
}
.grid-cols-8{
  grid-template-columns: repeat(8, minmax(0, 1fr));
  
 
}
.flex-row{
  flex-direction: row;
  
 
}
.flex-row-reverse{
  flex-direction: row-reverse;
  
 
}
.flex-col{
  flex-direction: column;
  
 
}
.flex-col-reverse{
  flex-direction: column-reverse;
  
 
}
.flex-wrap{
  flex-wrap: wrap;
  
 
}
.items-start{
  align-items: flex-start;
  
 
}
.items-end{
  align-items: flex-end;
  
 
}
.items-center{
  align-items: center;
  
 
}
.items-baseline{
  align-items: baseline;
  
 
}
.justify-start{
  justify-content: flex-start;
  
 
}
.justify-end{
  justify-content: flex-end;
  
 
}
.justify-center{
  justify-content: center;
  
 
}
.justify-between{
  justify-content: space-between;
  
 
}
.gap-1{
  gap: 0.25rem;
  
 
}
.gap-1\.5{
  gap: 0.375rem;
  
 
}
.gap-12{
  gap: 3rem;
  
 
}
.gap-2{
  gap: 0.5rem;
  
 
}
.gap-2\.5{
  gap: 0.625rem;
  
 
}
.gap-3{
  gap: 0.75rem;
  
 
}
.gap-4{
  gap: 1rem;
  
 
}
.gap-5{
  gap: 1.25rem;
  
 
}
.gap-6{
  gap: 1.5rem;
  
 
}
.gap-8{
  gap: 2rem;
  
 
}
.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  
 
}
.gap-y-1{
  row-gap: 0.25rem;
  
 
}
.-space-x-px > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(-1px * var(--tw-space-x-reverse));
  margin-left: calc(-1px * calc(1 - var(--tw-space-x-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-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-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)));
  
 
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  
 
}
.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  
 
}
.space-y-0 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
  
 
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-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-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * 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-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  
 
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  
 
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  
 
}
.space-x-reverse > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 1;
  
 
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  
 
}
.divide-\[\#e6e6e1\] > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(230 230 225 / var(--tw-divide-opacity));
  
 
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
  
 
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
  
 
}
.divide-gray-300 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
  
 
}
.self-center{
  align-self: center;
  
 
}
.overflow-auto{
  overflow: auto;
  
 
}
.overflow-hidden{
  overflow: hidden;
  
 
}
.overflow-x-auto{
  overflow-x: auto;
  
 
}
.overflow-y-auto{
  overflow-y: auto;
  
 
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
 
}
.whitespace-nowrap{
  white-space: nowrap;
  
 
}
.whitespace-pre-line{
  white-space: pre-line;
  
 
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
  
 
}
.break-words{
  overflow-wrap: break-word;
  
 
}
.\!rounded{
  border-radius: 0.25rem !important;
  
 
}
.rounded{
  border-radius: 0.25rem;
  
 
}
.rounded-2xl{
  border-radius: 1rem;
  
 
}
.rounded-full{
  border-radius: 9999px;
  
 
}
.rounded-lg{
  border-radius: 0.5rem;
  
 
}
.rounded-md{
  border-radius: 0.375rem;
  
 
}
.rounded-sm{
  border-radius: 0.125rem;
  
 
}
.rounded-xl{
  border-radius: 0.75rem;
  
 
}
.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  
 
}
.rounded-l-lg{
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  
 
}
.rounded-l-md{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  
 
}
.rounded-r-lg{
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  
 
}
.rounded-r-md{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  
 
}
.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  
 
}
.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  
 
}
.rounded-tl{
  border-top-left-radius: 0.25rem;
  
 
}
.\!border{
  border-width: 1px !important;
  
 
}
.border{
  border-width: 1px;
  
 
}
.border-0{
  border-width: 0px;
  
 
}
.border-2{
  border-width: 2px;
  
 
}
.border-4{
  border-width: 4px;
  
 
}
.border-x{
  border-left-width: 1px;
  border-right-width: 1px;
  
 
}
.border-b{
  border-bottom-width: 1px;
  
 
}
.border-b-2{
  border-bottom-width: 2px;
  
 
}
.border-l{
  border-left-width: 1px;
  
 
}
.border-l-4{
  border-left-width: 4px;
  
 
}
.border-r{
  border-right-width: 1px;
  
 
}
.border-r-0{
  border-right-width: 0px;
  
 
}
.border-t{
  border-top-width: 1px;
  
 
}
.border-t-2{
  border-top-width: 2px;
  
 
}
.border-dashed{
  border-style: dashed;
  
 
}
.\!border-gray-200{
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity)) !important;
  
 
}
.border-\[\#46473d\]{
  --tw-border-opacity: 1;
  border-color: rgb(70 71 61 / var(--tw-border-opacity));
  
 
}
.border-\[\#46473d\]\/10{
  border-color: rgb(70 71 61 / 0.1);
  
 
}
.border-\[\#46473d\]\/20{
  border-color: rgb(70 71 61 / 0.2);
  
 
}
.border-\[\#714d38\]{
  --tw-border-opacity: 1;
  border-color: rgb(113 77 56 / var(--tw-border-opacity));
  
 
}
.border-\[\#714d38\]\/10{
  border-color: rgb(113 77 56 / 0.1);
  
 
}
.border-\[\#714d38\]\/20{
  border-color: rgb(113 77 56 / 0.2);
  
 
}
.border-\[\#714d38\]\/30{
  border-color: rgb(113 77 56 / 0.3);
  
 
}
.border-\[\#ccccc3\]{
  --tw-border-opacity: 1;
  border-color: rgb(204 204 195 / var(--tw-border-opacity));
  
 
}
.border-\[\#d4af37\]{
  --tw-border-opacity: 1;
  border-color: rgb(212 175 55 / var(--tw-border-opacity));
  
 
}
.border-\[\#e6e6e1\]{
  --tw-border-opacity: 1;
  border-color: rgb(230 230 225 / var(--tw-border-opacity));
  
 
}
.border-\[var\(--gold\)\]{
  border-color: var(--gold);
  
 
}
.border-\[var\(--kelp-600\)\]{
  border-color: var(--kelp-600);
  
 
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity));
  
 
}
.border-amber-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity));
  
 
}
.border-blue-100{
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity));
  
 
}
.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
  
 
}
.border-blue-300{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
  
 
}
.border-blue-500{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
  
 
}
.border-blue-500\/20{
  border-color: rgb(59 130 246 / 0.2);
  
 
}
.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
  
 
}
.border-emerald-200{
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity));
  
 
}
.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
  
 
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  
 
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  
 
}
.border-gray-400{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
  
 
}
.border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
  
 
}
.border-gray-900{
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity));
  
 
}
.border-green-100{
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity));
  
 
}
.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity));
  
 
}
.border-green-300{
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity));
  
 
}
.border-green-400{
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity));
  
 
}
.border-green-500\/20{
  border-color: rgb(34 197 94 / 0.2);
  
 
}
.border-indigo-200{
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity));
  
 
}
.border-indigo-600{
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity));
  
 
}
.border-kelp-100{
  --tw-border-opacity: 1;
  border-color: rgb(230 230 225 / var(--tw-border-opacity));
  
 
}
.border-kelp-200{
  --tw-border-opacity: 1;
  border-color: rgb(204 204 195 / var(--tw-border-opacity));
  
 
}
.border-kelp-300{
  --tw-border-opacity: 1;
  border-color: rgb(171 171 157 / var(--tw-border-opacity));
  
 
}
.border-kelp-600{
  --tw-border-opacity: 1;
  border-color: rgb(86 87 74 / var(--tw-border-opacity));
  
 
}
.border-kelp-800{
  --tw-border-opacity: 1;
  border-color: rgb(58 59 52 / var(--tw-border-opacity));
  
 
}
.border-purple-200{
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity));
  
 
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
  
 
}
.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity));
  
 
}
.border-red-400{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
  
 
}
.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  
 
}
.border-red-500\/20{
  border-color: rgb(239 68 68 / 0.2);
  
 
}
.border-transparent{
  border-color: transparent;
  
 
}
.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  
 
}
.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
  
 
}
.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
  
 
}
.border-white\/30{
  border-color: rgb(255 255 255 / 0.3);
  
 
}
.border-yellow-100{
  --tw-border-opacity: 1;
  border-color: rgb(254 249 195 / var(--tw-border-opacity));
  
 
}
.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity));
  
 
}
.border-yellow-300{
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity));
  
 
}
.border-yellow-500{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity));
  
 
}
.border-yellow-500\/20{
  border-color: rgb(234 179 8 / 0.2);
  
 
}
.border-yellow-600{
  --tw-border-opacity: 1;
  border-color: rgb(202 138 4 / var(--tw-border-opacity));
  
 
}
.border-t-gray-900{
  --tw-border-opacity: 1;
  border-top-color: rgb(17 24 39 / var(--tw-border-opacity));
  
 
}
.border-t-kelp-600{
  --tw-border-opacity: 1;
  border-top-color: rgb(86 87 74 / var(--tw-border-opacity));
  
 
}
.border-t-transparent{
  border-top-color: transparent;
  
 
}
.border-t-white{
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
  
 
}
.\!bg-white{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
  
 
}
.bg-\[\#10b981\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#46473d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(70 71 61 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#46473d\]\/10{
  background-color: rgb(70 71 61 / 0.1);
  
 
}
.bg-\[\#46473d\]\/20{
  background-color: rgb(70 71 61 / 0.2);
  
 
}
.bg-\[\#6b7280\]{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#714d38\]{
  --tw-bg-opacity: 1;
  background-color: rgb(113 77 56 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#714d38\]\/10{
  background-color: rgb(113 77 56 / 0.1);
  
 
}
.bg-\[\#714d38\]\/20{
  background-color: rgb(113 77 56 / 0.2);
  
 
}
.bg-\[\#714d38\]\/40{
  background-color: rgb(113 77 56 / 0.4);
  
 
}
.bg-\[\#714d38\]\/5{
  background-color: rgb(113 77 56 / 0.05);
  
 
}
.bg-\[\#714d38\]\/80{
  background-color: rgb(113 77 56 / 0.8);
  
 
}
.bg-\[\#8a8b7a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(138 139 122 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#d4af37\]{
  --tw-bg-opacity: 1;
  background-color: rgb(212 175 55 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#d4d4aa\]{
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 170 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#e6e6e1\]{
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 225 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#f0efe9\]{
  --tw-bg-opacity: 1;
  background-color: rgb(240 239 233 / var(--tw-bg-opacity));
  
 
}
.bg-\[\#f7f7f6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 246 / var(--tw-bg-opacity));
  
 
}
.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
  
 
}
.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
  
 
}
.bg-amber-500{
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
  
 
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  
 
}
.bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
  
 
}
.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
  
 
}
.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
  
 
}
.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
  
 
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
  
 
}
.bg-blue-200{
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
  
 
}
.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
  
 
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
  
 
}
.bg-blue-50\/50{
  background-color: rgb(239 246 255 / 0.5);
  
 
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  
 
}
.bg-blue-500\/10{
  background-color: rgb(59 130 246 / 0.1);
  
 
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
  
 
}
.bg-blue-900{
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
  
 
}
.bg-current{
  background-color: currentColor;
  
 
}
.bg-emerald-100{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
  
 
}
.bg-emerald-200\/70{
  background-color: rgb(167 243 208 / 0.7);
  
 
}
.bg-emerald-300{
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
  
 
}
.bg-emerald-50{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
  
 
}
.bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
  
 
}
.bg-emerald-600{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
  
 
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  
 
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
  
 
}
.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
  
 
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
  
 
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  
 
}
.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
  
 
}
.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
  
 
}
.bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
  
 
}
.bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
  
 
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
  
 
}
.bg-green-200{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
  
 
}
.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
  
 
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
  
 
}
.bg-green-500\/10{
  background-color: rgb(34 197 94 / 0.1);
  
 
}
.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
  
 
}
.bg-indigo-100{
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
  
 
}
.bg-indigo-50{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
  
 
}
.bg-indigo-600{
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
  
 
}
.bg-kelp-100{
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 225 / var(--tw-bg-opacity));
  
 
}
.bg-kelp-100\/50{
  background-color: rgb(230 230 225 / 0.5);
  
 
}
.bg-kelp-300{
  --tw-bg-opacity: 1;
  background-color: rgb(171 171 157 / var(--tw-bg-opacity));
  
 
}
.bg-kelp-50{
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 246 / var(--tw-bg-opacity));
  
 
}
.bg-kelp-50\/30{
  background-color: rgb(247 247 246 / 0.3);
  
 
}
.bg-kelp-600{
  --tw-bg-opacity: 1;
  background-color: rgb(86 87 74 / var(--tw-bg-opacity));
  
 
}
.bg-kelp-700{
  --tw-bg-opacity: 1;
  background-color: rgb(70 71 61 / var(--tw-bg-opacity));
  
 
}
.bg-kelp-800{
  --tw-bg-opacity: 1;
  background-color: rgb(58 59 52 / var(--tw-bg-opacity));
  
 
}
.bg-kelp-900\/80{
  background-color: rgb(50 51 46 / 0.8);
  
 
}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
  
 
}
.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
  
 
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
  
 
}
.bg-orange-600{
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
  
 
}
.bg-pink-100{
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
  
 
}
.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
  
 
}
.bg-purple-200{
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity));
  
 
}
.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
  
 
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
  
 
}
.bg-purple-600{
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
  
 
}
.bg-purple-600\/0{
  background-color: rgb(147 51 234 / 0);
  
 
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
  
 
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
  
 
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  
 
}
.bg-red-500\/10{
  background-color: rgb(239 68 68 / 0.1);
  
 
}
.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
  
 
}
.bg-red-900{
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
  
 
}
.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
  
 
}
.bg-teal-100{
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity));
  
 
}
.bg-transparent{
  background-color: transparent;
  
 
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  
 
}
.bg-white\/10{
  background-color: rgb(255 255 255 / 0.1);
  
 
}
.bg-white\/30{
  background-color: rgb(255 255 255 / 0.3);
  
 
}
.bg-white\/5{
  background-color: rgb(255 255 255 / 0.05);
  
 
}
.bg-white\/80{
  background-color: rgb(255 255 255 / 0.8);
  
 
}
.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
  
 
}
.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
  
 
}
.bg-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
  
 
}
.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
  
 
}
.bg-yellow-500\/10{
  background-color: rgb(234 179 8 / 0.1);
  
 
}
.bg-yellow-900{
  --tw-bg-opacity: 1;
  background-color: rgb(113 63 18 / var(--tw-bg-opacity));
  
 
}
.bg-opacity-20{
  --tw-bg-opacity: 0.2;
  
 
}
.bg-opacity-25{
  --tw-bg-opacity: 0.25;
  
 
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
  
 
}
.bg-opacity-70{
  --tw-bg-opacity: 0.7;
  
 
}
.bg-opacity-75{
  --tw-bg-opacity: 0.75;
  
 
}
.bg-opacity-80{
  --tw-bg-opacity: 0.8;
  
 
}
.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-gradient-to-tr{
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  
 
}
.from-\[\#46473d\]{
  --tw-gradient-from: #46473d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(70 71 61 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-\[\#46473d\]\/5{
  --tw-gradient-from: rgb(70 71 61 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(70 71 61 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-\[\#714d38\]{
  --tw-gradient-from: #714d38 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(113 77 56 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-\[\#f7f7f6\]{
  --tw-gradient-from: #f7f7f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 247 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-amber-50{
  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-black\/20{
  --tw-gradient-from: rgb(0 0 0 / 0.2) 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-black\/30{
  --tw-gradient-from: rgb(0 0 0 / 0.3) 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-black\/40{
  --tw-gradient-from: rgb(0 0 0 / 0.4) 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-black\/60{
  --tw-gradient-from: rgb(0 0 0 / 0.6) 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-blue-500{
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-blue-600{
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-emerald-100{
  --tw-gradient-from: #d1fae5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(209 250 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-emerald-50{
  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.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);
  
 
}
.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-gray-900{
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 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-kelp-100{
  --tw-gradient-from: #e6e6e1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(230 230 225 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-kelp-50{
  --tw-gradient-from: #f7f7f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 247 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-kelp-500{
  --tw-gradient-from: #6d6e5e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(109 110 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-kelp-950\/60{
  --tw-gradient-from: rgb(27 28 23 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(27 28 23 / 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-purple-600{
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-sky-50{
  --tw-gradient-from: #f0f9ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 249 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.from-transparent{
  --tw-gradient-from: transparent 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-white{
  --tw-gradient-from: #fff 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);
  
 
}
.via-\[\#46473d\]\/20{
  --tw-gradient-to: rgb(70 71 61 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(70 71 61 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
  
 
}
.via-gray-800{
  --tw-gradient-to: rgb(31 41 55 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to);
  
 
}
.via-green-50{
  --tw-gradient-to: rgb(240 253 244 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f0fdf4 var(--tw-gradient-via-position), var(--tw-gradient-to);
  
 
}
.to-\[\#6d6e5e\]{
  --tw-gradient-to: #6d6e5e var(--tw-gradient-to-position);
  
 
}
.to-\[\#6d6e5e\]\/5{
  --tw-gradient-to: rgb(109 110 94 / 0.05) var(--tw-gradient-to-position);
  
 
}
.to-\[\#9d7e5f\]{
  --tw-gradient-to: #9d7e5f var(--tw-gradient-to-position);
  
 
}
.to-amber-100{
  --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position);
  
 
}
.to-black\/30{
  --tw-gradient-to: rgb(0 0 0 / 0.3) var(--tw-gradient-to-position);
  
 
}
.to-blue-100{
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
  
 
}
.to-blue-50{
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
  
 
}
.to-blue-600{
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
  
 
}
.to-emerald-100{
  --tw-gradient-to: #d1fae5 var(--tw-gradient-to-position);
  
 
}
.to-gray-100{
  --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
  
 
}
.to-gray-50{
  --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
  
 
}
.to-gray-900{
  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
  
 
}
.to-green-100{
  --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position);
  
 
}
.to-green-50{
  --tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position);
  
 
}
.to-indigo-50{
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
  
 
}
.to-kelp-100{
  --tw-gradient-to: #e6e6e1 var(--tw-gradient-to-position);
  
 
}
.to-kelp-200{
  --tw-gradient-to: #ccccc3 var(--tw-gradient-to-position);
  
 
}
.to-kelp-50\/30{
  --tw-gradient-to: rgb(247 247 246 / 0.3) var(--tw-gradient-to-position);
  
 
}
.to-kelp-600{
  --tw-gradient-to: #56574a var(--tw-gradient-to-position);
  
 
}
.to-purple-100{
  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
  
 
}
.to-purple-50{
  --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);
  
 
}
.to-purple-600{
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
  
 
}
.to-sky-100{
  --tw-gradient-to: #e0f2fe var(--tw-gradient-to-position);
  
 
}
.to-teal-600{
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
  
 
}
.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  
 
}
.to-white{
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
  
 
}
.fill-current{
  fill: currentColor;
  
 
}
.fill-none{
  fill: none;
  
 
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
  
 
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
  
 
}
.p-1{
  padding: 0.25rem;
  
 
}
.p-1\.5{
  padding: 0.375rem;
  
 
}
.p-12{
  padding: 3rem;
  
 
}
.p-2{
  padding: 0.5rem;
  
 
}
.p-2\.5{
  padding: 0.625rem;
  
 
}
.p-3{
  padding: 0.75rem;
  
 
}
.p-4{
  padding: 1rem;
  
 
}
.p-5{
  padding: 1.25rem;
  
 
}
.p-6{
  padding: 1.5rem;
  
 
}
.p-8{
  padding: 2rem;
  
 
}
.\!px-2{
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  
 
}
.\!py-1{
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  
 
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  
 
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  
 
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  
 
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  
 
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  
 
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
  
 
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  
 
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  
 
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
  
 
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
  
 
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  
 
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  
 
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  
 
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
  
 
}
.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
  
 
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  
 
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  
 
}
.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
  
 
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  
 
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  
 
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
  
 
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  
 
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  
 
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
  
 
}
.pb-16{
  padding-bottom: 4rem;
  
 
}
.pb-2{
  padding-bottom: 0.5rem;
  
 
}
.pb-4{
  padding-bottom: 1rem;
  
 
}
.pl-10{
  padding-left: 2.5rem;
  
 
}
.pl-16{
  padding-left: 4rem;
  
 
}
.pl-2{
  padding-left: 0.5rem;
  
 
}
.pl-3{
  padding-left: 0.75rem;
  
 
}
.pl-4{
  padding-left: 1rem;
  
 
}
.pl-5{
  padding-left: 1.25rem;
  
 
}
.pl-7{
  padding-left: 1.75rem;
  
 
}
.pl-8{
  padding-left: 2rem;
  
 
}
.pl-9{
  padding-left: 2.25rem;
  
 
}
.pr-10{
  padding-right: 2.5rem;
  
 
}
.pr-11{
  padding-right: 2.75rem;
  
 
}
.pr-2{
  padding-right: 0.5rem;
  
 
}
.pr-3{
  padding-right: 0.75rem;
  
 
}
.pr-4{
  padding-right: 1rem;
  
 
}
.pr-6{
  padding-right: 1.5rem;
  
 
}
.pt-2{
  padding-top: 0.5rem;
  
 
}
.pt-3{
  padding-top: 0.75rem;
  
 
}
.pt-4{
  padding-top: 1rem;
  
 
}
.pt-5{
  padding-top: 1.25rem;
  
 
}
.pt-6{
  padding-top: 1.5rem;
  
 
}
.pt-8{
  padding-top: 2rem;
  
 
}
.text-left{
  text-align: left;
  
 
}
.text-center{
  text-align: center;
  
 
}
.text-right{
  text-align: right;
  
 
}
.align-middle{
  vertical-align: middle;
  
 
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
 
}
.font-serif{
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  
 
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
  
 
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
  
 
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
  
 
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
  
 
}
.text-\[10px\]{
  font-size: 10px;
  
 
}
.text-\[15px\]{
  font-size: 15px;
  
 
}
.text-\[20vw\]{
  font-size: 20vw;
  
 
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
  
 
}
.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;
  
 
}
.font-bold{
  font-weight: 700;
  
 
}
.font-light{
  font-weight: 300;
  
 
}
.font-medium{
  font-weight: 500;
  
 
}
.font-normal{
  font-weight: 400;
  
 
}
.font-semibold{
  font-weight: 600;
  
 
}
.uppercase{
  text-transform: uppercase;
  
 
}
.lowercase{
  text-transform: lowercase;
  
 
}
.capitalize{
  text-transform: capitalize;
  
 
}
.italic{
  font-style: italic;
  
 
}
.leading-4{
  line-height: 1rem;
  
 
}
.leading-6{
  line-height: 1.5rem;
  
 
}
.leading-relaxed{
  line-height: 1.625;
  
 
}
.leading-tight{
  line-height: 1.25;
  
 
}
.tracking-tight{
  letter-spacing: -0.025em;
  
 
}
.tracking-wider{
  letter-spacing: 0.05em;
  
 
}
.\!text-gray-800{
  --tw-text-opacity: 1 !important;
  color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
  
 
}
.text-\[\#10b981\]{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity));
  
 
}
.text-\[\#32332e\]{
  --tw-text-opacity: 1;
  color: rgb(50 51 46 / var(--tw-text-opacity));
  
 
}
.text-\[\#46473d\]{
  --tw-text-opacity: 1;
  color: rgb(70 71 61 / var(--tw-text-opacity));
  
 
}
.text-\[\#46473d\]\/50{
  color: rgb(70 71 61 / 0.5);
  
 
}
.text-\[\#46473d\]\/60{
  color: rgb(70 71 61 / 0.6);
  
 
}
.text-\[\#46473d\]\/70{
  color: rgb(70 71 61 / 0.7);
  
 
}
.text-\[\#46473d\]\/80{
  color: rgb(70 71 61 / 0.8);
  
 
}
.text-\[\#56574a\]{
  --tw-text-opacity: 1;
  color: rgb(86 87 74 / var(--tw-text-opacity));
  
 
}
.text-\[\#6366f1\]{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity));
  
 
}
.text-\[\#6d6e5e\]{
  --tw-text-opacity: 1;
  color: rgb(109 110 94 / var(--tw-text-opacity));
  
 
}
.text-\[\#714d38\]{
  --tw-text-opacity: 1;
  color: rgb(113 77 56 / var(--tw-text-opacity));
  
 
}
.text-\[\#714d38\]\/20{
  color: rgb(113 77 56 / 0.2);
  
 
}
.text-\[\#714d38\]\/40{
  color: rgb(113 77 56 / 0.4);
  
 
}
.text-\[\#714d38\]\/50{
  color: rgb(113 77 56 / 0.5);
  
 
}
.text-\[\#714d38\]\/60{
  color: rgb(113 77 56 / 0.6);
  
 
}
.text-\[\#714d38\]\/70{
  color: rgb(113 77 56 / 0.7);
  
 
}
.text-\[\#714d38\]\/80{
  color: rgb(113 77 56 / 0.8);
  
 
}
.text-\[\#714d38\]\/90{
  color: rgb(113 77 56 / 0.9);
  
 
}
.text-\[\#ccccc3\]{
  --tw-text-opacity: 1;
  color: rgb(204 204 195 / var(--tw-text-opacity));
  
 
}
.text-\[\#d4af37\]{
  --tw-text-opacity: 1;
  color: rgb(212 175 55 / var(--tw-text-opacity));
  
 
}
.text-\[\#e63946\]{
  --tw-text-opacity: 1;
  color: rgb(230 57 70 / var(--tw-text-opacity));
  
 
}
.text-\[\#ef4444\]{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  
 
}
.text-\[\#f7f7f6\]{
  --tw-text-opacity: 1;
  color: rgb(247 247 246 / var(--tw-text-opacity));
  
 
}
.text-\[var\(--kelp-700\)\]{
  color: var(--kelp-700);
  
 
}
.text-amber-500{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
  
 
}
.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
  
 
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
  
 
}
.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));
  
 
}
.text-blue-300{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity));
  
 
}
.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
  
 
}
.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
  
 
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
  
 
}
.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
  
 
}
.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
  
 
}
.text-blue-900{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity));
  
 
}
.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity));
  
 
}
.text-emerald-500{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity));
  
 
}
.text-emerald-600{
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity));
  
 
}
.text-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity));
  
 
}
.text-emerald-700\/80{
  color: rgb(4 120 87 / 0.8);
  
 
}
.text-emerald-800{
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity));
  
 
}
.text-gray-100{
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
  
 
}
.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
  
 
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
  
 
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
  
 
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
  
 
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
  
 
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
  
 
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
  
 
}
.text-green-300{
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
  
 
}
.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
  
 
}
.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
  
 
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
  
 
}
.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
  
 
}
.text-green-700\/80{
  color: rgb(21 128 61 / 0.8);
  
 
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
  
 
}
.text-green-900{
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity));
  
 
}
.text-indigo-500{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity));
  
 
}
.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity));
  
 
}
.text-indigo-700{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity));
  
 
}
.text-indigo-800{
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity));
  
 
}
.text-kelp-300{
  --tw-text-opacity: 1;
  color: rgb(171 171 157 / var(--tw-text-opacity));
  
 
}
.text-kelp-400{
  --tw-text-opacity: 1;
  color: rgb(136 137 120 / var(--tw-text-opacity));
  
 
}
.text-kelp-500{
  --tw-text-opacity: 1;
  color: rgb(109 110 94 / var(--tw-text-opacity));
  
 
}
.text-kelp-600{
  --tw-text-opacity: 1;
  color: rgb(86 87 74 / var(--tw-text-opacity));
  
 
}
.text-kelp-700{
  --tw-text-opacity: 1;
  color: rgb(70 71 61 / var(--tw-text-opacity));
  
 
}
.text-kelp-800{
  --tw-text-opacity: 1;
  color: rgb(58 59 52 / var(--tw-text-opacity));
  
 
}
.text-kelp-900{
  --tw-text-opacity: 1;
  color: rgb(50 51 46 / var(--tw-text-opacity));
  
 
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity));
  
 
}
.text-orange-600{
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity));
  
 
}
.text-orange-700{
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity));
  
 
}
.text-orange-800{
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity));
  
 
}
.text-orange-900{
  --tw-text-opacity: 1;
  color: rgb(124 45 18 / var(--tw-text-opacity));
  
 
}
.text-pink-800{
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity));
  
 
}
.text-purple-400{
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity));
  
 
}
.text-purple-500{
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity));
  
 
}
.text-purple-600{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity));
  
 
}
.text-purple-700{
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity));
  
 
}
.text-purple-800{
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity));
  
 
}
.text-purple-900{
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity));
  
 
}
.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
  
 
}
.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
  
 
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  
 
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
  
 
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
  
 
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
  
 
}
.text-red-900{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity));
  
 
}
.text-sky-600{
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity));
  
 
}
.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
  
 
}
.text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
  
 
}
.text-teal-800{
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity));
  
 
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  
 
}
.text-white\/80{
  color: rgb(255 255 255 / 0.8);
  
 
}
.text-white\/90{
  color: rgb(255 255 255 / 0.9);
  
 
}
.text-yellow-300{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity));
  
 
}
.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
  
 
}
.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity));
  
 
}
.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity));
  
 
}
.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity));
  
 
}
.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
  
 
}
.underline{
  text-decoration-line: underline;
  
 
}
.line-through{
  text-decoration-line: line-through;
  
 
}
.placeholder-kelp-400::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(136 137 120 / var(--tw-placeholder-opacity));
  
 
}
.placeholder-kelp-400::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(136 137 120 / var(--tw-placeholder-opacity));
  
 
}
.accent-kelp-500{
  accent-color: #6d6e5e;
  
 
}
.opacity-0{
  opacity: 0;
  
 
}
.opacity-10{
  opacity: 0.1;
  
 
}
.opacity-100{
  opacity: 1;
  
 
}
.opacity-20{
  opacity: 0.2;
  
 
}
.opacity-30{
  opacity: 0.3;
  
 
}
.opacity-5{
  opacity: 0.05;
  
 
}
.opacity-50{
  opacity: 0.5;
  
 
}
.opacity-60{
  opacity: 0.6;
  
 
}
.opacity-70{
  opacity: 0.7;
  
 
}
.opacity-75{
  opacity: 0.75;
  
 
}
.opacity-80{
  opacity: 0.8;
  
 
}
.opacity-90{
  opacity: 0.9;
  
 
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-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-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);
  
 
}
.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-blue-500\/50{
  --tw-shadow-color: rgb(59 130 246 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
  
 
}
.shadow-gray-400\/50{
  --tw-shadow-color: rgb(156 163 175 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
  
 
}
.shadow-green-500\/50{
  --tw-shadow-color: rgb(34 197 94 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
  
 
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
  
 
}
.outline{
  outline-style: solid;
  
 
}
.ring{
  --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(3px + 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);
  
 
}
.ring-0{
  --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(0px + 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);
  
 
}
.ring-1{
  --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(1px + 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);
  
 
}
.ring-2{
  --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);
  
 
}
.ring-black{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
  
 
}
.ring-kelp-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(204 204 195 / var(--tw-ring-opacity));
  
 
}
.ring-white{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
  
 
}
.ring-opacity-5{
  --tw-ring-opacity: 0.05;
  
 
}
.ring-offset-white{
  --tw-ring-offset-color: #fff;
  
 
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  
 
}
.blur-sm{
  --tw-blur: blur(4px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  
 
}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  
 
}
.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  
 
}
.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  
 
}
.sepia{
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  
 
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-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);
  
 
}
.backdrop-filter{
  -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{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -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-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  
 
}
.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, text-decoration-color, fill, stroke;
  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-shadow{
  transition-property: box-shadow;
  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;
  
 
}
.duration-200{
  transition-duration: 200ms;
  
 
}
.duration-300{
  transition-duration: 300ms;
  
 
}
.duration-500{
  transition-duration: 500ms;
  
 
}
.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  
 
}
.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);
  
 
}
/* =================== PAGE TRANSITION LAYOUT SHIFT PREVENTION =================== */
/* Set root background color */
html {
  background-color: var(--kelp-50);
}
/* Prevent any element from causing horizontal overflow */
* {
  max-width: 100%;
  box-sizing: border-box;
}
/* 8. Container overflow prevention */
html, body {
  width: 100%;
  overflow-x: hidden; /* Restore overflow-x hidden to prevent horizontal scrolling */
  max-width: 100vw;
  margin: 0 auto !important;
 
}
#root {
  width: 100%;
  max-width: 100vw;

}
.app-container {
  width: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.home-container {
  width: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}
/* Set body background color */
body {
  background-color: var(--kelp-50);
  color: var(--color-text-primary);
  
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch; /* Add this */
}
/* Layout shift prevention is now handled by JavaScript in main.tsx */
/* 1. Root level - balanced approach */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.layout-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
/* 2. Body level - balanced approach */
body {
  width: 100%;
  background-color: var(--kelp-50);
  color: var(--color-text-primary);

  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Specific containers that might cause overflow */
.section-container,
.hero-section,
.featured-collections-section,
.trending-products-section,
.product-showcase-section {
  width: 100%;
  max-width: 100vw;
}
/* 3. Universal touch-action - allow scrolling */
* {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Hide scr
 
/* 4. Allow scrolling in specific containers */
.smart-chat-messages,
.shop-filter-content,
.conversation-dropdown-content,
.scrollable-content,
.scrollable,
[data-scrollable="true"] {
  touch-action: pan-y;
}
/* 5. Force 16px font size on interactive elements to prevent iOS zoom */
input,
textarea,
select,
button,
[contenteditable="true"],
[role="button"],
[tabindex] {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* 6. Specific input types that commonly trigger zoom */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* 7. Re-enable text selection where needed */
input,
textarea,
[contenteditable="true"],
p,
span,
div,
a,
label {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}
/* 9. Mobile-specific optimizations - REMOVED TO FIX LOADING OVERLAY */
/* 9. Prevent double-tap zoom on all interactive elements */
a, button, input, textarea, select, [role="button"], [tabindex] {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* 10. Viewport enforcement */
@-o-viewport {
  width: device-width;
  initial-scale: 1.0;
  maximum-scale: 1.0;
  minimum-scale: 1.0;
  user-scalable: no;
}
@viewport {
  width: device-width;
  initial-scale: 1.0;
  maximum-scale: 1.0;
  minimum-scale: 1.0;
  user-scalable: no;
}
/* 11. iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  html, body {
    background-color: var(--kelp-50);
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
    touch-action: manipulation;
  }
  
  input, textarea, select {

    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
    touch-action: manipulation;
  }
  
  /* Allow scrolling only where needed */
  .smart-chat-messages,
  .shop-filter-content,
  .conversation-dropdown-content,
  .scrollable-content,
  .scrollable,
  [data-scrollable="true"] {
    touch-action: pan-y;
  }
}
/**
 * Safari Image Fixes
 * Comprehensive fixes for Safari image loading and rendering issues
 */
/* Safari-specific image optimizations */
@supports (-webkit-touch-callout: none) {
  /* Force hardware acceleration for all image containers */
  .premium-product-card__image-container,
  .premium-product-card__image-wrapper,
  .premium-product-card__image,
  .premium-card-image-fallback,
  .leorre-image-wrapper,
  .leorre-grid-image,
  .chat-product-image,
  .product-gallery-image,
  .optimized-image,
  /* Removed global img hardware acceleration that causes Safari chunky scroll */

  /* Prevent Safari from reflowing during image transitions */
  .premium-product-card__image,
  .premium-product-card__image--secondary,
  .premium-product-card__image--variant-hover,
  .leorre-grid-image,
  .chat-product-image {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* Disable transitions during scroll to prevent flashing */
  .is-scrolling .premium-product-card__image,
  .is-scrolling .premium-product-card__image--secondary,
  .is-scrolling .premium-product-card__image--variant-hover,
  .is-scrolling .premium-card-image-fallback,
  .is-scrolling .leorre-grid-image,
  .is-scrolling .chat-product-image,
  .is-scrolling img {
    transition: none !important;
  }



  /* Fix for Safari image opacity transitions */
  .premium-product-card__image[style*="opacity: 0"],
  .premium-product-card__image--secondary[style*="opacity: 0"],
  .premium-product-card__image--variant-hover[style*="opacity: 0"] {
    display: none !important;
  }

  .premium-product-card__image[style*="opacity: 1"],
  .premium-product-card__image--secondary[style*="opacity: 1"],
  .premium-product-card__image--variant-hover[style*="opacity: 1"] {
    display: block !important;
  }
}
/* iOS Safari specific fixes - REMOVED TO FIX LOADING OVERLAY */
/* Safari-specific fixes for image galleries */
@supports (-webkit-touch-callout: none) {

 
}
/* Global Safari image loading fixes */
@supports (-webkit-touch-callout: none) {
  /* Prevent Safari from showing broken image icons */
  img {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Fix for Safari image loading states */
  img[src=""],
  img[src="null"],
  img[src="undefined"] {
    display: none !important;
  }

  /* Safari-specific image error handling */
  img:not([src]),
  img[src=""],
  img[src="null"],
  img[src="undefined"] {
    visibility: hidden;
  }
}
/* Safari-specific fixes for product galleries and image zooms */
@supports (-webkit-touch-callout: none) {


  .leorre-zoom-image-container[data-dragging="true"] {
    transition: none !important;
  }
}
.file\:mr-4::file-selector-button{
  margin-right: 1rem;
  
 
}
.file\:rounded::file-selector-button{
  border-radius: 0.25rem;
  
 
}
.file\:border-0::file-selector-button{
  border-width: 0px;
  
 
}
.file\:bg-\[\#714d38\]\/10::file-selector-button{
  background-color: rgb(113 77 56 / 0.1);
  
 
}
.file\:px-4::file-selector-button{
  padding-left: 1rem;
  padding-right: 1rem;
  
 
}
.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  
 
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
  
 
}
.file\:font-semibold::file-selector-button{
  font-weight: 600;
  
 
}
.file\:text-\[\#714d38\]::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(113 77 56 / var(--tw-text-opacity));
  
 
}
.last\:border-0:last-child{
  border-width: 0px;
  
 
}
.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\:scale-110:hover{
  --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));
  
 
}
.hover\:border-\[\#46473d\]\/30:hover{
  border-color: rgb(70 71 61 / 0.3);
  
 
}
.hover\:border-\[\#714d38\]\/40:hover{
  border-color: rgb(113 77 56 / 0.4);
  
 
}
.hover\:border-\[\#714d38\]\/50:hover{
  border-color: rgb(113 77 56 / 0.5);
  
 
}
.hover\:border-amber-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity));
  
 
}
.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  
 
}
.hover\:border-gray-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
  
 
}
.hover\:border-kelp-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(109 110 94 / var(--tw-border-opacity));
  
 
}
.hover\:border-purple-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity));
  
 
}
.hover\:border-white\/50:hover{
  border-color: rgb(255 255 255 / 0.5);
  
 
}
.hover\:bg-\[\#059669\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-\[\#46473d\]\/10:hover{
  background-color: rgb(70 71 61 / 0.1);
  
 
}
.hover\:bg-\[\#46473d\]\/20:hover{
  background-color: rgb(70 71 61 / 0.2);
  
 
}
.hover\:bg-\[\#46473d\]\/5:hover{
  background-color: rgb(70 71 61 / 0.05);
  
 
}
.hover\:bg-\[\#46473d\]\/90:hover{
  background-color: rgb(70 71 61 / 0.9);
  
 
}
.hover\:bg-\[\#4b5563\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-\[\#56574a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(86 87 74 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-\[\#5a3d2c\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(90 61 44 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-\[\#714d38\]\/10:hover{
  background-color: rgb(113 77 56 / 0.1);
  
 
}
.hover\:bg-\[\#714d38\]\/20:hover{
  background-color: rgb(113 77 56 / 0.2);
  
 
}
.hover\:bg-\[\#714d38\]\/5:hover{
  background-color: rgb(113 77 56 / 0.05);
  
 
}
.hover\:bg-\[\#714d38\]\/60:hover{
  background-color: rgb(113 77 56 / 0.6);
  
 
}
.hover\:bg-\[\#714d38\]\/90:hover{
  background-color: rgb(113 77 56 / 0.9);
  
 
}
.hover\:bg-\[\#b8941f\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(184 148 31 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-\[\#e6e6e1\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 225 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-\[\#e9d192\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(233 209 146 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-\[\#eae9e3\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(234 233 227 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-\[\#f7f7f6\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 246 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-amber-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-amber-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-amber-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-blue-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-blue-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-blue-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-blue-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-emerald-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-emerald-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-emerald-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-gray-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-green-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-green-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-indigo-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-kelp-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 225 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-kelp-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(204 204 195 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-kelp-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 246 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-kelp-50\/50:hover{
  background-color: rgb(247 247 246 / 0.5);
  
 
}
.hover\:bg-kelp-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(70 71 61 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-kelp-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(58 59 52 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-orange-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-orange-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-purple-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-purple-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-red-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-red-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-red-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
  
 
}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  
 
}
.hover\:from-blue-700:hover{
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.hover\:from-emerald-700:hover{
  --tw-gradient-from: #047857 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.hover\:from-purple-700:hover{
  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  
 
}
.hover\:to-blue-700:hover{
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
  
 
}
.hover\:to-purple-700:hover{
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
  
 
}
.hover\:to-teal-700:hover{
  --tw-gradient-to: #0f766e var(--tw-gradient-to-position);
  
 
}
.hover\:text-\[\#32332e\]:hover{
  --tw-text-opacity: 1;
  color: rgb(50 51 46 / var(--tw-text-opacity));
  
 
}
.hover\:text-\[\#46473d\]:hover{
  --tw-text-opacity: 1;
  color: rgb(70 71 61 / var(--tw-text-opacity));
  
 
}
.hover\:text-\[\#46473d\]\/80:hover{
  color: rgb(70 71 61 / 0.8);
  
 
}
.hover\:text-\[\#56574a\]:hover{
  --tw-text-opacity: 1;
  color: rgb(86 87 74 / var(--tw-text-opacity));
  
 
}
.hover\:text-\[\#5a3d2c\]:hover{
  --tw-text-opacity: 1;
  color: rgb(90 61 44 / var(--tw-text-opacity));
  
 
}
.hover\:text-\[\#714d38\]:hover{
  --tw-text-opacity: 1;
  color: rgb(113 77 56 / var(--tw-text-opacity));
  
 
}
.hover\:text-\[\#714d38\]\/60:hover{
  color: rgb(113 77 56 / 0.6);
  
 
}
.hover\:text-\[\#714d38\]\/80:hover{
  color: rgb(113 77 56 / 0.8);
  
 
}
.hover\:text-\[\#d4af37\]:hover{
  --tw-text-opacity: 1;
  color: rgb(212 175 55 / var(--tw-text-opacity));
  
 
}
.hover\:text-amber-500:hover{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
  
 
}
.hover\:text-amber-600:hover{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
  
 
}
.hover\:text-amber-700:hover{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
  
 
}
.hover\:text-blue-600:hover{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
  
 
}
.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
  
 
}
.hover\:text-blue-900:hover{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity));
  
 
}
.hover\:text-gray-500:hover{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
  
 
}
.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
  
 
}
.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
  
 
}
.hover\:text-gray-800:hover{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
  
 
}
.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
  
 
}
.hover\:text-green-700:hover{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
  
 
}
.hover\:text-green-900:hover{
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity));
  
 
}
.hover\:text-indigo-600:hover{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity));
  
 
}
.hover\:text-indigo-800:hover{
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity));
  
 
}
.hover\:text-indigo-900:hover{
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity));
  
 
}
.hover\:text-kelp-600:hover{
  --tw-text-opacity: 1;
  color: rgb(86 87 74 / var(--tw-text-opacity));
  
 
}
.hover\:text-kelp-700:hover{
  --tw-text-opacity: 1;
  color: rgb(70 71 61 / var(--tw-text-opacity));
  
 
}
.hover\:text-kelp-800:hover{
  --tw-text-opacity: 1;
  color: rgb(58 59 52 / var(--tw-text-opacity));
  
 
}
.hover\:text-orange-900:hover{
  --tw-text-opacity: 1;
  color: rgb(124 45 18 / var(--tw-text-opacity));
  
 
}
.hover\:text-purple-900:hover{
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity));
  
 
}
.hover\:text-red-500:hover{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  
 
}
.hover\:text-red-600:hover{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
  
 
}
.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
  
 
}
.hover\:text-red-800:hover{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
  
 
}
.hover\:text-red-900:hover{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity));
  
 
}
.hover\:text-slate-900:hover{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
  
 
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  
 
}
.hover\:text-yellow-500:hover{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity));
  
 
}
.hover\:underline:hover{
  text-decoration-line: underline;
  
 
}
.hover\:no-underline:hover{
  text-decoration-line: none;
  
 
}
.hover\:opacity-100:hover{
  opacity: 1;
  
 
}
.hover\:shadow-lg:hover{
  --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);
  
 
}
.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\:shadow-xl:hover{
  --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);
  
 
}
.hover\:file\:bg-\[\#714d38\]\/20::file-selector-button:hover{
  background-color: rgb(113 77 56 / 0.2);
  
 
}
.focus\:z-10:focus{
  z-index: 10;
  
 
}
.focus\:border-\[\#46473d\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(70 71 61 / var(--tw-border-opacity));
  
 
}
.focus\:border-\[\#714d38\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(113 77 56 / var(--tw-border-opacity));
  
 
}
.focus\:border-\[\#714d38\]\/50:focus{
  border-color: rgb(113 77 56 / 0.5);
  
 
}
.focus\:border-\[\#d4af37\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(212 175 55 / var(--tw-border-opacity));
  
 
}
.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
  
 
}
.focus\:border-gray-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
  
 
}
.focus\:border-gray-900:focus{
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity));
  
 
}
.focus\:border-kelp-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(109 110 94 / var(--tw-border-opacity));
  
 
}
.focus\:border-purple-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity));
  
 
}
.focus\:border-transparent:focus{
  border-color: transparent;
  
 
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  
 
}
.focus\:ring: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(3px + 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-0: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(0px + 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-1: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(1px + 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-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-\[\#46473d\]:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(70 71 61 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-\[\#46473d\]\/20:focus{
  --tw-ring-color: rgb(70 71 61 / 0.2);
  
 
}
.focus\:ring-\[\#714d38\]:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(113 77 56 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-\[\#714d38\]\/20:focus{
  --tw-ring-color: rgb(113 77 56 / 0.2);
  
 
}
.focus\:ring-\[\#714d38\]\/30:focus{
  --tw-ring-color: rgb(113 77 56 / 0.3);
  
 
}
.focus\:ring-\[\#714d38\]\/50:focus{
  --tw-ring-color: rgb(113 77 56 / 0.5);
  
 
}
.focus\:ring-\[\#d4af37\]:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(212 175 55 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-gray-100:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-gray-900:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-green-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-indigo-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-kelp-100:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(230 230 225 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-kelp-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(204 204 195 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-kelp-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(109 110 94 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-kelp-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(86 87 74 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-purple-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-red-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
  
 
}
.focus\:ring-opacity-50:focus{
  --tw-ring-opacity: 0.5;
  
 
}
.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
  
 
}
.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
  
 
}
.focus-visible\:ring-2:focus-visible{
  --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-visible\:ring-\[\#714d38\]:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(113 77 56 / var(--tw-ring-opacity));
  
 
}
.focus-visible\:ring-slate-400:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity));
  
 
}
.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
  
 
}
.disabled\:pointer-events-none:disabled{
  pointer-events: none;
  
 
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
  
 
}
.disabled\:bg-gray-600:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
  
 
}
.disabled\:opacity-30:disabled{
  opacity: 0.3;
  
 
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
  
 
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
  
 
}
.group:hover .group-hover\:visible{
  visibility: visible;
  
 
}
.group:hover .group-hover\:block{
  display: block;
  
 
}
.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-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
  
 
}
.group:hover .group-hover\:bg-purple-600\/20{
  background-color: rgb(147 51 234 / 0.2);
  
 
}
.group:hover .group-hover\:text-\[\#46473d\]{
  --tw-text-opacity: 1;
  color: rgb(70 71 61 / var(--tw-text-opacity));
  
 
}
.group:hover .group-hover\:text-\[\#714d38\]{
  --tw-text-opacity: 1;
  color: rgb(113 77 56 / var(--tw-text-opacity));
  
 
}
.group:hover .group-hover\:text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
  
 
}
.group:hover .group-hover\:text-kelp-600{
  --tw-text-opacity: 1;
  color: rgb(86 87 74 / var(--tw-text-opacity));
  
 
}
.group:hover .group-hover\:text-kelp-700{
  --tw-text-opacity: 1;
  color: rgb(70 71 61 / var(--tw-text-opacity));
  
 
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
  
 
}
@media (min-width: 640px){
  .sm\:ml-3{
    margin-left: 0.75rem;
  
 
  }
  .sm\:ml-auto{
    margin-left: auto;
  
 
  }
  .sm\:block{
    display: block;
  
 
  }
  .sm\:flex{
    display: flex;
  
 
  }
  .sm\:hidden{
    display: none;
  
 
  }
  .sm\:flex-1{
    flex: 1 1 0%;
  
 
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
 
  }
  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  
 
  }
  .sm\:flex-row{
    flex-direction: row;
  
 
  }
  .sm\:items-center{
    align-items: center;
  
 
  }
  .sm\:justify-between{
    justify-content: space-between;
  
 
  }
  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  
 
  }
  .sm\:pl-6{
    padding-left: 1.5rem;
  
 
  }
  .sm\:pr-6{
    padding-right: 1.5rem;
  
 
  }
  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  
 
  }
  
 
}
@media (min-width: 768px){
  .md\:col-span-2{
    grid-column: span 2 / span 2;
  
 
  }
  .md\:mt-0{
    margin-top: 0px;
  
 
  }
  .md\:hidden{
    display: none;
  
 
  }
  .md\:w-64{
    width: 16rem;
  
 
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
 
  }
  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  
 
  }
  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  
 
  }
  .md\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  
 
  }
  .md\:flex-row{
    flex-direction: row;
  
 
  }
  .md\:items-center{
    align-items: center;
  
 
  }
  .md\:justify-between{
    justify-content: space-between;
  
 
  }
  .md\:divide-x > :not([hidden]) ~ :not([hidden]){
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  
 
  }
  .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  
 
  }
  .md\:rounded-lg{
    border-radius: 0.5rem;
  
 
  }
  .md\:p-8{
    padding: 2rem;
  
 
  }
  .md\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  
 
  }
  .md\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  
 
  }
  
 
}
@media (min-width: 1024px){
  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  
 
  }
  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  
 
  }
  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  
 
  }
  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  
 
  }
  .lg\:ml-64{
    margin-left: 16rem;
  
 
  }
  .lg\:hidden{
    display: none;
  
 
  }
  .lg\: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));
  
 
  }
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
 
  }
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  
 
  }
  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  
 
  }
  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  
 
  }
  .lg\:flex-row{
    flex-direction: row;
  
 
  }
  .lg\:items-center{
    align-items: center;
  
 
  }
  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  
 
  }
  
 
}
@media (min-width: 1280px){
  .xl\:col-span-2{
    grid-column: span 2 / span 2;
  
 
  }
  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  
 
  }
  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  
 
  }
  .xl\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  
 
  }
  
 
}

/* Luxury TopBar Design with Premium Animation Effects */
.topbar {
  background-color: var(--kelp-950);
  color: var(--kelp-100);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1001;
  height: 36px;
  overflow: visible;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Premium decorative divider with animated gradient effect - REMOVE GOLD */
.topbar:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.05) 10%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.15) 50%, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.05) 90%, 
    transparent 100%
  );
  background-size: 1000px 1px;
  opacity: 0.8;
  z-index: 5;
  /* animation: shimmerLine 4s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */
}

/* Subtle glow effect for the divider - REMOVE GOLD */
.topbar:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.2) 0%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0) 70%
  );
  filter: blur(1px);
  opacity: 0.3;
  z-index: 4;
  /* animation: pulseGlow 3s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */
}

@keyframes shimmerLine {
  0% { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}

@keyframes pulseGlow {
  0% { opacity: 0.1; }
  100% { opacity: 0.4; }
}

/* Background pattern */
.topbar-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(var(--kelp-900-rgb), 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--kelp-900-rgb), 0.4) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.03;
  pointer-events: none;
}

.topbar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 25px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.topbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}

/* Left Section - refined currency selector */
.topbar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
  z-index: 3;
}

.topbar-currency {
  position: relative;
}

.topbar-currency-button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kelp-400);
  cursor: pointer;
  padding: 5px 10px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 4px;
  height: 26px;
  position: relative;
  overflow: hidden;
  min-width: 80px;
  justify-content: space-between;
}

.topbar-currency-button:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--gold-light);
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateY(3px);
}

.topbar-currency-button:hover {
  color: var(--kelp-200);
}

.topbar-currency-button:hover:after {
  left: 25%;
  right: 25%;
  opacity: 0.5;
  transform: translateY(0);
}

.topbar-currency-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.topbar-currency-code {
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-currency-symbol {
  opacity: 0.6;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.topbar-dropdown-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
  flex-shrink: 0;
}

.topbar-dropdown-icon.rotate {
  transform: rotate(180deg);
}

/* Dropdown styling and animation refinements */
.topbar-currency-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  background-color: rgba(var(--kelp-50-rgb), 0.85);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  border-radius: 8px;
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(var(--kelp-200-rgb), 0.1);
  z-index: 100;
  transform-origin: top center;
 
  overflow: hidden;
  padding: 8px;
}

.topbar-currency-dropdown:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 15px;
  width: 10px;
  height: 10px;
  background: rgba(var(--kelp-950-rgb), 0.98);
  transform: rotate(45deg);
  border-top: 1px solid rgba(var(--kelp-800-rgb), 0.5);
  border-left: 1px solid rgba(var(--kelp-800-rgb), 0.5);
}

/* Elegant search input styling */
.topbar-currency-search {
  padding: 4px;
  margin-bottom: 4px;
}

.topbar-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-search-icon {
  position: absolute;
  left: 12px;
  color: var(--kelp-500);
  z-index: 1;
  transition: color 0.2s ease;
}

.topbar-currency-search-input {
  width: 100%;
  background: rgba(var(--kelp-200-rgb), 0.3);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.2);
  border-radius: 6px;
  padding: 8px 12px 8px 36px;
  color: var(--kelp-800);
  font-size: 0.75rem;
  outline: none;
  transition: all 0.2s ease;
}

.topbar-currency-search-input::-moz-placeholder {
  color: var(--kelp-500);
}

.topbar-currency-search-input::placeholder {
  color: var(--kelp-500);
}

.topbar-currency-search-input:focus {
  background: rgba(var(--kelp-50-rgb), 0.9);
  border-color: rgba(var(--gold-rgb), 0.3);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08);
}

.topbar-currency-search-input:focus + .topbar-search-icon {
  color: var(--gold-dark);
}

.topbar-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--kelp-500);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.topbar-search-clear:hover {
  color: var(--kelp-200);
}

.topbar-currency-list {
  max-height: none;
  overflow-y: hidden;
}

.topbar-currency-option {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--kelp-400);
  transition: all 0.2s ease;
  position: relative;
  border-radius: 6px;
  gap: 12px;
}

.topbar-currency-option:hover {
  background-color: rgba(var(--kelp-200-rgb), 0.2);
  color: var(--kelp-900);
}

.topbar-currency-option.active {
  background-color: rgba(var(--gold-rgb), 0.08);
  color: var(--kelp-900);
}

.topbar-currency-option.active:before {
  content: '•';
  color: var(--gold);
  position: absolute;
  left: -2px;
  font-size: 24px;
  line-height: 10px;
}

.topbar-currency-option-icon {
  flex-shrink: 0;
  width: 24px;
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
}

.topbar-currency-option-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar-currency-option-code {
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--kelp-800);
}

.topbar-currency-option.active .topbar-currency-option-code {
  color: var(--gold-dark);
  font-weight: 600;
}

.topbar-currency-option-name {
  font-size: 0.65rem;
  color: var(--kelp-600);
}

.topbar-currency-option-symbol {
  font-weight: 500;
  color: var(--kelp-600);
  font-size: 0.7rem;
}

.topbar-currency-option.active .topbar-currency-option-symbol,
.topbar-currency-option.active .topbar-currency-option-name {
  color: var(--kelp-700);
}

.topbar-currency-no-results {
  padding: 15px;
  text-align: center;
  color: var(--kelp-500);
  font-size: 0.8rem;
}

.topbar-currency-special {
  padding: 12px 15px;
  border-top: 1px solid rgba(var(--kelp-800-rgb), 0.3);
  background-color: rgba(var(--kelp-900-rgb), 0.3);
}

.topbar-toman-toggle {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.topbar-toman-checkbox {
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--kelp-600);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.topbar-toman-checkbox:checked {
  background-color: rgba(var(--gold-rgb), 0.3);
  border-color: var(--gold-light);
}

.topbar-toman-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold-light);
  font-size: 0.6rem;
}

.topbar-toman-label {
  color: var(--kelp-300);
  font-size: 0.75rem;
  cursor: pointer;
}

.topbar-currency-info {
  font-size: 0.75rem;
  color: var(--kelp-400);
}

/* Center announcement with character animation */
.topbar-center {
  flex: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow: visible; /* Ensure text is not cut off */
}

.topbar-announcement-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 36px;
  overflow: visible; /* Changed from hidden to visible to prevent text cutoff */
}

/* Elegant animated line indicator */
.topbar-line-indicator {
  position: absolute;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--kelp-rgb, 134, 142, 150), 0.3), transparent);
  opacity: 0.3;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  width: 80px;
  left: calc(50% - 40px);
  filter: blur(0.5px);
}

.topbar-announcement {
  color: var(--kelp-400);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: visible; /* Changed from hidden to visible to prevent text cutoff */
  position: relative;
  font-weight: 300;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 3; /* Ensure text appears above other elements */
}

/* Remove problematic character animation class */
.announcement-char {
  display: inline;
}

/* Refined right section */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex: 1;
  position: relative;
  z-index: 3;
}

.topbar-cart-timer {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--kelp-400);
  font-size: 0.75rem;
  background: rgba(var(--kelp-900-rgb), 0.5);
  padding: 3px 10px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--kelp-800-rgb), 0.5);
}

/* Subtle glow effect on cart timer */
.topbar-cart-timer:after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle at center, rgba(var(--gold-rgb), 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.topbar-cart-timer:hover:after {
  opacity: 1;
}

.topbar-cart-timer .topbar-icon {
  color: rgba(var(--gold-rgb), 0.6);
}

.topbar-timer-text {
  font-variant-numeric: tabular-nums;
}

.topbar-elegant-divider {
  width: 1px;
  height: 12px;
  background: linear-gradient(to bottom, transparent, var(--kelp-700), transparent);
  opacity: 0.15;
}

.topbar-account {
  color: var(--kelp-400);
  text-decoration: none;
  padding: 4px 12px;
  transition: all 0.3s ease;
  position: relative;
  border-radius: 4px;
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.topbar-account:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--gold-light);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}

.topbar-account:hover {
  color: var(--kelp-200);
}

.topbar-account:hover:after {
  width: 70%;
  left: 15%;
  opacity: 0.5;
}

/* Media Queries */
@media (max-width: 992px) {
  .topbar-announcement {
    font-size: 0.7rem;
  }
}

@media (max-width: 768px) {
  .topbar {
    height: 36px; /* Keep original height for better text display */
    font-size: 0.7rem;
  }
  
  .topbar-line-indicator {
    bottom: 3px;
    width: 60px;
    left: calc(50% - 30px);
  }
  
  .topbar-currency-code {
    font-size: 0.7rem;
    min-width: 40px;
  }
  
  .topbar-currency-symbol {
    display: none;
  }
  
  .topbar-currency-button {
    min-width: 60px;
    padding: 4px 8px;
    gap: 4px;
  }
  
  .topbar-currency-icon {
    font-size: 0.9rem;
  }
  
  .topbar-dropdown-icon {
    width: 12px;
    height: 12px;
  }
  
  /* Hide language selector on mobile */
  .topbar-left .topbar-currency:nth-child(2) {
    display: none;
  }
  .topbar-content {
    position: fixed;
  }
  
  /* Adjust layout for mobile */
  .topbar-left {
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 80px; /* Ensure minimum width for currency */
  }
  
  .topbar-center {
    flex: 1;
    margin: 0 8px;
    overflow: visible; /* Allow text to be visible */
    min-width: 0; /* Allow shrinking */
  }
  
  .topbar-right {
    flex: 0 0 auto;
    gap: 6px;
    overflow: visible; /* Allow content to be visible */
    min-width: 120px; /* Ensure minimum width for right section */
  }
  
  .topbar-account {
    padding: 4px 8px;
    font-size: 0.7rem;
    min-width: 60px; /* Ensure minimum width for account text */
    overflow: visible; /* Allow text to be visible */
    white-space: nowrap; /* Prevent text wrapping */
  }
  
  /* Fix cart timer for mobile */
  .topbar-cart-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.65rem;
    min-width: 80px; /* Ensure minimum width for timer */
    overflow: visible; /* Allow content to be visible */
    white-space: nowrap; /* Prevent text wrapping */
  }
  
  .topbar-timer-text {
    font-size: 0.65rem;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: visible; /* Allow text to be visible */
  }
  
  .topbar-elegant-divider {
    display: none; /* Hide divider on mobile to save space */
  }
  
  /* Ensure announcement text is fully visible */
  .topbar-announcement {
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip; /* Remove ellipsis to show full text */
    max-width: none; /* Remove max-width restriction */
  }
  
  /* Adjust container padding for mobile */
  .topbar-container {
    padding: 0 15px;
  }
}

@media (max-width: 576px) {
  .topbar-container {
    padding: 0 12px;
  }
  
  .topbar-announcement {
    font-size: 0.65rem;
    padding: 2px 6px;
    max-width: none; /* Remove width restriction */
    overflow: visible; /* Allow text to be fully visible */
    text-overflow: clip; /* Remove ellipsis */
    white-space: nowrap; /* Keep text on one line */
  }
  
  .topbar-account {
    padding: 4px 6px;
    min-width: 50px; /* Ensure minimum width */
    overflow: visible;
  }
  
  .topbar-left {
    gap: 6px;
    min-width: 70px; /* Ensure minimum width for left section */
  }
  
  .topbar-center {
    margin: 0 4px;
    flex: 1;
    overflow: visible;
  }
  
  .topbar-right {
    min-width: 100px; /* Ensure minimum width for right section */
    gap: 4px;
  }
  
  /* Adjust currency button for very small screens */
  .topbar-currency-button {
    min-width: 50px;
    padding: 3px 6px;
  }
  
  .topbar-currency-code {
    min-width: 30px;
  }
  
  /* Ensure cart timer fits properly */
  .topbar-cart-timer {
    min-width: 70px;
    padding: 2px 6px;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .topbar-account:active,
  .topbar-currency-button:active {
    color: var(--kelp-100);
    background: rgba(var(--kelp-900-rgb), 0.4);
  }
  
  .topbar-currency-option:active {
    background-color: rgba(var(--kelp-900-rgb), 0.4);
  }
}

/* Smooth transitions for text changes */
.topbar-currency-button,
.topbar-account,
.topbar-announcement {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Language-specific text transitions */
[lang="ar"] .topbar-announcement,
[lang="fa"] .topbar-announcement {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: right;
}

[lang="zh"] .topbar-announcement,
[lang="ja"] .topbar-announcement {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.02em;
}

/* Smooth font transitions when language changes */
.topbar * {
  transition: font-family 0.3s ease-in-out;
}

/* Enhanced transitions for currency and language selectors */
.topbar-currency-option,
.topbar-currency-button {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar-currency-option:hover {
  transform: translateY(-1px);
}

/* RTL support with transitions */
[dir="rtl"] .topbar-left {
  order: 2;
  transition: order 0.3s ease-in-out;
}

[dir="rtl"] .topbar-right {
  order: 0;
  transition: order 0.3s ease-in-out;
}

[dir="rtl"] .topbar-center {
  order: 1;
  transition: order 0.3s ease-in-out;
}

/* Language-specific font improvements for TopBar */

/* Persian/Farsi language improvements - smaller and more luxurious */
[lang="fa"] .top-bar,
[lang="fa"] .announcement-text,
[lang="fa"] .currency-display,
[lang="fa"] .language-display {
  font-family: 'Vazir', 'Noto Naskh Arabic', 'Amiri', serif;
  font-size: 0.85em; /* Smaller for luxury appearance */
  font-weight: 300; /* Lighter weight for elegance */
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Arabic language styling */
[lang="ar"] .top-bar,
[lang="ar"] .announcement-text,
[lang="ar"] .currency-display,
[lang="ar"] .language-display {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
  font-size: 0.9em;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Chinese language styling */
[lang="zh"] .top-bar,
[lang="zh"] .announcement-text,
[lang="zh"] .currency-display,
[lang="zh"] .language-display {
  font-family: 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Japanese language styling */
[lang="ja"] .top-bar,
[lang="ja"] .announcement-text,
[lang="ja"] .currency-display,
[lang="ja"] .language-display {
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* Language selector specific styling */
.language-selector-option[data-lang="fa"] {
  font-family: 'Vazir', 'Noto Naskh Arabic', serif !important;
  font-size: 0.85em !important;
  font-weight: 300 !important;
  direction: rtl;
  text-align: right;
}

.language-selector-option[data-lang="ar"] {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif !important;
  font-size: 0.9em !important;
  font-weight: 300 !important;
  direction: rtl;
  text-align: right;
}

/* Ensure proper text rendering for RTL languages */
[lang="fa"] .announcement-text,
[lang="ar"] .announcement-text {
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

/* Fix any display issues with language native names */
.language-native-name {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  display: inline-block;
}

/* Ensure Persian text in dropdowns displays correctly */
.language-dropdown-item[data-lang="fa"] .language-native-name,
.currency-dropdown-item[data-currency="IRR"] .currency-name {
  font-family: 'Vazir', 'Noto Naskh Arabic', serif;
  font-size: 0.85em;
  font-weight: 300;
  direction: rtl;
  text-align: right;
}

/* Prevent text overflow issues */
.announcement-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

/* Improve transitions for RTL languages */
[lang="fa"] .announcement-text,
[lang="ar"] .announcement-text {
  transform-origin: right center;
}

/* Mobile responsive adjustments for Persian */
@media (max-width: 768px) {
  [lang="fa"] .top-bar,
  [lang="fa"] .announcement-text {
    font-size: 0.8em;
  }
  
  [lang="ar"] .top-bar,
  [lang="ar"] .announcement-text {
    font-size: 0.85em;
  }
}/* Mobile Menu - Exact Match of Desktop Header & Submenu *//* Disable body scroll when mobile menu is open */
body.mobile-menu-open {
 
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  /* Prevent iOS Safari bounce scroll */
  -webkit-overflow-scrolling: auto !important;
  /* Prevent touch scrolling on mobile */
  touch-action: none !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

}
/* Removed global rule that causes Safari chunky scroll */





.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1200; /* Reduced to be above header but not interfere with other elements */
  pointer-events: none;
}



/* Dark theme for hero section - exact same as footer */
.mobile-menu-container.hero-theme {
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-50-rgb), 0.68) 0%,
    rgba(var(--kelp-100-rgb), 0.86) 100%
  );
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  --mobile-menu-text: var(--kelp-200); /* Match footer link color */
  --mobile-menu-hover-bg: rgba(255, 255, 255, 0.1);
  --mobile-menu-hover-text: var(--kelp-100); /* Match footer hover color */
}

/* Light theme for outside hero section */
.mobile-menu-container:not(.hero-theme) {
  --mobile-menu-text: var(--kelp-800);
  --mobile-menu-hover-bg: rgba(var(--kelp-200-rgb), 0.3);
  --mobile-menu-hover-text: var(--kelp-900);
}

/* Bottom border - identical to desktop header */
.mobile-menu-container:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(var(--gold-rgb), 0.05) 20%, 
    rgba(var(--gold-rgb), 0.2) 50%, 
    rgba(var(--gold-rgb), 0.05) 80%, 
    transparent 100%
  );
  opacity: 0.8;
}

/* Subtle glow - identical to desktop */
.mobile-menu-container:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--gold-rgb), 0.3) 0%,
    rgba(var(--gold-rgb), 0) 70%
  );
  filter: blur(1px);
  opacity: 0.4;
}

/* Main Menu Styling - matching desktop header */
.mobile-menu-main-wrapper {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.mobile-menu-main-nav {
  width: 100%;
}

.mobile-menu-main-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.mobile-menu-main-item {
  position: relative;
}

/* Apply to both old and new selectors for compatibility */
.mobile-menu-main-button,
.mobile-menu-main-link,
.mobile-menu-button,
.mobile-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 15px;
  color: var(--kelp-400) !important;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
 
}

/* Ensure ALL languages follow the same mobile menu navigation colors */
[lang] .mobile-menu-main-button,
[lang] .mobile-menu-main-link,
[lang] .mobile-menu-button,
[lang] .mobile-menu-link,
[lang="en"] .mobile-menu-main-button,
[lang="en"] .mobile-menu-main-link,
[lang="en"] .mobile-menu-button,
[lang="en"] .mobile-menu-link,
[lang="fr"] .mobile-menu-main-button,
[lang="fr"] .mobile-menu-main-link,
[lang="fr"] .mobile-menu-button,
[lang="fr"] .mobile-menu-link,
[lang="es"] .mobile-menu-main-button,
[lang="es"] .mobile-menu-main-link,
[lang="es"] .mobile-menu-button,
[lang="es"] .mobile-menu-link,
[lang="de"] .mobile-menu-main-button,
[lang="de"] .mobile-menu-main-link,
[lang="de"] .mobile-menu-button,
[lang="de"] .mobile-menu-link,
[lang="it"] .mobile-menu-main-button,
[lang="it"] .mobile-menu-main-link,
[lang="it"] .mobile-menu-button,
[lang="it"] .mobile-menu-link,
[lang="ar"] .mobile-menu-main-button,
[lang="ar"] .mobile-menu-main-link,
[lang="ar"] .mobile-menu-button,
[lang="ar"] .mobile-menu-link,
[lang="fa"] .mobile-menu-main-button,
[lang="fa"] .mobile-menu-main-link,
[lang="fa"] .mobile-menu-button,
[lang="fa"] .mobile-menu-link,
[lang="zh"] .mobile-menu-main-button,
[lang="zh"] .mobile-menu-main-link,
[lang="zh"] .mobile-menu-button,
[lang="zh"] .mobile-menu-link,
[lang="ja"] .mobile-menu-main-button,
[lang="ja"] .mobile-menu-main-link,
[lang="ja"] .mobile-menu-button,
[lang="ja"] .mobile-menu-link {
  color: var(--kelp-400) !important;
}

.mobile-menu-main-button:hover,
.mobile-menu-main-link:hover,
.mobile-menu-button:hover,
.mobile-menu-link:hover {
  background-color: rgba(var(--kelp-200-rgb), 0.3);
  color: var(--kelp-300) !important;
}

/* Ensure ALL languages follow the same mobile menu hover colors */
[lang] .mobile-menu-main-button:hover,
[lang] .mobile-menu-main-link:hover,
[lang] .mobile-menu-button:hover,
[lang] .mobile-menu-link:hover,
[lang="en"] .mobile-menu-main-button:hover,
[lang="en"] .mobile-menu-main-link:hover,
[lang="en"] .mobile-menu-button:hover,
[lang="en"] .mobile-menu-link:hover,
[lang="fr"] .mobile-menu-main-button:hover,
[lang="fr"] .mobile-menu-main-link:hover,
[lang="fr"] .mobile-menu-button:hover,
[lang="fr"] .mobile-menu-link:hover,
[lang="es"] .mobile-menu-main-button:hover,
[lang="es"] .mobile-menu-main-link:hover,
[lang="es"] .mobile-menu-button:hover,
[lang="es"] .mobile-menu-link:hover,
[lang="de"] .mobile-menu-main-button:hover,
[lang="de"] .mobile-menu-main-link:hover,
[lang="de"] .mobile-menu-button:hover,
[lang="de"] .mobile-menu-link:hover,
[lang="it"] .mobile-menu-main-button:hover,
[lang="it"] .mobile-menu-main-link:hover,
[lang="it"] .mobile-menu-button:hover,
[lang="it"] .mobile-menu-link:hover,
[lang="ar"] .mobile-menu-main-button:hover,
[lang="ar"] .mobile-menu-main-link:hover,
[lang="ar"] .mobile-menu-button:hover,
[lang="ar"] .mobile-menu-link:hover,
[lang="fa"] .mobile-menu-main-button:hover,
[lang="fa"] .mobile-menu-main-link:hover,
[lang="fa"] .mobile-menu-button:hover,
[lang="fa"] .mobile-menu-link:hover,
[lang="zh"] .mobile-menu-main-button:hover,
[lang="zh"] .mobile-menu-main-link:hover,
[lang="zh"] .mobile-menu-button:hover,
[lang="zh"] .mobile-menu-link:hover,
[lang="ja"] .mobile-menu-main-button:hover,
[lang="ja"] .mobile-menu-main-link:hover,
[lang="ja"] .mobile-menu-button:hover,
[lang="ja"] .mobile-menu-link:hover {
  color: var(--mobile-menu-hover-text, var(--kelp-900)) !important;
}

.mobile-menu-main-text {
  font-size: 1rem;
  color: var(--kelp-400);
}

.mobile-menu-main-arrow {
  transition: all 0.3s ease-out;
  opacity: 0.7;
  color: var(--kelp-400);
}

.mobile-menu-main-arrow.active {
  transform: rotate(180deg);
  color: var(--kelp-300);
}

/* Icon styling - identical to desktop */
.mobile-menu-main-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--kelp-400-rgb), 0.3);
}

.mobile-menu-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: relative;
  color: var(--kelp-400);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.mobile-menu-icon-link:hover {
  background-color: rgba(var(--kelp-200-rgb), 0.3);
}

.mobile-menu-icon-link:hover .mobile-menu-icon {
  color: var(--kelp-300);
  transform: translateY(-2px);
}

.mobile-menu-icon {
  transition: all 0.3s ease;
  color: inherit;
}

/* Ensure mobile menu icons follow parent color */
[lang] .mobile-menu-icon,
[lang="en"] .mobile-menu-icon,
[lang="fr"] .mobile-menu-icon,
[lang="es"] .mobile-menu-icon,
[lang="de"] .mobile-menu-icon,
[lang="it"] .mobile-menu-icon,
[lang="ar"] .mobile-menu-icon,
[lang="fa"] .mobile-menu-icon,
[lang="zh"] .mobile-menu-icon,
[lang="ja"] .mobile-menu-icon {
  color: inherit !important;
}

.mobile-menu-count-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(var(--gold-rgb), 0.9);
  color: var(--kelp-950);
  font-size: 0.65rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Submenu Container - Exactly matching desktop */
.mobile-submenu-container {
  position: absolute;
  inset: 0;
  z-index: 2; /* Sits above .mobile-menu-main */
}

.mobile-submenu-wrapper {
  padding: 30px 20px;
  position: relative;
}

.mobile-submenu-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kelp-400);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}

.mobile-submenu-close:hover {
  background-color: rgba(var(--kelp-200-rgb), 0.3);
  color: var(--kelp-300);
}

.mobile-submenu-content {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-submenu-grid {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.mobile-submenu-column {
  flex: 1;
}

.mobile-submenu-title {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--kelp-400);
  margin: 0 0 1.5rem 0;
  letter-spacing: 0.02em;
  text-align: center;
  position: relative;
  padding-bottom: 0.75rem;
}

.mobile-submenu-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}

/* Mobile submenu links - Organized layout for many items */
.mobile-submenu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.mobile-submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--kelp-400);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 400;
  transition: all 0.3s ease-out;
  background: rgba(var(--kelp-200-rgb), 0.15);
  border-left: 2px solid transparent;
  min-height: 48px;
}

.mobile-submenu-link:hover {
  color: var(--kelp-300);
  background: rgba(var(--kelp-300-rgb), 0.25);
  border-left-color: var(--kelp-400);
  border-color: rgba(var(--kelp-400-rgb), 0.2);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(var(--kelp-300-rgb), 0.1);
}

.mobile-link-icon {
  width: 4px;
  height: 4px;
  background-color: var(--kelp-400);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s ease;
  order: 2; /* Move to right side like desktop */
}

.mobile-submenu-link:hover .mobile-link-icon {
  background-color: var(--kelp-300);
  transform: scale(1.2);
}

.mobile-link-text {
  flex: 1;
  font-weight: 400;
  line-height: 1.4;
  order: 1; /* Move to left side */
}

.mobile-submenu-view-all {
  position: relative;
  background: none;
  color: var(--kelp-800);
  padding: 5px 65px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: color 0.3s ease;
  margin-top: 8px;
}

/* Button: Spaced dual lines (luxury) */
.mobile-submenu-view-all {
  position: relative;
}

.mobile-submenu-view-all::before,
.mobile-submenu-view-all::after {
  content: '';
  width: 80%;
  align-self: center;
  justify-self: center;
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-200), transparent);
  transition: all 0.4s ease;
}

.mobile-submenu-view-all::before {
  top: -2px;
  display: none;
}

.mobile-submenu-view-all::after {
  bottom: -2px;
}

.mobile-submenu-view-all:hover::before {
  top: -10px;
}

.mobile-submenu-view-all:hover::after {
  bottom: -10px;
}

/* Collection cards - identical to desktop */
.mobile-collection-featured {
  margin-top: 10px;
}

.mobile-collection-card {
  position: relative;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
}

.mobile-collection-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.mobile-collection-card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
}

.mobile-collection-card:hover .mobile-collection-card-image {
  transform: scale(1.05);
}

.mobile-collection-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
}

.mobile-collection-card-name {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  color: white;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
}

/* Category cards - identical to desktop */
.mobile-category-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.mobile-category-card {
  position: relative;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
}

.mobile-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.mobile-category-card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
}

.mobile-category-card:hover .mobile-category-card-image {
  transform: scale(1.05);
}

.mobile-category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
}

.mobile-category-card-name {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  color: white;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0;
  text-align: center;
}

/* Submenu border - identical to desktop */
.mobile-submenu-border {
  position: relative;
  height: 2px;
}

.mobile-submenu-border-glow {
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--gold-rgb), 0.3) 0%,
    rgba(var(--gold-rgb), 0) 70%
  );
  filter: blur(1px);
  opacity: 0.4;
}

/* Responsive adjustments */
@media (max-width: 400px) {
  .mobile-category-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .mobile-collection-card {
    height: 150px;
  }
  
  .mobile-category-card {
    height: 120px;
  }
  
  .mobile-submenu-wrapper {
    padding: 20px 15px;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .mobile-menu-main-button:active,
  .mobile-menu-main-link:active {
    background-color: rgba(var(--kelp-200-rgb), 0.3);
  }
  
  .mobile-menu-icon-link:active {
    background-color: rgba(var(--kelp-200-rgb), 0.3);
  }
  
  .mobile-submenu-link:active {
    color: var(--kelp-900);
    padding-left: 3px;
  }
  
  .mobile-submenu-link:active:before {
    width: 8px;
    opacity: 1;
  }
  
  .mobile-collection-card:active,
  .mobile-category-card:active {
    transform: scale(0.98);
  }
}

/* Mobile Menu - Premium Full Viewport Design */
.mobile-menu-container-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  /* Enable proper touch scrolling */
  touch-action: pan-y;
}

.mobile-menu-container {
  position: absolute;
  top: 46px; /* Fixed 46px top positioning */
  left: 0;
  right: 0;
  width: 100%;
  height: 70vh; /* Reduced to 80vh */
  background: rgba(var(--kelp-950-rgb), 0.95); /* Dark background with proper visibility */
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  transform-origin: top center;
  /* Remove conflicting CSS clip-path and transition - let Framer Motion handle it */
  opacity: 1;
  /* Enable proper touch scrolling */
  touch-action: pan-y;
}

/* Remove the conflicting .mobile-menu-container.open class */

.mobile-menu-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.2rem 0;
  overflow-y: auto;
  min-height: 0; /* Allow flex shrinking */
  /* Enable proper touch scrolling */
  touch-action: pan-y;
  /* Enable momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  position: relative;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.mobile-menu-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-menu-logo-divider {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  margin-top: 6px;
  border-radius: 1px;
  opacity: 0.6;
}

.mobile-menu-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--kelp-400);
  z-index: 10;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-close:hover {
  background: rgba(var(--kelp-200-rgb), 0.2);
  color: var(--kelp-300);
  transform: scale(1.05);
}

.mobile-menu-nav {
  flex: 1;
  margin-bottom: 1rem;
  min-height: 0; /* Allow flex shrinking */
}

.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu-item {
  position: relative;
}

.mobile-menu-button,
.mobile-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem 1rem 1rem 1.25rem;
  color: var(--kelp-400);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}

/* Luxury vertical line indicator */
.mobile-menu-button::before,
.mobile-menu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 2px;
  background: linear-gradient(
    to bottom, 
    transparent 0%,
    var(--gold-light) 15%, 
    var(--gold) 50%, 
    var(--gold-light) 85%,
    transparent 100%
  );
  transform: scaleY(0);
  transition: all 0.3s ease-out;
  border-radius: 0 2px 2px 0;
}

/* RTL support for vertical line */
[dir="rtl"] .mobile-menu-button::before,
[dir="rtl"] .mobile-menu-link::before {
  left: auto;
  right: 0;
  border-radius: 2px 0 0 2px;
}

.mobile-menu-button:hover::before,
.mobile-menu-link:hover::before {
  transform: scaleY(1);
  width: 3px;
  top: 10%;
  bottom: 10%;
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.3);
}

.mobile-menu-button:hover,
.mobile-menu-link:hover {
  background: linear-gradient(
    90deg,
    rgba(var(--kelp-200-rgb), 0.2) 0%,
    rgba(var(--kelp-100-rgb), 0.1) 100%
  );
  color: var(--kelp-300);
  transform: translateX(3px);
}

/* RTL support for hover transform */
[dir="rtl"] .mobile-menu-button:hover,
[dir="rtl"] .mobile-menu-link:hover {
  transform: translateX(-3px);
}

.mobile-menu-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--kelp-700);
  letter-spacing: 0.02em;
}

.mobile-menu-arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

.mobile-menu-button:hover .mobile-menu-arrow-wrapper {
  transform: rotate(0deg) translateX(2px);
}

/* RTL support for arrow rotation */
[dir="rtl"] .mobile-menu-button:hover .mobile-menu-arrow-wrapper {
  transform: rotate(0deg);
}

.mobile-nav-arrow {
  transform: rotate(-90deg);
  opacity: 0.7;
  color: var(--kelp-400);
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
}

/* RTL support for arrow direction */
[dir="rtl"] .mobile-nav-arrow {
  transform: rotate(90deg);
}

.mobile-menu-button:hover .mobile-nav-arrow {
  color: var(--kelp-300);
  opacity: 1;
  transform: rotate(-90deg) scale(1.1);
}

[dir="rtl"] .mobile-menu-button:hover .mobile-nav-arrow {
  transform: rotate(90deg) scale(1.1);
}

/* Mobile menu icons - minimal design without container colors */
.mobile-menu-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--kelp-400-rgb), 0.3);
  background: none;
  box-shadow: none;
}

.mobile-menu-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--kelp-400);
  cursor: pointer;
  transition: all 0.3s ease-out;
  position: relative;
  box-shadow: none;
}

.mobile-menu-icon-button:hover {
  color: var(--kelp-300);
  background: rgba(var(--kelp-200-rgb), 0.2);
  transform: scale(1.1);
  box-shadow: none;
}

.mobile-menu-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--gold);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

/* Hero theme specific styles for icons */
.mobile-menu-container.hero-theme .mobile-menu-icon-button {
  color: var(--gold);
  background: rgba(var(--kelp-950-rgb), 0.6);
}

.mobile-menu-container.hero-theme .mobile-menu-icon-button:hover {
  background-color: rgba(var(--kelp-900-rgb), 0.8);
  color: var(--gold);
}

/* Language switcher - minimal design without background */
.mobile-menu-language-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
}

.mobile-menu-language-wrapper .language-switcher {
  position: relative;
  z-index: 1000;
  background: none;
  border: none;
  box-shadow: none;
}

.mobile-menu-language-wrapper .language-switcher__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--kelp-400);
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: none;
  border-left: 2px solid transparent;
}

.mobile-menu-language-wrapper .language-switcher__toggle:hover {
  background: rgba(var(--kelp-200-rgb), 0.2);
  border-left-color: var(--gold);
  color: var(--kelp-300);
  box-shadow: none;
  transform: translateX(4px);
}

.mobile-menu-language-wrapper .language-switcher__dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: rgba(var(--kelp-950-rgb), 0.95);
  border: 1px solid rgba(var(--kelp-800-rgb), 0.3);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 1001;
  overflow: hidden;
  display: block;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.mobile-menu-language-wrapper .language-switcher__dropdown.open {
  display: block;
}

.mobile-menu-language-wrapper .language-switcher__dropdown li button {
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--kelp-200);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-menu-language-wrapper .language-switcher__dropdown li button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--kelp-100);
}

.mobile-menu-language-wrapper .language-switcher__dropdown li button.active {
  background-color: rgba(var(--gold-rgb), 0.2);
  color: var(--gold-light);
}

/* Theme support for language switcher */
.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher {
  color: var(--kelp-200);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher:hover {
  color: var(--kelp-100);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher__dropdown {
  background: rgba(var(--kelp-950-rgb), 0.95);
  border-color: rgba(var(--kelp-700-rgb), 0.3);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher__dropdown li button {
  color: var(--kelp-200);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher__dropdown li button:hover {
  color: var(--kelp-100);
  background-color: rgba(255, 255, 255, 0.1);
}

/* Light theme for language switcher */
.mobile-menu-container:not(.hero-theme) .mobile-menu-language-wrapper .language-switcher {
  color: var(--kelp-800);
}

.mobile-menu-container:not(.hero-theme) .mobile-menu-language-wrapper .language-switcher:hover {
  color: var(--kelp-900);
}

.mobile-menu-container:not(.hero-theme) .mobile-menu-language-wrapper .language-switcher__dropdown {
  background: rgba(var(--kelp-50-rgb), 0.98);
  border-color: rgba(var(--kelp-200-rgb), 0.3);
}

.mobile-menu-container:not(.hero-theme) .mobile-menu-language-wrapper .language-switcher__dropdown li button {
  color: var(--kelp-800);
}

.mobile-menu-container:not(.hero-theme) .mobile-menu-language-wrapper .language-switcher__dropdown li button:hover {
  color: var(--kelp-900);
  background-color: rgba(var(--kelp-200-rgb), 0.3);
}

/* Ensure submenu container has proper touch behavior */
.mobile-submenu-container {
  position: fixed;
  top: var(--header-height, 64px);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: calc(100vh - var(--header-height, 64px));
  z-index: 1250; /* Reduced to be above header but not interfere with other elements */
  pointer-events: all;
  overflow: hidden; /* Prevent outer scrolling */
  /* Enable proper touch scrolling */
  touch-action: pan-y;
}

/* Submenu Panel - Premium styling with proper scrolling */
.mobile-submenu-panel {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-50-rgb), 0.68) 0%,
    rgba(var(--kelp-100-rgb), 0.86) 100%
  );
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent panel scrolling */
  /* Ensure proper height and positioning */
  height: 100%;
  width: 100%;
  /* Enable proper touch scrolling */
  touch-action: pan-y;
}

/* Hero theme specific styles for submenu panels */
.mobile-menu-container.hero-theme .mobile-submenu-panel {
  background: var(--kelp-900);
  color: var(--kelp-100);
}

.mobile-menu-container.hero-theme .mobile-submenu-title {
  color: var(--kelp-100);
}

.mobile-menu-container.hero-theme .mobile-submenu-back {
  border-color: rgba(var(--kelp-700-rgb), 0.2);
  color: var(--kelp-100);
}

.mobile-menu-container.hero-theme .mobile-submenu-back:hover {
  border-color: rgba(var(--kelp-600-rgb), 0.3);
  color: var(--kelp-50);
}

/* Ensure submenu content has proper scrolling */
.mobile-submenu-content {
  flex: 1;
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  padding: 1.5rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Enable smooth scrolling */
  scroll-behavior: smooth;
  /* Enable momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--kelp-300-rgb), 0.3) transparent;
  /* Ensure content can scroll properly */
  min-height: 0;
  height: 100%;
  /* Prevent content from being cut off */
  padding-bottom: 2rem;
}

/* Custom scrollbar for webkit browsers */
.mobile-submenu-content::-webkit-scrollbar {
  width: 4px;
}

.mobile-submenu-content::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-submenu-content::-webkit-scrollbar-thumb {
  background: rgba(var(--kelp-300-rgb), 0.3);
  border-radius: 2px;
}

.mobile-submenu-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--kelp-400-rgb), 0.5);
}

/* Ensure submenu sections don't overflow */
.mobile-submenu-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Prevent section overflow */
  min-height: 0;
  flex-shrink: 0;
}

.mobile-submenu-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kelp-400);
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Submenu header and back button */
.mobile-submenu-header {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-height: 50px;
}

.mobile-submenu-header::after {
  display: none;
}

.mobile-submenu-back {
  position: absolute;
  left: 1rem;
  top: 70%;
  transform: translateY(-50%);
  background: rgba(var(--kelp-100-rgb), 0.3);
  padding: 0.5rem 0.75rem;
  color: var(--kelp-400);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10px;
  z-index: 10;
}

.mobile-submenu-back:hover {
  color: var(--kelp-300);
  transform: translateY(-50%) scale(1.02);
  border-color: rgba(var(--kelp-300-rgb), 0.3);
  box-shadow: 0 2px 8px rgba(var(--kelp-200-rgb), 0.15);
}

/* Optimize collection links for better scrolling */
.mobile-collection-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Enable scrolling if content overflows */
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Enable momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
 
}



/* Collection link - Footer link style */
.mobile-collection-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--kelp-400);
  text-decoration: none;
  border-radius: 0;
  transition: all 0.3s ease;
  position: relative;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 400;
  min-height: 56px;
  /* Ensure proper touch target size */
  touch-action: manipulation;
  /* Prevent link from shrinking */
  flex-shrink: 0;
  /* Footer link styling */
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(var(--kelp-300-rgb), 0.1);
}

.mobile-collection-link:hover {
  color: var(--kelp-300);
  background: none;
  transform: translateX(3px);
  border-left-color: var(--gold);
  border-bottom-color: rgba(var(--kelp-400-rgb), 0.2);
  box-shadow: none;
}

/* Collection thumbnail */
.mobile-collection-thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.2);
  background: var(--kelp-100);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ensure thumbnail doesn't shrink */
  min-width: 40px;
  min-height: 40px;
}

.mobile-collection-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.3s ease;
}

.mobile-collection-link:hover .mobile-collection-thumbnail img {
  transform: scale(1.05);
}

/* Collection info - only name, no description */
.mobile-collection-info {
  flex: 1;
  display: flex;
  align-items: center;
  /* Ensure text doesn't overflow */
  min-width: 0;
  overflow: hidden;
  /* Prevent shrinking */
  flex-shrink: 1;
}

.mobile-collection-name {
  font-size: 0.9rem;
  font-weight: 400;
  color: inherit;
  margin: 0;
  line-height: 1.3;
  /* Prevent text overflow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collection arrow indicator - Footer input style */
.mobile-collection-arrow {
  width: 16px;
  height: 16px;
  color: var(--kelp-400);
  opacity: 0.6;
  transition: all 0.3s ease;
  flex-shrink: 0;
  /* Ensure arrow doesn't shrink */
  min-width: 16px;
  min-height: 16px;
  /* Footer input arrow styling */
  transform: rotate(0deg);
}

.mobile-collection-link:hover .mobile-collection-arrow {
  color: var(--gold);
  opacity: 1;
  transform: rotate(0deg) translateX(2px);
}

/* Featured collections grid - keep for reference but optimize */
.mobile-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.mobile-featured-link {
  display: block;
  position: relative;
  width: 100%;
  height: 120px;
  text-decoration: none;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.lucide-arrow-left{
  width: 12px;
  height: 12px;
}

.mobile-featured-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mobile-featured-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.5s ease;
  border-radius: 6px;
}

.mobile-featured-card:hover .mobile-featured-image img {
  transform: scale(1.05);
}

.mobile-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
}

.mobile-featured-name {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0;
  text-align: center;
}

/* Mobile submenu links - Organized layout for many items */
.mobile-submenu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Enable momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--kelp-300-rgb), 0.3) transparent;
}

/* Custom scrollbar for submenu links */
.mobile-submenu-links::-webkit-scrollbar {
  width: 4px;
}

.mobile-submenu-links::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-submenu-links::-webkit-scrollbar-thumb {
  background: rgba(var(--kelp-300-rgb), 0.3);
  border-radius: 2px;
}

.mobile-submenu-links::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--kelp-400-rgb), 0.5);
}

.mobile-submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--kelp-400);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 400;
  transition: all 0.3s ease-out;
  background: rgba(var(--kelp-200-rgb), 0.15);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.08);
  border-left: 2px solid transparent;
  min-height: 48px;
}

.mobile-submenu-link:hover {
  color: var(--kelp-300);
  background: rgba(var(--kelp-300-rgb), 0.25);
  border-left-color: var(--kelp-400);
  border-color: rgba(var(--kelp-400-rgb), 0.2);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(var(--kelp-300-rgb), 0.1);
}

.mobile-link-icon {
  width: 4px;
  height: 4px;
  background-color: var(--kelp-400);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s ease;
  order: 2; /* Move to right side like desktop */
}

.mobile-submenu-link:hover .mobile-link-icon {
  background-color: var(--kelp-300);
  transform: scale(1.2);
}

.mobile-link-text {
  flex: 1;
  font-weight: 400;
  line-height: 1.4;
  order: 1; /* Move to left side */
}




/* Responsive adjustments */
@media (max-width: 768px) {
  .mobile-menu-main {
    padding: 1rem 1rem 0;
  }
  
  .mobile-menu-header {
    padding-top: 1.2rem;
    padding-bottom: 0.8rem;
    margin-bottom: 1.2rem;
  }
  
  .mobile-menu-button,
  .mobile-menu-link {
    padding: 0.75rem 0.875rem;
    font-size: 0.9rem;
  }
  
  .mobile-menu-icons {
    gap: 1.5rem;
    padding: 0.875rem 1rem 1.25rem;
  }
  
  .mobile-menu-icon-button {
    width: 36px;
    height: 36px;
  }
  
  .mobile-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .mobile-submenu-content {
    padding: 1rem;
    gap: 1.5rem;
  }
  
  .mobile-categories-grid,
  .mobile-collections-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  /* Optimize collection links for small screens */
  .mobile-collection-link {
    padding: 0.6rem 0.875rem;
    min-height: 48px;
  }
  
  .mobile-collection-thumbnail {
    width: 36px;
    height: 36px;
  }
  
  .mobile-collection-name {
    font-size: 0.85rem;
    font-weight: 400;
  }
  
  .mobile-collection-description {
    font-size: 0.7rem;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .mobile-menu-button:active,
  .mobile-menu-link:active {
    background: rgba(var(--kelp-200-rgb), 0.3);
    transform: translateX(2px);
  }
  
  .mobile-menu-icon-button:active {
    transform: scale(0.95);
    background: rgba(var(--kelp-200-rgb), 0.4);
  }
  
  .mobile-submenu-link:active {
    background: rgba(var(--kelp-200-rgb), 0.4);
    transform: translateX(2px);
  }
  
  .mobile-featured-card:active {
    transform: scale(0.98);
  }
  
  .mobile-collection-link:active {
    background: none;
    transform: translateX(2px);
    border-left-color: var(--gold);
    border-bottom-color: rgba(var(--kelp-400-rgb), 0.3);
  }
}

/* Small featured cards at bottom */
.mobile-featured-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  }
  
.mobile-featured-grid-bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.mobile-featured-card-small {
  position: relative;
}

.mobile-featured-link-small {
  display: block;
  position: relative;
  width: 100%;
  height: 70px;
  text-decoration: none;
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mobile-featured-link-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--kelp-200-rgb), 0.2);
  border-color: rgba(var(--kelp-300-rgb), 0.3);
}

.mobile-featured-image-small {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.mobile-featured-link-small:hover .mobile-featured-image-small {
  transform: scale(1.05);
}

.mobile-featured-overlay-small {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
}

.mobile-featured-name-small {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  right: 0.4rem;
  color: white;
  font-size: 0.7rem;
  font-weight: 500;
  margin: 0;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Responsive adjustments for small cards */
@media (max-width: 480px) {
  .mobile-categories-grid,
  .mobile-collections-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .mobile-category-card {
    height: 240px;
  }

  .mobile-collection-card {
    height: 80px;
  }

  .mobile-category-name,
  .mobile-collection-name {
    font-size: 0.75rem;
  }

  .mobile-featured-grid-bottom {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

  .mobile-featured-link-small {
    height: 80px;
}

  .mobile-featured-name-small {
    font-size: 0.65rem;
    bottom: 0.3rem;
    left: 0.3rem;
    right: 0.3rem;
  }
}

/* --- HERO THEME OVERRIDES --- */
.mobile-menu-container.hero-theme,
.mobile-menu-container.hero-theme .mobile-submenu-panel,
.mobile-menu-container.hero-theme .mobile-submenu-container {
  background: rgba(var(--kelp-950-rgb), 0.60) !important;
}

.mobile-menu-container.hero-theme,
.mobile-menu-container.hero-theme .mobile-menu-link,
.mobile-menu-container.hero-theme .mobile-menu-button,
.mobile-menu-container.hero-theme .mobile-submenu-link,
.mobile-menu-container.hero-theme .mobile-submenu-view-all,
.mobile-menu-container.hero-theme .mobile-featured-name,
.mobile-menu-container.hero-theme .mobile-featured-name-small,
.mobile-menu-container.hero-theme .mobile-menu-text,
.mobile-menu-container.hero-theme .mobile-menu-icon-button,
.mobile-menu-container.hero-theme .mobile-menu-language-wrapper,
.mobile-menu-container.hero-theme .mobile-link-text {
  color: var(--kelp-400) !important;
}

.mobile-menu-container.hero-theme .mobile-menu-link:hover,
.mobile-menu-container.hero-theme .mobile-menu-button:hover,
.mobile-menu-container.hero-theme .mobile-submenu-link:hover {
  color: var(--kelp-200) !important;
}

.mobile-menu-container.hero-theme .mobile-submenu-view-all {
  color: var(--kelp-200) !important;
}

.mobile-menu-container.hero-theme .mobile-submenu-view-all:hover {
  color: var(--gold) !important;
}

.mobile-menu-container.hero-theme .mobile-submenu-panel,
.mobile-menu-container.hero-theme .mobile-submenu-container {
  z-index: 1300 !important; /* Reduced to be above header but not interfere with other elements */
}

/* Remove/override kelp-50 backgrounds in hero mode */
.mobile-menu-container.hero-theme,
.mobile-menu-container.hero-theme .mobile-submenu-panel,
.mobile-menu-container.hero-theme .mobile-submenu-container,
.mobile-menu-container.hero-theme .mobile-menu-icons {
  background: rgba(var(--kelp-950-rgb), 0.60) !important;
}

/* Remove luxury-nav-button prev class from mobile menu */
.mobile-nav-arrow .luxury-nav-button.prev {
  display: none;
}

.mobile-nav-arrow .luxury-nav-button.next {
  display: none;
}

/* Mobile menu content with footer pattern for dark theme */
.mobile-menu-container.hero-theme .mobile-menu-main {
  background-color: var(--kelp-950);
  /* backdrop-filter: blur(10px); */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(var(--kelp-800-rgb), 0.3);
  border-bottom: none;
  border-top: none;
}

/* Mobile submenu styling - match footer colors exactly */
.mobile-submenu-panel {
  background-color: var(--kelp-950);
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
  border: none;
}

.mobile-menu-container.hero-theme .mobile-submenu-panel {
  background-color: var(--kelp-950);
}

.mobile-menu-container.hero-theme .mobile-submenu-title {
  color: var(--kelp-100);
}

.mobile-menu-container.hero-theme .mobile-submenu-back {
  color: var(--kelp-200);
}

.mobile-menu-container.hero-theme .mobile-submenu-back:hover {
  color: var(--kelp-100);
}

/* Language switcher dropdown fixes */
.mobile-menu-language-wrapper .language-switcher {
  position: relative;
  z-index: 1000;
}

.mobile-menu-language-wrapper .language-switcher__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(var(--kelp-950-rgb), 0.95);
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */
  border: 1px solid rgba(var(--kelp-800-rgb), 0.3);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 1001;
  overflow: hidden;
}

.mobile-menu-language-wrapper .language-switcher__dropdown.open {
  display: block;
}

.mobile-menu-language-wrapper .language-switcher__dropdown li button {
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--kelp-200);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-menu-language-wrapper .language-switcher__dropdown li button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--kelp-100);
}

.mobile-menu-language-wrapper .language-switcher__dropdown li button.active {
  background-color: rgba(var(--gold-rgb), 0.2);
  color: var(--gold-light);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher {
  color: var(--kelp-200);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher:hover {
  color: var(--kelp-100);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher__dropdown {
  background: rgba(var(--kelp-950-rgb), 0.95);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher__dropdown li button {
  color: var(--kelp-200);
}

.mobile-menu-container.hero-theme .mobile-menu-language-wrapper .language-switcher__dropdown li button:hover {
  color: var(--kelp-100);
}

/* Dark/Light theme handling for mobile menu */
.mobile-menu-container.hero-theme {
  background-color: var(--kelp-950);
  --mobile-menu-text: var(--kelp-200);
  --mobile-menu-hover-bg: rgba(255, 255, 255, 0.1);
  --mobile-menu-hover-text: var(--kelp-100);
  --mobile-submenu-bg: rgba(var(--kelp-950-rgb), 0.95);
  --mobile-submenu-text: var(--kelp-200);
  --mobile-submenu-hover-text: var(--kelp-100);
}

.mobile-menu-container:not(.hero-theme) {
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-100-rgb), 0.88) 0%,
    rgba(var(--kelp-50-rgb), 0.66) 100%
  );
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  --mobile-menu-text: var(--kelp-800);
  --mobile-menu-hover-bg: rgba(var(--kelp-200-rgb), 0.3);
  --mobile-menu-hover-text: var(--kelp-900);
  --mobile-submenu-bg: rgba(var(--kelp-50-rgb), 0.95);
  --mobile-submenu-text: var(--kelp-800);
  --mobile-submenu-hover-text: var(--kelp-900);
}

/* Mobile submenu panel with theme support */
.mobile-submenu-panel {
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-100-rgb), 0.88) 0%,
    rgba(var(--kelp-50-rgb), 0.66) 100%
  );
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: none;
}

.mobile-menu-container.hero-theme .mobile-submenu-panel {
  background: var(--mobile-submenu-bg, rgba(var(--kelp-950-rgb), 0.95));
}

.mobile-menu-container.hero-theme .mobile-submenu-title {
  color: var(--mobile-submenu-text, var(--kelp-100));
}

.mobile-menu-container.hero-theme .mobile-submenu-back {
  color: var(--mobile-submenu-text, var(--kelp-200));
}

.mobile-menu-container.hero-theme .mobile-submenu-back:hover {
  color: var(--mobile-submenu-hover-text, var(--kelp-100));
}

.mobile-menu-container.hero-theme .mobile-submenu-link {
  color: var(--mobile-submenu-text, var(--kelp-200));
}

.mobile-menu-container.hero-theme .mobile-submenu-link:hover {
  color: var(--mobile-submenu-hover-text, var(--kelp-100));
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-container:not(.hero-theme) .mobile-submenu-link {
  color: var(--mobile-submenu-text, var(--kelp-800));
}

.mobile-menu-container:not(.hero-theme) .mobile-submenu-link:hover {
  color: var(--mobile-submenu-hover-text, var(--kelp-900));
  background: rgba(var(--kelp-200-rgb), 0.2);
}

/* Mobile Language Switcher - Luxury Design */

.mobile-language-switcher {
  position: relative;
  z-index: 50;
}

/* Toggle Button */
.mobile-language-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  color: var(--kelp-400);
  font-family: var(--font-primary);
  font-weight: 500;
  position: relative;
  box-shadow: none;
  border-left: 2px solid transparent;
}
.lucide-chevron-up {
  color: var(--kelp-400);
  width: 12px;
  height: 12px;
}

.mobile-language-toggle:hover {
  background: none;
  border-left-color: var(--gold);
  color: var(--mobile-menu-hover-text, var(--kelp-800));
  box-shadow: none;
  transform: translateX(4px);
}

/* Flag styling */
.mobile-language-flag {
  font-size: 1.1em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Text styling */
.mobile-language-text {
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  font-size: 10px;
  color: var;
  color: var(--kelp-400);
}

/* Arrow styling */
.mobile-language-arrow {
  color: inherit;
  transition: transform 0.3s ease;
  margin-left: auto;
}

.mobile-language-arrow.open {
  transform: rotate(180deg);
}

/* Dropdown - Opens upward */
.mobile-language-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: rgba(var(--kelp-950-rgb), 0.95);
  
  
  border-radius: 3px;
 
  min-width: 180px;
  z-index: 1001;
  overflow: hidden;
  display: block;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

@keyframes dropdownSlideUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Language list */
.mobile-language-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

/* Language options */
.mobile-language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--kelp-200);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  font-weight: 500;
}

.mobile-language-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--kelp-100);
}

.mobile-language-option.active {
  background-color: rgba(var(--gold-rgb), 0.2);
  color: var(--gold-light);
}

.mobile-language-option .mobile-language-flag {
  font-size: 1.1em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mobile-language-option .mobile-language-name {
  flex: 1;
  font-weight: inherit;
  color: inherit;
}

/* Hero theme support - matches mobile menu */
.mobile-menu-container.hero-theme .mobile-language-toggle {
  color: var(--kelp-400);
}

.mobile-menu-container.hero-theme .mobile-language-toggle:hover {
  color: var(--kelp-100);
}

.mobile-menu-container.hero-theme .mobile-language-dropdown {
  background: rgba(var(--kelp-950-rgb), 0.95);
}

.mobile-menu-container.hero-theme .mobile-language-option {
  color: var(--kelp-200);
}

.mobile-menu-container.hero-theme .mobile-language-option:hover {
  color: var(--kelp-100);
}

/* Light theme support - matches mobile menu */
.mobile-menu-container:not(.hero-theme) .mobile-language-toggle {
  color: var(--kelp-800);
}

.mobile-menu-container:not(.hero-theme) .mobile-language-toggle:hover {
  color: var(--kelp-900);
}

.mobile-menu-container:not(.hero-theme) .mobile-language-dropdown {
 background: rgba(var(--kelp-100-rgb), 0.5);
}

.mobile-menu-container:not(.hero-theme) .mobile-language-option {
  color: var(--kelp-800);
}

.mobile-menu-container:not(.hero-theme) .mobile-language-option:hover {
  color: var(--kelp-900);
  background-color: rgba(var(--kelp-200-rgb), 0.3);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .mobile-language-toggle {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .mobile-language-text {
    max-width: 60px;
  }

  .mobile-language-option {
    padding: 8px 10px;
    font-size: 0.8rem;
  }
} /* =================== FLOATING LABEL INPUT COMPONENT - NEW VERSION =================== */

.floating-input-wrapper-new {
  position: relative;
  width: 100%;
  height: 44px;
  margin-bottom: 1rem;
}

.floating-input-wrapper-new.discount-input {
  margin-bottom: 0;
}

.floating-input-container-new {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  border-radius: 3px;
  overflow: visible;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.floating-input-container-new::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent, rgba(var(--kelp-300-rgb), 0.3), transparent);
  transition: all 0.3s ease;
  z-index: 2;
}

.floating-input-container-new:focus-within::before {
  background: linear-gradient(to bottom, transparent, var(--kelp-500), transparent);
}

.floating-input-container-new.error::before {
  background: linear-gradient(to bottom, transparent, var(--error-red), transparent);
}

.floating-input-new {
  width: 100%;
  height: 100%;
  padding: 12px 18px 12px 28px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--kelp-900);
  font-size: 0.9rem;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.floating-input-new:focus {
  outline: none;
  border: none;
}

.floating-input-container-new:focus-within {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.floating-input-new:disabled {
  background: rgba(var(--kelp-100-rgb), 0.5);
  color: var(--kelp-500);
  cursor: not-allowed;
}

.floating-label-new {
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--kelp-500);
  background: transparent;
  padding: 0;
  border-radius: 2px;
  white-space: nowrap;
  z-index: 10;
  line-height: 1;
  transition: all 0.3s ease;
}

.floating-label-new.floating {
  top: 0;
  left: 28px;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--kelp-500);
  background: var(--kelp-50);
  padding: 4px 8px;
  border: 1px solid rgba(var(--kelp-100-rgb), 0.3);
  border-radius: 2px;
  z-index: 15;
}

.floating-label-new .required-asterisk {
  color: var(--error-red);
  margin-left: 2px;
}

/* RTL Support */
.rtl .floating-input-new {
  padding: 20px 28px 8px 18px;
  text-align: right;
}

.rtl .floating-input-container-new::before {
  left: auto;
  right: 0;
}

.rtl .floating-label-new {
  left: auto;
  right: 28px;
  transform-origin: right center;
}

.rtl .floating-label-new.floating {
  left: auto;
  right: 28px;
  transform: translateY(-50%);
}

.rtl .floating-label-new .required-asterisk {
  margin-left: 0;
  margin-right: 2px;
}

/* Error state */
.floating-input-new.error {
  color: var(--kelp-900);
}

.floating-input-container-new.error {
  border-color: var(--error-red);
}

/* Focus states */
.floating-input-container-new:focus-within {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Autofill styles */
.floating-input-new:-webkit-autofill,
.floating-input-new:-webkit-autofill:hover, 
.floating-input-new:-webkit-autofill:focus, 
.floating-input-new:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: var(--kelp-900) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

/* Remove security indicator - not needed for contact form */

/* =================== FLOATING TEXTAREA STYLES =================== */

.floating-textarea-wrapper-new {
  height: auto;
  min-height: 120px;
}

.floating-textarea-container-new {
  height: auto;
  min-height: 120px;
  overflow: visible;
}

.floating-textarea-new {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
  padding: 20px 18px 8px 28px;
}

/* RTL Support for textarea */
.rtl .floating-textarea-new {
  padding: 20px 28px 8px 18px;
}

/* =================== FLOATING PHONE INPUT STYLES =================== */

.floating-phone-wrapper-new {
  height: 50px;
}

.floating-phone-container-new {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.floating-phone-content-new {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.floating-phone-country-new {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  width: 100px;
  height: 100%;
  position: relative;
  background: rgba(var(--kelp-50-rgb), 0.5);
  flex-shrink: 0;
}

.floating-phone-country-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--kelp-700);
  font-weight: 500;
  pointer-events: none;
  z-index: 2;
}

.floating-phone-flag {
  font-size: 1rem;
  line-height: 1;
}

.floating-phone-code {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kelp-800);
}

.floating-phone-country-selector-new {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9rem;
  color: transparent;
  font-family: var(--font-primary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 3;
}

.floating-phone-input-section-new {
  flex: 1;
  height: 100%;
  position: relative;
  padding-left: 16px;
  min-width: 0;
}

.floating-phone-input-new {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9rem;
  color: var(--kelp-900);
  font-family: var(--font-primary);
  padding: 20px 18px 8px 0;
  box-sizing: border-box;
}

.floating-phone-label-new {
  position: absolute;
  top: 50%;
  left: 120px;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--kelp-400);
  background: transparent;
  padding: 0;
  border-radius: 2px;
  white-space: nowrap;
  z-index: 10;
  line-height: 1;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.floating-phone-label-new.floating {
  top: 0;
  left: 100px;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--kelp-600);
  background: var(--kelp-50);
  padding: 2px 6px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 15;
}

/* RTL Support for phone input */
.rtl .floating-phone-content-new {
  flex-direction: row-reverse;
}

.rtl .floating-phone-country-new {
  border-right: none;
  border-left: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  padding: 0 16px;
}

.rtl .floating-phone-input-section-new {
  padding-left: 0;
  padding-right: 16px;
}

.rtl .floating-phone-label-new {
  left: auto;
  right: 100px;
  transform-origin: right center;
}

.rtl .floating-phone-label-new.floating {
  left: auto;
  right: 100px;
  transform: translateY(-50%);
}

.rtl .floating-phone-input-new {
  padding: 20px 0 8px 18px;
  text-align: right;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .floating-input-wrapper-new {
    height: 50px;
  }
  
  .floating-textarea-wrapper-new {
    height: 50px;
  }
  
  .floating-input-new {
    padding: 18px 15px 8px 24px;
    font-size: 0.85rem;
  }
  
  .floating-label-new {
    left: 24px;
    font-size: 0.85rem;
  }
  
  .floating-label-new.floating {
    left: 24px;
    font-size: 0.7rem;
  }
  
  .floating-phone-country-new {
    width: 80px;
    padding: 0 12px;
  }
  
  .floating-phone-country-display {
    font-size: 0.8rem;
    gap: 4px;
  }
  
  .floating-phone-flag {
    font-size: 0.9rem;
  }
  
  .floating-phone-code {
    font-size: 0.75rem;
  }
  
  .floating-phone-input-section-new {
    padding-left: 12px;
  }
  
  .floating-phone-input-new {
    padding: 18px 12px 8px 0;
    font-size: 0.85rem;
  }
  
  .floating-phone-label-new {
    left: 100px;
    font-size: 0.85rem;
  }
  
  .floating-phone-label-new.floating {
    left: 80px;
    font-size: 0.7rem;
  }
  
  .rtl .floating-input-new {
    padding: 18px 24px 8px 15px;
  }
  
  .rtl .floating-label-new {
    right: 24px;
  }
  
  .rtl .floating-label-new.floating {
    right: 24px;
  }
  
  .rtl .floating-phone-input-section-new {
    padding-left: 0;
    padding-right: 12px;
  }
  
  .rtl .floating-phone-input-new {
    padding: 18px 0 8px 12px;
  }
  
  .rtl .floating-phone-label-new {
    right: 80px;
  }
  
  .rtl .floating-phone-label-new.floating {
    right: 80px;
  }
}

@media (max-width: 480px) {
  .floating-input-new {
    font-size: 0.8rem;
  }
  
  .floating-label-new {
    font-size: 0.8rem;
  }
  
  .floating-label-new.floating {
    font-size: 0.65rem;
  }
  
  .floating-phone-country-select-new {
    font-size: 0.75rem;
  }
  
  .floating-phone-input-new {
    font-size: 0.8rem;
  }
  
  .floating-phone-label-new {
    font-size: 0.8rem;
  }
  
  .floating-phone-label-new.floating {
    font-size: 0.65rem;
  }
}/* Ultra-Refined Search Experience */

/* Container - align like header submenu */
.search-minimal-wrapper {
  padding: 20px 0 25px;
  margin: 0 auto;
  min-width: 100%;

}

/* Header and Input - More Elegant */
.search-minimal-header {
  margin-bottom: 22px;
  position: relative;
}

.search-minimal-input-container {
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid rgba(var(--kelp-300-rgb), 0.2);
  padding-bottom: 12px;
  margin: 0 auto;
  max-width: 450px;
}

/* Refined input styling with multiple accents */
.search-minimal-input-container::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, 
    rgba(var(--kelp-400-rgb), 0), 
    rgba(var(--gold-rgb), 0.6), 
    rgba(var(--kelp-400-rgb), 0));
  transform: translateX(-50%);
  opacity: 0;
}

.search-minimal-input-container:focus-within {
  border-color: rgba(var(--kelp-400-rgb), 0.1);
}

.search-minimal-input-container:focus-within::before {
  width: 100%;
  opacity: 1;
}

.search-minimal-icon {
  color: var(--kelp-500);
  margin-right: 12px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.search-minimal-input-container:focus-within .search-minimal-icon {
  color: var(--kelp-800);
  transform: scale(1.05);
}

.search-minimal-floating .floating-input-container-new {
  border: none;
  background: transparent;
}

.search-minimal-floating .floating-input-new {
  font-size: 1.05rem;
  background: transparent;
  color: var(--gold-dark);
}

.search-minimal-floating .floating-label-new {
  color: var(--gold-dark);
}

.search-minimal-floating .floating-input-container-new.focused .floating-label-new {
  color: var(--gold);
}

.search-minimal-input::-moz-placeholder {
  color: var(--kelp-400);
  opacity: 0.7;
  font-weight: 300;
  font-style: italic;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.search-minimal-input::placeholder {
  color: var(--kelp-400);
  opacity: 0.7;
  font-weight: 300;
  font-style: italic;
  transition: opacity 0.3s ease;
}

.search-minimal-input:focus::-moz-placeholder {
  opacity: 0.4;
}

.search-minimal-input:focus::placeholder {
  opacity: 0.4;
}

.search-minimal-clear {
  background: none;
  border: none;
  color: var(--kelp-500);
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.7;
}

.search-minimal-clear:hover {
  background-color: rgba(var(--kelp-200-rgb), 0.2);
  color: var(--kelp-800);
  opacity: 1;
}

/* Animated divider */
.search-minimal-divider {
  height: 1px;
  background: linear-gradient(to right, 
    transparent, 
    rgba(var(--kelp-200-rgb), 0.5), 
    transparent);
  margin: 15px auto 25px;
  width: 0;
  transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
  opacity: 0;
  animation: expandDivider 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}

@keyframes expandDivider {
  0% { width: 0; opacity: 0; }
  100% { width: 80px; opacity: 1; }
}

/* Content layout */
.search-minimal-content {
  padding: 0 10px;
}

.search-minimal-grid {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 40px;
  align-items: start;
}

/* Section styling */
.search-minimal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.search-minimal-section {
  margin-bottom: 8px;
}

/* Headings - More elegant */
.search-minimal-heading {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--kelp-700);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 13px;
  position: relative;
  display: flex;
  align-items: center;
}

.search-minimal-heading::after {
  content: '';
  height: 1px;
  width: 12px;
  background-color: rgba(var(--kelp-400-rgb), 0.25);
  margin-left: 8px;
  transition: width 0.4s ease;
}

/* List styling - More refined */
.search-minimal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-minimal-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 0;
  text-align: left;
  color: var(--kelp-600);
  font-size: 0.82rem;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  position: relative;
  gap: 6px;
  letter-spacing: 0.3px;
}

.search-minimal-list-item:hover {
  color: var(--kelp-900);
  transform: translateX(3px);
}

.search-minimal-list-item::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: rgba(var(--gold-rgb), 0.25);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}

.search-minimal-list-item:hover::after {
  opacity: 1;
  width: 100%;
}

.search-minimal-item-icon {
  color: var(--kelp-400);
  font-size: 0.7rem;
}

.search-minimal-list-item:hover .search-minimal-item-icon {
  color: rgba(var(--gold-rgb), 0.6);
}

/* Products grid - More elegant, smaller */
.search-minimal-products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.search-minimal-product {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  background: transparent;
}

.search-minimal-product:hover {
  background: rgba(var(--kelp-50-rgb), 0.6);
}

.search-minimal-product-image {
  border-radius: 3px;
  overflow: hidden;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background-color: rgba(var(--kelp-100-rgb), 0.5);
}

.search-minimal-product-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.search-minimal-product:hover .search-minimal-product-image img {
}

.search-minimal-product-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.search-minimal-product-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--kelp-900);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.search-minimal-product-price {
  font-size: 0.72rem;
  color: var(--kelp-600);
  font-weight: 500;
}

/* Right arrow */
.search-minimal-product-arrow {
  color: var(--kelp-400);
  flex-shrink: 0;
}

/* Featured categories - More elegant */
.search-minimal-featured-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.search-minimal-featured-category {
  padding: 14px 16px;
  background-color: rgba(var(--kelp-100-rgb), 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.search-minimal-featured-category:hover {
  background-color: rgba(var(--kelp-100-rgb), 0.5);
  transform: translateY(-3px);
  border-color: rgba(var(--kelp-300-rgb), 0.3);
}

.search-minimal-featured-category h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--kelp-700);
  letter-spacing: 0.2px;
}

.search-minimal-arrow {
  color: var(--kelp-500);
  font-size: 0.85rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.search-minimal-featured-category:hover .search-minimal-arrow {
  transform: translateX(3px);
  color: rgba(var(--gold-rgb), 0.6);
}

/* Loading state */
.search-minimal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.search-minimal-loader {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(var(--kelp-300-rgb), 0.15);
  border-top-color: rgba(var(--gold-rgb), 0.5);
  border-radius: 50%;
  /* animation: spin 0.9s linear infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Empty state */
.search-minimal-empty {
  text-align: center;
  padding: 25px 0;
}

.search-minimal-empty p {
  color: var(--kelp-600);
  margin-bottom: 18px;
  font-size: 0.9rem;
  font-style: italic;
}

.search-minimal-button {
  background: none;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.25);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--kelp-700);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  letter-spacing: 0.3px;
}

.search-minimal-button:hover {
  background-color: rgba(var(--kelp-100-rgb), 0.4);
  border-color: rgba(var(--kelp-400-rgb), 0.3);
  color: var(--kelp-900);
}

/* Footer */
.search-minimal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.search-minimal-view-all {
  background: none;
  border: none;
  color: var(--kelp-600);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 6px 12px;
  position: relative;
  letter-spacing: 0.3px;
}

.search-minimal-view-all::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}

.search-minimal-view-all:hover {
  color: var(--kelp-900);
}

.search-minimal-view-all:hover::after {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .search-minimal-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .search-minimal-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  
  .search-minimal-sidebar {
    border-bottom: 1px solid rgba(var(--kelp-200-rgb), 0.2);
    padding-bottom: 15px;
  }
  
  .search-minimal-featured-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .search-minimal-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .search-minimal-featured-categories {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .search-minimal-input {
    font-size: 1rem;
  }
}/* Add this at the top of the file */


/* Sophisticated Header Design */
:root {
  --header-height: 130px; /* Taller to accommodate logo above links */
  --header-scrolled-height: 100px;
  --submenu-bg: var(--kelp-50);

}

/* Header wrapper to contain TopBar and Header */
.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100; /* Increased to be above intro overlay */
  /* Removed will-change and backface-visibility to prevent stacking context issues */
 
}



/* Add elegant line transition effect */
.header-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-300), transparent);
  transform: translateX(-50%);

}

.header-wrapper:hover::after {
  width: 80%;
}

/* .header-wrapper.is-scrolled marker removed to avoid empty ruleset */

.header-wrapper.is-hidden {
  pointer-events: none;
}

/* Header scroll management - no body manipulation */
/* .header-wrapper placeholder removed */

.header {
  width: 100%;
  background-color: transparent;
  /* Removed will-change and backface-visibility to prevent stacking context issues */
}

/* Background elements */
.header-bg-elements {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.header-bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: radial-gradient(var(--kelp-400) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Main container */
.header-container {
  max-width: 1400px;
  width: 95%;
  margin: 0 auto;
  position: relative;
}

/* Premium visual styling for main header */
.header-main {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
  height: var(--header-height);
  position: relative;
  border-radius: 0 0 15px 15px;
  overflow: visible;
  margin: 0 auto;
  background: transparent;
  /* Removed backface-visibility and transform to prevent stacking context issues */
}

/* Elegant shadow effect under header */
/* Clean horizontal lines only */
.header-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-300), transparent);
  opacity: 0.6;
}

.header-main::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-300), transparent);
  opacity: 0.8;
}

.is-scrolled .header-main {
  height: var(--header-scrolled-height);
  border-radius: 0 0 15px 15px;
}

.is-scrolled .header-main:after,
.is-scrolled .header-main:before {
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, var(--kelp-200), transparent);
}

/* Left section */
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 25px;
  justify-content: flex-start;
}

/* Hamburger - mobile only */
.header-hamburger {
  background: none;
  border: none;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--kelp-700);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

/* Removed transition from header-hamburger-icon */

.header-hamburger:hover {
  background: rgba(var(--kelp-200-rgb), 0.3);
}

.header-hamburger:hover .header-hamburger-icon {
  color: var(--gold);
}

/* Search icon with elegant hover */
.header-icon-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* Removed hardware acceleration properties that cause Safari chunky scroll */
  transition: background-color 0.3s ease;
}

.header-icon-button:hover {
  background-color: rgba(var(--kelp-200-rgb), 0.3);
}

.header-icon-button:hover .header-icon {
  color: var(--kelp-900);
  transform: translateY(-2px);
}

.header-icon {
  color: var(--kelp-800);
  /* Removed hardware acceleration properties that cause Safari chunky scroll */
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Mobile/desktop visibility classes */
.mobile-only {
  display: none;
}

.desktop-only {
  display: flex;
}

/* Hide search icon on mobile */
@media (max-width: 992px) {
  .header-icon-button {
    display: none;
  }
}

/* Center section - vertical stack of logo and nav */
.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  position: relative;
  padding-top: 50px;
  padding-bottom: 20px;
}

/* Logo styling */
.header-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  margin-bottom: 0;
  padding: 0;
  /* Removed hardware acceleration properties that cause Safari chunky scroll */
}

.is-scrolled .header-logo {
  top: -5px;
}

.header-logo-image {
  height: 85px;
  /* Removed hardware acceleration properties that cause Safari chunky scroll */
}

.is-scrolled .header-logo-image {
  height: 60px;
}

.header-logo-fallback {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-logo-icon {
  color: var(--kelp-900);
  /* Removed hardware acceleration properties that cause Safari chunky scroll */
}

.header-logo-text {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--kelp-900);
  letter-spacing: 3px;
  font-family: var(--font-heading);
  /* Removed hardware acceleration properties that cause Safari chunky scroll */
}

/* Desktop navigation */
.header-desktop-nav {
  display: flex;
  gap: 30px;
  align-items: center;
  /* Removed hardware acceleration properties that cause Safari chunky scroll */
  position: relative;
  z-index: 1;
}

/* Nav items with better positioning for submenu */
.header-nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* UNIVERSAL HEADER NAVIGATION COLORS - WORKS FOR ALL LANGUAGES */
.header-nav-button,
.header-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 5px;
  color: var(--kelp-900) !important; /* Add !important for specificity */
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  position: relative;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: color 0.3s ease;
}

/* Simple hover effects for navigation links */
.header-nav-button:hover,
.header-nav-link:hover {
  color: var(--gold) !important;
}

/* Ensure the inner text also changes for plain anchor links */
.header-nav-link:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Ensure ALL languages follow the same navigation colors */
[lang] .header-nav-button,
[lang] .header-nav-link,
[lang="en"] .header-nav-button,
[lang="en"] .header-nav-link,
[lang="fr"] .header-nav-button,
[lang="fr"] .header-nav-link,
[lang="es"] .header-nav-button,
[lang="es"] .header-nav-link,
[lang="de"] .header-nav-button,
[lang="de"] .header-nav-link,
[lang="it"] .header-nav-button,
[lang="it"] .header-nav-link,
[lang="ar"] .header-nav-button,
[lang="ar"] .header-nav-link,
[lang="fa"] .header-nav-button,
[lang="fa"] .header-nav-link,
[lang="zh"] .header-nav-button,
[lang="zh"] .header-nav-link,
[lang="ja"] .header-nav-button,
[lang="ja"] .header-nav-link {
  color: var(--kelp-900) !important;
}

.header-nav-button:hover,
.header-nav-link:hover,
.header-nav-item.active .header-nav-button {
  color: var(--gold) !important;
}

/* Ensure ALL languages follow the same hover colors */
[lang] .header-nav-button:hover,
[lang] .header-nav-link:hover,
[lang] .header-nav-item.active .header-nav-button,
[lang="en"] .header-nav-button:hover,
[lang="en"] .header-nav-link:hover,
[lang="en"] .header-nav-item.active .header-nav-button,
[lang="fr"] .header-nav-button:hover,
[lang="fr"] .header-nav-link:hover,
[lang="fr"] .header-nav-item.active .header-nav-button,
[lang="es"] .header-nav-button:hover,
[lang="es"] .header-nav-link:hover,
[lang="es"] .header-nav-item.active .header-nav-button,
[lang="de"] .header-nav-button:hover,
[lang="de"] .header-nav-link:hover,
[lang="de"] .header-nav-item.active .header-nav-button,
[lang="it"] .header-nav-button:hover,
[lang="it"] .header-nav-link:hover,
[lang="it"] .header-nav-item.active .header-nav-button,
[lang="ar"] .header-nav-button:hover,
[lang="ar"] .header-nav-link:hover,
[lang="ar"] .header-nav-item.active .header-nav-button,
[lang="fa"] .header-nav-button:hover,
[lang="fa"] .header-nav-link:hover,
[lang="fa"] .header-nav-item.active .header-nav-button,
[lang="zh"] .header-nav-button:hover,
[lang="zh"] .header-nav-link:hover,
[lang="zh"] .header-nav-item.active .header-nav-button,
[lang="ja"] .header-nav-button:hover,
[lang="ja"] .header-nav-link:hover,
[lang="ja"] .header-nav-item.active .header-nav-button {
  color: var(--gold) !important;
}

.header-nav-text {
  position: relative;
}

.header-nav-arrow {
  opacity: 0.7;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.3s ease, color 0.3s ease;
}

.header-nav-arrow.is-active {
  transform: rotate(180deg);
}

/* Arrow hover effect */
.header-nav-button:hover .header-nav-arrow {
  color: var(--gold);
}

/* Elegant indicator for active item */
.header-nav-indicator {
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: linear-gradient(to right, var(--gold-light), rgba(var(--gold-rgb), 0.3));
}

/* Right section styling */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 25px;
  justify-content: flex-end;
}

.header-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: relative;
  color: var(--kelp-800);
  border-radius: 50%;
  /* Removed hardware acceleration properties that cause Safari chunky scroll */
  transition: background-color 0.3s ease;
}

.header-icon-link:hover {
  background-color: rgba(var(--kelp-200-rgb), 0.3);
}

.header-icon-link:hover .header-icon {
  color: var(--kelp-900);
  transform: translateY(-2px);
}

.header-count-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--kelp-950);
  color: var(--gold-dark);
  font-size: 0.65rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Submenu Container - Elegant Mega Menu */
.header-submenu-container {
  position: absolute;
  top: calc(100% - 15px);
  left: 0;
  right: 0;
  background: var(--submenu-bg, var(--kelp-50)) !important;
  /* backdrop-filter: blur(20px) !important;
  -webkit-/* backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(var(--gold-rgb), 0.15);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(var(--gold-rgb), 0.05);
  z-index: 1100; /* Increased to match header z-index */
  overflow: hidden;
  border-radius: 0 0 15px 15px;
  /* Removed will-change, backface-visibility, and transform to prevent stacking context issues */
}

.header-submenu-wrapper {
  padding: 50px 60px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.95) 0%, 
    rgba(var(--kelp-100-rgb), 0.95) 100%);
}

.header-submenu-close {
  position: absolute;
  top: 15px;
  right: 25px;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kelp-600);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}

.header-submenu-close:hover {
  background-color: rgba(var(--kelp-200-rgb), 0.3);
  color: var(--kelp-900);
}

.header-submenu-content {
  position: relative;
  z-index: 1;
}

/* Elegant bottom border for submenu */
.header-submenu-border {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  overflow: hidden;
  display: block;
}

.header-submenu-border-glow {
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 4px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--gold-rgb), 0.15) 0%,
    rgba(var(--gold-rgb), 0) 70%
  );
  filter: blur(2px);
}

/* Modified backdrop for the submenu and search overlay - removed blur effect */
.header-submenu-backdrop {
  position: fixed;
  inset: 0;

  z-index: 1090; /* Increased to be below header but above other content */
}

/* Enhanced search container styling */
#submenu-search {
  /* backdrop-filter: blur(20px);
  -webkit-/* backdrop-filter: blur(20px);
  z-index: 1100; /* Increased to match header z-index */
  border-radius: 12px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(var(--gold-rgb), 0.05);
}

/* Generic submenu grid layout */
.header-submenu-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  align-items: start;
}

.header-submenu-title {
  color: var(--kelp-900);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.header-submenu-title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, var(--gold), rgba(var(--gold-rgb), 0.3));
  border-radius: 1px;
}

.header-submenu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-submenu-list li {
  margin-bottom: 12px;
}

.header-submenu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--kelp-700);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 16px;
  position: relative;
  border-radius: 8px;
  background: transparent;
}

.header-submenu-link:hover {
  color: var(--kelp-900);
  background: rgba(var(--kelp-200-rgb), 0.3);
  transform: translateX(5px);
}

.header-submenu-link:before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold-light);
  transform: translateY(-50%);
  opacity: 0;
}

.header-submenu-link:hover:before {
  width: 5px;
  left: -8px;
  opacity: 1;
}

/* View all link styling */
.header-submenu-link-all {
  margin-top: 10px;
  color: var(--kelp-600);
  font-style: italic;
  font-size: 0.9rem;
}

.header-submenu-link-all:hover {
  color: var(--kelp-800);
}

/* Collections specific styling */
.header-collection-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.header-collection-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 180px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.header-collection-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.header-collection-card-link {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  text-decoration: none;
}

.header-collection-card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.header-collection-card:hover .header-collection-card-image {
  transform: scale(1.05);
}

.header-collection-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.header-collection-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: white;
  z-index: 1;
}

.header-collection-card-name {
  font-size: 1.1rem;
  margin: 0 0 5px;
  font-weight: 500;
}

.header-collection-card-count {
  font-size: 0.8rem;
  opacity: 0.9;
  margin: 0;
}

/* Categories specific styling */
.header-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.header-category-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.header-category-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 120px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.header-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.header-category-card-link {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  text-decoration: none;
}

.header-category-card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.header-category-card:hover .header-category-card-image {
  transform: scale(1.05);
}

.header-category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
}

.header-category-card-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  color: white;
  font-size: 0.9rem;
  margin: 0;
  font-weight: 400;
  text-align: center;
  z-index: 1;
}

/* Responsive styles */
@media (min-width: 1201px) and (max-width: 1400px) {
  .header-category-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .header-category-card {
    height: 140px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  :root {
    --header-height: 120px;
    --header-scrolled-height: 90px;
  }
  
  .header-submenu-wrapper {
    padding: 30px;
  }
  
  .header-desktop-nav {
    gap: 20px;
  }
  
  .header-submenu-grid {
    gap: 30px;
  }
  
  .header-collection-featured {
    grid-template-columns: 1fr;
  }
  
  .header-category-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  :root {
    --header-height: 80px;
    --header-scrolled-height: 70px;
  }
  
  .header-main {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .header-center {
    flex-direction: row;
    justify-content: center;
    position: static;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .header-logo {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    margin-bottom: 0;
    margin-right: 0;
    padding: 0;
    transition: none;
  }
  
  .header-logo-image {
    height: 60px;
  }
  
  .is-scrolled .header-logo-image {
    height: 50px;
  }
  
  .header-desktop-nav {
    display: none;
  }
  
  .header-hamburger {
    display: flex;
  }
  
  .mobile-only {
    display: flex;
  }
  
  .desktop-only {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 70px;
    --header-scrolled-height: 60px;
  }
 
  
  .header-logo-image {
    height: 50px;
  }
  
  .is-scrolled .header-logo-image {
    height: 40px;
  }
  
  .header-container {
    width: 100%;
  }
  
  .header-main {
    border-radius: 0;
  }
  
  .header-left, 
  .header-right {
    min-width: 90px;
  }
  
  .header-left {
    padding-left: 15px;
    gap: 10px;
  }
  
  .header-right {
    padding-right: 15px;
    gap: 10px;
  }
  
  .header-icon-button,
  .header-icon-link {
    width: 32px;
    height: 32px;
  }
  
  .header-accent-line {
    height: 25px;
    margin-top: -12px;
  }
  
  .is-scrolled .header-accent-line {
    height: 18px;
    margin-top: -9px;
  }
  
  .header-submenu-container {
    margin-top: -12px;
  }
  
  .is-scrolled .header-submenu-container {
    margin-top: -9px;
  }
}

@media (max-width: 576px) {
  .header-logo-fallback {
    gap: 3px;
  }
  
  .header-logo-text {
    font-size: 1.1rem;
  }
  
  .header-icon-button,
  .header-icon-link {
    width: 30px;
    height: 30px;
  }
  
  .header-right {
    gap: 5px;
  }
  
  .header-left {
    gap: 5px;
  }
  
  .header-accent-line {
    height: 20px;
    margin-top: -10px;
  }
  
  .is-scrolled .header-accent-line {
    height: 16px;
    margin-top: -8px;
  }
  
  .header-submenu-container {
    margin-top: -10px;
  }
  
  .is-scrolled .header-submenu-container {
    margin-top: -8px;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .header-icon-button:active,
  .header-icon-link:active {
    background-color: rgba(var(--kelp-200-rgb), 0.3);
  }
  
  .header-hamburger:active {
    transform: scale(0.95);
  }
  
  .header-submenu-link:active {
    color: var(--kelp-900);
    padding-left: 5px;
  }
  
  .header-submenu-link:active:before {
    width: 5px;
    left: -8px;
    opacity: 1;
  }
  
  .header-collection-card:active,
  .header-category-card:active {
    transform: scale(0.98);
  }
}

/* Elegant Header Accent Line - Similar to Footer Design */
.header-accent-line {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: -15px;
  z-index: 2;
  display: none;
}

.header-accent-line-left,
.header-accent-line-right {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--kelp-300-rgb), 0.5));
  flex-grow: 1;
  max-width: 50%;
}

.header-accent-line-right {
  background: linear-gradient(to left, transparent, rgba(var(--kelp-300-rgb), 0.5));
}

/* RTL support for accent lines */
[dir="rtl"] .header-accent-line-left {
  background: linear-gradient(to left, transparent, rgba(var(--kelp-300-rgb), 0.5));
}

[dir="rtl"] .header-accent-line-right {
  background: linear-gradient(to right, transparent, rgba(var(--kelp-300-rgb), 0.5));
}

.header-accent-diamond {
  position: relative;
  width: 8px;
  height: 8px;
  background-color: rgba(var(--kelp-300-rgb), 0.5);
  transform: rotate(45deg);
  margin: 0 10px;
  opacity: 0.8;
  z-index: 1;
  flex-shrink: 0;
}

.is-scrolled .header-accent-line {
  height: 20px;
  margin-top: -10px;
}

.is-scrolled .header-accent-diamond {
  width: 6px;
  height: 6px;
  margin: 0 8px;
}

/* Header text should be dark/transparent when over hero - ALL LANGUAGES */
.header-wrapper.over-hero {
  color: rgba(255, 255, 255, 0.9);
  background: none;
}

/* Explicitly set header logo and all primary text/icon elements to kelp-50 when over hero */
.header-wrapper.over-hero .header-logo,
.header-wrapper.over-hero .header-nav-button,
.header-wrapper.over-hero .header-nav-link,
.header-wrapper.over-hero .header-icon,
.header-wrapper.over-hero .header-logo-text,
.header-wrapper.over-hero .header-logo-icon,
.header-wrapper.over-hero .header-hamburger {
  color: var(--kelp-50) !important; /* Force to kelp-50 for all these elements */
}

/* Ensure language-specific rules also target kelp-50 for over-hero state */
[lang] .header-wrapper.over-hero .header-logo,
[lang] .header-wrapper.over-hero .header-nav-button,
[lang] .header-wrapper.over-hero .header-nav-link,
[lang] .header-wrapper.over-hero .header-icon,
[lang] .header-wrapper.over-hero .header-logo-text,
[lang] .header-wrapper.over-hero .header-logo-icon,
[lang] .header-wrapper.over-hero .header-hamburger,
[lang="en"] .header-wrapper.over-hero .header-logo,
[lang="en"] .header-wrapper.over-hero .header-nav-button,
[lang="en"] .header-wrapper.over-hero .header-nav-link,
[lang="en"] .header-wrapper.over-hero .header-icon,
[lang="en"] .header-wrapper.over-hero .header-logo-text,
[lang="en"] .header-wrapper.over-hero .header-logo-icon,
[lang="en"] .header-wrapper.over-hero .header-hamburger,
[lang="fr"] .header-wrapper.over-hero .header-logo,
[lang="fr"] .header-wrapper.over-hero .header-nav-button,
[lang="fr"] .header-wrapper.over-hero .header-nav-link,
[lang="fr"] .header-wrapper.over-hero .header-icon,
[lang="fr"] .header-wrapper.over-hero .header-logo-text,
[lang="fr"] .header-wrapper.over-hero .header-logo-icon,
[lang="fr"] .header-wrapper.over-hero .header-hamburger,
[lang="es"] .header-wrapper.over-hero .header-logo,
[lang="es"] .header-wrapper.over-hero .header-nav-button,
[lang="es"] .header-wrapper.over-hero .header-nav-link,
[lang="es"] .header-wrapper.over-hero .header-icon,
[lang="es"] .header-wrapper.over-hero .header-logo-text,
[lang="es"] .header-wrapper.over-hero .header-logo-icon,
[lang="es"] .header-wrapper.over-hero .header-hamburger,
[lang="de"] .header-wrapper.over-hero .header-logo,
[lang="de"] .header-wrapper.over-hero .header-nav-button,
[lang="de"] .header-wrapper.over-hero .header-nav-link,
[lang="de"] .header-wrapper.over-hero .header-icon,
[lang="de"] .header-wrapper.over-hero .header-logo-text,
[lang="de"] .header-wrapper.over-hero .header-logo-icon,
[lang="de"] .header-wrapper.over-hero .header-hamburger,
[lang="it"] .header-wrapper.over-hero .header-logo,
[lang="it"] .header-wrapper.over-hero .header-nav-button,
[lang="it"] .header-wrapper.over-hero .header-nav-link,
[lang="it"] .header-wrapper.over-hero .header-icon,
[lang="it"] .header-wrapper.over-hero .header-logo-text,
[lang="it"] .header-wrapper.over-hero .header-logo-icon,
[lang="it"] .header-wrapper.over-hero .header-hamburger,
[lang="ar"] .header-wrapper.over-hero .header-logo,
[lang="ar"] .header-wrapper.over-hero .header-nav-button,
[lang="ar"] .header-wrapper.over-hero .header-nav-link,
[lang="ar"] .header-wrapper.over-hero .header-icon,
[lang="ar"] .header-wrapper.over-hero .header-logo-text,
[lang="ar"] .header-wrapper.over-hero .header-logo-icon,
[lang="ar"] .header-wrapper.over-hero .header-hamburger,
[lang="fa"] .header-wrapper.over-hero .header-logo,
[lang="fa"] .header-wrapper.over-hero .header-nav-button,
[lang="fa"] .header-wrapper.over-hero .header-nav-link,
[lang="fa"] .header-wrapper.over-hero .header-icon,
[lang="fa"] .header-wrapper.over-hero .header-logo-text,
[lang="fa"] .header-wrapper.over-hero .header-logo-icon,
[lang="fa"] .header-wrapper.over-hero .header-hamburger,
[lang="zh"] .header-wrapper.over-hero .header-logo,
[lang="zh"] .header-wrapper.over-hero .header-nav-button,
[lang="zh"] .header-wrapper.over-hero .header-nav-link,
[lang="zh"] .header-wrapper.over-hero .header-icon,
[lang="zh"] .header-wrapper.over-hero .header-logo-text,
[lang="zh"] .header-wrapper.over-hero .header-logo-icon,
[lang="zh"] .header-wrapper.over-hero .header-hamburger,
[lang="ja"] .header-wrapper.over-hero .header-logo,
[lang="ja"] .header-wrapper.over-hero .header-nav-button,
[lang="ja"] .header-wrapper.over-hero .header-nav-link,
[lang="ja"] .header-wrapper.over-hero .header-icon,
[lang="ja"] .header-wrapper.over-hero .header-logo-text,
[lang="ja"] .header-wrapper.over-hero .header-logo-icon,
[lang="ja"] .header-wrapper.over-hero .header-hamburger {
  color: var(--kelp-50) !important; /* Ensure consistency for all languages */
}

/* Adjust hover states when over hero - Apply to ALL languages */
.header-wrapper.over-hero .header-nav-button:hover,
.header-wrapper.over-hero .header-nav-link:hover,
.header-wrapper.over-hero .header-hamburger:hover {
  color: var(--gold) !important;
}

[lang] .header-wrapper.over-hero .header-nav-button:hover,
[lang] .header-wrapper.over-hero .header-nav-link:hover,
[lang] .header-wrapper.over-hero .header-hamburger:hover,
[lang="en"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="en"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="en"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="fr"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="fr"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="fr"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="es"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="es"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="es"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="de"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="de"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="de"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="it"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="it"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="it"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="ar"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="ar"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="ar"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="fa"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="fa"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="fa"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="zh"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="zh"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="zh"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="ja"] .header-wrapper.over-hero .header-nav-button:hover,
[lang="ja"] .header-wrapper.over-hero .header-nav-link:hover,
[lang="ja"] .header-wrapper.over-hero .header-hamburger:hover {
  color: var(--gold) !important;
}

/* Ensure icon buttons also follow the same rules when over hero */
.header-wrapper.over-hero .header-icon-button:hover .header-icon,
.header-wrapper.over-hero .header-icon-link:hover .header-icon {
  color: var(--gold) !important;
}

[lang] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="en"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="en"] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="fr"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="fr"] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="es"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="es"] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="de"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="de"] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="it"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="it"] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="ar"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="ar"] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="fa"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="fa"] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="zh"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="zh"] .header-wrapper.over-hero .header-icon-link:hover .header-icon,
[lang="ja"] .header-wrapper.over-hero .header-icon-button:hover .header-icon,
[lang="ja"] .header-wrapper.over-hero .header-icon-link:hover .header-icon {
  color: var(--gold) !important;
}

/* Remove background from header-accent-line when over-hero */
.header-accent-line.over-hero {
  background: transparent !important;
}

/* Adjust accent line when over hero */
.header-accent-line.over-hero .header-accent-line-inner {
  background: linear-gradient(
    to right,
    transparent, 
    rgba(var(--gold-rgb), 0.4),
    var(--gold),
    rgba(var(--gold-rgb), 0.4),
    transparent
  );
}

.header-accent-line.over-hero .header-accent-diamond {
  background-color: var(--gold);

}

/* Adjust count badges when over hero - Apply to ALL languages */
.header-wrapper.over-hero .header-count-badge {
  background-color: var(--gold);
  color: var(--color-background-dark);
}

[lang] .header-wrapper.over-hero .header-count-badge,
[lang="en"] .header-wrapper.over-hero .header-count-badge,
[lang="fr"] .header-wrapper.over-hero .header-count-badge,
[lang="es"] .header-wrapper.over-hero .header-count-badge,
[lang="de"] .header-wrapper.over-hero .header-count-badge,
[lang="it"] .header-wrapper.over-hero .header-count-badge,
[lang="ar"] .header-wrapper.over-hero .header-count-badge,
[lang="fa"] .header-wrapper.over-hero .header-count-badge,
[lang="zh"] .header-wrapper.over-hero .header-count-badge,
[lang="ja"] .header-wrapper.over-hero .header-count-badge {
  background-color: var(--gold) !important;
  color: var(--color-background-dark) !important;
}

/* Adjust mobile menu button when over hero - Apply to ALL languages */
.header-wrapper.over-hero .header-hamburger:hover {
  background-color: rgba(var(--gold-rgb), 0.2);
}

[lang] .header-wrapper.over-hero .header-hamburger:hover,
[lang="en"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="fr"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="es"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="de"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="it"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="ar"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="fa"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="zh"] .header-wrapper.over-hero .header-hamburger:hover,
[lang="ja"] .header-wrapper.over-hero .header-hamburger:hover {
  background-color: rgba(var(--gold-rgb), 0.2) !important;
}

/* Adjust search and icon buttons when over hero - Apply to ALL languages */
.header-wrapper.over-hero .header-icon-button:hover,
.header-wrapper.over-hero .header-icon-link:hover {
  background-color: rgba(var(--gold-rgb), 0.2);
}

[lang] .header-wrapper.over-hero .header-icon-button:hover,
[lang] .header-wrapper.over-hero .header-icon-link:hover,
[lang="en"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="en"] .header-wrapper.over-hero .header-icon-link:hover,
[lang="fr"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="fr"] .header-wrapper.over-hero .header-icon-link:hover,
[lang="es"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="es"] .header-wrapper.over-hero .header-icon-link:hover,
[lang="de"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="de"] .header-wrapper.over-hero .header-icon-link:hover,
[lang="it"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="it"] .header-wrapper.over-hero .header-icon-link:hover,
[lang="ar"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="ar"] .header-wrapper.over-hero .header-icon-link:hover,
[lang="fa"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="fa"] .header-wrapper.over-hero .header-icon-link:hover,
[lang="zh"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="zh"] .header-wrapper.over-hero .header-icon-link:hover,
[lang="ja"] .header-wrapper.over-hero .header-icon-button:hover,
[lang="ja"] .header-wrapper.over-hero .header-icon-link:hover {
  background-color: rgba(var(--gold-rgb), 0.2) !important;
}

/* Make sure .over-hero triggers correctly for all languages */
.header-wrapper.over-hero .header-bg::before,
[lang] .header-wrapper.over-hero .header-bg::before,
[lang="en"] .header-wrapper.over-hero .header-bg::before,
[lang="fr"] .header-wrapper.over-hero .header-bg::before,
[lang="es"] .header-wrapper.over-hero .header-bg::before,
[lang="de"] .header-wrapper.over-hero .header-bg::before,
[lang="it"] .header-wrapper.over-hero .header-bg::before,
[lang="ar"] .header-wrapper.over-hero .header-bg::before,
[lang="fa"] .header-wrapper.over-hero .header-bg::before,
[lang="zh"] .header-wrapper.over-hero .header-bg::before,
[lang="ja"] .header-wrapper.over-hero .header-bg::before {
  opacity: 1;
}

/* Dark mode when over hero */
.over-hero .header-submenu-container {
  --submenu-bg: var(--color-background-dark);
  background: var(--submenu-bg) !important;
  border-color: rgba(var(--gold-rgb), 0.2);
}

.over-hero .header-submenu-title {
  color: var(--gold);
}

/* Non-hero page styling */
.header-submenu-container:not(.over-hero) {
  --submenu-bg: var(--kelp-50);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
}

/* Update active state to apply to all links */
.header-nav-link.active {
  color: var(--gold) !important;
  font-weight: 600;
  position: relative;
}

.header-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}

/* Smooth background transitions */
/* .header-bg base empty block removed */

.header-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--header-bg-color);
  /* backdrop-filter: blur(20px); */
  opacity: 0;
}

/* Make sure .over-hero triggers correctly for all languages */
.header-wrapper.over-hero .header-bg::before,
[lang] .header-wrapper.over-hero .header-bg::before,
[lang="en"] .header-wrapper.over-hero .header-bg::before,
[lang="fr"] .header-wrapper.over-hero .header-bg::before,
[lang="es"] .header-wrapper.over-hero .header-bg::before,
[lang="de"] .header-wrapper.over-hero .header-bg::before,
[lang="it"] .header-wrapper.over-hero .header-bg::before,
[lang="ar"] .header-wrapper.over-hero .header-bg::before,
[lang="fa"] .header-wrapper.over-hero .header-bg::before,
[lang="zh"] .header-wrapper.over-hero .header-bg::before,
[lang="ja"] .header-wrapper.over-hero .header-bg::before {
  opacity: 1;
}

/* Submenu color transitions */
/* .header-submenu-container empty block removed */

/* Removed all CSS transitions - using Framer Motion instead */

/* Update hero submenu background */
.over-hero .header-submenu-container {
  --submenu-bg: var(--color-background-dark);
  background: var(--submenu-bg) !important;
}

/* Match hero content colors */
.hero-left-content,
.hero-right-content {
  background-color: var(--color-background-dark);
}

/* Ensure non-hero pages use kelp-50 */
:root {
  --submenu-bg: var(--kelp-50);
}

.header-submenu-container {
  background: var(--submenu-bg) !important;
}
/* Smooth transition for all elements - REMOVED ALL CSS TRANSITIONS */
/* Add reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .header-main,
  .header-logo,
  .header-logo-image,
  .header-desktop-nav,
  .header-nav-button,
  .header-nav-link,
  .header-nav-arrow,
  .header-accent-line-inner,
  .header-bg,
  .header-submenu-container {
    transition-duration: 0.001s !important;
  }
}

/* Header link color themes based on hero section - only link colors, no wrapper colors */
.header-wrapper.over-hero .header-nav-link {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero .header-nav-link:hover {
  color: var(--kelp-50) !important;
}

.header-wrapper.over-hero .header-nav-button {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero .header-nav-button:hover {
  color: var(--kelp-50) !important;
}

.header-wrapper.over-hero .header-nav-arrow {
  color: var(--kelp-200) !important;
}

.header-wrapper.over-hero .header-nav-button:hover .header-nav-arrow {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero .header-nav-link {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero .header-nav-link:hover {
  color: var(--gold) !important;
}

.header-wrapper.not-over-hero .header-nav-button {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero .header-nav-button:hover {
  color: var(--gold) !important;
}

.header-wrapper.not-over-hero .header-nav-arrow {
  color: var(--kelp-600) !important;
}

.header-wrapper.not-over-hero .header-nav-button:hover .header-nav-arrow {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Icon colors for hero/non-hero themes */
.header-wrapper.over-hero .header-icon-button {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero .header-icon-button:hover {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero .header-icon-button {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero .header-icon-button:hover {
  color: var(--kelp-900) !important;
}

/* Badge colors for hero/non-hero themes */
.header-wrapper.over-hero .header-badge {
  background-color: var(--gold-light);
  color: var(--kelp-950);
}

.header-wrapper.not-over-hero .header-badge {
  background-color: var(--gold);
  color: white;
}

/* Language-aware header link color themes (applies to all langs by default) */
.header-wrapper.over-hero .header-nav-link,
.header-wrapper.over-hero .header-nav-button,
.header-wrapper.over-hero .header-nav-text,
.header-wrapper[class*="over-hero-"] .header-nav-link,
.header-wrapper[class*="over-hero-"] .header-nav-button,
.header-wrapper[class*="over-hero-"] .header-nav-text {
  color: var(--kelp-100) !important;
}

/* Icons and arrows inherit light color in over-hero for all languages */
.header-wrapper.over-hero .header-nav-arrow,
.header-wrapper[class*="over-hero-"] .header-nav-arrow,
.header-wrapper.over-hero .header-icon-button,
.header-wrapper[class*="over-hero-"] .header-icon-button,
.header-wrapper.over-hero .header-icon-button svg,
.header-wrapper[class*="over-hero-"] .header-icon-button svg,
.header-wrapper.over-hero .header-nav-button svg,
.header-wrapper[class*="over-hero-"] .header-nav-button svg {
  color: var(--kelp-100) !important;
  stroke: var(--kelp-100) !important;
  fill: none !important;
}

.header-wrapper.over-hero .header-nav-link:hover,
.header-wrapper.over-hero .header-nav-button:hover,
.header-wrapper.over-hero .header-nav-button:hover .header-nav-text,
.header-wrapper[class*="over-hero-"] .header-nav-link:hover,
.header-wrapper[class*="over-hero-"] .header-nav-button:hover,
.header-wrapper[class*="over-hero-"] .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero .header-nav-link,
.header-wrapper.not-over-hero .header-nav-button,
.header-wrapper.not-over-hero .header-nav-text,
.header-wrapper[class*="not-over-hero-"] .header-nav-link,
.header-wrapper[class*="not-over-hero-"] .header-nav-button,
.header-wrapper[class*="not-over-hero-"] .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero .header-nav-link:hover,
.header-wrapper.not-over-hero .header-nav-button:hover,
.header-wrapper.not-over-hero .header-nav-button:hover .header-nav-text,
.header-wrapper[class*="not-over-hero-"] .header-nav-link:hover,
.header-wrapper[class*="not-over-hero-"] .header-nav-button:hover,
.header-wrapper[class*="not-over-hero-"] .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Icons darker in not-over-hero */
.header-wrapper.not-over-hero .header-nav-arrow,
.header-wrapper[class*="not-over-hero-"] .header-nav-arrow,
.header-wrapper.not-over-hero .header-icon-button,
.header-wrapper[class*="not-over-hero-"] .header-icon-button,
.header-wrapper.not-over-hero .header-icon-button svg,
.header-wrapper[class*="not-over-hero-"] .header-icon-button svg,
.header-wrapper.not-over-hero .header-nav-button svg,
.header-wrapper[class*="not-over-hero-"] .header-nav-button svg {
  color: var(--kelp-800) !important;
  stroke: var(--kelp-800) !important;
}

/* French */
.header-wrapper.over-hero-fr .header-nav-link,
.header-wrapper.over-hero-fr .header-nav-button,
.header-wrapper.over-hero-fr .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero-fr .header-nav-link:hover,
.header-wrapper.over-hero-fr .header-nav-button:hover,
.header-wrapper.over-hero-fr .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero-fr .header-nav-link,
.header-wrapper.not-over-hero-fr .header-nav-button,
.header-wrapper.not-over-hero-fr .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero-fr .header-nav-link:hover,
.header-wrapper.not-over-hero-fr .header-nav-button:hover,
.header-wrapper.not-over-hero-fr .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Spanish */
.header-wrapper.over-hero-es .header-nav-link,
.header-wrapper.over-hero-es .header-nav-button,
.header-wrapper.over-hero-es .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero-es .header-nav-link:hover,
.header-wrapper.over-hero-es .header-nav-button:hover,
.header-wrapper.over-hero-es .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero-es .header-nav-link,
.header-wrapper.not-over-hero-es .header-nav-button,
.header-wrapper.not-over-hero-es .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero-es .header-nav-link:hover,
.header-wrapper.not-over-hero-es .header-nav-button:hover,
.header-wrapper.not-over-hero-es .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* German */
.header-wrapper.over-hero-de .header-nav-link,
.header-wrapper.over-hero-de .header-nav-button,
.header-wrapper.over-hero-de .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero-de .header-nav-link:hover,
.header-wrapper.over-hero-de .header-nav-button:hover,
.header-wrapper.over-hero-de .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero-de .header-nav-link,
.header-wrapper.not-over-hero-de .header-nav-button,
.header-wrapper.not-over-hero-de .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero-de .header-nav-link:hover,
.header-wrapper.not-over-hero-de .header-nav-button:hover,
.header-wrapper.not-over-hero-de .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Italian */
.header-wrapper.over-hero-it .header-nav-link,
.header-wrapper.over-hero-it .header-nav-button,
.header-wrapper.over-hero-it .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero-it .header-nav-link:hover,
.header-wrapper.over-hero-it .header-nav-button:hover,
.header-wrapper.over-hero-it .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero-it .header-nav-link,
.header-wrapper.not-over-hero-it .header-nav-button,
.header-wrapper.not-over-hero-it .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero-it .header-nav-link:hover,
.header-wrapper.not-over-hero-it .header-nav-button:hover,
.header-wrapper.not-over-hero-it .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Arabic */
.header-wrapper.over-hero-ar .header-nav-link,
.header-wrapper.over-hero-ar .header-nav-button,
.header-wrapper.over-hero-ar .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero-ar .header-nav-link:hover,
.header-wrapper.over-hero-ar .header-nav-button:hover,
.header-wrapper.over-hero-ar .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero-ar .header-nav-link,
.header-wrapper.not-over-hero-ar .header-nav-button,
.header-wrapper.not-over-hero-ar .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero-ar .header-nav-link:hover,
.header-wrapper.not-over-hero-ar .header-nav-button:hover,
.header-wrapper.not-over-hero-ar .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Persian */
.header-wrapper.over-hero-fa .header-nav-link,
.header-wrapper.over-hero-fa .header-nav-button,
.header-wrapper.over-hero-fa .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero-fa .header-nav-link:hover,
.header-wrapper.over-hero-fa .header-nav-button:hover,
.header-wrapper.over-hero-fa .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero-fa .header-nav-link,
.header-wrapper.not-over-hero-fa .header-nav-button,
.header-wrapper.not-over-hero-fa .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero-fa .header-nav-link:hover,
.header-wrapper.not-over-hero-fa .header-nav-button:hover,
.header-wrapper.not-over-hero-fa .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Chinese */
.header-wrapper.over-hero-zh .header-nav-link,
.header-wrapper.over-hero-zh .header-nav-button,
.header-wrapper.over-hero-zh .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero-zh .header-nav-link:hover,
.header-wrapper.over-hero-zh .header-nav-button:hover,
.header-wrapper.over-hero-zh .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero-zh .header-nav-link,
.header-wrapper.not-over-hero-zh .header-nav-button,
.header-wrapper.not-over-hero-zh .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero-zh .header-nav-link:hover,
.header-wrapper.not-over-hero-zh .header-nav-button:hover,
.header-wrapper.not-over-hero-zh .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Japanese */
.header-wrapper.over-hero-ja .header-nav-link,
.header-wrapper.over-hero-ja .header-nav-button,
.header-wrapper.over-hero-ja .header-nav-text {
  color: var(--kelp-100) !important;
}

.header-wrapper.over-hero-ja .header-nav-link:hover,
.header-wrapper.over-hero-ja .header-nav-button:hover,
.header-wrapper.over-hero-ja .header-nav-button:hover .header-nav-text {
  color: var(--kelp-50) !important;
}

.header-wrapper.not-over-hero-ja .header-nav-link,
.header-wrapper.not-over-hero-ja .header-nav-button,
.header-wrapper.not-over-hero-ja .header-nav-text {
  color: var(--kelp-800) !important;
}

.header-wrapper.not-over-hero-ja .header-nav-link:hover,
.header-wrapper.not-over-hero-ja .header-nav-button:hover,
.header-wrapper.not-over-hero-ja .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Header icons - use kelp-400 when over hero for better visibility */
.header-wrapper.over-hero .header-icon {
  color: var(--kelp-400);
}

.header-wrapper.over-hero .header-hamburger-icon {
  color: var(--kelp-400);
}

.header-wrapper.over-hero .header-icon-button:hover .header-icon {
  color: var(--kelp-300);
}

.header-wrapper.over-hero .header-hamburger:hover .header-hamburger-icon {
  color: var(--kelp-300);
}

/* Default icon colors when not over hero */
.header-wrapper:not(.over-hero) .header-icon {
  color: var(--kelp-800);
}

.header-wrapper:not(.over-hero) .header-hamburger-icon {
  color: var(--kelp-700);
}

/* Final override: enforce gold hover on all nav links/buttons and inner text */
.header-wrapper .header-desktop-nav .header-nav-item > .header-nav-link:hover,
.header-wrapper .header-desktop-nav .header-nav-item > .header-nav-button:hover,
.header-wrapper .header-desktop-nav .header-nav-item > .header-nav-link:hover .header-nav-text,
.header-wrapper .header-desktop-nav .header-nav-item > .header-nav-button:hover .header-nav-text {
  color: var(--gold) !important;
}

/* Ensure arrow inherits gold on hover */
.header-wrapper .header-desktop-nav .header-nav-item > .header-nav-button:hover .header-nav-arrow,
.header-wrapper .header-desktop-nav .header-nav-item > .header-nav-link:hover .header-nav-arrow {
  color: var(--gold) !important;
}

/* Leorre Atelier - Luxury Submenu Styles */

/* Main wrapper covering the screen */
.luxury-submenu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999; /* Just below the header but above other content */
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none; /* Only the container itself should receive clicks */
}

/* Main container holding the submenu UI - optimized for performance */
.luxury-submenu-container {
  background: rgba(var(--kelp-100-rgb), 0.80);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  
  width: 95%;
  max-width: 1400px;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.03);
  position: absolute;
  top: calc(var(--header-height, 40px) + 38px);
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100;
  border: none;
  pointer-events: auto;
  height: auto;
  min-height: var(--luxury-submenu-height);
  max-height: calc(95vh - var(--header-height));
  display: flex;
  flex-direction: column;
  /* GPU acceleration for smooth animations */
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Apply min-height only for desktop - exact same as ProductDesignUpload */
@media (min-width: 993px) {
  .luxury-submenu-container {
    min-height: var(--luxury-submenu-height);
  }
  .luxury-submenu-content > * {
     min-height: 100px;
     height: auto; /* Still allow growing */
  }
}

/* Mobile adjustments for container - exact same as ProductDesignUpload */
@media (max-width: 992px) {
  .luxury-submenu-container {
    width: 100%;
    max-width: 100%;
    border-radius: 0; /* Remove rounding for full width */
    top: var(--header-height-mobile, var(--header-height)); /* Use mobile header height if defined */
    max-height: none; /* Allow full height */
    height: calc(100vh - var(--header-height-mobile, var(--header-height))); /* Fill remaining viewport */
    min-height: initial; /* Remove desktop min-height */
    box-shadow: none; /* Optional: remove shadow on mobile */
  }

  .luxury-submenu-content {
    width: 85%;
    margin: 0 auto;
    padding: 50px 0 30px;
    max-height: none;
    overflow-y: auto;
  }
   /* Ensure children height is auto */
  .luxury-submenu-content > * {
     height: auto;
     min-height: initial; /* Remove desktop min-height */
  }

  .luxury-submenu-title {
    padding-top: 1rem;
  }

  .luxury-submenu-title::after {
    bottom: -12px;
    height: 12px;
  }
}

@media (max-width: 576px) {
   .luxury-submenu-content {
    padding: 15px; /* Further reduce padding */
  }
}

/* Header section - exact same as ProductDesignUpload */
.luxury-submenu-header {
  display: flex;
  align-items: center;
  padding: 25px 60px 20px;
  position: relative;
  height: 55px;
}

/* Dark/Light theme variations for header - exact same as footer */
.luxury-submenu-container.over-hero .luxury-submenu-header {
  background-color: var(--kelp-950);
 
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
  border: none;
}

.luxury-submenu-container:not(.over-hero) .luxury-submenu-header {
  background-color: none;
 
}

.luxury-submenu-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex: 1;
}

.luxury-submenu-title {
  font-family: var(--font-heading);
  font-size: 0.8rem !important;
  font-weight: 300;
  margin: 0;
  letter-spacing: 1.8px;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  border-bottom: none !important;
  text-decoration: none !important;
  padding-top: 4rem;

  /* decorative vertical line removed */

  background: var(--text-shine-gradient);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* animation: shine 8s linear infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes shine {
  0% {
      background-position: 100%;
  }
  100% {
      background-position: -100%;
  }
}

.luxury-submenu-close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-out;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(var(--gold-rgb), 0);
}


.luxury-submenu-close:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 0 15px rgba(var(--gold-rgb), 0.15);
}

.luxury-submenu-close:hover::before {
  transform: scale(1.5);
}

.luxury-submenu-close-icon {
  position: relative;
  width: 15px;
  height: 15px;
  z-index: 1;
  transform: rotate(45deg);
  transition: all 0.2s ease-out;
}

.luxury-submenu-close-icon::before,
.luxury-submenu-close-icon::after {
  content: '';
  position: absolute;
  background-color: rgba(var(--gold-rgb), 0.9);
  transition: all 0.2s ease-out;
}

.luxury-submenu-close-icon::before {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.luxury-submenu-close-icon::after {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.luxury-submenu-close:hover .luxury-submenu-close-icon {
  transform: rotate(45deg) scale(1.1);
}

.luxury-submenu-close:hover .luxury-submenu-close-icon::before,
.luxury-submenu-close:hover .luxury-submenu-close-icon::after {
  background-color: rgba(var(--gold-rgb), 0.9);
}

/* Content section */
.luxury-submenu-content {
  flex: 1;
  padding: 28px 44px; /* tighter premium spacing */
  overflow: hidden; /* avoid inner scroll flicker; delegate to internal wrappers */
  display: flex;
  flex-direction: column;
}

.luxury-submenu-content > * {
  margin-bottom: 30px;
}

/* Grid layout */
.luxury-submenu-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
  max-height: 400px;
  overflow: hidden;
}

.luxury-submenu-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section titles */
.luxury-submenu-section .luxury-submenu-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kelp-900);
  background: none;
  -webkit-text-fill-color: initial;
  animation: none;
}

/* Over-hero color harmonization */
.luxury-submenu-container.over-hero .luxury-submenu-section .luxury-submenu-title {
  color: var(--kelp-50);
}



/* Lists - Organized layout with scrolling for many items */
.luxury-submenu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.luxury-submenu-list-scroll {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gold-rgb), 0.3) transparent;
  padding-right: 6px; /* avoid width jump when scrollbar appears */
}

.luxury-submenu-item {
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.15s ease-out;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  /* GPU acceleration */
  transform: translateZ(0);
  will-change: transform;
}

.luxury-submenu-item:hover {
  background: none;
  border-left-color: var(--gold);
  transform: translateX(4px);
}

.luxury-submenu-item:hover .luxury-submenu-item-wrapper {
  background: rgba(var(--kelp-50-rgb), 0.5);
  box-shadow: 0 4px 16px rgba(var(--gold-rgb), 0.1);
}

.luxury-submenu-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  min-height: 60px;
  border-radius: 12px;
  background: rgba(var(--kelp-50-rgb), 0.3);
  transition: all 0.15s ease-out;
  /* GPU acceleration */
  transform: translateZ(0);
  will-change: transform, opacity;
}

.luxury-submenu-item-image-container {
  flex-shrink: 0;
  position: relative;
  order: 2; /* Move image to the right */
}

.luxury-submenu-item-image {
  width: 56px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.15s ease-out;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* GPU acceleration */
  transform: translateZ(0);
  will-change: transform;
}

.luxury-submenu-item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.15s ease-out;
  /* GPU acceleration */
  transform: translateZ(0);
  will-change: transform;
}

.luxury-submenu-item:hover .luxury-submenu-item-image {
  transform: scale(1.05);
  border-color: rgba(var(--gold-rgb), 0.4);
}

.luxury-submenu-item:hover .luxury-submenu-item-image img {
  transform: scale(1.1);
}

.luxury-submenu-item-content-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  order: 1; /* Move content to the left */
}

.luxury-submenu-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--kelp-800);
  text-decoration: none;
  transition: all 0.15s ease-out;
  padding: 0;
  border-radius: 8px;
  font-size: 0.9rem;
  position: relative;
  min-height: 60px;
  width: 100%;
}

.luxury-submenu-link:hover {
  color: var(--kelp-900);
  background: rgba(var(--kelp-200-rgb), 0.2);
}

.luxury-submenu-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.luxury-submenu-item-title {
  font-size: 0.95rem;
  font-weight: 400;
  margin: 0;
  color: var(--kelp-900);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.luxury-submenu-item-description {
  font-size: 0.75rem;
  color: var(--kelp-500);
  margin: 0;
  line-height: 1.5;
  font-weight: 300;
  margin-top: 2px;
}

/* Image section - positioned on the right */
.luxury-submenu-image-section {
  position: sticky;
  top: 20px;
  height: -moz-fit-content;
  height: fit-content;
}

.luxury-submenu-image-container {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
}

.luxury-submenu-image-card {
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease;
}

.luxury-submenu-image {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.luxury-submenu-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.2s ease-out;
}

.luxury-submenu-image-card:hover .luxury-submenu-image img {
  transform: scale(1.05);
}

/* Categories container - Full width layout */
.luxury-submenu-categories-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Collections container - Clean grid layout */
.luxury-submenu-collections-container {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0 6px;
}

/* Categories grid - Minimal luxury design with proper separation */
.luxury-submenu-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow: hidden;
}

.luxury-submenu-category-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease-out;
  height: 340px;
 
}

.luxury-submenu-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: rgba(var(--gold-rgb), 0.3);
}

.luxury-submenu-category-wrapper {
  display: flex;
  height: 100%;
  position: relative;
}

.luxury-submenu-category-image-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.luxury-submenu-category-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s ease-out;
 
}

.luxury-submenu-category-card:hover .luxury-submenu-category-image {
  transform: scale(1.08);
}

.luxury-submenu-category-content-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
}

.luxury-submenu-category-link {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  text-decoration: none;
}

.luxury-submenu-category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
  display: flex;
  align-items: flex-end;
  padding: 16px;
  transition: background 0.15s ease-out;
}

.luxury-submenu-category-card:hover .luxury-submenu-category-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
}

.luxury-submenu-category-name {
  color: white;
  font-size: 0.9rem;
  margin: 0;
  font-weight: 500;
  text-align: center;
  width: 100%;
  line-height: 1.3;
}

/* Search content */
.luxury-submenu-search-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  width: 100%;
}

/* Responsive styles */
@media (min-width: 993px) {
  .luxury-submenu-container {
    max-width: 1400px;
  }

  .luxury-submenu-content > * {
    margin-bottom: 40px;
  }

 
}

@media (max-width: 992px) {
  .luxury-submenu-container {
    width: 98%;
    max-width: none;
    border-radius: 0 0 20px 20px;
  }

  .luxury-submenu-content { padding: 22px 28px; }

  .luxury-submenu-header {
    padding: 20px 40px 15px;
  }

  .luxury-submenu-content > * {
    margin-bottom: 25px;
  }

  .luxury-submenu-title {
    font-size: 0.7rem !important;
  }

  .luxury-submenu-title::after {
    bottom: -15px;
    height: 12px;
  }

  /* Mobile grid layout */
  .luxury-submenu-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-height: 350px;
  }

  .luxury-submenu-list-scroll { max-height: 250px; }

  .luxury-submenu-image-section {
    position: relative;
    top: auto;
    order: -1;
  }

  .luxury-submenu-image-container { height: 240px; }

  .luxury-submenu-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 250px;
  }

  .luxury-submenu-category-card {
    height: 100px;
  }
}

@media (max-width: 576px) {
  .luxury-submenu-container {
    width: 100%;
    border-radius: 0;
    height: 70vh;
    margin-top: 4rem;
  }

  .luxury-submenu-content {
    padding: 20px 30px;
  }

  .luxury-submenu-header {
    padding: 15px 30px 10px;
  }

  .luxury-submenu-categories {
    grid-template-columns: 1fr;
  }

  .luxury-submenu-category-card {
    height: 80px;
  }
}

/* Root variables - exact same as ProductDesignUpload */
:root {
  --luxury-submenu-height: 60vh;
  --luxury-submenu-max-height: calc(80vh - var(--header-height));
}

/* Dark/Light theme variations - exact same as footer */
.luxury-submenu-container.over-hero {
  background-color: var(--kelp-950);
  border: none;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(var(--gold-rgb), 0.1);
}

.luxury-submenu-container.over-hero .luxury-submenu-title {
  color: var(--kelp-100);
  background: var(--text-shine-gradient);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* animation: shine 8s linear infinite; - DISABLED FOR PERFORMANCE */
}



.luxury-submenu-container.over-hero .luxury-submenu-section .luxury-submenu-title {
  color: var(--kelp-100);
  background: none;
  -webkit-text-fill-color: initial;
  animation: none;
}



.luxury-submenu-container.over-hero .luxury-submenu-link {
  color: var(--kelp-200);
}

.luxury-submenu-container.over-hero .luxury-submenu-link:hover {
  color: var(--kelp-100);
  background: rgba(255, 255, 255, 0.1);
}

.luxury-submenu-container.over-hero .luxury-submenu-item-title {
  color: var(--kelp-50);
}

.luxury-submenu-container.over-hero .luxury-submenu-item-description {
  color: var(--kelp-200);
}

/* Force light/dark theme for submenu content when over hero */
.luxury-submenu-container.over-hero .luxury-submenu-content,
.luxury-submenu-container.over-hero .search-minimal-list-item,
.luxury-submenu-container.over-hero .search-minimal-item-text {
  color: var(--kelp-100);
}

.luxury-submenu-container.over-hero .search-minimal-list-item:hover {
  color: var(--kelp-50);
}

.luxury-submenu-container.over-hero .luxury-submenu-close {
  border-color: rgba(var(--gold-rgb), 0.4);
}

.luxury-submenu-container.over-hero .luxury-submenu-close:hover {
  border-color: rgba(var(--gold-rgb), 0.7);
  box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.2);
}

.luxury-submenu-container.over-hero .luxury-submenu-close-icon::before,
.luxury-submenu-container.over-hero .luxury-submenu-close-icon::after {
  background-color: rgba(var(--gold-rgb), 0.8);
}

.luxury-submenu-container.over-hero .luxury-submenu-close:hover .luxury-submenu-close-icon::before,
.luxury-submenu-container.over-hero .luxury-submenu-close:hover .luxury-submenu-close-icon::after {
  background-color: rgba(var(--gold-rgb), 1);
} 

.luxury-submenu-container.over-hero .luxury-submenu-content {
  background-color: var(--kelp-950);
  /* backdrop-filter: blur(10px); */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
  border: none;
} /* Wrapper for footer and bottom section */
.footer-wrapper {
  position: relative;
  width: 100%;
  margin-top: 80px;
}

/* Elegant Footer Design */
.footer {
  background-color: var(--kelp-950);
  color: var(--kelp-200);
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  border-radius: 3px;
  padding-bottom: 0;
  /* Clip-path will be controlled by Framer Motion */
}

/* Background elements */
.footer-bg-elements {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
}

.footer-bg-circle {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid var(--kelp-500);
  top: -250px;
  right: -100px;
}

.footer-bg-diamond {
  position: absolute;
  width: 400px;
  height: 400px;
  transform: rotate(45deg);
  border: 1px solid var(--kelp-500);
  bottom: -200px;
  left: -200px;
}

/* Refined Container with enhanced padding */
.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 0 2.5rem 4rem 2.5rem;
}

/* Header-style clean line */
.footer-accent-line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-300), transparent);
  opacity: 0.6;
  margin: 2rem 0;
}

/* Content Layout with improved padding distribution */
.footer-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3.5rem;
  padding: 3rem 2rem 5rem 2rem;
  background-color: rgba(var(--kelp-950-rgb), 0.7);
  border-bottom: none;
  border-top: none;
  box-sizing: border-box;
}

.footer-brand {
  max-width: 350px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  text-decoration: none;
  color: var(--kelp-50);
}

.footer-logo-icon {
  width: 24px;
  height: 24px;
}

.footer-logo-text {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 2px;
}

.footer-description {
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 30px;
  color: var(--kelp-200);
  font-weight: 300;
}

/* Footer Links Section */
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  box-sizing: border-box;
}

.footer-link-column {
  display: flex;
  flex-direction: column;
}

.footer-heading {
  color: var(--kelp-50);
  font-size: 0.95rem;
  font-weight: 400;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 1px;
  background: linear-gradient(to right, var(--gold-light), transparent);
}

/* RTL support for heading underlines */
[dir="rtl"] .footer-heading::after {
  left: auto;
  right: 0;
  background: linear-gradient(to left, var(--gold-light), transparent);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 12px;
}

.footer-link {
  color: var(--kelp-200);
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  position: relative;
  padding-left: 0;
}

.footer-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--gold-light);
  transform: translateY(-50%);
  opacity: 0;
}

/* Bottom Section with centered logo */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2rem 6rem 2rem 6rem;
  box-sizing: border-box;
  background-color: var(--kelp-50);
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 0 0 5px 5px;
}

.footer-social {
  display: flex;
  gap: 15px;
  justify-self: start;
}

/* Smaller logo in footer bottom */
.footer-bottom-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--kelp-900);
}

.footer-bottom-logo .footer-logo-icon {
  width: 18px;
  height: 18px;
  margin-bottom: 4px;
}

.footer-bottom-logo .footer-logo-text {
  font-size: 0.9rem;
  letter-spacing: 2.5px;
}

/* Darker background for social icons */
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--kelp-950);
  color: var(--gold-dark);
  position: relative;
  overflow: hidden;
}

.footer-social-icon {
  width: 14px;
  height: 14px;
  position: relative;
  z-index: 1;
}

.footer-copyright {
  color: var(--kelp-700);
  font-size: 0.8rem;
  font-weight: 300;
  justify-self: end;
}

/* Form Styling */
.footer-form {
  margin-top: 20px;
}

.footer-input-group {
  display: flex;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(var(--kelp-700-rgb), 0.5);
  background-color: rgba(var(--kelp-900-rgb), 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.footer-input-group:focus-within {
  border-color: rgba(var(--gold-rgb), 0.4);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 
              0 0 0 1px rgba(var(--gold-rgb), 0.1);
}

.footer-input-group input {
  flex: 1;
  background-color: transparent;
  border: none;
  color: var(--kelp-100);
  padding: 12px 45px 12px 15px;
  font-size: 0.85rem;
  outline: none;
  width: 100%;
  font-weight: 300;
  letter-spacing: 0.3px;
}

.footer-input-group input::-moz-placeholder {
  color: var(--kelp-400);
  opacity: 0.7;
}

.footer-input-group input::placeholder {
  color: var(--kelp-400);
  opacity: 0.7;
}

/* Custom send button */
.footer-submit-button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent;
  border: none;
  padding: 0 12px;
  color: var(--kelp-300);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Custom stylized send arrow */
.custom-send-button {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-arrow {
  position: relative;
  width: 14px;
  height: 1.5px;
  background-color: currentColor;
  transform-origin: right center;
}

.send-arrow::before,
.send-arrow::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 1.5px;
  background-color: currentColor;
  right: -1px;
  transform-origin: right center;
}

.send-arrow::before {
  transform: rotate(45deg) translateY(-2.5px);
}

.send-arrow::after {
  transform: rotate(-45deg) translateY(2.5px);
}

.loading-dots {
  letter-spacing: 2px;
}

.footer-success {
  color: var(--kelp-300);
  font-size: 0.85rem;
  margin-top: 10px;
  padding: 10px 0;
}

/* Enhanced success message */
.footer-success-message {
  background: linear-gradient(135deg, rgba(var(--kelp-800-rgb), 0.4), rgba(var(--kelp-900-rgb), 0.4));
  border: 1px solid rgba(var(--gold-rgb), 0.15);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
}

.footer-success-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(var(--gold-rgb), 0.3), 
    rgba(var(--gold-rgb), 0.5), 
    rgba(var(--gold-rgb), 0.3), 
    transparent
  );
}

.footer-success-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.success-check {
  color: var(--gold-light);
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 2;
}

.success-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
}

.footer-success-content {
  flex: 1;
}

.footer-success-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gold-light);
  margin: 0 0 6px 0;
  letter-spacing: 0.5px;
}

.footer-success-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--kelp-100);
  margin: 0;
  font-weight: 300;
}

.footer-error-message {
  color: #e57373;
  font-size: 0.75rem;
  margin: 8px 0 0 0;
  padding-left: 15px;
}

.footer-form-disclaimer {
  font-size: 0.7rem;
  color: var(--kelp-300);
  margin: 10px 0 0 0;
  line-height: 1.4;
  font-weight: 300;
}

/* Input container for animation purposes */
.footer-input-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .footer-container, .footer-bottom {
    width: calc(100% - 40px);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-container {
    padding: 0 2rem 3.5rem 2rem;
  }
   .footer-bottom {
    padding: 1.5rem 4rem;
  }
  
  .footer-content {
    padding: 2.5rem 1.5rem 4.5rem 1.5rem;
  }
}

@media (max-width: 992px) {
  .footer-content {
    padding: 2.25rem 1.5rem 4rem 1.5rem;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .footer-brand {
    max-width: 100%;
  }
  .footer-container, .footer-bottom {
    width: calc(100% - 30px);
  }
   .footer-container {
    padding: 0 1.75rem 3rem 1.75rem;
  }
   .footer-bottom {
    padding: 1.5rem 3rem;
  }
}

@media (max-width: 768px) {
  .footer-wrapper {
    margin-top: 60px;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.25rem;
   
  }
  .footer-link{
    font-size: 12px;
  }
  
  .footer-content {
    padding: 2rem 1.25rem 3.5rem 1.25rem;
    border-left: none;
    border-right: none;
  }
  .footer-input-group input{
    font-size: 12px !important;
  }
  .footer-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 25px;
    justify-items: center;
    padding: 1.5rem 1rem;
    width: calc(100% - 20px);
    border-radius: 0;
    max-width: 320px;
    margin: 0 auto;
  }
  .footer-form-disclaimer {
    font-size: 10px !important;
  }

  .footer-social { order: 2; justify-self: center; }
  .footer-bottom-logo { order: 1; }
  .footer-copyright { order: 3; justify-self: center; }
  
  .footer-accent-line { height: 1px; }

  .footer-container {
    padding: 0 1rem 2.5rem 1rem;
    width: calc(100% - 20px);
    max-width: 360px;
    margin: 0 auto;
  }
   .footer {
    border-radius: 0;
  }
  .footer-description{
    font-size: 10px;
  }
  .footer-heading {
    font-size: 13px
  }

  .footer-success-message {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  
  .footer-success-icon {
    margin-bottom: 10px;
  }
  .custom-send-button{
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 576px) {
 
 
  .footer-content {
    padding: 1.75rem 1rem 3rem 1rem;
  }
  
  .footer-bottom {
    padding: 1.2rem 1.5rem;
  }
  
  .footer-accent-line { height: 1px; }

  .footer-container {
    padding: 0 1.25rem 2rem 1.25rem;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .footer-social-link:active {
    transform: scale(0.95);
  }
}/* ================================
   Artisanal Product Card - Luxury Design
=============================================== */
.artisanal-product-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: var(--color-text-primary);
  margin-bottom: 3rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%;
  /* Removed will-change that causes Safari chunky scroll */
  overflow: visible;
}

.artisanal-product-card:hover {
  transform: translateY(-10px);
}

.artisanal-product-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.artisanal-product-image-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  margin-bottom: 1.5rem;
  background-color: var(--kelp-50);
 
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.artisanal-product-card:hover .artisanal-product-image-container {
  box-shadow: var(--shadow-medium);
}

/* Inner image container with fancy borders */
.artisanal-image-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.artisanal-image-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  z-index: 2;
}

.artisanal-product-card:hover .artisanal-image-inner::before {
  inset: 12px;
  opacity: 1;
}

.artisanal-product-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Removed will-change that causes Safari chunky scroll */
}

.artisanal-product-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, 
    rgba(var(--kelp-950-rgb), 0.4) 0%, 
    rgba(var(--kelp-950-rgb), 0) 40%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.artisanal-product-card:hover .artisanal-product-overlay {
  opacity: 1;
}

/* Premium bookmark icon styling */
.artisanal-product-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(var(--kelp-50-rgb), 0.85);
 
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-10px);
}

.artisanal-product-card:hover .artisanal-product-wishlist {
  opacity: 1;
  transform: translateY(0);
}

.artisanal-product-wishlist:hover {
  background: rgba(var(--kelp-50-rgb), 0.95);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.artisanal-product-wishlist.active {
  opacity: 1;
  transform: translateY(0);
}

.artisanal-product-wishlist.animating .bookmark-icon {
  animation: bookmark-pulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bookmark-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Product details styling */
.artisanal-product-details {
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.artisanal-product-title {
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 0.35rem;
  letter-spacing: var(--letter-spacing-normal);
  transition: color 0.3s ease;
  text-align: center;
}

.artisanal-product-card:hover .artisanal-product-title {
  color: var(--color-accent-primary);
}

.artisanal-product-subtitle {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: var(--font-weight-light);
  color: var(--color-text-tertiary);
  margin: 0 0 0.75rem;
  letter-spacing: var(--letter-spacing-normal);
  text-align: center;
}

.artisanal-product-line {
  width: 40px;
  height: 1px;
  background-color: var(--color-accent-primary);
  margin: 1rem auto 1.5rem;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.artisanal-product-card:hover .artisanal-product-line {
  width: 80px;
}

.artisanal-product-price-container {
  position: relative;
  text-align: center;
  padding-top: 0.5rem;
}

.artisanal-product-price {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  margin: 0 0 1.25rem;
  letter-spacing: var(--letter-spacing-normal);
}

.artisanal-view-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-primary);
  transition: color 0.3s ease;
}

.artisanal-product-card:hover .artisanal-view-details {
  color: var(--color-accent-primary);
}

.artisanal-view-details svg {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.artisanal-product-card:hover .artisanal-view-details svg {
  transform: translateX(5px);
}

/* Color variants styling */
.artisanal-color-variants-container {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.artisanal-color-variants {
  display: flex;
  gap: 12px;
  background-color: rgba(var(--kelp-50-rgb), 0.85);
  /* backdrop-filter: blur(10px); */
  border-radius: 30px;
  padding: 10px 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.artisanal-variant-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  border: 1px solid transparent;
}

.artisanal-variant-dot:hover {
  transform: scale(1.3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.artisanal-variant-dot.active {
  box-shadow: 0 0 0 2px rgba(var(--kelp-50-rgb), 0.9), 0 0 0 3px var(--color-accent-primary);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .artisanal-product-title {
    font-size: 1.05rem;
  }
  
  .artisanal-product-subtitle,
  .artisanal-product-price {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .artisanal-product-image-container {
    aspect-ratio: 2/3;
  }
  
  .artisanal-product-wishlist {
    opacity: 1;
    transform: translateY(0);
    width: 38px;
    height: 38px;
    top: 15px;
    right: 15px;
  }
  
  .artisanal-product-title {
    font-size: 1rem;
  }
  
  .artisanal-product-subtitle {
    font-size: 0.85rem;
  }
  
  .artisanal-product-price {
    font-size: 0.9rem;
  }
  
  .artisanal-color-variants {
    padding: 8px 15px;
  }
  
  .artisanal-variant-dot {
    width: 18px;
    height: 18px;
  }
  
  .artisanal-image-inner::before {
    inset: 8px;
    opacity: 1;
  }
}

/* Advanced animation overrides */
@media (prefers-reduced-motion: reduce) {
  .artisanal-product-card,
  .artisanal-product-card:hover,
  .artisanal-product-image,
  .artisanal-product-wishlist,
  .artisanal-product-info,
  .artisanal-variant-dot,
  .artisanal-image-inner::before,
  .artisanal-product-line,
  .artisanal-view-details svg {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  
  .artisanal-product-wishlist,
  .artisanal-image-inner::before {
    opacity: 1 !important;
  }
}

/* Special hover effect for premium/luxury products */
.artisanal-product-card[data-premium="true"] .artisanal-image-inner::before {
  border-color: rgba(var(--gold-rgb), 0.5);
}

.artisanal-product-card[data-premium="true"]:hover .artisanal-image-inner::before {
  border-width: 2px;
}

.artisanal-product-card[data-premium="true"] .artisanal-product-line {
  background-color: var(--color-accent-primary);
}

/* Custom animation for hover state */
.artisanal-product-card:hover .artisanal-product-image {
  /* animation: subtle-zoom 8s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */
}

@keyframes subtle-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
} /* Direct background fixes for hero section */
.hero-section .swiper-slide {
  background-color: transparent !important;
}

.hero-section .hero-slide {
  background-color: inherit !important;
}

.hero-background-base {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

/* Ensure swiper doesn't override our styles */
.swiper-wrapper, .swiper, .swiper-container {
  background-color: transparent !important;
}

/* Ensure proper stacking order */
.hero-content {
  z-index: 10 !important;
  position: relative !important;
}

.hero-text {
  z-index: 10 !important;
}

.hero-image-container {
  z-index: 10 !important;
}

/* High-specificity selectors to ensure backgrounds show */
body .hero-section .hero-slide[data-theme="light"],
body .hero-section .hero-slide[data-theme="dark"],
body .hero-section .hero-slide[data-theme="gold"],
body .hero-section .hero-slide[data-theme="sage"],
body .hero-section .hero-slide[data-theme="olive"],
body .hero-section .hero-slide[data-theme="clay"],
body .hero-section .hero-slide[data-theme="sand"] {
  position: relative !important;
  /* Remove overflow hidden to allow scrolling */
} /* =================== BRANDED LOADING COMPONENT =================== */

/* Ensure loading overlay is not affected by parent containers */
.branded-loading-overlay * {
  box-sizing: border-box;
}

/* Overlay variant - full screen - Enhanced to ensure complete coverage */
.branded-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: visible;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.branded-loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Inline variant - within content */
.branded-loading-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  animation: brandedLoadingFadeIn 0.3s ease-out;
}

/* Logo container with pulse rings */
.branded-loading-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  /* Removed min-height: 100vh to prevent layout shifts */
}

/* Pulse rings animation */
.branded-loading-pulse-ring {
  position: absolute;
  border: 2px solid rgba(var(--kelp-600-rgb), 0.2);
  border-radius: 50%;
  /* animation: brandedLoadingPulse 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; - DISABLED FOR PERFORMANCE */
}

.branded-loading-pulse-ring:nth-child(2) {
  animation-delay: 0.3s;
}

.branded-loading-pulse-ring:nth-child(3) {
  animation-delay: 0.6s;
}

.branded-loading-pulse-ring:nth-child(4) {
  animation-delay: 0.9s;
}

/* Message styling */
.branded-loading-message { display: none; }

/* Animations */
@keyframes brandedLoadingFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes brandedLoadingSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes brandedLoadingLogoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes brandedLoadingPulse {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

@keyframes brandedLoadingMessageFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .branded-loading-overlay {
    /* Ensure mobile viewport coverage */
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
  }
  
  .branded-loading-content {
    gap: 1rem;
    width: 100%;
    height: 100%;
  }
  
  .branded-loading-message {
    font-size: 0.8rem;
  }
  
  .branded-loading-inline {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .branded-loading-content {
    gap: 0.75rem;
  }
  
  .branded-loading-message {
    font-size: 0.75rem;
  }
  
  .branded-loading-inline {
    padding: 1rem;
  }
}



/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .branded-loading-overlay,
  .branded-loading-inline,
  .branded-loading-content,
  .branded-loading-logo-container,
  .branded-loading-message {
    animation: none;
  }
  
  .branded-loading-pulse-ring {
    animation: none;
    opacity: 0.3;
  }
  
  .branded-loading-logo-container {
    animation: none;
  }
} /* Add this to your app.css or a global styles file */
/* Global language switch overlay */
/* Removed legacy language-switching overlays and spinners to improve performance. */

/* Language change overlay (logo-centered, smooth transitions) */
.language-change-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No extra background; pure minimal overlay */
  background: var(--kelp-50);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 100000; /* above content */
  min-height: 100vh;
}

.language-change-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.language-change-overlay-inner {
  transform: translateY(8px);
  transition: transform 220ms ease, opacity 220ms ease;
  opacity: 0.95;
}

.language-change-overlay.visible .language-change-overlay-inner {
  transform: translateY(0);
}

.language-change-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 12px;
 
}

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

/* Add this to your CSS for the retranslate button */
.missing-translations-warning {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background-color: rgba(255, 250, 230, 0.95);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  border: 1px solid #f0c674;
}

.retranslate-button {
  background-color: #2b90d9;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.retranslate-button:hover {
  background-color: #2577b1;
}

.retranslate-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* Removed unused loading spinner styles *//* Clean Centered Maintenance Overlay */
.maint-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--kelp-100-rgb), 0.95);
  z-index: 999999;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.maint-card {
  max-width: 500px;
  width: 100%;
  border-radius: 3px;
  color: var(--kelp-800);
  padding: 2rem;
}

/* Header */
.maint-header {
  text-align: center;
}

.maint-logo { 
  display: flex; 
  justify-content: center; 
  margin-bottom: 1.5rem; 
}

.maint-title { 
  font-size: 14px;
  margin: 0 0 1rem 0; 
  color: var(--kelp-800); 
  font-weight: 600;
}

.maint-desc { 
  font-size: 0.875rem;
  color: var(--kelp-600); 
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .maint-root {
    padding: 1rem;
  }
  
  .maint-card {
    padding: 1.5rem;
  }
  
  .maint-title {
    font-size: 13px;
  }
  
  .maint-desc {
    font-size: 0.75rem;
  }
  
  .maint-logo {
    margin-bottom: 1.25rem;
  }
}
/* =============================================
   Database Error Overlay Styles
   ============================================= */

.database-error-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--kelp-100-rgb), 0.9);
  z-index: 9999;
  backdrop-filter: blur(10px) ;
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.error-overlay-content {
  background: rgba(var(--kelp-50-rgb), 0.7);
  border-radius: 3px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Header */
.error-overlay-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.error-title {
  font-size: 14px;
  color: var(--kelp-800);
  margin: 0;
  line-height: 1.3;
}

/* Body */
.error-overlay-body {
  margin-bottom: 2rem;
}

.error-description {
  font-size: 0.875rem;
  color: var(--kelp-600);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}


/* Actions */
.error-overlay-actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  width: 100%;

}

.error-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 3px;
  font-size: 12px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.error-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-button.primary {
  background: var(--kelp-950);
  color:var(--gold-dark);
  width: 50%;
}

.error-button.primary:hover:not(:disabled) {
  background: var(--kelp-700);
  transform: translateY(-1px);
}

.error-button.secondary {
  background: rgba(var(--kelp-100-rgb), 0.5);
  color: var(--kelp-500);
  width: 50%;

}

.error-button.secondary:hover:not(:disabled) {
  background: var(--kelp-200);

}


.button-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.button-spinner {
  width: 1rem;
  height: 1rem;
 
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.retry-count {
  font-size: 0.875rem;
  opacity: 0.8;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
  .database-error-overlay {
    padding: 1rem;
  }
  
  .error-overlay-content {
    padding: 1.5rem;
    max-height: 95vh;
  }
  
  .error-title {
    font-size: 12px;
  }
  
  .error-description {
    font-size: 10px;
  }
  
  .error-overlay-actions {
    gap: 0.5rem;
  }
  
  .error-button {
    padding: 0.625rem 1.25rem;
    font-size: 10px;
  }
}






/* Smooth text rendering for translated content */
.translate-text {
  transition: opacity 0.2s ease-in-out;
}

.translate-text.translating {
  opacity: 0.7;
}
.featured-collections-section {
  position: relative;
  overflow: hidden; /* Prevent horizontal scrollbars */
  min-height: 100vh; /* Ensure minimum height */
}

.collections-showcase {
  display: flex;
  /* Removed will-change and backface-visibility that cause Safari chunky scroll */
}

.collection-slide {
  flex-shrink: 0;
  /* Removed will-change that causes Safari chunky scroll */
}

/* Prevent pin spacer from creating empty overlays */
.pin-spacer {
  max-height: 200vh; /* Limit spacer height */
}

/* Ensure proper stacking context for overlays */
.collection-info-overlay {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  /* Removed will-change that causes Safari chunky scroll */
}



/* Prevent heavy repaints during scroll for large containers */
.is-scrolling .section-container {
  will-change: auto !important;
}/* Section wrapper for absolute positioning */
.section-wrapper {
  position: relative;
  width: 100%;
  overflow: visible; /* Allow dividers to extend beyond wrapper */
}

/* Section container positioning for dividers */
.section-container {
  position: relative;
  overflow: visible; /* Allow dividers to extend beyond container */
}

/* Luxurious Section Divider Styling - Optimized for Framer Motion */
.section-divider {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  z-index: 25; /* Higher z-index to overlap both sections */
  background: transparent; /* Ensure no background blocks visibility */
  pointer-events: none; /* Let clicks pass through to underlying content */
}

/* Top divider - positioned at the top edge of the section below */
.section-divider.divider-top {
  position: relative;
  margin-top: -40px; /* Pull up into the section above */
  margin-bottom: -40px; /* Push down into current section */
}

/* Bottom divider - positioned at the bottom edge of the section above */
.section-divider.divider-bottom {
  position: relative;
  margin-top: -40px; /* Pull up into the current section */
  margin-bottom: -40px; /* Push down into the section below */
}

.divider-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Main horizontal accent lines - Optimized for Framer Motion */
.divider-accent-line {
  height: 1px;
  background: linear-gradient(
    to var(--direction, right),
    transparent 0%,
    rgba(var(--kelp-400-rgb), 0.2) 20%,
    rgba(var(--kelp-500-rgb), 0.45) 50%,
    rgba(var(--kelp-400-rgb), 0.2) 80%,
    transparent 100%
  );
  flex: 1;
  transform-origin: center;
  position: relative;
  /* Remove will-change for better performance */
}

/* Add cut edges to lines using pseudo-elements */
.divider-accent-line::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: transparent;
  border: 1px solid rgba(var(--kelp-500-rgb), 0.4);
  transform: rotate(45deg) scale(0.8);
  opacity: 0.7;
}

.divider-accent-line.left {
  --direction: right;
  margin-right: 30px;
}

.divider-accent-line.left::after {
  right: -4px;
  top: -3.5px;
}

.divider-accent-line.right {
  --direction: left;
  margin-left: 30px;
}

.divider-accent-line.right::after {
  left: -4px;
  top: -3.5px;
}

/* Center element with enhanced morphing capability - Optimized */
.divider-center {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  pointer-events: auto;
  z-index: 5;
  /* Remove will-change for better performance */
}

/* Morph shape container - Optimized for Framer Motion */
.divider-morph-shape {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--kelp-400-rgb), 0.08); /* Starting background color */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform-origin: center;
  /* Refined gradient and glow */
  background: radial-gradient(
    circle at center,
    rgba(var(--kelp-400-rgb), 0.25) 0%,
    rgba(var(--kelp-300-rgb), 0.15) 100%
  );
  /* Enhanced shadow effects */
  box-shadow: 
    0 0 25px rgba(var(--kelp-900-rgb), 0.15),
    inset 0 0 15px rgba(var(--kelp-400-rgb), 0.08);
  overflow: hidden;
  /* Remove will-change and transition for Framer Motion control */
}

/* Add glow effect for logo state */
.divider-morph-shape::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    circle at center,
    rgba(var(--kelp-400-rgb), 0.15),
    transparent 70%
  );
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  /* Remove transition for Framer Motion control */
}

/* Text mode style with different background */
.text-mode-active .divider-morph-shape {
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-50-rgb), 0.2) 0%,
    rgba(var(--kelp-100-rgb), 0.15) 100%
  );
  box-shadow: 
    0 0 30px rgba(var(--kelp-400-rgb), 0.1),
    inset 0 0 20px rgba(var(--kelp-200-rgb), 0.05);
}

/* Adjust glow for text mode */
.text-mode-active .divider-morph-shape::before {
  opacity: 0.4;
  background: radial-gradient(
    circle at center,
    rgba(var(--kelp-200-rgb), 0.1),
    transparent 70%
  );
}

/* Separate border element - Optimized */
.divider-shape-border {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--kelp-400-rgb), 0.3);
  clip-path: inherit;
  z-index: 4;
  pointer-events: none;
  /* Remove will-change for better performance */
  /* Add subtle inner light effect */
  box-shadow: inset 0 0 10px rgba(var(--kelp-100-rgb), 0.1);
}

/* Logo container - Optimized */
.divider-logo-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Remove will-change for better performance */
}

/* Logo styling */
.divider-logo {
  transform: scale(0.9);
  opacity: 0.9;
}

/* Text container for morphing - Optimized */
.divider-text-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* Remove will-change for better performance */
}

/* Text styling - Optimized */
.divider-text {
  font-family: 'Optima', 'Playfair Display', 'Crimson Text', 'Source Serif Pro', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-dark);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  /* Remove will-change and transition for Framer Motion control */
}

/* Shine styling - Controlled by Framer Motion only */
.divider-shape-shine {
  position: absolute;
  inset: -5px;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(var(--kelp-100-rgb), 0.05) 25%,
    rgba(var(--kelp-200-rgb), 0.2) 50%,
    rgba(var(--kelp-100-rgb), 0.05) 75%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  filter: blur(2px);
  /* Remove will-change and animation for Framer Motion control */
}

/* Hover effects - Static only */
.divider-center:hover .divider-morph-shape {
  background: radial-gradient(
    circle at center,
    rgba(var(--kelp-50-rgb), 0.25) 0%,
    rgba(var(--kelp-100-rgb), 0.15) 100%
  );
  box-shadow: 
    0 0 25px rgba(var(--kelp-400-rgb), 0.15),
    inset 0 0 15px rgba(var(--kelp-100-rgb), 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-divider {
    height: 60px;
  }
  
  .section-divider.divider-top {
    margin-top: -35px; /* Pull up into the section above */
    margin-bottom: -35px; /* Push down into current section */
  }
  
  /* Dark theme responsive adjustments */
  .section-divider.theme-dark.divider-top {
    margin-top: -35px;
    margin-bottom: -35px;
  }
  
  .section-divider.theme-dark.divider-bottom {
    margin-top: -35px; /* Pull up into the current section */
    margin-bottom: -35px;
  }
  
  .divider-accent-line.left {
    margin-right: 20px;
  }
  
  .divider-accent-line.right {
    margin-left: 20px;
  }
  
  .divider-center {
    width: 40px;
    height: 40px;
  }
  
  .divider-text {
    font-size: 8px;
  }
  
  .divider-accent-line::after {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 480px) {
  .section-divider {
    height: 50px;
  }
  
  .section-divider.divider-top {
    margin-top: -30px; /* Pull up into the section above */
    margin-bottom: -30px; /* Push down into current section */
  }
  
  .section-divider.divider-bottom {
    margin-top: -25px; /* Pull up into the current section */
    margin-bottom: 0; /* Don't push into the section below */
  }
  
  /* Dark theme small mobile adjustments */
  .section-divider.theme-dark.divider-top {
    margin-top: -25px !important;
    margin-bottom: -25px !important;
  }
  
  .section-divider.theme-dark.divider-bottom {
    margin-top: -30px; /* Pull up into the current section */
    margin-bottom: 0;
  }
  
  .divider-accent-line.left {
    margin-right: 15px;
  }
  
  .divider-accent-line.right {
    margin-left: 15px;
  }
  
  .divider-center {
    width: 36px;
    height: 36px;
  }
  
  .divider-text {
    font-size: 7px;
  }
  
  .divider-accent-line::after {
    width: 5px;
    height: 5px;
  }
}

/* Dark theme divider adjustments */
.section-divider.theme-dark .divider-accent-line {
  height: 1px; /* Keep height consistent with light theme */
  /* Change background to use dark kelp gradient */
  background: linear-gradient(
    to var(--direction, right),
    transparent 0%,
    rgba(var(--kelp-600-rgb), 0.25) 20%,
    rgba(var(--kelp-700-rgb), 0.5) 50%,
    rgba(var(--kelp-600-rgb), 0.25) 80%,
    transparent 100%
  );
  /* Adjust drop shadow to a subtle dark shadow */
  filter: drop-shadow(0 0 3px rgba(var(--kelp-900-rgb), 0.4));
  opacity: 0.9; /* Slightly reduced opacity for subtlety */
}

/* Adjust diamond accents on the lines for dark theme */
.section-divider.theme-dark .divider-accent-line::after {
  /* Change border color to a mid-dark kelp */
  border-color: rgba(var(--kelp-700-rgb), 0.6);
  border-width: 1px; /* Keep border width consistent */
  /* Keep dark background */
  background-color: rgba(var(--kelp-800-rgb), 0.8);
  /* Remove gold shadow, add subtle dark shadow */
  box-shadow: 0 0 5px rgba(var(--kelp-900-rgb), 0.3);
  width: 8px; /* Keep size consistent */
  height: 8px; /* Keep size consistent */
  transform: rotate(45deg) scale(0.8); /* Keep transform consistent */
  opacity: 0.7; /* Adjust opacity */
}

/* Sophisticated center element - Remains Gold/Dark Kelp */
.section-divider.theme-dark .divider-morph-shape {
  background: var(--kelp-950);
}

/* Refined golden border - Remains Gold */
.section-divider.theme-dark .divider-shape-border {
  border-color: var(--gold-dark);
  border-width: 1.5px;
}

/* Premium gold text - Remains Gold */
.section-divider.theme-dark .divider-text {
  color: var(--gold-dark);
  font-weight: var(--font-weight-light);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.18em;
  font-size: 8px; /* Reduced font size from default 10px */
}

/* Luxury glow effect - Remains Gold-based */
.section-divider.theme-dark .divider-morph-shape::before {
  background: radial-gradient(
    circle at center,
    rgba(var(--kelp-400-rgb), 0.2),
    transparent 70%
  );
  opacity: 1;
}

/* Rich gold shine effect - Remains Gold */
.section-divider.theme-dark .divider-shape-shine {
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(var(--kelp-200-rgb), 0.06) 20%,
    rgba(var(--kelp-300-rgb), 0.2) 50%,
    rgba(var(--kelp-200-rgb), 0.06) 80%,
    transparent 100%
  );
  filter: blur(0.5px); /* Crisper for more luxurious feel */
  opacity: 0.7;
}

/* Text mode with luxury dark background - Updated to Gold */
.section-divider.theme-dark.text-mode-active .divider-morph-shape {
  background: var(--kelp-950);
  box-shadow:
    0 0 30px rgba(var(--kelp-900-rgb), 0.2),
    inset 0 0 20px rgba(var(--kelp-800-rgb), 0.12);
}

/* Gold logo accent - Remains Gold */
.section-divider.theme-dark .divider-logo {
  /* Apply same gold filter approach as chat button logo */
  filter: sepia(100%) saturate(1000%) hue-rotate(30deg) brightness(1.2) drop-shadow(0 0 3px rgba(var(--gold-rgb), 0.35));
}

/* Ensure perfect positioning for dark theme dividers */
.section-divider.theme-dark.divider-top {
  margin-top: -40px; /* Pull up into the section above */
  margin-bottom: -40px; /* Push down into current section */
  z-index: 15;
}

.section-divider.theme-dark.divider-bottom {
  margin-top: -40px; /* Pull up into the current section */
  margin-bottom: 0; /* Don't push into the section below */
  z-index: 15;
}

/* Performance Optimizations - Remove all CSS animations and will-change */
@media (prefers-reduced-motion: reduce) {
  .section-divider * {
    transition: none !important;
    animation: none !important;
  }
}

/* Ensure no infinite animations or memory leaks */
.section-divider * {
  /* Remove all will-change properties for better performance */
  will-change: auto !important;
}/* Hero Feature Divider specific styles - refined positioning */
.hero-feature-divider {
  position: relative;
  margin-top: -40px; /* Pull up exactly to bottom of hero */
  margin-bottom: -40px; /* Push down into features section */
  z-index: 5; /* Reduced to prevent stacking context issues */
  padding: 0;
  pointer-events: none; /* Let clicks through */
  will-change: opacity;
  display: block; /* Ensure visibility */
  min-height: 20px; /* Ensure minimum height */
}

/* Make center elements interactive */
.hero-feature-divider .divider-center {
  pointer-events: auto;
}

/* Enhanced text container with better expansion handling */
.hero-feature-divider .divider-text-container {
  width: 100%; /* Use full width of container */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* Ensure horizontal centering */
  position: absolute;
  top: 0;
  left: 0; /* Remove the 50% left positioning */
  transform: none; /* Remove the translateX(-50%) */
  z-index: 5;
  overflow: visible;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Create room for the expansion with non-breaking vertical space */
.hero-feature-divider.text-mode-active {
  height: 80px; /* Maintain consistent height */
}

/* More elegant morphing container with better expansion handling */
.hero-feature-divider.text-mode-active .divider-morph-shape {
  /* Explicit dimensions with !important to override any competing styles */
  width: 160px;
  height: 40px;
  /* Perfect centering */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Gold background gradient instead of kelp */
  background: linear-gradient(
    135deg,
    rgba(var(--gold-rgb), 0.95) 0%,
    rgba(var(--gold-light-rgb), 0.85) 100%
  );
  /* Enhanced shadow for depth with gold colors */
  box-shadow: 
    0 0 30px rgba(var(--gold-rgb), 0.2),
    inset 0 0 15px rgba(var(--gold-light-rgb), 0.15);
  z-index: 3;
  /* Improved transition for smoother morphing */
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1.15),
              height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1.15),
              background 0.4s ease-in-out,
              clip-path 0.4s cubic-bezier(0.25, 0.1, 0.25, 1.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Elegant line expansion that matches the text box */
.hero-feature-divider.text-mode-active .divider-accent-line {
  /* Add subtle gold tint to expanded lines instead of kelp */
  background: linear-gradient(
    to var(--direction, right),
    transparent 0%,
    rgba(var(--gold-rgb), 0.1) 20%,
    rgba(var(--gold-rgb), 0.3) 50%,
    rgba(var(--gold-rgb), 0.1) 80%,
    transparent 100%
  );
  height: 1.5px;
  transition: width 0.4s cubic-bezier(0.34, 1.36, 0.64, 1); /* Elastic effect */
  will-change: width;
}

/* Ensure the line markers adjust with expansion */
.hero-feature-divider.text-mode-active .divider-accent-line::after {
  opacity: 0.85;
  border-color: var(--gold);
  transition: opacity 0.5s ease;
}

/* Make text display more elegant with cold colors */
.hero-feature-divider .divider-text {
  font-family: 'Optima', 'Playfair Display', 'Crimson Text', 'Source Serif Pro', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-dark);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.9;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  will-change: opacity, transform;
}

/* Ensure the logo container doesn't overlap with text in text mode */
.hero-feature-divider.text-mode-active .divider-logo-container {
  opacity: 0;
  z-index: 2;
}

/* Add subtle pattern to text background for luxury */
.hero-feature-divider.text-mode-active .divider-morph-shape::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(135deg, rgba(var(--gold-rgb), 0.03) 25%, transparent 25%),
    linear-gradient(225deg, rgba(var(--gold-rgb), 0.03) 25%, transparent 25%),
    linear-gradient(315deg, rgba(var(--gold-rgb), 0.03) 25%, transparent 25%),
    linear-gradient(45deg, rgba(var(--gold-rgb), 0.03) 25%, transparent 25%);
  background-size: 10px 10px;
  opacity: 0.6;
  z-index: -1;
}

/* Responsive adjustments to ensure positioning at different screen sizes */
@media (max-width: 1200px) {
  .hero-feature-divider {
    margin-top: -38px;
    margin-bottom: -38px;
  }
}

@media (max-width: 768px) {
  .hero-feature-divider {
    margin-top: -35px;
    margin-bottom: -35px;
  }
  
  .hero-feature-divider.text-mode-active .divider-morph-shape {
    width: 140px;
    height: 36px;
  }
  
  .hero-feature-divider .divider-text {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .hero-feature-divider {
    margin-top: -30px;
    margin-bottom: -25px !important;
  }
  
  .hero-feature-divider.text-mode-active .divider-morph-shape {
    width: 120px;
    height: 32px;
  }
  
  .hero-feature-divider .divider-text {
    font-size: 8px;
  }
}

/* Clip path transitions for different keywords */
.hero-feature-divider[data-keyword="Excellence"] .divider-morph-shape {
  --expand-width: 160px;
  --expand-height: 40px;
}

.hero-feature-divider[data-keyword="Elegance"] .divider-morph-shape {
  --expand-width: 150px;
  --expand-height: 42px;
}

.hero-feature-divider[data-keyword="Craftsmanship"] .divider-morph-shape {
  --expand-width: 180px; /* Longer word needs more space */
  --expand-height: 40px;
}

/* Define specific color schemes for each keyword */
.hero-feature-divider[data-keyword="Excellence"] .divider-text {
  color: var(--gold-dark);
}

.hero-feature-divider[data-keyword="Elegance"] .divider-text {
  color: var(--gold-dark);
  letter-spacing: 0.2em; /* More spacious */
}

.hero-feature-divider[data-keyword="Craftsmanship"] .divider-text {
  color: var(--gold-dark);
  letter-spacing: 0.12em; /* Slightly tighter for longer word */
  font-size: 10px; /* Slightly smaller */
}

/* Subtle background variations for each keyword */
.hero-feature-divider[data-keyword="Excellence"].text-mode-active .divider-morph-shape {
  background: linear-gradient(
    135deg,
    rgba(var(--gold-rgb), 0.95) 0%,
    rgba(var(--gold-light-rgb), 0.85) 100%
  );
}

.hero-feature-divider[data-keyword="Elegance"].text-mode-active .divider-morph-shape {
  background: linear-gradient(
    135deg,
    rgba(var(--gold-rgb), 0.9) 0%,
    rgba(var(--gold-light-rgb), 0.8) 100%
  );
}

.hero-feature-divider[data-keyword="Craftsmanship"].text-mode-active .divider-morph-shape {
  background: linear-gradient(
    135deg,
    rgba(var(--gold-rgb), 0.95) 0%,
    rgba(var(--gold-light-rgb), 0.85) 100%
  );
}

/* Enhanced shine positions for each keyword */
.hero-feature-divider[data-keyword="Excellence"] .divider-shape-shine {
  transform-origin: left center;
}

.hero-feature-divider[data-keyword="Elegance"] .divider-shape-shine {
  transform-origin: center center;
}

.hero-feature-divider[data-keyword="Craftsmanship"] .divider-shape-shine {
  transform-origin: right center;
}

/* Add these styles for scroll-controlled divider */
.hero-feature-divider.scroll-controlled {
  transition: opacity 0.3s ease;
  opacity: 1;
}

/* Different transition timings for scroll-controlled mode */
.hero-feature-divider.scroll-controlled .divider-morph-shape {
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.15),
              height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.15),
              clip-path 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.15);
}

/* Special styling for scroll progress */
.hero-feature-divider.scroll-controlled .divider-accent-line {
  transition: width 0.5s cubic-bezier(0.34, 1.36, 0.64, 1);
}

/* Ensure character animations work with scrolling */
.hero-feature-divider.scroll-controlled .divider-text .char {
  display: inline-block;
  min-width: 0.5em;
  text-align: center;
}

/* Add these transitions to the HeroFeatureDivider.css file */

/* Improve text container for smoother keyword switching */
.hero-feature-divider .divider-text-container {
  position: relative;
  width: 100%;
  left: 0;
  transform: none;
}

/* Enhanced character styling for better transitions */
.hero-feature-divider .divider-text .char {
  display: inline-block;
  min-width: 0.3em; /* Reduce min-width to avoid pushing characters */
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity, filter;
}

/* Ensure each keyword type has sufficient room */
.hero-feature-divider[data-keyword="Craftsmanship"] .divider-text-container {
  width: 220px; /* Ensure there's more room for longer text */
}

/* During keyword transitions, ensure visual stability */
.hero-feature-divider.text-mode-active.is-transitioning .divider-morph-shape {
  transform: translate(-50%, -50%);
  transition: width 0.5s ease-out, height 0.5s ease-out;
}

/* Add these scroll performance optimizations */

/* Optimize animations during scroll */
.hero-feature-divider.scroll-controlled {
  will-change: opacity;
  z-index: 25;
}

/* When scrolling is idle, release will-change to save memory */
.hero-feature-divider.scroll-settled {
  will-change: auto;
  transition: all 0.3s ease;
}

/* Optimize paint operations */
.hero-feature-divider .divider-morph-shape {

  transform: translateZ(0);
}

/* Optimize character animations during scroll */
.is-scrolling .hero-feature-divider .divider-text .char {
  transition: none;
  animation-duration: 0.1s;
}

/* Prevent repaint during transitions */
.hero-feature-divider .divider-morph-shape,
.hero-feature-divider .divider-text-container,
.hero-feature-divider .divider-accent-line {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Add these improved adjustments for text positioning */
.hero-feature-divider.text-mode-active .divider-text-container {
  /* Set specific dimensions for the text mode */
  width: auto;
  max-width: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Add more targeted styling for the different keywords to ensure proper centering */
.hero-feature-divider[data-keyword="Excellence"] .divider-text {
  transform: translateX(0); /* No adjustment needed */
}

.hero-feature-divider[data-keyword="Elegance"] .divider-text {
  transform: translateX(0); /* No adjustment needed */
}

.hero-feature-divider[data-keyword="Craftsmanship"] .divider-text {
  transform: translateX(0); /* No adjustment needed */
}

/* Add these styles for better animation control */
.hero-feature-divider {
  position: relative;
  margin-top: -40px; /* Pull up exactly to bottom of hero */
  margin-bottom: -40px; /* Push down into features section */
  z-index: 5; /* Reduced to prevent stacking context issues */
  padding: 0;
  pointer-events: none; /* Let clicks through */
}

/* Improve animation state management */
.hero-feature-divider.animating {
  /* Prevent new animations from starting while one is in progress */
  pointer-events: none;
}

/* Add style for animation in progress */
.hero-feature-divider.text-mode-active.is-transitioning .divider-text .char {
  transition-delay: 0s;
}

/* Improved animation states for keyword transitions */
.hero-feature-divider.text-mode-active[data-transition-state="exit"] .divider-text .char {
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, filter 0.2s ease-in;
}

.hero-feature-divider.text-mode-active[data-transition-state="enter"] .divider-text .char {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, filter 0.3s ease-out;
}

/* Prevent multiple animations by disabling transitions during scroll */
.fast-scrolling .hero-feature-divider .divider-morph-shape,
.fast-scrolling .hero-feature-divider .divider-text .char,
.fast-scrolling .hero-feature-divider .divider-accent-line {
  transition: none;
}

/* Optimize character animations during scroll */
.is-scrolling .hero-feature-divider .divider-text .char {
  transition: none;
  animation-duration: 0.1s;
}

/* More targeted styling for different keywords to ensure proper centering */
.hero-feature-divider[data-keyword="Excellence"] .divider-text {
  transform: translateX(0); /* No adjustment needed */
}

.hero-feature-divider[data-keyword="Elegance"] .divider-text {
  transform: translateX(0); /* No adjustment needed */
}

.hero-feature-divider[data-keyword="Craftsmanship"] .divider-text {
  transform: translateX(0); /* No adjustment needed */
}

/* Ensure smooth width changes during scrolling */
.hero-feature-divider .divider-accent-line {
  transition: width 0.4s cubic-bezier(0.34, 1.36, 0.64, 1);
  will-change: width;
}

/* Better state management for scroll-controlled mode */
.hero-feature-divider.scroll-controlled {
  transition: opacity 0.3s ease;
  opacity: 1;
}

/* Prevent visual glitches during transitions */
.hero-feature-divider.scroll-controlled.is-transitioning .divider-accent-line {
  transition: none;
}

/* Ensure text stays readable during transitions */
.hero-feature-divider .divider-text {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* When scrolling is idle, release will-change to save memory */
.hero-feature-divider.scroll-settled {
  will-change: auto;
  transition: all 0.3s ease;
} /* Minimalist High-End Variant Design */
.variant-group {
  margin-bottom: 1.5rem;
  position: relative;
  padding: 0;
  width: 100%;
}

.variant-group__title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  width: 100%;
  padding-bottom: 0;
  border-bottom: none;
}

.variant-group__title-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  position: relative;
  padding: 0;
}

/* Elegant lines for title content - only for material groups */
.variant-group[data-group-type="material"] .variant-group__title-content::before {
  content: '';
  position: absolute;
  top: 0;
  right: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(270deg, transparent, rgba(var(--kelp-400-rgb), 0.3), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.variant-group[data-group-type="material"] .variant-group__title-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(270deg, transparent, rgba(var(--kelp-400-rgb), 0.3), transparent);
  opacity: 0.6;
  pointer-events: none;
}

/* When scroll starts, change direction to left */
.variant-group[data-group-type="material"] .variant-group__title-content.scroll-started::before,
.variant-group[data-group-type="material"] .variant-group__title-content.scroll-started::after {
  right: auto;
  left: 10%;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
}

/* RTL support for title content lines */
[dir="rtl"] .variant-group[data-group-type="material"] .variant-group__title-content::before,
[dir="rtl"] .variant-group[data-group-type="material"] .variant-group__title-content::after {
  background: linear-gradient(270deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
}

.variant-group__title {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kelp-700);
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1.3;
}

.variant-group__title-selection {
  font-weight: 400;
  font-size: 0.7rem;
  color: rgba(var(--kelp-800-rgb), 0.7);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.variant-group__title-arrow {
  width: 12px;
  height: 12px;
  color: var(--kelp-600);
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.variant-group__title-arrow:hover {
  transform: translateX(2px);
}

/* RTL support for arrow */
[dir="rtl"] .variant-group__title-arrow {
  margin-left: 0;
  margin-right: 0.5rem;
  transform: scaleX(-1);
}

[dir="rtl"] .variant-group__title-arrow:hover {
  transform: scaleX(-1) translateX(-2px);
}

.variant-group__selected-value {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  color: var(--kelp-700);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, rgba(var(--kelp-50-rgb), 0.8), rgba(var(--kelp-100-rgb), 0.6));
  border-radius: 6px;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.05),
    inset 0 1px 1px rgba(255,255,255,0.8);
  position: relative;
}

.variant-group__selected-value::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  border-radius: inherit;
  pointer-events: none;
}

.variant-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Dynamic text below options */
.variant-dynamic-text {
  margin-bottom: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

.variant-dynamic-text-content {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  color: var(--kelp-500);
  font-weight: 300;
  line-height: 1.4;
}

/* Material grid inspired by varient.html with elegant styling */
.material-grid {
  display: flex;
  flex-direction: row;
  gap: 12px;
  position: relative;
  padding: 0.5rem 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.material-grid::-webkit-scrollbar {
  display: none;
}

/* Elegant lines removed from color swatches - only kept for material container */

/* Material container with scroll arrows */
.material-container-with-arrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  position: relative;
}

.material-scroll-arrow {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--kelp-600);
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.material-scroll-arrow:hover:not(:disabled) {
  background: rgba(255,255,255,1);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.2);
}

.material-scroll-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: none;
  border: none;
}

.material-scroll-arrow:disabled svg {
  transform: rotate(180deg);
}

.material-scroll-arrow svg {
  width: 12px;
  height: 12px;
}

.material-scroll-arrow::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg, transparent, var(--kelp-400), transparent);
  opacity: 0.6;
}

/* Inline material grid - positioned next to title with scrolling */
.material-grid-inline {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  max-width: 200px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 15px;
  position: relative;
}

/* Auto x movement for more than 3 items */
.material-grid-inline[data-item-count="4"],
.material-grid-inline[data-item-count="5"],
.material-grid-inline[data-item-count="6"] {
  animation: autoScroll 8s infinite linear;
}

@keyframes autoScroll {
  0% { transform: translateX(0); }
  25% { transform: translateX(-20px); }
  50% { transform: translateX(-40px); }
  75% { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}

/* Pause animation on hover */
.material-grid-inline:hover {
  animation-play-state: paused;
}

/* RTL support for material container */
[dir="rtl"] .material-container-with-arrow {
  margin-left: 0;
  margin-right: auto;
  flex-direction: row-reverse;
}

[dir="rtl"] .material-scroll-arrow-left svg {
  transform: scaleX(-1);
}

[dir="rtl"] .material-scroll-arrow-right svg {
  transform: scaleX(-1);
}

.material-grid-inline::-webkit-scrollbar {
  display: none;
}

/* Elegant lines for inline material selection */
.material-grid-inline::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.material-grid-inline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.material-option-inline {
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 1px;
  flex-shrink: 0;
  background: rgba(var(--kelp-50-rgb), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: var(--kelp-800);
  font-weight: 500;
  letter-spacing: 0.1px;
  overflow: hidden;
}

.material-option-inline-text {
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--kelp-800);
  text-align: center;
  line-height: 1;
  z-index: 2;
  position: relative;
  text-transform: none !important;
}

/* Material option arrow removed */

.material-option-inline:hover {
  transform: scale(1.05);
  border-color: rgba(var(--kelp-500-rgb), 0.4);
  box-shadow: 0 2px 8px rgba(var(--kelp-200-rgb), 0.3);
}

.material-option-inline.selected {
  transform: scale(1.1);
  border: 1px solid var(--gold);
  outline: none;
 
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.1) 0%, 
    rgba(var(--gold-rgb), 0.05) 50%, 
    rgba(var(--gold-rgb), 0.1) 100%);
}

/* Apply metallic backgrounds to inline options with blended textures */
.material-option-inline.yellow-gold {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 235, 59, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 193, 7, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #f4f1ed 0%, #f8f6f1 100%);
}

.material-option-inline.yellow-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0px, rgba(255, 215, 0, 0.08) 1px, transparent 2px);
  border-radius: inherit;
}

.material-option-inline.white-gold {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 40%),
    linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

.material-option-inline.rose-gold {
  background:
    radial-gradient(circle at 25% 75%, rgba(238,130,98,0.2) 0%, transparent 50%),
    linear-gradient(135deg, #f2ebe8 0%, #f8f1ee 100%);
}

.material-option-inline.sterling-silver {
  background:
    radial-gradient(circle at 40% 40%, rgba(192,192,192,0.3) 0%, transparent 40%),
    linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
}

.material-option-inline.platinum {
  background:
    radial-gradient(circle at 50% 20%, rgba(169,169,169,0.25) 0%, transparent 60%),
    linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
}

.material-option-inline.titanium {
  background:
    radial-gradient(circle at 30% 70%, rgba(105,105,105,0.2) 0%, transparent 50%),
    linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
}

.material-option-inline.steel {
  background:
    radial-gradient(circle at 35% 35%, rgba(160,160,160,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #f3f3f3 0%, #e9e9e9 100%);
}

.material-option {
  aspect-ratio: 1;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--kelp-800);
  font-weight: 500;
  letter-spacing: 0.2px;
  overflow: visible;
  background: rgba(var(--kelp-50-rgb), 0.8);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(var(--kelp-200-rgb), 0.1);
  flex-shrink: 0;
}

/* RTL Support for inline material grid */
[dir="rtl"] .material-grid-inline {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .material-grid-inline::before,
[dir="rtl"] .material-grid-inline::after {
  background: linear-gradient(270deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
}

@media (max-width: 768px) {
  .material-option {
    width: 40px;
    height: 40px;
    font-size: 0.55rem;
  }
  .material-grid{
    display: flex;
    flex-direction: row;
    gap: 5px;
  }
  .variant-group__title {
    font-size: 0.85rem;
  }
  .material-option-inline {
    width: 42px;
    height: 42px;
  }
  .material-option-inline-text {
    font-size: 0.45rem;
  }
  .material-option-arrow {
    font-size: 0.35rem;
    top: 1px;
    right: 1px;
  }
  .material-grid-inline {
    max-width: 200px;
    gap: 6px;
  }
}

.material-option::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid transparent;
  opacity: 0;
}

.material-option:hover {
  transform: scale(0.95);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Hover outer border for materials - adjusted for larger size */
.material-option:hover::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 1px solid #000;
  border-radius: 1px;
  opacity: 1;
  pointer-events: none;
}


.material-option.selected {
  transform: scale(1);
  position: relative;
  box-shadow: none;
  border: 1px solid #f0f0f0;
}

/* Simple outer border for selected materials - same as color swatches */
.material-option.selected::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 1px solid #000;
  border-radius: 9px;
  opacity: 1;
  pointer-events: none;
}

/* Metallic blended backgrounds */
.yellow-gold {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 235, 59, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 193, 7, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #f4f1ed 0%, #f8f6f1 100%);
}
.yellow-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0px, rgba(255, 215, 0, 0.08) 1px, transparent 2px);
}

.white-gold {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 40%),
    linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

.rose-gold {
  background:
    radial-gradient(circle at 25% 75%, rgba(238,130,98,0.2) 0%, transparent 50%),
    linear-gradient(135deg, #f2ebe8 0%, #f8f1ee 100%);
}

.sterling-silver {
  background:
    radial-gradient(circle at 40% 40%, rgba(192,192,192,0.3) 0%, transparent 40%),
    linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
}

.platinum {
  background:
    radial-gradient(circle at 50% 20%, rgba(169,169,169,0.25) 0%, transparent 60%),
    linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
}

.titanium {
  background:
    radial-gradient(circle at 30% 70%, rgba(105,105,105,0.2) 0%, transparent 50%),
    linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
}

.steel {
  background:
    radial-gradient(circle at 35% 35%, rgba(160,160,160,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #f3f3f3 0%, #e9e9e9 100%);
}

/* Container for scrollable color swatches */
.variant-color-scroll-container {
  position: relative;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  margin-top: 5px;
  margin-left: -6px;
}

.variant-color-outer-wrapper {
  overflow: hidden;
  width: 100%;
  padding: 5px;
}

.variant-color-inner-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Minimalist Color Swatch Design */
.variant-swatch {
  width: 28px;
  height: 28px;
  border-radius: 1px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
  padding: 2px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.variant-swatch__color-inner {
  width: 100%;
  height: 100%;
  border-radius: 1px;
  position: relative;
  background-position: 0 0, 0 0, 0 0;
  transition: background-size 220ms ease, background-position 220ms ease, filter 220ms ease;
  overflow: hidden;
  /* Add subtle inner glow */
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), inset 0 -1px 2px rgba(0,0,0,0.1);
}

.variant-swatch__color-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
}

/* Universal texture overlay so all colors receive material grain */
.variant-swatch__color-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.16) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.05) 1px, transparent 1px),
    repeating-linear-gradient(-22deg, rgba(255,255,255,0.05) 0 2px, rgba(0,0,0,0.05) 2px 4px);
  background-size: 14px 14px, 26px 26px, 9px 9px;
  background-position: 0 0, 0 0, 0 0;
  mix-blend-mode: soft-light;
  opacity: 0.45;
  transition: opacity 200ms ease, background-size 200ms ease, background-position 200ms ease;
}

.variant-swatch:hover .variant-swatch__color-inner::after {
  background-position: 1px 1px, -1px -1px, 0 0;
  opacity: 0.5;
}

.variant-swatch::before {
 display: none;
}

.variant-swatch:hover {
  transform: scale(0.95);
  border-color: rgba(0, 0, 0, 0.2);
}

.variant-swatch:hover .variant-swatch__color-inner {
  background-size: 12px 12px, 24px 24px, 8px 8px;
  background-position: 1px 1px, -1px -1px, 0 0;
  filter: saturate(1.02) brightness(1.01);
}

/* Hover outer border - like HTML example */
.variant-swatch:hover::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 1px solid #000;
  border-radius: 1px;
  opacity: 1;
  pointer-events: none;
}

.variant-swatch--selected {
  border: 1px solid #f0f0f0;
  box-shadow: none;
  transform: scale(1);
  position: relative;
}

/* Simple outer border for selected color swatches - like HTML example */
.variant-swatch--selected::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 1px solid var(--gold-dark);
  border-radius: 1px;
  opacity: 1;
  pointer-events: none;
}

/* Metal finishes and gemstone colors via data-color */
.variant-swatch[data-color*="rose gold"] .variant-swatch__color-inner,
.variant-swatch[data-color*="rosegold"] .variant-swatch__color-inner,
.variant-swatch[data-color*="rose-gold"] .variant-swatch__color-inner,
.variant-swatch[data-color*="rose_gold"] .variant-swatch__color-inner {
  background:
    linear-gradient(135deg, #f6d3d5 0%, #e8b4b8 50%, #d89aa0 100%),
    repeating-linear-gradient(-25deg, rgba(255,255,255,0.08) 0 2px, rgba(0,0,0,0.06) 2px 4px),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.25) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-blend-mode: screen, overlay, normal, normal;
}

.variant-swatch[data-color*="white gold"] .variant-swatch__color-inner,
.variant-swatch[data-color*="platinum"] .variant-swatch__color-inner {
  background:
    linear-gradient(135deg, #f1f1f1 0%, #dbdbdb 50%, #c7c7c7 100%),
    repeating-linear-gradient(-20deg, rgba(255,255,255,0.08) 0 2px, rgba(0,0,0,0.05) 2px 4px),
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.22) 1px, transparent 1px),
    radial-gradient(circle at 60% 75%, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-blend-mode: soft-light, overlay, normal, normal;
}

.variant-swatch[data-color="gold"] .variant-swatch__color-inner,
.variant-swatch[data-color*="yellow gold"] .variant-swatch__color-inner {
  background:
    linear-gradient(135deg, #fff1b0 0%, #ffd347 50%, #d1ab35 100%),
    repeating-linear-gradient(-24deg, rgba(255,255,255,0.1) 0 2px, rgba(0,0,0,0.07) 2px 4px),
    radial-gradient(circle at 25% 60%, rgba(255,255,255,0.22) 1px, transparent 1px),
    radial-gradient(circle at 80% 40%, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-blend-mode: soft-light, overlay, normal, normal;
}

.variant-swatch[data-color*="silver"] .variant-swatch__color-inner {
  background:
    linear-gradient(135deg, #f4f4f4 0%, #bebebe 50%, #a6a6a6 100%),
    repeating-linear-gradient(-18deg, rgba(255,255,255,0.08) 0 2px, rgba(0,0,0,0.05) 2px 4px),
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.22) 1px, transparent 1px),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-blend-mode: soft-light, overlay, normal, normal;
}
.variant-swatch[data-color*="black"] .variant-swatch__color-inner {
  background:
    linear-gradient(135deg, #2b2b2b 0%, #1f1f1f 50%, #111 100%),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.06) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-blend-mode: normal, overlay, normal;
}

.variant-swatch[data-color*="emerald"] .variant-swatch__color-inner {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.15) 0%, transparent 55%),
    linear-gradient(135deg, #57d68d 0%, #2f7f53 100%);
}
.variant-swatch[data-color*="sapphire"] .variant-swatch__color-inner {
  background:
    radial-gradient(ellipse at 48% 60%, rgba(255,255,255,0.14) 0%, transparent 60%),
    linear-gradient(135deg, #1a64de 0%, #0a387f 100%);
}
.variant-swatch[data-color*="ruby"] .variant-swatch__color-inner {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255,255,255,0.14) 0%, transparent 60%),
    linear-gradient(135deg, #f02a6f 0%, #a60c45 100%);
}
.variant-swatch[data-color*="amethyst"] .variant-swatch__color-inner {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255,255,255,0.14) 0%, transparent 60%),
    linear-gradient(135deg, #a177d6 0%, #6e47a6 100%);
}
.variant-swatch[data-color*="opal"] .variant-swatch__color-inner {
  background:
    linear-gradient(135deg, #fefefe 0%, #f1f1f1 100%);
}

/* Strengthen grain overlay for dark/light gemstones */
.variant-swatch[data-color*="emerald"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="sapphire"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="ruby"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="amethyst"] .variant-swatch__color-inner::after {
  opacity: 0.4;
}
.variant-swatch[data-color*="opal"] .variant-swatch__color-inner::after {
  opacity: 0.35;
}

/* Generic vivid colors with vignette + grain, all with universal texture */
.variant-swatch[data-color*="red"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.08) 0%, transparent 55%), linear-gradient(135deg, #d32f2f 0%, #9a1f1f 100%); }
.variant-swatch[data-color*="blue"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.08) 0%, transparent 55%), linear-gradient(135deg, #1976d2 0%, #114f8f 100%); }
.variant-swatch[data-color*="green"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.08) 0%, transparent 55%), linear-gradient(135deg, #388e3c 0%, #256129 100%); }
.variant-swatch[data-color*="pink"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.10) 0%, transparent 55%), linear-gradient(135deg, #e91e63 0%, #a31444 100%); }
.variant-swatch[data-color*="purple"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.10) 0%, transparent 55%), linear-gradient(135deg, #7b1fa2 0%, #55156f 100%); }
.variant-swatch[data-color*="orange"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.10) 0%, transparent 55%), linear-gradient(135deg, #f57c00 0%, #a65400 100%); }
.variant-swatch[data-color*="brown"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.08) 0%, transparent 55%), linear-gradient(135deg, #6d4c41 0%, #4b362f 100%); }
.variant-swatch[data-color*="beige"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.12) 0%, transparent 55%), linear-gradient(135deg, #d7c4a3 0%, #b79d83 100%); }
.variant-swatch[data-color*="ivory"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.14) 0%, transparent 55%), linear-gradient(135deg, #fffff0 0%, #efeada 100%); }
.variant-swatch[data-color*="cream"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.14) 0%, transparent 55%), linear-gradient(135deg, #fffdd0 0%, #efe6a8 100%); }
.variant-swatch[data-color*="tan"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.10) 0%, transparent 55%), linear-gradient(135deg, #d2b48c 0%, #b39473 100%); }
.variant-swatch[data-color*="navy"] .variant-swatch__color-inner { background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.06) 0%, transparent 55%), linear-gradient(135deg, #001f3f 0%, #00152a 100%); }
.variant-swatch[data-color*="white"] .variant-swatch__color-inner { background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%); }

/* Strengthen universal overlay visibility for generics */
.variant-swatch[data-color*="red"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="blue"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="green"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="pink"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="purple"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="orange"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="brown"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="beige"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="ivory"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="cream"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="tan"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="navy"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="white"] .variant-swatch__color-inner::after {
  opacity: 0.45;
}

/* Black: slightly stronger pores for matte realism */
.variant-swatch[data-color*="black"] .variant-swatch__color-inner::after {
  opacity: 0.5;
}

/* Add subtle moving shine on hover for metallics */
.variant-swatch[data-color*="gold"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="rose"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="platinum"] .variant-swatch__color-inner::after,
.variant-swatch[data-color*="silver"] .variant-swatch__color-inner::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(60deg, transparent 45%, rgba(255,255,255,0.25) 50%, transparent 55%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.variant-swatch:hover .variant-swatch__color-inner::after {
  transform: translateX(120%);
}

/* Minimalist Button Variants */
.variant-button {
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  background: rgba(255,255,255,0.6);
  border-radius: 4px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--kelp-600);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.variant-button:hover {
  border-color: rgba(var(--kelp-400-rgb), 0.3);
  background: rgba(255,255,255,0.8);
  color: var(--kelp-700);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.variant-button--selected {
  border-color: var(--kelp-600);
  background: var(--kelp-600);
  color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.variant-button--selected:hover {
  background: var(--kelp-700);
  border-color: var(--kelp-700);
}

/* Text Variants */
.variant-text {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--kelp-600);
  cursor: pointer;
  text-align: center;
  min-width: 60px;
}

.variant-text:hover {
  border-color: rgba(var(--gold-rgb), 0.4);
  background: rgba(255,255,255,0.8);
  color: var(--kelp-800);
  transform: translateY(-1px);
}

.variant-text.selected {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold-dark);
  font-weight: 500;
}

/* Navigation arrows for color swatches */
.variant-color-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.variant-color-nav:hover {
  background: rgba(255,255,255,1);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.2);
}

.variant-color-nav--left {
  left: -16px;
}

.variant-color-nav--right {
  right: -16px;
}

.variant-color-nav svg {
  width: 16px;
  height: 16px;
  color: var(--kelp-600);
}

.variant-color-nav:hover svg {
  color: var(--gold);
}



/* Hide default check, maybe use border instead */
.variant-swatch__check {
 display: none;
}

/* Dropdown style - Refined */
.variant-dropdown {
  width: 100%;
  padding: 0.625rem 1rem; /* ~10px 16px */
  border: 1px solid rgba(var(--kelp-300-rgb), 0.5); /* Kelp border */
  border-radius: 2px;
  background-color: rgba(var(--kelp-50-rgb), 0.7); /* Light kelp background */
  color: var(--kelp-800);
  font-family: var(--font-primary);
  font-size: 0.8rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2356574a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1em;
}

.variant-dropdown:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.15);
}

/* Remove duplicate styles - using the minimalist design above */

/* Navigation Buttons Styling */
.variant-color-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  /* Override default LuxuryNavigation size/positioning if needed */
}

.variant-color-nav.prev {
  left: 0;
}

.variant-color-nav.next {
  right: 0;
}

/* Adjust LuxuryNavigation specifically within this context */
.variant-color-scroll-container .luxury-navigation {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 28px; /* Match swatch height */
}

.variant-color-scroll-container .luxury-navigation.prev {
  left: 0.25rem;
}
.variant-color-scroll-container .luxury-navigation.next {
  right: 0.25rem;
}

.variant-color-scroll-container .luxury-nav-button {
  width: 1.5rem; /* Smaller nav buttons */
  height: 1.5rem;
  background-color: rgba(var(--kelp-50-rgb), 0.6);
 
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.variant-color-scroll-container .luxury-nav-button:hover {
   background-color: rgba(var(--kelp-100-rgb), 0.8);
}

.variant-color-scroll-container .luxury-nav-arrow {
  border-color: var(--kelp-600); /* Kelp arrow */
  border-width: 0 1px 1px 0;
  width: 5px;
  height: 5px;
}
.variant-color-scroll-container .luxury-nav-line {
 display: none; /* Hide line for this minimal version */
}

/* Disabled variant states */
.variant-swatch--disabled {
  position: relative;
}

.variant-swatch--disabled .variant-swatch__color-inner {
  filter: grayscale(50%);
}

.variant-swatch__unavailable-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ef4444;
  font-weight: bold;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.material-option-inline.disabled {
  position: relative;
}

.material-unavailable-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  z-index: 2;
}

.variant-button--disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.variant-button--disabled:hover {
  background-color: var(--kelp-100) !important;
  border-color: var(--kelp-200) !important;
}


/* Hide preview for now */
.variant-preview {
 display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .variant-swatch {
    width: 35px; /* Even smaller on mobile */
    height: 35px;
  }
  .variant-group__title-wrapper {
    margin-bottom: 0.85rem; /* 8px */
  }
 
  .variant-group__title {
    font-size: 0.85rem;
  }
  .variant-group__selected-value {
    font-size: 0.65rem;
  }
  .variant-button {
    padding:0.3rem 0.9rem 0.3rem 0.9rem; /* ~5px 12px */
    font-size: 0.75rem;
  }
  
  .variant-color-scroll-container .luxury-navigation.prev {
    left: 0rem;
  }
  .variant-color-scroll-container .luxury-navigation.next {
    right: 0rem;
  }
  .variant-color-scroll-container .luxury-nav-button {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Modern Premium Variant Styles */

/* Custom Dropdown Panel */
.variant-dropdown-modern {
  position: relative;
  width: 100%;
}

.variant-dropdown-trigger {
  width: 100%;
  padding: 10px 16px;
  background: rgba(var(--kelp-100-rgb), 0.5) !important;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--kelp-800);
  position: relative;
  overflow: hidden;

}




.variant-dropdown-trigger:hover {
  border-color: rgba(100, 116, 139, 0.3);

  transform: translateY(-1px);
}

.variant-dropdown-trigger:hover::before {
  opacity: 1;
}

.variant-dropdown-trigger:focus {
  outline: none;
  border-color: none;
 
}

.variant-dropdown-selected {
  flex: 1;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(var(--kelp-800-rgb), 0.7);
}

.variant-dropdown-placeholder {
  color: rgba(var(--kelp-800-rgb), 0.7);
  font-weight: 300;
  font-size: 0.7rem;
}

.variant-dropdown-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--kelp-600);
}

.variant-dropdown-trigger[aria-expanded="true"] .variant-dropdown-arrow {
  transform: rotate(180deg);
}

.variant-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--kelp-50);
 
  border-radius: 3px;
   /* Shadow only at bottom */
  box-shadow: 0 6px 18px -6px rgba(var(--gold-rgb), 0.16), 0 3px 9px -6px rgba(var(--gold-rgb), 0.09);
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.variant-dropdown-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Selected pill (compact selection display for customizations) */
.variant-selected-pill {
  width: 100%;
  padding: 8px 12px;
  background: rgba(var(--kelp-100-rgb), 0.35);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--kelp-800-rgb), 0.85);
  font-size: 0.8rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.variant-selected-pill:hover {
  background: rgba(var(--kelp-100-rgb), 0.55);
}

.variant-selected-pill-title {
  font-weight: 600;
  color: rgba(var(--kelp-800-rgb), 0.85);
}

.variant-selected-pill-value {
  font-weight: 500;
  color: rgba(var(--kelp-800-rgb), 0.85);
}

.variant-selected-pill-arrow {
  margin-left: auto;
  color: rgba(var(--kelp-800-rgb), 0.6);
}

/* Title inline Add action */
.variant-add-action {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--gold-dark);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-add-action:hover {
  background: rgba(var(--kelp-100-rgb), 0.8);
  border-color: rgba(var(--kelp-500-rgb), 0.7);
}

.variant-add-symbol {
  font-weight: 400;
  letter-spacing: 0.02em;
}

.variant-add-label {
  font-weight: 400;
  display: none !important;
}

/* Minimal input block */
.variant-custom-input {
  margin-top: 10px;
  background: rgba(255,255,255,0.7);

  border-radius: 6px;
  padding: 10px 12px;
}

.variant-custom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.variant-remove-action {
  padding: 4px 10px;

  background: rgba(var(--kelp-50-rgb), 0.7);
  border-radius: 4px;
  font-size: 0.75rem;
  color: rgba(var(--kelp-800-rgb), 0.8);
  cursor: pointer;
}

.variant-remove-action:hover {
  background: rgba(var(--kelp-100-rgb), 0.9);
}

/* Inline input styled like dropdown trigger */
.variant-input-inline {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 3px;
  background: rgba(var(--kelp-100-rgb), 0.3);
  padding: 8px 16px; /* same internal spacing as trigger */
}
.variant-secure-input-icons {
  position: absolute;
  right: 0px;
  top: 0;
  border: none !important;
}

/* SecureInlineInput base */
.variant-secure-input { width: 100%; }
.variant-secure-input-label { display: none; }
.variant-secure-input .variant-secure-input-wrap { position: relative; width: 100%; }
.variant-secure-input-field {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.7rem;
  color: rgba(var(--kelp-800-rgb), 0.7);
}

.variant-input-icons {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 6px;
}

.variant-input-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(var(--kelp-800-rgb), 0.8);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.variant-input-icon:hover {
  background: rgba(var(--kelp-100-rgb), 0.5);
}

.variant-input-icon.success { color: var(--gold-dark); }

.variant-exceeded-note {
  margin-top: 6px;
  font-size: 0.72rem;
  color: #b91c1c;
}

.variant-dropdown-panel::-webkit-scrollbar {
  width: 6px;
}

.variant-dropdown-panel::-webkit-scrollbar-track {
  background: rgba(100, 116, 139, 0.05);
  border-radius: 12px;
}

.variant-dropdown-panel::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.2);
  border-radius: 12px;
}

.variant-dropdown-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.3);
}

.variant-dropdown-option {
  padding: 12px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.7rem;
  color: rgba(var(--kelp-800-rgb), 0.7);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}




.variant-dropdown-option.selected {
  font-size: 0.7rem;
  color: rgba(var(--kelp-800-rgb), 0.9);
  font-weight: 400;
}

.variant-dropdown-option.selected::before {
  opacity: 1;
}

.variant-dropdown-option-check {
  width: 16px;
  height: 16px;
  color: var(--kelp-600);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.variant-dropdown-option.selected .variant-dropdown-option-check {
  opacity: 1;
  transform: scale(1);
}

/* Modern Button Style */
.variant-button-modern {
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.98) 100%);
  border: 1.5px solid rgba(100, 116, 139, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--kelp-800);
  position: relative;
  overflow: hidden;
}

.variant-button-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.02) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.variant-button-modern:hover {
  border-color: rgba(100, 116, 139, 0.3);
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.08);
  transform: translateY(-2px);
}

.variant-button-modern:hover::before {
  opacity: 1;
}

.variant-button-modern.selected {
  background: linear-gradient(135deg, var(--kelp-700) 0%, var(--kelp-600) 100%);
  border-color: var(--kelp-700);
  color: white;
}

.variant-button-modern.selected::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  opacity: 1;
}

/* Customization Input Container */
.variant-customization-container {
  margin-top: 16px;
  padding: 5px 15px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}



.variant-customization-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kelp-800);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.variant-customization-icon {
  width: 18px;
  height: 18px;
  color: var(--kelp-600);
}

.variant-customization-description {
  font-size: 0.8125rem;
  color: var(--kelp-600);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Price adjustment badge */
.variant-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
 
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gold-dark);
  margin-left: 8px;
}

.variant-price-badge.increase {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.08) 100%);
  border-color: rgba(239, 68, 68, 0.2);
  color: rgb(220, 38, 38);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .variant-dropdown-trigger,
  .variant-button-modern {
    font-size: 0.875rem;
    padding: 11px 16px;
  }
  
  .variant-customization-container {
    padding: 16px;
  }
  
  .variant-dropdown-panel {
    max-height: 240px;
  }
}

/* RTL Support */
[dir="rtl"] .variant-dropdown-option::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .variant-customization-container::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .variant-price-badge {
  margin-left: 0;
  margin-right: 8px;
}

/* ===== Luxury Navigation Component ===== */
.luxury-navigation {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 1.5rem;
  pointer-events: none;
}

/* Button base styling */
.luxury-nav-button {
  width: 38px;
  height: 38px;
  position: relative;
  background-color: rgba(var(--kelp-950-rgb), 0.6);
  /* backdrop-filter: blur(15px); */
  /* -webkit-backdrop-filter: blur(15px); */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  pointer-events: auto;
  cursor: pointer;

  overflow: hidden;
  will-change: transform, opacity;
border-radius: 50%;

}
/* Cold kelp variant for light backgrounds with gradient */
.luxury-navigation.cold-kelp .luxury-nav-button {
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-50-rgb), 0.2) 0%,
    rgba(var(--kelp-100-rgb), 0.3) 100%
  ) !important;
 
}

.luxury-navigation.cold-kelp .luxury-nav-button:hover {
  background-color: rgba(var(--kelp-100-rgb), 0.95);

 
}

.luxury-navigation.cold-kelp .luxury-nav-line,
.luxury-navigation.cold-kelp .luxury-nav-arrow {
  background: var(--gold-dark);
}

.luxury-navigation.cold-kelp .luxury-nav-button:hover .luxury-nav-line,
.luxury-navigation.cold-kelp .luxury-nav-button:hover .luxury-nav-arrow {
  background: rgba(var(--kelp-900-rgb), 1) !important;
}

/* Line element - properly contained */
.luxury-nav-line {
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(var(--kelp-300-rgb), 0.8);
  position: relative;
}

/* Arrow styling - ensures proper positioning */
.luxury-nav-button.prev .luxury-nav-arrow,
.luxury-nav-button.next .luxury-nav-arrow {
  content: '';
  position: absolute;
  width: 6px;
  height: 1px;
  background: var(--gold-dark);
  top: 50%;
}

/* Previous button arrow */
.luxury-nav-button.prev .luxury-nav-arrow {
  left: calc(50% - 6px);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: left center;

}

.luxury-nav-button.prev .luxury-nav-line {
  transform: translateX(3px);
}

/* Next button arrow */
.luxury-nav-button.next .luxury-nav-arrow {
  right: calc(50% - 6px);
  transform: translate(50%, -50%) rotate(45deg);
  transform-origin: right center;

}

.luxury-nav-button.next .luxury-nav-line {
  transform: translateX(-3px);
}

/* Button active state - handled by Framer Motion */

/* Disabled state */
.luxury-nav-button[disabled],
.luxury-nav-button.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Size variants */
.luxury-navigation.small .luxury-nav-button {
  width: 35px;
  height: 35px;
}

.luxury-navigation.small .luxury-nav-line {
  width: 18px;
}

.luxury-navigation.large .luxury-nav-button {
  width: 60px;
  height: 60px;
}

.luxury-navigation.large .luxury-nav-line {
  width: 28px;
}

/* Style variants */
.luxury-navigation.contrast .luxury-nav-button {
  background-color: rgba(var(--kelp-950-rgb), 0.5);
  border-color: rgba(var(--kelp-300-rgb), 0.2);
}

.luxury-navigation.minimal .luxury-nav-button {
  background-color: transparent;
  border-color: rgba(var(--kelp-300-rgb), 0.15);
  box-shadow: none;
}

/* RTL Support */
.luxury-navigation.rtl .luxury-nav-button.prev .luxury-nav-arrow {
  right: calc(50% - 6px);
  left: auto;
  transform: translate(50%, -50%) rotate(45deg);
  transform-origin: right center;
  box-shadow: 2px 2px 0 -2px rgba(var(--kelp-300-rgb), 0.9);
}

.luxury-navigation.rtl .luxury-nav-button.prev .luxury-nav-line {
  transform: translateX(-3px);
}

.luxury-navigation.rtl .luxury-nav-button.next .luxury-nav-arrow {
  left: calc(50% - 6px);
  right: auto;
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: left center;
  box-shadow: -2px 2px 0 -2px rgba(var(--kelp-300-rgb), 0.9);
}

.luxury-navigation.rtl .luxury-nav-button.next .luxury-nav-line {
  transform: translateX(3px);
}

.luxury-navigation.rtl .luxury-nav-button.prev:hover .luxury-nav-line {
  transform: translateX(0);
}

.luxury-navigation.rtl .luxury-nav-button.next:hover .luxury-nav-line {
  transform: translateX(0);
}

/* RTL Cold Kelp variant */
.luxury-navigation.rtl.cold-kelp .luxury-nav-button.prev .luxury-nav-arrow,
.luxury-navigation.rtl.cold-kelp .luxury-nav-button.next .luxury-nav-arrow {
  background: rgba(var(--kelp-800-rgb), 0.9) !important;
  box-shadow: inherit;
}

.luxury-navigation.rtl.cold-kelp .luxury-nav-button.prev .luxury-nav-arrow {
  box-shadow: 2px 2px 0 -2px rgba(var(--kelp-800-rgb), 0.9);
}

.luxury-navigation.rtl.cold-kelp .luxury-nav-button.next .luxury-nav-arrow {
  box-shadow: -2px 2px 0 -2px rgba(var(--kelp-800-rgb), 0.9);
}

.luxury-navigation.rtl.cold-kelp .luxury-nav-button:hover .luxury-nav-button.prev .luxury-nav-arrow {
  box-shadow: 2px 2px 0 -2px rgba(var(--kelp-900-rgb), 1);
}

.luxury-navigation.rtl.cold-kelp .luxury-nav-button:hover .luxury-nav-button.next .luxury-nav-arrow {
  box-shadow: -2px 2px 0 -2px rgba(var(--kelp-900-rgb), 1);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .luxury-navigation {
    padding: 0 1rem;
  }
  
  .luxury-nav-button {
    width: 28px;
    height: 28px;
  }
  .luxury-navigation.cold-kelp .luxury-nav-button{
    background: none;
  }
  
  .luxury-nav-line {
    width: 16px;
  }
} /* ===== QUICK VIEW COMPONENT STYLES ===== */

/* Quick View Button Styles */
.premium-product-card__quick-view-new {
  position: absolute;
  top: 0.75rem;
  left: 5px;
  background: rgba(var(--kelp-50-rgb), 0.25);
  border: none;
  border-radius: 3px;
  padding: 4px 5px;
  color: rgba(var(--kelp-500-rgb), 0.8);
  cursor: pointer;
  z-index: 10;
}

.quick-view-text {
  font-family: var(--font-primary);
  font-size: 8px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .premium-product-card__quick-view-new {
    opacity: 1;
    top: 5px;
  }
}

.premium-product-card__quick-view-new:hover {
  color: var(--kelp-900);
}

.quick-view-button-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}

/* Quick View Error Message - Consistent with HeroSection */
.quick-view-error-message {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(var(--kelp-50-rgb), 0.7), rgba(var(--kelp-100-rgb), 0.5));
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 3px solid var(--kelp-400);
}

.quick-view-error-message .error-text {
  font-size: 0.75rem;
  color: var(--kelp-800);
  letter-spacing: 0.04em;
  text-align: center;
  font-weight: 500;
}

.quick-view-button-line {
  width: 1px;
  height: 16px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--gold-dark),
    transparent
  );
  position: relative;
}

.quick-view-button-line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 2px;
  background: var(--gold-dark);
  border-radius: 50%;
}



/* ===== MAIN OVERLAY ===== */
.quick-view-overlay {
  position: fixed;
  background: var(--kelp-50);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quick-view-overlay.desktop {
  top: 0;
  right: 0;
  width: 480px;
  height: 100dvh;
  border-left: 1px solid rgba(var(--kelp-200-rgb), 0.3);
}

.quick-view-overlay.mobile {
  bottom: 0;
  left: 0;
  right: 0;
  /* Fallback then modern dynamic viewport units to avoid full-height jumps */
  height: 95vh;
  height: 95svh;
  height: 95dvh;
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  border-radius: 20px 20px 0 0;
}

/* ===== LOADING STATE ===== */
.quick-view-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kelp-50);
  z-index: 10;
}

/* ===== CONTENT CONTAINER ===== */
.quick-view-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== CLOSE BUTTON ===== */
.quick-view-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(var(--kelp-50-rgb), 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kelp-600);
  cursor: pointer;
  z-index: 20;
 
}

.quick-view-close:hover {
  background: var(--kelp-200);
  color: var(--kelp-900);
}

/* ===== IMAGE SECTION ===== */
.quick-view-image-section {
  flex: 0 0 auto;
  /* Use percentage of overlay to avoid viewport unit jumps on mobile */
  height: 60%;
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
}

.quick-view-overlay.mobile .quick-view-image-section {
  height: 62%;
  padding: 1rem;
}

/* Desktop Gallery */
.quick-view-desktop-gallery {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0.5rem;
}

.quick-view-main-image {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kelp-50);
  overflow: hidden;
  border-radius: 2px;
}

.quick-view-main-image-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 8px;
}

/* Mobile Swiper */
.quick-view-swiper-container {
  height: 100%;
  width: 100%;
  padding: 0.5rem;
}

.quick-view-swiper {
  height: 100%;
  width: 100%;
}



.quick-view-slide {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kelp-50);
  overflow: hidden;
  border-radius: 8px;
}

.quick-view-slide-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 8px;
}

/* Navigation Buttons */
.quick-view-navigation {
  position: absolute;
  top: 50%;
  left: 1rem;
  right: 1rem;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 15;
}

.quick-view-navigation > * {
  pointer-events: auto;
  background: rgba(var(--kelp-50-rgb), 0.9);

  border-radius: 50%;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.6);
}

/* Image Dots */
.quick-view-image-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 10;
}

.quick-view-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
}

.quick-view-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.quick-view-dot.active {
  background: var(--gold-dark);
}

/* Swiper Pagination - Matching main design */
.quick-view-swiper .swiper-pagination {
  bottom: 10px !important;
  left: 8px !important;
  right: auto;
  width: auto;
  display: flex;
  gap: 0;
  background-color: rgba(var(--kelp-50-rgb), 0.25) !important;
  border-radius: 3px;
  padding: 3px 4px;
  width: 44px !important;
}

.quick-view-swiper .swiper-pagination-bullet {
  background: rgba(var(--kelp-500-rgb), 0.8);
  opacity: 1;
  width: 4px;
  height: 4px;
  margin: 0 2px;
  border: none;
  transition: all 0.3s ease;
}

.quick-view-swiper .swiper-pagination-bullet-active {
  background: var(--kelp-500);
  width: 12px;
  border-radius: 1px;
}

/* ===== DETAILS SECTION ===== */
.quick-view-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.quick-view-details-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.quick-view-overlay.mobile .quick-view-details-content {
  padding: 1.5rem;
}

/* Header Info */
.quick-view-header {
  flex: 0 0 auto;
}

.quick-view-title {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--kelp-500);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.quick-view-price {
  font-size: 12px;
  color: var(--gold-dark);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.quick-view-collection {
  color: var(--kelp-400);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Description */
.quick-view-description {
  color: var(--kelp-600);
  font-size: 12px;
  line-height: 1.6;
  flex: 0 0 auto;
}

/* Variants Section */
.quick-view-variants {
  flex: 0 0 auto;
}

/* Selection Status */
.quick-view-selection-status {
  background: rgba(var(--kelp-100-rgb), 0.3);
  border-radius: 4px;
  padding: 1rem;
  border-left: 1.5px solid var(--gold-dark);
  flex: 0 0 auto;
  overflow: hidden;
}

.quick-view-selection-label {
  display: block;
  font-size: 0.75rem;
  color: var(--kelp-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.quick-view-selection-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.quick-view-selection-item {
  padding: 0.25rem 0.75rem;
  background: rgba(113, 77, 56, 0.05);
  border-radius: 2px;
  font-size: 0.75rem;
  color: var(--kelp-700);
  font-weight: 500;
}

/* Upload Preview */
.quick-view-upload-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(var(--kelp-50-rgb), 0.8);
  border-radius: 6px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.5);
}

.quick-view-upload-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--kelp-300);
}

.quick-view-upload-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kelp-700);
  border: none;
  color: var(--kelp-50);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.quick-view-upload-remove:hover {
  background: var(--kelp-900);
}

/* ===== ACTION BUTTONS ===== */
.quick-view-actions {
  flex: 0 0 auto;
  padding: 1.5rem 2rem 2rem;
}

.quick-view-overlay.mobile .quick-view-actions {
  padding: 1.5rem;
}

.quick-view-button-container {
  position: relative;
  width: 100%;
}

.quick-view-button {
  width: 100%;
  padding: 1rem 2rem;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

.quick-view-button.primary {
  background: var(--kelp-950);
  color: var(--gold-dark);
}

.quick-view-button.primary:hover {
  background: var(--kelp-900);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--gold-dark-rgb), 0.4);
}

.quick-view-button.primary.loading {
  background: var(--kelp-800);
  cursor: not-allowed;
}

.quick-view-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  position: relative;
}

.quick-view-button-text-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-view-custom-spinner {
  color: var(--gold-light);
}

.quick-view-checkmark-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-view-checkmark-left-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-view-final-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.quick-view-checkmark {
  color: var(--gold-light);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.quick-view-added-text {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-light);
}

/* Minimal button style for view cart */
.quick-view-button.minimal {
  background: rgba(var(--kelp-100-rgb), 0.6);
  color: var(--kelp-700);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.8);
  padding: 0.75rem 1.5rem;
  font-size: 11px;
  font-weight: 500;
 
  margin-bottom: 0.75rem;
}

.quick-view-button.minimal:hover {
  background: rgba(var(--kelp-200-rgb), 0.8);
  color: var(--kelp-800);
  border-color: rgba(var(--kelp-300-rgb), 0.9);
}

.quick-view-button.secondary {
  background: rgba(var(--kelp-200-rgb), 0.5);
  color: var(--kelp-700);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.5);
}

.quick-view-button.secondary:hover {
  background: rgba(var(--kelp-300-rgb), 0.6);
  color: var(--kelp-900);
}



/* Loading Spinner */
.quick-view-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
}

/* Success State - Simplified */
.quick-view-success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

/* ===== MOBILE SPECIFIC STYLES ===== */
@media (max-width: 768px) {
  .quick-view-close {
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
  }

  .quick-view-title {
    font-size: 12px;
  }

  .quick-view-price {
    font-size: 1.125rem;
  }

  .quick-view-collection {
    font-size: 10px;
  }

  .quick-view-description {
    font-size: 0.8125rem;
  }

  .quick-view-button {
    padding: 0.875rem 1.5rem;
    font-size: 10px
  }
  
  .quick-view-image-section{
    height: 55%;
  }

  .quick-view-selection-item {
    font-size: 10px;
    padding: 0.1875rem 0.625rem;
  }

  .quick-view-upload-image {
    width: 32px;
    height: 32px;
  }

  .quick-view-upload-remove {
    width: 20px;
    height: 20px;
  }

  .quick-view-button.minimal {
    padding: 0.625rem 1.25rem;
    font-size: 10px;
    margin-bottom: 0.5rem;
  }
  
  .quick-view-added-text {
    font-size: 10px;
  }
  
  .quick-view-final-state {
    gap: 0.375rem;
  }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 480px) {
  .quick-view-overlay.mobile {
    /* Keep consistent with dynamic units; avoid !important overrides */
    height: 95dvh;
    border-radius: 16px 16px 0 0;
  }

  .quick-view-details-content {
    padding: 1rem;
    gap: 1rem;
  }

  .quick-view-actions {
    padding: 1rem;
  }

  .quick-view-title {
    font-size: 12px
  }


}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .quick-view-overlay,
  .quick-view-content,
  .quick-view-button,
  .quick-view-dot {
    transition: none !important;
  }
}

/* ===== FOCUS STYLES ===== */
.quick-view-close:focus,
.quick-view-button:focus,
.quick-view-dot:focus,
.quick-view-upload-remove:focus {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* ===== SCROLLBAR STYLING ===== */
.quick-view-details-content::-webkit-scrollbar {
  width: 4px;
}

.quick-view-details-content::-webkit-scrollbar-track {
  background: transparent;
}

.quick-view-details-content::-webkit-scrollbar-thumb {
  background: rgba(var(--kelp-400-rgb), 0.3);
  border-radius: 2px;
}

.quick-view-details-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--kelp-400-rgb), 0.5);
}/* =============================================
   HeroSection.css - Based on FeaturedCollections Pattern
   ============================================= */

.hero-section {
  position: relative;
  height: 100vh;
  min-height: 1000px;
  color: var(--kelp-900);
  overflow: visible; /* Allow navigation to be visible */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--kelp-100);
  padding-top: 1rem ;
}



.hero-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow: visible; /* Allow cards to move outside container */
  pointer-events: none; /* Allow clicks to pass through to navigation */
}

/* Background Title - Like FeaturedCollections */
.hero-background-title {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  transform: translateZ(0);
}

.hero-background-title .background-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0);
}

.hero-main-title {
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding: 0 0 1rem 0;
  line-height: 1;
  color: var(--kelp-200);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-primary);
  position: relative;
  transform: translateZ(0);
}

.hero-title-tag {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1.5rem;
  color: var(--gold-dark);
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: var(--font-primary);
  position: relative;
}

.hero-title-tag::before { display: none !important; }

/* Card Container - Like FeaturedCollections */
.hero-card-container {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 550px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Allow cards to move outside */
}

.hero-gallery {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: visible; /* Critical: Allow cards and reflections to move outside gallery */
  backface-visibility: hidden;
  pointer-events: none; /* Allow clicks to pass through to navigation */
}

/* EXACT FeaturedCollections gallery-slide structure */
.hero-gallery .gallery-slide {
  position: absolute;
  width: 36vw;
  height: 39vw;
  min-width: 420px;
  min-height: 560px;
  max-width: 440px;
  max-height: 580px;
  background: transparent;
  border: none;
  border-radius: 3px;
  transform-origin: center center;
  /* Optimized for performance */
  backface-visibility: hidden;

  position: relative;
  overflow: visible; /* Allow reflection to be visible */
  z-index: 10;
  pointer-events: auto; /* Re-enable clicks for cards */
 
}

/* Pattern overlays removed for clean look */

/* Pattern styles removed for clean look */

/* Elegance lines removed for clean look */

/* Pattern-specific styles removed for clean look */

/* Pattern layers removed for clean look */

/* All pattern layer styles removed for clean look */

/* Hover and active effects removed for performance - handled by framer-motion */

.hero-gallery .gallery-slide.active .collection-image {
  filter: brightness(1) contrast(1);

}

/* Removed collectionImageFloat animation for performance */

.hero-gallery .collection-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  overflow: visible !important; /* ensure pills/swatches are not clipped */
  background: rgba(var(--kelp-900-rgb), 0.1);
  z-index: 3;
}

.hero-gallery .collection-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
  /* Performance optimizations */
  backface-visibility: hidden;
  transform: translateZ(0);
  display: block;
}

/* Non-active cards: remove border/frame; keep subtle shadow only */
.hero-gallery .gallery-slide:not(.active) {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.hero-gallery .gallery-slide:not(.active) .collection-image-container {
  border-radius: 3px;
  overflow: hidden;
  background: rgba(var(--kelp-900-rgb), 0.1);
}

.hero-gallery .gallery-slide:not(.active) .collection-image {
  filter: brightness(0.92) contrast(1.05);
  border-radius: 3px !important;
}

.hero-gallery .collection-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(var(--kelp-900-rgb), 0.2);
}

.hero-gallery .collection-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
  border-radius: 3px !important;
  z-index: 4;
}

/* Elegant decorative elements */
.card-decoration-top {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 20%, 
    rgba(255, 255, 255, 0.6) 50%, 
    rgba(255, 255, 255, 0.3) 80%, 
    transparent 100%
  );
  border-radius: 1px;
  z-index: 5;
}

.card-decoration-bottom {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 30%, 
    rgba(255, 255, 255, 0.4) 50%, 
    rgba(255, 255, 255, 0.2) 70%, 
    transparent 100%
  );
  border-radius: 1px;
  z-index: 5;
}

.card-corner-accent {
display: none;
}

.card-corner-accent::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

/* Z-index for dynamic stacked cards */
.hero-gallery .gallery-slide:not([class*="hero-card-stack"]) {
  z-index: 10; /* Main card on top */
}

/* Dynamic stacked cards - each gets lower z-index */
.hero-gallery .gallery-slide[class*="hero-card-stack-1"] {
  z-index: 9;
}

.hero-gallery .gallery-slide[class*="hero-card-stack-2"] {
  z-index: 8;
}

.hero-gallery .gallery-slide[class*="hero-card-stack-3"] {
  z-index: 7;
}

.hero-gallery .gallery-slide[class*="hero-card-stack-4"] {
  z-index: 6;
}

/* Content Section - Original Design with Absolute Positioning */
.hero-content-section {
  position: absolute;
  left: 5%;
  top: 65%;
  transform: translateY(-50%);
  width: 40%;
  z-index: 50;
 
  pointer-events: auto; /* Re-enable clicks for content */
}

.hero-content {
  max-width: 100%;
  color: var(--color-text-primary);
  position: relative;
}

/* Collection Label */
.hero-collection-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kelp-500);
}

.label-line {
  width: 2rem;
  height: 1px;
  background: var(--kelp-500);
  opacity: 0.6;
}

.label-text {
  white-space: nowrap;
}

/* Small horizontal line to the left of label-text */
.label-text::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 8px;
  background: linear-gradient(90deg, transparent, rgba(var(--kelp-500-rgb), 0.8), transparent);
  vertical-align: middle;
}

/* Product Title */
.hero-product-title {
  margin: 2rem 0 3rem 0;
}

.title-main {
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  font-weight: 650;
  line-height: 0.9;
  color: var(--kelp-900);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.title-sub {
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--kelp-800);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Price Display */
.hero-price-display {
  margin: 0.5rem 0 1rem 0;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.price-amount {
  font-size: 1.2rem;
  font-weight: 400;
  color: rgba(var(--kelp-800-rgb), 0.6);
  letter-spacing: -0.01em;
}

/* Hero CTA Section - Fixed layout and positioning */
.hero-cta-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start; /* Move buttons to the left */
  z-index: 100;
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Mobile CTA buttons need higher z-index and pointer-events */
@media (max-width: 768px) {
  .hero-cta-section {
    z-index: 1000 !important;
    pointer-events: auto !important; /* Override parent's pointer-events: none */
  }
  
  .hero-primary-action-button,
  .hero-secondary-action-button {
    z-index: 1001 !important;
    position: relative;
    pointer-events: auto !important; /* Ensure buttons are clickable */
    touch-action: manipulation; /* Improve touch response */
  }
}

/* Desktop CTA - Inside content section */
.hero-cta-desktop {
  margin-top: 1rem;
  justify-content: flex-start;
}

/* Mobile CTA - Outside content section (global positioning) */
.hero-cta-global {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8%;
  width: 90%;
  z-index: 55;
  justify-content: center;
}

/* Hide mobile CTA on desktop */
@media (min-width: 769px) {
  .hero-cta-global {
    display: none !important;
  }
  
  /* Hide mobile options button on desktop */
  .hero-variants-mobile {
    display: none !important;
  }
}

/* Fixed line positioning - reduce width and improve styling */
.hero-cta-section::before,
.hero-cta-section::after {
  content: '';
  width: 80%; /* Reduced from 100% to 60% */
  position: absolute;

  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.4), transparent);
  transition: all 0.4s ease;
  pointer-events: none;
  justify-self: center;
}
.hero-cta-section::before { 
  top: 14px !important; 
  opacity: 0.5;
}
.hero-cta-section::after { 
  bottom: -2px !important; 
  opacity: 0.5;
}
.hero-cta-section:hover::before { 
  top: -8px; 
  opacity: 0.8;
  width: 80%; /* Slightly wider on hover */
}
.hero-cta-section:hover::after { 
  bottom: -8px; 
  opacity: 0.9;
  width: 80%; /* Slightly wider on hover */
}

/* Hero CTA Button Styles - Updated Design */
.hero-primary-action-button,
.hero-secondary-action-button {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 4px; /* Slightly more rounded */
  font-size: 14px;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  padding: 14px 28px; /* Increased padding for better touch targets */
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Fixed width to prevent text transition changes */
  min-width: 180px; /* Increased width */
  width: 180px;
  height: 48px; /* Increased height */
}

.hero-button-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.hero-button-icon,
.hero-button-arrow {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

/* Smooth icon transitions */
.hero-button-icon svg,
.hero-button-arrow svg {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: center;
}

/* Check mark animation for added state */
.hero-button-icon .check-animation {
  animation: checkmarkDraw 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes checkmarkDraw {
  0% {
    stroke-dasharray: 0 24;
    stroke-dashoffset: 24;
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    stroke-dasharray: 24 24;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: scale(1);
  }
}

.hero-button-text {
  font-size: 12px;
  white-space: nowrap;
  text-align: left;
  flex: 1;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.hero-shine-effect {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.6s ease;
  z-index: 1;
}

.hero-primary-action-button:hover .hero-shine-effect,
.hero-secondary-action-button:hover .hero-shine-effect {
  left: 100%;
}

.hero-primary-action-button:hover .hero-button-icon,
.hero-secondary-action-button:hover .hero-button-arrow {
  transform: translateX(2px);
}

.hero-primary-action-button {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.15), rgba(var(--gold-rgb), 0.08)) !important;
  color: var(--kelp-900);
  
  position: relative;
  transition: all 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-primary-action-button:hover {
  transform: translateY(-2px);
 
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.25), rgba(var(--gold-rgb), 0.12)) !important;

}

.hero-secondary-action-button {
  background: rgba(var(--kelp-100-rgb), 0.3) !important;
  color: var(--kelp-800);
  position: relative;
  transition: all 0.25s ease, transform 0.2s ease;
}

.hero-secondary-action-button:hover {
  background: rgba(var(--kelp-100-rgb), 0.5) !important;
  color: var(--kelp-700);
  border-color: rgba(var(--kelp-300-rgb), 0.6);
  transform: translateY(-1px);
}

/* Updated button line effects - fixed positioning */
.hero-primary-action-button::before,
.hero-primary-action-button::after,
.hero-secondary-action-button::before,
.hero-secondary-action-button::after {
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-200), transparent);
  transition: all 0.4s ease;
}
.hero-primary-action-button::before,
.hero-secondary-action-button::before { 
  top: -2px; 
  display: none; /* Hide top lines initially */
}
.hero-primary-action-button::after,
.hero-secondary-action-button::after { 
  bottom: -2px; 
  opacity: 0.6;
}
.hero-primary-action-button:hover::before,
.hero-secondary-action-button:hover::before { 
  top: -8px; 
  display: block;
  opacity: 0.8;
}
.hero-primary-action-button:hover::after,
.hero-secondary-action-button:hover::after { 
  bottom: -8px; 
  opacity: 1;
}

.cta-separator-line {
  width: 1px;
  height: 20px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--kelp-400),
    transparent
  );
  margin: 0 0.5rem;
  display: none !important;
}

/* Hero Variant Display - inline and compact */
.hero-variant-display {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.variant-display-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.variant-display-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kelp-500);
  padding: 0.25rem 0.75rem;
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-radius: 2px;
  white-space: nowrap;
}

/* Luxury Elegant Lines */
.hero-luxury-lines { display: none !important; }

.luxury-line { display: none !important; }

.luxury-line-1 { display: none !important; }

.luxury-line-2 { display: none !important; }

/* Hero Error Message */
.hero-error-message {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(var(--kelp-50-rgb), 0.7), rgba(var(--kelp-100-rgb), 0.5));
 
  border-radius: 3px;
  display: flex;
  align-items: center;
}

.error-text {
  font-size: 0.75rem;
  color: var(--kelp-800);
  letter-spacing: 0.04em;
}

/* Animation Phases */
.hero-section.intro-phase .hero-background-title {
  opacity: 1;
}

.hero-section.card-center-phase .hero-background-title {
  opacity: 0.5;
}

.hero-section.final-phase .hero-background-title {
  opacity: 0.05;
}

.hero-section.final-phase .hero-content-section {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Mobile Responsive - Clean & Luxurious Layout inspired by ProductInfo */
@media (max-width: 768px) {
  /* Luxury top line above content */
  .hero-content-top-line {
    width: 80%;
    height: 1px;
    margin: 0 auto 8px auto;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(var(--kelp-300-rgb), 0.35),
      rgba(var(--kelp-400-rgb), 0.55),
      rgba(var(--kelp-300-rgb), 0.35),
      transparent
    );
  }

  /* Hero Content Section - Clean positioning */
  .hero-content-section {
    position: absolute;
    left: 5%;
    bottom: 25%;
    top: auto;
    transform: none;
    width: 90%;
    z-index: 50;
  }

  .hero-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Mobile Layout Container - Clean structure */
  .hero-mobile-layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 100%;
  }
  .hero-cta-section::before{
    top: 0px !important;
  }

  /* Collection Label - Centered with clean spacing */
  .hero-collection-label {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .hero-collection-label .label-text {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--kelp-500);
    opacity: 0.8;
  }

  /* Product Title Row - Clean horizontal layout */
  .hero-product-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
    gap: 1rem;
  }

  /* Product Title - Clean typography */
  .hero-product-title {
    text-align: left;
    margin: 0;
    padding: 0;
    flex: 1;
  }

  .hero-product-title .title-main {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    font-weight: 650;
    line-height: 0.95;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }

  .hero-product-title .title-sub {
    font-size: clamp(0.8rem, 3vw, 1rem);
    font-weight: 400;
    line-height: 1.1;
    opacity: 0.85;
    letter-spacing: 0.05em;
  }

  /* Price Container - Clean alignment */
  .hero-product-price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
  }

  .hero-price-display {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
  }

  .price-amount {
    font-size: 1rem;
    font-weight: 500;
    color: var(--kelp-700);
    letter-spacing: -0.01em;
  }

  /* Variant Display Section - Clean structure */
  .hero-variant-display-section {
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
  }

  .variant-display-content {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 0;
    background: transparent;
  }

  .variant-display-content::before {
    display: none;
  }

  .variant-display-items {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .variant-display-item {
    padding: 0.25rem 0.5rem;
    background: rgba(var(--kelp-50-rgb), 0.4);
    border-radius: 3px;
    flex-shrink: 0;
  }

  .variant-display-item.color-display {
    background: rgba(var(--kelp-100-rgb), 0.3);
  }

  .selected-color-swatch {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  }

  .color-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kelp-600);
  }

  .variant-value {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kelp-600);
  }

  .variant-divider {
    width: 1px;
    height: 12px;
    background: rgba(var(--kelp-300-rgb), 0.4);
    margin: 0 0.25rem;
  }

  /* Hide desktop CTA on mobile */
  .hero-cta-desktop {
    display: none !important;
  }

  /* Hide desktop options button on mobile - but keep mobile options button */
  .hero-content .hero-variants-inline-wrapper {
    display: none !important;
  }

  /* Show mobile options button */
  .hero-variants-mobile {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  /* CTA Section - Centered buttons with clean separation */
  .hero-cta-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem auto 0;
    padding-top: 0;
    position: relative;
  }

  /* Global CTA outside content section */
  .hero-cta-global {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) !important;
    bottom: 15%;
    width: 90%;
    z-index: 1000 !important; /* above content and other elements, below modals */
    pointer-events: auto !important; /* Override parent's pointer-events: none */
  }

  .hero-primary-action-button,
  .hero-secondary-action-button {
    min-width: 160px !important;
    width: 160px !important;
    height: 38px !important;
    padding: 12px 24px !important;
    border-radius: 3px !important;
    pointer-events: auto !important; /* Ensure buttons are clickable on mobile */
    touch-action: manipulation; /* Improve touch response */
  }

  .hero-button-text {
    font-size: 12px !important;
    text-align: left;
    flex: 1;
  }

  .hero-button-icon,
  .hero-button-arrow {
    width: 16px !important;
    height: 16px !important;
  }

  .hero-button-content {
    gap: 8px;
    justify-content: space-between;
  }
  
  .cta-separator-line {
    width: 1px;
    height: 20px;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--kelp-400),
      transparent
    );
    margin: 0 0.5rem;
  }

  /* Card adjustments for mobile */
  .hero-card-container {
    height: 75vh;
    min-height: 600px;
  }

  .hero-gallery {
    top: 25%;
    transform: translate(-50%, -50%);
  }

  .hero-gallery .gallery-slide {
    width: 50vw !important;
    height: 50vw !important;
    min-width: 220px !important;
    min-height: 280px !important;
    max-width: 260px !important;
    max-height: 320px !important;
  }

  .hero-background-title .background-title {
    font-size: clamp(1.2rem, 4vw, 2.5rem);
  }

  /* Hide desktop elements on mobile */
  .hero-variants-fly-anchor {
    display: none !important;
  }

  .hero-variants-inline {
    display: none !important;
  }
}

/* Pattern Animation Keyframes - REMOVED FOR PERFORMANCE */
/* Infinite CSS animations removed to prevent performance issues and memory leaks */

/* Pattern layer animations - REMOVED FOR PERFORMANCE */
/* All infinite CSS animations removed to prevent performance issues and memory leaks */
/* Card lighting effects preserved through static transforms and gradients */

/* 3D depth effects */
.hero-gallery .gallery-slide {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hero-gallery .gallery-slide .pattern-layer-1 {
  transform: translateZ(1px);
}

.hero-gallery .gallery-slide .pattern-layer-2 {
  transform: translateZ(2px);
}

.hero-gallery .gallery-slide .collection-image-container {
  transform: translateZ(3px);
}

/* Active card styling removed for clean look */

/* Pattern-specific active enhancements removed for clean look */

/* Pattern transition animations - REMOVED FOR PERFORMANCE */
/* Transition animations removed to prevent performance issues */

/* Performance Optimizations */
/* Performance Optimizations - Enhanced */
@media (prefers-reduced-motion: reduce) {
  .hero-product-card,
  .hero-product-info,
  .hero-background-title,
  .pattern-layer-1,
  .pattern-layer-2 {
    /* transition removed for performance */
    animation: none;
  }
}

/* Global animation disable for performance */
.hero-gallery .gallery-slide .pattern-layer-1,
.hero-gallery .gallery-slide .pattern-layer-2 {
  animation: none !important;
  transform: translateZ(1px); /* Static transform only */
}

.hero-gallery .gallery-slide .pattern-layer-2 {
  transform: translateZ(2px); /* Static transform only */
}

/* Hero Card Visual Elements - Inspired by UI Design */
/* Replaced by inline color badge */
.hero-card-ui-badge { display: none; }

.ui-badge-icon {
  font-size: 14px;
}

.ui-badge-text {
  color: white;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Replaced by material pills */
.hero-card-info-overlay { display: none; }

.card-info-title {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-info-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 400;
  text-transform: capitalize;
}

.hero-card-copy-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 13;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  /* transition removed for performance */
}

.hero-card-copy-button:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* =============================================
   Advanced Variant Controls System
   ============================================= */
/* Color Toggle Container - expands left */
.hero-color-toggle-container {
  position: absolute;
  top: 8px;
  left: -20px;
  z-index: 999999;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--kelp-950);
  border-radius: 3px;
  overflow: hidden;
  /* Initial width - just for the button */
  width: auto;
  min-width: 90px !important;
  height: 34px;
}

/* Inline Color Badge (inside container) */
.hero-color-badge {
  height: 28px;
  padding: 0 10px;
  background: none !important;
  border: none;
  border-radius: 0;
  display: inline-flex; 
  align-items: center; 
  gap: 6px;
  color: var(--gold-dark) !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hero-color-badge:hover {
  background: rgba(var(--gold-rgb), 0.1);
}

.hero-color-badge.open {
  background: rgba(var(--gold-rgb), 0.15);
}


.hero-color-badge .badge-label { font-size: 12px;  }
.hero-color-badge.open { background: rgba(var(--gold-rgb), 0.15); border-color: var(--gold); }

/* Inline Swatches row - positioned inside container */
.hero-inline-swatches {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9999px;
  z-index: 999999; /* above main card */
  pointer-events: auto;
  /* Angled cuts on left side only for better visual effect */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
}

.color-swatch-inline {
  width: 20px; height: 20px; border-radius: 3px;
  border: 1px solid var(--gold-dark);
  display: inline-flex; align-items: center; justify-content: center;
}

.color-swatch-inline .swatch-dot { width: 15px; height: 15px; border-radius: 3px; display: block; }
.color-swatch-inline.selected { border-color: var(--gold); border-radius: 3px;  }

/* =============================================
   Advanced Variant Panels (compact, floating)
   ============================================= */

/* Old panel system removed */

/* Inline swatch selected indicator not used in compact row */

/* Material pills inside image container */
.hero-material-pills {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  z-index: 999998; /* above image and overlays */
  pointer-events: auto;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-50-rgb), 0.65) 0%,
    rgba(var(--kelp-50-rgb), 0.5) 100%
  ) !important;
  height: 52px;
  padding: 6px 12px;
  width: 95%;
  justify-self: center;

   /* Subtle angled cuts on left and right edges */
   clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}

.material-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: rgba(var(--kelp-100-rgb), 0.8);
  width: 100%;
  justify-content: center;

  border-radius: 9999px;
  color: var(--kelp-800);
 
}

.material-pill .pill-icon { width: 14px; height: 14px; color: var(--gold-dark) !important; }

.material-pill .pill-label { 
  font-size: 12px; 
 }

.material-pill.selected { background: 
  var(--kelp-950);  
  color: var(--gold-dark); 
  border-radius: 3px;  
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); 
 }

/* Custom scrollbar for panels */
.panel-content::-webkit-scrollbar { width: 6px; }
.panel-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.panel-content::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }

/* Visual element classes removed for clean look */

/* Image reflection effect - Positioned inside card container */
.hero-image-reflection {
  border-radius: 0 0 3px 3px;
  pointer-events: none;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  mask: linear-gradient(to top, transparent 0%, rgba(var(--kelp-950-rgb), 0.4) 30%, rgba(var(--kelp-950-rgb), 0.7) 60%, rgba(var(--kelp-950-rgb), 0.3) 85%, transparent 100%);
  -webkit-mask: linear-gradient(to top, transparent 0%, rgba(var(--kelp-950-rgb), 0.4) 30%, rgba(var(--kelp-950-rgb), 0.7) 60%, rgba(var(--kelp-950-rgb), 0.3) 85%, transparent 100%);
}

.hero-reflection-image {
  filter: blur(2px);
  -o-object-position: center bottom;
     object-position: center bottom; /* Align to bottom center */
  mask: linear-gradient(to top, transparent 0%, rgba(var(--kelp-950-rgb), 0.4) 30%, rgba(var(--kelp-950-rgb), 0.7) 60%, rgba(var(--kelp-950-rgb), 0.3) 85%, transparent 100%) !important;
  -webkit-mask: linear-gradient(to top, transparent 0%, rgba(var(--kelp-950-rgb), 0.4) 30%, rgba(var(--kelp-950-rgb), 0.7) 60%, rgba(var(--kelp-950-rgb), 0.3) 85%, transparent 100%) !important;
  /* Ensure perfect alignment */
  width: 100%;
  height: 100%;
  display: block;
}

/* Performance optimizations - Cleaned up */
.hero-section.animations-complete {
  transform: translateZ(0);
}

.hero-section.animations-complete * {
  will-change: auto !important;
}

/* Scroll optimization - simplified */
.hero-section.scroll-optimized .gallery-slide {
  transform: translateZ(0);
  will-change: auto;
}



/* =============================================
   Mobile Responsive Styles
   ============================================= */

@media (max-width: 768px) {
  .hero-color-badge { top: -10px; left: -10px; height: 26px; padding: 0 8px; }
  .hero-inline-swatches { top: 0; left: 0; gap: 6px; }
  .color-swatch-inline { width: 18px; height: 18px; }
  .color-swatch-inline .swatch-dot { width: 10px; height: 10px; }
  .hero-material-pills { bottom: -14px; left: 0; gap: 6px; height: 42px; padding: 6px; }
  .material-pill { padding: 6px 8px; }
  .material-pill .pill-label { font-size: 10px; }
  
  /* Fix hero reflection flashing on mobile */
  .hero-image-reflection {
   
    will-change: auto !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    -webkit-transform: none !important;
  }
  
  .hero-reflection-image {
    /* Safari-safe image properties */
    image-rendering: auto !important;
    -webkit-image-rendering: auto !important;
    will-change: auto !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    -webkit-transform: none !important;
    transition: none !important;
  }
}

/* Old Money Dark Color Patterns - Gold and Kelp */
.title-main.pattern-1 {
  background: linear-gradient(135deg, var(--kelp-950) 0%, var(--gold-dark) 30%, var(--kelp-800) 70%, var(--kelp-900) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-main.pattern-2 {
  background: linear-gradient(135deg, var(--kelp-900) 0%, var(--kelp-700) 25%, var(--gold-dark) 50%, var(--kelp-800) 75%, var(--kelp-950) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-main.pattern-3 {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--kelp-900) 20%, var(--kelp-800) 50%, var(--gold-light) 80%, var(--kelp-950) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-main.pattern-4 {
  background: linear-gradient(135deg, var(--kelp-800) 0%, var(--kelp-950) 30%, var(--gold-dark) 60%, var(--kelp-700) 90%, var(--kelp-900) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-main.pattern-5 {
  background: linear-gradient(135deg, var(--kelp-950) 0%, var(--gold-dark) 20%, var(--kelp-800) 40%, var(--kelp-900) 60%, var(--gold-light) 80%, var(--kelp-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card Background Patterns - Inspired by UI Design */
.gallery-slide.pattern-1::after {
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 140, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 69, 0, 0.08) 0%, transparent 50%),
    linear-gradient(45deg, transparent 0%, rgba(255, 165, 0, 0.05) 50%, transparent 100%);
}

.gallery-slide.pattern-2::after {
  background: 
    polygon(50% 0%, 0% 100%, 100% 100%) rgba(192, 192, 192, 0.05),
    radial-gradient(ellipse at 30% 70%, rgba(105, 105, 105, 0.08) 0%, transparent 60%);
}

.gallery-slide.pattern-3::after {
  background: 
    conic-gradient(from 45deg at 50% 50%, transparent 0deg, rgba(255, 215, 0, 0.08) 90deg, transparent 180deg),
    radial-gradient(circle at 60% 40%, rgba(218, 165, 32, 0.06) 0%, transparent 50%);
}

.gallery-slide.pattern-4::after {
  background: 
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 100, 0, 0.03) 10px, rgba(0, 100, 0, 0.03) 20px),
    radial-gradient(ellipse at 25% 75%, rgba(205, 133, 63, 0.08) 0%, transparent 60%);
}

.gallery-slide.pattern-5::after {
  background: 
    radial-gradient(circle at 35% 35%, rgba(75, 0, 130, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 65% 65%, rgba(255, 215, 0, 0.06) 0%, transparent 40%),
    linear-gradient(135deg, rgba(138, 43, 226, 0.04) 0%, transparent 70%);
}

/* Clean Luxury Button Design with Elegant Pseudo Line */
.hero-cta-button {
  position: relative;
  background: linear-gradient(135deg, var(--kelp-950), var(--kelp-700)) !important;
  border: none;
  border-radius: 3px;
  padding: 8px 24px;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  z-index: 100;
  font-size: 12px;
  height: 44px;
  width: 240px;
}

.hero-cta-button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--gold-light) 20%,
    var(--gold) 50%,
    var(--gold-light) 80%,
    transparent 100%
  );
 
  z-index: 1;
}

/* Subtle hover effects */
/* Remove hover transform to avoid CSS-driven animations; rely on Framer */
.hero-cta-button:hover {
  background: linear-gradient(135deg, var(--kelp-900) 0%, var(--kelp-800) 100%);
}

.hero-cta-button.secondary:hover {
  background: linear-gradient(135deg, var(--kelp-700) 0%, var(--kelp-600) 100%);
}

.hero-cta-button.secondary {
  background: linear-gradient(135deg, var(--kelp-300), var(--kelp-100)) !important;
  color: var(--kelp-700);

}

.hero-cta-button.secondary::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--kelp-200) 20%,
    var(--kelp-100) 50%,
    var(--kelp-200) 80%,
    transparent 100%
  );
 
}

/* Secondary button hover removed for performance */


/* Old variant styles removed - replaced with new advanced system */

/* =============================================
   Logo Fallback Styles
   ============================================= */

/* Hero Logo Fallback Styles */
.hero-logo-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 300px; /* Match gallery slide min-height */
  aspect-ratio: 3/4; /* Match typical product image aspect ratio */
  padding: 2rem;
  
  border-radius: 3px; /* Match collection image border radius */
  position: relative;
  overflow: hidden;

}

.hero-logo-fallback .fallback-text {
  margin-top: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kelp-600);
  text-align: center;
  letter-spacing: 0.025em;
  opacity: 0.8;
}

/* Fallback content styles - Old Money Dark Pattern */
.hero-content-section.fallback-content .hero-product-title .title-main {
  background: linear-gradient(
    135deg,
    var(--kelp-950) 0%,
    var(--gold-dark) 30%,
    var(--kelp-800) 70%,
    var(--kelp-900) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-fallback-message {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(var(--kelp-100-rgb), 0.5);
  border-radius: 0.5rem;
  border-left: 3px solid var(--kelp-400);
}

.hero-fallback-message .fallback-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--kelp-600);
  line-height: 1.5;
  font-style: italic;
}

/* Logo fallback card styles */
.gallery-slide.logo-fallback {
  background: rgba(var(--kelp-50-rgb), 0.5);
  
}

.gallery-slide.logo-fallback .card-decoration-top,
.gallery-slide.logo-fallback .card-decoration-bottom {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--kelp-400-rgb), 0.3) 50%,
    transparent 100%
  );
}

 .logo-fallback .card-corner-accent {
  border-color: rgba(var(--kelp-400-rgb), 0.4);
}

/* Slide Counter Styles */
.hero-slide-counter {
  position: absolute;
  top: 30%;
  left: 7%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  color: var(--kelp-500);
  z-index: 12;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity 0.3s ease;
}

.hero-slide-counter .counter-current {
  color: var(--gold-dark);
}

.hero-slide-counter .counter-separator {
  color: var(--kelp-500);
  margin: 0 0.25rem;
}

.hero-slide-counter .counter-total {
  color: var(--kelp-600);
}

/* =============================================
   New Variant Selection Styles
   ============================================= */

/* Variant Section Headers */
.variant-section-header {
  margin-bottom: 8px;
}

.variant-section-header .section-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kelp-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

/* Color Selection Container */
.hero-color-selection-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  left: -60px;
  bottom: 20px;
}
/* Vertical Color Swatches */
.hero-color-swatches-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  background: rgba(var(--kelp-100-rgb), 0.5);
  padding: 4px 8px;
  width: 75px;
  height: auto;

}

.color-swatch-vertical {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  border: 2px solid rgba(var(--kelp-300-rgb), 0.3);
  background: var(--kelp-50);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

.color-swatch-vertical:hover {
  border-color: rgba(var(--kelp-400-rgb), 0.6);
  
}

.color-swatch-vertical.selected {
 
  background: none
}

.color-swatch-vertical .swatch-dot {
  width: 20px;
  height: 20px;
  border-radius: 3px;
 
}

.color-swatch-vertical .checkmark {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: var(--kelp-950);
  border-radius: 50%;
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 2px solid white;
}

/* Material Selection Container */
.hero-material-selection-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  bottom: 20px;
  right: -20px;
}

/* Vertical Material Options */
.hero-material-options-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  width: 140px;
}

.material-option-vertical {
  position: relative;
  padding: 8px 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(var(--kelp-100-rgb), 0.95) 0%, rgba(var(--kelp-50-rgb), 0.3) 100%) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  min-width: 100%;
  justify-content: space-between;
  width: 100%;
}

.material-option-vertical:hover {
  background: rgba(var(--kelp-100-rgb), 0.9);
}

.material-option-vertical.selected {
  background: none;
  color: var(--gold-dark) !important;
 
}

.material-option-vertical .option-label {
  font-size: 13px;
 
  color: var(--kelp-800);
  white-space: nowrap;
}

.material-option-vertical.selected .option-label {
  color: var(--gold-dark);

}

.material-option-vertical .checkmark {
  width: 14px;
  height: 14px;
  color: var(--gold-dark);
  flex-shrink: 0;
}

/* Selected Variant Display - Inline Position */
.hero-variant-display-inline {
  position: relative;
  flex-shrink: 0;
}

.variant-display-content {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background: transparent;
}

.variant-display-content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    var(--kelp-300) 20%, 
    var(--kelp-400) 50%, 
    var(--kelp-300) 80%, 
    transparent 100%
  );
  opacity: 0.6;
}

.variant-display-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.variant-display-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: transparent;
  border-radius: 3px;
  transition: all 0.2s ease;
  pointer-events: auto;
  flex-shrink: 0;
}

.variant-display-item:hover { background: rgba(var(--kelp-100-rgb), 0.3); }



.variant-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--kelp-700);
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.selected-color-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.selected-color-swatch .color-dot { width: 8px; height: 8px; border-radius: 50%; }

.selected-color-swatch .color-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--kelp-700);
  margin: 0;
  white-space: nowrap;
}

/* Uploaded Image Preview */
.uploaded-image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold-dark);
  background: var(--kelp-50);
  flex-shrink: 0;
}

.preview-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.variant-display-item.image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: transparent;
  border-radius: 3px;
  transition: all 0.2s ease;
  pointer-events: auto;
  flex-shrink: 0;
}

.variant-display-item.image-preview:hover {
  background: rgba(var(--kelp-100-rgb), 0.3);
}

.variant-divider {
  width: 1px;
  height: 14px;
  background: linear-gradient(to bottom, transparent, var(--kelp-400), transparent);
  margin: 0 6px;
  opacity: 0.6;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .hero-color-selection-container {
   left: -45px;
  }
  
  
  
  .color-swatch-vertical {
    width: 28px;
    height: 28px;
  }
  
  .color-swatch-vertical .swatch-dot {
    width: 18px;
    height: 18px;
  }
  
  .material-option-vertical {
    padding: 6px 10px;
    min-width: 70px;
  }
  
  .material-option-vertical .option-label {
    font-size: 0.7rem;
  }
  
  .variant-section-header .section-title {
    font-size: 0.7rem;
  }
  
  /* Mobile Variant Display */
  .hero-variant-display-inline {
    flex-shrink: 1;
  }
  
  .hero-price-display {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding:  0;
  }
  
  .variant-display-content {
    padding-left: 8px;
  }
  
  .variant-display-content::before {
    height: 20px;
  }
  
  .variant-display-items {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .variant-display-items::-webkit-scrollbar {
    display: none;
  }
  
  .variant-display-item { padding: 4px 6px; flex-shrink: 0; white-space: nowrap; }
  
  .variant-divider { height: 12px; margin: 0 4px; }
  
  .variant-type-label {
    font-size: 0.5rem;
  }
  
  .variant-value {
    font-size: 10px;
  }
  
  .selected-color-swatch .color-dot {
    width: 8px;
    height: 8px;
  }
  
  .selected-color-swatch .color-name {
    font-size: 10px;
  }
  
  .hero-main-navigation{
    position: absolute;
    bottom: 40% !important;
    left: 0% !important;
  }
  .hero-slide-counter {
    position: absolute;
    top: auto !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 30px !important;
    font-size: 12px;
  }
  
  /* Mobile Navigation Button Effects */
  .hero-main-navigation .luxury-nav-button {
    width: 32px !important;
    height: 32px !important;
  }
  
  .hero-main-navigation .luxury-nav-button:hover:not([disabled]):not(.disabled) {
    transform: scale(1.08);
  }
  
  .hero-main-navigation .luxury-nav-button:active:not([disabled]):not(.disabled) {
    transform: scale(0.92);
  }
  
  .hero-main-navigation .luxury-nav-button[disabled],
  .hero-main-navigation .luxury-nav-button.disabled {
    transform: scale(0.85);
    opacity: 0.2;
  }

  /* Mobile Luxury Lines */
  .luxury-line-1 {
    bottom: 20%;
    left: 50%;
    width: 50px;
    height: 1.5px;
    margin-left: -25px;
  }

  .luxury-line-2 {
    top: 30%;
    right: 25%;
    width: 1.5px;
    height: 80px;
  }
}

/* =============================================
   Hero Navigation Custom Styles
   ============================================= */

/* Hero Navigation Container */
.hero-main-navigation {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  z-index: 20;
  pointer-events: none;
  gap: 10px;
  width: 100%;
  padding: 0 2rem;
  justify-content: space-between;
}

/* Override default luxury navigation for hero */
.hero-main-navigation .luxury-navigation {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
 

}

/* Hero Navigation Buttons */
.hero-main-navigation .luxury-nav-button {
  position: relative;
  opacity: 1;
  cursor: pointer;
}

/* Hover Effects */
.hero-main-navigation .luxury-nav-button:hover:not([disabled]):not(.disabled) {
  transform: scale(1.05);
  opacity: 0.9;
 
}





.hero-main-navigation .luxury-nav-button:active:not([disabled]):not(.disabled) .luxury-nav-line,
.hero-main-navigation .luxury-nav-button:active:not([disabled]):not(.disabled) {
  background: var(--gold-light);
}

/* Disabled State - Better Visual Hierarchy */
.hero-main-navigation .luxury-nav-button[disabled],
.hero-main-navigation .luxury-nav-button.disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
  transform: scale(0.9);
  background-color: rgba(var(--kelp-200-rgb), 0.3);

}

.hero-main-navigation .luxury-nav-button[disabled] .luxury-nav-line,
.hero-main-navigation .luxury-nav-button[disabled] .luxury-nav-arrow,
.hero-main-navigation .luxury-nav-button.disabled .luxury-nav-line,
.hero-main-navigation .luxury-nav-button.disabled .luxury-nav-arrow {
  background: rgba(var(--kelp-400-rgb), 0.4);
  opacity: 0.5;
}

/* Focus States for Accessibility */
.hero-main-navigation .luxury-nav-button:focus-visible:not([disabled]):not(.disabled) {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
  transform: scale(1.02);
}


/* Hero Logo Fallback - For when images are loading */
.hero-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
 
  border-radius: 3px;
  position: relative;
  min-height: 300px; /* Match the gallery slide min-height */
  aspect-ratio: 3/4; /* Match typical product image aspect ratio */
}

.hero-logo-fallback svg {
  opacity: 0.6;
  animation: logo-pulse 2s ease-in-out infinite;
}

@keyframes logo-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Minimal Image Loading Shine Effect */
.collection-image.loading-shine {
  position: relative;
  overflow: hidden;
}

.collection-image.loading-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.08),
    transparent
  );
  /* animation: minimal-shimmer 3s ease-in-out infinite; */
  z-index: 1;
}

/* @keyframes minimal-shimmer {
  0% {
    left: -50%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
} */

/* Image Loading States */
.collection-image-container {
  position: relative;
}

.collection-image-container .collection-image {
  transition: opacity 0.3s ease-in-out;
}

/* Prevent layout shift during image loading */
.hero-gallery .gallery-slide {
  min-height: 300px;
}

/* Hero Variants Container - Custom positioning */
.hero-variants-container {
 
  border-radius: 8px;
  padding: 12px;
 
}

.hero-variants-container .variant-group {
  margin-bottom: 8px;
}

.hero-variants-container .variant-group:last-child {
  margin-bottom: 0;
}

.hero-variants-container .variant-group__title {
  font-size: 11px;
  font-weight: 500;
  color: rgba(var(--kelp-800-rgb), 0.9);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.hero-variants-container .variant-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hero-variants-container .color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(var(--kelp-300-rgb), 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.hero-variants-container .color-swatch:hover {
  transform: scale(1.1);
  border-color: rgba(var(--kelp-300-rgb), 0.6);
}

.hero-variants-container .color-swatch.selected {
  border-color: var(--kelp-300);
  box-shadow: 0 0 0 2px rgba(var(--kelp-300-rgb), 0.3);
}

.hero-variants-container .variant-button {
  padding: 4px 8px;
  font-size: 10px;
  background: rgba(var(--kelp-800-rgb), 0.6);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.2);
  border-radius: 4px;
  color: var(--kelp-200);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hero-variants-container .variant-button:hover {
  background: rgba(var(--kelp-700-rgb), 0.8);
  border-color: rgba(var(--kelp-300-rgb), 0.4);
}

.hero-variants-container .variant-button--selected {
  background: rgba(var(--kelp-300-rgb), 0.2);
  border-color: var(--kelp-300);
  color: var(--kelp-100);
}

/* =============================================
   Hero-specific inline variants (toggleable)
   ============================================= */
.hero-variants-inline-wrapper {  position: relative; display: inline-flex; align-items: center; gap: 8px; }

.hero-variants-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  color: rgba(var(--kelp-800-rgb), 0.6);
  background: none !important;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.hero-variants-toggle-button:hover { background: rgba(var(--kelp-200-rgb), 0.35); }
.hero-variants-toggle-button:active { transform: scale(0.98); }
.hero-variants-toggle-button.open { background: rgba(var(--kelp-200-rgb), 0.45); }
.hero-variants-toggle-button .toggle-label { 
  font-size: 0.95rem; 
  letter-spacing: 0.01em; 
  color: rgba(var(--kelp-800-rgb), 0.8);
  font-weight: 500;
}
.hero-variants-toggle-button .toggle-icon { font-size: 16px; line-height: 16px; }

/* Vertical line at the left of the options button */
.hero-variants-toggle-button::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: linear-gradient(to bottom, transparent, var(--kelp-400), transparent);
}

.hero-variants-inline {
  margin-top: 10px;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Override default variant UI inside hero */
.hero-variants-inline .variant-group__title { color: rgba(var(--kelp-800-rgb), 0.6); font-size: 11px; letter-spacing: 0.05em; }
.hero-variants-inline .variant-group__title-selection  { display: none; }

/* Force inline row layout for hero variant groups */
.hero-variants-inline .variant-group { display: inline-flex; align-items: center; gap: 10px; width: auto; flex-wrap: nowrap; margin: 0; }
.hero-variants-inline .variant-group__title-wrapper { margin: 0; }
.hero-variants-inline .variant-group__title-content { display: inline-flex; align-items: center; gap: 8px; }
.hero-variants-inline .variant-group__title-content,
.hero-variants-inline .variant-group__title {
  line-height: 1;
  margin: 0;
  padding: 0;
}
/* Ensure the material row aligns vertically centered with its label */
.hero-variants-inline .material-grid-inline { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.hero-variants-inline .material-option-inline .material-option-inline-text { display: inline-block; line-height: 1; vertical-align: middle; text-transform: none !important; color: rgba(var(--kelp-800-rgb), 0.9); }
.hero-variants-inline .variant-group__options { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }

/* Hide guide and dynamic text inside hero */
.hero-variants-inline .variant-guide-text { display: none; }
.hero-variants-inline .variant-dynamic-text { display: none; }

/* Elegant divider between color and material groups */
.hero-variants-inline .variant-group:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 20px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--kelp-300-rgb), 0.3) 20%,
    rgba(var(--kelp-300-rgb), 0.5) 50%,
    rgba(var(--kelp-300-rgb), 0.3) 80%,
    transparent 100%
  );
  margin: 0 8px;
  flex-shrink: 0;
}

/* Material inline row tweaks */
.hero-variants-inline .material-container-with-arrow { margin: 0; }
/* reset any old material chip styling */
.hero-variants-inline .material-option-inline { background: transparent; border: none; }
.hero-variants-inline .material-option-inline.selected { background: transparent; }

/* Color swatch tweaks for hero */
.hero-variants-inline .variant-color-scroll-container { display: inline-flex; align-items: center; gap: 8px; width: 100%; }
.hero-variants-inline .variant-color-nav { display: none; }
.hero-variants-inline .variant-color-outer-wrapper { width: auto; overflow: visible; }
.hero-variants-inline .variant-color-inner-wrapper { display: inline-flex; gap: 8px; transform: none !important; }
.hero-variants-inline .variant-swatch {
  border: 1px solid rgba(var(--kelp-300-rgb), 0.25);
  box-shadow: none;
}
.hero-variants-inline .variant-swatch--selected { box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.35); border-color: var(--gold); }

/* Hero-only overrides for variant swatches (inline bar and inline-only bar) */
.hero-variants-inline .variant-swatch,
.hero-color-inline-only .variant-swatch {
  width: 30px !important;
  height: 30px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  background: none !important;
}



@media (max-width: 768px) {
  .hero-variants-inline .variant-swatch,
  .hero-color-inline-only .variant-swatch {
    width: 25px !important;
    height: 25px !important;
    border-radius: 3px !important;
  }
}

.hero-variants-inline .variant-dynamic-text .variant-dynamic-text-content { color: var(--kelp-300); font-size: 11px; }

/* Hide any horizontal rule/lines within option blocks for hero */
.hero-variants-inline .variant-group__options hr,
.hero-variants-inline .variant-group__options .variant-divider,
.hero-variants-inline .variant-group__options::before,
.hero-variants-inline .variant-group__options::after,
.hero-variants-inline .variant-group__title-content::before,
.hero-variants-inline .variant-group__title-content::after,
.hero-variants-inline .variant-group__title::after,
.hero-variants-inline .variant-group__title::before { display: none !important; content: none !important; }

/* Material: make options smaller, text-only, with inline divider */
.hero-variants-inline .material-option-inline {
  background: transparent;
  border: none;
  padding: 0 10px; /* symmetric padding around each item */
  border-radius: 0;
  min-height: auto;
  height: auto;
  line-height: 1.2;
  color: var(--kelp-100);
  display: inline-flex;
  align-items: center;
  position: relative; /* for divider placement */
}
.hero-variants-inline .material-option-inline .material-option-inline-text {
  font-size: 11px;
  letter-spacing: 0.02em;
}
.hero-variants-inline .material-option-inline.selected {
  background: transparent;
  color: var(--gold-dark);
  border: none;
}
.hero-variants-inline .material-scroll-arrow { display: none !important; }
.hero-variants-inline .material-option-inline:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -5px; /* sits between this and next item */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: linear-gradient(to bottom, transparent, rgba(var(--kelp-300-rgb), 0.7), transparent);
}

/* Align titles and options */
.hero-variants-inline .variant-group { align-items: center; }
.hero-variants-inline .variant-group__title { display: inline-flex; align-items: center; }

/* Fully disable shimmer in hero */
.collection-image.loading-shine::after { display: none !important; animation: none !important; }
.collection-image.loading-shine { overflow: visible; }

@media (max-width: 768px) {
  /* Hide desktop-style inline/fly variants on mobile; use bottom sheet portal */
  .hero-variants-fly-anchor { display: none !important; }
  .hero-variants-inline { display: none !important; }
  .hero-variants-inline-wrapper { padding: 0 12px; }
  
  /* Ensure mobile options button is visible */
  .hero-variants-mobile.hero-variants-inline-wrapper {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
  .hero-variants-toggle-button { height: 34px; padding: 0 10px ; }
  .hero-variants-inline { max-width: 100%; flex-wrap: wrap; row-gap: 8px; }
  .hero-variants-inline .variant-group { flex-wrap: nowrap; width: 100%; justify-content: flex-start; }
  .hero-variants-inline .variant-group__title { min-width: 80px; }
  .hero-variants-inline .variant-color-outer-wrapper { overflow-x: auto; }
  .hero-variants-inline .variant-color-inner-wrapper { gap: 6px; }
  .hero-variants-inline .material-grid-inline { overflow-x: auto; gap: 8px; }
  .hero-variants-inline .material-option-inline { padding: 0 8px; }
  .hero-variants-inline .material-option-inline:not(:last-child)::after { right: -4px; height: 12px; }
  /* Remove mobile inline-only overrides; use default panel via toggle */
  .hero-color-inline-only { display: none !important; }
  .hero-variants-toggle-button .toggle-label{
    font-size: 0.75rem;
  }
  .hero-variants-panel-mobile .leorre-panel-header-section{
    padding: 0 !important; /* move padding to header section for hero */
  }
  .hero-variants-panel-mobile{
    padding: 1.25rem 1rem 1.9rem 1rem !important; /* tighter top, extra bottom for reachability */
  }
  /* Minimal checkmark for selected items inside hero panel */
  .hero-variants-panel-mobile .variant-swatch.variant-swatch--selected::after,
  .hero-variants-panel-mobile .material-option-inline.selected::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    border-right: 2px solid var(--gold-dark);
    border-bottom: 2px solid var(--gold-dark);
    transform: rotate(45deg);
  }
  .hero-variants-panel-mobile .material-option-inline.selected { color: var(--gold-dark); }
  .hero-color-inline-only .variant-dynamic-text { display: none !important; }
  /* In the toggle flyout, show only material on mobile */
  .hero-material-only .variant-group[data-group-type="color"] { display: none !important; }
  .hero-material-only .variant-group[data-group-type="material"] { display: inline-flex; }
  .hero-variants-inline-wrapper{
    padding: 0 12px;
  }
}

/* Hero Variant Panel - Desktop Left Side */
.hero-variants-panel-desktop.leorre-panel-portal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 480px !important;
  height: 100dvh !important;
 
  border-right: 1px solid rgba(var(--kelp-200-rgb), 0.3) !important;
  border-left: none !important;
  box-shadow: 
    4px 0 20px rgba(0, 0, 0, 0.1),
    2px 0 8px rgba(0, 0, 0, 0.05) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

/* RTL Support - Flip to right side */
.hero-variants-panel-desktop.leorre-panel-portal[dir="rtl"] {
  left: auto !important;
  right: 0 !important;
  border-right: none !important;
  border-left: 1px solid rgba(var(--kelp-200-rgb), 0.3) !important;
  box-shadow: 
    -4px 0 20px rgba(0, 0, 0, 0.1),
    -2px 0 8px rgba(0, 0, 0, 0.05) !important;
}

/* Panel Content Styling */
.hero-variants-panel-desktop .leorre-panel-content-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.hero-variants-panel-desktop .leorre-panel-content-container {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}

.hero-variants-panel-desktop .leorre-panel-header-section {
  padding: 1.5rem 2rem 1rem 2rem;
  border-bottom: 1px solid rgba(var(--kelp-200-rgb), 0.1);
  background: var(--kelp-50);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Mobile responsive for hero variants */
@media (max-width: 768px) {
  .hero-variants-container {
    top: 15px;
    right: 15px;
    max-width: 150px;
    padding: 8px;
  }
  .hero-variants-fly-anchor{
    top: 0 !important;
  }
  
  .hero-variants-container .color-swatch {
    width: 16px;
    height: 16px;
  }
  
  .hero-variants-container .variant-button {
    padding: 3px 6px;
    font-size: 9px;
  }
}




  /* === Conflict-free Upload Header (new structure) === */
  .upload-panel-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    padding: 5px 15px;
  }
  .upload-panel-header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0.9rem 1rem;
    gap: 0.75rem;
  }
  .upload-panel-title {
    margin: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: var(--kelp-900);
  }
  .upload-panel-close {
    justify-self: end;
  }
  .upload-panel-content-offset {
    padding-top: 56px; /* space under sticky header */
  }
/* ===================================
   Product Design Upload Panel - Leorre Style
   Elegant, luxury aesthetic with refined animations
====================================== */

/* ===================================
   Main Container & Wrapper
====================================== */
.atelier-premium-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    pointer-events: none;
  }
  
  .atelier-premium-container {
    pointer-events: auto;
    background: rgba(var(--kelp-50-rgb), 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }
  
  /* Decorative Pattern - Subtle Background */
  .atelier-premium-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: radial-gradient(circle at 50% 0%, rgba(var(--gold-rgb), 0.03), transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  
  /* ===================================
     Header Section
  ====================================== */
  .atelier-premium-header {
    padding: 1.5rem 1rem 1rem 1rem;

    position: sticky;
    top: 0;
 
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* New fixed header for upload panel to avoid footer conflicts */
  .leorre-upload-fixed-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
    background: rgba(var(--kelp-50-rgb), 0.95);
  
  }
  .leorre-upload-fixed-header-inner {
    display: grid;
    grid-template-columns: 1fr auto; /* title left (1fr), button right (auto) */
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
  }
  .leorre-upload-fixed-title {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Force title left and button right regardless of dir */
  .leorre-upload-fixed-header-inner .leorre-panel-main-title {
    margin: 0;
    text-align: left;
  }
  .leorre-upload-fixed-header-inner .leorre-panel-close-btn {
    justify-self: end;
  }

  /* Offset inner content for fixed header height */
  .leorre-panel-content-inner {
    padding-top: 56px;
  }

  /* Upload panel header alignment */
  .leorre-upload-header-align {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .leorre-upload-header-title {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .leorre-panel-close-btn.luxury-submenu-style {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .atelier-premium-title-container {
    flex: 1;
  }
  
  .atelier-premium-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gold-dark);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  
  /* Close Button - Luxury Style */
  .atelier-premium-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: none;
    flex-shrink: 0;
    margin-left: 1rem;
  }
  
  .atelier-premium-close:hover { background: rgba(var(--gold-rgb), 0.1); }
  
  .atelier-premium-close-x { transition: none; }
  
  .atelier-premium-close:hover .atelier-premium-close-x { transform: none; }
  
  /* ===================================
     Content Area
  ====================================== */
  .atelier-premium-content {
    flex: 1;
    padding: 1.5rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
  }
  
  /* ===================================
     Dropzone Section
  ====================================== */
.atelier-premium-dropzone-container {
    margin-top: 1rem;
  }
  
  .atelier-premium-dropzone {
    border-radius: 3px;
    padding: 2rem 1.5rem;
    background: rgba(var(--kelp-50-rgb), 0.3);
    transition: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .atelier-premium-dropzone::before { display: none; }
  
  .atelier-premium-dropzone:hover { border-color: rgba(var(--gold-rgb), 0.5); }
  
  .atelier-premium-dropzone-active { border-color: var(--gold); }
  
  /* Dropzone Content Layout */
  .atelier-premium-dropzone-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }
  
  /* Example Column */
  .atelier-premium-example-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .atelier-premium-example-showcase {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
  }
  
  .atelier-premium-example-item {
    position: relative;
    flex: 1;
    max-width: 150px;
    border-radius: 0;
    overflow: visible;
  }
  
  .atelier-premium-example-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kelp-100);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent layout shift - fixed size */
    min-height: 0;
  }
  
  .atelier-premium-example-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 2;
    /* Prevent layout shift */
    display: block;
    /* Ensure image is visible once loaded */
    opacity: 1 !important;
    transition: opacity 0.3s ease-in-out;
  }
  
  .atelier-premium-example-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kelp-100);
    z-index: 1;
    /* Same size as container to prevent shift */
    border-radius: 50%;
  }
  
  .atelier-premium-example-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--kelp-200-rgb), 0.3);
    z-index: 1;
    /* Same size as container to prevent shift */
    border-radius: 50%;
  }
  
  /* Center logo within fallback and loading */
  .atelier-premium-example-fallback svg,
  .atelier-premium-example-loading svg {
    display: block;
    margin: 0 auto;
  }
  
  .atelier-premium-example-badge {
    position: static; /* No longer absolute, follows normal flow */
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  
  .atelier-premium-example-badge.good {
    background: var(--accent-olive);
    color: var(--kelp-50);
  }
  
  .atelier-premium-example-badge.poor {
    background: rgba(var(--kelp-800-rgb), 0.9);
    color: var(--kelp-100);
  }
  
  
  /* Text Column */
  .atelier-premium-text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    gap: 1rem;
    justify-content: space-between;
  }
  
  /* Decorative Icon */
  .atelier-premium-decorative-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    position: relative;
  }
  
  .atelier-premium-decorative-diamond {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    transform: rotate(45deg);
    position: absolute;
    border-radius: 2px;
  }
  
  .atelier-premium-decorative-inner {
    position: absolute;
    inset: 8px;
    background: var(--kelp-50);
    transform: rotate(45deg);
    border-radius: 2px;
  }
  
  .atelier-premium-decorative-rays {
    position: absolute;
    inset: 0;
    animation: rotate 20s linear infinite;
  }
  
  .atelier-premium-decorative-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 20%;
    background: linear-gradient(to bottom, var(--gold), transparent);
    transform-origin: center -50%;
  }
  
  .atelier-premium-decorative-ray:nth-child(1) { transform: rotate(0deg); }
  .atelier-premium-decorative-ray:nth-child(2) { transform: rotate(45deg); }
  .atelier-premium-decorative-ray:nth-child(3) { transform: rotate(90deg); }
  .atelier-premium-decorative-ray:nth-child(4) { transform: rotate(135deg); }
  .atelier-premium-decorative-ray:nth-child(5) { transform: rotate(180deg); }
  .atelier-premium-decorative-ray:nth-child(6) { transform: rotate(225deg); }
  .atelier-premium-decorative-ray:nth-child(7) { transform: rotate(270deg); }
  .atelier-premium-decorative-ray:nth-child(8) { transform: rotate(315deg); }
  
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  /* Recommendations Section */
  .atelier-premium-recommendations {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
 
  
  }
  
  .atelier-premium-recommendations-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kelp-800);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Footer actions */
  .atelier-premium-footer {
    position: sticky;
    bottom: 0;
    background: rgba(var(--kelp-50-rgb), 0.95);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 10;
  }

  .atelier-premium-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
  }
  
  /* Footer with header line at top */
  .footer-with-line::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
    opacity: 0.6;
  }
  
  /* First button in footer positioned differently */
  .footer-first-button {
    position: relative;
    z-index: 1;
  }

  .atelier-premium-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 42px;
    border-radius: 2px;
    border: 1px solid rgba(var(--kelp-300-rgb), 0.4);
    background: #fff;
    color: var(--kelp-900);
    transition: all 0.25s ease;
  }

  .atelier-premium-action.primary {
    background: var(--kelp-950);
    color: var(--gold);
    border-color: rgba(var(--kelp-700-rgb), 0.6);
  }

  .atelier-premium-action.primary:hover {
    background: linear-gradient(135deg, var(--kelp-800), var(--kelp-900));
    transition: background 150ms ease;
  }

  .atelier-premium-action.secondary:hover {
    background: rgba(var(--kelp-50-rgb), 0.6);
    transition: background 150ms ease;
  }
  
  /* Success animation for button */
  .atelier-premium-action.success {
    pointer-events: none;
  }
  
  .leorre-success-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .leorre-checkmark {
    animation: checkmarkDraw 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  }
  
  @keyframes checkmarkDraw {
    0% {
      stroke-dasharray: 0, 20;
      stroke-dashoffset: 0;
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      stroke-dasharray: 20, 0;
      stroke-dashoffset: -10;
      opacity: 1;
    }
  }
  
  .atelier-premium-recommendation {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .atelier-premium-recommendation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.1);
    color: var(--gold-dark);
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  
  .atelier-premium-recommendation-text {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--kelp-700);
    margin: 0;
  }
  
  /* Upload Button */
  .atelier-premium-upload-button {
    width: 100%;
    height: 45px;
    border: 1px solid rgba(var(--kelp-300-rgb), 0.4);
    background: var(--kelp-950);
    color: var(--gold-dark);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: none;
  }
  
  .atelier-premium-upload-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
    opacity: 0.6;
  }
  
  .atelier-premium-upload-button::after { display: none; }
  
  .atelier-premium-upload-button:hover {
    background: linear-gradient(135deg, var(--kelp-800), var(--kelp-900));
    color: var(--gold);
    transition: background 150ms ease, color 150ms ease;
  }
  
  .atelier-premium-button-layers {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
  }
  
  .atelier-premium-button-base {
    position: absolute;
    inset: 0;
    background: inherit;
  }
  
  .atelier-premium-button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-25deg);
    transition: left 0.3s ease;
  }
  
  .atelier-premium-upload-button:hover .atelier-premium-button-shine {
    left: 120%;
  }
  
  .atelier-premium-button-surface {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 1;
  }
  
  .atelier-premium-button-content {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  
  .atelier-premium-button-text {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  
  .atelier-premium-button-icon {
    display: flex;
    align-items: center;
    transition: transform 150ms ease;
  }
  
  .atelier-premium-upload-button:hover .atelier-premium-button-icon {
    transform: scale(1.03);
  }
  
  /* ===================================
     Editor Section
  ====================================== */
  .atelier-premium-editor {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: -10px;
  }
  
  .atelier-premium-editor-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .atelier-premium-editor-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--kelp-700);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: none !important;
  }
  
  .atelier-premium-editor-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Crop Area */
  .atelier-premium-crop-area {
    position: relative;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
  }
  
  /* Decorative Borders */
  .vertical-border-left,
  .vertical-border-right {
  display: none !important;
  }
  
  .vertical-border-left {
    left: 0;
  }
  
  .vertical-border-right {
    right: 0;
  }
  
  /* Corner Diamonds */
  .corner-diamond {
  display: none !important;
  }
  
  .corner-diamond-tl { top: 0; left: 0; }
  .corner-diamond-tr { top: 0; right: 0; }
  .corner-diamond-bl { bottom: 0; left: 0; }
  .corner-diamond-br { bottom: 0; right: 0; }

/* Divider between crop and preview */
.atelier-premium-section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--kelp-200-rgb), 0.6), transparent);
  margin: 8px 0;
}

/* Place guidance absolutely within the editor container */
.atelier-premium-editor-inner .atelier-premium-preview-guidance {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: rgba(var(--kelp-50-rgb), 0.8);
  
  border-radius: 3px;
  z-index: 5;
}

/* Apply shine text effect only while analyzing */
.atelier-premium-editor-inner .atelier-premium-preview-guidance.analyzing .atelier-premium-guidance-text {
  background: linear-gradient(
    90deg,
    var(--kelp-700) 0%,
    var(--gold-light) 50%,
    var(--kelp-700) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s linear infinite;
}

/* Improve guidance icon centering */
.atelier-premium-guidance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
  
  /* Crop Frame */
  .atelier-premium-crop-frame {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    margin-bottom: 0.5rem;
    background: transparent;
  }
  
  /* ReactCrop Override for Circular Crop */
  .ReactCrop {
    max-width: 100%;
  }
  
.ReactCrop__crop-selection {
    border-radius: 50% !important;
    border: 2px solid var(--gold) !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  
  .crop-selection-hint {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(var(--kelp-900-rgb), 0.9);
    color: var(--gold);
    padding: 0.25rem 0.75rem;
    border-radius: 2px;
    font-size: 0.7rem;
    white-space: nowrap;
    pointer-events: none;
  }
  
  .crop-hint-text {
    letter-spacing: 0.03em;
  }
  
  /* Crop Controls */
  .atelier-premium-crop-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  
  .control-button {
    width: 30px;
    height: 30px;
    background: rgba(var(--kelp-50-rgb), 0.8);
    border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--kelp-700);
   
  }
  
  .control-button:hover {
    background: rgba(var(--gold-rgb), 0.12);
    border-color: rgba(var(--gold-rgb), 0.35);
    color: var(--gold);
    transform: scale(1.02);
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  }
  
  /* Preview Area */
  .atelier-premium-preview-area {
    position: relative;
    background: transparent;
    border-radius: 0;
    padding: 0.5rem 0;
    border: none;
    gap: 0.75rem;
    width: 150px;
    height: 150px;
    align-self: center !important;
  }
  
  .atelier-premium-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kelp-100);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .atelier-premium-preview-accent {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.4), transparent);
    opacity: 0.6;
  }
  
  .atelier-premium-preview-accent-top {
    top: 0;
  }
  
  .atelier-premium-preview-accent-bottom {
    bottom: 0;
  }
  
  .atelier-premium-preview-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .atelier-premium-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--kelp-400);
  }
  
  .atelier-premium-preview-placeholder p {
    font-size: 0.75rem;
    margin: 0;
  }
  
  /* Preview Guidance */
  .atelier-premium-preview-guidance {
    padding: 0.75rem;
    background: rgba(var(--kelp-50-rgb), 0.5);
    border-radius: 3px;
    position: relative;
  }
  

  
  .atelier-premium-guidance-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .atelier-premium-guidance-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.2);
    flex-shrink: 0;
  }
  
  .atelier-premium-guidance-text {
    font-size: 0.7rem;
    color: var(--kelp-700);
    line-height: 1.4;
    display: none !important;
  }
  
  .atelier-premium-preview-guidance.needs-adjustment {
    background: rgba(var(--gold-rgb), 0.05);
 
  }
  
.atelier-premium-editor-inner .atelier-premium-preview-guidance-overlay {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  width: min(92%, 560px);
  padding: 8px 12px;
  z-index: 6;
}

/* Temporary: hide crop analysis overlay and all its content */
.atelier-premium-preview-guidance-overlay {
  display: none !important;
  visibility: hidden !important;
}

/* Hide all text content inside the guidance overlay */
.atelier-premium-preview-guidance-overlay * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide any pseudo-elements that might show text */
.atelier-premium-preview-guidance-overlay::before,
.atelier-premium-preview-guidance-overlay::after {
  display: none !important;
  content: none !important;
}
  
  /* Analysis Error */
  .atelier-premium-analysis-error {
    padding: 0.75rem;
    background: rgba(220, 38, 38, 0.05);
    border-radius: 3px;
    position: relative;
  }
  
  .atelier-premium-analysis-error::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.3), transparent);
  }
  
  .atelier-premium-error-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(185, 28, 28);
    font-size: 0.7rem;
  }
  
  .atelier-premium-retry-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 2px;
    color: rgb(185, 28, 28);
    cursor: pointer;
    margin-left: auto;
    font-size: 0.65rem;
  }
  
  .atelier-premium-retry-button:hover {
    background: rgba(220, 38, 38, 0.15);
  }
  
  /* Editor Actions */
  .atelier-premium-editor-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
  }
  
  .atelier-premium-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .atelier-premium-action.secondary {
    background: transparent;
    color: var(--kelp-700);
    border: 1px solid rgba(var(--kelp-300-rgb), 0.4);
  }
  
  .atelier-premium-action.secondary:hover:not(:disabled) {
    background: rgba(var(--kelp-100-rgb), 0.35);
    border-color: rgba(var(--kelp-400-rgb), 0.55);
    transition: background 150ms ease, border-color 150ms ease;
  }
  
  .atelier-premium-action.primary {
    background: var(--kelp-950);
    color: var(--gold-dark);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
  }
  
  .atelier-premium-action.primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--kelp-800), var(--kelp-900));
    color: var(--gold);
    transition: background 150ms ease, color 150ms ease;
  }
  
  .atelier-premium-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .atelier-premium-action-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-25deg);
    transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  .atelier-premium-action.primary:hover .atelier-premium-action-shine {
    left: 120%;
  }
  
  /* ===================================
     Confirmation Section
  ====================================== */
  .atelier-premium-confirmation {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .atelier-premium-confirmation-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .atelier-premium-confirmation-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  
  }
  
  .atelier-premium-confirmation-preview {
    position: relative;
    width: 150px;
    flex-shrink: 0;
  }
  
  .atelier-premium-confirmation-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kelp-100);
    border: 2px solid rgba(var(--gold-rgb), 0.3);
    margin-bottom: 0.75rem;
  }
  
  .atelier-premium-confirmation-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .atelier-premium-preview-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--kelp-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    padding: 10px;
  }
  .atelier-premium-preview-label svg {
    display: none;
  }
  
  .atelier-premium-chat-agent-minimal {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 0.25rem;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid rgba(var(--gold-light-rgb), 0.3);
    border-radius: 2px;
    color: var(--gold-dark);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .atelier-premium-chat-agent-minimal:hover {
    background: rgba(var(--gold-rgb), 0.1);
    border-color: rgba(var(--gold-rgb), 0.4);
    color: var(--gold);
  }

/* Rotate right arrow to point down in the minimal ask agent button */
.atelier-premium-chat-agent-minimal .ask-agent-arrow {
  transform: none;
  transition: transform 0.2s ease;
}

[dir="rtl"] .atelier-premium-chat-agent-minimal .ask-agent-arrow {
  transform: scaleX(-1);
}
  
  /* Analysis Results in Confirmation */
  .atelier-premium-analysis-results {
    flex: 1;
    overflow-y: auto;
    max-height: 500px;
    width: 100% !important;
  }
  
  -toggle.expanded {
    background: rgba(var(--kelp-100-rgb), 0.3);
  }
  
  .toggle-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .toggle-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
  }
  
  .toggle-text {
    flex: 1;
    text-align: left;
  }
  
  .toggle-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--kelp-800);
    margin-bottom: 0.15rem;
  }
  
  .toggle-subtitle {
    font-size: 0.65rem;
    color: var(--kelp-600);
  }
  
  .toggle-arrow {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
  }
  
 
  /* Analysis Content */
  .analysis-content {
    overflow: hidden;
    background: rgba(var(--kelp-50-rgb), 0.5);
    padding: 1rem;
    /* height/opacity animations handled by Framer Motion */
  }
  
  /* Metrics Grid */
  .metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  
  .metric-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(var(--kelp-100-rgb), 0.3);
    border-radius: 3px;
    position: relative;
  }
  
  .metric-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
    opacity: 0.6;
  }
  
  .metric-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
  }
  
  .metric-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  
  .metric-label {
    font-size: 0.65rem;
    color: var(--kelp-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  
  .metric-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kelp-800);
  }
  
  /* Details Grid */
  .details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  
  .detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(var(--kelp-100-rgb), 0.3);
    border-radius: 3px;
    position: relative;
  }
  
  .detail-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
    opacity: 0.6;
  }
  
  .detail-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
  }
  
  .detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  
  .detail-label {
    font-size: 0.65rem;
    color: var(--kelp-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  
  .detail-value {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kelp-800);
  }
  
  /* Skeleton Loading */
  .analysis-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
  }
  
  .skeleton-line {
    height: 12px;
    background: rgba(var(--kelp-200-rgb), 0.4);
    border-radius: 2px;
  }
  
  .skeleton-line.shine {
    background: linear-gradient(
      90deg,
      rgba(var(--kelp-200-rgb), 0.4) 0%,
      rgba(var(--kelp-300-rgb), 0.6) 50%,
      rgba(var(--kelp-200-rgb), 0.4) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
  
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  
  /* Confirmation Actions */
  .atelier-premium-confirmation-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
  }
  
  .atelier-premium-action.reset {
    background: transparent;
    color: var(--kelp-700);
    border: 1px solid rgba(var(--kelp-300-rgb), 0.4);
  }
  
  .atelier-premium-action.reset:hover {
    background: rgba(var(--kelp-100-rgb), 0.4);
    border-color: rgba(var(--kelp-400-rgb), 0.6);
    transform: translateY(-2px);
  }
  
  .atelier-premium-action.confirm {
    background: var(--kelp-950);
    color: var(--gold-dark);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    flex: 1;
  }
  
  .atelier-premium-action.confirm:hover {
    background: linear-gradient(135deg, var(--kelp-800), var(--kelp-900));
    color: var(--gold);
    transform: translateY(-2px);
  }
  
  /* ===================================
     Processing Animation
  ====================================== */
  .atelier-premium-processing-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--kelp-50-rgb), 0.95);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 100;
  }
  
  .atelier-premium-processing-spinner {
    width: 48px;
    height: 48px;
    position: relative;
  }
  
  .processing-diamond {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    transform: rotate(45deg);
    border-radius: 2px;
    animation: processingPulse 1.5s ease-in-out infinite;
  }
  
  @keyframes processingPulse {
    0%, 100% { 
      transform: rotate(45deg) scale(1);
      opacity: 1;
    }
    50% { 
      transform: rotate(45deg) scale(1.1);
      opacity: 0.7;
    }
  }
  
  .atelier-premium-processing-text {
    font-size: 0.85rem;
    color: var(--kelp-700);
    letter-spacing: 0.05em;
  }
  
  /* ===================================
     Fallback Images with Logo
  ====================================== */
  .premium-card-image-fallback {
    width: 100%;
    height: 100%;
    background: rgba(var(--kelp-100-rgb), 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .premium-card-image-fallback.has-error {
    background: rgba(var(--kelp-200-rgb), 0.3);
  }
  
  .fallback-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  /* ===================================
     Mobile Responsiveness
  ====================================== */
  
  /* Mobile panel styles - will be overridden in media query */
  .leorre-panel-content.leorre-panel-mobile.upload-panel {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 85vh !important;
    max-height: 90vh !important;
  
    z-index: 999999 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px 12px 0 0 !important;
 
  }
  
  /* Ensure desktop portal styles don't apply on mobile */
  @media (min-width: 769px) {
    .leorre-panel-content.upload-panel.leorre-panel-portal.leorre-panel-desktop {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 480px !important;
    height: 100dvh !important;
    max-height: none !important;
   
    border-left: 1px solid rgba(var(--kelp-200-rgb), 0.3) !important;
    border-right: none !important;
  
  
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
  }
  }
  
  @media (max-width: 768px) {
    /* Mobile panel specific styles */
    .leorre-panel-mobile.upload-panel {
      height: 88vh !important;
      border-radius: 12px 12px 0 0 !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }
    
    .atelier-premium-container {
      width: 100% !important;
      max-width: 100% !important;
      border-radius: 5px 5px 0 0;
    }
    .atelier-premium-preview-area {
      width: 100px !important;
      height: 100px !important;
    }

    /* Ensure inner container uses flex to keep footer in view */
    .leorre-panel-content-inner {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      overflow: hidden !important;
      width: 100% !important;
    }

    /* Scroll only the content, keep footer stuck at bottom - Only for upload panel */
    .upload-panel .leorre-panel-content-container {
      flex: 1 1 auto !important;
    
      -webkit-overflow-scrolling: touch !important;
      padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; /* space for footer */
    }

    /* Sticky footer within the panel */
    .leorre-panel-header-section.footer-with-line {
      position: relative !important;
      bottom: 0 !important;
      background: var(--kelp-50) !important;
      padding-bottom: 0 !important;
      margin: 0 auto !important;
      z-index: 10 !important;
      border-top: none !important;
      width: 100%;
    }
  
    .atelier-premium-header {
      padding: 1.2rem 1rem 0.8rem;
    }
  
    .atelier-premium-title {
      font-size: 1rem;
    }
  
    .atelier-premium-close {
      width: 28px;
      height: 28px;
    }
  
    .atelier-premium-content {
      padding: 1rem;
    }
  
    /* Dropzone Mobile Layout */
    .atelier-premium-dropzone-content {
      flex-direction: column;
      min-height: calc(100dvh - 180px);
      display: flex;
      justify-content: flex-start; /* images stay at top */
      gap: 1rem;
    }
    .atelier-premium-confirmation-image{
      height: 100px !important;
      width: 100px !important;
      margin: 0 auto !important;
      align-self: center;
    }
  
    .atelier-premium-example-showcase {
      flex-direction: row;
      gap: 0.5rem;
    }
  
    .atelier-premium-example-item {
      flex: 1;
      max-width: 120px;
    }
    
    .atelier-premium-decorative-icon {
      display: none;
    }
  
    .atelier-premium-recommendations-title {
      font-size: 0.75rem;
      text-align: center;
    }
  
    .atelier-premium-recommendation-text {
      font-size: 0.7rem;
      text-align: center;
    }

    /* Center content column vertically on mobile */
    .atelier-premium-text-column {
    
      gap: 0.75rem;
      flex: 2;
    }

    .atelier-premium-text-column .atelier-premium-action.full {
      width: 100%;
      max-width: 360px;
    }
  
    /* Editor Mobile Layout */
    .atelier-premium-editor-content {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  
    .atelier-premium-crop-frame {
      min-height: 200px;
    }
  
    .atelier-premium-editor-actions {
      flex-direction: column;
    }
  
    .atelier-premium-action {
      width: 100%;
      justify-content: center;
    }
  
    /* Confirmation Mobile Layout */
    .atelier-premium-confirmation-content {
      flex-direction: column;
      gap: 1rem;
    }
  
    .atelier-premium-confirmation-preview {
      width: 100%;
      min-width: 100% !important;
      margin: 0 auto;
    }
  
    .atelier-premium-analysis-results {
      max-height: 400px;
    }
  
    .metrics-grid,
    .details-grid {
      grid-template-columns: 1fr;
    }
  
    .atelier-premium-confirmation-actions {
      flex-direction: column-reverse;
    }
  
    .atelier-premium-action.confirm,
    .atelier-premium-action.reset {
      width: 100%;
    }
    .atelier-premium-confirmation-preview {
      align-items: center !important;
    }

    .atelier-premium-chat-agent-minimal{
      width: auto !important;
      padding: 6px 24px;
      margin: 0 auto 20px auto !important;
      display: flex !important;
      align-self: center !important;
    }
  }
  
  @media (max-width: 480px) {
    .atelier-premium-header {
      padding: 1rem 0.8rem 0.6rem;
    }
  
    .atelier-premium-title {
      font-size: 0.9rem;
    }
  
    .atelier-premium-close {
      width: 24px;
      height: 24px;
    }
  
    .atelier-premium-content {
      padding: 0.8rem;
    }
  
    .atelier-premium-dropzone {
      padding: 1.5rem 1rem;
    }
  
  
  
    .atelier-premium-decorative-icon {
      width: 36px;
      height: 36px;
      margin-bottom: 0.75rem;
    }
  
    .atelier-premium-upload-button {
      height: 42px;
    }
  
    .atelier-premium-button-text {
      font-size: 0.75rem;
    }
  
    .atelier-premium-crop-frame {
      min-height: 200px;
    }
  
    .control-button {
      width: 32px;
      height: 32px;
    }
  
    .atelier-premium-action {
      padding: 0.65rem 1.25rem;
      font-size: 0.7rem;
    }
  
    .quality-score {
      font-size: 1.25rem;
    }
  
    .quality-label {
      font-size: 0.6rem;
    }
  
    .toggle-title {
      font-size: 0.75rem;
    }
  
    .toggle-subtitle {
      font-size: 0.6rem;
    }
  
    .metric-label,
    .detail-label {
      font-size: 0.6rem;
    }
  
    .metric-value {
      font-size: 0.8rem;
    }
  
    .detail-value {
      font-size: 0.7rem;
    }
  }
  
  /* ===================================
     RTL Support
  ====================================== */
  [dir="rtl"] .atelier-premium-container {
    right: auto;
    left: 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
  }
  
  [dir="rtl"] .atelier-premium-close {
    margin-left: 0;
    margin-right: 1rem;
  }
  
  [dir="rtl"] .atelier-premium-dropzone-content {
    flex-direction: row-reverse;
  }
  
  [dir="rtl"] .atelier-premium-recommendation {
    flex-direction: row-reverse;
  }
  
  [dir="rtl"] .atelier-premium-editor-actions {
    justify-content: flex-start;
  }
  
  [dir="rtl"] .atelier-premium-confirmation-content {
    grid-template-columns: 1fr auto;
  }
  
  [dir="rtl"] .atelier-premium-confirmation-actions {
    flex-direction: row-reverse;
  }
  
  [dir="rtl"] .toggle-content {
    flex-direction: row-reverse;
  }
  
  [dir="rtl"] .metric-item,
  [dir="rtl"] .detail-item {
    flex-direction: row-reverse;
  }
  
  [dir="rtl"] .atelier-premium-error-content {
    flex-direction: row-reverse;
  }
  
  [dir="rtl"] .atelier-premium-chat-agent-minimal {
    flex-direction: row-reverse;
  }
  
  /* ===================================
     Animations & Transitions
  ====================================== */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  
  @keyframes slideInUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  /* Smooth scroll behavior */
  .atelier-premium-content,
  .atelier-premium-analysis-results {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Custom scrollbar styling */
  .atelier-premium-content::-webkit-scrollbar,
  .atelier-premium-analysis-results::-webkit-scrollbar {
    width: 6px;
  }
  
  .atelier-premium-content::-webkit-scrollbar-track,
  .atelier-premium-analysis-results::-webkit-scrollbar-track {
    background: rgba(var(--kelp-200-rgb), 0.3);
    border-radius: 3px;
  }
  
  .atelier-premium-content::-webkit-scrollbar-thumb,
  .atelier-premium-analysis-results::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
  }
  
  .atelier-premium-content::-webkit-scrollbar-thumb:hover,
  .atelier-premium-analysis-results::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dark);
  }
  
  /* ===================================
     Accessibility Improvements
  ====================================== */
  .atelier-premium-close:focus,
  .atelier-premium-upload-button:focus,
  .control-button:focus,
  .atelier-premium-action:focus,
  .analysis-toggle:focus,
  .atelier-premium-chat-agent-minimal:focus {
    outline: none !important;

    outline-offset: none !important;
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    
    .atelier-premium-decorative-rays {
      animation: none;
    }
    
    .processing-diamond {
      animation: none;
    }
    
    .skeleton-line.shine {
      animation: none;
    }
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .atelier-premium-container {
      border: 2px solid currentColor;
    }
    
    .atelier-premium-dropzone {
      border-width: 3px;
    }
    
    .atelier-premium-action {
      border-width: 2px;
    }
  }
  .results-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Quality Header */
  .quality-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(var(--kelp-50-rgb), 0.5);
    border-radius: 3px;
  }
  
  .quality-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  
  .quality-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .quality-label.excellent {
    color: var(--gold-dark);
  }
  
  .quality-label.good {
    color: var(--kelp-600);
  }
  
  .quality-label.poor {
    color: var(--kelp-500);
  }
  
  .quality-score {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--kelp-800);
  }
  
  /* Analysis Message */
  .analysis-message {
    padding: 0.75rem;
    background: rgba(var(--kelp-100-rgb), 0.3);
    border-radius: 3px;
    font-size: 0.75rem;
    color: var(--kelp-700);
    line-height: 1.4;
  }
  
  /* Analysis Warning */
  .analysis-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(var(--gold-rgb), 0.05);
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 3px;
    color: var(--gold-dark);
    font-size: 0.7rem;
  }
  
  /* Analysis Section */
  .analysis-section {
    border-radius: 3px;
    overflow: hidden;
    background: rgba(var(--kelp-50-rgb), 0.3);
  }
  
  .analysis-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
   
  }
  
  .analysis-toggle:hover {
    background: rgba(var(--kelp-100-rgb), 0.4);
  }

/* Claude Analysis Result Display */
.claude-analysis-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 3px;
  min-height: 120px;
}

.loading-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  animation: pulse 2s ease-in-out infinite;
}

.loading-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--kelp-700);
  text-align: center;
}

.shine-text {
  background: linear-gradient(
    90deg,
    var(--kelp-700) 0%,
    var(--gold) 50%,
    var(--kelp-700) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

@keyframes shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.claude-analysis-result {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;

  border-radius: 3px;
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(var(--gold-rgb), 0.1) 0%,
    rgba(var(--gold-light-rgb), 0.06) 100%
  );
}

.claude-analysis-result::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.claude-result-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gold);
}

.claude-result-text {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--kelp-800);
}

/* Compact analysis in chat mode */
.claude-analysis-result.compact {
  display: grid;
  grid-template-rows: 1fr auto; /* content then user bubble */
  min-height: 112px; /* a bit taller to avoid squeeze */
  padding: 0;
  font-size: 0.8rem;
  background: linear-gradient(
    135deg,
    rgba(var(--gold-rgb), 0.1) 0%,
    rgba(var(--gold-light-rgb), 0.06) 100%
  );
  opacity: 1;
  position: relative;
  overflow: hidden;
}

/* Content inside container - animated */
.compact-content {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  position: relative; /* sits in grid row 1 */
  padding: 1rem;
  min-height: 0;
  overflow: hidden;
}

.compact-content.loading {
  border-color: rgba(var(--gold-rgb), 0.3);
}

.compact-content .claude-result-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.compact-content .claude-result-text {
  font-size: 0.8rem;
  line-height: 1.5;
  flex: 1;
}

/* User bubble fixed to bottom of compact result */
.compact-user-bubble {
  grid-row: 2; /* footer row */
  justify-self: end; /* align to right side */
  max-width: 80%;
  margin: 0 12px 8px auto; /* push to right */
  padding: 6px 10px;
  background: rgba(var(--gold-rgb), 0.08);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--kelp-900);
  text-align: right;
  pointer-events: none; /* purely display */
}


/* Loader cascade for chat loading */
.claude-result-icon.loader-cascade {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: visible;
}

.loader-cascade .crescent {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--gold));
  filter: blur(4px);
  animation: spin 2.2s linear infinite;
  display: block;
  position: relative;
  z-index: 1;
}

.loader-cascade .crescent::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--gold-light));
  filter: blur(6px);
  opacity: 0.4;
  animation: spin 2.2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Loading text shine effect */
.loading-text-shine {
  background: linear-gradient(
    90deg,
    var(--kelp-600) 0%,
    var(--kelp-400) 20%,
    var(--kelp-600) 40%,
    var(--kelp-400) 60%,
    var(--kelp-600) 80%,
    var(--kelp-600) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 2s linear infinite;
}

@keyframes textShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Inline chat container */
.inline-chat-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

/* Chat bubbles */
.chat-bubble {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 3px;
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 90%;
}

.chat-bubble.user-bubble {
  align-self: flex-end;
  background: rgba(var(--gold-rgb), 0.08);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  color: var(--kelp-800);
}

.chat-bubble.agent-bubble {
  align-self: flex-start;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  color: var(--kelp-800);
}

.agent-bubble-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 50%;
  color: var(--gold);
}

.agent-bubble-text {
  flex: 1;
}

/* Chat loading indicator */
.chat-loading-indicator {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0;
}

.chat-loading-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kelp-400);
  animation: bounce 1.4s infinite ease-in-out both;
}

.chat-loading-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.chat-loading-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Chat input */
.inline-chat-input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(var(--kelp-100-rgb), 0.2);
  border: 1px solid rgba(var(--gold-rgb), 0.1);
  border-radius: 3px;
}

.chat-text-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: transparent !important;

  border-radius: 2px;
  font-size: 0.8rem;
  color: var(--kelp-800);
  outline: none;
  transition: border-color 0.2s ease;
}

.chat-text-input:focus {
  border-color: rgba(var(--gold-rgb), 0.5);
}

.chat-text-input::-moz-placeholder {
  color: var(--kelp-400);
}

.chat-text-input::placeholder {
  color: var(--kelp-400);
}

.chat-send-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kelp-950);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-send-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--kelp-800), var(--kelp-900));
  transform: scale(1.05);
}

.chat-send-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .chat-bubble {
    max-width: 85%;
    font-size: 0.75rem;
    padding: 0.6rem 0.8rem;
  }
  .inline-chat-container {
    min-width: 100% !important;
    margin: 0 auto !important;
  }
  .atelier-premium-analysis-results{
    min-width: 100% !important;
  }
  
  .inline-chat-input {
    padding: 0.4rem;
  }
  
  .chat-text-input {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }
  
  .chat-send-button {
    width: 28px;
    height: 28px;
  }
}
  /* ===================================
   ProductInfo Component - Clean & Organized
   Preserves all design elements including lines and before/after effects
====================================== */

/* ===================================
   Add to Cart Success Overlay
====================================== */
/* Desktop Overlay - Slide from Right */
.leorre-add-to-cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: none;

  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-sm); /* Same as panels: 8px */
}

/* Mobile Overlay - Slide from Bottom */
.leorre-add-to-cart-overlay.mobile {
  align-items: flex-end;
  justify-content: center;
  padding: var(--spacing-sm); /* Same as panels: 8px */
}

.leorre-overlay-content {
  background: rgba(var(--kelp-50-rgb), 0.9);
  border: none;
  border-radius: 3px;
  box-shadow: 0 8px 32px rgba(var(--kelp-950-rgb), 0.2);
  width: calc(100vw - 16px); /* Same as panels: 100vw - 2 * var(--spacing-sm) */
  max-width: 400px;
  max-height: 60vh; /* Same as panels */
  overflow-y: auto;
  position: relative;
  z-index: 100000;
  padding: 0;
}

.leorre-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1rem 1rem 1rem;
  border-bottom: 1px solid rgba(var(--kelp-300-rgb), 0.2);
  position: relative;
}

.leorre-overlay-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--gold), rgba(var(--gold-rgb), 0.6), rgba(var(--gold-rgb), 0.3));
  border-radius: 1px 0 0 1px;
}

.leorre-success-indicator {
  width: 24px;
  height: 24px;
  background: var(--gold-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kelp-50);
  margin-right: 0.5rem;
}

.leorre-overlay-title {
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--gold-dark);
  margin: 0;
  flex: 1;
}

.leorre-close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--kelp-500);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leorre-close-button:hover {
  background: rgba(var(--gold-rgb), 0.15);
  color: var(--gold);
}

.leorre-added-product {
  padding: 1rem;
  border-bottom: 1px solid rgba(var(--kelp-300-rgb), 0.2);
}

.leorre-added-product-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.leorre-added-product-image {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--kelp-100);
}

.leorre-added-product-details h4 {
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.leorre-added-product-details p {
  font-size: 0.7rem;
  color: var(--kelp-600);
  margin: 0;
  font-weight: 500;
}

.leorre-recommendations-section {
  padding: 1rem;
}

.leorre-recommendations-title {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-700);
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.leorre-recommendations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.leorre-recommendation-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem;

  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;

}



.leorre-rec-image {
  width: 100%;
  height: 45px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--kelp-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.leorre-placeholder-image {
  color: var(--kelp-400);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--kelp-100);
  border-radius: 2px;
}

.leorre-rec-details h5 {
  font-size: 0.65rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  margin: 0 0 1px 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leorre-rec-details p {
  font-size: 0.6rem;
  color: var(--kelp-600);
  margin: 0;
  font-weight: 500;
}

.leorre-overlay-footer {
  padding: 1rem;
  border-top: 1px solid rgba(var(--kelp-300-rgb), 0.2);
}

.leorre-view-bag-button {
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  color: var(--gold-dark);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.leorre-view-bag-button:hover {
  background: rgba(var(--gold-rgb), 0.1);
  border-color: rgba(var(--gold-rgb), 0.5);
  transform: translateY(-1px);
}

.leorre-view-bag-button svg {
}

.leorre-view-bag-button:hover svg {
  transform: translateX(2px);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .leorre-add-to-cart-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
  }
  
  .leorre-overlay-content {
    max-width: 100%;
    max-height: 60vh;
  }
  
  .leorre-overlay-header {
    padding: 1rem 0.8rem 0.8rem 0.8rem;
  }
  
  .leorre-added-product {
    padding: 0.8rem;
  }
  
  .leorre-recommendations-section {
    padding: 0.8rem;
  }
  
  .leorre-overlay-footer {
    padding: 0.8rem;
  }
}

/* Disable theme color application for product page */
.leorre-product-page {
  --theme-primary: var(--kelp-900);
  --theme-secondary: var(--kelp-700);
  --theme-accent: var(--gold);
  --theme-background: var(--kelp-50);
  --theme-surface: var(--kelp-100);
  --theme-text: var(--kelp-900);
  --theme-text-secondary: var(--kelp-600);
  --theme-border: var(--kelp-200);
}



/* --- Container Layout with RTL Support --- */
.leorre-product-info.luxury {
  display: flex;
  flex-direction: column;
  padding: 0 5px;
  font-family: var(--font-primary);
  position: relative;
  overflow-y: visible;
  z-index: 5;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: calc(var(--spacing-lg) + 120px);
}

/* Desktop sticky scroll when more than 2 images */
@media (min-width: 769px) {
  .leorre-product-info.luxury.sticky-scroll {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden !important;
  }
}

.leorre-product-info.luxury::-webkit-scrollbar {
  display: none;
}

/* Top accent line removed - now handled by material selection lines */

/* --- Product Header Section --- */
.leorre-product-header {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-bottom: 8px;
}

.leorre-product-title-row {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
  direction: inherit;
  padding: 0;
  width: 100%;
  gap: var(--spacing-md);
}

/* Desktop bookmark button in title row */
.leorre-product-title-row .leorre-product-bookmark {
  position: static;
  margin-right: 1rem;
  flex-shrink: 0;
}

.leorre-product-title {
  font-size: 1.25rem;
  color: var(--gold-dark);
  margin: 0;
  font-family: var(--font-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 100%;
  font-weight: 500;
  position: relative;
  flex: 1;
}

.leorre-product-title-text {
  display: block;
}

.leorre-product-price-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  flex-shrink: 0;
}

.leorre-product-price-container[dir="rtl"] {
  align-items: flex-start;
  text-align: left;
}

.leorre-premium-price-inline {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--kelp-500);
}

.leorre-product-price-tax {
  font-size: 0.75rem;
  color: var(--kelp-300);
}


.leorre-premium-price-inline {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--kelp-400);
  letter-spacing: -0.01em;
}

.leorre-product-price-tax {
  opacity: 0.8;
}

.leorre-product-title-row[dir="rtl"] {
  flex-direction: row-reverse;
}



.leorre-product-title-text {
  flex: 1;
  min-width: 0;
}

.leorre-product-title::after {
  display: none;
}

.current-price {
  color: rgba(var(--kelp-800-rgb), 0.70);
  font-weight: 500;
  font-size: 0.9rem;
}

/* --- Bookmark Button --- */
.leorre-product-bookmark {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 40px;
  height: 40px;
  background: rgba(var(--kelp-50-rgb), 0.3);
  clip-path: polygon(0% 0%, calc(100% - 5px) 0%, 100% 5px, 100% 100%, 0% 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
 
}

/* Show bookmark button only on mobile - desktop uses title row bookmark */
@media (min-width: 769px) {
  .leorre-product-bookmark {
    display: none;
  }
}

/* Show bookmark button on mobile */
@media (max-width: 768px) {
  .leorre-product-bookmark {
    display: flex;
  }
}

.leorre-product-bookmark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: rgba(var(--kelp-100-rgb), 0);
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.leorre-product-bookmark:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.leorre-product-bookmark:hover::before {
  background-color: rgba(var(--kelp-100-rgb), 0.5);
  transform: scale(1);
}

.leorre-product-bookmark.active {
  transform: scale(1.1);
  background: var(--gold);
  color: var(--kelp-900);
}

.leorre-bookmark-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--gold);
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.leorre-product-bookmark.active .leorre-bookmark-indicator {
  opacity: 1;
  transform: scale(1);
}

/* --- Product Subtitle --- */
.leorre-product-subtitle {
  font-size: 0.65rem;
  color: var(--kelp-600);
  margin: 0 0 var(--spacing-xs);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
}

.leorre-product-subtitle::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(var(--kelp-300-rgb), 0.3);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.leorre-product-info:hover .leorre-product-subtitle::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Price Display --- */
.leorre-product-price {
  margin-bottom: var(--spacing-xs);
  display: flex;
  flex-direction: column;
  font-family: var(--font-primary);
}

.leorre-price-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 2px;
}

.leorre-currency {
  font-size: 0.8rem;
  font-weight: var(--font-weight-light);
  color: var(--gold);
  margin-right: 2px;
}

.leorre-price-main {
  font-size: 1.1rem;
  font-weight: var(--font-weight-light);
  color: var(--kelp-900);
  line-height: 1;
  letter-spacing: -0.02em;
}

.leorre-price-decimal {
  font-size: 0.7rem;
  font-weight: var(--font-weight-light);
  color: var(--kelp-800);
  margin-left: 1px;
}

.leorre-price-tax {
  font-size: 0.6rem;
  color: var(--kelp-600);
  margin-top: 2px;
  margin-bottom: 16px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.03em;
  position: relative;
}

.leorre-price-tax::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, 
    var(--gold), 
    rgba(var(--gold-rgb), 0.7), 
    rgba(var(--accent-clay-rgb), 0.3), 
    transparent
  );
  opacity: 0.7;
  transform: translateY(0px);
  direction: ltr;
}

.leorre-price-tax[dir="rtl"]::after,
[dir="rtl"] .leorre-price-tax::after {
  left: auto;
  right: 0;
  background: linear-gradient(270deg, 
    var(--gold), 
    rgba(var(--gold-rgb), 0.7), 
    rgba(var(--accent-clay-rgb), 0.3), 
    transparent
  );
}

.leorre-price-tax:hover::after {
  opacity: 0.9;
  transform: translateY(1px);
}

/* --- Product Description --- */
.leorre-product-description {
  position: relative;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--kelp-700);
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-light);
  padding-bottom: var(--spacing-xs);
}

.leorre-product-desc-content {
  position: relative;
  z-index: 1;
}

.leorre-product-desc-accent {
  display: none;
}

/* --- Breadcrumbs removed - using only sticky breadcrumbs --- */

/* Header sentinel for intersection observer */
.leorre-header-sentinel {
  position: absolute;
  top: 100px;
  left: 0;
  height: 1px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Sticky breadcrumbs that appear when header fades */
.leorre-breadcrumbs-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(var(--accent-sage-rgb), 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.5rem 1rem;
  width: 100%;
  display: flex;
  justify-content: flex-start; /* Changed from center to start for X placement */
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100vw;
  box-sizing: border-box;
  /* Prevent conflicts with header animations */
  will-change: opacity, transform;
  transform-origin: center top;
  /* Enable smooth scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.leorre-breadcrumbs-sticky::-webkit-scrollbar {
  display: none;
}

/* Minimalist sticky breadcrumb links */
.leorre-breadcrumbs-sticky a {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--kelp-600);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  margin: 0 0.125rem;
  white-space: nowrap;
  flex-shrink: 0; /* Prevent shrinking */
  min-width: -moz-max-content;
  min-width: max-content; /* Ensure content doesn't compress */
  display: inline-block; /* Better for scrolling */
}

.leorre-breadcrumbs-sticky a:hover {
  color: var(--kelp-800);
  background: rgba(var(--kelp-100-rgb), 0.3);
}

.leorre-breadcrumbs-sticky .separator {
  font-size: 0.65rem;
  color: var(--kelp-400);
  margin: 0 0.25rem;
  font-weight: 300;
  flex-shrink: 0; /* Prevent shrinking */
  white-space: nowrap;
  min-width: -moz-max-content;
  min-width: max-content;
}

.leorre-breadcrumbs-sticky .current {
  font-size: 0.75rem;
  color: var(--gold-dark) !important;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  flex-shrink: 0; /* Prevent shrinking */
  white-space: nowrap;
  min-width: -moz-max-content;
  min-width: max-content;
  display: inline-block;
}

/* Content placement rules - similar to category cards */
.leorre-breadcrumbs-sticky.content-center {
  justify-content: center;
}

.leorre-breadcrumbs-sticky.content-start {
  justify-content: flex-start;
}

.leorre-breadcrumbs-sticky.content-end {
  justify-content: flex-end;
}

/* RTL support for sticky breadcrumbs */
.leorre-breadcrumbs-sticky[dir="rtl"] {
  direction: rtl;
}

.leorre-breadcrumbs-sticky[dir="rtl"] .separator {
  transform: scaleX(-1);
}

/* Prevent animation conflicts with header */
.leorre-breadcrumbs-sticky {
  /* Isolate from header animations */
  isolation: isolate;
  /* Ensure smooth transitions */
  transition: none !important;
}

/* Ensure breadcrumb links have smooth hover states */
.leorre-breadcrumbs-sticky a {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}



/* Show scroll indicators when content overflows */
.leorre-breadcrumbs-sticky.scrollable-left::before,
.leorre-breadcrumbs-sticky.scrollable-right::after {
  opacity: 1;
}

/* Enhanced scrolling behavior */
.leorre-breadcrumbs-sticky {
  scroll-padding: 1rem;
  scroll-snap-type: x mandatory;
}

.leorre-breadcrumbs-sticky a,
.leorre-breadcrumbs-sticky .separator,
.leorre-breadcrumbs-sticky .current {
  scroll-snap-align: start;
}

/* Auto-scroll to last item when content overflows */
.leorre-breadcrumbs-sticky.auto-scroll-end {
  justify-content: flex-end;
}

/* Smooth transition for auto-scroll */
.leorre-breadcrumbs-sticky.auto-scroll-end a,
.leorre-breadcrumbs-sticky.auto-scroll-end .separator,
.leorre-breadcrumbs-sticky.auto-scroll-end .current {
  scroll-snap-align: end;
}

/* --- Section Structure --- */
.leorre-general-info-section,
.leorre-product-specific-section {
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 1rem;
}

.leorre-general-info-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-dark-rgb), 0.9), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.leorre-product-specific-section .leorre-section-title {
  margin-bottom: 0;
}

.leorre-general-info-section:last-child,
.leorre-product-specific-section:last-child {
  border-bottom: none;
}

.leorre-section-title {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kelp-700);
  margin: 0 0 1rem 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: none;
}

/* --- Expandable Containers - Clean Separator Design with Elegant Lines --- */
.leorre-expandable-container {
  margin-bottom: 0;
  border: none;
  background: transparent;
  position: relative;
  overflow: hidden;
}



.leorre-expandable-container:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.4), transparent);
}

.leorre-expandable-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--kelp-300-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-expandable-container:hover::after {
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.4), transparent);
}

.leorre-expandable-toggle {
  width: 100%;
  padding: 1.5rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  position: relative;
}

.leorre-expandable-toggle:hover {
  background: rgba(var(--kelp-50-rgb), 0.3);
}

.leorre-expandable-toggle.active {
  background: rgba(var(--kelp-100-rgb), 0.2);
}

.leorre-expandable-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.leorre-expandable-title {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kelp-700);
  margin: 0;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.leorre-expandable-link {
  color: var(--kelp-600);
  text-decoration: none;
  font-weight: 400;
  border-bottom: 1px solid transparent;
}

.leorre-expandable-link:hover {
  color: var(--kelp-800);
  border-bottom-color: var(--kelp-400);
}

.leorre-expandable-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.leorre-expandable-arrow {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.leorre-expandable-arrow::before {
  content: '+';
  font-size: 16px;
  font-weight: 300;
  color: var(--kelp-500);
}

.leorre-expandable-arrow.expanded::before {
  content: '−';
  transform: rotate(0deg);
}

.leorre-expandable-content {
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  /* Let Framer Motion handle height animation */
}

.leorre-about-content {
  padding: 1.5rem 0;
}

.leorre-about-body {
  max-width: 100%;
}

.leorre-about-description {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--kelp-700);
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
  font-weight: 300;
}

/* --- Contact Section --- */
.leorre-contact-container {
  padding: 1rem 0;
}

.leorre-contact-info {
  max-width: 100%;
}

.leorre-contact-title {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--kelp-800);
  margin: 0 0 0.75rem 0;
}

.leorre-contact-description {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--kelp-600);
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}

.leorre-contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.leorre-contact-method {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-radius: 8px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.leorre-contact-method:hover {
  background: rgba(var(--kelp-100-rgb), 0.4);
  border-color: rgba(var(--gold-rgb), 0.2);
}

.leorre-contact-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 50%;
}

.leorre-contact-details h5 {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kelp-800);
  margin: 0 0 0.25rem 0;
}

.leorre-contact-details p {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: var(--kelp-600);
  margin: 0;
}

.leorre-contact-cta {
  text-align: center;
}

.leorre-contact-button {
  padding: 0.75rem 1.5rem;
  background: var(--kelp-600);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.leorre-contact-button:hover {
  background: var(--kelp-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* --- Variants Container --- */
.leorre-variants-container {
  margin-bottom: 0;
  position: relative;
  padding: 0.2rem 0rem 1.8rem;;
  margin-top: -15px;
}

/* --- Error Styling --- */
.leorre-error-message.luxury {
  padding: 10px 14px;
  background-color: rgba(220, 38, 38, 0.05);
  position: relative;
  color: rgb(185, 28, 28);
  font-size: 0.7rem;
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 0;
  box-shadow: 0 5px 15px rgba(220, 38, 38, 0.05);
}

.leorre-error-message.luxury::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.3), transparent);
  opacity: 0.6;
}

.leorre-error-message.luxury[dir="rtl"] {
  /* RTL uses same horizontal line as LTR */
}

.leorre-error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Add to Cart Button --- */
.leorre-add-to-cart-button.luxury {
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  background: var(--kelp-950);
  color: var(--gold-dark);
 
  border-radius: 2px;
  height: 45px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Button horizontal line accents */
.leorre-add-to-cart-button.luxury::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
  z-index: 1;
}

.leorre-add-to-cart-button.luxury::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
  z-index: 1;
}

/* Button states */
.leorre-add-to-cart-button.luxury:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--kelp-800), var(--kelp-900));
  color: var(--gold);

  transform: translateY(-1px) scale(1.02);
}

.leorre-add-to-cart-button.luxury:active:not(:disabled) {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 5px rgba(var(--kelp-900-rgb), 0.15),
              0 1px 2px rgba(0,0,0,0.1);
}

.leorre-add-to-cart-button.luxury:disabled {
  background: linear-gradient(135deg, var(--kelp-300), var(--kelp-400));
  color: var(--kelp-600);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

.leorre-add-to-cart-button.luxury:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold);
}

.leorre-add-to-cart-button.luxury:focus:not(:disabled) {
  background: linear-gradient(135deg, var(--kelp-800), var(--kelp-900));
  color: var(--gold);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 0 2px var(--gold);
}

/* Button layers */
.leorre-button-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.leorre-button-base {
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
}

.leorre-button-surface {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  z-index: 2;
}

.leorre-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  position: relative;
}

.leorre-button-text {
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: inherit;
}

.leorre-button-text span {
  display: inline-block;
}

.leorre-add-to-cart-button.luxury:hover .leorre-button-text span {
  transform: translateY(-2px);
}

.leorre-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.leorre-add-to-cart-button.luxury:hover .leorre-button-icon {
  transform: scale(1.1);
}

/* Button effects */
.leorre-button-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-25deg);
  transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.leorre-add-to-cart-button.luxury:hover .leorre-button-shine {
  left: 120%;
}

.leorre-button-hover-glow {
  position: absolute;
  inset: -2px;
  border-radius: 4px;
  background: radial-gradient(circle at var(--hoverX) var(--hoverY), rgba(var(--gold-rgb), 0.2) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.leorre-add-to-cart-button.luxury:hover .leorre-button-hover-glow {
  opacity: 1;
}

.leorre-button-press-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: rgba(var(--gold-rgb), 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
  pointer-events: none;
  z-index: 3;
}

.leorre-add-to-cart-button.luxury:active .leorre-button-press-effect {
  animation: press-pulse 0.5s ease-out forwards;
}

@keyframes press-pulse {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(15); opacity: 0; }
}

/* Button loader */
.leorre-luxury-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
}

.leorre-loader-diamond {
  width: 8px;
  height: 8px;
  background-color: transparent;
  border: 1px solid rgba(var(--gold-rgb), 0.6);
  transform: rotate(45deg);
  position: relative;
}

/* Button success state - Match Hero button exactly */
.leorre-add-to-cart-button.luxury.success .leorre-button-surface {
  background: var(--kelp-950);
  border-color: rgba(var(--gold-rgb), 0.5);
}

.leorre-success-indicator {
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.success-circle {
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: successCircle 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.success-check {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 4px;
  border-left: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  opacity: 0;
  animation: successCheck 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0.3s forwards;
}

.leorre-mini-thumbnail {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  overflow: hidden;
  margin-left: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  opacity: 0;
  transform: scale(0);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leorre-add-to-cart-button.success .leorre-mini-thumbnail {
  opacity: 1;
  transform: scale(1);
}

.leorre-mini-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ProductInfo Error Message - Consistent with HeroSection */
.leorre-error-message {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(var(--kelp-50-rgb), 0.7), rgba(var(--kelp-100-rgb), 0.5));
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.leorre-error-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--kelp-400-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-error-message .error-text {
  font-size: 0.75rem;
  color: var(--kelp-800);
  letter-spacing: 0.04em;
  text-align: center;
  font-weight: 500;
}

/* ProductInfo Checkmark Animation */
.leorre-checkmark {
  animation: checkmarkDraw 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes checkmarkDraw {
  0% {
    stroke-dasharray: 0 24;
    stroke-dashoffset: 24;
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    stroke-dasharray: 24 24;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Premium Sections --- */
.leorre-premium-sections {
  margin-top: var(--spacing-xs);
  position: relative;
}

.leorre-premium-divider {
  margin: var(--spacing-md) 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.4), transparent);
  opacity: 0.4;
  position: relative;
}

.leorre-section-intro {
  margin-bottom: var(--spacing-xs);
}

.leorre-section-description {
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--kelp-700);
  margin: 0;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.02em;
}

/* --- Panel Content --- */
.leorre-panel-content {
  background: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  box-shadow: 0 15px 40px rgba(var(--kelp-900-rgb), 0.12);
  border-radius: 3px;
  z-index: 100;
  overflow: hidden;
}

/* Desktop Panel - Slide to Left */
.leorre-panel-desktop {
  position: absolute;
  left: var(--spacing-sm);
  right: var(--spacing-sm);
  bottom: 0;
  height: auto;
  max-height: 60vh;
}

/* Mobile Panel - Portal to Body */
.leorre-panel-mobile {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  border-radius: 5px 5px 0 0;
 
}

/* Panel accent border - horizontal line at bottom of header */
.leorre-panel-content::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.leorre-panel-content[dir="rtl"]::before {
  left: auto;
  right: 0;
}

/* Panel inner content */
.leorre-panel-content-inner {
  padding: 1.2rem 1rem 1.5rem 1rem;
  position: relative;
  z-index: 2;
  font-size: 0.65rem;
  line-height: 1.4;
  border-radius: 6px;
  margin: 0.4rem;
  height: calc(100% - 0.8rem);
  overflow-x: hidden; /* Prevent scrolling */
  overflow-y: auto !important;
}

.leorre-panel-content[dir="rtl"] .leorre-panel-content-inner {
  padding: 1.2rem 1rem 1.5rem 1rem;
}

/* Panel Header Section - Match upload panel structure */
.leorre-panel-header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
  padding: 0.9rem 1rem;
}

.leorre-panel-title-section {
  display: flex;
  align-items: center;
  min-width: 0;
}

.leorre-panel-main-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--kelp-900);
  margin: 0;
  text-align: left;
  letter-spacing: 0.02em;
}

.leorre-panel-subtitle {
  font-size: 0.7rem;
  color: var(--kelp-600);
  margin: 0;
  font-weight: var(--font-weight-light);
  line-height: 1.3;
}

/* Panel Content Container */
.leorre-panel-content-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  height: calc(100% - 4rem); /* Account for header */
  overflow: hidden; /* Prevent container overflow */
}

/* Features Container */
.leorre-features-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.leorre-features-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.leorre-features-icon {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 28px;
    height: 28px;
 
  border-radius: 50%;
}

.leorre-features-title {
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-800);
  margin: 0;
}

.leorre-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.leorre-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 6px;
  position: relative;
}

.leorre-feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-feature-item:hover {
  background: rgba(var(--kelp-100-rgb), 0.7);
  transform: translateX(3px);
}

/* Details Container */
.leorre-details-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 15px 0;
}

.leorre-details-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.leorre-details-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 50%;
}

.leorre-details-title {
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-800);
  margin: 0;
}

.leorre-specifications-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.leorre-spec-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem;
  position: relative;
}

.leorre-spec-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-spec-label {
  font-size: 0.6rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.leorre-spec-value {
  font-size: 0.7rem;
  color: var(--kelp-800);
  font-weight: var(--font-weight-medium);
}

/* Care Section */
.leorre-care-section {
  padding: 0.8rem;
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-radius: 6px;
  position: relative;
}

.leorre-care-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-care-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.leorre-care-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 50%;
}

.leorre-care-title {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-800);
  margin: 0;
}

.leorre-care-text {
  font-size: 0.65rem;
  line-height: 1.4;
  color: var(--kelp-700);
  margin: 0;
}

/* Shipping Container */
.leorre-shipping-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Shipping Loading State */
.leorre-shipping-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 2rem;
  color: var(--kelp-600);
  font-size: 0.8rem;
}

.leorre-shipping-loading .leorre-loader-diamond {
  width: 16px;
  height: 16px;
  background-color: var(--gold);
  transform: rotate(45deg);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: rotate(45deg) scale(1); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.1); }
}

/* Shipping Location */
.leorre-shipping-location {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 8px;
  position: relative;
  margin-bottom: 1rem;
}

.leorre-shipping-location::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-shipping-location-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 50%;
  color: var(--gold);
}

.leorre-shipping-location-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.leorre-shipping-location-label {
  font-size: 0.7rem;
  color: var(--kelp-600);
  font-weight: var(--font-weight-light);
}

.leorre-shipping-location-country {
  font-size: 0.9rem;
  color: var(--kelp-900);
  font-weight: var(--font-weight-medium);
}

/* Shipping Free Option */
.leorre-shipping-option-card.leorre-shipping-free {
  background: rgba(var(--gold-rgb), 0.05);
}

.leorre-shipping-option-card.leorre-shipping-free::before {
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
}

.leorre-shipping-option-card.leorre-shipping-free .leorre-shipping-badge {
  background: rgba(var(--gold-rgb), 0.2);
  color: var(--gold);
}

/* Shipping Min Order */
.leorre-shipping-min-order {
  font-size: 0.65rem;
  color: var(--kelp-600);
  font-weight: var(--font-weight-light);
  font-style: italic;
}

/* Shipping Fallback */
.leorre-shipping-fallback {
  opacity: 0.8;
}

.leorre-shipping-fallback .leorre-shipping-options-grid {
  opacity: 0.7;
}

.leorre-shipping-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.leorre-shipping-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 50%;
}

.leorre-shipping-title {
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-800);
  margin: 0;
}

.leorre-shipping-options-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.leorre-shipping-option-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 6px;
  position: relative;
}

.leorre-shipping-option-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--kelp-300-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-shipping-option-card:hover {
  background: rgba(var(--kelp-100-rgb), 0.7);
  transform: translateX(3px);
}

.leorre-shipping-option-card.leorre-shipping-express::before {
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
}

.leorre-shipping-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(var(--kelp-200-rgb), 0.5);
  border-radius: 50%;
  color: var(--kelp-700);
  flex-shrink: 0;
}

.leorre-shipping-badge.premium {
  background: rgba(var(--gold-rgb), 0.2);
  color: var(--gold);
}

.leorre-shipping-details {
  flex: 1;
}

.leorre-shipping-type {
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  font-size: 0.75rem;
  margin-bottom: 0.2rem;
}

.leorre-shipping-estimate {
  color: var(--kelp-700);
  font-size: 0.65rem;
  margin-bottom: 0.1rem;
}

.leorre-shipping-time {
  color: var(--kelp-600);
  font-size: 0.6rem;
}

/* Returns Section */
.leorre-returns-section {
  padding: 0.8rem;
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-radius: 6px;
  position: relative;
}

.leorre-returns-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-returns-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.leorre-returns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 50%;
}

.leorre-returns-title {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-800);
  margin: 0;
}

.leorre-returns-text {
  font-size: 11px;
  line-height: 1.4;
  color: var(--kelp-700);
  margin: 0 0 0.8rem;
}

.leorre-return-policies-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.leorre-return-policy-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 10px;
  color: var(--kelp-700);
}

.leorre-policy-marker {
  width: 3px;
  height: 3px;
  background-color: var(--gold);
  border-radius: 50%;
  opacity: 0.7;
  flex-shrink: 0;
}

/* --- Panel Close Button - repositioned for mobile */
.leorre-panel-close-btn {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem; 
  background: rgba(var(--kelp-100-rgb), 0.8);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  color: var(--kelp-600);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
}

.leorre-panel-content[dir="rtl"] .leorre-panel-close-btn {
  right: auto;
  left: 0.8rem;
}

.leorre-panel-close-btn:hover {
  background: rgba(var(--gold-rgb), 0.15);
  border-color: rgba(var(--gold-rgb), 0.4);
  color: var(--gold);
  transform: scale(1.1);
}

.leorre-panel-close-btn svg {
   width: 14px;
   height: 14px;
}

.leorre-panel-close-btn:hover svg {
  transform: rotate(90deg);
}

/* Luxury Submenu Style Close Button - Match upload panel positioning */
.leorre-panel-close-btn.luxury-submenu-style {
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  justify-self: end;
  margin-top: 12px;
}

.leorre-panel-content[dir="rtl"] .leorre-panel-close-btn.luxury-submenu-style {
  justify-self: start;
}

.leorre-panel-close-btn.luxury-submenu-style::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.1), rgba(var(--kelp-100-rgb), 0.2));
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 0;
}

.leorre-panel-close-btn.luxury-submenu-style:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(var(--gold-rgb), 0.15);
}

.leorre-panel-close-btn.luxury-submenu-style:hover::before {
  transform: scale(1.5);
}

.luxury-submenu-close-icon {
  position: relative;
  width: 12px;
  height: 12px;
  z-index: 1;
  transform: rotate(45deg);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.luxury-submenu-close-icon::before,
.luxury-submenu-close-icon::after {
  content: '';
  position: absolute;
  background-color: var(--gold-dark);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.luxury-submenu-close-icon::before {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.luxury-submenu-close-icon::after {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.leorre-panel-close-btn.luxury-submenu-style:hover .luxury-submenu-close-icon {
  transform: rotate(45deg) scale(1.1);
}

.leorre-panel-close-btn.luxury-submenu-style:hover .luxury-submenu-close-icon::before,
.leorre-panel-close-btn.luxury-submenu-style:hover .luxury-submenu-close-icon::after {
  background-color: rgba(var(--gold-rgb), 0.9);
}

/* Body scroll prevention - removed complex CSS handling */

/* --- Modern Minimal Panel Toggle --- */
.leorre-panel-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  padding: 5px 0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  border-bottom: 1px solid rgba(var(--kelp-200-rgb), 0.05);
  z-index: 11;
  margin-bottom: 0;
}

.leorre-panel-toggle:hover {
  background-color: rgba(var(--kelp-50-rgb), 0.2);
  border-bottom-color: rgba(var(--kelp-300-rgb), 0.2);
}

.leorre-panel-toggle.active {
  background-color: rgba(var(--kelp-100-rgb), 0.3);
  border-bottom-color: rgba(var(--kelp-400-rgb), 0.3);
}

.leorre-panel-toggle:last-of-type {
  border-bottom: none;
}

/* Panel header - no icons */
.leorre-panel-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.leorre-panel-toggle[dir="rtl"] .leorre-panel-header {
  padding-left: 0;
  padding-right: 0;
}

.leorre-panel-header svg {
  color: var(--kelp-600);
  width: 20px;
  height: 20px;
}

.leorre-panel-toggle.active .leorre-panel-header svg {
  color: var(--gold);
}

.leorre-panel-title {
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(var(--kelp-800-rgb), 0.70);
  letter-spacing: -0.01em;
  position: relative;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 5px;
}

.leorre-panel-title-separator {
  color: var(--kelp-400);
  font-weight: 400;
}

.leorre-panel-title-link {
  color: var(--gold-dark);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--gold-dark);
  text-underline-offset: 3px;
}

.leorre-panel-title-link:hover {
  color: var(--gold-dark);
  text-decoration-color: var(--gold-dark);
}

.leorre-panel-link {
  color: var(--gold-dark);
  text-decoration: none;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0.5rem 0;
  gap: 0.5rem;
  font-size: 0.70rem;
}

.leorre-panel-link:hover {
  color: var(--gold-dark);
}

.leorre-panel-toggle:hover .leorre-panel-title {
  color: rgba(var(--kelp-800-rgb), 0.70);
}

.leorre-panel-toggle.active .leorre-panel-title {
  color: var(--kelp-900);
}


/* Panel Indicator - Now inside link */
.leorre-panel-indicator {
  display: none;
}

.leorre-panel-arrow {
  position: relative;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}

.leorre-panel-arrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.leorre-panel-arrow.expanded::before {
  transform: rotate(45deg);
}

.leorre-panel-link:hover .leorre-panel-arrow::before {
  border-color: var(--gold-dark);
}

/* RTL Support for panel arrows */
[dir="rtl"] .leorre-panel-arrow::before {
  transform: rotate(45deg);
}

[dir="rtl"] .leorre-panel-arrow.expanded::before {
  transform: rotate(-45deg);
}

/* Desktop Panels - Always Visible */
.leorre-desktop-panels {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

/* Portal Panel - Match QuickView Size - Override conflicting styles */
.leorre-panel-portal {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 480px !important;
  height: 100dvh !important;
  max-height: none !important;
  background: rgba(var(--kelp-50-rgb), 0.80) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid rgba(var(--kelp-200-rgb), 0.3) !important;
  border-right: none !important;
  box-shadow: 
    -4px 0 20px rgba(0, 0, 0, 0.1),
    -2px 0 8px rgba(0, 0, 0, 0.05) !important;
  z-index: 12000 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
}

.leorre-panel-portal[dir="rtl"] {
  right: auto !important;
  left: 0 !important;
  border-left: none !important;
  border-right: 1px solid rgba(var(--kelp-200-rgb), 0.3) !important;
  box-shadow: 
    4px 0 20px rgba(0, 0, 0, 0.1),
    2px 0 8px rgba(0, 0, 0, 0.05) !important;
}

.leorre-panel-portal .leorre-panel-content-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.leorre-panel-portal .leorre-panel-content-container {
  flex: 1;

  padding: 0;
}

.leorre-panel-portal .leorre-panel-header-section {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-top: none !important;
 
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Portal Content Sections - Match QuickView Exactly */
.leorre-panel-portal .leorre-contact-container,
.leorre-panel-portal .leorre-boxes-container,
.leorre-panel-portal .leorre-shipping-container {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}

.leorre-panel-portal .leorre-panel-main-title {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--kelp-900);
  margin: 0;
  letter-spacing: 0.01em;
}

.leorre-panel-section {
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.leorre-panel-section:hover {
  background: rgba(var(--kelp-100-rgb), 0.4);
  border-color: rgba(var(--gold-rgb), 0.2);
  box-shadow: 0 4px 16px rgba(var(--gold-rgb), 0.1);
}

.leorre-panel-section .leorre-panel-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.leorre-panel-section .leorre-panel-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kelp-800);
  margin: 0;
  letter-spacing: 0.02em;
}

.leorre-panel-content {
  padding: 0;
}

/* Hide desktop panels on mobile */
@media (max-width: 768px) {
  .leorre-desktop-panels {
    display: none;
  }
}

/* About This Piece Toggle Section */
.leorre-about-toggle-section {
  margin: 2rem 0;
}

.leorre-about-toggle-section .leorre-panel-content {
  overflow: hidden;
  margin-top: 0;
}

.leorre-about-toggle-section .leorre-active-product-data {
  margin: 0;
  padding: 1.5rem;
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-radius: 12px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.leorre-about-toggle-section .leorre-data-body {
  margin: 0;
}

/* Desktop: Show about section always visible */
@media (min-width: 769px) {
  .leorre-about-toggle-section .leorre-panel-toggle {
    display: none;
  }
  
  .leorre-about-toggle-section .leorre-panel-content {
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
  }
  
  .leorre-about-toggle-section .leorre-active-product-data {
    margin: 0;
    padding: 2rem;
  }
}

/* Mobile Panel Optimizations */
@media (max-width: 768px) {
  .leorre-panel-mobile {
    height: auto; /* Slightly shorter on mobile */
    border-radius: 5px 5px 0 0; /* Larger border radius on mobile */
  }
  
  .leorre-panel-content-inner {
    padding: 1rem 0.8rem 1.2rem 0.8rem;
    margin: 0.3rem;
    font-size: 0.6rem; /* Smaller font on mobile */
  }
  
  .leorre-panel-close-btn {
    top: 0.8rem;
    right: 0.8rem;
    width: 28px;
    height: 28px;
  }
  
  .leorre-panel-close-btn svg {
    width: 14px;
    height: 14px;
  }
  .leorre-breadcrumbs-sticky{
    padding: 8px !important;
    /* Enhanced mobile scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  /* Larger font size for sticky breadcrumb links */
  .leorre-breadcrumbs-sticky a {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem; /* Slightly larger touch targets */
  }
  .leorre-breadcrumbs-sticky .current {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
  .leorre-breadcrumbs-sticky .separator {
    margin: 0 0.3rem; /* More spacing on mobile */
  }
  
  /* Hide regular breadcrumbs on mobile - only show sticky */
  .leorre-breadcrumbs:not(.leorre-breadcrumbs-sticky) {
    display: none !important;
  }
  
  /* Ensure sticky breadcrumbs are always visible on mobile */
  .leorre-breadcrumbs-sticky {
    display: flex !important;
  }
}

/* Show regular breadcrumbs on desktop only */
@media (min-width: 769px) {
  .leorre-breadcrumbs {
    display: flex;
  }


  /* Mobile container adjustments - Keep grid layout like upload panel */
  .leorre-panel-header-section {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
  }

  .leorre-panel-title-section {
    min-width: 0;
  }

  .leorre-panel-main-title {
    font-size: 14px;
  }

  .leorre-panel-subtitle {
    font-size: 10px;
  }

  .leorre-panel-content-container {
    gap: 1rem;
    height: calc(100% - 3.5rem); /* Smaller header height on mobile */
  
  }

  .leorre-specifications-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
 

  .leorre-feature-item:hover {
    transform: none; /* Disable hover effects on mobile */
  }

  .leorre-shipping-option-card:hover {
    transform: none; /* Disable hover effects on mobile */
  }

  /* Smaller spacing on mobile */
  .leorre-features-container,
  .leorre-details-container,
  .leorre-shipping-container {
    gap: 0.8rem;
  }

  .leorre-features-header,
  .leorre-details-header,
  .leorre-shipping-header {
    gap: 0.5rem;
    margin-bottom: 0.6rem;
  }

  .leorre-features-icon,
  .leorre-details-icon,
  .leorre-shipping-icon {
    width: 24px;
    height: 24px;
  }

  .leorre-features-title,
  .leorre-details-title,
  .leorre-shipping-title {
    font-size: 0.75rem;
  }
 

  .leorre-features-list {
    gap: 0.5rem;
  }

  .leorre-feature-item {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .leorre-spec-item {
    padding: 0.5rem;
  }

  .leorre-care-section,
  .leorre-returns-section {
    padding: 0.6rem;
  }

  .leorre-shipping-option-card {
    padding: 0.6rem;
    gap: 0.5rem;
  }

  .leorre-shipping-badge {
    width: 24px;
    height: 24px;
  }

  /* Mobile shipping location adjustments */
  .leorre-shipping-location {
    padding: 0.8rem;
    margin-bottom: 0.8rem;
  }

  .leorre-shipping-location-icon {
    width: 20px;
    height: 20px;
  }

  .leorre-shipping-location-label {
    font-size: 0.65rem;
  }

  .leorre-shipping-location-country {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
 
  
  .leorre-panel-content-inner {
    padding: 0.8rem 0.6rem 1rem 0.6rem;
    margin: 0.2rem;
    font-size: 0.55rem; /* Even smaller font on small mobile */
  }
  
  .leorre-panel-close-btn {
    top: 0.6rem;
    right: 0.6rem;
    width: 24px;
    height: 24px;
  }

  .leorre-panel-close-btn svg {
    width: 12px;
    height: 12px;
  }

  /* Small mobile adjustments */
 

  .leorre-panel-subtitle {
    font-size: 0.6rem;
  }

  .leorre-panel-content-container {
    gap: 0.8rem;
    height: calc(100% - 3rem);
  }

  .leorre-features-header,
  .leorre-details-header,
  .leorre-shipping-header {
    gap: 0.4rem;
    margin-bottom: 0.5rem;
  }

  .leorre-features-icon,
  .leorre-details-icon,
  .leorre-shipping-icon {
  width: 20px;
  height: 20px;
  }

  .leorre-features-title,
  .leorre-details-title,
  .leorre-shipping-title {
    font-size: 0.7rem;
  }

  .leorre-features-list {
    gap: 0.4rem;
  }

  .leorre-feature-item {
    padding: 0.4rem;
    gap: 0.4rem;
  }

  .leorre-spec-item {
    padding: 0.4rem;
  }

  .leorre-care-section,
  .leorre-returns-section {
    padding: 0.5rem;
  }

  .leorre-shipping-option-card {
    padding: 0.5rem;
    gap: 0.4rem;
  }

  .leorre-shipping-badge {
    width: 20px;
    height: 20px;
  }
 

  /* Small mobile shipping adjustments */
  .leorre-shipping-location {
    padding: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .leorre-shipping-location-icon {
    width: 18px;
    height: 18px;
  }

  .leorre-shipping-location-label {
    font-size: 0.6rem;
  }

  .leorre-shipping-location-country {
    font-size: 0.75rem;
  }

  .leorre-care-icon,
  .leorre-returns-icon {
    width: 18px;
    height: 18px;
  }
}

/* --- Active Product Data --- */
.leorre-active-product-data {
  margin: var(--spacing-sm) 0 var(--spacing-md);
  padding: 1.2rem 1.2rem 1.2rem 0.8rem;
  background-color: rgba(var(--kelp-50-rgb), 0.6);
  position: relative;
  border-radius: 2px;
  border-left: none;
  overflow: visible;
  margin-top: 3.5rem ;
  z-index: 8;
  /* Removed contain that causes Safari chunky scroll */
  margin-bottom: var(--spacing-lg);
  transition: margin 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.leorre-active-product-data[dir="rtl"] {
  padding: 1.2rem 0.8rem 1.2rem 1.2rem;
}

/* Active data accent borders */
.leorre-active-product-data::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 70%;
  background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb), 0.7), rgba(var(--gold-rgb), 0.3), transparent);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.25);
  display: block;
  border-radius: 1px 0 0 1px;
  display: none !important;
}

.leorre-active-product-data[dir="rtl"]::before {
  left: auto;
  right: 0;
  border-radius: 0 1px 1px 0;
}

.leorre-active-product-data::after {
  content: '';
  position: absolute;
  top: 0;
  left: 6px;
  width: 25%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb), 0.7), rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.9;
  border-radius: 0 1px 0 0;
  display: none;
 
}

.leorre-active-product-data[dir="rtl"]::after {
  left: auto;
  right: 6px;
  background: linear-gradient(270deg, var(--gold), rgba(var(--gold-rgb), 0.7), rgba(var(--gold-rgb), 0.3), transparent);
  border-radius: 1px 0 0 0;
}

.leorre-data-header {
  margin-bottom: 8px;
  position: relative;
}

.leorre-data-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold-dark);
  margin: 0 0 4px;
  letter-spacing: 0.5px;
}

.leorre-data-accent {
  width: 35px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), rgba(var(--gold-rgb), 0.4), transparent);
  opacity: 1;
  margin-top: 4px;
  position: relative;
  transform: translateY(0);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.leorre-data-accent::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 8px;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-clay-rgb), 0.6), rgba(var(--accent-clay-rgb), 0.3), transparent);
  opacity: 0.6;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.leorre-active-product-data[dir="rtl"] .leorre-data-accent {
  background: linear-gradient(270deg, var(--gold), var(--gold-light), rgba(var(--gold-rgb), 0.4), transparent);
}

.leorre-active-product-data[dir="rtl"] .leorre-data-accent::after {
  left: auto;
  right: 8px;
  background: linear-gradient(270deg, rgba(var(--accent-clay-rgb), 0.6), rgba(var(--accent-clay-rgb), 0.3), transparent);
}

.leorre-data-header:hover .leorre-data-accent {
  width: 45px;
  transform: translateY(-1px);
}

.leorre-data-header:hover .leorre-data-accent::after {
  width: 80%;
  opacity: 0.8;
}

.leorre-data-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leorre-data-description {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--kelp-500);
  margin-bottom: 10px;
}

/* --- Feature Tags --- */
.leorre-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 12px;
}

.leorre-feature-tags.rtl {
  direction: rtl;
  justify-content: flex-start;
}

.leorre-feature-tags.ltr {
  direction: ltr;
  justify-content: flex-start;
}

.leorre-feature-tag {
  font-size: 12px;
  padding: 4px 8px;
  background-color: rgba(113, 77, 56, 0.05);
  color: #666;
  border-radius: 2px;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.leorre-feature-tags.rtl .leorre-feature-tag {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
}

.leorre-feature-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(var(--gold-rgb), 0.1), transparent);
  transform: translateX(-100%);
}

.leorre-feature-tags.rtl .leorre-feature-tag::before {
  background: linear-gradient(to left, transparent, rgba(var(--gold-rgb), 0.1), transparent);
  transform: translateX(100%);
}

.leorre-feature-tag:hover {
  background-color: rgba(var(--gold-rgb), 0.15);
  color: var(--kelp-900);
  transform: translateY(-1px);
}

.leorre-feature-tag:hover::before {
  transform: translateX(100%);
}

.leorre-feature-tags.rtl .leorre-feature-tag:hover::before {
  transform: translateX(-100%);
}

/* --- Boxes Container --- */
.leorre-boxes-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.leorre-boxes-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.leorre-boxes-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 50%;
}

.leorre-boxes-title {
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-800);
  margin: 0;
}

/* Main Box Layout */
.leorre-box-main {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  
  border-radius: 8px;
  padding: 1.2rem;

}

.leorre-box-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}

.leorre-box-main-image {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
}

.leorre-box-content-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.leorre-box-main-title {
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  margin: 0;
  text-align: center;
  letter-spacing: 0.02em;
}

.leorre-box-main-description {
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--kelp-700);
  margin: 0;
  text-align: center;
  font-weight: var(--font-weight-light);
}

/* Box Features List */
.leorre-box-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.leorre-box-feature-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 5px;
  position: relative;
}

.leorre-box-feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

/* Hover effects removed - controlled by Framer Motion */

.leorre-box-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.leorre-box-feature-item span {
  font-size: 0.7rem;
  color: var(--kelp-800);
  font-weight: var(--font-weight-medium);
}

/* Mobile responsive for boxes */
@media (max-width: 768px) {
  .leorre-box-main {
    padding: 1rem;
    gap: 1rem;
  }
  
  .leorre-box-main-image {
    width: 100px;
    height: 100px;
  }
  
  .leorre-box-main-title {
    font-size: 12px;
  }
  
  .leorre-box-main-description {
    font-size: 10px
  }
  
  .leorre-box-feature-item {
    padding: 0.4rem 0.6rem;
  }
  
  .leorre-box-feature-item span {
    font-size: 10px;
  }
  .leorre-product-title-row{
    padding: 0  !important;
    flex-direction: row;
  }
}

@media (max-width: 480px) {
  .leorre-box-main {
    padding: 0.8rem;
    gap: 0.8rem;
  }
  
  .leorre-box-main-image {
    width: 80px;
    height: 80px;
  }
  
  .leorre-box-main-title {
    font-size: 0.75rem;
  }
  
  .leorre-box-main-description {
    font-size: 0.6rem;
  }
  
  .leorre-box-features {
    gap: 0.5rem;
  }
  
  .leorre-box-feature-item {
    padding: 11px;
  }
 
}

/* --- Features List --- */
.leorre-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 3rem 0;
}

.leorre-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.65rem;
  line-height: 1.3;
}

.leorre-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.leorre-diamond-marker {
  width: 4px;
  height: 4px;
  background-color: var(--gold);
  transform: rotate(45deg);
  opacity: 0.8;
}

.leorre-feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.leorre-feature-title {
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  font-size: 0.65rem;
  margin-bottom: 0.1rem;
}

.leorre-feature-description {
  color: var(--kelp-700);
  font-size: 0.6rem;
  line-height: 1.3;
  margin: 0;
}

.leorre-feature-text {
  color: var(--kelp-800);
  font-size: 0.65rem;
  line-height: 1.3;
}

/* --- Specifications --- */
.leorre-specifications {
  margin-bottom: 1.5rem;
}

.leorre-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(var(--kelp-200-rgb), 0.3);
}

.leorre-spec-row:last-child {
  border-bottom: none;
}

.leorre-spec-label {
  font-weight: var(--font-weight-medium);
  color: var(--kelp-700);
  font-size: 0.65rem;
}

.leorre-spec-value {
  color: var(--kelp-800);
  font-size: 0.65rem;
  text-align: left;
}

/* --- Care Info --- */
.leorre-care-info {
  margin-bottom: 1.5rem;
}

.leorre-care-title {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  margin: 0 0 0.5rem;
}

.leorre-care-text {
  font-size: 0.65rem;
  line-height: 1.5;
  color: var(--kelp-700);
  margin: 0;
}

/* --- Shipping Options --- */
.leorre-shipping-options {
  margin-bottom: 1.5rem;
}

.leorre-shipping-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.leorre-shipping-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(var(--kelp-200-rgb), 0.5);
  border-radius: 50%;
  color: var(--kelp-700);
}

.leorre-shipping-badge.premium {
  background: rgba(var(--gold-rgb), 0.2);
  color: var(--gold);
}

.leorre-shipping-details {
  flex: 1;
}

.leorre-shipping-type {
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  font-size: 0.7rem;
  margin-bottom: 0.2rem;
}

.leorre-shipping-estimate {
  color: var(--kelp-700);
  font-size: 0.65rem;
  margin-bottom: 0.1rem;
}

.leorre-shipping-time {
  color: var(--kelp-600);
  font-size: 0.6rem;
}

/* --- Returns --- */
.leorre-returns {
  margin-bottom: 1rem;
}

.leorre-returns-title {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  margin: 0 0 0.5rem;
}

.leorre-returns-text {
  font-size: 0.65rem;
  line-height: 1.5;
  color: var(--kelp-700);
  margin: 0 0 0.75rem;
}

.leorre-return-policies {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.leorre-return-policy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  color: var(--kelp-700);
}

.leorre-policy-marker {
  width: 4px;
  height: 4px;
  background-color: var(--gold);
  border-radius: 50%;
  opacity: 0.7;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  .leorre-product-info.luxury {
    padding: 1.5rem 1rem;
  }
  
  .leorre-product-title {
    font-size: 1.25rem;
  }
  
  .leorre-premium-price-inline {
    font-size: 0.9rem;
  }
  
  .leorre-product-description {
    font-size: 0.75rem;
  }
  
  .leorre-expandable-title {
    font-size: 0.85rem;
  }
  
  /* Breadcrumbs removed - using only sticky breadcrumbs */
  
  .leorre-price-main {
    font-size: 12px;
  }
  
  .leorre-currency {
    font-size: 12px;
  }
  
  .leorre-product-bookmark {
    width: 30px;
    height: 30px;
  }
  
  .leorre-product-price {
    padding: 0 6px;
  }
  .leorre-panel-title {
    font-size: 0.75rem;
    font-weight: 400;
  }
  
  /* Hide arrows on mobile and use underline style */
  .leorre-panel-arrow {
    display: none;
  }
  
  .leorre-panel-title-link {
    text-decoration: underline;
    text-decoration-color: var(--gold-dark);
    text-underline-offset: 3px;
    font-size: 0.70rem;
  }
  
  .leorre-panel-title-link:hover {
    text-decoration-color: var(--gold-dark);
  }
  
  /* Panel title expanded - color change only */
  .leorre-panel-toggle.active .leorre-panel-title {
    color: var(--gold);
  }
  
  .leorre-panel-toggle.active .leorre-panel-title-link {
    color: var(--gold-dark);
  }
  
  .leorre-panel-content {
    left: var(--spacing-xs);
    right: var(--spacing-xs);
  }

 

  .leorre-panel-close-btn {
    width: 28px;
    height: 28px;
    top: 10px;
    right: 10px;
  }
  
  .leorre-panel-close-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .leorre-button-text {
    font-size: 10px;
  }
  
  .leorre-button-icon {
    width: 12px !important;
    height: 12px !important;
  }
  
  .leorre-feature-tag {
    font-size: 0.75rem;
  }
  
  .leorre-data-description {
    font-size: 0.75rem;
    color: var(--kelp-500);
  }
}

@media (max-width: 480px) {
 
  
  .leorre-currency {
    font-size: 0.85rem;
  }
  
  .current-price {
    font-size: 0.9rem;
  }
  
  .leorre-price-main {
    font-size: 0.75rem;
  }
}

/* ===================================
   Selection Status Styles - Inspired by Quick View
====================================== */

.leorre-selection-status {
  border-radius: 4px;
  padding: 1rem 0;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  margin-top: 1.5rem;
}

.leorre-selection-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(270deg, transparent, rgba(var(--kelp-400-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-selection-header {
  margin-bottom: 0.5rem;
}

.leorre-selection-label {
  display: block;
  font-size: 0.75rem;
  color: var(--kelp-600);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.leorre-selection-items {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overflow: visible;
}

.leorre-selection-items::-webkit-scrollbar {
  height: 6px;
}

.leorre-selection-items::-webkit-scrollbar-thumb {
  background: rgba(var(--kelp-400-rgb), 0.4);
  border-radius: 3px;
}

.leorre-selection-item {
  padding: 0.5rem 1rem;
  background: rgba(var(--kelp-100-rgb), 0.2);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--kelp-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  margin-right: 0.5rem;
  white-space: nowrap;
}

.leorre-selection-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(var(--kelp-100-rgb), 0.2);
}

.leorre-selection-type {
  font-size: 12px;
  color: var(--kelp-600);
  display: none;
  letter-spacing: 0.02em;
}

.leorre-selection-value {
  font-size: 12px;
  color: var(--kelp-700);
 
}

/* Enhanced Uploaded Design within Selection - Quick View Style */
.leorre-selection-items .leorre-uploaded-design.luxury {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  gap: 0.75rem;
  padding: 0;
  border-radius: 6px;

}

.leorre-uploaded-design-preview {
  position: relative;
  flex: 0 0 auto; /* prevent compression */
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Multi-image preview layout */
.leorre-uploaded-design-preview.multi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  min-width: auto;
}

.leorre-uploaded-design-thumb {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.leorre-upload-more {
  width: 36px;
  height: 36px;
  border: 2px dashed rgba(var(--kelp-300-rgb), 0.6);
  border-radius: 50%;
  background: rgba(var(--kelp-50-rgb), 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--kelp-600);
  font-size: 8px;
  text-align: center;
  padding: 4px;
  display: none !important;
}

.leorre-upload-more:hover {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold);
}

.leorre-upload-more span {
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

/* Upload progress indicator in panel header */
.upload-panel-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upload-progress-indicator {
  font-size: 0.7rem;
  color: var(--kelp-500);
  font-weight: 400;
}

/* Added product overlay - multi-upload support */
.leorre-added-uploads {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.leorre-added-upload-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
}

.leorre-added-upload-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.leorre-uploaded-design-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.5);
}

.leorre-uploaded-design-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--kelp-950);
  color: var(--gold-dark);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}

.leorre-uploaded-design-remove:hover {
  background: var(--kelp-900);
  transform: scale(1.1);
}

.leorre-uploaded-design-info {
  flex: 1;
  display: none;
}

.leorre-uploaded-design-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leorre-uploaded-design-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--kelp-50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.leorre-uploaded-design-text {
  display: flex;
  flex-direction: column;
}

.leorre-uploaded-design-title {
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  color: var(--kelp-500);
}

.leorre-uploaded-design-subtitle {
  font-size: 0.75rem;
  color: var(--kelp-300);
}
.variant-container{
  padding-top: 1rem ;
}

/* Mobile Responsive - Quick View Style */
@media (max-width: 768px) {

  
  .leorre-selection-item {
    font-size: 10px;
    padding: 6px 12px;
  }
  
  .leorre-selection-items .leorre-uploaded-design.luxury {
   
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .leorre-uploaded-design-preview {
    align-self: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  
  .leorre-uploaded-design-preview.multi {
    gap: 4px;
  }
  
  .leorre-uploaded-design-thumb {
    width: 32px;
    height: 32px;
  }
  
  .leorre-upload-more {
    width: 32px;
    height: 32px;
    font-size: 7px;
  }
  
  .leorre-uploaded-design-image {
    width: 100%;
    height: 100%;
  }
  
  .leorre-uploaded-design-remove {
    width: 18px;
    height: 18px;
  }
  .leorre-selection-type{
    font-size: 10px;
  }
  .leorre-selection-value{
    font-size: 10px;
  }
}

/* ===================================
   Dynamic Shipping Section - New Design
====================================== */

/* Shipping Countries Grid */
.leorre-shipping-countries {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-height: 70vh;
  overflow-y: auto;
  padding-right: var(--spacing-sm);
}

.leorre-shipping-countries::-webkit-scrollbar {
  width: 6px;
}

.leorre-shipping-countries::-webkit-scrollbar-track {
  background: rgba(var(--kelp-200-rgb), 0.3);
  border-radius: 3px;
}

.leorre-shipping-countries::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 3px;
}

.leorre-shipping-countries::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dark);
}

.leorre-shipping-section {
  border-radius: 12px;
  padding: var(--spacing-lg);
}

.leorre-shipping-section-title {
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--kelp-800);
  margin: 0 0 var(--spacing-md) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.leorre-shipping-section-title::before {
  content: '';
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  border-radius: 2px;
}

/* Countries Grid */
.leorre-shipping-countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.leorre-shipping-country-card {
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
}

.leorre-shipping-country-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

/* Country Toggle Button */
.leorre-country-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}

.leorre-country-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.leorre-country-flag {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--kelp-100-rgb), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.leorre-flag-emoji {
  font-size: 1.5rem;
  line-height: 1;
}

.leorre-country-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leorre-country-name {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--kelp-600);
}

.leorre-country-summary {
  font-size: 10px;
  color: var(--kelp-500);
}

.leorre-country-expand {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leorre-expand-icon {
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--kelp-500);
  border-bottom: 1px solid var(--kelp-500);
  transform: rotate(45deg);
}

.leorre-country-toggle.expanded .leorre-expand-icon {
  transform: rotate(-135deg);
}

/* Country Rates Container */
.leorre-country-rates {
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-top: 1px solid rgba(var(--kelp-200-rgb), 0.3);
}

.leorre-rates-container {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Global Shipping Info */
.leorre-global-shipping-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(var(--gold-rgb), 0.05);
  border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}

.leorre-global-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.leorre-global-content {
  flex: 1;
}

.leorre-global-text {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--kelp-700);
  line-height: 1.5;
}

.leorre-global-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.leorre-global-feature {
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold-dark);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
}

/* Mobile Shipping Styles */
.leorre-shipping-countries-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.leorre-shipping-countries-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.leorre-shipping-country-card-mobile {
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
}

.leorre-shipping-country-card-mobile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-country-toggle-mobile {
  width: 100%;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}

.leorre-country-header-mobile {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.leorre-country-flag-mobile {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--kelp-100-rgb), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.leorre-country-info-mobile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leorre-country-name-mobile {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--kelp-600);
}

.leorre-country-summary-mobile {
  font-size: 10px;
  color: var(--kelp-500);
}

.leorre-country-expand-mobile {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leorre-expand-icon-mobile {
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--kelp-500);
  border-bottom: 1px solid var(--kelp-500);
  transform: rotate(45deg);
}

.leorre-country-toggle-mobile.expanded .leorre-expand-icon-mobile {
  transform: rotate(-135deg);
}

.leorre-country-rates-mobile {
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-top: 1px solid rgba(var(--kelp-200-rgb), 0.3);
}

.leorre-rates-container-mobile {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.leorre-shipping-option-card-mobile {
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 3px;
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.leorre-shipping-option-card-mobile:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.1);
}

.leorre-global-shipping-info-mobile {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(var(--gold-rgb), 0.05);
  border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}

.leorre-global-icon-mobile {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.leorre-global-content-mobile {
  flex: 1;
}

.leorre-global-text-mobile {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--kelp-700);
  line-height: 1.5;
  font-size: 0.9rem;
}

.leorre-global-features-mobile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.leorre-global-feature-mobile {
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold-dark);
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}

/* RTL Support for Shipping */
.leorre-shipping-container[dir="rtl"] .leorre-shipping-countries {
  padding-right: 0;
  padding-left: var(--spacing-sm);
}

.leorre-shipping-container[dir="rtl"] .leorre-country-header {
  flex-direction: row-reverse;
}

.leorre-shipping-container[dir="rtl"] .leorre-country-expand {
  transform: scaleX(-1);
}

.leorre-shipping-container[dir="rtl"] .leorre-shipping-option-card {
  flex-direction: row-reverse;
}

.leorre-shipping-container[dir="rtl"] .leorre-global-shipping-info {
  flex-direction: row-reverse;
}

.leorre-shipping-container[dir="rtl"] .leorre-global-features {
  flex-direction: row-reverse;
}

/* Mobile RTL Support */
.leorre-shipping-container[dir="rtl"] .leorre-country-header-mobile {
  flex-direction: row-reverse;
}

.leorre-shipping-container[dir="rtl"] .leorre-country-expand-mobile {
  transform: scaleX(-1);
}

.leorre-shipping-container[dir="rtl"] .leorre-shipping-option-card-mobile {
  flex-direction: row-reverse;
}

.leorre-shipping-container[dir="rtl"] .leorre-global-shipping-info-mobile {
  flex-direction: row-reverse;
}

.leorre-shipping-container[dir="rtl"] .leorre-global-features-mobile {
  flex-direction: row-reverse;
}

/* Responsive Design */
@media (max-width: 768px) {
  .leorre-shipping-countries-grid {
    grid-template-columns: 1fr;
  }
  
  .leorre-shipping-section {
    padding: var(--spacing-md);
  }
  
  .leorre-country-header {
    gap: var(--spacing-sm);
  }
  
  .leorre-country-flag {
    width: 36px;
    height: 36px;
  }
  
  .leorre-flag-emoji {
    font-size: 1.3rem;
  }
  .leorre-shipping-section-title{
    font-size: 12px;
  }
  
  /* Mobile scrolling */
  .leorre-shipping-countries-mobile {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: var(--spacing-sm);
  }
  
  .leorre-shipping-countries-mobile::-webkit-scrollbar {
    width: 4px;
  }
  
  .leorre-shipping-countries-mobile::-webkit-scrollbar-track {
    background: rgba(var(--kelp-200-rgb), 0.3);
    border-radius: 2px;
  }
  
  .leorre-shipping-countries-mobile::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 2px;
  }
  
  .leorre-shipping-countries-mobile::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dark);
  }
  
  /* Mobile RTL scrolling */
  .leorre-shipping-container[dir="rtl"] .leorre-shipping-countries-mobile {
    padding-right: 0;
    padding-left: var(--spacing-sm);
  }
}

/* Product Specifications Loading */
.leorre-specifications-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  gap: var(--spacing-md);
  color: var(--kelp-600);
}

.leorre-specifications-loading .leorre-loader-diamond {
  width: 32px;
  height: 32px;
  border: 2px solid var(--gold);
  border-top: 2px solid transparent;
  border-radius: 4px;
  animation: spin 1s linear infinite;
}

/* Care Instructions List */
.leorre-care-instructions-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.leorre-care-instruction-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--kelp-50);
  border-radius: var(--border-radius-md);
  position: relative;
}

.leorre-care-instruction-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-care-instruction-marker {
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.leorre-care-instruction-item span {
  color: var(--kelp-800);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* RTL Support for Care Instructions */
.leorre-care-instruction-item[dir="rtl"] {
  /* RTL uses same horizontal line as LTR */
}

/* Enhanced Specifications Grid */
.leorre-specifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.leorre-spec-item {
  padding: 0.5rem;
  position: relative;
}

.leorre-spec-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
  opacity: 0.6;
}

.leorre-spec-label {
  font-size: 14px;
  color: var(--kelp-500);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leorre-spec-value {
  font-size: 12px;
  color: var(--kelp-900);
}

/* Responsive Specifications */
@media (max-width: 768px) {
  .leorre-specifications-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  
  .leorre-spec-item {
    padding: var(--spacing-sm);
  }
}

/* Hide ProductInfo button on mobile - page-level sticky button used instead */
.leorre-product-actions.hidden {
  display: none;
}

/* ===================================
   Page-Level Sticky Button Styles
====================================== */
.leorre-page-sticky-button {
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
  padding-right: 20px;
}

.leorre-page-sticky-button.relative-mode {
  /* Inline state: sits in normal flow where rendered */
  position: static;
  padding: 16px;
  background: var(--kelp-950);
  z-index: auto;
  height: 48px;
}

.leorre-page-sticky-button.sticky-mode {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0);
  left: 0;
  right: 0;
  padding: 16px;
  background: var(--kelp-950);
  height: 48px;
  z-index: 99999;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: widthExpand 0.2s ease-in-out forwards;
}

/* Horizontal top/bottom borders (Loro Piana-like) */
.leorre-page-sticky-button::before,
.leorre-page-sticky-button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-300), transparent);
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0.6;
}

.leorre-page-sticky-button::before { /* top border */
  top: 0;
}

.leorre-page-sticky-button::after { /* bottom border */
  bottom: 0;
}

/* State tweaks */
.leorre-page-sticky-button.relative-mode::before,
.leorre-page-sticky-button.relative-mode::after {
  opacity: 0.4;
  background: linear-gradient(90deg, transparent, var(--kelp-400), transparent);
}

.leorre-page-sticky-button.sticky-mode::before,
.leorre-page-sticky-button.sticky-mode::after {
  opacity: 0.8;
  background: linear-gradient(90deg, transparent, var(--kelp-200), transparent);
}

.leorre-page-sticky-button:hover::before,
.leorre-page-sticky-button:hover::after {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--kelp-100), transparent);
}

.leorre-page-sticky-btn {
  width: 100%;
  cursor: pointer;
  border: none;
  color: var(--gold-dark);
  padding: 16px 24px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  background: transparent;
}

.leorre-page-sticky-btn-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  min-width: 120px;
  height: 20px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Sticky button content states */
.leorre-sticky-btn-success,
.leorre-sticky-btn-select,
.leorre-sticky-btn-normal,
.leorre-sticky-btn-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
}

.leorre-sticky-btn-select {
  color: var(--gold-dark);
}

.leorre-sticky-btn-success {
  color: var(--kelp-400);
}

.leorre-sticky-btn-normal {
  color: var(--gold-dark);
}

.leorre-sticky-btn-upload {
  color: var(--gold-dark);
}

/* Zigzag animation for Select Options text */
.zigzag-text {
  animation: zigzag 2s ease-in-out infinite;
}

@keyframes zigzag {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(1px);
  }
}

.leorre-page-sticky-btn:hover .leorre-page-sticky-btn-content {
  transform: translate(-50%, -50%) translateY(-2px);
}

/* Sticky button shine effect */
.leorre-page-sticky-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-25deg);
  transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  border-radius: inherit;
}

.leorre-page-sticky-btn:hover::before {
  left: 120%;
}

.leorre-page-sticky-btn.success::before {
  left: 120%;
}

/* Simple width transition using clip-path */
@keyframes widthShrink {
  from { clip-path: inset(0 0% 0 0%); }
  to { clip-path: inset(0 1.5% 0 1.5%); }
}

@keyframes widthExpand {
  from { clip-path: inset(0 1.5% 0 1.5%); }
  to { clip-path: inset(0 0% 0 0%); }
}

/* Wrapper container for relative mode button - animates its own width */
.leorre-page-sticky-button-wrapper {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--kelp-950);
  width: 100%;
}

.animate-width {
  animation: widthShrink 0.2s ease-in-out forwards;
}

.animate-width-expand {
  animation: widthExpand 0.2s ease-in-out forwards;
}

.leorre-page-sticky-button-wrapper .leorre-page-sticky-button {
  width: 100%;
  background: var(--kelp-950);
}

.leorre-page-sticky-btn.success {
  background: none;
  color: var(--kelp-100) !important;
}

.leorre-page-sticky-btn.success .leorre-page-sticky-btn-content {
  transform: translate(-50%, -50%) translateY(-2px);
}

.leorre-page-sticky-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.leorre-page-sticky-btn:hover:not(:disabled) {
  transform: translateY(-2px);

}

.leorre-page-sticky-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold);
}

.leorre-page-sticky-btn:focus:not(:disabled) {
  transform: translateY(-2px);

}

@media (max-width: 768px) {
  .leorre-page-sticky-button.sticky-mode {
    padding: 12px 16px;
  }
  
  .leorre-page-sticky-button.relative-mode {
    padding: 12px 16px;
  }
  
  .leorre-page-sticky-button::before {
    left: 0;
  }
  
  .leorre-page-sticky-button::after {
    right: 0;
  }
  
  .leorre-page-sticky-button.relative-mode::before,
  .leorre-page-sticky-button.relative-mode::after {
    opacity: 0.5;
  }
  
  .leorre-page-sticky-button.sticky-mode::before,
  .leorre-page-sticky-button.sticky-mode::after {
    opacity: 0.9;
  }
  
  .leorre-page-sticky-button:hover::before,
  .leorre-page-sticky-button:hover::after {
    opacity: 1;
  }
  
  .leorre-page-sticky-btn {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 400;
  }
  .leorre-panel-toggles{
    padding: 2rem 0;
  
  }
}


/* Ultra-Minimal Luxury Signature Section */
.features-section {
  position: relative;
  padding-top: 0; /* Remove top padding to sit exactly at hero bottom */
  margin-top: 0; /* Remove negative margin */
  background: var(--color-background-light);
  z-index: 5;
  height: 12vh; /* Reduced from 16vh */
  min-height: 90px; /* Reduced from 120px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;

  top: 30px;
  /* Performance optimizations */
  will-change: auto;
  touch-action: manipulation !important;
  pointer-events: auto;
}

.features-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 90%;
  max-width: 800px;
}

/* Elegant brand signature container */
.brand-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  gap: 15px;
}

/* Refined tagline container with better positioning */
.tagline-container {
  position: relative;
  margin-top: 20px; /* Reduced from 40px */
  height: 30px; /* Reduced from 40px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Allow animations to extend outside */
  width: 100%;
  contain-intrinsic-size: 100% 30px; /* Updated to match new height */

}

/* Minimal accent lines */
.accent-line {
  position: relative;
  height: 1px;
  background: linear-gradient(to right, 
    transparent, 
    var(--gold-light), 
    var(--gold), 
    var(--gold-light), 
    transparent
  );
  width: 40%;
  opacity: 0.5;
}



/* Vertical line accent (replacing diamond) */
.accent-line-vertical {
  position: absolute;
  width: 1px;
  height: 15px;
  background: linear-gradient(to bottom, 
    transparent, 
    var(--gold-light),
    var(--gold),
    var(--gold-light), 
    transparent
  );
  opacity: 0.5;
}

/* Brand tagline styling */
.brand-tagline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tagline-text {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  color: rgba(var(--kelp-700-rgb), 0.8);
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.2;
  white-space: nowrap;
 
}

/* RTL Support */
[lang="ar"] .features-section,
[lang="fa"] .features-section,
[lang="he"] .features-section {
  direction: rtl;
}

[lang="ar"] .tagline-text,
[lang="fa"] .tagline-text,
[lang="he"] .tagline-text {
  direction: rtl;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .features-section {
    height: 10vh;
    min-height: 70px;
  }
  
  .tagline-container {
    margin-top: 15px;
    height: 25px;
  }
  
  .tagline-text {
    font-size: 12px;
  }
  
  .accent-line-vertical {
    height: 12px;
  }
}

@media (max-width: 480px) {
  .features-section {
    height: 8vh;
    min-height: 60px;
  }
  
  .tagline-container {
    margin-top: 10px;
    height: 20px;
  }
  
  .tagline-text {
    font-size: 12px;
  }
  
  .accent-line {
    width: 35%;
  }
  
  .accent-line-vertical {
    height: 10px;
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .brand-tagline {
    animation: none !important;
  }
  
  .tagline-text {
    animation: none !important;
  }
}

/* Performance optimizations */
.section-container#features-section-container {
  will-change: auto;
}

#features-section-container .features-container {
  will-change: auto;
}

#features-section-container .feature-card {

  will-change: auto;
}

/* RTL specific adjustments */
[lang="ar"] .features-section,
[lang="fa"] .features-section,
[lang="he"] .features-section {
  direction: rtl;
}

[lang="ar"] .tagline-text,
[lang="fa"] .tagline-text,
[lang="he"] .tagline-text {
  direction: rtl;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.1em;
}

[lang="ar"] .tagline-text span,
[lang="fa"] .tagline-text span,
[lang="he"] .tagline-text span {
  display: inline-block;
  direction: rtl;
  unicode-bidi: bidi-override;
}

[lang="ar"] .tagline-container,
[lang="fa"] .tagline-container,
[lang="he"] .tagline-container {
  direction: rtl;
}

[lang="ar"] .brand-tagline,
[lang="fa"] .brand-tagline,
[lang="he"] .brand-tagline {
  direction: rtl;
  text-align: center;
}

/* Chinese language support */
[lang="zh"] .tagline-text {
  font-family: var(--font-primary);
  letter-spacing: 0.05em;
}

/* RTL character classes for mixed content */
.rtl-char {
  direction: rtl;
  unicode-bidi: bidi-override;
}

.ltr-char {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.tagline-text {
  direction: ltr;
  text-align: center;
}

[lang="ar"] .rtl-char,
[lang="fa"] .rtl-char,
[lang="he"] .rtl-char {
  direction: rtl;
  unicode-bidi: bidi-override;
}

[lang="ar"] .tagline-text.no-animation span,
[lang="fa"] .tagline-text.no-animation span,
[lang="he"] .tagline-text.no-animation span {
  animation: none !important;
  transition: none !important;
}

/* Simplified text styling */
.tagline-text span {
  display: inline-block;
  will-change: transform, opacity;
}

[lang="ar"] .tagline-text span,
[lang="fa"] .tagline-text span,
[lang="he"] .tagline-text span {
  direction: rtl;
  unicode-bidi: bidi-override;
}
/* =============================================
   FeaturedCollections.css - Deck of Cards Gallery with Cold Kelp Colors
   ============================================= */

   .featured-collections-section {
    position: relative;
    height: 100vh; /* Increased from 100vh to 120vh */
    min-height: 1000px; /* Increased from 800px to 1000px */
   
    background: rgba(var(--kelp-300-rgb), 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6rem 0; /* Increased from 4rem to 6rem */
    padding-top: 18rem; /* Increased from 16rem to 20rem */
    padding-bottom: 14rem; /* Increased from 12rem to 16rem */
  }
  
 
  
 
  
  .collections-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    gap: 2rem;
  }
  
/* Bottom content (heading, description, CTA) */
.fc-bottom-title {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  pointer-events: auto;
  white-space: nowrap;
}

.fc-bottom-inner { max-width: min(70ch, 70vw); margin: 0 auto; }
.fc-bottom-heading {
  margin: 0 0 0.5rem 0;
  font-family: 'Optima', 'Garamond', 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: 0.02em;
  /* Color removed - will be set by fc-color classes */
}
.fc-bottom-description {
  margin: 0 0 0.75rem 0;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.4;
  white-space: wrap;
  opacity: 0.8;
  /* Color removed - will be set by fc-description classes */
}
.fc-bottom-cta {
  /* Match category-promotional-view-button look */
  position: relative;
  background: none;
  /* Color removed - will be set by fc-color classes */
  padding: 5px 65px;
  font-size: 0.9rem;
  letter-spacing: 0.12em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Removed old conflicting CTA color classes */

.fc-bottom-cta::before,
.fc-bottom-cta::after {
  content: '';
  width: 80%;
  align-self: center;
  justify-self: center;
  position: absolute;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-200), transparent);
  transition: all 0.4s ease;
}
.fc-bottom-cta::before { top: -2px; display: none; }
.fc-bottom-cta::after { bottom: -2px; }
.fc-bottom-cta:hover::before { top: -10px; }
.fc-bottom-cta:hover::after { bottom: -10px; }

/* Per-index text colors - using root kelp and gold variables */
/* Removed old conflicting color classes */

@media (max-width: 767px) {
  .fc-bottom-title { bottom: 11%; }
  .fc-bottom-inner { max-width: 90vw; }
}
  
.background-title {
  position: relative;
  max-width: min(52ch, 46vw);
}

.background-title h3 {
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.12;
  font-size: 18px;
  /* Wrapping & hyphenation */
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
  
  
  
  /* Luxury accent lines */
  .collections-accent-line {
    position: absolute;
    height: 1px;
    opacity: 0.4;
    z-index: 3;
  }
  
  .collections-accent-line-top {
    top: 15%;
    left: 5%;
    width: 30%;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(var(--kelp-600-rgb), 0.2) 40%,
      rgba(var(--kelp-600-rgb), 0.5) 100%);
  }
  
  .collections-accent-line-bottom {
    bottom: 15%;
    right: 5%;
    width: 30%;
    background: linear-gradient(90deg,
      rgba(var(--kelp-600-rgb), 0.5) 0%,
      rgba(var(--kelp-600-rgb), 0.2) 60%,
      transparent 100%);
  }
  
  .circular-gallery-container {
    position: relative;
    width: 100%;
    height: 65vh; /* Increased from 55vh to 65vh for better centering */
    min-height: 550px; /* Increased from 450px to 550px */
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .circular-gallery {
    position: absolute; /* Changed from relative */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Precise centering */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    transform-style: preserve-3d;
    overflow: visible;
    /* Performance optimizations */
    backface-visibility: hidden;
    /* Removed padding-bottom, handled by container */
  }
  
/* Featured Collections Specific Rules - fc-gallery-container */
.fc-gallery-container .gallery-slide {
  position: absolute;
  width: 28vw;
  height: 32vw;
  min-width: 320px;
  min-height: 430px;
  max-width: 380px;
  max-height: 520px;
  background: var(--kelp-100);
  border-radius: 3px;
  transform-origin: center center;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Desktop luxury hierarchy for spread state */
.fc-gallery-container.fc-spread-state .gallery-slide:not(.active) {
  width: 24vw;
  height: 28vw;
  min-width: 280px;
  min-height: 380px;
  max-width: 320px;
  max-height: 450px;
  opacity: 0.75;
  filter: brightness(0.9) contrast(0.95);
  box-shadow: 
    0 6px 20px rgba(var(--kelp-900-rgb), 0.1),
    0 2px 6px rgba(var(--kelp-900-rgb), 0.06);
}

.fc-gallery-container.fc-spread-state .gallery-slide.active {
  width: 28vw;
  height: 32vw;
  min-width: 320px;
  min-height: 430px;
  max-width: 380px;
  max-height: 520px;
  opacity: 1;
  filter: brightness(1) contrast(1);
  box-shadow: 
    0 12px 40px rgba(var(--kelp-900-rgb), 0.2),
    0 4px 15px rgba(var(--kelp-900-rgb), 0.1),
    0 0 0 1px rgba(var(--gold-rgb), 0.15);
}

/* Mobile specific rules for fc-gallery-container */
@media (max-width: 767px) {
  .fc-gallery-container .gallery-slide {
    width: 28vw;
    height: 44vw;
    min-width: 240px;
    min-height: 320px;
  }
  
  /* Fix card sizing - ensure all cards have same size in stack state */
  .fc-gallery-container.fc-initial-state .gallery-slide {
    width: 28vw !important;
    height: 44vw !important;
    min-width: 240px !important;
    min-height: 320px !important;
  }
  
  /* Non-active cards in spread state - smaller size for luxury hierarchy */
  .fc-gallery-container.fc-spread-state .gallery-slide:not(.active) {
    width: 22vw !important;
    height: 35vw !important;
    min-width: 200px !important;
    min-height: 260px !important;
    opacity: 0.7;
    filter: brightness(0.9) contrast(0.95);
    box-shadow: 
      0 4px 12px rgba(var(--kelp-900-rgb), 0.08),
      0 1px 3px rgba(var(--kelp-900-rgb), 0.04);
   
  }
  .fc-bottom-description{
    font-size: 0.80rem;
  }
  
  /* Active card in spread state - full size and luxury styling */
  .fc-gallery-container.fc-spread-state .gallery-slide.active {
    width: 28vw !important;
    height: 44vw !important;
    min-width: 240px !important;
    min-height: 320px !important;
    opacity: 1;
    filter: brightness(1) contrast(1);
    box-shadow: 
      0 8px 25px rgba(var(--kelp-900-rgb), 0.15),
      0 3px 10px rgba(var(--kelp-900-rgb), 0.08),
      0 0 0 1px rgba(var(--gold-rgb), 0.1);
  }
  
  /* Add more distance in stack state */
  .fc-gallery-container.fc-initial-state .gallery-slide {
    margin-bottom: 1rem;
  }
}
  
  /* Hover and active effects removed for performance - handled by framer-motion */
  
  .gallery-slide.active .collection-image {
    filter: brightness(1) contrast(1);
  
  }
  
  /* Removed collectionImageFloat animation for performance */
  
  .collection-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
    background: var(--kelp-200);
  }
  
  .collection-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 3px;
    /* Performance optimizations */
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  
  /* Non-active cards: remove border/frame; keep subtle shadow only */
  .gallery-slide:not(.active) {
    padding: 0;
    background: transparent;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  }

  .gallery-slide:not(.active) .collection-image-container {
    border-radius: 3px;
    overflow: hidden;
    background: var(--kelp-200);
  }

  .gallery-slide:not(.active) .collection-image {
    filter: brightness(0.92) contrast(1.05);
    border-radius: 3px;
  }
  
  /* Hover effects removed for performance */
  
  /* Removed conflicting luxury-gradient-text class */

/* Removed luxury-text-core italic styling */

/* Removed conflicting gradient classes - using root colors instead */

/* Beautiful gradient colors using same parent colors with different placements */
.fc-bottom-heading.fc-color-0 {
  background: linear-gradient(135deg, var(--gold-dark), var(--kelp-950), var(--kelp-800));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-heading.fc-color-1 {
  background: linear-gradient(135deg, var(--kelp-800), var(--gold-dark), var(--kelp-950));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-heading.fc-color-2 {
  background: linear-gradient(135deg, var(--kelp-950), var(--kelp-800), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-heading.fc-color-3 {
  background: linear-gradient(135deg, var(--kelp-800), var(--kelp-950), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-heading.fc-color-4 {
  background: linear-gradient(135deg, var(--kelp-950), var(--kelp-800), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Description gradients - same parent colors with different placements */
.fc-bottom-description.fc-description-0 {
  background: linear-gradient(90deg, var(--gold-dark), var(--kelp-950), var(--kelp-800));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-description.fc-description-1 {
  background: linear-gradient(90deg, var(--kelp-800), var(--gold-dark), var(--kelp-950));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-description.fc-description-2 {
  background: linear-gradient(90deg, var(--kelp-950), var(--kelp-800), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-description.fc-description-3 {
  background: linear-gradient(90deg, var(--kelp-800), var(--kelp-950), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-description.fc-description-4 {
  background: linear-gradient(90deg, var(--kelp-950), var(--kelp-800), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* CTA gradients - same parent colors with different placements */
.fc-bottom-cta.fc-color-0 {
  background: linear-gradient(135deg, var(--gold-dark), var(--kelp-950), var(--kelp-800));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-cta.fc-color-1 {
  background: linear-gradient(135deg, var(--kelp-800), var(--gold-dark), var(--kelp-950));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-cta.fc-color-2 {
  background: linear-gradient(135deg, var(--kelp-950), var(--kelp-800), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-cta.fc-color-3 {
  background: linear-gradient(135deg, var(--kelp-800), var(--kelp-950), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fc-bottom-cta.fc-color-4 {
  background: linear-gradient(135deg, var(--kelp-950), var(--kelp-800), var(--gold-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Finer wrap control on very narrow screens */
@media (max-width: 767px) {
  .background-collection-titles { 
    bottom: 12%; 
    left: 50%; 
    transform: translateX(-50%);
    opacity: 0.8; 
  }
  .fc-bottom-heading{
    font-size: 1.25rem;
    font-weight: 300;
    font-style: italic;
  }
  .background-title { max-width: 90vw; }
  .background-title h3 {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.065em;
  }
  .fc-bottom-cta{
    font-size: 0.80rem;
    padding: 15px 0;
  }
}

  .collection-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--kelp-200);
    border-radius: 3px;
  }
  
  /* Image reflection outside the container */
  .collection-image-reflection {
    height: 20%;
    border-radius: 0 0 16px 16px;
    pointer-events: none;
    box-sizing: border-box;
    margin-top: 0; /* Remove margin to align exactly */
    overflow: hidden;
    position: absolute;
    bottom: -6% !important; /* Position at bottom of image */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Perfect centering */
    mask: linear-gradient(to top, transparent 0%, rgba(var(--kelp-950-rgb), 0.4) 30%, rgba(var(--kelp-950-rgb), 0.7) 60%, rgba(var(--kelp-950-rgb), 0.3) 85%, transparent 100%);
    -webkit-mask: linear-gradient(to top, transparent 0%, rgba(var(--kelp-950-rgb), 0.4) 30%, rgba(var(--kelp-950-rgb), 0.7) 60%, rgba(var(--kelp-950-rgb), 0.3) 85%, transparent 100%);
    /* Ensure perfect centering */
    margin-left: 0;
    margin-right: 0;
    /* Prevent any offset */
    
    top: auto;
  }
  
  .reflection-image {
    filter: blur(2px);
    -o-object-position: center bottom;
       object-position: center bottom; /* Align to bottom center */
    mask: linear-gradient(to top, transparent 0%, rgba(var(--kelp-950-rgb), 0.4) 30%, rgba(var(--kelp-950-rgb), 0.7) 60%, rgba(var(--kelp-950-rgb), 0.3) 85%, transparent 100%) !important;
    -webkit-mask: linear-gradient(to top, transparent 0%, rgba(var(--kelp-950-rgb), 0.4) 30%, rgba(var(--kelp-950-rgb), 0.7) 60%, rgba(var(--kelp-950-rgb), 0.3) 85%, transparent 100%) !important;
    /* Ensure perfect alignment */
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .collection-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(var(--kelp-50-rgb), 0.8) 0%,
      rgba(var(--kelp-100-rgb), 0.3) 40%,
      transparent 70%
    );
    z-index: 3;
    opacity: 0;
    border-radius: 3px;
    /* Transition removed for performance */
  }
  
  .collection-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kelp-100);
    border-radius: 3px;
    position: relative;
  }
  
  .collection-image-placeholder svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
  }
  
  
  .active-collection-info {
    position: absolute;
    width: 100%;
    z-index: 5;
    will-change: transform, opacity;
    display: flex; /* Use flexbox for alignment */
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    bottom: 32%; /* Increased from -40px to -60px for better centering */
  }
  
  .active-collection-title {
    /* This element is being removed from the component */
    display: none;
  }
  
  .active-collection-description-container {
    position: absolute; /* Changed from absolute */
    bottom: auto; /* Reset positioning */
    left: auto; /* Reset positioning */
    transform: none; /* Reset positioning */
    padding: 16px; /* Match BrandStory content-frame padding */
    background: linear-gradient(
      to bottom,
      rgba(var(--kelp-100-rgb), 0.82) 0%,
      rgba(var(--kelp-50-rgb), 0.70) 100%
    );
  
    border: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 18%;
    
    height: 75px; /* Reduced height */
    z-index: 10;
    /* Add clip-path like BrandStory content-frame */
    clip-path: polygon(
      0 10px, 10px 0,
      calc(100% - 10px) 0, 100% 10px,
      100% calc(100% - 10px), calc(100% - 10px) 100%,
      10px 100%, 0 calc(100% - 10px)
    );
  }
  
  .active-collection-description-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kelp-600), transparent);
    opacity: 0.6;
  }
  
  .active-collection-description {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--kelp-700);
    text-transform: none;
    margin: 0;
    line-height: 1.5;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
  }
  
  .description-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
  }
  
  .view-collection-arrow {
    background: transparent;
    border: none;
    color: var(--kelp-600);
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    /* Transition removed for performance */
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  
  .view-collection-arrow:hover {
    color: var(--kelp-800);
    background: rgba(var(--kelp-100-rgb), 0.8);
    transform: translateX(2px);
  }
  
  .view-collection-arrow:active {
    transform: translateX(1px);
  }
  
  /* Removed old button styles - now using navigation arrows in description */
  
  .collections-nav-container {
    position: absolute;
    text-align: center;
    margin-top: 90%;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: clamp(320px, 64vw, 860px);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Override luxury navigation positioning for collections context */
  .collections-nav-container .luxury-navigation {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    padding: 0;
    pointer-events: auto;
  }
  
  
  
  .collections-nav-container .luxury-nav-line,
  .collections-nav-container .luxury-nav-arrow {
    background: rgba(var(--kelp-800-rgb), 0.9) !important;
  }
  
  .view-all-collections {
    position: relative;
    text-align: center;
    margin-top: 2rem;
    z-index: 10;
  }
  
  .fc-view-all-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-dark);
    display: none !important;
  
    border: none;
    overflow: hidden;
    /* Transition removed for performance */
  }
  
  .fc-view-all-link::after {
    content: '→';
    /* Transition removed for performance */
  }
  
  .fc-view-all-link:hover {
    color: var(--kelp-800);
    transform: translateX(2px);
  }
  
  .fc-view-all-link:hover::after {
    transform: translateX(4px);
  }
  
  /* Responsive Design */
  @media (max-width: 1024px) {
    .fc-gallery-container .gallery-slide {
      width: 28vw;
      height: 44vw;
      min-width: 240px;
      min-height: 320px;
    }
    .active-collection-description {
      font-size: 0.8rem;
    }
    .background-title {
      font-size: clamp(2rem, 5vw, 4rem);
    }
    .active-collection-description-container {
      width: 450px;
      height: 90px;
      bottom: 70px;
    }
    .view-collection-arrow {
      width: 28px;
      height: 28px;
      font-size: 1rem;
    }
  }
  
  @media (max-width: 767px) {
    .featured-collections-section {
      min-height: 100vh; /* Increased from 95vh to 110vh */
      padding: 1rem 0; /* Increased from 2rem to 3rem */
      padding-bottom:5rem;
    }
    .circular-gallery-container {
      height: 60vh; /* Increased from 50vh to 60vh */
      min-height: 500px; /* Increased from 400px to 500px */
      perspective: 800px;
    }
  
    /* Make side cards smaller than center card on mobile - REMOVED */
    /* .gallery-slide:not(.active) {
      min-width: 180px !important;
      min-height: 240px;
    } */
    .active-collection-info {
      padding: 0; /* Remove padding */
      margin-top: -2rem;
      bottom: 41%;
    }
    .active-collection-description {
      font-size: 0.75rem;
    }
    .active-collection-description-container {
      width: 90vw;
      max-width: 230px; /* Tighter on mobile */
      height: 70px; /* Reduced height */
      padding: 12px; /* Match BrandStory mobile padding */
      bottom: auto; /* Reset */
      border-radius: 3px;
    
    }
    .description-content {
      gap: 0.8rem;
    }
    .view-collection-arrow {
      width: 26px;
      height: 26px;
      font-size: 0.9rem;
    }
    .background-title {
      font-size: clamp(1.8rem, 4vw, 3rem);
    }
    .collections-accent-line-top,
    .collections-accent-line-bottom {
      display: none;
    }
    .view-all-collections {
      margin-top: 1.5rem;
    }
    .collection-image-reflection {
      height: 15%;
      min-width: 230px !important;
      max-width: 230px !important;
      bottom: 3% !important;
    }
    .collections-nav-container {
      gap: 1rem;
    }
  
    .fc-view-all-link{
      font-size: 10px;
    }
  }
  
  /* Performance optimizations */
  @media (prefers-reduced-motion: reduce) {
    .circular-gallery {
      transition: none;
    }
    .gallery-slide,
    .collection-image,
    .view-collection-btn {
      transition: none;
    }
    .background-title {
      animation: none;
    }
    .collection-image-reflection {
      display: none;
    }
    .active-collection-description-container {
      clip-path: none;
    }
  }
  
  /* High DPI displays */
  @media (min-resolution: 192dpi) {
    .active-collection-description {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  
  /* Mobile Touch/Swipe Implementation - No Swiper */
  @media (max-width: 767px) {
    .circular-gallery {
      touch-action: manipulation !important; /* FIXED: Prevent zoom */
      -moz-user-select: none;
           user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }
    
    .gallery-slide {
      touch-action: manipulation !important;
      cursor: grab;
    }
    
    .gallery-slide:active {
      cursor: grabbing;
    }
    
    /* Custom touch indicators - positioned at center bottom */
    .mobile-touch-indicator {
      position: absolute;
      bottom: -2rem;
      left: 50%;
      transform: translateX(-50%) !important;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 3px;
      width: auto;
      padding: 8px 12px;
     
    }
    
    .mobile-touch-dot {
      width: 4px;
      height: 4px;
      background-color: rgba(var(--kelp-500-rgb), 0.5);
      border-radius: 50%;
      margin: 0 2px;
      border: none;
      padding: 0;
      cursor: pointer;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
    }
  }
  /* CollectionsSkeleton - Exact match with FeaturedCollections.css */
.collections-skeleton {
  position: relative;
  height: 100vh;
  min-height: 1000px;
  color: var(--kelp-900);
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--kelp-100);
  padding: 6rem 0;
}

.collections-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-50-rgb), 0.05) 0%,
    rgba(var(--kelp-100-rgb), 0.1) 100%
  );
  z-index: 0;
}

.collections-skeleton-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow: visible;
}

/* Main Card Skeleton */
.collections-skeleton-main-card { display: none !important; }

.collections-skeleton-main-card::before { display: none !important; content: none !important; }

.collections-skeleton-main-card svg { display: none !important; }

/* Stacked Cards Skeleton */
.collections-skeleton-stack-card {
  position: absolute;
  width: 36vw;
  height: 39vw;
  min-width: 420px;
  min-height: 560px;
  max-width: 440px;
  max-height: 580px;
  background: rgba(var(--kelp-50-rgb), 0.4);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.collections-skeleton-stack-1 {
  transform: translateX(25vw) translateY(-8px) scale(0.98);
  z-index: 8;
}

.collections-skeleton-stack-2 {
  transform: translateX(19vw) translateY(-6px) scale(0.96);
  z-index: 7;
}

.collections-skeleton-stack-3 {
  transform: translateX(28vw) translateY(-4px) scale(0.94);
  z-index: 6;
}

.collections-skeleton-stack-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.15) 25%, 
    rgba(var(--kelp-100-rgb), 0.25) 50%, 
    rgba(var(--kelp-200-rgb), 0.15) 75%
  );
  background-size: 200% 100%;
  /* animation: minimal-shimmer 2.5s ease-in-out infinite; */
  border-radius: 3px;
}

.collections-skeleton-stack-card svg {
  position: relative;
  z-index: 2;
  opacity: 0.3;
}

/* Content Section Skeleton */
.collections-skeleton-content {
  position: absolute;
  left: 5%;
  top: 65%;
  transform: translateY(-50%);
  width: 40%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.collections-skeleton-label {
  width: 80px;
  height: 0.75rem;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  /* animation: minimal-shimmer 2.5s ease-in-out infinite; */
  border-radius: 2px;
}

.collections-skeleton-title {
  width: 200px;
  height: 3rem;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  /* animation: minimal-shimmer 2.5s ease-in-out infinite; */
  border-radius: 4px;
}

.collections-skeleton-subtitle {
  width: 120px;
  height: 1rem;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  /* animation: minimal-shimmer 2.5s ease-in-out infinite; */
  border-radius: 2px;
}

.collections-skeleton-price {
  width: 100px;
  height: 1.5rem;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  /* animation: minimal-shimmer 2.5s ease-in-out infinite; */
  border-radius: 3px;
}

.collections-skeleton-cta-section {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.collections-skeleton-primary-button,
.collections-skeleton-secondary-button {
  width: 160px;
  height: 44px;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  /* animation: minimal-shimmer 2.5s ease-in-out infinite; */
  border-radius: 3px;
}

/* Navigation Skeleton */
.collections-skeleton-navigation {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20;
}

.collections-skeleton-nav-button {
  display: none !important;
}

/* Counter Skeleton */
.collections-skeleton-counter {
  position: fixed;
  top: 30%;
  left: 7%;
  z-index: 12;
}

/* Minimal Shimmer Animation disabled */
/* @keyframes minimal-shimmer {
  0% {
    background-position: -200% 0;
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    background-position: 200% 0;
    opacity: 0.4;
  }
} */

/* Mobile Responsive */
@media (max-width: 768px) {
  .collections-skeleton {
    min-height: 100vh;
    padding: 2rem 0;
  }

  /* .collections-skeleton-main-card, */
  .collections-skeleton-stack-card {
    width: 55vw;
    height: 55vw;
    min-width: 230px;
    min-height: 300px;
    max-width: 280px;
    max-height: 320px;
  }

  /* .collections-skeleton-main-card { transform: translateX(0) translateY(-30px); } */

  .collections-skeleton-stack-1,
  .collections-skeleton-stack-2,
  .collections-skeleton-stack-3 {
    display: none; /* Hide stack cards on mobile */
  }

  .collections-skeleton-content {
    position: absolute;
    left: 5%;
    bottom: 4%;
    top: auto;
    transform: none;
    width: 90%;
  }

  .collections-skeleton-navigation {
    bottom: 40%;
    left: 85%;
    transform: none;
  }

  .collections-skeleton-nav-button {
    width: 32px;
    height: 32px;
  }

  .collections-skeleton-counter {
    top: auto;
    bottom: 40%;
    left: 3rem;
  }
}
/* ProductShowcase - Matching Shop Grid Layout */
.glassy-showcase-section {
  position: relative;
  padding: 8rem 1rem;
  background: rgba(var(--kelp-100-rgb), 0.5);
}

/* Hide global dark top divider specifically above showcase */
.glassy-showcase-section + .section-divider.theme-dark.divider-top,
.section-divider.theme-dark.divider-top + .glassy-showcase-section,
.section-divider.theme-dark.divider-top:has(+ .glassy-showcase-section) {
  display: none !important;
}

/* Add a header-style accent line at the top of showcase */
.glassy-showcase-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-400), var(--kelp-600), var(--kelp-400), transparent);
  opacity: 0.7;
  pointer-events: none;
}

/* Main Container */
.glassy-showcase-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 3px;
}

/* Top Section - All Text Elements */
.glassy-top-section {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-start;
  gap: 20px;
  padding: 1rem;

}

/* Header Section - Left */
.glassy-header-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-self: flex-start;
}

.glassy-title {
  font-size: 1rem;
  font-style: italic;
  font-weight: 300;
  color: var(--kelp-900);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.glassy-subtitle {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--gold-dark);
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* Tabs Section - Center */
.glassy-tabs-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  justify-self: center;
  padding: 1rem 0;
  width: 100%;

}



.simple-tabs-container {
  position: relative;
  margin-bottom: 12px;
  width: 100%;
  min-width: 380px !important;
  border-radius: 3px;
  background: rgba(var(--kelp-100-rgb), 0.2) !important;
}

.simple-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  border-radius: 3px;
  padding: 4px 8px;
  gap: 5px;
}

.simple-tab {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 8px;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: var(--kelp-600);
  letter-spacing: 0.4px;
  overflow: hidden;
  text-align: center;
  font-weight: var(--font-weight-regular);
  flex: 1;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: 3px;
  text-transform: none;
}

.simple-tab:hover:not(.active) {
  color: var(--kelp-800);
  background: rgba(var(--kelp-100-rgb), 0.4);
  transform: translateY(-1px);
}

.simple-tab.active {
  color: var(--kelp-900);
  background: rgba(var(--kelp-50-rgb), 0.8);
}

/* Width guard to prevent squishing like trending */
.simple-tabs-container { min-width: 280px; max-width: 420px; }

@media (max-width: 640px) {
  .simple-tabs-container { min-width: 260px; max-width: 380px; }
}

/* Match Trending responsive behavior */
@media (max-width: 1200px) {
  .simple-tabs { gap: 6px; }
}

@media (max-width: 768px) {
  .simple-tabs-container { max-width: 360px; }
  .simple-tabs { padding: 4px 8px; gap: 6px; }
  .simple-tab { font-size: 0.7rem; padding: 10px 8px; }
}



/* CTA Section - Right */
.glassy-cta-section {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  justify-self: flex-end;
}

.glassy-view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.glassy-view-text {
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--kelp-700-rgb), 0.8);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.glassy-view-arrow {
  color: rgba(var(--kelp-600-rgb), 0.6);
  font-size: 12px;
  transition: transform 0.2s ease;
}

.glassy-view-all:hover .glassy-view-text {
  color: var(--kelp-900);
}

.glassy-view-all:hover .glassy-view-arrow {
  transform: translateX(2px);
  color: rgba(var(--kelp-800-rgb), 0.8);
}

/* Cards Container */
.glassy-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 3px;
  padding: 20px;
}

/* Grid wrapper */
.showcase-grid-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 4rem; /* Space for controls */
}

/* Product grid with horizontal scroll for all devices */
.showcase-products {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
  min-height: auto;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 ;
}

/* Restores horizontal layout when inner content is animated as a single child */
.showcase-grid-content {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: stretch;
  position: relative;
}

.showcase-products::-webkit-scrollbar {
  display: none;
}

.showcase-product-item {
  flex: 0 0 320px;
  scroll-snap-align: start;
  min-width: 320px;
  max-width: 320px;
  width: 320px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* RTL Support */
.showcase-products[dir="rtl"] {
  direction: rtl;
}

.showcase-products[dir="rtl"] .showcase-product-item {
  direction: ltr; /* Keep product cards in LTR for proper image display */
}

/* Shop product item matching */
.showcase-product-item > * {
  width: 100%;
  height: 100%;
}

.showcase-product-item {
  min-height: 420px;
  opacity: 1;
}

.showcase-product-item:hover {
  transform: none; /* Disable hover lift for desktop external container */
}

.showcase-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  background: rgba(var(--kelp-100-rgb), 0.3);
  border-radius: 8px;
  color: var(--kelp-600);
}

/* Support shop ProductCardPlaceholder inside showcase items */
.showcase-product-item .shop-product-item {
  width: 100%;
  height: 100%;
}

.showcase-product-item .shop-product-item .product-card-placeholder {
  width: 100%;
  height: 100%;
}

/* Bottom controls container - matching TrendingProducts exactly */
.showcase-bottom-controls {
  position: absolute;
  bottom: -5rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  gap: 2rem; /* Add gap between nav and view all */
}

/* Navigation - left side - matching TrendingProducts exactly */
.showcase-navigation-wrapper {
  position: relative;
  z-index: 10;
}

/* Navigation styling - matching TrendingProducts exactly */
.showcase-navigation-wrapper .luxury-navigation {
  position: relative;
  width: auto;
  padding: 0;
  transform: none;
  top: auto;
  left: auto;
  right: auto;
  gap: 5px;
}

.showcase-indicators-wrapper{
  display: none !important;
}

.showcase-navigation .luxury-navigation {
  position: relative;
  width: auto;
  padding: 0;
  transform: none;
  top: auto;
  left: auto;
  right: auto;
  gap: 5px;
}



.showcase-navigation-wrapper .luxury-nav-button:hover:not(:disabled) {
  background: rgba(var(--kelp-100-rgb), 0.95) !important;
  
}

.showcase-navigation-wrapper .luxury-nav-line,
.showcase-navigation-wrapper .luxury-nav-arrow {
  background: rgba(var(--kelp-800-rgb), 0.9) !important;
}

.showcase-navigation-wrapper .luxury-nav-button:hover .luxury-nav-line,
.showcase-navigation-wrapper .luxury-nav-button:hover .luxury-nav-arrow {
  background: rgba(var(--kelp-900-rgb), 1) !important;
}

/* View all button - matching TrendingProducts text style */
.showcase-view-all {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  margin-left: auto; /* Push to right when no navigation */
}

/* When no navigation, center the view all button */
.showcase-bottom-controls.no-navigation {
  justify-content: flex-end;
}

.showcase-bottom-controls.no-navigation .showcase-view-all {
  margin-left: 0;
}

.showcase-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  position: relative;
  /* Transition removed for performance */
}

.showcase-view-all-link::before {
  content: '';
  width: 1px;
  height: 20px;
  background-color: var(--kelp-400);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.showcase-view-text {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 300;
  color: var(--kelp-500);
  text-transform: none;
  letter-spacing: 0.02em;
  /* Transition removed for performance */
}

.showcase-view-all-link:hover::before {
  background-color: var(--kelp-600);
  opacity: 0.8;
}

.showcase-view-all-link:hover .showcase-view-text {
  color: var(--kelp-800);
}

/* Responsive Design matching shop grid */
@media (max-width: 1200px) {
  .glassy-showcase-container {
    padding: 0;
  }
  
  .showcase-products {
    grid-template-columns: repeat(4, minmax(270px, 1fr));
  
  }
}

@media (max-width: 768px) {
  .showcase-view-text {
    font-size: 12px;
  }
}

@media (max-width: 960px) {
  .glassy-showcase-container {
    padding: 16px;
  }
  
  .glassy-top-section {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .glassy-subtitle{
    font-size: 12px;
  }
  .glassy-header-section,
  .glassy-cta-section {
    justify-self: center;
  }
  
  .glassy-tabs-section {
    order: 2;
  }
  
  .glassy-cta-section {
    order: 3;
  }
  
  .showcase-products {
    grid-template-columns: repeat(4, minmax(260px, 1fr));
  
  }
  
  .showcase-product-item {
    min-height: 380px;
  }
  

}

@media (max-width: 720px) {
  .glassy-showcase-section {
    padding: 8rem 0 ;
  }
  .glassy-title{
    font-size: 0.95rem;
  }
  
  .glassy-showcase-container {
    margin: 0 10px;
    padding: 5rem 0;
  }
  
  .glassy-top-section {
    gap: 12px;
    padding-bottom: 12px;
  }
  
  /* Horizontal scroll on mobile */
  .showcase-products {
    display: flex;
    grid-template-columns: none;
    gap: 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 0.5rem;
  }
  
  .showcase-products::-webkit-scrollbar {
    display: none;
  }
  
  .showcase-product-item {
    flex: 0 0 calc(50% - 0.5rem);
    scroll-snap-align: start;
    min-width: calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    min-height: 340px;
  }
  
  /* RTL adjustments for mobile */
  .showcase-products[dir="rtl"] {
    padding: 0 1rem 0 1rem;
  }
  
  .showcase-bottom-controls {
    position: relative;
    left: auto;
    right: auto;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem; /* Add horizontal padding on mobile */
    width: 100%;
    height: 44px;
    margin-top: 1rem;
  }
  
  /* When no navigation, center the view all button on mobile */
  .showcase-bottom-controls.no-navigation {
    justify-content: flex-end;
  }
  
  .showcase-bottom-controls.no-navigation .showcase-view-all {
    margin-left: 0;
  }
  
  .showcase-navigation-wrapper {
    position: relative;
    margin: 0;
  }
  


  
  
  .glassy-view-text {
    font-size: 11px;
  }
  
  .showcase-view-text {
    font-size: 12px;
  }
  
  .showcase-view-all-link {
    font-size: 11px;
  }
  

}

@media (max-width: 480px) {
  .glassy-cards-container {
    padding: 0 12px;
  }
  
  .showcase-products {
    gap: 5px;
    padding: 0 !important;
  }
  .showcase-grid-wrapper{
    margin-bottom: 2rem !important;
  }
  
  .showcase-product-item {
    min-height: 320px;
  }
  
  .showcase-bottom-controls {
    gap: 1rem;
    padding: 0 1rem;
  }
 
  .glassy-view-text {
    font-size: 10px;
  }
  
  .showcase-view-text {
    font-size: 11px;
  }
  
  .showcase-view-all-link {
    font-size: 10px;
  }
}

@media (max-width: 400px) {
  .showcase-product-item {
    min-height: 300px;
  }
  
  .showcase-bottom-controls {
    gap: 0.8rem;
    padding: 0 0.8rem;
  }
  
  .showcase-view-all-link {
    font-size: 9px;
  }
}

/* Accessibility and reduced motion */
@media (prefers-reduced-motion: reduce) {
  .simple-tab,
  .glassy-view-all,
  .showcase-product-item,
  .showcase-indicator {
    transition: none !important;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .simple-tab:active {
    transform: scale(0.98);
  }
  
  .glassy-view-all:active {
    transform: scale(0.98);
  }
}/* --- Premium Product Card - Simplified CSS (Animations handled by Framer Motion) --- */

/* Main Container */
.premium-product-card-container {
  position: relative ;
  width: 100%;
  height: 100%;
  padding-bottom: 70px;
  /* Removed contain that causes Safari chunky scroll */ 
  cursor: pointer;
}

/* The Card Element */
.premium-product-card {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 460px !important;
  background-color: rgba(var(--kelp-100-rgb), 0.5);
  overflow: hidden !important;
  z-index: 1;
  border-radius: 3px;
}

/* Image Container */
.premium-product-card__image-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  min-height: 420px;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
}

.premium-product-card__image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 420px;
}

/* Image Styling */
.premium-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  opacity: 1;
}

.premium-product-card__image.loaded {
  opacity: 1;
}

/* Secondary image styling */
.premium-product-card__image--secondary {
  opacity: 0; /* Start hidden, show on hover via inline style */
  z-index: 2;
  pointer-events: none; /* Prevent layout interaction when hidden */
}

/* Variant Hover Image Styling */
.premium-product-card__image--variant-hover {
  opacity: 0; /* Start hidden */
  z-index: 3;
  pointer-events: none; /* Prevent layout interaction when hidden */
}

.premium-product-card__image--variant-hover.visible {
  opacity: 1;
}

/* Image Placeholder */
.premium-product-card__image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(var(--kelp-100-rgb), 0.6);
  border-radius: 4px;
  z-index: 0;
  gap: 8px;
  min-height: 420px;
}

.premium-product-card__image-placeholder.is-error {
  background: rgba(var(--kelp-200-rgb), 0.4);
}

.premium-product-card__image-placeholder .placeholder-error-text {
  font-size: 0.7rem;
  color: var(--kelp-600);
  text-align: center;
  padding: 0 5px;
}

/* Ensure logo color consistency */
.premium-product-card__image-placeholder svg {
  color: rgba(var(--kelp-400-rgb), 0.5) !important;
}

/* New fallback placeholder with unique class names to avoid conflicts */
.premium-card-image-fallback {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--kelp-100-rgb), 0.6);
  border-radius: 4px;
  z-index: 0;
  gap: 8px;
  min-height: 420px;
}

.premium-card-image-fallback.has-error {
  background-color: rgba(var(--kelp-200-rgb), 0.4);
}

.fallback-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fallback-error-message {
  font-size: 0.7rem;
  color: var(--kelp-600);
  text-align: center;
  padding: 0 5px;
}

/* Force logo color consistency with new class names */
.premium-card-image-fallback .fallback-logo-container svg {
  color: rgba(var(--kelp-400-rgb), 0.5) !important;
}

/* Additional specificity to ensure no CSS inheritance issues */
.premium-card-image-fallback .fallback-logo-container svg * {
  color: rgba(var(--kelp-400-rgb), 0.5) !important;
}

.premium-card-image-fallback .fallback-logo-container svg path,
.premium-card-image-fallback .fallback-logo-container svg circle,
.premium-card-image-fallback .fallback-logo-container svg rect,
.premium-card-image-fallback .fallback-logo-container svg line {
  color: rgba(var(--kelp-400-rgb), 0.5) !important;
  fill: rgba(var(--kelp-400-rgb), 0.5) !important;
  stroke: rgba(var(--kelp-400-rgb), 0.5) !important;
}

/* Placeholder shimmer effect for ProductCardPlaceholder */
.premium-card-image-fallback .product-placeholder-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--kelp-50-rgb), 0.15) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
  z-index: 1;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Placeholder external info elements */
.premium-product-card__external-info .premium-product-card__external-name:empty::after {
  content: '';
  display: block;
  height: 14px;
  width: 75%;
  max-width: 160px;
  margin: 0 auto 3px;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-300-rgb), 0.5),
    rgba(var(--kelp-400-rgb), 0.3),
    rgba(var(--kelp-300-rgb), 0.5)
  );
  border-radius: 4px;
  animation: shimmer 2s infinite;
}

.premium-product-card__external-info .premium-product-card__external-price:empty::after {
  content: '';
  display: block;
  height: 12px;
  width: 45%;
  max-width: 90px;
  margin: 0 auto;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-300-rgb), 0.5),
    rgba(var(--kelp-400-rgb), 0.3),
    rgba(var(--kelp-300-rgb), 0.5)
  );
  border-radius: 4px;
  animation: shimmer 2s infinite;
}

/* Bookmark Button */
.premium-product-card__bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--kelp-50-rgb), 0.25);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.15);
  clip-path: polygon(
    0% 0%,
    calc(100% - 8px) 0%,
    100% 8px,
    100% 100%,
    0% 100%
  );
}

/* Active (Bookmarked) State */
.premium-product-card__bookmark.active {
  background-color: rgba(var(--accent-olive-rgb), 0.15);
  border-color: rgba(var(--accent-olive-rgb), 0.3);
}

/* Variants Count Indicator */
.premium-product-card__variants-count {
  position: absolute;
  left: 12px; 
  top: 12px;
  font-size: 10px; 
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  background-color: rgba(var(--kelp-50-rgb), 0.7);
  padding: 3px 6px;
  border-radius: 4px;
  z-index: 15;
}

/* Content Overlay */
.premium-product-card__content-overlay {
  position: absolute;
  bottom: 15px; 
  left: 50%;
  transform: translateX(-50%); 
  width: calc(100% - 20px); 
  max-width: 280px !important;
  z-index: 5; 
  background: var(--product-card-overlay-bg, rgba(var(--kelp-50-rgb), 0.96));
 
  padding: 45px 20px 40px 20px;
  min-height: 120px !important;
  border-radius: 3px;
  pointer-events: none;
}

/* Content inside the overlay */
.premium-product-card__content-overlay .premium-product-card__color-variants {
  margin-top: 10px; 
  padding-bottom: 0;
  gap: 14px; 
  align-items: center; 
}

.premium-product-card__color-variant {
  width: 20px;
  height: 20px; 
  border-radius: 2px; 
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(var(--kelp-400-rgb), 0.4); 
  padding: 2px; 
  background-clip: content-box !important;
  background-color: transparent;
  background-image: linear-gradient(rgba(255,255,255,0.02), rgba(0,0,0,0.02)),
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a0a0a0' fill-opacity='0.03' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  background-blend-mode: overlay;
}

/* Style for 'more variants' indicator */
.premium-product-card__color-variant--more {
  background: none !important;
  background-image: none !important;
  border: 1px dashed rgba(var(--kelp-400-rgb), 0.6);
  box-shadow: none;
  color: var(--kelp-600);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-medium);
  padding: 0;
}

/* Collection Tag */
.premium-product-card__content-overlay .premium-product-card__collection {
  position: absolute;
  bottom: 15px;
  left: 20px;
  right: 20px;
  margin-top: 0; 
  text-align: center;
}

/* Collection Text Styling */
.premium-product-card__collection-text {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--kelp-600);
  background-color: rgba(var(--kelp-200-rgb), 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

/* External Info */
.premium-product-card__external-info {
  position: absolute;
  bottom: 5px; 
  left: 0;
  right: 0;
  text-align: center; 
  z-index: 7; 
  pointer-events: none; 
}

/* External Name */
.premium-product-card__external-name {
  display: block; 
  font-size: 0.95rem; 
  font-weight: var(--font-weight-regular);
  color: rgba(var(--kelp-800-rgb), 0.7); 
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto; 
  cursor: pointer; 
  position: relative; 
  z-index: 6; 
  padding-top: 18px; 
}

/* Animated vertical line (replaces pseudo-element) */
.premium-product-card__external-name-line {
  position: absolute;
  top: 4px; 
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-500-rgb), 0.6),
    rgba(var(--kelp-500-rgb), 0.25)
  );
}

/* External Price Container */
.premium-product-card__external-price {
  position: relative; 
  z-index: 6; 
  font-size: 0.9rem; 
  pointer-events: auto; 
}

/* Target inner price elements for color/size changes */
.premium-product-card__external-price .ProductPrice--external {
  color: var(--gold-dark) !important;
  font-weight: 400;
}

/* Unique class for PremiumProductCard current price to avoid conflicts */
.premium-product-card__external-price .premium-card-current-price {
  color: var(--gold-dark) !important;
  font-weight: 400;
  font-size: 0.9rem;
}

.premium-product-card__external-price .original-price,
.premium-product-card__external-price s {
  text-decoration: none !important;
  color: rgba(var(--kelp-800-rgb), 0.7);
  font-size: 0.85em; 
  margin-left: 6px;
}

/* Responsive styles */
@media (max-width: 768px) {
  .premium-product-card-container {
    padding-bottom: 65px;
  }
  

  
  .premium-product-card__external-name { 
    font-size: 0.85rem; 
    padding-top: 16px; 
  }
  
  .premium-product-card__external-price { 
    font-size: 0.80rem; 
  }
  
  .premium-product-card__external-price .premium-card-current-price {
    font-size: 0.80rem;
  }
  
  /* Placeholder responsive styles */
  .premium-product-card__external-info .premium-product-card__external-name:empty::after {
    height: 12px;
    width: 70%;
    max-width: 140px;
    margin-bottom: 5px;
  }
  
  .premium-product-card__external-info .premium-product-card__external-price:empty::after {
    height: 10px;
    width: 40%;
    max-width: 80px;
  }
  
  .premium-product-card__content-overlay {
    padding: 40px 16px 35px 16px;
    min-height: 110px !important;
    max-width: 260px !important;
  }
  
  .premium-product-card__content-overlay .premium-product-card__collection {
    bottom: 12px;
    left: 16px;
    right: 16px;
  }
  
  .premium-product-card__content-overlay .premium-product-card__color-variants {
    gap: 12px; 
  }
  
  .premium-product-card__color-variant {
    width: 18px; 
    height: 18px;
    padding: 2px;
  }
  
  .premium-product-card__external-name-line { 
    top: 3px; 
  }

 
  
  .premium-product-card__external-info{
    bottom: 0 !important;
    transition: none !important;
  }
 
  .premium-product-card,
  .premium-product-card__image-container,
  .premium-product-card__image-wrapper,
  .premium-product-card__image,
  .premium-product-card__image-placeholder,
  .premium-card-image-fallback {
    min-height: 280px !important;
  }
}



@media (max-width: 480px) {
  .premium-product-card-container {
    padding-bottom: 60px;
  }
  
 
  
 
  
 
  .premium-product-card__content-overlay {
    padding: 35px 14px 30px 14px;
    min-height: 100px !important;
    max-width: 240px !important;
  }
  
  .premium-product-card__content-overlay .premium-product-card__collection {
    bottom: 10px;
    left: 14px;
    right: 14px;
  }
  
  .premium-product-card__content-overlay .premium-product-card__color-variants {
    gap: 10px; 
  }
  
  .premium-product-card__color-variant {
    width: 16px; 
    height: 16px;
    padding: 1px;
  }
  
  .premium-product-card__external-name-line { 
    top: 3px; 
  }
  
  .premium-product-card__external-price .premium-card-current-price {
    font-size: 0.75rem;
  }
  
  /* Placeholder responsive styles for small mobile */
  .premium-product-card__external-info .premium-product-card__external-name:empty::after {
    height: 11px;
    width: 65%;
    max-width: 120px;
  }
  
  .premium-product-card__external-info .premium-product-card__external-price:empty::after {
    height: 9px;
    width: 35%;
    max-width: 70px;
  }

  .premium-product-card__bookmark {
    width: 26px;
    height: 26px;
    top: 6px;
    right: 6px;
  }
}



/* Touch device styles */
@media (hover: none) {
  .premium-product-card__content-overlay {
    display: none !important;
  }

 
  .premium-product-card__external-name,
  .premium-product-card__external-price {
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .premium-product-card__external-name {
    opacity: 1 !important;
  }
  
 
  
  .premium-product-card__external-price .original-price,
  .premium-product-card__external-price s {
    color: rgba(var(--kelp-800-rgb), 0.7) !important;
  }

  .premium-product-card__external-name-line {
    opacity: 0.4 !important;
  }

  .premium-product-card__image--secondary {
    display: none !important;
    opacity: 1 !important; /* Changed from 0 to prevent flashing */
  }
  
  .premium-product-card__image {
     transform: scale(1.0) !important;
  }

  .premium-product-card__variants-count {
    display: none !important;
  }

  .premium-product-card__bookmark {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important; 
    background-color: rgba(var(--kelp-50-rgb), 0.25) !important; 
    border-color: rgba(var(--kelp-200-rgb), 0.15) !important;
  }
  
  .premium-product-card__bookmark.active {
    background-color: rgba(var(--accent-olive-rgb), 0.15) !important; 
    border-color: rgba(var(--accent-olive-rgb), 0.3) !important;
  }

  .premium-product-card__color-variant:hover {
     border-color: rgba(var(--kelp-400-rgb), 0.5) !important;
     box-shadow: none !important;
     transform: scale(1) !important;
  }

 
  
}

/* RTL Support */
.premium-product-card-container.rtl {
  direction: rtl;
}

.premium-product-card-container.rtl .premium-product-card__bookmark {
  left: 15px;
  right: auto;
}

.premium-product-card-container.rtl .premium-product-card__variants-count {
  left: 15px;
  right: auto;
  text-align: center;
}

.premium-product-card-container.rtl .premium-product-card__color-variants {
  flex-direction: row-reverse;
}

.premium-product-card-container.rtl .premium-product-card__collection {
  text-align: center;
}

.premium-product-card-container.rtl .premium-product-card__external-info {
  text-align: center;
}

.premium-product-card-container.rtl .premium-product-card__external-name {
  text-align: center;
}

.premium-product-card-container.rtl .premium-product-card__external-price {
  text-align: center;
}

/* Language-specific font handling */
[lang="ar"] .premium-product-card__external-name,
[lang="fa"] .premium-product-card__external-name {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: contextual;
}

[lang="zh"] .premium-product-card__external-name,
[lang="ja"] .premium-product-card__external-name {
  font-family: 'Noto Serif SC', 'Noto Serif JP', serif;
  letter-spacing: 0.05em;
} /* Product Card Placeholder - Mirrors PremiumProductCard Layout Exactly */
/* Use extremely specific selectors to avoid ANY conflicts with real product cards */

/* Main Container - matches premium-product-card-container exactly */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 70px; /* match premium-product-card-container */
  cursor: pointer;
}

/* Card Element - matches premium-product-card exactly */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__card {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 460px !important;
  background-color: rgba(var(--kelp-100-rgb), 0.5);
  overflow: hidden !important;
  z-index: 1;
  border-radius: 3px;
}

/* Image Container - matches premium-product-card__image-container exactly */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__image-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  min-height: 420px;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
}

/* Center logo inside */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__image-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Shimmer effect */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--kelp-50-rgb), 0.15) 50%,
    transparent 100%
  );
  z-index: 0;
}

/* External Info - matches premium-product-card__external-info exactly */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-info {
  position: absolute;
  bottom: 5px; /* match premium-product-card__external-info */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 7; /* match premium-product-card__external-info */
  pointer-events: none;
}

/* External Name - matches premium-product-card__external-name exactly */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-name {
  display: block;
  font-size: 0.95rem;
  font-weight: var(--font-weight-regular);
  color: rgba(var(--kelp-800-rgb), 0.7);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  z-index: 6;
  padding-top: 18px;
  height: 14px;
  width: 75%;
  max-width: 160px;
  margin: 0 auto 3px;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-300-rgb), 0.5),
    rgba(var(--kelp-400-rgb), 0.3),
    rgba(var(--kelp-300-rgb), 0.5)
  );
  border-radius: 4px;
}

/* External Name Line - matches premium-product-card__external-name-line */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-name-line {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-500-rgb), 0.6),
    rgba(var(--kelp-500-rgb), 0.25)
  );
}

/* External Price - matches premium-product-card__external-price exactly */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-price {
  position: relative;
  z-index: 6;
  font-size: 0.9rem;
  pointer-events: auto;
  height: 12px;
  width: 45%;
  max-width: 90px;
  margin: 0 auto;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-300-rgb), 0.5),
    rgba(var(--kelp-400-rgb), 0.3),
    rgba(var(--kelp-300-rgb), 0.5)
  );
  border-radius: 4px;
}

/* CRITICAL: Ensure bookmark buttons on real product cards are always visible */
/* Override any placeholder interference */
.shop-product-item .premium-product-card-container .premium-product-card__bookmark {
  position: absolute !important;
  z-index: 999 !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
}

/* Mobile-specific styles - match PremiumProductCard exactly */
@media (max-width: 768px) {
  .shop-product-item .premium-product-card-container .premium-product-card__bookmark {
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    clip-path: polygon(0% 0%, calc(100% - 7px) 0%, 100% 7px, 100% 100%, 0% 100%) !important;
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) {
    padding-bottom: 65px; /* match PremiumProductCard mobile */
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__card,
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__image-area {
    min-height: 280px !important; /* match PremiumProductCard mobile */
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-name {
    font-size: 0.85rem;
    padding-top: 16px;
    height: 12px;
    width: 70%;
    max-width: 140px;
    margin-bottom: 5px;
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-price {
    font-size: 0.80rem;
    height: 10px;
    width: 40%;
    max-width: 80px;
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-name-line {
    top: 3px;
  }
}

@media (max-width: 640px) {
  .shop-product-item .premium-product-card-container .premium-product-card__bookmark {
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    clip-path: polygon(0% 0%, calc(100% - 6px) 0%, 100% 6px, 100% 100%, 0% 100%) !important;
  }
}

@media (max-width: 480px) {
  .shop-product-item .premium-product-card-container .premium-product-card__bookmark {
    top: 6px !important;
    right: 6px !important;
    width: 26px !important;
    height: 26px !important;
    clip-path: polygon(0% 0%, calc(100% - 5px) 0%, 100% 5px, 100% 100%, 0% 100%) !important;
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) {
    padding-bottom: 60px; /* match PremiumProductCard small mobile */
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-name {
    height: 11px;
    width: 65%;
    max-width: 120px;
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-price {
    font-size: 0.75rem;
    height: 9px;
    width: 35%;
    max-width: 70px;
  }
  
  .shop-product-item .product-card-placeholder:not(.premium-product-card-container) .product-card-placeholder__external-name-line {
    top: 3px;
  }
}

/* RTL Support */
.shop-product-item .product-card-placeholder:not(.premium-product-card-container).rtl {
  direction: rtl;
}

.shop-product-item .product-card-placeholder:not(.premium-product-card-container).rtl .product-card-placeholder__external-info,
.shop-product-item .product-card-placeholder:not(.premium-product-card-container).rtl .product-card-placeholder__external-name,
.shop-product-item .product-card-placeholder:not(.premium-product-card-container).rtl .product-card-placeholder__external-price {
  text-align: center;
}
/* ===================================
   Category Display - Promotional Style
====================================== */

.category-promotional-luxe {
  position: relative;
  padding: 0;
  margin: 0;
  align-self: center !important;
  overflow: hidden;
  min-height: 100vh;
  
}

/* === Container Layout === */
.category-promotional-container {
  width: 95%;
  max-width: none;
  margin: 0 auto; /* center container horizontally */
  padding: 0;
  display: flex;
  justify-content: center;
  justify-self: center;
  position: relative;
  padding: 3rem 0;
}

/* === Main Layout === */
.category-promotional-layout {
  position: relative;
  width: 95%;
  height: 100vh;
  display: flex;
  align-items: stretch;
  z-index: 1;
  border-radius: 3px;
  align-self: center;
  justify-self: center;
  margin: 0 auto; /* ensure layout is centered with 95% width */
}

/* === Left Image Section === */
.category-promotional-image-section {
  flex: 0 0 45%;
  position: relative;
  height: 100%;
  z-index: 1; /* keep below content section */
}

.category-promotional-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* === Collection Name Header at Top Left === */
.category-promotional-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;

  z-index: 10;
}

.category-promotional-badge::before,
.category-promotional-badge::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: all 0.4s ease;
}
.category-promotional-badge::before { top: -2px; }
.category-promotional-badge::after { bottom: -2px; }

.category-promotional-badge span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold-dark);
  font-style: italic;
  letter-spacing: 0.05em;
  position: relative;
}

/* === Right Content Section === */
.category-promotional-content-section {
  flex: 0 0 55%;
  position: relative;
  height: 100%;
  background: rgba(var(--kelp-100-rgb), 0.5);
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 3rem;
  overflow: visible; /* ensure overlays like nav are visible */
  z-index: 2; /* elevate above image section */
}

.category-promotional-content-wrapper {
  width: 100%;
  max-width: 490px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
}

.category-promotional-content-header {
  text-align: center;
  margin-bottom: 1rem;
}

.category-promotional-content-title {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--kelp-600);
  margin: 0 0 1rem 0;
  font-family: var(--font-primary);
  letter-spacing: 0.01em;
  font-style: italic;
  position: relative; /* anchor luxury lines */
}

/* Luxury header pseudo lines placed far from the text */
/* Vertical luxury lines above/below the header */
.category-promotional-content-title::before,
.category-promotional-content-title::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  opacity: 0.9;
  pointer-events: none;
}

.category-promotional-content-title::before {
  top: -38px; /* place above title */
}

.category-promotional-content-title::after {
  bottom: -38px; /* place below title */
}

.category-promotional-content-divider {
  display: none; /* Remove horizontal bottom line */
}

.category-promotional-products-grid {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 20px;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* ensure nav absolute positioning is relative to grid */
  z-index: 5;
  gap: 1rem;
}

/* View button container - positioned at bottom of products grid */
.category-promotional-view-button-container {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Horizontal scroll flow like showcase */
.category-promotional-products {
  display: flex;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6vw; /* allow side peeking */
}

.category-promotional-products::-webkit-scrollbar { display: none; }

.category-promotional-product-container {
  flex: 0 0 340px; /* slightly wider */
  min-width: 340px;
  max-width: 340px;
  scroll-snap-align: center; /* allow next edge to peek */
}

.category-promotional-card-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: auto;
  position: relative; /* anchor absolute-positioned children */
  z-index: 10;
  min-height: 120px; /* ensure enough space for indicators */
}

/* === Image Styling === */
.category-promotional-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.category-promotional-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.category-promotional-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

/* === Indicators - Bottom Right of Card Container === */
.category-promotional-indicators {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.75rem;
  z-index: 10;
  background-color: rgba(var(--kelp-50-rgb), 0.2);
  border-radius: 3px;
  padding: 1px 4px;
  width: 60px;
  justify-content: center;
}

/* Mobile gallery dot style */
.category-promotional-indicator {
  width: 3px;
  height: 3px;
  border-radius: 1.5px;
  background: rgba(var(--kelp-400-rgb), 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.4s ease;
  margin: 1.5px;
}

/* Active state - matches mobile gallery */
.category-promotional-indicator.active {
  width: 14px;
  background: var(--kelp-700);
  box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.5);
}

/* Navigation - positioned at left/right edges of product cards */
.category-promotional-navigation-wrapper {
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 15;
  padding: 0 2rem; /* Add space from container edges */
  pointer-events: none; /* Allow clicks to pass through container */
}

/* Navigation styling - override LuxuryNavigation internal layout */
.category-promotional-navigation-wrapper .luxury-navigation {
  position: relative;
  width: 100%;
  padding: 0;
  transform: none;
  top: auto;
  left: auto;
  right: auto;
  gap: 0;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  pointer-events: auto; /* Re-enable clicks on navigation */
}

/* Override navigation colors to match sections */
.category-promotional-navigation-wrapper .luxury-nav-button {
  background: rgba(var(--kelp-50-rgb), 0.5) !important;
 
  opacity: 0 ;
  transition: opacity 0.3s ease;
}
.category-promotional-navigation-wrapper .luxury-nav-button:disabled {
  opacity: 0 !important;
}
.category-promotional-navigation-wrapper .luxury-nav-button:not(:disabled) {
  opacity: 1;
}

.category-promotional-navigation-wrapper .luxury-nav-button:hover:not(:disabled) {
  background: rgba(var(--kelp-100-rgb), 0.95) !important;
 
}

.category-promotional-navigation-wrapper .luxury-nav-line,
.category-promotional-navigation-wrapper .luxury-nav-arrow {
  background: rgba(var(--kelp-800-rgb), 0.9) !important;
}

.category-promotional-navigation-wrapper .luxury-nav-button:hover .luxury-nav-line,
.category-promotional-navigation-wrapper .luxury-nav-button:hover .luxury-nav-arrow {
  background: rgba(var(--kelp-900-rgb), 1) !important;
}

/* === View Button === */
.category-promotional-view-button {
  position: relative;
  background: none;
  color: var(--kelp-800);
  padding: 5px 65px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Button: Spaced dual lines (luxury) */
.category-promotional-view-button {
  position: relative;
}

.category-promotional-view-button::before,
.category-promotional-view-button::after {
  content: '';
  width: 80%;
  align-self: center;
  justify-self: center;
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-200), transparent);
  transition: all 0.4s ease;
}

.category-promotional-view-button::before {
  top: -2px;
  display: none;
}

.category-promotional-view-button::after {
  bottom: -2px;
}

.category-promotional-view-button:hover::before {
  top: -10px;
}

.category-promotional-view-button:hover::after {
  bottom: -10px;
}

/* Navigation positioned at right center of cards */
.category-promotional-nav {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30; /* above cards */
  pointer-events: auto;
}

/* Reposition indicators to bottom-right and simplify appearance */
.category-promotional-indicators {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* === Product Placeholder Styles === */
/* Category Product Placeholder - Mirrors PremiumProductCard Layout */
.category-promotional-product-placeholder .product-card-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 70px;
  cursor: pointer;
}

/* Card Element - matches premium-product-card exactly */
.category-promotional-product-placeholder .product-card-placeholder__card {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 460px !important; /* match main product card */
  background-color: rgba(var(--kelp-100-rgb), 0.5);
  overflow: hidden !important;
  z-index: 1;
  border-radius: 3px;
}

/* Image Container - matches premium-product-card__image-container exactly */
.category-promotional-product-placeholder .product-card-placeholder__image-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  min-height: 420px; /* match main product image area */
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
}

/* Center logo inside */
.category-promotional-product-placeholder .product-card-placeholder__image-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Shimmer effect */
.category-promotional-product-placeholder .product-card-placeholder__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--kelp-50-rgb), 0.15) 50%,
    transparent 100%
  );
  z-index: 0;
  animation: shimmer 2s infinite ease-in-out;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* External Info - matches premium-product-card__external-info exactly */
.category-promotional-product-placeholder .product-card-placeholder__external-info {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 7;
  pointer-events: none;
}

/* External Name - matches premium-product-card__external-name exactly */
.category-promotional-product-placeholder .product-card-placeholder__external-name {
  display: block;
  font-size: 0.95rem;
  font-weight: var(--font-weight-regular);
  color: rgba(var(--kelp-800-rgb), 0.7);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  z-index: 6;
  padding-top: 18px;
  height: 14px;
  width: 75%;
  max-width: 160px;
  margin: 0 auto 3px;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-300-rgb), 0.5),
    rgba(var(--kelp-400-rgb), 0.3),
    rgba(var(--kelp-300-rgb), 0.5)
  );
  border-radius: 4px;
}

/* External Name Line - matches premium-product-card__external-name-line */
.category-promotional-product-placeholder .product-card-placeholder__external-name-line {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-500-rgb), 0.6),
    rgba(var(--kelp-500-rgb), 0.25)
  );
}

/* External Price - matches premium-product-card__external-price exactly */
.category-promotional-product-placeholder .product-card-placeholder__external-price {
  height: 12px;
  width: 60%;
  max-width: 120px;
  margin: 0 auto;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-300-rgb), 0.4),
    rgba(var(--kelp-400-rgb), 0.2),
    rgba(var(--kelp-300-rgb), 0.4)
  );
  border-radius: 3px;
}

/* === Smooth Entry Animations === */
/* Remove CSS keyframe animations to avoid flashing; motion is handled by Framer Motion */

/* === Responsive Design === */
@media (max-width: 1200px) {
  .category-promotional-grid-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
  }
  

}

@media (max-width: 1024px) {
  .category-promotional-grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
  }

}

@media (max-width: 768px) {
  .category-promotional-container {
    width: 95%;
    margin: 0 auto; /* center at mobile */
    padding: 2rem 0;
  }

  .category-promotional-layout {
    width: 95%;
    margin: 0 auto; /* ensure centered */
    flex-direction: column;
    height: auto;
  }
  
  .category-promotional-image-section {
    flex: 0 0 60vh;
  }
  
  .category-promotional-content-section {
    flex: 0 0 auto;
    padding: 6rem 1.5rem;
  }
  
  .category-promotional-content-wrapper {
    max-width: 100%;
  }
  
  .category-promotional-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  
  .category-promotional-product-container {
    max-width: 280px;
  }

  .category-promotional-badge {
    top: 1.5rem;
    left: 1.5rem;
    padding: 0.6rem 1rem;
  }

  .category-promotional-badge::before {
    left: -15px;
    width: 12px;
  }
  .category-promotional-products-grid{
    padding: 3rem 0.5rem;
  }
}

@media (max-width: 480px) {

  
  .category-promotional-content-title {
    font-size: 1rem;
  }
  
  .category-promotional-grid-container {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .category-promotional-product-container {
    flex: 0 0 200px !important;
    min-width:200px !important;
    max-width: 200px !important;
  }

  .category-promotional-badge {
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 0.8rem;
    gap: 0.6rem;
  }

  .category-promotional-badge span {
    font-size: 0.75rem;
  }

  .category-promotional-badge::before {
    left: -12px;
    width: 10px;
  }
}/* CategorySkeleton - Exact match with CategoryDisplay.css */

.category-skeleton {
  position: relative;
  padding: 0;
  margin: 0;
  align-self: center !important;
  overflow: hidden;
  min-height: 100vh;
}

/* === Container Layout - Exact match with CategoryDisplay === */
.category-skeleton-container {
  width: 95%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  justify-self: center;
  position: relative;
  padding: 3rem 0;
}

/* === Main Layout - Exact match with category-promotional-layout === */
.category-skeleton-layout {
  position: relative;
  width: 95%;
  height: 90vh;
  display: flex;
  align-items: stretch;
  z-index: 1;
  border-radius: 3px;
  align-self: center;
  justify-self: center;
  margin: 0 auto;
}

/* === Left Image Section - Exact match with category-promotional-image-section === */
.category-skeleton-image-section {
  flex: 0 0 45%;
  position: relative;
  height: 100%;
  z-index: 1;
}

.category-skeleton-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* === Badge at Top Left - Exact match with category-promotional-badge === */
.category-skeleton-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  z-index: 10;
}

.category-skeleton-badge::before,
.category-skeleton-badge::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: all 0.4s ease;
}
.category-skeleton-badge::before { top: -2px; }
.category-skeleton-badge::after { bottom: -2px; }

.category-skeleton-badge span {
  height: 0.85rem;
  width: 60px;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  animation: minimal-shimmer 2.5s ease-in-out infinite;
  border-radius: 2px;
  position: relative;
}

/* === Main Image Area === */
.category-skeleton-image-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-skeleton-image-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  animation: minimal-shimmer 2.5s ease-in-out infinite;
}

.category-skeleton-image-area svg {
  position: relative;
  z-index: 2;
  opacity: 0.4;
}

/* === Right Content Section - Exact match with category-promotional-content-section === */
.category-skeleton-content-section {
  flex: 0 0 55%;
  position: relative;
  height: 100%;
  background: rgba(var(--kelp-100-rgb), 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 3rem;
  overflow: visible;
  z-index: 2;
}

.category-skeleton-content-wrapper {
  width: 100%;
  max-width: 490px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* === Header - Exact match with category-promotional-content-header === */
.category-skeleton-content-header {
  text-align: center;
  margin-bottom: 1rem;
}

.category-skeleton-content-title {
  height: 1.2rem;
  width: 120px;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  animation: minimal-shimmer 2.5s ease-in-out infinite;
  border-radius: 2px;
  margin: 0 auto;
  position: relative;
}

.category-skeleton-content-title::before,
.category-skeleton-content-title::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  opacity: 0.9;
  pointer-events: none;
}

.category-skeleton-content-title::before {
  top: -38px;
}

.category-skeleton-content-title::after {
  bottom: -38px;
}

/* === Products Grid - Exact match with category-promotional-products-grid === */
.category-skeleton-products-grid {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 20px;
  background: rgba(var(--kelp-50-rgb), 0.5);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
  gap: 1rem;
}

/* === Products Container - Exact match with category-promotional-products === */
.category-skeleton-products {
  display: flex;
  gap: 2rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 6vw;
}

.category-skeleton-products::-webkit-scrollbar { 
  display: none; 
}

/* === Product Container - Exact match with category-promotional-product-container === */
.category-skeleton-product-container {
  flex: 0 0 340px;
  min-width: 340px;
  max-width: 340px;
  scroll-snap-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 70px;
  cursor: pointer;
}

/* === Product Card - Exact match with PremiumProductCard === */
.category-skeleton-product-card {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 460px !important;
  background-color: rgba(var(--kelp-100-rgb), 0.2);
  overflow: hidden !important;
  z-index: 1;
  border-radius: 3px;
}

/* === Product Image Container - Exact match with PremiumProductCard === */
.category-skeleton-product-image-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  min-height: 420px;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
}

.category-skeleton-product-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-skeleton-product-image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  animation: minimal-shimmer 2.5s ease-in-out infinite;
  border-radius: 4px;
}

.category-skeleton-product-image-wrapper svg {
  position: relative;
  z-index: 2;
  opacity: 0.4;
}

/* === External Info - Exact match with PremiumProductCard === */
.category-skeleton-product-external-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 0.5rem;
  background: transparent;
  z-index: 2;
}

.category-skeleton-product-external-name {
  height: 1.2rem;
  width: 75%;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  animation: minimal-shimmer 2.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.category-skeleton-product-external-price {
  height: 1rem;
  width: 50%;
  background: linear-gradient(90deg, 
    rgba(var(--kelp-200-rgb), 0.2) 25%, 
    rgba(var(--kelp-100-rgb), 0.35) 50%, 
    rgba(var(--kelp-200-rgb), 0.2) 75%
  );
  background-size: 200% 100%;
  animation: minimal-shimmer 2.5s ease-in-out infinite;
  border-radius: 4px;
}

/* === Navigation - Exact match with CategoryDisplay navigation === */
.category-skeleton-navigation {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  z-index: 10;
  pointer-events: none;
}

.category-skeleton-nav-button {
  width: 38px;
  height: 38px;
  position: relative;
  background-color: rgba(var(--kelp-50-rgb), 0.9);
  border: 1px solid rgba(var(--kelp-400-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  cursor: pointer;
  overflow: hidden;
  will-change: transform, opacity;
  clip-path: polygon(
    15% 0,
    85% 0,
    100% 15%,
    100% 85%,
    85% 100%,
    15% 100%,
    0 85%,
    0 15%
  );
  pointer-events: auto;
}

.category-skeleton-nav-line {
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(var(--kelp-800-rgb), 0.9);
  position: relative;
}

.category-skeleton-nav-arrow {
  content: '';
  position: absolute;
  width: 6px;
  height: 1px;
  background: rgba(var(--kelp-800-rgb), 0.9);
  top: 50%;
}

.category-skeleton-nav-button.prev .category-skeleton-nav-arrow {
  left: calc(50% - 6px);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: left center;
}

.category-skeleton-nav-button.prev .category-skeleton-nav-line {
  transform: translateX(3px);
}

.category-skeleton-nav-button.next .category-skeleton-nav-arrow {
  right: calc(50% - 6px);
  transform: translate(50%, -50%) rotate(45deg);
  transform-origin: right center;
}

.category-skeleton-nav-button.next .category-skeleton-nav-line {
  transform: translateX(-3px);
}

/* Minimal Shimmer Animation disabled */
/* @keyframes minimal-shimmer {
  0% {
    background-position: -200% 0;
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    background-position: 200% 0;
    opacity: 0.4;
  }
} */

/* === Mobile Responsive - Exact match with CategoryDisplay === */
@media (max-width: 768px) {
  .category-skeleton {
    padding: 4rem 0;
  }
  
  .category-skeleton-container {
    padding: 2rem 0;
  }
  
  .category-skeleton-layout {
    flex-direction: column;
    height: auto;
    min-height: 80vh;
  }
  
  .category-skeleton-image-section {
    flex: 0 0 40vh;
    min-height: 300px;
  }
  
  .category-skeleton-content-section {
    flex: 1;
    padding: 2rem 1rem;
  }
  
  .category-skeleton-content-wrapper {
    max-width: 100%;
    gap: 1.5rem;
  }
  
  .category-skeleton-products-grid {
    padding: 15px;
  }
  
  .category-skeleton-products {
    gap: 1.5rem;
    padding: 0 4vw;
  }
  
  .category-skeleton-product-container {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
  }
  
  .category-skeleton-product-card {
    min-height: 380px !important;
  }
  
  .category-skeleton-product-image-container,
  .category-skeleton-product-image-wrapper {
    min-height: 315px;
  }
}

@media (max-width: 480px) {
  .category-skeleton {
    padding: 3rem 0;
  }
  
  .category-skeleton-container {
    padding: 1rem 0;
  }
  
  .category-skeleton-layout {
    min-height: 70vh;
  }
  
  .category-skeleton-image-section {
    flex: 0 0 30vh;
    min-height: 250px;
  }
  
  .category-skeleton-content-section {
    padding: 1.5rem 0.5rem;
  }
  
  .category-skeleton-content-wrapper {
    gap: 1rem;
  }
  
  .category-skeleton-products-grid {
    padding: 10px;
  }
  
  .category-skeleton-products {
    gap: 1rem;
    padding: 0 2vw;
  }
  
  .category-skeleton-product-container {
    flex: 0 0 250px;
    min-width: 250px;
    max-width: 250px;
  }
  
  .category-skeleton-product-card {
    min-height: 320px !important;
  }
  
  .category-skeleton-product-image-container,
  .category-skeleton-product-image-wrapper {
    min-height: 250px;
  }
}/* =============================================
   BrandStory.css - Clean Luxury Card Layout
   ============================================= */

/* Section */
.bs-section {
  position: relative;
  padding: 8rem 0 6rem;
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-50-rgb), 0.95) 0%,
    rgba(var(--kelp-100-rgb), 0.85) 50%,
    rgba(var(--kelp-50-rgb), 0.95) 100%
  );
  overflow: visible;
  min-height: 85vh;
}

.bs-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(var(--gold-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(var(--kelp-900-rgb), 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.bs-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  position: relative;
  z-index: 1;
}

/* Header */
.bs-header {
  text-align: center;
  margin-bottom: 4rem;
}

.bs-title {
  font-size: 0.95rem;
  color: var(--kelp-900);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  text-transform: none;
  font-style: italic;
}

.bs-subtitle {
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--gold-dark);
  max-width: 500px;
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Cards Grid */
.bs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 4rem;
}

/* Card */
.bs-card {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  min-height: 520px;
  cursor: pointer;
  box-shadow: 
    0 10px 30px rgba(var(--kelp-900-rgb), 0.08),
    0 2px 8px rgba(var(--kelp-900-rgb), 0.04);
  background: rgba(var(--kelp-50-rgb), 0.5);
}

/* Card Image */
.bs-card-image-wrapper {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-100-rgb), 0.1) 0%,
    rgba(var(--kelp-200-rgb), 0.05) 100%
  );
}

.bs-card-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Logo Fallback */
.bs-logo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-50-rgb), 0.9) 0%,
    rgba(var(--kelp-100-rgb), 0.7) 100%
  );
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: 3px;
  gap: 1.5rem;
  padding: 3rem;
}

.bs-fallback-text {
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  color: rgba(var(--kelp-700-rgb), 0.8);
  text-align: center;
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Card Overlay */
.bs-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 30%,
    rgba(var(--kelp-900-rgb), 0.1) 60%,
    rgba(var(--kelp-900-rgb), 0.5) 85%,
    rgba(var(--kelp-900-rgb), 0.8) 100%
  );
  border-radius: 3px;
  pointer-events: none;
}

/* Accent Line - Luxury styling matching hero line */
.bs-accent-line {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold-dark) 20%,
    var(--gold) 50%,
    var(--gold-light) 80%,
    transparent 100%
  );
  margin-bottom: 1rem;
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
}

/* Card Title */
.bs-card-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  text-shadow: 
    0 2px 4px rgba(var(--kelp-900-rgb), 0.3),
    0 1px 2px rgba(var(--kelp-900-rgb), 0.2);
}

/* Card Description */
.bs-card-description {
  font-family: var(--font-secondary);
  font-weight: 300;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  text-shadow: 0 1px 2px rgba(var(--kelp-900-rgb), 0.2);
  max-width: 280px;
}

/* CTA Button */
.bs-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(var(--gold-rgb), 0.2) 0%,
    rgba(var(--gold-rgb), 0.1) 100%
  );
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(var(--kelp-900-rgb), 0.2);
  pointer-events: auto;
}

.bs-cta-text {
  position: relative;
}

.bs-cta-arrow {
  font-size: 1rem;
}

/* RTL Support */
.bs-rtl .bs-grid {
  direction: rtl;
}

.bs-rtl .bs-card-overlay {
  align-items: flex-start;
}



@media (max-width: 768px) {
  .bs-section {
    padding: 6rem 0;
    min-height: auto;
  }
  
  .bs-container {
    padding: 0 ;
  }
  
  .bs-header {
    margin-bottom: 3rem;
  }
  
  .bs-title {
    font-size: 0.90;
  }
  
  .bs-subtitle {
    font-size: 0.7rem;
  }
  
 
  
  .bs-card {
    min-height: 400px;
  }
  
  .bs-card-image-wrapper {
    height: 400px;
  }
  
  .bs-card-overlay {
    padding: 1.5rem;
  }
  
  .bs-card-title {
    font-size: 1.25rem;
  }
  
  .bs-card-description {
    font-size: 0.85rem;
    max-width: none;
  }
  
  .bs-card-cta {
    padding: 6px 18px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
 
  
 
  

  

  
  .bs-card {
    min-height: 350px;
  }
  
  .bs-card-image-wrapper {
    height: 350px;
  }
  
  .bs-card-overlay {
    padding: 1rem;
  }
  
  .bs-card-title {
    font-size: 1.1rem;
  }
  
  .bs-card-description {
    font-size: 0.8rem;
  }
  

}

/* Horizontal Scroll for Small Screens */
@media (max-width: 640px) {
  .bs-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 3.5rem;
    gap: 1.5rem;
  }
  
  .bs-grid::-webkit-scrollbar {
    display: none;
  }
  
  .bs-card {
    flex: 0 0 75%;
    min-width: 75%;
    max-width: 75%;
    scroll-snap-align: center;
  }
}
/* BrandStory Card Placeholder - Minimal design matching ProductCardPlaceholder */

.brand-story-card-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
}

/* Image Container - matches .bs-card-image-wrapper */
.brand-story-placeholder__image-wrapper {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 3px;
  overflow: hidden;
  background-color: rgba(var(--kelp-100-rgb), 0.5);
}

/* Center logo inside */
.brand-story-placeholder__image-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .brand-story-card-placeholder {
    min-height: 380px;
  }
  
  .brand-story-placeholder__image-wrapper {
    height: 380px;
  }
}

@media (max-width: 480px) {
  .brand-story-card-placeholder {
    min-height: 300px;
  }
  
  .brand-story-placeholder__image-wrapper {
    height: 300px;
  }
}
/* Minimal Luxury TrendingProducts Section - Matching Features Section */
.trending-products-section {
  position: relative;
  padding: 40px 0 60px; /* Reduced padding to match Features section */
  width: 100%;
  overflow: hidden;
}

.trending-container {
  width: 90%;
  max-width: var(--container-xl);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px; /* Reduced gap */
  padding: 2rem 0 6rem;
}

/* Refined luxury tabbed interface - redesigned to match header nav */
.trending-tabs-container {
  position: relative;
  margin-bottom: 20px;
  padding: 0; /* Slightly reduced vertical padding */
  width: 100%;
  max-width: 380px; /* Slightly reduced max-width */
  border-radius: 3px;
  background: rgba(var(--kelp-100-rgb), 0.2) !important;
  /* Transition removed for performance */
}

.trending-tabs-container:hover {
  background: rgba(var(--kelp-50-rgb), 0.4);
  border-color: rgba(var(--kelp-300-rgb), 0.3);
}

.trending-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  border-radius: 3px;
  padding: 4px 8px; /* Reduced padding */
  gap: 5px;
}

/* Placeholder tab blocks: match tab dimensions and spacing */
.trending-tab-placeholder {
  flex: 1;
  padding: 10px 8px; /* match .trending-tab padding */
  border-radius: 3px;
  background: rgba(var(--kelp-100-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.trending-tab-text-placeholder {
  width: 70px;
  height: 14px; /* approximate text height */
  border-radius: 3px;

}

/* Enhanced tab styling with smooth transitions */
.trending-tab {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 8px;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: var(--kelp-600);
  letter-spacing: 0.4px;
  overflow: hidden;
  text-align: center;
  font-weight: var(--font-weight-regular);
  flex: 1;
  white-space: nowrap;
  /* Transition removed for performance */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: 3px;
}

.trending-tab:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Smooth hover effects */
.trending-tab:hover:not(.active):not(:disabled) {
  color: var(--kelp-800);
  background: rgba(var(--kelp-100-rgb), 0.4);
  transform: translateY(-1px);
}

/* Active state with smooth transitions */
.trending-tab.active {
  color: var(--kelp-900);
  background: rgba(var(--kelp-50-rgb), 0.8);
}

/* Smooth tab indicator */
.tab-indicator {
  position: absolute;
  bottom: 2px;
  left: 6px;
  right: 6px;
  top: 2px;
  height: auto;
  background: rgba(var(--kelp-50-rgb), 0.5);
  z-index: -1;
  border-radius: 3px;
  opacity: 0;
  transform: scale(0.8);
  /* Transition removed for performance */
}

/* Active tab indicator shows smoothly */
.trending-tab.active .tab-indicator {
  opacity: 1;
  transform: scale(1);
}

/* Enhance active tab text */
.trending-tab.active .trending-tab-text {
  font-weight: var(--font-weight-medium); /* Use CSS variable for consistency */
}

.trending-tab-text {
  position: relative;
  text-transform: none;
  font-weight: var(--font-weight-regular);
  z-index: 3;
  /* Ensure proper text rendering for all languages */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent text overflow and ensure proper alignment */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Character styling for tabs */
.trending-tab .char {
  display: inline-block;
}

/* Grid wrapper */
.trending-grid-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 4rem; /* Space for controls */
}

/* Product grid with horizontal scroll for all devices */
.trending-products {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
  min-height: auto;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 ;
}

.trending-products::-webkit-scrollbar {
  display: none;
}

/* Restores horizontal layout when inner content is animated as a single child */
.trending-grid-content {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: stretch;
  position: relative;
}

.trending-product-item {
  flex: 0 0 320px;
  scroll-snap-align: start;
  min-width: 320px;
  max-width: 320px;
  width: 320px;
  white-space: normal;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* RTL Support */
.trending-products[dir="rtl"] {
  direction: rtl;
}

.trending-products[dir="rtl"] .trending-product-item {
  direction: ltr; /* Keep product cards in LTR for proper image display */
}



/* Shop product item matching */
.trending-product-item > * {
  width: 100%;
  height: 100%;
}

.trending-product-item {
  min-height: 420px;
  opacity: 1;
}

.trending-product-item:hover {
  transform: none; /* Disable hover lift for desktop external container */
}

/* Indicators removed - using navigation only */

/* Bottom controls container */
.trending-bottom-controls {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  gap: 2rem; /* Add gap between nav and view all */
}

/* Navigation - left side */
.trending-navigation-wrapper {
  position: relative;
  z-index: 10;
}

/* Navigation styling */
.trending-navigation-wrapper .luxury-navigation {
  position: relative;
  width: auto;
  padding: 0;
  transform: none;
  top: auto;
  left: auto;
  right: auto;
  gap: 5px;
}

/* Override navigation colors to match sections */
.trending-navigation-wrapper .luxury-nav-button {
  background: rgba(var(--kelp-50-rgb), 0.9) 
}

.trending-navigation-wrapper .luxury-nav-button:hover:not(:disabled) {
  background: rgba(var(--kelp-100-rgb), 0.95) !important;
 
}

.trending-navigation-wrapper .luxury-nav-line,
.trending-navigation-wrapper .luxury-nav-arrow {
  background: rgba(var(--kelp-800-rgb), 0.9) !important;
}

.trending-navigation-wrapper .luxury-nav-button:hover .luxury-nav-line,
.trending-navigation-wrapper .luxury-nav-button:hover .luxury-nav-arrow {
  background: rgba(var(--kelp-900-rgb), 1) !important;
}

/* Indicators removed - using navigation only */

/* Refined loading styling */
.trending-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: var(--kelp-600);
}

.trending-loading-line {
  height: 1px;
  width: 200px;
  max-width: 200px;
  margin-bottom: 15px;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold-light),
    var(--gold),
    var(--gold-light),
    transparent
  );
}

.trending-loading p {
  font-size: 0.85rem;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--kelp-600);
  font-weight: var(--font-weight-light);
  text-transform: uppercase;
}

/* Trending view all - matching BrandPromises text style */
.trending-view-all {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  margin-left: auto; /* Push to right when no navigation */
}

/* When no navigation, center the view all button */
.trending-bottom-controls.no-navigation {
  justify-content: flex-end;
}

.trending-bottom-controls.no-navigation .trending-view-all {
  margin-left: 0;
}

.trending-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  position: relative;
  /* Transition removed for performance */
}

.trending-view-all-link::before {
  content: '';
  width: 1px;
  height: 20px;
  background-color: var(--kelp-400);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.trending-view-text {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 300;
  color: var(--kelp-500);
  text-transform: none;
  letter-spacing: 0.02em;
  /* Transition removed for performance */
}

.trending-view-all-link:hover::before {
  background-color: var(--kelp-600);
  opacity: 0.8;
}

.trending-view-all-link:hover .trending-view-text {
  color: var(--kelp-800);
}

/* Simple placeholder styling matching ProductShowcase */
.trending-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  background: rgba(var(--kelp-100-rgb), 0.3);
  border-radius: 8px;
  color: var(--kelp-600);
}

/* Support shop ProductCardPlaceholder inside trending items */
.trending-product-item .shop-product-item {
  width: 100%;
  height: 100%;
}

.trending-product-item .shop-product-item .product-card-placeholder {
  width: 100%;
  height: 100%;
}

/* Responsive styles matching shop grid */
@media (max-width: 1200px) {
 
  
  .trending-product-item {
    flex: 0 0 270px;
    min-width: 270px;
    max-width: 270px;
  }
}

@media (min-width: 1201px) {
  /* Ensure desktop shows scrollable content */
  .trending-product-item {
    flex: 0 0 320px;
    min-width: 320px;
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .trending-view-text{
    font-size: 12px;
  }
  
  .trending-product-item {
    min-height: 380px;
  }
  
 
  

  
  .trending-bottom-controls {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    justify-content: space-between;
    gap: 1.5rem; /* Reduce gap on mobile */
    padding: 0 1.5rem; /* Add horizontal padding on mobile */
    width: 100%;
    height: 44px;
  }
  
  .trending-navigation-wrapper {
    position: relative;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .trending-products {
    display: flex;
    gap: 5px;
    padding: 0 ;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 0.5rem;
  }
  
  .trending-products::-webkit-scrollbar {
    display: none;
  }
  
  .trending-product-item {
    flex: 0 0 calc(50% - 0.5rem);
    scroll-snap-align: start;
    min-width: calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    min-height: 340px;
  }
  
  /* RTL adjustments for mobile */
  .trending-products[dir="rtl"] {
    padding: 0 1rem 0 1rem;
  }


  
  
  
  .view-all-link {
    font-size: 10px;
  }
}

@media (max-width: 400px) {
}

/* Touch device optimization */
@media (hover: none) {
  .view-all-link:active {
    transform: scale(0.98);
  }
}

/* Language-specific font handling for luxury appearance */
/* Persian/Farsi language improvements - smaller and more luxurious */
[lang="fa"] .trending-tab,
[lang="fa"] .trending-tab-text {
  font-family: 'Vazir', 'Noto Naskh Arabic', 'Amiri', serif;
  font-size: 0.7rem; /* Smaller for luxury appearance */
  font-weight: 300; /* Lighter weight for elegance */
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Arabic language styling */
[lang="ar"] .trending-tab,
[lang="ar"] .trending-tab-text {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Chinese language styling */
[lang="zh"] .trending-tab,
[lang="zh"] .trending-tab-text {
  font-family: 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Japanese language styling */
[lang="ja"] .trending-tab,
[lang="ja"] .trending-tab-text {
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* French language styling */
[lang="fr"] .trending-tab,
[lang="fr"] .trending-tab-text {
  font-family: var(--font-primary);
  font-size: 0.7rem; /* Slightly smaller for French */
  font-weight: 300; /* Lighter weight for elegance */
  letter-spacing: 0.03em;
}

/* Spanish language styling */
[lang="es"] .trending-tab,
[lang="es"] .trending-tab-text {
  font-family: var(--font-primary);
  font-size: 0.7rem; /* Slightly smaller for Spanish */
  font-weight: 300; /* Lighter weight for elegance */
  letter-spacing: 0.03em;
}

/* German language styling */
[lang="de"] .trending-tab,
[lang="de"] .trending-tab-text {
  font-family: var(--font-primary);
  font-size: 0.7rem; /* Slightly smaller for German */
  font-weight: 300; /* Lighter weight for elegance */
  letter-spacing: 0.02em;
}

/* Italian language styling */
[lang="it"] .trending-tab,
[lang="it"] .trending-tab-text {
  font-family: var(--font-primary);
  font-size: 0.7rem; /* Slightly smaller for Italian */
  font-weight: 300; /* Lighter weight for elegance */
  letter-spacing: 0.03em;
}

/* Container alignment fixes for different languages */
/* Ensure tabs container adapts to text size */
.trending-tabs-container {
  min-width: 320px; /* Minimum width to prevent squishing */
  max-width: 420px; /* Increased max-width for longer text */
}

/* Responsive adjustments for language-specific text sizes */
@media (max-width: 640px) {
  [lang="fa"] .trending-tab,
  [lang="fa"] .trending-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  [lang="ar"] .trending-tab,
  [lang="ar"] .trending-tab-text {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
  
  [lang="zh"] .trending-tab,
  [lang="zh"] .trending-tab-text {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
  
  [lang="ja"] .trending-tab,
  [lang="ja"] .trending-tab-text {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
  
  [lang="fr"] .trending-tab,
  [lang="fr"] .trending-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  [lang="es"] .trending-tab,
  [lang="es"] .trending-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  [lang="de"] .trending-tab,
  [lang="de"] .trending-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  [lang="it"] .trending-tab,
  [lang="it"] .trending-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  .trending-tabs-container {
    min-width: 260px;
    max-width: 380px;
  }
}

/* Optimize for reduced motion - ensure no transform/opacity change */
@media (prefers-reduced-motion: reduce) {
  .trending-product-item,
  .tab-indicator,
  .trending-tab {
    transition: none !important;
    animation: none !important;
  }

  .trending-product-item {
    /* Apply final state directly */
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important; /* Remove any potential delay */
  }
}

/* Product placeholder styling that matches exact card dimensions */
.premium-product-card__title-placeholder {
  height: 16px;
  width: 80%;
  background: linear-gradient(to right, var(--kelp-100), var(--kelp-200));
  margin-bottom: 10px;
  border-radius: 2px;
  opacity: 0.5;
}

.premium-product-card__price-placeholder {
  height: 14px;
  width: 40%;
  background: linear-gradient(to right, var(--kelp-100), var(--kelp-200));
  border-radius: 2px;
  opacity: 0.5;
}

/* Add to your TrendingProducts.css file */
.trending-heading-area {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trending-heading {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-3xl);
  color: var(--kelp-900);
  letter-spacing: 0.07em;
  margin-bottom: 0.7rem;
  text-transform: none;
  position: relative;
  padding-top: 30px; /* Make space for vertical line */
}

.trending-heading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 20px;
  background-color: var(--gold);
  opacity: 0;
  /* Animation removed for performance - handled by framer-motion */
}

/* Keyframes removed for performance - handled by framer-motion */

/* Remove any existing heading decorations */
.trending-heading-area::before,
.trending-heading-area::after {
  display: none !important;
}

.view-all-link span {
  position: relative;
  background-image: linear-gradient(
    to right,
    var(--kelp-600),
    var(--kelp-700) 30%,
    rgba(var(--gold-rgb), 0.8) 50%,
    var(--kelp-700) 70%,
    var(--kelp-600)
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@keyframes textShimmer {
  to { background-position: 200% center; }
}




@media (max-width: 480px) {
  .trending-product-item {
    min-height: 320px;
  }
  
 
}

@media (max-width: 400px) {
  .trending-product-item {
    min-height: 300px;
  }
  

}* Global voice controls above input */
.voice-mode-controls-global {
  position: absolute;
  right: 30px;
  bottom: 100px; /* sits above input container */
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2003;
  justify-content: space-between;
  width: 500px;
  overflow: visible;
}
.voice-mode-controls-global .voice-close-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kelp-950);
  color: var(--gold-dark);

  display: flex;
  justify-content: center;
  align-items: center;
}
/* =================== SMART CHAT - CLEAN CSS STRUCTURE =================== */

/* =================== FOUNDATION & CORE LAYOUT =================== */
.LE-smart-chat {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1400;
  /* Removed isolation: isolate that creates global stacking context */
  font-family: var(--font-primary);
}

.LE-smart-chat.rtl {
  right: auto;
  left: 24px;
}

/* =================== CHAT SYSTEM STRUCTURE - ENHANCED FROM HTML =================== */
.LE-smart-chat-container.chat-system {
  position: fixed;
  bottom: 120px;
  right: 24px;
  width: 500px;
  max-width: 90vw;
  max-height: none; /* Allow dynamic height based on content */
  height: auto; /* enable framer-motion height animation */
  transform-origin: center;
  /* Hide background by default - only show when conversation starts */
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: none;
  border-radius: 18px;
  overflow: visible;
 
}

/* Show background when conversation has started */
.LE-smart-chat-container.chat-system.conversation-started {
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-100-rgb), 0.92) 0%,
    rgba(var(--kelp-50-rgb), 0.86) 100%);
  color: white;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.1);
  min-height: 20vh;
}

/* When chat container not started, keep visually hidden */
.LE-smart-chat-container.chat-system:not(.conversation-started):not(.voice-mode-active) {
  opacity: 0 !important;
  pointer-events: none;
}

/* Allow greeting state to be visible before conversation starts */
.LE-smart-chat-container.chat-system.with-greeting:not(.conversation-started) {
  opacity: 1 !important;
}

/* Ensure chat container stays visible during voice mode */
.LE-smart-chat-container.voice-mode-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-100-rgb), 0.92) 0%,
    rgba(var(--kelp-50-rgb), 0.86) 100%) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.1) !important;
}

.LE-smart-chat-container.chat-system.with-greeting {
  width: 500px;
  max-height: none; /* Allow dynamic height based on content */
  /* NO HEIGHT - auto-size based on content like HTML */
  transform: translateY(-30px);
}

.LE-smart-chat-container.expanded {
  width: 500px;
  max-width: 500px;
  height: 60vh;
  transform: translateY(-5vh);
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  min-height: 0; /* critical for child scroll containers */

}

.LE-smart-chat-container.chat-system:not(.expanded) {
  height: auto;
  max-height: 500px;
  transform: translateY(0);
}

.LE-smart-chat-container.call-active {
  background: rgba(240, 147, 251, 0.08);
  border: 1px solid rgba(240, 147, 251, 0.15);
  box-shadow: 0 0 30px rgba(240, 147, 251, 0.1);
}


/* Moving glow shadow when agent is typing - using box-shadow approach */
.smart-chat-input-container.conversation-active {
  /* Only animate when agent is streaming/active */
  animation: none;
}

/* Elegant gradient glow when AI is streaming - controlled by Framer Motion */
.smart-chat-input-container.conversation-active.streaming {
  /* Shadow controlled by Framer Motion - starts transparent */
  box-shadow: 0 0 0px rgba(240, 147, 251, 0);
  will-change: box-shadow, filter;
  z-index: 0;
  overflow: visible;
  /* Clean gradient-only appearance */
  animation: none;
}

/* Disable shadow/animation while in voice mode or when chat is closed */
.LE-smart-chat-container.voice-mode-active .smart-chat-input-container,
.LE-smart-chat-container:not(.expanded) .smart-chat-input-container {
  animation: none !important;
  box-shadow: none !important;
}

/* Remove internal glow effects - rely only on external box shadow */
.smart-chat-input-container.conversation-active.streaming::before {
  display: none; /* disable internal glow effect */
}

.smart-chat-input-container.conversation-active.streaming::after {
  display: none; /* disable internal sweep effect */
}

/* sereneGlow keyframes removed - now handled by Framer Motion for smooth edge-to-inward animation */
/* Hide small-mode tool indicator inside chat container */
.LE-smart-chat-container .small-mode-tool-indicator { display: none; }

/* sweepGlow animation removed - no longer needed with external-only glow */

@media (prefers-reduced-motion: reduce) {
  .smart-chat-input-container.conversation-active.streaming { animation: none; }
}




@keyframes movingGlow {
  0%, 100% {
    box-shadow: 
      0 0 4px rgba(var(--gold-rgb), 0.3),
      0 0 8px rgba(var(--gold-rgb), 0.2),
      0 0 12px rgba(var(--gold-rgb), 0.1);
  }
  25% {
    box-shadow: 
      1px 1px 5px rgba(var(--kelp-300-rgb), 0.4),
      2px 2px 10px rgba(var(--kelp-300-rgb), 0.3),
      3px 3px 15px rgba(var(--kelp-300-rgb), 0.2);
  }
  50% {
    box-shadow: 
      -1px 1px 6px rgba(var(--kelp-400-rgb), 0.4),
      -2px 2px 12px rgba(var(--kelp-400-rgb), 0.3),
      -3px 3px 18px rgba(var(--kelp-400-rgb), 0.2);
  }
  75% {
    box-shadow: 
      1px -1px 5px rgba(var(--gold-rgb), 0.4),
      2px -2px 10px rgba(var(--gold-rgb), 0.3),
      3px -3px 15px rgba(var(--gold-rgb), 0.2);
  }
}

/* Luxury Streaming Glow Animation - Different colors and movement patterns */
@keyframes luxuryStreamingGlow {
  0%, 100% {
    box-shadow: 
      0 0 6px rgba(var(--gold-rgb), 0.5),
      0 0 12px rgba(var(--gold-rgb), 0.4),
      0 0 18px rgba(var(--gold-rgb), 0.3);
  }
  16.66% {
    box-shadow: 
      2px 2px 8px rgba(var(--kelp-200-rgb), 0.6),
      4px 4px 16px rgba(var(--kelp-200-rgb), 0.5),
      6px 6px 24px rgba(var(--kelp-200-rgb), 0.4);
  }
  33.33% {
    box-shadow: 
      -2px 2px 10px rgba(var(--kelp-100-rgb), 0.7),
      -4px 4px 20px rgba(var(--kelp-100-rgb), 0.6),
      -6px 6px 30px rgba(var(--kelp-100-rgb), 0.5);
  }
  50% {
    box-shadow: 
      2px -2px 8px rgba(var(--gold-rgb), 0.6),
      4px -4px 16px rgba(var(--gold-rgb), 0.5),
      6px -6px 24px rgba(var(--gold-rgb), 0.4);
  }
  66.66% {
    box-shadow: 
      -2px -2px 10px rgba(var(--kelp-300-rgb), 0.7),
      -4px -4px 20px rgba(var(--kelp-300-rgb), 0.6),
      -6px -6px 30px rgba(var(--kelp-300-rgb), 0.5);
  }
  83.33% {
    box-shadow: 
      1px 1px 9px rgba(var(--kelp-400-rgb), 0.6),
      2px 2px 18px rgba(var(--kelp-400-rgb), 0.5),
      3px 3px 27px rgba(var(--kelp-400-rgb), 0.4);
  }
}



/* Dynamic text color effects during streaming */
.ai-message-container.streaming .smart-chat-bubble {
  background: linear-gradient(135deg, 
    rgba(var(--kelp-700-rgb), 0.10) 0%, 
    rgba(var(--kelp-600-rgb), 0.12) 30%, 
    rgba(var(--kelp-500-rgb), 0.10) 60%, 
    rgba(var(--kelp-400-rgb), 0.12) 100%);
  animation: streamingTextGlow 2s ease-in-out infinite;
}

.ai-message-container.streaming .smart-chat-bubble .message-text {
  background: linear-gradient(45deg, 
    rgb(var(--kelp-800-rgb)) 0%, 
    rgb(var(--kelp-700-rgb)) 25%, 
    rgb(var(--kelp-600-rgb)) 50%, 
    rgb(var(--kelp-500-rgb)) 75%, 
    rgb(var(--kelp-400-rgb)) 100%);
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: streamingTextColors 3s ease-in-out infinite;
}

@keyframes streamingTextGlow {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(255, 215, 0, 0.2),
      inset 0 0 20px rgba(255, 215, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(255, 165, 0, 0.3),
      inset 0 0 30px rgba(255, 165, 0, 0.15);
  }
}

@keyframes streamingTextColors {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* =================== CONTROLS BAR - EXACT COPY FROM HTML =================== */
.controls-bar {
  position: absolute;
  top: -50px;
  right: 0;
  display: flex;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  z-index: 50;
}

.LE-smart-chat-container.with-greeting .controls-bar {
  opacity: 1;
  transform: translateY(0);
}

/* =================== SMART CHAT CONTROLS CONTAINER =================== */
.smart-chat-controls-container {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  align-items: center;
  z-index: 2000;
  opacity: 1;
  transform: translateY(0);
}

.control-button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--gold-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  position: relative;
  z-index: 2001;
  flex-shrink: 0;
}

.control-button.close-button {
  background: rgba(var(--kelp-50-rgb), 0.3);
  z-index: 2001;
}

.control-button.expand-button {
  opacity: 0;
  transform: translateY(-10px);
}

.LE-smart-chat-container.conversation-started .control-button.expand-button {
  opacity: 1;
  transform: translateY(0);
}

.control-button:hover {
  background: var(--kelp-700);
  border-color: var(--kelp-600);
  transform: translateY(-2px);
}

.control-button.close-button:hover {
  background: var(--kelp-800);
  transform: translateY(-2px) scale(1.05);
}

.control-button.active {
  background: var(--chat-gradient-1);
  border-color: rgba(102, 126, 234, 0.5);
}

.call-button.active {
  background: var(--chat-gradient-2);
  border-color: rgba(240, 147, 251, 0.5);
}

/* =================== GREETING AREA - UPDATED GRADIENT =================== */
.greeting-area {
  position: relative;
  text-align: center;
  padding: 18px 12px;
  background: rgba(var(--kelp-50-rgb), 0.8);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--kelp-100);
  border-radius: 18px;
  overflow: hidden;
  z-index: 10;
  display: block;
  box-sizing: border-box;
}

.greeting-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--kelp-100);
  background: linear-gradient(135deg, var(--gold-dark), var(--kelp-400), var(--kelp-600));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 190px;
}


/* =================== CONTENT AREA - EXACT COPY FROM HTML =================== */
.content-area {
  margin-bottom: 16px;
  opacity: 1;
  transform: translateY(0);
  min-height: 0;
  position: relative;
}

.content-area.visible {
  opacity: 1;
  transform: translateY(0);
}

.content-area.fading {
  opacity: 0;
  transform: translateY(-20px);
}

.content-area.small-mode {
  margin-bottom: 16px;

}

.content-area.expanded {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  max-height: none;
}

/* Only in expanded mode should content area have flex and scroll */
.LE-smart-chat-container.expanded .content-area {
  flex: 1;
  /* Let the inner messages list be the only scroll container in expanded mode */
  overflow: visible;
  padding-right: 8px;
  max-height: none;
  padding: 20px 0;
  touch-action: pan-y;
}

/* In expanded mode, make the messages list the scroll container with a stable max-height */
.LE-smart-chat-container.expanded .smart-chat-messages {
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

.LE-smart-chat-container.chat-system:not(.expanded) .content-area {
  flex: none;
  overflow-y: visible;
  padding-right: 0;
  max-height: none;
}

/* =================== SMART CHAT INPUT CONTAINER =================== */
.smart-chat-input-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 500px;
  max-width: 90vw;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-100-rgb), 0.98) 0%,
    rgba(var(--kelp-50-rgb), 0.86) 100%
  );
  color: white;
  border-radius: 20px;
  overflow: visible; /* allow box shadows to extend beyond container bounds */
  z-index: 1398;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  transition: box-shadow 400ms ease, background 400ms ease;
}

.smart-chat-input-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 100px;
}

/* Voice mode input wrapper */
.smart-chat-input-container.voice-mode .smart-chat-input-wrapper {
  min-height: 80px;
  padding: 12px;
}

.LE-smart-chat-container.expanded ~ .smart-chat-input-container {
  width: 500px;
}

.LE-smart-chat-container.with-greeting ~ .smart-chat-input-container {
  width: 500px;
}

/* Override input wrapper styles for dark theme */
.smart-chat-input-container .smart-chat-input-wrapper-integrated {
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  width: 100%;
  max-width: 460px;
  overflow: hidden; /* maintain internal clipping for input elements */
}

/* Absolute overlay for attach options so it doesn't push layout */
.smart-chat-input-container .smart-chat-attach-options {
  position: absolute;
  bottom: 56px;
  left: 0;
  z-index: 2100;
  pointer-events: auto;
}

.smart-chat-input-container .smart-chat-input-wrapper-integrated::after {
  background: transparent;
}

/* Attachment options dropdown - absolute, prevent layout shift */
.smart-chat-attach-options {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(var(--kelp-100-rgb), 0.92);
  border-radius: 12px;
  z-index: 2002;
  pointer-events: auto;
}

.smart-chat-attach-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--kelp-400);
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.smart-chat-attach-option:hover {
  background: rgba(var(--kelp-400-rgb), 0.12);
  color: var(--kelp-50);
}

.smart-chat-attach-option:active {
  transform: scale(0.98);
}

/* Override input field styles for dark theme */
.smart-chat-input-container .smart-chat-input-modern {
  color: var(--kelp-800)
}

.smart-chat-input-container .smart-chat-input-modern::-moz-placeholder {
  color: var(--kelp-800)
}

.smart-chat-input-container .smart-chat-input-modern::placeholder {
  color: var(--kelp-800)
}

/* Override button styles for dark theme */
.smart-chat-input-container .smart-chat-send-button-internal {
  background: var(--kelp-600);
  color: var(--kelp-100);
}

.smart-chat-input-container .smart-chat-send-button-internal:hover {
  background: var(--kelp-500);
  transform: scale(1.1) rotate(5deg);
  opacity: 1;
}

.smart-chat-input-container .smart-chat-attach-button-internal {
  color: var(--kelp-300);
}

.smart-chat-input-container .smart-chat-attach-button-internal:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--kelp-100);
}

/* Voice mode styling */
.smart-chat-input-container.voice-mode {
  background: var(--kelp-950);
  box-shadow: 0 4px 20px rgba(var(--gold-rgb), 0.2);
}

/* Input Right Controls */
.input-right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.call-agent-button-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kelp-800);
  border: 1px solid var(--gold-dark);
  color: var(--gold-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.call-agent-button-small:hover {
  background: var(--kelp-700);
  border-color: var(--gold-light);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.3);
}

.call-agent-button-small:active {
  transform: scale(0.95);
}

.call-agent-button-small:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Dynamic Button States */
.smart-chat-dynamic-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: rgba(var(--kelp-900-rgb), 0.7);
}

/* Deactive (default) state: keep current color */
.smart-chat-dynamic-button.deactive {
  background: rgba(var(--kelp-50-rgb), 0.5);
  color: var(--kelp-500);
  /* No override needed, uses default background and color */
}

/* Active state: use a different color */
.smart-chat-dynamic-button.active {
  background: var(--kelp-950);
  color: var(--gold-dark) !important;
}

.smart-chat-dynamic-button.call {
  background: rgba(var(--kelp-900-rgb), 0.5);
  color: var(--gold-dark);
}

.smart-chat-dynamic-button.send {
  background: var(--kelp-950);
  color: var(--gold-dark) !important;
}

/* Uniform SVG sizes on icon buttons */
.smart-chat-dynamic-button svg,
.smart-chat-attach-button-internal svg {
  width: 12px;
  height: 12px;
}

/* Tool expand arrow orientation */
.tool-result-toggle .tool-expand-icon {
  transition: transform 0.2s ease;
}
.tool-result-toggle .tool-expand-icon.expanded {
  transform: rotate(180deg);
}

/* Compact products grid tool - Column Layout for Tool Results */
.products-grid-tool { display: flex; flex-direction: column; gap: 8px; }
.products-grid-tool .product-card { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 8px; }
.products-grid-tool .product-card img { width: 56px; height: 56px; border-radius: 8px; -o-object-fit: cover; object-fit: cover; flex: 0 0 56px; }
.products-grid-tool .product-card .info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.products-grid-tool .title { font-size: 12px; color: var(--kelp-800); }
.products-grid-tool .price { font-size: 12px; color: var(--kelp-600); }

/* Avatar / loading exact same size */
.ai-message-avatar,
.ai-message-avatar.loading {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

/* Icon button states and colors */
.smart-chat-dynamic-button {
  border: 1px solid transparent;
}
.smart-chat-dynamic-button.deactive {
  background: rgba(var(--kelp-50-rgb), 0.5);
  color: var(--kelp-500);
}
.smart-chat-dynamic-button.active {
  background: var(--kelp-950);
  color: var(--gold-dark) !important;

}


/* AI message actions */
.ai-message-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.ai-message-actions .ai-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(var(--kelp-100-rgb), 0.5);
  color: var(--kelp-500);
  cursor: pointer;
}
.ai-message-actions .ai-action-btn:hover {
  background: rgba(var(--kelp-400-rgb), 0.12);
}
.ai-message-actions .ai-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-message-actions .ai-action-btn.liked { color: var(--gold-dark); border-color: rgba(var(--gold-rgb), 0.35); }
.ai-message-actions .ai-action-btn.disliked { color: #ef4444; border-color: rgba(239, 68, 68, 0.35); }
.ai-message-actions .ai-action-btn.copy { color: var(--kelp-700); }
.ai-message-actions .ai-action-btn.retry { color: var(--kelp-600); }

.smart-chat-dynamic-button.stop {
  background: var(--kelp-700);
  border: 1px solid var(--gold-light);
  color: var(--gold-light);
  animation: pulse-stop 1s ease-in-out infinite;
}

.smart-chat-dynamic-button.end-call {
  background: var(--kelp-800);
  border: 1px solid #ef4444;
  color: #ef4444;
}

.smart-chat-dynamic-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.4);
}

.smart-chat-dynamic-button:active {
  transform: scale(0.95);
}

.smart-chat-dynamic-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}


/* =================== SMART CHAT THINKING OVERLAY =================== */
.smart-chat-thinking-overlay {
  position: absolute;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-100-rgb), 0.99) 0%,
    rgba(var(--kelp-50-rgb), 0.96) 100%);
  inset: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}

.smart-chat-thinking-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.smart-chat-thinking-animation {
  display: flex;
  gap: 6px;
}

.smart-chat-thinking-dot {
  width: 8px;
  height: 8px;
  background: var(--gold-dark);
  border-radius: 50%;
  animation: thinking-bounce 1.2s infinite ease-in-out;
}

.smart-chat-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.smart-chat-thinking-dot:nth-child(3) { animation-delay: 0.4s; }


/* =================== CHAT BUTTON SYSTEM =================== */
.LE-smart-chat-button-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10000;
  max-width: calc(100vw - 48px);
  overflow: visible;
  opacity: 1;
  /* Removed isolation: isolate that creates global stacking context */
}

/* Hide chat button when sticky add-to-cart bar is active (mobile sticky mode) */
body.sticky-add-to-cart-active .LE-smart-chat-button-container {
  display: none !important;
}

/* Ensure the chat button allows overflow for glow effect */
.LE-smart-chat-button {
  position: relative;
  overflow: visible;
}

.LE-smart-chat.rtl .LE-smart-chat-button-container {
  right: auto;
  left: 24px;
  flex-direction: row-reverse;
}

/* Main Chat Button */
.LE-smart-chat-button {
  position: relative;
  width: 54px !important;
  height: 54px !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: var(--kelp-950);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(var(--gold-rgb), 0.15),
              inset 0 2px 0 rgba(255, 255, 255, 0.08),
              inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Removed isolation: isolate that creates global stacking context */
  opacity: 1;
  visibility: visible;
}

/* Button Logo */
.chat-button-logo-centered {
  position: relative;
  z-index: 2;
  filter: sepia(100%) saturate(1000%) hue-rotate(30deg) brightness(1.2);
  opacity: 0.95;
}

/* Button Hover States */
.LE-smart-chat-button:hover::before {
  left: 100%;
}

.LE-smart-chat-button:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(var(--gold-rgb), 0.6);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(var(--gold-rgb), 0.3),
              0 0 32px rgba(var(--gold-rgb), 0.3),
              inset 0 2px 0 rgba(255, 255, 255, 0.12),
              inset 0 -2px 8px rgba(0, 0, 0, 0.25);
}

.LE-smart-chat-button:hover .chat-button-logo-centered {
  filter: sepia(1) saturate(1.4) hue-rotate(25deg) brightness(1.5) contrast(1.3);
  opacity: 1;
  transform: scale(1.1);
}

.LE-smart-chat-button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* =================== MESSAGE SYSTEM & BUBBLES =================== */
.smart-chat-messages {
  /* Only in expanded mode should messages have flex and scroll */
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  scroll-behavior: smooth;
  position: relative;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
  -webkit-touch-callout: default;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  height: auto !important;
  /* Prevent scrollbar flashing */
  will-change: scroll-position;

}

/* Only in expanded mode should messages have flex and scroll */
.LE-smart-chat-container.expanded .smart-chat-messages {
  flex: 1 1 auto;
  min-height: 0; /* allow to shrink within flex parent */
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scroll flashing */
  padding: 40px 10px;
  height: auto;
  scroll-behavior: smooth;
  /* Stabilize scrollbar appearance */
  scrollbar-gutter: stable;
}

.LE-smart-chat-container.expanded .smart-chat-messages::-webkit-scrollbar {
  width: 4px;
  /* Prevent flashing by making scrollbar always visible */
  background: rgba(255, 255, 255, 0.05);
}

.LE-smart-chat-container.expanded .smart-chat-messages::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.LE-smart-chat-container.expanded .smart-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.LE-smart-chat-container.expanded .smart-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Scrollbar Styling for small mode - prevent flashing */
.smart-chat-messages::-webkit-scrollbar {
  width: 2px;
  background: rgba(0, 0, 0, 0.05);
}

.smart-chat-messages::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 1px;
}

.smart-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.smart-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* AI Message Container */
.ai-message-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  margin: 0;
  background: transparent;
  border: none;
  max-width: 100%;
}


/* AI Avatar */
.ai-message-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  position: relative;
  /* Reserve space so swapping spinner/logo doesn't shift text */
  min-width: 32px;
  min-height: 32px;
}

/* Minimal pulse animation (subtle) for agent visuals */
@keyframes agentSubtlePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0); }
  50% { transform: scale(1.03); box-shadow: 0 0 12px 0 rgba(var(--gold-rgb), 0.12); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0); }
}

/* Apply gentle pulse to agent avatar */
.ai-message-avatar {
  animation: agentSubtlePulse 3s ease-in-out infinite;
  will-change: transform;
}



.ai-avatar-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--kelp-200-rgb), 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  opacity: 0.95;
}

/* New minimal loading that replaces avatar without layout shift */
/* Using existing <LoadingAvatar /> component again; keep placeholder styles if needed */

/* AI Message Content */
.ai-message-content {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 10px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Minimal inline tool loading row */
.tool-loading-minimal {
  display: block;
  min-height: 20px; /* stabilizes layout while swapping states */
}

.ai-text-content {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kelp-800);
  font-weight: 400;
  letter-spacing: -0.01em;
  /* Preserve spacing and new lines; fix concatenated words in small mode */
  white-space: pre-wrap;
}

/* User Message Bubbles - Match HTML Reference */
.smart-chat-message.user {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0;
  padding: 0;
}

.smart-chat-message.user .smart-chat-bubble {
  background: rgba(var(--kelp-100-rgb), 0.7);
  background-size: 200% 200%;
  color: var(--kelp-800);
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  max-width: 80%;
  min-width: 100px;
  position: relative;
  border: none;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  overflow: hidden;
}



.smart-chat-message.user .smart-chat-text {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--kelp-800);
  word-wrap: break-word;
}

.smart-chat-message.user .smart-chat-timestamp {
  font-size: 10px;
  color: var(--kelp-500);
  margin-top: 4px;
  text-align: right;
  opacity: 0.7;
  font-weight: 300;
}

/* System Messages */
.smart-chat-message.system {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.smart-chat-message.system .smart-chat-bubble {
  background: rgba(var(--gold-rgb), 0.08);
  color: var(--kelp-600);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border: 1px solid rgba(var(--gold-rgb), 0.12);
  box-shadow: none;
}

/* =================== HEADER & NAVIGATION =================== */
.smart-chat-header {
  background: transparent;
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  min-height: auto;
}

/* Navigation Button */
.chat-navigation-button {
  position: absolute;
  right: 20px;
  top: 25%;
  transform: translateY(-50%);
  background: rgba(var(--kelp-50-rgb), 0.5);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  color: var(--kelp-600);
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
}

.chat-navigation-button:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.15);
  color: var(--kelp-700);
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
}

.chat-navigation-button:active {
  transform: scale(0.98);
}

/* Expand Button Styles */
.expand-button.active {
  background: rgba(var(--kelp-200-rgb), 0.3);
  color: var(--kelp-800);
}

/* =================== INPUT AREA =================== */
.smart-chat-input-area {
  background: transparent;
  padding: 20px;
  position: relative;
  width: 100%;
}

.smart-chat-input-area.agent-mode,
.smart-chat-input-area.streaming {
  background: transparent;
}

/* Ephemeral notice/toast container */
.smart-chat-notices {
  position: absolute;
  bottom: 110px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2102;
}

.smart-chat-notices .notice {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.smart-chat-notices .notice.error { border-color: rgba(239, 68, 68, 0.4); }
.smart-chat-notices .notice.success { border-color: rgba(16, 185, 129, 0.4); }
.smart-chat-notices .notice.info { border-color: rgba(255,255,255,0.25); }

/* Input Wrapper */
.smart-chat-input-wrapper-integrated {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border-radius: 20px;
  padding: 12px 16px;
  border: none;
  position: relative;
  overflow: visible;
  min-height: 50px;
  width: 460px;
}



/* Input Focus States */
.smart-chat-input-wrapper-integrated.focused {
  transform: translateY(-0.25px);
}



/* Input Field */
.smart-chat-input-modern {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gold-dark);
  font-family: inherit;
  min-height: 20px;
  max-height: 120px;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  resize: none;
  z-index: 2;
  position: relative;
  font-weight: 400;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  padding-right: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.smart-chat-input-modern::-webkit-scrollbar {
  display: none;
}

.smart-chat-input-modern::-moz-placeholder {
  color: var(--kelp-500);
  opacity: 0.7;
  font-weight: 300;
}

.smart-chat-input-modern::placeholder {
  color: var(--kelp-500);
  opacity: 0.7;
  font-weight: 300;
}

/* Input Buttons */
.smart-chat-attach-button-internal {
  background: transparent;
  border: none;
  color: var(--kelp-500);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

.smart-chat-attach-button-internal:hover {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  color: var(--kelp-700);
  transform: scale(1.02);
}

.smart-chat-send-button-internal {
  background: var(--kelp-700);
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  box-shadow: 0 1px 3px rgba(var(--kelp-rgb, 134, 142, 150), 0.2);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}

.smart-chat-send-button-internal:hover {
  background: var(--kelp-800);
  transform: scale(1.02);
  box-shadow: 0 2px 6px rgba(var(--kelp-rgb, 134, 142, 150), 0.25);
}

.smart-chat-send-button-internal:active {
  transform: scale(0.98);
}

.smart-chat-send-button-internal:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  background: var(--kelp-400);
}

.smart-chat-send-button-internal.active {
  background: var(--kelp-800);
  box-shadow: 0 2px 8px rgba(var(--kelp-rgb, 134, 142, 150), 0.3);
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
  .LE-smart-chat-container.chat-system {
    width: 90vw;
    bottom: 105px;
    right: 15px;
  }
  
  
  .LE-smart-chat-container.expanded {
    right: 15px;
    height: 80vh;
    transform: translateY(-5vh);
  }
  
  .controls-bar {
    top: -45px;
    gap: 8px;
  }
  
  .smart-chat-controls-container {
    gap: 6px;
  }
  
  .control-button {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  
  .smart-chat-input-container {
    width: 95vw;
    bottom: 20px;
    right: 15px;
    height: 60px;
  }
  
  .LE-smart-chat-container.with-greeting ~ .smart-chat-input-container {
    width: 98vw;
  }
  
  .LE-smart-chat-container.expanded ~ .smart-chat-input-container {
    width: 90vw;
  }
  
  .LE-smart-chat {
    bottom: 0;
    right: 0;
    transform: none;
    z-index: 10000;
  }
  
  .LE-smart-chat.rtl {
    right: 0;
    left: 0;
    transform: none;
  }
  
  .LE-smart-chat-button-container {
    bottom: 20px;
    right: 20px;
    gap: 12px;
  }
  .voice-mode-controls-global {
    bottom: 90px ;
  }
  .voice-status-indicator{
    margin-left: 27% !important;
    margin-bottom: 0 !important;
    padding: 4px 12px !important;
    background: none !important;
  }
  .LE-smart-chat.rtl .LE-smart-chat-button-container {
    right: auto;
    left: 20px;
  }
  
  .LE-smart-chat-button {
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 0 25px rgba(var(--gold-rgb), 0.15),
                inset 0 0 15px rgba(var(--gold-rgb), 0.08);
  }
  
  .smart-chat-messages::-webkit-scrollbar {
    display: none;
  }
  
  .smart-chat-messages {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
  }
  
  .smart-chat-message.user .smart-chat-bubble {
    max-width: 90%;
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .ai-message-avatar {
    width: 28px;
    height: 28px;
  }
  
  .ai-avatar-icon {
    width: 24px;
    height: 24px;
  }
  
  .ai-text-content {
    font-size: 13px;
    line-height: 1.5;
  }
  
  .smart-chat-header {
    padding: 12px 16px;
  }
  
  .smart-chat-input-area {
    padding: 12px 6px;

  }
  
  .smart-chat-input-container .smart-chat-input-wrapper-integrated {
    padding: 5px;
    gap: 10px;
    min-height: 50px;
    border-radius: 24px;
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  .smart-chat-dynamic-button{
    width: 35px;
    height: 35px;
  }
  
  .smart-chat-input-modern {
    font-size: 14px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -webkit-text-size-adjust: 100%;
    min-height: 18px;
    max-height: 120px;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
  }
  
  input, textarea, select {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    transform: scale(1);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  

  
  .smart-chat-send-button-internal,
  .smart-chat-attach-button-internal {
    width: 26px;
    height: 26px;
  }
}

/* =================== UTILITY CLASSES =================== */
/* Focus states for accessibility */
.LE-smart-chat-button:focus-visible,
.smart-chat-send-button-internal:focus-visible,
.smart-chat-attach-button-internal:focus-visible,
.chat-navigation-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .LE-smart-chat-button,
  .smart-chat-send-button-internal,
  .smart-chat-message.user .smart-chat-bubble {
    border: 2px solid currentColor;
  }
}

/* =================== ENHANCED MESSAGE CONTAINER - FROM HTML =================== */
.message-container {
  border-radius: 18px;
  padding: 24px 28px;
  /* Ensure this is the scrollable container in small mode */
  max-height: 45vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.message-container.call-active {
  background: none;

}

.message-container.call-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  justify-self: center;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kelp-950), var(--gold-light), var(--kelp-800), transparent);
  background-size: 200% 100%;
}


.message-text {
  margin-bottom: 16px;
  opacity: 1;
  transform: translateY(0);
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  word-wrap: break-word;
  word-break: break-word;
}

.message-text.fade-to-top {
  opacity: 0;
  transform: translateY(-30px);
}

.message-text.fade-to-left {
  opacity: 0;
  transform: translateX(-30px);
}

.message-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-label {
  color: var(--gold-dark);
  justify-content: flex-start;
}

.agent-label {
  color: var(--gold-dark);
}

.label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 1;
  transition: width 180ms ease, height 180ms ease, border 180ms ease, background-color 180ms ease, box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease;
}

/* Dot-as-loader: spinner state during streaming */
@keyframes labelSpin { to { transform: rotate(360deg); } }

.ai-message-container.streaming .agent-label .label-dot {
  /* Use blurred crescent like .loader-5 .crescent */
  width: 9px; /* slightly smaller */
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 46%),
    linear-gradient(90deg, transparent, var(--gold-dark));
  filter: blur(4px); /* reduced blur for smaller size */
  animation: spin 2.2s linear infinite;
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.22);
}

/* Small-mode/sans-container variant */
.agent-label.streaming .label-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 46%),
    linear-gradient(90deg, transparent, var(--gold-dark));
  filter: blur(4px);
  animation: spin 2.2s linear infinite;
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.22);
}

/* Smoothly fade agent label while streaming, and show when idle */
.agent-label .agent-name { opacity: 1; transition: opacity 180ms ease; }
.agent-label.streaming .agent-name { opacity: 0; }

/* Keep tool text visible even while streaming */
.agent-label .agent-tool {
  margin-left: 6px;
  color: var(--gold-dark);
  opacity: 0.85;
}
.agent-label.streaming .agent-tool { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ai-message-container.streaming .agent-label .label-dot {
    animation: none;
  }
}

.user-label .label-dot {
  background: var(--gold-dark);
}

.agent-label .label-dot {
  background: var(--gold-light);
}

/* Minimal pulse for the agent's label dot to match avatar */
.agent-label .label-dot {
  animation: agentSubtlePulse 2.6s ease-in-out infinite;
}

/* Only pulse while streaming/thinking for visibility without distraction */
.ai-message-container.streaming .ai-message-avatar,
.ai-message-container .ai-message-avatar.thinking {
  animation: agentSubtlePulse 2.6s ease-in-out infinite;
}

/* Small mode: use a tiny dot loader instead of full spinner */
.ai-message-avatar.small-mode-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-light);
  animation: agentSubtlePulse 1.8s ease-in-out infinite;
}

/* Small-mode scaling for loader inside labels (keep same loader classes, just smaller) */
.agent-label .small-mode .avatar-base.loader-5 {
  transform: scale(0.65);
  transform-origin: right center;
}

/* Generic small-mode dot for inline use (not avatar container) */
.small-mode-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-light);
  animation: agentSubtlePulse 1.6s ease-in-out infinite;
}

.call-active .agent-label .label-dot {
  background: var(--gold-light);
  animation: call-pulse 1s ease infinite;
}


/* Hide dot in voice mode; rely on tool/status instead */
.voice-mode-active .agent-label .label-dot { display: none; }



.text-content {
  perspective: 1000px;
  line-height: 1.6;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  word-wrap: break-word;
  word-break: break-word;
}

.word {
  display: inline-block;
  margin: 0 6px 8px 0;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.3px;
  opacity: 0;
  cursor: pointer;
  position: relative;
}

.user-text .word {
  color: var(--kelp-800);
  background: linear-gradient(135deg, var(--kelp-900) 0%, var(--kelp-700) 25%, var(--gold-dark) 50%, var(--kelp-800) 75%, var(--kelp-950) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.agent-text .word {
  color: var(--kelp-100);
  background: linear-gradient(135deg, var(--kelp-900) 0%, var(--kelp-700) 25%, var(--gold-dark) 50%, var(--kelp-800) 75%, var(--kelp-950) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 5s ease infinite;
}

.call-active .agent-text .word {
  color:linear-gradient(135deg, var(--kelp-900) 0%, var(--kelp-700) 25%, var(--gold-dark) 50%, var(--kelp-800) 75%, var(--kelp-950) 100%);
 
  background-size: 300% 300%;
  animation: call-gradient-flow 2s ease infinite;
}


.word.user-visible {
  opacity: 1;
}

.word.agent-visible {
  opacity: 1;
}

.word:hover {
  filter: drop-shadow(0 10px 20px rgba(var(--gold-rgb), 0.3));
}

/* Simple fade word animations for small mode */
.message-container .word {
  display: inline-block;
  margin: 0 4px 6px 0;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.3px;
  opacity: 0;
  cursor: pointer;
  position: relative;
}

.message-container .word.user-visible {
  opacity: 1;
}

.message-container .word.agent-visible {
  opacity: 1;
}

.message-container .word:hover {
  opacity: 0.8;
}

/* Small mode container scrollbar */
.message-container::-webkit-scrollbar {
  width: 4px;
}

.message-container::-webkit-scrollbar-track {
  background: transparent;
}

.message-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.message-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* =================== ENHANCED INPUT CONTAINER =================== */
.input-container.conversation-active {
  background: linear-gradient(
    to bottom,
    var(--kelp-950),
    var(--kelp-950),
    var(--kelp-900)
  );
  border: none !important;
}

.input-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light), var(--kelp-300));
  background-size: 300% 300%;
  opacity: 0;
  animation: gradient-flow 3s ease infinite;
}

.input-container:focus-within::before {
  opacity: 0.1;
}

.input-container:focus-within {
  border-color: linear-gradient(135deg, var(--gold-dark), var(--gold-light), var(--kelp-300));
  transform: scale(1.02);
}

/* =================== VOICE MODE CONTROLS =================== */
.voice-mode-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
  width: 100%;
}

/* Voice Mode Controls - Top positioned */
.voice-mode-controls-top {
  position: absolute;
  top: 20px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  pointer-events: none;
}

.voice-status-indicator {
  display: flex;
  align-items: center;
  background: var(--kelp-950);
  gap: 8px;
  border-radius: 10px;
  padding: 8px 12px;
  pointer-events: auto;
  margin-left: 40px;
  margin-bottom: -80px;
}

.voice-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  display: none;
}

.voice-status-text {
  font-size: 10px;
  color: var(--gold-dark);
  white-space: nowrap;
}

.voice-end-call-button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc3545, #c82333);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
  pointer-events: auto;
  color: white;
  margin-right: -5px;
}

.voice-end-call-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

.voice-end-call-button:active {
  transform: scale(0.95);
}

.voice-end-call-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.call-agent-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--kelp-800);
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  color: var(--gold-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.call-agent-button:hover {
  background: var(--kelp-700);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.3);
}

.call-agent-button.active {
  background: var(--gold-dark);
  color: var(--kelp-100);
  box-shadow: 0 4px 16px rgba(var(--gold-rgb), 0.4);
}

.voice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-visualizer-container {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}

.color-wave-visualizer-container {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
}

.color-wave-visualizer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.color-wave-visualizer canvas {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Voice Mode Visualizer in Input Container */
.voice-mode-visualizer-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
}

.voice-mode-visualizer-container .color-wave-visualizer {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
}

.voice-mode-visualizer-container .color-wave-visualizer canvas {
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Voice Mode Audio Visualizer */
.voice-mode-audio-visualizer {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.voice-mode-audio-visualizer svg {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* =================== SMART CHAT SMALL MODE TOOL DISPLAY =================== */
.smart-chat-small-mode-tool-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}



.smart-chat-tool-message {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* =================== EXPANDED HISTORY =================== */
.expanded-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  height: 100%;
}

/* =================== TOOL SUMMARY CONTAINER =================== */
.tool-summary-container {
  margin: 12px 0;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
}
.tool-result-summary{
  padding: 0 10px;
  font-size: 10px;
  color: var(--gold-dark);
}

.tool-expand-icon {
  color: var(--gold-dark);
}


.tool-result-summary-block {

  border-radius: 8px;
  padding: 5px;
  margin: 8px 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.1) ;
}

.tool-result-summary-block:hover {
  transform: translateY(-1px);
  
}

.tool-result-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 0;
  color: var(--kelp-100);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tool-result-toggle:hover {
  color: var(--gold-light);
}

.tool-result-toggle.failed {
  color: #ef4444;
}

.tool-status-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: none;
}

.tool-status-icon.success {
  color: var(--gold-light);
}

.tool-status-icon.failed {
  color: #ef4444;
}

.failed-tool-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.retry-button {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.retry-button:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  transform: scale(1.05);
}

.tool-result-details {
  margin-top: 12px;
  padding: 12px;
  background: rgba(var(--kelp-100-rgb), 0.5);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kelp-200);
  max-height: 300px;
  overflow-y: auto;
}

.tool-result-details::-webkit-scrollbar {
  width: 4px;
}

.tool-result-details::-webkit-scrollbar-track {
  background: transparent;
}

.tool-result-details::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), 0.3);
  border-radius: 2px;
}

.tool-result-details::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gold-rgb), 0.5);
}

/* =================== ATTACHMENT RENDERING =================== */
.message-attachments {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-attachment {
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.message-attachment:hover {
  transform: translateY(-1px);
}

.image-attachment {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-image {
  width: 100%;
  max-width: 300px;
  height: 100px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;

  /* Transparent bubble look for image cards */
  background: transparent;
  border: none;
  box-shadow: none;
}



.image-attachment-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  display: none;
}

.attachment-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--kelp-100);
  word-break: break-word;
}

.attachment-size {
  font-size: 11px;
  color: var(--kelp-400);
  opacity: 0.8;
}

.document-attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: rgba(var(--kelp-950-rgb), 0.3);
  border-radius: 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.1);
}

.document-attachment-icon {
  width: 32px;
  height: 32px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 16px;
}

.document-attachment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.document-attachment-download {
  color: var(--gold-light);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.document-attachment-download:hover {
  background: rgba(var(--gold-rgb), 0.2);
  color: var(--gold-dark);
  transform: scale(1.05);
}

/* Inline Attachment Preview */
.inline-attachment-preview {
  position: absolute;
  bottom: 46px;
  left: 16px;
  z-index: 2101;
  margin: 0;
  padding: 6px 8px;
}

.attachment-preview-compact {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Image chip with top-right close button */
.attachment-preview-compact.image-chip {

  border-radius: 10px;
  padding: 6px 8px 6px 6px;
  position: relative;
}

.attachment-image-wrapper {
  position: relative;
  display: inline-block;
}

.attachment-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.attachment-close:hover {
  background: rgba(0,0,0,0.8);
}

.attachment-close:active {
  transform: scale(0.96);
}

.attachment-preview-image-small {
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}

.attachment-info-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attachment-name-small {
  font-size: 12px;
  font-weight: 500;
  color: var(--kelp-100);
  word-break: break-word;
}

.attachment-remove-small {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.attachment-remove-small:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  transform: scale(1.05);
}





/* =================== CRESCENT LOADER =================== */
/* Rotating blurred crescent (Loader #6) */
.loader-5 .crescent {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  /* gradient from transparent to accent creates the crescent shape */
  background: linear-gradient(90deg, transparent, var(--gold-dark));
  /* soft glow / smear */
  filter: blur(6px);
  /* rotation */
  animation: spin 2.2s linear infinite;
  /* keep it visually centered */
  display: block;
  margin: auto;
}

/* simple spin keyframes */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* utility: stop animation for reduced-motion users */
.reduced-motion .loader-5 .crescent,
.loader-5.reduced-motion .crescent {
  animation: none;
}

/* Avatar loading state */
.ai-message-avatar.loading .loader-5 {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

/* Avatar base loader container */
.avatar-base.loader-5 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

/* Ensure the crescent is properly sized within the avatar */
.avatar-base.loader-5 .crescent {
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--gold-dark));
  filter: blur(6px);
  animation: spin 2.2s linear infinite;
  display: block;
  margin: auto;
  position: relative;
  z-index: 1;
}

/* Add a subtle glow effect to the crescent */
.avatar-base.loader-5 .crescent::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--gold-light));
  filter: blur(8px);
  opacity: 0.3;
  animation: spin 2.2s linear infinite;
}

/* Ensure the avatar container has proper dimensions */
.ai-message-avatar.loading {
  position: relative;
  overflow: visible;
}



/* =================== TOOL TEXT SHINE EFFECT =================== */
.cursor-thinking-text {
  /* Color variables - easily changeable */
  --base-color: var(--kelp-600);
  --shine-color: var(--kelp-200);
  
  /* Typography */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin: 4px 0 8px 0;
  
  /* Layout */
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  
  /* Shine effect */
  color: #ffffff; /* Fallback color */
  background: linear-gradient(
    to right, 
    var(--base-color) 0%, 
    var(--base-color) 40%, 
    var(--shine-color) 50%, 
    var(--base-color) 60%, 
    var(--base-color) 100%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
}

/* Reading stage specific styling with smaller eye icon */
.cursor-thinking-text[data-stage="reading"] {
  align-items: center;
  gap: 6px;
}

.cursor-thinking-text[data-stage="reading"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  opacity: 0.7;
  animation: readingBlink 2s ease-in-out infinite;
}

/* Shine animation keyframes */
@keyframes shine {
  0% {
    background-position: -100%;
  }
  100% {
    background-position: 100%;
  }
}

/* Reading icon blink animation */
@keyframes readingBlink {
  0%, 50% {
    opacity: 0.7;
  }
  25%, 75% {
    opacity: 0.3;
  }
}

/* Related Links - clean alignment and chips */
.claude-links-section {
  margin-top: 8px;
  padding-top: 6px;
}
.claude-links-section .links-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kelp-700);
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
}
.claude-links-section .links-icon { opacity: 0.7; }

.structured-links.clean {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.structured-links.clean .link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--kelp-100-rgb), 0.6);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.5);
  color: var(--kelp-800);
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
}
.structured-links.clean .link-chip:hover {
  background: rgba(var(--kelp-200-rgb), 0.6);
  transform: translateY(-1px);
}
.structured-links.clean .link-chip .link-arrow { color: var(--gold-dark); }
.structured-links.clean .link-chip .chip-text { color: var(--gold-dark); font-weight: 600; }

/* Inline chips inside message text */
.link-chip.inline { padding: 4px 8px; font-size: 12px; }

/* Small mode tweaks */
.claude-links-section.small-mode .links-header { font-size: 11px; }
.claude-links-section.small-mode .structured-links.clean { gap: 6px; }

/* =================== AUTH INLINE CONTAINER - MODERN DESIGN =================== */
.auth-inline-container {
  margin: 16px 0;
  padding: 0;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-inline-container.fade-out {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
}

.auth-claude-message {
  margin-bottom: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(var(--kelp-100-rgb), 0.08), rgba(var(--kelp-50-rgb), 0.05));
  border-radius: 12px;
  font-size: 13px;
  color: var(--kelp-700);
  line-height: 1.6;
  border-left: 3px solid var(--gold-dark);
  font-weight: 400;
}

.auth-inline-form {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(var(--kelp-50-rgb), 0.95));
  border: 1px solid rgba(var(--gold-rgb), 0.15);
  border-radius: 16px;
  padding: 20px;
  margin: 12px 0;
  box-shadow: 0 4px 20px rgba(var(--kelp-100-rgb), 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.auth-inline-form:hover {
  box-shadow: 0 6px 24px rgba(var(--gold-rgb), 0.15);
  border-color: rgba(var(--gold-rgb), 0.25);
}

.auth-inline-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--kelp-900);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-inline-title::before {
  content: "🔒";
  font-size: 16px;
}

.auth-inline-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.auth-inline-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  border-radius: 10px;
  font-size: 14px;
  color: var(--kelp-900);
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
}

.auth-inline-input:focus {
  outline: none;
  border-color: var(--gold-dark);
  background: white;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.1);
}

.auth-inline-input::-moz-placeholder {
  color: var(--kelp-500);
  font-weight: 400;
}

.auth-inline-input::placeholder {
  color: var(--kelp-500);
  font-weight: 400;
}

.auth-inline-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.auth-inline-button {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-inline-button.auth-login {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  color: white;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.3);
}

.auth-inline-button.auth-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.4);
}

.auth-inline-button.auth-login:active {
  transform: translateY(0);
}

.auth-inline-button.auth-login.success {
  background: linear-gradient(135deg, #10b981, #059669);
  animation: successPulse 0.5s ease;
}

@keyframes successPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.auth-inline-button.auth-cancel {
  background: rgba(var(--kelp-100-rgb), 0.15);
  color: var(--kelp-700);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
}

.auth-inline-button.auth-cancel:hover {
  background: rgba(var(--kelp-200-rgb), 0.2);
  border-color: rgba(var(--kelp-400-rgb), 0.4);
}

.auth-inline-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.auth-inline-form.success {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(255, 255, 255, 0.98));
}

.auth-inline-form.error {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(255, 255, 255, 0.98));
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Horizontal product cards row for chat and voice mode */
.chat-products-row.horizontal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Voice mode: 2 columns for better visibility */
.chat-products-row.horizontal.voice-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Product card styling */
.chat-products-row.horizontal .chat-product-card {
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  background: rgba(0,0,0,0.02);
  transition: all 0.2s ease;
}

.chat-products-row.horizontal .chat-product-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chat-products-row.horizontal .chat-product-image img,
.chat-products-row.horizontal .chat-product-image { 
  width: 64px; 
  height: 64px; 
  border-radius: 8px; 
  -o-object-fit: cover; 
     object-fit: cover; 
  flex: 0 0 64px;
}

.chat-products-row.horizontal .chat-product-title { 
  font-size: 12px; 
  font-weight: 600;
  color: var(--kelp-800);
}

.chat-products-row.horizontal .chat-product-price { 
  font-size: 12px; 
  color: var(--kelp-600); 
  font-weight: 500;
}

/* Voice mode specific styling */
.chat-products-wrapper.voice-mode {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.chat-products-wrapper.voice-mode .chat-product-card {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
}

/* Pagination dots */
.chat-products-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--kelp-400-rgb), 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-dot.active {
  background: var(--gold-dark);
  transform: scale(1.2);
}

.pagination-dot:hover {
  background: var(--gold-light);
}

/* Product engagement animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Product container states */
.product-container.faded {
  opacity: 0.3 !important;
  pointer-events: none;
}

.product-container.focused {
  transform: scale(1.05) !important;
  z-index: 10;
}

.product-container {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced product image gallery */
.product-image-gallery {
  animation: fadeInUp 0.3s ease-out;
}

.product-image-gallery img:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.3);
}

/* Product variants styling */
.product-variants {
  animation: fadeInUp 0.3s ease-out;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.product-variants span {
  transition: all 0.2s ease;
}

.product-variants span:hover {
  transform: scale(1.05);
  background: var(--gold-dark) !important;
}/* Integrated AI Products Section - Chat Style with Kelp */
.ai-message-products {
  margin-top: 16px;
  padding: 0;
  border: none;
  background: none;
}

.ai-products-section {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 250, 252, 0.95) 100%
  );
  border: 1px solid rgba(52, 73, 85, 0.12);
  border-radius: 16px;
  padding: 20px;
  margin: 12px 0;
  /* backdrop-filter: blur(10px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(52, 73, 85, 0.08);
  position: relative;
  overflow: hidden;
  /* Remove default animation to prevent blinking */
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* Only apply entrance animation on initial render */
.ai-products-section.section-entering {
  opacity: 0;
  transform: translateY(20px);
  animation: productSectionAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes productSectionAppear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  60% {
    opacity: 0.8;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ai-products-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 20%,
    rgba(52, 73, 85, 0.3) 40%,
    rgba(52, 73, 85, 0.6) 50%,
    rgba(52, 73, 85, 0.3) 60%,
    transparent 80%,
    transparent 100%
  );
  /* animation: productSectionShine 4s ease-in-out infinite 1s; - DISABLED FOR PERFORMANCE */
}

@keyframes productSectionShine {
  0% {
    left: -150%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.ai-products-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: rgba(52, 73, 85, 0.8);
  font-size: 14px;
  font-weight: 500;
  /* Remove default animation to prevent blinking */
  opacity: 1;
  transform: translateX(0);
  animation: none;
}

/* Only apply entrance animation on initial render */
.ai-products-header.header-entering {
  opacity: 0;
  transform: translateX(-10px);
  animation: headerSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes headerSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ai-products-header svg {
  color: rgba(52, 73, 85, 0.7);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-products-section:hover .ai-products-header svg {
  transform: rotate(180deg) scale(1.1);
}

.ai-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  /* Remove default opacity to prevent blinking */
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* Only apply entrance animation on initial render */
.ai-products-grid.grid-entering {
  opacity: 0;
  transform: translateY(10px);
  animation: gridFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes gridFadeIn {
  from {
  opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================== STABLE PRODUCT CARDS - NO BLINKING =================== */
.chat-product-card {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
  /* backdrop-filter: blur(20px);
  display: flex;
  flex-direction: row;
  gap: 12px;
  min-height: 80px;
  max-height: 100px;
  margin-bottom: 8px;
  align-items: center;
  /* Remove opacity and transform defaults to prevent blinking */
  opacity: 1;
  transform: translateY(0);
  animation: none;
  will-change: auto;
}

/* Only apply entrance animation on initial render */
.chat-product-card.card-entering {
  opacity: 0;
  transform: translateY(15px);
  animation: cardSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes cardSlideIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.06) 0%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.03) 50%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.06) 100%
  );
  border-radius: 12px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 12px 40px rgba(var(--kelp-rgb, 134, 142, 150), 0.15),
    0 4px 20px rgba(var(--kelp-rgb, 134, 142, 150), 0.08),
    0 0 0 1px rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 250, 252, 0.95) 100%
  );
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-product-card:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.08) 0%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.04) 50%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.08) 100%
  );
}

.chat-product-card:active {
  transform: translateY(-1px);
  transition: all 0.1s ease-out;
  box-shadow: 
    0 6px 20px rgba(var(--kelp-rgb, 134, 142, 150), 0.12),
    0 2px 8px rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
}

/* Compact Product Image Container */
.chat-product-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-product-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
  will-change: transform;
}

.chat-product-card:hover .chat-product-image img {
  transform: scale(1.03);
  filter: brightness(1.02) saturate(1.05);
}

/* Compact Image Placeholder & Fallback */
.chat-product-image-placeholder,
.chat-product-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.06) 0%, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.02) 100%
  );
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.chat-product-image-placeholder::before,
.chat-product-image-fallback::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.08) 50%,
    transparent 100%
  );
  /* animation: image-placeholder-shimmer 2s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes image-placeholder-shimmer {
  0% { left: -100%; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Compact Product Info Container */
.chat-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.chat-product-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--kelp-800);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-height: 40px; /* Increased to allow for longer names */
  overflow: hidden;
}

.chat-product-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--kelp-800);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.chat-product-feature {
  font-size: 10px;
  color: var(--kelp-600);
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.05);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: all 0.3s ease;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

.chat-product-card:hover .chat-product-feature {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.07);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.1);
  color: var(--kelp-700);
}

/* =================== PRODUCTS WRAPPER WITH INTEGRATED NAVIGATION =================== */
.chat-products-wrapper {
  position: relative;
  margin: 12px 0;
  padding: 16px 0;
  background: transparent;
}

/* Navigation positioned within card structure */
.chat-products-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  pointer-events: all;
}

.chat-products-wrapper.ltr .chat-products-nav {
  right: -20px;
}

.chat-products-wrapper.rtl .chat-products-nav {
  left: -20px;
}

/* Enhanced navigation integration */
.chat-products-nav .luxury-navigation {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 
    0 4px 20px rgba(var(--kelp-rgb, 134, 142, 150), 0.12),
    0 0 0 1px rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
 
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-products-nav .luxury-navigation:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 
    0 8px 32px rgba(var(--kelp-rgb, 134, 142, 150), 0.15),
    0 0 0 1px rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
}

/* Override luxury navigation button styles for chat integration */
.chat-products-nav .luxury-nav-button {
  background: transparent;
  border: none;
  color: var(--kelp-600);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-products-nav .luxury-nav-button:hover {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  color: var(--kelp-800);
  transform: scale(1.05);
  }
  
/* =================== VERTICAL PRODUCTS CONTAINER & GRID =================== */
.chat-products-grid {
  display: flex;
  flex-direction: column;
    gap: 8px;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* =================== PROGRESSIVE PRODUCT DISPLAY =================== */
.progressive-product-display {
  margin: 16px 0;
  background: transparent;
}

.product-summary-container {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* backdrop-filter: blur(10px); */
  position: relative;
  overflow: hidden;
}

.product-summary-container::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.1) 0%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.05) 50%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.1) 100%
  );
  border-radius: 12px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-summary-container:hover::before {
  opacity: 1;
}

.product-summary-header {
  display: flex;
  align-items: center;
    gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kelp-700);
}

.product-summary-icon {
  transition: transform 0.3s ease;
  color: var(--kelp-600);
  }

.product-summary-container.expanded .product-summary-icon {
  transform: rotate(90deg);
}

.product-summary-count {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.1);
  color: var(--kelp-700);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}

.progressive-products-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progressive-products-container.revealed {
  max-height: 800px;
  margin-top: 12px;
}

.products-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}

/* =================== AI INLINE PRODUCTS STYLING =================== */
.ai-inline-products {
  margin: 16px 0;
  padding: 0;
  background: transparent;
  position: relative;
}

.inline-products-intro {
  font-size: 12px;
  color: var(--kelp-600);
  margin-bottom: 12px;
  font-weight: 400;
  opacity: 0.9;
  text-align: center;
  padding: 8px 12px;
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
  border-radius: 8px;
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
}

.inline-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
  
/* Minimal Product Cards for Inline Display */
.minimal-product-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
  border-radius: 12px;
  padding: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  /* backdrop-filter: blur(10px); */
  position: relative;
  overflow: hidden;
}

.minimal-product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.08) 0%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.04) 50%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.08) 100%
  );
  border-radius: 12px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.minimal-product-card:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
}

.minimal-product-card:hover::before {
  opacity: 1;
}

.minimal-product-image {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.minimal-product-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.minimal-product-card:hover .minimal-product-image img {
  transform: scale(1.02);
}

.minimal-product-info {
  padding: 0;
}

.minimal-product-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--kelp-800);
  margin: 0 0 4px 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  min-height: 28px;
  max-height: 36px; /* Allow for slightly longer names */
}

.minimal-product-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--kelp-800);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.minimal-view-btn {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  color: var(--kelp-700);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.minimal-view-btn:hover {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.2);
  color: var(--kelp-800);
  transform: translateY(-0.5px);
}

/* =================== MOBILE OPTIMIZATIONS =================== */
@media (max-width: 768px) {
  .chat-products-grid {
    gap: 6px;
  }
  
  .chat-product-card {
    padding: 10px;
    min-height: 70px;
    max-height: 90px;
    gap: 10px;
  }
  
.chat-product-image {
    width: 50px;
    height: 50px;
}

.chat-product-title {
    font-size: 11px;
    max-height: 26px;
}

.chat-product-price {
    font-size: 12px;
  }

  .chat-product-feature {
    font-size: 9px;
    padding: 2px 4px;
    max-width: 100px;
  }
  
  .chat-products-wrapper.ltr .chat-products-nav,
.chat-products-wrapper.rtl .chat-products-nav {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 8px;
    left: auto;
    right: auto;
}

  .chat-products-nav .luxury-navigation {
    padding: 6px;
    border-radius: 10px;
    box-shadow: 
      0 2px 12px rgba(var(--kelp-rgb, 134, 142, 150), 0.1),
      0 0 0 1px rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
  }

  .chat-products-nav .luxury-nav-button {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .inline-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

  .minimal-product-card {
    padding: 6px;
}

  .minimal-product-image {
    height: 70px;
    margin-bottom: 6px;
}
}

@keyframes shine {
  0% {
      background-position: 100%;
  }
  100% {
      background-position: -100%;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes textShine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes voiceActivate {
  0% {
    transform: scale(0.6) rotate(-180deg);
    opacity: 0;
    filter: blur(10px);
  }
  25% {
    transform: scale(0.9) rotate(-90deg);
    opacity: 0.4;
    filter: blur(5px);
  }
  50% {
    transform: scale(1.15) rotate(0deg);
    opacity: 0.8;
    filter: blur(2px);
  }
  75% {
    transform: scale(0.95) rotate(10deg);
    opacity: 0.9;
    filter: blur(1px);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes voicePulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.02);
    filter: brightness(1.1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.2);
  }
  75% {
    transform: scale(1.02);
    filter: brightness(1.1);
  }
}

.voice-mode-full-overlay {
  animation: voiceActivate 0.8s ease-out;
}

.voice-center-container {
  animation: voiceActivate 0.6s ease-out 0.2s both;
}

/* Hide chat elements during voice mode */
.voice-mode-active .smart-chat-messages,
.voice-mode-active .smart-chat-input-wrapper,
.voice-mode-active .smart-chat-input-suggestions-container,
.voice-mode-active .smart-chat-header .conversation-history-section {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.95);
  visibility: hidden !important;
}

/* Voice status specific styles */
.voice-status-text {
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  letter-spacing: 0.5px;
}

/* Enhanced voice visualizer container */
.voice-mode-chat-overlay {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* Voice circle animation states - only when agent is active */
.voice-chat-visualizer {
  animation: none !important; /* Ensure no default pulsing on the circle */
}

/* Disable all external pulsing/scale animations on the main visualizer circle */
.voice-mode-active .voice-chat-visualizer,
.voice-mode-active .voice-chat-visualizer[data-state="listening"],
.voice-mode-active .voice-chat-visualizer[data-state="speaking"],
.voice-mode-active .voice-chat-visualizer[data-state="processing"] {
  animation: none !important;
}

/* Processing state pulse effect */
.voice-status-container[data-state="processing"] .voice-status-text {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Smooth transitions */
.voice-mode-transition {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
} 
@media  (max-width: 768px) {
  
  
}/* Voice Mode Specific Styles */

.voice-mode-status-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.voice-status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.status-dot.listening {
  background-color: #4ade80;
}

.status-dot.speaking {
  background-color: #f59e0b;
}

.status-dot.connecting {
  background-color: #06b6d4;
}

.status-dot.idle {
  background-color: #6b7280;
}

.status-text {
  font-size: 14px;
  opacity: 0.8;
  color: var(--gold);
  font-weight: 500;
}

.voice-mode-summary-container {
  padding: 20px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  max-height: 60vh;
  overflow-y: auto;
}

.voice-summary-message {
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(var(--gold-rgb), 0.1);
  border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  font-size: 13px;
  text-align: left;
}

.voice-summary-label {
  opacity: 0.7;
  font-size: 11px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-tool-badge {
  background: rgba(var(--gold-rgb), 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.voice-placeholder-text {
  text-align: center;
  opacity: 0.6;
  font-size: 14px;
  font-style: italic;
}

/* End Call Button */
.end-call-button {
  background: rgba(var(--kelp-50-rgb), 0.3);
  color: var(--kelp-800);
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  z-index: 1002;
}

.end-call-button:hover {
  transform: scale(1.1);
}

/* Subtle permanent tilt and smooth motion for the icon to suggest hang-up */
.end-call-button svg {
  transform: rotate(-12deg);
  transition: transform 200ms ease;
  color: var(--gold-dark);
}

.end-call-button:hover svg {
  transform: rotate(-18deg) scale(1.02);
}

/* Voice Mode Container Adjustments */
.LE-smart-chat-container.voice-mode-active {
  min-height: 400px;
}

.LE-smart-chat-container.voice-mode-active .smart-chat-messages {
  padding: 0;
  max-height: none;
}

/* Hide regular messages area in voice mode */
.voice-mode-active .smart-chat-messages:not(.voice-mode-summary) {
  display: none;
}
/* =================== CHAT PAYMENT FORM - MINIMAL MODERN DESIGN =================== */

.chat-payment-form-container {
  margin: 16px 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(var(--kelp-50-rgb), 0.95));
  border-radius: 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.15);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(var(--kelp-100-rgb), 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.chat-payment-form-container:hover {
  box-shadow: 0 6px 24px rgba(var(--gold-rgb), 0.15);
  border-color: rgba(var(--gold-rgb), 0.25);
}

/* Compact mode (small chat) */
.chat-payment-form-container.compact .payment-form-step {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

/* Expanded mode (full chat) */
.chat-payment-form-container.expanded .payment-form-step {
  padding: 24px;
  max-height: 600px;
  overflow-y: auto;
}

/* =================== FORM HEADER =================== */

.payment-form-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.1);
}

.security-icon {
  color: var(--gold-dark);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.security-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--kelp-900);
}

/* =================== PRODUCT SUMMARY =================== */

.payment-product-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-radius: 10px;
  margin-bottom: 16px;
}

.payment-product-image {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}

.payment-product-details h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--kelp-900);
  margin: 0 0 4px 0;
}

.payment-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0;
}

/* =================== FORM FIELDS =================== */

.payment-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kelp-700);
  margin-top: 8px;
  margin-bottom: 4px;
}

.payment-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payment-field-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--kelp-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.payment-field-group input,
.payment-field-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  border-radius: 8px;
  font-size: 13px;
  color: var(--kelp-900);
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
}

.payment-field-group input:focus,
.payment-field-group select:focus {
  outline: none;
  border-color: var(--gold-dark);
  background: white;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.1);
}

.payment-field-group input::-moz-placeholder {
  color: var(--kelp-500);
  font-size: 12px;
}

.payment-field-group input::placeholder {
  color: var(--kelp-500);
  font-size: 12px;
}

/* Two-column layout for city/state and zip/country */
.payment-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* =================== CONFIRMATION SUMMARY =================== */

.payment-confirmation-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.payment-field-confirmed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #059669;
}

.payment-field-confirmed .check-icon {
  color: #10b981;
}

/* =================== STRIPE ELEMENT =================== */

.stripe-element-container {
  margin: 16px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  min-height: 120px;
}

.stripe-element-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--kelp-500);
}

.stripe-element-placeholder p {
  font-size: 12px;
  margin: 0;
}

/* =================== ERROR MESSAGES =================== */

.payment-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #ef4444;
  font-size: 12px;
  margin: 12px 0;
  animation: shake 0.4s ease;
}

/* =================== FORM ACTIONS =================== */

.payment-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.1);
}

.payment-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.payment-btn-primary {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  color: white;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.3);
}

.payment-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.4);
}

.payment-btn-primary:active {
  transform: translateY(0);
}

.payment-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.payment-btn-secondary {
  background: rgba(var(--kelp-100-rgb), 0.15);
  color: var(--kelp-700);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
}

.payment-btn-secondary:hover {
  background: rgba(var(--kelp-200-rgb), 0.2);
  border-color: rgba(var(--kelp-400-rgb), 0.4);
}

.payment-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =================== SCROLLBAR STYLING =================== */

.payment-form-step::-webkit-scrollbar {
  width: 4px;
}

.payment-form-step::-webkit-scrollbar-track {
  background: transparent;
}

.payment-form-step::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), 0.3);
  border-radius: 2px;
}

.payment-form-step::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gold-rgb), 0.5);
}

/* =================== MOBILE RESPONSIVE =================== */

@media (max-width: 768px) {
  .chat-payment-form-container.compact .payment-form-step {
    padding: 12px;
    max-height: 350px;
  }

  .payment-product-summary {
    flex-direction: column;
    text-align: center;
  }

  .payment-product-image {
    width: 80px;
    height: 80px;
  }

  .payment-field-row {
    grid-template-columns: 1fr;
  }

  .payment-form-actions {
    flex-direction: column;
  }

  .payment-btn {
    width: 100%;
  }
}

/* =================== ANIMATIONS =================== */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .security-icon {
    animation: none;
  }
  
  .payment-error {
    animation: none;
  }
}

/* Cookie Consent - Inspired by Loro Piana design */

.cookie-consent-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	padding: 1rem;
	background: transparent;
}

.cookie-consent-box {
	max-width: 790px;
	width: 100%;
	border-radius: 3px;
	background: rgba(var(--kelp-50-rgb), 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--kelp-800);
	padding: 2.5rem 2rem;
	box-shadow: 0 8px 24px 0 rgba(var(--gold-rgb), 0.11);
}


/* Logo */
.cookie-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
}

/* Header */
.cookie-header {
	text-align: center;
	margin-bottom: 2rem;
}

.cookie-title {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.125rem;
	color: rgba(var(--kelp-800-rgb), 0.9);
	margin: 0 0 1.25rem 0;
	letter-spacing: 0.02em;
}

.cookie-description {
	font-family: var(--font-secondary);
	font-size: 0.875rem;
	color: rgba(var(--kelp-800-rgb), 0.7);
	line-height: 1.6;
	text-align: center;
	margin: 0;
}

/* Actions - Vertically stacked buttons */
.cookie-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

/* Clean button styles */
.cookie-btn {
	position: relative;
	padding: 0.875rem 1.5rem;
	border-radius: 3px;
	cursor: pointer;
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border: none;
	width: 100%;
	transition: all 0.2s ease;
	text-align: center;
}

/* Horizontal top/bottom lines (inspired by mobile sticky buttons) */
.cookie-btn::before,
.cookie-btn::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--kelp-300), transparent);
	transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	opacity: 0.6;
}

.cookie-btn::before {
	top: 0;
}

.cookie-btn::after {
	bottom: 0;
}

.cookie-btn:hover::before,
.cookie-btn:hover::after {
	opacity: 1;
	background: linear-gradient(90deg, transparent, var(--kelp-400), transparent);
}

/* Primary button - dark background, white text */
.cookie-btn-primary {
	background: var(--kelp-900);
	color: var(--gold-dark);
}

.cookie-btn-primary:hover {
	background: var(--kelp-800);
	transform: translateY(-1px);
}

.cookie-btn-primary:active {
	background: var(--kelp-950);
	transform: translateY(0);
}

/* Secondary button - light background, dark text */
.cookie-btn-secondary {
	background: rgba(var(--kelp-50-rgb), 0.98);
	color: var(--kelp-900);
}

.cookie-btn-secondary::before,
.cookie-btn-secondary::after {
	background: linear-gradient(90deg, transparent, var(--kelp-400), transparent);
	opacity: 0.7;
}

.cookie-btn-secondary:hover {
	background: rgba(var(--kelp-100-rgb), 0.98);
}

.cookie-btn-secondary:hover::before,
.cookie-btn-secondary:hover::after {
	background: linear-gradient(90deg, transparent, var(--kelp-600), transparent);
	opacity: 1;
}

.cookie-btn-secondary:active {
	background: rgba(var(--kelp-200-rgb), 0.98);
}

/* Manage preferences section */
.cookie-manage {
	margin-top: 0;
}

.cookie-preferences {
	margin-bottom: 2rem;
}

.cookie-preference-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	color: var(--kelp-800);
	font-size: 0.875rem;
	font-family: var(--font-primary);
	border-bottom: 1px solid rgba(var(--kelp-200-rgb), 0.5);
}

.cookie-preference-row:last-child {
	border-bottom: none;
}

.cookie-preference-row.clickable {
	cursor: pointer;
}

.cookie-preference-label {
	font-weight: 500;
	color: var(--kelp-900);
}

.cookie-preference-hint {
	font-size: 0.75rem;
	color: var(--kelp-600);
	font-weight: 400;
}

.cookie-preference-description {
	font-size: 0.75rem;
	color: var(--kelp-600);
	line-height: 1.5;
	margin-top: -0.5rem;
	margin-bottom: 0.5rem;
	padding-left: 0;
	font-family: var(--font-secondary);
}

/* Custom checkbox design */
.cookie-preference-row input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	width: 20px;
	height: 20px;
	border: 2px solid var(--kelp-400);
	border-radius: 3px;
	background: rgba(var(--kelp-50-rgb), 0.98);
	outline: none;
	transition: all 0.2s ease;
	cursor: pointer;
}

.cookie-preference-row input[type="checkbox"]:hover {
	border-color: var(--kelp-600);
}

.cookie-preference-row input[type="checkbox"]:focus {
	box-shadow: 0 0 0 3px rgba(var(--kelp-300-rgb), 0.3);
	border-color: var(--kelp-700);
}

.cookie-preference-row input[type="checkbox"]:checked {
	background-color: var(--kelp-900);
	border-color: var(--kelp-900);
}

.cookie-preference-row input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 6px;
	height: 10px;
	border: solid var(--kelp-50);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Responsive Design */
@media (max-width: 768px) {
	.cookie-consent-overlay {
		padding: 1rem;
	}
	
	.cookie-consent-box {
		max-width: 100%;
		padding: 2rem 1.5rem;
	}
	
	.cookie-logo {
		margin-bottom: 1.5rem;
	}
	
	.cookie-header {
		margin-bottom: 1.5rem;
	}
	
	.cookie-title {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	
	.cookie-description {
		font-size: 0.8rem;
	}
	
	.cookie-btn {
		padding: 0.75rem 1.25rem;
		font-size: 0.8rem;
	}
	
	.cookie-preference-row {
		font-size: 0.8rem;
		padding: 0.875rem 0;
	}
	
	.cookie-preference-description {
		font-size: 0.7rem;
	}
}

@media (max-width: 480px) {
	.cookie-consent-box {
		padding: 1.75rem 1.25rem;
	}
	
	.cookie-logo {
		margin-bottom: 1.25rem;
	}
	
	.cookie-header {
		margin-bottom: 1.25rem;
	}
	
	.cookie-title {
		font-size: 0.95rem;
	}
	
	.cookie-description {
		font-size: 0.75rem;
	}
	
	.cookie-btn {
		padding: 0.7rem 1rem;
		font-size: 0.75rem;
	}
}