/* ==========================================================================
   DRINKS — a small hub holding Wellness Drinks and Hydration Tap.

   Both already had their own tiles in different groups (Hydration Tap in SHOP,
   Wellness Drinks in STORE), which meant the two things a person thinks of
   together sat apart. One tile now leads to both.

   Prefix is drk-.
   ========================================================================== */
#page-drinks{
  background:#ffffff !important;
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
}
#page-drinks .drk-wrap{ max-width:1080px; margin:0 auto; padding:0 clamp(18px,4vw,32px); }
#page-drinks .drk-wrap section, #page-drinks .drk-sec{ padding:0 !important; }
#page-drinks .drk-sec{ margin:0 0 clamp(40px,6vw,72px); min-width:0; }
#page-drinks .drk-body{ padding:clamp(22px,4vw,40px) 0 100px; }

#page-drinks .drk-backbar{
  max-width:1080px; margin:0 auto; padding:14px clamp(18px,4vw,32px) 0;
  display:flex; gap:10px; flex-wrap:wrap;
}
#page-drinks .drk-eb{
  font-size:.7rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; margin:0 0 12px;
  color:#8C4C40 !important; -webkit-text-fill-color:#8C4C40 !important;
}
#page-drinks .drk-h1{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:clamp(2rem,4.6vw,3rem) !important; font-weight:700 !important; line-height:1.1;
  margin:0 0 12px !important; color:#1F3054 !important; -webkit-text-fill-color:#1F3054 !important;
}
#page-drinks .drk-h2{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:clamp(1.3rem,2.6vw,1.7rem) !important; font-weight:700 !important;
  margin:0 !important; color:#1F3054 !important; -webkit-text-fill-color:#1F3054 !important;
}
#page-drinks .drk-lead{
  margin:0; font-size:1.02rem; line-height:1.75; max-width:58ch;
  color:#4A5670 !important; -webkit-text-fill-color:#4A5670 !important;
}
#page-drinks .drk-note{ margin:16px 0 0; font-size:.82rem; line-height:1.7;
  color:#5D6981 !important; -webkit-text-fill-color:#5D6981 !important; }

/* the two destinations, as large picture cards */
#page-drinks .drk-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,28px); }
#page-drinks .drk-c{
  display:flex; flex-direction:column; width:100%; text-align:left; cursor:pointer; font:inherit;
  background:#fff !important; border:1px solid #EAE3DB !important; border-radius:26px; overflow:hidden;
  box-shadow:0 4px 20px rgba(31,48,84,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
#page-drinks .drk-c:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(31,48,84,.13); }
#page-drinks .drk-c:focus-visible{ outline:3px solid #CF9E3F; outline-offset:3px; }
#page-drinks .drk-img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#EDF2F8; }
#page-drinks .drk-c-b{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
#page-drinks .drk-c-d{ font-size:.9rem; line-height:1.65;
  color:#57647E !important; -webkit-text-fill-color:#57647E !important; }
#page-drinks .drk-c-f{ margin-top:auto; padding-top:12px; font-size:.8rem; font-weight:800;
  color:#8C4C40 !important; -webkit-text-fill-color:#8C4C40 !important; }

#page-drinks .drk-b{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 22px; border-radius:999px; cursor:pointer; font:inherit;
  font-size:.88rem; font-weight:800;
  background:#fff !important; border:1px solid #EAE3DB !important;
  color:#1F3054 !important; -webkit-text-fill-color:#1F3054 !important;
}
#page-drinks .drk-b:hover{ background:#EDF2F8 !important; border-color:#A9BDD6 !important; }
#page-drinks .drk-b:focus-visible{ outline:3px solid #CF9E3F; outline-offset:3px; }
#page-drinks .drk-b svg{ width:17px; height:17px; stroke:currentColor; fill:none;
  stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:720px){
  #page-drinks .drk-grid{ grid-template-columns:1fr; }
}