/* Layout concept: each offer shows its ad design, with the same price and inclusions repeated as real text beside it. */
:root{
  --white:#FFFFFF; --ink:#26141F; --muted:#665A62; --line:#EADFE4;
  --red:#C8142F; --red-dark:#A50F26; --plum:#4C1C3E; --plum-2:#6B2A57;
  --tint:#F9EEF1; --tint-2:#F3E8F0; --sand:#FBF7F8;
  --amber:#8A5A00; --amber-bg:#FFF4D6;
  --display:"Alexandria","IBM Plex Sans Arabic",sans-serif; --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,48px); --max:1240px; --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.75 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:3px solid var(--plum-2);outline-offset:3px}
h1,h2,h3,p,ul{margin:0;padding:0}
h1,h2,h3{font-family:var(--display);line-height:1.3;text-wrap:balance}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.draft{background:var(--amber-bg);color:var(--amber);font-size:13px;text-align:center;padding:5px var(--gutter)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 24px;background:var(--red);color:#fff;font:600 16.5px/1.3 var(--body);text-decoration:none;border-radius:10px;white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--red-dark)}
header{background:var(--white);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;gap:28px;min-height:88px}
.logo{width:104px}
nav{display:flex;gap:28px;margin-inline-start:auto;font-weight:500;font-size:15.5px}
nav a{text-decoration:none;padding-block:6px}
nav a:hover{color:var(--red)}
.intro{background:var(--plum);color:#fff;padding-block:clamp(34px,4.5vw,56px)}
h1{font-size:clamp(36px,4.6vw,60px);font-weight:800}
.intro p{margin-top:10px;font-size:clamp(17px,1.6vw,20px);color:#F4E9F0;max-width:44em}
.jump{position:sticky;top:0;z-index:4;background:var(--white);border-bottom:1px solid var(--line)}
.jump .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:12px}
.jump a{flex:none;padding:7px 16px;background:var(--tint);border-radius:999px;font-size:15px;font-weight:500;text-decoration:none}
.jump a:hover{background:var(--plum);color:#fff}
.dept{padding-block:clamp(40px,5vw,64px) 0;scroll-margin-top:62px}
.dept h2{font-size:clamp(25px,3vw,36px);font-weight:800}
.sub{color:var(--muted);margin-top:4px}

/* Four offers, four designs */
.cards{display:grid;gap:16px;margin-top:22px;grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;background:var(--tint);border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.card .in{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;flex:1}
.card h3{font-size:clamp(17px,1.4vw,19px);font-weight:700}
.price{font:800 clamp(24px,2.1vw,29px)/1.2 var(--display);color:var(--red)}
.price small{font:600 14.5px var(--body)}
.was{font-size:14.5px;color:var(--muted)}
.incl{font-size:15.5px;line-height:1.6;margin-top:3px}
.go{margin-top:auto;padding-top:10px;font-weight:600;font-size:15px;color:var(--plum-2)}

/* One design, several prices */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,52px);align-items:center;margin-top:22px}
.split .art{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.list{display:grid;border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 20px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.row:hover h3{color:var(--red)}
.row h3{font-size:clamp(18px,1.6vw,21px);font-weight:700}
.row .incl{grid-column:1;margin:0;color:var(--muted)}
.row .price{grid-column:2;grid-row:1 / span 2;text-align:end}
.row .go{grid-column:1 / -1;margin:0;padding-top:4px}
.single{background:var(--tint);border-radius:var(--r);padding:clamp(20px,3vw,34px)}
.single .price{font-size:clamp(36px,4vw,52px);margin-top:6px}
.single h3{font-size:clamp(22px,2.2vw,28px);font-weight:700}
.single ul{list-style:none;margin-block:14px;border-top:1px solid var(--line)}
.single li{padding:8px 0;border-bottom:1px solid var(--line)}
.single .btn{margin-top:6px}

.single.hijama{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px clamp(24px,5vw,64px);margin-top:22px;align-items:center}
.single.hijama ul{margin-top:0}
.single.hijama .btn{margin-top:14px}
.fine{font-size:14.5px;color:var(--muted);padding-block:22px clamp(48px,6vw,72px);max-width:80ch}
footer{background:var(--plum);color:#EADCE6;font-size:15px;padding-block:30px clamp(96px,8vw,40px)}
footer b{color:#fff;font-family:var(--display)}
.bar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:7;background:var(--white);border-top:1px solid var(--line);padding:8px 12px;gap:8px}
.bar .btn{flex:1}
.bar .line{background:var(--white);color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
@media (max-width:1040px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  body{font-size:16.5px}
  nav,.head .btn{display:none}
  .head{min-height:72px;justify-content:center}
  .logo{width:84px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .split,.single.hijama{grid-template-columns:minmax(0,1fr)}
  .bar{display:flex}
}