/* Swasthai Sampad — baby-care.html page-specific design */
:root { --baby-ink:#203234; --baby-muted:#637476; --baby-teal:#0d6e6d; --baby-dark:#0a504f; --baby-gold:#f3b33d; --baby-line:#dfeae8; --baby-cream:#fffaf4; }
.baby-announcement { display:flex; align-items:center; justify-content:center; gap:13px; padding:9px 14px; background:#fff1e4; color:#8a5a48; text-align:center; font-size:10px; font-weight:800; letter-spacing:.13em; }
.baby-announcement span[aria-hidden] { color:#d58b74; font-size:14px; }
.baby-hero { position:relative; overflow:hidden; padding:66px 0 74px; background:linear-gradient(118deg,#f1fbf8 0%,#fff6f1 56%,#fff3e9 100%); }
.baby-hero::before { content:""; position:absolute; width:380px; height:380px; border:1px solid rgba(13,110,109,.08); border-radius:50%; right:-135px; top:-170px; }
.baby-hero-grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr); align-items:center; gap:45px; position:relative; z-index:1; }
.baby-hero-copy { max-width:650px; }
.baby-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #d8e9e3; border-radius:999px; color:#0d6e6d; background:rgba(255,255,255,.74); font-size:10px; font-weight:800; letter-spacing:.08em; }
.baby-eyebrow span { color:#db8a9a; font-size:17px; }
.baby-hero h1 { margin:22px 0 16px; color:var(--baby-ink); font:800 clamp(3.1rem,5.5vw,5.25rem)/.99 "Manrope",sans-serif; letter-spacing:-.065em; }
.baby-hero h1 em { color:#d47d93; font-style:normal; }
.baby-hero-lead { max-width:560px; color:#5b7070; font-size:16px; line-height:1.85; }
.baby-hero-points { display:flex; flex-wrap:wrap; gap:10px 18px; margin:24px 0; }
.baby-hero-points span { display:inline-flex; align-items:center; gap:7px; color:#56706d; font-size:12px; font-weight:700; }
.baby-hero-points b { display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#d8eee5; color:#0d6e6d; font-size:11px; }
.baby-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:25px; }
.baby-primary-button { min-height:49px; padding-inline:21px!important; border-radius:999px!important; font-weight:800!important; }
.baby-secondary-button { min-height:49px; padding-inline:20px!important; border-radius:999px!important; }
.baby-hero-note { max-width:540px; margin-top:16px; color:#758585; font-size:11px; line-height:1.7; }
/* Decorative, CSS-made baby care illustration */
.baby-hero-art { position:relative; min-height:440px; overflow:hidden; border:1px solid rgba(255,255,255,.85); border-radius:34px; background:linear-gradient(145deg,#e5f4ed,#fce8e5 60%,#fff0ce); box-shadow:0 24px 70px rgba(61,100,91,.12); }
.baby-art-sun { position:absolute; width:230px; height:230px; top:46px; right:62px; border-radius:50%; background:rgba(255,255,255,.65); }
.baby-art-cloud { position:absolute; background:rgba(255,255,255,.8); border-radius:999px; height:24px; width:95px; }
.cloud-a { left:35px; top:83px; }.cloud-b { right:35px; bottom:93px; width:70px; height:18px; }
.baby-bottle { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 18px 28px rgba(57,88,82,.12); }
.bottle-lotion { width:118px; height:215px; left:20%; top:111px; border:4px solid #fff; border-radius:26px 26px 31px 31px; background:linear-gradient(120deg,#fff,#f8c7d2); transform:rotate(-7deg); }
.bottle-wash { width:124px; height:232px; right:22%; top:91px; border:4px solid #fff; border-radius:30px 30px 25px 25px; background:linear-gradient(130deg,#fff,#bfe5da); transform:rotate(6deg); }
.bottle-cap { position:absolute; top:-21px; width:57px; height:26px; border-radius:9px 9px 4px 4px; background:#d88da4; border:3px solid #fff; }
.bottle-wash .bottle-cap { background:#6bb9ad; }
.bottle-mark { color:#53716b; font:800 15px/1.15 "Manrope",sans-serif; text-align:center; letter-spacing:-.04em; }
.bottle-leaf { margin-top:16px; color:#c46b87; font-size:30px; }
.bottle-dot { width:24px; height:24px; margin-top:18px; border-radius:50%; background:#fff; box-shadow:0 0 0 7px rgba(255,255,255,.3); }
.baby-tube { position:absolute; right:8%; bottom:49px; width:78px; height:150px; border:4px solid #fff; border-radius:20px 20px 8px 8px; background:linear-gradient(120deg,#fff,#f3df9e); transform:rotate(12deg); display:grid; place-items:center; box-shadow:0 14px 25px rgba(57,88,82,.1); }
.tube-cap { position:absolute; bottom:-14px; width:49px; height:18px; background:#e9bd62; border:3px solid #fff; border-radius:5px; }
.tube-mark { color:#897746; font:800 12px/1.15 "Manrope",sans-serif; text-align:center; }
.baby-wipes { position:absolute; width:115px; height:65px; left:5%; bottom:48px; display:grid; place-items:center; border:3px solid #fff; border-radius:16px; background:#d8e5fa; color:#647aa4; font:800 13px/1.1 "Manrope",sans-serif; text-align:center; transform:rotate(-8deg); box-shadow:0 12px 25px rgba(57,88,82,.1); }
.wipes-lid { position:absolute; top:-13px; width:65px; height:20px; border:3px solid #fff; border-radius:10px; background:#f7f9ff; }
.baby-art-toy { position:absolute; top:20px; left:31px; font-size:54px; color:#fff; text-shadow:0 4px 15px rgba(80,130,118,.1); }
.baby-art-label { position:absolute; left:0; right:0; bottom:16px; text-align:center; color:#6c8981; font-size:9px; font-weight:800; letter-spacing:.19em; }
/* Shared section heading */
.baby-section-heading { max-width:760px; margin-bottom:35px; }
.baby-section-heading.compact { max-width:800px; margin-inline:auto; text-align:center; }
.baby-section-kicker { display:inline-block; color:#b46a7c; font-size:10px; font-weight:800; letter-spacing:.15em; }
.baby-section-heading h2, .baby-food-copy h2, .baby-faq-grid h2 { margin:12px 0; color:var(--baby-ink); font:800 clamp(1.9rem,3.5vw,3rem)/1.13 "Manrope",sans-serif; letter-spacing:-.045em; }
.baby-section-heading p, .baby-faq-grid > div > p { margin:0; color:var(--baby-muted); font-size:14px; line-height:1.8; }
/* Brand strip */
.baby-brand-section { padding:65px 0 58px; background:#fff; }
.baby-brand-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
.baby-brand-card { min-height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:15px 10px; background:#fff; border:1px solid #e6ece9; border-radius:17px; box-shadow:0 8px 22px rgba(49,77,69,.035); text-align:center; }
.baby-brand-card small { color:#899391; font-size:10px; letter-spacing:.02em; }
.brand-script { color:#e65b8a; font:800 26px/1 "Manrope",sans-serif; letter-spacing:-.08em; }
.johnsons small { color:#dc7a9f; }
.cetaphil-word { color:#07558b; font:700 24px/1 "Manrope",sans-serif; letter-spacing:-.06em; }
.cetaphil small { color:#1682bd; }
.himalaya-word { color:#23804f; font:800 20px/1 "Manrope",sans-serif; letter-spacing:-.05em; }
.himalaya small { color:#28865b; font-weight:700; }
.mamaearth-word { color:#7a9c38; font:800 19px/1 "Manrope",sans-serif; letter-spacing:-.06em; }
.mamaearth small { color:#829f42; }
.cerelac-word { color:#e14639; font:800 25px/1 "Manrope",sans-serif; letter-spacing:.025em; }
.cerelac small { color:#b57a20; }
.baby-brand-note { margin:17px 0 0; color:#7f8d8b; font-size:10px; line-height:1.6; text-align:center; }
/* Categories */
.baby-categories-section { padding:76px 0 80px; background:#f8fbfa; }
.baby-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.baby-category-card { overflow:hidden; border:1px solid #e5ece8; border-radius:23px; background:#fff; box-shadow:0 9px 26px rgba(35,68,60,.045); transition:transform .2s ease,box-shadow .2s ease; min-width:0; }
.baby-category-card:hover { transform:translateY(-4px); box-shadow:0 18px 35px rgba(35,68,60,.09); }
.baby-category-art { position:relative; display:grid; place-items:center; height:158px; overflow:hidden; }
.baby-category-art > span { display:grid; place-items:center; width:95px; height:95px; border:1px solid rgba(255,255,255,.9); border-radius:30px; background:rgba(255,255,255,.67); font-size:46px; box-shadow:0 12px 24px rgba(48,73,66,.06); transform:rotate(-5deg); }
.baby-category-art i { position:absolute; right:24%; top:26px; color:rgba(255,255,255,.92); font-size:26px; font-style:normal; }
.card-blush .baby-category-art { background:linear-gradient(135deg,#f8dce4,#fff0e7); }
.card-mint .baby-category-art { background:linear-gradient(135deg,#d9f0e7,#eaf6ed); }
.card-lilac .baby-category-art { background:linear-gradient(135deg,#e7e3fa,#f5e9f5); }
.card-yellow .baby-category-art { background:linear-gradient(135deg,#fff0c8,#fff7e4); }
.card-blue .baby-category-art { background:linear-gradient(135deg,#dcecf9,#e8f7f8); }
.card-peach .baby-category-art { background:linear-gradient(135deg,#f9dfd2,#fff1e4); }
.baby-category-copy { padding:21px 22px 23px; }
.baby-card-number { color:#a16b78; font-size:9px; font-weight:800; letter-spacing:.13em; }
.baby-category-copy h3 { margin:9px 0 7px; color:#293c3b; font:800 19px/1.25 "Manrope",sans-serif; letter-spacing:-.035em; }
.baby-category-copy p { min-height:68px; margin:0 0 18px; color:#71807e; font-size:12px; line-height:1.75; }
.baby-category-copy a { display:inline-flex; align-items:center; gap:8px; color:#0d6e6d; font-size:11px; font-weight:800; text-decoration:none; }
.baby-category-copy a:hover { color:#be6f84; }
/* Food spotlight */
.baby-food-section { padding:80px 0; background:#fff; }
.baby-food-grid { display:grid; grid-template-columns:minmax(300px,.88fr) minmax(0,1.12fr); gap:60px; align-items:center; }
.baby-food-art { min-height:365px; position:relative; overflow:hidden; border-radius:30px; background:linear-gradient(145deg,#fff1df,#ffebed 52%,#e6f5ed); }
.food-orbit { position:absolute; border:1px solid rgba(13,110,109,.14); border-radius:50%; }
.orbit-one { width:280px; height:280px; left:calc(50% - 140px); top:31px; }.orbit-two { width:220px; height:220px; left:calc(50% - 110px); top:61px; }
.food-bowl { position:absolute; display:grid; place-items:center; width:145px; height:115px; left:calc(50% - 72px); top:108px; border-radius:0 0 75px 75px; background:linear-gradient(150deg,#fff,#f4d7a9); border:5px solid #fff; box-shadow:0 18px 32px rgba(112,84,48,.13); }
.food-bowl::before { content:""; position:absolute; top:-8px; left:-5px; right:-5px; height:18px; border:5px solid #fff; border-radius:50%; background:#fbf4d9; }
.food-bowl span { font-size:55px; margin-top:14px; }
.food-card { position:absolute; display:flex; flex-direction:column; gap:5px; padding:13px 16px; border:3px solid #fff; border-radius:16px; background:rgba(255,255,255,.91); box-shadow:0 14px 25px rgba(84,71,53,.09); }
.food-card b { color:#d34a3a; font:800 17px/1 "Manrope",sans-serif; }
.food-card small { color:#8a8071; font-size:10px; }
.food-card-one { top:48px; left:22px; transform:rotate(-7deg); }.food-card-two { right:19px; bottom:49px; transform:rotate(7deg); }.food-card-two span { color:#d78099; font-size:22px; }
.food-art-caption { position:absolute; left:0; right:0; bottom:15px; color:#7f897d; text-align:center; font-size:9px; font-weight:800; letter-spacing:.15em; }
.baby-food-copy > p { color:#687978; font-size:14px; line-height:1.85; }
.baby-food-copy ul { display:grid; gap:11px; list-style:none; padding:0; margin:22px 0; }
.baby-food-copy li { position:relative; padding-left:28px; color:#415b58; font-size:13px; line-height:1.65; }
.baby-food-copy li::before { content:"✓"; position:absolute; left:0; top:1px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#e1f3e9; color:#0d6e6d; font-size:11px; font-weight:800; }
.baby-food-button { min-height:47px; padding-inline:20px!important; border-radius:999px!important; }
.baby-food-disclaimer { margin-top:18px!important; color:#8a9391!important; font-size:10px!important; line-height:1.75!important; }
/* Order CTA */
.baby-order-section { padding:75px 0 80px; background:#0d6e6d; color:#fff; }
.baby-section-heading.centered-light { max-width:760px; margin:0 auto 35px; text-align:center; }
.centered-light .baby-section-kicker { color:#f5cbd7; }
.centered-light h2 { color:#fff; }
.centered-light p { color:rgba(255,255,255,.75); }
.baby-order-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.baby-order-step { padding:24px; border:1px solid rgba(255,255,255,.17); border-radius:18px; background:rgba(255,255,255,.065); }
.baby-order-step > span { display:grid; place-items:center; width:37px; height:37px; border-radius:12px; background:#f3b33d; color:#0a504f; font-size:12px; font-weight:800; }
.baby-order-step h3 { margin:18px 0 8px; color:#fff; font:800 17px/1.3 "Manrope",sans-serif; }
.baby-order-step p { margin:0; color:rgba(255,255,255,.72); font-size:12px; line-height:1.75; }
.baby-order-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px; margin-top:30px; }
.baby-order-main { min-height:49px; padding-inline:22px!important; border-radius:999px!important; }
.baby-order-phone { color:#fff; font-size:12px; font-weight:700; text-underline-offset:4px; }
/* FAQ */
.baby-faq-section { padding:76px 0; background:#fbf9f6; }
.baby-faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
.baby-faq-grid h2 { font-size:clamp(1.8rem,3vw,2.5rem); }
.baby-faq-link { display:inline-block; margin-top:22px; color:#0d6e6d; font-weight:800; font-size:12px; text-decoration:none; }
.baby-faq-list { border-top:1px solid #e2e9e5; }
.baby-faq-list details { border-bottom:1px solid #e2e9e5; padding:18px 0; }
.baby-faq-list summary { position:relative; padding-right:30px; color:#2b3f3e; font-size:14px; font-weight:800; cursor:pointer; list-style:none; }
.baby-faq-list summary::-webkit-details-marker { display:none; }
.baby-faq-list summary::after { content:"+"; position:absolute; right:2px; top:-4px; color:#0d6e6d; font-size:22px; font-weight:500; }
.baby-faq-list details[open] summary::after { content:"−"; }
.baby-faq-list details p { margin:12px 25px 0 0; color:#6f7d7a; font-size:12px; line-height:1.8; }
/* Final CTA */
.baby-final-cta { padding:55px 0; background:#fff; }
.baby-final-inner { display:flex; justify-content:space-between; align-items:center; gap:35px; padding:35px 38px; border:1px solid #f0e4df; border-radius:24px; background:linear-gradient(110deg,#fff5f0,#f1faf6); }
.baby-final-inner > div { max-width:700px; }
.baby-final-inner h2 { margin:10px 0; color:#263b39; font:800 clamp(1.8rem,3vw,2.55rem)/1.14 "Manrope",sans-serif; letter-spacing:-.045em; }
.baby-final-inner p { margin:0; color:#6d7a78; font-size:13px; line-height:1.8; }
.baby-final-button { flex:0 0 auto; min-height:48px; padding-inline:20px!important; border-radius:999px!important; }
.baby-footer { margin-bottom:0; }
.baby-mobile-whatsapp { display:none; }
/* Responsive */
@media (max-width:1180px) { .baby-hero-grid { gap:28px; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); } .baby-hero-art { min-height:400px; } .nav-menu { gap:11px; } .nav-menu>a:not(.nav-whatsapp) { font-size:12px; } }
@media (max-width:980px) { .site-header .nav { min-height:70px; } .nav-menu { display:none!important; } .mobile-menu-button { display:flex!important; align-items:center; justify-content:center; } .mobile-menu { display:none; width:100%; flex-direction:column; gap:3px; padding:12px 20px 20px; background:var(--primary-dark,#0a504f); border-top:1px solid rgba(255,255,255,.1); } .mobile-menu.active { display:flex; } .mobile-menu a:not(.button) { display:block; padding:12px 13px; border-radius:8px; color:#fff; text-decoration:none; font-size:14px; font-weight:600; } .mobile-menu a:not(.button):hover,.mobile-menu a:not(.button).active { color:#f3b33d!important; background:rgba(243,179,61,.11); } .mobile-menu .full-width { width:100%; justify-content:center; margin-top:8px; } .baby-hero { padding:48px 0 56px; } .baby-hero-grid { grid-template-columns:1fr; gap:32px; } .baby-hero-copy { max-width:750px; } .baby-hero-art { width:min(100%,560px); margin:0 auto; } .baby-brand-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .baby-food-grid { grid-template-columns:1fr; gap:36px; } .baby-food-art { width:min(100%,520px); margin:0 auto; } .baby-faq-grid { grid-template-columns:1fr; gap:30px; } }
@media (max-width:680px) { .baby-hero { padding:34px 0 42px; } .baby-hero h1 { font-size:clamp(2.8rem,13vw,4rem); } .baby-hero-lead { font-size:14px; } .baby-hero-actions { flex-direction:column; align-items:stretch; } .baby-hero-actions .button { width:100%; justify-content:center; text-align:center; } .baby-hero-art { min-height:340px; border-radius:25px; } .baby-art-sun { width:170px; height:170px; right:calc(50% - 85px); top:60px; } .bottle-lotion { left:17%; top:105px; transform:scale(.82) rotate(-7deg); transform-origin:top center; } .bottle-wash { right:17%; top:90px; transform:scale(.82) rotate(6deg); transform-origin:top center; } .baby-tube { right:3%; bottom:47px; transform:scale(.8) rotate(12deg); transform-origin:bottom center; } .baby-wipes { left:2%; bottom:47px; transform:scale(.8) rotate(-8deg); transform-origin:bottom left; } .baby-brand-section,.baby-categories-section,.baby-food-section,.baby-faq-section { padding:52px 0; } .baby-brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .baby-brand-card { min-height:91px; } .baby-category-grid { grid-template-columns:1fr; } .baby-category-art { height:145px; } .baby-category-copy p { min-height:0; } .baby-order-section { padding:55px 0; } .baby-order-steps { grid-template-columns:1fr; } .baby-order-step { padding:20px; } .baby-order-actions { flex-direction:column; gap:15px; } .baby-final-cta { padding:35px 0; } .baby-final-inner { flex-direction:column; align-items:stretch; padding:25px 21px; gap:20px; } .baby-final-button { width:100%; justify-content:center; text-align:center; } .baby-food-art { min-height:315px; } .food-orbit.orbit-one { width:240px;height:240px;left:calc(50% - 120px); } .food-orbit.orbit-two { width:190px;height:190px;left:calc(50% - 95px); } .baby-mobile-whatsapp { display:flex; position:fixed; z-index:900; right:14px; bottom:14px; align-items:center; justify-content:center; padding:13px 18px; border-radius:999px; background:#0d6e6d; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.2); text-decoration:none; font-size:13px; font-weight:800; } .baby-footer { padding-bottom:63px; } }
@media (prefers-reduced-motion:reduce) { .baby-category-card { transition:none; } .baby-category-card:hover { transform:none; } }