:root {
  --petal: #fbf3f4;   /* page */
  --blush: #f3dbe0;   /* soft surfaces */
  --rose: #c8325a;    /* accent: prices, active chip */
  --ink: #2b1420;     /* text */
  --muted: #7a5d69;
  --leaf: #2e4b3c;    /* actions */
  --line: #e7cdd3;
  --display: 'Aref Ruqaa', serif;
  --body: 'Readex Pro', system-ui, sans-serif;
  --arch: 50% 50% 0 0 / 22% 22% 0 0;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--petal);
  color: var(--ink);
  font: 400 1rem/1.75 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
s { color: var(--muted); font-size: .85em; font-weight: 300; }

/* ---------- header ---------- */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1rem;
  background: color-mix(in srgb, var(--petal) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.logo { font: 700 1.9rem/1 var(--display); color: var(--rose); text-decoration: none; margin: 0; }
.cart-btn {
  position: relative; display: grid; place-items: center;
  inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.count {
  position: absolute; inset-block-start: 2px; inset-inline-end: 0;
  min-inline-size: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--rose); color: #fff; font-size: .72rem; line-height: 20px; text-align: center;
}

/* ---------- hero: the one loud moment ---------- */
.hero {
  display: grid; gap: 1.5rem;
  max-inline-size: 1120px; margin-inline: auto;
  padding: 1.5rem 1rem 3rem;
}
.hero-art { position: relative; justify-self: center; inline-size: min(64vw, 400px); }
.arch { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 0 0; }
.petal {
  position: absolute; inset-block-end: -1.25rem; inset-inline-end: -1.5rem;
  inline-size: 38%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50% 50% 50% 0; border: 5px solid var(--petal);
}
.wordmark {
  margin: -5.5rem 0 0; position: relative;
  font: 700 clamp(6rem, 30vw, 13rem)/1 var(--display);
  color: var(--rose);
  text-shadow: 0 0 0 var(--petal), 3px 3px 0 var(--petal), -3px -3px 0 var(--petal), 3px -3px 0 var(--petal), -3px 3px 0 var(--petal);
}
.lede { max-inline-size: 34ch; margin: .5rem 0 1.5rem; font-size: 1.1rem; color: var(--muted); }
.perks { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: .9rem; }
.perks li::before { content: '✿'; color: var(--rose); margin-inline-end: .4rem; }

@media (min-width: 800px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; padding-block: 3rem 5rem; }
  .hero-art { order: 2; }
  .wordmark { margin: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 48px; padding: .6rem 1.6rem;
  border: 0; border-radius: 999px;
  background: var(--leaf); color: #fff; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform .15s, background .15s;
}
.btn:hover { background: #233a2e; }
.btn:active { transform: scale(.97); }
.btn.wide { inline-size: 100%; }
.btn.wa { background: #1f8f4e; }
.btn.wa:hover { background: #18773f; }

/* ---------- shop ---------- */
.shop { max-inline-size: 1120px; margin-inline: auto; padding: 0 1rem 4rem; scroll-margin-block-start: 4rem; }
.section-title { font: 700 2.4rem/1.2 var(--display); margin: 0 0 1rem; }
.chips {
  position: sticky; top: 61px; z-index: 4;
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  margin-inline: -1rem; padding: .6rem 1rem; background: var(--petal);
}
.chip {
  flex: none; min-block-size: 40px; padding: .35rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--petal); }
.status { color: var(--muted); }

.grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem .9rem;
  margin: 1.25rem 0 0; padding: 0; list-style: none;
}
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card { display: block; inline-size: 100%; padding: 0; border: 0; background: none; text-align: start; cursor: pointer; }
.card-img { position: relative; display: block; overflow: hidden; border-radius: var(--arch); background: var(--blush); }
.card-img img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img img { transform: scale(1.04); }

/* ---------- arch doors over product photos: open on hover, keyboard focus, or press-and-hold ---------- */
.doors {
  position: absolute; inset: 0; z-index: 1; display: flex;
  direction: ltr; /* first leaf = left, regardless of page direction */
  perspective: 900px; pointer-events: none;
}
.leaf {
  flex: 1; position: relative;
  /* mashrabiya: lattice lines solid, wood behind them half see-through so the product shows (--veil) */
  background: var(--pattern) center / var(--tile) repeat, color-mix(in srgb, var(--wood) var(--veil, 50%), transparent);
  box-shadow: inset 0 0 0 7px var(--wood), inset 0 0 0 8.5px var(--trim), inset 0 0 14px rgb(0 0 0 / .18);
  transition: transform .8s cubic-bezier(.2, .75, .25, 1), opacity .8s;
  backface-visibility: hidden;
}
/* each leaf = half of the arch, so the trim follows the curve; slightly ajar = a peek of the product */
.leaf:first-child { border-radius: 100% 0 0 0 / 22% 0 0 0; transform-origin: left center; transform: rotateY(9deg); }
.leaf:last-child { border-radius: 0 100% 0 0 / 0 22% 0 0; transform-origin: right center; transform: rotateY(-9deg); }
/* door pull */
.leaf::after {
  content: ''; position: absolute; inset-block-start: 56%;
  inline-size: 11px; block-size: 11px; border-radius: 50%;
  border: 2px solid var(--trim); background: var(--wood);
}
.leaf:first-child::after { right: 9px; }
.leaf:last-child::after { left: 9px; }

@media (hover: hover) {
  .card:hover .leaf:first-child { transform: rotateY(105deg); opacity: .15; }
  .card:hover .leaf:last-child { transform: rotateY(-105deg); opacity: .15; }
}
.card:focus-visible .leaf:first-child, .card:active .leaf:first-child { transform: rotateY(105deg); opacity: .15; }
.card:focus-visible .leaf:last-child, .card:active .leaf:last-child { transform: rotateY(-105deg); opacity: .15; }

/* one door per category: wood + trim + geometric pattern */
.door-ebony {   /* عبايات: ebony with gold 8-point stars */
  --wood: #2a1b1f; --trim: #c9a24a; --tile: 44px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='2' stroke-opacity='1'%3E%3Crect x='12' y='12' width='20' height='20'/%3E%3Crect x='12' y='12' width='20' height='20' transform='rotate(45 22 22)'/%3E%3Ccircle cx='22' cy='22' r='3.5'/%3E%3Cpath d='M0 0L6 6M44 0L38 6M0 44L6 38M44 44L38 38'/%3E%3C/g%3E%3C/svg%3E");
}
.door-rose {    /* طرح: rose with mashrabiya lattice */
  --wood: #b5385d; --trim: #f6d7a8; --tile: 26px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='2'%3E%3Cpath d='M0 13L13 0L26 13L13 26Z'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.door-blossom { /* بنات: blush with six-petal flowers */
  --wood: #e58fa6; --trim: #fff3f5; --tile: 38px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cg fill='%23fff' fill-opacity='.7'%3E%3Ccircle cx='19' cy='12.5' r='4'/%3E%3Ccircle cx='19' cy='25.5' r='4'/%3E%3Ccircle cx='13.4' cy='15.8' r='4'/%3E%3Ccircle cx='24.6' cy='15.8' r='4'/%3E%3Ccircle cx='13.4' cy='22.2' r='4'/%3E%3Ccircle cx='24.6' cy='22.2' r='4'/%3E%3C/g%3E%3Ccircle cx='19' cy='19' r='2.6' fill='%23fff'/%3E%3C/svg%3E");
}
.door-sky {     /* بيبي: soft sky with crescents and stars */
  --wood: #8fb8d8; --trim: #fdf6e3; --tile: 46px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='%23fff' fill-opacity='.9'%3E%3Cpath d='M15 8a8 8 0 1 0 8 11a6.2 6.2 0 1 1-8-11z'/%3E%3Cpath d='M34 27l1.6 3.2 3.5.5-2.5 2.5.6 3.5-3.2-1.7-3.2 1.7.6-3.5-2.5-2.5 3.5-.5z'/%3E%3C/g%3E%3C/svg%3E");
}
.door-leaf {    /* any other category: deep green with hexagons */
  --wood: #2e4b3c; --trim: #e9d9a6; --tile: 28px 48px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48'%3E%3Cpath d='M14 0L28 8V24L14 32L0 24V8ZM14 32V48' fill='none' stroke='%23e9d9a6' stroke-opacity='.95' stroke-width='2'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .leaf, .card:focus-visible .leaf, .card:active .leaf { opacity: 0; }
}

.tag { z-index: 2; }
.tag {
  position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem;
  padding: .1rem .6rem; border-radius: 999px; background: var(--rose); color: #fff; font-size: .78rem;
}
.card-name { display: block; margin-block-start: .6rem; font-weight: 500; line-height: 1.5; }
.price { margin: 0; color: var(--rose); font-weight: 600; }

/* ---------- dialogs ---------- */
dialog { padding: 0; border: 0; color: inherit; background: var(--petal); }
dialog::backdrop { background: rgb(43 20 32 / .45); }
.x {
  position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; z-index: 1;
  inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%;
  background: var(--petal); font-size: 1.5rem; line-height: 1; cursor: pointer;
}

.sheet { inline-size: min(100%, 860px); max-block-size: 92dvh; margin-block-end: 0; border-radius: 24px 24px 0 0; }
.sheet[open] { animation: rise .28s ease-out; }
.sheet-body { position: relative; display: grid; }
.sheet-img { inline-size: 100%; max-block-size: 50dvh; object-fit: cover; }
.sheet-info { padding: 1.25rem 1.25rem 1.5rem; }
.cat { margin: 0; color: var(--muted); font-size: .9rem; }
.sheet-title { margin: 0; font: 700 2rem/1.3 var(--display); }
.note { color: var(--muted); margin: .25rem 0 0; }
fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
legend { font-weight: 500; margin-block-end: .4rem; }
.opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt input { position: absolute; opacity: 0; }
.opt span {
  display: inline-grid; place-items: center; min-inline-size: 48px; min-block-size: 44px; padding: 0 .9rem;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--petal); }
.opt input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.sheet .btn { margin-block-start: 1.5rem; }

@media (min-width: 800px) {
  .sheet { margin-block: auto; border-radius: 24px; }
  .sheet-body { grid-template-columns: 1fr 1fr; }
  .sheet-img { max-block-size: none; block-size: 100%; aspect-ratio: 3 / 4; }
  .sheet-info { padding: 3rem 2rem 2rem; }
}

.drawer {
  inline-size: min(100%, 420px); max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh;
  margin: 0; margin-inline-start: auto; border-radius: 0;
}
.drawer[open] { animation: slide .25s ease-out; }
.drawer-body { position: relative; padding: 1rem 1.25rem 2rem; }
.drawer-head h3 { margin: 0 0 1rem; font: 700 2rem/1.4 var(--display); }
.lines { margin: 0; padding: 0; list-style: none; }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: .75rem; align-items: center; padding-block: .75rem; border-block-end: 1px solid var(--line); }
.line img { inline-size: 64px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--arch); }
.line p { margin: 0; line-height: 1.5; }
.line-name { font-weight: 500; }
.line-opts { color: var(--muted); font-size: .85rem; }
.qty { display: flex; align-items: center; gap: .25rem; }
.qty button { inline-size: 36px; block-size: 36px; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
.qty span { min-inline-size: 1.5rem; text-align: center; }
.empty { color: var(--muted); }

.checkout { display: grid; gap: .8rem; margin-block-start: 1rem; }
.checkout label { display: grid; gap: .25rem; font-size: .9rem; font-weight: 500; }
.checkout input, .checkout textarea {
  inline-size: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; font-size: 1rem; font-weight: 400;
}
.checkout input[dir="ltr"] { text-align: end; }
.err { margin: 0; color: var(--rose); min-block-size: 1.2em; font-size: .9rem; }

/* ---------- offers / stock / quantity / totals ---------- */
.chip.hot { border-color: var(--rose); color: var(--rose); }
.chip.hot[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: #fff; }
.tag.low { background: var(--ink); }
.tag.out { background: var(--muted); }
.card.is-out img { filter: grayscale(.85); opacity: .7; }
.btn:disabled { background: var(--muted); cursor: not-allowed; transform: none; }
.qty button:disabled { opacity: .35; cursor: not-allowed; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.stepper button { inline-size: 44px; block-size: 44px; border: 0; background: none; font-size: 1.25rem; cursor: pointer; }
.stepper input {
  inline-size: 3rem; border: 0; background: none; text-align: center; font-size: 1.05rem; font-weight: 500;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stock { margin: .4rem 0 0; color: var(--rose); font-size: .9rem; }
.stock:empty { display: none; }

.free { margin: 0; padding: .6rem .9rem; border-radius: 12px; background: var(--blush); font-size: .9rem; }
.free:empty { display: none; }
.sum { margin: 0; display: grid; gap: .3rem; }
.sum div { display: flex; justify-content: space-between; }
.sum dt { color: var(--muted); }
.sum dd { margin: 0; }
.sum .grand { padding-block-start: .4rem; border-block-start: 1px solid var(--line); font-size: 1.15rem; font-weight: 600; }
.sum .grand dt { color: var(--ink); }
.sum .grand dd { color: var(--rose); }
.checkout select {
  inline-size: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; font: inherit; font-size: 1rem; font-weight: 400;
}

.done { padding: 1.25rem; border-radius: 16px; background: var(--blush); }
.done p { margin: 0; }
.done-title { font: 700 1.6rem/1.4 var(--display); color: var(--rose); margin-block-end: .4rem !important; }
.done a { color: var(--leaf); font-weight: 600; }

/* ---------- toast / footer ---------- */
.toast {
  position: fixed; inset-inline: 1rem; inset-block-end: 1rem; z-index: 10;
  max-inline-size: 420px; margin-inline: auto; padding: .9rem 1.2rem;
  border: 0; border-radius: 14px; background: var(--ink); color: var(--petal); text-align: start; cursor: pointer;
  translate: 0 150%; transition: translate .3s ease;
}
.toast.show { translate: 0 0; }
.toast u { color: var(--blush); margin-inline-start: .5rem; }

.foot { display: flex; align-items: center; justify-content: space-between; padding: 2rem 1rem; border-block-start: 1px solid var(--line); }
.foot-links { display: flex; gap: 1.5rem; margin: 0; }
.foot-links a { color: var(--ink); }

@keyframes rise { from { translate: 0 40px; opacity: 0; } }
@keyframes slide { from { translate: -40px 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}