/* ==========================================================================
   Leaf Creator - Configurateur Make By M
   Design System & Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Colors - Brand */
    --color-background: #FDFCFB;
    --color-primary: #305853;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-border: #E5E5E5;

    /* Colors - Yarn Palette */
    --yarn-ecru: #F0EAD6;
    --yarn-forest: #305853;
    --yarn-mustard: #DCAE5B;
    --yarn-terracotta: #C06C5B;
    --yarn-gray: #A8A9AD;
    --yarn-brown: #5C4033;

    /* Colors - Metal (Glasses) */
    --metal-gold: #D4AF37;
    --metal-silver: #C0C0C0;
    --metal-black: #222222;

    /* Typography */
    --font-heading: 'Libre Baskerville', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
}

/* --------------------------------------------------------------------------
   Reset & Base Styles
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
    min-height: 100vh;
    /* Subtle linen/paper texture for elegance */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.06'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23f5f3f0'/%3E%3Crect width='1' height='1' fill='%23ebe8e4'/%3E%3C/svg%3E");
    background-size: auto, 4px 4px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-primary);
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.3;
}

h3 {
    font-size: 1rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-xl);
    background-color: var(--color-background);
}

.header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

/* Language Toggle */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
}

.lang-toggle:hover {
    background: var(--color-primary);
    color: white;
}

.lang-toggle__icon {
    width: 16px;
    height: 16px;
}

.lang-toggle__text {
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Main Layout
   -------------------------------------------------------------------------- */
.main {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-xl) 0;
}

.configurator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

/* --------------------------------------------------------------------------
   Preview Section (Left Column)
   -------------------------------------------------------------------------- */
.configurator__preview {
    position: sticky;
    top: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
}

.preview-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* PNG Layers Stack */
.leaf-visual {
    position: relative;
    width: 100%;
    height: 100%;
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity var(--transition-normal);
}

/* Color overlay wrapper for mix-blend-mode technique */
.layer-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.layer-wrapper .layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.color-overlay {
    /* Not used - keeping for potential future use */
    display: none;
}

/* Hide beret wrapper when disabled */
.layer-wrapper--hidden {
    opacity: 0;
    pointer-events: none;
}

.layer--shadow {
    z-index: 1;
    opacity: 0.3;
    filter: blur(8px);
}

.layer--body {
    z-index: 2;
}

.layer--scarf {
    z-index: 3;
}

.layer--beret {
    z-index: 4;
}

.layer--glasses {
    z-index: 5;
}

/* Layer hidden state */
.layer--hidden {
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Controls Section (Right Column)
   -------------------------------------------------------------------------- */
.configurator__controls {
    padding: var(--space-md) 0;
    overflow: visible;
    max-width: 100%;
}

.configurator__title {
    margin-bottom: var(--space-xs);
    font-size: 1.5rem;
}

.configurator__subtitle {
    display: inline-block;
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.configurator__subtitle:hover {
    color: var(--color-primary);
}

.configurator__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow: visible;
}

/* Config Step */
.config-step {
    padding-bottom: var(--space-sm);
    overflow: visible;
    max-width: 100%;
}

.config-step__label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Color Bubbles
   -------------------------------------------------------------------------- */
.color-bubbles {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    width: 100%;
    max-width: 520px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px;
    padding-bottom: 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) #fdfcfb;
    touch-action: pan-x pan-y; /* Allow horizontal scrolling and vertical page scroll */
}

.color-bubbles > * {
    pointer-events: auto;
}

/* Custom scrollbar for color slider */
.color-bubbles::-webkit-scrollbar {
    height: 6px;
}

.color-bubbles::-webkit-scrollbar-track {
    background: #fdfcfb;
    border-radius: 3px;
}

.color-bubbles::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
    min-width: 40px;
}

.color-bubbles::-webkit-scrollbar-thumb:hover {
    background: #264744;
}

.color-bubble-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 50px;
    flex-shrink: 0;
}

.color-bubble-name {
    font-size: 0.55rem;
    color: var(--color-text-light);
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    word-wrap: break-word;
}

.color-bubble {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
    flex-shrink: 0;
}

.color-bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background-size: cover;
    background-position: center;
}

/* Yarn/Crochet texture effect */
.color-bubble--yarn::before {
    background-image:
        /* Crochet stitch pattern - horizontal waves */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5' stroke='%23000' stroke-width='0.8' fill='none' opacity='0.15'/%3E%3C/svg%3E"),
        /* Subtle noise for yarn fiber texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='yarn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23yarn)' opacity='0.12'/%3E%3C/svg%3E");
    background-size: 10px 5px, cover;
    mix-blend-mode: overlay;
}

.color-bubble--yarn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    /* Additional highlight for 3D yarn ball effect */
    background: radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 60%);
    pointer-events: none;
}

.color-bubble:hover {
    transform: scale(1.1);
}

.color-bubble:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(48, 88, 83, 0.3);
}

.color-bubble--selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}

.color-bubble--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Metal bubbles (for glasses) */
.color-bubble--metal::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
}

/* --------------------------------------------------------------------------
   Global Tooltip (fixed position, JS controlled)
   -------------------------------------------------------------------------- */
.color-bubble-wrapper {
    position: relative;
}

.global-tooltip {
    position: fixed;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9999;
    pointer-events: none;
    border: 2px solid white;
    background: white;
}

.global-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.global-tooltip--visible {
    opacity: 1;
    visibility: visible;
}

/* Arrow pointing up when tooltip is below the bubble */
.global-tooltip--below::after {
    bottom: auto;
    top: -8px;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent white transparent;
}

.global-tooltip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Selected Colors Display (below figurine)
   -------------------------------------------------------------------------- */
.selected-colors {
    display: none; /* Hidden on desktop */
}

/* Selected colors display (visible on desktop and mobile) */
.selected-colors--mobile {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: 0;
    justify-content: flex-start; /* Left aligned on desktop */
}

.selected-color-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 70px;
}

.selected-color-item__image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.selected-color-item__image:hover {
    transform: scale(1.1);
}

.selected-color-item__label {
    font-size: 0.65rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selected-color-item__name {
    font-size: 0.75rem;
    color: var(--color-text);
    font-weight: 500;
}

/* Tooltip for selected colors */
.selected-color-item__tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    pointer-events: none;
    border: 2px solid white;
}

.selected-color-item__tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.selected-color-item__tooltip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-color-item:hover .selected-color-item__tooltip {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   Beret Toggle Button
   -------------------------------------------------------------------------- */
.beret-toggle {
    display: inline-block;
}

.beret-toggle__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
    color: var(--color-primary);
    background-color: transparent;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.beret-toggle__button:hover {
    background-color: var(--color-primary);
    color: white;
}

.beret-toggle__button--active {
    background-color: rgba(48, 88, 83, 0.1);
}

.beret-toggle__icon {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}

.beret-toggle__text {
    font-weight: 500;
}

/* Beret Options Container */
.beret-options {
    display: none;
}

.beret-options--visible {
    display: block;
}

/* Beret header row: button + checkbox */
.beret-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.beret-sync {
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Toggle Switch (kept for potential future use)
   -------------------------------------------------------------------------- */
.toggle {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    margin-bottom: var(--space-md);
}

.toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle__slider {
    position: relative;
    width: 48px;
    height: 26px;
    background-color: var(--color-border);
    border-radius: 13px;
    transition: background-color var(--transition-fast);
}

.toggle__slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.toggle input:checked + .toggle__slider {
    background-color: var(--color-primary);
}

.toggle input:checked + .toggle__slider::before {
    transform: translateX(22px);
}

.toggle__label {
    font-size: 0.875rem;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */
.checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox__box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.checkbox__box::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: var(--color-primary);
    border-radius: 2px;
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition-fast);
}

.checkbox input:checked + .checkbox__box {
    border-color: var(--color-primary);
}

.checkbox input:checked + .checkbox__box::after {
    opacity: 1;
    transform: scale(1);
}

.checkbox__label {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   CTA Buttons
   -------------------------------------------------------------------------- */
/* CTA Buttons Container */
.cta-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Base button style */
.cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cta-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Primary variant */
.cta-button--primary {
    background-color: var(--color-primary);
    color: white;
}

.cta-button--primary:hover {
    background-color: #264744;
    border-color: #264744;
    transform: translateY(-1px);
}

.cta-button--primary:active {
    transform: translateY(0);
}

/* Secondary variant */
.cta-button--secondary {
    background: transparent;
    color: var(--color-primary);
}

.cta-button--secondary:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-1px);
}

.cta-button--secondary:active {
    transform: translateY(0);
}

/* Toast notification */
.cta-button__toast {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    padding: 6px 12px;
    background: var(--color-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
}

.cta-button__toast::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-primary);
}

.cta-button__toast--visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* --------------------------------------------------------------------------
   Inspirations / Carousel Section
   -------------------------------------------------------------------------- */
.inspirations {
    max-width: 1400px;
    margin: var(--space-xxl) auto;
    padding: var(--space-xxl) var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.inspirations__title {
    text-align: center;
    margin-bottom: var(--space-xl);
    font-style: italic;
}

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.carousel {
    flex: 1;
    overflow: hidden;
}

.carousel__track {
    display: flex;
    gap: var(--space-lg);
    transition: transform var(--transition-slow);
}

/* Carousel Arrows */
.carousel-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    border-radius: var(--radius-full);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.carousel-arrow:hover {
    color: var(--color-primary);
    background-color: rgba(48, 88, 83, 0.1);
}

.carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Preset Card */
.preset-card {
    flex-shrink: 0;
    width: 200px;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.preset-card:hover {
    transform: translateY(-4px);
}

.preset-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #F5F5F3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.preset-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mini leaf visual in preset card */
.preset-card__visual {
    position: relative;
    width: 100%;
    height: 100%;
}

.preset-card__visual .mini-layer {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
    object-fit: contain;
}

.preset-card__name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-style: italic;
    text-align: center;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.preset-card__font {
    font-size: 0.75rem;
    text-align: center;
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

.preset-card__button {
    display: block;
    margin: 0 auto;
    padding: var(--space-xs) var(--space-md);
    font-size: 0.75rem;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.preset-card__button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   CSS Color Filters for PNG Coloring
   -------------------------------------------------------------------------- */

/*
 * These filters transform grayscale PNGs to colored versions
 * while preserving texture and shading.
 * The technique uses sepia + saturate + hue-rotate to achieve target colors.
 */

/* Yarn Colors - New Palette */

/* Les Bleus */
.filter-piscine {
    filter: sepia(1) saturate(2.5) brightness(0.83) contrast(1.05) hue-rotate(134deg);
}
.filter-azur {
    filter: sepia(1) saturate(1.6) brightness(0.85) contrast(1.05) hue-rotate(159deg);
}
.filter-eucalyptus {
    filter: sepia(0.6) saturate(1) brightness(1.01) contrast(1) hue-rotate(150deg);
}
.filter-naval {
    filter: sepia(0.6) saturate(3.4) brightness(0.23) contrast(1.2) hue-rotate(195deg);
}
.filter-prusse {
    filter: sepia(1) saturate(3.4) brightness(0.59) contrast(1.25) hue-rotate(152deg);
}

/* Les Verts */
.filter-amande {
    filter: sepia(0.5) saturate(0.9) brightness(1.11) contrast(1.05) hue-rotate(87deg);
}
.filter-anisade {
    filter: sepia(0.5) saturate(1.4) brightness(1.25) contrast(1.05) hue-rotate(54deg);
}
.filter-cedre {
    filter: sepia(1) saturate(1.7) brightness(0.33) contrast(1) hue-rotate(118deg);
}
.filter-vegetal {
    filter: sepia(0.6) saturate(2.2) brightness(0.53) contrast(1.2) hue-rotate(24deg);
}

/* Les Rouges */
.filter-griotte {
    filter: sepia(1) saturate(3.8) brightness(0.51) contrast(1.2) hue-rotate(300deg);
}
.filter-cerise {
    filter: sepia(1) saturate(5.3) brightness(0.55) contrast(1.2) hue-rotate(304deg);
}

/* Les Roses */
.filter-vieuxrose {
    filter: sepia(0.5) saturate(1.4) brightness(1.23) contrast(1.05) hue-rotate(313deg);
}
.filter-pasteque {
    filter: sepia(1) saturate(2.8) brightness(0.91) contrast(1.1) hue-rotate(307deg);
}
.filter-fuchsia {
    filter: sepia(1) saturate(4.1) brightness(0.75) contrast(1.1) hue-rotate(277deg);
}

/* Les Jaunes */
.filter-gold-yarn {
    filter: sepia(1) saturate(3.9) brightness(0.71) contrast(1.05) hue-rotate(0deg);
}
.filter-soleil {
    filter: sepia(1) saturate(4.6) brightness(1.23) contrast(1.1) hue-rotate(5deg);
}
.filter-zeste {
    filter: sepia(1) saturate(2.2) brightness(1.79) contrast(0.95) hue-rotate(0deg);
}

/* Les Oranges */
.filter-carotte {
    filter: sepia(1) saturate(5.1) brightness(0.57) contrast(1.15) hue-rotate(311deg);
}
.filter-abricot {
    filter: sepia(1) saturate(2.3) brightness(1.29) contrast(0.9) hue-rotate(326deg);
}

/* Les Bruns */
.filter-ecureuil {
    filter: sepia(1) saturate(3.4) brightness(0.35) contrast(1.05) hue-rotate(330deg);
}
.filter-cappuccino {
    filter: sepia(1) saturate(3.1) brightness(0.33) contrast(1) hue-rotate(338deg);
}

/* Les Beiges */
.filter-perle {
    filter: sepia(0.5) saturate(1) brightness(1.13) contrast(1.05) hue-rotate(345deg);
}
.filter-chanvre {
    filter: sepia(0.5) saturate(1.9) brightness(0.67) contrast(1) hue-rotate(319deg);
}
.filter-cereale {
    filter: sepia(1) saturate(2.2) brightness(0.91) contrast(1.05) hue-rotate(336deg);
}

/* Les Gris/Noirs */
.filter-noir {
    filter: sepia(0.6) saturate(0.3) brightness(0.33) contrast(1.2) hue-rotate(5deg);
}
.filter-minerai {
    filter: sepia(1) saturate(0.6) brightness(0.55) contrast(1) hue-rotate(345deg);
}
.filter-galet {
    filter: sepia(0.1) saturate(2.6) brightness(1.15) contrast(0.95) hue-rotate(307deg);
}

/* Les Violets */
.filter-aubergine {
    filter: sepia(1) saturate(4.3) brightness(0.31) contrast(1.1) hue-rotate(290deg);
}
.filter-violet {
    filter: sepia(1) saturate(3.4) brightness(0.53) contrast(1.2) hue-rotate(238deg);
}
.filter-lilas {
    filter: sepia(0.5) saturate(1.7) brightness(1.49) contrast(0.9) hue-rotate(249deg);
}

/* Les Blancs */
.filter-blanc {
    filter: sepia(0.5) saturate(0) brightness(1.67) contrast(1.3) hue-rotate(0deg);
}
.filter-peau {
    filter: sepia(1) saturate(1.6) brightness(1.73) contrast(0.8) hue-rotate(323deg);
}

/* Metal Colors (Glasses) */
.filter-gold {
    filter: sepia(1) saturate(3) brightness(1.1) hue-rotate(15deg);
}

.filter-rosegold {
    filter: sepia(1) saturate(2) brightness(0.9) hue-rotate(-15deg);
}

.filter-silver {
    filter: sepia(0.1) saturate(0.2) brightness(1.1);
}

.filter-black {
    filter: brightness(0.2) saturate(0);
}

/* --------------------------------------------------------------------------
   Responsive Design
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .configurator {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .configurator__preview {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: var(--color-background);
        padding: var(--space-sm);
        margin: 0 calc(-1 * var(--space-xl));
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }

    .preview-container {
        max-width: 200px;
        margin: 0 auto;
        transform-origin: center top;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    margin-bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    /* Reduced size when sticky is active */
    .configurator__preview--stuck .preview-container {
        transform: scale(0.6);
        margin-bottom: -140px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --space-xl: 1.5rem;
        --space-xxl: 2rem;
    }

    h1 {
        font-size: 1.25rem;
    }

    .header {
        padding: var(--space-sm);
    }

    .logo {
        width: 100px;
        height: 100px;
    }

    .main {
        padding: var(--space-xl) var(--space-md) 0;
    }

    .configurator__preview {
        margin: 0 calc(-1 * var(--space-md));
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .preview-container {
        max-width: 160px;
    }

    .configurator__controls {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Mobile selected colors - centered and larger images */
    .selected-colors--mobile {
        justify-content: center;
    }

    .selected-colors--mobile .selected-color-item__image {
        width: 60px;
        height: 60px;
    }

    /* Constrain color bubbles width on mobile */
    .color-bubbles {
        max-width: calc(100vw - 2 * var(--space-md));
    }

    .beret-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .color-bubble {
        width: 38px;
        height: 38px;
    }

    .preset-card {
        width: 160px;
    }

    .inspirations {
        padding: var(--space-lg) var(--space-md);
    }

    .carousel-arrow {
        width: 36px;
        height: 36px;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-button {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .configurator__title {
        font-size: 1.25rem;
    }

    .preview-container {
        max-width: 350px;
    }

    .color-bubble {
        width: 36px;
        height: 36px;
    }

    .preset-card {
        width: 140px;
    }

    .cta-button {
        font-size: 0.875rem;
        padding: var(--space-sm) var(--space-md);
    }
}

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

.no-scroll {
    overflow: hidden;
}