@import url('https://fonts.cdnfonts.com/css/optima');@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');@import url('https://fonts.cdnfonts.com/css/optima');










/* =================== 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 */
/* =================== END FONT IMPORTS =================== */
/* =================== 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 - Using proper Optima font */
    --font-primary: 'Optima', 'Times New Roman', serif;
    --font-secondary: 'Optima', 'Helvetica Neue', 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;
    
    
    
    /* 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;
    
    /* Container widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-xxl: 1536px;
  }
/* =================== SCROLLBAR REMOVAL =================== */
/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* ! 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;
}
.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-10{
    bottom: -2.5rem;
}
.-bottom-4{
    bottom: -1rem;
}
.-left-2{
    left: -0.5rem;
}
.-right-1{
    right: -0.25rem;
}
.-right-10{
    right: -2.5rem;
}
.-right-2{
    right: -0.5rem;
}
.-right-4{
    right: -1rem;
}
.-top-1{
    top: -0.25rem;
}
.-top-2{
    top: -0.5rem;
}
.-top-4{
    top: -1rem;
}
.bottom-0{
    bottom: 0px;
}
.bottom-4{
    bottom: 1rem;
}
.bottom-full{
    bottom: 100%;
}
.left-0{
    left: 0px;
}
.left-1\/2{
    left: 50%;
}
.left-2{
    left: 0.5rem;
}
.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-0\.5{
    right: 0.125rem;
}
.right-1{
    right: 0.25rem;
}
.right-2{
    right: 0.5rem;
}
.right-3{
    right: 0.75rem;
}
.right-4{
    right: 1rem;
}
.right-6{
    right: 1.5rem;
}
.top-0{
    top: 0px;
}
.top-0\.5{
    top: 0.125rem;
}
.top-1{
    top: 0.25rem;
}
.top-1\.5{
    top: 0.375rem;
}
.top-1\/2{
    top: 50%;
}
.top-16{
    top: 4rem;
}
.top-2{
    top: 0.5rem;
}
.top-2\.5{
    top: 0.625rem;
}
.top-4{
    top: 1rem;
}
.top-6{
    top: 1.5rem;
}
.top-\[var\(--header-height\)\]{
    top: var(--header-height);
}
.-z-10{
    z-index: -10;
}
.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;
}
.order-1{
    order: 1;
}
.order-2{
    order: 2;
}
.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-2{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.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-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-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-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-10{
    margin-top: 2.5rem;
}
.mt-16{
    margin-top: 4rem;
}
.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-\[3\/4\]{
    aspect-ratio: 3/4;
}
.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-6{
    height: 1.5rem;
}
.h-64{
    height: 16rem;
}
.h-72{
    height: 18rem;
}
.h-8{
    height: 2rem;
}
.h-80{
    height: 20rem;
}
.h-96{
    height: 24rem;
}
.h-\[400px\]{
    height: 400px;
}
.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-\[100px\]{
    min-height: 100px;
}
.min-h-\[300px\]{
    min-height: 300px;
}
.min-h-\[500px\]{
    min-height: 500px;
}
.min-h-screen{
    min-height: 100vh;
}
.w-0{
    width: 0px;
}
.w-0\.5{
    width: 0.125rem;
}
.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-28{
    width: 7rem;
}
.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-8{
    width: 2rem;
}
.w-96{
    width: 24rem;
}
.w-\[280px\]{
    width: 280px;
}
.w-\[400px\]{
    width: 400px;
}
.w-\[600px\]{
    width: 600px;
}
.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-\[20px\]{
    min-width: 20px;
}
.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-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;
}
.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));
}
.rotate-90{
    --tw-rotate: 90deg;
    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;
}
.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));
}
.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-16{
    gap: 4rem;
}
.gap-2{
    gap: 0.5rem;
}
.gap-3{
    gap: 0.75rem;
}
.gap-4{
    gap: 1rem;
}
.gap-6{
    gap: 1.5rem;
}
.gap-8{
    gap: 2rem;
}
.gap-x-4{
    -moz-column-gap: 1rem;
         column-gap: 1rem;
}
.gap-y-2{
    row-gap: 0.5rem;
}
.-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-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-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;
}
.break-words{
    overflow-wrap: break-word;
}
.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-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;
}
.border-0{
    border-width: 0px;
}
.border-2{
    border-width: 2px;
}
.border-4{
    border-width: 4px;
}
.border-b{
    border-bottom-width: 1px;
}
.border-b-2{
    border-bottom-width: 2px;
}
.border-l{
    border-left-width: 1px;
}
.border-l-2{
    border-left-width: 2px;
}
.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-\[\#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-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-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-orange-200{
    --tw-border-opacity: 1;
    border-color: rgb(254 215 170 / 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-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-l-\[\#714d38\]{
    --tw-border-opacity: 1;
    border-left-color: rgb(113 77 56 / 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;
}
.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-\[\#46473d\]\/5{
    background-color: rgb(70 71 61 / 0.05);
}
.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-\[\#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-\[\#f7f7f6\]{
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 246 / var(--tw-bg-opacity));
}
.bg-\[var\(--kelp-600\)\]{
    background-color: var(--kelp-600);
}
.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-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-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-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-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\/30{
    background-color: rgb(230 230 225 / 0.3);
}
.bg-kelp-100\/50{
    background-color: rgb(230 230 225 / 0.5);
}
.bg-kelp-200\/30{
    background-color: rgb(204 204 195 / 0.3);
}
.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-50\/50{
    background-color: rgb(247 247 246 / 0.5);
}
.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-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-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-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-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-white\/95{
    background-color: rgb(255 255 255 / 0.95);
}
.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-40{
    --tw-bg-opacity: 0.4;
}
.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-\[radial-gradient\(var\(--kelp-200\)_1px\2c transparent_1px\)\]{
    background-image: radial-gradient(var(--kelp-200) 1px,transparent 1px);
}
.bg-gradient-to-b{
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.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\/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-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-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-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-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-50\/30{
    --tw-gradient-from: rgb(247 247 246 / 0.3) 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-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);
}
.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-600{
    --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-emerald-100{
    --tw-gradient-to: #d1fae5 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-kelp-100{
    --tw-gradient-to: #e6e6e1 var(--tw-gradient-to-position);
}
.to-purple-100{
    --tw-gradient-to: #f3e8ff 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);
}
.bg-\[size\:40px_40px\]{
    background-size: 40px 40px;
}
.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 !important;
}
.\!p-1\.5{
    padding: 0.375rem !important;
}
.p-0{
    padding: 0px;
}
.p-0\.5{
    padding: 0.125rem;
}
.p-1{
    padding: 0.25rem;
}
.p-1\.5{
    padding: 0.375rem;
}
.p-12{
    padding: 3rem;
}
.p-2{
    padding: 0.5rem;
}
.p-3{
    padding: 0.75rem;
}
.p-4{
    padding: 1rem;
}
.p-5{
    padding: 1.25rem;
}
.p-6{
    padding: 1.5rem;
}
.p-8{
    padding: 2rem;
}
.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-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-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-32{
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.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-12{
    padding-right: 3rem;
}
.pr-3{
    padding-right: 0.75rem;
}
.pr-4{
    padding-right: 1rem;
}
.pr-6{
    padding-right: 1.5rem;
}
.pt-1{
    padding-top: 0.25rem;
}
.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-\[20vw\]{
    font-size: 20vw;
}
.text-\[8px\]{
    font-size: 8px;
}
.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-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-wider{
    letter-spacing: 0.05em;
}
.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\]\/40{
    color: rgb(70 71 61 / 0.4);
}
.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-600\)\]{
    color: var(--kelp-600);
}
.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-600\/60{
    color: rgb(37 99 235 / 0.6);
}
.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-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-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-600\/60{
    color: rgb(22 163 74 / 0.6);
}
.text-green-700{
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity));
}
.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-800{
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity));
}
.text-kelp-200{
    --tw-text-opacity: 1;
    color: rgb(204 204 195 / 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-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-600\/60{
    color: rgb(147 51 234 / 0.6);
}
.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-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-600\/60{
    color: rgb(202 138 4 / 0.6);
}
.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-gray-400::-moz-placeholder{
    --tw-placeholder-opacity: 1;
    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}
.placeholder-gray-400::placeholder{
    --tw-placeholder-opacity: 1;
    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}
.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));
}
.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-\[\#46473d\]\/20{
    --tw-shadow-color: rgb(70 71 61 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.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-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);
}
.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);
}
.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-md{
    --tw-backdrop-blur: blur(12px);
    -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;
}
.duration-700{
    transition-duration: 700ms;
}
.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);
}
/* Set body background color */
body {
  background-color: var(--kelp-50);
  color: var(--color-text-primary);
  overflow-x: hidden;
  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;
}
/* 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;
}
/* 2. Body level - balanced approach */
body {
  width: 100%;
  background-color: var(--kelp-50);
  color: var(--color-text-primary);
  overflow-x: hidden;
  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;
}
/* 3. Universal touch-action - allow scrolling */
* {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* 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;
}
/* 8. Mobile-specific optimizations */
@media screen and (max-width: 768px) {
  /* Force hardware acceleration */
  * {
    
    backface-visibility: hidden;
  }
  
  /* Limit animations for performance - but preserve tool text animations */
  *:not(.cursor-thinking-text):not(.tool-loading-minimal):not(.ai-loading-text-shimmer):not(.ai-search-text-shimmer):not(.search-phrase-shimmer) {
    animation-iteration-count: 1;
    
  }
  
  /* Remove backdrop filters for performance */
  * {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  /* Additional mobile zoom prevention */
  html, body {
    background-color: var(--kelp-50);
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
  }
  
  /* Allow scrolling only in specific containers */
  .smart-chat-messages,
  .shop-filter-content,
  .conversation-dropdown-content,
  .scrollable-content,
  .scrollable,
  [data-scrollable="true"] {
    touch-action: pan-y;
  }
}
/* 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;
  }
}
.last\:border-0:last-child{
    border-width: 0px;
}
.hover\:translate-x-1:hover{
    --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));
}
.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\:scale-\[1\.02\]:hover{
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    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\:transform:hover{
    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\]:hover{
    --tw-border-opacity: 1;
    border-color: rgb(113 77 56 / var(--tw-border-opacity));
}
.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-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-400:hover{
    --tw-border-opacity: 1;
    border-color: rgb(136 137 120 / 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-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-\[\#f7f7f6\]:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 246 / var(--tw-bg-opacity));
}
.hover\:bg-\[var\(--kelp-700\)\]:hover{
    background-color: var(--kelp-700);
}
.hover\:bg-amber-200:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(253 230 138 / 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-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-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-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-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-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-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-600:hover{
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / 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-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\:underline:hover{
    text-decoration-line: underline;
}
.hover\:no-underline:hover{
    text-decoration-line: none;
}
.hover\:opacity-100:hover{
    opacity: 1;
}
.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);
}
.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-kelp-500:focus{
    --tw-border-opacity: 1;
    border-color: rgb(109 110 94 / 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-\[\#d4af37\]\/50:focus{
    --tw-ring-color: rgb(212 175 55 / 0.5);
}
.focus\:ring-blue-500:focus{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / 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-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-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-50:disabled{
    opacity: 0.5;
}
.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\: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\:opacity-100{
    opacity: 1;
}
@media (min-width: 640px){
    .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\: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\:flex-row{
        flex-direction: row;
    }
    .md\:items-center{
        align-items: center;
    }
    .md\:gap-6{
        gap: 1.5rem;
    }
    .md\:rounded-lg{
        border-radius: 0.5rem;
    }
    .md\:text-5xl{
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-6xl{
        font-size: 3.75rem;
        line-height: 1;
    }
    .md\:text-7xl{
        font-size: 4.5rem;
        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\:grid-cols-6{
        grid-template-columns: repeat(6, 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;
}

.topbar-announcement-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 36px;
  overflow: hidden;
}

/* 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: hidden;
  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;
}

/* 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: 32px;
    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;
  }
  
  /* Adjust layout for mobile */
  .topbar-left {
    justify-content: flex-start;
    flex: 0 0 auto;
  }
  
  .topbar-center {
    flex: 1;
    margin: 0 10px;
  }
  
  .topbar-right {
    flex: 0 0 auto;
    gap: 8px;
  }
  
  .topbar-account {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
}

@media (max-width: 576px) {
  .topbar-container {
    padding: 0 15px;
  }
  
  .topbar-announcement {
    font-size: 0.65rem;
    padding: 2px 8px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .topbar-account {
    padding: 4px 8px;
  }
  
  .topbar-left {
    gap: 8px;
  }
  
  .topbar-center {
    margin: 0 5px;
  }
}

/* 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;
  }
}/* Ultra-Refined Search Experience */

/* Container */
.search-minimal-wrapper {
  padding: 20px 0 25px;
  margin: 0 auto;
  max-width: 1100px;
}

/* 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;
  transition: border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 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%);
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  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-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.15rem;
  color: var(--kelp-900);
  font-family: var(--font-heading);
  font-weight: 300;
  padding: 5px 0;
  letter-spacing: 0.4px;
}

.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: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.search-minimal-product {
  position: relative;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  border-radius: 6px;
  background-color: rgba(var(--kelp-50-rgb), 0.5);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.search-minimal-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  border-color: rgba(var(--kelp-200-rgb), 0.4);
}

.search-minimal-product-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  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;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.search-minimal-product:hover .search-minimal-product-image img {
  transform: scale(1.05);
}

.search-minimal-product-content {
  padding: 10px 12px;
}

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

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

/* 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;
  }
}/* Mobile Menu - Exact Match of Desktop Header & Submenu */
.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;
}

/* Menu Container - Exact replica of desktop header */
.mobile-menu-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 85vh; /* Reduced from 100vh to 85vh */
  z-index: 1200; /* Reduced to be above header but not interfere with other elements */
  background: linear-gradient(135deg, rgba(var(--kelp-50-rgb), 0.98), rgba(var(--kelp-100-rgb), 0.98) 80%);
 
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
}

/* Dark theme for hero section - exact same as footer */
.mobile-menu-container.hero-theme {
  background: linear-gradient(135deg, rgba(var(--kelp-950-rgb), 0.98), rgba(var(--kelp-900-rgb), 0.98) 80%);
  --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(--mobile-menu-text, var(--kelp-800)) !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(--mobile-menu-text, var(--kelp-800)) !important;
}

.mobile-menu-main-button:hover,
.mobile-menu-main-link:hover,
.mobile-menu-button:hover,
.mobile-menu-link:hover {
  background-color: var(--mobile-menu-hover-bg, rgba(var(--kelp-200-rgb), 0.3));
  color: var(--mobile-menu-hover-text, var(--kelp-900)) !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;
}

.mobile-menu-main-arrow {
  transition: all 0.3s ease-out;
  opacity: 0.7;
}

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

/* 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-200-rgb), 0.4);
}

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

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

.mobile-menu-icon-link:hover .mobile-menu-icon {
  color: var(--mobile-menu-hover-text, var(--kelp-900));
  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-600);
  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-900);
}

.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-800);
  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-700);
  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-50-rgb), 0.3);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  border-left: 2px solid transparent;
  min-height: 48px;
}

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

.mobile-link-icon {
  width: 4px;
  height: 4px;
  background-color: var(--gold);
  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(--gold);
  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 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s ease-out;
  background: none;
  border: none;
  border-left: 2px solid var(--gold);
  margin-top: 8px;
}

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

/* 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;
}

.mobile-menu-container {
  position: absolute;
  top: 46px; /* Fixed 46px top positioning */
  left: 0;
  right: 0;
  width: 100%;
  height: 80vh; /* 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;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  
}

.mobile-menu-container.open {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.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 */
}

.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-700);
  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-800);
  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-800);
  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-100-rgb), 0.2) 0%,
    rgba(var(--kelp-50-rgb), 0.1) 100%
  );
  color: var(--kelp-900);
  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;

  letter-spacing: 0.02em;
}

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

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

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

.mobile-nav-arrow {
  transform: rotate(-90deg);
  opacity: 0.7;
  color: var(--gold);
  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(--gold);
  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-200-rgb), 0.4);
  background: none;
  box-shadow: none;
}

/* Mobile categories grid - 2fr layout */
.mobile-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  gap: 12px;
  margin-bottom: 1rem;
}

/* Mobile collections grid - 2fr layout */
.mobile-collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  gap: 12px;
  margin-bottom: 1rem;
}

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

.mobile-category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.mobile-category-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.mobile-category-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 6px;
}

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

.mobile-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: 8px;
 
}

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

.mobile-category-name {
  color: white;
  font-size: 0.8rem;
  margin: 0;
  font-weight: 500;
  text-align: center;
  width: 100%;
  line-height: 1.2;
}

.mobile-view-all-container {
  text-align: center;
  margin-top: 1rem;
}

/* Mobile collection cards */
.mobile-collection-card {
  position: relative;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.mobile-collection-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.mobile-collection-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.mobile-collection-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 6px;
}

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

.mobile-collection-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: 8px;
  transition: background 0.3s ease;
}

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

.mobile-collection-name {
  color: white;
  font-size: 0.8rem;
  margin: 0;
  font-weight: 500;
  text-align: center;
  width: 100%;
  line-height: 1.2;
}

/* Mobile image section - similar to desktop */
.mobile-image-section {
  margin-top: 2rem;
}

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

.mobile-image-card {
  position: absolute;
  inset: 0;
  transition: all 0.5s ease-out;
}

.mobile-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease-out;
}

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

.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(--mobile-menu-text, var(--kelp-800));
  cursor: pointer;
  transition: all 0.3s ease-out;
  position: relative;
  box-shadow: none;
}

.mobile-menu-icon-button:hover {
  color: var(--mobile-menu-hover-text, var(--kelp-900));
  background: none;
  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(--mobile-menu-text, var(--kelp-800));
  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: none;
  border-left-color: var(--gold);
  color: var(--mobile-menu-hover-text, var(--kelp-900));
  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);
}

/* Submenu Container - Fixed at bottom of header */
.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;
}

/* Submenu Panel - Premium styling */
.mobile-submenu-panel {
  position: absolute;
  inset: 0;
  background: var(--kelp-50);
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 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);
}

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

.mobile-submenu-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.mobile-submenu-panel.visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.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: 50%;
  transform: translateY(-50%);
  background: rgba(var(--kelp-100-rgb), 0.3);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  padding: 0.5rem 0.75rem;
  color: var(--kelp-700);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  z-index: 10;
}

.mobile-submenu-back:hover {

  color: var(--kelp-800);
  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);
}

.mobile-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  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);
}

.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 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mobile-submenu-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.875rem;
  color: var(--kelp-700);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  background: rgba(var(--kelp-100-rgb), 0.15);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.08);
  font-size: 0.85rem;
  font-weight: 500;
}

.mobile-link-icon {
  width: 6px;
  height: 6px;
  background: var(--kelp-400);
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

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

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

.mobile-link-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.mobile-submenu-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 0.875rem 1rem;
  background: rgba(var(--kelp-200-rgb), 0.3);
  color: var(--kelp-800);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-weight: 500;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.2);
}

.mobile-submenu-view-all::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0;
  transition: all 0.3s ease;
}

.mobile-submenu-view-all:hover {
  background: rgba(var(--kelp-300-rgb), 0.4);
  color: var(--kelp-900);
  transform: translateY(-1px);
}

.mobile-submenu-view-all:hover::before {
  left: 25%;
  right: 25%;
  opacity: 0.6;
}



/* Responsive adjustments */
@media (max-width: 480px) {
  .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: 1fr;
  }
  
  .mobile-submenu-content {
    padding: 1rem;
    gap: 1.5rem;
  }
}

/* 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);
  }
}
/* 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: 4px;
  overflow: hidden;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.15);
  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: 2fr;
    gap: 8px;
  }

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

  .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-100) !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,
.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(135deg, rgba(var(--kelp-50-rgb), 0.98), rgba(var(--kelp-100-rgb), 0.98) 80%);
  --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: var(--mobile-submenu-bg, rgba(var(--kelp-950-rgb), 0.95));
  /* 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: 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(--mobile-menu-text, var(--kelp-600));
  font-family: var(--font-primary);
  font-weight: 500;
  position: relative;
  box-shadow: none;
  border-left: 2px solid transparent;
}

.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 {
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* 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: 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: 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-200);
}

.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-50-rgb), 0.98);
  border-color: rgba(var(--kelp-200-rgb), 0.3);
}

.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;
  }
} /* 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;
  --header-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --submenu-bg: var(--kelp-50);
  --header-bg-color: rgba(0, 0, 0, 0.1);
}

/* 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 */
}

.header-wrapper.is-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

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

/* Header scroll management - no body manipulation */
.header-wrapper {
  /* Removed contain property to prevent stacking context issues */
}

.header {
  width: 100%;
  transition: var(--header-transition);
  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);
  transition: var(--header-transition);
  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 */
.header-main:after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 10%;
  right: 10%;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 20px 0 rgba(var(--kelp-900-rgb), 0.15);
  z-index: -1;
}

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

/* 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%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.header-hamburger-icon {
  transition: color 0.3s ease;
}

.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%;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.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 {
  transition: all 0.3s ease;
  color: var(--kelp-800);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 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;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateX(-50%) translateZ(0);
  -webkit-transform: translateX(-50%) translateZ(0);
  transition: top 0.4s ease;
}

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

.header-logo-image {
  height: 85px;
  transition: height 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

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

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

.header-logo-icon {
  color: var(--kelp-900);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.header-logo-text {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--kelp-900);
  letter-spacing: 3px;
  font-family: var(--font-heading);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Desktop navigation */
.header-desktop-nav {
  display: flex;
  gap: 30px;
  align-items: center;
  transition: var(--header-transition);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  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;
  transition: color 0.3s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 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(--kelp-950) !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(--kelp-950) !important;
}

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

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

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

/* 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%;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.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: 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 - 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 */
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.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;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  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;
  transition: all 0.3s ease;
}

.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);
  transition: all 0.4s ease;
}

.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;
  transition: transform 0.8s ease;
}

.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);
  transition: all 0.4s ease;
}

.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;
  transition: transform 0.8s ease;
}

.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;
    transition: height 0.4s ease;
  }
  
  .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;
    transition: height 0.4s ease;
  }
  
  .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 Accent Line for Header - unique styling with reverse animation */
.header-accent-line {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -15px;
  z-index: 2;
}

.header-accent-line-inner {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent, 
    rgba(var(--kelp-400-rgb), 0.4),
    rgba(var(--kelp-500-rgb), 0.7),
    rgba(var(--kelp-400-rgb), 0.4),
    transparent
  );
  width: 100%;
  transition: width 0.8s ease;
}

.header-accent-diamond {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: rgba(var(--kelp-500-rgb), 0.8);
  transform: rotate(45deg);
  top: 50%;
  left: 50%;
  margin-top: -3px;
  margin-left: -3px;
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(var(--kelp-500-rgb), 0.3);
}

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

.is-scrolled .header-accent-diamond {
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
}

/* 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);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.3);
}

/* 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 {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.header-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--header-bg-color);
  /* backdrop-filter: blur(20px); */
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  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 {
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: background-color, border-color;
}

/* Nav link transitions */
.header-nav-link {
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-nav-link::after {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Optimized mobile menu transitions */
.header-hamburger {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reduced transition count for performance */
.header-icon-button,
.header-icon-link {
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 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 */
.header-nav-button,
.header-nav-link,
.header-icon,
.header-logo-text,
.header-logo-icon,
.header-count-badge,
.header-accent-line-inner,
.header-accent-diamond {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 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(--kelp-900) !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(--kelp-900) !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(--kelp-900) !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 */
/* English */
.header-wrapper.over-hero-en .header-nav-link,
.header-wrapper.over-hero-en .header-nav-button,
.header-wrapper.over-hero-en .header-nav-text {
  color: var(--kelp-100) !important;
}

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

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

.header-wrapper.not-over-hero-en .header-nav-link:hover,
.header-wrapper.not-over-hero-en .header-nav-button:hover,
.header-wrapper.not-over-hero-en .header-nav-button:hover .header-nav-text {
  color: var(--kelp-900) !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(--kelp-900) !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(--kelp-900) !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(--kelp-900) !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(--kelp-900) !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(--kelp-900) !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(--kelp-900) !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(--kelp-900) !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(--kelp-900) !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 - exact same as ProductDesignUpload */
.luxury-submenu-container {
  background: linear-gradient(135deg,
    rgba(var(--kelp-50-rgb), 0.985) 0%,
    rgba(var(--kelp-100-rgb), 0.975) 100%);
  
  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: var(--header-height);
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100;
  border: none;
  will-change: clip-path, opacity;
  pointer-events: auto; /* Enable clicks on the container */
  height: auto;
  height: var(--luxury-submenu-height);
  max-height: calc(95vh - var(--header-height));
  display: flex;
  flex-direction: column;
  transform: translateZ(0); /* Force hardware acceleration and prevent shifts */
  position: relative; /* Ensure stable positioning during animations */
}

/* 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);
  /* backdrop-filter: blur(10px);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
  border: none;
}

.luxury-submenu-container:not(.over-hero) .luxury-submenu-header {
  background-color: rgba(var(--kelp-50-rgb), 0.985);
  /* backdrop-filter: blur(12px);
  -webkit-/* backdrop-filter: blur(12px);
}

.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;

  &::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 16px;
    background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.8), transparent);
    opacity: 0.9;
    display: block !important;
  }

  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.5s cubic-bezier(0.19, 1, 0.22, 1);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(var(--gold-rgb), 0);
}

.luxury-submenu-close::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;
}

.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: 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: rgba(var(--gold-rgb), 0.7);
  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%);
}

.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: 40px 60px;
  overflow-y: auto;
  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;
}

.luxury-submenu-section .luxury-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;
}

/* Lists - Organized layout with scrolling for many items */
.luxury-submenu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gold-rgb), 0.3) transparent;
}

.luxury-submenu-item {
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: none;
  border: none;
  border-left: 2px solid transparent;
}

.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.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.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; /* Card-like ratio 14:9 */
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.luxury-submenu-item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.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.3s cubic-bezier(0.19, 1, 0.22, 1);
  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: 400px;
  border-radius: 16px;
  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: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.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.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.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: 32px;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

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

.luxury-submenu-category-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.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.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: static; /* Static position */
}

.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.3s ease;
}

.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;
  }

  .luxury-submenu-categories {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

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

  .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 {
    max-height: 250px;
  }

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

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

  .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;
  }

  .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-title::after {
  background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.9), transparent);
}

.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-section .luxury-submenu-title::after {
  background: linear-gradient(to right, var(--gold), rgba(var(--gold-rgb), 0.5));
}

.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);
}

.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 {
  /* Define CSS variable with default value */
  --footer-inset-h: 0%;

  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: 5px 5px 0 0; /* Rounded top corners only */
  padding-bottom: 0; /* No bottom padding as bottom section is separate */
  
  /* Simplified clip-path that works consistently */
  clip-path: inset(0 var(--footer-inset-h) 0 var(--footer-inset-h) round 5px 5px 0 0);
  
  /* Let browser decide when to optimize */
  will-change: auto;
}

/* 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; /* Top right bottom left - generous bottom padding */
}

/* Elegant Accent Line - Simplified with RTL Support */
.footer-accent-line {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.footer-accent-line-left,
.footer-accent-line-right {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-light));
  flex-grow: 1; /* Let lines fill available space */
  max-width: 50%; /* Ensure they don't overlap diamond */
  /* Removed animation properties */
}

.footer-accent-line-right {
  background: linear-gradient(to left, transparent, var(--gold-light));
}

/* RTL support for accent lines */
[dir="rtl"] .footer-accent-line-left {
  background: linear-gradient(to left, transparent, var(--gold-light));
}

[dir="rtl"] .footer-accent-line-right {
  background: linear-gradient(to right, transparent, var(--gold-light));
}

.footer-accent-diamond {
  position: relative;
  width: 8px;
  height: 8px;
  background-color: var(--gold-light);
  transform: rotate(45deg);
  margin: 0 10px; /* Keep spacing */
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.3);
  z-index: 1;
  flex-shrink: 0; /* Prevent diamond from shrinking */
}

/* Content Layout with improved padding distribution */
.footer-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3.5rem; /* Increased from 60px to 3.5rem for better spacing */
  padding: 3rem 2rem 5rem 2rem; /* Top right bottom left - larger bottom padding */
  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); /* Slightly darker than before */
  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;
}

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

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

.footer-heading:hover::after {
  width: 100%;
}

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

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

.footer-link {
  color: var(--kelp-200); /* Slightly darker than before */
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  display: inline-block;
  font-size: 0.85rem;
  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;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.footer-link:hover {
  color: var(--kelp-100);
  padding-left: 15px;
}

.footer-link:hover::before {
  width: 10px;
  opacity: 0.6;
}

/* Bottom Section with centered logo - Now outside footer with lighter background */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Apply new padding */
  padding: 2rem 6rem 2rem 6rem; /* Added bottom padding for symmetry */
  box-sizing: border-box;
  background-color: var(--kelp-50); 
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 0 0 5px 5px;
  /* Remove the box shadow */
  /* box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.03); */
}

.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); 
  transition: transform 0.3s ease;
}

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

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

/* Darker background for social icons */
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* Slightly smaller */
  height: 32px; /* Slightly smaller */
  border-radius: 50%;
  background-color: var(--kelp-900); /* Dark background */
  color: var(--kelp-50); /* Light icon color for contrast */
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: hidden;
}

.footer-social-link:hover {
  background-color: var(--kelp-950); /* Even darker on hover */
  color: var(--gold-light); /* Gold icon on hover */
  transform: translateY(-2px); /* Reduced hover effect */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

.footer-copyright {
  color: var(--kelp-700); /* Darker text for better contrast */
  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);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

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

.footer-input-group input {
  flex: 1;
  background-color: rgba(var(--kelp-900-rgb), 0.5);
  border: none;
  color: var(--kelp-100);
  padding: 10px 45px 10px 15px;
  font-size: 0.85rem;
  outline: none;
  width: 100%;
}

/* Custom send button - Adjusted Size */
.footer-submit-button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent;
  border: none;
  padding: 0 12px; /* Slightly reduced padding */
  color: var(--kelp-300);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-submit-button:hover {
  color: var(--gold-light);
}

.footer-submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Custom stylized send arrow - Adjusted Size */
.custom-send-button {
  position: relative;
  width: 16px; /* Made smaller */
  height: 16px; /* Made smaller */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.footer-submit-button:hover .custom-send-button {
  transform: translateX(3px);
}

.send-arrow {
  position: relative;
  width: 14px; /* Adjusted width */
  height: 1.5px; /* Made thicker */
  background-color: currentColor;
  transform-origin: right center;
}

.send-arrow::before,
.send-arrow::after {
  content: '';
  position: absolute;
  width: 4px; /* Adjusted width */
  height: 1.5px; /* Match thickness */
  background-color: currentColor;
  right: -1px; /* Adjusted position */
  transform-origin: right center;
}

.send-arrow::before {
  /* Adjusted transform based on new thickness */
  transform: rotate(45deg) translateY(-2.5px); 
}

.send-arrow::after {
   /* Adjusted transform based on new thickness */
  transform: rotate(-45deg) translateY(2.5px);
}

.loading-dots {
  letter-spacing: 2px;
  /* animation: loadingDots 1.4s infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes loadingDots {
  0%, 20% { opacity: 0.2; }
  40% { opacity: 1; }
  100% { opacity: 0.2; }
}

.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
  );
  /* animation: shimmerEffect 2s infinite linear; - DISABLED FOR PERFORMANCE */
}

@keyframes shimmerEffect {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.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);
  /* animation: pulseEffect 2s infinite ease-in-out; - DISABLED FOR PERFORMANCE */
}

@keyframes pulseEffect {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

.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%;
}

/* Enhance input styling */
.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);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  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;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .footer-container, .footer-bottom {
    /* Keep container/bottom slightly inset relative to footer */
    width: calc(100% - 40px); /* Use calc for better control with padding */
    max-width: 1100px; /* Still respect overall max-width */
    margin-left: auto;
    margin-right: auto;
  }
  .footer-container {
    padding: 0 2rem 3.5rem 2rem; /* Slightly reduced padding */
  }
   .footer-bottom {
    padding: 1.5rem 4rem; /* Reduced padding */
  }
  
  .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; /* Reduced from 40px to 2.5rem */
  }
  
  .footer-brand {
    max-width: 100%;
  }
  .footer-container, .footer-bottom {
    width: calc(100% - 30px); /* Further reduce inset */
  }
   .footer-container {
    padding: 0 1.75rem 3rem 1.75rem;
  }
   .footer-bottom {
    padding: 1.5rem 3rem; /* Further reduced padding */
  }
}

@media (max-width: 768px) {
  .footer-wrapper {
    margin-top: 60px;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.25rem; /* Convert 30px 20px to rem */
    
  }
  .footer-link{
    font-size: 10px;
  }
  
  .footer-content {
    padding: 2rem 1.25rem 3.5rem 1.25rem;
    border-left: none; /* Remove side borders on mobile */
    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; /* Increased gap slightly */
    justify-items: center;
    padding: 1.5rem 1rem; /* Further reduced padding for mobile */
    width: calc(100% - 20px); /* Reduce width on mobile */
    border-radius: 0; /* No radius needed if full width */
    max-width: 320px; /* Constrain max width on mobile */
    margin: 0 auto; /* Center the container */
  }
  .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: 60px; }

  .footer-container {
    padding: 0 1rem 2.5rem 1rem; /* Reduced padding for mobile */
    width: calc(100% - 20px); /* Reduce width on mobile */
    max-width: 360px; /* Constrain max width on mobile */
    margin: 0 auto; /* Center the container */
  }
   .footer {
    /* Still allow animation on mobile, but with a small max value */
    --footer-inset-h: 0%; /* Initial value */
    border-radius: 0;
  }
  .footer-description{
    font-size: 10px;
  }
  .footer-heading {
    font-size: 12px
  }

  .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-links {
    grid-gap: 1.5rem 1rem; /* Convert 25px 15px to rem */
    
  }
  .footer-link{
    font-size: 10px;
  }
  .footer-content {
    padding: 1.75rem 1rem 3rem 1rem;
  }
  
  .footer-bottom {
    padding: 1.2rem 1.5rem; /* Further reduced padding */
  }
  
  .footer-accent-line { height: 50px; }

  .footer-container {
    padding: 0 1.25rem 2rem 1.25rem;
  }

}

/* Touch device optimizations */
@media (hover: none) {
  .footer-link:active {
    color: var(--kelp-100);
    padding-left: 15px;
  }
  
  .footer-link:active::before {
    width: 10px;
    opacity: 0.6;
  }
  
  .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%;
  will-change: transform;
  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;
  will-change: transform, filter;
}

.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 */
} 


/* src/styles/theme.css - Premium Theme System */
/* Premium Components */
/* Premium Button */
.premium-button {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  padding: 16px 42px;
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  cursor: none;
  z-index: 1;
  transition: color var(--transition-medium), border-color var(--transition-medium);
}
.premium-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-accent-primary);
  z-index: -1;
  transition: width var(--transition-medium);
}
.premium-button:hover {
  color: var(--kelp-950);
  border-color: var(--color-accent-primary);
}
.premium-button:hover::before {
  width: 100%;
}
.premium-button.secondary {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}
.premium-button.secondary::before {
  background-color: var(--color-text-primary);
}
.premium-button.secondary:hover {
  color: var(--color-background-primary);
  border-color: var(--color-text-primary);
}
/* Custom Cursor */
.custom-cursor {
  position: fixed;
  width: 50px;
  height: 50px;
  border: var(--border-width-thin) solid var(--color-accent-primary);
  border-radius: var(--border-radius-full);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: width var(--transition-medium), 
              height var(--transition-medium), 
              opacity var(--transition-medium),
              background-color var(--transition-medium);
  mix-blend-mode: exclusion;
}
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--color-accent-secondary);
  border-radius: var(--border-radius-full);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10000;
  transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease;
}
.cursor-active {
  width: 70px;
  height: 70px;
  background-color: rgba(212, 175, 55, 0.15);
  border: var(--border-width-thin) solid var(--color-accent-secondary);
  opacity: 0.8;
}
.cursor-text {
  position: fixed;
  color: var(--color-accent-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10001;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--transition-fast);
}
.cursor-text.visible {
  opacity: 1;
}
/* Scroll Progress Indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
}
/* Image Hover Effects */
.hover-zoom {
  overflow: hidden;
  transition: var(--transition-medium);
  position: relative;
}
.hover-zoom::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 28, 23, 0.2);
  opacity: 0;
  transition: opacity var(--transition-medium);
  z-index: 1;
}
.hover-zoom:hover::after {
  opacity: 1;
}
.hover-zoom img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-zoom:hover img {
  transform: scale(1.12) rotate(1deg);
}
/* Section Styling */
.section {
  position: relative;
  padding: var(--spacing-xxl) 5%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.section-bg-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/texture.png');
  background-size: 400px;
  opacity: 0.03;
  pointer-events: none;
  z-index: -1;
}
.section-heading {
  color: var(--color-text-primary);
  font-size: 4rem;
  font-weight: var(--font-weight-light);
  margin-bottom: var(--spacing-lg);
  position: relative;
  display: inline-block;
  letter-spacing: var(--letter-spacing-wide);
}
.section-heading::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 60px;
  height: 1px;
  background-color: var(--color-accent-primary);
  transition: width var(--transition-slow);
}
.section-heading:hover::after {
  width: 100%;
}
.section-subheading {
  color: var(--color-text-secondary);
  font-size: 1.3rem;
  line-height: var(--line-height-relaxed);
  max-width: 700px;
  margin-bottom: var(--spacing-lg);
  font-weight: var(--font-weight-light);
}
/* Media Queries */
@media (max-width: 1200px) {
  .section-heading {
    font-size: 3.5rem;
  }
}
@media (max-width: 768px) {
  .section {
    padding: var(--spacing-xl) 5%;
  }
  
  .section-heading {
    font-size: 3rem;
  }
  
  .section-subheading {
    font-size: 1.15rem;
  }
}
@media (max-width: 480px) {
  .section-heading {
    font-size: 2.5rem;
  }
  
  .section-subheading {
    font-size: 1.1rem;
  }
  
  .custom-cursor,
  .cursor-dot,
  .cursor-text {
    display: none;
  }
  
 
  
  .premium-button {
    padding: 14px 32px;
    font-size: 0.9rem;
  }
}
/* Luxury vertical line animation for section headings */
@keyframes luxuryLineReveal {
  0% { 
    height: 0; 
    opacity: 0; 
    background: linear-gradient(to bottom, transparent, var(--gold));
  }
  30% { 
    height: 15px; 
    opacity: 0.4; 
    background: linear-gradient(to bottom, transparent, var(--gold));
  }
  50% { 
    height: 20px; 
    opacity: 0.8; 
    background: linear-gradient(to bottom, rgba(var(--gold-rgb), 0.3), var(--gold));
  }
  70% { 
    height: 22px; 
    opacity: 0.9; 
    background: linear-gradient(to bottom, transparent, var(--gold));
  }
  100% { 
    height: 20px; 
    opacity: 0.7; 
    background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.8), transparent);
    box-shadow: 0 0 5px rgba(var(--gold-rgb), 0.2);
  }
}
/* Luxury pulse animation for the heading line */
@keyframes luxuryLinePulse {
  0%, 100% { 
    opacity: 0.7; 
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.8), transparent);
  }
  50% { 
    opacity: 0.9; 
    height: 22px;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
  }
}
/* Apply to all heading elements with the vertical line */
.collections-heading::after,
.showcase-heading::after,
.category-heading::after,
.trending-heading::after,
.story-title::after,
.promises-heading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0;
  animation: 
    luxuryLineReveal 1.5s 0.5s forwards cubic-bezier(0.19, 1, 0.22, 1),
    luxuryLinePulse 8s 2s infinite ease-in-out;
  box-shadow: 0 0 5px rgba(var(--gold-rgb), 0.1);
  will-change: opacity, height, background;
}
/* Add a subtle diamond accent at the top of the line */
.collections-heading::before,
.showcase-heading::before,
.category-heading::before,
.trending-heading::before,
.story-title::before,
.promises-heading::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg) scale(0);
  width: 3px;
  height: 3px;
  border: 1px solid rgba(var(--gold-rgb), 0.6);
  opacity: 0;
  animation: diamondAppear 1.5s 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes diamondAppear {
  0% { transform: translateX(-50%) rotate(45deg) scale(0); opacity: 0; }
  100% { transform: translateX(-50%) rotate(45deg) scale(1); opacity: 0.8; }
}
/* Optimize images (keep lazy loading default) */
img {
  max-width: 100%;
  height: auto;
  display: block;
  loading: lazy;
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;
}
/* Eager load critical images via JS/HTML attributes */
img[loading="eager"] {
  content-visibility: visible;
}
/* Optimize images (keep lazy loading default) */
img {
  max-width: 100%;
  height: auto;
  display: block;
  loading: lazy;
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;
}
/* Eager load critical images via JS/HTML attributes */
img[loading="eager"] {
  content-visibility: visible;
}
/* 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;
  will-change: transform;
  backface-visibility: hidden; /* Prevent flickering */
}
.collection-slide {
  flex-shrink: 0;
  will-change: transform, opacity;
}
/* 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;
  will-change: transform, opacity;
}.brand-story-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 1;
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
  will-change: auto;
}

.brand-story-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a8a99e' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.2;
  z-index: -1;
}

.brand-story-text p {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
}

@media (max-width: 768px) {
  .brand-story-section {
    padding: 5rem 0;
  }
}

/* When section is visible and actively animating */
.brand-story-section.is-visible {
  z-index: 2;
  /* Increase rendering priority */
  content-visibility: visible;
  contain: layout style;
}

/* After animations are complete, free up resources */
.brand-story-section.animations-complete {
  /* Release GPU resources */
  will-change: auto;
  
  /* Clean up and disable animations */
}
.brand-story-section.animations-complete .path-dot,.brand-story-section.animations-complete .connection-path {
    animation: none !important;
    transition: none !important;
  }
/* Keep GPU acceleration only for currently visible content */
.brand-story-section.animations-complete .path-dot:not(:hover),.brand-story-section.animations-complete .connection-path:not(:hover) {
    transform: none !important;
    filter: none !important;
  }

/* Improve scroll performance */
:is(.is-scrolling .brand-story-section) .path-dot,:is(.is-scrolling .brand-story-section) .connection-path {
    animation-play-state: paused !important;
    transition: none !important;
  }

/* Low performance devices optimizations */
.low-performance-device .brand-story-section {
  /* Simplify rendering */
  background-image: none !important;
  
  /* Reduce animations */
}
:is(.low-performance-device .brand-story-section) .path-dot,:is(.low-performance-device .brand-story-section) .story-path-container {
    display: none !important;
  }
/* Use simpler animations */
:is(.low-performance-device .brand-story-section) .content-title .char,:is(.low-performance-device .brand-story-section) .content-text .line {
    opacity: 0;
    transform: none !important;
    transition: opacity 0.3s ease-out !important;
  }
:is(.low-performance-device .brand-story-section) .content-title.is-visible .char,:is(.low-performance-device .brand-story-section) .content-text.is-visible .line {
    opacity: 1 !important;
  } /* Advanced performance optimizations for high-end animations */

/* Optimizations for scrolling state */
.is-scrolling {
  pointer-events: none;
}

.is-scrolling .parallax-element,
.is-scrolling .gsap-marker-scroller-start,
.is-scrolling .gsap-marker-scroller-end {
  will-change: none !important;
  transition: none !important;
  animation: none !important;
}

/* Optimizations based on device performance tiers */
.low-performance-device .split-chars .char,
.low-performance-device .path-dot,
.low-performance-device .intro-shimmer,
.low-performance-device .reflection-effect,
.low-performance-device .parallax-bg {
  display: none !important;
}

.low-performance-device .section-parallax {
  transform: none !important;
}

.low-performance-device .brand-story-section {
  background-image: none !important;
}

.low-performance-device .has-bg-effect::before,
.low-performance-device .has-bg-effect::after {
  display: none !important;
}

/* Simple fade for low-end devices */
.low-performance-device .animate-fade-up,
.low-performance-device .animate-fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.low-performance-device .animate-fade-up.is-visible,
.low-performance-device .animate-fade-in.is-visible {
  opacity: 1;
}

/* Medium performance compromises */
.medium-performance-device .complex-animation {
  transition-duration: 0.6s !important;
  animation-duration: 0.6s !important;
}

.medium-performance-device .stagger-animation > * {
  transition-delay: 0s !important;
  animation-delay: 0s !important;
}

/* Force hardware acceleration on critical elements only */
.hero-section,
.primary-content,
.main-nav,
.sticky-element,
.scroll-indicator,
.cta-button {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Reduce repaints - specify exact size for dynamic elements */
.dynamic-content {
  contain: strict;
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Optimize rendering by preventing paint during scroll */
.scroll-optimize {
  transition: transform 0.1s linear !important;
  animation: none !important;
}

/* Layout optimizations */
.content-block {
  contain: layout style;
}

.low-performance-device .content-block {
  contain: strict;
}

/* During resize operations, minimize animation work */
.is-resizing * {
  animation-play-state: paused !important;
  transition: none !important;
}

/* Fix position: sticky performance issues */
.sticky-container {
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Reduce paint area for semi-transparent elements */
.has-opacity {
  isolation: isolate;
}

/* High performance transforms */
.performance-transform {
  transform: translate3d(0, 0, 0) !important;
}

/* Reduce impact of box-shadow */
.low-performance-device .has-shadow {
  box-shadow: none !important;
}

/* Reduce blur-filter impact */
.low-performance-device .has-blur {
  filter: none !important;
}

/* Optimize font rendering */
body {
  text-rendering: optimizeSpeed;
}

/* Performance class to apply to elements that should animate only when visible */
.performance-visible {
  visibility: visible;
  content-visibility: auto;
}

.performance-hidden {
  visibility: hidden;
  content-visibility: hidden;
} /* 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 - Updated as a true connector */
.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 */
  will-change: opacity;
  contain: layout style paint;
}

/* 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 */
.divider-accent-line {
  height: 1px;
  background: linear-gradient(
    to var(--direction, right),
    transparent 0%,
    rgba(var(--kelp-300-rgb), 0.2) 20%,
    rgba(var(--kelp-500-rgb), 0.5) 50%,
    rgba(var(--kelp-300-rgb), 0.2) 80%,
    transparent 100%
  );
  flex: 1;
  transform-origin: center;
  will-change: width;
  position: relative;
}

/* 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-400-rgb), 0.3);
  transform: rotate(45deg) scale(0.8);
  opacity: 0.6;
}

.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 */
.divider-center {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: auto;
  z-index: 5;
}

/* Morph shape container with color blending and blur effects */
.divider-morph-shape {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--kelp-50-rgb), 0.1); /* Starting background color */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform-origin: center;
  will-change: clip-path, transform, background-color, backdrop-filter;
  /* Refined gradient and glow */
  background: radial-gradient(
    circle at center,
    rgba(var(--kelp-50-rgb), 0.25) 0%,
    rgba(var(--kelp-100-rgb), 0.15) 100%
  );
  /* Blur effects for luxury feel */
  /* backdrop-filter: blur(5px);
  -webkit-/* backdrop-filter: blur(5px);
  /* Enhanced shadow effects */
  box-shadow: 
    0 0 25px rgba(var(--kelp-400-rgb), 0.15),
    inset 0 0 15px rgba(var(--kelp-200-rgb), 0.1);
  overflow: hidden;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

/* Add glow effect for logo state */
.divider-morph-shape::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    circle at center,
    rgba(var(--kelp-300-rgb), 0.15),
    transparent 70%
  );
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.8s ease;
  z-index: 0;
}

/* Text mode style with different background and blur */
.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 with enhanced styling */
.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;
  will-change: opacity;
  /* Add subtle inner light effect */
  box-shadow: inset 0 0 10px rgba(var(--kelp-100-rgb), 0.1);
}

/* Logo container */
.divider-logo-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
  z-index: 2;
}

/* Logo styling */
.divider-logo {
  transform: scale(0.9);
  opacity: 0.9;
}

/* Text container for morphing */
.divider-text-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
  z-index: 1;
}

/* Text styling */
.divider-text {
  font-family: var(--font-primary);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: var(--font-weight-light);
  color: var(--kelp-500);
  white-space: nowrap;
  text-transform: uppercase;
}

/* Update the shine styling */
.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;
  will-change: opacity, transform;
  pointer-events: none;
  z-index: 3;
  filter: blur(2px);
}

/* No automatic animation - controlled by GSAP */
.divider-shape-shine {
  animation: none;
}

/* Hover effects */
.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;
  }
}

/* Add these styles for the dark theme divider */

/* 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-800-rgb), 0.2) 20%, /* Darker kelp shade */
    rgba(var(--kelp-900-rgb), 0.5) 50%, /* Darkest kelp shade */
    rgba(var(--kelp-800-rgb), 0.2) 80%,
    transparent 100%
  );
  /* Adjust drop shadow to a subtle dark shadow */
  filter: drop-shadow(0 0 3px rgba(var(--kelp-950-rgb), 0.3));
  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-950-rgb), 0.8);
  /* Remove gold shadow, add subtle dark shadow */
  box-shadow: 0 0 5px rgba(var(--kelp-950-rgb), 0.2);
  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: radial-gradient(
    circle at center,
    rgba(var(--kelp-950-rgb), 0.9) 0%,
    rgba(var(--kelp-950-rgb), 0.8) 100%
  );
  /* backdrop-filter: blur(12px); */
  /* -webkit-backdrop-filter: blur(12px); */
  box-shadow:
    0 0 30px rgba(var(--gold-rgb), 0.2), /* Gold shadow remains */
    inset 0 0 20px rgba(var(--gold-rgb), 0.1); /* Gold inset remains */
}

/* Refined golden border - Remains Gold */
.section-divider.theme-dark .divider-shape-border {
  border-color: var(--gold);
  border-width: 1.5px;
  box-shadow: 0 0 15px rgba(var(--gold-rgb), 0.25);
}

/* Premium gold text - Remains Gold */
.section-divider.theme-dark .divider-text {
  color: var(--gold);
  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(--gold-rgb), 0.15),
    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(--gold-rgb), 0.05) 20%,
    var(--gold-light) 50%,
    rgba(var(--gold-rgb), 0.05) 80%,
    transparent 100%
  );
  filter: blur(0.5px); /* Crisper for more luxurious feel */
  opacity: 0.7;
}

/* Text mode with luxury dark background - Remains Dark Kelp/Gold */
.section-divider.theme-dark.text-mode-active .divider-morph-shape {
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-950-rgb), 0.95) 0%,
    rgba(var(--kelp-900-rgb), 0.85) 100%
  );
  box-shadow:
    0 0 30px rgba(var(--gold-rgb), 0.15),
    inset 0 0 20px rgba(var(--gold-rgb), 0.1);
}

/* Gold logo accent - Remains Gold */
.section-divider.theme-dark .divider-logo {
  filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), 0.5));
}

/* 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;
} /* 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;
  contain: layout style paint;
  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%);
  /* Cold kelp background gradient instead of gold */
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-950-rgb), 0.95) 0%,
    rgba(var(--kelp-900-rgb), 0.85) 100%
  );
  /* Enhanced shadow for depth with cold colors */
  box-shadow: 
    0 0 30px rgba(var(--kelp-400-rgb), 0.2),
    inset 0 0 15px rgba(var(--kelp-300-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;
  contain: layout paint;
  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 kelp tint to expanded lines instead of gold */
  background: linear-gradient(
    to var(--direction, right),
    transparent 0%,
    rgba(var(--kelp-400-rgb), 0.1) 20%,
    rgba(var(--kelp-500-rgb), 0.3) 50%,
    rgba(var(--kelp-400-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(--kelp-400);
  transition: opacity 0.5s ease;
}

/* Make text display more elegant with cold colors */
.hero-feature-divider .divider-text {
  color: var(--kelp-500);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  text-align: center;
  width: 100%; /* Use full width */
  display: block; /* Ensure block display */
  z-index: 10;
  padding: 0;
  /* Prevent text selection to maintain clean look */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Better spacing */
  margin: 0 auto; /* Center text horizontally */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform: translateX(0);
}

/* 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: -30px;
  }
  
  .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(--kelp-500);
}

.hero-feature-divider[data-keyword="Elegance"] .divider-text {
  color: var(--kelp-400);
  letter-spacing: 0.2em; /* More spacious */
}

.hero-feature-divider[data-keyword="Craftsmanship"] .divider-text {
  color: var(--kelp-600);
  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(--kelp-950-rgb), 0.95) 0%,
    rgba(var(--kelp-900-rgb), 0.85) 100%
  );
}

.hero-feature-divider[data-keyword="Elegance"].text-mode-active .divider-morph-shape {
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-950-rgb), 0.9) 0%,
    rgba(var(--kelp-900-rgb), 0.8) 100%
  );
}

.hero-feature-divider[data-keyword="Craftsmanship"].text-mode-active .divider-morph-shape {
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-900-rgb), 0.95) 0%,
    rgba(var(--kelp-950-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;
  contain: layout style paint;
  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 {
  contain: layout paint;
  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;
} /* Base hero section styling with darker background */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: visible; /* Allow divider to extend outside */ /* Darker background using kelp-950 */
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px; /* Add space for divider to overlap */
  margin-bottom: -40px; /* Pull up next section to meet divider */
  
  /* Prevent loading shifts */
  min-height: 100vh;
  contain: layout style paint;
  content-visibility: auto;
  
  /* Prevent color flashing */
  background-color: var(--kelp-950) !important;
  
  /* Ensure proper z-index layering */
  z-index: 1;
}

/* 3D overlay scroll management */
.full-viewport-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--kelp-950-rgb), 0.95);
  /* /* /* backdrop-filter: blur(20px); - DISABLED FOR PERFORMANCE */
  /* -webkit-/* /* backdrop-filter: blur(20px); - DISABLED FOR PERFORMANCE */
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(100%);
}

.full-viewport-overlay.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.full-viewport-container {
  width: 100%;
  max-width: 1200px;
  height: calc(100vh - 80px); /* Account for header height */
  max-height: 800px;
  background: var(--kelp-50);
  border-radius: 20px 20px 0 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -20px 40px rgba(var(--kelp-950-rgb), 0.3);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.full-viewport-overlay.visible .full-viewport-container {
  transform: translateY(0);
}

.full-viewport-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-50-rgb), 0.9),
    rgba(var(--kelp-50-rgb), 0.7)
  );
}


/* Background elements - enhanced for darker backdrop */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 45%, 
    rgba(var(--gold-rgb), 0.04) 0%, /* Reduced gold intensity */
    rgba(0, 0, 0, 0.2) 40%, /* Simplified gradient */
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Refined background pattern */
.hero-bg-path {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.02;
  background-size: 100px 100px;
  background-image: 
    linear-gradient(to right, rgba(var(--gold-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--gold-rgb), 0.05) 1px, transparent 1px);
}

/* Horizontal accent lines */
.hero-accent-line {
  position: absolute;
  height: 1px;
  opacity: 0.8;
}

/* Enhance accent lines to be more visible against darker background */
.hero-accent-line-top {
  top: 15%;
  left: 5%;
  width: 30%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(var(--gold-rgb), 0.25) 40%, /* Stronger gold accent */
    rgba(var(--gold-rgb), 0.7) 100%);
}

.hero-accent-line-bottom {
  bottom: 15%;
  right: 5%;
  width: 30%;
  background: linear-gradient(90deg, 
    rgba(var(--gold-rgb), 0.7) 0%, /* Stronger gold accent */
    rgba(var(--gold-rgb), 0.25) 60%, 
    transparent 100%);
}

/* Title wrapper with improved positioning */
.title-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 0;
  overflow: visible;
  transform-style: preserve-3d;
  
  /* Prevent loading shifts */
  min-height: 6rem; /* Reserve space for title */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Enhanced title styling for luxury appearance */
.hero-title {
  font-size: clamp(1.8rem, 8vw, 6rem); /* Made smaller */
  font-weight: 600; /* HEAVIER WEIGHT */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 0.9;
  text-align: center;
  width: 100%;
  overflow: visible;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* Darker kelp color to match hero patterns */
  color: var(--kelp-300);
  
  /* Initial state for GSAP animation - opacity 0 */
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  
  /* Smooth movement animations - only for users who prefer motion */
  will-change: transform, filter, opacity;
  
  /* Enhanced blur effect for depth */
  filter: blur(0.5px);
  
  /* Premium animation properties */
  transform-style: preserve-3d;
  perspective: 1000px;
  
  /* Prevent loading shift */
  min-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Container for title */
.title-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  width: 100%;
  overflow: visible;
  opacity: 0; /* Initial state for GSAP animation */
}

/* Individual title words */
.hero-title .title-word {
  display: inline-block;
  position: relative;
  padding: 0 0.05em;
}

/* Performance optimizations */
.hero-title,
.hero-image-container,
.hero-left-content,
.hero-right-content {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Word-level styling with variations */
.hero-title .title-word-bold {
  font-weight: 700;
}

.hero-title .title-word-light {
  font-weight: 200;
}

.hero-title .title-word-medium {
  font-weight: 400;
}

.hero-title .title-word-spaced {
  letter-spacing: 0.2em;
}

/* Character-level styling */
.hero-title .char {
  display: inline-block;
  position: relative;
  transform-origin: bottom center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* Premium animation properties */
  will-change: opacity, transform;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Special accent characters */
.hero-title .char-accent {
  color: var(--gold);
  font-weight: bold;
}

/* Title flourish styling */
.title-flourish {
  position: relative;
  width: 200px;
  height: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-flourish::before,
.title-flourish::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 70px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  top: 50%;
  opacity: 0.6;
}

.title-flourish::before {
  left: 0;
  transform: translateX(-100%);
}

.title-flourish::after {
  right: 0;
  transform: translateX(100%);
}

.flourish-diamond {
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.8;
}

/* Main container with improved layout */
.hero-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0 2rem;
  overflow: visible;
  
  /* Prevent loading shifts */
  min-height: 100vh;
  contain: layout;
  
  /* Ensure proper layering */
  pointer-events: auto;
  
  /* Prevent flashing during intro */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  
  /* Ensure it doesn't interfere with portal overlay */
  /* Removed isolation: isolate to prevent stacking context issues */
}

/* 3D viewer container - larger and with more top margin */
.hero-3d-container {
  position: absolute;
  top: 50%; /* More top margin */
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  width: 400px; /* Increased size to prevent clipping */
  height: 400px; /* Fixed height to prevent shifting */ /* Ensure minimum height */
  z-index: 4; /* Lower than title but higher than content */
  pointer-events: auto;
  max-width: 90vw; /* Responsive max width */
  max-height: 90vh; /* Responsive max height */
  
  /* Fixed: Always visible with stable positioning */
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  
  /* Premium animation properties with performance optimization */
  will-change: opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint; /* Performance containment */
  content-visibility: auto; /* Modern performance optimization */
  
  /* Enhanced clip-path animation properties */
  transform-origin: center center;
  perspective: 1000px;
  
  /* Smooth transition for when intro completes */
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  
  /* Prevent loading shift */
  min-width: 400px;
  min-height: 400px;
}

/* Removed home-intro reference to prevent conflicts with new intro system */

/* Clip-path animation for intro */
.hero-3d-container.hero-3d-clipped {
  clip-path: inset(50% 0% 50% 0%);
  animation: hero3dReveal 1.4s ease-out 0.4s forwards;
}

@keyframes hero3dReveal {
  0% {
    clip-path: inset(50% 0% 50% 0%);
    opacity: 0;
    scale: 0.9;
  }
  100% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
    scale: 1;
  }
}





/* Canvas container - fixed size to prevent clipping */
.hero-3d-viewer {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
  overflow: visible; /* Allow canvas to extend beyond container */
  background: transparent;
  /* Ensure the canvas has enough space */
  min-width: 350px;
  min-height: 350px;
  max-height: 600px; /* Prevent excessive height */
  top: 18%;
  
  /* Premium animation properties */
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* Prevent loading shifts */
  contain: layout style paint;
  content-visibility: auto;
}

/* Ensure canvas elements don't get clipped */
.hero-3d-viewer canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  /* Ensure canvas can render beyond container bounds */
  clip-path: none !important;
  overflow: visible !important;
  
  /* Prevent loading shifts */
  min-width: 350px !important;
  min-height: 350px !important;
}

/* Three.js container styling */
.hero-3d-viewer .three-jewelry-viewer {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: visible !important;
  /* Ensure no clipping occurs */
  clip-path: none !important;
  transform: none !important;
  
  /* Prevent loading shifts */
  min-width: 350px !important;
  min-height: 350px !important;
}

/* Canvas overlay for hero animations */
.hero-3d-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none; /* Allow interaction with canvas below */
  overflow: visible;
}



.hero-3d-viewer {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
  overflow: visible; /* Fixed overflow issue */
  background: transparent;
}

/* Image container with enhanced styling */
.hero-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Enhanced image frame */
.hero-image-frame {
  display: none;
}

/* Main image styling */
.hero-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}

/* Image reflection container */
.hero-image-reflection-container {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60px;
  z-index: 1;
  pointer-events: none;
}

/* Image reflection effect */
.hero-image-reflection {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  border-radius: 20px;
  transform: scaleY(-1);
  filter: blur(1px);
}

/* Image glow effect */
.hero-image-glow {
  display: none;
}

/* Diagonal accent lines */
.image-diagonal-accent {
  display: none;
}

.image-diagonal-top-left {
  top: -20px;
  left: -20px;
  transform: rotate(-45deg);
}

.image-diagonal-top-right {
  top: -20px;
  right: -20px;
  transform: rotate(45deg);
}

.image-diagonal-bottom-left {
  bottom: -20px;
  left: -20px;
  transform: rotate(45deg);
}

.image-diagonal-bottom-right {
  bottom: -20px;
  right: -20px;
  transform: rotate(-45deg);
}

/* Frame corner accents */
.frame-corner {
  display: none;
}

.top-left {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
}

.top-right {
  top: -10px;
  right: -10px;
  border-left: none;
  border-bottom: none;
}

.bottom-left {
  bottom: -10px;
  left: -10px;
  border-right: none;
  border-top: none;
}

.bottom-right {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
}

/* Image shine effect */
.image-shine {
  display: none;
}

/* Connecting lines */
.connecting-line {
  display: none;
}

.left-connecting-line {
  top: 50%;
  left: -100px;
  width: 80px;
  transform: translateY(-50%);
}

.right-connecting-line {
  top: 50%;
  right: -100px;
  width: 80px;
  transform: translateY(-50%);
}

/* RTL support for connecting lines */
[dir="rtl"] .left-connecting-line {
  left: auto;
  right: -100px;
}

[dir="rtl"] .right-connecting-line {
  right: auto;
  left: -100px;
}

/* Hero content layout - FIXED */
.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block; /* Changed from flex to prevent layout issues */
  padding: 2rem 4rem;
  z-index: 5;
  pointer-events: none;
}

.hero-content > * {
  pointer-events: auto;
}

/* Fixed Left Content - Product Info Only */
.hero-left-content {
  position: absolute;
  top: 40%;
  left: 2rem;
  transform: translateY(-50%); /* Center vertically */
  display: flex;
  flex-direction: column;
  max-width: 360px;
  width: 360px; /* Fixed width to prevent movement */
  opacity: 1; /* Fixed: Always visible */
  z-index: 6;
  background: none;
  
  /* Stabilization properties */
  contain: layout; /* Prevent layout thrashing */
  will-change: opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* Smooth transition for when intro completes */
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-product-info {
  padding: 0.8rem;
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.03) 0%,
    rgba(var(--kelp-900-rgb), 0.08) 100%
  );
  border-radius: 6px;
  border-left: 2px solid var(--gold);
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.hero-product-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.hero-3d-view-button {
  background: rgba(var(--gold-rgb), 0.1);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  color: var(--gold);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
 
  position: relative;
  overflow: hidden;
}



.hero-product-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.hero-product-name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: white;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-price-display {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.hero-currency {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 500;
}

.hero-price {
  font-size: 1.5rem;
  font-weight: 300;
  color: white;
  font-family: 'Optima', sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Fixed Features Container - Bottom Left with Typing Animation */
.hero-features-container {
  position: absolute;
  bottom: 4rem;
  left: 2rem;
  max-width: 280px;
  z-index: 6;
  opacity: 0; /* Initial state for GSAP */
  transform: translateY(20px); /* Initial state for GSAP */
  min-height: 60px; /* Minimum height to accommodate text */
  background: transparent;
  
  /* Premium animation properties */
  will-change: opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* Smooth transition for when intro completes */
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

/* New inline text structure */
.hero-inline-text {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  max-width: 500px;
  padding: 0 2rem;
  
  /* Initial state for GSAP */
  opacity: 0;
  transform: translateY(30px);
  
  /* Smooth animations */
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-inline-text-content {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--kelp-200);
  line-height: 1.6;
  letter-spacing: 0.02em;
  
  /* Typing animation cursor */
  border-right: 2px solid var(--gold-400);

}

@keyframes blink {
  0%, 50% { border-color: var(--gold-400); }
  51%, 100% { border-color: transparent; }
}

/* Fixed typing animation for features */
.hero-feature-item {
  display: block; /* Changed from flex to block */
  background: transparent;
  border: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(-30px);
  pointer-events: none;
  z-index: 1;
  min-height: 20px;
  white-space: nowrap;
}

/* TYPING ANIMATION CLASSES */
.hero-feature-item.typing-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}



@keyframes typingPulse {
  0%, 100% { 
    text-shadow: 0 0 5px rgba(var(--gold-rgb), 0.3);
  }
  50% { 
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.6);
  }
}

/* Removed icon styling since we're not using it */

.hero-feature-text-inline {
  display: block; /* Changed from inline-block to block */
  font-size: 0.65rem;
  font-weight: 500;
  color: white;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px; /* Increased max-width */
  opacity: 1; /* Fixed: Ensure text is visible */
  position: absolute; /* Added absolute positioning */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10; /* Ensure it's above other elements */
  background: transparent;
  padding: 0;
  border: none;
  outline: none;
  text-align: left;
  font-family: var(--font-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Hero feature content positioning */
.hero-feature-content {
  position: absolute;
  bottom: 4rem;
  left: 2rem;
  max-width: 280px;
  z-index: 6;
  opacity: 1;
  min-height: 60px;
  background: transparent;
}

/* New typing text structure */
.hero-typing-container {
  position: absolute;
  bottom: 8%;
  left: 5%;
  width: 35%;
  z-index: 10;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.hero-typing-container.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-typing-text {
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  font-weight: 400;
  color: rgba(var(--kelp-200-rgb), 0.8);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: left;
  min-height: 2em;
  display: flex;
  align-items: center;
  position: relative;
}

.hero-typing-text span {
  display: inline;
}

.hero-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--gold);
  margin-left: 0px; /* Remove gap */
 
  position: relative;
  top: 0;
  vertical-align: baseline;
  flex-shrink: 0;
  transform: translateX(-1px); /* Fix cursor positioning */
}

@keyframes typingBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Mobile positioning for typing container */
@media (max-width: 767px) {
  .hero-typing-container {
    position: absolute;
    top: -35% ;
    left: 5%;
    right: 5%;
    width: auto;
 
  }
}

/* ENHANCED Right Content - Luxurious Variant Selection */
.hero-right-content {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  transform: translateY(20px) translateX(30px); /* Start below and to the right */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Changed from center to flex-start */
  align-items: center;
  max-width: 300px;
  width: 300px; /* Fixed width to prevent movement */
  padding: 1.5rem;
  opacity: 1; /* Fixed: Always visible */
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  border-radius: 12px;
  z-index: 6;
  
  /* Stabilization properties */
  contain: layout; /* Prevent layout thrashing */
  will-change: opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* Smooth transition for when intro completes */
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.variant-selection-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* Further reduced gap */
  width: 100%;
  min-height: 160px; /* Reduced min-height */
  height: auto; /* Let content determine height */
  position: relative;
  justify-content: flex-start;
}

.variant-selection-title {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

.variant-selection-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Luxurious Material Selector with Flex Display */
.variant-material-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  position: relative;
  opacity: 1;
  visibility: visible;
}

/* Animated Connecting Line Container - Elegant Gradient */
.variant-connection-line {
  position: absolute;
  top: 4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom, 
    var(--gold) 0%,
    rgba(var(--gold-rgb), 0.8) 20%,
    rgba(var(--kelp-600-rgb), 0.6) 40%,
    rgba(var(--kelp-600-rgb), 0.4) 60%,
    rgba(var(--kelp-600-rgb), 0.2) 80%,
    transparent 100%
  );
  transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  clip-path: inset(100% 0 0 0);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
  
  /* Premium animation properties */
  will-change: height, clip-path;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.variant-connection-line.active {
  height: 160px;
  clip-path: inset(0 0 0 0);
}

/* Main features display - AT BOTTOM of color swatches with CSS ANIMATION */
.main-features-minimal {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 3rem;
  padding: 0.5rem 0;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  bottom: 0;
  
  /* Premium animation properties */
  will-change: opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.main-features-minimal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Feature items animation */
.main-feature-minimal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.4rem 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* CSS ANIMATION FOR SMOOTH APPEARANCE */
  opacity: 0;
  transform: translateX(-20px);
  animation: featureItemAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--animation-delay, 0) * 0.15s);
  text-align: left;
  
  /* Premium animation properties */
  will-change: opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes featureItemAppear {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.main-feature-minimal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.4rem 0;
  transition: all 0.3s ease;
}

.main-feature-line {
  width: 1px;
  height: 100%;
  min-height: 40px;
  background: linear-gradient(to bottom, 
    var(--gold) 0%,
    rgba(var(--gold-rgb), 0.6) 50%,
    transparent 100%
  );
  flex-shrink: 0;
  margin-right: 0.3rem;
}

.main-feature-text {
  flex: 1;
}

.main-feature-minimal-title {
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
  margin: 0 0 0.15rem 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.main-feature-minimal-description {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.2;
  margin: 0;
  font-weight: 300;
}

/* Enhanced Material Button - Different Color Patterns */
.hero-variant-button {
  padding: 0.8rem 2rem;
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.03) 0%,
    rgba(var(--kelp-900-rgb), 0.08) 100%
  );
  border: none;
  border-left: 2px solid transparent;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-width: 160px;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(var(--kelp-900-rgb), 0.1);
  /* /* backdrop-filter: blur(12px);
  /* Fixed: Remove initial hidden state */
  opacity: 1;
  transform: translateX(0);
  
  /* Premium animation properties */
  will-change: opacity, transform, background, box-shadow;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* SHIMMER EFFECT */
.hero-variant-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent
  );
  transition: left 0.6s ease;
}

.hero-variant-button:hover {
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.08) 0%,
    rgba(var(--kelp-800-rgb), 0.12) 100%
  );
  border-left-color: rgba(var(--gold-rgb), 0.6);
  color: white;
  transform: translateY(-1px);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 3px 10px rgba(var(--kelp-900-rgb), 0.2);
}

.hero-variant-button:hover::before {
  left: 100%;
}

.hero-variant-button--selected {
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.15) 0%,
    rgba(var(--kelp-800-rgb), 0.15) 100%
  );
  border-left: 2px solid var(--gold);
  color: white;
  font-weight: 300;
  box-shadow: 
    0 0 15px rgba(var(--gold-rgb), 0.3),
    0 4px 15px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
 
}

/* Animated Color Selection Container - CSS ANIMATION */
.color-selection-wrapper {
  position: relative;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
  overflow: hidden;
  margin-top: 1.5rem;
  width: 100%;
  min-height: 0;
  /* Prevent layout shift */
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Premium animation properties */
  will-change: opacity, transform, max-height;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.color-selection-wrapper.visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px;
  transition-delay: 0.3s;
}

/* Visible state - smooth animation from top to bottom */
.luxury-color-option.visible {
  opacity: 1;
  transform: scale(1);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Exit animation for color swatches - smooth collapse */
.luxury-color-option.exiting {
  opacity: 0;
  transform: scaleY(0) translateY(-10px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -1rem; /* Counteract the flexbox gap */
  border: none;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

/* Horizontal Color Options Layout */
.color-options-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
  position: relative;
  min-height: 60px; /* Reduced height for horizontal layout */
  max-height: 80px; /* Prevent shifting on desktop */
  overflow: hidden;
}

/* Remove vertical line for horizontal layout */
.color-options-grid::before {
  display: none;
}

.luxury-color-option {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  background-color: var(--color);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* /* backdrop-filter: blur(3px);
    z-index: 5; /* Reduced to prevent stacking context issues */
  opacity: 0;
  transform: scale(0.8);
  
  /* Premium animation properties */
  will-change: opacity, transform, box-shadow;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.luxury-color-option::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1px;
  padding: 1px;
  background: linear-gradient(45deg, transparent, var(--gold), transparent);
  -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: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.luxury-color-option:hover {
  transform: scale(1.1);
  border-color: var(--kelp-600);
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.luxury-color-option:hover::before {
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.luxury-color-option.active {
  border-color: var(--gold);
  transform: scale(1.1);
  box-shadow: 
    0 0 10px rgba(var(--gold-rgb), 0.4),
    0 3px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 5; /* Reduced to prevent stacking context issues */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.luxury-color-option.active::before {
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.color-option-name {
  position: absolute;
  left: -80px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
 
}

.luxury-color-option:hover .color-option-name {
  opacity: 1;
}

/* Remove old color selection section */
.hero-color-selection {
  display: none;
}

.hero-features-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: normal; /* Removed italic */
}

/* Custom Luxury Add to Cart Button */
.model-cta-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  opacity: 1; /* Fixed: Always visible */
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --glow-intensity {
  syntax: '<number>';
  initial-value: 0.3;
  inherits: false;
}

@keyframes rotateGlow {
  to {
    --angle: 360deg;
  }
}

@keyframes pulseGlow {
  0%, 100% { 
    --glow-intensity: 0.3;
  }
  50% { 
    --glow-intensity: 0.8;
  }
}

.model-add-to-cart-button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  background: transparent;
  border: none;
  position: relative;
  border-radius: 3px;
  color: white;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 140px;
  justify-content: center;
  overflow: visible; /* Allow glow to extend */
  
  /* CSS Custom Properties for mouse tracking */
  --mouse-x: 0px;
  --mouse-y: 0px;
  --is-mouse-over: 0;
  
  /* Premium animation properties */
  will-change: transform, filter;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Mouse-following glow effect */
.model-add-to-cart-button::before {
  content: '';
  position: absolute;
  inset: -4px; /* Thicker glow area */
  background: radial-gradient(
    circle 30px at var(--mouse-x) var(--mouse-y), /* Fixed size circle following mouse */
    rgba(var(--gold-rgb), calc(0.9 * var(--is-mouse-over))) 0%,
    rgba(var(--gold-rgb), calc(0.6 * var(--is-mouse-over))) 40%,
    rgba(var(--gold-rgb), calc(0.3 * var(--is-mouse-over))) 70%,
    transparent 100%
  );
  filter: blur(8px); /* Reduced blur for more precise glow */
  border-radius: 8px;
  z-index: -2;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: var(--is-mouse-over);
  pointer-events: none; /* Ensure no interference with button interaction */
}

/* Default rotating glow (separate element) */
.button-default-glow {
  position: absolute;
  inset: -4px;
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    transparent 15%,
    rgba(var(--gold-rgb), 0.9) 25%,
    rgba(var(--gold-rgb), 0.7) 35%,
    transparent 45%,
    transparent 100%
  );
  filter: blur(12px);
  border-radius: 8px;
  /* animation: none; /* animation: rotateGlow 12s linear infinite - DISABLED FOR PERFORMANCE */
  z-index: -2;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-default-glow.hidden {
  opacity: 0;
}

/* Button background, placed on top of the glow */
.model-add-to-cart-button::after {
  content: '';
  position: absolute;
  inset: 1px; /* This creates the "border" width */
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.7) 0%,
    rgba(var(--kelp-950-rgb), 0.9) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  border-radius: 2px; /* Slightly smaller than the button's radius */
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.model-add-to-cart-button:hover {
  transform: translateY(-3px) scale(1.02);
}

.model-add-to-cart-button:hover::before {
  animation-duration: 3s, 1.5s;
  filter: blur(16px); /* Even thicker blur on hover */
  inset: -6px; /* Larger glow area on hover */
}

.model-add-to-cart-button:hover::after {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.6) 0%,
    rgba(var(--kelp-900-rgb), 0.95) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

.model-add-to-cart-button:active {
  transform: translateY(-1px) scale(0.98);
}

.model-add-to-cart-button:active::before {
  filter: blur(8px);
  inset: -2px;
}

.button-text {
  position: relative;
  z-index: 2;
}

.button-icon {
  position: relative;
  z-index: 2;
  color: var(--gold);
}

/* Animated Vertical Line Container */
.explore-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* Animated Vertical Line */
.explore-vertical-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, 
    var(--gold) 0%,
    rgba(var(--gold-rgb), 0.8) 30%,
    rgba(var(--gold-rgb), 0.6) 60%,
    rgba(var(--gold-rgb), 0.4) 80%,
    transparent 100%
  );
  position: relative;
  /* animation: verticalLinePulse 5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
}

/* Removed the extra dot shape from the vertical line */

@keyframes verticalLinePulse {
  0%, 100% { 
    opacity: 0.4;
    transform: scaleY(1);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
  }
  50% { 
    opacity: 1;
    transform: scaleY(1.1);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5);
  }
}

/* Removed dotPulse animation since dot was removed */

/* Explore 3D Button at Bottom of 3D Container */
.hero-3d-explore-container {
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 20;
}

.hero-3d-explore-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.hero-3d-explore-button {
  padding: 0.4rem 1rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-3d-explore-button:hover {
  color: var(--gold);
  transform: translateY(-1px);
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  right: 4rem; /* Moved to right */
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 3;
  opacity: 0.6; /* More subtle */
  transition: opacity 0.3s ease;
}

.scroll-indicator-text {
  font-size: 0.7rem; /* Smaller */
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scroll-indicator-line {
  width: 1px;
  height: 25px; /* Shorter */
  background: linear-gradient(to bottom, var(--gold), transparent);
  /* animation: none; /* animation: scrollIndicator 4s infinite - DISABLED FOR PERFORMANCE */
}

@keyframes scrollIndicator {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Luxury frame container */
.luxury-frame-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  
  /* Premium animation properties */
  will-change: opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.luxury-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: all 0.8s ease;
  
  /* Premium animation properties */
  will-change: width, height, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.luxury-accent-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s ease;
  
  /* Premium animation properties */
  will-change: opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.line-top {
  top: 10%;
  left: 10%;
  width: 0;
  height: 1px;
}

.line-bottom {
  bottom: 10%;
  right: 10%;
  width: 0;
  height: 1px;
}

.line-left {
  left: 10%;
  top: 10%;
  width: 1px;
  height: 0;
}

.line-right {
  right: 10%;
  bottom: 10%;
  width: 1px;
  height: 0;
}

/* RTL support for decorating lines */
[dir="rtl"] .line-top {
  left: auto;
  right: 10%;
}

[dir="rtl"] .line-bottom {
  right: auto;
  left: 10%;
}

[dir="rtl"] .line-left {
  left: auto;
  right: 10%;
}

[dir="rtl"] .line-right {
  right: auto;
  left: 10%;
}

.dot-top-left {
  top: 8%;
  left: 8%;
}

.dot-top-right {
  top: 8%;
  right: 8%;
}

.dot-bottom-left {
  bottom: 8%;
  left: 8%;
}

.dot-bottom-right {
  bottom: 8%;
  right: 8%;
}

/* RTL support for decorating dots */
[dir="rtl"] .dot-top-left {
  left: auto;
  right: 8%;
}

[dir="rtl"] .dot-top-right {
  right: auto;
  left: 8%;
}

[dir="rtl"] .dot-bottom-left {
  left: auto;
  right: 8%;
}

[dir="rtl"] .dot-bottom-right {
  right: auto;
  left: 8%;
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* Large Desktop (1400px and up) */
@media (min-width: 1400px) {
  .hero-container {
    max-width: 1600px;
  }
  
  .hero-3d-container {
    width: 700px;
    height: 700px;
    min-height: 700px;
  }
  
  .hero-3d-viewer {
    min-width: 600px;
    min-height: 600px;
    max-height: 700px;
  }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
  .hero-3d-container {
    width: 550px;
    height: 550px;
    min-height: 550px;
  }
  
  .hero-3d-viewer {
    min-width: 450px;
    min-height: 450px;
    max-height: 550px;
  }
  
  .hero-content {
    padding: 2rem 3rem;
  }
}

/* Tablet Landscape (1024px - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
  .hero-3d-container {
    width: 500px;
    height: 500px;
    min-height: 500px;
    top: 50%;
  }
  
  .hero-3d-viewer {
    min-width: 400px;
    min-height: 400px;
    max-height: 500px;
    top: 10%;
  }
  
  .hero-content {
    padding: 1.5rem 2rem;
  }
  
  .hero-left-content {
    max-width: 320px;
    width: 320px;
    top: 40%;
    left: 1.5rem;
  }
  
  .hero-right-content {
    max-width: 260px;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 1rem;
  }
  
  .hero-features-container {
    max-width: 200px;
    bottom: 1.5rem;
    left: 1.5rem;
  }
  
  .hero-title {
    font-size: clamp(2.8rem, 9vw, 6.5rem);
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-3d-container {
    width: 450px;
    height: 450px;
    min-height: 450px;
    top: 50%;
  }
  
  .hero-3d-viewer {
    min-width: 350px;
    min-height: 350px;
    max-height: 450px;
    top: 8%;
  }
  
  .hero-content {
    padding: 1rem 1.5rem;
  }
  

  
  .hero-right-content {
    max-width: 220px;
    bottom: 1rem;
    right: 1rem;
    padding: 0.8rem;
  }
  
  .hero-features-container {
    max-width: 180px;
    bottom: 1rem;
    left: 1rem;
  }
  
  .hero-title {
    font-size: clamp(2rem, 7vw, 4.5rem);
  }
  
  .hero-product-name {
    font-size: 0.9rem;
  }
  
  .hero-price {
    font-size: 1.3rem;
  }
  
  .variant-selection-title {
    font-size: 0.9rem;
  }
  
  .variant-button {
    padding: 0.6rem 1.5rem;
    font-size: 0.7rem;
    min-width: 140px;
  }
  
  .model-add-to-cart-button {
    padding: 0.7rem 1.2rem;
    font-size: 0.75rem;
  }
}

/* Mobile Large (480px - 767px) */
@media (max-width: 767px) and (min-width: 480px) {
  .hero-section {
    height: 100vh;
    padding-bottom: 20px;
    margin-bottom: -20px;
  }
  
  .hero-3d-container {
    width: 450px;
    height: 450px;
    min-height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    max-width: 90vw;
    max-height: 90vh;
  }
  
  .hero-3d-viewer {
    min-width: 400px;
    min-height: 400px;
    max-height: 450px;
    top: 0;
    left: 0;
    transform: translate(0, 0) !important;
  }
  
  .hero-content {
    padding: 0.8rem 1rem;
  }
  
  .hero-left-content {
    position: absolute;
    top: 21.5%;
    left: 50%;
    transform: translateX(-50%) !important;
    max-width: 290px;
    margin: 0;
    opacity: 1;
    z-index: 10;
  }
  
  /* Center hero-product-info properly */
  .hero-product-info {
    text-align: center;
    padding: 0.6rem;
  }
  
  .hero-product-name {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
  }
  
  .hero-price {
    font-size: 1.1rem;
  }
  
  /* Center hero-right-content with absolute positioning and transform */
  .hero-right-content {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }
  
  /* Center variant selection container */
  .variant-selection-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    gap: 0.8rem;
  }
  
  /* Make variant selection title smaller for mobile */
  .variant-selection-title {
    font-size: 0.7rem !important;
    margin-bottom: 0.5rem;
  }
  
  /* Make variant buttons smaller and more compact */
  .variant-material-selector {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .hero-variant-button {
    padding: 0.4rem 0.8rem;
    font-size: 0.6rem;
    min-width: 90px;
    flex: 1;
    max-width: 100px;
  }
  
  .color-options-grid {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0;
  }
  
  .color-options-grid::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, 
      transparent 0%,
      rgba(var(--gold-rgb), 0.4) 20%,
      rgba(var(--kelp-600-rgb), 0.6) 50%,
      rgba(var(--gold-rgb), 0.4) 80%,
      transparent 100%
    );
    box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.2);
  }
  
  /* Make main features smaller */
  .main-features-minimal {
    margin-top: 1.5rem;
    gap: 0.5rem;
  }
  
  .main-feature-minimal-item {
    gap: 0.5rem;
    padding: 0.2rem 0;
  }
  
  .main-feature-minimal-title {
    font-size: 0.55rem;
  }
  
  .main-feature-minimal-description {
    font-size: 0.5rem;
  }
  
  .hero-features-container {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%) !important;
    max-width: 220px;
    margin: 0;
    opacity: 0; /* Initial state for GSAP */
    transform: translateX(-50%) translateY(20px) !important; /* Initial state for GSAP */
    z-index: 10;
  }
  
  /* Mobile inline text positioning */
  .hero-inline-text {
    position: absolute;
    top: 120px; /* Position at top of product name container */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    max-width: 90%;
    padding: 0 1rem;
  }
  
  .hero-inline-text-content {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  /* Ensure inline text is visible on mobile */
  .hero-feature-text-inline {
    font-size: 0.6rem;
    max-width: 220px;
    opacity: 1 !important;
    color: white !important;
    z-index: 15;
  }
  
  .hero-title {
    font-size: clamp(3.2rem, 10vw, 6rem);
    letter-spacing: 0.1em;
  }
  
  .hero-product-name {
    font-size: 0.8rem;
  }
  
  .hero-price {
    font-size: 1.2rem;
  }
  
  .variant-selection-title {
    font-size: 0.8rem;
  }
  
  /* Make variant buttons flex in one row with same size */
  .variant-material-selector {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
  }
  
  .hero-variant-button {
    padding: 0.5rem 1.2rem;
    font-size: 0.65rem;
    min-width: 120px;
    flex: 1;
    max-width: 140px;
  }
  
  /* Make color options horizontal for mobile */
  .color-options-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
  }
  
  .color-options-grid::before {
    display: none; /* Remove vertical line for horizontal layout */
  }
  
  /* Hide vertical line for color swatches in mobile */
  .variant-connection-line {
    display: none;
  }
  
  .model-add-to-cart-button {
    padding: 0.6rem 1rem;
    font-size: 0.7rem;
  }
  
  .hero-3d-explore-container {
    bottom: 12%;
  }
  
  .hero-3d-explore-line {
    width: 40px;
  }
  
  .hero-3d-explore-button {
    font-size: 0.6rem;
    padding: 0.3rem 0.8rem;
  }
  
  .model-cta-container {
    bottom: 3%;
  }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) and (min-width: 320px) {
  .hero-section {
    height: 100vh;
    padding-bottom: 15px;
    margin-bottom: -15px;
  }
  
  .hero-3d-container {
    width: 360px;
    height: 360px;
    min-height: 360px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    max-width: 90vw;
    max-height: 90vh;
  }
  
  .hero-3d-viewer {
    min-width: 320px;
    min-height: 320px;
    max-height: 360px;
    top: 0;
    left: 0;
    transform: translate(0, 0) !important;
  }
  
  /* Hide 3D description on mobile */
  .hero-3d-description .hero-description {
    display: none;
  }
  
  .hero-content {
    padding: 0.5rem 0.8rem;
  }
  
  .hero-left-content {
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translateX(-50%) !important;
    max-width: 290px;
    margin: 0;
    opacity: 1;
    padding: 0.4rem;
    z-index: 10;
  }
  
  /* Center hero-product-info properly */
  .hero-product-info {
    text-align: left;
    white-space: nowrap;
    padding: 0.5rem;
  }
  
  .hero-product-name {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }
  
  .hero-price {
    font-size: 1rem;
  }
  
  
  
  /* Center variant selection container */
  .variant-selection-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    gap: 0.6rem;
    z-index: 4;
  }
  
  /* Make variant selection title smaller for mobile */
  .variant-selection-title {
    display: none;
  }
  
  /* Make variant buttons smaller and more compact */
  .variant-material-selector {
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .hero-variant-button {
    padding: 0.3rem 0.6rem;
    font-size: 0.55rem;
    min-width: 80px;
    flex: 1;
    max-width: 90px;
  }
  
  /* Move color selection to right side of 3D container */
  .color-selection-wrapper {
    position: absolute;
    left: 50%;
    bottom: 13rem;
    transform: translateY(-50%) !important;
    margin-top: 0;
    z-index: 15;
  }
  
  /* Center hero-right-content with absolute positioning and transform */
  .hero-right-content {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }
  .color-options-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0;
  }
  
  .color-options-grid::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, 
      transparent 0%,
      rgba(var(--gold-rgb), 0.4) 20%,
      rgba(var(--kelp-600-rgb), 0.6) 50%,
      rgba(var(--gold-rgb), 0.4) 80%,
      transparent 100%
    );
    box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.2);
  }
  
  /* Make main features smaller */
  .main-features-minimal {
    margin-top: 1.2rem;
    gap: 0.4rem;
  }
  
  .main-feature-minimal-item {
    gap: 0.4rem;
    padding: 0.15rem 0;
  }
  
  .main-feature-minimal-title {
    font-size: 0.5rem;
  }
  
  .main-feature-minimal-description {
    font-size: 0.45rem;
  }
  
  .hero-features-container {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%) !important;
    max-width: 200px;
    margin: 0;
    opacity: 1;
    z-index: 10;
  }
  
  /* Ensure inline text is visible on small mobile */
  .hero-feature-text-inline {
    font-size: 0.55rem;
    max-width: 200px;
    opacity: 1 !important;
    color: white !important;
    z-index: 15;
  }
  
  .hero-title {
    font-size: clamp(2.1rem, 7vw, 3.8rem);
    letter-spacing: 0.08em;
  }
  
  .hero-product-name {
    font-size: 0.75rem;
  }
  
  .hero-price {
    font-size: 1.1rem;
  }
  
  .hero-currency {
    font-size: 0.8rem;
  }
  
  .variant-selection-title {
    font-size: 0.75rem;
  }
  
  /* Make variant buttons flex in one row with same size */
  .variant-material-selector {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
  }
  
  .hero-variant-button {
    padding: 0.4rem 1rem;
    font-size: 0.6rem;
    min-width: 100px;
    flex: 1;
    max-width: 120px;
  }
  
  .color-options-grid::before {
    display: none; /* Remove vertical line for horizontal layout */
  }
  
  /* Hide vertical line for color swatches in mobile */
  .variant-connection-line {
    display: none;
  }
  
  .model-add-to-cart-button {
    padding: 0.5rem 0.8rem;
    font-size: 0.65rem;
    min-width: 120px;
  }
  
  .hero-3d-explore-container {
    bottom: 12%;
  }
  
  .hero-3d-explore-line {
    width: 30px;
  }
  
  .hero-3d-explore-button {
    font-size: 0.55rem;
    padding: 0.25rem 0.6rem;
  }
  
  .model-cta-container {
    bottom: 2%;
  }
  
  .hero-feature-text {
    font-size: 0.65rem;
  }
  
  .hero-feature-icon {
    display: none;
  }
  .main-feature-minimal-title {
    font-size: 0.6rem;
  }
  
  .main-feature-minimal-description {
    font-size: 0.55rem;
  }
}

/* Extra Small Mobile (below 320px) */
@media (max-width: 319px) {
  .hero-section {
    height: 100vh;
    padding-bottom: 10px;
    margin-bottom: -10px;
  }
  
  .hero-3d-container {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .hero-3d-viewer {
    min-width: 260px;
    min-height: 260px;
    top: 0;
    left: 0;
    transform: translate(0, 0) !important;
  }
  
  /* Hide 3D description on mobile */
  .hero-3d-description .hero-description {
    display: none;
  }
  
  .hero-content {
    padding: 0.3rem 0.5rem;
  }
  
  
 
  
  /* Center variant selection container */
  .variant-selection-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  
  .hero-features-container {
    position: relative;
    bottom: auto;
    left: auto;
    max-width: 100%;
    margin-top: 0.2rem;
    transform: none;
    opacity: 1;
  }
  
  /* Move hero-feature-content to top center with absolute positioning */
  .hero-feature-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  
  .hero-title {
    font-size: clamp(1.8rem, 6vw, 3rem);
    letter-spacing: 0.06em;
  }
  
  .hero-product-name {
    font-size: 0.7rem;
  }
  
  .hero-price {
    font-size: 1rem;
  }
  
  .hero-currency {
    font-size: 0.75rem;
  }
  
  .variant-selection-title {
    font-size: 0.7rem;
  }
  
  /* Make variant buttons flex in one row with same size */
  .variant-material-selector {
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
    justify-content: center;
    align-items: center;
  }
  
  .hero-variant-button {
    padding: 0.35rem 0.8rem;
    font-size: 0.55rem;
    min-width: 90px;
    flex: 1;
    max-width: 110px;
  }
  
  
  .color-options-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
  }
  
  .color-options-grid::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, 
      transparent 0%,
      rgba(var(--gold-rgb), 0.4) 20%,
      rgba(var(--kelp-600-rgb), 0.6) 50%,
      rgba(var(--gold-rgb), 0.4) 80%,
      transparent 100%
    );
    box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.2);
  }
  
  /* Hide vertical line for color swatches in mobile */
  .variant-connection-line {
    display: none;
  }
  
  .model-add-to-cart-button {
    padding: 0.4rem 0.7rem;
    font-size: 0.6rem;
    min-width: 110px;
  }
  
  .hero-3d-explore-container {
    bottom: 12%;
  }
  
  .hero-3d-explore-line {
    width: 25px;
  }
  
  .hero-3d-explore-button {
    font-size: 0.5rem;
    padding: 0.2rem 0.5rem;
  }
  
  .model-cta-container {
    bottom: 1%;
  }
  
  .hero-feature-text {
    font-size: 0.6rem;
  }
  
  .hero-feature-icon {
    display: none;
  }
  
  .main-feature-minimal-title {
    font-size: 0.55rem;
  }
  
  .main-feature-minimal-description {
    font-size: 0.5rem;
  }
}

/* Landscape Orientation Adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-section {
    height: 100vh;
  }
  
  .hero-3d-container {
    width: 380px;
    height: 380px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }
  
  .hero-3d-viewer {
    min-width: 330px;
    min-height: 330px;
    top: 0;
    left: 0;
    transform: translate(0, 0) !important;
  }
  

  
  .hero-title {
    font-size: clamp(2.1rem, 6vw, 3.5rem);
  }
  
  .hero-content {
    padding: 0.5rem 1rem;
  }
  
  
  
  
  
  /* Center variant selection container */
  .variant-selection-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  
  .hero-features-container {
    position: relative;
    bottom: auto;
    left: auto;
    max-width: 100%;
    margin-top: 0.3rem;
    transform: none;
    opacity: 1;
  }
  
  /* Move hero-feature-content to top center with absolute positioning */
  .hero-feature-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  
  /* Make variant buttons flex in one row with same size */
  .variant-material-selector {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
  }
  
  .hero-variant-button {
    flex: 1;
    max-width: 140px;
  }
  
  
  .color-options-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0;
  }
  
  .color-options-grid::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, 
      transparent 0%,
      rgba(var(--gold-rgb), 0.4) 20%,
      rgba(var(--kelp-600-rgb), 0.6) 50%,
      rgba(var(--gold-rgb), 0.4) 80%,
      transparent 100%
    );
    box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.2);
  }
  
  /* Hide vertical line for color swatches in mobile landscape */
  .variant-connection-line {
    display: none;
  }
  
  .model-cta-container {
    bottom: 1%;
  }
}

/* High DPI Displays */
@media (min-resolution: 192dpi) {
  .hero-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
  }
  
  .hero-left-content,
  .hero-right-content,
  .hero-features-container {
    transition: none;
  }
  
  .variant-button,
  .model-add-to-cart-button {
    transition: none;
  }
  
  .explore-arrow {
    animation: none;
  }
  
  .scroll-indicator-line {
    animation: none;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .hero-section {
    background-color: var(--kelp-950);
  }
}

/* Print Styles */
@media print {
  .hero-section {
    height: auto;
    min-height: 100vh;
  }
  
  .hero-3d-container {
    display: none;
  }
  
  .hero-content {
    position: relative;
    padding: 2rem;
  }
  
  .hero-left-content,
  .hero-right-content,
  .hero-features-container {
    position: relative;
    opacity: 1;
    transform: none;
  }
}

/* Modern Intro Overlay Styles */
.modern-intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--kelp-950);
  z-index: 0; /* Reduced z-index to allow header to appear above */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Prevent any interference with main content */
  pointer-events: auto;
  /* Ensure smooth transitions */
  will-change: opacity;
  transform: translateZ(0);
  /* Ensure it's completely isolated from other elements */
  isolation: isolate;
}

.modern-intro-overlay.transitioning {
  opacity: 0;
}

.intro-bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 45%, 
    rgba(var(--gold-rgb), 0.04) 0%, /* Reduced gold intensity */
    rgba(0, 0, 0, 0.2) 40%, /* Simplified gradient */
    rgba(0, 0, 0, 0.4) 100%
  );
}

.intro-accent-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-accent-line {
  position: absolute;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--gold-rgb), 0.15) 30%,
    rgba(var(--gold-rgb), 0.4) 50%,
    rgba(var(--gold-rgb), 0.15) 70%,
    transparent
  );
  will-change: transform, opacity, width, height, left, right, top, bottom;
  z-index: 4;
  contain: paint;
  transform: translateZ(0);
}

.intro-line-1 {
  top: 30%;
  left: 50%;
  width: 0;
  height: 1px;
  transform: translateX(-50%);
  animation: introLineTop 0.8s ease-out 0.2s forwards;
}

.intro-line-2 {
  bottom: 30%;
  left: 50%;
  width: 0;
  height: 1px;
  transform: translateX(-50%);
  animation: introLineBottom 0.8s ease-out 0.4s forwards;
}

.intro-line-3 {
  width: 1px;
  height: 40vh;
  left: 28%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation: introLineVertical 0.8s ease-out 0.6s forwards;
}

.intro-content-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 10;
}

.intro-brand {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.intro-brand.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-brand-text {
  font-size: clamp(0.75rem, 2.2vw, 1.4rem);
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 0.92em;
  color: rgba(var(--kelp-100-rgb), 0.85);
  text-align: center;
  text-indent: 0.9em;
  text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.2);
}

.intro-tagline {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.3s;
}

.intro-tagline.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-tagline-text {
  font-size: clamp(0.4rem, 0.8vw, 0.6rem);
  font-weight: 100;
  color: rgba(var(--kelp-300-rgb), 0.7);
  letter-spacing: 0.75em;
  text-align: center;
  line-height: 1.2;
  max-width: 400px;
  text-shadow: 0 0 8px rgba(var(--kelp-300-rgb), 0.15);
  /* Fix centering for RTL languages */
  display: block;
  width: 100%;
  direction: ltr; /* Force LTR for consistent centering */
}

.intro-progress {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: rgba(var(--kelp-600-rgb), 0.3);
  border-radius: 1px;
  overflow: hidden;
}

.intro-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--kelp-400), rgba(var(--kelp-500-rgb), 0.6));
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Center the bar and expand from center */
  margin: 0 auto;
  transform-origin: center;
}

.intro-progress.complete .intro-progress-bar {
  width: 100%;
}

@keyframes introLineTop {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 40%;
    opacity: 1;
  }
  100% {
    width: 40%;
    opacity: 0;
  }
}

@keyframes introLineBottom {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 40%;
    opacity: 1;
  }
  100% {
    width: 40%;
    opacity: 0;
  }
}

@keyframes introLineLeft {
  0% {
    height: 0;
    opacity: 0;
  }
  50% {
    height: 40%;
    opacity: 1;
  }
  100% {
    height: 40%;
    opacity: 0;
  }
}

/* Simple Hero Intro Styles */
.hero-intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 11;
}



.hero-intro-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.6), transparent);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-intro-line-top {
  top: 30%;
  left: 50%;
  width: 0;
  height: 1px;
  transform: translateX(-50%);
  animation: introLineTop 0.8s ease-out 0.2s forwards;
}

.hero-intro-line-bottom {
  bottom: 30%;
  left: 50%;
  width: 0;
  height: 1px;
  transform: translateX(-50%);
  animation: introLineBottom 0.8s ease-out 0.4s forwards;
}

.hero-intro-line-left {
  left: 30%;
  top: 50%;
  width: 1px;
  height: 0;
  transform: translateY(-50%);
  animation: introLineLeft 0.8s ease-out 0.6s forwards;
}

.hero-intro-line-right {
  right: 30%;
  top: 50%;
  width: 1px;
  height: 0;
  transform: translateY(-50%);
  animation: introLineRight 0.8s ease-out 0.8s forwards;
}

@keyframes introLineTop {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 40%;
    opacity: 1;
  }
  100% {
    width: 40%;
    opacity: 0;
  }
}

@keyframes introLineBottom {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 40%;
    opacity: 1;
  }
  100% {
    width: 40%;
    opacity: 0;
  }
}

@keyframes introLineLeft {
  0% {
    height: 0;
    opacity: 0;
  }
  50% {
    height: 40%;
    opacity: 1;
  }
  100% {
    height: 40%;
    opacity: 0;
  }
}

@keyframes introLineRight {
  0% {
    height: 0;
    opacity: 0;
  }
  50% {
    height: 40%;
    opacity: 1;
  }
  100% {
    height: 40%;
    opacity: 0;
  }
}

.hero-intro-text {
  text-align: center;
  z-index: 11;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-intro-title {
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kelp-100);
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: introTitleAppear 1.5s ease-out 0.5s forwards;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
}

.hero-intro-product-title {
  font-size: clamp(0.9rem, 3.5vw, 1.8rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: introProductTitleAppear 1.2s ease-out 0.2s forwards;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
}

.hero-intro-tagline {
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 300;
  color: var(--kelp-300);
  letter-spacing: 0.05em;
  opacity: 0;
  animation: introTaglineAppear 1.5s ease-out 1s forwards;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-shadow: 0 0 10px rgba(var(--kelp-300-rgb), 0.2);
}

@keyframes introTitleAppear {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes introProductTitleAppear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes introTaglineAppear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes introLineVertical {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Mobile Color Layer Styles */
@media (max-width: 768px) {
  /* Mobile Color Selector - Simplified */
  .mobile-color-selector {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .mobile-color-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
  }

  .mobile-color-trigger:hover {
    transform: scale(1.05);
  }

  .mobile-color-trigger.open {
    transform: scale(1.1);
  }

  .mobile-color-current {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-color-trigger.open .mobile-color-current {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.3);
  }

  .mobile-color-pick-text {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
  }

  .mobile-color-pick-text span {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
    background: linear-gradient(
      45deg,
      var(--color-text-light),
      rgba(255, 255, 255, 0.8),
      var(--color-text-light),
      rgba(255, 255, 255, 0.9),
      var(--color-text-light)
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* animation: none; /* animation: mobileColorShine 4s linear infinite - DISABLED FOR PERFORMANCE */
  }

  @keyframes mobileColorShine {
    0% {
      background-position: -200% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }

  .mobile-color-text {
    display: none;
  }

  .mobile-color-arrow {
    display: none;
  }

  .mobile-color-swatches {
    display: flex;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    margin-top: 0.5rem;
  }

  .mobile-color-swatches.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .mobile-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    transform: scale(0.8);
  }

  .mobile-color-swatch:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
  }

  .mobile-color-swatch.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.5);
    transform: scale(1.1);
  }



  /* Hide desktop color selection on mobile */
  .color-selection-wrapper {
    display: none !important;
  }

  /* 3D container interaction fixes */
  .hero-3d-container {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .hero-3d-viewer {
    pointer-events: none !important;
    -webkit-user-select: none !important;
       -moz-user-select: none !important;
            user-select: none !important;
    touch-action: manipulation !important;
  }

  /* Mobile intro lines positioning */
  .intro-line-1 {
    top: 25% !important;
    width: 60% !important;
  }

  .intro-line-2 {
    bottom: 25% !important;
    width: 60% !important;
  }

  .intro-line-3 {
    width: 1px !important;
    height: 30vh !important;
    left: 20% !important;
  }

  /* Mobile intro content positioning */
  .intro-content-container {
    padding: 0 20px !important;
    gap: 1.5rem !important;
  }

  .intro-brand-text {
    font-size: clamp(0.6rem, 3vw, 1rem) !important;
    letter-spacing: 0.6em !important;
  }

  .intro-tagline-text {
    font-size: clamp(0.3rem, 1.5vw, 0.5rem) !important;
    letter-spacing: 0.4em !important;
    max-width: 280px !important;
  }

  .intro-progress {
    bottom: 15% !important;
    width: 150px !important;
  }
  
  .intro-progress-bar {
    /* Ensure responsive expansion from center */
    margin: 0 auto !important;
    transform-origin: center !important;
    background: linear-gradient(90deg, var(--kelp-400), rgba(var(--kelp-500-rgb), 0.6)) !important;
  }
}

/* Intro alignment fixes */
.intro-content-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  text-align: center !important;
}

.intro-brand {
  margin-bottom: 20px !important;
}

.intro-progress {
  position: absolute !important;
  bottom: 50px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 200px !important;
  height: 2px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 1px !important;
  overflow: hidden !important;
}

.intro-progress-bar {
  height: 100% !important;
  background-color: #fff !important;
  width: 0% !important;
  transition: width 0.5s ease !important;
  border-radius: 1px !important;
}

.intro-progress.complete .intro-progress-bar {
  width: 100% !important;
}

/* ========== CRITICAL MOBILE PERFORMANCE FIXES ========== */
/* These optimizations prevent mobile heating issues */

/* Disable expensive effects on mobile devices */
@media (max-width: 768px) {
  /* CRITICAL: Remove all backdrop filters that cause heating */
  .full-viewport-overlay,
  .full-viewport-header,
  .full-viewport-close,
  .hero-variant-button,
  .model-add-to-cart-button,
  [class*="backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* CRITICAL: Disable infinite animations that cause heating */
  .hero-title,
  .model-add-to-cart-button,
  .hero-typing-cursor,
  .explore-vertical-line,
  .hero-scroll-indicator,
  .mobile-color-swatch {
    animation: none !important;
  }
  .button-default-glow{
    display: none !important;
  }
  
  /* CRITICAL: Remove expensive filters */
  .hero-title {
    filter: none !important;
  }
  
  
  /* CRITICAL: Force hardware acceleration for better performance */
  .hero-section,
  .hero-container,
  .hero-content,
  .hero-title,
  .model-add-to-cart-button,
  .hero-variant-button {
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  
  /* CRITICAL: Performance containment to prevent reflows */
  .hero-section {
    contain: layout style paint;
    content-visibility: auto;
  }
}/* Leorre Atelier - Base Styles for Design Upload */

/* Main wrapper covering the screen */
.atelier-premium-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 upload UI */
.atelier-premium-container {
  background: linear-gradient(135deg,
    rgba(var(--kelp-50-rgb), 0.985) 0%,
    rgba(var(--kelp-50-rgb), 0.975) 100%);
 
  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: var(--header-height);
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100;
  border: none;
  will-change: transform, opacity;
  pointer-events: auto; /* Enable clicks on the container */
  height: auto;
  min-height: var(--upload-container-height);
  max-height: calc(95vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

/* Background pattern */
.atelier-premium-pattern {
  display: none; /* <<< HIDE the pattern */
}

/* Header section */
.atelier-premium-header {
  display: flex;
  align-items: center;
  padding: 25px 60px 20px;
  position: relative;
  height: 55px;
}

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

/* Remove vertical line AFTER the title */
/*
.atelier-premium-title-container::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.5), transparent);
  opacity: 0.7;
}
*/

.atelier-premium-title-accent {
  display: none;
}

.atelier-premium-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;
}

.atelier-premium-title::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 16px;
    background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.8), transparent);
    opacity: 0.9;
    display: block !important;
  }

.atelier-premium-title {

  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%;
  }
}

.atelier-premium-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.5s cubic-bezier(0.19, 1, 0.22, 1);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(var(--gold-rgb), 0);
}

.atelier-premium-close::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;
}

.atelier-premium-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);
}

.atelier-premium-close:hover::before {
  transform: scale(1.5);
}

.atelier-premium-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);
}

.atelier-premium-close-icon::before,
.atelier-premium-close-icon::after {
  content: '';
  position: absolute;
  background-color: rgba(var(--gold-rgb), 0.7);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

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

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

.atelier-premium-close:hover .atelier-premium-close-icon {
  transform: rotate(225deg);
}

.atelier-premium-close:hover .atelier-premium-close-icon::before,
.atelier-premium-close:hover .atelier-premium-close-icon::after {
  background-color: rgba(var(--gold-rgb), 1);
}

/* Main content area */
.atelier-premium-content {
  width: 85%;
  margin: 0 auto;
  padding: 50px 0px 30px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  height: auto;
  display: flex;
  flex-direction: column;
}

/* Remove fixed height on direct children globally or in mobile query */
.atelier-premium-content > * {
  height: auto; /* Allow children height to adjust */
}

/* Two-column layout structure (used in some views) */
.atelier-premium-columns {
  display: flex;
  width: 100%;
  gap: 0;
  margin-bottom: 20px;
}

.atelier-premium-column {
  padding: 15px 25px;
}

.atelier-premium-column.left {
  flex: 1;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(135deg,
    rgba(var(--kelp-50-rgb), 0.6) 0%,
    rgba(var(--kelp-100-rgb), 0.3) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 30px 30px;
}

.atelier-premium-column.right {
  width: 350px;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(135deg,
    rgba(var(--kelp-100-rgb), 0.3) 0%,
    rgba(var(--kelp-50-rgb), 0.7) 100%);
  padding: 30px 30px;
  position: relative;
}

/* Shimmer border effects for header/footer */
.atelier-premium-header-border {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(var(--kelp-200-rgb), 0.12);
  overflow: hidden;
}

.atelier-premium-header-border-glow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--gold-rgb), 0.1),
    rgba(var(--gold-rgb), 0.3),
    rgba(var(--gold-rgb), 0.1),
    transparent
  );
  transform: translateX(-100%);
}

.atelier-premium-footer-border {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(var(--kelp-200-rgb), 0.1);
  overflow: hidden;
}

.atelier-premium-footer-border-glow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--gold-rgb), 0.1),
    rgba(var(--gold-rgb), 0.3),
    rgba(var(--gold-rgb), 0.1),
    transparent
  );
  transform: translateX(-100%);
}

/* Add fixed height values to prevent shifting - Keep for desktop */
/* :root {
  --upload-container-height: 600px;
  --upload-content-height: 420px;
} */
/* Define variables within :root or a common scope */
:root {
  --upload-container-min-height-desktop: 600px;
  --upload-content-min-height-desktop: 420px;
}

/* Apply min-height only for desktop */
@media (min-width: 993px) {
  .atelier-premium-container {
    min-height: var(--upload-container-min-height-desktop);
  }
  .atelier-premium-content > * {
     min-height: var(--upload-content-min-height-desktop);
     height: auto; /* Still allow growing */
  }
}

/* Mobile adjustments for container */
@media (max-width: 992px) {
  .atelier-premium-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 */
  }

  .atelier-premium-content {
    width: 100%;
    padding: 20px;
    max-height: none;
    overflow-y: auto;
  }
   /* Ensure children height is auto */
  .atelier-premium-content > * {
     height: auto;
     min-height: initial; /* Remove desktop min-height */
  }

  .atelier-premium-title {
    padding-top: 1rem;
  }

  .atelier-premium-title::after {
    bottom: -12px;
    height: 12px;
  }
}

@media (max-width: 576px) {
   .atelier-premium-content {
    padding: 15px; /* Further reduce padding */
  }
} /* Leorre Atelier - Dropzone Styles */

/* Dropzone container */
.atelier-premium-dropzone-container {
  display: flex;
  flex-direction: column;
  /* Explicitly set min-height for desktop consistency */
  min-height: var(--upload-content-min-height-desktop, 420px); /* Use variable with fallback */
  /* Remove fixed height if it exists here */
  /* height: var(--upload-content-height); */
}

/* Main dropzone area */
.atelier-premium-dropzone {
  position: relative;
  border-radius: 18px;
  padding: 0;
  transition: all 0.3s ease;
  overflow: hidden; /* Keep hidden for rounded corners */
  background: var(--kelp-50);
  cursor: pointer;
  border: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
  display: flex; /* Use flex to manage inner content */
  flex-direction: column; /* Stack content vertically */
  flex: 1; /* Allow dropzone to grow and fill container's min-height */
  /* Remove fixed/min height from here, let container control */
  /* height: 100%; */
  /* min-height: 100%; */
}

/* Active drag state */
.atelier-premium-dropzone-active {
  box-shadow: 0 0 0 1px rgba(var(--kelp-500-rgb), 0.4), 0 5px 20px rgba(0, 0, 0, 0.05);
  background: var(--kelp-75);
}

/* Dropzone content layout */
.atelier-premium-dropzone-content {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch; /* Make columns fill height */
  z-index: 2;
  flex: 1;
  overflow: hidden;
}

/* Example image column */
.atelier-premium-example-column {
  flex: 1 1 40%; /* <<< ADD flex basis (desired ~40%) but allow shrinking/growing */
  max-width: 45%; /* Optional: prevent it from growing too large */
  height: auto; /* Let align-self handle height */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  align-self: stretch; /* Keep stretch */
  /* Add a subtle border for visual separation if needed */
  /* border-right: 1px solid rgba(var(--kelp-200-rgb), 0.1); */
}

.atelier-premium-example-showcase {
  position: relative;
  width: 220px;
  height: 260px;
}

.atelier-premium-example-item {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.5s ease;
}

.atelier-premium-example-item.good {
  top: 0;
  left: 10px;
  z-index: 2;
  transform: translateY(5px);
  /* animation: floatExample 6s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */
}

.atelier-premium-example-item.poor {
  bottom: 30px;
  right: 0;
  z-index: 1;
  transform: scale(0.9) translateY(-5px);
  /* animation: floatExample 6s 3s infinite alternate-reverse ease-in-out; - DISABLED FOR PERFORMANCE */
}

@keyframes floatExample {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-10px) scale(1.05); }
}

.atelier-premium-example-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atelier-premium-example-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.atelier-premium-example-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.65rem;
  color: white;
  z-index: 2;
}

.atelier-premium-example-badge.good {
  background: rgba(var(--sage-rgb), 0.8);
}

.atelier-premium-example-badge.poor {
  background: rgba(var(--terracotta-rgb), 0.8);
}

.atelier-premium-example-jewelry {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  padding: 5px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  z-index: 3;
  overflow: hidden;
  /* animation: pulseJewelry 6s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */
}

.atelier-premium-example-jewelry img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

@keyframes pulseJewelry {
  0% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
  100% { box-shadow: 0 8px 25px rgba(var(--gold-rgb), 0.2); }
}

/* Text/upload column */
.atelier-premium-text-column {
  flex: 1 1 60%; /* <<< ADD flex basis (desired ~60%) and allow shrinking/growing */
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  align-self: stretch;
  /* Ensure text alignment is correct */
  text-align: center; /* Center title/button */
}

/* Decorative icon */
.atelier-premium-decorative-icon {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 80px;
  height: 80px;
  opacity: 0.15;
  pointer-events: none;
  display: none; /* <<< HIDE this element */
}

.atelier-premium-decorative-diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: var(--kelp-700);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
}

.atelier-premium-decorative-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(var(--gold-rgb), 0.8);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}

.atelier-premium-decorative-rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.atelier-premium-decorative-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 1px;
  background: rgba(var(--gold-rgb), 0.8);
  transform-origin: 0 0;
}

.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); }

/* Text styling */
/*
.atelier-premium-upload-heading { ... }
.atelier-premium-upload-heading::after { ... }
.atelier-premium-upload-text { ... }
*/

/* Upload button */
.atelier-premium-upload-button {
  align-self: flex-start;
  position: relative;
  width: auto;
  min-width: 220px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  background: linear-gradient(135deg, var(--kelp-800), var(--kelp-900));
  color: var(--gold-light);
  box-shadow: 0 4px 10px rgba(var(--kelp-900-rgb), 0.15),
              0 1px 3px rgba(0,0,0,0.1);
  border-radius: 2px !important;
  height: 42px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  margin-top: 25px;
}

/* Left accent border */
.atelier-premium-upload-button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 65%;
  background: linear-gradient(to bottom, var(--gold-light), var(--gold), var(--gold-light));
  border-radius: 0 2px 2px 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
  z-index: 1;
}

/* Hover state */
.atelier-premium-upload-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--kelp-700), var(--kelp-800));
  color: var(--gold);
  box-shadow: 0 6px 15px rgba(var(--kelp-900-rgb), 0.2),
              0 2px 5px rgba(0,0,0,0.15);
  transform: translateY(-1px) scale(1.02);
}

/* Active state */
.atelier-premium-upload-button: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);
}

/* Button Layers & Content */
.atelier-premium-button-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.atelier-premium-button-base {
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
}

.atelier-premium-button-surface {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  z-index: 2;
}

.atelier-premium-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.atelier-premium-button-text {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: inherit;
}

.atelier-premium-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.atelier-premium-upload-button:hover .atelier-premium-button-icon {
  transform: scale(1.1);
}

/* Shine effect */
.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.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}
.atelier-premium-upload-button:hover .atelier-premium-button-shine {
  left: 120%;
}

/* Recommendations section */
.atelier-premium-recommendations {
  margin-top: 0;
  margin-bottom: 35px;
  position: relative;
  padding-top: 0;
  width: 100%;
  text-align: left; /* Keep list left-aligned */
}

.atelier-premium-recommendations::before {
  display: none;
}

.atelier-premium-recommendations-title {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 400;
  margin: 0 auto 15px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  max-width: 100%;
}

.atelier-premium-recommendation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  width: 100%;
  justify-content: flex-start; /* Align icon/text to the start */
}

.atelier-premium-recommendation-icon {
  width: 20px;
  height: 20px;
  background: transparent;
  color: var(--gold);
  box-shadow: none;
  flex-shrink: 0;
  margin-top: 0;
  opacity: 0.8;
}

.atelier-premium-recommendation-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--kelp-700);
  margin: 0;
  font-weight: 300;
}

/* Mobile optimizations for Dropzone */
@media (max-width: 992px) {
  .atelier-premium-dropzone-container {
     height: auto; /* Override desktop min-height for mobile */
     min-height: initial; /* Reset min-height */
  }
  .atelier-premium-dropzone {
    height: auto; /* Let content dictate height */
    min-height: initial; /* Reset min-height */
    padding: 25px;
    overflow-y: auto; /* Allow scrolling within dropzone */
    flex: initial; /* Reset flex grow */
  }

  .atelier-premium-dropzone-content {
    flex-direction: column;
    align-items: center; /* Center items vertically */
    height: auto;
    padding: 20px 0;
    flex: initial;
    overflow: visible;
    align-items: initial; /* Reset stretch for column layout */
  }

  .atelier-premium-example-column {
     /* Reset flex properties for column layout */
     flex: none;
     max-width: 260px; /* Keep max-width */
     width: 100%; /* Use full width up to max */
     align-self: center; /* Center the block */
     height: auto;
     padding: 0 0 25px;
     order: 1;
     border-right: none; /* Remove border on mobile */
  }

  .atelier-premium-example-showcase {
    width: 200px;
    height: 240px;
    transform: scale(0.95);
  }

  .atelier-premium-example-item {
    width: 120px;
    height: 120px;
  }

  .atelier-premium-example-jewelry {
    width: 80px;
    height: 80px;
  }

  .atelier-premium-text-column {
     /* Reset flex properties */
     flex: none;
     width: 100%;
     align-self: center; /* Center the block */
     height: auto;
     padding: 0 15px;
     order: 2;
     margin-bottom: 25px;
     text-align: center; /* Center content within column */
     align-items: center;
  }

  .atelier-premium-decorative-icon {
    display: none;
  }

  .atelier-premium-upload-button {
    align-self: center;
    margin-top: 0;
    order: 3;
    width: 90%;
    max-width: 350px;
  }

  .atelier-premium-recommendations {
    text-align: left; /* Keep list left-aligned */
  }

  .atelier-premium-recommendations-title {
    font-size: 0.85rem;
    margin-bottom: 15px;
    text-align: center;
  }

  .atelier-premium-recommendation {
    text-align: left;
    width: 100%;
    gap: 10px;
    margin-bottom: 12px;
    justify-content: flex-start; /* Keep list items aligned left */
  }
  .atelier-premium-recommendation-text {
    font-size: 0.8rem;
  }
}

@media (max-width: 576px) {
  .atelier-premium-dropzone {
    padding: 15px 10px;
  }

  .atelier-premium-dropzone-content {
    padding: 15px 0;
  }

  .atelier-premium-example-column {
    max-width: 200px;
    padding-bottom: 20px;
  }

  .atelier-premium-example-showcase {
    width: 160px;
    height: 200px;
  }

  .atelier-premium-example-item {
    width: 100px;
    height: 100px;
  }

  .atelier-premium-example-jewelry {
    width: 65px;
    height: 65px;
  }

  .atelier-premium-text-column {
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .atelier-premium-recommendations-title {
    font-size: 0.8rem;
  }
   .atelier-premium-recommendation-text {
    font-size: 0.75rem;
  }

  .atelier-premium-upload-button {
    align-self: center;
    min-width: initial;
    width: 100%;
    max-width: 280px;
    height: 40px;
  }
  .atelier-premium-button-text {
     font-size: 0.7rem;
  }
  .atelier-premium-button-icon svg {
     width: 12px;
     height: 12px;
  }
}

/* Analysis Skeleton Loading States */
.atelier-premium-analysis-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 50;
}

.skeleton-marker {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(var(--kelp-200-rgb), 0.3) 25%, rgba(var(--kelp-300-rgb), 0.5) 50%, rgba(var(--kelp-200-rgb), 0.3) 75%);
  background-size: 200% 100%;
  /* animation: skeletonShimmer 1.5s infinite; - DISABLED FOR PERFORMANCE */
}

.skeleton-marker-main {
  width: 40px;
  height: 40px;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
}

.skeleton-marker-secondary {
  width: 32px;
  height: 32px;
  top: 35%;
  right: 25%;
  transform: translate(50%, -50%);
  animation-delay: 0.3s;
}

.skeleton-guidance {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(var(--kelp-50-rgb), 0.9);
  /* backdrop-filter: blur(8px);
}

.skeleton-guidance-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(var(--kelp-200-rgb), 0.4) 25%, rgba(var(--kelp-300-rgb), 0.6) 50%, rgba(var(--kelp-200-rgb), 0.4) 75%);
  background-size: 200% 100%;
  /* animation: skeletonShimmer 1.5s infinite; - DISABLED FOR PERFORMANCE */
}

.skeleton-guidance-text {
  width: 80px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(var(--kelp-200-rgb), 0.4) 25%, rgba(var(--kelp-300-rgb), 0.6) 50%, rgba(var(--kelp-200-rgb), 0.4) 75%);
  background-size: 200% 100%;
  /* animation: skeletonShimmer 1.5s infinite; - DISABLED FOR PERFORMANCE */
  animation-delay: 0.2s;
}

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

/* Enhanced preview container */
.enhanced-preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

/* Enhanced preview guides */
.enhanced-preview-guides {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

/* Enhanced guide styling - minimal and luxury */
.enhanced-guide {
  position: absolute;
  pointer-events: none;
  z-index: 11;
  transform: translate(-50%, -50%);
}

.enhanced-guide-inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(var(--kelp-600-rgb), 0.85);
 
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Main subject guide - subtle gold accent */
.enhanced-guide.main-subject-guide .enhanced-guide-inner {
  width: 18px;
  height: 18px;
  background: rgba(var(--gold-rgb), 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(var(--gold-rgb), 0.25);
}

/* Face markers - clean green */
.enhanced-guide.guide-type-face .enhanced-guide-inner,
.enhanced-guide.guide-type-profile-face .enhanced-guide-inner {
  background: rgba(var(--kelp-600-rgb), 0.9);
}

/* Couple markers - subtle romantic accent */
.enhanced-guide.guide-type-couple .enhanced-guide-inner {
  background: rgba(219, 39, 119, 0.85);
}

/* Remove guide labels completely for cleaner look */
.enhanced-guide-label {
  display: none;
}

/* Enhanced guidance - minimal and clean */
.enhanced-guidance {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(var(--kelp-900-rgb), 0.92);
  
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--kelp-400-rgb), 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
  max-height: 60px;
  overflow: hidden;
}

/* Optimal state - subtle gold accent */
.enhanced-guidance.optimal {
  border-color: rgba(var(--gold-rgb), 0.3);
  background: rgba(var(--kelp-900-rgb), 0.94);
}

/* Needs adjustment state - minimal warning */
.enhanced-guidance.needs-adjustment {
  border-color: rgba(255, 193, 7, 0.3);
}

/* Guidance icon - smaller and refined */
.enhanced-guidance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  flex-shrink: 0;
}

.enhanced-guidance.optimal .enhanced-guidance-icon {
  color: rgba(var(--gold-rgb), 0.85);
}

.enhanced-guidance.needs-adjustment .enhanced-guidance-icon {
  color: rgba(255, 193, 7, 0.8);
}

/* Remove animated direction icon */
.animated-direction-icon {
  animation: none;
}

/* Guidance content - clean layout */
.enhanced-guidance-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Guidance message - clean text */
.enhanced-guidance-message {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  margin: 0;
}

/* Guidance context - subtle */
.enhanced-guidance-context {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1px;
  line-height: 1.2;
}

/* Remove subjects count display */
.enhanced-guidance-subjects {
  display: none;
}

/* Remove all animations for cleaner feel */
@keyframes luxuryMarkerPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.85;
  }
  50% { 
    transform: scale(1.02);
    opacity: 1;
  }
}

/* Remove label animations */
@keyframes labelFadeIn {
  from { opacity: 0; }
  to { opacity: 0; }
}

@keyframes directionalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1); }
}

/* Responsive adjustments - even smaller on mobile */
@media (max-width: 768px) {
  .enhanced-guide-inner {
    width: 14px;
    height: 14px;
  }
  
  .enhanced-guide.main-subject-guide .enhanced-guide-inner {
    width: 16px;
    height: 16px;
  }
  
  .enhanced-guidance {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 6px 10px;
    max-height: 50px;
  }
  
  .enhanced-guidance-message {
    font-size: 10px;
  }
  
  .enhanced-guidance-context {
    font-size: 8px;
  }
} /* Leorre Atelier - Editor Styles */

/* Editor container with fixed height */
.atelier-premium-editor {
  position: relative;
  overflow: hidden;
  background: none !important;
  height: var(--upload-content-height);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* FORCE HIDE the ::before (marble) and ::after (grain) pseudo-elements */
.atelier-premium-editor::before,
.atelier-premium-editor::after {
  display: none !important;
  content: none !important;
  background: none !important;
  z-index: -1 !important;
}

/* Inner container */
.atelier-premium-editor-inner {
  position: relative;
  z-index: 2;
  padding: 24px 20px; /* Increased top padding */
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent !important;
}

/* Editor title */
.atelier-premium-editor-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--kelp-900);
  margin: 0 0 16px;
  text-align: center;
  letter-spacing: 2px;
  position: relative;
  text-transform: uppercase;
}

/* Main content area holding the two columns */
.atelier-premium-editor-content {
  display: flex;
  flex: 1; /* Allow content to fill available space */
  gap: 20px; /* Gap between columns on desktop */
  padding: 15px;
  overflow: hidden; /* Prevent content spill */
  position: relative;
}

/* Left column (Crop Area) */
.atelier-premium-editor-column {
  flex: 1; /* Take up available space */
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0; /* Prevent flexbox overflow */
}

/* Right column (Preview Area) */
.atelier-premium-preview-column {
  width: 240px; /* Fixed width on desktop */
  flex-shrink: 0; /* Prevent shrinking on desktop */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 10px; /* Add some top padding */
}

/* Crop area with better proportions */
.atelier-premium-crop-area {
  flex: 3.5;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  background: var(--kelp-50);
  box-shadow: inset 0 0 0 1px rgba(var(--kelp-200-rgb), 0.2);
  padding: 15px; /* Increased internal padding */
  margin: 5px;
  border-radius: 6px;
}

/* Crop area corner artwork */
.atelier-premium-crop-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.4);
  border-left: 1px solid rgba(var(--gold-rgb), 0.4);
  border-top-left-radius: 8px;
  z-index: 5;
}

.atelier-premium-crop-area::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.4);
  border-right: 1px solid rgba(var(--gold-rgb), 0.4);
  border-bottom-right-radius: 8px;
  z-index: 5;
}

/* Crop frame container - full height */
.atelier-premium-crop-frame {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Container for the image, crop UI, and ML guides overlay */
.atelier-premium-image-container {
  position: relative; /* Establishes positioning context */
  width: 100%;
  height: 100%;
  display: flex; /* Helps center image if needed */
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Clip guides that might go outside THIS container */
}

/* Style the ReactCrop component itself */
.atelier-premium-react-crop {
  position: relative; /* Needs to be relative for the absolute overlay */
  z-index: 5; /* Lower z-index than guides overlay */
  max-width: 100%; /* Ensure it fits container */
  max-height: 100%;
  display: flex; /* Ensure img inside behaves */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* The image rendered inside ReactCrop */
.atelier-premium-react-crop img {
  display: block; /* Prevents extra space below image */
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain; /* Or cover, depending on desired behavior */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
  transform-origin: center;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  /* transform is applied inline */
}

/* ReactCrop specific styles */
.ReactCrop {
  /* Base styles if needed, often handled by atelier-premium-react-crop */
}

/* Crop selection overlay */
.ReactCrop__crop-selection {
  border: 1px solid rgba(var(--gold-rgb), 0.85) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.25) !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 15 !important; /* Higher than .atelier-premium-ml-guides */
  pointer-events: auto !important; /* Ensure crop selection is interactive */
}

/* Dashed inner border */
.ReactCrop__crop-selection::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px dashed rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  pointer-events: none;
  /* animation: rotateCropBorder 90s linear infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes rotateCropBorder {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Crop handles */
.ReactCrop .ord-nw,
.ReactCrop .ord-ne,
.ReactCrop .ord-sw,
.ReactCrop .ord-se {
  width: 10px !important;
  height: 10px !important;
  background: linear-gradient(135deg, var(--gold), rgba(var(--gold-rgb), 0.8)) !important;
  border-radius: 50% !important;
  border: 2px solid white !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) !important;
  opacity: 1 !important;
  transition: all 0.2s ease !important;
  z-index: 20 !important; /* Higher than selection */
  pointer-events: auto !important; /* Ensure handles are interactive */
}

.ReactCrop .ord-nw:hover,
.ReactCrop .ord-ne:hover,
.ReactCrop .ord-sw:hover,
.ReactCrop .ord-se:hover {
  transform: scale(1.2) !important;
  background: white !important;
  border-color: var(--gold) !important;
}

/* Crop controls panel */
.atelier-premium-crop-controls {
  display: flex;
  justify-content: center; /* Center controls horizontally by default */
  gap: 10px;
  padding: 10px 0; /* Default padding */
  flex-shrink: 0; /* Prevent shrinking */
  order: 2; /* Place below crop area by default */
  position: relative; /* Needed for potential absolute positioning later */
  width: 100%;
  margin-top: 10px; /* Space above controls */
}

/* Individual control button */
.atelier-premium-crop-controls .control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; /* Default size */ /* Default size */
  background: rgba(var(--kelp-100-rgb), 0.7);
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  border-radius: 50%;
  color: var(--kelp-700);
  cursor: pointer;
  transition: all 0.2s ease;
  /* backdrop-filter: blur(3px);
}

.atelier-premium-crop-controls .control-button:hover {
  background: rgba(var(--kelp-200-rgb), 0.8);
  border-color: rgba(var(--kelp-400-rgb), 0.5);
  color: var(--kelp-900);
}

.atelier-premium-crop-controls .control-button svg {
  width: 18px; /* Default icon size */
  height: 18px; /* Default icon size */
}

/* Preview area */
.atelier-premium-preview-area {
  flex: 2;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--kelp-50); /* Matching solid color */
  border-radius: 8px;
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  padding: 20px; /* Increased internal padding */
}

/* Preview area corner accents */
.atelier-premium-preview-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.4);
  border-left: 1px solid rgba(var(--gold-rgb), 0.4);
  border-top-left-radius: 8px;
  z-index: 5;
}

.atelier-premium-preview-area::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.4);
  border-right: 1px solid rgba(var(--gold-rgb), 0.4);
  border-bottom-right-radius: 8px;
  z-index: 5;
}

/* Preview container */
.atelier-premium-preview-container {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px auto;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0 15px 35px -5px rgba(0, 0, 0, 0.1),
    0 10px 15px -5px rgba(0, 0, 0, 0.05);
}

/* Gold rim */
.atelier-premium-preview-container::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--gold-rgb), 0.6),
    rgba(var(--gold-rgb), 0.2),
    rgba(var(--gold-rgb), 0.6),
    rgba(var(--gold-rgb), 0.2),
    rgba(var(--gold-rgb), 0.6)
  );
  z-index: -1;
  /* animation: rotateGoldRimPreview 30s linear infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes rotateGoldRimPreview { /* Renamed to avoid conflict */
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Inner white rim */
.atelier-premium-preview-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  z-index: 3;
  pointer-events: none;
}

/* Preview image */
.atelier-premium-preview-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

/* Scrollwork accent */
.atelier-premium-preview-accent {
  position: absolute;
  width: 30px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='12' viewBox='0 0 30 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6C0 6 5 0 15 0C25 0 30 6 30 6C30 6 25 12 15 12C5 12 0 6 0 6Z' fill='rgba(184, 162, 120, 0.15)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 6;
  opacity: 0.7;
}

.atelier-premium-preview-accent-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
}

.atelier-premium-preview-accent-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(6px) rotate(180deg);
}

/* Preview help text with better spacing */
/* .atelier-premium-preview-help { ... REMOVE THIS ENTIRE RULE ... } */

/* Action buttons container - increased spacing */
.atelier-premium-action-buttons {
  display: flex;
  gap: 10px; /* Increased gap between buttons */
  margin-top: auto;
  justify-content: center;
  width: 100%;
  padding: 15px 0 10px; /* Added top padding */
}

/* Action buttons styling - smaller and kelp-based */
.atelier-premium-action-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  overflow: hidden;
}

/* Shared shine effect for all buttons */
.atelier-premium-action-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.atelier-premium-action-button:hover::after {
  left: 100%;
}

/* Reset button - soft sage styling */
.atelier-premium-action-button.secondary {
  background: linear-gradient(135deg, rgba(var(--kelp-200-rgb), 0.9), rgba(var(--kelp-300-rgb), 0.8));
  color: var(--kelp-800);
  font-size: 0.8rem;
  box-shadow: 
    0 2px 10px rgba(var(--kelp-800-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(var(--kelp-400-rgb), 0.3);
}

.atelier-premium-action-button.secondary:hover {
  background: linear-gradient(135deg, rgba(var(--kelp-300-rgb), 0.9), rgba(var(--kelp-400-rgb), 0.8));
  transform: translateY(-2px);
  box-shadow: 
    0 4px 15px rgba(var(--kelp-800-rgb), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Primary button - rich kelp styling */
.atelier-premium-action-button.primary {
  background: linear-gradient(135deg, rgba(var(--kelp-700-rgb), 0.95), rgba(var(--kelp-800-rgb), 0.9));
  color: white;
  font-size: 0.8rem;
  box-shadow: 
    0 2px 10px rgba(var(--kelp-900-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(var(--kelp-900-rgb), 0.3);
}

.atelier-premium-action-button.primary:hover {
  background: linear-gradient(135deg, rgba(var(--kelp-600-rgb), 0.95), rgba(var(--kelp-700-rgb), 0.9));
  transform: translateY(-2px);
  box-shadow: 
    0 4px 15px rgba(var(--kelp-900-rgb), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* AI button - gold accent styling */
.atelier-premium-action-button.ai-perfect {
  background: linear-gradient(140deg, rgba(var(--gold-rgb), 0.25), rgba(var(--gold-rgb), 0.15));
  color: var(--gold-dark);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  font-size: 0.8rem;
  box-shadow: 
    0 2px 10px rgba(var(--gold-rgb), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
}

.atelier-premium-action-button.ai-perfect:hover {
  background: linear-gradient(140deg, rgba(var(--gold-rgb), 0.35), rgba(var(--gold-rgb), 0.2));
  transform: translateY(-2px);
  box-shadow: 
    0 4px 15px rgba(var(--gold-rgb), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.atelier-premium-action-button.ai-perfect .button-text-shine {
  background: linear-gradient(90deg,
    var(--gold-light) 20%,
    var(--gold) 50%,
    var(--gold-light) 80%);
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  /* animation: textShine 4s linear infinite; - DISABLED FOR PERFORMANCE */
  font-weight: 600;
  text-shadow: 0 0 5px rgba(var(--gold-rgb), 0.2);
}

/* Smaller icons in buttons */
.atelier-premium-action-button svg {
  width: 12px;
  height: 12px;
}

/* Preview placeholder */
.atelier-premium-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.atelier-premium-preview-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.2)
  );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder dashed circle */
.atelier-premium-preview-circle::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 1px dashed rgba(var(--gold-rgb), 0.4);
  /* animation: pulsePlaceholder 3s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */
}

@keyframes pulsePlaceholder {
  from { transform: scale(0.95); opacity: 0.7; }
  to { transform: scale(1.05); opacity: 0.9; }
}

/* ML Guides Overlay (Positioning) */
.atelier-premium-ml-guides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden; /* Revert back */
}

/* Ensure the container within EnhancedUploadPreview fills the overlay */
.atelier-premium-ml-guides .enhanced-preview-container {
  width: 100%;
  height: 100%;
  position: relative; /* Context for guides inside */
}

/* Ensure the guides div within EnhancedUploadPreview fills its container */
.atelier-premium-ml-guides .enhanced-preview-guides {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Position the guidance message within the overlay */
.atelier-premium-ml-guides .enhanced-guidance {
  position: absolute; /* Position relative to .enhanced-preview-container */
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12; /* Above guides but below crop UI */
  /* pointer-events: auto; /* Allow interaction if needed, but usually not */
}

/* AI Suggested Crop UI (Positioning) */
.atelier-premium-suggested-crop {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, rgba(var(--kelp-50-rgb), 0.9), rgba(var(--kelp-100-rgb), 0.7));
  border-radius: 8px;
  padding: 10px;
  width: 180px;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  z-index: 10; /* Below controls */
  animation: fadeSlideInSuggestedCrop 0.5s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; /* Renamed */
}

.atelier-premium-suggested-crop-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.atelier-premium-suggested-crop-header svg {
  color: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(var(--gold-rgb), 0.3));
}

.atelier-premium-suggested-crop-header span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kelp-900);
  letter-spacing: 0.3px;
}

.atelier-premium-suggested-crop-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: rgba(var(--kelp-700-rgb), 0.9);
  color: #fff;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.atelier-premium-suggested-crop-button:hover {
  background: rgba(var(--kelp-800-rgb), 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.atelier-premium-suggested-crop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

/* Shimmer effect for suggested crop button */
.atelier-premium-suggested-crop-button::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 50%;
  height: 300%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: rotate(25deg);
  /* animation: cropButtonShimmerSuggested 4s infinite; - DISABLED FOR PERFORMANCE */ /* Renamed */
}

@keyframes cropButtonShimmerSuggested { /* Renamed */
  0% { transform: rotate(25deg) translateX(-100%); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: rotate(25deg) translateX(250%); opacity: 1; }
  31%, 100% { opacity: 0; }
}

@keyframes fadeSlideInSuggestedCrop { /* Renamed */
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Final Refined Crop Feedback Panel --- */
.atelier-premium-crop-feedback {
  position: relative;
  margin: 18px auto 15px;
  width: calc(100% - 12px);
  max-width: none;
  background: linear-gradient(135deg,
    rgba(var(--kelp-50-rgb), 0.95),
    rgba(var(--kelp-100-rgb), 0.9));
  border-radius: 8px;
  padding: 12px 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;

  box-shadow: 
    0 6px 16px -6px rgba(var(--kelp-950-rgb), 0.12),
    0 2px 4px -2px rgba(var(--kelp-950-rgb), 0.06);
  border: 1px solid rgba(var(--gold-rgb), 0.15);
  transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: visible;
}

/* Elegant marble-like texture overlay */
.atelier-premium-crop-feedback::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.3'/%3E%3C/svg%3E"),
    linear-gradient(135deg, transparent, rgba(var(--gold-rgb), 0.05), transparent);
  pointer-events: none;
  z-index: 0;
}

/* Gold accent border-left */
.atelier-premium-crop-feedback::after {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 2px;
  background: linear-gradient(to bottom, 
    rgba(var(--gold-rgb), 0.1),
    rgba(var(--gold-rgb), 0.7),
    rgba(var(--gold-rgb), 0.1));
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.2);
  z-index: 1;
}

/* Feedback icon with premium styling */
.atelier-premium-crop-feedback-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    rgba(var(--kelp-700-rgb), 0.9),
    rgba(var(--kelp-800-rgb), 0.95));
  color: var(--gold-light);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08);
  z-index: 2;
  margin-top: 2px;
}

/* Gold rim around the icon */
.atelier-premium-crop-feedback-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 45deg,
    rgba(var(--gold-rgb), 0.2),
    rgba(var(--gold-rgb), 0.4),
    rgba(var(--gold-rgb), 0.2),
    rgba(var(--gold-rgb), 0.4),
    rgba(var(--gold-rgb), 0.2)
  );
  z-index: -1;
  opacity: 0.7;
  /* animation: rotateIconRim 30s linear infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes rotateIconRim {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Quality-specific icon styles */
.atelier-premium-crop-feedback.excellent .atelier-premium-crop-feedback-icon {
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.7),
    rgba(var(--gold-dark-rgb), 0.8));
  color: var(--kelp-50);
  border-color: rgba(var(--gold-light-rgb), 0.5);
}

/* Inner content area */
.atelier-premium-crop-feedback-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
  position: relative;
  z-index: 2;
}

/* Main recommendation text */
.atelier-premium-crop-feedback-recommendation {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--kelp-900);
  line-height: 1.35;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}

/* Elegant direction indicator */
.atelier-premium-direction-indicator {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  z-index: 10;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
  /* animation: gentlePulse 2.5s infinite ease-in-out; - DISABLED FOR PERFORMANCE */
}

/* Direction indicator background */
.atelier-premium-direction-indicator::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: rgba(var(--kelp-900-rgb), 0.7);
  z-index: -1;
  box-shadow:
    inset 0 0 0 1px rgba(var(--gold-rgb), 0.3),
    0 0 10px rgba(var(--gold-rgb), 0.15);
}

/* Gentle pulsing animation */
@keyframes gentlePulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.9; }
  50% { transform: translateY(-50%) scale(1.08); opacity: 1; }
}

/* Details row with refined spacing */
.atelier-premium-crop-feedback-details {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-right: 32px;
  flex-wrap: wrap;
}

/* Subject info text */
.atelier-premium-subject-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--kelp-700);
  position: relative;
}

/* Special styling for couple indicator */
.atelier-premium-couple-indicator {
  position: relative;
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.15);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
}

.atelier-premium-couple-indicator svg {
  color: var(--gold-dark);
  filter: drop-shadow(0 1px 1px rgba(var(--gold-rgb), 0.3));
}

/* Relationship text styling */
.atelier-premium-relationship-text {
  position: relative;
  font-weight: 500;
  color: var(--kelp-800);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  padding-right: 18px;
}

/* Refined AI badge */
.atelier-premium-ai-badge {
  position: absolute;
  right: -3px;
  top: -1px;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.2), 
    rgba(var(--gold-rgb), 0.05));
  padding: 1px 3px;
  border-radius: 2px;
  margin-left: 3px;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  transform: translateY(-2px);
}

/* Enhanced couple detection styling */
.atelier-premium-crop-feedback[data-subject-count="2"] {
  background: linear-gradient(135deg,
    rgba(var(--kelp-100-rgb), 0.8),
    rgba(var(--kelp-200-rgb), 0.7),
    rgba(var(--gold-rgb), 0.05));
  border-color: rgba(var(--gold-rgb), 0.2);
}

/* Exclusive ring-like accent for couple detection */
.atelier-premium-crop-feedback[data-subject-count="2"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.3'/%3E%3C/svg%3E"),
    radial-gradient(circle at 90% 10%, rgba(var(--gold-rgb), 0.08), transparent 50%);
}

/* Enhanced glow for couple feedback */
.atelier-premium-crop-feedback[data-subject-count="2"] .atelier-premium-couple-indicator {
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.3), 
    rgba(var(--gold-rgb), 0.15));
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.2);
}

/* --- Responsive Adjustments --- */

/* Tablet and Smaller Laptops */
@media (max-width: 768px) {
  .atelier-premium-crop-feedback {
    margin: 14px auto 14px;
    padding: 10px 12px;
    gap: 8px;
  }

  .atelier-premium-crop-feedback-icon {
    width: 26px;
    height: 26px;
    margin-top: 1px;
  }

  .atelier-premium-crop-feedback-icon::before {
    inset: -1px;
  }

  .atelier-premium-crop-feedback-recommendation {
    font-size: 0.8rem;
  }

  .atelier-premium-direction-indicator {
    width: 28px;
    height: 28px;
    right: -2px;
  }

  .atelier-premium-direction-indicator svg {
    width: 15px;
    height: 15px;
  }

  .atelier-premium-subject-info {
    font-size: 0.7rem;
  }

  .atelier-premium-relationship-text {
    padding-right: 16px;
  }

  .atelier-premium-ai-badge {
    right: -2px;
  }
}

/* Mobile Devices */
@media (max-width: 480px) {
  .atelier-premium-crop-feedback {
    margin: 12px auto 12px;
    padding: 8px 10px;
    gap: 6px;
    width: calc(100% - 8px);
  }

  .atelier-premium-crop-feedback::after {
    top: 15%;
    bottom: 15%;
    width: 1.5px;
  }

  .atelier-premium-crop-feedback-icon {
    width: 24px;
    height: 24px;
    margin-top: 0;
  }

  .atelier-premium-crop-feedback-icon svg {
    width: 12px;
    height: 12px;
  }

  .atelier-premium-crop-feedback-icon::before {
    inset: -1px;
  }

  .atelier-premium-crop-feedback-content {
    gap: 2px;
  }

  .atelier-premium-crop-feedback-recommendation {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .atelier-premium-direction-indicator {
    width: 26px;
    height: 26px;
    right: -3px;
  }

  .atelier-premium-direction-indicator svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
  }

  .atelier-premium-crop-feedback-details {
    gap: 4px;
    padding-right: 28px;
  }

  .atelier-premium-subject-info {
    font-size: 0.65rem;
    gap: 4px;
  }

  .atelier-premium-couple-indicator {
    height: 14px;
    width: 14px;
  }

  .atelier-premium-couple-indicator svg {
    width: 9px;
    height: 9px;
    stroke-width: 2;
  }

  .atelier-premium-relationship-text {
    padding-right: 15px;
  }

  .atelier-premium-ai-badge {
    font-size: 0.45rem;
    padding: 0.5px 2px;
    right: -1px;
    top: 0px;
  }
}

/* Subject Information - Enhanced styling for couple photos & AI indicators */
.atelier-premium-subject-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--kelp-600);
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  flex-wrap: nowrap;
  position: relative;
}

/* Add a subtle AI indicator for subject recognition */
.atelier-premium-subject-info::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(var(--gold-rgb), 0.5), 
    transparent);
  opacity: 0.7;
  /* animation: shimmerLine 3s infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes shimmerLine {
  0%, 100% { opacity: 0.4; width: 70%; left: 0; }
  50% { opacity: 0.8; width: 90%; left: 5%; }
}

.atelier-premium-subject-info svg {
  width: 11px;
  height: 11px;
  opacity: 0.8;
  filter: drop-shadow(0 1px 1px rgba(var(--gold-rgb), 0.2));
}

/* Special styling for couple/group detection */
.atelier-premium-crop-feedback[data-subject-count="2"] .atelier-premium-subject-info,
.atelier-premium-crop-feedback[data-subject-count="3"] .atelier-premium-subject-info,
.atelier-premium-crop-feedback[data-subject-count="4"] .atelier-premium-subject-info {
  color: var(--kelp-700);
  font-weight: 500;
}

/* Style for AI-improved feedback indicators */
.atelier-premium-crop-feedback-recommendation {
  position: relative;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--kelp-800);
  line-height: 1.35;
  letter-spacing: 0.15px;
  overflow: visible;
  text-overflow: clip;
  flex-shrink: 1;
  min-width: 60px;
  transition: color 0.3s ease;
  padding-left: 8px;
}

/* Add subtle accent bar for AI-powered insights */
.atelier-premium-crop-feedback-recommendation::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 2px;
}

/* --- Refined Buttons to Match Dropzone Button --- */
/* Base button style - slightly smaller */
.atelier-premium-action-button {
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  height: 38px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 2px !important;
  min-width: 110px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Left accent border for all buttons */
.atelier-premium-action-button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 2px 2px 0;
  transition: all 0.3s ease;
  z-index: 1;
}

/* Hover state */
.atelier-premium-action-button:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.02);
}

/* Active state */
.atelier-premium-action-button:active:not(:disabled) {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
              0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Button Layers & Content - Ensure overflow is handled */
.atelier-premium-action-button .atelier-premium-button-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.atelier-premium-action-button .atelier-premium-button-base {
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
}

.atelier-premium-action-button .atelier-premium-button-surface {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  z-index: 2;
}

.atelier-premium-action-button .atelier-premium-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.atelier-premium-action-button .atelier-premium-button-text {
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: inherit;
}

.atelier-premium-action-button .atelier-premium-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.atelier-premium-action-button:hover .atelier-premium-button-icon {
  transform: scale(1.1);
}

/* Shine effect */
.atelier-premium-action-button .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.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.atelier-premium-action-button:hover .atelier-premium-button-shine {
  left: 120%;
}

/* Reset button - Cooler Kelp styling */
.atelier-premium-action-button.secondary {
  background: linear-gradient(135deg, var(--kelp-400), var(--kelp-500));
  color: var(--kelp-50);
}

.atelier-premium-action-button.secondary::before {
  background: linear-gradient(to bottom, rgba(var(--kelp-300-rgb), 0.9), rgba(var(--kelp-400-rgb), 0.7), rgba(var(--kelp-300-rgb), 0.9));
  box-shadow: 0 0 6px rgba(var(--kelp-300-rgb), 0.3);
}

.atelier-premium-action-button.secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--kelp-300), var(--kelp-400));
  box-shadow: 0 5px 12px rgba(var(--kelp-900-rgb), 0.12),
              0 2px 4px rgba(0, 0, 0, 0.08);
}

/* AI button - Gold styling (remains largely the same, ensure overflow hidden) */
.atelier-premium-action-button.ai-perfect {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.7), rgba(var(--gold-rgb), 0.5));
  color: #fff;
  overflow: hidden;
}

.atelier-premium-action-button.ai-perfect::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.atelier-premium-action-button.ai-perfect:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.8), rgba(var(--gold-rgb), 0.6));
  box-shadow: 0 5px 12px rgba(var(--gold-rgb), 0.2),
              0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Apply button - Darker Kelp styling */
.atelier-premium-action-button.primary {
  background: linear-gradient(135deg, var(--kelp-800), var(--kelp-950));
  color: var(--gold-light);
}

.atelier-premium-action-button.primary::before {
  background: linear-gradient(to bottom, var(--gold-light), var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
}

.atelier-premium-action-button.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--kelp-700), var(--kelp-900));
  color: var(--gold);
  box-shadow: 0 5px 12px rgba(var(--kelp-950-rgb), 0.18),
              0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Responsive adjustments for smaller buttons */
@media (max-width: 992px) {
  .atelier-premium-action-button {
    min-width: 100px;
    height: 36px;
  }
}

@media (max-width: 768px) {
  .atelier-premium-action-button {
    min-width: 85px;
    height: 34px;
  }
  .atelier-premium-action-button .atelier-premium-button-text {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .atelier-premium-action-button {
    min-width: 75px;
    height: 32px;
  }
}

/* Couple-specific tooltip adjustment */
/* .atelier-premium-crop-feedback[data-subject-count="2"]::before { ... REMOVE TOOLTIP ... } */

/* Editor view specific styles */
.atelier-premium-editor {
  background: none !important;
}

/* Override base column styles specifically for the editor's left column */
.atelier-premium-editor .atelier-premium-column.left {
  background: var(--kelp-50) !important;
  position: relative;
  box-shadow: none !important;
  z-index: 3;
}
.atelier-premium-editor .atelier-premium-column.left::before,
.atelier-premium-editor .atelier-premium-column.left::after {
   display: none !important;
   content: none !important;
   background: none !important;
}

.atelier-premium-editor .atelier-premium-column.right {
  background: var(--kelp-75) !important;
  box-shadow: none !important;
  position: relative;
  z-index: 3;
}
.atelier-premium-editor .atelier-premium-column.right::before,
.atelier-premium-editor .atelier-premium-column.right::after {
   display: none !important;
   content: none !important;
   background: none !important;
}

.atelier-premium-image-editor-container {
  background: transparent !important;
  position: relative;
  z-index: 4;
}

/* Cropper specific styles */
.cropper-container {
}

/* Feedback bar */
.atelier-premium-feedback-bar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  max-width: 500px;
  background: rgba(var(--sage-rgb), 0.1);
  border: 1px solid rgba(var(--sage-rgb), 0.2);
  border-radius: 8px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.atelier-premium-feedback-icon {
  flex-shrink: 0;
  color: var(--sage);
}

.atelier-premium-feedback-text {
  font-size: 0.75rem;
  color: var(--kelp-700);
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  flex-grow: 1;
}

/* Adjustments for mobile if needed */
@media (max-width: 768px) {
  .atelier-premium-feedback-bar {
    width: calc(100% - 40px);
    bottom: 15px;
    padding: 8px 12px;
  }
  .atelier-premium-feedback-text {
    font-size: 0.7rem;
  }
}

/* --- Editor Specific Overrides --- */

/* ... existing overrides for .atelier-premium-editor, columns, etc. ... */

/* --- Cropper Library Overrides --- */

/* Target the main container of react-image-crop */
.atelier-premium-editor .ReactCrop {
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Target the image element within the cropper */
.atelier-premium-editor .ReactCrop__image {
}

/* Target the crop selection area */
.atelier-premium-editor .ReactCrop__crop-selection {
  box-shadow: none !important;
}

/* Target potential pseudo-elements used for overlays on the selection */
.atelier-premium-editor .ReactCrop__crop-selection::before,
.atelier-premium-editor .ReactCrop__crop-selection::after {
  background: none !important;
  display: none !important;
  content: none !important;
}

/* Target drag handles if they have unwanted styles */
/*
.atelier-premium-editor .ReactCrop__drag-handle {
  background: none !important;
  border: none !important;
}
*/

/* --- End Cropper Library Overrides --- */


/* --- End Editor Specific Overrides --- */


/* ... rest of ProductDesignUploadEditor.css ... */ 

/* Enhanced subject detection styling - add to your CSS file */

/* Advanced Couple Detection Styling */
.atelier-premium-couple-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 1px;
}

/* Animation for couple detection */
.atelier-premium-couple-indicator svg {
  filter: drop-shadow(0 0 1px rgba(var(--gold-rgb), 0.4));
  /* animation: couplesIconPulse 3s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */
}

@keyframes couplesIconPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(var(--gold-rgb), 0.4)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 2px rgba(var(--gold-rgb), 0.7)); }
}

/* Elegant text styling for relationship text */
.atelier-premium-relationship-text {
  position: relative;
  color: var(--kelp-700) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  padding-right: 18px;
}

/* Tiny AI badge indicator */
.atelier-premium-ai-badge {
  position: absolute;
  right: -16px;
  top: 0;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.2), 
    rgba(var(--gold-rgb), 0.05));
  padding: 1px 3px;
  border-radius: 2px;
  margin-left: 3px;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  transform: translateY(-2px);
}

/* Group count styling */
.atelier-premium-group-count {
  display: inline-block;
  color: var(--gold-dark);
  font-weight: 600;
  margin-right: 1px;
}

/* Special styling for couple detection in feedback panel */
.atelier-premium-crop-feedback[data-subject-count="2"] {
  background: linear-gradient(135deg,
    rgba(var(--kelp-100-rgb), 0.8),
    rgba(var(--kelp-200-rgb), 0.7),
    rgba(var(--gold-rgb), 0.05));
  border-color: rgba(var(--gold-rgb), 0.2);
}

/* Enhanced glow for couple feedback */
.atelier-premium-crop-feedback[data-subject-count="2"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    transparent,
    rgba(var(--gold-rgb), 0.1),
    transparent);
  opacity: 0;
  /* animation: coupleDetectionGlow 4s infinite alternate; - DISABLED FOR PERFORMANCE */
  pointer-events: none;
  z-index: -1;
}

@keyframes coupleDetectionGlow {
  0%, 30% { opacity: 0; }
  70%, 100% { opacity: 1; }
}

/* Add additional couple-specific refinements to AI button when couples detected */
.atelier-premium-crop-feedback[data-subject-count="2"] ~ .atelier-premium-action-buttons .atelier-premium-action-button.ai-perfect {
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.75), 
    rgba(var(--gold-rgb), 0.55));
  border-color: rgba(var(--gold-rgb), 0.5);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.2);
}

/* Couple-specific tooltip - append to HTML */
/* .atelier-premium-crop-feedback[data-subject-count="2"]::before { ... REMOVE TOOLTIP ... } */

/* Add this style */
.atelier-premium-adjustment-hint {
  font-style: italic;
  font-size: 0.9em;
  color: var(--kelp-500);
  margin-left: 4px;
  opacity: 0.8;
}

/* --- Responsive Stacking for Mobile --- */

/* Apply stacking for tablets and below */
@media (max-width: 768px) {
  .atelier-premium-editor-content {
    flex-direction: column; /* Stack columns vertically */
    gap: 15px; /* Adjust gap for vertical stacking */
    padding: 10px; /* Reduce padding */
    overflow-y: auto; /* Allow scrolling if content overflows vertically */
    overflow-x: hidden;
  }

  .atelier-premium-editor-column {
    /* No width change needed as flex: 1 will adapt */
    min-height: 300px; /* Ensure minimum height for crop area */
    margin-bottom: 15px; /* Add space below the editor column */
  }

  .atelier-premium-preview-column {
    width: 100%; /* Take full width when stacked */
    padding-top: 0; /* Reset top padding */
    align-items: center; /* Center items horizontally */
  }

  /* Adjust preview container size for stacked view */
  .atelier-premium-preview-container {
    width: 120px; /* Slightly smaller preview */
    height: 120px;
    margin-top: 5px; /* Adjust top margin */
  }

  /* Ensure feedback takes full width */
  .atelier-premium-crop-feedback {
     width: 100%; /* Ensure it spans the full column width */
     margin-left: 0;
     margin-right: 0;
  }

  /* Center action buttons */
  .atelier-premium-action-buttons {
    justify-content: center; /* Center buttons */
    padding: 10px 0 5px; /* Adjust padding */
  }
}

/* Further adjustments for very small mobile screens */
@media (max-width: 480px) {
  .atelier-premium-editor-content {
    gap: 10px;
    padding: 8px;
  }

  .atelier-premium-editor-column {
    min-height: 280px; /* Adjust min height */
    margin-bottom: 10px; /* Reduce space */
  }

  .atelier-premium-preview-container {
    width: 110px; /* Even smaller preview */
    height: 110px;
  }

  /* Adjust button sizes/gaps if needed */
  .atelier-premium-action-buttons {
    gap: 8px;
  }
  .atelier-premium-action-button {
    padding: 6px 10px; /* Smaller button padding */
    font-size: 0.75rem; /* Smaller button text */
  }
  .atelier-premium-action-button .atelier-premium-button-icon {
    width: 12px; height: 12px; /* Smaller button icon */
  }
} 
/* Leorre Atelier - Confirmation Styles */

/* Confirmation container */
.atelier-premium-confirmation {
  position: relative;
  background: var(--kelp-50);
  height: var(--upload-content-height); /* Match dropzone height variable */
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

/* Marble texture */
.atelier-premium-confirmation::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(165, 165, 141, 0.025)' fill-rule='evenodd'/%3E%3C/svg%3E"),
    radial-gradient(circle at 85% 15%, rgba(var(--gold-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(var(--gold-rgb), 0.03) 0%, transparent 50%);
  opacity: 0.5;
  z-index: 0;
  /* animation: subtleFloatConfirmation 120s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */ /* Renamed */
}

@keyframes subtleFloatConfirmation { /* Renamed */
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 2% 2%; }
}

/* Inner container */
.atelier-premium-confirmation-inner {
  position: relative;
  z-index: 2;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  height: 100%; /* Use full container height */
}

/* Confirmation title - REMOVED */
/*
.atelier-premium-confirmation-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--kelp-900);
  margin: 0 0 16px;
  text-align: center;
  letter-spacing: 2px;
  position: relative;
  text-transform: uppercase;
}

/* Title underline - REMOVED */
/*
.atelier-premium-confirmation-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--gold) 50%,
    transparent 100%);
  opacity: 0.7;
  z-index: 1;

}


/* Confirmation content layout */
.atelier-premium-confirmation-content {
  display: flex;
  flex: 1;
  gap: 12px;
  position: relative;
  align-items: stretch;
  height: calc(100% - 40px); /* Adjust height accounting for padding */
}

/* Preview column */
.atelier-premium-confirmation-preview {
  flex: 0.85;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px;  /* Further reduced padding */
}

/* Corner artwork */
.atelier-premium-confirmation-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.4);
  border-left: 1px solid rgba(var(--gold-rgb), 0.4);
  border-top-left-radius: 8px;
  z-index: 5;
  /* animation: cornerGlowConfirmation 4s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */ /* Renamed */
}

.atelier-premium-confirmation-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.4);
  border-right: 1px solid rgba(var(--gold-rgb), 0.4);
  border-bottom-right-radius: 8px;
  z-index: 5;
  /* animation: cornerGlowConfirmation 4s 2s infinite alternate ease-in-out; - DISABLED FOR PERFORMANCE */ /* Renamed */
}

@keyframes cornerGlowConfirmation { /* Renamed */
  0% { border-color: rgba(var(--gold-rgb), 0.3); }
  100% { border-color: rgba(var(--gold-rgb), 0.6); }
}

/* Image container */
.atelier-premium-confirmation-image {
  width: 170px;  /* Increased size from 150px */
  height: 170px; /* Increased size from 150px */
  border-radius: 50%;
  overflow: hidden;
  margin: 4px auto 8px;  /* Tighter margins */
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0 15px 35px -5px rgba(0, 0, 0, 0.1),
    0 10px 15px -5px rgba(0, 0, 0, 0.05);
  transform: perspective(800px) rotateX(5deg);
  transition: all 0.5s ease;
}

.atelier-premium-confirmation-image:hover {
  transform: perspective(800px) rotateX(0deg) scale(1.03);
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.15),
    0 12px 20px -5px rgba(0, 0, 0, 0.08);
}

/* Gold rim */
.atelier-premium-confirmation-image::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--gold-rgb), 0.8),
    rgba(var(--gold-rgb), 0.3),
    rgba(var(--gold-rgb), 0.8),
    rgba(var(--gold-rgb), 0.3),
    rgba(var(--gold-rgb), 0.8)
  );
  z-index: -1;
  /* The animation uses 360deg rotation over 20 seconds */
  /* animation: rotateGoldRimConfirmation 20s linear infinite; - DISABLED FOR PERFORMANCE */ 
}

@keyframes rotateGoldRimConfirmation { 
  0% { transform: rotate(0deg); }
  /* It completes a full 360-degree rotation */
  100% { transform: rotate(360deg); } 
}

/* Image styling */
.atelier-premium-confirmation-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* Ensures image covers the circle, maintaining aspect ratio */
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.3s ease;
}

/* Preview label */
.atelier-premium-preview-label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.5);
  padding: 6px 12px;  /* Reduced label padding */
  border-radius: 20px;
  margin-top: 3px;
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.03),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  animation: fadeSlideUpConfirmationLabel 0.6s 0.3s cubic-bezier(0.19, 1, 0.22, 1) both; /* Renamed */
}

.atelier-premium-preview-label svg {
  color: var(--gold);
}

.atelier-premium-preview-label span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kelp-800);
}

@keyframes fadeSlideUpConfirmationLabel { /* Renamed */
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Analysis results column */
.atelier-premium-analysis-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0; /* No padding on the column itself */
  background: none;
  box-shadow: none;
  overflow: hidden;
  min-width: 180px; /* Further reduced min-width */
  position: relative;
}

/* Filigree corners */
.atelier-premium-analysis-results::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H20C22.7614 0 25 2.23858 25 5V25' stroke='rgba(212, 175, 55, 0.5)' stroke-width='1'/%3E%3Cpath d='M5 0H10M0 5V10' stroke='rgba(212, 175, 55, 0.3)' stroke-width='0.5'/%3E%3C/svg%3E");
  z-index: 5;
  opacity: 0.8;
}

.atelier-premium-analysis-results::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 25H5C2.23858 25 0 22.7614 0 20V0' stroke='rgba(212, 175, 55, 0.5)' stroke-width='1'/%3E%3Cpath d='M20 25H15M25 20V15' stroke='rgba(212, 175, 55, 0.3)' stroke-width='0.5'/%3E%3C/svg%3E"); /* Corrected SVG for bottom-left */
  z-index: 5;
  opacity: 0.8;
}

/* Analysis header */
.atelier-premium-analysis-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 6px;
}

.atelier-premium-analysis-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gold-rgb), 0.3) 20%,
    rgba(var(--gold-rgb), 0.5) 50%,
    rgba(var(--gold-rgb), 0.3) 80%,
    transparent 100%
  );
}

.atelier-premium-analysis-header svg {
  color: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(var(--gold-rgb), 0.3));
}

/* Analysis title */
.atelier-premium-analysis-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--kelp-900);
  margin: 0;
  position: relative;
}

/* Metrics list */
.atelier-premium-metrics-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem; /* Adjust gap */
  margin-bottom: 0; /* Remove margin if inside padded container */
}

/* Individual metric */
.atelier-premium-metric {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Adjust gap */
  background: rgba(255, 255, 255, 0.15); /* Less opaque */
  border-radius: 4px; /* Smaller radius */
  padding: 0.3rem 0.5rem; /* Adjust padding */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); /* Adjusted shadow */
  animation: metricRevealConfirmation 0.6s calc(var(--reveal-delay)) both cubic-bezier(0.19, 1, 0.22, 1); /* Renamed */
  transform: translateY(10px);
  opacity: 0;
}

@keyframes metricRevealConfirmation { /* Renamed */
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Metric icon */
.atelier-premium-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; /* Smaller icon */
  height: 18px; /* Smaller icon */
  background: rgba(255, 255, 255, 0.3); /* Less opaque */
  border-radius: 50%;
  color: var(--kelp-800);
  flex-shrink: 0;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02), /* Softer shadow */
    inset 0 0 0 1px rgba(255, 255, 255, 0.4); /* Adjusted inset */
}

.atelier-premium-metric-icon svg {
  width: 10px; /* Ensure icon inside scales */
  height: 10px;
}

/* Metric details */
.atelier-premium-metric-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px; /* Reduced gap */
}

/* Metric name */
.atelier-premium-metric-name {
  font-size: 0.7rem; /* Smaller font */
  font-weight: 500;
  color: var(--kelp-800);
  margin: 0;
  letter-spacing: 0.2px; /* Tighter spacing */
}

/* Progress bar */
.atelier-premium-metric-bar {
  height: 3px; /* Thinner bar */
  background: rgba(255, 255, 255, 0.2); /* Less opaque */
  border-radius: 1.5px; /* Adjusted radius */
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.03);
}

/* Progress indicator */
.atelier-premium-metric-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress-value, 0%);
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--progress-color, var(--gold)) 0%,
    var(--progress-color-light, rgba(var(--gold-rgb), 0.8)) 100%
  );
  transform-origin: left;
  animation: progressGrowConfirmation 1s calc(0.3s + var(--reveal-delay)) cubic-bezier(0.15, 1, 0.3, 1) forwards; /* Renamed */
  transform: scaleX(0);
  position: relative;
  overflow: hidden;
}

@keyframes progressGrowConfirmation { /* Renamed */
  to { transform: scaleX(1); }
}

/* Progress shimmer */
.atelier-premium-metric-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  /* animation: progressShimmerConfirmation 2s 2s infinite; - DISABLED FOR PERFORMANCE */ /* Renamed */
}

@keyframes progressShimmerConfirmation { /* Renamed */
  from { transform: translateX(0); }
  to { transform: translateX(250%); }
}

/* Overall quality indicator */
.atelier-premium-overall-quality {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.9), 
    rgba(var(--kelp-100-rgb), 0.6));
  padding: 0.5rem 0.75rem; /* Adjust padding relative to parent */
  border-radius: 4px; /* Smaller radius */
 
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); /* Adjusted shadow */
  margin: 0 0 0.75rem; /* Adjust margin relative to parent */
  animation: fadeInConfirmation 0.8s 0.5s cubic-bezier(0.19, 1, 0.22, 1) both; /* Renamed */
  opacity: 0;
  transform: translateY(8px);
  border-left: 3px solid var(--gold);
}

@keyframes fadeInConfirmation { /* Renamed */
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quality label */
.atelier-premium-quality-label {
  font-size: 0.75rem; /* Smaller font */
  font-weight: 500;
  color: var(--kelp-900);
  margin: 0;
  letter-spacing: 0.2px; /* Tighter spacing */
}

/* Quality badge - Luxurious Redesign */
.atelier-premium-quality-badge {
  font-size: 0.6rem; /* Smaller text */
  font-weight: 500; /* Reduced weight */
  padding: 2px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.9), 
    rgba(var(--kelp-100-rgb), 0.7));
  color: var(--kelp-700); /* Softer color */
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.03),
    inset 0 0 0 0.5px rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
}

.atelier-premium-quality-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.2),
    transparent);
  transform: skewX(-15deg);
  transition: left 0.6s ease;
}

.atelier-premium-quality-badge:hover::after {
  left: 150%;
}

/* Good state */
.atelier-premium-quality-badge.good {
  color: var(--kelp-800); /* Darker kelp */
  border-color: rgba(var(--gold-rgb), 0.5);
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.1), 
    rgba(var(--gold-rgb), 0.05));
}

/* Warning state */
.atelier-premium-quality-badge.warning {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.3);
  background: linear-gradient(135deg, 
    rgba(180, 83, 9, 0.1), 
    rgba(180, 83, 9, 0.05));
}

/* Analysis message container */
.atelier-premium-analysis-message {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  padding: 8px 10px;
  margin-top: auto; /* Push to bottom if space allows */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: fadeSlideUpConfirmationMessage 0.6s 0.8s cubic-bezier(0.19, 1, 0.22, 1) both; /* Renamed */
  position: relative; /* Needed for advanced metrics toggle */
  overflow: visible;
  z-index: 10;
}

@keyframes fadeSlideUpConfirmationMessage { /* Renamed */
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.atelier-premium-analysis-message p {
  font-size: 0.75rem;
  color: var(--kelp-800);
  margin: 0;
  line-height: 1.4;
}

/* High quality message styling */
.atelier-premium-analysis-message p:has(+ .high) {
  color: var(--kelp-900);
}

/* Recommendation sections styling */
.atelier-premium-recommendations-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.1);
  position: relative;
  overflow: visible;
}

/* Gold accent line */
.atelier-premium-recommendations-section::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.atelier-premium-recommendations-section:last-child {
  border-bottom: none;
}

.atelier-premium-recommendations-section:last-child::after {
  display: none;
}

.atelier-premium-recommendations-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--kelp-800);
  margin: 0 0 12px 0;
  letter-spacing: 0.02em;
}

.recommendations-icon {
  color: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(var(--gold-rgb), 0.3));
}

/* Improved spacing and visual hierarchy */
.atelier-premium-recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 2px;
}

.atelier-premium-recommendation-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.atelier-premium-recommendation-item:hover {
  transform: translateX(2px);
}

.atelier-premium-recommendation-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--kelp-700);
}

/* Improved icon styling */
.recommendation-check,
.recommendation-alert,
.recommendation-diamond {
  flex-shrink: 0;
  margin-top: 3px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.recommendation-check {
  color: var(--kelp-600);
}

.recommendation-alert {
  color: #b45309; /* Amber-700 - more luxury feel */
}

.recommendation-diamond {
  color: var(--gold);
}

/* Updated analysis result container */
.atelier-premium-analysis-result {
  overflow-y: auto;
  flex-grow: 1;
  padding: 1rem; /* Set base padding to 1rem */
  background: linear-gradient(135deg, rgba(var(--kelp-50-rgb), 0.7), rgba(var(--kelp-100-rgb), 0.4));
  border-radius: 6px;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  position: relative;
  padding-bottom: calc(1rem + 30px + 6px); /* 1rem base + toggle height + gap */
}

/* Scrollbar styling for analysis result */
.atelier-premium-analysis-result::-webkit-scrollbar {
  width: 3px; /* Thinner scrollbar */
}

.atelier-premium-analysis-result::-webkit-scrollbar-track {
  background: rgba(var(--kelp-50-rgb), 0.3);
  border-radius: 8px;
}

.atelier-premium-analysis-result::-webkit-scrollbar-thumb {
  background: rgba(var(--kelp-200-rgb), 0.6);
  border-radius: 8px;
}

/* Direct issues container - Luxurious Update */
.atelier-premium-direct-issues {
  border-left: 3px solid var(--gold);
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.9), 
    rgba(var(--kelp-100-rgb), 0.6));
  border-radius: 6px;
  padding: 8px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.4s ease;
  margin-bottom: 1.2rem; /* Increased margin for more space */
}

.atelier-premium-direct-issues:hover {
  border-left-color: var(--gold-dark);
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.95), 
    rgba(var(--kelp-100-rgb), 0.7));
}

/* Key metrics section - Luxurious Update */
.atelier-premium-key-metrics {
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.9), 
    rgba(var(--kelp-200-rgb), 0.6)); /* Different color */
  border-left: 3px solid var(--kelp-400);
  border-radius: 6px;
  padding: 8px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.4s ease;
  /* No margin-bottom needed here if it's the last element before the toggle */
}

.atelier-premium-key-metrics:hover {
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.95), 
    rgba(var(--kelp-200-rgb), 0.7));
}

/* Add luxury accents to both containers */
.atelier-premium-direct-issues::before,
.atelier-premium-key-metrics::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(var(--gold-rgb), 0.3), 
    transparent);
}

.atelier-premium-direct-issues::after,
.atelier-premium-key-metrics::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(var(--gold-rgb), 0.2), 
    transparent);
}

/* Icon styling */
.issue-icon,
.section-icon {
  color: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(var(--gold-rgb), 0.2));
}

/* Text styling */
.atelier-premium-issue-item p,
.atelier-premium-section-title {
  color: var(--kelp-800);
}

/* Hover effects */
.atelier-premium-direct-issues:hover .issue-icon,
.atelier-premium-key-metrics:hover .section-icon {
  color: var(--gold-dark);
  filter: drop-shadow(0 1px 3px rgba(var(--gold-rgb), 0.3));
}

/* Section titles */
.atelier-premium-section-title {
  display: flex;
  align-items: center;
  gap: 5px; /* Reduced gap */
  font-size: 0.8rem; /* Smaller font */
  font-weight: 500;
  color: var(--kelp-800);
  margin: 0 0 0.5rem; /* Adjust margin */
  padding-bottom: 0.3rem; /* Adjust padding */
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.08); /* Lighter border */
}

.section-icon {
  color: var(--gold);
  width: 12px; /* Smaller icon */
  height: 12px;
}

/* Direct issues list */
.atelier-premium-issues-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Adjust gap */
}

/* Individual issue item */
.atelier-premium-issue-item {
  display: flex;
  gap: 0.5rem; /* Adjust gap */
  align-items: flex-start;
}

.issue-icon {
  flex-shrink: 0;
  margin-top: 2px; /* Adjust alignment */
  color: var(--leorre-warning, #d97706);
  width: 11px; /* Smaller icon */
  height: 11px;
}

.atelier-premium-issue-item p {
  margin: 0;
  font-size: 0.75rem; /* Smaller font */
  line-height: 1.3; /* Tighter line height */
  color: var(--kelp-800);
}

/* Key metrics section */
.atelier-premium-key-metrics {
  background: rgba(255, 255, 255, 0.25); /* Slightly less opaque */
  border-radius: 6px; /* Smaller radius */
  padding: 0.75rem; /* Adjust padding relative to parent */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); /* Adjusted shadow */
  margin-bottom: 0.75rem; /* Adjust margin relative to parent */
}

/* Update quality badge colors */
.atelier-premium-quality-badge.excellent {
  background: var(--leorre-success, #059669);
}

.atelier-premium-quality-badge.good {
  background: var(--gold);
}

.atelier-premium-quality-badge.average {
  background: var(--leorre-warning, #d97706);
}

.atelier-premium-quality-badge.poor {
  background: var(--leorre-error, #dc2626);
}

/* Always show advanced metrics and improve styling */
.atelier-premium-advanced-metrics.show {
  display: none;
}

/* Improve metric group spacing */
.atelier-premium-advanced-metrics.show .atelier-premium-advanced-metric-group {
  margin-bottom: 14px;
  padding-bottom: 0;
  animation-delay: calc(var(--metric-index, 0) * 0.05s + 0.1s);
}

/* Remove last margin */
.atelier-premium-advanced-metrics.show .atelier-premium-advanced-metric-group:last-child {
  margin-bottom: 0;
}

/* Update heading style */
.atelier-premium-advanced-metrics.show h5 {
  font-size: 0.85rem;
  margin-bottom: 8px;
  padding-bottom: 4px;
}

/* Optimize metric items spacing */
.atelier-premium-advanced-metrics.show .atelier-premium-advanced-metric-items {
  gap: 8px;
}

/* Improve metric item styling */
.atelier-premium-advanced-metrics.show .atelier-premium-advanced-metric-item {
  padding: 2px 0;
  animation-delay: calc(var(--metric-index, 0) * 0.05s + 0.15s);
}

/* Ensure labels are clearly visible */
.atelier-premium-advanced-metrics.show .metric-label {
  font-size: 0.7rem;
  opacity: 0.9;
}

/* Make values stand out more */
.atelier-premium-advanced-metrics.show .metric-value {
  font-size: 0.8rem;
  font-weight: 600;
}

/* More compact styling for smaller screens */
@media (max-width: 992px) {
  .atelier-premium-section-title {
    font-size: 0.85rem;
  }
  
  .atelier-premium-issue-item p {
    font-size: 0.8rem;
  }
  
  .atelier-premium-advanced-metrics.show {
    padding: 10px;
  }
  
  .atelier-premium-advanced-metrics.show .atelier-premium-advanced-metric-items {
    grid-template-columns: repeat(2, 1fr);
  }
  .atelier-premium-full-analysis-overlay {
    max-height: 45vh;
  }
  .atelier-premium-analysis-result {
    padding-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .atelier-premium-advanced-metric-items {
    grid-template-columns: 1fr;
  }

  .atelier-premium-recommendations-title {
    font-size: 0.85rem;
  }

  .atelier-premium-advanced-metrics {
    padding: 12px;
    max-height: 50vh;
  }

  .atelier-premium-advanced-metric-group h5 {
    font-size: 0.8rem;
  }

  .atelier-premium-recommendation-item p {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .atelier-premium-recommendations-title {
    font-size: 0.8rem;
  }

  .atelier-premium-advanced-metrics-toggle.elegant {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .atelier-premium-advanced-metrics {
    padding: 10px;
  }

  .metric-label {
    font-size: 0.7rem;
  }

  .metric-value {
    font-size: 0.75rem;
  }
}

/* --- UPDATED: Full Analysis Overlay Styles --- */
.atelier-premium-full-analysis-overlay {
  position: absolute;
  left: 0;
  right: 0;
  width: calc(100% - 2px); /* Match analysis result width */
  background: linear-gradient(178deg, var(--kelp-50) 0%, var(--kelp-100) 100%); /* Slightly adjusted gradient */
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3); /* Lighter border */
  box-shadow:
    0 -3px 20px rgba(0, 0, 0, 0.05), /* Softer shadow */
    inset 0 0.5px 0px rgba(255, 255, 255, 0.2); /* Subtle inner highlight */
  border-radius: 5px; /* Slightly smaller radius */
  max-height: 400px;
  z-index: 120;
  margin: 0 1px;
  overflow: hidden; /* Hide overflow definitively */
}

.atelier-premium-overlay-content-inner {
  padding: 10px 12px; /* Further reduced padding */
  max-height: 398px; /* Adjust based on padding */
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px; /* Further reduced gap */
}

.atelier-premium-overlay-header {
  padding: 4px 0 6px 0; /* Adjusted padding */
  border-bottom: 1px solid rgba(var(--kelp-200-rgb), 0.25); /* Lighter border */
  margin-bottom: 4px; /* Reduced margin */
  display: flex; /* Ensure flex properties apply */
  justify-content: space-between;
  align-items: center;
  /* Prevent header content from wrapping */
  white-space: nowrap;
  overflow: hidden; /* Hide overflow if text is too long */
  text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

.atelier-premium-overlay-title {
  font-size: 0.75rem; /* Further reduced font size */
  font-weight: 400; /* Reduced font weight (regular) */
  color: var(--gold-dark); /* Use darker gold for readability */
  letter-spacing: 0.2px; /* Even tighter spacing */
  display: flex;
  align-items: center;
  gap: 5px; /* Slightly reduced gap */
  margin: 0; /* Remove default margin */
  /* Ensure title doesn't wrap and uses ellipsis if needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1; /* Allow title to take available space */
  min-width: 0; /* Important for flex item ellipsis */
}

.atelier-premium-overlay-title svg {
  color: var(--gold); /* Keep icon gold */
  width: 12px; /* Smaller icon */
  height: 12px;
  flex-shrink: 0; /* Prevent icon shrinking */
}

/* Ensure close button is styled if needed */
.atelier-premium-overlay-close-btn {
  background: none;
  border: none;
  padding: 4px; /* Adjust padding */
  cursor: pointer;
  color: var(--kelp-500); /* Lighter close icon */
  transition: color 0.2s ease;
  line-height: 0; /* Prevent extra space */
  flex-shrink: 0; /* Prevent button shrinking */
}
.atelier-premium-overlay-close-btn:hover {
  color: var(--kelp-700);
}
.atelier-premium-overlay-close-btn svg {
  width: 14px;
  height: 14px;
}


.atelier-premium-overlay-body {
  display: grid;
  /* Adjust minmax for potentially 3 columns if space allows */
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 8px 10px; /* Adjusted gaps */
  overflow-y: auto; /* Keep scroll as fallback */
  padding: 4px 4px 4px 0; /* Minimal padding, adjust right for scrollbar */
}

/* Minimal scrollbar */
.atelier-premium-overlay-body::-webkit-scrollbar {
  width: 2px;
}
.atelier-premium-overlay-body::-webkit-scrollbar-track {
  background: transparent; /* Hide track */
}
.atelier-premium-overlay-body::-webkit-scrollbar-thumb {
  background: rgba(var(--kelp-300-rgb), 0.5);
  border-radius: 2px;
}


.atelier-premium-advanced-metric-group {
  margin-bottom: 0;
}

.atelier-premium-advanced-metric-group h5 {
  font-size: 0.65rem; /* Further reduced font size */
  font-weight: 500; /* Reduced font weight (medium) */
  text-transform: uppercase;
  letter-spacing: 0.4px; /* Adjusted spacing */
  color: var(--gold-dark); /* Use darker gold color */
  margin-bottom: 4px; /* Slightly reduced margin */
  padding-bottom: 2px; /* Slightly reduced padding */
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.15); /* Subtle gold underline */
  position: relative;
  /* Prevent wrapping and add ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* Ensure block context for ellipsis */
}

/* Remove the ::after line below group headings for cleaner look */
.atelier-premium-advanced-metric-group h5::after {
  display: none;
}

.atelier-premium-advanced-metric-items {
  display: grid;
  gap: 4px; /* Tighter gap */
}

.atelier-premium-advanced-metric-item {
  padding: 3px 5px; /* Minimal padding */
  background: none; /* Remove item background */
  border-radius: 0; /* Remove radius */
  border: none; /* Remove border */
  line-height: 1.3; /* Adjust line height */
}

.metric-label {
  color: var(--kelp-600);
  font-size: 0.65rem; /* Very small label */
  font-weight: 400; /* Regular weight */
  margin-bottom: 0; /* Remove margin */
  display: block; /* Ensure block display */
}

.metric-value {
  color: var(--kelp-800); /* Darker value */
  font-size: 0.75rem; /* Compact value */
  font-weight: 500; /* Medium weight */
  display: block; /* Ensure block display */
}
/* --- END UPDATED OVERLAY STYLES --- */

/* --- NEW ELEGANT TOGGLE BUTTON --- */
.atelier-premium-advanced-metrics-toggle.elegant {
  /* Reset */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  outline: none;

  /* Positioning (Keep as before) */
  position: absolute;
  bottom: 1rem; /* Match parent padding */
  left: 1rem;   /* Match parent padding */
  right: 1rem;  /* Match parent padding */
  width: calc(100% - 2rem); /* Adjust width for 1rem padding on each side */
  z-index: 5;

  /* Core Styling */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 0.75rem; /* Adjust internal padding */
  border-radius: 4px;
  background: rgba(var(--kelp-50-rgb), 0.5); /* Less opaque */
  border: 1px solid rgba(var(--gold-rgb), 0.15); /* Finer border */
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: inset 0 0.5px 0px rgba(255, 255, 255, 0.3), /* Adjusted highlight */
              0 1px 1px rgba(0, 0, 0, 0.02); /* Very subtle shadow */
}

.atelier-premium-advanced-metrics-toggle.elegant:hover {
  background: rgba(var(--kelp-100-rgb), 0.6); /* Less opaque */
  border-color: rgba(var(--gold-rgb), 0.25); /* Adjusted border */
  box-shadow: inset 0 0.5px 0px rgba(255, 255, 255, 0.4),
              0 1px 3px rgba(0, 0, 0, 0.04); /* Adjusted shadow */
}

/* Text Styling */
.atelier-premium-advanced-metrics-toggle.elegant .toggle-text {
  font-size: 0.7rem; /* Smaller font */
  font-weight: 400;
  color: var(--kelp-700);
  letter-spacing: 0.3px; /* Adjust spacing */
  transition: color 0.3s ease, text-shadow 0.3s ease;
  /* Subtle text effect */
  text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.2);
}

.atelier-premium-advanced-metrics-toggle.elegant:hover .toggle-text {
  color: var(--kelp-800);
  text-shadow: 0 0.5px 1.5px rgba(255, 255, 255, 0.3);
}

/* Icon Styling */
.atelier-premium-advanced-metrics-toggle.elegant .toggle-arrow {
  color: var(--gold);
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
}
.atelier-premium-advanced-metrics-toggle.elegant .toggle-arrow svg {
  width: 12px; /* Smaller icon */
  height: 12px;
}

.atelier-premium-advanced-metrics-toggle.elegant:hover .toggle-arrow {
  opacity: 1;
}

.atelier-premium-advanced-metrics-toggle.elegant .toggle-arrow.up {
  transform: rotate(180deg);
}
/* --- END ELEGANT TOGGLE BUTTON --- */

/* Confirmation Actions */
.atelier-premium-confirmation-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Base Button Styles */
.atelier-premium-action {
  position: relative;
  border: none;
  background: none;
  padding: 0.6rem 1.2rem; /* Smaller padding */
  font-family: var(--font-heading);
  font-size: 0.75rem; /* Smaller font */
  font-weight: 300;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  gap: 0.6rem; /* Tighter icon gap */
  border-radius: 4px; /* Subtle rounding */
}

/* Vertical Line Effect */
.atelier-premium-action::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px; /* Thinner line */
  height: 60%; /* Shorter line */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--kelp-600) 20%,
    var(--kelp-400) 50%,
    var(--kelp-600) 80%,
    transparent 100%
  );
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* Shine Effect */
.atelier-premium-action::after {
  content: '';
  position: absolute;
  left: 0;
  top: -50%;
  width: 1.5px;
  height: 200%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.3) 30%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Reset Button */
.atelier-premium-action.reset {
  color: var(--kelp-500);
  background: rgba(var(--kelp-50-rgb), 0.9);
  padding-left: 1.8rem; /* Adjusted padding */
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.atelier-premium-action.reset:hover {
  color: var(--kelp-700);
  background: rgba(var(--kelp-100-rgb), 0.95);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Confirm Button */
.atelier-premium-action.confirm {
  color: var(--kelp-800);
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-100-rgb), 0.9) 0%,
    rgba(var(--kelp-200-rgb), 0.6) 100%
  );
  padding-left: 1.8rem; /* Adjusted padding */
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.03),
    inset 0 0 0 0.5px rgba(var(--kelp-300-rgb), 0.3);
}

.atelier-premium-action.confirm:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--kelp-200-rgb), 0.8) 0%,
    rgba(var(--kelp-300-rgb), 0.5) 100%
  );
  color: var(--kelp-900);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.05),
    inset 0 0 0 0.5px rgba(var(--kelp-400-rgb), 0.4);
}

/* Hover Effects for Both */
.atelier-premium-action:hover::before {
  opacity: 1;
}

.atelier-premium-action:hover::after {
  opacity: 0.3;
  /* animation: buttonShine 1.2s infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes buttonShine {
  0% { transform: translateY(-60%); }
  100% { transform: translateY(60%); }
}

/* Icons */
.atelier-premium-action svg {
  width: 1em; /* Smaller icons */
  height: 1em;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.atelier-premium-action.reset svg {
  color: var(--kelp-500);
}

.atelier-premium-action.confirm svg {
  color: var(--kelp-700);
}

.atelier-premium-action:hover svg {
  transform: translateX(1px) scale(1.05);
  opacity: 0.9;
}

/* Add styles for the new personalized message section */
.atelier-premium-personalized-message {
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.95), 
    rgba(var(--kelp-100-rgb), 0.7));
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 1.2rem;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.4s ease;
  animation: fadeSlideUpConfirmationMessage 0.6s 0.4s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.atelier-premium-personalized-message:hover {
  border-left-color: var(--gold-dark);
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.98), 
    rgba(var(--kelp-100-rgb), 0.8));
}

.atelier-premium-message-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--kelp-800);
  margin: 0 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.08);
}

.atelier-premium-message-header .message-icon {
  color: var(--gold);
  width: 14px;
  height: 14px;
}

.atelier-premium-personalized-message p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--kelp-800);
}

/* AI Badge Styling */
.atelier-premium-ai-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: white;
  font-size: 0.55rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  vertical-align: middle;
  margin: 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} /* Enhanced Upload Preview Styles */
.enhanced-preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Revert back to hidden if desired */
}

.enhanced-preview-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container for ALL guides/markers */
.enhanced-preview-guides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden; /* Revert back to hidden if desired */
}

/* ENHANCED FACE/SUBJECT MARKERS - Elegant Brand Design */
.enhanced-guide {
  position: absolute;
  border-radius: 50%;
  /* Elegant minimalist border using brand colors */
  border: 1.5px solid rgba(var(--kelp-600-rgb), 0.4);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Subtle backdrop with brand colors */
  background: linear-gradient(135deg, 
    rgba(var(--kelp-50-rgb), 0.85) 0%,
    rgba(var(--kelp-100-rgb), 0.9) 100%
  );
  /* Perfect centering */
  transform: translate(-50%, -50%);
  /* Smooth transitions for dynamic updates */
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  /* Elegant shadow using brand aesthetics */
  box-shadow: 
    0 2px 8px rgba(var(--kelp-800-rgb), 0.15),
    0 0 0 1px rgba(var(--kelp-300-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  /* Premium glassmorphism effect */
  /* backdrop-filter: blur(4px);
  -webkit-/* backdrop-filter: blur(4px);
  /* Subtle animation for attention */
  /* animation: elegantPulse 3s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

/* MAIN SUBJECT HIGHLIGHTING - Gold Accent */
.main-subject-guide {
  border: 2px solid rgba(var(--gold-rgb), 0.8);
  /* Premium gold gradient background */
  background: linear-gradient(135deg, 
    rgba(var(--gold-light-rgb), 0.15) 0%,
    rgba(var(--gold-rgb), 0.25) 100%
  );
  /* Enhanced golden glow */
  box-shadow: 
    0 3px 12px rgba(var(--gold-rgb), 0.25),
    0 0 0 1px rgba(var(--gold-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  /* Stronger pulse for main subject */
  /* animation: elegantMainPulse 2.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

/* FACE TYPE SPECIFIC STYLING - Using Brand Color Palette */
.guide-type-face {
  border-color: rgba(var(--kelp-700-rgb), 0.6);
  background: linear-gradient(135deg, 
    rgba(var(--kelp-100-rgb), 0.9) 0%,
    rgba(var(--kelp-200-rgb), 0.85) 100%
  );
}

.guide-type-face.main-subject-guide {
  border-color: rgba(var(--gold-rgb), 0.9);
  background: linear-gradient(135deg, 
    rgba(var(--gold-light-rgb), 0.2) 0%,
    rgba(var(--gold-rgb), 0.3) 100%
  );
}

.guide-type-profile-face {
  border-style: dashed;
  border-color: rgba(var(--kelp-600-rgb), 0.7);
  background: linear-gradient(135deg, 
    rgba(var(--kelp-200-rgb), 0.8) 0%,
    rgba(var(--kelp-300-rgb), 0.7) 100%
  );
}

/* COUPLE/RELATIONSHIP MARKERS - Heart Theme with Brand Colors */
.guide-type-couple {
  border-color: rgba(var(--accent-sage-rgb), 0.8);
  background: linear-gradient(135deg, 
    rgba(var(--accent-sage-rgb), 0.15) 0%,
    rgba(var(--accent-sage-rgb), 0.25) 100%
  );
  /* Special heart-beat animation */
  /* animation: elegantHeartbeat 2s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
  /* Slightly larger for couple emphasis */
  transform: translate(-50%, -50%) scale(1.05);
}

.guide-type-couple.main-subject-guide {
  border-color: rgba(var(--gold-rgb), 0.9);
  background: linear-gradient(135deg, 
    rgba(var(--gold-light-rgb), 0.2) 0%,
    rgba(var(--accent-sage-rgb), 0.15) 50%,
    rgba(var(--gold-rgb), 0.3) 100%
  );
}

/* OBJECT/SUBJECT MARKERS - Subtle Brand Integration */
.guide-type-object,
.guide-type-subject {
  border-color: rgba(var(--accent-clay-rgb), 0.6);
  background: linear-gradient(135deg, 
    rgba(var(--accent-clay-rgb), 0.1) 0%,
    rgba(var(--accent-sand-rgb), 0.2) 100%
  );
}

.guide-type-object.main-subject-guide,
.guide-type-subject.main-subject-guide {
  border-color: rgba(var(--gold-rgb), 0.8);
  background: linear-gradient(135deg, 
    rgba(var(--gold-light-rgb), 0.15) 0%,
    rgba(var(--accent-clay-rgb), 0.1) 50%,
    rgba(var(--gold-rgb), 0.25) 100%
  );
}

/* DISTANT OBJECTS - Refined Visibility */
.guide-type-distant-object {
  border-style: dotted;
  border-color: rgba(var(--kelp-400-rgb), 0.5);
  background: linear-gradient(135deg, 
    rgba(var(--kelp-100-rgb), 0.6) 0%,
    rgba(var(--kelp-200-rgb), 0.4) 100%
  );
  opacity: 0.8;
}

/* MARKER INNER ICONS - Elegant Brand-Consistent Design */
.enhanced-guide-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  /* Subtle inner glow */
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.4) 0%,
    rgba(var(--kelp-50-rgb), 0.6) 100%
  );
  /* Icon color using brand palette */
  color: rgba(var(--kelp-800-rgb), 0.8);
  /* Subtle inner shadow for depth */
  box-shadow: inset 0 1px 2px rgba(var(--kelp-600-rgb), 0.2);
}

.main-subject-guide .enhanced-guide-inner {
  background: linear-gradient(135deg, 
    rgba(var(--gold-light-rgb), 0.6) 0%,
    rgba(255, 255, 255, 0.4) 100%
  );
  color: rgba(var(--kelp-900-rgb), 0.9);
  box-shadow: inset 0 1px 2px rgba(var(--gold-dark-rgb), 0.3);
}

/* FACE-SPECIFIC INNER STYLING */
.guide-type-face .enhanced-guide-inner {
  background: linear-gradient(135deg, 
    rgba(var(--kelp-100-rgb), 0.8) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  color: rgba(var(--kelp-800-rgb), 0.9);
}

.guide-type-couple .enhanced-guide-inner {
  background: linear-gradient(135deg, 
    rgba(var(--accent-sage-rgb), 0.4) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  color: rgba(var(--kelp-800-rgb), 0.9);
}

/* PREMIUM ANIMATIONS - Subtle and Elegant */
@keyframes elegantPulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 2px 8px rgba(var(--kelp-800-rgb), 0.15),
      0 0 0 1px rgba(var(--kelp-300-rgb), 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.02);
    box-shadow: 
      0 3px 12px rgba(var(--kelp-800-rgb), 0.2),
      0 0 0 2px rgba(var(--kelp-300-rgb), 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

@keyframes elegantMainPulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 3px 12px rgba(var(--gold-rgb), 0.25),
      0 0 0 1px rgba(var(--gold-rgb), 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow: 
      0 4px 16px rgba(var(--gold-rgb), 0.35),
      0 0 0 2px rgba(var(--gold-rgb), 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}

@keyframes elegantHeartbeat {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1.05);
  }
  25% { 
    transform: translate(-50%, -50%) scale(1.08);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.05);
  }
  75% { 
    transform: translate(-50%, -50%) scale(1.07);
  }
}

/* RESPONSIVE MARKER SIZING */
@media (max-width: 768px) {
  .enhanced-guide {
    /* Ensure markers remain visible on mobile */
    min-width: 28px;
    min-height: 28px;
    border-width: 1.5px;
  }
  
  .main-subject-guide {
    border-width: 2px;
  }
}

@media (max-width: 480px) {
  .enhanced-guide {
    min-width: 24px;
    min-height: 24px;
    border-width: 1px;
  }
  
  .main-subject-guide {
    border-width: 1.5px;
  }
}

/* Guide sizes */
.guide-size-small {
  min-width: 24px;
  min-height: 24px;
  border-width: 1px;
}
.guide-size-medium {
  min-width: 40px;
  min-height: 40px;
}
.guide-size-large {
  min-width: 50px;
  min-height: 50px;
}

/* Label for main guides */
.enhanced-guide-label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, 
    rgba(var(--kelp-800-rgb), 0.9) 0%,
    rgba(var(--kelp-900-rgb), 0.95) 100%
  );
  color: rgba(var(--kelp-50-rgb), 0.95);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  text-transform: capitalize;
  pointer-events: none;
  /* Elegant shadow */
  box-shadow: 
    0 2px 6px rgba(var(--kelp-900-rgb), 0.3),
    0 0 0 1px rgba(var(--kelp-600-rgb), 0.2);
  /* Subtle backdrop blur */
  /* backdrop-filter: blur(2px);
  -webkit-/* backdrop-filter: blur(2px);
  /* Smooth animations */
  opacity: 0;
  transform: translateX(-50%) translateY(5px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Show label on marker hover */
.enhanced-guide:hover .enhanced-guide-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Main subject labels - Gold accent */
.main-subject-guide .enhanced-guide-label {
  background: linear-gradient(135deg, 
    rgba(var(--gold-dark-rgb), 0.9) 0%,
    rgba(var(--gold-rgb), 0.95) 100%
  );
  color: rgba(var(--kelp-900-rgb), 0.9);
  box-shadow: 
    0 2px 6px rgba(var(--gold-rgb), 0.3),
    0 0 0 1px rgba(var(--gold-light-rgb), 0.3);
}

/* Couple labels - Special heart styling */
.guide-type-couple .enhanced-guide-label {
  background: linear-gradient(135deg, 
    rgba(var(--accent-sage-rgb), 0.9) 0%,
    rgba(var(--accent-sage-rgb), 0.95) 100%
  );
  color: rgba(var(--kelp-50-rgb), 0.95);
}

.guide-type-couple.main-subject-guide .enhanced-guide-label {
  background: linear-gradient(135deg, 
    rgba(var(--gold-dark-rgb), 0.9) 0%,
    rgba(var(--accent-sage-rgb), 0.8) 50%,
    rgba(var(--gold-rgb), 0.95) 100%
  );
}

/* ENHANCED GUIDANCE SYSTEM - More Helpful and Informative */
.enhanced-guidance {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 85%;
  width: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 18px;
  color: rgba(var(--kelp-50-rgb), 0.95);
  border-radius: 12px;
  /* Enhanced shadow with brand colors */
  box-shadow: 
    0 4px 16px rgba(var(--kelp-900-rgb), 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 10;
  pointer-events: none;
  /* Premium glassmorphism */
  
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation: guidanceSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* OPTIMAL STATE - Success Green with Brand Integration */
.enhanced-guidance.optimal {
  background: linear-gradient(135deg, 
    rgba(var(--kelp-600-rgb), 0.9) 0%,
    rgba(var(--kelp-700-rgb), 0.95) 100%
  );
  border: 1px solid rgba(var(--kelp-400-rgb), 0.3);
  box-shadow: 
    0 4px 16px rgba(var(--kelp-800-rgb), 0.3),
    0 0 0 1px rgba(var(--kelp-400-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* NEEDS ADJUSTMENT STATE - Warning with Brand Colors */
.enhanced-guidance.needs-adjustment {
  background: linear-gradient(135deg, 
    rgba(var(--gold-dark-rgb), 0.9) 0%,
    rgba(var(--gold-rgb), 0.95) 100%
  );
  border: 1px solid rgba(var(--gold-light-rgb), 0.3);
  color: rgba(var(--kelp-900-rgb), 0.9);
  box-shadow: 
    0 4px 16px rgba(var(--gold-rgb), 0.3),
    0 0 0 1px rgba(var(--gold-light-rgb), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* GUIDANCE CONTENT LAYOUT */
.enhanced-guidance-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.enhanced-guidance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px; /* Slight adjustment for visual alignment */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.enhanced-guidance-message {
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 2px;
}

/* CONTEXT-SPECIFIC GUIDANCE - Secondary Information */
.enhanced-guidance-context {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.85;
  margin-top: 3px;
  font-style: italic;
}

.enhanced-guidance.optimal .enhanced-guidance-context {
  color: rgba(var(--kelp-100-rgb), 0.9);
}

.enhanced-guidance.needs-adjustment .enhanced-guidance-context {
  color: rgba(var(--kelp-800-rgb), 0.8);
}

/* ENHANCED GUIDANCE ANIMATIONS */
@keyframes guidanceSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-15px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* SCENE-SPECIFIC GUIDANCE STYLING */
.scene-type-selfie .enhanced-guidance-icon,
.scene-type-mirror_selfie .enhanced-guidance-icon {
  color: rgba(var(--accent-sage-rgb), 1);
}

.scene-type-group_photo .enhanced-guidance-icon {
  color: rgba(var(--accent-clay-rgb), 1);
}

.scene-type-couple_photo .enhanced-guidance-icon {
  color: rgba(var(--accent-sage-rgb), 1);
}

.scene-type-portrait .enhanced-guidance-icon {
  color: rgba(var(--kelp-300-rgb), 1);
}

/* RESPONSIVE GUIDANCE */
@media (max-width: 768px) {
  .enhanced-guidance {
    max-width: 90%;
    padding: 8px 14px;
    top: 5%;
  }
  
  .enhanced-guidance-message {
    font-size: 0.8rem;
  }
  
  .enhanced-guidance-context {
    font-size: 0.7rem;
  }
  
  .enhanced-guidance-icon {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .enhanced-guidance {
    max-width: 95%;
    padding: 6px 12px;
    border-radius: 10px;
  }
  
  .enhanced-guidance-content {
    gap: 8px;
  }
  
  .enhanced-guidance-message {
    font-size: 0.75rem;
    line-height: 1.2;
  }
  
  .enhanced-guidance-context {
    font-size: 0.65rem;
  }
  
  .enhanced-guidance-icon {
    width: 16px;
    height: 16px;
  }
}

/* Make the active AI button more prominent */
.atelier-premium-crop-button.active {
  background-color: #4e7cf6;
  color: white;
  box-shadow: 0 0 10px rgba(78, 124, 246, 0.5);
  transform: scale(1.05);
}

/* Improve feedback message styling */
.atelier-premium-crop-feedback {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid #ccc;
}

.atelier-premium-crop-feedback.excellent {
  background: rgba(0, 184, 148, 0.1);
  border-left-color: rgb(0, 184, 148);
}

.atelier-premium-crop-feedback.good {
  background: rgba(52, 152, 219, 0.1);
  border-left-color: rgb(52, 152, 219);
}

.atelier-premium-crop-feedback.suboptimal {
  background: rgba(255, 106, 0, 0.1);
  border-left-color: rgb(255, 106, 0);
}

.atelier-premium-crop-feedback-icon {
  margin-right: 8px;
  margin-top: 2px;
}

.atelier-premium-crop-adjustment-hint {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}

/* Add these styles for context-specific guidance */
.enhanced-guidance-subjects {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.85;
}

/* Add distance-specific styling */
.enhanced-guidance-distance {
  font-size: 11px;
  font-style: italic;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.9);
}

/* Make subjects more pronounced */
.enhanced-guidance-subjects {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 5px;
  border-radius: 3px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Special styling for memorial contexts */
.memorial-context.guide-type-subject {
  border-color: rgba(118, 120, 237, 0.75);
  border-style: solid;
}

.memorial-context.guide-type-subject.main-subject-guide {
  border-color: rgba(118, 120, 237, 0.9);
  box-shadow: 0 0 10px rgba(118, 120, 237, 0.4);
}

.memorial-context.guide-type-subject .enhanced-guide-inner {
  background-color: rgba(118, 120, 237, 0.25);
}

/* Special styling for memorial couple scenarios */
.memorial-context.couple-scenario.guide-type-subject {
  border-color: rgba(235, 77, 75, 0.75);
  border-style: solid;
  /* animation: pulse-memorial 3s infinite ease-in-out; - DISABLED FOR PERFORMANCE */
}

.memorial-context.couple-scenario.guide-type-subject.main-subject-guide {
  border-color: rgba(235, 77, 75, 0.9);
  box-shadow: 0 0 12px rgba(235, 77, 75, 0.5);
}

.memorial-context.couple-scenario.guide-type-subject .enhanced-guide-inner {
  background-color: rgba(235, 77, 75, 0.3);
}

/* More gentle pulse animation for memorial jewelry */
@keyframes pulse-memorial {
  0% { transform: scale(1) translate(-50%, -50%); opacity: 0.9; }
  50% { transform: scale(1.05) translate(-48%, -48%); opacity: 1; }
  100% { transform: scale(1) translate(-50%, -50%); opacity: 0.9; }
}

/* Additional styling for group photos */
.multi-subject-guide {
  /* Make subjects a bit more compact */
  transform: translate(-50%, -50%) scale(0.9);
}

/* Style the distant object markers to be more visible */
.guide-type-distant-object {
  border-color: rgba(52, 152, 219, 0.8);
  border-style: dashed;
}

.guide-type-distant-object.main-subject-guide {
  border-color: rgba(52, 152, 219, 0.9);
  border-style: dashed;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

.guide-type-distant-object .enhanced-guide-inner {
  background-color: rgba(52, 152, 219, 0.2);
}

/* Profile face icon styling */
.profile-face-icon {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  /* Half circle character represents profile view */
  transform: rotate(270deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-face-icon.main-profile {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

/* Enhanced face boundary styles for multiple subjects */
.face-boundary, .enhanced-guide {
  position: absolute;
  pointer-events: none;
  z-index: 110; /* Ensure visibility */
}

/* Make sure secondary subjects are distinct but not too distracting */
.guide-type-face:not(.main-subject-guide) {
  border-color: rgba(249, 170, 51, 0.75);
  border-width: 1.5px;
}

/* Ensure face labels don't overlap */
.face-boundary-label, .enhanced-guide-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  z-index: 200; /* Ensure labels are visible */
  pointer-events: none;
}

/* Special styling for multiple subjects guidance */
.enhanced-guidance-multi-subject {
  font-weight: bold;
  margin-top: 3px;
  color: #FFD700; /* Gold color to highlight the multiple subject status */
  font-size: 12px;
}

/* Add animated direction icon styles */
.animated-direction-icon {
  /* animation: directionIconPulse 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes directionIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Direction-specific animations */
.enhanced-guidance-icon svg[data-lucide="ArrowLeft"] {
  /* animation: arrowLeftAnim 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}
@keyframes arrowLeftAnim {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}

.enhanced-guidance-icon svg[data-lucide="ArrowRight"] {
  /* animation: arrowRightAnim 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}
@keyframes arrowRightAnim {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.enhanced-guidance-icon svg[data-lucide="ArrowUp"] {
  /* animation: arrowUpAnim 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}
@keyframes arrowUpAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.enhanced-guidance-icon svg[data-lucide="ArrowDown"] {
  /* animation: arrowDownAnim 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}
@keyframes arrowDownAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.enhanced-guidance-icon svg[data-lucide="ZoomIn"],
.enhanced-guidance-icon svg[data-lucide="ZoomOut"] {
  /* animation: zoomAnim 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}
@keyframes zoomAnim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* Add a love pulse animation for couple markers */
@keyframes pulse-love {
  0% { transform: scale(1) translate(-50%, -50%); }
  50% { transform: scale(1.08) translate(-46%, -46%); }
  100% { transform: scale(1) translate(-50%, -50%); }
}

/* Special couple scenario styling for subject markers */
.couple-scenario.guide-type-subject {
  border-color: rgba(235, 77, 75, 0.65);
  /* animation: pulse-love 2.5s infinite ease-in-out; - DISABLED FOR PERFORMANCE */
}

.main-subject-guide.couple-scenario.guide-type-subject {
  border-color: rgba(235, 77, 75, 0.9);
  box-shadow: 0 0 10px rgba(235, 77, 75, 0.4);
}

.couple-scenario.guide-type-subject .enhanced-guide-inner {
  background-color: rgba(235, 77, 75, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

.main-subject-guide.couple-scenario.guide-type-subject .enhanced-guide-inner {
  background-color: rgba(235, 77, 75, 0.4);
  color: white;
}

/* Add special styling for memorial contexts */
.memorial-context.guide-type-subject {
  border-color: rgba(118, 120, 237, 0.75);
  border-style: solid;
}

.memorial-context.guide-type-subject.main-subject-guide {
  border-color: rgba(118, 120, 237, 0.9);
  box-shadow: 0 0 10px rgba(118, 120, 237, 0.4);
}

.memorial-context.guide-type-subject .enhanced-guide-inner {
  background-color: rgba(118, 120, 237, 0.25);
}

/* Special styling for memorial couple scenarios */
.memorial-context.couple-scenario.guide-type-subject {
  border-color: rgba(235, 77, 75, 0.75);
  border-style: solid;
  /* animation: pulse-memorial 3s infinite ease-in-out; - DISABLED FOR PERFORMANCE */
}

.memorial-context.couple-scenario.guide-type-subject.main-subject-guide {
  border-color: rgba(235, 77, 75, 0.9);
  box-shadow: 0 0 12px rgba(235, 77, 75, 0.5);
}

.memorial-context.couple-scenario.guide-type-subject .enhanced-guide-inner {
  background-color: rgba(235, 77, 75, 0.3);
}

/* LOADING SKELETON FOR HEAVY IMAGE PROCESSING */
.enhanced-guides-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.skeleton-marker {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-200-rgb), 0.6) 0%,
    rgba(var(--kelp-300-rgb), 0.4) 100%
  );
  border: 1.5px solid rgba(var(--kelp-400-rgb), 0.3);
  /* animation: skeletonPulse 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

.skeleton-marker-main {
  width: 50px;
  height: 50px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

.skeleton-marker-secondary {
  width: 40px;
  height: 40px;
  top: 35%;
  left: 60%;
  transform: translate(-50%, -50%);
  animation-delay: 0.3s;
}

.skeleton-guidance {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(var(--kelp-100-rgb), 0.8);
  border-radius: 20px;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  /* animation: skeletonPulse 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
  animation-delay: 0.6s;
}

.skeleton-guidance-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--kelp-400-rgb), 0.5);
}

.skeleton-guidance-text {
  width: 120px;
  height: 12px;
  border-radius: 6px;
  background: rgba(var(--kelp-400-rgb), 0.5);
}

@keyframes skeletonPulse {
  0%, 100% { 
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  50% { 
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.02);
  }
} /* Luxury branded loading animation for image processing */

.atelier-premium-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--kelp-50-rgb), 0.98);
  z-index: 100;
  /* backdrop-filter: blur(8px); */
  overflow: hidden;
}

/* Logo container */
.atelier-premium-loading-logo-container {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Logo element */
.atelier-premium-loading-logo {
  position: relative;
  /* animation: gentleFloat 2.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
  filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.25));
  z-index: 2;
  /* REMOVE mask-image for now to ensure shine visibility */
  /* mask-image: radial-gradient(circle at center, black 60%, transparent 90%); */
  /* -webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 90%); */
  overflow: hidden; /* Add overflow hidden to contain the shine */
}

/* Logo shine sweep animation */
.atelier-premium-loading-logo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Start further left */
  width: 70%; /* Slightly narrower shine */
  height: 100%;
  /* More distinct shine gradient */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1), /* Faint leading edge */
    rgba(var(--gold-light-rgb), 0.7), /* Brighter gold highlight */
    rgba(255, 255, 255, 0.1), /* Faint trailing edge */
    transparent
  );
  transform: skewX(-25deg); /* Keep the angle */
  /* animation: logoShineSweep 3.5s ease-out infinite; - DISABLED FOR PERFORMANCE */ 
  animation-delay: 0.5s; 
  z-index: 3; /* Ensure it's above the logo content */
}

/* Radial glow behind logo */
.atelier-premium-loading-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(var(--gold-rgb), 0.1) 0%,
    rgba(var(--gold-rgb), 0.03) 40%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  /* animation: glowPulse 3s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

/* Elegant text with refined shine effect */
.atelier-premium-loading-text {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  font-weight: var(--font-weight-light);
  position: relative;
  /* Ensure overflow is visible for background clip */
  overflow: visible; 
  padding: 0 1.2rem;
  
  /* Refined text gradient using kelp as base */
  background: linear-gradient(
    to right,
    var(--kelp-800) 15%, /* Darker kelp base */
    var(--kelp-600) 30%, /* Lighter kelp transition */
    var(--gold-light) 50%, /* Bright gold highlight */
    var(--kelp-600) 70%, /* Lighter kelp transition */
    var(--kelp-800) 85% /* Darker kelp base */
  );
  background-size: 250% auto; /* Slightly larger size for smoother transition */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /* Crucial for the effect */
  /* animation: textGradientShine 3s linear infinite; - DISABLED FOR PERFORMANCE */
  /* Add a subtle text shadow for depth */
  text-shadow: 0 1px 2px rgba(var(--kelp-950-rgb), 0.1);
}

/* Diamond accent elements */
.atelier-premium-loading-accent {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: rgba(var(--gold-rgb), 0.6);
  transform: rotate(45deg);
}

.atelier-premium-loading-accent:nth-child(1) {
  top: 30%;
  left: 35%;
  /* animation: accentFloat 3.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

.atelier-premium-loading-accent:nth-child(2) {
  bottom: 35%;
  right: 32%;
  /* animation: accentFloat 3.5s ease-in-out 0.5s infinite; - DISABLED FOR PERFORMANCE */
}

.atelier-premium-loading-accent:nth-child(3) {
  top: 40%;
  right: 35%;
  /* animation: accentFloat 3.5s ease-in-out 1s infinite; - DISABLED FOR PERFORMANCE */
}

.atelier-premium-loading-accent:nth-child(4) {
  bottom: 32%;
  left: 35%;
  /* animation: accentFloat 3.5s ease-in-out 1.5s infinite; - DISABLED FOR PERFORMANCE */
}

/* Progress indicator */
.atelier-premium-loading-progress {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background-color: rgba(var(--kelp-200-rgb), 0.5);
  overflow: hidden;
}

.atelier-premium-loading-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--gold),
    rgba(var(--gold-rgb), 0.5)
  );
  /* animation: progressAnimation 3s cubic-bezier(0.16, 1, 0.3, 1) infinite; - DISABLED FOR PERFORMANCE */
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
}

/* Add a subtle shimmer on top of the progress bar */
.atelier-premium-loading-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--gold-rgb), 0.8),
    transparent
  );
  /* animation: progressBarShimmer 3s linear infinite; - DISABLED FOR PERFORMANCE */
}

/* Animations */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Updated logo shine animation */
@keyframes logoShineSweep {
  0% { left: -100%; opacity: 0.6; } /* Start further left */
  30% { opacity: 1; } /* Peak brightness */
  60%, 100% { left: 100%; opacity: 0.6; } /* End further right */
}

/* Updated text gradient animation */
@keyframes textGradientShine {
  0% { background-position: 0% center; }
  100% { background-position: 250% center; } /* Match background-size */
}

@keyframes progressBarShimmer {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes accentFloat {
  0%, 100% { 
    opacity: 0.4;
    transform: rotate(45deg) translate(0, 0); 
  }
  50% { 
    opacity: 0.7;
    transform: rotate(45deg) translate(3px, -2px); 
  }
}

@keyframes progressAnimation {
  0% { width: 0%; left: 0; }
  50% { width: 100%; left: 0; }
  50.1% { width: 100%; left: auto; right: 0; }
  100% { width: 0%; left: auto; right: 0; }
}

.atelier-premium-loading-tip {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(var(--kelp-600-rgb), 0.8);
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.3;
  max-width: 280px;
  padding: 0 20px;
} /* 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;
  /* Removed border-top shadow */
  contain: layout style;
  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 */
  contain: layout style;
}

/* 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;
  contain: layout style;
}

.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 {
  contain: layout style;
  will-change: auto;
}

#features-section-container .features-container {
  contain: layout style;
  will-change: auto;
}

#features-section-container .feature-card {
  contain: layout style;
  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: 130vh; /* Increased from 100vh to 120vh */
  min-height: 1000px; /* Increased from 800px to 1000px */
  background: transparent;
  color: var(--kelp-900);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6rem 0; /* Increased from 4rem to 6rem */
  will-change: transform, opacity;
  padding-top: 18rem; /* Increased from 16rem to 20rem */
  padding-bottom: 14rem; /* Increased from 12rem to 16rem */
}

/* Background gradient */
.featured-collections-section::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;
}

/* Luxury accent lines inspired by hero */
.featured-collections-section::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-size: 80px 80px;
  background-image:
    linear-gradient(to right, rgba(var(--kelp-400-rgb), 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--kelp-400-rgb), 0.1) 1px, transparent 1px);
  z-index: 1;
}

.collections-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  gap: 2rem;
}

/* Background collection titles */
.background-collection-titles {
  position: absolute;
  top: 50%; /* Centered vertically */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.6; /* Reduced opacity */
}

.background-title {
  position: absolute;
  font-size: clamp(2.5rem, 6vw, 5rem); /* Much smaller title */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kelp-200);
  white-space: nowrap;
  will-change: transform, opacity;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.background-title.active {
  /* This class is no longer used for animation, handled by framer-motion */
}

@keyframes titleReveal {
  /* This is no longer used, handled by framer-motion */
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 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 */
  will-change: transform;
  backface-visibility: hidden;
  /* Removed padding-bottom, handled by container */
}

.gallery-slide {
  position: absolute;
  width: 20vw;
  height: 28vw;
  min-width: 260px;
  min-height: 360px;
  max-width: 320px;
  max-height: 440px;
  background: var(--kelp-100);
  border-radius: 16px;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  box-shadow: 0 8px 16px rgba(var(--kelp-900-rgb), 0.1);
  will-change: transform, opacity;
  transition: box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center center;
  /* Optimized for performance */
  backface-visibility: hidden;
  perspective: 1000px;
  /* Smooth positioning transitions handled by framer-motion */
}

.gallery-slide:hover {
  box-shadow: 0 12px 24px rgba(var(--kelp-900-rgb), 0.15);
}

/* Active card styling */
.gallery-slide.active {
  box-shadow: 0 10px 20px rgba(var(--kelp-900-rgb), 0.12);
}

.gallery-slide.active .collection-image {
  filter: brightness(1) contrast(1);
  /* animation: collectionImageFloat 8s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes collectionImageFloat {
  0%, 100% {
    transform: scale(1) translate(0, 0);
  }
  25% {
    transform: scale(1) translate(-2px, 2px);
  }
  50% {
    transform: scale(1) translate(0, -1px);
  }
  75% {
    transform: scale(1) translate(2px, 1px);
  }
}

.collection-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  background: var(--kelp-200);
}

.collection-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
  /* Performance optimizations */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Image reveal effect for non-active cards */
.gallery-slide:not(.active) .collection-image {
  filter: brightness(0.8) contrast(1.1);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-slide:hover .collection-image {
  filter: brightness(1) contrast(1);
  transform: scale(1.05);
}

.collection-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--kelp-200);
  border-radius: 15px;
}

/* Image reflection outside the container */
.collection-image-reflection {
  height: 25%;
  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: 0; /* Position at bottom of image */
  left: 50%;
  transform: translateX(-50%); /* 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 */
  right: auto;
  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;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 15px;
}

.collection-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kelp-100);
  border-radius: 16px;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.3);
  position: relative;
}

.collection-image-placeholder svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

/* Luxury frame corners */
.gallery-slide::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 25px;
  height: 25px;
  border-top: 1px solid rgba(var(--kelp-800-rgb), 0.3);
  border-left: 1px solid rgba(var(--kelp-800-rgb), 0.3);
  z-index: 5;
  pointer-events: none;
  transition: all 0.4s ease;
}

.gallery-slide::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  border-bottom: 1px solid rgba(var(--kelp-800-rgb), 0.3);
  border-right: 1px solid rgba(var(--kelp-800-rgb), 0.3);
  z-index: 5;
  pointer-events: none;
  transition: all 0.4s ease;
}

.gallery-slide:hover::before {
  transform: translate(-3px, -3px);
  border-color: rgba(var(--kelp-800-rgb), 0.6);
}

.gallery-slide:hover::after {
  transform: translate(3px, 3px);
  border-color: rgba(var(--kelp-800-rgb), 0.6);
}

.active-collection-info {
  position: relative;
  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 */
  margin-top: -60px; /* 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: relative; /* 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-50-rgb), 0.75),
    rgba(var(--kelp-100-rgb), 0.65)
  );
  /* backdrop-filter: blur(12px); */
  /* -webkit-backdrop-filter: blur(12px); */
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.07),
    0 3px 10px rgba(var(--kelp-950-rgb), 0.03);
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 90%;
  max-width: 420px; /* Reduced max-width */
  height: 85px; /* 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;
  -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;
  transition: all 0.3s ease;
  display: flex;
  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: relative;
  text-align: center;
  margin-top: 2rem;
  z-index: 10;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* 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: center;
  gap: 1rem;
  padding: 0;
  pointer-events: auto;
}

.collections-nav-container .luxury-nav-button {
  width: 36px;
  height: 36px;
  background-color: rgba(var(--kelp-50-rgb), 0.8);
  border-color: rgba(var(--kelp-300-rgb), 0.4);
  box-shadow: 
    0 4px 12px rgba(var(--kelp-900-rgb), 0.08),
    0 0 0 1px rgba(var(--kelp-200-rgb), 0.15);
}

.collections-nav-container .luxury-nav-button:hover {
  background-color: rgba(var(--kelp-100-rgb), 0.9);
  border-color: rgba(var(--kelp-400-rgb), 0.5);
  box-shadow: 
    0 6px 16px rgba(var(--kelp-900-rgb), 0.12),
    0 0 0 1px rgba(var(--kelp-300-rgb), 0.25);
}

.collections-nav-container .luxury-nav-line,
.collections-nav-container .luxury-nav-arrow {
  background: rgba(var(--kelp-800-rgb), 0.9) !important;
}

.collections-nav-container .luxury-nav-button:hover .luxury-nav-line,
.collections-nav-container .luxury-nav-button:hover .luxury-nav-arrow {
  background: rgba(var(--kelp-900-rgb), 1) !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);

  border: none;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  overflow: hidden;
}

.fc-view-all-link::after {
  content: '→';
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.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) {
  .gallery-slide {
    width: 28vw;
    height: 40vw;
    min-width: 240px;
    min-height: 340px;
  }
  .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;
  }
  .collection-image-reflection {
    height: 20%;
    width: 28vw !important;
    min-width: 240px !important;
    max-width: 320px !important;
  }
}

@media (max-width: 767px) {
  .featured-collections-section {
    min-height: 110vh; /* Increased from 95vh to 110vh */
    padding: 3rem 0; /* Increased from 2rem to 3rem */
  }
  .circular-gallery-container {
    height: 60vh; /* Increased from 50vh to 60vh */
    min-height: 500px; /* Increased from 400px to 500px */
    perspective: 800px;
  }
  .gallery-slide {
    width: 45vw;
    height: 45vw; /* Changed from 65vw to 45vw for 1:1 aspect ratio like desktop */
    min-width: 180px;
    min-height: 180px; /* Changed to match width */
  }
  /* Make side cards smaller than center card on mobile */
  .gallery-slide:not(.active) {
    width: 35vw;
    height: 35vw; /* Changed from 55vw to 35vw for 1:1 aspect ratio */
    min-width: 140px;
    min-height: 140px; /* Changed to match width */
  }
  .active-collection-info {
    padding: 0; /* Remove padding */
    margin-top: -2rem;
  }
  .active-collection-description {
    font-size: 0.75rem;
  }
  .active-collection-description-container {
    width: 90vw;
    max-width: 320px; /* Tighter on mobile */
    height: 75px; /* Reduced height */
    padding: 12px; /* Match BrandStory mobile padding */
    bottom: auto; /* Reset */
  
  }
  .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%;
    width: 45vw !important;
    min-width: 180px !important;
    max-width: 280px !important;
    bottom: '-2px' !important;
  }
  .collections-nav-container {
    gap: 1rem;
  }
  .collections-nav-container .luxury-nav-button {
    width: 32px;
    height: 32px;
  }
  .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 */
  .mobile-touch-indicator {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
  }
  
  .mobile-touch-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kelp-400);
    opacity: 0.5;
    transition: all 0.3s ease;
  }
  
  .mobile-touch-dot.active {
    background: var(--kelp-600);
    opacity: 1;
    transform: scale(1.2);
  }
}
/* ===== 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: 42px;
  height: 42px;
  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;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: auto;
  cursor: pointer;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.2);
  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%
  );
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(var(--kelp-200-rgb), 0.1);
}

/* Cold kelp variant for light backgrounds */
.luxury-navigation.cold-kelp .luxury-nav-button {
  background-color: rgba(var(--kelp-50-rgb), 0.9);
  border-color: rgba(var(--kelp-400-rgb), 0.3);
  box-shadow: 
    0 4px 12px rgba(var(--kelp-900-rgb), 0.1),
    0 0 0 1px rgba(var(--kelp-200-rgb), 0.2);
}

.luxury-navigation.cold-kelp .luxury-nav-button:hover {
  background-color: rgba(var(--kelp-100-rgb), 0.95);
  border-color: rgba(var(--kelp-500-rgb), 0.4);
  box-shadow: 
    0 6px 16px rgba(var(--kelp-900-rgb), 0.15),
    0 0 0 1px rgba(var(--kelp-300-rgb), 0.3);
}

.luxury-navigation.cold-kelp .luxury-nav-line,
.luxury-navigation.cold-kelp .luxury-nav-arrow {
  background: rgba(var(--kelp-800-rgb), 0.9) !important;
}

.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: 1.2px;
  background: rgba(var(--kelp-300-rgb), 0.8);
  position: relative;
  transition: all 0.3s ease;
}

/* 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: 1.2px;
  background: rgba(var(--kelp-300-rgb), 0.9);
  top: 50%;
  transition: all 0.3s ease;
}

/* Previous button arrow */
.luxury-nav-button.prev .luxury-nav-arrow {
  left: calc(50% - 6px);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: left center;
  box-shadow: -2px 2px 0 -2px rgba(var(--kelp-300-rgb), 0.9);
}

.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;
  box-shadow: 2px 2px 0 -2px rgba(var(--kelp-300-rgb), 0.9);
}

.luxury-nav-button.next .luxury-nav-line {
  transform: translateX(-3px);
}

/* Button hover state */
.luxury-nav-button:hover {
  opacity: 1;
  background-color: rgba(var(--kelp-900-rgb), 0.8);
  transform: scale(1.05);
  border-color: rgba(var(--kelp-300-rgb), 0.3);
  box-shadow: 
    0 12px 25px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(var(--kelp-200-rgb), 0.15);
}

.luxury-nav-button:hover .luxury-nav-line,
.luxury-nav-button:hover .luxury-nav-arrow {
  background: rgba(var(--kelp-200-rgb), 0.95);
}

.luxury-nav-button.prev:hover .luxury-nav-line {
  transform: translateX(0);
}

.luxury-nav-button.next:hover .luxury-nav-line {
  transform: translateX(0);
}

/* Button active state */
.luxury-nav-button:active {
  transform: scale(0.96);
  transition: transform 0.15s ease;
}

/* 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: 40px;
  height: 40px;
}

.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;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .luxury-navigation {
    padding: 0 1rem;
  }
  
  .luxury-nav-button {
    width: 38px;
    height: 38px;
  }
  
  .luxury-nav-line {
    width: 16px;
  }
} /* Updated ProductShowcase Section to match TrendingProducts */
.product-showcase-section {
  position: relative;
  padding: 4rem 0 6rem;
  overflow: hidden;
}

/* Advanced background elements with movement */
.showcase-bg-elements {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bg-element {
  position: absolute;
  opacity: 0.05;
}

.showcase-circle-element {
  bottom: 15%;
  left: 10%;
  width: 250px;
  height: 250px;
  border: 1px solid var(--kelp-300);
  border-radius: 50%;
}

.showcase-circle-element::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  border: 1px dashed var(--kelp-400);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
}

.showcase-dot-grid-element {
  top: 20%;
  right: 15%;
  width: 200px;
  height: 200px;
  background-image: 
    radial-gradient(var(--kelp-300) 1px, transparent 1px),
    radial-gradient(var(--gold-light) 0.5px, transparent 0.5px);
  background-size: 15px 15px, 25px 25px;
  background-position: 0 0, 7.5px 7.5px;
  opacity: 0.07;
}

/* Refined Heading area with vertical line to match collections section */
.showcase-heading-area {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.showcase-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 */
}

.showcase-heading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 20px;
  background-color: var(--gold);
  opacity: 0;
  animation: verticalLineReveal 1.5s 1s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes verticalLineReveal {
  from { height: 0; opacity: 0; }
  to { height: 20px; opacity: 0.7; }
}

/* Remove previous vertical elements that now conflict with our header line */
.showcase-heading-area::before, 
.showcase-heading-area::after {
  display: none;
}

.showcase-subheading {
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  color: var(--gold-dark);
  margin-bottom: 1.5rem;
  max-width: 450px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Updated container to match trending products */
.showcase-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;
  padding-bottom: 6rem;
}

/* Updated tabs to match TrendingProducts */
.showcase-tabs-container {
  position: relative;
  margin-bottom: 20px;
  padding: 10px 0;
  width: 100%;
  max-width: 420px;
}

.showcase-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  border-radius: 5px;
  background: rgba(var(--kelp-100-rgb), 0.2);
  padding: 4px 8px;
  /* Remove clip path */
}

.showcase-tab {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 5px;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: var(--kelp-700);
  letter-spacing: 0.5px;
  overflow: hidden;
  text-align: center;
  font-weight: var(--font-weight-regular); /* Use CSS variable for consistency */
  flex: 1;
  transition: color 0.3s ease;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.showcase-tab:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* New active state approach - more luxurious */
.showcase-tab.active {
  color: var(--kelp-900);
  position: relative;
  background: var(--kelp-50); /* Changed to kelp-50 */
}

/* Luxury active tab indicator with improved edges */
.tab-indicator {
  position: absolute;
  bottom: 2px;
  left: 5px;
  right: 5px;
  top: 2px;
  height: auto;
  background: var(--kelp-50); /* Changed to kelp-50 */
  z-index: -1;
  
  /* Remove clip path and use border radius instead */
  border-radius: 6px;
  
  /* Add animation */
  animation: tabIndicatorFadeIn 0.2s ease forwards;
}

/* Updated separator styling */
.tabs-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 15px;
}

.separator-line-vertical {
  width: 1px;
  height: 12px;
  background: linear-gradient(
    to bottom,
    var(--kelp-300),
    var(--kelp-500),
    var(--kelp-300)
  );
  opacity: 0.5;
}

/* Character styling for tabs */
.showcase-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%;
}

.showcase-tab .char {
  display: inline-block;
}



/* Enhance active tab text */
.showcase-tab.active .showcase-tab-text {
  font-weight: var(--font-weight-medium); /* Use CSS variable for consistency */
}

/* Product grid with refined styling - matching trending products */
.showcase-products-grid {
  width: 100%;
  opacity: 1;
  transition: opacity 0.15s ease;
  will-change: opacity;
  overflow: hidden;
}

.showcase-products-grid.is-transitioning {
  opacity: 0.7;
}

.products-grid-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  width: 100%;
  contain: layout style;
  min-height: 520px; /* Ensure consistent height */
}

.showcase-product-item {
  contain: layout style;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.showcase-product-item.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Updated .view-all-link styles */
.showcase-view-all {
  margin-top: 30px;
  position: relative;
  z-index: 2;
}

.view-all-link {
  /* Same styles as TrendingProducts */
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kelp-700);
  background: linear-gradient(120deg, 
  transparent 20%,
  rgba(var(--gold-rgb), 0.08) 45%,
  transparent 80%
);
 
  border: none;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  overflow: hidden;
}

.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;
  /* animation: textShimmer 12s linear infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes textShimmer {
  to { background-position: 200% center; }
}

.view-all-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    var(--kelp-100),
    var(--kelp-300) 20%,
    var(--kelp-400) 50%,
    var(--kelp-300) 80%,
    var(--kelp-100)
  );
  transform: translateX(-100%);
  /* animation: lineSlide 7s infinite linear; - DISABLED FOR PERFORMANCE */
}

/* Keep all the same pseudo-element styles and animations */

/* Luxurious movement lines */
.showcase-movement-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--kelp-300), transparent);
  height: 1px;
  width: 100%;
  transform-origin: left center;
  opacity: 0.05;
  z-index: 1;
}

.showcase-movement-line:nth-child(1) {
  top: 25%;
}

.showcase-movement-line:nth-child(2) {
  top: 45%;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.showcase-movement-line:nth-child(3) {
  bottom: 35%;
}

/* Carousel container with navigation */
.showcase-carousel-container {
  position: relative;
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
}

/* Product carousel navigation */
.showcase-carousel-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.carousel-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.2);
  color: var(--kelp-600);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-nav-button:hover {
  background-color: rgba(var(--kelp-100-rgb), 0.2);
  color: var(--kelp-800);
  border-color: rgba(var(--kelp-400-rgb), 0.3);
}

.carousel-nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Carousel indicators */
.carousel-indicators {
  display: flex;
  gap: 8px;
  align-items: center;
}

.carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(var(--kelp-300-rgb), 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicator.active {
  background-color: rgba(var(--gold-rgb), 0.5);
  transform: scale(1.2);
}

.carousel-indicator:hover:not(.active) {
  background-color: rgba(var(--kelp-400-rgb), 0.3);
}

.carousel-indicator:disabled {
  cursor: not-allowed;
}

/* Responsive styles */
@media (max-width: 1200px) {
  .products-grid-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .products-grid-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .showcase-tabs-container {
    max-width: 350px;
  }
  
 
  
 
  
  .carousel-nav-button {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 640px) {
  .product-showcase-section {
    padding: 30px 0 40px;
  }
  
  .products-grid-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .showcase-tabs-container {
    max-width: 300px;
  }
  .showcase-heading{
    font-size: 12px;
  }
  .showcase-subheading{
    font-size: 10px;
  }

  
  .view-all-link {
    padding: 10px 25px;
    font-size: 10px;
  }
  
  .carousel-nav-button {
    width: 30px;
    height: 30px;
  }
  
  .carousel-indicator {
    width: 6px;
    height: 6px;
  }
  
  .showcase-carousel-navigation {
    margin-top: 20px;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .products-grid-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
}

/* Touch device optimization */
@media (hover: none) {
  .view-all-link:active {
    transform: scale(0.98);
  }
}

/* Optimize for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .showcase-product-item,
  .tab-indicator,
  .showcase-tab {
    transition: none !important;
    animation: none !important;
  }
  
  .showcase-product-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Add these navigation styles to match FeaturedCollections */
.showcase-navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  margin-top: 25px;
}

.navigation-arrows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 90%;
  margin: 0 auto 15px;
}

.arrow-button {
  width: 46px;
  height: 46px;
  position: relative;
  background-color: transparent;
  border: 1px solid rgba(var(--kelp-300-rgb), 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.arrow-button:hover {
  background-color: rgba(var(--kelp-50-rgb), 0.05);
  border-color: rgba(var(--kelp-400-rgb), 0.2);
  opacity: 1;
}

.arrow-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.arrow-button::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--kelp-500);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}

.arrow-button.prev::after,
.arrow-button.next::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--kelp-500);
  border-right: 1px solid var(--kelp-500);
  position: absolute;
  top: 50%;
  transition: border-color 0.3s ease;
}

.arrow-button.prev::after {
  left: calc(50% - 5px);
  transform: translateY(-50%) rotate(-135deg);
}

.arrow-button.next::after {
  right: calc(50% - 5px);
  transform: translateY(-50%) rotate(45deg);
}

.arrow-button:hover::before,
.arrow-button:hover::after {
  background-color: var(--kelp-700);
  border-color: var(--kelp-700);
}

/* Updated carousel indicators */
.carousel-indicators {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 5px;
}

.carousel-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(var(--kelp-300-rgb), 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicator.active {
  background-color: rgba(var(--gold-rgb), 0.5);
  transform: scale(1.2);
}

.carousel-indicator:hover:not(.active) {
  background-color: rgba(var(--kelp-400-rgb), 0.3);
}

/* Responsive styles */
@media (max-width: 1200px) {
  .arrow-button {
    width: 42px;
    height: 42px;
  }
  
  .arrow-button::before {
    width: 22px;
  }
}

@media (max-width: 960px) {
  .arrow-button {
    width: 38px;
    height: 38px;
  }
  
  .arrow-button::before {
    width: 20px;
  }
  
  .navigation-arrows {
    max-width: 95%;
  }
}

@media (max-width: 640px) {
  .arrow-button {
    width: 32px;
    height: 32px;
  }
  
  .arrow-button::before {
    width: 18px;
  }
  
  .arrow-button.prev::after,
  .arrow-button.next::after {
    width: 7px;
    height: 7px;
  }
  
  .navigation-arrows {
    max-width: 100%;
  }
  
  .carousel-indicator {
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 480px) {
  .arrow-button {
    width: 28px;
    height: 28px;
  }
  
  .arrow-button::before {
    width: 16px;
  }
  
  .arrow-button.prev::after,
  .arrow-button.next::after {
    width: 6px;
    height: 6px;
  }
}

/* Language-specific font handling for luxury appearance */
/* Persian/Farsi language improvements - smaller and more luxurious */
[lang="fa"] .showcase-tab,
[lang="fa"] .showcase-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"] .showcase-tab,
[lang="ar"] .showcase-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"] .showcase-tab,
[lang="zh"] .showcase-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"] .showcase-tab,
[lang="ja"] .showcase-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"] .showcase-tab,
[lang="fr"] .showcase-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"] .showcase-tab,
[lang="es"] .showcase-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"] .showcase-tab,
[lang="de"] .showcase-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"] .showcase-tab,
[lang="it"] .showcase-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 */
.showcase-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"] .showcase-tab,
  [lang="fa"] .showcase-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  [lang="ar"] .showcase-tab,
  [lang="ar"] .showcase-tab-text {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
  
  [lang="zh"] .showcase-tab,
  [lang="zh"] .showcase-tab-text {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
  
  [lang="ja"] .showcase-tab,
  [lang="ja"] .showcase-tab-text {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
  
  [lang="fr"] .showcase-tab,
  [lang="fr"] .showcase-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  [lang="es"] .showcase-tab,
  [lang="es"] .showcase-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  [lang="de"] .showcase-tab,
  [lang="de"] .showcase-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  [lang="it"] .showcase-tab,
  [lang="it"] .showcase-tab-text {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
  
  .showcase-tabs-container {
    min-width: 280px;
    max-width: 380px;
  }
}

/* Remove old placeholder styles */
/* .premium-product-card__image-placeholder { ... } */
/* .premium-product-card__title-placeholder { ... } */
/* .premium-product-card__price-placeholder { ... } */


/* --- Add Placeholder Styles (Copied & Adapted from TrendingProducts.css) --- */

/* Updated placeholder styling to match shop page - PRODUCT SHOWCASE SPECIFIC */
.showcase-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  width: 100%;
}

/* Main placeholder container - PRODUCT SHOWCASE SPECIFIC */
.showcase-product-placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  contain: layout style;
  overflow: hidden;
}

/* Image Area - PRODUCT SHOWCASE SPECIFIC */
.showcase-placeholder-image-area {
  position: relative;
  width: 100%;
  padding-bottom: 125%;
  background-color: rgba(var(--kelp-100-rgb), 0.3);
  overflow: hidden;
  border-radius: 8px;
}

/* Content within the image area - PRODUCT SHOWCASE SPECIFIC */
.showcase-placeholder-image-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Target the SVG logo inside the placeholder - PRODUCT SHOWCASE SPECIFIC */
.showcase-placeholder-image-content svg {
  width: 40px;
  height: 40px;
  opacity: 0.5;
  /* Remove all transitions and animations */
}

/* Shimmer effect - PRODUCT SHOWCASE SPECIFIC */
.showcase-placeholder-shimmer {
  position: absolute;
  inset: 0;
  /* Remove all animations - make static */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--kelp-50-rgb), 0.15) 50%,
    transparent 100%
  );
  /* Remove animation */
  z-index: 0;
}

/* External Info Area Placeholder - PRODUCT SHOWCASE SPECIFIC */
.showcase-placeholder-external-info {
  padding: 12px 8px 6px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Remove background */
  border-radius: 8px;
  /* Remove all transitions */
}

/* Name Placeholder Line - PRODUCT SHOWCASE SPECIFIC */
.showcase-placeholder-external-name {
  height: 14px;
  width: 75%;
  max-width: 160px;
  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;
  position: relative;
  overflow: hidden;
  /* Remove all animations and transitions */
}

/* Price Placeholder Line - PRODUCT SHOWCASE SPECIFIC */
.showcase-placeholder-external-price {
  height: 12px;
  width: 45%;
  max-width: 90px;
  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;
  position: relative;
  overflow: hidden;
  /* Remove all transitions */
}

/* Remove all hover effects and animations */
.showcase-product-placeholder:hover .showcase-placeholder-external-info {
  /* Remove all hover effects */
}

.showcase-product-placeholder:hover .showcase-placeholder-external-name {
  /* Remove all hover effects */
}

.showcase-product-placeholder:hover .showcase-placeholder-external-price {
  /* Remove all hover effects */
}

/* Responsive styles - PRODUCT SHOWCASE SPECIFIC */
@media (max-width: 960px) {
  .showcase-placeholder-image-content svg {
    width: 35px;
    height: 35px;
  }
  .showcase-placeholder-external-name {
    height: 11px;
    width: 75%;
    max-width: 140px;
  }
  .showcase-placeholder-external-price {
    height: 9px;
    width: 45%;
    max-width: 70px;
  }
  .showcase-placeholder-external-info {
    padding: 8px 5px 0;
    margin-top: 6px;
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .showcase-placeholder-image-content svg {
    width: 30px;
    height: 30px;
  }
  .showcase-placeholder-external-name {
    height: 10px;
    width: 80%;
    max-width: 120px;
  }
  .showcase-placeholder-external-price {
    height: 8px;
    width: 50%;
    max-width: 60px;
  }
  .showcase-placeholder-external-info {
    padding: 1rem;
    margin-top: 5px;
    gap: 4px;
  }
}

@media (max-width: 400px) {
   .showcase-placeholder-image-content svg {
    width: 25px;
    height: 25px;
  }
   .showcase-placeholder-external-name {
    height: 9px;
    width: 85%;
    max-width: 100px;
  }
  .showcase-placeholder-external-price {
    height: 7px;
    width: 55%;
    max-width: 50px;
  }
   .showcase-placeholder-external-info {
     padding: 1rem;
     margin-top: 4px;
     gap: 3px;
   }
}

/* --- End Placeholder Styles --- */

/* ========== MOBILE PERFORMANCE OPTIMIZATIONS ========== */
/* Simplified animations to prevent mobile heating */

@media (max-width: 768px) {
  /* Disable infinite animations that cause heating */
  .text-shimmer-effect,
  .line-slide-animation,
  .showcase-glow {
    animation: none !important;
  }
  
  /* Remove expensive backdrop filters */
  .product-card,
  .showcase-overlay,
  [class*="backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Simple entry animations only */
  .product-showcase-section {
    animation: simpleFadeIn 0.8s ease-out;
  }
  
  .product-card {
    animation: simpleSlideUp 0.5s ease-out;
  }
  
  /* Force hardware acceleration */
  .product-showcase-section,
  .product-card,
  .showcase-container {
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  

}

/* Simple, performance-friendly animations */
@keyframes simpleFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes simpleSlideUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .product-showcase-section,
  .product-card,
  .text-shimmer-effect,
  .line-slide-animation {
    animation: none !important;
    transition: none !important;
  }
}
/* --- Premium Product Card - Animated External Info & Luxurious Overlay --- */

/* Main Container */
.premium-product-card-container {
  position: relative;
  width: 100%;
  height: 100%;
 
  padding-bottom: 70px; /* Increased space for centered name + price */
  contain: layout style; 
  cursor: pointer;
}

/* The Card Element */
.premium-product-card {
  position: relative;
  width: 100%;
  height: 100%;
 
  /* Updated Background: Highly transparent Kelp */
  background-color: rgba(var(--kelp-100-rgb), 0.2); /* Kelp 100 with 20% opacity */
  /* Updated Border: Very subtle */
  border: 1px solid rgba(var(--kelp-200-rgb), 0.1); /* Even lighter/more transparent */
  
  /* Optional: Add backdrop-filter if there's content *behind* the card */
  /* This will blur whatever is visible through the transparent background */
  /* Consider increasing blur slightly with higher transparency */


  /* --- Luxurious Cold Shadow (Base State) --- */
  box-shadow:
    /* Soft, distant cool grey shadow */
    0 15px 35px rgba(180, 190, 200, 0.1), /* x y blur color(cool grey) */
    /* Closer, slightly darker subtle shadow */
    0 5px 15px rgba(var(--kelp-900-rgb), 0.04); /* x y blur color(dark kelp) */

  overflow: hidden; /* Keep overflow hidden */
  transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease; /* Add transitions */
  z-index: 1;
  border-radius: 8px; 
  will-change: box-shadow;
}

.premium-product-card-container.is-hovered .premium-product-card {
  /* --- Luxurious Cold Shadow (Hover State) --- */
  box-shadow:
    /* More pronounced distant cool grey shadow */
    0 20px 45px rgba(180, 190, 200, 0.15), /* Increased y, blur, opacity */
    /* More pronounced closer shadow */
    0 8px 20px rgba(var(--kelp-900-rgb), 0.07); /* Increased y, blur, opacity */

  /* Optional: Slightly adjust background/border on hover if desired */
  /* background-color: rgba(var(--kelp-100-rgb), 0.25); */
  /* border-color: rgba(var(--kelp-200-rgb), 0.15); */
}

/* Image Container - Takes full card height initially */
.premium-product-card__image-container {
  position: absolute; /* Positioned within the card */
  inset: 0;
  height: 100%; /* Full height */
  width: 100%;
  min-height: 300px; /* Ensure minimum height for image display */
  z-index: 1;
  border-radius: 8px; /* Match card */
  overflow: hidden; /* Clip image */
  /* Remove background color here if card background should show through */
  /* background-color: var(--kelp-100); */ 
}

.premium-product-card__image-wrapper {
  width: 100%;
  height: 100%;
  min-height: 300px; /* Ensure minimum height for image display */
  position: relative;
}

/* Image Styling */
.premium-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px; /* Ensure minimum height for image display */
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute; /* Position images for fade effect */
  inset: 0;
  border-radius: 8px; /* Match card */
  opacity: 1; /* Start visible by default */
  transform: scale(1.0);
  /* Refined transition for a smoother, luxurious feel */
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); /* Removed filter */
  will-change: opacity, transform;
}

.premium-product-card__image.loaded {
  opacity: 1; /* Keep visible when loaded */
}

/* Secondary image styling */
.premium-product-card__image--secondary {
  opacity: 0; /* Hidden by default */
  z-index: 2; /* Ensure it's above primary */
  /* Base transition: Apply only transform transition initially */
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, transform; /* Keep will-change */
}

/* Show secondary image on container hover (no JS delay needed) */
/* Apply delayed opacity transition on hover - Synced with overlay */
.premium-product-card-container.is-hovered .premium-product-card__image--secondary {
  opacity: 1; /* Show on hover */
  /* Adjust transition timing to match overlay reveal */
  /* Opacity: duration 0.6s, delay 0.05s */
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);   /* Keep transform transition */
}

/* Variant Hover Image Styling - NEW */
.premium-product-card__image--variant-hover {
  opacity: 0; /* Hidden by default */
  z-index: 3; /* Above primary and secondary images */
  /* Smooth transition for variant image - keep this responsive */
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
  will-change: opacity;
}
.premium-product-card__image--variant-hover.visible {
  opacity: 1; /* Show when hoveredVariantImageUrl is set */
}

/* Image hover effect (scale) - Apply immediately on hover */
/* Apply scale to primary image ONLY if secondary and variant images are NOT visible */
.premium-product-card-container.is-hovered .premium-product-card__image:not(.premium-product-card__image--secondary):not(.premium-product-card__image--variant-hover.visible) {
  transform: scale(1.03); 
  /* Removed filter */
}
/* Apply scale to secondary image ONLY if it's visible and variant image is NOT visible */
/* Use the direct hover selector for the secondary image */
/* Apply scale effect when secondary is hovered (and variant isn't showing) */
/* We need to check if the variant image is visible using :not selector */
:is(.premium-product-card-container.is-hovered .premium-product-card__image--secondary):not(:has( + .premium-product-card__image--variant-hover.visible)) {
    transform: scale(1.03);
  }
/* Removed filter */

/* Ensure variant image itself doesn't get the hover scale */
.premium-product-card-container.is-hovered .premium-product-card__image--variant-hover.visible {
  /* filter: none; */ /* Filter removed */
  transform: scale(1.0); /* Keep variant image crisp */
}

/* Image Placeholder */
.premium-product-card__image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column; /* Allow text below logo */
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--kelp-100-rgb), 0.4);
  border-radius: 8px; /* Match card */
  z-index: 0; /* Behind images */
  gap: 8px; /* Space between logo and text */
  min-height: 300px; /* Ensure minimum height for image display */
}

/* Style for error state */
.premium-product-card__image-placeholder.is-error {
  /* background-color: rgba(var(--error-light-rgb), 0.1); Optional different background */
}

.premium-product-card__image-placeholder .placeholder-error-text {
  font-size: 0.7rem;
  color: var(--kelp-600);
  text-align: center;
  padding: 0 5px;
}

/* Image Error State */
.premium-product-card__image-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--kelp-50), var(--kelp-100));
  z-index: 3; /* Above images */
  min-height: 300px; /* Ensure minimum height for image display */
}

/* Bookmark Button - Enhanced Luxury Style */
.premium-product-card__bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  cursor: pointer;

  /* Size and Padding - Reduced Size */
  width: 32px; /* Reduced from 36px */
  height: 32px; /* Reduced from 36px */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Glassy Background */
  background-color: rgba(var(--kelp-50-rgb), 0.25);
  /* backdrop-filter: blur(6px);
  -webkit-/* backdrop-filter: blur(6px);

  /* Subtle Border */
  border: 1px solid rgba(var(--kelp-200-rgb), 0.15);

  /* Clip Path - Adjust corner cut for smaller size */
  clip-path: polygon(
    0% 0%,                 /* top left */
    calc(100% - 8px) 0%,   /* top right start cut (reduced from 10px) */
    100% 8px,              /* top right end cut (reduced from 10px) */
    100% 100%,             /* bottom right */
    0% 100%                /* bottom left */
  );

  /* Transition */
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              transform 0.3s ease,
              opacity 0.3s ease;

  /* Initial state for hover reveal */
  opacity: 0.8;
  transform: scale(0.95);
}

/* Hover State */
.premium-product-card-container.is-hovered .premium-product-card__bookmark {
  opacity: 1;
  transform: scale(1);
  background-color: rgba(var(--kelp-50-rgb), 0.4); /* Slightly more opaque */
  border-color: rgba(var(--kelp-200-rgb), 0.25);
}

/* Active (Bookmarked) State */
.premium-product-card__bookmark.active {
  background-color: rgba(var(--accent-olive-rgb), 0.15); /* Use accent color subtly */
  border-color: rgba(var(--accent-olive-rgb), 0.3);
  opacity: 1; /* Ensure fully visible when active */
  transform: scale(1); /* Ensure full size when active */
}

/* Icon Styling */
.premium-product-card__bookmark svg {
  transition: color 0.3s ease, transform 0.2s ease; /* Add transform transition */
}

/* Icon color adjustment for base state */
.premium-product-card__bookmark:not(.active) svg {
   /* Color is now set by the component default, remove !important if not needed */
   /* color: var(--kelp-500) !important; */
}

/* Icon color for active state */
.premium-product-card__bookmark.active svg {
  /* Fill the icon when active */
  fill: var(--accent-olive);
  /* Ensure stroke matches fill or is slightly darker/lighter if preferred */
  stroke: var(--accent-olive);
  /* color: var(--accent-olive) !important; */ /* color might not be needed if stroke/fill are set */
}

/* Optional: Subtle icon scale on hover */
.premium-product-card-container.is-hovered .premium-product-card__bookmark:not(.active) svg {
   transform: scale(1.05);
   /* Darker kelp on hover */
   stroke: var(--kelp-800); /* Adjust stroke on hover */
   /* color: var(--kelp-700) !important; */
}
.premium-product-card-container.is-hovered .premium-product-card__bookmark.active svg {
   transform: scale(1.05);
}

/* Variants Count Indicator */
.premium-product-card__variants-count {
  position: absolute;
  left: 12px; 
  top: 12px; /* Moved to top-left */
  bottom: auto; /* Reset bottom */
  font-size: 10px; 
  font-weight: var(--font-weight-medium);
  color: var(--kelp-900);
  background-color: rgba(var(--kelp-50-rgb), 0.7);
  /* backdrop-filter: blur(3px);
  -webkit-/* backdrop-filter: blur(3px);
  padding: 3px 6px;
  border-radius: 4px;
  z-index: 15; /* Ensure above overlay */
  opacity: 0;
  transform: translateY(-5px); /* Animate from top */
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* Show variants count on hover */
.premium-product-card-container.is-hovered .premium-product-card__variants-count {
  opacity: 1;
  transform: translateY(0);
}

/* --- Content Overlay (Default Solid Color) --- */
.premium-product-card__content-overlay {
  bottom: 15px; 
  left: 50%;
  transform: translateX(-50%); 
  
  width: calc(100% - 20px); 
  max-width: 280px !important; /* Keep fixed width */
  z-index: 5; 
  
  /* Use variable with fallback to solid color */
  background: var(--product-card-overlay-bg, rgba(var(--kelp-50-rgb), 0.96));
  /* backdrop-filter: blur(18px); - Keep blur if needed */
  /* -webkit-backdrop-filter: blur(18px); */
  
  /* Adjust blur/border/shadow to complement the new background */
  border: 1px solid rgba(var(--kelp-200-rgb), 0.25); 
  /* Shadow might need adjustment */
  box-shadow: 0 8px 35px rgba(var(--kelp-900-rgb), 0.1); 
  
  /* Adjust padding: Ensure enough bottom padding for absolute collection */
  padding: 45px 20px 40px 20px; /* Increased bottom padding */
  min-height: 120px !important; /* Keep fixed min-height */
  border-radius: 10px; 

  /* Keep clip-path animation */
  clip-path: inset(100% 50% 0% 50% round 8px); 
  opacity: 1; 
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
  will-change: clip-path; 
  pointer-events: none; 
  /* Make overlay relative for absolute positioning of children */
  position: absolute; /* Already absolute, but good reminder */
}

/* Hover state for overlay: Reveal */
.premium-product-card-container.is-hovered .premium-product-card__content-overlay {
  clip-path: inset(0% 0% 0% 0% round 8px); 
  /* Overlay transition: starts after 0.05s, duration 0.6s */
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; 
  pointer-events: auto; 
}

/* Content inside the overlay (Variants, Collection) */
.premium-product-card__content-overlay .premium-product-card__color-variants {
  margin-top: 10px; 
  padding-bottom: 0; /* Remove bottom padding here */
  /* Add min-height to reserve space even if empty, but only if rendered */
  /* min-height: 25px; */ /* Let's rely on absolute positioning of collection instead */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s; 
  gap: 14px; 
  align-items: center; 
}
.premium-product-card__color-variant {
  width: 20px; /* Slightly Bigger Size */
  height: 20px; 
  /* Shape: Rounded rectangle */
  border-radius: 2px; 
  cursor: pointer;
  position: relative;
  
  /* --- Two-Layer Design --- */
  /* 1. Outer Border Layer (using border) */
  border: 1px solid rgba(var(--kelp-400-rgb), 0.4); 
  /* 2. Space between border and inner color (using padding) */
  padding: 2px; 
  /* 3. Inner Color Layer (using background clipped to content) */
  background-clip: content-box !important; /* Crucial: Apply background only inside padding */
  /* Ensure inline background style takes precedence */
  background-color: transparent; /* Fallback */

  /* Luxury Texture - Subtle noise overlay (applied over inline background) */
  /* This adds a very faint texture */
  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; /* Blend the noise gently */

  /* Transition for luxurious hover effect */
  transition: border-color 0.3s ease, box-shadow 0.35s ease; 
  /* Remove transform from transition */
  /* will-change: border-color, box-shadow; */ /* Optional */
}

/* Luxurious Hover effect (No position change) */
.premium-product-card__color-variant:hover {
  /* 1. Brighter/Stronger Border */
  border-color: rgba(var(--kelp-600-rgb), 0.7); 
  /* 2. Subtle Outer Glow */
  box-shadow: 0 0 6px 1px rgba(var(--kelp-500-rgb), 0.25); 
  /* Reset transform if it was previously applied */
  transform: none; 
}

/* Style for 'more variants' indicator */
.premium-product-card__color-variant--more {
  background: none !important; /* Override inline style */
  background-image: none !important; /* Remove texture */
  border: 1px dashed rgba(var(--kelp-400-rgb), 0.6);
  box-shadow: none;
  color: var(--kelp-600);
  font-size: 10px; /* Slightly larger */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-medium);
  padding: 0; /* Remove padding for this specific variant */
}
.premium-product-card__color-variant--more:hover {
  border-color: rgba(var(--kelp-600-rgb), 0.8);
  color: var(--kelp-800);
  background-color: rgba(var(--kelp-200-rgb), 0.2) !important;
  box-shadow: 0 0 6px 1px rgba(var(--kelp-500-rgb), 0.15); /* Add subtle glow */
}

/* Collection Tag - Absolute Positioning */
.premium-product-card__content-overlay .premium-product-card__collection {
  /* Position absolutely at the bottom */
  position: absolute;
  bottom: 15px; /* Distance from overlay bottom */
  left: 20px; /* Match overlay horizontal padding */
  right: 20px; /* Match overlay horizontal padding */
  
  /* Reset margin-top as it's now absolutely positioned */
  margin-top: 0; 
  
  /* Text styling */
  text-align: center; /* Center text */
  opacity: 0; /* Animate opacity */
  transform: translateY(5px); /* Animate position slightly */
  /* Adjust delay if needed, should appear after variants */
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s; 
}

/* Collection Text Styling */
.premium-product-card__collection-text {
  display: inline-block; /* Allows centering */
  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;
}

/* Hover state for content inside overlay */
.premium-product-card-container.is-hovered .premium-product-card__content-overlay .premium-product-card__color-variants,
.premium-product-card-container.is-hovered .premium-product-card__content-overlay .premium-product-card__collection {
  opacity: 1;
  transform: translateY(0);
}


/* --- External Info (Centered & Animated) --- */
.premium-product-card__external-info {
  position: absolute;
  bottom: 5px; 
  left: 0;
  right: 0;
  text-align: center; 
  opacity: 1; 
  z-index: 7; 
  pointer-events: none; 
}

/* External Name (Base Style & Animation Target) */
.premium-product-card__external-name {
  display: block; 
  /* Smaller font size */
  font-size: 0.8rem; 
  font-weight: var(--font-weight-regular);
  /* Kelp color */
  color: var(--kelp-700); 
  margin-bottom: 3px; /* Slightly less margin */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto; 
  cursor: pointer; 
  
  /* Animation Setup */
  position: relative; 
  z-index: 6; 
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, 
              color 0.4s ease 0.05s,
              font-size 0.4s ease 0.05s;
  will-change: transform, color, font-size;
  /* Reduce padding-top to bring line closer */
  padding-top: 18px; 
}
.premium-product-card__external-name:hover {
  color: var(--kelp-900); /* Darker kelp on hover */
}

/* Luxury vertical line using pseudo-element */
.premium-product-card__external-name::before {
  content: '';
  position: absolute;
  /* Adjust top position to match reduced padding */
  top: 4px; 
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px; /* Slightly shorter initial height */
  background: linear-gradient(
    to bottom,
    rgba(var(--kelp-500-rgb), 0.6), /* Slightly less opaque */
    rgba(var(--kelp-500-rgb), 0.25)
  );
  transition: height 0.4s ease, opacity 0.4s ease;
}

/* Hover state for line */
.premium-product-card-container.is-hovered .premium-product-card__external-name::before {
  height: 12px; 
  opacity: 0.5; /* Adjust opacity */
}

/* External Price Container (Base Style & Animation Target) */
.premium-product-card__external-price {
  position: relative; 
  z-index: 6; 
  /* Smaller font size */
  font-size: 0.8rem; 
  pointer-events: auto; 
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.08s; 
  will-change: transform;
}
/* Target inner price elements for color/size changes */
.premium-product-card__external-price .ProductPrice--external {
  /* Colder Default Price: Use a potentially cooler/grayer Kelp */
  color: var(--kelp-700); /* Changed from kelp-800 */
  font-weight: var(--font-weight-regular);
  transition: color 0.4s ease 0.08s, font-size 0.4s ease 0.08s;
}
.premium-product-card__external-price .original-price,
.premium-product-card__external-price s {
  text-decoration: none !important;
  /* Colder Original Price: Use a lighter cool/gray Kelp */
  color: var(--kelp-400); /* Changed from kelp-500 */
  font-size: 0.85em; 
  margin-left: 6px;
  transition: color 0.4s ease 0.08s, font-size 0.4s ease 0.08s;
}

/* --- Hover State: Animate External Name/Price INTO Overlay --- */
.premium-product-card-container.is-hovered .premium-product-card__external-name {
  /* Re-adjust translateY due to padding change, might need fine-tuning */
  transform: translateY(-70px); 
  /* Darkest Kelp in overlay */
  color: var(--kelp-900); 
  /* Keep font size consistent or adjust if needed */
  font-size: 0.8rem; 
  margin-bottom: 6px; /* Adjust spacing in overlay */
}

.premium-product-card-container.is-hovered .premium-product-card__external-price {
  /* Re-adjust translateY */
  transform: translateY(-70px); 
}
/* Style the inner price elements on hover */
.premium-product-card-container.is-hovered .premium-product-card__external-price .ProductPrice--external {
  /* Colder Hovered Price: Use darkest neutral Kelp */
  color: var(--kelp-900); /* Changed from accent-olive */
  /* Keep font size consistent or adjust */
  font-size: 0.8rem; 
  font-weight: var(--font-weight-medium);
}
.premium-product-card-container.is-hovered .premium-product-card__external-price .original-price,
.premium-product-card-container.is-hovered .premium-product-card__external-price s {
  /* Colder Hovered Original Price: Use a medium cool/gray Kelp */
  color: var(--kelp-500); /* Changed from kelp-600 */
  font-size: 0.8em;
}


/* Responsive styles */
@media (max-width: 768px) {
  .premium-product-card-container {
    padding-bottom: 65px; /* Adjust space */
  }
  /* Adjust external info font sizes */
  .premium-product-card__external-name { font-size: 0.75rem; padding-top: 16px; }
  .premium-product-card__external-price { font-size: 0.75rem; }
  
  .premium-product-card__content-overlay {
    padding: 40px 16px 35px 16px; /* Adjust bottom padding */
    min-height: 110px !important;
    max-width: 260px !important;
  }
  .premium-product-card__content-overlay .premium-product-card__collection {
    bottom: 12px; /* Adjust bottom */
    left: 16px;
    right: 16px;
  }
  /* Adjust hover transform values for name/price */
  .premium-product-card-container.is-hovered .premium-product-card__external-name {
    transform: translateY(-65px); /* Re-adjust */
    font-size: 0.75rem; 
  }
  .premium-product-card-container.is-hovered .premium-product-card__external-price {
    transform: translateY(-65px); /* Re-adjust */
  }
  .premium-product-card-container.is-hovered .premium-product-card__external-price .ProductPrice--external {
    font-size: 0.75rem; 
  }
  .premium-product-card__content-overlay .premium-product-card__color-variants {
    gap: 12px; 
  }
  .premium-product-card__color-variant {
    width: 18px; height: 18px;
    padding: 2px; /* Keep padding consistent or adjust slightly */
  }
  .premium-product-card__external-name::before { top: 3px; height: 7px; }
  .premium-product-card-container.is-hovered .premium-product-card__external-name::before { height: 11px; }

  /* Optional: Slightly smaller bookmark for tablets */
  .premium-product-card__bookmark {
    width: 30px;
    height: 30px;
    clip-path: polygon(0% 0%, calc(100% - 7px) 0%, 100% 7px, 100% 100%, 0% 100%);
  }
}

@media (max-width: 640px) {
  /* Reduce bookmark size for mobile */
  .premium-product-card__bookmark {
    width: 28px; /* Further reduced size */
    height: 28px;
    top: 8px; /* Adjust position */
    right: 8px;
    /* Adjust clip-path for smaller size */
    clip-path: polygon(
      0% 0%,
      calc(100% - 6px) 0%, /* Smaller cut */
      100% 6px,
      100% 100%,
      0% 100%
    );
   
  }

  /* Adjust icon size within the smaller button if needed */
  .premium-product-card__bookmark svg {
     /* If using size prop in component, this might not be needed */
     /* width: 16px; */
     /* height: 16px; */
  }
}

@media (max-width: 480px) {
  .premium-product-card-container {
    padding-bottom: 60px; /* Adjust space */
  }
  .premium-product-card__external-name { font-size: 0.7rem; padding-top: 15px; }
  .premium-product-card__external-price { font-size: 0.7rem; }

  .premium-product-card__content-overlay {
    padding: 35px 14px 30px 14px; /* Adjust bottom padding */
    min-height: 100px !important;
    max-width: 240px !important;
  }
   .premium-product-card__content-overlay .premium-product-card__collection {
    bottom: 10px; /* Adjust bottom */
    left: 14px;
    right: 14px;
  }
  /* Adjust hover transform values for name/price */
  .premium-product-card-container.is-hovered .premium-product-card__external-name {
    transform: translateY(-60px); /* Re-adjust */
    font-size: 0.7rem; 
  }
  .premium-product-card-container.is-hovered .premium-product-card__external-price {
    transform: translateY(-60px); /* Re-adjust */
  }
  .premium-product-card-container.is-hovered .premium-product-card__external-price .ProductPrice--external {
    font-size: 0.7rem; 
  }
  .premium-product-card__content-overlay .premium-product-card__color-variants {
    gap: 10px; 
  }
  .premium-product-card__color-variant {
    width: 16px; height: 16px;
    padding: 1px; /* Slightly reduce padding */
  }
  .premium-product-card__external-name::before { top: 3px; height: 6px; }
  .premium-product-card-container.is-hovered .premium-product-card__external-name::before { height: 10px; }

  /* Optionally make it even smaller on very small screens */
  .premium-product-card__bookmark {
    width: 26px;
    height: 26px;
    top: 6px;
    right: 6px;
    clip-path: polygon(0% 0%, calc(100% - 5px) 0%, 100% 5px, 100% 100%, 0% 100%);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Disable image scale transform */
  .premium-product-card-container.is-hovered .premium-product-card__image:not(.premium-product-card__image--secondary):not(.premium-product-card__image--variant-hover.visible),
  .premium-product-card-container.is-hovered .premium-product-card__image--secondary:not(:has(+ .premium-product-card__image--variant-hover.visible)) {
    transform: scale(1.0);
    transition: none !important;
  }
  
  /* Ensure secondary image still appears instantly without delay */
  .premium-product-card-container.is-hovered .premium-product-card__image--secondary {
    opacity: 1;
    transition: none !important; /* Override base and hover transitions */
    /* transition-delay: 0s !important; */ /* Explicitly remove delay */
  }

  /* Ensure variant image appears instantly */
   .premium-product-card__image--variant-hover.visible {
    opacity: 1;
    transition: none !important;
  }

  /* Ensure overlay appears instantly */
  .premium-product-card-container.is-hovered .premium-product-card__content-overlay {
    clip-path: inset(0% 0% 0% 0% round 8px);
    transition: none !important;
    /* transition-delay: 0s !important; */
  }

  /* Apply final state directly for name/price */
   .premium-product-card-container.is-hovered .premium-product-card__external-name {
     transform: translateY(-70px); /* Match non-reduced end state */
     color: var(--kelp-900); 
     font-size: 0.8rem; 
     transition: none !important;
     opacity: 1 !important; 
   }
   .premium-product-card-container.is-hovered .premium-product-card__external-price {
     transform: translateY(-70px); /* Match non-reduced end state */
     transition: none !important;
     opacity: 1 !important; 
   }
   .premium-product-card-container.is-hovered .premium-product-card__external-price .ProductPrice--external {
     color: var(--kelp-900); 
     font-size: 0.8rem; 
     font-weight: var(--font-weight-medium);
     transition: none !important;
   }
   .premium-product-card-container.is-hovered .premium-product-card__external-price .original-price,
   .premium-product-card-container.is-hovered .premium-product-card__external-price s {
     color: var(--kelp-500); 
     font-size: 0.8em;
     transition: none !important;
   }
   /* Ensure variants/collection are visible */
    .premium-product-card-container.is-hovered .premium-product-card__content-overlay .premium-product-card__color-variants,
    .premium-product-card-container.is-hovered .premium-product-card__content-overlay .premium-product-card__collection {
      opacity: 1;
      transform: translateY(0);
    transition: none !important;
    }
  .premium-product-card__color-variant {
    transition: none !important;
  }
  .premium-product-card__color-variant:hover {
    border-color: rgba(var(--kelp-600-rgb), 0.7); 
    box-shadow: none; /* Disable glow for reduced motion */
  }
  /* ... other reduced motion styles ... */
} 

/* --- Disable Overlay & Hover Effects on Touch Devices --- */
@media (hover: none) {
  /* Hide the content overlay entirely */
  .premium-product-card__content-overlay {
    display: none !important;
  }

  /* Adjust container padding - reduce bottom padding */
  /* Use a value similar to your smallest mobile breakpoint or slightly less */
  .premium-product-card-container {
    padding-bottom: 55px !important; 
  }

  /* --- Reset External Info --- */
  /* Force external info to stay at the bottom, remove hover transform */
  .premium-product-card__external-name,
  .premium-product-card__external-price {
    transform: translateY(0) !important;
    transition: none !important;
    pointer-events: auto !important; /* Ensure they are clickable */
  }

  /* Force base colors for external info */
  .premium-product-card__external-name {
    color: var(--kelp-800) !important; /* Match default state */
    opacity: 1 !important; /* Ensure visible */
  }
  .premium-product-card__external-price .ProductPrice--external {
    color: var(--kelp-700) !important; /* Match default state */
  }
  .premium-product-card__external-price .original-price,
  .premium-product-card__external-price s {
    color: var(--kelp-400) !important; /* Match default state */
  }
  /* Remove the vertical line hover effect */
   .premium-product-card__external-name::before {
     transition: none !important;
     height: 8px !important; /* Keep base height */
     opacity: 0.4 !important; /* Keep base opacity */
   }

  /* --- Disable Other Hover Effects --- */
  /* Prevent secondary image from showing on tap */
  .premium-product-card__image--secondary {
    display: none !important;
    opacity: 0 !important;
  }
  /* Prevent image scaling */
  .premium-product-card__image {
     transform: scale(1.0) !important;
     transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Only allow opacity transition */
  }

  /* Hide variants count */
  .premium-product-card__variants-count {
    display: none !important;
  }

  /* Make bookmark always visible and full size */
  .premium-product-card__bookmark {
    opacity: 1 !important; /* Keep it visible */
    transform: scale(1) !important; /* Keep it full size */
    transition: none !important;
    /* Ensure it's clickable */
    pointer-events: auto !important; 
    /* Apply base background/border directly */
    background-color: rgba(var(--kelp-50-rgb), 0.25) !important; 
    border-color: rgba(var(--kelp-200-rgb), 0.15) !important;
  }
  
  /* Ensure active state styles apply on touch */
  .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;
  }

  /* Disable hover effects on color variants if any exist */
  .premium-product-card__color-variant:hover {
     border-color: rgba(var(--kelp-400-rgb), 0.5) !important; /* Base border */
     box-shadow: none !important; /* No glow */
     transform: scale(1) !important; /* No scale */
  }

  /* Ensure mobile size overrides apply */
  @media (max-width: 640px) {
    .premium-product-card__bookmark {
      width: 28px !important;
      height: 28px !important;
      top: 8px !important;
      right: 8px !important;
      clip-path: polygon(0% 0%, calc(100% - 6px) 0%, 100% 6px, 100% 100%, 0% 100%) !important;
    }
  }
  @media (max-width: 480px) {
    .premium-product-card__bookmark {
      width: 26px !important;
      height: 26px !important;
      top: 6px !important;
      right: 6px !important;
      clip-path: polygon(0% 0%, calc(100% - 5px) 0%, 100% 5px, 100% 100%, 0% 100%) !important;
    }
  }
}

/* --- Standardized Overlay Box --- */
.premium-product-card__content-overlay {
  /* Fixed dimensions */
  min-height: 120px !important; /* Fixed height */
  max-width: 280px !important; /* Fixed width */
  padding: 45px 20px 20px 20px; /* Top padding for animated name */

  /* Refined kelp styling */
  background: linear-gradient(
    to bottom right,
    rgba(var(--kelp-50-rgb), 0.9),
    rgba(var(--kelp-100-rgb), 0.85)
  );
  /* backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  box-shadow: 0 12px 30px rgba(var(--kelp-900-rgb), 0.08);

  /* Consistent border radius */
  border-radius: 10px;
}

/* --- Variants/Collection Adjustments --- */
.premium-product-card__content-overlay .premium-product-card__color-variants {
  margin-top: 10px; /* Adjust spacing */
  padding-bottom: 0;
}

.premium-product-card__content-overlay .premium-product-card__collection {
  margin-top: 8px; /* Adjust spacing */
}

/* --- Mobile Optimization --- */
@media (max-width: 768px) {
  .premium-product-card__content-overlay {
    min-height: 110px !important;
    max-width: 260px !important;
    padding: 40px 16px 16px 16px;
  }
  
  .premium-product-card-container.is-hovered .premium-product-card__external-name {
    transform: translateY(-62px);
  }
}

@media (max-width: 480px) {
  .premium-product-card__content-overlay {
    min-height: 100px !important;
    max-width: 240px !important;
    padding: 35px 14px 14px 14px;
  }
  
  .premium-product-card-container.is-hovered .premium-product-card__external-name {
    transform: translateY(-56px);
  }
}

/* RTL Support for Premium Product Card */
.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;
}

/* Enhanced animations for RTL/LTR languages */
.premium-product-card-container .premium-product-card__external-info {
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.premium-product-card-container.rtl .premium-product-card__external-info {
  transform-origin: center;
}

.premium-product-card-container.ltr .premium-product-card__external-info {
  transform-origin: center;
}

/* Smooth font transitions for different languages */
.premium-product-card__external-name,
.premium-product-card__collection-text,
.premium-product-card__variants-count {
  transition: font-family 0.3s ease-in-out, opacity 0.3s ease-in-out;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 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;
}

/* Improved transition animations for all text elements */
.premium-product-card__external-name,
.premium-product-card__external-price,
.premium-product-card__collection-text {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* RTL-aware hover animations */
.premium-product-card-container.rtl:hover .premium-product-card__external-info {
  transform: translateX(-5px);
}

.premium-product-card-container.ltr:hover .premium-product-card__external-info {
  transform: translateX(5px);
} /* =============================================
   CategoryDisplay.css - Restructured with Kelp Theme
   ============================================= */

.category-display-section {
  padding: 8rem 0; /* Increased from 6rem to 8rem to match FeaturedCollections */
  background-color: var(--kelp-100);
  overflow: hidden;
  position: relative;
}

.category-display-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(var(--kelp-400-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--kelp-400-rgb), 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.02;
  z-index: 0;
}

.category-grid-container {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  align-items: start;
  gap: 3rem;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding); /* Remove padding from here */
  height: 80vh; /* Increased from 70vh to 80vh */
  min-height: 700px; /* Increased from 600px to 700px */
}

/* Left side: "The Look" header and Image */
.category-left-side {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.category-header-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

.category-header-left span {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kelp-700);
  margin: 0;
}

.vertical-line {
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--kelp-600),
    transparent
  );
}

.category-image-container {
  flex: 1;
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-image-wrapper {
  position: absolute;
  inset: 0;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  transition: transform 0.8s ease;
}

.category-image:hover {
  transform: scale(1.02);
}

.category-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
    justify-content: center;
  background-color: var(--kelp-200);
  border-radius: 12px;
}

/* Elegant Vertical Divider */
.category-divider {
  grid-column: 2 / 3;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--kelp-400-rgb), 0.3) 20%,
    rgba(var(--kelp-400-rgb), 0.3) 80%,
    transparent 100%
  );
  justify-self: center;
  align-self: stretch;
}

/* Right side: Category name header and Product */
.category-right-side {
  grid-column: 3 / 4;
    display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.5rem;
}

.category-header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

.category-header-right span {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kelp-700);
  margin: 0;
}

.category-content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0;
}

.category-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Product container */
.category-product-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.category-product-card {
  width: 100%;
  max-width: 350px;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.category-product-card:hover {
  transform: scale(1);
}

/* Product placeholder - CATEGORY DISPLAY SPECIFIC */
.category-product-placeholder {
  width: 100%;
  max-width: 350px;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  border-radius: 16px; /* Match trending product border radius */
  padding: 1.5rem; /* Reduced padding to match trending product */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* Reduced gap */
  min-height: 350px; /* Reduced height to match trending product */
  justify-content: center;
  background: var(--kelp-50); /* Light background like trending product */
  position: relative;
  overflow: hidden;
}

.category-placeholder-image-area {
  position: relative;
  width: 100px; /* Smaller size to match trending product */
  height: 100px; /* Square aspect ratio */
  background: var(--kelp-100);
  border-radius: 12px; /* Match trending product border radius */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
}

.category-placeholder-image-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0.6; /* Match trending product opacity */
}

.category-placeholder-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--kelp-300-rgb), 0.3),
    transparent
  );
  /* Remove animation - make static */
}

.category-placeholder-external-info {
  display: flex;
  flex-direction: column;
  gap: 0.6rem; /* Reduced gap */
  width: 100%;
  align-items: center;
}

.category-placeholder-external-name {
  width: 70%; /* Slightly smaller */
  height: 18px; /* Slightly smaller */
  background: var(--kelp-200);
  border-radius: 4px;
  /* Remove animation */
}

.category-placeholder-external-price {
  width: 50%; /* Slightly smaller */
  height: 14px; /* Slightly smaller */
  background: var(--kelp-200);
  border-radius: 4px;
  /* Remove animation */
}

/* Remove all keyframes animations */

.category-cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.category-cta-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--kelp-700);
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: transparent;
  position: relative;
}

.category-cta-button:hover {
  color: var(--kelp-900);
  transform: translateY(-1px);
}

.cta-text {
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: inherit;
}

.cta-line {
  width: 20px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--kelp-600),
    transparent
  );
  transition: width 0.3s ease;
}

.category-cta-button:hover .cta-line {
  width: 30px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .category-grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 2px auto;
    gap: 2rem;
    height: auto;
    padding: 2rem var(--content-padding);
  }

  .category-left-side {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    gap: 1rem;
  }

  .category-image-container {
    height: 50vh;
  }
  
  .category-divider {
    grid-row: 3 / 4;
    grid-column: 1 / -1;
    height: 2px;
    width: 80%;
    margin-top: 0;
  }

  .category-right-side {
    grid-row: 4 / 5;
    grid-column: 1 / -1;
    gap: 1rem;
  }

  .category-content-container {
    padding: 1rem 0;
  }

  .category-content-wrapper {
    gap: 1.5rem;
  }

  .category-product-container {
    min-height: 350px;
  }

  .category-cta-button {
    align-self: center;
  }
}

@media (max-width: 767px) {
  .category-display-section {
    padding: 4rem 0;
  }

  .category-grid-container {
    gap: 2rem;
    padding: 1rem var(--content-padding);
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .category-left-side {
    order: 1;
    width: 100%;
  }

  .category-image-container {
    height: 50vh; /* Increased from 40vh */
    min-height: 320px; /* Increased from 250px */
    aspect-ratio: 4/3; /* Added 4/3 aspect ratio */
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
  }

  .category-divider {
    order: 2;
    width: 80%;
    height: 2px;
    margin: 1rem auto;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(var(--kelp-400-rgb), 0.3) 20%,
      rgba(var(--kelp-400-rgb), 0.3) 80%,
      transparent 100%
    );
  }

  .category-right-side {
    order: 3;
    width: 100%;
  }
  .category-header-left{
    padding: 4rem 0;
  }
  .category-header-left span{
    font-size: 10px;
  }
  .category-header-right span {
   font-size: 10px;
  }
  .category-header-right {
   padding: 4rem 0 1rem;
  }

  .category-product-container {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    transform: none;
    z-index: 1;
  }

  .category-product-card {
    max-width: 100%;
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(var(--kelp-900-rgb), 0.1);
  }

  .category-product-placeholder {
    max-width: 100%;
    min-height: 180px;
    padding: 1.5rem;
    background: var(--kelp-50);
    border: 1px solid rgba(var(--kelp-200-rgb), 0.3);
  }

  .category-placeholder-image-area {
    width: 100px; /* Increased from 80px */
    height: 100px; /* Increased from 80px */
  }

  .category-content-wrapper {
    gap: 1.5rem;
  }

  .category-cta-container {
    margin-top: 1rem;
  }

  .category-cta-button {
    padding: 0.3rem 0.8rem;
  }

  .cta-text {
    font-size: 0.7rem;
  }

  .cta-line {
    width: 15px;
  }

  .category-cta-button:hover .cta-line {
    width: 25px;
  }
}

@media (max-width: 480px) {
  .category-display-section {
    padding: 3rem 0;
  }

  .category-grid-container {
    gap: 1.5rem;
  }

  .category-image-container {
    height: 45vh; /* Increased from 35vh */
    min-height: 280px; /* Increased from 200px */
    aspect-ratio: 4/3; /* Added 4/3 aspect ratio */
    margin-bottom: 1.5rem;
  }

  .category-divider {
    width: 70%;
    margin: 0.8rem auto;
  }

  .category-product-container {
    width: 90%;
    max-width: 280px;
    margin: 0 auto;
  }

  .category-product-card {
    transform: scale(1);
  }

  .category-product-placeholder {
    min-height: 160px;
    padding: 1rem;
  }

  .category-placeholder-image-area {
    width: 90px; /* Increased from 70px */
    height: 90px; /* Increased from 70px */
  }

  .category-content-wrapper {
    gap: 1.2rem;
  }

  .category-cta-container {
    margin-top: 0.8rem;
  }

  .category-cta-button {
    padding: 0.2rem 0.6rem;
  }

  .cta-text {
    font-size: 0.65rem;
  }

  .cta-line {
    width: 12px;
  }

  .category-cta-button:hover .cta-line {
    width: 20px;
  }
}
/* =============================================
   BrandStory.css - Original Card Design with Vertical Lines
   ============================================= */

/* ---- 1. MAIN SECTION LAYOUT ---- */
.brand-story-section {
  position: relative;
  padding: 8rem 0 0rem;
  background-color: var(--kelp-100);
  overflow: hidden;
  min-height: 90vh;
  z-index: 1;
  margin-top: -80px;
}

/* Section connector */
.story-section-connector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top,
    transparent,
    var(--kelp-100) 80%);
  z-index: 1;
  pointer-events: none;
}

.brand-story-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 50px var(--spacing-md) 4rem;
  position: relative;
  padding-bottom: 10rem;
  z-index: 3;
}

/* ---- 2. HEADER SECTION ---- */
.story-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.story-title {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-3xl);
  color: var(--kelp-900);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  text-transform: none;
  position: relative;
}

.story-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.7;
}

.story-subtitle {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-lg);
  color: var(--kelp-600);
  letter-spacing: 0.05em;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.title-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.title-line { display: none; }
.title-diamond { display: none; }

/* ---- 3. CONTENT LAYOUT ---- */
.story-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 3rem;
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

.story-side-content-top,
.story-side-content-bottom,
.story-right-content-top,
.story-right-content-bottom {
  position: relative;
}

/* Grid positioning */
.story-side-content-top { grid-column: 1; grid-row: 1; justify-self: end; padding-right: 3rem; }
.story-side-content-bottom { grid-column: 1; grid-row: 3; justify-self: end; padding-right: 3rem; }
.story-right-content-top { grid-column: 3; grid-row: 1; justify-self: start; padding-left: 3rem; }
.story-right-content-bottom { grid-column: 3; grid-row: 3; justify-self: start; padding-left: 3rem; }

/* ---- 4. CONTENT FRAMES WITH VERTICAL LINES ---- */
.content-frame {
  position: relative;
  padding: 2rem 2rem 2rem 3rem; /* Extra padding on left for vertical line */
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--gold-rgb), 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Vertical line on the left side */
.content-vertical-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, 
    transparent, 
    var(--gold-light), 
    var(--gold), 
    var(--gold-light), 
    transparent
  );
  border-radius: 0 2px 2px 0;
  opacity: 0.8;
}

.content-title {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xl);
  color: var(--kelp-800);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.content-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin: 1rem 0;
}

.content-text {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  color: var(--kelp-600);
  line-height: 1.6;
  margin: 0;
}

/* ---- 5. CENTRAL IMAGE ---- */
.central-image-container {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-parallax-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3/4;
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(var(--gold-rgb), 0.1), transparent);
  border-radius: 8px;
  z-index: 1;
  pointer-events: none;
}

.image-reveal-mask {
  position: absolute;
  inset: 0;
  background: var(--kelp-100);
  border-radius: 8px;
  z-index: 2;
}

.image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.frame-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold);
}

.frame-corner.top-left { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.frame-corner.top-right { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.frame-corner.bottom-left { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.frame-corner.bottom-right { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.central-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}

.image-caption {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.caption-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 0 auto 0.5rem;
}

.image-caption p {
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  color: var(--kelp-500);
  margin: 0;
  letter-spacing: 0.05em;
}

/* ---- 6. RESPONSIVE DESIGN ---- */
@media (max-width: 1200px) {
  .story-content {
    gap: 2rem;
  }
  
  .central-image-container {
    max-width: 350px;
  }
  
  .story-side-content-top,
  .story-side-content-bottom {
    padding-right: 2rem;
  }
  
  .story-right-content-top,
  .story-right-content-bottom {
    padding-left: 2rem;
  }
  
  .content-frame {
    padding: 1.5rem 1.5rem 1.5rem 2.5rem; /* Adjust for vertical line */
  }
}

@media (max-width: 991px) {
  .brand-story-section {
    padding: 6rem 0 0rem;
  }
  
  .story-header {
    margin-bottom: 3rem;
  }
  
  .story-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 2rem;
  }
  
  .central-image-container {
    grid-column: 1;
    grid-row: 3;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .story-side-content-top {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    padding-right: 0;
  }
  
  .story-right-content-top {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    padding-left: 0;
  }
  
  .story-side-content-bottom {
    grid-column: 1;
    grid-row: 4;
    justify-self: center;
    padding-right: 0;
  }
  
  .story-right-content-bottom {
    grid-column: 1;
    grid-row: 5;
    justify-self: center;
    padding-left: 0;
  }
  
  .content-frame {
    padding: 1.5rem 1.5rem 1.5rem 2.5rem; /* Keep vertical line space */
  }
}

@media (max-width: 767px) {
  .brand-story-section {
    padding: 4rem 0 0rem;
  }
  
  .brand-story-container {
    padding: 30px var(--spacing-sm) 2rem;
  }

  .story-title {
    font-size: var(--font-size-2xl);
  }
  
  .story-subtitle {
    font-size: var(--font-size-base);
  }
  
  .story-content {
    gap: 1.5rem;
  }
  
  .central-image-container {
    max-width: 250px;
  }

  .story-side-content-top,
  .story-side-content-bottom,
  .story-right-content-top,
  .story-right-content-bottom {
    padding: 0;
  }
  
  .content-frame {
    padding: 1rem 1rem 1rem 2rem; /* Keep vertical line space on mobile */
  }
  
  .content-title {
    font-size: var(--font-size-lg);
  }
  
  .content-text {
    font-size: var(--font-size-sm);
  }
  
  .content-divider {
    width: 30px;
  }
  
  .image-caption {
    bottom: -30px;
  }
}

@media (max-width: 480px) {
  .brand-story-section {
    padding: 3rem 0 0rem;
  }
  
  .story-header {
    margin-bottom: 2rem;
  }
  
  .story-title {
    font-size: var(--font-size-xl);
  }
  
  .story-title::after {
    width: 40px;
  }
  
  .story-subtitle {
    font-size: var(--font-size-sm);
  }
  
  .central-image-container {
    max-width: 200px;
  }
  
  .content-title {
    font-size: var(--font-size-base);
  }
  
  .content-text {
    font-size: var(--font-size-xs);
  }
  
  .content-frame {
    padding: 0.75rem 0.75rem 0.75rem 1.75rem; /* Keep vertical line space */
  }
}

/* ---- 7. ANIMATION DISABLED STATE ---- */
.brand-story-section.animations-disabled * {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

.brand-story-section.animations-disabled .story-title::after {
  opacity: 1 !important;
}
/* 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: 8px 0; /* Slightly reduced vertical padding */
  width: 100%;
  max-width: 380px; /* Slightly reduced max-width */
  border-radius: 5px;
}

.trending-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  background: rgba(var(--kelp-100-rgb), 0.2);
  border-radius: 5px;

  padding: 4px 8px; /* Reduced padding */
  /* Remove clip-path */
}

/* Restore original tab styling */
.trending-tab {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 6px; /* Reduced padding */
  font-family: var(--font-primary);
  font-size: 0.75rem; /* Smaller font size */
  color: var(--kelp-700);
  letter-spacing: 0.4px; /* Adjusted letter spacing */
  overflow: hidden;
  text-align: center;
  font-weight: var(--font-weight-regular); /* Use CSS variable for consistency */
  flex: 1;
  transition: color 0.3s ease;
  white-space: nowrap;
  /* Ensure proper text rendering for all languages */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.trending-tab:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* New active state approach - more luxurious */
.trending-tab.active {
  color: var(--kelp-900);
  position: relative;
  background: var(--kelp-50); /* Changed to kelp-50 */
}

/* Luxury active tab indicator with improved edges */
.tab-indicator {
  position: absolute;
  /* Adjust offsets to match new padding */
  bottom: 1px;
  left: 4px;
  right: 4px;
  top: 1px;
  height: auto;
  background: var(--kelp-50); /* Changed to kelp-50 */
  z-index: -1;
  border-radius: 5px; /* Add border radius instead */
  animation: none;
}

/* Style for inactive indicator - hide it */
.tab-indicator.inactive {
  /* Use visibility to keep layout space but hide */
  visibility: hidden;
  /* Ensure no animation runs when inactive */
  animation: none !important;
  /* Reset clip-path if needed, though visibility should suffice */
  /* clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0) !important; */
}

/* Apply Left-to-Right animation only when active */
.tab-indicator.animate-ltr:not(.inactive) {
  /* Smoother easing function */
  animation: tabIndicatorSlideLeftToRight 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  visibility: visible; /* Ensure it's visible when animating */
}

/* Apply Right-to-Left animation only when active */
.tab-indicator.animate-rtl:not(.inactive) {
  /* Smoother easing function */
  animation: tabIndicatorSlideRightToLeft 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  visibility: visible; /* Ensure it's visible when animating */
}

/* Left-to-Right animation keyframes - simplified without clip-path */
@keyframes tabIndicatorSlideLeftToRight {
  from {
    visibility: visible; /* Start visible */
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Right-to-Left animation keyframes - simplified without clip-path */
@keyframes tabIndicatorSlideRightToLeft {
  from {
    visibility: visible; /* Start visible */
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 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;
}

/* Product grid with refined styling */
.trending-products-grid {
  width: 100%;
  opacity: 1;
  transition: opacity 0.15s ease; /* Faster transition */
  will-change: opacity;
}

.trending-products-grid.is-transitioning {
  opacity: 0.7;
}

.products-grid-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  width: 100%;
  contain: layout style;
  position: relative;
}

.trending-product-item {
  contain: layout style;
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  opacity: 0;
  transform: translateY(15px) scale(0.98);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.trending-product-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 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;
}

/* Update .view-all-link styles */
.trending-view-all {
  margin-top: 30px;
  position: relative;
}

.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(--kelp-700);
  background: linear-gradient(120deg, 
  transparent 20%,
  rgba(var(--gold-rgb), 0.08) 45%,
  transparent 80%
);
  border: none;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  overflow: hidden;
}




.view-all-link:hover {
  color: var(--kelp-700);
  background: rgba(var(--kelp-50-rgb), 0.8);
  padding: 12px 32px;
}

.view-all-link:hover::before {
  opacity: 0.6;
  transform: translateX(0);
}



.view-all-link:hover .view-arrow {
  transform: translateX(3px) rotate(-45deg);
}

/* Updated placeholder styling to match shop page - TRENDING PRODUCTS SPECIFIC */
.trending-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  width: 100%;
}

/* Main placeholder container - TRENDING PRODUCTS SPECIFIC */
.trending-product-placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  contain: layout style;
  overflow: hidden;
}

/* Image Area - TRENDING PRODUCTS SPECIFIC */
.trending-placeholder-image-area {
  position: relative;
  width: 100%;
  padding-bottom: 125%;
  background-color: rgba(var(--kelp-100-rgb), 0.3);
  overflow: hidden;
  border-radius: 8px;
}

/* Content within the image area - TRENDING PRODUCTS SPECIFIC */
.trending-placeholder-image-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Target the SVG logo inside the placeholder - TRENDING PRODUCTS SPECIFIC */
.trending-placeholder-image-content svg {
  width: 40px;
  height: 40px;
  opacity: 0.5;
  /* Remove all transitions and animations */
}

/* Shimmer effect - TRENDING PRODUCTS SPECIFIC */
.trending-placeholder-shimmer {
  position: absolute;
  inset: 0;
  /* Remove all animations - make static */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--kelp-50-rgb), 0.15) 50%,
    transparent 100%
  );
  /* Remove animation */
  z-index: 0;
}

/* External Info Area Placeholder - TRENDING PRODUCTS SPECIFIC */
.trending-placeholder-external-info {
  padding: 12px 8px 6px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Remove background */
  border-radius: 8px;
  /* Remove all transitions */
}

/* Name Placeholder Line - TRENDING PRODUCTS SPECIFIC */
.trending-placeholder-external-name {
  height: 14px;
  width: 75%;
  max-width: 160px;
  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;
  position: relative;
  overflow: hidden;
  /* Remove all animations and transitions */
}

/* Price Placeholder Line - TRENDING PRODUCTS SPECIFIC */
.trending-placeholder-external-price {
  height: 12px;
  width: 45%;
  max-width: 90px;
  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;
  position: relative;
  overflow: hidden;
  /* Remove all transitions */
}



/* Responsive styles - TRENDING PRODUCTS SPECIFIC */
@media (max-width: 960px) {
  .trending-placeholder-image-content svg {
    width: 35px;
    height: 35px;
  }
  .trending-placeholder-external-name {
    height: 11px;
    width: 75%;
    max-width: 140px;
  }
  .trending-placeholder-external-price {
    height: 9px;
    width: 45%;
    max-width: 70px;
  }
  .trending-placeholder-external-info {
    padding: 8px 5px 0;
    margin-top: 6px;
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .trending-placeholder-image-content svg {
    width: 30px;
    height: 30px;
  }
  .view-all-link {
    font-size: 10px;
  }
  .trending-placeholder-external-name {
    height: 10px;
    width: 80%;
    max-width: 120px;
  }
  .trending-placeholder-external-price {
    height: 8px;
    width: 50%;
    max-width: 60px;
  }
  .trending-placeholder-external-info {
    padding: 6px 5px 0;
    margin-top: 5px;
    gap: 4px;
  }
}

@media (max-width: 400px) {
   .trending-placeholder-image-content svg {
    width: 25px;
    height: 25px;
  }
   .trending-placeholder-external-name {
    height: 9px;
    width: 85%;
    max-width: 100px;
  }
  .products-grid-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .trending-placeholder-external-price {
    height: 7px;
    width: 55%;
    max-width: 50px;
  }
   .trending-placeholder-external-info {
     padding: 5px 5px 0;
     margin-top: 4px;
     gap: 3px;
   }
}

/* 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: 280px; /* 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: verticalLineReveal 1.5s 1s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes verticalLineReveal {
  from { height: 0; opacity: 0; }
  to { height: 20px; opacity: 0.7; }
}

/* 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;
  /* animation: textShimmer 12s linear infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes textShimmer {
  to { background-position: 200% center; }
}
/* =================== FOUNDATIONAL VARIABLES =================== */
.LE-smart-chat {
  /* Color System - Kelp-based palette */
  --chat-primary: var(--kelp-800);
  --chat-secondary: var(--kelp-700);
  --chat-background: var(--kelp-50);
  --chat-surface: var(--kelp-100);
  --chat-surface-elevated: var(--kelp-200);
  --chat-text: var(--kelp-900);
  --chat-text-secondary: var(--kelp-600);
  --chat-accent: var(--gold);
  --chat-accent-rgb: var(--gold-rgb);
  --chat-user-message: var(--kelp-800);
  --chat-system-message: var(--kelp-500);
  --chat-agent-accent: #10b981;
  --chat-agent-accent-rgb:27, 28, 23;
  --base-color: var(--kelp600) ;
  --shine-color: var(--kelp-50) ;
  

  
  /* Gradients */
  --chat-shine-gradient: linear-gradient(
    90deg,
    transparent 0%, 
    rgba(var(--gold-rgb), 0.6) 50%,
    transparent 100%
  );
  --chat-agent-shine: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--chat-agent-accent-rgb), 0.6) 50%,
    transparent 100%
  );
  
  /* Spacing and sizing */
  --chat-border-radius: 16px;
  --chat-border-radius-sm: 12px;
  --chat-container-max-width: 480px;
  --chat-container-height: 75vh;
  --chat-container-height-mobile: 100vh;
  
  /* Shadows */
  --chat-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08);
  --chat-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.12);
  --chat-shadow-dramatic: 0 16px 64px rgba(0, 0, 0, 0.16);
  

  
  /* Typography */
  font-family: var(--font-primary);
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1400; /* Reduced to prevent stacking context issues */
  isolation: isolate;
}

/* When overlays are active, lower the chat z-index */
body.language-switching .LE-smart-chat,
body.has-modal .LE-smart-chat,
body.has-overlay .LE-smart-chat {
  z-index: 1000; /* Much lower when overlays are active */
}

/* RTL Support */
.LE-smart-chat.rtl {
  right: auto;
  left: 24px;
}

/* =================== MAIN CHAT CONTAINER =================== */
.LE-smart-chat-container {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: var(--chat-container-max-width);
  height: var(--chat-container-height);
  max-height: calc(100vh - 140px);
  background: var(--chat-background);
  border-radius: var(--chat-border-radius);
  box-shadow: var(--chat-shadow-dramatic);

  contain: layout style size;
  z-index: 1399; /* Reduced to prevent stacking context issues */
  isolation: isolate;
  min-height: 400px;
  overscroll-behavior: contain;
  overflow: hidden;
  
  transform-style: preserve-3d;
  /* Prevent animation conflicts */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* REMOVED: Body scroll prevention - now handled by JavaScript scrollManager */

/* When overlays are active, lower the container z-index too */
body.language-switching .LE-smart-chat-container,
body.has-modal .LE-smart-chat-container,
body.has-overlay .LE-smart-chat-container {
  z-index: 999; /* Much lower when overlays are active */
}

/* Enhanced mobile touch scrolling for chat container */
@media (max-width: 768px) {
  .LE-smart-chat-container {
    /* CRITICAL: Enhanced mobile touch scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y; /* Allow vertical touch scrolling */
    overflow-y: auto;
    /* Additional iOS momentum scrolling */
    transform: translateZ(0);
  }
}

/* RTL support for container */
.LE-smart-chat.rtl .LE-smart-chat-container {
  right: auto;
  left: 24px;
}

/* Mobile responsive - full viewport width - FIXED Z-INDEX HANDLING */
@media (max-width: 768px) {
  .LE-smart-chat-container {
    bottom: 0 !important;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0px;

  }
  
  
  .LE-smart-chat.rtl .LE-smart-chat-container {
    right: 0;
    left: 0;
  }
  
  .LE-smart-chat {
    bottom: 0;
    right: 0;
    /* Ensure no transform affects the page */
    transform: none;
    /* Normal z-index for mobile */
    z-index: 10000;
  }
  
  /* When overlays are active on mobile, button should be behind */
  body.language-switching .LE-smart-chat,
  body.has-modal .LE-smart-chat,
  body.has-overlay .LE-smart-chat {
    z-index: 50; /* Very low when overlays are active on mobile */
  }
  
  .LEE-smart-chat.rtl {
    right: 0;
    left: 0;
    transform: none;
  }
  
  /* Hide chat button when container is open on mobile */
  .LE-smart-chat-container ~ .smart-chat-button {
    display: none !important;
  }
  
  /* Ensure button is hidden when chat is open */
  .smart-chat.chat-open .smart-chat-button {
    display: none !important;
  }
}

/* Tablet responsive */
@media (min-width: 769px) and (max-width: 1024px) {
  .LE-smart-chat-container {
    width: min(90vw, var(--chat-container-max-width));
    height: min(80vh, var(--chat-container-height));
  }
}

/* Large devices - bigger container */
@media (min-width: 1200px) {
  :root {
    --chat-container-max-width: 520px;
    --chat-container-height: 80vh;
  }
}

@media (min-width: 1440px) {
  :root {
    --chat-container-max-width: 580px;
    --chat-container-height: 85vh;
  }
}

/* =================== CHAT CONTENT WRAPPER =================== */
.smart-chat-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

/* =================== LUXURIOUS CHAT BUTTON CONTAINER =================== */
.LE-smart-chat-button-container {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10000 !important;
  /* Add containment to prevent overflow */
  contain: layout style;
  max-width: calc(100vw - 48px); /* Prevent horizontal overflow */
  overflow: visible; /* Allow vertical expansion */
  /* Prevent initial flashing */
  opacity: 1; /* Force hardware acceleration */
  will-change: transform, opacity;
  /* Ensure it stays above all content including footer */
  isolation: isolate;
  /* Force it to be positioned relative to viewport, not any parent */
  transform: translateZ(0) !important;
  /* Ensure it's not affected by any parent positioning */
  top: auto !important;
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  /* Force it to be positioned relative to viewport, not any parent */
  position: fixed !important;
  /* Prevent animation conflicts */
  backface-visibility: hidden;
}



/* Greeting notification */
.chat-button-greeting {
  background: linear-gradient(135deg, 
    rgba(27, 28, 23, 0.95) 0%, 
    rgba(27, 28, 23, 0.98) 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(var(--gold-rgb), 0.1);

  max-width: 200px;
}

.greeting-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.greeting-text {
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.greeting-subtext {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 400;
}

/* Modern Chat Button - Centered Logo Design */
.LE-smart-chat-button {
  position: relative;
  width: 54px;
  height: 54px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(135deg, 
  rgba(27, 28, 23, 0.95) 0%, 
  rgba(27, 28, 23, 0.98) 100%);

  box-shadow:
    0 0 30px rgba(var(--gold-rgb), 0.2),
    inset 0 0 20px rgba(var(--gold-rgb), 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  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);

  overflow: hidden;
  isolation: isolate;
  /* backdrop-filter: blur(20px); */
  /* FIXED: Prevent blinking on page load */
  opacity: 1;
  transform: translateZ(0); /* Force hardware acceleration */
  visibility: visible;
  
  /* FIXED: Prevent animation conflicts */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;

}

/* Centered logo styling with light gold filter */
.chat-button-logo-centered {
  filter: sepia(1) saturate(1.2) hue-rotate(30deg) brightness(1.3) contrast(1.15);
  opacity: 0.95;
  transition: all 0.3s ease;
  position: relative;
  z-index: 3;
  /* Slightly smaller logo on mobile */
  transform: scale(0.9);
}

/* Shine background animation */
.button-shine-bg {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(var(--gold-rgb), 0.1) 20%,
    rgba(var(--gold-rgb), 0.2) 40%,
    rgba(var(--gold-rgb), 0.1) 60%,
    transparent 80%,
    transparent 100%
  );
  /* animation: buttonShineRotate 8s linear infinite; - DISABLED FOR PERFORMANCE */
  opacity: 0.7;
  z-index: 1;
  border-radius: inherit;
}

@keyframes buttonShineRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Button content layout - REMOVED - no longer needed for centered design */
/* .button-content, .chat-button-logo, .chat-button-text styles removed */

/* Button shine effect */
.LE-smart-chat-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%, 
    rgba(var(--gold-rgb), 0.2) 50%,
    transparent 100%
  );
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  border-radius: inherit;
}

.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,
.LE-smart-chat-button:hover .chat-button-text {
  opacity: 1;
}

.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);
}

.LEE-smart-chat-button:hover .button-shine-bg {
  opacity: 1;
  animation-duration: 4s;
}

.LE-smart-chat-button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* RTL support for button */
.LE-smart-chat.rtl .LE-smart-chat-button-container {
  right: auto;
  left: 24px;
  flex-direction: row-reverse;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
  .LE-smart-chat-button-container {
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    gap: 12px;
    z-index: 10000 !important;
    /* Force it to be positioned relative to viewport, not any parent */
    position: fixed !important;
    transform: translateZ(0) !important;
   

  }
  
  .LE-smart-chat-button {
    width: 44px !important;
    height: 44px !important;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: linear-gradient(135deg, 
    rgba(27, 28, 23, 0.95) 0%, 
    rgba(27, 28, 23, 0.98) 100%);
   
    box-shadow:
      0 0 25px rgba(var(--gold-rgb), 0.15),
      inset 0 0 15px rgba(var(--gold-rgb), 0.08);
  }
  
  .LE-smart-chat.rtl .smart-chat-button {
    right: auto;
    left: 20px;
  }
}

/* Discount countdown display */
.discount-countdown {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 11px;
  color: rgba(var(--gold-rgb), 0.9);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.15), rgba(var(--gold-rgb), 0.1));
  padding: 4px 8px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  pointer-events: none;
  z-index: 10;
  /* backdrop-filter: blur(8px);
  -webkit-/* backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  /* animation: discountPulse 2s infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes discountPulse {
  0%, 100% { 
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.5);
    transform: scale(1.02);
  }
}


/* Chat notification badge */
.smart-chat-notification {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4),
              0 0 0 2px var(--chat-background);
  /* animation: notification-pulse 2s infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes notification-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4),
                0 0 0 2px var(--chat-background);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.6),
                0 0 0 2px var(--chat-background),
                0 0 0 6px rgba(239, 68, 68, 0.2);
  }
}

/* =================== AI MESSAGE CONTAINER - CLEAN MODERN DESIGN =================== */
.ai-message-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  margin: 0;
  background: transparent;
  border: none;
  max-width: 100%;
  animation: ai-message-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ai-message-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================== AI AVATAR WITH LUXURIOUS ANIMATIONS =================== */
.ai-message-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.ai-avatar-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--chat-transition-luxury);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(var(--kelp-rgb, 134, 142, 150), 0.15),
              0 0 0 1px rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  /* Enhanced glow effect for processing state */
  z-index: 1;
}

/* Enhanced AI avatar glow effect for processing state */
.ai-avatar-icon.ai-thinking-glow {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.1),
              0 0 0 1px rgba(var(--gold-rgb), 0.2);
  /* Enhanced glow background */
  position: relative;
  z-index: 2;
}

/* Glowing background effect for AI processing */
.ai-avatar-icon.ai-thinking-glow::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  background: radial-gradient(
    circle,
    rgba(var(--gold-rgb), 0.15) 0%,
    rgba(var(--gold-rgb), 0.08) 40%,
    rgba(var(--gold-rgb), 0.04) 70%,
    transparent 100%
  );
  border-radius: 50%;
  z-index: -1;
  animation: ai-avatar-glow-pulse 3s ease-in-out infinite;
}

/* Secondary glow ring for extra luxury effect */
.ai-avatar-icon.ai-thinking-glow::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: radial-gradient(
    circle,
    rgba(var(--gold-rgb), 0.12) 0%,
    rgba(var(--gold-rgb), 0.06) 60%,
    transparent 100%
  );
  border-radius: 50%;
  z-index: -2;
  animation: ai-avatar-glow-ring 2.5s ease-in-out infinite;
}

/* Enhanced glow animations for AI processing state */
@keyframes ai-avatar-glow-pulse {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes ai-avatar-glow-ring {
  0%, 100% { 
    opacity: 0.4;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Legacy animation for backward compatibility */
@keyframes ai-avatar-pulse-refined {
  0%, 100% { 
    box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.1),
                0 0 0 1px rgba(var(--gold-rgb), 0.2);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 3px 12px rgba(var(--gold-rgb), 0.15),
                0 0 0 1px rgba(var(--gold-rgb), 0.3);
    transform: scale(1.02);
  }
}

/* =================== AI MESSAGE CONTENT - NO CONTAINERS =================== */
.ai-message-content {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.cursor-thinking-text {
  color: var(--kelp-600-rgb); /* Fallback color - always visible */
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  visibility: visible;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 1 !important;
  transition: all 0.3s ease;
  
  /* Gradient background using your theme colors */
  background: linear-gradient(90deg, 
    var(--kelp-500, #181f1b) 0%, 
    var(--kelp500, #181f1b) 40%, 
    var(--kelp-100, #f8fafc) 50%, 
    var(--kelp-500, #181f1b) 60%, 
    var(--kelp-500, #181f1b) 100%);
  background-size: 200% 100%;
  animation: chatshine 3s infinite linear;
  animation-fill-mode: forwards;
}

/* Only apply background-clip if supported AND working */
@supports ((-webkit-background-clip: text) or (background-clip: text)) and (-webkit-background-clip: text) {
  .cursor-thinking-text {
    -webkit-background-clip: text;
    background-clip: text;
    /* Only make transparent if gradient will show */
    -webkit-text-fill-color: transparent;
  }
}

/* Reading stage */
.cursor-thinking-text[data-stage="reading"] {
  opacity: 1;
  align-items: center;
  gap: 6px;
}

.cursor-thinking-text[data-stage="reading"]::before {
  content: "";
  width: 12px;
  height: 12px;
  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;
  margin-right: 4px;
  flex-shrink: 0;


 
}


/* Searching stage - Search icon */
.cursor-thinking-text[data-stage="searching"]::before {
  content: "";
  width: 12px;
  height: 12px;
  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='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
  flex-shrink: 0;
  opacity: 1;

  
}

/* Order status - Document icon */
.cursor-thinking-text[data-stage="order_status"]::before,
.cursor-thinking-text[data-stage="checkOrderStatus"]::before {
  content: "";
  width: 12px;
  height: 12px;
  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='M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
  flex-shrink: 0;
  opacity: 1;
 
  /* animation: documentFlip 2s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

/* Payment logs - Credit card icon */
.cursor-thinking-text[data-stage="payment_logs"]::before,
.cursor-thinking-text[data-stage="checkPaymentLogs"]::before {
  content: "";
  width: 12px;
  height: 12px;
  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.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
  flex-shrink: 0;
  opacity: 1;

  /* animation: cardSlide 2s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

/* Email logs - Envelope icon */
.cursor-thinking-text[data-stage="email_logs"]::before,
.cursor-thinking-text[data-stage="checkEmailLogs"]::before {
  content: "";
  width: 12px;
  height: 12px;
  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='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
  flex-shrink: 0;
  opacity: 1;
 
  /* animation: emailBounce 1.8s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

/* Tracking - Location icon */
.cursor-thinking-text[data-stage="tracking"]::before,
.cursor-thinking-text[data-stage="trackOrder"]::before {
  content: "";
  width: 12px;
  height: 12px;
  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='M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
  flex-shrink: 0;
  opacity: 1;

  /* animation: locationPing 2s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

/* Discount generation - Gift icon */
.cursor-thinking-text[data-stage="generateDiscount"]::before {
  content: "";
  width: 12px;
  height: 12px;
  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='M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
  flex-shrink: 0;
  opacity: 1;
 
  /* animation: giftShine 2.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}





/* Action display integration */
.ai-message-content .action-display {
  margin: 8px 0 12px 0;
}

.ai-message-text {
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 1.65;
  color: var(--chat-text);
}

.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;
}



/* Mixed content layout for AI responses with products */
.ai-mixed-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-inline-products {
  margin: 8px 0;
}

/* Loading text shimmer effect */
.ai-inline-loading-text {
  margin: 8px 0;
}

/* =================== ENHANCED SMOOTH SHIMMER EFFECTS =================== */

/* Loading text shimmer effect - Smooth left to right */
.ai-loading-text-shimmer {
  font-size: 14px;
  color: var(--chat-text-secondary);
  background: linear-gradient(
    90deg,
    var(--kelp-800) 0%,
    var(--kelp-700) 15%,
    var(--kelp-600) 25%,
    var(--kelp-500) 35%,
    var(--kelp-400) 45%,
    var(--kelp-300) 50%,
    var(--kelp-400) 55%,
    var(--kelp-500) 65%,
    var(--kelp-600) 75%,
    var(--kelp-700) 85%,
    var(--kelp-800) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* animation: smooth-text-shimmer 1s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
}

@keyframes smooth-text-shimmer {
  0% { 
    background-position: -200% 0;
    opacity: 0.7;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% { 
    background-position: 200% 0;
    opacity: 0.7;
  }
}

/* Enhanced Search Text Shimmer - Luxurious Kelp Gradient */
.ai-search-text-shimmer {
  background: linear-gradient(
    90deg,
    var(--kelp-900) 0%,
    var(--kelp-800) 5%,
    var(--kelp-700) 15%,
    var(--kelp-600) 25%,
    var(--kelp-500) 35%,
    var(--kelp-400) 45%,
    var(--kelp-300) 55%,
    var(--kelp-400) 65%,
    var(--kelp-500) 75%,
    var(--kelp-600) 85%,
    var(--kelp-700) 95%,
    var(--kelp-800) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* animation: luxury-search-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; - DISABLED FOR PERFORMANCE */
  font-weight: 500;
  display: inline;
  letter-spacing: 0.02em;
  position: relative;
}

@keyframes luxury-search-shimmer {
  0% { 
    background-position: -200% 0;
    opacity: 0.9;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% { 
    background-position: 200% 0;
    opacity: 0.9;
  }
}

/* Search Phrase Shimmer - Premium Luxury Gradient */
.search-phrase-shimmer {
  background: linear-gradient(
    90deg,
    var(--kelp-900) 0%,
    var(--kelp-800) 3%,
    var(--kelp-700) 8%,
    var(--kelp-600) 15%,
    var(--kelp-500) 25%,
    var(--kelp-400) 35%,
    var(--kelp-300) 50%,
    var(--kelp-400) 65%,
    var(--kelp-500) 75%,
    var(--kelp-600) 85%,
    var(--kelp-700) 92%,
    var(--kelp-800) 97%,
    var(--kelp-900) 100%
  );
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* animation: premium-luxury-shimmer 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; - DISABLED FOR PERFORMANCE */
  font-weight: 500;
  display: inline;
  letter-spacing: 0.02em;
  position: relative;
}

@keyframes premium-luxury-shimmer {
  0% { 
    background-position: -250% 0;
    opacity: 0.85;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% { 
    background-position: 250% 0;
    opacity: 0.85;
  }
}

/* Search Text Transition Wrapper */
.search-text-transition-wrapper {
  transition: all 0.3s ease;
  display: inline;
}

/* =================== USER MESSAGE BUBBLES - LUXURIOUS DESIGN =================== */
.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-rgb, 134, 142, 150), 0.08);
  color: var(--kelp-800);
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  max-width: 80%;
  min-width: 100px;
  position: relative;
  box-shadow: 0 1px 3px rgba(var(--kelp-rgb, 134, 142, 150), 0.1);
  transition: all var(--chat-transition-smooth);

  border: none;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  overflow: hidden;
}

.smart-chat-message.user .smart-chat-bubble:hover {
  transform: translateY(-0.5px);
  box-shadow: 0 2px 6px rgba(var(--kelp-rgb, 134, 142, 150), 0.15);
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
}

/* Elegant typography improvements */
.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;
}

/* RTL support for user messages */
.LE-smart-chat.rtl .smart-chat-message.user {
  justify-content: flex-start;
}

.LE-smart-chat.rtl .smart-chat-message.user .smart-chat-bubble {
  border-radius: 20px 20px 20px 6px;
}

.LE-smart-chat.rtl .smart-chat-message.user .smart-chat-timestamp {
  text-align: left;
}

/* Mobile optimizations for user messages */
@media (max-width: 768px) {
  .smart-chat-message.user .smart-chat-bubble {
    max-width: 90%;
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* =================== MESSAGE CONTAINERS AND LAYOUT =================== */
.smart-chat-messages {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 2px;

  /* FIXED: Complete scroll configuration */
  contain: layout style;
  will-change: scroll-position;
  min-height: 0;
  scroll-behavior: smooth;
  position: relative;
  overscroll-behavior: contain;
  
  /* FIXED: Hardware acceleration for smooth scrolling */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  
  /* FIXED: Allow text selection and scrolling */
  
   /* FIXED: Allow text selection and scrolling */
   -webkit-user-select: text;
   -moz-user-select: text;
        user-select: text;
   -webkit-touch-callout: default;
   -webkit-tap-highlight-color: transparent;
   
     /* FIXED: Additional scroll fixes */
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
  touch-action: pan-y !important; /* Ensure vertical scrolling works */
 }
 
 /* FIXED: Webkit scrollbar styling */
 .smart-chat-messages::-webkit-scrollbar {
   width: 1px;
 }
 
 .smart-chat-messages::-webkit-scrollbar-track {
   background: transparent;
 }
 
 .smart-chat-messages::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.3);
   border-radius: 3px;
 }
 
 .smart-chat-messages::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.5);
 }





/* Mobile scrollbar hiding */
@media (max-width: 768px) {
  .smart-chat-messages::-webkit-scrollbar {
    display: none;
  }
  
  .smart-chat-messages {
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Enhanced mobile scrolling */
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* Better mobile scroll performance */
    will-change: scroll-position;
    /* Ensure smooth scrolling on mobile */
    scroll-behavior: smooth;
    /* Prevent scroll chaining */
    overscroll-behavior-y: contain;
  }
  
  /* Enhanced mobile scroll for chat container */
  .LE-smart-chat-container {
    /* Better mobile touch scrolling */
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* Prevent scroll issues on mobile */
    overflow: hidden;
  }
  
  /* Mobile-specific scroll for messages */
  .smart-chat-messages {
    /* Enhanced mobile scroll behavior */
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* Better scroll performance */
    will-change: scroll-position;
    /* Smooth scrolling */
    scroll-behavior: smooth;
  }
}



/* =================== CHAT HEADER WITH LUXY 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;
}

/* Loading spinner for conversation loading */
.spinner-icon {
  width: 12px;
  height: 12px;
  border: 2px solid var(--kelp-300);
  border-top: 2px solid var(--kelp-700);
  border-radius: 50%;
  /* animation: spin 1s linear infinite; - DISABLED FOR PERFORMANCE */
  display: inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Header content styling */
.conversation-history-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Close button positioned absolutely to the right */
.chat-navigation-button {
  position: absolute;
  right: 20px;
  top: 25%;
  transform: translateY(-50%);
}

/* =================== CONVERSATION DROPDOWN WITH CLIPPATH ANIMATION =================== */
.conversation-dropdown {
  position: relative;
}

.conversation-dropdown-trigger {
  background: transparent;
  border: none;
  color: var(--kelp-700);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all var(--chat-transition-smooth);
}

.conversation-dropdown-trigger:hover {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
  color: var(--kelp-800);
}

/* Conversation Dropdown Content - Properly Positioned with Luxury Design */
.conversation-dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 460px;
  background: rgba(255, 255, 255, 0.98);
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08),
              0 0 0 1px rgba(var(--kelp-rgb, 134, 142, 150), 0.05);
  max-height: 320px;
  overflow: hidden;
  z-index: 10001;

  padding: 8px 0;
}

.conversation-dropdown-content.open {
  transform: translateX(-37%) !important;
  opacity: 1;
}

.conversation-dropdown-content-inner {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px;

  /* White space philosophy - clean minimal layout */
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 2px;
}



/* Ultra-compact History Items with Luxury White Space */
.conversation-history-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  margin: 1px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--chat-transition-luxury);
  background: transparent;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  /* White space philosophy - ultra-compact luxury */
  min-height: 48px;
}

.conversation-history-item::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.04) 0%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.02) 50%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.04) 100%
  );
  border-radius: 8px;
  -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 var(--chat-transition-smooth);
}

.conversation-history-item:hover {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.03);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
  transform: translateX(1px);
  box-shadow: 0 1px 4px rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
}

.conversation-history-item:hover::before {
  opacity: 1;
}

.conversation-history-item.active {
  background: rgba(var(--gold-rgb), 0.04);
  border-color: rgba(var(--gold-rgb), 0.12);
  box-shadow: 0 1px 6px rgba(var(--gold-rgb), 0.06);
}

.conversation-history-item.active::before {
  background: linear-gradient(135deg, 
    rgba(var(--gold-rgb), 0.08) 0%,
    rgba(var(--gold-rgb), 0.04) 50%,
    rgba(var(--gold-rgb), 0.08) 100%
  );
  opacity: 1;
}

.conversation-history-item.new-chat-item {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.02);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  /* White space philosophy - slightly more space for new chat */
  padding: 10px 12px;
  min-height: 42px;
}

.conversation-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--kelp-800);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: visible;
  margin-bottom: 2px;
  z-index: 1;
  position: relative;
  /* White space philosophy - tight luxury typography */
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.conversation-preview {
  font-size: 9px;
  color: var(--kelp-600);
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  z-index: 1;
  position: relative;
  /* White space philosophy - minimal spacing */
  margin-bottom: 2px;
  letter-spacing: 0;
}

.conversation-timestamp {
  font-size: 8px;
  color: var(--kelp-500);
  opacity: 0.65;
  margin-top: 1px;
  z-index: 1;
  position: relative;
  /* White space philosophy - ultra-compact */
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.conversation-history-item.active .conversation-title {
  color: var(--kelp-900);
}

.conversation-history-item.active .conversation-preview {
  color: var(--kelp-700);
  opacity: 0.9;
}

/* =================== LUXURY NAVIGATION BUTTON (REPLACING CLOSE) =================== */
.chat-navigation-button {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  color: var(--kelp-600);
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  transition: all var(--chat-transition-luxury);
  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::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 var(--chat-transition-smooth);
}

.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:hover::before {
  opacity: 1;
}

.chat-navigation-button:active {
  transform: scale(0.98);
}

/* Mobile header adjustments */
@media (max-width: 768px) {
  .smart-chat-header {
    padding: 12px 16px;
  }
  
  .conversation-dropdown-content {
    top: 70px;
    min-width: 260px;
    max-width: calc(100vw - 40px);
  }
}

/* =================== INPUT AREA - TRANSPARENT WITH GRADIENT BORDERS =================== */
.smart-chat-input-area {
  background: transparent;
  padding: 20px;
  position: relative;
}

.smart-chat-input-area.agent-mode {
  background: transparent;
}

.smart-chat-input-area.streaming {
  background: transparent;
}

/* Elegant Input Wrapper with Gradient Border - RESPONSIVE TO CONTENT */
.smart-chat-input-wrapper-integrated {
  display: flex;
  align-items: stretch; /* Changed from center to stretch to accommodate growing input */
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 12px 16px;
  transition: all var(--chat-transition-luxury);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: none;
  position: relative;
  align-items: center;
  overflow: visible; /* Allow glow to extend like CTA button */
  /* backdrop-filter: blur(20px);
  min-height: 48px; /* Minimum height */
  /* Remove max-height to allow wrapper to grow with content */
  /* max-height: 48px; - REMOVED to allow expansion */
  
  /* CSS Custom Properties for glow tracking */
  --angle: 0deg;
  --glow-intensity: 0.3;
}

/* Performance-friendly Framer Motion glow background */
.input-glow-background {
  /* All styling handled by Framer Motion for better performance */
  will-change: transform, opacity, background;
  backface-visibility: hidden;
  transform: translateZ(0); /* Force hardware acceleration */
}
/* Agent mode glow handled by Framer Motion for better performance */




/* Animations handled by Framer Motion for better performance */

/* Input background, placed on top of the glow */
.smart-chat-input-wrapper-integrated::after {
  content: '';
  position: absolute;
  inset: 1px; /* This creates the "border" width */
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.98) 50%,
    rgba(255, 255, 255, 0.95) 100%
  );
  border-radius: 19px; /* Slightly smaller than the wrapper's radius */
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus state - USER TYPING: SUBTLE GLOWING EFFECT */
.smart-chat-input-wrapper-integrated.focused {
  box-shadow: 0 1px 4px rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
  transform: translateY(-0.25px); /* REDUCED TRANSFORM */
  background: rgba(255, 255, 255, 0.95);
}

/* Focus and AI typing states handled by Framer Motion for better performance */
.smart-chat-input-area.streaming .smart-chat-input-wrapper-integrated,
.smart-chat-input-wrapper-integrated.ai-typing {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(var(--gold-rgb), 0.06);
}

/* Agent joined state - subtle green gradient border */
.smart-chat-input-area.agent-mode .smart-chat-input-wrapper-integrated,
.smart-chat-input-wrapper-integrated.agent-mode {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 8px rgba(var(--chat-agent-accent-rgb), 0.04); /* REDUCED SHADOW */
}




/* Keyframe animations for input glow - MATCHES CTA BUTTON */
@keyframes inputRotateGlow {
  to {
    --angle: 360deg;
  }
}

/* =================== INLINE AUTH FORM =================== */
.tool-result-auth-inline {
  margin: 8px 0;
  padding: 0;
  background: transparent;
}

.auth-inline-container {
  margin: 12px 0;
  padding: 0;
  background: transparent;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.auth-inline-container.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.auth-claude-message {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(var(--kelp-rgb), 0.05);
  border-radius: 8px;
  font-size: 13px;
  color: var(--kelp-700);
  line-height: 1.4;
  border-left: 3px solid var(--kelp-300);
}

.auth-inline-form {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(var(--kelp-rgb), 0.1);
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tool-result-auth-message {
  margin: 8px 0;
  padding: 12px;
  background: rgba(var(--kelp-rgb), 0.05);
  border-radius: 8px;
  border: 1px solid rgba(var(--kelp-rgb), 0.1);
}

.auth-message-text {
  font-size: 13px;
  color: var(--kelp-600);
  line-height: 1.4;
}

.auth-inline-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--kelp-700);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-inline-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.auth-inline-input {
  padding: 8px 12px;
  border: 1px solid rgba(var(--kelp-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  color: var(--kelp-800);
  transition: all 0.2s ease;
}

.auth-inline-input:focus {
  outline: none;
  border-color: var(--kelp-500);
  box-shadow: 0 0 0 2px rgba(var(--kelp-rgb), 0.1);
}

.auth-inline-input::-moz-placeholder {
  color: var(--kelp-400);
}

.auth-inline-input::placeholder {
  color: var(--kelp-400);
}

.auth-inline-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.auth-inline-button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-inline-button.auth-login {
  background: var(--kelp-600);
  color: white;
}

.auth-inline-button.auth-login:hover {
  background: var(--kelp-700);
}

.auth-inline-button.auth-login.success {
  background: #10b981;
  color: white;
  transition: all 0.3s ease;
}

.auth-success-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.auth-success-content svg {
  animation: checkmark 0.5s ease-in-out;
}

@keyframes checkmark {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.auth-inline-button.auth-cancel {
  background: rgba(var(--kelp-rgb), 0.1);
  color: var(--kelp-600);
}

.auth-inline-button.auth-cancel:hover {
  background: rgba(var(--kelp-rgb), 0.2);
}

/* Auth loading state */
.auth-inline-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Auth success state */
.auth-inline-form.success {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

/* Auth error state */
.auth-inline-form.error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

/* Elegant Input Field - EXPANDABLE FOR LONG TEXT */
.smart-chat-input-modern {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px; /* REDUCED FROM 14px TO 13px */
  line-height: 1.4;
  color: var(--kelp-800);
  font-family: inherit;
  min-height: 20px; /* MINIMUM HEIGHT */
  max-height: 120px; /* ALLOW EXPANSION UP TO 120px */
  height: auto; /* Auto height */
  overflow-y: auto; /* SCROLL WHEN CONTENT EXCEEDS MAX HEIGHT */
  overflow-x: hidden; /* Prevent horizontal scroll */
  resize: none;
  z-index: 2;
  position: relative;
  font-weight: 400;
  box-sizing: border-box;
  /* Prevent zoom on mobile input focus */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  /* Remove mobile touch focus effects */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  /* Fix text overflow and wrapping */
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  /* Prevent text from going behind buttons */
  padding-right: 4px;
  /* Ensure proper scrolling behavior */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.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;
}

/* Refined Internal Buttons */
.smart-chat-attach-button-internal {
  background: transparent;
  border: none;
  color: var(--kelp-500);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: all var(--chat-transition-smooth);
  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;
  transition: all var(--chat-transition-smooth);
  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);
}

/* =================== ENHANCED ATTACHMENT OPTIONS =================== */
.smart-chat-attach-options {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: rgba(255, 255, 255, 0.98);
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
              0 0 0 1px rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
  padding: 12px;
  margin-bottom: 16px;
  margin-left: 20px;

  z-index: 100;
  min-width: 240px;
  max-width: 300px;
  transform: translateX(-10px);
}

.smart-chat-attach-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--chat-transition-smooth);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: var(--kelp-700);
  margin: 3px 0;
  position: relative;
  overflow: hidden;
}

.smart-chat-attach-option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
  border-radius: 12px;
  opacity: 0;
  transition: opacity var(--chat-transition-smooth);
}

.smart-chat-attach-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
}

.smart-chat-attach-option:hover::before {
  opacity: 1;
}

.attach-option-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.1);
  border-radius: 8px;
  color: var(--kelp-600);
  z-index: 1;
  position: relative;
}

.attach-option-content {
  flex: 1;
  z-index: 1;
  position: relative;
}

.attach-option-content span:first-child {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--kelp-800);
}

.attach-option-subtitle {
  font-size: 12px;
  color: var(--kelp-500);
  opacity: 0.8;
  font-weight: 400;
  line-height: 1.3;
}

/* =================== TYPING INDICATOR - MINIMAL LUXURIOUS DESIGN =================== */
.smart-chat-bubble.typing {
  background: var(--chat-surface-elevated);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  padding: 16px 20px;
  border-radius: 20px 20px 20px 6px;
  max-width: 200px;
  box-shadow: var(--chat-shadow-subtle);
  animation: typing-appear 0.3s ease-out;
}

@keyframes typing-appear {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
  opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ai-typing-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-typing-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.smart-chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.smart-chat-typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chat-text-secondary);
  /* animation: typing-dot 1.8s infinite; - DISABLED FOR PERFORMANCE */
  opacity: 0.4;
}

.smart-chat-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.smart-chat-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-dot {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.ai-typing-text {
  font-size: 12px;
  color: var(--chat-text-secondary);
  font-weight: 500;
  background: linear-gradient(
    90deg,
    var(--chat-text-secondary) 25%,
    var(--chat-accent) 50%,
    var(--chat-text-secondary) 75%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =================== AI ACTION BUTTONS - LUXURIOUS REDESIGN =================== */
.ai-message-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
}

.ai-action-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  transition: all var(--chat-transition-luxury);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kelp-500);
  min-width: 28px;
  height: 24px;

  position: relative;
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
}

.ai-action-btn::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: 8px;
  -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 var(--chat-transition-smooth);
}

.ai-action-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.15);
  color: var(--kelp-700);
  transform: translateY(-0.5px) scale(1.02);
  box-shadow: 0 2px 8px rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
}

.ai-action-btn:hover::before {
  opacity: 1;
}

.ai-action-btn.liked {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.2);
  color: #10b981;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1);
}

.ai-action-btn.liked::before {
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.15) 0%,
    rgba(16, 185, 129, 0.08) 50%,
    rgba(16, 185, 129, 0.15) 100%
  );
  opacity: 1;
}

.ai-action-btn.liked:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}

.ai-action-btn.disliked {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.1);
}

.ai-action-btn.disliked::before {
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.15) 0%,
    rgba(239, 68, 68, 0.08) 50%,
    rgba(239, 68, 68, 0.15) 100%
  );
  opacity: 1;
}

.ai-action-btn.disliked:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12);
}

/* Smaller icons in action buttons */
.ai-action-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

/* =================== INPUT SUGGESTION TEXT =================== */
.smart-chat-input-suggestion {
  font-size: 11px;
  color: var(--kelp-500);
  opacity: 0.8;
  margin-bottom: 8px;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0 12px;
  line-height: 1.3;
  transition: all var(--chat-transition-smooth);
}

.smart-chat-input-suggestion.focused {
  opacity: 0.9;
  color: var(--kelp-600);
}

/* =================== ENHANCED DYNAMIC INPUT SUGGESTIONS =================== */
.smart-chat-input-suggestions-container {
  display: flex;
  flex-direction: row; /* FIXED: Change to horizontal layout */
  gap: 8px; /* Horizontal gap between items */
  margin-bottom: 12px;
  padding: 0 4px;
  margin-left: 12px;
  opacity: 0;
  transform: translateY(10px);
  animation: suggestionsAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  /* FIXED: Enable horizontal scrolling */
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  /* Smooth scrolling */
  scroll-behavior: smooth;
}

/* Hide scrollbar for webkit browsers */
.smart-chat-input-suggestions-container::-webkit-scrollbar {
  display: none;
}

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

.smart-chat-input-suggestion-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--kelp-700);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  animation: suggestionBtnAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  white-space: nowrap;
  will-change: transform, opacity;
  /* FIXED: Horizontal layout properties */
  flex-shrink: 0; /* Prevent buttons from shrinking */
  min-width: -moz-fit-content;
  min-width: fit-content; /* Ensure buttons size to content */
}

/* Staggered animation for suggestion buttons */
.smart-chat-input-suggestion-btn:nth-child(1) { animation-delay: 0.1s; }
.smart-chat-input-suggestion-btn:nth-child(2) { animation-delay: 0.15s; }
.smart-chat-input-suggestion-btn:nth-child(3) { animation-delay: 0.2s; }
.smart-chat-input-suggestion-btn:nth-child(4) { animation-delay: 0.25s; }

@keyframes suggestionBtnAppear {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  60% {
    opacity: 0.8;
    transform: translateY(-1px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.smart-chat-input-suggestion-btn::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);
}

.smart-chat-input-suggestion-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.15);
  color: var(--kelp-800);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 16px rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.smart-chat-input-suggestion-btn:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.12) 0%,
    rgba(var(--gold-rgb), 0.08) 50%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.12) 100%
  );
}

.smart-chat-input-suggestion-btn:active {
  transform: translateY(0) scale(0.95);
  transition: all 0.1s ease-out;
  box-shadow: 0 1px 3px rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
}

/* Smooth exit animation when suggestions disappear */
.smart-chat-input-suggestions-container.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease-out;
  pointer-events: none;
}

.smart-chat-input-suggestions-container.fade-out .smart-chat-input-suggestion-btn {
  opacity: 0;
  transform: translateY(-8px) scale(0.9);
  transition: all 0.2s ease-out;
}

.smart-chat-input-suggestion-btn.clicked {
  background: rgba(var(--gold-rgb), 0.1);
  border-color: rgba(var(--gold-rgb), 0.3);
  color: var(--kelp-900);
  transform: scale(0.95);
  animation: suggestionClickPulse 0.3s ease-out;
}

@keyframes suggestionClickPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0);
  }
}

/* =================== REMOVE PREMIUM DIVIDER =================== */
.smart-chat-premium-divider {
  display: none;
}

/* =================== MOBILE OPTIMIZATIONS FOR NEW BUTTONS =================== */
@media (max-width: 768px) {
  .smart-chat-input-area {
    padding: 16px;
    margin-bottom: 12px;
    background-color: none;
  }
  .conversation-dropdown-content.open {
    transform: translateX(-35%) !important;
    opacity: 1;
  }
  
  .smart-chat-input-suggestions-container {
    gap: 6px;
    margin-bottom: 14px;
    margin-left: 15px;
  }
  
  
  .smart-chat-input-suggestion-btn {
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 10px;
  }
  
  .ai-message-actions {
    gap: 4px;
    margin-top: 6px;
    padding-top: 4px;
  }
  
  .ai-action-btn {
    min-width: 26px;
    height: 22px;
    padding: 3px 5px;
  }
  
  .ai-action-btn svg {
    width: 11px;
    height: 11px;
  }
}

/* =================== SYSTEM MESSAGES & AGENT INDICATORS =================== */
.smart-chat-message.system {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.smart-chat-message.system .smart-chat-bubble {
  background: rgba(var(--chat-accent-rgb), 0.08);
  color: var(--chat-text-secondary);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border: 1px solid rgba(var(--chat-accent-rgb), 0.12);
  box-shadow: none;
}

/* Agent joined indicator */
.agent-joined-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--chat-agent-accent) 0%, #059669 100%);
  color: white;
  padding: 12px 16px;
  border-radius: var(--chat-border-radius-sm);
  margin: 16px 0;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--chat-shadow-subtle);
}

.agent-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Agent active messages container */
.smart-chat-messages.agent-active {
  background: none;
}

/* Agent mode header styling */
.smart-chat-header.agent-mode {
  background: transparent;
}

/* Agent thinking indicator */
.agent-thinking-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--chat-agent-accent-rgb), 0.05);
  border: 1px solid rgba(var(--chat-agent-accent-rgb), 0.1);
  border-radius: var(--chat-border-radius-sm);
  font-size: 0.875rem;
  color: var(--chat-agent-accent);
  /* animation: agent-thinking-pulse 2s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes agent-thinking-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Agent stage indicator */
.agent-stage-indicator {
  font-size: 0.8rem;
  color: var(--chat-agent-accent);
  font-weight: 500;
  margin-left: 0.5rem;
}

/* Authentication required message */
.auth-required-message {
  background: linear-gradient(135deg, 
    rgba(var(--chat-accent-rgb), 0.05) 0%, 
    rgba(var(--chat-accent-rgb), 0.02) 100%);
  border: 1px solid rgba(var(--chat-accent-rgb), 0.2);
  border-radius: var(--chat-border-radius);
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
}

.auth-required-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--chat-accent);
  margin-bottom: 0.5rem;
}

.auth-required-text {
  font-size: 0.875rem;
  color: var(--chat-text-secondary);
  margin-bottom: 1rem;
}

.auth-required-button {
  background: var(--chat-accent);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--chat-border-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--chat-transition-smooth);
}

.auth-required-button:hover {
  background: var(--chat-primary);
  transform: translateY(-1px);
}

/* Agent stream status */
.agent-stream-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(var(--chat-agent-accent-rgb), 0.05);
  border-radius: var(--chat-border-radius-sm);
  font-size: 0.8rem;
  color: var(--chat-agent-accent);
  margin: 0.5rem 0;
}

.agent-stream-status.processing {
  /* animation: agent-processing-pulse 1.5s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes agent-processing-pulse {
  0%, 100% { 
    background: rgba(var(--chat-agent-accent-rgb), 0.05);
  }
  50% { 
    background: rgba(var(--chat-agent-accent-rgb), 0.1);
  }
}

.end-chat-button {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all var(--chat-transition-smooth);
  display: flex;
  align-items: center;
  gap: 4px;
}

.end-chat-button:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Chat ended indicator */
.chat-ended-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--chat-text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.chat-ended-line {
  flex: 1;
  height: 1px;
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.2);
}

.chat-ended-text {
  padding: 0 12px;
  background: var(--chat-background);
  white-space: nowrap;
}

/* =================== WAITING & LOADING STATES =================== */
.luxury-waiting-indicator {
  display: flex;
  align-items: center;
    gap: 12px;
  padding: 16px 20px;
  background: var(--chat-surface-elevated);
  border-radius: 16px;
  margin: 16px 0;
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
}

.waiting-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--chat-accent-rgb), 0.2);
  border-top: 2px solid var(--chat-accent);
  border-radius: 50%;
  /* animation: spin 1s linear infinite; - DISABLED FOR PERFORMANCE */
}

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

.luxury-waiting-text {
  font-size: 14px;
  color: var(--chat-text-secondary);
  background: linear-gradient(
    90deg,
    var(--chat-text-secondary) 25%,
    var(--chat-accent) 50%,
    var(--chat-text-secondary) 75%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =================== LINK PROCESSING & PREVIEWS =================== */
.link-processing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 12px 0;
}

.link-processing-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--chat-text-secondary);
  font-size: 13px;
}

.link-processing-icon {
  color: var(--chat-accent);
}

.message-link-previews,
.ai-message-links {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.06);
}

/* =================== REFINED KEYFRAME ANIMATIONS =================== */
@keyframes luxury-gradient-flow {
  0%, 100% { 
    background-position: 0% 50%; 
  }
  50% { 
    background-position: 100% 50%; 
  }
}

@keyframes ai-typing-gradient-flow {
  0%, 100% { 
    background-position: 0% 50%;
  }
  50% { 
    background-position: 100% 50%;
  }
}

@keyframes agent-mode-gradient-flow {
  0%, 100% { 
    background-position: 0% 50%;
  }
  50% { 
    background-position: 100% 50%;
  }
}

/* Mobile input adjustments */
@media (max-width: 768px) {
  .smart-chat-input-area {
    padding: 16px;
  }
  
  .smart-chat-input-wrapper-integrated {
    padding: 10px 14px; /* ADJUSTED FOR MOBILE */
    gap: 10px;
    min-height: 50px; /* SMALLER HEIGHT FOR MOBILE */
    /* Remove max-height to allow expansion like desktop */
    /* max-height: 50px; - REMOVED to allow expansion */
  }
  
  /* Prevent zoom on mobile input focus - KEEP 16px FOR iOS */
  .smart-chat-input-modern {
    font-size: 12px !important; /* Keep 16px on mobile to prevent zoom */
    /* Additional iOS zoom prevention */
    transform: scale(1);
    -webkit-transform: scale(1);
    -webkit-text-size-adjust: 100%;
    min-height: 18px; /* ADJUSTED FOR MOBILE */
    /* Remove max-height and fixed height to allow expansion */
    /* max-height: 18px; - REMOVED to allow expansion */
    /* height: 18px; - REMOVED to allow expansion */
    max-height: 120px; /* Allow expansion up to 120px like desktop */
    /* Remove mobile touch focus effects */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
  }

  /* Prevent zoom on any input within chat */
  input, textarea, select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    transform: scale(1) !important;
    /* Remove mobile touch focus effects */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  
  
  
  /* Ensure input area stays at bottom */
  .smart-chat-input-area {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--chat-background) !important;
    z-index: 10 !important;
    /* Add padding for safe area */
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  
  /* FIXED: Remove conflicting scroll rules - use unified scroll from main definition */
  
  
  .smart-chat-input-wrapper-integrated {
    border-radius: 24px; /* Larger border radius for mobile */
    /* Ensure wrapper has proper overflow for glow */
    overflow: visible;
    position: relative;
  }

  .smart-chat-send-button-internal,
  .smart-chat-attach-button-internal {
    width: 26px;
    height: 26px;
  }
  
  /* FIXED: Remove duplicate mobile scroll rule - use unified scroll from main definition */
  
  .conversation-dropdown-content {
    top: 70px;
    min-width: 260px;
    max-width: calc(100vw - 40px);
  }
  
  /* Adjust AI avatar for mobile */
  .ai-message-avatar {
    width: 28px;
    height: 28px;
  }
  
  .ai-avatar-icon {
    width: 24px;
    height: 24px;
    /* Enhanced mobile glow performance */
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  
  /* Optimize glow effects for mobile */
  .ai-avatar-icon.ai-thinking-glow::before,
  .ai-avatar-icon.ai-thinking-glow::after {
    /* Reduce glow intensity on mobile for better performance */
    opacity: 0.6;
  }
 
  
 
  
  /* Better user message spacing on mobile */
  .smart-chat-message.user .smart-chat-bubble {
    max-width: 85%;
    padding: 8px 12px;
    font-size: 12px;
  }
  
  /* AI text content mobile adjustments */
  .ai-text-content {
    font-size: 13px;
    line-height: 1.5;
  }
  
  /* Enhanced attachment options mobile */
  .smart-chat-attach-options {
    min-width: 200px;
    max-width: calc(100vw - 40px);
    padding: 10px;
  }
  
  .smart-chat-attach-option {
    padding: 10px 14px;
    gap: 12px;
  }
}

/* =================== PREMIUM SEND ICON & ELEGANCE =================== */
.premium-send-icon {
  transition: all var(--chat-transition-smooth);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.smart-chat-send-button-internal.active .premium-send-icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

/* =================== FINAL TOUCH-UPS & ACCESSIBILITY =================== */
/* Focus states for accessibility */
.smart-chat-button:focus-visible,
.smart-chat-send-button-internal:focus-visible,
.smart-chat-attach-button-internal:focus-visible,
.conversation-dropdown-trigger:focus-visible,
.chat-navigation-button:focus-visible {
  outline: 2px solid var(--chat-accent);
  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) {
  .smart-chat {
    --chat-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
    --chat-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.4);
    --chat-shadow-dramatic: 0 16px 64px rgba(0, 0, 0, 0.5);
  }
  
  .smart-chat-button,
  .smart-chat-send-button-internal,
  .smart-chat-message.user .smart-chat-bubble {
    border: 2px solid currentColor;
  }
}

/* =================== LUXURY GREETING CONTAINER =================== */
.chat-greeting-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  margin: 20px 0;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 320px;
  max-height: 320px; /* Fixed height to prevent changes */
  height: 320px; /* Consistent height */
  overflow: hidden; /* Prevent content overflow */
  z-index: 10; /* Ensure it's above messages but below other elements */
}

/* =================== NEW LE GREETING CONTAINER =================== */
.LE-chat-greeting-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  margin: 20px 0;
  background: transparent;
  position: relative;
  min-height: 320px;
  max-height: 320px; /* Fixed height to prevent changes */
  height: 320px; /* Consistent height */
  overflow: hidden; /* Prevent content overflow */
  /* Remove all CSS animations - use only Framer Motion */
  transition: none !important;
}

.greeting-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  margin-bottom: 24px;
  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);
  
  transition: all var(--chat-transition-luxury);
  position: relative;
  overflow: hidden;
}

/* =================== NEW LE GREETING LOGO =================== */
.LE-greeting-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  margin-bottom: 24px;
  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);
  
  transition: all var(--chat-transition-luxury);
  position: relative;
  overflow: hidden;
}

.greeting-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(var(--kelp-rgb, 134, 142, 150), 0.05) 0%,
    rgba(var(--gold-rgb), 0.08) 50%,
    rgba(var(--kelp-rgb, 134, 142, 150), 0.05) 100%
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--chat-transition-luxury);
  /* animation: greeting-logo-glow 4s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

.greeting-logo:hover::before {
  opacity: 1;
}

@keyframes greeting-logo-glow {
  0%, 100% { 
    opacity: 0;
    transform: scale(1);
  }
  50% { 
    opacity: 0.3;
    transform: scale(1.02);
  }
}

.greeting-text-container {
  text-align: center;
  margin-bottom: 32px;
  max-width: 280px;
  min-height: 60px; /* Consistent height to prevent changes */
  height: 60px; /* Fixed height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.greeting-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--kelp-800);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.greeting-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--kelp-600);
  margin: 0;
  opacity: 0.8;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* =================== NEW LE GREETING TEXT CONTAINER =================== */
.LE-greeting-text-container {
  text-align: center;
  margin-bottom: 32px;
  max-width: 280px;
  min-height: 60px; /* Consistent height to prevent changes */
  height: 60px; /* Fixed height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.LE-greeting-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--kelp-800);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.LE-greeting-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--kelp-600);
  margin: 0;
  opacity: 0.8;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.greeting-suggestions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 40px; /* Consistent height for suggestions */
  align-items: center;
}

.greeting-suggestion-button {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kelp-700);
  cursor: pointer;
  transition: all var(--chat-transition-luxury);
  box-shadow: 0 1px 3px rgba(var(--kelp-rgb, 134, 142, 150), 0.08);

  position: relative;
  overflow: hidden;
  min-width: 120px;
  text-align: center;
}

.greeting-suggestion-button::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: 16px;
  -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 var(--chat-transition-smooth);
}

.greeting-suggestion-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
  background: rgba(255, 255, 255, 0.95);
  color: var(--kelp-800);
}

.greeting-suggestion-button:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* Mobile greeting adjustments */
@media (max-width: 768px) {
  .chat-greeting-container {
    padding: 32px 16px;
    min-height: 280px;
  }
  
  .greeting-logo {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
  }
  
  .greeting-title {
    font-size: 16px;
  }
  
  .greeting-subtitle {
    font-size: 13px;
  }
  
  .greeting-suggestion-button {
    padding: 7px 14px;
    font-size: 12px;
    min-width: 100px;
  }
}

@media (max-width: 480px) {
  .chat-greeting-container {
    padding: 25px 12px;
    min-height: 250px;
  }
  
  .greeting-logo {
    width: 45px;
    height: 45px;
    margin-bottom: 18px;
  }
  
  .greeting-title {
    font-size: 14px;
  }
  
  .greeting-subtitle {
    font-size: 12px;
    line-height: 1.4;
  }
  
  .greeting-suggestion-button {
    padding: 6px 12px;
    font-size: 11px;
    min-width: 90px;
  }
}

@media (max-width: 360px) {
  .chat-greeting-container {
    padding: 20px 10px;
    min-height: 220px;
  }
  
  .greeting-logo {
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
  }
  
  .greeting-title {
    font-size: 13px;
  }
  
  .greeting-subtitle {
    font-size: 11px;
    line-height: 1.3;
  }
  
  .greeting-suggestion-button {
    padding: 5px 10px;
    font-size: 10px;
    min-width: 80px;
  }
}

/* =================== SUGGESTIONS CONTAINER =================== */
.smart-suggestions-container {
  margin: 16px 0;
  padding: 16px;
  background: var(--chat-surface);
  border-radius: var(--chat-border-radius);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  box-shadow: var(--chat-shadow-subtle);
}

.suggestions-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--chat-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.suggestion-icon {
  color: var(--chat-accent);
}

.suggestions-buttons {
  display: flex;
  flex-direction: column; /* Change to vertical layout */
  gap: 6px; /* Reduced gap for vertical layout */
}

.suggestion-button {
  background: var(--chat-background);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.12);
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--chat-text);
  cursor: pointer;
  transition: all var(--chat-transition-smooth);
  font-weight: 500;
}

.suggestion-button:hover {
  background: var(--chat-surface-elevated);
  border-color: rgba(var(--gold-rgb), 0.3);
  transform: translateY(-1px);
  box-shadow: var(--chat-shadow-subtle);
}

.suggestions-fade-out {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--chat-transition-smooth);
}

/* =================== SCROLL MANAGEMENT =================== */





/* Conversation dropdown scroll management */
.conversation-dropdown-content-inner {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px;

  /* Fix flex container height and enable proper scrolling */
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* White space philosophy - generous spacing */
  gap: 8px;
}

/* =================== CHAT SCROLL MANAGEMENT =================== */



/* Prevent scroll on chat container when open on mobile */
@media (max-width: 768px) {
  .LE-smart-chat-container.open {
    /* Allow chat container to scroll internally */
    overflow: hidden;
  }
}

/* =================== END OF SMART CHAT STYLES =================== */

/* Dynamic Tool Indicator - Inline with Claude's text */
/* Dynamic Tool Indicator - Inline with Claude's text */
.dynamic-tool-indicator {
  margin-top: 4px;
  padding: 0;
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}

.tool-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.tool-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid transparent;
  border-top: 1.5px solid var(--kelp-500);
  border-radius: 50%;
  /* animation: spin 1s linear infinite; - DISABLED FOR PERFORMANCE */
  flex-shrink: 0;
}

.tool-message {
  font-size: 13px;
  color: var(--kelp-600);
  background: linear-gradient(to right, var(--kelp-600) 0%, var(--kelp-200) 10%, var(--kelp-600) 20%);
  background-position: 0;
  -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;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(4px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}


/* Dark mode support */
.dark .tool-message {
  color: var(--kelp-400);
  background: linear-gradient(
    90deg, 
    var(--kelp-400) 0%, 
    var(--kelp-200) 25%, 
    var(--kelp-100) 50%, 
    var(--kelp-200) 75%, 
    var(--kelp-400) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .tool-spinner {
  border-top-color: var(--kelp-400);
}

/* Inline Tool Container */
.inline-tool-container {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Improved transitions */
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
  transform: translateY(0);
}

.inline-tool-container.completed {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0;
  margin: 4px 0;
  /* Enhanced completion transition */
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.inline-tool-container.completed:hover {
  background: transparent;
  transform: translateY(-1px) scale(1.01);
}

.inline-tool-container.active {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0;
  margin: 4px 0;
  /* Smooth active transition */
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
  transform: translateY(0);
}

.inline-tool-container.transitioning {
  opacity: 0.8;
  transform: translateY(-2px) scale(0.98);
  /* Better transitioning state */
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Tool Result Inline */
.tool-result-inline {
  border-radius: 8px;
  overflow: hidden;
  background: var(--kelp-50);
  margin-top: 4px;
}

.tool-result-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--kelp-600);
  transition: all 0.2s ease;
  border-radius: 6px;
}

.tool-result-toggle:hover {
  background: rgba(45, 67, 46, 0.03);
  color: var(--kelp-700);
}

.tool-expand-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
  color: var(--kelp-500);
  margin-right: 5.3rem;
  flex-shrink: 0;
}

.tool-expand-icon.expanded {
  transform: rotate(180deg);
}

.tool-result-summary {
  flex: 1;
  font-weight: 500;
  color: var(--kelp-400);
}

.tool-duration {
  font-size: 11px;
  color: var(--kelp-500);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

.tool-status-icon {
  margin-right: 0px;
  font-size: 0.875rem;
  font-weight: bold;

}

.tool-status-icon.completed {
  color: #10b981;
}

.tool-status-icon.failed {
  color: #ef4444;
}

.failed-tool-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.retry-button {
  background: none;
  border: none;
  color: var(--kelp-600);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 10px;
  transition: all 0.2s ease;
}

.retry-button:hover {
  background: var(--kelp-100);
  color: var(--kelp-800);
}

.tool-result-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
}

.tool-result-error .error-message {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.tool-result-error .error-details {
  color: var(--kelp-600);
  font-size: 11px;
  font-family: 'Courier New', monospace;
}

.tool-result-toggle.failed {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: default;
}

.tool-error-content {
  flex: 1;
}

.tool-error-message {
  color: #6b7280;
  font-size: 12px;
  margin-top: 2px;
}

.tool-error-details {
  color: #9ca3af;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  margin-top: 4px;
  padding: 4px 8px;
  background: #f9fafb;
  border-radius: 4px;
  border-left: 2px solid #fecaca;
}

.tool-loading-minimal {
  font-size: 13px;
  color: var(--kelp-600);
  position: relative;
  background: linear-gradient(
      90deg,
      var(--kelp-600) 0%,
      var(--kelp-600) 30%,
      var(--kelp-300) 45%,
      var(--kelp-200) 50%,
      var(--kelp-300) 55%,
      var(--kelp-600) 70%,
      var(--kelp-600) 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: Shine 3s ease-in-out infinite; 
  transition: all 0.3s ease;
  opacity: 1;
}

.tool-loading-minimal.completing {
  opacity: 0.7;
  transform: scale(0.95);
}


@keyframes luxuryShine {
  0% {
      background-position: -300% center;
  }
  100% {
      background-position: 300% center;
  }
}

.payment-entry {
  padding: 8px 0;
  border-bottom: 1px solid rgba(45, 67, 46, 0.1);
}

.payment-entry:last-child {
  border-bottom: none;
}

/* Product tool result styles */
.products-grid-tool {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.product-tool-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid var(--kelp-200);
  border-radius: 8px;
  overflow: hidden;
  background: white;
  padding: 12px;
  transition: all 0.2s ease;
  height: 100%;
}

.product-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-tool-image {
  width: 60px;
  height: 60px;
  min-width: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kelp-50);
  position: relative;
  border-radius: 6px;
  margin-right: 12px;
}

.product-tool-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s ease;
}

.product-tool-image img:hover {
  opacity: 0.9;
}

.product-placeholder {
  color: var(--kelp-400);
  font-size: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.product-tool-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.product-tool-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--kelp-800);
  margin-bottom: 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-link {
  color: var(--kelp-800);
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* Regular message links in chat text */
.message-link {
  color: var(--gold);
  text-decoration: underline;
  transition: all 0.2s ease;
  cursor: pointer;
}

.message-link:hover {
  color: var(--kelp-700);
  text-decoration: none;
}

/* Inline product links in chat text */
.product-link-inline {
  color: var(--kelp-700);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--kelp-300);
  transition: all 0.2s ease;
  padding-bottom: 1px;
  cursor: pointer;
}

.product-link-inline:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
  text-decoration: none;
}

.product-tool-price {
  font-size: 10px;
  color: var(--kelp-600);
  font-weight: bold;
  margin-bottom: 2px;
}

.product-tool-status {
  font-size: 9px;
  color: var(--kelp-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.products-more {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--kelp-500);
  font-style: italic;
}

/* Tool Result Details */
.tool-result-details {
  border-top: 1px solid rgba(45, 67, 46, 0.06);
  padding: 1rem 0;
  background: transparent;
  font-size: 11px;
  color: var(--kelp-500);
  transition: all 0.2s ease;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid rgba(45, 67, 46, 0.03);
}

.result-row:last-child {
  border-bottom: none;
}

.result-label {
  font-weight: 500;
  color: var(--kelp-400);
  min-width: 80px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-value {
  color: var(--kelp-600);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  text-align: right;
  font-size: 11px;
}

/* Status-specific colors */
.status-pending {
  color: #f59e0b;
}

.status-completed, .status-paid {
  color: #10b981;
}

.status-failed, .status-error {
  color: #ef4444;
}

.status-processing {
  color: #3b82f6;
}

/* Tool Result Types */
.tool-result-order,
.tool-result-logs,
.tool-result-products,
.tool-result-tracking {
  /* Inherits styles from result-row above */
}

.tool-result-generic pre {
  margin: 0;
  padding: 8px;
  background: var(--kelp-50);
  border-radius: 4px;
  font-size: 11px;
  color: var(--kelp-700);
  overflow-x: auto;
}

/* Dark mode support */
.dark .tool-result-inline {
  background: var(--kelp-800);
  border-color: var(--kelp-600);
}

.dark .tool-result-toggle {
  color: var(--kelp-300);
}

.dark .tool-result-toggle:hover {
  background: var(--kelp-700);
}

.dark .tool-result-summary {
  color: var(--kelp-100);
}

.dark .tool-result-details {
  background: var(--kelp-900);
  border-color: var(--kelp-600);
}

.dark .result-row {
  border-color: var(--kelp-700);
}

.dark .result-label {
  color: var(--kelp-400);
}

.dark .result-value {
  color: var(--kelp-200);
}

.dark .tool-result-generic pre {
  background: var(--kelp-800);
  color: var(--kelp-300);
}

/* Hide ActionDisplay component since we're using inline stages */
.action-display {
  display: none;
}

/* Ensure AI message content flows naturally */
.ai-message-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Smooth transitions for stage changes */
.inline-thinking-stage {
  transition: all 0.3s ease-in-out;
}

/* RTL support for tool loading */
.tool-loading-minimal[dir="rtl"] {
  background: linear-gradient(
    270deg,
    var(--kelp-600) 0%,
    var(--kelp-600) 20%,
    var(--kelp-300) 30%,
    var(--kelp-200) 35%,
    var(--kelp-300) 40%,
    var(--kelp-600) 60%,
    var(--kelp-600) 100%
  );
  /* animation: luxuryShineRTL 4s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes luxuryShineRTL {
  0% {
    background-position: 200% center;
  }
  25% {
    background-position: 100% center;
  }
  50% {
    background-position: 0% center;
  }
  75% {
    background-position: -100% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* =================== ATTACHMENT STYLES =================== */
.message-attachments {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-attachment {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(var(--kelp-200-rgb), 0.2);
  background: transparent;
  max-width: 250px; /* Limit max width */
}

.image-attachment {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-attachment:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--kelp-900-rgb), 0.08);
}

.attachment-image {
  width: 100%;
  max-width: 200px;
  max-height: 150px; /* Limit height */
  height: auto;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.image-attachment-info {
  padding: 6px 8px;
  background: rgba(var(--kelp-50-rgb), 0.6);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(var(--kelp-200-rgb), 0.2);
}

.attachment-name {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--kelp-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-size {
  font-size: 0.65rem;
  color: var(--kelp-500);
}

/* Greeting display for animated text */
.chat-greeting-display {
  background: linear-gradient(135deg, 
    rgba(27, 28, 23, 0.95) 0%, 
    rgba(27, 28, 23, 0.98) 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(var(--gold-rgb), 0.1);

  white-space: nowrap;
  overflow: hidden;
  
  /* FIXED: Ensure proper rendering on page load */
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateZ(0);
  will-change: auto;
  backface-visibility: hidden;
}

.chat-greeting-display .greeting-text {
  color: var(--gold);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Button transformation states - smooth rotation then expansion */
.smart-chat-button {
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: right center;
  position: relative;
}

/* Step 1: Rotate 90 degrees left */
.smart-chat-button.rotated {
  transform: rotate(-90deg);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Step 2: Expand after rotation */
.smart-chat-button.transformed {
  width: 280px !important;
  height: 60px !important;
  /* Remove clip-path from here - let it animate via animation keyframes */
  border-radius: 8px !important;
  transform: translateX(-220px) rotate(-90deg); /* Combined rotation and position */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(27, 28, 23, 0.95) 0%, 
    rgba(27, 28, 23, 0.98) 100%);
  writing-mode: horizontal-tb;
  text-orientation: initial;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.4s; /* Delay expansion after rotation */
  box-sizing: border-box;
  max-height: 60px;
  overflow: hidden;
  /* Add clip-path animation */
  animation: expandClipPath 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards;
}

/* Add keyframes for clip-path animation */
@keyframes expandClipPath {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

/* Text fade animation */
.greeting-text-inline {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards; /* Start after expansion */
  font-size: 14px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}
@keyframes chatshine {
  0% {
      background-position: 100%;
  }
  100% {
      background-position: -100%;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.smart-chat-button.transformed:hover {
  transform: scale(1.02) translateY(-2px);
}

/* Reduced shine during animation */
.smart-chat-button.reduced-shine .button-shine-bg {
  opacity: 0.3;
  animation-duration: 4s;
}

/* Inline greeting text */
.greeting-text-inline {
  color: var(--gold);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

/* Tool loading icons */
.tool-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  color: var(--gold);
  opacity: 0.8;
  /* animation: tool-icon-pulse 2s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

.tool-icon svg {
  flex-shrink: 0;
}

/* Special animation for reading (eye) icon */
.tool-icon svg path:first-child,
.tool-icon svg circle:last-child {
  /* animation: eye-blink 3s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes tool-icon-pulse {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(1);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.05);
  }
}

@keyframes eye-blink {
  0%, 85%, 100% { 
    opacity: 1; 
  }
  90%, 95% { 
    opacity: 0.3; 
  }
}

/* Mobile responsiveness for greeting */
@media (max-width: 768px){
  
  .chat-greeting-display {
    max-width: 250px;
    padding: 10px 14px;
  }
  
  /* Smaller button transformation on mobile */
  .smart-chat-button.transformed {
    width: min(250px, calc(100vw - 40px)) !important; /* Smaller on mobile, respect viewport */
    height: 55px !important; /* Keep height constant */
    max-width: calc(100vw - 40px);
    transform: translateX(-170px) rotate(-90deg); /* Adjusted for smaller width */
  }
  
  .greeting-text-inline {
    font-size: 13px !important; /* Smaller text on mobile */
    max-width: 200px;
  }
  
  /* Improved mobile greeting bubble */
  .chat-greeting-bubble {
    max-width: 280px;
    min-width: 200px;
    padding: 12px 16px;
    margin-right: 12px;
    /* Add smooth hardware acceleration for mobile */
    transform: translateZ(0);
    will-change: transform, opacity;
    /* Remove CSS transitions - use only Framer Motion */
    transition: none !important;
    /* Enhanced mobile performance */
    backface-visibility: hidden;
    /* Better mobile animation support */
    transform-origin: center;
  }
  
  .bubble-greeting-text {
    font-size: 13px;
    /* Smoother text rendering on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Better line height for mobile */
    line-height: 1.4;
    /* Enhanced mobile text performance */
    will-change: transform, opacity;
    backface-visibility: hidden;
    /* Remove CSS transitions - use only Framer Motion */
    transition: none !important;
    /* Better mobile text rendering */
    text-rendering: optimizeLegibility;
    /* Prevent layout shifts */
    min-height: 1.4em;
  }
  
  /* Optimize animations for mobile performance */
  .bubble-greeting-text.typing {
    /* Remove all complex animations on mobile */
    /* animation: blink-caret 1s step-end infinite; - DISABLED FOR PERFORMANCE */
    border-right: 2px solid var(--gold);
    /* Ensure text displays normally */
    width: auto;
    overflow: visible;
    opacity: 1;
    /* Enable Framer Motion animations on mobile */
    transition: none !important;
  }
  
  /* Remove mobile-optimized text reveal animation */
  /* @keyframes mobileTextFadeIn - REMOVED */
  
  /* Better mobile button positioning */
  .smart-chat-button {
    /* Better touch targets on mobile */
    min-width: 56px;
    min-height: 56px;
    /* Smooth hardware acceleration */
    transform: translateZ(0);
    will-change: transform;
  }
  
 
}



/* =================== BUBBLE GREETING ANIMATION =================== */
.chat-greeting-bubble {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(27, 28, 23, 0.95) 0%, 
    rgba(27, 28, 23, 0.98) 100%);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(var(--gold-rgb), 0.1);
  /* backdrop-filter: blur(20px); */
  max-width: 280px;
  min-width: 200px;
  opacity: 0;
  transform: translateX(20px) scale(0.9);
  /* Remove CSS transitions - use only Framer Motion */
  transition: none !important;
  pointer-events: none;
  margin-right: 16px;
  /* Prevent rendering issues */
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* Ensure text is always visible when bubble is shown */
  color: var(--gold);
}

.chat-greeting-bubble.show {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.chat-greeting-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid rgba(27, 28, 23, 0.95);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.bubble-greeting-text {
  color: var(--gold);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
  /* Remove all CSS animations that cause cursor separation */
  opacity: 1;
  transform: translateY(0);
  /* Keep only essential styles for typing */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Remove animation: bubbleTextReveal - causes cursor separation */
  /* Ensure text is always visible */
  display: block;
  visibility: visible;
  /* Remove all CSS transitions - use only Framer Motion */
  transition: none !important;
}

/* =================== NEW LE GREETING TEXT =================== */
.LE-bubble-greeting-text {
  color: var(--gold);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
  /* Performance optimizations for smooth animations */
  opacity: 1;
  transform: translateY(0);
  /* Enhanced text display */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ensure text is always visible */
  display: block;
  visibility: visible;
  /* Remove CSS transitions - use only Framer Motion */
  transition: none !important;
  /* Performance optimizations */
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* Smooth text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Prevent layout shifts */
  min-height: 1.4em;
  /* Smooth text transitions */
  contain: layout style;
  /* Enhanced animation support */
  transform-origin: center;
}

.chat-greeting-bubble.show .bubble-greeting-text {
  /* Remove CSS animation overrides */
  opacity: 1;
  transform: translateY(0);
}



/* Simplified typing animation - only border animation, no width changes */
.bubble-greeting-text.typing {
  /* Keep only the cursor, remove width animation that separates cursor from text */
  border-right: 2px solid var(--gold);

  width: auto;
  overflow: visible;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--gold); }
}

/* Button pulse animation when greeting is shown */
.smart-chat-button.greeting-active {
  /* animation: gentlePulse 3s ease-in-out infinite; - DISABLED FOR PERFORMANCE */
}

@keyframes gentlePulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(var(--gold-rgb), 0.15);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(var(--gold-rgb), 0.25);
  }
}

/* =================== INLINE ATTACHMENT PREVIEW =================== */
.inline-attachment-preview {
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(var(--kelp-rgb), 0.03);
  border: 1px solid rgba(var(--kelp-rgb), 0.1);
  border-radius: 12px;
}

.attachment-preview-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 250px;
}

.attachment-preview-image-small {
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(var(--kelp-rgb), 0.1);
  flex-shrink: 0;
}

.attachment-info-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.attachment-name-small {
  font-size: 12px;
  color: var(--kelp-600);
  truncate: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 120px;
}

.attachment-remove-small {
  background: none;
  border: none;
  color: var(--kelp-500);
  cursor: pointer;
  font-size: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.attachment-remove-small:hover {
  background: rgba(var(--kelp-rgb), 0.1);
  color: var(--kelp-700);
}

/* Luxury Voice Mode Styles */
.luxury-voice-toggle {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-voice-toggle.active {
  box-shadow: 
    0 0 20px rgba(218, 165, 32, 0.4),
    0 0 40px rgba(218, 165, 32, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.luxury-voice-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(218, 165, 32, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.luxury-voice-status-bar {
  position: relative;
  overflow: hidden;
}

.luxury-voice-status-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: luxuryShine 3s infinite;
  pointer-events: none;
}

@keyframes luxuryShine {
  0% { left: -100%; }
  50% { left: 0%; }
  100% { left: 100%; }
}

/* Voice Controls Animations */
.voice-controls-container {
  gap: 8px;
}

.voice-controls-container .luxury-voice-toggle svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.luxury-voice-toggle.active svg circle {
  animation: voicePulse 2s infinite ease-in-out;
}

@keyframes voicePulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: scale(1.5);
    opacity: 0.2;
  }
}

/* Connection Status Indicators */
.luxury-voice-status-bar .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
}

.luxury-voice-status-bar .status-dot.listening::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #007fff;
  border-radius: 50%;
  animation: listeningPulse 1s infinite;
}

.luxury-voice-status-bar .status-dot.speaking::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #ff0080;
  border-radius: 50%;
  animation: speakingPulse 0.8s infinite;
}

@keyframes listeningPulse {
  0% { 
    transform: scale(0.8);
    opacity: 1;
  }
  100% { 
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes speakingPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.7;
  }
  50% { 
    transform: scale(1.3);
    opacity: 0.3;
  }
}

@media (max-width: 425px) {
  .smart-chat-input-suggestions-container{
   margin-left: 0px;
  }
}

/* =================== NEW LE GREETING BUBBLE =================== */
.LE-chat-greeting-bubble {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(27, 28, 23, 0.95) 0%, 
    rgba(27, 28, 23, 0.98) 100%);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(var(--gold-rgb), 0.1);
  /* backdrop-filter: blur(20px); */
  max-width: 280px;
  min-width: 200px;
  /* Remove CSS transitions - use only Framer Motion */
  transition: none !important;
  pointer-events: none;
  margin-right: 16px;
  /* Prevent rendering issues */
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* Ensure text is always visible when bubble is shown */
  color: var(--gold);
  /* Ensure bubble is visible */
  opacity: 1;
  visibility: visible;
  display: block;
}

.LE-chat-greeting-bubble.show {
  opacity: 1;
  visibility: visible;
  display: block;
}

/* Structured Claude Response Styles */
.structured-claude-response {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.claude-text-content {
  line-height: 1.6;
  color: var(--kelp-700);
}

.claude-links-section {
  background: rgba(var(--kelp-rgb, 134, 142, 150), 0.04);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.08);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}

.links-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kelp-600);
}

.links-icon {
  font-size: 14px;
}

.structured-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.structured-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(var(--kelp-rgb, 134, 142, 150), 0.1);
  border-radius: 6px;
  text-decoration: none;
  color: var(--kelp-700);
  font-size: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.structured-link-item:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(var(--kelp-rgb, 134, 142, 150), 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--kelp-rgb, 134, 142, 150), 0.1);
}

.link-text {
  flex: 1;
  font-weight: 500;
}

.link-arrow {
  color: var(--kelp-500);
  font-weight: 600;
  transition: transform 0.2s ease;
}

.structured-link-item:hover .link-arrow {
  transform: translateX(2px);
}

.claude-tools-section {
  margin-top: 8px;
}

.tool-result-structured {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .structured-claude-response {
    gap: 10px;
  }
  
  .claude-links-section {
    padding: 10px;
  }
  
  .structured-link-item {
    padding: 10px;
    font-size: 13px;
  }
}/* 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 {
  /* No animation when idle - performance optimization */
}

.voice-mode-active .voice-chat-visualizer {
  animation: breathe 4s ease-in-out infinite;
}

.voice-mode-active .voice-chat-visualizer[data-state="listening"] {
  animation: voicePulse 2s ease-in-out infinite;
}

.voice-mode-active .voice-chat-visualizer[data-state="speaking"] {
  animation: voicePulse 1.5s ease-in-out infinite;
}

.voice-mode-active .voice-chat-visualizer[data-state="processing"] {
  animation: pulse 1.8s ease-in-out infinite;
}

/* 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) {
  
  
}