:root{
  --lapis:#0E2A52; --lapis-2:#17407A; --glaze:#1B8C8C; --glaze-d:#136B6B;
  --saffron:#E9A23B; --saffron-d:#B97A16;
  --gypsum:#EDF2F4; --paper:#fff; --ink:#0B1A2E; --mute:#566579; --line:#D3DDE4;
  --ok:#1E8E5A; --bad:#C0392B;
  --r:14px;
  --f-head:"Reem Kufi","Noto Naskh Arabic",serif;
  --f-body:"Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:128px}
body{margin:0;background:var(--gypsum);color:var(--ink);font:400 17px/1.75 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.ic{width:22px;height:22px;flex:none;stroke:currentColor}
.ic.big{width:44px;height:44px}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.3;margin:0}
.muted{color:var(--mute)}

/* زخارف عربية (SVG مضمّن) */
:root{
  --girih:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%230E2A52' stroke-width='1.1' stroke-linejoin='round'%3E%3Crect x='12' y='12' width='32' height='32'/%3E%3Crect x='12' y='12' width='32' height='32' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='6'/%3E%3Cpath d='M0 0l12 12M56 0L44 12M0 56l12-12M56 56L44 44'/%3E%3C/g%3E%3C/svg%3E");
  --band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 5h6l3-4 5 8 5-8 3 4h6' fill='none' stroke='%23E9A23B' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='14' cy='5' r='1.3' fill='%231B8C8C'/%3E%3C/svg%3E");
  --orn-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='16' viewBox='0 0 90 16'%3E%3Cg fill='none' stroke='%23B97A16' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 8h56'/%3E%3Cpath d='M58 8c7-6 13-6 18 0-5 6-11 6-18 0z'/%3E%3Crect x='80' y='4' width='8' height='8' transform='rotate(45 84 8)'/%3E%3C/g%3E%3Ccircle cx='46' cy='8' r='1.6' fill='%231B8C8C'/%3E%3C/svg%3E");
}

/* الشريط العلوي */
.top{position:sticky;top:0;z-index:30;background:#fffffff2;backdrop-filter:blur(10px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.top::after{content:"";position:absolute;inset:auto 0 -6px 0;height:6px;background:var(--band) repeat-x center/28px 10px;opacity:.9;pointer-events:none}
.top-in{display:flex;align-items:center;gap:14px;padding-block:8px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--gypsum);border:1px solid var(--line);border-radius:999px;padding:0 16px;height:44px;color:var(--mute)}
.search:focus-within{background:#fff;color:var(--ink);border-color:var(--glaze)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;height:100%;color:var(--ink)}
.search input::placeholder{color:#8794a4}
.btn-try{display:flex;align-items:center;gap:8px;background:var(--lapis);color:#fff;border:0;border-radius:999px;height:44px;padding:0 18px;font-weight:700;white-space:nowrap}
.btn-try:hover{background:var(--lapis-2)}
.cart-btn{position:relative;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--lapis);display:grid;place-items:center}
.cart-btn:hover{background:var(--gypsum)}
.cart-count{position:absolute;top:-4px;inset-inline-start:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--saffron);color:var(--ink);font:700 12px/20px var(--f-body);font-style:normal;text-align:center}
.cart-count.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.35)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== الشعار المتحرك ===== */
.logo{display:inline-block;position:relative;perspective:900px;line-height:0}
.logo-sm{width:128px}
.logo-lg{width:min(520px,78vw)}
.logo-3d{position:relative;display:block;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.logo-base{width:100%;height:auto;position:relative}
.hero-logo{filter:drop-shadow(0 1px 0 #5b6b82) drop-shadow(0 1px 0 #6f7f95) drop-shadow(0 1px 0 #8391a5) drop-shadow(0 1px 0 #98a5b6) drop-shadow(0 14px 16px #0e2a5233)}
.logo-eye{position:absolute;left:59.45%;top:7.6%;width:12.12%;aspect-ratio:1;transform:translateZ(28px);transform-origin:50% 62%}
.logo-eye>img,.glint{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;clip-path:ellipse(50% 50% at 50% 50%)}
.glint{background:radial-gradient(circle at var(--gx,36%) var(--gy,30%),#ffffffd0 0 7%,#ffffff40 13%,transparent 26%)}
.logo-lg .logo-eye>img{box-shadow:0 0 0 1px #0002}
/* خط الرموش عند الإغماض */
.logo-eye::after{content:"";position:absolute;left:-6%;right:-6%;top:44%;height:46%;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cg fill='none' stroke='%23262626' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M6 12Q50 46 94 12'/%3E%3Cpath d='M24 27l-6 12M50 33v13M76 27l6 12' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
/* الافتتاح */
.logo:not(.in) .logo-base{clip-path:inset(0 0 0 100%)}
.logo:not(.in) .logo-eye{transform:translateZ(28px) scaleY(0)}
.logo.in .logo-base{animation:wipe 1.1s cubic-bezier(.65,0,.25,1) both}
.logo.in .logo-eye{animation:eyeIn .8s .95s cubic-bezier(.3,1.6,.5,1) both}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes eyeIn{from{transform:translateZ(28px) scale(.4,0)}to{transform:translateZ(28px) scale(1)}}
/* الرمشة */
.logo.blink .logo-eye>img,.logo.blink .glint{animation:blink .42s ease-in-out}
.logo.blink .logo-eye::after{animation:lash .42s ease-in-out}
@keyframes blink{0%,100%{clip-path:ellipse(50% 50% at 50% 50%)}42%,58%{clip-path:ellipse(54% 2% at 50% 64%)}}
@keyframes lash{0%,30%,70%,100%{opacity:0}42%,58%{opacity:1}}
/* ميلان ولمعة */
.logo-lg .logo-3d{animation:sway 8s 2s ease-in-out infinite}
.logo-lg.tracking .logo-3d{animation:none}
@keyframes sway{0%,100%{transform:rotateY(-9deg) rotateX(5deg)}50%{transform:rotateY(9deg) rotateX(-4deg)}}
.logo-lg .logo-3d::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,#ffffff8c 48%,transparent 58%) no-repeat;background-size:250% 100%;background-position:150% 0;-webkit-mask:url(../img/brand/logo-dark.webp) center/100% 100% no-repeat;mask:url(../img/brand/logo-dark.webp) center/100% 100% no-repeat;animation:shine 6s 1.6s ease-in-out infinite}
@keyframes shine{0%{background-position:150% 0}35%,100%{background-position:-60% 0}}

/* المدخل */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#fff 0,#f4f7f9 55%,#e6edf1 100%);text-align:center;border-bottom:1px solid var(--line)}
.hero-pat{position:absolute;inset:0;background:var(--girih) center/56px;opacity:.07;-webkit-mask:radial-gradient(ellipse at 50% 45%,transparent 25%,#000 75%);mask:radial-gradient(ellipse at 50% 45%,transparent 25%,#000 75%)}
.hero::before{content:"";position:absolute;left:50%;top:10px;width:min(700px,96vw);height:calc(100% + 40px);transform:translateX(-50%);border:1.5px solid #e9a23b66;border-bottom:0;border-radius:50% 50% 0 0/38% 38% 0 0;pointer-events:none}
.hero-in{position:relative;padding-block:30px 22px;display:flex;flex-direction:column;align-items:center;gap:4px}
.hero-logo{padding-top:8px}
.hero-sub{display:flex;align-items:center;gap:12px;margin:2px 0 0;font:700 clamp(22px,3vw,30px)/1.4 "Aref Ruqaa",var(--f-head);color:var(--lapis)}
.hero-sub .orn{width:78px;height:10px;color:var(--saffron-d)}
.lead{max-width:34em;margin:6px auto 10px;color:var(--mute);font-size:16.5px;line-height:1.7}
.quick{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.quick a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:15px;color:var(--ink);transition:transform .2s,box-shadow .2s}
.quick a:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0e2a521f}
.quick .ic{width:20px;height:20px}
.q-call .ic{color:var(--lapis-2)}.q-wa .ic{color:#1E9E55}.q-map .ic{color:var(--bad)}.q-ig .ic{color:#C13584}.q-tt .ic{color:#111}

/* الأقسام */
.tabs-wrap{position:sticky;top:66px;z-index:25;background:var(--paper);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:flex;align-items:center;gap:8px;border:1px solid transparent;background:none;border-radius:999px;padding:7px 15px;font-weight:600;color:var(--mute);transition:background .2s,color .2s}
.tab:hover{background:var(--gypsum);color:var(--ink)}
.tab.on{background:var(--lapis);color:#fff}
.tab .ic{transition:transform .25s}
.tab:hover .ic{transform:rotate(-8deg) scale(1.08)}


/* الفلاتر */
.shop{padding-block:18px 40px}
.promo{background:var(--saffron);color:var(--ink);border-radius:var(--r);padding:10px 16px;margin-bottom:14px;font-weight:700;text-align:center}
.filters{display:grid;gap:8px;margin-bottom:14px}
.f-group{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.f-group::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:3px 14px;font-size:15px;line-height:1.7}
.chip:hover{border-color:var(--lapis-2)}
.chip.on{background:var(--glaze);border-color:var(--glaze);color:#fff}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-inline-end:7px;vertical-align:-1px;border:1px solid #0003}
.f-count{color:var(--mute);font-size:15px}

/* بطاقات المنتجات: شبكة كثيفة */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{border-color:var(--glaze);transform:translateY(-2px);box-shadow:0 8px 18px #0e2a5214}
.card-img{position:relative;display:block;width:100%;padding:0;border:0;background:#dfe5ee;aspect-ratio:4/3}
.card-img img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:6px;inset-inline-end:6px;border-radius:6px;padding:0 7px;font-size:12px;line-height:1.7}
.badge.sale{background:var(--saffron);color:var(--ink);font-weight:700}
.card.sold .card-img img{filter:grayscale(1);opacity:.6}
.card-try{position:absolute;top:6px;inset-inline-start:6px;width:30px;height:30px;border-radius:50%;border:0;background:#ffffffe6;color:var(--lapis);display:grid;place-items:center;box-shadow:0 1px 4px #0003;padding:0}
.card-try .ic{width:17px;height:17px}
.card-try:hover{background:var(--saffron)}
.card-b{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-t{font-weight:600;font-size:14px;line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-code{font-size:13px;color:var(--mute)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;font-family:var(--f-head);font-weight:600;font-size:17px;color:var(--lapis);line-height:1.3}
.price s{font-family:var(--f-body);font-size:12px;color:var(--mute);font-weight:400}
.price small{font:400 12px var(--f-body);color:var(--mute)}
.card-add{margin-top:auto;border:0;border-radius:8px;background:var(--lapis);color:#fff;font-weight:700;font-size:14px;padding:5px 0;line-height:1.5}
.card-add:hover{background:var(--glaze)}
.card-add[disabled]{background:#9aa6b4;cursor:not-allowed}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--lapis);color:#fff;border:1px solid var(--lapis);border-radius:10px;padding:8px 18px;font-weight:700;text-decoration:none;line-height:1.5}
.btn:hover{background:var(--lapis-2)}
.btn.ghost{background:none;color:var(--lapis);border-color:var(--lapis)}
.btn.ghost:hover{background:var(--lapis);color:#fff}
.btn.wa{background:#1E9E55;border-color:#1E9E55}
.btn.wa:hover{background:#17844a}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.sm{padding:6px 12px;font-size:15px}
.card-a .btn:first-child{flex:1}
.icon-btn{width:42px;padding:0}
.empty{text-align:center;padding:50px 0;color:var(--mute)}

/* بطاقات العدسات والملحقات */
.kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.kind{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px}
.kind .ic.big{color:var(--glaze)}
.kind h3{font-size:20px}
.kind p{margin:0;color:var(--mute);font-size:16px}
.kind .btn{margin-top:auto;align-self:flex-start}
.kind:hover .ic.big{animation:wob .6s}
@keyframes wob{30%{transform:rotate(-10deg) scale(1.1)}60%{transform:rotate(6deg)}}
.sec-note{grid-column:1/-1;color:var(--mute);margin:0 0 4px}

/* الخدمات */
.services{background:var(--paper);border-top:1px solid var(--line);padding-block:44px}
.services h2{font-size:32px}
.sub{color:var(--mute);margin:4px 0 22px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.svc{padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--gypsum)}
.svc .ic.big{color:var(--lapis-2);margin-bottom:6px}
.svc h3{font-size:19px}
.svc p{margin:4px 0 0;color:var(--mute);font-size:16px}
.svc:hover .ic.big{animation:wob .6s}

/* عناوين بزخرفة */
.h-orn{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center}
.h-orn::before,.h-orn::after{content:"";flex:0 1 90px;height:16px;background:var(--orn-l) center/contain no-repeat}
.h-orn::after{transform:scaleX(-1)}
.center{text-align:center}

/* تواصل معنا */
.contact{padding-block:44px;background:var(--gypsum);position:relative}
.contact h2{font-size:32px}
.ct-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:stretch}
.ct-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ct{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;transition:transform .2s,box-shadow .2s}
.ct:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0e2a521a}
.ct .ic{width:44px;height:44px;padding:10px;border-radius:12px;color:#fff;flex:none}
.ct span{display:flex;flex-direction:column;min-width:0;line-height:1.5}
.ct b{font-size:16px}
.ct bdi{font-size:14px;color:var(--mute);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis}
.ct-call .ic{background:var(--lapis-2)}.ct-wa .ic{background:#1E9E55}
.ct-ig .ic{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}.ct-tt .ic{background:#111}
.ct-map{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.ct-map iframe{width:100%;flex:1;min-height:260px;border:0;display:block}
.ct-addr{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;font-weight:600}
.ct-addr span{display:inline-flex;align-items:center;gap:6px}
.ct-addr span .ic{color:var(--bad)}

.foot{position:relative;background:var(--lapis);color:#d6e0ee;padding-block:30px 26px}
.foot-band{position:absolute;inset:0 0 auto 0;height:10px;background:var(--band) repeat-x center/28px 10px;opacity:.8}
.foot-in{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center}
.logo-ft{width:150px;margin-bottom:8px}
.logo-ft .logo-eye::after{filter:invert(1)}
.foot p{margin:0}
.foot-links{display:flex;gap:10px;flex-wrap:wrap}
.foot-links a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff33;color:#f1d9a8;transition:background .2s}
.foot-links a:hover{background:#ffffff1a}
.wa-fab{position:fixed;bottom:18px;inset-inline-start:18px;z-index:20;width:54px;height:54px;border-radius:50%;background:#1E9E55;color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px #0004}
.wa-fab .ic{width:28px;height:28px}
/* الشريط السفلي للهاتف */
.bnav{display:none}


/* النوافذ */
.dlg{border:0;border-radius:18px;padding:0;width:min(880px,100% - 24px);max-height:calc(100dvh - 24px);background:var(--paper);color:var(--ink);overflow:auto}
.dlg::backdrop{background:#0b1a2ecc}
.dlg[open]{animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(14px)}}
.dlg-wide{width:min(1040px,100% - 24px)}
.dlg-side{width:min(520px,100% - 24px);margin:12px auto 12px 12px;height:calc(100dvh - 24px)}
.x{position:absolute;top:10px;inset-inline-end:10px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:#fffd;display:grid;place-items:center;box-shadow:0 1px 6px #0003}
.x:hover{background:#fff}

.pv{display:grid;grid-template-columns:1.2fr 1fr}
.pv-img{background:#dfe5ee}
.pv-img img{width:100%;height:100%;object-fit:cover;min-height:260px}
.pv-b{padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.pv-b h2{font-size:26px}
.spec{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin:0;font-size:16px}
.spec dt{color:var(--mute)}
.spec dd{margin:0;font-weight:600}
.pv-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

/* قائمة الحجز */
.cb{padding:22px 20px 26px;display:flex;flex-direction:column;gap:14px}
.cb h2{font-size:24px;padding-inline-end:44px}
.ci{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:12px}
.ci img{width:72px;height:54px;object-fit:cover;border-radius:8px}
.ci b{display:block;font-size:15px;line-height:1.5}
.ci span{font-size:14px;color:var(--mute)}
.ci button{border:0;background:none;color:var(--bad);padding:6px;border-radius:8px}
.ci button:hover{background:#c0392b18}
.tot{display:flex;justify-content:space-between;font-weight:700;font-size:18px;border-top:1px dashed var(--line);padding-top:10px}
.fm{display:flex;flex-direction:column;gap:12px}
.fm label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:15px}
.fm input,.fm select,.fm textarea{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;font-weight:400;font-size:16px;line-height:1.6}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:2px solid var(--glaze);border-color:var(--glaze)}
.fm textarea{min-height:70px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{flex-direction:row;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer}
.seg label:has(input:checked){border-color:var(--glaze);background:#1b8c8c14}
.seg input{width:auto;accent-color:var(--glaze)}
.hint{font-size:14px;color:var(--mute);font-weight:400}
.hp{position:absolute;inset-inline-start:-9999px}
.err{color:var(--bad);font-size:15px;min-height:1.2em}
.done{text-align:center;padding:30px 12px;display:flex;flex-direction:column;gap:12px;align-items:center}
.done .ok{width:68px;height:68px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;animation:pop .4s}
.done .ok .ic{width:36px;height:36px}

/* القياس الافتراضي */
.try{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:420px}
.try>*{min-width:0}
.try-stage{position:relative;background:#0b1a2e;display:grid;place-items:center;min-height:320px}
.try-stage canvas{width:100%;height:auto;max-height:70dvh;object-fit:contain;display:none}
.try-stage canvas.live{display:block}
.try-msg{position:absolute;inset:auto 16px 16px 16px;color:#fff;background:#0b1a2eb0;border-radius:10px;padding:8px 12px;font-size:15px;text-align:center}
.try-msg:empty{display:none}
.try-side{padding:26px 22px;display:flex;flex-direction:column;gap:12px}
.try-side h3{font-size:24px;padding-inline-end:44px}
.try-side p{margin:0}
.try-actions{display:flex;gap:8px;flex-wrap:wrap}
.try-list{display:flex;gap:8px;overflow-x:auto;padding-block:4px;scrollbar-width:thin}
.try-list button{flex:none;width:92px;height:50px;border:2px solid var(--line);border-radius:10px;background:#dfe5ee;padding:0;overflow:hidden}
.try-list button.on{border-color:var(--saffron)}
.try-list img{width:100%;height:100%;object-fit:cover}
.try-pick{font-weight:600}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:.3s;z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:860px){
  .pv,.try{grid-template-columns:1fr}
  .ct-grid{grid-template-columns:1fr}
}
/* ===== الهاتف ===== */
@media (max-width:760px){
  body{font-size:16px;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  html{scroll-padding-top:64px}
  .wrap{width:calc(100% - 16px)}
  .top{position:relative}
  .top-in{flex-wrap:wrap;gap:8px;padding-block:8px 10px}
  .brand{order:1;margin-inline:auto}
  .logo-sm{width:112px}
  .btn-try,.cart-btn{display:none}
  .search{order:2;flex-basis:100%;height:40px}
  .hero-in{padding-block:16px 14px;gap:2px}
  .logo-lg{width:min(300px,74vw)}
  .hero::before{top:6px}
  .hero-sub .orn{width:46px}
  .lead{display:none}
  .quick{gap:6px;margin-top:8px;flex-wrap:nowrap;width:100%;justify-content:space-between}
  .quick a{flex:1;flex-direction:column;gap:2px;padding:7px 2px;border-radius:12px;font-size:12px;min-width:0}
  .quick .ic{width:22px;height:22px}
  .tabs-wrap{top:0}
  .tabs{padding-block:6px;gap:4px}
  .tab{padding:6px 11px;font-size:14px;gap:6px}
  .tab .ic{width:19px;height:19px}
  .shop{padding-block:10px 24px}
  .filters{gap:6px;margin-bottom:10px}
  .chip{font-size:13.5px;padding:2px 11px}
  /* أربع نظارات في كل صف */
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .card{border-radius:9px}
  .card:hover{transform:none}
  .card-b{padding:4px 4px 5px;gap:3px}
  .card-t{display:none}
  .price{font-size:12.5px;justify-content:center;gap:0 3px}
  .price small,.price s{font-size:10px}
  .card-add{font-size:12px;padding:3px 0;border-radius:6px}
  .card-try{width:24px;height:24px;top:3px;inset-inline-start:3px}
  .card-try .ic{width:14px;height:14px}
  .badge{font-size:10px;padding:0 4px;top:3px;inset-inline-end:3px}
  .kinds{grid-template-columns:1fr 1fr;gap:8px}
  .kind{padding:14px}
  .kind h3{font-size:17px}
  .kind p{font-size:14px}
  .services,.contact{padding-block:30px}
  .services h2,.contact h2{font-size:24px}
  .h-orn::before,.h-orn::after{flex-basis:54px}
  .svc-grid{grid-template-columns:1fr 1fr;gap:8px}
  .svc{padding:12px}
  .svc .ic.big{width:34px;height:34px}
  .svc h3{font-size:15.5px}
  .svc p{font-size:13.5px}
  .ct-cards{gap:8px}
  .ct{padding:10px;gap:8px;flex-direction:column;text-align:center}
  .ct span{align-items:center}
  .ct bdi{text-align:center;font-size:12.5px}
  .ct b{font-size:15px}
  .ct .ic{width:40px;height:40px;padding:9px}
  .foot-in{flex-direction:column;text-align:center}
  .wa-fab{display:none}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0 0;z-index:40;background:#fffffff5;backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px #0e2a5212}
  .bnav a,.bnav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0;background:none;border:0;text-decoration:none;font-size:11.5px;font-weight:600;color:var(--mute)}
  .bnav .ic{width:24px;height:24px;color:var(--lapis)}
  .bnav a[href^="https://wa"] .ic{color:#1E9E55}
  .bnav button:first-of-type .ic{color:var(--saffron-d)}
  .bnav .cart-count{top:0;inset-inline-start:auto;left:calc(50% - 22px)}
  .row2,.seg{grid-template-columns:1fr}
  .dlg{width:calc(100% - 12px);max-height:calc(100dvh - 12px)}
  .dlg-side{margin:6px auto;height:calc(100dvh - 12px)}
  .pv-b{padding:18px 16px}
}
@media (max-width:360px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .logo .logo-base,.logo .logo-eye{clip-path:none!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ===== شريط الخدمات السريعة ===== */
.acts-strip{background:var(--paper);border-bottom:1px solid var(--line)}
.acts-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding-block:12px}
.act{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--gypsum);border-radius:12px;padding:10px 8px;font-weight:700;font-size:15px;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.act:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0e2a521a;border-color:var(--glaze)}
.act .ic{width:24px;height:24px}
.a-off .ic{color:var(--saffron-d)}.a-rx .ic{color:var(--glaze)}.a-con .ic{color:var(--lapis-2)}.a-appt .ic{color:#1E9E55}.a-trk .ic{color:#7e57c2}
.a-off{background:linear-gradient(135deg,#fff6e3,#fde9c2);border-color:#f0cf8f}
.tab-off.has{color:var(--saffron-d)}
.tab-off.has::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--bad);margin-inline-start:-2px;align-self:flex-start;animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.5}}

/* ===== التخفيض والهدايا والعروض ===== */
.deal-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.deal-bar>span{display:block;border-radius:12px;padding:7px 14px;font-size:15px;line-height:1.7}
.deal-bar .ic{width:20px;height:20px;vertical-align:-4px;margin-inline-end:6px}
.db-sale{background:var(--lapis);color:#fff}
.db-sale em{font-style:normal;display:inline-block;margin-inline-start:4px;background:var(--saffron);color:var(--ink);border-radius:999px;padding:0 9px;font-size:13px;font-weight:700}
.db-gift{background:#fff;border:1px dashed var(--saffron-d);color:var(--ink)}
.db-gift .ic{color:var(--saffron-d)}
.db-gift small{color:var(--mute)}
.offers{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:12px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;padding-bottom:2px}
.offers::-webkit-scrollbar{display:none}
.offer{position:relative;overflow:hidden;border-radius:16px;padding:16px 18px;color:#fff;display:flex;flex-direction:column;gap:6px;min-height:130px;isolation:isolate}
.offer::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--girih) center/48px;opacity:.12;filter:invert(1)}
.offer h3{font-size:21px}
.offer p{margin:0;font-size:15px;opacity:.92;line-height:1.6}
.of-lapis{background:linear-gradient(135deg,#0E2A52,#17407A)}
.of-glaze{background:linear-gradient(135deg,#136B6B,#1B8C8C)}
.of-saffron{background:linear-gradient(135deg,#B97A16,#E9A23B);color:var(--ink)}
.of-saffron::before{filter:none;opacity:.1}
.of-rose{background:linear-gradient(135deg,#8e2a4f,#c2507a)}
.of-tag{align-self:flex-start;background:#ffffff26;border:1px solid #ffffff55;border-radius:999px;padding:0 10px;font-size:13px;font-weight:700}
.of-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;flex-wrap:wrap}
.of-until{font-size:13px;opacity:.9}
.of-code{border:1.5px dashed currentColor;background:#ffffff1f;color:inherit;border-radius:10px;padding:4px 12px;font-weight:700;font-size:14px}
.of-code:hover{background:#ffffff40}
.badge.gift{background:#fff;color:var(--saffron-d);top:auto;bottom:6px;inset-inline-end:6px;padding:2px 4px;display:grid;place-items:center;box-shadow:0 1px 4px #0002}
.badge.gift .ic{width:16px;height:16px}
.gift-line{display:flex;align-items:center;gap:8px;margin:0;color:var(--saffron-d);font-weight:700}
.gift-line .ic{width:20px;height:20px}
.no-deals{text-align:center;padding:30px 10px}

/* ===== قائمة الحجز: الكود والمجموع والوصفة ===== */
.coupon{display:flex;align-items:center;gap:8px;border:1.5px dashed var(--line);border-radius:12px;padding:6px 6px 6px 10px;padding-inline-start:12px;margin-top:10px}
.coupon .ic{color:var(--saffron-d);width:20px;height:20px}
.coupon input{flex:1;min-width:0;border:0;outline:0;background:none;font-weight:700;letter-spacing:.5px;padding:4px 0;text-transform:uppercase}
.cpn-msg{margin:0;font-size:14px;min-height:0}
.cpn-msg.ok{color:var(--ok)}.cpn-msg.bad{color:var(--bad)}
.sum{display:grid;gap:4px;border-top:1px dashed var(--line);padding-top:8px}
.sum>div{display:flex;justify-content:space-between;gap:10px;font-size:15.5px}
.s-disc{color:var(--ok);font-weight:700}
.s-tot{font-weight:700;font-size:18px;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.s-tot small{font-weight:400;color:var(--mute);font-size:13px}
.gift-box{background:#fff8e8;border:1px solid #f0cf8f;border-radius:12px;padding:8px 12px}
.gift-box p{margin:2px 0;display:flex;align-items:center;gap:8px;font-size:15px}
.gift-box .ic{width:20px;height:20px;color:var(--saffron-d);flex:none}
.g-next{color:var(--mute)}
.fh{font-size:19px;margin-top:6px}
.rxf{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:0;display:grid;gap:10px;min-width:0}
.rxf legend{font-weight:700;padding:0 6px;font-size:15px}
.seg3{grid-template-columns:repeat(3,1fr)!important}
.seg3 label{font-size:14px;padding:7px 8px;justify-content:center;text-align:center}
.drop{display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:6px!important;border:2px dashed var(--glaze);border-radius:12px;background:#1b8c8c0d;padding:16px;cursor:pointer;text-align:center;color:var(--glaze-d)}
.drop .ic{width:32px;height:32px}
.drop img{max-height:180px;width:auto;border-radius:8px;box-shadow:0 2px 8px #0002}
.rx-vals{overflow-x:auto}
.rx-vals table{width:100%;border-collapse:collapse;font-size:14px}
.rx-vals th{font-weight:700;padding:4px;color:var(--mute);font-size:13px}
.rx-vals td{padding:3px}
.rx-vals input{width:100%;min-width:52px;padding:5px 6px!important;text-align:center;font-size:15px!important}
.pd{margin-top:8px}
.h-ic{width:28px;height:28px;vertical-align:-6px;margin-inline-end:8px;color:var(--glaze)}
.cb-alt{border-top:1px dashed var(--line);padding-top:14px;margin-top:6px;display:grid;gap:8px;justify-items:start}
.cb-alt p{margin:0}
.ok-disc{color:var(--ok);font-weight:700}
.trk{background:var(--gypsum);border-radius:12px;padding:12px 14px;margin-top:6px}
.trk p{margin:2px 0}
.steps{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;counter-reset:s}
.steps li{position:relative;text-align:center;font-size:12.5px;color:var(--mute);padding-top:28px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--line);font-weight:700;line-height:20px;font-size:12px}
.steps li.on{color:var(--ink);font-weight:700}
.steps li.on::before{background:var(--glaze);border-color:var(--glaze);color:#fff}

@media (max-width:760px){
  .acts-in{gap:5px;padding-block:8px}
  .act{flex-direction:column;gap:3px;padding:7px 2px;font-size:11.5px;line-height:1.35;min-width:0;border-radius:11px;text-align:center}
  .act .ic{width:24px;height:24px}
  .offers{grid-auto-columns:82%}
  .offer{min-height:118px;padding:14px}
  .offer h3{font-size:18px}
  .offer p{font-size:14px}
  .deal-bar>span{font-size:13.5px;padding:6px 10px;width:100%}
  .badge.gift{padding:1px 3px;bottom:3px;inset-inline-end:3px}
  .badge.gift .ic{width:12px;height:12px}
}
.pv-desc{margin:0;color:var(--ink);line-height:1.7}