/* AboElsaad Store — tokens captured from the retired storefront, 2026-11-06.
   Values are exact (see docs/BRAND_GUIDELINES.md), not approximations. */
:root{
  --color-background:#000000; --color-surface:#0A0A0A; --color-card:#111111;
  --color-text:#FFFFFF; --color-muted:#A3A3A3; --color-border:#262626;
  --color-primary:#FFFFFF; --color-on-primary:#000000;
  --color-success:#10B981; --color-warning:#F59E0B; --color-danger:#EF4444;
  --border:color-mix(in srgb,#262626 28%,transparent);
  --border-hi:color-mix(in srgb,#262626 52%,transparent);
  --shadow-card:0 4px 20px rgba(0,0,0,.45);
  --shadow-elevated:0 20px 50px rgba(0,0,0,.6);
  --fs-2xs:.75rem; --fs-xs:.8125rem; --fs-sm:.875rem; --fs-md:.9375rem;
  --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.3125rem; --fs-2xl:1.5rem;
  --fs-3xl:1.75rem; --fs-4xl:2rem; --fs-display:3.375rem;
  --fs-floor-arabic:.8125rem;
  --fw-body:400; --fw-label:500; --fw-title:600; --fw-emphasis:700;
  --lh-body:1.7; --lh-title:1.35; --lh-tight:1.2;
  --container:1280px; --section-gap:48px; --side-pad:clamp(12px,4vw,24px); --dock-h:57px;
  --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-snap:cubic-bezier(.22,1,.36,1);
  --dur-micro:180ms; --dur-fast:260ms; --dur-base:350ms; --dur-slow:500ms;
  --rise:15px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--color-background);color-scheme:dark}
body{
  margin:0;background:var(--color-background);color:var(--color-text);
  font-family:Cairo,Tajawal,system-ui,sans-serif;font-size:var(--fs-base);
  font-weight:var(--fw-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:99}

.dock{
  position:sticky;top:0;z-index:50;height:var(--dock-h);display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 var(--side-pad);
  background:color-mix(in srgb,#000 82%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:var(--fw-title)}
.brand img{border-radius:8px}
.brand-name{font-size:var(--fs-md);letter-spacing:.2px}
.nav{display:flex;gap:20px;font-size:var(--fs-sm);font-weight:var(--fw-label);color:var(--color-muted)}
.nav a:hover{color:var(--color-text)}
@media(max-width:640px){.nav{display:none}}

.page{max-width:var(--container);margin-inline:auto;padding:var(--section-gap) var(--side-pad)}

.hero{
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 80% 0%,rgba(255,255,255,.06),transparent 60%),
    var(--color-surface);
  box-shadow:var(--shadow-card);
  padding:clamp(24px,5vw,56px);
  animation:rise var(--dur-slow) var(--ease-out-expo) both;
}
.hero-inner{max-width:620px}
.eyebrow{color:var(--color-muted);font-size:var(--fs-xs);font-weight:var(--fw-label);margin:0 0 10px}
.hero h1{font-size:clamp(var(--fs-3xl),5vw,var(--fs-display));line-height:var(--lh-title);font-weight:var(--fw-title);margin:0 0 16px}
.lede{color:var(--color-muted);font-size:var(--fs-md);line-height:var(--lh-body);margin:0 0 24px}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border-radius:999px;
  background:var(--color-primary);color:var(--color-on-primary);
  font-weight:var(--fw-label);font-size:var(--fs-sm);
  transition:transform var(--dur-micro) var(--ease-snap),opacity var(--dur-micro);
}
.cta:hover{transform:translateY(-1px);opacity:.92}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:var(--section-gap)}
.tile{
  display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:14px;
  background:var(--color-card);border:1px solid var(--border);box-shadow:var(--shadow-card);
  transition:border-color var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-snap);
}
.tile:hover{border-color:var(--border-hi);transform:translateY(-2px)}
.tile-title{font-size:var(--fs-lg);font-weight:var(--fw-title)}
.tile-sub{font-size:var(--fs-floor-arabic);color:var(--color-muted)}

.capacity-note{
  margin-top:var(--section-gap);padding:24px;border-radius:14px;
  background:var(--color-surface);border:1px solid var(--border);
}
.capacity-note h2{font-size:var(--fs-xl);font-weight:var(--fw-title);margin:0 0 10px}
.capacity-note p{font-size:var(--fs-floor-arabic);color:var(--color-muted);margin:0 0 6px}
.muted{color:var(--color-muted)}

.alert{
  max-width:560px;margin:var(--section-gap) auto;padding:28px;border-radius:16px;
  background:var(--color-card);border:1px solid var(--border);box-shadow:var(--shadow-elevated);text-align:center;
}
.alert h1{font-size:var(--fs-2xl);line-height:var(--lh-title);margin:0 0 14px}
.alert p{color:var(--color-muted);margin:0 0 8px;font-size:var(--fs-sm)}
.alert strong{color:var(--color-text);font-weight:var(--fw-title)}

.foot{border-top:1px solid var(--border);padding:28px var(--side-pad);text-align:center}
.foot p{color:var(--color-muted);font-size:var(--fs-xs);margin:0}

@keyframes rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- catalogue ---------- */
.dock-search{display:flex;gap:6px;flex:1;max-width:340px}
.dock-search input{flex:1;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--border-hi);background:var(--color-card);color:var(--color-text);font-family:inherit;font-size:var(--fs-sm)}
.dock-search button{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--border-hi);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--fs-sm);cursor:pointer}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--color-text);color:var(--color-on-primary);font-size:var(--fs-2xs);font-weight:var(--fw-title)}
.cart-link{white-space:nowrap}
@media(max-width:820px){.dock-search{display:none}}

.section{margin-top:var(--section-gap)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-head h1,.section-head h2{font-size:var(--fs-2xl);font-weight:var(--fw-title);margin:0}
.section-head .more{color:var(--color-muted);font-size:var(--fs-sm)}
.section-head .more:hover{color:var(--color-text)}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.filters input,.filters select,.field input,.field select{min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border-hi);background:var(--color-card);color:var(--color-text);font-family:inherit;font-size:var(--fs-sm)}
.filters input[type=search]{flex:1;min-width:180px}
.filters button,.field button,.qty-form button,.status-form button{min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--border-hi);background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:var(--fs-sm);cursor:pointer}
.filters button:hover,.field button:hover{background:var(--color-card)}
.reset{display:inline-flex;align-items:center;color:var(--color-muted);font-size:var(--fs-sm)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;background:var(--color-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-snap)}
.pcard:hover{border-color:var(--border-hi);transform:translateY(-2px)}
.pcard-media{position:relative;display:block;aspect-ratio:3/4;background:var(--color-surface)}
.pcard-media img{width:100%;height:100%;object-fit:cover}
.pcard-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2.5rem;color:var(--color-muted);background:var(--color-surface)}
.pcard-placeholder.large{min-height:320px;font-size:5rem}
.pcard-size{position:absolute;inset-block-start:8px;inset-inline-start:8px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid var(--border-hi);font-size:var(--fs-2xs);font-weight:var(--fw-label)}
.pcard-body{display:flex;flex-direction:column;gap:8px;padding:12px}
.pcard-name{font-size:var(--fs-sm);font-weight:var(--fw-title);line-height:var(--lh-tight);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.pcard-price{font-size:var(--fs-sm);font-weight:var(--fw-title);color:var(--color-text)}
.add{min-height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--border-hi);background:var(--color-text);color:var(--color-on-primary);font-family:inherit;font-size:var(--fs-xs);font-weight:var(--fw-label);cursor:pointer}
.add:hover{opacity:.9}
.inline{display:inline}
.capacity-line{font-size:var(--fs-xs);color:var(--color-muted);margin:0}
.grid.devices{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;font-size:var(--fs-sm);color:var(--color-muted)}
.pager a{color:var(--color-text);border-bottom:1px solid var(--border-hi)}

.empty{margin-top:var(--section-gap);padding:40px 24px;text-align:center;border:1px dashed var(--border-hi);border-radius:16px}
.empty h2{font-size:var(--fs-xl);margin:0 0 8px}
.empty .cta{margin-top:18px}

/* ---------- product detail ---------- */
.crumbs{display:flex;gap:8px;font-size:var(--fs-xs);color:var(--color-muted);margin-bottom:20px}
.crumbs a:hover{color:var(--color-text)}
.pdetail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.pdetail-media{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--color-surface)}
.pdetail-media img{width:100%;height:auto}
.pdetail-info h1{font-size:var(--fs-3xl);line-height:var(--lh-title);margin:0 0 12px}
.pdetail-info .price{font-size:var(--fs-2xl);font-weight:var(--fw-title);margin:0 0 20px}
.chip{display:inline-flex;padding:3px 10px;border-radius:999px;border:1px solid var(--border-hi);font-size:var(--fs-2xs);color:var(--color-muted);margin:0 0 12px}
.buy{display:flex;align-items:end;gap:12px;margin-bottom:16px}
.buy label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);color:var(--color-muted)}
.buy input{width:88px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--border-hi);background:var(--color-card);color:var(--color-text);font-family:inherit}
.small{font-size:var(--fs-xs)}
@media(max-width:820px){.pdetail{grid-template-columns:1fr}}

/* ---------- cart & checkout ---------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}}
.cart-items{display:flex;flex-direction:column;gap:10px}
.cart-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--color-card)}
.cart-row-main{flex:1;display:flex;align-items:center;gap:10px;font-weight:var(--fw-title);font-size:var(--fs-sm)}
.cart-row.bundled{border-style:dashed;background:transparent;font-size:var(--fs-sm)}
.bundled-label{font-size:var(--fs-xs);color:var(--color-muted)}
.qty-form{display:flex;gap:8px;align-items:center}
.qty-form input{width:72px;min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--border-hi);background:var(--color-surface);color:var(--color-text);font-family:inherit}
.link-danger{border:0;background:none;color:var(--color-danger);font-family:inherit;font-size:var(--fs-xs);cursor:pointer;padding:6px}

.cart-summary{position:sticky;top:calc(var(--dock-h) + 12px);display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--color-surface)}
.cart-summary h2{font-size:var(--fs-lg);margin:0}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-xs);color:var(--color-muted)}
.capacity{font-size:var(--fs-xs);color:var(--color-muted);padding:10px;border-radius:10px;background:var(--color-card);border:1px solid var(--border)}
.capacity strong{color:var(--color-text)}
.totals{margin:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.totals div{display:flex;justify-content:space-between;gap:12px}
.totals dt{color:var(--color-muted)}
.totals dd{margin:0}
.totals .discount{color:var(--color-success)}
.totals .grand{border-top:1px solid var(--border);padding-top:10px;font-size:var(--fs-lg);font-weight:var(--fw-title)}
.totals.narrow{max-width:340px}
.mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-xs)}
.mini-list li{display:flex;justify-content:space-between;gap:12px;color:var(--color-muted)}
.cta.wide{width:100%;justify-content:center}

.checkout-form{display:flex;flex-direction:column;gap:6px;max-width:520px}
.checkout-form label{font-size:var(--fs-xs);color:var(--color-muted);margin-top:10px}
.checkout-form input,.checkout-form textarea{min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--border-hi);background:var(--color-card);color:var(--color-text);font-family:inherit;font-size:var(--fs-sm)}
.checkout-form textarea{min-height:88px;resize:vertical}
.checkout-form .cta{margin-top:18px}
.alert-inline{padding:14px 16px;border-radius:12px;border:1px solid var(--color-danger);background:color-mix(in srgb, var(--color-danger) 12%, transparent);font-size:var(--fs-sm);margin-bottom:18px}

.success{max-width:560px;margin:var(--section-gap) auto;padding:32px;text-align:center;border:1px solid var(--border);border-radius:16px;background:var(--color-card);box-shadow:var(--shadow-elevated)}
.success h1{font-size:var(--fs-2xl);margin:0 0 12px}
.success .totals{max-width:320px;margin:20px auto;text-align:start}
.success .cta{margin-top:20px}

.flashes{max-width:var(--container);margin:16px auto 0;padding:0 var(--side-pad)}
.flash{padding:10px 14px;border-radius:10px;font-size:var(--fs-sm);margin:0 0 8px;border:1px solid var(--border-hi);background:var(--color-card)}
.flash-error{border-color:var(--color-danger);color:var(--color-danger)}
.capacity.capacity-over{border-color:var(--color-danger);color:var(--color-danger)}
.capacity-over-msg{font-size:var(--fs-xs);color:var(--color-danger);padding:10px;border-radius:10px;
  border:1px solid var(--color-danger);background:color-mix(in srgb,var(--color-danger) 12%,transparent)}
.cta.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.bundled-price{font-size:var(--fs-xs) !important;color:var(--color-muted);font-weight:var(--fw-label)}
.pcard-size{direction:ltr;unicode-bidi:isolate}

/* ---------- hero carousel ---------- */
.carousel{position:relative;overflow:hidden}
.slides{position:relative}
.slide{display:none;gap:24px;align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,420px)}
.slide.is-active{display:grid;animation:fade var(--dur-slow) var(--ease-out-expo) both}
@keyframes fade{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
.slide .hero-inner{max-width:620px}
.slide-media img{border-radius:14px;width:100%;height:auto;object-fit:cover}
.carousel-nav{position:absolute;inset-block-start:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:999px;border:1px solid var(--border-hi);
  background:color-mix(in srgb,#000 55%,transparent);color:var(--color-text);
  font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:opacity var(--dur-micro)}
.carousel-nav:hover{background:color-mix(in srgb,#000 75%,transparent)}
.carousel-nav.prev{inset-inline-start:12px}
.carousel-nav.next{inset-inline-end:12px}
.carousel-dots{position:absolute;inset-block-end:14px;inset-inline-start:50%;transform:translateX(50%);
  display:flex;gap:8px}
.carousel-dot{width:8px;height:8px;padding:0;border-radius:999px;border:0;cursor:pointer;
  background:color-mix(in srgb,#fff 28%,transparent)}
.carousel-dot.is-active{background:var(--color-text);width:22px}
/* A slide without artwork should not reserve a column for it. */
.slide:not(:has(.slide-media)){grid-template-columns:minmax(0,1fr)}
.slide:not(:has(.slide-media)) .hero-inner{max-width:820px}

@media(max-width:820px){
  .slide.is-active{grid-template-columns:1fr}
  .slide-media{display:none}
  /* On a phone the dots and a swipe are enough; the arrows would sit on the copy. */
  .carousel-nav{display:none}
  .slide .hero-inner h1{font-size:clamp(1.6rem,8vw,2.4rem);line-height:1.25}
  .slide .lede{font-size:var(--fs-sm)}
  .slides{padding-bottom:34px}
}

/* ---------- about block ---------- */
.about .about-body{max-width:760px;padding:24px;border-radius:14px;
  background:var(--color-surface);border:1px solid var(--border)}
.about .about-body p{margin:0 0 10px;font-size:var(--fs-md);line-height:var(--lh-body)}
.about .about-body p:last-child{margin-bottom:0}

/* ---------- desktop section dots ---------- */
.section-dots{position:fixed;inset-inline-start:14px;inset-block-start:50%;transform:translateY(-50%);
  display:none;flex-direction:column;gap:12px;z-index:40}
.section-dots a{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;
  border:1px solid var(--border-hi);background:color-mix(in srgb,#000 60%,transparent)}
.section-dots a span{width:6px;height:6px;border-radius:999px;background:var(--color-muted)}
.section-dots a.is-active span{background:var(--color-text)}
@media(min-width:1100px){.section-dots{display:flex}}

/* ---------- mobile bottom dock ---------- */
.mobile-dock{display:none}
@media(max-width:820px){
  .mobile-dock{position:fixed;inset-block-end:0;inset-inline:0;z-index:60;display:flex;
    justify-content:space-around;align-items:center;height:var(--dock-h);
    background:color-mix(in srgb,#000 88%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--border)}
  .mobile-dock a{display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:var(--fs-2xs);color:var(--color-muted);position:relative;padding:6px 10px}
  .mobile-dock a:hover,.mobile-dock a:focus-visible{color:var(--color-text)}
  .md-icon{font-size:17px;line-height:1}
  .md-cart .badge{position:absolute;inset-block-start:0;inset-inline-end:2px}
  /* keep the floating button and page content clear of the dock */
  body{padding-bottom:calc(var(--dock-h) + 6px)}
  .wa-float{inset-block-end:calc(var(--dock-h) + 12px)}
}

/* ---------- floating WhatsApp ---------- */
.wa-float{position:fixed;inset-block-end:20px;inset-inline-start:20px;z-index:60;
  width:52px;height:52px;border-radius:999px;display:grid;place-items:center;
  background:var(--color-text);color:var(--color-on-primary);box-shadow:var(--shadow-elevated);
  transition:transform var(--dur-micro) var(--ease-snap)}
.wa-float:hover{transform:scale(1.06)}

/* ---------- product gallery (#14) ---------- */
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.gallery-thumbs .thumb-link{display:block;border-radius:10px;overflow:hidden;
  border:2px solid transparent;line-height:0;transition:border-color var(--dur-micro)}
.gallery-thumbs .thumb-link:hover,.gallery-thumbs .thumb-link:focus-visible{border-color:var(--border-hi)}
.gallery-thumbs .thumb-link.is-active{border-color:var(--color-text)}
.gallery-thumbs img{width:80px;height:80px;object-fit:cover;display:block}

/* a failed image keeps the layout and shows the placeholder instead of a broken icon */
img.img-fallback{object-fit:cover;background:var(--color-surface)}

/* ---------- admin gallery ---------- */
.gallery-admin{margin-top:32px}
.gallery-admin .thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;
  border:1px solid var(--border);vertical-align:middle}