/*
Theme Name:   Elionyx Biolabs
Theme URI:    https://elionyxbiolabs.com
Description:  Child theme of Hello Elementor for Elionyx Biolabs. Holds the design tokens, component styles and site-specific PHP.
Author:       Elionyx Biolabs
Version:      1.1.0
Template:     hello-elementor
Text Domain:  elionyx
Tags:         elementor, woocommerce
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root{
  /* Backgrounds */
  --ex-bg:#0D1526;
  --ex-bg-header:#080E1B;
  --ex-surface:#16203A;
  --ex-border:#1F2B45;

  /* Text */
  --ex-heading:#F4EFE6;
  --ex-cream:#E6D5B8;
  --ex-body:#A5B3C9;
  --ex-muted:#7A8AA3;

  /* Brand */
  --ex-copper:#C68B5C;
  --ex-copper-lt:#DCA878;
  --ex-copper-dk:#A96E42;

  /* Status */
  --ex-green:#5FA97C;
  --ex-red:#C9605A;

  /* Spacing scale */
  --ex-s1:8px;   --ex-s2:16px;  --ex-s3:24px;  --ex-s4:40px;
  --ex-s5:64px;  --ex-s6:96px;  --ex-s7:128px;

  /* Type */
  --ex-serif:"Cormorant Garamond", Georgia, serif;
  --ex-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ex-radius:6px;
  --ex-radius-lg:10px;
  --ex-maxw:1240px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body{
  background:var(--ex-bg);
  color:var(--ex-body);
  font-family:var(--ex-sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--ex-serif); color:var(--ex-heading); }
h4,h5,h6{ font-family:var(--ex-sans); color:var(--ex-heading); font-weight:600; }

h1{ font-size:clamp(40px,5vw,64px); font-weight:600; line-height:1.08; letter-spacing:-.5px; }
h2{ font-size:clamp(32px,3.6vw,44px); font-weight:600; line-height:1.15; letter-spacing:-.25px; }
h3{ font-size:clamp(24px,2.4vw,30px); font-weight:500; line-height:1.2; }
h4{ font-size:20px; line-height:1.35; }
h5{ font-size:17px; line-height:1.4; color:var(--ex-cream); }
h6{ font-size:13px; line-height:1.3; letter-spacing:1.8px; text-transform:uppercase; color:var(--ex-copper); }

a{ color:var(--ex-copper); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--ex-copper-lt); text-decoration:underline; }

::selection{ background:var(--ex-copper); color:#221407; }

/* ==========================================================================
   3. Components
   ========================================================================== */

/* Hero — grid texture with an off-centre glow */
.ex-hero{
  background:
    radial-gradient(120% 90% at 68% 42%, #17243F 0%, var(--ex-bg) 62%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 64px);
}

/* Eyebrow label with leading rule */
.ex-eyebrow{
  display:inline-block;
  color:var(--ex-copper);
  font:600 12px/1 var(--ex-sans);
  letter-spacing:2.4px;
  text-transform:uppercase;
}
.ex-eyebrow::before{
  content:"";
  display:inline-block;
  width:34px; height:1px;
  background:var(--ex-copper);
  vertical-align:middle;
  margin-right:14px;
}

/* Italic accent line inside a headline */
.ex-accent-line{
  font-family:var(--ex-serif);
  font-style:italic;
  font-weight:600;
  color:var(--ex-cream);
}

/* Metal button */
.ex-btn-metal .elementor-button,
a.ex-btn-metal,
button.ex-btn-metal{
  background:linear-gradient(180deg,var(--ex-copper-lt),#B87E52);
  color:#221407;
  font:600 15px/1 var(--ex-sans);
  letter-spacing:.4px;
  border:none;
  border-radius:var(--ex-radius);
  padding:16px 32px;
  transition:background .25s ease, transform .15s ease;
}
.ex-btn-metal .elementor-button:hover,
a.ex-btn-metal:hover,
button.ex-btn-metal:hover{
  background:linear-gradient(180deg,#E8B98C,var(--ex-copper));
  color:#1A1005;
  text-decoration:none;
}

/* Ghost button */
.ex-btn-ghost .elementor-button,
a.ex-btn-ghost{
  background:transparent;
  color:var(--ex-heading);
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius);
  padding:15px 31px;
  font:600 15px/1 var(--ex-sans);
  letter-spacing:.4px;
}
.ex-btn-ghost .elementor-button:hover,
a.ex-btn-ghost:hover{ border-color:var(--ex-copper); color:var(--ex-copper-lt); }

/* Card */
.ex-card{
  background:var(--ex-surface);
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius-lg);
  padding:var(--ex-s4);
}

/* Trust ticker */
.ex-ticker{ overflow:hidden; background:var(--ex-bg-header); padding:9px 0; }
.ex-track{
  display:flex; gap:44px; width:max-content;
  animation:ex-scroll 38s linear infinite;
}
.ex-track span{
  font:500 12px/1 var(--ex-sans);
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#F0E7DA;
  white-space:nowrap;
}
.ex-track span::before{ content:"\2022"; color:var(--ex-copper); margin-right:14px; }
@keyframes ex-scroll{ to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .ex-track{ animation:none; } }

/* Legal / research-use-only copy */
.ex-legal{ color:var(--ex-muted); font-size:13px; line-height:1.6; }

/* Section rhythm */
.ex-section{ padding-block:var(--ex-s6); }
@media(max-width:767px){ .ex-section{ padding-block:var(--ex-s5); } }

/* ==========================================================================
   4. Forms
   ========================================================================== */

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=number], select, textarea{
  background:var(--ex-surface);
  color:var(--ex-heading);
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius);
  padding:14px 16px;
  font-family:var(--ex-sans);
  font-size:15px;
  transition:border-color .2s ease;
}
input::placeholder, textarea::placeholder{ color:var(--ex-muted); }
input:focus, select:focus, textarea:focus{ border-color:var(--ex-copper); outline:none; }
label{ color:var(--ex-body); font-size:13px; font-weight:500; }

/* ==========================================================================
   5. WooCommerce
   ========================================================================== */

.woocommerce-message, .woocommerce-info{
  background:var(--ex-surface);
  border-top-color:var(--ex-copper);
  color:var(--ex-body);
}
.woocommerce-error{ background:var(--ex-surface); border-top-color:var(--ex-red); }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{ color:var(--ex-copper); font-weight:600; }

.woocommerce .stock.in-stock{ color:var(--ex-green); }
.woocommerce .stock.out-of-stock{ color:var(--ex-red); }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:linear-gradient(180deg,var(--ex-copper-lt),#B87E52);
  color:#221407;
  font-weight:600;
  border-radius:var(--ex-radius);
  padding:14px 28px;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background:linear-gradient(180deg,#E8B98C,var(--ex-copper));
  color:#1A1005;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{ border-color:var(--ex-border); color:var(--ex-body); }

/* ==========================================================================
   6. Accessibility
   ========================================================================== */

:focus-visible{ outline:2px solid var(--ex-copper); outline-offset:2px; }

.ex-skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ex-copper); color:#221407;
  padding:12px 20px; z-index:9999;
}
.ex-skip-link:focus{ left:0; }

/* ==========================================================================
   7. Elementor building blocks
   Shared by the Theme Builder templates and home page in /elementor.
   Class names avoid the Customizer's .ex-btn-* / .ex-card / .ex-hero rules,
   which also style Elementor wrapper elements.
   ========================================================================== */

/* Kicker — small copper label with a leading rule */
.elementor-widget.ex-kicker .elementor-heading-title{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:0;
  color:var(--ex-copper);
  font:600 12px/1.2 var(--ex-sans);
  letter-spacing:2.4px;
  text-transform:uppercase;
}
.elementor-widget.ex-kicker .elementor-heading-title::before{
  content:"";
  flex:0 0 34px;
  height:1px;
  background:currentColor;
}

/* Serif display headings wrap evenly */
.elementor-widget.ex-display .elementor-heading-title{ text-wrap:balance; }

/* Supporting copy */
.elementor-widget.ex-lead{ max-width:36em; font-size:18px; line-height:1.7; }
.elementor-widget.ex-note{ color:var(--ex-muted); font-size:13px; line-height:1.6; }
.elementor-widget.ex-note a{ color:var(--ex-copper-lt); }
.elementor-widget.ex-lead p:last-child,
.elementor-widget.ex-copy p:last-child,
.elementor-widget.ex-note p:last-child{ margin-bottom:0; }

/* Buttons */
.elementor-widget.ex-cta .elementor-button,
.elementor-widget.ex-cta-ghost .elementor-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:15px 30px;
  border-radius:var(--ex-radius);
  font:600 15px/1 var(--ex-sans);
  letter-spacing:.4px;
  transition:background .25s ease, border-color .2s ease, color .2s ease;
}
.elementor-widget.ex-cta .elementor-button{
  background:linear-gradient(180deg,var(--ex-copper-lt),#B87E52);
  color:#221407;
  border:0;
}
.elementor-widget.ex-cta .elementor-button:hover,
.elementor-widget.ex-cta .elementor-button:focus-visible{
  background:linear-gradient(180deg,#E8B98C,var(--ex-copper));
  color:#1A1005;
}
.elementor-widget.ex-cta-ghost .elementor-button{
  background:transparent;
  color:var(--ex-heading);
  border:1px solid var(--ex-border);
}
.elementor-widget.ex-cta-ghost .elementor-button:hover,
.elementor-widget.ex-cta-ghost .elementor-button:focus-visible{
  border-color:var(--ex-copper);
  color:var(--ex-copper-lt);
}
.elementor-widget.ex-cta-sm .elementor-button{ min-height:42px; padding:11px 18px; font-size:14px; }
.elementor-widget.ex-cta .elementor-button-icon svg,
.elementor-widget.ex-cta-ghost .elementor-button-icon svg{ width:.95em; height:.95em; fill:currentColor; }

/* Quiet text link (product "All products") */
.elementor-widget.ex-backlink .elementor-button{
  min-height:0;
  padding:0;
  background:none;
  border:0;
  color:var(--ex-muted);
  font:500 14px/1.4 var(--ex-sans);
  letter-spacing:.2px;
}
.elementor-widget.ex-backlink .elementor-button:hover,
.elementor-widget.ex-backlink .elementor-button:focus-visible{ background:none; color:var(--ex-copper-lt); }
.elementor-widget.ex-backlink .elementor-button-icon svg{ width:.85em; height:.85em; fill:currentColor; }

/* Panel — surface card for Elementor containers */
.e-con.ex-panel{
  background:linear-gradient(180deg,rgba(22,32,58,.94),rgba(22,32,58,.7));
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius-lg);
}

/* Theme Builder frames sit inside body.woocommerce on catalog pages, where
   the Customizer pads every .woocommerce wrapper. The frames own spacing. */
body.woocommerce .ex-frame .woocommerce{ padding-top:0; padding-bottom:0; }

/* ==========================================================================
   8. Site header
   ========================================================================== */

.e-con.ex-ruo-strip{ border-bottom:1px solid var(--ex-border); }
.elementor-widget.ex-ruo-strip__text,
.elementor-widget.ex-ruo-strip__text p{
  margin:0;
  color:var(--ex-cream);
  font:500 11px/1.5 var(--ex-sans);
  letter-spacing:1.8px;
  text-align:center;
  text-transform:uppercase;
}

.e-con.ex-header-bar{ border-bottom:1px solid var(--ex-border); transition:box-shadow .25s ease; }
.e-con.ex-header-bar.elementor-sticky--effects{ box-shadow:0 12px 32px rgba(3,7,16,.45); }

.elementor-widget.ex-header-logo img,
.elementor-widget.ex-footer-logo img{ display:block; height:auto; }

/* Tablet and phone order: logo · account · menu toggle */
@media (max-width:1024px){
  .elementor-widget.ex-account-link{ margin-inline-start:auto; }
}

/* Phones: the account button keeps its icon and an accessible label */
@media (max-width:767px){
  .elementor-widget.ex-account-link .elementor-button{ min-height:42px; padding:10px 12px; }
  .elementor-widget.ex-account-link .elementor-button-text{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
}

/* ==========================================================================
   9. Home — hero
   The supplied 848×480 video plays at or below its native size, feathered
   into the navy. Vial cutouts stand in front of it; phones show only the
   primary vial.
   ========================================================================== */

.e-con.ex-home-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(60% 85% at 78% 50%, rgba(33,52,92,.55) 0%, rgba(13,21,38,0) 64%),
    var(--ex-bg);
  border-bottom:1px solid var(--ex-border);
}

.e-con.ex-hero-stage{ position:relative; isolation:isolate; }

/* Outranks Elementor's .e-con .elementor-widget-video{width:100%} and
   .elementor.elementor .e-con>.elementor-widget{max-width:100%} */
.e-con .elementor-widget.ex-hero-video{
  position:absolute;
  top:46%;
  left:50%;
  z-index:0;
  width:848px;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.elementor.elementor .e-con>.elementor-widget.ex-hero-video{ max-width:none; }
.ex-hero-video .e-hosted-video,
.ex-hero-video video{ display:block; width:100%; }
.ex-hero-video video{
  height:auto;
  aspect-ratio:848 / 480;
  object-fit:cover;
  opacity:.82;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}

/* The vial PNGs are near-square canvases with the vial in the middle ~38%.
   A 3:7 cover crop trims most of the side transparency; the vial itself
   then fills ~87% of each widget (≈189px primary, ≈160px back row on
   desktop — inside the asset manifest's 160–210px range). */
.e-con.ex-hero-vials{
  position:absolute;
  left:50%;
  bottom:-24px;
  z-index:1;
  width:max-content;
  max-width:100%;
  transform:translateX(-50%);
}
.ex-hero-vials .elementor-widget.ex-vial{ flex:0 0 auto; }
.ex-hero-vials .elementor-widget.ex-vial img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 7;
  object-fit:cover;
  object-position:50% 50%;
  filter:drop-shadow(0 28px 34px rgba(3,7,16,.6));
}
.ex-hero-vials .elementor-widget.ex-vial--primary{ z-index:2; width:216px; }
.ex-hero-vials .elementor-widget.ex-vial--secondary{ width:184px; margin-inline-end:-44px; transform:translateY(-20px); }
.ex-hero-vials .elementor-widget.ex-vial--tertiary{ width:180px; margin-inline-start:-44px; transform:translateY(-32px); }

@media (max-width:1024px){
  .e-con .elementor-widget.ex-hero-video{ width:min(848px,100%); }
  .ex-hero-vials .elementor-widget.ex-vial--primary{ width:190px; }
  .ex-hero-vials .elementor-widget.ex-vial--secondary{ width:160px; margin-inline-end:-38px; }
  .ex-hero-vials .elementor-widget.ex-vial--tertiary{ width:156px; margin-inline-start:-38px; }
}
@media (max-width:767px){
  .e-con .elementor-widget.ex-hero-video{ width:150%; }
  .e-con.ex-hero-vials{ bottom:-18px; }
  .ex-hero-vials .elementor-widget.ex-vial--primary{ width:160px; }
}

/* ==========================================================================
   10. Home — featured, details, research statement and support
   ========================================================================== */

/* Three featured products: 3 columns, then 2 on phones with the last card
   centred. If none render, the section hides on the live page. */
.ex-featured .woocommerce ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:767px){
  .ex-featured .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ex-featured .woocommerce ul.products li.product:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    max-width:calc(50% - 12px);
  }
}
body:not(.elementor-editor-active) .e-con.ex-featured:not(:has(li.product)){ display:none; }

/* Product cards inside the Elionyx templates show the full square artwork */
.ex-featured .woocommerce ul.products li.product a img,
.ex-catalog .woocommerce ul.products li.product a img,
.ex-product .related ul.products li.product a img{
  height:auto;
  aspect-ratio:1 / 1;
}

.e-con.ex-panel.ex-fact{ border-top:2px solid var(--ex-copper); }

/* Elementor's .e-con-inner reads text-align from --text-align */
.e-con.ex-research{
  --text-align:center;
  background:linear-gradient(180deg,#101a31 0%,var(--ex-bg) 100%);
  border-top:1px solid var(--ex-border);
  border-bottom:1px solid var(--ex-border);
}
.elementor-widget.ex-statement p{ margin:0; text-wrap:balance; }

/* ==========================================================================
   11. Site footer
   ========================================================================== */

.e-con.ex-site-footer{ border-top:1px solid var(--ex-border); }
.e-con.ex-footer-disclaimer{ --text-align:center; border-bottom:1px solid var(--ex-border); }
.ex-footer-disclaimer .elementor-widget.ex-note{ max-width:62em; }
.e-con.ex-footer-bottom{ border-top:1px solid var(--ex-border); }
.ex-site-footer .elementor-icon-list-item a:hover{ text-decoration:none; }

/* ==========================================================================
   12. Catalog (Shop) template
   ========================================================================== */

.ex-catalog-search .woocommerce-product-search{ display:flex; gap:10px; margin:0; }
.ex-catalog-search .woocommerce-product-search .search-field{ flex:1 1 auto; min-width:0; min-height:50px; }
.ex-catalog-search .woocommerce-product-search button{
  min-height:50px;
  padding:0 24px;
  border:0;
  border-radius:var(--ex-radius);
  background:linear-gradient(180deg,var(--ex-copper-lt),#B87E52);
  color:#221407;
  font:600 15px/1 var(--ex-sans);
  letter-spacing:.4px;
  cursor:pointer;
}
.ex-catalog-search .woocommerce-product-search button:hover,
.ex-catalog-search .woocommerce-product-search button:focus-visible{
  background:linear-gradient(180deg,#E8B98C,var(--ex-copper));
  color:#1A1005;
}

/* ==========================================================================
   13. Single product template
   ========================================================================== */

/* The Customizer sets Inter on every product-page element; titles keep the serif */
.ex-product .product_title,
.ex-product .related > h2{ font-family:var(--ex-serif) !important; }
.ex-product .product_title{ margin:0; color:var(--ex-heading); text-wrap:balance; }
.ex-product .related > h2{
  margin:0 0 24px;
  color:var(--ex-heading);
  font-size:clamp(28px,3vw,38px);
  font-weight:600;
  line-height:1.15;
}

.ex-product-media .woocommerce-product-gallery{ float:none; width:100% !important; margin:0; }
.ex-product-media .woocommerce-product-gallery__wrapper,
.ex-product-media .flex-viewport{
  overflow:hidden;
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius-lg);
}

.ex-product-variations table{ width:100%; margin:0; border-collapse:collapse; }
.ex-product-variations th,
.ex-product-variations td{ padding:10px 12px; border-bottom:1px solid var(--ex-border); text-align:start; }
.ex-product-variations th{
  color:var(--ex-cream);
  font:600 12px/1.3 var(--ex-sans);
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.single-product .ex-product .woocommerce-tabs{ margin-top:0; }

/* ==========================================================================
   14. Page, notice and 404 templates
   ========================================================================== */

/* Native page content under the titled frame's H1 */
.ex-page--titled .elementor-widget-theme-post-content h2{
  margin:1.6em 0 .45em;
  color:var(--ex-heading);
  font-size:clamp(26px,2.6vw,32px);
  line-height:1.2;
}
.ex-page--titled .elementor-widget-theme-post-content h2:first-child{ margin-top:0; }
.ex-page--titled .elementor-widget-theme-post-content p{ margin:0 0 1.1em; }

.e-con.ex-ruo-notice{
  background:var(--ex-surface);
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius);
}
.e-con.ex-ruo-notice p{ margin:0; }

.e-con.ex-not-found{ --text-align:center; }
.e-con.ex-not-found .elementor-widget.ex-lead{ margin-inline:auto; }

/* ==========================================================================
   15. Reduced motion
   The footer script also holds the home video on its poster frame.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .e-con.ex-header-bar,
  .elementor-widget.ex-cta .elementor-button,
  .elementor-widget.ex-cta-ghost .elementor-button{ transition:none; }
}