/* Sabiqa — brand colours measured from the traced logo, not the older palette table.
   No framework on purpose: this has to be fast on 4G in Bangladesh, and there is
   nobody to maintain a build step. */
/* Palette pulled from our OWN photographs — clay dish, green cloth, turmeric,
   linen — not from a generator. The accent is turmeric because turmeric is the
   flagship SKU; the clay is the actual terracotta of the bowls, shifted browner
   than the coral everyone reaches for. */
:root {
  --green-d: #24402F;   /* forest — the proof panel field */
  --green-x: #14251A;   /* near-black green, from the logo's darkest */
  --green-m: #5C7354;
  --gold:    #C1B186;
  --gold-hi: #D7C294;
  --turmeric:#D89A1B;   /* the one accent, and it means something */
  --clay:    #B4623C;   /* on the DARK panel only */
  --clay-d:  #6E3417;   /* the same hue for text on light — #B4623C measured 2.27:1
                           over the hero photo, well under the 4.5 it needs */
  --cream:   #F3EDE3;
  --ink:     #1A1714;
  --teal:    #2E7D77;   /* reserved for proof: tests, batch, origin. Nothing else. */
  --paper:   #FAF7F0;   /* cooler and lighter than before, so the FOOD carries the warmth */
  --line:    #E3DCCB;
  --radius:  14px;
  --shadow:  0 2px 14px rgba(36,60,46,.09);

  --bn:      "Noto Serif Bengali", serif;
  --display: "Fraunces", Georgia, serif;
  --sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Major-third scale (1.25). The old page had no scale at all, which is why
     every section read at the same importance. */
  --s0: 13px; --s1: 16px; --s2: 20px; --s3: 25px; --s4: 31px; --s5: 39px; --s6: 49px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--bn);
  line-height: 1.65; font-size: 17px;
}
img { max-width: 100%; display: block; }
a { color: var(--green-d); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.en { font-family: var(--sans); }

/* Fraunces earns its download by carrying every PRICE and total — which appear on
   every card, in the cart and in the baskets, in BOTH languages. It also takes the
   headings in English mode. A face that is loaded but barely used is pure weight on
   a mobile connection, and that is what it was until this rule existed. */
.price, .basket .tot dd, #foot .l, #tTotal, .act .v {
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] .hero .tag,
html[lang="en"] .qa summary { font-family: var(--display); }

/* ── header ─────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 40; background: rgba(251,248,242,.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
/* 🔴 `padding: 10px 0` here silently ZEROED the horizontal gutter that .bar inherits
   from .wrap — both are single-class selectors, so the later rule simply won. The
   logo then sat flush against the screen edge and the cart button against the right.
   It went unnoticed for weeks because the `max-width:380px` override further down
   re-applied `.wrap { padding: 0 14px }` and masked it on small phones: correct below
   380px, broken at 390px and above, which is most modern handsets.
   Use padding-block so this rule can never touch the inline gutter again. */
.bar { display: flex; align-items: center; gap: 14px; padding-block: 10px; }
.bar img { height: 46px; width: auto; }
nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
nav a { text-decoration: none; padding: 7px 12px; border-radius: 9px; font-size: 15px; }
nav a:hover { background: var(--cream); }
/* .btn is now used on <a> as well as <button>, so it has to kill the anchor
   underline and lay out like a button rather than a run of text. */
.btn {
  border: 0; cursor: pointer; border-radius: 10px; padding: 11px 18px;
  font: inherit; font-size: 15px; background: var(--green-d); color: #fff;
  text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px;
}
.btn:focus-visible { outline: 2px solid var(--green-x); outline-offset: 2px; }
.btn:hover { background: #1b2f24; }
.btn[disabled] { background: #A9B4AC; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--green-d); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--cream); }
#cartBtn { position: relative; }
#cartCount {
  position: absolute; top: -6px; inset-inline-end: -6px; background: var(--gold);
  color: var(--ink); border-radius: 999px; min-width: 21px; height: 21px;
  font-size: 12px; display: grid; place-items: center; font-family: var(--sans);
}

/* ── hero ─────────────────────────────────────────────────────────────
   THIRD attempt, and the first two were both wrong for the same reason:
   the image and its ROLE never matched.
     v1: background under an 86-94% cream veil — invisible. Masrur: "not even visible".
     v2: promoted to a foreground <img> bleeding off the right edge. But hero.jpg was
         generated from the §2 prompt, which asked for a HEAVILY OUT-OF-FOCUS backdrop
         "for text to sit over". A deliberately blurred photograph is a weak foreground
         subject, and the bleed read as the page overflowing — twice.
   v3 puts it back where it belongs: a BACKGROUND, at a strength you can actually see,
   with the scrim sized from measured luminance rather than guessed.

   Measured on hero.jpg: left 35% mean luminance 216 and fairly even (std 29); the
   right is darker (172) and busy (std 65). So the text sits left over a strong scrim
   and the photograph stays legible on the right, where nothing overlaps it.
   Nothing bleeds out of the viewport any more — the section IS the full width. */
.hero {
  position: relative; isolation: isolate;
  background-image: url("img/hero.jpg?v=14");
  background-size: cover;
  background-position: 72% center;
  padding: clamp(40px, 6vw, 92px) 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Stops sized to the COPY COLUMN, not picked by eye: the wrap is 1120 wide, so on
     a 1920 viewport the text occupies roughly 22%-50% of the width. The scrim has to
     stay strong across all of that, then fall away fast once the text ends. */
  background: linear-gradient(96deg,
    rgba(250,247,240,.975) 0%,
    rgba(250,247,240,.965) 38%,
    rgba(250,247,240,.90) 54%,
    rgba(250,247,240,.42) 74%,
    rgba(250,247,240,.10) 100%);
}
.hero-in { display: grid; align-items: center; }
.hero-copy { max-width: 34rem; }
.hero h1 {
  font-size: clamp(31px, 5.4vw, var(--s6)); margin: 0 0 4px;
  color: var(--green-x); line-height: 1.18; letter-spacing: -.01em;
}
.hero .tag { color: var(--clay-d); font-size: clamp(19px, 2.4vw, var(--s3)); margin: 0 0 14px; }
.hero .lede { margin: 0 0 22px; color: #423F39; font-size: clamp(16px, 1.6vw, 18px); max-width: 32rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* On a phone the copy spans the full width, so a horizontal gradient would leave the
   right-hand words on bare photograph. Flat veil instead — legibility wins, and the
   colour still reads through at .88. */
@media (max-width: 760px) {
  .hero { background-position: 62% center; }
  .hero::before {
    background: linear-gradient(180deg, rgba(250,247,240,.90), rgba(250,247,240,.86));
  }
}

/* The honest-delivery strip. Competitors hide delivery in a footer link or
   promise "free above 250" they can only afford on light metro groceries. */
.honest {
  background: var(--green-d); color: var(--cream); border-radius: var(--radius);
  padding: 18px 22px; margin: 26px 0 8px; display: grid; gap: 6px;
}
.honest b { color: var(--gold-hi); }
.honest .sm { font-size: 14.5px; opacity: .88; }

/* ── the proof panel ────────────────────────────────────────────────────
   This is where the boldness is spent. Everything else on the page stays
   quiet. It was four identical grey boxes; it is now the one dark, full-bleed
   band on the page, because traceability IS the brand and it deserves weight.

   Structure = an honesty ledger: what we can prove | what we refuse to claim.
   That is the actual commercial position, and no competitor can copy the shape
   without also adopting the position. Four generic cards said nothing. */
/* A slim full-bleed band of turmeric between the shop and the proof panel. It gives
   the page a beat and introduces the dark section instead of cutting to it. Not
   decoration: it is the flagship SKU at actual scale. */
.band {
  height: clamp(120px, 16vw, 210px); margin-top: clamp(44px, 6vw, 76px);
  background: url("img/band-holud.jpg?v=14") center/cover no-repeat var(--turmeric);
}

.ledger {
  background: var(--green-d); color: #E8E2D4;
  padding: clamp(38px, 6vw, 72px) 0; margin: 0;
}
/* Jute keeps the panel from reading as flat fill. Any stronger and it competes with
   the type, which is the only thing in this section that matters.
   ⚠️ `repeat` at 420px showed obvious tile seams — the photograph is not a seamless
   tile and never will be. One `cover` instance has no seams to show. */
.ledger { position: relative; isolation: isolate; }
.ledger::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/tex-jute.jpg?v=14") center/cover no-repeat;
  opacity: .07; mix-blend-mode: luminosity;
}
.ledger h2 { margin: 0 0 6px; color: #fff; font-size: clamp(25px, 3.4vw, var(--s4)); line-height: 1.25; }
.ledger .lede { margin: 0 0 clamp(26px, 3vw, 40px); color: #BFCBBF; max-width: 42rem; font-size: 17px; }
.ledger-cols { display: grid; gap: clamp(24px, 4vw, 52px); }
@media (min-width: 820px) { .ledger-cols { grid-template-columns: 1.15fr 1fr; } }

.ledger-col > h3 {
  margin: 0 0 18px; font-size: var(--s2); color: #fff; font-weight: 600;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.18);
}
.ledger dl { margin: 0; display: grid; gap: 20px; }
.ledger dt { font-size: 17px; color: var(--turmeric); font-weight: 600; margin-bottom: 2px; }
.ledger dd { margin: 0; color: #CBD4C8; font-size: 15.5px; line-height: 1.7; }

/* The refusals are a list because they ARE a list — no fake card around each. */
.ledger-no ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ledger-no li { position: relative; padding-inline-start: 26px; color: #CBD4C8; font-size: 15.5px; line-height: 1.7; }
.ledger-no li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 13px; height: 1.5px; background: var(--clay);
}
.ledger-no .why { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 15px; color: #A9B6A8; }

/* ── baskets ────────────────────────────────────────────────────────── */
.baskets { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.basket {
  border: 1.5px solid var(--gold); border-radius: var(--radius); padding: 18px;
  background: linear-gradient(180deg, #fff, var(--cream));
}
/* The photograph runs to the card edge — the 18px padding would frame it in a way
   that reads as a slide, not a shop. Negative margins pull it back out. */
.basket .ph {
  margin: -18px -18px 14px; border-start-start-radius: calc(var(--radius) - 1px);
  border-start-end-radius: calc(var(--radius) - 1px); overflow: hidden; background: var(--cream);
}
.basket .ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.basket h3 { margin: 0 0 3px; color: var(--green-d); }
.basket .why { font-size: 15px; color: #4a4740; margin: 0 0 10px; }
.basket ul { margin: 0 0 12px; padding-inline-start: 20px; font-size: 15px; color: #4a4740; }
/* The totals used to be one inline run, which wrapped and orphaned "মোট" from its
   number, and left the three buttons at different heights. A two-column grid keeps
   labels and values aligned; margin-top:auto pushes every button to the same line. */
.basket { display: flex; flex-direction: column; }
.basket .tot {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  margin: 0 0 14px; font-size: 15px;
}
.basket .tot dt { color: #6b665c; }
.basket .tot dd { margin: 0; text-align: end; font-family: var(--sans); }
.basket .tot .g { font-weight: 600; color: var(--green-d); border-top: 1px solid var(--line);
  padding-top: 6px; margin-top: 4px; font-size: 17px; }
.basket .btn { margin-top: auto; align-self: start; }

/* ── products ───────────────────────────────────────────────────────── */
h2.sec { color: var(--green-d); font-size: 27px; margin: 46px 0 4px; }
.sub { color: #6b665c; margin: 0 0 20px; font-size: 15.5px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card .ph { aspect-ratio: 1/1; overflow: hidden; background: var(--cream); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 14px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin: 0; font-size: 19px; color: var(--green-d); }
.card .size { font-family: var(--sans); font-size: 13.5px; color: #6b665c; margin-bottom: 8px; }
/* Weight is shown on every card — it is what the delivery charge is built from. */
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.chip {
  font-family: var(--sans); font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--cream); color: #55503f; border: 1px solid var(--line);
}
.chip.t { background: #E7F2F0; color: var(--teal); border-color: #CBE4E0; }
.card .note { font-size: 14.5px; color: #4a4740; margin: 0 0 12px; }
.row { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.price { font-family: var(--sans); font-weight: 600; font-size: 20px; color: var(--ink); }
.row .btn { margin-inline-start: auto; padding: 9px 15px; }

/* ── cart drawer ────────────────────────────────────────────────────── */
#scrim { position: fixed; inset: 0; background: rgba(26,23,20,.45); opacity: 0; pointer-events: none; transition: .2s; z-index: 50; }
#scrim.on { opacity: 1; pointer-events: auto; }
#cart {
  position: fixed; top: 0; inset-inline-end: 0; height: 100dvh; width: min(430px, 100%);
  background: var(--paper); z-index: 60; transform: translateX(100%); transition: transform .24s;
  display: flex; flex-direction: column; box-shadow: -6px 0 26px rgba(0,0,0,.16);
}
#cart.on { transform: none; }
#cart header { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
#cart header h2 { margin: 0; font-size: 20px; color: var(--green-d); }
#cart .close { margin-inline-start: auto; background: 0; border: 0; font-size: 26px; cursor: pointer;
  color: #6b665c; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
#items { flex: 1; overflow: auto; padding: 12px 18px; }
.line { display: flex; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.line img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; }
.line .nm { flex: 1; font-size: 15.5px; line-height: 1.35; }
.line .nm small { color: #6b665c; font-family: var(--sans); font-size: 12.5px; }
.qty { display: flex; align-items: center; gap: 7px; font-family: var(--sans); }
.qty button { width: 27px; height: 27px; border-radius: 7px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 16px; }
#foot { border-top: 1px solid var(--line); padding: 15px 18px; background: var(--cream); }
#foot .l { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 15px; margin-bottom: 5px; }
#foot .l.tot { font-size: 19px; font-weight: 600; color: var(--green-d); margin-top: 9px; }
#foot .hint { font-size: 14px; color: #6b665c; margin: 9px 0 11px; }
#foot .warn { background: #FDF0E4; border: 1px solid #F0D7BC; color: #7a4a19; border-radius: 10px; padding: 10px 12px; font-size: 14.5px; margin: 9px 0 11px; }
#checkout { width: 100%; padding: 13px; font-size: 16px; }
.empty { color: #6b665c; text-align: center; padding: 46px 12px; }

footer.site { background: var(--green-d); color: #D9D2C6; margin-top: 56px; padding: 34px 0 26px; font-size: 15px; }
footer.site a { color: var(--gold-hi); }
footer.site .cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
footer.site h4 { color: var(--cream); margin: 0 0 7px; font-size: 16px; }
.legal { border-top: 1px solid rgba(255,255,255,.13); margin-top: 22px; padding-top: 14px; font-size: 13.5px; opacity: .8; }

.ribbon { background: var(--gold); color: var(--ink); text-align: center; padding: 7px 14px; font-size: 14.5px; }
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — this is the primary experience, not an afterthought.
   ~99% of customers are on a phone. Measured at 360px (typical BD Android)
   the desktop layout was BROKEN, not merely cramped:
     · document scrollWidth 425 on a 360 viewport — the page scrolled sideways
     · nav ran to x=425, pushing the CART BUTTON COMPLETELY OFF-SCREEN, so a
       customer could not open the cart at all
     · 14 tap targets under the 44x44 minimum, some 19px tall
   ══════════════════════════════════════════════════════════════════════════ */

/* Nothing may ever exceed the viewport again. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* The header keeps only what a shopper needs: identity, language, cart.
     The four anchor links are dropped — on a single-scroll page the user
     reaches every section anyway, and they were what overflowed the bar. */
  nav a[href^="#"] { display: none; }
  .bar { gap: 10px; padding-block: 8px; }   /* padding-block, never the shorthand — see above */
  .bar img { height: 40px; }
  nav { gap: 8px; }

  /* 44px minimum on everything tappable (Google/Apple guidance). */
  .btn, nav a, #langBtn, #cartBtn { min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
  .contact .item a, footer.site a { display: inline-block; min-height: 44px;
    line-height: 44px; }
  .qty button { width: 44px; height: 44px; font-size: 20px; }

  .hero { padding: 26px 0 18px; }
  .hero h1 { font-size: 27px; }
  .honest { padding: 15px 16px; margin: 20px 0 4px; }
  h2.sec { font-size: 23px; margin: 32px 0 4px; }

  /* One product per row reads better on a phone than two cramped ones,
     and the photograph is what sells food. */
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .proof .grid { grid-template-columns: 1fr; }
  .baskets { grid-template-columns: 1fr; }
  .card .ph { aspect-ratio: 16/10; }

  /* The cart drawer is full-screen on a phone — a 430px panel on a 360px
     screen left a useless sliver of background. */
  #cart { width: 100%; }
  #foot { padding-bottom: max(15px, env(safe-area-inset-bottom)); }

  /* Keep the FAB clear of the checkout button at the bottom of the drawer. */
  #waFab { bottom: 16px; inset-inline-end: 16px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 24px; }
  .wrap { padding: 0 14px; }
  .price { font-size: 18px; }
}

/* ── WhatsApp floating button ─────────────────────────────────────────── */
#waFab {
  position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); text-decoration: none;
  transition: transform .16s;
}
#waFab:hover { transform: scale(1.07); }
#waFab:focus-visible { outline: 3px solid var(--green-d); outline-offset: 3px; }
/* Sits below the cart drawer (z 60) so it can never cover the close button. */

/* ── questions ──────────────────────────────────────────────────────────
   Six boxes of unequal height with ragged text became a disclosure list.
   <details> is the correct semantics for Q&A, it collapses six phone-screens
   into one, and the ragged-height problem disappears by construction.
   The answers stay in the DOM when closed, so the FAQPage schema still matches. */
.faq { padding: clamp(40px, 6vw, 70px) 0; }
.faq h2 { margin: 0 0 4px; color: var(--green-x); font-size: clamp(25px, 3.4vw, var(--s4)); }
.faq .lede { margin: 0 0 clamp(18px, 2.4vw, 30px); color: #6b665c; }
.qa { max-width: 46rem; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative;
  font-size: clamp(17px, 1.8vw, var(--s2)); color: var(--green-x); font-weight: 600; line-height: 1.45;
}
.qa summary::-webkit-details-marker { display: none; }
/* A plus that becomes a minus — the only motion on the page, and it answers a tap. */
.qa summary::after,
.qa summary::before {
  content: ""; position: absolute; inset-inline-end: 6px; top: 50%;
  width: 15px; height: 2px; background: var(--clay); transition: transform .18s ease;
}
.qa summary::before { transform: rotate(90deg); }
.qa details[open] summary::before { transform: rotate(0deg); }
.qa summary:hover { color: var(--clay); }
.qa summary:focus-visible { outline: 2px solid var(--green-d); outline-offset: 3px; border-radius: 4px; }
.qa .a { padding: 0 44px 20px 0; color: #4a4740; max-width: 40rem; }
.qa .a p { margin: 0; line-height: 1.75; }
@media (prefers-reduced-motion: reduce) { .qa summary::before, .qa summary::after { transition: none; } }

/* ── closing block ──────────────────────────────────────────────────────
   Was five orphaned cards, the fifth stranded alone on its own row. It is the
   conversion point of the page, so it is now one block: where we are on the
   left, and the four ways to reach us as real targets on the right. */
.contact { background: var(--green-x); color: #DCD6C8; padding: clamp(38px, 5vw, 64px) 0 clamp(34px, 4vw, 54px); }
.contact h2 { margin: 0 0 10px; color: #fff; font-size: clamp(25px, 3.4vw, var(--s4)); }
.contact-in { display: grid; gap: clamp(26px, 4vw, 56px); align-items: start; }
@media (min-width: 820px) { .contact-in { grid-template-columns: 1fr 1.1fr; } }
.contact .addr { margin: 0 0 6px; font-size: 17px; line-height: 1.7; color: #C6CFC3; max-width: 22rem; }
.contact .hours { margin: 0; font-size: 15px; color: #93A192; }

.acts { display: grid; gap: 10px; }
@media (min-width: 520px) { .acts { grid-template-columns: 1fr 1fr; } }
.act {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 15px 18px; border-radius: 12px; min-height: 44px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
  color: #fff; transition: background .15s, border-color .15s;
}
.act:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
.act:focus-visible { outline: 2px solid var(--turmeric); outline-offset: 2px; }
.act .k { font-size: 14px; color: #93A192; }
.act .v { font-size: 16.5px; color: #fff; overflow-wrap: anywhere; }
.act-wa { background: rgba(37,211,102,.13); border-color: rgba(37,211,102,.42); }
.act-wa:hover { background: rgba(37,211,102,.2); }
.act-wa .k { color: #86D9A4; }

#socialRow { display: flex; flex-wrap: wrap; gap: 10px; }
#socialRow a {
  font-size: 14.5px; padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: #fff; text-decoration: none;
}
#socialRow a:hover { background: rgba(255,255,255,.12); }
footer.site .fcontact { margin-top: 4px; font-size: 14.5px; line-height: 1.7; }
@media (max-width: 560px) { #waFab { width: 52px; height: 52px; inset-inline-end: 14px; bottom: 14px; } }