:root {
    --yy-ink: #171916;
    --yy-paper: #f4f4ef;
    --yy-white: #ffffff;
    --yy-line: #d9dbd1;
    --yy-muted: #686d65;
    --yy-lime: #d9ff57;
    --yy-coral: #ff6b4a;
    --yy-teal: #1b8f88;
    --yy-lilac: #e9e8ff;
    --yy-danger: #c83d34;
    --yy-shadow: 0 16px 40px rgba(23, 25, 22, 0.08);
}

* {
    box-sizing: border-box;
    letter-spacing: 0;
}

html.theme-youyumao-html {
    min-height: 100%;
    background: var(--yy-paper);
}

body.theme-youyumao {
    min-height: 100vh;
    margin: 0;
    color: var(--yy-ink);
    background: var(--yy-paper);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.theme-youyumao a {
    color: inherit;
    text-decoration: none;
}

.theme-youyumao a:hover {
    color: inherit;
    text-decoration: none;
}

.theme-youyumao button,
.theme-youyumao input,
.theme-youyumao textarea,
.theme-youyumao select {
    font: inherit;
}

.theme-youyumao .container {
    max-width: 1240px;
}

.store-header {
    z-index: 1030;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--yy-ink);
}

.store-header .navbar {
    min-height: 76px;
    padding: 8px 0;
}

.yy-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 230px;
    margin-right: 32px;
    padding: 0;
    color: var(--yy-white) !important;
}

.yy-brand-mark {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid var(--yy-lime);
    border-radius: 4px;
    color: var(--yy-ink);
    background: var(--yy-lime);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.yy-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.yy-brand-copy strong {
    font-size: 18px;
    font-weight: 900;
}

.yy-brand-copy small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
}

.yy-main-nav {
    gap: 6px;
}

.yy-main-nav .nav-link {
    position: relative;
    padding: 10px 14px !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 14px;
    font-weight: 700;
}

.yy-main-nav .nav-link::after {
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    height: 2px;
    content: "";
    background: transparent;
}

.yy-main-nav .nav-link:hover,
.yy-main-nav .nav-link.active {
    color: var(--yy-white) !important;
}

.yy-main-nav .nav-link.active::after {
    background: var(--yy-lime);
}

.yy-account-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.yy-login-link,
.yy-account-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 14px;
    font-weight: 700;
}

.yy-account-link.active,
.yy-account-link:hover,
.yy-login-link:hover {
    color: var(--yy-lime) !important;
}

.yy-register-button {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--yy-lime);
    border-radius: 4px;
    color: var(--yy-ink) !important;
    background: var(--yy-lime);
    font-size: 14px;
    font-weight: 800;
}

.yy-register-button:hover {
    border-color: var(--yy-white);
    background: var(--yy-white);
}

.yy-icon-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
}

.yy-icon-button:hover {
    border-color: var(--yy-coral);
    color: var(--yy-coral);
}

.yy-menu-toggle {
    width: 44px;
    height: 44px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px;
    background: var(--yy-white);
}

.yy-menu-toggle i {
    color: var(--yy-ink);
    font-size: 19px;
}

.yy-notice {
    border-bottom: 1px solid #e6c83d;
    color: #292513;
    background: #fff2a8;
}

.yy-notice .container {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 13px;
}

.yy-notice p {
    margin: 0;
}

.yy-flash-wrap {
    position: relative;
    z-index: 5;
    padding-top: 16px;
}

.yy-flash {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: 4px;
    font-weight: 700;
}

.yy-flash.is-success {
    border-color: #7bb84a;
    color: #244319;
    background: #ecfbdc;
}

.yy-flash.is-error {
    border-color: #da8b84;
    color: #6b1d17;
    background: #fff0ed;
}

.yy-store-intro {
    border-bottom: 1px solid var(--yy-line);
    background: var(--yy-white);
}

.yy-intro-grid {
    display: grid;
    min-height: 278px;
    grid-template-columns: minmax(0, 1.6fr) minmax(330px, 0.8fr);
    align-items: stretch;
}

.yy-intro-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 50px 48px 48px 0;
    border-right: 1px solid var(--yy-line);
}

.yy-kicker,
.yy-section-index {
    margin: 0 0 12px;
    color: var(--yy-teal);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.yy-intro-copy h1 {
    max-width: 760px;
    margin: 0;
    color: var(--yy-ink);
    font-size: 46px;
    font-weight: 900;
    line-height: 1.16;
}

.yy-intro-copy h1 span {
    padding: 0 5px 2px;
    background: var(--yy-lime);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.yy-intro-lead {
    max-width: 680px;
    margin: 20px 0 0;
    color: var(--yy-muted);
    font-size: 16px;
}

.yy-intro-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.yy-intro-facts div {
    display: flex;
    min-width: 0;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 28px 18px;
    text-align: center;
}

.yy-intro-facts div + div {
    border-left: 1px solid var(--yy-line);
}

.yy-intro-facts strong {
    color: var(--yy-ink);
    font-size: 30px;
    font-weight: 900;
}

.yy-intro-facts span {
    color: var(--yy-muted);
    font-size: 12px;
    font-weight: 700;
}

.yy-catalog {
    padding: 52px 0 72px;
}

.yy-catalog-heading,
.yy-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.yy-catalog-heading h2,
.yy-section-heading h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
}

.yy-search {
    display: grid;
    width: min(100%, 420px);
    min-height: 48px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid var(--yy-ink);
    border-radius: 4px;
    background: var(--yy-white);
}

.yy-search > i {
    text-align: center;
}

.yy-search input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 8px;
    border: 0;
    outline: 0;
    color: var(--yy-ink);
    background: transparent;
}

.yy-search button {
    align-self: stretch;
    padding: 0 18px;
    border: 0;
    border-left: 1px solid var(--yy-ink);
    color: var(--yy-ink);
    background: var(--yy-lime);
    font-weight: 900;
}

.yy-search button:hover {
    background: var(--yy-coral);
}

.yy-category-bar {
    display: flex;
    gap: 8px;
    margin: 28px 0 24px;
    padding-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.yy-category {
    min-height: 38px;
    padding: 7px 16px;
    flex: 0 0 auto;
    border: 1px solid var(--yy-line);
    border-radius: 4px;
    color: var(--yy-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.yy-category:hover,
.yy-category.active {
    border-color: var(--yy-ink);
    color: var(--yy-white);
    background: var(--yy-ink);
}

.yy-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.yy-product-card {
    display: grid;
    min-width: 0;
    min-height: 440px;
    grid-template-rows: 238px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--yy-line);
    border-radius: 8px;
    background: var(--yy-white);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.yy-product-card:hover {
    border-color: var(--yy-ink);
    box-shadow: var(--yy-shadow);
    transform: translateY(-3px);
}

.yy-product-card[hidden] {
    display: none;
}

.yy-product-media {
    position: relative;
    display: grid;
    min-width: 0;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--yy-line);
    background: var(--yy-lilac);
}

.yy-product-card:nth-child(3n + 2) .yy-product-media {
    background: #e5f4ef;
}

.yy-product-card:nth-child(3n + 3) .yy-product-media {
    background: #fff0ea;
}

.yy-product-media::before,
.yy-product-media::after {
    position: absolute;
    content: "";
    background: rgba(23, 25, 22, 0.1);
}

.yy-product-media::before {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.yy-product-media::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
}

.yy-product-media img {
    position: relative;
    z-index: 1;
    width: 142px;
    height: 142px;
    padding: 16px;
    object-fit: contain;
    border: 1px solid rgba(23, 25, 22, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.yy-delivery-badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 5px 9px;
    border: 1px solid var(--yy-ink);
    border-radius: 3px;
    color: var(--yy-white);
    background: var(--yy-ink);
    font-size: 11px;
    font-weight: 900;
}

.yy-delivery-badge.is-auto {
    color: var(--yy-ink);
    background: var(--yy-lime);
}

.yy-product-body {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    flex-direction: column;
    padding: 20px;
}

.yy-product-copy h2 {
    min-height: 48px;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}

.yy-product-copy h2 a:hover {
    color: var(--yy-teal);
}

.yy-product-copy p {
    margin: 8px 0 0;
    color: var(--yy-muted);
    font-size: 12px;
}

.yy-product-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--yy-line);
}

.yy-price {
    display: inline-flex;
    align-items: baseline;
    color: var(--yy-ink);
}

.yy-price span {
    margin-right: 3px;
    font-size: 13px;
    font-weight: 800;
}

.yy-price strong {
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.yy-product-action {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid var(--yy-ink);
    border-radius: 4px;
    color: var(--yy-white) !important;
    background: var(--yy-ink);
}

.yy-product-action:hover {
    color: var(--yy-ink) !important;
    background: var(--yy-lime);
}

.yy-search-empty,
.yy-empty-state {
    padding: 54px 24px;
    border: 1px solid var(--yy-line);
    border-radius: 8px;
    text-align: center;
    background: var(--yy-white);
}

.yy-empty-state span {
    color: var(--yy-coral);
    font-size: 12px;
    font-weight: 900;
}

.yy-empty-state h3 {
    margin: 8px 0;
    font-size: 24px;
    font-weight: 900;
}

.yy-empty-state p {
    margin: 0 0 14px;
    color: var(--yy-muted);
}

.yy-empty-state a,
.yy-section-heading > a {
    color: var(--yy-teal);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.store-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--yy-white);
    background: var(--yy-ink);
}

.store-footer-inner {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.store-footer-inner strong {
    font-size: 21px;
    font-weight: 900;
}

.store-footer-inner p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.store-footer nav {
    display: flex;
    gap: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 700;
}

.store-footer nav a:hover {
    color: var(--yy-lime);
}

.store-footer-custom {
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
}

.yy-primary-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 18px;
    border: 1px solid var(--yy-ink);
    border-radius: 4px;
    color: var(--yy-white) !important;
    background: var(--yy-ink);
    font-weight: 900;
}

.yy-primary-button:hover,
.yy-primary-button:focus {
    color: var(--yy-ink) !important;
    background: var(--yy-lime);
    box-shadow: none;
}

/* Authentication */
.yy-auth-shell {
    min-height: calc(100vh - 226px);
    padding: 64px 0 80px;
}

.yy-auth-layout {
    display: grid;
    max-width: 1040px;
    min-height: 590px;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.86fr);
    margin: 0 auto;
    border: 1px solid var(--yy-ink);
    border-radius: 8px;
    overflow: hidden;
    background: var(--yy-white);
    box-shadow: var(--yy-shadow);
}

.yy-auth-intro {
    padding: 58px 54px;
    color: var(--yy-white);
    background: var(--yy-ink);
}

.yy-auth-intro .yy-kicker {
    color: var(--yy-lime);
}

.yy-auth-intro h1 {
    max-width: 500px;
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.2;
}

.yy-auth-intro > p:not(.yy-kicker) {
    max-width: 500px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.64);
}

.yy-auth-intro dl {
    margin: 58px 0 0;
}

.yy-auth-intro dl div {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.yy-auth-intro dt {
    color: var(--yy-coral);
    font-size: 12px;
}

.yy-auth-intro dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.yy-auth-form-wrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 48px;
}

.yy-form-heading > span {
    color: var(--yy-teal);
    font-size: 12px;
    font-weight: 900;
}

.yy-form-heading h2 {
    margin: 5px 0 26px;
    font-size: 28px;
    font-weight: 900;
}

.yy-auth-form {
    display: grid;
    gap: 18px;
}

.yy-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 800;
}

.yy-field input {
    width: 100%;
    height: 48px;
    padding: 0 13px;
    border: 1px solid var(--yy-line);
    border-radius: 4px;
    outline: 0;
    color: var(--yy-ink);
    background: var(--yy-paper);
}

.yy-field input:focus {
    border-color: var(--yy-teal);
    background: var(--yy-white);
    box-shadow: 0 0 0 3px rgba(27, 143, 136, 0.12);
}

.yy-check {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--yy-muted);
    font-size: 13px;
}

.yy-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--yy-teal);
}

.yy-auth-switch {
    margin: 22px 0 0;
    color: var(--yy-muted);
    font-size: 13px;
    text-align: center;
}

.yy-auth-switch a {
    color: var(--yy-teal);
    font-weight: 900;
}

/* Account */
.yy-account-shell {
    min-height: calc(100vh - 226px);
    padding: 58px 0 80px;
}

.yy-account-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--yy-ink);
}

.yy-account-heading h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
}

.yy-account-heading > div > p:last-child {
    margin: 10px 0 0;
    color: var(--yy-muted);
}

.yy-account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 1px solid var(--yy-line);
    border-bottom: 1px solid var(--yy-line);
    border-left: 1px solid var(--yy-line);
    background: var(--yy-white);
}

.yy-account-stats div {
    display: flex;
    min-height: 118px;
    justify-content: center;
    flex-direction: column;
    padding: 22px 28px;
}

.yy-account-stats div + div {
    border-left: 1px solid var(--yy-line);
}

.yy-account-stats span {
    color: var(--yy-muted);
    font-size: 12px;
    font-weight: 700;
}

.yy-account-stats strong {
    margin-top: 4px;
    font-size: 31px;
    font-weight: 900;
}

.yy-orders-section {
    padding-top: 54px;
}

.yy-order-list {
    margin-top: 22px;
    border-top: 1px solid var(--yy-ink);
}

.yy-order-row {
    display: grid;
    min-height: 130px;
    grid-template-columns: minmax(260px, 1.6fr) minmax(90px, 0.5fr) minmax(130px, 0.7fr) 100px 96px;
    align-items: center;
    gap: 22px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--yy-line);
}

.yy-order-number {
    color: var(--yy-teal);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
}

.yy-order-primary h3 {
    margin: 5px 0;
    overflow-wrap: anywhere;
    font-size: 16px;
    font-weight: 900;
}

.yy-order-primary time {
    color: var(--yy-muted);
    font-size: 12px;
}

.yy-order-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.yy-order-meta span {
    color: var(--yy-muted);
    font-size: 11px;
}

.yy-order-meta strong {
    margin-top: 3px;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.yy-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 900;
}

.yy-status.is-completed { border-color: #438d4d; color: #25662f; background: #e9f8e8; }
.yy-status.is-waiting { border-color: #b58e21; color: #795c0c; background: #fff4c9; }
.yy-status.is-pending,
.yy-status.is-processing { border-color: #3a8b87; color: #176d68; background: #e2f5f3; }
.yy-status.is-failed { border-color: #b94e45; color: #8a2720; background: #ffebe8; }
.yy-status.is-expired { border-color: #898d87; color: #5d615b; background: #eceeea; }

.yy-order-actions a {
    color: var(--yy-teal);
    font-size: 13px;
    font-weight: 900;
}

.yy-pagination {
    margin-top: 24px;
}

/* Existing purchase, bill, search and detail templates */
.theme-youyumao .main-container {
    min-height: calc(100vh - 226px);
    padding: 44px 0 64px;
}

.theme-youyumao .good-card > .row > [class*="col-"],
.theme-youyumao .order-card > .row > [class*="col-"] {
    width: 100%;
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}

.theme-youyumao .good-card .card,
.theme-youyumao .order-card > .row > [class*="col-"] > .card,
.theme-youyumao .page-wrapper .card {
    overflow: hidden;
    border: 1px solid var(--yy-line) !important;
    border-radius: 8px !important;
    background: var(--yy-white);
    box-shadow: none;
}

.yy-buy-page .good-card > .row:first-child > div > .card {
    margin-top: 0 !important;
    border-color: var(--yy-ink) !important;
}

.yy-buy-page .good-card > .row:first-child > div > .card > .row > .col-md-4 {
    position: relative;
    display: grid;
    min-height: 520px;
    place-items: center;
    border-right: 1px solid var(--yy-line);
    background: var(--yy-lilac);
}

.yy-buy-page .good-card > .row:first-child img.card-img-top {
    width: 190px;
    height: 190px;
    padding: 20px !important;
    object-fit: contain;
    border: 1px solid rgba(23, 25, 22, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.yy-buy-page .card-body {
    padding: 36px !important;
}

.yy-buy-page .lunar-buy-kicker,
.theme-youyumao .lunar-form-section {
    margin: 0 0 8px;
    color: var(--yy-teal);
    font-size: 12px;
    font-weight: 900;
}

.yy-buy-page .card-title {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
}

.yy-buy-page .lunar-price-lg {
    margin: 14px 0 20px;
}

.yy-buy-page .lunar-price-lg strong {
    font-size: 34px;
}

.theme-youyumao .form-control {
    min-height: 44px;
    border: 1px solid var(--yy-line);
    border-radius: 4px;
    color: var(--yy-ink);
    background: var(--yy-paper);
}

.theme-youyumao .form-control:focus {
    border-color: var(--yy-teal);
    background: var(--yy-white);
    box-shadow: 0 0 0 3px rgba(27, 143, 136, 0.12);
}

.theme-youyumao .form-control[readonly] {
    color: #4f554d;
    background: #e9ebe4;
}

.theme-youyumao .col-form-label {
    color: var(--yy-ink);
    font-size: 12px;
    font-weight: 800;
}

.yy-field-note {
    display: block;
    margin-top: 6px;
    color: var(--yy-teal);
    font-size: 11px;
    font-weight: 700;
}

.theme-youyumao .form-check-input:checked {
    border-color: var(--yy-teal);
    background-color: var(--yy-teal);
}

.theme-youyumao .nav-pills {
    gap: 7px;
}

.theme-youyumao .nav-pills .nav-link {
    border: 1px solid var(--yy-line);
    border-radius: 4px;
    color: var(--yy-muted);
    font-size: 13px;
    font-weight: 800;
}

.theme-youyumao .nav-pills .nav-link.active {
    border-color: var(--yy-ink);
    color: var(--yy-white);
    background: var(--yy-ink);
}

.theme-youyumao .badge {
    border-radius: 3px;
}

.theme-youyumao .modal-content {
    border: 1px solid var(--yy-ink);
    border-radius: 8px;
}

.theme-youyumao .modal-header,
.theme-youyumao .modal-footer {
    border-color: var(--yy-line);
}

.theme-youyumao textarea.form-control {
    resize: vertical;
}

.theme-youyumao .order-summary {
    max-width: 720px;
    margin: 0 auto;
}

.theme-youyumao .order-summary > div > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--yy-line);
}

.theme-youyumao .order-summary label {
    color: var(--yy-muted);
    font-size: 12px;
}

.theme-youyumao .pay-now .btn-dark {
    min-height: 46px;
    padding: 10px 22px;
    border-color: var(--yy-ink);
    border-radius: 4px;
    color: var(--yy-ink);
    background: var(--yy-lime);
    font-weight: 900;
}

@media (max-width: 991.98px) {
    .store-header .navbar-collapse {
        padding: 12px 0 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .yy-main-nav {
        padding: 8px 0;
    }

    .yy-main-nav .nav-link {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .yy-main-nav .nav-link::after {
        right: auto;
        left: 0;
        width: 34px;
    }

    .yy-account-nav {
        justify-content: flex-start;
        margin-left: 0;
    }

    .yy-intro-grid {
        grid-template-columns: 1fr;
    }

    .yy-intro-copy {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid var(--yy-line);
    }

    .yy-intro-facts {
        min-height: 110px;
    }

    .yy-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yy-auth-layout {
        grid-template-columns: 1fr;
    }

    .yy-auth-intro {
        padding: 40px;
    }

    .yy-auth-intro dl {
        margin-top: 30px;
    }

    .yy-order-row {
        grid-template-columns: minmax(240px, 1.6fr) 90px 100px 92px;
    }

    .yy-order-row .yy-order-meta:nth-of-type(2) {
        display: none;
    }

    .yy-buy-page .good-card > .row:first-child > div > .card > .row > .col-md-4 {
        min-height: 360px;
    }
}

@media (max-width: 767.98px) {
    .theme-youyumao .container {
        padding-right: 18px;
        padding-left: 18px;
    }

    .store-header .navbar {
        min-height: 68px;
    }

    .yy-brand {
        min-width: 0;
        margin-right: 0;
    }

    .yy-brand-mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .yy-brand-copy small {
        display: none;
    }

    .yy-intro-grid {
        min-height: 0;
    }

    .yy-intro-copy {
        padding: 36px 0 32px;
    }

    .yy-intro-copy h1 {
        font-size: 34px;
    }

    .yy-intro-lead {
        margin-top: 16px;
        font-size: 14px;
    }

    .yy-intro-facts strong {
        font-size: 23px;
    }

    .yy-intro-facts div {
        padding: 20px 8px;
    }

    .yy-catalog {
        padding: 36px 0 50px;
    }

    .yy-catalog-heading,
    .yy-section-heading,
    .yy-account-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .yy-catalog-heading h2,
    .yy-section-heading h2 {
        font-size: 24px;
    }

    .yy-search {
        width: 100%;
    }

    .yy-category-bar {
        margin-top: 22px;
    }

    .yy-product-grid {
        grid-template-columns: 1fr;
    }

    .yy-product-card {
        min-height: 390px;
        grid-template-rows: 210px minmax(0, 1fr);
    }

    .store-footer-inner {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 34px 0;
    }

    .store-footer nav {
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .yy-auth-shell,
    .yy-account-shell {
        padding: 30px 0 50px;
    }

    .yy-auth-layout {
        min-height: 0;
    }

    .yy-auth-intro,
    .yy-auth-form-wrap {
        padding: 32px 24px;
    }

    .yy-auth-intro h1 {
        font-size: 29px;
    }

    .yy-account-heading h1 {
        font-size: 29px;
    }

    .yy-account-heading .yy-primary-button {
        width: 100%;
    }

    .yy-account-stats div {
        min-height: 92px;
        padding: 16px 12px;
    }

    .yy-account-stats strong {
        font-size: 25px;
    }

    .yy-order-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px 16px;
        padding: 20px 0;
    }

    .yy-order-primary {
        grid-column: 1 / -1;
    }

    .yy-order-meta {
        display: none;
    }

    .yy-order-actions {
        text-align: right;
    }

    .theme-youyumao .main-container {
        padding: 28px 0 46px;
    }

    .theme-youyumao .good-card .card,
    .theme-youyumao .order-card > .row > [class*="col-"] > .card {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .yy-buy-page .good-card > .row:first-child > div > .card > .row > .col-md-4 {
        min-height: 250px;
        border-right: 0;
        border-bottom: 1px solid var(--yy-line);
    }

    .yy-buy-page .good-card > .row:first-child img.card-img-top {
        width: 150px;
        height: 150px;
    }

    .yy-buy-page .card-body {
        padding: 24px !important;
    }

    .theme-youyumao .order-summary > div > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yy-product-card {
        transition: none;
    }
}