:root{
  --p:#D3C2EE;--p-deep:#6A4FA3;--p-soft:#B9A2E3;--tint:#FCFAFE;--tint-2:#F1EAFA;--lilac:#D9CCEF;
  --ink:#3A3542;--muted:#746C80;--line:#ECE6F3;--card:#FFFFFF;--red:#BF3B78;--wa:#1FAF5A;--star:#F2B01E;
  --ok:#2E7D5B;--ok-bg:#E6F4EC;--warn:#8A5A00;--warn-bg:#FFF4D6;--err:#B23A3A;--err-bg:#FBEAEA;
  
  --wine:var(--p);--wine-deep:var(--p-deep);--wine-soft:var(--p-soft);--blush:var(--tint-2);--rose:var(--lilac);--gold:var(--star);--gold-light:#F7E3A8;--cream:var(--tint);
  
  --display:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--body:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1180px;--top:96px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--tint);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
#root{font-family:var(--body);min-height:100dvh;background:var(--tint);overflow-x:clip}
#root.rv{--top:58px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
a{color:var(--p-deep)}
:focus-visible{outline:3px solid var(--p-soft);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.annc{background:#fff;color:var(--ink);font-size:13px;font-weight:400;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);height:34px;display:flex;align-items:center}
.annc .track{display:flex;flex:none;width:max-content;animation:mq 34s linear infinite}
.annc .track span{padding-inline:20px}
#root[dir="rtl"] .annc .track{animation-name:mqr}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes mqr{to{transform:translateX(50%)}}
.sh{position:sticky;top:0;z-index:30;background:var(--p);color:var(--on-p);box-shadow:0 8px 20px -14px rgba(106,79,163,.8)}
.sh .in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:8px 10px;min-height:62px}
.side{display:flex;align-items:center;gap:2px}
.side.end{justify-content:flex-end}
.ic{position:relative;width:42px;height:42px;border:0;background:none;color:inherit;display:grid;place-items:center;border-radius:50%;flex:none;padding:0}
.ic:hover{background:rgba(255,255,255,.14)}
.cnt{position:absolute;top:1px;inset-inline-end:-1px;min-width:19px;height:19px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:600;font-style:normal;display:grid;place-items:center;padding:0 5px;line-height:1;border:1.5px solid var(--p)}
.logo{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:#fff;text-align:start}
.logo .wm{display:grid;line-height:1}
.logo .wm b{font-size:19.8px;font-weight:600;letter-spacing:.01em}
.logo .wm small{font-size:10px;font-weight:400;opacity:.86;margin-top:4px;white-space:nowrap}
#root[lang="en"] .logo .wm small{letter-spacing:.14em;text-transform:uppercase;font-size:9px}
.dnav{display:none}
.rbar{background:var(--p);color:var(--on-p);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;min-height:58px}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.langsw button,.langsw a{border:0;background:transparent;font-size:13px;padding:6px 12px;min-height:36px;color:var(--muted);font-weight:400}
.langsw button.on,.langsw a.on{background:var(--p);color:var(--on-p)}
.dark .langsw,.rbar .langsw{border-color:rgba(255,255,255,.35);background:transparent}
.dark .langsw button,.rbar .langsw button,.dark .langsw a,.rbar .langsw a{color:#fff}
.dark .langsw button.on,.rbar .langsw button.on,.dark .langsw a.on,.rbar .langsw a.on{background:#fff;color:var(--p-deep)}
.sh .langsw{border:0;background:none;border-radius:0}
.sh .langsw button,.sh .langsw a{color:#fff;font-weight:600;font-size:13px;min-height:42px;padding:0 8px}
.sh .langsw button.on,.sh .langsw a.on{display:none}
.phone{max-width:var(--wrap);margin:0 auto;min-height:calc(100dvh - var(--top));display:flex;flex-direction:column;position:relative}
.screen{display:flex;flex-direction:column;flex:1;width:100%}
.screen:not(.w){max-width:560px;margin-inline:auto}
.pad{padding:0 16px}
#root.has-bnav .screen:not([data-screen="landing"]){padding-bottom:78px}
.hsl{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 16px 4px;scrollbar-width:none}
.hsl::-webkit-scrollbar{display:none}
.slide{position:relative;flex:none;width:88%;min-height:452px;scroll-snap-align:center;border-radius:18px;overflow:hidden;color:var(--on-p);background:var(--grad);padding:22px 20px 0;display:flex;flex-direction:column;align-items:flex-start;isolation:isolate}
.slide::before{content:"";position:absolute;z-index:-1;inset-inline-end:-80px;top:-80px;width:250px;height:250px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 0 0 28px rgba(255,255,255,.05),0 0 0 60px rgba(255,255,255,.03)}
.slide .tag{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:2px 12px;margin:0 0 10px}
.slide h1,.slide h3{font-size:24.9px;font-weight:600;line-height:1.3;margin:0 0 8px;text-wrap:balance}
.slide p{margin:0 0 14px;font-size:14px;line-height:1.7;color:#4A3A63;max-width:31ch}
.slide .cta{display:flex;gap:8px;flex-wrap:wrap}
.slide .btn{width:auto;height:46px;padding:0 22px;font-size:14.5px;background:#fff;color:var(--p-deep)}
.slide .btn:hover{background:var(--tint-2)}
.slide .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);height:46px}
.slide .btn.ghost:hover{background:rgba(255,255,255,.12)}
.slide .big{font-size:74px;font-weight:600;line-height:.95;color:#fff;text-shadow:3px 3px 0 var(--p);direction:ltr;margin:2px 0 4px}
.slide .art{margin-top:auto;align-self:stretch;display:flex;justify-content:center;align-items:flex-end;gap:10px;padding-top:16px}
.slide .art img{width:54%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0;border:3px solid #fff;border-bottom:0;background:var(--tint-2)}
.slide .art img:first-child:not(:only-child){width:40%}
.slide .art img:not(:first-child){width:27%;aspect-ratio:4/5.4;opacity:.96}
.slide.lt{background:linear-gradient(160deg,#E6F8F5 0%,#BFECE6 100%);color:var(--p-deep)}
.slide.lt::before{border-color:rgba(106,79,163,.16);box-shadow:0 0 0 28px rgba(106,79,163,.05),0 0 0 60px rgba(106,79,163,.03)}
.slide.lt .tag{background:#fff;border-color:var(--lilac)}
.slide.lt p{color:#2C5552}
.slide.lt .btn{background:var(--p);color:var(--on-p)}
.slide.lt .btn:hover{background:var(--p-deep)}
.slide.dk{background:linear-gradient(160deg,#D2588F 0%,#AE2F68 100%)}
.dots{display:flex;justify-content:center;gap:6px;padding:8px 0 0}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--lilac);transition:all .2s}
.dots i.on{width:20px;background:var(--p)}
.hero{position:relative;overflow:hidden;background:var(--grad);color:var(--on-p);padding:28px 20px 26px;border-radius:0 0 24px 24px;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset-inline-end:-80px;top:-80px;width:250px;height:250px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 0 0 28px rgba(255,255,255,.05),0 0 0 60px rgba(255,255,255,.03)}
.hero h1{font-weight:600;font-size:18px;line-height:1.3;margin:0 0 8px;text-wrap:balance}
.hero p{margin:0;font-size:14px;color:#4A3A63;max-width:34ch}
.hero .eyebrow{display:inline-block;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:2px 12px;margin:0 0 10px}
.hero.small{padding:24px 20px}
.hero.small h1{font-size:18px}
.hero .quote{margin:14px 0 0;padding:12px 14px;border-inline-start:3px solid #fff;background:rgba(255,255,255,.1);border-radius:10px;font-size:14px;color:#fff;max-width:none}
.trio{display:flex;margin:22px 0 0;padding-inline-start:6px}
.trio:empty{display:none}
.trio img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);margin-inline-start:-14px;background:#fff}
.trio img:first-child{margin-inline-start:0}
.trio img:nth-child(2){transform:translateY(-8px)}
.guar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px 0}
.guar > div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;font-size:13px;font-weight:600;line-height:1.45;color:var(--p-deep)}
.guar i{width:34px;height:34px;border-radius:50%;background:var(--tint-2);color:var(--p-deep);display:grid;place-items:center;font-style:normal}
.sec-h{padding:30px 16px 2px;text-align:center;scroll-margin-top:70px}
.sec-h h2{font-size:16px;font-weight:600;color:var(--p-deep);line-height:1.35;margin:0;text-wrap:balance}
.sec-h h2::after{content:"";display:block;width:136px;height:14px;margin:6px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136 14'%3E%3Cpath d='M3 8.6C29 3.4 62 3 89 6.2c14.5 1.7 29 1.6 44-1.8' fill='none' stroke='%23BF3B78' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M24 11.6c23-2.7 49-2.9 76-.6' fill='none' stroke='%2381D8D0' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sec-h p{margin:8px auto 0;color:var(--muted);font-size:13.5px;line-height:1.7;max-width:48ch}
.shelfwrap{position:relative}
.shelf{display:flex;gap:12px;overflow-x:auto;padding:14px 16px 6px;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.shelf > *{scroll-snap-align:start;flex:none}
.shelf .pcard{width:166px}
.sbar{position:relative;height:3px;background:var(--line);margin:10px 16px 0;border-radius:2px}
.sbar i{position:absolute;top:0;height:100%;width:30%;inset-inline-start:0;background:var(--p);border-radius:2px}
.sarr{display:none}
.viewall{display:flex;align-items:center;gap:12px;padding:14px 16px 0}
.viewall::before,.viewall::after{content:"";flex:1;height:1px;background:var(--line)}
.viewall button,.viewall a{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--p);background:transparent;color:var(--p-deep);font-weight:600;font-size:13.5px;height:42px;padding:0 18px;border-radius:8px}
.viewall button:hover,.viewall a:hover{background:var(--p);color:var(--on-p)}
#root[dir="ltr"] .flip{transform:scaleX(-1)}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .15s,border-color .15s,opacity .2s}
.pcard .img{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pcard .img img{aspect-ratio:1;object-fit:cover;width:100%;background:var(--tint-2)}
.pcard .rib{position:absolute;top:0;inset-inline-start:0;background:var(--red);color:#fff;font-size:11.5px;font-weight:600;padding:3px 10px 2px;border-end-end-radius:10px;line-height:1.6}
.pcard .zoom{position:absolute;top:8px;inset-inline-end:8px;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--p-deep);display:grid;place-items:center;box-shadow:0 2px 8px rgba(40,34,50,.18)}
.pcard .badge{position:absolute;bottom:8px;inset-inline-start:8px;width:28px;height:28px;border-radius:50%;background:var(--p);color:var(--on-p);display:grid;place-items:center;border:2px solid #fff;opacity:0;transform:scale(.6);transition:all .15s}
.pcard[aria-selected="true"] .badge{opacity:1;transform:scale(1)}
.pcard[aria-selected="true"]{border-color:var(--p);box-shadow:0 0 0 2px var(--p)}
.pcard .meta{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;text-align:center;flex:1}
.pcard .nm{font-size:13px;font-weight:600;color:var(--p-deep);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.pcard .pr{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pick{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;padding:6px 8px;border:0;background:var(--p);color:var(--on-p);font-size:13px;font-weight:600;transition:background .15s}
.pick:hover{background:var(--p-deep)}
.pick .t-add,.pick .t-on{display:inline-flex;align-items:center;gap:6px}
.pick .t-on{display:none}
.pcard[aria-selected="true"] .pick{background:var(--tint-2);color:var(--p-deep)}
.pcard[aria-selected="true"] .pick .t-on{display:inline-flex}
.pcard[aria-selected="true"] .pick .t-add{display:none}
.pcard.full{opacity:.45}
.pcard.full .pick{cursor:not-allowed}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px 8px}
.grid .empty{grid-column:1/-1}
.screen.w .grid{padding-bottom:120px}
.pcs{display:grid;grid-template-columns:1fr 1fr;gap:18px 8px;padding:18px 16px 0;justify-items:center}
.pc{background:none;border:0;padding:0;display:grid;justify-items:center;gap:8px;color:var(--p-deep)}
.pc .o{width:136px;height:136px;border-radius:50%;border:1.5px solid var(--lilac);background:#fff;display:grid;place-content:center;justify-items:center;line-height:1.15;transition:all .15s;box-shadow:0 12px 26px -20px rgba(106,79,163,.6)}
.pc:hover .o,.pc[aria-pressed="true"] .o{border-color:var(--p);box-shadow:0 0 0 4px var(--tint-2)}
.pc .o small{font-size:12.5px;font-weight:400;color:var(--muted)}
.pc .o b{font-size:34.4px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.05}
.pc .cap{display:grid;justify-items:center;font-size:13px;font-weight:600;line-height:1.5}
.pc .cap small{font-size:12px;font-weight:400;color:var(--muted)}
.info{margin:16px 16px 0;padding:12px 14px;border-radius:12px;background:var(--tint-2);font-size:13px;line-height:1.7;color:var(--p-deep);text-align:center}
.cattile{width:132px;background:none;border:0;padding:0;display:grid;justify-items:center;gap:6px;color:var(--p-deep);text-align:center}
.cattile img{width:132px;height:158px;object-fit:cover;border-radius:70px 70px 14px 14px;border:1px solid var(--line);background:var(--tint-2);transition:transform .2s}
.cattile:hover img{transform:translateY(-3px)}
.cattile b{font-size:14px;font-weight:600;line-height:1.4}
.cattile small{font-size:12px;color:var(--muted);margin-top:-4px}
.occtile{width:98px;background:none;border:0;padding:0;display:grid;justify-items:center;gap:8px;color:var(--p-deep);text-align:center}
.occtile img{width:92px;height:92px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--lilac);background:var(--tint-2);transition:transform .2s}
.occtile:hover img{transform:scale(1.04)}
.occtile b{font-size:13.5px;font-weight:600}
.steps3{display:grid;gap:10px;padding:16px 16px 0}
.step{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.step i{width:48px;height:48px;border-radius:50%;background:var(--p);color:var(--on-p);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:18.9px}
.step b{display:block;font-size:14.5px;color:var(--p-deep);line-height:1.45}
.step span{color:var(--muted);font-size:13px;line-height:1.6}
.why{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 16px 0}
.why > div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 10px;display:grid;justify-items:center;gap:8px;text-align:center;align-content:start}
.why i{width:44px;height:44px;border-radius:50%;background:var(--tint-2);color:var(--p-deep);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:16.2px}
.why b{display:block;font-size:14px;color:var(--p-deep);line-height:1.4}
.why span{color:var(--muted);font-size:13px;line-height:1.6}
.faq{padding:16px 16px 0;max-width:760px;margin:0 auto;width:100%}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 14px;margin:0 0 8px}
.faq summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--p-deep);padding:13px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--p-deep);font-size:18.9px;line-height:1;flex:none;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0;padding:0 0 13px;color:var(--muted);font-size:13.5px;line-height:1.75}
.band{position:relative;overflow:hidden;isolation:isolate;margin:28px 16px 0;background:var(--grad);color:var(--on-p);border-radius:18px;padding:26px 18px;text-align:center}
.band::before{content:"";position:absolute;z-index:-1;inset-inline-end:-70px;top:-90px;width:230px;height:230px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 0 0 26px rgba(255,255,255,.05),0 0 0 56px rgba(255,255,255,.03)}
.band h3{font-size:16px;font-weight:600;margin:0 0 4px}
.band p{margin:0 0 16px;color:#4A3A63;font-size:14px}
.band .btn{max-width:320px;margin:0 auto}
.hero .btn.gold,.band .btn.gold,.sitecard .btn.gold,.lb .btn.gold{background:#fff;color:var(--p-deep)}
.hero .btn.gold:hover,.band .btn.gold:hover,.sitecard .btn.gold:hover,.lb .btn.gold:hover{background:var(--tint-2)}
.lb .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sfoot{margin:32px calc(50% - 50vw) 0;padding:28px calc(50vw - 50% + 16px) 22px;background:var(--p);color:#5B4A63;font-size:13.5px}
#root.has-bnav .sfoot{padding-bottom:96px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
.fgrid .fb{grid-column:1/-1}
.sfoot .about{margin:12px 0 0;line-height:1.85;font-size:14px;color:#4A3A63;max-width:52ch}
.sfoot h5{margin:0 0 6px;color:#fff;font-size:14px;font-weight:600}
.sfoot .fl a,.sfoot .fl button,.sfoot .fl > span{display:block;color:#5B4A63;text-decoration:none;background:none;border:0;padding:4px 0;font-size:13.5px;text-align:start;cursor:pointer}
.sfoot .fl > span{cursor:default}
.sfoot .fl a:hover,.sfoot .fl button:hover{color:#fff;text-decoration:underline}
.pays{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;background:#fff;border-radius:12px;padding:10px;margin:20px 0 0}
.pays span{border:1px solid var(--line);border-radius:8px;padding:3px 12px;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.7}
.pays .sec{border:0;margin:0;padding:3px 6px;color:var(--muted);font-weight:400}
.sfoot .copy{border-top:1px dashed rgba(255,255,255,.3);padding-top:14px;margin:18px 0 0;font-size:12.5px;color:#746C80;text-align:center}
.sfoot .copy a{display:inline;margin:0 4px;color:#746C80;font-size:12.5px}
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:28;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:5px 4px calc(5px + env(safe-area-inset-bottom));box-shadow:0 -10px 26px -20px rgba(106,79,163,.7)}
.bnav button,.bnav a{position:relative;border:0;background:none;display:grid;justify-items:center;align-content:center;gap:1px;padding:4px 0;color:var(--ink);font-size:12px;font-weight:400;min-height:52px}
.bnav button.on,.bnav a.on{color:var(--p-deep);font-weight:600}
.bnav .cnt{top:0;inset-inline-end:auto;inset-inline-start:calc(50% + 2px);border-color:#fff}
.fabwrap{position:fixed;bottom:0;left:0;right:0;z-index:25;pointer-events:none}
.fabwrap .in{max-width:var(--wrap);margin:0 auto;position:relative;height:0}
.wafab{position:absolute;bottom:96px;inset-inline-end:14px;pointer-events:auto;width:52px;height:52px;border-radius:50%;border:0;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(20,110,60,.8)}
.wafab:hover{filter:brightness(.94)}
.menu{position:fixed;inset:0;z-index:58;background:rgba(40,34,50,.55);display:flex}
.menu .in{width:min(84vw,330px);background:#fff;height:100%;overflow:auto;display:flex;flex-direction:column;animation:slin .2s ease}
@keyframes slin{from{opacity:.4;transform:translateX(24px)}to{opacity:1;transform:none}}
#root[dir="ltr"] .menu .in{animation-name:slinl}
@keyframes slinl{from{opacity:.4;transform:translateX(-24px)}to{opacity:1;transform:none}}
.menu .mh{background:var(--p);color:var(--on-p);display:flex;align-items:center;justify-content:space-between;padding:10px 14px;min-height:62px}
.menu .mh .ic{font-size:24.1px;line-height:1}
.menu .ml{display:grid}
.menu .ml button,.menu .ml a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border:0;border-bottom:1px solid var(--line);background:none;text-align:start;font-size:14px;font-weight:400;color:var(--ink);text-decoration:none}
.menu .ml button:hover,.menu .ml a:hover{background:var(--tint);color:var(--p-deep)}
.menu .ml h6{margin:0;padding:14px 18px 6px;font-size:12.5px;color:var(--muted);font-weight:600;background:var(--tint)}
.menu .mf{margin-top:auto;padding:16px 18px 22px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:14px 16px 0;font-size:13px;color:var(--muted)}
.crumbs button,.crumbs a{background:none;border:0;padding:0;color:var(--muted);font-size:13px}
.crumbs button:hover,.crumbs a:hover{color:var(--p-deep);text-decoration:underline}
.crumbs i{font-style:normal;opacity:.6}
.crumbs i::before{content:"‹"}
#root[dir="ltr"] .crumbs i::before{content:"›"}
.crumbs span{color:var(--p-deep);font-weight:600}
.topbar{display:flex;align-items:center;gap:12px;padding:16px 16px 6px}
.back{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--p-deep);flex:none}
#root[lang="en"] .back svg{transform:scaleX(-1)}
.stepwrap{flex:1}
.steptext{font-size:13px;color:var(--muted);font-weight:400;margin:0 0 6px}
.stepbar{height:5px;border-radius:5px;background:var(--line);overflow:hidden}
.stepbar i{display:block;height:100%;background:var(--p);border-radius:5px;transition:width .35s ease}
.title{padding:10px 16px 4px}
.title h2{font-size:18px;font-weight:600;line-height:1.35;margin:0;color:var(--p-deep);text-wrap:balance}
.title p{margin:4px 0 0;color:var(--muted);font-size:14px}
.ctabar{position:sticky;bottom:0;margin-top:auto;padding:12px 16px 16px;background:linear-gradient(to top,var(--tint) 72%,rgba(252,250,254,0))}
.btn{width:100%;height:52px;border:0;border-radius:12px;background:var(--p);color:var(--on-p);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background .15s,transform .1s}
.btn:hover{background:var(--p-deep)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--lilac);color:#fff;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--p-deep);border:1.5px solid var(--lilac);height:48px;font-size:14px}
.btn.ghost:hover{background:var(--tint);border-color:var(--p)}
.btn.sm{height:40px;font-size:13.5px;border-radius:10px}
.btn.inline{width:auto;height:38px;font-size:13px;padding:0 14px;border-radius:10px}
.btn.danger{background:#fff;color:var(--err);border:1.5px solid #F1C7C2}
.btn.danger:hover{background:var(--err-bg)}
.actions{display:grid;gap:10px;padding:14px 16px 22px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.chips{display:flex;gap:8px;padding:12px 16px 2px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex:none;min-height:42px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 18px;font-size:13.5px;font-weight:600;color:var(--p-deep)}
.chips .chip.on{background:var(--p);border-color:var(--p);color:var(--on-p)}
.tray{position:fixed;bottom:0;left:0;right:0;z-index:20;pointer-events:none}
.tray .in{max-width:760px;margin:0 auto;padding:10px 12px calc(12px + env(safe-area-inset-bottom));pointer-events:auto}
.tray .box{background:var(--p-deep);color:#fff;border-radius:14px;padding:10px 14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;box-shadow:0 18px 40px -16px rgba(40,34,50,.75)}
.tray .box small{display:block;color:#FFE1EC;font-size:12.5px}
.tray .box b{font-size:15px;font-variant-numeric:tabular-nums}
.tray .box .dep{color:#fff}
.tray .box button.how{background:none;border:0;color:#FFE1EC;font-size:12px;text-decoration:underline;padding:0}
.tray .go{height:46px;border:0;border-radius:10px;background:#fff;color:var(--p-deep);font-weight:600;padding:0 20px;font-size:14px}
.tray .go:disabled{background:rgba(255,255,255,.16);color:rgba(255,255,255,.55);cursor:not-allowed}
.form{display:grid;gap:16px;padding:14px 16px 8px}
.field{display:grid;gap:6px}
.field label{font-size:13.5px;font-weight:600;color:var(--p-deep)}
.field .hint{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.field input,.field textarea{width:100%;min-height:50px;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 4px rgba(106,79,163,.13)}
.field input[type="tel"],.field input[type="url"]{direction:ltr;text-align:left;font-variant-numeric:tabular-nums}
.field .err{display:none;font-size:13px;color:var(--err);margin:0}
.field.invalid input,.field.invalid textarea{border-color:var(--err);background:var(--err-bg)}
.field.invalid .err{display:block}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 10px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:13.5px;font-weight:600;text-align:center;transition:all .15s;color:var(--ink)}
.seg input:checked + span{background:var(--p);border-color:var(--p);color:var(--on-p)}
.seg input:disabled + span{color:#B3AABF;background:#F3EFF7;text-decoration:line-through;cursor:not-allowed}
.seg.three{grid-template-columns:1fr 1fr 1fr}
.wrapchips{display:flex;flex-wrap:wrap;gap:8px}
.wrapchips label{position:relative}
.wrapchips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.wrapchips span{display:inline-flex;align-items:center;min-height:38px;padding:4px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;font-weight:400}
.wrapchips input:checked + span{background:var(--tint-2);border-color:var(--p);color:var(--p-deep);font-weight:600}
.otp{display:flex;gap:10px;direction:ltr;justify-content:center}
.otp input{width:56px;height:60px;text-align:center;font-size:18px;font-weight:600;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-variant-numeric:tabular-nums}
.otp input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 4px rgba(106,79,163,.13)}
.loc{display:flex;gap:8px;align-items:center}
.loc .btn{height:50px;font-size:13.5px;flex:1}
.locok{margin:0;font-size:13px;color:var(--ok);background:var(--ok-bg);border-radius:10px;padding:8px 12px}
.notice{margin:0 16px;padding:12px 14px;border-radius:12px;background:var(--warn-bg);border:1.5px solid #F1DFA9;font-size:13px;line-height:1.7;color:var(--warn)}
.notice b{color:var(--ink)}
.picked{display:flex;align-items:center;gap:12px;margin:12px 16px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.picked img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.picked small{display:block;color:var(--muted);font-size:12px}
.picked b{font-size:14px;color:var(--p-deep)}
.card{margin:14px 16px 0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card .head{padding:12px 14px;background:var(--tint-2);color:var(--p-deep);font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.card .head small{font-weight:400;color:var(--muted)}
.rows{display:grid}
.rows > div{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:13.5px;align-items:center}
.rows > div:first-child{border-top:0}
.rows span{color:var(--muted)}
.rows b{font-variant-numeric:tabular-nums}
.rows .total{background:var(--tint)}
.rows .total b{font-size:18px;color:var(--p-deep)}
.rows .total span{color:var(--p-deep);font-weight:600}
.thumbs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px}
.thumbs img{width:46px;height:46px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.pay-methods{display:grid;gap:8px;padding:12px 14px}
.pay-methods label{position:relative}
.pay-methods input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pay-methods span{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;font-weight:600;font-size:13.5px}
.pay-methods span span{border:0;padding:0;min-height:0}
.pay-methods span i{width:44px;height:26px;border-radius:6px;background:var(--ink);color:#fff;font-style:normal;font-size:10px;display:grid;place-items:center;font-weight:600;letter-spacing:.02em}
.pay-methods span i.mada{background:#0B5F58}
.pay-methods span i.card{background:#3B3B4A}
.pay-methods input:checked + span{border-color:var(--p);background:var(--tint)}
.policy{margin:12px 16px 0;font-size:13px;color:var(--muted);line-height:1.75}
.policy b{color:var(--ink)}
.secure{display:flex;justify-content:center;gap:6px;align-items:center;font-size:12px;color:var(--muted);padding:8px 16px 0;margin:0}
.done{padding:30px 16px 6px;text-align:center}
.done .mark{width:72px;height:72px;border-radius:50%;margin:0 auto 14px;background:var(--p);display:grid;place-items:center;color:var(--on-p);box-shadow:0 0 0 8px var(--tint-2)}
.done h2{font-size:18px;font-weight:600;color:var(--p-deep);margin:0 0 6px;text-wrap:balance}
.done p{margin:0 auto;color:var(--muted);max-width:36ch;font-size:14px}
.timeline{margin:14px 16px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:0}
.tl{display:grid;grid-template-columns:22px 1fr;gap:10px;position:relative;padding:0 0 14px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;inset-inline-start:10px;top:22px;bottom:-2px;width:2px;background:var(--line)}
.tl:last-child::before{display:none}
.tl i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;color:#fff;font-style:normal;z-index:1}
.tl.done i{background:var(--p);border-color:var(--p)}
.tl.now i{border-color:var(--p);background:#fff;box-shadow:0 0 0 4px var(--tint-2)}
.tl.now i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--p)}
.tl b{display:block;font-size:13.5px}
.tl.future b{color:var(--muted);font-weight:400}
.tl small{color:var(--muted);font-size:12px;display:block}
.tl.now b{color:var(--p-deep)}
.msgcard{margin:14px 16px 0;background:#F1F8F1;border:1px solid #D5E6D3;border-radius:12px;padding:12px 14px}
.msgcard .who{font-size:12px;color:var(--muted);margin:0 0 6px;display:flex;justify-content:space-between}
.msgcard pre{margin:0;white-space:pre-wrap;font:inherit;font-size:13.5px;line-height:1.75;background:#fff;border-radius:10px;padding:10px 12px;border:1px solid #E1EBDC}
.simbox{margin:16px 16px 0;padding:12px 14px;border:1.5px dashed var(--lilac);border-radius:12px;background:#fff}
.simbox h4{margin:0 0 4px;font-size:13px;color:var(--p-deep)}
.simbox p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.simbox .row{display:grid;gap:8px}
.status{margin:14px 16px 0;padding:12px 14px;border-radius:12px;background:var(--tint-2);font-size:13.5px;line-height:1.7}
.status.ok{background:var(--ok-bg);color:#1E5C3A}
.status.warn{background:var(--warn-bg);color:var(--warn)}
.fineprint{padding:10px 16px 24px;font-size:13px;color:var(--muted);line-height:1.7}
.center{padding:60px 24px;text-align:center;color:var(--muted)}
.center h2{color:var(--p-deep);font-size:18px;font-weight:600;margin:0 0 8px}
.sitecard{position:relative;overflow:hidden;isolation:isolate;margin:18px 16px 26px;background:var(--grad);color:var(--on-p);border-radius:18px;padding:22px 18px;text-align:center;display:grid;justify-items:center}
.sitecard::before{content:"";position:absolute;z-index:-1;inset-inline-end:-70px;top:-90px;width:230px;height:230px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 0 0 26px rgba(255,255,255,.05),0 0 0 56px rgba(255,255,255,.03)}
.sitecard h3{font-size:16px;font-weight:600;margin:12px 0 4px}
.sitecard p{margin:0 0 14px;color:#4A3A63;font-size:13.5px;line-height:1.7}
.linkbar{background:var(--tint-2);color:var(--p-deep);font-size:12px;padding:6px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.linkbar .sp{flex:1}
.empty{padding:40px 24px;text-align:center;color:var(--muted)}
.lb{position:fixed;inset:0;background:rgba(28,20,36,.95);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 16px 24px}
.lb-x{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:24.1px;line-height:1;display:grid;place-items:center}
.lb img{max-width:min(92vw,520px);max-height:60vh;border-radius:14px;object-fit:contain;background:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.lb-name{color:#fff;font-size:17.1px;font-weight:600;margin:14px 0 2px;text-align:center}
.lb-price{color:#EDE4F8;font-size:14px;margin:0 0 14px;font-variant-numeric:tabular-nums}
.lb .btn{max-width:420px}
.sheet{position:fixed;inset:0;background:rgba(40,34,50,.55);z-index:55;display:flex;align-items:flex-end;justify-content:center}
.sheet .in{width:100%;max-width:480px;background:#fff;border-radius:20px 20px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom));max-height:86vh;overflow:auto}
.sheet h3{font-size:17px;font-weight:600;color:var(--p-deep);margin:0 0 6px}
.sheet p{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.7}
.sheet .rows{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:8px 0}
.sheet .in > .btn{margin-top:8px}
.bagl{display:grid;gap:8px;margin:10px 0}
.bagi{display:grid;grid-template-columns:54px 1fr 36px;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:6px}
.bagi img{width:54px;height:54px;border-radius:8px;object-fit:cover}
.bagi b{font-size:13px;line-height:1.4;display:block;color:var(--p-deep)}
.bagi small{color:var(--muted);font-size:12.5px}
.bagi .rm{width:36px;height:36px;border-radius:50%;border:0;background:var(--tint);color:var(--muted);font-size:18.9px;display:grid;place-items:center;line-height:1;padding:0}
.bagi .rm:hover{background:var(--err-bg);color:var(--err)}
.toast{position:fixed;bottom:88px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:all .25s;z-index:70;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--err)}
.spin{width:22px;height:22px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.orders{display:grid;gap:12px;padding:14px 16px 30px}
.ocard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:6px;text-align:start}
.ocard:hover{border-color:var(--p)}
.ocard .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ocard b{font-size:14px;color:var(--p-deep)}
.ocard small{color:var(--muted);font-size:12px}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--tint-2);color:var(--p-deep);white-space:nowrap}
.chip.awaiting_recipient{background:var(--warn-bg);color:var(--warn)}
.chip.awaiting_balance{background:#FFE7D6;color:#8A3B00}
.chip.preparing{background:var(--tint-2);color:var(--p-deep)}
.chip.out{background:#E4E8F7;color:#2B3A80}
.chip.delivered{background:var(--ok-bg);color:#1E5C3A}
.chip.expired,.chip.cancelled{background:#EEE;color:#777}
.chip.new{background:var(--red);color:#fff}
.wide{max-width:1080px;margin:0 auto;padding:16px 16px 40px}
.abar{background:var(--p-deep);color:#fff}
.abar .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap}
.abar b{font-size:17.1px;font-weight:600}
.abar b span{color:#EDE4F8}
.abar .sp{flex:1}
.abar .lnk{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:5px 10px;font-size:12px}
.abar select{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;border-radius:8px;padding:5px 8px;font-size:13px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0 0 14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat b{display:block;font-size:20.6px;line-height:1.3;color:var(--p-deep);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 14px}
.panel h3{margin:0 0 10px;font-size:14px;color:var(--p-deep)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.filters button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;font-size:12px}
.filters button.on{border-color:var(--p);background:var(--tint-2);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
th{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--tint)}
.tw{overflow-x:auto}
.ltr{direction:ltr;unicode-bidi:embed;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}
.kv span{color:var(--muted)}
.kv:last-child{border-bottom:0}
.sec{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0}
.sec h4{margin:0 0 6px;font-size:13px;color:var(--muted);font-weight:600}
.vcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 12px;display:grid;gap:8px}
.vcard.new{border-color:var(--p);box-shadow:0 0 0 3px var(--tint-2)}
.vcard .h{display:flex;gap:12px;align-items:center}
.vcard .h img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.vcard .h b{font-size:14px;display:block;color:var(--p-deep)}
.vcard .h small{color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;direction:ltr;unicode-bidi:embed;background:var(--tint-2);padding:2px 6px;border-radius:6px}
.doc{padding:6px 16px 30px}
.doc h3{font-size:15px;margin:18px 0 4px;color:var(--p-deep)}
.doc p{margin:0 0 8px;color:#463E52;font-size:14px;line-height:1.85}
.upd{color:var(--muted);font-size:13px}
.rate{margin:14px 16px 0;background:#fff;border:1.5px solid var(--star);border-radius:12px;padding:14px;text-align:center;display:grid;gap:10px}
.rate > b{color:var(--p-deep)}
.stars{display:flex;justify-content:center;gap:4px}.rlabel{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--p-deep);margin-top:4px}
.stars button{width:44px;height:44px;border:0;background:none;font-size:25.8px;line-height:1;color:#E0D8EA;padding:0}
.stars button.on{color:var(--star)}
.rate textarea{width:100%;min-height:70px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.reviews{display:grid;gap:10px;padding:16px 16px 0}
.rev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.rev .st{color:var(--star);letter-spacing:2px;direction:ltr;text-align:start}
.rev p{margin:4px 0;font-size:13.5px;line-height:1.7}
.rev small{color:var(--muted);font-size:13px}
@media (min-width:640px){
  .screen.w .grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .shelf .pcard{width:200px}
  .why{grid-template-columns:repeat(4,1fr)}
  .guar{grid-template-columns:repeat(4,1fr)}
  .reviews{grid-template-columns:repeat(3,1fr)}
  .sheet{align-items:center}
  .sheet .in{border-radius:20px}
}
@media (min-width:900px){
  .annc{justify-content:center}
  .annc .track{animation:none}
  .annc .track span + span{display:none}
  .sh .in{padding:8px 16px}
  .sh .mbtn{display:none}
  .dnav{display:flex;gap:2px;margin-inline-start:6px}
  .dnav button,.dnav a{border:0;background:none;color:#fff;font-size:14px;font-weight:400;padding:8px 12px;border-radius:8px}
  .dnav button:hover,.dnav a:hover{background:rgba(255,255,255,.14)}
  .bnav{display:none}
  #root.has-bnav .sfoot{padding-bottom:22px}
  #root.has-bnav .screen:not([data-screen="landing"]){padding-bottom:30px}
  .hsl{display:grid;grid-template-columns:1.55fr 1fr;grid-auto-rows:minmax(246px,auto);gap:14px;overflow:visible;padding:20px 16px 4px}
  .dots{display:none}
  .slide{width:auto;min-height:0;padding:24px 26px 22px}
  .slide.s1{grid-row:1 / span 2;padding:48px 44px 40px;justify-content:center}
  .slide > :not(.art){max-width:60%}
  .slide.s1 > :not(.art){max-width:52%}
  .slide.s1 h1{font-size:37.8px}
  .slide.s1 p{font-size:15.3px;margin-bottom:22px}
  .slide.s1 .btn{height:52px;padding:0 28px;font-size:15.3px}
  .slide h3{font-size:19.8px}
  .slide:not(.s1) p{font-size:13.5px;margin-bottom:12px}
  .slide:not(.s1) .btn{height:42px;font-size:14px;padding:0 18px}
  .slide .big{font-size:55px}
  .slide .art{position:absolute;bottom:0;inset-inline-end:22px;width:34%;padding:0;margin:0}
  .slide .art img{width:100%}
  .slide.s1 .art{inset-inline-end:36px;width:46%;gap:12px}
  .slide.s1 .art img:first-child:not(:only-child){width:56%}
  .slide.s1 .art img:not(:first-child){width:40%}
  .slide.s1 .art img:nth-child(3){display:none}
  .sec-h{padding-top:44px}
  .sec-h h2{font-size:18px}
  .shelf{gap:16px}
  .shelf .pcard{width:214px}
  .shelf.ctr{justify-content:center;gap:28px}
  .cattile{width:170px}
  .cattile img{width:170px;height:204px;border-radius:90px 90px 16px 16px}
  .occtile{width:124px}
  .occtile img{width:116px;height:116px}
  .sarr{display:grid;place-items:center;position:absolute;top:38%;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--p-deep);font-size:20.6px;line-height:1;box-shadow:0 8px 20px -10px rgba(106,79,163,.6);padding:0 0 3px}
  .sarr:hover{background:var(--p);color:var(--on-p)}
  .sarr.prev{inset-inline-start:2px}
  .sarr.next{inset-inline-end:2px}
  .pcs{grid-template-columns:repeat(4,1fr);max-width:900px;margin:0 auto;width:100%}
  .pc .o{width:168px;height:168px}
  .pc .o b{font-size:41.3px}
  .steps3{grid-template-columns:repeat(3,1fr);gap:16px}
  .step{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 18px;gap:10px}
  .screen.w .grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .fgrid{grid-template-columns:2fr 1fr 1fr;gap:30px}
  .fgrid .fb{grid-column:auto}
  .pays{max-width:620px;margin-inline:auto}
  .band{padding:40px 24px}
  .band h3{font-size:18px}
  .wafab{bottom:28px}
  .toast{bottom:32px}
  .title h2{font-size:20px}
}
@media (min-width:1100px){
  .screen.w .grid{grid-template-columns:repeat(5,1fr)}
}
.ways{display:grid;gap:12px;padding:16px 16px 0}
.way{position:relative;overflow:hidden;isolation:isolate;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:10px;align-content:start}
.way.alt{background:var(--grad);color:var(--on-p);border:0}
.way.alt::before{content:"";position:absolute;z-index:-1;inset-inline-end:-70px;top:-90px;width:230px;height:230px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 0 0 26px rgba(255,255,255,.05),0 0 0 56px rgba(255,255,255,.03)}
.way .wtag{justify-self:start;font-size:12px;font-weight:600;background:var(--tint-2);color:var(--p-deep);border-radius:999px;padding:2px 12px}
.way.alt .wtag{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
.way h3{margin:0;font-size:16px;font-weight:600;color:var(--p-deep);line-height:1.35}
.way.alt h3{color:#fff}
.way ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:w}
.way li{counter-increment:w;display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start;font-size:13.5px;line-height:1.65;color:var(--ink)}
.way li::before{content:counter(w);width:26px;height:26px;border-radius:50%;background:var(--tint-2);color:var(--p-deep);display:grid;place-items:center;font-weight:600;font-size:13px}
.way.alt li{color:#4A3A63}
.way.alt li::before{background:rgba(255,255,255,.18);color:#fff}
.way .btn{height:46px;font-size:14px;margin-top:4px;align-self:end}
.way.alt .btn{background:#fff;color:var(--p-deep)}
.way.alt .btn:hover{background:var(--tint-2)}
.pp{display:grid;gap:14px;padding:12px 16px 0}
.ppimg{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;align-self:start}
.ppimg img{width:100%;aspect-ratio:1;object-fit:cover}
.ppinfo{display:grid;gap:12px;align-content:start}
.ppinfo h1{margin:0;font-size:18px;font-weight:600;color:var(--p-deep);line-height:1.4}
.ppfast{margin:0;display:flex;align-items:center;gap:8px;background:var(--tint-2);border:1px solid var(--lilac);color:var(--p-deep);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;line-height:1.5}
.ppfast svg{flex:none}
.ppprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ppprice b{font-size:20px;font-weight:600;color:var(--p-deep);font-variant-numeric:tabular-nums}
.ppprice small{color:var(--muted);font-size:13px}
.ppways{display:grid;gap:8px}
.ppways h4,.ppcompbox h4{margin:0;font-size:13.5px;color:var(--muted);font-weight:600}
.wayrow{display:grid;grid-template-columns:40px 1fr 18px;gap:10px;align-items:center;text-align:start;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);width:100%}
.wayrow:hover{border-color:var(--p)}
.wayrow i{width:40px;height:40px;border-radius:50%;background:var(--tint-2);color:var(--p-deep);display:grid;place-items:center;font-style:normal}
.wayrow b{display:block;font-size:14px;color:var(--p-deep);line-height:1.45}
.wayrow span{display:block;font-size:13px;color:var(--muted);line-height:1.6}
.wayrow > svg{color:var(--p-soft)}
.wayrow.main{border-color:var(--p);box-shadow:0 0 0 3px var(--tint-2)}
.ppcompbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ppcomp{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.ppcomp li{position:relative;padding-inline-start:16px;font-size:13.5px;line-height:1.65}
.ppcomp li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--p-soft)}
.ppfeat{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ppfeat > div{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.ppfeat > div:first-child{border-top:0}
.ppfeat i{width:36px;height:36px;border-radius:50%;background:var(--tint-2);color:var(--p-deep);display:grid;place-items:center;font-style:normal}
.ppfeat b{display:block;font-size:14px;color:var(--p-deep);line-height:1.45}
.ppfeat span{display:block;font-size:13px;color:var(--muted);line-height:1.55}
.ppb{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 40px -16px rgba(40,34,50,.55)}
.ppb .btn,.ppb .btn.ghost{height:48px;font-size:14px}
.screen[data-screen="product"]{padding-bottom:100px}
.gbar{margin:12px 16px 0;background:var(--p-deep);color:#fff;border-radius:12px;padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.5}
.gbar span{flex:1;min-width:170px}
.gbar button,.gbar a{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:400}
.gbar button:hover,.gbar a:hover{background:rgba(255,255,255,.14)}
.chips.price{padding-top:8px}
.chips.price .chip{min-height:36px;padding:4px 14px;font-size:13px;font-weight:400;color:var(--ink)}
.chips.price .chip.on{background:var(--tint-2);border-color:var(--p);color:var(--p-deep);font-weight:600}
.thumbs .tname{align-self:center;font-size:14px;color:var(--p-deep);padding-inline-start:6px}
.trio img:only-child{width:132px;height:132px}
#root.has-bnav .screen[data-screen="catalog"] .grid{padding-bottom:20px}
@media (max-width:899px){
  .slide .btn{padding:0 16px}
}
@media (min-width:640px){
  .ways{grid-template-columns:1fr 1fr;gap:16px}
}
@media (min-width:900px){
  .pp{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:30px;padding-top:18px}
  .ppinfo h1{font-size:20px}
  .way{padding:24px}
  .way h3{font-size:18px}
  .ppb{max-width:560px;margin-inline:auto}
  .slide.s1 .cta{max-width:none}
}
.apimg{width:44px;height:44px;border-radius:8px;object-fit:cover}
.apin{width:92px;min-height:38px;border:1.5px solid var(--line);border-radius:8px;padding:4px 8px;font-variant-numeric:tabular-nums;background:#fff}
.apin:focus{outline:none;border-color:var(--p)}
.apm{font-variant-numeric:tabular-nums;color:var(--muted);direction:ltr;text-align:start}
.pnote{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.7}
.apform{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
.apform select{width:100%;min-height:50px;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:10px 12px}
.apform input[type="file"]{padding:10px}
.apform .btn{height:50px}
.phonebox{background:#EFE7DD;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-height:300px}
.ph-h{display:flex;align-items:center;gap:10px;background:#0B5F58;color:#fff;padding:10px 14px}
.ph-av{width:36px;height:36px;border-radius:50%;background:var(--p);display:grid;place-items:center;color:var(--on-p);flex:none}
.ph-h b{display:block;font-size:14px;line-height:1.3}
.ph-h small{font-size:12px;opacity:.92}
.ph-b{padding:12px;display:grid;gap:8px;align-content:start;max-height:520px;overflow:auto}
.ph-b .none{color:#6B6475;font-size:13px;text-align:center;padding:30px 10px;margin:0}
@media (min-width:760px){}
@media (min-width:900px){}
@media (min-width:900px){.shelf.ctr{gap:20px}}
:root{--on-p:#3B2B57;--grad:linear-gradient(160deg,#EEE5FA 0%,#DCCDF3 52%,#CDB9EC 100%);--pinkd:#BF3B78;--pinkd-2:#A82F66;--pink-soft:#FBE4EE;--tiff-mid:#A9E5DF;--tiff-soft:#D9F3F0;--tiff-deep:#0B5F5B}
.sh{background:linear-gradient(90deg,#E6DBF7,#D6C6EF)}
.logo,.sh .langsw button,.rbar .langsw button,.dnav button,.sh .langsw a,.rbar .langsw a,.dnav a{color:var(--on-p)}
.rbar .langsw{border-color:rgba(59,43,87,.3)}
.slide::before,.band::before,.sitecard::before,.hero::before,.way.alt::before{border-color:rgba(255,255,255,.8);box-shadow:0 0 0 28px rgba(255,255,255,.28),0 0 0 60px rgba(255,255,255,.16)}
.slide .tag,.hero .eyebrow{background:#fff;border-color:#fff;color:var(--pinkd)}
.hero .quote{color:var(--on-p);border-inline-start-color:var(--pinkd);background:rgba(255,255,255,.55)}
.dots i.on,.sbar i{background:var(--p-deep)}
.seg input:checked + span,.chips .chip.on{border-color:var(--p-deep)}
.btn{background:var(--pinkd);color:#fff;box-shadow:0 10px 18px -12px rgba(168,47,102,.9)}
.btn:hover,.slide .btn:hover,.slide.lt .btn:hover,.way.alt .btn:hover,.band .btn:hover,.sitecard .btn:hover{background:var(--pinkd-2)}
.slide .btn,.slide.lt .btn,.way.alt .btn,.band .btn,.sitecard .btn,.hero .btn.gold,.band .btn.gold,.sitecard .btn.gold{background:var(--pinkd);color:#fff}
.btn.ghost,.slide .btn.ghost{background:#fff;color:var(--p-deep);border-color:var(--lilac);box-shadow:none}
.btn.ghost:hover,.slide .btn.ghost:hover{background:var(--tint-2);border-color:var(--p-deep)}
.btn.danger,.btn:disabled,.lb .btn{box-shadow:none}
.btn:disabled{background:#E9E3F0;color:#9A90A8}
.cnt,.chip.new{background:var(--pinkd);color:#fff}
.slide.dk{background:linear-gradient(160deg,#D2588F 0%,#AE2F68 100%);color:#fff}
.slide.dk::before{border-color:rgba(255,255,255,.22);box-shadow:0 0 0 28px rgba(255,255,255,.07),0 0 0 60px rgba(255,255,255,.04)}
.slide.dk p{color:#FFE9F2}
.slide.dk .tag{background:#fff;border-color:#fff;color:var(--pinkd)}
.slide.dk .btn{background:#fff;color:var(--pinkd)}
.slide.dk .btn:hover{background:var(--pink-soft)}
.tray .box{background:var(--pinkd)}
.tray .box small,.tray .box button.how{color:#FFE1EC}
.tray .go{color:var(--pinkd)}
.pcard[aria-selected="true"]{border-color:var(--pinkd);box-shadow:0 0 0 2px var(--pinkd)}
.pcard[aria-selected="true"] .pick{background:var(--pink-soft);color:var(--pinkd)}
.pcard .badge{background:var(--pinkd);color:#fff}
.pick{background:var(--tint-2);color:var(--p-deep)}
.pick:hover{background:var(--p);color:var(--on-p)}
.annc{background:var(--tiff-soft);color:var(--tiff-deep);border-bottom-color:#C2EAE5}
.guar i{background:var(--tiff-soft);color:var(--tiff-deep)}
.slide.lt{background:linear-gradient(160deg,#E6F8F5 0%,#BFECE6 100%);color:#124B48}
.slide.lt::before{border-color:rgba(255,255,255,.9);box-shadow:0 0 0 28px rgba(255,255,255,.4),0 0 0 60px rgba(255,255,255,.25)}
.slide.lt p{color:#2C5552}
.slide.lt .tag{background:#fff;border-color:#fff;color:var(--tiff-deep)}
.slide .big{color:var(--tiff-deep);text-shadow:3px 3px 0 #fff}
.way.alt{background:linear-gradient(160deg,#E6F8F5 0%,#C6EEE9 100%);color:var(--ink)}
.way.alt h3{color:#124B48}
.way.alt li{color:var(--ink)}
.way.alt li::before{background:#fff;color:var(--tiff-deep)}
.way.alt .wtag{background:#fff;border-color:#fff;color:var(--tiff-deep)}
.gbar{background:var(--tiff-soft);color:var(--tiff-deep)}
.gbar button,.gbar a{border-color:rgba(11,95,91,.4);color:var(--tiff-deep)}
.gbar button:hover,.gbar a:hover{background:rgba(255,255,255,.6)}
.rib,.pcard .rib{background:var(--tiff-mid);color:var(--tiff-deep)}
.done .mark{background:var(--tiff-mid);color:var(--tiff-deep)}
.sfoot{background:#F4EEFB;color:#5B4A63;border-top:4px solid var(--tiff-mid)}
.sfoot .logo{color:var(--p-deep)}
.sfoot .about{color:#5B4A63}
.sfoot h5{color:var(--ink)}
.sfoot .fl a,.sfoot .fl button,.sfoot .fl > span{color:#5B4A63}
.sfoot .fl a:hover,.sfoot .fl button:hover{color:var(--pinkd)}
.sfoot .copy{border-top-color:var(--lilac);color:var(--muted)}
.sfoot .copy a{color:var(--p-deep)}

/* ═══ The real site: additions on top of the approved prototype stylesheet ═══ */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* photos carry their width and height so the page does not jump while they load. The stylesheet decides the drawn size. */
img{height:auto}
/* 9 Oct 2026, the type: IBM Plex Sans Arabic at two weights, 400 and 600, one step smaller than Tajawal (Mohammed: «الخط استخدم IBM Plex وخله شوي اصغر eye friendly»).
   Bold text by default (b, headings, table heads) asks for 700, which is not loaded: 600 is said here so nothing waits on a weight that never comes. */
b,strong,h1,h2,h3,h4,h5,h6,th{font-weight:600}
/* 9 Oct 2026, the heading scale: the headings were still big and heavy for a phone (Mohammed on a 21px heading: «الخط جدا كبير مو eye friendly»; asked to shrink them: «سوي الشي الصحيح»).
   On a phone: body 14, card names 13.5/400, buttons 15, section headings 15 to 16, a page's main heading (and the home hero) 18, sheet titles 17, the gift page price 18, card prices 15.
   From 900px one step larger, never past 22 (22 only for the home hero). The values sit in their own rules below and in proto.css. */
/* Typed fields stay 16px: under 16px an iPhone zooms the whole page in when the field gets focus. */
.field input,.field textarea,.sform input,.msgta textarea,.lsrch input{font-size:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a.btn,a.pick,a.img,a.pc,a.cattile,a.occtile,a.wayrow,a.logo,a.ic,a.ocard,a.chip,a.nm,.viewall a,.bnav a,.crumbs a,.dnav a,.langsw a{text-decoration:none}
a.ic,a.logo{color:inherit}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:99;background:#fff;color:var(--p-deep);padding:10px 14px;border-radius:10px;font-weight:600;box-shadow:0 8px 20px -10px rgba(40,34,50,.6)}
.skip:focus{top:8px}
.pcard .img{cursor:pointer}
#root.setmode .pcard .img{cursor:zoom-in}
.pcard a.nm{display:-webkit-box}
.pcard[hidden]{display:none!important}
.chips .chip{display:inline-flex;align-items:center;white-space:nowrap}
.title h1{font-size:18px;font-weight:600;line-height:1.35;margin:0;color:var(--p-deep);text-wrap:balance}
.title .intro{max-width:70ch;line-height:1.75}
.screen.w .grid{padding-bottom:8px}
#root.has-tray .screen.w{padding-bottom:110px}
.listbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 0;font-size:13px;color:var(--muted)}
.listbar b{color:var(--p-deep);font-weight:600}
.listbar label{display:inline-flex;align-items:center;gap:6px}
.listbar select{border:1.5px solid var(--line);border-radius:999px;background:#fff;padding:6px 12px;min-height:38px;font-size:13px;color:var(--ink)}
.closedbar{background:var(--warn-bg);color:var(--warn);text-align:center;font-size:13px;font-weight:600;padding:8px 14px;border-bottom:1px solid #F1DFA9}
.seo{padding:26px 16px 0;max-width:820px;margin:0 auto;width:100%}
.seo h2{font-size:16px;font-weight:600;color:var(--p-deep);line-height:1.4;margin:22px 0 6px;text-wrap:balance}
.seo h2:first-child{margin-top:0}
.seo h3{font-size:15px;font-weight:600;color:var(--p-deep);margin:18px 0 4px}
.seo p{margin:0 0 8px;color:#463E52;font-size:14px;line-height:1.9}
.seo ol{margin:6px 0 10px;padding:0;list-style:none;display:grid;gap:8px;counter-reset:s}
.seo ol li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.75;color:#463E52}
.seo ol li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--tint-2);color:var(--p-deep);font-weight:600;display:grid;place-items:center;font-size:13.5px}
.links{padding:18px 16px 0;max-width:820px;margin:0 auto;width:100%}
.links h2{font-size:15px;font-weight:600;color:var(--p-deep);margin:0 0 10px}
.links .ll{display:flex;flex-wrap:wrap;gap:8px}
.links a{display:inline-flex;align-items:center;min-height:38px;padding:4px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;font-weight:400;color:var(--p-deep);text-decoration:none}
.links a:hover{border-color:var(--pinkd);color:var(--pinkd)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;padding:16px 16px 0;justify-content:center}
.cta-row .btn{width:auto;min-width:220px;padding:0 26px}
.lead{padding:14px 16px 0;max-width:820px;margin:0 auto;width:100%;font-size:14px;line-height:1.9;color:#463E52}
/* a guide (release 4): who wrote it and when, text with links, and sections of more than one paragraph */
.gmeta{padding:6px 16px 0;max-width:820px;margin:0 auto;width:100%;font-size:13px;color:var(--muted)}
.gtext{padding:0 16px;max-width:820px;margin:0 auto;width:100%;display:grid;gap:10px}
.gtext p{margin:0;font-size:14px;line-height:1.85;color:#463E52}
.lead a,.gtext a,.seo ul.tips a,.seo ol a,.faq p a{color:var(--p-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* product page details */
.ppdesc{margin:16px 0 0;font-size:14px;line-height:1.9;color:#463E52}
.ppbox{margin:14px 0 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ppbox h2{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--p-deep)}
.ppbox p{margin:0;font-size:13.5px;line-height:1.8;color:#463E52}
.ppbox ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13.5px;line-height:1.7;color:#463E52}
.ppbox ul li{display:grid;grid-template-columns:8px 1fr;gap:10px;align-items:start}
.ppbox ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tiff-mid);margin-top:.65em}
.ppbox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.ppbox dt{color:var(--muted)}
.ppbox dd{margin:0;font-weight:600;color:var(--ink)}
.ppcompbox h2{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--p-deep)}
.ppways h2{margin:0;font-size:14px;font-weight:600;color:var(--p-deep)}
/* state screens filled by the script */
.loadbox{padding:70px 24px;text-align:center;color:var(--muted);display:grid;justify-items:center;gap:14px}
.loadbox .spin{border-color:var(--tint-2);border-top-color:var(--pinkd);width:30px;height:30px}
.done .mark.wait{background:var(--tint-2);color:var(--p-deep)}
.done .mark.bad{background:#FBE4EE;color:#BF3B78;box-shadow:0 0 0 8px #FDF0F5}
.done .mark.late{background:var(--tint-2);color:var(--p-deep);font-size:22.4px;letter-spacing:2px}
.sharebox{margin:14px 16px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.sharebox p{margin:0;font-size:13px;color:var(--muted);line-height:1.7}
.sharebox code{display:block;direction:ltr;text-align:left;font:inherit;font-size:13px;background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:8px 10px;overflow-wrap:anywhere;color:var(--ink)}
.devnote{margin:8px 0 0;font-size:13px;background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:8px 12px;text-align:center}
.linkbtn{background:none;border:0;padding:0;color:var(--p-deep);font-size:13px;text-decoration:underline}
.linkbtn:disabled{color:var(--muted);text-decoration:none;cursor:default;font-variant-numeric:tabular-nums}
.flow .screen{padding-bottom:0}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
@media (min-width:900px){
  .title h1{font-size:20px}
  .seo h2{font-size:17px}
  /* keep the photos of the first slide clear of its two buttons */
  .slide.s1 .btn{padding:0 22px}
  .slide.s1 .art{width:42%}
}
/* footer: quick links, then the register and VAT numbers */
.sfoot.ft{text-align:center;padding-top:30px}
.sfoot.ft h2{margin:0 0 14px;font-size:16px;font-weight:600;color:var(--p-deep)}
.fq{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px}
.fq a{color:#4A3A63;text-decoration:none;font-size:14px;font-weight:400;padding:6px 2px}
.fq a:hover{color:var(--pinkd);text-decoration:underline}
.freg{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 34px;margin:22px auto 0;padding-top:20px;border-top:1px solid rgba(106,79,163,.18);max-width:620px}
.fr{display:flex;align-items:center;gap:10px;text-align:start}
.fr svg,.fr img{width:40px;height:40px;flex:none;border-radius:8px}
.fr span{display:block;font-size:13px;color:#4A3A63}
.fr b{display:block;font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sfoot.ft .copy{border-top:0;padding-top:0;margin-top:18px}
.gbar a{text-decoration:none;display:inline-block}
/* delivery fees shown to everyone */
.feebar{margin:12px 16px 0;padding:9px 14px;border-radius:12px;background:var(--tiff-soft);color:var(--tiff-deep);font-size:13px;line-height:1.7;display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;font-variant-numeric:tabular-nums}
.feebar b{color:var(--p-deep)}
.feebar .free{font-weight:600}
.feebar .cityn{font-weight:600;margin-inline-start:6px}
.pcard .dl{font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:-2px}
.pcard .dl.free{color:var(--tiff-deep);font-weight:600}
.ppfee{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--ink);display:inline-block;background:var(--tint-2);border-radius:999px;padding:4px 12px}
.ppfee.free{background:var(--tiff-soft);color:var(--tiff-deep)}
@media (min-width:900px){.feebar{max-width:1148px;margin-inline:auto}}
/* more than one photo */
.ppthumbs{display:flex;gap:8px;padding:10px 0 0;overflow-x:auto;scrollbar-width:none}
.ppthumbs::-webkit-scrollbar{display:none}
.ppthumbs button{flex:none;width:64px;height:64px;padding:0;border:2px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.ppthumbs button.on{border-color:var(--pinkd)}
.ppthumbs img{width:100%;height:100%;object-fit:cover}
/* the continue bar clears the phone's home bar */
.ctabar{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
/* search */
.sform{display:flex;gap:8px;padding:10px 16px 0}
.sform input{flex:1;min-width:0;min-height:50px;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:10px 14px;font-size:16px}
.sform input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 4px rgba(106,79,163,.13)}
.sform .btn{width:auto;height:50px;padding:0 20px;flex:none}
/* how many gifts the recipient takes */
.trayk{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;color:#FFE1EC}
.trayk button{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-weight:600;font-size:13px;padding:0}
.trayk button.on{background:#fff;color:var(--p-deep);border-color:#fff}
/* a welcome perk: free delivery on the first order of someone who received a gift */
.perkbar{background:var(--tiff-soft);color:var(--tiff-deep);text-align:center;font-size:13px;font-weight:600;padding:8px 14px;border-bottom:1px solid #BFE9E4}
.ppshare{margin:10px 0 0}
.ppshare .linkbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font-weight:600;color:var(--p-deep);border:1.5px solid var(--line);border-radius:999px;padding:0 16px;background:#fff}
.ppshare .linkbtn svg{color:var(--wa)}
/* gift guides */
.seo ul.tips{margin:6px 0 10px;padding:0;list-style:none;display:grid;gap:8px}
.seo ul.tips li{display:grid;grid-template-columns:10px 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.8;color:#463E52}
.seo ul.tips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pinkd);margin-top:.7em}
.gcards{display:grid;gap:12px;padding:14px 16px 0;max-width:1148px;margin:0 auto;width:100%}
.gcard{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;text-decoration:none;color:inherit;min-width:0}
.gcard img{width:110px;height:110px;object-fit:cover;border-radius:10px}
.you{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--ink)}
/* a declined attempt: one soft-pink box on the checkout, and the words under the tracking page's actions */
.cofail{margin:12px 16px 0;padding:12px 14px;border-radius:12px;background:#FBE4EE;color:#BF3B78;font-size:14px;line-height:1.6}
.cofail b{display:block;color:#BF3B78}
.cofail p{margin:4px 0 0;color:#8A3A5E}
.actions .hint{margin:4px 0 0;text-align:center;color:var(--muted);font-size:13px}
.actions .lnk,.you .lnk{background:none;border:0;padding:0 4px;font:inherit;font-weight:600;color:var(--pinkd);text-decoration:underline;cursor:pointer}
#signSheet .hint{margin:0 0 10px;color:var(--muted);font-size:13.5px}
.gh{padding:22px 16px 0;max-width:1148px;margin:0 auto;width:100%;font-size:16px;font-weight:600;color:var(--p-deep);line-height:1.4}
.gcard h2,.gcard h3{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--p-deep);line-height:1.4}
.gcard p{margin:0 0 6px;font-size:13px;line-height:1.7;color:#463E52;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard span{font-size:13px;font-weight:600;color:var(--pinkd)}
@media (min-width:900px){.gcards{grid-template-columns:1fr 1fr}.gh{font-size:18px;padding-top:30px}}
/* who pays, who sees the price */
.who{margin:18px 16px 0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;max-width:820px}
.who h2{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--p-deep);text-align:center}
.whocols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.whocols>div{background:var(--tint);border-radius:12px;padding:12px;min-width:0}
.whocols>div:last-child{background:var(--tiff-soft)}
.whocols b{display:block;font-size:14px;font-weight:600;color:var(--p-deep);margin-bottom:8px}
.whocols ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.whocols li{display:grid;grid-template-columns:18px 1fr;gap:7px;align-items:start;font-size:13px;line-height:1.55;color:var(--ink)}
.whocols li svg{width:16px;height:16px;margin-top:3px;color:var(--tiff-deep)}
.whocols li.n i{font-style:normal;font-weight:600;color:var(--pinkd);line-height:1.4;text-align:center}
.whocols li.n span{font-weight:600}
.who p{margin:12px 0 0;font-size:13px;line-height:1.7;color:var(--muted);text-align:center}
.who.compact{padding:12px;margin-top:14px}
.who.compact p{margin-top:8px}
.whoLine{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:9px 12px;border-radius:12px;background:var(--tiff-soft);color:var(--tiff-deep);font-size:13px;font-weight:600;line-height:1.6}
.whoLine svg{flex:none;width:18px;height:18px;margin-top:2px}
.after{margin:14px 16px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.after b{display:block;font-size:14px;font-weight:600;color:var(--p-deep);margin-bottom:8px}
.after ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:a}
.after ol li{counter-increment:a;display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:start;font-size:13px;line-height:1.65;color:#463E52}
.after ol li::before{content:counter(a);width:22px;height:22px;border-radius:50%;background:var(--tint-2);color:var(--p-deep);font-weight:600;font-size:12px;display:grid;place-items:center;margin-top:1px}
@media (min-width:900px){.who{margin-inline:auto}}
/* the three facts about paying, right under the header */
.paystrip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line)}
.paystrip>div{display:grid;justify-items:center;align-content:start;gap:5px;text-align:center;background:var(--tint-2);border-radius:14px;padding:10px 6px;min-width:0}
.paystrip>div:nth-child(2){background:var(--tiff-soft)}
.paystrip>div:nth-child(3){background:var(--pink-soft)}
.paystrip i{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--p-deep);font-style:normal}
.paystrip>div:nth-child(2) i{color:var(--tiff-deep)}
.paystrip>div:nth-child(3) i{color:var(--pinkd)}
.paystrip i svg{width:19px;height:19px}
.paystrip b{font-size:13px;font-weight:600;line-height:1.4;color:var(--on-p);text-wrap:balance}
@media (min-width:900px){
  .paystrip{max-width:1148px;margin:0 auto;border:0;padding:14px 16px 0;background:none;gap:12px}
  .paystrip>div{grid-template-columns:auto 1fr;justify-items:start;text-align:start;align-items:center;align-content:center;padding:12px 16px;gap:12px}
  .paystrip b{font-size:14.5px}
}
/* the same three facts inside the first slide of the hero */
.hchk{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:6px}
.hchk li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1.5}
.hchk li svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:#fff;color:var(--pinkd)}
/* the site's directory at the bottom of every page (design of 6 Oct 2026): closed by default; open, one row of group names and the chosen group's links as chips */
.dir{padding:26px 16px 0;max-width:1148px;margin:0 auto;width:100%}
.dir .dirall{border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 14px}
.dir summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:6px 2px;font-size:14px;font-weight:600;color:var(--p-deep);cursor:pointer}
.dir summary::-webkit-details-marker{display:none}
.dir summary::after{content:"+";font-size:18px;line-height:1;font-weight:400;color:var(--muted)}
.dir details[open] summary::after{content:"\2212"}
.dirt{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0 12px;-webkit-overflow-scrolling:touch}
.dirt::-webkit-scrollbar{display:none}
.dtab{flex:0 0 auto;height:40px;min-width:44px;padding:0 16px;border-radius:99px;border:1.5px solid #ECE6F3;background:#fff;font:inherit;font-size:13.5px;font-weight:600;color:#6A4FA3;cursor:pointer;white-space:nowrap}
.dtab.on{background:#D3C2EE;border-color:#6A4FA3;color:#3B2B57}
.dirl{list-style:none;margin:0;padding:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.dirl li{margin:0}
.dirl a,.dmore{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:99px;border:1.5px solid #ECE6F3;background:#fff;font:inherit;font-size:13px;font-weight:400;color:#3A3542;text-decoration:none;white-space:nowrap}
.dirl a:hover{border-color:var(--pinkd);color:var(--pinkd)}
.dmore{background:#F1EAFA;border-color:#E4DCEE;color:#6A4FA3;font-weight:600;cursor:pointer}
.dirl.cut:not(.all) li.xtra{display:none}
.dirl.all li.more{display:none}
@media (min-width:900px){
  .dir{padding-top:34px}
  .dir .dirall{padding:0 18px}
  .dir summary{font-size:15.3px;min-height:52px}
  .dirt{flex-wrap:wrap;overflow:visible}
  .dirl.cut:not(.all) li.xtra{display:block}
  .dirl li.more{display:none}
}
/* the closing band: words and three gifts */
.band.b2{display:grid;gap:18px;align-items:center;text-align:center;padding:26px 18px 22px;background:linear-gradient(135deg,var(--tiff-soft) 0%,var(--tint-2) 55%,var(--pink-soft) 100%);max-width:1148px}
.band.b2::before{display:none}
.band.b2 h3{margin:0 0 6px}
.band.b2 p{margin:0 0 16px;font-size:14px;line-height:1.7;color:#4A3A63}
.band.b2 .btn{max-width:300px;margin:0 auto}
.band.b2 .ba{display:flex;justify-content:center}
.band.b2 .ba img{width:92px;height:92px;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 12px 26px -16px rgba(59,43,87,.7);margin-inline-start:-16px}
.band.b2 .ba img:first-child{margin-inline-start:0}
@media (min-width:900px){
  .band.b2{grid-template-columns:1fr auto;text-align:start;padding:34px 44px;margin-inline:auto}
  .band.b2 .btn{margin:0}
  .band.b2 .ba img{width:132px;height:132px;margin-inline-start:-24px}
}
/* ── the brand's logo (2026-10-03): the delivered drawing, in the header, the menu and the recipient's bar ── */
.logo .lg{display:block;height:46px;width:auto;aspect-ratio:565.8/249.5}
.menu .mh .logo .lg{height:40px}
@media (max-width:359px){.sh .logo .lg{height:40px}}
@media (min-width:900px){.sh .logo .lg{height:50px}}
/* ── "my gift list" (2026-10-03): the builder on /wishlist, the list friends open at /w/<code>, and its small entry points ── */
.wlapp{max-width:820px;margin:0 auto;width:100%}
.wlbuild{padding:18px 16px 0}
.wlbuild h2{font-size:16px;font-weight:600;color:var(--p-deep);margin:0 0 10px;display:flex;align-items:baseline;gap:8px}
.wlbuild h2 small{font-size:13px;font-weight:400;color:var(--muted)}
.wlbuild .baglist{display:grid;gap:8px}
.wlmore{margin:8px 0 0}
.wlmore .linkbtn{min-height:44px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
.wlbuild .form{padding:20px 0 0}
.wlbuild .form h2{margin:0}
.wlready{margin:18px 16px 0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 16px;text-align:center;display:grid;gap:10px;justify-items:center}
.wlready .mark{width:56px;height:56px;border-radius:50%;background:var(--tiff-mid);color:var(--tiff-deep);display:grid;place-items:center}
.wlready h2{font-size:17px;font-weight:600;color:var(--p-deep);margin:0}
.wlready p{margin:0;color:var(--muted);font-size:14px;line-height:1.8;max-width:44ch}
.wlready code{display:block;width:100%;direction:ltr;text-align:center;font:inherit;font-size:13px;background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:10px;overflow-wrap:anywhere;color:var(--ink)}
.wlacts{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
.wlbusy .lead{display:none}
.wlacts .btn{height:48px;font-size:14px}
.wlacts .btn svg{flex:none}
.wllinks{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;margin:2px 0 0}
.wllinks a,.wllinks .linkbtn{font-size:13.5px;font-weight:600;color:var(--p-deep);min-height:40px;display:inline-flex;align-items:center}
.wltease{margin:24px 16px 0;display:grid;grid-template-columns:44px 1fr;gap:2px 12px;align-items:center;background:linear-gradient(135deg,#FBEAF2,var(--tint-2));border:1px solid var(--line);border-radius:16px;padding:14px;text-decoration:none;color:var(--ink)}
.wltease i{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--pinkd)}
.wltease b{display:block;font-size:15px;font-weight:600;color:var(--p-deep)}
.wltease small{display:block;font-size:13px;line-height:1.7;color:#463E52}
.wltease em{grid-column:2;font-style:normal;font-weight:600;font-size:13.5px;color:var(--pinkd);text-decoration:underline}
.wlhead{padding:22px 16px 0;max-width:852px;margin:0 auto;width:100%}
.wlhead .tag{display:inline-block;font-size:12.5px;font-weight:600;background:var(--tiff-soft);color:var(--tiff-deep);border-radius:999px;padding:2px 12px;margin:0 0 8px}
.wlhead h1{font-size:18px;font-weight:600;line-height:1.35;margin:0;color:var(--p-deep);text-wrap:balance}
.wlhead .lead{padding:8px 0 0;font-size:14px}
.wlmeta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:13px;color:var(--muted);font-weight:400}
.wlmeta span{display:inline-flex;align-items:center;gap:6px}
.wlmeta svg{width:16px;height:16px}
.wlowner{margin:14px 16px 0;background:var(--tiff-soft);color:var(--tiff-deep);border-radius:14px;padding:12px 14px;display:grid;gap:10px}
.wlowner p{margin:0;font-weight:600;font-size:14px}
.wlowner .wlacts{display:flex;flex-wrap:wrap}
.wlowner .wlacts .btn{width:auto;flex:1 1 auto;padding:0 14px;height:40px;font-size:13px}
.wlgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px 16px 0;max-width:852px;margin:0 auto;width:100%}
.wlcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.wlcard .ph{position:relative;aspect-ratio:1;background:var(--tint-2)}
.wlcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.wlcard .b{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.wlcard h2{font-size:13.5px;font-weight:600;line-height:1.5;margin:0;color:var(--ink)}
.wlcard .pr{margin:0;font-weight:600;color:var(--p-deep);font-size:14px}
.wlcard .btn{margin-top:auto}
.wlcard.taken .ph img{filter:grayscale(.6);opacity:.55}
.wlcard.taken h2,.wlcard.taken .pr{color:var(--muted)}
.wlcard .tk{position:absolute;inset-inline-start:8px;top:8px;background:var(--tiff-deep);color:#fff;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.wlcard .tk svg{width:14px;height:14px}
.wlto{background:var(--tint-2);border-radius:12px;padding:12px 14px}
.wlto b{display:block;font-size:15px;font-weight:600;color:var(--p-deep)}
.wlto p{margin:4px 0 0;font-size:13px;line-height:1.7;color:#463E52}
.ppshare{display:flex;flex-wrap:wrap;gap:8px}
.ppshare #ppWish svg{color:var(--pinkd);width:18px;height:18px}
.ppshare #ppWish.on{border-color:var(--tiff-mid);background:var(--tiff-soft)}
@media (min-width:520px){.wlready .wlacts{grid-template-columns:1fr 1fr}}
@media (min-width:700px){.wlgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  .wltease{max-width:820px;margin-inline:auto;grid-template-columns:44px 1fr auto}
  .wltease em{grid-column:auto}
  .wlowner{max-width:820px;margin-inline:auto}
  .wlready{max-width:560px;margin-inline:auto}
}
/* while a gift list is being built: a bar under the header on every page says so, counts the gifts, and offers to finish or stop */
/* offers: the price before the discount, struck, and the discount on the photo */
.pcard .pr s,.wlcard .pr s{color:var(--muted);font-weight:400;font-size:.86em;margin-inline-end:2px}
.pcard .rib.sale{background:var(--pinkd);color:#fff}
.ppprice s{color:var(--muted);font-size:15.3px;font-weight:400}
.ppprice .off{background:var(--pinkd);color:#fff;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600}


/* a gift that needs a day or more to prepare says so on its card; a gift of another vendor is dimmed while a set or a bundle is being built */
.pcard .slow{position:absolute;bottom:8px;inset-inline-start:8px;background:rgba(255,255,255,.95);color:var(--p-deep);font-size:11px;font-weight:600;padding:1px 9px;border-radius:999px;line-height:1.8;box-shadow:0 2px 8px rgba(40,34,50,.16)}
#root.setmode .pcard.xv{opacity:.45}
#root.setmode .pcard.xv .pick{cursor:not-allowed}

/* the picker of "my gift list": the delivery fee is the giver's matter, not the list owner's */
[data-list="wlpick"] .pcard .dl{display:none}

/* add-ons at checkout and the recipient's own choices: one card per group, a required one says so */
.addgroups{display:grid;gap:12px;margin:0 0 14px;padding:0 16px}
.form .addgroups{padding:0}
.addg{border:1.5px solid var(--line);border-radius:16px;padding:12px 14px 10px;margin:0;background:#fff;min-width:0}
.addg.invalid{border-color:var(--red)}
.addg legend{display:flex;align-items:center;gap:8px;padding:0 6px;font-size:14px}
.addg legend .req,.addg legend .opt{font-size:11.5px;font-weight:600;border-radius:999px;padding:1px 9px;line-height:1.8}
.addg legend .req{background:var(--pink-soft);color:var(--pinkd)}
.addg legend .opt{background:var(--tint-2);color:var(--muted)}
.addg .hint{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.addo{display:flex;align-items:center;gap:10px;padding:10px 4px;border-top:1px solid var(--line);cursor:pointer}
.addg legend + .addo,.addg .hint + .addo{border-top:0}
.addo input{width:20px;height:20px;accent-color:var(--pinkd);flex:none}
.addo .nm{flex:1;font-weight:600}
.addo .pr{font-size:13px;font-weight:600;color:var(--p-deep);white-space:nowrap}
#rChoices .title{margin:0 0 4px}
#rChoices .title h3{margin:0;font-size:15px}
#rChoices .title p{margin:2px 0 0;color:var(--muted);font-size:13px}

/* the search panel: opened by the magnifier, in place */
.srch{position:fixed;inset:0;z-index:70;background:rgba(40,34,50,.55);display:flex;justify-content:center;align-items:flex-start}
.srch .in{width:100%;max-width:640px;max-height:100%;overflow:auto;background:#fff;padding:10px 0 20px;border-radius:0 0 20px 20px;box-shadow:0 18px 40px -18px rgba(40,34,50,.5)}
@media (max-width:640px){.srch .in{min-height:100%;border-radius:0}}
.srch .sform{padding:6px 12px 0;align-items:center}
.srch .sform .x{flex:none;width:40px;height:50px;border:0;background:none;font-size:24.1px;line-height:1;color:var(--muted);cursor:pointer;padding:0}
.srch .res{padding:8px 12px 0;display:grid;gap:2px}
.srch .sr{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;text-decoration:none;color:inherit}
.srch .sr:hover,.srch .sr:active{background:var(--tint-2)}
.srch .sr img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--tint-2);flex:none}
.srch .sr span{display:grid;gap:2px;min-width:0}
.srch .sr b{font-size:14px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.srch .sr small{font-size:13px;font-weight:600;color:var(--p-deep)}
.srch .sr small s{color:var(--muted);font-weight:400}
.srch .all{display:block;text-align:center;margin:8px 0 0;padding:12px;border-radius:12px;background:var(--tint-2);color:var(--p-deep);font-weight:600;text-decoration:none}
.srch .hint{margin:14px 6px;color:var(--muted);font-size:13.5px;text-align:center}
.srch .lbl{margin:14px 18px 6px;font-size:13px;color:var(--muted)}
.srch .cats{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px}
.srch .cats a{border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;background:#fff;color:var(--p-deep);font-weight:600;font-size:13.5px;text-decoration:none}

/* ───────────── the UX pass of 2026-10-04: gifts first, light reading, add-ons on the gift's page, one checkout screen ───────────── */
/* header: on a phone it is the menu, the logo and the search. The checkout has the logo alone. */
@media (max-width:899px){.sh .dsk{display:none}}
.sh.slim .in{grid-template-columns:1fr;justify-items:center;min-height:50px;padding:5px 10px}
#root.flow{--top:50px}
/* bottom bar: four tabs; the options bag joins them only while it holds something */
.bnav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}

/* home: one still hero, then gifts */
.hero2{position:relative;margin:12px 16px 0;border-radius:18px;background:var(--grad);padding:18px 16px 0;overflow:hidden;display:grid}
.hero2 h1{margin:0;font-size:18px;font-weight:600;line-height:1.35;color:var(--on-p);text-wrap:balance}
.hero2 p{margin:6px 0 12px;font-size:14px;line-height:1.6;color:#4A3A63;max-width:34ch}
.hero2 .cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero2 .btn{width:auto;height:46px;padding:0 26px;font-size:15px}
.hero2 .lnk{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-weight:600;font-size:13.5px;color:var(--p-deep);text-decoration:none}
.hero2 .lnk svg{width:16px;height:16px}
.hero2 .ha{display:flex;justify-content:center;align-items:flex-end;gap:8px;margin-top:14px}
.hero2 .ha img{width:29%;height:84px;object-fit:cover;border-radius:999px 999px 0 0;border:3px solid #fff;border-bottom:0;background:var(--tint-2)}
.hero2 .ha img:first-child{width:35%;height:98px}
.prom{list-style:none;margin:10px 16px 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;font-size:12.5px;color:var(--muted)}
.prom li{display:inline-flex;align-items:center;gap:5px}
.prom svg{width:15px;height:15px;color:var(--tiff-deep);flex:none}
[data-screen="landing"] .sec-h{padding-top:24px}
.how3{margin:28px 16px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center;text-decoration:none;color:var(--ink)}
.how3 b{grid-column:1/-1;font-size:14px;color:var(--p-deep)}
.how3 ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;counter-reset:h;font-size:13px;color:var(--muted)}
.how3 li{counter-increment:h;display:inline-flex;align-items:center;gap:6px}
.how3 li::before{content:counter(h);width:20px;height:20px;border-radius:50%;background:var(--tiff-soft);color:var(--tiff-deep);font-size:12px;font-weight:600;display:grid;place-items:center}
.how3 > svg{color:var(--p-soft)}
/* the page's own text and its common questions: there for whoever looks, closed for everyone else */
details.about{margin:26px 16px 0;border:1px solid var(--line);border-radius:14px;background:#fff}
details.about > summary{cursor:pointer;list-style:none;padding:14px;font-weight:600;font-size:14px;color:var(--p-deep);display:flex;justify-content:space-between;align-items:center}
details.about > summary::-webkit-details-marker{display:none}
details.about > summary::after{content:"+";font-size:18.9px;font-weight:400;line-height:1}
details.about[open] > summary::after{content:"−"}
details.about .seo{padding:0 14px;margin:0}
details.about .faq{padding:10px 14px 6px}
details.about .intro{padding:0 14px;margin:0 0 8px;color:var(--muted);font-size:13.5px;line-height:1.8}

/* listings: the gifts start in the first screen */
.title.lt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 16px 0}
.title.lt h1{font-size:18px;margin:0}
.title.lt b{flex:none;font-size:13px;font-weight:400;color:var(--muted)}
.lnote{margin:6px 16px 0;font-size:13px;color:var(--muted);line-height:1.6}
[data-screen="catalog"] .chips{padding-top:10px}
.fltrow{display:flex;align-items:center;gap:10px;padding:10px 16px 0}
.fltbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--p-deep);font-size:13px;font-weight:600}
.flton{font-size:13px;color:var(--muted)}
#fltSheet h4{margin:12px 0 0;font-size:13px;color:var(--muted);font-weight:600}
#fltSheet .chips{padding:8px 0 2px;flex-wrap:wrap;overflow:visible}
#fltSheet select{width:100%;min-height:48px;margin:8px 0 6px;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:0 12px;font-size:16px}
.morewrap{display:grid;justify-items:center;gap:6px;padding:10px 16px 0}
.morewrap .btn{max-width:260px}
.morewrap small{font-size:12.5px;color:var(--muted)}

/* the gift's page: photo, name, price, what goes with it, one bar */
.ppinfo{gap:10px}
.pphead{display:flex;align-items:flex-start;gap:10px}
.pphead h1{flex:1;font-size:18px;line-height:1.4}
.ppacts{display:flex;gap:6px;flex:none}
.icb{position:relative;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--p-deep);display:grid;place-items:center;padding:0}
.icb span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.icb.on{background:var(--pink-soft);border-color:var(--pinkd);color:var(--pinkd)}
.ppline{margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13px}
.ppline span{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 11px;background:var(--tint-2);color:var(--p-deep);font-weight:400;line-height:1.5}
.ppline .sp.q,.ppline .fee.free{background:var(--tiff-soft);color:var(--tiff-deep);font-weight:600}
.ppline svg{width:15px;height:15px;flex:none}
.ppadd{display:grid;gap:8px}
.adr{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px 10px;min-height:54px;cursor:pointer;flex-wrap:wrap}
.adr .ic2{width:34px;height:34px;border-radius:10px;background:var(--tint-2);display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.adr .g{flex:1;min-width:0}.adr .g b{display:block;font-size:13.5px;font-weight:600;color:var(--p-deep)}.adr .g small{display:block;font-size:11.5px;color:var(--muted)}
.adr .g b .req{font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;background:var(--pink-soft);color:var(--pinkd);vertical-align:1px}
.adr .th{display:flex;flex-direction:row-reverse}.adr .th img{width:28px;height:28px;border-radius:50%;border:2px solid #fff;object-fit:cover;margin-inline-start:-8px;background:#fff}
.adr .chev{color:#9A91A8;display:flex}.adr .chev svg{width:18px;height:18px}
.adr.has{border-color:#B9A2E3;background:#FCFAFE}.adr.invalid{border-color:var(--red)}
.adr .pk{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;flex-basis:100%}.adr .pk[hidden]{display:none}
.adr .pk span{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 4px 0 10px;border-radius:14px;background:var(--tint-2);color:#4A3570;font-size:12px;font-weight:600;max-width:100%}
.adr .pk span img{width:20px;height:20px;border-radius:50%;object-fit:cover}.adr .pk span em{font-style:normal;direction:ltr;letter-spacing:1px}
.adr .pk span i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#fff;color:#6A4FA3;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer}
.adsheet .in{padding-top:8px}.adsheet .grab{display:block;width:100%;height:24px;margin:0;padding:0;border:0;background:none;cursor:pointer}.adsheet .grab::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:#D9D2E3;margin:0 auto}.adsheet .sh2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:8px 0 10px}.adsheet .sh2 h3{margin:0}.adsheet .sh2 small{font-size:11.5px;color:#9A91A8}
.ag{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;grid-auto-flow:dense}
.ai{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;position:relative;cursor:pointer;min-width:0}
.ai img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.ai .noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--tint-2);font-size:26px}
.ai b{display:block;font-size:11.5px;font-weight:400;color:var(--ink);padding:4px 6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai span{display:block;font-size:12px;font-weight:600;color:var(--p-deep);padding:0 6px 6px}
.ai em{position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%;background:#fff;color:#B5487C;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.ai.on{border:2px solid #B5487C}.ai.on em{background:#B5487C;color:#fff}
.adl{grid-column:1/-1;border:2px solid #B5487C;border-radius:14px;background:#FCFAFE;padding:10px;display:flex;flex-direction:column;gap:8px}
.adl .adh{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:600;color:var(--p-deep)}.adl .adh small{font-weight:400;color:var(--muted);font-size:12px}
.adl input{height:44px;border:1px solid #CDBCEA;border-radius:10px;background:#fff;text-align:center;font:600 20px/1 ui-monospace,Menlo,monospace;letter-spacing:6px;color:var(--p-deep);direction:ltr;width:100%}
.adl .prev{display:flex;justify-content:center;gap:4px;direction:ltr;min-height:42px;flex-wrap:wrap}
.adl .prev span{width:34px;height:42px;border-radius:50% 50% 46% 46%;background:linear-gradient(160deg,#F6E3A1,#C9A24A);color:#fff;font:700 18px/42px ui-monospace,Menlo,monospace;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.adl .prev span.silver{background:linear-gradient(160deg,#F2F2F2,#A9A9A9)}.adl .prev span.rose{background:linear-gradient(160deg,#F7D4CF,#C58A82)}
.adl .col{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.adl .col button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #E3DAF0;background:#C9A24A;padding:0;cursor:pointer}
.adl .col button.silver{background:#B0B0B0}.adl .col button.rose{background:#C58A82}.adl .col button.on{box-shadow:0 0 0 2px #B5487C}
.adl .sum{font-size:12px;color:#5E5670;text-align:center}
.adsheet .adfoot{position:sticky;bottom:0;margin:10px -16px 0;padding:10px 16px 0;background:linear-gradient(to top,#fff 72%,rgba(255,255,255,0))}.adsheet .adfoot .btn{width:100%}
.ppadd .addg{padding:10px 12px 8px;border-radius:12px}
.ppadd .addg legend{font-size:13.5px}
.ppadd .addg.solo{padding:2px 12px}
.ppadd .addg.solo .addo{border-top:0}
.ppadd .addo em{font-style:normal;font-size:13px;font-weight:600;color:var(--p-deep);white-space:nowrap}
.ppadd .addo em.free{color:var(--tiff-deep)}
/* a single choice (a ring's size) is one 44px row: its name, then the choices as chips; the chips scroll sideways when they do not fit and the name stays (UI/UX, 2026-10-05) */
.ppadd .addg.pick{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-height:44px;padding:0;border:0;border-radius:0;background:none}
.ppadd .addg.pick .lbl{flex:none;font-size:13.5px;font-weight:600;color:var(--ink)}
.ppadd .addg.pick .opts{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.ppadd .addg.pick .opts::-webkit-scrollbar{display:none}
.ppadd .addg.pick.invalid .addo{border-color:var(--red)}
/* on a phone narrower than 375 the row is drawn a little closer, so three sizes and "the recipient chooses" still fit it */
@media (max-width:374px){.ppadd .addg.pick{gap:6px}.ppadd .addg.pick .opts{gap:5px}.ppadd .addg.pick .addo{padding:6px 10px}.ppadd .addg.pick .lbl{font-size:13px}}

.ppadd .addg.pick .addo{position:relative;flex:none;justify-content:center;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;min-height:44px;min-width:44px;white-space:nowrap}
.ppadd .addg.pick .addo input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.ppadd .addg.pick .addo:has(input:checked){background:var(--p);border-color:var(--p-deep);color:var(--on-p)}
.ppadd .addg.pick .addo .nm{font-size:13.5px}
.addrec{margin:0;font-size:13px;color:var(--muted)}
.ppprom{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);line-height:1.5}
.ppprom svg{width:16px;height:16px;flex:none;color:var(--tiff-deep)}
.ppcompbox{padding:10px 12px}
.ppcompbox h2{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--muted)}
.ppdesc{margin:0}
.ppdesc p{margin:0;font-size:14px;line-height:1.8;color:#463E52}
.ppdesc.clamp p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* «أفكار تناسب هذي الهدية» (SEO T3, 12 Oct 2026): up to three guide links as pills, closing the details block */
.ppideas{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.ppideas h3{width:100%;margin:0 0 2px;font-size:13px;font-weight:600;color:var(--muted)}
.ppideas a{display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--p-deep);font-size:13px;font-weight:600;text-decoration:none}
.ppacc{border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 14px}
.ppacc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-size:14px;font-weight:600;color:var(--p-deep)}
.ppacc summary::-webkit-details-marker{display:none}
.ppacc summary::after{content:"+";font-size:18.9px;font-weight:400;line-height:1}
.ppacc[open] summary::after{content:"−"}
.ppacc ul{margin:0 0 10px;padding:0;list-style:none;display:grid;gap:6px;font-size:13.5px;line-height:1.7;color:#463E52}
.ppacc p{margin:0 0 12px;font-size:13px;line-height:1.8;color:#463E52}
.ppacc dl{margin:0 0 10px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.ppacc dt{color:var(--muted)}
.ppacc dd{margin:0;font-weight:600}
.pplinks{display:flex;flex-wrap:wrap;gap:6px}
.pplinks a{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px;text-decoration:none;color:var(--p-deep)}
.ppb{grid-template-columns:1.55fr 1fr}
.ppb .btn{font-size:14px;padding:0 8px}
.ppb .btn.ghost{font-size:13px;line-height:1.3}
.ppb .btn.ghost.on{background:var(--pink-soft);border-color:var(--pinkd);color:var(--pinkd)}

/* checkout: one screen */
.cobar{display:flex;align-items:center;gap:10px;padding:12px 16px 2px}
.cobar b{font-size:16px;font-weight:600;color:var(--p-deep)}
.cosum{margin:8px 16px 0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.cosum .th{display:flex}
.cosum .th img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--tint-2);border:2px solid #fff}
.cosum .th img + img{margin-inline-start:-24px}
.cosum .tx{min-width:0;display:grid}
.cosum .tx b{font-size:14px;line-height:1.5;color:var(--p-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cosum .tx small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cosum a{font-size:13px;color:var(--p-deep);padding:8px 4px}
.co .form{gap:10px;padding-top:8px}
.coh{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--p-deep)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.row2 .field{min-width:0}
.co .field{gap:4px}
/* smaller, calmer boxes (Mohammed, 11 Oct 2026: «البوكسات احسها كبيرة شوي للعين»): 40px fields, 1px lines, 11.5px labels, 38px city buttons, a 46px pay button;
   the typed text stays 16px, because below it an iPhone zooms the page when a field is tapped */
.co .field label{font-size:11.5px;font-weight:400;color:var(--muted)}
.co .field input{min-height:40px;height:40px;padding:0 10px;border-width:1px;border-color:#E6DEF0;border-radius:10px}
.co .field input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(106,79,163,.13)}
.co .field textarea{min-height:58px}
.co .seg span{min-height:38px;padding:4px 10px;border-width:1px;border-color:#E6DEF0;border-radius:10px;font-size:13px}
.co .seg input:checked + span{background:#E6DBF6;border-color:#B9A2E3;color:#4A3570}
.co .ctabar .btn{height:46px;font-size:15px}
/* the contacts icon inside the recipient's number (11 Oct 2026): a 30px square at the left end of the field, the number starts after it */
.wc{position:relative}
.co .field .wc input{padding-left:40px}
.cpick{position:absolute;left:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:8px;background:#F1EAFA;color:#6A4FA3;display:grid;place-items:center;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cpick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpick:active{background:#E6DBF6}
.cpick:focus-visible{outline:2px solid var(--p-deep);outline-offset:2px}
/* a field Safari or Chrome autofilled keeps our colours, with the lavender border as the "filled" cue (11 Oct 2026) */
.co .field input:-webkit-autofill,.co .field input:-webkit-autofill:hover,.co .field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px #FCFAFE inset;-webkit-text-fill-color:#3A3542;caret-color:#3A3542;border-color:#CDBCEA}
/* the one-time tip on an iPhone: points at Safari's «AutoFill Contact» above the keyboard */
.ctip{position:relative;margin:-2px 0 0;padding:7px 10px;border-radius:10px;background:#BF3B78;color:#fff;font-size:12px;line-height:1.5}
.ctip bdi{unicode-bidi:isolate;font-weight:600}
.ctip::before{content:"";position:absolute;top:-6px;left:14px;border:6px solid transparent;border-bottom-color:#BF3B78;border-top:0}
/* One message, written once (design 1, 9 Oct 2026): one block with the text, the emojis, where the text goes, and the name as a yes or no */
.msgblk{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #E6DEF0;border-radius:14px;padding:12px}
.msgblk .coh{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.msgblk .coh label{font:inherit;color:inherit}
.msgblk .coh small{font-size:12px;font-weight:400;color:var(--muted)}
.msgta{position:relative}
.msgta textarea{display:block;width:100%;min-height:58px;padding:9px 10px 20px;border:1px solid #D3C2EE;border-radius:10px;background:#FCFAFE;color:var(--ink);font-size:16px;line-height:1.5;resize:none;overflow:hidden}
.msgblk.invalid .msgta textarea{border-color:var(--err)}
.msgta textarea:focus{outline:none;border-color:var(--p-deep);box-shadow:0 0 0 4px rgba(106,79,163,.13)}
.msgta .mcount{position:absolute;inset-inline-end:10px;bottom:5px;font-size:11px;font-weight:600;color:#9A91A8;font-variant-numeric:tabular-nums;direction:ltr}
.mcount.over{color:var(--err)}
/* where the message goes (11 Oct 2026): one grey line under the emojis, with the link's icon or the card's */
.minfo{display:flex;align-items:center;gap:6px;margin:-2px 0 0;font-size:12px;line-height:1.5;color:#746C80}
.minfo i{display:inline-flex;flex:none}
.minfo .ic{width:15px;height:15px;fill:none;stroke:#6A4FA3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.minfo .wa .ic{stroke:#1FAF5A}
.yn{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.yn b{font-size:13.5px;font-weight:600;color:var(--on-p)}
.who2{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--tint-2);border-radius:12px;padding:3px;width:120px;flex:none}
.who2 label{position:relative;display:block;cursor:pointer}
.who2 input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.who2 span{height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--on-p)}
.who2 input:checked + span{background:var(--pinkd);color:#fff}
.who2 input:focus-visible + span{outline:2px solid var(--p-deep);outline-offset:1px}
.msgblk .prev{margin:-4px 0 0;font-size:12px;color:var(--muted)}
/* the eight emojis share the block's width (design 1), so the row never scrolls on a phone */
.msgblk .emo{gap:4px;margin:0;overflow:visible}
.msgblk .emo button{flex:1 1 0;min-width:0;width:auto;height:40px;border-radius:10px;font-size:16.2px}
/* emojis under the gift message (Mohammed, 5 Oct): one row that scrolls sideways, each a 44px target; a tap writes it into the message */
.emo{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:4px}
.emo::-webkit-scrollbar{display:none}
.emo button{flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--tint-2);font-size:18.9px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.emo button:active{filter:brightness(.94)}
/* with a mouse there is no swipe: on wide screens they all show at once, and wrap if the column is narrow */
@media (min-width:900px){.emo{flex-wrap:wrap;overflow:visible;gap:4px}.emo button{flex-basis:40px;width:40px;height:40px;font-size:18.9px}}
.cotot{margin:8px 16px 0}
.cotot .rows > div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border:0;font-size:13.5px;background:none}
.cotot .rows > div.total{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;background:none}
.cotot .rows .total b{font-size:16px}
.cotot .rows > div.mut{font-size:12.5px;color:var(--muted)}
.co .policy{margin:8px 16px 0;font-size:12.5px;line-height:1.7}
@media (min-width:900px){
  .hero2{grid-template-columns:1.1fr 1fr;align-items:end;padding:34px 40px 0;margin:20px 16px 0}
  .hero2 .ht{padding-bottom:34px}
  .hero2 h1{font-size:22px}
  .hero2 p{font-size:15.3px;margin:10px 0 20px}
  .hero2 .btn{height:52px;font-size:15px;padding:0 32px}
  .hero2 .ha{margin-top:0}
  .hero2 .ha img{height:190px}
  .hero2 .ha img:first-child{height:220px}
  .prom{font-size:13.5px;gap:6px 28px;margin-top:14px}
  .how3,details.about{max-width:760px;margin-inline:auto;width:calc(100% - 32px)}
  .pphead h1{font-size:20px}
  .co .cosum,.co .cotot,.co .policy{margin-inline:16px}
}
/* search inside the page, right after the filter button; on such a page the header needs no magnifier */
.fltrow{flex-wrap:nowrap}
.lsrch{flex:1;min-width:0;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--muted)}
.lsrch:focus-within{border-color:var(--p-deep);box-shadow:0 0 0 3px rgba(106,79,163,.12)}
.lsrch svg{flex:none;width:17px;height:17px}
.lsrch input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:16px;color:var(--ink);padding:0;height:38px;-webkit-appearance:none;appearance:none}
.lsrch input::-webkit-search-cancel-button{display:none}
.lsrch input::placeholder{color:var(--muted);font-size:13.5px}
.lsrch .x{flex:none;border:0;background:none;color:var(--muted);font-size:18.9px;line-height:1;padding:0 2px;height:38px}
p.flton{margin:6px 16px 0}
#root.has-lsrch .sh [data-hsearch]{visibility:hidden}

/* ───────────── round 2 of the UX pass (Mohammed's notes on the prototype, 2026-10-04) ───────────── */
/* the strip above the header: where delivery becomes free */
.annc.ship{justify-content:center;gap:6px;font-weight:600;font-size:13px}
.annc.ship svg{width:16px;height:16px;flex:none}
/* hero: the value is "no need to know their taste"; its two doors are the two ways to gift */
.hero2{padding:18px 16px 16px}
.hero2 p{margin:6px 0 0}
.hero2 .ha{display:none}
/* the gift's own details: shown, open */
.ppdet{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.ppdet h2{margin:0;font-size:15px;font-weight:600;color:var(--p-deep)}
.ppdet .ppdesc{margin:0;font-size:14px;line-height:1.8;color:#463E52}
.ppdet .ppcomp{margin:0}
.ppdet dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13.5px}
.ppdet dt{color:var(--muted)}
.ppdet dd{margin:0;font-weight:400}
/* "let them choose": three steps in one line, then the levels */
.steps3{list-style:none;margin:10px 16px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;counter-reset:s3;font-size:13px;color:var(--muted)}
.steps3 li{counter-increment:s3;display:inline-flex;align-items:center;gap:6px}
.steps3 li::before{content:counter(s3);width:20px;height:20px;border-radius:50%;background:var(--tiff-soft);color:var(--tiff-deep);font-size:12px;font-weight:600;display:grid;place-items:center}
/* checkout: a second gift for the same order */
.cosum .coadd{grid-column:1/-1;min-height:40px;border:1.5px dashed var(--lilac);border-radius:10px;background:none;color:var(--p-deep);font-size:13px;font-weight:600}
/* footer: the logo, a line about the shop, the links people look for, how to pay, the two numbers */
.sfoot.ft2{text-align:start;padding-top:28px}
.sfoot.ft2 .fin{max-width:1148px;margin:0 auto;display:grid;gap:22px}
.fbrand{display:grid;gap:8px;justify-items:start}
.fbrand .flogo{display:inline-flex}
.fbrand p{margin:0;font-size:13.5px;line-height:1.8;color:#5B4A63;max-width:46ch}
.fbrand .fmeta{font-size:13px;color:var(--muted)}
.fbrand .btn{width:auto;padding:0 16px}
/* the official profiles under the contact button (9 Oct 2026): 44px round links */
.fsoc{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px;font-size:13px;color:var(--muted)}
.fsoc a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--p-deep);text-decoration:none}
.fsoc a:hover,.fsoc a:focus-visible{color:var(--pinkd);border-color:var(--pinkd)}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
.fcols h3{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--p-deep)}
.fcols a{display:block;padding:5px 0;font-size:13.5px;color:#5B4A63;text-decoration:none}
.fcols a:hover{color:var(--pinkd);text-decoration:underline}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.fpay .fpl{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.fpay .fpl img{display:block;width:auto;max-width:none;flex-shrink:0}
.fpay .fl-md{height:18px}.fpay .fl-ap{height:20px}.fpay .fl-vi{height:13px}.fpay .fl-mc{height:22px}.fpay .fl-tb{height:18px}
.sfoot.ft2 .freg{justify-content:flex-start;margin:0;max-width:none}
.sfoot.ft2 .copy{border-top:0;padding-top:0;margin:0;text-align:start}
@media (min-width:900px){
  .hero2{padding:34px 40px 0}
  .hero2 .ht{padding-bottom:34px}
  .hero2 .ha{display:flex}
  .hero2 p{margin:10px 0 0}
  .sfoot.ft2 .fin{grid-template-columns:1.2fr 1.6fr;column-gap:48px;align-items:start}
  .fcols{grid-template-columns:repeat(3,1fr)}
  .fpay,.sfoot.ft2 .freg,.sfoot.ft2 .copy{grid-column:1/-1}
  .steps3{justify-content:center}
}
[data-screen="landing"] .sec-h{padding-top:18px}

/* ───────────── the gift's page, phone first: name, price and the two buttons inside the first screen ───────────── */
/* gift page, first screen (UI/UX answer of 2026-10-05): the price row and the chips row are two rows of their own, and neither wraps, so the web font arriving cannot move the button */
.pprow{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ppprice{flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap}
.ppprice b,.ppprice s,.ppprice .off,.ppprice small{flex:none}
.ppprice.over s{display:none}
/* the price before is left out below the phone width the whole row fits (the class is set by the page from the three texts' lengths) */
@media (max-width:374px){.ppprice.f375 s,.ppprice.f390 s,.ppprice.f412 s,.ppprice.f430 s,.ppprice.f431 s{display:none}}
@media (min-width:375px) and (max-width:389px){.ppprice.f390 s,.ppprice.f412 s,.ppprice.f430 s,.ppprice.f431 s{display:none}}
@media (min-width:390px) and (max-width:411px){.ppprice.f412 s,.ppprice.f430 s,.ppprice.f431 s{display:none}}
@media (min-width:412px) and (max-width:429px){.ppprice.f430 s,.ppprice.f431 s{display:none}}
@media (min-width:430px) and (max-width:430px){.ppprice.f431 s{display:none}}
.pprow .ppline{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pprow .ppline::-webkit-scrollbar{display:none}
.pprow .ppline span{flex:none;white-space:nowrap}
.pprow .ppline{margin:0}

.ppcta{display:grid;grid-template-columns:1.55fr 1fr;gap:8px}
.ppcta .btn{height:52px;font-size:15px;padding:0 8px}
.ppcta .btn.ghost{font-size:13px;line-height:1.3}
.ppcta .btn.ghost.on{background:var(--pink-soft);border-color:var(--pinkd);color:var(--pinkd)}
.ppvat{margin:0;font-size:12.5px;color:var(--muted)}
@media (max-width:899px){
  [data-screen="product"] .crumbs{display:none}
  .pp{padding-top:10px;gap:10px}
  .ppimg #ppImg{aspect-ratio:1/0.82}
  .ppprice small{display:none}
  .ppinfo{gap:9px}
  .pphead h1{font-size:17.1px}
  .ppprice b{font-size:18px}
  .icb{width:36px;height:36px}
}
@media (min-width:900px){.ppcta{max-width:460px}}
/* sharing the gift: one quiet button with its name on it, after the details */
.ppshare{margin:0;display:flex;justify-content:center}
.sharebtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:0;background:none;color:var(--p-deep);font-size:13.5px;font-weight:600}
.sharebtn:hover{text-decoration:underline}

/* ───────────── round 3 of the UX pass (Mohammed's notes, 2026-10-04 evening) ───────────── */
/* the hero in one slim row, on the listings */
.hlite{margin:10px 16px 0;display:grid;grid-template-columns:36px 1fr 18px;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--pink-soft);color:var(--ink);text-decoration:none}
.hlite i{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--pinkd);display:grid;place-items:center;font-style:normal}
.hlite b{display:block;font-size:14px;font-weight:600;color:var(--pinkd);line-height:1.4}
.hlite small{display:block;font-size:12.5px;color:#6A4560;line-height:1.4}
.hlite > svg{color:var(--pinkd)}
/* how it works: three steps one can follow at a glance */
.howx{list-style:none;margin:12px 16px 0;padding:0;display:grid;gap:8px;counter-reset:hx}
.howx li{counter-increment:hx;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.howx i{position:relative;width:44px;height:44px;border-radius:50%;background:var(--tiff-soft);color:var(--tiff-deep);display:grid;place-items:center;font-style:normal}
.howx i::after{content:counter(hx);position:absolute;top:-4px;inset-inline-start:-4px;width:20px;height:20px;border-radius:50%;background:var(--pinkd);color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center}
.howx b{display:block;font-size:14px;font-weight:600;color:var(--p-deep);line-height:1.4}
.howx span{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.howmore{margin:6px 16px 0;text-align:center}
.howmore a{display:inline-flex;align-items:center;gap:2px;min-height:40px;font-size:13px;font-weight:600;color:var(--p-deep);text-decoration:none}
.howmore svg{width:16px;height:16px}
/* "let them choose": the budget is the first question */
.ltcq{margin:16px 16px 0;font-size:16px;font-weight:600;color:var(--p-deep);text-align:center}
.ltcpay{margin:14px 16px 0;text-align:center;font-size:13px;color:var(--muted)}
/* the gift's page: one main button, then the two other ways in plain words */
.ppcta{grid-template-columns:1fr;gap:6px}
.ppalt{display:grid;grid-template-columns:22px 1fr 16px;gap:8px;align-items:center;min-height:44px;padding:4px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--p-deep);font-size:13px;font-weight:600;text-align:start;line-height:1.4}
.ppalt > svg{width:18px;height:18px}
.ppalt > svg:last-child{color:var(--p-soft)}
.ppalt.on{background:var(--pink-soft);border-color:var(--pinkd);color:var(--pinkd)}
.ppb.one{grid-template-columns:1fr}
@media (max-width:899px){[data-screen="catalog"] .crumbs{display:none}}
@media (min-width:900px){
  .howx{grid-template-columns:repeat(3,1fr);max-width:980px;margin-inline:auto;width:calc(100% - 32px)}
  .hlite{max-width:560px}
}
/* "shop by occasion" opens the home page, right under the hero */
.occtop .sec-h{padding-top:16px}
@media (max-width:899px){.occtop .sec-h h2{font-size:16px}.occtop .sec-h h2::after{display:none}.occtop .shelf{padding-top:10px}}
/* ── the header sells (2026-10-04, after fnp.sa; phone first, their phone site is the weak part) ──
   phone: the menu button carries its name and opens the catalogue (pictures of the categories, then occasions and who it is for);
   wide screen: a row of what we sell under the logo row. Information (my orders, help) is small and to the side. */
.snav,.sh .hot{display:none}
.sh .mbtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.6);color:var(--on-p);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sh .mbtn svg{width:20px;height:20px}
.menu .msell{padding-bottom:6px}
.menu .mhot{display:grid;grid-template-columns:44px 1fr 18px;gap:12px;align-items:center;margin:14px 14px 2px;padding:12px 14px;border-radius:16px;background:var(--pinkd);color:#fff;text-decoration:none}
.menu .mhot i{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-style:normal}
.menu .mhot i svg{width:22px;height:22px}
.menu .mhot b{display:block;font-size:14px;font-weight:600;line-height:1.4}
.menu .mhot small{display:block;font-size:12.5px;line-height:1.5;opacity:.95}
.menu .mhot > svg{width:18px;height:18px}
.menu .msell h6{margin:0;padding:16px 16px 8px;font-size:13px;font-weight:600;color:var(--p-deep);background:none}
.menu .mtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;padding:0 14px}
.menu .mtiles a{display:grid;justify-items:center;align-content:start;gap:6px;text-decoration:none;color:var(--ink);font-size:12.5px;font-weight:600;text-align:center;line-height:1.35}
.menu .mtiles img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:var(--tint-2);display:block}
.menu .mall{display:flex;align-items:center;justify-content:center;gap:4px;margin:12px 14px 0;min-height:44px;border:1.5px solid var(--line);border-radius:999px;color:var(--p-deep);font-size:13.5px;font-weight:600;text-decoration:none;background:#fff}
.menu .mall svg{width:16px;height:16px}
.menu .mall.sale{color:var(--pinkd);border-color:var(--pink-soft);background:var(--pink-soft)}
.menu .mchips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px}
.menu .mchips a{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:400;text-decoration:none}
.menu .msmall{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:18px;padding:10px 16px 4px;border-top:1px solid var(--line)}
.menu .msmall a,.menu .msmall button{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);text-decoration:none;cursor:pointer}
@media (min-width:900px){
  .sh .mbtn{display:none}
  .dnav{gap:4px}
  .dnav a,.dnav button{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
  .dnav svg{width:18px;height:18px}
  .snav{display:block;background:#fff;border-bottom:1px solid var(--line)}
  .snav .in2{max-width:var(--wrap);margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 2px}
  .snav a,.snav .dd > button{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 11px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:400;text-decoration:none;border-radius:8px;cursor:pointer;white-space:nowrap}
  .snav a:hover,.snav .dd:hover > button,.snav .dd.open > button{color:var(--p-deep);background:var(--tint-2)}
  .snav .dd{position:relative}
  .snav .dd > button::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-1px,-2px);margin-inline-start:2px}
  .snav .ddp{position:absolute;top:100%;inset-inline-start:0;z-index:40;min-width:220px;display:none;padding:8px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;box-shadow:0 18px 30px -18px rgba(40,34,50,.45)}
  .snav .dd:hover .ddp,.snav .dd:focus-within .ddp,.snav .dd.open .ddp{display:grid}
  .snav .ddp a{min-height:40px;justify-content:flex-start}
  .sh .hot{display:inline-flex;align-items:center;gap:7px;min-height:40px;margin-inline-end:6px;padding:0 16px;border-radius:999px;background:var(--pinkd);color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
  .sh .hot:hover{background:var(--pinkd-2)}
  .sh .hot svg{width:17px;height:17px}
  .sh .side.end{gap:2px}
  .snav a.sale{color:var(--pinkd);font-weight:600}
}
@media (min-width:900px) and (max-width:1199px){.snav a,.snav .dd > button{font-size:13.5px;padding:0 8px}.sh .hot{font-size:13px;padding:0 12px}}
/* ── gift cards, lighter (2026-10-04, after fnp.sa's listing): the photo, the name, the price and one tag; the whole card is the link.
   The button and the preview eye show only while options are being picked. Cards drawn by the script (the recipient's page) keep the old look. ── */
.pcard.pc2{background:none;border:0;border-radius:0;overflow:visible;min-width:0}
.pcard.pc2 .img{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.pcard.pc2 .img img{display:block}
.pcard.pc2 .meta{align-items:flex-start;text-align:start;gap:2px;padding:8px 2px 2px;flex:none;min-width:0}
.pcard.pc2 .nm,.pcard.pc2 a.nm{display:block;max-width:100%;min-height:0;font-size:13.5px;font-weight:400;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
.pcard.pc2 .pr{font-size:15px;font-weight:600;color:var(--ink)}
.pcard.pc2 .tag{display:inline-block;margin-top:1px;padding:1px 8px;border-radius:6px;font-size:11.5px;font-weight:600;line-height:1.6}
.pcard.pc2 .tag.today{background:var(--tiff-soft);color:var(--tiff-deep)}
.pcard.pc2 .tag.prep{background:var(--tint-2);color:var(--p-deep)}
.pcard.pc2 .zoom,.pcard.pc2 .pick{display:none}
#root.setmode .pcard.pc2 .zoom{display:grid}
#root.setmode .pcard.pc2 .pick{display:flex;margin-top:6px;border-radius:12px}
/* the delivery-time tag stays under the price while options are picked too (Mohammed, 8 Oct 2026: «حط اي علامة تحت السعر كم يبيله وقت للتوصيل») */
.pcard.pc2[aria-selected="true"]{border:0;box-shadow:none}
.pcard.pc2[aria-selected="true"] .img{border-color:var(--pinkd);box-shadow:0 0 0 2px var(--pinkd)}
.shelf .pcard.pc2 .img{border-radius:14px}
/* the greeting card on the gift's page: its tick and one line under it, always there, so ticking it moves nothing (design 1, 9 Oct 2026) */
/* the card's message line on the gift page (11 Oct 2026): opens under the tick, one line that grows to three; the count only from 120 */
.ppadd .cardln{margin:2px 0 4px}
.ppadd .cardln textarea{display:block;width:100%;min-height:38px;max-height:84px;padding:8px 10px;border:1px solid #CDBCEA;border-radius:10px;background:#FCFAFE;color:var(--ink);font:inherit;font-size:16px;line-height:1.4;resize:none;overflow:hidden}
.ppadd .cardln textarea:focus{outline:none;border-color:var(--p-deep);box-shadow:0 0 0 3px rgba(106,79,163,.13)}
.ppadd .cardln .mcount{display:block;margin:3px 2px 0;font-size:11px;font-weight:600;color:#9A91A8;font-variant-numeric:tabular-nums;direction:ltr;text-align:end}
/* pieces: the counter on the page of a gift the team allows in more than one piece (2026-10-04) */
.ppqty{display:flex;align-items:center;gap:12px;margin-top:8px;padding:6px 8px 6px 14px;border:1.5px solid var(--line);border-radius:16px;background:#fff}
#root[dir="rtl"] .ppqty{padding:6px 14px 6px 8px}
.ppqty .ql{display:grid;gap:0;line-height:1.35}
.ppqty .ql b{font-size:14px;color:var(--ink)}
.ppqty .ql small{font-size:12px;color:var(--muted)}
.ppqty .stp{display:inline-flex;align-items:center;margin-inline-start:auto;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--tint)}
.ppqty .stp button{width:46px;height:44px;border:0;background:none;color:var(--p-deep);font:inherit;font-size:20.6px;font-weight:600;line-height:1;cursor:pointer}
.ppqty .stp button:disabled{color:#C9C2D3;cursor:not-allowed}
.ppqty .stp button:not(:disabled):hover{background:var(--tint-2)}
.ppqty output{min-width:40px;text-align:center;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* phone: with the counter on the page the photo is a little shorter, so the main button stays in the first screen */
@media (max-width:899px){.pp.hasx .ppimg #ppImg{aspect-ratio:1/0.66}}   /* 0.72 until the header controls grew to 44px (journey design v1.1): the main button stays inside the first 375x667 screen with the pieces counter and the card */
/* phone: a gift with several photos keeps its main button in the first screen: the small photos sit on the big one instead of under it */
@media (max-width:899px){
  .ppimg .ppthumbs{position:absolute;bottom:8px;inset-inline:8px;gap:6px;padding:0}
  .ppimg .ppthumbs button{width:46px;height:46px;border-color:#fff;box-shadow:0 2px 8px rgba(40,34,50,.28)}
  .ppimg .ppthumbs button.on{border-color:var(--pinkd)}
}
/* ── the cart (2026-10-04): the giver's own gifts are added to the cart and the order is completed from it; its button is in the header on every screen and in the bottom bar on a phone ── */
.sh .cartb{position:relative;width:auto;min-width:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--on-p);cursor:pointer}
.sh .cartb .lbl,.sh .hopt{display:none}
.sh .cartb .cnt{position:absolute;top:2px;inset-inline-end:0}
.bnav [data-cart]{position:relative}
.bagi .rmt{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:8px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bagi a{color:inherit;text-decoration:none}
#cartList .bagi{grid-template-columns:54px 1fr auto}
@media (min-width:900px){
  .sh .cartb{display:inline-flex;height:40px;padding:0 12px;border-radius:999px;font-size:13.5px}
  .sh .cartb .lbl{display:inline}
  .sh .cartb .cnt{position:static;margin-inline-start:2px}
  .sh .hopt:not([hidden]){display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.55);color:var(--on-p);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
  .sh .hopt svg{width:17px;height:17px}
  .sh .hopt .cnt{position:static}
}
/* the "added to the cart" sheet: two buttons side by side, the cart first */
.cartacts{display:grid;grid-template-columns:1fr 1.2fr;gap:8px;margin-top:10px}
.cartacts .btn{width:100%}
.cartfree{margin:8px 0 0;padding:8px 12px;border-radius:12px;background:var(--tiff-soft);color:var(--tiff-deep);font-size:13px;font-weight:600;text-align:center}
.payincl{margin:6px 0 0;font-size:12px;color:var(--muted);text-align:center}
.cartfree.plain{margin:4px 0 0;padding:0;border-radius:0;background:none;color:var(--muted);font-size:12px;font-weight:400}
/* the cart page: a line per gift, with its pieces and a way to take it out */
.cartl{display:grid;gap:10px;margin:10px 16px 0}
.cline{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid #E6DEF0;border-radius:12px;background:#fff}
.cline .im img{display:block;width:46px;height:46px;border-radius:8px;object-fit:cover}
.cline .ci{display:grid;gap:1px;min-width:0;justify-items:start}
.cline .ci a{color:inherit;text-decoration:none}
.cline .ci b{font-size:13px;line-height:1.45;color:var(--p-deep);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cline .ci small{font-size:12px;color:var(--muted)}
.cline .rmt{border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:4px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cline .cq{display:grid;justify-items:end;gap:6px}
.cline .lp{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.cline .qx{font-size:13px;font-weight:600;color:var(--muted)}
.cline .stp{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--tint)}
.cline .stp button{width:36px;height:34px;border:0;background:none;color:var(--p-deep);font:inherit;font-size:18px;font-weight:600;line-height:1;cursor:pointer}
.cline .stp button:disabled{color:#C9C2D3;cursor:not-allowed}
.cline .stp output{min-width:26px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.cartl .cadds{margin:0;font-size:13px;color:var(--muted)}
.cline .ci .cwith{font-size:12px;color:var(--muted)}
.cartl .coadd{justify-self:start;border:0;background:none;color:var(--p-deep);font:inherit;font-size:13.5px;font-weight:600;padding:6px 0;cursor:pointer}

/* ───────────── journey design v1.1 (2026-10-05): one journey at a time, one main button per screen, tap targets of 44px ───────────── */
.ic{width:44px;height:44px}
.sh .mbtn{height:44px}
.chips .chip{min-height:44px}
.fltbtn{min-height:44px}
.lsrch{min-height:44px}
.lsrch input{height:42px}

/* the budget step: the question, what is paid now, three promises, one row per budget */
.ltc .title{padding-top:14px}
.ltc .title h1{font-size:18px}
.ltc .title p{font-size:13px}
.ltcprom{list-style:none;margin:10px 16px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ltcprom li{font-size:12.5px;font-weight:400;padding:5px 11px;border-radius:999px;background:var(--tint-2);color:var(--p-deep);white-space:nowrap}
.ltcprom li::before{content:"✓ "}
.brows{display:grid;gap:12px;padding:12px 16px 0}
.brow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:68px;padding:10px 16px;background:#fff;border:1.5px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none}
.brow > span{display:grid}
.brow b{font-size:15px;font-weight:600;color:var(--p-deep);line-height:1.3}
.brow small{font-size:12.5px;color:var(--muted)}
.brow .now{text-align:end}
.brow .now b{font-size:14px;color:var(--ink)}
.brow:hover,.brow[aria-pressed="true"]{border-color:var(--p-deep)}
.brow.any{background:var(--tint-2)}
/* the set's checkout: what is paid now, then one plain sentence for the rest (11 Oct 2026) */
.cotot .rows .payafter{margin:4px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink)}
@media (max-width:899px){.ltc .crumbs{display:none}}
@media (min-width:900px){.brows{max-width:560px;margin:0 auto}.ltc .title,.ltcprom{text-align:center;justify-content:center}}

/* choosing gifts for the recipient: one budget chip, cards that add on a tap, "details" under each */
#root.pickmode .gbar{margin:10px 16px 0;padding:0;background:none;border-radius:0}
.gbar .chip.bud{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:6px 15px;border:1.5px solid var(--tiff-mid);border-radius:999px;background:var(--tiff-soft);color:var(--tiff-deep);font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
.gbar .chip.bud u{font-weight:400}
#root.pickmode #grid .pcard.pc2{cursor:pointer}
#root.pickmode #grid .pcard.pc2 .img{cursor:pointer}
#root.pickmode #grid .pcard.pc2 .img img{aspect-ratio:1/.9;height:auto;object-fit:cover}
#root.pickmode #grid .pcard.pc2 .zoom{display:none}
#root.pickmode #grid .pcard.pc2 .pick{min-height:44px;border-radius:11px;background:var(--pinkd);color:#fff;font-size:13.5px;font-weight:600}
#root.pickmode #grid .pcard.pc2[aria-selected="true"] .pick{background:var(--pink-soft);color:var(--pinkd)}
#root.pickmode #grid .pcard.pc2[aria-selected="true"] .img{border-color:var(--pinkd);box-shadow:0 0 0 1.5px var(--pinkd)}
.pcard .dt{display:none}
#root.pickmode #grid .pcard .dt{display:block;width:100%;min-height:44px;border:0;background:none;color:var(--p-deep);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* the tray: photos of what is picked, how many, what is paid now, continue */
.tray .box{display:flex;align-items:center;gap:10px}
.tray .box .go{flex:none}
.tray .box .th{display:flex}
.tray .box .th:empty{display:none}
.tray .box .th img{width:40px;height:40px;border-radius:10px;border:2px solid #fff;object-fit:cover;margin-inline-start:-10px}
.tray .box .th img:first-child{margin:0}
.tray .box .tx{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.35}
.tray .box .tx b:empty{display:none}
.tray .box.lead .tx{flex-direction:column-reverse}
.tray .box.g{background:var(--pinkd);border-radius:16px;padding:9px 12px;box-shadow:0 8px 20px rgba(120,30,70,.3)}
.tray .box.g[data-bag]{cursor:pointer}
.tray .box.g small{color:#fff;opacity:.92}
.tray .box.g b{font-size:14.5px}
.tray .box.g .go{height:44px;border-radius:11px;padding:0 16px;color:var(--pinkd)}
.tray .box.g .go:disabled{background:#fff;color:var(--pinkd);opacity:.55}

/* the options sheet and the details sheet */
#bagList .bagi{grid-template-columns:54px 1fr auto}
.baghint{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.baghint:empty{display:none}
.sheet .in.dt{display:flex;flex-direction:column;gap:10px}
.sheet .in.dt img{width:100%;height:auto;aspect-ratio:1/.6;object-fit:cover;border-radius:16px;border:1px solid var(--line);display:block}
.sheet .in.dt h3{margin:0;font-size:17px}
.sheet .in.dt p{margin:0;font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}   /* a few words only: the button stays in sight under a long description */
.sheet .in.dt p:empty{display:none}
.sheet .in.dt > .btn{margin-top:0}
.dtrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dtrow b{font-size:17px;font-weight:600;color:var(--p-deep)}
.dtrow .tag{position:static;display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;background:var(--tiff-soft);color:var(--tiff-deep);font-size:12.5px;font-weight:600;white-space:nowrap}
.btn.done{background:var(--pink-soft);color:var(--pinkd);box-shadow:none}
.btn.done:hover{background:var(--pink-soft)}

/* "added to the cart": the main button completes the order, the second adds another gift */
.cartacts{grid-template-columns:1fr;gap:8px}

/* the gift's page: one button, and one plain link to the other journey */
.ppalt{display:block;min-height:44px;padding:8px 0;border:0;border-radius:0;background:none;color:var(--p-deep);font-size:13px;font-weight:400;text-align:center;text-decoration:underline;text-underline-offset:3px;width:100%}
.ppalt > svg{display:none}
.ppcta .btn.done{background:var(--pink-soft);color:var(--pinkd)}
#root.has-tray [data-screen="product"]{padding-bottom:110px}

/* the recipient's page: the giver's message as a card, signed with the same name as the title (design 1, 9 Oct 2026) */
.hero .rcard{margin:14px 0 0;background:#fff;border-radius:16px;box-shadow:0 10px 26px rgba(106,79,163,.16);padding:16px 18px 14px;padding-inline-start:44px;position:relative;text-align:center;overflow:hidden}
.hero .rcard::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:24px;width:10px;background:var(--pink-soft)}
.hero .rcard p{margin:0;position:relative;font-size:14px;font-weight:600;line-height:1.6;color:var(--on-p);white-space:pre-wrap;overflow-wrap:anywhere;max-width:none}
.hero .rcard .sig{display:block;position:relative;margin-top:8px;font-size:13px;font-weight:600;color:var(--pinkd)}

/* after payment: three numbered steps */
.dsteps{list-style:none;margin:14px 16px 0;padding:0;display:grid;gap:8px;counter-reset:ds}
.dsteps li{counter-increment:ds;display:flex;gap:10px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;font-size:13.5px;color:var(--ink)}
.dsteps li::before{content:counter(ds);flex:0 0 28px;height:28px;border-radius:50%;background:var(--p);color:var(--on-p);font-weight:600;display:flex;align-items:center;justify-content:center}
/* a wide screen names the options in the header; the cart button steps aside while options are picked, so one journey shows at a time */
@media (min-width:900px){.sh .cartb.ch{display:none}}
/* words for search engines and screen readers that the screen does not show (the service's name in front of the budget question) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
/* checkout, journey design v1.2: how many gifts the recipient takes, as options that each say what is paid now (shown from three options up) */
.kpick{margin:10px 16px 0;display:grid;gap:8px}
.kpick .coh{margin:0}
.kopts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.kopt{min-height:58px;padding:6px 8px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:all .15s}
.kopt b{font-size:13.5px;font-weight:600}
.kopt small{font-size:12px;color:var(--muted);white-space:nowrap}
.kopt.on{background:var(--p);border-color:var(--p-deep);color:var(--on-p)}
.kopt.on small{color:var(--on-p)}
/* the gift's page, last block: gifts like this one, in one row that scrolls sideways (UI/UX design v1.2) */
.ppsim{margin:18px 0 0;padding:0 16px;display:grid;gap:8px}
.ppsim h2{margin:0;font-size:15px;font-weight:600;color:var(--p-deep)}
.simrow{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scroll-snap-type:x proximity}
.simrow::-webkit-scrollbar{display:none}
.simc{flex:0 0 140px;min-width:0;display:flex;flex-direction:column;gap:3px;color:var(--ink);text-decoration:none;scroll-snap-align:start}
.simc img{width:140px;height:140px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--tint-2);display:block}
.simc .nm{font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simc .pr{font-size:14px;line-height:1.4;font-weight:600}
.simall{display:inline-flex;align-items:center;min-height:44px;justify-self:start;color:var(--p-deep);font-size:13px;text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){.ppsim{max-width:1100px;margin-inline:auto}}
/* the language link in the header: its text centred in its 42px box like the icons beside it (6 Oct 2026: it sat at the top of the box) */
.sh .langsw a{display:inline-flex;align-items:center;justify-content:center}
/* two gifts or more in the cart: all of them, or the recipient picks one (UI/UX cart choice, approved by Mohammed 7 Oct 2026). The lilac of the chosen city */
.gmode{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gmode button{min-height:58px;padding:4px 6px;border:1.5px solid var(--line);border-radius:13px;background:#fff;color:var(--p-deep);font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;cursor:pointer;transition:all .15s}
.gmode b{font-size:14px;font-weight:600}
.gmode small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gmode .on{background:var(--p);border-color:var(--p-deep);color:#3B2B57}
.gmode .on small{color:#3B2B57}
.gmode button:focus-visible{outline:2px solid var(--p-deep);outline-offset:2px}
#cartSheet .gmode{margin-top:10px}
.cartl .gmh{margin:-4px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.cartl .gmh + .gmh{margin-top:-8px;color:var(--ink);font-weight:600}

/* sign-in sheet: the name and email of a new number keep the form's own spacing (UI/UX, 7 Oct 2026) */
#signNew{display:grid;gap:16px}

/* the giver's mobile after a fixed +966 (Mohammed, 8 Oct 2026): one box, the code on the left as numbers read */
.tel966{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.tel966:focus-within{border-color:var(--p);box-shadow:0 0 0 4px rgba(106,79,163,.13)}
.tel966 span{display:flex;align-items:center;padding:0 12px;background:var(--tint-2);color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;border-right:1.5px solid var(--line);user-select:none}
.field .tel966 input{border:0;border-radius:0;box-shadow:none;flex:1;min-width:0;background:transparent}
.field .tel966 input:focus{box-shadow:none}
.field.invalid .tel966{border-color:var(--err);background:var(--err-bg)}

/* a gift's stars out of 5 (9 Oct 2026): on its page they follow the name like a word, at the end of its last line when there is room, so a rated
   gift's name is never squeezed and its button stays on the first screen; one star beside the price on its card; none before the first rating */
.pphead.hasr{display:block}
.pphead.hasr h1{display:inline}
.pphead.hasr .prate{margin:0;margin-inline-start:8px;vertical-align:2px}
.prate,.pcard .rt{display:inline-flex;align-items:center;gap:3px;line-height:1;white-space:nowrap}
.prate{font-size:14px}
.pcard .prr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 6px;width:100%}
.pcard .rt{font-size:12px}
.pcard .rt b{margin-inline-start:2px}
.prate .on,.pcard .rt .on{color:#E7A71B;letter-spacing:1px}
.prate .off,.pcard .rt .off{color:#D9D2DE;letter-spacing:1px}
.prate b,.pcard .rt b{color:var(--p-deep);font-weight:600;margin-inline-start:4px}
.prate small,.pcard .rt small{color:var(--muted);font-size:.85em}

/* a guide (9 Oct 2026): one way forward right under the answer; its «شوف كذلك» line closes the page, before the other guides */
.gnext{max-width:820px;margin:12px auto 4px;padding:0 16px;width:100%}
.gnext .btn{width:100%}
.gsee{max-width:820px;margin:18px auto 0;padding:0 16px;width:100%;font-size:14px;line-height:1.9;color:#463E52}
.gsee a{color:var(--p-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
#cartSheet #cartMode:not([hidden]){margin-bottom:10px}

/* design 2 of 9 Oct 2026, the home's first screen (Mohammed: «كلها اطلق الاصلاحات مرة وحدة»): the taste question, one line and two doors side by side,
   about 142px on a phone (it was 310), so «الأكثر إهداء» with photos, names and prices sits on the first screen, strip on or off */
.hero2.h9{padding:16px 16px 12px}
.hero2.h9 h1{font-size:18px;line-height:1.35}
.hero2.h9 h1 em{font-style:normal;color:var(--pinkd)}
.hero2.h9 p{margin:4px 0 0;font-size:13.5px;line-height:1.6;max-width:none}
.hbtns{display:flex;gap:8px;margin-top:12px}
.hbtns .btn{flex:1.3;width:auto;min-width:0;height:46px;padding:0 10px;font-size:14px;background:var(--pinkd);color:#fff;box-shadow:0 8px 18px -8px rgba(191,59,120,.55)}
.hbtns .btn:hover{background:#A82F66}
.hbtns .btn.ghost{flex:1;background:#fff;color:var(--p-deep);border:1.5px solid var(--lilac);box-shadow:none}
.hbtns .btn.ghost:hover{background:var(--tint);border-color:var(--p)}
.poptop .sec-h{padding-top:10px}
@media (max-width:899px){.poptop .sec-h h2{font-size:16px}.poptop .sec-h h2::after{display:none}.poptop .shelf{padding-top:10px}}
@media (min-width:900px){.hero2.h9{padding:34px 40px 0}.hero2.h9 h1{font-size:22px}.hero2.h9 p{font-size:15.3px;margin-top:10px}.hbtns{max-width:460px;margin-top:22px}.hbtns .btn{height:52px;font-size:15px}}

/* The title sentence, phase 1 (UI/UX, 9 Oct 2026; Mohammed sent it to be built: «ارسله»): «هدايا [عيد ميلاد] [لأي أحد]». The words 14.5/400 and the slots
   13.5/600, as Mohammed sized them, never bigger on a wide screen; a filled word is pink, an empty one lavender. The empty words follow the h1 on its line. */
.title.snt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 5px;padding:10px 16px 0}
.title.snt h1{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 5px;margin:0;font-size:14.5px;font-weight:400;line-height:1.5;color:var(--on-p);text-wrap:wrap}
.snt .slot{display:inline-flex;align-items:center;gap:3px;min-height:24px;padding:1px 8px 1px 6px;border:0;border-bottom:1.5px solid var(--pinkd);border-radius:10px;background:var(--pink-soft);color:var(--pinkd);font-size:13.5px;font-weight:600;line-height:1.5;cursor:pointer;transition:transform .15s}
.snt .slot:active{transform:scale(.96)}
.snt .slot.none{background:var(--tint-2);color:var(--p-deep);border-bottom-color:var(--p-soft)}
.snt .slot svg{flex:none}
.snt .slot:focus-visible{outline:2px solid var(--p-deep);outline-offset:2px}
.snt .scnt{flex-basis:100%;margin:0;font-size:12px;font-weight:400;line-height:1.4;color:var(--muted)}
.snt .scnt b{font-weight:400}
/* the headings of «عن الصفحة» stay real h2s (SEO), only smaller than the sentence */
[data-snt] .seo h2{font-size:14px}
/* its two questions: one sheet each, a radio and a small count per row, one tap picks */
.snts h3{font-size:16px;margin:0 0 4px}
.snts .opts{display:flex;flex-direction:column}
.snts .opt{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font-size:14px;font-weight:400;text-align:start;text-decoration:none;cursor:pointer}
.snts .opt:last-child{border-bottom:0}
.snts .opt span{flex:1}
.snts .opt small{font-size:12px;color:var(--muted)}
.snts .opt .rd{flex:none;box-sizing:border-box;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--p-soft);background:#fff}
.snts .opt.on{color:var(--pinkd);font-weight:600}
.snts .opt.on .rd{border:5px solid #fff;background:var(--pinkd);box-shadow:0 0 0 1.5px var(--pinkd)}
/* the sheets as the prototype draws them (client side, 9 Oct 2026): a grab bar, the question 16px/600 in the deep ink, a short rise from the bottom */
.snts .in{padding-top:10px;animation:sntup .32s cubic-bezier(.2,.8,.2,1)}
.snts .in::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.snts h3{color:var(--on-p);font-weight:600}
.snts .opt:focus-visible{outline:2px solid var(--p-deep);outline-offset:-2px;border-radius:10px}
@keyframes sntup{from{transform:translateY(40%);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.snts .in{animation:none}}
/* while options are picked for the recipient the h1 says so (cat_h): the sentence's other words and its hint step aside until the set ends */
.snt.setm > .slot,.snt.setm .scnt span{display:none}
/* the gift page's back chip (UX item 7): one small lavender chip naming the list. On a phone the photo gives up exactly the chip's height
   (10 + 32 - 2 of the space under it, so 40px), so «أضف للسلة» stays where it is today on the first 375×667 screen (Mohammed's rule) */
.ppback{display:flex;padding:10px 16px 0}
.backc{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:32px;padding:0 10px 0 12px;border:0;border-radius:16px;background:var(--tint-2);color:var(--p-deep);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer}
.backc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.backc svg{flex:none}
.backc:active{transform:scale(.97)}
.backc:focus-visible{outline:2px solid var(--p-deep);outline-offset:2px}
@media (max-width:899px){
  .ppback + .pp{padding-top:8px}
  .ppback + .pp .ppimg #ppImg{aspect-ratio:auto;height:calc((100vw - 34px) * .82 - 40px)}
  .ppback + .pp.hasx .ppimg #ppImg{height:calc((100vw - 34px) * .66 - 40px)}   /* the pages whose photo is already shorter (pieces counter, ring size) */
}
/* «الأقسام» marks the choice: a pink chip with a dot; a pink frame and a dot on the type's photo. A way to a ?for= view is a button that looks the same. */
.menu .mtiles [data-mcat]{position:relative}
.menu .mtiles button{display:grid;justify-items:center;align-content:start;gap:6px;padding:0;border:0;background:none;color:var(--ink);font-size:12.5px;font-weight:600;text-align:center;line-height:1.35;cursor:pointer}
.menu .mtiles .on{color:var(--pinkd)}
.menu .mtiles .on img{box-shadow:0 0 0 2.5px var(--pinkd)}
.menu .mtiles .dot{position:absolute;top:7px;inset-inline-end:7px;box-sizing:border-box;width:14px;height:14px;border-radius:50%;background:var(--pinkd);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.menu .mchips button{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:400;cursor:pointer}
.menu .mchips .on{gap:6px;background:var(--pinkd);border-color:var(--pinkd);color:#fff;font-weight:600}
.menu .mchips .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#fff}

/* A sentence page is the UI/UX prototype's listing (proto2.html, V.list), value for value. Mohammed, 9 Oct 2026, on the first build's filter row:
   «الافضل تمشي بنفس التصميم حق ال UX لا تغيره كذا تصير خطوتين للعميل عشان يفلتر». Top to bottom, 10px apart: the sentence and its count, the taste
   strip, the type chips, the gifts. No filter button, no search field in the page (the header's magnifier stays), no sort. */
[data-snt] .title.snt{gap:6px 5px;padding:12px 16px 0}
[data-snt] .title.snt h1{gap:6px 5px}
[data-snt] .snt .slot{min-height:0;padding:2px 8px 2px 6px;line-height:1.45}
.hlite.taste{display:flex;align-items:center;gap:10px;margin:10px 16px 0;padding:9px 12px;border-radius:14px;background:var(--pink-soft);text-align:start}
.hlite.taste i{flex:none;width:30px;height:30px;border-radius:9px;background:#fff;color:var(--pinkd);display:flex;align-items:center;justify-content:center}
.hlite.taste i svg{width:15px;height:15px}
.hlite.taste b{font-size:13.5px;font-weight:600;color:var(--pinkd);line-height:1.45}
.hlite.taste small{font-size:11.5px;font-weight:400;color:#5E5670;line-height:1.45}
[data-snt] .chips{gap:6px;padding:10px 16px 0}
[data-snt] .chips .chip{flex:none;display:flex;align-items:center;gap:6px;height:36px;min-height:36px;padding:0 14px;border:1.5px solid #E3DAF0;border-radius:18px;background:#fff;color:var(--on-p);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;transition:background .2s,border-color .2s}
[data-snt] .chips .chip.on{background:var(--p);border-color:var(--p-deep);color:var(--on-p)}
[data-snt] .chips .chip:focus-visible{outline:2px solid var(--p-deep);outline-offset:2px}
[data-snt] .grid{padding-top:10px}
/* a choice with no gift: the prototype's empty state, a dashed card with its ways out */
.grid .empty.snte{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border:1px dashed var(--p);border-radius:14px;background:#fff;text-align:center}
.empty.snte p{margin:0;color:#5E5670;font-size:14px}
.empty.snte .btn2{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border:1.5px solid var(--p);border-radius:12px;background:#fff;color:var(--on-p);font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer}

/* review of the type change (9 Oct 2026): every field a customer types into stays at 16px, last so no later rule shrinks it (iPhone zooms below 16px) */
.field input,.field textarea,.sform input,.msgta textarea,.lsrch input,.rate textarea{font-size:16px}
/* the recipient's landing for a set: the «اختر n من m» line under the message card gets its own space */
.hero .rcard + p{margin-top:10px}
/* English gift pages: Plex's Latin is wider, so the two delivery chips sit a little tighter to stay on one line at 375px */
html[lang="en"] .pprow .ppline{gap:4px}
html[lang="en"] .pprow .ppline span{padding:4px 8px;gap:4px}

/* the word sheets look like the prototype's (review, 9 Oct 2026) */
.snts{background:rgba(36,22,58,.45)}
.snts .in{border-radius:22px 22px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.snts .in::before{background:#E3DAF0}
.snts .opt{border-bottom-color:#F1EDF5}

/* «إلغاء التصفية» after the last word of the sentence (9 Oct 2026): pink and live when a word is chosen, grey and off when not; it wraps with the line */
.snt .rst{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;border:1.5px solid #BF3B78;background:#fff;color:#BF3B78;font:600 12px var(--body);cursor:pointer;flex:none}
.snt .rst[disabled]{border-color:#E3DAF0;color:#B4ACC0;cursor:default}
.snt .rst svg{flex:none}
/* «مسح» in the corner of a word's sheet clears that one word */
.snts h3{display:flex;justify-content:space-between;align-items:center;gap:10px}
.snts h3 .clr{border:0;background:none;padding:6px 0;font:400 13px var(--body);color:#6A4FA3;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Sold out (inventory phase 1, 11 Oct 2026; Mohammed: «تكون لونها رمادي مثلا وعليها tag»): the card is greyed, its tag says so, and it stays a link.
   While options are picked the card steps back and loses its button. The gift's page gets one disabled button, the sold-out chip, and «باقي N» when few are left:
   one small pink line under the price row, not a third chip (a chip cut the fee chip at 375, site reviewer 11 Oct). */
.pcard.so .img img{filter:grayscale(1);opacity:.55}
.pcard.so .nm,.pcard.so a.nm,.pcard.so .pr,.pcard.so .pr s{color:var(--muted)}
.pcard.pc2 .tag.so,.ppline .sp.so{background:#ECEAEF;color:#6E6878}
#root.setmode .pcard.so{opacity:.6}
#root.setmode .pcard.so .pick,#root.setmode .pcard.so .dt{display:none}
.ppleft{margin:-3px 0 0;font-size:13px;font-weight:600;line-height:1.4;color:var(--pinkd)}
.ppcta.so{grid-template-columns:1fr;gap:6px}
.ppcta.so .btn:disabled{background:#ECEAEF;color:#6E6878;cursor:not-allowed;box-shadow:none}
.ppso{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.ppso a{color:var(--pinkd);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* the recipient's page: a sold-out option is greyed, tagged «غير متوفرة حاليا», and has no button */
.rview .pcard.so .img img{filter:grayscale(1);opacity:.55}
.rview .pcard.so .nm{color:var(--muted)}
.rview .pcard .tag.so{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:6px;font-size:11.5px;font-weight:600;line-height:1.6;background:#ECEAEF;color:#6E6878}
/* a gift list: a sold-out gift shows like a taken one, with a grey mark */
.wlcard .tk.so{background:#6E6878}
/* ───── the card messages library «عبارات» (14 Oct 2026; UI/UX design on the eye-friendly scale: h1 18/600, h2 15/600, messages 14/400, actions 12/600) ───── */
.mpage .title h1{font-size:18px;font-weight:600;line-height:1.4;margin:0;color:var(--on-p);text-wrap:balance}
.mlead{padding-top:6px;font-size:13px;line-height:1.7;color:#5E5670}
.mh{padding:18px 16px 0;max-width:820px;margin:0 auto;width:100%;font-size:15px;font-weight:600;color:var(--p-deep);line-height:1.4;scroll-margin-top:70px}
.mrows{display:grid;gap:10px;padding:10px 16px 0;max-width:820px;margin:0 auto;width:100%}
.mrow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 10px;text-decoration:none;color:inherit;min-width:0}
.mrow .g{flex:1;min-width:0}
.mrow b{display:block;font-size:13.5px;font-weight:600;color:var(--on-p);line-height:1.45}
.mrow small{display:block;font-size:11.5px;color:#9A91A8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow em{flex:none;font-style:normal;font-size:11px;color:var(--muted);background:var(--tint-2);border-radius:999px;padding:1px 8px;white-space:nowrap}
.mrow > svg{flex:none;color:var(--muted)}
.mjump{display:flex;gap:6px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none;max-width:820px;margin:0 auto;width:100%}
.mjump::-webkit-scrollbar{display:none}
.mjump a{flex:none;display:flex;align-items:center;height:30px;padding:0 11px;border-radius:15px;border:1px solid #E3DAF0;background:#fff;font-size:12px;font-weight:600;color:var(--on-p);text-decoration:none}
.mcards{display:grid;gap:10px;padding:10px 16px 0;max-width:820px;margin:0 auto;width:100%}
.mcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px 8px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mcard p{margin:0;font-size:14px;line-height:1.75;color:#2F2840}
.macts{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #F3EFF7;padding-top:7px}
.mcopy,.msend{display:inline-flex;align-items:center;gap:5px;height:30px;border:0;font:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer}
.mcopy{padding:0 10px;border-radius:15px;background:var(--tint-2);color:var(--p-deep)}
.mcopy.done{background:#DDF5F2;color:#0B5F5B}
.msend{padding:0 4px;background:none;color:var(--pinkd);font-size:12.5px}
.mcopy:focus-visible,.msend:focus-visible,.mlhelp:focus-visible,.mlchg:focus-visible,.mlx:focus-visible,.mstrip .x:focus-visible{outline:2px solid var(--p-deep);outline-offset:2px}
.mlink{padding:14px 16px 0;max-width:820px;margin:0 auto;width:100%}
.mlink a{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--p-deep);text-decoration:none}
.mlink a span{flex:1}
.msib{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 0;max-width:820px;margin:0 auto;width:100%}
.msib a{display:flex;align-items:center;height:32px;padding:0 12px;border-radius:16px;background:var(--tint-2);color:#4A3570;font-size:12.5px;font-weight:600;text-decoration:none}
/* the pink strip on a listing while a message waits for the card */
.mstrip{display:flex;align-items:center;gap:8px;margin:10px 16px 0;background:var(--pink-soft);border-radius:12px;padding:8px 10px}
.mstrip > svg{flex:none;color:var(--pinkd)}
.mstrip .g{flex:1;min-width:0}
.mstrip b{display:block;font-size:12px;font-weight:600;color:var(--pinkd)}
.mstrip small{display:block;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstrip .x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:var(--pinkd);font-size:18px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
/* the gift page's card line: where its text came from, and the way to five messages */
.ppadd .mlrow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 2px 0;font-size:11.5px;color:#9A91A8}
.ppadd .mlrow .mlchg{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--pinkd);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ppadd .mlrow .mlx{border:0;background:none;padding:0 4px;font-size:18px;line-height:1;color:#9A91A8;cursor:pointer}
.ppadd .mlhelp{display:block;border:0;background:none;padding:4px 2px 0;font:inherit;font-size:11.5px;font-weight:600;color:var(--pinkd);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mlsheet{background:rgba(36,22,58,.45)}
.mlsheet .in{padding-top:10px;border-radius:22px 22px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.mlsheet .in::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:#E3DAF0;margin:0 auto 12px}
.mlsheet h3{font-size:15px;font-weight:600;color:var(--on-p);margin:0 0 8px}
.mlrows{display:grid;gap:8px}
.mlrows button{display:flex;gap:8px;align-items:flex-start;width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px 10px;font:inherit;font-size:13.5px;line-height:1.65;color:var(--ink);text-align:start;cursor:pointer}
.mlrows button i{flex:none;margin-top:2px;width:22px;height:22px;border-radius:50%;background:var(--tint-2);color:var(--p-deep);font-style:normal;display:grid;place-items:center;font-size:16px;line-height:1}
.mlrows .wait{padding:8px;text-align:center;color:var(--muted);font-size:13px}
.mlmore{display:block;margin:10px auto 0;padding:4px;text-align:center;font-size:12.5px;font-weight:600;color:var(--p-deep);text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){.mcards{grid-template-columns:1fr 1fr}}
/* ───── a cake that goes with a bouquet (16 Oct 2026, backlog 56; UI/UX design v5 at 375) ───── */
.pppair{display:flex;align-items:center;gap:6px;margin:0;padding:8px 10px;border-radius:12px;background:var(--pink-soft);font-size:12.5px;line-height:1.5;color:var(--ink)}
.pppair svg{flex:none;color:var(--pinkd)}
.pppair b{color:var(--pinkd);font-weight:600}
.pshelf{margin:10px 0 2px}
.psh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px}
.psh b{font-size:13px;font-weight:600;color:var(--on-p)}
.psh a{font-size:12px;font-weight:600;color:var(--pinkd);text-decoration:underline;text-underline-offset:3px}
.pst{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pst::-webkit-scrollbar{display:none}
.ptile{position:relative;flex:0 0 100px;width:100px;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 0 8px;overflow:hidden;text-decoration:none;color:inherit}
.ptile .im img{display:block;width:100px;height:100px;object-fit:cover}
.ptile .pn{padding:0 7px;font-size:11.5px;line-height:1.4;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile b{padding:0 7px;font-size:12px;font-weight:600;color:var(--on-p)}
.ptile .pplus{position:absolute;top:70px;inset-inline-end:6px;width:26px;height:26px;border:0;border-radius:50%;background:#B5487C;color:#fff;font-size:18px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
.ptile.on{border-color:#0B5F5B}
.ptile.on .pplus{background:#DDF5F2;color:#0B5F5B}
.ptile.on .pplus svg{width:14px;height:14px}
.ptile.pall{justify-content:center;align-items:center;text-align:center;padding:8px;background:var(--tint-2);gap:4px}
.ptile.pall span{font-size:12px;font-weight:600;color:var(--p-deep);line-height:1.4}
.ptile.pall small{font-size:11px;color:var(--muted)}
.pok,.sheet p.pok{display:inline-flex;line-height:1.4;align-items:center;gap:6px;margin:8px 0 0;padding:6px 10px;border-radius:10px;background:#DDF5F2;font-size:12px;font-weight:600;color:#0B5F5B}
.pok svg{width:14px;height:14px;flex:none}
.pnone{margin:0 0 8px;font-size:12.5px;color:var(--ink)}
.pneed,.cline .ci small.pneed{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--pinkd)}
.pneed svg{width:13px;height:13px;flex:none;color:var(--pinkd)}
.cpair{padding:0 0 4px}
.payblock{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:12px;font-weight:600;color:var(--pinkd)}
.payblock svg{flex:none}
#payBtn.waiting{background:#E6DEF0;color:#9A91A8;box-shadow:none}
.ctabar.solid{background:#FCFAFE;border-top:1px solid #F1ECF7}
.pstrip{display:flex;align-items:center;gap:8px;margin:10px 16px 0;background:var(--pink-soft);border-radius:12px;padding:8px 10px}
.pstrip > svg{flex:none;color:var(--pinkd)}
.pstrip .g{flex:1;min-width:0}
.pstrip b{display:block;font-size:12px;font-weight:600;color:var(--pinkd)}
.pstrip small{display:block;font-size:12px;color:var(--ink)}
.pstrip .x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:var(--pinkd);font-size:18px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
.pcard .padd{margin:6px 8px 0;height:32px;border:0;border-radius:10px;background:#B5487C;color:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.pickmode .pcard[data-pair]:not([data-pairset]),.wlmode .pcard[data-pair],#root:not(.pickmode) .pcard[data-pairset]:not(.inset){display:none}
/* phase 2 (backlog 56): the pair card in «خله يختار», the bouquet sheet, the recipient's two-photo card */
.pwith{display:flex;align-items:center;gap:4px;width:100%;margin-top:2px;font-size:11px;font-weight:600;color:#BF3B78}
.pwith svg{width:12px;height:12px;flex:none}
#root.pickmode #grid .pcard.pc2[data-pairset]:not([aria-selected="true"]) .pick{background:#fff;color:#B5487C;box-shadow:inset 0 0 0 1.5px #B5487C}
#root.pickmode #grid .pcard.pc2[data-pairset] .pick svg{width:14px;height:14px}
.sheet p.ppick{margin:0 0 6px;font-size:12.5px}
.ptile .pplus[aria-pressed="true"]{background:#DDF5F2;color:#0B5F5B}
.rpair .two{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:1;background:#fff;overflow:hidden}
.rpair .two img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.rpair .plus2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#fff;color:#B5487C;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:18px;line-height:1;box-shadow:0 1px 4px rgba(40,34,50,.18)}
.rpair .tog{display:block;font-size:11px;color:#746C80}
/* back from the vendor's list (16 Oct 2026): the gift's card says it is in the cart with a bouquet, and a bar leads to the cart */
.pinc{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:3px 8px;border-radius:999px;background:#DDF5F2;color:#0B5F5B;font-size:11.5px;font-weight:600}
.pinc svg{width:12px;height:12px;flex:none}
.pinc.pp{display:flex;width:max-content;margin:8px 0 0;margin-inline-end:auto}
.pwith-cart,.sheet p.pwith-cart{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:12px;color:var(--muted)}
.pwith-cart svg{width:13px;height:13px;flex:none;color:#0B5F5B}
.pbar{position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:27;max-width:736px;margin:0 auto;display:flex;align-items:center;gap:10px;background:#B5487C;color:#fff;border-radius:14px;padding:10px 12px 10px 10px;box-shadow:0 18px 40px -16px rgba(40,34,50,.75)}
.pbar span{flex:1;min-width:0;font-size:13px;font-weight:600}
.pbar .pcta{flex:none;height:38px;border:0;border-radius:10px;background:#fff;color:#B5487C;font:inherit;font-size:13px;font-weight:600;padding:0 12px;cursor:pointer}
#root.has-pbar .screen.w{padding-bottom:140px}
.pcard .img .pwb{position:absolute;left:8px;bottom:8px;width:40px;height:40px;aspect-ratio:1;border-radius:50%;border:2px solid #fff;object-fit:cover;box-shadow:0 1px 4px rgba(40,34,50,.18);background:#fff}
.tray .box .th .thp{position:relative;display:inline-block;margin-inline-start:-10px}
.tray .box .th .thp:first-child{margin:0}
.tray .box .th .thp > img:first-child{margin:0}
.tray .box .th .thp .b{position:absolute;left:-4px;bottom:-4px;width:20px;height:20px;margin:0;border-radius:50%;border:2px solid #fff}
#cartPair .pshelf{margin-top:12px}
/* the shelf scrolls inside the cart's grid without widening it */
.cartl{grid-template-columns:minmax(0,1fr)}
.cartl > .cpair{min-width:0}
.cline.needpair{border-color:#F0B9D0}
/* the phone's search screen (UI/UX release «البحث بالجوال», 16 Oct 2026): the whole screen, the field with a round «بحث» beside it, then the blocks.
   The design's own colours; Plex at 400 and 600 only */
.msrch{position:fixed;inset:0;z-index:80;height:100dvh;background:#fff;display:flex;flex-direction:column;color:var(--ink)}
.msrch svg{flex:none}
.mbar{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:#fff;border-bottom:1px solid #F1ECF7}
.mbk{flex:none;width:34px;height:42px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;color:#3B2B57;cursor:pointer}
.mbk svg{width:22px;height:22px}
.msrch .sin,.sbarw .sin{flex:1;min-width:0;height:42px;border-radius:21px;background:#F4EFFA;display:flex;align-items:center;gap:8px;padding:0 14px;color:#9A91A8}
.msrch .sin:focus-within{box-shadow:0 0 0 2px #D9CCEF}
.msrch .sin input,.sbarw .sin input{flex:1;min-width:0;height:100%;min-height:0;border:0;border-radius:0;background:none;padding:0;margin:0;font:inherit;font-size:16px;color:#2F2840;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none}
.msrch .sin input::placeholder,.sbarw .sin input::placeholder{color:#9A91A8}
.msrch .sin input::-webkit-search-cancel-button,.sbarw .sin input::-webkit-search-cancel-button{display:none}
.sx{flex:none;width:34px;height:34px;margin-inline-end:-8px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sx svg{width:22px;height:22px;padding:5px;border-radius:50%;background:#E3DAF0;color:#6A4FA3}
.sgo{flex:none;width:40px;height:40px;border-radius:50%;background:#B5487C;color:#fff;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.msrch .blk{padding:12px 16px 0;display:flex;flex-direction:column;gap:8px}
.msrch .bh{margin:0;font-size:12.5px;font-weight:600;color:#746C80;line-height:1.4}
.msrch .chs{display:flex;flex-wrap:wrap;gap:6px}
.msrch .rq,.msrch .pq{height:32px;padding:0 12px;border-radius:16px;border:1px solid #E6DEF0;background:#fff;font:inherit;font-size:12.5px;color:#3A3542;display:flex;align-items:center;gap:5px;cursor:pointer;line-height:1}
.msrch .rq svg,.msrch .pq svg{width:15px;height:15px;color:#9A91A8}
.msrch .rc{display:flex;align-items:center;height:32px;border-radius:16px;border:1px solid #E6DEF0;background:#F7F3FB}
.msrch .rc .rq{height:30px;border:0;background:none;padding-inline-end:2px}
.msrch .rx{flex:none;width:30px;height:30px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.msrch .rx svg{width:18px;height:18px;padding:3.5px;border-radius:50%;background:#E6DEF0;color:#6A4FA3}
.msrch .occ{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:0 16px 2px}
.msrch .occ::-webkit-scrollbar{display:none}
.msrch .oc{flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;line-height:1.3;color:#3A3542;text-align:center;text-decoration:none}
.msrch .oc i{width:52px;height:52px;border-radius:50%;background:#F1EAFA;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:22px}
.msrch .cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.msrch .mt{display:block;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #ECE6F3;text-decoration:none}
.msrch .mt img{display:block;width:100%;height:72px;object-fit:cover;background:#F1EAFA}
.msrch .mt b{display:block;padding:5px 6px;font-size:12px;font-weight:600;color:#3B2B57;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msrch .lbl{margin:0;padding:10px 16px 2px;font-size:11.5px;font-weight:600;color:#9A91A8}
.msrch .sug{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 16px;border-bottom:1px solid #F5F1F9;font-size:13.5px;color:#3A3542;text-decoration:none}
.msrch .sug svg{width:16px;height:16px;color:#9A91A8}
.msrch .sug span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msrch .sug em{flex:none;font-style:normal;font-size:11.5px;color:#9A91A8}
.msrch mark{background:none;color:#6A4FA3;font-weight:600}
.msrch .res{display:flex;align-items:center;gap:10px;padding:8px 16px;color:inherit;text-decoration:none}
.msrch .res:active,.msrch .sug:active{background:#F7F3FB}
.msrch .res img{flex:none;width:48px;height:48px;border-radius:10px;object-fit:cover;border:1px solid #EEE8F5;background:#F1EAFA}
.msrch .res .g{flex:1;min-width:0;display:grid}
.msrch .res b{font-size:13px;font-weight:400;color:#3A3542;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msrch .res small{font-size:12.5px;font-weight:600;color:#6A4FA3}
.msrch .res small s{color:#9A91A8;font-weight:400}
.msrch .allr{margin:6px 16px 0;height:40px;border-radius:12px;background:#F1EAFA;color:#6A4FA3;font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center;text-decoration:none}
.msrch .none{padding:22px 16px 6px;text-align:center;display:grid;gap:2px}
.msrch .none b{font-size:15px;font-weight:600;color:#3B2B57}
.msrch .none span{font-size:12.5px;color:#746C80}
/* the results page (items 12, 14 and 15): the count and the sort on one line, a chip per type found. On a laptop the field and «بحث» are as before;
   on a phone the bar is slim and sticky under the header, and a tap on the word opens the search screen */
.sbarw .sform{align-items:center}
.sbarw .sin{height:50px;border-radius:12px;border:1.5px solid var(--line);background:#fff}
.sbarw .sin:focus-within{border-color:var(--p);box-shadow:0 0 0 4px rgba(106,79,163,.13)}
.sbarw .sgo{width:auto;height:50px;border-radius:12px;padding:0 20px;background:var(--pinkd);color:#fff;font-size:15px;font-weight:600}
.sbarw .sgo svg{display:none}
.rmeta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px 0;font-size:12.5px;color:#746C80}
.rmeta p{margin:0;min-width:0}
.rmeta p b{color:#3B2B57;font-weight:600}
.ssort{position:relative;flex:none;display:flex;align-items:center;gap:4px;height:30px;padding:0 10px;border:1px solid #E3DAF0;border-radius:15px;background:#fff;color:#6A4FA3;font-size:12px;font-weight:600}
.ssort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer}
.ssort:focus-within{box-shadow:0 0 0 2px #D9CCEF}
.chips.tch{gap:6px;padding:10px 16px 2px}
.chips.tch .chip{min-height:0;height:32px;padding:0 12px;border-radius:16px;border:1px solid #E3DAF0;background:#fff;font-size:12.5px;font-weight:600;color:#3B2B57;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.chips.tch .chip.on{background:#E6DBF6;border-color:#B9A2E3;color:#3B2B57}
.chips.tch small{font-size:11px;font-weight:400;color:#9A91A8}
@media (max-width:767px){
  .stitle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sbarw{position:sticky;top:var(--shh,70px);z-index:20;padding:8px 16px;background:#fff;border-bottom:1px solid #F1ECF7}
  .sbarw .sform{padding:0}
  .sbarw .sin{height:40px;border-radius:20px;border:0;background:#F4EFFA}
  .sbarw .sin:focus-within{box-shadow:0 0 0 2px #D9CCEF}
  .sbarw .sin input{cursor:pointer}
  .sbarw .sgo{width:38px;height:38px;padding:0;border-radius:50%;background:#B5487C;color:#fff}
  .sbarw .sgo svg{display:block}
  .sbarw .sgo span{display:none}
}
/* the options are full (16 Oct 2026): a card and the gift page's button offer a swap, outlined; the full sheet's line under its title */
/* a list open on another listing: the cards within its budget carry the set's pink button */
#root .pcard.pc2.inset .pick{display:flex;margin-top:6px;min-height:44px;border-radius:11px;background:var(--pinkd);color:#fff;font-size:13.5px;font-weight:600}
#root .pcard.pc2.inset[aria-selected="true"] .pick{background:var(--pink-soft);color:var(--pinkd)}
#root .pcard.pc2.inset[data-pairset]:not([aria-selected="true"]) .pick{background:#fff;color:#B5487C;box-shadow:inset 0 0 0 1.5px #B5487C}
#root .pcard.pc2.inset[data-pairset] .pick svg{width:14px;height:14px}
.pcard.pairhid{display:none}
#root .gbar.obud{margin:10px 16px 0;padding:0;background:none;border-radius:0}
/* the tray keeps «تدفع الآن 132 ريال» on one line: at a phone's width two photos, the amount at 13px */
.tray .box .dep{white-space:nowrap}
@media (max-width:400px){.tray .box .th > :nth-child(n+3){display:none}.tray .box .dep{font-size:13px}}
.pcard.swap .pick,#root.pickmode #grid .pcard.pc2.swap .pick,#root .pcard.pc2.inset.swap .pick{background:#fff;color:var(--pinkd);box-shadow:inset 0 0 0 1.5px var(--pinkd)}
.btn.swap{background:#fff;color:var(--pinkd);border:1.5px solid var(--pinkd);box-shadow:none}
#bagSub.full{margin:2px 0 10px;color:var(--pinkd);font-weight:600;font-size:14px}
#bagSheet.full .in{display:flex;flex-direction:column;overflow:hidden;padding-top:8px}
#bagSheet.full .bagl{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:6px 0 10px}
#bagSheet.full .bagi{grid-template-columns:44px 1fr 44px;min-height:56px;padding:6px 6px 6px 4px;gap:10px}
#bagSheet.full .bagi img{width:44px;height:44px}
#bagSheet.full .bagi b{font-size:13.5px;line-height:1.35}
#bagSheet.full #bagMore{flex:none;margin-top:0}
#bagSheet .grab{display:block;width:100%;height:24px;margin:0 0 6px;padding:0;border:0;background:none;cursor:pointer}
#bagSheet .grab::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto}
.rmx{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rmx svg{width:26px;height:26px;padding:6px;border-radius:50%;background:var(--tint-2);color:var(--p-deep)}
/* the gift page's way back to one gift while options are picked */
.ppone{display:block;width:100%;margin:6px 0 0;min-height:44px;padding:8px 12px;border:0;background:none;color:var(--p-deep);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* how to pay (payment choice v5 of UI/UX, 17 Oct 2026): a row per way with its owner's mark (never recoloured); Apple Pay and Tabby rows shown by the script */
.pmeth{display:grid;gap:8px;margin:14px 16px 4px}
.pmeth .coh{margin:0}
.pml{display:flex;flex-direction:column;border:1px solid #ECE6F3;border-radius:14px;background:#fff;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.pmeth.need .pml{border-color:#B5487C;box-shadow:0 0 0 3px rgba(181,72,124,.18)}
.pr{position:relative;display:flex;align-items:center;gap:10px;padding:0 12px;min-height:52px;font-size:13.5px;font-weight:600;color:#3A3542;cursor:pointer}
.pr[hidden],.tbx[hidden],.pmerr[hidden]{display:none}
.pr:not([hidden]) ~ .pr{border-top:1px solid #F3EFF7}
.pr input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pr:focus-within{outline:2px solid var(--p);outline-offset:-2px}
.pr i.rd{width:18px;height:18px;border-radius:50%;border:1.5px solid #CDBCEA;flex:0 0 auto;box-sizing:border-box}
.pr.on{background:#FBF7FE}.pr.on i.rd{border:5px solid #B5487C}
.pr .pn small{display:block;font-size:11.5px;font-weight:400;color:#746C80}
.pr .lg{margin-inline-start:auto;display:flex;gap:5px;align-items:center}
.pr.off{opacity:.5;cursor:not-allowed}
.pr.mute{background:#FAF8FC;cursor:default}.pr.mute .lgi{opacity:.45}.pr.mute .pn{color:#9A91A8}.pr.mute i.rd{background:#F3EFF7;border-color:#E3DAF0}
.pr .pn small.pmd{color:#6A4FA3;font-weight:600}.pr .pn small.pmd.say{color:#BF3B78}
.lgi{display:block;height:24px;width:auto}.lg-md,.lg-tb{height:22px}
.lg-tm{height:22px}.fpay .fl-tm{height:18px}
.tmline{margin-top:0}.tmline tamara-widget{display:inline-block;height:18px;overflow:hidden}
.bnline{gap:6px}.bnline .lgb{background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;position:relative;z-index:2;border-bottom:1.5px dotted var(--pinkd)}.bnline .lgb::after{content:'';position:absolute;inset:-13px -4px}.bnline .lgb img{height:18px;width:auto}
.bnline .tmw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lg-vi{height:18px}.lg-mc{height:26px}
.pr .lgw{display:flex;gap:5px;align-items:center}
.tbx{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px;background:#FBF7FE}
.tbnote{margin:0;font-size:12.5px;color:#5E5670;line-height:1.6}
.tbx .field{margin:0}
.pmerr{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:#BF3B78;font-weight:600;padding:0 12px 10px;margin:0;background:#fff}
/* the gift page's Tabby line, and Tabby's own pop-up in a sheet on the same page */
.tbline{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--muted);flex-wrap:wrap;min-height:24px}
.tbline img{display:block;height:18px;width:auto}
.tbline .lnk{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--pinkd);text-decoration:underline;cursor:pointer}
.tbsheet .in{height:85vh;max-height:85vh;padding:0;display:flex;flex-direction:column;overflow:hidden}
.tbtop{display:flex;align-items:center;padding:4px 8px 0}
.tbtop .grab{flex:1;height:28px;border:0;background:none;position:relative;cursor:pointer}
.tbtop .grab::before{content:'';position:absolute;left:50%;top:11px;width:40px;height:5px;border-radius:3px;background:#DDD3EA;transform:translateX(-50%)}
.tbtop .x{width:40px;height:40px;border:0;background:none;font-size:18px;color:var(--muted);cursor:pointer}
.tbsheet iframe{flex:1;width:100%;border:0;background:#fff}
/* a gift sent as it is stays a surprise on the recipient's page until it arrives (18 Oct 2026) */
.rsur{width:56px;height:56px;border-radius:12px;background:var(--tint-2);display:grid;place-items:center;font-size:28px;flex:none}
.rsurbox{margin:auto 24px 0;display:grid;justify-items:center;gap:8px;text-align:center}.rsurbox b{font-size:16px;font-weight:600}.rsurbox small{font-size:14px;color:var(--muted)}
.rsur.big{width:72px;height:72px;border-radius:16px;font-size:36px;margin-bottom:4px}
/* the gift page's button row (UI/UX «خله يختار» A, 20 Oct 2026): two buttons side by side, two lines each; one button when the second has no place */
.ppcta{grid-template-columns:1.6fr 1fr;gap:8px;align-items:stretch}
.ppcta.one,.ppcta.so{grid-template-columns:1fr}
.ppcta .btn[data-ppa],.ppcta .ppltc{height:56px;min-height:56px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 8px;line-height:1.2;min-width:0}
.ppcta .btn[data-ppa] b,.ppcta .ppltc b{display:block;font-size:15px;font-weight:600;max-width:100%}
.ppcta .btn[data-ppa] small,.ppcta .ppltc small{display:block;font-size:11.5px;font-weight:400;max-width:100%}
.ppltc{border:1.5px solid #B5487C;background:#fff;color:#B5487C;font:inherit;cursor:pointer;text-align:center}
.ppltc[hidden]{display:none}
.ppcta .ppone{grid-column:1/-1}
#root[dir="ltr"] .ppcta:not(.one):not(.so){grid-template-columns:1.3fr 1fr}   /* English: «Let them choose» needs the wider second button (UI/UX, 20 Oct) */
/* the service page (UI/UX «خله يختار» B, 20 Oct 2026): what the recipient sees comes first, then the budget question */
.ltcsee{display:flex;gap:12px;align-items:flex-start;border:1px solid #E6DEF0;border-radius:14px;padding:10px;background:#fff;margin:0 16px 8px}
.ltcsee .th{flex:none;width:96px;border:0;background:none;padding:0;font:inherit;color:#6C6377;text-align:center;cursor:pointer}
.ltcsee .th img{display:block;width:96px;height:96px;border-radius:10px;object-fit:cover;object-position:top;border:1px solid #E6DEF0}
.ltcsee .th span{display:block;font-size:11.5px;line-height:1.3;margin-top:4px}
.ltcsee .steps{margin:0;padding:0;list-style:none;display:grid;gap:8px;align-content:center;min-height:96px;font-size:13px;line-height:1.4;color:var(--ink);counter-reset:s;min-width:0}
.ltcsee .steps li{display:flex;gap:8px;align-items:baseline}
.ltcsee .steps li::before{counter-increment:s;content:counter(s);flex:none;color:#B5487C;font-size:20px;font-weight:600;line-height:1}
.ltcref{margin:0 16px 12px;font-size:12.5px;color:#6C6377}
.ltcbud{margin:0 16px 8px;font-size:15px;font-weight:600;color:var(--p-deep)}
.rcsheet .in{padding:12px 12px calc(16px + env(safe-area-inset-bottom))}
.rcsheet img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #E6DEF0}
.rcsheet .btn{margin-top:10px;width:100%}
img.lg{aspect-ratio:565.8/249.5}   /* the footer's logo too (PSI, 20 Oct) */
/* the home hero (UI/UX «خله يختار» C, 20 Oct 2026): on a phone three small photos say it, the middle one ticked; on a wide screen the arched photos stay and three steps sit under the heading; the two doors read like the gift page's pair */
.hph{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:12px 0 0}
.hph img{display:block;width:74px;height:74px;border-radius:14px;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(60,30,80,.14);background:var(--tint-2)}
.hph .mid{position:relative;text-align:center;flex:none}
.hph .mid img{width:92px;height:92px;border-color:#B5487C}
.hph .ck,.ha .ck{position:absolute;top:-8px;inset-inline-end:-8px;width:24px;height:24px;border-radius:50%;background:#BF3B78;color:#fff;font-size:13px;font-style:normal;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.hph .mid small,.ha .mid small{display:block;font-size:11.5px;font-weight:600;color:#B5487C;margin-top:4px;line-height:1.2}
.hsteps{display:none}
.hbtns{margin-top:14px}
.hbtns .btn{flex:1;height:56px;min-height:56px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 10px;line-height:1.2;min-width:0;width:auto}
.hbtns .btn b{display:block;font-size:15px;font-weight:600;max-width:100%}
.hbtns .btn small{display:block;font-size:11.5px;font-weight:400;max-width:100%}
.hbtns .btn.ghost{border:1.5px solid #B5487C;color:#B5487C;background:#fff}
@media (min-width:900px){
  .hph{display:none}
  .hsteps{display:flex;gap:14px;margin:12px 0 0;padding:0;list-style:none;font-size:14px;color:#4A3A63;counter-reset:hs}
  .hsteps li{display:flex;align-items:center;gap:6px}
  .hsteps li::before{counter-increment:hs;content:counter(hs);width:20px;height:20px;border-radius:50%;background:#6A4FA3;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
  .hero2 .ha .mid{position:relative;width:29%;text-align:center}
  .hero2 .ha .mid img{width:100%}
  .hero2 .ha .mid small{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;width:auto;padding:3px 10px;border-radius:999px;background:rgba(74,42,96,.62);color:#fff;white-space:nowrap}   /* a soft backing, so it reads over a light photo (QA, 20 Oct) */
  .hero2 .ha .ck{top:8px}
}
/* listings (UI/UX «خله يختار» D, 20 Oct 2026): the banner is one outlined button like the gift page's «خله يختار», a chevron at its end */
.ltcl{display:flex;align-items:center;gap:10px;margin:10px 16px 0;min-height:54px;padding:8px 12px;border:1.5px solid #B5487C;border-radius:14px;background:#fff;color:#B5487C;text-decoration:none;text-align:start}
.ltcl span{display:grid;gap:2px;min-width:0}
.ltcl b{font-size:14.5px;font-weight:600;color:#B5487C;line-height:1.3}
.ltcl small{font-size:11.5px;font-weight:400;color:#6C6377;line-height:1.35}
.ltcl > svg{flex:none;margin-inline-start:auto;color:#B5487C;width:18px;height:18px}
.ltcl[hidden]{display:none}
@media (min-width:900px){.ltcl{max-width:560px}}
/* the «انضافت للسلة» sheet (UI/UX «خله يختار» E, 20 Oct 2026): the second button may carry one small line under its words */
#cartMore{height:auto;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:7px 12px;line-height:1.25}
#cartMore b{display:block;font-weight:600}
#cartMore small{display:block;font-size:11.5px;font-weight:400;color:#6C6377}