body.home-page{min-width:0}
.home-page{--font-cairo:"Cairo","Noto Sans Arabic Local","Noto Sans Arabic","Segoe UI",Arial,sans-serif;background:#e9eef5;overflow-x:hidden}
.home-shell{min-height:100svh;display:grid;place-items:start center;background:#e9eef5}
.home-composition{width:min(calc(100vw - 4px),430px,51.95vh);width:min(calc(100vw - 4px),430px,51.95svh);margin:0 auto;background:#fff;box-shadow:0 0 28px rgba(6,31,69,.1);overflow:hidden;position:relative}
.visual-slice{position:relative;width:100%;line-height:0;background:#fff;overflow:hidden}
.visual-slice>img:first-child{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.visual-slice--hero{aspect-ratio:746/500}.visual-slice--hero>img:first-child{width:100%;height:100%;object-fit:cover;object-position:top center}
.row-wrap{width:100%;display:flex;justify-content:center;background:#fff}
.row-wrap--one{padding-top:.45%}.row-wrap--two{padding-top:.8%}
.card-row{width:90%;flex:0 0 90%}
.visual-slice--address{margin-top:1.1%}.visual-slice--contact{margin-top:.35%}.visual-slice--footer{margin-top:.45%}
.pressable{transition:transform .14s ease,filter .14s ease}.pressable:active{transform:scale(.985);filter:brightness(.97)}
.more-trigger,.hero-phone-hotspot,.card-hotspot{position:absolute;z-index:5;border:0;background:transparent;padding:0;margin:0;cursor:pointer;text-decoration:none}

/* R1 — approved More pill */
.more-trigger{left:5.6%;top:7.85%;width:25.1%;height:10.2%;border:1.7px solid #d2a019;border-radius:999px;background:linear-gradient(180deg,#fff 0%,#f8f8f5 64%,#e7e7e2 100%);box-shadow:0 3px 9px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;gap:9%;color:#071f4e;font-family:var(--font-cairo);font-weight:800;font-size:clamp(.7rem,3.32vw,.95rem);line-height:1;direction:ltr}
.more-trigger__label{display:flex;align-items:center;justify-content:center;white-space:nowrap;direction:rtl;line-height:1}.more-trigger__hamburger{width:22%;min-width:16px;display:grid;gap:3px}.more-trigger__hamburger i{display:block;height:2px;border-radius:999px;background:#0b2f69;box-shadow:0 .2px .2px rgba(0,0,0,.15)}
.more-trigger:focus-visible{box-shadow:0 3px 9px rgba(0,0,0,.18),0 0 0 3px rgba(20,141,209,.28)}

/* R2 — visible phone is slightly smaller in the R6 hero raster, while the tap target remains generous. */
.hero-phone-hotspot{left:29.4%;top:76.9%;width:40.9%;height:13.5%;border-radius:999px}

.card-hotspot{top:0;height:100%;width:29.25%;border-radius:5px}.card-hotspot--left{left:0}.card-hotspot--middle{left:35.37%}.card-hotspot--right{right:0}

/* R6 — real first-load fade: R6 row bases no longer duplicate the six icons. */
.motion-overlay{position:absolute;z-index:4;pointer-events:none;transform-origin:center;opacity:0;animation:home-fade-arrival .9s cubic-bezier(.2,.76,.22,1) both}
.motion-logo{left:38.88%;top:9.48%;width:22.25%;height:auto;animation-name:logo-arrival;animation-duration:1.08s;animation-delay:.03s;animation-timing-function:cubic-bezier(.16,.84,.28,1);animation-fill-mode:both}
/* Veil makes the embedded logo begin partially muted, then reveal fully without changing the approved artwork. */
.visual-slice--hero::after{content:"";position:absolute;z-index:3;left:38.45%;top:9.1%;width:23.1%;aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,#566888 0%,#7c8ca8 32%,#c6cfdb 62%,#f7f8f7 84%,#fff 100%);pointer-events:none;animation:logo-veil-away 1.08s cubic-bezier(.16,.84,.28,1) .03s both}
.row-icon{top:5.8%;height:auto}.row-icon--left{left:13.94%;width:10.72%}.row-icon--middle{left:44.5%;width:10.86%}.row-icon--right{left:76%;width:10.86%}
.row-wrap--one .row-icon--left{animation-delay:.13s}.row-wrap--one .row-icon--middle{animation-delay:.20s}.row-wrap--one .row-icon--right{animation-delay:.27s}
.row-icon--shipping{left:12.1%;top:6.1%;width:16.1%;animation-delay:.34s}.row-icon--sales{left:44.2%;top:6.1%;width:11.4%;animation-delay:.41s}.row-icon--pin{left:75.7%;top:6.1%;width:10.7%;animation-delay:.48s}
@keyframes home-fade-arrival{0%{opacity:0;transform:translateY(4px) scale(.965)}65%{opacity:.92}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes logo-arrival{0%{opacity:0;transform:scale(.68)}48%{opacity:.92;transform:scale(.93)}78%{opacity:1;transform:scale(1.035)}100%{opacity:1;transform:scale(1)}}
@keyframes logo-veil-away{0%,55%{opacity:1}100%{opacity:0}}

/* R3 — approved quick-contact strip with labels below the icons; whole item is tappable. */
/* Final owner patch — keep the three quick-contact controls as one visually consistent family.
   The direct-call control uses the same background/plate treatment as WhatsApp and Telegram,
   while each link keeps its original destination and accessible label. */
.contact-quick{aspect-ratio:746/103;border:2px solid #183d68;border-radius:18px;background:#fff;line-height:1.15;display:grid;place-items:center;padding:1.2% 0}
.contact-quick__grid{width:60%;height:92%;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;direction:ltr}
.contact-quick__item{height:100%;position:relative!important;z-index:5!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;box-sizing:border-box;min-height:0;border-radius:10px;background:transparent;color:#0b2f69;text-decoration:none;direction:rtl;min-width:0}
.contact-quick__item+ .contact-quick__item{border-left:1px solid #9fb0c4}
.contact-quick__item img{display:block;width:clamp(17px,5.6vw,27px);height:clamp(17px,5.6vw,27px);object-fit:contain;border:1px solid #e2e9f1;border-radius:50%;background:linear-gradient(145deg,#fff 0%,#f5f8fb 100%);padding:2px;box-sizing:border-box;box-shadow:0 1px 3px rgba(7,45,91,.14)}
.contact-quick__item span{display:block;font-family:var(--font-cairo);font-size:clamp(.48rem,2.1vw,.66rem);font-weight:700;line-height:1.05;white-space:nowrap;text-align:center}
.contact-hotspot{cursor:pointer}

/* R8 — only the final rights line is re-rendered one subtle typography step smaller. */
.footer-rights-live{position:absolute;z-index:4;left:25.6%;top:69.1%;width:48.8%;height:15.2%;background:#fff;color:#17395f;display:grid;place-items:center;font-family:var(--font-arabic);font-size:clamp(.52rem,2.05vw,.67rem);font-weight:700;line-height:1;white-space:nowrap;text-align:center}

/* Owner final copyright strip — exact home-rights typography repeated on every More/internal view. */
.interface-rights-bar{position:absolute;z-index:12;left:0;right:0;bottom:0;height:28px;background:#0b3a78;display:grid;place-items:center;pointer-events:none}
.interface-rights-bar span{width:48.8%;height:70%;background:#fff;color:#17395f;display:grid;place-items:center;font-family:var(--font-arabic);font-size:clamp(.52rem,2.05vw,.67rem);font-weight:700;line-height:1;white-space:nowrap;text-align:center}

/* R7 — premium page/sheet transition with lightweight page-turn depth. */
.more-panel{position:fixed;inset:0;z-index:1000;display:grid;place-items:stretch center;perspective:1300px}.more-panel[hidden]{display:none}
.more-panel,.more-panel button,.more-panel a,.more-panel summary,.more-panel h2,.more-panel p,.more-panel strong,.more-panel small,.more-panel span{font-family:var(--font-cairo)}
.more-panel__backdrop{position:absolute;inset:0;background:rgba(2,12,29,.6);opacity:0;transition:opacity .30s ease}
.more-panel__sheet{position:relative;width:min(100%,430px);height:100svh;height:100dvh;background:linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%);color:#0b2f69;box-shadow:-22px 0 46px rgba(0,0,0,.24);transform-origin:right center;transform:translateX(28%) rotateY(-17deg) scale(.975);opacity:.36;transition:transform .46s cubic-bezier(.18,.82,.22,1),opacity .32s ease;overflow:hidden;padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom));font-family:var(--font-cairo);backface-visibility:hidden;will-change:transform,opacity}
.more-panel.is-open .more-panel__backdrop{opacity:1}.more-panel.is-open .more-panel__sheet{transform:translateY(0) rotateX(0) scale(1);opacity:1}
.more-panel__head{height:64px;position:relative;display:flex;align-items:center;justify-content:center;background:#0b3a78;color:#fff;border-bottom:2px solid #d6a51d;box-shadow:0 5px 14px rgba(5,29,66,.16)}
.more-panel__title{font-size:1.32rem;font-weight:800;text-align:center;line-height:1;display:flex;align-items:center;justify-content:center;min-height:100%}
.menu-close,.menu-back{position:absolute;top:10px;width:43px;height:43px;border-radius:50%;border:1px solid rgba(255,255,255,.38);background:#0d62b5;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 9px rgba(0,0,0,.12);padding:0}
.menu-close{left:13px;font-size:0;line-height:0}.menu-close::before,.menu-close::after{content:"";position:absolute;left:50%;top:50%;width:21px;height:4px;border-radius:999px;background:#fff;transform-origin:center}.menu-close::before{transform:translate(-50%,-50%) rotate(45deg)}.menu-close::after{transform:translate(-50%,-50%) rotate(-45deg)}.menu-back{right:13px}.menu-back img{display:block;width:27px;height:27px;object-fit:contain;transform:scaleX(-1);transform-origin:center}.menu-back[hidden]{display:none!important}
.menu-stage{position:relative;height:calc(100% - 64px - 28px);overflow:hidden;perspective:1400px}
.menu-view{position:absolute;inset:0;padding:14px 13px 24px;overflow-y:auto;overscroll-behavior:contain;opacity:0;pointer-events:none;transform-origin:right center;transform:translateX(-20%) rotateY(12deg) scale(.982);transition:transform .40s cubic-bezier(.18,.82,.22,1),opacity .28s ease;backface-visibility:hidden;will-change:transform,opacity}
.menu-view.is-entering{opacity:0}.menu-view.is-active{opacity:1;pointer-events:auto;transform:translateX(0) rotateY(0) scale(1)}.menu-view.is-leaving{opacity:0;transform:translateX(20%) rotateY(-12deg) scale(.982)}
.menu-stage.is-reverse .menu-view{transform-origin:left center;transform:translateX(20%) rotateY(-12deg) scale(.982)}.menu-stage.is-reverse .menu-view.is-active{transform:translateX(0) rotateY(0) scale(1)}.menu-stage.is-reverse .menu-view.is-leaving{transform:translateX(-20%) rotateY(12deg) scale(.982)}

.menu-tree{display:grid;gap:9px}.menu-separator{height:1px;background:#c9d5e4;margin:2px 10px}
.menu-item{width:100%;min-height:66px;border:1px solid #d2dde8;border-radius:18px;background:#fff;color:#0b2f69;padding:8px 12px;display:grid;grid-template-columns:50px 1fr 42px;align-items:center;gap:9px;font-family:var(--font-cairo);font-weight:700;font-size:1.12rem;box-shadow:0 5px 14px rgba(8,38,78,.065);cursor:pointer}
.menu-item__icon-badge{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#eaf2fa);border:1px solid #cdddec;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(9,47,97,.09)}
.menu-item__icon{width:39px;height:39px;object-fit:contain}.menu-item>span:nth-child(2){text-align:center;font-weight:700;line-height:1.32}
.menu-item__nav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#1883da,#0755a6);border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px 1px rgba(255,255,255,.42),0 4px 9px rgba(9,76,147,.24)}.menu-item__nav img{display:block;width:25px;height:25px;object-fit:contain;margin:0;filter:drop-shadow(0 1px 0 rgba(4,37,78,.22))}.menu-item__nav--submenu{background:linear-gradient(145deg,#1b8be0,#0755a6)}

.detail-block{background:#fff;border:1px solid #d2dde8;border-radius:20px;padding:19px 16px;box-shadow:0 8px 24px rgba(8,38,78,.08);text-align:center;font-family:var(--font-cairo)}
.detail-icon{width:58px;height:58px;object-fit:contain;margin:0 auto 9px}.detail-block h2{margin:0 0 12px;color:#0b2f69;font-size:1.5rem;font-weight:800;line-height:1.42;text-align:center}
/* Final Punch 07 — Products content heading reads as a clear main content heading. */
.menu-view[data-menu-view="products"] .detail-block h2{font-size:1.62rem;line-height:1.3;margin-bottom:13px}.detail-block p{margin:0;color:#1d3b63;font-size:.98rem;line-height:1.95;font-weight:400;text-align:center}.detail-copy{display:grid;gap:12px}.detail-copy p{font-weight:400}.detail-signoff{font-weight:700!important;color:#0b2f69!important;margin-top:4px!important}
/* Final Punch 09/21 — approved burgundy closing line; applied page-by-page during gated execution. */
.global-closing{color:#a31924!important;font-family:var(--font-cairo)!important;font-weight:700!important;text-align:center!important;line-height:1.55!important}.detail-page-closing{margin-top:14px!important;font-size:1rem!important}
.sales-warning{display:inline-block;margin-top:4px;color:#b11924;font-weight:700}
/* Final Punch 11 — sales copy receives document-quality rhythm without rewriting content. */
.menu-view[data-menu-view="sales"] .detail-copy{gap:10px}.menu-view[data-menu-view="sales"] .detail-copy p{line-height:1.82}.menu-view[data-menu-view="sales"] .global-closing{margin-top:5px!important}
.detail-note{margin-top:13px!important;padding:10px 12px;border-radius:12px;background:#fff0f0;color:#991f25!important;font-size:.9rem!important;font-weight:700!important}
.address-copy{padding:13px 12px;margin:9px 0 11px;border-radius:14px;background:#f4f8fc;border:1px solid #d7e2ee;text-align:center}.address-copy strong,.address-copy span{display:block}.address-copy strong{font-size:1.02rem;font-weight:700;color:#0b2f69;line-height:1.8}.address-copy span{margin-top:4px;font-size:.84rem;font-weight:400;color:#5d718a;line-height:1.75}
.choice-list{display:grid;gap:9px;margin-top:10px}.choice-card{min-height:67px;border:1px solid #d3dfe9;border-radius:14px;background:#f9fbfd;color:#0b2f69;padding:9px 12px;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:10px;text-align:center;text-decoration:none;cursor:pointer;font-family:var(--font-cairo)}.choice-card>img{width:43px;height:43px;object-fit:contain}.choice-card span{display:grid;gap:2px}.choice-card strong{font-size:1rem;font-weight:700;line-height:1.5}.choice-card small{font-size:.76rem;color:#73849a;font-weight:400;line-height:1.65}

/* R7 nested submenu motion + R16 FAQ reconciliation. */
.faq-list{display:grid;gap:8px;margin-top:10px}.faq-list details{border:1px solid #d4dfe9;border-radius:13px;background:#f9fbfd;padding:0 12px;text-align:center;overflow:hidden;transition:border-color .24s ease,box-shadow .24s ease,background-color .24s ease}.faq-list details[open]{border-color:#b9d1e8;background:#fff;box-shadow:0 5px 14px rgba(8,38,78,.06)}.faq-list summary{cursor:pointer;padding:12px 4px;font-size:.94rem;font-weight:700;list-style:none;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::before{content:"";display:inline-block;width:8px;height:8px;border-left:2px solid #0d64bd;border-bottom:2px solid #0d64bd;transform:rotate(-45deg);margin-left:9px;vertical-align:2px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}.faq-list details[open] summary::before{transform:rotate(135deg)}.faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transform-origin:top center;transform:perspective(700px) rotateX(-9deg) translateY(-7px) scale(.992);transition:grid-template-rows .34s cubic-bezier(.18,.82,.22,1),opacity .25s ease,transform .34s cubic-bezier(.18,.82,.22,1)}.faq-answer>div{overflow:hidden}.faq-list details[open] .faq-answer{grid-template-rows:1fr;opacity:1;transform:perspective(700px) rotateX(0) translateY(0) scale(1)}.faq-list details.faq-preopen .faq-answer,.faq-list details.faq-closing .faq-answer{grid-template-rows:0fr;opacity:0;transform:perspective(700px) rotateX(-9deg) translateY(-7px) scale(.992)}.faq-answer p{padding:0 4px 11px!important;font-size:.86rem!important;line-height:1.8!important;font-weight:400!important;color:#526881!important}

.social-list{display:grid;gap:8px;margin-top:10px}.social-link{min-height:62px;border:1px solid #d3dfe9;border-radius:14px;background:#f9fbfd;padding:8px 13px;display:grid;grid-template-columns:47px 1fr;align-items:center;gap:11px;color:#0b2f69;text-decoration:none;text-align:center;font-family:var(--font-cairo)}.social-link img{width:43px;height:43px;object-fit:contain}.social-link strong{font-size:1rem;font-weight:700;line-height:1.55}.season-note{margin-top:13px!important;color:#0b2f69!important;font-weight:700!important}

/* R15 — keep all seven links while fitting the common mobile viewport. */
.menu-view[data-menu-view="links"]{padding:9px 11px 13px}.menu-view[data-menu-view="links"] .detail-block{padding:10px 11px 9px;border-radius:18px}.menu-view[data-menu-view="links"] .detail-icon{width:43px;height:43px;margin-bottom:4px}.menu-view[data-menu-view="links"] h2{font-size:1.28rem;margin-bottom:5px}.menu-view[data-menu-view="links"] .social-list{gap:5px;margin-top:6px}.menu-view[data-menu-view="links"] .social-link{min-height:50px;padding:5px 10px;grid-template-columns:39px 1fr;border-radius:12px}.menu-view[data-menu-view="links"] .social-link img{width:36px;height:36px}.menu-view[data-menu-view="links"] .social-link:first-child img{justify-self:center;align-self:center;margin:auto}.menu-view[data-menu-view="links"] .social-link strong{font-size:.92rem;line-height:1.35}.menu-view[data-menu-view="links"] .links-closing{margin-top:7px!important;font-size:.88rem!important;line-height:1.4!important}

/* R16-E — readable, centered Why Outlet presentation without a dense paragraph. */
/* Final Punch 13 — Why Outlet: compact document rhythm so common mobile viewports show the complete page without whole-page scaling. */
.menu-view[data-menu-view="about"]{padding:8px 10px 12px}
.menu-view[data-menu-view="about"] .detail-block--why{padding:9px 10px 10px}
.menu-view[data-menu-view="about"] .detail-block--why>.detail-icon,.menu-view[data-menu-view="about"] .detail-block--why>h2{display:none}
.why-list{display:grid;gap:3px;margin-top:0}.why-list p{padding:3px 7px;border-radius:8px;background:#f7fafd;border:1px solid #e0e8f1;font-size:.8rem;line-height:1.28;font-weight:400}.why-signoff{margin-top:6px;padding-top:6px;border-top:1px solid #d9e3ed;display:grid;gap:2px;color:#0b2f69}.why-signoff p{font-weight:400;font-size:.8rem;line-height:1.3}.why-signoff .why-thanks{color:#a31924;font-weight:700}.why-signoff strong{font-size:.9rem;font-weight:700;line-height:1.3}.why-signoff span{font-size:.78rem;font-weight:400;line-height:1.28}.about-closing{margin-top:4px!important;font-size:.8rem!important}

.menu-open{overflow:hidden}
@media(max-width:350px){.more-panel__head{height:59px}.menu-stage{height:calc(100% - 59px)}.menu-item{min-height:58px;font-size:.96rem;grid-template-columns:44px 1fr 36px;padding-inline:9px}.menu-item__icon-badge{width:42px;height:42px}.menu-item__icon{width:35px;height:35px}.menu-item__nav{width:32px;height:32px}.detail-block h2{font-size:1.32rem}.detail-block p{font-size:.89rem}.social-link{min-height:48px}.social-link strong{font-size:.86rem}.menu-view[data-menu-view="links"] .social-link{min-height:46px}.menu-view[data-menu-view="links"] .social-link strong{font-size:.83rem}}
@media(max-height:650px) and (max-width:430px){.menu-view[data-menu-view="links"]{padding-top:6px}.menu-view[data-menu-view="links"] .detail-block{padding-top:7px}.menu-view[data-menu-view="links"] .detail-icon{width:36px;height:36px}.menu-view[data-menu-view="links"] h2{font-size:1.12rem;margin-bottom:3px}.menu-view[data-menu-view="links"] .social-list{gap:3px;margin-top:4px}.menu-view[data-menu-view="links"] .social-link{min-height:45px}.menu-view[data-menu-view="links"] .social-link img{width:32px;height:32px}.menu-view[data-menu-view="links"] .links-closing{margin-top:4px!important}}
@media(prefers-reduced-motion:reduce){.motion-overlay,.visual-slice--hero::after,.pressable,.more-panel__backdrop,.more-panel__sheet,.menu-view,.faq-answer,.faq-list summary::before,.faq-list details{animation:none!important;transition:none!important}.motion-overlay{opacity:1!important}.visual-slice--hero::after{display:none!important}}

/* Owner final haptic-fix R3 — change 1 only: swap the light icon-plate treatments
   between Direct Call and WhatsApp without changing destinations or content. */
.contact-quick__item[data-phone-link] img{background:linear-gradient(180deg,#ffffff 0%,#edf9f1 100%);border-color:#cfe8d9}
.contact-quick__item[data-whatsapp-link] img{background:linear-gradient(180deg,#ffffff 0%,#fff2f3 100%);border-color:#f0d9dd}

/* Owner final haptic-fix R3 — change 2 only: slightly enlarge the complete lower
   quick-contact group while preserving centering and border clearance. */
.contact-quick{padding:1.05% 0}
.contact-quick__grid{width:63%;height:94%}
.contact-quick__item{gap:2px}
.contact-quick__item img{width:clamp(20px,6.1vw,30px);height:clamp(20px,6.1vw,30px)}
.contact-quick__item span{font-size:clamp(.54rem,2.3vw,.72rem);line-height:1.08}

/* Owner final haptic-fix R3 — change 3 only: the three colored icons are centered
   geometrically inside their light circular plates. */
.contact-quick__item{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;place-items:center;align-content:center;justify-items:center;gap:2px;padding:1px 3px 2px}
.contact-quick__item::before{content:"";grid-row:1;grid-column:1;width:clamp(28px,8.2vw,36px);height:clamp(28px,8.2vw,36px);border-radius:50%;background:linear-gradient(145deg,#fff 0%,#f5f8fb 100%);border:1px solid #e2e9f1;box-shadow:0 1px 3px rgba(7,45,91,.14);box-sizing:border-box;align-self:center;justify-self:center}
.contact-quick__item img{grid-row:1;grid-column:1;position:relative;z-index:1;width:clamp(20px,6.1vw,28px);height:clamp(20px,6.1vw,28px);object-fit:contain;border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;align-self:center;justify-self:center;margin:0}
.contact-quick__item span{grid-row:2;grid-column:1;align-self:start;justify-self:center;margin:0}
.contact-quick__item[data-phone-link]::before{background:linear-gradient(180deg,#ffffff 0%,#edf9f1 100%);border-color:#cfe8d9}
.contact-quick__item[data-whatsapp-link]::before{background:linear-gradient(180deg,#ffffff 0%,#fff2f3 100%);border-color:#f0d9dd}
.contact-quick__item[data-telegram-link]::before{background:linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);border-color:#dbe8f5}
@media(max-width:340px){
  .contact-quick__item{gap:1px;padding:0 2px 1px}
  .contact-quick__item::before{width:26px;height:26px}
  .contact-quick__item img{width:19px;height:19px}
  .contact-quick__item span{font-size:.50rem;line-height:1}
}
@media(max-width:340px){.contact-quick__grid{height:90%}}
@media(max-width:340px){.contact-quick__item span{transform:translateY(-1px)}}

/* Owner final haptic-fix R3 — change 5 only: More main menu fits one mobile viewport
   without vertical scrolling; detail views retain their existing behavior. */
@media(max-height:760px) and (max-width:430px){
  .menu-view[data-menu-view="main"]{overflow-y:hidden;padding:8px 10px 10px}
  .menu-view[data-menu-view="main"] .menu-tree{height:100%;min-height:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr)) 1px repeat(2,minmax(0,1fr)) 1px repeat(2,minmax(0,1fr));gap:clamp(3px,.8svh,5px)}
  .menu-view[data-menu-view="main"] .menu-separator{height:1px;margin:0 8px;align-self:center}
  .menu-view[data-menu-view="main"] .menu-item{min-height:0;height:100%;padding:3px 8px;grid-template-columns:clamp(34px,6.2svh,42px) 1fr clamp(30px,5.5svh,34px);gap:6px;border-radius:14px;font-size:clamp(.84rem,4vw,1rem)}
  .menu-view[data-menu-view="main"] .menu-item__icon-badge{width:clamp(34px,6.2svh,42px);height:clamp(34px,6.2svh,42px)}
  .menu-view[data-menu-view="main"] .menu-item__icon{width:82%;height:82%}
  .menu-view[data-menu-view="main"] .menu-item__nav{width:clamp(30px,5.5svh,34px);height:clamp(30px,5.5svh,34px)}
  .menu-view[data-menu-view="main"] .menu-item__nav img{width:70%;height:70%}
  .menu-view[data-menu-view="main"] .menu-item>span:nth-child(2){line-height:1.18}
}
@media(max-width:350px) and (max-height:760px){.menu-view[data-menu-view="main"]{bottom:28px}}
/* Owner final recovery R5 — corrections 2 + 3 only.
   Keep all three quick-contact controls fully inside the approved rounded frame,
   center icon + label without optical transforms, and give WhatsApp / Call / Telegram
   the exact same button and icon-plate background treatment. */
.contact-quick{
  aspect-ratio:746/132;
  padding:3px 0;
  box-sizing:border-box;
}
.contact-quick__grid{
  width:63%;
  height:calc(100% - 6px);
  align-items:stretch;
  transform:none;
}
.contact-quick__item{
  height:100%;
  grid-template-columns:1fr;
  grid-template-rows:minmax(29px,1fr) auto;
  place-items:center;
  align-content:center;
  justify-items:center;
  gap:2px;
  padding:3px 4px 5px;
  box-sizing:border-box;
  border-radius:10px;
  background:linear-gradient(145deg,#fff 0%,#f5f8fb 100%);
}
.contact-quick__item[data-whatsapp-link]::before,
.contact-quick__item[data-phone-link]::before,
.contact-quick__item[data-telegram-link]::before{
  background:linear-gradient(145deg,#fff 0%,#f5f8fb 100%);
  border-color:#e2e9f1;
}
.contact-quick__item[data-whatsapp-link] img,
.contact-quick__item[data-phone-link] img,
.contact-quick__item[data-telegram-link] img{
  transform:none;
}
.contact-quick__item span{
  align-self:center;
  justify-self:center;
  margin:0;
  padding:0 0 1px;
  line-height:1.12;
  transform:none;
}
@media(max-width:340px){
  .contact-quick__grid{height:calc(100% - 6px)}
  .contact-quick__item{grid-template-rows:minmax(25px,1fr) auto;gap:1px;padding:2px 2px 4px}
  .contact-quick__item span{font-size:.50rem;line-height:1.08;transform:none}
}

/* Owner final recovery R5 — correction 4 only.
   Expand the Why Outlet card through the usable More-view height on normal mobile
   viewports. The fixed rights bar is deliberately not modified. Very short screens
   retain the prior scroll-safe compact behavior. */
@media(min-height:600px) and (max-width:430px){
  .menu-view[data-menu-view="about"]{overflow-y:hidden}
  .menu-view[data-menu-view="about"] .detail-block--why{
    height:100%;
    min-height:0;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    padding:10px 10px 12px;
  }
  .menu-view[data-menu-view="about"] .why-list{
    flex:1;
    min-height:0;
    grid-template-rows:repeat(14,minmax(0,1fr));
    gap:clamp(4px,.65svh,7px);
  }
  .menu-view[data-menu-view="about"] .why-list p{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3px 8px;
    font-size:clamp(.90rem,2.02svh,1.08rem);
    line-height:1.2;
  }
  .menu-view[data-menu-view="about"] .why-signoff{
    margin-top:clamp(6px,.8svh,10px);
    padding-top:clamp(6px,.75svh,9px);
    gap:clamp(2px,.28svh,4px);
  }
  .menu-view[data-menu-view="about"] .why-signoff p{font-size:clamp(.90rem,1.88svh,1.02rem);line-height:1.25}
  .menu-view[data-menu-view="about"] .why-signoff strong{font-size:clamp(1rem,2.02svh,1.12rem);line-height:1.25}
  .menu-view[data-menu-view="about"] .why-signoff span{font-size:clamp(.88rem,1.78svh,.98rem);line-height:1.22}
  .menu-view[data-menu-view="about"] .about-closing{font-size:clamp(.92rem,1.88svh,1.02rem)!important;margin-top:clamp(4px,.55svh,7px)!important}
}

/* Owner 2026-08-15 — locked four-item correction batch.
   R1: Enlarge only the inner lower quick-contact icon + label groups; keep the
   approved outer frame dimensions unchanged and preserve safe clearance. */
.contact-quick__grid{width:66%}
.contact-quick__item{grid-template-rows:minmax(31px,1fr) auto;gap:2px;padding:3px 4px 4px}
.contact-quick__item::before{width:clamp(30px,8.7vw,37px);height:clamp(30px,8.7vw,37px)}
.contact-quick__item img{width:clamp(22px,6.7vw,29px);height:clamp(22px,6.7vw,29px)}
.contact-quick__item span{font-size:clamp(.58rem,2.55vw,.74rem);line-height:1.08}
@media(max-width:340px){
  .contact-quick__grid{width:66%}
  .contact-quick__item{grid-template-rows:minmax(27px,1fr) auto;gap:1px;padding:2px 2px 3px}
  .contact-quick__item::before{width:27px;height:27px}
  .contact-quick__item img{width:20px;height:20px}
  .contact-quick__item span{font-size:.54rem;line-height:1.04;transform:none}
}

/* R2: No additional rule is required. The verified R5 baseline already gives
   WhatsApp / Call / Telegram identical item and icon-plate backgrounds. */

/* R3: Sales content fits one mobile viewport. Preserve the existing icon/title
   sizes and content; compact only sales-page body typography/spacing, then use
   the available card height so the page does not leave a large dead area. */
@media(max-width:430px){
  .menu-view[data-menu-view="sales"]{padding:8px 10px 12px;overflow-y:hidden}
  .menu-view[data-menu-view="sales"] .detail-block--copy{height:100%;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;padding:12px 12px 11px}
  .menu-view[data-menu-view="sales"] .detail-icon{margin-bottom:6px}
  .menu-view[data-menu-view="sales"] .detail-block h2{margin-bottom:7px}
  .menu-view[data-menu-view="sales"] .detail-copy{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(4px,.62svh,7px)}
  .menu-view[data-menu-view="sales"] .detail-copy p{font-size:clamp(.68rem,1.75svh,.92rem);line-height:1.35}
  .menu-view[data-menu-view="sales"] .sales-warning{margin-top:2px}
  .menu-view[data-menu-view="sales"] .global-closing{margin-top:2px!important;line-height:1.28!important}
}
@media(max-width:350px){.menu-view[data-menu-view="sales"]{bottom:28px}}

/* R4: Shipping content fits one mobile viewport and the in-card "الشحن" title
   is clearly larger. Preserve the existing icon and content; compact only the
   shipping-page body typography/spacing needed for responsive one-screen fit. */
@media(max-width:430px){
  .menu-view[data-menu-view="shipping"]{padding:8px 10px 12px;overflow-y:hidden}
  .menu-view[data-menu-view="shipping"] .detail-block--copy{height:100%;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;padding:12px 12px 11px}
  .menu-view[data-menu-view="shipping"] .detail-icon{margin-bottom:6px}
  .menu-view[data-menu-view="shipping"] .detail-block h2{font-size:clamp(1.55rem,3.4svh,1.8rem);line-height:1.22;margin-bottom:7px}
  .menu-view[data-menu-view="shipping"] .detail-copy{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(4px,.62svh,7px)}
  .menu-view[data-menu-view="shipping"] .detail-copy p{font-size:clamp(.72rem,1.9svh,.96rem);line-height:1.4}
  .menu-view[data-menu-view="shipping"] .global-closing{margin-top:2px!important;line-height:1.28!important}
}
@media(max-width:350px){.menu-view[data-menu-view="shipping"]{bottom:28px}}


/* R2 batch — item 1 only.
   Sales page: enlarge body copy slightly and distribute the content vertically
   to reduce excessive white space while keeping one-screen fit on supported
   mobile viewports. */
@media(max-width:430px){
  .menu-view[data-menu-view="sales"] .detail-block--copy{padding:12px 12px 12px}
  .menu-view[data-menu-view="sales"] .detail-block h2{margin-bottom:8px}
  .menu-view[data-menu-view="sales"] .detail-copy{justify-content:space-evenly;gap:clamp(6px,.78svh,11px)}
  .menu-view[data-menu-view="sales"] .detail-copy p{font-size:clamp(.75rem,1.92svh,1rem);line-height:1.46}
  .menu-view[data-menu-view="sales"] .global-closing{margin-top:4px!important;line-height:1.24!important}
}
@media(max-width:350px){
  .menu-view[data-menu-view="sales"] .detail-copy{gap:clamp(4px,.62svh,8px)}
  .menu-view[data-menu-view="sales"] .detail-copy p{font-size:clamp(.71rem,1.68svh,.90rem);line-height:1.4}
}


/* R2 batch — item 2 only.
   Shipping page: enlarge the copy slightly and distribute the paragraphs more
   evenly through the available card height while preserving one-screen fit. */
@media(max-width:430px){
  .menu-view[data-menu-view="shipping"] .detail-block--copy{padding:12px 12px 12px}
  .menu-view[data-menu-view="shipping"] .detail-block h2{font-size:clamp(1.6rem,3.52svh,1.9rem);margin-bottom:8px}
  .menu-view[data-menu-view="shipping"] .detail-copy{justify-content:space-evenly;gap:clamp(6px,.78svh,11px)}
  .menu-view[data-menu-view="shipping"] .detail-copy p{font-size:clamp(.77rem,2.02svh,1.02rem);line-height:1.48}
  .menu-view[data-menu-view="shipping"] .global-closing{margin-top:4px!important;line-height:1.24!important}
}
@media(max-width:350px){
  .menu-view[data-menu-view="shipping"] .detail-copy{gap:clamp(4px,.62svh,8px)}
  .menu-view[data-menu-view="shipping"] .detail-copy p{font-size:clamp(.73rem,1.74svh,.92rem);line-height:1.42}
}


/* R2 batch — item 3 only.
   Main More-menu typography: enlarge the title and the primary list item labels
   slightly, while keeping the title visually larger than the list entries. */
.more-panel__title{font-size:1.42rem}
.menu-view[data-menu-view="main"] .menu-item{font-size:1.17rem}
@media(max-width:350px){
  .more-panel__title{font-size:1.34rem}
  .menu-view[data-menu-view="main"] .menu-item{font-size:1rem}
}
@media(max-height:760px) and (max-width:430px){
  .menu-view[data-menu-view="main"] .menu-item{font-size:clamp(.87rem,4.08vw,1.03rem)}
}


/* Owner correction R3 — item 2 only: make the three lower quick-contact button
   plates visually identical regardless of which item is first in DOM order. */
.contact-quick__item{border-left:1px solid #9fb0c4}