/* ==========================================================================
   Vesopa Studio — the design system every site built by talking is made of.

   The model writes semantic HTML with these classes and nothing else; the
   theme is nine CSS variables (src/builder/kit.js themeCss). That split is
   why a whole site can be re-coloured in one line, and why every site looks
   designed rather than generated. Icons are appended by kit.js iconCss().
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-b), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-h), Georgia, serif; line-height: 1.08; margin: 0 0 .45em; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: 1.28rem; letter-spacing: -.005em; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
:lang(bn) body { line-height: 1.85; }
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3 { line-height: 1.3; letter-spacing: 0; }

/* ---- Layout -------------------------------------------------------------- */
.v-wrap { width: min(1140px, 100% - 48px); margin-inline: auto; }
.v-section { padding: clamp(60px, 9vw, 112px) 0; position: relative; }
.v-alt { background: var(--soft); }
.v-dark { background: var(--ink); color: var(--bg); }
.v-dark .v-lead, .v-dark .v-muted, .v-dark .v-item p, .v-dark .v-stat span { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.v-center { text-align: center; }
.v-head { max-width: 740px; margin-bottom: clamp(32px, 5vw, 60px); }
.v-center .v-head, .v-head.v-center { margin-inline: auto; }
.v-eyebrow {
  display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1.1rem;
  font-family: var(--font-b), sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.v-eyebrow::before { content: ""; width: 1.8em; height: 2px; border-radius: 2px; background: currentColor; }
.v-center .v-eyebrow::before { display: none; }
.v-lead { font-size: clamp(1.06rem, 1.6vw, 1.26rem); color: var(--muted); max-width: 38em; }
.v-center .v-lead { margin-inline: auto; }
.v-muted { color: var(--muted); }
.v-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.v-center .v-actions { justify-content: center; }

/* ---- Buttons --------------------------------------------------------------- */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .92em 1.55em; border-radius: calc(var(--radius) * .7 + 4px); border: 2px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .2s ease, box-shadow .2s ease;
}
.v-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--accent) 85%, transparent); }
.v-btn.v-ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: none; }
.v-dark .v-btn.v-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); }
.v-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--accent); text-decoration: none; }

/* ---- Navigation ---------------------------------------------------------------- */
.v-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.v-nav .v-wrap { display: flex; align-items: center; gap: 20px; min-height: 74px; }
.v-brand { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-h), serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -.015em; text-decoration: none; white-space: nowrap; }
.v-brand .v-i { color: var(--accent); width: 1.2em; height: 1.2em; }
.v-links { display: flex; align-items: center; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.v-links::-webkit-scrollbar { display: none; }
.v-links a { padding: .5em .9em; border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.v-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.v-nav .v-btn { padding: .62em 1.15em; font-size: .92rem; }
@media (max-width: 760px) {
  .v-nav .v-wrap { flex-wrap: wrap; gap: 6px 14px; padding: 12px 0; min-height: 0; }
  .v-links { order: 3; width: 100%; margin: 0 -8px; }
  .v-nav .v-btn { margin-left: auto; }
}

/* ---- Hero ----------------------------------------------------------------------- */
.v-hero { position: relative; overflow: hidden; padding: clamp(60px, 10vw, 128px) 0 clamp(60px, 9vw, 104px); }
.v-hero::before {
  content: ""; position: absolute; top: -18%; right: -12%; width: min(62vw, 780px); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 66%);
}
.v-hero > .v-wrap { position: relative; }
.v-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.v-hero h1 em, h2 em { font-style: italic; color: var(--accent); }
.v-hero.v-center .v-lead { margin-inline: auto; }
@media (max-width: 860px) { .v-hero-grid { grid-template-columns: 1fr; } }

/* Art: a designed block where a photo would go -- gradient, glow and a big emoji or icon. */
.v-art {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius) * 1.8 + 6px);
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--soft)));
  box-shadow: 0 50px 90px -46px color-mix(in srgb, var(--ink) 55%, transparent);
}
.v-art::before { content: ""; position: absolute; inset: 8% 8% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 62%); }
.v-art[data-emoji]::after { content: attr(data-emoji); position: relative; font-size: clamp(5rem, 13vw, 9.5rem); line-height: 1; filter: drop-shadow(0 20px 26px rgba(0,0,0,.2)); }
/* Named outright: behind a web font the browser's fallback can miss the colour emoji face. */
.v-art[data-emoji]::after, .v-ph[data-emoji]::after { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; }
.v-art > .v-i { position: relative; width: 38%; height: 38%; color: var(--accent-ink); opacity: .9; }
.v-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-art.v-wide { aspect-ratio: 16 / 10; }
.v-art.v-square { aspect-ratio: 1; }
.v-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: .45em;
  padding: .55em .95em; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: .9rem; line-height: 1.2;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.35);
}
.v-tag .v-i { color: var(--accent); }
.v-tag.v-top { top: 16px; bottom: auto; left: auto; right: 16px; }

/* ---- Cards and grids --------------------------------------------------------------- */
.v-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.v-grid.v-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.v-grid.v-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.v-card {
  position: relative; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 20px 40px -32px color-mix(in srgb, var(--ink) 30%, transparent);
}
.v-dark .v-card { background: color-mix(in srgb, var(--bg) 7%, transparent); border-color: color-mix(in srgb, var(--bg) 14%, transparent); box-shadow: none; }
.v-card h3 { margin-bottom: .35em; }
.v-card p:last-child { margin-bottom: 0; }
.v-card.v-feature { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.v-card.v-feature .v-muted, .v-card.v-feature p { color: color-mix(in srgb, var(--accent-ink) 82%, transparent); }
.v-ico {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px;
  border-radius: calc(var(--radius) * .6 + 4px); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.v-ico .v-i { width: 26px; height: 26px; }
.v-card.v-feature .v-ico { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: var(--accent-ink); }

/* ---- Split: text beside art ---------------------------------------------------------------- */
.v-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.v-split.v-flip > :first-child { order: 2; }
@media (max-width: 860px) { .v-split { grid-template-columns: 1fr; } .v-split.v-flip > :first-child { order: 0; } }
.v-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.v-list li { display: flex; align-items: flex-start; gap: .75em; }
.v-list li > .v-i { margin-top: .28em; color: var(--accent); }

/* ---- Numbers ------------------------------------------------------------------------------------ */
.v-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; margin-top: 40px; }
.v-stat b { display: block; font-family: var(--font-h), serif; font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; letter-spacing: -.03em; color: var(--accent); margin-bottom: .2em; }
.v-stat span { color: var(--muted); font-size: .95rem; }

/* ---- Menu / price list ------------------------------------------------------------------------------ */
.v-menu { display: grid; gap: 4px clamp(28px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.v-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 18px; padding: 16px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.v-item h3 { margin: 0; font-size: 1.12rem; }
.v-item p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .95rem; }
.v-price { font-family: var(--font-h), serif; font-weight: 700; font-size: 1.14rem; color: var(--accent); white-space: nowrap; }
.v-menu-group { grid-column: 1 / -1; margin: 28px 0 4px; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-family: var(--font-b), sans-serif; }
.v-menu-group:first-child { margin-top: 0; }

/* ---- Pricing plans ----------------------------------------------------------------------------------- */
.v-plan { display: flex; flex-direction: column; gap: 6px; }
.v-plan .v-amount { font-family: var(--font-h), serif; font-size: 2.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.v-plan .v-amount small { font-size: .95rem; font-weight: 500; color: var(--muted); font-family: var(--font-b), sans-serif; letter-spacing: 0; }
.v-plan .v-list { margin-bottom: 24px; }
.v-plan .v-btn { margin-top: auto; }

/* ---- Gallery and photo placeholders ------------------------------------------------------------------------ */
.v-gallery { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 17vw, 220px); }
.v-gallery > * { min-height: 0; }
.v-gallery > :first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .v-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }
.v-ph {
  position: relative; display: grid; place-items: center; overflow: hidden; min-height: 150px; margin: 0; border-radius: var(--radius);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 34%, var(--soft)), var(--soft) 72%);
  color: color-mix(in srgb, var(--accent) 75%, var(--ink));
}
.v-gallery .v-ph { min-height: 0; height: 100%; }
.v-ph[data-emoji]::after { content: attr(data-emoji); font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1; }
.v-ph > .v-i { width: 30%; height: 30%; max-width: 76px; max-height: 76px; opacity: .8; }
.v-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-ph figcaption { position: absolute; left: 12px; bottom: 12px; padding: .32em .75em; border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink); font-size: .85rem; font-weight: 700; }

/* ---- Real photographs ------------------------------------------------------
   A tile with a photo in it stops being an illustration: the emoji and the
   gloss that make the art look finished would sit ON the picture, so both go.
   The emoji stays in the markup as `data-emoji` all the same — it is what the
   tile shows while the photo loads and if the photo ever fails. */
.v-art.has-photo::before, .v-art.has-photo::after,
.v-ph.has-photo::after { content: none; }
.v-art.has-photo, .v-ph.has-photo { background: var(--soft); }
.v-art img, .v-ph img { z-index: 0; }
.v-ph.has-photo figcaption { z-index: 1; }

/* The credit the licence asks for. Small and quiet, bottom right, so it never
   fights the caption (bottom left) or the tag on a hero tile — but a real link,
   because "credit with a link" is the condition, not a nicety. */
.v-credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .18em .55em; border-radius: 6px;
  background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .92);
  font-size: .68rem; font-weight: 500; line-height: 1.5; text-decoration: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.v-credit:hover { color: #fff; background: rgba(0, 0, 0, .6); }
.v-ph.has-photo figcaption ~ .v-credit { bottom: auto; top: 8px; }

/* ---- Reviews ------------------------------------------------------------------------------------------------ */
.v-quote { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.v-quote p { margin: 0; font-family: var(--font-h), serif; font-size: 1.18rem; line-height: 1.5; letter-spacing: -.005em; }
.v-quote cite { display: flex; align-items: center; gap: .7em; font-style: normal; font-weight: 700; font-size: .95rem; color: var(--muted); }
.v-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 800; font-family: var(--font-b), sans-serif; }
.v-stars { color: var(--accent); letter-spacing: .12em; font-size: 1.05rem; line-height: 1; }

/* ---- Opening hours, contact, map ------------------------------------------------------------------------------ */
.v-hours { list-style: none; margin: 0; padding: 0; }
.v-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.v-hours li:last-child { border-bottom: 0; }
.v-hours li span:first-child { font-weight: 600; }
.v-hours li.v-today { color: var(--accent); font-weight: 700; }
.v-contact { display: grid; gap: 16px; margin-top: 24px; }
.v-contact > a, .v-contact > p { display: flex; align-items: center; gap: .85em; margin: 0; font-weight: 600; text-decoration: none; }
.v-contact .v-i { width: 1.35em; height: 1.35em; color: var(--accent); }
.v-contact > a.v-btn { display: inline-flex; justify-self: start; margin-top: 10px; }
.v-contact .v-actions, .v-contact + .v-actions { margin-top: 18px; }
.v-center .v-contact { justify-items: center; }
.v-center .v-contact > .v-btn { justify-self: center; }
.v-map {
  display: grid; place-items: center; min-height: 280px; border-radius: var(--radius); text-decoration: none; font-weight: 700; gap: 10px;
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--soft);
}
.v-map .v-i { width: 44px; height: 44px; color: var(--accent); }

/* ---- Questions ------------------------------------------------------------------------------------------------------ */
.v-faq { max-width: 820px; margin-inline: auto; }
.v-faq details { padding: 20px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.v-faq summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.08rem; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.v-faq details[open] summary::after { transform: rotate(45deg); }
.v-faq details p { margin: .8em 0 0; color: var(--muted); }

/* ---- Call to action band --------------------------------------------------------------------------------------------- */
.v-cta {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: clamp(36px, 6vw, 76px); border-radius: calc(var(--radius) * 1.6 + 6px); background: var(--accent); color: var(--accent-ink);
}
.v-cta::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--accent-ink) 12%, transparent); }
.v-cta h2 { margin: 0 0 .25em; }
.v-cta p { margin: 0; color: color-mix(in srgb, var(--accent-ink) 84%, transparent); }
.v-cta .v-btn { position: relative; z-index: 1; background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); box-shadow: none; }
@media (max-width: 760px) { .v-cta { grid-template-columns: 1fr; } }

/* ---- Footer ------------------------------------------------------------------------------------------------------------ */
.v-footer { padding: 48px 0 40px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); color: var(--muted); font-size: .95rem; }
.v-footer .v-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; }
.v-footer a { text-decoration: none; }
.v-footer .v-links { margin-left: 0; }
.v-social { display: flex; gap: 10px; }
.v-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); transition: background .15s; }
.v-social a:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ---- Icons --------------------------------------------------------------------------------------------------------------- */
.v-i {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}

/* ---- A little motion, for people who have not asked for none ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .v-hero h1, .v-hero .v-lead, .v-hero .v-actions, .v-art { animation: v-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
  .v-hero .v-lead { animation-delay: .08s; }
  .v-hero .v-actions { animation-delay: .16s; }
  .v-art { animation-delay: .1s; }
  @keyframes v-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* icons */
.v-i[data-i="arrow"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.v-i[data-i="award"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14l-1.5 7 5-2.5 5 2.5-1.5-7'/%3E%3C/svg%3E")}
.v-i[data-i="bag"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6zM9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E")}
.v-i[data-i="cake"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16v-7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2zM4 15c2 1.5 4 1.5 6 0s4-1.5 6 0 3 1 4 0M12 11V7'/%3E%3Cpath d='M12 3.5c.8.8 1 1.6.5 2.3a.7.7 0 0 1-1 0c-.5-.7-.3-1.5.5-2.3z'/%3E%3C/svg%3E")}
.v-i[data-i="calendar"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.v-i[data-i="camera"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v12H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E")}
.v-i[data-i="check"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
.v-i[data-i="clock"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.v-i[data-i="coffee"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13v5a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6zM17 11h1.5a2.5 2.5 0 0 1 0 5H17M8 3c0 1.5 1 1.5 1 3M12 3c0 1.5 1 1.5 1 3'/%3E%3C/svg%3E")}
.v-i[data-i="facebook"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v3H7v4h3v6h4v-6h3l1-4h-4V8z'/%3E%3C/svg%3E")}
.v-i[data-i="gift"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='1'/%3E%3Cpath d='M12 8v13M3 12h18M12 8c-2-4-6-4-6-1.5S10 8 12 8zm0 0c2-4 6-4 6-1.5S14 8 12 8z'/%3E%3C/svg%3E")}
.v-i[data-i="globe"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.v-i[data-i="heart"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9.3-8.6C1.2 8.5 3 5 6.4 5c2 0 3.6 1.2 5.6 3.3C14 6.2 15.6 5 17.6 5 21 5 22.8 8.5 21.3 11.4 19 15.6 12 20 12 20z'/%3E%3C/svg%3E")}
.v-i[data-i="home"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.v-i[data-i="instagram"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E")}
.v-i[data-i="leaf"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-9 6-14 15-14 0 9-5 15-14 15'/%3E%3Cpath d='M5 19c3-5 6-8 10-10'/%3E%3C/svg%3E")}
.v-i[data-i="mail"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.v-i[data-i="pin"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.v-i[data-i="phone"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.v-i[data-i="scissors"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='3'/%3E%3Ccircle cx='6' cy='17' r='3'/%3E%3Cpath d='M8.5 8.5L20 19M8.5 15.5L20 5'/%3E%3C/svg%3E")}
.v-i[data-i="shield"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.v-i[data-i="sparkles"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/%3E%3C/svg%3E")}
.v-i[data-i="star"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E")}
.v-i[data-i="sun"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.v-i[data-i="truck"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E")}
.v-i[data-i="users"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6 6 0 0 1 3.5 6'/%3E%3C/svg%3E")}
.v-i[data-i="utensils"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M5 3v5a2 2 0 0 0 4 0V3M7 11v10M17 3c-2 2-3 4.5-3 8h3v10'/%3E%3C/svg%3E")}
.v-i[data-i="whatsapp"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-4A8.5 8.5 0 1 1 8.4 19z'/%3E%3Cpath d='M9 8.5c0 3.5 3 6.5 6.5 6.5l1-1.8-2-1-1 1a4 4 0 0 1-2.3-2.3l1-1-1-2z'/%3E%3C/svg%3E")}
.v-i[data-i="wifi"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='19.5' r='1'/%3E%3C/svg%3E")}