@import url("https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Tajawal:wght@400;500;700&display=swap");
/* Nakhla: palm green and gold, arch frames, calligraphic headings. */
body[data-demo=sadates] {
  --bg: #f6f0e2; --ink: #17271f; --muted: #6b6857; --card: #fffcf4; --line: #e3d6b8;
  --accent: #173f30; --accent-ink: #f6f0e2; --accent2: #bf933a; --radius: 6px;
  --green: #123527; --green2: #1a4635; --gold: #c9a24b; --gold2: #e6c97f;
  --display: "Aref Ruqaa", "Amiri", serif; --font: "Tajawal", system-ui, sans-serif; --kit-bg: #fffcf4;
}
[dir=ltr] body[data-demo=sadates] { --display: "Amiri", serif; }
.nk-orn { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold); font-weight: 700; font-size: 14.5px; letter-spacing: .5px; margin: 0 0 10px; }
.nk-orn::before, .nk-orn::after { content: "❖"; font-size: 11px; opacity: .85; }

/* header: announcement + centred emblem */
body[data-demo=sadates] #top { display: block; padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.nk-ann { background: var(--green); color: var(--gold2); display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; font-size: 13px; padding: 6px 16px; font-weight: 500; }
.nk-ann span + span::before { content: "✦"; margin-inline-end: 28px; color: var(--gold); }
.nk-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px clamp(16px, 4vw, 48px); max-width: 1360px; margin: 0 auto; }
body[data-demo=sadates] #top .nk-nav { display: flex; gap: 26px; color: var(--ink); font-weight: 500; }
.nk-nav a:hover { color: var(--accent2); }
.nk-mark { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nk-mark img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold); }
.nk-mark b { font: 700 24px/1.1 var(--display); color: var(--green); }
.nk-end { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.nk-tx { background: none; border: 0; padding: 0; font-size: 14px; color: var(--muted); }
.nk-tx:hover { color: var(--ink); }
.nk-bag { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--gold); background: none; color: var(--green); border-radius: 4px; padding: 7px 12px; font-weight: 700; }
.nk-bag b { background: var(--green); color: var(--gold2); min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }

/* hero: green showcase with three arches */
body[data-demo=sadates] #hero { display: block; max-width: none; text-align: center; padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 48px) 0; color: var(--bg);
  background: radial-gradient(circle at 50% 120%, rgba(201,162,75,.28), transparent 55%), radial-gradient(rgba(201,162,75,.12) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--green); overflow: hidden; }
.nk-hero-copy { max-width: 760px; margin: 0 auto; }
body[data-demo=sadates] #hero h1 { font: 700 clamp(46px, 7vw, 96px)/1.3 var(--display); color: var(--gold2); margin: 0 0 12px; }
.nk-sub { color: rgba(246,240,226,.82); font-size: 18px; margin: 0 auto 26px; max-width: 640px; }
.nk-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.nk-btn { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: var(--green); font-weight: 700; padding: 13px 30px; border-radius: 3px; font-size: 16.5px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.nk-btn.line { background: none; color: var(--gold2); box-shadow: inset 0 0 0 1px var(--gold); }
.nk-window { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 26px); margin: clamp(36px, 5vw, 56px) auto 0; max-width: 1100px; }
.nk-arch { margin: 0; position: relative; border-radius: 999px 999px 0 0; padding: 8px 8px 0; background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.nk-arch img { border-radius: 999px 999px 0 0; object-fit: cover; width: 100%; height: 100%; }
.nk-arch.mid { width: 46%; aspect-ratio: 3/3.3; }
.nk-arch.side { width: 24%; aspect-ratio: 3/4.2; margin-bottom: 0; opacity: .95; }
.nk-arch figcaption { position: absolute; bottom: 12px; inset-inline: 8px; background: rgba(18,53,39,.85); color: var(--gold2); font-size: 13px; padding: 5px 6px; }

/* shop */
body[data-demo=sadates] #shop .head h2, .nk-faq h2 { font: 700 clamp(36px, 4.6vw, 58px)/1.3 var(--display); color: var(--green); }
body[data-demo=sadates] #shop .head h2::after, .nk-faq h2::after { content: ""; display: block; width: 140px; height: 12px; margin: 6px auto 0; background: radial-gradient(circle, var(--gold) 3px, transparent 3.5px) center / 12px 12px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat; }
body[data-demo=sadates] #shop .filters button { border-radius: 3px; border-color: var(--gold); background: none; padding: 7px 20px; font-weight: 700; color: var(--green); }
body[data-demo=sadates] #shop .filters button.on { background: var(--green); color: var(--gold2); border-color: var(--green); }
body[data-demo=sadates] #shop .filters .sort { border-radius: 3px; border-color: var(--gold); }
body[data-demo=sadates] #shop .grid { grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1140px; margin: 0 auto; }
.nk-card { background: var(--card); border: 1px solid var(--line); outline: 1px solid var(--gold); outline-offset: -9px; padding: 22px 22px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; animation: kitpop .5s both; transition: box-shadow .3s, transform .3s; }
.nk-card:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -26px rgba(18,53,39,.55); }
.nk-card.off { opacity: .55; cursor: default; }
.nk-ph { position: relative; width: 84%; aspect-ratio: 1/1.08; border-radius: 999px 999px 0 0; overflow: hidden; border: 1px solid var(--gold); padding: 5px; margin: 6px 0 6px; }
.nk-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 0 0; transition: transform .8s; }
.nk-card:hover .nk-ph img { transform: scale(1.06); }
.nk-badge { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--green); color: var(--gold2); font-size: 12px; font-weight: 700; padding: 3px 14px; white-space: nowrap; }
.nk-card h3 { font: 700 26px/1.3 var(--display); color: var(--green); }
.nk-desc { margin: 0; color: var(--muted); font-size: 14px; }
.nk-price { font: 700 21px var(--font); color: var(--accent2); }
.nk-weights { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.nk-weights span { border: 1px solid var(--line); padding: 4px 12px; display: grid; line-height: 1.35; min-width: 84px; }
.nk-weights small { color: var(--muted); font-size: 12px; }
.nk-weights b { color: var(--accent2); font-size: 16px; }
.nk-add { margin-top: auto; width: 100%; background: var(--green); color: var(--gold2); border: 0; padding: 11px; font-weight: 700; border-radius: 2px; transition: background .2s; }
.nk-card:hover .nk-add { background: var(--green2); }

/* farm */
.nk-farm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; max-width: 1180px; }
.nk-farm figure { margin: 0; border-radius: 999px 999px 0 0; overflow: hidden; border: 1px solid var(--gold); padding: 8px; }
.nk-farm figure img { border-radius: 999px 999px 0 0; aspect-ratio: 4/4.4; object-fit: cover; width: 100%; }
.nk-farm-in .nk-orn { justify-content: flex-start; }
.nk-farm-in .nk-orn::after { display: none; }
.nk-farm-in h2 { font: 700 clamp(34px, 4.2vw, 54px)/1.3 var(--display); color: var(--green); margin-bottom: 10px; }
.nk-farm-in > p { font-size: 17px; color: var(--muted); }
.nk-farm-in ol { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.nk-farm-in li { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--green); }
.nk-farm-in li b { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--accent2); font-size: 17px; box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px rgba(201,162,75,.5); }

/* corporate */
.nk-corp { padding: clamp(40px, 6vw, 80px) clamp(12px, 3vw, 40px); }
.nk-corp-in { max-width: 1180px; margin: 0 auto; background: var(--green); color: var(--bg); padding: clamp(26px, 5vw, 60px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; outline: 1px solid var(--gold); outline-offset: -12px; background-image: radial-gradient(rgba(201,162,75,.12) 1px, transparent 1.5px); background-size: 18px 18px; }
.nk-corp-copy .nk-orn { justify-content: flex-start; } .nk-corp-copy .nk-orn::after { display: none; }
.nk-corp-copy h2 { font: 700 clamp(32px, 4vw, 52px)/1.3 var(--display); color: var(--gold2); margin-bottom: 12px; }
.nk-corp-copy p:not(.nk-orn) { color: rgba(246,240,226,.82); font-size: 17px; }
.nk-corp-form .inline-form { max-width: none; border: 0; border-radius: 3px; background: var(--card); color: var(--ink); }
body[data-demo=sadates] .inline-form > h3 { font: 700 26px var(--display); color: var(--green); }
body[data-demo=sadates] input, body[data-demo=sadates] select, body[data-demo=sadates] textarea { border-radius: 3px; }
body[data-demo=sadates] .btn { border-radius: 3px; background: var(--green); color: var(--gold2); }
body[data-demo=sadates] .chips button.on { background: var(--green); color: var(--gold2); }

/* faq */
.nk-faq { max-width: 900px; text-align: center; }
.nk-faq > div { margin-top: 26px; text-align: start; border-top: 1px solid var(--gold); }
.nk-faq details { border-bottom: 1px solid var(--line); padding: 16px 4px; }
.nk-faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 18px; color: var(--green); display: flex; gap: 12px; align-items: center; }
.nk-faq summary::-webkit-details-marker { display: none; }
.nk-faq summary::before { content: "✦"; color: var(--gold); font-size: 13px; transition: transform .3s; }
.nk-faq details[open] summary::before { transform: rotate(45deg); }
.nk-faq p { margin: 8px 0 0; padding-inline-start: 26px; color: var(--muted); }

/* footer */
body[data-demo=sadates] #foot { background: var(--green); color: var(--bg); border: 0; padding: 50px 16px 90px; }
.nk-foot { display: grid; justify-items: center; gap: 4px; }
.nk-foot img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px var(--green), 0 0 0 4px var(--gold); }
.nk-foot b { font: 700 32px/1.3 var(--display); color: var(--gold2); }
.nk-foot p { margin: 0; color: rgba(246,240,226,.75); }
.nk-rule { width: 160px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 12px 0; }
body[data-demo=sadates] #foot .photo-note { color: rgba(246,240,226,.6); }
body[data-demo=sadates] .cart-fab { background: var(--green); color: var(--gold2); border-radius: 4px; box-shadow: 0 0 0 1px var(--gold), 0 14px 34px -10px rgba(0,0,0,.45); }

@media (max-width: 900px) {
  .nk-bar { grid-template-columns: 1fr auto 1fr; padding: 8px 14px; }
  body[data-demo=sadates] #top .nk-nav { display: none; }
  .nk-mark { grid-column: 2; } .nk-mark img { width: 40px; height: 40px; } .nk-mark b { font-size: 20px; }
  .nk-end { grid-column: 3; gap: 10px; }
  .nk-bar { position: relative; }
  .nk-end .nk-tx[lang] { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); }
  .nk-end { flex-direction: column; align-items: flex-end; gap: 3px; }
  .nk-end .nk-tx:not([lang]) { font-size: 12px; order: 2; text-decoration: underline; text-underline-offset: 3px; }
  .nk-ann { font-size: 12px; gap: 6px 14px; }
  .nk-ann span + span::before { margin-inline-end: 14px; }
  .nk-sub { font-size: 16px; }
  .nk-arch.mid { width: 54%; } .nk-arch.side { width: 23%; padding: 5px 5px 0; }
  .nk-arch figcaption { display: none; }
  body[data-demo=sadates] #shop .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .nk-card { padding: 14px 10px 14px; outline-offset: -6px; }
  .nk-card h3 { font-size: 21px; }
  .nk-weights span { min-width: 0; padding: 3px 8px; }
  .nk-weights b { font-size: 14px; }
  .nk-farm, .nk-corp-in { grid-template-columns: 1fr; }
  .nk-farm figure { max-width: 360px; margin: 0 auto; width: 100%; }
}