/* =========================================================================
   REBRAND FOUNDATION — "Editorial" design system (v1)
   Ratified spec: docs/ui-audit-2026-06/rebrand-design-system-spec.md
   Loaded AFTER style.css, so the token re-map below supersedes the old
   (green/ink) audit tokens — existing carry-forward rules (CTA-1, focus,
   buttons) inherit the new palette automatically ("restyle, don't rebuild").
   Self-hosted fonts (no Google CDN — POPIA-clean). The Elementor Global Kit
   rebind is the complementary half (builder task) for Elementor widgets.
   ========================================================================= */

/* ---- Self-hosted fonts (Latin subset, variable where available) ---- */
@font-face {
    /* Display face — high-contrast didone with a SINGLE physical weight. Declaring
       the full 100–900 range maps every requested weight to this one file, so the
       browser never synthesises faux-bold (which would break the hairlines). */
    font-family: "Abril Fatface";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/fonts/abril-fatface-latin.woff2) format("woff2");
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../assets/fonts/fraunces-latin.woff2) format("woff2");
}
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url(../assets/fonts/newsreader-latin.woff2) format("woff2");
}
@font-face {
    font-family: "Sacramento";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../assets/fonts/sacramento-latin.woff2) format("woff2");
}

/* ---- Design-system tokens (exact, from the ratified spec) ---- */
:root {
    /* New "Editorial" palette */
    --rb-ink: #141210;       --rb-ink-soft: #43403b;  --rb-ink-faint: #736e66;
    --rb-cream: #f6f1e7;     --rb-cream-deep: #efe8da; --rb-paper: #fffdf8;
    --rb-line: #ddd4c4;      --rb-line-strong: #c8bda8;
    --rb-accent: #d2542b;    --rb-accent-deep: #b8431f;
    --rb-wa: #1f8f4e;
    --rb-shadow-card: 0 1px 2px rgba(20,18,16,.04), 0 18px 44px -22px rgba(20,18,16,.30);
    --rb-shadow-cover: 24px 30px 60px -28px rgba(20,18,16,.55), 0 2px 8px rgba(20,18,16,.18);
    --rb-r: 14px;
    --rb-display: "Abril Fatface", Georgia, serif; /* display headings (weight 400) */
    --rb-body: "Newsreader", Georgia, serif;       /* legacy reading serif (opt-in) */
    --rb-script: "Sacramento", cursive;       /* decorative cover/title ONLY */
    --rb-container: 1180px;

    /* ---- Shared type system (consumed by the makedisi-sample plugin) ----
       Font roles mirror the home page: Abril Fatface for big display
       headlines, Commissioner sans for ALL reading/secondary/UI text. */
    --font-display: var(--rb-display);                 /* Abril Fatface — hero/title only */
    --font-text: "Commissioner", system-ui, -apple-system, sans-serif;
    /* Live home-page surface (Elementor section) — what the visitor actually
       sees behind content. Matched so the sample page reads identically. */
    --page-bg: #fdfffa;

    /* Type scale — rem (respects user zoom). Granular in the text range,
       fluid clamps for display. 12px is the UI floor (never go below). */
    --fs-2xs: 0.75rem;    /* 12px — captions / labels (floor) */
    --fs-xs:  0.8125rem;  /* 13px — small UI */
    --fs-sm:  0.875rem;   /* 14px — secondary UI / notes */
    --fs-base: 1rem;      /* 16px — base UI / small body */
    --fs-md:  1.125rem;   /* 18px — lede / emphasised body */
    --fs-lg:  1.1875rem;  /* 19px — long-form reading body */
    --fs-xl:  1.375rem;   /* 22px — H3 / card heading */
    --fs-3xl: clamp(2rem, 1.3rem + 3.2vw, 2.9rem);     /* section H2 */
    --fs-display:    clamp(2.6rem, 1.1rem + 6.4vw, 5.1rem); /* hero H1 */
    --fs-display-sm: clamp(2.3rem, 1.4rem + 4vw, 4rem);     /* reader title */

    /* Line-height scale — tight for display, open for reading. */
    --lh-tight: 1.04;     /* display headlines */
    --lh-heading: 1.2;    /* sub-headings */
    --lh-snug: 1.5;       /* lede / short blocks */
    --lh-body: 1.6;       /* UI / general body */
    --lh-reading: 1.7;    /* long-form reading column */

    /* Control sizing — buttons / toolbar pills. Two tiers, both ≥44px (a11y).
       lg = primary actions · sm = secondary / in-toolbar controls. */
    --control-h-lg:  52px;
    --control-h-sm:  44px;
    --control-px-lg: 22px;             /* literal: --space-* aren't on :root */
    --control-px-sm: 16px;
    --control-radius: 10px;

    /* Re-map legacy --mk-* tokens to the new palette so carry-forward rules
       (CTA-1 ink button, focus ring, etc.) pick up the rebrand automatically. */
    --mk-ink: var(--rb-ink);
    --mk-body: var(--rb-ink-soft);
    --mk-muted: var(--rb-ink-faint);
    --mk-paper: var(--rb-paper);
    --mk-paper-2: var(--rb-paper);
    --mk-paper-3: var(--rb-cream-deep);
    --mk-line: var(--rb-line);
    --mk-field-border: var(--rb-line-strong);
    --mk-accent: var(--rb-accent);            /* green → warm orange */
    --mk-r-sm: 10px; --mk-r: var(--rb-r);
    /* --mk-wa / --mk-wa-fab (WhatsApp greens) intentionally unchanged */
}

/* ---- Base typography & surfaces ---- */
body {
    font-family: var(--font-text);   /* Commissioner — all general content */
    color: var(--rb-ink);
    background: var(--rb-cream);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}
/* Headings → Abril Fatface (display). Weight pinned to 400 — Abril ships a
   single weight, so UA-default bold would synthesise faux-bold and break the
   hairlines. Elementor widgets keep their own until the Global Kit rebind;
   this governs WooCommerce, the sample plugin, and default content. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--rb-display);
    font-weight: 400;
    font-optical-sizing: auto;
    color: var(--rb-ink);
    letter-spacing: -0.01em;
}
/* "UI chrome" voice — eyebrows/labels/nav. Commissioner (NOT the display face:
   Abril Fatface is illegible at small, letter-spaced sizes). */
.rb-ui {
    font-family: var(--font-text);
    font-optical-sizing: auto;
    letter-spacing: .06em;
}
/* Decorative script — opt-in only; never inherit onto body/UI */
.rb-script { font-family: var(--rb-script); }

/* Content links use the accessible accent-deep (orange-on-cream contrast) */
.entry-content a, .woocommerce-page a.link, .ms-reader a:not(.ms-btn) {
    color: var(--rb-accent-deep);
}

/* ---- Visible focus ring (accent) — restyles the Pass A focus state ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.elementor-button:focus-visible, .ms-btn:focus-visible {
    outline: 2px solid var(--rb-accent) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Social icons now live in the header (top), so the footer's duplicate set is
   redundant — hide it. */
.ct-footer-socials,
#footer .ct-social-box,
.ct-footer .ct-social-box { display: none !important; }

/* ============================================================
   Shop / WooCommerce archive — rebrand sweep
   ============================================================ */

/* Retire the legacy green page-title band; unify on the home-page surface. */
.hero-section,
body.woocommerce-page,
body.post-type-archive-product,
body.woocommerce-page #main {
    background-color: var(--page-bg) !important;
}

/* Page-title band: tighten the over-tall hero, keep the Fraunces title. */
.hero-section .entry-header,
.hero-section .ct-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Product card — show the FULL cover (portrait). Blocksy hard-sets
   aspect-ratio:1/1 inline on the img, so override it. */
.woocommerce ul.products li.product img.wp-post-image {
    aspect-ratio: 2 / 3 !important;
    object-fit: cover;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.woocommerce ul.products li.product .ct-media-container { aspect-ratio: 2 / 3; }

/* Product meta type + rhythm */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.25;
    margin-top: 14px;
}
.woocommerce ul.products li.product .price {
    font-family: var(--font-text);
    color: var(--rb-ink);
    font-size: 1.05rem;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    margin-top: 12px;
}

/* Single-result: don't strand the lone product in a 3-col grid. */
.woocommerce.columns-3 ul.products,
.woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 300px));
    justify-content: start;
}

/* Mobile: the 3-col grid above strands the lone book in a shrunken left-hand
   column with dead space beside it. Drop to one centred, comfortably-sized card. */
@media (max-width: 600px) {
    .woocommerce.columns-3 ul.products,
    .woocommerce ul.products.columns-3 {
        grid-template-columns: minmax(0, 340px);
        justify-content: center;
        text-align: center;
    }
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .added_to_cart { display: inline-block; }
}

/* ------------------------------------------------------------
   Cart (WooCommerce Cart block) — contrast fix
   Prices, totals and item text inherit a near-white cream (#F4EFE5) on the
   light cart surface, leaving the key numbers almost invisible. Restore ink.
   Buttons keep their own colours.
   ------------------------------------------------------------ */
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-cart .wc-block-cart-item__total,
.wp-block-woocommerce-cart .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-formatted-money-amount {
    color: var(--mk-ink, #141210) !important;
}

/* ============================================================
   Checkout (CartFlows /checkout-page/) — UI polish
   ============================================================ */

/* --- Buttons: match the approved ink CTA (/about/); never orange on hover.
       High specificity (id + .woocommerce + body) to beat WooCommerce core and
       the legacy global `button#place_order:hover { --mk-accent }` orange rule. --- */
body.woocommerce-checkout .woocommerce button#place_order,
body.woocommerce-checkout .woocommerce button.button,
body.woocommerce-checkout .woocommerce a.button,
body.woocommerce-checkout .woocommerce input.button,
body.woocommerce-checkout .wcf-embed-checkout-form .coupon button {
    background-color: var(--mk-ink, #141210) !important;
    background-image: none !important;
    color: var(--rb-paper, #fffdf8) !important;
    border: 1px solid var(--mk-ink, #141210) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: background-color .18s ease, transform .15s ease !important;
}
body.woocommerce-checkout .woocommerce button#place_order:hover,
body.woocommerce-checkout .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce input.button:hover,
body.woocommerce-checkout .wcf-embed-checkout-form .coupon button:hover {
    background-color: #000 !important;        /* approved hover — NOT orange */
    color: var(--rb-paper, #fffdf8) !important;
    border-color: #000 !important;
    transform: translateY(-1px);
}
body.woocommerce-checkout .woocommerce button#place_order:active,
body.woocommerce-checkout .woocommerce button.button:active { transform: translateY(0); }
body.woocommerce-checkout .woocommerce button#place_order:focus-visible,
body.woocommerce-checkout .woocommerce button.button:focus-visible {
    outline: 2px solid var(--mk-accent, #d2542b) !important;
    outline-offset: 2px;
}
body.woocommerce-checkout .woocommerce button#place_order:disabled,
body.woocommerce-checkout .woocommerce button#place_order[disabled],
body.woocommerce-checkout .woocommerce button.button:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background-color: var(--mk-ink, #141210) !important;
}

/* --- Floating labels: float on filled / focus / autofill so the value never
       overlaps the label, and the placeholder never doubles it. --- */
.wcf-embed-checkout-form .form-row:has(input.input-text:not(:placeholder-shown)) > label,
.wcf-embed-checkout-form .form-row:has(input.input-text:-webkit-autofill) > label,
.wcf-embed-checkout-form .form-row:has(input.input-text:focus) > label,
.wcf-embed-checkout-form .form-row:has(textarea:not(:placeholder-shown)) > label,
.wcf-embed-checkout-form .form-row:has(textarea:focus) > label {
    opacity: 1 !important;
}
/* once the label floats (focus), drop the redundant placeholder so it can't double */
.wcf-embed-checkout-form .form-row:has(input:focus) input::placeholder,
.wcf-embed-checkout-form .form-row:has(textarea:focus) textarea::placeholder {
    color: transparent !important;
}
/* neutralise the browser autofill yellow; keep typed value + floated label readable */
.wcf-embed-checkout-form input:-webkit-autofill,
.wcf-embed-checkout-form input:-webkit-autofill:hover,
.wcf-embed-checkout-form input:-webkit-autofill:focus,
.wcf-embed-checkout-form textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--mk-paper, #fffdf8) inset !important;
    -webkit-text-fill-color: var(--mk-ink, #141210) !important;
    caret-color: var(--mk-ink, #141210);
}

/* --- Consistent field/spacing & alignment --- */
.wcf-embed-checkout-form .form-row { margin-bottom: 14px; }
.wcf-embed-checkout-form .form-row input.input-text,
.wcf-embed-checkout-form .form-row textarea,
.wcf-embed-checkout-form .form-row select,
.wcf-embed-checkout-form .form-row .select2-selection,
.wcf-embed-checkout-form .form-row .select2-container .select2-selection--single {
    border-radius: 8px !important;
}
/* dropdown selected text aligns with input text */
.wcf-embed-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px;
    padding-left: 12px;
}
/* validation messages clear the field instead of colliding */
.wcf-embed-checkout-form .woocommerce-error,
.wcf-embed-checkout-form .form-row .woocommerce-error,
.wcf-embed-checkout-form .wc-block-components-validation-error { margin-top: 6px; }

/* Product review stars on-brand (WooCommerce default rendered them green). */
.woocommerce .star-rating span::before,
.woocommerce .comment-form-rating p.stars a::before,
.woocommerce p.stars a:hover ~ a::before,
.woocommerce #review_form #respond p.stars a::before { color: var(--mk-accent) !important; }
.woocommerce .star-rating::before { color: var(--mk-line-strong, #c8bda8); }

/* Push the typed/autofilled value below the floated label so they never overlap. */
.wcf-embed-checkout-form .form-row:has(input.input-text:not(:placeholder-shown)) input.input-text,
.wcf-embed-checkout-form .form-row:has(input.input-text:-webkit-autofill) input.input-text,
.wcf-embed-checkout-form .form-row:has(input.input-text:focus) input.input-text {
    padding-top: 22px !important;
    padding-bottom: 4px !important;
}

/* Extend the cream page surface over the (previously white) checkout header band. */
body.woocommerce-checkout .elementor-element-395ab44,
body.woocommerce-checkout .cartflows-container,
body.woocommerce-checkout > .elementor > .elementor-element:first-child {
    background-color: var(--page-bg) !important;
}

/* --- Progress steps (Cart · Information · Finish) shipped as CartFlows/Elementor
       defaults: a bright PURPLE current step (#994bfb) flanked by cool grey-blue
       siblings — both off the rust/ink brand. Recolour by widget id: the current
       step becomes deep rust, the rest a quiet ink-faint, so the bar reads as a
       real progress state on-palette. (Override lives here so it ships with the
       theme; the identical change can also be made in Elementor.) --- */
body.woocommerce-checkout .elementor-element-dabded8 .elementor-icon-list-icon svg {
    fill: var(--rb-accent-deep) !important;   /* Information — current step */
}
body.woocommerce-checkout .elementor-element-62093b7 .elementor-icon-list-icon svg,
body.woocommerce-checkout .elementor-element-f9f17c5 .elementor-icon-list-icon svg {
    fill: var(--rb-ink-faint) !important;     /* Cart (done) / Finish (upcoming) */
}
/* The two connector lines between the steps were olive-green (#6b8e23); the only
   dividers on the checkout, so safe to target by class. Quiet warm hairline. */
body.woocommerce-checkout .elementor-divider-separator {
    border-top-color: var(--rb-line-strong) !important;
}

/* --- Billing fields: warm the default cool-grey (#d1d5db) border onto the brand
       line, and give focus a clear rust ring — so the inputs sit in the same
       paper/ink family as the product and review forms. --- */
body.woocommerce-checkout .wcf-embed-checkout-form .form-row input.input-text,
body.woocommerce-checkout .wcf-embed-checkout-form .form-row textarea,
body.woocommerce-checkout .wcf-embed-checkout-form .form-row select,
body.woocommerce-checkout .wcf-embed-checkout-form .form-row .select2-selection {
    border-color: var(--rb-line-strong) !important;
}
body.woocommerce-checkout .wcf-embed-checkout-form .form-row input.input-text:focus,
body.woocommerce-checkout .wcf-embed-checkout-form .form-row textarea:focus,
body.woocommerce-checkout .wcf-embed-checkout-form .form-row select:focus {
    border-color: var(--rb-accent-deep) !important;
    box-shadow: 0 0 0 3px rgba(184,67,31,.14) !important;
    outline: none !important;
}

/* ============================================================
   Product page — Description / Reviews tabs use the full width
   (Blocksy caps the panel at max-width:680px, stranding it left).
   ============================================================ */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .wc-tab {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel > * { max-width: none; }

/* ============================================================
   Header social icons — secondary brand links (after nav, before CTA)
   ============================================================ */
/* Desktop header: small inline icons, before the CTA, spaced off it. */
.mk-header-social { display: inline-flex; align-items: center; gap: 2px; margin-right: 14px; }
.mk-header-social__link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    color: currentColor; opacity: .92;
    transition: opacity .18s ease, background-color .18s ease, transform .12s ease;
}
.mk-header-social__link svg { width: 16px; height: 16px; display: block; }
.mk-header-social__link:hover { opacity: 1; background-color: rgba(255,255,255,.12); }   /* subtle, brand — not orange */
.mk-header-social__link:active { transform: translateY(1px); }
.mk-header-social__link:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; opacity: 1; }

/* Off-canvas: show OUR cluster (it carries the WhatsApp actions dropdown) and
   hide Blocksy's plain native social row — no duplicate, and the dropdown works
   on mobile too. */
.ct-panel .ct-social-box,
#offcanvas .ct-social-box { display: none !important; }
.ct-panel .mk-header-social,
#offcanvas .mk-header-social { display: inline-flex !important; }
/* The off-canvas (mobile "drop menu") panel is light, so the cream header icons
   washed out. Force dark ink icons there at full opacity so they read clearly. */
.ct-panel .mk-header-social__link,
#offcanvas .mk-header-social__link { color: var(--rb-ink) !important; opacity: 1 !important; }
.ct-panel .mk-header-social__link svg,
#offcanvas .mk-header-social__link svg { fill: currentColor; }

/* WhatsApp actions dropdown — replaces the old floating button. Hover/focus on
   desktop, tap (.is-open via JS) on mobile. */
.mk-wa { position: relative; display: inline-flex; }
/* Reset the <button> hard — the theme's global button styling otherwise paints
   it cream-on-black and zeroes the icon. Match the sibling social <a> exactly. */
.mk-wa__toggle {
    -webkit-appearance: none; appearance: none;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: pointer;
    font: inherit;
}
.mk-wa__toggle svg { width: 16px !important; height: 16px !important; flex: none; display: block; }
.mk-wa__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 230px;
    background: #fff;
    color: var(--mk-ink);
    border: 1px solid var(--rb-line);
    border-radius: 12px;
    box-shadow: var(--rb-shadow-card);
    padding: 6px;
    display: none;
    z-index: 200;
}
.mk-wa:hover > .mk-wa__menu,
.mk-wa:focus-within > .mk-wa__menu,
.mk-wa.is-open > .mk-wa__menu { display: block; }
.mk-wa__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    font-family: var(--font-text); font-size: var(--fs-sm); line-height: 1.3;
    color: var(--mk-ink); text-decoration: none; opacity: 1; white-space: nowrap;
}
.mk-wa__item:hover { background: var(--rb-cream-deep); }
.mk-wa__item:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.mk-wa__item-icon { font-size: 17px; line-height: 1; }
/* In the narrow off-canvas, anchor left so the menu doesn't clip off-screen. */
.ct-panel .mk-wa__menu,
#offcanvas .mk-wa__menu { right: auto; left: 0; }

/* Off-canvas "Get your copy" CTA. The Customizer button palette renders this
   green (#D6F5C4) on the panel's light surface — off-brand. The desktop header
   keeps its correct light-on-dark treatment; here, on a light surface, force the
   ink brand CTA (design-system CTA-1: ink fill, hover #000, never green/orange). */
#offcanvas a.ct-button,
.ct-panel a.ct-button {
    background-color: var(--mk-ink, #141210) !important;
    border-color: var(--mk-ink, #141210) !important;
    color: #fff !important;
}
#offcanvas a.ct-button:hover,
#offcanvas a.ct-button:focus-visible,
.ct-panel a.ct-button:hover,
.ct-panel a.ct-button:focus-visible {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

/* ============================================================
   Order-pay / PayFast hand-off  (body.woocommerce-order-pay)
   This endpoint renders inside the Elementor checkout page (id 3671), whose
   content section is black with cream text — so the order summary + PayFast
   form land on a dark band, the gateway's `.button-alt` becomes a giant cream
   pill, the ink cancel link is invisible, and the auto-redirect overlay
   collides on top. Unify with the light site, give a clean ink CTA + ghost
   cancel, and tidy the redirect box. Scoped to the order-pay endpoint only, so
   the live CartFlows checkout is untouched.
   ============================================================ */
body.woocommerce-order-pay #main,
body.woocommerce-order-pay .site-main { background-color: var(--page-bg) !important; }
body.woocommerce-order-pay .elementor-element,
body.woocommerce-order-pay .e-con-inner,
body.woocommerce-order-pay .elementor-widget-container,
body.woocommerce-order-pay .woocommerce { background-color: transparent !important; }
/* Legible ink text on the now-light surface. */
body.woocommerce-order-pay,
body.woocommerce-order-pay .woocommerce,
body.woocommerce-order-pay p,
body.woocommerce-order-pay .order_details,
body.woocommerce-order-pay .order_details li,
body.woocommerce-order-pay .order_details strong { color: var(--mk-ink, #141210) !important; }

/* The gateway form: a clean, centred, comfortably-spaced column. */
body.woocommerce-order-pay #payfast_payment_form {
    max-width: 420px;
    margin: 22px auto 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    text-align: center;
}
/* Primary CTA: ink fill, sane size — replaces the 28px cream pill. */
body.woocommerce-order-pay #submit_payfast_payment_form {
    background-color: var(--mk-ink, #141210) !important;
    color: #fff !important;
    border: 1px solid var(--mk-ink, #141210) !important;
    border-radius: 10px !important;
    padding: 14px 24px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    width: 100%;
    height: auto !important;
    line-height: 1.2 !important;
    cursor: pointer;
    box-shadow: none !important;
}
body.woocommerce-order-pay #submit_payfast_payment_form:hover { background-color: #000 !important; }
/* Secondary: a quiet "cancel" text link — never competes with the CTA, and
   small enough that the redirect overlay never looks like it's colliding. */
body.woocommerce-order-pay #payfast_payment_form a.cancel {
    background: transparent !important;
    color: var(--rb-ink-faint, #736e66) !important;
    border: 0 !important;
    padding: 4px 8px !important;
    width: auto;
    margin: 2px auto 0 !important;
    font-size: .9rem !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body.woocommerce-order-pay #payfast_payment_form a.cancel:hover { color: var(--mk-ink, #141210) !important; }
/* The jQuery blockUI "redirecting…" notice: on-brand card with a spinner + a
   secure-payment cue, centred above the content. */
body.woocommerce-order-pay .blockUI.blockMsg {
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 12px !important;
    padding: 26px 24px !important;
    color: var(--mk-ink, #141210) !important;
    background: #fff !important;
    font-family: var(--font-text, sans-serif) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .16) !important;
    max-width: 320px;
    left: 50% !important;
    margin-left: 0 !important;
    transform: translateX(-50%);
    width: auto !important;
}
/* Spinner above the message (motion-safe). */
body.woocommerce-order-pay .blockUI.blockMsg::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 16px;
    border: 3px solid rgba(0, 0, 0, .14);
    border-top-color: var(--mk-ink, #141210);
    border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
    body.woocommerce-order-pay .blockUI.blockMsg::before { animation: mk-spin .8s linear infinite; }
}
/* "Secure payment" reassurance under the message. */
body.woocommerce-order-pay .blockUI.blockMsg::after {
    content: "🔒 Secure payment by PayFast";
    display: block;
    margin-top: 14px;
    font-size: .8rem;
    color: var(--rb-ink-faint, #736e66);
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* Distraction-free payment hand-off: drop the site footer here (it was also
   showing Blocksy's default theme credit instead of the real footer). */
body.woocommerce-order-pay .ct-footer { display: none !important; }

/* Hide the main nav on the checkout + payment pages. The checkout template's
   header is narrow, so the menu collapses into a "More" dropdown there — and a
   nav is a known checkout-abandonment distraction anyway. Logo + cart stay.
   On the wider main site the 3-item menu shows inline (no "More"). */
body.woocommerce-checkout [data-id="menu"],
body.woocommerce-checkout #header-menu-1,
body.woocommerce-checkout .header-menu-1,
body.woocommerce-order-pay [data-id="menu"],
body.woocommerce-order-pay #header-menu-1,
body.woocommerce-order-pay .header-menu-1 { display: none !important; }

/* ============================================================
   FAQ accordion ([makedisi_faq]) — native <details>, accessible, no JS.
   ============================================================ */
.mk-faq { max-width: 1040px; margin: 0 auto; padding: 64px 20px 88px; display: grid; gap: 28px; }
@media (min-width: 880px) {
    .mk-faq { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
    .mk-faq__intro { position: sticky; top: 96px; }
}
.mk-faq__title {
    font-family: var(--font-display); font-weight: 400;
    font-size: var(--fs-3xl); line-height: var(--lh-heading);
    color: var(--rb-ink); letter-spacing: -.01em; margin: 0 0 16px;
}
.mk-faq__lede {
    font-family: var(--font-text); font-size: var(--fs-md); line-height: var(--lh-snug);
    color: var(--rb-ink-soft); margin: 0 0 16px; max-width: 38ch;
}
.mk-faq__contact { font-family: var(--font-text); font-size: var(--fs-sm); color: var(--rb-ink-faint); margin: 0; }
.mk-faq__contact a { color: var(--rb-accent-deep); text-decoration: underline; text-underline-offset: 2px; }

.mk-faq__list { border-top: 1px solid var(--rb-line); }
.mk-faq__item { border-bottom: 1px solid var(--rb-line); }
.mk-faq__q {
    list-style: none; cursor: pointer;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    padding: 22px 2px;
    font-family: var(--font-text); font-weight: 600; font-size: var(--fs-md);
    color: var(--rb-ink); line-height: 1.35;
    transition: color .15s ease;
}
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q-text { flex: 1; }
.mk-faq__q:hover { color: var(--rb-accent-deep); }
.mk-faq__q:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 4px; }
/* +/− indicator — turns to an accent − when open */
.mk-faq__mark { position: relative; flex: none; width: 16px; height: 16px; margin-top: 4px; }
.mk-faq__mark::before,
.mk-faq__mark::after { content: ""; position: absolute; background: var(--rb-ink); transition: background-color .18s ease; }
.mk-faq__mark::before { top: 7px; left: 0; width: 16px; height: 1.5px; }
.mk-faq__mark::after { left: 7px; top: 0; width: 1.5px; height: 16px; transition: transform .2s ease; }
.mk-faq__item[open] .mk-faq__mark::after { transform: scaleY(0); }
.mk-faq__item[open] .mk-faq__mark::before { background: var(--rb-accent-deep); }
.mk-faq__a {
    padding: 0 2px 24px; max-width: 60ch;
    color: var(--rb-ink-soft); font-family: var(--font-text);
    font-size: var(--fs-base); line-height: var(--lh-reading);
}
.mk-faq__a p { margin: 0 0 .8em; }
.mk-faq__a p:last-child { margin-bottom: 0; }
.mk-faq__a a { color: var(--rb-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mk-faq__mark::after, .mk-faq__mark::before { transition: none; } }
/* The Blocksy page-title band ("FAQ") duplicates the section heading
   ("Frequently asked questions"). Hide the band on the FAQ page only — scoped
   via :has() to the shortcode, so it's page-ID-independent across environments. */
body:has(.mk-faq) .hero-section { display: none !important; }

/* ============================================================
   Shop — single-book feature (frontend-design)
   One product is not a catalogue. Present it as an editorial cover|details
   feature with a quiet framing line, instead of a card stranded in whitespace.
   ============================================================ */
/* Drop the generic "Shop" page-title band — the feature carries the page. */
body:has(.mk-shop-intro) .hero-section { display: none !important; }

.mk-shop-intro { text-align: center; max-width: 48ch; margin: 8px auto 44px; }
.mk-shop-intro__eyebrow { font-family: var(--font-text); font-size: var(--fs-2xs); letter-spacing: .22em; text-transform: uppercase; color: var(--rb-accent-deep); margin: 0 0 10px; }
.mk-shop-intro__line { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em; color: var(--rb-ink); margin: 0; }

/* Drop the redundant category meta from the feature. */
.post-type-archive-product ul.products li.product .entry-meta { display: none; }

/* Desktop: widen the container and lay the product out as cover | details. */
@media (min-width: 880px) {
    body.post-type-archive-product ul.products.columns-3 { grid-template-columns: minmax(0, 1fr) !important; max-width: 880px; margin-left: auto; margin-right: auto; justify-content: stretch !important; }
    /* Float layout (not grid): the cover floats left and the details flow tight
       at the top-right, so the title lines up with the top frame of the cover and
       price/rating/button group right under it (grid row-spanning spread them). */
    .woocommerce ul.products li.product {
        display: block;
        text-align: left;
        overflow: hidden;              /* contain the floated cover */
    }
    .woocommerce ul.products li.product > figure { float: left; width: 300px; margin: 0 56px 0 0; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.12; margin: 0 0 10px; }
    .woocommerce ul.products li.product .price { font-size: 1.2rem; }
    .woocommerce ul.products li.product .ct-woo-card-rating { margin: 10px 0 0; }
    .woocommerce ul.products li.product .ct-woo-card-actions { margin-top: 22px; }
    .woocommerce ul.products li.product .ct-woo-card-actions .button { min-width: 220px; }
}

/* ============================================================
   Senior UX pass — conversion · contrast · affordances
   ============================================================ */

/* (1) Checkout — make "Already have an account? Log in" read as a link
   (it was black, no underline → 1.25:1 vs surrounding text). */
body.woocommerce-checkout .wcf-customer-login-url,
.wcf-embed-checkout-form .wcf-customer-login-url {
    color: var(--rb-accent-deep) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    font-weight: 600;
}
/* (1) Checkout footer copyright was #869498 (3.13:1) → AA-legible ink. */
body.woocommerce-checkout .elementor-element-c9f94a0 .elementor-heading-title { color: var(--rb-ink-soft) !important; }

/* (4) Cart line-item description was ~1.13:1 (cream-on-cream, invisible). */
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description,
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description p,
.wp-block-woocommerce-cart .wc-block-components-product-details { color: var(--rb-ink-soft) !important; }

/* (4) Product star-rating helper text was ~1.09:1 (faint green). Recolour to the
   accent (AA on cream) — the div's aria-label is the accessible name and the
   star glyphs (::before) are unaffected; the redundant text is clipped by Woo. */
.woocommerce .star-rating span,
.woocommerce .star-rating .rating { color: var(--rb-accent-deep) !important; }

/* (6) My Account "Remember me" + Woo form checkboxes — were invisible/native.
   Give a visible box with hover/checked/focus states and a real tap target. */
.woocommerce form .form-row input[type="checkbox"],
.woocommerce-form-login input[type="checkbox"],
.woocommerce-form__label-for-checkbox input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -4px;
    border: 1.5px solid var(--rb-line-strong); border-radius: 4px;
    background: var(--rb-paper); cursor: pointer; position: relative; flex: none;
}
.woocommerce form .form-row input[type="checkbox"]:hover,
.woocommerce-form-login input[type="checkbox"]:hover { border-color: var(--mk-ink); }
.woocommerce form .form-row input[type="checkbox"]:focus-visible,
.woocommerce-form-login input[type="checkbox"]:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.woocommerce form .form-row input[type="checkbox"]:checked,
.woocommerce-form-login input[type="checkbox"]:checked { background: var(--mk-ink); border-color: var(--mk-ink); }
.woocommerce form .form-row input[type="checkbox"]:checked::after,
.woocommerce-form-login input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 5px; top: 1px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* (3) Single-product shop — one product never belongs in a 3-up grid. Drop the
   redundant sorting + "showing the single result" chrome and centre the lone
   card so /shop/ reads as a focused, intentional storefront. */
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering,
body.woocommerce-page.archive .woocommerce-result-count,
body.woocommerce-page.archive .woocommerce-ordering { display: none !important; }
.woocommerce.columns-3 ul.products,
.woocommerce ul.products.columns-3 {
    grid-template-columns: minmax(0, 360px) !important;
    justify-content: center !important;
    text-align: center;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { display: inline-block; }

/* (5) 404 recovery — clear paths back, no dead-end search. */
.mk-404 { max-width: 640px; margin: 0 auto; padding: 80px 20px 96px; text-align: center; }
.mk-404__eyebrow { font-family: var(--font-text); font-size: var(--fs-2xs); letter-spacing: .22em; text-transform: uppercase; color: var(--rb-accent-deep); margin: 0 0 12px; }
.mk-404__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-sm); line-height: var(--lh-tight); color: var(--rb-ink); margin: 0 0 14px; }
.mk-404__lede { font-family: var(--font-text); font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--rb-ink-soft); margin: 0 auto 28px; max-width: 46ch; }
.mk-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mk-404__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--control-radius, 10px); font-family: var(--font-text); font-weight: 600; font-size: var(--fs-base); text-decoration: none; border: 1px solid var(--mk-ink); color: var(--mk-ink); background: transparent; transition: background-color .18s ease, color .18s ease; }
.mk-404__btn--primary { background: var(--mk-ink); color: #fff; }
.mk-404__btn--primary:hover { background: #000; color: #fff; }
.mk-404__btn:hover { background: var(--rb-cream-deep); }
.mk-404__btn--ghost { border-color: rgba(0, 0, 0, .2); color: var(--rb-ink-soft); }
.mk-404__btn:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

/* (2) About — bind the Image-Box sections ("Who Is This Book For?" / "Why This
   Story Matters?") to the site font system: title in the display face (Abril),
   body in Commissioner — visually separated and consistent. The title and
   description remain separate, independently editable fields in each widget. */
.elementor-image-box-title { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -.01em; }
.elementor-image-box-description { font-family: var(--font-text) !important; color: var(--rb-ink-soft); }

/* Product page signature — the novel's central question as an editorial refrain
   at the point of purchase. The one bold typographic moment; a single hairline
   rule, generous space, a reading measure. Everything around it stays quiet. */
.woocommerce div.product .summary .mk-refrain {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2rem);
    line-height: 1.16;
    letter-spacing: -.01em;
    color: var(--rb-ink);
    max-width: 20ch;
    margin: 26px 0 28px;
    padding-top: 22px;
    border-top: 1px solid var(--rb-line);
}

/* ============================================================
   Cart — a considered, on-brand summary (frontend-design)
   Make the WooCommerce cart block read as designed: a display-face totals
   heading, the totals anchored in a quiet summary card, and the grand total
   lifted as the key number.
   ============================================================ */
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
    font-family: var(--font-display) !important; font-weight: 400 !important;
    font-size: var(--fs-xl) !important; letter-spacing: -.01em; color: var(--rb-ink) !important;
}
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
    background: var(--rb-paper);
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-r);
    padding: 24px 24px 28px;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-text); font-weight: 700; font-size: 1.35rem; color: var(--rb-ink);
}

/* Modern-Cart slide-out — its prices default to an off-palette green; bring the
   amounts onto the cream/ink system (the rest already inherits Commissioner). */
.moderncart-plugin [class*="-value"],
.moderncart-plugin [class*="price"],
.moderncart-plugin .woocommerce-Price-amount,
.moderncart-plugin .amount { color: var(--mk-ink) !important; }

/* ============================================================
   Product page — Description / Reviews tabs (impeccable polish)
   Three fixes: (1) the tab row underline is a pre-rebrand pale GREEN
   (rgb(214,245,196)) — bring it onto the warm hairline; mark the active tab
   with a real accent underline instead of the invisible white connector bar.
   (2) The book blurb (the emotional sell) runs edge-to-edge at ~140ch — give
   it a true reading column. (3) The "Category: Books" meta is catalogue
   residue on a one-book store — drop it.
   ============================================================ */
/* (1) Tab row + active indicator on the brand palette. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom-color: var(--rb-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
    background: var(--rb-accent-deep) !important;   /* clear active underline, was invisible white */
}

/* (2) The description as a reading column — id beats the full-width panel
   reset above (which exists only to stop Blocksy stranding the panel left). */
.woocommerce div.product .woocommerce-tabs #tab-description {
    max-width: 62ch !important;
    margin-inline: auto !important;   /* beat the full-width panel reset's margin:0 */
    font-size: var(--fs-lg);
    line-height: var(--lh-reading);
    color: var(--rb-ink);
    text-wrap: pretty;
}
.woocommerce div.product .woocommerce-tabs #tab-description > * { max-width: none; }

/* (3) Hide the single-product category meta — noise on a one-title store. */
.woocommerce div.product .product_meta { display: none; }

/* (4) The cover is the hero of a BOOK store — give it physical presence.
   The design system already defines --rb-shadow-cover (a lifted-book drop
   shadow); the single-product gallery just never used it, so the cover sat
   flat on the cream. A calm hover lift adds tactility without bounce. */
.woocommerce div.product .woocommerce-product-gallery img.wp-post-image {
    box-shadow: var(--rb-shadow-cover);
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.woocommerce div.product .woocommerce-product-gallery:hover img.wp-post-image {
    transform: translateY(-4px);
    box-shadow: 30px 38px 72px -30px rgba(20,18,16,.60), 0 3px 10px rgba(20,18,16,.20);
}

/* (5) Add-to-basket hover — the resting ink button is right, but the hover
   flipped to a loud orange with dark text. Keep the text light, shift the
   ground ink -> deep rust, and add a small lift: lively at the point of
   purchase, but considered. */
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
    background-color: var(--rb-accent-deep) !important;
    color: var(--rb-paper) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(184,67,31,.7);
}
.woocommerce div.product form.cart .single_add_to_cart_button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* (6) Product title is a DISPLAY heading — drop it off body line-height (1.5)
   to a display ratio so it reads as one unit, especially wrapped on mobile. */
.woocommerce div.product .product_title {
    line-height: 1.12;
    text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce div.product .woocommerce-product-gallery img.wp-post-image { transition: none; }
    .woocommerce div.product .woocommerce-product-gallery:hover img.wp-post-image { transform: none; }
    .woocommerce div.product form.cart .single_add_to_cart_button:hover,
    .woocommerce div.product form.cart .single_add_to_cart_button:focus-visible { transform: none; }
}

/* (7) Review form — the Name / Email / review fields had a 1px WHITE border on
   a transparent ground, so on the cream page they were invisible: nothing told
   you where to type. Give them a real field: warm border, paper ground, and a
   clear accent focus ring. */
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond input[type="url"],
.woocommerce #review_form #respond textarea {
    border: 1px solid var(--rb-line-strong) !important;
    background: var(--rb-paper);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--rb-ink);
    font-family: var(--font-text);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce #review_form #respond input[type="text"]:focus,
.woocommerce #review_form #respond input[type="email"]:focus,
.woocommerce #review_form #respond input[type="url"]:focus,
.woocommerce #review_form #respond textarea:focus {
    border-color: var(--rb-accent-deep) !important;
    box-shadow: 0 0 0 3px rgba(184,67,31,.16);
    outline: none;
}
.woocommerce #review_form #respond input::placeholder,
.woocommerce #review_form #respond textarea::placeholder { color: var(--rb-ink-faint); }

/* (8) Review Submit was an off-palette dark green (rgb(8,50,36)); align it to
   the primary ink button + matching deep-rust hover, so the page has one
   consistent primary action language. */
.woocommerce #review_form #respond #submit {
    background-color: var(--rb-ink) !important;
    color: var(--rb-paper) !important;
    border: 0;
    min-height: 44px;
    padding: 10px 28px;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.woocommerce #review_form #respond #submit:hover,
.woocommerce #review_form #respond #submit:focus-visible {
    background-color: var(--rb-accent-deep) !important;
    color: var(--rb-paper) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(184,67,31,.7);
}
.woocommerce #review_form #respond #submit:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .woocommerce #review_form #respond #submit:hover,
    .woocommerce #review_form #respond #submit:focus-visible { transform: none; }
}

/* ============================================================
   Top bar / primary nav (impeccable polish)
   The desktop menu shipped with a fixed 100px inter-item gap (Blocksy
   customizer default), which scattered the three short items across the bar
   and left "FAQ" stranded by the social icons. Pull them into one coherent
   group, and give the uppercase labels the small positive tracking that caps
   need to breathe.
   ============================================================ */
header[class*="ct-header"] ul.menu {
    gap: 44px !important;
    column-gap: 44px !important;
}
header[class*="ct-header"] ul.menu > li.menu-item > a {
    letter-spacing: .04em;
}

/* ============================================================
   Footer — a substantial, on-brand footer (balances the header)
   Injected via blocksy:footer:before (see inc/footer.php), on the same ink
   ground as Blocksy's copyright bar so the two read as one footer. Also removes
   the dead cream space the cart plugin left below the footer (body padding).
   ============================================================ */
body { padding-bottom: 0 !important; }   /* kill the cart plugin's trailing gap */

.mk-footer { background: #000000; color: #fdfffa; }   /* pure black for a cohesive bottom; text on the "pistachio" green-white */
/* Blocksy copyright bar to match — one cohesive pure-black footer (was #0b1815). */
body .ct-footer { background-color: #000000 !important; }
.mk-footer__inner {
    max-width: var(--rb-container);
    margin: 0 auto;
    padding: clamp(2.5rem, 1.8rem + 3vw, 4rem) clamp(20px, 5vw, 40px) clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}
.mk-footer__title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.1;
    letter-spacing: -.01em; color: #fdfffa; margin: 0 0 .4rem;
}
.mk-footer__by { color: rgba(253, 255, 250, .85); font-size: var(--fs-sm); margin: 0 0 1.25rem; }
.mk-footer__cta {
    display: inline-block; background: var(--rb-cream); color: var(--rb-ink) !important;
    font-family: var(--font-text); font-weight: 600; font-size: var(--fs-sm);
    padding: 10px 22px; border-radius: var(--control-radius, 10px); text-decoration: none;
    transition: background .18s ease, transform .15s ease;
}
.mk-footer__cta:hover { background: #fff; transform: translateY(-1px); }
.mk-footer__h {
    font-family: var(--font-text); font-size: var(--fs-2xs); letter-spacing: .14em;
    text-transform: uppercase; color: rgba(253, 255, 250, .82); margin: 0 0 .9rem;
}
.mk-footer__col { display: flex; flex-direction: column; gap: .6rem; }
.mk-footer__col a {
    color: #fdfffa; text-decoration: none; font-size: var(--fs-base);
    width: fit-content; transition: color .15s ease;
}
.mk-footer__col a:hover { color: #d6f5c4; }   /* site-wide pistachio-green hover */
.mk-footer__col a:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 3px; }

@media (max-width: 720px) {
    /* Compact mobile footer: brand full-width, the two link lists stay side by
       side (collapsing them to one column made the footer ~84% of the screen).
       Tighten the desktop-scale padding + gaps so it reads as a footer, not a
       page. */
    .mk-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 1.4rem 1.25rem;
        padding: 2.25rem clamp(20px, 5vw, 40px) 1.5rem;
    }
    .mk-footer__brand { grid-column: 1 / -1; }
    .mk-footer__title { font-size: 1.55rem; }
    .mk-footer__by { margin-bottom: .85rem; }
    .mk-footer__col { gap: .5rem; }
    .mk-footer__col a { font-size: var(--fs-sm); word-break: break-word; }
    /* Drop the repetitive FAQ from the footer on mobile (FAQ is in the top nav). */
    .mk-footer__col a[href*="/faq"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-footer__cta:hover { transform: none; }
}

/* ============================================================
   Cookie consent banner (POPIA + Consent Mode v2) — see inc/cookie-consent.php
   On-brand bottom banner: ink ground, cream text, accent "Accept", ghost
   "Reject". Hidden by default; JS reveals it when no choice is stored.
   ============================================================ */
.mk-cookie {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 2147483000;                       /* above the floating cart, below nothing else */
    background: #000000;
    color: #ffffff;
    box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .6);
    transform: translateY(110%);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.mk-cookie.is-open { transform: none; }
.mk-cookie__inner {
    max-width: var(--rb-container);
    margin: 0 auto;
    padding: clamp(14px, 2.5vw, 20px) clamp(20px, 5vw, 40px);
    display: flex; align-items: center; gap: clamp(14px, 3vw, 32px);
    flex-wrap: wrap;
}
.mk-cookie__text {
    margin: 0; flex: 1 1 320px; min-width: 0;
    font-family: var(--font-text); font-size: var(--fs-sm); line-height: 1.55;
    color: #ffffff;
}
.mk-cookie__text a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.mk-cookie__text a:hover { color: #d6f5c4; }
.mk-cookie__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.mk-cookie__btn {
    font-family: var(--font-text); font-weight: 600; font-size: var(--fs-sm);
    min-height: 44px; padding: 0 20px; border-radius: var(--control-radius, 10px);
    cursor: pointer; border: 1px solid transparent;
    transition: background .18s ease, color .18s ease, transform .15s ease;
}
.mk-cookie__btn--primary { background: #ffffff; color: #000000; }
.mk-cookie__btn--primary:hover { background: #ffffff; transform: translateY(-1px); }
.mk-cookie__btn--ghost { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .55); }
.mk-cookie__btn--ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, .1); }
.mk-cookie__btn:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; }

@media (max-width: 560px) {
    .mk-cookie__inner { flex-direction: column; align-items: stretch; }
    .mk-cookie__actions { justify-content: stretch; }
    .mk-cookie__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-cookie { transition: none; }
    .mk-cookie__btn--primary:hover { transform: none; }
}

/* Footer "Cookie settings" link — quiet, lets consent be changed/withdrawn. */
.mk-footer__legal { margin-top: 1.25rem; }
.mk-footer__legal .mk-cookie-reopen {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: rgba(253, 255, 250, .8); font-family: var(--font-text); font-size: var(--fs-xs);
    font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.4; min-height: 0;
    text-decoration: underline; text-underline-offset: 2px;
}
.mk-footer__legal .mk-cookie-reopen:hover { color: #fff; }

/* FAQ page surface — match the home page background (#fdfffa, the "pistachio"
   green-white) rather than the warm cream used on other pages. */
body:has(.mk-faq) { background-color: var(--page-bg) !important; }
body:has(.mk-faq) #main,
body:has(.mk-faq) .ct-container { background-color: transparent; }

/* Fix: the consent <button>s inherited the theme's global button style
   (border-radius 62px pill, line-height 46px, 15px padding), ballooning into
   tall blobs — worst on mobile. Constrain to the brand control sizing, and
   stack full-width on narrow screens so labels never wrap mid-button. */
.mk-cookie .mk-cookie__btn {
    border-radius: var(--control-radius, 10px) !important;
    padding: 12px 22px !important;
    line-height: 1.2 !important;
    min-height: 44px;
    height: auto;
    width: auto;
    font-size: var(--fs-sm) !important;
    white-space: nowrap;
}
/* Force the consent-button colours over the theme's global <button> styling
   (which otherwise turned the ghost text black/invisible on the black banner). */
.mk-cookie .mk-cookie__btn--primary { background: #ffffff !important; color: #000000 !important; }
.mk-cookie .mk-cookie__btn--ghost { background: transparent !important; color: #ffffff !important; border-color: rgba(255,255,255,.55) !important; }
.mk-cookie .mk-cookie__btn--ghost:hover { border-color: #ffffff !important; background: rgba(255,255,255,.10) !important; }
@media (max-width: 560px) {
    .mk-cookie__actions { flex-direction: column; }
    .mk-cookie .mk-cookie__btn { width: 100%; flex: 0 0 auto; }
}