/* Bento labs — homepage bento redesign options (3x3 + 4x3).
   Source: design_handoff_bento_homepage 2026-07-20. Section bg = site cream
   (--cream #f8f4ec) per Lester, NOT the mock's #faf8f4 and NOT the green #EEF4EE.
   Poppins in the mock maps to omnes-pro (500 max). Used ONLY by the two
   labs-home-bento-* pages. */
.bl-section{background-color:#f8f4ec;padding:72px 0 56px;font-family:"omnes-pro",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
.bl-section .container{max-width:1328px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px}
/* section header */
.bl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.bl-eyebrow{display:block;color:#B0500F;font-size:14px;line-height:17px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:10px}
.bl-h1{color:#2D3A2E;font-size:48px;line-height:58px;font-weight:300;margin:0;letter-spacing:-0.02em}
.bl-shopall{color:#1f6d5a;font-size:15px;font-weight:500;text-decoration:none;border-bottom:2px solid #1f6d5a;padding-bottom:2px;white-space:nowrap}
.bl-shopall:hover{color:#1f6d5a;text-decoration:none;opacity:.8}
/* grid frames */
.bl-grid{display:grid;gap:16px}
.bl-grid-3{grid-template-columns:repeat(3,1fr);grid-template-rows:272px 272px 252px}
.bl-grid-4{grid-template-columns:repeat(4,1fr);grid-template-rows:272px 272px 252px}
/* tiles */
.bl-tile{position:relative;display:block;border-radius:20px;overflow:hidden;text-decoration:none}
.bl-tile:hover{text-decoration:none}
.bl-tile:focus-visible{outline:3px solid #1f6d5a;outline-offset:2px}
.bl-tile *{pointer-events:none}
.bl-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bl-tile:hover .bl-cover{transform:scale(1.04)}
/* hero (Dream Wild cat) */
.bl-hero{grid-column:1/3;grid-row:1/3}
.bl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,42,34,.92) 0%,rgba(18,42,34,.55) 52%,rgba(18,42,34,.08) 100%)}
.bl-hero-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;align-items:flex-start;padding:40px 0 0 36px;max-width:44%}
.bl-grid-4 .bl-hero-copy{max-width:54%;padding-left:40px}
.bl-badge{background:#DF8DA7;color:#0E241E;font-size:12px;line-height:15px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;padding:6px 14px}
.bl-hero-title{color:#fff;font-size:32px;line-height:38px;font-weight:400;letter-spacing:0.08em;margin:0}
.bl-grid-4 .bl-hero-title{font-size:28px;line-height:34px}
.bl-hero-body{color:#fff;opacity:.85;font-size:18px;line-height:1.45;font-weight:400;margin:0}
.bl-pill{display:inline-block;background:#DF8DA7;color:#0E241E;font-size:13px;line-height:17px;font-weight:500;padding:5px 12px;border-radius:999px}
.bl-pills{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bl-pills .bl-pill-dark{min-width:88px;text-align:center;padding:4px 10px}
.bl-perf .bl-pill-dark{background:#E7B92C;color:#0E241E}
.bl-pill-dark{display:inline-block;background:#1f4438;color:#fff;font-size:12px;font-weight:500;padding:4px 11px;border-radius:999px}
/* product tiles (bg color + inset bag image + top-left text) */
.bl-prod{padding:24px 26px}
.bl-prod-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bl-tile-eyebrow{font-size:11px;line-height:14px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase}
.bl-tile-title{color:#1f3a30;font-size:24px;line-height:28px;font-weight:500;margin:0}
.bl-prod-img{position:absolute;right:18px;bottom:0;height:62%;border-radius:14px;box-shadow:0 8px 20px rgba(31,58,48,.18);transition:transform .6s ease}
.bl-tile:hover .bl-prod-img{transform:scale(1.05)}
.bl-fd{background:#efe7da}
.bl-fd .bl-pill-dark{background:#DCE9E6;color:#0E241E}
.bl-fd-tag{position:absolute;left:26px;bottom:20px;z-index:2;color:#fff;font-size:11px;line-height:14px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;opacity:.9}
.bl-fd .bl-tile-eyebrow{color:#8a7a5c}
.bl-perf{background:#e2eae2}
.bl-perf .bl-tile-eyebrow{color:#5c7a6b}
.bl-supp{background:#f3ede2}
.bl-supp .bl-tile-eyebrow{color:#8a7a5c}
.bl-supp .bl-prod-img{height:72%;bottom:-4%}
.bl-tile:hover .bl-supp-jar,.bl-supp:hover .bl-prod-img{transform:scale(1.06)}
/* scene tiles: full-bleed advertising scenes with scrim + light text */
.bl-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,42,34,.72) 0%,rgba(18,42,34,.32) 48%,rgba(18,42,34,0) 78%)}
.bl-supp.bl-scene::after{background:linear-gradient(90deg,rgba(26,32,20,.85) 0%,rgba(26,32,20,.42) 52%,rgba(26,32,20,0) 80%)}
.bl-grid-3 .bl-perf .bl-cover{object-position:center 58%}
.bl-scene .bl-prod-copy{position:absolute;left:26px;top:24px;z-index:2;max-width:62%}
.bl-scene .bl-tile-eyebrow,.bl-fd.bl-scene .bl-tile-eyebrow,.bl-perf.bl-scene .bl-tile-eyebrow,.bl-supp.bl-scene .bl-tile-eyebrow{color:#fff;opacity:.85}
.bl-scene .bl-tile-title{color:#fff}
.bl-grid-4 .bl-perf.bl-scene{padding:0}
.bl-grid-4 .bl-perf.bl-scene::after{background:linear-gradient(180deg,rgba(18,42,34,.72) 0%,rgba(18,42,34,.28) 40%,rgba(18,42,34,0) 70%)}
.bl-grid-4 .bl-fd.bl-scene .bl-prod-copy,.bl-grid-4 .bl-supp.bl-scene .bl-prod-copy{position:absolute;left:26px;top:50%;transform:translateY(-50%);max-width:52%}
/* lifestyle tiles (cover photo + bottom gradient + bottom-left text) */
.bl-whelp .bl-cover{object-position:center 88%}
.bl-life::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,42,34,0) 30%,rgba(18,42,34,.82) 100%)}
.bl-tile:hover .bl-life-cover,.bl-life:hover .bl-cover{transform:scale(1.05)}
.bl-life-copy{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:4px}
.bl-life-copy .bl-tile-eyebrow{color:#fff;opacity:.8}
.bl-life-title{color:#fff;font-size:24px;line-height:28px;font-weight:500;margin:0}
.bl-life-sub{color:#fff;opacity:.85;font-size:15px;line-height:20px;font-weight:400;margin:0}
/* ---- Option 1 (3x3) placements ---- */
.bl-grid-3 .bl-fd{grid-column:3;grid-row:1}
.bl-grid-3 .bl-perf{grid-column:3;grid-row:2}
.bl-grid-3 .bl-whelp{grid-column:1;grid-row:3}
.bl-grid-3 .bl-kbx{grid-column:2;grid-row:3}
.bl-grid-3 .bl-supp{grid-column:3;grid-row:3}
/* ---- Option 2 (4x3) placements + variants ---- */
.bl-grid-4 .bl-fd{grid-column:3/5;grid-row:1}
.bl-grid-4 .bl-fd .bl-prod-copy{position:absolute;left:26px;top:50%;transform:translateY(-50%);max-width:52%}

.bl-grid-4 .bl-fd .bl-prod-img{height:68%;bottom:16%;right:6%}
.bl-grid-4 .bl-whelp{grid-column:3;grid-row:2}
.bl-grid-4 .bl-perf{grid-column:4;grid-row:2/4;padding:24px 22px}
.bl-grid-4 .bl-perf .bl-prod-copy{gap:7px}

.bl-grid-4 .bl-perf .bl-prod-img{height:52%;left:50%;right:auto;transform:translateX(-50%)}
.bl-grid-4 .bl-perf:hover .bl-prod-img{transform:translateX(-50%) scale(1.05)}
.bl-grid-4 .bl-supp{grid-column:1/3;grid-row:3}
.bl-grid-4 .bl-supp .bl-prod-copy{position:absolute;left:26px;top:50%;transform:translateY(-50%);max-width:56%}

.bl-grid-4 .bl-supp .bl-prod-img{height:80%;right:6%;bottom:-6%}
.bl-grid-4 .bl-kbx{grid-column:3;grid-row:3}
/* ---- Mobile / stacked ---- */
@media (max-width:1023px){
  .bl-section{padding:32px 0}
  .bl-section .container{padding-left:16px;padding-right:16px}
  .bl-head{display:block;margin-bottom:20px}
  .bl-eyebrow{font-size:11px;letter-spacing:2px}
  .bl-h1{font-size:28px;line-height:32px}
  .bl-shopall{display:inline-block;margin-top:10px}
  .bl-grid-3,.bl-grid-4{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto;gap:12px}
  .bl-tile{border-radius:18px;height:210px}
  .bl-hero{grid-column:1/3;grid-row:auto;height:430px}
  .bl-supp{order:9}
  .bl-hero::after{background:linear-gradient(180deg,rgba(18,42,34,.9) 0%,rgba(18,42,34,.45) 55%,rgba(18,42,34,.05) 100%)}
  .bl-hero-copy{justify-content:flex-start;padding:22px 18px 0 18px;gap:10px;max-width:100%}
  .bl-grid-4 .bl-hero-copy{max-width:100%;padding-left:18px}
  .bl-hero-title{font-size:24px;line-height:29px}

  .bl-hero-body{font-size:15px}
  .bl-pill{font-size:12px}
  .bl-prod{padding:14px 16px}
  .bl-tile-title,.bl-life-title{font-size:18px;line-height:22px}

  .bl-prod-img{height:52%;right:10px;border-radius:12px;box-shadow:0 6px 16px rgba(31,58,48,.18)}
  .bl-grid-4 .bl-fd,.bl-grid-4 .bl-perf,.bl-grid-4 .bl-whelp,.bl-grid-4 .bl-kbx{grid-column:auto;grid-row:auto;padding:14px 16px}
  .bl-grid-3 .bl-fd,.bl-grid-3 .bl-perf,.bl-grid-3 .bl-whelp,.bl-grid-3 .bl-kbx{grid-column:auto;grid-row:auto}
  .bl-grid-4 .bl-fd .bl-prod-copy,.bl-grid-4 .bl-supp .bl-prod-copy{position:static;transform:none;max-width:100%}
  .bl-grid-4 .bl-fd .bl-prod-img{height:52%;bottom:0;right:10px}
  .bl-grid-4 .bl-perf .bl-prod-img{left:auto;right:10px;transform:none}
  .bl-grid-4 .bl-perf:hover .bl-prod-img{transform:scale(1.05)}
  .bl-scene .bl-prod-copy,.bl-grid-4 .bl-fd.bl-scene .bl-prod-copy{position:absolute;left:14px;top:14px;transform:none;max-width:80%}
  .bl-life-copy{left:14px;right:14px;bottom:12px;gap:2px}
  .bl-fd-tag{left:14px;bottom:12px;font-size:10px}
  .bl-pill,.bl-pill-dark{font-size:11px;line-height:14px;padding:3px 9px}
  .bl-pills{gap:4px}
  .bl-pills .bl-pill-dark{min-width:0}
  .bl-tile-eyebrow{font-size:10px;line-height:13px}
  .bl-life-sub{font-size:12px;line-height:16px}
  .bl-supp .bl-prod-copy{max-width:52%}
  .bl-grid-3 .bl-supp .bl-tile-title,.bl-grid-4 .bl-supp .bl-tile-title{font-size:16px;line-height:20px}
  .bl-life::after{background:linear-gradient(180deg,rgba(18,42,34,0) 8%,rgba(18,42,34,.55) 45%,rgba(18,42,34,.88) 100%)}

  .bl-life-sub{font-size:12px}
  /* supplements strip full width */
  .bl-grid-3 .bl-supp,.bl-grid-4 .bl-supp{grid-column:1/3;grid-row:auto;height:130px !important}
  .bl-supp .bl-prod-copy,.bl-supp.bl-scene .bl-prod-copy{position:absolute;left:16px;top:50%;transform:translateY(-50%);max-width:60%}
  .bl-supp .bl-prod-img,.bl-grid-4 .bl-supp .bl-prod-img{height:82%;bottom:auto;top:50%;transform:translateY(-50%);right:12px}
  .bl-supp:hover .bl-prod-img{transform:translateY(-50%) scale(1.05)}
}