/*
Theme Name: Osty (Child Theme)
Theme URI: http://madsparrow.us/
Author: Mad Sparrow
Author URI: https://themeforest.net/user/madsparrow
Description: Osty Creative Agency and Portfolio Theme – The theme is built to take advantage of the Full Site Editing features introduced in WordPress and Elementor plugin, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Tags: one-column, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, page transition
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: osty
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Template: osty
*/

/* Add your own modification from here
-------------------------------------------------------------- */

/* Global Typography */
body, h1, h2, h3, h4, h5, h6, input, button, select, textarea {
    font-family: "SF Pro", Sans-serif;
}


/* Ombre Logo accueil*/
.ombre-logo-accueil img {
    box-shadow: none !important;
    filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.5));
}

/* Ombre voiture accueil*/
.shadow-car-png img {
    box-shadow: none !important;
    filter: drop-shadow(0px 40px 30px rgba(0, 0, 0, 0.5));
}

/* Global Background Signature - ANTI-COMPRESSION FOR SHORT PAGES */
body {
    background: linear-gradient(180deg,
            rgba(7, 7, 7, 0.42) 0%,
            rgba(112, 0, 226, 0.42) 32.61%,
            rgba(0, 255, 252, 0.42) 63.88%,
            rgba(235, 235, 235, 0.42) 92.91%) !important;

    background-color: #070707 !important;
    background-size: 100% 2500px !important;
    /* Fixed height to prevent squashing on short pages */
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
    background-attachment: scroll !important;
}

/* Home Page specific background reset (Cover instead of fixed height) */
body.home {
    background-size: cover !important;
}

body .elementor {
    background: transparent !important;
}

/* --- BOUTON WEB 3.0 : HAUTE VISIBILITÉ (ÉLECTRIQUE) --- */

/* --- BOUTON GLASSMORPHISM ÉPURÉ (MODERNE) --- */

.btn--contrast {
    /* 1. LA STRUCTURE "VERRE GIVRÉ" */
    background: #7000e25e !important;
    /* Fond Cyan très léger (10%) */
    backdrop-filter: blur(12px) !important;
    /* Le flou derrière le bouton */
    -webkit-backdrop-filter: blur(12px) !important;

    /* 2. BORDURE FINE ET SUBTILE */
    border: 1px solid #7000e25e !important;
    /* Bordure fine semi-transparente */
    border-radius: 16px !important;

    /* 3. TYPOGRAPHIE & ESPACEMENT */
    color: #FFFFFF !important;
    font-family: "SF Pro", Sans-serif !important;
    font-weight: 600 !important;
    /* Un peu plus fin que 700 pour l'élégance */
    font-size: 16px !important;
    letter-spacing: 0.8px !important;
    /* Lettres un peu plus espacées (Luxe) */
    text-transform: none !important;
    padding: 16px 40px !important;

    /* 4. DETAILS DE LUMIÈRE (L'effet "Premium") */
    /* Petit reflet blanc à l'intérieur en haut pour l'effet de volume */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

    /* 5. INTERACTION */
    transition: all 0.3s ease-out !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
}

/* --- LE REFLET ANIMÉ (Subtil et Rapide) --- */
.btn--contrast::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    /* Reflet plus fin */
    height: 100%;
    /* Reflet blanc pur mais très transparent */
    background: linear-gradient(120deg,
            transparent,
            #7000e25e,
            transparent);
    transform: skewX(-20deg);
    transition: none;
    /* Pas de transition au retour */
    z-index: -1;
}

/* --- AU SURVOL : ON ALLUME LA LUMIÈRE --- */
.btn--contrast:hover {
    /* Le bouton remonte légèrement */
    transform: translateY(-3px) !important;

    /* Le fond devient un peu plus opaque et plus Cyan */
    background: #7000e25e !important;

    /* La bordure devient plus brillante */
    border-color: #7000e25e !important;

    /* Une ombre portée Cyan douce apparaît (le "Glow") */
    box-shadow:
        0 10px 30px -10px 7000e27a,
        /* Ombre externe */
        inset 0 0 15px #7000e224 !important;
    /* Lueur interne */
}

/* Animation du reflet au survol */
.btn--contrast:hover::before {
    animation: glassShine 0.7s ease-in-out;
}

@keyframes glassShine {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* --- BOUTON VIOLET "FORGED SIGNATURE" --- */

.btn--violet .btn {
    /* 1. LA STRUCTURE "VERRE GIVRÉ" VIOLET */
    /* On utilise ton dégradé #7000E2 -> #3D007C mais en semi-transparent */
    background: linear-gradient(135deg,
            rgba(112, 0, 226, 0.15) 0%,
            /* #7000E2 à 15% */
            rgba(61, 0, 124, 0.25) 100%
            /* #3D007C à 25% */
        ) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    /* 2. BORDURE FINE VIOLETTE */
    border: 1px solid rgba(112, 0, 226, 0.35) !important;
    /* Bordure subtile */
    border-radius: 16px !important;

    /* 3. TYPOGRAPHIE */
    color: #FFFFFF !important;
    font-family: "SF Pro", Sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.8px !important;
    text-transform: none !important;
    padding: 16px 40px !important;

    /* 4. DÉTAIL DE VOLUME */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

    /* 5. INTERACTION */
    transition: all 0.3s ease-out !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
}

/* --- LE REFLET ANIMÉ (Blanc) --- */
.btn--violet .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transform: skewX(-20deg);
    transition: none;
    z-index: -1;
}

/* --- AU SURVOL : INTENSIFICATION VIOLETTE --- */
.btn--violet .btn:hover {
    transform: translateY(-3px) !important;

    /* Le fond devient plus intense au survol */
    background: linear-gradient(135deg,
            rgba(112, 0, 226, 0.4) 0%,
            rgba(61, 0, 124, 0.5) 100%) !important;

    /* La bordure brille */
    border-color: #7000E2 !important;

    /* Glow Violet "Deep Purple" */
    box-shadow:
        0 10px 30px -10px rgba(112, 0, 226, 0.6),
        inset 0 0 20px rgba(112, 0, 226, 0.2) !important;
}

/* Animation du reflet */
.btn--violet .btn:hover::before {
    animation: glassShine 0.7s ease-in-out;
}


/* =========================================
   LA BASE : VOITURE EN LÉVITATION
   ========================================= */

/* Cible l'image dans votre conteneur spécifique */
.shadow-car-png img {


    /* 2. L'Ombre portée au sol (Nécessaire pour le réalisme) */
    /* drop-shadow est le seul qui suit le contour du PNG transparent */
    filter: drop-shadow(0px 40px 30px rgba(0, 0, 0, 0.5));

    /* On s'assure qu'il n'y a pas de cadre moche autour */
    box-shadow: none !important;
    border: none !important;
}


/* 1. LA BASE : VOITURE QUI FLOTTE */
.shadow-car-png {
    position: relative;
    /* Nécessaire pour placer l'aura derrière */
    z-index: 1;
}

.shadow-car-png img {


    /* Ombre portée réaliste */
    filter: drop-shadow(0px 30px 30px rgba(0, 0, 0, 0.6));

    /* Nettoyage Elementor */
    box-shadow: none !important;
    border: none !important;
}

/* 2. L'AURA DIGITALE (ARRIÈRE-PLAN VIVANT) */
.shadow-car-png::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    /* Derrière la voiture */

    /* Taille de la zone de lumière */
    width: 100%;
    height: 100%;

    /* Le dégradé "Aura" : Cyan au centre, vers violet/transparent */
    background: radial-gradient(circle at center,
            rgba(0, 255, 252, 0.25) 0%,
            rgba(112, 0, 226, 0.15) 40%,
            transparent 70%);

    /* Flou extrême pour l'effet gazeux */
    filter: blur(50px);

    /* Animation de la lumière qui "respire" */
    animation: auroraMove 8s infinite alternate;
}

/* --- LES ANIMATIONS --- */

/* La voiture qui monte et descend */
@keyframes floatCar {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* La lumière qui change de forme derrière */
@keyframes auroraMove {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        /* La lumière grandit */
        opacity: 0.8;
        /* Elle devient plus brillante */
    }

    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
    }
}

/* --- HOVER 3 : REFLET "SOFT LUXE" (LENT & DOUX) --- */

/* 1. Configuration du conteneur */
.shadow-car-png {
    position: relative;
    z-index: 10;
    transform-style: preserve-3d;
}

/* 2. Le calque de lumière */
.shadow-car-png::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* --- LE MASQUE (NE PAS TOUCHER) --- */
    -webkit-mask-image: url('https://www.forgedppf.moraya.fr/wp-content/uploads/2026/02/forged-ppf-car-covering-scaled-e1770064267970.webp');
    mask-image: url('https://www.forgedppf.moraya.fr/wp-content/uploads/2026/02/forged-ppf-car-covering-scaled-e1770064267970.webp');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* --- L'ESTHÉTIQUE RAFFINÉE --- */
    /* On étale le dégradé sur plus de distance pour éviter la barre nette */
    background: linear-gradient(105deg,
            transparent 20%,
            rgba(0, 255, 252, 0.1) 40%,
            /* Cyan très pâle et subtil */
            rgba(255, 255, 255, 0.6) 50%,
            /* Blanc à 60% d'opacité seulement (pas 100%) */
            rgba(0, 255, 252, 0.15) 60%,
            /* Cyan très pâle */
            transparent 80%);

    /* Flou augmenté : passe de 3px à 10px pour un effet "nuage" */
    filter: blur(10px);

    background-size: 250% 100%;
    background-position: 250% 0;
    background-repeat: no-repeat;

    /* On baisse l'opacité globale pour que ça reste un "reflet" */
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
    /* Transition plus douce à l'apparition */
}

/* 3. L'ANIMATION AU SURVOL */
.shadow-car-png:hover::after {
    opacity: 1;
    /* Durée augmentée à 2.5s pour un effet majestueux */
    animation: softShine 1.5s ease-in-out forwards;
}

/* 4. DÉFINITION DU MOUVEMENT */
/*
@keyframes softShine {
    0% {
        background-position: 250% 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        background-position: -150% 0;
        opacity: 0;
    }
}
*/

.home .fullwidth-home {
    padding: 0 !important;
}

/* --- TEXTE DÉGRADÉ CUSTOM (Gris vers Violet) --- */

/* 1. Application sur le widget global */
.texte-degrade-custom,
.texte-degrade-custom .elementor-heading-title {
    /* Le dégradé demandé */
    background: linear-gradient(90deg, #EBEBEB 0%, #7000E2 100%) !important;

    /* On "coupe" le fond pour qu'il prenne la forme du texte */
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* On rend le texte transparent pour voir le fond */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    /* Assure que le fond ne bouge pas */
    background-attachment: scroll !important;
    background-size: cover !important;
}

/* --- EFFET PULSATION LOGO (SECTION CERCLE) --- */

/* On cible précisément ton conteneur via sa classe unique */
.pulsation {
    /* 1. On s'assure que c'est bien un cercle parfait */
    border-radius: 50% !important;

    /* 2. L'animation "Battement de coeur" */
    /* Durée : 3s (lent et profond) | Boucle : Infinie */
    animation: forgedPulse 3s ease-in-out infinite;

    /* On s'assure que l'animation est fluide */
    transition: all 0.3s ease;
}

/* DÉFINITION DE LA PULSATION */
@keyframes forgedPulse {
    0% {
        /* État repos */
        transform: scale(1);
        box-shadow: 0 0 20px rgba(0, 255, 252, 0.2);
        /* Lueur faible */
    }

    50% {
        /* État "Inspiration" (Pic de l'animation) */
        transform: scale(1.05);
        /* Grossit de 5% */
        box-shadow: 0 0 60px rgba(0, 255, 252, 0.7);
        /* Lueur Cyan intense */
    }

    100% {
        /* Retour repos */
        transform: scale(1);
        box-shadow: 0 0 20px rgba(0, 255, 252, 0.2);
    }
}

/* =========================================
   BACKGROUND DYNAMIQUE (ORBES FLOTTANTS)
   ========================================= */

/* 1. Configuration commune des orbes */
body.home::before,
body.home::after {
    content: '';
    position: fixed;
    /* Ils restent à l'écran quand on scroll */
    width: 800px;
    /* Taille énorme */
    height: 800px;
    border-radius: 50%;
    /* Rond parfait */
    filter: blur(100px);
    /* Flou extrême pour l'effet diffus */
    z-index: 0;
    /* Juste au-dessus du fond noir, mais DERRIÈRE le contenu */
    opacity: 0.4;
    /* Transparence pour ne pas gêner la lecture */
    pointer-events: none;
    /* On peut cliquer à travers */
}

/* 2. L'Orbe VIOLET (Haut Gauche départ) */
body.home::before {
    background: radial-gradient(circle, #7000E2 0%, transparent 70%);
    top: -20%;
    left: -10%;
    animation: floatingOrb1 20s infinite alternate ease-in-out;
}

/* 3. L'Orbe CYAN (Bas Droite départ) */
body.home::after {
    background: radial-gradient(circle, #00FFFC 0%, transparent 50%);
    bottom: -20%;
    right: -10%;
    animation: floatingOrb2 25s infinite alternate ease-in-out;
}

/* 4. IMPORTANT : On s'assure que le contenu Elementor passe DEVANT */
body.home .elementor {
    position: relative;
    z-index: 1;
    /* Le contenu passe devant les orbes */
    background: transparent !important;
    /* On force la transparence */
}

/* --- ANIMATIONS LENTES --- */

@keyframes floatingOrb1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30vw, 10vh) scale(1.2);
    }

    66% {
        transform: translate(10vw, 40vh) scale(0.9);
    }

    100% {
        transform: translate(0, 50vh) scale(1.1);
    }
}

@keyframes floatingOrb2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-20vw, -10vh) scale(1.1);
    }

    66% {
        transform: translate(-40vw, 20vh) scale(0.8);
    }

    100% {
        transform: translate(-10vw, -30vh) scale(1.2);
    }
}

/* --- TEXTURE GRAIN CINÉMA (NOISE) --- */

html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* On clique à travers */
    z-index: 9999;
    /* Tout au-dessus de tout le site */

    /* Génération du bruit via un filtre SVG encodé (super léger) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");

    /* Réglage de l'intensité (0.05 = subtil, 0.1 = fort) */
    opacity: 0.07;

    /* Mode de fusion pour incruster le grain dans les couleurs */
    mix-blend-mode: overlay;
}

/* =========================================
   EFFET LÉVITATION (DÉSYNCHRONISÉ)
   ========================================= */

@media (min-width: 1025px) {

    /* 1. LA BASE (Vitesse Moyenne) */
    .float-effect {
        animation: levitationBox 6s ease-in-out infinite;
        transition: all 0.3s ease;
        will-change: transform, box-shadow;
    }

    /* 2. VARIANTE LENTE (Pour la carte de gauche par exemple) */
    .float-lent {
        animation-duration: 8s !important;
        /* Plus lent */
        animation-delay: -2s !important;
        /* Commence ailleurs dans le cycle */
    }

    /* 3. VARIANTE RAPIDE (Pour la carte de droite par exemple) */
    .float-rapide {
        animation-duration: 4.5s !important;
        /* Plus rapide */
        animation-delay: -1s !important;
        /* Commence ailleurs */
    }

    /* 4. VARIANTE INVERSÉE (Optionnelle, pour décaler encore plus) */
    .float-inverse {
        animation-direction: reverse !important;
        /* Commence en montant au lieu de descendre */
    }

    /* DÉFINITION DU MOUVEMENT */
    @keyframes levitationBox {
        0% {
            transform: translateY(0px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        }

        50% {
            transform: translateY(-20px);
            box-shadow: 0 25px 40px rgba(0, 0, 0, 0.2);
        }

        100% {
            transform: translateY(0px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        }
    }
}

/* --- EFFET RADAR MAP --- */

.radar-map {
    position: relative;
    overflow: hidden;
    /* Empêche l'onde de sortir du cadre */
}

/* Le point central (La source) */
.radar-map::before {
    content: '';
    position: absolute;
    /* Ajustez ces % pour placer le point sur la France */
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #00FFFC;
    border-radius: 50%;
    box-shadow: 0 0 10px #00FFFC;
    z-index: 2;
}

/* L'onde de choc */
.radar-map::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    /* Même position que le point */
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border: 1px solid rgba(0, 255, 252, 0.6);
    background: rgba(0, 255, 252, 0.1);
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    animation: sonarWave 2.5s infinite ease-out;
}

@keyframes sonarWave {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }

    100% {
        width: 400px;
        height: 400px;
        /* L'onde grandit */
        opacity: 0;
    }
}


@keyframes flickerOn {
    0% {
        opacity: 0.1;
        text-shadow: none;
    }

    5% {
        opacity: 1;
        text-shadow: 0 0 20px #00FFFC;
    }

    10% {
        opacity: 0.1;
        text-shadow: none;
    }

    15% {
        opacity: 1;
        text-shadow: 0 0 20px #00FFFC;
    }

    20% {
        opacity: 0.1;
        text-shadow: none;
    }

    25% {
        opacity: 0.3;
    }

    30% {
        opacity: 1;
        text-shadow: 0 0 10px #00FFFC;
    }

    50% {
        opacity: 0.8;
    }

    70% {
        opacity: 1;
        text-shadow: 0 0 20px #00FFFC, 0 0 40px #7000E2;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 15px rgba(0, 255, 252, 0.6);
    }
}

.glass-fort {
    /* 1. FOND : Dégradé subtil pour simuler le reflet de lumière */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.02) 100%) !important;

    /* 2. LE FLOU PUISSANT (Le secret est ici) */
    backdrop-filter: blur(25px) !important;
    /* Augmentez à 30px ou 40px si besoin */
    -webkit-backdrop-filter: blur(25px) !important;

    /* 3. BORDURE FINE ET NETTE */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    /* Haut plus clair = lumière */
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    /* Gauche plus clair */
    border-radius: 20px !important;

    /* 4. ÉPAISSEUR (Lueur interne) */
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.05),
        /* Lueur interne */
        0 10px 40px rgba(0, 0, 0, 0.4) !important;
    /* Ombre portée externe */
}

.glass-texture {
    /* Base Glassmorphism */
    background: rgba(20, 20, 20, 0.4) !important;
    /* Fond sombre semi-transparent */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    position: relative;
    overflow: hidden !important;
    z-index: 1;
}

/* AJOUT DU GRAIN (NOISE) */
.glass-texture::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Image de bruit générée en base64 (très légère) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");

    opacity: 0.08;
    /* Règle l'intensité du grain ici */
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: overlay;
}

.glass-glow {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(40px) !important;
    /* Flou extrême */
    -webkit-backdrop-filter: blur(40px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* On crée une tache de couleur DERRIÈRE le verre qui bouge */
.glass-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #00FFFC 0%, transparent 70%);
    /* Tache Cyan */
    z-index: -1;
    opacity: 0.4;
    filter: blur(40px);
    /* Flou sur la tache elle-même */

    /* Animation lente de la lumière */
    animation: moveLight 10s infinite alternate;
}

@keyframes moveLight {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(150px, 150px);
    }
}

/* --- CURSEUR CUSTOM (DESIGN FORGED PPF) --- */

/* 1. L'anneau principal (Cyan Électrique) */
.ms-cursor-ring {
    /* Couleur du cercle */
    border-color: #00FFFC !important;

    /* Épaisseur un peu plus fine pour le style "Luxe" */
    border-width: 1.5px !important;

    /* Petit effet de néon autour */
    box-shadow: 0 0 10px rgba(0, 255, 252, 0.4);

    /* On s'assure qu'il est bien visible */
    opacity: 1 !important;
}

/* 2. Le point central (si votre plugin en a un) */
.ms-cursor-dot {
    background-color: #00FFFC !important;
    box-shadow: 0 0 5px rgba(0, 255, 252, 0.8);
}

/* 3. L'interaction au survol (Devient Violet) */
/* La plupart des plugins ajoutent une classe 'hovered' ou 'active' */
.ms-cursor-ring.ms-hover-active,
.ms-cursor-ring.hovered,
body:hover .ms-cursor-ring.hover {
    /* La bordure devient Violette */
    border-color: #7000E2 !important;

    /* Le fond se remplit légèrement en violet */
    background-color: rgba(112, 0, 226, 0.15) !important;

    /* On supprime le glow cyan pour un glow violet */
    box-shadow: 0 0 15px rgba(112, 0, 226, 0.6) !important;

    /* On l'agrandit légèrement */
    transform: scale(1.5) !important;
}

/* --- IDÉE 3 : SONAR ACTIF --- */

.ms-cursor-dot {
    background: #00FFFC !important;
    box-shadow: 0 0 0 rgba(0, 255, 252, 0.4);
    /* Animation de respiration permanente */
    animation: dotPulse 2s infinite;
}

/* Au survol : Le sonar s'affole (plus vite, plus violet) */
.ms-hover-active .ms-cursor-dot,
body:hover .ms-cursor-dot.ms-hover-active {
    background: #7000E2 !important;
    animation: dotPulseFast 1s infinite !important;
    transform: scale(1.5);
}

/* Les animations */
@keyframes dotPulse {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 255, 252, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 255, 252, 0);
    }

    /* L'onde s'éloigne et disparait */
    100% {
        box-shadow: 0 0 0 0px rgba(0, 255, 252, 0);
    }
}

@keyframes dotPulseFast {
    0% {
        box-shadow: 0 0 0 0px rgba(112, 0, 226, 0.7);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(112, 0, 226, 0);
    }

    /* Onde plus large */
}

/* --- SCROLLBAR CUSTOM NEON --- */

/* La largeur de la barre */
::-webkit-scrollbar {
    width: 8px;
    /* Verticale */
    height: 8px;
    /* Horizontale */
    background: #070707;
    /* Fond noir */
}

/* Le "pouce" (la partie qui bouge) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00FFFC, #7000E2);
    /* Dégradé Cyan -> Violet */
    border-radius: 4px;
    border: 1px solid #000;
    /* Petit contour pour détacher */
}

/* Au survol de la barre */
::-webkit-scrollbar-thumb:hover {
    background: #fff;
    /* Elle devient blanche pour montrer qu'on la tient */
    box-shadow: 0 0 15px #fff;
}

/* Le fond de la barre (La piste) */
::-webkit-scrollbar-track {
    background: #111;
    border-left: 1px solid #222;
}


.back-to-top .ms-btt--inner {
    background-color: #00FFFC;
}

.home .page header {
    display: none;
}

.home article.page {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.home .ms-default-page {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body[data-menu=fixed] .main-header__layout {
    position: relative !important;
}

.woocommerce-product-gallery__trigger {
    display: none;
}

/****************************/

/* =========================================
   1. Typographie globale et Conteneur
========================================= */
.ms-product-summary {
    /* Utilisation de SF Pro (Apple) et alternatives natives pour le web */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", Sans-serif;
    color: #FFFFFF;
    max-width: 674px;
    /* Largeur issue de la maquette Figma */
}

/* Paragraphes de description */
.woocommerce-product-details__short-description p {
    font-size: 18px;
    font-weight: 510;
    /* Conforme à la propriété 'Medium' du panneau Figma */
    line-height: 1.2;
    /* 100% dans Figma = 1, mais 1.2 est plus adapté au web */
    margin-bottom: 24px;
    letter-spacing: 0;
}

/* Texte en gras dans la description */
.woocommerce-product-details__short-description strong,
.woocommerce-product-details__short-description b {
    font-weight: 700;
    /* Conforme à la propriété de l'inspecteur */
}

/* =========================================
   2. Affichage du Prix (Sur-mesure)
========================================= */
.ms-variations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 40px;
}

.ms-mockup-price {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}

.ms-mp-main {
    font-size: 56px;
    /* Taille proportionnelle à la maquette */
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 12px;
    align-self: flex-start;
}

.ms-mp-sub {
    font-size: 28px !important;
    color: #fff !important;
    text-align: right !important;
    width: 100% !important;
    margin-top: 5px !important;
    font-weight: 600 !important;
}

/* =========================================
   3. Contrôles : Finition et Quantité (Pilule Blanche)
========================================= */
/* On fusionne visuellement les deux div pour créer la pilule unique */
.ms-variation-row {
    background-color: #FFFFFF;
    color: #000000;
    padding: 15px 20px 15px 30px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
    font-weight: 700;
}

.ms-select-finition {
    border: none;
    background: transparent;
    font-size: 24px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    /* Masquer la flèche native pour un look plus épuré */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.reset_variations {
    position: absolute !important;
    bottom: calc(50% + -70px) !important;
}

.ms-qty-row {
    background-color: #FFFFFF;
    color: #000000;
    padding: 15px 30px 15px 10px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 200px !important;
}

/* Input et boutons de quantité */
.ms-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ms-qty-btn,
.button-minus,
.button-plus {
    background: transparent;
    border: none;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
}

.ms-qty-input {
    width: 45px;
    text-align: center;
    border: none;
    font-size: 24px;
    font-weight: 700;
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
    font-family: inherit;
    padding: 0;
    color: #000000;
}

/* Masquer les flèches du champ nombre (Chrome/Safari/Edge) */
.ms-qty-input::-webkit-outer-spin-button,
.ms-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Style des icônes SVG si utilisées dans l'HTML */
.ms-quantity .button-minus svg,
.ms-quantity .button-plus svg {
    width: 20px;
    height: 20px;
    stroke: #000000;
    stroke-width: 2;
}

/* Cacher les boutons texte "+" et "-" si tu as les SVG de WooCommerce */
.ms-qty-btn.plus,
.ms-qty-btn.minus {
    display: none;
}

/* =========================================
   4. Boutons d'Action (Bulk / Pre-cut)
========================================= */
.ms-actions-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}

.btn-custom-action {
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-bulk {
    background-color: #3b82f6;
    color: #FFFFFF;
}

.btn-bulk:hover {
    background-color: #2563eb;
}

.ms-separator-or {
    font-size: 18px;
    color: #A0A0A0;
}

.btn-precut {
    background-color: transparent;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}

.btn-precut:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* =========================================
   5. Badges de réassurance
========================================= */
.ms-trust-badges {
    margin-top: 60px;
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Séparateur subtil */
}

.ms-trust-badges p {
    font-size: 14px;
    color: #A0A0A0;
    margin-bottom: 20px;
}

.ms-payment-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.ms-payment-icons img {
    height: 24px;
    width: auto;
    opacity: 0.8;
}

.woocommerce-product-attributes.shop_attributes {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: initial !important;
}

.woocommerce-product-attributes-item.woocommerce-product-attributes-item--attribute_finition {
    background: #7000E2;
    background: linear-gradient(180deg, rgba(112, 0, 226, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    border-bottom-color: white !important;
    color: #fff !important;
    text-shadow: 0 0 4px rgb(255 255 255 / 50%) !important;
    border-bottom: 2px solid !important;
    padding: 0 !important;
    margin: 0;
}

/* =========================================
   PREMIUM UX PHASE 1: Cursor, Transitions, Reveal
========================================= */

@media (min-width: 1025px) {

    body,
    a,
    button,
    input,
    select,
    textarea {
        cursor: none !important;
    }
}

.ms-cursor-dot,
.ms-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2000000 !important;
}

.ms-cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #00FFFC;
    border-radius: 50%;
    margin-top: -3px;
    margin-left: -3px;
    box-shadow: none !important;
}

.ms-cursor-ring {
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(0, 255, 252, 0.5);
    border-radius: 50%;
    margin-top: -15px;
    margin-left: -15px;
    transition: width 0.3s, height 0.3s, margin 0.3s, background-color 0.3s, border-color 0.3s;
}

.ms-cursor-ring.active {
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    background-color: rgba(0, 255, 252, 0.1);
    border-color: #00FFFC;
}

@media (max-width: 1024px) {

    .ms-cursor-dot,
    .ms-cursor-ring {
        display: none !important;
    }
}

/* Page Transition (Noble Awwwards Edition) */
.ms-page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000001;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Layered Shutters - Noble & Deep */
.ms-shutter-main,
.ms-shutter-secondary {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50.1vh;
    transition: transform 1.2s cubic-bezier(0.9, 0, 0.1, 1);
}

.ms-shutter-main {
    background: #08080a;
    /* Noble deep black */
    z-index: 2;
}

.ms-shutter-secondary {
    background: rgba(112, 0, 226, 0.08);
    /* Noble purple hint */
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    z-index: 1;
    transition-delay: 0.15s;
    /* Elegant stagger */
}

.ms-shutter-top {
    top: 0;
    transform: translateY(0);
}

.ms-shutter-bottom {
    bottom: 0;
    transform: translateY(0);
}

.ms-shutter-main.ms-shutter-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.ms-shutter-main.ms-shutter-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Specialized Opening */
.ms-page-transition.fade-out .ms-shutter-main.ms-shutter-top {
    transform: translateY(-100%);
}

.ms-page-transition.fade-out .ms-shutter-main.ms-shutter-bottom {
    transform: translateY(100%);
}

.ms-page-transition.fade-out .ms-shutter-secondary.ms-shutter-top {
    transform: translateY(-100%);
}

.ms-page-transition.fade-out .ms-shutter-secondary.ms-shutter-bottom {
    transform: translateY(100%);
}

/* Noble Loader Card */
.ms-transition-loader {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.ms-page-transition.fade-out .ms-transition-loader {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
}

.ms-shutter-logo-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-shutter-logo-img {
    height: 45px;
    /* Discreet brand presence */
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.ms-shutter-logo-text {
    font-size: 2.22rem;
    font-weight: 900;
    letter-spacing: 15px;
    color: #fff;
    opacity: 0.8;
}

/* Noble Glint effect */
.ms-shutter-glint {
    position: absolute;
    top: 0;
    left: -150%;
    width: 200%;
    height: 100%;
    background: linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.15),
            transparent);
    transform: skewX(-25deg);
    animation: ms-glint-noble 3s ease-in-out infinite;
}

@keyframes ms-glint-noble {
    0% {
        left: -150%;
    }

    40% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.ms-shutter-spinner {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1.5px solid #00FFFC;
    border-radius: 50%;
    animation: ms-shutter-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ms-shutter-status {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

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

/* Ensure Header is always clickable and above transitions/cursor */
#ms-header {
    z-index: 3000000 !important;
    position: relative;
    pointer-events: auto !important;
}

/* Cursor Dots & Rings must never block clicks */
.ms-cursor-dot,
.ms-cursor-ring {
    pointer-events: none !important;
}

/* Ensure Account Icon is above everything and receiving events */
.ms-header-account {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 100 !important;
}

.ms-account-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 101 !important;
    pointer-events: auto !important;
    color: #fff;
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
    min-width: 30px;
    min-height: 30px;
}

.ms-account-link:hover {
    opacity: 1;
    color: #00FFFC;
    transform: translateY(-2px);
    filter: drop-shadow(0 0 8px rgba(0, 255, 252, 0.4));
}

/* =========================================
   PREMIUM UX PHASE 2: AJAX Filters & Loader
========================================= */

.ms-shop-filters-wrapper {
    margin-bottom: 60px;
    z-index: 10;
    position: relative;
}

.ms-glass-filters {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 25px 35px !important;
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
    flex-wrap: wrap !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.ms-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.ms-filter-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 700 !important;
}

.ms-filter-items {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.ms-filter-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 8px 20px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) !important;
    font-family: inherit !important;
}

.ms-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(0, 255, 252, 0.3) !important;
    transform: translateY(-2px) !important;
}

.ms-filter-btn.active {
    background: #7000E2 !important;
    border-color: #7000E2 !important;
    box-shadow: 0 0 20px rgba(112, 0, 226, 0.5) !important;
    color: #fff !important;
}

.ms-filter-separator {
    width: 1px !important;
    height: 45px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* AJAX Loader */
.ms-ajax-container {
    position: relative !important;
    min-height: 400px;
}

.ms-shop-loader {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 7, 7, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    border-radius: 24px;
}

.ms-ajax-container.loading .ms-shop-loader {
    opacity: 1;
    pointer-events: all;
}

.ms-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 255, 252, 0.1);
    border-top: 4px solid #00FFFC;
    border-radius: 50%;
    animation: ms-spin 0.8s linear infinite;
    box-shadow: 0 0 20px rgba(0, 255, 252, 0.2);
}

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

@media (max-width: 768px) {
    .ms-glass-filters {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 20px;
    }

    .ms-filter-separator {
        width: 100% !important;
        height: 1px !important;
    }
}


/* =========================================
   PREMIUM UX PHASE 3: Conversions
========================================= */

/* 1. Comparison Table */
.ms-comparison-section {
    margin: 50px 0 !important;
    padding: 40px !important;
    background: rgba(20, 20, 25, 0.45) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-radius: 35px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative !important;
    overflow: hidden !important;
}

.ms-comparison-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(1000px circle at var(--x, 0) var(--y, 0),
            rgba(0, 255, 252, 0.08),
            transparent 40%) !important;
    opacity: 1 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.ms-section-title {
    text-align: center !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    background: linear-gradient(90deg, #EBEBEB 0%, #7000E2 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    letter-spacing: 1px !important;
}

.ms-comparison-grid {
    display: flex !important;
    gap: 30px !important;
    align-items: stretch !important;
}

.ms-comp-card {
    flex: 1 !important;
    padding: 40px !important;
    border-radius: 25px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
}

.ms-comp-standard {
    opacity: 0.6 !important;
}

.ms-comp-premium {
    background: linear-gradient(135deg, rgba(112, 0, 226, 0.08) 0%, rgba(0, 255, 252, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    transform: scale(1.04) !important;
    z-index: 2 !important;
}

.ms-comp-badge {
    position: absolute !important;
    top: 25px !important;
    right: -35px !important;
    background: #00FFFC !important;
    color: #000 !important;
    padding: 6px 45px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    transform: rotate(45deg) !important;
    box-shadow: 0 0 15px rgba(0, 255, 252, 0.4) !important;
    letter-spacing: 1px !important;
}

.ms-comp-header {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin-bottom: 30px !important;
    color: #fff !important;
}

.ms-comp-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ms-comp-list li {
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    color: #bbb !important;
    font-size: 1.05rem !important;
}

.ms-comp-list li:last-child {
    border-bottom: none !important;
}

.ms-icon-status {
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    min-width: 25px !important;
}

.ms-icon-status.positive {
    color: #00FFFC !important;
    text-shadow: 0 0 10px rgba(0, 255, 252, 0.4) !important;
}

.ms-icon-status.negative {
    color: #ff3b3b !important;
    opacity: 0.4 !important;
}

/* 2. Sticky Mobile Add to Cart */
.ms-sticky-cart-mobile {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(10, 10, 15, 0.85) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 150000 !important;
    transform: translateY(102%) !important;
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

/* Dynamic Spotlight Effect on Card */
.ms-product-card-link::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(600px circle at var(--x, 0) var(--y, 0),
            rgba(0, 255, 252, 0.1),
            transparent 40%) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.ms-product-card-link:hover::before {
    opacity: 1 !important;
}

.ms-sticky-cart-mobile.active {
    transform: translateY(0) !important;
}

.ms-sc-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 60% !important;
}

.ms-sc-thumb {
    width: 45px !important;
    height: 45px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ms-sc-text {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.ms-sc-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ms-sc-price {
    font-size: 0.85rem !important;
    color: #00FFFC !important;
    font-weight: 700 !important;
}

.ms-sc-btn {
    background: #7000E2 !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 30px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: 0 5px 15px rgba(112, 0, 226, 0.4) !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
}

@media (min-width: 1025px) {
    .ms-sticky-cart-mobile {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .ms-comparison-grid {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .ms-comp-premium {
        transform: scale(1) !important;
    }

    .ms-comparison-section {
        padding: 40px 20px !important;
        margin: 50px 0 !important;
    }

    .ms-section-title {
        font-size: 1.8rem !important;
    }

    .ms-comp-card {
        padding: 30px 20px !important;
    }
}

/* 3. Immersive Gallery Lightbox */
.ms-immersive-gallery {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 250000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
}

.ms-immersive-gallery.active {
    opacity: 1 !important;
}

.ms-lightbox-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
}

.ms-lightbox-img {
    max-width: 90% !important;
    max-height: 90vh !important;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8) !important;
    border-radius: 15px !important;
    position: relative !important;
    z-index: 10 !important;
    transform: scale(0.9) !important;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ms-immersive-gallery.active .ms-lightbox-img {
    transform: scale(1) !important;
}

.ms-lightbox-close {
    position: absolute !important;
    top: 30px !important;
    right: 40px !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 50px !important;
    cursor: pointer !important;
    z-index: 20 !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s !important;
    line-height: 1 !important;
}

.ms-lightbox-close:hover {
    opacity: 1 !important;
}

/* Removed Customer Role Styling for Reset */
/* =========================================
   MAILCHIMP FORM PREMIUM STYLING
   ========================================= */

.mc4wp-form .ms-mc4wp--action button.btn--primary,
.mc4wp-form button.btn--primary {
    background: rgba(0, 255, 252, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 255, 252, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
    box-shadow: 0 0 20px rgba(0, 255, 252, 0.1) !important;
    cursor: pointer !important;
}

.mc4wp-form .ms-mc4wp--action button.btn--primary:hover,
.mc4wp-form button.btn--primary:hover {
    background: #00FFFC !important;
    color: #000 !important;
    border-color: #00FFFC !important;
    box-shadow: 0 0 30px rgba(0, 255, 252, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* --- Immersive Slider: Films-PPF (Stories Edition) --- */

.ms-immersive-slider-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    background: #000;
    overflow: hidden;
}

.ms-slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 15% 50%, #2c004d 0%, #000000 100%);
    z-index: -1;
}

.ms-immersive-slider {
    width: 100%;
    height: 100%;
}

.ms-slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6%;
    position: relative;
    box-sizing: border-box;
    height: 100vh;
}

/* Left Content */
.ms-slide-content-left {
    width: 35%;
    z-index: 10;
    text-align: left;
    position: relative;
    padding-right: 20px;
}

.ms-slide-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #a29bfe;
    margin-bottom: 20px;
    font-weight: 600;
    display: block;
    opacity: 0.8;
}

.ms-slide-title {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.05;
    text-transform: uppercase;
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.6));
    letter-spacing: -0.5px;
    word-break: break-word;
}

.ms-slide-desc {
    margin-top: 30px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.8;
    max-width: 400px;
}

.ms-slide-footer {
    margin-top: 50px;
}

.ms-scroll-down {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Center Image */
.ms-slide-image-center {
    flex: 1;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    max-width: 45%;
    margin: 0 2%;
}

.ms-image-frame {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(142, 68, 173, 0.1);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Navigation Right */
.ms-slide-nav-right {
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
    z-index: 15;
    position: relative;
}

.ms-slide-mini-thumb {
    width: 65px;
    height: 85px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(162, 155, 254, 0.4);
    box-shadow: 0 0 20px rgba(162, 155, 254, 0.2);
}

.ms-thumb-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ms-slide-pagination-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 25px;
    align-items: flex-end;
}

.ms-nav-line {
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.ms-nav-line.active {
    background: #a29bfe;
    width: 180%;
    box-shadow: 0 0 20px rgba(162, 155, 254, 0.4);
}

.ms-slide-numbering {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
}

.ms-num-current {
    color: #fff;
}

.ms-num-sep {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 6px;
}

.ms-num-total {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
}

/* Action Button */
.ms-slide-action {
    position: absolute;
    bottom: 5%;
    right: 5%;
    z-index: 20;
}

.ms-btn-immersive {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff !important;
    padding: 16px 40px;
    border-radius: 100px;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 4px;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    text-decoration: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ms-btn-immersive:hover {
    background: #fff;
    color: #000 !important;
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.7);
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .ms-slide-content-left { width: 40%; }
    .ms-slide-image-center { max-width: 40%; }
}

@media (max-width: 1200px) {
    .ms-slide-title { font-size: 2.4rem; }
    .ms-slide-content-left { width: 45%; }
    .ms-slide-image-center { max-width: 35%; }
    .ms-slide-nav-right { width: 12%; }
}

@media (max-width: 991px) {
    .ms-slide { flex-direction: column; padding: 120px 8% 100px; justify-content: flex-start; }
    .ms-slide-content-left { width: 100%; text-align: center; margin-bottom: 40px; padding-right: 0; }
    .ms-slide-desc { margin: 25px auto; }
    .ms-slide-image-center { width: 100%; max-width: 100%; height: 40vh; margin: 0; }
    .ms-slide-nav-right { width: 100%; flex-direction: row; bottom: 5%; right: 50%; transform: translateX(50%); align-items: center; justify-content: center; gap: 20px; }
    .ms-slide-mini-thumb { display: none; }
    .ms-slide-pagination-lines { flex-direction: row; width: auto; }
    .ms-nav-line { width: 15px; height: 2px; }
    .ms-nav-line.active { width: 35px; }
    .ms-slide-action { bottom: 12%; right: 50%; transform: translateX(50%); }
}

/* ==========================================================================
   FORGED PREMIUM DASHBOARD V3 - ABYSSAL TECH AESTHETIC
   ========================================================================== */

:root {
    --fp-bg-dark: #0a0b1e;
    --fp-bg-glass: rgba(15, 17, 35, 0.7);
    --fp-accent: #00f2ff;
    --fp-accent-soft: rgba(0, 242, 255, 0.1);
    --fp-border: rgba(255, 255, 255, 0.08);
    --fp-text: #e0e6ed;
    --fp-text-muted: #94a3b8;
    --fp-gradient-main: linear-gradient(135deg, #0f1123 0%, #0a0b1e 100%);
    --fp-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    --fp-radius: 20px;
}

.forged-premium-dashboard {
    color: var(--fp-text);
    font-family: 'Inter', -apple-system, sans-serif;
    margin: 40px 0;
    min-height: 80vh;
}

.fp-dashboard-inner {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Sidebar Styling */
.fp-sidebar {
    width: 300px;
    background: var(--fp-bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 30px;
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-shadow: var(--fp-shadow);
}

.fp-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fp-user-info img {
    border-radius: 50%;
    border: 2px solid var(--fp-accent);
    box-shadow: 0 0 15px var(--fp-accent-soft);
}

.fp-user-meta {
    display: flex;
    flex-direction: column;
}

.fp-username {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}

.fp-user-email {
    font-size: 0.85rem;
    color: var(--fp-text-muted);
}

/* Sidebar Navigation */
.fp-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 18px;
    border-radius: 12px;
    color: var(--fp-text-muted);
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.fp-nav-icon {
    font-size: 1.3rem;
}

.fp-nav-label {
    font-weight: 500;
}

.fp-nav-item.is-active .fp-nav-link,
.fp-nav-link:hover {
    color: var(--fp-accent);
    background: var(--fp-accent-soft);
}

.fp-nav-indicator {
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--fp-accent);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.fp-nav-item.is-active .fp-nav-indicator {
    opacity: 1;
}

.fp-logout-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: #ff4d4d;
    text-decoration: none !important;
    font-weight: 600;
    transition: background 0.3s;
    border-radius: 12px;
}

.fp-logout-btn:hover {
    background: rgba(255, 77, 77, 0.1);
}

/* Main Content Area */
.fp-content {
    flex: 1;
}

.fp-content-inner {
    background: var(--fp-bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 40px;
    box-shadow: var(--fp-shadow);
    min-height: 100%;
}

/* Dashboard Specific Elements */
.fp-welcome-header {
    margin-bottom: 40px;
}

.fp-title {
    font-size: 2.22rem;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #fff 0%, #a0aec0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fp-title span {
    color: var(--fp-accent);
    -webkit-text-fill-color: initial;
    background: none;
}

.fp-subtitle {
    color: var(--fp-text-muted);
    font-size: 1.1rem;
}

/* Quick Stats */
.fp-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.fp-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fp-border);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s;
}

.fp-stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.fp-stat-icon {
    width: 60px;
    height: 60px;
    background: var(--fp-accent-soft);
    color: var(--fp-accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.fp-stat-info {
    display: flex;
    flex-direction: column;
}

.fp-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.fp-stat-label {
    font-size: 0.85rem;
    color: var(--fp-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Dashboard Grid */
.fp-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.fp-grid-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fp-border);
    border-radius: 15px;
    padding: 25px;
    text-decoration: none !important;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s;
    position: relative;
}

.fp-grid-item:hover {
    background: var(--fp-accent-soft);
    border-color: var(--fp-accent);
    transform: scale(1.02);
}

.fp-grid-icon {
    font-size: 1.8rem;
    color: var(--fp-accent);
}

.fp-grid-content h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: #fff;
}

.fp-grid-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--fp-text-muted);
}

.fp-grid-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    color: var(--fp-accent);
    transition: all 0.3s;
}

.fp-grid-item:hover .fp-grid-arrow {
    opacity: 1;
    right: 15px;
}

/* Role Card Styling (Unified) */
.fp-stat-card.status-pro {
    border-color: var(--fp-accent);
    box-shadow: 0 0 20px var(--fp-accent-soft);
}

.fp-stat-card.status-retail {
    border-color: rgba(255, 255, 255, 0.2);
}

.fp-stat-card.status-pending {
    border-color: #ffa500;
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.1);
}

/* Responsive */
@media (max-width: 1024px) {
    .fp-dashboard-inner {
        flex-direction: column;
    }
    
    .fp-sidebar {
        width: 100%;
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .fp-content-inner {
        padding: 25px;
    }
    
    .fp-title {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   PREMIUM ORDERS TABLE - ABYSSAL TECH
   ========================================================================== */

.woocommerce-orders-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    background: transparent !important;
    border: none !important;
}

.woocommerce-orders-table thead th {
    background: transparent !important;
    border: none !important;
    color: var(--fp-text-muted) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 15px 25px !important;
    font-weight: 600 !important;
}

.woocommerce-orders-table__row {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--fp-border) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.woocommerce-orders-table__row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.woocommerce-orders-table__cell {
    border: none !important;
    padding: 20px 25px !important;
    color: var(--fp-text) !important;
    vertical-align: middle !important;
}

.woocommerce-orders-table__cell-order-number a {
    color: #fff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-family: "Space Mono", monospace;
    font-size: 1.1rem;
}

/* Status Badges */
.fp-order-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid transparent;
}

.status-completed {
    background: rgba(0, 255, 157, 0.1);
    color: #00ff9d;
    border-color: rgba(0, 255, 157, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
}

.status-processing {
    background: rgba(0, 242, 255, 0.1);
    color: var(--fp-accent);
    border-color: var(--fp-accent-soft);
    box-shadow: 0 0 15px var(--fp-accent-soft);
}

.status-pending, .status-on-hold {
    background: rgba(255, 174, 0, 0.1);
    color: #ffae00;
    border-color: rgba(255, 174, 0, 0.3);
}

.status-cancelled, .status-failed {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    border-color: rgba(255, 77, 77, 0.3);
}

/* Action Buttons */
.fp-order-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fp-order-btn {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #fff !important;
}

.fp-order-btn:hover {
    background: #fff;
    color: #000 !important;
    border-color: #fff;
    transform: translateY(-2px);
}

.fp-order-btn.btn-pay {
    background: var(--fp-accent);
    color: #000 !important;
    border: none;
    box-shadow: 0 0 20px var(--fp-accent-soft);
}

.fp-order-btn.btn-pay:hover {
    background: #fff;
    filter: brightness(1.2);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .woocommerce-orders-table thead {
        display: none;
    }

    .woocommerce-orders-table__row {
        display: block;
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 15px !important;
    }

    .woocommerce-orders-table__cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 !important;
        text-align: right;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .woocommerce-orders-table__cell:last-child {
        border-bottom: none !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .woocommerce-orders-table__cell::before {
        content: attr(data-title);
        float: left;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        color: var(--fp-text-muted);
    }
    
    .fp-order-actions {
        width: 100%;
        margin-top: 10px;
    }
    
    .fp-order-btn {
        flex: 1;
        text-align: center;
    }
}

/* REFINED PREMIUM ORDERS UI */
.fp-order-actions {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap; /* Desktop: keep in row */
}

.fp-order-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.fp-order-btn i {
    font-size: 1.1rem;
}

/* Pay Button - Primary Action */
.fp-order-btn.btn-pay {
    background: var(--fp-accent) !important;
    color: #000 !important;
    border: 1px solid var(--fp-accent);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.3);
}

.fp-order-btn.btn-pay:hover {
    background: #fff !important;
    border-color: #fff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

/* View Button - Secondary Action */
.fp-order-btn.btn-view {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.fp-order-btn.btn-view:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Cancel Button - Danger Action */
.fp-order-btn.btn-cancel {
    background: rgba(255, 77, 77, 0.05) !important;
    color: #ff4d4d !important;
    border: 1px solid rgba(255, 77, 77, 0.2);
}

.fp-order-btn.btn-cancel:hover {
    background: #ff4d4d !important;
    color: #fff !important;
    border-color: #ff4d4d;
    transform: translateY(-2px);
}

/* Reorder Button */
.fp-order-btn.btn-reorder {
    background: rgba(112, 0, 226, 0.1) !important;
    color: #a29bfe !important;
    border: 1px solid rgba(112, 0, 226, 0.3);
}

.fp-order-btn.btn-reorder:hover {
    background: #7000e2 !important;
    color: #fff !important;
    border-color: #7000e2;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .fp-order-actions {
        flex-wrap: wrap;
    }
    .fp-order-btn {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }
}

/* ==========================================================================
   ORDER DETAILS VIEW - ABYSSAL TECH
   ========================================================================== */

.fp-order-intro {
    font-size: 1.1rem;
    color: var(--fp-text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    border-left: 4px solid var(--fp-accent);
}

.fp-marker {
    background: none !important;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
}

.fp-marker-number { color: #fff; font-family: "Space Mono", monospace; }
.fp-marker-date { color: var(--fp-text); }

.fp-marker-status {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.fp-marker-status.status-completed { color: #00ff9d; }
.fp-marker-status.status-processing { color: var(--fp-accent); }
.fp-marker-status.status-pending { color: #ffae00; }
.fp-marker-status.status-cancelled { color: #ff4d4d; }

.fp-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 40px 0 20px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.fp-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--fp-border) 0%, transparent 100%);
}

/* Details Table Styling */
.fp-details-table {
    width: 100% !important;
    background: transparent !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    border-collapse: collapse !important;
}

.fp-details-table thead th {
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 18px 25px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 0.8rem !important;
    color: var(--fp-text-muted) !important;
    border-bottom: 1px solid var(--fp-border) !important;
}

.fp-details-table td {
    padding: 20px 25px !important;
    border-bottom: 1px solid var(--fp-border) !important;
    color: var(--fp-text) !important;
}

.fp-details-table tr:last-child td {
    border-bottom: none !important;
}

.fp-details-table .product-name a {
    color: #fff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.fp-details-table .product-quantity {
    color: var(--fp-accent) !important;
    font-family: "Space Mono", monospace;
    margin-left: 10px;
}

.fp-details-table tfoot th {
    background: rgba(255, 255, 255, 0.02) !important;
    text-align: right !important;
    padding: 15px 25px !important;
    border-right: 1px solid var(--fp-border) !important;
    color: var(--fp-text-muted) !important;
}

.fp-details-table tfoot td {
    padding: 15px 25px !important;
}

.fp-total-val bdi, .fp-total-val .amount {
    font-weight: 800 !important;
    color: var(--fp-accent) !important;
    font-size: 1.2rem !important;
}

/* Customer Details Section */
.woocommerce-customer-details {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.woocommerce-column--billing-address, .woocommerce-column--shipping-address {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fp-border);
    border-radius: 15px;
    padding: 25px;
}

.woocommerce-column__title {
    margin-top: 0 !important;
    font-size: 1.1rem !important;
}

address {
    color: var(--fp-text-muted) !important;
    font-style: normal !important;
    line-height: 1.8 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .fp-details-table thead { display: none; }
    .fp-details-table tr { display: flex; flex-direction: column; }
    .fp-details-table td { text-align: right !important; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
    .fp-details-table td::before { content: attr(class); color: var(--fp-text-muted); font-size: 0.7rem; text-transform: uppercase; }
    .fp-details-table tfoot th { text-align: left !important; border-right: none !important; background: rgba(255,255,255,0.05) !important; }
}

/* ==========================================================================
   DOWNLOADS PAGE - ABYSSAL TECH
   ========================================================================== */

.fp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--fp-border);
    border-radius: 20px;
    margin: 20px 0;
    backdrop-filter: blur(10px);
}

.fp-empty-icon {
    width: 80px;
    height: 80px;
    background: var(--fp-accent-soft);
    color: var(--fp-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    box-shadow: 0 0 30px var(--fp-accent-soft);
}

.fp-empty-content h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
}

.fp-empty-content p {
    color: var(--fp-text-muted);
    margin-bottom: 30px;
    max-width: 400px;
}

/* Downloads Table Specifics */
.fp-downloads-table .woocommerce-table__cell-download-file {
    text-align: right;
}

.fp-downloads-table .fp-mono {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    color: var(--fp-accent);
}

.fp-downloads-table time {
    color: var(--fp-text);
    font-weight: 500;
}

@media (max-width: 768px) {
    .fp-downloads-empty {
        padding: 40px 20px;
    }
    
    .fp-downloads-table .woocommerce-table__cell-download-file {
        text-align: center;
        width: 100%;
    }
}

/* ==========================================================================
   ADDRESSES PAGE - ABYSSAL TECH
   ========================================================================== */

.fp-addresses-intro {
    background: rgba(255, 255, 255, 0.02);
    border-left: 4px solid var(--fp-accent);
    padding: 20px 25px;
    border-radius: 12px;
    margin-bottom: 40px;
}

.fp-addresses-intro p {
    margin: 0;
    color: var(--fp-text-muted);
    font-size: 1rem;
}

.fp-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.fp-address-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fp-border);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.fp-address-card:hover {
    border-color: var(--fp-accent-soft);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px var(--fp-accent-soft);
    transform: translateY(-5px);
}

.fp-address-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--fp-border);
    padding-bottom: 20px;
}

.fp-address-type {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fp-address-type i {
    font-size: 1.5rem;
    color: var(--fp-accent);
}

.fp-address-type h3 {
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.fp-address-body address {
    font-style: normal;
    color: var(--fp-text-muted);
    line-height: 1.8;
    font-size: 0.95rem;
}

.fp-address-body address br {
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .fp-address-grid {
        grid-template-columns: 1fr;
    }
    .fp-address-header {
        flex-direction: column;
        gap: 20px;
    }
    .fp-address-header .fp-order-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   FORM STYLING - ABYSSAL TECH
   ========================================================================== */

.fp-address-edit-form {
    max-width: 900px;
}

.fp-form-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fp-border);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

.fp-field-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

/* Force wide rows for specific fields */
.fp-field-grid .form-row-wide, 
.fp-field-grid #billing_country_field, 
.fp-field-grid #shipping_country_field {
    grid-column: span 2 !important;
}

.woocommerce-address-fields label {
    display: block;
    margin-bottom: 10px;
    color: var(--fp-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.woocommerce-address-fields .required {
    color: var(--fp-accent) !important;
    text-decoration: none !important;
}

/* Input Styling */
.fp-form-container input[type="text"],
.fp-form-container input[type="email"],
.fp-form-container input[type="tel"],
.fp-form-container input[type="password"],
.fp-form-container textarea,
.fp-form-container select {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--fp-border) !important;
    color: #fff !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
}

.fp-form-container input:focus,
.fp-form-container select:focus {
    border-color: var(--fp-accent) !important;
    box-shadow: 0 0 15px var(--fp-accent-soft) !important;
    outline: none !important;
}

.fp-form-footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--fp-border);
}

/* Select2 Theming */
.select2-container--default .select2-selection--single {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: 10px !important;
    height: 48px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    line-height: 46px !important;
    padding-left: 18px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}

@media (max-width: 768px) {
    .fp-form-container {
        padding: 25px;
    }
    .fp-field-grid {
        grid-template-columns: 1fr !important;
    }
    .fp-field-grid .form-row-wide, 
    .fp-field-grid .form-row-first, 
    .fp-field-grid .form-row-last {
        grid-column: span 1 !important;
    }
}

/* ==========================================================================
   ACCOUNT DETAILS PAGE - ABYSSAL TECH
   ========================================================================== */

.fp-form-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--fp-border);
}

.fp-password-fieldset {
    border: 1px solid var(--fp-border-strong);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    padding: 30px;
    margin-top: 20px;
}

.fp-section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.fp-section-header i {
    font-size: 1.5rem;
    color: var(--fp-accent);
}

.fp-section-header h3 {
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.fp-field-desc {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--fp-text-muted);
}

/* Specific Adjustments for Account Form */
.edit-account .form-row {
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .fp-password-fieldset {
        padding: 20px;
    }
}

/* ==========================================================================
   CHECKOUT BLOCK - ABYSSAL TECH
   ========================================================================== */

/* Main Container & Layout */
.wc-block-checkout {
    background: transparent !important;
}

.wc-block-components-main.wc-block-checkout__main {
    background: var(--fp-glass-bg) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--fp-border);
    border-radius: 20px;
    padding: 40px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.wc-block-components-sidebar.wc-block-checkout__sidebar {
    background: var(--fp-glass-bg) !important;
    backdrop-filter: blur(15px);
    border: 1px solid var(--fp-accent-soft);
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.05);
}

/* Headings & Steps */
.wc-block-components-title.wc-block-components-checkout-step__title {
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wc-block-components-title.wc-block-components-checkout-step__title::before {
    content: "\eb7e"; /* remixicon layout-top-2-line */
    font-family: "remixicon" !important;
    color: var(--fp-accent);
}

/* Inputs & Forms */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-combobox input {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--fp-border-strong) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
}

.wc-block-components-text-input input:focus {
    border-color: var(--fp-accent) !important;
    box-shadow: 0 0 15px var(--fp-accent-soft) !important;
    background: rgba(0, 243, 255, 0.05) !important;
}

.wc-block-components-text-input label {
    color: var(--fp-text-muted) !important;
    font-size: 0.9rem !important;
}

/* Select Box */
.wc-blocks-components-select__select {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--fp-border-strong) !important;
    color: #fff !important;
}

/* Order Summary Details */
.wc-block-components-checkout-order-summary__title-text {
    color: #fff !important;
    font-weight: 700 !important;
}

.wc-block-components-totals-item__label {
    color: var(--fp-text-muted) !important;
}

.wc-block-components-totals-item__value {
    color: #fff !important;
    font-weight: 600 !important;
}

.wc-block-components-totals-footer-item-tax-value {
    color: var(--fp-accent) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px var(--fp-accent-soft);
}

/* Action Buttons */
.wc-block-components-checkout-place-order-button {
    background: var(--fp-accent) !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-radius: 50px !important;
    padding: 20px 40px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: none !important;
    box-shadow: 0 0 20px var(--fp-accent-soft) !important;
}

.wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 0 40px var(--fp-accent) !important;
}

.wc-block-components-checkout-return-to-cart-button {
    color: var(--fp-text-muted) !important;
    transition: color 0.3s ease !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
    color: #fff !important;
}

/* Radio & Checkbox Styling */
.wc-block-components-radio-control__input:checked + .wc-block-components-radio-control__option-layout {
    border-color: var(--fp-accent) !important;
    background: rgba(0, 243, 255, 0.05) !important;
}

.wc-block-components-checkbox__input:checked {
    background-color: var(--fp-accent) !important;
    border-color: var(--fp-accent) !important;
}

@media (max-width: 991px) {
    .wc-block-components-main.wc-block-checkout__main {
        padding: 20px !important;
    }
}
/* ==========================================================================
   FORGED PPF: MOBILE RESPONSIVENESS FIXES (Films-PPF & Header)
   ========================================================================== */

@media (max-width: 576px) {
    /* Header & Logo */
    /* Header & Logo */
    .main-header__logo img {
        max-height: 28px !important; /* Smaller logo */
        padding-left: 8px;
    }

    .main-header--widgets {
        gap: 15px !important;
        justify-content: flex-end !important;
    }

    .ms-hw-inner {
        gap: 12px !important;
    }

    /* Background & Layout */
    .ms-immersive-slider-main {
        position: fixed;
        height: 100vh;
        width: 100%;
        overflow: hidden !important;
    }

    .ms-slide {
        padding: 140px 3% 20px !important; /* Even more top padding to clear header */
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        position: relative !important;
    }

    .ms-slide-label {
        display: none !important;
    }

    .ms-slide-content-left {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 5px !important;
        text-align: center !important;
    }

    .ms-slide-title {
        font-size: 1.2rem !important;
        line-height: 1.1 !important;
        margin: 0 auto 10px !important; /* Increased margin for aeration */
        max-width: 95% !important;
    }

    .ms-slide-desc {
        font-size: 0.65rem !important;
        margin: 0 auto 15px !important; /* Increased margin for aeration */
        max-width: 95% !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    body .ms-slide-image-center {
        width: 100% !important;
        height: auto !important;
        flex: none !important;
        margin: 15px 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: 100% !important; /* Reset desktop max-width */
    }

    body .ms-image-frame {
        width: 96% !important;
        height: auto !important;
        aspect-ratio: 2.2 / 1 !important; /* Shorter landscape to save vertical space */
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5) !important;
    }

    .ms-slide-nav-right {
        position: absolute !important;
        bottom: 150px !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important; /* Reset height */
        transform: none !important; /* Reset transform */
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        z-index: 50 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ms-slide-pagination-lines {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        width: auto !important;
        justify-content: center !important;
    }

    .ms-nav-line {
        width: 8px !important;
        height: 2px !important;
    }

    .ms-nav-line.active {
        width: 16px !important;
    }

    .ms-slide-numbering {
        font-size: 0.75rem !important;
        margin: 0 !important;
    }

    .ms-slide-mini-thumb {
        display: none !important; /* Hide mini thumb on right for mobile */
    }

    /* Action Button Fix - ALWAYS VISIBLE */
    .ms-slide-action {
        position: absolute !important;
        bottom: 100px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        z-index: 100 !important;
    }

    .ms-btn-immersive {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 25px !important;
        font-size: 0.55rem !important;
        letter-spacing: 1.5px !important;
        width: auto !important;
        min-width: 140px !important;
        margin: 0 auto !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .ms-slide-footer {
        display: none !important;
    }

    .ms-scroll-down {
        display: none !important;
    }

    /* Mobile Menu - Toning down flashy cyan */
    .main-header__default .navbar-nav > .menu-item.current-menu-item > a,
    .ms-menu-wrapper .ms-menu .ms-menu-container .menu-item.current-menu-item > a {
        color: #7000E2 !important; /* Premium Purple */
    }

    .ms-menu-wrapper .ms-menu .ms-menu-container .menu-item a:hover,
    .main-header__default .navbar-nav > .menu-item a:hover {
        color: #7000E2 !important;
    }
}

/* Fix for very small screens */
@media (max-width: 380px) {
    .ms-slide-title {
        font-size: 1.3rem !important;
    }
    
    .ms-btn-immersive {
        padding: 10px 20px !important;
        letter-spacing: 1.5px !important;
    }
}

/* --- COMPTE CLIENT (ACCOUNT) RESPONSIVE FIXES --- */
@media (max-width: 991px) {
    /* Critical: Fix Bootstrap conflict crushing WooCommerce columns (.col-1, .col-2) */
    .woocommerce-account .u-columns.col2-set,
    .woocommerce-account .col2-set {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .woocommerce-account .u-columns.col2-set .col-1,
    .woocommerce-account .u-columns.col2-set .col-2,
    .woocommerce-account .u-column1,
    .woocommerce-account .u-column2,
    .woocommerce-account .col-1,
    .woocommerce-account .col-2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        margin-bottom: 30px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Forms Aeration & Alignment */
    .woocommerce-account form .form-row {
        width: 100% !important;
        margin-bottom: 15px !important;
        float: none !important;
    }

    /* My Account Layout Stacking */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
        float: none !important;
        margin-bottom: 30px !important;
        text-align: center;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation li {
        width: calc(50% - 10px) !important;
        margin: 0 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
        padding: 0 10px !important;
    }

    /* Table Responsiveness (Orders, etc) */
    .woocommerce-account table.shop_table_responsive {
        border: none !important;
    }

    .woocommerce-account table.shop_table_responsive thead {
        display: none !important;
    }

    .woocommerce-account table.shop_table_responsive tr {
        display: block !important;
        margin-bottom: 20px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 15px !important;
    }

    .woocommerce-account table.shop_table_responsive tr td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        padding: 10px 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .woocommerce-account table.shop_table_responsive tr td:last-child {
        border-bottom: none !important;
    }

    .woocommerce-account table.shop_table_responsive tr td::before {
        content: attr(data-title) ": ";
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 0.65rem !important;
        color: #7000E2 !important;
        text-align: left !important;
    }

    /* Dashboard Custom Enhancements */
    .fp-dashboard-welcome {
        padding: 0 !important;
    }

    .fp-welcome-header {
        text-align: center;
        margin-bottom: 30px !important;
    }

    .fp-title {
        font-size: 1.6rem !important;
    }

    .fp-quick-stats {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .fp-stat-card {
        width: 100% !important;
        padding: 20px !important;
    }

    .fp-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .fp-grid-item {
        padding: 20px !important;
        gap: 15px !important;
    }

    .fp-grid-icon {
        font-size: 1.5rem !important;
    }

    .fp-grid-content h3 {
        font-size: 1rem !important;
    }

    .fp-grid-arrow {
        display: none !important; /* Hide hover arrow on mobile */
    }

    /* --- PREMIUM FORMS AESTHETICS --- */
    .woocommerce-account .woocommerce-EditAddressForm input.input-text,
    .woocommerce-account .woocommerce-form-login input.input-text,
    .woocommerce-account .woocommerce-form-register input.input-text,
    .woocommerce-account .woocommerce-form-edit-account input.input-text,
    .woocommerce-account .woocommerce-Input {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 40px !important;
        padding: 12px 25px !important;
        color: #fff !important;
        width: 100% !important;
        height: auto !important;
        font-family: inherit !important;
        font-size: 0.9rem !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.3s ease !important;
    }

    .woocommerce-account .woocommerce-Input:focus {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: #7000E2 !important;
        outline: none !important;
        box-shadow: 0 0 15px rgba(112, 0, 226, 0.3) !important;
    }

    /* Vertical Stacking for Field Labels */
    .woocommerce-account .form-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .woocommerce-account .form-row label {
        margin: 0 0 5px 15px !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Premium Buttons */
    .woocommerce-account button.button {
        background: #7000E2 !important;
        border: none !important;
        border-radius: 40px !important;
        padding: 15px 35px !important;
        color: #fff !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        font-size: 0.8rem !important;
        width: 100% !important;
        margin-top: 10px !important;
        box-shadow: 0 10px 20px rgba(112, 0, 226, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    .woocommerce-account button.button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 15px 30px rgba(112, 0, 226, 0.5) !important;
        background: #8418f5 !important;
    }

    /* Select2 (Country dropdown) styling */
    .select2-container--default .select2-selection--single {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 40px !important;
        height: 48px !important;
        color: #fff !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #fff !important;
        line-height: 48px !important;
        padding-left: 25px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
        right: 15px !important;
    }

    /* Horizontal Scroll & Title Fixes */
    .ms-sp--title {
        font-size: 1.8rem !important; /* Scale down oversized title */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .woocommerce-account .u-columns.col2-set,
    .woocommerce-account .col2-set,
    .woocommerce-account form,
    .woocommerce-account .woocommerce,
    .ms-main,
    .ms-page-content {
        max-width: 100% !important;
        /* overflow-x: hidden removed to prevent vertical scroll lock */
    }

    .woocommerce-account input.input-text,
    .woocommerce-account .woocommerce-Input,
    .woocommerce-account select,
    .woocommerce-account .select2-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Footer heading fix */
    footer .elementor-heading-title {
        font-size: 0.9rem !important;
        max-width: 100% !important;
    }

    /* Aggressive fixes for fp- custom dashboard elements */
    .fp-field-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        display: block !important; /* Force block if grid is stubborn */
    }

    .woocommerce-account .form-row-first,
    .woocommerce-account .form-row-last,
    .woocommerce-account .form-row-wide {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: block !important;
    }

    .woocommerce-account .form-row {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .fp-content,
    .fp-dashboard-inner,
    .fp-address-edit-form,
    .woocommerce-EditAddressForm {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* overflow-x: hidden removed to prevent vertical scroll lock */
    }

    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Target the title even more aggressively */
    body .ms-sp--title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
}


/* Remove Global Safety Fix as it conflicts with theme's smooth scroll */
@media (max-width: 767px) {
    /* Relying on child constraints instead of body overflow-x hidden */
}