:root{color-scheme:light;--ink:#122e4e;--muted:#5c7592;--line:#dce8f4;--green:#169e55}
*{box-sizing:border-box}
html{min-height:100%;background:#f1f7ff}
body{margin:0;color:var(--ink);font-family:'Cairo',Tahoma,Arial,sans-serif;font-weight:700;min-height:100vh;background:radial-gradient(circle at 10% 13%,#d5ebff 0,transparent 38%),linear-gradient(155deg,#f1f8ff,#fff 62%,#f2f9ff)}
a{text-decoration:none;color:inherit}
a:focus-visible{outline:3px solid #dfa545;outline-offset:4px}
.wrap{max-width:900px;margin:auto;padding:0 18px}
header{background:#fff;box-shadow:0 1px 0 var(--line)}
.top{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:49px;height:49px;background:linear-gradient(140deg,#193e65,#0d2442);border:1px solid #d8b36f;border-radius:14px;font-size:32px;place-items:center}
.brand strong{display:block;font-size:20px;font-weight:900;line-height:1.4}
.brand small{display:block;font-size:11px;color:#6684a0;direction:ltr;text-align:right;font-family:Inter,Arial,sans-serif}
main{padding:65px 0 85px}
.lead{text-align:center;max-width:690px;margin:0 auto 32px}
/* V12: separate CONTACT US wording from the existing header divider. */
.lead .eyebrow{display:block;padding-top:22px}
.eyebrow{font:900 12px Inter,Arial,sans-serif;letter-spacing:1px;color:#2c689d}
h1{font-size:clamp(30px,6vw,46px);margin:10px 0 12px;font-weight:900;line-height:1.4}
.lead p{margin:0;color:var(--muted);font-size:15px;line-height:2}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.contact-card{background:white;border:1px solid #dbe7f3;border-radius:22px;padding:25px;box-shadow:0 18px 44px #1b3c6420;display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden}
.contact-card::before{content:'';height:5px;background:linear-gradient(90deg,#1dba6d,#58df95);position:absolute;top:0;left:0;right:0}
.circle{width:47px;height:47px;background:#e5f9ec;border:1px solid #c7ecd3;color:var(--green);border-radius:15px;display:grid;place-items:center;font-size:25px}
.contact-card h2{margin:2px 0 0;font-size:19px;font-weight:900}
.phone{font-family:Inter,Arial,sans-serif;font-size:clamp(19px,3vw,24px);font-weight:900;color:#163c67;direction:ltr;text-align:right;margin:0}
.explain{font-size:12px;color:#6b8298;margin:0;line-height:1.75}
.whatsapp{display:flex;justify-content:center;align-items:center;background:linear-gradient(110deg,#13a555,#1cb964);color:white;border-radius:12px;min-height:52px;padding:12px 15px;text-align:center;font-size:14px;font-weight:900;box-shadow:0 6px 20px #18a45d25;margin-top:auto}
.whatsapp:hover{filter:brightness(1.07)}
.info{margin:26px auto 0;max-width:720px;background:#eef5ff;border:1px solid #d6e5f6;border-radius:15px;padding:16px 20px;text-align:center;color:#4e6a86;font-size:13px;line-height:2}
footer{text-align:center;padding:22px;color:#7289a1;font-size:12px}
@media(max-width:620px){
  .wrap{padding-inline:15px}
  .top{min-height:73px}
  .brand-icon{height:40px;width:40px;font-size:25px}
  main{padding:42px 0 55px}
  .contact-grid{grid-template-columns:1fr;gap:13px}
  .contact-card{padding:21px}
  .lead{margin-bottom:23px}
  .lead p{font-size:13px}
  .info{font-size:12px}
}
/* Android: no automatic visual highlight on normal taps; long-press text selection remains. */
html,body,body *{-webkit-tap-highlight-color:transparent}
a,button,[role="button"]{touch-action:manipulation;-webkit-user-select:none;user-select:none}
p,h1,h2,h3,small,strong,span:not(.brand-icon):not(.circle){-webkit-user-select:text;user-select:text}
a:focus:not(:focus-visible){outline:none}
.brand-icon{font:900 16px Inter,Arial,sans-serif;letter-spacing:-1px;color:#f3c877;display:flex;align-items:center;justify-content:center}
.brand-icon .plus{font-size:24px;color:#47caff}
/* V19 shared promotional-logo branding, same artwork used on the home page. */
.brand-logo-img{display:block;width:116px;height:54px;flex:0 0 116px;object-fit:contain;object-position:center}
@media(max-width:620px){
  .brand-logo-img{width:89px;height:44px;flex:0 0 89px}
  .brand{gap:7px}
  .brand strong{font-size:16px}
  .brand small{font-size:8px;max-width:160px;line-height:1.4}
}
@media(max-width:380px){
  .brand-logo-img{width:80px;flex-basis:80px}
  .brand small{font-size:7px}
}
/* Store language switch, language suggestion bar and sign-out button (same look as store.css) */
.top-links{display:flex;align-items:center;gap:8px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid #d4e3f3;border-radius:100px;background:#f4f8fd;color:#173962;font-size:13px;font-weight:800;line-height:1;white-space:nowrap;text-decoration:none}
.lang-switch .ls-short{display:none}
.lang-banner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;position:relative;padding:9px 46px 9px 14px;background:#0f2b4d;color:#fff;font-size:13.5px;font-weight:800;line-height:1.5;text-align:center}
.lang-banner a{background:#f0cb8a;color:#0f2b4d;border-radius:100px;padding:5px 13px;font-weight:900;white-space:nowrap;text-decoration:none}
.lang-banner button{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:24px;line-height:1;padding:4px 9px;cursor:pointer}
.lang-banner[dir=rtl]{padding:9px 14px 9px 46px}
.lang-banner[dir=rtl] button{right:auto;left:8px}
.nav-logout{display:inline-flex;align-items:center;gap:5px;border:1px solid #efd3d3;background:#fff6f6;color:#9b2c2c;border-radius:100px;padding:7px 11px;font:inherit;font-size:13px;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer}
.nav-logout:disabled{opacity:.6;cursor:wait}
[dir=rtl] .nav-logout svg{transform:scaleX(-1)}
.nav-login{display:inline-flex;align-items:center;gap:5px;border:1px solid #efd9a8;background:#fff7e6;color:#7a5310;border-radius:100px;padding:7px 11px;font-size:13px;font-weight:800;line-height:1;white-space:nowrap;text-decoration:none}
.nav-login:hover{background:#ffefcf}
@media(max-width:610px){
  .nav-login{padding:7px 9px;font-size:12px;gap:4px}
  .lang-switch{padding:7px 9px}
  .lang-switch .ls-long{display:none}
  .lang-switch .ls-short{display:inline}
  .nav-logout{padding:7px 8px}
  .nav-logout .lo-text{display:none}
  .top-links{gap:6px}
}
/* Night mode — html[data-theme=dark] */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid #d4e3f3;background:#f4f8fd;font-size:16px;line-height:1;cursor:pointer;padding:0;flex:none}
.theme-toggle .tt-sun{display:none}
html[data-theme=light]{color-scheme:light}
html[data-theme=dark]{color-scheme:dark;background:#0a1220;--ink:#e6edf6;--muted:#9fb0c4;--line:#22344c}
[data-theme=dark] .theme-toggle .tt-moon{display:none}
[data-theme=dark] .theme-toggle .tt-sun{display:inline}
[data-theme=dark] body{background:radial-gradient(circle at 10% 13%,#132a45 0,transparent 38%),linear-gradient(155deg,#0b1525,#0a1220 62%,#0c1828);color:#e6edf6}
[data-theme=dark] header{background:#0d1727;box-shadow:0 1px 0 #1d2d43}
[data-theme=dark] .brand small{color:#9fb0c4}
[data-theme=dark] .theme-toggle,[data-theme=dark] .lang-switch{background:#15243a;border-color:#2a3f5c;color:#e6edf6}
[data-theme=dark] .nav-logout{background:#2a1618;border-color:#5a2a2e;color:#ffb4b4}
[data-theme=dark] .nav-login{background:#2a2214;border-color:#5c4a24;color:#f3d08c}
[data-theme=dark] .nav-login:hover{background:#33291a}
[data-theme=dark] .eyebrow{color:#8cc1ff}
[data-theme=dark] .contact-card{background:#111c2d;border-color:#22344c;box-shadow:0 18px 44px rgba(0,0,0,.4)}
[data-theme=dark] .circle{background:#0f2a1d;color:#4fd18b}
[data-theme=dark] .info{background:#111c2d;border-color:#22344c;color:#c7d3e0}
[data-theme=dark] footer{color:#9fb0c4}
[data-theme=dark] .phone{color:#8cc1ff}
[data-theme=dark] .explain{color:#9fb0c4}
/* V21 phones: the top bar fits with the sign-in button (logo alone, tighter on small screens) */
@media(max-width:520px){
  .lang-switch>span:first-child{display:none}
  .brand>span{display:none}
  .nav-login{padding:7px 8px;gap:3px}
}
@media(max-width:340px){
  .brand-logo-img{width:66px;flex-basis:66px}
  .top-links{gap:4px}
  .lang-switch{padding:6px 7px}
}
/* V22 cart link in the top bar */
.nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid #d4e3f3;background:#f4f8fd;color:#173962;flex:none;text-decoration:none}
.nav-cart:hover{background:#e7f0fb}
.cart-count{position:absolute;top:-6px;inset-inline-end:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:100px;background:linear-gradient(180deg,#f0cb8a,#dca660);color:#0f2b4d;border:2px solid #fff;font:900 10.5px/15px Inter,Cairo,sans-serif;text-align:center}
.cart-count[hidden]{display:none}
@media(max-width:520px){
  .nav-cart{width:30px;height:30px}
  .nav-cart svg{width:17px;height:17px}
  .cart-count{min-width:17px;height:17px;font-size:10px;line-height:13px}
}
[data-theme=dark] .nav-cart{background:#15243a;border-color:#2a3f5c;color:#e6edf6}
[data-theme=dark] .nav-cart:hover{background:#1b2e48}
[data-theme=dark] .cart-count{border-color:#0b1422}
/* Small phones: night mode moves from the top bar to the footer. */
.foot-theme{display:none;align-items:center;gap:6px;margin:10px auto 0;padding:7px 14px;border:1px solid #d4e3f3;border-radius:100px;background:#f4f8fd;color:#173962;font:800 13px Cairo,sans-serif;cursor:pointer}
.foot-theme .tt-sun{display:none}
[data-theme=dark] .foot-theme{background:#15243a;border-color:#2a3f5c;color:#e6edf6}
[data-theme=dark] .foot-theme .tt-moon{display:none}
[data-theme=dark] .foot-theme .tt-sun{display:inline}
@media(max-width:430px){
  .top-links .theme-toggle{display:none}
  footer .foot-theme{display:flex}
}
/* "🏠 Home" path under the top bar (same look as store.css) */
.crumbs{display:flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}
.crumbs>*{flex:none}
.crumbs>:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.crumbs .crumb-home{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border:1px solid #d4e3f3;border-radius:100px;background:#f4f8fd;color:#173962;font-weight:800;text-decoration:none}
.crumbs .crumb-home:hover{background:#e7f0fb}
[data-theme=dark] .crumbs .crumb-home{background:#15243a;border-color:#2a3f5c;color:#e6edf6}
[data-theme=dark] .crumbs .crumb-home:hover{background:#1b2e48}
.crumbs{margin:18px 0 0;font-size:13px;color:#59718d}
[data-theme=dark] .crumbs{color:#9fb0c4}