:root {
    --brand: #0f9f83;
    --brand-dark: #0b806b;
    --brand-deep: #086454;
    --brand-soft: #eaf8f5;
    --ink: #112234;
    --muted: #647386;
    --line: #e4eaf0;
    --canvas: #f6f8fa;
    --surface: #ffffff;
    --dark: #0b1320;
    --blue: #3182ce;
    --indigo: #6366f1;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 8px 28px rgba(17, 34, 52, .07);
    --shadow-lg: 0 24px 70px rgba(17, 34, 52, .14);
}

/* Account access */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 72px;
    color: var(--ink);
    background: #f4f6f5;
}

.auth-header {
    width: min(100% - 64px, 1280px);
    height: 86px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d8dfdc;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.auth-brand img {
    width: auto;
    height: 32px;
    margin-right: 10px;
    object-fit: contain;
}

.auth-brand svg {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    color: var(--brand);
}

.auth-return {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #53626d;
    font-size: 13px;
    font-weight: 650;
}

.auth-return:hover {
    color: var(--brand-dark);
}

.auth-main {
    min-height: calc(100vh - 160px);
    width: min(100% - 64px, 1120px);
    margin-inline: auto;
    padding: clamp(54px, 8vh, 96px) 0 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    align-items: start;
    gap: clamp(70px, 10vw, 150px);
}

.auth-context {
    padding-top: 32px;
}

.auth-eyebrow {
    display: block;
    margin-bottom: 24px;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.auth-context h1 {
    max-width: 600px;
    margin-bottom: 25px;
    color: var(--ink);
    font-size: clamp(42px, 5.2vw, 68px);
    font-weight: 760;
    line-height: 1.02;
    letter-spacing: -.055em;
}

.auth-context > p {
    max-width: 490px;
    margin-bottom: 48px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

.auth-notes {
    max-width: 490px;
    margin: 0;
    border-top: 1px solid #cbd4d0;
}

.auth-notes > div {
    display: grid;
    grid-template-columns: 44px 1fr;
    padding: 15px 0;
    border-bottom: 1px solid #d8dfdc;
}

.auth-notes dt {
    color: #82908b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}

.auth-notes dd {
    margin: 0;
    color: #40514d;
    font-size: 13px;
    font-weight: 620;
}

.auth-panel {
    min-height: 590px;
    padding: 38px 42px 40px;
    background: #fff;
    border: 1px solid #dbe2df;
    box-shadow: 0 18px 52px rgba(26, 48, 42, .07);
}

.auth-session {
    margin: -10px 0 30px;
    padding: 14px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #dbe2df;
}

.auth-session[hidden] {
    display: none;
}

.auth-session div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.auth-session span {
    color: var(--brand-dark);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-session strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
}

.auth-session button {
    padding: 7px 12px;
    color: #53626d;
    background: transparent;
    border: 1px solid #cfd9d5;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

.auth-session button:hover {
    color: var(--brand-dark);
    border-color: var(--brand);
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 38px;
    border-bottom: 1px solid #dbe2df;
}

.auth-tabs button {
    position: relative;
    padding: 0 4px 14px;
    color: #7b8985;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.auth-tabs button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
}

.auth-tabs button[aria-selected="true"] {
    color: var(--ink);
}

.auth-tabs button[aria-selected="true"]::after {
    background: var(--brand);
}

.auth-form-panel[hidden] {
    display: none;
}

.auth-heading {
    margin-bottom: 30px;
}

.auth-heading h2 {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 29px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.auth-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.auth-form,
.auth-form > label {
    display: flex;
    flex-direction: column;
}

.auth-form {
    gap: 20px;
}

.auth-form > label,
.auth-name-row label {
    gap: 8px;
}

.auth-form label > span:first-child {
    color: #344640;
    font-size: 12px;
    font-weight: 680;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    color: var(--ink);
    background: #fbfcfb;
    border: 1px solid #cfd9d5;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-form input::placeholder {
    color: #9aa6a2;
}

.auth-form input:focus {
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 159, 131, .1);
}

.auth-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-name-row label {
    display: flex;
    flex-direction: column;
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.auth-form-row > a,
.auth-terms a {
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 650;
}

.auth-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 9px !important;
    cursor: pointer;
}

.auth-check input {
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
    accent-color: var(--brand-dark);
}

.auth-check > span,
.auth-form label.auth-check > span:first-child {
    color: #687671;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.auth-submit {
    width: 100%;
    height: 48px;
    margin-top: 2px;
    color: #fff;
    background: var(--brand-dark);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 750;
    transition: background-color .2s ease, transform .2s ease;
}

.auth-submit:hover {
    background: var(--brand-deep);
}

.auth-submit:active {
    transform: translateY(1px);
}

.auth-submit:disabled {
    cursor: wait;
    opacity: .68;
}

.auth-form-status {
    min-height: 18px;
    margin: -8px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.auth-form-status.is-error {
    color: #b33a3a;
}

.auth-form-status.is-success {
    color: var(--brand-dark);
}

.auth-page .desktop-nav > a:first-child {
    color: #405166;
}

.auth-page .desktop-nav > .nav-login,
.auth-page .desktop-nav > .nav-login:hover {
    color: var(--brand-dark);
    border-color: var(--brand);
}

.auth-page #mobile-menu a:first-child {
    color: #405166;
    background: transparent;
}

.auth-page #mobile-menu .mobile-login {
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-color: #b9ddd5;
}

footer.auth-footer {
    width: min(100% - 64px, 1280px);
    margin-inline: auto;
    padding: 20px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #75827e;
    background: transparent;
    border-top: 1px solid #d8dfdc;
    font-size: 11px;
    letter-spacing: .04em;
}

@media (max-width: 860px) {
    .auth-main {
        grid-template-columns: 1fr;
        gap: 44px;
        width: min(100% - 40px, 560px);
        padding-top: 44px;
    }

    .auth-context {
        padding-top: 0;
    }

    .auth-context h1 {
        font-size: clamp(39px, 10vw, 56px);
    }

    .auth-context > p {
        margin-bottom: 0;
    }

    .auth-notes {
        display: none;
    }
}

@media (max-width: 560px) {
    .auth-header,
    footer.auth-footer {
        width: calc(100% - 32px);
    }

    .auth-header {
        height: 72px;
    }

    .auth-return {
        font-size: 0;
    }

    .auth-return span {
        font-size: 20px;
    }

    .auth-main {
        width: 100%;
        padding: 34px 16px 48px;
        gap: 34px;
    }

    .auth-eyebrow {
        margin-bottom: 16px;
    }

    .auth-context h1 {
        margin-bottom: 18px;
    }

    .auth-context > p {
        font-size: 14px;
    }

    .auth-panel {
        min-height: 0;
        padding: 30px 22px 32px;
    }

    .auth-tabs {
        margin-bottom: 30px;
    }

    .auth-name-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .auth-form-row {
        align-items: flex-start;
    }

    footer.auth-footer {
        align-items: flex-start;
        gap: 8px;
        flex-direction: column;
    }
}

/* Account center */
.account-page { color:var(--ink); background:var(--canvas); }
.account-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:118px 0 76px; }
.account-summary { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px 32px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-sm); }
.account-person { display:flex; align-items:center; gap:17px; min-width:0; }
.account-person>span { display:flex; width:58px; height:58px; flex:none; align-items:center; justify-content:center; color:#fff; background:var(--brand-dark); border-radius:50%; font-size:1.35rem; font-weight:750; }
.account-person p { margin:0 0 3px; color:var(--brand-dark); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.account-person h1 { margin:0; font-size:1.55rem; letter-spacing:-.02em; }
.account-person div>span { display:block; margin-top:4px; color:var(--muted); font-size:.82rem; }
.account-summary-actions { display:flex; gap:9px; }
.account-summary-actions a,.account-summary-actions button { display:inline-flex; min-height:40px; padding:0 14px; align-items:center; gap:7px; border:1px solid var(--line); border-radius:9px; color:#405166; background:#fff; font:inherit; font-size:.82rem; font-weight:650; text-decoration:none; cursor:pointer; }
.account-summary-actions a { color:#fff; background:var(--brand-dark); border-color:var(--brand-dark); }
.account-summary-actions svg { width:16px; }
.account-layout { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; gap:20px; margin-top:20px; }
.account-tabs { padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.account-tabs button { display:grid; grid-template-columns:20px 1fr auto; width:100%; padding:12px 11px; align-items:center; gap:9px; border:0; border-radius:9px; color:#5e6d7a; background:transparent; font:inherit; font-size:.84rem; text-align:left; cursor:pointer; }
.account-tabs button+button { margin-top:3px; }
.account-tabs button:hover,.account-tabs button.is-active { color:var(--brand-dark); background:var(--brand-soft); }
.account-tabs svg { width:17px; }
.account-tabs b { min-width:21px; padding:2px 6px; border-radius:999px; background:#edf1f3; font-size:.68rem; text-align:center; }
.account-content { min-width:0; }
.account-panel { min-height:400px; padding:28px 30px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-sm); }
.account-panel>header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:21px; border-bottom:1px solid var(--line); }
.account-panel>header h2 { margin:0 0 4px; font-size:1.25rem; }
.account-panel>header p { margin:0; color:var(--muted); font-size:.83rem; }
.account-panel>header>a { padding:9px 13px; color:var(--brand-dark); background:var(--brand-soft); border-radius:8px; font-size:.78rem; font-weight:650; text-decoration:none; }
.account-records article { display:flex; justify-content:space-between; gap:25px; padding:21px 0; border-bottom:1px solid var(--line); }
.account-records article:last-child { border-bottom:0; }
.account-records article>div { min-width:0; }
.account-records h3 { margin:0 0 6px; font-size:1rem; }
.account-records h3 a { color:var(--ink); text-decoration:none; }
.account-records h3 a:hover { color:var(--brand-dark); }
.account-records p { display:-webkit-box; margin:0; overflow:hidden; color:var(--muted); font-size:.84rem; line-height:1.55; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:pre-line; }
.account-records article>span { flex:none; color:#87939e; font-size:.72rem; }
.account-empty { padding:65px 20px; color:var(--muted); text-align:center; }
.account-empty svg { width:32px; height:32px; color:#8da49c; }
.account-empty h3 { margin:13px 0 5px; color:var(--ink); font-size:1rem; }
.account-empty p { margin:0 auto 18px; max-width:430px; font-size:.84rem; line-height:1.6; }
.account-empty a { color:var(--brand-dark); font-size:.82rem; font-weight:650; }
.account-profile { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:25px 0 0; }
.account-profile>div { padding:17px 18px; border:1px solid var(--line); border-radius:10px; background:#fafbfb; }
.account-profile>div:last-child { grid-column:1/-1; }
.account-profile dt { color:#84919c; font-size:.72rem; }
.account-profile dd { margin:6px 0 0; color:#33424e; font-size:.9rem; }

@media (max-width:760px) {
    .account-shell { width:calc(100% - 28px); padding-top:96px; }
    .account-summary { align-items:flex-start; padding:22px 19px; }
    .account-summary-actions a { display:none; }
    .account-layout { grid-template-columns:1fr; }
    .account-tabs { display:grid; grid-template-columns:repeat(4,1fr); padding:6px; overflow-x:auto; }
    .account-tabs button { display:flex; min-width:74px; padding:10px 5px; flex-direction:column; justify-content:center; gap:5px; text-align:center; }
    .account-tabs button b { display:none; }
    .account-panel { min-height:340px; padding:23px 18px; }
    .account-records article { flex-direction:column; gap:8px; }
}

/* Documentation */
.documentation-page { color:var(--ink); background:var(--canvas); }
.documentation-shell,.documentation-article-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:120px 0 78px; }
.documentation-heading { display:flex; padding:30px 0 34px; align-items:flex-end; justify-content:space-between; gap:50px; border-bottom:1px solid var(--line); }
.documentation-heading>div>p { margin:0 0 8px; color:var(--brand-dark); font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.documentation-heading h1 { margin:0; font-size:clamp(2rem,4vw,3.2rem); line-height:1.12; letter-spacing:-.035em; }
.documentation-heading>p { max-width:430px; margin:0; color:var(--muted); font-size:.95rem; line-height:1.7; }
.documentation-featured { display:grid; grid-template-columns:1.15fr .85fr; margin-top:28px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-sm); }
.documentation-featured-image { min-height:390px; overflow:hidden; background:#e7ecea; }
.documentation-featured-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.documentation-featured-image:hover img { transform:scale(1.018); }
.documentation-featured>div { display:flex; padding:38px; flex-direction:column; align-items:flex-start; justify-content:center; }
.documentation-featured>div>span,.documentation-grid article>div span,.documentation-article-shell article>header span { color:var(--brand-dark); font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.documentation-featured h2 { margin:13px 0 12px; font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.2; letter-spacing:-.025em; }
.documentation-featured h2 a:hover,.documentation-grid h2 a:hover { color:var(--brand-dark); }
.documentation-featured>div>p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.7; }
.documentation-featured>div>div { display:flex; gap:13px; margin-top:20px; color:#87939d; font-size:.72rem; }
.documentation-featured>div>div b { font-weight:500; }
.documentation-read { display:inline-flex; margin-top:25px; padding:10px 14px; align-items:center; gap:7px; color:#fff; background:var(--brand-dark); border-radius:9px; font-size:.8rem; font-weight:650; }
.documentation-read svg { width:15px; }
.documentation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:22px; }
.documentation-grid article { padding:14px 14px 21px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.documentation-card-image { display:block; aspect-ratio:16/10; margin-bottom:18px; overflow:hidden; border-radius:10px; background:#e7ecea; }
.documentation-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.documentation-card-image:hover img { transform:scale(1.025); }
.documentation-grid article>div { display:flex; align-items:center; justify-content:space-between; }
.documentation-grid article>div b { color:#929da5; font-size:.7rem; font-weight:500; }
.documentation-grid h2 { margin:10px 0 8px; font-size:1.08rem; line-height:1.4; }
.documentation-grid article>p { display:-webkit-box; margin:0; overflow:hidden; color:var(--muted); font-size:.81rem; line-height:1.6; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.documentation-empty { margin-top:28px; padding:80px 20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; color:var(--muted); text-align:center; }
.documentation-empty svg { width:34px; color:#8da49c; }
.documentation-empty h2 { margin:13px 0 5px; color:var(--ink); font-size:1.2rem; }
.documentation-back { display:inline-flex; margin-bottom:28px; align-items:center; gap:7px; color:#566570; font-size:.82rem; }
.documentation-back svg { width:16px; }
.documentation-article-shell { max-width:900px; }
.documentation-article-shell>article { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-sm); }
.documentation-article-shell article>header { padding:42px 54px 34px; }
.documentation-article-shell article>header>div { display:flex; gap:13px; align-items:center; color:#89949d; font-size:.72rem; }
.documentation-article-shell article>header>div b { font-weight:500; }
.documentation-article-shell h1 { max-width:760px; margin:16px 0 13px; font-size:clamp(2rem,5vw,3.35rem); line-height:1.12; letter-spacing:-.04em; }
.documentation-article-shell article>header>p { max-width:700px; margin:0; color:var(--muted); font-size:1rem; line-height:1.7; }
.documentation-article-image { width:100%; max-height:470px; object-fit:cover; }
.documentation-article-body { max-width:720px; margin:0 auto; padding:50px 46px 65px; color:#354550; font-size:.98rem; line-height:1.95; white-space:pre-wrap; overflow-wrap:anywhere; }

@media (max-width:800px) {
    .documentation-featured { grid-template-columns:1fr; }
    .documentation-featured-image { min-height:280px; }
    .documentation-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
    .documentation-shell,.documentation-article-shell { width:calc(100% - 28px); padding-top:96px; }
    .documentation-heading { align-items:flex-start; flex-direction:column; gap:14px; }
    .documentation-featured>div { padding:25px 21px; }
    .documentation-featured-image { min-height:220px; }
    .documentation-grid { grid-template-columns:1fr; }
    .documentation-article-shell article>header { padding:28px 21px 24px; }
    .documentation-article-body { padding:32px 21px 45px; }
}

/* Documentation storefront layout */
.documentation-main { display:block; background:var(--canvas); }
.documentation-hero {
    position:relative;
    display:flex;
    min-height:430px;
    padding:120px max(24px,calc((100vw - 1120px)/2)) 70px;
    align-items:flex-end;
    overflow:hidden;
    color:#fff;
    background-color:#0b6656;
    background-position:center;
    background-size:cover;
}
.documentation-hero::before {
    content:"";
    position:absolute;
    inset:0;
    opacity:.34;
    background:linear-gradient(120deg,#0b6656 0%,#163f3a 52%,#102f32 100%);
}
.documentation-hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(7,29,27,.78) 0%,rgba(7,29,27,.38) 55%,rgba(7,29,27,.12) 100%);
}
.documentation-hero-content { position:relative; z-index:1; width:min(650px,100%); }
.documentation-hero-content p { margin:0 0 11px; color:#b9f0e4; font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.documentation-hero-content h1 { margin:0 0 14px; font-size:clamp(2.6rem,6vw,4.5rem); line-height:1; letter-spacing:-.04em; }
.documentation-hero-content span { display:block; max-width:580px; color:rgba(255,255,255,.86); font-size:1rem; line-height:1.7; }
.documentation-main .documentation-shell { padding:62px 0 82px; }
.documentation-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:22px; }
.documentation-section-heading p { margin:0 0 5px; color:var(--brand-dark); font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.documentation-section-heading h2 { margin:0; font-size:1.75rem; letter-spacing:-.025em; }
.documentation-section-heading>span { color:var(--muted); font-size:.84rem; }
.documentation-main .documentation-featured {
    grid-template-columns:1fr 1fr;
    margin-top:0;
    border-radius:var(--radius);
    box-shadow:0 8px 28px rgba(17,34,52,.06);
}
.documentation-main .documentation-featured-image { min-height:330px; }
.documentation-main .documentation-featured>div { padding:32px 36px; }
.documentation-main .documentation-featured h2 { font-size:1.7rem; }
.documentation-main .documentation-grid { gap:18px; margin-top:20px; }
.documentation-main .documentation-grid article { padding:12px 12px 20px; border-radius:var(--radius); box-shadow:0 8px 24px rgba(17,34,52,.05); }
.documentation-main .documentation-card-image { margin-bottom:16px; }

@media (max-width:800px) {
    .documentation-hero { min-height:380px; padding-top:105px; padding-bottom:50px; }
    .documentation-main .documentation-featured { grid-template-columns:1fr; }
    .documentation-main .documentation-featured-image { min-height:260px; }
}
@media (max-width:560px) {
    .documentation-hero { min-height:340px; padding:105px 20px 40px; }
    .documentation-hero-content h1 { font-size:2.65rem; }
    .documentation-main .documentation-shell { padding-top:38px; }
    .documentation-section-heading { align-items:flex-start; flex-direction:column; gap:7px; }
    .documentation-main .documentation-featured>div { padding:24px 20px; }
    .documentation-main .documentation-featured h2 { font-size:1.4rem; }
}

/* Simplified account access */
.auth-page {
    padding-top:72px;
    background:#f6f8fa;
}
.auth-page .auth-main {
    display:block;
    width:min(100% - 40px,480px);
    min-height:auto;
    margin:0 auto;
    padding:64px 0 78px;
}
.auth-page .auth-panel {
    min-height:0;
    padding:32px 36px 35px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:0 12px 38px rgba(17,34,52,.08);
}
.auth-card-title {
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:27px;
}
.auth-card-title>span {
    display:flex;
    width:42px;
    height:42px;
    flex:none;
    align-items:center;
    justify-content:center;
    color:var(--brand-dark);
    background:var(--brand-soft);
    border-radius:12px;
}
.auth-card-title svg { width:19px; }
.auth-card-title h1 {
    margin:0 0 3px;
    color:var(--ink);
    font-size:1.05rem;
    letter-spacing:-.01em;
}
.auth-card-title p {
    margin:0;
    color:var(--muted);
    font-size:.77rem;
}
.auth-page .auth-tabs {
    margin:0 0 28px;
    padding:4px;
    gap:4px;
    border:0;
    border-radius:10px;
    background:#f1f4f5;
}
.auth-page .auth-tabs button {
    padding:10px 8px;
    border-radius:8px;
    font-size:.82rem;
    text-align:center;
}
.auth-page .auth-tabs button::after { display:none; }
.auth-page .auth-tabs button[aria-selected="true"] {
    color:var(--brand-dark);
    background:#fff;
    box-shadow:0 2px 8px rgba(17,34,52,.07);
}
.auth-page .auth-heading { margin-bottom:24px; }
.auth-page .auth-heading h2 {
    margin-bottom:5px;
    font-size:1.45rem;
    letter-spacing:-.02em;
}
.auth-page .auth-heading p { font-size:.8rem; }
.auth-page .auth-form { gap:17px; }
.auth-page .auth-form input[type="text"],
.auth-page .auth-form input[type="email"],
.auth-page .auth-form input[type="password"] {
    height:44px;
    border-color:#d8e0e5;
    border-radius:9px;
    background:#fff;
}
.auth-page .auth-submit {
    height:45px;
    border-radius:9px;
    font-size:.84rem;
}
.auth-page .auth-session {
    margin:0 0 24px;
    padding:12px 14px;
    border:1px solid #cfe5df;
    border-radius:9px;
    background:#f2faf8;
}

@media (max-width:560px) {
    .auth-page .auth-main {
        width:calc(100% - 28px);
        padding:35px 0 48px;
    }
    .auth-page .auth-panel {
        padding:24px 19px 27px;
        border-radius:16px;
    }
    .auth-card-title { margin-bottom:22px; }
    .auth-name-row { grid-template-columns:1fr; }
}

/* Documentation article grid aligned with the product catalog */
.documentation-main .documentation-shell { padding-top:52px; }
.documentation-main .documentation-section-heading {
    padding-bottom:18px;
    margin-bottom:24px;
    border-bottom:1px solid var(--line);
}
.documentation-main .documentation-section-heading h2 { font-size:1.55rem; }
.documentation-main .documentation-section-heading>span {
    padding:5px 10px;
    color:#6c7a85;
    background:#eef2f3;
    border-radius:999px;
    font-size:.72rem;
}
.documentation-main .documentation-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    margin-top:0;
}
.documentation-main .documentation-grid article {
    display:flex;
    min-width:0;
    padding:0 0 22px;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:none;
}
.documentation-main .documentation-card-image {
    width:100%;
    margin:0 0 18px;
    border-radius:0;
}
.documentation-main .documentation-grid article>div,
.documentation-main .documentation-grid article>h2,
.documentation-main .documentation-grid article>p,
.documentation-main .documentation-card-link {
    margin-left:20px;
    margin-right:20px;
}
.documentation-main .documentation-grid article>div b {
    color:#8a969f;
    font-size:.68rem;
}
.documentation-main .documentation-grid h2 {
    margin-top:10px;
    margin-bottom:8px;
    font-size:1.05rem;
    line-height:1.45;
}
.documentation-main .documentation-grid article>p {
    margin-bottom:18px;
    color:var(--muted);
    font-size:.8rem;
    line-height:1.65;
    -webkit-line-clamp:2;
}
.documentation-card-link {
    display:inline-flex;
    margin-top:auto;
    align-items:center;
    gap:6px;
    color:var(--brand-dark);
    font-size:.76rem;
    font-weight:650;
}
.documentation-card-link svg { width:14px; }
.documentation-main .documentation-grid article:hover {
    border-color:#c9d8d4;
}

@media (max-width:800px) {
    .documentation-main .documentation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
    .documentation-main .documentation-shell { padding-top:36px; }
    .documentation-main .documentation-grid { grid-template-columns:1fr; gap:16px; }
}

@media (max-width:480px) {
    .account-person>span { width:48px; height:48px; }
    .account-person h1 { font-size:1.2rem; }
    .account-summary-actions button { padding:0 10px; font-size:0; }
    .account-summary-actions button svg { width:18px; }
    .account-profile { grid-template-columns:1fr; }
    .account-profile>div:last-child { grid-column:auto; }
}

.account-order-record {
    display:flex;
    width:100%;
    padding:19px 2px;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border:0;
    border-bottom:1px solid var(--line);
    color:var(--ink);
    background:transparent;
    font:inherit;
    text-align:left;
    cursor:pointer;
}
.account-order-record:last-child { border-bottom:0; }
.account-order-record:hover strong { color:var(--brand-dark); }
.account-order-record>span { display:flex; flex-direction:column; gap:5px; }
.account-order-record>span:last-child { flex-direction:row; align-items:center; gap:10px; }
.account-order-record strong { font-size:.92rem; }
.account-order-record small { color:var(--muted); font-size:.74rem; text-transform:capitalize; }
.account-order-record b { color:var(--ink); font-size:.9rem; }
.account-order-record svg { width:16px; color:#9aa5ae; }
.order-modal-open { overflow:hidden; }
.order-detail-modal { position:fixed; inset:0; z-index:120; }
.order-modal-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(11,19,32,.52); cursor:default; }
.order-detail-modal>section { position:absolute; top:0; right:0; display:flex; width:min(560px,100%); height:100%; box-sizing:border-box; flex-direction:column; overflow-y:auto; background:#fff; box-shadow:-18px 0 60px rgba(11,19,32,.2); }
.order-detail-modal>section>header { display:flex; padding:24px 26px; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.order-detail-modal>section>header p { margin:0 0 3px; color:var(--brand-dark); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.order-detail-modal>section>header h2 { margin:0; font-size:1.25rem; }
.order-detail-modal>section>header button { display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; color:#52616e; background:#fff; cursor:pointer; }
.order-detail-modal>section>header svg { width:18px; }
.order-detail-loading { padding:60px 26px; color:var(--muted); text-align:center; }
#order-detail-content { padding:24px 26px 40px; }
.order-detail-overview { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border:1px solid var(--line); border-radius:11px; background:#fafbfb; }
.order-detail-overview>div { display:flex; min-width:0; padding:15px 12px; flex-direction:column; gap:6px; }
.order-detail-overview>div+div { border-left:1px solid var(--line); }
.order-detail-overview span { color:#87939d; font-size:.68rem; }
.order-detail-overview strong { overflow:hidden; font-size:.82rem; text-overflow:ellipsis; text-transform:capitalize; white-space:nowrap; }
.order-detail-section { margin-top:26px; }
.order-detail-section h3 { margin:0 0 12px; font-size:.92rem; }
#order-detail-items { border-top:1px solid var(--line); }
#order-detail-items>div { display:flex; padding:14px 0; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); }
#order-detail-items>div>span { display:flex; min-width:0; flex-direction:column; gap:4px; }
#order-detail-items strong { font-size:.84rem; }
#order-detail-items small { color:var(--muted); font-size:.72rem; }
#order-detail-items b { flex:none; font-size:.82rem; }
.order-detail-section dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }
.order-detail-section dl>div { padding:13px 14px; border:1px solid var(--line); border-radius:9px; background:#fafbfb; }
.order-detail-section dl>div:nth-child(4),.order-detail-section dl>div:nth-child(5) { grid-column:1/-1; }
.order-detail-section dt { color:#87939d; font-size:.68rem; }
.order-detail-section dd { margin:5px 0 0; color:#405166; font-size:.79rem; line-height:1.5; overflow-wrap:anywhere; }

@media (max-width:560px) {
    .order-detail-modal>section>header,#order-detail-content { padding-left:18px; padding-right:18px; }
    .order-detail-overview { grid-template-columns:1fr; }
    .order-detail-overview>div+div { border-left:0; border-top:1px solid var(--line); }
    .order-detail-section dl { grid-template-columns:1fr; }
    .order-detail-section dl>div:nth-child(4),.order-detail-section dl>div:nth-child(5) { grid-column:auto; }
}

/* Signed-in navigation and account action placement */
.desktop-nav > .nav-login.is-authenticated {
    display:inline-flex;
    max-width:180px;
    padding:4px 11px 4px 5px;
    align-items:center;
    gap:8px;
    color:#344550;
    background:#f6f9f8;
    border-color:#dde6e3;
    border-radius:999px;
    font-size:13px;
}
.desktop-nav > .nav-login.is-authenticated:hover {
    color:var(--brand-dark);
    background:var(--brand-soft);
    border-color:#b9ddd5;
}
.nav-user-avatar {
    display:inline-flex;
    width:27px;
    height:27px;
    flex:none;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--brand-dark);
    border-radius:50%;
    font-size:11px;
    font-weight:750;
}
.nav-user-name {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#mobile-menu .mobile-login.is-authenticated {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    text-align:left;
}
.account-tabs .account-logout-tab {
    margin-top:12px;
    padding-top:14px;
    color:#7a5960;
    border-top:1px solid var(--line);
    border-radius:0 0 9px 9px;
}
.account-tabs .account-logout-tab:hover {
    color:#a13d4b;
    background:#fff4f4;
}

@media (max-width:760px) {
    .account-tabs {
        grid-template-columns:repeat(5,1fr);
    }
    .account-tabs .account-logout-tab {
        margin-top:0;
        padding-top:10px;
        border-top:0;
        border-radius:9px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body,
main {
    display: flex;
    flex-direction: column;
}

main {
    position: relative;
    flex: 1;
    width: 100%;
}

body > main > div {
    width: 100%;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

ul,
p,
h1,
h2,
h3,
h4 {
    margin-top: 0;
}

::selection {
    color: #fff;
    background: var(--brand);
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

/* 公共容器 */
#navbar > div,
main section > div,
footer > div {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
}

/* 公共头部 */
#navbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    height: 72px;
    display: block;
    opacity: 1;
    visibility: visible;
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.nav-overlay,
.nav-scrolled {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid rgba(228, 234, 240, .8);
    box-shadow: 0 8px 30px rgba(17, 34, 52, .055);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

#navbar > div,
#navbar > div > div {
    height: 100%;
}

#navbar > div > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#navbar > div > div > div:first-child {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#navbar img {
    width: auto;
    height: 32px;
    margin-right: 10px;
    object-fit: contain;
}

#navbar [data-lucide="activity"] {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    color: var(--brand);
}

#navbar > div > div > div:first-child > span {
    color: var(--ink);
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.cart-total-display {
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 700;
}

.desktop-nav {
    display: none;
    align-items: center;
    gap: 32px;
}

.desktop-nav > a {
    color: #405166;
    font-size: 14px;
    font-weight: 650;
    transition: color .2s ease;
}

.desktop-nav > a.is-active,
.desktop-nav > a:hover {
    color: var(--brand-dark);
}

.nav-products {
    position: relative;
    display: none;
    height: 72px;
    align-items: center;
}

.nav-products-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #405166;
    font-size: 14px;
    font-weight: 650;
    transition: color .2s ease;
}

.nav-products-trigger > svg {
    width: 15px;
    height: 15px;
    transition: transform .25s ease;
}

.nav-products-trigger:hover,
.nav-products-trigger.is-active,
.nav-products:focus-within > .nav-products-trigger {
    color: var(--brand-dark);
}

.nav-products-menu {
    position: absolute;
    top: calc(100% - 5px);
    left: 50%;
    width: 390px;
    padding: 8px;
    visibility: hidden;
    opacity: 0;
    background: #fff;
    border: 1px solid #dfe5e8;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(17, 34, 52, .11);
    transform: translate(-50%, -4px);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.nav-products-menu-head {
    display: flex;
    min-height: 38px;
    padding: 4px 8px 8px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f2;
}

.nav-products-menu-head > span {
    color: #263747;
    font-size: 13px;
    font-weight: 700;
}

.nav-products-menu-head > a {
    color: #657583;
    font-size: 12px;
    font-weight: 600;
}

.nav-products-menu-head > a:hover {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nav-products-list {
    max-height: min(420px, calc(100vh - 120px));
    padding-top: 4px;
    overflow-x: hidden;
    overflow-y: auto;
}

.nav-products-list > a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    min-height: 58px;
    padding: 8px;
    align-items: center;
    color: var(--ink);
    border-radius: 5px;
    transition: background-color .15s ease;
}

.nav-category-icon {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f4f7f7;
    border: 1px solid #e4e9eb;
    border-radius: 6px;
}

#navbar .nav-category-icon img,
.nav-category-icon .nav-products-icon-fallback {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

#navbar .nav-category-icon img {
    padding: 3px;
    object-fit: contain;
}

.nav-products-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #60756f;
    background: #f1f5f4;
}

.nav-products-icon-fallback > svg {
    width: 18px;
    height: 18px;
}

.nav-category-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.nav-category-copy > strong,
.nav-category-copy > small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-category-copy > strong {
    color: #263747;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.nav-category-copy > small {
    color: #73818d;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.nav-products-list > a:hover,
.nav-products-list > a:focus-visible {
    background: #f3f6f5;
}

.nav-products-list > a:hover .nav-category-copy > strong,
.nav-products-list > a:focus-visible .nav-category-copy > strong {
    color: var(--brand-dark);
}

.nav-products:hover > .nav-products-trigger > svg,
.nav-products:focus-within > .nav-products-trigger > svg {
    transform: rotate(180deg);
}

.nav-products:hover > .nav-products-menu,
.nav-products:focus-within > .nav-products-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.desktop-nav > .nav-login {
    padding: 8px 16px;
    color: var(--ink);
    border: 1px solid #cbd5d9;
    border-radius: 7px;
}

.desktop-nav > .nav-login:hover {
    color: var(--brand-dark);
    border-color: var(--brand);
}

.desktop-nav > .nav-cart {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 8px;
}

#navbar .cart-trigger {
    display: flex;
    align-items: center;
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 700;
}

#navbar .cart-trigger > div,
#navbar > div > div > div:last-child > div {
    position: relative;
}

#navbar [data-lucide="shopping-cart"] {
    width: 22px;
    height: 22px;
    color: #405166;
}

.mobile-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

#navbar .mobile-actions > .cart-trigger {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

#navbar .mobile-actions > .cart-trigger .cart-badge {
    top: 0;
    right: -1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-width: 1.5px;
    font-size: 9px !important;
    line-height: 1;
}

#mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #405166;
    background: transparent;
    border-radius: 10px;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

#mobile-menu-btn svg {
    width: 24px;
    height: 24px;
}

#mobile-menu-btn:hover,
#mobile-menu-btn[aria-expanded="true"] {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

#mobile-menu-btn[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

#navbar > #mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: auto !important;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    margin: 0;
    padding: 10px 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
    border-radius: 0 0 20px 20px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#mobile-menu > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: min(100%, 1280px);
    height: auto !important;
    margin-inline: auto;
}

#mobile-menu a {
    display: block;
    padding: 12px 16px;
    color: #405166;
    font-size: 14px;
    font-weight: 650;
    border-radius: 10px;
}

#mobile-menu a.is-active,
#mobile-menu a:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

#mobile-menu .mobile-login {
    margin-top: 5px;
    color: var(--ink);
    border: 1px solid #d6dfe3;
    text-align: center;
}

/* 徽标与公共按钮 */
.cart-badge {
    position: absolute;
    min-width: 20px;
    padding: 2px 6px;
    color: #fff !important;
    background: var(--brand-dark);
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 10px !important;
    font-weight: 750;
    line-height: 1.1;
    text-align: center;
}

#navbar .cart-badge {
    top: -9px;
    right: -10px;
}

.cart-trigger[href="#"] {
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body > .cart-trigger {
    position: fixed;
    right: 0;
    bottom: 80px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #fff;
    background: var(--brand);
    border-radius: 18px 0 0 18px;
    box-shadow: 0 14px 36px rgba(15, 159, 131, .28);
}

body > .cart-trigger:hover {
    background: var(--brand-dark);
    transform: translateY(-3px);
}

body > .cart-trigger svg {
    width: 22px;
    height: 22px;
}

body > .cart-trigger .cart-badge {
    top: -7px;
    left: -7px;
}

/* 购物车抽屉 */
#cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    background: rgba(11, 19, 32, .48);
    backdrop-filter: blur(3px);
    transition: opacity .25s ease;
}

#cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(100%, 420px);
    height: 100%;
    background: #fff;
    box-shadow: -28px 0 72px rgba(17, 34, 52, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
}

#cart-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

#cart-drawer.is-open {
    transform: translateX(0);
}

#cart-drawer > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}

#cart-drawer > div:first-child > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

#close-cart-btn {
    padding: 4px;
    color: var(--ink);
    background: transparent;
}

#close-cart-btn:hover {
    color: var(--brand);
}

#close-cart-btn svg {
    width: 23px;
    height: 23px;
}

#cart-drawer h2 {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
    letter-spacing: -.025em;
}

.cart-badge-header {
    padding: 4px 10px;
    color: #405166;
    background: #edf1f5;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 750;
}

#cart-items-container {
    flex: 1;
    overflow-y: auto;
}

#empty-cart-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 32px;
    color: #8a98a8;
    text-align: center;
}

#empty-cart-msg svg {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    color: #dbe2e9;
}

#empty-cart-msg p {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
}

#empty-cart-msg button {
    padding: 9px 20px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

#cart-drawer > div:last-child {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--line);
}

#cart-drawer > div:last-child > div:first-child {
    padding: 18px 24px;
}

#cart-drawer > div:last-child > div:first-child > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #405166;
    font-size: 14px;
    font-weight: 700;
}

#cart-drawer > div:last-child > div:first-child > div:last-child {
    margin-bottom: 0;
    color: var(--ink);
    font-size: 18px;
}

#cart-drawer > div:last-child > div:last-child {
    padding: 0 24px 28px;
}

#cart-drawer > div:last-child button {
    width: 100%;
    padding: 14px 20px;
    color: #fff;
    background: var(--brand);
    border-radius: 12px;
    font-weight: 750;
}

#cart-drawer > div:last-child button:hover {
    background: var(--brand-dark);
}

/* Semantic cart footer used by catalog and product-detail drawers. */
#cart-drawer > .cart-drawer-footer {
    flex-shrink: 0;
    padding: 0;
    background: #fff;
    border-top: 1px solid var(--line);
}

#cart-drawer > .cart-drawer-footer > .cart-discount-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    color: var(--muted);
    background: #f7f9fb;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 650;
}

.cart-discount-prompt svg {
    width: 16px;
    height: 16px;
    color: #8c99a7;
}

#cart-drawer > .cart-drawer-footer > .cart-drawer-totals {
    padding: 17px 24px;
}

.cart-drawer-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 9px;
    color: #536579;
    font-size: 13px;
    font-weight: 650;
}

.cart-drawer-totals > div:last-child {
    margin-bottom: 0;
    padding-top: 10px;
    color: var(--ink);
    border-top: 1px solid #edf1f4;
    font-size: 18px;
    font-weight: 800;
}

.cart-drawer-totals > div:last-child > span:last-child {
    color: var(--brand-dark);
}

#cart-drawer > .cart-drawer-footer > .cart-drawer-actions {
    padding: 0 24px 24px;
}

.cart-drawer-actions > a,
.cart-drawer-actions > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 20px;
    color: #fff;
    background: var(--brand);
    border-radius: 11px;
    box-shadow: 0 10px 22px rgba(15, 159, 131, .2);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.cart-drawer-actions > a:hover,
.cart-drawer-actions > button:hover {
    color: #fff;
    background: var(--brand-dark);
}

#cart-items-container > div:not(#empty-cart-msg) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}

#cart-items-container > div:not(#empty-cart-msg) > div:first-child {
    display: flex;
    flex-direction: column;
    padding-right: 16px;
}

#cart-items-container h4 {
    margin-bottom: 4px;
    color: var(--brand);
}

.cart-item-name {
    font-size: 15px;
    line-height: 1.4;
}

.cart-item-price {
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.cart-item-saving {
    margin-bottom: 4px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
}

.cart-item-remove {
    align-self: flex-start;
    width: max-content;
    padding: 0;
    color: var(--brand);
    background: transparent;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-decoration: underline;
}

.cart-item-remove:hover {
    color: var(--brand-deep);
}

#cart-items-container > div:not(#empty-cart-msg) > div:last-child {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    width: 36px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
}

#cart-items-container > div:not(#empty-cart-msg) > div:last-child button,
#cart-items-container > div:not(#empty-cart-msg) > div:last-child > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    color: var(--muted);
    background: #fff;
}

#cart-items-container > div:not(#empty-cart-msg) > div:last-child > div {
    color: var(--ink);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
}

#cart-items-container > div:not(#empty-cart-msg) > div:last-child button:hover {
    color: var(--ink);
    background: #f1f4f6;
}

#cart-items-container > div:not(#empty-cart-msg) > div:last-child svg {
    width: 14px;
    height: 14px;
}

/* 首页首屏 */
.hero-bg {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 82vh;
    margin-top: -72px;
    padding-top: 104px;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(7, 18, 30, .92) 0%, rgba(7, 18, 30, .62) 50%, rgba(7, 18, 30, .16) 100%),
        url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=2070&auto=format&fit=crop");
    background-position: center;
    background-size: cover;
    border-radius: 0 0 34px 34px;
}

.hero-bg > div {
    position: relative;
    z-index: 1;
}

.hero-bg > div > div {
    width: min(68%, 830px);
    padding-block: 64px;
}

.hero-bg p:first-child {
    margin-bottom: 16px;
    padding-left: 12px;
    color: #c5d1dc;
    border-left: 3px solid var(--brand);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .12em;
}

.hero-bg h1 {
    margin-bottom: 24px;
    color: #fff;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 780;
    line-height: 1.08;
    letter-spacing: -.055em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}

.hero-bg h1::first-line {
    color: #72d9c4;
}

.hero-bg h1 + p {
    max-width: 720px;
    margin-bottom: 34px;
    color: #dbe4eb;
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 400;
    line-height: 1.75;
}

.hero-bg a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(15, 159, 131, .26);
    font-size: 15px;
    font-weight: 750;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.hero-bg a:hover {
    background: var(--brand-dark);
    box-shadow: 0 16px 38px rgba(15, 159, 131, .34);
    transform: translateY(-2px);
}

/* 首屏下方优势条 */
.hero-bg + section {
    position: relative;
    z-index: 2;
    padding-block: 28px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 32px rgba(17, 34, 52, .04);
}

.hero-bg + section > div > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.hero-bg + section > div > div > div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 28px;
    border-right: 1px solid var(--line);
}

.hero-bg + section > div > div > div:last-child {
    border-right: 0;
}

.hero-bg + section svg {
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    color: var(--brand);
}

.hero-bg + section h4 {
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 15px;
}

.hero-bg + section p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 12px;
}

/* 首页通用内容区 */
#products,
#products + section,
#expert,
#explore-collection {
    padding-block: 88px;
}

#products {
    background: var(--canvas);
}

#products > div > div:first-child {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}

#products > div > div:first-child > div {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

#products > div > div:first-child > div > div:first-child {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    padding: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

#products > div > div:first-child > div:hover > div:first-child {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

#products img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: .94;
    mix-blend-mode: multiply;
    transition: transform .45s ease;
}

#products > div > div:first-child > div:hover img {
    transform: scale(1.035);
}

#products h3 {
    margin: 0 0 5px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.35;
}

#products h3 + p {
    display: -webkit-box;
    min-height: 42px;
    margin-bottom: 14px;
    overflow: hidden;
    color: var(--muted);
    font-size: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.add-to-cart-btn {
    align-self: flex-start;
    padding: 0;
    color: var(--brand);
    background: transparent;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .03em;
}

.add-to-cart-btn:hover {
    color: var(--brand-deep);
}

.products-empty {
    padding: 32px;
    color: var(--muted);
    background: #fff;
    border: 1px dashed #cbd5df;
    border-radius: var(--radius);
    text-align: center;
}

/* 品牌介绍 */
#products + section {
    overflow: hidden;
    background: #fff;
}

#products + section > div > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 72px;
}

#products + section h2,
#expert h2,
#explore-collection h2 {
    margin-bottom: 20px;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 780;
    line-height: 1.12;
    letter-spacing: -.045em;
}

#products + section p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

#products + section > div > div > div:last-child {
    position: relative;
}

#products + section > div > div > div:last-child > div {
    position: absolute;
    inset: -14px;
    z-index: 0;
    background: var(--brand-soft);
    border-radius: 26px;
    transform: rotate(2deg);
}

#products + section img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 4px solid #fff;
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
}

/* 用户反馈 */
#expert {
    background: var(--canvas);
}

#expert > div > div:first-child {
    display: flex;
    align-items: baseline;
    margin-bottom: 52px;
}

#expert > div > div:first-child h2 {
    margin: 0 20px 0 0;
}

#expert > div > div:first-child span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

#expert > div > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 72px;
}

#expert > div > div:last-child > div {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: start;
    gap: 28px;
}

#expert > div > div:last-child > div > div:first-child {
    width: 100%;
}

#expert img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

#expert > div > div:last-child > div > div:last-child {
    padding-top: 14px;
}

#expert > div > div:last-child > div > div:last-child > p:first-child {
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;
}

#expert h4 {
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 17px;
}

#expert h4 + p {
    margin-bottom: 0;
    color: #8491a0;
    font-size: 13px;
}

/* 产品类型 */
#explore-collection {
    background: #fff;
    border-top: 1px solid var(--line);
}

.collection-inner {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: clamp(64px, 9vw, 140px);
    align-items: start;
}

.collection-intro {
    position: sticky;
    top: 120px;
}

.collection-intro > span {
    display: block;
    margin-bottom: 18px;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.collection-intro h2 {
    max-width: 480px;
}

.collection-intro > p {
    max-width: 500px;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

.collection-intro > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    font-size: 13px;
    font-weight: 720;
    transition: color .2s ease, border-color .2s ease;
}

.collection-intro > a:hover {
    color: var(--brand-dark);
    border-color: var(--brand-dark);
}

.collection-intro > a span {
    font-size: 17px;
    line-height: 1;
    transition: transform .2s ease;
}

.collection-intro > a:hover span {
    transform: translateX(3px);
}

.collection-list {
    border-top: 1px solid #bfc9cd;
}

.collection-item {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 24px;
    padding: 34px 4px;
    border-bottom: 1px solid var(--line);
}

.collection-item > span {
    padding-top: 5px;
    color: #8c9aa2;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .08em;
}

.collection-item h3 {
    margin-bottom: 5px;
    color: var(--ink);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 720;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.collection-item h4 {
    margin-bottom: 14px;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 680;
    letter-spacing: .025em;
}

.collection-item p {
    max-width: 620px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

/* 公共页脚 */
footer {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    width: 100%;
    padding: 68px 0 30px;
    color: #a8b4c2;
    background: var(--dark);
}

footer > div > div:first-child {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 64px;
    margin-bottom: 52px;
}

footer > div > div:first-child > div:first-child > div:first-child {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

footer img {
    width: auto;
    object-fit: cover;
}

footer > div > div:first-child > div:first-child > div:first-child img {
    height: 32px;
    margin-right: 10px;
    object-fit: contain;
}

footer [data-lucide="activity"] {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    color: var(--brand);
}

footer > div > div:first-child > div:first-child > div:first-child span {
    color: #fff;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.035em;
}

footer > div > div:first-child > div:first-child > p {
    max-width: 340px;
    margin-bottom: 26px;
    color: #8d9aaa;
    font-size: 13px;
    line-height: 1.75;
}

footer h4 {
    margin-bottom: 18px;
    color: #fff;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

footer ul {
    margin: 0;
    padding: 0;
    color: #8d9aaa;
    font-size: 13px;
    list-style: none;
}

footer li + li {
    margin-top: 10px;
}

footer a {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

footer a:hover {
    color: #73d9c5;
}

footer > div > div:first-child > div:last-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

footer li {
    display: flex;
    align-items: center;
}

footer li svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    color: var(--brand);
}

footer > div > div:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    color: #718092;
    border-top: 1px solid #243145;
    font-size: 12px;
}

footer > div > div:last-child p {
    margin: 0;
}

footer > div > div:last-child > div {
    display: flex;
    gap: 22px;
}

/* 友情链接 */
.friend-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.friend-link-item {
    display: inline-flex;
    align-items: center;
    max-width: 160px;
    height: 36px;
    padding: 0 11px;
    color: #b5c0cc;
    background: #172336;
    border-radius: 8px;
}

.friend-link-item:hover {
    color: #fff;
    background: var(--brand);
}

.friend-link-icon {
    flex-shrink: 0;
    width: 20px !important;
    min-width: 20px;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px;
    max-height: 20px !important;
    margin-right: 8px;
    border-radius: 5px;
    object-fit: cover;
}

.friend-link-name {
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-link-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    padding: 24px 16px;
}

.friend-modal-open {
    overflow: hidden;
}

.friend-link-modal > div:first-child {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 22, .74);
    backdrop-filter: blur(5px);
}

.friend-link-modal > div:nth-child(2) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    max-width: 448px;
    margin-inline: auto;
}

.friend-link-modal > div:nth-child(2) > div {
    width: 100%;
    overflow: hidden;
    color: var(--ink);
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

.friend-link-modal > div:nth-child(2) > div > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.friend-link-modal > div:nth-child(2) > div > div:first-child > div {
    display: flex;
    align-items: center;
    min-width: 0;
}

.friend-link-modal h3 {
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-link-modal > div:nth-child(2) > div > div:first-child img {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    border-radius: 7px;
    object-fit: cover;
}

.friend-link-modal button {
    width: 32px;
    height: 32px;
    color: var(--muted);
    background: #eef2f5;
    border-radius: 50%;
}

.friend-link-modal > div:nth-child(2) > div > div:last-child {
    max-height: 65vh;
    padding: 12px;
    overflow-y: auto;
}

.friend-link-modal > div:nth-child(2) > div > div:last-child a {
    display: flex;
    align-items: center;
    padding: 11px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.friend-link-modal > div:nth-child(2) > div > div:last-child a + a {
    margin-top: 8px;
}

.friend-link-modal > div:nth-child(2) > div > div:last-child a:hover {
    background: var(--brand-soft);
    border-color: #9dd9cc;
}

.friend-link-modal > div:nth-child(2) > div > div:last-child img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 7px;
}

@media (min-width: 860px) {
    .desktop-nav {
        display: flex;
    }

    .nav-products {
        display: inline-flex;
    }

    .mobile-actions {
        display: none;
    }

    #navbar > #mobile-menu {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .hero-bg {
        min-height: 70vh;
    }

    .hero-bg > div > div {
        width: 82%;
    }

    #products,
    #products + section,
    #expert,
    #explore-collection {
        padding-block: 64px;
    }

    #products + section > div > div {
        gap: 42px;
    }

    #expert > div > div:last-child {
        gap: 38px;
    }

    .collection-inner {
        gap: 52px;
    }
}

@media (max-width: 767px) {
    #navbar {
        height: 64px;
    }

    #navbar > div,
    main section > div,
    footer > div {
        width: min(100% - 28px, 1280px);
    }

    #navbar > div > div > div:first-child > span {
        font-size: 19px;
    }

    .hero-bg {
        min-height: 72vh;
        margin-top: -64px;
        padding-top: 88px;
        border-radius: 0 0 24px 24px;
    }

    .hero-bg > div > div {
        width: 100%;
        padding-block: 48px;
    }

    .hero-bg p:first-child {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .hero-bg h1 {
        margin-bottom: 18px;
        font-size: clamp(36px, 12vw, 48px);
    }

    .hero-bg h1 + p {
        margin-bottom: 26px;
        font-size: 14px;
    }

    .hero-bg a {
        padding: 11px 24px;
        font-size: 14px;
    }

    .hero-bg + section {
        padding-block: 14px;
    }

    .hero-bg + section > div > div {
        grid-template-columns: 1fr;
    }

    .hero-bg + section > div > div > div {
        padding: 13px 4px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .hero-bg + section > div > div > div:last-child {
        border-bottom: 0;
    }

    #products,
    #products + section,
    #expert,
    #explore-collection {
        padding-block: 48px;
    }

    #products > div > div:first-child,
    #products + section > div > div,
    #expert > div > div:last-child {
        grid-template-columns: 1fr;
    }

    #products > div > div:first-child {
        gap: 32px;
    }

    #products > div > div:first-child > div > div:first-child {
        padding: 18px;
    }

    #products h3 {
        font-size: 18px;
    }

    #products + section > div > div {
        gap: 34px;
    }

    #products + section h2,
    #expert h2,
    #explore-collection h2 {
        font-size: 30px;
    }

    #products + section p,
    .collection-intro > p {
        font-size: 14px;
    }

    #products + section > div > div > div:last-child > div {
        inset: -8px;
        border-radius: 18px;
    }

    #expert > div > div:first-child {
        display: block;
        margin-bottom: 30px;
    }

    #expert > div > div:first-child h2 {
        margin: 0 0 5px;
    }

    #expert > div > div:last-child {
        gap: 44px;
    }

    #expert > div > div:last-child > div {
        grid-template-columns: 40% 60%;
        gap: 18px;
    }

    #expert > div > div:last-child > div > div:last-child {
        padding-top: 0;
    }

    #expert > div > div:last-child > div > div:last-child > p:first-child {
        margin-bottom: 16px;
        font-size: 12px;
    }

    #expert h4 {
        font-size: 14px;
    }

    .collection-inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .collection-intro {
        position: static;
    }

    .collection-intro h2 {
        margin-bottom: 16px;
    }

    .collection-intro > p {
        max-width: 620px;
        margin-bottom: 22px;
    }

    .collection-item {
        grid-template-columns: 34px 1fr;
        gap: 14px;
        padding: 27px 0;
    }

    footer {
        padding-top: 48px;
    }

    footer > div > div:first-child {
        grid-template-columns: 1fr;
        gap: 38px;
        margin-bottom: 38px;
    }

    footer > div > div:first-child > div:last-child {
        gap: 22px;
    }

    footer > div > div:last-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    #expert > div > div:last-child > div {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #expert > div > div:last-child > div > div:first-child {
        width: 62%;
        margin-inline: auto;
    }

    footer > div > div:first-child > div:last-child {
        grid-template-columns: repeat(2, 1fr);
    }

    footer > div > div:first-child > div:last-child > div:last-child {
        grid-column: 1 / -1;
    }
}

/* 商店页 */
.store-page .desktop-nav > a:first-child {
    color: #405166;
}

.store-page .desktop-nav > a:nth-child(2) {
    color: var(--brand-dark);
}

.category-hero {
    width: min(100% - 32px, 1280px);
    margin: 54px auto 0;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.category-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    align-items: center;
    gap: clamp(36px, 6vw, 76px);
    padding: 0 8px 46px;
}

.category-hero--text-only .category-hero-inner {
    grid-template-columns: minmax(0, 860px);
}

.category-hero-copy {
    max-width: 780px;
}

.category-hero-eyebrow {
    margin: 0 0 14px;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.category-hero h1 {
    max-width: 780px;
    color: var(--ink);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 730;
    line-height: 1.12;
    letter-spacing: -.04em;
}

.category-hero-description {
    max-width: 650px;
    margin-top: 13px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.category-hero-media {
    position: relative;
    justify-self: end;
    width: min(100%, 220px);
}

.category-hero-image-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #edf1ef;
    border-radius: 12px;
}

.category-hero-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-hero + .store-catalog {
    padding-top: 42px;
}

.store-hero {
    position: relative;
    width: 100%;
    height: clamp(320px, 42vw, 560px);
    margin-top: 72px;
    overflow: hidden;
    background: var(--dark);
}

#carousel-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity .65s ease;
}

.carousel-slide.is-active {
    z-index: 1;
    opacity: 1;
}

.carousel-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .8;
}

.carousel-slide > div:nth-child(2) {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, .18));
}

.carousel-slide > div:last-child {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

.carousel-slide > div:last-child > div {
    width: min(100% - 48px, 1180px);
    margin-inline: auto;
}

.carousel-slide p:first-child {
    margin-bottom: 12px;
    color: var(--brand-dark);
    font-weight: 750;
}

.carousel-slide h1 {
    max-width: 860px;
    margin-bottom: 16px;
    color: var(--ink);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 790;
    line-height: 1.08;
    letter-spacing: -.05em;
}

.carousel-slide h1 + p {
    max-width: 680px;
    margin-bottom: 22px;
    color: #405166;
    font-size: 17px;
    font-weight: 500;
}

.carousel-slide a {
    display: inline-flex;
    padding: 12px 26px;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    font-weight: 750;
}

.carousel-slide a:hover {
    background: var(--brand-dark);
}

#carousel-prev,
#carousel-next {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--ink);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    transform: translateY(-50%);
}

#carousel-prev {
    left: 24px;
}

#carousel-next {
    right: 24px;
}

#carousel-prev:hover,
#carousel-next:hover {
    background: #fff;
}

#carousel-prev svg,
#carousel-next svg {
    width: 22px;
    height: 22px;
}

.store-hero > div:last-child {
    position: absolute;
    bottom: 24px;
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
}

.carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: rgba(17, 34, 52, .28);
    border-radius: 50%;
    transition: width .2s ease, background-color .2s ease;
}

.carousel-dot.is-active {
    width: 26px;
    background: var(--brand);
    border-radius: 999px;
}

.store-catalog {
    flex: 1;
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
    padding-block: 72px;
}

.store-catalog > h2 {
    margin-bottom: 38px;
    color: var(--ink);
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -.035em;
}

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

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.product-card:hover {
    border-color: #cfd9e1;
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.sale-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    padding: 4px 9px;
    color: var(--brand-deep);
    background: rgba(255, 255, 255, .92);
    border: 1px solid #cae6df;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 750;
}

.quick-add {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    opacity: 0;
    transition: opacity .2s ease;
}

.product-card:hover .quick-add {
    opacity: 1;
}

.quick-add .add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--brand-dark);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.quick-add svg {
    width: 17px;
    height: 17px;
}

.product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 22px;
    overflow: hidden;
    background: var(--canvas);
    border-radius: 14px;
}

.product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .94;
    mix-blend-mode: multiply;
    transition: transform .4s ease;
}

.product-card:hover .product-media img {
    transform: scale(1.035);
}

.product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 5px 5px;
}

.product-info > p:first-child {
    margin-bottom: 6px;
    color: #8a97a5;
    font-size: 12px;
    font-weight: 600;
}

.product-info h3 {
    display: -webkit-box;
    margin-bottom: 20px;
    overflow: hidden;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-info > div:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.product-info > div:last-child > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.product-info > div:last-child > div span:first-child {
    color: var(--brand-dark);
    font-size: 20px;
    font-weight: 800;
}

.product-info > div:last-child > div span:last-child:not(:first-child) {
    color: #9aa5b1;
    font-size: 13px;
    text-decoration: line-through;
}

.product-info > div:last-child > .add-to-cart-btn {
    display: none;
}

.store-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 48px;
    padding-top: 24px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
}

.store-pagination > div:last-child {
    display: flex;
    gap: 10px;
}

.store-pagination a,
.store-pagination > div:last-child > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
}

.store-pagination a {
    color: var(--brand-dark);
    background: #fff;
    border: 1px solid var(--line);
}

.store-pagination a:last-of-type {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.store-pagination > div:last-child > span {
    color: #a6b0bb;
    background: #edf1f4;
}

.store-help {
    width: 100%;
    background: #eef3f1;
    border-top: 1px solid var(--line);
}

.store-help > div {
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.8fr);
    gap: clamp(48px, 7vw, 96px);
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
    padding-block: 84px;
    align-items: start;
}

.store-help-intro {
    max-width: 360px;
    padding-top: 4px;
}

.store-help-intro > span {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.store-help h2 {
    margin-bottom: 18px;
    color: var(--ink);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
    letter-spacing: -.04em;
}

.store-help h2 + p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #cfd9d5;
    border-bottom: 1px solid #cfd9d5;
}

.help-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 250px;
    padding: 26px 26px 30px;
    text-align: left;
}

.help-card + .help-card {
    border-left: 1px solid #cfd9d5;
}

.help-card-mark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 52px;
}

.help-card-mark > svg {
    width: 22px;
    height: 22px;
    color: var(--brand-dark);
}

.help-card-mark > span {
    color: #8b9893;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.help-card h3 {
    margin-bottom: 12px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.35;
}

.help-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.help-card:hover .help-card-mark > svg {
    color: var(--brand);
}

@media (max-width: 859px) {
    .category-hero {
        margin-top: 40px;
    }

    .category-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
        gap: 30px;
        padding: 0 4px 38px;
    }

    .store-hero {
        height: 420px;
        margin-top: 64px;
    }

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

    .help-grid {
        grid-template-columns: 1fr;
    }

    .store-help > div {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .store-help-intro {
        max-width: 620px;
    }

    .help-card {
        min-height: 0;
    }

    .help-card + .help-card {
        border-top: 1px solid #cfd9d5;
        border-left: 0;
    }

    .help-card-mark {
        margin-bottom: 28px;
    }
}

@media (max-width: 600px) {
    .category-hero-inner,
    .category-hero--text-only .category-hero-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 0 34px;
    }

    .category-hero h1 {
        font-size: 34px;
    }

    .category-hero-description {
        margin-top: 18px;
        font-size: 14px;
    }

    .category-hero-media {
        justify-self: start;
        width: min(62vw, 220px);
    }

    .category-hero-image-frame {
        border-radius: 15px;
    }

    .category-hero + .store-catalog {
        padding-top: 34px;
    }

    .store-hero {
        height: 310px;
    }

    .carousel-slide > div:last-child > div {
        width: calc(100% - 40px);
    }

    .carousel-slide h1 {
        font-size: 38px;
    }

    .carousel-slide h1 + p {
        font-size: 14px;
    }

    #carousel-prev,
    #carousel-next {
        display: none;
    }

    .store-catalog {
        width: calc(100% - 24px);
        padding-block: 44px;
    }

    .store-catalog > h2 {
        margin-bottom: 24px;
        font-size: 26px;
    }

    .product-grid {
        gap: 10px;
    }

    .product-card {
        padding: 8px;
        border-radius: 14px;
    }

    .sale-badge {
        top: 14px;
        left: 14px;
        font-size: 9px;
    }

    .quick-add {
        display: none;
    }

    .product-media {
        padding: 12px;
        border-radius: 10px;
    }

    .product-info {
        padding: 11px 2px 2px;
    }

    .product-info h3 {
        margin-bottom: 12px;
        font-size: 13px;
    }

    .product-info > div:last-child > div span:first-child {
        font-size: 16px;
    }

    .product-info > div:last-child > .add-to-cart-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        color: var(--brand-dark);
        background: var(--brand-soft);
        border-radius: 50%;
    }

    .product-info > div:last-child > .add-to-cart-btn svg {
        width: 14px;
        height: 14px;
    }

    .store-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .store-help > div {
        width: calc(100% - 28px);
        padding-block: 52px;
    }

    .help-card {
        padding: 24px 4px 26px;
    }
}

.is-hidden {
    display: none !important;
}

/* 商品详情页 */
.detail-page .desktop-nav > a:first-child {
    color: #405166;
}

.detail-page .desktop-nav > a:nth-child(2) {
    color: var(--brand-dark);
}

.detail-main {
    padding: 72px 0 72px;
    background: #fff;
}

.detail-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    margin-bottom: 58px;
    overflow: hidden;
}

.detail-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-banner > div:nth-child(2) {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 19, 32, .9), rgba(11, 19, 32, .34));
}

.detail-banner > div:last-child {
    position: relative;
    z-index: 1;
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
    padding-block: 50px;
}

.detail-banner p:first-child {
    margin-bottom: 10px;
    color: #74d9c5;
    font-weight: 750;
}

.detail-banner h1 {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -.045em;
}

.detail-banner h1 + p {
    max-width: 800px;
    color: rgba(255, 255, 255, .82);
}

.detail-banner a {
    display: inline-flex;
    margin-top: 20px;
    padding: 11px 24px;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    font-weight: 750;
}

.product-detail-container {
    width: min(100% - 32px, 1180px);
    margin-inline: auto;
}

.product-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 68px;
    margin-bottom: 70px;
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#image-preview-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 38px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 22px;
}

#image-preview-stage > .sale-badge {
    top: 18px;
    left: 18px;
}

#zoom-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--muted);
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

#zoom-btn svg {
    width: 19px;
    height: 19px;
}

#main-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .94;
    mix-blend-mode: multiply;
    cursor: zoom-in;
    transition: transform .3s ease;
}

#main-product-image:hover {
    transform: scale(1.025);
}

.image-lens {
    position: absolute;
    z-index: 20;
    display: none;
    width: 120px;
    height: 120px;
    pointer-events: none;
    background: rgba(255, 255, 255, .3);
    border: 2px dashed var(--brand);
}

.image-zoom-result {
    position: absolute;
    top: 0;
    left: calc(100% + 18px);
    z-index: 30;
    display: none;
    width: min(360px, 38vw);
    aspect-ratio: 1;
    background-color: #fff;
    background-repeat: no-repeat;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.thumb-btn {
    position: relative;
    aspect-ratio: 1;
    padding: 8px;
    overflow: hidden;
    background: var(--canvas);
    border: 2px solid transparent;
    border-radius: 11px;
}

.thumb-btn:hover {
    border-color: #bdc9d3;
}

.thumb-btn.is-active {
    border-color: var(--brand);
}

.thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .84;
    mix-blend-mode: multiply;
}

.thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .18);
}

.product-summary {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

.product-summary > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #8290a0;
    font-size: 13px;
}

.product-summary > div:first-child a:hover,
.product-summary > div:last-child a:hover {
    color: var(--brand-dark);
}

.product-summary > h1 {
    margin-bottom: 18px;
    color: var(--ink);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.05em;
}

.product-summary > h1 + div {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
}

#product-original-price {
    color: #9aa5b1;
    font-size: 17px;
    text-decoration: line-through;
}

#product-price {
    color: var(--brand-dark);
    font-size: 34px;
    font-weight: 800;
}

#product-price + span {
    color: var(--muted);
    font-size: 13px;
}

.product-summary > p {
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.sku-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.sku-option {
    padding: 12px 14px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    text-align: left;
}

.sku-option:hover,
.sku-option.is-selected {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.sku-option span {
    display: block;
}

.sku-option span:first-child {
    font-size: 13px;
    font-weight: 750;
}

.sku-option span:last-child {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.purchase-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 24px 0;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.quantity-control {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    width: 126px;
    height: 48px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfd8e0;
    border-radius: 10px;
}

.quantity-control button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 100%;
    color: var(--muted);
    background: #fff;
}

.quantity-control button:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.quantity-control svg {
    width: 16px;
    height: 16px;
}

#product-qty {
    width: 42px;
    height: 100%;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    text-align: center;
    font-weight: 750;
    appearance: textfield;
}

#product-qty::-webkit-inner-spin-button,
#product-qty::-webkit-outer-spin-button {
    appearance: none;
}

#add-to-cart-action {
    flex: 1;
    height: 48px;
    color: #fff;
    background: var(--brand);
    border-radius: 10px;
    font-weight: 750;
}

#add-to-cart-action:hover {
    background: var(--brand-dark);
}

#add-to-cart-action.is-loading {
    background: var(--dark);
}

.product-tabs {
    margin-bottom: 76px;
    padding-top: 38px;
    border-top: 1px solid var(--line);
}

.tab-nav {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--line);
}

.tab-btn {
    padding: 0 0 14px;
    color: var(--muted);
    background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    font-weight: 600;
}

.tab-btn:hover,
.tab-btn.is-active {
    color: var(--ink);
    border-bottom-color: var(--brand);
}

.tab-content {
    color: var(--muted);
    line-height: 1.8;
    white-space: pre-line;
}

#tab-reviews > div:first-child > div {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 26px;
}

#tab-reviews > div:first-child > div > div:first-child {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #8794a3;
    background: #e8edf1;
    border-radius: 50%;
}

#tab-reviews > div:first-child > div > div:last-child > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

#tab-reviews [data-lucide="star"] {
    width: 17px;
    height: 17px;
    color: #e7ae22;
    fill: #e7ae22;
}

#comment-stars {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
}

.comment-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 2px;
    color: #cbd3dc;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.comment-star svg {
    width: 20px;
    height: 20px;
    color: inherit;
    fill: transparent;
    transition: color .18s ease, fill .18s ease, transform .18s ease;
}

.comment-star:hover svg {
    color: #e7ae22;
    transform: scale(1.12);
}

.comment-star.is-active svg {
    color: #e7ae22;
    fill: #e7ae22;
}

.review-form-card {
    padding: 30px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.review-form-card h3 {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 22px;
    font-weight: 600;
}

.review-form-card h3 + p {
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 13px;
}

#comment-form {
    display: grid;
    gap: 20px;
}

#comment-form > div {
    display: flex;
    gap: 10px;
}

#comment-form > div:nth-of-type(3) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

#comment-form > div > div,
#comment-form > div:nth-of-type(2),
#comment-form > div:nth-of-type(4) {
    flex-direction: column;
}

#comment-form label {
    color: #405166;
    font-size: 13px;
    font-weight: 600;
}

#comment-form input:not([type="hidden"]):not([type="checkbox"]),
#comment-form textarea {
    width: 100%;
    padding: 11px 13px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #ccd6df;
    border-radius: 9px;
}

#comment-form input:focus,
#comment-form textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 159, 131, .12);
}

#comment-submit {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 118px;
    height: 44px;
    padding: 0 28px;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 159, 131, .2);
    line-height: 1;
    font-weight: 750;
}

#comment-submit:hover {
    background: var(--brand-dark);
}

#comment-submit:disabled {
    opacity: .65;
    cursor: wait;
}

#comment-form > div:last-child {
    align-items: center;
    flex-wrap: wrap;
    padding-top: 4px;
}

#comment-message {
    color: var(--muted);
    font-size: 13px;
}

.comment-message {
    margin-left: 12px;
    font-size: 13px;
}

.comment-message.is-error {
    color: #d14343;
}

.comment-message.is-success {
    color: var(--brand-dark);
}

.related-products {
    padding-top: 26px;
}

.related-products > h2 {
    margin-bottom: 28px;
    color: var(--ink);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -.04em;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.related-grid .product-card {
    padding: 10px;
}

.related-grid .product-info h3 {
    font-size: 14px;
}

#image-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .92);
}

#close-modal-btn {
    position: absolute;
    top: 22px;
    right: 22px;
    padding: 8px;
    color: rgba(255, 255, 255, .72);
    background: transparent;
}

#close-modal-btn svg {
    width: 30px;
    height: 30px;
}

#modal-image {
    max-width: 94vw;
    max-height: 90vh;
    object-fit: contain;
}

.fade-in {
    animation: detailFadeIn .25s ease forwards;
}

.fade-out {
    animation: detailFadeOut .25s ease forwards;
}

@keyframes detailFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes detailFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.cart-item-sku {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 900px) {
    .product-overview {
        gap: 38px;
    }

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

@media (max-width: 767px) {
    .detail-main {
        padding-top: 64px;
    }

    .detail-banner {
        min-height: 230px;
        margin-bottom: 42px;
    }

    .product-overview {
        grid-template-columns: 1fr;
        gap: 34px;
        margin-bottom: 52px;
    }

    #image-preview-stage {
        padding: 24px;
    }

    .product-summary > h1 {
        font-size: 34px;
    }

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

    .purchase-row {
        gap: 10px;
    }

    .quantity-control {
        width: 108px;
    }

    #comment-form > div:nth-of-type(3) {
        grid-template-columns: 1fr;
    }

    .review-form-card {
        padding: 22px;
    }
}

/* Checkout */
.checkout-page {
    background: var(--canvas);
}

.checkout-main {
    padding-top: 72px;
}

.checkout-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1727, #173148);
}

.checkout-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-hero > .checkout-hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(7, 17, 30, .9), rgba(7, 28, 38, .54));
}

.checkout-hero > .checkout-hero-content {
    position: relative;
    z-index: 1;
    width: min(100% - 32px, 1280px);
    padding-block: 52px;
    color: #fff;
}

.checkout-hero-content > p:first-child {
    margin-bottom: 10px;
    color: #7ce0cc;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.checkout-hero-content h1 {
    margin-bottom: 10px;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.checkout-hero-content h1 + p {
    max-width: 720px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .75);
}

.checkout-hero-content > a {
    display: inline-flex;
    margin-top: 22px;
    padding: 11px 20px;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
}

.checkout-content {
    width: min(100% - 32px, 1120px);
    margin-inline: auto;
    padding: 64px 0 88px;
}

.checkout-heading {
    max-width: 650px;
    margin-bottom: 38px;
}

.checkout-heading > p {
    margin-bottom: 7px;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.checkout-heading h1 {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -.04em;
}

.checkout-heading > span {
    color: var(--muted);
    font-size: 14px;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
    gap: 34px;
    align-items: start;
}

.checkout-form-panel,
.checkout-summary {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.checkout-form-panel {
    padding: 30px;
}

.checkout-section-title,
.checkout-summary-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.checkout-section-title {
    margin-bottom: 28px;
}

.checkout-section-title > span,
.checkout-summary-title > span {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

.checkout-section-title h2,
.checkout-summary-title h2 {
    margin: 0 0 3px;
    color: var(--ink);
    font-size: 20px;
    letter-spacing: -.02em;
}

.checkout-section-title p,
.checkout-summary-title p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

#checkout-form {
    display: grid;
    gap: 18px;
}

#checkout-form > div:not(.form-row) {
    min-width: 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.address-fields {
    display: grid;
    gap: 10px;
}

.form-label {
    display: block;
    margin-bottom: 7px;
    color: #405166;
    font-size: 12px;
    font-weight: 700;
}

.required-asterisk {
    margin-left: 2px;
    color: #d34b4b;
}

.form-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    color: var(--ink);
    background: #fbfcfd;
    border: 1px solid #d8e0e8;
    border-radius: 10px;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

textarea.form-input {
    min-height: 112px;
    resize: vertical;
}

.form-input:hover {
    border-color: #b8c7d4;
}

.form-input:focus {
    outline: 0;
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 159, 131, .12);
}

.form-input::placeholder {
    color: #9aa7b5;
}

.additional-information {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.additional-information h2 {
    margin-bottom: 16px;
    color: var(--ink);
    font-size: 18px;
}

.checkout-summary-column {
    position: sticky;
    top: 96px;
}

.checkout-summary {
    padding: 26px;
}

.checkout-summary-title {
    margin-bottom: 24px;
}

.order-table-head,
.order-totals > div,
.checkout-order-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.order-table-head {
    padding-bottom: 12px;
    color: #405166;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#checkout-order-items {
    padding-block: 5px;
    border-bottom: 1px solid var(--line);
}

.checkout-order-item {
    padding: 15px 0;
}

.checkout-order-item + .checkout-order-item {
    border-top: 1px solid #edf1f4;
}

.checkout-order-product {
    min-width: 0;
}

.checkout-order-name {
    display: block;
    overflow: hidden;
    color: #34475c;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.checkout-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}

.checkout-quantity {
    display: inline-grid;
    grid-template-columns: 28px 28px 28px;
    overflow: hidden;
    border: 1px solid #dce3e9;
    border-radius: 8px;
}

.checkout-quantity button,
.checkout-quantity span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 27px;
}

.checkout-quantity button {
    padding: 0;
    color: var(--muted);
    background: #fff;
}

.checkout-quantity button:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.checkout-quantity span {
    color: var(--ink);
    background: #f4f7f9;
    font-size: 11px;
    font-weight: 800;
}

.checkout-quantity svg,
.checkout-remove-item svg {
    width: 13px;
    height: 13px;
}

.checkout-remove-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #94a1ae;
    background: transparent;
    border-radius: 7px;
}

.checkout-remove-item:hover {
    color: #c94747;
    background: #fff1f1;
}

.checkout-order-price {
    flex-shrink: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.checkout-empty-order {
    padding: 28px 8px;
    color: #8b98a6;
    font-size: 13px;
    text-align: center;
}

.order-totals {
    display: grid;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
}

.order-totals > div {
    align-items: center;
    color: var(--muted);
    font-size: 13px;
}

.order-totals > div:last-child {
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
}

#checkout-total {
    color: var(--brand-dark);
    font-size: 20px;
}

.payment-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 20px 0;
    padding: 14px;
    color: #536579;
    background: #f1f7f6;
    border: 1px solid #dceeea;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.55;
}

.payment-note svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--brand);
}

.payment-note p {
    margin: 0;
}

#order-message {
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 650;
}

#order-message.is-success {
    color: #08735f;
    background: #eaf8f5;
    border-color: #a8dfd3;
}

#order-message.is-error {
    color: #b53434;
    background: #fff2f2;
    border-color: #efc2c2;
}

#place-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    color: #fff;
    background: var(--brand);
    border-radius: 11px;
    box-shadow: 0 12px 24px rgba(15, 159, 131, .22);
    font-size: 14px;
    font-weight: 800;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#place-order-btn:hover:not(:disabled) {
    background: var(--brand-dark);
    box-shadow: 0 14px 28px rgba(15, 159, 131, .28);
    transform: translateY(-2px);
}

#place-order-btn:disabled {
    opacity: .65;
    cursor: wait;
}

#place-order-btn svg {
    width: 17px;
    height: 17px;
}

.checkout-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 13px 0 0;
    color: #8794a2;
    font-size: 10px;
    text-align: center;
}

.checkout-security svg {
    width: 13px;
    height: 13px;
    color: var(--brand);
}

@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary-column {
        position: static;
    }
}

@media (max-width: 560px) {
    .checkout-main {
        padding-top: 72px;
    }

    .checkout-hero {
        min-height: 220px;
    }

    .checkout-content {
        padding: 44px 0 64px;
    }

    .checkout-heading {
        margin-bottom: 28px;
    }

    .checkout-form-panel,
    .checkout-summary {
        padding: 21px;
        border-radius: 14px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Contact */
.contact-page {
    background: var(--canvas);
}

.contact-page .desktop-nav > a:first-child {
    color: #405166;
}

.contact-page .desktop-nav > a.is-active,
.contact-page .desktop-nav > a:hover {
    color: var(--brand-dark);
}

.contact-page #mobile-menu a:first-child {
    color: #405166;
    background: transparent;
}

.contact-page #mobile-menu a.is-active,
.contact-page #mobile-menu a:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

#contact-notice {
    position: fixed;
    top: 92px;
    left: 50%;
    z-index: 90;
    width: min(calc(100% - 32px), 460px);
    padding: 13px 18px;
    color: #fff;
    background: var(--dark);
    border-radius: 11px;
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    transform: translateX(-50%);
}

#contact-notice.is-success {
    background: var(--brand-dark);
}

#contact-notice.is-error {
    background: #b83c3c;
}

.contact-main {
    padding-top: 72px;
}

.contact-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 440px;
    overflow: hidden;
    background: #102337;
}

.contact-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-hero > img:nth-of-type(2) {
    z-index: 1;
}

.contact-hero > .contact-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    background:
        linear-gradient(90deg, rgba(7, 17, 30, .9), rgba(7, 24, 37, .45)),
        linear-gradient(0deg, rgba(5, 14, 25, .25), transparent);
}

.contact-hero > .contact-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    width: min(100% - 32px, 1280px);
    min-height: 440px;
}

.contact-hero-content > div {
    width: min(100%, 800px);
}

.contact-hero-content p:first-child {
    margin-bottom: 12px;
    color: #80dfcc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.contact-hero-content h1 {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: -.055em;
}

.contact-hero-content h1 span:first-child {
    color: #64d5be;
}

.contact-hero-content h1 + p {
    max-width: 720px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15px;
}

.contact-content {
    padding: 76px 0 92px;
}

.contact-content > div {
    width: min(100% - 32px, 1180px);
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr);
    gap: 38px;
    align-items: start;
}

.contact-left-column {
    display: grid;
    gap: 30px;
}

.contact-details-card,
.contact-form-card,
.contact-map-column {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.contact-details-card,
.contact-form-card {
    padding: 30px;
}

.contact-map-column {
    position: sticky;
    top: 96px;
    padding: 28px;
}

.contact-section-heading {
    margin-bottom: 24px;
}

.contact-section-heading > p {
    margin-bottom: 6px;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.contact-section-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    letter-spacing: -.03em;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    padding: 17px;
    background: #f7f9fb;
    border: 1px solid #edf1f4;
    border-radius: 12px;
}

.contact-detail-item > div:first-child {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
}

.contact-detail-item svg {
    width: 17px;
    height: 17px;
}

.contact-detail-item h4 {
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 13px;
}

.contact-detail-item p,
.contact-detail-item a {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.contact-detail-item a:hover {
    color: var(--brand-dark);
}

.contact-detail-email {
    grid-column: 1 / -1;
}

#contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#contact-form > div:nth-child(3),
#contact-form > div:nth-child(4),
#contact-form > div:last-child {
    grid-column: 1 / -1;
}

#contact-form label {
    display: block;
    margin-bottom: 7px;
    color: #405166;
    font-size: 12px;
    font-weight: 700;
}

#contact-form label span {
    color: #d34b4b;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 11px 13px;
    color: var(--ink);
    background: #fbfcfd;
    border: 1px solid #d8e0e8;
    border-radius: 10px;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#contact-form input {
    min-height: 44px;
}

#contact-form textarea {
    min-height: 126px;
    resize: vertical;
}

#contact-form input:hover,
#contact-form textarea:hover {
    border-color: #b8c7d4;
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: 0;
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 159, 131, .12);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: #9aa7b5;
}

#contact-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 152px;
    min-height: 46px;
    padding: 11px 22px;
    color: #fff;
    background: var(--brand);
    border-radius: 10px;
    box-shadow: 0 10px 22px rgba(15, 159, 131, .2);
    font-size: 13px;
    font-weight: 800;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#contact-form button:hover:not(:disabled) {
    background: var(--brand-dark);
    box-shadow: 0 13px 26px rgba(15, 159, 131, .25);
    transform: translateY(-2px);
}

#contact-form button:disabled {
    opacity: .7;
    cursor: wait;
}

#contact-form button.is-success {
    background: var(--brand-dark);
}

#contact-form button.is-error {
    background: #bd4141;
}

#contact-form button svg {
    width: 16px;
    height: 16px;
}

.contact-map {
    position: relative;
    width: 100%;
    height: 570px;
    overflow: hidden;
    background:
        linear-gradient(135deg, #eaf0f4, #dfe8ee);
    border: 1px solid #dbe3e9;
    border-radius: 14px;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-directions {
    margin-top: 18px;
}

.contact-directions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 800;
}

.contact-directions a:hover {
    color: var(--brand-deep);
}

.contact-directions svg {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.contact-directions a:hover svg {
    transform: translate(2px, -2px);
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-map-column {
        position: static;
    }

    .contact-map {
        height: 440px;
    }
}

@media (max-width: 560px) {
    .contact-hero,
    .contact-hero > .contact-hero-content {
        min-height: 300px;
    }

    .contact-content {
        padding: 48px 0 66px;
    }

    .contact-details-card,
    .contact-form-card,
    .contact-map-column {
        padding: 21px;
        border-radius: 14px;
    }

    .contact-details-grid,
    #contact-form {
        grid-template-columns: 1fr;
    }

    .contact-detail-email,
    #contact-form > div {
        grid-column: auto;
    }

    .contact-map {
        height: 360px;
    }

    #contact-form button {
        width: 100%;
    }
}

/* Cart page */
.cart-page {
    background: var(--canvas);
}

.cart-main {
    padding-top: 72px;
}

.cart-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 280px;
    overflow: hidden;
    background: #102337;
}

.cart-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-hero > .cart-hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(7, 17, 30, .9), rgba(7, 28, 38, .5));
}

.cart-hero > .cart-hero-content {
    position: relative;
    z-index: 1;
    width: min(100% - 32px, 1280px);
    padding-block: 52px;
    color: #fff;
}

.cart-hero-content > p:first-child {
    margin-bottom: 9px;
    color: #7ce0cc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cart-hero-content h1 {
    margin-bottom: 10px;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.cart-hero-content h1 + p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .76);
    font-size: 14px;
}

.cart-page-content {
    width: min(100% - 32px, 1180px);
    margin-inline: auto;
    padding: 62px 0 88px;
}

.cart-page-heading {
    margin-bottom: 30px;
}

.cart-page-heading p {
    margin-bottom: 6px;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.cart-page-heading h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 40px);
    letter-spacing: -.04em;
}

#cart-content-area {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
    gap: 30px;
    align-items: start;
}

.cart-products-column {
    min-width: 0;
}

.cart-table-wrap {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cart-table th,
.cart-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.cart-table th {
    color: #526478;
    background: #f7f9fb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cart-table th:first-child {
    width: 48px;
}

.cart-table th:nth-child(2) {
    width: 84px;
}

.cart-table th:nth-child(4),
.cart-table th:nth-child(5) {
    width: 118px;
    text-align: center;
}

.cart-table th:last-child {
    width: 108px;
    text-align: right;
}

.cart-table tbody tr:last-child td {
    border-bottom: 0;
}

.page-cart-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #9aa7b4;
    background: transparent;
    border-radius: 8px;
}

.page-cart-remove:hover {
    color: #c23d3d;
    background: #fff1f1;
}

.page-cart-remove svg {
    width: 18px;
    height: 18px;
}

.page-cart-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    overflow: hidden;
    background: #f5f8fa;
    border: 1px solid #edf1f4;
    border-radius: 10px;
}

.page-cart-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-cart-name {
    color: var(--brand-dark);
    font-weight: 750;
    line-height: 1.4;
}

.page-cart-price {
    color: #405166;
    font-weight: 650;
    text-align: center;
}

.page-cart-quantity {
    display: grid;
    grid-template-columns: 34px 38px 34px;
    width: max-content;
    margin-inline: auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9e1e7;
    border-radius: 9px;
}

.page-cart-quantity button,
.page-cart-quantity input {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    padding: 0;
    border: 0;
}

.page-cart-quantity button {
    color: var(--muted);
    background: #fff;
}

.page-cart-quantity button:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.page-cart-quantity input {
    color: var(--ink);
    background: #f4f7f9;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    appearance: textfield;
}

.page-cart-quantity input::-webkit-inner-spin-button,
.page-cart-quantity input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.page-cart-quantity svg {
    width: 14px;
    height: 14px;
}

.page-cart-subtotal {
    color: var(--ink);
    font-weight: 800;
    text-align: right;
}

.cart-coupon-bar {
    padding: 16px;
    background: #f7f9fb;
    border-top: 1px solid var(--line);
}

.cart-coupon-bar > div > div {
    display: flex;
    gap: 10px;
}

.cart-coupon-bar input,
.mobile-coupon-bar input {
    width: 190px;
    min-height: 40px;
    padding: 9px 12px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #d6dfe6;
    border-radius: 9px;
    font-size: 13px;
}

.cart-coupon-bar input:focus,
.mobile-coupon-bar input:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 159, 131, .12);
}

.cart-coupon-bar button,
.mobile-coupon-bar button {
    min-height: 40px;
    padding: 9px 18px;
    color: #fff;
    background: var(--brand);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

.cart-coupon-bar button:hover,
.mobile-coupon-bar button:hover {
    background: var(--brand-dark);
}

.coupon-message {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.coupon-message.is-success {
    color: var(--brand-dark);
}

.coupon-message.is-error {
    color: #c13f3f;
}

#mobile-cart-list,
.mobile-coupon-bar {
    display: none;
}

.cart-totals-column {
    position: sticky;
    top: 96px;
}

.cart-totals-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.cart-totals-card > div:first-child {
    padding: 18px 22px;
    background: #f7f9fb;
    border-bottom: 1px solid var(--line);
}

.cart-totals-card h2 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
}

.cart-total-rows {
    display: grid;
    gap: 0;
    padding: 8px 22px 22px;
}

.cart-total-rows > div:not(.view-coupons) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    color: var(--muted);
    border-bottom: 1px solid #edf1f4;
    font-size: 13px;
}

#page-cart-discount-row,
#drawer-cart-discount-row {
    color: var(--brand-dark);
    font-weight: 750;
}

.cart-total-rows > .cart-shipping {
    display: grid;
}

.cart-shipping > div {
    padding: 9px 10px;
    color: #718092;
    background: #f3f6f8;
    border-radius: 8px;
    font-size: 11px;
}

.cart-total-rows > .cart-grand-total {
    color: var(--ink);
    border-bottom: 0;
    font-size: 17px;
    font-weight: 800;
}

#page-cart-total {
    color: var(--brand-dark);
    font-size: 22px;
}

.view-coupons {
    padding: 8px 0 14px;
}

.view-coupons button {
    width: 100%;
    padding: 11px 14px;
    color: #405166;
    background: #fff;
    border: 1px solid #d3dde4;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
}

.view-coupons button:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-color: #a8dacf;
}

.proceed-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    color: #fff;
    background: var(--brand);
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(15, 159, 131, .22);
    font-size: 13px;
    font-weight: 800;
}

.proceed-checkout:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
}

.proceed-checkout svg {
    width: 16px;
    height: 16px;
}

#empty-page-cart-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 330px;
    padding: 48px 24px;
    color: var(--muted);
    background: #fff;
    border: 1px dashed #cfd9e1;
    border-radius: 16px;
    text-align: center;
}

#empty-page-cart-msg svg {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    color: #cbd5de;
}

#empty-page-cart-msg p {
    margin-bottom: 22px;
    font-size: 17px;
    font-weight: 650;
}

#empty-page-cart-msg a {
    padding: 11px 22px;
    color: #fff;
    background: var(--brand);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

#empty-page-cart-msg a:hover {
    background: var(--brand-dark);
}

#coupon-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    background: rgba(11, 19, 32, .48);
    backdrop-filter: blur(3px);
    transition: opacity .25s ease;
}

#coupon-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(100%, 420px);
    height: 100%;
    background: #fff;
    box-shadow: -28px 0 72px rgba(17, 34, 52, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
}

#coupon-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

#coupon-drawer.is-open {
    transform: translateX(0);
}

.coupon-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}

.coupon-drawer-header h2 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
}

.coupon-drawer-header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--muted);
    background: #f0f3f6;
    border-radius: 9px;
}

.coupon-drawer-header svg {
    width: 18px;
    height: 18px;
}

.coupon-drawer-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    background: #f6f8fa;
}

.coupon-card {
    position: relative;
    overflow: hidden;
    padding: 20px 20px 20px 24px;
    background: #fff;
    border: 1px solid #bfe4dc;
    border-radius: 13px;
    box-shadow: var(--shadow-sm);
}

.coupon-card > div:first-child {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--brand);
}

.coupon-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.coupon-card-top > div > span {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 7px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
}

.coupon-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 26px;
    letter-spacing: -.03em;
}

.coupon-card h3 span {
    color: var(--muted);
    font-size: 12px;
}

.coupon-card-top button {
    padding: 7px 13px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.coupon-card-top button:hover {
    color: #fff;
    background: var(--brand);
}

.coupon-card-copy p {
    margin-bottom: 4px;
    color: #405166;
    font-size: 12px;
}

.coupon-card-copy p:nth-child(2) {
    color: var(--muted);
    font-size: 11px;
}

.coupon-card-copy p:last-child {
    margin: 9px 0 0;
    color: #95a1ae;
    font-size: 10px;
}

@media (max-width: 900px) {
    #cart-content-area {
        grid-template-columns: 1fr;
    }

    .cart-totals-column {
        position: static;
    }
}

@media (max-width: 700px) {
    .cart-table-wrap {
        display: none;
    }

    #mobile-cart-list {
        display: grid;
        gap: 12px;
    }

    .mobile-coupon-bar {
        display: grid;
        gap: 9px;
        margin-top: 14px;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .mobile-coupon-bar input {
        width: 100%;
    }

    .mobile-cart-card {
        position: relative;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        box-shadow: var(--shadow-sm);
    }

    .mobile-cart-card > .page-cart-remove {
        position: absolute;
        top: 11px;
        right: 11px;
    }

    .mobile-cart-product {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-right: 28px;
    }

    .mobile-cart-product .page-cart-image {
        flex-shrink: 0;
        width: 76px;
        height: 76px;
    }

    .page-cart-unit-price {
        display: block;
        margin-top: 5px;
        color: var(--muted);
        font-size: 12px;
    }

    .mobile-cart-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 14px;
        padding-top: 13px;
        border-top: 1px solid #edf1f4;
    }

    .mobile-cart-footer > div:first-child {
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--muted);
        font-size: 11px;
    }

    .mobile-cart-footer .page-cart-quantity {
        grid-template-columns: 30px 32px 30px;
        margin: 0;
    }

    .mobile-cart-subtotal {
        color: var(--ink);
        font-size: 13px;
        font-weight: 800;
    }
}

@media (max-width: 560px) {
    .cart-hero {
        min-height: 220px;
    }

    .cart-page-content {
        padding: 44px 0 64px;
    }

    .mobile-cart-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* About */
.about-page {
    background: var(--canvas);
}

.about-page .desktop-nav > a:first-child {
    color: #405166;
}

.about-page .desktop-nav > a.is-active,
.about-page .desktop-nav > a:hover {
    color: var(--brand-dark);
}

.about-page #mobile-menu a:first-child {
    color: #405166;
    background: transparent;
}

.about-page #mobile-menu a.is-active,
.about-page #mobile-menu a:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.about-main {
    padding-top: 72px;
    background: #fff;
}

.about-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 460px;
    overflow: hidden;
    background: #102337;
    border-radius: 0 0 32px 32px;
}

.about-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero > img:nth-of-type(2) {
    z-index: 1;
}

.about-hero > .about-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(90deg, rgba(7, 17, 30, .9), rgba(7, 25, 39, .4));
}

.about-hero > .about-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    width: min(100% - 32px, 1280px);
    min-height: 460px;
}

.about-hero-content > div {
    max-width: 780px;
}

.about-hero-content p:first-child {
    margin-bottom: 11px;
    color: #7ce0cc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.about-hero-content h1 {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: -.055em;
}

.about-hero-content h1 + p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
}

.about-story {
    padding: 88px 0;
}

.about-story > div,
.about-team > div {
    width: min(100% - 32px, 1160px);
}

.about-story-copy {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) minmax(0, 1.6fr);
    gap: 64px;
    align-items: start;
    margin-bottom: 46px;
}

.about-story-copy > div:first-child > p,
.about-section-heading > p,
#about-vision > div:last-child > p {
    margin-bottom: 7px;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.about-story-copy h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 15px;
    color: var(--ink);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.18;
    letter-spacing: -.04em;
}

.about-story-copy h2 span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 54px;
    height: 3px;
    background: var(--brand);
    border-radius: 999px;
}

.about-story-copy > div:last-child p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85;
    white-space: pre-line;
}

.about-story-image {
    height: 520px;
    overflow: hidden;
    background: #edf2f5;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.about-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-team {
    padding: 88px 0 96px;
    background: var(--canvas);
}

.about-section-heading {
    max-width: 680px;
    margin: 0 auto 48px;
    text-align: center;
}

.about-section-heading h2 {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -.04em;
}

.about-section-heading > span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 980px;
    margin-inline: auto;
}

.team-card {
    padding: 14px 14px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.team-card > div:first-child {
    aspect-ratio: 1 / 1;
    margin-bottom: 18px;
    overflow: hidden;
    background: #e7edf1;
    border-radius: 12px;
}

.team-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.team-card:hover img {
    transform: scale(1.045);
}

.team-card h3 {
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 18px;
}

.team-card p {
    min-height: 20px;
    margin-bottom: 13px;
    color: var(--muted);
    font-size: 12px;
}

.team-card > span {
    display: block;
    width: 30px;
    height: 3px;
    margin-inline: auto;
    background: var(--brand);
    border-radius: 999px;
    transition: width .25s ease;
}

.team-card:hover > span {
    width: 48px;
}

#about-vision {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    padding: 70px 16px;
    overflow: hidden;
    background: #e7f1f2;
}

#about-vision > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#about-vision > div:nth-child(2) {
    position: absolute;
    inset: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(235, 248, 246, .94), rgba(247, 251, 252, .8));
    backdrop-filter: blur(2px);
}

#about-vision > div:last-child {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
    text-align: center;
}

#about-vision h2 {
    margin-bottom: 15px;
    color: var(--ink);
    font-size: clamp(34px, 5vw, 50px);
    letter-spacing: -.05em;
}

#about-vision > div:last-child > span {
    margin-bottom: 28px;
    color: #536579;
    font-size: 15px;
    line-height: 1.75;
    white-space: pre-line;
}

#about-vision a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 24px;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(15, 159, 131, .22);
    font-size: 13px;
    font-weight: 800;
}

#about-vision a:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
}

#about-vision a svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 800px) {
    .about-story-copy {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .about-story-image {
        height: 400px;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .about-hero,
    .about-hero > .about-hero-content {
        min-height: 320px;
    }

    .about-story,
    .about-team {
        padding: 56px 0;
    }

    .about-story-image {
        height: 290px;
        border-radius: 14px;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    #about-vision {
        min-height: 430px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Community */
.community-page { background:#f7f6f2; color:#18201d; }
.community-shell { width:min(1060px,calc(100% - 40px)); margin:0 auto; padding:140px 0 90px; }
.community-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding-bottom:38px; border-bottom:1px solid #cfd3cf; }
.community-heading h1,.community-compose h1,.community-detail h1 { margin:8px 0 12px; max-width:760px; font-size:clamp(2.25rem,5vw,4.5rem); line-height:1.02; letter-spacing:-.045em; font-weight:600; }
.community-heading p,.community-compose header>p:last-child { max-width:600px; color:#59635f; font-size:1.05rem; }
.community-kicker { margin:0; color:#335f50!important; font-size:.78rem!important; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.community-primary { display:inline-flex; align-items:center; justify-content:center; gap:9px; flex:none; padding:13px 19px; border:1px solid #214d3e; border-radius:3px; background:#214d3e; color:#fff; font:inherit; font-weight:650; text-decoration:none; cursor:pointer; }
.community-primary:hover { background:#16382d; }
.community-primary:disabled { opacity:.55; cursor:not-allowed; }
.community-primary svg { width:17px; }
.community-list { border-bottom:1px solid #cfd3cf; }
.community-post-card { display:flex; justify-content:space-between; gap:32px; padding:32px 0; border-top:1px solid #cfd3cf; }
.community-post-card:first-child { border-top:0; }
.community-post-copy { min-width:0; flex:1; }
.community-meta { display:flex; gap:12px; color:#727b77; font-size:.82rem; }
.community-meta span { color:#27322e; font-weight:650; }
.community-post-card h2 { margin:10px 0 8px; font-size:1.55rem; letter-spacing:-.025em; }
.community-post-card h2 a { color:inherit; text-decoration:none; }
.community-post-card h2 a:hover { color:#245e49; }
.community-excerpt { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-width:720px; margin:0; color:#57615d; line-height:1.65; white-space:pre-line; }
.community-counts { display:flex; gap:20px; margin-top:18px; color:#69726e; font-size:.82rem; }
.community-counts span { display:flex; align-items:center; gap:6px; }
.community-counts button { font:inherit; }
.community-counts svg { width:15px; height:15px; }
.community-counts b { color:#303a36; }
.community-cover { width:180px; height:125px; flex:none; overflow:hidden; background:#e4e5e0; }
.community-cover img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.community-cover:hover img { transform:scale(1.025); }
.community-empty { padding:80px 20px; text-align:center; color:#626b67; }
.community-empty svg { width:34px; height:34px; }
.community-empty h2 { margin:14px 0 5px; color:#202925; }
.community-compose,.community-detail { max-width:840px; }
.community-back { display:inline-flex; align-items:center; gap:7px; margin-bottom:42px; color:#3e4945; text-decoration:none; font-size:.9rem; }
.community-back svg { width:16px; }
.community-form { margin-top:38px; padding:30px; border:1px solid #ced2cd; background:#fff; }
.community-form label { display:block; margin-bottom:24px; font-size:.9rem; font-weight:650; }
.community-form label>span { float:right; color:#858d89; font-size:.75rem; font-weight:400; }
.community-form input,.community-form textarea { box-sizing:border-box; width:100%; margin-top:9px; padding:13px 14px; border:1px solid #bcc3be; border-radius:2px; background:#fbfbf9; color:#18201d; font:inherit; resize:vertical; outline:none; }
.community-form input:focus,.community-form textarea:focus { border-color:#315e4e; box-shadow:0 0 0 3px rgba(49,94,78,.1); }
.community-upload { display:flex!important; align-items:center; gap:10px; width:max-content; margin:0!important; padding:12px 15px; border:1px dashed #87958f; cursor:pointer; }
.community-upload>span { float:none!important; color:#28342f!important; font-size:.9rem!important; font-weight:650!important; }
.community-upload small { color:#7b847f; font-weight:400; }
.community-previews { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.community-previews img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.community-form-message { min-height:20px; color:#a13d32; font-size:.85rem; }
.community-notice { margin-top:25px; padding:14px 16px; border-left:3px solid #b08437; background:#f2eadb; }
.community-detail>article { padding:38px 0; border-bottom:1px solid #cfd3cf; }
.community-detail>article h1 { font-size:clamp(2rem,4vw,3.5rem); }
.community-post-body,.community-reply p { line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.community-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0; }
.community-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; background:#e4e5e0; }
.community-replies { padding-top:38px; }
.community-replies h2 { margin:0 0 25px; font-size:1.45rem; }
.community-reply { padding:24px 0; border-top:1px solid #d5d8d4; }
.community-reply p { margin:12px 0 0; }
.community-no-replies { color:#69726e; }

@media (max-width:700px) {
    .community-shell { width:min(100% - 28px,1060px); padding-top:110px; }
    .community-heading { align-items:flex-start; flex-direction:column; gap:24px; }
    .community-post-card { gap:18px; }
    .community-cover { width:105px; height:90px; }
    .community-form { padding:20px; }
    .community-upload { box-sizing:border-box; width:100%; flex-wrap:wrap; }
    .community-upload small { width:100%; }
    .community-gallery { grid-template-columns:1fr; }
}

/* Community visual refinement: compact and consistent with the storefront */
.community-page { background:var(--canvas); color:var(--ink); }
.community-shell { width:min(1120px,calc(100% - 40px)); padding:118px 0 72px; }
.community-heading { align-items:center; padding:32px 36px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.community-heading h1,.community-compose h1,.community-detail h1 { margin:7px 0 9px; max-width:720px; font-size:clamp(2rem,4vw,3rem); line-height:1.15; letter-spacing:-.025em; font-weight:700; }
.community-heading p,.community-compose header>p:last-child { font-size:1rem; }
.community-kicker { color:var(--brand-dark)!important; letter-spacing:.08em; }
.community-primary { border-color:var(--brand-dark); border-radius:10px; background:var(--brand-dark); }
.community-primary:hover { background:var(--brand-deep); }
.community-list { margin-top:22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.community-post-card { padding:25px 30px; border-top:1px solid var(--line); }
.community-post-card { flex-wrap:wrap; }
.community-post-card:first-child { border-top:0; }
.community-post-card h2 { margin:9px 0 7px; font-size:1.25rem; letter-spacing:-.01em; }
.community-meta { color:#82909d; }
.community-meta span,.community-counts b { color:#405166; }
.community-excerpt { color:var(--muted); line-height:1.6; }
.community-counts { margin-top:14px; color:#82909d; }
.community-replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #82909d;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.community-replies-toggle:hover,
.community-replies-toggle[aria-expanded="true"] {
    color: var(--brand-dark);
}

.community-replies-toggle[aria-expanded="true"] svg {
    fill: rgba(15, 159, 131, .12);
}

.community-inline-replies {
    flex: 0 0 100%;
    margin-top: 6px;
    padding: 22px 0 2px;
    border-top: 1px solid var(--line);
}

.community-inline-replies-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 6px;
}

.community-inline-replies-head > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.community-inline-replies-head strong {
    color: var(--ink);
    font-size: .94rem;
}

.community-inline-replies-head > div span {
    color: #8a969f;
    font-size: .72rem;
}

.community-replies-collapse {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
    color: #667580;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: .76rem;
    font-weight: 650;
    cursor: pointer;
}

.community-replies-collapse:hover {
    color: var(--brand-dark);
}

.community-replies-collapse svg {
    width: 14px;
    height: 14px;
}

.community-inline-replies-status {
    padding: 18px 0 10px;
    color: #82909d;
    font-size: .8rem;
}

.community-inline-reply {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    padding: 16px 0;
    border-top: 1px solid #edf0f2;
}

.community-inline-reply-avatar {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 750;
}

.community-inline-reply-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.community-inline-reply-head strong {
    min-width: 0;
    overflow: hidden;
    color: #33444f;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-inline-reply-head time {
    flex: none;
    color: #95a0a8;
    font-size: .7rem;
}

.community-inline-reply p {
    margin: 5px 0 0;
    color: #5d6d78;
    font-size: .84rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.community-replies-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 8px;
    padding: 11px 14px;
    color: var(--brand-dark);
    background: #f5f9f8;
    border: 1px solid #dce8e4;
    border-radius: 9px;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.community-replies-more[hidden] {
    display: none;
}

.community-replies-more:hover {
    background: var(--brand-soft);
}

.community-replies-more:disabled {
    opacity: .55;
    cursor: wait;
}

.community-replies-more svg {
    width: 14px;
    height: 14px;
}
.community-cover { width:148px; height:104px; border-radius:10px; }
.community-empty { background:var(--surface); }
.community-compose,.community-detail { max-width:900px; }
.community-compose>header,.community-detail>article,.community-replies { padding:30px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.community-detail>article { border-bottom:1px solid var(--line); }
.community-form { margin-top:22px; border-color:var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.community-form input,.community-form textarea { border-color:#d8e0e6; border-radius:9px; background:#fff; }
.community-form input:focus,.community-form textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,159,131,.1); }
.community-upload { border-color:#b9c8c5; border-radius:9px; }
.community-gallery img { border-radius:10px; }
.community-replies { margin-top:20px; }
.community-reply { border-color:var(--line); }

@media (max-width:700px) {
    .community-shell { width:calc(100% - 28px); padding-top:96px; }
    .community-heading { padding:24px 20px; }
    .community-heading h1,.community-compose h1,.community-detail h1 { font-size:1.8rem; }
    .community-post-card { padding:20px; }
    .community-cover { width:92px; height:78px; }
    .community-inline-replies {
        margin-top: 2px;
        padding-top: 18px;
    }

    .community-inline-replies-head > div span {
        display: none;
    }

    .community-inline-reply {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
    }

    .community-inline-reply-avatar {
        width: 30px;
        height: 30px;
    }

    .community-inline-reply-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .community-compose>header,.community-detail>article,.community-replies { padding:22px 18px; }
}

/* Community two-column layout */
.community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 22px;
    margin-top: 22px;
}

.community-layout .community-list {
    margin-top: 0;
}

.community-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 30px;
    border-bottom: 1px solid var(--line);
}

.community-list-title h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.community-list-title p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
}

.community-list-title > span {
    flex: none;
    padding: 5px 10px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 650;
}

.community-sidebar {
    position: sticky;
    top: 94px;
    display: grid;
    gap: 16px;
}

.community-member-card,
.community-guide {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.community-member-card h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
}

.community-member-card > p {
    margin: 10px 0 20px;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.65;
}

.community-guest-icon {
    display: flex;
    width: 42px;
    height: 42px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: 12px;
}

.community-guest-icon svg {
    width: 20px;
}

.community-side-login,
.community-side-register,
.community-member-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 9px;
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
}

.community-side-login {
    color: #fff;
    background: var(--brand-dark);
}

.community-side-register {
    margin-top: 8px;
    color: #405166;
    border: 1px solid var(--line);
}

.community-member-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.community-member-head > div {
    min-width: 0;
}

.community-member-head p {
    margin: 4px 0 0;
    overflow: hidden;
    color: #82909d;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-avatar {
    display: flex;
    width: 46px;
    height: 46px;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--brand-dark);
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
}

.community-member-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 22px 0 16px;
    padding: 17px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.community-member-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.community-member-stats > div + div {
    border-left: 1px solid var(--line);
}

.community-member-stats strong {
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
}

.community-member-stats span {
    margin-top: 7px;
    color: var(--muted);
    font-size: .75rem;
}

.community-member-action {
    gap: 7px;
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.community-member-action svg {
    width: 16px;
}

.community-guide h3 {
    margin: 0 0 14px;
    font-size: .95rem;
}

.community-guide ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.9;
}

@media (max-width: 860px) {
    .community-layout {
        grid-template-columns: 1fr;
    }

    .community-sidebar {
        position: static;
        grid-row: 1;
    }

    .community-guide {
        display: none;
    }

    .community-member-card {
        padding: 20px;
    }
}

@media (max-width: 560px) {
    .community-list-title {
        padding: 19px 20px;
    }

    .community-list-title p {
        display: none;
    }
}