/* App introduction + contact. Dark green stage with turquoise glows; a CSS
   phone shows three app screens built from the site's own components; the
   contact card lists every channel from data/contact.php. */
.appc { position: relative; overflow: hidden; padding: 110px 0 120px; color: #fff; background:
  radial-gradient(ellipse 40rem 30rem at 50% 45%, rgba(131,223,56,.12), transparent 70%),
  radial-gradient(ellipse 36rem 28rem at 90% 10%, rgba(67,196,232,.16), transparent 70%),
  radial-gradient(ellipse 34rem 28rem at 6% 92%, rgba(40,190,175,.16), transparent 70%),
  linear-gradient(160deg, #04261a 0%, #08382a 55%, #062e2a 100%); }
.appc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.appc__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 380px); align-items: center; gap: 48px; }

/* Intro */
.appc__intro { position: relative; display: flex; min-height: 618px; max-width: 500px; flex-direction: column; padding: 34px 30px 28px; border: 1px solid rgba(131,223,56,.15); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 45px rgba(0,0,0,.12); }
.appc__intro::after { position: absolute; right: 30px; bottom: 0; left: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sky), var(--lime), transparent); content: ''; opacity: .7; }
.appc__title { margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 52px); font-weight: 900; letter-spacing: -1px; line-height: 1.2; white-space: nowrap; }
.appc__title em { font-style: normal; background: linear-gradient(100deg, #c4f58c, var(--lime) 45%, #63d9c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.appc__features { display: grid; gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.appc__features li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; color: rgba(255,255,255,.88); background: rgba(255,255,255,.035); font: 700 15.5px var(--font-display); }
.appc__features li span { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--lime); background: rgba(131,223,56,.12); box-shadow: inset 0 0 0 1px rgba(131,223,56,.2); }
.appc__features svg { width: 18px; height: 18px; }
.appc__stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.store-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 58px; padding: 8px 10px; border-radius: 15px; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.store-btn:hover { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(131,223,56,.6); transform: translateY(-2px); }
.store-btn:first-child { color: #05261a; background: linear-gradient(135deg, #c4f58c, var(--lime)); box-shadow: 0 10px 26px rgba(131,223,56,.3); }
.store-btn__icon { display: grid; place-items: center; }
.store-btn__icon svg { width: 24px; height: 24px; }
.store-btn__text { display: flex; flex-direction: column; line-height: 1.25; }
.store-btn__text small { opacity: .72; font: 600 11px var(--font-display); }
.store-btn__text b { font: 900 13.5px var(--font-display); }

/* Device */
.appc__device { position: relative; display: grid; place-items: center; }
.appc__glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(99,217,196,.35), rgba(131,223,56,.12) 45%, transparent 70%); }
/* The phone and its spilled cards are a picture of the (light) app, so they
   keep the light palette in dark mode too: only the page around them changes. */
.phone, .spill { --ink: #163b2d; --muted: #647b70; --line: #e5eee8; --surface: #fff; --page: #f7fbf8; --green-950: #073b28; --green-900: #0b5a3d; --green-700: #137a50; --green-100: #eaf9df; --lime: #83df38; --sky: #43c4e8; --sky-deep: #138eaf; color-scheme: light; }
.appc__device { --phone-w: 290px; }

/* Spilled cards: each tap in the demo throws a card of the tapped item out of
   the screen (app-demo.js animates it from the tap point). It lands beside
   the phone, overlapping the frame only slightly, then drifts gently. */
.spill { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.spill__card { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 9px; max-width: var(--spill-w, 168px); padding: 7px 12px 7px 7px; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.12); will-change: transform, opacity; }
.spill__card.is-landed { animation: spill-drift 6s ease-in-out infinite; }
.spill__card img, .spill__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
.spill__icon { display: grid; place-items: center; color: var(--green-700); background: var(--green-100); }
.spill__icon--done { border-radius: 50%; color: #fff; background: var(--green-700); box-shadow: 0 0 0 4px rgba(19,122,80,.14); }
.appc .spill__icon svg { width: 20px; height: 20px; stroke-width: 2.2; }
.spill__card > span:last-child { display: flex; min-width: 0; flex-direction: column; line-height: 1.35; }
.spill__card b { overflow: hidden; font: 900 12.5px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.spill__card small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.spill__card em { color: var(--green-900); font: 900 11.5px var(--font-display); font-style: normal; white-space: nowrap; }
@keyframes spill-drift { 50% { translate: 0 -8px; } }

.phone { position: relative; z-index: 2; width: var(--phone-w); aspect-ratio: 9 / 19.2; padding: 11px; border-radius: 46px; background: linear-gradient(145deg, #2b3a33, #0b1310 60%, #24312b); box-shadow: 0 40px 80px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.6); }
.phone__island { position: absolute; z-index: 5; top: 20px; left: 50%; width: 86px; height: 24px; border-radius: 20px; background: #050807; transform: translateX(-50%); }
.phone__screen { position: relative; display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 36px; color: var(--ink); background: #f5faf6; }
.phone__status { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 8px 26px 0; direction: ltr; background: #f5faf6; font: 800 12px var(--font-display); }
.phone__status span { width: 22px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.phone__tabs { position: relative; z-index: 6; display: flex; justify-content: space-around; padding: 8px 14px 14px; background: #fff; box-shadow: 0 -1px 0 var(--line); }
.dtab { position: relative; display: grid; place-items: center; width: 36px; height: 30px; border-radius: 10px; color: #9fb2a6; transition: color .25s ease, background .25s ease, transform .2s ease; }
.dtab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.dtab.is-on { color: var(--green-800, #0e6f4b); background: var(--green-100); }
.dtab__badge { position: absolute; top: -3px; right: 0; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; color: #fff; background: #e74c3c; font: 800 10px var(--font-display); transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.dtab__badge.is-on { transform: scale(1); }
.dtab__badge.is-bump { animation: demo-bump .5s ease; }
@keyframes demo-bump { 40% { transform: scale(1.45); } }

/* Demo screens are stacked; data-screen on .phone__screen picks the visible one.
   Product pushes in from the left (RTL), the cart rises from the bottom. */
.demo { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.dscreen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 6px 14px 10px; overflow: hidden; background: #f5faf6; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease, filter .4s ease; }
.dscreen--splash { z-index: 5; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(circle at 50% 40%, #fff, #eef8f1); transition: opacity .5s ease, transform .5s ease; }
.dscreen--splash img { width: 150px; height: auto; }
.dscreen__loader { width: 34px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--green-100); }
.dscreen__loader::after { display: block; width: 50%; height: 100%; border-radius: 4px; background: var(--green-700); content: ''; animation: demo-load 1s ease-in-out infinite; }
@keyframes demo-load { from { transform: translateX(110%); } to { transform: translateX(-110%); } }
[data-screen]:not([data-screen="splash"]) .dscreen--splash { opacity: 0; transform: scale(1.06); pointer-events: none; }
.dscreen--home { z-index: 1; }
.dscreen--product { z-index: 2; padding-top: 0; transform: translateX(-104%); box-shadow: 0 0 30px rgba(0,0,0,.18); }
.dscreen--cart { z-index: 3; transform: translateY(104%); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.15); }
[data-screen="product"] .dscreen--product, [data-screen="cart"] .dscreen--product { transform: none; }
[data-screen="product"] .dscreen--home, [data-screen="cart"] .dscreen--home { transform: translateX(28%); filter: brightness(.85); }
[data-screen="cart"] .dscreen--cart { transform: none; }

.dscroll > *, .dscreen > * { flex-shrink: 0; }
.dscroll .pscreen__label { margin-top: 4px; }
.dscroll { display: flex; flex-direction: column; gap: 9px; transform: translateY(var(--demo-scroll, 0px)); transition: transform 1.3s cubic-bezier(.45,0,.2,1); }
.dlist { display: grid; gap: 7px; }
.dcard { display: flex; align-items: center; gap: 9px; padding: 7px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .18s ease, background .18s ease; }
.dcard img { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 11px; object-fit: cover; }
.dcard__text { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.35; }
.dcard__text b { font: 800 12px var(--font-display); }
.dcard__text small { color: var(--muted); font-size: 10px; }
.dcard__text em { color: var(--green-900); font: 800 10.5px var(--font-display); font-style: normal; }
.dcard__add { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; color: #fff; background: var(--green-700); font: 800 15px/1 var(--font-display); font-style: normal; }
.dback { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.9); font: 800 18px/1 var(--font-display); font-style: normal; }
.dqty { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dqty i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--green-900); background: var(--green-100); font: 800 14px/1 var(--font-display); font-style: normal; transition: transform .15s ease; }
.dqty b { min-width: 44px; font: 900 12px var(--font-display); text-align: center; }
.pscreen__cta { transition: background .3s ease, color .3s ease, transform .15s ease; }
.pscreen__cta.is-added { color: var(--green-950); background: var(--lime); }
.is-pressed { transform: scale(.92) !important; }
.dcard.is-pressed { background: #eef7f0; transform: scale(.97) !important; }

.dcart-row { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dcart-row img { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; }
.dcart-row img { flex: none; }
.dcart-row span { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.4; }
.dcart-row b, .dcart-row small { white-space: nowrap; }
.dcart-row b { font: 800 12px var(--font-display); }
.dcart-row small { color: var(--muted); font-size: 10px; }
.dcart-row em { flex: none; font: 900 10.5px var(--font-display); font-style: normal; white-space: nowrap; }
.dsum dd { white-space: nowrap; }
.dsum { display: grid; gap: 7px; margin: 4px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dsum div { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; }
.dsum dt { color: var(--muted); }
.dsum dd { margin: 0; font: 800 10.5px var(--font-display); }
.dsum__total { padding-top: 7px; border-top: 1px dashed var(--line); }
.dsum__total dt { color: var(--ink); font-weight: 800; }
.dsum__total dd { color: var(--green-900); font-size: 13px; }
.dcheckout { margin-top: auto; padding: 12px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--green-900), var(--green-700)); font: 800 12.5px var(--font-display); text-align: center; transition: transform .15s ease; }

.dtoast { position: absolute; z-index: 7; bottom: 12px; left: 50%; padding: 7px 14px; border-radius: 12px; color: #fff; background: rgba(6,32,22,.92); font: 700 11px var(--font-display); white-space: nowrap; opacity: 0; transform: translate(-50%, 12px); transition: opacity .3s ease, transform .3s ease; }
.dtoast.is-on { opacity: 1; transform: translate(-50%, 0); }
.demo::after { position: absolute; z-index: 7; inset: 0; background: rgba(4,20,13,.45); content: ''; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.demo.is-dim::after { opacity: 1; }
.dsheet { position: absolute; z-index: 8; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 26px; border-radius: 24px 24px 0 0; background: #fff; transform: translateY(105%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.dsheet.is-open { transform: none; }
.dsheet__check { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; background: var(--green-700); box-shadow: 0 0 0 8px rgba(19,122,80,.12); }
.dsheet__check svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 24; }
.dsheet.is-open .dsheet__check svg { animation: demo-check .5s .25s ease forwards; }
@keyframes demo-check { to { stroke-dashoffset: 0; } }
.dsheet b { font: 900 15px var(--font-display); }
.dsheet small { color: var(--muted); font: 700 11px var(--font-display); letter-spacing: 1px; }

/* Virtual finger. Position via --fx/--fy (set by JS), taps via .is-tap. */
.finger { position: absolute; z-index: 9; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(6,32,22,.35), 0 6px 16px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translate3d(var(--fx, 140px), var(--fy, 400px), 0); transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.finger.is-on { opacity: 1; }
.finger.is-swipe { transition-duration: 1.3s; transition-timing-function: cubic-bezier(.45,0,.2,1); }
.finger::after { position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.9); content: ''; opacity: 0; }
.finger.is-tap { background: rgba(255,255,255,.8); }
.finger.is-tap::after { animation: demo-ripple .5s ease-out; }
@keyframes demo-ripple { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(2.1); } }

/* Base for every image inside the demo app: fill its box, cropped. Zero
   specificity, so the sized rules (logo, cards, thumbs) always win. */
:where(.demo) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pscreen__top { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.pscreen__top img { width: 90px; height: 32px; object-fit: contain; }
.pscreen__bell { width: 30px; height: 30px; border-radius: 10px; background: var(--green-100); }
.pscreen__search { padding: 9px 12px; border-radius: 12px; color: #9fb2a6; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 600 11px var(--font-display); }
.pscreen__stories { display: flex; gap: 7px; }
.pscreen__stories span { flex: 0 0 42px; height: 42px; padding: 2px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--lime), var(--sky)); }
.pscreen__stories img { border: 2px solid #fff; border-radius: 50%; }
.pscreen__banner { position: relative; height: 92px; overflow: hidden; border-radius: 16px; }
.pscreen__banner::after { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(4,30,19,.75), rgba(4,30,19,.1)); content: ''; }
.pscreen__banner b { position: absolute; z-index: 1; top: 50%; right: 12px; color: #fff; font: 900 13px/1.5 var(--font-display); transform: translateY(-50%); }
.pscreen__label { font: 800 12px var(--font-display); }
.pscreen__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pscreen__cats span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pscreen__cats img { width: 48px; height: 48px; border-radius: 14px; }
.pscreen__cats small { font: 700 10px var(--font-display); }
.pscreen__hero { position: relative; flex: 0 0 170px; height: 170px; margin: 0 -14px; overflow: hidden; }
.pscreen__body { display: flex; flex-direction: column; gap: 7px; }
.pscreen__kicker { color: var(--green-700); font: 700 10.5px var(--font-display); }
.pscreen__name { font: 900 18px var(--font-display); }
.pscreen__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pscreen__chips span { padding: 3px 8px; border-radius: 8px; color: var(--green-900); background: var(--green-100); font: 700 10px var(--font-display); }
.pscreen__price { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; padding-top: 9px; border-top: 1px dashed var(--line); }
.pscreen__price span { color: var(--muted); font-size: 10.5px; }
.pscreen__price b { color: var(--green-900); font: 900 14px var(--font-display); }
.pscreen__buy { display: flex; gap: 6px; margin-top: 6px; }
.pscreen__qty { padding: 9px 10px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 800 11px var(--font-display); white-space: nowrap; }
.pscreen__cta { flex: 1; padding: 9px; border-radius: 11px; color: #fff; background: var(--green-900); font: 800 11px var(--font-display); text-align: center; }
.pscreen__title { font: 900 16px var(--font-display); }
.pscreen__eta { padding: 11px 13px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--green-950), var(--green-900)); }
.pscreen__eta small { display: block; opacity: .7; font-size: 10px; }
.pscreen__eta b { font: 800 13px var(--font-display); }
.pscreen__steps { display: grid; gap: 9px; margin: 4px 0; padding: 0 16px 0 0; list-style: none; }
.pscreen__steps li { position: relative; color: #9fb2a6; font: 700 11.5px var(--font-display); }
.pscreen__steps li::before { position: absolute; top: 4px; right: -16px; width: 9px; height: 9px; border-radius: 50%; background: #cfdcd4; content: ''; }
.pscreen__steps li.is-done { color: var(--ink); }
.pscreen__steps li.is-done::before { background: var(--green-700); }
.pscreen__steps li.is-now { color: var(--green-900); font-weight: 900; }
.pscreen__steps li.is-now::before { background: var(--lime); box-shadow: 0 0 0 4px rgba(131,223,56,.25); }
.pscreen__map { position: relative; flex: 1; min-height: 120px; overflow: hidden; border-radius: 16px; }
.pscreen__map span { position: absolute; right: 8px; bottom: 8px; padding: 4px 9px; border-radius: 9px; color: #fff; background: rgba(4,30,19,.75); font: 700 10px var(--font-display); }

/* Contact card: support hub with a visual route and clear action. */
.contact-card { position: relative; display: flex; min-height: 618px; flex-direction: column; overflow: hidden; padding: 28px 24px 22px; border: 1px solid rgba(131,223,56,.22); border-radius: 30px; color: #f4fff8; background: linear-gradient(155deg, rgba(13,90,59,.98), rgba(5,45,32,.98) 63%, rgba(4,32,25,.98)); box-shadow: 0 30px 70px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06); scroll-margin-top: calc(var(--site-header-height, 0px) + 24px); }
.contact-card::before { position: absolute; right: -90px; bottom: -125px; width: 285px; height: 285px; border: 1px solid rgba(67,196,232,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(67,196,232,.035), 0 0 0 57px rgba(67,196,232,.025); content: ''; pointer-events: none; }
.contact-card__orb { position: absolute; width: 80px; height: 80px; border-radius: 50%; filter: blur(1px); opacity: .45; pointer-events: none; }
.contact-card__orb--one { top: -38px; left: -30px; background: radial-gradient(circle, rgba(131,223,56,.42), transparent 70%); }
.contact-card__orb--two { right: 30%; bottom: 18%; background: radial-gradient(circle, rgba(67,196,232,.28), transparent 70%); }
.contact-card__head, .contact-card__lead, .contact-card__list, .contact-card__hours, .contact-card__footer { position: relative; z-index: 1; }
.contact-card__head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.contact-card__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; color: var(--lime); font: 800 10px var(--font-display); }
.contact-card__eyebrow span { width: 22px; height: 1px; background: linear-gradient(90deg, var(--sky), var(--lime)); }
.contact-card__title { margin: 0; color: #fff; font: 900 29px/1.15 var(--font-display); }
.contact-card__status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(131,223,56,.22); border-radius: 999px; color: rgba(235,250,239,.74); background: rgba(255,255,255,.07); font: 700 9px var(--font-display); white-space: nowrap; }
.contact-card__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(131,223,56,.13); }
.contact-card__lead { margin: 0 0 17px; color: rgba(235,250,239,.68); font-size: 11.5px; line-height: 1.95; }
.contact-card__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.contact-item { --c: var(--green-700); --bg: var(--green-100); display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 9px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; color: #fff; background: rgba(255,255,255,.065); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
a.contact-item:hover { border-color: rgba(131,223,56,.45); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.contact-item__icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--c); background: var(--bg); }
.contact-item__text { display: flex; min-width: 0; flex-direction: column; line-height: 1.4; }
.contact-item__text small { color: rgba(235,250,239,.58); font-size: 9px; }
.contact-item__text b { overflow: hidden; color: #fff; font: 800 11.5px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.contact-item--whatsapp { --c: #1fa855; --bg: rgba(37,211,102,.13); }
.contact-item--telegram { --c: #229ed9; --bg: rgba(34,158,217,.12); }
.contact-item--eitaa { --c: #e07b00; --bg: rgba(242,138,36,.13); }
.contact-item--bale { --c: #1a9a7a; --bg: rgba(40,190,175,.14); }
.contact-item--instagram { --c: #c1358b; --bg: rgba(193,53,139,.1); }
.contact-item--email { --c: var(--sky-deep); --bg: var(--sky-100); }
.contact-item--address { --c: #b4602c; --bg: rgba(242,138,36,.1); }
.contact-card__hours { display: flex; align-items: center; gap: 9px; margin: 13px 0 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; color: rgba(235,250,239,.7); background: rgba(0,0,0,.12); font-size: 10px; }
.contact-card__hours svg { width: 17px; height: 17px; color: var(--sky); }
.contact-card__hours span { display: grid; gap: 2px; }
.contact-card__hours b { color: #fff; font: 800 10px var(--font-display); }
.contact-card__footer { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 15px; }
.contact-card__cta { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 13px; color: #073b28; background: linear-gradient(135deg, #c8f88e, var(--lime)); box-shadow: 0 10px 24px rgba(131,223,56,.18); font: 900 11px var(--font-display); transition: transform .2s ease, box-shadow .2s ease; }
.contact-card__cta:hover { box-shadow: 0 13px 28px rgba(131,223,56,.3); transform: translateY(-2px); }
.contact-card__cta span { font-size: 16px; line-height: 1; }
.contact-card__route { display: inline-flex; align-items: center; gap: 3px; }
.contact-card__route i { width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
.contact-card__route i:nth-child(2) { width: 30px; height: 1px; border-radius: 0; background: linear-gradient(90deg, var(--sky), var(--lime)); }
.contact-card__route i:nth-child(3) { background: var(--lime); }
.contact-card__route-label { margin-inline-start: auto; color: rgba(235,250,239,.48); font: 700 8px var(--font-display); white-space: nowrap; }
.contact-card__route-label b { color: var(--sky); padding: 0 3px; }

/* In-place contact dialog opened from the header. It intentionally shares the
   commerce overlay shell so backdrop blur, focus treatment and page locking
   stay consistent with cart and tracking. */
.contact-overlay__panel { width: min(760px, 100%); }
.contact-overlay__head { padding-bottom: 24px; }
.contact-overlay__head .section-eyebrow { margin: 0 0 6px; }
.contact-overlay__body { padding-top: 20px; }
.contact-overlay__signal { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(131,223,56,.24); border-radius: 17px; background: linear-gradient(105deg, rgba(232,249,223,.8), rgba(232,249,253,.72)); }
.contact-overlay__signal-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 12px; color: var(--green-900); background: var(--lime); font-size: 17px; }
.contact-overlay__signal span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.contact-overlay__signal strong { color: var(--green-900); font: 900 13px var(--font-display); }
.contact-overlay__signal small { color: var(--muted); font-size: 11px; }
.contact-overlay__signal i { width: 7px; height: 7px; flex: 0 0 7px; margin-inline-start: auto; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(131,223,56,.15); }
.contact-overlay__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-overlay__item { --c: var(--green-700); --bg: var(--green-100); display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 13px; border: 1px solid rgba(19,122,80,.13); border-radius: 16px; color: var(--ink); background: rgba(255,255,255,.72); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
a.contact-overlay__item:hover, a.contact-overlay__item:focus-visible { border-color: var(--lime); background: #fff; transform: translateY(-2px); }
.contact-overlay__item-icon { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; border-radius: 12px; color: var(--c); background: var(--bg); }
.contact-overlay__item-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-overlay__item-copy { display: grid; min-width: 0; gap: 2px; line-height: 1.4; }
.contact-overlay__item-copy small { color: var(--muted); font-size: 10px; }
.contact-overlay__item-copy b { overflow: hidden; color: var(--green-900); font: 900 12px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.contact-overlay__item-arrow { margin-inline-start: auto; color: var(--green-700); font-size: 18px; }
.contact-overlay__hours { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 13px; border: 1px solid rgba(67,196,232,.18); border-radius: 15px; background: rgba(232,249,253,.55); }
.contact-overlay__hours > svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: var(--sky-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-overlay__hours span { display: grid; gap: 2px; }
.contact-overlay__hours b { color: var(--green-900); font: 900 11px var(--font-display); }
.contact-overlay__hours small { color: var(--muted); font-size: 10px; }
.contact-overlay__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px 20px; border-top: 1px solid rgba(19,122,80,.12); background: rgba(248,253,249,.9); }
.contact-overlay__footer > span { display: grid; gap: 2px; }
.contact-overlay__footer b { color: var(--green-900); font: 900 13px var(--font-display); }
.contact-overlay__footer small { color: var(--muted); font-size: 10px; }
.contact-overlay__cta { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 13px; color: #073b28; background: linear-gradient(135deg, #c8f88e, var(--lime)); box-shadow: 0 10px 24px rgba(131,223,56,.18); font: 900 11px var(--font-display); transition: transform .2s ease, box-shadow .2s ease; }
.contact-overlay__cta:hover, .contact-overlay__cta:focus-visible { box-shadow: 0 13px 28px rgba(131,223,56,.3); transform: translateY(-2px); }
.contact-overlay__cta span { font-size: 17px; line-height: 1; }
[data-theme="dark"] .contact-overlay__signal { border-color: rgba(131,223,56,.2); background: linear-gradient(105deg, rgba(22,61,45,.76), rgba(18,57,54,.7)); }
[data-theme="dark"] .contact-overlay__signal strong, [data-theme="dark"] .contact-overlay__item-copy b, [data-theme="dark"] .contact-overlay__hours b, [data-theme="dark"] .contact-overlay__footer b { color: #dfffe9; }
[data-theme="dark"] .contact-overlay__item { border-color: rgba(113,216,239,.16); color: #effff5; background: rgba(16,44,32,.78); }
[data-theme="dark"] a.contact-overlay__item:hover, [data-theme="dark"] a.contact-overlay__item:focus-visible { border-color: var(--lime); background: rgba(22,61,45,.95); }
[data-theme="dark"] .contact-overlay__hours, [data-theme="dark"] .contact-overlay__footer { border-color: rgba(113,216,239,.15); background: rgba(13,36,26,.82); }

@media (max-width: 600px) {
  .contact-overlay__panel { max-height: calc(100svh - 64px); border-radius: 24px; }
  .contact-overlay__list { grid-template-columns: 1fr; gap: 8px; }
  .contact-overlay__item { padding: 10px 11px; }
  .contact-overlay__footer { align-items: stretch; flex-direction: column; padding: 14px 18px 18px; }
  .contact-overlay__cta { justify-content: center; }
}

[data-theme="dark"] .contact-card { color: #f4fff8; background: linear-gradient(155deg, #0d5a3b, #052d20 63%, #041f18); }

@media (max-width: 1180px) {
  .appc__inner { grid-template-columns: minmax(0, 1fr) 480px; }
  .appc__intro { min-height: 0; }
  .contact-card { grid-column: 1 / -1; }
  .contact-card { min-height: 0; }
  .contact-card__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appc__device { --phone-w: 270px; }
}
@media (max-width: 820px) {
  .appc { padding: 70px 0 80px; }
  .appc > .container { width: min(calc(100% - 32px), var(--container)); }
  .appc__inner { grid-template-columns: 1fr; gap: 26px; }
  .appc__intro { max-width: none; padding: 28px 18px 24px; border-radius: 26px; }
  .appc__title { font-size: clamp(24px, 7.6vw, 34px); }
  .appc__stores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .store-btn { min-height: 54px; padding-inline: 6px; }
  .store-btn__text small { font-size: 8px; }
  .store-btn__text b { font-size: 11px; }
  .appc__device { --phone-w: min(272px, 76vw); min-height: 430px; }
  /* Phones: a slightly smaller phone leaves side room for compact cards. */
  .appc__device { --phone-w: min(226px, 60vw); --spill-w: 116px; }
  .spill__card { gap: 6px; padding: 5px 8px 5px 5px; border-radius: 12px; }
  .spill__card img, .spill__icon { width: 30px; height: 30px; border-radius: 9px; }
  .appc .spill__icon svg { width: 16px; height: 16px; }
  .spill__card b { font-size: 10px; }
  .spill__card small { font-size: 8.5px; }
  .spill__card em { font-size: 9.5px; }
  .contact-card__list { grid-template-columns: 1fr; }
  .contact-card { padding: 24px 17px 18px; border-radius: 26px; }
  .contact-card__head { align-items: center; }
  .contact-card__title { font-size: 26px; }
  .contact-card__status { padding: 6px 8px; font-size: 8px; }
  .contact-card__lead { font-size: 10.5px; }
  .contact-card__footer { flex-wrap: wrap; }
  .contact-card__route-label { width: 100%; margin-inline-start: 0; text-align: center; }
}
/* Grid children may shrink below their content (the bank strip is wide). */
.appc__inner > * { min-width: 0; }

/* Desktop: the closing section + copyright bar exactly fill the screen under
   the sticky header, so reaching the end of any page shows all of it at once
   with nothing left to scroll. --appc-h is the height of the three columns. */
@media (min-width: 1181px) {
  .appc { --appc-pad: clamp(16px, 2.6vh, 34px); --appc-h: clamp(420px, calc(100svh - var(--site-header-height, 135px) - 57px - 2 * var(--appc-pad)), 640px); display: flex; align-items: center; min-height: calc(var(--appc-h) + 2 * var(--appc-pad)); padding: var(--appc-pad) 0; }
  .appc__inner { align-items: stretch; gap: clamp(24px, 3vw, 48px); }
  .appc__intro, .contact-card { min-height: 0; height: var(--appc-h); }
  /* Phone keeps its 9:19.2 shape, sized from the available height. */
  .appc__device { --phone-w: calc(var(--appc-h) * .46875); height: var(--appc-h); }
  /* The phone column leaves ~115px each side for the spilled cards. */
  .appc__inner { grid-template-columns: minmax(0, 1fr) calc(var(--appc-h) * .46875 + 230px) minmax(0, 350px); }
}
/* Shorter screens: tighten spacing inside the columns so they still fit. */
@media (min-width: 1181px) and (max-height: 900px) {
  .appc__intro { padding: 24px 24px 20px; }
  .appc__intro .section-eyebrow { margin-bottom: 8px; }
  .appc__title { margin-bottom: 14px; font-size: clamp(28px, 2.9vw, 42px); }
  .appc__features { gap: 8px; margin-bottom: 16px; }
  .appc__features li { padding: 5px 8px; font-size: 14px; }
  .appc__features li span { flex-basis: 32px; width: 32px; height: 32px; }
  .store-btn { min-height: 50px; }
  .appc__intro .ftrust { margin-top: 16px; padding-top: 14px; }
  .appc__intro .ftrust__seal { flex-basis: 80px; width: 80px; height: 86px; }
  .contact-card { padding: 22px 20px 18px; }
}
@media (min-width: 1181px) and (max-height: 760px) {
  .appc__features li:nth-child(3) { display: none; }
  .appc__title { font-size: clamp(26px, 2.6vw, 36px); }
  .contact-card__hours { margin-top: 8px; padding: 8px 10px; }
}
@media (min-width: 1181px) and (max-height: 700px) {
  .appc__intro { padding: 18px 20px 16px; }
  .appc__title { margin-bottom: 10px; }
  .appc__features { margin-bottom: 12px; }
  .store-btn { min-height: 46px; }
  .appc__intro .ftrust { margin-top: 12px; padding-top: 12px; }
  .appc__intro .ftrust__seal { flex-basis: 72px; width: 72px; height: 78px; }
  .contact-card { padding: 18px 18px 14px; }
  .contact-card__title { font-size: 25px; }
  .contact-item { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { .spill__card, .dscreen__loader::after { animation: none; transition: none; } }