/* Rev16 independent components. No legacy family-hero / pm-premium selectors. */
.m16-hero,.m16-hero *{box-sizing:border-box}
.m16-hero{--m16-bg:#e9f0e6;--m16-tint:#d0dfd0;--m16-text:#173d2e;--m16-accent:#28664a;--m16-light:#f9faf5;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:max(690px, calc(100svh - var(--m16-header-height, 96px)));background:radial-gradient(ellipse 46% 78% at 11% 22%,var(--m16-light) 0%,transparent 76%),radial-gradient(ellipse 42% 70% at 83% 79%,var(--m16-tint) 0%,transparent 86%),var(--m16-bg);transition:background-color .85s ease,color .4s;color:var(--m16-text);font-family:'Tajawal','Cairo',sans-serif}
.m16-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,.06),transparent 55%,rgba(255,255,255,.15));pointer-events:none;z-index:-1}
.m16-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.m16-halo{position:absolute;width:440px;height:440px;inset-inline-start:-160px;bottom:-280px;border-radius:50%;filter:blur(54px);background:var(--m16-tint);opacity:.5;pointer-events:none}
.m16-halo--two{inset-inline-start:auto;inset-inline-end:-190px;top:-280px;bottom:auto;background:var(--m16-light)}
.m16-hero-main{position:relative;z-index:1;flex:1;min-height:520px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;gap:2%;padding-block:32px 18px}
.m16-copy{max-width:560px;padding-inline:clamp(0px,1.2vw,15px);position:relative;z-index:2}
.m16-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--m16-accent);border-inline-start:3px solid var(--m16-accent);padding:3px 14px;font-family:'Tajawal',sans-serif;letter-spacing:.11em;font-size:.78rem;font-weight:900;margin-bottom:22px}
.m16-copy h1{font-family:'Tajawal','Cairo',sans-serif!important;font-size:clamp(2.1rem,3.5vw,3.75rem)!important;line-height:1.21!important;letter-spacing:-.02em!important;color:var(--m16-text)!important;font-weight:850!important;text-wrap:balance;margin:0 0 18px;max-width:530px;text-shadow:none!important}
.m16-copy p{font-size:clamp(1rem,1.27vw,1.15rem);color:var(--m16-text)!important;opacity:.86;line-height:1.9;max-width:490px;margin:0 0 26px;font-weight:500}
.m16-hero-cta{min-height:47px;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:11px 12px 11px 20px;background:var(--m16-accent);color:#fff!important;border:1px solid transparent;border-radius:14px;text-decoration:none;font-weight:850;font-size:.94rem;box-shadow:0 10px 28px color-mix(in srgb,var(--m16-accent) 22%,transparent);transition:transform .25s,filter .25s}
.m16-hero-cta:hover{transform:translateY(-2px);filter:brightness(.91);color:white}
.m16-hero-cta i{background:#ffffff24;display:grid;place-items:center;width:27px;height:27px;border-radius:8px}
.m16-stage{position:relative;display:grid;place-items:center;width:100%;height:clamp(330px,51vh,480px);min-height:330px;max-height:480px;isolation:isolate}
.m16-orbit{position:absolute;width:min(91%,415px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 41% 38%,rgba(255,255,255,.57),transparent 45%),radial-gradient(circle at 55% 62%,color-mix(in srgb,var(--m16-accent) 10%,transparent),transparent 70%);border:1px solid color-mix(in srgb,var(--m16-accent) 18%,transparent);box-shadow:0 30px 80px color-mix(in srgb,var(--m16-accent) 11%,transparent),inset 0 0 0 26px rgba(255,255,255,.09);animation:m16-halo-breathe 10s ease-in-out infinite;pointer-events:none;z-index:-1}
.m16-orbit-line{position:absolute;inset:8%;border:1px solid color-mix(in srgb,var(--m16-accent) 20%,transparent);border-radius:50%;animation:m16-orbit-turn 34s linear infinite}
.m16-orbit-line:before{content:"";position:absolute;top:8%;left:17%;width:9px;height:9px;background:var(--m16-accent);border-radius:50%;box-shadow:0 0 0 7px color-mix(in srgb,var(--m16-accent) 9%,transparent)}
.m16-orbit-line--two{inset:20%;border-style:dashed;opacity:.44;animation-direction:reverse;animation-duration:44s}
.m16-orbit-core{position:absolute;inset:31%;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.19)}
@keyframes m16-halo-breathe{50%{filter:brightness(1.08);scale:1.018}}
@keyframes m16-orbit-turn{to{rotate:360deg}}
.m16-scene{position:relative;width:100%;height:100%;display:grid;place-items:center}
.m16-product{position:absolute;margin:0;display:grid;place-items:center;filter:drop-shadow(0 19px 16px rgba(22,40,28,.20));transform-origin:50% 90%;max-height:72%;will-change:transform,opacity}
.m16-product img{width:100%;height:100%;object-fit:contain;display:block;background:transparent!important;max-width:100%;max-height:100%}
.m16-emblem-scene{display:grid;place-items:center;position:relative;width:min(84%,340px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 31%,#2a795a,#174833 60%,#0f3a2b);box-shadow:0 30px 55px rgba(21,53,35,.25),inset 0 0 0 2px #ffffff27;animation:m16-emblem-float 6s ease-in-out infinite}
.m16-emblem-scene:before,.m16-emblem-scene:after{content:"";position:absolute;border-radius:50%;inset:-16px;border:1px solid rgba(32,99,71,.33)}
.m16-emblem-scene:after{inset:-29px;border-style:dashed;opacity:.55;animation:m16-orbit-turn 48s linear infinite}
.m16-emblem-scene img{width:52%;height:52%;object-fit:contain;filter:drop-shadow(0 9px 9px #092f2470)}
.m16-emblem-since{position:absolute;bottom:16%;font-weight:900;font-size:1rem;color:#f2dfad;letter-spacing:.1em}
@keyframes m16-emblem-float{50%{translate:0 -8px}}
.m16-sector-scene{width:min(96%,560px);display:grid;grid-template-columns:1fr;gap:9px;align-self:center;justify-items:center}
.m16-sector-photo{width:100%;height:220px;object-fit:cover;border-radius:24px;box-shadow:0 26px 45px rgba(12,48,55,.2);background:#d3e2d9;transition:opacity .3s}
.m16-sector-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:510px}
.m16-sector-choice{background:rgba(255,255,255,.74);color:#264b47;border:1px solid rgba(38,75,71,.14);font:700 .78rem 'Tajawal',sans-serif;border-radius:10px;padding:8px 11px;cursor:pointer}
.m16-sector-choice.is-active{background:#245c60;color:#fff}
.m16-sector-brands{display:flex;justify-content:space-evenly;align-items:center;gap:clamp(8px,1.7vw,20px);width:100%;min-height:52px;padding:7px 4px 2px;pointer-events:none}
.m16-sector-brands img{display:block;min-width:0;width:auto;max-width:min(18%,103px);height:42px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(20,62,61,.13));mix-blend-mode:multiply}
html[data-theme="dark"] .m16-sector-brands img{mix-blend-mode:normal;filter:drop-shadow(0 2px 5px rgba(0,0,0,.12))}

.m16-controls-container{position:relative;z-index:3;padding-bottom:18px}
.m16-controls{display:flex;align-items:center;gap:15px;padding:11px 14px;background:rgba(255,255,255,.81);border:1px solid rgba(50,82,59,.1);border-radius:20px;box-shadow:0 12px 36px rgba(29,59,34,.085);backdrop-filter:blur(15px);max-width:1040px;margin-inline:auto}
.m16-direction{display:flex;align-items:center;gap:7px;flex:none}
.m16-btn,.m16-play{appearance:none;border:1px solid rgba(54,89,60,.12);border-radius:12px;width:40px;height:40px;display:grid;place-items:center;background:#eaf1e9;color:#234a37;cursor:pointer;transition:background .2s,transform .2s,color .2s}
.m16-btn:hover,.m16-play:hover{background:var(--m16-accent);color:#fff;transform:translateY(-1px)}
.m16-counter{font-size:.82rem;font-weight:900;color:#345343;white-space:nowrap;min-width:62px;text-align:center}
.m16-tabs{display:flex;gap:6px;flex:1;min-width:0;overflow:auto;scrollbar-width:none;align-items:center}
.m16-tabs::-webkit-scrollbar{display:none}
.m16-tab{border:1px solid transparent;background:transparent;flex:0 0 auto;border-radius:12px;font:700 .79rem 'Tajawal',sans-serif;padding:11px 12px;color:#476454;cursor:pointer;transition:background .2s,color .2s}
.m16-tab[aria-selected="true"]{background:var(--m16-accent);color:white;box-shadow:0 6px 18px color-mix(in srgb,var(--m16-accent) 19%,transparent)}
.m16-tab:focus-visible,.m16-btn:focus-visible,.m16-play:focus-visible{outline:3px solid #f0b849;outline-offset:2px}
.m16-play{flex:none;width:38px;height:38px;background:transparent}
.m16-progress{position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--m16-accent);opacity:.57;transition:width .2s linear}
.m16-copy.is-out{animation:m16-fade-out .22s ease-in both}.m16-scene.is-out{animation:m16-fade-out .22s ease-in both}
@keyframes m16-fade-out{to{opacity:0;translate:0 8px}}
.m16-copy.is-in{animation:m16-appear .55s cubic-bezier(.16,.8,.23,1) both}
@keyframes m16-appear{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
html[data-theme="dark"] .m16-hero{filter:none}
@media(max-width:1050px){.m16-hero-main{min-height:485px}.m16-stage{max-height:350px}.m16-copy h1{font-size:clamp(2rem,3.5vw,3.2rem)!important}.m16-controls{max-width:900px}.m16-tab{padding:10px}}
@media(max-width:720px){.m16-hero{min-height:max(680px, calc(100svh - var(--m16-header-height, 86px)))}.m16-hero-main{grid-template-columns:1fr;gap:0;min-height:0;padding-block:25px 6px}.m16-copy{order:2;text-align:center;max-width:none;margin:auto;padding:0 8px}.m16-eyebrow{margin-bottom:8px;font-size:.66rem}.m16-copy h1{font-size:clamp(1.75rem,6vw,2.5rem)!important;margin-bottom:8px}.m16-copy p{font-size:.92rem;line-height:1.65;margin-bottom:14px}.m16-hero-cta{min-height:41px;padding:7px 9px 7px 16px;font-size:.88rem}.m16-stage{order:1;height:clamp(240px,37vh,315px);min-height:240px;max-height:315px}.m16-orbit{width:min(70vw,280px)}.m16-emblem-scene{width:min(62vw,235px)}.m16-emblem-since{font-size:.8rem}.m16-sector-photo{height:150px}.m16-sector-scene{gap:6px}.m16-sector-brands{gap:5px;min-height:38px;padding:2px 0}.m16-sector-brands img{height:28px;max-width:19%}.m16-sector-choice{padding:6px 9px;font-size:.7rem}.m16-sector-tabs{max-height:79px;overflow:auto}.m16-controls-container{padding:11px 12px 18px}.m16-controls{border-radius:16px;padding:9px;gap:8px;display:grid;grid-template-columns:1fr auto}.m16-direction{justify-content:center}.m16-tabs{grid-row:2;grid-column:1/-1;width:100%}.m16-play{grid-row:1;grid-column:2}.m16-tab{padding:8px 10px;font-size:.72rem}.m16-product--center{height:72%;top:14%}.m16-product--left,.m16-product--right{height:52%;top:33%}.m16-product--solo{height:72%;top:14%}}
@media(prefers-reduced-motion:reduce){.m16-particle,.m16-orbit,.m16-orbit-line,.m16-emblem-scene,.m16-emblem-scene:after,.m16-product,.m16-copy.is-in{animation:none!important}}
/* Fresh product detail modal: small, legible, and independent of PM legacy. */
#m16ModalTitle{color:#1a3b2a!important;line-height:1.35;font-size:clamp(1.18rem,1.5vw,1.45rem);font-weight:850;margin:0 0 9px}
#productModal .m16-dialog{max-width:770px;margin:1rem auto}
#productModal .m16-modal{position:relative;background:#fffefa;border-radius:24px;overflow:hidden;border:1px solid #dfe7da;box-shadow:0 26px 85px rgba(12,40,27,.22);color:#263e2f}
.m16-modal-inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0}
.m16-modal-media{display:grid;place-items:center;position:relative;isolation:isolate;min-height:400px;max-height:580px;background:radial-gradient(circle at 50% 43%,#fffefa 0%,#eff3e9 73%,#e9eee4 100%);padding:28px}
.m16-image-viewport{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;width:100%;height:320px;max-height:100%;border-radius:15px;outline-offset:4px;touch-action:pan-y;cursor:zoom-in}
.m16-image-viewport.is-zoomed{touch-action:none;cursor:grab}
.m16-image-viewport.is-dragging{cursor:grabbing}
.m16-modal-media img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 19px 15px rgba(16,45,25,.16));transform-origin:50% 50%;transition:transform .16s ease;user-select:none;pointer-events:none}
.m16-image-viewport.is-dragging img{transition:none}
.m16-zoom-controls{position:absolute;display:flex;align-items:center;gap:4px;inset:auto 50% 13px auto;transform:translateX(50%);padding:5px;background:#ffffffea;border:1px solid #d6e1d6;border-radius:999px;box-shadow:0 8px 22px #173b2a20;z-index:2;direction:ltr}
.m16-zoom-btn,.m16-zoom-value{border:0;background:transparent;color:#1c5139;height:32px;display:grid;place-items:center;cursor:pointer;border-radius:20px}
.m16-zoom-btn{width:32px;font-size:1rem}.m16-zoom-value{min-width:52px;font-size:.78rem;font-weight:900}
.m16-zoom-btn:hover,.m16-zoom-value:hover{background:#e7f0e5}.m16-zoom-btn:disabled{opacity:.36;cursor:not-allowed}
.m16-zoom-btn:focus-visible,.m16-zoom-value:focus-visible{outline:2px solid #16593b;outline-offset:1px}

.m16-media-label{position:absolute;inset:14px auto auto 15px;padding:6px 10px;border-radius:99px;background:#ffffffca;color:#45644d;font-size:.72rem;font-weight:700}
.m16-modal-info{min-width:0;max-height:min(82vh,690px);overflow-y:auto;display:flex;flex-direction:column;padding:34px 29px 27px}
.m16-modal-kicker{color:#467457;font-weight:900;letter-spacing:.09em;margin-bottom:7px;font-size:.7rem}
.m16-modal-description{color:#627568;line-height:1.55;font-size:.89rem;margin:0 0 11px}
.m16-facts{display:grid;gap:6px;margin-bottom:14px}
.m16-fact{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid #e3ebe1;padding:6px 0;font-size:.86rem}
.m16-fact span:first-child{color:#64806b}.m16-fact strong{color:#1c422d;text-align:end;font-weight:850}
.m16-order-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.m16-order-row label,.m16-order-note{display:grid;gap:5px;color:#385d43;font-size:.79rem;font-weight:800}
.m16-order-row input,.m16-order-row select,.m16-order-note textarea{min-width:0;width:100%;border:1px solid #d4dfd4;background:#fff;color:#203b2c;border-radius:11px;padding:9px 11px;outline-offset:2px;font-size:.88rem}
.m16-order-note{margin-top:10px}.m16-order-note textarea{resize:vertical;min-height:54px;max-height:94px}
.m16-actions{display:flex;align-items:center;gap:9px;margin-top:13px}
.m16-whatsapp,.m16-basket{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;padding:10px 12px;min-height:45px;font-size:.8rem;font-weight:850;text-decoration:none;border:1px solid #d7e1d5;cursor:pointer}
.m16-whatsapp{background:#226749;color:white!important;flex:1}.m16-whatsapp:hover{background:#19553a;color:white}
.m16-basket{background:#f3f6ef;color:#275238;white-space:nowrap}
#productModal .m16-close{position:absolute;z-index:5;top:12px;inset-inline-end:12px;width:39px;height:39px;border:1px solid #d6e1d6;border-radius:50%;background:white;display:grid;place-items:center;color:#153b29;box-shadow:0 3px 12px #16381a20;cursor:pointer}
#productModal .m16-close:hover{background:#1c5c3d;color:white}
html[data-theme="dark"] #productModal .m16-modal{background:#20352a;color:#f1f7ef;border-color:#395442}
html[data-theme="dark"] #m16ModalTitle,html[data-theme="dark"] .m16-fact strong{color:#f4f8f2!important}
html[data-theme="dark"] .m16-modal-description,html[data-theme="dark"] .m16-fact span:first-child{color:#d1decf}
html[data-theme="dark"] .m16-modal-info .m16-order-row label,html[data-theme="dark"] .m16-order-note{color:#e5eee2}
html[data-theme="dark"] .m16-modal-media{background:radial-gradient(circle,#f7faf4,#dfe9dd)}
html[data-theme="dark"] .m16-fact{border-color:#3b5842}
html[data-theme="dark"] .m16-modal-kicker{color:#bde0c1}
html[data-theme="dark"] .m16-basket{background:#d8e7d8;color:#1b4330}
@media(max-width:750px){#productModal .m16-dialog{max-width:96%;margin:12px auto}#productModal .m16-modal{border-radius:17px}.m16-modal-inner{grid-template-columns:1fr}.m16-modal-media{min-height:190px;max-height:230px;padding:18px}.m16-image-viewport{height:175px}.m16-modal-media img{height:100%}.m16-zoom-controls{bottom:7px}.m16-zoom-btn,.m16-zoom-value{height:28px}.m16-media-label{font-size:.65rem;top:9px;left:9px}.m16-modal-info{max-height:calc(92vh - 230px);padding:16px 20px 20px}.m16-actions{flex-wrap:wrap}.m16-whatsapp{min-width:190px}#productModal .m16-close{top:9px;inset-inline-end:9px}}
@media(max-width:390px){.m16-order-row{grid-template-columns:1fr 1fr}.m16-actions{display:grid;grid-template-columns:1fr}.m16-basket,.m16-whatsapp{width:100%}}
/* Grid overlay is explicit: the orbit and imagery share the same stage cell. */
.m16-stage>.m16-orbit,.m16-stage>.m16-scene{grid-area:1/1}
.m16-scene{min-height:0;min-width:0;z-index:1}
/* Sector imagery and logos aligned like the original sector slide: center-bottom rail. */
.m16-sector-scene{width:min(100%,640px);gap:11px}
.m16-sector-photo{height:clamp(228px,29vh,264px);object-position:center;border-radius:22px}
.m16-hero .m18-brand-rail{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(13px,3vw,43px);width:min(100% - 32px,800px);min-height:62px;margin:0 auto 4px;padding:7px 16px;background:transparent;flex-wrap:nowrap}
.m16-hero .m18-brand-rail img{object-fit:contain;width:clamp(65px,11vw,120px);height:44px;max-width:19%;filter:drop-shadow(0 4px 7px rgba(20,60,55,.13));mix-blend-mode:normal}
/* Detail viewer: keep full package visible at 100%, separate zoom tools from artwork. */
.m16-modal-media{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 27px 20px}
.m16-image-viewport{display:flex;align-items:center;justify-content:center;flex:none;min-height:0;height:320px;max-height:100%;padding:14px 17px;box-sizing:border-box;overflow:hidden;cursor:zoom-in}
.m16-modal-media img{display:block;flex:0 0 auto;min-width:0;min-height:0;width:100%;height:100%;max-height:100%;max-width:100%;object-fit:contain;object-position:center}
.m16-zoom-controls{position:relative;inset:auto;transform:none;flex:none;margin:0 auto;padding:4px 6px}
@media(max-width:720px){
 .m16-product--center{height:40%;width:33%;top:30%;left:33.5%}
 .m16-product--left,.m16-product--right{height:28%;width:25%;top:45%}
 .m16-product--solo{height:48%;width:44%;top:25%;left:28%}
 .m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-product--center{height:34%;width:30%;top:34%;left:35%}
 .m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-product--left,
 .m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-product--right{height:25%;width:23%;top:46%}
 .m16-sector-photo{height:clamp(160px,25vh,205px)}
 .m16-hero .m18-brand-rail{width:calc(100% - 28px);gap:8px;min-height:48px;margin-top:0;margin-bottom:6px;padding:2px 6px}
 .m16-hero .m18-brand-rail img{width:clamp(44px,17vw,70px);height:32px;max-width:19%}
 .m16-modal-media{min-height:230px;max-height:280px;padding:35px 15px 10px;gap:3px}
 .m16-image-viewport{height:190px;min-height:190px;padding:10px 20px 3px}
 .m16-zoom-controls{bottom:auto;margin-top:0}
 .m16-modal-info{max-height:calc(92vh - 278px)}
}

/* Compact-height phones: the image stays fully fitted, with details scrolling below. */
@media(max-width:750px) and (max-height:710px){
 .m16-modal-media{min-height:184px;max-height:205px;padding:32px 14px 7px}
 .m16-image-viewport{height:145px;min-height:145px;padding:6px 18px}
 .m16-modal-info{max-height:calc(92dvh - 210px)}
}
/* Keep the order action discoverable on short phone screens while details scroll. */
@media(max-width:750px){
 .m16-modal-info{min-height:0;overscroll-behavior:contain}
 .m16-actions{position:sticky;bottom:-2px;z-index:4;background:#fffefa;padding:9px 0 3px;box-shadow:0 -8px 16px rgba(255,254,250,.93)}
 html[data-theme="dark"] .m16-actions{background:#20352a;box-shadow:0 -8px 16px #20352ae8}
}
@media(max-width:390px){
 .m16-actions{display:flex;flex-wrap:nowrap;gap:6px}
 .m16-basket{flex:0 0 auto;width:auto;padding:8px;font-size:.73rem}
 .m16-whatsapp{flex:1;min-width:0;width:auto;padding:8px;font-size:.73rem}
}

/* MAYAN Rev20 | per-family art direction, synchronized to the slide theme. */
body.site--cinema #home.m16-hero{
  min-height:100svh;
  padding-top:var(--m16-header-height, 108px);
  overflow:clip;
}
body.site--cinema #home .m16-hero-main{min-height:0;padding-block:17px 10px}
body.site--cinema #home .m16-stage{height:clamp(315px,43vh,465px)}
.m16-hero .m16-copy{align-self:center}
.m16-hero .m16-orbit{
  width:min(87%,400px);background:radial-gradient(circle at 36% 24%,#ffffffa8,transparent 49%),
    radial-gradient(circle at 68% 78%,color-mix(in srgb,var(--m16-accent) 11%,transparent),transparent 66%);
  border:1.5px solid color-mix(in srgb,var(--m16-accent) 33%,transparent);
  box-shadow:inset 0 0 0 12px #ffffff1e,0 24px 55px color-mix(in srgb,var(--m16-accent) 12%,transparent);
  animation:m20-orbit-breathe 13s ease-in-out infinite;
}
.m16-hero .m16-orbit-line{border-color:color-mix(in srgb,var(--m16-accent) 29%,transparent);animation-duration:42s}
.m16-hero .m16-orbit-line--two{border-style:solid;opacity:.28;animation-duration:58s}
.m16-hero .m16-orbit-core{inset:27%;background:radial-gradient(circle,#ffffff32,transparent 90%)}
@keyframes m20-orbit-breathe{50%{transform:scale(1.012);opacity:.95}}
/* Uniquely shaped orbital centerlines. These are NOT decorative images of the products. */
.m16-hero[data-scene="rice"] .m16-orbit{background:repeating-conic-gradient(from 17deg,#dfc68a18 0deg 1deg,transparent 1deg 18deg),radial-gradient(circle at 35% 33%,#fffdf2 0%,#ecdcb67d 76%)}
.m16-hero[data-scene="rice"] .m16-orbit-line--two{border-style:dotted;border-color:#b9985880;animation:m20-orbit-sway 18s ease-in-out infinite alternate}
.m16-hero[data-scene="oil"] .m16-orbit{border-radius:48% 52% 50% 50%;background:radial-gradient(ellipse at 52% 72%,#dcebab91,transparent 70%),radial-gradient(circle at 26% 22%,#fffef3de,transparent 47%);box-shadow:inset 0 0 0 16px #fffbda49,0 24px 55px #6b872321}
.m16-hero[data-scene="oil"] .m16-orbit-line{border-radius:48% 52% 46% 54%;animation:m20-orbit-wobble 19s ease-in-out infinite alternate}
.m16-hero[data-scene="sauce"] .m16-orbit{background:radial-gradient(circle at 31% 30%,#fff8f2,transparent 55%),radial-gradient(ellipse at 54% 70%,#dd81643a,transparent 72%);border-color:#bc695170}
.m16-hero[data-scene="sauce"] .m16-orbit-line--two{border-radius:44% 56% 52% 48%;border-width:2px;border-color:#d2826960;animation:m20-orbit-wobble 15s ease-in-out infinite alternate}
.m16-hero[data-scene="canned"] .m16-orbit{background:repeating-radial-gradient(circle at center,#ffffff52 0px 2px,transparent 3px 36px),radial-gradient(circle,#f5fcf7,#c5e5d772);box-shadow:inset 0 0 0 11px #ffffff54,inset 0 0 0 16px #257c5930,0 20px 50px #226c4820}
.m16-hero[data-scene="canned"] .m16-orbit-line{border-style:double;border-width:3px;animation-duration:55s}
.m16-hero[data-scene="vinegar"] .m16-orbit{background:linear-gradient(126deg,#ffffff90,transparent 38%,#dceefc5c 83%),radial-gradient(circle at 54% 50%,#eaf5fd,#b8d0df4d);border-color:#5885a052}
.m16-hero[data-scene="vinegar"] .m16-orbit-line--two{border:1px solid #91bacb8c;transform:rotate(-21deg) scaleX(.92);animation:m20-vinegar-prism 17s ease-in-out infinite alternate}
.m16-hero[data-scene="fries"] .m16-orbit{background:repeating-conic-gradient(from 45deg,#e9b86818 0deg 2deg,transparent 2deg 25deg),radial-gradient(circle,#fff7df,#e9ca9466);border-color:#b2874865}
.m16-hero[data-scene="fries"] .m16-orbit-line--two{border-style:dashed;border-color:#c698566d;animation-duration:36s}
.m16-hero[data-scene="syrup"] .m16-orbit{background:conic-gradient(from 50deg at 50% 50%,#dbc0e254,#ffffffbf,#b787bc2b,#ffffff80,#dbc0e254);border-color:#9c6b9955}
.m16-hero[data-scene="syrup"] .m16-orbit-line{border-radius:49% 51% 53% 47%;animation:m20-orbit-wobble 24s ease-in-out infinite alternate}
@keyframes m20-orbit-sway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes m20-orbit-wobble{from{transform:rotate(-9deg) scale(.98)}to{transform:rotate(11deg) scale(1.025)}}
@keyframes m20-vinegar-prism{from{transform:rotate(-23deg) scaleX(.94)}to{transform:rotate(21deg) scaleX(1.03)}}
/* Gentle family-specific atmospheric motifs, kept behind copy and packshots. */
.m16-hero .m16-atmosphere{z-index:0;opacity:.88}
.m16-hero .m16-hero-main{z-index:1}
.m20-motif{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);display:block;pointer-events:none;opacity:.23;transform:rotate(var(--angle));will-change:transform,opacity}
.m20-motif--story,.m20-motif--serve{width:6px;height:6px;border:1px solid var(--m16-accent);border-radius:50%;animation:m20-breathe var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.m20-motif--rice{width:calc(var(--size)*.36);height:calc(var(--size)*1.3);border-radius:70% 20% 70% 20%;background:linear-gradient(125deg,#fffbe9,#c8a56a 90%);box-shadow:inset 1px 1px 0 #ffffffa0;animation:m20-grain-fall var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.m20-motif--oil{width:calc(var(--size)*.7);height:var(--size);border-radius:45% 55% 56% 44% / 67% 67% 33% 33%;background:linear-gradient(145deg,#fff8b7,#c2ca6e);border:1px solid #9ca55461;animation:m20-oil-float var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.m20-motif--sauce{width:calc(var(--size)*1.28);height:calc(var(--size)*.6);border-radius:55% 38% 57% 40%;background:linear-gradient(110deg,#e6ab91,#b956457d);animation:m20-sauce-pulse var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.m20-motif--canned{width:var(--size);height:var(--size);border-radius:50%;border:2px solid #38927280;box-shadow:inset 0 0 0 2px #ffffff81;animation:m20-can-orbit var(--duration) linear infinite;animation-delay:var(--delay)}
.m20-motif--vinegar{width:calc(var(--size)*.63);height:calc(var(--size)*.9);clip-path:polygon(50% 0,95% 56%,50% 100%,5% 56%);background:linear-gradient(125deg,#fff,#7bafcba0);animation:m20-vinegar-shimmer var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.m20-motif--fries{width:calc(var(--size)*.28);height:calc(var(--size)*1.45);border-radius:3px;background:linear-gradient(90deg,#f8da8c,#e7b960);box-shadow:2px 2px 0 #b68d4e20;animation:m20-fries-drift var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.m20-motif--syrup{width:calc(var(--size)*1.6);height:calc(var(--size)*.7);border-radius:50%;background:transparent;border:3px solid #9e6f9aa1;border-bottom-color:transparent;border-right-color:transparent;animation:m20-syrup-curl var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes m20-breathe{to{transform:translateY(-25px) scale(1.2);opacity:.38}}
@keyframes m20-grain-fall{from{transform:translate(0,-22px) rotate(var(--angle));opacity:.1}to{transform:translate(12px,30px) rotate(calc(var(--angle) + 22deg));opacity:.37}}
@keyframes m20-oil-float{from{transform:translate(0,18px) rotate(var(--angle)) scale(.86);opacity:.12}to{transform:translate(-14px,-30px) rotate(calc(var(--angle) - 13deg)) scale(1.12);opacity:.32}}
@keyframes m20-sauce-pulse{from{transform:translate(0,14px) rotate(var(--angle)) scale(.8);opacity:.13}to{transform:translate(18px,-12px) rotate(calc(var(--angle) + 12deg)) scale(1.3);opacity:.35}}
@keyframes m20-can-orbit{from{transform:translateY(0) rotate(var(--angle))}to{transform:translateY(-23px) rotate(calc(var(--angle) + 360deg))}}
@keyframes m20-vinegar-shimmer{from{transform:translate(-7px,20px) rotate(var(--angle));opacity:.1}to{transform:translate(8px,-30px) rotate(calc(var(--angle) + 20deg));opacity:.4}}
@keyframes m20-fries-drift{from{transform:translate(-8px,15px) rotate(var(--angle));opacity:.15}to{transform:translate(16px,-17px) rotate(calc(var(--angle) - 22deg));opacity:.38}}
@keyframes m20-syrup-curl{from{transform:translate(-18px,6px) rotate(var(--angle)) scale(.8);opacity:.12}to{transform:translate(17px,-24px) rotate(calc(var(--angle) + 36deg)) scale(1.08);opacity:.4}}
/* All 1/2/3 packshot layouts are composed around the EXACT CENTER of the circle. */
.m16-hero .m16-scene .m16-product{transform:none;max-height:none;filter:drop-shadow(0 12px 15px #29372928);animation:m20-pack-arrive 1.22s cubic-bezier(.19,.9,.18,1) both;animation-delay:var(--stagger,0s)}
.m16-hero .m16-scene .m16-product--center{width:29%;height:39%;top:29%;left:35.5%;z-index:3}
.m16-hero .m16-scene .m16-product--left{width:24%;height:31%;top:43%;left:16%;z-index:2}
.m16-hero .m16-scene .m16-product--right{width:24%;height:31%;top:43%;right:16%;z-index:2}
.m16-hero .m16-scene .m16-product--two-left{width:32%;height:39%;top:31%;left:18%;z-index:2}
.m16-hero .m16-scene .m16-product--two-right{width:32%;height:39%;top:31%;right:18%;z-index:2}
.m16-hero .m16-scene .m16-product--solo{width:41%;height:46%;top:27%;left:29.5%;z-index:3}
/* Bottles gain more breathing space than bags, consistently on mobile and desktop. */
.m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-scene .m16-product--center{width:25%;height:35%;top:31%;left:37.5%}
.m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-scene .m16-product--left{width:21%;height:27%;top:44%;left:19%}
.m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-scene .m16-product--right{width:21%;height:27%;top:44%;right:19%}
@keyframes m20-pack-arrive{
  0%{opacity:0;transform:translate3d(var(--from-x,0px),var(--from-y,0px),0) scale(.76);filter:blur(7px)}
  72%{opacity:1;transform:translate3d(0,-5px,0) scale(1.03);filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:drop-shadow(0 12px 15px #29372928)}
}
.m16-hero[data-scene="canned"] .m16-scene .m16-product{animation-duration:1.3s}
.m16-hero[data-scene="syrup"] .m16-scene .m16-product{animation-duration:1.48s}
.m16-hero[data-scene="fries"] .m16-scene .m16-product--solo{width:40%;height:44%;top:28%;left:30%}
.m16-hero[data-scene="vinegar"] .m16-scene .m16-product--two-left,.m16-hero[data-scene="vinegar"] .m16-scene .m16-product--two-right{width:29%;height:38%;top:31%}
@media(max-width:720px){
 body.site--cinema #home.m16-hero{min-height:100svh;padding-top:var(--m16-header-height, 90px)}
 body.site--cinema #home .m16-hero-main{padding-block:12px 4px}
 body.site--cinema #home .m16-stage{height:clamp(235px,33vh,300px);min-height:235px}
 .m16-hero .m16-orbit{width:min(78vw,280px)}
 .m16-hero .m16-scene .m16-product--center{height:39%;top:30%}
 .m16-hero .m16-scene .m16-product--left,.m16-hero .m16-scene .m16-product--right{height:28%;top:43%}
 .m20-motif{opacity:.14}
}
@media(prefers-reduced-motion:reduce){
 .m20-motif,.m16-hero .m16-orbit,.m16-hero .m16-orbit-line,.m16-hero .m16-scene .m16-product{animation:none!important}
 .m16-hero .m16-scene .m16-product{opacity:1!important;transform:none!important}
}

/* MAYAN REV21 | Purpose-built hero choreography (family cluster + sector showcase)
   The product cluster shares the orbital coordinate system. Sector imagery is a
   separate composition without an orbit. These rules supersede old positions. */
.m16-hero .m16-stage{isolation:isolate}
.m16-hero .m16-scene{z-index:2;position:relative;display:grid;place-items:center}
.m16-hero .m21-pack-cluster{position:relative;display:block;flex:none;width:min(91%,415px);aspect-ratio:1;transform:translateY(-4%);isolation:isolate}
.m16-hero .m21-pack-cluster .m16-product{position:absolute;margin:0;display:grid;place-items:center;inset:auto;filter:drop-shadow(0 12px 15px #29372927)}
.m16-hero .m16-scene .m21-pack-cluster .m16-product--center{width:35%;height:56%;top:17%;left:32.5%;right:auto}
.m16-hero .m16-scene .m21-pack-cluster .m16-product--left{width:25%;height:47%;top:28%;left:13%;right:auto}
.m16-hero .m16-scene .m21-pack-cluster .m16-product--right{width:25%;height:47%;top:28%;left:auto;right:13%}
.m16-hero .m16-scene .m21-pack-cluster .m16-product--two-left{width:36%;height:56%;top:19%;left:10%;right:auto}
.m16-hero .m16-scene .m21-pack-cluster .m16-product--two-right{width:36%;height:56%;top:19%;left:auto;right:10%}
.m16-hero .m16-scene .m21-pack-cluster .m16-product--solo{width:49%;height:67%;top:12%;left:25.5%;right:auto}
.m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-scene .m21-pack-cluster .m16-product--center{width:33%;height:56%;top:17%;left:33.5%}
.m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-scene .m21-pack-cluster .m16-product--left{width:23%;height:44%;top:29%;left:15%}
.m16-hero:is([data-scene="oil"],[data-scene="sauce"],[data-scene="syrup"]) .m16-scene .m21-pack-cluster .m16-product--right{width:23%;height:44%;top:29%;right:15%}
.m16-hero[data-scene="fries"] .m16-scene .m21-pack-cluster .m16-product--solo{width:52%;height:67%;top:12%;left:24%}
.m16-hero[data-scene="vinegar"] .m16-scene .m21-pack-cluster .m16-product--two-left,
.m16-hero[data-scene="vinegar"] .m16-scene .m21-pack-cluster .m16-product--two-right{width:36%;height:55%;top:19%}
.m16-hero .m21-pack-cluster .m16-product img{width:100%;height:100%;object-fit:contain;object-position:center;max-width:100%;max-height:100%}

/* Light and moving navbar-inspired ribbons, customized to every family. */
.m16-hero .m16-atmosphere{opacity:1}
.m16-hero .m20-motif{opacity:.35;filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--m16-accent) 12%,transparent))}
.m21-stream{position:absolute;display:block;left:var(--sx);top:var(--sy);width:clamp(75px,11vw,175px);height:clamp(75px,11vw,175px);border:1px solid color-mix(in srgb,var(--m16-accent) 25%,transparent);border-radius:50%;opacity:.52;pointer-events:none;will-change:transform,opacity;transform:translate3d(0,0,0);animation:m21-stream-drift var(--sd) ease-in-out var(--sdelay) infinite alternate}
.m21-stream:before{content:"";position:absolute;top:-4px;left:24%;width:7px;height:7px;border-radius:50%;background:var(--m16-accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--m16-accent) 8%,transparent),0 0 17px color-mix(in srgb,var(--m16-accent) 24%,transparent)}
.m21-stream:after{content:"";position:absolute;inset:15%;border-radius:inherit;border:1px solid color-mix(in srgb,var(--m16-accent) 13%,transparent)}
.m21-stream--2,.m21-stream--6{width:clamp(40px,7vw,115px);height:clamp(40px,7vw,115px)}
.m21-stream--3,.m21-stream--7{width:clamp(135px,17vw,250px);height:clamp(135px,17vw,250px);opacity:.32}
.m21-stream--4{width:clamp(22px,5vw,60px);height:clamp(22px,5vw,60px)}
.m21-stream--5{opacity:.4}
.m21-stream--rice{border-radius:50% 50% 49% 51%;border-style:dotted;border-width:2px}
.m21-stream--rice:before{width:13px;height:5px;border-radius:95% 6% 95% 6%;transform:rotate(-40deg)}
.m21-stream--oil{border-radius:55% 45% 53% 47% / 70% 70% 30% 30%;border-width:2px;animation-name:m21-oil-flow}
.m21-stream--sauce{border-radius:63% 37% 62% 38%;transform:rotate(26deg);animation-name:m21-sauce-wave}
.m21-stream--canned{border-style:double;border-width:3px;animation-name:m21-can-turn}
.m21-stream--vinegar{border-color:color-mix(in srgb,var(--m16-accent) 32%,transparent);border-radius:45% 55% 52% 48% / 65% 66% 34% 35%;animation-name:m21-vinegar-glide}
.m21-stream--fries{border-radius:22%;transform:rotate(-16deg);border-style:dashed;animation-name:m21-fries-float}
.m21-stream--syrup{border-radius:63% 37% 67% 33% / 40% 65% 35% 60%;border-width:2px;animation-name:m21-syrup-loop}
.m21-stream--story{border-radius:50%;animation-name:m21-can-turn}
.m21-stream--serve{border-radius:18%;animation-name:m21-stream-drift}
@keyframes m21-stream-drift{0%{transform:translate3d(-19px,15px,0) rotate(-16deg) scale(.93);opacity:.24}50%{opacity:.59}100%{transform:translate3d(29px,-32px,0) rotate(19deg) scale(1.05);opacity:.42}}
@keyframes m21-oil-flow{from{transform:translate3d(12px,24px,0) rotate(-19deg) scale(.91);opacity:.24}to{transform:translate3d(-18px,-26px,0) rotate(21deg) scale(1.1);opacity:.55}}
@keyframes m21-sauce-wave{from{transform:translate3d(-25px,10px,0) rotate(10deg) scale(.91);opacity:.27}to{transform:translate3d(27px,-12px,0) rotate(39deg) scale(1.08);opacity:.6}}
@keyframes m21-can-turn{from{transform:translate3d(-13px,10px,0) rotate(-28deg);opacity:.24}to{transform:translate3d(18px,-15px,0) rotate(28deg);opacity:.53}}
@keyframes m21-vinegar-glide{from{transform:translate3d(-12px,20px,0) scale(.92);opacity:.16}to{transform:translate3d(14px,-25px,0) scale(1.09);opacity:.45}}
@keyframes m21-fries-float{from{transform:translate3d(12px,13px,0) rotate(-21deg);opacity:.2}to{transform:translate3d(-17px,-16px,0) rotate(12deg);opacity:.47}}
@keyframes m21-syrup-loop{from{transform:translate3d(-9px,19px,0) rotate(-24deg) scale(.9);opacity:.2}to{transform:translate3d(17px,-13px,0) rotate(17deg) scale(1.06);opacity:.55}}

/* Sectors: editorial photo stage with deliberate image + brand choreography.
   No background circle on the sector slide. */
.m16-hero[data-scene="serve"] .m16-orbit{display:none!important}
.m16-hero[data-scene="serve"] .m16-scene{overflow:visible}
.m16-hero .m21-sector-scene{width:min(100%,650px);height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;margin-inline:auto;position:relative}
.m16-hero .m21-sector-frame{width:min(100%,630px);height:clamp(220px,30vh,280px);border-radius:22px;position:relative;isolation:isolate;overflow:hidden;box-shadow:0 25px 46px color-mix(in srgb,var(--m16-accent) 21%,transparent);background:linear-gradient(130deg,var(--m16-light),var(--m16-tint));border:1px solid color-mix(in srgb,var(--m16-accent) 19%,transparent)}
.m16-hero .m21-sector-frame:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent 70%,#ffffff29)}
.m16-hero .m21-sector-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:0;box-shadow:none;background:transparent;transition:none}
.m16-hero .m21-sector-photo.m21-photo-enter{animation:m21-sector-arrive .73s cubic-bezier(.18,.81,.24,1) both;z-index:2}
.m16-hero .m21-sector-photo.m21-photo-leave{animation:m21-sector-depart .53s ease-in forwards;z-index:1}
@keyframes m21-sector-arrive{from{opacity:0;transform:translate3d(64px,0,0) scale(1.065);filter:brightness(1.12) blur(4px)}to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(1) blur(0)}}
@keyframes m21-sector-depart{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(-32px,0,0) scale(.97)}}
.m16-hero .m21-sector-scene .m16-sector-tabs{max-width:100%;gap:7px}
.m16-hero .m21-brand-rail{margin:0 auto 8px;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(12px,3vw,40px)}
.m16-hero .m21-brand-rail img{height:clamp(30px,3.4vw,46px);max-width:18%;opacity:1}
.m16-hero .m21-brand-rail.m21-appear img{animation:m21-brand-arrive .75s cubic-bezier(.17,.84,.28,1) both;animation-delay:calc(var(--brand-index,0)*.085s)}
@keyframes m21-brand-arrive{from{opacity:0;transform:translate3d(-24px,13px,0) scale(.85);filter:blur(3px)}to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@media(max-width:720px){
 .m16-hero .m21-pack-cluster{width:min(78vw,280px)}
 .m16-hero .m21-sector-scene{width:100%;gap:9px}
 .m16-hero .m21-sector-frame{height:clamp(147px,23vh,185px);border-radius:16px}
 .m16-hero .m21-brand-rail{gap:8px;margin-bottom:7px}
 .m16-hero .m21-brand-rail img{height:32px;max-width:19%}
 .m16-hero .m21-stream{opacity:.29}
}
@media(prefers-reduced-motion:reduce){
 .m21-stream,.m16-hero .m21-sector-photo,.m16-hero .m21-brand-rail img{animation:none!important}
 .m16-hero .m21-sector-photo.m21-photo-enter{opacity:1!important;transform:none!important}
}