/*
Theme Name: Light Peptides
Theme URI: https://light-peptide.co.uk
Author: Bradley Creative
Author URI: https://bradleycreative.co.uk
Description: Clinical, data-first WooCommerce theme for Light Peptides. Research-use-only peptide supply. Built by Bradley Creative.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lightpeptide
Tags: e-commerce, custom-logo, custom-menu, featured-images, translation-ready
WC requires at least: 7.0
WC tested up to: 9.9
*/

/* ============================================================
   0. FONTS (self-hosted)
   Recoleta: DEMO cut installed — replace the woff2 with the
   licensed file (same filename) once the web licence is bought.
   ============================================================ */
@font-face{
  font-family:"Recoleta";
  src:url("assets/fonts/Recoleta-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"League Spartan";
  src:url("assets/fonts/LeagueSpartan-Variable.woff2") format("woff2-variations"),
      url("assets/fonts/LeagueSpartan-Variable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --ink:#232A1F;
  --muted:#6A7263;
  --hair:#E5E7DE;
  --hair-2:#EFF1EA;
  --accent:#7A8B62;
  --accent-ink:#5F7050;
  --ok:#3E7550;
  --warn:#B4531A;
  --radius:14px;
  --maxw:1180px;
  --spectral:linear-gradient(90deg,#5F7050 0%,#7A8B62 22%,#7A8B62 48%,#9CAF88 72%,#C7D2B8 100%);
  --font-display:"Recoleta",Georgia,serif;
  --font-body:"League Spartan",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-0.01em;font-weight:400}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:999;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;width:auto;height:auto;clip:auto}

.lp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lp-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.lp-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   3. ANNOUNCEMENT BAR
   ============================================================ */
.lp-announce{background:var(--ink);color:#EFF3E7;font-size:13px}
.lp-announce .lp-wrap{display:flex;gap:22px;align-items:center;justify-content:center;padding:9px 24px;flex-wrap:wrap}
.lp-announce span{opacity:.9}
.lp-announce strong{color:#fff;font-weight:600}
.lp-announce .lp-dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(62,117,80,.20);display:inline-block;vertical-align:middle;margin-right:7px}

/* ============================================================
   4. HEADER
   ============================================================ */
.lp-header{position:sticky;top:0;z-index:40;background:rgba(250,250,247,.85);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--hair)}
.lp-header .lp-wrap{display:flex;align-items:center;gap:32px;height:70px}
.lp-brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:-0.03em;color:var(--ink)}
.lp-brand:hover{color:var(--ink)}
.lp-brand img{max-height:38px;width:auto}
.lp-glyph{width:26px;height:26px;flex:none}
.lp-nav ul{display:flex;gap:28px;list-style:none}
.lp-nav a{font-size:15px;color:#2E362A;font-weight:500;padding:6px 0;position:relative;display:inline-block}
.lp-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--accent);transition:right .25s ease}
.lp-nav a:hover::after{right:0}
.lp-nav .current-menu-item > a::after{right:0}
.lp-header-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lp-icon-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:1px solid var(--hair);border-radius:10px;background:var(--surface);font-size:14px;font-weight:500;cursor:pointer;color:var(--ink);transition:border-color .2s,transform .05s}
.lp-icon-btn:hover{border-color:#CBD1C2;color:var(--ink)}
.lp-icon-btn:active{transform:translateY(1px)}
.lp-cart-count{font-family:var(--font-mono);font-size:12px;background:var(--ink);color:#fff;border-radius:20px;padding:1px 7px}
.lp-menu-toggle{display:none}
.lp-mobile-nav{display:none;border-top:1px solid var(--hair);background:var(--surface)}
.lp-mobile-nav.is-open{display:block}
.lp-mobile-nav ul{list-style:none;padding:8px 24px 16px}
.lp-mobile-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--hair-2);font-weight:500}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;border-radius:12px;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;font-family:var(--font-body);transition:transform .06s,box-shadow .2s,background .2s,border-color .2s}
.lp-btn-primary{background:var(--ink);color:#fff}
.lp-btn-primary:hover{box-shadow:0 10px 30px -12px rgba(35,42,31,.5);color:#fff}
.lp-btn-primary:active{transform:translateY(1px)}
.lp-btn-ghost{background:var(--surface);border-color:var(--hair);color:var(--ink)}
.lp-btn-ghost:hover{border-color:#CBD1C2;color:var(--ink)}
.lp-btn-invert{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.lp-btn-invert:hover{border-color:rgba(255,255,255,.45);color:#fff}

/* ============================================================
   6. HERO + CHROMATOGRAM SIGNATURE
   ============================================================ */
.lp-hero{position:relative;overflow:hidden}
.lp-hero .lp-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:72px 24px 64px}
.lp-hero .lp-eyebrow{margin-bottom:20px}
.lp-hero h1{font-size:clamp(38px,5.2vw,62px);font-weight:400;letter-spacing:-0.035em}
.lp-hero h1 em{font-style:normal;background:var(--spectral);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-lead{margin-top:22px;font-size:18px;color:var(--muted);max-width:46ch}
.lp-cta-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.lp-hero-micro{margin-top:26px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lp-hero-micro .lp-pill{border:1px solid var(--hair);border-radius:20px;padding:4px 11px}

.lp-instrument{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:22px;box-shadow:0 40px 80px -50px rgba(35,42,31,.35)}
.lp-instrument .lp-inst-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.lp-instrument .lp-inst-head .t{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lp-instrument .lp-inst-head .r{font-family:var(--font-mono);font-size:11px;color:var(--accent-ink);font-weight:600}
.lp-chart{width:100%;height:240px;display:block}
.lp-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:16px;background:var(--hair-2);border:1px solid var(--hair-2);border-radius:10px;overflow:hidden}
.lp-readout div{background:var(--surface);padding:12px 14px}
.lp-readout .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lp-readout .v{font-family:var(--font-mono);font-size:19px;font-weight:600;margin-top:3px}
.lp-draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:lp-draw 2.2s ease forwards .25s}
@keyframes lp-draw{to{stroke-dashoffset:0}}

/* ============================================================
   7. TRUST STRIP
   ============================================================ */
.lp-trust{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--surface)}
.lp-trust .lp-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.lp-trust .lp-cell{padding:26px 22px;border-left:1px solid var(--hair-2)}
.lp-trust .lp-cell:first-child{border-left:none;padding-left:0}
.lp-trust .lp-ic{width:30px;height:30px;color:var(--accent);margin-bottom:12px}
.lp-trust h3{font-size:16px;font-weight:400;letter-spacing:-0.01em}
.lp-trust p{font-size:13.5px;color:var(--muted);margin-top:4px}

/* ============================================================
   8. SECTION SHELL
   ============================================================ */
.lp-block{padding:84px 0}
.lp-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px}
.lp-sec-head h2{font-size:clamp(28px,3.4vw,40px)}
.lp-sec-head .lp-eyebrow{margin-bottom:12px}
.lp-sec-head p{color:var(--muted);max-width:40ch;font-size:15px}

/* ============================================================
   9. WOOCOMMERCE — LOOP / PRODUCT CARDS
   ============================================================ */
.woocommerce ul.products,
ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0}
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product,
ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(35,42,31,.4);border-color:#D6DCCB}
.woocommerce ul.products li.product a img{
  margin:0;background:radial-gradient(120% 90% at 50% -10%,rgba(122,139,98,.10),transparent 60%),linear-gradient(180deg,#fff,#F5F7F0);
  border-bottom:1px solid var(--hair-2);aspect-ratio:4/3;object-fit:contain;padding:18px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-size:18px!important;font-weight:400;padding:16px 16px 0;margin:0
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-mono);font-size:18px!important;font-weight:600;color:var(--ink);
  margin:0;padding:0 16px 12px;display:block
}
.woocommerce ul.products li.product .price del{color:var(--muted);font-size:14px;opacity:.7}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .button{
  margin:auto 16px 16px;height:38px;padding:0 15px;border-radius:9px;background:var(--ink);color:#fff;
  font-size:13px;font-weight:600;border:none;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,transform .05s
}
.woocommerce ul.products li.product .button:hover{background:var(--accent);color:#fff}
.woocommerce ul.products li.product .button:active{transform:translateY(1px)}
.woocommerce ul.products li.product .onsale{
  background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;border-radius:20px;padding:4px 10px;min-height:0;min-width:0;line-height:1.4;
  top:12px;right:12px;left:auto;margin:0;position:absolute
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{font-size:13.5px;color:var(--muted)}
.woocommerce .woocommerce-ordering select{
  font-family:var(--font-body);border:1px solid var(--hair);border-radius:9px;padding:8px 12px;background:var(--surface)
}

/* ============================================================
   10. WOOCOMMERCE — SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product{padding-top:8px}
.woocommerce div.product .product_title{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-0.03em}
.woocommerce div.product p.price,
.woocommerce div.product span.price{font-family:var(--font-mono);font-size:26px;font-weight:600;color:var(--ink)}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);font-size:15px}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button{
  height:52px;padding:0 28px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;
  border:none;transition:background .2s
}
.woocommerce div.product form.cart .button:hover{background:var(--accent)}
.woocommerce div.product .quantity input.qty{
  height:52px;border:1px solid var(--hair);border-radius:10px;font-family:var(--font-mono);background:var(--surface)
}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 24px;border-bottom:1px solid var(--hair)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:none;border-radius:0;margin:0 24px 0 0;padding:0
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:14px 0;display:block;border-bottom:2px solid transparent
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--accent)}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:20px;margin-bottom:12px}
.woocommerce table.shop_attributes{border:1px solid var(--hair);border-radius:10px;overflow:hidden;border-collapse:separate;border-spacing:0}
.woocommerce table.shop_attributes th{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:#F7F8F2;font-weight:600;padding:12px 14px;border-bottom:1px solid var(--hair-2);width:34%
}
.woocommerce table.shop_attributes td{
  font-family:var(--font-mono);font-size:14px;padding:12px 14px;border-bottom:1px solid var(--hair-2);font-style:normal
}
.woocommerce table.shop_attributes td p{margin:0;padding:0}
.woocommerce div.product .images img{border:1px solid var(--hair);border-radius:var(--radius);background:#fff}

/* ============================================================
   11. WOOCOMMERCE — CART / CHECKOUT / NOTICES / FORMS
   ============================================================ */
.woocommerce table.shop_table{border:1px solid var(--hair);border-radius:12px;border-collapse:separate;border-spacing:0}
.woocommerce table.shop_table th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.woocommerce table.shop_table td.product-name a{font-weight:600}
.woocommerce .woocommerce-Price-amount{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background:var(--ink);color:#fff;border-radius:11px;font-weight:600;font-size:14px;padding:14px 24px;
  border:none;transition:background .2s
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{background:var(--accent);color:#fff}
.woocommerce .cart .button,
.woocommerce .checkout-button{font-size:15px}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  border:1px solid var(--hair);border-radius:10px;padding:12px 14px;font-family:var(--font-body);font-size:15px;
  background:var(--surface);height:auto;min-height:48px
}
.woocommerce form .form-row label{font-size:13.5px;font-weight:500;color:#2E362A}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-top:none;border:1px solid var(--hair);border-left:3px solid var(--accent);
  background:var(--surface);border-radius:10px;font-size:14.5px
}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--accent)}
.woocommerce-error{border-left-color:#C0392B}
.woocommerce-error::before{color:#C0392B}
.woocommerce #payment{background:#F2F4EC;border-radius:12px}
.woocommerce #payment div.payment_box{background:var(--surface);border:1px solid var(--hair);border-radius:10px}
.woocommerce #payment div.payment_box::before{display:none}
.woocommerce-checkout h3{font-family:var(--font-display);font-size:20px;margin-bottom:16px}

/* ============================================================
   12. HOMEPAGE — CHARACTERISATION (dark) / RESOURCES / REVIEWS
   ============================================================ */
.lp-why{background:var(--ink);color:#EFF3E7}
.lp-why .lp-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding-top:84px;padding-bottom:84px}
.lp-why .lp-eyebrow{color:#9DAB8D}
.lp-why h2{color:#fff;font-size:clamp(30px,3.6vw,44px)}
.lp-why h2 em{font-style:normal;background:var(--spectral);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-why .lp-body{color:#C2CBB4;margin-top:18px;font-size:16px;max-width:44ch}
.lp-feats{display:grid;gap:14px}
.lp-feat{display:flex;gap:16px;padding:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.lp-feat .n{font-family:var(--font-mono);font-size:12px;color:#9DAB8D;padding-top:3px}
.lp-feat h4{color:#fff;font-size:17px;font-weight:400}
.lp-feat p{color:#C2CBB4;font-size:13.5px;margin-top:4px}

.lp-cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-card{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:24px;display:block}
.lp-card h3{font-size:19px;font-weight:400;margin-bottom:6px}
.lp-card p{color:var(--muted);font-size:14px;margin-bottom:14px}
.lp-card .lp-read{font-family:var(--font-mono);font-size:12px;color:var(--accent-ink)}
.lp-quote .lp-stars{color:var(--accent);font-family:var(--font-mono);font-size:13px;letter-spacing:2px}
.lp-quote p{margin:12px 0 16px;font-size:14.5px;color:var(--ink)}
.lp-quote .lp-by{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.lp-panel{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}

/* ============================================================
   13. PAGE / POST CONTENT
   ============================================================ */
.lp-page{padding:56px 0 84px}
.lp-page-head{margin-bottom:32px}
.lp-page-head h1{font-size:clamp(30px,4vw,46px);font-weight:400;letter-spacing:-0.03em}
.lp-content{max-width:72ch}
.lp-content p,.lp-content ul,.lp-content ol{margin-bottom:18px}
.lp-content ul,.lp-content ol{padding-left:22px}
.lp-content li{margin-bottom:7px}
.lp-content h2{font-size:26px;margin:36px 0 12px}
.lp-content h3{font-size:20px;margin:28px 0 10px}
.lp-content a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.lp-content blockquote{border-left:3px solid var(--accent);padding-left:18px;color:var(--muted);font-style:normal}

/* ============================================================
   14. FOOTER
   ============================================================ */
.lp-footer{background:var(--ink);color:#C2CBB4;padding:64px 0 30px}
.lp-footer .lp-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.lp-footer .lp-brand{color:#fff;margin-bottom:14px;font-size:22px}
.lp-footer .lp-brand:hover{color:#fff}
.lp-footer .lp-about{font-size:13.5px;max-width:34ch}
.lp-footer h5{color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-mono);font-weight:600;margin-bottom:14px}
.lp-footer ul{list-style:none;display:grid;gap:9px}
.lp-footer ul a{font-size:14px;color:#C2CBB4;transition:color .2s}
.lp-footer ul a:hover{color:#fff}
.lp-footer .lp-legal{padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .lp-nav,.lp-header-right .lp-acct{display:none}
  .lp-menu-toggle{display:inline-flex}
  .lp-hero .lp-wrap{grid-template-columns:1fr;gap:40px;padding-top:52px}
  .lp-why .lp-wrap{grid-template-columns:1fr;gap:36px}
  .lp-trust .lp-wrap{grid-template-columns:repeat(2,1fr)}
  .lp-trust .lp-cell{border-left:none;padding-left:0}
  .woocommerce ul.products,ul.products{grid-template-columns:repeat(2,1fr)}
  .lp-cards-3{grid-template-columns:1fr}
  .lp-footer .lp-top{grid-template-columns:1fr 1fr}
  .lp-block{padding:60px 0}
  .lp-why .lp-wrap{padding-top:60px;padding-bottom:60px}
}
@media (max-width:560px){
  .woocommerce ul.products,ul.products{grid-template-columns:1fr}
  .lp-trust .lp-wrap{grid-template-columns:1fr}
  .lp-readout{grid-template-columns:1fr 1fr}
  .lp-footer .lp-top{grid-template-columns:1fr}
  .lp-sec-head{flex-direction:column;align-items:flex-start}
  .lp-announce .lp-wrap{gap:10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}