/* cream and delicate: a warm cream page, beige tiles for the categories with their icon above the name, a soft search pill,
   section titles between two hairlines, and beige cards two to a row on wide screens, the photo on the side, a calories
   chip in the corner, the price in bold and a small dark-green "add to cart" button */
:root{--bg:#FFF2D4;--page:#F3E4C0;--surface:#EFE4C6;--card:#E6DCBA;--text:#1F1C14;--muted:#4A4536;--line:rgba(60,52,30,.14);--line-strong:rgba(60,52,30,.3);--on-accent:#fff;--title:Vazirmatn;--r:14px;--ph-r:14px;--chip-bg:#EFE4C6;--nav-bg:rgba(255,242,212,.96);--price:#1F1C14;--sheet:#FFF6E0}
html{background:#F3E4C0}
.t-kerem{background:#FFF2D4}

/* the hero: quiet, centred, the name and a line under it */
.t-kerem .hero{padding:34px 20px 14px;border:0}
/* a cover photo: the photo behind a dark fade, light text on it (the plain hero stays transparent, below) */
.t-kerem .hero.has-cover{padding-top:130px;padding-bottom:22px}
.t-kerem .hero.has-cover h1,.t-kerem .hero.has-cover .tag{color:#fff}
.t-kerem .hero.has-cover .chip{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28)}
.t-kerem .hero:not(.has-cover):not(.has-video){background:transparent}
.t-kerem .hero .deco{display:none!important}
.t-kerem .logo{border:0;border-radius:18px;box-shadow:none;background:transparent}
.t-kerem .hero h1{font-weight:900;font-size:clamp(26px,7.5vw,34px);letter-spacing:.02em;color:#2A2618}
.t-kerem .hero .tag{font-weight:700;color:#2A2618;font-size:15px}
.t-kerem .chip{border:0;background:transparent;color:#2A2618;font-size:13.5px}

/* categories: beige tiles, the icon on top and the name under it */
.t-kerem .cats{border-bottom:0;background:var(--nav-bg)}
.t-kerem .cats-in{gap:10px;padding:12px 12px 14px}
.t-kerem .cats a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:84px;padding:10px 14px 9px;border-radius:14px;border:1px solid rgba(60,52,30,.12);background:#EFE4C6;color:#1F1C14;font-weight:800;font-size:12.5px;line-height:1.35;white-space:normal;text-align:center;max-width:130px}
.t-kerem .cats a .cic{width:30px;height:30px;color:#2A2618;stroke-width:1.4}
.t-kerem .cats a.on{background:#E2D5AE;border-color:rgba(47,74,42,.45);box-shadow:inset 0 -3px 0 var(--accent)}
.t-kerem .cats-all{border-radius:12px;background:#EFE4C6;border:1px solid rgba(60,52,30,.12)}

/* the search pill */
.t-kerem .search{border-radius:999px;background:#EFE4C6;border:1px solid rgba(60,52,30,.12);box-shadow:0 4px 14px -8px rgba(60,52,30,.35);text-align:center;letter-spacing:.08em}

/* section titles between two hairlines */
.t-kerem .cat h2{display:flex;align-items:center;gap:14px;justify-content:center;text-align:center;font-weight:700;font-size:19px;color:#2A2618;border:0}
.t-kerem .cat h2::before,.t-kerem .cat h2::after{content:'';flex:1;height:1px;background:var(--line-strong)}

/* the dishes: beige cards, photo on the side, two to a row when there is room */
.t-kerem.l-row .items{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.t-kerem.l-row .items{grid-template-columns:1fr 1fr}}
.t-kerem.l-row .item{position:relative;grid-template-columns:118px 1fr;column-gap:14px;padding:10px;min-height:142px;background:var(--card);border:0;border-radius:12px;box-shadow:none}
.t-kerem.l-row .item .ph{width:118px;height:118px;border-radius:14px}
.t-kerem .item h3{font-weight:900;font-size:16.5px;color:#1F1C14;padding-inline-end:56px}
.t-kerem .item p{color:#3A3628;font-size:13px;line-height:1.85}
.t-kerem .price{font-weight:900;font-size:17px;color:#1F1C14}
.t-kerem .price small{font-weight:700;font-size:11.5px;color:#3A3628}
/* the calories chip in the top corner */
.t-kerem .dmeta .dm-kcal{display:inline-block;position:absolute;top:10px;inset-inline-end:10px;padding:2px 7px;border-radius:5px;background:#A9A07C;color:#fff;font-weight:700;font-size:11px}
/* the add button: small, dark green, with its label */
.t-kerem.l-row .item .add{height:28px;padding:0 10px;border-radius:4px;background:var(--accent);color:#fff}
.t-kerem.l-row .item .add::after{font-size:12px}
.t-kerem .bdg{background:#2F4A2A;color:#FFF2D4;border-radius:4px}
.t-kerem .sp{border:0;background:var(--card);border-radius:12px}
/* on a wide screen the menu opens up to the full width, the dishes two to a row like a printed card */
@media (min-width:900px){body.t-kerem{max-width:1180px}.t-kerem .cats-in{justify-content:center;flex-wrap:wrap}.t-kerem .search{max-width:none}}
/* the café's doodles drifting slowly behind the menu: cups, croissants, beans, leaves, donuts, cupcakes, cutlery, teapots,
   each one bobbing, swaying or turning on its own, and a few sparkles */
.t-kerem::before{content:'';position:fixed;z-index:-1;pointer-events:none;inset:0;background:url(/img/themes/bg-kerem.svg) 0 0/340px 360px,url(/img/themes/bg-kerem.svg) 170px 180px/230px 244px;opacity:.68;animation:krDrift 70s linear infinite}
.t-kerem::before{-webkit-mask:linear-gradient(90deg,#000,rgba(0,0,0,.55) 30%,rgba(0,0,0,.55) 70%,#000);mask:linear-gradient(90deg,#000,rgba(0,0,0,.55) 30%,rgba(0,0,0,.55) 70%,#000)}
@keyframes krDrift{to{background-position:340px -360px,-60px 64px}}
/* a warm glow passing slowly over the page */
.t-kerem::after{content:'';position:fixed;z-index:-1;pointer-events:none;inset:-30%;background:radial-gradient(22% 18% at 30% 30%,rgba(255,214,140,.35),transparent 70%),radial-gradient(20% 16% at 75% 70%,rgba(200,220,170,.3),transparent 70%);animation:krGlow 24s ease-in-out infinite alternate}
@keyframes krGlow{to{transform:translate3d(8%,-6%,0) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.t-kerem::before,.t-kerem::after{animation:none}}