/* Fika Eatery – web publik. Stili: posterat e ilustruar të Fika-s (gouache i sheshtë, letër, e kuqe + blu kobalt). */
:root {
  --paper: #F5F1EA; --paper-2: #EDE6DA; --card: #FFFDF9;
  --ink: #161412; --ink-2: #4A4540; --muted: #7A736B;
  --red: #D92B23; --red-deep: #B91F19; --blue: #1D5FE0; --blue-deep: #0E3C9E; --sky: #CFE0FA;
  --yellow: #F7B500; --pink: #F49AB0; --blush: #F6A9B8; --orange: #F2711C; --green: #2F8F4E;
  --skin: #FCEFE8; --bread: #D9963F;
  --f-display: 'Fraunces', Georgia, serif; --f-hand: 'Caveat', cursive; --f-body: 'DM Sans', system-ui, sans-serif;
  --r: 18px; --shadow: 4px 4px 0 var(--ink); --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--f-body); overflow-x: hidden; }
/* kokrriza e letrës */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .35  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.05; margin: 0 0 .4em; letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "WONK" 0; }
h1 { font-size: clamp(44px, 7vw, 92px); }
h2 { font-size: clamp(34px, 4.6vw, 58px); }
h3 { font-size: clamp(22px, 2.2vw, 28px); }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.hand { font-family: var(--f-hand); font-weight: 600; font-size: 1.5em; line-height: 1; color: var(--red); display: inline-block; transform: rotate(-3deg); margin-bottom: 8px; }
.hand.blue { color: var(--blue); }
.eyebrow { font: 700 13px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; display: inline-flex; gap: 8px; align-items: center; }
.eyebrow svg { width: 18px; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 36em; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.center { text-align: center; }
section { position: relative; }
.sec { padding: clamp(64px, 9vw, 120px) 0; }
.sec-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sec-head .lead { margin-inline: auto; }

/* butonat – pllaka posteri me hije të plotë */
.btn { --bg: var(--ink); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 2px solid var(--ink); font: 700 16px/1 var(--f-body); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.red { --bg: var(--red); }
.btn.blue { --bg: var(--blue); }
.btn.yellow { --bg: var(--yellow); --fg: var(--ink); }
.btn.light { --bg: var(--card); --fg: var(--ink); }
.btn.sm { padding: 10px 16px; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
.btn svg { width: 18px; height: 18px; }
.link { font-weight: 700; color: var(--blue); text-decoration: none; border-bottom: 2px solid currentColor; }
.link:hover { color: var(--red); }

/* njoftimi lart */
.announce { background: var(--blue); color: #fff; font-size: 14.5px; font-weight: 500; text-align: center; padding: 9px 16px; }
.announce a { color: #fff; font-weight: 700; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 2px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--ink); }
.site-header .bar { display: flex; align-items: center; gap: 24px; height: 78px; }
.logo { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.logo-flower { width: 40px; height: 40px; flex: none; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.logo:hover .logo-flower { transform: rotate(72deg); }
.logo-word { font: 500 38px/1 var(--f-display); letter-spacing: -.02em; font-variation-settings: "SOFT" 0; margin-top: -6px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 8px 14px; border-radius: 999px; }
.nav a:hover { background: var(--paper-2); }
.nav a.active { background: var(--ink); color: #fff; }
.head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; font-weight: 700; font-size: 13px; }
.lang a { padding: 6px 10px; text-decoration: none; }
.lang a.on { background: var(--ink); color: #fff; }
.burger { display: none; width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 50%; background: var(--card); cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 4px auto; transition: transform .2s; }
.mnav { display: none; }

/* hero */
.hero { padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 32px; align-items: center; }
.hero h1 { margin: 10px 0 22px; }
.hero h1 em { font-style: italic; color: var(--red); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 34px; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--ink); font-weight: 700; font-size: 14px; }
.badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent); }
.badge .dot.off { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 25%, transparent); }
.badge.blue { background: var(--blue); color: #fff; }
.hero-art { position: relative; aspect-ratio: 1 / 1.05; }
.hero-art .blob { position: absolute; inset: 6% 0 2% 8%; background: var(--sky); border-radius: 52% 48% 44% 56% / 46% 52% 48% 54%; }
.hero-art .blob.two { inset: auto 2% 4% auto; width: 30%; height: 26%; background: var(--pink); border-radius: 50%; }
.hero-art svg.girl { position: relative; height: 100%; width: auto; margin-inline: auto; }
.float { position: absolute; animation: floaty 6s ease-in-out infinite; }
.float.f1 { width: 13%; top: 4%; right: 6%; }
.float.f2 { width: 9%; bottom: 18%; left: 4%; animation-delay: -2s; }
.float.f3 { width: 7%; top: 40%; right: 0; animation-delay: -4s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(14deg); } }
.sway { animation: sway 7s ease-in-out infinite; }
.sway2 { animation: sway 8s ease-in-out infinite reverse; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.bob { animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* shiriti lëvizës */
.marquee { background: var(--red); color: #fff; border-block: 2px solid var(--ink); overflow: hidden; transform: rotate(-1.2deg); margin: 0 -10px; }
.marquee .track { display: flex; gap: 0; width: max-content; animation: marq 38s linear infinite; padding: 14px 0; }
.marquee span { font: 600 28px/1 var(--f-display); font-style: italic; padding: 0 22px; display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; }
.marquee span::after { content: "✿"; font-style: normal; color: var(--yellow); }
@keyframes marq { to { transform: translateX(-50%); } }

/* çka është fika */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.about-grid .art { max-width: 460px; margin-inline: auto; width: 100%; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.fact { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 18px 16px; }
.fact svg { width: 54px; height: 54px; margin-bottom: 8px; }
.fact b { display: block; font-family: var(--f-display); font-size: 19px; line-height: 1.15; margin-bottom: 4px; }
.fact small { color: var(--muted); font-size: 14px; line-height: 1.4; display: block; }
.pron { font-family: var(--f-display); font-size: 22px; color: var(--ink-2); }
.pron i { color: var(--blue); }

/* kartat e menysë */
.items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.item-card { background: var(--card); border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.item-card:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 6px 6px 0 var(--ink); }
.item-card .pic { aspect-ratio: 1 / .82; display: grid; place-items: center; position: relative; }
.item-card .pic svg { width: 62%; }
.item-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.item-card:nth-child(4n+1) .pic { background: var(--sky); }
.item-card:nth-child(4n+2) .pic { background: #FDE3E7; }
.item-card:nth-child(4n+3) .pic { background: #FFF0C2; }
.item-card:nth-child(4n+4) .pic { background: #DCEBDD; }
.item-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; border-top: 2px solid var(--ink); }
.item-card h3 { font-size: 21px; margin: 0 0 6px; }
.item-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.item-card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { font: 700 20px/1 var(--f-display); }
.price s { font: 500 14px var(--f-body); color: var(--muted); margin-right: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--paper-2); white-space: nowrap; }
.tag.spicy { background: #FFD9D6; color: var(--red-deep); }
.tag.veg { background: #D8F0DE; color: #1F6B38; }
.tag.popular { background: var(--yellow); color: var(--ink); }
.tag.new { background: var(--blue); color: #fff; }
.tag.signature { background: var(--pink); color: var(--ink); }
.tag.wolt { background: #00C2E8; color: var(--ink); text-decoration: none; }
.pic .tags { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ofertat – postera */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.offer { --c: var(--red); background: var(--c); color: #fff; border: 2px solid var(--ink); border-radius: 26px; padding: 26px; position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; box-shadow: var(--shadow); text-decoration: none; transition: transform .2s; }
.offer:hover { transform: rotate(-1deg) translateY(-4px); }
.offer.blue { --c: var(--blue); }
.offer.yellow { --c: var(--yellow); color: var(--ink); }
.offer.pink { --c: var(--pink); color: var(--ink); }
.offer .stamp { position: absolute; top: 18px; right: 18px; width: 82px; height: 82px; border-radius: 50%; background: var(--card); color: var(--ink); display: grid; place-items: center; text-align: center; font: 700 17px/1 var(--f-display); transform: rotate(12deg); border: 2px solid var(--ink); }
.offer h3 { font-size: 34px; margin-top: auto; max-width: 70%; }
.offer p { opacity: .92; font-size: 15.5px; margin: 0 0 16px; max-width: 90%; }
.offer .row { display: flex; align-items: baseline; gap: 10px; font: 700 30px/1 var(--f-display); }
.offer .row s { font: 500 17px var(--f-body); opacity: .75; }
.offer svg.ic { position: absolute; width: 46%; right: -6%; bottom: 24%; opacity: .98; transform: rotate(-8deg); }

/* modeli i letrës së tabakasë (blu) */
.tray { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%231D5FE0'%3E%3Cpath d='M20 18c10-6 22 2 18 12s-20 10-22 2 0-10 4-14z'/%3E%3Ccircle cx='96' cy='30' r='9'/%3E%3Cpath d='M128 60l8 14 16 2-12 10 4 16-16-8-14 8 4-16-12-10 16-2z'/%3E%3Cpath d='M30 88c0-10 18-10 18 0s-8 14-18 22c-10-8-18-12-18-22s18-10 18 0z'/%3E%3Cpath d='M78 104c14 0 20 10 12 18s-26 6-26-4 4-14 14-14z'/%3E%3Cpath d='M118 128a12 12 0 1 1 24 0a12 12 0 1 1-24 0zm8 0a4 4 0 1 0 8 0a4 4 0 1 0-8 0z'/%3E%3Cpath d='M60 50c6 0 8 6 4 10l-8 8-4-12c0-4 4-6 8-6z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px; }
.tray-band { border-block: 2px solid var(--ink); }

/* lokacionet */
.locs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.loc { background: var(--card); border: 2px solid var(--ink); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.loc .art { border-bottom: 2px solid var(--ink); aspect-ratio: 4 / 3; overflow: hidden; }
.loc .art svg { width: 100%; height: 100%; }
.loc .body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.loc h3 { font-size: 34px; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status { font: 700 13px/1 var(--f-body); padding: 7px 12px; border-radius: 999px; background: #D8F0DE; color: #1F6B38; display: inline-flex; align-items: center; gap: 6px; }
.status.closed { background: #FFE0DD; color: var(--red-deep); }
.status.soon { background: var(--yellow); color: var(--ink); }
.loc dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 15.5px; }
.loc dt { font-weight: 700; color: var(--muted); }
.loc dd { margin: 0; }
.loc .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.waitlist { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist input { flex: 1 1 220px; }

/* rezervimi */
.book-band { background: var(--yellow); border-block: 2px solid var(--ink); overflow: hidden; }
.book-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.book-grid .art { max-width: 380px; margin-inline: auto; width: 100%; }
.art > svg { width: 100%; height: auto; }
.quick { background: var(--card); border: 2px solid var(--ink); border-radius: 26px; padding: 28px; box-shadow: var(--shadow); }
.quick .grid4 { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 12px; align-items: end; }

/* format */
.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
label.f { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
label.f small { font-weight: 500; color: var(--muted); }
input, select, textarea { font: 500 16px/1.3 var(--f-body); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 12px 14px; width: 100%; min-height: 50px; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 3px 3px 0 var(--blue); border-color: var(--blue); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 500; }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--red); flex: none; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slots label { position: relative; }
.slots input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.slots span { display: inline-block; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; font-weight: 700; font-size: 15px; background: #fff; }
.slots input:checked + span { background: var(--red); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.slots input:disabled + span { opacity: .35; text-decoration: line-through; }
.slots input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.alert { padding: 14px 18px; border-radius: 14px; border: 2px solid var(--ink); background: #D8F0DE; font-weight: 600; margin-bottom: 20px; }
.alert.err { background: #FFE0DD; }
.alert ul { margin: 0; padding-left: 18px; }
.hp { position: absolute; left: -9999px; }

/* faqet e brendshme */
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.page-hero .wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; align-items: center; }
.page-hero h1 { font-size: clamp(48px, 7vw, 96px); margin-top: 8px; }
.page-hero .ic { width: min(260px, 100%); justify-self: end; }
.panel { background: var(--card); border: 2px solid var(--ink); border-radius: 26px; padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow); }
.two-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: start; }

/* menyja e plotë */
.menu-nav { position: sticky; top: 78px; z-index: 30; background: var(--paper); border-block: 2px solid var(--ink); }
.menu-nav .scroller { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.menu-nav .scroller::-webkit-scrollbar { display: none; }
.menu-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); }
.menu-nav a svg { width: 28px; height: 28px; }
.menu-nav a.on { background: var(--ink); color: #fff; }
.loc-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.loc-switch a { text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); font-size: 14px; }
.loc-switch a.on { background: var(--blue); color: #fff; }
.menu-cat { padding: 56px 0 8px; scroll-margin-top: 150px; }
.menu-cat header { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.menu-cat header svg { width: 76px; height: 76px; flex: none; }
.menu-cat h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); }
.menu-cat .note { font-family: var(--f-hand); font-size: 24px; color: var(--blue); transform: rotate(-2deg); }
.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 48px; }
.mi { padding: 16px 0; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: start; }
.mi .thumb { width: 64px; height: 64px; border-radius: 14px; border: 2px solid var(--ink); object-fit: cover; grid-row: span 2; }
.mi .top { display: flex; align-items: baseline; gap: 10px; grid-column: 2; }
.mi.noimg .top, .mi.noimg p, .mi.noimg .tags { grid-column: 1 / -1; }
.mi h3 { font: 600 20px/1.2 var(--f-display); margin: 0; }
.mi .lead-dots { flex: 1; border-bottom: 2px dotted var(--muted); transform: translateY(-5px); min-width: 20px; }
.mi .price { font-size: 19px; white-space: nowrap; }
.mi p { grid-column: 2; font-size: 14.5px; color: var(--ink-2); margin: 4px 0 0; line-height: 1.45; }
.mi .tags { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mi.out { opacity: .45; }
.mi.out h3::after { content: attr(data-out); font: 700 11px var(--f-body); background: var(--ink); color: #fff; padding: 3px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.wolt-cta { margin: 64px 0 0; background: #00C2E8; color: var(--ink); border: 2px solid var(--ink); border-radius: 26px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: var(--shadow); }
.wolt-cta h3 { margin: 0; font-size: 30px; }

/* orari */
.hours { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.hours td { padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.hours td:last-child { text-align: right; font-weight: 700; }
.hours tr.today td { color: var(--red); font-weight: 700; }

/* karriera */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.job { --c: var(--blue); background: var(--c); color: #fff; border: 2px solid var(--ink); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; min-height: 240px; }
.job.red { --c: var(--red); }
.job.yellow { --c: var(--yellow); color: var(--ink); }
.job.pink { --c: var(--pink); color: var(--ink); }
.job .kp { font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.job h3 { font-size: 32px; margin: 0; }
.job p { font-size: 15px; opacity: .95; margin: 0; white-space: pre-line; line-height: 1.55; }
.job .meta { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.job .meta span { background: rgba(255, 255, 255, .22); padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.job.yellow .meta span, .job.pink .meta span { background: rgba(0, 0, 0, .1); }
.careers-band { background: var(--blue); color: #fff; border-block: 2px solid var(--ink); overflow: hidden; }
.careers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.careers-grid .art { border: 2px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 6px 6px 0 var(--ink); max-width: 440px; width: 100%; transform: rotate(-2deg); }
.careers-band .chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 28px; }
.careers-band .chips span { background: #fff; color: var(--ink); border: 2px solid var(--ink); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }

/* histori/kohë */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: 18px 20px; }
.timeline b { font: 600 22px/1.1 var(--f-display); color: var(--red); }
.quote { font: italic 500 clamp(26px, 3.4vw, 42px)/1.25 var(--f-display); text-align: center; max-width: 900px; margin: 0 auto; font-variation-settings: "SOFT" 100, "WONK" 1; }
.quote small { display: block; font: 600 26px var(--f-hand); color: var(--blue); margin-top: 16px; font-style: normal; }

/* IG band */
.social-band { text-align: center; }
.social-band .handle { font: 600 clamp(40px, 7vw, 88px)/1 var(--f-display); text-decoration: none; display: inline-block; margin: 6px 0 22px; font-style: italic; }
.social-band .handle:hover { color: var(--red); }

/* footer */
.site-footer { background: var(--blue-deep); color: #fff; padding: 72px 0 28px; margin-top: 0; border-top: 2px solid var(--ink); position: relative; overflow: hidden; }
.site-footer .grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.site-footer .logo { color: #fff; }
.site-footer h4, .site-footer .fh { font-size: 20px; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.site-footer a { text-decoration: none; opacity: .9; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.site-footer .base { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; opacity: .8; }
.site-footer::after { content: "fika"; position: absolute; right: -2%; bottom: -60px; font: 600 260px/1 var(--f-display); color: #fff; opacity: .06; pointer-events: none; letter-spacing: -.04em; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); opacity: 1; }
.socials a:hover { background: var(--red); text-decoration: none; }
.socials svg { width: 20px; height: 20px; }

/* falënderimi */
.thanks { text-align: center; max-width: 640px; margin: 0 auto; }
.thanks .code { display: inline-block; font: 700 34px/1 var(--f-display); letter-spacing: .08em; background: var(--yellow); border: 2px solid var(--ink); padding: 14px 22px; border-radius: 16px; margin: 12px 0 20px; box-shadow: var(--shadow); }
.summary { text-align: left; margin: 24px 0; }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.summary dt { color: var(--muted); font-weight: 700; }
.summary dd { margin: 0; font-weight: 600; }

/* lart */
.to-top { position: fixed; right: 18px; bottom: 18px; width: 50px; height: 50px; border-radius: 50%; background: var(--red); color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; font-size: 20px; }
.to-top.show { opacity: 1; pointer-events: auto; }

/* shfaqja gjatë skrollimit */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sway, .sway2, .bob, .float, .marquee .track { animation: none; } html { scroll-behavior: auto; } }

/* responsive */
@media (max-width: 1080px) {
  .items-grid { grid-template-columns: repeat(3, 1fr); }
  .nav a { padding: 8px 10px; font-size: 15px; }
  .quick .grid4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .nav, .head-actions .btn.blue { display: none; }
  .burger { display: block; }
  .mnav.open { display: block; border-top: 2px solid var(--ink); background: var(--paper); padding: 12px 0 22px; }
  .mnav a { display: block; padding: 12px 16px; font: 600 24px var(--f-display); text-decoration: none; }
  .mnav .btns { display: flex; gap: 10px; padding: 10px 16px 0; flex-wrap: wrap; }
  .hero-grid, .about-grid, .book-grid, .careers-grid, .two-col, .page-hero .wrap { grid-template-columns: 1fr; }
  .hero-art { max-width: 460px; margin-inline: auto; width: 100%; }
  .page-hero .ic { justify-self: start; width: 140px; order: -1; }
  .locs, .offers, .jobs { grid-template-columns: 1fr; }
  .offers { max-width: 520px; margin-inline: auto; }
  .items-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-list { grid-template-columns: 1fr; }
  .site-footer .grid { grid-template-columns: 1fr 1fr; }
  .careers-grid .art { margin-inline: auto; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .site-header .bar { height: 66px; gap: 12px; }
  .menu-nav { top: 66px; }
  .logo-word { font-size: 32px; }
  .logo-flower { width: 34px; height: 34px; }
  .head-actions .btn.red { padding: 10px 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
  .lang { display: none; }
  .mnav .lang-m { display: flex; }
  .facts { grid-template-columns: 1fr; }
  .items-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .item-card .body { padding: 12px; }
  .item-card h3 { font-size: 17px; }
  .item-card p { display: none; }
  .price { font-size: 17px; }
  .form .row2, .form .row3, .quick .grid4 { grid-template-columns: 1fr; }
  .site-footer .grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .marquee span { font-size: 22px; }
  .loc .body { padding: 20px; }
  .hero .cta .btn { flex: 1 1 auto; }
}

/* vlerësimet */
.reviews-band { padding-top: clamp(40px, 6vw, 80px); }
.scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto 22px; }
.score { background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 24px; padding: 22px 24px; box-shadow: var(--shadow); text-decoration: none; display: grid; gap: 4px; transition: transform .2s; }
.score:hover { transform: rotate(-1deg) translateY(-3px); }
.score.blue { background: var(--blue); } .score.yellow { background: var(--yellow); color: var(--ink); }
.score b { font: 600 54px/1 var(--f-display); } .score b em { font-size: 24px; font-style: normal; opacity: .8; }
.score .stars { font-weight: 700; letter-spacing: 2px; } .score small { opacity: .9; font-size: 14px; }
.topics { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.topics span { background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14.5px; }
.topics i { font-style: normal; background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 8px; margin-left: 6px; font-size: 12px; }
.review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; gap: 20px; max-width: 1100px; margin: 0 auto; }
.rcard { margin: 0; background: var(--card); border: 2px solid var(--ink); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.rcard:nth-child(3n+2) { transform: rotate(.8deg); } .rcard:nth-child(3n) { transform: rotate(-.8deg); }
.rcard .stars { color: var(--yellow); font-size: 20px; letter-spacing: 2px; -webkit-text-stroke: 1px var(--ink); }
.rcard blockquote { margin: 10px 0 14px; font: 500 20px/1.35 var(--f-display); }
.rcard figcaption { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .scores { grid-template-columns: 1fr; } .score b { font-size: 44px; } }