/*
Theme Name: Medela Child
Template: astra
Version: 1.0
*/

/* ===== Design tokens (medela) ===== */
:root{
  --m-cream:#F5F1E6;
  --m-cream-dark:#EFE9D8;
  --m-yellow:#FFCE00;
  --m-dark:#1D1D1B;
  --m-gray:#6B6B6B;
  --m-border:#E6E1D3;
}
*{box-sizing:border-box}
body.medela{margin:0;background:#fff;color:var(--m-dark);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.medela h1,.medela h2,.medela h3,.medela .serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.01em}
.medela a{text-decoration:none;color:inherit}
.medela img{max-width:100%;display:block;border:0}
.medela .wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.medela .m-btn{display:inline-block;background:var(--m-yellow);color:var(--m-dark)!important;padding:14px 36px;border-radius:999px;font-weight:600;font-size:15px;border:none;cursor:pointer;line-height:1;transition:filter .15s}
.medela .m-btn:hover{filter:brightness(.96)}
.medela .m-btn.outline{background:transparent;border:1.5px solid var(--m-dark);color:var(--m-dark)!important}
.medela .m-headline{font-size:clamp(28px,3.6vw,48px);line-height:1.08;margin:0 0 16px}
.medela .m-sub{font-size:17px;color:#4A4A4A;max-width:540px;margin:0 0 22px}
.medela .m-center{text-align:center}
.medela .m-center .m-sub{margin-left:auto;margin-right:auto}
.medela .m-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--m-gray);margin:0 0 10px;font-weight:600}
.medela .m-center .m-eyebrow{margin-left:auto;margin-right:auto}
section{scroll-margin-top:20px}

/* ===== Top bar / header ===== */
.medela .m-announce{background:#fff;border-bottom:1px solid var(--m-border)}
.medela .m-announce .wrap{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding-top:9px;padding-bottom:9px;color:#4a4a4a}
.medela .m-announce a.m-announce-cta{background:var(--m-yellow);color:var(--m-dark)!important;font-weight:600;border-radius:999px;padding:7px 18px;font-size:13px}
.medela .m-header .wrap{display:flex;align-items:center;gap:36px;padding-top:16px;padding-bottom:16px}
.medela .m-logo img{height:34px;width:auto}
.medela .m-navwrap{flex:1}
.medela .m-nav{list-style:none;display:flex;gap:30px;margin:0;padding:0}
.medela .m-nav>li{position:relative}
.medela .m-nav a{font-size:14.5px;font-weight:600;color:var(--m-dark);padding:8px 0}
.medela .m-nav a:hover{color:#000}
.medela .m-nav .m-drop{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--m-border);min-width:260px;list-style:none;margin:0;padding:10px 0;display:none;box-shadow:0 12px 30px rgba(0,0,0,.08);z-index:50}
.medela .m-nav>li:hover .m-drop{display:block}
.medela .m-drop a{display:block;padding:8px 20px;font-weight:500;font-size:14px}
.medela .m-drop a:hover{background:var(--m-cream)}
.medela .m-icons{display:flex;gap:18px;align-items:center}
.medela .m-icons a{color:var(--m-dark)}
.medela .m-burger{display:none;background:none;border:0;padding:6px;color:var(--m-dark);cursor:pointer;line-height:0}
.medela .m-mobile-menu{display:none}

/* ===== Hero ===== */
.medela .m-hero{background:var(--m-cream)}
.medela .m-hero-in{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:44px;padding-top:52px;padding-bottom:52px}
.medela .m-hero-copy .m-headline{font-size:clamp(34px,4.4vw,60px)}
.medela .m-hero-img img{width:100%;border-radius:16px}

/* ===== Categories ===== */
.medela .m-cats{padding:70px 0}
.medela .m-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.medela .m-cat{background:var(--m-cream);border-radius:14px;padding:18px;text-align:center;transition:transform .15s}
.medela .m-cat:hover{transform:translateY(-4px)}
.medela .m-cat-img{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.medela .m-cat-img img{max-height:150px;max-width:100%;object-fit:contain}
.medela .m-cat h3{font-size:17px;margin:0}

/* ===== Insurance ===== */
.medela .m-ins{background:var(--m-cream)}
.medela .m-ins-in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding-top:60px;padding-bottom:60px}
.medela .m-ins-img img{width:100%;border-radius:14px}
.medela .m-ins-copy .m-btn{margin-top:6px}

/* ===== As seen in ===== */
.medela .m-seen{padding:56px 0;border-bottom:1px solid var(--m-border)}
.medela .m-seen-logos{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.medela .m-seen-logos span{font-family:Georgia,serif;font-size:22px;color:#9b978b;letter-spacing:.02em}

/* ===== Products love ===== */
.medela .m-love{padding:20px 0 70px}
.medela .m-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.medela .m-prod{background:var(--m-cream);border-radius:14px;padding:22px;text-align:center}
.medela .m-prod-img{height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.medela .m-prod-img img{max-height:180px;object-fit:contain}
.medela .m-prod h3{font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:600;min-height:40px;margin:0 0 8px}
.medela .m-prod .m-stars{color:var(--m-yellow);font-size:14px;margin-bottom:12px}
.medela .m-prod .m-rate{color:var(--m-gray);font-weight:600}

/* ===== Trust ===== */
.medela .m-trust{background:var(--m-cream);padding:70px 0}
.medela .m-trust-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.medela .m-trust-art{display:flex;align-items:center;justify-content:center}
.medela .m-medal{width:210px;height:210px;border-radius:50%;background:#6F4F8F;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-family:Georgia,serif;font-size:22px;line-height:1.25}

/* ===== Videos ===== */
.medela .m-videos{padding:70px 0}
.medela .m-vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.medela .m-vid{position:relative;border-radius:14px;overflow:hidden}
.medela .m-vid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.medela .m-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--m-dark);padding-left:4px}

/* ===== Tips ===== */
.medela .m-tips{background:var(--m-cream);padding:70px 0}
.medela .m-tip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:34px 0 30px}
.medela .m-tip{text-align:left;background:#fff;border-radius:14px;overflow:hidden;transition:transform .15s}
.medela .m-tip:hover{transform:translateY(-4px)}
.medela .m-tip-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.medela .m-tip-img h3{font-family:'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.35;padding:16px 18px;margin:0}

/* ===== Help & Contact ===== */
.medela .m-help{padding:70px 0}
.medela .m-accord{max-width:720px;margin:34px auto 0;text-align:left}
.medela .m-accord details{background:var(--m-cream);border-radius:12px;margin-bottom:12px;overflow:hidden}
.medela .m-accord summary{cursor:pointer;font-weight:600;padding:18px 22px;list-style:none;position:relative}
.medela .m-accord summary:after{content:"+";position:absolute;right:22px;font-size:20px;color:var(--m-gray)}
.medela .m-accord details[open] summary:after{content:"-"}
.medela .m-accord p{padding:0 22px 18px;margin:0;color:#4a4a4a}
.medela .m-accord a{color:var(--m-dark);border-bottom:1px solid var(--m-dark)}

/* ===== Footer ===== */
.medela .m-foot{background:var(--m-dark);color:#f0ede2}
.medela .m-foot-cols{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:30px;padding-top:54px;padding-bottom:40px}
.medela .m-foot h4{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.medela .m-foot ul{list-style:none;margin:0;padding:0}
.medela .m-foot li{margin-bottom:10px}
.medela .m-foot a{color:#cfcabb;font-size:14px}
.medela .m-foot a:hover{color:#fff}
.medela .m-foot-contact li{font-size:14px;line-height:1.5}
.medela .m-foot-contact a{color:#cfcabb}
.medela .m-foot-contact a:hover{color:#fff}
.medela .m-slogan{background:var(--m-yellow);color:var(--m-dark);text-align:center;font-family:Georgia,serif;font-size:clamp(34px,4.5vw,60px);padding:54px 24px;line-height:1}

/* ===== Responsive ===== */
@media (max-width:900px){
  .medela .m-nav{display:none}
  .medela .m-burger{display:inline-block}
  .medela .m-mobile-menu.open{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--m-border);box-shadow:0 12px 30px rgba(0,0,0,.08);z-index:60}
  .medela .m-header .wrap{position:relative}
  .medela .m-mobile-menu .m-nav{display:flex;flex-direction:column;gap:0;padding:8px 0}
  .medela .m-mobile-menu .m-nav>li{border-bottom:1px solid var(--m-border)}
  .medela .m-mobile-menu .m-nav a{display:block;padding:14px 20px;font-size:15px}
  .medela .m-hero-in,.medela .m-ins-in,.medela .m-trust-in{grid-template-columns:1fr}
  .medela .m-cat-grid,.medela .m-prod-grid,.medela .m-tip-grid{grid-template-columns:repeat(2,1fr)}
  .medela .m-vid-grid{grid-template-columns:1fr}
  .medela .m-foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .medela .m-cat-grid,.medela .m-prod-grid,.medela .m-tip-grid{grid-template-columns:1fr}
  .medela .m-foot-cols{grid-template-columns:1fr}
}