/* Parts added after the first release: phone input, social links, buying guide, ways to pay, delivery areas, help assistant.
   Built mobile first on the tokens in site.css. */

/* ---------- Phone input (country code + number) ---------- */
.phone-input { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: .5rem; }
.phone-input select { padding-inline: .6rem; }
@media (max-width: 420px) { .phone-input { grid-template-columns: 1fr; } }

/* ---------- Social links ---------- */
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; padding: 0; }
.socials a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); color: inherit; transition: background-color .15s, color .15s, border-color .15s; }
.socials a:hover, .socials a:focus-visible { background: var(--grain); border-color: var(--grain); color: var(--forest-ink); }
.contact-socials .socials a { border-color: var(--line-strong); color: var(--forest); }

/* ---------- Buying guide ---------- */
.buying-guide { background: var(--paper); border-bottom: 1px solid var(--line); }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.guide-steps li { position: relative; padding: 1.25rem 1.1rem 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.guide-steps h3 { font: 600 1.0625rem/1.25 var(--sans); color: var(--forest-ink); margin: .85rem 0 .35rem; }
.guide-steps p { margin: 0; font-size: .9375rem; color: var(--soil-2); }
.guide-n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--forest); color: var(--white); font: 600 1rem/1 var(--sans); }
.guide-steps li:not(:last-child)::after { content: ''; position: absolute; top: 2.25rem; left: calc(100% + 1px); width: 1rem; border-top: 2px dotted var(--line-strong); }
.guide-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
@media (max-width: 1100px) { .guide-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .guide-steps li:nth-child(3)::after { display: none; } }
@media (max-width: 700px) {
  .guide-steps { grid-template-columns: 1fr; gap: .65rem; }
  .guide-steps li { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: .9rem; padding: 1rem; }
  .guide-steps li .guide-n { grid-row: span 2; }
  .guide-steps h3 { margin: 0 0 .15rem; }
  .guide-steps li::after { display: none !important; }
  .guide-actions .btn { flex: 1 1 100%; text-align: center; }
}
.guide-more { max-width: var(--narrow); }

/* ---------- Ways to pay ---------- */
.pay-options { background: var(--white); border-bottom: 1px solid var(--line); }
.pay-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.pay-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.pay-card h3 { font: 600 1.0625rem/1.25 var(--sans); color: var(--forest-ink); margin: 0 0 .4rem; }
.pay-card p { margin: 0; color: var(--soil-2); font-size: .9375rem; }
.acct-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.acct-list li { display: grid; gap: .1rem; padding: .7rem .85rem; background: var(--white); border: 1px solid var(--line-strong); border-left: 4px solid var(--grain); border-radius: var(--radius); }
.acct-kind { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soil-3); font-weight: 600; }
.acct-num { font: 600 1.15rem/1.3 var(--sans); color: var(--forest-ink); letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
.acct-name { font-size: .85rem; color: var(--soil-2); }
.pay-choices .choice { align-items: flex-start; }
.pay-choices .choice small { margin-top: .15rem; }

/* ---------- Where we deliver ---------- */
.where-we-deliver { background: var(--husk); }
.zone-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; }
.zone-chips li { display: inline-flex; gap: .6rem; align-items: baseline; padding: .45rem .8rem; background: var(--white); border: 1px solid var(--line-strong); border-radius: 2rem; font-size: .9375rem; }
.zone-chips strong { color: var(--forest); }
.coverage-label { margin: 0 0 .6rem; font-weight: 600; color: var(--forest-ink); }
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin-bottom: 1.25rem; }
.region-btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; min-height: 3rem; padding: .55rem .8rem; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--soil); font: 500 .9375rem/1.2 var(--sans); text-align: left; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.region-btn small { font: 600 .75rem/1.2 var(--sans); color: var(--forest); }
.region-btn.has-fee { border-left: 4px solid var(--grain); }
.region-btn:hover { border-color: var(--forest); }
.region-btn.is-on { background: var(--forest); border-color: var(--forest); color: var(--white); }
.region-btn.is-on small { color: var(--grain-soft); }
@media (max-width: 420px) { .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.region-result { margin: .25rem 0 1rem; padding: .85rem 1rem; border: 1px solid var(--line-strong); border-left: 4px solid var(--grain); background: var(--white); border-radius: var(--radius); max-width: 40rem; }
.region-result.is-yes { border-left-color: var(--ok); background: var(--ok-soft); }

/* ---------- Help assistant ---------- */
.chatbot { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: 4.6rem; z-index: 31; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.chat-fab { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border: 0; border-radius: 2rem; background: var(--forest); color: var(--white); font: 600 1rem/1 var(--sans); cursor: pointer; box-shadow: 0 6px 18px -6px rgba(0,0,0,.45); }
.chat-fab:hover { background: var(--forest-deep); }
@media (max-width: 760px) {
  .chatbot { bottom: calc(var(--tap) + 5.3rem + var(--safe-b)); }
  .chat-fab span { display: none; }
  .chat-fab { padding: .8rem; }
}
@media print { .chatbot { display: none; } }

/* ---------- Fixes found by the page-width check ---------- */
/* Long Kiswahili headlines on inner-page heroes wrap instead of running under the picture (the one-line rule is for the home slides only). */
.hero-editorial .hero-title, .hero-compact .hero-title, .hero-plain .hero-title, .hero-split .hero-title, .hero-regional .hero-title, .page-head h1 {
  white-space: normal; overflow-wrap: break-word; text-wrap: balance; max-width: 24ch !important;
}
.hero-compact .hero-title, .hero-plain .hero-title { max-width: 30ch !important; }
.editorial-copy, .editorial-grid > *, .hero-split > *, .split-copy { min-width: 0; }
/* Top bar on small phones: the call link, WhatsApp link and language button wrap instead of pushing the page sideways. */
@media (max-width: 480px) {
  .announce-tools { flex-wrap: wrap; row-gap: 0; justify-content: flex-start !important; }
  .announce-tools > a { font-size: .78rem !important; }
  .announce-tools .lang-menu { margin-left: auto; }
}

/* ---------- "How to pay" buttons ---------- */
.how-to-pay { margin-top: .9rem; }
.pay-steps { margin: .8rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; font-size: .9375rem; color: var(--soil); }
.pay-steps li::marker { color: var(--grain); font-weight: 700; }
.pay-choices + .how-to-pay { margin: -.1rem 0 1rem; padding: .85rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- Side buttons: help and ways to pay ---------- */
.dock-fabs { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.pay-fab { background: var(--grain); color: #2b2400; }
.pay-fab:hover { background: #b0821f; }
.pay-panel .pay-card { background: var(--white); }
.pay-panel .pay-card h3 { font-size: 1rem; }
@media (max-width: 760px) { .pay-fab span { display: none; } }

/* The farm photo on the home page is a supporting picture, so it stays modest in size. */
.farm-media { max-width: 30rem; width: 100%; justify-self: center; }
.farm-media .frame { width: 100%; aspect-ratio: 4 / 3 !important; }
@media (max-width: 900px) { .farm-media { max-width: none; } .farm-media .frame { width: 100%; aspect-ratio: 16 / 10 !important; } }
@media (min-width: 901px) { .farm-split, .farm-split.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.farm-split .media { justify-self: end; }

/* ---------- Help and payment panels (redesign) ---------- */
.chatbot { z-index: 60; }
.chat-panel { width: min(24rem, calc(100vw - 2rem)); height: min(36rem, calc(100dvh - 9rem)); display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(15, 34, 24, .55), 0 2px 6px rgba(15, 34, 24, .12); overflow: hidden; animation: chat-in .18s ease-out; }
@keyframes chat-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%); color: var(--white); }
.chat-avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--white); object-fit: contain; padding: 2px; }
.chat-title { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.chat-title strong { font: 600 1rem/1.2 var(--sans); }
.chat-sub { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: #cfe3d3; }
.chat-sub i { width: .5rem; height: .5rem; border-radius: 50%; background: #5fd37e; box-shadow: 0 0 0 3px rgba(95, 211, 126, .25); }
.chat-close { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: inherit; cursor: pointer; }
.chat-close:hover { background: rgba(255, 255, 255, .25); }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .65rem; background: var(--paper); scroll-behavior: smooth; }
.chat-row { display: flex; }
.chat-row.me { justify-content: flex-end; }
.chat-msg { max-width: 88%; padding: .65rem .9rem; border-radius: 14px; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-msg p { margin: 0; }
.chat-row.bot .chat-msg { background: var(--white); border: 1px solid var(--line); border-top-left-radius: 4px; color: var(--soil); }
.chat-row.me .chat-msg { background: var(--forest); color: var(--white); border-top-right-radius: 4px; }
.chat-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .55rem; font-weight: 600; font-size: .875rem; color: var(--forest); text-decoration: none; }
.chat-link:hover { text-decoration: underline; }
.typing { display: inline-flex; gap: .3rem; padding: .85rem 1rem; }
.typing span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--soil-3); animation: chat-dot 1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: .6; } }
.chat-quick { display: grid; gap: .45rem; margin-top: .35rem; }
.chat-quick p { margin: 0 0 .1rem; font: 600 .72rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soil-3); }
.chat-quick button { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .7rem .9rem; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--forest-ink); font: 500 .9375rem/1.3 var(--sans); text-align: left; cursor: pointer; transition: border-color .12s, background-color .12s; }
.chat-quick button:hover { border-color: var(--forest); background: var(--field-soft); }
.chat-quick .chat-arrow, .chat-link .chat-arrow { flex: none; color: var(--forest); }
.chat-chips { display: flex; gap: .4rem; overflow-x: auto; padding: .55rem .75rem; background: var(--white); border-top: 1px solid var(--line); scrollbar-width: thin; }
.chat-chips button { flex: none; padding: .4rem .8rem; border: 1px solid var(--line-strong); background: var(--paper); color: var(--forest); border-radius: 2rem; font: 500 .8125rem/1.2 var(--sans); cursor: pointer; white-space: nowrap; }
.chat-chips button:hover { background: var(--forest); border-color: var(--forest); color: var(--white); }
.chat-panel form { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .65rem .75rem; background: var(--white); border-top: 1px solid var(--line); }
.chat-panel form input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 2rem; background: var(--paper); font: 400 .9375rem/1 var(--sans); }
.chat-panel form input:focus { outline: 2px solid var(--field); outline-offset: 0; background: var(--white); }
.chat-panel form button { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--forest); color: var(--white); cursor: pointer; }
.chat-panel form button:hover:not(:disabled) { background: var(--forest-deep); }
.chat-panel form button:disabled { opacity: .4; cursor: default; }
.chat-contact { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; padding: .6rem .75rem .75rem; background: var(--white); }
.chat-contact a { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; padding: 0 .6rem; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--forest-ink); font: 600 .8125rem/1 var(--sans); text-decoration: none; }
.chat-contact a:hover { background: var(--field-soft); border-color: var(--forest); }
.chat-contact svg { flex: none; color: var(--forest); }
.pay-panel .chat-log { gap: .85rem; }
.pay-panel .chat-log > p { margin: 0; }
.pay-panel .pay-card { background: var(--white); }
.pay-panel .pay-card h3 { font-size: 1rem; }
/* The three side buttons share one width so the stack looks tidy. */
.chat-fab, .wa-float { min-width: 11rem; justify-content: center; }
@media (max-width: 760px) {
  .chat-fab, .wa-float { min-width: 0; }
  .chat-panel { height: min(32rem, calc(100dvh - 17rem)); min-height: 20rem; }
}

.chat-contact a span { white-space: nowrap; }
@media (max-width: 420px) { .chat-contact a { padding: 0 .35rem; gap: .3rem; font-size: .75rem; } }
.chat-log { padding-bottom: 1.5rem; }
.chat-log { position: relative; }

/* ---------- Panels open as a corner window that always fits the screen ---------- */
.chatbot .chat-panel { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 70; width: min(23rem, calc(100vw - 2rem)); height: min(38rem, calc(100dvh - 2rem)); min-height: 0; }
@media (max-width: 760px) {
  .chatbot .chat-panel { left: .5rem; right: .5rem; bottom: .5rem; width: auto; height: min(36rem, calc(100dvh - 1rem)); min-height: 0; }
}
@media (max-height: 560px) { .chat-quick button { padding: .5rem .8rem; } .chat-head { padding: .6rem .9rem; } }

/* ---------- Compact size for the help and payment windows ---------- */
.chatbot .chat-panel { height: min(30rem, calc(100dvh - 2rem)); width: min(22rem, calc(100vw - 2rem)); border-radius: 14px; }
.chat-head { padding: .6rem .85rem; gap: .6rem; }
.chat-avatar { width: 2.1rem; height: 2.1rem; }
.chat-title strong { font-size: .9375rem; }
.chat-sub { font-size: .72rem; }
.chat-close { width: 1.9rem; height: 1.9rem; }
.chat-log { padding: .7rem .8rem 1rem; gap: .5rem; }
.chat-msg { padding: .5rem .75rem; font-size: .875rem; line-height: 1.45; }
.chat-quick { gap: .3rem; margin-top: .2rem; }
.chat-quick button { padding: .45rem .75rem; font-size: .875rem; border-radius: 8px; }
.chat-quick p { font-size: .66rem; }
.chat-chips { padding: .4rem .6rem; }
.chat-chips button { padding: .3rem .65rem; font-size: .78rem; }
.chat-panel form { padding: .45rem .6rem; gap: .4rem; }
.chat-panel form input { height: 2.3rem; padding: 0 .85rem; font-size: .875rem; }
.chat-panel form button { width: 2.3rem; height: 2.3rem; }
.chat-contact { padding: .4rem .6rem .55rem; gap: .4rem; }
.chat-contact a { min-height: 2.1rem; font-size: .78rem; border-radius: 8px; }
@media (max-width: 760px) { .chatbot .chat-panel { height: min(29rem, calc(100dvh - 1rem)); width: auto; } }

/* ---------- Ways to pay window ---------- */
.pay-avatar { display: grid; place-items: center; background: var(--grain); color: #2b2400; padding: 0; }
.pay-note { margin: 0; padding: .6rem .8rem; background: var(--grain-soft); border-radius: 8px; color: var(--soil); font-size: .8125rem; line-height: 1.45; }
.pay-panel .chat-log { gap: .6rem; }
.pay-panel .pay-card { padding: .8rem .9rem; border-radius: 10px; }
.pay-panel .pay-card h3 { margin: 0 0 .25rem; font: 600 .9375rem/1.3 var(--sans); color: var(--forest-ink); }
.pay-panel .pay-card p { font-size: .8125rem; line-height: 1.45; }
.pay-panel .how-to-pay { margin-top: .6rem; }
.pay-panel .acct-list { margin-top: .6rem; gap: .4rem; }
.pay-panel .acct-list li { padding: .5rem .7rem; }
.pay-panel .acct-num { font-size: 1rem; }

/* ---------- Floating buttons: just Help and Ways to pay ---------- */
.chatbot { bottom: 1rem; }
@media (max-width: 760px) { .chatbot { bottom: calc(var(--tap) + 1.5rem + var(--safe-b)); } }
.chat-fab { min-width: 11rem; }
@media (max-width: 760px) { .chat-fab { min-width: 0; } }

/* ---------- Contact page: reach us directly ---------- */
.reach-social { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.reach-social .label { display: block; margin-bottom: .6rem; color: var(--soil-2); }
.reach-social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.reach-social-list a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--line-strong); border-radius: 2rem; color: var(--forest-ink); font-weight: 600; font-size: .875rem; text-decoration: none; background: var(--white); }
.reach-social-list a:hover { background: var(--forest); border-color: var(--forest); color: var(--white); }
.reach-social-list svg { flex: none; }
.reach-social-list li { border: 0; padding: 0; margin: 0; display: block; }
.reach-social-list a { padding: .5rem 1rem; white-space: nowrap; line-height: 1.2; gap: .5rem; overflow: visible; }
.reach-social-list a span { display: inline; }
.aside-box .reach-social-list a { padding: .5rem 1rem !important; border-bottom: 1px solid var(--line-strong) !important; text-decoration: none !important; display: inline-flex !important; }
.aside-box .reach-social-list a:hover { border-color: var(--forest) !important; }

/* =====================================================================
   Compact spacing for the whole public site: shorter sections, tighter
   headings and smaller boxes, so visitors scroll less.
   ===================================================================== */
.section { padding: clamp(1.75rem, 1rem + 2.6vw, 3.25rem) 0; }
.section-tight { padding: clamp(1.25rem, .8rem + 1.8vw, 2.25rem) 0; }
.pat-cream.section { padding-bottom: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.section-head { margin-bottom: 1.1rem; gap: 1rem; }
.section-head p { margin-top: .4rem; }
.section-head h2 { max-width: 28ch; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.page-head { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 clamp(1rem, .8rem + 1.2vw, 1.75rem); }
.hero-content { min-height: min(68vh, 600px); padding: 5rem 0 2.5rem; }
.livestock-band { min-height: 440px; }
.livestock-band .copy { padding-block: clamp(2rem, 4vw, 3.5rem); padding-top: calc(100px + 1rem); }
.trio a { padding-block: 1.1rem 1.25rem; }
.trio .ico-wrap { width: 52px; height: 52px; }
.trio h3 { margin: .7rem 0 .25rem; }
.trio p { margin-bottom: .8rem; }
.trade-row { padding-block: .75rem; }
.cta-band, .cta-band.section-tight { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.paths .path { padding: clamp(1rem, 2vw, 1.75rem); }
.steps { margin: 1rem 0 1.1rem; }
.steps li { padding-block: .55rem; }
.wholesale-band .copy { padding: clamp(1.25rem, 3vw, 2.25rem); }
.feature-split { gap: clamp(1.25rem, 3vw, 2.75rem); }
.gallery-grid { gap: .6rem; }
.site-footer { padding-top: 1.5rem; }
.footer-grid { gap: 1.25rem; }
@media (max-width: 760px) {
  .section { padding-block: 1.75rem; }
  .section-tight { padding-block: 1.25rem; }
  .hero-content { min-height: 0; padding: 3rem 0 1.75rem; }
  .livestock-band { min-height: 0; }
  .trio { gap: .75rem; }
}

/* Buying guide: slim cards */
.buying-guide { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.guide-steps { gap: .6rem; }
.guide-steps li { padding: .8rem .9rem; }
.guide-steps h3 { margin: .55rem 0 .2rem; font-size: 1rem; }
.guide-steps p { font-size: .875rem; line-height: 1.4; }
.guide-n { width: 1.9rem; height: 1.9rem; font-size: .9rem; }
.guide-steps li:not(:last-child)::after { top: 1.9rem; }
.guide-actions { margin-top: 1rem; }
@media (max-width: 700px) {
  .guide-steps li { padding: .7rem .8rem; column-gap: .7rem; grid-template-columns: 1.9rem 1fr; }
}

/* Ways to pay: small, even boxes */
.pay-options { padding-block: clamp(1.25rem, 1rem + 1.4vw, 2rem); }
.pay-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; align-items: start; }
.pay-card { padding: .75rem .9rem; border-radius: 10px; }
.pay-card h3 { margin: 0 0 .2rem; font: 600 .9375rem/1.3 var(--sans); }
.pay-card p { font-size: .8125rem; line-height: 1.4; }
.pay-card .how-to-pay { margin-top: .5rem; }
.pay-card .how-to-pay .btn { min-height: 2rem; padding: .25rem .75rem; font-size: .8125rem; }
.pay-steps { margin-top: .5rem; gap: .3rem; font-size: .8125rem; }
.acct-list { margin-top: .5rem; gap: .35rem; }
.acct-list li { padding: .4rem .65rem; gap: 0; }
.acct-num { font-size: .95rem; }
.acct-name, .acct-kind { font-size: .72rem; }
.pay-card .acct-list li strong { font-size: .875rem; }

/* Region buttons and forms */
.region-grid { gap: .35rem; margin-bottom: .75rem; }
.region-btn { min-height: 2.5rem; padding: .35rem .65rem; font-size: .875rem; }
.zone-chips { margin-bottom: .75rem; }
.form-grid { gap: 0 1rem; }
fieldset { margin-bottom: 1.1rem; }
.field { margin-bottom: .8rem; }

/* Product lists: two small cards per row, even on phones. */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.1rem .9rem; }
.product-card .frame { margin-bottom: .55rem; }
.product-card h3 { font-size: 1.0625rem; margin-bottom: .2rem; }
.product-card .summary { margin-bottom: .5rem; }
@media (max-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .6rem; }
  .product-card .frame { aspect-ratio: 4 / 3; }
  .product-card h3 { font-size: .9375rem; }
  .product-card .summary { display: none; }
  .product-card .cat { font-size: .72rem; }
}

/* =====================================================================
   Responsive tables: on phones every row of the cart, order and quotation
   becomes a small card (name on top, then labelled values), so nothing
   scrolls sideways and nothing is cut off.
   ===================================================================== */
.tbl-wrap { overflow-x: auto; max-width: 100%; }
@media (max-width: 680px) {
  .tbl-wrap { overflow: visible; background: none; border: 0; box-shadow: none; }
  .cart-lines, .cart-lines tbody, .cart-lines tfoot, .cart-lines tr, .cart-lines td, .cart-lines th { display: block; width: 100%; }
  .cart-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cart-lines tbody tr { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; margin-bottom: .65rem; }
  .cart-lines td { border: 0; padding: .2rem 0; text-align: left; }
  .cart-lines td.item { font-weight: 600; color: var(--forest-ink); padding-bottom: .4rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .cart-lines td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: right; white-space: normal; }
  .cart-lines td[data-label]::before { content: attr(data-label); flex: none; font-weight: 500; color: var(--soil-2); text-align: left; }
  .cart-lines td.act { padding-top: .5rem; text-align: right; }
  .cart-lines td.act .btn { width: auto; }
  .cart-lines td input[type=number] { width: 5.5rem !important; }
  .cart-lines tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem .25rem; border: 0; }
  .cart-lines tfoot th { display: block; width: auto; padding: 0; border: 0; text-align: left; font-weight: 600; }
  .cart-lines tfoot th:empty { display: none; }
  .cart-lines tfoot tr:last-child { border-top: 2px solid var(--forest); margin-top: .25rem; font-size: 1.05rem; }
}

/* ---------- Side margins on the shop pages (cart, order, quotation) and centred footer icons ---------- */
.app-page:not(.wrap) { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.site-footer .socials a { display: grid !important; place-items: center; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; padding: 0 !important; }
.site-footer .socials svg { display: block; }