/* Magical Glow Skincare — v18 shared shell (header + footer) injected on every page.
   Also hides the old per-page headers so there is ONE consistent nav everywhere. */

/* ---- hide the old, inconsistent per-page chrome ---- */
.announcement,
nav.desktop-nav,
header.mobile-header,
#mobileMenuOverlay,
#mobileMenuDrawer,
header.header,
header.hd,
nav.app-bar,
footer.footer { display: none !important; }

:root { --ec-green:#2d5a3d; --ec-green-d:#1a3d2a; --ec-green-l:#4a7c59; --ec-gold:#c9a959; --ec-cream:#f5f9f6; --ec-border:#d9e7dd; }
body { padding-bottom: 0; }

/* ---- announcement ---- */
.ec-announce { background: linear-gradient(90deg,var(--ec-green),var(--ec-green-l)); color:#fff; text-align:center; font-size:12.5px; font-weight:500; letter-spacing:.03em; padding:9px 14px; }
.ec-announce span { color: var(--ec-gold); font-weight:700; }

/* ---- top nav ---- */
.ec-nav { position: sticky; top:0; z-index:900; background:#fff; border-bottom:1px solid var(--ec-border); box-shadow:0 1px 0 rgba(26,61,42,.03); }
.ec-nav.ec-scrolled { box-shadow:0 6px 24px rgba(26,61,42,.10); }
.ec-nav-inner { max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:12px 18px; }
.ec-burger { display:none; background:none; border:none; cursor:pointer; color:var(--ec-green-d); padding:4px; }
.ec-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.ec-logo img { height:46px; width:auto; }
.ec-logo-text { display:flex; flex-direction:column; line-height:1.05; }
.ec-logo-text b { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.45rem; font-weight:700; color:var(--ec-green-d); }
.ec-logo-text i { font-style:normal; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ec-green-l); }
.ec-menu { display:flex; align-items:center; gap:4px; margin:0 auto; }
.ec-menu > a, .ec-drop > a { display:inline-block; padding:10px 14px; color:var(--ec-green-d); text-decoration:none; font-weight:600; font-size:14.5px; border-radius:10px; transition:background .2s,color .2s; }
.ec-menu > a:hover, .ec-drop > a:hover, .ec-menu a.ec-active { background:var(--ec-cream); color:var(--ec-green); }
.ec-drop { position:relative; }
.ec-drop-menu { position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid var(--ec-border); border-radius:14px; box-shadow:0 18px 44px rgba(26,61,42,.16); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .2s; z-index:10; }
.ec-drop:hover .ec-drop-menu { opacity:1; visibility:visible; transform:none; }
.ec-drop-menu a { display:block; padding:9px 12px; color:var(--ec-green-d); text-decoration:none; font-size:14px; font-weight:500; border-radius:8px; }
.ec-drop-menu a:hover { background:var(--ec-cream); color:var(--ec-green); }
.ec-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ec-search { display:flex; align-items:center; background:var(--ec-cream); border:1px solid var(--ec-border); border-radius:40px; overflow:hidden; }
.ec-search input { border:none; background:none; outline:none; padding:9px 4px 9px 16px; font-size:13.5px; width:170px; font-family:inherit; color:var(--ec-green-d); }
.ec-search button { border:none; background:none; cursor:pointer; color:var(--ec-green); padding:0 14px 0 4px; display:flex; }
.ec-wa { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--ec-cream); color:#25a35a; text-decoration:none; transition:transform .2s; }
.ec-wa:hover { transform:translateY(-2px); }
.ec-cart { display:flex; align-items:center; gap:8px; background:var(--ec-green); color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:11px 20px; border-radius:40px; box-shadow:0 8px 20px rgba(45,90,61,.26); transition:transform .2s,box-shadow .2s; }
.ec-cart:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(45,90,61,.34); }
.ec-badge { background:var(--ec-gold); color:var(--ec-green-d); font-size:11px; font-weight:800; min-width:19px; height:19px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }

/* ---- mobile drawer ---- */
.ec-overlay { position:fixed; inset:0; background:rgba(16,34,22,.5); opacity:0; visibility:hidden; transition:opacity .25s; z-index:950; }
.ec-overlay.open { opacity:1; visibility:visible; }
.ec-drawer { position:fixed; top:0; left:0; bottom:0; width:84%; max-width:320px; background:#fff; z-index:960; transform:translateX(-100%); transition:transform .3s cubic-bezier(.32,.72,0,1); display:flex; flex-direction:column; box-shadow:0 0 50px rgba(0,0,0,.2); }
.ec-drawer.open { transform:none; }
.ec-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--ec-border); }
.ec-drawer-head img { height:42px; }
.ec-drawer-head button { background:none; border:none; font-size:22px; color:var(--ec-green-d); cursor:pointer; }
.ec-drawer-nav { flex:1; overflow-y:auto; padding:12px 12px 20px; display:flex; flex-direction:column; }
.ec-drawer-nav a { padding:13px 14px; color:var(--ec-green-d); text-decoration:none; font-weight:600; font-size:15px; border-radius:10px; }
.ec-drawer-nav a:hover { background:var(--ec-cream); }
.ec-drawer-label { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ec-green-l); font-weight:700; padding:16px 14px 6px; }
.ec-drawer-foot { padding:16px; border-top:1px solid var(--ec-border); }
.ec-drawer-wa { display:flex; align-items:center; justify-content:center; gap:8px; background:#25d366; color:#fff; text-decoration:none; font-weight:700; padding:13px; border-radius:12px; }

/* ---- footer ---- */
.ec-footer { background:var(--ec-green-d); color:rgba(255,255,255,.82); margin-top:0; }
.ec-footer-grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; padding:52px 20px 34px; }
.ec-footer-brand img { height:54px; margin-bottom:14px; }
.ec-footer-brand p { font-size:13.5px; line-height:1.7; max-width:34ch; }
.ec-social { display:flex; gap:10px; margin-top:16px; }
.ec-social a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:background .2s; }
.ec-social a:hover { background:var(--ec-gold); color:var(--ec-green-d); }
.ec-footer h5 { color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; }
.ec-footer-grid > div a { display:block; color:rgba(255,255,255,.8); text-decoration:none; font-size:14px; padding:5px 0; }
.ec-footer-grid > div a:hover { color:var(--ec-gold); }
.ec-footer-bottom { border-top:1px solid rgba(255,255,255,.12); text-align:center; font-size:12.5px; padding:20px; color:rgba(255,255,255,.65); }
.ec-footer-bottom a { color:var(--ec-gold); text-decoration:none; }

/* ---- mobile bottom nav ---- */
.ec-bottomnav { display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--ec-border); z-index:890; justify-content:space-around; box-shadow:0 -2px 14px rgba(26,61,42,.08); }
.ec-bottomnav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 10px; font-size:10px; font-weight:600; color:var(--ec-green-l); text-decoration:none; position:relative; }
.ec-bottomnav a.ec-active { color:var(--ec-green); }
.ec-bottomnav .cart-count { position:absolute; top:4px; right:28%; background:var(--ec-gold); color:var(--ec-green-d); font-size:9px; font-weight:800; min-width:15px; height:15px; border-radius:8px; display:none; align-items:center; justify-content:center; }
.ec-bottomnav .cart-count.has { display:flex; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ec-burger { display:flex; }
  .ec-menu { display:none; }
  .ec-search { display:none; }
  .ec-logo img { height:40px; }
  .ec-logo-text b { font-size:1.25rem; }
  .ec-cart span:not(.ec-badge) { display:none; }
  .ec-cart { padding:11px 14px; }
  .ec-nav-inner { gap:10px; }
  .ec-logo { margin-right:auto; }
  .ec-footer-grid { grid-template-columns:1fr 1fr; gap:26px; padding:40px 20px 24px; }
  .ec-bottomnav { display:flex; }
  body { padding-bottom:62px; }
}
@media (max-width: 520px) {
  .ec-footer-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-cart, .ec-wa, .ec-drawer, .ec-overlay, .ec-drop-menu { transition:none; }
}

/* ---- inline SVG icons (replaced emoji) — scale with font-size ---- */
.i { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex-shrink: 0; }
.feature-icon { color: var(--ec-green, #2d5a3d); }
.feature-icon .i { width: 1.6rem; height: 1.6rem; }
.author-avatar { color: var(--ec-green, #2d5a3d); display: flex; align-items: center; justify-content: center; }
.author-avatar .i { width: 1.5rem; height: 1.5rem; }
.ep-emoji, .placeholder-image, .hero-img, .empty-cart-icon { color: var(--ec-green, #2d5a3d); }
.ec-bottomnav a .i { display: block; width: 20px; height: 20px; margin: 0 auto 2px; }
.ec-announce .i { vertical-align: -.18em; margin-right: 2px; }
.testimonial-stars .i, .ep-stars .i, .product-rating .i, .stars .i { width: 1em; height: 1em; vertical-align: -.12em; }