/* ==========================================================================
   OmegAmino replica — DESIGN TOKENS
   Every value below was MEASURED from the omegamino.net harvest
   (E:\omegamino\source-cdp\design-tokens.json, maps\*.json, merged.css and the
   site's own wp-custom-css block). Nothing here is invented.
   Source theme = Betheme 28.5.4 / BeBuilder. We reproduce its OUTPUT only.
   ========================================================================== */

:root {
  /* ---------- palette (measured rgb() values, ordered by element count) ---- */
  --oma-black:            #000000;          /* body text — 37,726 elements     */
  --oma-text-60:          rgba(0,0,0,.6);   /* muted text / prices             */
  --oma-text-65:          rgba(0,0,0,.65);  /* icon-box descriptions           */
  --oma-text-66:          rgba(0,0,0,.66);
  --oma-text-69:          rgba(0,0,0,.69);  /* about-us paragraph              */
  --oma-text-70:          rgba(0,0,0,.7);
  --oma-grey-62:          #626262;
  --oma-grey-ba:          #bababa;
  --oma-grey-b7:          #b7b7b7;          /* sub-footer links                */
  --oma-grey-64:          #646464;          /* footer contact links            */

  --oma-blue:             #1c6bba;          /* BRAND BLUE — #Subheader, woo    */
  --oma-blue-rgb:         28,107,186;
  --oma-blue-deep:        #254f79;          /* button icon chip                */
  --oma-cyan:             #84f2fe;          /* PRIMARY CTA                     */
  --oma-cyan-hover:       #76e4f3;
  --oma-announce:         #1e73be;          /* marquee bar                     */
  --oma-announce-border:  #333333;
  --oma-announce-hover:   #dbdbdb;

  --oma-white:            #ffffff;
  --oma-white-65:         rgba(255,255,255,.65);
  --oma-white-50:         rgba(255,255,255,.5);
  --oma-white-40:         rgba(255,255,255,.4);

  --oma-dark:             #161922;          /* dark surface                    */
  --oma-darker:           #07070a;
  --oma-262626:           #262626;          /* disclaimer band / button hover  */
  --oma-171717:           #171717;

  /* tints */
  --oma-tint-f5f7f8:      #f5f7f8;          /* woo info                        */
  --oma-tint-f3f3f3:      #f3f3f3;          /* qty stepper                     */
  --oma-tint-ecf6ff:      #ecf6ff;          /* qty hover                       */
  --oma-tint-f0f8ff:      #f0f8ff;          /* pale-blue card / FAQ open       */
  --oma-tint-f8f8f8:      #f8f8f8;          /* product image plate, grey card  */
  --oma-tint-f9f9f9:      #f9f9f9;          /* FAQ closed                      */
  --oma-tint-f6f6f6:      #f6f6f6;          /* submenu panel                   */
  --oma-tint-f0f0f0:      #f0f0f0;          /* submenu link                    */
  --oma-tint-ededed:      #ededed;
  --oma-tint-e4e4e4:      #e4e4e4;          /* input border                    */
  --oma-tint-d4e1ef:      #d4e1ef;
  --oma-tint-bbd3eb:      #bbd3eb;

  --oma-line:             rgba(0,0,0,.08);  /* --mfn-woo-border                */
  --oma-line-16:          rgba(0,0,0,.16);  /* sub-footer top rule             */
  --oma-line-20:          rgba(0,0,0,.2);   /* input border / submenu border   */
  --oma-line-30:          rgba(0,0,0,.3);   /* footer top rule, slider arrows  */

  /* ---------- type ------------------------------------------------------- */
  --oma-font:             "Inter Tight", Arial, Helvetica, sans-serif;

  --oma-fs-body:          18px;   --oma-lh-body: 1.3;    /* 18 / 23.4         */
  --oma-ls-body:          -.01em;                        /* measured "-1%"    */
  --oma-ls-head:          -.02em;                        /* measured "-2%"    */

  --oma-h1:               100px;  --oma-h1-lh: 100px;  --oma-h1-fw: 600;
  --oma-h1-sub:            50px;  --oma-h1-sub-lh: 60px; --oma-h1-sub-fw: 500;
  --oma-h2:                65px;  --oma-h2-lh:  65px;  --oma-h2-fw: 600;
  --oma-h3:                34px;  --oma-h3-lh:  34px;  --oma-h3-fw: 600;
  --oma-h4:                40px;  --oma-h4-lh:  50px;  --oma-h4-fw: 600;
  --oma-h5:                24px;  --oma-h5-lh:  34px;  --oma-h5-fw: 500;
  --oma-card-title:        26px;  --oma-card-title-lh: 50px; /* 24 <=1440, 18 <=767 */

  /* ---------- layout ------------------------------------------------------ */
  /* wp-custom-css: .section_wrapper,.container{padding:0 95px;box-sizing:border-box}
     <=1600px -> 0 65px !important ;  <=767px -> 0 20px
     static.css @min-width:1240 -> max-width:1790px
     VERIFIED by pixel-measuring _shots/desktop-1440/home.png: content edges 65 / 1375. */
  --oma-wrap-max:         1790px;
  --oma-gutter:           65px;
  --oma-gutter-wide:      95px;   /* >1600px */
  --oma-gutter-sm:        20px;   /* <=767px */
  --oma-col-gap:          12px;   /* --mfn-column-gap-left / -right          */

  --oma-marquee-h:        42px;
  --oma-header-h:        122px;

  /* ---------- radii (measured; no invented values) ------------------------ */
  --oma-r-8:               8px;   /* woo boxes, header icon tiles            */
  --oma-r-9:               9px;   /* THE HOUSE RADIUS: buttons + inputs      */
  --oma-r-10:             10px;   /* checkout inputs / FAQ rows              */
  --oma-r-12:             12px;   /* payment rows, submenu, hero plate       */
  --oma-r-15:             15px;   /* login modal                             */
  --oma-r-19:             19px;   /* why-choose-us tiles                     */
  --oma-r-20:             20px;   /* product image frame (10px <=767)        */
  --oma-r-30:             30px;   /* why-choose-us photo                     */
  --oma-r-100:           100px;   /* pill icons                              */

  /* ---------- shadow ------------------------------------------------------
     --mfn-button-box-shadow is `unset` at source; the design is essentially
     SHADOW-FREE — depth comes from tinted panels and 1px borders. The only
     shadow measured anywhere is the login/popup card. */
  --oma-shadow-none:      none;
  --oma-shadow-popup:     5px 30px 50px rgba(0,0,0,.15);

  /* ---------- buttons (BeTheme CSS vars, verbatim) ------------------------ */
  --oma-btn-bg:           #84f2fe;
  --oma-btn-bg-hover:     #76e4f3;
  --oma-btn-color:        #000000;
  --oma-btn-radius:       9px;
  --oma-btn-pad:          6px 6px 6px 23px;
  --oma-btn-fs:           18px;
  --oma-btn-lh:           21.6px;
  --oma-btn-fw:           400;
  --oma-btn-gap:          10px;
  --oma-btn-transition:   .2s;
  --oma-btn-icon-bg:      #254f79;  /* wp-custom-css .button_icon            */
  --oma-btn-icon-size:    38px;

  --oma-btn-blue-bg:      #1c6bba;  /* secondary: "Explore more", Subscribe  */
  --oma-btn-blue-color:   #ffffff;
  --oma-btn-blue-hover:   #262626;
}

/* --------------------------------------------------------------------------
   RESPONSIVE TOKEN OVERRIDES — breakpoints seen in be_classes.css:
   1600 / 1440 / 1200 / 1100 (burger) / 959 / 767
   -------------------------------------------------------------------------- */
@media (min-width:1601px) { :root { --oma-gutter: var(--oma-gutter-wide); } }

@media (max-width:1300px) { :root { --oma-h2: 45px; --oma-h2-lh: 45px; } }
@media (max-width:1024px) { :root { --oma-h1: 73px;  --oma-h1-lh: 73px; } }
@media (max-width:1440px) { :root { --oma-card-title: 24px; } }
@media (max-width:767px)  {
  :root {
    --oma-gutter: var(--oma-gutter-sm);
    --oma-card-title: 18px;
    --oma-r-20: 10px;
  }
}
/* wp-custom-css @media(max-width:480px){h1{font-size:14.4vw} h3{font-size:22px}} */
@media (max-width:480px)  { :root { --oma-h1: 14.4vw; --oma-h1-lh: 14.4vw; --oma-h3: 22px; --oma-h3-lh: 1.1; } }

/* ==========================================================================
   PRIMITIVES — the shared building blocks every later phase consumes.
   ========================================================================== */

/* ---------- container ---------- */
.oma-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--oma-wrap-max);
  margin: 0 auto;
  padding: 0 var(--oma-gutter);
  position: relative;
}

/* ---------- buttons ---------- */
.oma-btn,
.oma-btn:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--oma-btn-gap);
  box-sizing: border-box;
  padding: var(--oma-btn-pad);
  border: 0;
  border-radius: var(--oma-btn-radius);
  background: var(--oma-btn-bg);
  color: var(--oma-btn-color);
  font-family: var(--oma-font);
  font-size: var(--oma-btn-fs);
  line-height: var(--oma-btn-lh);
  font-weight: var(--oma-btn-fw);
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: var(--oma-btn-transition);
}
.oma-btn:hover { background: var(--oma-btn-bg-hover); color: var(--oma-btn-color); }

/* the dark-blue arrow chip inside the cyan CTA (wp-custom-css .button_icon) */
.oma-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--oma-btn-icon-size);
  height: var(--oma-btn-icon-size);
  border-radius: 12%;
  background: var(--oma-btn-icon-bg);
  overflow: hidden;
}
.oma-btn__icon svg { width: 15px; height: 15px; display: block; }
.oma-btn__icon svg path,
.oma-btn__icon svg line { stroke: #fff; }
.oma-btn:hover .oma-btn__icon svg { animation: oma-scroll-icon .3s linear forwards; }

@keyframes oma-scroll-icon {
  0%   { transform: translate(0,0);     opacity: 1; }
  50%  { transform: translate(160%,0);  opacity: 0; }
  51%  { transform: translate(-160%,0); opacity: 0; }
  100% { transform: translate(0,0);     opacity: 1; }
}

/* secondary blue button — "Explore more", newsletter Subscribe */
.oma-btn--blue {
  background: var(--oma-btn-blue-bg);
  color: var(--oma-btn-blue-color);
  padding: 9px 18px;
}
.oma-btn--blue:hover { background: var(--oma-btn-blue-hover); color: #fff; }

/* ghost/outline button — slider prev/next (measured: transparent, 1px
   rgba(0,0,0,.3), radius 7px, padding 10px; hover fills #1C6BBA) */
.oma-btn--ghost {
  padding: 10px;
  border: 1px solid var(--oma-line-30);
  border-radius: 7px;
  background: rgba(255,255,255,0);
  color: var(--oma-black);
}
.oma-btn--ghost:hover { background: var(--oma-blue); border-color: var(--oma-blue); color: #fff; }
.oma-btn--ghost svg { display: block; width: 18px; height: 18px; }
.oma-btn--ghost svg path { stroke: currentColor; }

/* ---------- badge ---------- */
/* measured on the archive: "Sold out" H4 16/16/600; .onsale radius 8, pad 10,
   line-height 100%, margin 15px. NOTE: the source has ZERO products on sale —
   the on-sale badge style is carried for completeness only. */
.oma-badge {
  display: inline-block;
  padding: 10px;
  border-radius: var(--oma-r-8);
  background: var(--oma-blue);
  color: #fff;
  font-size: 16px;
  line-height: 100%;
  font-weight: 600;
  min-height: auto;
}
/* SOLD-OUT badge — source-exact. merged.css:
     .woocommerce ul.products li.product.outofstock .product-loop-thumb .soldout h4
       { font-size:16px; line-height:1; border:2px solid; padding:5px 10px; border-radius:3px }
   `border:2px solid` with no colour = currentColor, and the measured H4 colour is
   rgb(0,0,0) (source-cdp/maps/research-supplies.json). Background is TRANSPARENT —
   pixel-sampled at x845,y975 of _shots/desktop-1440/research-supplies.png, where the
   badge interior (206,208,213) equals the faded photo just outside it (206,208,214).
   NOT the filled #262626 chip we shipped in Wave 1. */
.oma-badge--soldout {
  padding: 5px 10px;
  border: 2px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: var(--oma-black);
  line-height: 1;
}

/* ---------- card surfaces ---------- */
.oma-card        { border-radius: var(--oma-r-19); background: var(--oma-tint-f8f8f8); }
.oma-card--blue  { background: var(--oma-tint-f0f8ff); }
.oma-card--photo { border-radius: var(--oma-r-30); background-size: cover; background-position: center; }

/* ---------- inputs ---------- */
.oma-input,
input[type="text"].oma-input,
input[type="email"].oma-input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--oma-tint-e4e4e4);
  border-radius: var(--oma-r-12);
  background: #fff;
  color: var(--oma-grey-62);
  font-family: var(--oma-font);
  font-size: 15px;
  line-height: normal;
  box-shadow: none;
}
.oma-input:focus {
  outline: none;
  border-color: rgba(var(--oma-blue-rgb),.7);
  background: #fff;
}

/* ---------- utility ---------- */
.oma-eyebrow { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: var(--oma-ls-body); }
.oma-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}