/*
Theme Name:   Cosmetic Lab Child
Theme URI:    https://cosmeticlab.eu
Description:  Child theme for Hello Elementor — Cosmetic Lab brand
Author:       Cosmetic Lab
Template:     hello-elementor
Version:      1.0.0
Text Domain:  cosmeticlab-child
*/

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --cl-green:       #053827;
  --cl-green-dark:  #032a1e;
  --cl-green-light: #0a5c3f;
  --cl-white:       #ffffff;
  --cl-off-white:   #f8f8f6;
  --cl-grey-light:  #f5f5f5;
  --cl-grey:        #e5e5e5;
  --cl-text:        #1a1a1a;
  --cl-text-muted:  #555555;
  --cl-font:        'Sansation', sans-serif;
  --cl-radius:      4px;
  --cl-transition:  0.25s ease;
  --cl-shadow:      0 4px 24px rgba(5,56,39,0.10);
  --cl-container:   1240px;
}

/* Global */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--cl-font); color: var(--cl-text); background: var(--cl-white); margin:0; padding:0; -webkit-font-smoothing: antialiased; }
a { color: var(--cl-green); text-decoration: none; transition: color var(--cl-transition); }
a:hover { color: var(--cl-green-light); }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5,h6 { font-family:var(--cl-font); font-weight:700; color:var(--cl-text); line-height:1.2; margin:0 0 1rem; }
p { margin:0 0 1rem; line-height:1.7; }
.cl-container { max-width:var(--cl-container); margin:0 auto; padding:0 24px; }
.page-content-wrap { padding-top: 72px; }

/* HEADER */
#site-header { position:fixed; top:0; left:0; right:0; z-index:9999; background:var(--cl-green); transition:background var(--cl-transition),box-shadow var(--cl-transition); }
#site-header.scrolled { background:var(--cl-green-dark); box-shadow:0 2px 20px rgba(0,0,0,0.15); }
.cl-navbar { display:flex; align-items:center; justify-content:space-between; height:72px; max-width:var(--cl-container); margin:0 auto; padding:0 24px; }
.cl-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.cl-logo-img { height:40px; width:auto; }
.cl-logo-text { font-family:var(--cl-font); font-size:18px; font-weight:700; letter-spacing:0.12em; color:var(--cl-white); text-transform:uppercase; }
.cl-nav-menu { display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0; }
.cl-nav-menu li a { font-family:var(--cl-font); font-size:13px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.85); text-decoration:none; transition:color var(--cl-transition); position:relative; padding-bottom:4px; }
.cl-nav-menu li a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--cl-white); transition:width var(--cl-transition); }
.cl-nav-menu li a:hover,.cl-nav-menu li.current-menu-item>a { color:var(--cl-white); }
.cl-nav-menu li a:hover::after,.cl-nav-menu li.current-menu-item>a::after { width:100%; }
.cl-nav-cta { background:transparent !important; border:1px solid rgba(255,255,255,0.5) !important; color:var(--cl-white) !important; padding:8px 20px !important; border-radius:var(--cl-radius) !important; font-size:12px !important; letter-spacing:0.12em !important; }
.cl-nav-cta:hover { background:var(--cl-white) !important; color:var(--cl-green) !important; border-color:var(--cl-white) !important; }
.cl-nav-cta::after { display:none !important; }
.cl-nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.cl-nav-toggle span { display:block; width:24px; height:2px; background:var(--cl-white); transition:all var(--cl-transition); }

@media (max-width:1024px) {
  .cl-nav-toggle { display:flex; }
  .cl-nav-menu { display:none; flex-direction:column; position:fixed; top:72px; left:0; right:0; background:var(--cl-green-dark); padding:24px; gap:0; border-top:1px solid rgba(255,255,255,0.1); }
  .cl-nav-menu.open { display:flex; }
  .cl-nav-menu li { width:100%; border-bottom:1px solid rgba(255,255,255,0.08); }
  .cl-nav-menu li a { display:block; padding:14px 0; font-size:14px; }
}

/* BUTTONS */
.cl-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--cl-font); font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:14px 32px; border-radius:var(--cl-radius); cursor:pointer; text-decoration:none; transition:all var(--cl-transition); border:2px solid transparent; }
.cl-btn-primary { background:var(--cl-green); color:var(--cl-white); border-color:var(--cl-green); }
.cl-btn-primary:hover { background:var(--cl-green-light); border-color:var(--cl-green-light); color:var(--cl-white); transform:translateY(-1px); box-shadow:0 6px 20px rgba(5,56,39,0.25); }
.cl-btn-outline { background:transparent; color:var(--cl-green); border-color:var(--cl-green); }
.cl-btn-outline:hover { background:var(--cl-green); color:var(--cl-white); transform:translateY(-1px); }
.cl-btn-white { background:var(--cl-white); color:var(--cl-green); border-color:var(--cl-white); }
.cl-btn-white:hover { background:transparent; color:var(--cl-white); border-color:var(--cl-white); }

/* HERO */
.cl-hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center top; background-repeat:no-repeat; }
.cl-hero-image { display:none; }
.cl-hero-content { position:relative; z-index:2; max-width:860px; padding:100px 0; text-align:center; }
.cl-hero-eyebrow { font-size:13px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.8); margin-bottom:24px; display:block; }
.cl-hero-title { font-size:clamp(36px,4.2vw,60px); font-weight:600; line-height:1.05; color:#fff; margin-bottom:40px; }
.cl-hero-title em { color:rgba(255,255,255,0.85); font-style:italic; }
.cl-hero-subtitle { display:none; }
.cl-hero-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:center; }
.cl-hero .cl-btn-primary { background:#fff; color:var(--cl-green); border-color:#fff; }
.cl-hero .cl-btn-primary:hover { background:var(--cl-green); color:#fff; }
.cl-hero .cl-btn-outline { border-color:#fff; color:#fff; }
.cl-hero .cl-btn-outline:hover { background:#fff; color:var(--cl-green); }

@media (max-width:768px) {
  .cl-hero { min-height:100svh; }
  .cl-hero-content { padding:60px 0; }
}

/* STATS */
.cl-stats { background:var(--cl-green); padding:72px 0; }
.cl-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
@media(max-width:768px){.cl-stats-grid{grid-template-columns:repeat(2,1fr);}}
.cl-stat-number { font-size:clamp(36px,4vw,52px); font-weight:700; color:var(--cl-white); line-height:1; margin-bottom:8px; }
.cl-stat-label { font-size:13px; font-weight:300; letter-spacing:0.08em; color:rgba(255,255,255,0.7); text-transform:uppercase; }

/* ABOUT 3-COL GRID */
.cl-about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; font-size:15px; color:#555; line-height:1.8; font-weight:300; }
.cl-about-grid p { margin:0; }
.cl-about-grid p:last-child strong { color:var(--cl-green); font-weight:700; }
@media(max-width:768px){ .cl-about-grid { grid-template-columns:1fr; } }

/* STATS WHITE */
.cl-stats-white { padding:80px 0; background:#fff; }
.cl-stats-heading { text-align:center; font-size:clamp(22px,3vw,36px); font-weight:700; color:var(--cl-text); margin-bottom:48px; }
.cl-stats-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:768px){ .cl-stats-cards { grid-template-columns:repeat(2,1fr); } }
.cl-stat-card { background:var(--cl-off-white); border-radius:8px; padding:32px 24px; text-align:center; }
.cl-stat-card .cl-stat-number { color:var(--cl-text); }
.cl-stat-card .cl-stat-label { color:#888; }

/* CTA BANNER */
.cl-cta-banner { padding:80px; background:var(--cl-off-white); text-align:center; }
.cl-cta-banner h2 { font-size:clamp(22px,3vw,38px); font-weight:700; color:var(--cl-text); margin-bottom:12px; }
.cl-cta-banner p { color:#777; margin-bottom:28px; }

/* SECTIONS */
.cl-section { padding:96px 0; }
.cl-section-alt { background:var(--cl-off-white); }
.cl-section-dark { background:var(--cl-green); color:var(--cl-white); }
.cl-section-header { text-align:center; max-width:680px; margin:0 auto 56px; }
.cl-section-eyebrow { display:block; font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--cl-green); margin-bottom:12px; }
.cl-section-dark .cl-section-eyebrow { color:rgba(255,255,255,0.6); }
.cl-section-title { font-size:clamp(28px,3.5vw,44px); font-weight:700; margin-bottom:16px; }
.cl-section-dark .cl-section-title { color:var(--cl-white); }
.cl-section-desc { font-size:16px; color:var(--cl-text-muted); line-height:1.7; }
.cl-section-dark .cl-section-desc { color:rgba(255,255,255,0.72); }

/* SERVICES */
.cl-services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1024px){.cl-services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.cl-services-grid{grid-template-columns:1fr;}}
.cl-service-card { background:var(--cl-white); border:1px solid var(--cl-grey); border-radius:8px; padding:28px 22px; transition:all var(--cl-transition); display:flex; flex-direction:column; gap:12px; }
.cl-service-card:hover { border-color:var(--cl-green); box-shadow:var(--cl-shadow); transform:translateY(-4px); }
.cl-service-icon { width:52px; height:52px; object-fit:contain; }
.cl-service-title { font-size:15px; font-weight:700; color:var(--cl-green); margin:0; }
.cl-service-desc { font-size:13px; color:var(--cl-text-muted); line-height:1.6; margin:0; flex-grow:1; }

/* PRODUCTS */
.cl-product-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:40px; }
.cl-product-tab { font-family:var(--cl-font); font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:10px 18px; border:1px solid var(--cl-grey); border-radius:var(--cl-radius); cursor:pointer; background:transparent; color:var(--cl-text-muted); transition:all var(--cl-transition); }
.cl-product-tab:hover,.cl-product-tab.active { background:var(--cl-green); color:var(--cl-white); border-color:var(--cl-green); }
.cl-product-gallery { display:none; grid-template-columns:repeat(3,1fr); gap:12px; }
.cl-product-gallery.active { display:grid; }
@media(max-width:600px){.cl-product-gallery{grid-template-columns:repeat(2,1fr);}}
.cl-product-gallery img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; transition:transform var(--cl-transition); }
.cl-product-gallery img:hover { transform:scale(1.03); }
.cl-catalog-cta { text-align:center; margin-top:40px; }

/* FEATURES (Why Trust Us) */
.cl-features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
@media(max-width:1024px){.cl-features-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.cl-features-grid{grid-template-columns:1fr;}}
.cl-feature-item { text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.cl-feature-icon { width:60px; height:60px; object-fit:contain; }
.cl-feature-title { font-size:14px; font-weight:700; color:#111; margin:0; }
.cl-feature-desc { font-size:13px; color:#666; line-height:1.6; margin:0; text-align:center; }

/* CERTIFICATIONS */
.cl-certs-grid { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; align-items:center; margin-top:40px; }
.cl-cert-item { text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 20px; background:var(--cl-white); border-radius:8px; border:1px solid var(--cl-grey); min-width:150px; transition:all var(--cl-transition); }
.cl-cert-item:hover { border-color:var(--cl-green); box-shadow:var(--cl-shadow); }
.cl-cert-item img { width:90px; height:70px; object-fit:contain; }
.cl-cert-name { font-size:12px; font-weight:700; color:var(--cl-green); text-transform:uppercase; letter-spacing:0.08em; }

/* CONTACT */
.cl-contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:56px; align-items:start; }
@media(max-width:900px){.cl-contact-grid{grid-template-columns:1fr;gap:40px;}}
.cl-contact-info { display:flex; flex-direction:column; gap:28px; }
.cl-contact-item { display:flex; gap:14px; align-items:flex-start; }
.cl-contact-icon { width:44px; height:44px; flex-shrink:0; object-fit:contain; }
.cl-contact-label { font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--cl-green); margin-bottom:3px; }
.cl-contact-value { font-size:14px; color:var(--cl-text); font-weight:300; }
.cl-form { display:flex; flex-direction:column; gap:14px; }
.cl-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:600px){.cl-form-row{grid-template-columns:1fr;}}
.cl-form input,.cl-form textarea,.cl-form select { width:100%; font-family:var(--cl-font); font-size:14px; color:var(--cl-text); background:var(--cl-white); border:1px solid var(--cl-grey); border-radius:var(--cl-radius); padding:13px 15px; transition:border-color var(--cl-transition); outline:none; -webkit-appearance:none; appearance:none; }
.cl-form input:focus,.cl-form textarea:focus,.cl-form select:focus { border-color:var(--cl-green); }
.cl-form textarea { min-height:110px; resize:vertical; }
.cl-form input::placeholder,.cl-form textarea::placeholder { color:#aaa; }
.cl-form-subject { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0; }
.cl-subject-btn { font-family:var(--cl-font); font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:7px 14px; border:1px solid var(--cl-grey); border-radius:var(--cl-radius); background:transparent; color:var(--cl-text-muted); cursor:pointer; transition:all var(--cl-transition); }
.cl-subject-btn.active,.cl-subject-btn:hover { background:var(--cl-green); color:var(--cl-white); border-color:var(--cl-green); }

/* NEWSLETTER */
.cl-newsletter { background:var(--cl-off-white); padding:72px 0; text-align:center; }
.cl-newsletter-title { font-size:clamp(22px,3vw,32px); font-weight:700; margin-bottom:8px; }
.cl-newsletter-desc { font-size:15px; color:var(--cl-text-muted); margin-bottom:28px; }
.cl-newsletter-form { display:flex; max-width:460px; margin:0 auto; border-radius:var(--cl-radius); overflow:hidden; border:1px solid var(--cl-grey); }
.cl-newsletter-form input { flex:1; padding:14px 18px; font-family:var(--cl-font); font-size:14px; border:none; outline:none; background:var(--cl-white); }
.cl-newsletter-form button { font-family:var(--cl-font); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:14px 22px; background:var(--cl-green); color:var(--cl-white); border:none; cursor:pointer; white-space:nowrap; transition:background var(--cl-transition); }
.cl-newsletter-form button:hover { background:var(--cl-green-light); }


/* ===================== WHY TRUST US — NUMBERED LIST ===================== */
.cl-why-trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.cl-why-trust-img-col img { width:85%; display:block; margin:0 auto; border-radius:8px; }
.cl-why-trust-list { display:flex; flex-direction:column; gap:20px; }
.cl-trust-item { display:flex; gap:16px; align-items:flex-start; }
.cl-trust-num { font-size:18px; font-weight:700; color:var(--cl-green); flex-shrink:0; min-width:36px; line-height:1.4; }
.cl-trust-title { font-size:13px; font-weight:700; color:#111; margin:0 0 4px; }
.cl-trust-desc { font-size:13px; font-weight:300; color:#666; line-height:1.7; margin:0; }
@media(max-width:900px) { .cl-why-trust-grid { grid-template-columns:1fr; } .cl-why-trust-img-col { display:none; } }

/* ===================== DARK GREEN SLOGANS ===================== */
.cl-dark-slogans { background:var(--cl-green); padding:32px 0; }
.cl-slogans-grid { display:flex; gap:0; justify-content:center; }
.cl-slogan { flex:1; text-align:center; padding:20px 32px; border-right:1px solid rgba(255,255,255,0.15); }
.cl-slogan:last-child { border-right:none; }
.cl-slogan strong { display:block; font-size:16px; font-weight:700; color:#fff; margin-bottom:6px; }
.cl-slogan span { font-size:13px; font-weight:300; color:rgba(255,255,255,0.75); }
@media(max-width:768px) { .cl-slogans-grid { flex-direction:column; } .cl-slogan { border-right:none; border-bottom:1px solid rgba(255,255,255,0.15); } }


/* FOOTER */
#site-footer { background:var(--cl-green); color:rgba(255,255,255,0.75); padding:64px 0 32px; }
.cl-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; margin-bottom:48px; }
@media(max-width:768px){.cl-footer-grid{grid-template-columns:1fr;gap:32px;}}
.cl-footer-logo-text { font-family:var(--cl-font); font-size:20px; font-weight:700; letter-spacing:0.12em; color:var(--cl-white); text-transform:uppercase; display:block; margin-bottom:14px; }
.cl-footer-brand-desc { font-size:13px; line-height:1.7; color:rgba(255,255,255,0.6); margin-bottom:20px; }
.cl-footer-heading { font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--cl-white); margin-bottom:18px; }
.cl-footer-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cl-footer-links a { font-size:14px; color:rgba(255,255,255,0.65); text-decoration:none; transition:color var(--cl-transition); }
.cl-footer-links a:hover { color:var(--cl-white); }
.cl-footer-bottom { border-top:1px solid rgba(255,255,255,0.12); padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font-size:13px; color:rgba(255,255,255,0.45); }

/* PAGE HERO */
.cl-page-hero { background:var(--cl-green); padding:72px 0 56px; text-align:center; }
.cl-page-hero h1 { font-size:clamp(28px,4vw,48px); font-weight:700; color:var(--cl-white); margin-bottom:10px; }
.cl-page-hero p { font-size:16px; color:rgba(255,255,255,0.7); max-width:540px; margin:0 auto; }

/* CAREERS */
.cl-careers-form-wrap { max-width:680px; margin:0 auto; background:var(--cl-white); border:1px solid var(--cl-grey); border-radius:12px; padding:48px; }
@media(max-width:600px){.cl-careers-form-wrap{padding:24px;}}
.cl-file-upload { border:2px dashed var(--cl-grey); border-radius:var(--cl-radius); padding:28px; text-align:center; cursor:pointer; transition:border-color var(--cl-transition); }
.cl-file-upload:hover { border-color:var(--cl-green); }
.cl-file-upload input { display:none; }
.cl-file-text { font-size:14px; color:var(--cl-text-muted); }
.cl-file-text strong { color:var(--cl-green); }

/* EU SUPPORT */
.cl-eu-card { background:var(--cl-white); border:1px solid var(--cl-grey); border-radius:12px; overflow:hidden; display:grid; grid-template-columns:280px 1fr; margin-bottom:28px; box-shadow:var(--cl-shadow); }
@media(max-width:768px){.cl-eu-card{grid-template-columns:1fr;}}
.cl-eu-card-img { overflow:hidden; }
.cl-eu-card-img img { width:100%; height:100%; object-fit:cover; min-height:200px; }
.cl-eu-card-content { padding:36px; }
.cl-eu-card-content h3 { font-size:17px; font-weight:700; color:var(--cl-green); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; }
.cl-eu-card-content p { font-size:14px; color:var(--cl-text-muted); line-height:1.7; }

/* LEGAL */
.cl-legal-content { max-width:800px; margin:0 auto; padding:64px 24px 80px; }
.cl-legal-content h2 { font-size:20px; font-weight:700; color:var(--cl-green); margin:36px 0 14px; }
.cl-legal-content h3 { font-size:16px; font-weight:700; margin:24px 0 8px; }
.cl-legal-content ul { padding-left:22px; margin-bottom:1rem; }
.cl-legal-content ul li { margin-bottom:5px; font-size:15px; line-height:1.7; }
.cl-legal-content p { font-size:15px; }

/* 404 */
.cl-404 { text-align:center; padding:120px 24px; }
.cl-404-number { font-size:120px; color:var(--cl-grey); font-weight:700; line-height:1; margin-bottom:16px; }
.cl-404 h2 { font-size:28px; margin-bottom:10px; }
.cl-404 p { color:var(--cl-text-muted); margin-bottom:28px; }

/* MODAL (offer form) */
.cl-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:99999; align-items:center; justify-content:center; padding:24px; }
.cl-modal-overlay.open { display:flex; }
.cl-modal { background:var(--cl-white); border-radius:12px; padding:40px; max-width:540px; width:100%; max-height:90vh; overflow-y:auto; position:relative; }
.cl-modal-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--cl-text-muted); line-height:1; padding:4px; }
.cl-modal-title { font-size:22px; font-weight:700; margin-bottom:6px; }
.cl-modal-subtitle { font-size:14px; color:var(--cl-text-muted); margin-bottom:24px; line-height:1.5; }

/* COOKIE BANNER */
.cl-cookie-banner { display:none; position:fixed; bottom:20px; left:20px; right:20px; max-width:500px; background:var(--cl-green-dark); color:var(--cl-white); border-radius:10px; padding:22px; z-index:99998; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.cl-cookie-banner.show { display:block; }
.cl-cookie-banner p { font-size:13px; color:rgba(255,255,255,0.8); margin-bottom:14px; line-height:1.6; }
.cl-cookie-banner p a { color:rgba(255,255,255,0.9); text-decoration:underline; }
.cl-cookie-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Elementor */
.elementor-page { padding-top:0 !important; }
.elementor-widget-heading .elementor-heading-title { font-family:var(--cl-font) !important; }
.elementor-button { font-family:var(--cl-font) !important; }

/* Utils */
.text-green{color:var(--cl-green)!important;}.text-white{color:var(--cl-white)!important;}
.text-center{text-align:center;}.hidden{display:none!important;}