/* Help pages share the storefront typography and appearance preference. */
@media screen {
    body.aphro-help-page {
        --help-bg: #fcfaf9;
        --help-surface: #ffffff;
        --help-soft: #f5f0ef;
        --help-text: #2b2027;
        --help-muted: #6d6068;
        --help-border: #ded5d8;
        --help-accent: #9c3e58;
        --help-accent-soft: #f9edf0;
        --help-focus: #9c3e58;
        background: var(--help-bg);
        color: var(--help-text);
    }

    html.aphro-dark body.aphro-help-page {
        --help-bg: var(--aphro-theme-bg, #151016);
        --help-surface: var(--aphro-theme-surface, #20161d);
        --help-soft: var(--aphro-theme-raised, #2b2129);
        --help-text: var(--aphro-theme-text, #f6edf0);
        --help-muted: var(--aphro-theme-muted, #c6b6c0);
        --help-border: var(--aphro-theme-border, #57444f);
        --help-accent: var(--aphro-theme-accent, #f0a1b2);
        --help-accent-soft: #33212c;
        --help-focus: #f0a1b2;
        background: var(--help-bg);
        color: var(--help-text);
    }

    body.aphro-help-page .aphro-help {
        width: min(1160px, calc(100% - 64px));
        margin: 0 auto;
        padding: 30px 0 88px;
        color: var(--help-text);
    }

    body.aphro-help-page .aphro-help *,
    body.aphro-help-page .aphro-help *::before,
    body.aphro-help-page .aphro-help *::after { box-sizing: border-box; }

    body.aphro-help-page .aphro-help a { color: var(--help-accent); }
    body.aphro-help-page .aphro-help :is(a, button, input, summary):focus-visible {
        outline: 2px solid var(--help-focus);
        outline-offset: 4px;
    }

    body.aphro-help-page .aphro-help-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 9px;
        margin: 0 0 38px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--help-muted);
    }
    body.aphro-help-page .aphro-help-breadcrumb a { color: inherit; text-decoration: none; }
    body.aphro-help-page .aphro-help-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
    body.aphro-help-page .aphro-help-breadcrumb [aria-current] { color: var(--help-text); }

    body.aphro-help-page .aphro-help-hero { max-width: 760px; margin-bottom: 34px; }
    body.aphro-help-page .aphro-help-eyebrow {
        margin: 0 0 13px;
        color: var(--help-accent);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .13em;
        text-transform: uppercase;
    }
    body.aphro-help-page .aphro-help-hero h1 {
        margin: 0;
        color: var(--help-text);
        font-family: Cardo, Georgia, 'Times New Roman', serif;
        font-size: clamp(36px, 4.3vw, 54px);
        font-weight: 400;
        line-height: 1.12;
        letter-spacing: -.025em;
        text-wrap: balance;
    }
    body.aphro-help-page .aphro-help-intro {
        max-width: 64ch;
        margin: 17px 0 0;
        color: var(--help-muted);
        font-size: 16px;
        line-height: 1.75;
    }

    body.aphro-help-page .aphro-help-nav {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
        margin: 0 0 44px;
        padding: 0 0 32px;
        border-bottom: 1px solid var(--help-border);
    }
    body.aphro-help-page .aphro-help-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 76px;
        padding: 15px;
        border: 1px solid var(--help-border);
        border-radius: 12px;
        background: var(--help-surface);
        color: var(--help-text);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        text-decoration: none;
        transition: border-color .16s ease, background-color .16s ease;
    }
    body.aphro-help-page .aphro-help-nav svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--help-muted); }
    body.aphro-help-page .aphro-help-nav a:hover { background: var(--help-soft); border-color: var(--help-accent); }
    body.aphro-help-page .aphro-help-nav a[aria-current="page"] {
        background: var(--help-accent-soft);
        border-color: var(--help-accent);
        color: var(--help-accent);
    }
    body.aphro-help-page .aphro-help-nav a[aria-current="page"] svg { color: currentColor; }

    body.aphro-help-page .aphro-help-layout {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
        gap: clamp(40px, 6vw, 82px);
    }
    body.aphro-help-page .aphro-help-sidebar { position: sticky; top: calc(var(--aphro-help-header-height, 160px) + 24px); min-width: 0; }
    body.aphro-help-page .aphro-help-sidebar-title {
        margin: 0 0 15px;
        color: var(--help-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    body.aphro-help-page .aphro-help-toc { display: grid; gap: 3px; }
    body.aphro-help-page .aphro-help-toc a {
        display: block;
        padding: 8px 0;
        color: var(--help-muted);
        font-size: 13px;
        line-height: 1.55;
        text-decoration: none;
    }
    body.aphro-help-page .aphro-help-toc a:hover { color: var(--help-accent); text-decoration: underline; text-underline-offset: 4px; }
    body.aphro-help-page .aphro-help-support {
        margin-top: 25px;
        padding-top: 24px;
        border-top: 1px solid var(--help-border);
        font-size: 13px;
        line-height: 1.7;
    }
    body.aphro-help-page .aphro-help-support h2 { margin: 0 0 8px; color: var(--help-text); font: inherit; font-size: 15px; font-weight: 600; }
    body.aphro-help-page .aphro-help-support p { margin: 0 0 12px; color: var(--help-muted); }
    body.aphro-help-page .aphro-help-support a { text-underline-offset: 4px; overflow-wrap: anywhere; }
    body.aphro-help-page .aphro-help-mobile-toc { display: none; }

    body.aphro-help-page .aphro-help-article.entry-content {
        width: 100%;
        max-width: 70ch;
        min-width: 0;
        margin: 0;
        color: var(--help-text);
        font-size: 16px;
        line-height: 1.75;
        overflow-wrap: break-word;
    }
    body.aphro-help-page .aphro-help-article :is(h2, h3, h4, [id]) { scroll-margin-top: calc(var(--aphro-help-header-height, 160px) + 24px); }
    body.aphro-help-page .aphro-help-article h2 {
        margin: 38px 0 14px;
        color: var(--help-text);
        font-family: inherit;
        font-size: 23px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -.015em;
    }
    body.aphro-help-page .aphro-help-article h3 { margin: 25px 0 9px; color: var(--help-text); font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.45; }
    body.aphro-help-page .aphro-help-article p { margin: 0 0 18px; color: var(--help-text); }
    body.aphro-help-page .aphro-help-article :is(ul, ol) { margin: 0 0 20px; padding-left: 23px; color: var(--help-text); }
    body.aphro-help-page .aphro-help-article li { margin: 6px 0; padding-left: 3px; }
    body.aphro-help-page .aphro-help-article li::marker { color: var(--help-muted); }
    body.aphro-help-page .aphro-help-article strong { color: inherit; font-weight: 600; }
    body.aphro-help-page .aphro-help-article a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
    body.aphro-help-page .aphro-help-article a:hover { text-decoration-thickness: 2px; }
    body.aphro-help-page .aphro-help-article .aphro-help-updated { margin: 0 0 18px; color: var(--help-muted); font-size: 12px; line-height: 1.5; }
    body.aphro-help-page .aphro-help-summary {
        margin: 0 0 32px;
        padding: 23px 25px;
        border: 1px solid var(--help-border);
        border-radius: 12px;
        background: var(--help-soft);
    }
    body.aphro-help-page .aphro-help-summary p { margin: 0; font-size: 15px; line-height: 1.75; }
    body.aphro-help-page .aphro-help-summary p + p { margin-top: 12px; }
    body.aphro-help-page .aphro-help-article table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
    body.aphro-help-page .aphro-help-article :is(th, td) { padding: 13px 15px; border: 1px solid var(--help-border); color: var(--help-text); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
    body.aphro-help-page .aphro-help-article th { background: var(--help-soft); font-weight: 600; }
    body.aphro-help-page .aphro-help-article td { background: var(--help-surface); }
    body.aphro-help-page .aphro-help-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--help-border); }
    body.aphro-help-page .aphro-help-related h2 { margin-top: 0; font-size: 18px; }
    body.aphro-help-page .aphro-help-related p { color: var(--help-muted); font-size: 14px; }
    body.aphro-help-page .aphro-help-related ul { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
    body.aphro-help-page .aphro-help-related li { margin: 0; padding: 0; }

    /* Native disclosures keep FAQs usable with keyboard input and without JS. */
    body.aphro-help-page .aphro-help-faq {
        margin: 0;
        border-bottom: 1px solid var(--help-border);
        background: transparent;
        color: var(--help-text);
    }
    body.aphro-help-page .aphro-help-faq:first-of-type { border-top: 1px solid var(--help-border); }
    body.aphro-help-page .aphro-help-faq > summary {
        position: relative;
        display: block;
        min-height: 64px;
        padding: 20px 44px 20px 0;
        color: var(--help-text);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.55;
        list-style: none;
        cursor: pointer;
    }
    body.aphro-help-page .aphro-help-faq > summary::-webkit-details-marker { display: none; }
    body.aphro-help-page .aphro-help-faq > summary::marker { content: ''; }
    body.aphro-help-page .aphro-help-faq > summary::after {
        content: '';
        position: absolute;
        top: 25px;
        right: 7px;
        width: 14px;
        height: 14px;
        background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
                    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
        color: var(--help-accent);
    }
    body.aphro-help-page .aphro-help-faq[open] > summary::after { background-size: 14px 1.5px, 0 0; }
    body.aphro-help-page .aphro-help-faq > summary:hover { color: var(--help-accent); }
    body.aphro-help-page .aphro-help-faq > summary:focus-visible { outline-offset: 1px; border-radius: 4px; }
    body.aphro-help-page .aphro-help-faq-answer { padding: 0 36px 23px 0; }
    body.aphro-help-page .aphro-help-faq-answer :is(p, ul, ol) { color: var(--help-muted); font-size: 15px; line-height: 1.75; }
    body.aphro-help-page .aphro-help-faq-answer > :last-child { margin-bottom: 0; }

    /* Preserve the existing lookup form and its submitted field names. */
    body.aphro-help-page .aphro-help-article .j17track-track-form-wrap { max-width: none; margin: 24px 0 32px; padding: 0; }
    body.aphro-help-page .aphro-help-article .j17track-track-form {
        display: grid;
        gap: 20px;
        margin: 0;
        padding: 26px;
        border: 1px solid var(--help-border);
        border-radius: 12px;
        background: var(--help-surface);
        color: var(--help-text);
        box-shadow: none;
    }
    body.aphro-help-page .aphro-help-article .j17track-track-form::before { display: none; }
    body.aphro-help-page .aphro-help-article .j17track-track-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    body.aphro-help-page .aphro-help-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
    body.aphro-help-page .aphro-help-field label { display: block; margin: 0; color: var(--help-text); font-size: 13px; font-weight: 600; line-height: 1.5; }
    body.aphro-help-page .aphro-help-field small { color: var(--help-muted); font-size: 12px; line-height: 1.5; }
    body.aphro-help-page .aphro-help-article .j17track-track-form input:is([type="text"], [type="email"]) {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        margin: 0;
        padding: 12px 14px;
        border: 1px solid var(--help-border);
        border-radius: 8px;
        background: var(--help-bg);
        color: var(--help-text);
        font: inherit;
        font-size: 16px;
        line-height: 1.5;
        box-shadow: none;
    }
    body.aphro-help-page .aphro-help-article .j17track-track-form input::placeholder { color: var(--help-muted); opacity: 1; }
    body.aphro-help-page .aphro-help-article .j17track-track-form input:focus { border-color: var(--help-focus); outline: 2px solid var(--help-focus); outline-offset: 2px; box-shadow: none; }
    body.aphro-help-page .aphro-help-article .j17track-track-form input[type="submit"] {
        width: auto;
        min-width: 154px;
        min-height: 48px;
        justify-self: start;
        margin: 0;
        padding: 12px 25px;
        border: 1px solid var(--help-accent);
        border-radius: 8px;
        background: var(--help-accent);
        color: #ffffff;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        box-shadow: none;
        cursor: pointer;
        transform: none;
    }
    html.aphro-dark body.aphro-help-page .aphro-help-article .j17track-track-form input[type="submit"] { color: #24161e; }
    body.aphro-help-page .aphro-help-article .j17track-track-form input[type="submit"]:hover { opacity: .9; transform: none; }
    body.aphro-help-page .aphro-help-article .j17track-track-form input[type="submit"]:disabled { cursor: wait; opacity: .65; }

    @media (max-width: 1100px) {
        body.aphro-help-page .aphro-help-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        body.aphro-help-page .aphro-help-nav a { gap: 9px; padding: 13px 11px; font-size: 12px; }
    }

    @media (max-width: 1000px) {
        body.aphro-help-page .aphro-help-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 36px; }
    }

    @media (max-width: 760px) {
        body.aphro-help-page .aphro-help { width: calc(100% - 40px); padding: 22px 0 56px; }
        body.aphro-help-page .aphro-help-breadcrumb { margin-bottom: 28px; font-size: 12px; }
        body.aphro-help-page .aphro-help-hero { margin-bottom: 26px; }
        body.aphro-help-page .aphro-help-hero h1 { font-size: clamp(32px, 8.7vw, 44px); line-height: 1.16; }
        body.aphro-help-page .aphro-help-intro { margin-top: 14px; font-size: 15px; }
        body.aphro-help-page .aphro-help-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 25px; padding-bottom: 24px; }
        body.aphro-help-page .aphro-help-nav a { min-height: 62px; gap: 10px; padding: 12px; font-size: 12px; border-radius: 10px; }
        body.aphro-help-page .aphro-help-nav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
        body.aphro-help-page .aphro-help-nav svg { width: 22px; height: 22px; flex-basis: 22px; }
        body.aphro-help-page .aphro-help-layout { display: block; }
        body.aphro-help-page .aphro-help-sidebar { display: none; }
        body.aphro-help-page .aphro-help-mobile-toc { display: block; margin: 0 0 26px; padding: 14px 17px; border: 1px solid var(--help-border); border-radius: 10px; background: var(--help-surface); }
        body.aphro-help-page .aphro-help-mobile-toc summary { color: var(--help-text); font-size: 14px; font-weight: 600; line-height: 1.7; cursor: pointer; }
        body.aphro-help-page .aphro-help-mobile-toc .aphro-help-toc { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--help-border); }
        body.aphro-help-page .aphro-help-mobile-toc .aphro-help-toc a { min-height: 44px; display: flex; align-items: center; padding: 8px 0; }
        body.aphro-help-page .aphro-help-article.entry-content { max-width: none; font-size: 16px; line-height: 1.75; }
        body.aphro-help-page .aphro-help-article :is(h2, h3, h4, [id]) { scroll-margin-top: calc(var(--aphro-help-header-height, 100px) + 18px); }
        body.aphro-help-page .aphro-help-article h2 { margin-top: 31px; font-size: 21px; }
        body.aphro-help-page .aphro-help-article h3 { font-size: 18px; }
        body.aphro-help-page .aphro-help-summary { margin-bottom: 26px; padding: 19px; }
        body.aphro-help-page .aphro-help-summary p { font-size: 14px; }
        body.aphro-help-page .aphro-help-faq > summary { padding-right: 34px; font-size: 15px; }
        body.aphro-help-page .aphro-help-faq > summary::after { right: 3px; }
        body.aphro-help-page .aphro-help-faq-answer { padding-right: 0; }
        body.aphro-help-page .aphro-help-article :is(th, td) { padding: 10px; font-size: 13px; }
        body.aphro-help-page .aphro-help-article .j17track-track-form { padding: 20px; gap: 20px; }
        body.aphro-help-page .aphro-help-article .j17track-track-form-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
        body.aphro-help-page .aphro-help-article .j17track-track-form input[type="submit"] { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
        body.aphro-help-page .aphro-help-nav a { transition: none; }
    }
}

@media print {
    body.aphro-help-page { background: #fff !important; color: #000 !important; }
    body.aphro-help-page .aphro-help { width: 100%; max-width: none; margin: 0; padding: 0; }
    body.aphro-help-page :is(.aphro-help-breadcrumb, .aphro-help-nav, .aphro-help-sidebar, .aphro-help-mobile-toc, .aphro-help-related, .j17track-track-form) { display: none !important; }
    body.aphro-help-page .aphro-help-layout { display: block; }
    body.aphro-help-page .aphro-help-hero { margin-bottom: 24px; }
    body.aphro-help-page .aphro-help-hero h1 { font-size: 28pt; line-height: 1.2; }
    body.aphro-help-page .aphro-help-article { width: 100%; max-width: none; font-size: 11pt; line-height: 1.55; }
    body.aphro-help-page .aphro-help :is(p, li, h1, h2, h3, h4, a, th, td) { color: #000 !important; }
    body.aphro-help-page .aphro-help :is(h2, h3) { break-after: avoid; }
    body.aphro-help-page .aphro-help :is(p, li) { orphans: 3; widows: 3; }
    body.aphro-help-page .aphro-help-summary { background: #fff !important; padding: 16px; border: 1px solid #aaa; }
    body.aphro-help-page .aphro-help :is(table, th, td) { border: 1px solid #aaa; background: #fff !important; border-collapse: collapse; }
    body.aphro-help-page .aphro-help-faq { display: block !important; border-bottom: 1px solid #aaa; margin: 0 0 12pt; background: #fff !important; }
    body.aphro-help-page .aphro-help-faq > summary { display: block; margin: 0 0 6pt; color: #000 !important; font-weight: 700; list-style: none; break-after: avoid; }
    body.aphro-help-page .aphro-help-faq > summary::after,
    body.aphro-help-page .aphro-help-faq > summary::-webkit-details-marker { display: none; }
    body.aphro-help-page .aphro-help-faq > summary::marker { content: ''; }
    /* The disclosure content is normally hidden in a UA shadow slot. */
    body.aphro-help-page .aphro-help-faq::details-content { display: block !important; content-visibility: visible !important; height: auto !important; overflow: visible !important; }
    body.aphro-help-page .aphro-help-faq > .aphro-help-faq-answer { display: block !important; content-visibility: visible !important; height: auto !important; padding: 0 0 8pt; }
}
