/* ==================================================================
   THE SITE NAME IN THE HEADER
   ==================================================================

   Loaded by the public layout, so it applies on every public page.

   .header-inner .website-logo in app.css is a fixed 140px box with
   overflow:hidden, sized for an uploaded image logo. This installation has no
   image logo, so the box holds the site NAME as text — and "tryebook.shop"
   does not fit, leaving "tryebook.sho" on screen with the rest clipped off.

   This rule was written during the account dashboard work and lived in
   account-dashboard.css, which only that one page loads. The class it keys on
   is added by the shared header on every page, so every other page carried the
   class and none of them carried the rule: the eBook page, the cart, the
   search results and the login page all still clipped the name. Moving the
   rule to a file the layout itself loads is the fix, and it is a fix once
   rather than a fix per page.

   Scoped by a class the header adds only in the text case, so an installation
   that does upload a logo keeps the original fixed box and is completely
   unaffected.

   app.css is a 393KB built artefact with no build tooling on this server, so
   it is not edited. This is a separate hand-written file, the same pattern the
   cart and the dashboard already use.
   ================================================================== */

.header-inner .website-logo.website-logo-text {
    width: auto;
    max-width: 320px;
    overflow: visible;
}

.header-inner .website-logo.website-logo-text h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .header-inner .website-logo.website-logo-text {
        max-width: 62vw;
    }

    .header-inner .website-logo.website-logo-text h2 {
        font-size: 20px;
    }
}

@media (max-width: 400px) {
    .header-inner .website-logo.website-logo-text h2 {
        font-size: 17px;
    }
}

/* ==================================================================
   ACCESSIBLE PUBLIC BUY-AREA OVERRIDES
   ==================================================================

   Loaded on every public page. These correct two contrast failures the
   shipped theme carries in the eBook buy area, without touching app.css (a
   built artefact) and without restyling the theme's success buttons anywhere
   else.

   1. .theme-black .btn-success renders white on #37bc9b — 2.38:1, well under
      the 4.5:1 minimum for button text. The membership call to action is
      marked with .gd-cta-success and given a darker green here: white on
      #1e6b52 is 6.40:1.

   2. The small guest/membership notes use .text-muted (#777, 4.48:1 — a hair
      under 4.5:1). .gd-guest-note is given #6a7178 (4.95:1), the same muted
      tone the checkout uses.
   ================================================================== */

.btn.gd-cta-success,
.theme-black .btn.gd-cta-success {
    background: #1e6b52;
    border-color: #1e6b52;
    color: #ffffff;
}

.btn.gd-cta-success:hover,
.btn.gd-cta-success:focus,
.btn.gd-cta-success:active,
.theme-black .btn.gd-cta-success:hover,
.theme-black .btn.gd-cta-success:focus,
.theme-black .btn.gd-cta-success:active {
    background: #17553f;
    border-color: #17553f;
    color: #ffffff;
}

.gd-guest-note {
    color: #6a7178;
}

/* ==================================================================
   PRODUCT-PAGE CART ACTION STATE
   ==================================================================

   The buy area's "Add to cart" swaps to "View cart" once the book is in the
   cart, with a short confirmation line beneath. Both states are ordinary theme
   buttons; these rules only style the confirmation note (AA-safe green) and a
   quiet busy state while the quick-add request is in flight.
   ================================================================== */

.gd-cart-actions { display: inline; }

.gd-in-cart-note {
    clear: both;
    padding-top: 6px;
    margin: 0;
    color: #1e6b52;              /* 6.40:1 on white */
    font-weight: 600;
}

.gd-in-cart-note .fa { margin-right: 4px; }

.gd-add-to-cart.is-busy,
.ebook-cart-form button.is-busy {
    opacity: 0.65;
    cursor: progress;
}

/* [hidden] must win over the theme's display rules on these two toggled
   elements, or a hidden state would still show. */
.ebook-purchase [hidden] { display: none !important; }

/* ==================================================================
   PRODUCT PAGE — the buying surface, redesigned
   ==================================================================

   Loaded globally by the layout, scoped by gd-pp- so nothing leaks. The
   token values are the same set checkout.css and cart.css carry (text
   6.98:1, muted 4.95:1, ok-green 6.40:1 on white — all AA-checked there);
   they are re-declared here so this file stands alone.
   ================================================================== */

.gd-pp-main {
    --gd-ink: #2a2f36;
    --gd-text: #575962;
    --gd-muted: #6a7178;
    --gd-line: #e4e7ec;
    --gd-surface: #fff;
    --gd-canvas: #f7f9fc;
    --gd-ok: #1e6b52;
    --gd-ok-soft: #e9f4ef;
    --gd-ok-edge: #7fb8a3;
    --gd-radius: 8px;
    color: var(--gd-text);
}

.gd-pp-title {
    margin: 0 0 4px;
    font-size: 30px;
    line-height: 1.2;
    color: var(--gd-ink);
    font-weight: 700;
}

.gd-pp-byline { margin: 0 0 8px; font-size: 15px; color: var(--gd-muted); }
.gd-pp-byline a { font-weight: 600; }

.gd-pp-signals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 10px;
}

.gd-pp-rating { display: inline-flex; align-items: center; gap: 6px; }
.gd-pp-reviews-link { color: var(--gd-muted); font-size: 14px; }

.gd-pp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--gd-muted);
    background: var(--gd-canvas);
    border: 1px solid var(--gd-line);
    border-radius: 999px;
    padding: 2px 10px;
}

/* The four facts that weigh on the decision, one quiet dotted line. */
.gd-pp-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0 0 10px;
    padding: 0;
    font-size: 14px;
    color: var(--gd-muted);
}

.gd-pp-facts li { display: inline-flex; align-items: center; }
.gd-pp-facts li + li::before { content: "\00b7"; margin: 0 8px; color: var(--gd-line); }

.gd-pp-brief {
    margin: 0 0 14px;
    max-width: 62em;
    color: var(--gd-text);
}

/* -------------------------------------------------------- the buy box */

.gd-pp-buybox {
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    padding: 16px;
    margin: 0 0 12px;
    max-width: 560px;
}

.gd-pp-buybox .ebook-purchase { margin-bottom: 0; }
.gd-pp-buybox .ebook-purchase-price { margin-bottom: 10px; }
.gd-pp-buybox .ebook-purchase-price strong { font-size: 26px; color: var(--gd-ink); }

.gd-pp-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--gd-line);
    font-size: 13px;
    color: var(--gd-muted);
}

.gd-pp-trust i { color: var(--gd-ok); margin-right: 4px; }

/* Owned state: a real panel, never an empty bordered box. */
.gd-pp-owned {
    background: var(--gd-ok-soft, #e9f4ef);
    border: 1px solid var(--gd-ok-edge, #7fb8a3);
    border-radius: var(--gd-radius);
    padding: 14px 16px;
    margin: 0 0 12px;
    max-width: 560px;
}

.gd-pp-owned-badge {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gd-ok, #1e6b52);
}

.gd-pp-owned-badge i { margin-right: 6px; }

.gd-pp-owned-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-pp-owned-cta { min-width: 0; }


/* Secondary actions shrink into one quiet row under the buy box. */
.gd-pp-actions { margin-bottom: 8px; }
.gd-pp-actions-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gd-pp-actions-row form { display: inline-block; margin: 0; }

/* ---------------------------------------------------- the details tab */

.gd-pp-meta { margin: 0; }
.gd-pp-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e4e7ec;
}
.gd-pp-meta-row:last-child { border-bottom: 0; }
.gd-pp-meta-row dt { flex: 0 0 180px; font-weight: 600; color: #2a2f36; }
.gd-pp-meta-row dd { margin: 0; flex: 1 1 200px; color: #575962; }

/* ==================================================================
   MEMBERSHIP UPSELL — one voice on product, cart and checkout
   ================================================================== */

.gd-upsell {
    --gd-ok: #1e6b52;
    --gd-ok-soft: #e9f4ef;
    --gd-ok-edge: #7fb8a3;
    border: 1px solid var(--gd-ok-edge);
    background: var(--gd-ok-soft);
    border-radius: 8px;
    padding: 10px 12px;
    clear: both;
}

.gd-upsell-line {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--gd-ok);
}

.gd-upsell-line i { margin-right: 4px; }

.gd-upsell-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--gd-ok);
    background: var(--gd-ok);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.gd-upsell-cta:hover,
.gd-upsell-cta:focus { background: #17523f; border-color: #17523f; color: #fff; text-decoration: none; }

.gd-upsell-heading { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #2a2f36; }
.gd-upsell-note { margin: 8px 0 0; font-size: 12px; color: #5a6169; }

/* The CTA is secondary to the direct purchase everywhere it appears: a
   white-filled, green-outlined button, never a saturated block that competes
   with Buy now. */
.gd-upsell-cta {
    background: #fff;
    color: var(--gd-ok);
}
.gd-upsell-cta:hover,
.gd-upsell-cta:focus { background: var(--gd-ok); color: #fff; }

.gd-upsell-panel { margin-top: 14px; }

/* On the product page the upsell reads as a note under the buy buttons, not a
   second coloured card shouting beside them. */
.gd-upsell-product {
    background: transparent;
    border-color: transparent;
    padding-inline: 0;
}

/* ==================================================================
   FLOATING BUY BAR
   ================================================================== */

.gd-buybar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid #e4e7ec;
    box-shadow: 0 -2px 12px rgba(42, 47, 54, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.gd-buybar[hidden] { display: none; }

.gd-buybar-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}

.gd-buybar-cover {
    width: 40px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.gd-buybar-info { flex: 1 1 auto; min-width: 0; }

.gd-buybar-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2a2f36;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-buybar-price { margin: 0; font-size: 15px; color: #2a2f36; }
.gd-buybar-was { color: #6a7178; font-size: 13px; margin-right: 6px; }
.gd-buybar-upsell { font-size: 12px; color: #1e6b52; font-weight: 600; }

.gd-buybar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.gd-buybar-actions form { margin: 0; }
.gd-buybar-actions .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 640px) {
    .gd-pp-title { font-size: 24px; }
    .gd-pp-buybox { max-width: none; }
    .gd-pp-meta-row dt { flex-basis: 100%; }

    /* Mobile: essentials only — the title/price block and the buttons. */
    .gd-buybar-cover { display: none; }
    .gd-buybar-upsell { display: none; }
    .gd-buybar-inner { padding: 8px 10px; gap: 8px; }
    .gd-buybar-actions .btn { padding-left: 10px; padding-right: 10px; }
}

@media (any-pointer: coarse) {
    .gd-buybar-actions .btn { min-height: 44px; }
    .gd-upsell-cta { min-height: 44px; }
    .gd-pp-actions-row .btn { min-height: 44px; min-width: 44px; }
}

@media (prefers-contrast: more) {
    .gd-pp-buybox, .gd-upsell, .gd-buybar { border-color: #2a2f36; }
}

/* ==================================================================
   WORKSPACE SWITCHER — [ Reader | Seller ]
   ================================================================== */

.gd-ws {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid #e4e7ec;
    margin-bottom: 6px;
}

.gd-ws-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #e4e7ec;
    background: #f7f9fc;
    color: #575962;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.gd-ws-tab:hover,
.gd-ws-tab:focus { color: #2a2f36; background: #fff; text-decoration: none; }

/* The active workspace is unmistakable: filled, not merely tinted. */
.gd-ws-tab.is-active {
    background: #333645;
    border-color: #333645;
    color: #fafafa;
}

.gd-ws-tab.is-active:hover,
.gd-ws-tab.is-active:focus { color: #fafafa; background: #333645; }

.gd-ws-pending {
    cursor: default;
    color: #8a5a00;
    background: #fff6e5;
    border-color: #a8842f;
    font-weight: 400;
}

.gd-ws-become { border-style: dashed; }

/* Section headings inside the account sidebar. */
.gd-nav-heading {
    margin: 14px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a7178;
}

@media (any-pointer: coarse) {
    .gd-ws-tab { min-height: 44px; }
}

@media (prefers-contrast: more) {
    .gd-ws-tab { border-color: #2a2f36; }
}

/* ==================================================================
   FAST WORKSPACE NAVIGATION — progressive enhancement only
   ==================================================================

   Every switch is an ordinary same-origin server navigation: real URLs,
   real history, CSRF and authorization untouched, and with scripting off
   nothing changes. Browsers that implement cross-document view transitions
   read this one declaration and cross-fade between pages instead of
   flashing white; every other browser ignores it entirely. No SPA, no
   fetch layer, nothing to fall back from.
   ================================================================== */

@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }

    /* The mini cart appears in place rather than sliding. */
    .gd-drawer { animation: none !important; }
}

/* ==================================================================
   MINI CART DRAWER — the post-add cart
   ==================================================================

   A right-side slide-in drawer on desktop, a bottom sheet on phones, opened
   only when the server confirms an Add to cart and repainted only from the
   server's own summaries. Distinct from the scroll-triggered purchase bar,
   which steps aside (body.gd-drawer-open) while the drawer is open. A light
   scrim sits behind it; z-indexed above the buy bar, below Bootstrap modals.
   ================================================================== */

.gd-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 1038;
    background: rgba(42, 47, 54, 0.35);
}

.gd-drawer-scrim[hidden] { display: none; }

.gd-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 1039;
    width: 380px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-inline-start: 1px solid #e4e7ec;
    box-shadow: -8px 0 28px rgba(42, 47, 54, 0.18);
    padding: 16px;
    outline: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    animation: gd-drawer-in 180ms ease;
}

@keyframes gd-drawer-in {
    from { transform: translateX(24px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}

.gd-drawer[hidden] { display: none; }

.gd-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.gd-drawer-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e6b52;
}

.gd-drawer-title i { margin-inline-end: 5px; }

.gd-drawer-count {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #6a7178;
    margin-top: 2px;
}

.gd-drawer-close {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: #6a7178;
    cursor: pointer;
    padding: 4px 8px;
}

.gd-drawer-close:hover,
.gd-drawer-close:focus { color: #2a2f36; }

.gd-drawer-items {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.gd-drawer-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #e4e7ec;
}

.gd-drawer-cover {
    width: 44px;
    height: 62px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.gd-drawer-item-body { flex: 1 1 auto; min-width: 0; }

.gd-drawer-item-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: #2a2f36;
    overflow-wrap: anywhere;
}

.gd-drawer-item-price { margin: 0; font-size: 14px; color: #575962; }

.gd-drawer-remove {
    border: 0;
    background: none;
    color: #b62d35;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.gd-drawer-remove:hover,
.gd-drawer-remove:focus { color: #8f232a; }

.gd-drawer-remove[disabled] { opacity: 0.5; cursor: progress; }

.gd-drawer-empty {
    margin: 18px 0;
    font-size: 14px;
    color: #575962;
    text-align: center;
}

.gd-drawer-totals { margin: 12px 0; }

.gd-drawer-totals[hidden],
.gd-drawer-actions[hidden],
.gd-drawer-row[hidden],
.gd-drawer-empty[hidden] { display: none; }

.gd-drawer-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: #575962;
}

.gd-drawer-row dd { margin: 0; }

.gd-drawer-subtotal { font-weight: 700; color: #2a2f36; font-size: 15px; }

.gd-drawer-actions { display: flex; gap: 8px; }

.gd-drawer-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    white-space: normal;
}

.gd-drawer-continue {
    display: block;
    width: 100%;
    margin-top: 8px;
    border: 0;
    background: none;
    color: #575962;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 6px;
}

.gd-drawer-continue:hover,
.gd-drawer-continue:focus { color: #2a2f36; }

.gd-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The scroll purchase bar steps aside while the drawer is open. */
body.gd-drawer-open .gd-buybar { display: none; }

@media (max-width: 640px) {
    /* Bottom sheet: anchored to the bottom, safe-area aware, capped height. */
    .gd-drawer {
        top: auto;
        inset-inline: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: 82vh;
        border-inline-start: 0;
        border-top: 1px solid #e4e7ec;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -8px 28px rgba(42, 47, 54, 0.2);
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        animation-name: gd-sheet-in;
    }

    @keyframes gd-sheet-in {
        from { transform: translateY(20px); opacity: 0.6; }
        to { transform: none; opacity: 1; }
    }
}

@media (any-pointer: coarse) {
    .gd-drawer-btn, .gd-drawer-close, .gd-drawer-continue, .gd-drawer-remove { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .gd-drawer { animation: none; }
}

@media (prefers-contrast: more) {
    .gd-drawer { border-color: #2a2f36; }
}

/* Workspace partial-navigation loading state: a subtle dim, no spinner. */
/* Applied only when a navigation takes longer than 150ms (the script
   delays it), so fast swaps never flash: a soft fade on the outgoing
   content plus a thin indeterminate progress line along its top edge. */
#workspace-content.is-ws-loading {
    opacity: 0.7;
    transition: opacity 140ms ease;
    pointer-events: none;
    position: relative;
}

#workspace-content.is-ws-loading::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    height: 2px;
    width: 38%;
    background: #1572e8;
    border-radius: 2px;
    animation: gd-ws-progress 900ms ease-in-out infinite;
}

@keyframes gd-ws-progress {
    0% { inset-inline-start: 0; width: 12%; }
    50% { inset-inline-start: 31%; width: 38%; }
    100% { inset-inline-start: 88%; width: 12%; }
}

@media (prefers-reduced-motion: reduce) {
    #workspace-content.is-ws-loading { transition: none; }
    #workspace-content.is-ws-loading::before { animation: none; }
}


/* ==================================================================
   MEMBERSHIP PRICING — the shared plan-card design system
   ==================================================================

   Used by /membership, /account/membership and /seller/membership. It
   lived in a Blade partial pushed into each page's <head>, which broke
   the moment workspace partial navigation arrived: the navigator swaps
   only the workspace content region, so a page reached without a full
   load carried its markup but never its head styles, and the membership
   pages degraded to bare Bootstrap. Styles a workspace destination needs
   live HERE, in the one stylesheet every public page always loads — a
   page must look identical whether it was hard-loaded or swapped in.
   All selectors are gd-scoped; nothing outside the membership markup can
   match them.
   ================================================================== */

    /* ---- Billing period segmented control ---- */
    .gd-period-tabs { display: inline-block; background: #eef1ef; border-radius: 10px; padding: 4px; margin-bottom: 18px; }
    .gd-period-tabs .period-tab,
    .gd-period-tabs .period-tab.btn {
        border: 0; border-radius: 7px; background: transparent; color: #555;
        font-weight: 600; font-size: 13px; padding: 8px 18px; box-shadow: none; min-height: 40px;
    }
    .gd-period-tabs .period-tab.active {
        background: #1e6b52; color: #fff; box-shadow: 0 1px 3px rgba(39,174,96,.35);
    }
    .gd-period-tabs .period-tab:focus { outline: 2px solid #1e6b52; outline-offset: 2px; }
    @media (max-width: 480px) {
        .gd-period-tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .gd-period-tabs .period-tab { flex: 1 1 auto; white-space: nowrap; }
    }

    /* ---- Current plan summary card ---- */
    .gd-current-card {
        border: 2px solid #1e6b52; border-radius: 12px; background: #f7fdf9;
        padding: 18px 20px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(39,174,96,.10);
    }
    .gd-current-badge {
        display: inline-block; background: #1e6b52; color: #fff; font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .05em; padding: 3px 12px; border-radius: 20px; margin-bottom: 8px;
    }
    .gd-current-name { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
    .gd-current-name .label { vertical-align: middle; margin-left: 8px; }
    .gd-current-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 10px; }
    .gd-fact-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #767676; }
    .gd-fact-value { display: block; font-size: 15px; font-weight: 700; color: #222; }
    .gd-current-actions { margin-top: 6px; }
    [dir=rtl] .gd-current-name .label { margin-left: 0; margin-right: 8px; }

    /* ---- Plan card grid (flex enhancement over BS3 float columns).
       sm+ only: below 768px the columns must fall back to Bootstrap's own
       full-width stacking — an ungated flex row let the columns shrink to
       content width and phones got skinny side-floating cards. ---- */
    @media (min-width: 768px) {
        .gd-plans-row { display: flex; flex-wrap: wrap; }
        .gd-plans-row > [class*="col-"] { display: flex; float: none; margin-bottom: 16px; }
    }
    @media (max-width: 767px) {
        .gd-plans-row > [class*="col-"] { margin-bottom: 16px; }
    }

    .gd-plan-card.thumbnail {
        display: flex; flex-direction: column; width: 100%; min-width: 0;
        border: 1px solid #e6e6e6; border-radius: 12px; background: #fff;
        padding: 22px 20px; margin-bottom: 0; box-shadow: 0 1px 3px rgba(0,0,0,.06);
        text-align: left; transition: box-shadow .15s, border-color .15s;
    }
    [dir=rtl] .gd-plan-card.thumbnail { text-align: right; }
    .gd-plan-card.thumbnail:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
    .gd-plan-card.gd-current { border: 2px solid #1e6b52; box-shadow: 0 2px 10px rgba(39,174,96,.12); }
    .gd-plan-card.gd-highlighted { border: 2px solid #1e6b52; }

    .gd-plan-name { font-size: 17px; font-weight: 800; margin: 0 0 10px; overflow-wrap: anywhere; }
    .gd-plan-badge-row { min-height: 22px; margin-bottom: 4px; }

    .gd-price-row { min-height: 52px; margin-bottom: 6px; }
    .gd-price { font-size: 30px; font-weight: 800; line-height: 1.1; color: #1a1a1a; }
    .gd-price.text-success { color: #1e6b52; }
    .gd-price-period { font-size: 13px; color: #767676; font-weight: 600; }
    .gd-price-note { font-size: 12px; color: #767676; margin-top: 2px; }
    .gd-savings { font-size: 12px; color: #1e824c; font-weight: 700; margin-top: 2px; }

    .gd-benefits { list-style: none; margin: 12px 0; padding: 0; flex: 1 1 auto; }
    .gd-benefit { display: flex; align-items: flex-start; margin-bottom: 8px; font-size: 13.5px; color: #333; }
    .gd-benefit .fa { color: #1e6b52; margin-top: 2px; margin-right: 8px; flex: 0 0 auto; }
    [dir=rtl] .gd-benefit .fa { margin-right: 0; margin-left: 8px; }
    .gd-benefit span { min-width: 0; overflow-wrap: anywhere; }
    .gd-benefit-more { font-size: 12.5px; color: #767676; }

    /* Seller share block inside a card */
    .gd-share-row { display: flex; text-align: center; margin: 8px 0 6px; }
    .gd-share-cell { flex: 1 1 50%; }
    .gd-share-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #767676; }
    .gd-share-value { font-size: 24px; font-weight: 800; }
    .gd-earn-example {
        background: #f7fdf9; border: 1px solid #d7f0e0; border-radius: 8px;
        padding: 8px 12px; margin: 4px 0 8px; font-size: 12.5px; color: #444;
    }
    .gd-earn-example strong { color: #1e824c; }

    /* CTA pinned to the bottom of equal-height cards */
    .gd-plan-cta { margin-top: auto; padding-top: 10px; }
    .gd-plan-cta .btn { font-weight: 700; }
    .gd-plan-cta form { margin: 0 0 6px; }

    /* The plan CTA must never overflow its card: long plan names wrap. */
    .gd-plan-cta .btn { white-space: normal; overflow-wrap: anywhere; }

    /* Exactly one purchasable plan: centre the card instead of stranding it on
       the left with dead space to the right. Data-driven — the row only carries
       gd-plans-centered when the rendered plan count is 1. Scoped to sm+ where
       the Bootstrap column has a percentage width; at xs it already stacks to a
       full-width single column, so no override is needed there. Flex centres
       the floated column cleanly (flex items ignore float). */
    @media (min-width: 768px) {
        .gd-plans-row.gd-plans-centered {
            display: flex;
            justify-content: center;
        }
    }

    /* The payment provider, demoted to trust text under the CTA. */
    .gd-gateway-note {
        margin: 8px 0 0;
        font-size: 12px;
        color: #6a7178;
        text-align: center;
    }
    .gd-price-note { font-size: 12px; color: #6a7178; }

/* ==================================================================
   ACCOUNT DASHBOARD — folded in for the same reason as the membership
   styles above: the dashboard is a workspace destination too, and a
   dashboard reached by partial navigation must look exactly like a
   hard-loaded one. Formerly public/css/account-dashboard.css.
   ================================================================== */

/*
 * Gidoroo Account Dashboard 2.0.
 *
 * Hand-authored, no build step, no framework. Loaded only on the account
 * dashboard, through the theme layout's @stack('styles').
 *
 * Two jobs. Most of the file styles the new dashboard. The block at the top
 * repairs three real rendering defects in the shipped theme stylesheet, which
 * is a 382KB minified build artifact this installation has no toolchain to
 * rebuild — so the corrections live here, small and readable, rather than
 * being patched into a file nobody can review.
 *
 * The new markup is namespaced `gd-` throughout. That is not decoration: the
 * theme carries a rule reaching every `a` inside `.account-information`, and
 * namespacing keeps the dashboard out of its way entirely rather than
 * fighting it with specificity.
 */

/* ==================================================================
   REPAIRS TO THE SHIPPED THEME STYLESHEET
   ================================================================== */

/*
 * Defect 1 — invisible buttons on every account page.
 *
 * app.css carries, for each colour theme:
 *
 *     .theme-black .my-dashboard .account-information a { color: #333645 }
 *
 * at specificity (0,3,1), while the button's own colour comes from
 *
 *     .theme-black .btn-primary { background:#333645; color:#fafafa }
 *
 * at (0,2,0). The first wins, so a primary button inside the account area is
 * painted in its own background colour — measured contrast 1.00:1, a
 * perfectly invisible label. A .btn-default happened to survive only because
 * its background is white.
 *
 * The rule was written for text links and should never have reached buttons.
 * Excluding them restores the intended colour for every theme at once,
 * without touching the link styling it was actually for.
 */
.my-dashboard .account-information a.btn,
.my-account .my-dashboard .account-information a.btn {
    color: inherit;
}

.my-dashboard .account-information a.btn-primary,
.my-account .my-dashboard .account-information a.btn-primary {
    color: #fafafa;
}

.my-dashboard .account-information a.btn-default,
.my-account .my-dashboard .account-information a.btn-default {
    color: #333;
}

/*
 * Defect 2 — the site name is clipped in the header.
 *
 * The rule that fixes it now lives in brand.css, which the public layout
 * loads on EVERY page. It was here, and only here, which is why the site name
 * was still clipped everywhere except this dashboard. Nothing is duplicated
 * back into this file: one rule, one place, every page.
 */

/* ==================================================================
   THE DASHBOARD
   ================================================================== */

.gd-dash {
    --gd-ink: #2a2f36;
    --gd-text: #575962;
    --gd-muted: #6a7178;
    --gd-line: #e4e7ec;
    --gd-surface: #fff;
    --gd-canvas: #f7f9fc;
    --gd-accent: #333645;
    --gd-accent-ink: #fafafa;
    --gd-ok: #1e6b2b;
    --gd-ok-soft: #e8f6ea;
    --gd-ok-edge: #5a9669;
    --gd-warn: #8a5a00;
    --gd-warn-soft: #fff6e5;
    --gd-warn-edge: #a8842f;
    --gd-info-soft: #eef1f8;
    --gd-info-edge: #8a91a6;
    --gd-radius: 8px;

    color: var(--gd-text);
}

.gd-dash [hidden] { display: none !important; }

.gd-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------- greeting */

.gd-welcome {
    margin: 0 0 20px;
    padding: 0 0 18px;
    border-block-end: 1px solid var(--gd-line);
}

.gd-welcome h1 {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--gd-ink);
}

.gd-welcome p {
    margin: 0;
    color: var(--gd-muted);
    font-size: 14px;
}

/* ---------------------------------------------------------- tiles */

.gd-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-block-end: 26px;
}

.gd-tile {
    display: flex;
    flex-direction: column;
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    padding: 16px;
    min-inline-size: 0;
}

.gd-tile-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gd-muted);
    margin-block-end: 10px;
}

.gd-tile-value {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--gd-ink);
    margin-block-end: 4px;
    overflow-wrap: anywhere;
}

.gd-tile-value-sm { font-size: 18px; }

.gd-tile-help {
    font-size: 13px;
    color: var(--gd-muted);
    margin: 0 0 14px;
    flex: 1 1 auto;
}

.gd-tile-action { margin-block-start: auto; }

/*
 * Status is a word plus a shape, never a colour on its own: the label reads
 * the same to a screen reader, on a monochrome display and to anyone who does
 * not distinguish these hues.
 */
.gd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--gd-info-edge);
    background: var(--gd-info-soft);
    color: var(--gd-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    padding: 2px 10px;
    margin-block-end: 8px;
}

.gd-status-ok    { background: var(--gd-ok-soft);   border-color: var(--gd-ok-edge);   color: var(--gd-ok); }
.gd-status-warn  { background: var(--gd-warn-soft); border-color: var(--gd-warn-edge); color: var(--gd-warn); }

/* --------------------------------------------------------- button */

.gd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-block-size: 40px;
    padding: 9px 16px;
    border-radius: var(--gd-radius);
    border: 1px solid var(--gd-accent);
    background: var(--gd-accent);
    color: var(--gd-accent-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
}

.gd-btn:hover,
.gd-btn:focus {
    background: #494d62;
    border-color: #494d62;
    color: var(--gd-accent-ink);
    text-decoration: none;
}

/*
 * The quiet button's edge is its own token, darker than the card borders.
 *
 * A card outline groups content and identifies nothing, so the light --gd-line
 * is fine there. A button IS a component, and WCAG 1.4.11 wants its boundary
 * at 3:1 against the surface — --gd-line measures 1.24:1, which on a pale
 * screen makes a secondary button hard to find at all.
 */
.gd-btn-quiet {
    background: var(--gd-surface);
    border-color: var(--gd-info-edge); /* 3.14:1 on white */
    color: var(--gd-ink);
}

.gd-btn-quiet:hover,
.gd-btn-quiet:focus {
    background: var(--gd-canvas);
    border-color: var(--gd-info-edge);
    color: var(--gd-ink);
}

/* ---------------------------------------------------------- recent */

.gd-section { margin-block-end: 26px; }

.gd-section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    margin-block-end: 12px;
}

.gd-section-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--gd-ink);
}

.gd-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gd-book {
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-inline-size: 0;
}

.gd-book-cover {
    aspect-ratio: 3 / 4;
    background: var(--gd-canvas);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--gd-muted);
}

.gd-book-cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.gd-book-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gd-ink);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.gd-book .gd-btn { inline-size: 100%; font-size: 13px; min-block-size: 38px; }

/* ---------------------------------------------------------- empty */

.gd-empty {
    background: var(--gd-surface);
    border: 1px dashed var(--gd-line);
    border-radius: var(--gd-radius);
    padding: 26px 20px;
    text-align: center;
    color: var(--gd-muted);
}

.gd-empty p { margin: 0 auto 14px; max-inline-size: 46ch; }

/* ----------------------------------------------------- responsive */

@media (max-width: 767px) {
    .gd-tiles { grid-template-columns: minmax(0, 1fr); }
    .gd-welcome h1 { font-size: 20px; }
    .gd-books { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

@media (pointer: coarse) {
    .gd-btn { min-block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .gd-dash * { transition: none !important; animation: none !important; }
}

@media (prefers-contrast: more) {
    .gd-tile, .gd-book, .gd-empty { border-color: var(--gd-ink); }
    .gd-tile-help, .gd-tile-label, .gd-welcome p { color: var(--gd-ink); }
}

.gd-dash a:focus-visible,
.gd-dash button:focus-visible {
    outline: 2px solid var(--gd-accent);
    outline-offset: 2px;
}


/* ==================================================================
   GLOBAL STOREFRONT SHELL — announcement, header, nav CTAs, footer
   ==================================================================
   By owner decision the reference visual system is the storefront's
   shell on EVERY public page: one announcement bar, one header, one
   nav row with two context-aware CTA pills, one navy footer. The old
   dark utility bar is retired from the layout; markup lives in the
   shared includes, state in Themes\Cynoebook\Support\StorefrontHeader.
   Self-contained values — no page-scoped custom properties here.
   ================================================================== */

/* ------------------------------------------------- announcement --- */
.gd-pp2.gd-pp2-announce {
    margin: 0;
    max-width: none;
    border-radius: 0;
    min-height: 60px;
    background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 48%, #f97316 100%);
    color: #fff;
    font-family: 'Open Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.gd-pp2 .gd-pp2-announce-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    min-height: 60px;
    padding: 8px 20px;
}

.gd-pp2 .gd-pp2-announce-headline {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.gd-pp2 .gd-pp2-announce-headline .fa {
    margin-inline-end: 6px;
}

.gd-pp2 .gd-pp2-countdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gd-pp2 .gd-pp2-count-block {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #1e2749;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.gd-pp2 .gd-pp2-count-block b {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.gd-pp2 .gd-pp2-count-block small {
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1;
}

.gd-pp2 .gd-pp2-count-sep {
    font-weight: 700;
    color: #fff;
}

.gd-pp2 .gd-pp2-announce-cta {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-inline-start: 24px;
}

.gd-pp2 .gd-pp2-announce-cta:hover,
.gd-pp2 .gd-pp2-announce-cta:focus {
    color: #fff;
    text-decoration: underline;
}

/* ---------------------------------------------------- header row 1 */
.header-wrapper {
    height: auto !important;
}

.header-wrapper .header-inner {
    background: #fff;
    border-bottom: 1px solid #f0f0f3;
    height: auto;
    min-height: 0;
    padding-block: 0;
}

@media (min-width: 1200px) {
    .header-inner > .container,
    .megamenu-wrapper .container,
    .footer .container {
        width: min(1320px, 100%);
        max-width: 1320px;
    }
}

@media (min-width: 768px) {
    .header-inner > .container {
        display: flex;
        align-items: center;
        gap: 32px;
        padding-block: 36px;
    }

    .header-inner .website-logo { order: 1; float: none; flex: 0 0 auto; }
    .header-inner .search-area { order: 2; float: none; flex: 1 1 auto; max-width: 640px; margin-inline: auto; }
    .header-inner .gd-hdr-actions { order: 3; }
    .header-inner .gd-hdr-auth { order: 4; float: none; }
    .header-inner .profile-icon { order: 5; float: none; margin: 0; }
}

.header-inner .website-logo.website-logo-text h2 {
    margin: 0;
    line-height: 1.1;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: #1e2749;
    letter-spacing: -0.02em;
}

.header-inner .profile-icon {
    height: 46px;
    display: inline-flex;
    align-items: center;
}

.header-inner .profile-icon.hidden {
    display: none;
}

/* guest sign-in pair, where the account control would sit */
.gd-hdr-auth {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.gd-hdr-auth-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #575962;
    min-height: 44px;
}

.gd-hdr-auth-link .fa { font-size: 18px; }

.gd-hdr-auth-link:hover,
.gd-hdr-auth-link:focus {
    color: #7c3aed;
    text-decoration: none;
}

/* THE SEARCH PILL — fully rounded, violet action. */
.header-inner .search-area .search-box {
    display: flex;
    align-items: center;
    height: 46px;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    overflow: visible;
    padding-inline-start: 22px;
    padding-inline-end: 5px;
    box-shadow: none;
}

.header-inner .search-area .search-box:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.header-inner .search-area .search-box-input {
    flex: 1 1 auto;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: #2a2f36;
    padding: 0;
    box-shadow: none;
    width: auto;
}

.header-inner .search-area .search-box-input:focus { outline: none; }

.header-inner .search-area .search-box-button {
    display: flex;
    align-items: center;
    gap: 8px;
    position: static;
}

.header-inner .search-area .search-box-button::before {
    content: "";
    width: 1px;
    height: 24px;
    background: #e5e7eb;
}

.header-inner .search-area .search-box-select,
.header-inner .search-area .select2-container {
    order: 1;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: #6a7178;
    max-width: 150px;
    height: auto;
}

.header-inner .search-area .search-box .search-box-btn {
    order: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    border: 0;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 140ms ease;
}

.header-inner .search-area .search-box .search-box-btn:hover,
.header-inner .search-area .search-box .search-box-btn:focus {
    background: #6d28d9 !important;
}

/* quick actions: wishlist + cart */
.gd-hdr-actions { display: none; }

@media (min-width: 992px) {
    .gd-hdr-actions {
        display: flex;
        align-items: center;
        gap: 32px;
        flex: 0 0 auto;
    }
}

.gd-hdr-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #575962;
    font-size: 13px;
    line-height: 1;
    min-height: 44px;
}

.gd-hdr-action:hover,
.gd-hdr-action:focus {
    color: #7c3aed;
    text-decoration: none;
}

.gd-hdr-action .fa { font-size: 18px; }

.gd-hdr-action .gd-hdr-badge {
    position: absolute;
    top: 2px;
    inset-inline-start: 10px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------- header row 2 */
.megamenu-wrapper {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f3;
    height: auto !important;
}

.megamenu-wrapper .navbar-default {
    min-height: 56px;
    display: flex;
    align-items: center;
    background: transparent !important;
    border: 0;
    margin: 0;
    box-shadow: none;
}

.megamenu-wrapper .category-menu-wrapper { background: transparent !important; }

.megamenu-wrapper .category-menu-dropdown {
    background: transparent !important;
    color: #1e2749 !important;
    height: auto !important;
    padding-block: 18px;
    font-size: 14px;
    font-weight: 600;
}

.megamenu-wrapper .category-menu-dropdown:hover,
.megamenu-wrapper .category-menu-dropdown:focus {
    color: #7c3aed !important;
}

.megamenu-wrapper .navbar-nav > li > a {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563 !important;
    padding-block: 18px;
}

.megamenu-wrapper .navbar-nav > li > a:hover,
.megamenu-wrapper .navbar-nav > li > a:focus {
    color: #7c3aed !important;
    background: transparent !important;
}

/* the two context-aware CTA pills — one visual family, membership in
   lavender fill, seller as its violet-outline complement */
.megamenu-wrapper .gd-nav-ctas {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gd-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.gd-nav-pill-member {
    background: #f3effe;
    color: #7c3aed;
}

.gd-nav-pill-member:hover,
.gd-nav-pill-member:focus {
    background: #e9e0fd;
    color: #6d28d9;
    text-decoration: none;
}

.gd-nav-pill-seller {
    background: #fff;
    border: 1.5px solid #d9cdf6;
    color: #1e2749;
}

.gd-nav-pill-seller:hover,
.gd-nav-pill-seller:focus {
    border-color: #7c3aed;
    color: #6d28d9;
    text-decoration: none;
}

@media (max-width: 991px) {
    /* the mobile header stays uncluttered: the account/sidebar menus
       carry membership and seller entries at these widths */
    .megamenu-wrapper .gd-nav-ctas { display: none; }
}

/* ==================================================================
   GLOBAL STOREFRONT FOOTER — the reference's navy architecture
   ================================================================== */
.footer {
    background: #1e2749 !important;
    border-top: 0;
    color: rgba(255, 255, 255, 0.72) !important;
}

.footer .footer-top { padding-block: 56px 40px; }

.footer .footer-logo h2 {
    color: #fff !important;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin-top: 0;
}

.footer .footer-brief {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px;
    line-height: 1.7;
    max-width: 280px;
}

.footer .title,
.footer h4.title {
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 14px;
}

.footer .links .list-inline li { display: block; margin-bottom: 8px; padding: 0; font-size: 13px; }

.footer a { color: rgba(255, 255, 255, 0.62) !important; transition: color 140ms ease; }

.footer a:hover,
.footer a:focus { color: #fff !important; text-decoration: none; }

.footer .gd-ftr-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.footer .gd-ftr-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 14px;
}

.footer .gd-ftr-social a:hover,
.footer .gd-ftr-social a:focus { background: rgba(255, 255, 255, 0.18); }

.footer .gd-ftr-pay-title { margin-bottom: 14px; }

.footer .gd-ftr-pay {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.footer .gd-ftr-pay li {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.footer .gd-ftr-secure {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.footer .footer-bottom {
    background: rgba(0, 0, 0, 0.18) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer .copyright { color: rgba(255, 255, 255, 0.55) !important; font-size: 12px; }

/* ==================================================================
   NEWSLETTER PANEL — the reference's violet gradient card, applied to
   the theme's existing subscribe component (renders only while the
   real newsletter setting is on)
   ================================================================== */
.subscribe-wrapper {
    background: linear-gradient(90deg, #8b5cf6, #6d28d9) !important;
    border-radius: 20px;
    max-width: 1320px;
    margin: 48px auto;
    padding: 32px 40px;
    color: #fff;
}

.subscribe-wrapper .title,
.subscribe-wrapper h2,
.subscribe-wrapper h3 { color: #fff !important; }

.subscribe-wrapper .btn,
.subscribe-wrapper button[type="submit"] {
    background: #1e2749 !important;
    border-color: #1e2749 !important;
    color: #fff !important;
    border-radius: 10px;
    min-height: 48px;
}

.subscribe-wrapper input[type="email"],
.subscribe-wrapper input[type="text"] {
    min-height: 48px;
    border-radius: 10px;
    border: 0;
}

/* ==================================================================
   ACCOUNT DASHBOARD 2.0 — the storefront's violet system, applied to
   the reader dashboard. Real figures only; the layout carries no slot
   for a number the platform cannot prove (there is no reading-progress
   or reading-time tracking, so there is no activity chart).
   ================================================================== */

/* welcome band */
.gd-dash .gd-welcome {
    position: relative;
    padding: 22px 26px;
    border-radius: 16px;
    background: linear-gradient(120deg, #f5f3ff 0%, #ffffff 55%);
    border: 1px solid #e9e4f8;
    margin-bottom: 24px;
    overflow: hidden;
}

.gd-dash .gd-welcome::after {
    content: "";
    position: absolute;
    inset-block: -40px -40px;
    inset-inline-end: -40px;
    width: 220px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(124, 58, 237, 0.12), transparent);
    pointer-events: none;
}

.gd-dash .gd-welcome h1 {
    margin: 0 0 4px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1e2749;
}

.gd-dash .gd-welcome p { margin: 0; color: #6a7178; }

/* the four tiles, one row, lavender icon tiles */
.gd-dash .gd-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.gd-dash .gd-tile {
    border: 1px solid #e9e4f8;
    border-radius: 14px;
    padding: 18px;
    background: #fff;
}

.gd-dash .gd-tile-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a7178;
}

.gd-dash .gd-tile-label .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f3effe;
    color: #7c3aed;
    font-size: 18px;
}

/* the dashboard's buttons pick up the violet family */
.gd-dash .gd-btn,
.gd-upgrade-card .gd-btn {
    background: #7c3aed;
    border: 1.5px solid #7c3aed;
    color: #fff;
    border-radius: 10px;
}

.gd-dash .gd-btn:hover,
.gd-dash .gd-btn:focus,
.gd-upgrade-card .gd-btn:hover,
.gd-upgrade-card .gd-btn:focus {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
    text-decoration: none;
}

.gd-dash .gd-btn-quiet {
    background: #fff;
    color: #1e2749;
    border-color: #d9cdf6;
}

.gd-dash .gd-btn-quiet:hover,
.gd-dash .gd-btn-quiet:focus {
    background: #faf8ff;
    color: #6d28d9;
    border-color: #7c3aed;
}

/* quick actions */
.gd-dash .gd-section-title {
    margin: 0 0 14px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1e2749;
}

.gd-dash .gd-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.gd-dash .gd-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    border: 1px solid #e9e4f8;
    border-radius: 14px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #1e2749;
    text-align: center;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}

.gd-dash .gd-quick-card:hover,
.gd-dash .gd-quick-card:focus {
    text-decoration: none;
    color: #1e2749;
    border-color: #cdbcf4;
    box-shadow: 0 4px 12px rgba(30, 39, 73, 0.08);
}

.gd-dash .gd-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 17px;
}

.gd-dash .gd-quick-icon.is-violet { background: #f3effe; color: #7c3aed; }
.gd-dash .gd-quick-icon.is-rose { background: #fdeef2; color: #d6336c; }
.gd-dash .gd-quick-icon.is-amber { background: #fdf3e2; color: #b8860b; }
.gd-dash .gd-quick-icon.is-green { background: #e9f6ec; color: #1e7e34; }
.gd-dash .gd-quick-icon.is-blue { background: #e8f1fd; color: #1d62d1; }

/* recently added: book card + gradient companion */
.gd-dash .gd-recent-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.gd-dash .gd-books {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.gd-dash .gd-book {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid #e9e4f8;
    border-radius: 14px;
    background: #fff;
    padding: 16px;
}

.gd-dash .gd-book-cover {
    flex: 0 0 auto;
    width: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f4ee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c6cbd2;
}

.gd-dash .gd-book-cover img { display: block; width: 100%; height: auto; }

.gd-dash .gd-book-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gd-dash .gd-book-title { font-weight: 700; color: #1e2749; }
.gd-dash .gd-book-cat { font-size: 12px; color: #6a7178; }
.gd-dash .gd-book-date { font-size: 12px; color: #8a8f99; }
.gd-dash .gd-book-meta .gd-btn { align-self: flex-start; margin-top: 4px; }

.gd-dash .gd-keep-card {
    border-radius: 14px;
    background: linear-gradient(135deg, #f5f3ff, #ece5fc);
    border: 1px solid #e2d8f9;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.gd-dash .gd-keep-head {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1e2749;
}

.gd-dash .gd-keep-head .fa { color: #7c3aed; margin-inline-end: 8px; }
.gd-dash .gd-keep-text { margin: 0; color: #6a7178; font-size: 13px; }

/* continue exploring */
.gd-dash .gd-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.gd-dash .gd-explore-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #e9e4f8;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    color: #1e2749;
    transition: box-shadow 140ms ease;
}

.gd-dash .gd-explore-card:hover,
.gd-dash .gd-explore-card:focus {
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(30, 39, 73, 0.10);
    color: #1e2749;
}

.gd-dash .gd-explore-media {
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    background: #f7f4ee;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c6cbd2;
}

.gd-dash .gd-explore-media img { width: 100%; height: 100%; object-fit: contain; }
.gd-dash .gd-explore-title { font-size: 13px; font-weight: 600; }
.gd-dash .gd-explore-cat { font-size: 11px; color: #6a7178; }

/* sidebar: card + violet active + upgrade promo */
.my-account .sidebar-menu {
    border: 1px solid #e9e4f8;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}

.my-account .sidebar-menu .list-inline li.active a,
.my-account .sidebar-menu .list-inline li a:hover,
.my-account .sidebar-menu .list-inline li a:focus {
    color: #7c3aed;
}

.my-account .sidebar-menu .list-inline li.active {
    background: #f3effe;
    border-radius: 10px;
}

.gd-upgrade-card {
    margin-top: 16px;
    border-radius: 14px;
    border: 1px solid #e2d8f9;
    background: linear-gradient(160deg, #f5f3ff, #ffffff);
    padding: 18px;
}

.gd-upgrade-card .gd-upgrade-head {
    margin: 0 0 6px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-weight: 700;
    color: #1e2749;
}

.gd-upgrade-card .gd-upgrade-head .fa { color: #7c3aed; margin-inline-end: 6px; }
.gd-upgrade-card .gd-upgrade-text { margin: 0 0 12px; font-size: 13px; color: #6a7178; }

@media (max-width: 900px) {
    .gd-dash .gd-recent-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- dashboard 2.0, pass 2 */
/* welcome hero with the decorative art */
.gd-dash .gd-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.gd-dash .gd-welcome-art {
    flex: 0 0 auto;
    width: 220px;
    height: auto;
}

@media (max-width: 700px) {
    .gd-dash .gd-welcome-art { display: none; }
}

/* per-card icon tints, in the target's order */
.gd-dash .gd-tile:nth-of-type(2) .gd-tile-label .fa { background: #e9f6ec; color: #1e7e34; }
.gd-dash .gd-tile:nth-of-type(3) .gd-tile-label .fa { background: #e8f1fd; color: #1d62d1; }
.gd-dash .gd-tile:nth-of-type(4) .gd-tile-label .fa { background: #fdf3e2; color: #b8860b; }

.gd-dash .gd-book-author { font-size: 12px; color: #6a7178; }

/* explore card footer: category left, price right */
.gd-dash .gd-explore-author { font-size: 11px; color: #8a8f99; }

.gd-dash .gd-explore-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.gd-dash .gd-explore-price { font-size: 13px; font-weight: 700; color: #7c3aed; }

/* activity summary: chart + metric rows */
.gd-dash .gd-activity-card {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px;
    border: 1px solid #e9e4f8;
    border-radius: 14px;
    background: #fff;
    padding: 20px;
}

.gd-dash .gd-activity-chart { position: relative; }
.gd-dash .gd-activity-chart svg { width: 100%; height: auto; display: block; }

.gd-dash .gd-activity-empty {
    position: absolute;
    inset-block-start: 38%;
    inset-inline: 0;
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: #8a8f99;
}

.gd-dash .gd-activity-metrics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.gd-dash .gd-activity-metrics li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid #f1edfb;
}

.gd-dash .gd-activity-metrics li:last-child { border-bottom: 0; }
.gd-dash .gd-activity-metrics .gd-quick-icon { width: 36px; height: 36px; font-size: 14px; }
.gd-dash .gd-activity-label { flex: 1 1 auto; font-size: 13px; color: #575962; }
.gd-dash .gd-activity-value { font-weight: 700; color: #1e2749; }

@media (max-width: 900px) {
    .gd-dash .gd-activity-card { grid-template-columns: 1fr; }
}

/* sidebar promo card, both states, with the crown art */
.gd-upgrade-card { text-align: center; }
.gd-upgrade-card .gd-upgrade-art { width: 96px; height: auto; margin-bottom: 8px; }

/* ==================================================================
   MY PURCHASES 2.0 — the account shell's violet system on the
   purchase history. Presentation only; the figures are ledgers.
   ================================================================== */

.gd-mp .gd-mp-hero h1 { font-size: 26px; }

/* summary row: one card, four cells */
.gd-mp .gd-mp-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    padding: 18px 22px;
    margin-block: 20px 24px;
}

.gd-mp .gd-mp-metric { display: flex; align-items: center; gap: 12px; }
.gd-mp .gd-mp-metric-body { display: flex; flex-direction: column; line-height: 1.2; }
.gd-mp .gd-mp-metric-body strong { font-size: 20px; font-weight: 800; color: #1e2749; }
.gd-mp .gd-mp-metric-body small { font-size: 12px; color: #6a7178; }

/* the purchase card */
.gd-mp .gd-mp-card { padding: 0; overflow: hidden; }

.gd-mp .gd-mp-tabs {
    display: flex;
    gap: 4px;
    padding: 14px 20px 0;
    border-bottom: 1px solid #eef0f4;
}

.gd-mp .gd-mp-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #6a7178;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
}

.gd-mp .gd-mp-tab:hover,
.gd-mp .gd-mp-tab:focus { color: #7c3aed; text-decoration: none; }

.gd-mp .gd-mp-tab.is-active { color: #7c3aed; border-bottom-color: #7c3aed; }

.gd-mp .gd-mp-panel { padding: 8px 20px 20px; }

/* the table, grid-built so its mobile card form is honest markup */
.gd-mp .gd-mp-thead,
.gd-mp .gd-mp-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) 1fr 1fr 0.8fr auto;
    gap: 12px;
    align-items: center;
}

.gd-mp .gd-mp-thead {
    background: #f5f3ff;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a7178;
    margin-block: 12px 4px;
}

.gd-mp .gd-mp-row {
    padding: 14px 16px;
    border-bottom: 1px solid #f1edfb;
}

.gd-mp .gd-mp-row:last-child { border-bottom: 0; }

.gd-mp .gd-mp-cell-book { display: flex; align-items: center; gap: 14px; min-width: 0; }

.gd-mp .gd-mp-cover {
    flex: 0 0 auto;
    width: 52px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: #f7f4ee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c6cbd2;
}

.gd-mp .gd-mp-cover img { width: 100%; height: 100%; object-fit: cover; }

.gd-mp .gd-mp-bookmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-mp .gd-mp-title { font-weight: 700; color: #1e2749; }
.gd-mp .gd-mp-title:hover, .gd-mp .gd-mp-title:focus { color: #7c3aed; text-decoration: none; }
.gd-mp .gd-mp-sub { font-size: 12px; color: #6a7178; }
.gd-mp .gd-mp-cat { color: #8a8f99; }

.gd-mp .gd-mp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.gd-mp .gd-mp-badge.is-ok { background: #e9f6ec; color: #1e6b2b; }
.gd-mp .gd-mp-badge.is-warn { background: #fff6e5; color: #8a5a00; }
.gd-mp .gd-mp-badge.is-muted { background: #f1f3f6; color: #575962; }

.gd-mp .gd-mp-price { font-weight: 700; color: #1e2749; }

.gd-mp .gd-mp-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.gd-mp .gd-mp-read { padding: 8px 18px; }

/* the ellipsis menu — a native details popover */
.gd-mp .gd-mp-more { position: relative; }

.gd-mp .gd-mp-more summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e9e4f8;
    color: #6a7178;
}

.gd-mp .gd-mp-more summary::-webkit-details-marker { display: none; }
.gd-mp .gd-mp-more[open] summary { border-color: #7c3aed; color: #7c3aed; }

.gd-mp .gd-mp-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e9e4f8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(30, 39, 73, 0.14);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.gd-mp .gd-mp-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #1e2749;
}

.gd-mp .gd-mp-menu a:hover,
.gd-mp .gd-mp-menu a:focus { background: #f5f3ff; color: #6d28d9; text-decoration: none; }

/* pagination foot */
.gd-mp .gd-mp-pagefoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 4px;
    flex-wrap: wrap;
}

.gd-mp .gd-mp-showing { font-size: 13px; color: #6a7178; }

.gd-mp .gd-mp-pagination .pagination { margin: 0; }

.gd-mp .gd-mp-pagination .pagination > li > a,
.gd-mp .gd-mp-pagination .pagination > li > span {
    border-color: #e9e4f8;
    color: #575962;
    border-radius: 8px;
    margin-inline: 2px;
}

.gd-mp .gd-mp-pagination .pagination > .active > a,
.gd-mp .gd-mp-pagination .pagination > .active > span {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

/* empty states */
.gd-mp .gd-mp-empty {
    text-align: center;
    padding: 48px 20px;
}

.gd-mp .gd-mp-empty .fa {
    font-size: 34px;
    color: #c9b2f7;
    margin-bottom: 12px;
}

.gd-mp .gd-mp-empty h3 {
    margin: 0 0 6px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 18px;
    color: #1e2749;
}

.gd-mp .gd-mp-empty p { margin: 0 0 16px; color: #6a7178; }

/* support card */
.gd-mp .gd-mp-support {
    margin-block-start: 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f5f3ff, #ffffff);
    border: 1px solid #e9e4f8;
    text-align: center;
    padding: 40px 24px;
}

.gd-mp .gd-mp-support-art { width: 84px; height: auto; margin-bottom: 10px; }

.gd-mp .gd-mp-support h2 {
    margin: 0 0 6px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e2749;
}

.gd-mp .gd-mp-support p { margin: 0 0 16px; color: #6a7178; }

/* mobile: rows become cards */
@media (max-width: 820px) {
    .gd-mp .gd-mp-thead { display: none; }

    .gd-mp .gd-mp-row {
        grid-template-columns: 1fr;
        gap: 10px;
        border: 1px solid #e9e4f8;
        border-radius: 12px;
        margin-block-end: 12px;
    }

    .gd-mp .gd-mp-cell[data-label]::before {
        content: attr(data-label) ": ";
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #8a8f99;
        margin-inline-end: 6px;
    }

    .gd-mp .gd-mp-actions { justify-content: flex-start; }
}


/* ==================================================================
   READER MEMBERSHIP 3.0 (.gd-rm) — the account membership page.
   ==================================================================

   Everything here is scoped under .gd-rm, the wrapper the page's
   content_right output sits in. The shared plan-card system above
   (.gd-plan-card, .gd-price, .gd-benefits, the period tabs) is still
   used verbatim by the seller membership page and the public pricing
   page, so NOTHING above is modified: this layer overrides those
   classes inside .gd-rm only, by ordinary specificity — no !important
   anywhere (Bootstrap's .hide keeps its own; the billing tabs depend
   on it and this layer never fights it).

   Palette: the existing violet system (#7c3aed accent, #f5f3ff
   lavender, #1e2749 navy) plus this page's AA-checked greens
   (#eafaf2 / #8fd6a4 / #1e6b2b / #d9f4e1) and ambers (#fff6e5 /
   #f0d9a8 / #b45309). No animations or transitions are declared in
   this layer, so prefers-reduced-motion needs no counter-rules.
   ================================================================== */

.gd-rm { color: #575962; }

/* ------------------------------------------------------- page hero */
.gd-rm .gd-rm-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 150px;
    margin-bottom: 28px;
}

.gd-rm .gd-rm-hero-copy h1 {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #1e2749;
}

.gd-rm .gd-rm-hero-copy p { margin: 6px 0 0; font-size: 15px; color: #656c73; }

.gd-rm .gd-rm-hero-art { flex: 0 0 auto; width: 230px; max-width: 40%; height: auto; }

/* ------------------------------- change-in-progress notice (the
   membership_change_banner partial, restyled without being touched) */
.gd-rm .alert.alert-info {
    background: #f5f3ff;
    border: 1px solid #e4e6ef;
    border-inline-start: 4px solid #7c3aed;
    border-radius: 10px;
    color: #575962;
    padding: 16px 18px;
    margin-bottom: 28px;
}

.gd-rm .alert.alert-info strong { color: #1e2749; }

.gd-rm .alert.alert-info .btn-primary {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.gd-rm .alert.alert-info .btn-primary:hover,
.gd-rm .alert.alert-info .btn-primary:focus { background: #6d28d9; border-color: #6d28d9; }

/* -------------------------------------- current plan panel (green) */
.gd-rm .gd-rm-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #eafaf2;
    border: 1px solid #8fd6a4;
    border-radius: 14px;
    padding: 26px 28px;
    min-height: 210px;
    margin-bottom: 28px;
}

.gd-rm .gd-rm-current-body { min-width: 0; }

.gd-rm .gd-rm-pill {
    display: inline-block;
    background: #d9f4e1;
    color: #1e6b2b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 999px;
    padding: 4px 12px;
}

.gd-rm .gd-rm-pill-plan {
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}

.gd-rm .gd-rm-current-head { display: flex; align-items: center; gap: 16px; }

.gd-rm .gd-rm-crown { flex: 0 0 auto; width: 74px; height: 74px; }

.gd-rm .gd-rm-current-name {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1e2749;
    overflow-wrap: anywhere;
}

.gd-rm .gd-rm-current-name .label { vertical-align: middle; margin-inline-start: 8px; }

/* Status: word + colour, never colour alone. */
.gd-rm .gd-rm-status.label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    text-shadow: none;
}

.gd-rm .gd-rm-status.label-success { background: #d9f4e1; color: #1e6b2b; }
.gd-rm .gd-rm-status.label-info { background: #e3effd; color: #0b5394; }
.gd-rm .gd-rm-status.label-warning { background: #fff6e5; color: #8a5a00; }
.gd-rm .gd-rm-status.label-danger,
.gd-rm .gd-rm-status.label-default { background: #f1f3f6; color: #575962; }

.gd-rm .gd-rm-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 18px 0 0; }

.gd-rm .gd-rm-fact-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #656c73;
}

.gd-rm .gd-rm-fact-value { display: block; font-size: 16px; font-weight: 700; color: #1e2749; }
.gd-rm .gd-rm-fact-value.gd-rm-fact-muted { font-weight: 600; color: #656c73; }

.gd-rm .gd-rm-current-actions { margin-top: 18px; }
.gd-rm .gd-rm-current-actions form { display: inline; }

.gd-rm .gd-rm-current-actions .btn {
    min-height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
}

.gd-rm .gd-rm-current-actions .btn-default {
    background: #fff;
    border: 1px solid #cbd5d1;
    color: #1e2749;
}

.gd-rm .gd-rm-current-actions .btn-default:hover,
.gd-rm .gd-rm-current-actions .btn-default:focus { background: #f7fdf9; border-color: #8fd6a4; color: #1e2749; }

.gd-rm .gd-rm-current-actions .btn-primary {
    background: #7c3aed;
    border: 1px solid #7c3aed;
    color: #fff;
}

.gd-rm .gd-rm-current-actions .btn-primary:hover,
.gd-rm .gd-rm-current-actions .btn-primary:focus { background: #6d28d9; border-color: #6d28d9; }

.gd-rm .gd-rm-achieve { flex: 0 0 auto; width: 120px; height: 120px; }

/* Empty state: a quiet bordered card, not a bare paragraph. */
.gd-rm .gd-rm-nosub {
    background: #fff;
    border: 1px dashed #e4e6ef;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 28px;
}

.gd-rm .gd-rm-nosub p { margin: 0; color: #656c73; }

/* ----------------------------------------- plans & billing head row
   Title and subtitle left, the segmented selector right; flex-wrap
   drops the selector under the title on narrow screens. */
.gd-rm .gd-rm-plans-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    margin: 36px 0 18px;
}

.gd-rm .gd-rm-plans-head { min-width: 0; }

.gd-rm .gd-rm-plans-head h2 {
    margin: 0 0 4px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1e2749;
}

.gd-rm .gd-rm-plans-head p { margin: 0; font-size: 14px; color: #656c73; }

/* -------------------------------------------- billing cycle selector
   Pills in a rounded container. The hook classes
   (.billing-period-selector / .period-tab / data-billing-type /
   aria-pressed) belong to the delegated handler in workspace_nav and
   are untouched; only the paint is new. */
.gd-rm .gd-rm-cycle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 4px;
    margin: 0;
}

.gd-rm .gd-rm-cycle .period-tab {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #575962;
    box-shadow: none;
    white-space: nowrap;
}

.gd-rm .gd-rm-cycle .period-tab.active {
    background: #7c3aed;
    color: #fff;
}

.gd-rm .gd-rm-cycle .period-tab:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

/* the savings / marketing chip inside a segment: the green pill on an
   idle segment, soft white on the active violet one */
.gd-rm .gd-rm-cycle .period-tab .gd-rm-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
}

.gd-rm .gd-rm-cycle .period-tab.active .gd-rm-pill {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* --------------------------------------------- plan state badges */
.gd-rm .gd-plan-badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-height: 26px;
    margin-bottom: 6px;
}

/* current variant: lavender pill, accent text (global .gd-current-badge
   paints the seller page green — overridden here by scope) */
.gd-rm .gd-current-badge {
    display: inline-block;
    background: #ede9fe;
    color: #7c3aed;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 0;
}

.gd-rm .gd-state-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 12px;
    border-radius: 999px;
    text-shadow: none;
}

.gd-rm .gd-state-badge.label-primary { background: #7c3aed; color: #fff; }
.gd-rm .gd-state-badge.label-default { background: #f1f3f6; color: #575962; }

/* ------------------------------------------- compact plan cards
   ACCENT TOKENS: each card resolves its accent — whitelisted by
   PlanCardPresentation::accent(), never the raw admin value — to three
   custom properties, and every accent-aware rule below reads only the
   tokens. Unknown keys never reach the page, so the violet defaults
   here are the complete fallback story. All four accent/white pairs
   are AA for the 11–15px bold text they carry. */
.gd-rm .gd-rm-plan {
    --gd-acc: #7c3aed;
    --gd-acc-strong: #6d28d9;
    --gd-acc-soft: #ede9fe;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 16px;
    padding: 24px 22px 22px;
    margin: 0;
}

.gd-rm .gd-rm-plan.gd-rm-acc-pink { --gd-acc: #db2777; --gd-acc-strong: #be185d; --gd-acc-soft: #fce7f3; }
.gd-rm .gd-rm-plan.gd-rm-acc-blue { --gd-acc: #2563eb; --gd-acc-strong: #1d4ed8; --gd-acc-soft: #dbeafe; }
.gd-rm .gd-rm-plan.gd-rm-acc-green { --gd-acc: #047857; --gd-acc-strong: #065f46; --gd-acc-soft: #d1fae5; }

/* current / highlighted: the 2px accent border, padding compensated so
   the interior stays aligned with 1px-bordered neighbours */
.gd-rm .gd-rm-plan.gd-current,
.gd-rm .gd-rm-plan.gd-highlighted {
    border: 2px solid var(--gd-acc);
    padding: 23px 21px 21px;
    box-shadow: 0 2px 12px rgba(30, 39, 73, .10);
}

/* ribbon — rendered only when PlanCardPresentation::badge() produced
   text; the track's padding-top gives the -12px overhang its room */
.gd-rm .gd-rm-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: var(--gd-acc);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: 4px 14px;
    white-space: nowrap;
}

/* icon circle — accent-soft disc, accent glyph, centered */
.gd-rm .gd-rm-plan-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 2px auto 14px;
    border-radius: 50%;
    background: var(--gd-acc-soft);
    color: var(--gd-acc);
    font-size: 24px;
}

.gd-rm .gd-plan-name {
    margin: 0 0 10px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #1e2749;
    overflow-wrap: anywhere;
}

/* price zone — the shared membership_plan_price partial's classes,
   centered and compacted for the comparison card */
.gd-rm .gd-price-row { min-height: 64px; margin-bottom: 8px; text-align: center; }
.gd-rm .gd-price { font-size: 26px; font-weight: 800; line-height: 1.15; color: #1e2749; }
.gd-rm .gd-price.text-success { color: #1e6b2b; }
.gd-rm .gd-price-period { font-size: 13px; font-weight: 600; color: #656c73; }
.gd-rm .gd-price-note { font-size: 12px; color: #656c73; margin-top: 3px; }

.gd-rm .gd-savings {
    display: inline-block;
    background: #d9f4e1;
    color: #1e6b2b;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    margin-top: 6px;
}

/* benefit checklist — left-aligned rows, accent-tinted check squares */
.gd-rm .gd-benefits { list-style: none; margin: 12px 0 16px; padding: 0; flex: 1 1 auto; text-align: start; }

.gd-rm .gd-benefit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #575962;
}

.gd-rm .gd-benefit .fa {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    border-radius: 5px;
    background: var(--gd-acc-soft);
    color: var(--gd-acc);
    font-size: 9px;
    line-height: 16px;
    text-align: center;
}

.gd-rm .gd-benefit span { min-width: 0; overflow-wrap: anywhere; }
.gd-rm .gd-benefit-more { font-size: 12px; color: #656c73; }

/* ------------------------------------------------------ CTA zone */
.gd-rm .gd-plan-cta { margin-top: auto; padding-top: 12px; }
.gd-rm .gd-plan-cta form { margin: 0 0 6px; }

.gd-rm .gd-plan-cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* every LIVE control — upgrade/buy/continue anchors and the start-free
   submit — wears the card's accent fill; .btn-link (cancel a scheduled
   change) is a text action, not a primary control */
.gd-rm .gd-plan-cta a.btn,
.gd-rm .gd-plan-cta button[type="submit"].btn:not(.btn-link) {
    background: linear-gradient(135deg, var(--gd-acc), var(--gd-acc-strong));
    border: 0;
    color: #fff;
    text-shadow: none;
}

.gd-rm .gd-plan-cta a.btn:hover,
.gd-rm .gd-plan-cta a.btn:focus,
.gd-rm .gd-plan-cta button[type="submit"].btn:not(.btn-link):hover,
.gd-rm .gd-plan-cta button[type="submit"].btn:not(.btn-link):focus {
    background: var(--gd-acc-strong);
    color: #fff;
    text-decoration: none;
}

/* a control that cannot work: soft surface, real reason beside it */
.gd-rm .gd-plan-cta .btn[disabled] {
    background: #f1f3f6;
    border: 0;
    color: #656c73;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

/* THE ONE DELIBERATE HIDE. For the variant in force the engine answers
   current/none with no reason, and the shared cta partial renders that
   as a grey disabled button. This page states it with the inert
   .gd-rm-current-cta bar rendered just before the partial, so the
   partial's duplicate control is removed from the flow (and from
   assistive tech — two "Current Plan" controls is one too many). The
   partial stays shared and untouched. state=current is only ever
   produced with action=none and reason=null, so nothing else matches. */
.gd-rm .gd-plan-cta .btn[data-cta-state="current"][disabled] { display: none; }

.gd-rm .gd-rm-current-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 10px;
    background: var(--gd-acc-soft);
    color: var(--gd-acc);
    font-size: 14px;
    font-weight: 700;
    cursor: default;
}

.gd-rm .gd-plan-cta .btn-link {
    background: none;
    border: 0;
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
}

.gd-rm .gd-plan-cta .btn-link:hover,
.gd-rm .gd-plan-cta .btn-link:focus { color: #6d28d9; }

.gd-rm .gd-gateway-note { margin: 10px 0 0; font-size: 12px; color: #656c73; text-align: center; }
.gd-rm .gd-plan-cta .small.text-muted { margin: 8px 0 0; text-align: center; }

/* The split-card experience panel (.gd-rm-plan-art / .gd-rm-diamond /
   .gd-rm-chip*) is RETIRED with the split layout — the compact
   comparison cards carry no marketing media. */

/* --------------------------------------- membership benefits grid
   A row of cells with 1px vertical dividers between them — as many
   columns as there are cells; 2x2 under 900, stacked under 560. */
.gd-rm .gd-rm-benefits {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 14px;
    padding: 30px;
    margin-bottom: 28px;
}

.gd-rm .gd-rm-benefits h3 {
    margin: 0 0 22px;
    text-align: center;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e2749;
}

.gd-rm .gd-rm-benefits-grid {
    display: flex;
    align-items: stretch;
}

.gd-rm .gd-rm-benefit-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 0;
    padding: 0 16px;
    border-inline-start: 1px solid #edf0f4;
}

.gd-rm .gd-rm-benefit-cell:first-child { border-inline-start: 0; }

.gd-rm .gd-rm-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ede9fe;
    color: #7c3aed;
    font-size: 20px;
    margin-bottom: 4px;
}

.gd-rm .gd-rm-benefit-label { font-size: 14px; font-weight: 700; color: #1e2749; overflow-wrap: anywhere; }
.gd-rm .gd-rm-benefit-note { font-size: 12px; color: #656c73; overflow-wrap: anywhere; }

/* ------------------------------------------------- support CTA */
.gd-rm .gd-rm-support {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff6e5;
    border: 1px solid #f0d9a8;
    border-radius: 14px;
    padding: 24px 28px;
}

.gd-rm .gd-rm-support-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .18);
    color: #b45309;
    font-size: 22px;
}

.gd-rm .gd-rm-support-copy { min-width: 0; }

.gd-rm .gd-rm-support-copy h3 {
    margin: 0 0 4px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1e2749;
}

.gd-rm .gd-rm-support-copy p { margin: 0; font-size: 14px; color: #656c73; }

.gd-rm .gd-rm-support-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-inline-start: auto;
    padding: 8px 22px;
    border-radius: 10px;
    background: #b45309;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.gd-rm .gd-rm-support-btn:hover,
.gd-rm .gd-rm-support-btn:focus { background: #92400e; color: #fff; text-decoration: none; }

/* ------------------------------------------------ focus visibility */
.gd-rm a.btn:focus-visible,
.gd-rm button:focus-visible,
.gd-rm .gd-rm-support-btn:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

/* on the green panel the accent ring would sit on soft green — the
   panel's own dark green reads better there */
.gd-rm .gd-rm-current-actions .btn:focus-visible { outline-color: #1e6b2b; }

/* ------------------------------------------------------ responsive */
@media (max-width: 1024px) {
    .gd-rm .gd-rm-achieve { display: none; }
}

@media (max-width: 900px) {
    /* benefits wrap 2x2: the flex dividers become a grid where only the
       second column draws one */
    .gd-rm .gd-rm-benefits-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 0;
    }
    .gd-rm .gd-rm-benefit-cell { border-inline-start: 0; }
    .gd-rm .gd-rm-benefit-cell:nth-child(even) { border-inline-start: 1px solid #edf0f4; }
}

@media (max-width: 767px) {
    .gd-rm .gd-rm-hero { min-height: 0; }
    .gd-rm .gd-rm-hero-art { display: none; }
    .gd-rm .gd-rm-hero-copy h1 { font-size: 28px; }
    .gd-rm .gd-rm-current { padding: 22px; }
    .gd-rm .gd-rm-facts { gap: 14px 28px; }
}

@media (max-width: 700px) {
    .gd-rm .gd-rm-support { flex-direction: column; align-items: flex-start; }
    .gd-rm .gd-rm-support-btn { margin-inline-start: 0; }
}

@media (max-width: 560px) {
    .gd-rm .gd-rm-benefits-grid { grid-template-columns: minmax(0, 1fr); }
    .gd-rm .gd-rm-benefit-cell,
    .gd-rm .gd-rm-benefit-cell:nth-child(even) { border-inline-start: 0; }
    .gd-rm .gd-rm-plans-head h2 { font-size: 22px; }
    /* the segmented selector takes the full row and shares it */
    .gd-rm .gd-rm-cycle { width: 100%; }
    .gd-rm .gd-rm-cycle .period-tab { flex: 1 1 auto; padding: 0 10px; font-size: 13px; }
}

@media (max-width: 390px) {
    .gd-rm .gd-rm-hero-copy h1 { font-size: 24px; }
    .gd-rm .gd-rm-current { padding: 18px 16px; }
    .gd-rm .gd-rm-current-head { flex-wrap: wrap; }
    .gd-rm .gd-rm-facts { gap: 12px 20px; }
    .gd-rm .gd-rm-plan { padding: 20px 16px 18px; }
    .gd-rm .gd-rm-plan.gd-current,
    .gd-rm .gd-rm-plan.gd-highlighted { padding: 19px 15px 17px; }
    .gd-rm .gd-rm-cycle .period-tab { font-size: 12.5px; padding: 0 8px; }
    .gd-rm .gd-rm-benefits { padding: 22px 16px; }
    .gd-rm .gd-rm-support { padding: 20px 16px; }
}


/* ==================================================================
   SELLER PROMOTIONS 3.0 (.gd-sp) — the seller promotions page.
   ==================================================================

   Everything here is scoped under .gd-sp, the wrapper the page's
   seller_content output sits in — except the sidebar CTA card, which
   lives in the seller layout and is scoped under .gd-sp-side directly.
   Ordinary specificity throughout: zero !important. The status chips
   the shared badges partial prints (.pr-pill-*) are painted here for
   this page only; the partial itself is untouched.

   Palette: the existing violet system (#7c3aed accent, #6d28d9 hover,
   #f3effe soft, #f5f3ff lavender, #1e2749 navy, #575962 text, #656c73
   muted) plus the AA-checked state colours: active #7c3aed/#f3effe,
   scheduled #1e6b2b/#e7f6ec, draft #8a5a00/#fff6e5, expired
   #b62d35/#fdecee. The word always sits beside the colour. No
   animations or transitions are declared in this layer, so
   prefers-reduced-motion needs no counter-rules.
   ================================================================== */

.gd-sp { color: #575962; }

/* ------------------------------------------------------- page hero */
.gd-sp .gd-sp-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 150px;
    margin-bottom: 24px;
}

.gd-sp .gd-sp-hero-copy { min-width: 0; }

.gd-sp .gd-sp-hero-copy h1 {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #1e2749;
}

.gd-sp .gd-sp-hero-copy p { margin: 6px 0 0; font-size: 15px; color: #656c73; }

.gd-sp .gd-sp-hero-cta { margin-top: 16px; }

.gd-sp .gd-sp-hero-art { flex: 0 0 auto; width: 200px; max-width: 40%; height: auto; }

/* --------------------------------------------------------- buttons */
.gd-sp .gd-sp-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.gd-sp .gd-sp-btn-primary {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.gd-sp .gd-sp-btn-primary:hover,
.gd-sp .gd-sp-btn-primary:focus {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
    text-decoration: none;
}

/* quiet edge at 3:1 against white, same rationale as the global
   .gd-btn-quiet (WCAG 1.4.11) */
.gd-sp .gd-sp-btn-quiet {
    background: #fff;
    border-color: var(--gd-info-edge, #98a1b3);
    color: #1e2749;
}

.gd-sp .gd-sp-btn-quiet:hover,
.gd-sp .gd-sp-btn-quiet:focus {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #1e2749;
    text-decoration: none;
}

.gd-sp .gd-sp-btn-sm {
    min-height: 36px;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* a control that cannot work: soft surface, real reason in its title */
.gd-sp .gd-sp-btn[disabled] {
    background: #f1f3f6;
    border-color: #f1f3f6;
    color: #656c73;
    cursor: not-allowed;
}

.gd-sp .gd-sp-inline { display: inline; margin: 0; }

/* ------------------------------------------------- summary strip */
.gd-sp .gd-sp-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 14px;
    padding: 20px 24px;
}

.gd-sp .gd-sp-cell { display: flex; align-items: center; gap: 14px; min-width: 0; }

.gd-sp .gd-sp-cell-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 18px;
}

.gd-sp .gd-sp-cell-active .gd-sp-cell-icon { background: #f3effe; color: #7c3aed; }
.gd-sp .gd-sp-cell-scheduled .gd-sp-cell-icon { background: #e7f6ec; color: #1e6b2b; }
.gd-sp .gd-sp-cell-draft .gd-sp-cell-icon { background: #fff6e5; color: #8a5a00; }
.gd-sp .gd-sp-cell-expired .gd-sp-cell-icon { background: #fdecee; color: #b62d35; }

.gd-sp .gd-sp-cell-body { min-width: 0; }

.gd-sp .gd-sp-cell-value {
    display: block;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #1e2749;
    font-variant-numeric: tabular-nums;
}

.gd-sp .gd-sp-cell-label { display: block; font-size: 13px; color: #656c73; }

/* ------------------------------------------------ allowance card */
.gd-sp .gd-sp-allow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px);
    gap: 24px;
    align-items: center;
    background: #fff;
    border: 1.5px solid #d8ccf7;
    border-radius: 16px;
    padding: 26px 28px;
    margin-top: 24px;
}

.gd-sp .gd-sp-allow-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 26px;
}

.gd-sp .gd-sp-allow-main { min-width: 0; }

.gd-sp .gd-sp-allow-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.gd-sp .gd-sp-allow-head h2 {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1e2749;
}

.gd-sp .gd-sp-pill {
    display: inline-block;
    background: #f3effe;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 999px;
    padding: 4px 12px;
}

.gd-sp .gd-sp-allow-cap { font-size: 13px; font-weight: 700; color: #1e2749; }

.gd-sp .gd-sp-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 32px;
    margin-top: 16px;
}

.gd-sp .gd-sp-fact { min-width: 0; }

.gd-sp .gd-sp-fact-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #656c73;
}

.gd-sp .gd-sp-fact-value { display: block; font-size: 15px; font-weight: 700; color: #1e2749; }
.gd-sp .gd-sp-fact-value.gd-sp-fact-accent { font-size: 22px; color: #7c3aed; }

.gd-sp .gd-sp-allow-earn {
    min-width: 0;
    border-inline-start: 1px solid #efe9fb;
    padding-inline-start: 24px;
}

.gd-sp .gd-sp-allow-earn p { margin: 4px 0 0; font-size: 13px; color: #656c73; }

/* --------------------------------------------- limit-reached note */
.gd-sp .gd-sp-limit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    background: #fff6e5;
    border: 1px solid #f0d9a8;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 16px;
}

.gd-sp .gd-sp-limit p { flex: 1 1 260px; margin: 0; font-size: 14px; color: #575962; }

/* ------------------------------------------- content area panels */
.gd-sp .gd-sp-panel {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 16px;
    margin-top: 24px;
}

.gd-sp .gd-sp-emptycard,
.gd-sp .gd-sp-locked { padding: 40px; text-align: center; }

.gd-sp .gd-sp-emptycard h2,
.gd-sp .gd-sp-locked h2 {
    margin: 18px 0 8px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1e2749;
}

.gd-sp .gd-sp-emptycard p,
.gd-sp .gd-sp-locked p {
    max-width: 480px;
    margin: 0 auto 18px;
    font-size: 14px;
    color: #656c73;
}

.gd-sp .gd-sp-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 24px;
}

.gd-sp .gd-sp-empty-art { width: 170px; max-width: 60%; height: auto; }
.gd-sp img.gd-sp-empty-art { max-height: 200px; object-fit: contain; }

/* the three numbered steps: a real <ol>, numbers painted by counter so
   nothing is double-announced */
.gd-sp .gd-sp-steps {
    display: inline-block;
    list-style: none;
    counter-reset: gd-sp-step;
    margin: 0 auto 18px;
    padding: 0;
    text-align: start;
}

.gd-sp .gd-sp-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    counter-increment: gd-sp-step;
    font-size: 14px;
    color: #575962;
}

.gd-sp .gd-sp-steps li + li { margin-top: 12px; }

.gd-sp .gd-sp-steps li::before {
    content: counter(gd-sp-step);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* ------------------------------------------------- list state */
.gd-sp .gd-sp-listpanel { padding: 24px; }

.gd-sp .gd-sp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.gd-sp .gd-sp-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 16px;
    border: 1px solid #e4e6ef;
    border-radius: 999px;
    background: #fff;
    color: #575962;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.gd-sp .gd-sp-filter:hover,
.gd-sp .gd-sp-filter:focus { color: #6d28d9; border-color: #c4b5fd; text-decoration: none; }

.gd-sp .gd-sp-filter.is-active {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #6d28d9;
}

.gd-sp .gd-sp-filter-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f1f3f6;
    color: #575962;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gd-sp .gd-sp-filter.is-active .gd-sp-filter-count { background: #ede9fe; color: #6d28d9; }

.gd-sp .gd-sp-nostate { margin: 8px 0 0; font-size: 14px; color: #656c73; }

/* promotion rows as cards */
.gd-sp .gd-sp-row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, .7fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.2fr) auto;
    gap: 12px 16px;
    align-items: center;
    border: 1px solid #e4e6ef;
    border-radius: 12px;
    padding: 16px 20px;
}

.gd-sp .gd-sp-row + .gd-sp-row { margin-top: 12px; }

.gd-sp .gd-sp-row-main { min-width: 0; }

.gd-sp .gd-sp-row-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1e2749;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.gd-sp .gd-sp-row-name:hover,
.gd-sp .gd-sp-row-name:focus { color: #6d28d9; text-decoration: none; }

/* the coupon code chip — overrides Bootstrap's pink <code> paint */
.gd-sp .gd-sp-code {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border: 1px dashed #c4b5fd;
    border-radius: 6px;
    background: #f5f3ff;
    color: #6d28d9;
    font-size: 12px;
}

.gd-sp .gd-sp-row-discount { font-size: 16px; font-weight: 700; color: #7c3aed; font-variant-numeric: tabular-nums; }

/* status chips from the shared badges partial — word + colour, never
   colour alone */
.gd-sp .pr-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 999px;
    padding: 4px 12px;
}

.gd-sp .pr-pill-active { background: #f3effe; color: #7c3aed; }
.gd-sp .pr-pill-scheduled { background: #e7f6ec; color: #1e6b2b; }
.gd-sp .pr-pill-draft { background: #fff6e5; color: #8a5a00; }
.gd-sp .pr-pill-expired { background: #fdecee; color: #b62d35; }
.gd-sp .pr-pill-disabled,
.gd-sp .pr-pill-archived { background: #f1f3f6; color: #575962; }

.gd-sp .gd-sp-row-note { margin-top: 4px; font-size: 12px; color: #8a5a00; }

.gd-sp .gd-sp-row-uses,
.gd-sp .gd-sp-row-window { font-size: 13px; color: #656c73; font-variant-numeric: tabular-nums; }

.gd-sp .gd-sp-row-actions { display: flex; align-items: center; gap: 8px; }

/* pagination — Bootstrap's own markup, this page's paint */
.gd-sp .gd-sp-pagination { margin-top: 20px; text-align: center; }
.gd-sp .gd-sp-pagination .pagination { margin: 0; }

.gd-sp .gd-sp-pagination .pagination > li > a,
.gd-sp .gd-sp-pagination .pagination > li > span {
    border-color: #e9e4f8;
    color: #575962;
    border-radius: 8px;
    margin-inline: 2px;
}

.gd-sp .gd-sp-pagination .pagination > li > a:hover,
.gd-sp .gd-sp-pagination .pagination > li > a:focus { background: #f5f3ff; color: #6d28d9; }

.gd-sp .gd-sp-pagination .pagination > .active > a,
.gd-sp .gd-sp-pagination .pagination > .active > span,
.gd-sp .gd-sp-pagination .pagination > .active > a:hover,
.gd-sp .gd-sp-pagination .pagination > .active > a:focus,
.gd-sp .gd-sp-pagination .pagination > .active > span:hover,
.gd-sp .gd-sp-pagination .pagination > .active > span:focus {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

/* ------------------------------------------------------ analytics */
.gd-sp .gd-sp-analytics { margin-top: 32px; }

.gd-sp .gd-sp-analytics h2 {
    margin: 0 0 14px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e2749;
}

.gd-sp .gd-sp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.gd-sp .gd-sp-stat {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 0;
}

.gd-sp .gd-sp-stat-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #656c73;
}

.gd-sp .gd-sp-stat-value {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    color: #1e2749;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* -------------------------------------------- how promotions work */
.gd-sp .gd-sp-how { margin-top: 32px; }

.gd-sp .gd-sp-how h2 {
    margin: 0 0 14px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e2749;
}

.gd-sp .gd-sp-how-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.gd-sp .gd-sp-how-card {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 14px;
    padding: 20px;
    min-width: 0;
}

.gd-sp .gd-sp-how-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 20px;
}

.gd-sp .gd-sp-how-card h3 {
    margin: 12px 0 6px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1e2749;
}

.gd-sp .gd-sp-how-card p { margin: 0; font-size: 13px; color: #656c73; }

/* ------------------------------------------------------------ FAQ */
.gd-sp .gd-sp-faq {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 14px;
    padding: 8px 24px;
    margin-top: 24px;
}

.gd-sp .gd-sp-faq h3 {
    margin: 0;
    padding: 16px 0 8px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1e2749;
}

.gd-sp .gd-sp-faq-row + .gd-sp-faq-row { border-top: 1px solid #eef0f4; }

.gd-sp .gd-sp-faq-row summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
}

.gd-sp .gd-sp-faq-row summary::-webkit-details-marker { display: none; }

.gd-sp .gd-sp-faq-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 14px;
}

.gd-sp .gd-sp-faq-q { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: #1e2749; }

.gd-sp .gd-sp-faq-chev { flex: 0 0 auto; color: #656c73; font-size: 12px; }

/* chevron turn on open — a static swap, no animation declared */
.gd-sp .gd-sp-faq-row[open] > summary .gd-sp-faq-chev { transform: rotate(90deg); }

.gd-sp .gd-sp-faq-a {
    margin: 0;
    padding-block: 0 16px;
    padding-inline: 46px 0;
    font-size: 14px;
    color: #656c73;
}

/* ------------------------------------------------ focus visibility */
.gd-sp a:focus-visible,
.gd-sp button:focus-visible,
.gd-sp summary:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

/* ================================================ sidebar CTA card
   Lives in the seller layout beside the nav, so it is scoped under
   .gd-sp-side directly — mirroring the reader sidebar's
   .gd-upgrade-card idiom. */
.gd-sp-side {
    margin-top: 16px;
    border: 1px solid #e2d8f9;
    border-radius: 14px;
    background: linear-gradient(160deg, #f5f3ff, #ffffff);
    padding: 22px;
    text-align: center;
}

.gd-sp-side .gd-sp-side-art {
    display: block;
    width: 110px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.gd-sp-side img.gd-sp-side-art { max-height: 120px; object-fit: contain; }

.gd-sp-side .gd-sp-side-head {
    margin: 10px 0 4px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1e2749;
}

.gd-sp-side .gd-sp-side-text { margin: 0 0 14px; font-size: 13px; color: #6a7178; }

.gd-sp-side .gd-btn {
    width: 100%;
    min-height: 40px;
    background: #7c3aed;
    border: 1.5px solid #7c3aed;
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
}

.gd-sp-side .gd-btn:hover,
.gd-sp-side .gd-btn:focus {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
    text-decoration: none;
}

.gd-sp-side .gd-btn:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }

/* ------------------------------------------------------ responsive */
@media (max-width: 1024px) {
    .gd-sp .gd-sp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gd-sp .gd-sp-how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gd-sp .gd-sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .gd-sp .gd-sp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gd-sp .gd-sp-row-main { grid-column: 1 / -1; }
    .gd-sp .gd-sp-row-actions { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .gd-sp .gd-sp-hero { min-height: 0; }
    .gd-sp .gd-sp-hero-art { display: none; }
    .gd-sp .gd-sp-hero-copy h1 { font-size: 28px; }

    .gd-sp .gd-sp-allow {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px;
    }

    .gd-sp .gd-sp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }

    .gd-sp .gd-sp-allow-earn {
        border-inline-start: 0;
        padding-inline-start: 0;
        border-top: 1px solid #efe9fb;
        padding-top: 16px;
    }

    .gd-sp .gd-sp-emptycard,
    .gd-sp .gd-sp-locked { padding: 28px 20px; }
}

@media (max-width: 560px) {
    .gd-sp .gd-sp-how-grid { grid-template-columns: minmax(0, 1fr); }
    .gd-sp .gd-sp-row { grid-template-columns: minmax(0, 1fr); }
    .gd-sp .gd-sp-listpanel { padding: 18px 16px; }
    .gd-sp .gd-sp-row { padding: 14px 16px; }

    /* everything tappable stays comfortably tall */
    .gd-sp .gd-sp-btn { min-height: 44px; }
    .gd-sp .gd-sp-filter { min-height: 38px; }
}

@media (max-width: 390px) {
    .gd-sp .gd-sp-hero-copy h1 { font-size: 24px; }
    .gd-sp .gd-sp-strip { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .gd-sp .gd-sp-facts { grid-template-columns: minmax(0, 1fr); }
    .gd-sp .gd-sp-stats { grid-template-columns: minmax(0, 1fr); }
    .gd-sp .gd-sp-allow { padding: 18px 16px; }
    .gd-sp .gd-sp-faq { padding: 4px 16px; }
    .gd-sp .gd-sp-faq-a { padding-inline: 0; }
    .gd-sp .gd-sp-row-actions { flex-wrap: wrap; }
}

/* ==================================================================
   PROMOTION WIZARD 4.0 (.gd-pw) — the seller create/edit promotion page.
   ==================================================================

   Scoped under .gd-pw, the wrapper the wizard blade renders. Same violet
   system and vocabulary as the .gd-sp layer above (accent #7c3aed, hover
   #6d28d9, soft #f3effe, lavender #f5f3ff, navy #1e2749, muted #656c73,
   border #e4e6ef). Ordinary specificity, zero !important — the only
   !important lives in the page's own <noscript> block, forced by the
   frozen bundle's [hidden] rule. The single animation (the busy spinner)
   is switched off under prefers-reduced-motion.
   ================================================================== */

.gd-pw { color: #575962; }

/* ------------------------------------------------------- page hero */
.gd-pw .gd-pw-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.gd-pw .gd-pw-hero-copy { min-width: 0; }

.gd-pw .gd-pw-hero-copy h1 {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1e2749;
}

.gd-pw .gd-pw-hero-copy p {
    max-width: 60ch;
    margin: 6px 0 0;
    font-size: 14px;
    color: #656c73;
}

.gd-pw .gd-pw-hero-art { flex: 0 0 auto; width: 180px; max-width: 36%; height: auto; }
.gd-pw img.gd-pw-hero-art { max-height: 140px; object-fit: contain; }

/* ---------------------------------------------------------- stepper */
.gd-pw .gd-pw-stepper {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 14px;
    padding: 18px 28px;
    margin-bottom: 20px;
}

.gd-pw .gd-pw-stepper-row {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gd-pw .gd-pw-stepper-item {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

/* connector line behind the circles */
.gd-pw .gd-pw-stepper-item + .gd-pw-stepper-item::before {
    content: '';
    position: absolute;
    top: 16px;
    inset-inline-start: calc(-50% + 25px);
    width: calc(100% - 50px);
    height: 2px;
    background: #e9e5f8;
}

.gd-pw .gd-pw-step {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
}

.gd-pw .gd-pw-step.is-locked { cursor: not-allowed; }

.gd-pw .gd-pw-step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #656c73;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gd-pw .gd-pw-step-check { display: none; font-size: 13px; }

.gd-pw .gd-pw-step.is-current .gd-pw-step-circle { background: #7c3aed; color: #fff; }

.gd-pw .gd-pw-step.is-done .gd-pw-step-circle { background: #f3effe; color: #7c3aed; }
.gd-pw .gd-pw-step.is-done .gd-pw-step-num { display: none; }
.gd-pw .gd-pw-step.is-done .gd-pw-step-check { display: inline; }

.gd-pw .gd-pw-step-label { font-size: 13px; color: #656c73; }
.gd-pw .gd-pw-step.is-current .gd-pw-step-label { color: #1e2749; font-weight: 700; }

/* ---------------------------------------------------- section cards */
.gd-pw .gd-pw-card {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 20px;
}

.gd-pw .gd-pw-card-title {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1e2749;
}

.gd-pw .gd-pw-card-title:focus { outline: none; }
.gd-pw .gd-pw-card-title:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }

.gd-pw .gd-pw-card-sub { margin: 4px 0 16px; font-size: 13px; color: #656c73; }

/* ------------------------------------------------- messages & notes */
.gd-pw .gd-pw-note {
    margin: 0 0 16px;
    font-size: 13px;
    color: #656c73;
}

.gd-pw .gd-pw-errors {
    background: #fdecee;
    border: 1px solid #f0b9be;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.gd-pw .gd-pw-errors p { margin: 0; font-size: 13px; color: #b62d35; }
.gd-pw .gd-pw-errors p + p { margin-top: 6px; }

.gd-pw .gd-pw-alert {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: #b62d35;
}

.gd-pw .gd-pw-err { margin: 6px 0 0; font-size: 12px; color: #b62d35; }

.gd-pw .gd-pw-help { margin: 6px 0 0; font-size: 12px; color: #656c73; }

/* -------------------------------------------------- STEP 1 · type */
.gd-pw .gd-pw-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.gd-pw .gd-pw-kindcard {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    border: 1.5px solid #e4e6ef;
    border-radius: 12px;
    padding: 18px 20px;
    background: #fff;
    cursor: pointer;
    font-weight: 400;
}

.gd-pw .gd-pw-kindcard:hover { border-color: #c9b8f5; }

.gd-pw .gd-pw-kindcard.is-on { border-color: #7c3aed; background: #faf8ff; }

/* the native radio stays real for AT and keyboard; the dot is painted */
.gd-pw .gd-pw-kindcard input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.gd-pw .gd-pw-kinddot {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 2px solid #c6cad3;
    border-radius: 50%;
    background: #fff;
}

.gd-pw .gd-pw-kindcard input[type="radio"]:checked + .gd-pw-kinddot {
    border-color: #7c3aed;
    background: radial-gradient(circle, #7c3aed 0 5px, #fff 6px);
}

.gd-pw .gd-pw-kindcard input[type="radio"]:focus-visible + .gd-pw-kinddot {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

.gd-pw .gd-pw-kindbody { flex: 1 1 auto; min-width: 0; }

.gd-pw .gd-pw-kindname {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1e2749;
}

.gd-pw .gd-pw-kinddesc { display: block; margin-top: 2px; font-size: 13px; color: #656c73; }

.gd-pw .gd-pw-kindchip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 16px;
}

/* --------------------------------------------------- field rows */
.gd-pw .gd-pw-field {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
}

.gd-pw .gd-pw-label {
    flex: 0 0 110px;
    padding-top: 11px;
    font-size: 13px;
    font-weight: 600;
    color: #1e2749;
}

.gd-pw .gd-pw-control { flex: 1 1 auto; min-width: 0; }

.gd-pw .gd-pw-input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid #d5d8e0;
    border-radius: 8px;
    background: #fff;
    color: #1e2749;
    font-size: 14px;
    line-height: 1.4;
}

.gd-pw select.gd-pw-select { padding-inline-end: 28px; }

.gd-pw .gd-pw-input:focus {
    outline: 2px solid #7c3aed;
    outline-offset: 1px;
    border-color: #7c3aed;
}

.gd-pw .gd-pw-input.is-invalid { border-color: #c9767f; }

.gd-pw .gd-pw-static {
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e2749;
}

/* prefix/suffix boxes around a money or percent input */
.gd-pw .gd-pw-affix { display: flex; align-items: stretch; max-width: 280px; }

.gd-pw .gd-pw-affix .gd-pw-input { flex: 1 1 auto; min-width: 0; }

.gd-pw .gd-pw-affix-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #d5d8e0;
    background: #f7f8fa;
    color: #656c73;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.gd-pw .gd-pw-affix .gd-pw-affix-box:first-child {
    border-inline-end: 0;
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
}

.gd-pw .gd-pw-affix .gd-pw-affix-box:last-child {
    border-inline-start: 0;
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
}

.gd-pw .gd-pw-affix .gd-pw-input:first-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.gd-pw .gd-pw-affix .gd-pw-input:last-child {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* the coupon code row: input + generate + copy */
.gd-pw .gd-pw-coderow { display: flex; flex-wrap: wrap; gap: 8px; }

.gd-pw .gd-pw-coderow .gd-pw-input-code {
    flex: 1 1 180px;
    width: auto;
    font-family: Menlo, Consolas, monospace;
    letter-spacing: .04em;
}

/* the limits | schedule twin columns */
.gd-pw .gd-pw-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
}

.gd-pw .gd-pw-col { min-width: 0; }

.gd-pw .gd-pw-col + .gd-pw-col {
    border-inline-start: 1px solid #efe9fb;
    padding-inline-start: 32px;
}

.gd-pw .gd-pw-col-title {
    margin: 0 0 4px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1e2749;
}

.gd-pw .gd-pw-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: #575962;
    cursor: pointer;
}

.gd-pw .gd-pw-check input[type="checkbox"] { margin: 0; width: 16px; height: 16px; }

/* ------------------------------------------------ STEP 3 · eBooks */
.gd-pw .gd-pw-search { position: relative; margin-bottom: 12px; }

.gd-pw .gd-pw-search > .fa {
    position: absolute;
    top: 50%;
    inset-inline-start: 13px;
    transform: translateY(-50%);
    color: #98a1b3;
    font-size: 14px;
    pointer-events: none;
}

.gd-pw .gd-pw-search-input { padding-inline-start: 38px; }

.gd-pw .gd-pw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.gd-pw .gd-pw-chips:empty { margin: 0; }

.gd-pw .gd-pw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    border-radius: 999px;
    background: #f5f3ff;
    border: 1px solid #ded4fb;
    color: #6d28d9;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 6px 4px 12px;
}

.gd-pw .gd-pw-chip-text {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-pw .gd-pw-chip-x {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.gd-pw .gd-pw-chip-x:hover, .gd-pw .gd-pw-chip-x:focus { background: #7c3aed; color: #fff; }

.gd-pw .gd-pw-books {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gd-pw .gd-pw-book {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    border: 1px solid #e4e6ef;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 400;
}

.gd-pw .gd-pw-book:hover { border-color: #c9b8f5; }

.gd-pw .gd-pw-book.is-on { border-color: #7c3aed; background: #faf8ff; }

.gd-pw .gd-pw-book input[type="checkbox"] { flex: 0 0 auto; margin: 0; width: 16px; height: 16px; }

.gd-pw .gd-pw-book-body { flex: 1 1 auto; min-width: 0; }

.gd-pw .gd-pw-book-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e2749;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-pw .gd-pw-book-price { display: block; margin-top: 1px; font-size: 12px; color: #656c73; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ STEP 4 · review */
.gd-pw .gd-pw-summary {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: #f5f3ff;
    border-radius: 16px;
    padding: 24px;
}

.gd-pw .gd-pw-summary-main { flex: 1 1 auto; min-width: 0; }

.gd-pw .gd-pw-summary-title {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1e2749;
}

.gd-pw .gd-pw-summary-ready { margin: 4px 0 14px; font-size: 13px; color: #656c73; }

.gd-pw .gd-pw-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    margin: 0;
}

.gd-pw .gd-pw-fact { min-width: 0; }

.gd-pw .gd-pw-fact dt {
    font-size: 12px;
    font-weight: 400;
    color: #656c73;
}

.gd-pw .gd-pw-fact dd {
    margin: 1px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e2749;
    overflow-wrap: anywhere;
}

.gd-pw .gd-pw-summary-art { flex: 0 0 auto; width: 110px; height: auto; }

/* the live example */
.gd-pw .gd-pw-example { padding: 0; overflow: hidden; }

.gd-pw .gd-pw-example-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 18px 28px;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
    font: inherit;
}

.gd-pw .gd-pw-example-copy { flex: 1 1 auto; min-width: 0; }

.gd-pw .gd-pw-example-title {
    display: block;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1e2749;
}

.gd-pw .gd-pw-example-sub { display: block; margin-top: 2px; font-size: 13px; color: #656c73; }

.gd-pw .gd-pw-example-chev { flex: 0 0 auto; color: #656c73; font-size: 13px; }

.gd-pw .gd-pw-example-toggle[aria-expanded="false"] .gd-pw-example-chev { transform: rotate(-90deg); }

.gd-pw .gd-pw-example-body { padding: 0 28px 22px; }

.gd-pw .gd-pw-sim-buyer, .gd-pw .gd-pw-sim-econ { margin: 0; }

.gd-pw .gd-pw-sim-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
}

.gd-pw .gd-pw-sim-row dt { font-size: 13px; font-weight: 400; color: #656c73; }

.gd-pw .gd-pw-sim-row dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e2749;
    font-variant-numeric: tabular-nums;
}

.gd-pw .gd-pw-sim-minus dd { color: #b62d35; }

.gd-pw .gd-pw-sim-total dt { color: #1e2749; font-weight: 600; }

.gd-pw .gd-pw-sim-total dd em { font-style: normal; font-size: 16px; font-weight: 700; color: #7c3aed; }

.gd-pw .gd-pw-sim-rule { margin: 10px 0; border: 0; border-top: 1px solid #efe9fb; }

.gd-pw .gd-pw-sim-none { margin: 0 0 8px; font-size: 13px; color: #656c73; }

.gd-pw .gd-pw-sim-zero {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 13px;
    color: #8a5a00;
}

.gd-pw .gd-pw-example-body > .gd-pw-btn { margin-top: 14px; }

/* the amber funding truth */
.gd-pw .gd-pw-funding {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff6e5;
    border: 1px solid #f0d9a8;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.gd-pw .gd-pw-funding-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f6e3b8;
    color: #8a5a00;
    font-size: 14px;
}

.gd-pw .gd-pw-funding-copy { min-width: 0; }

.gd-pw .gd-pw-funding-title { margin: 0; font-size: 14px; font-weight: 700; color: #1e2749; }

.gd-pw .gd-pw-funding-body { margin: 3px 0 0; font-size: 13px; color: #575962; }

/* --------------------------------------------------------- buttons */
.gd-pw .gd-pw-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.gd-pw .gd-pw-btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: #7c3aed;
    color: #fff;
}

.gd-pw .gd-pw-btn-primary:hover,
.gd-pw .gd-pw-btn-primary:focus {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-color: #6d28d9;
    color: #fff;
    text-decoration: none;
}

.gd-pw .gd-pw-btn-quiet {
    background: #fff;
    border-color: var(--gd-info-edge, #98a1b3);
    color: #1e2749;
}

.gd-pw .gd-pw-btn-quiet:hover,
.gd-pw .gd-pw-btn-quiet:focus {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #1e2749;
    text-decoration: none;
}

.gd-pw .gd-pw-btn-sm {
    min-height: 36px;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.gd-pw .gd-pw-btn[disabled] { opacity: .7; cursor: wait; }

/* validating / saving: a real spinner on the button itself */
.gd-pw .gd-pw-btn.is-busy::after {
    content: '';
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gd-pw-spin .7s linear infinite;
}

.gd-pw .gd-pw-btn-quiet.is-busy::after {
    border-color: #ded4fb;
    border-top-color: #7c3aed;
}

@keyframes gd-pw-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .gd-pw .gd-pw-btn.is-busy::after { animation: none; border-top-color: inherit; }
}

/* ---------------------------------------------------------- footer */
.gd-pw .gd-pw-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.gd-pw .gd-pw-cancel {
    margin-inline-end: auto;
    font-size: 14px;
    font-weight: 600;
    color: #656c73;
    text-decoration: none;
}

.gd-pw .gd-pw-cancel:hover, .gd-pw .gd-pw-cancel:focus { color: #6d28d9; text-decoration: none; }

.gd-pw .gd-pw-foot-actions { display: flex; align-items: center; gap: 12px; }

.gd-pw .gd-pw-draftnote { margin: 10px 0 0; font-size: 12px; color: #656c73; text-align: end; }

/* -------------------------------------------- needs-ebook guard */
.gd-pw .gd-pw-guard { text-align: center; padding: 40px; }

.gd-pw .gd-pw-guard h2 {
    margin: 0 0 8px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1e2749;
}

.gd-pw .gd-pw-guard p { max-width: 480px; margin: 0 auto 18px; font-size: 14px; color: #656c73; }

.gd-pw .gd-pw-guard-steps {
    display: inline-block;
    list-style: none;
    counter-reset: gd-pw-gstep;
    margin: 0 auto 18px;
    padding: 0;
    text-align: start;
}

.gd-pw .gd-pw-guard-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    counter-increment: gd-pw-gstep;
    font-size: 14px;
    color: #575962;
}

.gd-pw .gd-pw-guard-steps li + li { margin-top: 12px; }

.gd-pw .gd-pw-guard-steps li::before {
    content: counter(gd-pw-gstep);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.gd-pw .gd-pw-guard-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------ focus visibility */
.gd-pw a:focus-visible,
.gd-pw button:focus-visible,
.gd-pw input:focus-visible,
.gd-pw select:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

/* ------------------------------------------------------ responsive */
@media (max-width: 1024px) {
    .gd-pw .gd-pw-card { padding: 22px 24px; }
}

@media (max-width: 767px) {
    .gd-pw .gd-pw-hero-art { display: none; }
    .gd-pw .gd-pw-hero-copy h1 { font-size: 28px; }

    .gd-pw .gd-pw-kinds { grid-template-columns: minmax(0, 1fr); }

    .gd-pw .gd-pw-field { display: block; }
    .gd-pw .gd-pw-label { display: block; padding-top: 0; margin-bottom: 6px; }

    .gd-pw .gd-pw-cols { grid-template-columns: minmax(0, 1fr); }
    .gd-pw .gd-pw-col + .gd-pw-col {
        border-inline-start: 0;
        padding-inline-start: 0;
        border-top: 1px solid #efe9fb;
        padding-top: 16px;
    }

    .gd-pw .gd-pw-books { grid-template-columns: minmax(0, 1fr); }

    .gd-pw .gd-pw-summary { display: block; }
    .gd-pw .gd-pw-summary-art { display: none; }
}

@media (max-width: 390px) {
    .gd-pw .gd-pw-hero-copy h1 { font-size: 24px; }

    .gd-pw .gd-pw-stepper { padding: 14px 12px; }
    .gd-pw .gd-pw-step-label { display: none; }
    .gd-pw .gd-pw-step-circle { width: 30px; height: 30px; font-size: 13px; }
    .gd-pw .gd-pw-stepper-item + .gd-pw-stepper-item::before {
        top: 14px;
        inset-inline-start: calc(-50% + 22px);
        width: calc(100% - 44px);
    }

    .gd-pw .gd-pw-card { padding: 18px 16px; }
    .gd-pw .gd-pw-facts { grid-template-columns: minmax(0, 1fr); }
    .gd-pw .gd-pw-summary { padding: 18px 16px; }
    .gd-pw .gd-pw-example-toggle { padding: 16px; }
    .gd-pw .gd-pw-example-body { padding: 0 16px 18px; }

    .gd-pw .gd-pw-affix { max-width: none; }

    .gd-pw .gd-pw-foot { flex-wrap: wrap; }
    .gd-pw .gd-pw-cancel { flex: 1 1 100%; margin: 0 0 4px; text-align: center; order: 3; }
    .gd-pw .gd-pw-foot-actions { flex: 1 1 100%; flex-wrap: wrap; }
    .gd-pw .gd-pw-foot-actions .gd-pw-btn { flex: 1 1 100%; }
    .gd-pw .gd-pw-draftnote { text-align: center; }
}

/* [hidden] IS AUTHORITATIVE inside the wizard. The buttons carry their own
   display from .gd-pw-btn, which silently beats the UA's [hidden] rule —
   which is how Back and Save showed on every step. The noscript fallback
   still wins where it must: its selectors are more specific. */
.gd-pw [hidden] { display: none !important; }

/* ==================================================================
   MY FAVORITE 2.0 (.gd-fv) — the account favorites page.
   ==================================================================

   Everything scoped under .gd-fv, the wrapper the page's content_right
   output sits in. Ordinary specificity throughout — the single
   !important is the [hidden] authority rule at the layer's end, which
   exists because the card forms and the empty state carry their own
   display and the UA's [hidden] rule loses to them silently (the same
   lesson the wizard layer learned).

   Palette: the violet system (#7c3aed accent, #6d28d9 hover, #f3effe
   soft, #f5f3ff lavender, #1e2749 navy, #656c73 muted, #e4e6ef border)
   plus the quiet-danger pair #b62d35 on #f0c1c5 the spec measures for
   Clear all. The only motion is the removed card's fade, disabled
   under prefers-reduced-motion.
   ================================================================== */

.gd-fv { color: #575962; }

/* --------------------------------------------------------- head row */
.gd-fv .gd-fv-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.gd-fv .gd-fv-head-copy { min-width: 0; }

.gd-fv .gd-fv-head-copy h1 {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #1e2749;
}

.gd-fv .gd-fv-head-copy p { margin: 4px 0 0; font-size: 14px; color: #656c73; }

/* Clear all: a quiet-danger disclosure. The summary IS the button. */
.gd-fv .gd-fv-clear { position: relative; flex: 0 0 auto; }

.gd-fv .gd-fv-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #f0c1c5;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #b62d35;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.gd-fv .gd-fv-clear-btn::-webkit-details-marker { display: none; }
.gd-fv .gd-fv-clear-btn::marker { content: ''; }

.gd-fv .gd-fv-clear-btn:hover,
.gd-fv .gd-fv-clear[open] .gd-fv-clear-btn { background: #fdecee; }

/* The inline confirmation: a small card anchored under the button.
   The form is real; nothing clears on the first click. */
.gd-fv .gd-fv-clear-confirm {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: 300px;
    max-width: 84vw;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(30, 39, 73, 0.14);
    text-align: start;
}

.gd-fv .gd-fv-clear-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #1e2749;
}

.gd-fv .gd-fv-clear-text { margin: 0 0 12px; font-size: 13px; color: #656c73; }

.gd-fv .gd-fv-clear-confirm form {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.gd-fv .gd-fv-clear-cancel {
    min-height: 40px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #575962;
    cursor: pointer;
}

.gd-fv .gd-fv-clear-cancel:hover { background: #f7f7fb; }

.gd-fv .gd-fv-clear-go {
    min-height: 40px;
    padding: 0 14px;
    background: #b62d35;
    border: 1px solid #b62d35;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.gd-fv .gd-fv-clear-go:hover { background: #9d232b; border-color: #9d232b; }

/* ------------------------------------------------------ empty state */
.gd-fv .gd-fv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 16px;
    padding: 56px 32px;
}

.gd-fv .gd-fv-empty-art { width: 150px; height: 120px; }
.gd-fv img.gd-fv-empty-art { object-fit: contain; }

.gd-fv .gd-fv-empty h2 {
    margin: 16px 0 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e2749;
}

.gd-fv .gd-fv-empty p { margin: 6px 0 0; font-size: 14px; color: #656c73; max-width: 420px; }

.gd-fv .gd-fv-browse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    margin-top: 18px;
    background: #7c3aed;
    border: 1.5px solid #7c3aed;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.gd-fv .gd-fv-browse:hover,
.gd-fv .gd-fv-browse:focus {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
    text-decoration: none;
}

/* ------------------------------------------------------------ grids */
.gd-fv .gd-fv-grid { display: grid; gap: 16px; }
.gd-fv .gd-fv-grid-saved { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-fv .gd-fv-grid-recs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------- card */
.gd-fv .gd-fv-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 12px;
    transition: box-shadow 140ms ease, opacity 220ms ease, transform 220ms ease;
}

.gd-fv .gd-fv-card:hover { box-shadow: 0 6px 16px rgba(30, 39, 73, 0.10); }

.gd-fv .gd-fv-card.is-leaving {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}

.gd-fv .gd-fv-card-media {
    position: relative;
    padding: 12px;
    background: #faf9f7;
    border-radius: 12px 12px 0 0;
}

.gd-fv .gd-fv-card-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
}

.gd-fv .gd-fv-card-cover img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
}

.gd-fv .gd-fv-card-placeholder { font-size: 34px; color: #c6cbd2; }

/* Heart: a 32px white circle over the cover's top-right corner. */
.gd-fv .gd-fv-heart { position: absolute; top: 18px; inset-inline-end: 18px; }
.gd-fv .gd-fv-heart form { margin: 0; }

.gd-fv .gd-fv-heart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(30, 39, 73, 0.16);
    font-size: 14px;
    color: #656c73;
    cursor: pointer;
}

.gd-fv .gd-fv-heart-btn:hover { color: #7c3aed; }
.gd-fv .gd-fv-heart-btn.is-on { color: #7c3aed; }

/* ------------------------------------------------------- card body */
.gd-fv .gd-fv-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 14px;
}

.gd-fv .gd-fv-card-title {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gd-fv .gd-fv-card-title a { color: #1e2749; }
.gd-fv .gd-fv-card-title a:hover,
.gd-fv .gd-fv-card-title a:focus { color: #6d28d9; text-decoration: none; }

.gd-fv .gd-fv-card-author {
    margin: 3px 0 0;
    font-size: 13px;
    color: #656c73;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-fv .gd-fv-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
}

.gd-fv .gd-fv-stars { font-size: 13px; color: #f59e0b; letter-spacing: 1px; }
.gd-fv .gd-fv-rating-note { font-size: 12px; color: #656c73; }

.gd-fv .gd-fv-card-price { margin: 6px 0 0; font-size: 15px; }
.gd-fv .gd-fv-card-price strong { font-weight: 700; color: #1e2749; }
.gd-fv .gd-fv-card-price s { margin-inline-start: 6px; font-size: 13px; color: #9aa0a6; }

/* CTA row sits at the card's foot whatever the body above rendered. */
.gd-fv .gd-fv-card-cta { margin-top: auto; padding-top: 10px; }
.gd-fv .gd-fv-cta { display: block; }
.gd-fv .gd-fv-cta form { margin: 0; }

.gd-fv .gd-fv-cta-add,
.gd-fv .gd-fv-cta-saved,
.gd-fv .gd-fv-cta-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.gd-fv .gd-fv-cta-add {
    background: #fff;
    border: 1.5px solid #7c3aed;
    color: #7c3aed;
}

.gd-fv .gd-fv-cta-add:hover { background: #f5f3ff; }

/* Saved: the soft state. The WORD carries the state, never the colour
   alone — and the same button is the remove control, as its
   aria-label says. */
.gd-fv .gd-fv-cta-saved {
    background: #f3effe;
    border: 1.5px solid #f3effe;
    color: #6d28d9;
}

.gd-fv .gd-fv-cta-saved:hover { border-color: #d9cdf8; }

.gd-fv .gd-fv-cta-read {
    background: #7c3aed;
    border: 1.5px solid #7c3aed;
    color: #fff;
}

.gd-fv .gd-fv-cta-read:hover,
.gd-fv .gd-fv-cta-read:focus {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
    text-decoration: none;
}

/* ------------------------------------------------------- pagination
   Bootstrap's own markup, this page's paint — same recipe as .gd-sp. */
.gd-fv .gd-fv-pagination { margin-top: 20px; text-align: center; }
.gd-fv .gd-fv-pagination .pagination { margin: 0; }

.gd-fv .gd-fv-pagination .pagination > li > a,
.gd-fv .gd-fv-pagination .pagination > li > span {
    border-color: #e9e4f8;
    color: #575962;
    border-radius: 8px;
    margin-inline: 2px;
}

.gd-fv .gd-fv-pagination .pagination > li > a:hover,
.gd-fv .gd-fv-pagination .pagination > li > a:focus { background: #f5f3ff; color: #6d28d9; }

.gd-fv .gd-fv-pagination .pagination > .active > a,
.gd-fv .gd-fv-pagination .pagination > .active > span,
.gd-fv .gd-fv-pagination .pagination > .active > a:hover,
.gd-fv .gd-fv-pagination .pagination > .active > a:focus,
.gd-fv .gd-fv-pagination .pagination > .active > span:hover,
.gd-fv .gd-fv-pagination .pagination > .active > span:focus {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

/* --------------------------------------------- you might also like */
.gd-fv .gd-fv-recs { margin-top: 28px; }

.gd-fv .gd-fv-recs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.gd-fv .gd-fv-recs-head h2 {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e2749;
}

.gd-fv .gd-fv-viewall {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: #7c3aed;
}

.gd-fv .gd-fv-viewall:hover,
.gd-fv .gd-fv-viewall:focus { color: #6d28d9; text-decoration: none; }

.gd-fv .gd-fv-viewall .fa { margin-inline-start: 4px; }

/* --------------------------------------------------- benefits strip */
.gd-fv .gd-fv-strip {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 28px;
    background: #f5f3ff;
    border-radius: 16px;
    padding: 26px 28px;
}

.gd-fv .gd-fv-strip-copy { flex: 0 0 38%; min-width: 0; }

.gd-fv .gd-fv-strip-copy h2 {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1e2749;
}

.gd-fv .gd-fv-strip-copy p { margin: 6px 0 0; font-size: 13px; color: #656c73; }

.gd-fv .gd-fv-strip-items {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.gd-fv .gd-fv-strip-item { text-align: center; min-width: 0; }

.gd-fv .gd-fv-strip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ede9fe;
    color: #7c3aed;
    font-size: 19px;
}

.gd-fv .gd-fv-strip-item h3 {
    margin: 10px 0 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1e2749;
}

.gd-fv .gd-fv-strip-item p { margin: 4px 0 0; font-size: 12px; color: #656c73; }

/* ------------------------------------------------ focus visibility */
.gd-fv a:focus-visible,
.gd-fv button:focus-visible,
.gd-fv summary:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

/* ------------------------------------------------------ responsive */
@media (max-width: 1024px) {
    .gd-fv .gd-fv-grid-saved,
    .gd-fv .gd-fv-grid-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .gd-fv .gd-fv-strip { flex-direction: column; align-items: stretch; }
    .gd-fv .gd-fv-strip-copy { flex: 0 0 auto; }
}

@media (max-width: 768px) {
    .gd-fv .gd-fv-head { flex-direction: column; align-items: flex-start; }
    .gd-fv .gd-fv-head-copy h1 { font-size: 26px; }

    /* Anchored under the button, opening towards the reading direction. */
    .gd-fv .gd-fv-clear-confirm { inset-inline-end: auto; inset-inline-start: 0; }
}

@media (max-width: 560px) {
    .gd-fv .gd-fv-grid-saved,
    .gd-fv .gd-fv-grid-recs { grid-template-columns: minmax(0, 1fr); }

    .gd-fv .gd-fv-strip-items { grid-template-columns: minmax(0, 1fr); }
    .gd-fv .gd-fv-strip { padding: 22px 20px; }

    .gd-fv .gd-fv-empty { padding: 40px 20px; }
}

@media (max-width: 390px) {
    .gd-fv .gd-fv-head-copy h1 { font-size: 24px; }

    /* Touch targets never shrink below 44px on the smallest screens. */
    .gd-fv .gd-fv-clear-btn,
    .gd-fv .gd-fv-clear-cancel,
    .gd-fv .gd-fv-clear-go,
    .gd-fv .gd-fv-cta-add,
    .gd-fv .gd-fv-cta-saved,
    .gd-fv .gd-fv-cta-read { min-height: 44px; }

    .gd-fv .gd-fv-clear-confirm form { flex-wrap: wrap; }
    .gd-fv .gd-fv-clear-confirm form button { flex: 1 1 100%; }
}

/* The one motion in this layer, switched off on request. */
@media (prefers-reduced-motion: reduce) {
    .gd-fv .gd-fv-card { transition: none; }
}

/* [hidden] IS AUTHORITATIVE inside this layer. The fav-toggle forms,
   the empty state and the CTA pairs all carry their own display, which
   silently beats the UA's [hidden] rule — the same trap the wizard
   layer documents. Learned the hard way; declared once, at the end. */
.gd-fv [hidden] { display: none !important; }

/* ---------------------------------------------------------------
   READER MEMBERSHIP — plan capacity row / slider. The track is a
   scroll-snap flex row whose per-card basis says how many cards fit:
   3 from 1024px, 2 from 768, 1 below. Cards never shrink under the
   basis, so overflow means MORE cards than fit — and only then is
   this a slider: plan-slider.js measures the track and stamps
   .is-static whenever everything fits, which hides whatever chrome
   the server rendered. Movement stays native scrolling; a single
   drawable plan (.gd-rm-slider-static) renders no chrome at all. */
.gd-rm .gd-rm-slider { position: relative; margin-bottom: 28px; }

.gd-rm .gd-rm-slider [data-gd-slider-track] {
    display: flex;
    align-items: stretch;
    column-gap: 20px;
    /* headroom for the -12px ribbon overhang: the horizontal scroller
       clips vertical overflow too */
    padding-top: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline-offset: 4px;
}
.gd-rm .gd-rm-slider [data-gd-slider-track]::-webkit-scrollbar { display: none; }

.gd-rm .gd-rm-slider [data-gd-slider-track] > .gd-plan-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

@media (min-width: 768px) {
    .gd-rm .gd-rm-slider [data-gd-slider-track] > .gd-plan-card {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (min-width: 1024px) {
    .gd-rm .gd-rm-slider [data-gd-slider-track] > .gd-plan-card {
        flex-basis: calc((100% - 40px) / 3);
    }
}

/* grid mode: everything fits, so the chrome goes */
.gd-rm .gd-rm-slider.is-static .gd-rm-slide-btn,
.gd-rm .gd-rm-slider.is-static .gd-rm-slide-dots { display: none; }

.gd-rm .gd-rm-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e4e6ef;
    background: #ffffff;
    color: #7c3aed;
    font-size: 15px;
    box-shadow: 0 6px 18px rgba(30, 39, 73, 0.14);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gd-rm .gd-rm-slide-prev { left: -14px; }
.gd-rm .gd-rm-slide-next { right: -14px; }
.gd-rm .gd-rm-slide-btn:hover { border-color: #c9b8f5; background: #faf8ff; }
.gd-rm .gd-rm-slide-btn:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.gd-rm .gd-rm-slide-btn[aria-disabled="true"] { opacity: .38; cursor: default; }

.gd-rm .gd-rm-slide-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.gd-rm .gd-rm-slide-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ded4fb;
    cursor: pointer;
}
.gd-rm .gd-rm-slide-dot.is-on { background: #7c3aed; }
.gd-rm .gd-rm-slide-dot:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }

@media (max-width: 768px) {
    .gd-rm .gd-rm-slide-prev { left: 4px; }
    .gd-rm .gd-rm-slide-next { right: 4px; }
}

/* ---------------------------------------------------------------
   SELLER MEMBERSHIP addendum (.gd-rm-eco-*) — the seller economics
   block the seller plan cards carry inside the shared .gd-rm layer:
   the Your share / Gidoroo fee pair and the worked example box. The
   numbers come from SellerEconomicsPresenter; this only paints them,
   in the layer's own palette (navy figures, the panel green for the
   money the seller keeps). Nothing else in the layer is touched. */
.gd-rm .gd-rm-eco-row { display: flex; text-align: center; margin: 2px 0 4px; }
.gd-rm .gd-rm-eco-cell { flex: 1 1 50%; min-width: 0; }
.gd-rm .gd-rm-eco-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #656c73;
}
.gd-rm .gd-rm-eco-value { font-size: 22px; font-weight: 800; color: #1e2749; }
.gd-rm .gd-rm-eco-value.text-success { color: #1e6b2b; }
.gd-rm .gd-rm-eco-example {
    background: #f7fdf9;
    border: 1px solid #d9f4e1;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 4px 0 2px;
    font-size: 12.5px;
    color: #575962;
    text-align: center;
}

/* ------------------------------------------- public landing extras
   The guest membership page shares the whole .gd-rm system; these two
   are its only additions — the ebook-return note under the hero copy
   and the small footline under the plans. */
.gd-rm .gd-rm-hero-note { margin-top: 10px; font-size: 13px; color: #656c73; }
.gd-rm .gd-rm-hero-note .fa { color: #7c3aed; margin-right: 6px; }
.gd-rm .gd-rm-public-note { margin: 18px 0 6px; font-size: 13px; text-align: center; }
.gd-rm .gd-rm-public-note a { color: #6d28d9; font-weight: 600; }

/* ================================================================
   BECOME A SELLER 3.0 addendum (.gd-bsp) — the public seller program
   landing's page-specific clothes over the shared .gd-rm layer: the
   lavender hero gradient panel, the inert state pill, the process
   chips, the why tiles, the earnings panel, the Keep % card line,
   the five-step row with connector arrows, and the final CTA panel.
   Everything else the page wears — hero geometry, plans bar, cycle
   selector, slider, compact plan cards — is the .gd-rm layer itself,
   untouched. Scoped under .gd-bsp by ordinary specificity.
   ================================================================ */

/* --------------------------------------------------- hero panel */
.gd-bsp .gd-bsp-hero {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 55%, #e4dcfc 100%);
    border: 1px solid #e4dcfc;
    border-radius: 14px;
    padding: 28px 30px;
    margin-bottom: 32px;
}

.gd-bsp .gd-bsp-hl { color: #6d28d9; }

.gd-bsp .gd-bsp-cta-row { margin-top: 18px; }

/* The page's violet reading of the stock buttons, everywhere on it. */
.gd-bsp .btn-primary { background: #7c3aed; border-color: #7c3aed; }
.gd-bsp .btn-primary:hover,
.gd-bsp .btn-primary:focus { background: #6d28d9; border-color: #6d28d9; }

/* The INERT state pill: a link wearing an informational badge — for
   pending / restricted, which must never look like an application. */
.gd-bsp .gd-bsp-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ded4fb;
    color: #6d28d9;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.gd-bsp .gd-bsp-pill-link:hover,
.gd-bsp .gd-bsp-pill-link:focus { background: #faf8ff; color: #5b21b6; text-decoration: none; }

/* ------------------------------------------------- process chips */
.gd-bsp .gd-bsp-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.gd-bsp .gd-bsp-flow-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #e4dcfc;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1e2749;
    box-shadow: 0 1px 2px rgba(30, 39, 73, .05);
}

.gd-bsp .gd-bsp-flow-chip .fa { color: #7c3aed; }

.gd-bsp .gd-bsp-flow-arrow { color: #a78bfa; font-size: 13px; }

/* --------------------------------------------- sections, headings */
.gd-bsp .gd-bsp-section { margin: 0 0 32px; }

.gd-bsp .gd-bsp-heading {
    margin: 0 0 16px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1e2749;
}

.gd-bsp .gd-bsp-heading-center { text-align: center; }

.gd-bsp .gd-bsp-note { margin: 10px 0 0; font-size: 13px; color: #656c73; }

/* ------------------------------------------------------ why tiles */
.gd-bsp .gd-bsp-why {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.gd-bsp .gd-bsp-why-tile {
    background: #fff;
    border: 1px solid #eceef3;
    border-top: 3px solid #7c3aed;
    border-radius: 12px;
    padding: 20px 18px;
    text-align: center;
}

.gd-bsp .gd-bsp-why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 19px;
    margin-bottom: 12px;
}

.gd-bsp .gd-bsp-why-title { font-size: 15px; font-weight: 700; color: #1e2749; margin-bottom: 6px; }

.gd-bsp .gd-bsp-why-text { font-size: 13px; color: #656c73; }

/* -------------------------------------------------- earnings panel */
.gd-bsp .gd-bsp-earn {
    display: flex;
    align-items: stretch;
    gap: 24px;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border: 1px solid #e4dcfc;
    border-radius: 14px;
    padding: 22px 26px;
}

.gd-bsp .gd-bsp-earn-rates { display: flex; align-items: center; gap: 36px; }

.gd-bsp .gd-bsp-earn-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #656c73;
}

.gd-bsp .gd-bsp-earn-value { font-size: 30px; font-weight: 800; color: #1e2749; }

.gd-bsp .gd-bsp-earn-value.gd-bsp-earn-accent { font-size: 38px; color: #6d28d9; }

.gd-bsp .gd-bsp-earn-divider { flex: 0 0 auto; width: 1px; background: #ded4fb; }

.gd-bsp .gd-bsp-earn-example {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    background: #fff;
    border: 1px solid #e4dcfc;
    border-radius: 10px;
    padding: 12px 16px;
}

.gd-bsp .gd-bsp-earn-example-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #656c73;
    margin-bottom: 6px;
}

.gd-bsp .gd-bsp-earn-example-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    font-size: 14px;
    color: #575962;
}

.gd-bsp .gd-bsp-earn-good { color: #1e6b2b; }

.gd-bsp .gd-bsp-earn-terms { margin: 0; color: #575962; }

/* ------------------------------------- plan-card Keep % line + foot */
.gd-bsp .gd-bsp-keep {
    margin: 0 0 4px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #6d28d9;
}

.gd-bsp .gd-bsp-plans-foot { margin: -8px 0 32px; text-align: center; }

.gd-bsp .gd-bsp-plans-foot .gd-bsp-note { margin: 0; }

.gd-bsp .gd-bsp-unlock {
    border: 1px dashed #c9b8f5;
    border-radius: 999px;
    background: #faf8ff;
    color: #6d28d9;
    font-weight: 700;
    padding: 10px 22px;
}

.gd-bsp .gd-bsp-unlock:hover,
.gd-bsp .gd-bsp-unlock:focus { background: #f5f3ff; border-color: #b39df1; color: #5b21b6; }

.gd-bsp .gd-bsp-unlock .fa { margin-right: 6px; }

/* ------------------------------------------------------ steps row */
.gd-bsp .gd-bsp-steps {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
    display: flex;
    align-items: stretch;
    gap: 26px;
}

.gd-bsp .gd-bsp-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: 12px;
    padding: 18px 14px 16px;
    text-align: center;
}

.gd-bsp .gd-bsp-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 17px;
}

.gd-bsp .gd-bsp-step-num {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.gd-bsp .gd-bsp-step-label { font-size: 13.5px; font-weight: 700; color: #1e2749; }

/* Connector arrows between steps, desktop only. */
@media (min-width: 768px) {
    .gd-bsp .gd-bsp-step:not(:last-child)::after {
        content: "\f178";
        font-family: FontAwesome;
        position: absolute;
        top: 50%;
        right: -22px;
        transform: translateY(-50%);
        color: #a78bfa;
        font-size: 15px;
    }
}

/* ------------------------------------------------- final CTA panel */
.gd-bsp .gd-bsp-final {
    background: linear-gradient(135deg, #6d28d9, #7c3aed 60%, #8b5cf6);
    border-radius: 16px;
    padding: 34px 28px;
    text-align: center;
    margin: 0 0 10px;
}

.gd-bsp .gd-bsp-final-title {
    margin: 0 0 16px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.gd-bsp .gd-bsp-final .btn-primary { background: #fff; border-color: #fff; color: #6d28d9; font-weight: 700; }

.gd-bsp .gd-bsp-final .btn-primary:hover,
.gd-bsp .gd-bsp-final .btn-primary:focus { background: #f5f3ff; border-color: #f5f3ff; color: #5b21b6; }

.gd-bsp .gd-bsp-final .btn-success { background: #fff; border-color: #fff; color: #1e6b2b; font-weight: 700; }

.gd-bsp .gd-bsp-final .btn-success:hover,
.gd-bsp .gd-bsp-final .btn-success:focus { background: #f7fdf9; border-color: #f7fdf9; color: #14532d; }

.gd-bsp .gd-bsp-final-sub { margin: 14px 0 0; font-size: 13px; color: #ede9fe; }

.gd-bsp .gd-bsp-pill-onpanel {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.gd-bsp .gd-bsp-pill-onpanel:hover,
.gd-bsp .gd-bsp-pill-onpanel:focus { background: rgba(255, 255, 255, .22); color: #fff; }

/* ------------------------------------------------------ responsive */
@media (max-width: 991px) {
    .gd-bsp .gd-bsp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .gd-bsp .gd-bsp-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 18px;
    }

    .gd-bsp .gd-bsp-hero-art { align-self: center; max-width: 60%; }

    .gd-bsp .gd-bsp-earn { flex-direction: column; gap: 16px; }

    .gd-bsp .gd-bsp-earn-divider { width: auto; height: 1px; }

    /* Chrome-less scroll-snap steps: the slider track pattern with no
       arrows or dots — the browser owns the movement entirely. */
    .gd-bsp .gd-bsp-steps {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        padding: 12px 2px 12px;
        margin: 0 -2px;
    }

    .gd-bsp .gd-bsp-steps::-webkit-scrollbar { display: none; }

    .gd-bsp .gd-bsp-step { flex: 0 0 72%; scroll-snap-align: center; }
}

@media (max-width: 560px) {
    .gd-bsp .gd-bsp-why { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------
   THE PUBLIC DISCOVERY CARD (.gd-dc) — the one card every public
   ebook grid renders: the homepage carousels and category tabs, the
   catalog index, the category pages, author pages and public
   profiles.

   DELIBERATELY UNSCOPED. The .gd-fv and .gd-pp2 card rules live
   under a page wrapper, so copying their class names onto the
   homepage produces an unstyled card. This layer is keyed on its
   own .gd-dc-* names alone, which is what lets the same partial be
   dropped into a CSS grid, a slick slide or a bootstrap column
   without every container being edited first.

   The geometry may differ between a carousel slide and a full grid;
   the business presentation above it never does.
   --------------------------------------------------------------- */
.gd-dc-card {
    /* Column + margin-top:auto on the CTA row is what bottom-aligns
       every button across a row of ragged bodies. height:100% is what
       makes that bite: a grid item stretches, so the card fills its
       row; in a carousel slide it resolves to auto and costs nothing. */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* A long unbroken title in a grid track would otherwise widen the
       column and push the whole page sideways. */
    min-width: 0;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 12px;
    transition: box-shadow 140ms ease;
}

.gd-dc-card:hover { box-shadow: 0 6px 16px rgba(30, 39, 73, 0.10); }

/* ------------------------------------------------------------ media */
.gd-dc-media {
    position: relative;
    padding: 12px;
    background: #faf9f7;
    border-radius: 12px 12px 0 0;
}

.gd-dc-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    /* One ratio for every cover, so a row of cards starts level
       whatever shape the uploaded images happen to be. */
    aspect-ratio: 3 / 4;
}

.gd-dc-cover img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
}

.gd-dc-placeholder { font-size: 34px; color: #c6cbd2; }

/* ONE badge, over the cover, absolutely positioned so it can never
   reflow the body. Featured, else a real discount — never both. */
.gd-dc-chip {
    position: absolute;
    top: 18px;
    inset-inline-start: 18px;
    z-index: 2;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.gd-dc-chip-featured { background: #f3effe; color: #6d28d9; }
.gd-dc-chip-sale { background: #fdecec; color: #c22b31; }

/* The favourite pair. Two real forms in a span, OUTSIDE every
   anchor — the click can no longer race the navigation. */
.gd-dc-heart {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 2;
}

.gd-dc-heart form { margin: 0; }

.gd-dc-heart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(30, 39, 73, 0.16);
    font-size: 14px;
    color: #656c73;
    cursor: pointer;
}

.gd-dc-heart-btn:hover { color: #7c3aed; }
.gd-dc-heart-btn.is-on { color: #7c3aed; }

/* ------------------------------------------------------------- body */
.gd-dc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px;
}

.gd-dc-title {
    margin: 0;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    /* The FULL title is in the DOM — screen readers and search engines
       get all of it — and the clamp is the only thing that shortens it.
       min-height reserves both lines so a one-line title and a two-line
       title still put their price and button at the same height. */
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gd-dc-title a { color: #1e2749; }
.gd-dc-title a:hover,
.gd-dc-title a:focus { color: #6d28d9; text-decoration: none; }

.gd-dc-lock { margin-inline-end: 4px; color: #c22b31; }

.gd-dc-author {
    margin: 3px 0 0;
    font-size: 13px;
    color: #656c73;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-dc-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
}

.gd-dc-stars { font-size: 13px; color: #f59e0b; letter-spacing: 1px; }
.gd-dc-rating-note { font-size: 12px; color: #656c73; }

/* ------------------------------------------------------- value line
   The card's answer to "how do I get this, what does it cost", in one
   fixed position in every mode. Two lines are reserved whether or not
   the second one renders, so the CTA below sits at the same height on
   a free card, a priced card and a membership card standing side by
   side. */
.gd-dc-value { margin: 8px 0 0; min-height: 2.9em; }

.gd-dc-price { margin: 0; font-size: 16px; line-height: 1.35; }
.gd-dc-price strong { font-weight: 700; color: #1e2749; }

.gd-dc-price s {
    margin-inline-start: 6px;
    font-size: 13px;
    color: #9aa0a6;
}

.gd-dc-owned {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f7a4d;
}

.gd-dc-access {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #1e2749;
}

.gd-dc-entry,
.gd-dc-alt {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: #656c73;
}

/* ------------------------------------------------------------- CTA
   ONE button, full width, at the foot of the card whatever the body
   above it rendered. It is always a GET link to the ebook page: the
   grid's job is to earn the click into the page that converts. */
.gd-dc-cta { margin-top: auto; padding-top: 12px; }

.gd-dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid #7c3aed;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
    cursor: pointer;
}

.gd-dc-btn:hover,
.gd-dc-btn:focus { background: #f5f3ff; color: #6d28d9; text-decoration: none; }

.gd-dc-btn-primary {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.gd-dc-btn-primary:hover,
.gd-dc-btn-primary:focus {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
    text-decoration: none;
}

.gd-dc-card a:focus-visible,
.gd-dc-card button:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

/* ------------------------------------------- the containers it sits in
   The theme's own grid targeted .ebook-card directly for its gutters,
   so the new card supplies its own. 15px each side is what the old
   card's padding was, which is what keeps the outer cards flush with
   the .row that negative-margins around them. */
.grid-ebooks > .gd-dc-card { margin: 0 15px 30px; }

/* Slick lays its slides out with floats, which cannot stretch: without
   this the cards in a carousel are as tall as their own content and the
   buttons land at different heights. The track's clearfix pseudos have
   to go with it — as flex items they would occupy real columns. */
.ebook-slider .slick-track,
.tab-ebook-slider .slick-track { display: flex; align-items: stretch; }

.ebook-slider .slick-track::before,
.ebook-slider .slick-track::after,
.tab-ebook-slider .slick-track::before,
.tab-ebook-slider .slick-track::after { display: none; }

.ebook-slider .slick-slide,
.tab-ebook-slider .slick-slide { height: auto; }

.ebook-slider .slick-slide > div,
.tab-ebook-slider .slick-slide > div { height: 100%; }

/* ------------------------------------------------------- responsive
   At a phone width the visitor must still see title, value line and
   CTA without zooming. Two columns is the floor for a catalog; below
   560px one comfortable card beats two unreadable ones. */
@media (max-width: 768px) {
    .recent-ebooks .grid-ebooks,
    .ebook-list-result .grid-ebooks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .grid-ebooks > .gd-dc-card { margin: 0 8px 20px; }
}

@media (max-width: 560px) {
    .recent-ebooks .grid-ebooks,
    .ebook-list-result .grid-ebooks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
    /* Touch targets never shrink below 44px on the smallest screens,
       and a grid card is thumb-tapped far more often than a
       favourites card — so the heart grows with the button. */
    .gd-dc-btn { min-height: 44px; }

    .gd-dc-heart-btn { width: 44px; height: 44px; font-size: 16px; }
    .gd-dc-heart { top: 16px; inset-inline-end: 16px; }
}

/* [hidden] IS AUTHORITATIVE inside this card. The favourite pair's
   forms carry their own display, which silently beats the UA's
   [hidden] rule — the same trap the .gd-fv and .gd-pw layers
   document. Without it BOTH hearts render. */
.gd-dc-card [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .gd-dc-card { transition: none; }
}

/* ------------------------------------------------- the plan ladder
   A seller on the top plan sees one card. These two blocks are what
   stop that reading as missing data: a named ceiling above the plan
   area, and a read-only comparison of every rung. Neither contains a
   control — seller downgrades do not exist. */
.gd-rm .gd-rm-ladder-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f6f4ff;
    border: 1px solid #ded4fb;
    border-radius: 14px;
    padding: 16px 20px;
    margin: 0 0 18px;
}

.gd-rm .gd-rm-ladder-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 15px;
}

.gd-rm .gd-rm-ladder-said { min-width: 0; }

.gd-rm .gd-rm-ladder-said strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1e2749;
}

.gd-rm .gd-rm-ladder-said p {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #656c73;
}

/* ------------------------------------- a rung below theirs, in the grid
   The lower tiers are drawn in the main grid so a seller can see the whole
   product. They must read as REFERENCE, not as something to click: no
   accent, no lift on hover, and where a control would be, a flat statement.
   Content stays at full contrast — a card nobody can act on is still a card
   somebody has to be able to read. */
.gd-rm .gd-plan-card.gd-rm-plan-lower {
    background: #fbfbfd;
    border-color: #e8eaf1;
    box-shadow: none;
}

.gd-rm .gd-plan-card.gd-rm-plan-lower:hover {
    transform: none;
    box-shadow: none;
    border-color: #e8eaf1;
}

/* The plan's own accent bar and icon tint are what make a card look
   choosable; a lower one keeps the shape and loses the colour. */
.gd-rm .gd-plan-card.gd-rm-plan-lower .gd-rm-plan-icon {
    background: #f1f3f6;
    color: #8a8f99;
}

/* An admin ribbon ("Best value") and the highlight border are the two other
   places the plan's accent reaches. On a card nobody can choose they would
   advertise it in full colour, so both are stood down here. */
.gd-rm .gd-plan-card.gd-rm-plan-lower .gd-rm-ribbon {
    background: #8a8f99;
}

.gd-rm .gd-rm-plan.gd-rm-plan-lower.gd-highlighted {
    border-color: #e8eaf1;
    box-shadow: none;
}

.gd-rm .gd-rm-lower-badge {
    background: #f1f3f6;
    color: #656c73;
    font-weight: 600;
}

/* Where the button is on every other card. Deliberately NOT button-shaped:
   no border, no fill, no pointer — there is no control here to imitate. */
.gd-rm .gd-rm-lower-cta {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border-radius: 8px;
    background: #f1f3f6;
    color: #656c73;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    cursor: default;
    user-select: none;
}

@media (prefers-contrast: more) {
    .gd-rm .gd-rm-lower-cta { color: #2a2f36; }
    .gd-rm .gd-plan-card.gd-rm-plan-lower { border-color: #8a8f99; }
}

/* =============================================== seller activation sheet
   The onboarding moment after a membership genuinely comes into force.
   Rendered [hidden] and opened by seller-activation.js, so a browser with
   no script never meets a dialog it cannot close. */
.gd-sma[hidden] { display: none !important; }

.gd-sma {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.gd-sma-scrim {
    position: absolute;
    inset: 0;
    background: rgba(30, 39, 73, .42);
}

/* The page behind does not scroll while the sheet is open. */
html.gd-sma-open, html.gd-sma-open body { overflow: hidden; }

.gd-sma-sheet {
    position: relative;
    width: 100%;
    max-width: 494px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(30, 39, 73, .28);
    padding: 30px 32px 26px;
    font-family: 'Open Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.gd-sma-sheet:focus { outline: none; }
.gd-sma-sheet:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }

.gd-sma-x {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e4e6ef;
    background: #fff;
    color: #656c73;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.gd-sma-x:hover { background: #f7f7fb; color: #1e2749; }
.gd-sma-x:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }

.gd-sma-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eafaf2;
    border: 1px solid #8fd6a4;
    color: #1e6b2b;
    margin-bottom: 15px;
}

.gd-sma-mark svg { width: 28px; height: 28px; }

/* WORD FIRST, COLOUR SECOND. The pill says what state this is; the tint
   only repeats it, so nothing here is carried by green alone. */
.gd-sma-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 700;
    background: #eafaf2;
    color: #1e6b2b;
    border: 1px solid #8fd6a4;
    margin-bottom: 9px;
}

.gd-sma-title {
    margin: 0 0 8px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #1e2749;
}

.gd-sma-body { margin: 0; font-size: 14px; line-height: 1.6; color: #4b4f5a; }

.gd-sma-fact {
    display: flex;
    gap: 9px;
    align-items: baseline;
    flex-wrap: wrap;
    background: #faf9ff;
    border: 1px solid #ede9fe;
    border-radius: 10px;
    padding: 11px 13px;
    margin: 14px 0 18px;
    font-size: 13px;
    color: #4b4f5a;
}

.gd-sma-fact b { color: #1e2749; font-weight: 700; white-space: nowrap; }

.gd-sma-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.gd-sma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 180px;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

.gd-sma-btn-primary { background: #7c3aed; color: #fff; }
.gd-sma-btn-primary:hover, .gd-sma-btn-primary:focus { background: #6d28d9; color: #fff; text-decoration: none; }
.gd-sma-btn-quiet { background: #fff; color: #6d28d9; border-color: #d9cdfa; }
.gd-sma-btn-quiet:hover, .gd-sma-btn-quiet:focus { background: #faf9ff; color: #6d28d9; text-decoration: none; }
.gd-sma-btn:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }

/* A BOTTOM SHEET ON A PHONE, and never taller than the screen: the actions
   stay reachable because the sheet scrolls rather than overflowing. */
@media (max-width: 575px) {
    .gd-sma { padding: 0; align-items: flex-end; }
    .gd-sma-sheet {
        max-width: none;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        padding: 24px 20px 20px;
    }
    .gd-sma-title { font-size: 19px; }
    .gd-sma-actions { flex-direction: column; }
    .gd-sma-btn { flex: none; width: 100%; }
}

@media (prefers-contrast: more) {
    .gd-sma-sheet { border: 1px solid #1e2749; }
    .gd-sma-btn-quiet { border-color: #6d28d9; }
}

/* ------------------------------------------ seller application terms row
   The one thing on this form a person is asked to go and READ. It used to
   be a bare checkbox in a run of four other fields, where the link read as
   fine print; a quiet panel makes it the thing it is without shouting. */
.gd-terms-row .col-md-12 > label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #faf9ff;
    border: 1px solid #ede9fe;
    border-radius: 10px;
    padding: 13px 15px;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #3a3d45;
    cursor: pointer;
}

.gd-terms-row .col-md-12 > label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 3px 0 0;
    accent-color: #7c3aed;
}

.gd-terms-row .col-md-12 > label a {
    color: #6d28d9;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gd-terms-row .col-md-12 > label a:hover { color: #5b21b6; }
.gd-terms-row .col-md-12 > label a:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }

.gd-terms-row .gd-terms-note { margin: 8px 0 0; font-size: 12px; color: #8a8f99; }

/* The refusal reads as information, not as a scolding. */
.gd-terms-row.has-error .col-md-12 > label { background: #fdecee; border-color: #c9767f; }
.gd-terms-row .help-block strong { color: #b62d35; }

/* =============================================== header account control
   The vendor bundle colours this #fafafa for a header that used to be
   coloured. brand.css made the header white and never repainted it, so the
   icon, the caret and the avatar ring were white on white — 1.02:1, with
   the focus ring suppressed by the vendor's .btn { outline: 0 !important }.
   Same ink and same hover as the Cart / Favourite actions beside it, and a
   box-shadow ring because outline cannot win here. Equal specificity to the
   vendor rule; this file loads later, so no !important is needed. */
.header-inner .profile-icon a.dropdown-toggle {
    color: #575962;
    font-size: 22px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border-radius: 999px;
}

.header-inner .profile-icon a.dropdown-toggle i { padding-top: 0; }

.header-inner .profile-icon a.dropdown-toggle img {
    border-color: #e4e6ef;
    width: 32px !important;
}

.header-inner .profile-icon a.dropdown-toggle:hover,
.header-inner .profile-icon a.dropdown-toggle:focus,
.header-inner .profile-icon.open a.dropdown-toggle {
    color: #7c3aed;
    background: transparent;
}

.header-inner .profile-icon.open a.dropdown-toggle img,
.header-inner .profile-icon a.dropdown-toggle:hover img { border-color: #7c3aed; }

.header-inner .profile-icon a.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .25);
}

/* ================================== seller program inside the account shell
   /account/become-seller renders the SAME six shared sections as the public
   /become-a-seller page, inside .col-md-9 under the three-step stepper. The
   shared rules assume a full-width column; these are the few adjustments the
   narrower column needs, and the status cards that used to be the last green
   .sl-* surface in the theme, now in the same violet language as everything
   around them. */
.gd-bsp.gd-bsp-account .gd-bsp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1200px) {
    .gd-bsp.gd-bsp-account .gd-bsp-hero { padding: 32px 30px; }
    .gd-bsp.gd-bsp-account .gd-rm-hero-copy h1 { font-size: 30px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .gd-bsp.gd-bsp-account .gd-bsp-hero-art { display: none; }
}

/* The stepper sits above the shared sections; its rule of thumb is that it
   reads as part of the same page, not as a leftover form header. */
.gd-bsp.gd-bsp-account .seller-journey-stepper { margin-bottom: 22px; }
.gd-bsp.gd-bsp-account .seller-journey-stepper hr { border-top-color: #e4e6ef; }
.gd-bsp.gd-bsp-account .seller-journey-stepper .text-primary { color: #6d28d9; }
.gd-bsp.gd-bsp-account .seller-journey-stepper .text-success { color: #1e6b2b; }

/* The state card: approved / pending / rejected / suspended / revoked, and
   the application form. One card, five badges — each a WORD, tinted. */
.gd-bsp .gd-bsp-status-card {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 26px;
    box-shadow: 0 1px 3px rgba(30, 39, 73, .04);
}

.gd-bsp .gd-bsp-status-card h3 {
    margin: 12px 0 8px;
    font-family: Rubik, 'Open Sans', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #1e2749;
}

.gd-bsp .gd-bsp-status-card p { color: #656c73; font-size: 14px; line-height: 1.6; }
.gd-bsp .gd-bsp-status-card .gd-bsp-status-reason { color: #3a3d45; }
.gd-bsp .gd-bsp-status-card .gd-bsp-status-reason strong { color: #1e2749; }

.gd-bsp .gd-bsp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.gd-bsp .gd-bsp-status-badge.is-approved { background: #eafaf2; color: #1e6b2b; border-color: #8fd6a4; }
.gd-bsp .gd-bsp-status-badge.is-pending { background: #fff6e5; color: #8a5a00; border-color: #e6c88a; }
.gd-bsp .gd-bsp-status-badge.is-rejected { background: #fdecee; color: #b62d35; border-color: #c9767f; }
.gd-bsp .gd-bsp-status-badge.is-suspended { background: #fff6e5; color: #8a5a00; border-color: #e6c88a; }
.gd-bsp .gd-bsp-status-badge.is-revoked { background: #f1f3f6; color: #656c73; border-color: #dfe3ea; }

.gd-bsp .gd-bsp-status-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.gd-bsp .gd-bsp-status-locked { display: flex; gap: 8px; align-items: baseline; margin: 14px 0 0; font-size: 13px; color: #8a8f99; }
.gd-bsp .gd-bsp-status-note { margin: 16px 0 0; font-size: 13px; color: #8a8f99; }

/* The application form inside the card keeps the theme's form helpers; only
   the card frame and the heading are ours. */
.gd-bsp .gd-bsp-status-card .form-horizontal .form-group { margin-left: 0; margin-right: 0; }
.gd-bsp .gd-bsp-status-card .form-horizontal .col-md-10 { padding-left: 0; }


/* ============================================================
   Header stack — the two header rows stick together, as one unit.

   The theme made only the top row sticky: its script adds .sticky to
   .header-inner on any scroll and app.css turns that row into
   position:fixed. The row left the flow (the page jumped up by its
   height) and the navigation row scrolled away underneath it — half a
   header detached from the other half. The rows now live inside one
   .gd-header-stack that is position:sticky, so they move together, keep
   their space in the flow (no jump) and compact smoothly: the theme's
   .sticky class is kept only as the "scrolled" signal.

   position:sticky needs no scrolling ancestor: app.css hides horizontal
   overflow on .main, which made .main a scroll container and defeated
   every sticky element on the page. overflow-x: clip clips exactly the
   same way without creating one.

   Measured canonical heights at ≥1200px (Chrome, 1680 wide): top row
   125 (52px logo + 36px padding above and below) + navigation 57 = 182
   at rest; compact top row 80 (14px padding) + 57 = 137. The account
   pages read --gd-header-stack-compact-h to sit below the header.
   ============================================================ */
:root {
    --gd-header-stack-h: 182px;
    --gd-header-stack-compact-h: 137px;
    /* header-scroll.js measures the real height once (load/resize) and never
       guesses a page's own copy of it; --gd-public-header-offset is the ONE
       thing any sticky sidebar (FAQ's "Browse by category" among them) reads.
       Hidden state (body.gd-header-hidden, set only by header-scroll.js)
       collapses it to a small viewport gap instead of the header's full height. */
    --gd-public-header-offset: var(--gd-header-stack-live-h, var(--gd-header-stack-compact-h));
}
body.gd-header-hidden { --gd-public-header-offset: 0px; }
.main { overflow-x: clip; }
.gd-header-stack {
    position: relative;
    z-index: 1091;
    background: #fff;
    transition: box-shadow 0.2s ease;
}
/* Sticky where the rows stack cleanly: wide desktops (both rows) and phones
   (the navigation row is hidden there). Between 992 and 1199px the
   navigation wraps onto two lines, so the header simply scrolls. */
@media (min-width: 1200px), (max-width: 991px) {
    .gd-header-stack { position: sticky; top: 0; }
}
/* header-scroll.js's one job: translate the whole stack (both rows travel as
   the single unit above), never the two rows separately, and never by
   touching top/height on every frame — a position:sticky box keeps its flow
   space regardless of its own transform, so nothing below jumps. */
.gd-header-stack { transition: transform 220ms ease; will-change: transform; }
body.gd-header-hidden .gd-header-stack { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .gd-header-stack { transition: none; } }
/* The theme's fixed row, neutralised: the row stays in the stack. */
.header-inner.sticky,
.rtl .header-inner.sticky {
    position: static !important;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    padding: 0;
    box-shadow: none;
    z-index: auto;
}
.gd-header-stack:has(.header-inner.sticky) { box-shadow: 0 2px 12px rgba(30, 39, 73, 0.08); }
@media (min-width: 1200px) {
    .header-inner > .container { transition: padding 0.2s ease; }
    .gd-header-stack:has(.header-inner.sticky) .header-inner > .container { padding-block: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .gd-header-stack, .header-inner > .container { transition: none; }
}

/* ============================================================
   Mega menu layer — the All Categories panel, kept out of the
   sticky header.

   Everything inside a position:sticky box travels with it, absolutely
   positioned descendants included, because their containing block is
   inside the sticky box. With the panel still in the navigation row it
   followed the header down the page and floated over the catalogue.
   The panel now renders one element AFTER the stack
   (public/include/category_menu_panel.blade.php) in this layer: an
   ordinary in-flow box of zero height that paints nothing, so the panel
   is positioned against the document and scrolls away with it.

   The layer repeats the panel's original class chain so every existing
   rule still matches; only the layer's own box is neutralised. Its
   stacking level sits below the header stack's, so a stuck header
   passes over the panel instead of under it.
   ============================================================ */
.gd-megamenu-layer {
    position: relative;
    height: 0 !important;
    margin: 0 !important;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    z-index: 99;
}
.gd-megamenu-layer > .container { height: 0; }
.gd-megamenu-layer .navbar-default {
    min-height: 0 !important;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    display: block;
}
.gd-megamenu-layer .category-menu-wrapper {
    background: transparent !important;
    position: static;
}
/* The panel used to hang 72px below the navigation row's TOP. The layer
   begins 77px lower (the 57px row plus the 20px gap the row keeps below
   itself), so the same place is 5px above the layer's own origin — which
   is what keeps the home page's panel aligned with the slider exactly as
   it was. */
.gd-megamenu-layer .category-menu-wrapper > .vertical-mega-menu { top: -5px; }
/* ------------------------------------------------------------------
   AUTHORS DIRECTORY — an author admitted by exception (a module that
   owns sample identities) is labelled, never shown as verified. The
   text comes from the admitting module; the chip is the product page's
   demo pill, so the two say "sample" the same way. */
.our-author .author-demo-mark,
.user-details .author-demo-mark {
    display: inline-block;
    margin: 2px 0 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eaf2fd;
    border: 1px solid #b9d4f5;
    color: #0f5cc4;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}


/* ==================================================================
   HOW YOU WANT TO PAY — the payment-method chooser on the membership
   confirmation panel, and the unfinished-setup notice on the membership
   page. Both exist because the site used to have exactly one answer to
   "which provider" and no way at all to say "you started something and
   did not finish it".

   Deliberately plain. This sits directly under a price the customer has
   just read and above the button that acts on it; anything decorative
   here competes with the figure that matters. Each option is a whole
   clickable row so a thumb can hit it, which is also why the row is
   given a real minimum height rather than relying on the radio.
   ================================================================== */
.gd-pay-choice {
    border: 1px solid #e4e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 14px;
}
.gd-pay-choice > legend {
    float: none;
    width: auto;
    border: 0;
    margin: 0 0 6px;
    padding: 0;
    font-size: 12px;
    line-height: 1.4;
}
.gd-pay-option {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    padding: 8px 4px;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}
.gd-pay-option + .gd-pay-option { border-top: 1px solid #f0f2f5; }
.gd-pay-option input[type="radio"] { margin: 0; flex: 0 0 auto; }
.gd-pay-option-name { font-weight: 600; color: #2a2f36; }
.gd-pay-option-hint { font-size: 12px; color: #656c73; }

/* THE NOTICE FOR A SETUP NOBODY FINISHED. Warning-toned, never the
   green of a membership in force: it is not one, and the whole fault it
   replaces was a page that dressed it as one. */
.gd-rm-incomplete .gd-rm-incomplete-body { margin-top: 4px; }
.gd-rm-incomplete .gd-rm-incomplete-note { margin-top: 6px; font-size: 12px; }
.gd-rm-incomplete .gd-rm-incomplete-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

@media (pointer: coarse) {
    .gd-pay-option { min-height: 48px; }
}

/* ==================================================================
   PHONE HEADER (<=767px). One row — menu · logo · search · account — laid
   out with flex like the desktop row above, not floats. The search sheet
   drops from the row's full width and the account menu is a card. The
   hide-on-scroll behaviour (header-scroll.js) and the off-canvas drawer
   (app.js) are untouched: both still key off the same classes. Desktop
   rules are not changed by anything in this block.
   ================================================================== */
@media (max-width: 767px) {
    .header-wrapper .header-inner { padding: 0; }
    .header-inner > .container {
        position: relative;
        display: flex;
        align-items: center;
        gap: 2px;
        min-height: 58px;
        padding: 6px 10px;
    }

    /* menu (hamburger) */
    /* Bootstrap's .visible-xs forces display:block on the button, so the
       three bars are laid out with margins, not flex. */
    .header-wrapper .header-inner .navbar-toggle {
        order: 1;
        float: none;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 14px 11px;
        border: 0;
        border-radius: 12px;
        background: transparent;
    }
    .header-wrapper .header-inner .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        margin: 0;
        border-radius: 2px;
        background: #1e2749;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .header-wrapper .header-inner .navbar-toggle .icon-bar + .icon-bar { margin-top: 5px; }
    .header-wrapper .header-inner .navbar-toggle:active { background: #f5f3ff; }
    .offcanvas .header-inner .navbar-toggle .top-bar { transform: translateY(7px) rotate(45deg); transform-origin: center; }
    .offcanvas .header-inner .navbar-toggle .middle-bar { opacity: 0; transform: none; }
    .offcanvas .header-inner .navbar-toggle .bottom-bar { transform: translateY(-7px) rotate(-45deg); transform-origin: center; }

    /* logo, centred between the controls */
    .header-inner .website-logo,
    .header-inner .website-logo.website-logo-text {
        order: 2;
        flex: 1 1 auto;
        float: none;
        width: auto;
        max-width: none;
        height: 44px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .header-inner .website-logo img { max-height: 36px; width: auto; }
    .header-inner .website-logo.website-logo-text h2 { font-size: 22px; }

    /* search: the toggle */
    .header-inner .search-area { order: 3; float: none; margin: 0; display: flex; align-items: center; }
    .header-inner .search-area form { margin: 0; }
    .header-inner .search-area .mobile-search { margin: 0; cursor: default; }
    .header-inner .search-area .mobile-search .dropdown { position: static; }
    .header-inner .search-area .mobile-search .dropdown .dropdown-toggle {
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #1e2749;
        cursor: pointer;
    }
    .header-inner .search-area .mobile-search .dropdown .dropdown-toggle > i {
        font-size: 20px;
        margin: 0;
        color: #1e2749;
    }
    .header-inner .search-area .mobile-search .dropdown .dropdown-toggle .gd-msearch-close { display: none; }
    .header-inner .search-area .mobile-search .dropdown.open .dropdown-toggle { background: #f5f3ff; }
    .header-inner .search-area .mobile-search .dropdown.open .dropdown-toggle .gd-msearch-icon { display: none; }
    .header-inner .search-area .mobile-search .dropdown.open .dropdown-toggle .gd-msearch-close { display: inline-block; color: #7c3aed; }

    /* search: the sheet under the row, full width */
    .header-inner .mobile-search > .dropdown > .dropdown-menu,
    .search-area .mobile-search .dropdown-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px 14px 14px;
        float: none;
        border: 0;
        border-top: 1px solid #f0f0f3;
        border-radius: 0 0 18px 18px;
        background: #fff;
        box-shadow: 0 16px 32px rgba(30, 39, 73, 0.14);
        transform: translateY(-6px);
        /* The theme fades the sheet with `transition: .2s` on everything,
           which leaves it visibility:hidden for the first frame after it
           opens, so the input cannot take focus. Visibility now flips at
           once on open and only after the fade on close. */
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    }
    .header-inner .mobile-search > .dropdown.open > .dropdown-menu { transform: none; transition-delay: 0s; }
    .header-inner .mobile-search > .dropdown > .dropdown-menu:after { display: none; }
    .header-inner .search-area .mobile-search .search-box {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 50px;
        padding: 0 6px 0 16px;
        border: 1.5px solid #e5e7eb;
        border-radius: 999px;
        background: #fff;
        box-shadow: none;
    }
    .header-inner .search-area .mobile-search .search-box:focus-within {
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    }
    .header-inner .search-area .mobile-search .gd-msearch-hint { color: #7c3aed; font-size: 16px; }
    .header-inner .search-area .mobile-search .search-box-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px !important;
        padding: 0 4px;
        border: 0;
        background: transparent;
        font-size: 15px;
        color: #1e2749;
        outline: none;
        box-shadow: none;
    }
    .header-inner .search-area .mobile-search .search-box-button { display: flex; align-items: center; }
    .header-inner .search-area .mobile-search .search-box-button::before { display: none; }
    .header-inner .search-area .mobile-search .search-box-button .search-box-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 50%;
        background: #7c3aed;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .header-inner .search-area .mobile-search .search-box-button .search-box-btn:hover,
    .header-inner .search-area .mobile-search .search-box-button .search-box-btn:focus { background: #6d28d9; }
    .header-inner .search-area .mobile-search .search-box-button .search-box-btn i { font-size: 15px; margin: 0; }

    /* account: violet disc, avatar inside when there is one */
    .header-inner .profile-icon { order: 4; float: none; margin: 0 0 0 2px; height: 44px; }
    .header-inner .profile-icon a.dropdown-toggle {
        width: 40px;
        height: 40px;
        min-height: 0;
        padding: 0;
        margin: 0;
        justify-content: center;
        border-radius: 50%;
        background: #7c3aed;
        color: #fff;
        font-size: 18px;
        overflow: hidden;
    }
    .header-inner .profile-icon a.dropdown-toggle i { color: #fff; }
    .header-inner .profile-icon a.dropdown-toggle img {
        width: 40px !important;
        height: 40px;
        border: 0;
        border-radius: 50%;
        object-fit: cover;
    }
    .header-inner .profile-icon a.dropdown-toggle .caret { display: none; }
    .header-inner .profile-icon.open a.dropdown-toggle,
    .header-inner .profile-icon a.dropdown-toggle:focus { background: #6d28d9; color: #fff; box-shadow: 0 0 0 3px #ede9fe; }

    /* guest: one round sign-in button; the sign-up link lives on the sign-in page */
    .header-inner .gd-hdr-auth { order: 4; float: none; margin: 0 0 0 2px; gap: 0; }
    .header-inner .gd-hdr-auth-link {
        width: 40px;
        min-height: 40px;
        justify-content: center;
        gap: 0;
        border-radius: 50%;
        background: #f5f3ff;
        color: #7c3aed;
    }
    .header-inner .gd-hdr-auth-link .fa { font-size: 20px; }
    .header-inner .gd-hdr-auth-text,
    .header-inner .gd-hdr-auth-signup { display: none; }

    /* account menu: a card */
    .header-inner .profile-icon .dropdown-menu {
        left: auto;
        right: 0;
        min-width: 280px;
        margin-top: 10px;
        padding: 8px;
        border: 1px solid #eceef3;
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(30, 39, 73, 0.16);
    }
    .header-inner .profile-icon .dropdown-menu > li > a,
    .header-inner .profile-icon .dropdown-menu .gd-signout {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 8px 12px;
        border-radius: 10px;
        color: #1e2749;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
        white-space: normal;
    }
    .header-inner .profile-icon .dropdown-menu > li > a i,
    .header-inner .profile-icon .dropdown-menu .gd-signout i {
        width: 22px;
        text-align: center;
        font-size: 16px;
        color: #6b7280;
    }
    .header-inner .profile-icon .dropdown-menu > li > a:hover,
    .header-inner .profile-icon .dropdown-menu > li > a:focus,
    .header-inner .profile-icon .dropdown-menu .gd-signout:hover,
    .header-inner .profile-icon .dropdown-menu .gd-signout:focus { background: #f5f3ff; color: #7c3aed; }
    .header-inner .profile-icon .dropdown-menu > li > a:hover i,
    .header-inner .profile-icon .dropdown-menu > li > a:focus i { color: #7c3aed; }
    .header-inner .profile-icon .dropdown-menu .divider { margin: 6px 4px; background: #eef0f4; }
    .header-inner .profile-icon .dropdown-menu .gd-acct-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: -8px -8px 6px;
        padding: 12px 14px;
        border-bottom: 1px solid #eef0f4;
        border-radius: 16px 16px 0 0;
        background: #faf9ff;
    }
    .gd-acct-head-avatar {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #7c3aed;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        overflow: hidden;
    }
    .gd-acct-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .gd-acct-head-text { min-width: 0; }
    .gd-acct-head-text strong { display: block; font-size: 14px; font-weight: 700; color: #1e2749; }
    .gd-acct-head-text span { display: block; font-size: 12px; color: #6b7280; }
    .header-inner .profile-icon .dropdown-menu .gd-acct-signout .gd-signout,
    .header-inner .profile-icon .dropdown-menu .gd-acct-signout .gd-signout i { color: #be123c; }
    .header-inner .profile-icon .dropdown-menu .gd-acct-signout .gd-signout:hover,
    .header-inner .profile-icon .dropdown-menu .gd-acct-signout .gd-signout:focus { background: #fff1f2; color: #9f1239; }
}
/* The identity row is a phone affordance; the desktop menu is unchanged. */
@media (min-width: 768px) {
    .gd-acct-head { display: none; }
}

/* ==================================================================
   EMBEDDED EPUB READER on the product page. The frame holds the whole
   reader (toolbar, page, phone bottom bar); on a phone the outlined link
   under it opens the same page full screen.
   ================================================================== */
.gd-epub-embed { width: 100%; }
.gd-epub-frame {
    display: block;
    width: 100%;
    height: 660px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}
.gd-epub-fullscreen {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-top: 12px;
    border: 1.5px solid #7c3aed;
    border-radius: 10px;
    color: #7c3aed;
    font-weight: 600;
    text-decoration: none;
}
.gd-epub-fullscreen:hover,
.gd-epub-fullscreen:focus { background: #f5f3ff; color: #7c3aed; text-decoration: none; }
@media (max-width: 767px) {
    .gd-epub-frame { height: min(78vh, 640px); min-height: 480px; border-radius: 10px; }
    .gd-epub-fullscreen { display: flex; }
}