/*
|--------------------------------------------------------------------------
| daralkaf storefront components
|--------------------------------------------------------------------------
|
| The eight approved screens. Everything is scoped under .dk so it cannot
| collide with the inherited ecommerce theme, which is still loaded for the
| pages this design has not replaced yet.
|
| Direction-agnostic on purpose: margin-inline, padding-inline, inset-inline
| and text-align:start throughout, so the same rules serve the Arabic (RTL)
| storefront and the English (LTR) one. There is no [dir=rtl] mirror block to
| keep in step.
|
| Colours come from the tokens in brand.css — no literals here beyond a couple
| of translucent overlays.
*/

.dk {
    --dk-container: 1200px;
    --dk-gap: 1.5rem;

    font-family: var(--dk-font);
    color: var(--site-ink);
    background: var(--site-bg);
}

.dk *,
.dk *::before,
.dk *::after { box-sizing: border-box; }

.dk__in {
    max-width: var(--dk-container);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
.dk h1, .dk h2, .dk h3, .dk h4 {
    font-family: var(--dk-font);
    color: var(--site-ink-strong);
    /* MKT-02 below: the big headings carry the brand colour. h3/h4 stay ink so
       a page does not turn into a wall of green. */
    margin: 0;
    line-height: 1.25;
    font-weight: 700;
    /* The inherited theme uppercases every heading with a bare `h1 {}` rule.
       That is a Latin-display habit: Arabic has no case, so it does nothing
       there, and on the English storefront it SHOUTS EVERY HEADING. */
    text-transform: none;
    letter-spacing: normal;
}
.dk h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
/* MKT-02. Headings that sit on a coloured ground override this themselves
   (.dk-cta h2 is white, the checkout header is its own thing). */
.dk h1, .dk h2 { color: var(--site-brand); }
.dk h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.dk h3 { font-size: 1.05rem; }
.dk p  { margin: 0; line-height: 1.75; color: var(--site-muted); }

.dk__eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--dk-gold);
    margin-bottom: .5rem;
}

/* A section heading with an optional "see all" on the far side. */
.dk__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}
.dk__head p { font-size: .9rem; margin-top: .3rem; }
.dk__more {
    flex: none;
    font-size: .86rem;
    font-weight: 600;
    color: var(--site-brand);
    text-decoration: none;
    white-space: nowrap;
}
.dk__more:hover { color: var(--site-brand-strong); text-decoration: underline; }

.dk__section { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.dk__section--wash { background: var(--dk-wash); }

/* Six pages still run the purchased theme's shell (wishlist, contact, terms,
   the blog post, and the category and brand listings), and its section spacing
   is a flat 70px top and bottom — so a reader moving from a dk-built page to
   one of those met a 140px gap between bands where the rest of the site uses
   36–56px. Same rhythm, one rule, rather than a per-page patch. store.css
   loads after the theme, so this wins without !important. */
.section-t-space { padding-top: clamp(2.25rem, 5vw, 3.5rem); }
.section-b-space { padding-bottom: clamp(2.25rem, 5vw, 3.5rem); }
/* The theme's rule is `section, .section-t-space { padding-top: 70px }` — the
   bare element selector, so it reaches every <section> on those pages whether
   or not it carries the class. Matched here at the same specificity (element,
   later sheet) so it loses; `.dk__section` and `.pb-sec` are classes and still
   beat both, keeping their own rhythm. */
section { padding-top: clamp(2.25rem, 5vw, 3.5rem); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.dk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.35rem;
    border-radius: var(--dk-radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.dk-btn--primary  { background: var(--site-brand); color: var(--site-brand-contrast); }
.dk-btn--primary:hover  { background: var(--site-brand-strong); color: var(--site-brand-contrast); }
.dk-btn--gold     { background: var(--dk-gold); color: #fff; }
.dk-btn--gold:hover { background: var(--dk-gold-strong); color: #fff; }

/* WhatsApp, in WhatsApp's own green rather than the brand's — this button is a
   promise about which app opens, so it should look like that app (MKT-06). */
.dk-btn--wa { background: #25d366; color: #0b3d23; font-weight: 700; }
.dk-btn--wa:hover { background: #1fb855; color: #05241c; }
.dk-btn--wa i { font-size: 1.05em; }
.dk-btn--ghost    { background: transparent; color: var(--site-brand); border-color: var(--site-border-strong); }
.dk-btn--ghost:hover { background: var(--site-brand-soft); border-color: var(--site-brand); }
.dk-btn--onbrand  { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.dk-btn--onbrand:hover { background: rgba(255,255,255,.12); color: #fff; }
.dk-btn--block    { width: 100%; }
.dk-btn--lg       { padding: .9rem 1.6rem; font-size: 1rem; }
.dk-btn--sm       { padding: .5rem .85rem; font-size: .82rem; }
.dk-btn[disabled], .dk-btn--disabled { opacity: .55; pointer-events: none; }

/* ── Promo bar + header ──────────────────────────────────────────────────── */
.dk-promo {
    background: var(--dk-green-deep);
    color: rgba(255,255,255,.9);
    font-size: .8rem;
}
.dk-promo__in {
    max-width: var(--dk-container);
    margin-inline: auto;
    padding: .5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    text-align: center;
}
.dk-promo strong { color: #fff; font-weight: 600; }
.dk-promo i { color: var(--dk-gold); }

.dk-head { background: var(--site-surface); border-bottom: 1px solid var(--dk-line); }
.dk-head__bar {
    max-width: var(--dk-container);
    margin-inline: auto;
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.dk-logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; flex: none; }
.dk-logo__mark {
    position: relative; overflow: hidden;
    width: 42px; height: 42px;
    border-radius: var(--dk-radius-sm);
    background: var(--site-brand);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.3rem; font-weight: 700;
    flex: none;
}
/* The real logo gets the box to itself — no green tile, no inset padding —
   because it carries its own ground and its own wordmark. The tile is only
   the letter fallback's backdrop. */
.dk-logo__mark--img { background: transparent; width: 54px; height: 54px; border-radius: 0; }

/* Absolute, not a percentage height: inside a `place-items: center` grid cell
   a percentage height resolves to auto, so a logo rendered at its full
   intrinsic height and hung out of the mark. inset:0 sizes from the box
   itself, and overflow:hidden is the backstop. */
.dk-logo__mark img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: inherit;
}
/* A brand name is one word for wrapping purposes. "Dar Al-Kaf" offers the
   browser two break opportunities — the space and the hyphen — and a narrow
   header took them, stacking "Dar Al-" over "Kaf". */
.dk-logo__name { font-size: 1.06rem; font-weight: 700; color: var(--site-ink-strong); line-height: 1.2; white-space: nowrap; }
.dk-logo__sub  { font-size: .7rem; color: var(--site-muted); }

.dk-search { flex: 1 1 auto; min-width: 0; }
.dk-search__form { display: flex; }
.dk-search__field {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.dk-search__field i {
    position: absolute;
    inset-inline-start: .8rem;
    color: var(--site-faint);
    font-size: .88rem;
    pointer-events: none;
}
.dk-search input {
    width: 100%;
    padding: .72rem .9rem .72rem 2.3rem;
    padding-inline: 2.3rem .9rem;
    border: 1px solid var(--site-border);
    border-inline-end: 0;
    border-start-start-radius: var(--dk-radius-sm);
    border-end-start-radius: var(--dk-radius-sm);
    background: var(--site-surface);
    color: var(--site-ink);
    font: inherit;
    font-size: .9rem;
}
.dk-search input::placeholder { color: var(--site-faint); }
.dk-search input:focus { outline: 2px solid var(--site-brand-soft); outline-offset: -1px; border-color: var(--site-brand); }
.dk-search button {
    flex: none;
    padding-inline: 1.4rem;
    border: 0;
    border-start-end-radius: var(--dk-radius-sm);
    border-end-end-radius: var(--dk-radius-sm);
    background: var(--site-brand);
    color: #fff;
    font: inherit; font-weight: 600; font-size: .9rem;
    cursor: pointer;
}
.dk-search button:hover { background: var(--site-brand-strong); }
/* Disabled while the box is empty — there is nothing to search for, and a
   live-looking button that just reloads the whole catalogue reads as broken. */
.dk-search button:disabled { opacity: .55; cursor: not-allowed; }
.dk-search button:disabled:hover { background: var(--site-brand); }

.dk-tools { display: flex; align-items: center; gap: .4rem; flex: none; }
.dk-tool {
    position: relative;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--site-border);
    border-radius: var(--dk-radius-sm);
    background: var(--site-surface);
    color: var(--site-ink);
    text-decoration: none;
    font-size: .95rem;
    cursor: pointer;
}
.dk-tool:hover { border-color: var(--site-brand); color: var(--site-brand); }
.dk-tool__count {
    position: absolute;
    top: -6px; inset-inline-end: -6px;
    min-width: 18px; height: 18px;
    padding-inline: 4px;
    border-radius: 9px;
    background: var(--dk-gold);
    color: #fff;
    font-size: .68rem; font-weight: 700;
    display: grid; place-items: center;
}

/* Nav row */
.dk-nav { border-top: 1px solid var(--dk-line); background: var(--site-surface); }
.dk-nav__in {
    max-width: var(--dk-container);
    margin-inline: auto;
    padding-inline: 1.25rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    min-height: 48px;
}
.dk-nav__link {
    padding: .8rem .85rem;
    font-size: .92rem;
    font-weight: 500;
    color: var(--site-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.dk-nav__link:hover { color: var(--site-brand); }
.dk-nav__link.is-active { color: var(--site-brand); border-bottom-color: var(--site-brand); font-weight: 600; }
.dk-nav__spacer { flex: 1 1 auto; }
.dk-nav__cta {
    flex: none;
    padding: .48rem 1rem;
    border: 1px solid var(--dk-gold);
    border-radius: var(--dk-radius-sm);
    color: var(--dk-gold-strong);
    background: transparent;
    font-size: .86rem; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.dk-nav__cta:hover { background: var(--dk-gold); color: #fff; }

.dk-burger {
    display: none;
    width: 42px; height: 42px;
    place-items: center;
    border: 1px solid var(--site-border);
    border-radius: var(--dk-radius-sm);
    background: var(--site-surface);
    color: var(--site-ink);
    cursor: pointer;
}

/* Mobile drawer */
.dk-drawer {
    position: fixed; inset: 0;
    z-index: 1200;
    display: none;
}
.dk-drawer[open], .dk-drawer.is-open { display: block; }
.dk-drawer__veil { position: absolute; inset: 0; background: var(--site-overlay); border: 0; width: 100%; }
.dk-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 340px);
    background: var(--site-surface);
    padding: 1.1rem;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: .3rem;
}
.dk-drawer__link {
    padding: .8rem .6rem;
    border-radius: var(--dk-radius-sm);
    color: var(--site-ink);
    text-decoration: none;
    font-size: .95rem;
    display: flex; align-items: center; gap: .6rem;
}
.dk-drawer__link:hover { background: var(--site-bg-alt); color: var(--site-brand); }
.dk-drawer__sep { height: 1px; background: var(--dk-line); margin-block: .5rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.dk-hero { background: var(--site-bg); border-bottom: 1px solid var(--dk-line); }
.dk-hero__in {
    max-width: var(--dk-container);
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 3.75rem) 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}
.dk-hero h1 { margin-bottom: .9rem; }
.dk-hero p { font-size: 1rem; max-width: 44ch; }
.dk-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* Two covers, the second tucked behind — as in the mockup. */
.dk-hero__art { position: relative; min-height: 300px; }
.dk-hero__cover {
    position: absolute;
    width: 46%;
    aspect-ratio: 2 / 3;
    border-radius: var(--dk-radius);
    box-shadow: var(--site-shadow-lg);
    overflow: hidden;
    background: var(--site-bg-sunken);
}
.dk-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.dk-hero__cover--a { inset-inline-end: 6%; top: 0; z-index: 2; }
.dk-hero__cover--b { inset-inline-start: 8%; top: 16%; z-index: 1; transform: rotate(-4deg); }
.dk-hero__meta {
    position: absolute;
    inset-inline: 0; bottom: 0;
    padding: .55rem .7rem;
    background: linear-gradient(to top, rgba(16,28,23,.85), transparent);
    color: #fff;
    font-size: .76rem;
}

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.dk-trust { border-bottom: 1px solid var(--dk-line); background: var(--site-surface); }
.dk-trust__in {
    max-width: var(--dk-container);
    margin-inline: auto;
    padding-inline: 1.25rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dk-trust__item {
    padding: 1.4rem 1rem;
    text-align: center;
    border-inline-start: 1px solid var(--dk-line);
}
.dk-trust__item:first-child { border-inline-start: 0; }
.dk-trust__item i { font-size: 1.15rem; color: var(--site-brand); }
.dk-trust__t { display: block; margin-top: .55rem; font-size: .9rem; font-weight: 600; color: var(--site-ink-strong); }
.dk-trust__s { display: block; margin-top: .2rem; font-size: .78rem; color: var(--site-muted); }

/* ── Category grid ───────────────────────────────────────────────────────── */
.dk-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; }
.dk-cat {
    padding: 1.05rem .8rem;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius-sm);
    background: var(--site-surface);
    text-align: center;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}
.dk-cat:hover { border-color: var(--site-brand); background: var(--site-brand-soft); }
.dk-cat__n { display: block; font-size: .92rem; font-weight: 600; color: var(--site-ink-strong); }
.dk-cat__c { display: block; margin-top: .25rem; font-size: .78rem; color: var(--site-muted); }
.dk-cat--all { background: var(--site-brand); border-color: var(--site-brand); }
.dk-cat--all .dk-cat__n, .dk-cat--all .dk-cat__c { color: #fff; }
.dk-cat--all .dk-cat__c { color: rgba(255,255,255,.8); }
.dk-cat--all:hover { background: var(--site-brand-strong); }

/* ── Book card ───────────────────────────────────────────────────────────── */
.dk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.dk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dk-book {
    display: flex; flex-direction: column;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius);
    background: var(--site-surface);
    overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.dk-book:hover { border-color: var(--site-border-strong); box-shadow: var(--site-shadow); }
.dk-book__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--site-bg-sunken);
    overflow: hidden;
}
.dk-book__media img { width: 100%; height: 100%; object-fit: cover; }
.dk-book__badge {
    position: absolute;
    top: .6rem; inset-inline-start: .6rem;
    padding: .18rem .5rem;
    border-radius: 4px;
    background: var(--dk-gold);
    color: #fff;
    font-size: .72rem; font-weight: 700;
}
.dk-book__kind {
    position: absolute;
    bottom: .6rem; inset-inline-end: .6rem;
    padding: .16rem .45rem;
    border-radius: 4px;
    background: rgba(16,28,23,.72);
    color: #fff;
    font-size: .7rem;
}
.dk-book__body { padding: .8rem; display: flex; flex-direction: column; gap: .3rem; flex: 1 1 auto; }
.dk-book__title {
    font-size: .93rem; font-weight: 600; line-height: 1.4;
    color: var(--site-ink-strong); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    /* Always two lines tall, even when the title only needs one. The clamp
       already stopped a long title running past two lines, but a short one
       collapsed to a single line and pulled the category, price and button up
       with it — so in a row of books the details sat at different heights
       depending on how long each title happened to be. Reserving the space
       costs one empty line on short titles and keeps every card's baseline. */
    min-height: calc(2 * 1.4 * .93rem);
}
.dk-book__title:hover { color: var(--site-brand); }
.dk-book__cat { font-size: .78rem; color: var(--site-muted); }
.dk-book__author { font-size: .78rem; color: var(--site-muted); }
.dk-book__price { display: flex; align-items: baseline; gap: .45rem; margin-top: .2rem; }
.dk-book__now { font-size: 1.02rem; font-weight: 700; color: var(--dk-gold-strong); }
.dk-book__was { font-size: .82rem; color: var(--site-faint); text-decoration: line-through; }
.dk-book__foot { padding: 0 .8rem .8rem; }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.dk-cta { background: var(--site-brand); color: #fff; }
.dk-cta__in {
    max-width: 760px;
    margin-inline: auto;
    padding: clamp(2.25rem, 5vw, 3.25rem) 1.25rem;
    text-align: center;
}
.dk-cta h2 { color: #fff; margin-bottom: .8rem; }
.dk-cta p { color: rgba(255,255,255,.85); }
.dk-cta .dk__eyebrow { color: var(--dk-gold); }
.dk-cta__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.dk-cta__note { margin-top: 1.1rem; font-size: .82rem; color: rgba(255,255,255,.7); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.dk-foot { background: var(--dk-green-ink); color: rgba(255,255,255,.78); }
.dk-foot__in {
    max-width: var(--dk-container);
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3rem) 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2rem;
}
.dk-foot h3 { color: #fff; font-size: .98rem; margin-bottom: .9rem; }
.dk-foot p { color: rgba(255,255,255,.7); font-size: .86rem; }
.dk-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.dk-foot a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .86rem; }
.dk-foot a:hover { color: #fff; text-decoration: underline; }
/* "عضو اتحاد الناشرين المصريين" and "الدفع عند الاستلام" are statements of
   fact, not controls. A border-and-radius chip and a solid brand-green fill
   both read as buttons, so readers tried to click them. Kept as quiet labels:
   an icon-weight rule on the inline start instead of an enclosing box, no
   radius, no fill that competes with the real footer links. */
.dk-foot__badge {
    display: inline-block; margin-top: 1rem;
    padding: .2rem 0 .2rem .7rem;
    border: 0;
    border-inline-start: 2px solid rgba(255,255,255,.28);
    border-radius: 0;
    font-size: .78rem;
}
.dk-foot__social { display: flex; gap: .5rem; margin-top: 1rem; }
.dk-foot__social a {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
}
.dk-foot__social a:hover { background: var(--dk-gold); }
.dk-foot__cod {
    display: inline-block; margin-top: .9rem;
    padding: .2rem 0 .2rem .7rem;
    border-radius: 0;
    border-inline-start: 2px solid var(--dk-gold);
    background: transparent;
    color: rgba(255,255,255,.88); font-size: .8rem; font-weight: 600;
}
.dk-foot__bar {
    border-top: 1px solid rgba(255,255,255,.12);
}
.dk-foot__bar-in {
    max-width: var(--dk-container);
    margin-inline: auto;
    /* Was .95rem top and bottom, which put the legal line almost on the hairline
       above it and made the bar read as a clipped edge rather than a band. */
    padding: 1.5rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    font-size: .8rem; color: rgba(255,255,255,.6);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .dk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dk-grid, .dk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dk-foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .dk-hero__in { grid-template-columns: minmax(0, 1fr); }
    /* MKT-07: the covers sat too low under the text on a phone. Less reserved
       height and a tighter gap lifts them into view without cropping. */
    .dk-hero__art { order: -1; min-height: 210px; margin-bottom: -.5rem; }
    .dk-hero__in { gap: 1.25rem; }
    .dk-trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dk-trust__item:nth-child(3) { border-inline-start: 0; }
    .dk-nav { display: none; }
    .dk-burger { display: grid; }
    .dk-search { order: 3; flex-basis: 100%; }
    .dk-head__bar { flex-wrap: wrap; }
}

@media (max-width: 620px) {
    .dk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dk-grid, .dk-grid--4, .dk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dk-trust__in { grid-template-columns: minmax(0, 1fr); }
    .dk-trust__item { border-inline-start: 0; border-top: 1px solid var(--dk-line); }
    .dk-trust__item:first-child { border-top: 0; }
    .dk-foot__in { grid-template-columns: minmax(0, 1fr); }
    .dk-foot__bar-in { flex-direction: column; text-align: center; }
    .dk__head { flex-direction: column; align-items: flex-start; }
}

/*
|--------------------------------------------------------------------------
| Listing: breadcrumb, facet sidebar, toolbar, pagination
|--------------------------------------------------------------------------
*/
.dk-crumb { padding-block: .9rem; font-size: .82rem; color: var(--site-muted); }
.dk-crumb a { color: var(--site-muted); text-decoration: none; }
.dk-crumb a:hover { color: var(--site-brand); }
.dk-crumb span { color: var(--site-ink-strong); font-weight: 600; }

.dk-listing { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.75rem; align-items: start; }

.dk-facets {
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius);
    background: var(--site-surface);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}
.dk-facets__head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--dk-line);
}
.dk-facets__head h2 { font-size: .98rem; }
.dk-facets__clear { font-size: .8rem; color: var(--dk-gold-strong); text-decoration: none; }
.dk-facets__clear:hover { text-decoration: underline; }
.dk-facet { padding: .9rem 1rem; border-bottom: 1px solid var(--dk-line); }
.dk-facet:last-child { border-bottom: 0; }
.dk-facet__t { display: block; font-size: .86rem; font-weight: 700; color: var(--site-ink-strong); margin-bottom: .6rem; }
.dk-facet__row {
    display: flex; align-items: center; gap: .55rem;
    padding-block: .3rem;
    font-size: .87rem;
    color: var(--site-ink);
    cursor: pointer;
}
.dk-facet__row input { accent-color: var(--site-brand); width: 15px; height: 15px; flex: none; cursor: pointer; }
.dk-facet__row span:first-of-type { flex: 1 1 auto; }
.dk-facet__n { color: var(--site-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.dk-facet__row--off { opacity: .45; }

.dk-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    padding-block: .25rem 1rem;
}
.dk-toolbar__count { font-size: .87rem; color: var(--site-muted); }
.dk-toolbar__spacer { flex: 1 1 auto; }
/* The sort form is as wide as its longest option unless it is told it may
   shrink — a flex item's min-width is auto, and a <select> reports its widest
   option as min-content. That alone pushed the listing 26px past a 390px
   viewport. */
.dk-toolbar > form { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.dk-toolbar label { font-size: .84rem; color: var(--site-muted); display: inline-flex; align-items: center; gap: .4rem; min-width: 0; max-width: 100%; }
.dk-toolbar select {
    min-width: 0; max-width: 100%;
    padding: .45rem 1.9rem .45rem .6rem;
    padding-inline: .6rem 1.9rem;
    border: 1px solid var(--site-border);
    border-radius: var(--dk-radius-sm);
    background: var(--site-surface);
    color: var(--site-ink);
    font: inherit; font-size: .84rem;
    cursor: pointer;
}

.dk-chips { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1rem; }
.dk-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid var(--dk-line);
    border-radius: 999px;
    background: var(--site-bg-alt);
    font-size: .8rem;
    color: var(--site-ink);
    text-decoration: none;
}
.dk-chip:hover { border-color: var(--site-brand); color: var(--site-brand); }
.dk-chip i { font-size: .7rem; opacity: .7; }
.dk-chips__clear { font-size: .8rem; color: var(--dk-gold-strong); text-decoration: underline; }

.dk-pager { display: flex; justify-content: center; margin-top: 1.75rem; }
.dk-pager .pagination { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.dk-pager .page-item .page-link,
.dk-pager .page-link {
    display: grid; place-items: center;
    min-width: 38px; height: 38px;
    padding-inline: .6rem;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius-sm);
    background: var(--site-surface);
    color: var(--site-ink);
    font-size: .86rem;
    text-decoration: none;
}
.dk-pager .page-item.active .page-link { background: var(--site-brand); border-color: var(--site-brand); color: #fff; }
.dk-pager .page-item.disabled .page-link { opacity: .45; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.dk-empty { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; }
.dk-empty__icon {
    width: 62px; height: 62px;
    margin-inline: auto; margin-bottom: 1.1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--site-bg-alt);
    color: var(--site-muted);
    font-size: 1.3rem;
}
.dk-empty h1, .dk-empty h2 { margin-bottom: .6rem; }
.dk-empty__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.dk-empty__tags { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.dk-empty__tags a {
    padding: .35rem .75rem;
    border: 1px solid var(--dk-line);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--site-ink);
    text-decoration: none;
    background: var(--site-surface);
}
.dk-empty__tags a:hover { border-color: var(--site-brand); color: var(--site-brand); }

@media (max-width: 980px) {
    .dk-listing { grid-template-columns: minmax(0, 1fr); }
    .dk-facets { position: static; }
}

/*
|--------------------------------------------------------------------------
| Book detail
|--------------------------------------------------------------------------
*/
.dk-pdp { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

.dk-pdp__gallery { position: sticky; top: 1rem; }
.dk-pdp__main {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius);
    overflow: hidden;
    background: var(--site-bg-sunken);
}
.dk-pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.dk-pdp__badge {
    position: absolute; top: .8rem; inset-inline-start: .8rem;
    padding: .28rem .65rem; border-radius: 5px;
    background: var(--dk-gold); color: #fff; font-size: .82rem; font-weight: 700;
}
.dk-pdp__thumbs { display: flex; gap: .55rem; margin-top: .7rem; }
.dk-pdp__thumb {
    width: 74px; aspect-ratio: 3 / 4;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius-sm);
    overflow: hidden; background: var(--site-bg-sunken);
    cursor: pointer; padding: 0;
}
.dk-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dk-pdp__thumb.is-active { border-color: var(--site-brand); border-width: 2px; }

.dk-pdp h1 { font-size: clamp(1.55rem, 3vw, 2.3rem); margin-block: .3rem .5rem; }
.dk-pdp__by { font-size: .9rem; color: var(--site-muted); }
.dk-pdp__by strong { color: var(--site-ink-strong); font-weight: 600; }

.dk-pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin-block: 1.1rem .5rem; }
.dk-pdp__now { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; color: var(--site-ink-strong); }
.dk-pdp__was { font-size: 1rem; color: var(--site-faint); text-decoration: line-through; }
.dk-pdp__save {
    padding: .25rem .6rem; border-radius: 999px;
    background: var(--dk-gold); color: #fff; font-size: .8rem; font-weight: 600;
}
.dk-pdp__stock { font-size: .88rem; color: var(--site-success); font-weight: 600; }
.dk-pdp__stock--out { color: var(--site-danger); }

.dk-nudge {
    margin-block: 1.1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--dk-gold);
    border-radius: var(--dk-radius-sm);
    background: var(--dk-gold-soft);
    color: var(--dk-gold-strong);
    font-size: .88rem; font-weight: 600;
}

.dk-pdp__buy { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block: 1.1rem; }
.dk-qty { display: inline-flex; align-items: center; border: 1px solid var(--site-border); border-radius: var(--dk-radius-sm); overflow: hidden; }
.dk-qty button {
    width: 38px; height: 42px;
    border: 0; background: var(--site-surface); color: var(--site-ink);
    font-size: 1rem; cursor: pointer;
}
.dk-qty button:hover { background: var(--site-bg-alt); }
.dk-qty input {
    width: 54px; height: 42px;
    border: 0; border-inline: 1px solid var(--site-border);
    text-align: center; font: inherit; font-size: .95rem;
    background: var(--site-surface); color: var(--site-ink);
    -moz-appearance: textfield;
}
.dk-qty input::-webkit-outer-spin-button, .dk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dk-fav {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--site-border); border-radius: var(--dk-radius-sm);
    background: var(--site-surface); color: var(--site-ink);
    text-decoration: none;
}
.dk-fav:hover { border-color: var(--site-danger); color: var(--site-danger); }

.dk-mini {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
    overflow: hidden; margin-top: 1.2rem;
}
.dk-mini__i { padding: .95rem .8rem; text-align: center; border-inline-start: 1px solid var(--dk-line); }
.dk-mini__i:first-child { border-inline-start: 0; }
.dk-mini__i i { color: var(--site-brand); }
.dk-mini__t { display: block; margin-top: .4rem; font-size: .84rem; font-weight: 600; color: var(--site-ink-strong); }
.dk-mini__s { display: block; font-size: .76rem; color: var(--site-muted); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.dk-tabs { border-bottom: 1px solid var(--dk-line); display: flex; gap: .25rem; margin-bottom: 1.4rem; }
.dk-tabs button {
    padding: .8rem 1rem;
    border: 0; border-bottom: 2px solid transparent;
    background: none; color: var(--site-muted);
    font: inherit; font-size: .92rem; font-weight: 600;
    cursor: pointer;
}
.dk-tabs button:hover { color: var(--site-brand); }
.dk-tabs button.is-active { color: var(--site-brand); border-bottom-color: var(--site-brand); }
.dk-panel[hidden] { display: none; }
.dk-panel p + p { margin-top: .9rem; }

.dk-specs { width: 100%; border-collapse: collapse; border: 1px solid var(--dk-line); border-radius: var(--dk-radius); overflow: hidden; }
.dk-specs caption {
    caption-side: top; text-align: start;
    padding: .8rem 1rem; background: var(--site-bg-alt);
    font-size: .9rem; font-weight: 700; color: var(--site-ink-strong);
    border-bottom: 1px solid var(--dk-line);
}
.dk-specs th, .dk-specs td { padding: .7rem 1rem; font-size: .88rem; text-align: start; border-top: 1px solid var(--dk-line); }
.dk-specs tr:first-child th, .dk-specs tr:first-child td { border-top: 0; }
.dk-specs th { color: var(--site-muted); font-weight: 500; width: 42%; }
.dk-specs td { color: var(--site-ink-strong); font-weight: 600; }

@media (max-width: 900px) {
    .dk-pdp { grid-template-columns: minmax(0, 1fr); }
    .dk-pdp__gallery { position: static; max-width: 420px; margin-inline: auto; }
}

/*
|--------------------------------------------------------------------------
| Cart, checkout, order summary
|--------------------------------------------------------------------------
*/
.dk-cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }

.dk-lines { border: 1px solid var(--dk-line); border-radius: var(--dk-radius); overflow: hidden; background: var(--site-surface); }
.dk-lines__head {
    display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px 44px;
    gap: .75rem; padding: .8rem 1rem;
    background: var(--site-bg-alt); border-bottom: 1px solid var(--dk-line);
    font-size: .82rem; font-weight: 700; color: var(--site-muted);
}
.dk-line {
    display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px 44px;
    gap: .75rem; align-items: center;
    padding: 1rem; border-top: 1px solid var(--dk-line);
}
.dk-lines .dk-line:first-of-type { border-top: 0; }
.dk-line__book { display: flex; gap: .85rem; align-items: flex-start; min-width: 0; }
.dk-line__cover {
    width: 58px; flex: none; aspect-ratio: 3 / 4;
    border-radius: var(--dk-radius-sm); overflow: hidden; background: var(--site-bg-sunken);
}
.dk-line__cover img { width: 100%; height: 100%; object-fit: cover; }
.dk-line__t { font-size: .92rem; font-weight: 600; color: var(--site-ink-strong); text-decoration: none; display: block; }
.dk-line__t:hover { color: var(--site-brand); }
.dk-line__m { font-size: .8rem; color: var(--site-muted); margin-top: .2rem; }
.dk-line__save { font-size: .8rem; color: var(--dk-gold-strong); font-weight: 600; }
.dk-line__total { font-size: 1rem; font-weight: 700; color: var(--site-ink-strong); text-align: start; }
.dk-line__rm {
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: var(--dk-radius-sm);
    background: transparent; color: var(--site-danger);
    cursor: pointer; text-decoration: none;
}
.dk-line__rm:hover { background: var(--site-danger-soft); }
.dk-cart__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; flex-wrap: wrap; }
.dk-cart__saved { font-size: .88rem; color: var(--dk-gold-strong); font-weight: 600; }

/* ── Order summary ───────────────────────────────────────────────────────── */
.dk-sum { border: 1px solid var(--dk-line); border-radius: var(--dk-radius); overflow: hidden; background: var(--site-surface); position: sticky; top: 1rem; }
.dk-sum__head { padding: .9rem 1.1rem; background: var(--site-brand); color: #fff; }
.dk-sum__head h2 { color: #fff; font-size: 1rem; }
.dk-sum__body { padding: 1.1rem; }
.dk-sum__items { display: grid; gap: .7rem; margin-bottom: 1rem; }
.dk-sum__item { display: flex; align-items: center; gap: .7rem; }
.dk-sum__thumb {
    width: 38px; flex: none; aspect-ratio: 3 / 4;
    border-radius: 4px; overflow: hidden; background: var(--site-bg-sunken);
    position: relative;
}
.dk-sum__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dk-sum__thumb span {
    position: absolute; top: -5px; inset-inline-end: -5px;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--dk-gold); color: #fff;
    font-size: .65rem; font-weight: 700;
    display: grid; place-items: center;
}
.dk-sum__iname { flex: 1 1 auto; min-width: 0; font-size: .85rem; font-weight: 600; color: var(--site-ink-strong); }
.dk-sum__icat { font-size: .76rem; color: var(--site-muted); font-weight: 400; }
.dk-sum__iprice { font-size: .88rem; font-weight: 700; white-space: nowrap; }

.dk-sum__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; font-size: .9rem; }
.dk-sum__row span:last-child { font-weight: 600; color: var(--site-ink-strong); }
.dk-sum__row--total {
    margin-top: .6rem; padding-top: .8rem;
    border-top: 2px solid var(--site-ink-strong);
    font-size: 1.05rem; font-weight: 700;
}
.dk-sum__row--total span:last-child { font-size: 1.25rem; }
.dk-sum__muted span:last-child { color: var(--site-muted); font-weight: 500; }

/* While the shipping figure is being re-quoted after a governorate change.
   Dimmed rather than blanked: a number that vanishes reads as an error. */
[data-dk-sum-ship].is-busy { opacity: .45; transition: opacity .12s ease; }

/* Free-shipping meter */
.dk-meter { margin-block: .2rem 1rem; padding: .8rem; border-radius: var(--dk-radius-sm); background: var(--dk-gold-soft); }
.dk-meter__t { font-size: .85rem; font-weight: 700; color: var(--dk-gold-strong); }
.dk-meter__bar { height: 7px; border-radius: 4px; background: rgba(184,137,74,.22); margin-block: .55rem .35rem; overflow: hidden; }
.dk-meter__fill { height: 100%; border-radius: 4px; background: var(--dk-gold); }
.dk-meter__ends { display: flex; justify-content: space-between; font-size: .74rem; color: var(--dk-gold-strong); }
.dk-meter--done { background: var(--site-success-soft); }
.dk-meter--done .dk-meter__t { color: var(--site-success); }
.dk-meter--done .dk-meter__fill { background: var(--site-success); }
.dk-meter--done .dk-meter__ends { color: var(--site-success); }

.dk-coupon { display: flex; gap: .5rem; margin-top: 1rem; }
.dk-coupon input {
    flex: 1 1 auto; min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--site-border); border-radius: var(--dk-radius-sm);
    background: var(--site-surface); color: var(--site-ink);
    font: inherit; font-size: .86rem;
}
.dk-coupon button {
    flex: none; padding-inline: 1rem;
    border: 1px solid var(--site-border); border-radius: var(--dk-radius-sm);
    background: var(--site-bg-alt); color: var(--site-ink);
    font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.dk-coupon button:hover { background: var(--site-border); }

.dk-promises { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.dk-promises li { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; color: var(--site-muted); }
.dk-promises i { color: var(--site-success); margin-top: .2rem; flex: none; }
.dk-promises strong { color: var(--site-ink-strong); font-weight: 600; }

/* ── Checkout ────────────────────────────────────────────────────────────── */
.dk-cohead { border-bottom: 1px solid var(--dk-line); background: var(--site-surface); }
.dk-cohead__in {
    max-width: var(--dk-container); margin-inline: auto;
    padding: .9rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.dk-cohead__safe { font-size: .9rem; font-weight: 600; color: var(--site-brand); display: inline-flex; align-items: center; gap: .45rem; }
.dk-cohead__back { font-size: .86rem; color: var(--site-muted); text-decoration: none; }
.dk-cohead__back:hover { color: var(--site-brand); }

.dk-steps { background: var(--dk-wash); border-bottom: 1px solid var(--dk-line); }
.dk-steps__in {
    max-width: var(--dk-container); margin-inline: auto;
    padding: .9rem 1.25rem;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    flex-wrap: wrap;
}
.dk-step { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--site-muted); }
.dk-step__n {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--site-border); color: var(--site-ink);
    font-size: .76rem; font-weight: 700;
}
.dk-step.is-done  { color: var(--site-brand); }
.dk-step.is-done  .dk-step__n { background: var(--site-brand); color: #fff; }
.dk-step.is-here  { color: var(--site-ink-strong); font-weight: 600; }
.dk-step.is-here  .dk-step__n { background: var(--site-brand); color: #fff; }
.dk-steps__sep { width: 46px; height: 1px; background: var(--site-border-strong); }

.dk-card { border: 1px solid var(--dk-line); border-radius: var(--dk-radius); background: var(--site-surface); margin-bottom: 1.25rem; }
.dk-card__head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--dk-line); }
.dk-card__head h2 { font-size: 1rem; }
.dk-card__n {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--site-brand); color: #fff; font-size: .76rem; font-weight: 700; flex: none;
}
.dk-card__body { padding: 1.1rem; }

.dk-field { margin-bottom: 1rem; }
.dk-field > label { display: block; font-size: .85rem; font-weight: 600; color: var(--site-ink-strong); margin-bottom: .4rem; }
.dk-field > label .req { color: var(--site-danger); }
.dk-field input, .dk-field select, .dk-field textarea {
    width: 100%;
    padding: .68rem .8rem;
    border: 1px solid var(--site-border); border-radius: var(--dk-radius-sm);
    background: var(--site-surface); color: var(--site-ink);
    font: inherit; font-size: .92rem;
}
.dk-field input:focus, .dk-field select:focus, .dk-field textarea:focus {
    outline: 2px solid var(--site-brand-soft); outline-offset: -1px; border-color: var(--site-brand);
}
.dk-field textarea { min-height: 82px; resize: vertical; }
.dk-field__hint { display: block; margin-top: .3rem; font-size: .78rem; color: var(--site-muted); }
.dk-field__err { display: block; margin-top: .3rem; font-size: .78rem; color: var(--site-danger); }
.dk-fields2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }

.dk-pay {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: 1rem;
    border: 2px solid var(--site-brand); border-radius: var(--dk-radius-sm);
    background: var(--site-brand-soft);
    cursor: pointer;
}
.dk-pay input { margin-top: .25rem; accent-color: var(--site-brand); width: 17px; height: 17px; flex: none; }
.dk-pay__t { display: block; font-size: .95rem; font-weight: 700; color: var(--site-ink-strong); }
.dk-pay__s { display: block; margin-top: .25rem; font-size: .84rem; color: var(--site-muted); }
.dk-pay__free {
    display: inline-block; margin-top: .5rem;
    padding: .2rem .55rem; border-radius: 4px;
    background: var(--site-brand); color: #fff; font-size: .76rem; font-weight: 600;
}

.dk-more { border: 1px dashed var(--site-border-strong); border-radius: var(--dk-radius-sm); padding: .8rem 1rem; }
.dk-more summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--site-ink-strong); }
.dk-more[open] summary { margin-bottom: .9rem; }

.dk-sum__cta { margin-top: 1rem; }
.dk-sum__ctanote { display: block; margin-top: .5rem; text-align: center; font-size: .8rem; color: var(--site-muted); }

@media (max-width: 900px) {
    .dk-cart { grid-template-columns: minmax(0, 1fr); }
    .dk-sum { position: static; }
    .dk-lines__head { display: none; }
    .dk-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "book book" "qty total" "rm rm"; row-gap: .7rem; }
    .dk-line__book  { grid-area: book; }
    .dk-line__qty   { grid-area: qty; }
    .dk-line__total { grid-area: total; text-align: end; }
    .dk-line__rmw   { grid-area: rm; }
    .dk-fields2 { grid-template-columns: minmax(0, 1fr); }
}

/*
|--------------------------------------------------------------------------
| Order confirmation and tracking
|--------------------------------------------------------------------------
*/
.dk-done { text-align: center; padding: clamp(2rem, 5vw, 3.25rem) 1.25rem; background: var(--dk-wash); border-bottom: 1px solid var(--dk-line); }
.dk-done__tick {
    width: 62px; height: 62px; margin-inline: auto; margin-bottom: 1.2rem;
    border-radius: 50%; background: var(--site-success); color: #fff;
    display: grid; place-items: center; font-size: 1.5rem;
}
.dk-done h1 { margin-bottom: .6rem; }
.dk-done__ref {
    display: inline-block; margin-top: 1.1rem;
    padding: .6rem 1.2rem;
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm);
    background: var(--site-surface);
    font-size: .95rem; font-weight: 600; color: var(--site-ink-strong);
}
.dk-done__ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }

.dk-payband { background: var(--dk-gold); color: #fff; text-align: center; padding: 1.3rem 1.25rem; }
/* On the tracking card the band is a single row — label start, amount end —
   because the page already leads with the timeline. On the confirmation page
   it is the hero of the screen, so it stays stacked and centred. */
.dk-payband--row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; text-align: start; padding: 1rem 1.25rem;
    border-radius: var(--dk-radius-sm);
}
.dk-payband--row .dk-payband__a { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); white-space: nowrap; }
.dk-payband__l { display: block; font-size: .84rem; opacity: .9; }
.dk-payband__a { display: block; margin-block: .25rem; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.dk-payband__s { display: block; font-size: .82rem; opacity: .92; }

.dk-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-block: 1.5rem 2rem; }
.dk-track__s { text-align: center; position: relative; }
.dk-track__n {
    width: 30px; height: 30px; margin-inline: auto;
    border-radius: 50%; display: grid; place-items: center;
    background: var(--site-bg-alt); color: var(--site-muted);
    font-size: .8rem; font-weight: 700;
    position: relative; z-index: 1;
}
.dk-track__s.is-done .dk-track__n { background: var(--site-brand); color: #fff; }
.dk-track__s.is-here .dk-track__n { background: var(--site-brand); color: #fff; box-shadow: 0 0 0 4px var(--site-brand-soft); }
/* The connector sits behind the markers and stops at the row's edges. */
.dk-track__s::before {
    content: ''; position: absolute; top: 15px; height: 2px;
    background: var(--site-border); inset-inline-start: 50%; width: 100%;
}
.dk-track__s:last-child::before { display: none; }
.dk-track__s.is-done::before { background: var(--site-brand); }
.dk-track__t { display: block; margin-top: .5rem; font-size: .84rem; font-weight: 600; color: var(--site-ink-strong); }
.dk-track__d { display: block; font-size: .76rem; color: var(--site-muted); }

.dk-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.dk-panelcard { border: 1px solid var(--dk-line); border-radius: var(--dk-radius); background: var(--site-surface); overflow: hidden; }
.dk-panelcard__h { padding: .85rem 1.05rem; background: var(--site-bg-alt); border-bottom: 1px solid var(--dk-line); font-size: .92rem; font-weight: 700; color: var(--site-ink-strong); }
.dk-panelcard__b { padding: 1.05rem; }
.dk-kv { display: grid; gap: .5rem; font-size: .88rem; }
.dk-kv div { display: flex; gap: .5rem; }
.dk-kv dt, .dk-kv .k { color: var(--site-muted); min-width: 84px; }
.dk-kv dd, .dk-kv .v { margin: 0; color: var(--site-ink-strong); font-weight: 600; }

.dk-invite { border-radius: var(--dk-radius); background: var(--site-brand); color: #fff; padding: 1.25rem; }
.dk-invite h3 { color: #fff; margin-bottom: .4rem; }
.dk-invite p { color: rgba(255,255,255,.85); font-size: .86rem; }
.dk-invite .dk-btn { margin-top: .9rem; }

/* The checkout chrome on a phone.
   All three items on one row squeezed "إتمام طلب آمن" onto three lines and
   "رجوع للسلة" onto two. The design puts the lock badge on its own centred
   row under a hairline, which is what this does. */
@media (max-width: 620px) {
    .dk-cohead__in { flex-wrap: wrap; row-gap: 0; column-gap: .75rem; }
    .dk-cohead__back { order: 2; margin-inline-start: auto; white-space: nowrap; }
    .dk-cohead__safe {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px solid var(--dk-line);
    }
    /* Three steps and two connectors have to fit 390px minus padding. */
    .dk-steps__in { gap: .35rem; padding-inline: .75rem; }
    .dk-step { font-size: .76rem; gap: .35rem; }
    .dk-step__n { width: 20px; height: 20px; font-size: .68rem; }
    .dk-steps__sep { width: 14px; }
}

@media (max-width: 780px) {
    .dk-two { grid-template-columns: minmax(0, 1fr); }

    .dk-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .dk-track__s {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: .85rem;
        text-align: start;
        padding-bottom: 1.15rem;
    }
    .dk-track__s:last-child { padding-bottom: 0; }
    .dk-track__n { grid-row: 1 / span 2; margin-inline: 0; }
    .dk-track__s::before {
        top: 30px; inset-inline-start: 14px;
        width: 2px; height: 100%;
    }
    [dir="ltr"] .dk-track__s::before { inset-inline-start: 14px; }
}

/* ── About ───────────────────────────────────────────────────────────────── */
.dk-about {
    background: var(--site-bg-alt);
    border-bottom: 1px solid var(--dk-line);
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.25rem) 1.25rem clamp(2rem, 5vw, 3rem);
}
.dk-about__in { max-width: 640px; margin-inline: auto; }
.dk-about h1 {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.35;
    color: var(--site-brand);
    margin-bottom: .9rem;
}
.dk-about p { color: var(--site-muted); line-height: 1.9; }

/* The counted facts. Four cells, hairline dividers, no boxes — the design
   deliberately reads as one strip rather than four cards. */
.dk-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--dk-line);
    background: var(--site-surface);
}
.dk-stats__i {
    padding: clamp(1.4rem, 3vw, 2.1rem) 1rem;
    text-align: center;
    border-inline-start: 1px solid var(--dk-line);
}
.dk-stats__i:first-child { border-inline-start: 0; }
.dk-stats__n {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--site-brand);
    line-height: 1.2;
}
.dk-stats__l { display: block; margin-top: .5rem; font-size: .82rem; color: var(--site-muted); }

.dk-prose { max-width: 780px; }
.dk-prose p { color: var(--site-muted); line-height: 2; margin-bottom: 1.1rem; }
.dk-prose strong { color: var(--site-ink-strong); font-weight: 600; }
.dk-quote {
    margin: 1.6rem 0 0;
    padding: 1.1rem 1.25rem;
    border-inline-start: 3px solid var(--dk-gold);
    background: var(--dk-gold-soft);
    border-radius: 0 var(--dk-radius-sm) var(--dk-radius-sm) 0;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.95;
    color: var(--dk-green-deep);
}
[dir="ltr"] .dk-quote { border-radius: var(--dk-radius-sm) 0 0 var(--dk-radius-sm); }

/* The two tracks — reader and author. Coloured header band, then the body. */
.dk-lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1.4rem; }
.dk-lane {
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius);
    overflow: hidden;
    background: var(--site-surface);
    display: flex; flex-direction: column;
}
.dk-lane__h { padding: .9rem 1.1rem; color: #fff; }
.dk-lane--reader .dk-lane__h { background: var(--site-brand); }
.dk-lane--author .dk-lane__h { background: var(--dk-gold); }
.dk-lane__t { display: block; font-size: 1.02rem; font-weight: 700; }
.dk-lane__s { display: block; font-size: .8rem; color: rgba(255,255,255,.85); margin-top: .15rem; }
.dk-lane__b { padding: 1.1rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.dk-lane__b p { font-size: .88rem; color: var(--site-muted); line-height: 1.95; margin: 0; }
.dk-lane__more { font-size: .86rem; font-weight: 600; color: var(--dk-gold-strong); text-decoration: none; margin-top: auto; }
.dk-lane__more:hover { text-decoration: underline; }

/* The commitments. Three cards, icon top-start, unlike .dk-mini's centred row. */
.dk-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.dk-val {
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius);
    background: var(--site-surface);
    padding: 1.2rem;
}
.dk-val i { color: var(--site-brand); font-size: 1.1rem; }
.dk-val__t { display: block; margin: .7rem 0 .4rem; font-weight: 700; color: var(--site-ink-strong); }
.dk-val p { font-size: .84rem; color: var(--site-muted); line-height: 1.9; margin: 0; }

/* ── Publish your book ──────────────────────────────────────────────────── */
.dk-steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; counter-reset: dkstep; }
.dk-steps4 > li {
    list-style: none;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius);
    background: var(--site-surface);
    padding: 1.2rem;
}
.dk-steps4 > li::before {
    counter-increment: dkstep;
    content: counter(dkstep, arabic-indic);
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--dk-gold-soft); color: var(--dk-gold-strong);
    font-weight: 700; font-size: .9rem;
    margin-bottom: .7rem;
}
[dir="ltr"] .dk-steps4 > li::before { content: counter(dkstep); }
.dk-steps4 strong { display: block; margin-bottom: .35rem; color: var(--site-ink-strong); }
.dk-steps4 p { font-size: .84rem; color: var(--site-muted); line-height: 1.9; margin: 0; }

/* ── Tracking form ──────────────────────────────────────────────────────── */
.dk-trackhead {
    background: var(--site-bg-alt);
    border-bottom: 1px solid var(--dk-line);
    padding: clamp(2.25rem, 5vw, 3.25rem) 1.25rem;
    text-align: center;
}
.dk-trackhead h1 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); color: var(--site-brand); margin-bottom: .5rem; }
.dk-trackhead p { color: var(--site-muted); }
.dk-trackform { max-width: 660px; margin: 1.6rem auto 0; text-align: start; }
.dk-trackform__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
/* Track and WhatsApp share the row and each fill half of it; below 640px they
   stack, WhatsApp underneath, because the form is what the page is for. */
.dk-trackform__cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; margin-top: .7rem; }
.dk-trackform__cta .dk-btn { margin-top: 0; width: 100%; }

/* The "ask about this order" strip, between the timeline and the amount due. */
.dk-track__ask {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; margin-top: 1.3rem; padding: .85rem 1rem;
    background: color-mix(in srgb, #25d366 10%, var(--site-bg));
    border: 1px solid color-mix(in srgb, #25d366 35%, transparent);
    border-radius: var(--dk-radius, 12px);
}
.dk-track__ask > span { font-size: .88rem; font-weight: 600; }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.dk-404 { text-align: center; padding: clamp(3rem, 8vw, 6rem) 1.25rem; }
.dk-404__n {
    display: block;
    font-size: clamp(3.5rem, 11vw, 6.5rem);
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--site-brand) 22%, var(--site-bg));
    margin-bottom: .8rem;
}
.dk-404 h1 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--site-brand); margin-bottom: .6rem; }
.dk-404 p { color: var(--site-muted); max-width: 520px; margin-inline: auto; }

@media (max-width: 980px) {
    .dk-lanes, .dk-vals { grid-template-columns: minmax(0, 1fr); }
    .dk-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .dk-stats { grid-template-columns: minmax(0, 1fr); }
    .dk-stats__i { border-inline-start: 0; }
    .dk-stats__i + .dk-stats__i { border-top: 1px solid var(--dk-line); }
    .dk-steps4 { grid-template-columns: minmax(0, 1fr); }
    .dk-trackform__row { grid-template-columns: minmax(0, 1fr); }
    .dk-trackform__cta { grid-template-columns: minmax(0, 1fr); }
    .dk-track__ask { flex-direction: column; align-items: stretch; text-align: center; }
}

/* The terms line. Left to the browser these two links came out default blue
   and underlined, the one off-brand thing on the checkout. */
.dk-agree { font-size: .86rem; color: var(--site-muted); }
.dk-agree a { color: var(--site-brand); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.dk-agree a:hover { color: var(--site-brand-strong); }

/* ── Author page ─────────────────────────────────────────────────────────── */
.dk-author {
    background: var(--site-bg-alt);
    border-bottom: 1px solid var(--dk-line);
    padding-block: clamp(2rem, 4vw, 3rem);
}
.dk-author__in { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: flex-start; }
.dk-author__photo {
    flex: none;
    width: clamp(96px, 12vw, 148px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--site-surface);
    border: 3px solid var(--site-surface);
    box-shadow: 0 2px 14px rgba(22, 58, 45, .12);
}
.dk-author__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-author__body { min-width: 0; }
.dk-author h1 { font-size: clamp(1.5rem, 3vw, 2.15rem); color: var(--site-brand); margin-bottom: .3rem; }
.dk-author__alt { font-size: .9rem; color: var(--site-muted); margin-bottom: .4rem; }
.dk-author__count { font-size: .88rem; font-weight: 600; color: var(--dk-gold-strong); }
.dk-author__bio { margin-top: .9rem; max-width: 70ch; color: var(--site-muted); line-height: 1.95; }

@media (max-width: 640px) {
    .dk-author__in { flex-direction: column; align-items: center; text-align: center; }
    .dk-author__bio { text-align: start; }
}

/* The author line on a card links to their page; keep it quiet until hovered
   so the card still reads title-first. */
.dk-book__author a { color: inherit; text-decoration: none; }
.dk-book__author a:hover { color: var(--site-brand); text-decoration: underline; }
.dk-pdp__by a { color: inherit; text-decoration: none; }
.dk-pdp__by a:hover { color: var(--site-brand); text-decoration: underline; }

/* Form controls report their content as min-content, so in any flex or grid
   cell they refuse to shrink and push the layout wider than the screen. This
   is the blanket guard; the listing toolbar was the case that showed it. */
.dk select, .dk input, .dk textarea { max-width: 100%; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
/* The inherited theme's toast is a grey slab that slides out from under the
   header and clips against it. This is the storefront's own: brand green, a
   tick, bottom-centre where it cannot collide with the header or the cart. */
.dk-toast {
    position: fixed;
    z-index: 1200;
    inset-block-end: 1.25rem;
    inset-inline-start: 50%;
    transform: translate(50%, 1rem);
    display: flex; align-items: center; gap: .6rem;
    max-width: min(92vw, 460px);
    padding: .8rem 1.15rem;
    border-radius: var(--dk-radius);
    background: var(--dk-green-deep);
    color: #fff;
    font-size: .92rem; font-weight: 600;
    box-shadow: 0 8px 30px rgba(16, 28, 23, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
[dir="ltr"] .dk-toast { transform: translate(-50%, 1rem); }
.dk-toast.is-on { opacity: 1; transform: translate(50%, 0); }
[dir="ltr"] .dk-toast.is-on { transform: translate(-50%, 0); }
.dk-toast i { color: var(--dk-gold); font-size: 1.05rem; }
.dk-toast--error { background: var(--site-danger, #b3261e); }
.dk-toast--error i { color: #fff; }

/* Buttons that are mid-request or have just succeeded. */
.dk-btn.is-busy { opacity: .75; cursor: progress; }
.dk-btn.is-done { background: var(--site-success, #1a7f45); border-color: transparent; color: #fff; }

/* The heart, once it means something. */
.dk-fav.is-on, .dk-book__fav.is-on { color: var(--dk-gold); border-color: var(--dk-gold); }

/* The badge should register that it changed. */
.dk-tool__count { transition: transform .18s ease; }
.dk-tool__count.is-bumped { transform: scale(1.35); }

/* ── Show/hide password ──────────────────────────────────────────────────── */
.dk-reveal { position: relative; display: block; }
.dk-reveal > input { width: 100%; padding-inline-end: 2.6rem !important; }
.dk-reveal__btn {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: .5rem;
    transform: translateY(-50%);
    display: grid; place-items: center;
    width: 30px; height: 30px;
    padding: 0;
    border: 0; border-radius: var(--dk-radius-sm);
    background: transparent;
    color: var(--site-muted);
    cursor: pointer;
}
.dk-reveal__btn:hover { color: var(--site-brand); background: var(--site-bg-alt); }

/* ── MKT-08: book page description ───────────────────────────────────────── */
.dk-panel__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 2rem;
    align-items: start;
}
.dk-panel__split > * { min-width: 0; }
.dk-panel__split img { max-width: 100%; height: auto; }
@media (max-width: 860px) {
    .dk-panel__split { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}

/* ── MKT-09: back to top ─────────────────────────────────────────────────── */
/* The inherited button used Font Awesome 4 markup (`fa fa-angle-double-up`),
   which renders nothing now that FA6 owns the `.fa` namespace — so it was an
   unexplained blank square. This is the storefront's own, on the opposite side
   from the WhatsApp float so the two never collide. */
/* Physical `right`, deliberately, where the rest of this file uses logical
   properties.

   The WhatsApp button it stacks under is styled in the layout with a physical
   `right: 31px`, so it stays bottom-right in every language. This button used
   inset-inline-start, which mirrors — in Arabic that also lands on the right
   and the two formed a tidy column, but in English it flipped to the left and
   the pair ended up on opposite edges of the screen.

   Both belong on the same edge, and bottom-right is where a floating action
   button is looked for in either script. The 2rem offset centres this 44px
   circle under the 47px one above it. */
.dk-top {
    position: fixed;
    inset-block-end: 1.25rem;
    right: 2rem;
    z-index: 90;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--site-brand);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(16, 28, 23, .28);
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dk-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.dk-top:hover { background: var(--site-brand-strong); }
.dk-top:focus-visible { outline: 2px solid var(--dk-gold); outline-offset: 3px; }
/* Below 577px the WhatsApp button becomes 40px at right:19px; match its centre. */
@media (max-width: 577px) {
    .dk-top { right: 1.06rem; }
}

/* ── MKT-10: the publishing CTA on a phone ───────────────────────────────── */
/* .dk-nav is hidden below 860px, and the gold CTA lived inside it, so the
   single most important action for an author disappeared on mobile. This is
   the same button, promoted into the header bar at those widths. */
.dk-head__cta { display: none; }
@media (max-width: 860px) {
    .dk-head__cta {
        display: inline-flex; align-items: center; justify-content: center;
        order: 4; flex-basis: 100%;
        padding: .6rem 1rem;
        border: 1px solid var(--dk-gold);
        border-radius: var(--dk-radius-sm);
        color: var(--dk-gold-strong);
        background: var(--dk-gold-soft);
        font-size: .9rem; font-weight: 700;
        text-decoration: none;
    }
    .dk-head__cta:hover { background: var(--dk-gold); color: #fff; }
}

/* ── MKT-01: category mega menu ──────────────────────────────────────────── */
.dk-nav { position: relative; }
.dk-mega { display: inline-flex; }
.dk-mega__btn {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 0; background: none; font: inherit; cursor: pointer;
}
.dk-mega__caret { font-size: .62rem; transition: transform .18s ease; }
.dk-mega__btn[aria-expanded="true"] { color: var(--site-brand); }
.dk-mega__btn[aria-expanded="true"] .dk-mega__caret { transform: rotate(180deg); }

.dk-mega__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 60;
    background: var(--site-surface);
    border-block: 1px solid var(--dk-line);
    box-shadow: 0 14px 34px rgba(16, 28, 23, .13);
}
.dk-mega__in {
    max-width: var(--dk-container);
    margin-inline: auto;
    padding: 1.5rem 1.25rem 1.7rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 268px);
    gap: 2.25rem;
}
.dk-mega__h {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    color: var(--dk-gold); margin: 0 0 .8rem;
}
.dk-mega__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem .9rem;
}
.dk-mega__cat {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .55rem .7rem;
    border-radius: var(--dk-radius-sm);
    color: var(--site-ink);
    text-decoration: none;
    font-size: .92rem;
    border: 1px solid transparent;
}
.dk-mega__cat:hover { background: var(--site-bg-alt); border-color: var(--dk-line); color: var(--site-brand); }
.dk-mega__catn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-mega__catc {
    flex: none; font-size: .76rem; color: var(--site-muted);
    background: var(--site-bg-alt); border-radius: 999px; padding: .1rem .5rem;
}
.dk-mega__cat:hover .dk-mega__catc { background: var(--site-surface); }

.dk-mega__side { border-inline-start: 1px solid var(--dk-line); padding-inline-start: 2rem; }
.dk-mega__link {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem 0;
    color: var(--site-ink); text-decoration: none; font-size: .92rem;
}
.dk-mega__link i { color: var(--dk-gold); width: 1.1rem; text-align: center; font-size: .85rem; }
.dk-mega__link:hover { color: var(--site-brand); }
.dk-mega__promo {
    margin-top: 1rem; padding: .85rem 1rem;
    background: var(--dk-gold-soft); border-radius: var(--dk-radius-sm);
    display: grid; gap: .15rem;
}
.dk-mega__promo strong { color: var(--dk-gold-strong); font-size: .88rem; }
.dk-mega__promo span { font-size: .8rem; color: var(--site-muted); }

@media (max-width: 1000px) {
    .dk-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dk-mega__in { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    .dk-mega__side { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--dk-line); padding-top: 1.1rem; }
}

/* ── Fast purchase panel (MKT-04) ────────────────────────────────────────────
   A dialog on desktop, a bottom sheet on a phone — where a thumb already
   expects a sheet to come from. Hidden with [hidden], so a browser that never
   runs store.js leaves it closed rather than stacking the form under the page.
*/
.dk-buynow { flex: 1 1 auto; }
.dk-buynow i { margin-inline-end: .4rem; }

.dk-quick[hidden] { display: none; }
.dk-quick {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
}
.dk-quick__scrim { position: absolute; inset: 0; background: rgba(12, 24, 19, .55); }

.dk-quick__panel {
    position: relative;
    width: min(560px, 100%);
    max-height: min(88vh, 780px);
    display: flex; flex-direction: column;
    background: var(--site-surface);
    border-radius: var(--dk-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.dk-quick__head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dk-line);
    background: var(--site-bg-alt);
}
.dk-quick__head h2 { font-size: 1.05rem; margin: 0; color: var(--site-brand); }
.dk-quick__x {
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: transparent; color: var(--site-muted); cursor: pointer; font-size: 1rem;
}
.dk-quick__x:hover { background: var(--site-bg); color: var(--site-ink); }

.dk-quick__body { padding: 1.1rem 1.25rem 1.25rem; overflow-y: auto; }

.dk-quick__book {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center; gap: .8rem;
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--dk-line);
}
.dk-quick__book img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; }
.dk-quick__book strong { display: block; font-size: .92rem; line-height: 1.4; }
.dk-quick__by { display: block; font-size: .78rem; color: var(--site-muted); margin-top: .1rem; }
.dk-quick__price { display: block; font-weight: 700; color: var(--site-brand); margin-top: .25rem; }

.dk-quick__sum {
    background: var(--site-bg-alt);
    border-radius: var(--dk-radius-sm);
    padding: .75rem .9rem;
    margin-bottom: 1rem;
}
.dk-quick__sum .dk-sum__row { padding-block: .3rem; }

.dk-pay--tight { margin-bottom: .9rem; }

.dk-quick__alt {
    display: block; text-align: center; margin-top: .85rem;
    font-size: .82rem; color: var(--site-muted); text-decoration: none;
}
.dk-quick__alt:hover { color: var(--site-brand); }

@media (max-width: 640px) {
    .dk-quick { align-items: flex-end; padding: 0; }
    .dk-quick__panel {
        width: 100%; max-height: 92vh;
        border-radius: var(--dk-radius) var(--dk-radius) 0 0;
    }
    .dk-quick__book { grid-template-columns: 48px minmax(0, 1fr); }
    .dk-quick__book .dk-qty { grid-column: 1 / -1; justify-self: start; }
    /* Full width each, stacked: two half-width buttons on a 390px screen put
       "Buy it now" at 150px, which is not a primary action. */
    .dk-pdp__buy .dk-btn { flex: 1 1 100%; }
}

/* ── Free-shipping upsell strip ──────────────────────────────────────────────
   The compact form of the "finish the missing X" rail, for the checkout
   summary column where the full-width version does not fit. Gold rather than
   brand green: it is an offer, not a step in the order, and it should read as
   separate from the totals directly underneath it.
*/
.dk-ups {
    background: var(--dk-gold-soft);
    border: 1px solid color-mix(in srgb, var(--dk-gold) 35%, transparent);
    border-radius: var(--dk-radius);
    padding: .9rem 1rem;
    margin-bottom: 1rem;
}
.dk-ups__h { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .85rem; }
.dk-ups__h > i { color: var(--dk-gold-strong); margin-top: .2rem; }
.dk-ups__h strong { display: block; font-size: .9rem; color: var(--site-ink); }
.dk-ups__h span span { display: block; font-size: .8rem; color: var(--site-muted); }

.dk-ups__list { display: grid; gap: .55rem; }
.dk-ups__i {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center; gap: .65rem;
    background: var(--site-surface);
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius-sm);
    padding: .45rem .55rem;
}
.dk-ups__thumb { display: block; }
.dk-ups__thumb img { width: 38px; height: 50px; object-fit: cover; border-radius: 4px; display: block; }
.dk-ups__t { min-width: 0; }
.dk-ups__t a {
    display: block; font-size: .84rem; font-weight: 600; color: var(--site-ink);
    text-decoration: none; line-height: 1.4;
    /* Two lines, then ellipsis — a long title must not push the button out. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dk-ups__t a:hover { color: var(--site-brand); }
.dk-ups__p { display: block; font-size: .82rem; font-weight: 700; color: var(--site-brand); margin-top: .15rem; }

.dk-ups__add {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .45rem .7rem; border: 0; border-radius: var(--dk-radius-sm);
    background: var(--site-brand); color: #fff;
    font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
    white-space: nowrap;
}
.dk-ups__add:hover { background: var(--site-brand-strong); }
.dk-ups__add.is-busy { opacity: .55; pointer-events: none; }
.dk-ups__add i { font-size: .8em; }

@media (max-width: 520px) {
    /* The label goes; the plus alone is unambiguous next to a book. */
    .dk-ups__add span { display: none; }
}