/*
Theme Name:   LS Peptides
Theme URI:    https://lspeptides.co.uk
Description:  Child theme of Hello Elementor for lspeptides.co.uk. Holds the brand
              tokens, the parent-hover effects Elementor cannot express natively,
              and the WooCommerce compliance hooks required by the build spec.
Author:       Novamira
Template:     hello-elementor
Version:      1.4.0
Text Domain:  lspeptides
*/

/* ============================================================
   BRAND TOKENS
   These mirror the Elementor Global Colors exactly. Elementor owns the
   values a client can edit in Site Settings; these exist so custom CSS,
   the parent-hover effects below, and any hand-written markup stay on the
   same palette instead of drifting into hardcoded hexes.
   ============================================================ */
:root{
  --ls-ink:        #040B16;
  --ls-ink-2:      #071426;
  --ls-surface:    #0A1B2E;
  --ls-surface-2:  #0D2136;
  --ls-raise:      #102943;
  --ls-line:       #16304A;
  --ls-line-soft:  #0F2439;

  --ls-blue:       #1E6FD9;
  --ls-blue-deep:  #10457F;
  --ls-azure:      #46A6F5;
  --ls-sky:        #9FC6E6;

  --ls-text:       #E8F1F8;
  --ls-mute:       #90A9C2;
  --ls-faint:      #5E7794;

  --ls-ok:         #3E9160;
  --ls-warn:       #D8A33A;
  --ls-stop:       #D65C4E;

  /* Vial cap colours. Each compound's identity colour comes from its own
     crimp cap, set per product via a body/product class. */
  --ls-cap-ghkcu:       #C2703C;
  --ls-cap-motsc:       #1B9C93;
  --ls-cap-somatropin:  #C6A227;
  --ls-cap-nad:         #2F72D6;
  --ls-cap-retatrutide: #C4392F;
  --ls-cap-glowblend:   #D07A2A;
  --ls-cap-melanotan:   #8A55B8;
  --ls-cap-dsip:        #3E9160;
  --ls-cap-tesamorelin: #3D8FA6;
  --ls-cap-pt141:       #A64A72;
  --ls-cap-ipamorelin:  #5A8FD4;
  --ls-cap-oxytocin:    #B0619B;
  --ls-cap-kpv:         #8C99A9;

  --ls-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   PARENT-HOVER EFFECTS
   Elementor has no native "hovering the container changes a child".
   Apply .ls-card to the Loop Item container and these classes to its parts
   via Advanced > CSS Classes. Keeping every rule here means one place to
   edit instead of per-element Custom CSS scattered across widgets.
   ============================================================ */
.ls-card{
  --ls-accent: var(--ls-blue);
  position: relative;
  transition: transform .45s var(--ls-ease), box-shadow .45s var(--ls-ease);
}
.ls-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(0,0,0,.5);
}

/* accent hairline that wipes in across the top edge */
.ls-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--ls-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ls-ease);
  z-index: 3;
}
.ls-card:hover::before{ transform: scaleX(1); }

.ls-card__media{ position: relative; overflow: hidden; }
.ls-card__media img{ transition: transform .7s var(--ls-ease); }
.ls-card:hover .ls-card__media img{ transform: scale(1.07); }

/* cap-colour glow behind the vial */
.ls-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%,
              color-mix(in srgb, var(--ls-accent) 34%, transparent), transparent 62%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .55s var(--ls-ease);
}
.ls-card:hover .ls-card__media::after{ opacity: 1; }

.ls-card__btn{ transition: background .3s var(--ls-ease), border-color .3s var(--ls-ease); }
.ls-card:hover .ls-card__btn{
  background: var(--ls-accent);
  border-color: var(--ls-accent);
  color: #fff;
}

/* per-compound accent, set on the loop item container */
.ls-cap-ghkcu       { --ls-accent: var(--ls-cap-ghkcu); }
.ls-cap-motsc       { --ls-accent: var(--ls-cap-motsc); }
.ls-cap-somatropin  { --ls-accent: var(--ls-cap-somatropin); }
.ls-cap-nad         { --ls-accent: var(--ls-cap-nad); }
.ls-cap-retatrutide { --ls-accent: var(--ls-cap-retatrutide); }
.ls-cap-glowblend   { --ls-accent: var(--ls-cap-glowblend); }
.ls-cap-melanotan   { --ls-accent: var(--ls-cap-melanotan); }
.ls-cap-dsip        { --ls-accent: var(--ls-cap-dsip); }
.ls-cap-tesamorelin { --ls-accent: var(--ls-cap-tesamorelin); }
.ls-cap-pt141       { --ls-accent: var(--ls-cap-pt141); }
.ls-cap-ipamorelin  { --ls-accent: var(--ls-cap-ipamorelin); }
.ls-cap-oxytocin    { --ls-accent: var(--ls-cap-oxytocin); }
.ls-cap-kpv         { --ls-accent: var(--ls-cap-kpv); }

/* ============================================================
   LAB DATA
   Mono is reserved for batch numbers, purity figures and units. It is the
   detail that makes the shop read as a laboratory supplier rather than a
   supplement store, so it gets a class rather than ad-hoc styling.
   ============================================================ */
.ls-data{
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ============================================================
   COMPLIANCE FURNITURE
   Rendered by functions.php. Deliberately not styled as decoration:
   these notices are pre-contract disclosures, not badges.
   ============================================================ */
.ls-sealed-notice{
  margin: 16px 0;
  padding: 13px 16px;
  border: 1px solid rgba(216,163,58,.32);
  border-left-width: 2px;
  border-left-color: var(--ls-warn);
  background: rgba(216,163,58,.06);
  color: var(--ls-mute);
  font-size: .87rem;
  line-height: 1.6;
}
.ls-sealed-notice strong{ color: var(--ls-warn); }

.ls-ruo-strip{
  margin: 16px 0;
  padding: 11px 15px;
  border: 1px solid var(--ls-line);
  background: var(--ls-surface);
  color: var(--ls-sky);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

.ls-consent{
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--ls-line);
  background: var(--ls-surface);
}
.ls-consent label{
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ls-mute);
  margin: 0;
}
.ls-consent input[type="checkbox"]{
  flex: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--ls-blue);
}
.ls-consent strong{ color: var(--ls-text); }

/* ============================================================
   AGE GATE
   The plugin renders its own markup, so it is styled here rather than
   rebuilt. This is the first thing every visitor sees, and an unstyled
   gate in front of a premium storefront reads as a broken site.
   ============================================================ */
.age-gate__wrapper{
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.age-gate__box,
.age-gate__form{
  border: 1px solid var(--ls-line);
  border-radius: 3px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  position: relative;
  overflow: hidden;
}
/* luminous hairline, the same device that separates sections on the site */
.age-gate__box::before,
.age-gate__form::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ls-azure), transparent);
}

.age-gate__heading,
.age-gate__headline{
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #fff;
}
.age-gate__subheadline{
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ls-azure);
  font-size: 1.05rem;
}
.age-gate__challenge,
.age-gate__additional-information{
  color: var(--ls-mute);
  font-size: .9rem;
  line-height: 1.6;
}

.age-gate__buttons{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
button.age-gate__submit{
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .3s var(--ls-ease), border-color .3s var(--ls-ease), transform .3s var(--ls-ease);
}
/* the affirmative button carries the brand; the exit stays quiet */
button.age-gate__submit--yes{
  background: var(--ls-blue);
  color: #fff;
}
button.age-gate__submit--yes:hover,
button.age-gate__submit--yes:focus{
  background: var(--ls-azure);
  transform: translateY(-2px);
}
button.age-gate__submit--no{
  background: transparent;
  color: var(--ls-text);
  border-color: var(--ls-line);
}
button.age-gate__submit--no:hover,
button.age-gate__submit--no:focus{
  border-color: var(--ls-azure);
  background: rgba(70,166,245,.1);
}

.age-gate__remember{
  color: var(--ls-faint);
  font-size: .82rem;
}
.age-gate__remember input{ accent-color: var(--ls-blue); }

.age-gate__additional-information{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ls-line-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--ls-faint);
}

.age-gate__error{
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(216,163,58,.4);
  background: rgba(216,163,58,.08);
  color: var(--ls-warn);
  border-radius: 2px;
  font-size: .85rem;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible{
  outline: 2px solid var(--ls-azure);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .ls-card,
  .ls-card::before,
  .ls-card__media img,
  .ls-card__media::after,
  .ls-card__btn{
    transition-duration: .01ms !important;
  }
  .ls-card:hover{ transform: none; }
}