/* ============ MemoHoney (Build 2) — Components ============ */

/* ---------- Announcement strip ---------- */
.cw-announce{
  background:var(--cw-teal-900); color:var(--cw-mint-200); text-align:center;
  font-size:.8rem; font-weight:700; padding:9px 14px; padding-top:calc(9px + var(--safe-top));
}
.cw-announce a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Floating pill header ---------- */
.cw-header-wrap{ position:sticky; top:0; z-index:1000; padding:14px 16px 0; }
.cw-header{
  max-width:var(--cw-max); margin:0 auto; background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(15,61,62,.08); border-radius:var(--cw-r-pill);
  box-shadow:var(--cw-shadow-sm); padding:10px 10px 10px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cw-logo{ display:flex; align-items:center; gap:10px; font-family:var(--cw-font-head); font-weight:800; font-size:1.2rem; color:var(--cw-teal-900); }
.cw-logo .dot{
  width:36px;height:36px;border-radius:50%; background:var(--cw-grad-coral);
  display:flex;align-items:center;justify-content:center; color:#fff; font-weight:800; font-size:.95rem; flex:none;
}
.cw-logo:hover{ color:var(--cw-teal-900); }
.cw-nav{ display:flex; align-items:center; gap:22px; }
.cw-nav a{ color:var(--cw-teal-800); font-weight:700; font-size:.9rem; }
.cw-nav a:hover{ color:var(--cw-coral-700); }
.cw-nav-cta{ display:flex; align-items:center; gap:10px; }
.cw-burger{
  display:none; width:44px;height:44px;border-radius:50%; border:1px solid var(--cw-line);
  background:var(--cw-mint-50); color:var(--cw-teal-900); align-items:center; justify-content:center; cursor:pointer;
}
.cw-mobile-panel{
  display:none; position:fixed; inset:0; z-index:1100; background:var(--cw-teal-900);
  padding:22px; padding-top:calc(22px + var(--safe-top)); overflow-y:auto;
}
.cw-mobile-panel.open{ display:block; }
.cw-mobile-panel a{ display:block; color:#fff; font-weight:700; font-size:1.15rem; padding:16px 4px; border-bottom:1px solid rgba(255,255,255,.12); }
.cw-mobile-close{ position:absolute; right:22px; top:calc(22px + var(--safe-top)); color:#fff; background:none; border:0; font-size:1.7rem; }

/* ---------- Hero (organic blob shapes) ---------- */
.cw-hero{ background:var(--cw-grad-hero); color:#fff; padding:56px 0 100px; position:relative; overflow:hidden; }
.cw-hero .blob-a{ position:absolute; width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(255,122,89,.24),transparent 70%); top:-180px; left:-120px; }
.cw-hero .blob-b{ position:absolute; width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(207,239,224,.18),transparent 70%); bottom:-140px; right:-80px; }
.cw-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; position:relative; z-index:1; }
.cw-hero h1{ color:#fff; }
.cw-hero .cw-lede{ color:rgba(255,255,255,.85); margin:0 0 1.7rem; max-width:56ch; }
.cw-hero-stats{ display:flex; gap:28px; margin-top:32px; flex-wrap:wrap; }
.cw-hero-stat b{ display:block; font-family:var(--cw-font-head); font-size:1.5rem; color:var(--cw-mint-200); }
.cw-hero-stat span{ font-size:.8rem; color:rgba(255,255,255,.7); }
.cw-hero-media{ position:relative; text-align:center; }
.cw-hero-media::before{
  content:""; position:absolute; inset:6% 10%; border-radius:48% 52% 55% 45% / 55% 45% 55% 45%;
  background:linear-gradient(135deg, rgba(255,122,89,.18), rgba(207,239,224,.18)); z-index:0;
}
.cw-hero-media img{ position:relative; z-index:1; filter:drop-shadow(0 26px 34px rgba(0,0,0,.4)); max-height:440px; margin:0 auto; }
.cw-hero-badge{
  position:absolute; bottom:6%; left:0; background:#fff; color:var(--cw-teal-900);
  padding:12px 16px; border-radius:18px; box-shadow:var(--cw-shadow-md); font-weight:800; font-size:.84rem;
  display:flex; align-items:center; gap:10px; z-index:2;
}
.cw-stars{ color:var(--cw-coral-600); letter-spacing:2px; }

/* ---------- Trust strip ---------- */
.cw-trust{ background:var(--cw-mint-50); border-bottom:1px solid var(--cw-line); padding:24px 0; }
.cw-trust-row{ display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }
.cw-trust-row img{ height:40px; width:auto; opacity:.92; }

/* ---------- Section shell ---------- */
.cw-section{ padding:80px 0; }
.cw-section.alt{ background:var(--cw-grad-mint); }
.cw-section.dark{ background:var(--cw-teal-900); color:#fff; }
.cw-section.dark h2, .cw-section.dark h3{ color:#fff; }
.cw-section-head{ text-align:center; max-width:760px; margin:0 auto 46px; }

/* ---------- Cards ---------- */
.cw-card{
  background:var(--cw-paper); border:1px solid var(--cw-line); border-radius:var(--cw-r-md);
  padding:30px 24px; height:100%; box-shadow:var(--cw-shadow-sm); transition:transform .25s var(--cw-ease), box-shadow .25s var(--cw-ease);
}
.cw-card:hover{ transform:translateY(-6px); box-shadow:var(--cw-shadow-md); }
.cw-card .cw-ico{
  width:54px;height:54px;border-radius:50% 50% 50% 12px; display:flex;align-items:center;justify-content:center;
  background:var(--cw-mint-100); color:var(--cw-coral-700); font-size:1.35rem; margin-bottom:16px;
}
.cw-card h3{ margin-bottom:.5rem; }
.cw-card p{ margin-bottom:0; font-size:.96rem; }

/* Step / process card */
.cw-step{ position:relative; padding-left:62px; margin-bottom:32px; }
.cw-step .cw-step-num{
  position:absolute; left:0; top:0; width:44px;height:44px;border-radius:50% 50% 50% 10px;
  background:var(--cw-grad-coral); color:#fff; font-weight:800; font-family:var(--cw-font-head);
  display:flex;align-items:center;justify-content:center; font-size:1.1rem; box-shadow:var(--cw-shadow-coral);
}
.cw-step h3{ margin-bottom:.3rem; }
.cw-step p{ margin-bottom:0; }
.cw-step-line{ position:absolute; left:21px; top:44px; bottom:-32px; width:2px; background:var(--cw-line); }

/* ---------- Offer / pricing panel ---------- */
.cw-offer{
  background:var(--cw-paper); border-radius:var(--cw-r-lg); border:1px solid var(--cw-line);
  box-shadow:var(--cw-shadow-md); padding:32px; text-align:center; position:relative;
}
.cw-offer.best{ border:2px solid var(--cw-coral-600); transform:scale(1.045); z-index:2; }
.cw-offer-flag{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--cw-grad-coral);
  color:#fff; font-weight:800; font-size:.76rem; padding:7px 18px; border-radius:var(--cw-r-pill);
  box-shadow:var(--cw-shadow-coral); white-space:nowrap;
}
.cw-offer img{ max-height:190px; margin:6px auto 18px; }
.cw-offer-price{ font-family:var(--cw-font-head); font-size:2.05rem; color:var(--cw-teal-900); font-weight:800; }
.cw-offer-price small{ font-size:1rem; color:var(--cw-ink-soft); font-weight:500; }
.cw-offer-strike{ text-decoration:line-through; color:#a9b6b0; font-size:.94rem; }
.cw-offer ul{ list-style:none; padding:0; margin:16px 0; text-align:left; }
.cw-offer ul li{ padding:6px 0 6px 26px; position:relative; font-size:.92rem; }
.cw-offer ul li::before{ content:"✓"; position:absolute; left:0; color:var(--cw-success); font-weight:800; }

/* ---------- Review cards ---------- */
.cw-review{ background:var(--cw-paper); border:1px solid var(--cw-line); border-radius:var(--cw-r-md); padding:26px; box-shadow:var(--cw-shadow-sm); height:100%; }
.cw-review-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.cw-review-top img{ width:52px;height:52px;border-radius:50%; object-fit:cover; }
.cw-review-name{ font-weight:800; color:var(--cw-teal-900); font-family:var(--cw-font-head); }
.cw-review-meta{ font-size:.76rem; color:var(--cw-ink-soft); }
.cw-verified{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:800;
  color:var(--cw-success); background:#e5f6ec; padding:4px 10px; border-radius:var(--cw-r-pill); margin-top:8px;
}

/* ---------- FAQ ---------- */
.cw-faq-item{ border:1px solid var(--cw-line); border-radius:var(--cw-r-md); margin-bottom:12px; overflow:hidden; background:var(--cw-paper); }
.cw-faq-btn{
  width:100%; text-align:left; background:var(--cw-paper); border:0; padding:20px 22px; font-weight:800;
  color:var(--cw-teal-900); display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer;
  font-size:1rem; font-family:var(--cw-font-head);
}
.cw-faq-btn .cw-plus{ transition:transform .25s var(--cw-ease); color:var(--cw-coral-600); font-size:1.3rem; flex:none; }
.cw-faq-btn[aria-expanded="true"] .cw-plus{ transform:rotate(45deg); }
.cw-faq-panel{ max-height:0; overflow:hidden; transition:max-height .3s var(--cw-ease); }
.cw-faq-panel-inner{ padding:0 22px 20px; }

/* ---------- Breadcrumb ---------- */
.cw-breadcrumb{ background:var(--cw-mint-50); border-bottom:1px solid var(--cw-line); padding:14px 0; font-size:.86rem; }
.cw-breadcrumb a{ color:var(--cw-ink-soft); font-weight:700; }
.cw-breadcrumb span{ color:var(--cw-teal-800); font-weight:700; }
.cw-breadcrumb .sep{ margin:0 8px; color:#b9c8c0; }

/* ---------- EEAT ---------- */
.cw-author{ display:flex; gap:18px; align-items:flex-start; background:var(--cw-mint-50); border:1px solid var(--cw-line); border-radius:var(--cw-r-md); padding:22px; }
.cw-author img{ width:62px;height:62px;border-radius:50%; flex:none; object-fit:cover; }
.cw-author h4{ margin:0 0 2px; font-family:var(--cw-font-head); font-weight:800; color:var(--cw-teal-900); font-size:1rem; }
.cw-author .role{ font-size:.8rem; color:var(--cw-coral-700); font-weight:700; margin-bottom:8px; }
.cw-author p{ font-size:.88rem; margin-bottom:0; }

.cw-meta-strip{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:.82rem; color:var(--cw-ink-soft);
  border-top:1px solid var(--cw-line); border-bottom:1px solid var(--cw-line); padding:14px 0; margin:22px 0 34px;
}
.cw-meta-strip b{ color:var(--cw-teal-900); }
.cw-disclaimer{ background:#fff4ea; border:1px solid #f3d9bd; border-left:4px solid var(--cw-warn); border-radius:var(--cw-r-sm); padding:18px 20px; font-size:.86rem; }
.cw-factcheck{ display:inline-flex; align-items:center; gap:8px; background:#e5f6ec; color:var(--cw-success); font-weight:800; font-size:.78rem; padding:6px 14px; border-radius:var(--cw-r-pill); }

/* ---------- Ingredient chips ---------- */
.cw-ing{ display:flex; gap:16px; background:var(--cw-paper); border:1px solid var(--cw-line); border-radius:var(--cw-r-md); padding:22px; height:100%; box-shadow:var(--cw-shadow-sm); }
.cw-ing-badge{ width:50px;height:50px;border-radius:50% 50% 50% 10px; background:var(--cw-grad-coral); color:#fff; font-weight:800; display:flex;align-items:center;justify-content:center; flex:none; font-family:var(--cw-font-head); font-size:1.02rem;}
.cw-ing h3{ font-size:1.02rem; margin-bottom:4px; }
.cw-ing p{ font-size:.92rem; margin-bottom:0; }

/* ---------- Table ---------- */
.cw-table-wrap{ overflow-x:auto; border-radius:var(--cw-r-md); border:1px solid var(--cw-line); }
table.cw-table{ width:100%; border-collapse:collapse; background:var(--cw-paper); min-width:560px; }
table.cw-table th{ background:var(--cw-teal-900); color:#fff; padding:14px 16px; text-align:left; font-size:.85rem; font-family:var(--cw-font-head); }
table.cw-table td{ padding:13px 16px; border-top:1px solid var(--cw-line); font-size:.92rem; color:var(--cw-ink-soft); }
table.cw-table tr:nth-child(even) td{ background:var(--cw-mint-50); }

/* ---------- Blog cards ---------- */
.cw-blog-card{ background:var(--cw-paper); border:1px solid var(--cw-line); border-radius:var(--cw-r-md); overflow:hidden; box-shadow:var(--cw-shadow-sm); height:100%; display:flex; flex-direction:column; }
.cw-blog-card .body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.cw-blog-card .tag{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cw-coral-700); margin-bottom:8px; }
.cw-blog-card h3{ font-size:1.06rem; margin-bottom:8px; }
.cw-blog-card p{ font-size:.9rem; flex:1; }
.cw-blog-card .meta{ font-size:.78rem; color:#93a29b; margin-top:12px; }
.cw-blog-filter{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.cw-blog-filter span{ background:var(--cw-mint-100); color:var(--cw-teal-800); font-weight:700; font-size:.8rem; padding:8px 16px; border-radius:var(--cw-r-pill); }

/* ---------- CTA band ---------- */
.cw-cta-band{ background:var(--cw-grad-coral); border-radius:var(--cw-r-lg); padding:52px 40px; text-align:center; color:#fff; box-shadow:var(--cw-shadow-coral); }
.cw-cta-band h2{ color:#fff; }
.cw-cta-band p{ color:rgba(255,255,255,.9); }

/* ---------- Guarantee ---------- */
.cw-guarantee{ display:flex; align-items:center; gap:22px; background:var(--cw-paper); border:1px solid var(--cw-line); border-radius:var(--cw-r-md); padding:24px; box-shadow:var(--cw-shadow-sm); }
.cw-guarantee img{ width:80px; flex:none; }

/* ---------- Footer ---------- */
.cw-footer{ background:var(--cw-teal-900); color:rgba(255,255,255,.72); padding:60px 0 0; margin-top:20px; }
.cw-footer h5{ color:#fff; font-family:var(--cw-font-head); font-weight:800; font-size:.88rem; letter-spacing:.03em; text-transform:uppercase; margin-bottom:18px; }
.cw-footer a{ color:rgba(255,255,255,.68); font-size:.92rem; }
.cw-footer a:hover{ color:var(--cw-mint-200); }
.cw-footer ul{ list-style:none; padding:0; margin:0; }
.cw-footer li{ margin-bottom:11px; }
.cw-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding:22px 0; font-size:.8rem; text-align:center; color:rgba(255,255,255,.55); padding-bottom:calc(84px + var(--safe-bottom)); }
.cw-footer-disclaimer{ font-size:.78rem; color:rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.1); padding-top:24px; margin-top:12px; line-height:1.7; }
.cw-social{ display:flex; gap:10px; margin-top:16px; }
.cw-social a{ width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; }
.cw-social a:hover{ background:var(--cw-grad-coral); color:#fff; }

/* ---------- Mobile bottom tab bar (distinct from build 1's sticky CTA) ---------- */
.cw-tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:1200; background:#fff;
  border-top:1px solid var(--cw-line); box-shadow:0 -8px 24px rgba(10,43,44,.12);
  padding-bottom:var(--safe-bottom);
}
.cw-tabbar-row{ display:flex; align-items:stretch; }
.cw-tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:10px 4px 8px; color:var(--cw-ink-soft); font-size:.68rem; font-weight:700; }
.cw-tabbar a.active{ color:var(--cw-coral-700); }
.cw-tabbar a.cta{ color:#fff; }
.cw-tabbar-icon{ font-size:1.15rem; }

.cw-top-btn{
  position:fixed; right:18px; bottom:96px; z-index:1150; width:46px;height:46px;border-radius:50%;
  background:var(--cw-teal-900); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--cw-shadow-md); opacity:0; pointer-events:none; transition:opacity .25s var(--cw-ease);
}
.cw-top-btn.show{ opacity:1; pointer-events:auto; }