/**
 * Lumyra Lab, homepage and theme-part styling.
 *
 * Elementor prints its own document CSS after the theme stylesheet, so the
 * later sections here carry !important deliberately. Removing it hands the
 * layout back to Elementor's generated widget rules.
 *
 * Sections, in cascade order:
 *   1. Tokens and base        design system values, mapped onto Elementor globals
 *   2. Widget skins           heading, text, button and form treatments
 *   3. Bands                  header, hero, kit, routine, story, quote, learn, waitlist, footer
 *   4. Responsive             1024px and 767px steps
 *   5. Widget overrides       brand values Elementor would otherwise reset
 *   6. Reference geometry     exact spacing measured against homepage.html
 *
 * Class naming follows ll-block__element--variant as `lumyra-<block>-<element>`.
 */

:root {
  --lumyra-green: var(--e-global-color-primary, #2c3b2e);
  --lumyra-green-deep: #1f2a21;
  --lumyra-sage: var(--e-global-color-secondary, #7c9473);
  --lumyra-sage-deep: var(--e-global-color-llsage, #5d6f56);
  --lumyra-amber: var(--e-global-color-accent, #c99a4a);
  --lumyra-cream: var(--e-global-color-llcream, #f5f3ec);
  --lumyra-white: #ffffff;
  --lumyra-border: var(--e-global-color-llborde, #e2dfd4);
  --lumyra-border-strong: #9ba69b;
  --lumyra-dur: 180ms;
  --lumyra-muted: #4a5548;
  --lumyra-display: var(--e-global-typography-primary-font-family, "Tenor Sans"), Optima, "Gill Sans", sans-serif;
  --lumyra-body: var(--e-global-typography-text-font-family, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background: var(--lumyra-cream);
  color: var(--lumyra-green);
  font-family: var(--lumyra-body);
}

main#main,
.elementor-location-header,
.elementor-location-footer,
[data-elementor-type="wp-page"] {
  width: 100%;
  max-width: none;
}

.elementor-element.e-con {
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --gap: 0;
}

.elementor-widget-text-editor p,
.elementor-widget-heading .elementor-heading-title {
  margin: 0;
}

.lumyra-display .elementor-heading-title {
  color: var(--lumyra-green);
  font-family: var(--lumyra-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.lumyra-display-xl .elementor-heading-title {
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 1.04;
}

.lumyra-display-lg .elementor-heading-title {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.1;
}

.lumyra-display-md .elementor-heading-title,
.lumyra-card-title .elementor-heading-title {
  color: var(--lumyra-green);
  font-family: var(--lumyra-display);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.2;
}

.lumyra-eyebrow p,
.lumyra-product-number p {
  color: var(--lumyra-sage-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.23em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lumyra-lead p {
  color: var(--lumyra-muted);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 300;
  line-height: 1.68;
}

.lumyra-fine p,
.lumyra-card-copy p {
  color: var(--lumyra-muted);
  font-size: 15px;
  line-height: 1.65;
}

.lumyra-centered-copy {
  max-width: 760px;
  text-align: center;
}

.lumyra-button .elementor-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0;
  display: inline-flex;
  font-family: var(--lumyra-body);
  font-size: 15px;
  font-weight: 500;
  justify-content: center;
  letter-spacing: 0.01em;
  min-height: 54px;
  padding: 14px 30px;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.lumyra-button-green .elementor-button {
  background: var(--lumyra-green);
  color: var(--lumyra-cream);
}

.lumyra-button-green .elementor-button:hover {
  background: var(--lumyra-green-deep);
}

.lumyra-button-gold .elementor-button {
  background: var(--lumyra-amber);
  color: var(--lumyra-green-deep);
}

.lumyra-button-outline .elementor-button {
  background: transparent;
  border-color: var(--lumyra-green);
  color: var(--lumyra-green);
}

.lumyra-button-outline .elementor-button:hover {
  background: var(--lumyra-green);
  color: var(--lumyra-cream);
}

.lumyra-small-button .elementor-button {
  font-size: 11px;
  letter-spacing: 0.2em;
  min-height: 42px;
  padding: 10px 18px;
  text-transform: uppercase;
}

.lumyra-text-link .elementor-button {
  background: transparent;
  border: 0;
  color: var(--lumyra-green);
  font-size: 14px;
  min-height: auto;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.lumyra-native-header {
  background: rgba(245, 243, 236, 0.97);
  border-bottom: 1px solid var(--lumyra-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

body.admin-bar .lumyra-native-header {
  top: 32px;
}

.lumyra-header-inner {
  align-items: center;
  display: flex !important;
  gap: 36px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
  min-height: 96px;
  padding: 14px 28px !important;
}

.lumyra-header-brand {
  flex: 0 0 auto;
  gap: 1px;
  width: auto;
}

.lumyra-wordmark-native .elementor-heading-title,
.lumyra-footer-wordmark .elementor-heading-title {
  color: var(--lumyra-green);
  font-family: var(--lumyra-body);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}

.lumyra-brand-tag p {
  color: var(--lumyra-sage-deep);
  font-size: 9px;
  letter-spacing: 0.32em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lumyra-header-nav {
  flex: 1 1 auto;
}

.lumyra-header-nav .elementor-nav-menu {
  justify-content: center;
}

.lumyra-header-nav .elementor-item {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body);
  font-size: 15px;
  padding: 12px 16px !important;
}

.lumyra-header-nav .elementor-item::after {
  background-color: var(--lumyra-amber) !important;
}

.lumyra-header-cta {
  flex: 0 0 auto;
  width: auto;
}

.lumyra-header-cta .elementor-button {
  min-height: 48px;
  padding: 12px 25px;
}

.lumyra-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  min-height: 670px;
  overflow: hidden;
}

.lumyra-hero-copy {
  align-items: flex-start;
  background: var(--lumyra-sunken);
  display: flex !important;
  gap: 25px;
  justify-content: center;
  padding: 80px max(36px, 8vw) !important;
}

.lumyra-hero-copy .lumyra-lead {
  max-width: 620px;
}

.lumyra-hero-media,
.lumyra-hero-video,
.lumyra-hero-video .elementor-widget-container,
.lumyra-hero-video .elementor-wrapper,
.lumyra-hero-video video {
  height: 100%;
  min-height: 670px;
  width: 100%;
}

.lumyra-hero-video video {
  object-fit: cover;
}

.lumyra-section {
  align-items: center;
  display: flex !important;
  gap: 24px;
  padding: 110px 40px !important;
}

.lumyra-section > .elementor-element {
  width: 100%;
}

.lumyra-kit {
  background: var(--lumyra-cream);
  text-align: center;
}

.lumyra-kit-image {
  margin: 24px auto 8px;
  max-width: 1060px;
}

.lumyra-kit-image img {
  aspect-ratio: 16 / 8;
  object-fit: cover;
  width: 100%;
}

.lumyra-products {
  background: var(--lumyra-cream);
  text-align: center;
}

.lumyra-product-grid {
  display: grid !important;
  gap: 20px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 28px auto 24px;
  max-width: 1240px;
  text-align: left;
}

.lumyra-product-card {
  background: var(--lumyra-white);
  border: 1px solid var(--lumyra-border);
  display: flex !important;
  gap: 12px;
  padding: 0 18px 22px !important;
}

.lumyra-product-image {
  margin: 0 -18px 10px;
  width: calc(100% + 36px) !important;
}

.lumyra-product-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.lumyra-product-card .lumyra-card-title .elementor-heading-title {
  font-size: 25px;
}

.lumyra-product-card .lumyra-small-button {
  margin-top: auto;
  width: auto;
}

.lumyra-retinol {
  align-items: center;
  background: var(--lumyra-white);
  display: grid !important;
  gap: 52px;
  grid-template-columns: minmax(260px, 35%) 1fr;
  margin: 32px auto 0;
  max-width: 1120px;
  padding: 32px !important;
  text-align: left;
}

.lumyra-retinol-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.lumyra-retinol-copy {
  align-items: flex-start;
  display: flex !important;
  gap: 20px;
}

.lumyra-routine {
  background: var(--lumyra-cream);
  text-align: center;
}

.lumyra-routine-grid {
  display: grid !important;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 28px auto 12px;
  max-width: 1080px;
  text-align: left;
}

.lumyra-routine-card {
  background: var(--lumyra-white);
  border: 1px solid var(--lumyra-border);
  display: flex !important;
  gap: 20px;
  min-height: 280px;
  padding: 42px !important;
}

.lumyra-story {
  align-items: stretch;
  background: var(--lumyra-sunken);
  display: grid !important;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 !important;
  text-align: left;
}

.lumyra-story-image,
.lumyra-story-image .elementor-widget-container,
.lumyra-story-image img {
  height: 100%;
  width: 100%;
}

.lumyra-story-image img {
  min-height: 620px;
  object-fit: cover;
}

.lumyra-story-copy {
  align-items: flex-start;
  display: flex !important;
  gap: 24px;
  justify-content: center;
  padding: 80px max(48px, 8vw) !important;
}

.lumyra-quote {
  align-items: center;
  background: var(--lumyra-green);
  display: flex !important;
  gap: 24px;
  padding: 100px 28px !important;
  text-align: center;
}

.lumyra-quote .lumyra-display {
  max-width: 660px;
}

.lumyra-quote .elementor-heading-title {
  color: var(--lumyra-cream);
}

.lumyra-quote .lumyra-eyebrow p {
  color: var(--lumyra-sage-light);
}

.lumyra-learn {
  background: var(--lumyra-cream);
  text-align: center;
}

.lumyra-article-grid {
  display: grid !important;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px auto 16px;
  max-width: 1160px;
  text-align: left;
}

.lumyra-article-card {
  align-items: flex-start;
  display: flex !important;
  gap: 14px;
}

.lumyra-article-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.lumyra-article-card .lumyra-card-title .elementor-heading-title {
  font-size: 28px;
}

.lumyra-waitlist {
  align-items: center;
  background: var(--lumyra-green);
  display: flex !important;
  gap: 22px;
  padding: 100px 28px !important;
  text-align: center;
}

.lumyra-waitlist .elementor-heading-title,
.lumyra-waitlist .lumyra-lead p,
.lumyra-waitlist .lumyra-fine p {
  color: var(--lumyra-cream);
}

.lumyra-waitlist .lumyra-eyebrow p {
  color: var(--lumyra-sage-light);
}

.lumyra-native-form {
  margin-top: 8px;
  max-width: 760px;
  width: 100%;
}

.lumyra-native-form .elementor-form-fields-wrapper {
  align-items: flex-end;
}

.lumyra-native-form .elementor-field-label {
  color: var(--lumyra-cream);
  font-size: 13px;
  text-align: left;
}

.lumyra-native-form .elementor-field {
  background: transparent;
  border: 1px solid var(--lumyra-secondary);
  border-radius: 0;
  color: var(--lumyra-cream);
  min-height: 54px;
}

.lumyra-native-form .elementor-field::placeholder {
  color: var(--lumyra-sage-light);
}

.lumyra-native-form .elementor-button {
  background: var(--lumyra-amber);
  border-radius: 0;
  color: var(--lumyra-green-deep);
  min-height: 54px;
  width: 100%;
}

.lumyra-native-form .elementor-field-type-acceptance {
  color: var(--lumyra-cream);
  text-align: left;
}

.lumyra-native-footer {
  background: var(--lumyra-green-deep);
  color: var(--lumyra-cream);
  padding: 74px 40px 22px !important;
}

.lumyra-footer-columns {
  display: grid !important;
  gap: 50px;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1.1fr;
  margin: 0 auto;
  max-width: 1160px;
}

.lumyra-footer-column {
  align-items: flex-start;
  display: flex !important;
  gap: 16px;
}

.lumyra-footer-wordmark .elementor-heading-title,
.lumyra-footer-title .elementor-heading-title {
  color: var(--lumyra-cream);
}

.lumyra-footer-title .elementor-heading-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lumyra-footer-copy p,
.lumyra-footer-fine p {
  color: var(--lumyra-text-on-dark);
  font-size: 14px;
  line-height: 1.7;
}

.lumyra-footer-links .elementor-icon-list-icon {
  display: none;
}

.lumyra-footer-links .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lumyra-footer-links .elementor-icon-list-text {
  color: var(--lumyra-text-on-dark);
  font-size: 14px;
}

.lumyra-native-form-compact .elementor-form-fields-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lumyra-footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  margin: 56px auto 0;
  max-width: 1160px;
  padding-top: 20px !important;
}

@media (max-width: 1024px) {
  .lumyra-header-inner {
    gap: 16px;
  }

  .lumyra-header-nav .elementor-item {
    padding: 12px 9px !important;
  }

  .lumyra-hero {
    grid-template-columns: 1fr 1fr;
  }

  .lumyra-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lumyra-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.admin-bar .lumyra-native-header {
    top: 46px;
  }

  .lumyra-header-inner {
    min-height: 96px;
    padding: 14px 20px !important;
  }

  .lumyra-header-brand {
    max-width: 170px;
  }

  .lumyra-header-nav {
    flex: 0 0 auto;
    order: 3;
    width: auto;
  }

  /* 44px is the tap target floor, section 02 of the handoff. The icon itself
     is smaller than that, so the box is held open around it. */
  .lumyra-header-nav .elementor-menu-toggle {
    align-items: center;
    background: transparent;
    color: var(--lumyra-green);
    display: flex;
    font-size: 25px;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 8px;
  }

  .lumyra-header-nav .elementor-nav-menu--dropdown {
    background: var(--lumyra-cream);
    left: 0;
    position: absolute;
    right: 0;
    top: 96px;
  }

  .lumyra-header-cta {
    display: none;
  }

  .lumyra-hero {
    display: flex !important;
    flex-direction: column;
    min-height: auto;
  }

  .lumyra-hero-copy {
    min-height: 620px;
    padding: 72px 20px 52px !important;
  }

  .lumyra-hero-media,
  .lumyra-hero-video,
  .lumyra-hero-video .elementor-widget-container,
  .lumyra-hero-video .elementor-wrapper,
  .lumyra-hero-video video {
    min-height: 420px;
  }

  .lumyra-section {
    padding: 78px 20px !important;
  }

  .lumyra-product-grid,
  .lumyra-routine-grid,
  .lumyra-article-grid,
  .lumyra-story,
  .lumyra-retinol {
    grid-template-columns: 1fr;
  }

  .lumyra-product-grid {
    max-width: 430px;
  }

  .lumyra-retinol {
    gap: 28px;
    padding: 20px !important;
  }

  .lumyra-routine-card {
    min-height: auto;
    padding: 30px !important;
  }

  .lumyra-story-image img {
    min-height: 420px;
  }

  .lumyra-story-copy {
    padding: 64px 20px !important;
  }

  .lumyra-quote,
  .lumyra-waitlist {
    padding: 78px 20px !important;
  }

  .lumyra-native-form .elementor-field-group,
  .lumyra-native-form .elementor-field-type-submit {
    width: 100% !important;
  }

  .lumyra-native-footer {
    padding: 60px 20px 24px !important;
  }

  .lumyra-footer-columns {
    grid-template-columns: 1fr;
  }

  .lumyra-footer-base {
    align-items: flex-start;
    flex-direction: column !important;
    gap: 8px;
  }
}

@media (max-width: 782px) {
  body.admin-bar .lumyra-native-header {
    top: 46px;
  }
}

/* Elementor loads document-level styles after theme styles. These explicit
   brand overrides keep the native widgets aligned with the Lumyra system. */
body .lumyra-display .elementor-heading-title,
body .lumyra-card-title .elementor-heading-title {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-weight: 400 !important;
}

body .lumyra-wordmark-native .elementor-heading-title,
body .lumyra-footer-wordmark .elementor-heading-title {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body) !important;
  font-weight: 500 !important;
}

body .lumyra-eyebrow p,
body .lumyra-product-number p,
body .lumyra-brand-tag p {
  font-family: var(--lumyra-body) !important;
}
body .lumyra-button .elementor-button {
  border-radius: 0 !important;
  font-family: var(--lumyra-body) !important;
}

body .lumyra-button-green .elementor-button {
  background: var(--lumyra-green) !important;
  color: var(--lumyra-cream) !important;
}

body .lumyra-button-gold .elementor-button {
  background: var(--lumyra-amber) !important;
  color: var(--lumyra-green-deep) !important;
}

body .lumyra-button-outline .elementor-button {
  background: transparent !important;
  border-color: var(--lumyra-green) !important;
  color: var(--lumyra-green) !important;
}

body .lumyra-text-link .elementor-button {
  background: transparent !important;
  color: var(--lumyra-green) !important;
}

body .lumyra-native-form .elementor-button {
  background: var(--lumyra-amber) !important;
  border-radius: 0 !important;
  color: var(--lumyra-green-deep) !important;
}

body .lumyra-header-inner {
  flex-wrap: nowrap !important;
}

body .lumyra-header-inner > .elementor-element {
  width: auto;
}

body .lumyra-header-nav {
  flex: 1 1 auto !important;
  min-width: 0;
}

body .lumyra-header-nav .elementor-nav-menu {
  flex-wrap: nowrap;
}

body .lumyra-header-nav .elementor-item {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body) !important;
  font-weight: 400 !important;
  white-space: nowrap;
}

body .lumyra-header-cta {
  align-self: center;
  flex: 0 0 auto !important;
}

body .lumyra-quote .elementor-heading-title,
body .lumyra-waitlist .elementor-heading-title,
body .lumyra-footer-wordmark .elementor-heading-title,
body .lumyra-footer-title .elementor-heading-title {
  color: var(--lumyra-cream) !important;
}
body .lumyra-native-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

body.admin-bar .lumyra-native-header {
  top: 32px !important;
}

body .lumyra-header-inner {
  align-items: center !important;
}

@media (max-width: 782px) {
  body.admin-bar .lumyra-native-header {
    top: 46px !important;
  }
}

/* Reference-fidelity layer: mirrors the supplied homepage.html design system. */
:root {
  --lumyra-surface: var(--e-global-color-llcream, #f5f3ec);
  --lumyra-raised: #ffffff;
  --lumyra-sunken: #eeebe0;
  --lumyra-green: var(--e-global-color-primary, #2c3b2e);
  --lumyra-green-dark: #1f2a21;
  --lumyra-green-800: #263323;
  --lumyra-green-mid: #4f6650;
  --lumyra-secondary: var(--e-global-color-secondary, #7c9473);
  --lumyra-sage: var(--e-global-color-llsage, #5d6f56);
  --lumyra-sage-light: #b4c2ae;
  --lumyra-amber: var(--e-global-color-accent, #c99a4a);
  --lumyra-amber-dark: var(--e-global-color-llamber, #826430);
  --lumyra-text-muted: #4a5548;
  --lumyra-text-on-dark: #d4d1c4;
  --lumyra-gray: #9ba69b;
  --lumyra-err: #8c3a2e;
  --lumyra-border: var(--e-global-color-llborde, #e2dfd4);
  --lumyra-display: var(--e-global-typography-primary-font-family, "Tenor Sans"), Optima, "Gill Sans", sans-serif;
  --lumyra-body: var(--e-global-typography-text-font-family, "Inter"), -apple-system, "Segoe UI", Roboto, sans-serif;
  --lumyra-mono: var(--e-global-typography-llmono0-font-family, "IBM Plex Mono"), ui-monospace, Menlo, monospace;
  /* Commerce component tokens: all WooCommerce surfaces resolve through the
     brand's semantic palette instead of inheriting the plugin defaults. */
  --lumyra-commerce-bg: var(--lumyra-raised);
  --lumyra-commerce-border: var(--lumyra-border);
  --lumyra-commerce-border-active: var(--lumyra-green-mid);
  --lumyra-commerce-text: var(--lumyra-green);
  --lumyra-commerce-muted: var(--lumyra-text-muted);
  --lumyra-commerce-danger: var(--lumyra-err);
  --lumyra-commerce-radius: 2px;
  --lumyra-commerce-field-height: 54px;
  --lumyra-commerce-space-sm: 12px;
  --lumyra-commerce-space-md: 24px;
  --lumyra-commerce-space-lg: 40px;
}

body {
  background: var(--lumyra-surface) !important;
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 17px;
  line-height: 1.7;
}

body .lumyra-native-header {
  background: var(--lumyra-surface) !important;
  border-bottom: 1px solid var(--lumyra-border) !important;
}

body .lumyra-header-inner {
  gap: 32px !important;
  justify-content: space-between !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  min-height: 96px;
  padding: 24px 40px !important;
  width: 100% !important;
}

body .lumyra-header-brand {
  flex: 0 0 auto !important;
  width: auto !important;
}

body .lumyra-wordmark-native .elementor-heading-title {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
}

body .lumyra-wordmark-native .lumyra-lab-mark,
body .lumyra-footer-wordmark .lumyra-lab-mark {
  color: var(--lumyra-sage) !important;
  font-weight: 300 !important;
}

body .lumyra-brand-tag p {
  color: var(--lumyra-sage) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.42em !important;
  line-height: 1 !important;
  margin-top: 7px !important;
}

body .lumyra-header-nav {
  flex: 1 1 auto !important;
  width: auto !important;
}

body .lumyra-header-nav .elementor-nav-menu {
  gap: 32px !important;
  justify-content: center !important;
}

body .lumyra-header-nav .elementor-item {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 4px 0 !important;
}

body .lumyra-header-cta {
  flex: 0 0 auto !important;
  width: auto !important;
}

body .lumyra-header-cta .elementor-button {
  min-height: 46px !important;
  padding: 0 24px !important;
}

body .lumyra-hero {
  background: var(--lumyra-sunken) !important;
  border-bottom: 1px solid var(--lumyra-border) !important;
  display: block !important;
  min-height: 704px !important;
  overflow: hidden !important;
  position: relative !important;
}

body .lumyra-hero-media {
  height: 100% !important;
  inset: 0 !important;
  position: absolute !important;
  width: 100% !important;
  z-index: 0 !important;
}

body .lumyra-hero-video,
body .lumyra-hero-video .elementor-widget-container,
body .lumyra-hero-video .e-hosted-video,
body .lumyra-hero-video .elementor-wrapper {
  height: 100% !important;
  width: 100% !important;
}

body .lumyra-hero-video video {
  height: 100% !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* The hosted film carries no poster frame, so an unloaded <video> paints solid
   black straight over the hero copy until the first frame arrives, which on
   shared hosting is long enough to read as a broken page. The still behind it
   is what the reference used as poster="", and it also covers the case where
   the film never loads at all. */
body .lumyra-hero-video video {
  background: var(--lumyra-sunken) url("../images/editorial/catalogue-placeholders/hero-complete-kit-catalogue.webp") center / cover no-repeat;
}

body .lumyra-hero-copy {
  align-items: flex-start !important;
  margin: 0 auto !important;
  min-height: 704px !important;
  padding: 128px max(40px, calc((100vw - 1200px) / 2 + 40px)) !important;
  position: relative !important;
  width: 100% !important;
  z-index: 1 !important;
}

body .lumyra-eyebrow p,
body .lumyra-track-label p {
  color: var(--lumyra-sage) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
}

body .lumyra-hero-copy .lumyra-display-xl {
  margin: 16px 0 24px !important;
  max-width: 760px !important;
}

body .lumyra-display-xl .elementor-heading-title {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  max-width: 13ch !important;
}

body .lumyra-display-lg .elementor-heading-title {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
}

body .lumyra-display-md .elementor-heading-title,
body .lumyra-card-title .elementor-heading-title {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

body .lumyra-lead p {
  color: var(--lumyra-text-muted) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.62 !important;
}

body .lumyra-body-copy p,
body .lumyra-card-copy p,
body .lumyra-story-points,
body .lumyra-track-note p,
body .lumyra-waitlist-open p {
  color: var(--lumyra-text-muted) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

body .lumyra-hero-copy > .lumyra-lead {
  margin-bottom: 48px !important;
  max-width: 50ch !important;
}

body .lumyra-fine p {
  color: var(--lumyra-text-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body .lumyra-hero-copy > .lumyra-fine {
  margin-top: 24px !important;
}

body .lumyra-button {
  align-self: flex-start !important;
  width: auto !important;
}

body .lumyra-button .elementor-button {
  align-items: center !important;
  border: 1.5px solid transparent !important;
  border-radius: 2px !important;
  display: inline-flex !important;
  font-family: var(--lumyra-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  justify-content: center !important;
  letter-spacing: 0.03em !important;
  min-height: 56px !important;
  padding: 0 32px !important;
}

body .lumyra-button-green .elementor-button {
  background: var(--lumyra-green) !important;
  color: var(--lumyra-surface) !important;
}

body .lumyra-button-gold .elementor-button {
  background: var(--lumyra-amber) !important;
  color: var(--lumyra-green) !important;
}

body .lumyra-button-outline .elementor-button {
  background: transparent !important;
  border-color: var(--lumyra-green) !important;
  color: var(--lumyra-green) !important;
}

body .lumyra-button-sm .elementor-button {
  font-size: 15px !important;
  min-height: 46px !important;
  padding: 0 24px !important;
}

body .lumyra-section {
  gap: 0 !important;
  max-width: none !important;
  padding: 96px max(40px, calc((100vw - 1200px) / 2 + 40px)) !important;
  width: 100% !important;
}

body .lumyra-centered {
  align-items: center !important;
  margin: 0 auto 48px !important;
  max-width: 680px !important;
  text-align: center !important;
  width: 100% !important;
}

body .lumyra-centered > .lumyra-eyebrow {
  margin-top: 12px !important;
}

body .lumyra-centered .lumyra-centered-copy p {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

body .lumyra-centered .lumyra-display-lg {
  margin-top: 12px !important;
}

body .lumyra-centered-copy {
  margin-top: 12px !important;
  max-width: 680px !important;
}

body .lumyra-centered-copy p {
  text-align: center !important;
}

body .lumyra-product-grid {
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
}

/* Product cards already have a white surface and hairline border. Keep their
   section on the page cream everywhere instead of drawing a second darker
   panel behind the grid. This covers home, Products and every product page. */
body .lumyra-products {
  background: var(--lumyra-cream) !important;
}

body .lumyra-product-card {
  background: var(--lumyra-raised) !important;
  border: 1px solid var(--lumyra-border) !important;
  display: flex !important;
  min-width: 0 !important;
  width: auto !important;
}

body .lumyra-product-image {
  border-bottom: 1px solid var(--lumyra-border) !important;
  width: 100% !important;
}

body .lumyra-product-image a,
body .lumyra-product-image img {
  aspect-ratio: 4 / 5 !important;
  display: block !important;
  height: auto !important;
  object-fit: cover !important;
  width: 100% !important;
}

body .lumyra-product-number {
  margin: 24px 16px 0 !important;
}

body .lumyra-product-number p {
  color: var(--lumyra-amber-dark) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 14px !important;
  letter-spacing: 0.2em !important;
  line-height: 1.4 !important;
}

body .lumyra-product-card .lumyra-card-title {
  margin: 4px 16px 8px !important;
}

body .lumyra-product-card .lumyra-card-title .elementor-heading-title {
  font-size: 22px !important;
  line-height: 1.22 !important;
}

body .lumyra-product-card .lumyra-card-copy {
  flex: 1 1 auto !important;
  margin: 0 16px 16px !important;
}

body .lumyra-product-card .lumyra-card-copy p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body .lumyra-product-card .lumyra-small-button {
  margin: 0 16px 24px !important;
}

body .lumyra-small-button .elementor-button {
  background: var(--lumyra-surface) !important;
  border: 1px solid var(--lumyra-gray) !important;
  color: var(--lumyra-green) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  min-height: auto !important;
  padding: 4px 12px !important;
  text-transform: uppercase !important;
}

body .lumyra-retinol {
  align-items: center !important;
  background: var(--lumyra-raised) !important;
  border: 1px solid var(--lumyra-border) !important;
  display: grid !important;
  gap: 48px !important;
  grid-template-columns: 230px minmax(0, 1fr) !important;
  margin-top: 48px !important;
  padding: 32px !important;
  width: 100% !important;
}

body .lumyra-retinol-image {
  width: 230px !important;
}

body .lumyra-retinol-image img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
}

body .lumyra-retinol-copy {
  align-items: flex-start !important;
  width: 100% !important;
}

body .lumyra-retinol-copy .lumyra-display-md {
  margin: 12px 0 !important;
}

body .lumyra-retinol-copy .lumyra-body-copy {
  margin-bottom: 24px !important;
  max-width: 52ch !important;
}

body .lumyra-retinol-actions {
  align-items: center !important;
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 12px !important;
  width: 100% !important;
}

body .lumyra-retinol-actions > .elementor-widget-button {
  width: auto !important;
}

/* Cream, not sunken. The band drew a second beige panel behind two cards that
   already carry their own hairline border, so the cards read as boxes inside a
   box. The border is what separates them from the page; the panel was doing
   the same job twice. */
body .lumyra-routine {
  background: var(--lumyra-cream) !important;
  align-items: center !important;
}

body .lumyra-routine-grid {
  display: grid !important;
  gap: 48px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body .lumyra-routine-card {
  background: var(--lumyra-raised) !important;
  border: 1px solid var(--lumyra-border) !important;
  padding: 32px !important;
  width: auto !important;
}

body .lumyra-track-header {
  align-items: center !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

body .lumyra-routine-icon {
  flex: 0 0 auto !important;
  width: auto !important;
}

body .lumyra-track-label {
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto !important;
}

body .lumyra-routine-row {
  align-items: baseline !important;
  border-bottom: 1px solid var(--lumyra-border) !important;
  flex-direction: row !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  width: 100% !important;
}

body .lumyra-routine-row:last-child {
  border-bottom: 0 !important;
}

body .lumyra-routine-number {
  flex: 0 0 44px !important;
  width: 44px !important;
}

body .lumyra-routine-number p {
  color: var(--lumyra-amber-dark) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 24px !important;
  letter-spacing: 0.1em !important;
}

body .lumyra-routine-name {
  flex: 1 1 auto !important;
  width: auto !important;
}

body .lumyra-routine-name p {
  color: var(--lumyra-green) !important;
  font-size: 17px !important;
}

body .lumyra-track-note {
  margin-top: 24px !important;
}

body .lumyra-track-note p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body .lumyra-routine > .lumyra-button {
  align-self: center !important;
  margin-top: 48px !important;
}

body .lumyra-story {
  align-items: center !important;
  background: var(--lumyra-surface) !important;
  display: grid !important;
  gap: 96px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body .lumyra-story-image {
  width: 100% !important;
}

body .lumyra-story-image img {
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  width: 100% !important;
}

body .lumyra-story-copy {
  align-items: flex-start !important;
  width: 100% !important;
}

body .lumyra-story-copy .lumyra-display-lg {
  margin: 12px 0 24px !important;
}

body .lumyra-story-points ul {
  margin: 24px 0 32px !important;
  padding-left: 20px !important;
}

body .lumyra-story-points li {
  color: var(--lumyra-text-muted) !important;
  margin-bottom: 12px !important;
}

body .lumyra-text-link {
  align-self: flex-start !important;
  width: auto !important;
}

body .lumyra-text-link .elementor-button {
  background: transparent !important;
  color: var(--lumyra-sage) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  min-height: auto !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
}

/* The direct address on the contact page. Colour comes from the kit's link
   global, but colour is never the only signal, so the underline is pinned here
   rather than left to whatever Elementor's reset does to an inline anchor. */
body .lumyra-contact-direct a {
  color: var(--lumyra-sage) !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
}

body .lumyra-contact-direct {
  margin-top: 24px !important;
}

body .lumyra-quote {
  align-items: center !important;
  background: var(--lumyra-green) !important;
  color: var(--lumyra-surface) !important;
  padding: 96px 40px !important;
  text-align: center !important;
  width: 100% !important;
}

body .lumyra-quote .lumyra-display-lg {
  max-width: 18ch !important;
}

body .lumyra-quote .lumyra-display-lg .elementor-heading-title {
  color: var(--lumyra-surface) !important;
  font-size: 36px !important;
  line-height: 1.35 !important;
}

body .lumyra-quote .lumyra-eyebrow {
  margin-top: 24px !important;
}

body .lumyra-quote .lumyra-eyebrow p {
  color: var(--lumyra-sage-light) !important;
}

body .lumyra-learn {
  align-items: center !important;
}

body .lumyra-article-grid {
  display: grid !important;
  gap: 32px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body .lumyra-article-card {
  align-items: flex-start !important;
  width: auto !important;
}

body .lumyra-article-image,
body .lumyra-article-image a {
  width: 100% !important;
}

body .lumyra-article-image img {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  width: 100% !important;
}

body .lumyra-article-card .lumyra-eyebrow {
  margin-top: 16px !important;
}

body .lumyra-article-card .lumyra-eyebrow p {
  font-size: 11px !important;
}

body .lumyra-article-card .lumyra-card-title {
  flex: 1 1 auto !important;
  margin: 8px 0 !important;
}

body .lumyra-article-card .lumyra-card-title .elementor-heading-title {
  font-size: 23px !important;
  line-height: 1.25 !important;
}

body .lumyra-article-card .lumyra-card-copy {
  margin-bottom: 12px !important;
}

body .lumyra-article-card .lumyra-card-copy p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body .lumyra-learn > .lumyra-button {
  align-self: center !important;
  margin-top: 48px !important;
}

body .lumyra-waitlist {
  align-items: center !important;
  background: var(--lumyra-green) !important;
  color: var(--lumyra-surface) !important;
  padding: 96px max(20px, calc((100vw - 650px) / 2)) !important;
  text-align: center !important;
  width: 100% !important;
}

body .lumyra-waitlist .lumyra-eyebrow p {
  color: var(--lumyra-sage-light) !important;
}

body .lumyra-waitlist .lumyra-display-lg {
  margin: 16px 0 12px !important;
}

body .lumyra-waitlist .lumyra-display-lg .elementor-heading-title {
  color: var(--lumyra-surface) !important;
}

body .lumyra-waitlist .lumyra-centered-copy,
body .lumyra-waitlist .lumyra-waitlist-open {
  margin-bottom: 24px !important;
  max-width: 650px !important;
}

body .lumyra-waitlist .lumyra-centered-copy p,
body .lumyra-waitlist .lumyra-waitlist-open p {
  color: var(--lumyra-text-on-dark) !important;
  text-align: center !important;
}

body .lumyra-native-form {
  max-width: 650px !important;
  text-align: left !important;
  width: 100% !important;
}

body .lumyra-native-form .elementor-form-fields-wrapper {
  align-items: flex-end !important;
}

body .lumyra-native-form .elementor-field-label {
  color: var(--lumyra-surface) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

/* Cream on transparent is the dark waitlist band's treatment. The attribute
   selector made this outweigh the contact form's own field rule, so the contact
   Email address field was rendering cream text on the cream page and anything
   typed into it was invisible. Scoped out, the same way the acceptance and
   email-group rules further down already are. */
body .lumyra-native-form:not(.lumyra-contact-form) input[type="email"] {
  background: transparent !important;
  border: 1.5px solid var(--lumyra-green-mid) !important;
  border-radius: 2px !important;
  color: var(--lumyra-surface) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 17px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
}

body .lumyra-native-form .elementor-button {
  background: var(--lumyra-amber) !important;
  border: 1.5px solid transparent !important;
  border-radius: 2px !important;
  color: var(--lumyra-green) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  min-height: 56px !important;
}

body .lumyra-native-form .elementor-field-type-acceptance {
  margin-top: 16px !important;
}

body .lumyra-native-form .elementor-field-type-acceptance label {
  color: var(--lumyra-text-on-dark) !important;
  font-size: 15px !important;
}

body .lumyra-native-form input[type="checkbox"] {
  accent-color: var(--lumyra-amber) !important;
  height: 24px !important;
  margin-right: 12px !important;
  width: 24px !important;
}

body .lumyra-waitlist > .lumyra-fine {
  margin-top: 24px !important;
}

body .lumyra-waitlist > .lumyra-fine p {
  color: var(--lumyra-gray) !important;
  text-align: center !important;
}

body .lumyra-native-footer {
  background: var(--lumyra-green-dark) !important;
  color: var(--lumyra-text-on-dark) !important;
  padding: 64px max(40px, calc((100vw - 1200px) / 2 + 40px)) 24px !important;
  width: 100% !important;
}

body .lumyra-footer-columns {
  display: grid !important;
  gap: 48px !important;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr !important;
  width: 100% !important;
}

body .lumyra-footer-column {
  width: auto !important;
}

body .lumyra-footer-wordmark .elementor-heading-title {
  color: var(--lumyra-surface) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 23px !important;
  font-weight: 500 !important;
}

body .lumyra-native-footer .lumyra-brand-tag p,
body .lumyra-footer-copy p,
body .lumyra-footer-fine p {
  color: var(--lumyra-gray) !important;
}

body .lumyra-footer-copy {
  margin-top: 16px !important;
  max-width: 270px !important;
}

body .lumyra-footer-copy p,
body .lumyra-footer-links .elementor-icon-list-text {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body .lumyra-footer-title .elementor-heading-title {
  color: var(--lumyra-sage-light) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

body .lumyra-footer-links .elementor-icon-list-item {
  padding: 4px 0 !important;
}

body .lumyra-footer-links .elementor-icon-list-text {
  color: var(--lumyra-text-on-dark) !important;
}

body .lumyra-native-form-compact input[type="email"] {
  min-height: 48px !important;
}

body .lumyra-native-form-compact .elementor-button {
  background: transparent !important;
  border-color: var(--lumyra-surface) !important;
  color: var(--lumyra-surface) !important;
  min-height: 46px !important;
  margin-top: 12px !important;
}

body .lumyra-footer-base {
  border-top: 1px solid var(--lumyra-green-800) !important;
  justify-content: space-between !important;
  margin-top: 64px !important;
  padding-top: 16px !important;
  width: 100% !important;
}

body .lumyra-footer-fine p {
  /* Section 2 rule 4: body text never below 15px, footer included. */
  font-size: 15px !important;
}

@media (max-width: 1199px) {
  body .lumyra-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  body .lumyra-display-xl .elementor-heading-title {
    font-size: 48px !important;
  }

  body .lumyra-display-lg .elementor-heading-title {
    font-size: 36px !important;
  }

  body .lumyra-lead p {
    font-size: 19px !important;
  }

  body .lumyra-story,
  body .lumyra-routine-grid,
  body .lumyra-article-grid {
    gap: 32px !important;
  }
}

@media (max-width: 899px) {
  body .lumyra-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .lumyra-retinol {
    gap: 24px !important;
    grid-template-columns: 1fr !important;
    padding: 24px !important;
  }

  body .lumyra-retinol-image {
    max-width: 200px !important;
    width: 100% !important;
  }

  body .lumyra-routine-grid,
  body .lumyra-story,
  body .lumyra-article-grid {
    grid-template-columns: 1fr !important;
  }

  body .lumyra-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  body .lumyra-header-inner {
    gap: 12px !important;
    min-height: 86px !important;
    padding: 20px !important;
  }

  body .lumyra-header-brand {
    order: 1 !important;
  }

  body .lumyra-header-nav {
    flex: 0 0 48px !important;
    order: 3 !important;
    width: 48px !important;
  }

  body .lumyra-header-cta {
    display: block !important;
    order: 2 !important;
  }

  body .lumyra-header-cta .elementor-button {
    font-size: 14px !important;
    min-height: 46px !important;
    padding: 0 16px !important;
  }

  body .lumyra-hero,
  body .lumyra-hero-copy {
    min-height: 620px !important;
  }

  body .lumyra-hero-copy {
    padding: 64px 20px !important;
  }

  body .lumyra-display-xl .elementor-heading-title {
    font-size: 36px !important;
  }

  body .lumyra-display-lg .elementor-heading-title {
    font-size: 29px !important;
  }

  body .lumyra-display-md .elementor-heading-title {
    font-size: 24px !important;
  }

  body .lumyra-lead p {
    font-size: 18px !important;
  }

  body .lumyra-section {
    padding: 64px 20px !important;
  }

  body .lumyra-product-grid {
    gap: 16px !important;
  }

  body .lumyra-product-card .lumyra-card-title .elementor-heading-title {
    font-size: 19px !important;
  }

  body .lumyra-retinol-actions,
  body .lumyra-retinol-actions > .elementor-widget-button {
    align-items: stretch !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  body .lumyra-retinol-actions .elementor-button {
    width: 100% !important;
  }

  body .lumyra-routine-card {
    padding: 24px !important;
  }

  body .lumyra-story {
    gap: 32px !important;
  }

  body .lumyra-quote {
    padding: 64px 20px !important;
  }

  body .lumyra-quote .lumyra-display-lg .elementor-heading-title {
    font-size: 26px !important;
  }

  body .lumyra-waitlist {
    padding: 64px 20px !important;
  }

  body .lumyra-native-form .elementor-field-type-email,
  body .lumyra-native-form .e-form__buttons {
    width: 100% !important;
  }

  body .lumyra-native-footer {
    padding: 64px 20px 24px !important;
  }

  body .lumyra-footer-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   38. Coming-soon hero

   The launch hero uses a neutral brand-colour composition while manufacturer
   renders are pending. No unverified bottle photography is shown publicly.
   The inline form confirms success in place so the visitor never loses the
   context of the homepage.
   --------------------------------------------------------------------------- */

body .lumyra-hero {
  background:
    radial-gradient(circle at 82% 18%, rgb(201 154 74 / 24%), transparent 32%),
    radial-gradient(circle at 65% 86%, rgb(124 148 115 / 25%), transparent 38%),
    linear-gradient(135deg, var(--lumyra-surface) 0%, var(--lumyra-sunken) 100%) !important;
  isolation: isolate;
  min-height: clamp(620px, 78vh, 820px);
  overflow: hidden;
  position: relative;
}

body .lumyra-hero::after {
  border: 1px solid rgb(44 59 46 / 12%);
  border-radius: 50%;
  content: "";
  height: min(42vw, 620px);
  pointer-events: none;
  position: absolute;
  right: -12%;
  top: 8%;
  width: min(42vw, 620px);
  z-index: 0;
}

body .lumyra-hero-media {
  display: none !important;
}

body .lumyra-hero-copy {
  background: rgb(245 243 236 / 84%) !important;
  border-block: 1px solid rgb(44 59 46 / 12%);
  border-inline: 0;
  box-shadow: none;
  gap: 18px !important;
  margin: 0 !important;
  max-width: none !important;
  padding: clamp(56px, 7vw, 104px) max(24px, calc((100vw - 1200px) / 2 + 40px)) !important;
  width: 100% !important;
  z-index: 2 !important;
}

body .lumyra-hero-copy > .elementor-element:not(.lumyra-hero-form) {
  max-width: 760px !important;
  width: 100% !important;
}

body .lumyra-hero-form {
  max-width: 620px !important;
  width: 100% !important;
}

body .lumyra-hero-form .lumyra-native-form .elementor-field-label,
body .lumyra-hero-form .lumyra-native-form .elementor-field-type-acceptance {
  color: var(--lumyra-green) !important;
}

body .lumyra-hero-form .lumyra-native-form .elementor-field:not([type="checkbox"]) {
  background: rgb(255 255 255 / 78%) !important;
  border-color: rgb(44 59 46 / 35%) !important;
  color: var(--lumyra-green) !important;
  min-height: 48px;
}

body .lumyra-hero-form .lumyra-native-form .elementor-field::placeholder {
  color: var(--lumyra-sage) !important;
  opacity: 1;
}

body .lumyra-hero-form .lumyra-native-form .elementor-button {
  background: var(--lumyra-green) !important;
  color: var(--lumyra-cream) !important;
  min-height: 48px;
}

body .lumyra-hero-form .lumyra-native-form .elementor-message {
  background: rgb(255 255 255 / 78%);
  border: 1px solid rgb(44 59 46 / 18%);
  color: var(--lumyra-green) !important;
  margin-top: 14px;
  padding: 14px 16px;
}

@media (max-width: 767px) {
  body .lumyra-hero {
    min-height: auto;
    padding: 24px 16px !important;
  }

  body .lumyra-hero::after {
    height: 300px;
    right: -120px;
    width: 300px;
  }

  body .lumyra-hero-copy {
    padding: 28px 20px !important;
  }

  body .lumyra-hero-form .lumyra-native-form .elementor-field-group,
  body .lumyra-hero-form .lumyra-native-form .elementor-field-type-submit {
    width: 100% !important;
  }
}

body .lumyra-header-cta .elementor-button {
  font-size: 15px !important;
  min-height: 46px !important;
  padding: 0 24px !important;
}

body .lumyra-hero-media {
  z-index: 1 !important;
}

body .lumyra-hero-copy {
  background: transparent !important;
  gap: 0 !important;
  z-index: 2 !important;
}

body .lumyra-hero-copy > .lumyra-lead {
  max-width: 618px !important;
  width: 100% !important;
}

@media (max-width: 599px) {
  body .lumyra-header-inner {
    gap: 6px !important;
  }

  body .lumyra-header-nav {
    flex-basis: 40px !important;
    width: 40px !important;
  }

  body .lumyra-header-nav .elementor-menu-toggle {
    width: 40px !important;
  }

  body .lumyra-header-cta .elementor-button {
    font-size: 14px !important;
    padding: 0 10px !important;
  }
}

/* Exact reference geometry: neutralize Elementor's inherited container gap
   and legacy prototype padding, then restore only the source design values. */
body .lumyra-header-brand,
body .lumyra-centered,
body .lumyra-product-card,
body .lumyra-retinol-copy,
body .lumyra-routine-card,
body .lumyra-routine-rows,
body .lumyra-story-copy,
body .lumyra-article-card,
body .lumyra-quote,
body .lumyra-waitlist,
body .lumyra-native-footer,
body .lumyra-footer-column,
body .lumyra-footer-base {
  --gap: 0px !important;
  gap: 0 !important;
}

body .lumyra-header-inner {
  min-height: 94px !important;
}

body .lumyra-product-card {
  align-items: stretch !important;
  padding: 0 !important;
  text-align: left !important;
}

body .lumyra-product-image {
  align-self: stretch !important;
  margin: 0 !important;
  width: 100% !important;
}

body .lumyra-product-number,
body .lumyra-product-card .lumyra-card-title,
body .lumyra-product-card .lumyra-card-copy {
  align-self: stretch !important;
  text-align: left !important;
  width: auto !important;
}

body .lumyra-product-card .lumyra-small-button {
  align-self: flex-start !important;
  width: auto !important;
}

body .lumyra-retinol-copy,
body .lumyra-routine-card,
body .lumyra-story-copy,
body .lumyra-article-card,
body .lumyra-footer-column {
  --gap: 0px !important;
}

body .lumyra-routine-rows {
  gap: 0 !important;
}

/* Only the marker has a fixed height; wrapped labels must grow the row. */
body .lumyra-track-header {
  height: auto !important;
  min-height: 22px !important;
}

body .lumyra-routine-icon {
  height: 22px !important;
  line-height: 22px !important;
  min-height: 0 !important;
}

body .lumyra-routine-grid {
  max-width: none !important;
}

body .lumyra-story-copy {
  justify-content: normal !important;
  padding: 0 !important;
}

body .lumyra-story-image,
body .lumyra-story-image .elementor-widget-container,
body .lumyra-story-image img {
  height: auto !important;
  min-height: 0 !important;
}

body .lumyra-story-image {
  align-self: center !important;
}

body .lumyra-story-image img {
  aspect-ratio: 3 / 2 !important;
}

body .lumyra-quote .lumyra-display-lg {
  max-width: 387px !important;
  width: 100% !important;
}

body .lumyra-article-image {
  align-self: stretch !important;
  width: 100% !important;
}

body .lumyra-article-image {
  background: var(--lumyra-sunken) !important;
  border: 1px solid var(--lumyra-border) !important;
  padding: 16px !important;
}

body .lumyra-article-image img {
  aspect-ratio: 16 / 9 !important;
}

body .lumyra-waitlist > .elementor-element,
body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) {
  max-width: 570px !important;
  width: 100% !important;
}

body .lumyra-native-form .elementor-field-group {
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-form-fields-wrapper {
  column-gap: 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  margin-bottom: 0 !important;
  row-gap: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-email {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
}

body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .e-form__buttons {
  align-self: end !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
}

body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-acceptance {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
  width: auto !important;
}

body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-acceptance > .elementor-field-label {
  display: none !important;
}

body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-acceptance .elementor-field-subgroup,
body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-acceptance .elementor-field-option {
  align-items: flex-start !important;
  display: flex !important;
  min-height: 24px !important;
  width: 100% !important;
}

body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-acceptance .elementor-field-option label {
  line-height: 24px !important;
}

body .lumyra-native-form input[type="checkbox"] {
  flex: 0 0 24px !important;
  height: 24px !important;
  margin: 0 12px 0 0 !important;
  max-height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  width: 24px !important;
}

body .lumyra-routine > .lumyra-button,
body .lumyra-learn > .lumyra-button {
  margin-bottom: 17px !important;
}

body .lumyra-waitlist > .lumyra-eyebrow {
  margin-bottom: 32px !important;
}

body .lumyra-waitlist .lumyra-centered-copy {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

body .lumyra-waitlist .lumyra-centered-copy p {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

body .lumyra-waitlist .lumyra-waitlist-open {
  margin-bottom: 32px !important;
}

body .lumyra-waitlist .lumyra-native-form {
  margin-top: 0 !important;
}

body .lumyra-waitlist > .lumyra-fine {
  margin: 20px 0 12px !important;
}

body .lumyra-native-form-compact .elementor-form-fields-wrapper {
  row-gap: 0 !important;
}

@media (max-width: 599px) {
  body .lumyra-product-card {
    padding: 0 !important;
  }

  body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-form-fields-wrapper {
    grid-template-columns: 1fr !important;
  }

  body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-email,
  body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .e-form__buttons,
  body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-acceptance {
    grid-column: 1 !important;
  }

  body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-email {
    grid-row: 1 !important;
  }

  body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .e-form__buttons {
    grid-row: 2 !important;
  }

  body .lumyra-native-form:not(.lumyra-native-form-compact):not(.lumyra-contact-form) .elementor-field-type-acceptance {
    grid-row: 3 !important;
  }
}

/* ---------------------------------------------------------------------------
   7. Elementor 4 atomic elements

   Elementor 4 renders anything newly added as an atomic element, and those
   carry their own base classes rather than the .elementor-button markup the
   kit styles. A button dropped onto a new page therefore arrives in
   Elementor's own blue, #375EFB, with none of the design system on it.

   Only the two button classes need reclaiming. Atomic headings and paragraphs
   ship with no colour or type in their base styles, so they already inherit
   the kit's tag rules and are deliberately left alone here.

   Values follow the .btn and .btn-p spec in design-system.html: 56px for a
   primary action, 32px side padding, Inter 500 at 16px, 2px radius, and the
   180ms ease-out transition.
   --------------------------------------------------------------------------- */

body .e-button-base,
body .e-form-submit-button-base {
  align-items: center;
  background-color: var(--lumyra-green) !important;
  border: 1.5px solid transparent !important;
  border-radius: 2px !important;
  color: var(--lumyra-cream) !important;
  display: inline-flex !important;
  font-family: var(--lumyra-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  gap: 12px;
  justify-content: center;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
  min-height: 56px;
  padding: 0 32px !important;
  text-decoration: none;
  transition: background-color 180ms cubic-bezier(.22, .61, .36, 1),
              border-color 180ms cubic-bezier(.22, .61, .36, 1),
              color 180ms cubic-bezier(.22, .61, .36, 1);
}

body .e-button-base:hover,
body .e-form-submit-button-base:hover {
  background-color: var(--lumyra-green-deep) !important;
}

/* The focus ring is never traded away for looks, design system section 08. */
body .e-button-base:focus-visible,
body .e-form-submit-button-base:focus-visible {
  outline: 3px solid var(--lumyra-amber) !important;
  outline-offset: 3px !important;
}

/* ---------------------------------------------------------------------------
   8. Single product template

   Geometry from the approved Product Detail canvas: a 4:5 gallery beside a
   sticky buy column, spec rows as hairline-separated pairs, then the shared
   bands. WooCommerce widgets bring their own markup, so these rules mostly
   undo its defaults and re-lay it out on the design system's own values.
   --------------------------------------------------------------------------- */

body .lumyra-product-breadcrumb {
  margin: 0 auto !important;
  max-width: 1200px !important;
  padding: 32px 40px 0 !important;
  width: 100% !important;
}

body .lumyra-breadcrumb,
body .lumyra-breadcrumb .woocommerce-breadcrumb {
  color: var(--lumyra-text-muted) !important;
  font-size: 15px !important;
}

body .lumyra-breadcrumb a {
  color: var(--lumyra-sage) !important;
  text-decoration: none !important;
}

body .lumyra-product-grid-2 {
  align-items: start !important;
  display: grid !important;
  gap: 56px !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  width: 100% !important;
}

/* The buy column tracks the gallery on long pages, as the canvas specifies. */
body .lumyra-buy {
  gap: 8px !important;
  position: sticky !important;
  top: 120px !important;
}

body .lumyra-product-images img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
}

body .lumyra-product-images .flex-control-thumbs {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(3, minmax(0, 110px)) !important;
  justify-content: start !important;
  list-style: none !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

/* WooCommerce ships `.flex-control-thumbs li { width: 25% }`. Inside a grid
   cell that is a percentage of the cell, not of the strip, so each thumbnail
   rendered at a quarter of its column and sat marooned in the empty
   three-quarters. That is what made the row read as scattered rather than as a
   strip. The cell owns the width now and the image fills it. */
body .lumyra-product-images .flex-control-thumbs li {
  float: none !important;
  margin: 0 !important;
  width: 100% !important;
}

body .lumyra-product-images .flex-control-thumbs li img {
  aspect-ratio: 4 / 5 !important;
  cursor: pointer !important;
  display: block !important;
  height: auto !important;
  object-fit: cover !important;
  opacity: 0.55 !important;
  transition: opacity var(--lumyra-dur) ease !important;
  width: 100% !important;
}

body .lumyra-product-images .flex-control-thumbs li img:hover,
body .lumyra-product-images .flex-control-thumbs li img.flex-active {
  opacity: 1 !important;
}

body .lumyra-product-title h1,
body .lumyra-product-title .product_title {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  margin: 0 0 16px !important;
}

body .lumyra-product-summary {
  color: var(--lumyra-text-muted) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.52 !important;
  margin-bottom: 20px !important;
  max-width: 38ch !important;
}

body .lumyra-product-price {
  border-bottom: 1px solid var(--lumyra-border) !important;
  padding-bottom: 32px !important;
}

body .lumyra-product-price .price,
body .lumyra-product-price .lumyra-coming-soon {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}

/* WooCommerce ships this as a table; the canvas draws it as hairline pairs. */
body .lumyra-product-spec table,
body .lumyra-product-spec tbody,
body .lumyra-product-spec tr {
  border: 0 !important;
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
}

body .lumyra-product-spec tr {
  border-bottom: 1px solid var(--lumyra-border) !important;
  display: grid !important;
  gap: 48px !important;
  grid-template-columns: auto 1fr !important;
}

body .lumyra-product-spec th {
  color: var(--lumyra-sage) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .24em !important;
  padding: 16px 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body .lumyra-product-spec td,
body .lumyra-product-spec td p {
  color: var(--lumyra-text-muted) !important;
  font-size: 17px !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  text-align: left !important;
}

body .lumyra-buy-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

body .lumyra-buy-actions .lumyra-fine p {
  max-width: 24ch !important;
}

/* One template carries both states; the option picks which one is visible. */
body.lumyra-shop-closed .lumyra-when-open,
body.lumyra-shop-closed .lumyra-header-account,
body.lumyra-shop-open .lumyra-when-closed {
  display: none !important;
}

/* 06 has its own consent list and Mailchimp audience. The shared product
   template carries both versions; the product body class selects the right
   CTA and form without mixing 06 signups into the kit launch audience. */
body .lumyra-product-list-retinol {
  display: none !important;
}

body.lumyra-product-06 .lumyra-product-list-default {
  display: none !important;
}

body.lumyra-product-06 .lumyra-buy-actions .lumyra-product-list-retinol {
  display: block !important;
}

body.lumyra-product-06 .lumyra-waitlist.lumyra-product-list-retinol {
  display: flex !important;
}

body .lumyra-product-longform {
  margin: 64px auto 0 !important;
  max-width: 680px !important;
  width: 100% !important;
}

body .lumyra-product-longform p {
  color: var(--lumyra-text-muted) !important;
  margin: 0 0 18px !important;
}

body .lumyra-product-routine-copy {
  max-width: 46ch !important;
}

body .lumyra-product-tabs .wc-tabs,
body .lumyra-product-tabs .woocommerce-Tabs-panel > h2 {
  display: none !important;
}

body .lumyra-product-kit .lumyra-product-grid {
  margin-top: 48px !important;
}

@media (max-width: 899px) {
  body .lumyra-product-grid-2 {
    gap: 48px !important;
    grid-template-columns: 1fr !important;
  }

  body .lumyra-buy {
    position: static !important;
  }

  body .lumyra-product-title h1,
  body .lumyra-product-title .product_title {
    font-size: 36px !important;
  }

  body .lumyra-product-breadcrumb {
    padding: 24px 20px 0 !important;
  }
}

/* WooCommerce ships the attributes block with its own heading and a shaded,
   fully bordered table. The canvas draws the same data as hairline pairs on
   the page surface, so its chrome is stripped rather than restyled. */
body .lumyra-product-spec h2 {
  display: none !important;
}

body .lumyra-product-spec th,
body .lumyra-product-spec td {
  background: none !important;
  border: 0 !important;
  font-style: normal !important;
}

body .lumyra-buy-actions {
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

body .lumyra-buy-actions > .elementor-element {
  width: auto !important;
}

/* The tracks sit in half the grid here rather than the full page width they
   get on the homepage, so two side by side wrap every product name over three
   lines. One per row keeps them readable at this size. */
/* The tracks used to sit in the narrow right hand column of the split, where
   they had to stack. They now run full width underneath it, so they take the
   same two column grid as the homepage. Stacking below 899px is handled with
   every other grid, so there is nothing product specific left to say here. */

body .lumyra-faq .elementor-accordion .elementor-tab-title {
  border: 0 !important;
  border-bottom: 1px solid var(--lumyra-border) !important;
  /* Body face, not the display serif. The design system's own accordion sets a
     weight and a size on .acc .q and no font-family at all, which means it
     inherits Inter. Setting the display face here made the questions the only
     accordion on the site that disagreed with the reference. */
  font-family: var(--lumyra-body) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  padding: 24px 0 !important;
}

body .lumyra-faq .elementor-accordion .elementor-tab-content {
  border: 0 !important;
  border-bottom: 1px solid var(--lumyra-border) !important;
  color: var(--lumyra-text-muted) !important;
  padding: 0 0 24px !important;
}

body .lumyra-faq .elementor-accordion-item {
  border: 0 !important;
}

/* Ingredient list, rendered from the product description. Hairline pairs on
   the page surface, same treatment as the spec rows in the buy column. */
body .lumyra-inci-intro {
  margin: 0 0 var(--space-6, 32px) !important;
}

body .lumyra-inci {
  border-collapse: collapse !important;
  border-top: 1px solid var(--lumyra-border) !important;
  margin: 0 !important;
  width: 100% !important;
}

body .lumyra-inci tr {
  border-bottom: 1px solid var(--lumyra-border) !important;
}

body .lumyra-inci th {
  background: none !important;
  border: 0 !important;
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  padding: 12px 0 !important;
  text-align: left !important;
}

body .lumyra-inci td {
  background: none !important;
  border: 0 !important;
  color: var(--lumyra-amber-dark) !important;
  font-family: var(--lumyra-mono) !important;
  font-size: 14px !important;
  padding: 12px 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  width: 1% !important;
}

body .lumyra-inci-note {
  color: var(--lumyra-text-muted) !important;
  font-size: 15px !important;
  margin: var(--space-5, 24px) 0 0 !important;
}

/* ---------------------------------------------------------------------------
   9. Hover states and section rhythm

   The hover states below are the ones design-system.html already specifies.
   They were being lost: section 5 above sets each button's base colour with
   !important, which outranked the plain :hover rules in section 2, so nothing
   moved on hover. Restated here at matching weight.

   Depth stays hairlines and background shifts. No shadows, no lift, nothing
   that moves on its own.
   --------------------------------------------------------------------------- */

/* Buttons. Values from the .btn-p / .btn-s / .btn-a / .btn-g hover rules. */

body .lumyra-button-green .elementor-button:hover,
body .lumyra-button-green .elementor-button:focus-visible {
  background: var(--lumyra-green-dark) !important;
  border-color: var(--lumyra-green-dark) !important;
  color: var(--lumyra-cream) !important;
}

body .lumyra-button-green .elementor-button:hover .elementor-button-text,
body .lumyra-button-green .elementor-button:focus-visible .elementor-button-text,
body .lumyra-button-outline .elementor-button:hover .elementor-button-text,
body .lumyra-button-outline .elementor-button:focus-visible .elementor-button-text,
body .lumyra-button-gold .elementor-button:hover .elementor-button-text,
body .lumyra-button-gold .elementor-button:focus-visible .elementor-button-text,
body .lumyra-native-form .elementor-button:hover .elementor-button-text,
body .lumyra-native-form .elementor-button:focus-visible .elementor-button-text {
  color: inherit !important;
}

/* Catalogue buttons inherit the compact outline treatment from
   .lumyra-small-button. Every persistent state uses the same 164px control,
   so the longer in-cart label does not make one card action wider or heavier
   than its neighbours. The label itself, rather than colour, communicates
   that the product is already in the cart. */
body .lumyra-card-add-to-cart,
body .lumyra-card-add-to-cart .elementor-button {
	box-sizing: border-box !important;
	width: 164px !important;
}

/* WooCommerce appends its own View cart link after the added_to_cart event.
 * The card button already becomes the View cart action, so hide the duplicate
 * defensively while JavaScript removes it from the DOM. */
body .lumyra-card-add-to-cart > .added_to_cart {
	display: none !important;
}

body .lumyra-card-add-to-cart .elementor-button-text {
  white-space: nowrap !important;
}

body .lumyra-card-add-to-cart .elementor-button:hover,
body .lumyra-card-add-to-cart .elementor-button:focus-visible,
body .lumyra-card-add-to-cart.is-adding .elementor-button {
  background: var(--lumyra-green-dark) !important;
  border-color: var(--lumyra-green-dark) !important;
  color: var(--lumyra-cream) !important;
}

body .lumyra-card-add-to-cart .elementor-button:hover .elementor-button-text,
body .lumyra-card-add-to-cart .elementor-button:focus-visible .elementor-button-text,
body .lumyra-card-add-to-cart.is-adding .elementor-button-text {
  color: inherit !important;
}

.lumyra-cart-status {
  background: var(--lumyra-green-deep);
  border: 1px solid var(--lumyra-sage);
  bottom: 24px;
  color: var(--lumyra-cream);
  font-family: var(--lumyra-body);
  font-size: 15px;
  left: auto;
  max-width: calc(100vw - 48px);
  opacity: 0;
  padding: 16px 20px;
  position: fixed;
  right: 24px;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 10000;
}

.lumyra-cart-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lumyra-cart-status a {
  color: var(--lumyra-amber) !important;
  font-weight: 600;
  margin-left: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .lumyra-cart-status {
    bottom: 16px;
    left: 16px;
    max-width: none;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lumyra-cart-status {
    transform: none;
    transition: none;
  }
}

body .lumyra-button-outline .elementor-button:hover,
body .lumyra-button-outline .elementor-button:focus-visible {
  background: var(--lumyra-green) !important;
  color: var(--lumyra-cream) !important;
}

body .lumyra-button-gold .elementor-button:hover,
body .lumyra-button-gold .elementor-button:focus-visible,
body .lumyra-native-form .elementor-button:hover,
body .lumyra-native-form .elementor-button:focus-visible {
  background: var(--lumyra-amber-dark) !important;
  color: var(--lumyra-cream) !important;
}

/* Ghost sits on the dark bands, so it inverts rather than darkens. */
body .lumyra-quote .lumyra-button-outline .elementor-button:hover,
body .lumyra-waitlist .lumyra-button-outline .elementor-button:hover {
  background: var(--lumyra-cream) !important;
  color: var(--lumyra-green) !important;
}

body .lumyra-text-link .elementor-button:hover,
body .lumyra-text-link .elementor-button:focus-visible {
  color: var(--lumyra-green) !important;
}

/* Cards. The system's card hover is a hairline shift, nothing more. */

body .lumyra-product-card,
body .lumyra-article-image {
  transition: border-color var(--lumyra-dur, 180ms) cubic-bezier(.22, .61, .36, 1) !important;
}

body .lumyra-product-card:hover,
body .lumyra-product-card:focus-within {
  border-color: var(--lumyra-border-strong, #9BA69B) !important;
}

body .lumyra-article-card:hover .lumyra-article-image,
body .lumyra-article-card:focus-within .lumyra-article-image {
  border-color: var(--lumyra-border-strong, #9BA69B) !important;
}

/* The article title picks up the underline its own read link already uses, so
   the whole card reads as one target rather than only the small link moving. */
body .lumyra-article-card .lumyra-card-title .elementor-heading-title a {
  color: inherit !important;
  text-decoration: none;
}

body .lumyra-article-card:hover .lumyra-card-title .elementor-heading-title,
body .lumyra-article-card:focus-within .lumyra-card-title .elementor-heading-title {
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
}

body .lumyra-article-card .lumyra-card-title .elementor-heading-title a:focus-visible {
  outline: 2px solid var(--lumyra-gold, #B9852F);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body .lumyra-product-card,
  body .lumyra-article-image {
    transition: none !important;
  }
}

/* Section rhythm. Bands were 96px top and bottom, so 192px sat between any two
   of them. 64px keeps the system's generous feel at 128px between bands, and
   stays on the spacing scale rather than becoming an arbitrary number. */

body .lumyra-section {
  padding-block: 64px !important;
}

body .lumyra-quote,
body .lumyra-waitlist {
  padding-block: 64px !important;
}

@media (max-width: 767px) {
  body .lumyra-section,
  body .lumyra-quote,
  body .lumyra-waitlist {
    padding-block: 48px !important;
  }
}

/* ---------------------------------------------------------------------------
   10. Tighter rhythm, second pass

   64px still read as too much, so bands drop to 48px, which puts 96px between
   any two of them against the 192px this started at. Still on the spacing
   scale. The trailing margins under the section CTAs came from the original
   pixel match and are dead space now that the bands are tighter.
   --------------------------------------------------------------------------- */

body .lumyra-section,
body .lumyra-quote,
body .lumyra-waitlist {
  padding-block: 48px !important;
}

body .lumyra-routine > .lumyra-button,
body .lumyra-learn > .lumyra-button {
  margin-bottom: 0 !important;
}

body .lumyra-waitlist > .lumyra-fine {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  body .lumyra-section,
  body .lumyra-quote,
  body .lumyra-waitlist {
    padding-block: 32px !important;
  }
}

/* The pull quote was capped at 387px, which broke a 55 character line into
   three. The reading measure is the system's own token for how wide a line of
   text should run, and it lands the quote on two. */
body .lumyra-quote .lumyra-display-lg {
  max-width: 680px !important;
}

/* ---------------------------------------------------------------------------
   11. Logo

   The supplied mark replaces the typographic wordmark. It carries LUMYRA, LAB
   and CLINICAL SKINCARE in one file, so there is no descriptor beside it.
   Sized by width, with height following the artwork's own ratio.
   --------------------------------------------------------------------------- */

/* The ratio is the artwork's own (697x138 and 530x106, both ~5:1). Reserving
   it means the header does not jump when the file lands, which is what the
   0.1 layout shift budget is there to prevent. */
body .lumyra-logo img {
  aspect-ratio: 697 / 138 !important;
  display: block !important;
  height: auto !important;
  width: 190px !important;
}

body .lumyra-logo-footer img {
  aspect-ratio: 530 / 106 !important;
}

body .lumyra-logo .elementor-widget-container,
body .lumyra-logo a {
  display: block !important;
  line-height: 0 !important;
}

body .lumyra-logo-footer img {
  width: 180px !important;
}

/* The header condenses past 80px of scroll; the mark shrinks with it. */
body .lumyra-native-header.condensed .lumyra-logo img {
  width: 150px !important;
  transition: width var(--lumyra-dur) cubic-bezier(.22, .61, .36, 1) !important;
}

@media (max-width: 767px) {
  body .lumyra-logo img {
    width: 140px !important;
  }

  body .lumyra-logo-footer img {
    width: 160px !important;
  }
}

/* ---------------------------------------------------------------------------
   12. Routine markers

   The morning and evening markers are the brand's own drawn marks, traced from
   the supplied artwork and carrying their colour in the file. They are images
   rather than icon widgets because Elementor's icon widget only draws from its
   glyph libraries.

   Colour lives in the SVGs: amber for the sun, sage deep for the moon. That is
   the pair the approved homepage used, and the label beside each marker means
   colour is never the only signal.

   The safety net below stays for any icon widget added later. Elementor renders
   Font Awesome as an inline <svg> with no fill attribute, so the glyph paints
   with the SVG default, black, and ignores `color` entirely. That was the cause
   of the black routine markers; making fill follow currentColor is what lets
   colour reach an icon at all.
   --------------------------------------------------------------------------- */

body .elementor-widget-icon svg {
  fill: currentColor !important;
}

/* 22px. These are authored as SVG rather than traced from artwork, so the
   stroke width is a property of the file and scales with it instead of thinning
   into grey. They stay legible down to 16px; the earlier traced marks could not
   go under 40px. */
body .lumyra-routine-icon img {
  display: block !important;
  height: 22px !important;
  object-fit: contain !important;
  width: 22px !important;
}

/* The marks are square, so the box can be reserved before the file arrives. */
body .lumyra-routine-icon .elementor-widget-container,
body .lumyra-routine-icon figure,
body .lumyra-routine-icon a {
  display: block !important;
  line-height: 0 !important;
}

/* ---------------------------------------------------------------------------
   13. Product page, the canvas details

   Three things the first pass of the product template left out: the state
   badge above the title, the headline actives block, and the editorial frame
   beside the routine copy.
   --------------------------------------------------------------------------- */

/* State badge. Letterspaced caps in amber deep, matching the eyebrow treatment
   the design system uses everywhere else rather than inventing a pill. */
body .lumyra-product-state {
  margin-bottom: 16px !important;
  width: 100% !important;
}

body .lumyra-product-state .lumyra-badge,
body .lumyra-product-state p {
  color: var(--lumyra-amber-dark) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

/* The formula paragraph, which took the headline actives list's place. It is
   running text at the reading measure the rest of the site uses, and the first
   paragraph is set slightly larger so the band has somewhere to start. */
body .lumyra-formula-copy {
  color: var(--lumyra-text-muted) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 0 18px !important;
}

body .lumyra-formula-copy:first-child {
  color: var(--lumyra-green) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.62 !important;
  margin-bottom: 24px !important;
}

/* One tip, sunken rather than boxed. Depth on this site is a background shift
   and a hairline, never a shadow. */
body .lumyra-usage-tip {
  background: var(--lumyra-sunken, #eeebe0) !important;
  border-left: 2px solid var(--lumyra-amber) !important;
  color: var(--lumyra-text-muted) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 32px 0 40px !important;
  padding: 24px !important;
}

body .lumyra-usage-tip-label {
  color: var(--lumyra-amber-dark) !important;
  display: block !important;
  font-family: var(--lumyra-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

body .lumyra-product-source-note {
  background: var(--lumyra-sunken, #eeebe0) !important;
  border-left: 2px solid var(--lumyra-amber) !important;
  color: var(--lumyra-text-muted) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 0 32px !important;
  padding: 20px 24px !important;
}

body .lumyra-product-usage {
  border-top: 1px solid var(--lumyra-border) !important;
  margin: 40px 0 !important;
  padding-top: 32px !important;
}

body .lumyra-product-key-ingredients h3,
body .lumyra-product-usage h3 {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  margin: 0 0 16px !important;
}

body .lumyra-product-key-ingredients ul {
  color: var(--lumyra-text-muted) !important;
  margin: 0 0 32px !important;
  padding-left: 22px !important;
}

body .lumyra-product-key-ingredients li {
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin-bottom: 8px !important;
}

body .lumyra-product-usage p {
  color: var(--lumyra-text-muted) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 0 14px !important;
}

body .lumyra-product-usage .lumyra-product-step {
  color: var(--lumyra-green) !important;
  font-style: italic !important;
}

/* The safety block. The client's wording, mirroring her Terms, so it is set to
   be read rather than skimmed past: full body size, no small print treatment. */
body .lumyra-safety-copy p {
  color: var(--lumyra-text-muted) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* Editorial frame beside the routine copy. 3:2 to match the source image, so
   the box is reserved before the file lands. */
body .lumyra-product-routine-figure {
  width: 100% !important;
}

body .lumyra-product-routine-image img {
  aspect-ratio: 3 / 2 !important;
  display: block !important;
  height: auto !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* The step row now sits under the split rather than inside it. */
body .lumyra-product-routine-tracks {
  margin-top: 56px !important;
  width: 100% !important;
}

/* WooCommerce heads its attribute table "Additional information". The canvas
   has the rows bare against the buy column, and the heading reads like a
   different page's furniture. */
body .lumyra-product-spec h2 {
  display: none !important;
}

@media (max-width: 767px) {
  body .lumyra-formula-copy:first-child {
    font-size: 18px !important;
  }

  body .lumyra-usage-tip {
    padding: 16px !important;
  }

  body .lumyra-product-routine-tracks {
    margin-top: 32px !important;
  }
}

/* ---------------------------------------------------------------------------
   14. Inner pages, articles, and the collapsible ingredient list
   --------------------------------------------------------------------------- */

/* Masthead shared by pages and articles. */
body .lumyra-singular-masthead {
  padding-block: 64px 24px !important;
  text-align: center !important;
}

body .lumyra-singular-title h1 {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  /* Display 2, the page-title style. 52px was off the scale entirely and
     Display 1 is reserved for the homepage hero. */
  font-size: 44px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}

@media (max-width: 899px) {
  body .lumyra-singular-title h1 {
    font-size: 36px !important;
  }
}

@media (max-width: 599px) {
  body .lumyra-singular-title h1 {
    font-size: 29px !important;
  }
}

body .lumyra-article-figure {
  padding-block: 8px 0 !important;
}

body .lumyra-article-image img {
  aspect-ratio: 3 / 2 !important;
  display: block !important;
  height: auto !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* Longform body. One measure, so prose stays readable however long the page. */
body .lumyra-longform {
  margin: 0 auto !important;
  max-width: 680px !important;
  width: 100% !important;
}

body .lumyra-longform-content p,
body .lumyra-longform-content li {
  color: var(--lumyra-muted) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}

/* The rule above is generic enough to swallow eyebrows that sit inside longform
   content, which rendered them as 17px body copy in muted grey. They carry
   .lumyra-eyebrow already, so this restores the Label style they asked for
   rather than inventing a new one. */
body .lumyra-longform-content .lumyra-eyebrow p {
  color: var(--lumyra-sage) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

body .lumyra-longform-content h2 {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  margin: 48px 0 14px !important;
}

/* An eyebrow and the heading it introduces are one group. The homepage sets them
   12px apart (band B in homepage.html uses var(--s3)); every inner page was
   pushing them 60px apart, because the rule above is written for mid-article
   section breaks where 48px is right. That left the eyebrow sitting closer to
   the page title than to the heading it labels. Scoped to the eyebrow-adjacent
   heading so genuine section breaks keep their 48px. */
body .lumyra-longform-content .lumyra-eyebrow + .elementor-widget-heading h2,
body .lumyra-longform-content .lumyra-eyebrow + .lumyra-display h2 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

body .lumyra-longform-content h3 {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  margin: 32px 0 10px !important;
}

/* Your Routine: the two alternating-evening cards. */
body .lumyra-routine-alt-grid {
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 40px auto 0 !important;
  max-width: 860px !important;
  width: 100% !important;
}

body .lumyra-routine-alt-card {
  background: var(--lumyra-white) !important;
  border: 1px solid var(--lumyra-border) !important;
  padding: 28px !important;
  width: auto !important;
}

body .lumyra-routine-alt-card-accent {
  border-color: var(--lumyra-border-strong, #9ba69b) !important;
}

body .lumyra-routine-alt .lumyra-fine {
  margin: 32px auto 0 !important;
  max-width: 620px !important;
  text-align: center !important;
}

/* Contact form. Labels are visible and required fields are marked. */
body .lumyra-contact-wrap {
  margin: 0 auto !important;
  max-width: 680px !important;
  width: 100% !important;
}

/* Design system .field label: 14px, weight 500, sentence case. The 13px
   letterspaced caps matched no style in the type table, and the waitlist form
   on the same page was already using the correct treatment. */
body .lumyra-contact-form .elementor-field-label {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
}

body .lumyra-contact-form .elementor-field-textual {
  background: var(--lumyra-white) !important;
  border: 1.5px solid var(--lumyra-border-strong, #9ba69b) !important;
  border-radius: 2px !important;
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-body) !important;
  /* 17px body and a 56px field, per the design system field spec. */
  font-size: 17px !important;
  min-height: 56px !important;
  padding: 14px 16px !important;
}

body .lumyra-contact-form textarea.elementor-field-textual {
  min-height: 150px !important;
}

/* Section 2 rule 5: 3px amber at 3px offset, the same ring as every other
   focusable element. This form was the only place running a 2px variant. */
body .lumyra-contact-form .elementor-field-textual:focus-visible {
  border-color: var(--lumyra-green) !important;
  outline: 3px solid var(--lumyra-amber) !important;
  outline-offset: 3px !important;
}

/* Section 6: the primary action on a screen is deep green. Amber is reserved
   for waitlist actions, and the generic .lumyra-native-form rule was painting
   this one amber, where it competed with the waitlist button in the header.
   Scoped to the contact form so every real waitlist button stays amber. */
body .lumyra-contact-form .elementor-button {
  background: var(--lumyra-green) !important;
  color: var(--lumyra-cream) !important;
}

body .lumyra-contact-form .elementor-button:hover,
body .lumyra-contact-form .elementor-button:focus-visible {
  background: var(--lumyra-green-900, #1f2a21) !important;
  color: var(--lumyra-cream) !important;
}

/* Validation message, written by assets/js/contact-form.js. Carries text as
   well as colour, sits against the field, and says how to fix it. */
body .lumyra-contact-form .lumyra-field-msg:empty {
  display: none !important;
}

body .lumyra-contact-form .lumyra-field-msg {
  color: var(--lumyra-err) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 6px 0 0 !important;
  width: 100% !important;
}

body .lumyra-contact-form .lumyra-field-err .elementor-field-textual {
  background: #fefbfa !important;
  border-color: var(--lumyra-err) !important;
}

/* The error text has to be readable, not decorative. */
body .lumyra-contact-form .elementor-message-danger,
body .lumyra-contact-form .elementor-field-required .elementor-field-label::after {
  color: var(--lumyra-err) !important;
}

body .lumyra-contact-form .elementor-message {
  font-family: var(--lumyra-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-top: 12px !important;
}

/* The honeypot. Off-canvas rather than display:none, which the better bots
   skip; the script also marks it aria-hidden and untabbable, and the server
   rejects any submission that filled it. Elementor names the group after the
   field's own id, so this tracks LUMYRA_HONEYPOT_FIELD in pages.php. */
body .lumyra-contact-form .elementor-field-group-website_url {
  height: 0 !important;
  left: -9999px !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  top: auto !important;
  width: 1px !important;
}

/* Collapsible ingredient list. */
body .lumyra-inci-details {
  border-top: 1px solid var(--lumyra-border-strong, #9ba69b) !important;
  margin-top: 8px !important;
}

body .lumyra-inci-summary {
  align-items: baseline !important;
  color: var(--lumyra-green) !important;
  cursor: pointer !important;
  display: flex !important;
  font-family: var(--lumyra-display) !important;
  font-size: 19px !important;
  gap: 14px !important;
  justify-content: space-between !important;
  list-style: none !important;
  padding: 22px 0 !important;
}

body .lumyra-inci-summary::-webkit-details-marker {
  display: none !important;
}

body .lumyra-inci-summary::after {
  color: var(--lumyra-amber-dark) !important;
  content: "+" !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

body .lumyra-inci-details[open] .lumyra-inci-summary::after {
  content: "\2212" !important;
}

body .lumyra-inci-summary:focus-visible {
  outline: 2px solid var(--lumyra-amber-dark) !important;
  outline-offset: 3px !important;
}

body .lumyra-inci-count {
  color: var(--lumyra-muted) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  margin-left: auto !important;
  margin-right: 14px !important;
  text-transform: uppercase !important;
}

body .lumyra-inci-panel {
  padding-bottom: 8px !important;
}

@media (max-width: 767px) {
  body .lumyra-routine-alt-grid {
    grid-template-columns: 1fr !important;
  }

  body .lumyra-singular-masthead {
    padding-block: 40px 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   16. Tighter rhythm, third pass, and full width copy

   Bands have gone 96px to 64px to 48px across earlier passes and the client
   still read the result as mostly empty: the gap around a section intro was
   taller than the intro itself. 32px puts 64px between any two bands, down
   from the 192px this started at, and stays on the spacing scale.

   The measure caps come off at the same time, on the client's instruction.
   The 680px cap is what broke a fifteen word lead onto two lines with an
   orphan while a 1200px band sat empty either side of it. Copy now runs to the
   container, which is itself capped at 1200px, so the line length is bounded by
   the layout rather than by a second cap inside it.

   Deliberately left alone: the fine print beside the buy button, which is
   narrow so it can sit next to the button rather than under it; the hero lead,
   whose column is already narrower than its cap; and the contact form, which
   is a form rather than prose.
   --------------------------------------------------------------------------- */

body .lumyra-section,
body .lumyra-quote,
body .lumyra-waitlist {
  padding-block: 32px !important;
}

body .lumyra-centered {
  margin-bottom: 24px !important;
}

body .lumyra-product-longform {
  margin-top: 32px !important;
}

body .lumyra-product-routine-tracks {
  margin-top: 32px !important;
}

/* Copy runs the width of the band. */
body .lumyra-centered,
body .lumyra-centered-copy,
body .lumyra-longform,
body .lumyra-product-longform,
body .lumyra-product-summary,
body .lumyra-product-routine-copy,
body .lumyra-story-copy {
  max-width: none !important;
}

/* The dark bands keep a cap. Centred cream text running the full 1200px is the
   one place the long line actually hurts, because there is no column edge to
   land the eye against. */
body .lumyra-waitlist .lumyra-centered-copy,
body .lumyra-waitlist .lumyra-waitlist-open {
  max-width: 780px !important;
}

@media (max-width: 767px) {
  body .lumyra-section,
  body .lumyra-quote,
  body .lumyra-waitlist {
    padding-block: 24px !important;
  }

  body .lumyra-centered {
    margin-bottom: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   17. Header, nav centred

   The nav was centred inside its own flex track, but the track sits between a
   wide brand lockup and a narrower button, so its centre was about 50px left
   of the header's. Giving the brand and the button equal flex weight makes the
   middle track the true centre of the header.
   --------------------------------------------------------------------------- */

/* The `body` prefix is load bearing. Section 8 carries a `body .lumyra-header-brand`
   rule that neutralises Elementor's container geometry, and an unprefixed
   selector loses to it on specificity even with !important, so the first
   version of this shipped and changed nothing. */
body .lumyra-header-brand {
  flex: 1 1 0 !important;
}

body .lumyra-header-nav {
  flex: 0 1 auto !important;
}

body .lumyra-header-cta {
  flex: 1 1 0 !important;
  text-align: right !important;
}

/* ---------------------------------------------------------------------------
   18. Centred intros actually run full width

   Section 16 took the measure caps off and the copy still stopped at 800px in a
   1120px band. The cap was not the cause: `align-items: center` on the intro
   container sizes every child to its own content rather than stretching it, so
   the widget was never full width to begin with and no max-width change could
   reach it. Stretching the children and letting text-align do the centring is
   what the container wanted all along.
   --------------------------------------------------------------------------- */

body .lumyra-centered {
  align-items: stretch !important;
}

body .lumyra-centered > .elementor-widget,
body .lumyra-centered > .lumyra-centered-copy,
body .lumyra-centered > .lumyra-eyebrow {
  --container-widget-width: 100%;
  width: 100% !important;
}

/* The masthead sat 64px clear of a title that already has its own leading, and
   then the band below it opened with another 32px. */
body .lumyra-singular-masthead {
  padding-block: 32px 8px !important;
}

@media (max-width: 767px) {
  body .lumyra-singular-masthead {
    padding-block: 24px 8px !important;
  }
}

/* ---------------------------------------------------------------------------
   19. Nested bands must not pay the gutter twice

   The real reason copy looked narrow on Your Routine, Learn, Our Story and
   Contact, and the reason sections 16 and 18 could not fix it: those pages are
   Elementor documents rendered inside the inner page template, whose body
   wrapper is itself a .lumyra-section. So the horizontal gutter was applied
   once by the wrapper and again by every band inside it, 1440 to 1120 to 800.
   Widening the copy could never work while 320px a side was being taken off it
   before the copy was measured.

   Product pages never showed this: the product template is a Theme Builder
   document whose bands are top level, so the gutter lands once.

   Vertical padding is left alone. It is what keeps rhythm between the bands
   inside the page, and it is not doubled in a way that hurts.
   --------------------------------------------------------------------------- */

body .lumyra-section .lumyra-section {
  padding-inline: 0 !important;
}

/* The same doubling on the vertical axis. Where a band contains bands, the
   inner ones own the rhythm and the wrapper contributes nothing, so the first
   band on Your Routine, Learn, Our Story and Contact no longer opens 64px
   below a masthead that already ended in its own padding. Prose pages, whose
   body holds no bands, keep their padding and are untouched by this. */
body .lumyra-section:has(.lumyra-section) {
  padding-block: 0 !important;
}

/* Paragraphs in the editorial split ran flush against each other, so three of
   them read as one block. The container gap is zeroed for every band, which is
   right where the children are cards, and wrong where they are prose. */
body .lumyra-story-copy > .lumyra-body-copy,
body .lumyra-story-copy > .lumyra-lead {
  margin-bottom: 14px !important;
}

/* ---------------------------------------------------------------------------
   20. Buy column order

   The quick scan rows now come before the short description, per the client's
   shape. The description used to sit directly under the title and needed no
   space above it; following a bordered table it does.
   --------------------------------------------------------------------------- */

body .lumyra-product-summary {
  margin-top: 20px !important;
  margin-bottom: 12px !important;
}

/* The rule under the price separated it from the spec table above. The table
   is above the description now and the price sits with the button, so the rule
   moves to the top edge, where it still divides commerce from copy. */
body .lumyra-product-price {
  border-bottom: 0 !important;
  border-top: 1px solid var(--lumyra-border) !important;
  padding-bottom: 0 !important;
  padding-top: 12px !important;
}

body .lumyra-product-price .price {
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Keep the commerce controls close to the price without compromising their
   touch area. WooCommerce and Elementor both add form/widget margins here;
   resetting them prevents the purchase row from reading as a separate band. */
body .lumyra-buy-actions.lumyra-when-open form.cart {
  margin: 0 !important;
}

body .lumyra-buy-actions.lumyra-when-open {
  margin: 8px 0 0 !important;
}

body .lumyra-buy-actions.lumyra-when-open form.cart {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
}

body .lumyra-buy-actions.lumyra-when-open form.cart .quantity {
  margin: 0 !important;
}

body .lumyra-buy-actions.lumyra-when-open form.cart .qty,
body.woocommerce .lumyra-buy-actions.lumyra-when-open .single_add_to_cart_button {
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
}

body .lumyra-buy-actions.lumyra-when-open form.cart .qty {
  padding: 0 12px !important;
  width: 64px !important;
}

body.woocommerce .lumyra-buy-actions.lumyra-when-open .single_add_to_cart_button {
  margin: 0 !important;
  padding: 0 24px !important;
}

/* ---------------------------------------------------------------------------
   21. Spec rows: label and value on the same line

   Every value sat 16px below its own label. The padding rule named both the
   cell and the paragraph inside it, so the 16px was applied twice on the value
   side and once on the label side, and no amount of looking at the grid
   explained it. The paragraph keeps none of it now.

   The label then needs 4px to sit level: it is 12px on an 18px line against
   17px on a 25.5px line, so matching the box tops leaves the small text riding
   high. 4px is half the difference between the two line boxes.

   The label column was also 150px against a 48px gutter inside a 486px column,
   which is 41 per cent of the width spent on labels no longer than "Format".
   --------------------------------------------------------------------------- */

body .lumyra-product-spec tr {
  gap: 20px !important;
  grid-template-columns: minmax(0, 116px) 1fr !important;
}

body .lumyra-product-spec th {
  padding: 16px 0 12px !important;
}

body .lumyra-product-spec td {
  padding: 12px 0 !important;
}

body .lumyra-product-spec td p {
  padding: 0 !important;
}

/* The product hero is one continuous comparison surface. Compact its lower
   edge and the following formula intro so the gallery, buying controls and
   ingredient narrative read as one sequence rather than separate screens. */
body .lumyra-product {
  gap: 0 !important;
}

body .lumyra-product-top {
  padding-block: 24px 16px !important;
}

body .lumyra-product-actives {
  padding-top: 16px !important;
}

/* ---------------------------------------------------------------------------
   22. Tap targets

   Section 6 of the handoff sets 44px minimum and it was not being met. The
   product card button was 25px tall: `min-height: auto` with 4px of vertical
   padding. Nine of them sit on the homepage. The label size itself is
   unchanged from the original design.

   The footer link lists, the breadcrumb and WooCommerce's own gallery zoom
   button are 21 to 36px. Padding them all to 44px on desktop would add height
   to a site the client has just asked to tighten, and a mouse does not need
   it, so they are raised under `pointer: coarse` only. That is the condition
   the rule is actually about.
   --------------------------------------------------------------------------- */

body .lumyra-small-button .elementor-button {
  align-items: center !important;
  display: inline-flex !important;
  /* Sized to the approved homepage mockup's .badge: 10.5px at 4px/12px
     padding, which renders about 22px tall. The 44px min-height that used to
     sit here was a tap-target measure, but it made the card read as a chunky
     outlined button rather than the small tag the mockup shows. */
  font-size: 10.5px !important;
  justify-content: center !important;
  /* The mockup's .badge is a span inheriting the 1.7 body line-height, which is
     what makes it 27.8px tall. Elementor's button ships 1.4 and nothing here
     was overriding it, so every badge rendered 3.1px short against a design
     that otherwise matched to the pixel. */
  line-height: 1.7 !important;
  min-height: auto !important;
  padding: 4px 12px !important;
}

/* Both conditions, not just the first. `pointer: coarse` is the honest test for
   a finger, but it is false in a desktop browser resized narrow, and it cannot
   be verified from one either, so a viewport test rides alongside it: below
   1025 is where the nav is already a burger and touch is the likely input. */
@media (pointer: coarse), (max-width: 1024px) {
  body .lumyra-footer-links .elementor-icon-list-item,
  body .lumyra-footer-links .elementor-icon-list-item a {
    align-items: center !important;
    display: flex !important;
    min-height: 44px !important;
  }

  body .lumyra-footer-links .elementor-icon-list-items {
    gap: 0 !important;
  }

  body .lumyra-breadcrumb a,
  body .lumyra-breadcrumb {
    line-height: 44px !important;
  }

  body .woocommerce-product-gallery__trigger {
    height: 44px !important;
    width: 44px !important;
  }

  /* "Read the article", "More about Lumyra Lab". Underlined text links, but a
     finger still has to land on them, and they were 21px. */
  body .lumyra-text-link .elementor-button {
    align-items: center !important;
    display: inline-flex !important;
    min-height: 44px !important;
  }
}

/* The phone menu. `body .lumyra-header-nav .elementor-item` sets 4px 0, which
   is right for the horizontal desktop bar, where the amber underline hangs off
   the text and a taller box would detach it. In the dropdown that same rule
   gives the primary navigation 28px rows on the one device where the 44px
   minimum actually matters. The dropdown selector is one level deeper, so it
   wins without touching the desktop bar. */
body .lumyra-header-nav .elementor-nav-menu--dropdown .elementor-item {
  align-items: center !important;
  display: flex !important;
  min-height: 44px !important;
  padding: 10px 20px !important;
}

/* The kit has no ingredient declaration of its own, so the band that exists to
   publish one is hidden there rather than left to open with "every ingredient,
   with its approximate share" above a single line of kit summary. The summary
   already appears as the short description in the buy column, so nothing is
   lost. lumyra_no_ingredients_body_class() sets the class from the SKU. */
body.lumyra-no-ingredients .lumyra-product-actives {
  display: none !important;
}

/* The price renders the literal words "Coming soon" while the shop is closed,
   directly above the waitlist button, which is where the client asked for that
   repetition to go. The badge over the title says it instead. The widget stays
   in the template: the moment the shop opens it carries a real price and this
   rule stops applying, so no rebuild is needed to bring it back. */
body.lumyra-shop-closed .lumyra-product-price {
  display: none !important;
}

/* The three-up grid for the Products page. The homepage grid is five across
   because it holds the kit; this one holds all six, and six into five leaves an
   orphan on the second row. */
body .lumyra-product-grid-all {
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1024px) {
  body .lumyra-product-grid-all {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  body .lumyra-product-grid-all {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   23. Our Story pillars, and the Contact two column

   Our Story was one paragraph beside a picture and a quote. Section 4 of the
   scope asks it to carry the transparency thesis and three content pillars, so
   the pillars now exist and the page has a middle.

   Contact was a form centred in a 1120px band with nothing either side of it,
   which is a lot of empty page and gives the visitor nothing to read while
   deciding what to ask. Form left, the things people want to know right.
   --------------------------------------------------------------------------- */

body .lumyra-pillars-grid {
  display: grid !important;
  gap: 32px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body .lumyra-about-difference {
  align-items: center !important;
  background: var(--lumyra-sunken) !important;
  text-align: center !important;
}

body .lumyra-about-difference .lumyra-centered {
  margin: 0 auto !important;
  max-width: 760px !important;
  width: 100% !important;
}

body .lumyra-about-difference .lumyra-body-copy {
  margin-bottom: 14px !important;
}

body .lumyra-about-difference .lumyra-button {
  align-self: center !important;
  margin-top: 10px !important;
}

body .lumyra-about-difference .elementor-button-wrapper {
  text-align: center !important;
}

body .lumyra-principles > .lumyra-centered {
  margin-bottom: 48px !important;
}

body .lumyra-pillar {
  border-top: 1px solid var(--lumyra-border) !important;
  gap: 0 !important;
  padding: 24px 0 0 !important;
}

body .lumyra-pillar-number {
  color: var(--lumyra-amber-dark) !important;
  font-family: var(--lumyra-mono) !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 12px !important;
}

body .lumyra-pillar .lumyra-card-title .elementor-heading-title {
  font-size: 21px !important;
  margin-bottom: 10px !important;
}

body .lumyra-pillar .lumyra-body-copy p {
  margin: 0 !important;
}

body .lumyra-contact-grid {
  align-items: start !important;
  display: grid !important;
  gap: 64px !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  width: 100% !important;
}

body .lumyra-contact-grid .lumyra-contact-wrap {
  margin: 0 !important;
  max-width: none !important;
}

body .lumyra-contact-aside {
  gap: 0 !important;
}

body .lumyra-contact-fact {
  border-top: 1px solid var(--lumyra-border) !important;
  gap: 0 !important;
  padding: 20px 0 !important;
}

body .lumyra-contact-fact .lumyra-eyebrow {
  margin-bottom: 8px !important;
}

body .lumyra-contact-fact p {
  margin: 0 !important;
}

@media (max-width: 899px) {
  body .lumyra-pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body .lumyra-pillar {
    padding: 20px 0 !important;
  }

  body .lumyra-contact-grid {
    gap: 40px !important;
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   24. The contact form had the waitlist form's grid

   Section 10 lays every non-compact .lumyra-native-form out as
   minmax(0,7fr) minmax(0,3fr). That is the waitlist form: one email field and a
   button beside it, which is exactly 7:3. The contact form carries the same
   class and five fields, so it was being placed into a two cell grid sized for
   a signup box, with Your name and Email address landing in the same cell and
   Send message sitting up beside them.

   This predates the two column page: the fields were already wrong, the narrow
   column just made it obvious. Placement is explicit here rather than left to
   auto flow, so the honeypot cannot claim a cell either.
   --------------------------------------------------------------------------- */

/* One column. Name and Email were paired on a row, which left each input at
   roughly half the width of the ones beneath it and made the form look ragged
   down its right edge. Every field runs the full width of the column now. */
body .lumyra-native-form.lumyra-contact-form .elementor-form-fields-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 18px !important;
}

body .lumyra-contact-form .elementor-field-group {
  grid-column: 1 / -1 !important;
}

/* Elementor sizes the control off its own column classes, which are still
   elementor-col-50 on these two, so the inputs stopped short of their cell. */
body .lumyra-contact-form .elementor-field-group > input,
body .lumyra-contact-form .elementor-field-group > textarea,
body .lumyra-contact-form .elementor-field-group .elementor-field {
  max-width: 100% !important;
  width: 100% !important;
}

/* Out of flow entirely, so it takes no grid cell. */
body .lumyra-contact-form .elementor-field-group-website_url {
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 1px !important;
}



/* Why the exclusions above exist: those rules are the waitlist form's layout,
   one email field on grid-column 1 and the button on 2, both pinned to row 1.
   They are written against .lumyra-native-form, which the contact form also
   carries, and at 0,3,1 they outrank anything scoped by .lumyra-contact-form
   alone. That is what put Email and Send message on the first row and pushed
   Your name onto the second. The contact form has its own grid in section 24
   and no longer inherits this one. */

/* ---------------------------------------------------------------------------
   25. System pages: 404, search results, and the legal shells

   These are plain child theme templates rather than Theme Builder documents,
   so they carry no Elementor container classes and need their own frame.
   --------------------------------------------------------------------------- */

body .lumyra-system-page {
  padding: 56px max(20px, calc((100vw - 1200px) / 2 + 20px)) 72px;
}

body .lumyra-system-inner {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}

body .lumyra-system-title {
  color: var(--lumyra-green);
  font-family: var(--lumyra-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 10px 0 16px;
  min-width: 0;
  overflow-wrap: anywhere;
}

body .lumyra-system-lead {
  color: var(--lumyra-text-muted);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.62;
  margin: 0 0 32px;
}

body .lumyra-system-links {
  display: grid;
  gap: 0;
  margin: 8px 0 40px;
}

body .lumyra-system-link {
  align-items: center;
  border-top: 1px solid var(--lumyra-border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  min-height: 44px;
  padding: 18px 0;
  text-decoration: none;
  transition: background var(--lumyra-dur) ease;
}

body .lumyra-system-link:last-child {
  border-bottom: 1px solid var(--lumyra-border);
}

body .lumyra-system-link-title {
  color: var(--lumyra-green);
  font-family: var(--lumyra-display);
  font-size: 21px;
  flex: 0 0 auto;
}

body .lumyra-system-link-note {
  color: var(--lumyra-text-muted);
  font-size: 15px;
}

body .lumyra-system-link:hover .lumyra-system-link-title {
  color: var(--lumyra-amber-dark);
}

body .lumyra-system-search {
  margin: 32px 0 8px;
}

body .lumyra-system-search form,
body .lumyra-search-page .search-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  max-width: 520px;
}

body .lumyra-system-search input[type="search"],
body .lumyra-search-page input[type="search"] {
  background: var(--lumyra-white);
  border: 1px solid var(--lumyra-border);
  border-radius: 0;
  color: var(--lumyra-green);
  flex: 1 1 auto;
  font-family: var(--lumyra-body);
  font-size: 17px;
  min-height: 48px;
  padding: 10px 14px;
}

body .lumyra-system-search input[type="submit"],
body .lumyra-search-page input[type="submit"] {
  background: var(--lumyra-green);
  border: 0;
  border-radius: 0;
  color: var(--lumyra-cream);
  cursor: pointer;
  font-family: var(--lumyra-body);
  font-size: 15px;
  min-height: 48px;
  padding: 10px 22px;
}

body .lumyra-search-results {
  display: grid;
  margin: 24px 0 8px;
}

body .lumyra-search-result {
  border-top: 1px solid var(--lumyra-border);
  display: grid;
  gap: 6px;
  min-height: 44px;
  padding: 20px 0;
  text-decoration: none;
}

body .lumyra-search-result:last-child {
  border-bottom: 1px solid var(--lumyra-border);
}

body .lumyra-search-result-title {
  color: var(--lumyra-green);
  font-family: var(--lumyra-display);
  font-size: 23px;
  line-height: 1.25;
}

body .lumyra-search-result:hover .lumyra-search-result-title {
  color: var(--lumyra-amber-dark);
}

body .lumyra-search-result-excerpt {
  color: var(--lumyra-text-muted);
  font-size: 17px;
  line-height: 1.7;
}

body .lumyra-search-page .navigation.pagination {
  margin-top: 32px;
}

body .lumyra-search-page .page-numbers {
  color: var(--lumyra-green);
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: 11px 8px;
  text-align: center;
}

body .lumyra-search-page .page-numbers.current {
  color: var(--lumyra-amber-dark);
  font-weight: 600;
}

/* Legal pages use the same readable longform measure as articles. The Safe
   Use notice is deliberately stronger than ordinary prose without reducing it
   to warning-label small print. */
body .lumyra-legal-updated {
  color: var(--lumyra-text-muted) !important;
  font-size: 15px !important;
  margin-bottom: 24px !important;
}

body .lumyra-legal-callout {
  background: var(--lumyra-sunken);
  border-left: 3px solid var(--lumyra-amber);
  margin: 0 0 40px;
  padding: 24px;
}

body .lumyra-legal-callout-critical {
  background: var(--lumyra-raised);
  border: 1px solid var(--lumyra-err);
  border-left-width: 4px;
}

body .lumyra-legal-callout h2 {
  margin-top: 0 !important;
}

body .lumyra-legal-callout > :last-child {
  margin-bottom: 0 !important;
}

body .lumyra-legal-placeholder {
  background: var(--lumyra-sunken);
  border-left: 2px solid var(--lumyra-amber);
  color: var(--lumyra-text-muted) !important;
  font-style: italic;
  padding: 16px 20px;
}

body .lumyra-safe-use-link {
  margin-top: 24px;
}

@media (max-width: 599px) {
  body .lumyra-system-page {
    padding: 32px 20px 48px;
  }

  body .lumyra-system-search form,
  body .lumyra-search-page .search-form {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   26. Full bleed bands inside the inner page template

   On the homepage and the product template the quote is a top level band, so
   it runs edge to edge. Our Story is an Elementor document rendered inside the
   inner page template, whose body carries the horizontal gutter, so the same
   band sat inset 160px with cream either side of a dark green block. Against a
   footer that does run full width, it read as a mistake.

   The negative margin mirrors the gutter exactly rather than using 100vw:
   100vw counts the scrollbar, which would push the page into the horizontal
   overflow section 8 does not allow. Note the 40px, not 20px: the base
   .lumyra-section gutter is max(40px, ...) and only the phone override drops
   to 20px, which is why a first attempt at this left a 20px sliver of cream.
   --------------------------------------------------------------------------- */

body .lumyra-singular-body .lumyra-quote,
body .lumyra-singular-body .lumyra-waitlist {
  margin-inline: calc(-1 * max(40px, (100vw - 1200px) / 2 + 40px)) !important;
  max-width: none !important;
  width: auto !important;
}

/* About: a cream editorial bridge separates the quote from the dark waitlist.
   It uses the existing section, typography and button components; only the
   page-specific composition lives here. */
body .lumyra-writing-band {
  align-items: center !important;
  background: var(--lumyra-cream) !important;
  gap: 24px !important;
  padding: 80px 40px !important;
  text-align: center !important;
  width: 100% !important;
}

body .lumyra-writing-band .lumyra-centered-copy {
  max-width: 760px !important;
}

body .lumyra-writing-band .lumyra-centered-copy p {
  margin: 0 !important;
}

body .lumyra-writing-band .lumyra-button {
  align-self: center !important;
  margin-top: 8px !important;
}

body .lumyra-writing-band .elementor-button-wrapper {
  text-align: center !important;
}

@media (max-width: 767px) {
  body .lumyra-writing-band {
    gap: 20px !important;
    padding: 56px 20px !important;
  }
}

@media (max-width: 767px) {
  body .lumyra-singular-body .lumyra-quote,
  body .lumyra-singular-body .lumyra-waitlist {
    margin-inline: calc(-1 * max(20px, (100vw - 1200px) / 2 + 20px)) !important;
  }
}

/* ---------------------------------------------------------------------------
   27. The header actually sticks

   .lumyra-native-header already carried position: sticky, and it never stuck.
   Sticky only travels inside its containing block, and Elementor wraps a theme
   part in .elementor-location-header, which is exactly as tall as the header
   itself. 95px of room to move means it scrolls away with its own wrapper.

   The wrapper takes the stickiness instead, since its containing block is the
   body. The inner header goes static so the two cannot both claim an offset,
   and the condensed-on-scroll class is untouched because it lives on the inner
   element and only changes the logo size.
   --------------------------------------------------------------------------- */

body .elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

body.admin-bar .elementor-location-header {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .elementor-location-header {
    top: 46px !important;
  }
}

/* WordPress makes its toolbar non-fixed at <=600px. Normal document flow
   clears it initially; the header must then stick to the viewport edge. */
@media screen and (max-width: 600px) {
  body.admin-bar .elementor-location-header {
    top: 0 !important;
  }
}

body .lumyra-native-header {
  position: static !important;
  top: auto !important;
}

/* ---------------------------------------------------------------------------
   28. How to use, on 06 only

   The client's brief of 25 August says this block "goes under every product",
   and it has been on all six. This restricts it to 06 on a later instruction
   relayed through the developer.

   The product safety block is deliberately prominent on every product page.
   It is safety guidance, not marketing copy, and links to the complete Safe
   Use document for the full exclusions and instructions.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   30. Learn index, query driven

   The article cards on this page are rendered by Elementor's Posts widget now
   rather than built as containers, because pagination needs a query that runs
   per request. Everything below maps that widget's markup onto the measurements
   .lumyra-article-card already uses, so the card is unchanged to look at: same
   framed 3:2 image, eyebrow, 23px title, 15px meta line and 32px grid gutter.

   The title arrives as a real link here, which is the other thing that changed.
   It was a bare heading before, so only the image and the read-more were
   clickable and the most obvious click target on the card did nothing.
   --------------------------------------------------------------------------- */

/* The widget is a full width block; the grid lives one level in, on Elementor's
   own posts container. */
body .lumyra-article-query {
  width: 100% !important;
}

body .lumyra-article-query .elementor-posts {
  display: grid !important;
  gap: 32px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body .lumyra-article-query .elementor-post {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  /* The classic skin centres its card text. The built card was left aligned,
     which is what the reference article card does and what the ragged right
     edge of a three line title needs. */
  text-align: left !important;
}

body .lumyra-article-query .elementor-post__thumbnail__link {
  background: var(--lumyra-sunken) !important;
  border: 1px solid var(--lumyra-border) !important;
  margin: 0 0 16px !important;
  padding: 16px !important;
  transition: border-color var(--lumyra-dur, 180ms) cubic-bezier(.22, .61, .36, 1) !important;
  width: 100% !important;
}

body .lumyra-article-query .elementor-post:hover .elementor-post__thumbnail__link,
body .lumyra-article-query .elementor-post:focus-within .elementor-post__thumbnail__link {
  border-color: var(--lumyra-border-strong, #9ba69b) !important;
}

body .lumyra-article-query .elementor-post__thumbnail {
  padding-bottom: 0 !important;
}

body .lumyra-article-query .elementor-post__thumbnail img {
  aspect-ratio: 3 / 2 !important;
  display: block !important;
  object-fit: cover !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

body .lumyra-article-query .elementor-post__text {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
}

body .lumyra-article-query .elementor-post__text::before {
  color: var(--lumyra-sage) !important;
  content: "Ingredients";
  display: block;
  font-family: var(--lumyra-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
}

body .lumyra-article-query .elementor-post__title {
  flex: 1 1 auto !important;
  margin: 8px 0 !important;
}

body .lumyra-article-query .elementor-post__title,
body .lumyra-article-query .elementor-post__title a {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}

body .lumyra-article-query .elementor-post:hover .elementor-post__title a,
body .lumyra-article-query .elementor-post:focus-within .elementor-post__title a {
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
}

body .lumyra-article-query .elementor-post__title a:focus-visible {
  outline: 2px solid var(--lumyra-gold, #b9852f);
  outline-offset: 4px;
}

body .lumyra-article-query .elementor-post__excerpt {
  margin: 0 0 12px !important;
}

body .lumyra-article-query .elementor-post__excerpt p {
  color: var(--lumyra-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Same treatment as .lumyra-text-link, which is what the built card used. */
body .lumyra-article-query .elementor-post__read-more {
  align-self: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--lumyra-sage) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
}

@media (prefers-reduced-motion: reduce) {
  body .lumyra-article-query .elementor-post__thumbnail__link {
    transition: none !important;
  }
}

/* Pagination. Section 6 numbers: 44px targets, hairline box, current page in
   deep green. Elementor ships centred text links with no hit area. */
body .lumyra-article-query .elementor-pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 48px !important;
}

body .lumyra-article-query .elementor-pagination .page-numbers {
  align-items: center !important;
  background: var(--lumyra-white) !important;
  border: 1px solid var(--lumyra-border-strong, #9ba69b) !important;
  color: var(--lumyra-green) !important;
  display: inline-flex !important;
  font-size: 15px !important;
  height: 44px !important;
  justify-content: center !important;
  min-width: 44px !important;
  padding: 0 12px !important;
  text-decoration: none !important;
}

body .lumyra-article-query .elementor-pagination .page-numbers.current {
  background: var(--lumyra-green) !important;
  border-color: var(--lumyra-green) !important;
  color: var(--lumyra-cream) !important;
}

body .lumyra-article-query .elementor-pagination a.page-numbers:hover {
  background: var(--lumyra-cream) !important;
}

@media (max-width: 899px) {
  body .lumyra-article-query .elementor-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  body .lumyra-article-query .elementor-posts {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   31. Explicit waitlist confirmation

   Email links open a page first, then a real button confirms the address. This
   prevents automated link scanners from subscribing someone by following a
   GET request. The control uses the standard amber waitlist action treatment.
   --------------------------------------------------------------------------- */

body .lumyra-waitlist-action-form {
  margin-top: 32px;
}

body .lumyra-waitlist-action-form button {
  align-items: center;
  background: var(--lumyra-amber);
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--lumyra-green-deep);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--lumyra-body);
  font-size: 16px;
  font-weight: 500;
  justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

body .lumyra-waitlist-action-form button:hover {
  background: var(--lumyra-green);
  color: var(--lumyra-cream);
}

@media (max-width: 599px) {
  body .lumyra-waitlist-action-form button {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   32. Release-state WooCommerce actions

   WooCommerce Blocks loads its button palette after the theme. On cart and
   checkout that left the label dark green while the hover background also
   became dark green. These are the purchase actions only; quantity steppers,
   remove icons and payment controls keep their native interaction treatment.
   --------------------------------------------------------------------------- */

body .wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-cart-item__remove-link),
body .wp-block-woocommerce-checkout .wc-block-components-button,
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button,
body .wc-block-components-totals-coupon__button,
body.woocommerce .single_add_to_cart_button,
body.woocommerce a.checkout-button,
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt {
  align-items: center !important;
  background: var(--lumyra-green) !important;
  border: 1px solid var(--lumyra-green) !important;
  border-radius: 2px !important;
  color: var(--lumyra-cream) !important;
  display: inline-flex !important;
  font-family: var(--lumyra-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  justify-content: center !important;
  min-height: 54px !important;
  text-decoration: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

body .wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-cart-item__remove-link):hover,
body .wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-cart-item__remove-link):focus-visible,
body .wp-block-woocommerce-checkout .wc-block-components-button:hover,
body .wp-block-woocommerce-checkout .wc-block-components-button:focus-visible,
body .wc-block-cart__submit-button:hover,
body .wc-block-cart__submit-button:focus-visible,
body .wc-block-components-checkout-place-order-button:hover,
body .wc-block-components-checkout-place-order-button:focus-visible,
body .wc-block-components-totals-coupon__button:hover,
body .wc-block-components-totals-coupon__button:focus-visible,
body.woocommerce .single_add_to_cart_button:hover,
body.woocommerce .single_add_to_cart_button:focus-visible,
body.woocommerce a.checkout-button:hover,
body.woocommerce a.checkout-button:focus-visible,
body.woocommerce a.button.alt:hover,
body.woocommerce a.button.alt:focus-visible,
body.woocommerce button.button.alt:hover,
body.woocommerce button.button.alt:focus-visible,
body.woocommerce input.button.alt:hover,
body.woocommerce input.button.alt:focus-visible {
  background: var(--lumyra-green-dark) !important;
  border-color: var(--lumyra-green-dark) !important;
  color: var(--lumyra-cream) !important;
}

body .wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-cart-item__remove-link) .wc-block-components-button__text,
body .wp-block-woocommerce-checkout .wc-block-components-button .wc-block-components-button__text,
body .wc-block-cart__submit-button .wc-block-components-button__text,
body .wc-block-components-checkout-place-order-button .wc-block-components-button__text,
body .wc-block-components-totals-coupon__button .wc-block-components-button__text {
  color: inherit !important;
}

body .wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-cart-item__remove-link):focus-visible,
body .wp-block-woocommerce-checkout .wc-block-components-button:focus-visible,
body .wc-block-cart__submit-button:focus-visible,
body .wc-block-components-checkout-place-order-button:focus-visible,
body .wc-block-components-totals-coupon__button:focus-visible,
body.woocommerce .single_add_to_cart_button:focus-visible,
body.woocommerce a.checkout-button:focus-visible,
body.woocommerce a.button.alt:focus-visible,
body.woocommerce button.button.alt:focus-visible,
body.woocommerce input.button.alt:focus-visible {
  outline: 3px solid var(--lumyra-amber) !important;
  outline-offset: 3px !important;
}

body .wc-block-cart__submit-button[disabled],
body .wc-block-components-checkout-place-order-button[disabled],
body .wc-block-components-totals-coupon__button[disabled],
body.woocommerce .single_add_to_cart_button[disabled] {
  cursor: not-allowed !important;
  opacity: .45 !important;
}

/* With the launch signup removed, the open-shop footer becomes a balanced
   three-column grid instead of leaving an empty fourth track. */
body.lumyra-shop-open .lumyra-footer-columns {
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr !important;
}

@media (max-width: 899px) {
  body.lumyra-shop-open .lumyra-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
  body.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.lumyra-shop-open .lumyra-footer-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   33. Lumyra commerce system

   Cart, Checkout and My Account keep WooCommerce's tested transaction logic,
   while every visible surface, field, notice and state uses Lumyra component
   tokens. No elevation is used anywhere in the brand system.
   --------------------------------------------------------------------------- */

body.woocommerce-cart .lumyra-longform-content,
body.woocommerce-checkout .lumyra-longform-content,
body.woocommerce-account .lumyra-longform-content {
  color: var(--lumyra-commerce-text) !important;
  max-width: 1160px !important;
}

body.woocommerce-cart .lumyra-longform-content > .elementor-widget-container,
body.woocommerce-checkout .lumyra-longform-content > .elementor-widget-container,
body.woocommerce-account .lumyra-longform-content > .elementor-widget-container {
  width: 100% !important;
}

body.woocommerce-cart h2,
body.woocommerce-cart h3,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-account h2,
body.woocommerce-account h3,
body.woocommerce-account legend {
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
}

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  margin: 0 !important;
  max-width: none !important;
}

body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-account .woocommerce-form,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-order-received .woocommerce-order,
body.woocommerce-order-pay form#order_review {
  background: var(--lumyra-commerce-bg) !important;
  border: 1px solid var(--lumyra-commerce-border) !important;
  border-radius: var(--lumyra-commerce-radius) !important;
  box-shadow: none !important;
}

body.woocommerce-cart .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-account .woocommerce-form,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-order-received .woocommerce-order,
body.woocommerce-order-pay form#order_review {
  padding: var(--lumyra-commerce-space-lg) !important;
}

body.woocommerce-cart .wc-block-cart-items th,
body.woocommerce-cart .wc-block-cart-items td,
body.woocommerce-cart .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-checkout__terms,
body.woocommerce-checkout .wc-block-checkout__actions,
body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td,
body.woocommerce-order-received table.shop_table th,
body.woocommerce-order-received table.shop_table td {
  border-color: var(--lumyra-commerce-border) !important;
}

body.woocommerce-cart .wc-block-cart-item__product a,
body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-checkout .wc-block-components-product-name,
body.woocommerce-account .woocommerce-MyAccount-content a,
body.woocommerce-account .woocommerce-LostPassword a {
  color: var(--lumyra-commerce-text) !important;
  text-decoration-color: var(--lumyra-sage) !important;
  text-underline-offset: 4px !important;
}

body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-cart-item__prices,
body.woocommerce-checkout .wc-block-components-product-metadata,
body.woocommerce-checkout .wc-block-components-checkout-step__description,
body.woocommerce-account .lumyra-account-intro,
body.woocommerce-account .woocommerce-MyAccount-content p {
  color: var(--lumyra-commerce-muted) !important;
  line-height: 1.7 !important;
}

body.woocommerce-cart input:not([type="checkbox"]):not([type="radio"]),
body.woocommerce-cart select,
body.woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]),
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-account input.input-text,
body.woocommerce-account select,
body.woocommerce-account textarea {
  background: var(--lumyra-commerce-bg) !important;
  border: 1.5px solid var(--lumyra-border-strong) !important;
  border-radius: var(--lumyra-commerce-radius) !important;
  box-shadow: none !important;
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 16px !important;
  min-height: var(--lumyra-commerce-field-height) !important;
}

body.woocommerce-cart input:not([type="checkbox"]):not([type="radio"]):focus,
body.woocommerce-cart select:focus,
body.woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]):focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-account input.input-text:focus,
body.woocommerce-account select:focus,
body.woocommerce-account textarea:focus {
  border-color: var(--lumyra-commerce-border-active) !important;
  box-shadow: none !important;
  outline: 3px solid var(--lumyra-amber) !important;
  outline-offset: 3px !important;
}

body.woocommerce-cart label,
body.woocommerce-checkout label,
body.woocommerce-account label {
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector,
body.woocommerce-checkout .wc-block-components-quantity-selector {
  border: 1px solid var(--lumyra-commerce-border-active) !important;
  border-radius: var(--lumyra-commerce-radius) !important;
  box-shadow: none !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector input,
body.woocommerce-checkout .wc-block-components-quantity-selector input {
  border: 0 !important;
  min-height: 42px !important;
  outline: 0 !important;
}

body.woocommerce-cart .wc-block-cart-item__remove-link {
  color: var(--lumyra-commerce-danger) !important;
  font-size: 14px !important;
  min-height: 44px !important;
  text-underline-offset: 4px !important;
}

body .woocommerce-error,
body .woocommerce-info,
body .woocommerce-message,
body .wc-block-components-notice-banner {
  background: var(--lumyra-commerce-bg) !important;
  border: 1px solid var(--lumyra-commerce-border) !important;
  border-left: 4px solid var(--lumyra-sage) !important;
  border-radius: var(--lumyra-commerce-radius) !important;
  box-shadow: none !important;
  color: var(--lumyra-commerce-text) !important;
  line-height: 1.6 !important;
  padding: var(--lumyra-commerce-space-md) !important;
}

body .woocommerce-error,
body .wc-block-components-notice-banner.is-error {
  border-left-color: var(--lumyra-commerce-danger) !important;
}

body .lumyra-commerce-empty {
  align-items: center;
  background: var(--lumyra-commerce-bg);
  border: 1px solid var(--lumyra-commerce-border);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 760px;
  padding: 72px var(--lumyra-commerce-space-lg);
  text-align: center;
}

body .lumyra-commerce-eyebrow {
  color: var(--lumyra-sage) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  margin: 0 0 var(--lumyra-commerce-space-sm) !important;
  text-transform: uppercase;
}

body .lumyra-commerce-empty h2 {
  font-size: clamp(32px, 4vw, 48px) !important;
  margin: 0 0 var(--lumyra-commerce-space-sm) !important;
}

body .lumyra-commerce-empty > p:not(.lumyra-commerce-eyebrow) {
  color: var(--lumyra-commerce-muted) !important;
  margin: 0 0 var(--lumyra-commerce-space-md) !important;
  max-width: 560px;
}

body .lumyra-commerce-button,
body.woocommerce-account button.button,
body.woocommerce-account a.button,
body.woocommerce-order-received a.button,
body.woocommerce-order-pay button.button {
  align-items: center;
  background: var(--lumyra-green) !important;
  border: 1px solid var(--lumyra-green) !important;
  border-radius: var(--lumyra-commerce-radius) !important;
  color: var(--lumyra-cream) !important;
  display: inline-flex;
  font-family: var(--lumyra-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  justify-content: center;
  min-height: 54px;
  padding: 14px 28px !important;
  text-decoration: none !important;
}

body .lumyra-commerce-button:hover,
body .lumyra-commerce-button:focus-visible,
body.woocommerce-account button.button:hover,
body.woocommerce-account button.button:focus-visible,
body.woocommerce-account a.button:hover,
body.woocommerce-account a.button:focus-visible {
  background: var(--lumyra-green-dark) !important;
  border-color: var(--lumyra-green-dark) !important;
  color: var(--lumyra-cream) !important;
}

body.woocommerce-account .lumyra-account-intro {
  margin: 0 auto var(--lumyra-commerce-space-md) !important;
  max-width: 680px;
  text-align: center;
}

body.woocommerce-account .woocommerce-form-login {
  margin: 0 auto !important;
  max-width: 680px;
}

body.woocommerce-account .woocommerce-form-row {
  margin-bottom: var(--lumyra-commerce-space-md) !important;
}

body.woocommerce-account .woocommerce-form-login__rememberme {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

body.woocommerce-account .woocommerce-form-login__rememberme input {
  accent-color: var(--lumyra-green);
  height: 22px;
  margin-right: 10px;
  width: 22px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
  overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
  border-top: 1px solid var(--lumyra-commerce-border);
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
  color: var(--lumyra-commerce-text) !important;
  display: block;
  min-height: 48px;
  padding: var(--lumyra-commerce-space-sm) var(--lumyra-commerce-space-md);
  text-decoration: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
  background: var(--lumyra-sunken) !important;
}

body.woocommerce-account table.shop_table,
body.woocommerce-order-received table.shop_table {
  border: 1px solid var(--lumyra-commerce-border) !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  body.woocommerce-cart .wc-block-components-sidebar,
  body.woocommerce-checkout .wc-block-checkout__sidebar,
  body.woocommerce-checkout .wc-block-checkout__main,
  body.woocommerce-account .woocommerce-form,
  body.woocommerce-account .woocommerce-MyAccount-content,
  body.woocommerce-order-received .woocommerce-order,
  body.woocommerce-order-pay form#order_review,
  body .lumyra-commerce-empty {
    padding: 28px 20px !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation,
  body.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    margin-bottom: var(--lumyra-commerce-space-md) !important;
    width: 100% !important;
  }

  body.woocommerce-cart .wc-block-cart-items__row {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------------
   34. Commerce density and responsive refinement

   Product identity and price lead the cart row. Supporting excerpts are
   already available on product pages, so the cart omits them and keeps the
   purchase controls compact. Checkout controls opt out of the full text-field
   height and every card owns a consistent inner gutter at each breakpoint.
   --------------------------------------------------------------------------- */

body.woocommerce-cart .lumyra-singular-body,
body.woocommerce-checkout .lumyra-singular-body,
body.woocommerce-account .lumyra-singular-body {
  padding-block: 12px 28px !important;
}

body.woocommerce-cart .wc-block-cart-items th,
body.woocommerce-cart .wc-block-cart-items td {
  padding-block: 16px !important;
}

body.woocommerce-cart .wc-block-cart-items th:first-child,
body.woocommerce-cart .wc-block-cart-items td:first-child {
  padding-left: 24px !important;
}

body.woocommerce-cart .wc-block-cart-items th:last-child,
body.woocommerce-cart .wc-block-cart-items td:last-child {
  padding-right: 24px !important;
}

body.woocommerce-cart .wc-block-cart-item__product {
  padding-inline: 20px 16px !important;
}

body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-checkout .wc-block-components-product-name {
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
  margin-bottom: 6px !important;
  overflow-wrap: anywhere;
}

body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-components-product-metadata__description {
  display: none !important;
}

body.woocommerce-checkout .wc-block-components-product-metadata,
body.woocommerce-checkout .wc-block-components-product-metadata__description {
  display: none !important;
}

body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value,
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price .wc-block-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 20px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body.woocommerce-cart .wc-block-cart-item__prices {
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector,
body.woocommerce-checkout .wc-block-components-quantity-selector {
  display: grid !important;
  grid-template-columns: repeat(3, 40px) !important;
  height: 42px !important;
  min-height: 42px !important;
  overflow: hidden !important;
  width: 120px !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button,
body.woocommerce-checkout .wc-block-components-quantity-selector__button,
body.woocommerce-cart .wc-block-components-quantity-selector__input,
body.woocommerce-checkout .wc-block-components-quantity-selector__input {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  width: 40px !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button,
body.woocommerce-checkout .wc-block-components-quantity-selector__button {
  align-items: center !important;
  display: flex !important;
  font-size: 18px !important;
  justify-content: center !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector__input,
body.woocommerce-checkout .wc-block-components-quantity-selector__input {
  font-size: 15px !important;
  line-height: 40px !important;
  text-align: center !important;
}

body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--lumyra-commerce-border-active) !important;
  border-right: 1px solid var(--lumyra-commerce-border-active) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  width: 40px !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:hover,
body.woocommerce-checkout .wc-block-components-quantity-selector__button:hover,
body.woocommerce-cart .wc-block-components-quantity-selector__button:focus-visible,
body.woocommerce-checkout .wc-block-components-quantity-selector__button:focus-visible {
  background: var(--lumyra-sunken) !important;
  color: var(--lumyra-green) !important;
  opacity: 1 !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:focus-visible,
body.woocommerce-checkout .wc-block-components-quantity-selector__button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--lumyra-amber) !important;
  outline: 0 !important;
}

body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus,
body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
  border-left-color: var(--lumyra-commerce-border-active) !important;
  border-right-color: var(--lumyra-commerce-border-active) !important;
  box-shadow: inset 0 0 0 2px var(--lumyra-amber) !important;
  outline: 0 !important;
}

body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-cart .wc-block-components-sidebar {
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 32px !important;
}

body.woocommerce-checkout .wc-block-components-checkout-step {
  box-sizing: border-box !important;
  margin-bottom: 18px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.woocommerce-checkout .wc-block-components-radio-control,
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-checkout__add-note,
body.woocommerce-checkout .wc-block-components-checkbox {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.woocommerce-checkout .wc-block-components-radio-control__option {
  min-height: 52px !important;
  padding: 14px 16px 14px 48px !important;
}

body.woocommerce-checkout input[type="radio"].wc-block-components-radio-control__input,
body.woocommerce-checkout input[type="checkbox"].wc-block-components-checkbox__input {
  accent-color: var(--lumyra-green) !important;
  box-sizing: border-box !important;
  flex: 0 0 20px !important;
  height: 20px !important;
  margin-block: 0 !important;
  max-width: 20px !important;
  min-height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  width: 20px !important;
}

body.woocommerce-checkout .wc-block-checkout__add-note,
body.woocommerce-checkout .wc-block-components-checkbox {
  min-height: 44px !important;
}

body.woocommerce-checkout .wc-block-components-checkbox__label,
body.woocommerce-checkout .wc-block-components-radio-control__label {
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  body.woocommerce-checkout .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout__sidebar,
  body.woocommerce-cart .wc-block-components-sidebar {
    padding: 24px !important;
  }
}

@media (max-width: 767px) {
  body.woocommerce-cart .wc-block-cart-items th:first-child,
  body.woocommerce-cart .wc-block-cart-items td:first-child {
    padding-left: 12px !important;
  }

  body.woocommerce-cart .wc-block-cart-items th:last-child,
  body.woocommerce-cart .wc-block-cart-items td:last-child {
    padding-right: 12px !important;
  }

  body.woocommerce-cart .lumyra-singular-body,
  body.woocommerce-checkout .lumyra-singular-body,
  body.woocommerce-account .lumyra-singular-body {
    padding-block: 8px 24px !important;
  }

  body.woocommerce-cart .wc-block-cart-items__row {
    grid-template-columns: 80px minmax(0, 1fr) 56px !important;
  }

  body.woocommerce-cart .wc-block-cart-item__image {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.woocommerce-cart .wc-block-cart-item__total {
    padding-right: 12px !important;
  }

  body.woocommerce-cart .wc-block-cart-item__product {
    padding-inline: 0 12px !important;
  }

  body.woocommerce-cart .wc-block-components-product-name,
  body.woocommerce-checkout .wc-block-components-product-name {
    font-size: 17px !important;
  }

  body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value,
  body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
  body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price,
  body.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
  body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price .wc-block-formatted-money-amount,
  body.woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
    font-size: 18px !important;
  }

  body.woocommerce-checkout .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout__sidebar,
  body.woocommerce-cart .wc-block-components-sidebar,
  body.woocommerce-account .woocommerce-form,
  body.woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px !important;
  }

  body.woocommerce-checkout .wc-block-components-radio-control__option {
    padding: 12px 14px 12px 44px !important;
  }
}

@media (max-width: 479px) {
  body.woocommerce-cart .wc-block-cart-items__row {
    grid-template-columns: 72px minmax(0, 1fr) 52px !important;
  }

  body.woocommerce-cart .wc-block-cart-item__image {
    padding-right: 10px !important;
  }

  body.woocommerce-cart .wc-block-cart-item__product {
    padding-right: 8px !important;
  }

  body.woocommerce-checkout .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout__sidebar,
  body.woocommerce-cart .wc-block-components-sidebar {
    padding: 16px !important;
  }
}

@media (max-width: 359px) {
  body .lumyra-product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   35. Order confirmation

   The receipt follows the same token-driven commerce system as Cart and
   Checkout. A photographic success hero gives the completed purchase a clear
   sense of occasion, while the facts and fulfilment details remain legible.
   --------------------------------------------------------------------------- */

body.woocommerce-order-received .lumyra-longform-content {
  color: var(--lumyra-commerce-text) !important;
  max-width: 1160px !important;
}

body.woocommerce-order-received .woocommerce-order {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid;
  gap: var(--lumyra-commerce-space-md);
  padding: 0 !important;
}

body.woocommerce-order-received .woocommerce-order > * {
  box-sizing: border-box;
  min-width: 0;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-thankyou-order-failed {
  background: var(--lumyra-commerce-bg) !important;
  border: 1px solid var(--lumyra-commerce-border) !important;
  border-left: 4px solid var(--lumyra-sage) !important;
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-body) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 20px 24px !important;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received {
  animation: lumyra-order-hero-in .7s cubic-bezier(.22, 1, .36, 1) both;
  background-color: var(--lumyra-surface) !important;
  background-image:
    linear-gradient(90deg, rgba(245, 243, 236, .99) 0%, rgba(245, 243, 236, .95) 40%, rgba(245, 243, 236, .32) 68%, rgba(245, 243, 236, .06) 100%),
    url("../images/editorial/catalogue-placeholders/hero-complete-kit-catalogue.webp") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-left-width: 1px !important;
  display: flex;
  flex-direction: column;
  font-family: var(--lumyra-display) !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  gap: 16px;
  justify-content: center;
  line-height: 1.18 !important;
  min-height: 300px;
  overflow: hidden;
  padding: 52px 50% 52px 48px !important;
  text-wrap: balance;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  border-bottom: 2px solid var(--lumyra-amber);
  color: var(--lumyra-sage-deep);
  content: "Order confirmed";
  font-family: var(--lumyra-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.4;
  padding-bottom: 10px;
  text-transform: uppercase;
  width: max-content;
}

body.woocommerce-order-received .woocommerce-thankyou-order-failed {
  border-left-color: var(--lumyra-commerce-danger) !important;
}

body.woocommerce-order-received .woocommerce-order-overview {
  animation: lumyra-order-facts-in .55s cubic-bezier(.22, 1, .36, 1) .14s both;
  background: var(--lumyra-commerce-bg) !important;
  border: 1px solid var(--lumyra-commerce-border) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-order-received .woocommerce-order-overview li {
  border: 0 !important;
  border-right: 1px solid var(--lumyra-commerce-border) !important;
  color: var(--lumyra-sage-deep) !important;
  float: none !important;
  font-family: var(--lumyra-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  grid-column: auto !important;
  justify-self: stretch !important;
  letter-spacing: .12em !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  min-width: 0;
  padding: 18px 20px !important;
  text-align: left !important;
  text-transform: uppercase;
  width: auto !important;
}

body.woocommerce-order-received .woocommerce-order-overview li:last-child {
  border-right: 0 !important;
}

body.woocommerce-order-received .woocommerce-order-overview strong {
  color: var(--lumyra-commerce-text) !important;
  display: block;
  font-size: 18px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  margin-top: 6px;
  overflow-wrap: anywhere;
  text-transform: none;
}

body.woocommerce-order-received .woocommerce-order > p:not([class]) {
  background: var(--lumyra-sunken) !important;
  border: 1px solid var(--lumyra-commerce-border) !important;
  border-left: 4px solid var(--lumyra-sage) !important;
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-body) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 18px 20px !important;
}

body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce-order-downloads {
  background: var(--lumyra-commerce-bg) !important;
  border: 1px solid var(--lumyra-commerce-border) !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 32px !important;
}

body.woocommerce-order-received .woocommerce-order-details h2,
body.woocommerce-order-received .woocommerce-customer-details h2,
body.woocommerce-order-received .woocommerce-order-downloads h2 {
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  margin: 0 0 20px !important;
}

body.woocommerce-order-received table.shop_table {
  border: 1px solid var(--lumyra-commerce-border) !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  table-layout: auto;
  width: 100% !important;
}

body.woocommerce-order-received table.shop_table th,
body.woocommerce-order-received table.shop_table td {
  border-color: var(--lumyra-commerce-border) !important;
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-body) !important;
  line-height: 1.5 !important;
  padding: 15px 16px !important;
}

body.woocommerce-order-received table.shop_table thead th {
  background: var(--lumyra-sunken) !important;
  color: var(--lumyra-sage-deep) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

body.woocommerce-order-received table.shop_table tbody td {
  font-size: 16px !important;
  font-weight: 400 !important;
}

body.woocommerce-order-received table.shop_table .product-name a {
  color: var(--lumyra-commerce-text) !important;
  font-weight: 500 !important;
  overflow-wrap: anywhere;
  text-decoration-color: var(--lumyra-sage) !important;
  text-underline-offset: 4px;
}

body.woocommerce-order-received table.shop_table .product-total,
body.woocommerce-order-received table.shop_table tfoot td {
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  text-align: right;
  white-space: nowrap;
}

body.woocommerce-order-received table.shop_table tfoot th {
  font-weight: 600 !important;
  text-align: left;
}

body.woocommerce-order-received table.shop_table tfoot tr:last-child {
  background: var(--lumyra-sunken) !important;
}

body.woocommerce-order-received table.shop_table tfoot tr:last-child th,
body.woocommerce-order-received table.shop_table tfoot tr:last-child td {
  font-size: 18px !important;
}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns {
  display: grid !important;
  gap: var(--lumyra-commerce-space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  width: auto !important;
}

body.woocommerce-order-received .woocommerce-customer-details address {
  background: var(--lumyra-sunken) !important;
  border: 1px solid var(--lumyra-commerce-border) !important;
  color: var(--lumyra-commerce-text) !important;
  font-family: var(--lumyra-body) !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
  padding: 20px !important;
}

body.woocommerce-order-received .woocommerce-order a:focus-visible {
  outline: 2px solid var(--lumyra-amber) !important;
  outline-offset: 3px !important;
}

@keyframes lumyra-order-hero-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lumyra-order-facts-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  body.woocommerce-order-received .woocommerce-order-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.woocommerce-order-received .woocommerce-order-overview li:nth-child(2n) {
    border-right: 0 !important;
  }

  body.woocommerce-order-received .woocommerce-order-overview li {
    border-bottom: 1px solid var(--lumyra-commerce-border) !important;
  }

  body.woocommerce-order-received .woocommerce-order-overview li:last-child {
    border-bottom: 0 !important;
  }
}

@media (max-width: 767px) {
  body.woocommerce-order-received .woocommerce-order {
    gap: 20px;
  }

  body.woocommerce-order-received .woocommerce-order-overview,
  body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns {
    grid-template-columns: 1fr !important;
  }

  body.woocommerce-order-received .woocommerce-order-overview li,
  body.woocommerce-order-received .woocommerce-order-overview li:nth-child(2n) {
    border-bottom: 1px solid var(--lumyra-commerce-border) !important;
    border-right: 0 !important;
    padding: 16px 18px !important;
  }

  body.woocommerce-order-received .woocommerce-order-overview li:last-child {
    border-bottom: 0 !important;
  }

  body.woocommerce-order-received .woocommerce-thankyou-order-received,
  body.woocommerce-order-received .woocommerce-thankyou-order-failed,
  body.woocommerce-order-received .woocommerce-order > p:not([class]) {
    padding: 16px 18px !important;
  }

  body.woocommerce-order-received .woocommerce-thankyou-order-received {
    background-image:
      linear-gradient(0deg, rgba(245, 243, 236, .99) 0%, rgba(245, 243, 236, .96) 40%, rgba(245, 243, 236, .2) 70%, rgba(245, 243, 236, .04) 100%),
      url("../images/editorial/catalogue-placeholders/hero-complete-kit-catalogue.webp") !important;
    background-position: 68% center !important;
    font-size: clamp(28px, 9vw, 36px) !important;
    justify-content: flex-end;
    min-height: 390px;
    padding: 220px 24px 30px !important;
  }

  body.woocommerce-order-received .woocommerce-order-details,
  body.woocommerce-order-received .woocommerce-customer-details,
  body.woocommerce-order-received .woocommerce-order-downloads {
    padding: 20px !important;
  }

  body.woocommerce-order-received .woocommerce-order-details h2,
  body.woocommerce-order-received .woocommerce-customer-details h2,
  body.woocommerce-order-received .woocommerce-order-downloads h2 {
    font-size: 24px !important;
    margin-bottom: 16px !important;
  }

  body.woocommerce-order-received .woocommerce-table--order-details thead {
    display: none;
  }

  body.woocommerce-order-received .woocommerce-table--order-details tbody tr,
  body.woocommerce-order-received .woocommerce-table--order-details tfoot tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.woocommerce-order-received .woocommerce-table--order-details tbody td,
  body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
  body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
    display: block;
    min-width: 0;
    width: auto !important;
  }

  body.woocommerce-order-received table.shop_table th,
  body.woocommerce-order-received table.shop_table td {
    padding: 13px 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-order-received .woocommerce-thankyou-order-received,
  body.woocommerce-order-received .woocommerce-order-overview {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   36. My Account responsive flow

   The account area keeps WooCommerce's endpoint structure while giving every
   tab a predictable responsive frame. Notices no longer collide with their
   actions, forms become single-column on phones, and transactional tables
   reflow into legible cards rather than compressed grids.
   --------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.woocommerce-account .woocommerce-MyAccount-content > :first-child {
  margin-top: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content > :last-child {
  margin-bottom: 0 !important;
}

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
  align-items: center;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-height: 72px;
  padding: 18px 20px !important;
  position: relative;
}

body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-error::before {
  content: none !important;
}

body.woocommerce-account .woocommerce-message .button,
body.woocommerce-account .woocommerce-info .button,
body.woocommerce-account .woocommerce-error .button {
  flex: 0 0 auto;
  float: none !important;
  margin: 0 0 0 auto !important;
  order: 2;
}

body.woocommerce-account .woocommerce-Addresses {
  display: grid;
  gap: var(--lumyra-commerce-space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after {
  content: none !important;
}

body.woocommerce-account .woocommerce-Address {
  background: var(--lumyra-sunken);
  border: 1px solid var(--lumyra-commerce-border);
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  padding: 20px;
  width: auto !important;
}

body.woocommerce-account .woocommerce-Address-title {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

body.woocommerce-account .woocommerce-Address-title h2 {
  margin: 0 !important;
}

body.woocommerce-account .woocommerce-Address-title a {
  flex: 0 0 auto;
  min-height: 44px;
  padding-block: 10px;
}

body.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  line-height: 1.7;
  margin-top: 12px;
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--lumyra-commerce-border);
  margin: 24px 0;
  min-width: 0;
  padding: 20px;
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  padding: 0 8px;
}

body.woocommerce-account .woocommerce-orders-table td,
body.woocommerce-account .woocommerce-table--order-details td,
body.woocommerce-account .woocommerce-table--order-details th {
  overflow-wrap: anywhere;
}

body.woocommerce-account .woocommerce-orders-table .button {
  min-height: 44px;
  padding: 10px 20px !important;
}

@media (max-width: 899px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li,
  body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
    border-bottom: 1px solid var(--lumyra-commerce-border);
    border-right: 1px solid var(--lumyra-commerce-border);
    border-top: 0;
    min-width: 0;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(3n) {
    border-right: 0;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 56px;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(3n) {
    border-right: 1px solid var(--lumyra-commerce-border);
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(2n) {
    border-right: 0;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--lumyra-commerce-border);
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  body.woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px 16px !important;
  }

  body.woocommerce-account .woocommerce-message,
  body.woocommerce-account .woocommerce-info,
  body.woocommerce-account .woocommerce-error {
    align-items: stretch;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    padding: 18px 16px !important;
  }

  body.woocommerce-account .woocommerce-message .button,
  body.woocommerce-account .woocommerce-info .button,
  body.woocommerce-account .woocommerce-error .button {
    display: flex !important;
    margin: 16px 0 0 !important;
    width: 100%;
  }

  body.woocommerce-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }

  body.woocommerce-account .woocommerce-Address {
    padding: 18px 16px;
  }

  body.woocommerce-account .woocommerce-Address-title {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body.woocommerce-account .woocommerce-Address-title h2,
  body.woocommerce-account .woocommerce-Address-title a {
    float: none !important;
    width: auto !important;
  }

  body.woocommerce-account .woocommerce-Address-title h2 {
    font-size: 24px !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
  body.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
    float: none !important;
    width: 100% !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-content fieldset {
    padding: 18px 14px;
  }

  body.woocommerce-account .woocommerce-orders-table,
  body.woocommerce-account .woocommerce-orders-table tbody,
  body.woocommerce-account .woocommerce-orders-table tr,
  body.woocommerce-account .woocommerce-orders-table td {
    display: block !important;
    width: 100% !important;
  }

  body.woocommerce-account .woocommerce-orders-table thead {
    display: none !important;
  }

  body.woocommerce-account .woocommerce-orders-table {
    border: 0 !important;
  }

  body.woocommerce-account .woocommerce-orders-table tr {
    background: var(--lumyra-commerce-bg) !important;
    border: 1px solid var(--lumyra-commerce-border) !important;
    margin-bottom: 14px;
    padding: 6px 14px;
  }

  body.woocommerce-account .woocommerce-orders-table tr:last-child {
    margin-bottom: 0;
  }

  body.woocommerce-account .woocommerce-orders-table td {
    border: 0 !important;
    border-bottom: 1px solid var(--lumyra-commerce-border) !important;
    display: block !important;
    min-height: 48px;
    padding: 12px 0 !important;
    text-align: right !important;
  }

  body.woocommerce-account .woocommerce-orders-table td:last-child {
    border-bottom: 0 !important;
  }

  body.woocommerce-account .woocommerce-orders-table td::before {
    color: var(--lumyra-commerce-text);
    display: block;
    float: left;
    font-weight: 600;
    margin-right: 14px;
    text-align: left;
  }

  body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
    display: block !important;
    padding-top: 14px !important;
  }

  body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
    content: none !important;
  }

  body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button {
    width: 100%;
  }

  body.woocommerce-account .woocommerce-table--order-details {
    table-layout: fixed;
    width: 100% !important;
  }

  body.woocommerce-account .woocommerce-table--order-details th,
  body.woocommerce-account .woocommerce-table--order-details td {
    padding: 12px 10px !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-content > .button,
  body.woocommerce-account .woocommerce-MyAccount-content form > p:last-child .button {
    width: 100%;
  }
}

@media (max-width: 399px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation a {
    font-size: 14px;
    padding-inline: 10px;
  }

  body.woocommerce-account .woocommerce-MyAccount-content {
    padding-inline: 14px !important;
  }
}

/* Address titles need their own line. Keeping the edit action below the title
   prevents WooCommerce's long labels from squeezing headings to min-content. */
body.woocommerce-account .woocommerce-Address-title {
  align-items: start;
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1fr);
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title a {
  float: none !important;
  width: auto !important;
}

body.woocommerce-account .woocommerce-Address-title h2 {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

body.woocommerce-account .woocommerce-Address-title a {
  justify-self: start;
}

/* ---------------------------------------------------------------------------
   37. Header shopping utilities

   Cart and Checkout no longer interrupt the content navigation. The single
   cart destination is a compact basket control with a live numeric badge;
   its text remains available to assistive technology through the link's
   programmatic name. The utility uses a stable 48px target on every viewport.
   --------------------------------------------------------------------------- */

body .lumyra-header-inner {
  gap: 24px !important;
}

body .lumyra-header-brand {
  flex: 0 0 auto !important;
}

body .lumyra-header-nav {
  flex: 1 1 auto !important;
}

body .lumyra-header-nav .elementor-nav-menu {
  gap: 28px !important;
  justify-content: flex-end !important;
}

body .lumyra-header-nav .lumyra-account-menu-item > .elementor-item {
  font-weight: 500 !important;
}

body .lumyra-header-cta.lumyra-when-open {
  flex: 0 0 48px !important;
  text-align: initial !important;
  width: 48px !important;
}

body .lumyra-header-cta.lumyra-when-open .elementor-widget-container {
  width: 48px;
}

body .lumyra-header-cta.lumyra-when-open .elementor-button {
  align-items: center;
  background: transparent !important;
  border: 1px solid var(--lumyra-border) !important;
  border-radius: 50% !important;
  color: var(--lumyra-green) !important;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  min-height: 48px !important;
  padding: 0 !important;
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  width: 48px;
}

body .lumyra-header-cta.lumyra-when-open .elementor-button:hover {
  background: var(--lumyra-green) !important;
  border-color: var(--lumyra-green) !important;
  color: var(--lumyra-cream) !important;
}

body .lumyra-header-cta.lumyra-when-open .elementor-button::before {
  background-color: currentColor;
  content: "";
  height: 22px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 0-2 2v1H3.5L2 14h12L12.5 4H10V3a2 2 0 0 0-2-2Zm1 3H7V3a1 1 0 0 1 2 0v1ZM4.36 5h7.28l1.2 8H3.16l1.2-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 0-2 2v1H3.5L2 14h12L12.5 4H10V3a2 2 0 0 0-2-2Zm1 3H7V3a1 1 0 0 1 2 0v1ZM4.36 5h7.28l1.2 8H3.16l1.2-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 22px;
}

body .lumyra-header-cta.lumyra-when-open .elementor-button-text {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body .lumyra-cart-count-badge {
  align-items: center;
  background: var(--lumyra-amber);
  border: 2px solid var(--lumyra-surface);
  border-radius: 999px;
  color: var(--lumyra-green-dark);
  display: flex;
  font-family: var(--lumyra-body);
  font-size: 10px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  line-height: 1;
  min-width: 20px;
  padding: 0 4px;
  position: absolute;
  right: -6px;
  top: -6px;
}

@media (max-width: 1024px) {
  body .lumyra-header-inner {
    gap: 14px !important;
  }

  body .lumyra-header-nav {
    flex: 0 0 48px !important;
    order: 3 !important;
    width: 48px !important;
  }

  body.lumyra-shop-open .lumyra-header-cta.lumyra-when-open {
    display: block !important;
  }

  /* Anchor the panel to the whole header, not the 48px toggle widget. */
  body .lumyra-header-nav,
  body .lumyra-header-nav > .elementor-widget-container {
    position: static !important;
  }

  body .lumyra-header-nav .elementor-menu-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  body .lumyra-header-nav .elementor-nav-menu--dropdown {
    background: var(--lumyra-surface);
    border: 1px solid var(--lumyra-border);
    left: 0;
    margin: 0 !important;
    position: absolute;
    right: 0;
    top: 100%;
    width: auto !important;
    z-index: 100;
  }

  body .lumyra-header-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
    max-height: var(--lumyra-menu-space, calc(100dvh - 220px)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body .lumyra-header-nav .elementor-nav-menu--dropdown .elementor-item {
    min-height: 44px;
    overflow-wrap: anywhere;
    padding: 12px 20px !important;
    white-space: normal !important;
  }

  body .lumyra-header-nav .elementor-nav-menu--dropdown .elementor-item:is(:hover, :focus, .elementor-item-active) {
    background: var(--lumyra-green) !important;
    color: var(--lumyra-cream) !important;
  }
}

@media (max-width: 599px) {
  body .lumyra-header-brand {
    flex: 1 1 auto !important;
    min-width: 0;
  }

  body .lumyra-header-cta.lumyra-when-open,
  body .lumyra-header-cta.lumyra-when-open .elementor-widget-container,
  body .lumyra-header-cta.lumyra-when-open .elementor-button {
    height: 44px;
    min-height: 44px !important;
    width: 44px !important;
  }

  body .lumyra-header-cta.lumyra-when-open {
    flex-basis: 44px !important;
  }

  body .lumyra-header-nav {
    flex-basis: 44px !important;
    width: 44px !important;
  }
}

/* Final hero legibility layer. This must remain after the historical
   reference-fidelity overrides, which intentionally made the old photo hero
   copy transparent. */
body .lumyra-hero-copy {
  background: rgb(245 243 236 / 84%) !important;
  border-block: 1px solid rgb(44 59 46 / 12%) !important;
  border-inline: 0 !important;
  box-shadow: none !important;
  gap: 18px !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body .lumyra-hero-form .lumyra-native-form .elementor-button {
  background: var(--lumyra-green) !important;
  color: var(--lumyra-cream) !important;
}

/* ---------------------------------------------------------------------------
   39. Centred navigation, compact original spacing and restored hero film

   Restored the earlier 32px desktop / 22px smaller-desktop menu spacing.
   Symmetric outer columns keep the navigation centred, with the action
   aligned to the right. Mobile menu behavior is preserved.
   The approved hero film is visible again behind a strong left-to-right
   legibility layer; copy remains readable while the moving image carries the
   open side of the composition.
   --------------------------------------------------------------------------- */

body .lumyra-header-inner {
  align-items: center !important;
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
  position: relative;
}

/* Match visual order to the native DOM and keyboard order at every width. */
body .lumyra-header-inner > .elementor-element,
body .lumyra-header-actions > .elementor-element {
  order: 0 !important;
}

body .lumyra-header-brand {
  justify-self: start;
  width: max-content !important;
}

body .lumyra-header-nav {
  flex: none !important;
  justify-self: center;
  width: max-content !important;
}

body .lumyra-header-nav .elementor-nav-menu {
  gap: 32px !important;
  justify-content: center !important;
}

body .lumyra-header-actions {
  align-items: center;
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  justify-content: flex-end;
  justify-self: end;
  position: relative;
  width: max-content !important;
}

body .lumyra-header-account {
  flex: 0 0 auto !important;
  width: auto !important;
}

body .lumyra-header-account > .elementor-widget-container {
  width: auto !important;
}

body .lumyra-account-utility {
  color: var(--lumyra-green);
  font-family: var(--lumyra-body);
  position: relative;
}

body .lumyra-account-trigger {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--lumyra-border);
  border-radius: 0;
  color: var(--lumyra-green);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--lumyra-body);
  font-size: 14px;
  font-weight: 500;
  gap: 9px;
  justify-content: center;
  line-height: 1;
  min-height: 48px;
  padding: 0 14px;
  text-decoration: none;
  white-space: nowrap;
}

body .lumyra-account-trigger:hover,
body .lumyra-account-trigger:focus-visible,
body .lumyra-account-utility.is-open .lumyra-account-trigger {
  background: var(--lumyra-green);
  border-color: var(--lumyra-green);
  color: var(--lumyra-cream);
}

body .lumyra-account-trigger .lumyra-account-icon {
  font-size: 19px;
}

body .lumyra-account-chevron {
  font-size: 9px;
  transition: transform 180ms ease;
}

body .lumyra-account-utility.is-open .lumyra-account-chevron {
  transform: rotate(180deg);
}

body .lumyra-account-dropdown {
  background: var(--lumyra-surface);
  border: 1px solid var(--lumyra-border);
  box-shadow: none;
  min-width: 196px;
  padding: 8px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 10020;
}

body .lumyra-account-dropdown[hidden] {
  display: none !important;
}

body .lumyra-account-dropdown a {
  color: var(--lumyra-green);
  display: block;
  font-family: var(--lumyra-body);
  font-size: 14px;
  line-height: 1.4;
  padding: 11px 16px;
  text-decoration: none;
}

body .lumyra-account-dropdown a:hover,
body .lumyra-account-dropdown a:focus-visible {
  background: var(--lumyra-sunken);
  color: var(--lumyra-green-dark);
}

body .lumyra-hero-media {
  display: block !important;
  opacity: 1 !important;
}

body .lumyra-hero::after {
  display: none !important;
}

body .lumyra-hero-copy {
  background: linear-gradient(90deg, rgb(245 243 236 / 97%) 0%, rgb(245 243 236 / 94%) 47%, rgb(245 243 236 / 72%) 68%, rgb(245 243 236 / 20%) 100%) !important;
  min-height: inherit;
  pointer-events: none;
}

body .lumyra-hero-copy a,
body .lumyra-hero-copy button,
body .lumyra-hero-copy form,
body .lumyra-hero-copy input,
body .lumyra-hero-copy label {
  pointer-events: auto;
}

body.woocommerce-order-received .woocommerce-order-overview {
  align-items: stretch !important;
  grid-auto-flow: column !important;
}

body.woocommerce-order-received .woocommerce-order-overview > li,
body.woocommerce-order-received .woocommerce-order-overview > li:last-child {
  grid-column: auto !important;
  min-width: 0 !important;
}

@media (max-width: 1280px) {
  body .lumyra-header-inner {
    gap: 16px !important;
    grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr) !important;
  }

  body .lumyra-header-nav .elementor-nav-menu {
    gap: 22px !important;
  }

  body .lumyra-account-trigger span {
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 1024px) {
  body .lumyra-header-inner {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  body.lumyra-shop-closed .lumyra-header-inner {
    gap: 16px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  body.lumyra-shop-closed .lumyra-header-nav .elementor-nav-menu {
    gap: 0 !important;
  }

  body .lumyra-header-nav {
    justify-self: end;
    order: initial !important;
    width: 48px !important;
  }

  body .lumyra-header-actions {
    justify-self: end;
  }

  body.lumyra-shop-closed .lumyra-header-actions {
    justify-self: end;
  }

  body.lumyra-shop-closed .lumyra-header-cta.lumyra-when-closed {
    display: block !important;
  }

  body .lumyra-account-trigger {
    height: 48px;
    min-height: 48px;
    padding: 0;
    width: 48px;
  }

  body .lumyra-account-trigger span,
  body .lumyra-account-chevron {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  body .lumyra-hero-copy {
    background: linear-gradient(90deg, rgb(245 243 236 / 97%) 0%, rgb(245 243 236 / 92%) 65%, rgb(245 243 236 / 60%) 100%) !important;
  }

  body.woocommerce-order-received .woocommerce-order-overview {
    grid-auto-flow: row !important;
  }
}

@media (max-width: 767px) {
  body .lumyra-header-inner {
    gap: 10px !important;
  }

  body .lumyra-account-trigger {
    height: 44px;
    min-height: 44px;
    width: 44px;
  }

  body .lumyra-account-dropdown {
    max-height: var(--lumyra-menu-space, calc(100dvh - 220px));
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
  }

  body .lumyra-hero {
    padding: 0 !important;
  }

  body .lumyra-hero-copy {
    background: linear-gradient(180deg, rgb(245 243 236 / 96%) 0%, rgb(245 243 236 / 92%) 70%, rgb(245 243 236 / 72%) 100%) !important;
    min-height: 620px;
  }

}

@media (prefers-reduced-motion: reduce) {
  body .lumyra-account-chevron {
    transition: none;
  }
}

/* A second utility row preserves the logo and comfortable tap targets at 320px. */
@media (max-width: 599px) {
  body .lumyra-header-inner {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  body .lumyra-header-actions {
    grid-column: 1 / -1;
    width: 100% !important;
  }

  body.lumyra-shop-closed .lumyra-header-cta.lumyra-when-closed,
  body.lumyra-shop-closed .lumyra-header-cta.lumyra-when-closed .elementor-button {
    width: 100% !important;
  }

  body.lumyra-shop-closed .lumyra-header-cta.lumyra-when-closed .elementor-button {
    display: flex;
    justify-content: center;
  }
}

/* Release 1.23.4: keep WooCommerce clearfix pseudo-items out of the facts grid. */
body.woocommerce-order-received .woocommerce-order-overview {
  grid-auto-flow: row !important;
}

body.woocommerce-order-received .woocommerce-order-overview::before,
body.woocommerce-order-received .woocommerce-order-overview::after {
  content: none !important;
  display: none !important;
}

/* The Learn library contains both ingredient and routine articles. */
body .lumyra-article-query .category-your-routine .elementor-post__text::before {
  content: "Your Routine";
}

/* ---------------------------------------------------------------------------
   41. Waitlist pending page, adapted from the supplied wt.html reference
   --------------------------------------------------------------------------- */

body.lumyra-waitlist-confirmation-page .lumyra-waitlist,
body.lumyra-waitlist-confirmation-page .lumyra-footer-signup.lumyra-when-open {
  display: none !important;
}

body.lumyra-waitlist-confirmation-page .lumyra-footer-signup.lumyra-when-closed {
  display: flex !important;
}

body.lumyra-waitlist-confirmation-page .lumyra-header-cta.lumyra-when-closed .elementor-button {
  background: transparent !important;
  border: 1.5px solid var(--lumyra-green) !important;
  color: var(--lumyra-green) !important;
}

body.lumyra-waitlist-confirmation-page .lumyra-header-cta.lumyra-when-closed .elementor-button:hover,
body.lumyra-waitlist-confirmation-page .lumyra-header-cta.lumyra-when-closed .elementor-button:focus-visible {
  background: var(--lumyra-green) !important;
  color: var(--lumyra-cream) !important;
}

/* The waitlist document supplies its own masthead so the visual and semantic
   order matches the approved reference instead of placing a template title
   above the confirmation mark. */
body.lumyra-waitlist-confirmation-page .lumyra-singular-masthead {
  display: none !important;
}

body.lumyra-waitlist-confirmation-page .lumyra-singular-body,
body.lumyra-waitlist-confirmation-page .lumyra-longform,
body.lumyra-waitlist-confirmation-page .lumyra-longform-content,
body.lumyra-waitlist-confirmation-page .lumyra-longform-content > .elementor-widget-container {
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

@media (min-width: 900px) {
  body.lumyra-waitlist-confirmation-page .lumyra-footer-columns {
    grid-template-columns: 1.7fr 1fr 1fr 1.2fr !important;
  }
}

body.lumyra-waitlist-confirmation-page .lumyra-footer-status-link {
  align-items: center;
  border: 1px solid var(--lumyra-cream);
  color: var(--lumyra-cream) !important;
  display: inline-flex;
  font-size: 15px;
  justify-content: center;
  min-height: 46px;
  padding: 10px 24px;
  text-align: center;
  text-decoration: none !important;
  width: 100%;
}

body.lumyra-waitlist-confirmation-page .lumyra-footer-signup > .lumyra-footer-title {
  color: var(--lumyra-cream);
  font-family: var(--lumyra-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
}

body.lumyra-waitlist-confirmation-page .lumyra-footer-signup > .lumyra-footer-copy {
  color: var(--lumyra-text-on-dark);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

body.lumyra-waitlist-confirmation-page .lumyra-footer-status-link:hover,
body.lumyra-waitlist-confirmation-page .lumyra-footer-status-link:focus-visible {
  background: var(--lumyra-cream);
  color: var(--lumyra-green-deep) !important;
}

body .lumyra-waitlist-pending {
  display: block;
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

body .lumyra-waitlist-masthead {
  margin: 0 auto;
  max-width: 760px;
  padding: 48px 40px 0;
  text-align: center;
}

body .lumyra-waitlist-pending-mark {
  align-items: center;
  border: 1.5px solid var(--lumyra-sage-deep);
  border-radius: 50%;
  color: var(--lumyra-sage-deep);
  display: flex;
  font-size: 24px;
  height: 56px;
  justify-content: center;
  margin: 0 auto;
  width: 56px;
}

body .lumyra-waitlist-masthead > .lumyra-eyebrow {
  color: var(--lumyra-sage-deep) !important;
  margin: 24px 0 0 !important;
}

body .lumyra-waitlist-masthead > h1 {
  color: var(--lumyra-green) !important;
  font-family: var(--lumyra-display) !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
  margin: 12px 0 0 !important;
}

body .lumyra-waitlist-progress {
  color: var(--lumyra-sage-deep) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .24em;
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 24px 0 0 !important;
  text-align: center;
  text-transform: uppercase;
}

body .lumyra-waitlist-progress-bars {
  display: none;
  gap: 8px;
}

body .lumyra-waitlist-progress-bars i {
  background: var(--lumyra-border-strong);
  display: block;
  height: 2px;
  width: 28px;
}

body .lumyra-waitlist-progress-bars i.is-complete {
  background: var(--lumyra-sage-deep);
}

body .lumyra-waitlist-masthead > .lumyra-article-lead {
  margin: 24px auto 0 !important;
  max-width: 680px;
  text-align: center;
}

body .lumyra-waitlist-confirm-wrap {
  padding: 48px 40px;
}

body .lumyra-waitlist-confirm-panel {
  background: var(--lumyra-raised);
  border: 1px solid var(--lumyra-border);
  margin: 0 auto;
  max-width: 680px;
  padding: 32px;
}

body .lumyra-waitlist-confirm-panel > h2 {
  font-family: var(--lumyra-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}

body .lumyra-waitlist-confirm-panel > p {
  color: var(--lumyra-text-muted) !important;
  margin-top: 12px !important;
}

body .lumyra-waitlist-steps {
  list-style: none !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
}

body .lumyra-waitlist-steps > li {
  align-items: start;
  border-bottom: 1px solid var(--lumyra-border);
  display: grid;
  gap: 16px;
  grid-template-columns: 32px minmax(0, 1fr);
  padding: 16px 0;
}

body .lumyra-waitlist-steps > li:last-child {
  border-bottom: 0;
}

body .lumyra-waitlist-steps > li > span {
  color: var(--lumyra-sage-deep);
  font-family: var(--lumyra-display);
  font-size: 24px;
}

body .lumyra-waitlist-steps strong {
  font-weight: 600;
}

body .lumyra-waitlist-steps p {
  color: var(--lumyra-text-muted) !important;
  font-size: 15px !important;
  margin: 4px 0 0 !important;
}

body .lumyra-waitlist-email-facts {
  background: var(--lumyra-sunken);
  border: 1px solid var(--lumyra-border);
  display: grid;
  gap: 8px 16px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 24px 0 0;
  padding: 16px 24px;
}

body .lumyra-waitlist-email-facts dt {
  color: var(--lumyra-text-muted);
  font-size: 15px;
  font-weight: 600;
}

body .lumyra-waitlist-email-facts dd {
  font-size: 15px;
  margin: 0;
  overflow-wrap: anywhere;
}

body .lumyra-waitlist-help {
  color: var(--lumyra-text-muted) !important;
  font-size: 15px !important;
  margin: 24px auto 0 !important;
  max-width: 680px;
  text-align: center;
}

body .lumyra-waitlist-next {
  align-items: center;
  background: var(--lumyra-sunken);
  display: grid;
  gap: 96px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: calc(50% - 50vw);
  padding: 48px max(40px, calc((100vw - 1200px) / 2 + 40px));
  width: 100vw;
}

body .lumyra-waitlist-next figure {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--lumyra-border);
  margin: 0;
  overflow: hidden;
}

body .lumyra-waitlist-next img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body .lumyra-waitlist-next .lumyra-eyebrow {
  color: var(--lumyra-sage-deep) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .24em;
  margin: 0 0 12px !important;
  text-transform: uppercase;
}

body .lumyra-waitlist-next h2 {
  font-family: var(--lumyra-display) !important;
  font-size: 31px !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  margin-top: 0 !important;
}

body .lumyra-waitlist-next h2 + p {
  color: var(--lumyra-text-muted) !important;
  font-size: 20px !important;
  font-weight: 300;
  line-height: 1.62 !important;
  margin: 12px 0 32px !important;
}

body .lumyra-waitlist-next-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 0 !important;
}

body .lumyra-waitlist-primary-link {
  align-items: center;
  background: var(--lumyra-green);
  border: 1px solid var(--lumyra-green);
  color: var(--lumyra-cream) !important;
  display: inline-flex;
  justify-content: center;
  min-height: 56px;
  padding: 14px 30px;
  text-decoration: none !important;
}

body .lumyra-waitlist-primary-link:hover,
body .lumyra-waitlist-primary-link:focus-visible {
  background: var(--lumyra-green-deep);
}

@media (max-width: 767px) {
  body .lumyra-waitlist-masthead {
    padding: 32px 20px 0;
  }

  body .lumyra-waitlist-masthead > h1 {
    font-size: 29px !important;
  }

  body .lumyra-waitlist-next h2 {
    font-size: 24px !important;
  }

  body .lumyra-waitlist-next h2 + p {
    font-size: 18px !important;
  }

  body .lumyra-waitlist-confirm-wrap {
    padding: 32px 20px;
  }

  body .lumyra-waitlist-confirm-panel,
  body .lumyra-waitlist-next {
    padding: 24px;
  }

  body .lumyra-waitlist-next {
    gap: 24px;
    grid-template-columns: 1fr;
    padding-block: 32px;
  }
}

/* ---------------------------------------------------------------------------
   49. Catalogue-accurate launch hero

   The previous placeholder film contains packaging with a dark dropper cap.
   Keep the generated catalogue-aligned still visible until the manufacturer's
   final renders and matching footage arrive.
   --------------------------------------------------------------------------- */

body .lumyra-hero-media {
  background: var(--lumyra-sunken) url("../images/editorial/catalogue-placeholders/hero-complete-kit-catalogue.webp") center / cover no-repeat !important;
}

body .lumyra-hero-video video {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   50. Compact page rhythm and mobile product layout

   Keep the catalogue sequence in normal document order. Product collections
   use two columns on tablets and one full-width card on phones, so no item is
   squeezed into an unintended second mobile column.

   Section padding moves down one step on the approved spacing scale across
   the site. The compact masthead keeps its asymmetric title-to-content rhythm,
   and system pages receive the same shorter outer frame.
   --------------------------------------------------------------------------- */

body .lumyra-section:not(.lumyra-singular-masthead),
body .lumyra-quote,
body .lumyra-waitlist {
  padding-block: 24px !important;
}

body .lumyra-singular-masthead {
  padding-block: 24px 8px !important;
}

body .lumyra-system-page {
  padding-block: 32px;
}

@media (max-width: 899px) {
  body .lumyra-product-grid,
  body .lumyra-product-grid-all {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  body .lumyra-product-grid,
  body .lumyra-product-grid-all {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  body .lumyra-section:not(.lumyra-singular-masthead),
  body .lumyra-quote,
  body .lumyra-waitlist {
    padding-block: 16px !important;
  }

  body .lumyra-singular-masthead {
    padding-block: 16px 8px !important;
  }

  body .lumyra-system-page {
    padding-block: 24px;
  }

  body .lumyra-logo img {
    width: 150px !important;
  }
}

/* Inner-page documents already contain their own sections. Their outer shell
   must remain neutral or it would add the shared padding a second time. */
body .lumyra-section:has(.lumyra-section) {
  padding-block: 0 !important;
}

/* Keep waitlist button labels together; the submit column fits their text. */
body .lumyra-native-form:not(.lumyra-contact-form) .elementor-button,
body .lumyra-native-form:not(.lumyra-contact-form) .elementor-button-text {
  white-space: nowrap;
}