/* QueenKeto sidebar, "Pantry Shelf" (design C, 13 Oct 2026).
   Kitchen Notes tokens, scoped to .qks so nothing leaks into Foodica.
   Fonts are own copies with own family names: Source Serif 4 (latin) and a
   Caveat subset (letters, digits, basic punctuation, 15 KB). */

@font-face{
  font-family:"QKS Serif";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/source-serif-4-latin.woff2") format("woff2");
}
@font-face{
  font-family:"QKS Hand";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/caveat-500-sidebar.woff2") format("woff2");
}

.qks{
  --qks-ink:#332d26; --qks-soft:#7b7266; --qks-body:#463f36;
  --qks-white:#fffefa; --qks-cream:#f3eeda;
  --qks-green:#2c5c3a; --qks-green-h:#224a2d; --qks-leaf:#a5de89;
  --qks-line:#ded6bd; --qks-rule:#cfc4a5;
  --qks-serif:"QKS Serif","Source Serif 4",Georgia,"Times New Roman",serif;
  --qks-sans:Inter,-apple-system,"Segoe UI",sans-serif;
  --qks-hand:"QKS Hand","Caveat","Segoe Script",cursive;
  box-sizing:border-box;
  max-width:420px; margin:0 auto;
  background:var(--qks-cream);
  border:1px solid var(--qks-rule);
  box-shadow:inset 0 0 0 7px var(--qks-cream),inset 0 0 0 8px var(--qks-line);
  padding:22px 22px 24px;
  font-family:var(--qks-serif); color:var(--qks-body); line-height:1.5;
}
.qks *,.qks *::before,.qks *::after{box-sizing:border-box}
.qks a{text-decoration:none;box-shadow:none}

.qks .qks-sec{margin:0;padding:0}
.qks .qks-sec + .qks-sec{margin-top:22px;padding-top:22px;border-top:1px dashed var(--qks-rule)}

.qks .qks-h{
  margin:0 0 12px; padding:0; border:0;
  font:700 21px/1.25 var(--qks-serif); color:var(--qks-ink);
  text-align:center; text-transform:none; letter-spacing:0;
}
.qks .qks-hand{
  display:block; font:500 23px/1.2 var(--qks-hand); color:var(--qks-green);
  text-transform:none; letter-spacing:0;
}
.qks .qks-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 1. search */
.qks .qks-sform{
  display:flex; align-items:center; margin:0;
  background:var(--qks-white); border:1px solid var(--qks-rule); border-radius:999px; padding:0 0 0 14px;
}
.qks .qks-sform:focus-within{border-color:var(--qks-green);box-shadow:0 0 0 3px rgba(44,92,58,.15)}
.qks .qks-sinput{
  flex:1; min-width:0; height:46px; margin:0; padding:0 4px;
  border:0; outline:0; background:transparent; box-shadow:none; border-radius:0;
  font:400 17px/1.3 var(--qks-serif); color:var(--qks-ink);
  -webkit-appearance:none; appearance:none;
}
.qks .qks-sinput::placeholder{color:#968c7d;opacity:1}
.qks .qks-sinput::-webkit-search-cancel-button{display:none}
.qks .qks-sbtn{
  flex:none; width:40px; height:40px; margin:3px; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:var(--qks-green); color:var(--qks-white); cursor:pointer; box-shadow:none;
}
.qks .qks-sbtn:hover{background:var(--qks-green-h)}

/* 2. Clean KETO */
.qks .qks-optin{text-align:center}
.qks .qks-cover{
  display:block; width:96px; height:auto; margin:0 auto 10px;
  border:1px solid var(--qks-line); box-shadow:0 3px 0 rgba(51,45,38,.08);
}
.qks .qks-optin .qks-hand{margin:0 0 2px}
.qks .qks-optin .qks-h{margin-bottom:6px}
.qks .qks-p{margin:0 0 12px; font:400 16.5px/1.5 var(--qks-serif); color:var(--qks-body)}
.qks .qks-oform{margin:0}
.qks .qks-input{
  display:block; width:100%; height:46px; margin:0; padding:0 12px;
  font:400 16px/1.3 var(--qks-sans); color:var(--qks-ink);
  background:#fff; border:1px solid var(--qks-rule); border-radius:4px; box-shadow:none; outline:0;
}
.qks .qks-input:focus{border-color:var(--qks-green);box-shadow:0 0 0 3px rgba(44,92,58,.15)}
.qks .qks-btn{
  display:block; width:100%; margin:8px 0 0; padding:13px 10px;
  font:600 16px/1.2 var(--qks-sans); text-align:center; text-transform:none; letter-spacing:0;
  color:#fbf9e7; background:var(--qks-green); border:2px solid var(--qks-green); border-radius:4px;
  cursor:pointer; box-shadow:none;
}
.qks .qks-btn:hover{background:var(--qks-green-h);border-color:var(--qks-green-h);color:#fbf9e7}
.qks .qks-btn[disabled]{opacity:.65;cursor:wait}
.qks .qk-nl__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.qks .qk-nl__msg{text-align:left}
.qks .qk-nl__done{text-align:left;margin-top:4px}
.qks .qks-fine{margin:8px 0 0; font:400 13px/1.45 var(--qks-sans); color:var(--qks-soft)}

/* 3. more recipes from this category */
.qks .qks-hero{display:block; margin:0 0 6px; color:var(--qks-ink)}
.qks .qks-hero img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  margin:0; border:1px solid var(--qks-line); border-radius:3px;
}
.qks .qks-hero span{display:block; margin-top:8px; font:700 18px/1.3 var(--qks-serif); color:var(--qks-ink)}
.qks .qks-list{list-style:none; margin:0 0 14px; padding:0}
.qks .qks-list li{list-style:none; margin:0; padding:0; border-top:1px solid var(--qks-line)}
.qks .qks-list a{
  display:flex; gap:12px; align-items:center; padding:10px 0;
  font:600 16.5px/1.3 var(--qks-serif); color:var(--qks-ink);
}
.qks .qks-n{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--qks-leaf); color:var(--qks-green); font:600 14px/1 var(--qks-sans);
}
.qks .qks-hero:hover span,.qks .qks-list a:hover{
  text-decoration:underline; text-decoration-color:var(--qks-leaf); text-decoration-thickness:3px; text-underline-offset:3px;
}
.qks .qks-center{margin:0; text-align:center}
.qks .qks-all{font:600 15px/1.3 var(--qks-sans); color:var(--qks-green)}
.qks .qks-all::after{content:" \2192"}
.qks .qks-all:hover{text-decoration:underline}

/* 4. Keto Pantry */
.qks .qks-shelf{display:block; position:relative; overflow:hidden; border-radius:3px; color:#fff}
.qks .qks-shelf img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; margin:0}
.qks .qks-shelf-txt{
  position:absolute; left:0; right:0; bottom:0; padding:44px 14px 12px;
  background:linear-gradient(to top,rgba(35,30,24,.92) 0,rgba(35,30,24,.78) 55%,rgba(35,30,24,0) 100%);
}
.qks .qks-shelf .qks-hand{color:var(--qks-leaf); font-size:21px}
.qks .qks-shelf b{display:block; font:700 18px/1.25 var(--qks-serif); color:#fff}
.qks .qks-shelf:hover b{text-decoration:underline; text-decoration-color:var(--qks-leaf)}