/* ========================================================================== سُكون — design system Structure, rhythm and component anatomy follow the FIRMx store. Palette is new: FIRMx is a beauty brand in cream/gold; this is a sleep brand, so the base stays warm and light (it converts better in daylight on a phone) while the brand colour goes deep indigo. Gold is kept for prices and premium cues so the two stores feel like they come from one house. ========================================================================== */ :root{ /* ---- «لؤلؤي» Pearl — the default. Warm off-white paper, plum from the product label, brass reserved for prices. The pack photography is shot on white, so a light ground is what the product was made for; the dark lifestyle scenes read as intentional night imagery against it. ---- */ /* surfaces */ --bg:#F7F4EF; --surface:#FFFFFF; --surface-2:#F1ECE3; --glass:rgba(247,244,239,.88); /* nav + sticky bar over blurred content */ /* ink */ --ink:#221B2B; --ink-2:#5A5268; --ink-3:#6F667E; /* brand — plum, taken off the label */ --brand:#5B3A7E; --brand-2:#734C9B; --brand-deep:#432A5E; --brand-soft:rgba(91,58,126,.07); --brand-line:rgba(91,58,126,.28); /* gold — prices and eyebrows. Darkened from brass so it clears 4.5:1 on paper; brass that reads well on night is unreadable on cream. */ --gold:#9A6B1E; --gold-2:#B8862F; --gold-soft:rgba(154,107,30,.08); --gold-line:rgba(154,107,30,.30); /* status */ --green:#2E7355; --green-soft:rgba(46,115,85,.09); --red:#B4503A; --red-soft:rgba(180,80,58,.08); --line:rgba(34,27,43,.12); /* Ink on a filled button. A token because a light-accent theme needs dark ink here and a dark-accent theme needs light — hardcoding it breaks one. */ --btn-ink:#FFFFFF; --on-green:#FFFFFF; /* ink on a filled --green disc */ --bump-on:rgba(154,107,30,.14); /* the bump once it is checked */ --seg:#B9B0C6; /* broken-sleep bars in the comparison */ /* Fallback under every .shot, seen only while the photo loads or if it 404s. Tokenised because a dark slab on paper looks like a broken image. */ --shot-fb:linear-gradient(160deg,#EFEAF3,#DFD8E8); /* Loop diagram (inline SVG on the home page) */ --loop-a:#EDE7F3; --loop-a-l:#D6CAE4; --loop-b:#F0E9F5; --loop-b-l:#DCCDE8; --loop-c:#F6EEDC; --loop-c-l:#E6D4AE; --loop-d:#F1ECE3; --loop-d-l:#DDD5C8; --f-d:"Alexandria",system-ui,sans-serif; --f-b:"IBM Plex Sans Arabic",system-ui,sans-serif; /* On paper the depth comes from shadow, not from surface steps, so these carry more weight than the night theme's did — but stay neutral-warm rather than black, which greys a cream ground. */ --sh-sm:0 1px 2px rgba(34,27,43,.05),0 3px 10px rgba(34,27,43,.05); --sh-md:0 2px 6px rgba(34,27,43,.06),0 12px 28px rgba(34,27,43,.08); --sh-lg:0 8px 20px rgba(34,27,43,.09),0 26px 54px rgba(34,27,43,.12); --sh-brand:0 8px 24px rgba(91,58,126,.24); --ease:cubic-bezier(.16,1,.3,1); --r:14px; --r-lg:20px; } /* ========================================================================== Alternate palettes. Every one of them overrides tokens only — no component rule anywhere in this file knows which theme is active. Set the theme with data-theme on ; add ?picker=1 to any URL to switch between them. ========================================================================== */ /* «هادئ» Calm — cooler, lavender paper, violet accent. */ [data-theme="calm"]{ --bg:#F5F3FA; --surface:#FFFFFF; --surface-2:#EBE7F4; --glass:rgba(245,243,250,.88); --ink:#1E1A2E; --ink-2:#534C70; --ink-3:#716A8C; --brand:#5A4491; --brand-2:#7059AE; --brand-deep:#423170; --brand-soft:rgba(90,68,145,.07); --brand-line:rgba(90,68,145,.28); --gold:#8A6A1E; --gold-2:#A98430; --gold-soft:rgba(138,106,30,.08); --gold-line:rgba(138,106,30,.28); --green:#2C6F58; --green-soft:rgba(44,111,88,.09); --red:#B04C46; --red-soft:rgba(176,76,70,.08); --line:rgba(30,26,46,.12); --btn-ink:#FFFFFF; --bump-on:rgba(138,106,30,.13); --seg:#B5ACCB; --shot-fb:linear-gradient(160deg,#ECE8F6,#DAD3EC); --loop-a:#EAE6F6; --loop-a-l:#D0C7E7; --loop-b:#EEE8F6; --loop-b-l:#D8CBEA; --loop-c:#F4EDDC; --loop-c-l:#E2D1AE; --loop-d:#EBE7F4; --loop-d-l:#D5CFE4; --sh-brand:0 8px 24px rgba(90,68,145,.24); } /* «دافئ» Warm — sand and brass, closest to the FIRMx look. Gold is the button here, so the ink on it flips back to near-black. */ [data-theme="warm"]{ --bg:#F8F5EE; --surface:#FFFFFF; --surface-2:#F0E9DB; --glass:rgba(248,245,238,.88); --ink:#241E17; --ink-2:#5C5447; --ink-3:#6F6758; --brand:#B8862F; --brand-2:#CE9C44; --brand-deep:#8E661D; --brand-soft:rgba(184,134,47,.09); --brand-line:rgba(184,134,47,.32); --gold:#8E661D; --gold-2:#B8862F; --gold-soft:rgba(142,102,29,.08); --gold-line:rgba(142,102,29,.30); --green:#2F6B4A; --green-soft:rgba(47,107,74,.09); --red:#B0523A; --red-soft:rgba(176,82,58,.08); --line:rgba(36,30,23,.12); --btn-ink:#231B10; --bump-on:rgba(184,134,47,.16); --seg:#C6BBA4; --shot-fb:linear-gradient(160deg,#F1EADA,#E2D7BF); --loop-a:#F1EBDC; --loop-a-l:#DCCFB2; --loop-b:#EFE9F0; --loop-b-l:#D9CBDD; --loop-c:#F6EEDA; --loop-c-l:#E5D3AA; --loop-d:#F0E9DB; --loop-d-l:#DCD2BC; --sh-brand:0 8px 24px rgba(184,134,47,.32); } /* «ليل» Night — the palette the store shipped with, kept so it can be compared against rather than reconstructed. */ [data-theme="night"]{ --bg:#0D1220; --surface:#151D31; --surface-2:#1E2740; --glass:rgba(13,18,32,.92); --ink:#EDE3D2; --ink-2:#8E98B0; --ink-3:#7F8BA4; --brand:#D4A857; --brand-2:#E0BA73; --brand-deep:#B8902F; --brand-soft:rgba(212,168,87,.12); --brand-line:rgba(212,168,87,.38); --gold:#D4A857; --gold-2:#E0BA73; --gold-soft:rgba(212,168,87,.10); --gold-line:rgba(237,227,210,.16); --green:#7FA88C; --green-soft:rgba(127,168,140,.14); --red:#E08B7A; --red-soft:rgba(224,139,122,.12); --line:rgba(237,227,210,.10); --btn-ink:#12151F; --on-green:#12151F; --bump-on:#F9F1DE; --seg:#3B4668; --shot-fb:linear-gradient(160deg,#1E2740,#0D1220); --loop-a:#1A2340; --loop-a-l:#2C3A63; --loop-b:#2A1E3D; --loop-b-l:#4A3564; --loop-c:#4A3614; --loop-c-l:#7A5A24; --loop-d:#151D31; --loop-d-l:#2A3350; --sh-sm:0 1px 2px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.22); --sh-md:0 2px 8px rgba(0,0,0,.34),0 14px 34px rgba(0,0,0,.30); --sh-lg:0 8px 22px rgba(0,0,0,.40),0 28px 60px rgba(0,0,0,.46); --sh-brand:0 8px 28px rgba(212,168,87,.22); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scrollbar-gutter:stable} /* ^ Locking the page behind the checkout drawer removes the desktop scrollbar; without a reserved gutter everything behind the drawer jumps 15px sideways. */ body{ font-family:var(--f-b); background:var(--bg); color:var(--ink); line-height:1.8; -webkit-font-smoothing:antialiased; padding-bottom:84px; /* clears the sticky bar */ } ::selection{background:var(--gold-2);color:#12151F} [hidden]{display:none!important} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit} a{color:inherit} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px} h1,h2,h3,h4,.f-d{font-family:var(--f-d);line-height:1.35;letter-spacing:-.01em;font-weight:700} h1{font-size:clamp(1.65rem,5.2vw,2.6rem)} h2{font-size:clamp(1.35rem,4.2vw,2rem);margin-bottom:.5rem} h3{font-size:1.05rem} p{color:var(--ink-2)} .container{max-width:1120px;margin:0 auto;padding:0 20px} .narrow{max-width:640px;margin-inline:auto} section{padding:54px 0} .band{background:var(--surface)} .rule{height:1px;background:var(--line)} /* reveal on scroll */ .js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .js .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* kicker — FIRMx's section eyebrow */ .kicker{ display:inline-flex;align-items:center;gap:10px; font-family:var(--f-d);font-size:.7rem;font-weight:700;letter-spacing:.2em; color:var(--gold);text-transform:uppercase;margin-bottom:10px; } .kicker::before,.kicker::after{content:"";height:1px;width:24px;background:var(--gold-line)} .ic{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-.18em} /* ---------- top bar ---------- */ .topbar{ background:var(--surface-2);color:var(--ink);border-bottom:1px solid var(--line);font-size:.78rem; text-align:center;padding:8px 16px;font-weight:500;letter-spacing:.01em; } .nav{ position:sticky;top:0;z-index:40;background:var(--glass); backdrop-filter:blur(12px);border-bottom:1px solid var(--line); } .nav .in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;max-width:1120px;margin:0 auto} .logo{font-family:var(--f-d);font-weight:700;font-size:1.15rem;letter-spacing:.02em;text-decoration:none} .logo span{color:var(--gold)} .navlinks{display:flex;gap:20px;font-size:.86rem} .navlinks a{text-decoration:none;color:var(--ink-2)} .navlinks a:hover{color:var(--brand)} @media(max-width:720px){.navlinks{display:none}} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--brand);color:var(--btn-ink);font-family:var(--f-d);font-weight:700; font-size:1.02rem;padding:16px 26px;border-radius:var(--r);width:100%; box-shadow:var(--sh-brand);transition:transform .12s var(--ease),filter .12s var(--ease); text-decoration:none; } .btn:hover{filter:brightness(1.09)} .btn:active{transform:scale(.985)} .btn-gold{background:var(--gold);box-shadow:0 8px 28px rgba(168,132,46,.28)} .btn-ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand-line);box-shadow:none} .btn-sub{font-size:.78rem;color:var(--ink-3);margin-top:10px;text-align:center} /* ---------- hero ---------- */ .hero{ background: radial-gradient(120% 80% at 50% 0%, var(--brand-soft), transparent 60%), linear-gradient(180deg,var(--surface),var(--bg)); padding:38px 0 44px;text-align:center; } .hero h1{margin-bottom:12px} .hero .lead{font-size:1.03rem;color:var(--ink-2);max-width:38ch;margin:0 auto 22px} .clockbox{margin-bottom:18px} .clock{ font-family:var(--f-d);font-size:clamp(2.6rem,11vw,3.6rem);font-weight:300; font-variant-numeric:tabular-nums;line-height:1;direction:ltr;color:var(--ink); min-height:1em; /* reserves space so the clock cannot shift layout */ } .clock .mer{font-size:.34em;color:var(--ink-3);margin-inline-start:8px} .clocklbl{font-size:.78rem;color:var(--ink-3);letter-spacing:.04em;margin-top:6px} /* ---------- product shot ---------- Two stacked backgrounds: the real photo on top, a coded render beneath. Drop a file into /images and it simply appears; until then the render shows, so no slot is ever empty and nothing has to be rewritten later. */ .shot{ aspect-ratio:4/5;border-radius:var(--r-lg);background-size:cover; background-position:center 62%;box-shadow:var(--sh-md);position:relative;overflow:hidden; display:flex;align-items:flex-end;justify-content:center;padding:18px; /* Base layer so any .shot with --img renders, not just the colour variants. */ background-image:var(--img,none),var(--shot-fb); } .shot::after{ content:attr(data-label);font-family:var(--f-d);font-weight:700;font-size:.8rem; color:rgba(255,255,255,.94);text-shadow:0 1px 8px rgba(0,0,0,.45); position:relative;z-index:1; } /* Scene heroes keep their native 3:4; the bundle shot is 16:9 with its left third left empty for the Arabic headline. */ .shot-tall{aspect-ratio:3/4;background-position:center} .shot-wide{aspect-ratio:16/9;background-position:center} /* On a phone a 16:9 strip is only ~190px tall and the bottles shrink to nothing. Go taller and bias the crop right, where they stand — cover does the rest, so no second asset is needed. */ @media(max-width:640px){ /* 4:3 on a 16:9 source shows 75% of the width; anchoring at 88% keeps all three bottles in frame and drops the empty left quarter instead. */ .shot-wide{aspect-ratio:4/3;background-position:88% center} } .shot-hudu {background-image:var(--img),linear-gradient(160deg,#4A5DA8,#232C5C)} .shot-umq {background-image:var(--img),linear-gradient(160deg,#6B4E96,#2F2050)} .shot-sabah{background-image:var(--img),linear-gradient(160deg,#C79A34,#7A5A18)} /* ---------- offer / tiers ---------- */ .tiers{display:flex;flex-direction:column;gap:11px;margin-top:20px;border:0;padding:0;min-width:0} .tier{ position:relative;display:flex;align-items:center;gap:13px;cursor:pointer; background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r); padding:16px 16px 16px 14px;transition:border-color .15s,background .15s,box-shadow .15s; } .tier:hover{border-color:var(--brand-line)} .tier.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:var(--sh-sm)} .tier input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .tier:has(:focus-visible){outline:2px solid var(--brand);outline-offset:3px} .radio{ flex:0 0 21px;height:21px;border-radius:50%;border:1.6px solid var(--ink-3); position:relative;transition:border-color .15s; } .tier.on .radio{border-color:var(--brand)} .tier.on .radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brand)} .tinfo{flex:1;min-width:0} .tname{font-family:var(--f-d);font-weight:700;font-size:1rem} .tsub{font-size:.78rem;color:var(--ink-3);margin-top:1px;line-height:1.5} .tprice{text-align:end;flex:0 0 auto;min-width:92px} /* These are all , so without this the name runs straight into its own subtitle and the per-box note lands beside the price. One line each. */ .tname,.tinfo .tsub,.tprice .tnote,.tprice .tsub{display:block} .tinfo .tsub{font-size:.75rem;color:var(--ink-2)} .twas{font-size:.78rem;color:var(--ink-3);text-decoration:line-through} .tnow{font-family:var(--f-d);font-weight:700;font-size:1.2rem;font-variant-numeric:tabular-nums;white-space:nowrap} .tnote{font-size:.72rem;color:var(--green);margin-top:1px} .badge{ position:absolute;top:-10px;inset-inline-start:14px;background:var(--gold);color:var(--btn-ink); font-family:var(--f-d);font-size:.66rem;font-weight:700;padding:3px 10px;border-radius:20px; } /* order bump */ .bump{ margin-top:11px;display:flex;align-items:center;gap:12px;cursor:pointer;position:relative; background:var(--gold-soft);border:1.5px dashed var(--gold-line);border-radius:var(--r);padding:14px 15px; transition:border-color .15s,background .15s; } .bump.on{border-style:solid;border-color:var(--gold);background:var(--bump-on)} .bump input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .bump:has(:focus-visible){outline:2px solid var(--gold);outline-offset:3px} .box{ flex:0 0 21px;height:21px;border-radius:6px;border:1.6px solid var(--ink-3);background:var(--surface); display:flex;align-items:center;justify-content:center;color:var(--btn-ink);font-size:.72rem; } .bump.on .box{background:var(--gold);border-color:var(--gold)} .bump .t{flex:1;font-size:.9rem;font-weight:600} .bump .s{font-size:.78rem;color:var(--ink-2);font-weight:400;margin-top:1px} /* ---------- order form ---------- */ .form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 18px;box-shadow:var(--sh-sm)} .sum{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;margin-bottom:18px} .sl{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:4px 0;color:var(--ink-2)} .sl .sv{color:var(--green)} .sl.tot{ color:var(--ink);font-family:var(--f-d);font-weight:700;font-size:1.1rem; border-top:1px solid var(--line);margin-top:8px;padding-top:11px; } label{display:block;font-size:.84rem;margin:13px 0 6px;font-weight:600} input,select,textarea{ width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:11px; padding:13px 14px;font-size:16px;color:var(--ink);transition:border-color .15s; } input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none} input::placeholder,textarea::placeholder{color:var(--ink-3)} textarea{min-height:76px;resize:vertical} .err{color:var(--red);font-size:.76rem;margin-top:5px;display:none} .err.show{display:block} .field.bad input,.field.bad select,.field.bad textarea{border-color:var(--red);background:var(--red-soft)} .ok{display:none;text-align:center;background:var(--surface);border:1px solid var(--green); border-radius:var(--r-lg);padding:32px 20px;box-shadow:var(--sh-sm)} .ok.show{display:block} .tick{width:54px;height:54px;border-radius:50%;background:var(--green);color:var(--on-green); display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 14px} /* ---------- steps ---------- */ .step{display:flex;gap:14px;padding:13px 0} .num{ flex:0 0 32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand); display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:700;font-size:.9rem; } .step h3{margin-bottom:2px} .step p{font-size:.9rem} /* ---------- comparison table ---------- */ .tbl{width:100%;border-collapse:collapse;margin-top:16px;font-size:.9rem;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .tbl th,.tbl td{padding:12px 10px;text-align:start;border-bottom:1px solid var(--line)} .tbl th{font-family:var(--f-d);font-weight:700;font-size:.82rem;color:var(--ink-2);background:var(--surface-2)} .tbl td.c,.tbl th.c{text-align:center;width:78px} .yes{color:var(--green);font-weight:700} .no{color:var(--ink-3)} .tblwrap{overflow-x:auto} /* ---------- reviews ---------- */ .rev{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:11px;box-shadow:var(--sh-sm)} .revtop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px} .who{font-weight:700;font-size:.9rem} .city{font-size:.78rem;color:var(--ink-3);font-weight:400} .stars5{color:var(--gold-2);font-size:.82rem;letter-spacing:1px} .rev p{font-size:.92rem;color:var(--ink-2)} /* ---------- faq ---------- */ .q{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px; padding:15px 0;text-align:start;font-size:.96rem;font-weight:600;border-bottom:1px solid var(--line); } .q .pm{color:var(--brand);font-size:1.3rem;transition:transform .2s var(--ease);flex:0 0 auto;line-height:1} .q[aria-expanded="true"] .pm{transform:rotate(45deg)} .a{display:none;padding:0 0 16px;font-size:.9rem;color:var(--ink-2)} .a.open{display:block} /* ---------- product cards ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px} @media(max-width:640px){ .cards{gap:11px} .card .shot{aspect-ratio:16/9} .card .body{padding:12px 13px;gap:4px} .card .body p{font-size:.84rem;line-height:1.55} .card .foot{padding-top:9px} } .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} .card .body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1} .card .role{font-size:.74rem;color:var(--gold);font-weight:700;letter-spacing:.04em} .card .facts{font-size:.78rem;color:var(--ink-3)} .card .foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px} .card .price{font-family:var(--f-d);font-weight:700;font-size:1.05rem} .card a.more{font-size:.84rem;color:var(--brand);text-decoration:none;font-weight:600} /* ---------- sticky bar ---------- */ .sticky{ position:fixed;inset-inline:0;bottom:0;z-index:50;background:var(--glass); backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 20px 14px; box-shadow:0 -6px 24px rgba(0,0,0,.35); } .sticky .in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:13px} .stot{flex:0 0 auto} .stot .l{font-size:.72rem;color:var(--ink-3);line-height:1.3} .stot .v{font-family:var(--f-d);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums;line-height:1.25} .sticky .btn{flex:1;padding:14px 18px;font-size:.96rem;width:auto} /* ---------- whatsapp ---------- */ .wa{ position:fixed;inset-inline-start:16px;bottom:92px;z-index:49;width:52px;height:52px;border-radius:50%; background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 6px 20px rgba(37,211,102,.4);text-decoration:none; } .wa svg{width:27px;height:27px;fill:currentColor} /* ---------- checkout sheet ---------- The whole offer — tiers, pack add-ons, form — lives in here now. A bottom drawer on a phone because that is where the thumb is, a centred panel from tablet up. z-index sits under .modal (80) so the post-order upsell still opens on top of it. */ .sheet{position:fixed;inset:0;z-index:70;background:rgba(6,9,17,.55);backdrop-filter:blur(3px); display:flex;align-items:flex-end;justify-content:center} .sheet[hidden]{display:none!important} .sheet-panel{ background:var(--bg);width:100%;max-width:560px;max-height:92%; border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-lg); display:flex;flex-direction:column;overflow:hidden; animation:sheetUp .22s var(--ease); } @keyframes sheetUp{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}} @media(prefers-reduced-motion:reduce){.sheet-panel{animation:none}} .sheet-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 18px;border-bottom:1px solid var(--line); background:var(--surface);flex:0 0 auto; } .sheet-head h3{font-size:1rem;margin:0} .sheet-x{ flex:0 0 40px;height:40px;border-radius:50%;font-size:1.5rem;line-height:1; color:var(--ink-2);display:flex;align-items:center;justify-content:center; } .sheet-x:hover{background:var(--surface-2);color:var(--ink)} /* The scroll lives here, not on the page behind it. */ .sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px 24px} .sheet-body .tiers{margin-top:0} @media(min-width:721px){ .sheet{align-items:center;padding:20px} .sheet-panel{border-radius:var(--r-lg);max-height:88%} } /* The page keeps only the price and one button. */ .buybox{margin-top:20px;text-align:center} .buy-price{font-size:.92rem;color:var(--ink-2);margin-bottom:12px} .buy-price b{font-family:var(--f-d);font-size:1.35rem;color:var(--ink)} /* ---------- upsell modal ---------- */ .modal{position:fixed;inset:0;z-index:80;background:rgba(6,9,17,.70);backdrop-filter:blur(4px); display:none;align-items:center;justify-content:center;padding:20px} .modal.show{display:flex} .modal .panel{background:var(--surface);border-radius:var(--r-lg);max-width:440px;width:100%; padding:26px 22px;text-align:center;box-shadow:var(--sh-lg)} .modal .price-row{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:12px 0} .modal .was{color:var(--ink-3);text-decoration:line-through} .modal .now{font-family:var(--f-d);font-weight:700;font-size:2rem;color:var(--brand)} /* ---------- footer ---------- */ footer{background:var(--surface);border-top:1px solid var(--line);padding:34px 0 26px;text-align:center} .trust{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-bottom:18px} .trust div{font-size:.78rem;color:var(--ink-3)} .trust b{display:block;font-family:var(--f-d);color:var(--brand);font-size:1rem;margin-bottom:1px} footer p{font-size:.76rem;line-height:1.9;color:var(--ink-3)} .flinks{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:14px 0;font-size:.8rem} .flinks a{color:var(--ink-2);text-decoration:none} .legal{max-width:60ch;margin:14px auto 0} /* ---------- benefit chips ---------- Three short facts replace a paragraph. The image-first rule wants a section readable in two seconds, and three chips scan faster than a sentence. */ .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px} .chips span{ font-size:.76rem;color:var(--ink);background:var(--surface-2); border:1px solid var(--line);border-radius:20px;padding:5px 12px; } /* ---------- product-page add-ons ---------- Two independent checkboxes, each showing the actual product. A picture of the box does more to sell the third step than another line of copy. */ .addons{margin-top:14px} .addon{ position:relative;display:flex;align-items:center;gap:12px;cursor:pointer; background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--r); padding:11px 13px;margin-bottom:9px;transition:border-color .15s,background .15s; } .addon:hover{border-color:var(--brand-line)} .addon.on{border-style:solid;border-color:var(--gold);background:var(--surface-2)} .addon input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .addon:has(:focus-visible){outline:2px solid var(--gold);outline-offset:3px} .addon .box{flex:0 0 21px} .addon.on .box{background:var(--gold);border-color:var(--gold)} /* ---------- trust / credentials ---------- Regulatory claims are the highest-risk copy on the whole store, so the placeholders are styled to LOOK unfinished. Shipping them by accident should be impossible to miss in a screenshot. */ /* Four across on one line; two-up on a phone where four would be unreadable. */ .creds{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:16px} @media(max-width:720px){.creds{grid-template-columns:repeat(2,1fr)}} .cred{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:14px 13px;text-align:center; } .cred .ic-badge{ width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand); display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:1rem; } .cred b{display:block;font-family:var(--f-d);font-size:.86rem;margin-bottom:2px} .cred span{font-size:.74rem;color:var(--ink-2);line-height:1.5} .todo{ display:inline-block;background:rgba(224,139,122,.14);border:1px dashed var(--red); color:var(--red);border-radius:6px;padding:1px 7px;font-size:.7rem;font-weight:600; } /* ---------- specialist note ---------- */ .spec{ display:flex;gap:13px;align-items:flex-start;margin-top:16px; background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand); border-radius:var(--r);padding:15px 14px; } .spec-av{ flex:0 0 52px;height:52px;border-radius:50%;background:var(--brand-soft); display:flex;align-items:center;justify-content:center;font-size:1.3rem; background-size:cover;background-position:center;background-image:var(--img,none); } .spec-body{flex:1;min-width:0} .spec-q{font-size:.92rem;color:var(--ink);line-height:1.7;margin-bottom:7px} .spec-who{font-family:var(--f-d);font-weight:700;font-size:.84rem} .spec-meta{font-size:.74rem;color:var(--ink-3);line-height:1.5} /* Trust strip immediately above the submit button — doubt peaks here, so the three true reassurances sit where the thumb already is. */ .reassure{display:flex;gap:10px;justify-content:space-between;margin-top:14px} .reassure div{flex:1;text-align:center;font-size:.7rem;color:var(--ink-2);line-height:1.45} .reassure b{display:block;color:var(--ink);font-size:.78rem;margin-bottom:1px} /* ---------- review avatars ---------- Initial-letter by default. Set --img on .rev-av and a real photo takes over with no markup change. Deliberately NOT a generated face: a placeholder that already looks like a real customer is one label-edit away from being a fake testimonial. */ .rev-av{ flex:0 0 42px;height:42px;border-radius:50%; background:var(--brand-soft);color:var(--brand); display:flex;align-items:center;justify-content:center; font-family:var(--f-d);font-weight:700;font-size:1rem; background-size:cover;background-position:center;background-image:var(--img,none); } .rev-av[style*="--img"]{color:transparent} .revtop{gap:11px} .rev-id{display:flex;align-items:center;gap:11px;min-width:0} .rev-verify{font-size:.7rem;color:var(--ink-3);display:block;margin-top:1px} /* ---------- expert-style educational note ---------- A DEMONSTRATION persona, not an endorsement. The «شخصية وصورة توضيحية» badge is styled to be unmissable and sits directly on the portrait, so the disclosure cannot be lost if the section is screenshotted or cropped. */ .expert{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:18px;box-shadow:var(--sh-sm);margin-top:18px; } .expert-top{display:flex;gap:14px;align-items:center;margin-bottom:13px} .expert-photo{ position:relative;flex:0 0 84px;height:84px;border-radius:14px;overflow:hidden; background-size:cover;background-position:center; background-image:var(--img),var(--shot-fb); } .expert-photo::after{ content:"توضيحية";position:absolute;inset-inline:0;bottom:0; background:rgba(224,139,122,.92);color:#12151F; font-size:.6rem;font-weight:700;text-align:center;padding:2px 0;letter-spacing:.02em; } .expert-who{min-width:0} .expert-name{font-family:var(--f-d);font-weight:700;font-size:1rem} .expert-role{font-size:.78rem;color:var(--ink-2);margin-top:1px} .demo-tag{ display:inline-block;margin-top:6px;background:rgba(224,139,122,.14); border:1px solid var(--red);color:var(--red);border-radius:20px; padding:2px 10px;font-size:.68rem;font-weight:700; } .expert-q{font-size:.94rem;color:var(--ink);line-height:1.85} .expert-note{ margin-top:12px;padding-top:11px;border-top:1px solid var(--line); font-size:.72rem;color:var(--ink-3);line-height:1.6; } /* ---------- routine timeline ---------- Three scenes answering "when do I take each one" without a paragraph. The image does the explaining; the line under it is a label, not a sentence. */ .routine{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:18px} @media(max-width:640px){ .routine{grid-template-columns:repeat(3,1fr);gap:7px} .rstep .shot{aspect-ratio:3/4} .rstep .cap{padding:8px 7px} .rstep .nm{font-size:.78rem;line-height:1.35} .rstep .do{font-size:.68rem;line-height:1.35} .rstep .time{font-size:.66rem} } .rstep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .rstep .shot{aspect-ratio:4/5;border-radius:0;box-shadow:none;background-position:center 62%} .rstep .cap{padding:11px 12px} .rstep .time{font-size:.72rem;color:var(--gold);font-weight:700;letter-spacing:.04em} .rstep .nm{font-family:var(--f-d);font-weight:700;font-size:.92rem;margin-top:2px} .rstep .do{font-size:.78rem;color:var(--ink-2);margin-top:2px;line-height:1.5} /* ---------- night comparison ---------- FIRMx uses a before/after photo slider. Sleep has no photograph, and a "watch your sleep improve" slider would be a results claim. This shows the SHAPE of a broken night vs a continuous one, captioned توضيحي. */ .nightcmp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px;margin-top:16px} .nc-cap{font-size:.72rem;color:var(--ink-3);margin-top:10px;text-align:center} /* ---------- detail strip + ingredient strip ---------- Two jobs: show the thing you actually eat at the moment of decision, and answer "what is in it" without an ingredient paragraph. */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0 4px} .duo .shot{aspect-ratio:1/1;background-position:center} .ing{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:18px} @media(max-width:640px){.ing{grid-template-columns:1fr}} .ing-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .ing-card .shot{aspect-ratio:16/9;border-radius:0;box-shadow:none} .ing-card .cap{padding:10px 12px} .ing-card .nm{font-family:var(--f-d);font-weight:700;font-size:.88rem} .ing-card .sub{font-size:.76rem;color:var(--ink-2);margin-top:2px;line-height:1.5} /* Night comparison, rebuilt in HTML/CSS. It was an inline SVG, but with text-anchor inverts inside dir="rtl" and every Arabic label collapsed to its last glyph. HTML lays Arabic out natively and the bars theme themselves from the tokens. */ .nc-row{margin-bottom:16px} .nc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px} .nc-title{font-family:var(--f-d);font-weight:700;font-size:.84rem} .nc-row.bad .nc-title{color:var(--red)} .nc-row.good .nc-title{color:var(--green)} .nc-sub{font-size:.72rem;color:var(--ink-3)} .nc-track{position:relative;height:28px;border-radius:8px;background:var(--surface-2);overflow:hidden;display:flex;gap:0} .nc-seg{background:var(--seg);height:100%} .nc-gap{background:transparent;height:100%} .nc-row.good .nc-track{background:var(--surface-2)} .nc-full{background:var(--green);opacity:.85;height:100%;width:96%;border-radius:8px} .nc-wake{position:absolute;top:-3px;bottom:-3px;width:3px;border-radius:2px;background:var(--red)} .nc-axis{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-3);margin-top:6px} /* ---------- offer legend ---------- Defines the three products immediately above the tiers. A visitor who scrolled straight to the price has never been told what «هدوء» is; three small jars with a benefit under each fix that in about a second. */ .legend{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 4px} .legend .l{text-align:center} .legend .l .shot{aspect-ratio:1/1;border-radius:12px;box-shadow:none;padding:0} .legend .l .shot::after{content:none} .legend .nm{font-family:var(--f-d);font-weight:700;font-size:.78rem;margin-top:6px} .legend .rl{font-size:.72rem;color:var(--gold);line-height:1.4} /* ---------- mobile touch targets ---------- Measured on a 375px viewport: the nav CTA came in at 37px and the card "التفاصيل" link at 24px, both under the 44px thumb target. The badge was 10.5px, under the 11px floor for legible Arabic at arm's length. */ @media(max-width:640px){ .nav .in .btn{padding:12px 18px} .card a.more{padding:8px 0;display:inline-block} .badge{font-size:.72rem} .flinks a{padding:6px 0} } /* ========================================================================== Product page v2 — gallery, effect story, how-ordering-works, drawer steps ========================================================================== */ /* Screen-reader only. The drawer's numbered step headers say it visually. */ .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- carousel (gallery + story) ---------- Native scroll-snap does the swiping. store.js only lights the dots. */ .car-track{ display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; } .car-track::-webkit-scrollbar{display:none} .car-track > *{scroll-snap-align:start;flex:0 0 100%} .car-dots{display:flex;justify-content:center;gap:4px;margin-top:8px} /* 7px to look at, 19px to hit — the padding is the tap target. */ .car-dots button{ box-sizing:content-box;width:7px;height:7px;padding:6px;border-radius:10px; background:var(--line);background-clip:content-box;transition:width .2s var(--ease),background-color .2s; } .car-dots button.on{width:20px;background-color:var(--brand)} /* ---------- hero gallery ---------- */ .gal{margin:18px 0 4px} .gal-slide{margin:0;position:relative} .gal-slide .shot{aspect-ratio:1/1;background-position:center} .gal-slide .shot::after{content:none} .gal-slide figcaption{ position:absolute;inset-block-end:12px;inset-inline-start:12px; background:rgba(20,16,28,.62);color:#fff;backdrop-filter:blur(6px); font-size:.74rem;font-weight:600;padding:4px 11px;border-radius:20px; } /* ---------- buy box reassurance ---------- */ .mini-trust{ list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px; margin:12px 0 0;padding:0;font-size:.78rem;color:var(--ink-2); } .mini-trust li{display:inline-flex;align-items:center;gap:5px} .mini-trust .ic{color:var(--green)} /* ---------- effect story ---------- Each card is 84% wide so the next beat peeks in — it reads as "swipe" without an instruction. */ .story{margin-top:16px} .story .car-track > *{flex:0 0 84%} @media(min-width:721px){.story .car-track > *{flex:0 0 46%}} .story-card{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .story-card .shot{aspect-ratio:4/5;border-radius:0;box-shadow:none;background-position:center} .story-card .shot::after{content:none} .story-card figcaption{padding:12px 14px 15px;display:flex;flex-direction:column;gap:2px} .story-card figcaption b{font-family:var(--f-d);font-size:1rem;color:var(--ink);line-height:1.4} .story-card figcaption span:last-child{font-size:.84rem;color:var(--ink-2);line-height:1.5} .st-n{font-family:var(--f-d);font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:.04em} .use-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 0;padding:0} .use-chips li{ background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line); border-radius:20px;padding:5px 12px;font-size:.8rem;font-weight:600; } /* ---------- how ordering works ---------- The question every COD buyer has before they type a number: what happens after I press the button. Four steps, answered before they ask. */ .sub-h{font-size:.98rem;margin:20px 0 10px} .howbuy{list-style:none;padding:0;margin:0 0 4px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:hb} @media(max-width:640px){.howbuy{grid-template-columns:repeat(2,1fr)}} .howbuy li{ position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:16px 10px 13px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px; } .howbuy li::before{ counter-increment:hb;content:counter(hb, arabic-indic);position:absolute;top:8px;inset-inline-start:10px; font-size:.7rem;font-weight:700;color:var(--gold); } .howbuy .ic{width:24px;height:24px;color:var(--brand);margin-bottom:4px} .howbuy b{font-family:var(--f-d);font-size:.86rem} .howbuy span{font-size:.74rem;color:var(--ink-2);line-height:1.45} /* ---------- checkout drawer: steps, pinned footer, done state ---------- */ .sheet-body{flex:1 1 auto;min-height:0} .co-step{ display:flex;align-items:center;gap:8px;font-family:var(--f-d);font-weight:700; font-size:.9rem;margin:14px 0 8px;color:var(--ink); } .co-step:first-child{margin-top:2px} .co-step span{ flex:0 0 22px;height:22px;border-radius:50%;background:var(--brand);color:var(--btn-ink); display:inline-flex;align-items:center;justify-content:center;font-size:.72rem; } .co-step em{font-style:normal;font-family:var(--f-b);font-weight:400;font-size:.74rem;color:var(--ink-3);margin-inline-start:auto} /* A number reads left to right, but lines up with the Arabic label above it. */ #f-phone{text-align:right;letter-spacing:.02em} /* The button lives here, outside the scroll, so it is never below the fold. */ .sheet-foot{ flex:0 0 auto;background:var(--surface);border-top:1px solid var(--line); padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -6px 18px rgba(34,27,43,.06); } .sheet-foot .btn{font-size:1.02rem} .foot-trust{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.74rem;color:var(--ink-3);margin-top:7px} .foot-trust .ic{width:13px;height:13px} /* After the order is in, only the confirmation is left. */ .sheet.done .co-step,.sheet.done .tiers,.sheet.done .addons,.sheet.done .sheet-foot{display:none} .ok h3{margin-bottom:4px} .ok-no{font-weight:700;color:var(--brand);font-family:var(--f-d)} .next{list-style:none;padding:0;margin:18px 0 0;text-align:start;counter-reset:nx} .next li{ position:relative;padding:10px 0;padding-inline-start:38px;border-top:1px solid var(--line); display:flex;flex-direction:column; } .next li::before{ counter-increment:nx;content:counter(nx, arabic-indic);position:absolute;inset-inline-start:0;top:11px; width:26px;height:26px;border-radius:50%;background:var(--green-soft);color:var(--green); font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center; } .next b{font-family:var(--f-d);font-size:.9rem} .next span{font-size:.78rem;color:var(--ink-2)} /* ========================================================================== Drawer v3 — shorter form, the pack explained as a night timeline ========================================================================== */ /* ---------- quantity: three boxes in one row ---------- One row instead of three stacked ones. The selected box gets the brand border plus a tick, so the choice reads without a radio circle. */ .tboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0} .sheet .tier.tbox{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start; gap:0;margin:0;padding:15px 6px 9px;text-align:center;border-radius:var(--r); } .tbox input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .tbox:has(:focus-visible){outline:2px solid var(--brand);outline-offset:2px} .tbox .badge{ top:-9px;inset-inline-start:50%;transform:translateX(50%);white-space:nowrap; font-size:.62rem;padding:2px 8px; } .tbox.on::after{ content:"✓";position:absolute;top:6px;inset-inline-end:7px;width:16px;height:16px;border-radius:50%; background:var(--brand);color:var(--btn-ink);font-size:.6rem;display:flex;align-items:center;justify-content:center; } .tb-q{font-family:var(--f-d);font-weight:700;font-size:.9rem;line-height:1.3} .tb-d{font-size:.7rem;color:var(--ink-3)} .tb-p{font-family:var(--f-d);font-weight:700;font-size:1.25rem;margin-top:6px;line-height:1.1;font-variant-numeric:tabular-nums} .tb-p small{font-size:.6rem;font-weight:600;color:var(--ink-2)} .tb-w{font-size:.72rem;color:var(--ink-3);text-decoration:line-through;line-height:1.3;min-height:1.3em} /* ^ empty on the single box, and min-height keeps the three prices level — an   here drew a stray strikethrough dash. */ .tbox .tnote{font-size:.68rem;color:var(--green);font-weight:600;margin-top:1px} /* ---------- order bumps: the other two products ---------- Their own jar on white, a question that names the problem, one line on what it does, and the saving in riyals. Dashed until chosen, gold after. */ .bumps{display:flex;flex-direction:column;gap:8px} .bump2.addon{ display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;cursor:pointer; background:var(--surface);border:1.5px dashed var(--gold-line);border-radius:var(--r); } .bump2.addon.on{border-style:solid;border-color:var(--gold);background:var(--bump-on)} .bump2 .box{flex:0 0 22px;height:22px} .b2-img{ flex:0 0 58px;height:58px;border-radius:10px;border:1px solid var(--line); background:#fff var(--img) center/contain no-repeat; } .b2-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .b2-q{font-family:var(--f-d);font-size:.86rem;line-height:1.35;color:var(--ink)} .b2-line{font-size:.74rem;color:var(--ink-2);line-height:1.4} .b2-price{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;font-size:.76rem;font-weight:700;color:var(--gold)} .b2-save{background:var(--green-soft);color:var(--green);padding:1px 8px;border-radius:10px;font-size:.68rem} .b2-save:empty{display:none} /* what's being ordered, in the drawer's title bar */ .sheet-head h3{flex:1} .co-thumb{ flex:0 0 38px;height:38px;border-radius:9px;border:1px solid var(--line); background:#fff var(--img) center/contain no-repeat; } /* one tap adds both remaining products */ .rt-all{ display:block;width:100%;margin-top:8px;padding:10px 12px;border-radius:var(--r); border:1.5px solid var(--gold);background:var(--gold-soft);color:var(--gold); font-family:var(--f-d);font-weight:700;font-size:.86rem; } .rt-all:hover{background:var(--bump-on)} .rt-all.on{border-color:var(--green);background:var(--green-soft);color:var(--green);cursor:default} /* ---------- two fields, labels inside the box ---------- The label sits at the start of its own input instead of on a line above it, which halves the height of the form without ever hiding what a field is for (a placeholder-only label disappears the moment you type). */ .co-form{margin:0} .co-form .field{position:relative;margin-bottom:10px} .co-form .field:last-of-type{margin-bottom:0} .co-form label{ position:absolute;top:0;right:14px;height:52px;margin:0;display:flex;align-items:center; font-size:.82rem;font-weight:600;color:var(--ink-2);pointer-events:none; } .co-form input{height:52px;padding:0 14px 0 14px;padding-right:74px;background:var(--surface)} .co-form #f-phone{text-align:left} .co-form .err{margin-top:4px} .co-form #formError{margin-top:10px} /* ---------- the whole night, on the page ---------- */ .nightline{margin-top:18px} .nightline .rstep{background:var(--bg)} .nightline .rstep.is-here{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)} .packdeal{ margin-top:18px;text-align:center;background:var(--bg);border:1px solid var(--gold-line); border-radius:var(--r-lg);padding:18px 16px; } .pd-price{font-family:var(--f-d)} .pd-price b{font-size:1.6rem;color:var(--ink)} .pd-was{color:var(--ink-3);text-decoration:line-through;font-size:1rem;margin-inline-end:6px} .pd-note{font-size:.82rem;color:var(--green);font-weight:600;margin:2px 0 14px} .more-links{font-size:.8rem;color:var(--ink-3);margin-top:10px} .more-links a{color:var(--brand);font-weight:600;text-decoration:none;display:inline-block;padding:8px 2px} /* The saving rides on the reassurance line under the button. render() flips it between flex and none, so the gap is what keeps "وفّرت 49" spaced. */ .foot-trust .sv{color:var(--green);font-weight:600;gap:4px} .foot-trust .sv::before{content:"·";margin:0 6px;color:var(--ink-3);font-weight:400} .sheet-head{padding:10px 16px} /* ---------- typing: the keyboard is up ---------- Every pixel above the keyboard goes to the field. The drawer takes the whole visible area, the header tightens, and the footer drops to just the button — the reassurance line comes back as soon as the keyboard closes. */ .sheet.typing .sheet-panel{max-height:100%;border-radius:0} .sheet.typing .sheet-head{padding:6px 14px} .sheet.typing .co-thumb{flex-basis:30px;height:30px} .sheet.typing .foot-trust{display:none} .sheet.typing .sheet-foot{padding:8px 14px;box-shadow:none} .sheet.typing .sheet-foot .btn{padding-top:12px;padding-bottom:12px}