.payment-scroll{--payment-progress:0;position:relative;height:520vh;background:#f8f1e6;color:var(--green)}
.payment-sticky{position:sticky;z-index:2;top:68px;height:calc(100vh - 68px);min-height:590px;overflow:hidden;background:#f8f1e6}
.payment-sticky::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 45%,rgba(29,101,79,.11),transparent 30%),linear-gradient(90deg,rgba(239,113,61,.05),transparent 38%);pointer-events:none}
.payment-layout{position:relative;display:grid;grid-template-columns:minmax(220px,.65fr) minmax(520px,1.35fr);align-items:center;height:100%;gap:clamp(20px,4vw,64px)}
.payment-copy{position:relative;z-index:4}.payment-kicker{display:block;margin-bottom:12px;color:var(--orange);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.payment-copy h2{font-size:clamp(2.6rem,5vw,5rem);line-height:.92;margin:0 0 18px}.payment-copy p{color:#607069;font-size:1rem}.payment-dots{display:flex;gap:8px;margin-top:28px}.payment-dots span{width:9px;height:9px;border-radius:50%;background:#cabfaf;transition:width .35s ease,background-color .35s ease}.payment-dots span.active{width:34px;border-radius:10px;background:var(--orange)}
.payment-device{position:relative;isolation:isolate;align-self:center;width:100%;height:min(72vh,690px);min-height:500px;display:grid;place-items:center}.payment-device>img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 24px 30px rgba(18,59,50,.12))}
.payment-stage{position:absolute!important;z-index:20!important;left:50.5%!important;top:34.5%!important;width:clamp(128px,13vw,180px);height:92px;pointer-events:none}.payment-method{position:absolute!important;z-index:21;left:50%!important;top:50%!important;display:grid;grid-template-columns:38px 1fr 20px;align-items:center;gap:9px;width:100%;min-height:74px;padding:10px 11px;border:1px solid rgba(255,255,255,.75);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.32));box-shadow:0 14px 32px rgba(13,53,43,.2),inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .3s ease;will-change:transform,opacity}.payment-method.is-active{opacity:1;transform:translate(-50%,-50%)}
.payment-method>span:nth-child(2){display:grid;min-width:0}.payment-method strong{color:#123b32;font-size:.7rem;white-space:nowrap}.payment-method small{color:#66736e;font-size:.5rem;white-space:nowrap}.payment-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#fff;font-size:.62rem;font-weight:900;letter-spacing:-.02em}.payment-mark.capitec{background:#e63246}.payment-mark.apple{background:#111}.payment-mark.samsung{background:#1428a0}.payment-mark.visa{background:#1434cb;font-style:italic}.payment-mark.mastercard{position:relative;display:block;background:rgba(255,255,255,.7)}.payment-mark.mastercard i{position:absolute;top:10px;width:19px;height:19px;border-radius:50%;background:#eb001b}.payment-mark.mastercard i:first-child{left:5px}.payment-mark.mastercard i:last-child{right:5px;background:#f79e1b;mix-blend-mode:multiply}.payment-check{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#dfece5;color:var(--green);font-size:.58rem;font-weight:900}
.payment-hint{position:absolute;z-index:4;left:0;bottom:24px;margin:0;color:#728079;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.payment-hint span{display:inline-block;color:var(--orange);animation:paymentHint 1.5s ease-in-out infinite}@keyframes paymentHint{50%{transform:translateY(5px)}}
.payment-sticky::after{content:"";position:absolute;z-index:5;left:0;bottom:0;width:var(--payment-progress);height:4px;background:var(--orange);transition:width .12s linear}
@media(max-width:900px){.payment-layout{grid-template-columns:.55fr 1.45fr;gap:10px}.payment-copy h2{font-size:clamp(2.3rem,7vw,4rem)}.payment-device{height:min(67vh,620px)}.payment-stage{top:39%;width:clamp(120px,17vw,155px)}}
@media(max-width:680px){.payment-scroll{height:470vh}.payment-sticky{min-height:620px}.payment-layout{display:block;padding-top:28px}.payment-copy{position:absolute;z-index:5;left:20px;right:20px;top:24px;text-align:center}.payment-copy h2{font-size:2.25rem;margin-bottom:7px}.payment-copy p{font-size:.82rem}.payment-dots{justify-content:center;margin-top:13px}.payment-device{position:absolute;inset:138px -22% 20px;width:144%;height:auto}.payment-stage{top:38%;width:120px}.payment-hint{left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap}}
@media(max-height:680px) and (min-width:681px){.payment-copy h2{font-size:3rem}.payment-device{height:580px;transform:scale(.86)}.payment-hint{bottom:10px}}
@media(prefers-reduced-motion:reduce){.payment-method,.payment-dots span{transition:none}.payment-hint span{animation:none}}

/* Continuous food-bulk recommendations */
.bulk-recommendations{position:relative;padding:58px 0;background:#f8f1e6;overflow:hidden}
.bulk-rec-shell{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,52px);min-height:390px;padding:16px;border:1px solid #e4d9ca;border-radius:28px;background:linear-gradient(135deg,rgba(255,253,248,.96),rgba(248,241,230,.94));box-shadow:0 24px 60px rgba(18,59,50,.11);overflow:hidden}
.bulk-rec-shell::before{content:"";position:absolute;z-index:-1;right:-20px;top:-18px;width:245px;height:205px;background:url('../images/d6-pattern.svg') right top/auto 46px;opacity:.18;mask-image:linear-gradient(225deg,#000 0%,rgba(0,0,0,.72) 32%,transparent 82%);-webkit-mask-image:linear-gradient(225deg,#000 0%,rgba(0,0,0,.72) 32%,transparent 82%)}
.bulk-rec-visual{min-width:0;margin:0;border:1px solid rgba(255,255,255,.9);border-radius:19px;overflow:hidden;background:#eadbc5;box-shadow:0 14px 36px rgba(18,59,50,.14)}
.bulk-rec-visual img{display:block;width:100%;height:100%;min-height:358px;object-fit:cover;object-position:center}
.bulk-rec-content{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:28px 28px 24px 0;color:var(--green);overflow:hidden}
.bulk-rec-kicker{color:var(--orange);font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.bulk-rec-content h2{max-width:570px;margin:9px 0 10px;color:var(--green);font-size:clamp(1.85rem,3.2vw,3rem);line-height:1}
.bulk-rec-content>p{max-width:520px;margin-bottom:22px;color:#5f6d67;font-size:.86rem}
.bulk-rec-window{position:relative;width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bulk-rec-track{display:flex;width:max-content;animation:bulkRecMarquee 34s linear infinite;will-change:transform}
.bulk-rec-window:hover .bulk-rec-track,.bulk-rec-window:focus-within .bulk-rec-track{animation-play-state:paused}
.bulk-rec-group{display:flex;gap:12px;padding-right:12px}
.bulk-rec-card{display:flex;width:174px;min-height:236px;flex-direction:column;padding:10px;border:1px solid rgba(255,255,255,.9);border-radius:17px;background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(223,234,223,.4));box-shadow:0 14px 30px rgba(18,59,50,.12),inset 0 1px rgba(255,255,255,.96);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);transition:transform .25s ease,background-color .25s ease,border-color .25s ease}
.bulk-rec-card:hover{transform:translateY(-5px);border-color:rgba(29,101,79,.25);background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(223,234,223,.58))}
.bulk-rec-card>a{display:block}.bulk-rec-image{display:block;height:112px;margin-bottom:10px;padding:7px;border:1px solid rgba(255,255,255,.9);border-radius:12px;background:rgba(248,241,230,.88);overflow:hidden}.bulk-rec-image img{display:block;width:100%;height:100%;object-fit:contain}
.bulk-rec-card small{display:block;color:var(--orange);font-size:.54rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.bulk-rec-card h3{min-height:2.4em;margin:4px 0 10px;color:var(--green);font-size:.76rem;line-height:1.2}.bulk-rec-card>div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.bulk-rec-card strong{color:var(--green);font-size:.78rem}.bulk-rec-card button{min-width:48px;height:27px;padding:0 10px;border:0;border-radius:999px;background:var(--orange);color:#fff;font:inherit;font-size:.6rem;font-weight:800;cursor:pointer;transition:transform .18s ease,background-color .2s ease}.bulk-rec-card button:hover{background:#d85e2f;transform:scale(1.05)}
.bulk-rec-link{align-self:flex-start;margin-top:20px;color:var(--green);font-size:.72rem;font-weight:800}.bulk-rec-link span{display:inline-block;margin-left:5px;color:var(--orange);transition:transform .2s ease}.bulk-rec-link:hover span{transform:translateX(5px)}
@keyframes bulkRecMarquee{to{transform:translateX(-50%)}}
@media(max-width:820px){.bulk-recommendations{padding:42px 0}.bulk-rec-shell{grid-template-columns:1fr;gap:0}.bulk-rec-visual{height:250px}.bulk-rec-visual img{min-height:0;height:100%;object-position:center 38%}.bulk-rec-content{padding:28px 10px 20px}.bulk-rec-card{width:164px}.bulk-rec-content h2{font-size:2rem}}
@media(max-width:520px){.bulk-rec-shell{padding:10px;border-radius:20px}.bulk-rec-visual{height:205px;border-radius:14px}.bulk-rec-content{padding:24px 4px 16px}.bulk-rec-content h2{font-size:1.72rem}.bulk-rec-content>p{font-size:.78rem}.bulk-rec-card{width:150px;min-height:218px}.bulk-rec-image{height:100px}}
@media(prefers-reduced-motion:reduce){.bulk-rec-track{width:100%;animation:none;overflow-x:auto}.bulk-rec-group[aria-hidden="true"]{display:none}.bulk-rec-group{padding-bottom:8px}.bulk-rec-card{flex:0 0 174px}}

/* Cream recommendation treatment with a softly fading corner motif */
.bulk-rec-shell{border-color:#e4d8c7;background:#f8f1e6;box-shadow:0 22px 58px rgba(18,59,50,.11)}
.bulk-rec-shell::before{inset:auto;top:0;right:0;width:min(34%,290px);height:190px;background:url('../images/d6-pattern.svg') top right/auto 42px;opacity:.17;mask-image:radial-gradient(ellipse at 100% 0,#000 0%,rgba(0,0,0,.72) 38%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 100% 0,#000 0%,rgba(0,0,0,.72) 38%,transparent 78%)}

/* Faster seven-method mobile payment sequence */
.payment-scroll{height:350vh}
.payment-mark.payfast{background:linear-gradient(135deg,#e73346 0 50%,#3154a4 50%);font-size:.58rem}
.payment-mark.stitch{background:#5b35d5;font-size:.45rem;letter-spacing:-.04em}
@media(max-width:680px){.payment-scroll{height:330vh}}