/*
Theme Name:  Core Lab UK
Theme URI:   https://atifiy.com
Author:      Atif Mughal
Author URI:  https://atifiy.com
Description: Premium WordPress theme for Core Lab UK Supplements. Features dynamic Customizer controls, WooCommerce integration, gradient design system, and animated UI.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: corelab-uk
Tags:        supplements, health, ecommerce, woocommerce, custom-colors, custom-logo, dark
*/

/* === CSS VARIABLES (Customizer-controlled) === */
:root {
  --cl-primary:    #1a6fd4;
  --cl-accent:     #00c3ff;
  --cl-accent2:    #3fa0ff;
  --cl-bg:         #0a0e14;
  --cl-panel:      #0d1620;
  --cl-panel2:     #111c2a;
  --cl-steel:      #b8c5d0;
  --cl-steel-dark: #6e7f8d;
  --cl-white:      #f0f6ff;
  --cl-text:       #c8d8e8;
  --cl-font-head:  'Orbitron', sans-serif;
  --cl-font-sub:   'Rajdhani', sans-serif;
  --cl-font-body:  'Inter', sans-serif;
  --cl-hex-clip:   polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  --cl-cut-clip:   polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  --cl-btn-clip:   polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cl-bg);
  color: var(--cl-text);
  font-family: var(--cl-font-body);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: var(--cl-accent); transition: color .3s; }
a:hover { color: var(--cl-accent2); }
ul { list-style: none; }

/* Animated hex grid background */
.site-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%,rgba(26,111,212,.12) 0%,transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 70%,rgba(0,195,255,.08) 0%,transparent 70%),
    var(--cl-bg);
}
.site-bg::before {
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(60deg,rgba(100,160,210,.04) 0px,transparent 1px,transparent 40px,rgba(100,160,210,.04) 41px),
    repeating-linear-gradient(-60deg,rgba(100,160,210,.04) 0px,transparent 1px,transparent 40px,rgba(100,160,210,.04) 41px);
  animation: bgShift 20s linear infinite;
}
@keyframes bgShift { to { transform: translateY(40px); } }

#page { position: relative; z-index: 1; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
@media(max-width:768px){ .container { padding: 0 20px; } }

/* Typography helpers */
h1,h2,h3,h4,h5,h6 { font-family: var(--cl-font-head); color: var(--cl-white); line-height:1.2; }
.cl-tag { display:inline-block; font-family:var(--cl-font-sub); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cl-accent); margin-bottom:12px; }
.cl-tag::before,.cl-tag::after { content:'—'; margin:0 8px; opacity:.5; }
.cl-title { font-family:var(--cl-font-head); font-size:clamp(22px,3vw,36px); font-weight:700; color:var(--cl-white); }
.cl-title span,.cl-title .accent { color:var(--cl-accent); }
.cl-section-head { text-align:center; margin-bottom:60px; }

/* Buttons */
.cl-btn { display:inline-block; font-family:var(--cl-font-sub); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; border:none; cursor:pointer; clip-path:var(--cl-btn-clip); transition:all .3s; padding:13px 36px; }
.cl-btn-primary { background:linear-gradient(135deg,var(--cl-primary),var(--cl-accent)); color:#fff; box-shadow:0 4px 24px rgba(0,195,255,.35); }
.cl-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,195,255,.5); color:#fff; }
.cl-btn-outline { background:transparent; color:var(--cl-accent); border:1px solid rgba(0,195,255,.4); }
.cl-btn-outline:hover { background:rgba(0,195,255,.08); color:var(--cl-accent); }

/* ---- HEADER ---- */
#masthead {
  position:fixed; top:0; left:0; right:0; z-index:1000; height:70px;
  display:flex; align-items:center;
  background:linear-gradient(135deg,rgba(10,14,20,.97),rgba(13,22,32,.97));
  border-bottom:1px solid rgba(0,195,255,.15);
  backdrop-filter:blur(14px);
}
#masthead .container { width:100%; display:flex; align-items:center; justify-content:space-between; }

.site-branding { display:flex; align-items:center; gap:12px; }
.site-logo-hex {
  width: 140px; height: auto;
  display: flex; align-items: center; justify-content: flex-start;
  overflow: visible;
}
.site-logo-hex img { width: 100%; height: auto; object-fit: contain; }
.site-logo-hex .default-icon { font-size: 20px; color: #fff; }
.site-title-wrap { display: none !important; }

#primary-nav { display:flex; gap:32px; align-items:center; }
#primary-nav a { font-family:var(--cl-font-sub); font-weight:600; font-size:13px; color:var(--cl-steel); letter-spacing:1.5px; text-transform:uppercase; position:relative; padding-bottom:4px; transition:color .3s; }
#primary-nav a::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--cl-accent); transform:scaleX(0); transition:transform .3s; }
#primary-nav a:hover,#primary-nav .current-menu-item>a { color:var(--cl-accent); }
#primary-nav a:hover::after,#primary-nav .current-menu-item>a::after { transform:scaleX(1); }

.nav-cta { background:linear-gradient(135deg,var(--cl-primary),var(--cl-accent)); color:#fff !important; padding:10px 22px; font-family:var(--cl-font-sub); font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0%); box-shadow:0 0 16px rgba(0,195,255,.3); transition:all .3s; border:none; cursor:pointer; }
.nav-cta:hover { box-shadow:0 0 28px rgba(0,195,255,.6); transform:translateY(-1px); }

.menu-toggle { display:none; background:none; border:1px solid rgba(0,195,255,.3); color:var(--cl-accent); padding:8px 14px; font-size:20px; cursor:pointer; }
@media(max-width:992px){
  .menu-toggle { display:block; }
  #primary-nav-wrap { display:none; position:absolute; top:70px; left:0; right:0; background:rgba(10,14,20,.98); border-bottom:1px solid rgba(0,195,255,.15); padding:20px; }
  #primary-nav-wrap.open { display:block; }
  #primary-nav { flex-direction:column; gap:8px; }
  .nav-cta { display:none; }
}

/* ---- HERO ---- */
.cl-hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:120px 40px 80px; text-align:center; overflow:hidden;
}
.cl-hero-orb { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(26,111,212,.15) 0%,rgba(0,195,255,.05) 40%,transparent 70%); animation:orbPulse 5s ease-in-out infinite; pointer-events:none; }
@keyframes orbPulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.1)} }
.cl-hero-ring { position:absolute; top:50%; left:50%; border:1px solid rgba(0,195,255,.15); border-radius:50%; animation:ringExp 4s ease-out infinite; pointer-events:none; }
.cl-hero-ring:nth-child(1){width:300px;height:300px;margin:-150px 0 0 -150px;animation-delay:0s}
.cl-hero-ring:nth-child(2){width:500px;height:500px;margin:-250px 0 0 -250px;animation-delay:1s}
.cl-hero-ring:nth-child(3){width:700px;height:700px;margin:-350px 0 0 -350px;animation-delay:2s}
@keyframes ringExp { 0%{opacity:.6;transform:scale(.8)} 100%{opacity:0;transform:scale(1.2)} }
.cl-hero-content { position:relative; z-index:2; max-width:800px; }
.cl-hero-logo { width: 180px; height: 135px; overflow: hidden; margin: 0 auto 12px; animation: fadeDown .8s ease both; pointer-events: none; }
.cl-hero-logo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cl-hero-tagline { font-family: var(--cl-font-sub); font-size: 13px; font-weight: 500; color: var(--cl-steel); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 24px; animation: fadeDown .8s .1s ease both; text-shadow: 0 0 12px rgba(0,195,255,0.2); }
.cl-hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,195,255,.08); border:1px solid rgba(0,195,255,.25); padding:6px 18px; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--cl-accent); font-family:var(--cl-font-sub); font-weight:600; margin-bottom:28px; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); animation:fadeDown .8s ease both; }
.cl-hero-title { font-family:var(--cl-font-head); font-weight:900; font-size:clamp(32px,6vw,72px); line-height:1.05; color:var(--cl-white); margin-bottom:12px; animation:fadeDown .8s .1s ease both; }
.cl-hero-title .grad { background:linear-gradient(90deg,var(--cl-accent2),var(--cl-accent),var(--cl-accent2)); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 3s linear infinite; }
@keyframes shimmer { from{background-position:0%} to{background-position:200%} }
.cl-hero-slogan { font-family:var(--cl-font-sub); font-size:18px; font-weight:500; color:var(--cl-steel); letter-spacing:2px; text-transform:uppercase; margin-bottom:20px; animation:fadeDown .8s .2s ease both; }
.cl-hero-desc { font-size:15px; line-height:1.7; color:var(--cl-steel-dark); max-width:560px; margin:0 auto 40px; animation:fadeDown .8s .3s ease both; }
.cl-hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation:fadeDown .8s .4s ease both; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

/* ---- STATS BAR ---- */
.cl-stats-bar { background:linear-gradient(135deg,rgba(13,22,32,.9),rgba(17,28,42,.9)); border-top:1px solid rgba(0,195,255,.1); border-bottom:1px solid rgba(0,195,255,.1); padding:28px 40px; display:flex; justify-content:center; gap:60px; flex-wrap:wrap; }
.cl-stat { text-align:center; }
.cl-stat-num { font-family:var(--cl-font-head); font-size:28px; font-weight:900; background:linear-gradient(135deg,var(--cl-accent2),var(--cl-accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cl-stat-label { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--cl-steel-dark); margin-top:4px; font-family:var(--cl-font-sub); }

/* ---- SECTIONS ---- */
.cl-section { position:relative; z-index:1; padding:90px 40px; }
.cl-section-alt { background:rgba(10,14,20,.5); }

/* ---- PRODUCTS (WooCommerce + custom) ---- */
.woocommerce ul.products,.cl-products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; list-style:none; margin:0!important; padding:0!important; }
.cl-product-image { display: flex; align-items: center; justify-content: center; background: rgba(0,195,255,.04); margin-bottom: 16px; height: 320px; }
.woocommerce ul.products li.product img, .cl-product-image img { max-width: 100%; height: 320px; object-fit: contain; background: rgba(0,195,255,.01); margin-bottom: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family:var(--cl-font-sub)!important; font-size:18px!important; font-weight:700!important; color:var(--cl-white)!important; padding:0!important; margin-bottom:8px; }
.woocommerce ul.products li.product .price { font-family:var(--cl-font-head)!important; font-size:18px!important; font-weight:700!important; color:var(--cl-accent)!important; margin-bottom:12px; }
.woocommerce ul.products li.product .button { background:linear-gradient(135deg,var(--cl-primary),var(--cl-accent))!important; color:#fff!important; font-family:var(--cl-font-sub)!important; font-weight:700!important; font-size:12px!important; letter-spacing:1.5px!important; text-transform:uppercase!important; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%)!important; border:none!important; border-radius:0!important; width:100%!important; text-align:center!important; margin-top:8px!important; transition:all .3s!important; }
.woocommerce ul.products li.product .button:hover { transform:translateY(-2px)!important; box-shadow:0 6px 20px rgba(0,195,255,.4)!important; }


/* ---- SHOWCASE BANNER ---- */
.cl-showcase-banner { margin-bottom: 60px; text-align: center; }
.cl-showcase-title { font-family: var(--cl-font-head); font-size: 24px; font-weight: 700; color: var(--cl-white); margin-bottom: 4px; }
.cl-showcase-subtitle { font-family: var(--cl-font-sub); font-size: 14px; color: var(--cl-steel-dark); letter-spacing: 1px; margin-bottom: 30px; }
.cl-showcase-image-wrap { position: relative; display: inline-block; max-width: 900px; width: 100%; }
.cl-showcase-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, rgba(0, 195, 255, 0.15) 0%, transparent 60%); z-index: 0; pointer-events: none; }
.cl-showcase-image-wrap img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 195, 255, 0.15); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease; }
.cl-showcase-image-wrap img:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 30px 60px rgba(0, 195, 255, 0.25); border-color: rgba(0, 195, 255, 0.4); }
@media(max-width:768px){ .cl-showcase-banner { margin-bottom: 40px; } .cl-showcase-image-wrap { max-width: 100%; } }

/* ---- ABOUT ---- */
.cl-about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1200px; margin:0 auto; }
@media(max-width:768px){ .cl-about-grid { grid-template-columns:1fr; } }
.cl-about-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:300px; }
.cl-about-hex { width:220px; height:220px; background:linear-gradient(135deg,var(--cl-primary),var(--cl-accent)); clip-path:var(--cl-hex-clip); display:flex; align-items:center; justify-content:center; box-shadow:0 0 60px rgba(0,195,255,.3); animation:hexHue 12s linear infinite; position:relative; z-index:1; }
@keyframes hexHue { from{filter:hue-rotate(0deg)} to{filter:hue-rotate(30deg)} }
.cl-about-hex-inner { width:140px; height:140px; background:var(--cl-bg); clip-path:var(--cl-hex-clip); display:flex; align-items:center; justify-content:center; font-size:52px; overflow:hidden; }
.cl-about-hex-inner img { width:100%; height:100%; object-fit:cover; }
.cl-orbit { position:absolute; width:300px; height:300px; border:1px dashed rgba(0,195,255,.15); border-radius:50%; animation:orbitSpin 15s linear infinite; }
@keyframes orbitSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.cl-orbit-dot { position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--cl-accent); box-shadow:0 0 8px var(--cl-accent); transform:translateX(-50%); }
.cl-features { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.cl-feature { display:flex; align-items:center; gap:12px; font-family:var(--cl-font-sub); font-size:14px; font-weight:600; color:var(--cl-steel); }
.cl-feature-dot { width:8px; height:8px; background:var(--cl-accent); clip-path:var(--cl-hex-clip); flex-shrink:0; }

/* ---- WHY US ---- */
.cl-why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; max-width:1000px; margin:0 auto; }
.cl-why-card { background:linear-gradient(135deg,rgba(13,22,32,.8),rgba(17,28,42,.8)); border:1px solid rgba(0,195,255,.08); padding:32px 24px; text-align:center; transition:all .3s; }
.cl-why-card:hover { border-color:var(--cl-accent); box-shadow:0 0 24px rgba(0,195,255,0.2); transform:translateY(-6px); }
.cl-why-icon { font-size:36px; margin-bottom:14px; }
.cl-why-title { font-family:var(--cl-font-sub); font-size:16px; font-weight:700; color:var(--cl-white); margin-bottom:8px; }
.cl-why-desc { font-size:13px; color:var(--cl-steel-dark); line-height:1.6; }

/* ---- CONTACT ---- */
.cl-contact-box { max-width:700px; margin:0 auto; background:linear-gradient(135deg,rgba(13,22,32,.95),rgba(17,28,42,.95)); border:1px solid rgba(0,195,255,.12); padding:50px 48px; clip-path:var(--cl-cut-clip); }
.cl-contact-info { display:flex; flex-direction:column; gap:20px; margin-bottom:36px; }
.cl-contact-item { display:flex; align-items:center; gap:14px; }
.cl-contact-icon { width:40px; height:40px; flex-shrink:0; background:linear-gradient(135deg,rgba(26,111,212,.2),rgba(0,195,255,.2)); border:1px solid rgba(0,195,255,.2); display:flex; align-items:center; justify-content:center; font-size:18px; clip-path:var(--cl-hex-clip); }
.cl-contact-text { font-size:14px; color:var(--cl-steel); }
.cl-social-links { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cl-social-btn { background:rgba(0,195,255,.06); border:1px solid rgba(0,195,255,.2); color:var(--cl-accent); padding:10px 24px; font-family:var(--cl-font-sub); font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); transition:all .3s; display:inline-block; }
.cl-social-btn:hover { background:rgba(0,195,255,.15); box-shadow:0 0 20px rgba(0,195,255,.2); color:var(--cl-accent); }

/* ---- FOOTER ---- */
#colophon { position:relative; z-index:1; background:rgba(5,8,12,.98); border-top:1px solid rgba(0,195,255,.1); }
.cl-footer-widgets { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:60px 40px 40px; max-width:1240px; margin:0 auto; }
@media(max-width:1024px){ .cl-footer-widgets { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .cl-footer-widgets { grid-template-columns:1fr; } }
.cl-footer-brand .f-logo { font-family:var(--cl-font-head); font-size:18px; font-weight:700; color:var(--cl-white); }
.cl-footer-brand .f-tagline { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--cl-accent); margin-bottom:16px; display:block; }
.cl-footer-brand p { font-size:13px; color:var(--cl-steel-dark); line-height:1.7; max-width:280px; }
.cl-footer-widget h4 { font-family:var(--cl-font-sub); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--cl-accent); margin-bottom:20px; padding-bottom:8px; border-bottom:1px solid rgba(0,195,255,.1); }
.cl-footer-widget ul { display:flex; flex-direction:column; gap:10px; }
.cl-footer-widget ul li a { font-size:13px; color:var(--cl-steel-dark); transition:all .3s; }
.cl-footer-widget ul li a:hover { color:var(--cl-accent); padding-left:6px; }
.cl-footer-bottom { border-top:1px solid rgba(0,195,255,.08); padding:20px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; max-width:1240px; margin:0 auto; }
.cl-footer-bottom p { font-size:12px; color:var(--cl-steel-dark); }
.cl-footer-bottom a { color:var(--cl-accent2); }

/* ---- SCROLL REVEAL ---- */
.cl-reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease; }
.cl-reveal.visible { opacity:1; transform:translateY(0); }

/* ---- WooCommerce forms & tables ---- */
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button { background:linear-gradient(135deg,var(--cl-primary),var(--cl-accent))!important; color:#fff!important; font-family:var(--cl-font-sub)!important; font-weight:700!important; letter-spacing:1.5px!important; text-transform:uppercase!important; border-radius:0!important; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); transition:all .3s!important; }
.woocommerce table.shop_table { background:rgba(13,22,32,.95); border:1px solid rgba(0,195,255,.12)!important; width:100%; }
.woocommerce table.shop_table th { font-family:var(--cl-font-sub); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--cl-accent); background:rgba(0,195,255,.05); padding:14px 20px; border-bottom:1px solid rgba(0,195,255,.1)!important; }
.woocommerce table.shop_table td { padding:16px 20px; color:var(--cl-steel); border-bottom:1px solid rgba(0,195,255,.06)!important; }
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,.woocommerce form .form-row textarea { background:rgba(0,195,255,.04)!important; border:1px solid rgba(0,195,255,.2)!important; color:var(--cl-white)!important; padding:12px 16px!important; border-radius:0!important; }
.woocommerce form .form-row label { color:var(--cl-steel)!important; font-family:var(--cl-font-sub)!important; font-size:12px!important; letter-spacing:1px!important; text-transform:uppercase!important; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--cl-bg); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--cl-primary),var(--cl-accent)); border-radius:3px; }