/*
 Theme Name: Mr. Peps - Astra Child
 Theme URI: https://mrpeps.com
 Description: Premium research compounds e-commerce child theme for Astra. Rebuilt homepage, header, and footer with full tablet/mobile responsiveness, off-canvas cart, themed WooCommerce + page templates.
 Author: Custom
 Version: 3.7.1
 Template: astra
 Text Domain: mrpeps-child
*/

/* ============================================================
   ROOT TOKENS
   ============================================================ */
:root {
    --mp-bg:        #F7F3EC;
    --mp-surface:   #FFFDFA;
    --mp-surface-2: #F1ECE3;
    --mp-navy:      #142440;
    --mp-navy-2:    #101B2E;
    --mp-navy-3:    #111C30;
    --mp-teal:      #2B4A52;
    --mp-cream:     #FBF8F3;
    --mp-accent:    #8A4B2A;
    --mp-text:      #16233B;
    --mp-text-2:    #4A5262;
    --mp-muted:     #6E6A63;
    --mp-subtle:    #8A8478;
    --mp-line:      rgba(20,36,64,.08);
    --mp-line-2:    rgba(20,36,64,.12);
    --mp-pad:       32px;   /* container side padding, adjusted at breakpoints */
    --mp-maxw:      1320px;

    /* Hero vial float animation — overridable from Appearance → Customize → Hero Animation.
       Defaults give a clean up/down bob (side sway 0). */
    --mp-float-y:     12px;   /* float height (how far up it rises) */
    --mp-float-x:     0px;    /* side sway (0 = pure vertical bob) */
    --mp-float-speed: 3.6s;   /* one full cycle */
}

/* ============================================================
   BASE / ASTRA RESETS
   ============================================================ */
html, body {
    margin: 0;
    padding: 0;
    background: var(--mp-bg);
    font-family: 'Barlow', system-ui, -apple-system, sans-serif;
    color: var(--mp-text);
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

a { color: var(--mp-text); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--mp-accent); }
img { max-width: 100%; height: auto; }
input, button, select, textarea { font-family: inherit; }

@keyframes mpticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mpfade   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mpfloat  { 0%,100% { transform: translateY(0) rotate(var(--tilt,0deg)); } 50% { transform: translateY(-12px) rotate(var(--tilt,0deg)); } }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(20,36,64,.22); border-radius: 4px; }

/* Neutralise Astra structural wrappers so our full-width sections behave */
#site-content, .site-content, #primary, #main { margin: 0; padding: 0; max-width: none; }
.ast-container, .site-content .ast-container { max-width: none; padding: 0; }
main#site-content > * { width: 100%; }

#site-content { overflow-x: clip; }

.mp-container {
    max-width: var(--mp-maxw);
    margin: 0 auto;
    padding: 0 var(--mp-pad);
    width: 100%;
}
.mp-eyebrow {
    font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--mp-subtle); font-weight: 500; margin-bottom: 12px;
}
.mp-eyebrow.on-dark { color: rgba(247,243,236,.5); }
.mp-serif { font-family: 'Playfair Display', serif; font-weight: 400; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 60; }

.mp-topbar {
    background: #EFE9DF;
    color: #6E6A63;
    border-bottom: 1px solid rgba(20,36,64,.09);
}
.mp-topbar-inner {
    max-width: var(--mp-maxw); margin: 0 auto; padding: 0 var(--mp-pad);
    height: 34px; display: flex; align-items: center; justify-content: space-between;
    font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
}
.mp-topbar-inner .sep { color: #C4BDB0; opacity: 1; }
.mp-topbar-inner span { white-space: nowrap; }

.mp-nav {
    background: var(--mp-surface);
    border-bottom: 1px solid var(--mp-line);
}
.mp-nav-inner {
    max-width: var(--mp-maxw); margin: 0 auto; padding: 0 var(--mp-pad);
    height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.mp-nav-menu {
    display: flex; gap: 26px; align-items: center;
    font-size: 11px; letter-spacing: .11em; text-transform: uppercase; font-weight: 500;
    list-style: none; margin: 0; padding: 0;
}
.mp-nav-menu a { color: #2A3550; }
.mp-nav-menu a:hover { color: var(--mp-accent); }

.mp-brand { justify-self: center; display: inline-flex; align-items: center; }
.mp-brand img, .mp-brand svg { height: 30px; width: auto; display: block; }
.mp-brand-fallback {
    font-family: 'Playfair Display', serif; font-size: 24px; line-height: 1; color: var(--mp-navy);
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.mp-brand-fallback small {
    font-family: 'Barlow', sans-serif; font-size: 7.5px; letter-spacing: .34em;
    color: var(--mp-subtle); margin-top: 4px; font-weight: 500;
}

.mp-nav-actions {
    display: flex; gap: 22px; align-items: center; justify-content: flex-end; color: #2A3550;
}
/* SVG icons (inlined so they inherit the nav colour via fill: currentColor) */
.mp-ico-account { display: inline-flex; align-items: center; color: inherit; opacity: .9; transition: opacity .18s ease; }
.mp-ico-account svg { display: block; width: 22px; height: 22px; fill: currentColor; }
/* Account icon as a button (opens the login/register panel) */
.mp-ico-btn {
    -webkit-appearance: none; appearance: none; background: none; padding: 0; margin: 0;
    cursor: pointer; color: inherit; box-shadow: none; min-width: 0; line-height: 0; border: 0;
}
.mp-ico-btn:hover, .mp-ico-account:hover { opacity: 1; }

.mp-ico-cart { position: relative; display: inline-flex; align-items: center; gap: 6px; color: inherit; opacity: .9; transition: opacity .18s ease; }
.mp-ico-cart:hover { opacity: 1; }
.mp-ico-cart-svg { display: inline-flex; align-items: center; }
.mp-ico-cart-svg svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.mp-ico-cart .count { font-size: 11px; font-weight: 600; letter-spacing: .06em; min-width: 10px; }

/* Hamburger (hidden on desktop) */
.mp-burger {
    display: none; flex-direction: column; gap: 4px; justify-self: start;
    background: none; border: 0; cursor: pointer; padding: 6px; margin-left: -6px;
}
.mp-burger span { width: 22px; height: 2px; background: #2A3550; display: block; transition: .25s; }
.mp-mobile-menu { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.mp-hero { position: relative; background: var(--mp-navy-2); overflow: hidden; }
.mp-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 72% 8%, rgba(214,199,178,.30) 0%, rgba(24,36,58,.15) 42%, rgba(8,14,26,.85) 100%);
}
.mp-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,13,24,.94) 0%, rgba(10,17,31,.72) 42%, rgba(10,17,31,.15) 78%);
}
.mp-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--mp-maxw); margin: 0 auto; padding: 0 var(--mp-pad);
    height: 520px; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
}
.mp-hero-copy { padding-right: 40px; }
.mp-hero-copy h1 {
    font-family: 'Playfair Display', serif; font-weight: 400; font-size: 60px; line-height: 1.06;
    color: var(--mp-cream); margin: 0 0 22px; letter-spacing: -.01em;
}
.mp-hero-copy p {
    margin: 0 0 30px; max-width: 430px; font-size: 13.5px; line-height: 1.85;
    color: rgba(251,248,243,.72); font-weight: 300;
}
.mp-btn {
    display: inline-block; background: var(--mp-cream); color: var(--mp-navy);
    padding: 14px 26px; font-size: 10.5px; letter-spacing: .16em; font-weight: 600;
    text-transform: uppercase; border: none; cursor: pointer; transition: all .25s ease;
}
.mp-btn:hover { background: var(--mp-accent); color: var(--mp-cream); }
.mp-btn--dark { background: var(--mp-navy); color: var(--mp-cream); }
.mp-btn--dark:hover { background: var(--mp-accent); color: var(--mp-cream); }
.mp-btn--ghost {
    background: transparent; border: 1px solid rgba(251,248,243,.4); color: var(--mp-cream);
    padding: 13px 26px; font-size: 10px;
}
.mp-btn--ghost:hover { background: rgba(251,248,243,.1); color: var(--mp-cream); }
.mp-btn--block { display: block; text-align: center; width: 100%; }

.mp-hero-visual {
    position: relative; height: 100%; display: flex; align-items: flex-end;
    justify-content: center; padding-bottom: 96px;
}
.mp-hero-backdrop {
    position: absolute; right: -10px; bottom: 96px; width: 250px; height: 210px;
    background: linear-gradient(150deg,#B5A895,#8C7F6C); border-radius: 3px;
    box-shadow: 0 30px 60px rgba(0,0,0,.5); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
}
.mp-hero-backdrop b { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 400; color: rgba(30,24,16,.62); }
.mp-hero-backdrop small { font-size: 6.5px; letter-spacing: .32em; color: rgba(30,24,16,.45); }
.mp-hero-shelf {
    position: absolute; left: 14%; bottom: 88px; width: 210px; height: 26px;
    background: linear-gradient(180deg,#D8CDBB,#B6A894); border-radius: 2px;
}
.mp-hero-vials { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 14px; }
.mp-hero .mp-vial { animation: mpfloat 3s ease-in-out infinite; }
.mp-hero .mp-vial:nth-child(1) { --tilt: -8deg; animation-delay: 0s;   }
.mp-hero .mp-vial:nth-child(2) { --tilt: -4deg; animation-delay: .1s;  }
.mp-hero .mp-vial:nth-child(3) { --tilt:  0deg; animation-delay: .2s;  }
.mp-hero .mp-vial:nth-child(4) { --tilt:  4deg; animation-delay: .3s;  }
.mp-hero .mp-vial:nth-child(5) { --tilt:  8deg; animation-delay: .4s;  }

/* Hero trust strip */
.mp-hero-trust { position: relative; z-index: 2; background: rgba(8,13,24,.55); border-top: 1px solid rgba(251,248,243,.12); }
.mp-hero-trust-inner {
    max-width: var(--mp-maxw); margin: 0 auto; padding: 18px var(--mp-pad);
    display: flex; gap: 52px; flex-wrap: wrap;
}
.mp-hero-trust-item { display: flex; align-items: center; gap: 11px; color: rgba(251,248,243,.78); }
.mp-hero-trust-item .dot { width: 19px; height: 19px; border: 1.2px solid rgba(251,248,243,.5); border-radius: 50%; flex: none; }
.mp-hero-trust-item span { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; line-height: 1.5; font-weight: 500; }

/* ============================================================
   VIAL COMPONENT (variants via custom props)
   ============================================================ */
.mp-vial {
    --capw:34px; --caph:20px; --sealw:24px; --sealh:7px; --botw:58px; --both:120px;
    --lpad:11px 5px; --fname:10px; --fshort:6.5px; --fdose:5.5px; --fruo:4.5px;
    display: flex; flex-direction: column; align-items: center;
    filter: drop-shadow(0 24px 30px rgba(0,0,0,.45));
}
.mp-vial .cap  { width: var(--capw); height: var(--caph); border-radius: 3px 3px 2px 2px; background: linear-gradient(100deg,#4A5058,#20252C 55%,#575E66); }
.mp-vial .seal { width: var(--sealw); height: var(--sealh); background: linear-gradient(90deg,#9AA4AF,#EDF1F5,#8E98A3); }
.mp-vial .bottle {
    width: var(--botw); height: var(--both); border-radius: 3px 3px 7px 7px; overflow: hidden;
    background: linear-gradient(100deg, rgba(255,255,255,.30), rgba(255,255,255,.05) 45%, rgba(0,0,0,.22));
    display: flex; align-items: center; justify-content: center;
}
.mp-vial .label { width: 100%; padding: var(--lpad); text-align: center; color: rgba(255,255,255,.94); }
.mp-vial .v-name  { font-family: 'Playfair Display', serif; font-size: var(--fname); line-height: 1; }
.mp-vial .v-short { font-size: var(--fshort); letter-spacing: .1em; font-weight: 600; margin-top: 7px; }
.mp-vial .v-dose  { font-size: var(--fdose); letter-spacing: .12em; margin-top: 3px; opacity: .8; }
.mp-vial .v-div   { height: 1px; background: rgba(255,255,255,.28); margin: 7px 4px 5px; }
.mp-vial .v-ruo   { font-size: var(--fruo); letter-spacing: .14em; opacity: .72; }

.mp-vial.is-rail  { --capw:38px;--caph:22px;--sealw:27px;--sealh:8px;--botw:66px;--both:132px;--lpad:13px 6px;--fname:11px;--fshort:7px;--fdose:6px;--fruo:5px; filter: drop-shadow(0 14px 18px rgba(20,36,64,.22)); }
.mp-vial.is-match { --capw:44px;--caph:26px;--sealw:31px;--sealh:9px;--botw:78px;--both:158px;--lpad:16px 7px;--fname:13px;--fshort:8px;--fdose:7px;--fruo:5.5px; filter: drop-shadow(0 18px 22px rgba(20,36,64,.24)); }
.mp-vial.is-bundle{ --capw:30px;--caph:18px;--sealw:21px;--sealh:6px;--botw:52px;--both:108px;--lpad:10px 4px;--fname:9px;--fshort:6px;--fruo:4.5px; filter: drop-shadow(0 16px 20px rgba(0,0,0,.5)); }
.mp-vial.is-bundle .v-short { margin-top: 6px; }
.mp-vial.is-bundle .v-div { margin: 6px 4px 4px; }

/* ============================================================
   COMPLIANCE TICKER
   ============================================================ */
.mp-ticker { background: var(--mp-navy); overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
.mp-ticker-track { display: flex; width: max-content; animation: mpticker 90s linear infinite; will-change: transform; }
.mp-ticker:hover .mp-ticker-track { animation-play-state: paused; }
.mp-ticker-item {
    display: flex; align-items: center; gap: 12px; padding: 11px 26px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .04em;
    color: rgba(247,243,236,.42); white-space: nowrap;   /* dim base — city/time recede */
}
.mp-ticker-item .dot { width: 4px; height: 4px; border-radius: 50%; background: #7FA8B8; flex: none; }
/* Highlight what happened: action + product in white, everything else dim */
.mp-ticker-item .mp-tk-act  { color: #FFFFFF; }
.mp-ticker-item .mp-tk-prod { color: #FFFFFF; font-weight: 500; }
/* Real (live) events just get a pulsing green dot (highlighting stays consistent) */
.mp-ticker-item.is-live .dot { background: #7FD1A8; animation: mp-live-pulse 2s ease-out infinite; }
@keyframes mp-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(127,209,168,.55); }
    70%  { box-shadow: 0 0 0 6px rgba(127,209,168,0); }
    100% { box-shadow: 0 0 0 0 rgba(127,209,168,0); }
}
@media (prefers-reduced-motion: reduce) {
    .mp-ticker-track { animation: none !important; }
    .mp-ticker-item.is-live .dot { animation: none; }
}

/* ============================================================
   PRODUCT RAIL / CATALOG
   ============================================================ */
.mp-catalog { max-width: var(--mp-maxw); margin: 0 auto; padding: 74px var(--mp-pad) 0; }
.mp-catalog-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; gap: 20px; }
.mp-catalog-head h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 38px; margin: 0; color: var(--mp-navy); }
.mp-rail-nav { display: flex; gap: 10px; flex: none; }
.mp-rail-btn {
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer; border: 1px solid rgba(20,36,64,.25); background: transparent; color: rgba(20,36,64,.5);
}
.mp-rail-btn.is-primary { background: var(--mp-navy); border-color: var(--mp-navy); color: var(--mp-bg); }

.mp-rail {
    display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.mp-rail::-webkit-scrollbar { display: none; }
.mp-rail { scrollbar-width: none; }
.mp-card { flex: 0 0 236px; background: var(--mp-surface); border: 1px solid rgba(20,36,64,.07); scroll-snap-align: start; }
.mp-card-media {
    display: flex; height: 200px; background: var(--mp-surface-2);
    align-items: center; justify-content: center; overflow: hidden; position: relative; padding: 22px;
}
.mp-card-media img { max-height: 150px; max-width: 74%; width: auto; object-fit: contain; }
.mp-card-body { padding: 15px 15px 0; }
.mp-card-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mp-navy); line-height: 1.3; }
.mp-card-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; gap: 10px; }
.mp-card-dose { font-size: 11px; color: var(--mp-subtle); }
.mp-card-price { font-size: 15px; font-weight: 500; color: var(--mp-navy); }
.mp-card-price .amount { font-weight: 500; }
.mp-card-foot { padding: 13px 15px 15px; }
.mp-card-foot .mp-btn--dark { padding: 11px; font-size: 9.5px; }

/* ============================================================
   MATCH SECTION
   ============================================================ */
.mp-match {
    max-width: var(--mp-maxw); margin: 0 auto; padding: 64px var(--mp-pad) 0;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start;
}
.mp-match h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 38px; line-height: 1.15; margin: 0 0 14px; color: var(--mp-navy); }
.mp-match-lead { margin: 0 0 26px; font-size: 13px; line-height: 1.8; color: var(--mp-muted); max-width: 400px; font-weight: 300; }
.mp-goal {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; margin-bottom: 3px; border-bottom: 1px solid var(--mp-line);
    cursor: pointer; transition: background .2s ease, color .2s ease; color: var(--mp-navy);
}
.mp-goal .g-left { display: flex; gap: 16px; align-items: baseline; }
.mp-goal .g-num { font-family: 'IBM Plex Mono', monospace; font-size: 10px; opacity: .55; }
.mp-goal .g-name { font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.mp-goal .g-tag { font-size: 10.5px; opacity: .62; letter-spacing: .04em; text-align: right; }
.mp-goal.is-active { background: var(--mp-navy); color: var(--mp-cream); }

.mp-match-card { background: var(--mp-surface); border: 1px solid rgba(20,36,64,.07); }
.mp-match-media { background: var(--mp-surface-2); height: 250px; display: flex; align-items: center; justify-content: center; }
.mp-match-info { padding: 22px 24px 24px; }
.mp-match-info-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mp-match-name { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mp-navy); }
.mp-match-price { font-size: 17px; font-weight: 500; color: var(--mp-navy); }
.mp-match-blurb { margin: 12px 0 16px; font-size: 12.5px; line-height: 1.75; color: var(--mp-muted); font-weight: 300; }
.mp-match-best { font-size: 11px; color: var(--mp-accent); letter-spacing: .04em; margin-bottom: 18px; }

/* ============================================================
   BUNDLE SECTION
   ============================================================ */
.mp-bundle {
    max-width: var(--mp-maxw); margin: 56px auto 0; padding: 0 var(--mp-pad);
    display: grid; grid-template-columns: 1fr 1.05fr; align-items: stretch;
}
.mp-bundle-left { background: var(--mp-navy-3); padding: 44px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.mp-bundle-brand b { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 24px; color: rgba(251,248,243,.9); }
.mp-bundle-brand small { display: block; font-size: 7px; letter-spacing: .32em; color: rgba(251,248,243,.45); margin-top: 5px; }
.mp-bundle-vials { display: flex; gap: 9px; align-items: flex-end; margin-top: 36px; flex-wrap: wrap; }
.mp-bundle-right { background: var(--mp-surface-2); padding: 44px; }
.mp-bundle-right h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 34px; line-height: 1.15; margin: 0 0 12px; color: var(--mp-navy); }
.mp-bundle-right p { margin: 0 0 20px; font-size: 12.5px; line-height: 1.75; color: var(--mp-muted); font-weight: 300; max-width: 400px; }
.mp-bundle-opts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.mp-opt {
    display: flex; align-items: center; gap: 8px; padding: 8px 13px;
    border: 1px solid rgba(20,36,64,.2); background: transparent; color: var(--mp-navy);
    font-size: 11px; letter-spacing: .06em; font-weight: 500; cursor: pointer; transition: all .2s ease;
}
.mp-opt .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(20,36,64,.3); }
.mp-opt.is-on { background: var(--mp-navy); color: var(--mp-cream); border-color: var(--mp-navy); }
.mp-opt.is-on .dot { background: #A9C6D2; }
.mp-bundle-priceline { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.mp-bundle-total { font-size: 26px; font-weight: 500; color: var(--mp-navy); }
.mp-bundle-was { font-size: 14px; color: #9A948A; text-decoration: line-through; }
.mp-bundle-save { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mp-accent); font-weight: 600; }
.mp-bundle-count { font-size: 11.5px; color: var(--mp-muted); margin-bottom: 20px; }
.mp-bundle-fine { margin-top: 16px; font-size: 10.5px; color: #9A948A; letter-spacing: .03em; }

/* ============================================================
   PROCESS SECTION
   ============================================================ */
.mp-process { background: var(--mp-navy); margin-top: 64px; padding: 70px 0; }
.mp-process-inner { max-width: var(--mp-maxw); margin: 0 auto; padding: 0 var(--mp-pad); }
.mp-process h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 38px; line-height: 1.15; margin: 0 0 14px; color: var(--mp-cream); }
.mp-process-lead { margin: 0 0 40px; font-size: 13px; line-height: 1.8; color: rgba(251,248,243,.6); max-width: 430px; font-weight: 300; }
.mp-process-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(251,248,243,.16); }
.mp-step { padding: 26px 28px 30px; border-right: 1px solid rgba(251,248,243,.16); }
.mp-step:last-child { border-right: none; }
.mp-step .num { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: rgba(251,248,243,.45); margin-bottom: 14px; }
.mp-step .title { font-family: 'Playfair Display', serif; font-size: 19px; color: var(--mp-cream); margin-bottom: 10px; }
.mp-step .body { font-size: 12px; line-height: 1.75; color: rgba(251,248,243,.6); font-weight: 300; }

/* ============================================================
   FAQ SECTION
   ============================================================ */
.mp-faq { max-width: var(--mp-maxw); margin: 0 auto; padding: 74px var(--mp-pad); display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; }
.mp-faq h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 34px; line-height: 1.2; margin: 0; color: var(--mp-navy); }
.mp-faq-item { border-bottom: 1px solid var(--mp-line-2); }
.mp-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; font-size: 13px; font-weight: 500; color: var(--mp-navy); cursor: pointer; }
.mp-faq-q:hover { color: var(--mp-accent); }
.mp-faq-sign { font-size: 16px; font-weight: 300; color: var(--mp-subtle); flex: none; }
.mp-faq-a { padding: 0 4px 20px; font-size: 12.5px; line-height: 1.85; color: var(--mp-muted); font-weight: 300; max-width: 620px; display: none; }
.mp-faq-item.is-open .mp-faq-a { display: block; animation: mpfade .18s ease; }

/* ============================================================
   VERIFY / BATCH
   ============================================================ */
.mp-verify { background: var(--mp-navy); padding: 64px 0; }
.mp-verify-inner { max-width: var(--mp-maxw); margin: 0 auto; padding: 0 var(--mp-pad); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mp-verify h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 36px; line-height: 1.15; margin: 0 0 14px; color: var(--mp-cream); }
.mp-verify p { margin: 0 0 26px; font-size: 13px; line-height: 1.8; color: rgba(251,248,243,.6); max-width: 420px; font-weight: 300; }
.mp-verify-form { border: 1px solid rgba(251,248,243,.18); padding: 28px; }
.mp-verify-form .label { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,236,.5); font-weight: 500; margin-bottom: 14px; }
.mp-batch-group { display: flex; gap: 10px; }
.mp-batch-input { flex: 1; min-width: 0; background: rgba(251,248,243,.06); border: 1px solid rgba(251,248,243,.22); color: var(--mp-cream); padding: 13px 14px; font-size: 12px; letter-spacing: .04em; outline: none; }
.mp-batch-input::placeholder { color: rgba(251,248,243,.4); }
.mp-batch-submit { background: rgba(251,248,243,.1); border: 1px solid rgba(251,248,243,.3); color: var(--mp-cream); padding: 13px 22px; font-size: 10px; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.mp-batch-submit:hover { background: rgba(251,248,243,.2); }
.mp-batch-result { margin-top: 18px; border-top: 1px solid rgba(251,248,243,.18); padding-top: 16px; display: none; }
.mp-batch-result.is-show { display: block; animation: mpfade .2s ease; }
.mp-batch-result .row { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(251,248,243,.8); margin-bottom: 8px; }
.mp-batch-result .purity { color: #A9C6D2; }
.mp-batch-result .meta { font-size: 12px; color: rgba(251,248,243,.62); font-weight: 300; }
.mp-batch-miss { margin-top: 14px; font-size: 11.5px; color: #D8A28A; font-weight: 300; display: none; }
.mp-batch-miss.is-show { display: block; }
.mp-batch-notice { margin-top: 14px; font-size: 10.5px; color: rgba(251,248,243,.4); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--mp-navy); padding: 56px 0 0; position: relative; overflow: hidden; }
.mp-foot-grid { max-width: var(--mp-maxw); margin: 0 auto; padding: 0 var(--mp-pad); display: grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 36px; position: relative; z-index: 2; }
.mp-foot-brand b { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 24px; color: var(--mp-cream); }
.mp-foot-brand small { display: block; font-size: 7px; letter-spacing: .32em; color: rgba(251,248,243,.45); margin-top: 5px; }
.mp-foot-brand p { margin: 18px 0 0; font-size: 11.5px; line-height: 1.8; color: rgba(251,248,243,.5); max-width: 250px; font-weight: 300; }
.mp-foot-col h4 { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(251,248,243,.5); font-weight: 600; margin: 0 0 16px; }
.mp-foot-col ul { list-style: none; margin: 0; padding: 0; }
.mp-foot-col li { margin-bottom: 10px; }
.mp-foot-col a { font-size: 12px; color: rgba(251,248,243,.72); font-weight: 300; }
.mp-foot-col a:hover { color: var(--mp-cream); }
.mp-foot-bottom { max-width: var(--mp-maxw); margin: 34px auto 0; padding: 16px var(--mp-pad); border-top: 1px solid rgba(251,248,243,.14); font-size: 11px; color: rgba(251,248,243,.45); position: relative; z-index: 2; }
.mp-foot-bottom a { color: rgba(251,248,243,.6); }
.mp-foot-compliance { font-size: 10.5px; letter-spacing: .08em; color: rgba(251,248,243,.4); margin-top: 6px; }
.mp-foot-watermark { text-align: center; font-family: 'Playfair Display', serif; font-size: 150px; line-height: .78; color: rgba(251,248,243,.06); letter-spacing: .04em; user-select: none; margin-top: 6px; pointer-events: none; }

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1080px) {
    .mp-hero-copy h1 { font-size: 50px; }
    .mp-catalog-head h2, .mp-match h2, .mp-process h2 { font-size: 32px; }
}

@media (max-width: 1024px) {
    :root { --mp-pad: 24px; }
    .mp-match, .mp-faq, .mp-verify-inner { grid-template-columns: 1fr; }
    .mp-bundle { grid-template-columns: 1fr; }
    .mp-process-grid { grid-template-columns: repeat(2,1fr); }
    .mp-process-grid .mp-step:nth-child(2) { border-right: none; }
    .mp-foot-grid { grid-template-columns: repeat(3,1fr); }
    .mp-foot-brand { grid-column: 1 / -1; }
    .mp-hero-trust-inner { gap: 20px 40px; }
    .mp-foot-watermark { font-size: 110px; }
}

/* ============================================================
   RESPONSIVE — MOBILE NAV (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
    .mp-nav-inner { grid-template-columns: auto 1fr auto; }
    .mp-nav-menu { display: none; }
    .mp-burger { display: flex; }
    .mp-brand { justify-self: center; }
    .mp-mobile-menu {
        display: block; background: var(--mp-surface); border-bottom: 1px solid var(--mp-line);
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .mp-mobile-menu.is-open { max-height: 420px; }
    .mp-mobile-menu ul { list-style: none; margin: 0; padding: 8px 0; }
    .mp-mobile-menu li { border-top: 1px solid var(--mp-line); }
    .mp-mobile-menu li:first-child { border-top: none; }
    .mp-mobile-menu a { display: block; padding: 14px 24px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: #2A3550; }
    .mp-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .mp-burger.is-open span:nth-child(2) { opacity: 0; }
    .mp-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    :root { --mp-pad: 20px; }

    .mp-topbar-inner { gap: 8px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; height: 32px; }
    .mp-topbar-inner::-webkit-scrollbar { display: none; }

    .mp-hero-inner { grid-template-columns: 1fr; height: auto; padding-top: 40px; padding-bottom: 0; gap: 8px; }
    .mp-hero-copy { padding-right: 0; }
    .mp-hero-copy h1 { font-size: 38px; }
    .mp-hero-visual { padding-bottom: 48px; padding-top: 16px; min-height: 300px; }
    .mp-hero-backdrop, .mp-hero-shelf { display: none; }
    .mp-hero-vials { gap: 10px; transform: scale(.9); transform-origin: bottom center; }
    .mp-hero-trust-inner { gap: 14px 24px; }

    .mp-catalog { padding-top: 54px; }
    .mp-catalog-head { flex-wrap: wrap; }
    .mp-catalog-head h2, .mp-match h2, .mp-verify h2 { font-size: 28px; }
    .mp-process h2 { font-size: 30px; }

    .mp-match { padding-top: 48px; }
    .mp-bundle-left { padding: 32px 24px; }
    .mp-bundle-right { padding: 32px 24px; }

    .mp-process { padding: 54px 0; }
    .mp-process-grid { grid-template-columns: 1fr; }
    .mp-step { border-right: none; border-bottom: 1px solid rgba(251,248,243,.16); }
    .mp-step:last-child { border-bottom: none; }

    .mp-faq { padding-top: 54px; padding-bottom: 54px; gap: 24px; }
    .mp-verify { padding: 54px 0; }

    .mp-foot-grid { grid-template-columns: repeat(2,1fr); gap: 28px; }
    .mp-foot-watermark { font-size: 74px; }
}

/* ============================================================
   RESPONSIVE — SMALL (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    :root { --mp-pad: 16px; }
    .mp-hero-copy h1 { font-size: 32px; }
    .mp-card { flex-basis: 200px; }
    .mp-goal { padding: 12px 12px; }
    .mp-goal .g-tag { display: none; }
    .mp-bundle-priceline { gap: 10px; }
    .mp-foot-grid { grid-template-columns: 1fr; }
    .mp-foot-watermark { font-size: 54px; }
    .mp-topbar-inner { font-size: 8.5px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .mp-ticker-track { animation: none; }
    .mp-hero .mp-vial { animation: none; }
}

/* ============================================================
   PAGE TEMPLATE (About, Quality, Contact, generic Pages)
   ============================================================ */
.mp-page-hero { background: var(--mp-navy); padding: 56px 0 52px; }
.mp-page-hero .mp-eyebrow.on-dark { color: rgba(247,243,236,.5); }
.mp-page-hero h1 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 44px; line-height: 1.12; margin: 0; color: var(--mp-cream); }
.mp-page-hero--shop { padding: 52px 0 46px; background: var(--mp-navy-3); }

.mp-page { padding: 56px 0 80px; }
.mp-page-content { max-width: 860px; font-size: 15px; line-height: 1.85; color: var(--mp-text-2); font-weight: 300; }
.mp-page-content > *:first-child { margin-top: 0; }
.mp-page-content h1, .mp-page-content h2, .mp-page-content h3, .mp-page-content h4 {
    font-family: 'Playfair Display', serif; font-weight: 400; color: var(--mp-navy); line-height: 1.2; margin: 40px 0 14px;
}
.mp-page-content h2 { font-size: 30px; }
.mp-page-content h3 { font-size: 23px; }
.mp-page-content h4 { font-size: 18px; }
.mp-page-content p { margin: 0 0 18px; }
.mp-page-content a { color: var(--mp-accent); text-decoration: underline; text-underline-offset: 2px; }
.mp-page-content ul, .mp-page-content ol { margin: 0 0 18px; padding-left: 20px; }
.mp-page-content li { margin-bottom: 8px; }
.mp-page-content img { border-radius: 2px; height: auto; }
.mp-page-content figure { margin: 24px 0; }
.mp-page-content figure img { width: 100%; }
.mp-page-content figcaption { font-size: 12px; color: var(--mp-subtle); margin-top: 8px; text-align: center; }
.mp-page-content blockquote {
    margin: 24px 0; padding: 16px 22px; border-left: 3px solid var(--mp-accent);
    background: var(--mp-surface); font-style: italic; color: var(--mp-text);
}
.mp-page-content hr { border: 0; border-top: 1px solid var(--mp-line-2); margin: 36px 0; }
.mp-page-content .wp-block-button__link,
.mp-page-content .button {
    display: inline-block; background: var(--mp-navy); color: var(--mp-cream);
    padding: 13px 26px; font-size: 10.5px; letter-spacing: .16em; font-weight: 600;
    text-transform: uppercase; text-decoration: none; border-radius: 0;
}
.mp-page-content .wp-block-button__link:hover, .mp-page-content .button:hover { background: var(--mp-accent); color: var(--mp-cream); }

/* ============================================================
   SLIDE-DOWN BAG PANEL (Apple-style flyout)
   ============================================================ */
.mp-cart-overlay {
    position: fixed; inset: 0; z-index: 50; background: rgba(16,27,46,.34);
    opacity: 0; transition: opacity .3s ease;
}
.mp-cart-overlay.is-open { opacity: 1; }
.mp-cart-panel {
    position: fixed; top: 0; left: 0; right: 0; z-index: 58;   /* below header (60) so it tucks behind */
    background: var(--mp-surface); border-bottom: 1px solid var(--mp-line-2);
    box-shadow: none;
    transform: translateY(-100%); transition: transform .34s cubic-bezier(.4,0,.2,1); will-change: transform;
    max-height: 80vh; overflow-y: auto;
}
/* Shadow only while open, so nothing bleeds below the header when closed */
.mp-cart-panel.is-open { transform: translateY(0); box-shadow: 0 24px 40px rgba(16,27,46,.14); }
.mp-cart-inner { padding-top: 26px; padding-bottom: 30px; }

.mp-cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-cart-title { font-family: 'Playfair Display', serif; font-size: 30px; color: var(--mp-navy); }
.mp-cart-head-actions { display: flex; align-items: center; gap: 22px; }
.mp-cart-review { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mp-accent); }
.mp-drawer-close {
    -webkit-appearance: none; appearance: none; background: none !important; border: 0; box-shadow: none !important;
    font-size: 26px; line-height: 1; color: var(--mp-subtle); cursor: pointer; padding: 0; width: auto; min-width: 0;
}
.mp-cart-body { padding: 0; }

/* Cart items — wide horizontal rows (custom mini-cart markup) */
.mp-cart-body ul.cart_list { list-style: none; margin: 0; padding: 0; }
.mp-cart-body ul.cart_list li.mini_cart_item {
    position: relative; display: flex; align-items: center; gap: 20px;
    padding: 18px 40px 18px 0; border-bottom: 1px solid var(--mp-line); font-size: 13px; color: var(--mp-text);
}
.mp-cart-body .mp-mc-thumb { flex: none; width: 64px; display: block; }
.mp-cart-body .mp-mc-thumb img {
    width: 64px !important; height: 82px !important; object-fit: contain; display: block; margin: 0;
    border: 1px solid var(--mp-line); background: var(--mp-surface-2); padding: 4px;
}
.mp-cart-body .mp-mc-info { flex: 1; min-width: 0; }
.mp-cart-body .mp-mc-name {
    display: block; color: var(--mp-navy); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    font-size: 12.5px; line-height: 1.35; text-decoration: none;
}
.mp-cart-body .mp-mc-name:hover { color: var(--mp-accent); }
.mp-cart-body .mp-mc-dose { font-size: 11.5px; color: var(--mp-muted); margin-top: 4px; }
.mp-cart-body .mp-mc-info .variation, .mp-cart-body .mp-mc-info dl { margin: 4px 0 0; font-size: 11px; color: var(--mp-muted); }
.mp-cart-body .mp-mc-qty {
    flex: none; color: var(--mp-muted); font-size: 13.5px; white-space: nowrap; letter-spacing: normal; text-transform: none;
}
.mp-cart-body ul.cart_list li a.remove {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    width: 20px; height: 20px; line-height: 18px; text-align: center; color: #B9B2A6 !important; font-size: 17px;
}
.mp-cart-body ul.cart_list li a.remove:hover { color: var(--mp-accent) !important; background: none; }

/* Totals + buttons as a bottom bar */
.mp-cart-body .woocommerce-mini-cart__total {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
    padding: 20px 0 0; margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-muted);
}
.mp-cart-body .woocommerce-mini-cart__total strong { font-weight: 500; }
.mp-cart-body .woocommerce-mini-cart__total .amount { font-size: 24px; font-weight: 500; color: var(--mp-navy); letter-spacing: normal; text-transform: none; }
.mp-cart-body .woocommerce-mini-cart__buttons { display: flex; justify-content: flex-end; gap: 12px; margin: 16px 0 0; padding: 0; }
.mp-cart-body .woocommerce-mini-cart__buttons .button {
    display: inline-block; text-align: center; background: transparent; border: 1px solid var(--mp-navy);
    color: var(--mp-navy); padding: 13px 30px; font-size: 10.5px; letter-spacing: .16em; font-weight: 600; text-transform: uppercase; text-decoration: none; border-radius: 999px;
}
.mp-cart-body .woocommerce-mini-cart__buttons .button.checkout { background: var(--mp-navy); color: var(--mp-cream); border-color: var(--mp-navy); }
.mp-cart-body .woocommerce-mini-cart__buttons .button:hover { background: var(--mp-accent); color: var(--mp-cream); border-color: var(--mp-accent); }
.mp-cart-body .woocommerce-mini-cart__empty-message, .mp-cart-body p.woocommerce-mini-cart__empty-message {
    padding: 30px 0; text-align: left; color: var(--mp-subtle); font-size: 14px; font-weight: 300;
}

@media (max-width: 768px) {
    .mp-cart-title { font-size: 24px; }
    .mp-cart-body ul.cart_list li { gap: 14px; padding-right: 32px; }
    .mp-cart-body ul.cart_list li img { width: 54px !important; }
    .mp-cart-body .woocommerce-mini-cart__buttons { flex-direction: column; }
    .mp-cart-body .woocommerce-mini-cart__buttons .button { width: 100%; }
}

/* ============================================================
   SLIDE-DOWN ACCOUNT PANEL (login / register)
   Reuses the .mp-cart-panel slide mechanics; the form column is centered.
   ============================================================ */
.mp-auth-inner { max-width: 460px; margin: 0 auto; padding-top: 28px; padding-bottom: 40px; }
.mp-auth-panel .mp-cart-head { margin-bottom: 18px; }

.mp-auth-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--mp-line-2); margin-bottom: 22px; }
.mp-auth-tab {
    -webkit-appearance: none; appearance: none; background: none; border: 0; box-shadow: none;
    padding: 0 2px 12px; margin-right: 28px; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
    color: var(--mp-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s ease, border-color .2s ease;
}
.mp-auth-tab:hover { color: var(--mp-navy); }
.mp-auth-tab.is-active { color: var(--mp-navy); border-bottom-color: var(--mp-accent); }

.mp-auth-msg { padding: 11px 14px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.45; border-radius: 3px; }
.mp-auth-msg.is-error { background: rgba(138,75,42,.10); color: #7A3B1E; border: 1px solid rgba(138,75,42,.28); }
.mp-auth-msg.is-ok { background: rgba(46,90,70,.10); color: #24614A; border: 1px solid rgba(46,90,70,.28); }

.mp-auth-form { display: none; }
.mp-auth-form.is-active { display: block; }
.mp-auth-field { display: block; margin-bottom: 15px; }
.mp-auth-field > span {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mp-muted); margin-bottom: 6px;
}
.mp-auth-field input {
    width: 100%; padding: 12px 14px; border: 1px solid var(--mp-line-2); border-radius: 0;
    background: var(--mp-surface); color: var(--mp-text);
    font-family: 'Barlow', sans-serif; font-size: 15px; transition: border-color .2s ease;
}
.mp-auth-field input:focus { outline: none; border-color: var(--mp-navy); }

.mp-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }
.mp-auth-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mp-text-2); cursor: pointer; }
.mp-auth-check input { width: 15px; height: 15px; accent-color: var(--mp-navy); }
.mp-auth-link { font-size: 12px; color: var(--mp-accent); }
.mp-auth-link:hover { text-decoration: underline; }

.mp-auth-submit {
    -webkit-appearance: none; appearance: none; width: 100%; cursor: pointer;
    background: var(--mp-navy); color: var(--mp-cream); border: 1px solid var(--mp-navy); border-radius: 0;
    padding: 14px 22px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; font-weight: 500; transition: background .2s ease, border-color .2s ease;
}
.mp-auth-submit:hover { background: var(--mp-accent); border-color: var(--mp-accent); }
.mp-auth-submit:disabled { opacity: .6; cursor: default; }
.mp-auth-fine { margin: 16px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--mp-subtle); }

@media (max-width: 600px) {
    .mp-auth-inner { max-width: none; }
}

/* ============================================================
   WOOCOMMERCE — GLOBAL
   ============================================================ */
.mp-woo-inner { padding-top: 40px; padding-bottom: 80px; }
.woocommerce .mp-container { width: 100%; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
    background: var(--mp-navy); color: var(--mp-cream); border-radius: 0;
    padding: 13px 24px; font-size: 10.5px; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; line-height: 1.2;
    transition: background .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--mp-accent); color: var(--mp-cream); }
.woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--mp-navy); font-weight: 500; }
.woocommerce .price del { color: var(--mp-subtle); font-weight: 400; }
.woocommerce .price ins { text-decoration: none; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
    border-top-color: var(--mp-accent); background: var(--mp-surface); border-radius: 0;
}
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--mp-accent); }
.woocommerce span.onsale {
    background: var(--mp-accent); color: var(--mp-cream); border-radius: 0; min-height: auto;
    min-width: auto; padding: 4px 10px; font-size: 10px; letter-spacing: .1em; line-height: 1.4;
}

/* Shop / archive product grid */
.woocommerce ul.products, .woocommerce-page ul.products {
    display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    width: auto !important; margin: 0 !important; float: none !important;
    background: var(--mp-surface); border: 1px solid rgba(20,36,64,.07); padding: 16px 16px 20px; text-align: left;
}
.woocommerce ul.products li.product a img { margin: 0 0 14px; background: var(--mp-surface-2); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mp-navy); padding: 0; line-height: 1.35;
}
.woocommerce ul.products li.product .price { display: block; font-size: 15px; margin: 6px 0 14px; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart {
    display: inline-block; margin: 0; width: 100%; text-align: center;
}
.woocommerce ul.products li.product .added_to_cart { margin-top: 8px; background: transparent; color: var(--mp-navy); border: 1px solid var(--mp-navy); }

/* Result count + ordering */
.woocommerce .woocommerce-result-count { color: var(--mp-muted); font-size: 12.5px; }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--mp-line-2); padding: 8px 10px; background: var(--mp-surface); color: var(--mp-text); }

/* Single product */
.woocommerce div.product .product_title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 40px; color: var(--mp-navy); margin: 0 0 10px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 26px; }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 14px; line-height: 1.8; color: var(--mp-text-2); font-weight: 300; }
.woocommerce div.product form.cart { margin-top: 20px; }
.woocommerce div.product form.cart .quantity input.qty { border: 1px solid var(--mp-line-2); padding: 12px 8px; width: 64px; background: var(--mp-surface); }
.woocommerce .woocommerce-tabs ul.tabs li { background: var(--mp-surface-2); border-color: var(--mp-line-2); border-radius: 0; }
.woocommerce .woocommerce-tabs ul.tabs li.active { background: var(--mp-surface); }
.woocommerce .woocommerce-tabs ul.tabs li a { color: var(--mp-navy); font-size: 12px; letter-spacing: .06em; }
.woocommerce #reviews h2, .woocommerce div.product .woocommerce-tabs h2 { font-family: 'Playfair Display', serif; font-weight: 400; color: var(--mp-navy); }
.woocommerce .related.products > h2, .woocommerce .up-sells > h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 26px; color: var(--mp-navy); }

/* Cart & checkout tables/forms */
.woocommerce table.shop_table { border-radius: 0; border-color: var(--mp-line-2); }
.woocommerce table.shop_table th { color: var(--mp-navy); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.woocommerce-cart table.cart td.product-name a { color: var(--mp-navy); font-weight: 500; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { background: var(--mp-surface); padding: 24px; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce form.checkout h3 { font-family: 'Playfair Display', serif; font-weight: 400; color: var(--mp-navy); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
    border: 1px solid var(--mp-line-2); border-radius: 0; padding: 12px 13px; background: var(--mp-surface); color: var(--mp-text);
}
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--mp-surface); border-radius: 0; }
.woocommerce-checkout #payment div.payment_box { background: var(--mp-surface-2); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--mp-surface-2); }

/* Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--mp-line-2); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--mp-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { color: var(--mp-navy); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--mp-accent); }

/* WooCommerce responsive */
@media (max-width: 1024px) {
    .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .mp-page-hero h1, .woocommerce div.product .product_title { font-size: 30px; }
    .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100% !important; float: none !important; margin-bottom: 24px; }
}
@media (max-width: 480px) {
    .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   HARDENING — override Astra/WooCommerce base button styles
   (rail arrows were rendering as stretched ovals)
   ============================================================ */
.mp-catalog .mp-rail-nav button.mp-rail-btn,
.mp-rail-btn {
    -webkit-appearance: none; appearance: none;
    width: 46px !important; height: 46px !important; min-width: 0 !important; max-width: 46px !important;
    padding: 0 !important; margin: 0 !important; line-height: 1 !important; flex: 0 0 46px;
    border-radius: 50% !important; box-shadow: none !important; letter-spacing: normal !important;
    font-size: 14px !important; font-weight: 400 !important; text-transform: none !important;
    display: flex !important; align-items: center; justify-content: center;
}
.mp-rail-btn { border: 1px solid rgba(20,36,64,.25); background: transparent; color: rgba(20,36,64,.5); }
/* SVG chevrons — perfectly centered (replaces off-center ‹ › text glyphs) */
.mp-rail-btn svg { width: 42% !important; height: 42% !important; max-width: 18px; max-height: 18px; display: block; stroke: currentColor; }
.mp-rail-btn.is-primary { background: var(--mp-navy) !important; border-color: var(--mp-navy) !important; color: var(--mp-bg) !important; }
.mp-rail-btn:hover { color: var(--mp-navy); }
.mp-rail-btn.is-primary:hover { background: var(--mp-accent) !important; border-color: var(--mp-accent) !important; color: var(--mp-cream) !important; }

/* Keep the header logo constrained to a horizontal strip regardless of parent theme */
.mp-brand img { height: 30px !important; width: auto !important; max-width: 180px; }

/* Burger button reset (in case Astra styles buttons) */
.mp-burger { -webkit-appearance: none; appearance: none; background: none !important; box-shadow: none !important; min-width: 0 !important; }

/* ============================================================
   WOOCOMMERCE — CUSTOM SHOP + PDP (v3.2.0)
   ============================================================ */
.mp-shop-sub { margin: 0; font-size: 13px; color: rgba(251,248,243,.6); font-weight: 300; }

/* Shop layout: sidebar + grid */
.mp-shop-layout { display: grid; grid-template-columns: 214px 1fr; gap: 44px; align-items: start; padding-top: 40px; padding-bottom: 80px; }
.mp-shop-side { position: sticky; top: 118px; }
.mp-side-label { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mp-subtle); font-weight: 600; margin-bottom: 14px; }
.mp-side-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 32px; }
.mp-side-link { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; color: var(--mp-navy); font-size: 12.5px; letter-spacing: .03em; }
.mp-side-link.is-active { background: var(--mp-navy); color: var(--mp-cream); }
.mp-side-count { font-family: 'IBM Plex Mono', monospace; font-size: 10px; opacity: .55; }
.mp-sort-link { display: flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--mp-muted); font-size: 12.5px; }
.mp-sort-link.is-active { color: var(--mp-navy); }
.mp-sort-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,36,64,.2); }
.mp-sort-link.is-active .mp-sort-dot { background: var(--mp-navy); }
.mp-side-coa { border: 1px solid var(--mp-line-2); padding: 18px; }
.mp-side-coa-title { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--mp-navy); margin-bottom: 8px; }
.mp-side-coa p { margin: 0 0 14px; font-size: 11.5px; line-height: 1.7; color: var(--mp-muted); font-weight: 300; }
.mp-side-coa-link { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--mp-accent); }

/* Product grid + cards (overrides the generic woo grid) */
.mp-shop-main ul.products, ul.products.mp-wc-grid {
    display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none;
}
li.product.mp-wc-card, li.mp-wc-card {
    width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important;
    background: var(--mp-surface); border: 1px solid rgba(20,36,64,.07); text-align: left; display: flex; flex-direction: column;
}
.mp-wc-card-media {
    display: flex; height: 210px; background: var(--mp-surface-2); align-items: center; justify-content: center;
    position: relative; overflow: hidden; padding: 22px;
}
.mp-wc-card-media img { max-height: 158px; max-width: 74%; width: auto; object-fit: contain; margin: 0; }
.mp-wc-purity {
    position: absolute; top: 11px; left: 11px; font-family: 'IBM Plex Mono', monospace;
    font-size: 8.5px; letter-spacing: .08em; color: var(--mp-subtle);
}
.mp-wc-card-body { padding: 14px 14px 0; }
.mp-wc-card-title { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mp-navy); line-height: 1.35; }
.mp-wc-card-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 5px; gap: 8px; }
.mp-wc-card-foot { padding: 12px 14px 14px; margin-top: auto; }
.mp-wc-card-foot .button, .mp-wc-card-foot .added_to_cart {
    display: block !important; width: 100%; text-align: center; margin: 0;
    background: var(--mp-navy); color: var(--mp-cream); padding: 10px; font-size: 9px;
    letter-spacing: .16em; font-weight: 600; text-transform: uppercase; border-radius: 0;
}
.mp-wc-card-foot .added_to_cart { margin-top: 8px; background: transparent; color: var(--mp-navy); border: 1px solid var(--mp-navy); }
.mp-wc-card-foot .button:hover { background: var(--mp-accent); color: var(--mp-cream); }

/* PDP */
.mp-pdp .mp-container { padding-top: 26px; padding-bottom: 80px; }
.mp-pdp-crumb { font-size: 10.5px; letter-spacing: .1em; color: var(--mp-subtle); margin-bottom: 26px; text-transform: uppercase; }
.mp-pdp-crumb a { color: var(--mp-subtle); }
.mp-pdp-crumb .sl { opacity: .5; margin: 0 4px; }
.mp-pdp-crumb .cur { color: var(--mp-navy); }
.mp-pdp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: start; }
.mp-pdp-media { background: var(--mp-surface-2); height: 520px; display: flex; align-items: center; justify-content: center; position: relative; padding: 40px; }
.mp-pdp-media img { max-height: 100%; max-width: 70%; width: auto; object-fit: contain; }
.mp-pdp-batch { position: absolute; top: 20px; left: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--mp-subtle); }
.mp-pdp-cat { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mp-accent); font-weight: 600; margin-bottom: 12px; }
.mp-pdp-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 44px; color: var(--mp-navy); margin: 0 0 8px; }
.mp-pdp-sub { font-size: 14px; color: var(--mp-muted); margin-bottom: 20px; }
.mp-pdp-priceline { display: flex; align-items: baseline; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--mp-line-2); }
.mp-pdp-price { font-size: 30px; font-weight: 500; color: var(--mp-navy); }
.mp-pdp-price .amount { font-weight: 500; }
.mp-pdp-desc { margin: 22px 0; font-size: 13.5px; line-height: 1.85; color: var(--mp-text-2); font-weight: 300; }
.mp-pdp-desc p { margin: 0 0 12px; }
.mp-pdp-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mp-line-2); border: 1px solid var(--mp-line-2); margin-bottom: 26px; }
.mp-pdp-spec { background: var(--mp-bg); padding: 15px 16px; }
.mp-pdp-spec .k { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--mp-subtle); margin-bottom: 7px; }
.mp-pdp-spec .v { font-size: 13.5px; font-weight: 500; color: var(--mp-navy); }
.mp-pdp-cart { margin-bottom: 16px; }
.mp-pdp-cart form.cart { display: flex; gap: 12px; align-items: stretch; margin: 0; }
.mp-pdp-cart .quantity { display: flex; align-items: center; border: 1px solid rgba(20,36,64,.22); }
.mp-pdp-cart .quantity input.qty { width: 54px; border: 0; text-align: center; background: transparent; padding: 14px 6px; font-size: 14px; }
.mp-pdp-cart button.button, .mp-pdp-cart .single_add_to_cart_button {
    flex: 1; text-align: center; background: var(--mp-navy) !important; color: var(--mp-cream) !important;
    padding: 15px !important; font-size: 10.5px; letter-spacing: .16em; font-weight: 600; text-transform: uppercase; border-radius: 0;
}
.mp-pdp-cart button.button:hover { background: var(--mp-accent) !important; }
.mp-pdp-coa { display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(20,36,64,.18); padding: 15px 18px; margin-bottom: 26px; }
.mp-pdp-coa span:first-child { font-size: 12.5px; font-weight: 500; color: var(--mp-navy); }
.mp-pdp-coa .view { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mp-accent); font-weight: 600; }
.mp-pdp-acc .mp-faq-item:first-child { border-top: 1px solid var(--mp-line-2); }

/* Researchers also ordered */
.mp-pdp-related { margin-top: 76px; }
.mp-pdp-related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.mp-pdp-related-head h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 28px; color: var(--mp-navy); margin: 0; }
.mp-pdp-related-all { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--mp-accent); }

/* PDP vial variant */
.mp-vial.is-pdp { --capw:64px;--caph:38px;--sealw:46px;--sealh:13px;--botw:116px;--both:236px;--lpad:24px 10px;--fname:19px;--fshort:11px;--fdose:9px;--fruo:7px; filter: drop-shadow(0 30px 36px rgba(20,36,64,.26)); }
.mp-vial.is-pdp .v-short { margin-top: 14px; }
.mp-vial.is-pdp .v-div { margin: 14px 8px 10px; }

/* Shop / PDP responsive */
@media (max-width: 1024px) {
    .mp-shop-layout { grid-template-columns: 1fr; gap: 28px; }
    .mp-shop-side { position: static; }
    .mp-side-list { flex-flow: row wrap; gap: 8px; }
    .mp-side-link, .mp-sort-link { border: 1px solid var(--mp-line-2); }
    .mp-shop-main ul.products, ul.products.mp-wc-grid { grid-template-columns: repeat(3, 1fr); }
    .mp-pdp-grid { grid-template-columns: 1fr; gap: 32px; }
    .mp-pdp-media { height: 420px; }
}
@media (max-width: 768px) {
    .mp-shop-main ul.products, ul.products.mp-wc-grid { grid-template-columns: repeat(2, 1fr); }
    .mp-pdp-title { font-size: 32px; }
    /* Larger, balanced product image on mobile — tall portrait media, vial fills it */
    .mp-pdp-media { height: auto; aspect-ratio: 4 / 5; padding: 22px; }
    .mp-pdp-media img { max-width: 92% !important; max-height: 92% !important; }
    .mp-pdp-specs { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .mp-shop-main ul.products, ul.products.mp-wc-grid { grid-template-columns: 1fr 1fr; }
    .mp-pdp-cart form.cart { flex-direction: column; }
    .mp-pdp-media { aspect-ratio: 4 / 5; padding: 18px; }
    .mp-pdp-media img { max-width: 94% !important; max-height: 94% !important; }
}

/* Anchor targets clear the sticky header when jumped to */
.mp-verify, .mp-faq, #verify, #faq { scroll-margin-top: 112px; }

/* ============================================================
   SCROLL-TO-TOP (Astra) — match theme navy
   ============================================================ */
#ast-scroll-top, .ast-scroll-top-wrapper #ast-scroll-top {
    background-color: var(--mp-navy) !important;
    color: var(--mp-cream) !important;
    border-radius: 2px !important;
    box-shadow: 0 6px 18px rgba(20,36,64,.28) !important;
}
#ast-scroll-top:hover { background-color: var(--mp-accent) !important; color: var(--mp-cream) !important; }
#ast-scroll-top .ast-icon, #ast-scroll-top svg { color: var(--mp-cream) !important; fill: var(--mp-cream) !important; }

/* ============================================================
   MATCH SECTION — real product image
   ============================================================ */
.mp-match-media img { max-height: 220px; max-width: 66%; width: auto; object-fit: contain; }
.mp-match-media { padding: 24px; overflow: hidden; }

/* ============================================================
   404
   ============================================================ */
.mp-404 { padding: 80px 0 100px; text-align: center; }
.mp-404 .mp-container { max-width: 720px; }
.mp-404 form.search-form, .mp-404 .search-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.mp-404 .search-form input.search-field {
    flex: 1; border: 1px solid var(--mp-line-2); background: var(--mp-surface); padding: 13px 14px; font-size: 13px; outline: none;
}
.mp-404 .search-form button, .mp-404 .search-form .search-submit {
    background: var(--mp-navy); color: var(--mp-cream); border: 0; padding: 13px 22px; font-size: 10.5px;
    letter-spacing: .14em; font-weight: 600; text-transform: uppercase; cursor: pointer;
}
.mp-404 .search-form button:hover { background: var(--mp-accent); }

/* ============================================================
   HERO — atmosphere + real floating vials (v3.3.0)
   ============================================================ */
.mp-hero {
    background:
        radial-gradient(60% 70% at 80% 2%, rgba(120,150,200,.22), transparent 55%),
        radial-gradient(130% 120% at 50% 125%, rgba(0,0,0,.55), transparent 62%),
        linear-gradient(180deg, #0C1524 0%, #0A1120 100%);
}
.mp-hero::before {
    background: radial-gradient(46% 60% at 78% 4%, rgba(150,180,235,.20) 0%, rgba(24,36,58,.10) 40%, rgba(8,14,26,.0) 72%);
}
.mp-hero.has-bg { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }

.mp-hero-vimgs {
    position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
    gap: 12px; width: 100%; height: auto; padding-bottom: 0;
}
/* When real product renders are used, center the cluster vertically so it sits
   balanced (equal top/bottom) opposite the hero copy — not pushed to the top. */
.mp-hero-visual:has(.mp-hero-vimgs) { align-items: center; padding-bottom: 0; }
.mp-hero-vimg {
    height: 340px; width: auto; object-fit: contain; image-rendering: auto;
    filter: drop-shadow(0 0 26px rgba(84,150,244,.42)) drop-shadow(0 24px 32px rgba(0,0,0,.55));
    animation: mpfloatxy var(--mp-float-speed, 3.6s) ease-in-out infinite; will-change: transform;
}
/* Vertical bob by default (side-sway = 0). Editable via Customizer -> Hero Animation.
   Reduces to a clean up/down float when --mp-float-x is 0. */
@keyframes mpfloatxy {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(var(--mp-float-x, 0px), calc(-0.5 * var(--mp-float-y, 12px))); }
    50%      { transform: translate(0, calc(-1 * var(--mp-float-y, 12px))); }
    75%      { transform: translate(calc(-1 * var(--mp-float-x, 0px)), calc(-0.5 * var(--mp-float-y, 12px))); }
}
.mp-hero-vimgs .mp-hero-vimg:nth-child(1) { height: 320px; animation-delay: 0s;  }
.mp-hero-vimgs .mp-hero-vimg:nth-child(2) { height: 372px; margin-bottom: 16px; z-index: 3; animation-delay: .3s; }
.mp-hero-vimgs .mp-hero-vimg:nth-child(3) { height: 320px; animation-delay: .6s; }

@media (max-width: 768px) {
    .mp-hero-vimg, .mp-hero-vimgs .mp-hero-vimg:nth-child(1), .mp-hero-vimgs .mp-hero-vimg:nth-child(3) { height: 220px; }
    .mp-hero-vimgs .mp-hero-vimg:nth-child(2) { height: 250px; margin-bottom: 12px; }
    .mp-hero-vimgs { gap: 4px; padding-bottom: 20px; }
}

/* Bundle — real renders */
.mp-bundle-vimg {
    height: 150px; width: auto; object-fit: contain; flex: none;
    filter: drop-shadow(0 16px 20px rgba(0,0,0,.5));
}
@media (max-width: 768px) { .mp-bundle-vimg { height: 110px; } }

/* Footer watermark as the logo, same faint tint */
.mp-foot-watermark-logo {
    display: block; height: 150px; width: auto; max-width: 92%; margin: 12px auto 0;
    filter: brightness(0) invert(1); opacity: .06; pointer-events: none; user-select: none;
}
@media (max-width: 768px) { .mp-foot-watermark-logo { height: 84px; } }

/* ============================================================
   COA / VERIFICATION PAGE
   ============================================================ */
.mp-coa-hero { background: var(--mp-navy-3); padding: 56px 0 52px; }
.mp-coa-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mp-coa-hero h1 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 42px; line-height: 1.15; color: var(--mp-cream); margin: 0 0 14px; }
.mp-coa-hero p { font-size: 13px; line-height: 1.8; color: rgba(251,248,243,.6); max-width: 420px; font-weight: 300; margin: 0; }
.mp-coa-body { padding: 44px var(--mp-pad) 80px; max-width: var(--mp-maxw); margin: 0 auto; }
.mp-coa-result { background: var(--mp-surface); border: 1px solid var(--mp-line-2); margin-bottom: 44px; animation: mpfade .2s ease; }
.mp-coa-result-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--mp-line-2); gap: 20px; }
.mp-coa-result-id { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .08em; color: var(--mp-navy); }
.mp-coa-result-name { font-size: 12.5px; color: var(--mp-muted); margin-top: 6px; font-weight: 300; }
.mp-coa-result-purity { text-align: right; flex: none; }
.mp-coa-result-purity .k { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--mp-subtle); }
.mp-coa-result-purity .v { font-size: 22px; font-weight: 500; color: var(--mp-navy); }
.mp-coa-assay { display: grid; grid-template-columns: repeat(4,1fr); }
.mp-coa-assay-cell { padding: 20px 28px; border-right: 1px solid var(--mp-line); }
.mp-coa-assay-cell:last-child { border-right: none; }
.mp-coa-assay-cell .k { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--mp-subtle); margin-bottom: 8px; }
.mp-coa-assay-cell .v { font-size: 13.5px; font-weight: 500; color: var(--mp-navy); }
.mp-coa-result .mp-btn { display: inline-block; margin: 0 28px 26px; }
.mp-coa-lib-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.mp-coa-lib-head h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 28px; color: var(--mp-navy); margin: 0; }
.mp-coa-lib-head span { font-size: 11px; color: var(--mp-subtle); }
.mp-coa-table { background: var(--mp-surface); border: 1px solid var(--mp-line-2); }
.mp-coa-row { display: grid; grid-template-columns: 1.1fr 1.4fr .7fr .8fr .6fr; padding: 15px 24px; border-bottom: 1px solid var(--mp-line); align-items: center; color: var(--mp-text); }
.mp-coa-row:last-child { border-bottom: none; }
.mp-coa-row--head { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--mp-subtle); font-weight: 600; }
.mp-coa-row .mono { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--mp-navy); }
.mp-coa-row .ok { color: #2E5B3E; font-weight: 500; font-size: 12.5px; }
.mp-coa-row .muted { color: var(--mp-muted); font-size: 12.5px; }
.mp-coa-row .accent { color: var(--mp-accent); font-weight: 600; font-size: 10px; letter-spacing: .14em; }
.ta-r { text-align: right; }
a.mp-coa-row:hover { background: var(--mp-bg); }
@media (max-width: 768px) {
    .mp-coa-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .mp-coa-assay { grid-template-columns: 1fr 1fr; }
    .mp-coa-row { grid-template-columns: 1fr auto; gap: 2px 12px; }
    .mp-coa-row > div:nth-child(3), .mp-coa-row > div:nth-child(4) { display: none; }
    .mp-coa-row--head > div:nth-child(3), .mp-coa-row--head > div:nth-child(4) { display: none; }
}

/* ============================================================
   AGE / RESEARCH-USE GATE (Customizer-toggleable)
   ============================================================ */
.mp-agegate {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(10,16,28,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    overflow-y: auto;
}
/* Hidden instantly for returning visitors (set in <head> before paint) */
html.mp-age-ok .mp-agegate { display: none !important; }
/* Lock scrolling while the gate is up */
html.mp-age-lock, html.mp-age-lock body { overflow: hidden; }

.mp-agegate-card {
    background: var(--mp-cream); width: 100%; max-width: 560px; margin: auto;
    padding: 40px 46px 44px; text-align: left;
    box-shadow: 0 40px 90px rgba(0,0,0,.45);
}
.mp-agegate-brand { text-align: center; margin-bottom: 20px; }
.mp-agegate-logo { display: inline-block; height: 30px; width: auto; }
.mp-agegate-word { display: block; font-size: 30px; color: var(--mp-navy); line-height: 1; }
.mp-agegate-sub {
    display: block; margin-top: 7px; font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--mp-muted);
}
.mp-agegate-rule { height: 1px; background: var(--mp-line-2); margin: 0 0 24px; }
.mp-agegate-eyebrow {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; font-weight: 500; color: var(--mp-accent); margin-bottom: 13px;
}
.mp-agegate-h {
    font-size: 30px; line-height: 1.14; color: var(--mp-navy); margin: 0 0 16px; font-weight: 400;
}
.mp-agegate-body {
    font-size: 14px; line-height: 1.6; color: var(--mp-text-2); margin: 0 0 24px;
}
.mp-agegate-accept {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; cursor: pointer;
    background: var(--mp-navy); color: var(--mp-cream); border: 1px solid var(--mp-navy); border-radius: 0;
    padding: 15px 20px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .15em;
    text-transform: uppercase; font-weight: 500; transition: background .2s ease, border-color .2s ease;
}
.mp-agegate-accept:hover { background: var(--mp-accent); border-color: var(--mp-accent); }
.mp-agegate-exit {
    display: block; text-align: center; margin-top: 14px; color: var(--mp-muted);
    font-size: 13px; letter-spacing: .02em;
}
.mp-agegate-exit:hover { color: var(--mp-navy); text-decoration: underline; }

@media (max-width: 600px) {
    .mp-agegate { padding: 16px; }
    .mp-agegate-card { padding: 32px 24px 36px; max-width: none; }
    .mp-agegate-h { font-size: 26px; }
    .mp-agegate-accept { padding: 14px 16px; letter-spacing: .1em; }
}

/* ============================================================
   COOKIE NOTICE (Customizer-toggleable, theme-native)
   Compact bottom bar: message + optional "Learn more" + Accept/Decline pills.
   ============================================================ */
.mp-cookie-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    background: var(--mp-cream); border-top: 1px solid rgba(20,36,64,.12);
    box-shadow: 0 -14px 40px rgba(16,27,46,.10);
    animation: mp-cookie-in .4s cubic-bezier(.4,0,.2,1) both;
}
html.mp-cookie-set .mp-cookie-bar { display: none !important; }
@keyframes mp-cookie-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.mp-cookie-inner {
    max-width: var(--mp-maxw); margin: 0 auto; padding: 16px var(--mp-pad);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.mp-cookie-text {
    margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mp-text-2); font-weight: 400; max-width: 760px;
}
.mp-cookie-policy { color: var(--mp-accent); font-weight: 500; margin-left: 4px; white-space: nowrap; }
.mp-cookie-policy:hover { text-decoration: underline; }

.mp-cookie-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.mp-cookie-btn {
    -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 100px;
    padding: 10px 26px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; font-weight: 500; line-height: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap;
}
.mp-cookie-accept  { background: var(--mp-navy); color: var(--mp-cream); border: 1px solid var(--mp-navy); }
.mp-cookie-accept:hover { background: var(--mp-accent); border-color: var(--mp-accent); }
.mp-cookie-decline { background: transparent; color: var(--mp-navy); border: 1px solid rgba(20,36,64,.32); }
.mp-cookie-decline:hover { border-color: var(--mp-navy); }

@media (max-width: 640px) {
    .mp-cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 20px; }
    .mp-cookie-actions { width: 100%; }
    .mp-cookie-btn { flex: 1; text-align: center; }
}

/* ============================================================
   INTERACTIVE STATES — kill the parent theme's blue focus/active
   chrome on our custom controls; keep an accessible on-brand ring.
   ============================================================ */
.mp-btn, .mp-btn--dark, .mp-btn--ghost, .mp-auth-tab, .mp-ico-btn, .mp-ico-account,
.mp-ico-cart, .mp-drawer-close, .mp-cookie-btn, .mp-agegate-accept, .mp-auth-submit,
.mp-rail-btn, .mp-faq-q, .mp-cart-review, .mp-chat-send {
    -webkit-tap-highlight-color: transparent;
}
/* Remove blue outline / box-shadow that Astra adds on focus & active */
.mp-btn:focus, .mp-auth-tab:focus, .mp-ico-btn:focus, .mp-ico-account:focus, .mp-ico-cart:focus,
.mp-drawer-close:focus, .mp-cookie-btn:focus, .mp-agegate-accept:focus, .mp-auth-submit:focus,
.mp-rail-btn:focus, .mp-faq-q:focus, .mp-cart-review:focus, .mp-chat-send:focus,
.mp-auth-tab:active, .mp-ico-btn:active, .mp-drawer-close:active, .mp-faq-q:active,
.mp-cookie-btn:active, .mp-agegate-accept:active, .mp-auth-submit:active, .mp-chat-send:active {
    outline: none; box-shadow: none;
}
/* Transparent controls must NEVER get a filled (blue) background on interaction */
.mp-auth-tab:hover, .mp-auth-tab:focus, .mp-auth-tab:active,
.mp-ico-btn:hover, .mp-ico-btn:focus, .mp-ico-btn:active,
.mp-drawer-close:hover, .mp-drawer-close:focus, .mp-drawer-close:active,
.mp-faq-q:hover, .mp-faq-q:focus, .mp-faq-q:active {
    background: transparent;
}
/* Accessible focus ring for keyboard users only (on-brand, not blue) */
.mp-btn:focus-visible, .mp-auth-tab:focus-visible, .mp-ico-btn:focus-visible,
.mp-ico-account:focus-visible, .mp-ico-cart:focus-visible, .mp-drawer-close:focus-visible,
.mp-cookie-btn:focus-visible, .mp-agegate-accept:focus-visible, .mp-auth-submit:focus-visible,
.mp-rail-btn:focus-visible, .mp-faq-q:focus-visible, .mp-cart-review:focus-visible,
.mp-chat-send:focus-visible, .mp-chat-input:focus-visible {
    outline: 2px solid var(--mp-accent); outline-offset: 2px;
}
/* Icon hover consistency — both account + cart go rust on hover */
.mp-ico-account:hover, .mp-ico-cart:hover { color: var(--mp-accent); opacity: 1; }

/* ============================================================
   BLOG / JOURNAL (index, archive, search, single) — native UI
   ============================================================ */
.mp-page-hero-sub {
    margin: 14px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(251,248,243,.6);
}
.mp-blog { max-width: var(--mp-maxw); margin: 0 auto; padding: 64px var(--mp-pad) 90px; }
.mp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mp-post-card {
    background: var(--mp-surface); border: 1px solid var(--mp-line); display: flex; flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease;
}
.mp-post-card:hover { box-shadow: 0 20px 44px rgba(16,27,46,.12); transform: translateY(-3px); }
.mp-post-thumb {
    display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mp-navy-2); position: relative;
}
.mp-post-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.mp-post-thumb-fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-size: 26px; color: rgba(251,248,243,.28);
}
.mp-post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.mp-post-cat {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--mp-accent); margin-bottom: 10px;
}
.mp-post-title { font-size: 22px; line-height: 1.2; margin: 0 0 12px; }
.mp-post-title a { color: var(--mp-navy); }
.mp-post-title a:hover { color: var(--mp-accent); }
.mp-post-meta {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--mp-subtle); margin-bottom: 14px;
}
.mp-post-excerpt { font-size: 14px; line-height: 1.7; color: var(--mp-text-2); margin: 0 0 18px; flex: 1; }
.mp-post-more {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 500; color: var(--mp-navy); align-self: flex-start;
}
.mp-post-more:hover { color: var(--mp-accent); }

.mp-pagination { margin-top: 48px; }
.mp-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mp-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
    border: 1px solid var(--mp-line-2); color: var(--mp-navy); font-family: 'IBM Plex Mono', monospace; font-size: 12px;
}
.mp-pagination .page-numbers.current { background: var(--mp-navy); color: var(--mp-cream); border-color: var(--mp-navy); }
.mp-pagination a.page-numbers:hover { border-color: var(--mp-navy); }

.mp-blog-empty { text-align: center; padding: 60px 0; }
.mp-blog-empty h2 { font-size: 34px; color: var(--mp-navy); margin: 0 0 12px; }
.mp-blog-empty p { color: var(--mp-muted); margin: 0 0 22px; }

/* Single post */
.mp-single .mp-single-thumb { margin: 0 0 34px; max-height: 460px; overflow: hidden; }
.mp-single .mp-single-thumb img { width: 100%; height: auto; display: block; }
.mp-single-foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--mp-line); }

@media (max-width: 900px) { .mp-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mp-blog-grid { grid-template-columns: 1fr; } .mp-blog { padding: 44px var(--mp-pad) 64px; } }

/* ============================================================
   CHAT-STYLE CONTACT FORM  ([mp_contact])
   ============================================================ */
.mp-chat {
    width: 100%; max-width: 460px; background: var(--mp-surface); border: 1px solid var(--mp-line-2);
    border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(16,27,46,.14); display: flex; flex-direction: column;
}
.mp-chat-head {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px;
    background: var(--mp-navy); color: var(--mp-cream); position: relative;
}
.mp-chat-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(251,248,243,.12);
    display: flex; align-items: center; justify-content: center; color: var(--mp-cream); flex: none;
}
.mp-chat-avatar svg { width: 24px; height: 24px; }
.mp-chat-id { display: flex; flex-direction: column; line-height: 1.3; }
.mp-chat-id b { font-size: 14px; font-weight: 600; }
.mp-chat-id small { font-size: 11px; color: rgba(251,248,243,.62); }
.mp-chat-dot { position: absolute; left: 44px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: #7FD1A8; border: 2px solid var(--mp-navy); }
.mp-chat-body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.mp-chat-bubble {
    align-self: flex-start; max-width: 92%; background: var(--mp-surface-2); color: var(--mp-text);
    padding: 12px 15px; border-radius: 4px 14px 14px 14px; font-size: 14px; line-height: 1.5;
}
.mp-chat-form { display: flex; flex-direction: column; gap: 10px; }
.mp-chat-input {
    width: 100%; padding: 12px 14px; border: 1px solid var(--mp-line-2); border-radius: 10px;
    background: var(--mp-surface); color: var(--mp-text); font-family: 'Barlow', sans-serif; font-size: 15px;
    transition: border-color .2s ease;
}
.mp-chat-input:focus { outline: none; border-color: var(--mp-navy); }
.mp-chat-textarea { resize: vertical; min-height: 96px; }
.mp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.mp-chat-send {
    -webkit-appearance: none; appearance: none; cursor: pointer; align-self: flex-end;
    display: inline-flex; align-items: center; gap: 9px; margin-top: 2px;
    background: var(--mp-navy); color: var(--mp-cream); border: 1px solid var(--mp-navy); border-radius: 100px;
    padding: 11px 22px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 500; transition: background .2s ease, border-color .2s ease;
}
.mp-chat-send:hover { background: var(--mp-accent); border-color: var(--mp-accent); }
.mp-chat-send:disabled { opacity: .6; cursor: default; }
.mp-chat-status { font-size: 13.5px; line-height: 1.5; padding: 4px 2px 0; }
.mp-chat-status.is-error { color: #7A3B1E; }
.mp-chat-status.is-ok { color: #24614A; }
.mp-chat.is-done .mp-chat-form { display: none; }
.mp-chat-success {
    align-self: flex-start; max-width: 92%; background: rgba(46,90,70,.10); color: #24614A;
    border: 1px solid rgba(46,90,70,.28); padding: 12px 15px; border-radius: 4px 14px 14px 14px;
    font-size: 14px; line-height: 1.5;
}

/* ============================================================
   PAGE-BUILDER OVERRIDES — force Spectra/UAGB + core-block pages
   (About, Quality, Contact, etc.) to inherit the site UI: navy/cream
   colors + serif headings, no pale-blue panels, no blue buttons.
   Scoped to page/post content so homepage, shop, and blog are untouched.
   ============================================================ */
/* Neutralize off-brand section backgrounds (the pale-blue builder panels) */
.mp-page-content .wp-block-group,
.mp-page-content .wp-block-cover,
.mp-page-content [class*="wp-block-uagb-container"],
.mp-page-content [class*="wp-block-uagb-section"],
.mp-page-content .uagb-section__wrap,
.mp-page-content .uagb-section__inner-wrap,
.mp-page-content .uagb-container-inner-blocks-wrap,
.mp-page-content [class*="uagb-"][style*="background"]:not([class*="button"]):not([class*="btn"]) {
    background: transparent !important;
    background-color: transparent !important;
}
/* Button rule must win over the neutralize rule — keep it high-specificity */
.mp-page-content .wp-block-button__link,
.mp-page-content a.uagb-button__link[style*="background"],
.mp-page-content .wp-block-uagb-buttons-child a {
    background: var(--mp-navy) !important;
    background-color: var(--mp-navy) !important;
}
/* Headings → Playfair, navy (were bold sans-serif) */
.mp-page-content h1, .mp-page-content h2, .mp-page-content h3, .mp-page-content h4,
.mp-page-content .wp-block-heading,
.mp-page-content .uagb-heading-text {
    font-family: 'Playfair Display', serif !important;
    color: var(--mp-navy) !important;
    font-weight: 400 !important;
    letter-spacing: -.01em;
}
.mp-page-content h1, .mp-page-content .uagb-heading-text { line-height: 1.12; }
/* Body text → theme color/weight */
.mp-page-content p, .mp-page-content li { color: var(--mp-text-2); }
/* In-content links → accent (rust), not builder blue */
.mp-page-content a:not(.wp-block-button__link):not(.uagb-button__link):not(.button):not(.mp-btn) {
    color: var(--mp-accent);
}
/* Buttons → navy, killing the builder blue */
.mp-page-content .wp-block-button__link,
.mp-page-content .uagb-buttons-repeater,
.mp-page-content .wp-block-uagb-buttons-child a,
.mp-page-content .uagb-button__link,
.mp-page-content a.button, .mp-page-content button.button {
    background: var(--mp-navy) !important;
    background-color: var(--mp-navy) !important;
    color: var(--mp-cream) !important;
    border-color: var(--mp-navy) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-family: 'IBM Plex Mono', monospace !important;
    text-transform: uppercase; letter-spacing: .14em; font-weight: 500;
}
.mp-page-content .wp-block-button__link:hover,
.mp-page-content .uagb-buttons-repeater:hover,
.mp-page-content .wp-block-uagb-buttons-child a:hover,
.mp-page-content .uagb-button__link:hover,
.mp-page-content a.button:hover, .mp-page-content button.button:hover {
    background: var(--mp-accent) !important;
    background-color: var(--mp-accent) !important;
    border-color: var(--mp-accent) !important;
    color: var(--mp-cream) !important;
}
/* Images stay responsive; broken/missing ones are hidden by JS */
.mp-page-content img { max-width: 100%; height: auto; }
.mp-page-content .mp-img-broken, .mp-page-content figure.mp-img-broken { display: none !important; }

/* ============================================================
   ACCOUNT DROPDOWN (logged-in) + WOOCOMMERCE SHOP PAGINATION
   ============================================================ */
.mp-account-wrap { position: relative; display: inline-flex; }
.mp-account-menu {
    position: absolute; top: calc(100% + 14px); right: 0; min-width: 180px; z-index: 70;
    background: var(--mp-surface); border: 1px solid var(--mp-line-2);
    box-shadow: 0 20px 44px rgba(16,27,46,.16); padding: 8px; display: flex; flex-direction: column;
}
.mp-account-menu[hidden] { display: none; }
.mp-account-menu a {
    padding: 10px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em;
    color: var(--mp-navy); text-transform: none;
}
.mp-account-menu a:hover { background: var(--mp-surface-2); color: var(--mp-accent); }

/* WooCommerce shop/archive pagination — on-brand (was bright blue current page) */
/* Bulletproof against Astra/WooCommerce defaults (joined bar, blue borders, tall cells) */
.woocommerce nav.woocommerce-pagination,
nav.woocommerce-pagination { text-align: center; }
.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul.page-numbers {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px;
    list-style: none !important; margin: 44px auto 0 !important; padding: 0 !important; border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul.page-numbers li {
    margin: 0 !important; border: 0 !important; display: inline-flex !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
nav.woocommerce-pagination ul.page-numbers .page-numbers {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-width: 44px !important; height: 44px !important; padding: 0 14px !important; margin: 0 !important; line-height: 1 !important;
    border: 1px solid var(--mp-line-2) !important; background: var(--mp-surface) !important; color: var(--mp-navy) !important;
    font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; font-weight: 500 !important;
    border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; float: none !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul.page-numbers .page-numbers.current {
    background: var(--mp-navy) !important; color: var(--mp-cream) !important; border-color: var(--mp-navy) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul.page-numbers a.page-numbers:hover {
    background: var(--mp-accent) !important; color: var(--mp-cream) !important; border-color: var(--mp-accent) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.dots,
nav.woocommerce-pagination ul.page-numbers .page-numbers.dots {
    border-color: transparent !important; background: transparent !important;
}

/* ============================================================
   LANGUAGE SWITCHER (EN | AR) — header, before the account icon
   ============================================================ */
.mp-lang { display: inline-flex; align-items: center; gap: 9px; margin-right: 6px; }
.mp-lang-link {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mp-subtle); line-height: 1;
}
.mp-lang-link.is-active { color: var(--mp-navy); font-weight: 500; }
.mp-lang-link:hover { color: var(--mp-accent); }
.mp-lang-sep { color: var(--mp-line-2); font-size: 11px; line-height: 1; }
@media (max-width: 480px) { .mp-lang { gap: 7px; margin-right: 4px; } .mp-lang-link { font-size: 10px; } }

/* ============================================================
   MOBILE: prevent iOS Safari auto-zoom on input focus.
   iOS zooms the whole page in when you focus a form field whose
   font-size is under 16px (and never zooms back). Force 16px on
   small screens so navigating/typing never zooms the site.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Disable janky iOS double-tap-to-zoom while navigating (pinch-zoom still works) */
body { touch-action: manipulation; }
@media (max-width: 782px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea,
    .mp-chat-input, .mp-batch-input, .mp-auth-field input,
    .woocommerce input.input-text, .woocommerce .quantity input, .search-field {
        font-size: 16px !important;
    }
}

/* ============================================================
   U.S. COMPOUNDED BAND (homepage)
   ============================================================ */
.mp-usa { position: relative; background: linear-gradient(180deg,#101B2E,#0C1524); color: var(--mp-cream); overflow: hidden; }
.mp-usa-stripe { height: 4px; background: linear-gradient(90deg,#8A4B2A 0 33%,#FBF8F3 33% 66%,#2E3B57 66% 100%); opacity: .85; }
.mp-usa-inner {
    max-width: var(--mp-maxw); margin: 0 auto; padding: 64px var(--mp-pad);
    display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center;
}
.mp-usa-seal { flex: none; }
.mp-usa-seal svg { display: block; width: 210px; height: 210px; color: var(--mp-cream); }
.mp-usa-eyebrow { color: #C98A63 !important; margin-bottom: 14px; }
.mp-usa-copy h2 { font-size: 44px; line-height: 1.08; color: var(--mp-cream); margin: 0 0 18px; font-weight: 400; }
.mp-usa-copy p { font-size: 15.5px; line-height: 1.8; color: rgba(251,248,243,.82); max-width: 620px; font-weight: 300; margin: 0 0 26px; }
.mp-usa-points { display: flex; gap: 30px; flex-wrap: wrap; }
.mp-usa-points span {
    position: relative; padding-left: 20px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(251,248,243,.74);
}
.mp-usa-points span::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; background: #8A4B2A; border-radius: 50%;
}
@media (max-width: 860px) {
    .mp-usa-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; padding: 48px var(--mp-pad); }
    .mp-usa-seal { margin: 0 auto; }
    .mp-usa-seal svg { width: 160px; height: 160px; }
    .mp-usa-copy p { margin-left: auto; margin-right: auto; }
    .mp-usa-points { justify-content: center; }
}