/* Muddlefox shop pages v2 (likes 78 / followers 77) — brand plugin 1.1.3 */
.mf-shop{
  --mf-bg:#0b0f14;--mf-bg-2:#121821;--mf-mint:#7dffa8;--mf-mint-soft:rgba(125,255,168,.12);
  --mf-text:#f5f7fa;--mf-muted:#a8b0bc;--mf-ink:#0b0f14;--mf-ink-muted:#5c6675;
  --mf-light:#f8f9fb;--mf-tint:#eef4f0;--mf-border:#e4e8ee;
  -webkit-font-smoothing:antialiased;
}
.mf-shop{
  width:100vw;max-width:100vw;position:relative;
  margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
}
.page-id-77,.page-id-78{overflow-x:clip}
.mf-shop *,.mf-shop *::before,.mf-shop *::after{box-sizing:border-box}
.mf-shop .mf-shop-wrap{width:min(100% - 2rem,1120px);margin-inline:auto}
.mf-shop .mf-shop-col{width:min(100% - 2.5rem,760px);margin-inline:auto;position:relative}

/* —— Hero —— */
.mf-shop .mf-shop-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 70% 60% at 85% 25%,rgba(125,255,168,.15),transparent 55%),
    radial-gradient(ellipse 50% 45% at 8% 90%,rgba(125,255,168,.07),transparent 55%),
    var(--mf-bg);
  color:var(--mf-text);
  padding:2rem 0 2.5rem;
}
.mf-shop .mf-shop-hero-grid{display:grid;gap:1.25rem;align-items:center}
.mf-shop .mf-shop-hero-copy{text-align:center}
.mf-shop .mf-shop-hero-copy > p:first-child{
  display:inline-block;margin:0 0 .9rem!important;padding:.35rem .85rem;border-radius:999px;
  background:var(--mf-mint-soft);color:var(--mf-mint)!important;
  font-size:.72rem!important;letter-spacing:.08em;
}
.entry-content .mf-shop .mf-shop-hero h1{
  color:#f5f7fa!important;
  font-size:clamp(2rem,6.5vw,3.1rem)!important;font-weight:800!important;
  line-height:1.1!important;letter-spacing:-.02em;margin:0 0 .85rem!important;
}
.mf-shop .mf-shop-hero-copy p{color:#b8c0cc!important;margin-inline:auto;max-width:34rem}
.mf-shop .mf-shop-hero-copy p:last-child{
  color:var(--mf-muted)!important;font-size:.88rem!important;margin-bottom:0!important;
}
.mf-shop .mf-shop-hero-visual{display:flex;justify-content:center;order:-1}
.mf-shop .mf-shop-hero-visual svg{width:min(62vw,240px);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
@media(min-width:900px){
  .mf-shop .mf-shop-hero{padding:3.25rem 0 3.5rem}
  .mf-shop .mf-shop-hero-grid{grid-template-columns:1.1fr .9fr;gap:3rem}
  .mf-shop .mf-shop-hero-copy{text-align:left}
  .mf-shop .mf-shop-hero-copy h1{text-align:left!important}
  .mf-shop .mf-shop-hero-copy p{text-align:left!important;margin-inline:0}
  .mf-shop .mf-shop-hero-visual{order:0}
  .mf-shop .mf-shop-hero-visual svg{width:min(100%,400px)}
}

/* —— Order form (1.1.11): card sits fully inside the light section, no pull-up into the hero —— */
.mf-shop .mf-shop-order{
  background:var(--mf-light)!important;
  padding-top:20px!important;margin-top:0!important;position:relative;z-index:2;
}
.mf-shop .mf-shop-order .mf-ig-order{
  box-shadow:0 24px 60px rgba(11,15,20,.28),0 0 0 1px rgba(125,255,168,.14);
}
@media(min-width:900px){
  .mf-shop .mf-shop-order{padding-top:32px!important}
}
#mf-order{scroll-margin-top:90px}

/* —— Trust + stats (reuse .mf-home components) —— */
.mf-shop .mf-shop-trust .mf-badges{border-top:0}

/* —— SEO sections —— */
.mf-shop .mf-shop-seo{background:var(--mf-light)}
.mf-shop .mf-shop-sec{padding:2.75rem 0;color:var(--mf-ink)}
.mf-shop .mf-shop-sec--light{background:var(--mf-light)}
.mf-shop .mf-shop-sec--tint{background:var(--mf-tint);border-top:1px solid #e1ebe4;border-bottom:1px solid #e1ebe4}
.mf-shop .mf-shop-sec--faq{background:#fff;border-top:1px solid var(--mf-border)}
@media(min-width:900px){.mf-shop .mf-shop-sec{padding:3.75rem 0}}
.entry-content .mf-shop .mf-shop-sec h2{
  color:#0b0f14!important;font-size:clamp(1.45rem,4.2vw,1.95rem)!important;font-weight:800!important;
  line-height:1.2!important;letter-spacing:-.015em;margin:0 0 1rem!important;
  padding-bottom:.7rem;position:relative;
}
.entry-content .mf-shop .mf-shop-sec h2::after{
  content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;border-radius:4px;background:var(--mf-mint);
}
.entry-content .mf-shop .mf-shop-sec h3{
  color:#0b0f14!important;font-size:1.15rem!important;font-weight:750!important;
  margin:2rem 0 .55rem!important;padding-left:.85rem;border-left:3px solid var(--mf-mint);
}
.mf-shop .mf-shop-sec p{color:#4a5463!important;font-size:1.02rem;line-height:1.7!important}
.mf-shop .mf-shop-sec p strong,.mf-shop .mf-shop-sec li strong{color:#0b0f14!important}
.mf-shop .mf-shop-sec a{color:#0b0f14!important;font-weight:600;text-decoration:underline;text-decoration-color:var(--mf-mint);text-decoration-thickness:2px;text-underline-offset:3px}
.mf-shop .mf-shop-sec-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:1rem;
  background:linear-gradient(145deg,#0b0f14,#1a222d);box-shadow:0 8px 20px rgba(11,15,20,.14);
}
.mf-shop .mf-shop-sec-ico svg{width:28px;height:28px}
@media(min-width:1100px){
  .mf-shop .mf-shop-sec.has-ico .mf-shop-sec-ico{position:absolute;left:-76px;top:-.2rem;margin:0}
}

/* Checklists + pills */
.mf-shop ul.mf-shop-checks{list-style:none;padding:0!important;margin:1rem 0 1.25rem!important;display:grid;gap:.6rem}
.mf-shop ul.mf-shop-checks li{
  position:relative;padding:.7rem .9rem .7rem 2.6rem;background:#fff;border:1px solid var(--mf-border);
  border-radius:12px;color:#2a3441;line-height:1.5;
}
.mf-shop ul.mf-shop-checks li::before{
  content:"";position:absolute;left:.85rem;top:.85rem;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--mf-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%230b0f14' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
}
.mf-shop ul.mf-shop-pills{list-style:none;padding:0!important;margin:1rem 0 1.25rem!important;display:flex;flex-wrap:wrap;gap:.5rem}
.mf-shop ul.mf-shop-pills li{
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:999px;
  background:#0b0f14;color:#f5f7fa;font-weight:600;font-size:.9rem;
}
.mf-shop ul.mf-shop-pills li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mf-mint)}

/* Feature card grid */
.mf-shop ul.mf-shop-cards{list-style:none;padding:0!important;margin:1.25rem 0 1.5rem!important;display:grid;gap:.85rem}
@media(min-width:640px){
  .mf-shop ul.mf-shop-cards--4{grid-template-columns:1fr 1fr}
  .mf-shop ul.mf-shop-cards--3{grid-template-columns:repeat(3,1fr)}
}
.mf-shop .mf-shop-card{
  background:#fff;border:1px solid var(--mf-border);border-radius:14px;padding:1.1rem 1.1rem 1.15rem;
  box-shadow:0 6px 18px rgba(11,15,20,.04);color:#2a3441;font-size:.95rem;line-height:1.55;
  transition:border-color .15s,box-shadow .15s;
}
.mf-shop .mf-shop-card:hover{border-color:rgba(95,212,138,.7);box-shadow:0 10px 26px rgba(11,15,20,.07)}
.mf-shop .mf-shop-card-ico{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;margin-bottom:.7rem;background:#0b0f14;
}
.mf-shop .mf-shop-card-ico svg{width:22px;height:22px}
.mf-shop .mf-shop-card-text{display:block}
.mf-shop .mf-shop-card-text strong{display:block;margin-bottom:.25rem;font-size:1.02rem}

/* FAQ */
.mf-shop .mf-shop-sec-head{margin-bottom:1.25rem}
.mf-shop .mf-shop-eyebrow{
  display:inline-block;margin-bottom:.6rem;padding:.3rem .75rem;border-radius:999px;
  background:rgba(11,15,20,.06);color:#1a6b45;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.mf-shop .mf-shop-faq{max-width:none}
.mf-shop .mf-home .mf-faq details{background:#f8f9fb}
.mf-shop .mf-home .mf-faq details[open]{background:#fff;border-color:rgba(95,212,138,.7);box-shadow:0 8px 22px rgba(11,15,20,.06)}
.entry-content .mf-shop .mf-faq summary{color:#0b0f14!important}
.mf-shop .mf-faq .ans{color:#4a5463!important;line-height:1.6!important;font-size:.97rem!important}
.mf-shop .mf-faq .ans a{color:#0b0f14!important}
.mf-shop .mf-shop-sec--faq p.has-text-align-center{margin-top:1.75rem!important}

/* CTA */
.mf-shop .mf-shop-cta .mf-cta-band{padding:3.5rem 0}
.mf-shop .mf-shop-cta-ico{
  display:grid;place-items:center;width:60px;height:60px;border-radius:18px;margin:0 auto 1rem;
  background:var(--mf-mint-soft);box-shadow:0 0 40px rgba(125,255,168,.2);
}
.mf-shop .mf-shop-cta-ico svg{width:34px;height:34px}
.entry-content .mf-shop .mf-shop-cta h2{color:#f5f7fa!important;margin:0 0 .6rem!important}

/* 1.1.6: "Quick & Easy Steps to Order …" heading (rendered by muddlefox-ig-order between the
   order form and the 3-step graphic) — match the copy-band section headings: same type
   scale/weight/color, mint underline bar and a dark icon tile. CSS-only, keyed on the IG
   plugin's .mf-ig-howto__title class, scoped to the v2 shop pages (.mf-shop). */
.entry-content .mf-shop .mf-ig-howto__title{
  display:flex!important;align-items:center;gap:1rem;position:relative;
  text-align:left!important;color:#0b0f14!important;
  font-family:inherit!important;font-size:clamp(1.45rem,4.2vw,1.95rem)!important;font-weight:800!important;
  line-height:1.2!important;letter-spacing:-.015em!important;
  margin:2.75rem auto 1.25rem!important;padding:0 0 .7rem!important;
}
.entry-content .mf-shop .mf-ig-howto__title::before{
  content:"";flex:0 0 52px;width:52px;height:52px;border-radius:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' aria-hidden='true'%3E %3Cpath d='M8 28h18l-2 10 18-20H24l2-10L8 28z' stroke='%237dffa8' stroke-width='2.2' fill='rgba(125,255,168,0.1)' stroke-linejoin='round'/%3E %3C/svg%3E") center/28px 28px no-repeat,linear-gradient(145deg,#0b0f14,#1a222d);
  box-shadow:0 8px 20px rgba(11,15,20,.14);
}
.entry-content .mf-shop .mf-ig-howto__title::after{
  content:"";position:absolute;left:calc(52px + 1rem);bottom:0;width:48px;height:4px;border-radius:4px;background:var(--mf-mint,#7dffa8);
}
@media(max-width:599px){
  .entry-content .mf-shop .mf-ig-howto__title{gap:.8rem;margin-top:2.25rem!important}
  .entry-content .mf-shop .mf-ig-howto__title::before{flex-basis:44px;width:44px;height:44px;border-radius:13px;background-size:24px 24px,auto}
  .entry-content .mf-shop .mf-ig-howto__title::after{left:calc(44px + .8rem)}
}

/* 1.1.13: the steps block now reuses the SEO section layout (.mf-shop-sec.has-ico > .mf-shop-col >
   .mf-shop-sec-ico + h2), so icon, heading text and panel share the SEO column. Only neutralise the
   IG plugin / 1.1.6 heading decorations that would double up. */
.mf-shop .mf-shop-sec.mf-shop-howto{padding-bottom:3rem}
.entry-content .mf-shop .mf-shop-howto h2.mf-ig-howto__title{
  display:block!important;text-align:left!important;margin:0 0 1.25rem!important;padding:0 0 .7rem!important;gap:0;
}
.entry-content .mf-shop .mf-shop-howto h2.mf-ig-howto__title::before{content:none!important;display:none!important}
.entry-content .mf-shop .mf-shop-howto h2.mf-ig-howto__title::after{left:0!important}
.mf-shop .mf-shop-howto section.mf-ig-howto{width:100%;max-width:none;margin:0!important;box-sizing:border-box}
.entry-content .mf-shop .mf-ig-howto ol.mf-ig-howto__steps{padding:0!important;margin:0!important}
.mf-shop .mf-shop-howto .mf-ig-howto p{color:inherit!important;font-size:inherit;line-height:1.45!important}
.mf-shop .mf-shop-howto .mf-ig-howto p.mf-ig-howto__text{color:var(--mf-muted)!important;font-size:.875rem}