/* Shared public navigation and native mobile dialog. */
.mn-header{position:relative;z-index:25;background:var(--paper);color:var(--ink)}
.mn-bar{min-height:112px;max-width:1440px;width:calc(100% - 112px);margin-inline:auto;display:flex;align-items:center;gap:30px;border-bottom:1px solid #223f2d24}
.mn-brand{width:167px;display:block;flex:none}.mn-brand img{width:100%;height:auto}
.mn-header .mn-links{display:flex;align-items:center;gap:28px;margin:0;margin-inline-start:28px}
.mn-header .mn-link{border:0;background:none;color:inherit;font:500 14px/1.6 var(--sans);padding:14px 0;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;position:relative;cursor:pointer;min-height:48px}
html[lang=ar] .mn-header .mn-link{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px}
.mn-link::after{content:'';position:absolute;inset-inline:0;bottom:7px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .16s ease}
.mn-link:hover::after,.mn-link[aria-expanded=true]::after,.mn-link[aria-current]::after{transform:scaleX(1)}
.mn-header svg,.mn-mobile-dialog svg{width:20px;height:20px;flex:none;display:block}.mn-greens-toggle svg{width:16px;height:16px;transition:transform .16s ease}.mn-greens-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.mn-tools{margin-inline-start:auto;display:flex;align-items:center;gap:19px}.mn-account{display:flex;align-items:center;gap:9px;font-size:13px;white-space:nowrap;min-height:46px}.mn-account[aria-current]{text-decoration:underline;text-underline-offset:6px}.mn-account:hover{text-decoration:underline;text-underline-offset:6px}.mn-tool-divider{height:20px;width:1px;background:#223f2d2e}
.mn-language{display:flex;align-items:center;gap:7px}.mn-language>svg{width:17px;height:17px}.mn-header .language-toggle{border:0;background:none;padding:10px 2px;min-width:27px;min-height:44px;font-size:13px;line-height:1.6;border-radius:0}.mn-header .language-toggle:hover{text-decoration:underline;text-underline-offset:6px}
.mn-header .mn-shop,.mn-mobile-dialog .mn-shop{display:inline-flex;align-items:center;justify-content:space-between;gap:19px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:6px 7px 6px 20px;padding-inline:20px 7px;border-radius:99px;min-height:49px;font:500 13px/1.65 var(--sans);white-space:nowrap;box-shadow:none}
html[lang=ar] .mn-shop{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px}.mn-header .mn-shop:hover,.mn-mobile-dialog .mn-shop:hover{background:#36543c}
html .mn-header .header-link>span{font-size:inherit;line-height:inherit;transform:none}
.mn-shop i{width:35px;height:35px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center}.mn-shop i svg{width:19px;height:19px}.mn-header .mn-cart{padding-inline:20px 8px;gap:24px}.mn-cart>span{background:var(--lime);color:var(--ink);min-width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px}
.mn-disclosure{position:relative}.mn-greens-panel{position:absolute;top:calc(100% + 20px);inset-inline-start:-24px;width:550px;border:1px solid #b9c4ad;background:#f9f8f0;border-radius:20px;padding:25px;box-shadow:0 18px 36px #223f2d16}.mn-greens-panel[hidden]{display:none}.mn-greens-panel::before{content:'';width:12px;height:12px;position:absolute;inset-inline-start:52px;top:-7px;border-top:1px solid #b9c4ad;border-inline-start:1px solid #b9c4ad;background:#f9f8f0;transform:rotate(45deg)}
.mn-panel-heading{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:20px}.mn-panel-heading p{font-size:15px;font-weight:500}.mn-header .mn-panel-heading a{display:flex;align-items:center;gap:9px;padding:0;border:0;font-size:12px;white-space:nowrap}.mn-panel-heading a:hover{text-decoration:underline}.mn-panel-heading svg{width:16px;height:16px}
.mn-product-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.mn-header .mn-product{padding:0;border:0;font-size:12px!important;display:flex;flex-direction:column;gap:10px;text-align:center}.mn-product-photo{overflow:hidden;aspect-ratio:1.06;border-radius:46% 46% 13px 13px;background:#e5e8d6;direction:ltr}.mn-product-photo img{width:300%;max-width:none;height:100%;object-fit:cover;transition:transform .18s ease}.mn-crop-1 img{margin-left:-100%}.mn-crop-2 img{margin-left:-200%}.mn-product:hover .mn-product-photo img{transform:scale(1.025)}.mn-growing-note{margin-top:19px!important;padding-top:16px;border-top:1px solid #223f2d1d;font-size:11px;color:#576153}
html[dir=rtl] .mn-direction{transform:scaleX(-1)}
.mn-mobile-bag,.mn-menu-button{display:none}.mn-mobile-dialog{padding:0;border:0;color:var(--ink);background:var(--paper);max-height:100dvh;height:100dvh;max-width:100%;width:100%;margin:0;overflow-y:auto;overscroll-behavior:contain}.mn-mobile-dialog::backdrop{background:#223f2d70}.mn-mobile-dialog:not([open]){display:none}body:has(.mn-mobile-dialog[open]){overflow:hidden}
.mn-mobile-top{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 20px;border-bottom:1px solid #223f2d24}.mn-mobile-top .mn-brand{width:144px}.mn-close{width:44px;height:44px;background:var(--ink);color:var(--paper);border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer}.mn-menu-caption{font-size:12px;margin:32px 25px 12px;color:#576153}
.mn-mobile-dialog .mn-mobile-links{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0 25px}.mn-mobile-dialog .mn-mobile-links>a{font:700 31px/1.5 var(--display);padding:14px 0;border:0;border-bottom:1px solid #223f2d24;display:flex;align-items:center;justify-content:space-between}.mn-mobile-dialog .mn-mobile-links>a:hover{color:#647b30}html[lang=ar] .mn-mobile-links>a{font-family:'Baloo Bhaijaan 2',sans-serif}.mn-mobile-links svg{width:24px;height:24px}
.mn-mobile-account{display:flex;align-items:center;gap:12px;margin:26px 25px;padding-block:10px;font-size:15px}.mn-mobile-bottom{margin:38px 25px 25px}.mn-mobile-dialog .mn-mobile-bottom .mn-shop{display:flex;font-size:16px;padding-inline-start:24px;min-height:57px}.mn-mobile-bottom .mn-shop i{width:42px;height:42px}.mn-mobile-bottom p{font-size:11px;color:#576153;text-align:center;margin-top:20px}
.mn-header :is(a,button):focus-visible,.mn-mobile-dialog :is(a,button):focus-visible{outline:3px solid #687f29;outline-offset:4px}.mn-header button{cursor:pointer}
@media(min-width:1500px){.mn-bar{gap:36px}.mn-header .mn-links{gap:36px;margin-inline-start:45px}}
@media(max-width:1150px) and (min-width:901px){.mn-bar{width:calc(100% - 64px);gap:18px}.mn-brand{width:148px}.mn-header .mn-links{gap:19px;margin-inline-start:4px}.mn-tools{gap:12px}.mn-account>span{display:none}.mn-header .mn-shop{gap:12px}.mn-greens-panel{width:485px}}
@media(max-width:900px){.mn-bar{width:calc(100% - 40px);min-height:88px;gap:12px}.mn-brand{width:146px}.mn-header .mn-links,.mn-account,.mn-tool-divider,.mn-header .mn-shop{display:none}.mn-tools{margin-inline-start:auto;gap:0}.mn-language>svg{display:none}.mn-header .language-toggle{padding-inline:3px;font-size:12px}.mn-mobile-bag,.mn-menu-button{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;flex:none}.mn-mobile-bag{background:var(--lime)}.mn-menu-button{border:0;background:var(--ink);color:var(--paper)}.mn-mobile-bag svg,.mn-menu-button svg{width:19px;height:19px}.mn-greens-panel{display:none!important}}
@media(max-width:360px){.mn-bar{width:calc(100% - 28px);gap:9px}.mn-brand{width:125px}.mn-mobile-bag,.mn-menu-button{width:39px;height:39px}}
@media(prefers-reduced-motion:reduce){.mn-header *{transition:none!important}.mn-mobile-dialog *{scroll-behavior:auto}}
@media print{.mn-header,.mn-mobile-dialog{display:none!important}}

/* MyPonic navigation: the selected brand treatment. */
html.brand-navigation{--menu-shadow:3px 4px 0 var(--ink)}
.brand-navigation .mn-bar{border-bottom:0;min-height:120px;gap:24px}
.brand-navigation .mn-brand{width:174px}
.brand-navigation .mn-header .mn-links{gap:10px;margin-inline:24px 0}
.brand-navigation .mn-header .mn-link{padding:10px 17px;border:2px solid transparent;border-radius:999px;min-height:47px;font-size:15px;font-weight:600;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
html[lang=ar].brand-navigation .mn-header .mn-link{font:700 19px/1.4 'Baloo Bhaijaan 2',sans-serif}
.brand-navigation .mn-link::after{display:none}
.brand-navigation .mn-header .mn-greens-toggle{background:var(--lilac);border-color:var(--ink);box-shadow:var(--menu-shadow);gap:10px}
.brand-navigation .mn-header .mn-greens-toggle:hover,.brand-navigation .mn-header .mn-greens-toggle[aria-expanded=true]{background:var(--lime);transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
.brand-navigation .mn-header .mn-link:not(.mn-greens-toggle):hover,.brand-navigation .mn-header .mn-link[aria-current]{background:#e9eddf;text-decoration:underline;text-underline-offset:6px}
/* Utilities share one quiet frame; color and physical depth belong to discovery/shopping. */
.brand-navigation .mn-tools{gap:0;border:1.5px solid var(--ink);border-radius:999px;padding:3px;min-height:49px}
.brand-navigation .mn-account{gap:9px;font-size:14px;font-weight:500;padding:8px 13px;min-height:40px;border-radius:999px;transition:background .16s ease}
.brand-navigation .mn-account>span{display:block}
.brand-navigation .mn-account svg{width:18px;height:18px;stroke:none}
.brand-navigation .mn-account:hover,.brand-navigation .mn-account[aria-current]{background:#e6eadc;text-decoration:none}
.brand-navigation .mn-account[aria-current]{font-weight:600}
.brand-navigation .mn-tool-divider{display:block;background:#223f2d3b;height:19px;margin-inline:3px}
.brand-navigation .mn-language>svg{display:none}
.brand-navigation .mn-header .language-toggle{border:0;border-radius:999px;min-width:43px;min-height:40px;padding:7px 10px;font-size:13px;transition:background .16s ease}
.brand-navigation .mn-header .language-toggle:hover{background:#e6eadc;text-decoration:none;box-shadow:none}
.brand-navigation .mn-header .mn-shop{padding:10px 20px;min-height:51px;gap:21px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font-weight:600;font-size:14px;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
html[lang=ar].brand-navigation .mn-header .mn-shop{font:700 18px/1.4 'Baloo Bhaijaan 2',sans-serif}
.brand-navigation .mn-header .mn-shop:hover{background:var(--lime)}
.brand-navigation .mn-shop i{width:23px;height:23px;background:transparent;border-radius:0}
.brand-navigation .mn-shop i svg{width:23px;height:23px;stroke-width:2.6}
.brand-navigation .mn-header .mn-cart{padding:5px 7px;padding-inline-start:22px;gap:22px}
.brand-navigation .mn-cart>span{width:36px;height:36px;border:1.5px solid var(--ink);background:var(--lime);font-family:'IBM Plex Sans Arabic','DM Sans',sans-serif;font-size:13px}
.brand-navigation .mn-greens-panel{top:calc(100% + 24px);width:555px;padding:26px;border:2px solid var(--ink);border-radius:28px;background:var(--paper);box-shadow:3px 4px 0 var(--ink)}
.brand-navigation .mn-greens-panel::before{display:none}
.brand-navigation .mn-panel-heading{align-items:center;gap:24px;margin-bottom:25px;padding-inline-end:2px}
.brand-navigation .mn-panel-heading p{font:700 26px/1.15 var(--display);max-width:none;letter-spacing:-.5px}
html[lang=ar].brand-navigation .mn-panel-heading p{font:800 30px/1.4 'Baloo Bhaijaan 2',sans-serif;letter-spacing:0}
.brand-navigation .mn-product-links{gap:20px}
.brand-navigation .mn-product-photo{border:0;border-radius:50% 48% 45% 47%;aspect-ratio:1;background:#e8ead9}
.brand-navigation .mn-product:hover>span{text-decoration:underline;text-underline-offset:5px}
.brand-navigation .mn-header .mn-product{font-size:13px!important;gap:12px}
html[lang=ar].brand-navigation .mn-header .mn-product{font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:700;font-size:16px!important}
.brand-navigation .mn-growing-note{border:0;margin-top:17px!important;padding:0;text-align:center;font-size:12px}
.brand-navigation .mn-header .mn-panel-shop{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--ink);border-radius:999px;background:var(--lime);padding:11px 21px;margin-top:20px;box-shadow:3px 4px 0 var(--ink);font-size:14px;transition:box-shadow .16s ease,transform .16s ease}
html[lang=ar].brand-navigation .mn-panel-shop{font:700 19px/1.5 'Baloo Bhaijaan 2',sans-serif}
.brand-navigation .mn-panel-shop:hover{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
.brand-navigation .mn-panel-shop svg{stroke-width:2.6;width:23px;height:23px}
.brand-navigation .mn-mobile-dialog .mn-mobile-top{border:0;padding:21px 22px 12px;position:sticky;top:0;background:var(--paper);z-index:1}
.brand-navigation .mn-mobile-top .mn-brand{width:145px}
.brand-navigation .mn-close{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);width:44px;height:44px}
.brand-navigation .mn-menu-caption{color:var(--ink);font:700 25px/1.4 var(--display);margin:28px 25px 25px}
html[lang=ar].brand-navigation .mn-menu-caption{font:800 30px/1.4 'Baloo Bhaijaan 2',sans-serif}
.brand-navigation .mn-mobile-dialog .mn-mobile-links{gap:0;padding-inline:24px}
.brand-navigation .mn-mobile-dialog .mn-mobile-links>a{border:0;border-bottom:1px solid #bec8b5;border-radius:0;padding:16px 0;font-size:26px;background:transparent;box-shadow:none;min-height:69px;transition:color .16s ease}
.brand-navigation .mn-mobile-dialog .mn-mobile-links>a:hover{background:transparent;color:#516a35}
.brand-navigation .mn-mobile-account{margin:27px 24px 20px;padding:13px 17px;gap:15px;border:1px solid #bec8b5;border-radius:14px;font-size:15px;min-height:70px}
.brand-navigation .mn-mobile-account svg{width:21px;height:21px;stroke:none}
.brand-navigation .mn-mobile-account:hover,.brand-navigation .mn-mobile-account[aria-current]{background:#e6eadc}
.brand-navigation .mn-account-copy{display:flex;flex-direction:column;gap:2px}
.brand-navigation .mn-account-copy>span{font-weight:500}
.brand-navigation .mn-account-copy small{font-size:12px;color:#576153;line-height:1.6}
.brand-navigation .mn-mobile-bottom{margin:25px 24px 28px;padding-bottom:env(safe-area-inset-bottom,0)}
.brand-navigation .mn-mobile-dialog .mn-mobile-bottom .mn-shop{border:2px solid var(--ink);background:var(--lime);color:var(--ink);box-shadow:4px 5px 0 var(--ink);padding:14px 23px;font-size:17px;font-weight:600;min-height:60px}
html[lang=ar].brand-navigation .mn-mobile-bottom .mn-shop{font:700 21px/1.3 'Baloo Bhaijaan 2',sans-serif}
.brand-navigation .mn-mobile-bottom .mn-shop i{width:25px;height:25px}
.brand-navigation .mn-mobile-bottom p{line-height:1.8}
@media(min-width:1051px) and (max-width:1250px){.brand-navigation .mn-bar{width:calc(100% - 64px);gap:14px}.brand-navigation .mn-header .mn-links{margin-inline-start:10px;gap:3px}.brand-navigation .mn-header .mn-link{padding-inline:10px}.brand-navigation .mn-brand{width:145px}}
@media(max-width:1050px){.brand-navigation .mn-bar{min-height:98px;width:calc(100% - 40px);gap:12px}.brand-navigation .mn-brand{width:147px}.brand-navigation .mn-header .mn-links,.brand-navigation .mn-account,.brand-navigation .mn-tool-divider,.brand-navigation .mn-header .mn-shop{display:none}.brand-navigation .mn-tools{gap:0;margin-inline-start:auto;border:0;padding:0;min-height:0}.brand-navigation .mn-header .language-toggle{border:1.5px solid var(--ink);font-size:12px;min-height:44px;min-width:45px;padding:7px 10px}.brand-navigation .mn-mobile-bag,.brand-navigation .mn-menu-button{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;color:var(--ink)}.brand-navigation .mn-mobile-bag{background:var(--paper);box-shadow:none}.brand-navigation .mn-menu-button{background:var(--lilac);box-shadow:2px 3px 0 var(--ink)}.brand-navigation .mn-greens-panel{display:none!important}}
@media(max-width:380px){.brand-navigation .mn-bar{width:calc(100% - 28px);gap:9px}.brand-navigation .mn-brand{width:126px}.brand-navigation .mn-header .language-toggle{min-width:42px;padding-inline:8px}.brand-navigation .mn-mobile-dialog .mn-mobile-links>a{font-size:23px;min-height:62px}}
@media(prefers-reduced-motion:reduce){.brand-navigation .mn-header *,.brand-navigation .mn-mobile-dialog *{transition:none!important}}
@media(max-width:350px){.brand-navigation .mn-brand{width:110px}.brand-navigation .mn-mobile-top .mn-brand{width:145px}}
