/* =========================================================
   NarkelBazar — real logo, language switcher, Bangla type
   Loaded after site.css / app.css so it can refine them.
   ========================================================= */

/* ---------------------------------------------------------
   1. The mark
   The logo art is green on transparency, so on dark surfaces
   it sits on a light chip to keep its contrast.
   --------------------------------------------------------- */
/* The <picture> around the roundel exists only to offer a webp; it must
   not become a box of its own, or the chip that stretches the image to
   100% would be measuring an inline wrapper with no width. */
.nb-markpic{display:contents}

.nb-mark{
  width:40px;height:40px;flex:none;object-fit:contain;
  transition:transform .6s var(--ease,cubic-bezier(.2,.7,.2,1));
}
.brand:hover .nb-mark{transform:rotate(-12deg)}

.nb-chip{
  display:grid;place-items:center;flex:none;
  width:42px;height:42px;padding:4px;border-radius:12px;
  background:#fff;box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
}
.nb-chip .nb-mark{width:100%;height:100%}

/* Header: the full wordmark carries the name, so the loose mark and the
   text lockup beside it are redundant. The artwork is cropped tight, so the
   height below is the height you actually see. */
/* The header row is a fixed 72px (84px from 1000px up), so the wordmark is
   sized to sit inside it with even breathing room. */
/* `flex:none` matters: the row is space-between, and letting the brand shrink
   squashes the wordmark against the nav. It also means we can keep the
   `max-width:100%` safety cap, so a slow stylesheet never flashes a
   760px-wide logo across a phone screen. */
.hdr .brand{flex:none}
.hdr .brand .nb-logo{height:46px;width:auto;display:block;transition:transform .6s var(--ease,ease)}
@media (min-width:1000px){
  .hdr .brand .nb-logo{height:58px}
}
.hdr .brand:hover .nb-logo{transform:translateY(-1px)}
.hdr .brand .brand-t,
.hdr .brand > .nb-markpic{display:none}

/* Drawer / footer brand: chip + the existing white text */
.drawer .brand .nb-chip,.ftr .brand .nb-chip{width:44px;height:44px}

/* Hero stamp core */
.hz-stamp .nb-chip{width:46px;height:46px;border-radius:50%;padding:5px;box-shadow:none}

/* Example dashboard inside the tracking section */
.db-brand .nb-mark{width:26px;height:26px}

/* App shell sidebar + auth panel */
.side-brand .nb-chip{width:38px;height:38px;border-radius:10px;padding:3px}
.auth-art .brand .nb-chip{width:44px;height:44px;border-radius:12px;padding:4px}

/* Auth form side gets the full wordmark on white */
.auth-box .nb-logo{height:44px;width:auto;margin-bottom:22px}

/* The account link lives in the actions row as an icon, not as a sixth nav
   item, so the wordmark keeps its width. */
.acct-btn{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line,#DCE3DE);color:var(--forest,#0F3325);
  background:#fff;transition:background-color .2s,border-color .2s;
}
.acct-btn svg{width:20px;height:20px}
.acct-btn:hover{background:var(--mist,#F2F5F1);border-color:var(--forest,#0F3325)}

/* Below 1000px the header already carries the account, WhatsApp, call and menu
   buttons. The switcher moves to the drawer and footer so the logo keeps room. */
@media (max-width:999px){
  .hdr-actions .lang-sw{display:none}
}
/* Between 1000 and 1400 the nav, the wide call pill and the actions overflow a
   legible wordmark. The pill becomes the icon call button, and the switcher
   collapses to a single button offering the other language — the drawer is
   desktop-hidden at these widths, so it must not disappear entirely.

   The ceiling was 1239px, which was too low: the wordmark, six nav links and
   the pill together need about 1360px, so every window between 1240 and that
   got a horizontal scrollbar and a page shifted off its own left edge. */
@media (min-width:1000px) and (max-width:1399px){
  .hdr .callbtn{display:none}
  .hdr-actions .m-call{display:grid !important}
  .hdr-actions .lang-sw{padding:2px;grid-auto-columns:auto}
  .hdr-actions .lang-sw a.on{display:none}
  .hdr-actions .lang-sw .lang-sw-pill{display:none}
  .hdr-actions .lang-sw a{color:var(--forest,#0F3325)}
}
/* Just above the desktop switch the header still does not fit. site.css
   brings the nav in at 1000px, but the wordmark, six links and the four
   action buttons need about 1113px — so a 1024px window (an iPad on its
   side, a small laptop) got a horizontal scrollbar and a page nudged off
   its own left edge, the same fault the 1399px ceiling above fixed at the
   other end. Rather than dropping back to the burger for two hundred
   pixels, the row is tightened until it fits. */
@media (min-width:1000px) and (max-width:1199px){
  .hdr .wrap{padding:0 26px}
  .hdr .brand .nb-logo{height:46px}
  .hdr .nav{gap:0;padding:4px}
  .hdr .nav-link{height:38px;padding:0 11px;font-size:14px}
  .hdr .nav-link .chev{width:12px;height:12px}
  .hdr-actions{gap:8px}
  .hdr-actions .wa-btn{width:44px;height:44px}
  .hdr-actions .wa-btn svg{width:21px;height:21px}
}
/* On a phone the drawer already carries the account link, so the header keeps
   the three buttons the original design had and gives the room to the logo. */
@media (max-width:560px){
  .hdr-actions .acct-btn{display:none}
  .hdr .brand .nb-logo{height:44px}
  .hdr-actions{gap:8px}
}
@media (max-width:380px){
  .hdr .brand .nb-logo{height:40px}
}
/* 320px screens: the wordmark plus three 44px buttons runs a few pixels over */
@media (max-width:344px){
  .hdr .brand .nb-logo{height:34px}
  .hdr-actions{gap:6px}
}

/* ---------------------------------------------------------
   2. Language switcher
   --------------------------------------------------------- */
/* Two equal halves and one pill that slides between them. The halves are
   equal so the pill can be a fixed 50% — EN and বাংলা are different
   widths, and a pill that resized as it travelled would wobble. */
.lang-sw{
  position:relative;display:inline-grid;grid-auto-flow:column;
  grid-auto-columns:1fr;align-items:center;flex:none;isolation:isolate;
  padding:3px;border-radius:999px;
  background:linear-gradient(180deg,rgba(15,51,37,.045),rgba(15,51,37,.085));
  border:1px solid rgba(15,51,37,.12);
  box-shadow:inset 0 1px 2px rgba(15,51,37,.06);
}
.lang-sw-pill{
  position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);border-radius:999px;
  background:linear-gradient(160deg,#1B5137,#0F3325 65%);
  box-shadow:0 3px 10px -3px rgba(15,51,37,.55),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .42s cubic-bezier(.19,.86,.24,1);
}
.lang-sw[data-active="bn"] .lang-sw-pill{transform:translateX(100%)}
.lang-sw a{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:28px;padding:0 11px;border-radius:999px;
  font:700 12.5px/1 var(--sans,system-ui);letter-spacing:.02em;
  color:var(--muted,#6C7770);text-decoration:none;white-space:nowrap;
  transition:color .28s ease,transform .28s cubic-bezier(.19,.86,.24,1);
}
.lang-sw a:hover{color:var(--forest,#0F3325)}
.lang-sw a:active{transform:scale(.94)}
.lang-sw a.on{color:#fff}
.lang-sw a.on:hover{color:#fff}
.lang-sw a:focus-visible{outline:2px solid var(--leaf,#7DB83E);outline-offset:2px}
.lang-sw a .bn{font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;font-size:13px}

/* On dark surfaces */
.lang-sw.on-dark{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.lang-sw.on-dark .lang-sw-pill{
  background:linear-gradient(160deg,#FFFFFF,#E6EFE1);
  box-shadow:0 3px 10px -3px rgba(0,0,0,.4)
}
.lang-sw.on-dark a{color:#C6D7BD}
.lang-sw.on-dark a:hover{color:#fff}
.lang-sw.on-dark a.on,.lang-sw.on-dark a.on:hover{color:var(--forest,#0F3325)}

@media (prefers-reduced-motion:reduce){
  .lang-sw-pill,.lang-sw a{transition:none}
}

/* Top bar variant */
.topbar .lang-sw{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
.topbar .lang-sw a{color:rgba(255,255,255,.75);height:22px;min-width:32px;font-size:12px}
.topbar .lang-sw a:hover{color:#fff}
.topbar .lang-sw a.on{background:#fff;color:var(--forest,#0F3325)}

/* Drawer variant sits full width under the quick actions */
.dr-lang{display:flex;align-items:center;gap:10px;margin-top:14px}
.dr-lang > span{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8FA884}
.dr-lang .lang-sw{flex:1;justify-content:stretch}
.dr-lang .lang-sw a{flex:1;height:34px;font-size:14px}

/* Dashboard / admin top bar */
.topbar-a .lang-sw{margin-left:auto}
@media (max-width:640px){
  .topbar-a .lang-sw a{min-width:32px;padding:0 7px;font-size:12px}
}

/* Auth pages: floating switcher */
.auth-lang{position:absolute;top:22px;right:24px;z-index:5}
.auth-form{position:relative}

/* ---------------------------------------------------------
   3. Bangla typography
   Bengali script needs a little more line height and none of
   the tight tracking the Latin display face is set with.
   --------------------------------------------------------- */
html[lang="bn"]{
  --sans:"Hind Siliguri","Noto Sans Bengali","Source Sans 3",system-ui,sans-serif;
  --serif:"Tiro Bangla","Noto Serif Bengali",Georgia,serif;
  --disp:"Hind Siliguri","Noto Sans Bengali","Onest",system-ui,sans-serif;
  --bn:"Tiro Bangla","Noto Serif Bengali",serif;
  --bn-sans:"Hind Siliguri","Noto Sans Bengali",sans-serif;
}
html[lang="bn"] body{line-height:1.75}

html[lang="bn"] .h1,html[lang="bn"] .h2,html[lang="bn"] .h3,
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3,html[lang="bn"] h4{
  letter-spacing:0;
}
html[lang="bn"] .h1{line-height:1.38;font-size:clamp(32px,6vw,62px)}
html[lang="bn"] .h2{line-height:1.38;font-size:clamp(26px,3.7vw,42px)}
html[lang="bn"] .h3{line-height:1.45}
/* Bengali ascenders and vowel signs need a taller line box than the Latin
   display setting, or the stacked hero lines collide. */
html[lang="bn"] .hz-h1{line-height:1.46;font-size:clamp(31px,5.6vw,58px)}
/* The Latin setting pulls the stacked lines together with a negative margin;
   Bengali descenders need that space back. */
html[lang="bn"] .hz-h1 .ln{padding-bottom:.1em;margin-bottom:0}
html[lang="bn"] .rot-i{white-space:nowrap}
html[lang="bn"] .lead{line-height:1.7}

/* The Bangla subtitle under the brand becomes the Latin name in bn */
html[lang="bn"] .brand-t span{font-family:var(--sans);font-size:12px;letter-spacing:.02em}
html[lang="bn"] .side-brand small{font-family:var(--sans)}

/* Buttons and chips need a touch more room for ascenders */
html[lang="bn"] .btn{height:54px;line-height:1.3}
html[lang="bn"] .btn-sm{height:38px}
html[lang="bn"] .chip{height:27px}
html[lang="bn"] .px-tab .bnl{font-family:var(--sans);font-size:12.5px}
html[lang="bn"] .dn-t > span{line-height:1.4}
/* The rotating word and its underline.

   The Latin setting gives the window 1.12em and hangs the line just under
   it, which is right for a word with no descenders. Bengali needs about
   1.3em for the same word — যুক্তাক্ষর and the ু / ্র marks hang well below
   the baseline — so the window clipped every word and the line was drawn
   straight through them. The window is taller here and the line sits under
   what the window now contains. */
html[lang="bn"] .rotw{line-height:1.3}
html[lang="bn"] .rot{height:1.44em}
html[lang="bn"] .rot-u{bottom:-.06em;height:.2em}

/* Tabular figures still line up with Bengali digits */
html[lang="bn"] .num{font-feature-settings:"tnum" 1}

/* Word marks used as decorative background text stay Bengali either way */
html[lang="bn"] .dr-word,html[lang="bn"] .ftr-word,html[lang="bn"] .auth-art .word{font-family:var(--bn)}

/* The admin/dashboard shell */
html[lang="bn"] .side-nav a{font-size:14.4px}
html[lang="bn"] .fld > label,html[lang="bn"] .fld > span.lbl,
html[lang="bn"] table.tbl th{letter-spacing:.02em;text-transform:none;font-size:13px}
html[lang="bn"] .stat b{font-size:25px;line-height:1.3}
html[lang="bn"] .steps .st{font-size:12.4px;line-height:1.35}

/* =========================================================
   Mobile action bar
   A sticky footer: full width, flush to the bottom edge, sitting
   on frosted glass. It slides away while the reader scrolls down
   and comes straight back when they scroll up.
   ========================================================= */
.mbar{
  left:0;right:0;bottom:0;border-radius:0;
  grid-template-columns:56px minmax(0,1fr) minmax(0,1.28fr);
  gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.8);
  backdrop-filter:blur(18px) saturate(1.8);
  border-top:1px solid rgba(15,51,37,.1);
  box-shadow:0 -12px 30px -20px rgba(15,51,37,.5);
  transform:translate3d(0,100%,0);
  /* Coming back is the motion the reader actually watches, so it gets a long,
     gentle glide. Leaving is quicker and just gets out of the way. */
  transition:transform 1.05s cubic-bezier(.19,.86,.24,1);
  will-change:transform;
}
.mbar.in{transform:none}
.mbar.tuck{
  transform:translate3d(0,100%,0);
  transition:transform .38s cubic-bezier(.55,0,.85,.2);
}

.mb-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 12px;border-radius:13px;
  font:700 15.5px/1 var(--sans,system-ui);letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,filter .25s;
}
.mb-btn:active{transform:scale(.96)}
.mb-btn .mb-t{overflow:hidden;text-overflow:ellipsis;min-width:0;position:relative;z-index:2}
.mb-btn svg{width:21px;height:21px;flex:none;position:relative;z-index:2}

/* ---------- Call ---------- */
.mb-call{
  background:linear-gradient(160deg,#FFFFFF 0%,#F1F7EC 100%);
  color:var(--forest,#0F3325);
  box-shadow:
    inset 0 0 0 1.5px rgba(15,51,37,.13),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 3px 9px -6px rgba(15,51,37,.45);
}
/* the handset gives a short ring every few seconds */
.mb-call svg{
  width:20px;height:20px;transform-origin:50% 62%;
  animation:mbHandset 5s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes mbHandset{
  0%,64%,100%{transform:rotate(0)}
  67%{transform:rotate(-15deg)}
  70%{transform:rotate(13deg)}
  73%{transform:rotate(-10deg)}
  76%{transform:rotate(8deg)}
  79%{transform:rotate(-5deg)}
  82%{transform:rotate(3deg)}
  85%{transform:rotate(0)}
}
/* two ripples leaving the button, offset so they read as a signal */
.mb-ring,
.mb-ring::after{
  position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(95,140,53,.5);
  animation:mbRing 5s cubic-bezier(.2,.7,.2,1) infinite;
}
.mb-ring::after{content:"";animation-delay:.42s}
@keyframes mbRing{
  0%,60%{box-shadow:0 0 0 0 rgba(95,140,53,.5)}
  85%,100%{box-shadow:0 0 0 13px rgba(95,140,53,0)}
}

/* ---------- WhatsApp ---------- */
.mb-wa{
  background:linear-gradient(145deg,#34DB79 0%,#22C55E 45%,#17A94C 100%);
  color:#fff;
  box-shadow:0 5px 14px -7px rgba(23,169,76,.85),inset 0 1px 0 rgba(255,255,255,.3);
}
.mb-wa .mb-ic{display:grid;place-items:center;position:relative;z-index:2}
.mb-halo{
  position:absolute;inset:-2px;border-radius:inherit;z-index:0;
  background:radial-gradient(70% 120% at 50% 50%,rgba(52,219,121,.5),transparent 70%);
  filter:blur(6px);
  animation:mbHalo 2.9s ease-in-out infinite;
}
@keyframes mbHalo{
  0%,100%{opacity:.4;transform:scale(.97)}
  50%{opacity:.9;transform:scale(1.05)}
}

/* ---------- Book an order ---------- */
.mb-book{
  background:linear-gradient(135deg,#17442F 0%,#0F3325 55%,#123B2B 100%);
  color:#fff;
  box-shadow:0 6px 16px -8px rgba(15,51,37,.9),inset 0 1px 0 rgba(255,255,255,.14);
}
/* light sweeps across the primary action every few seconds */
.mb-sheen{
  position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.32) 48%,transparent 62%);
  transform:translate3d(-130%,0,0);
  animation:mbSheen 5s cubic-bezier(.3,0,.2,1) infinite;
}
@keyframes mbSheen{
  0%,62%{transform:translate3d(-130%,0,0)}
  86%,100%{transform:translate3d(130%,0,0)}
}
.mb-ar{
  position:relative;z-index:2;flex:none;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--leaf-2,#8FD26A);color:var(--forest,#0F3325);
  animation:mbNudge 3.4s cubic-bezier(.2,.7,.2,1) infinite;
}
.mb-ar svg{width:14px;height:14px}
@keyframes mbNudge{
  0%,72%,100%{transform:translateX(0)}
  80%{transform:translateX(3px)}
  88%{transform:translateX(0)}
}
.mb-book:active .mb-ar{transform:translateX(4px)}

/* ---------- Touch ripple ---------- */
.mb-ripple{
  position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(0);
  animation:mbRipple .62s cubic-bezier(.2,.7,.2,1) forwards;
}
.mb-call .mb-ripple{background:rgba(15,51,37,.14)}
@keyframes mbRipple{
  to{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ---------- Narrow phones ----------
   Shed the least important label rather than clipping it. Bangla words run
   longer than the English ones, so the WhatsApp label goes earlier there. */
html[lang="bn"] .mb-btn{font-size:14.5px;font-weight:600}
html[lang="bn"] .mbar{grid-template-columns:56px minmax(0,1fr) minmax(0,1.34fr)}

@media (max-width:400px){
  .mbar{grid-template-columns:50px minmax(0,1fr) minmax(0,1.26fr);gap:8px;padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px))}
  .mb-btn{height:50px;font-size:14px;gap:7px;padding:0 10px}
  .mb-ar{width:23px;height:23px}
  .mb-ar svg{width:13px;height:13px}
  html[lang="bn"] .mb-btn{font-size:13.5px}
  html[lang="bn"] .mbar{grid-template-columns:50px minmax(0,1fr) minmax(0,1.44fr)}
}
/* The Bangla WhatsApp label still fits at 375, but not at 360 */
@media (max-width:370px){
  html[lang="bn"] .mb-wa .mb-t{display:none}
}
@media (max-width:360px){
  .mb-wa .mb-t{display:none}
}
@media (max-width:344px){
  .mb-ar{display:none}
  .mb-btn{font-size:13px;padding:0 8px}
}

@media (prefers-reduced-motion:reduce){
  .mbar{transition:none}
  .mbar,.mbar.in{transform:none}
  .mbar.tuck{transform:translate3d(0,100%,0)}
  .mb-ring,.mb-ring::after,.mb-halo,.mb-sheen,.mb-ar,.mb-call svg{animation:none}
  .mb-halo{opacity:.45}
  .mb-ripple{display:none}
}

/* =========================================================
   Price page — the rate card people find from search.
   Mobile first: the board becomes stacked cards on a phone
   so nothing needs sideways scrolling.
   ========================================================= */
.pr-crumbs{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);margin-bottom:18px;flex-wrap:wrap}
.pr-crumbs a{color:var(--forest);font-weight:600;text-decoration:none}
.pr-crumbs a:hover{text-decoration:underline}

.pr-hero{padding-top:34px;background:linear-gradient(180deg,var(--mist) 0%,#fff 72%)}
.pr-live{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:7px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:13.6px;color:var(--slate);
  box-shadow:0 6px 16px -12px rgba(15,51,37,.6);
}
.pr-live b{color:var(--forest);letter-spacing:.06em;text-transform:uppercase;font-size:11.8px}
.pr-dot{width:8px;height:8px;border-radius:50%;background:#2FD06E;box-shadow:0 0 0 0 rgba(47,208,110,.6);animation:prPulse 2.4s infinite}
@keyframes prPulse{0%{box-shadow:0 0 0 0 rgba(47,208,110,.55)}70%,100%{box-shadow:0 0 0 9px rgba(47,208,110,0)}}

.pr-h1{margin:18px 0 0;font-size:clamp(32px,6.4vw,64px)}
.pr-lead{margin-top:16px}
.pr-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pr-stats > div{
  flex:1 1 150px;padding:15px 16px;border-radius:14px;
  background:#fff;border:1px solid var(--line);
}
.pr-stats b{display:block;font:700 26px/1.1 var(--disp);color:var(--ink);letter-spacing:-.02em}
.pr-stats span{display:block;font-size:13.2px;color:var(--muted);margin-top:5px}
.pr-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ---------- The board ---------- */
.pr-board-sec{background:#fff}
.pr-board{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -44px rgba(15,51,37,.5);
}
.pr-table{width:100%;border-collapse:collapse;font-size:15px}
.pr-table th,.pr-table td{padding:14px 16px;text-align:left;vertical-align:middle}
.pr-table thead th{
  background:var(--forest);color:#fff;font:700 12px/1 var(--sans);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
.pr-table .r{text-align:right}
.pr-table tbody tr{border-top:1px solid var(--line-2,#EAEFE9)}
.pr-table tbody tr:nth-child(even){background:#FBFCFA}
.pr-p{display:flex;align-items:center;gap:11px;min-width:0}
.pr-p img{width:40px;height:40px;border-radius:9px;object-fit:cover;background:var(--mist);flex:none}
.pr-p b{display:block;font-size:14.8px;color:var(--ink);font-weight:600;line-height:1.3}
.pr-p small{display:block;font-size:12.6px;color:var(--muted)}
.pr-size{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--mist);border:1px solid var(--line);
  font-size:12.8px;font-weight:600;color:var(--slate);white-space:nowrap;
}
.pr-ours{font-size:19px;color:var(--ink);font-weight:700}
.pr-mkt{color:var(--muted);text-decoration:line-through}
.pr-save{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:#E9F4EC;color:#2F7A45;font:700 13px/1 var(--sans);white-space:nowrap;
}
.pr-bulk{display:block;font-size:11.8px;color:var(--muted);margin-top:5px;line-height:1.4}
.pr-cap{padding:14px 16px;background:var(--mist);font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.pr-flash{animation:prFlash 1.1s var(--ease)}
@keyframes prFlash{0%{background:#E9F4EC}100%{background:transparent}}

/* ---------- Reasons ---------- */
.pr-why{background:var(--mist)}
.pr-reasons{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-reasons li{display:flex;gap:14px;padding:22px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.pr-ic{
  flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--forest);color:var(--leaf-2,#8FD26A);
}
.pr-ic svg{width:21px;height:21px}
.pr-reasons b{display:block;font-size:16.5px;color:var(--ink);font-family:var(--serif);font-weight:500;margin-bottom:6px}
.pr-reasons p{font-size:14.6px;color:var(--slate);line-height:1.6}

/* ---------- Terms + calculator ---------- */
.pr-terms-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pr-terms-list li{display:flex;gap:12px}
.pr-terms-list .tk{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:#E9F4EC;color:#2F7A45;margin-top:2px;
}
.pr-terms-list .tk svg{width:14px;height:14px}
.pr-terms-list b{display:block;font-size:15.6px;color:var(--ink);margin-bottom:3px}
.pr-terms-list p{font-size:14.4px;color:var(--slate);line-height:1.6}
.pr-calc{
  margin-top:28px;padding:24px;border-radius:18px;
  background:var(--forest);color:#C6D7BD;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.pr-calc h3{color:#fff;margin-bottom:6px}
.pr-calc p{font-size:14.8px;max-width:52ch}
.pr-calc .btn-dark{background:#fff;color:var(--forest)}
.pr-calc .btn-dark:hover{background:var(--mist)}

/* ---------- FAQ ---------- */
.pr-faq{background:var(--mist)}
.pr-qa{display:grid;gap:10px}
.pr-qa details{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pr-qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:17.5px;color:var(--ink);font-weight:500;
}
.pr-qa summary::-webkit-details-marker{display:none}
.pr-qa summary::after{
  content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--leaf);
  border-bottom:2px solid var(--leaf);transform:rotate(45deg) translateY(-3px);
  transition:transform .3s var(--ease);
}
.pr-qa details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.pr-qa p{padding:0 20px 20px;font-size:15.2px;color:var(--slate);line-height:1.68}

/* ---------- Close ---------- */
.pr-close{background:var(--forest);color:#C6D7BD;text-align:center}
.pr-close .h2{color:#fff}
.pr-close .lead{color:#A9C29C;margin:14px auto 0}
.pr-close .pr-cta{justify-content:center}

/* ---------- Phones: the table becomes cards ---------- */
@media (max-width:760px){
  .pr-reasons,.pr-terms-list{grid-template-columns:minmax(0,1fr)}
  .pr-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pr-table,.pr-table tbody,.pr-table tr,.pr-table th,.pr-table td{display:block;width:100%}
  .pr-table tbody tr{
    border:1px solid var(--line);border-radius:14px;margin:0 0 12px;padding:14px;
    background:#fff !important;
  }
  .pr-table th,.pr-table td{padding:0;text-align:left}
  .pr-table td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:10px}
  /* the column name travels with the value */
  .pr-table td::before{
    content:attr(data-label);flex:none;
    font:700 11.6px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  }
  .pr-table .r{text-align:right}
  .pr-bulk{text-align:right}
  .pr-calc{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .pr-stats > div{flex:1 1 100%}
}

/* ---------------------------------------------------------
   Mobile readability and touch targets
   --------------------------------------------------------- */
/* 11.8px is below comfortable reading size on a phone */
@media (max-width:760px){
  .pr-bulk{font-size:12.6px}
  .pr-table tbody tr{padding:16px}
  .pr-ours{font-size:20px}
}

/* On a touch screen the switcher needs a real target, not a 26px pill */
@media (pointer:coarse){
  .lang-sw a{min-height:40px;min-width:48px}
  .topbar .lang-sw a{min-height:34px}
  .pr-crumbs a{display:inline-block;padding:6px 0;min-height:32px}
}

/* =========================================================
   Product picker — exactly five across a line, arrows for the rest.
   The rail carries 20px of padding on each side and a 10px gap, so five
   tiles and the four gaps between them come out of the inner width.
   ========================================================= */
/* The arrows are positioned against this. */
.et-wrap{position:relative}
/* a soft edge tells the reader there is more to the right */
.et-wrap::after{
  content:"";position:absolute;top:14px;bottom:10px;right:0;width:30px;
  pointer-events:none;border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%);
  opacity:0;transition:opacity .3s;
}
.et-wrap.more::after{opacity:1}
/* The end of the rail has to be a snap position of its own, or the last
   press goes nowhere: the leftover room is less than a step, the scroll is
   clamped short of the next card's snap point, and snapping hands it back
   to the card it started from. */
.etiles .etile:last-child{scroll-snap-align:end}

/* ---- The product carousel ----

   Four across from 1000px up, filling the line, the rest behind the arrow.
   site.css lays the rail out as a six-column grid at that width — every
   product on one line at 57px each; this makes it scroll instead.

   Narrower than that the base rule in site.css already has it right: a
   flex row of 112px tiles you swipe, which is what a thumb expects.

   Still a grid rather than flex, because a grid track resolves its
   percentage against the rail's own definite width. A flex item's
   percentage here resolves against a shrink-to-fit fieldset whose width
   depends on this content, and comes back as almost nothing. */
@media (min-width:1000px){
  .etiles{
    position:relative;scroll-behavior:smooth;
    display:grid;grid-auto-flow:column;
    grid-template-columns:none;
    grid-auto-columns:calc((100% - 3 * 10px) / 4);
    gap:10px;
    /* 6px of side room for the tick, which hangs off the corner of a card,
       and the same 6px pulled straight back out so the first and last card
       start and finish where the size buttons below them do. */
    padding:12px 6px 8px;margin-inline:-6px;max-width:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:6px;
    scrollbar-width:none;-ms-overflow-style:none
  }
  .etiles::-webkit-scrollbar{display:none}
  /* A grid track already sets the width; a tile fixing its own would
     overflow the track it sits in. */
  .etiles .etile{width:auto;min-width:0;scroll-snap-align:start}

  /* Four whole cards have nothing to fade, and washing the fourth one out
     only made it look disabled. */
  .et-wrap::after{display:none}
}
/* The husking badge's green, so the two round green things on the page
   read as one family rather than two accidents. */
.et-nav{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);color:#fff;
  background:linear-gradient(135deg,#4CAF50 0%,#2E8B3E 50%,#1E6B30 100%);
  box-shadow:0 6px 14px -6px rgba(30,107,48,.75),inset 0 1px 0 rgba(255,255,255,.35);
  transition:opacity .25s,transform .25s,filter .2s;
}
.et-nav svg{width:16px;height:16px}
.et-nav:hover{filter:brightness(1.07);transform:scale(1.06)}
.et-nav[disabled]{opacity:0;pointer-events:none}
/* Out on the ends of the rail, mostly in the panel's own padding. Standing
   in gutters they took 88px off the row and left it short of the size
   buttons underneath. */
.et-prev{left:-18px}
.et-prev svg{transform:rotate(180deg)}
.et-next{right:-18px}
/* The arrows stay on a phone too. A thumb can swipe, but until something
   is sitting on the edge of the row nothing says the row moves at all.
   There are no gutters down here, so they ride on the ends instead. */
@media (max-width:999px){
  .et-nav{width:32px;height:32px;top:44%}
  .et-nav svg{width:14px;height:14px}
  .et-prev{left:-6px}
  .et-next{right:-6px}
}

@media (max-width:900px){
  .etiles .etile{width:calc((100% - 30px) / 3.4)}
}
@media (max-width:640px){
  .etiles .etile{width:calc((100% - 20px) / 2.4)}
  .et-wrap::after{width:26px}
}

/* ============================================================
   Estimate step 04 — pick the delivery point on a map
   ============================================================ */
.mp{margin-top:14px}

.mp-toggle{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px 10px 13px;border-radius:999px;
  border:1px solid rgba(79,138,38,.28);background:rgba(125,184,62,.08);
  color:#3F6B1E;font:600 14px/1 inherit;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .25s cubic-bezier(.19,.86,.24,1)
}
.mp-toggle svg{width:16px;height:16px;fill:currentColor;transition:transform .35s cubic-bezier(.19,.86,.24,1)}
.mp-toggle:hover{background:rgba(125,184,62,.16);border-color:rgba(79,138,38,.45)}
.mp-toggle:hover svg{transform:translateY(-2px)}
.mp-toggle:active{transform:scale(.97)}
.mp-toggle.on{background:rgba(125,184,62,.2);border-color:rgba(79,138,38,.5)}
.mp-toggle.busy{opacity:.6;pointer-events:none}
.mp-toggle.busy svg{animation:mp-pulse .9s ease-in-out infinite}
@keyframes mp-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.mp-panel{margin-top:12px;animation:mp-in .42s cubic-bezier(.19,.86,.24,1) both}
.mp-panel[hidden]{display:none}
@keyframes mp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.mp-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mp-here{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(0,0,0,.12);background:#fff;color:inherit;
  font:600 13px/1 inherit;transition:border-color .2s ease,background .2s ease
}
.mp-here svg{width:14px;height:14px;fill:currentColor}
.mp-here:hover{border-color:rgba(79,138,38,.45);background:rgba(125,184,62,.07)}
.mp-here.busy{opacity:.55;pointer-events:none}

.mp-read{margin:0;font:600 13px/1.45 inherit;color:#3F6B1E}
.mp-read.far{color:#A8471B}

.mp-canvas{
  height:300px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(0,0,0,.12);background:#EDE7DC;
  box-shadow:0 8px 24px rgba(0,0,0,.07)
}
.mp-note{margin:9px 0 0;font:400 11.5px/1.5 inherit;opacity:.62}

/* Leaflet markers, drawn rather than fetched as images */
.mp-mk{background:none;border:0}
.mp-mk i{
  display:block;width:18px;height:18px;margin:2px;border-radius:50%;
  border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)
}
.mp-mk b{
  position:absolute;left:50%;top:-22px;transform:translateX(-50%);
  padding:2px 8px;border-radius:999px;white-space:nowrap;
  font:700 10.5px/1.5 inherit;color:#fff;background:rgba(32,26,18,.85)
}
.mp-mk-us i{background:#8A5530}
.mp-mk-you i{background:#7DB83E}
.mp-mk-you{cursor:grab}
.mp-mk-you:active{cursor:grabbing}
.mp-mk-you i{animation:mp-ping 2.2s ease-out infinite}
@keyframes mp-ping{
  0%{box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 0 rgba(125,184,62,.55)}
  70%{box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 14px rgba(125,184,62,0)}
  100%{box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 0 rgba(125,184,62,0)}
}

.leaflet-container{font:inherit}
.leaflet-control-attribution{font-size:10px}

@media (max-width:640px){
  .mp-canvas{height:240px}
  .mp-bar{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .mp-panel{animation:none}
  .mp-mk-you i,.mp-toggle.busy svg{animation:none}
  .mp-toggle,.mp-toggle svg{transition:none}
}

/* A refused pick: the reason shakes just enough to be noticed */
@keyframes mp-nudge{
  0%,100%{transform:none}
  20%{transform:translateX(-4px)}
  45%{transform:translateX(3px)}
  70%{transform:translateX(-2px)}
}
.mp-read.nudge{animation:mp-nudge .42s cubic-bezier(.36,.07,.19,.97)}
@media (prefers-reduced-motion:reduce){ .mp-read.nudge{animation:none} }

/* The pin is the control, so it reads as one: bigger target, a grab cursor,
   and the idle pulse stops the moment it is picked up. */
.mp-mk-you i{width:20px;height:20px;margin:1px}
.mp-mk-you{cursor:grab;touch-action:none}
.mp-mk-you:active,.mp-dragging .mp-mk-you{cursor:grabbing}
.mp-dragging .mp-mk-you i{animation:none;transform:scale(1.12);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.mp-dragging .mp-mk-you b{opacity:.55}
.mp-mk-you i{transition:transform .18s cubic-bezier(.19,.86,.24,1),box-shadow .18s ease}

/* Tapping the map points at the pin rather than moving it. The animation
   goes on the inner dot, never the marker element: Leaflet positions that
   one with its own transform and a keyframe would fight it. */
@keyframes mp-call{
  0%,100%{transform:none}
  30%{transform:translateY(-7px) scale(1.15)}
  55%{transform:translateY(0) scale(.95)}
  78%{transform:translateY(-3px) scale(1.05)}
}
.mp-mk-you.call i{animation:mp-call .62s cubic-bezier(.19,.86,.24,1)}

/* Outside the country is masked out, so the canvas behind it should match */
.mp-canvas{background:#F3EFE6}
.leaflet-container{background:#F3EFE6}

@media (prefers-reduced-motion:reduce){
  .mp-mk-you.call i{animation:none}
  .mp-mk-you i{transition:none}
}

/* ============================================================
   Size buttons carry a photo of the grade, not a drawn circle
   ============================================================ */
/* The photo itself lives in site.css. This block used to repeat it with
   overflow:hidden, which loads later and so won — and a tick pinned to
   the outside of the circle was clipped away by it. Only the hover
   movement is kept here. */
.szb:hover .szp{transform:translateY(-2px) scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .szp{transition:none}
  .szb:hover .szp,.szb.on .szp,.szb[aria-pressed="true"] .szp{transform:none}
}

/* ---------------------------------------------------------
   The mega menu card, dressed for a wedding

   Marigolds, bunting and a string of lights, drawn rather than
   photographed: this panel is behind a menu nobody has opened yet,
   and it should not cost a request to sit there. The art is full
   bleed with its own scrim, so the words stay readable whatever is
   underneath them.
   --------------------------------------------------------- */
.mg-card.fest{
  background:
    radial-gradient(85% 65% at 50% 0%,rgba(246,178,60,.2),rgba(246,178,60,0) 64%),
    linear-gradient(160deg,#17503A 0%,#0B281D 100%)
}
.mg-fest{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* The words and the arrow ride above the scene. Named one by one rather
   than as "every child except the drawing" — that also caught the picture
   slider and the shade over it, turned them from inset overlays into flow
   elements, and collapsed them to nothing. */
.mg-card.fest .mg-tag,
.mg-card.fest > b,
.mg-card.fest > p,
.mg-card.fest .mg-go{position:relative;z-index:2}
/* The tag joins the stack at the bottom rather than floating at the top:
   up there it sat on the bunting, and z-index:1 above had already taken
   its absolute positioning away. A chip of its own keeps it readable
   whatever it lands on. */
.mg-card.fest .mg-tag{
  position:static;align-self:flex-start;margin-bottom:11px;
  padding:5px 11px;border-radius:999px;color:#FFD9A0;
  background:rgba(8,30,22,.55);border:1px solid rgba(255,217,160,.32);
  backdrop-filter:blur(3px)
}
.mg-card.fest .mg-tag i{background:#F6B23C}
.mg-card.fest .mg-go{color:#FFD9A0}

.mg-bulb{animation:mg-twinkle 2.9s ease-in-out infinite;animation-delay:calc(var(--i) * .21s)}
@keyframes mg-twinkle{0%,100%{opacity:.4}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .mg-bulb{animation:none;opacity:.9}
}

/* Photographs in the promo card, fading one into the next.

   The card keeps its green underneath, so the first paint is brand rather
   than a grey box waiting for an image, and the shade over the pictures is
   what the words sit on. */
.mg-slides{position:absolute;inset:0;overflow:hidden;border-radius:20px}
.mg-slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;transform:scale(1.04)
}
.mg-slides img.on{opacity:1}
.mg-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,30,22,.15) 0%,rgba(8,30,22,.55) 48%,rgba(8,30,22,.93) 100%)
}
/* With a photograph behind them the words need no second background. */
.mg-card.shot .mg-tag{background:rgba(8,30,22,.6)}

@media (prefers-reduced-motion:reduce){
  .mg-slides img{transition:none}
}

/* ---------------------------------------------------------
   The reminder, while the shutters are up

   Only the people who can still see the site ever see this,
   which is exactly the set of people who might forget.
   --------------------------------------------------------- */
.bld-bar{
  position:fixed;left:50%;translate:-50% 0;z-index:70;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 24px);
  padding:10px 16px;border-radius:999px;
  background:rgba(20,14,4,.92);color:#FFE2B8;
  border:1px solid rgba(242,160,61,.4);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:600 13.2px/1.3 var(--sans,system-ui)
}
.bld-bar span{display:inline-flex;align-items:center;gap:9px}
.bld-bar i{
  width:8px;height:8px;border-radius:50%;background:#F2A03D;flex:none;
  box-shadow:0 0 0 0 rgba(242,160,61,.6);animation:bld-beat 2.2s ease-out infinite
}
@keyframes bld-beat{
  0%{box-shadow:0 0 0 0 rgba(242,160,61,.55)}
  70%,100%{box-shadow:0 0 0 9px rgba(242,160,61,0)}
}
.bld-bar a{
  color:#0F3325;background:#F2A03D;text-decoration:none;
  padding:5px 13px;border-radius:999px;white-space:nowrap;
  transition:background-color .2s
}
.bld-bar a:hover{background:#FFC46B}

/* The phone already has a dock across the bottom; sit above it. */
@media (max-width:999px){
  .bld-bar{bottom:calc(78px + env(safe-area-inset-bottom,0px));font-size:12.4px}
}
@media (prefers-reduced-motion:reduce){ .bld-bar i{animation:none} }