/* ==========================================================================
   OmegAmino replica — HOMEPAGE SECTIONS + the shared product card
   Section order and every metric measured from source-cdp/maps/home.json,
   the page's own inline BeBuilder CSS (post id 18), the site's wp-custom-css
   block, and pixel-measurement of _shots/{desktop-1440,tablet-820,mobile-390}.
   ========================================================================== */

/* Spacer columns the source uses between sections:
   150px base / 130 <=1440 / 100 <=959 / 80 <=767 */
:root { --oma-sec-gap: 150px; }
@media (max-width: 1440px) { :root { --oma-sec-gap: 130px; } }
@media (max-width: 959px)  { :root { --oma-sec-gap: 100px; } }
@media (max-width: 767px)  { :root { --oma-sec-gap: 80px; } }

/* --------------------------------------------------------------------------
   SECTION 2 — HERO  .mcb-section-140a12c7d
   -------------------------------------------------------------------------- */
.oma-hero {
  height: 1000px;
  padding-top: 240px;
  background-image: var(--oma-hero-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.oma-hero__inner { display: flex; flex-wrap: wrap; align-content: flex-start; height: 100%; }
 /* BeTheme gives every column --mfn-column-gap-bottom:40px; the plate row
    starts after that gap, which is what puts it at y=794 @1440 (measured). */
.oma-hero__lead {
  flex: 0 0 100%;
  display: flex;              /* flex container -> no sibling margin collapsing,
                                 which is what BeTheme's column wrappers give us */
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}
/* column widths as declared on the source columns:
   H1  one-second / laptop-one-second / tablet-one-second / mobile-four-fifth
   sub one         / laptop-one        / tablet-three-fifth / mobile-four-fifth */
.oma-hero__title { max-width: 50%; color: #fff; margin-bottom: 15px; }
.oma-hero__sub { margin-top: 80px; color: var(--oma-white-65); }
.oma-hero__cta { margin-top: 50px; }
.oma-hero__cta .oma-btn__icon svg { color: #fff; }

/* FDA plate — wrap-53j00xzj (one-third) */
.oma-hero__plate {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  margin-top: 41px;
  padding: 24px;
  border: 3px dotted rgba(132,242,254,.31);
  border-radius: var(--oma-r-12);
  background: rgba(255,255,255,.11);
  backdrop-filter: blur(13.8px);
  -webkit-backdrop-filter: blur(13.8px);
  align-self: flex-end;
  margin-left: 0;
}
.oma-hero__plate p { color: #fff; white-space: normal; }

/* laptop tier (BeTheme's `laptop-*` classes bind at <=1440): the plate wrap is
   laptop-two-fifth -> 40%. Confirmed by measuring _shots/desktop-1440/home.png:
   the plate spans x 65..587 = 522px = 40% of the 1310px container. */
@media (max-width: 1440px) {
  .oma-hero { height: 920px; }
  .oma-hero__sub { margin-top: 70px; }
  .oma-hero__plate { flex-basis: 40%; max-width: 40%; margin-top: 62px; }
}
@media (max-width: 959px) {
  .oma-hero { height: 820px; padding-top: 150px; }
  .oma-hero__title { max-width: 50%; }   /* tablet-one-second */
  .oma-hero__sub { max-width: 60%; }     /* tablet-three-fifth */
  .oma-hero__plate { flex-basis: 60%; max-width: 60%; margin-top: 38px; }
}
@media (max-width: 767px) {
  .oma-hero { height: 800px; background-attachment: scroll; }
  .oma-hero__title { max-width: 80%; }   /* mobile-four-fifth */
  .oma-hero__sub { max-width: 80%; margin-top: 20px; font-size: 16px; }
  .oma-hero__cta .oma-btn { font-size: 16px; padding: 6px 6px 6px 23px; }
  .oma-hero__plate { flex-basis: 100%; max-width: 100%; margin-top: 116px; }
}

/* --------------------------------------------------------------------------
   SECTION 3 — ABOUT US  .mcb-section-4835bcb95
   -------------------------------------------------------------------------- */
.oma-about { padding: var(--oma-sec-gap) 0; }
.oma-about__inner { display: flex; flex-wrap: wrap; align-items: stretch; }
.oma-about__left  { flex: 0 0 25%; max-width: 25%; display: flex; flex-direction: column; justify-content: space-between; }
.oma-about__right { flex: 0 0 75%; max-width: 75%; padding-left: 73px; display: flex; flex-direction: column; }

.oma-about__eyebrow { margin-bottom: 55px; }
.oma-about__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: var(--oma-r-20);
  background: var(--oma-blue);
}
.oma-about__tile img { max-width: 65px; height: auto; }
.oma-about__tiledesc { margin-top: 18px; color: var(--oma-text-66); font-size: 15px; line-height: 21px; }
.oma-about__iconbox { margin-bottom: 150px; }
.oma-about__cta { margin-top: auto; }

.oma-about__copy { margin-bottom: 120px; font-size: 28px; line-height: 36px; color: var(--oma-text-69); white-space: normal; }
.oma-about__cards { display: flex; flex-wrap: wrap; align-items: stretch; }

.oma-about__photo {
  position: relative;
  flex: 0 0 60%;
  max-width: 60%;
  min-height: 350px;
  border-radius: var(--oma-r-20);
  overflow: hidden;
}
.oma-about__photo-zoom {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform .8s ease;
}
.oma-about__photo:hover .oma-about__photo-zoom { transform: scale(1.1); }

.oma-about__coa {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 35px;
  padding: 25px;
  border-radius: var(--oma-r-20);
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  flex-basis: calc(40% - 35px);
}
.oma-about__coa-pill {
  align-self: flex-start;
  padding: 15px 16px;
  border-radius: var(--oma-r-12);
  background: #fff;
  font-size: 25px;
  font-weight: 500;
  white-space: normal;
}
.oma-about__coa-btn { text-align: right; }

@media (max-width: 1440px) { .oma-about__photo { min-height: 320px; } }
@media (max-width: 959px) {
  .oma-about__left, .oma-about__right { flex: 0 0 100%; max-width: 100%; }
  .oma-about__right { padding-left: 0; margin-top: 80px; }
  .oma-about__eyebrow { margin-bottom: 0; }
  .oma-about__iconbox { margin: 24px 0 40px; }
  .oma-about__cta { margin-top: 0; }
  .oma-about__copy { margin-bottom: 70px; font-size: 24px; line-height: 32px; }
  .oma-about__photo { min-height: 280px; }
  .oma-about__coa { padding: 20px; }
}
@media (max-width: 767px) {
  .oma-about__tile { width: 120px; height: 120px; }
  .oma-about__tile img { max-width: 50px; }
  .oma-about__cta .oma-btn, .oma-about__coa-btn .oma-btn { font-size: 16px; }
  .oma-about__copy { font-size: 22px; line-height: 28px; }
  .oma-about__photo { flex: 0 0 100%; max-width: 100%; }
  .oma-about__coa { flex: 0 0 100%; max-width: 100%; margin-left: 0; margin-top: 20px; min-height: 260px; }
  .oma-about__coa-pill { font-size: 22px; padding-bottom: 13px; }
}

/* --------------------------------------------------------------------------
   SECTION 4 — BEST SELLING PRODUCTS  .mcb-section-545f3242d
   -------------------------------------------------------------------------- */
/* the source section carries NO spacer of its own (h 710 flat) */
.oma-best { padding-bottom: 0; }
.oma-best__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
/* measured: section top 1878 -> first plate top 2028 (h2 box 65 + 85) */
.oma-best__title { margin-bottom: 85px; }
.oma-best__nav { display: flex; gap: 10px; flex: 0 0 auto; }

.oma-slider { position: relative; }
.oma-slider__viewport { overflow: hidden; }
.oma-slider__track {
  display: flex;
  flex-wrap: nowrap;   /* .oma-products also sets wrap - the carousel must not */
  margin: 0;
  padding: 0;
  transition: transform .4s ease;
}
/* measured: slide pitch 328px, visible plate 308px -> 10px padding a side */
.oma-slider__track > li { flex: 0 0 25%; max-width: 25%; padding: 0 10px; box-sizing: border-box; }

/* dot pager — active dot #1C6BBA, 32x6, radius 50px, margin-top 35 */
.oma-slider__dots { display: flex; justify-content: center; gap: 6px; margin-top: 50px; }
.oma-slider__dots button {
  width: 12px; height: 6px; padding: 0;
  border: 0; border-radius: 50px;
  background: rgba(0,0,0,.2);
  cursor: pointer; transition: .2s;
}
.oma-slider__dots button.is-active { width: 32px; background: var(--oma-blue); }

@media (max-width: 959px) { .oma-slider__track > li { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 767px) { .oma-slider__track > li { flex-basis: 100%; max-width: 100%; } }

/* --------------------------------------------------------------------------
   SHARED PRODUCT CARD  (used by the homepage slider AND every grid/search)
   Measured: image plate #F8F8F8 with 50px 0 padding (25px 0 <=767) inside a
   radius-20 frame (10 <=767); image scales 1.1 on hover; title H4 26/50/600
   (24 <=1440, 18 <=767); price rgba(0,0,0,.6) 18/23.4.
   Star ratings are hidden by CSS at source and reviews are OFF — never rendered.
   -------------------------------------------------------------------------- */
.oma-products { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
/* the carousel track must never wrap (it shares the .oma-products class) */
.oma-slider .oma-slider__track { flex-wrap: nowrap; }
.oma-product-card { list-style: none; margin: 0; }
.oma-product-card .star-rating { display: none; }

.oma-card__frame {
  position: relative;
  margin-bottom: 15px;          /* BeTheme .image_frame bottom gap (measured) */
  border-radius: var(--oma-r-20);
  overflow: hidden;
}
.oma-card__plate {
  background: var(--oma-tint-f8f8f8);
  padding: 50px 0;
  text-align: center;
}
.oma-card__plate img { display: inline-block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; transition: transform .3s ease; }
.oma-card__frame:hover .oma-card__plate img { transform: scale(1.1); }

.oma-card__links {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: .2s;
}
.oma-card__frame:hover .oma-card__links { opacity: 1; transform: translateX(0); }
.oma-card__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--oma-r-8);
  background: #fff;
}
.oma-card__act svg { width: 26px; height: 26px; }
.oma-card__act svg .path { fill: none; stroke: #333; stroke-miterlimit: 10; stroke-width: 1.5px; }
.oma-card__act:hover { background: var(--oma-cyan); }

/* OUT-OF-STOCK STATE — source-exact, and it belongs to the ONE shared card so
   every grid / carousel / related strip inherits it. merged.css:
     .woocommerce span.soldout
       { left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); text-align:center }
     .woocommerce ul.products li.product.outofstock .product-loop-thumb .image_wrapper img
       { opacity:.25; filter:grayscale(50%) }
   Wave 1 shipped the badge at top-left and the photo unfaded — both fixed here.
   The badge is a SIBLING of the plate, so the opacity on the img never touches it. */
.oma-card__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}
.oma-product-card.outofstock .oma-card__plate img {
  opacity: .25;
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

.oma-card__desc { text-align: left; padding-left: 0; }
 /* source home slider: li h4{margin-top:8px;font-size:26px} with 24px <=767.
    (The ARCHIVE card uses its own size - that is the shop agent's override.) */
.oma-card__title {
  margin: 8px 0 0;
  font-size: 26px;
  line-height: 50px;
  font-weight: 600;
}
.oma-card__title a { color: #000; }
.oma-card__title a:hover { color: var(--oma-blue); }
.oma-card__price,
.oma-card__price .woocommerce-Price-amount {
  color: var(--oma-text-60);
  font-size: 18px;
  line-height: 23.4px;
  font-weight: 400;
}
.oma-card__button { margin-top: 14px; }
.oma-btn--cart { padding: 9px 18px; }

@media (max-width: 767px) {
  .oma-card__plate { padding: 25px 0; }
  .oma-card__title { font-size: 24px; line-height: 1.3; }
}

/* --------------------------------------------------------------------------
   SECTION 5 — WHY CHOOSE US  .mcb-section-416181b4f
   -------------------------------------------------------------------------- */
/* 150px spacer column top AND bottom inside the source section (h 923) */
.oma-why { padding: var(--oma-sec-gap) 0; }
.oma-why__title { margin-bottom: 70px; }
.oma-why__grid { display: flex; flex-wrap: wrap; align-items: stretch; }

.oma-why__photo {
  position: relative;
  flex: 0 0 40%;
  max-width: 40%;
  min-height: 469px;
  border-radius: var(--oma-r-30);
  overflow: hidden;
}
.oma-why__photo-zoom {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform .8s ease;
}
.oma-why__photo:hover .oma-why__photo-zoom { transform: scale(1.1); }

.oma-why__tiles {
  flex: 0 0 60%;
  max-width: 60%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-left: 50px;
  box-sizing: border-box;
  flex-basis: calc(60% - 50px);
}
.oma-why__tile {
  flex: 0 0 calc(50% - 18px);
  max-width: calc(50% - 18px);
  margin: 9px;
  padding: 35px 43px;
  border-radius: var(--oma-r-19);
  box-sizing: border-box;
}
.oma-why__tile--premium   { margin: 0 9px 9px 9px; }
.oma-why__tile--lab       { margin: 0 9px 9px 9px; }
.oma-why__tile--shipping  { margin: 9px 9px 0 9px; }
.oma-why__tile--certified { margin: 9px 9px 0 9px; }
.oma-why__icon { display: block; margin-bottom: 14px; }
.oma-why__icon img { width: 100%; height: auto; }
.oma-why__tile-title { font-size: 20px; font-weight: 500; margin-bottom: 15px; }
.oma-why__tile-desc  { font-size: 15px; line-height: 21px; color: var(--oma-text-65); }

@media (max-width: 959px) {
  .oma-why__photo { flex: 0 0 100%; max-width: 100%; }
  .oma-why__tiles { flex: 0 0 100%; max-width: 100%; margin-left: 0; margin-top: 40px; }
  .oma-why__tile--premium, .oma-why__tile--shipping { margin-left: 0; }
  .oma-why__tile--lab, .oma-why__tile--certified { margin-right: 0; }
}
@media (max-width: 767px) {
  .oma-why__photo { min-height: 300px; border-radius: var(--oma-r-19); margin-bottom: 6px; }
  .oma-why__tiles { margin-top: 6px; }
  .oma-why__tile { flex: 0 0 100%; max-width: 100%; margin: 6px 0; }
  /* source: .mcb-wrap-6511c9176{order:-1} — "Fast Shipping" jumps to the top */
  .oma-why__tile--shipping  { order: -1; margin: 6px 0; }
  .oma-why__tile--premium   { margin: 0 0 6px; }
  .oma-why__tile--lab       { margin: 6px 0; }
  .oma-why__tile--certified { margin: 6px 0 0; }
}

/* --------------------------------------------------------------------------
   SEO CONTENT ZONE  (LOCKED STANDARD #6 — net-new, sits before the FAQ)
   -------------------------------------------------------------------------- */
.oma-seo { padding-bottom: var(--oma-sec-gap); }
.oma-seo__prose { max-width: 980px; }
.oma-seo__prose h2 { margin-bottom: 30px; }
.oma-seo__prose p {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 28px;
  color: var(--oma-text-69);
  white-space: normal;
}
.oma-seo__prose p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .oma-seo__prose p { font-size: 16px; line-height: 26px; } }

/* --------------------------------------------------------------------------
   SECTION 6 — FAQ  .mcb-section-6af198221
   -------------------------------------------------------------------------- */
.oma-faq {
  padding: 140px 0;
  background-image: var(--oma-faq-img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.oma-faq__inner { display: flex; flex-wrap: wrap; align-items: center; }
.oma-faq__lead { flex: 0 0 50%; max-width: 50%; padding-right: 40px; box-sizing: border-box; }
.oma-faq__acc  { flex: 0 0 50%; max-width: 50%; }
.oma-faq__title { color: #fff; margin-bottom: 20px; }
.oma-faq__sub { color: #fff; white-space: normal; }
.oma-faq__cta { margin-top: 40px; }

.oma-faq .question { margin-bottom: 8px; border-radius: var(--oma-r-10); background: var(--oma-tint-f9f9f9); overflow: hidden; transition: .3s; }
.oma-faq .question.active { background: var(--oma-tint-f0f8ff); }
.oma-faq .question > .title {
  position: relative;
  display: block;
  width: 100%;
  padding: 17px 90px 17px 30px;
  border: 0;
  background: none;
  color: #000;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.oma-faq .question > .title .num { display: none; }   /* source hides it */
.oma-faq .question > .title .acc-icon {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  display: inline-flex;
  color: #000;
}
.oma-faq .question > .title .acc-icon .oma-i { width: 20px; height: 20px; }
.oma-faq .question .acc-icon-minus { display: none; }
.oma-faq .question.active .acc-icon-plus { display: none; }
.oma-faq .question.active .acc-icon-minus { display: inline-block; }
.oma-faq .question > .answer {
  display: none;
  padding: 0 30px 17px;
  color: var(--oma-text-65);
  white-space: pre-line;
}
.oma-faq .question.active > .answer { display: block; }

@media (max-width: 959px) {
  /* touch widths render the parallax band as `scroll` (matches the source's
     own tablet/mobile reference tiles) */
  .oma-faq { padding: 100px 0; background-attachment: scroll; }
  .oma-faq__lead, .oma-faq__acc { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
  .oma-faq__acc { margin-top: 50px; }
  .oma-faq .question > .title { font-size: 19px; }
  .oma-faq .question > .answer { font-size: 16px; }
}
@media (max-width: 767px) {
  .oma-faq { padding: 90px 0; background-attachment: scroll; }
  .oma-faq .question > .title { padding: 20px 90px 20px 20px; }
  .oma-faq .question > .answer { padding: 0 20px 20px; }
  .oma-faq .question > .title .acc-icon { right: 20px; }
}