/* CocoDaily compact layer.
   Loaded after app.css. Tightens spacing, type scale and media heights across
   public and customer pages without changing markup hooks. `body` prefixes give
   these rules enough specificity to win over the earlier layered app.css blocks. */
:root{
  --font-size-display:clamp(2.4rem,6vw,4.6rem);
  --font-size-heading:clamp(1.75rem,4vw,3rem);
  --font-size-subheading:clamp(1.25rem,3vw,1.75rem);
  --control-min-height:2.75rem;
  --radius-card:1.1rem;
  --radius-panel:clamp(1.1rem,2vw,1.6rem);
  --page-gutter:1rem;
}

/* ---------- Header and footer ---------- */
body .topbar:not(.landing-topbar){position:sticky;top:0;z-index:40;padding-top:8px;padding-bottom:8px;min-height:0;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
body .landing-topbar{padding-top:8px;padding-bottom:8px}
body .topbar .wordmark{font-size:clamp(1.45rem,2.2vw,1.85rem)}
body .topbar .edition{font-size:8px;line-height:1.25}
body .header-nav{gap:16px;font-size:13px}
body .header-nav .landing-nav-cta{padding:8px 14px}
body .footer{padding-top:22px;padding-bottom:22px;margin-top:32px;gap:18px}
body .footer .wordmark{font-size:1.5rem}
body .footer-links{gap:10px 16px}

/* ---------- Shared type, buttons, forms ---------- */
body .btn{min-height:42px;padding:9px 18px;font-size:14px}
body input:not([type=checkbox]):not([type=radio]),body select,body textarea{min-height:42px}
body .eyebrow{margin-bottom:6px}
body .notice{padding:10px 14px}

/* ---------- Landing (desktop) ---------- */
body .landing-page{gap:36px}
body .landing-conversion{gap:36px}
body .conversion-hero--background,body .conversion-hero__overlay{min-height:520px}
body .conversion-hero__content{padding-top:28px;padding-bottom:28px}
body .landing-hero h1{font-size:clamp(2.6rem,4.4vw,4.4rem);line-height:.98}
body .landing-hero img{max-height:540px;object-fit:cover}
body .landing-section{padding:24px}
body .landing-section h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.02;margin-bottom:10px}
body .landing-section img{max-height:380px;object-fit:cover}
body .product-confidence__visual,body .doorstep-section__visual,body .lifestyle-conversion__visual{min-height:320px;max-height:400px;height:auto;overflow:hidden}
body .product-confidence__visual img,body .doorstep-section__visual img,body .lifestyle-conversion__visual img{width:100%;height:100%;max-height:400px;object-fit:cover}
body .routine-cards{gap:12px}
body .routine-card{padding:16px}
body .landing-heading h2{margin-bottom:8px}
body .conversion-final{padding:30px}
body .conversion-final h2{font-size:clamp(1.8rem,3.2vw,2.8rem)}
body .conversion-proof{padding-top:10px;padding-bottom:10px}

/* ---------- Product cards and storefront ---------- */
body .store-grid,body .landing-product-rail{gap:12px}
body .store-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
body .store-card{border-radius:16px}
body .store-card__media{height:190px}
body .store-card__body{padding:12px 14px}
body .store-card__footer{padding:10px 14px;gap:8px}

/* ---------- Hubs (recipes / health / nutrition / blog) ---------- */
body .seo-page,body .seo-hub{padding-top:18px;padding-bottom:12px}
body .seo-hub__header--visual{margin-bottom:20px;gap:18px;align-items:center}
body .seo-hub__header h1,body .seo-hero__copy h1{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1}
body .seo-hub__visual{aspect-ratio:21/9;border-radius:18px}
body .seo-hub .seo-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
body .seo-hub .seo-card{display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:#fff;border:1px solid rgba(18,63,49,.12)}
body .seo-hub .seo-card>a{display:block;aspect-ratio:16/10;overflow:hidden}
body .seo-hub .seo-card img{width:100%;height:100%;object-fit:cover;display:block}
body .seo-hub .seo-card>div{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
body .seo-hub .seo-card .eyebrow{margin:0;font-size:9.5px}
body .seo-hub .seo-card h2{margin:0;font-size:15.5px;line-height:1.25;letter-spacing:-.01em}
body .seo-hub .seo-card h2 a{text-decoration:none;color:var(--color-ink)}
body .seo-hub .seo-card p:not(.eyebrow){margin:0;font-size:13px;line-height:1.45;color:var(--color-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body .seo-hub .seo-card__link{margin-top:auto;padding-top:4px;font-size:12.5px;font-weight:800;color:var(--color-brand-green)}

/* ---------- Articles and recipes ---------- */
body .public-container{padding-top:12px}
body .content-shell{padding-bottom:36px}
body .content-grid{gap:20px;grid-template-columns:minmax(0,1fr) 280px}
body .article-breadcrumbs{margin-bottom:10px}
body .article-hero-card{grid-template-columns:1.25fr .75fr;border-radius:18px}
body .article-hero-copy{padding:22px 24px 18px}
body .article-hero-copy h1{margin:12px 0 10px;font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.02;letter-spacing:-.04em}
body .article-dek{font-size:15.5px;line-height:1.5}
body .article-meta{margin-top:14px;padding-top:10px}
body .article-hero-media{min-height:0;max-height:300px}
body .article-intro{padding:16px 2px 4px}
body .article-intro p{font-size:16px;line-height:1.65}
body .article-body{margin-top:8px}
body .article-section{padding:20px 0;scroll-margin-top:80px}
body .article-section h2{font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:8px}
body .article-section p{font-size:15.5px;line-height:1.65}
body .article-richtext{font-size:16px;line-height:1.65}
body .article-richtext h2{margin:28px 0 10px;font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.08;letter-spacing:-.03em}
body .article-richtext h3{margin:20px 0 8px;font-size:1.2rem}
body .article-richtext p{margin-bottom:14px}
body .article-richtext ul,body .article-richtext ol{margin-bottom:16px}
body .article-richtext li{margin:5px 0}
body .article-richtext table{margin-bottom:18px;font-size:14px}
body .article-richtext th,body .article-richtext td{padding:7px 12px}
body .recipe-block{gap:16px}
body .recipe-image{max-height:320px;overflow:hidden;border-radius:16px}
body .recipe-image img{max-height:320px;object-fit:cover}
body .recipe-card{padding:18px}
body .article-faq-list details{padding:10px 0}
body .article-bottom-cta{margin-top:22px;padding:22px}
body .article-bottom-cta h2{font-size:clamp(1.4rem,2.4vw,2rem)}
body .sidebar-card{padding:14px 16px;border-radius:16px}
body .article-sidebar{gap:12px;top:78px}
body .related-item img{width:60px;height:60px}
body .serviceability-checker{padding:18px;margin-top:16px;gap:14px}
body .serviceability-checker h2{font-size:clamp(1.3rem,2.2vw,1.8rem)}

/* ---------- Customer app ---------- */
body .page-heading{margin-bottom:14px;gap:10px}
body .page-heading h1{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1}
body .card{padding:18px;border-radius:16px}
body .booking-grid{gap:16px}
body .form-stack{gap:12px}
body .choice-grid{gap:8px}
body .choice-body{padding:10px 12px}
body .booking-aside{padding:20px}
body .booking-aside h2{font-size:clamp(1.5rem,2.6vw,2.2rem)}

/* ---------- Tablet ---------- */
@media(max-width:1000px){
  body .content-grid{grid-template-columns:1fr}
  body .article-sidebar{position:static}
}

/* ---------- Mobile ---------- */
@media(max-width:700px){
  body .topbar{padding:8px 12px}
  body .topbar .wordmark{font-size:1.45rem}
  body .container,body .public-container{padding-left:12px;padding-right:12px}
  body .landing-page,body .landing-conversion{gap:24px}
  body .landing-section{padding:16px}
  body .landing-section h2{font-size:clamp(1.5rem,7vw,2rem)}
  body .landing-section img{max-height:240px}
  body .conversion-final{padding:20px}

  body .store-card__media{height:140px}
  body .store-card__body{padding:10px}
  body .store-card__footer{padding:8px 10px}

  body .seo-page,body .seo-hub{padding:10px 0 8px}
  body .seo-hub__header h1,body .seo-hero__copy h1{font-size:clamp(1.75rem,8vw,2.4rem)}
  body .seo-hub__visual{aspect-ratio:16/7}
  body .seo-hub .seo-card-grid{grid-template-columns:1fr;gap:8px}
  body .seo-hub .seo-card{flex-direction:row;min-height:0}
  body .seo-hub .seo-card>a{flex:0 0 104px;aspect-ratio:auto;height:auto;min-height:104px}
  body .seo-hub .seo-card>div{padding:8px 10px;min-width:0}
  body .seo-hub .seo-card h2{font-size:14.5px}
  body .seo-hub .seo-card p:not(.eyebrow){-webkit-line-clamp:2;font-size:12.5px}
  body .seo-hub .seo-card__link{display:none}

  body .content-shell{padding:0 0 24px}
  body .article-hero-card{grid-template-columns:1fr}
  /* app.css pins these with !important on mobile, so the compact values must too. */
  body .article-hero-media{height:180px!important;min-height:180px!important;max-height:180px!important}
  body .article-hero-copy{padding:16px}
  body .article-hero-copy h1{font-size:clamp(1.55rem,7vw,2.05rem)!important;margin:10px 0 8px!important;line-height:1.06!important;letter-spacing:-.03em!important}
  body .recipe-image{height:200px!important;min-height:200px!important}
  body .article-dek{font-size:15px}
  body .article-section{padding:16px 0}
  body .article-section h2,body .article-richtext h2{font-size:clamp(1.3rem,6vw,1.6rem)}
  body .article-richtext h2{margin-top:22px}
  body .recipe-block{grid-template-columns:1fr}
  body .recipe-image,body .recipe-image img{max-height:200px}
  body .article-bottom-cta{padding:18px}
  body .serviceability-checker{padding:14px}

  body .page-heading h1{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  body .card{padding:14px}
  body .footer{padding-top:16px;padding-bottom:84px}
}

/* =====================================================================
   Storefront: product listing and product detail
   ===================================================================== */
body .storefront--compact{max-width:1180px;margin:0 auto}
body .storefront--compact .storefront-hero{max-width:none;min-height:0;display:block;padding:10px 0 12px;border-radius:0;background:none;box-shadow:none;overflow:visible;color:var(--color-ink)}
body .storefront--compact .storefront-hero{min-height:0 !important;background-image:none !important;background-color:transparent !important;border:0 !important;box-shadow:none !important;padding-left:0 !important;padding-right:0 !important}
body .storefront--compact .storefront-hero::before,body .storefront--compact .storefront-hero::after{content:none;display:none}
body .storefront--compact .storefront-hero h1{margin:4px 0 6px;font-size:clamp(1.55rem,2.8vw,2.3rem);line-height:1.08;letter-spacing:-.035em}
body .storefront--compact .storefront-hero>p{margin:0;max-width:70ch;color:var(--color-muted);font-size:14.5px}
body .storefront--compact .storefront-categories{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
body .storefront--compact .storefront-categories a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid rgba(18,63,49,.18);border-radius:999px;background:#fff;color:var(--color-brand-green);font-size:13px;font-weight:700;text-decoration:none}

/* Trust list, shared by the listing strip and the buy box */
body .trust-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body .trust-list li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.35;color:var(--color-muted)}
body .trust-list strong{display:block;color:var(--color-ink);font-size:13px}
body .trust-list a{color:var(--color-brand-green);font-weight:700}
body .trust-icon{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--color-brand-green)}
body .trust-strip{margin:4px 0 6px;padding:12px 14px;border:1px solid rgba(18,63,49,.12);border-radius:14px;background:#fff}
body .trust-list--strip{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 16px}

/* Family groups */
body .storefront--compact .store-group{margin-top:22px}
body .storefront--compact .store-group__heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:0}
body .storefront--compact .store-group__heading h2{margin:0;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.02em}
body .storefront--compact .store-group__heading p{margin:0;color:var(--color-muted);font-size:13px}

/* Product grid and cards */
body .storefront--compact .store-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body .storefront--compact .store-card{display:flex;flex-direction:column;border-radius:14px;background:#fff}
body .storefront--compact .store-card__media{height:auto;aspect-ratio:1/1;max-height:230px;width:100%}
body .storefront--compact .store-card__media img{width:100%;height:100%;object-fit:cover}
body .storefront--compact .store-model{top:8px;left:8px;padding:3px 8px;font-size:9.5px}
body .storefront--compact .store-card__body{display:flex;flex-direction:column;justify-content:flex-start;flex:1;gap:6px;padding:10px 12px 12px}
body .storefront--compact .store-card__body>*{margin-top:0;margin-bottom:0}
body .storefront--compact .store-card__body>.store-card__footer{margin-top:auto;padding-top:4px}
body .storefront--compact .store-card__body h3{margin:0;font-size:15px;line-height:1.25}
body .storefront--compact .store-card__body h3 a{color:var(--color-ink);text-decoration:none}
body .storefront--compact .store-size{display:inline;color:var(--color-muted);font-weight:700;font-size:13px}
body .storefront--compact .store-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0}
body .storefront--compact .store-price{font-size:17px;font-weight:800;color:var(--color-ink)}
body .storefront--compact .store-price--pending{font-size:13px;font-weight:700;color:var(--color-muted)}
body .storefront--compact .store-unit-price{font-size:12px;color:var(--color-muted)}
body .storefront--compact .store-card__footer{margin-top:auto;padding:0;border:0;display:block;background:none}
body .storefront--compact .store-cta{display:flex;width:100%;justify-content:center;min-height:40px;padding:8px 12px;font-size:13.5px;border-radius:10px}
body .storefront--compact .store-cta--whatsapp{background:#fff;color:var(--color-brand-green);border:1.5px solid var(--color-brand-green)}
body .store-policies{margin:18px 0 0;color:var(--color-muted)}
body .store-policies a{color:var(--color-brand-green);font-weight:700}

/* Product detail */
body .product-detail{max-width:1180px;margin:0 auto;padding-bottom:28px}
body .product-detail__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px;align-items:start}
body .product-detail__media{position:sticky;top:76px;height:auto;aspect-ratio:1/1;max-height:520px;border-radius:18px}
body .buy-box{padding:20px;border:1px solid rgba(18,63,49,.12);border-radius:18px;background:#fff}
body .buy-box .store-model{display:inline-flex;margin:0 0 8px;padding:3px 10px;font-size:10px}
body .buy-box h1{margin:0 0 6px;font-size:clamp(1.55rem,2.5vw,2.2rem);line-height:1.08;letter-spacing:-.03em}
body .buy-box h1 .product-detail__size{display:inline;margin:0;padding:0;border:0;background:none;color:var(--color-muted);font-size:.7em;font-weight:700;letter-spacing:0}
body .buy-box__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 6px}
body .buy-box .product-detail__price{margin:0;font-size:1.9rem;font-weight:900;line-height:1;color:var(--color-ink)}
body .buy-box__unit{font-size:13px;color:var(--color-muted)}
body .buy-box .product-detail__lead{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--color-muted)}
body .buy-box .product-subscription-form{display:grid;gap:12px;max-width:none;margin:0;padding:14px 0 0;border:0;border-top:1px solid rgba(18,63,49,.12);border-radius:0;background:none;box-shadow:none}
body .buy-box__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
body .buy-box__row label{font-size:14px;font-weight:700;color:var(--color-ink)}
body .buy-box .quantity-stepper button{width:40px;height:40px}
body .buy-box .quantity-stepper input{width:52px;min-height:40px;text-align:center}
body .buy-box .subscription-days-control{display:flex;flex:0 0 auto;width:auto;align-items:center;gap:6px}
body .buy-box .subscription-days-control input{flex:0 0 84px;width:84px;min-height:40px;text-align:center}
body .buy-box__days{display:grid;gap:8px}
body .buy-box .subscription-day-presets{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px;margin:0}
body .buy-box .subscription-day-presets button{min-height:40px;padding:0 10px;border:1px solid rgba(18,63,49,.22);border-radius:999px;background:#fff;color:var(--color-brand-green);font-size:13px;font-weight:700;cursor:pointer}
body .buy-box .subscription-day-presets button[aria-pressed=true]{background:var(--color-brand-green);border-color:var(--color-brand-green);color:#fff}
body .buy-box .field-note{margin:0;font-size:12px;color:var(--color-muted)}
body .buy-box .product-checkout{display:flex;width:100%;justify-content:center;min-height:48px;font-size:15px}
body .buy-box__micro{margin:-4px 0 0;font-size:12px;line-height:1.4;color:var(--color-muted);text-align:center}
body .buy-box__trust{margin-top:16px;padding-top:14px;border-top:1px solid rgba(18,63,49,.12)}
body .buy-box__trust .trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
body .product-more{margin-top:22px}
body .product-more .product-detail__facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
body .product-more .product-detail__facts span{flex:1 1 140px;padding:10px 12px;border:1px solid rgba(18,63,49,.12);border-radius:12px;background:#fff;font-size:12px;color:var(--color-muted)}
body .product-more .product-detail__facts strong{display:block;color:var(--color-ink);font-size:14px}
body .product-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body .product-more__card{padding:14px 16px;border:1px solid rgba(18,63,49,.12);border-radius:14px;background:#fff;font-size:14px;line-height:1.5}
body .product-more__card h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:15px;letter-spacing:0}
body .product-more__card p{margin:0 0 8px;color:var(--color-muted)}
body .product-more__card a{color:var(--color-brand-green);font-weight:700}
body .product-more__links{margin:0;padding-left:18px}
body .product-more__links li{margin:4px 0}
body .buy-bar{display:none}

@media(max-width:1000px){
  body .storefront--compact .store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body .product-more__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  body .storefront--compact .storefront-hero h1{font-size:clamp(1.35rem,6vw,1.7rem)}
  body .storefront--compact .storefront-hero>p{font-size:13.5px}
  body .trust-strip{padding:10px 12px}
  body .trust-list--strip{display:flex;overflow-x:auto;gap:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body .trust-list--strip::-webkit-scrollbar{display:none}
  body .trust-list--strip li{flex:0 0 auto;max-width:190px}
  body .storefront--compact .store-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body .storefront--compact .store-card__media{max-height:170px}
  body .storefront--compact .store-card__body{padding:8px 10px 10px}
  body .storefront--compact .store-card__body h3{font-size:14px}
  body .storefront--compact .store-group__heading p{display:none}

  body .product-detail{padding-bottom:86px}
  body .product-detail__grid{grid-template-columns:1fr;gap:12px}
  body .product-detail__media{position:relative;top:auto;aspect-ratio:4/3;max-height:260px}
  body .buy-box{padding:14px;border-radius:14px}
  body .buy-box__trust .trust-list{grid-template-columns:1fr 1fr;gap:10px 12px}
  body .buy-box .subscription-day-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  body .buy-box .subscription-day-presets::-webkit-scrollbar{display:none}
  body .buy-box .subscription-day-presets button{flex:0 0 auto}
  body .product-more__grid{grid-template-columns:1fr}
  body .buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid rgba(18,63,49,.14);box-shadow:0 -8px 24px rgba(18,63,49,.08)}
  body .buy-bar__price{display:flex;flex-direction:column;line-height:1.15}
  body .buy-bar__price strong{font-size:18px;color:var(--color-ink)}
  body .buy-bar__price span{font-size:12px;color:var(--color-muted)}
  body .buy-bar .btn{min-height:46px;padding:0 18px;white-space:nowrap}
  body:has(.buy-bar) .whatsapp-float{bottom:84px}
  body:has(.buy-bar) .dock{display:none}
}

/* Mobile home category tiles: real product photos, plus a calendar for Plans. */
@media (max-width:700px){
  .mobile-app-cats a{min-height:88px;gap:5px;padding:6px 3px;text-align:center;line-height:1.12;font-size:10.5px}
  .mobile-app-cats span{width:52px;height:52px;border-radius:14px;background:#f3faee}
  .mobile-app-cats img{width:52px;height:52px;object-fit:contain;padding:3px}
}

/* Floating WhatsApp button: official mark, 12% from the bottom and 4% from the right on every customer page. */
body .whatsapp-float,
body.customer-mobile .whatsapp-float,
body:has(.buy-bar) .whatsapp-float{position:fixed;right:4vw;bottom:12vh!important;z-index:95;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 8px 22px rgba(0,0,0,.24),0 2px 6px rgba(0,0,0,.14)}
body .whatsapp-float img{width:32px;height:32px}

@media(max-width:700px){
  /* app.css forces white text on every card link on mobile; keep each CTA readable. */
  body .storefront--compact .store-card__footer a.store-cta{color:#fff!important;background:var(--color-brand-green,#123f31)!important;border:1.5px solid var(--color-brand-green,#123f31)!important;font-size:13px!important;min-height:40px!important}
  body .storefront--compact .store-card__footer a.store-cta--whatsapp{color:var(--color-brand-green,#123f31)!important;background:#fff!important}
  /* Leave room for the bottom navigation so the last cards and policy links stay reachable. */
  body.has-customer-dock #main{padding-bottom:calc(var(--customer-dock-space,76px) + 28px)}
  body .whatsapp-float{width:52px;height:52px}
  body .whatsapp-float img{width:30px;height:30px}
}

/* Official WhatsApp mark inside "Order on WhatsApp" buttons. */
body .btn .wa-icon{width:18px;height:18px;flex:0 0 18px;margin-right:2px;display:inline-block;vertical-align:middle}
body .btn:has(.wa-icon){gap:8px}