/*
 * 一枝红杏 2026 (yzhx2026) - brand layer for Lagom 2, style "yzhx2026".
 * Loaded by includes/hooks/yzhx_style_assets.php (ClientAreaHeadOutput, only while this style is active or
 * ?rsstyle-previewed) right after includes/head.tpl, i.e. after theme.css (+ site.css) and custom.css, so it wins
 * over the stock CSS and over anything the Style Manager injects. The hook links yzhx-fonts.css first, then this
 * file, each with ?v=<md5 of the file content>, so every edit gets a new URL (no CDN purge needed).
 * Colours/radii/fonts that Lagom exposes as variables live in
 * assets/css/vars/** (generated by tools/yzhx/build_style.py); this file only holds what variables cannot
 * express. Everything is scoped to body.lagom-yzhx (bodyClass from style.php) so switching the style back to
 * "Default" in RS Themes removes it completely. Dark mode is not styled (keep the mode switcher disabled).
 * Design basis: /workspace/yzhx-home-redesign/mockup.html (approved), PLAN section 2.3; loading: round 3 PLAN.
 */

/* 1. Fonts (self-hosted yzhx-fonts.css, generated by tools/yzhx/build_fonts.py, linked by the hook) + variable guard */
:root {
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --yz-head: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", serif;
    --yz-label: "Inter", var(--font-family-base);
    --yz-primary: #b7102a;
    --yz-primary-2: #db313f;
    --yz-primary-dark: #960e23;
    --yz-surface: #fcf9f8;
    --yz-surface-low: #f6f3f2;
    --yz-ink: #1c1b1b;
    --yz-ink-2: #5b403f;
    --yz-muted: #736c6f;
    --yz-line: #ece6e5;
    --yz-line-2: #e4bebc;
    --yz-save: #2c694e;
    --yz-save-bg: #e8f2ec;
}

body.lagom-yzhx {
    background: var(--body-bg);
    -webkit-font-smoothing: antialiased;
}

/* 2. Headings: serif (h4-h6 stay sans for tables/forms) */
body.lagom-yzhx h1,
body.lagom-yzhx h2,
body.lagom-yzhx h3,
body.lagom-yzhx .h1,
body.lagom-yzhx .h2,
body.lagom-yzhx .h3,
body.lagom-yzhx .main-header-title,
body.lagom-yzhx .section-title,
body.lagom-yzhx .panel-title,
body.lagom-yzhx .package-title,
body.lagom-yzhx .banner-title,
body.lagom-yzhx .login-title,
body.lagom-yzhx .modal-title,
body.lagom-yzhx .tile-title,
body.lagom-yzhx .app-nav-menu .menu-primary > li > a {
    font-family: var(--yz-head);
    letter-spacing: .02em;
}

/* 3. Header: warm translucent bar, serif primary links, Login as ghost pill */
body.lagom-yzhx .app-nav {
    box-shadow: none;
}
body.lagom-yzhx .app-nav .app-nav-header,
body.lagom-yzhx .app-nav .app-nav-menu {
    background: var(--yz-surface);
}
@media (min-width: 992px) {
    /* backdrop-filter only on desktop: on mobile it would become the containing block of the off-canvas menu */
    body.lagom-yzhx .app-nav .app-nav-header,
    body.lagom-yzhx .app-nav .app-nav-menu {
        background: rgba(252, 249, 248, .85);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
    }
}
@media (min-width: 992px) {
    /* Both bars get their own stacking context from backdrop-filter above; without an explicit order the menu bar
       (later in the DOM) paints over the header bar and traps its dropdowns (currency, account, notifications)
       underneath. Lift the header bar above the menu bar. */
    body.lagom-yzhx .app-nav .app-nav-header {
        position: relative;
        z-index: 2;
    }
}
/* Single currency: nothing to switch to, so the switcher is removed altogether. Lagom renders one
   li.nav-item-currency in ul.top-nav for every viewport width (no separate mobile copy), so this covers desktop
   and mobile. Matches when the menu has fewer than two items, and also when no menu is rendered at all (logged-in
   clients cannot switch). Comes back as a normal dropdown by itself once a second currency exists.
   Browsers without :has() drop both rules and keep Lagom's stock one-item dropdown. */
body.lagom-yzhx li.nav-item-currency:not(:has(.dropdown-menu-item ~ .dropdown-menu-item)) {
    display: none !important;
}
/* Lagom zeroes the right padding of the DOM-last top-nav link (ul.top-nav > li:last-child > a:not(.btn)).
   The hidden currency li is still the last child, so give the item before it the same treatment; otherwise it
   sits 8px short of the container edge. :has() cannot be nested, hence the condition on the ul. */
body.lagom-yzhx ul.top-nav:not(:has(> li.nav-item-currency .dropdown-menu-item ~ .dropdown-menu-item)) > li:has(+ li.nav-item-currency:last-child) > a:not(.btn) {
    padding-right: 0;
}
/* Empty cart: Lagom renders the cart badge with class "hidden" (content 0) when the session cart is empty, so the
   basket icon is removed until something is added (the badge is server-rendered, it shows on the next page load).
   Browsers without :has() keep the stock always-visible icon. Task H. */
body.lagom-yzhx ul.top-nav > li.nav-item-cart:has(.nav-badge.hidden) {
    display: none !important;
}
body.lagom-yzhx .app-nav-menu .menu-primary > li > a {
    font-size: 15px;
    color: var(--yz-ink);
}
body.lagom-yzhx .app-nav-menu .menu-primary > li > a:hover,
body.lagom-yzhx .app-nav-menu .menu-primary > li > a:focus,
body.lagom-yzhx .app-nav-menu .menu-primary > li.active > a {
    color: var(--yz-primary);
}
body.lagom-yzhx .top-nav > li[menuitemname="Login"] > a {
    border: 1.5px solid rgba(228, 190, 188, .7);
    border-radius: 999px;
    padding: 6px 16px;
    font-family: var(--yz-label);
    font-weight: 600;
    color: var(--yz-ink);
    background: transparent;
}
body.lagom-yzhx .top-nav > li[menuitemname="Register"] > a {
    border-radius: 999px;
    padding: 6px 16px;
    font-family: var(--yz-label);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, var(--yz-primary), var(--yz-primary-2));
}

/* 4. Buttons: pills (radius via vars), label font, red gradient primary */
body.lagom-yzhx .btn {
    font-family: var(--yz-label);
    font-weight: 600;
}
body.lagom-yzhx .btn.btn-primary:not(.btn-primary-outline):not(.btn-primary-faded) {
    background: linear-gradient(90deg, var(--yz-primary), var(--yz-primary-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(183, 16, 42, .45);
    transition: transform .15s, box-shadow .15s, background .15s;
}
body.lagom-yzhx .btn.btn-primary:not(.btn-primary-outline):not(.btn-primary-faded):hover,
body.lagom-yzhx .btn.btn-primary:not(.btn-primary-outline):not(.btn-primary-faded):focus {
    background: linear-gradient(90deg, var(--yz-primary-dark), var(--yz-primary));
    border-color: transparent;
    color: #fff;
}
body.lagom-yzhx .btn.btn-primary:not(.btn-primary-outline):not(.btn-primary-faded):not(.disabled):not([disabled]):hover {
    transform: translateY(-1px);
}
body.lagom-yzhx .btn.btn-default,
body.lagom-yzhx .btn.btn-light-outline,
body.lagom-yzhx .btn.btn-primary-outline {
    border: 1.5px solid var(--yz-line-2);
    background: transparent;
    color: var(--yz-ink);
}
body.lagom-yzhx .btn.btn-primary-outline {
    color: var(--yz-primary);
}
body.lagom-yzhx .btn.btn-default:hover,
body.lagom-yzhx .btn.btn-light-outline:hover,
body.lagom-yzhx .btn.btn-primary-outline:hover {
    border-color: var(--yz-primary);
    background: transparent;
    color: var(--yz-primary);
}
body.lagom-yzhx .btn.btn-primary-faded {
    background: #fdf1f2;
    border-color: transparent;
    color: var(--yz-primary);
}
body.lagom-yzhx .btn.btn-primary-faded:hover {
    background: #fbe4e6;
    color: var(--yz-primary-dark);
}

/* 5. Blocks: hairline borders, featured package, green pills */
body.lagom-yzhx .panel,
body.lagom-yzhx .package,
body.lagom-yzhx .tile,
body.lagom-yzhx .login-wrapper .login-body,
body.lagom-yzhx .list-group,
body.lagom-yzhx .table-container {
    border-color: var(--yz-line);
}
body.lagom-yzhx .package.package-featured {
    border-color: var(--yz-primary);
}
body.lagom-yzhx .label-corner.label-primary {
    background: var(--yz-primary);
    color: #fff;
}
body.lagom-yzhx .label-success,
body.lagom-yzhx .label-save,
body.lagom-yzhx .label-savings {
    border-radius: 999px;
    font-family: var(--yz-label);
}
body.lagom-yzhx .label-save,
body.lagom-yzhx .label-savings {
    background: var(--yz-save-bg);
    color: var(--yz-save);
}

/* 6. Site banners outside the homepage (MarketConnect store pages): drop Lagom's blue isometric art */
body.lagom-yzhx:not(.page-homepage) .main-banner .banner-svg,
body.lagom-yzhx:not(.page-homepage) .banner-background .banner-shape {
    display: none;
}
body.lagom-yzhx:not(.page-homepage) .main-banner {
    background: var(--gray-faded);
}

/* 7. Login page (kept clean: no hero image) */
body.lagom-yzhx .login-title {
    font-weight: 700;
}
body.lagom-yzhx .login .btn-block {
    border-radius: 999px;
}

/* 8. Cart / store */
body.lagom-yzhx .package .price .price-amount {
    font-family: var(--yz-label);
    font-weight: 800;
    letter-spacing: -.02em;
}
body.lagom-yzhx .package .price .price-cycle {
    font-family: var(--yz-label);
    color: var(--yz-muted);
}
body.lagom-yzhx .package-footer .btn {
    border-radius: 999px;
}
/* configureproduct: stock tpl prints a placeholder "-" under the cheapest cycle; hide it, keep the row height
   (round 2 PLAN §3; without :has() support the "-" simply stays) */
body.lagom-yzhx.page-order #sectionCycles .check-cycle .check-subtitle:not(:has(.label-save)) {
    visibility: hidden;
}

/* 8b. Checkout (Task A)
   (1) "your IP has been logged" notice: display only - WHMCS still stores tblorders.ipaddress.
       The .section stays in the DOM, so the Hybula Turnstile hook's insertion point
       ('#frmCheckout .section:last') does not move. Without :has() the alert is hidden and the
       empty section keeps its 48px top margin. */
body.lagom-yzhx #frmCheckout .checkout-security-msg {
    display: none;
}
body.lagom-yzhx #frmCheckout .section:has(> .section-body > .checkout-security-msg) {
    display: none;
}
/* (2) Cloudflare Turnstile wrapper injected by includes/hooks/cf_turnstile.php (not in this repo):
       <div class="text-center margin-bottom"><div class="cf-turnstile"></div><br></div>
       Collapse the whitespace only. Do NOT set display/visibility/height/overflow/opacity on the wrapper
       or on .cf-turnstile: with an Invisible widget the content is already 0px high, with a Managed
       widget the 65px checkbox must stay visible and clickable. */
body.lagom-yzhx .cf-turnstile + br {
    display: none;
}
body.lagom-yzhx .text-center.margin-bottom:has(> .cf-turnstile) {
    margin: 0;
    padding: 0;
    min-height: 0;
    line-height: 0;
}
/* (3) Checkout only: gap between the mailing-list card and the Turnstile widget, same as the
       20px between cards (8d). Margin only - still no display/visibility/height/overflow/opacity. */
body.lagom-yzhx #frmCheckout .cf-turnstile {
    margin-top: 20px;
}
/* (4) Other forms (login, register, contact, ticket): the wrapper margin is collapsed by (2), so the
       widget sat flush on the submit button. 20px below, same as checkout. Checkout keeps 0 below. */
body.lagom-yzhx .cf-turnstile {
    margin-bottom: 20px;
}
body.lagom-yzhx #frmCheckout .cf-turnstile {
    margin-bottom: 0;
}

/* 8c. Store (Task E 杏笺)
   includes/hooks/yzhx_store_plans.php injects #yz-store (breadcrumb, title, plans block, compare table, "includes")
   at the top of .main-content on the products page of the 探春 / 寻梅 product groups and then adds body.yz-store-on.
   Only then are Lagom's own parts hidden; without the class (JS off, hook not matching, other groups) the stock
   store page shows. !important: .categories-collapsed carries Bootstrap visible-* classes (display:block!important). */
body.lagom-yzhx.page-products.yz-store-on .main-header,
body.lagom-yzhx.page-products.yz-store-on .main-grid > .main-sidebar,
body.lagom-yzhx.page-products.yz-store-on .main-content .categories-collapsed,
body.lagom-yzhx.page-products.yz-store-on #products {
    display: none !important;
}
body.lagom-yzhx.page-products.yz-store-on .main-grid > .main-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}
body.lagom-yzhx.page-products.yz-store-on .main-body {
    padding-top: 24px;
}

/* 8d. Checkout (Task E 杏笺): layout and look only, no template override, no text change.
   Rules: 1040px two-column grid (content + 360px summary), sections as white cards, cart table without the
   heading / quantity / edit / footer actions (the per-item delete icon stays), "additional notes" hidden (field still
   submitted empty), e-mail line of the logged-in account card hidden, mailing-list switch kept but smaller,
   decorative progress line under the page title. Amounts stay as WHMCS prints them.
   Task A (8b) stays as is: nothing here sets display / visibility / height / overflow / opacity on .cf-turnstile or
   its wrapper, and the IP notice section remains the last .section of #frmCheckout (hidden, still in the DOM). */
body.lagom-yzhx.page-viewcart .main-content > .section,
body.lagom-yzhx.page-viewcart #frmCheckout > .section {
    margin-top: 20px;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--yz-line);
    border-radius: 16px;
}
body.lagom-yzhx.page-viewcart .main-content > .checkout-error-feedback + .section {
    margin-top: 0;
}
body.lagom-yzhx.page-viewcart .main-content > .section > .section-header,
body.lagom-yzhx.page-viewcart #frmCheckout > .section > .section-header {
    margin-bottom: 16px;
}
body.lagom-yzhx.page-viewcart #frmCheckout > .section > .section-header .section-title {
    font-size: 20px;
    font-weight: 700;
}
/* section numbers: 1 billing / account, 2 payment */
body.lagom-yzhx.page-viewcart #frmCheckout > div.section:first-of-type > .section-header .section-title:before,
body.lagom-yzhx.page-viewcart #frmCheckout > #paymentGatewaysDetails > .section-header .section-title:before {
    content: "1";
    margin-right: 10px;
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 600;
    color: var(--yz-muted);
}
body.lagom-yzhx.page-viewcart #frmCheckout > #paymentGatewaysDetails > .section-header .section-title:before {
    content: "2";
}
body.lagom-yzhx.page-viewcart #paymentGatewaysContainer > .section {
    margin-top: 0;
}
body.lagom-yzhx.page-viewcart #frmCheckout .panel-check {
    border-color: var(--yz-line);
    border-radius: 12px;
}
body.lagom-yzhx.page-viewcart #frmCheckout .panel-check.checked {
    border-color: var(--yz-primary);
    box-shadow: 0 0 0 1px var(--yz-primary);
}
/* Lagom stacks .panel-check with no gap (designed as one joined list). With 12px radius each one is a
   separate card, so the selected card's 2px red edge ran into its neighbours. Give them a 10px gap. */
body.lagom-yzhx.page-viewcart #frmCheckout .panel-check + .panel-check {
    margin-top: 10px;
}
/* cart card: the section is the card, the Lagom panel inside goes flat */
body.lagom-yzhx.page-viewcart .main-content > .section:has(.panel-cart) {
    padding: 8px 4px;
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart {
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart > .cart-heading,
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty.cart-item-qty-empty,
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty.prod-qty-empty,
body.lagom-yzhx.page-viewcart .main-content .panel-cart .panel-footer,
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-actions a[href*="a=confproduct"] {
    display: none !important;
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-title-main {
    font-family: var(--yz-head);
    font-weight: 700;
}
/* quantity: Lagom +/- control, label from data-content (existing lang string) */
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty:not(.cart-item-qty-empty):not(.prod-qty-empty) {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty:not(.cart-item-qty-empty):not(.prod-qty-empty)::before {
    content: attr(data-content);
    font-size: 13px;
    color: var(--yz-muted);
    white-space: nowrap;
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number {
    width: 76px;
    flex: 0 0 76px;
    height: 36px;
    border: 1px solid var(--yz-line);
    border-radius: 10px;
    background: #fff;
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number:hover,
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number:has(input:focus) {
    border-color: var(--yz-primary);
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number input {
    color: var(--yz-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number-actions {
    flex: 0 0 28px;
    width: 28px;
    border-left-color: var(--yz-line);
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number-actions .plus,
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number-actions .minus {
    touch-action: manipulation;
}
/* quantity auto-update in flight (class set by yzhx-cart-qty.js) */
body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number.yz-qty-busy {
    pointer-events: none;
    opacity: .6;
}
/* update button (Lagom shows it after +/-): must be obvious, the change only applies when it is clicked */
body.lagom-yzhx.page-viewcart .main-content .panel-cart [data-input-number-update] {
    background: var(--yz-primary);
    color: #fff;
    border-radius: 10px;
    border-color: transparent;
}
body.lagom-yzhx.page-viewcart .main-content .panel-cart [data-input-number-update]:hover {
    background: var(--yz-primary-dark);
}
@media (max-width: 767.98px) {
    body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty:not(.cart-item-qty-empty):not(.prod-qty-empty) {
        justify-content: space-between;
        width: 100%;
    }
    body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number {
        width: 128px;
        flex-basis: 128px;
        height: 42px;
    }
    /* +/- side by side (input, -, +): each button ~40x40 instead of two ~20px halves */
    body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number-actions {
        display: flex;
        flex-direction: row-reverse;
        flex: 0 0 80px;
        width: 80px;
    }
    body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number-actions .plus,
    body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number-actions .minus {
        width: 40px;
        height: 100%;
    }
    body.lagom-yzhx.page-viewcart .main-content .panel-cart .cart-item-qty .input-number-actions .minus {
        border-right: 1px solid var(--yz-line);
    }
}
/* promo code: kept expanded, but as a quiet one-liner rather than a big section */
body.lagom-yzhx.page-viewcart .main-content > .section:has(#inputPromotionCode) {
    padding-top: 18px;
    padding-bottom: 18px;
}
body.lagom-yzhx.page-viewcart .main-content > .section:has(#inputPromotionCode) > .section-header {
    margin-bottom: 10px;
}
body.lagom-yzhx.page-viewcart .main-content > .section:has(#inputPromotionCode) .section-title {
    font-family: var(--font-family-base);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--yz-ink-2);
}
/* Task I: promo code collapsed to one small text link (yzhx-promo.js + includes/hooks/yzhx_promo_collapse.php).
   JS adds button.yz-promo-link (text = hook label or the existing h2) before [data-promotion-box-add] and an x
   (button.yz-promo-x, lm-close) inside it. Marked sections drop the card and the h2 header in both states, so the
   input row opens where the link was. Alerts and the applied-code panel stay under Lagom's own .hidden.
   No JS / JS failed = no marker = the expanded rules above. */
html.yz-promo-pre body.lagom-yzhx.page-viewcart [data-promotion-box-add],
body.lagom-yzhx.page-viewcart .section[data-yz-promo="collapsed"] [data-promotion-box-add] {
    display: none !important;
}
body.lagom-yzhx.page-viewcart .main-content > .section[data-yz-promo]:has(#inputPromotionCode) {
    padding: 2px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.lagom-yzhx.page-viewcart .main-content > .section[data-yz-promo]:has(#inputPromotionCode) > .section-header {
    display: none;
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo] .yz-promo-link {
    display: inline-block;
    margin: 0;
    padding: 2px 0;
    background: none;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: var(--yz-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo] .yz-promo-link:hover,
body.lagom-yzhx.page-viewcart .section[data-yz-promo] .yz-promo-link:focus-visible {
    color: var(--yz-ink);
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo] .yz-promo-link:focus-visible {
    outline: 2px solid var(--yz-primary);
    outline-offset: 3px;
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo="expanded"] .yz-promo-link {
    display: none;
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo="expanded"] [data-promotion-box-add]:not(.hidden) {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo] [data-promotion-box-add] > form {
    flex: 1 1 auto;
    min-width: 0;
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo] .yz-promo-x {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 4px 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    font-size: 16px;
    line-height: 36px;
    color: var(--yz-muted);
    cursor: pointer;
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo] .yz-promo-x:hover,
body.lagom-yzhx.page-viewcart .section[data-yz-promo] .yz-promo-x:focus-visible {
    color: var(--yz-ink);
}
body.lagom-yzhx.page-viewcart .section[data-yz-promo] .yz-promo-x:focus-visible {
    outline: 2px solid var(--yz-primary);
    outline-offset: 2px;
}
html.yz-promo-pre body.lagom-yzhx.page-viewcart .main-content > .section:has(#inputPromotionCode) {
    display: none;
}
/* Task I placement: yzhx-promo.js moves the whole promo section right after the sidebar card's 立刻下单 button and
   marks it data-yz-promo-place="summary" (same place on desktop and < 992px; never into the fixed
   .order-summary-mob bar). Not moved (no JS / checks failed) = no marker = stays in .main-content, rules above. */
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] {
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] > .section-header {
    display: none;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] > .section-body {
    margin: 0;
    padding: 0;
    text-align: center;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] > .section-body > :not(.yz-promo-link) {
    text-align: left;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] [data-promotion-box-add] {
    margin: 0 !important;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] .search-group {
    margin-top: 0;
    min-width: 0;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] .search-field {
    min-width: 0;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] .alert {
    margin: 0 0 8px;
    font-size: 13px;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] .panel-promo-code {
    margin: 0;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions > .section[data-yz-promo-place="summary"] .panel-promo-code > .panel-heading {
    flex-wrap: wrap;
    gap: 8px;
}
/* additional notes: display only, the textarea is still in the form */
body.lagom-yzhx.page-viewcart #frmCheckout > .section:has(textarea[name="notes"]) {
    display: none;
}
/* mailing list opt-in: kept (consent choice), smaller */
body.lagom-yzhx.page-viewcart #frmCheckout > .section:has(.panel-switch) {
    padding-top: 16px;
    padding-bottom: 16px;
}
body.lagom-yzhx.page-viewcart #frmCheckout > .section:has(.panel-switch) > .section-header {
    margin-bottom: 8px;
}
body.lagom-yzhx.page-viewcart #frmCheckout > .section:has(.panel-switch) .section-title {
    font-family: var(--font-family-base);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}
body.lagom-yzhx.page-viewcart #frmCheckout > .section:has(.panel-switch) .section-desc {
    font-size: 13px;
    color: var(--yz-muted);
}
body.lagom-yzhx.page-viewcart #frmCheckout .panel-switch {
    margin: 0;
    box-shadow: none;
}
body.lagom-yzhx.page-viewcart #frmCheckout .panel-switch > .panel-body {
    padding-top: 10px;
    padding-bottom: 10px;
}
/* logged-in account card: no e-mail address (first address line + its <br>); name / address stay */
body.lagom-yzhx #containerExistingAccountSelect address > .address-item:first-child,
body.lagom-yzhx #containerExistingAccountSelect address > .address-item:first-child + br {
    display: none;
}
/* order summary */
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary.panel {
    background: #fff;
    border: 1px solid var(--yz-line);
    border-radius: 16px;
    box-shadow: none;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .panel-title {
    font-size: 20px;
    font-weight: 700;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .panel-footer {
    border-top: 1px solid var(--yz-line);
    background: transparent;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .price-total {
    font-weight: 600;
    color: var(--yz-ink);
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .price-amount-total {
    font-family: var(--font-family-base);
    font-weight: 700;
    color: var(--yz-ink);
    font-variant-numeric: tabular-nums;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions .btn-checkout {
    width: 100%;
    height: 48px;
    border-radius: 10px;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions .btn-checkout.btn-primary {
    background: var(--yz-primary);
    box-shadow: none;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions .btn-checkout.btn-primary:hover,
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions .btn-checkout.btn-primary:focus {
    background: var(--yz-primary-dark);
}
/* checkout buttons (summary card + mobile bar) while locked / disabled: visibly inactive */
body.lagom-yzhx.page-viewcart .btn-checkout[disabled],
body.lagom-yzhx.page-viewcart .btn-checkout.disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions .btn-checkout.btn-primary[disabled],
body.lagom-yzhx.page-viewcart .main-sidebar-lg #orderSummary .summary-actions .btn-checkout.btn-primary.disabled {
    background: var(--yz-primary);
}
@media (min-width: 992px) {
    body.lagom-yzhx.page-viewcart .main-body .main-grid {
        max-width: 1040px;
        margin-left: auto;
        margin-right: auto;
    }
    body.lagom-yzhx.page-viewcart .main-grid > .main-content {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }
    body.lagom-yzhx.page-viewcart .main-grid > .main-sidebar-lg {
        flex: 0 0 360px;
        width: 360px;
        min-width: 360px;
        margin-left: 40px;
        margin-right: 0;
    }
    body.lagom-yzhx.page-viewcart .main-header .container > * {
        max-width: 1040px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* < 992px: Lagom stacks the grid; keep Lagom's own order (summary card with its 立刻下单 button at the bottom,
   fixed .order-summary-mob bar shown while the card is off screen). Moving the card to the top hid both. */
@media (max-width: 991.98px) {
    body.lagom-yzhx.page-viewcart .main-grid > .main-sidebar-lg {
        width: 100%;
        min-width: 0;
        margin: 16px 0 0;
    }
    body.lagom-yzhx.page-viewcart .main-sidebar-lg .sidebar-sticky {
        position: static;
    }
    body.lagom-yzhx.page-viewcart .main-content > .section,
    body.lagom-yzhx.page-viewcart #frmCheckout > .section {
        padding: 20px 18px;
    }
    body.lagom-yzhx.page-viewcart .main-content > .section:has(.panel-cart) {
        padding: 4px 0;
    }
}

/* 9. Footer bottom bar (Lagom .main-footer). With the brand block (.yz-footer, core/layouts/footer/default/
      footer.tpl) present, the WHMCS copyright line is replaced by the brand line - never hidden otherwise. */
body.lagom-yzhx .main-footer {
    background: var(--yz-surface);
    border-top: 0;
}
body.lagom-yzhx .main-footer .footer-bottom {
    background: var(--yz-surface);
    font-size: 13px;
    color: var(--yz-muted);
}
body.lagom-yzhx .yz-footer ~ .main-footer .footer-copyright {
    display: none;
}
body.lagom-yzhx .yz-footer ~ .main-footer .footer-bottom .container {
    justify-content: center;
}

/* 10. Brand footer block (markup: core/layouts/footer/default/footer.tpl, rendered only while this style is active;
       rules from mockup footer{...}) */
body.lagom-yzhx .yz-footer {
    margin-top: 96px;
    border-top: 1px solid rgba(28, 27, 27, .05);
    background: var(--yz-surface);
}
body.lagom-yzhx .yz-footer > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-top: 44px;
    padding-bottom: 44px;
}
body.lagom-yzhx .yz-footer > .container:before,
body.lagom-yzhx .yz-footer > .container:after {
    /* Bootstrap clearfix pseudo-elements would become flex items and break space-between */
    display: none;
}
body.lagom-yzhx .yz-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.lagom-yzhx .yz-footer-brand img {
    width: 28px;
    height: 28px;
}
body.lagom-yzhx .yz-footer-brand b {
    font-family: var(--yz-head);
    color: var(--yz-primary);
    font-size: 20px;
    letter-spacing: .1em;
}
body.lagom-yzhx .yz-footer p {
    font-size: 13.5px;
    color: var(--yz-ink-2);
    margin: 10px 0 0;
}
body.lagom-yzhx .yz-footer small {
    display: block;
    font-family: var(--yz-label);
    font-size: 12px;
    opacity: .45;
    margin-top: 4px;
}
body.lagom-yzhx .yz-footer nav {
    display: flex;
    gap: 36px;
    align-items: center;
    font-family: var(--yz-label);
    font-size: 14px;
}
body.lagom-yzhx .yz-footer nav a {
    color: rgba(28, 27, 27, .6);
}
body.lagom-yzhx .yz-footer nav a:hover {
    color: var(--yz-primary);
    text-decoration: none;
}

/* 11. Anchor offset for the sticky nav (homepage sections) */
#plans,
#faq {
    scroll-margin-top: 96px;
}

/* Mobile */
@media (max-width: 767px) {
    body.lagom-yzhx .top-nav > li[menuitemname="Login"] > a,
    body.lagom-yzhx .top-nav > li[menuitemname="Register"] > a {
        padding: 4px 12px;
        font-size: 13px;
    }
    body.lagom-yzhx .yz-footer {
        margin-top: 60px;
    }
    body.lagom-yzhx .yz-footer > .container {
        flex-direction: column;
        text-align: center;
    }
    body.lagom-yzhx .yz-footer-brand {
        justify-content: center;
    }
    body.lagom-yzhx .yz-footer nav {
        gap: 24px;
    }
}