/* Base styles for the Coles Health Club prototype. Component styling lives inline in view.js;
   the custom properties below are switched by App.applyVars() for the mobile layout. */
:root{
  --brand:#78122F;
  --brand-dark:color-mix(in oklab, var(--brand) 70%, #12000a);
  --brand-deep:color-mix(in oklab, var(--brand) 55%, #12000a);
  --brand-tint:color-mix(in oklab, var(--brand) 6%, #fff);
  --brand-tint2:color-mix(in oklab, var(--brand) 14%, #fff);
  --olive:#5E6B41;
  --sale:#D8232A;
  --ink:#231C1E;
  --mute:#6F6560;
  --line:#E7E1DC;
  --page:#FAF8F6;
  --fw:1440px;
  --pad:44px;
  --cols4:repeat(4,minmax(0,1fr));
  --cols3:repeat(3,minmax(0,1fr));
  --cols2:repeat(2,minmax(0,1fr));
  --split:264px minmax(0,1fr);
  --co:minmax(0,1.55fr) minmax(0,1fr);
  --nav:flex;
  --mob:none;
  --utilspan:inline;
  --searchbasis:240px;
  --searchorder:0;
  --catcols:5;
  --cardpad:44px;
  --footcols:1.5fr repeat(4,1fr);
  --footband:1fr auto;
  --boxpad:28px;
  --h1:40px;
  --hero:400px;
  --gap:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#EFEBE7;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark);text-decoration:underline}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:15px}
::placeholder{color:#A79E99}