/*
  مكتبة الثعلب الأحمر — واجهة المتجر
  الاتجاه: متجر كتب أطفال عُماني يقرؤه الأهل والمعلمون، والطفل يختار بالغلاف.
  الشخصية: دافئ كالحكاية، منظّم كالكتالوج. المرجع: كتالوج المكتبة المطبوع (ورق كريمي، ثعلب برتقالي، أغلفة تحمل الصفحة).
  الرموز من نظام تصميم المكتبة: لون أساسي واحد، زاويتان 4 و8، بلا ظلال ولا تدرجات، حركة 160ms عند الفعل فقط.
*/
@font-face{font-family:"Tabshoor";src:url("../fonts/tabshoor.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
:root{
  --fox-orange:#E9552E; --fox-ember:#B83E1E; --fox-tail:#EF7855; --fox-blush:#F8C3B1; --fox-plum:#49263E;
  --library-grey:#808284; --ink:#1D1D1B; --ink-muted:#5B5C5E; --on-brand:#FFFAF6;
  --surface:#FFFCFA; --surface-paper:#F0F0D8; --surface-mist:#EDEDED; --line:#DAD7CC;
  --story-sky:#80A8C0; --story-honey:#E8B450; --story-blush:#F4D4D4;
  --ok:#2E6B3F; --ok-soft:#DCEBDD; --error:#A3261B; --error-soft:#F8DCD6;
  --font-display:"Tabshoor","Readex Pro",system-ui,sans-serif;
  --font-body:"Readex Pro",Tahoma,system-ui,sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --radius-sm:4px; --radius-md:8px;
  --page:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fox-ember:#FF8A66; --fox-tail:#F08A6A; --fox-blush:#5A3430; --fox-plum:#F8C3B1; --library-grey:#A3A4A6;
    --ink:#F5F1E8; --ink-muted:#BDB6B0; --on-brand:#1D1D1B;
    --surface:#1E1A1D; --surface-paper:#2A2427; --surface-mist:#332C30; --line:#4A4246;
    --story-sky:#3F6378; --story-honey:#8A6420; --story-blush:#4A3133;
    --ok:#8FD19E; --ok-soft:#1F3324; --error:#FF9C8F; --error-soft:#40201C;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:400 17px/1.8 var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;display:block}
a{color:var(--fox-ember);text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fox-plum);outline-offset:3px}
bdi,.ltr{unicode-bidi:isolate}
h1,h2,h3{margin:0;line-height:1.4}
p{margin:0}
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--space-6)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:var(--space-4);top:-60px;background:var(--fox-plum);color:var(--surface);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:10}
.skip:focus{top:var(--space-2)}
.icon{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.2em}
[dir="rtl"] .icon.flip{transform:scaleX(-1)}
.muted{color:var(--ink-muted)}
.nowrap{white-space:nowrap}

/* header */
.site-head{border-block-end:1px solid var(--line);background:var(--surface)}
.site-head .wrap{display:flex;align-items:center;gap:var(--space-8);padding-block:var(--space-3)}
.brand{display:block;flex:none}
.brand img{height:68px;width:auto}
.only-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .only-dark{display:block} :root:not([data-theme="light"]) .only-light{display:none}}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-6)}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:500;padding-block:var(--space-2);border-block-end:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-block-end-color:var(--fox-orange)}
.cart-link{margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--space-2);color:var(--ink);text-decoration:none;font-weight:600;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm)}
.cart-link:hover{background:var(--surface-paper)}
.cart-count{min-width:1.6em;padding:0 var(--space-1);border-radius:var(--radius-sm);background:var(--fox-ember);color:var(--on-brand);font-size:14px;line-height:1.6;text-align:center}
.cart-count[data-empty="true"]{background:var(--surface-mist);color:var(--ink-muted)}

/* flash */
.flash{margin-block-start:var(--space-6);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-weight:500}
.flash-ok{background:var(--ok-soft);color:var(--ok)}
.flash-error{background:var(--error-soft);color:var(--error)}
.toast{position:fixed;inset-block-end:var(--space-6);inset-inline-start:50%;transform:translateX(50%);z-index:20;max-width:min(92vw,520px);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);background:var(--fox-plum);color:var(--surface);font-weight:500;opacity:0;pointer-events:none;transition:opacity 160ms ease-out}
[dir="ltr"] .toast{transform:translateX(-50%)}
.toast.is-on{opacity:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:600 16px/1.4 var(--font-body);padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background-color 160ms ease-out,transform 160ms ease-out}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--fox-ember);color:var(--on-brand)}
.btn-primary:hover{background:var(--fox-plum)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--surface-paper)}
.btn-quiet{background:transparent;color:var(--fox-ember);padding-inline:var(--space-2)}
.btn-quiet:hover{text-decoration:underline;text-underline-offset:4px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* age badge + meta */
.age{display:inline-flex;align-items:center;font:600 14px/1 var(--font-body);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--surface-paper);color:var(--fox-ember);font-variant-numeric:tabular-nums;white-space:nowrap}
.meta{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);margin:0}
.meta dt{font-weight:600;color:var(--fox-ember);font-size:15px}
.meta dd{margin:0}

/* note box (awards) */
.note{display:grid;gap:2px;padding:var(--space-3) var(--space-4);border:2px solid var(--story-sky);border-radius:var(--radius-md)}
.note b{font-weight:600}
.note span{color:var(--fox-ember);font-weight:600;font-size:15px}

/* intro (home) */
.intro{--hero-bg:#1E4436;--hero-ink:#FFFAF6;position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink)}
.intro .wrap{position:relative;padding-block:var(--space-12) var(--space-16)}
.intro-text{max-width:600px;position:relative;z-index:1}
.intro h1{font:700 clamp(34px,5vw,56px)/1.3 var(--font-display);color:var(--hero-ink)}
.intro p{margin-block-start:var(--space-4);font-size:19px;max-width:34em;color:rgb(255 250 246 / .9)}
.intro .actions{margin-block-start:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.intro .btn-primary{background:#E9552E;color:#FFFAF6}
.intro .btn-primary:hover{background:#B83E1E}
.intro .btn-secondary{border-color:var(--hero-ink);color:var(--hero-ink)}
.intro .btn-secondary:hover{background:rgb(255 250 246 / .12)}
.intro a:focus-visible{outline:2px solid var(--hero-ink);outline-offset:3px}
.intro-cast{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.intro-cast img{position:absolute;height:auto;transform:translateX(0) rotate(var(--tilt));animation:sway ease-in-out infinite alternate;will-change:transform}
@keyframes sway{from{transform:translateX(calc(var(--sway) * -1)) rotate(var(--tilt))}to{transform:translateX(var(--sway)) rotate(calc(var(--tilt) * -1))}}
@media (prefers-reduced-motion:reduce){.intro-cast img{animation:none}}
@media (max-width:720px){.intro-cast .desktop-only{display:none}.intro-cast img{max-width:84px}}
.intro-fox{position:absolute;inset-inline-end:6%;bottom:-2px;width:min(30%,380px);height:auto;pointer-events:none}


/* sections */
.section{padding-block:var(--space-12)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-block-end:var(--space-6)}
.section-head h2{font:700 32px/1.35 var(--font-display)}
.section-head a{font-weight:600}
.page-title{font:700 clamp(30px,4vw,44px)/1.3 var(--font-display)}

/* age picker */
.ages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.ages li + li{border-inline-start:1px solid var(--line)}
.ages a{display:block;padding:var(--space-6) var(--space-6);text-decoration:none;color:var(--ink);transition:background-color 160ms ease-out}
.ages a:hover{background:var(--surface-paper)}
.ages b{display:block;font:700 36px/1.2 var(--font-display);color:var(--fox-orange);font-variant-numeric:tabular-nums}
.ages span{display:block;font-weight:500}
.ages small{color:var(--ink-muted);font-size:15px}

/* book grid */
.books{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-8) var(--space-6)}
.book{display:flex;flex-direction:column;gap:var(--space-2);height:100%}
/* كل الأغلفة في القوائم بإطار واحد 4:5 (نسبة أغلب أغلفة الكتالوج)، يملؤه الغلاف كاملًا */
.book-cover{position:relative;display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;background:var(--surface-paper);border-radius:var(--radius-md);border:1px solid var(--line)}
.book-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.book-cover .placeholder{color:var(--ink-muted);font-size:15px;text-align:center}
.book h3{font:600 19px/1.5 var(--font-body);margin-block-start:var(--space-2)}
.book h3 a{color:var(--ink);text-decoration:none}
.book h3 a::after{content:"";position:absolute;inset:0}
.book{position:relative}
.book h3 a:hover{color:var(--fox-ember)}
.book .by{font-size:15px;color:var(--ink-muted)}
.book-foot{margin-block-start:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block-start:var(--space-2)}
.price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.book form{position:relative;z-index:1}
.book .add{padding:var(--space-2) var(--space-3);font-size:15px}
.unavailable{font-size:14px;color:var(--ink-muted)}

/* awards strip on home */
.awards{background:var(--story-blush)}
.awards-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4)}
.awards-list li{display:flex;gap:var(--space-4);align-items:flex-start}
.awards-list img{width:72px;aspect-ratio:4/5;object-fit:cover;object-position:center top;flex:none;border-radius:var(--radius-sm)}
.awards-list a{color:var(--ink);font-weight:600;text-decoration:none}
.awards-list a:hover{text-decoration:underline}
.awards-list p{font-size:15px;color:var(--fox-ember);font-weight:500}

/* catalogue filters */
.filters{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-4) var(--space-6);padding-block:var(--space-6);border-block-end:1px solid var(--line);margin-block-end:var(--space-8)}
.field{display:grid;gap:var(--space-1)}
.field label,.field legend{font-weight:600;font-size:15px}
.input,select.input,textarea.input{font:400 16px/1.6 var(--font-body);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);min-height:44px;width:100%}
.input:focus{border-color:var(--fox-plum);outline:none;box-shadow:0 0 0 2px var(--fox-plum)}
.input[aria-invalid="true"]{border-color:var(--error)}
.search{flex:1 1 260px}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:var(--space-2) var(--space-4);border:1.5px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;font-weight:500}
.chips a:hover{border-color:var(--ink)}
.chips a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.result-line{margin-block-end:var(--space-6);color:var(--ink-muted)}
.empty{padding-block:var(--space-12);max-width:36em}
.empty h2{font:600 24px/1.5 var(--font-body);margin-block-end:var(--space-2)}
.empty p + p{margin-block-start:var(--space-3)}

/* pagination */
.pager{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-block-start:var(--space-12)}
.pager a,.pager span{min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding-inline:var(--space-3);border:1.5px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink)}
.pager [aria-current="page"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pager .gap{border:0}

/* book page */
.crumbs{padding-block-start:var(--space-6);font-size:15px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.crumbs li + li::before{content:"‹";color:var(--ink-muted);margin-inline-end:var(--space-2)}
[dir="ltr"] .crumbs li + li::before{content:"›"}
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-12);padding-block:var(--space-8) var(--space-12);align-items:start}
.product-cover{position:relative;background:var(--surface-paper);border-radius:var(--radius-md);display:grid;place-items:center;aspect-ratio:1}
.product-cover img{position:absolute;inset:var(--space-8);width:calc(100% - 2 * var(--space-8));height:calc(100% - 2 * var(--space-8));object-fit:contain}
.product h1{font:700 clamp(30px,4vw,44px)/1.3 var(--font-display)}
.product .by{margin-block-start:var(--space-2);font-size:18px;color:var(--ink-muted)}
.buy{margin-block:var(--space-6);padding-block:var(--space-6);border-block:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.buy .price{font-size:28px}
.buy .price small{display:block;font-size:14px;font-weight:400;color:var(--ink-muted)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--radius-sm)}
.qty button{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:600 20px/1 var(--font-body);cursor:pointer}
.qty button:hover{background:var(--surface-paper)}
.qty input{width:52px;height:44px;border:0;border-inline:1.5px solid var(--line);background:transparent;color:var(--ink);text-align:center;font:600 17px var(--font-body);-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.description{margin-block-start:var(--space-6);font-size:18px;max-width:38em}
.notes{display:grid;gap:var(--space-3);margin-block-start:var(--space-6)}

/* cart */
.cart{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-12);align-items:start;padding-block:var(--space-8) var(--space-12)}
.lines{list-style:none;margin:0;padding:0}
.line{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:var(--space-4);padding-block:var(--space-6);border-block-end:1px solid var(--line);align-items:center}
.line:first-child{border-block-start:1px solid var(--line)}
.line-cover{position:relative;width:88px;aspect-ratio:4/5;overflow:hidden;background:var(--surface-paper);border-radius:var(--radius-sm);border:1px solid var(--line)}
.line-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.line h2{font:600 18px/1.5 var(--font-body)}
.line h2 a{color:var(--ink);text-decoration:none}
.line h2 a:hover{color:var(--fox-ember)}
.line-controls{display:flex;align-items:center;gap:var(--space-3);margin-block-start:var(--space-2);flex-wrap:wrap}
.line-total{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.summary{background:var(--surface-paper);border-radius:var(--radius-md);padding:var(--space-6);display:grid;gap:var(--space-3);position:sticky;top:var(--space-6)}
.summary h2{font:600 20px/1.5 var(--font-body)}
.summary dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-4)}
.summary dd{margin:0;font-variant-numeric:tabular-nums;text-align:end}
.summary .total{font-weight:700;font-size:19px;padding-block-start:var(--space-3);border-block-start:1px solid var(--line)}
.summary .hint{font-size:14px;color:var(--ink-muted)}
.summary-items{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font-size:15px}
.summary-items li{display:flex;justify-content:space-between;gap:var(--space-3)}

/* checkout */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-12);align-items:start;padding-block:var(--space-8) var(--space-12)}
.checkout fieldset{border:0;margin:0;padding:0 0 var(--space-8);display:grid;gap:var(--space-4)}
.checkout fieldset + fieldset{padding-block-start:var(--space-8);border-block-start:1px solid var(--line)}
.checkout legend{font:600 22px/1.5 var(--font-body);margin-block-end:var(--space-4);padding:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.help{font-size:14px;color:var(--ink-muted)}
.error-text{font-size:14px;color:var(--error);font-weight:500}
.req{color:var(--fox-ember)}
.pay-options{display:grid;gap:var(--space-3)}
.pay-option{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);padding:var(--space-4);border:1.5px solid var(--line);border-radius:var(--radius-md);cursor:pointer}
.pay-option:has(input:checked){border-color:var(--fox-ember);background:var(--surface-paper)}
.pay-option:has(input:disabled){opacity:.6;cursor:not-allowed}
.pay-option input{margin:5px 0 0;width:18px;height:18px;accent-color:var(--fox-ember)}
.pay-option b{font-weight:600}
.pay-option p{grid-column:2;font-size:15px;color:var(--ink-muted)}
.errors-summary{padding:var(--space-4);border-radius:var(--radius-md);background:var(--error-soft);color:var(--error);margin-block-end:var(--space-6)}
.errors-summary ul{margin:var(--space-2) 0 0;padding-inline-start:1.2em}

/* order page */
.order-head{padding-block:var(--space-8) var(--space-6);display:grid;gap:var(--space-2)}
.status-tag{display:inline-block;justify-self:start;font-weight:600;font-size:15px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);background:var(--surface-paper);color:var(--fox-ember)}
.steps{list-style:none;margin:0 0 var(--space-8);padding:0;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s}
.steps li{counter-increment:s;padding-block-start:var(--space-3);border-block-start:4px solid var(--line);font-weight:500;color:var(--ink-muted)}
.steps li::before{content:counter(s) ". ";}
.steps li.done{border-block-start-color:var(--fox-orange);color:var(--ink)}
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-12);align-items:start;padding-block-end:var(--space-12)}
.panel{padding-block:var(--space-6);border-block-start:1px solid var(--line)}
.panel h2{font:600 21px/1.5 var(--font-body);margin-block-end:var(--space-3)}
.bank{background:var(--story-blush);border-radius:var(--radius-md);padding:var(--space-6);display:grid;gap:var(--space-4)}
.bank .meta dd{font-weight:600}
.copy{font:500 14px var(--font-body);color:var(--fox-ember);background:none;border:0;cursor:pointer;padding:0 var(--space-2);text-decoration:underline;text-underline-offset:3px}
.upload{display:grid;gap:var(--space-3);margin-block-start:var(--space-4)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:start;padding:var(--space-3) var(--space-2);border-block-end:1px solid var(--line);vertical-align:top}
.table th{font-weight:600;font-size:15px;color:var(--ink-muted)}
.table td.num,.table th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}

/* about */
.prose{max-width:44em;display:grid;gap:var(--space-4);padding-block:var(--space-8) var(--space-12);font-size:18px}
.prose h2{font:600 24px/1.5 var(--font-body);margin-block-start:var(--space-6)}
.prose ul{margin:0;padding-inline-start:1.2em;display:grid;gap:var(--space-1)}
.prose li::marker{color:var(--fox-orange)}
.chin-head{position:relative;background:var(--fox-orange);color:#FFFAF6}
.chin-head .wrap{padding-block:var(--space-8) var(--space-8)}
.chin-head h1{font:700 clamp(32px,4vw,48px)/1.3 var(--font-display)}
.chin-head img{position:absolute;top:calc(100% - 1px);inset-inline-end:12%;width:clamp(110px,16%,170px)}
.after-chin{padding-block-start:var(--space-16)}
.chin-brand{display:flex;align-items:center;gap:var(--space-8)}
.chin-head .chin-brand img{position:static;width:120px;height:auto;flex:none}
@media (max-width:640px){.chin-brand{gap:var(--space-4)}.chin-head .chin-brand img{width:84px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:var(--space-16);padding-block-end:var(--space-12);align-items:start}
.contact-h{font:600 24px/1.5 var(--font-body);margin-block-end:var(--space-2)}
.contact-list{margin:var(--space-6) 0 0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-4) var(--space-6);font-size:19px}
.contact-list dt{font-weight:600;color:var(--fox-ember);font-size:16px;padding-block-start:3px}
.contact-list dd{margin:0}
.contact-list a{color:var(--ink)}
.contact-form{display:grid;gap:var(--space-4);margin-block-start:var(--space-6)}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr;gap:var(--space-12)}}

/* team (about page) */
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-6)}
.team a{display:grid;justify-items:center;gap:var(--space-1);text-align:center;color:var(--ink);text-decoration:none}
.team img{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--surface-paper);margin-block-end:var(--space-2)}
.team b{font-weight:600;font-size:17px}
.team span{color:var(--fox-ember);font-size:15px;font-weight:500}
.team a:hover b{text-decoration:underline;text-underline-offset:4px}

/* footer */
.site-foot{margin-block-start:var(--space-12)}
/* حين تنتهي الصفحة بقسم ملوّن (كالجوائز في الرئيسية) يلتصق به الفوتر دون فراغ أبيض */
main:has(> .awards:last-child) + .site-foot{margin-block-start:0}
.foot-body{background:var(--surface-mist);border-block-start:4px solid var(--fox-orange)}
.foot-body .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-8);align-items:center;padding-block:var(--space-8)}
.foot-body .brand img{height:96px}
.foot-body dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-4);font-size:16px}
.foot-body dt{font-weight:600;color:var(--fox-ember)}
.foot-body dd{margin:0}
.foot-body dd a{color:var(--ink)}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.foot-links a{color:var(--ink)}
.foot-legal{font-size:14px;color:var(--ink-muted);padding-block:var(--space-4);border-block-start:1px solid var(--line)}

@media (max-width:960px){
  .product,.cart,.checkout,.order-grid{grid-template-columns:1fr}
  .summary{position:static}
  .ages{grid-template-columns:repeat(2,1fr)}
  .ages li:nth-child(3){border-inline-start:0}
  .ages li:nth-child(n+3){border-block-start:1px solid var(--line)}
  .foot-body .wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:var(--space-4)}
  .site-head .wrap{flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
  .brand img{height:54px}
  .site-nav{order:3;width:100%;overflow-x:auto}
  .site-nav ul{gap:var(--space-4)}
  .intro .wrap{padding-block:var(--space-8) 180px}
  .intro-fox{width:min(40%,180px);inset-inline-end:4%}
  .books{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-4)}
  .book h3{font-size:17px}
  .book-foot{flex-wrap:wrap}
  .grid-2{grid-template-columns:1fr}
  .line{grid-template-columns:64px minmax(0,1fr)}
  .line-cover{width:64px}
  .line-total{grid-column:2}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:var(--space-3)}
  .section-head h2{font-size:26px}
  .ages a{padding:var(--space-4)}
  .ages b{font-size:28px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
@media print{.site-head,.site-foot,.btn,.toast{display:none!important}}

/* حفظ الطلب: الإيصال والبريد */
.keep-order{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:end;padding:var(--space-4) var(--space-6);margin-block:var(--space-6);background:var(--surface-paper);border-radius:var(--radius-md)}
.keep-email{display:grid;gap:var(--space-1);flex:1;min-width:min(100%,320px);margin:0}
.keep-email label{font-weight:500;font-size:15px}
.keep-email div{display:flex;gap:var(--space-2)}
.keep-email .input{flex:1}

/* العروض والخصومات */
.book-cover{position:relative}
.sale-badge{position:absolute;inset-block-start:var(--space-2);inset-inline-start:var(--space-2);z-index:1;padding:2px var(--space-2);border-radius:var(--radius-sm);background:var(--fox-ember);color:var(--on-brand);font-weight:700;font-size:13px}
.sale-badge.static{position:static;display:inline-block}
.price s,.muted s{color:var(--ink-muted);font-weight:400;font-size:.85em;margin-inline-end:4px}
.sale-note{margin:0 0 var(--space-2);font-weight:500}
.coupon-box{padding-block:var(--space-3);border-block:1px solid var(--line)}
.coupon-box form{display:grid;gap:var(--space-1);margin:0}
.coupon-box label{font-weight:500;font-size:15px}
.coupon-box form > div{display:flex;gap:var(--space-2)}
.coupon-box .input{flex:1;text-transform:uppercase}
.coupon-box span{font-size:15px}

/* الكتّاب والرسامون */
.lead-text{font-size:18px;max-width:42em;color:var(--ink-muted)}
.people{list-style:none;margin:0 0 var(--space-12);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4)}
.person{display:grid;justify-items:center;gap:var(--space-1);padding:var(--space-6) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);text-decoration:none;text-align:center;transition:border-color 160ms ease-out}
.person:hover,.person:focus-visible{border-color:var(--fox-ember)}
.person b{font-size:17px;margin-block-start:var(--space-2)}
.person .muted{font-size:14px}
.avatar{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--fox-blush);color:var(--fox-plum);font:700 30px/1 var(--font-display);flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lg{width:180px;height:180px;font-size:48px}
.profile{display:flex;gap:var(--space-8);align-items:center;padding-block:var(--space-6) var(--space-8);border-block-end:1px solid var(--line)}
.profile-roles{margin:var(--space-1) 0 0;font-weight:600;color:var(--fox-ember);font-size:18px}
.profile-bio{margin-block-start:var(--space-4);max-width:44em;font-size:17px;line-height:1.9}
@media (max-width:640px){.profile{flex-direction:column;text-align:center}.avatar-lg{width:140px;height:140px}.people{grid-template-columns:repeat(2,minmax(0,1fr))}}