/*
Theme Name:   Clarity Compounds
Theme URI:    https://example.com
Description:  RUO (Research Use Only) research-chemical storefront child theme for WooCommerce, built on Storefront. Includes an age/RUO-purpose gate, a compliance announcement marquee, and warning-label styling for shop and product pages. IMPORTANT: All legal, regulatory, and compliance copy in this theme is placeholder text and must be reviewed and finalized by qualified counsel before launch.
Author:       Clarity Compounds
Template:     storefront
Version:      1.0.0
Text Domain:  clarity-compounds
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --cc-ink:#0B1220;
  --cc-panel:#12203E;
  --cc-blue:#2F5FFF;
  --cc-blue-soft:#5B8DFF;
  --cc-bg:#F7F9FC;
  --cc-white:#FFFFFF;
  --cc-line:#E3E9F5;
  --cc-muted:#5B6B85;
  --cc-warn:#B4231F;
  --cc-warn-bg:#FDECEC;
}

body{
  background:var(--cc-bg);
  color:var(--cc-ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}
.site-title, .site-title a, h1, h2, h3, .cc-display{
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:-0.02em;
}

/* ============ RUO WARNING LABEL (global, reusable) ============ */
.cc-warning-label{
  background:var(--cc-warn-bg);
  border:1px solid rgba(180,35,31,.25);
  color:var(--cc-warn);
  border-radius:10px;
  padding:14px 18px;
  font-size:13px;
  line-height:1.6;
  font-weight:600;
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0 0 22px;
}
.cc-warning-label svg{flex-shrink:0; margin-top:2px;}
.cc-warning-label strong{font-weight:700;}

.cc-disclaimer-strip{
  font-size:11.5px;
  color:#5F6E90;
  line-height:1.7;
  max-width:900px;
  margin:0 auto;
  text-align:center;
  padding:22px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--cc-ink);
}

/* ============ MOVING MARQUEE / ANNOUNCEMENT BAR ============ */
.cc-marquee-bar{
  background:var(--cc-ink);
  color:#EAF0FF;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cc-marquee-bar .cc-marquee-track{
  display:inline-flex;
  align-items:center;
  gap:64px;
  padding:10px 0;
  animation:cc-scroll 26s linear infinite;
  will-change:transform;
}
.cc-marquee-bar .cc-marquee-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  padding:0 32px;
}
.cc-marquee-bar .cc-marquee-item .cc-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--cc-blue-soft);
  flex-shrink:0;
}
.cc-marquee-bar .cc-marquee-item .cc-usa{
  color:var(--cc-blue-soft);
  font-weight:700;
  text-transform:uppercase;
  font-size:11.5px;
  letter-spacing:.08em;
}
@keyframes cc-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .cc-marquee-bar .cc-marquee-track{animation:none; overflow-x:auto;}
}
.cc-marquee-bar:hover .cc-marquee-track{animation-play-state:paused;}

/* ============ TOP INFO / RUO STRIP (static, under marquee) ============ */
.cc-info-strip{
  background:var(--cc-ink);
  color:#B9C6E8;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:8px 16px;
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cc-info-strip span{color:var(--cc-blue-soft);}

/* ============ HERO ============ */
.cc-hero{
  position:relative;
  background:var(--cc-ink);
  overflow:hidden;
  padding:90px 32px 100px;
  text-align:center;
}
.cc-hero::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(60% 60% at 30% 20%, rgba(47,95,255,.20), transparent 70%),
             linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.9) 100%);
  pointer-events:none;
}
.cc-hero-inner{position:relative; z-index:2; max-width:760px; margin:0 auto;}
.cc-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--cc-blue-soft);
  font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(91,141,255,.35);
  background:rgba(47,95,255,.08);
  padding:7px 14px; border-radius:999px;
  margin-bottom:26px;
}
.cc-eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--cc-blue-soft);}
.cc-hero h1{
  color:#fff;
  font-size:clamp(32px, 4.6vw, 54px);
  line-height:1.08;
  font-weight:600;
  margin-bottom:20px;
}
.cc-hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg, var(--cc-blue-soft), #8FB0FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cc-hero p.cc-lead{
  color:#AAB7D6; font-size:16.5px; line-height:1.65;
  max-width:520px; margin:0 auto 30px;
}
.cc-hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:40px;}
.cc-btn{
  padding:13px 24px; border-radius:9px; font-size:14.5px; font-weight:600;
  border:none; cursor:pointer; display:inline-block; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cc-btn-primary{background:var(--cc-blue); color:#fff; box-shadow:0 1px 2px rgba(15,30,70,.08);}
.cc-btn-primary:hover{background:#2650DE; color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(47,95,255,.28);}
.cc-btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.18);}
.cc-btn-ghost:hover{border-color:var(--cc-blue-soft); color:var(--cc-blue-soft);}
.cc-hero-stats{display:flex; gap:34px; justify-content:center; flex-wrap:wrap;}
.cc-hero-stats div{border-left:1px solid rgba(255,255,255,.14); padding-left:16px;}
.cc-hero-stats strong{display:block; color:#fff; font-size:21px; font-family:'Space Grotesk';}
.cc-hero-stats span{color:#8393B8; font-size:12px; letter-spacing:.03em;}

/* ============ TRUST STRIP ============ */
.cc-trust{background:var(--cc-white); border-bottom:1px solid var(--cc-line);}
.cc-trust-inner{
  max-width:1180px; margin:0 auto; padding:20px 32px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
}
.cc-trust-item{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--cc-muted);}
.cc-trust-item .cc-dot{width:7px; height:7px; border-radius:50%; background:var(--cc-blue);}

/* ============ SECTION / SHOP PREVIEW ============ */
.cc-section{padding:80px 32px; max-width:1180px; margin:0 auto;}
.cc-section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; flex-wrap:wrap; gap:20px;}
.cc-section-head .cc-tag{color:var(--cc-blue); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; display:block;}
.cc-section-head h2{font-size:clamp(26px,3vw,34px); font-weight:600; max-width:560px;}
.cc-section-head p{color:var(--cc-muted); font-size:14.5px; max-width:380px; line-height:1.6;}

/* Style the native WooCommerce product loop to match the design */
.woocommerce ul.products{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; margin:0; padding:0;}
.woocommerce ul.products li.product{
  background:var(--cc-white); border:1px solid var(--cc-line); border-radius:16px;
  overflow:hidden; padding:0 !important; transition:transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(20,40,90,.10);}
.woocommerce ul.products li.product img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  background:linear-gradient(150deg,#0E1830 0%,#16244A 55%,#1B2C57 100%);
  margin:0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Space Grotesk'; font-size:16.5px; font-weight:600; padding:18px 18px 4px; margin:0;
}
.woocommerce ul.products li.product .price{padding:0 18px; font-family:'Space Grotesk'; font-weight:600; color:var(--cc-ink);}
.woocommerce ul.products li.product .button{
  margin:16px 18px 20px; background:var(--cc-blue); color:#fff; border-radius:8px;
  font-size:13.5px; font-weight:600; padding:10px 16px;
}
.woocommerce ul.products li.product .button:hover{background:#2650DE;}
.woocommerce ul.products li.product .cc-ruo-badge{
  display:inline-block; margin:14px 18px 0; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--cc-blue);
  border:1px solid var(--cc-line); border-radius:999px; padding:4px 10px;
}
@media (max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.woocommerce ul.products{grid-template-columns:1fr;}}

/* ============ AGE / RUO GATE ============ */
body.cc-gate-locked{overflow:hidden;}
.cc-gate{
  position:fixed; inset:0; z-index:99999;
  background:rgba(8,13,26,.90);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.cc-gate[hidden]{display:none;}
.cc-gate-card{
  background:#fff; border-radius:18px; max-width:480px; width:100%;
  max-height:88vh; overflow-y:auto; padding:34px 30px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.cc-gate-card img{height:24px; margin-bottom:18px;}
.cc-gate-card h2{font-size:20px; font-weight:600; margin-bottom:10px; line-height:1.3;}
.cc-gate-card > p{font-size:13.5px; color:var(--cc-muted); line-height:1.6; margin-bottom:20px;}
.cc-gate-checks{display:flex; flex-direction:column; gap:12px; margin-bottom:22px;}
.cc-gate-check{display:flex; align-items:flex-start; gap:11px; font-size:12.5px; color:var(--cc-ink); line-height:1.55; cursor:pointer; padding:8px; margin:-8px; border-radius:8px; transition:background .15s ease;}
.cc-gate-check:hover{background:var(--cc-bg);}
.cc-gate-check input{margin-top:2px; width:16px; height:16px; accent-color:var(--cc-blue); flex-shrink:0; cursor:pointer;}
.cc-gate-actions{display:flex; flex-direction:column; gap:10px;}
.cc-gate-agree{background:var(--cc-blue); color:#fff; border:none; padding:13px; border-radius:9px; font-size:14px; font-weight:600; cursor:not-allowed; opacity:.5; transition:.18s ease; width:100%;}
.cc-gate-agree.cc-enabled{cursor:pointer; opacity:1;}
.cc-gate-agree.cc-enabled:hover{background:#2650DE;}
.cc-gate-decline{background:transparent; border:1px solid var(--cc-line); color:var(--cc-muted); padding:12px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; width:100%; transition:.18s ease;}
.cc-gate-decline:hover{border-color:#C7D1E6; color:var(--cc-ink);}
.cc-gate-fine{font-size:10.5px; color:#8B97AF; line-height:1.6; margin-top:18px; padding-top:16px; border-top:1px solid var(--cc-line);}
.cc-gate-exit{position:fixed; inset:0; z-index:100000; background:var(--cc-ink); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px;}
.cc-gate-exit[hidden]{display:none;}
.cc-gate-exit p{max-width:420px; color:#AAB7D6; font-size:14px; line-height:1.7;}
.cc-gate-exit h2{margin-bottom:14px; font-size:19px;}

@media (max-width:480px){
  .cc-gate-card{padding:26px 20px 22px; border-radius:14px;}
  .cc-hero{padding:64px 20px 70px;}
  .cc-section{padding:56px 20px;}
}