/*
Theme Name: Peacock Nadi 2
Theme URI: https://mynadileaf.com
Author: MyNadiLeaf
Description: mynadileaf.com - the 2026 redesign. Generated by build_theme.py from the approved
  static build; functions.php is carried over verbatim from peacock-nadi.
Version: 2.0.0
Requires PHP: 8.0
License: Proprietary
Text Domain: peacock-nadi
*/

:root{color-scheme:light}html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --green:#16615E; --green-d:#0E4A47; --gold:#F4C11B;
  --paper:#ECE7E4; --paper-2:#F5F2EF; --card:#FFFDFB;
  --ink:#0C0904; --ink-2:#65584B; --ink-3:#8E8880; --line:#CFC8C2;
  --onDark:#F6F3F0; --onDark-2:rgba(246,243,240,.74); --onDark-3:rgba(246,243,240,.46);
  --disp:"Outfit",-apple-system,Helvetica,Arial,sans-serif;
  --body:"Inter",-apple-system,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --chrome:0px;
}
*{box-sizing:border-box}
body{margin:0;background:#D9D4CF;color:var(--ink);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:300;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* every link state, explicitly. `a{color:inherit}` alone leaves :active and :visited to
   whatever sheet the page is hosted in, and a pressed button turned black. */
a,a:link,a:visited,a:hover,a:focus,a:active{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- preview chrome ---------- */
.bar{position:sticky;top:0;z-index:60;background:#23211E;color:#F4F1EE;padding:10px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.bar b{font-family:var(--disp);font-weight:500;font-size:15px}
.bar .sp{flex:1}
.seg{display:flex;background:rgba(255,255,255,.12);border-radius:999px;padding:3px}
.seg button{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)}
.seg button[aria-pressed="true"]{background:#F4F1EE;color:#23211E}
.bar small{font-size:11.5px;color:rgba(255,255,255,.55)}
.wrap{padding:22px 16px 70px;display:flex;justify-content:center}
.stage{container-type:inline-size;width:100%;max-width:1280px;background:var(--paper);position:relative;overflow:clip}
.stage[data-view="tablet"]{width:834px;border-radius:26px;box-shadow:0 0 0 10px #23211E,0 22px 54px rgba(0,0,0,.26)}
.stage[data-view="mobile"]{width:390px;height:812px;overflow-y:auto;overflow-x:hidden;border-radius:40px;
  box-shadow:0 0 0 11px #23211E,0 26px 64px rgba(0,0,0,.30);scroll-behavior:smooth}
.stage[data-view="mobile"]::-webkit-scrollbar{width:0}

/* ---------- shared ---------- */
.logo{width:150px;height:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:999px;
  font-family:var(--body);font-size:14.5px;font-weight:600;padding:13px 24px;border:1px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn{-webkit-tap-highlight-color:transparent}
/* BUTTON LABEL COLOUR — the one place on this site that uses !important, deliberately.
   Declaring `color` for every link state was not enough: a pressed label still went black.
   Two things beat a plain `color` declaration and both are invisible from inside the page —
   a host stylesheet with !important, and `-webkit-text-fill-color`, which WINS OVER `color`
   whatever the specificity. So the label sets both properties, on both button styles, across
   all five link states. Backgrounds and borders are left as normal declarations. */
.btn-primary,.btn-primary:link,.btn-primary:visited,.btn-primary:hover,.btn-primary:focus,
.btn-primary:active{background:var(--green);border-color:var(--green);
  color:var(--onDark)!important;-webkit-text-fill-color:var(--onDark)!important}
.btn-primary:hover,.btn-primary:focus{background:var(--green-d);border-color:var(--green-d)}
.btn-primary:active{background:#0A3B39;border-color:#0A3B39}
.btn-line,.btn-line:link,.btn-line:visited,.btn-line:hover,.btn-line:focus,
.btn-line:active{background:transparent;border-color:var(--line);
  color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
.btn-line:hover,.btn-line:focus{border-color:var(--ink-3);background:rgba(12,9,4,.03)}
.btn-line:active{background:rgba(12,9,4,.07);border-color:var(--ink-3)}
.btn svg,.btn:active svg{stroke:currentColor}
.btn-line .wa,.btn-line:active .wa{fill:#25D366!important;stroke:none}
.btn-line .wa{fill:#25D366;stroke:none;width:17px;height:17px}
.kicker{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.sechead{font-family:var(--disp);font-weight:200;letter-spacing:-.025em;font-size:clamp(24px,2.7cqw,34px);line-height:1.1}

/* ---------- desktop nav ---------- */
.nav{position:sticky;top:var(--chrome,0px);z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding:14px 44px;background:rgba(253,252,247,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .l,.nav .r{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:500;color:var(--ink-2)}
.nav .r{justify-self:end}
.nav a:hover{color:var(--ink)}
.nav .btn{padding:8px 17px;font-size:12.5px}
.crumb{padding:18px 44px 0;font-size:12.5px;color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 7px;opacity:.5}

/* ---------- product head ---------- */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;padding:26px 44px 56px;align-items:start;max-width:1240px;margin:0 auto}

/* gallery: one snap rail everywhere, thumbnails drive it on the bigger screens */
.gal{position:relative}
.gal-rail{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  border-radius:20px;background:#DED7D1;scrollbar-width:none}
.gal-rail::-webkit-scrollbar{display:none}
.gal-rail figure{margin:0;scroll-snap-align:start;aspect-ratio:1/1}
.gal-rail img{width:100%;height:100%;object-fit:cover}
.count{position:absolute;right:14px;bottom:14px;background:rgba(12,9,4,.55);color:#fff;
  backdrop-filter:blur(8px);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums}
.thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:12px}
.thumbs button{border-radius:12px;overflow:hidden;aspect-ratio:1/1;border:2px solid transparent;
  transition:border-color .2s ease,opacity .2s ease;opacity:.62;background:#DED7D1}
.thumbs button[aria-current="true"]{border-color:var(--green);opacity:1}
.thumbs button:hover{opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover}

/* buy box */
.buy{position:sticky;top:calc(var(--chrome,0px) + 76px)}
.buy h1{font-size:clamp(28px,3.1cqw,40px);line-height:1.08;margin-top:12px}
.buy .lede{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:22px}
.price b{font-family:var(--disp);font-size:40px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price s{font-size:17px;color:var(--ink-3);font-weight:400}
.save{background:var(--gold);color:#241C08;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700}
.unit{font-size:14px;color:var(--ink-3);font-weight:500}
.taxline{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.offer{margin-top:18px;display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);
  border:1px dashed var(--line);border-radius:14px;padding:13px 15px}
.offer svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.offer b{display:block;font-size:13.5px;font-family:var(--disp);font-weight:500}
.offer span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
/* this product only makes sense after the main reading, so the page says so where it matters */
.pre{margin-top:18px;display:flex;gap:12px;align-items:flex-start;background:#E7F0EE;
  border:1px solid #BFD8D5;border-radius:14px;padding:13px 15px}
.pre svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;stroke:var(--green);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pre b{display:block;font-size:13.5px;font-family:var(--disp);font-weight:500}
.pre span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.pre a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* app chrome is opt-in: a page that does not style it must not show it */
.appbar,.tabbar,.buybar,.mspace,.msticky,.buywrap,.navbar{display:none}

.wrap{padding:0}

.cards,.steps,.faces,.quotes,.prods,.names,.rail,.cardrail{scroll-padding-left:44px}
@container (min-width:641px) and (max-width:1000px){.cards,.steps,.faces,.quotes,.prods,.names,.rail,.cardrail{scroll-padding-left:26px}}
@container (max-width:640px){.cards,.steps,.faces,.quotes,.prods,.names,.rail,.cardrail{scroll-padding-left:16px}}


/* ================= SITE NAVIGATION — shared component, see nav.py =================
   Appended after each page's own stylesheet so it wins on the few properties it
   restates. It deliberately does NOT restyle `.nav` itself: the homepage bar is
   transparent over the hero and the inner bar is solid and sticky, and both skins
   were approved. Only the contents of the left group and the panels are new.

   The component carries its OWN tokens. It used to read the page's --card and --ease
   directly, and the homepage happens to define neither: `background:var(--nv-card)` was
   therefore invalid, the dropdown rendered with no background at all, and dark text
   landed on the dark hero. A shared component cannot assume the host page's palette. */
:root{
  --nv-card:var(--card,#FFFDFB); --nv-paper:var(--paper,#ECE7E4); --nv-paper2:var(--paper-2,#F5F2EF);
  --nv-line:var(--line,#CFC8C2); --nv-ink:var(--ink,#0C0904); --nv-ink2:var(--ink-2,#65584B);
  --nv-ink3:var(--ink-3,#8E8880); --nv-green:var(--green,#16615E);
  --nv-disp:var(--disp,"Outfit",-apple-system,Helvetica,Arial,sans-serif);
  --nv-body:var(--body,"Inter",-apple-system,Helvetica,Arial,sans-serif);
  --nv-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
}
.nav .l,.navbar .lk{gap:4px}
/* nowrap: at ~1024px "About us" broke onto a second line and the bar grew to 106px.
   The dropdown buttons already had it; the flat links did not. */
.nav .l > a,.navbar .lk > a{padding:8px 12px;border-radius:9px;white-space:nowrap}
.nav .l > a:hover,.navbar .lk > a:hover{background:rgba(127,127,127,.12)}
.nd{position:relative}
.ndt{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;
  font:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.ndt:hover{background:rgba(127,127,127,.12)}
.ndt .chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;opacity:.7}
.nd.open .ndt .chev{transform:rotate(180deg)}
/* one light panel, so it reads the same over the dark hero and the ivory inner bar */
.ndp{position:absolute;top:calc(100% + 10px);left:0;min-width:262px;z-index:60;
  background:var(--nv-card);border:1px solid var(--nv-line);border-radius:16px;padding:7px;
  box-shadow:0 20px 48px rgba(12,9,4,.20)}
.ndp[hidden]{display:none}
/* The 10px between the button and the panel was dead space: crossing it fired mouseleave
   on .nd and the panel closed under the pointer, so nothing in it could be clicked. This
   invisible strip belongs to the panel, so the pointer stays inside .nd the whole way. */
.ndp::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
/* Scoped through `.nav .l` on purpose. The homepage carries
   `.nav .l a:hover,.navbar .lk a:hover{color:var(--onDark)}` at (0,3,1), which outranked a plain `.ndp a:hover`
   at (0,2,1) and painted the hovered item near-white on the near-white panel. These are
   (0,4,1), so the panel's own colours win on any page without reaching for !important. */
.nav .l .ndp a,.navbar .lk .ndp a{display:block;padding:10px 13px;border-radius:11px;font-size:13.5px;font-weight:500;
  color:var(--nv-ink2);white-space:nowrap}
.nav .l .ndp a:hover,.navbar .lk .ndp a:hover,.nav .l .ndp a:focus-visible,.navbar .lk .ndp a:focus-visible{background:var(--nv-paper);color:var(--nv-ink)}
.nav .l .ndp a[aria-current="page"],.navbar .lk .ndp a[aria-current="page"]{color:var(--nv-green);font-weight:600}
.nav .l .ndp a[aria-current="page"]:hover,.navbar .lk .ndp a[aria-current="page"]:hover{color:var(--nv-green)}
.nav .l > a[aria-current="page"],.navbar .lk > a[aria-current="page"],.nd.here .ndt{color:var(--nv-green)}

/* a burger that looks like one: three bars, and only where it is needed */
.navburger{display:none;width:38px;height:38px;border-radius:11px;border:1px solid currentColor;
  padding:0;cursor:pointer;place-items:center;gap:3.5px;flex:none;opacity:.85}
.navburger:hover{opacity:1}
.navburger i{display:block;width:16px;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .25s var(--nv-ease),opacity .2s ease}
.navburger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.navburger[aria-expanded="true"] i:nth-child(2){opacity:0}
.navburger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

/* the full menu: every page on the site, one screen, used by tablet and phone */
.navsheet{position:fixed;inset:0;z-index:90;background:rgba(12,9,4,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.navsheet[hidden]{display:none}

/* The menu sheet used to cover the whole screen, tab bar included: the Menu button that
   opened it disappeared under it, and with the close X scrolled off the top there was no
   obvious way out. It now stops above the bar, the bar stays tappable, and Menu closes it
   again. Any tab for the page being viewed is green, so the bar says where you are. */
@media (max-width:640px){
  .navsheet{inset:0 0 64px 0}
  .navsheet .in{max-height:100%}
}
.tabbar a[aria-current="page"],.tabbar a.on{color:var(--nv-green)}
.navsheet .in{position:absolute;inset:0 0 auto 0;max-height:100%;overflow-y:auto;
  background:var(--nv-paper);padding:16px 18px 26px;
  border-radius:0 0 22px 22px;box-shadow:0 26px 60px rgba(12,9,4,.30)}
.navsheet .top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid var(--nv-line)}
.navsheet .top b{font-family:var(--nv-disp);font-weight:500;font-size:15px;color:var(--nv-ink)}
.navsheet .x{width:36px;height:36px;border-radius:50%;border:1px solid var(--nv-line);
  display:grid;place-items:center;cursor:pointer;color:var(--nv-ink2)}
.navsheet .x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.navsheet .grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;margin-top:14px}
/* Group headings have to read as headings. With the old spacing every row -- label and
   link alike -- sat between two identical hairlines, so READINGS looked like one more menu
   item. The break now belongs to the heading: a rule ABOVE it and real space, while the
   links keep a much lighter divider between themselves. */
.navsheet h4{grid-column:1/-1;margin:22px 0 4px;padding-top:15px;border-top:1px solid var(--nv-line);
  font-family:var(--nv-body);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nv-ink3)}
.navsheet h4:first-of-type{margin-top:4px;padding-top:0;border-top:0}
.navsheet .grid a{display:block;padding:10px 0;font-size:14.5px;font-weight:500;color:var(--nv-ink2);
  border-bottom:1px solid rgba(207,200,194,.28)}
.navsheet .grid a + h4{margin-top:24px}
.navsheet .grid a:hover,.navsheet .grid a[aria-current="page"]{color:var(--nv-green)}
.navsheet .cta{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap}
.navsheet .cta .btn{flex:1;justify-content:center}

/* Breadcrumb: present and identical on every page but the homepage.
   The approved inner-page CSS hides it on the phone (`@container (max-width:640px){.nav,.crumb
   {display:none}}`). This rule un-hides it, deliberately: the phone app bar only reveals the
   page title once you scroll, so without the crumb there is no wayfinding at the top of the
   page, and a breadcrumb on every page was the explicit ask. */
.crumb{display:flex!important;flex-wrap:wrap;align-items:center;gap:2px 0}
.crumb a:hover{color:var(--nv-green);text-decoration:underline;text-underline-offset:2px}
.crumb .sep{margin:0 8px;opacity:.45}
.crumb .here{color:var(--nv-ink2)}

@container (min-width:1001px) and (max-width:1120px){
  /* the tightest desktop width: trim the padding rather than wrap or overflow */
  .nav .l,.navbar .lk{gap:0}
  .nav .l > a,.navbar .lk > a,.nav .l .ndt,.navbar .lk .ndt{padding-left:9px;padding-right:9px;font-size:12.5px}
}
@container (min-width:641px) and (max-width:1000px){
  /* the dropdowns cannot fit, so the burger takes over and opens the whole map */
  .nav .l > a,.navbar .lk > a,.nav .l .nd,.navbar .lk .nd{display:none}
  .navburger{display:grid}
  .nav .l,.navbar .lk{gap:0}
}
@container (max-width:640px){
  .navburger{display:none}
}
/* The sheet is a fixed, viewport-level overlay and sits OUTSIDE #stage, so a container
   query never reaches it. Its own breakpoint has to be a media query. */
@media (max-width:640px){
  .crumb{font-size:12px}
  .navsheet .grid{grid-template-columns:1fr}
  .navsheet .in{border-radius:0 0 20px 20px;padding:14px 16px 24px}
}

/* ---------- footer (shared: footer.php prints it on every page) ---------- */
.foot{background:var(--ink);color:var(--onDark-2)}
.foot-in{max-width:1240px;margin:0 auto;padding:44px 44px 34px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,243,240,.42);margin-bottom:14px}
.foot li{padding:5px 0;font-size:13.5px}
.foot li a:hover{color:var(--onDark)}
.foot .big{font-family:var(--disp);font-size:20px;font-weight:300;color:var(--onDark);display:block;margin-top:4px}
.foot .sm{font-size:12px;color:var(--onDark-3);margin-top:16px}
.foot .bot{border-top:1px solid rgba(246,243,240,.14);margin:0 44px;padding:18px 0 28px;font-size:11.5px;
  color:rgba(246,243,240,.4);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@container (min-width:641px) and (max-width:1000px){
  .foot-in{grid-template-columns:1.3fr 1fr 1fr;padding:38px 26px 30px;gap:26px}
  .foot .bot{margin:0 26px}
}

@container (max-width:640px){
  /* On a phone this is an app: the desktop bar and the breadcrumb give way to the app bar at
     the top and the tab bar at the bottom. header.php and footer.php print both on EVERY
     page, so without these rules the WooCommerce pages showed the desktop nav squeezed into
     390px with no way to reach the rest of the site. */
  /* The crumb is NOT hidden here: nav.CSS keeps it on the phone on purpose (see its own
     note -- the app bar only reveals the page title after a scroll). */
  .nav{display:none}
  .appbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
    position:sticky;top:0;z-index:40;padding:11px 12px;
    background:rgba(253,252,247,.94);backdrop-filter:blur(16px);border-bottom:1px solid transparent;
    transition:border-color .25s ease}
  .scrolled .appbar{border-color:var(--line)}
  .appbar .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    background:rgba(12,9,4,.05)}
  .appbar svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* The page name is shown straight away, not only after a scroll.
     The approved design fades it in on scroll, which left the bar on an inner page holding
     nothing but a back arrow and two icons -- it read as though the header had gone missing
     when you came in from the homepage. */
  /* `header.appbar` rather than `.appbar`: each page part prints its own copy of the
     approved CSS inline in the body, AFTER style.css, so a plain `.appbar .ttl` rule ties
     and loses. The element selector breaks the tie. */
  header.appbar .ttl{font-family:var(--disp);font-size:15.5px;font-weight:500;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1}
  .appbar .row{display:flex;gap:8px}

  .foot{border-radius:22px 22px 0 0;margin-top:10px}
  .foot-in{grid-template-columns:1fr 1fr;gap:22px;padding:30px 16px 22px}
  .foot-in > div:first-child{grid-column:1/-1}
  .foot .bot{margin:0 16px;padding:16px 0 84px;display:block}
  .foot .bot span + span{display:block;margin-top:7px}
  .mspace{display:block;height:10px;background:var(--ink)}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:sticky;bottom:0;z-index:31;
    background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:9px 4px 12px}
  .tabbar a{display:grid;justify-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--ink-3)}
  .tabbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.on{color:var(--green)}
}

/* ---------- the cart, in the navigation ---------- */
/* Styled on .navcart itself rather than on `.nav .r .navcart`: the homepage has a second,
   scrolled bar whose group is `.rt`, and inner pages use `.r`. Scoping to one of them left
   the icon unstyled on the other -- an unsized SVG with the count dropped underneath it. */
.navcart{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:50%;flex:none;color:inherit;transition:background .18s ease}
.navcart:hover{background:rgba(255,255,255,.14)}
.hero.on-light .navcart:hover,
.nav.solid .navcart:hover,
.navbar .navcart:hover{background:rgba(12,9,4,.06)}
.navcart svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.navcart b{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--nv-green,#16615E);color:#F6F3F0;
  font-family:var(--body);font-size:10.5px;font-weight:700;line-height:17px;text-align:center}
.appbar .ic{position:relative}
.appbar .icnum{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--green);color:#F6F3F0;font-family:var(--body);
  font-size:10px;font-weight:700;line-height:16px;text-align:center}

/* ---------- the old theme's floating widgets ---------- */
/* functions.php is carried over verbatim, and it prints two widgets on wp_footer: a WhatsApp
   bubble (.mnl-wa-bubble) and a buy bar (.mnl-sticky / .pn-sticky-buy). Both were positioned
   by the OLD theme's stylesheet, which this theme does not load -- so they fell into the
   normal flow and stacked up as raw text under the tab bar at the foot of every page.
   The new design already carries all of it: WhatsApp in the bar, in the tab bar, on every
   product and in the footer, and its own buy bar on the phone. So they are hidden rather
   than restyled. Removing them properly means editing functions.php, which is deliberately
   kept byte-identical to the live theme. */
.mnl-wa-bubble,
.mnl-sticky,
.pn-sticky-buy{display:none!important}

/* ---------- the floating buy bar, at the foot of the page ---------- */
/* The bar sticks 64px up so it clears the tab bar -- but sticky positioning stops at the end
   of its scroll range, and at the very bottom of the page the bar came to rest ON the tab
   bar, with the tab bar painted over it (z-index 28 against none). Two fixes: it now sits
   above the tab bar in the stacking order, and the dark spacer that follows the footer is
   tall enough for the bar to land in. */
.buywrap,.msticky{z-index:32}

/* ---------- the app bar's dead share icon ---------- */
/* header.php prints a <span class="ic"> holding an upload glyph. It is a span, not a link or
   a button: it has never done anything. Rather than invent a share behaviour, the icon is
   removed -- an icon that cannot be pressed is worse than no icon. */
.appbar .row > span.ic{display:none}

/* ---------- room under the floating buy bar ---------- */
/* The bar floats over the page, so at rest it sat on top of whatever happened to be at the
   bottom of the screen -- usually the "often added afterwards" cards. The product content
   gets enough bottom padding that the bar always has empty space to sit in. */
@container (max-width:640px){
  .woocommerce div.product > .detail > section:last-of-type,
  .single-product .detail > section:last-of-type{padding-bottom:104px}
}