/* Dona: pastel patisserie. Cream, strawberry, pistachio and butter, chocolate for text.
   Motion: the cake builds itself (layers drop and squash, glaze runs, a border is piped, sprinkles fall,
   a cherry pops), icing drips over every section seam, rings fill like macarons, cards squish when pressed.
   Rule: the base style is always the FINAL state; animations only describe the way there,
   so reduced motion (and no JS) shows a complete, static page. */

@font-face { font-family: "Nunito"; src: url("/fonts/nunito.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2000-206F, U+20AC, U+2116, U+2122, U+2212; }
@font-face { font-family: "Noto Sans Georgian"; src: url("/fonts/noto-sans-georgian.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }

:root {
  --cream: #fff4ea; --white: #fffaf5; --peach: #ffe7cf; --choc: #4a2c22; --muted: #6e4a3d; --cocoa: #6b4134;
  --berry: #e8577a; --berry-ink: #b8325a; --berry-deep: #8f2445; --pink: #f7a8b8; --blush: #ffe1e7;
  --pista: #a8c68f; --pista-tint: #eef5e6; --butter: #ffd98a; --butter-tint: #fff0c7;
  --font: "Nunito", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1160px; --gutter: clamp(16px, 4vw, 40px); --r: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --soft: 0 18px 40px -26px rgba(74, 44, 34, .45);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; color: var(--choc); background: var(--cream); font: 500 1.0625rem/1.65 var(--font); overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--pink); }
a:hover { text-decoration-style: wavy; text-decoration-color: var(--berry); }
:focus-visible { outline: 3px solid var(--berry-ink); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: .6rem 1rem; border-radius: 12px; background: var(--choc); color: var(--cream); }
.skip:focus { top: 8px; }
.nowrap, .tel { white-space: nowrap; }
.tel { font-weight: 800; }

h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.05; letter-spacing: -.015em; }
h1 { font-size: clamp(2.5rem, 4.4vw, 3.7rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: .6rem; }
.lang-ka h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.18; letter-spacing: 0; }
.lang-ka h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.22; letter-spacing: 0; }
p { margin: 0 0 1rem; }

.wrap, .site-header { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- tones: section backgrounds and card accents ---------- */
.band.tone-cream, .hero, .page-head { background: var(--cream); }
.band.tone-pink { background: var(--blush); }
.band.tone-pista { background: var(--pista-tint); }
.from-cream { color: var(--cream); } .from-pink { color: var(--blush); } .from-pista { color: var(--pista-tint); }
.treat.tone-pink, .shelf.tone-pink { --tone: var(--blush); }
.treat.tone-butter, .shelf.tone-butter { --tone: var(--butter-tint); }
.treat.tone-pista, .shelf.tone-pista { --tone: var(--pista-tint); }
.treat.tone-cream, .shelf.tone-cream { --tone: var(--peach); }

/* ---------- lace strip and header ---------- */
.lace {
  height: 16px;
  background: linear-gradient(var(--berry) 0 0) top / 100% 7px no-repeat,
    radial-gradient(circle 8px at 9px 7px, var(--berry) 96%, #0000 100%) 0 0 / 18px 16px repeat-x;
}
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.4rem; padding: .9rem 0 1rem; }
/* the shop's own logo: the honey jar with "დონა", "dona" and the bee, in cocoa as on the cake boxes */
.logo { display: inline-flex; text-decoration: none; border-radius: 12px; }
.logo-mark { display: block; width: 84px; height: auto; transform-origin: 50% 90%; }
@media (hover: hover) { .logo:hover .logo-mark { animation: jar-wobble .8s var(--ease); } }
@keyframes jar-wobble { 30% { transform: rotate(-5deg); } 60% { transform: rotate(3deg); } 80% { transform: rotate(-1deg); } }
.nav { display: flex; gap: .3rem; margin-inline-start: auto; font-weight: 800; }
.nav a { padding: .5rem .95rem; border-radius: 999px; text-decoration: none; transition: background-color .2s; }
.nav a:hover { background: var(--white); }
.nav a[aria-current="page"] { background: var(--blush); color: var(--berry-ink); }
.lang { display: flex; margin-inline-start: .4rem; padding: 3px; gap: 2px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 2px var(--blush); font-size: .8rem; font-weight: 900; }
.lang a { padding: .3rem .62rem; border-radius: 999px; text-decoration: none; }
.lang a[aria-current="true"] { background: var(--choc); color: var(--cream); }
@media (max-width: 760px) {
  .site-header { gap: .5rem; padding: .7rem 0 .8rem; }
  .logo-mark { width: 70px; }
  .site-header .head-call { display: none; }
  .lang { margin-inline-start: auto; }
  .nav { flex: 1 0 100%; margin: 0; justify-content: space-between; font-size: .95rem; }
  .nav a { padding: .45rem .7rem; }
  .lang-ka .nav { font-size: .88rem; }
}
@media (max-width: 400px) { .nav a { padding: .45rem .5rem; } .lang-ka .nav a { padding: .45rem .35rem; } }

/* ---------- buttons: candy pills that squish when pressed ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 50px;
  padding: .8rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 1rem/1.2 var(--font); color: var(--white); text-decoration: none; background: var(--berry-ink);
  box-shadow: 0 5px 0 var(--berry-deep), 0 14px 24px -12px rgba(184, 50, 90, .55);
  transition: transform .3s var(--bounce), box-shadow .3s var(--bounce);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 7px 0 var(--berry-deep), 0 18px 26px -12px rgba(184, 50, 90, .55); }
.btn:active { transform: translateY(4px) scale(1.02, .94); box-shadow: 0 1px 0 var(--berry-deep), 0 6px 12px -8px rgba(184, 50, 90, .55); transition-duration: .08s; }
.btn-ghost { color: var(--choc); background: var(--white); box-shadow: 0 5px 0 var(--pink), 0 14px 24px -14px rgba(74, 44, 34, .4); }
.btn-ghost:hover { box-shadow: 0 7px 0 var(--pink), 0 18px 26px -14px rgba(74, 44, 34, .4); }
.btn-ghost:active { box-shadow: 0 1px 0 var(--pink); }
.btn-sm { min-height: 42px; padding: .5rem 1.15rem; box-shadow: 0 4px 0 var(--berry-deep); }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; margin: 1.6rem 0; }
.cta-row.center { justify-content: center; }

/* ---------- hero ---------- */
.hero { padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(4rem, 7vw, 5.5rem); }
.hero-grid { display: grid; gap: 1rem 3rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.08fr .92fr; } }
.eyebrow { display: inline-block; margin: 0 0 1rem; padding: .35rem .9rem; border-radius: 999px; background: var(--blush); color: var(--berry-ink); font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lang-ka .eyebrow { letter-spacing: .02em; }
h1 .accent { color: var(--berry-ink); }
.lede { max-width: 33em; margin-top: 1.1rem; color: var(--muted); font-size: 1.2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.chips li { padding: .4rem .95rem; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 2px var(--blush); font-size: .95rem; font-weight: 700; }
.chips a { text-decoration-color: var(--berry); }
.hero-visual { width: 100%; max-width: 620px; justify-self: center; }
@media (max-width: 899px) { .hero .hero-visual { order: -1; width: min(100%, 380px); margin-bottom: -.5rem; } .hero .lede { font-size: 1.1rem; } }
@media (min-width: 1200px) { .hero .hero-visual { width: 116%; max-width: none; margin-inline-start: -2%; } }
.hero-stage { position: relative; }
.hero-art { position: relative; display: block; width: 100%; height: auto; }
.doily { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.hero-art .tier, .hero-art .glaze, .hero-art .pearls, .hero-art .spr, .hero-art .cherry, .hero-art .cup,
.hero-art .side, .hero-art .stand, .hero-art .spark { transform-box: fill-box; }
.hero-art .tier { transform-origin: 50% 100%; }
.hero-art .glaze { transform-origin: 50% 0; }
.hero-art .spr, .hero-art .spark { transform-origin: 50% 50%; }
.hero-art .cherry { transform-origin: 50% 100%; }
.hero-art .pipe { stroke-dasharray: 1; }
.hero-art .steam { stroke-dasharray: .42 .58; opacity: .75; }

/* headline: words pop up one by one like dough rising */
.w { display: inline-block; }
html.js:not(.no-hide) .w { animation: rise .75s var(--bounce) backwards; animation-delay: calc(var(--i) * 70ms + 80ms); }

/* the cake builds itself: stand, three tiers (drop, squash, the lower tier thuds), glaze runs,
   pearls are piped, the shell border is drawn, sprinkles fall and settle, a cherry pops on top */
html.js:not(.no-hide) .doily { animation: doily-in 1s var(--bounce) backwards, spin 160s linear 1s infinite; }
html.js:not(.no-hide) .hero-art .stand { animation: rise-in .7s var(--bounce) .1s backwards; }
html.js:not(.no-hide) .hero-art .t0 { animation: drop .9s .35s backwards, thud .4s 1.15s, thud .35s 1.45s; }
html.js:not(.no-hide) .hero-art .t1 { animation: drop .85s .7s backwards, thud .35s 1.45s; }
html.js:not(.no-hide) .hero-art .t2 { animation: drop .8s 1.02s backwards; }
html.js:not(.no-hide) .hero-art .t0 .glaze { animation: pour .7s .95s var(--ease) backwards; }
html.js:not(.no-hide) .hero-art .t1 .glaze { animation: pour .7s 1.25s var(--ease) backwards; }
html.js:not(.no-hide) .hero-art .t2 .glaze { animation: pour .7s 1.55s var(--ease) backwards; }
html.js:not(.no-hide) .hero-art .t0 .pearls { animation: pipe-row .7s 1.5s linear backwards; }
html.js:not(.no-hide) .hero-art .t1 .pearls { animation: pipe-row .6s 1.75s linear backwards; }
html.js:not(.no-hide) .hero-art .t2 .pearls { animation: pipe-row .5s 1.95s linear backwards; }
html.js:not(.no-hide) .hero-art .pipe { animation: draw .9s 2.05s cubic-bezier(.5, 0, .3, 1) backwards; }
html.js:not(.no-hide) .hero-art .spr { animation: fall .95s backwards; animation-delay: calc(2.35s + var(--i) * 32ms); }
html.js:not(.no-hide) .hero-art .cherry { animation: cherry-pop .75s 3.2s backwards, boing 1s 7s 3; }
html.js:not(.no-hide) .hero-art .cup { animation: slide-r .9s var(--bounce) .9s backwards; }
html.js:not(.no-hide) .hero-art .side { animation: slide-l .9s var(--bounce) 1.2s backwards; }
html.js:not(.no-hide) .hero-art .spark { animation: twinkle 3.4s ease-in-out infinite backwards; animation-delay: calc(var(--i) * .7s + 2.6s); }
html.js:not(.no-hide) .hero-art .steam { animation: steam 3.2s linear infinite backwards; animation-delay: calc(var(--i) * .55s + 2.4s); }
.loop.off, .loop.off *, html.tab-hidden .loop, html.tab-hidden .loop * { animation-play-state: paused !important; }

@keyframes rise { from { opacity: 0; transform: translateY(.5em) scale(.9, 1.1); } }
@keyframes doily-in { from { opacity: 0; transform: scale(.55) rotate(-40deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(40px) scale(.9); } }
@keyframes drop {
  0% { opacity: 0; transform: translateY(-560px) scale(.92, 1.1); }
  12% { opacity: 1; }
  55% { transform: translateY(0) scale(.94, 1.08); }
  68% { transform: translateY(0) scale(1.12, .84); }
  82% { transform: scale(.96, 1.05); }
  92% { transform: scale(1.02, .98); }
  100% { transform: none; }
}
@keyframes thud { 40% { transform: scale(1.035, .955); } }
@keyframes pour { from { transform: scaleY(.3); } }
@keyframes pipe-row { from { clip-path: inset(-30% 100% -30% 0); } to { clip-path: inset(-30% 0 -30% 0); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes fall {
  0% { opacity: 0; transform: translateY(-460px) rotate(var(--rot)); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  8% { opacity: 1; }
  68% { transform: translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  82% { transform: translateY(-12px) rotate(0deg); animation-timing-function: cubic-bezier(.6, 0, .8, .5); }
  100% { transform: none; }
}
@keyframes cherry-pop {
  0% { opacity: 0; transform: translateY(-60px) scale(.2); }
  45% { opacity: 1; transform: translateY(0) scale(1.15, .78); }
  65% { transform: scale(.9, 1.14); }
  82% { transform: scale(1.04, .96); }
  100% { transform: none; }
}
@keyframes boing { 0%, 100% { transform: none; } 20% { transform: scale(1.12, .86); } 45% { transform: scale(.92, 1.1) translateY(-4%); } 70% { transform: scale(1.03, .97); } }
@keyframes slide-r { from { opacity: 0; transform: translateX(180px) rotate(14deg); } }
@keyframes slide-l { from { opacity: 0; transform: translateX(-180px) rotate(-14deg); } }
@keyframes twinkle { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.35) rotate(45deg); opacity: .35; } }
@keyframes steam { 0% { stroke-dashoffset: .58; opacity: 0; } 25% { opacity: .75; } 75% { opacity: .75; } 100% { stroke-dashoffset: -.42; opacity: 0; } }

/* ---------- bands with icing drips on the seam ---------- */
.band { position: relative; padding: clamp(4.6rem, 8vw, 6.6rem) 0 clamp(3.2rem, 6vw, 4.8rem); }
.edge { position: absolute; top: -1px; left: 0; display: block; width: 100%; height: clamp(44px, 4.6vw, 84px); pointer-events: none; }
.edge .drip { transform-box: fill-box; transform-origin: 50% 0; transition: transform 1s var(--bounce); transition-delay: calc(var(--i) * 45ms + 80ms); }
.edge .edge-band { transition: transform 1.3s var(--ease); }
html.js:not(.no-hide) .edge:not(.in) .drip { transform: scaleY(.12); }
html.js:not(.no-hide) .edge:not(.in) .edge-band { transform: translateX(-60px); }
.kicker { margin: 0 0 .35rem; color: var(--berry-ink); font: 900 1.2rem/1.35 var(--font); }
.lang-ka .kicker { font-size: 1rem; letter-spacing: .04em; }
.intro { max-width: 40em; color: var(--muted); font-size: 1.15rem; }
.more { margin: 2rem 0 0; }
.small { color: var(--muted); font-size: .95rem; }
.center { text-align: center; }

/* ---------- showcase cards ---------- */
.treats { display: grid; gap: 1.1rem; grid-template-columns: repeat(5, 1fr); margin: 2.2rem 0 0; padding: 0; list-style: none; }
@media (max-width: 960px) { .treats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .treats { grid-template-columns: repeat(2, 1fr); gap: .9rem; } .treat:last-child { grid-column: 1 / -1; } }
.treat a {
  position: relative; display: grid; justify-items: center; gap: .7rem; height: 100%; padding: 1.5rem 1rem 1.3rem;
  border-radius: var(--r); background: var(--white); box-shadow: var(--soft); text-decoration: none;
}
.treat a::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: -9px; height: 10px;
  background: radial-gradient(circle 6px at 8px 0, var(--white) 96%, #0000 100%) 0 0 / 16px 10px repeat-x;
}
.treat-art { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: var(--tone); }
.treat-art .icon { width: 98px; height: 98px; transition: transform .45s var(--bounce); }
.treat-name { font-size: 1.3rem; font-weight: 900; line-height: 1.15; text-align: center; }
.lang-ka .treat-name { font-size: 1.1rem; }
@media (hover: hover) {
  .treat a:hover { animation: squish .6s var(--ease); }
  .treat a:hover .icon { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
}
.treat a:active { transform: scale(.95, .92); transition: transform .1s; }
@keyframes squish { 0%, 100% { transform: none; } 25% { transform: scale(1.05, .94); } 50% { transform: scale(.97, 1.04); } 75% { transform: scale(1.015, .985); } }

/* ---------- praise: rating seal and macaron rings ---------- */
.praise-grid { display: grid; gap: 2rem 3rem; align-items: center; margin-top: 2.2rem; }
@media (min-width: 900px) { .praise-grid { grid-template-columns: 320px 1fr; } }
.seal-card { display: grid; justify-items: center; gap: .4rem; text-align: center; text-decoration: none; }
.seal-card:hover { text-decoration: none; }
.seal { position: relative; display: grid; place-content: center; justify-items: center; width: 270px; aspect-ratio: 1; color: var(--cream); }
.seal-bg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .9s var(--bounce); }
@media (hover: hover) { .seal-card:hover .seal-bg { transform: rotate(30deg) scale(1.04); } }
.seal > :not(.seal-bg) { position: relative; }
.seal-src { font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.lang-ka .seal-src { letter-spacing: .02em; }
.seal-num { font-size: 5rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.count { font-variant-numeric: tabular-nums; }
.stars { width: 136px; height: auto; margin-top: .2rem; }
.stars .fill { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .6s var(--bounce); transition-delay: calc(var(--i) * 90ms + .45s); }
html.js:not(.no-hide) .seal-card:not(.in) .stars .fill { transform: scale(0); }
.seal-count { margin-top: .6rem; font-weight: 800; }
.seal-open { color: var(--berry-ink); font-weight: 800; text-decoration: underline 2px var(--pink); text-underline-offset: 4px; }
.seal-card:hover .seal-open { text-decoration-style: wavy; text-decoration-color: var(--berry); }
.rings { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .rings { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }
.ring { display: grid; justify-items: center; align-content: start; padding: 1.3rem .8rem 1.2rem; border-radius: var(--r); background: var(--white); box-shadow: var(--soft); text-align: center; }
.ring-art, .ring-pct { grid-area: 1 / 1; }
.ring-art { width: 112px; height: 112px; }
.ring-pct { align-self: center; font-size: 1.55rem; font-weight: 900; }
.ring-label { margin-top: .55rem; font-weight: 900; line-height: 1.25; }
.ring-n { color: var(--muted); font-size: .92rem; }
.ring .arc { transition: stroke-dashoffset 1.5s var(--ease); transition-delay: calc(var(--i) * 90ms + .25s); }
html.js:not(.no-hide) .ring:not(.in) .arc { stroke-dashoffset: var(--p); }

/* ---------- shops: three shop fronts, each under its own striped awning ---------- */
.shops { display: grid; gap: 1.4rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
@media (min-width: 820px) { .shops { grid-template-columns: repeat(3, 1fr); } }
.shop {
  --awn: var(--berry); --awn-tint: var(--blush); --awn-edge: var(--berry-ink);
  display: flex; flex-direction: column; align-items: flex-start; padding: 0 1.6rem 1.5rem;
  border-radius: var(--r); background: var(--white); box-shadow: var(--soft); overflow: hidden;
}
.shop:nth-child(3n + 2) { --awn: var(--pista); --awn-tint: var(--pista-tint); --awn-edge: #7f9f68; }
.shop:nth-child(3n + 3) { --awn: var(--butter); --awn-tint: var(--butter-tint); --awn-edge: #e0b357; }
/* the wrapper carries the shadow line, the pseudo-element the scalloped stripes (a mask would clip a filter on itself) */
.shop-awning { display: block; align-self: stretch; height: 46px; margin: 0 -1.6rem 1.2rem; filter: drop-shadow(0 3px 0 var(--awn-edge)); transform-origin: 50% 0; transition: transform .9s var(--bounce); transition-delay: calc(var(--i, 0) * 120ms + .25s); }
.shop-awning::before {
  content: ""; display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--awn) 0 26px, var(--awn-tint) 26px 52px);
  -webkit-mask: radial-gradient(13px at 13px calc(100% - 13px), #000 97%, #0000 100%) 0 100% / 26px 26px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 13px) no-repeat;
  mask: radial-gradient(13px at 13px calc(100% - 13px), #000 97%, #0000 100%) 0 100% / 26px 26px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 13px) no-repeat;
}
html.js:not(.no-hide) .shop:not(.in) .shop-awning { transform: scaleY(.2); }
.shop h3 { margin-bottom: .55rem; font-size: 1.45rem; line-height: 1.2; }
.lang-ka .shop h3 { font-size: 1.2rem; line-height: 1.35; letter-spacing: 0; }
.shop p { margin: 0 0 .7rem; }
.shop-tel { font-size: 1.15rem; }
.shop .shop-go { margin: auto 0 0; padding-top: .3rem; }
/* the main shop hangs out its hours on a little cake-box tag that swings on its hole when the card arrives */
.tag {
  position: relative; display: inline-block; padding: .3rem .95rem .38rem 1.75rem; border-radius: 6px 14px 14px 6px;
  background: var(--berry-ink); color: var(--cream); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 4px 0 var(--berry-deep); transform-origin: .8rem 50%;
}
.tag::before { content: ""; position: absolute; left: .8rem; top: 50%; width: 8px; height: 8px; translate: -50% -50%; border-radius: 50%; background: var(--white); }
.shop.in .tag { animation: swing 2.4s var(--ease) .7s; }
@media (hover: hover) { .tag:hover { animation: swing 1.8s var(--ease); } }
@keyframes swing { 0%, 100% { transform: none; } 12% { transform: rotate(9deg); } 30% { transform: rotate(-6deg); } 48% { transform: rotate(3.5deg); } 65% { transform: rotate(-2deg); } 82% { transform: rotate(.8deg); } }
.shops + .contact-grid { margin-top: 1.6rem; }
.contact-card { padding: 1.6rem 1.8rem; border-radius: var(--r); background: var(--white); box-shadow: var(--soft); }

/* ---------- questions ---------- */
.qa-list { display: grid; gap: .85rem; max-width: 52em; margin-top: 1.6rem; }
.faq-teaser { display: grid; gap: 0 3rem; }
@media (min-width: 900px) {
  .faq-teaser { grid-template-columns: 1fr 1.6fr; align-items: start; }
  .faq-teaser .qa-list { margin-top: .4rem; }
  .faq-head .more { margin-top: 1.4rem; }
}
@media (max-width: 899px) { .faq-head { display: contents; } .faq-head .more { order: 2; } }
.qa { padding: 0 1.3rem; border-radius: 22px; background: var(--white); box-shadow: var(--soft); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; font-size: 1.08rem; font-weight: 800; list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(var(--berry-ink) 0 0) center / 12px 3px no-repeat, linear-gradient(var(--berry-ink) 0 0) center / 3px 12px no-repeat, var(--blush);
  transition: transform .4s var(--bounce);
}
.qa[open] summary::after { transform: rotate(135deg); }
.qa p { margin: 0; padding: 0 0 1.1rem; color: var(--muted); }
.qa[open] p { animation: qa-open .45s var(--bounce); }
@keyframes qa-open { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.faq-list { display: grid; gap: 1rem; max-width: 54em; }
.qa-full { padding: 1.4rem 1.6rem; border-radius: var(--r); background: var(--white); box-shadow: var(--soft); }
.qa-full h2 { margin-bottom: .45rem; font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.25; letter-spacing: -.005em; }
.lang-ka .qa-full h2 { font-size: 1.2rem; line-height: 1.35; }
.qa-full p { margin: 0; color: var(--muted); }

/* ---------- inner pages ---------- */
.page-head { padding: clamp(1.2rem, 4vw, 3rem) 0 clamp(4.4rem, 7vw, 5.6rem); }
.page-head h1 { max-width: 15em; font-size: clamp(2.3rem, 4.8vw, 3.8rem); }
.lang-ka .page-head h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.page-head .lede { margin-bottom: 1.2rem; }

/* page-head illustration: doily, a big treat dropping in, a small one sliding in front */
.page-head .wrap { position: relative; }
.head-art { display: none; }
@media (min-width: 980px) {
  .page-head .wrap > :not(.head-art) { max-width: calc(100% - 340px); }
  .head-art { position: absolute; right: 0; top: 50%; display: block; width: 290px; height: 290px; translate: 0 -46%; }
  .head-doily { position: absolute; inset: 0; width: 100%; height: 100%; }
  .head-art .icon-big { position: absolute; left: 14%; top: 10%; width: 72%; height: 72%; transform-origin: 50% 100%; }
  .head-art .icon-side { position: absolute; right: -6%; bottom: 0; width: 42%; height: 42%; transform-origin: 50% 100%; }
  html.js:not(.no-hide) .head-doily { animation: doily-in 1s var(--bounce) backwards; }
  html.js:not(.no-hide) .head-art .icon-big { animation: drop .9s .3s backwards; }
  html.js:not(.no-hide) .head-art .icon-side { animation: slide-r .9s var(--bounce) .75s backwards; }
}

/* awning over the display case unrolls on arrival */
.awning-wrap { filter: drop-shadow(0 3px 0 var(--pink)); }
.awning {
  height: 64px; transform-origin: 50% 0;
  background: repeating-linear-gradient(90deg, var(--berry) 0 44px, #fff 44px 88px);
  -webkit-mask: radial-gradient(22px at 22px calc(100% - 22px), #000 97%, #0000 100%) 0 100% / 44px 44px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 22px) no-repeat;
  mask: radial-gradient(22px at 22px calc(100% - 22px), #000 97%, #0000 100%) 0 100% / 44px 44px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 22px) no-repeat;
}
html.js:not(.no-hide) .awning { animation: unroll 1s var(--bounce) .1s backwards; }
@keyframes unroll { from { transform: scaleY(0); } }

/* shelves of the display case */
.shelves .wrap { display: grid; gap: 1.5rem; }
.shelf { display: grid; gap: 1.2rem 2.6rem; align-items: center; padding: clamp(1.2rem, 3vw, 2.2rem); border-radius: 36px; background: var(--white); box-shadow: var(--soft); scroll-margin-top: 1rem; }
@media (min-width: 760px) {
  .shelf { grid-template-columns: 250px 1fr; }
  .shelf.flip { grid-template-columns: 1fr 250px; }
  .shelf.flip .shelf-art { order: 2; }
}
.shelf-art { display: grid; place-items: center; width: min(250px, 70vw); aspect-ratio: 1; justify-self: center; border-radius: 50%; background: var(--tone); outline: 3px dotted var(--white); outline-offset: -14px; }
.shelf-art .icon { width: 80%; height: auto; transition: transform .9s var(--bounce) .1s, opacity .4s .1s; }
html.js:not(.no-hide) .shelf:not(.in) .shelf-art .icon { opacity: 0; transform: translateY(-60px) scale(.8, 1.15); }
.shelf h2 { font-size: clamp(2rem, 4vw, 2.7rem); }
.shelf-copy p { max-width: 34em; margin: 0; font-size: 1.1rem; color: var(--muted); }
/* wide screens: cakes lead across the whole case, the other four sit in a 2x2 grid */
@media (min-width: 980px) {
  .shelves .wrap { grid-template-columns: 1fr 1fr; }
  .shelf, .shelf.flip { grid-template-columns: 170px 1fr; gap: 1rem 2rem; }
  .shelf.flip .shelf-art { order: 0; }
  .shelf-art { width: 170px; outline-offset: -10px; }
  .shelf:first-child { grid-column: 1 / -1; grid-template-columns: 250px 1fr; gap: 1rem 3rem; }
  .shelf:first-child .shelf-art { width: 250px; }
  .shelf:first-child .shelf-copy p { font-size: 1.2rem; }
}

/* contacts */
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-card h2 { font-size: 2rem; margin-bottom: .2rem; }
.contact-card .small { margin-bottom: 1.2rem; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: .5rem .7rem; border-bottom: 2px dotted var(--blush); font-weight: 600; text-align: start; }
.hours td { font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { background: var(--blush); color: var(--berry-ink); }
.hours tr.today th { border-radius: 12px 0 0 12px; } .hours tr.today td { border-radius: 0 12px 12px 0; }
.link-list { display: grid; gap: .3rem; margin: .6rem 0 0; padding: 0; list-style: none; font-weight: 800; }
.link-list a { display: inline-block; padding-block: .3rem; }
/* the plan of the main shop drawn from OpenStreetMap (src/map.mjs): a pastry-box lid with pistachio parks */
.plan { margin: 0; }
.plan-frame, .map { position: relative; overflow: hidden; border-radius: var(--r); background: var(--white); box-shadow: var(--soft); }
.plan-art { display: block; width: 100%; height: auto; }
.m-ground { fill: #fff8f0; }
.m-sea { fill: #cfe7ec; }
.m-coast { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.m-park { fill: #d9e9c9; }
.m-square { fill: #fffaf5; stroke: #f3dccd; stroke-width: 1; }
.m-water { fill: #bfe0e6; }
.m-beach { fill: #fbe9c6; }
.m-case path { fill: none; stroke: #f6d7c6; stroke-linecap: round; stroke-linejoin: round; }
.m-lane path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.m-lane .m-c4 { stroke: #fffaf2; }
.m-walk { fill: none; stroke: var(--berry); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 10; }
.m-labels text { fill: var(--muted); font-family: var(--font); font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.m-labels .m-own { fill: var(--berry-ink); font-weight: 900; }
.m-lm circle { fill: #fff; stroke: var(--pink); stroke-width: 2.4; }
.m-lm g { fill: none; stroke: var(--cocoa); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-lmtext text { fill: var(--choc); font-family: var(--font); font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: #fff8f0; stroke-width: 5; stroke-linejoin: round; }
.m-seaname { fill: #fff; font-family: var(--font); font-weight: 800; font-style: italic; letter-spacing: .1em; text-anchor: middle; }
.m-scale rect { fill: rgba(255, 250, 245, .92); }
.m-scale path { fill: none; stroke: var(--choc); stroke-width: 2; }
.m-scale text { fill: var(--choc); font-family: var(--font); font-weight: 800; text-anchor: middle; }
.m-tag rect { fill: #865c4b; }
.m-tag text { fill: var(--cream); font-family: var(--font); font-weight: 900; letter-spacing: .02em; text-anchor: middle; }
/* the pin drops onto the shop with a squash when the plan comes into view, and bounces when you point at it */
.m-pin-in { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s .35s var(--bounce), opacity .3s .35s; }
html.js:not(.no-hide) .reveal:not(.in) .m-pin-in { transform: translateY(-50px); opacity: 0; }
@media (hover: hover) { .plan:hover .m-pin-in, .map:not(.loaded):hover .m-pin-in { animation: boing .7s var(--ease); } }
.map-credit { margin: .5rem .4rem 0; font-size: .8rem; text-align: end; color: var(--muted); }
.map-credit a { color: var(--muted); }
.walk { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 0; font-weight: 900; color: var(--berry-ink); }
.walk::before { content: ""; width: 36px; height: 6px; flex: none; background: radial-gradient(circle, var(--berry) 2.6px, transparent 3px) 0 50% / 10px 6px repeat-x; }
.plan figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; }
.shop .map-open { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 0; }
/* home: the plan of the main shop next to the delivery card */
.where-row { display: grid; gap: 1.6rem 2.4rem; align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 880px) { .where-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.where-row .plan { max-width: 560px; }
.where-side .more { margin-top: 1.4rem; }
/* contacts: the plan is the stage; a tab loads its live map over it, pressed again it gives the plan back */
.maps { margin-top: 1.6rem; }
.map-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 1rem; }
.map-tab[aria-pressed="true"] { color: var(--cream); background: var(--choc); box-shadow: none; }
.map .plan-art[data-view="card"] { display: none; }
@media (max-width: 700px) { .map .plan-art[data-view="wide"] { display: none; } .map .plan-art[data-view="card"] { display: block; } }
.map iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: var(--white); }
html:not(.js) .map-tabs { display: none; }
.map-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1.2rem 0 0; }
.walk + .maps { margin-top: 1.2rem; }

/* delivery: a cake-box card with one button per service */
.delivery { padding: clamp(1.4rem, 3.5vw, 2.2rem); border-radius: var(--r); background: var(--white); box-shadow: var(--soft); }
.contact-grid + .delivery { margin-top: 1.5rem; }
.delivery h2, .delivery h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .4rem; }
.delivery p { margin: 0 0 1.1rem; color: var(--muted); }
.delivery-btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn .icon { width: 34px; height: 34px; margin: -8px -2px -8px -8px; flex: none; }
.delivery-btn { min-width: 9.5rem; }

/* ---------- footer: chocolate base under cream icing ---------- */
.site-footer { position: relative; padding: clamp(5rem, 8vw, 6.6rem) 0 2.2rem; background: var(--choc); color: var(--cream); }
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.2fr 1.3fr 1fr; } }
.footer-brand { margin: 0 0 .6rem; }
.footer-logo { display: block; width: 150px; height: auto; }
.site-footer a { color: var(--cream); text-decoration-color: rgba(255, 244, 234, .45); }
.site-footer a:hover { text-decoration-color: var(--pink); }
.site-footer :focus-visible { outline-color: var(--cream); }
.site-footer address { font-style: normal; }
.site-footer address p { margin: 0 0 .8rem; }
.footer-links { display: grid; gap: .05rem; margin: 0; padding: 0; list-style: none; font-weight: 800; }
.footer-links a, .footer-meta a { display: inline-block; padding-block: .35rem; }
.footer-meta { margin-top: 1.8rem; color: #ecd9ce; font-size: .9rem; }

/* mobile call bar slides up after the first screen */
.cta-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 5.6rem; }
  .cta-bar {
    position: fixed; inset: auto 0 0 0; z-index: 20; display: flex; gap: .8rem;
    padding: .9rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: var(--white);
    box-shadow: 0 -12px 30px -18px rgba(74, 44, 34, .5); transition: transform .5s var(--bounce);
  }
  .cta-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px; background: radial-gradient(circle 7px at 9px 10px, var(--white) 96%, #0000 100%) 0 0 / 18px 10px repeat-x; }
  .cta-bar .btn { flex: 1; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: translateY(130%); }
  html.js .cta-bar:not(.show):focus-within { transform: none; }
  html { scroll-padding-bottom: 6rem; }
}

/* ---------- root language chooser and 404 ---------- */
.chooser { display: grid; place-content: center; justify-items: center; gap: .5rem; min-height: calc(100svh - 16px); padding: 1.5rem var(--gutter) 2.5rem; text-align: center; }
.chooser .hero-visual { width: min(400px, 82vw); }
.chooser h1 { display: grid; justify-items: center; gap: .3rem; }
.chooser-logo { display: block; width: min(260px, 62vw); height: auto; margin-top: .4rem; }
.chooser-sub { max-width: 30em; color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 800; line-height: 1.4; letter-spacing: 0; }
.chooser .lede { margin: .4rem 0 0; }
.lang-btn { min-width: 9.5rem; }
.page-404 h1 { font-size: clamp(5rem, 16vw, 8rem); }
.crumbs .big-logo { display: block; width: 150px; height: auto; transform-origin: 50% 90%; }
html.js:not(.no-hide) .crumbs .big-logo { animation: jar-wobble .9s .3s var(--ease) backwards; }

/* ---------- scroll reveals: blocks pop up with a soft overshoot ---------- */
.reveal { transition: opacity .6s var(--ease), transform .85s var(--bounce); transition-delay: calc(var(--i, 0) * 80ms); }
html.js:not(.no-hide) .reveal:not(.in) { opacity: 0; transform: translateY(28px) scale(.96); }

/* ---------- page transitions (Chromium, Safari): the next page opens like a round cookie cutter ---------- */
@view-transition { navigation: auto; }
.lace { view-transition-name: lace; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .45s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .65s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes vt-out { to { opacity: .55; transform: scale(.985); } }
@keyframes vt-in { from { clip-path: circle(0% at 50% 22%); } to { clip-path: circle(150% at 50% 22%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js:not(.no-hide) .reveal:not(.in) { opacity: 1; transform: none; }
  html.js:not(.no-hide) .edge:not(.in) .drip, html.js:not(.no-hide) .edge:not(.in) .edge-band { transform: none; }
  html.js:not(.no-hide) .ring:not(.in) .arc { stroke-dashoffset: 0; }
  html.js:not(.no-hide) .seal-card:not(.in) .stars .fill { transform: none; }
  html.js:not(.no-hide) .shelf:not(.in) .shelf-art .icon { opacity: 1; transform: none; }
  html.js:not(.no-hide) .shop:not(.in) .shop-awning { transform: none; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}