/* expiryo.com - the pantry look of the application (patch 009) as a web page: a cream ground, titles in Fraunces,
   stamps and counts in Courier Prime, stitched cards with a strip of washi tape. Everything is served by the site
   itself: no font service, no CDN. The colours are f_ui_color / f_loc_color of the screens, but for small text on
   the page (not in the drawn screens) a darker green and a darker label colour, so that it reads at WCAG AA. */

@font-face { font-family: 'Fraunces'; src: url(fonts/Fraunces_72pt-SemiBold.ttf) format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(fonts/Fraunces_72pt-Bold.ttf) format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(fonts/CourierPrime-Regular.ttf) format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(fonts/CourierPrime-Bold.ttf) format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ground: #F4EFE7; --paper: #FFFDF8; --card: #FFFFFF; --kraft: #E6D3B1; --kraft-text: #5C4A33;
  --dark: #3B2F22; --ink: #201E1D; --text2: #6B6460; --text3: #8C8579;
  --line: #EDE6DA; --border: #D8CBB5; --border2: #8C7B62; --tag: #E3CFAB;
  --label: #76664F;                      /* small labels on the page: 4.8 : 1 on the cream */
  --green: #1F9D6B; --green-dark: #157A52; --green-light: #DDF2E7;
  --green-btn: #178459; --green-btn-hover: #126B47;   /* white text at 4.7 : 1 */
  --red: #E5484D; --red-dark: #B3261E; --amber: #D97706; --amber-dark: #9A4A06; --amber-light: #FEF3E0;
  --note: #FFF4C2; --note-text: #4A3B22; --shadow: #DCCFB8; --foot: #C9BBA3;
  --blue-bg: #DCEAFB; --blue: #3B82D6; --blue-ink: #2A5B96;
  --teal-bg: #D7F0F0; --teal: #1A9AA0; --teal-ink: #136D71;
  --yellow-bg: #FAF2CC; --yellow: #C9A116; --yellow-ink: #7A5F0A;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --radius: 14px;
  --max: 1120px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--green-dark); text-underline-offset: 3px; }
h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--dark); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* Every language of the app is in the page (eight since 2026-10-16): the attribute lang of <html> shows one of them. */
html:not([lang="lt"]) .lt, html:not([lang="en"]) .en, html:not([lang="de"]) .de, html:not([lang="es"]) .es,
html:not([lang="fr"]) .fr, html:not([lang="it"]) .it, html:not([lang="pl"]) .pl, html:not([lang="pt"]) .pt { display: none !important; }

/* ---------- the pieces of the look ---------- */
.mono { font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--label); }
.eyebrow { display: block; margin-bottom: 14px; }

.stamp {
  display: inline-block; position: relative; font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.74rem; line-height: 1; padding: 7px 9px 6px 11px; color: var(--c, var(--dark));
  border: 1.5px solid currentColor; border-radius: 4px; background: rgba(255, 255, 255, 0.75);
  transform: rotate(var(--rot, -4deg)); white-space: nowrap; flex: none;
}
.stamp::after { content: ''; position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 2px; pointer-events: none; opacity: 0.8; }
.stamp.green { --c: var(--green-dark); }
.stamp.red { --c: var(--red); }
.stamp.amber { --c: var(--amber-dark); }

.card { position: relative; background: var(--card); border-radius: var(--radius); padding: 24px; }
.card::before, .s-card::before, .float-card::before {
  content: ''; position: absolute; inset: 5px; border: 1.5px dashed rgba(140, 123, 98, 0.35);
  border-radius: calc(var(--radius) - 5px); pointer-events: none;
}

.tape {
  position: absolute; top: -8px; right: 26px; width: 62px; height: 20px; z-index: 2; pointer-events: none;
  background: url(img/tape_green.png) center / 62px 20px no-repeat; transform: rotate(4deg);
}
.tape.left { right: auto; left: 26px; transform: rotate(-5deg); }
.tape.red { background-image: url(img/tape_red.png); }
.tape.amber { background-image: url(img/tape_amber.png); }
.tape.blue { background-image: url(img/tape_blue.png); }
.tape.purple { background-image: url(img/tape_purple.png); }
.tape.teal { background-image: url(img/tape_teal.png); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px;
  border-radius: 12px; font-weight: 600; font-size: 1.02rem; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; font-family: var(--sans); transition: transform 0.12s, background-color 0.12s; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--green-btn); color: #fff; box-shadow: 0 12px 22px -14px rgba(21, 122, 82, 0.9); }
.btn-primary:hover { background: var(--green-btn-hover); }
.btn-white { background: var(--paper); color: var(--ink); border-color: var(--border); }
.btn-white:hover { background: #fff; }
.btn .ico { width: 20px; height: 20px; stroke-width: 2.2; }

/* the luggage tags of the app: the homes, the language */
.tag-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: 9px;
  background: var(--tag); color: var(--dark); font-weight: 600; font-size: 0.95rem; border: 0; font-family: var(--sans); white-space: nowrap;
}
.tag-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1.5px rgba(59, 47, 34, 0.35); flex: none; }
.tag-chip.open, .tag-chip.on { background: var(--dark); color: #fff; }
.tag-chip.open::before, .tag-chip.on::before { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.15); }
button.tag-chip { cursor: pointer; }

.ring { width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--border2); display: grid; place-items: center; color: var(--green); flex: none; }
.ring .ico { width: 18px; height: 18px; stroke-width: 2.2; }

/* the lid of a jar: a white disc with a ring */
.lid { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--border2); display: grid; place-items: center; flex: none; color: var(--green); }
.lid .ico { width: 24px; height: 24px; }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 239, 231, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.01em; }
/* the avocado alone, without the tile of the icon (2026-10-15: the cream tile melted into the cream page) */
.brand img { width: 36px; height: 48px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--text2); text-decoration: none; font-weight: 500; font-size: 0.98rem; }
.nav-links a:hover { color: var(--ink); }
/* the language: a dropdown (2026-10-15: "kol dvi kalbos, tol gerai, bet esant bent 5-ioms ... nebetiks") - the tag of
   the language chosen, its code and a chevron; under it a paper card of the languages in their own words */
.lang { position: relative; display: inline-block; }
.lang > summary { list-style: none; cursor: pointer; height: 32px; padding: 0 11px 0 8px; font-size: 0.82rem; letter-spacing: 0.04em; user-select: none; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after { content: ''; width: 6px; height: 6px; margin: -3px 0 0 1px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); }
.lang[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.lang > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 168px; display: grid; gap: 2px; padding: 6px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 30px -16px rgba(59, 47, 34, 0.5); }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: 500 0.95rem var(--sans); text-align: left; cursor: pointer; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--line); outline: none; }
.lang-menu button.on { font-weight: 700; }
.lang-menu button.on::after { content: ''; width: 5px; height: 10px; margin-top: -3px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); }
.nav .btn { height: 42px; padding: 0 18px; font-size: 0.95rem; }
.burger { display: none; width: 42px; height: 42px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; place-items: center; padding: 0; }
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: 70px; left: 0; right: 0; margin: 0;
    background: var(--ground); padding: 6px 20px 14px; border-bottom: 1px solid var(--line); box-shadow: 0 24px 30px -26px rgba(59, 47, 34, 0.55);
  }
  .nav-links.open a { padding: 13px 0; font-size: 1.08rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-links.open a:last-child { border-bottom: 0; }
  .lang { margin-left: auto; }
  .burger { display: grid; }
}
@media (max-width: 640px) { .nav .btn-nav { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 64px 0 64px; }
.hero > .wrap { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 48px; align-items: center; }
.hero .stamp { margin-bottom: 26px; --rot: -3deg; font-size: 0.8rem; }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--green); }
.lead { font-size: 1.2rem; color: var(--text2); max-width: 35rem; margin-bottom: 30px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero-note { font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); line-height: 1.7; }
.hero-phone { position: relative; }
/* a product row lifted out of the screen: at the right of the phone, over the end of the chips of the places (cut by
   the screen anyway) - never a name, nor how soon a row is due */
.float-card {
  position: absolute; right: -26px; top: 294px; z-index: 6; background: #fff; border-radius: var(--radius);
  padding: 8px 18px 8px 14px; box-shadow: 0 22px 34px -20px rgba(59, 47, 34, 0.55);
  transform: rotate(3deg); animation: bob 6s ease-in-out 1s infinite;
}
.float-card .drow { padding: 4px 0; width: 214px; gap: 9px; }
.float-card .drow .main b { font-size: 16px; }
@keyframes bob { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-7px); } }
@media (max-width: 900px) {
  .hero { padding: 40px 0 48px; }
  .hero > .wrap { grid-template-columns: 1fr; gap: 44px; }
  .float-card { display: none; }
}

.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.4); }
.trust .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 38px; padding: 16px 20px; }
.trust li { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
.trust .ico { width: 18px; height: 18px; color: var(--green); stroke-width: 2.2; }

/* ---------- sections ---------- */
.section { padding: 88px 0; }
.section-head { max-width: 44rem; margin-bottom: 48px; }
.section-head p { color: var(--text2); font-size: 1.14rem; margin-top: 16px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 700px) { .section { padding: 60px 0; } .section-head { margin-bottom: 36px; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step { padding-top: 30px; }
.step .stamp { margin-bottom: 20px; font-size: 0.8rem; --rot: -4deg; }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text2); font-size: 1rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 30px; } }

.shelf-section { padding-top: 24px; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 26px; align-items: start; }
.shelf figcaption { text-align: center; margin-top: 20px; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
@media (max-width: 1000px) { .shelf { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
.feature { padding-top: 28px; }
.feature .lid { margin-bottom: 18px; }
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--text2); font-size: 0.99rem; }
.also { margin: 40px auto 0; max-width: 48rem; text-align: center; color: var(--text2); font-size: 1rem; }
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

.band { background: var(--dark); color: #F4EFE7; }
.band > .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.band h2 { color: #fff; }
.band .mono { color: var(--foot); }
.band .section-head { margin-bottom: 30px; }
.band .section-head p { color: rgba(244, 239, 231, 0.78); }
.helpers li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.13); font-size: 1.03rem; }
.helpers li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.helpers .ico { color: #5FD3A2; margin-top: 2px; }
.band .small { margin-top: 24px; font-size: 0.9rem; color: rgba(244, 239, 231, 0.7); max-width: 36rem; }
@media (max-width: 900px) { .band > .wrap { grid-template-columns: 1fr; gap: 56px; } }

.note-sheet {
  position: relative; background: var(--note); color: var(--note-text); border-radius: 4px; padding: 40px 28px 30px;
  transform: rotate(-1.5deg); box-shadow: 0 22px 36px -18px rgba(0, 0, 0, 0.65); font-family: var(--mono); font-size: 0.98rem; line-height: 1.5;
  width: 100%; max-width: 440px; margin: 0 auto;
}
.note-sheet .pin { position: absolute; top: -16px; left: 50%; margin-left: -13px; width: 26px; height: 36px; }
.note-sheet strong { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; margin-bottom: 12px; }
.note-sheet .typed { background: rgba(255, 255, 255, 0.6); border: 1.5px dashed rgba(74, 59, 34, 0.35); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
.note-sheet .lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed rgba(74, 59, 34, 0.3); font-size: 0.92rem; }
.note-sheet .lines li > span:first-child { font-weight: 700; }
.note-sheet .lines li > span:first-child::before { content: '✓ '; color: var(--green-dark); }
.note-sheet .lines li > span:last-child { text-align: right; opacity: 0.85; white-space: nowrap; }
@media (max-width: 480px) {
  .note-sheet { padding: 38px 20px 26px; font-size: 0.9rem; }
  .note-sheet .lines li { font-size: 0.84rem; }
}
.note-sheet .stamp { margin-top: 18px; font-size: 0.78rem; --rot: -3deg; }

.privacy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.privacy .card { padding-top: 26px; }
.privacy .lid { margin-bottom: 16px; width: 46px; height: 46px; }
.privacy .lid .ico { width: 22px; height: 22px; }
.privacy h3 { font-size: 1.18rem; margin-bottom: 8px; }
.privacy p { color: var(--text2); font-size: 0.95rem; }
.privacy-foot { margin-top: 30px; color: var(--text2); font-size: 1rem; }
@media (max-width: 980px) { .privacy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .privacy { grid-template-columns: 1fr; } }

.faq { max-width: 780px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.01em; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--green); transition: transform 0.2s; stroke-width: 2.2; }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq .answer { padding: 0 2px 22px; color: var(--text2); max-width: 46rem; }

.cta { padding: 24px 0 96px; }
.cta .card { padding: 56px 40px 44px; text-align: center; }
.cta .card .tape { left: 50%; right: auto; margin-left: -31px; transform: rotate(-3deg); }
.cta .jars { width: 322px; max-width: 80%; height: auto; margin: 0 auto 28px; }
.cta h2 { margin-bottom: 14px; }
.cta p { color: var(--text2); font-size: 1.12rem; max-width: 36rem; margin: 0 auto 28px; }
.cta .hero-note { margin: 22px auto 0; font-size: 0.76rem; }
@media (max-width: 600px) { .cta .card { padding: 44px 20px 36px; } }

/* ---------- the documents: privacy.html, terms.html ---------- */
.nav .brand + .lang { margin-left: auto; }   /* no menu on these pages: the language and the button to the right */
.doc { max-width: 46rem; }
.doc h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-bottom: 6px; }
.doc h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; margin: 32px 0 8px; }
.doc p { color: var(--text2); }

.foot { border-top: 1px solid var(--line); padding: 44px 0 40px; color: var(--text2); font-size: 0.95rem; }
.foot .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px 40px; align-items: start; }
.foot .brand { margin-bottom: 10px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.foot-links a:hover { color: var(--green-dark); text-decoration: underline; }
.foot .credit { margin-top: 14px; font-size: 0.88rem; }
.foot .legal { grid-column: 1 / -1; margin-top: 10px; font-family: var(--mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
@media (max-width: 700px) { .foot .wrap { grid-template-columns: 1fr; } }

/* ---------- a phone and the screens drawn in it (pictures of the app: its own colours) ---------- */
.phone {
  position: relative; width: 340px; max-width: 100%; margin: 0 auto; background: #2B2420; border-radius: 46px; padding: 11px;
  box-shadow: 0 44px 70px -36px rgba(59, 47, 34, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.phone::after { content: ''; position: absolute; top: 19px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: #2B2420; border-radius: 14px; z-index: 4; }
.screen { position: relative; background: var(--ground); border-radius: 36px; overflow: hidden; height: 680px; font-size: 14px; line-height: 1.3; color: var(--ink); }
.phone.short .screen { height: 640px; }
.screen::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to bottom, rgba(244, 239, 231, 0), var(--ground) 85%); pointer-events: none; z-index: 2; }
.screen .tag-chip { height: 30px; font-size: 13px; padding: 0 10px 0 8px; gap: 6px; }
.screen .tag-chip .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.screen .stamp { --c: var(--dark); }
.screen .stamp.red { --c: var(--red-dark); }
.screen .stamp.amber { --c: var(--amber-dark); }

.s-status { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 8px 26px 0; font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--dark); }
.s-status .bat { width: 22px; height: 11px; border: 1.5px solid var(--dark); border-radius: 3px; position: relative; }
.s-status .bat::after { content: ''; position: absolute; top: 1.5px; bottom: 1.5px; left: 1.5px; right: 5px; background: var(--dark); border-radius: 1px; }
.s-bar { background: var(--green); color: #fff; display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-weight: 700; font-size: 18px; font-family: var(--sans); }
.s-bar img { width: 22px; height: 28px; }   /* the avocado as a sticker, as the app's bar since 2026-10-15 */
.s-body { padding: 14px 14px 0; }
.s-back { display: flex; align-items: center; justify-content: space-between; color: var(--green); font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.s-back > span { display: inline-flex; align-items: center; gap: 2px; }
.s-back .tools { gap: 16px; }
.s-back .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.s-back .ico.back { width: 27px; height: 27px; stroke-width: 1.7; }   /* the circle arrow alone (patch 029) */
.s-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-title h4 { font-size: 30px; line-height: 1.05; }
.s-title .right { display: inline-flex; align-items: center; gap: 12px; color: var(--green); }
.s-title .right .ico { width: 24px; height: 24px; stroke-width: 2.2; }
.s-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 17px; }
.s-sub { font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--border2); margin-top: 5px; }
.s-chips { display: flex; gap: 8px; align-items: center; margin: 12px 0 16px; }
.s-chips .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.s-chips .ring { width: 30px; height: 30px; }
.s-section { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 9px; min-height: 30px; }
.s-section h5 { font-size: 19px; }
.s-section .count { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--border2); }
.s-section .ring { width: 30px; height: 30px; }

.s-card { position: relative; background: var(--card); border-radius: 14px; padding: 6px 12px; margin-bottom: 12px; }
.s-card .tape { right: 16px; }
.s-card .tape.left { left: 16px; right: auto; }
.s-card.kraft { background: var(--kraft); }
.s-card.kraft::before { border-color: rgba(92, 74, 51, 0.32); }

/* the dashboard of the app (patch 027, "Produktai"; the row of patch 030): one list of the products of the home in one
   card - the sticker of the kind in a disc of the tint of its section, the name in the serif, under it what is left and
   the tag of the place, how soon in words and in the colour of its state, a small pie of the share left -, the places a
   row of chips above it; the red card and the tip are strips */
.s-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text2); font-size: 13.5px; margin: -6px 0 12px; }
.s-summary .ring { width: 30px; height: 30px; }
.s-strip { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 12px; margin-bottom: 12px; font-size: 13.5px; }
.s-strip b { flex: 1; min-width: 0; font-weight: 700; }
.s-strip .ico { width: 19px; height: 19px; stroke-width: 2.2; }
.s-strip.red { background: #FBE1DF; color: var(--red-dark); }
/* the chips of the places on as many lines as they need (patch 037: a row cut at the edge until then) */
.s-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.f-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 10px; background: var(--tag); color: var(--dark); font-size: 13px; font-weight: 600; flex: none; }
.f-chip b { font-weight: 700; }
.f-chip.on { background: var(--dark); color: var(--ground); }
.f-chip.blue, .pbar.blue, .ptag.blue { background: var(--blue-bg); color: var(--blue-ink); }
.f-chip.teal, .pbar.teal, .ptag.teal { background: var(--teal-bg); color: var(--teal-ink); }
.f-chip.yellow, .pbar.yellow, .ptag.yellow { background: var(--yellow-bg); color: var(--yellow-ink); }
.s-card.list { padding: 0 0 6px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 10px; border-bottom: 1px solid var(--border); }
.card-head.plain { border-bottom: 0; padding-bottom: 4px; }
.card-head h5 { font-size: 18px; }
.card-head .sort { display: inline-flex; align-items: center; gap: 2px; color: var(--text2); font-size: 12.5px; white-space: nowrap; }
.card-head .sort .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.pbar { margin: 6px 8px 2px; padding: 5px 10px; border-radius: 8px; background: var(--line); font-family: var(--display); font-weight: 700; font-size: 14px; }
.drow { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.drow + .drow { border-top: 1px solid var(--border); }
.drow .main { flex: 1; min-width: 0; }
.drow .main b { display: block; font-family: var(--display); font-weight: 600; font-size: 15.5px; line-height: 1.2; letter-spacing: -0.01em; }
.drow .sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; min-width: 0; overflow: hidden; }
.drow .amt { font-size: 11.5px; color: var(--text2); white-space: nowrap; flex: none; }
.drow .sub .ptag { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.drow .due { font-weight: 700; font-size: 12.5px; white-space: nowrap; color: var(--green-dark); flex: none; }
.drow .due.red { color: var(--red-dark); }
.drow .due.amber { color: var(--amber-dark); }
/* the disc of a sticker: the tint of the section of the kind (dairy blue, eggs yellow, frozen teal, dry goods orange,
   fruit and vegetables green), the sticker 64 % of it */
.disc, .kdisc { border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--line); }
.disc { width: 36px; height: 36px; }
.kdisc { width: 26px; height: 26px; }
.disc img, .kdisc img { width: 64%; height: 64%; display: block; }
.disc.blue, .kdisc.blue { background: var(--blue-bg); }
.disc.teal, .kdisc.teal { background: var(--teal-bg); }
.disc.yellow, .kdisc.yellow { background: var(--yellow-bg); }
.disc.orange, .kdisc.orange { background: #FDE8D3; }
.disc.green, .kdisc.green { background: var(--green-light); }
/* the share left: a pie in the brown of a lid on the beige of a line, its centre a dot of the brown */
/* the share left as a classic pie (patch 037: a ring with a dot until then) */
.pie { width: 14px; height: 14px; border-radius: 50%; flex: none; background: conic-gradient(var(--border2) var(--v, 100%), var(--line) 0); }
.ptag { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--line); color: var(--text2); white-space: nowrap; flex: none; }

.s-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border-radius: 12px; font-weight: 700; font-size: 14px; font-family: var(--sans); white-space: nowrap; }
.s-btn.white { background: var(--paper); color: var(--ink); border: 1.5px solid var(--border); }
.s-btn .ico { width: 17px; height: 17px; stroke-width: 2.2; }

.krow { display: flex; align-items: center; gap: 9px; padding: 9px 0; }
.krow + .krow { border-top: 1px solid rgba(92, 74, 51, 0.18); }
.krow .box { width: 22px; height: 22px; border: 2px solid var(--border2); border-radius: 5px; background: rgba(255, 255, 255, 0.55); flex: none; display: grid; place-items: center; color: #fff; }
.krow .box.on { background: var(--green); border-color: var(--green); }
.krow .box .ico { width: 15px; height: 15px; stroke-width: 3; }
.krow .main { flex: 1; min-width: 0; }
.krow .main b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.krow .main > span { display: block; font-size: 11.5px; color: var(--kraft-text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.krow .k-ed, .krow .k-x { width: 16px; height: 16px; stroke-width: 2.2; color: var(--kraft-text); flex: none; }
/* the list by the sections of a shop (the default since 2026-10-13): a title per section in the typewriter face */
.ksec { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; color: var(--kraft-text); padding: 10px 0 0; }
.ksec + .krow { border-top: 0; }
.s-chips.order { margin: 0 0 12px; }
.s-chips.order .tag-chip { height: 28px; font-size: 12px; padding: 0 10px 0 8px; }
.krow.bought .main b { color: var(--text3); text-decoration: line-through; }
.krow.bought .main > span { color: var(--text3); }
.receipt { position: relative; background: #fff; border-radius: 14px 14px 0 0; padding: 4px 12px 8px; margin-bottom: 16px; }
.receipt .edge { position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: url(img/receipt_edge.png) top left / 390px 10px repeat-x; }

.rcp-head { padding: 16px 16px 16px; }
.rcp-head .title { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.12; }
.rcp-head .summary { color: var(--text2); font-size: 13.5px; margin: 7px 0 11px; }
.rcp-head .stamps { display: flex; gap: 8px; }
.rcp-head .stamp { font-size: 9.5px; --rot: 0deg; padding: 5px 6px 4px 8px; }
.s-note { position: relative; background: var(--note); color: var(--note-text); border-radius: 3px; padding: 22px 16px 14px; margin: 20px 6px 8px; transform: rotate(-1.5deg); box-shadow: 0 9px 14px -8px rgba(0, 0, 0, 0.45); font-family: var(--mono); font-size: 13px; line-height: 1.45; }
.s-note img { position: absolute; top: -12px; left: 50%; margin-left: -10px; width: 20px; height: 28px; }
.irow { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.irow + .irow { border-top: 1px solid var(--line); }
.irow .mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.irow .mark.have { background: var(--green); }
.irow .mark.miss { background: var(--amber-light); color: var(--amber); }
.irow .mark .ico { width: 15px; height: 15px; stroke-width: 3; }
.irow .main { flex: 1; min-width: 0; }
.irow .main b { display: block; font-size: 14.5px; font-weight: 600; }
.irow .main > span { font-size: 12.5px; color: var(--text2); }
.irow .stamp { font-size: 9.5px; --rot: 0deg; padding: 5px 6px 4px 8px; }

.s-tab { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 60px; background: #fff; border-radius: 30px; box-shadow: 0 5px 0 var(--shadow); display: flex; align-items: center; justify-content: space-around; z-index: 3; }
.s-tab .t { position: relative; color: var(--text2); display: flex; flex-direction: column; align-items: center; width: 44px; }
.s-tab .t .ico { width: 26px; height: 26px; stroke-width: 2; }
.s-tab .t img { width: 28px; height: 28px; border-radius: 8px; }
.s-tab .t.on::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-top: 4px; }
/* the floating button of the app (patch 021): a green "+" with the mark of the AI, 12 px above the tab bar */
.s-fab { position: absolute; right: 22px; bottom: 88px; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-dark); display: grid; place-items: center; z-index: 3; }
.s-fab.low { bottom: 20px; }
.s-fab .ico { width: 26px; height: 26px; stroke-width: 2.6; }
.s-fab .spark { position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; stroke-width: 2; }
.s-tab .t .badge { position: absolute; top: -5px; right: 2px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-card { animation: none; }
  .btn, .faq summary .ico { transition: none; }
}