:root{
  --mc-cream:#FCF5E8;
  --mc-cream-2:#F6EDDC;
  --mc-red:#C8202B;
  --mc-red-2:#B01B25;
  --mc-ink:#151515;
  --mc-ink-2:#5A5A5A;
  --mc-line:rgba(21,21,21,.10);
  --mc-gold:#F2C230;
  --mc-green:#1F7A46;
  --mc-radius:18px;
}

/* ---------- base ---------- */
body.mc-v2,
body.mc-v2 .mc-bg-motion{ background:var(--mc-cream)!important; }
body.mc-v2{ color:var(--mc-ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
body.mc-v2 .mc-bg-motion span{ display:none; }
.mc-wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }
.mc-v2 h1,.mc-v2 h2,.mc-v2 h3{ font-family:'Fredoka',sans-serif; letter-spacing:-.02em; color:var(--mc-ink); }
.mc-dot{ color:var(--mc-red); }

/* ---------- header ---------- */
.mc2-header{ position:sticky; top:0; z-index:900; background:var(--mc-cream); }
.mc2-header-in{ max-width:1180px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:24px; }
.mc2-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px; color:var(--mc-ink)!important; letter-spacing:-.02em; }
.mc2-logo-mark{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex:0 0 28px; }
.mc2-logo-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.mc2-nav{ margin-left:auto; display:flex; align-items:center; gap:28px; }
.mc2-nav a{ color:var(--mc-ink)!important; text-decoration:none; font-size:14.5px; font-weight:500; opacity:.85; }
.mc2-nav a:hover{ opacity:1; color:var(--mc-red)!important; }
.mc2-cart{ display:inline-flex; align-items:center; gap:9px; background:var(--mc-ink); color:#fff!important; text-decoration:none; padding:9px 16px; border-radius:9999px; font-size:14px; font-weight:600; }
.mc2-cart b{ background:var(--mc-red); border-radius:9999px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; padding:0 5px; }
.mc2-burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; flex-direction:column; gap:4px; }
.mc2-burger span{ width:20px; height:2px; background:var(--mc-ink); display:block; border-radius:2px; }

/* ---------- hero ---------- */
.mc2-hero{ padding:26px 0 46px; }
.mc2-hero-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:52px; row-gap:0; align-items:start; }
.mc2-hero-intro{ grid-column:1; grid-row:1; }
.mc2-hero-controls{ grid-column:1; grid-row:2; }
.mc2-hero-visual{ grid-column:2; grid-row:1 / span 2; align-self:start; }
.mc2-rating{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--mc-line); border-radius:9999px; padding:7px 14px; font-size:12.5px; margin-bottom:20px; }
.mc2-rating .mc2-stars{ color:var(--mc-gold); display:inline-flex; gap:1px; }
.mc2-rating b{ font-weight:700; }
.mc2-rating span{ color:var(--mc-ink-2); }
.mc2-h1{ font-size:clamp(38px,5vw,60px)!important; line-height:.96!important; font-weight:600; margin:0 0 16px!important; }
.mc2-sub{ font-size:15.5px; line-height:1.6; color:var(--mc-ink-2); max-width:430px; margin:0 0 26px; }
.mc2-label{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mc-ink-2); margin:0 0 9px; }

/* option cards (flavour + bundle) */
.mc2-opts{ display:grid; gap:10px; margin-bottom:22px; }
.mc2-opts--3{ grid-template-columns:repeat(3,1fr); }
.mc2-opts--4{ grid-template-columns:repeat(4,1fr); }
.mc2-opt{ position:relative; text-align:left; background:#fff; border:1.5px solid var(--mc-line); border-radius:13px; padding:12px 13px; cursor:pointer; font-family:inherit; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.mc2-opt:hover:not(.is-off){ border-color:rgba(200,32,43,.4); transform:translateY(-1px); }
.mc2-opt.is-on{ border-color:var(--mc-red); box-shadow:0 0 0 3px rgba(200,32,43,.10); }
.mc2-opt-t{ display:block; font-weight:700; font-size:14px; color:var(--mc-ink); line-height:1.2; }
.mc2-opt-s{ display:block; font-size:11.5px; color:var(--mc-ink-2); margin-top:3px; line-height:1.3; }
.mc2-opt.is-off{ cursor:not-allowed; opacity:.62; background:#FAF6EF; }
.mc2-opt.is-off .mc2-opt-s{ color:var(--mc-red); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.mc2-tag{ position:absolute; top:-8px; right:9px; font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:9999px; white-space:nowrap; }
.mc2-tag--pop{ background:var(--mc-gold); color:#4A3A00; }
.mc2-tag--best{ background:var(--mc-green); color:#fff; }

/* purchase row */
.mc2-buyrow{ display:flex; gap:10px; align-items:stretch; margin-bottom:20px; flex-wrap:wrap; }
.mc2-seg{ display:flex; background:#fff; border:1.5px solid var(--mc-line); border-radius:11px; padding:4px; flex:1 1 260px; }
.mc2-seg button{ flex:1; border:0; background:none; font-family:inherit; font-size:13px; font-weight:600; color:var(--mc-ink-2); padding:9px 10px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.mc2-seg button.is-on{ background:var(--mc-ink); color:#fff; }
.mc2-qty{ display:flex; align-items:center; background:#fff; border:1.5px solid var(--mc-line); border-radius:11px; padding:4px; }
.mc2-qty button{ width:34px; height:34px; border:0; background:none; font-size:18px; color:var(--mc-ink); cursor:pointer; border-radius:8px; line-height:1; }
.mc2-qty button:hover{ background:var(--mc-cream-2); }
.mc2-qty input{ width:38px; text-align:center; border:0; background:none; font-family:inherit; font-size:15px; font-weight:700; color:var(--mc-ink); -moz-appearance:textfield; }
.mc2-qty input::-webkit-outer-spin-button,.mc2-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* price */
.mc2-price{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:16px; }
.mc2-price-now{ font-family:'Fredoka',sans-serif; font-size:33px; font-weight:600; color:var(--mc-ink); line-height:1; }
.mc2-price-was{ font-size:15px; color:var(--mc-ink-2); text-decoration:line-through; }
.mc2-save{ background:rgba(31,122,70,.12); color:var(--mc-green); font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:9999px; }

/* buttons */
.mc2-actions{ display:flex; gap:11px; flex-wrap:wrap; margin-bottom:14px; }
.mc2-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:700; font-size:15px; padding:15px 30px; border-radius:11px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; min-height:50px; transition:all .18s ease; }
.mc2-btn--primary{ background:var(--mc-red); color:#fff!important; flex:1 1 190px; }
.mc2-btn--primary:hover{ background:var(--mc-red-2); }
.mc2-btn--outline{ background:#fff; color:var(--mc-ink)!important; border-color:var(--mc-line); flex:1 1 160px; }
.mc2-btn--outline:hover{ border-color:var(--mc-ink); }
.mc2-btn--dark{ background:var(--mc-ink); color:#fff!important; }
.mc2-btn:active{ transform:scale(.985); }
.mc2-btn--pill{ border-radius:9999px; }

.mc2-eta{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--mc-ink-2); margin-bottom:20px; }
.mc2-eta i{ width:7px; height:7px; border-radius:50%; background:var(--mc-green); display:inline-block; }
.mc2-eta b{ color:var(--mc-ink); font-weight:700; }
.mc2-trust{ display:flex; gap:16px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--mc-line); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mc-ink-2); }

/* hero visual */
.mc2-shot{ position:relative; border-radius:22px; overflow:hidden; background:#8FC5E8; }
.mc2-shot img{ display:block; width:100%; height:auto; }
.mc2-warn{ position:absolute; top:22px; left:22px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; line-height:1.2; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.28); max-width:150px; }
.mc2-badge27{ position:absolute; top:18px; right:18px; width:62px; height:62px; border-radius:50%; background:var(--mc-gold); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; line-height:1; color:#3E3000; }
.mc2-badge27 b{ font-family:'Fredoka',sans-serif; font-size:19px; font-weight:600; line-height:1.12; }
.mc2-badge27 span{ font-size:7.5px; font-weight:800; letter-spacing:.08em; }
.mc2-nutri{ position:absolute; left:22px; bottom:22px; display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--mc-ink)!important; text-decoration:none; font-size:13px; font-weight:600; padding:10px 16px; border-radius:9999px; box-shadow:0 5px 18px rgba(0,0,0,.16); }

/* ---------- marquee ---------- */
.mc2-marquee{ background:var(--mc-red); color:var(--mc-cream); padding:13px 0; overflow:hidden; transform:rotate(-1deg); margin:22px 0 60px; width:104%; margin-left:-2%; }
.mc2-marquee-track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:mc2Slide 30s linear infinite; }
.mc2-marquee-set{ display:flex; gap:34px; padding-right:34px; flex:0 0 auto; }
.mc2-marquee span{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; letter-spacing:.01em; }
/* The track is 6 identical sets, each carrying its own trailing space, so one
   set is exactly 1/6 of the track and the shift is clean at any width.
   Two copies was the old bug: one copy (~900px) cannot fill a 1900px band,
   so the tail of the loop showed empty red. Keep 6 in sync with the
   str_repeat( ..., 6 ) in mainchick-v4-home.php. */
@keyframes mc2Slide{ from{transform:translateX(0)} to{transform:translateX(-16.666667%)} }
@media (prefers-reduced-motion:reduce){ .mc2-marquee-track{ animation:none; } }

/* ---------- section heads ---------- */
.mc2-sec{ padding:0 0 66px; }
.mc2-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.mc2-h2{ font-size:clamp(27px,3.6vw,38px)!important; font-weight:600; margin:0!important; line-height:1.05!important; }
.mc2-headnote{ font-size:14px; color:var(--mc-ink-2); margin:6px 0 0; }
.mc2-link{ color:var(--mc-red)!important; text-decoration:none; font-size:13.5px; font-weight:700; white-space:nowrap; }
.mc2-link:hover{ text-decoration:underline; }

/* ---------- feed rail ---------- */
.mc2-rail{ display:flex; gap:16px; overflow-x:auto; padding:4px 22px 12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.mc2-rail::-webkit-scrollbar{ height:0; }
.mc2-feed{ flex:0 0 250px; scroll-snap-align:start; border-radius:16px; overflow:hidden; background:#fff; aspect-ratio:1/1; box-shadow:0 3px 16px rgba(21,21,21,.07); }
.mc2-feed img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- UGC ---------- */
.mc2-ugc{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mc2-ugc-card{ aspect-ratio:1/1; border:1.5px dashed rgba(21,21,21,.18); border-radius:16px; text-align:center; background:rgba(255,255,255,.5); } /* layout+padding: Elementor container settings */
.mc2-ugc-card svg{ color:var(--mc-ink-2); opacity:.5; }
.mc2-ugc-card p{ font-size:11.5px; color:var(--mc-ink-2); margin:0; line-height:1.4; }
.mc2-ugc-card a{ color:var(--mc-ink-2)!important; text-decoration:underline; }

/* ---------- stats band ---------- */
.mc2-stats{ background:var(--mc-red); margin-bottom:66px; } /* padding: Elementor container setting */
.mc2-stats-in{ max-width:1180px; margin:0 auto; padding:0 22px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.mc2-stat b{ display:block; font-family:'Fredoka',sans-serif; font-size:38px; font-weight:600; color:var(--mc-cream); line-height:1; }
.mc2-stat span{ display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(252,245,232,.72); margin-top:6px; }
.mc2-stats .mc2-btn{ margin-left:auto; background:transparent; color:var(--mc-cream)!important; border-color:rgba(252,245,232,.45); }
.mc2-stats .mc2-btn:hover{ background:rgba(252,245,232,.12); }

/* ---------- reviews ---------- */
.mc2-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mc2-review{ background:#fff; border:1px solid var(--mc-line); border-radius:16px; } /* padding: Elementor container setting */
.mc2-review .mc2-stars{ color:var(--mc-gold); display:flex; gap:2px; margin-bottom:11px; }
.mc2-review p{ font-size:14.5px; line-height:1.55; color:var(--mc-ink); margin:0 0 16px; }
/* .mc2-who layout: Elementor container setting; kept as a hook for b/span below */
.mc2-av{ width:32px; height:32px; border-radius:50%; background:var(--mc-cream-2); color:var(--mc-red); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:0 0 32px; }
.mc2-who b{ display:block; font-size:13px; font-weight:700; }
.mc2-who span{ display:block; font-size:11.5px; color:var(--mc-ink-2); }

/* ---------- FAQ ---------- */
.mc2-faq{ max-width:760px; }
.mc2-q{ border-bottom:1px solid var(--mc-line); }
.mc2-q summary{ list-style:none; cursor:pointer; padding:19px 30px 19px 0; font-size:15.5px; font-weight:600; color:var(--mc-ink); position:relative; }
.mc2-q summary::-webkit-details-marker{ display:none; }
.mc2-q summary::after{ content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--mc-red); font-weight:400; }
.mc2-q[open] summary::after{ content:'\2212'; }
.mc2-q p{ margin:0 0 19px; font-size:14.5px; line-height:1.62; color:var(--mc-ink-2); max-width:640px; }

/* ---------- footer ---------- */
.mc2-footer{ background:var(--mc-red); color:var(--mc-cream); padding:44px 0 0; overflow:hidden; }
.mc2-footer-top{ max-width:1180px; margin:0 auto; padding:0 22px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.mc2-footer .mc2-logo{ color:var(--mc-cream)!important; }
/* footer mark uses the same artwork */
.mc2-footer-links{ margin-left:auto; display:flex; gap:26px; flex-wrap:wrap; }
.mc2-footer-links a{ color:var(--mc-cream)!important; text-decoration:none; font-size:13.5px; opacity:.88; }
.mc2-footer-links a:hover{ opacity:1; text-decoration:underline; }
.mc2-wordmark{ font-family:'Fredoka',sans-serif; font-weight:600; color:var(--mc-cream); text-align:center; line-height:.82; letter-spacing:-.03em; font-size:clamp(64px,17vw,210px); margin:26px 0 6px; user-select:none; }
.mc2-footer-bot{ max-width:1180px; margin:0 auto; padding:18px 22px 26px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:11.5px; color:rgba(252,245,232,.72); border-top:1px solid rgba(252,245,232,.18); }
.mc2-footer-bot a{ color:rgba(252,245,232,.72)!important; text-decoration:none; }
.mc2-footer-bot a:hover{ text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .mc2-hero-grid{ display:flex; flex-direction:column; gap:26px; }
  .mc2-hero-intro, .mc2-hero-controls, .mc2-hero-visual{ grid-column:auto; grid-row:auto; }
  .mc2-hero-visual{ order:0; }
  .mc2-ugc{ grid-template-columns:repeat(2,1fr); }
  .mc2-reviews{ grid-template-columns:1fr; }
  .mc2-nav{ display:none; }
  .mc2-burger{ display:flex; }
  .mc2-header.is-open .mc2-nav{ display:flex; position:absolute; top:100%; left:0; right:0; background:var(--mc-cream); flex-direction:column; align-items:flex-start; gap:2px; padding:14px 22px 20px; box-shadow:0 10px 20px rgba(21,21,21,.08); }
  .mc2-header.is-open .mc2-nav a{ padding:9px 0; }
}
@media (max-width:620px){
  .mc2-opts--4{ grid-template-columns:repeat(2,1fr); }
  .mc2-opts--3{ grid-template-columns:1fr; }
  .mc2-h1{ font-size:34px!important; }
  .mc2-actions{ flex-direction:column; }
  .mc2-btn{ width:100%; }
  .mc2-stats-in{ gap:22px; }
  .mc2-stat{ flex:1 1 40%; }
  .mc2-stats .mc2-btn{ margin-left:0; width:100%; }
  .mc2-ugc{ gap:11px; }
  .mc2-marquee span{ font-size:13px; }
  .mc2-buyrow{ flex-direction:column; }
  .mc2-qty{ align-self:flex-start; }
}

/* overflow-x-guard: rotated marquee + rails must never widen the page */
html, body.mc-v2{ overflow-x:hidden!important; max-width:100%; }
.mc2, .mc2-root, .mc2 section{ max-width:100%; overflow-x:clip; }
.mc2-marquee{ max-width:none; }
.mc2-stats{ width:100%; }

/* flex-basis-guard: in a COLUMN flex container flex-basis becomes HEIGHT,
   which made the CTA buttons ~190px tall on mobile. Reset it. */
@media (max-width:620px){
  .mc2-actions{ flex-direction:column; }
  .mc2-actions .mc2-btn{ flex:0 0 auto!important; width:100%; min-height:52px; height:auto; }
  .mc2-seg{ flex:0 0 auto!important; width:100%; }
}

/* woo-layout-guard: keep Woo block cart/checkout inside the page grid and
   strip underlines from their buttons. */
body.mc-v2 .wp-block-woocommerce-cart,
body.mc-v2 .wp-block-woocommerce-checkout,
body.mc-v2 .wc-block-cart,
body.mc-v2 .wc-block-checkout{ max-width:1180px!important; margin-left:auto!important; margin-right:auto!important; padding-left:22px!important; padding-right:22px!important; box-sizing:border-box; }
body.mc-v2 .wc-block-cart .wc-block-cart-items{ margin-left:0!important; }
body.mc-v2 .wc-block-components-button,
body.mc-v2 .wc-block-components-button *,
body.mc-v2 .wc-block-cart__submit-button,
body.mc-v2 a.checkout-button,
body.mc-v2 #place_order{ text-decoration:none!important; }
body.mc-v2 .woocommerce-page .entry-title{ text-align:left; }

/* avatar-specificity-fix: '.mc2-who span' was beating '.mc2-av' (higher specificity),
   knocking the avatar back to display:block so the initial sat in the corner. */
.mc2-who .mc2-av{
  display:flex!important; align-items:center!important; justify-content:center!important;
  width:40px!important; height:40px!important; flex:0 0 40px!important;
  border-radius:50%!important; overflow:hidden!important;
  background:var(--mc-cream-2)!important; color:var(--mc-red)!important;
  font-family:'Fredoka',sans-serif!important; font-weight:600!important;
  font-size:16px!important; line-height:1!important; letter-spacing:0!important;
}
.mc2-who .mc2-av img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.mc2-who .mc2-meta{ display:flex; flex-direction:column; }

/* Sticky footer: short pages were leaving a cream strip under the red footer. */
body.mc-v2{ display:flex; flex-direction:column; min-height:100vh; }
body.mc-v2 > main.site-main,
body.mc-v2 > .site-main{ flex:1 0 auto; }
body.mc-v2 > footer,
body.mc-v2 > .mc2-footer{ flex-shrink:0; margin-top:auto; }

/* ---------- plan toggle: monthly plans live inside the configurator ---------- */
/* .mc2-actions / .mc2-eta / .mc2-qty all set display, so [hidden] needs a win */
.mc2-cfg [data-plan-panel][hidden]{ display:none!important; }
.mc2-price-unit{ font-size:14px; font-weight:600; color:var(--mc-ink-2); margin-left:-5px; align-self:flex-end; padding-bottom:3px; }
.mc2-btn--wa{ background:#25D366; color:#fff!important; flex:1 1 100%; }
.mc2-btn--wa:hover{ filter:brightness(.94); }
.mc2-btn--sm{ padding:12px 22px; min-height:44px; font-size:13.5px; flex:0 0 auto; }
/* NOT flex: the inline <b> runs would each become their own flex column. */
.mc2-subnote{ display:block; position:relative; padding-left:15px; font-size:13px; line-height:1.55; color:var(--mc-ink-2); margin:0 0 16px; }
.mc2-subnote i{ position:absolute; left:0; top:6px; width:7px; height:7px; border-radius:50%; background:var(--mc-green); }
.mc2-subnote b{ color:var(--mc-ink); font-weight:700; }
.mc2-gym{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--mc-cream-2); border-radius:14px; padding:16px 18px; margin-bottom:20px; }
.mc2-gym b{ display:block; font-family:'Fredoka',sans-serif; font-size:16px; font-weight:600; color:var(--mc-ink); }
.mc2-gym span{ display:block; font-size:12px; color:var(--mc-ink-2); margin-top:3px; }
@media (max-width:620px){
  .mc2-gym{ flex-direction:column; align-items:stretch; }
  .mc2-gym .mc2-btn{ width:100%; }
}


/* ---------- qty stepper hardening ----------
   WooCommerce ships a generic `button, [type=button]` rule that leaks
   padding:8px 16px and a #CC3366 hover/focus fill into these controls.
   The padding was the visible bug: a 38px border-box input with 32px of
   padding left 6px of content box, so the quantity digit was clipped.
   Everything below is scoped under .mc2-cfg so it outranks that rule
   whichever order LiteSpeed ends up concatenating the sheets in. */
.mc2-cfg .mc2-qty input{ padding:0; width:46px; }
.mc2-cfg .mc2-qty button{ padding:0; background:none; color:var(--mc-ink); border:0; }
.mc2-cfg .mc2-qty button:hover{ background:var(--mc-cream-2); color:var(--mc-ink); }
.mc2-cfg .mc2-qty button:focus{ background:none; color:var(--mc-ink); }
.mc2-cfg .mc2-qty button:focus:hover{ background:var(--mc-cream-2); }
.mc2-cfg .mc2-qty button:focus-visible{ outline:2px solid var(--mc-ink); outline-offset:-2px; }

/* same generic rule can repaint the plan toggle and the option tiles */
.mc2-cfg .mc2-seg button:focus{ background:none; color:var(--mc-ink-2); }
.mc2-cfg .mc2-seg button.is-on,
.mc2-cfg .mc2-seg button.is-on:hover,
.mc2-cfg .mc2-seg button.is-on:focus{ background:var(--mc-ink); color:#fff; }
.mc2-cfg .mc2-seg button:focus-visible{ outline:2px solid var(--mc-ink); outline-offset:-2px; }
.mc2-cfg .mc2-opt:focus{ background:#fff; }
.mc2-cfg .mc2-opt.is-off:focus{ background:#FAF6EF; }
.mc2-cfg .mc2-opt:focus-visible{ outline:2px solid var(--mc-ink); outline-offset:2px; }

/* ---------- UGC photo cards (tagged-on-Instagram look) ----------
   A plain <figure>, never an .e-con: a pseudo-element on an Elementor
   container leaves the flow and pins to the padding-box corner. */
figure.mc2-ugc-card{
  position:relative; margin:0; aspect-ratio:1/1; border:0; border-radius:16px;
  overflow:hidden; background:var(--mc-cream-2); isolation:isolate;
}
/* Pinned rather than in-flow: inside the Elementor text widget the img picked
   up a 22px offset, which pushed the photo down and clipped it against the
   overflow:hidden figure, leaving a cream strip across the top of each card. */
figure.mc2-ugc-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.6,.2,1); }
figure.mc2-ugc-card:hover img{ transform:scale(1.05); }
/* legibility wash behind the handle - no effect on the placeholder variant */
figure.mc2-ugc-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); pointer-events:none;
}
.mc2-ugc-handle{
  position:absolute; left:11px; bottom:10px; z-index:2;
  display:flex; align-items:center; gap:5px;
  color:#fff!important; font-size:11.5px; font-weight:700; line-height:1;
  text-shadow:0 1px 7px rgba(0,0,0,.45);
}
.mc2-ugc-handle svg{ width:13px; height:13px; flex:0 0 13px; }
/* the little tagged-account marker Instagram puts on a photo */
.mc2-ugc-tagmark{
  position:absolute; top:9px; right:9px; z-index:2; width:22px; height:22px;
  border-radius:50%; background:rgba(21,21,21,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
}
.mc2-ugc-tagmark svg{ width:12px; height:12px; color:#fff; }
@media (max-width:620px){
  .mc2-ugc-handle{ font-size:10.5px; left:9px; bottom:8px; }
  .mc2-ugc-tagmark{ width:20px; height:20px; top:7px; right:7px; }
}

/* ---------- mobile header ----------
   .mc2-nav carries the margin-left:auto that pushes the cart right, but the nav
   is display:none under 980px - so logo/cart/burger flowed on a fixed 24px gap
   with nothing holding them apart. The logo could then shrink and wrap, and its
   text spilled over the cart pill. Pin the widths and let the cart do the push. */
@media (max-width:980px){
  .mc2-header-in{ gap:10px; }
  .mc2-logo{ flex:0 0 auto; white-space:nowrap; min-width:0; }
  .mc2-cart{ margin-left:auto; flex:0 0 auto; }
  .mc2-burger{ flex:0 0 auto; }
}
@media (max-width:620px){
  .mc2-header-in{ padding-left:16px; padding-right:16px; gap:8px; }
  .mc2-logo{ font-size:17.5px; gap:7px; }
  .mc2-logo-mark{ width:26px; height:26px; flex:0 0 26px; }
  .mc2-cart{ padding:8px 13px; font-size:13.5px; gap:7px; }
  .mc2-cart b{ min-width:18px; height:18px; font-size:11px; }
}
/* very narrow phones: drop the word, keep the count */
@media (max-width:359px){
  .mc2-cart{ font-size:0; padding:9px 11px; }
  .mc2-cart b{ font-size:11px; }
}

/* ---------- mobile touch targets: 44px minimum ----------
   The burger (36x30), the qty steppers (34x34) and the plan toggle (38px tall)
   were all under the 44px minimum. The burger is the only navigation on mobile. */
@media (max-width:980px){
  .mc2-burger{ width:44px; height:44px; padding:0; align-items:center; justify-content:center; margin-right:-8px; }
  .mc2-cfg .mc2-qty button{ width:44px; height:44px; }
  .mc2-cfg .mc2-qty input{ width:42px; }
  .mc2-cfg .mc2-seg button{ min-height:44px; }
  .mc2-link{ display:inline-block; padding:9px 0; }
}

/* footer links were 20px and 15px tall - too small to hit accurately on a phone */
@media (max-width:620px){
  .mc2-footer-links{ gap:10px 22px; }
  .mc2-footer-links a{ display:inline-block; padding:10px 0; }
  .mc2-footer-bot{ gap:10px; }
  .mc2-footer-bot a{ display:inline-block; padding:8px 0; }
  .mc2-cart{ min-height:40px; }
}