/* Maktoob — printed books: formats, reviews, the "make it yours" studio, bag, checkout, orders, account.
   Loaded after site.css on every page. Uses the same tokens; buttons are the existing .btn styles, untouched. */

/* ---------- light form controls (on stone and white) ---------- */
.input--light { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
.input--light::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent); }
.input--light:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.input--light:focus { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.input--light[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--red-act); }
.field__l--ink { color: var(--ink-2); }
.field__err--light { color: var(--ink); }
.field__hint--ink { color: var(--ink-2); font-size: 14px; }
.select--sm select { height: 36px; font-size: 14px; }
.select--block, .select--block select { width: 100%; }
.select--block select { height: 52px; border-radius: var(--r-md); background: var(--white); font-weight: 500; font-size: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }
.chips--radio .chip[aria-checked="true"] { background: var(--ink); color: var(--stone); box-shadow: inset 0 0 0 1.5px var(--ink); }
.chips--dark.chips--radio .chip[aria-checked="true"] { background: var(--stone); color: var(--ink); }
.hdr__bag { position: relative; }
.hdr__bag .hdr__badge { top: 1px; right: 0; }
[dir="rtl"] .hdr__bag .hdr__badge { right: auto; left: 0; }

/* ---------- stars ---------- */
.stars { position: relative; display: inline-block; width: 80px; height: 15px; vertical-align: -2px;
  background: color-mix(in srgb, var(--ink) 18%, transparent); -webkit-mask: var(--star-row) 0 0 / 16px 15px repeat-x; mask: var(--star-row) 0 0 / 16px 15px repeat-x; }
.stars__on { position: absolute; inset: 0 auto 0 0; background: var(--red-act); }
[dir="rtl"] .stars__on { inset: 0 0 0 auto; }
.stars--lg { width: 128px; height: 24px; -webkit-mask-size: 25.6px 24px; mask-size: 25.6px 24px; }
:root { --star-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'%3E%3Cpath d='M7.5 0.6l2.1 4.4 4.8.6-3.5 3.3.9 4.8-4.3-2.3-4.3 2.3.9-4.8L.6 5.6l4.8-.6z'/%3E%3C/svg%3E"); }

/* ---------- book page: formats ---------- */
.fmt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--s6); }
.fmt__o { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i n' 'i p' 'i s'; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; border-radius: var(--r-md); text-align: start;
  background: color-mix(in srgb, var(--white) 55%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); transition: box-shadow var(--t-ui), background-color var(--t-ui); }
.fmt__o:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 50%, transparent); }
.fmt__o[aria-checked="true"] { background: var(--white); box-shadow: inset 0 0 0 2.5px var(--ink), var(--e1); }
.fmt__o svg { grid-area: i; width: 26px; height: 26px; color: var(--blue); align-self: start; margin-top: 2px; }
.fmt__n { grid-area: n; font-weight: 700; font-size: 16px; }
.fmt__p { grid-area: p; font-weight: 600; font-size: 15px; }
.fmt__s { grid-area: s; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.fmt + .buy { margin-top: var(--s5); }
.pbuy { margin-top: var(--s5); }
.pbuy__what { margin-bottom: var(--s4); font-size: 15px; color: var(--ink-2); }
.pbuy__what strong { color: var(--ink); }
.pbuy__ship { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: var(--s5); padding: 14px 16px; border-radius: var(--r-md); background: color-mix(in srgb, var(--sky) 30%, transparent); }
.pbuy__ship > svg { width: 24px; height: 22px; color: var(--ink); }
.pbuy__gov { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.pbuy__when { font-weight: 600; font-size: 15px; color: var(--ink); }
.pbuy__note { margin-top: var(--s3); font-size: 14px; color: var(--ink-2); }

/* ---------- reviews ---------- */
.rv__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.rv__sum { grid-column: 1 / span 4; position: sticky; top: 104px; padding: var(--s6); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e1); }
.rv__main { grid-column: 6 / -1; }
.rv__avg { font: 700 72px/1 var(--f-ui); color: var(--ink); }
.rv__n { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.rv__dist { margin: var(--s5) 0; display: grid; gap: 8px; }
.rv__dist li { display: grid; grid-template-columns: 14px 1fr 38px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rv__track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.rv__track span { display: block; height: 100%; background: var(--ink); transform-origin: left; }
[dir="rtl"] .rv__track span { transform-origin: right; }
.rv__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--s5); }
.rv__two p { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--stone-50); font-size: 13px; color: var(--ink-2); }
.rv__two strong { font-size: 22px; color: var(--ink); }
.rv__sum .btn { width: 100%; }
.rv__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.rv__list { display: grid; }
.rv { padding: var(--s5) 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.rv--none { color: var(--ink-2); }
.rv__head { display: flex; gap: 14px; align-items: flex-start; }
.rv__who { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sky); color: var(--ink); font-weight: 700; }
.rv__id { display: grid; gap: 4px; }
.rv__ver { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; font-size: 12px; font-weight: 600; color: var(--blue); }
.rv__ver svg { width: 14px; height: 14px; }
.rv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.rv__t, .rv__spoil { margin: 12px 0 0 54px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--ink); }
[dir="rtl"] .rv__t, [dir="rtl"] .rv__spoil { margin: 12px 54px 0 0; }
.rv__spoil summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.rv__help { margin: 10px 0 0 54px; font-size: 13px; }
[dir="rtl"] .rv__help { margin: 10px 54px 0 0; }
.rv__help[aria-pressed="true"] { color: var(--blue); }
.rv__form { display: grid; gap: var(--s4); margin-top: var(--s6); padding: var(--s6); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e2); }
.rv__pick { display: flex; gap: 4px; }
.rv__pick button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: color-mix(in srgb, var(--ink) 35%, transparent); }
.rv__pick button svg { width: 30px; height: 30px; }
.rv__pick button:hover, .rv__pick button.is-on { color: var(--red-act); }
.rv__pick button.is-on svg { fill: currentColor; }
.rv__note { font-size: 13px; color: var(--ink-2); }
.rv__acts { display: flex; align-items: center; gap: var(--s4); }

/* ---------- page header shared by the shop pages ---------- */
.shop { min-height: 100svh; }
.shop__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); margin: var(--s5) 0 var(--s7, 48px); }
.shop__head .store__lede { margin-top: 10px; }
.panel { padding: var(--s6); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e1); }
.panel + .panel { margin-top: var(--s5); }
.panel__t { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s5); font: 700 20px/1.3 var(--f-ui); color: var(--ink); }
.panel__t svg { width: 24px; height: 24px; color: var(--blue); }
.sum { display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.sum div { display: flex; justify-content: space-between; gap: 12px; }
.sum dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.sum__off dd { color: var(--blue); }
.sum__total { padding-top: 14px; margin-top: 4px; box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 14%, transparent); font-size: 18px; font-weight: 700; color: var(--ink); }
.free { margin-top: var(--s4); font-size: 14px; color: var(--ink-2); }
.free__bar { height: 6px; margin-top: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.free__bar span { display: block; height: 100%; background: var(--blue); transform-origin: left; }
[dir="rtl"] .free__bar span { transform-origin: right; }
.trust { display: grid; gap: 10px; margin-top: var(--s5); font-size: 13px; color: var(--ink-2); }
.trust li { display: flex; gap: 10px; align-items: flex-start; }
.trust svg { flex: none; width: 18px; height: 18px; color: var(--blue); }

/* ---------- make it yours ---------- */
.make__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.make__stage { grid-column: 1 / span 6; position: sticky; top: 92px; height: calc(100svh - 112px); min-height: 520px; display: grid; place-items: center; border-radius: var(--r-lg);
  background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--sky) 70%, var(--stone)) 0, var(--stone-50) 60%); overflow: hidden; }
.make__panel { grid-column: 8 / -1; padding-bottom: var(--pad-y); }
.make__views { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); }
.make__views.seg { background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: none; }
.make__views.seg button { color: var(--ink); height: 34px; font-size: 13px; }
.make__views.seg button[aria-checked="true"] { background: var(--ink); color: var(--stone); }
.make__cap { position: absolute; bottom: 18px; left: 24px; right: 24px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); }
/* the 3D book */
.b3 { --w: min(300px, 62%); --d: 34px; position: relative; width: var(--w); aspect-ratio: 2 / 3; perspective: 1600px; }
.b3__in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--ry, -28deg)) rotateX(var(--rx, 6deg)); transition: transform 900ms var(--ease-out); }
.b3__f, .b3__b, .b3__s, .b3__p { position: absolute; backface-visibility: hidden; }
.b3__f { inset: 0; transform: translateZ(calc(var(--d) / 2)); border-radius: 2px 6px 6px 2px; overflow: hidden; container-type: inline-size; box-shadow: inset 4px 0 6px -3px rgb(0 0 0 / .35); }
.b3__f .cover { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.b3__b { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); border-radius: 6px 2px 2px 6px; background: var(--c2, var(--blue)); }
.b3__s { top: 0; bottom: 0; left: calc(50% - var(--d) / 2); width: var(--d); transform: rotateY(-90deg) translateZ(calc(var(--w-px, 300px) / 2)); background: var(--c1, var(--ink)); display: grid; place-items: center; overflow: hidden; }
.b3__p { top: 1.2%; bottom: 1.2%; left: calc(50% - var(--d) / 2); width: calc(var(--d) - 2px); transform: rotateY(90deg) translateZ(calc(var(--w-px, 300px) / 2 - 3px));
  background: repeating-linear-gradient(90deg, var(--pg, #F3EEDF) 0 1px, color-mix(in srgb, var(--pg, #F3EEDF) 82%, #000) 1px 2px); }
.b3__sname { writing-mode: vertical-rl; font: 700 12px/1 var(--f-ui); color: var(--co, var(--stone)); white-space: nowrap; overflow: hidden; max-height: 80%; }
.b3__shadow { position: absolute; left: 6%; right: -6%; bottom: -26px; height: 30px; border-radius: 50%; background: rgb(0 41 56 / .28); filter: blur(14px); transform: translateZ(0); }
/* binding finishes */
.b3[data-binding="paper"] { --d: 26px; }
.b3[data-binding="hard"] .b3__f { box-shadow: inset 6px 0 0 -2px rgb(255 255 255 / .18), inset 7px 0 8px -4px rgb(0 0 0 / .4); border-radius: 3px 8px 8px 3px; }
.b3[data-binding="cloth"] .b3__f::after { content: ''; position: absolute; inset: 0; z-index: 9; background: repeating-linear-gradient(45deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.b3[data-binding="cloth"] .b3__ribbon { display: block; }
.b3__ribbon { display: none; position: absolute; bottom: -34px; left: 62%; width: 10px; height: 46px; background: var(--red-act); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); transform: translateZ(calc(var(--d) / 2 - 4px)); }
.b3__foil { position: absolute; z-index: 8; left: 12%; right: 12%; bottom: 7%; text-align: center; font: 600 7cqw/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(100deg, #b98d3e, #f3d98b 40%, #a77a2e 60%, #e9c97a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .25)); }
.b3__foil:empty { display: none; }
/* views: cover, spine, open to the dedication */
.make__stage[data-view="spine"] .b3__in { --ry: 62deg; --rx: 4deg; }
.make__stage[data-view="open"] .b3 { display: none; }
.open3 { display: none; position: relative; width: min(560px, 90%); aspect-ratio: 3 / 2.1; perspective: 1800px; }
.make__stage[data-view="open"] .open3 { display: block; }
.open3__pg { position: absolute; top: 0; bottom: 0; width: 50%; padding: 8% 7%; background: var(--pg, #F3EEDF); box-shadow: var(--e2); display: grid; align-content: center; justify-items: center; gap: 12px; text-align: center; color: var(--ink); }
.open3__pg--l { left: 0; border-radius: 6px 0 0 6px; transform: rotateY(8deg); transform-origin: right; background-image: linear-gradient(90deg, transparent 80%, rgb(0 0 0 / .08)); }
.open3__pg--r { right: 0; border-radius: 0 6px 6px 0; transform: rotateY(-8deg); transform-origin: left; background-image: linear-gradient(270deg, transparent 80%, rgb(0 0 0 / .1)); }
.open3__t { font: 500 clamp(18px, 2.4vw, 26px)/1.25 var(--f-book); }
.open3__t[lang="ar"] { font: 700 clamp(22px, 2.8vw, 30px)/1.5 var(--f-ar); }
.open3__by { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.open3__ded { font: italic 400 clamp(15px, 1.7vw, 19px)/1.5 var(--f-book); color: var(--blue); max-width: 24ch; }
.open3__ded.is-ar { font: 400 clamp(20px, 2.3vw, 26px)/1.6 var(--f-hand); font-style: normal; }
.open3__empty { font-size: 13px; color: var(--ink-2); }
.open3__pg--l[data-paper="recycled"], .open3__pg--r[data-paper="recycled"] { background-image: radial-gradient(circle at 20% 30%, rgb(0 0 0 / .06) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, rgb(0 0 0 / .05) 0 1px, transparent 1.5px); background-size: 23px 19px, 31px 27px; }
.open3[data-size="large"] .open3__ded { font-size: clamp(18px, 2.1vw, 23px); }
/* options */
.mk { padding: var(--s5) 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.mk:first-of-type { padding-top: 0; }
.mk__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: var(--s4); }
.mk__h legend, .mk__h h2 { font: 700 18px/1.3 var(--f-ui); color: var(--ink); float: left; }
[dir="rtl"] .mk__h legend { float: right; }
.mk__v { font-size: 14px; color: var(--ink-2); }
.mk__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; clear: both; }
.mk__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk__opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opt { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--r-md); text-align: start; background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent); transition: box-shadow var(--t-ui), transform var(--t-micro) var(--ease-out); }
.opt:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.opt:active { transform: scale(.98); }
.opt[aria-checked="true"], .opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--ink); }
.opt[aria-checked="true"]::after, .opt[aria-pressed="true"]::after { content: ''; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3CFE3' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
[dir="rtl"] .opt[aria-checked="true"]::after, [dir="rtl"] .opt[aria-pressed="true"]::after { right: auto; left: 10px; }
.opt__n { font-weight: 700; font-size: 15px; padding-inline-end: 22px; }
.opt__p { font-size: 13px; font-weight: 600; color: var(--blue); }
.opt__d { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.opt__sw { display: block; height: 54px; margin-bottom: 6px; border-radius: 6px; container-type: inline-size; position: relative; overflow: hidden; }
.opt__sw .cover { position: absolute; inset: auto 0 auto 0; top: -30%; width: 100%; height: auto; aspect-ratio: 2/3; }
.opt__paper { display: block; height: 54px; margin-bottom: 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.opt__paper[data-p="cream"] { background: #F3EEDF; }
.opt__paper[data-p="ivory"] { background: linear-gradient(160deg, #FBF8EF, #F1EDE0); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08), inset 0 -6px 0 -3px rgb(0 0 0 / .05); }
.opt__paper[data-p="recycled"] { background: #E9E5DA radial-gradient(circle at 20% 30%, rgb(0 0 0 / .12) 0 1px, transparent 1.6px) 0 0 / 11px 9px; }
.opt__bind { display: block; height: 54px; margin-bottom: 6px; }
.opt__bind i { display: block; width: 34px; height: 50px; margin: 0 auto; border-radius: 2px 4px 4px 2px; background: var(--blue); box-shadow: inset 4px 0 0 rgb(0 0 0 / .18); }
.opt__bind[data-b="hard"] i { width: 38px; box-shadow: inset 5px 0 0 rgb(0 0 0 / .25), 2px 2px 0 var(--ink); }
.opt__bind[data-b="cloth"] i { width: 38px; background: var(--ink) repeating-linear-gradient(45deg, rgb(255 255 255 / .08) 0 1px, transparent 1px 3px); box-shadow: inset 5px 0 0 rgb(0 0 0 / .3), 2px 2px 0 var(--blue); position: relative; }
.opt__bind[data-b="cloth"] i::after { content: ''; position: absolute; bottom: -6px; left: 60%; width: 5px; height: 12px; background: var(--red-act); }
.mk__more { display: grid; gap: var(--s4); margin-top: var(--s4); }
.mk__more[hidden] { display: none; }
.mk__warn { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s4); padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--sky) 35%, transparent); font-size: 14px; color: var(--ink); }
.mk__warn svg { flex: none; width: 20px; height: 20px; color: var(--blue); }
.make__buy { position: sticky; bottom: 0; z-index: 5; margin-top: var(--s5); padding: var(--s5) 0; background: linear-gradient(to top, var(--stone) 78%, transparent); }
.make__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.make__price { font: 700 30px/1 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.make__when { font-size: 14px; color: var(--ink-2); }
.make__buy .btn { width: 100%; }
.make__fine { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.make__lines { display: grid; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.make__lines div { display: flex; justify-content: space-between; }

/* ---------- bag ---------- */
.bag__grid, .co__grid, .acc__grid, .ord__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.bag__items { grid-column: 1 / span 8; }
.bag__side, .co__side { grid-column: 9 / -1; position: sticky; top: 100px; }
.it { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s5); align-items: start; padding: var(--s5) 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.it:first-child { padding-top: 0; }
.it__cv { display: block; width: 96px; container-type: inline-size; border-radius: 3px; overflow: hidden; box-shadow: var(--e2); }
.it__t { font: 700 18px/1.3 var(--f-ui); color: var(--ink); text-decoration: none; }
.it__t:hover { text-decoration: underline; }
.it__k { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--sky) 45%, transparent); color: var(--ink); }
.it__k svg { width: 14px; height: 14px; }
.it__d { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.it__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; font-size: 14px; }
.it__p { font-weight: 700; font-size: 17px; color: var(--ink); text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty { display: inline-flex; align-items: center; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
.qty button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.qty button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.qty button:disabled { opacity: .35; }
.qty svg { width: 16px; height: 16px; }
.qty output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.promo { display: flex; gap: 8px; margin-top: var(--s5); }
.promo .input { height: 44px; text-transform: uppercase; }
.promo .btn { flex: none; }
.promo__msg { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.promo__msg.is-ok { color: var(--blue); font-weight: 600; }
.empty { display: grid; justify-items: center; gap: var(--s4); padding: var(--pad-y) 0; text-align: center; }
.empty svg { width: 56px; height: 56px; color: var(--blue); }
.empty p { max-width: 46ch; color: var(--ink-2); }

/* ---------- checkout ---------- */
.co__main { grid-column: 1 / span 8; display: grid; gap: var(--s5); }
.co__steps { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: var(--s5); counter-reset: st; }
.co__steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); counter-increment: st; }
.co__steps li::before { content: counter(st); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 12px; }
.co__steps li.is-on { color: var(--ink); }
.co__steps li.is-on::before { background: var(--ink); color: var(--stone); box-shadow: none; }
.co__steps li.is-done { color: var(--blue); }
.co__steps li.is-done::before { content: '✓'; background: var(--blue); color: var(--white); box-shadow: none; }
[lang="ar"] .co__steps li::before { content: counter(st, arabic-indic); }
.step-p { padding: var(--s6); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e1); }
.step-p[data-state="done"] { padding-block: var(--s5); }
.step-p__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.step-p__t { display: flex; align-items: center; gap: 12px; font: 700 20px/1.3 var(--f-ui); color: var(--ink); }
.step-p__t svg { width: 24px; height: 24px; color: var(--blue); }
.step-p__sum { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.step-p__body { margin-top: var(--s5); display: grid; gap: var(--s4); }
.step-p[data-state="todo"] { opacity: .55; padding-block: var(--s5); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s4); }
.field { display: grid; gap: 8px; }
.saved-addr { display: grid; gap: 10px; }
.radio-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-md); text-align: start; background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 16%, transparent); width: 100%; transition: box-shadow var(--t-ui); }
.radio-card:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.radio-card[aria-checked="true"] { box-shadow: inset 0 0 0 2.5px var(--ink); background: color-mix(in srgb, var(--sky) 12%, var(--white)); }
.radio-card[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.radio-card__dot { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 40%, transparent); }
.radio-card[aria-checked="true"] .radio-card__dot { box-shadow: inset 0 0 0 6px var(--ink); }
.radio-card__b { flex: 1; display: grid; gap: 3px; }
.radio-card__n { font-weight: 700; font-size: 15px; }
.radio-card__s { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.radio-card__e { font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.radio-card > svg { flex: none; width: 24px; height: 24px; color: var(--blue); margin-top: 1px; }
.pay-more { display: grid; gap: var(--s4); margin-top: var(--s2, 4px); padding: var(--s5); border-radius: var(--r-md); background: var(--stone-50); }
.pay-more[hidden] { display: none; }
.map { position: relative; height: 180px; border-radius: var(--r-md); overflow: hidden; cursor: crosshair;
  background: #E4E8E2 linear-gradient(90deg, transparent 49%, #fff 49% 51%, transparent 51%) 0 0 / 90px 90px, linear-gradient(0deg, transparent 49%, #fff 49% 51%, transparent 51%) 0 0 / 70px 70px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent); }
.map::before { content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 26px; background: color-mix(in srgb, var(--sky) 75%, #fff); transform: rotate(-8deg); }
.map__pin { position: absolute; width: 34px; height: 34px; margin: -34px 0 0 -17px; color: var(--red-act); transition: left 300ms var(--ease-out), top 300ms var(--ease-out); filter: drop-shadow(0 4px 4px rgb(0 0 0 / .25)); }
.map__pin svg { width: 100%; height: 100%; fill: currentColor; stroke: var(--white); }
.map__hint { position: absolute; left: 12px; bottom: 10px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--white); font-size: 12px; color: var(--ink-2); }
[dir="rtl"] .map__hint { left: auto; right: 12px; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--sky) 30%, transparent); font-size: 14px; line-height: 1.5; color: var(--ink); }
.note svg { flex: none; width: 20px; height: 20px; color: var(--blue); margin-top: 1px; }
.note--warn { background: color-mix(in srgb, var(--red) 12%, transparent); }
.note--warn svg { color: var(--red-act); }
.co__go { display: grid; gap: 10px; }
.co__go .btn { width: 100%; }
.co__terms { font-size: 13px; color: var(--ink-2); }
.co__line { display: flex; gap: 12px; align-items: center; padding: 10px 0; font-size: 14px; color: var(--ink-2); }
.co__line .it__cv { width: 44px; }
.co__line b { flex: 1; color: var(--ink); font-weight: 600; }
.otp--light input { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
.inst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- order confirmation and tracking ---------- */
.ord__main { grid-column: 1 / span 8; display: grid; gap: var(--s5); }
.ord__side { grid-column: 9 / -1; display: grid; gap: var(--s5); position: sticky; top: 100px; }
.ok { display: flex; gap: var(--s5); align-items: center; padding: var(--s6); border-radius: var(--r-lg); background: var(--ink); color: var(--stone); }
.ok__tick { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sky); color: var(--ink); }
.ok__tick svg { width: 32px; height: 32px; }
.ok h2 { font: 700 26px/1.25 var(--f-ui); }
.ok p { margin-top: 6px; color: color-mix(in srgb, var(--stone) 80%, transparent); }
.ok .link { color: var(--sky); }
.track { position: relative; display: grid; gap: 0; }
.track li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; padding-bottom: var(--s5); }
.track li::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
[dir="rtl"] .track li::before { left: auto; right: 13px; }
.track li:last-child::before { display: none; }
.track li.is-done::before { background: var(--blue); }
.track__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent); background: var(--white); z-index: 1; }
.track li.is-done .track__dot { background: var(--blue); box-shadow: none; color: var(--white); }
.track li.is-now .track__dot { background: var(--ink); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sky) 60%, transparent); color: var(--sky); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--sky) 25%, transparent); } }
.track__dot svg { width: 14px; height: 14px; }
.track__t { font-weight: 700; color: var(--ink); }
.track li:not(.is-done):not(.is-now) .track__t { color: var(--ink-2); font-weight: 500; }
.track__s { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.track__when { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.track__photo { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px; border-radius: var(--r-md); background: var(--stone-50); font-size: 13px; color: var(--ink-2); }
.track__photo span.it__cv { width: 48px; transform: rotate(-4deg); }
.ord__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ord__eta { font: 700 28px/1.2 var(--f-ui); color: var(--ink); }
.ord__k { font-size: 13px; color: var(--ink-2); }
.courier { display: flex; gap: 14px; align-items: center; }
.courier__av { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sky); font-weight: 700; color: var(--ink); }
.olist { display: grid; gap: 12px; }
.ocard { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5); align-items: center; padding: var(--s5); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e1); text-decoration: none; color: var(--ink); transition: box-shadow var(--t-ui), transform var(--t-ui) var(--ease-out); }
.ocard:hover { box-shadow: var(--e2); transform: translateY(-2px); }
.ocard__cvs { display: flex; }
.ocard__cvs .it__cv { width: 46px; }
.ocard__cvs .it__cv + .it__cv { margin-inline-start: -18px; }
.ocard__id { font-weight: 700; }
.ocard__s { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--sky) 45%, transparent); color: var(--ink); white-space: nowrap; }
.pill--done { background: var(--ink); color: var(--sky); }
.pill--warn { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--ink); }
.pill--off { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-2); }
.dlg { border: 0; padding: 0; border-radius: var(--r-lg); width: min(520px, calc(100vw - 32px)); background: var(--white); color: var(--ink); box-shadow: var(--e3); }
.dlg::backdrop { background: rgb(0 41 56 / .5); backdrop-filter: blur(3px); }
.dlg form { display: grid; gap: var(--s4); padding: var(--s6); }
.dlg h2 { font: 700 22px/1.3 var(--f-ui); }
.dlg p { color: var(--ink-2); line-height: 1.6; }
.dlg__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ---------- account ---------- */
.acc__nav { grid-column: 1 / span 3; position: sticky; top: 100px; display: grid; gap: 2px; }
.acc__nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.acc__nav a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.acc__nav a[aria-current="true"] { background: var(--ink); color: var(--stone); }
.acc__nav svg { width: 20px; height: 20px; }
.acc__nav .acc__n { margin-inline-start: auto; font-size: 12px; }
.acc__main { grid-column: 4 / -1; display: grid; gap: var(--s5); min-width: 0; }
.acc__hi { display: flex; align-items: center; gap: var(--s5); }
.acc__av { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--sky); font: 700 28px/1 var(--f-ui); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { padding: var(--s5); border-radius: var(--r-md); background: var(--stone-50); }
.stat b { display: block; font: 700 30px/1.1 var(--f-ui); color: var(--ink); }
.stat span { font-size: 13px; color: var(--ink-2); }
.goal { display: grid; gap: 10px; }
.goal__bar { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.goal__bar span { display: block; height: 100%; background: var(--blue); transform-origin: left; }
[dir="rtl"] .goal__bar span { transform-origin: right; }
.rows { display: grid; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 16px 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent); }
.row:last-child { box-shadow: none; }
.row__k { font-weight: 600; color: var(--ink); }
.row__v { font-size: 14px; color: var(--ink-2); }
.row__b { display: grid; gap: 4px; }
.switch { position: relative; width: 46px; height: 26px; border-radius: 13px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: background-color var(--t-ui); flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: var(--e1); transition: transform var(--t-ui) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--blue); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
[dir="rtl"] .switch::after { left: auto; right: 3px; }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-20px); }
.addr-card { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-md); background: var(--stone-50); font-size: 14px; color: var(--ink-2); }
.addr-card b { color: var(--ink); font-size: 15px; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ref { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--stone-50); font: 700 18px/1 var(--f-ui); letter-spacing: .08em; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .make__stage { grid-column: 1 / span 6; }
  .make__panel { grid-column: 7 / -1; }
  .rv__sum { grid-column: 1 / span 5; }
  .rv__main { grid-column: 6 / -1; }
  .acc__nav { grid-column: 1 / span 4; }
  .acc__main { grid-column: 5 / -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .rv__sum, .rv__main, .bag__items, .bag__side, .co__main, .co__side, .ord__main, .ord__side, .acc__nav, .acc__main, .make__stage, .make__panel { grid-column: 1 / -1; }
  .rv__sum, .bag__side, .co__side, .ord__side, .acc__nav { position: static; }
  .make__stage { position: relative; top: 0; height: 64svh; min-height: 380px; }
  .acc__nav { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
  .acc__nav a { flex: none; padding: 10px 14px; }
  .acc__nav .acc__n { display: none; }
  .co__side { order: -1; }
}
@media (max-width: 600px) {
  .fmt { grid-template-columns: 1fr; }
  .mk__opts, .mk__opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2, .grid3, .cards { grid-template-columns: 1fr; }
  .it { grid-template-columns: 72px 1fr; }
  .it__cv { width: 72px; }
  .it__p { grid-column: 2; text-align: start; }
  .ocard { grid-template-columns: 1fr auto; }
  .ocard__cvs { display: none; }
  .ok { flex-direction: column; align-items: flex-start; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .track li { grid-template-columns: 28px 1fr; }
  .track__when { grid-column: 2; }
  .rv__t, .rv__spoil, .rv__help { margin-left: 0 !important; margin-right: 0 !important; }
  .rv__avg { font-size: 56px; }
}
.make__det { margin-bottom: 10px; font-size: 13px; color: var(--ink-2); }
.make__det summary { cursor: pointer; font-weight: 600; width: max-content; }
.make__det .make__lines { margin-top: 8px; }
.make__fine { position: relative; }
.make__panel { padding-bottom: 0; }
.make__panel input, .make__panel textarea, .make__panel .opt { scroll-margin-bottom: 240px; scroll-margin-top: 110px; }
.gift__paper { display: flex; gap: 12px; align-items: center; margin-top: var(--s5); padding: 14px 16px; border-radius: var(--r-md); background: color-mix(in srgb, var(--stone) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 25%, transparent); font-size: 14px; color: var(--stone); }
.gift__paper svg { flex: none; width: 22px; height: 22px; color: var(--sky); }
.gift__paper .link { color: var(--sky); }
.ok:focus, [data-sec-h]:focus { outline: none; }
.acc__grid > *, .bag__grid > *, .co__grid > *, .ord__grid > *, .make__grid > * { min-width: 0; }
.ocard__id, .ocard__s { display: block; }
.acc__av svg { width: 30px; height: 30px; }
@media (max-width: 600px) {
  .make__buy { position: static; background: none; padding-bottom: 0; }
  .make__price { font-size: 26px; }
  .acc__hi { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .grid3 > .field:has(#c-name) { grid-column: 1 / -1; }
}
.rv__ver, .co__steps li.is-done { color: var(--deep-water); }
.co__steps li.is-done::before { background: var(--deep-water); }
/* Arabic books open from the right: the spine is on the right, the pages on the left */
.b3[data-ar="true"] .b3__in { --ry: 28deg; }
.make__stage[data-view="spine"] .b3[data-ar="true"] .b3__in { --ry: -62deg; }
.b3[data-ar="true"] .b3__s { transform: rotateY(90deg) translateZ(calc(var(--w-px, 300px) / 2)); }
.b3[data-ar="true"] .b3__p { transform: rotateY(-90deg) translateZ(calc(var(--w-px, 300px) / 2 - 3px)); }
.b3[data-ar="true"] .b3__f { border-radius: 6px 2px 2px 6px; box-shadow: inset -4px 0 6px -3px rgb(0 0 0 / .35); }
.b3[data-ar="true"] .b3__ribbon { left: 30%; }
.b3[data-ar="true"] .b3__shadow { left: -6%; right: 6%; }
.make__stage { padding-top: 64px; }
@media (max-width: 900px) {
  .b3 { --w: min(230px, 50%); }
  .open3 { width: min(520px, 92%); }
}

/* ---------- review pass, 17 Oct: titles, labels, one meaning per icon ---------- */
/* Arabic pages: a book's Arabic title, then its original title on its own line */
.bk__t .ar-main, .shelf__ct .ar-main { display: block; font: 600 17px/1.5 var(--f-ui); }
.bk__orig, .shelf__ce { display: block; margin-top: 2px; font: 500 12.5px/1.4 'Montserrat', system-ui, sans-serif; color: var(--ink-2); text-align: start; }
[dir="rtl"] .bk__orig, [dir="rtl"] .shelf__ce { text-align: right; }
.chip--en { font-family: 'Montserrat', system-ui, sans-serif; }
/* the reading-list bookmark: outline until saved, filled once it is */
.bk__heart[aria-pressed="true"] { color: var(--ink); }
.bk__heart[aria-pressed="true"] svg, [data-save][aria-pressed="true"] svg { fill: currentColor; }
.bk__heart { position: relative; }
.bk__heart[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); inset-inline-end: 0; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--stone); font: 600 12px/1 var(--f-ui); white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--t-micro), transform var(--t-micro); }
.bk__heart[aria-pressed="true"][data-tip]::after { content: attr(aria-label); }
@media (hover: hover) { .bk__heart:hover::after, .bk__heart:focus-visible::after { opacity: 1; transform: none; } }
.bk__acts { margin-inline-end: -8px; margin-right: 0; }
[dir="rtl"] .bk__acts { margin-left: -8px; }
/* the bag sits beside the library and says what it is */
.hdr__bag .hdr__badge { top: -9px; right: -11px; }
[dir="rtl"] .hdr__bag .hdr__badge { right: auto; left: -11px; }
/* footer: on phones the field keeps its height when the row stacks */
@media (max-width: 600px) {
  .foot__row .input { flex: none; height: 52px; }
  .hdr__lib[data-library] { display: none; }
  .try { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.today__next time { white-space: nowrap; }
[dir="rtl"] .sample__progress span { min-width: 0; text-align: right; }

/* ---------- the purchase sheet: steps, who is paying, every way to pay ---------- */
.sheet__item { flex-wrap: nowrap; }
.sheet__amt { margin-inline-start: auto; font: 700 18px/1 var(--f-ui); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet__steps { display: flex; gap: 6px 18px; margin-bottom: var(--s5); counter-reset: st; }
.sheet__steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); counter-increment: st; }
.sheet__steps li::before { content: counter(st); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 11px; }
[lang="ar"] .sheet__steps li::before { content: counter(st, arabic-indic); }
.sheet__steps li.is-on { color: var(--ink); }
.sheet__steps li.is-on::before { background: var(--ink); color: var(--stone); box-shadow: none; }
.sheet__steps li.is-done { color: var(--deep-water); }
.sheet__steps li.is-done::before { content: '✓'; background: var(--deep-water); color: var(--white); box-shadow: none; }
.sheet__who { margin: -8px 0 var(--s4); font-size: 14px; color: var(--ink-2); }
.sheet__methods { display: grid; gap: 10px; }
.sheet__form { overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }
.sheet__form .sheet__go { margin-top: var(--s5); flex: none; }
.sheet__form .pay-more { background: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.sheet__form .field { gap: 6px; }
.sheet__form .note { margin-top: 8px; }
.sheet .grid2 { gap: 10px; }

/* ---------- real covers (public-domain scans) ---------- */
.cover--real { background: var(--cc); }
.cover--real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: 1; }
.cover--real::before { z-index: 2; width: 7%; background: linear-gradient(90deg, rgb(0 0 0 / .22), rgb(0 0 0 / .04) 55%, rgb(255 255 255 / .12) 80%, rgb(0 0 0 / 0)); }
.cover--real::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 38%, rgb(0 0 0 / .06)); }

/* ---------- Make it yours: the WebGL stage ---------- */
.make__stage { background: radial-gradient(90% 70% at 50% 88%, color-mix(in srgb, var(--sky) 55%, var(--stone-50)) 0, var(--stone-50) 62%, color-mix(in srgb, var(--stone) 70%, var(--white)) 100%); }
.make__stage::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 13%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 14%, transparent), transparent); pointer-events: none; }
.b3d { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 600ms var(--ease-out); cursor: grab; touch-action: pan-y; }
.b3d.is-ready { opacity: 1; }
.b3d.is-dragging { cursor: grabbing; }
.b3d__canvas { display: block; width: 100% !important; height: 100% !important; }
.make__fallback { display: none; width: min(300px, 58%); filter: drop-shadow(0 30px 30px rgb(0 41 56 / .25)); }
.make__stage:not(.is-3d) .make__fallback { display: block; }
.make__stage[data-view="open"] .b3d, .make__stage[data-view="open"] .make__fallback { opacity: 0; pointer-events: none; }
.make__stage[data-view="open"] .open3 { display: block; position: relative; z-index: 2; }
.make__views { z-index: 3; }
.make__jacket { position: absolute; z-index: 3; top: 70px; left: 50%; transform: translateX(-50%); background: var(--white); }
.make__hint { position: absolute; z-index: 3; bottom: 54px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--ink-2); opacity: .8; pointer-events: none; }
.make__stage[data-view="open"] .make__hint, .make__stage:not(.is-3d) .make__hint { display: none; }
.make__cap { z-index: 3; }
/* numbered steps in the panel */
.mk__h legend { display: inline-flex; align-items: center; gap: 10px; }
.mk__i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--stone); font: 700 12px/1 var(--f-ui); }
.mk__sub { margin: var(--s4) 0 10px; font: 600 13px/1.3 var(--f-ui); color: var(--ink-2); }
.mk__jk { margin-top: var(--s4); }
.opt__cv { display: block; width: 64px; margin-bottom: 8px; container-type: inline-size; }
.opt__cv .cover { border-radius: 2px 4px 4px 2px; }
.opt.is-off { opacity: .55; }
.opt.is-off .opt__n::after { content: ' · ' attr(data-off); }
/* swatches: cloth, foil, edges, colourways */
.mk__sw { display: flex; flex-wrap: wrap; gap: 8px; }
.sw3 { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 8px; border-radius: var(--r-pill); background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent); font-size: 14px; font-weight: 600; transition: box-shadow var(--t-ui); }
[dir="rtl"] .sw3 { padding: 0 8px 0 14px; }
.sw3:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.sw3[aria-checked="true"] { box-shadow: inset 0 0 0 2.5px var(--ink); }
.sw3__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.sw3--cloth .sw3__dot { background: var(--sw) url('../tex/linen-tone.jpg') center / 80px; background-blend-mode: multiply; }
.sw3--metal .sw3__dot { background: linear-gradient(135deg, color-mix(in srgb, var(--sw) 55%, #fff) 0, var(--sw) 40%, color-mix(in srgb, var(--sw) 70%, #000) 70%, color-mix(in srgb, var(--sw) 80%, #fff) 100%); }
.sw3--blind .sw3__dot { background: var(--sw); box-shadow: inset 2px 2px 3px rgb(0 0 0 / .45), inset -1px -1px 2px rgb(255 255 255 / .25); }
.sw3--edge .sw3__dot { border-radius: 4px; width: 30px; height: 22px; background: repeating-linear-gradient(0deg, var(--sw) 0 2px, color-mix(in srgb, var(--sw) 82%, #000) 2px 3px); }
.sw3__p { font-weight: 600; font-size: 12px; color: var(--deep-water); }
/* inside the book: the endpaper bookplate and the dedication */
.open3 { --pg: #F1EAD8; }
.open3__pg { background: var(--pg) url('../tex/paper-tone.jpg') center / 300px; background-blend-mode: multiply; }
.open3[data-binding="cloth"] .open3__pg--l { background-color: color-mix(in srgb, var(--pg) 88%, var(--sky)); }
.plate { position: relative; display: grid; justify-items: center; gap: 10px; width: 78%; padding: 26px 18px 22px; border-radius: 2px; background: color-mix(in srgb, var(--pg) 70%, #fff);
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 0 0 6px color-mix(in srgb, var(--pg) 70%, #fff), inset 0 0 0 7px color-mix(in srgb, var(--blue) 70%, transparent), inset 0 0 0 10px color-mix(in srgb, var(--pg) 70%, #fff), inset 0 0 0 11px color-mix(in srgb, var(--blue) 40%, transparent); }
.plate__k { font: 600 11px/1 var(--f-ui); letter-spacing: .28em; color: var(--blue); }
[dir="rtl"] .plate__k, .plate__k:lang(ar) { letter-spacing: 0; font-size: 14px; }
.plate__n { font: italic 400 clamp(20px, 2.4vw, 28px)/1.2 var(--f-book); color: var(--ink); text-align: center; }
.plate__n.is-ar { font: 400 clamp(26px, 3vw, 34px)/1.4 var(--f-hand); font-style: normal; }
.plate__m { width: 22px; height: 24px; color: var(--blue); opacity: .8; }
.open3__mark { width: 26px; height: 28px; color: var(--blue); }
@media (max-width: 900px) {
  .make__hint { bottom: 46px; }
  .make__jacket { top: 64px; }
}
/* Make it yours: the book stands whole in the first screen; the heading sits with the choices */
.make .crumbs { margin-bottom: var(--s5); }
.make__stage { top: 96px; height: calc(100svh - 196px); min-height: 500px; }
.make__head { margin-bottom: var(--s6); }
.make__head .h1 { font-size: clamp(38px, 3.6vw, 56px); margin-top: 6px; }
.make__head .store__lede { margin-top: 10px; }
@media (max-width: 900px) { .make__stage { height: 62svh; min-height: 380px; } }
/* book page: the printed book in 3D where the flat cover stood */
.book__stage.is-3d { min-height: min(72svh, 640px); }
.book__stage.is-3d > .cover { visibility: hidden; }
.b3d--hero { position: absolute; inset: 0; z-index: 2; }
.book__turn { position: absolute; z-index: 3; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--ink-2); opacity: 0; transition: opacity 400ms; pointer-events: none; }
.book__stage.is-3d .book__turn { opacity: .8; }
@media (max-width: 900px) { .book__stage.is-3d { min-height: 64svh; } }

/* Make it yours: the heading is its own grid item — beside the book on desktop, above it on phones */
.make__grid > .make__head { grid-column: 8 / -1; grid-row: 1; margin-bottom: 0; }
.make__grid > .make__stage { grid-row: 1 / span 2; }
.make__grid > .make__panel { grid-column: 8 / -1; grid-row: 2; }
@media (max-width: 1100px) { .make__grid > .make__head, .make__grid > .make__panel { grid-column: 7 / -1; } }
@media (max-width: 900px) {
  .make__grid > .make__head, .make__grid > .make__stage, .make__grid > .make__panel { grid-column: 1 / -1; grid-row: auto; }
  .make__hint { display: none; }
}
@media (max-width: 900px) { .make__grid > .make__stage { top: 0; } }
.book__credit { margin-top: 10px; font-size: 12px; color: var(--ink-2); text-align: center; }
.book__credit a { color: inherit; }

/* ---------- home: printed books, on blue (copy on 1–5, the three bindings on 7–12) ---------- */
.print .pr__head .label, .print .link--on-dark { color: var(--white); } /* stone on blue is 4.4:1; white is 5.5:1 */
.pr__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--gutter); }
.pr__head { grid-column: 1 / span 5; grid-row: 2; }
.pr__head .label { margin-bottom: var(--s4); }
.pr__head .lede { margin-top: var(--s5); }
.pr__facts { grid-column: 1 / span 5; grid-row: 3; display: grid; gap: var(--s4); margin-top: var(--s6); font-size: var(--fs-b); line-height: 1.5; }
.pr__facts li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.pr__facts svg { width: 22px; height: 22px; margin-top: 1px; color: var(--sky); }
.pr__facts strong { font-weight: 700; }
.pr__cta { grid-column: 1 / span 5; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: var(--s6); }
.pr__stage { grid-column: 7 / span 6; grid-row: 1 / -1; position: relative; display: grid; align-content: center; justify-items: center; gap: var(--s6); min-height: 520px; padding: var(--s7) var(--s5) var(--s6); overflow: hidden; border-radius: var(--r-lg); color: var(--ink);
  background: radial-gradient(110% 70% at 50% 100%, color-mix(in srgb, var(--sky) 45%, var(--stone-50)) 0, var(--stone-50) 62%); box-shadow: var(--e1); }
.pr__stage .pr__k { justify-content: center; color: var(--ink-2); }
/* three books in a row that always fits: the width follows the row (a size container) */
.pr__row { --gap: clamp(14px, 2.6vw, 40px); --bw: min(clamp(132px, 12.4vw, 186px), (100cqw - 2 * var(--gap)) / 3); container-type: inline-size; width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); }
.pr__bk { display: grid; justify-items: center; gap: 30px; color: var(--ink); text-decoration: none; border-radius: var(--r-sm); }
.pr__bk .b3 { --w: var(--bw); --w-px: var(--bw); --ry: -26deg; display: block; }
/* only the binding changes: a thin paperback with flush edges, thicker boards that overhang the pages, cloth */
.pr__bk .b3[data-binding="paper"] { --d: calc(var(--bw) * .06); }
.pr__bk .b3[data-binding="hard"] { --d: calc(var(--bw) * .15); }
.pr__bk .b3[data-binding="cloth"] { --d: calc(var(--bw) * .14); }
.pr__bk .b3__p { top: 0; bottom: 0; width: var(--d); transform: rotateY(90deg) translateZ(calc(var(--w-px) / 2)); }
.pr__bk .b3:not([data-binding="paper"]) .b3__p { background: repeating-linear-gradient(90deg, #F3EEDF 0 1px, #C8C4B7 1px 2px) 50% 50% / calc(100% - 6px) 95% no-repeat, var(--c1); }
.pr__bk .b3__sname { font-size: calc(var(--bw) * .055); }
.pr__bk .b3__ribbon { width: 8px; height: 34px; bottom: -24px; }
.pr__bk:hover .b3__in, .pr__bk:focus-visible .b3__in { --ry: -10deg; --rx: 3deg; }
.pr__ft { top: 26%; bottom: auto; font-size: 10.5cqw; letter-spacing: .08em; line-height: 1.25; }
.pr__cap { display: grid; justify-items: center; gap: 2px; max-width: var(--bw); text-align: center; }
.pr__n { font: 600 14px/1.3 var(--f-ui); }
.pr__s { font: 500 13px/1.3 var(--f-ui); color: var(--ink-2); }
.pr__p { margin-top: 4px; font: 600 14px/1.3 var(--f-ui); font-variant-numeric: tabular-nums; }
.pr__bk:hover .pr__n { text-decoration: underline; text-underline-offset: 4px; }
.print .pr__bk:focus-visible { outline-color: var(--ink); }
html:not(.motion) .pr__bk .b3__in { transition: none; }
html:not(.js) .pr__stage { display: none; }
@media (max-width: 1100px) {
  /* the promise, the books, then the facts and the way in */
  .pr__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "stage" "facts" "cta"; }
  .pr__head { grid-area: head; }
  .pr__stage { grid-area: stage; margin-top: var(--s7); min-height: 0; }
  .pr__facts { grid-area: facts; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s7); }
  .pr__facts li { grid-template-columns: 1fr; gap: 10px; }
  .pr__cta { grid-area: cta; }
}
@media (max-width: 600px) {
  .pr__stage { padding: var(--s6) var(--s3) var(--s5); gap: var(--s5); }
  .pr__row { --gap: 14px; --bw: min(96px, (100cqw - 2 * var(--gap)) / 3); }
  .pr__bk { gap: 22px; }
  .pr__bk .b3__ribbon { width: 6px; height: 22px; bottom: -16px; }
  .pr__facts { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .pr__facts li { grid-template-columns: 22px 1fr; gap: 14px; }
  .pr__n, .pr__p { font-size: 13px; }
  .pr__s { font-size: 12px; }
}

/* ---------- English pass B, 20 Oct. First scoped to English; since the Arabic pass (29 Oct) these apply to both languages,
   through :root:is([lang="en"], [lang="ar"]) so the specificity is unchanged. The "is-painted" rules stay English: the
   page scripts mark only English pages as painted. ---------- */
/* Make it yours: the price bar is solid stone with a hairline, and a short fade above it, so nothing scrolls visibly under it */
:root:is([lang="en"], [lang="ar"]) .make__buy { background: var(--stone); box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 12%, transparent); padding: var(--s4) 0; }
:root:is([lang="en"], [lang="ar"]) .make__buy::before { content: ''; position: absolute; inset: auto 0 100% 0; height: 32px; background: linear-gradient(to top, var(--stone), transparent); pointer-events: none; }
:root:is([lang="en"], [lang="ar"]) [data-mk-opts] > .mk:last-child { box-shadow: none; } /* the bar's hairline is the only line above the price */
:root:is([lang="en"], [lang="ar"]) .make__price { white-space: nowrap; }
/* phones: the price follows the choices in a bar (make.js) */
:root:is([lang="en"], [lang="ar"]) .buybar--make .buybar__n { font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
:root:is([lang="en"], [lang="ar"]) .buybar--make .buybar__p { font: 700 16px/1.2 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
/* bag and checkout: an Arabic book's English title under its Arabic one, as on the store cards */
:root:is([lang="en"], [lang="ar"]) .it__t [lang="ar"], :root:is([lang="en"], [lang="ar"]) .co__line b [lang="ar"] { font-family: var(--f-ar); font-weight: 700; }
:root:is([lang="en"], [lang="ar"]) .it__t [lang="ar"] { font-size: 20px; }
:root:is([lang="en"], [lang="ar"]) .it__en { display: block; margin-top: 2px; font: 500 13.5px/1.4 var(--f-ui); color: var(--ink-2); }
:root:is([lang="en"], [lang="ar"]) .it__en + br { display: none; }
:root:is([lang="en"], [lang="ar"]) .co__line .tsub { display: block; font: 500 12.5px/1.4 var(--f-ui); color: var(--ink-2); }
/* the empty bag spans the page; the reading list sits under it as real suggestions */
:root:is([lang="en"], [lang="ar"]) .bag__items.is-empty { grid-column: 1 / -1; }
:root:is([lang="en"], [lang="ar"]) .bag__want { display: grid; gap: var(--s4); padding-top: var(--s7); box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
:root:is([lang="en"], [lang="ar"]) .bag__want-s { max-width: 60ch; color: var(--ink-2); }
:root:is([lang="en"], [lang="ar"]) .bag__want .grid-books { margin-top: var(--s4); }
/* order tracking: the demo control lives in the concept note; actions sit on one line */
:root:is([lang="en"], [lang="ar"]) .ord__acts { align-items: center; }
:root:is([lang="en"], [lang="ar"]) .ord__skip { font-size: inherit; white-space: nowrap; }
/* an order on its way: the water line fills step by step ("Quality check · 3 of 6") */
:root:is([lang="en"], [lang="ar"]) .wline { display: grid; gap: 6px; margin-top: 10px; max-width: 320px; }
:root:is([lang="en"], [lang="ar"]) .wline__t { font: 600 13px/1.3 var(--f-ui); color: var(--ink); }
:root:is([lang="en"], [lang="ar"]) .wline__bar { position: relative; display: block; height: 8px; }
:root:is([lang="en"], [lang="ar"]) .wline__bar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:root:is([lang="en"], [lang="ar"]) .wline__track { color: color-mix(in srgb, var(--ink) 16%, transparent); }
:root:is([lang="en"], [lang="ar"]) .wline__fill { position: absolute; inset: -2px 0; color: var(--blue); }
:root:is([lang="en"], [lang="ar"]) .wline__fill svg { inset: 2px 0; height: calc(100% - 4px); }
:root:is([lang="en"], [lang="ar"]).motion .wline__fill { animation: wline-fill 1.2s var(--ease-out) .2s both; }
@keyframes wline-fill { from { clip-path: inset(0 100% 0 0); } }
@media (max-width: 600px) {
  :root:is([lang="en"], [lang="ar"]) .make__buy::before { display: none; }
  :root:is([lang="en"], [lang="ar"]) .ord__eta { font-size: 22px; }
  :root:is([lang="en"], [lang="ar"]):has(body[data-page="make"]) { scroll-padding-bottom: 96px; }
  :root:is([lang="en"], [lang="ar"]) body.has-mkbar .toast { bottom: 84px; }
}

/* ---------- English pass B, round 2 ---------- */
/* raised surfaces are stone-50, as everywhere else; what sits inside them (inputs, address cards, the pay details) stays white */
:root:is([lang="en"], [lang="ar"]) :is(.panel, .step-p, .opt, .radio-card, .ocard, .rv__sum) { background: var(--stone-50); }
:root:is([lang="en"], [lang="ar"]) .radio-card[aria-checked="true"] { background: color-mix(in srgb, var(--sky) 16%, var(--stone-50)); }
:root:is([lang="en"], [lang="ar"]) :is(.pay-more, .addr-card, .track__photo, .ref) { background: var(--white); }
:root:is([lang="en"], [lang="ar"]) .dlg .radio-card { background: var(--white); }
:root:is([lang="en"], [lang="ar"]) .dlg .radio-card:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--ink); }
/* one order, one strip: orders list, account, library */
:root:is([lang="en"], [lang="ar"]) ul.olist { list-style: none; margin: 0; padding: 0; }
:root:is([lang="en"], [lang="ar"]) .ostrip { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px var(--s5); align-items: center; padding: 16px 20px; border-radius: var(--r-md); background: var(--stone-50); box-shadow: var(--e1); cursor: pointer; transition: box-shadow var(--t-ui); }
:root:is([lang="en"], [lang="ar"]) .ostrip:hover { box-shadow: var(--e2); }
:root:is([lang="en"], [lang="ar"]) .ostrip--flat { padding: 16px 0; border-radius: 0; background: none; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent); }
:root:is([lang="en"], [lang="ar"]) .ostrip--flat:hover { box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent); }
:root:is([lang="en"], [lang="ar"]) .ostrip--flat:first-child { padding-top: 0; }
:root:is([lang="en"], [lang="ar"]) .ostrip--flat:last-child { padding-bottom: 0; box-shadow: none; }
:root:is([lang="en"], [lang="ar"]) .ostrip__cvs { display: flex; }
:root:is([lang="en"], [lang="ar"]) .ostrip__cv { display: block; width: 44px; container-type: inline-size; border-radius: 3px; overflow: hidden; box-shadow: var(--e1); }
:root:is([lang="en"], [lang="ar"]) .ostrip__cv + .ostrip__cv { margin-inline-start: -16px; }
:root:is([lang="en"], [lang="ar"]) .ostrip__txt { display: grid; gap: 4px; min-width: 0; }
:root:is([lang="en"], [lang="ar"]) .ostrip__t { font: 700 16px/1.3 var(--f-ui); color: var(--ink); }
:root:is([lang="en"], [lang="ar"]) .ostrip__t [lang="ar"] { font: 700 18px/1.3 var(--f-ar); }
:root:is([lang="en"], [lang="ar"]) .ostrip__s { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
:root:is([lang="en"], [lang="ar"]) .ostrip .wline { margin-top: 6px; }
:root:is([lang="en"], [lang="ar"]) .ostrip .pill { justify-self: start; margin-top: 6px; }
:root:is([lang="en"], [lang="ar"]) .ostrip__go { white-space: nowrap; }
/* the reading goal on the water line */
:root:is([lang="en"], [lang="ar"]) .goal__wl { height: 10px; margin-top: 2px; }
/* checkout: the summary folds into one line on phones and tablets */
:root:is([lang="en"], [lang="ar"]) .co__tog { display: none; }
/* make: the phone bar's mini cover; the views 3D can't draw say so */
:root:is([lang="en"], [lang="ar"]) .buybar__cv { flex: none; display: grid; place-items: center; width: 36px; height: 48px; }
:root:is([lang="en"], [lang="ar"]) .buybar__cv canvas { max-width: 36px; max-height: 48px; }
:root:is([lang="en"], [lang="ar"]) .buybar__cv .it__cv { width: 32px; box-shadow: var(--e1); }
:root:is([lang="en"], [lang="ar"]) .buybar--make { justify-content: flex-start; }
:root:is([lang="en"], [lang="ar"]) .buybar--make .buybar__t { flex: 1; }
:root:is([lang="en"], [lang="ar"]) .make__views.seg button[aria-disabled="true"], :root:is([lang="en"], [lang="ar"]) .make__views.seg button[aria-disabled="true"]:hover { opacity: .45; cursor: not-allowed; background: none; }
/* no layout shift: these pages show once their script has filled them in (2.5 s at most), as the store, book and library do */
:root[lang="en"] body:is([data-page="make"], [data-page="cart"], [data-page="checkout"], [data-page="orders"], [data-page="account"]) main { min-height: 100svh; }
:root[lang="en"].js:not(.is-painted) body:is([data-page="make"], [data-page="cart"], [data-page="checkout"], [data-page="orders"], [data-page="account"]) main { visibility: hidden; animation: mk-unhide 0s 2.5s forwards; }
@media (max-width: 900px) {
  :root:is([lang="en"], [lang="ar"]) .co__tog { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 14px 20px; border-radius: var(--r-md); background: var(--stone-50); box-shadow: var(--e1); font: 700 16px/1.3 var(--f-ui); color: var(--ink); text-align: start; }
  :root:is([lang="en"], [lang="ar"]) .co__tog svg { flex: none; width: 18px; height: 18px; transition: transform var(--t-ui) var(--ease-out); }
  :root:is([lang="en"], [lang="ar"]) .co__tog[aria-expanded="true"] svg { transform: rotate(180deg); }
  :root:is([lang="en"], [lang="ar"]) .co__side:not(.is-open) > .panel { display: none; }
  :root:is([lang="en"], [lang="ar"]) .co__side.is-open > .panel { margin-top: 10px; }
  :root:is([lang="en"], [lang="ar"]) .co__side > .panel .panel__t { display: none; }
}
@media (max-width: 600px) {
  /* touch targets: 44 px hit areas around the bag's quantity buttons and the make view tabs */
  :root:is([lang="en"], [lang="ar"]) .qty button { position: relative; }
  :root:is([lang="en"], [lang="ar"]) .qty button::before { content: ''; position: absolute; inset: -4px; }
  :root:is([lang="en"], [lang="ar"]) .make__views.seg button { position: relative; }
  :root:is([lang="en"], [lang="ar"]) .make__views.seg button::before { content: ''; position: absolute; inset: -5px 0; }
  :root:is([lang="en"], [lang="ar"]) .ostrip { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  :root:is([lang="en"], [lang="ar"]) .ostrip--flat { padding-inline: 0; }
  :root:is([lang="en"], [lang="ar"]) .ostrip__go { grid-column: 2; justify-self: start; }
}