.elementor-2476 .elementor-element.elementor-element-7bcb644{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-db80da4 *//* --- Global Variables & Overlays --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-skin: #fcf9f5;             
    --glass-bg: rgba(255, 255, 255, 0.45); 
    --glass-border: rgba(255, 255, 255, 0.65); 
    --text-dark: #2a2927;           
    --skin-scroll: 0;
}

body {
    background-color: var(--bg-skin) !important;
    color: var(--text-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

.skin-grain-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    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%3cturbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3e%3c/svg%3e");
    pointer-events: none; z-index: 99;
}

.skin-ambient-glow {
    position: fixed; top: 15%; left: 25%; width: 65vw; height: 65vh;
    background: radial-gradient(circle, #fcece2 0%, #f6e3db 45%, transparent 75%);
    filter: blur(70px); z-index: 1; pointer-events: none;
    transform: scale(calc(1 + (var(--skin-scroll) * 0.35)));
}

/* --- Navigation HUD --- */
.skin-hud-nav {
    position: fixed; top: 0; left: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 35px 50px; z-index: 100; font-size: 0.75rem; letter-spacing: 3px;
    border-bottom: 1px solid rgba(42, 41, 39, 0.05);
    background: linear-gradient(to bottom, var(--bg-skin) 25%, transparent);
}
.skin-logo { font-weight: 400; font-family: serif; font-size: 1.1rem; letter-spacing: 4px; }
.skin-formula-spec { opacity: 0.4; font-size: 0.65rem; }
.skin-status { color: #bca08d; font-weight: 600; }

/* --- Stage 1: 3D Perspective Workspace Engine --- */
.skin-scroll-track { position: relative; width: 100%; height: 500vh; }
.skin-3d-viewport {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    perspective: 1600px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; z-index: 5;
}
.skin-matrix-engine {
    position: relative; width: 100vw; height: 100vh; transform-style: preserve-3d;
    transform: 
        translateZ(calc(var(--skin-scroll) * 1450px - 150px))
        rotateX(calc(6deg - (var(--skin-scroll) * 3deg)))
        rotateY(calc(-6deg + (var(--skin-scroll) * 16deg)));
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.skin-layer {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    display: flex; align-items: center; justify-content: center; transform-style: preserve-3d;
    pointer-events: none; transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.skin-layer-deep { transform: translateZ(-500px); }
.skin-layer-focal { transform: translateZ(50px); }
.skin-layer-mid-front { transform: translateZ(450px); }
.skin-layer-front { transform: translateZ(850px); }
.skin-layer-extreme-front { transform: translateZ(1200px); }

.skin-bg-text { font-family: serif; font-size: 20vw; font-weight: 300; color: rgba(237, 226, 219, 0.35); letter-spacing: 15px; opacity: calc(1 - (var(--skin-scroll) * 1.5)); }

/* 3D Bottle Generation Elements */
.product-glass-bottle {
    position: relative; width: 220px; height: 420px; background: rgba(255, 255, 255, 0.22); border: 1.5px solid var(--glass-border); border-radius: 40px 40px 30px 30px;
    backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    box-shadow: 0 40px 80px rgba(188, 160, 141, 0.12), inset 0 0 25px rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center;
    transform: rotateZ(calc(var(--skin-scroll) * -25deg)) translateX(calc(var(--skin-scroll) * -120px));
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.frosted-liquid-core { position: absolute; bottom: 20px; width: 80%; height: 75%; background: linear-gradient(to top, #fcebe1 0%, rgba(255, 255, 255, 0.6) 100%); border-radius: 20px; filter: blur(1.5px); }
.bottle-reflection-line { position: absolute; top: 0; left: 25px; width: 6px; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); transform: skewX(-10deg); }
.bottle-label { position: relative; font-size: 0.75rem; letter-spacing: 5px; text-align: center; color: rgba(42, 41, 39, 0.65); border-top: 1px solid rgba(42, 41, 39, 0.1); border-bottom: 1px solid rgba(42, 41, 39, 0.1); padding: 10px 0; width: 60%; }
.product-shadow { position: absolute; bottom: 10vh; width: 260px; height: 20px; background: radial-gradient(ellipse at center, rgba(188, 160, 141, 0.18) 0%, transparent 70%); }

/* Glassmorphism Structural Cards */
.left-card-align { justify-content: flex-start; padding-left: 12vw; }
.right-card-align { justify-content: flex-end; padding-right: 12vw; }
.center-card-align { justify-content: center; }

.glass-skin-card {
    background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(35px) saturate(115%); -webkit-backdrop-filter: blur(35px) saturate(115%);
    padding: 45px; width: 410px; border-radius: 24px; box-shadow: 0 40px 60px rgba(42, 41, 39, 0.03); pointer-events: auto;
}
.card-pill { font-size: 0.6rem; color: #bca08d; font-weight: 600; letter-spacing: 2px; display: block; margin-bottom: 15px; text-transform: uppercase; }
.glass-skin-card h2 { font-family: serif; font-size: 2.2rem; font-weight: 400; margin-bottom: 15px; }
.glass-skin-card h3 { font-family: serif; font-size: 1.6rem; font-weight: 400; margin-bottom: 12px; }
.glass-skin-card p { font-size: 0.9rem; color: rgba(42, 41, 39, 0.75); line-height: 1.7; font-weight: 300; }

.skin-stats { display: flex; gap: 40px; margin-top: 25px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 20px; }
.skin-stats .s-lbl { font-size: 0.65rem; color: rgba(42, 41, 39, 0.4); display: block; }
.skin-stats .s-val { font-size: 1.3rem; color: #a48673; }

.ingredient-ticker { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
.ing-item { font-size: 0.8rem; border-left: 2px solid #bca08d; padding-left: 12px; color: rgba(42, 41, 39, 0.8); }
.ing-item strong { font-size: 0.7rem; color: #bca08d; display: block; }

.allocation-terminal { text-align: center; }
.scroll-down-arrow { margin-top: 20px; font-size: 1.5rem; color: #bca08d; animation: floatArrow 2s infinite ease-in-out; }
@keyframes floatArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }


/* --- Stage 2: Grounded Luxury Traditional Layout Wrapper --- */
.grounded-retail-wrapper {
    position: relative; width: 100%; background: #ffffff; z-index: 10;
    box-shadow: 0 -30px 60px rgba(0,0,0,0.02);
}

.retail-section { padding: 120px 8vw; max-width: 1300px; margin: 0 auto; }
.alt-bg-section { background-color: #fcf9f5; max-width: 100%; border-top: 1px solid rgba(0,0,0,0.02); border-bottom: 1px solid rgba(0,0,0,0.02); }

.section-tag { font-size: 0.65rem; color: #bca08d; font-weight: 600; letter-spacing: 2px; display: block; margin-bottom: 15px; }
.section-title { font-family: serif; font-size: 2.8rem; font-weight: 300; margin-bottom: 60px; }

/* Product Grid Architecture */
.product-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.luxury-product-card { display: flex; flex-direction: column; background: #ffffff; padding: 20px; border-radius: 24px; border: 1px solid rgba(0,0,0,0.03); }
.prod-img-wrapper { position: relative; width: 100%; height: 440px; background: #fdfcfb; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.prod-img-wrapper img { max-height: 85%; object-fit: contain; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.luxury-product-card:hover .prod-img-wrapper img { transform: scale(1.05); }

/* Double pane frosted edge inside product frames */
.prod-glass-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; pointer-events: none; z-index: 2; }

.prod-details { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 25px; margin-bottom: 20px; }
.prod-details h4 { font-family: serif; font-size: 1.3rem; font-weight: 400; }
.prod-details p { font-size: 0.8rem; color: rgba(42, 41, 39, 0.5); margin-top: 5px; }
.prod-price { font-size: 1.2rem; color: #a48673; }

.add-to-cart-btn {
    padding: 16px; background: transparent; border: 1px solid var(--text-dark); border-radius: 10px;
    color: var(--text-dark); font-size: 0.7rem; letter-spacing: 3px; font-weight: 600; cursor: pointer; transition: all 0.3s;
}
.add-to-cart-btn:hover { background: var(--text-dark); color: #ffffff; }

/* About Us Story Matrix */
.about-story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; max-width: 1200px; margin: 0 auto; }
.story-text h2 { font-family: serif; font-size: 2.8rem; font-weight: 300; line-height: 1.2; margin-bottom: 25px; }
.story-text p { font-size: 1rem; color: rgba(42, 41, 39, 0.7); line-height: 1.8; font-weight: 300; margin-bottom: 15px; }
.image-glass-frame { background: #ffffff; padding: 15px; border-radius: 30px; border: 1px solid rgba(0,0,0,0.04); }
.image-glass-frame img { width: 100%; height: 480px; object-fit: cover; border-radius: 20px; }

/* Clinical Reviews Matrix Layout */
.reviews-masonry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.review-glass-node {
    background: #fdfcfb; border: 1px solid rgba(42, 41, 39, 0.06); padding: 35px; border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.01);
}
.review-stars { color: #bca08d; font-size: 0.8rem; margin-bottom: 15px; letter-spacing: 2px; }
.review-body { font-size: 0.95rem; color: rgba(42, 41, 39, 0.8); line-height: 1.6; font-weight: 300; font-style: italic; margin-bottom: 20px; }
.review-author { font-size: 0.7rem; letter-spacing: 1px; color: rgba(42, 41, 39, 0.4); text-transform: uppercase; display: block; }


/* --- Site Footer --- */
.skin-master-footer { position: relative; width: 100%; background: #2a2927; color: #fcf9f5; padding: 80px 8vw; z-index: 10; font-size: 0.85rem; }
.footer-columns { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.f-col h4 { font-family: serif; font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 15px; font-weight: 400; }
.f-col h5 { font-size: 0.65rem; letter-spacing: 2px; color: rgba(255,255,255,0.4); margin-bottom: 15px; }
.f-col p { opacity: 0.4; font-weight: 300; }
.f-col a { display: block; color: #fcf9f5; text-decoration: none; opacity: 0.6; margin-bottom: 10px; transition: opacity 0.3s; font-weight: 300; }
.f-col a:hover { opacity: 1; }

/* HUD Bottom Progress Pin */
.skin-footer-hud {
    position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 100;
    pointer-events: none; transition: opacity 0.4s ease;
}
.skin-progress-bar { width: 180px; height: 1px; background: rgba(42, 41, 39, 0.1); position: relative; }
.skin-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #bca08d; }
.skin-hud-desc { font-size: 0.6rem; color: rgba(42, 41, 39, 0.4); letter-spacing: 2px; text-transform: uppercase; }

/* --- Mobile Adaptive Scaling Safeguards --- */
@media (max-width: 1024px) {
    .skin-matrix-engine { transform: translateZ(calc(var(--skin-scroll) * 600px - 50px)) rotateX(5deg); }
    .glass-skin-card { width: 85vw !important; max-width: 380px; padding: 25px; }
    .left-card-align, .right-card-align { justify-content: center; padding: 0; }
    .product-glass-bottle { display: none; } 
    .product-showcase-grid, .about-story-grid, .reviews-masonry-grid { grid-template-columns: 1fr; gap: 40px; }
    .image-glass-frame img { height: 320px; }
    .section-title, .story-text h2 { font-size: 2.2rem; }
    .prod-img-wrapper { height: 320px; }
}/* End custom CSS */