/* ==========================================================================
   DKK DESIGN SYSTEM v2 - final authority layer (16 Oct)
   Loads AFTER every other stylesheet. Applies one palette, one spacing
   scale, and complete interaction states (hover / active / focus / disabled)
   to the whole product - marketing site, child app, parent portal, shop.
   Standards followed: 8pt spacing grid; USWDS & Material-style button
   states (default, hover, pressed, focus-visible, disabled); WCAG contrast;
   prefers-reduced-motion honoured.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS - the single source of truth
   (html:root beats any later plain :root, so these always win)
   --------------------------------------------------------------------- */
:root, html:root{
    /* brand sweep: every legacy red / green / navy usage resolves to the
       adventure palette, so old components recolour everywhere at once */
    /* Color tokens are printed last by dkk_theme_css_vars() (functions.php).
       The values below are fallbacks only - edit the theme defaults there. */
    --dkk-primary: #CC440E;
    --dkk-primary-dark: #A33208;
    --dkk-primary-light: #FFEDE3;
    --dkk-secondary: #1E5BD6;     /* white text on it = 5.96:1 */
    --dkk-navy: #0126CC;
    --dkk-blue-deep: #1746A2;
    --dkk-error: #B42318;
    --dkk-success: #1E6B34;

    /* 8pt spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    /* motion */
    --mo-fast: .15s;
    --mo-mid: .22s;
    --mo-ease: cubic-bezier(.2, .7, .3, 1);

    /* focus */
    --focus-ring: 0 0 0 3px rgba(47, 123, 255, .45);
}

/* ---------------------------------------------------------------------
   2. GLOBAL MOTION + FOCUS (all interactive elements, whole product)
   --------------------------------------------------------------------- */
a, button, summary, input, select, textarea,
.dkk-btn, [role="button"]{
    transition:
        background-color var(--mo-fast) var(--mo-ease),
        color var(--mo-fast) var(--mo-ease),
        border-color var(--mo-fast) var(--mo-ease),
        box-shadow var(--mo-fast) var(--mo-ease),
        transform var(--mo-fast) var(--mo-ease),
        opacity var(--mo-fast) var(--mo-ease);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
    outline: 3px solid rgba(47, 123, 255, .55);
    outline-offset: 2px;
    border-radius: 8px;
}
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------------------------------------------------------------------
   3. BUTTONS - full state set on every family
   --------------------------------------------------------------------- */
/* filled */
.dkk-btn-primary{
    background: var(--adv-orange);
    border-color: var(--adv-orange);
    color: #fff !important;
    box-shadow: 0 6px 0 var(--adv-orange-deep);
}
.dkk-btn-primary:hover{
    background: #FF6D38;
    border-color: #FF6D38;
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--adv-orange-deep);
}
.dkk-btn-primary:active{
    background: #EA4E15;
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--adv-orange-deep);
}
.dkk-btn-primary:disabled, .dkk-btn-primary[disabled]{
    background: #C9CBE0 !important;
    border-color: #C9CBE0 !important;
    box-shadow: 0 4px 0 #A9ADC9 !important;
    transform: none !important;
    cursor: not-allowed;
}
/* outline */
.dkk-btn-outline{
    background: #fff;
    color: var(--adv-ink) !important;
    border: 3px solid var(--adv-ink);
    box-shadow: 0 6px 0 rgba(11, 42, 91, .25);
}
.dkk-btn-outline:hover{
    background: var(--adv-sky-3);
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(11, 42, 91, .25);
}
.dkk-btn-outline:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(11, 42, 91, .25); }
/* secondary / blue */
.dkk-btn-secondary{
    background: var(--adv-blue);
    border-color: var(--adv-blue);
    color: #fff !important;
    box-shadow: 0 6px 0 var(--adv-blue-deep);
}
.dkk-btn-secondary:hover{ background: #4A8CFF; transform: translateY(-2px); box-shadow: 0 8px 0 var(--adv-blue-deep); }
.dkk-btn-secondary:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--adv-blue-deep); }
/* WooCommerce + generic submit buttons: same language */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce div.product form.cart .button,
.wc-block-components-button, button.button, input[type="submit"]:not(.dkk-btn){
    background: var(--adv-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--dkk-fun-font);
    font-weight: 700;
    padding: 14px 26px !important;
    box-shadow: 0 5px 0 var(--adv-orange-deep);
    line-height: 1.2;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .wc-block-components-button:hover,
button.button:hover, input[type="submit"]:not(.dkk-btn):hover{
    background: #FF6D38 !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--adv-orange-deep);
}
.woocommerce a.button:active, .woocommerce button.button:active,
button.button:active, input[type="submit"]:not(.dkk-btn):active{
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--adv-orange-deep);
}
.woocommerce a.button.alt{ background: var(--adv-blue) !important; box-shadow: 0 5px 0 var(--adv-blue-deep); }

/* quiet button: text + chevron */
.dkk-btn-text{ color: var(--adv-blue) !important; }
.dkk-btn-text:hover{ color: var(--adv-blue-deep) !important; }

/* ---------------------------------------------------------------------
   4. LINKS - content areas
   --------------------------------------------------------------------- */
.dkk-mkt a, .dkk-legal-page a, .dkk-contact-tile a, .dkk-content-area a,
.dkk-entry-content a, .dkk-notice a{
    color: var(--adv-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.dkk-mkt a:hover, .dkk-legal-page a:hover, .dkk-contact-tile a:hover,
.dkk-content-area a:hover, .dkk-entry-content a:hover{ color: var(--adv-blue-deep); }

/* ---------------------------------------------------------------------
   5. NAV + CHILDBAR + FOOTER interaction polish
   --------------------------------------------------------------------- */
.dkk-nav li a{ position: relative; }
.dkk-nav li a::after{
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 3px;
    border-radius: 3px;
    background: var(--adv-yellow);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--mo-mid) var(--mo-ease);
}
.dkk-nav li a:hover::after,
.dkk-nav li a.active::after,
.dkk-nav li.current-menu-item a::after{ transform: scaleX(1); }

.dkk-childbar-item:hover{ background: var(--adv-sky-3) !important; }
.dkk-childbar-logout:hover{ background: #FFE9E7 !important; color: #C0392B !important; }
.dkk-footer a{ text-decoration-thickness: 2px; }

/* child app bottom tabs (mobile) */
.dkk-app-child .dkk-cd-tab.active{ background: var(--adv-orange) !important; color: #fff !important; }

/* benefit icons follow the palette */
.dkk-benefit-icon svg{ color: var(--adv-orange) !important; }

/* ---------------------------------------------------------------------
   6. CARDS - one hover behaviour everywhere
   --------------------------------------------------------------------- */
.dkk-what-item, .dkk-benefit-card, .dkk-way-card, .dkk-mkt-card,
.dkk-catalog-card, .dkk-gift-pack, .dkk-contact-tile, .dkk-cd-book-card,
.dkk-cd-panel, .dkk-acct-card, .dkk-pack-option{
    transition:
        transform var(--mo-mid) var(--mo-ease),
        box-shadow var(--mo-mid) var(--mo-ease),
        border-color var(--mo-mid) var(--mo-ease),
        background-color var(--mo-mid) var(--mo-ease);
}
.dkk-what-item:hover, .dkk-benefit-card:hover, .dkk-way-card:hover,
.dkk-mkt-card:hover, .dkk-catalog-card:hover, .dkk-gift-pack:hover,
.dkk-contact-tile:hover, .dkk-cd-book-card:hover{
    transform: translateY(-4px);
}
.dkk-what-item:hover, .dkk-benefit-card:hover, .dkk-way-card:hover{
    box-shadow: 0 10px 0 rgba(11, 42, 91, .22) !important;
}
.dkk-catalog-card:hover{ box-shadow: 0 10px 0 rgba(11, 42, 91, .22) !important; }
.dkk-contact-tile:hover{ box-shadow: 0 8px 0 rgba(11, 42, 91, .2) !important; }
.dkk-what-item:hover .dkk-what-icon,
.dkk-benefit-card:hover .dkk-benefit-icon{
    transform: scale(1.07) rotate(-3deg);
}
.dkk-what-icon, .dkk-benefit-icon{ transition: transform var(--mo-mid) var(--mo-ease); }

/* ---------------------------------------------------------------------
   7. FORMS - one input language
   --------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
input[type="url"], textarea, select{
    border: 2px solid #C9D6F2;
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
    color: var(--adv-ink);
    transition: border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus,
input[type="url"]:focus, textarea:focus, select:focus{
    outline: 0;
    border-color: var(--adv-blue);
    box-shadow: var(--focus-ring);
}
input[type="checkbox"], input[type="radio"]{ accent-color: var(--adv-orange); }

/* ---------------------------------------------------------------------
   8. SPACING RHYTHM - one scale, tuned per boundary (2026-10-19)
   Scale: 28 (tight) / 40 (roomy) / 56 (band) / 72 (full) / 96 (major)
   Pairs that read as ONE band share a half-gap instead of stacking
   two full gaps (the old 72+72 = 144px cliff between visual groups).
   --------------------------------------------------------------------- */
.dkk-showcase, .dkk-kit-section, .dkk-ways-section, .dkk-what-section,
.dkk-how-section, .dkk-benefits-section, .dkk-gift-section,
.dkk-reassure-section, .dkk-cta-section{
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

/* Band pairs: these sections belong to the same visual group, so the
   seam between them is a shared half-gap, not two stacked full gaps. */
.dkk-what-section{ padding-bottom: 32px !important; }            /* what -> how seam: 104px (same story flow) */
.dkk-how-section{ padding-bottom: 72px !important; }             /* standard close: mechanics story ends here */
.dkk-reassure-section{ padding-top: 16px !important; }           /* reassure band hugs the gift close: 88px */
.dkk-benefits-section{ padding-bottom: 40px !important; }        /* badges band -> gift seam: 112px */

/* In-section breathing: a note under buttons is a footnote to the
   action, not a title to it - give it real air below the buttons. */
.dkk-kit-actions{ margin: 28px 0 34px !important; }              /* was 20px 0 10px - note now clearly separates from buttons */
.dkk-kit-note{ display: flex; align-items: center; gap: 8px; margin-top: 38px; font-size: var(--dkk-fs-14); font-weight: 600; color: var(--dkk-text-muted, #5b6478); }
.dkk-kit-note::before{
    content: "\2713";              /* a small green tick - this is the reassurance line */
    flex: 0 0 auto;
    width: 19px; height: 19px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #E7F6EC; color: #1E7A3C;
    border-radius: 50%;
    font-size: var(--dkk-fs-11); font-weight: 900; line-height: 1;
}
.dkk-gift-action{ gap: 22px !important; }                        /* was 10px - gift button -> voucher note */
.dkk-badges-band{ margin: 40px 0 0 !important; }
.dkk-page .dkk-entry-title{ margin: 40px auto 24px; }
.dkk-page .dkk-mkt, .dkk-page .dkk-legal-page, .dkk-page .dkk-contact-wrap,
.dkk-gift-page, .dkk-checkout-page, .dkk-cart-page{
    margin-bottom: 96px !important;
}

/* ---------------------------------------------------------------------
   9. MICRO-ANIMATIONS - life without noise
   --------------------------------------------------------------------- */
@keyframes dkkFloatA { 0%, 100% { transform: rotate(-8deg) translateY(12px); } 50% { transform: rotate(-8deg) translateY(2px); } }
@keyframes dkkFloatB { 0%, 100% { transform: rotate(-1deg) translateY(-8px); } 50% { transform: rotate(-1deg) translateY(-18px); } }
@keyframes dkkFloatC { 0%, 100% { transform: rotate(6deg) translateY(10px); } 50% { transform: rotate(6deg) translateY(0); } }
.dkk-hero-cover:nth-child(1){ animation: dkkFloatA 5.6s ease-in-out infinite; }
.dkk-hero-cover:nth-child(2){ animation: dkkFloatB 6.4s ease-in-out infinite; }
.dkk-hero-cover:nth-child(3){ animation: dkkFloatC 6s ease-in-out infinite; }
@keyframes dkkCloudDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(16px); } }
.dkk-hero-shape-1{ animation: dkkCloudDrift 10s ease-in-out infinite; }
.dkk-hero-shape-2{ animation: dkkCloudDrift 12s ease-in-out infinite reverse; }
@media (prefers-reduced-motion: reduce){
    .dkk-hero-cover, .dkk-hero-shape{ animation: none !important; }
}

/* ---------------------------------------------------------------------
   10. SMALL DRESS-UPS for stragglers
   --------------------------------------------------------------------- */
/* hero "Write a Book" CTA keeps its blue + gains press state */
.dkk-nav-cta:hover{ background: #4A8CFF !important; }
.dkk-nav-cta:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--adv-blue-deep) !important; }

/* pagination + tag pills act alive */
.dkk-pagination a:hover{ background: var(--adv-sky-3) !important; }

/* ---------------------------------------------------------------------
   11. PARENT PORTAL - the adult cut of the same brand
   (soft, restrained, professional: brand ink + blue + orange accents,
    readable states everywhere)
   --------------------------------------------------------------------- */
.woocommerce-account{
    --acct-navy: #0B2A5B;
    --acct-navy-2: #16386E;
    --acct-ink: #14213D;
    --acct-muted: #5B6478;
    --acct-line: #E2E8F4;
}
.dkk-acct-appbar{
    background: linear-gradient(120deg, #0B2A5B, #16386E);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 24px rgba(11, 42, 91, .28);
}
.dkk-acct-appbar-logout{
    background: rgba(255, 255, 255, .14);
    border: 1.5px solid rgba(255, 255, 255, .45);
    color: #fff;
    padding: 8px 20px;
}
.dkk-acct-appbar-logout:hover{ background: #fff; color: var(--adv-ink); border-color: #fff; }
.dkk-acct-appbar .dkk-wallet-chip{ border-color: rgba(255, 255, 255, .35); }
.dkk-acct-appbar .dkk-wallet-chip:hover{ background: rgba(255, 255, 255, .18); }

/* nav: dark bar -> clean professional light bar */
.woocommerce-account .woocommerce-MyAccount-navigation{
    background: #fff;
    border: 1px solid var(--acct-line);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 4px 18px rgba(11, 42, 91, .06);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{ background: transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
    color: var(--acct-ink);
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
    background: var(--adv-sky-3);
    color: var(--acct-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a{
    background: var(--adv-blue);
    color: #fff;
    box-shadow: 0 3px 0 var(--adv-blue-deep);
}

/* content: soft professional cards; hover lift is gentle (2px, not 4) */
.woocommerce-account .dkk-account-dashboard .dkk-acct-tile,
.woocommerce-account .dkk-cd-stat,
.woocommerce-account .dkk-credit-card,
.woocommerce-account .dkk-family-card{
    transition: transform var(--mo-mid) var(--mo-ease), box-shadow var(--mo-mid) var(--mo-ease);
}
.woocommerce-account .dkk-credit-card:hover,
.woocommerce-account .dkk-family-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(11, 42, 91, .10);
}
.woocommerce-account .dkk-btn-outline{
    border: 2px solid var(--acct-line);
    color: var(--adv-blue) !important;
    box-shadow: none;
}
.woocommerce-account .dkk-btn-outline:hover{
    border-color: var(--adv-blue);
    background: var(--adv-sky-3);
    transform: none;
    box-shadow: none;
}
.woocommerce-account .dkk-btn-primary{ box-shadow: 0 4px 0 var(--adv-orange-deep); }
.woocommerce-account .dkk-btn-primary:hover{ box-shadow: 0 6px 0 var(--adv-orange-deep); }

/* ===== batch-5 finishing (16 Oct) ===== */
/* auth (login/register/dashboard) headings join the palette */
.dkk-auth-hero h1{ color: var(--adv-ink) !important; font-family: var(--dkk-fun-font); }
.dkk-auth-hero p{ color: var(--adv-ink-soft) !important; }
.dkk-auth-card{
    border: 3px solid var(--adv-ink) !important;
    border-radius: 24px !important;
    box-shadow: 0 7px 0 rgba(11, 42, 91, .22) !important;
    background: #fff;
}
.dkk-auth-tab.active{ color: var(--adv-orange) !important; border-bottom-color: var(--adv-orange) !important; }
.dkk-auth-tab:hover:not(.active){ color: var(--adv-blue); }

/* rounder hero clouds */
.dkk-hero-shape-1{ width: 168px; height: 44px; left: 3%; top: 185px; }
.dkk-hero-shape-1::before{ width: 92px; height: 92px; left: 26px; top: -44px; }
.dkk-hero-shape-1::after{ width: 60px; height: 60px; right: 22px; top: -28px; }
.dkk-hero-shape-2{ width: 140px; height: 40px; right: 6%; top: 140px; }
.dkk-hero-shape-2::before{ width: 74px; height: 74px; left: 22px; top: -34px; }

/* ===== PORTAL HARDENED (16 Oct): beat plugin/theme login cascades ===== */
.woocommerce-account .dkk-acct-appbar{
    background: linear-gradient(120deg, #0B2A5B, #16386E) !important;
}
.woocommerce-account .dkk-acct-appbar .dkk-acct-appbar-logout{
    background: rgba(255, 255, 255, .14) !important;
    border: 1.5px solid rgba(255, 255, 255, .45) !important;
    color: #fff !important;
}
.woocommerce-account .dkk-acct-appbar .dkk-acct-appbar-logout:hover{
    background: #fff !important;
    color: #0B2A5B !important;
    border-color: #fff !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .dkk-app-account .woocommerce-MyAccount-navigation{
    background: #fff !important;
    border: 1px solid #E2E8F4 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px rgba(11, 42, 91, .06) !important;
    padding: 8px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul,
.woocommerce-account .dkk-app-account .woocommerce-MyAccount-navigation ul{ background: transparent !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-account .dkk-app-account .woocommerce-MyAccount-navigation ul li a{
    color: #14213D !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .dkk-app-account .woocommerce-MyAccount-navigation ul li a:hover{
    background: var(--adv-sky-3) !important;
    color: #14213D !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .dkk-app-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li[class*="is-active"] a{
    background: var(--adv-blue) !important;
    color: #fff !important;
    box-shadow: 0 3px 0 var(--adv-blue-deep);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::after{ display: none !important; }

/* WooCommerce page titles join the palette (shop / cart / checkout) */
.woocommerce-page:not(.woocommerce-account) h1.page-title,
.woocommerce-page:not(.woocommerce-account) h1.dkk-entry-title,
.woocommerce-page:not(.woocommerce-account) .woocommerce-products-header h1{
    font-family: var(--dkk-fun-font) !important;
    color: var(--adv-ink) !important;
}
.woocommerce-page h1.page-title::after{
    content: "";
    display: block;
    width: 78px;
    height: 8px;
    border-radius: 999px;
    background: var(--adv-yellow);
    border: 2px solid var(--adv-ink);
    margin-top: 14px;
}

/* ==========================================================================
   ONE SYSTEM (16 Oct) - the single surface + spacing language from here on.
   One padding scale, one card language, no stray hairline borders - applied
   identically to the site, auth, child app, parent portal and shop.
   This layer loads last of everything; it is the only place these decisions
   live now.
   ========================================================================== */
:root, html:root{
    --sh-soft: 0 10px 28px rgba(11, 42, 91, .07), 0 2px 6px rgba(11, 42, 91, .05);
    --sh-card: 0 14px 36px rgba(11, 42, 91, .09), 0 2px 6px rgba(11, 42, 91, .05);
}

/* 1. HEADER CTA - blue on blue, one clean pill
      (was: blue fill + orange border + orange base, two older rules colliding) */
.dkk-nav-cta{
    border-color: var(--adv-blue) !important;
    box-shadow: 0 5px 0 var(--adv-blue-deep) !important;
}
.dkk-nav-cta:hover{
    background: #4A8CFF !important;
    border-color: #4A8CFF !important;
    box-shadow: 0 7px 0 var(--adv-blue-deep) !important;
}
.dkk-nav-cta:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--adv-blue-deep) !important; }

/* 2. AUTH - one clean card, no card-in-card */
.dkk-auth-card{
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: var(--sh-card) !important;
    background: #fff !important;
}
.dkk-auth-card .dkk-card{
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 3. SURFACES - borderless soft cards on the app / portal / account / shop.
      Depth, never hairline outlines; hover lifts still work (shadow is soft, not locked). */
.dkk-account-hero, .dkk-account-stat, .dkk-account-card, .dkk-account-alert,
.dkk-credit-request-card, .dkk-activity-card, .dkk-reward-card,
.dkk-achievement-card, .dkk-done-card, .dkk-card, .dkk-stat, .dkk-book-card,
.dkk-credit-card, .dkk-family-card{
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--sh-soft);
}
.dkk-account-card.dkk-account-help{ border-left: 0 !important; }

/* 3b. SPACING - one padding rhythm: cards 24px, tiles 20px, alerts 18/22px */
.dkk-account-hero{ padding: 24px !important; }
.dkk-account-card, .dkk-credit-request-card, .dkk-activity-card,
.dkk-reward-card, .dkk-achievement-card, .dkk-done-card, .dkk-card{ padding: 24px !important; }
.dkk-account-stat{ padding: 20px 22px !important; }
.dkk-account-alert{ padding: 18px 22px !important; }

/* portal nav: light + soft (final word over the old navy-bar rule) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .dkk-app-account .woocommerce-MyAccount-navigation{
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--sh-soft) !important;
}

/* 4. CHILD APP - same language; the playfulness lives in the accents */
.dkk-cd-card, .dkk-cd-stat, .dkk-cd-book-card{ border: 0 !important; }
.dkk-cd-card{ padding: 24px !important; }
.dkk-cd-stat{ padding: 20px 16px !important; }
.dkk-childbar{ border: 0 !important; }
.dkk-childbar-user, .dkk-childbar-zen{ border: 0 !important; }
.dkk-childbar-logout{
    background: var(--dkk-primary-light, #FFEDE3) !important;
    color: var(--dkk-primary-dark, #D93F09) !important;
    border: 0 !important;
}
.dkk-childbar-logout:hover{ background: #FFDCC9 !important; color: #B33A0F !important; }

/* 5. WRITING TOOL - soft chips, no hard frames */
.dkk-scene-progress{ border: 0 !important; box-shadow: var(--sh-soft) !important; }
.dkk-progress-bar{ border: 0 !important; background: #EEF4FF !important; }
.dkk-word-count, .dkk-strip-count{ border: 0 !important; }
.dkk-write-hint{ border: 0 !important; border-radius: 14px !important; }
.dkk-page-strip{ border: 0 !important; box-shadow: var(--sh-soft) !important; }
.dkk-helper-fab{ border: 0 !important; box-shadow: var(--sh-soft) !important; }

/* 6. WOO / SITE NOTICES - one look */
.woocommerce-info, .woocommerce-message{
    background: #EAF6FF !important;
    color: var(--adv-ink) !important;
    border: 0 !important;
    border-radius: 16px !important;
}
.woocommerce-info::before, .woocommerce-message::before{ color: var(--adv-blue) !important; }
.woocommerce-error{ border: 0 !important; border-radius: 16px !important; background: #FFF1F1 !important; }

/* 7. MARKETING CARD RHYTHM - identical padding inside every feature card */
.dkk-what-item, .dkk-benefit-card, .dkk-way-card, .dkk-mkt-card{ padding: 24px !important; }
.dkk-contact-tile, .dkk-contact-formcard{ padding: 24px !important; }

/* 8. FAMILY / CHILD CHIPS - borderless, soft tint */
.dkk-account-children li{ border: 0 !important; background: #F4F8FF; }

/* ===== ROUND 2 (16 Oct): boxes lose their outlines - front page + site-wide =====
   One clean surface language: soft depth, no outlines, comfortable padding. */

/* feature cards & panels: borderless */
.dkk-way-card, .dkk-what-item, .dkk-timeline-step, .dkk-benefit-card,
.dkk-gift-card, .dkk-mkt-card, .dkk-catalog-card, .dkk-gift-pack,
.dkk-mkt-price-col, .dkk-contact-tile, .dkk-contact-formcard,
.dkk-badges-band, .dkk-cta-card, .dkk-hero-stat, .dkk-reassure-grid > *,
.dkk-legal-page, .dkk-legal-page .dkk-legal-sec, .dkk-showcase-card{
    border: 0 !important;
    box-shadow: 0 10px 26px rgba(11, 42, 91, .07), 0 2px 6px rgba(11, 42, 91, .05) !important;
}
.dkk-cta-card{ box-shadow: 0 16px 36px rgba(11, 42, 91, .16) !important; }
.dkk-way-card-alt{ box-shadow: 0 10px 26px rgba(47, 123, 255, .16), 0 2px 6px rgba(47, 123, 255, .10) !important; }
.dkk-legal-page .dkk-legal-sec > summary{ border: 0 !important; }
.dkk-legal-page .dkk-legal-sec[open]{ box-shadow: 0 0 0 3px rgba(47, 123, 255, .28), 0 10px 26px rgba(11, 42, 91, .09) !important; }

/* hover: soft lift instead of the old hard-offset shadows */
.dkk-what-item:hover, .dkk-benefit-card:hover, .dkk-way-card:hover,
.dkk-catalog-card:hover, .dkk-showcase-card:hover{
    box-shadow: 0 16px 34px rgba(11, 42, 91, .12) !important;
}

/* badges chips in the rewards band */
.dkk-badges-list li, .dkk-badges-list span{
    border: 0 !important;
    box-shadow: 0 2px 8px rgba(11, 42, 91, .08) !important;
}

/* timeline steps: real top/bottom room; number badge sits inside cleanly */
.dkk-timeline-step{ padding: 22px 18px 24px !important; }
.dkk-timeline-num{ box-shadow: 0 3px 8px rgba(11, 42, 91, .15) !important; }

/* reassurance pills: padding + surface */
.dkk-reassure-grid > *{ padding: 10px 16px !important; }

/* sticker pills: no outline, deeper text for contrast, same brand yellow */
.dkk-hero-badge, .dkk-section-badge, .dkk-showcase-eyebrow, .dkk-gift-eyebrow{
    border: 0 !important;
    color: var(--adv-ink) !important;
    box-shadow: 0 4px 10px rgba(11, 42, 91, .12) !important;
}

/* icon chips: green family + deep-green glyphs (was yellow w/ weak contrast) */
.dkk-benefit-icon, .dkk-reassure-icon, .dkk-gift-point-icon{
    background: #E3F4DC !important;
    border: 0 !important;
}
.dkk-benefit-icon svg, .dkk-reassure-icon svg, .dkk-gift-point-icon svg{ color: #1E7A38 !important; }

/* ===== ROUND 2A: panel + number circles lose outlines too ===== */
.dkk-reassure-grid{ border: 0 !important; box-shadow: none !important; }
.dkk-timeline-num{ border: 0 !important; }

/* ===== ROUND 2B: contact boxes (final word over the page-scoped legacy rule) ===== */
.dkk-page .dkk-contact-tile, .dkk-page .dkk-contact-formcard{
    border: 0 !important;
    box-shadow: 0 10px 26px rgba(11, 42, 91, .07), 0 2px 6px rgba(11, 42, 91, .05) !important;
}

/* Filled account CTAs: white on deep orange = 4.77:1 (WCAG AA).
   A global account link colour used to win over the button colour,
   which left blue text on an orange button (1.25:1). */
.dkk-account-btn:not(.dkk-account-btn-secondary):not(.dkk-account-btn-ghost){
    background: var(--dkk-primary, #CC440E) !important;
    color: #FFFFFF !important;
}
.dkk-account-btn:not(.dkk-account-btn-secondary):not(.dkk-account-btn-ghost):hover{
    background: var(--dkk-primary-dark, #A33208) !important;
    color: #FFFFFF !important;
}
/* ===== SOLID ACCENT PAIRING (2026-10-19) =====
   The bright brand orange stays for filled surfaces, but its label is deep
   navy (5.12:1) instead of white (3.12:1 - failed WCAG AA). White stays on
   the deep blue, where it measures 5.96:1. One rule: filled warm colour ->
   navy label; filled cool colour -> white label. */
.dkk-btn-primary:not(.dkk-nav-cta),
.dkk-btn-primary:not(.dkk-nav-cta):hover,
.dkk-btn-primary:not(.dkk-nav-cta):active{
    background: var(--dkk-primary) !important;
    border-color: var(--dkk-primary) !important;
    color: #FFFFFF !important;
}
.dkk-btn-primary:not(.dkk-nav-cta):hover{ background: #F0500F !important; border-color: #F0500F !important; }
.dkk-btn-primary:disabled, .dkk-btn-primary[disabled]{ color: #FFFFFF !important; }
/* Header CTA stays the deliberate deep-blue pill with a white label. */
.dkk-nav-cta{ background: var(--dkk-secondary) !important; color: #FFFFFF !important; }
.dkk-nav-cta:hover{ background: #1746A2 !important; border-color: #1746A2 !important; }

.dkk-account-btn:not(.dkk-account-btn-secondary):not(.dkk-account-btn-ghost),
.dkk-account-btn:not(.dkk-account-btn-secondary):not(.dkk-account-btn-ghost):hover{
    background: var(--dkk-primary) !important;
    color: #FFFFFF !important;
}
.dkk-account-btn:not(.dkk-account-btn-secondary):not(.dkk-account-btn-ghost):hover{ background: #F0500F !important; }

.dkk-app-child .dkk-cd-tab.active{ background: var(--dkk-primary) !important; color: #FFFFFF !important; }

/* Coffee-cream tints keep dark text (never white) - white on cream is 1.1:1.
   The active row is navy, so its label stays white. */
.dkk-childbar-item:hover{ color: #14213D !important; background: #FFF3D6 !important; }
.dkk-childbar-nav .dkk-childbar-item.active{ background: var(--dkk-navy) !important; color: #FFFFFF !important; }
/* ===== BOOKS FOR SALE: title aligns with the catalog grid (2026-10-19) =====
   The page title was a centred 980px column while the catalog grid is
   1120px wide inside .dkk-frontend-wrap - so their left edges never met.
   Scope to the catalog page only; other pages keep the 980 column. */
.page-id-22 .dkk-entry-title{
    max-width: none;
    margin-left: 16px;
    margin-right: 16px;
}
@media (max-width: 700px){
    .page-id-22 .dkk-entry-title{ margin-left: 16px; margin-right: 16px; }
}
/* ===== HERO CLOUDS REMOVED (2026-10-19) =====
   Client request: no clouds in the front-page hero. The two white drifting
   cloud shapes are decorative only - hiding them leaves the sky gradient,
   the hill and Spark's collage untouched. */
.dkk-hero .dkk-hero-shape{ display: none !important; }
/* ===== PAGE TITLE ALIGNMENT (2026-10-20) =====
   Page titles were a 980px centred column while these pages lay their
   content out wider - titles floated 60-90px in from the content edge. */
.page-id-225 .dkk-entry-title{            /* Contact Us */
    max-width: 1100px;
    margin-left: 50px;
    margin-right: 50px;
}
.page-id-408 .dkk-entry-title{            /* Sample book: centre over the 640px viewer */
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
@media (max-width: 700px){
    .page-id-225 .dkk-entry-title{ max-width: none; margin-left: 0; margin-right: 0; }
    .page-id-408 .dkk-entry-title{ max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
}
/* ===== TYPOGRAPHY TOKENS (2026-10-21) =====
   Fonts and sizes now come from the same final token layer as colours:
   plugin Branding options -> dkk_theme_css_vars() -> these rules. No more
   hunting 40+ hardcoded font-family declarations to change a font. */
body,
.dkk-site{
    font-family: var(--dkk-font-body, "Nunito", -apple-system, sans-serif);
    font-size: calc(16.8px * var(--dkk-font-scale, 1));
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--dkk-font-display, "Fredoka", "Nunito", sans-serif);
}

@media (min-width: 701px){
    .dkk-section-header h2{ font-size: calc(34px * var(--dkk-font-scale, 1)); }
}
@media (max-width: 700px){
    .dkk-section-header h2{ font-size: calc(24px * var(--dkk-font-scale, 1)); }
}
/* Legacy font vars now point at the single typography tokens. */
:root{
    --font-body: var(--dkk-font-body, "Nunito", sans-serif);
    --font-head: var(--dkk-font-display, "Baloo 2", sans-serif);
    --dkk-fun-font: var(--dkk-font-display, "Baloo 2", sans-serif);
}

/* Rem/em sizes across the whole site scale with the token. */
html{
    font-size: calc(16px * var(--dkk-font-scale, 1));
}


/* ===== INNER PAGE GUTTERS (2026-10-21) =====
   .dkk-page shares its element with .dkk-container, so zeroing its padding
   used to wipe the container gutters. Keep a guaranteed inset here. */
.dkk-container.dkk-page{
    padding-left: 20px;
    padding-right: 20px;
}
@media (max-width: 700px){
    .dkk-container.dkk-page{
        padding-left: 16px;
        padding-right: 16px;
    }
    .dkk-container.dkk-page .dkk-entry-title{
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }
}

/* ===== MOBILE HERO (2026-10-21) =====
   The speech bubble sat on top of the mascot's head and the 220px top pad
   plus 20px body copy made the hero 1346px tall on a 390px screen.
   Compact stack: bubble above the mascot, tighter copy, no text shadow. */
@media (max-width: 900px){
    .dkk-hero{
        padding-top: calc(var(--header-offset, 180px) + 8px);
    }
    .dkk-hero-content{
        padding: 14px 16px 36px;
        gap: 14px;
    }
    .dkk-hero-visual{
        order: -1;
        justify-content: center;
        padding-right: 0;
    }
    .dkk-hero-illustration{
        max-width: 210px;
        margin: 0 auto;
        padding-top: 112px;
    }
    .dkk-hero-bubble{
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        padding: 11px 14px;
        border-width: 2px;
        border-radius: 16px 16px 16px 4px;
        box-shadow: 0 6px 16px rgba(1, 15, 84, 0.10);
    }
    .dkk-hero-bubble p{
        margin: 0;
        font-size: 14.5px;
        line-height: 1.35;
    }
    .dkk-hero-badge{
        margin-bottom: 12px;
        padding: 6px 14px;
        font-size: 13.5px;
    }
    .dkk-hero h1,
    .dkk-hero .dkk-hero-title{
        font-size: 29px;
        line-height: 1.14;
        text-shadow: none;
        text-wrap: balance;
    }
    .dkk-hero-sub{
        font-size: 16.5px;
        line-height: 1.5;
        margin-bottom: 18px;
    }
    .dkk-hero-actions{
        gap: 10px;
        margin: 20px 0 18px;
        flex-direction: column;
    }
    .dkk-hero-actions .dkk-btn{
        width: 100%;
        justify-content: center;
        padding: 13px 16px;
        font-size: 16px;
    }
    .dkk-hero-stats{
        margin-top: 16px;
    }
}

/* ===== PARENT ACCOUNT NAV: ONE LINE ON DESKTOP (2026-10-21) =====
   Eight items wrapped "Orders" onto a second row at every desktop width. */
/* header is fixed on mobile: pad by header height + 10px, not +40px */
@media (max-width: 900px){
    .dkk-transparent-header.dkk-front-page .dkk-hero{
        padding-top: calc(var(--header-offset, 180px) + 10px);
    }
}

@media (min-width: 1024px){
    .woocommerce-account .woocommerce-MyAccount-navigation ul{
        flex-wrap: nowrap !important;
        gap: 4px;
        justify-content: space-between;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li{
        flex: 0 0 auto;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a{
        padding: 9px 8px !important;
        font-size: 12.5px !important;
        white-space: nowrap;
    }
}
@media (min-width: 1024px) and (max-width: 1199px){
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a{
        padding: 9px 8px !important;
        font-size: 12px !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul{
        gap: 3px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a .dkk-nav-icon{
        display: none;
    }
}
@media (min-width: 1400px){
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a{
        padding: 10px 8px !important;
        font-size: 13.5px !important;
    }
}

/* ===== MOBILE HEADER HEIGHT (2026-10-21) =====
   The transparent-header rule forced a 180px bar on a 390px screen, eating
   the whole first screen. Compact it; --header-offset follows the real height. */
@media (max-width: 700px){
    .dkk-transparent-header .dkk-header-inner{
        min-height: 92px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .dkk-transparent-header .dkk-brand-img{
        max-height: 52px;
    }
    .dkk-transparent-header .dkk-header.scrolled .dkk-header-inner{
        min-height: 62px;
    }
}


/* ===== BUTTON SIZE SYSTEM (2026-10-21) =====
   Buttons rendered at four different heights (44 / 46 / 62 / 64) because each
   variant brought its own border width and padding. One explicit scale now:
   default 46px, large 64px - regardless of outline vs filled. */
.dkk-btn{
    min-height: 46px;
    padding: 10px 24px;
    border-width: 3px;
    line-height: 1.2;
    box-sizing: border-box;
}
.dkk-btn-lg,
.dkk-showcase .dkk-btn{
    min-height: 64px;
    padding: 18px 36px;
    font-size: 1.15rem;
    line-height: 1.2;
}

/* ===== GIFT CARD: CENTRE THE CTA WHEN THE CARD WRAPS (2026-10-21) =====
   Between 761px and ~1100px the points list and the action block no longer fit
   side by side, so the action wrapped to a new row and hugged the left edge
   while every other section CTA is centred. */
@media (max-width: 1100px){
    .dkk-gift-card{
        justify-content: center;
    }
    .dkk-gift-action{
        flex: 1 1 100%;
        align-items: center;
        text-align: center;
    }
}

/* Big app CTAs: keep the label on one line on phones. */
@media (max-width: 700px){
    .dkk-btn-big{
        font-size: 16px;
        padding: 12px 18px;
        white-space: nowrap;
    }
}

/* Kit CTA row: one-line labels, equal full-width buttons on phones. */
@media (max-width: 700px){
    .dkk-kit-actions{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .dkk-kit-actions .dkk-btn{
        width: 100%;
        font-size: 16px;
        padding: 16px 20px;
    }
}

/* ===== SHOWCASE CAROUSEL CENTRING (2026-10-21) =====
   The mobile card carried a fixed 280px flex basis while its slide content
   box is 238px, so every card overflowed to the right and was clipped by the
   viewport - the row read as shifted left. Fill the slide instead. */
@media (max-width: 1080px){
    .dkk-showcase-slider .dkk-showcase-slide{
        padding: 0 10px;
    }
    .dkk-showcase-slider .dkk-showcase-slide .dkk-showcase-card{
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* ===================================================================
   LOGGED-IN APP BAR (2026-10-22)
   The public masthead is a 180px bar with a 72px logo. Logged-in users
   were getting a 67px bar with a 44px logo, and on phones the account
   chips wrapped onto three rows: a 150px bar with a 25px logo. These
   rules bring the app bar back in line with the masthead's weight and
   keep it on a single row at every width.
   =================================================================== */
.dkk-appbar-inner{
    max-width: var(--dkk-max-width, 1200px);
    min-height: 84px;
    padding: 12px 20px;
    gap: 24px;
}
.dkk-appbar-brand{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.dkk-appbar .dkk-brand-img{
    max-height: 60px;
    width: auto;
    flex: 0 0 auto;
}
.dkk-appbar-nav{
    gap: 10px;
    flex-wrap: nowrap;
}
.dkk-appbar-nav a{
    font-size: var(--dkk-fs-15, 15px);
    padding: 8px 16px;
}

@media (max-width: 900px){
    .dkk-appbar-inner{
        min-height: 72px;
        padding: 10px 16px;
        gap: 16px;
    }
    .dkk-appbar .dkk-brand-img{ max-height: 48px; }
}

@media (max-width: 700px){
    .dkk-appbar-inner{
        min-height: 64px;
        padding: 8px 12px;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .dkk-appbar .dkk-brand-img{ max-height: 40px; }
    /* One row that scrolls sideways instead of wrapping into a stack. */
    .dkk-appbar-nav{
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .dkk-appbar-nav::-webkit-scrollbar{ display: none; }
    .dkk-appbar-nav a{
        font-size: var(--dkk-fs-13, 13px);
        padding: 6px 10px;
        flex: 0 0 auto;
    }
}


/* ===== MASTHEAD LOGO SIZE (2026-10-22) =====
   Next to a 1200px bar the resting logo read as a postage stamp. It now
   renders at 96px tall on desktop and 64px on phones; the scrolled bar keeps
   its compact mark, which was already right. */
.dkk-header .dkk-brand-img{ max-height: 96px; }
.dkk-header.scrolled .dkk-brand-img{ max-height: 56px; }

@media (max-width: 900px){
    .dkk-header .dkk-brand-img{ max-height: 78px; }
    .dkk-header.scrolled .dkk-brand-img{ max-height: 52px; }
}
@media (max-width: 700px){
    .dkk-header .dkk-brand-img{ max-height: 64px; }
    .dkk-header.scrolled .dkk-brand-img{ max-height: 46px; }
    .dkk-transparent-header .dkk-header.scrolled .dkk-brand-img{ max-height: 46px; }
    .dkk-transparent-header .dkk-header-inner{ min-height: 88px; }
}


/* ===== BOOKS FOR SALE GRID (2026-10-22) =====
   The catalog inherited the generic book grid (minmax 380px), so a single
   title filled half the page: 552px card, 532x752 cover. Books for Sale is a
   shelf: three across on desktop, two on tablet, one on a phone, and the
   cover is a thumbnail rather than a wall poster. */
@media (min-width: 901px){
    .dkk-catalog-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }
}
@media (min-width: 601px) and (max-width: 900px){
    .dkk-catalog-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}
@media (max-width: 600px){
    .dkk-catalog-grid{
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}

.dkk-catalog-card{
    padding: 16px 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dkk-catalog-card img{
    width: 100% !important;
    max-width: 188px;
    margin: 0 auto 14px !important;
    aspect-ratio: 210 / 297;
    object-fit: cover;
    border-radius: 12px;
}
.dkk-catalog-card .dkk-cover-placeholder{
    width: 100%;
    max-width: 188px;
    margin: 0 auto 14px;
    border-radius: 12px;
    border-width: 2px;
    aspect-ratio: 210 / 297;
    height: auto;
}
.dkk-catalog-card h3{
    margin: 0 0 4px;
    line-height: 1.25;
}
.dkk-catalog-card .dkk-btn{
    margin-top: 12px;
}

@media (max-width: 600px){
    .dkk-catalog-card img,
    .dkk-catalog-card .dkk-cover-placeholder{ max-width: 168px; }
}