/* ═══ RXB45 HOMEPAGE COMPATIBILITY STYLESHEET — 2026-09-04 ═══════════════════
   Introduced because pre-2026-09-03 service workers may retain an older
   home-flagship.css. That file is referenced UNSTAMPED and hcdn serves it with
   max-age=604800, so a returning browser's HTTP cache still holds the 30 Aug
   copy — and the new worker's cache.add() re-reads that same stale entry. This
   URL has never existed before, so no HTTP cache and no Cache Storage can hold
   it: the styles below are guaranteed to come from the network.

   Every rule here is COPIED VERBATIM from the approved 2026-09-03 additions to
   home-flagship.css. Nothing is redesigned, nothing is new. It loads AFTER
   home-flagship.css, so equal-specificity rules win by order — which is exactly
   how the three replacement rules (#range .rns-tabs, #range .rns-com and the
   reduced-motion block) are meant to land.

   Scope: the agri homepage RXB45 release delta — the #rxb45-banner card AND the
   #range showcase rules that shipped with it (the 5th product's tab column, the
   MRP anchor, the phone snap rail). A stale home-flagship.css breaks all of
   them, not only the banner.

   TEMPORARY. Fold back into home-flagship.css and delete this file once legacy
   caches have aged out (safe after 2026-09-13). — agri.keelambi.com only. */

/* one equal column PER RECORD, however many the catalogue carries — repeat(4)
   wrapped the fifth product onto a second row (2026-09-02) */
/* 2026-09-04 FIX — this rule shipped UNSCOPED on 2026-09-03 and, loading after
   home-flagship.css, overrode the phone tab rail in its @media(max-width:743px)
   block: the segments became grid columns again and the strip stopped behaving
   like a scroller. It is a DESKTOP rule; it is now scoped to desktop widths. */
@media(min-width:744px){
  #range .rns-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-bottom:12px}
}
/* and the phone rail, carried here too so a stale home-flagship.css still gets it */
@media(max-width:743px){
  #range .rns-tabs{display:flex;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;padding-bottom:2px;scroll-padding-inline:16px}
  #range .rns-tabs::-webkit-scrollbar{display:none}
  #range .rns-tab{flex:0 0 auto;width:max-content;min-width:118px;
    max-width:min(62vw,208px);scroll-snap-align:start}
  #range .rns-ctl{justify-content:center}
}
/* fine-pointer desktop (.is-xf, set by the script): the rail is DRIVEN, not scrolled — the track
   translates on the owner's curve over 400ms, so the cycle moves like an app, not a scrollbar */
#range .rns.is-xf .rns-viewport{overflow:hidden;scroll-snap-type:none}
#range .rns.is-xf .rns-track{transition:transform .4s cubic-bezier(.25,1,.5,1)}
  font-size:15.5px;color:var(--sh-ink);font-variant-numeric:tabular-nums;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
/* the MRP anchor, for records that opt in (catalog anchorMRP). Quiet on purpose:
   the offer price is the figure the farmer reads, and this is only what it is
   measured against. No accent — the stage already spends one on its CTA. */
#range .rns-was{order:-1;font-weight:500;font-size:12.5px;color:var(--sh-ink-3);
  text-decoration:line-through;text-decoration-thickness:1px;text-underline-offset:2px}
#range .rns-off{flex:1 0 100%;font-family:var(--f-body);font-weight:500;font-size:11.5px;
  letter-spacing:.02em;color:var(--sh-ink-3)}
html[lang="kn"] #range .rns-off{font-family:var(--f-kn);letter-spacing:0}
/* — PHONE = a NATIVE SNAP RAIL (owner, 2026-09-03): the browser's own scroller — snap, momentum,
   rubber-band. Each stage is 92% wide and CENTRED in a snapport inset 8% (+gap) on the right,
   which lands it flush left with the NEXT stage peeking exactly 8% — the rail reads as continuing. — */
@media(max-width:767px){
  #range .rns-viewport{scroll-padding-inline-end:calc(8% + 10px);-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
  #range .rns-track{gap:10px}
  /* trailing room so the LAST stage can snap into the same place as every other */
  #range .rns-track::after{content:'';flex:0 0 8%}
  #range .rns-slide{flex-basis:calc(92% - 10px);scroll-snap-align:center}
  /* A PEEKING STAGE IS AN IMAGE, NOT A HALF-READ PARAGRAPH (the same rule the front door's
     carousel keeps): the screen edge cuts the neighbour, so its text must not be showing to cut.
     opacity, never display — the body keeps its space so the rail's height never jumps. */
  #range .rns-slide .rns-body{transition:opacity .25s ease}
  #range .rns-slide:not(.is-active) .rns-body{opacity:0;pointer-events:none}
}
  #range .rns-tab,#range .rns-btn,#range .rns-track{transition:none}

/* ═══ 02b · RXB45 FEATURE BANNER (2026-09-02) — one contained editorial card ═══
   Admission test: Q2 + Q3 (see the markup comment). R3 contained · R4 one
   accent: the red eyebrow; the action is ink, so red and saffron never share
   the card · R7 nothing decorative — the only shadow is the photograph's own,
   seated by multiply exactly as the SEV range plate is. Eyebrow sits on the
   platform's 11.5px type floor (the brief's 11px, rounded up to the floor). */
.rxb{padding-block:0;padding-inline:clamp(20px,5vw,52px)}
.rxb-card{position:relative;max-width:1280px;margin:64px auto;padding:clamp(28px,4vw,56px);
  background:#F4F5F7;border:1px solid #E5E7EB;border-radius:28px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.04);
  display:grid;grid-template-columns:1fr;align-items:center;gap:clamp(20px,3vw,40px)}
@media(min-width:900px){.rxb-card{grid-template-columns:45fr 55fr;padding:clamp(36px,4.5vw,64px)}}
@media(max-width:899px){.rxb-card{margin:40px auto}}
.rxb-eyebrow{display:block;font-family:var(--f-head);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#C81E1E}
html[lang="kn"] .rxb-eyebrow{font-family:var(--f-kn);letter-spacing:.04em;text-transform:none}
html[lang="kn"] .rxb-eyebrow:has([data-kn].kn-fallback){font-family:var(--f-head);letter-spacing:.18em;text-transform:uppercase}
.rxb-h{margin:12px 0 0;font-family:var(--f-head);font-weight:800;font-size:clamp(30px,3.8vw,48px);line-height:1.05;letter-spacing:-0.025em;color:#0F1115;text-wrap:balance}
html[lang="kn"] .rxb-h{font-family:var(--f-kn);font-weight:700;line-height:1.3;letter-spacing:0;font-size:clamp(24px,3vw,38px)}
html[lang="kn"] .rxb-h:has([data-kn].kn-fallback){font-family:var(--f-head);font-weight:800;line-height:1.05;letter-spacing:-0.025em;font-size:clamp(30px,3.8vw,48px)}
.rxb-sub{margin:14px 0 0;font-size:14px;line-height:1.55;color:#4B5563;max-width:42ch}
html[lang="kn"] .rxb-sub{font-family:var(--f-kn);line-height:1.75}
.rxb-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:12px 24px;min-height:44px;border-radius:9999px;
  background:#0F1115;color:#fff;font-family:var(--f-head);font-weight:700;font-size:13px;text-decoration:none;
  transition:transform .2s ease,background .2s ease}
.rxb-cta:hover{transform:translateY(-1px);background:#1F2937;color:#fff}
.rxb-cta:focus-visible{outline:2px solid #FF9933;outline-offset:3px}
html[lang="kn"] .rxb-cta{font-family:var(--f-kn)}
.rxb-stage{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;max-height:440px;margin:0}
.rxb-stage img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rxb-card:hover .rxb-stage img{transform:scale(1.02)}
@media(prefers-reduced-motion:reduce){.rxb-stage img,.rxb-cta{transition:none}.rxb-card:hover .rxb-stage img{transform:none}}