/* How are you cooking today? — her CookingWays component, in the HU palette.
   Her Tailwind used #FBFAF7/#263330/#667466; mapped to the site's cream, navy and
   sage so it sits with the rest of the Kitchen rather than importing a second scheme. */
.cw-sec{ margin-top:34px; padding-top:30px; border-top:1px solid #E8E4DC;
  font-family:'Nunito',system-ui,sans-serif; }
.cw-head{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; margin-bottom:20px; }
.cw-kick{ margin:0 0 5px; font-size:.68rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:#5F7350 !important; -webkit-text-fill-color:#5F7350 !important; }
.cw-h{ margin:0; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.cw-lede{ margin:7px 0 0; font-size:.95rem; line-height:1.6; max-width:60ch;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.cw-clear,.cw-btn,.cw-chip{ cursor:pointer; font-family:inherit; font-weight:800;
  border-radius:999px; min-height:44px; padding:11px 18px; font-size:.84rem;
  background:#fff !important; border:1px solid rgba(36,52,71,.14);
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.cw-clear:hover,.cw-btn:hover,.cw-chip:hover{ background:#EEF4EC !important; border-color:#5F7350; }
.cw-clear:focus-visible,.cw-btn:focus-visible,.cw-chip:focus-visible,
.cw-card:focus-visible,.cw-r-go:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }

.cw-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.cw-card{ display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer;
  font-family:inherit; min-height:145px; border-radius:18px; padding:16px;
  background:#fff !important; border:1px solid #E3E3DE;
  transition:transform .18s, box-shadow .18s, border-color .18s; }
.cw-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(36,52,71,.08); }
.cw-card.is-on{ background:#EEF4EC !important; border-color:#879984; box-shadow:0 4px 14px rgba(95,115,80,.14); }
.cw-c-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; }
.cw-c-ic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:#F3F1EB; font-size:1.25rem; }
.cw-c-ar{ font-size:1.05rem; color:#8C958F !important; -webkit-text-fill-color:#8C958F !important; }
.cw-c-t{ font-size:.98rem; font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.cw-c-s{ font-size:.79rem; line-height:1.45;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.cw-all{ display:flex; justify-content:center; margin-top:18px; }

.cw-active{ margin-top:24px; background:#F1F3EE; border-radius:18px; padding:16px 20px; }
.cw-a-k{ margin:0; font-size:.68rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:#5F7350 !important; -webkit-text-fill-color:#5F7350 !important; }
.cw-a-r{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:4px; }
.cw-a-t{ margin:0; font-size:1.1rem; font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.cw-a-n{ font-size:.88rem; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.cw-hint{ margin:22px 0 0; font-size:.86rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }

.cw-res{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
.cw-r{ background:#fff; border:1px solid #E2E3DE; border-radius:18px; padding:18px; }
.cw-r-time{ display:inline-block; border-radius:999px; padding:4px 12px; font-size:.72rem; font-weight:700;
  background:#F2F3EE; color:#5F6B63 !important; -webkit-text-fill-color:#5F6B63 !important; }
.cw-r-t{ margin:10px 0 0; font-size:1.02rem; font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.cw-r-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cw-r-tag{ border:1px solid #DFE2DC; border-radius:999px; padding:4px 10px; font-size:.72rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.cw-r-go{ margin-top:14px; cursor:pointer; background:none !important; border:0; padding:11px 0;
  min-height:44px; font-family:inherit; font-size:.85rem; font-weight:800;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important; }
.cw-empty{ grid-column:1/-1; border:1px dashed #DADDD7; border-radius:18px; background:#fff;
  padding:30px; text-align:center; }
.cw-e-t{ margin:0; font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.cw-e-s{ margin:6px 0 14px; font-size:.88rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }

.cw-short{ margin-top:34px; border-top:1px solid #E0E2DC; padding-top:26px; }
.cw-s-h{ margin:0; font-size:1.05rem; font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.cw-s-p{ margin:5px 0 14px; font-size:.88rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.cw-s-row{ display:flex; flex-wrap:wrap; gap:9px; }

@media (max-width:1024px){
  .cw-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cw-res{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .cw-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cw-res{ grid-template-columns:minmax(0,1fr); }
}