*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f5ef;color:#262820;font:16px/1.8 Tahoma,Arial,sans-serif}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}header{background:#171b18;color:#f5edda;padding:16px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px}nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}nav form{margin:0}.brand{display:flex;align-items:center;gap:14px;font-size:27px;color:#d8b66c}.brand img{width:68px;height:68px;object-fit:cover;border-radius:50%}small{display:block;font-size:12px;letter-spacing:1px}main{max-width:1220px;margin:auto;padding:30px 24px 80px;min-height:75vh}.hero{display:flex;align-items:center;justify-content:space-between;background:#202b25;color:#faf6e8;border-radius:22px;padding:55px 6%;gap:30px;margin-bottom:50px}.hero h1{font-size:clamp(32px,4.4vw,58px);line-height:1.5;margin:16px 0}.hero img{width:35%;max-width:330px;border-radius:12px}.hero p{color:#d4d6cc}.eyebrow{color:#d8b66c}.button,button{display:inline-block;border:0;border-radius:7px;background:#bc944c;color:#171b18;font:700 15px Tahoma,Arial,sans-serif;padding:13px 21px;cursor:pointer;text-align:center}.button:hover,button:hover{background:#d6b269;text-decoration:none}button:disabled{background:#ddd;cursor:not-allowed;color:#777}h1,h2,h3{line-height:1.6}h2{font-size:26px}.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto auto;align-items:end;gap:12px;background:white;padding:22px;border:1px solid #e5e0d4;border-radius:12px}label{display:block;font-size:14px;color:#464c40}input,select,textarea{font:inherit;width:100%;padding:11px;border:1px solid #d5d5cb;border-radius:6px;background:white;color:#222;margin-top:5px}input:focus,select:focus,textarea:focus{outline:2px solid #bc944c;outline-offset:2px}textarea{min-height:110px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.card{background:white;border:1px solid #e6e0d5;border-radius:12px;overflow:hidden}.cover{display:flex;align-items:center;justify-content:center;height:265px;background:#e8e5da;padding:22px}.cover img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(5px 7px 5px #0002)}.book-art{display:flex;flex-direction:column;justify-content:center;text-align:center;height:220px;width:158px;padding:18px;background:#24473e;border-right:7px solid #17382f;color:#e6ce90;font-size:22px;box-shadow:6px 8px 12px #0002}.card:nth-child(3n+2) .book-art{background:#663d36;border-color:#4a2822}.card:nth-child(3n) .book-art{background:#394755;border-color:#263241}.book-art small{margin-top:22px}.card-body{padding:20px}.card h3{margin:8px 0;font-size:19px}.card p{margin:4px 0 14px}.card button{width:100%;margin-top:18px}.tag{background:#f1ecdf;color:#716037;font-size:12px;padding:5px 10px;border-radius:4px}.muted{color:#717568}.panel{background:white;border:1px solid #e3dfd4;padding:28px;border-radius:12px;margin:22px 0}.form{display:grid;gap:18px;max-width:760px}.narrow{max-width:430px;margin:40px auto}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:right;white-space:normal}th,td{padding:15px 10px;border-bottom:1px solid #e8e4da}th{color:#6b6f64}.quantity{width:80px}.inline{display:inline-block;margin:0 12px}.danger{background:#f7e4de;color:#963d28;padding:7px 14px}.alert{background:#fbe4df;border-right:4px solid #ab4930;padding:14px}.notice{background:#e1f1df;padding:14px}.empty{text-align:center;padding:60px 20px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.detail-cover{max-width:230px;max-height:340px}.description{white-space:normal}.thumb{max-width:130px}footer{padding:30px 5%;background:#171b18;color:#d8b66c;display:flex;justify-content:space-between}footer span{color:#a7afa6}summary{cursor:pointer}@media(max-width:950px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{grid-template-columns:repeat(2,1fr)}nav{gap:14px}}@media(max-width:600px){header{align-items:flex-start;flex-direction:column}main{padding:20px 14px 50px}.hero{padding:30px 24px;flex-direction:column-reverse}.hero img{width:140px}.hero h1{font-size:34px}.grid{gap:12px}.card-body{padding:13px}.cover{height:215px;padding:15px}.book-art{height:185px;font-size:18px;width:130px}.panel{padding:18px}.section-heading{align-items:flex-start;flex-wrap:wrap}footer{flex-direction:column}.filters{padding:16px}th,td{min-width:90px}}

body{font-family:Tahoma,Arial,sans-serif}nav a,.brand{color:inherit}button,input,select,textarea{font-family:inherit}a.button{color:#171b18}h1,h2,h3{font-weight:700}nav form{display:inline-block}.hero .eyebrow{color:#d8b66c}
/* Version 2: IQD storefront */
.book-card{position:relative;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.book-card:focus-within{box-shadow:0 16px 34px #172b2020;border-color:#bc944c}.book-card .cover{overflow:hidden}.book-card .cover img,.book-card .book-art{transition:transform .5s cubic-bezier(.2,.7,.3,1)}.badge-line{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}.book-badge{font-size:11px;background:#253e32;color:#f4dfaa;padding:4px 8px;border-radius:20px}.availability{font-size:13px}.available{color:#326d45}.soldout{color:#a24938}.card-actions{display:grid;gap:8px;margin-top:15px;transition:transform .3s ease}.card-actions form{margin:0}.card-actions button{margin-top:0}.secondary{background:#f0ecdf;color:#304334;border:1px solid #d9d1bd}.secondary:hover{background:#e1dbc8}.shelf{margin:48px 0}.shelf h2{margin:5px 0 20px}.shelf .eyebrow{font-size:13px;color:#88703e}.shelf-arrows{display:flex;gap:8px}.shelf-arrows button{font-size:22px;padding:4px 15px;border-radius:50%}.shelf-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:8px 0 20px;overscroll-behavior-x:contain}.shelf-track .card{flex:0 0 calc((100% - 66px)/4);scroll-snap-align:start}.shelf-dots{display:flex;justify-content:center;gap:7px;margin-top:12px;flex-wrap:wrap}.shelf-dots button{padding:0;width:8px;height:8px;border-radius:20px;background:#d5d2c8;transition:width .2s,background .2s}.shelf-dots button.active{width:25px;background:#a7823e}.book-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:50px;padding:40px}.detail-main{min-height:400px;display:flex;align-items:center;justify-content:center;background:#ede9dd;border-radius:12px;padding:30px}.detail-main img{width:100%;height:390px;object-fit:contain}.detail-main .book-art{width:230px;height:330px;font-size:29px}.thumbnails{display:flex;gap:10px;overflow-x:auto;margin-top:15px}.gallery-pick{padding:5px;background:white;border:1px solid #ded7c7;flex-shrink:0}.gallery-pick img{width:60px;height:75px;object-fit:contain}.gallery-pick.selected{border:2px solid #aa8134}.share-book{margin-top:15px}.description{line-height:2;overflow-wrap:anywhere}.back-link{display:inline-block;margin:16px 0;color:#756035}.contact-intro{text-align:center;margin:30px 0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.contact-grid .panel{margin:0}.gallery-remove{display:flex;align-items:center;gap:15px}.gallery-remove input{width:auto}.floating-whatsapp{position:fixed;bottom:25px;left:25px;background:#168b4d;color:white!important;border:3px solid #fff;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;z-index:30;box-shadow:0 5px 20px #0003;animation:waPulse 3s infinite}.floating-whatsapp svg{width:37px;height:37px}.wa-tooltip{position:absolute;left:74px;background:#193d29;color:white;font-size:13px;padding:8px 14px;white-space:nowrap;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s}.floating-whatsapp:hover .wa-tooltip,.floating-whatsapp:focus .wa-tooltip{opacity:1}.whatsapp-link{background:#168b4d;color:white!important}footer a{color:#dfc387}dialog{border:1px solid #d8cfbb;border-radius:18px;padding:35px;width:min(620px,94vw);max-height:90vh;color:#262820;background:#faf8f1;box-shadow:0 25px 100px #0005;animation:appear .25s ease}dialog::backdrop{background:#112219aa;backdrop-filter:blur(3px)}.dialog-close{position:sticky;top:0;float:left;padding:3px 13px;font-size:23px}.quick-cover{width:160px;height:210px;object-fit:contain;float:left;margin:15px}#quick-content{overflow-wrap:anywhere}#quick-content p{white-space:pre-wrap}.invoice{max-width:900px;margin:25px auto}@keyframes waPulse{0%,100%{box-shadow:0 0 0 0 #168b4d44}50%{box-shadow:0 0 0 12px #168b4d00}}@keyframes appear{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@media(hover:hover){.book-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px #172b2020;border-color:#c5ab70}.book-card:hover .cover img,.book-card:hover .book-art{transform:scale(1.06)}.book-card:hover .card-actions{transform:translateY(-3px)}}@media(max-width:950px){.shelf-track .card{flex-basis:calc((100% - 22px)/2)}.book-detail{gap:25px;padding:25px}.detail-main{min-height:300px}.detail-main img{height:300px}}@media(max-width:600px){.shelf-track{gap:14px}.shelf-track .card{flex-basis:79%}.shelf h2{font-size:23px}.book-detail,.contact-grid{grid-template-columns:1fr}.book-detail{gap:20px;padding:20px}.detail-main img{height:320px}.floating-whatsapp{width:55px;height:55px;left:16px;bottom:16px}.wa-tooltip{display:none}.quick-cover{float:none;display:block;margin:15px auto}dialog{padding:22px}footer{padding-bottom:85px}.card-actions{transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}@media print{header,footer,.floating-whatsapp,dialog,.print-invoice{display:none!important}body{background:white}main{padding:0}.invoice{border:0;margin:0;max-width:100%;padding:10px}.invoice table{font-size:12px}}

.book-card h3,.book-card .muted{overflow-wrap:anywhere}.book-card{cursor:pointer}.card-actions{cursor:default}.shelf-track:focus-visible{outline:2px solid #bc944c}


/* ================================================================
   MAGHALATA / HERITAGE EDITION — visual layer only.
   Edit these tokens to recolor the entire theme.
   Local fonts are optional; the fallback works without internet.
   ================================================================ */
:root {
  --primary: #5C3A21;
  --primary-hover: #704B2D;
  --secondary: #C9A227;
  --background: #FAF6EF;
  --surface: #FFFCF6;
  --surface-muted: #F1E7D8;
  --text: #2E1F14;
  --muted: #715E4D;
  --accent: #4A5D3A;
  --brick: #8B3A2E;
  --border: #DFCFB8;
  --on-dark: #FFF5DF;
  --gold-light: #E9CE83;
  --focus: #885A1F;
  --shadow: 0 12px 34px rgba(68, 39, 18, .07);
  --font-body: 'Cairo', 'Tajawal', Tahoma, Arial, sans-serif;
  --font-heading: 'Amiri', 'Traditional Arabic', Georgia, serif;
  --heritage-pattern: url('heritage-pattern.svg');
  --heritage-divider: url('heritage-divider.svg');
}
body {
  background-color: var(--background);
  background-image: var(--heritage-pattern);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.9;
}
h1, h2, h3 { font-family: var(--font-heading); color: var(--primary); }
h1 { letter-spacing: 0; }
h2 { font-size: 30px; }
header {
  position: relative;
  background: linear-gradient(110deg, #382315, var(--primary));
  color: var(--on-dark);
  border-top: 4px solid var(--secondary);
  border-bottom: 1px solid #B68D47;
  box-shadow: 0 4px 22px #3D25151A;
}
header::after, footer::before {
  content: ''; position: absolute; inset-inline: 0; height: 7px;
  background: repeating-linear-gradient(45deg, transparent 0 5px, #E9CE8330 5px 6px, transparent 6px 11px);
  pointer-events: none;
}
header::after { bottom: 0; }
nav { gap: 22px; }
nav a { padding-block: 8px; text-underline-offset: 6px; }
nav a:hover { color: var(--gold-light); }
.brand { color: var(--gold-light); }
.brand img { outline: 1px solid #D0AC62; outline-offset: 4px; }
.brand small { color: var(--on-dark); letter-spacing: 0; }
main { max-width: 1280px; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--primary);
  background-image: radial-gradient(ellipse at 10% 20%, #C9A22728, transparent 65%), linear-gradient(120deg, #382315, #654126);
  color: var(--on-dark); border: 1px solid #B58A35;
  border-radius: 8px 36px 8px 36px;
  box-shadow: 0 20px 48px #45281218;
}
.hero::before {
  content: ''; position: absolute; inset: 14px; z-index: -1;
  border: 1px solid #E9CE8338; border-radius: 4px 24px;
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--heritage-pattern);
  background-color: #FFF1CB; opacity: .07; pointer-events: none;
}
.hero h1 { color: var(--on-dark); font-size: clamp(38px, 4.6vw, 66px); line-height: 1.6; }
.hero p { color: #EFE1C8; }
.hero .eyebrow { color: var(--gold-light); }
.hero img { border: 1px solid #D3AC6066; box-shadow: 0 14px 35px #160D0840; }
.eyebrow, .shelf .eyebrow { color: var(--muted); letter-spacing: 0; }
.button, button {
  background: linear-gradient(135deg, var(--gold-light), var(--secondary));
  color: var(--text); border: 1px solid #A27B24;
  border-radius: 5px 12px 5px 12px; min-height: 44px;
  box-shadow: 0 3px 8px #7B541915;
  transition: background .2s, box-shadow .2s, transform .2s;
}
a.button { color: var(--text); }
.button:hover, button:hover {
  background: linear-gradient(135deg, #F1DA9B, #D6B23C);
  color: var(--text); box-shadow: 0 5px 14px #7B541924;
}
button:disabled { background: #E7DFD3; border-color: #D8CEBD; color: #756A5D; box-shadow: none; }
.secondary { background: var(--surface-muted); color: var(--primary); border-color: var(--border); }
.secondary:hover { background: #E8D9C3; color: var(--primary); }
.filters, .panel, .card { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.filters { border-top: 2px solid #B89049; }
label { color: var(--primary); font-weight: 600; }
input, select, textarea { background: #FFFEFB; color: var(--text); border-color: #B9A58C; border-radius: 6px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { outline-color: var(--focus); }
a:focus-visible, button:focus-visible, summary:focus-visible, .shelf-track:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 4px;
}
header a:focus-visible, .hero a:focus-visible, footer a:focus-visible { outline-color: var(--gold-light); }
.book-card { border-radius: 7px 18px 7px 18px; }
.cover, .detail-main { background: radial-gradient(ellipse at center, #FBF6ED, var(--surface-muted)); }
.cover { border-bottom: 1px solid var(--border); }
.book-art { background: var(--accent); border-color: #33432A; color: var(--on-dark); }
.card:nth-child(3n+2) .book-art { background: var(--brick); border-color: #602D23; }
.card:nth-child(3n) .book-art { background: var(--primary); border-color: #3C271A; }
.card h3 { font-size: 23px; }
.card-body strong { color: var(--primary); font-size: 19px; }
.tag { background: var(--surface-muted); color: var(--primary); border: 1px solid #DFCFB8; }
.book-badge { background: var(--accent); color: #FFF9EA; }
.muted { color: var(--muted); }
.available { color: #405631; }
.soldout { color: var(--brick); }
.book-card:focus-within { border-color: #B58A35; box-shadow: 0 12px 30px #5C3A211A; }
.shelf { position: relative; padding-top: 28px; margin-block: 40px; }
.shelf::before {
  content: ''; display: block; position: absolute; top: 0;
  inset-inline: 0; height: 24px; background-image: var(--heritage-divider);
  background-repeat: no-repeat; background-position: center; background-size: min(88%, 600px) 24px;
  opacity: .65; pointer-events: none;
}
.shelf h2 { margin-bottom: 16px; }
.shelf-arrows button { min-width: 44px; border: 1px solid #BBA078; color: var(--primary); background: var(--surface); }
.shelf-arrows button:hover { background: var(--surface-muted); }
.shelf-dots button { min-height: 24px; width: 24px; border: 0; background: transparent; box-shadow: none; position: relative; }
.shelf-dots button::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #A99270; }
.shelf-dots button.active { width: 32px; background: transparent; }
.shelf-dots button.active::after { background: var(--primary); border-radius: 8px; }
.shelf-track { scrollbar-color: #AF946C var(--surface-muted); }
.detail-main { border: 1px solid var(--border); }
.gallery-pick { background: var(--surface); border-color: var(--border); }
.gallery-pick.selected { border-color: #9C722C; }
.back-link { color: var(--primary); }
th { color: var(--primary); background: var(--surface-muted); }
th, td { border-bottom-color: var(--border); }
tbody tr:nth-child(even) { background: #F8F1E6; }
.danger { background: #F6E5DC; color: #7E3024; border-color: #DAB1A0; }
.danger:hover { background: #EDD0C2; color: #69261E; }
.alert { background: #F7E7DC; color: #702B21; border-color: var(--brick); }
.notice { background: #EAF0DE; color: #334329; border: 1px solid #BECBAA; }
summary { color: var(--primary); }
dialog { background: var(--surface); color: var(--text); border-color: #B58A35; box-shadow: 0 25px 100px #38231555; }
dialog::backdrop { background: #2E1F1480; }
.dialog-close { border-radius: 50%; min-width: 44px; }
.contact-intro h1 { font-size: clamp(36px, 5vw, 52px); }
footer { position: relative; background: linear-gradient(110deg, #382315, var(--primary)); color: var(--gold-light); border-top: 2px solid #B58A35; gap: 20px; }
footer::before { top: 5px; }
footer span { color: #E9DCC6; }
footer a { color: var(--gold-light); text-underline-offset: 5px; }
/* Keep the familiar WhatsApp green and a readable white icon. */
.floating-whatsapp, .whatsapp-link { background: #137E46; color: white !important; border-color: #FFF9EB; }
.floating-whatsapp:hover, .whatsapp-link:hover { background: #106B3C; color: white !important; }
.wa-tooltip { background: var(--primary); }
@media (hover:hover) {
  .book-card:hover { border-color: #B58A35; box-shadow: 0 16px 34px #5C3A2121; transform: translateY(-5px); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  body { background-attachment: fixed; }
}
@media (max-width: 600px) {
  header { padding: 18px 20px; gap: 18px; }
  nav { gap: 10px 18px; font-size: 14px; }
  .brand img { width: 58px; height: 58px; }
  .hero { border-radius: 8px 25px; padding: 30px 24px; }
  .hero h1 { font-size: 38px; }
  .hero img { width: 155px; }
  h2, .shelf h2 { font-size: 27px; }
  .card h3 { font-size: 21px; }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .shelf { margin-block: 30px; }
  .book-detail { min-width: 0; }
  .detail-main { padding: 16px; }
  footer { padding-top: 26px; }
  body { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: white !important; color: black; }
  .invoice { box-shadow: none; }
  .invoice h1, .invoice h2 { color: black; }
}