/*
 * 一枝红杏「杏笺」套餐区块 - shared by the homepage (core/pages/homepage/yzhx2026/homepage.tpl) and the store page
 * (injected by includes/hooks/yzhx_store_plans.php, only under the yzhx2026 style).
 * Markup: includes/hooks/yzhx_homepage_plans.php (yzhx_plans_render).
 * Design: yzhx-home-redesign/proposals/a-xingjian/style.css (prototype), plan task-e/PLAN_E.md §2.5.
 * Only .yz-* classes; no Lagom classes are styled here (checkout / store chrome lives in yzhx.css 8c / 8d).
 * Cards: DOM order 1 / 3 / 2 years; 3 years is taller (38px band) with the only solid red button.
 * <= 640px: three compact rows, 3 years first (order:-1); only that first card (.yz-cc-best) keeps its own
 * feature list (wrapped below its row), the other two hide theirs.
 */
.yz-home,
.yz-store {
    --yz-x-bg: #fcf9f8;
    --yz-x-card: #fff;
    --yz-x-line: #ece6e4;
    --yz-x-line-hover: #d8ccc9;
    --yz-x-soft: #f5efed;
    --yz-x-brand: #b7102a;
    --yz-x-brand-press: #960e23;
    --yz-x-brand-tint: #fbeef0;
    --yz-x-ink: #1c1b1b;
    --yz-x-ink-2: #5b403f;
    --yz-x-muted: #8a7472;
    --yz-x-ok: #2c694e;
    --yz-x-ok-bg: #e7f1ec;
    --yz-x-r-card: 16px;
    --yz-x-r-btn: 10px;
    --yz-x-serif: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", serif;
    --yz-x-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--yz-x-ink);
    font-family: var(--yz-x-sans);
    line-height: 1.6;
}
.yz-home *, .yz-home *:before, .yz-home *:after,
.yz-store *, .yz-store *:before, .yz-store *:after {
    box-sizing: border-box;
}
.yz-home [hidden],
.yz-store [hidden] {
    display: none !important;
}
.yz-plans a, .yz-plans a:hover, .yz-plans a:focus,
.yz-store a, .yz-store a:hover, .yz-store a:focus {
    text-decoration: none;
}
/* resets at element specificity (0,0,1): they override Bootstrap's heading / p / ul margins (this file loads after
   theme.css) but lose to every .yz-* component rule below */
:where(.yz-plans, .yz-store) h1,
:where(.yz-plans, .yz-store) h2,
:where(.yz-plans, .yz-store) h3,
:where(.yz-plans, .yz-store) p,
:where(.yz-plans, .yz-store) ul {
    margin: 0;
    padding: 0;
}
:where(.yz-plans) ul {
    list-style: none;
}
.yz-ck {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--yz-x-ok);
}

/* ---------- section scaffolding (shared) ---------- */
.yz-section {
    padding-top: 56px;
}
.yz-section-title {
    font-family: var(--yz-x-serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    text-align: center;
    color: var(--yz-x-ink);
    letter-spacing: .02em;
}

/* ---------- plans: tier switch ---------- */
.yz-plans {
    padding: 24px 0 8px;
}
.yz-plans-controls {
    display: flex;
    justify-content: center;
}
.yz-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--yz-x-soft);
    border: 1px solid var(--yz-x-line);
    border-radius: 12px;
}
.yz-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 132px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: var(--yz-x-serif);
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    color: var(--yz-x-ink-2);
    cursor: pointer;
    box-shadow: none;
}
.yz-seg button.is-active,
.yz-seg button[aria-pressed="true"] {
    background: #fff;
    color: var(--yz-x-ink);
    box-shadow: 0 1px 2px rgba(28, 27, 27, .08), 0 0 0 1px var(--yz-x-line);
}
.yz-seg button:focus-visible {
    outline: 2px solid var(--yz-x-brand);
    outline-offset: 2px;
}
.yz-tag-fast {
    font-family: var(--yz-x-sans);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--yz-x-ok);
    background: var(--yz-x-ok-bg);
    padding: 2px 6px;
    border-radius: 4px;
}
.yz-tier-line {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 30px;
}
.yz-tag-line {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--yz-x-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
}
.yz-tagline {
    font-size: 14px;
    color: var(--yz-x-ink-2);
    text-align: center;
}

/* ---------- plans: cycle cards (DOM 1 / 3 / 2 years) ---------- */
.yz-cycles {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: center;
}
.yz-cc {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--yz-x-card);
    border: 1px solid var(--yz-x-line);
    border-radius: var(--yz-x-r-card);
    overflow: hidden;
    color: var(--yz-x-ink);
    transition: border-color .15s, box-shadow .15s;
}
a.yz-cc:hover,
a.yz-cc:focus {
    color: var(--yz-x-ink);
    border-color: var(--yz-x-line-hover);
    box-shadow: 0 6px 20px rgba(28, 27, 27, .06);
}
a.yz-cc:focus-visible {
    outline: 2px solid var(--yz-x-brand);
    outline-offset: 2px;
}
.yz-cc-best,
a.yz-cc-best:hover,
a.yz-cc-best:focus {
    border-color: var(--yz-x-brand);
    box-shadow: 0 10px 30px rgba(183, 16, 42, .08);
}
.yz-cc-band {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yz-x-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3em;
}
.yz-cc-body {
    padding: 28px 28px 30px;
    display: flex;
    flex-direction: column;
}
.yz-cc-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.yz-cc-cycle {
    font-family: var(--yz-x-serif);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
}
.yz-cc-badge {
    display: none;
}
.yz-cc-name {
    font-size: 13px;
    color: var(--yz-x-muted);
}
.yz-cc-price {
    display: block;
    margin-top: 22px;
    font-family: var(--yz-x-sans);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.yz-cc-price.yz-tbd {
    color: var(--yz-x-muted);
    font-weight: 600;
}
.yz-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    height: 46px;
    width: 100%;
    padding: 0 18px;
    border: 1px solid var(--yz-x-ink);
    border-radius: var(--yz-x-r-btn);
    background: #fff;
    color: var(--yz-x-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
a.yz-cc:hover .yz-btn {
    background: var(--yz-x-soft);
}
.yz-btn-primary,
a.yz-cc:hover .yz-btn-primary {
    background: var(--yz-x-brand);
    border-color: var(--yz-x-brand);
    color: #fff;
}
a.yz-cc:hover .yz-btn-primary,
a.yz-cc:active .yz-btn-primary {
    background: var(--yz-x-brand-press);
    border-color: var(--yz-x-brand-press);
}
.yz-btn.is-disabled {
    opacity: .45;
}
.yz-cc-off {
    cursor: not-allowed;
}
.yz-cc-arrow {
    display: none;
}
.yz-cc hr {
    border: 0;
    border-top: 1px solid var(--yz-x-line);
    margin: 24px 0 18px;
    height: 0;
}
.yz-feat {
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: var(--yz-x-ink);
}
.yz-feat li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}
.yz-feat li .yz-ck {
    margin-top: 2px;
}
.yz-feat li.yz-key {
    font-weight: 600;
}

/* ---------- store page head (injected block) ---------- */
.yz-store {
    max-width: 1040px;
    margin: 0 auto;
    padding-bottom: 8px;
}
.yz-page-head {
    padding: 24px 0 8px;
}
.yz-page-head h1 {
    font-family: var(--yz-x-serif);
    font-weight: 900;
    font-size: 40px;
    line-height: 1.25;
    color: var(--yz-x-ink);
    letter-spacing: .02em;
}
.yz-page-head p {
    margin-top: 10px;
    color: var(--yz-x-ink-2);
    font-size: 16px;
}

/* ---------- middle widths ---------- */
@media (max-width: 900px) {
    .yz-cc-body {
        padding: 24px 20px 26px;
    }
    .yz-cc-price {
        font-size: 30px;
    }
}

/* ---------- mobile (designed at 390) ---------- */
@media (max-width: 640px) {
    .yz-plans {
        padding-top: 20px;
    }
    .yz-plans-controls .yz-seg {
        display: flex;
        width: 100%;
    }
    .yz-seg button {
        flex: 1;
        min-width: 0;
        padding: 0 10px;
    }
    .yz-cycles {
        margin-top: 22px;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .yz-cc-best {
        order: -1;
        border-width: 1.5px;
    }
    .yz-cc-best,
    a.yz-cc-best:hover,
    a.yz-cc-best:focus {
        box-shadow: none;
    }
    .yz-cc-band,
    .yz-btn,
    .yz-cc hr,
    .yz-feat {
        display: none;
    }
    .yz-cc-body {
        padding: 16px 16px 16px 18px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .yz-cc-head {
        flex: 1;
        min-width: 0;
        gap: 2px;
    }
    .yz-cc-cycle {
        font-size: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .yz-cc-badge {
        display: inline-block;
        font-family: var(--yz-x-sans);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.5;
        color: #fff;
        background: var(--yz-x-brand);
        padding: 1px 7px;
        border-radius: 5px;
        letter-spacing: .05em;
    }
    .yz-cc-price {
        margin-top: 0;
        font-size: 20px;
    }
    .yz-cc-arrow {
        display: block;
        flex: none;
        width: 18px;
        height: 18px;
        color: var(--yz-x-muted);
    }
    .yz-cc-best .yz-cc-arrow {
        color: var(--yz-x-brand);
    }
    .yz-cc-off .yz-cc-arrow {
        visibility: hidden;
    }
    /* the first row (3 years, order:-1) keeps its own feature list, wrapped below the row; the others stay hidden */
    .yz-cc-best .yz-cc-body {
        flex-wrap: wrap;
    }
    .yz-cc-best hr {
        display: block;
        flex: 0 0 100%;
        margin: 2px 0 0;
    }
    .yz-cc-best .yz-feat {
        display: grid;
        flex: 0 0 100%;
        gap: 8px;
        font-size: 13px;
    }

    .yz-section {
        padding-top: 40px;
    }
    .yz-section-title {
        font-size: 22px;
    }

    .yz-page-head {
        padding-top: 8px;
        text-align: center;
    }
    .yz-page-head h1 {
        font-size: 30px;
    }
    .yz-page-head p {
        font-size: 14px;
    }
}