.site-notice {
  padding: 8px 20px;
  background: #493653;
  color: #f3eaf7;
  text-align: center;
  font-size: 12px;
  letter-spacing: .03em;
}

.admin-stats--four { grid-template-columns: repeat(4, 1fr); }
.stat-card-accent { background: #4a3953; color: #fff; }
.stat-card-accent span { color: #eadff0; }
.date-filter, .inline-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.date-filter .field, .inline-form .field { margin: 0; min-width: 165px; flex: 1; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.sales-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.sales-metric { min-height: 142px; padding: 20px; border: 1px solid #e8dfec; border-radius: 16px; background: #fcfaff; }
.sales-metric span, .sales-metric small { display: block; }
.sales-metric span { color: #766980; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.sales-metric strong { display: block; margin: 8px 0; color: #4a3953; font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); font-weight: 400; line-height: 1.1; }
.sales-metric small { color: #806f88; font-size: 12px; line-height: 1.55; }
.sales-metric-accent { border-color: #4a3953; background: #4a3953; }
.sales-metric-accent span, .sales-metric-accent small { color: #eadff0; }
.sales-metric-accent strong { color: #fff; }
.sales-ranking { margin-top: 28px; padding-top: 24px; border-top: 1px solid #ece5ef; }
.sales-ranking h2 { margin-bottom: 0 !important; }
.product-rank { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #efe7f3; color: #5d426b; font-size: 12px; font-weight: 700; }
.admin-help, .field-hint { display: block; color: #806f88; font-size: 12px; line-height: 1.65; }
.admin-form-section { padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid #ece5ef; }
.admin-form-section:last-of-type { border-bottom: 0; }
.admin-form-section h2, .admin-card h2 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 27px; }
.banner-preview-frame { width: min(100%, 620px); aspect-ratio: 16 / 7; max-height: 260px; overflow: hidden; margin: 0 0 12px; border: 1px solid #e5dbe9; border-radius: 14px; background: #f3edf5; }
.banner-preview { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner-preview-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; color: #806f88; font-size: 12px; line-height: 1.5; }
.button-danger { border-color: #e8c7cf !important; background: #fff5f6 !important; color: #9a4054 !important; }
.button-danger:hover { border-color: #cf8e9c !important; background: #fbe7eb !important; }
.product-preview { display: block; width: 130px; height: 130px; object-fit: cover; margin: 0 0 18px; border-radius: 12px; background: #f3edf5; }
.category-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.category-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 999px; background: #f3edf5; color: #4a3953; font-size: 13px; }
.category-chip small { color: #8a788f; font-size: 11px; }
.category-chip form { display: inline; }
.category-chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #ddcfe4; color: #593d63; cursor: pointer; font-size: 16px; line-height: 1; }
.category-create-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: end; gap: 14px; max-width: 760px; }
.category-create-form .field { min-width: 0; margin: 0; }
.category-create-form .button { min-width: 112px; min-height: 42px; align-self: end; white-space: nowrap; }
.order-toolbar, .order-filter, .order-row-actions, .order-detail-head { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.order-toolbar { justify-content: space-between; }
.order-filter .field { min-width: 180px; margin: 0; }
.order-filter .button { min-height: 42px; }
.order-status-form { display: flex; align-items: center; gap: 6px; min-width: 150px; }
.order-status-form select { min-width: 105px; padding: 7px 26px 7px 8px; font-size: 12px; }
.order-status-form .text-link, .order-row-actions .text-link { border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.text-link-danger { color: #9a4054 !important; }
.order-row-actions { align-items: center; gap: 10px; }
.order-row-actions form { margin: 0; }
.order-detail-head { justify-content: space-between; margin-bottom: 18px; }
.order-detail-head h2 { margin: 0; }
.order-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.order-detail-grid > div { padding: 16px; border-radius: 12px; background: #faf7fc; }
.order-detail-grid h3, .order-note h3 { margin: 0 0 8px; font-size: 14px; }
.order-detail-grid p, .order-note p { margin: 0; color: #705d78; line-height: 1.7; }
.order-tracking-form { display: flex; align-items: end; gap: 14px; margin: 0 0 20px; padding: 16px; border: 1px solid #e6dce9; border-radius: 12px; background: #fcfaff; }
.order-tracking-form .field { flex: 1; margin: 0; }
.order-tracking-form input { width: 100%; }
.order-delivery-form { display: flex; align-items: end; gap: 14px; margin: 0 0 20px; padding: 16px; border: 1px solid #e6dce9; border-radius: 12px; background: #fcfaff; }
.order-delivery-form .field { flex: 1; margin: 0; min-width: 0; }
.order-delivery-form [data-delivery-store-fields] { display: flex; flex: 2; gap: 14px; min-width: 0; }
.order-delivery-form [data-delivery-store-fields][hidden] { display: none; }
.order-delivery-form input { width: 100%; }
.shipping-method-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shipping-method-setting { padding: 16px; border: 1px solid #e6dce9; border-radius: 12px; background: #fcfaff; }
.shipping-method-setting__head { display: grid; gap: 10px; margin-bottom: 14px; color: #4c3a56; font-weight: 700; }
.check-label { display: inline-flex; align-items: center; gap: 8px; color: #60466e; font-size: 13px; font-weight: 700; cursor: pointer; }
.check-label input { width: 17px; height: 17px; accent-color: #5a4267; }
.shipping-method-setting .field, .shipping-free-threshold { margin: 0; }
.shipping-free-threshold { max-width: 360px; margin-top: 18px; }
.checkout-payment-methods { margin: 24px 0; padding: 18px; border: 1px solid #e6dce9; border-radius: 12px; }
.checkout-payment-methods legend { padding: 0 5px; color: #4c3a56; font-weight: 700; }
.checkout-payment-methods > .field-hint { margin: 0 0 12px; }
.checkout-payment-methods [data-payment-options] { display: grid; gap: 9px; }
.payment-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #e7ddea; border-radius: 10px; color: #4b3855; cursor: pointer; }
.payment-option:has(input:checked) { border-color: #8d709a; background: #faf6fc; }
.payment-option input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: #5a4267; }
.payment-option span, .payment-option small { display: block; }
.payment-option small { margin-top: 3px; color: #806f88; font-size: 12px; line-height: 1.55; }
.bank-transfer-instructions { display: grid; gap: 5px; margin-top: 14px; padding: 14px 16px; border-left: 3px solid #a885b6; background: #faf6fc; color: #60466e; font-size: 13px; line-height: 1.6; }
.bank-transfer-instructions code { width: fit-content; padding: 4px 6px; border-radius: 5px; color: #432f51; background: #efe5f3; }
.bank-transfer-instructions small { color: #786a81; }
.cart-summary-note { margin: 10px 0; color: #806f88; font-size: 12px; line-height: 1.55; }
.bank-transfer-report-card { margin: 24px 0; padding: 24px; border: 1px solid #e6dce9; border-radius: 16px; background: #fcfaff; }
.bank-transfer-report-card h2 { margin: 0 0 10px; color: #4a3953; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.bank-transfer-report-card > p { color: #705d78; line-height: 1.7; }
.transfer-report-form { margin-top: 18px; }
.transfer-report-actions { display: flex; gap: 10px; margin-top: 18px; }
.transfer-report-status { color: #765f2f; }
.bank-transfer-review { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 20px; padding: 18px; border: 1px solid #e6dce9; border-radius: 12px; background: #fcfaff; }
.bank-transfer-review .eyebrow { margin: 0 0 5px; }
.bank-transfer-review h3 { margin: 0 0 14px; font-size: 18px; }
.bank-transfer-review dl { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.bank-transfer-review dt { color: #856f90; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.bank-transfer-review dd { margin: 3px 0 0; color: #44344d; font-size: 13px; }
.tracking-lookup-link { display: inline-block; margin-top: 7px; color: #644773; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tracking-lookup-link:hover { color: #3f294c; }
.admin-tracking-number { color: #4b3855; font-size: 12px; }
.order-total-line { display: flex; justify-content: flex-end; gap: 24px; margin-top: 18px; font-size: 17px; }
.order-note { margin-top: 20px; padding: 16px; border-left: 3px solid #b99bc7; background: #faf7fc; }
.order-print-page { margin: 0; color: #34283b; background: #fff; font-family: "Noto Sans TC", sans-serif; }
.order-print { max-width: 860px; margin: 0 auto; padding: 44px; }
.order-print header, .order-print-grid { display: flex; justify-content: space-between; gap: 30px; }
.order-print header { padding-bottom: 24px; border-bottom: 1px solid #ded4e3; }
.order-print header h1 { margin: 6px 0 0; font-family: "DM Serif Display", "Noto Serif TC", serif; }
.order-print header > div:last-child { text-align: right; }
.order-print-grid { margin: 28px 0; }
.order-print-grid > div { flex: 1; }
.order-print h2 { margin: 0 0 8px; font-size: 14px; }
.order-print p { margin: 0; line-height: 1.8; }
.order-print table { width: 100%; border-collapse: collapse; }
.order-print th, .order-print td { padding: 11px 8px; border-bottom: 1px solid #e5dce9; text-align: left; }
.order-print-total { display: flex; justify-content: flex-end; gap: 28px; padding: 20px 8px; font-size: 18px; }
.order-print-note { margin-top: 16px; padding: 16px; background: #faf7fc; }
.print-actions { display: flex; gap: 10px; margin-top: 34px; }
@media print { .print-actions { display: none !important; } .order-print { max-width: none; padding: 0; } }
.customer-order-progress { display: grid; gap: 5px; min-width: 185px; }
.customer-order-progress small { color: #786a81; line-height: 1.5; }
.customer-order-status { display: inline-flex; width: fit-content; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.customer-order-status.is-pending { color: #765f2f; background: #f8eed5; }
.customer-order-status.is-processing { color: #315d6d; background: #dff0f2; }
.customer-order-status.is-exception { color: #985042; background: #f9e3de; }
.customer-order-status.is-closed { color: #476247; background: #e6f0e4; }
.customer-order-status.is-cancelled { color: #725d73; background: #eee8ef; }
.customer-tracking-number { display: inline-block; padding: 6px 8px; color: #432f51; border-radius: 6px; background: #f5eff7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: nowrap; }
.customer-carrier-label { display: block; margin-bottom: 5px; color: #796986; }
.customer-tracking-empty { color: #8b7e90; }
.pickup-store-map-actions { display: flex; margin-top: 9px; }
.pickup-store-map-actions[hidden], .pickup-store-map-link[hidden] { display: none; }
.pickup-store-map-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid #cfbdd6; border-radius: 8px; color: #543c60; background: #fbf8fc; font-size: 12px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.pickup-store-map-link:hover { border-color: #9d7fab; color: #3f294c; background: #f3ecf6; }
.pickup-store-map-link:focus-visible { outline: 2px solid #7a5989; outline-offset: 2px; }
.contact-captcha-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.contact-captcha-row input { width: min(150px, 100%); }
.contact-captcha-code { display: inline-flex; align-items: center; min-height: 42px; padding: 0 13px; border-radius: 8px; background: #eee3f2; color: #442d50; font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .18em; }
.contact-captcha-refresh { color: #624273; font-size: 13px; font-weight: 700; text-underline-offset: 3px; }
.contact-captcha-refresh:focus-visible { outline: 2px solid #7a5989; outline-offset: 2px; }
.admin-login-captcha small { display: block; margin-top: 8px; color: #766782; font-size: 12px; line-height: 1.6; }
.admin-help { margin: 0 0 18px; color: var(--muted); line-height: 1.7; }
.member-status-form, .member-delete-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.member-status-form select { min-width: 96px; }
.button-compact { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.button-danger { color: #fff; background: #9a3e54; border-color: #9a3e54; }
.button-danger:hover { color: #fff; background: #7f2d41; border-color: #7f2d41; }
.member-detail-trigger { white-space: nowrap; }
.member-profile-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(680px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 18px; color: #3f3147; background: #fff; box-shadow: 0 24px 70px rgba(52, 38, 61, .28); }
.member-profile-dialog::backdrop { background: rgba(47, 34, 55, .52); backdrop-filter: blur(2px); }
.member-profile-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 18px; border-bottom: 1px solid #ece5ef; }
.member-profile-dialog__header .eyebrow { margin: 0 0 6px; }
.member-profile-dialog__header h2 { margin: 0; font-family: var(--serif); font-size: 29px; font-weight: 400; }
.dialog-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #dfd4e4; border-radius: 50%; color: #594264; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.dialog-close:hover { color: #fff; border-color: #5b4268; background: #5b4268; }
.dialog-close:focus-visible, .password-toggle:focus-visible { outline: 2px solid #7a5989; outline-offset: 2px; }
.member-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: #eee7f1; }
.member-profile-grid > div { min-width: 0; padding: 16px 18px; background: #fff; }
.member-profile-grid dt { margin: 0 0 5px; color: #856f90; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.member-profile-grid dd { margin: 0; overflow-wrap: anywhere; color: #44344d; line-height: 1.55; }
.member-profile-dialog__footer { display: flex; justify-content: flex-end; padding: 18px 26px 24px; }
.password-change-fieldset { margin: 22px 0; padding: 18px; border: 1px solid #e6dce9; border-radius: 12px; }
.password-change-fieldset legend { padding: 0 5px; color: #4c3a56; font-weight: 700; }
.password-change-fieldset .field-hint { margin: 0 0 14px; }
.password-input { position: relative; }
.password-input input { width: 100%; padding-right: 64px; }
.password-toggle { position: absolute; top: 50%; right: 8px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 6px; transform: translateY(-50%); color: #60466e; background: #f2ebf5; font-size: 12px; font-weight: 700; cursor: pointer; }
.password-toggle:hover { color: #fff; background: #60466e; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.social-links-settings { margin: 24px 0; padding: 20px; border: 1px solid #e6dce9; border-radius: 14px; }
.social-links-settings legend { padding: 0 8px; color: #4c3a56; font-weight: 700; }
.social-links-settings > p { margin: 0 0 16px; color: #766782; font-size: 13px; line-height: 1.7; }
.social-links-settings label i { width: 1.1em; color: #654676; }
.footer-social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer-social-links a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; color: inherit; text-decoration: none; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.footer-social-links a:hover, .footer-social-links a:focus-visible { background: #fff; color: #654676; transform: translateY(-2px); }
.footer-social-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.newsletter-section { border-top: 1px solid #e7ddea; border-bottom: 1px solid #ddd0e4; background: linear-gradient(112deg, #f8f3fa 0%, #eee4f2 100%); }
.newsletter-section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr); align-items: center; gap: 52px; padding: 48px 0; }
.newsletter-section__eyebrow { margin: 0 0 9px; color: #886b96; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.newsletter-section h2 { margin: 0; color: #4a3854; font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); font-weight: 400; line-height: 1.12; }
.newsletter-section__copy > p:not(.newsletter-section__eyebrow) { max-width: 520px; margin: 12px 0 0; color: #75667d; font-size: 14px; line-height: 1.8; }
.newsletter-form { display: flex; gap: 8px; max-width: 420px; }
.newsletter-form input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; color: #3f3147; background: #fff; }
.newsletter-form button { padding: 10px 15px; border: 1px solid #fff; border-radius: 8px; color: #513a5d; background: #fff; font-weight: 700; cursor: pointer; }
.newsletter-form button:hover { color: #fff; background: transparent; }
.newsletter-form input:focus-visible, .newsletter-form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.newsletter-section__form { width: 100%; max-width: 460px; justify-self: end; }
.newsletter-section__form input { border-color: #d5c6dd; box-shadow: 0 4px 12px rgba(90, 66, 103, .06); }
.newsletter-section__form button { border-color: #5a4267; color: #fff; background: #5a4267; }
.newsletter-section__form button:hover { border-color: #493653; color: #fff; background: #493653; }
.newsletter-section__form input:focus-visible, .newsletter-section__form button:focus-visible { outline-color: #5a4267; }
.back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #dfd4e4; border-radius: 50%; color: #fff; background: #5a4267; box-shadow: 0 10px 25px rgba(59,42,68,.24); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease, background-color .18s ease; }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: #3f2d49; }
.back-to-top:focus-visible { outline: 2px solid #5a4267; outline-offset: 3px; }
.newsletter-admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: #786a81; font-size: 13px; }
.newsletter-admin-toolbar nav { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter-admin-toolbar a { padding: 7px 10px; border-radius: 999px; color: #60466e; background: #f4eef6; font-weight: 700; text-decoration: none; }
.newsletter-admin-toolbar a.is-active { color: #fff; background: #5a4267; }
.newsletter-status--active { color: #476247; background: #e6f0e4; }
.newsletter-status--unsubscribed { color: #725d73; background: #eee8ef; }
.transfer-proof-field { margin-top: 16px; padding: 15px; border: 1px dashed #cdbbd5; border-radius: 10px; background: #faf7fc; }
.transfer-proof-field input[type="file"] { max-width: 100%; margin-top: 7px; color: #5b4665; font-size: 13px; }
.transfer-proof-field .field-hint { margin-top: 8px; }
.pending-transfer-panel { border: 1px solid #ead29c; background: linear-gradient(135deg, #fffdf8 0%, #fff7e7 100%); }
.pending-transfer-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.pending-transfer-panel__head .eyebrow { margin: 0 0 5px; color: #9a6c1d; }
.pending-transfer-panel__head h2 { margin-bottom: 5px; color: #63430e; }
.pending-transfer-panel__head p { margin: 0; color: #80632f; font-size: 13px; line-height: 1.6; }
.pending-transfer-count, .pending-transfer-badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
.pending-transfer-count { padding: 9px 12px; color: #fff; background: #a56520; }
.pending-transfer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pending-transfer-item { display: grid; gap: 7px; padding: 15px; border: 1px solid #ead9b0; border-radius: 11px; color: #563f1e; background: rgba(255,255,255,.74); text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.pending-transfer-item:hover, .pending-transfer-item:focus-visible { border-color: #b98232; box-shadow: 0 6px 18px rgba(126, 82, 18, .1); transform: translateY(-2px); }
.pending-transfer-item:focus-visible { outline: 2px solid #8f5b17; outline-offset: 2px; }
.pending-transfer-item strong { color: #513910; }
.pending-transfer-item span:not(.pending-transfer-badge), .pending-transfer-item small { color: #80632f; font-size: 12px; line-height: 1.5; }
.pending-transfer-badge { padding: 6px 8px; color: #7b4811; background: #ffe4a9; letter-spacing: .02em; }
.transfer-proof-review { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 18px; border: 1px solid #d8c9df; border-radius: 12px; background: #fbf9fc; }
.transfer-proof-review .eyebrow { margin: 0 0 5px; }
.transfer-proof-review h3 { margin: 0 0 7px; font-size: 18px; }
.transfer-proof-review p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .back-to-top, .footer-social-links a { transition: none; } }
@media (max-width: 480px) { .contact-captcha-row input { width: 100%; } }
.empty-cell { color: #806f88; text-align: center; padding: 24px !important; }
.hero-media--image { width: 100%; min-height: 0 !important; height: clamp(300px, 38vw, 520px); max-height: 520px; overflow: hidden; border-radius: 26px; }
.hero-banner-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 900px) { .admin-stats--four, .analytics-grid { grid-template-columns: 1fr 1fr; } .sales-summary { grid-template-columns: 1fr 1fr; } .sales-metric-accent { grid-column: 1 / -1; } .hero-media--image { height: clamp(280px, 58vw, 430px); max-height: 430px; } }
@media (max-width: 680px) { .admin-stats--four, .analytics-grid, .sales-summary, .order-detail-grid, .member-profile-grid { grid-template-columns: 1fr; } .sales-metric-accent { grid-column: auto; } .date-filter, .inline-form { align-items: stretch; } .date-filter .field, .inline-form .field { min-width: 100%; } .date-filter .button, .inline-form .button { width: 100%; text-align: center; } .banner-preview-frame { width: 100%; aspect-ratio: 16 / 9; max-height: none; } .hero-media--image { height: 285px; max-height: 285px; border-radius: 20px; } .banner-preview-actions .button { width: auto; } .category-create-form { grid-template-columns: 1fr; gap: 12px; } .category-create-form .button { width: 100%; } .order-toolbar, .order-filter, .order-tracking-form, .order-delivery-form { align-items: stretch; } .order-toolbar > .button, .order-filter .button, .order-filter .field, .order-tracking-form .button, .order-delivery-form .button { width: 100%; } .order-delivery-form, .order-delivery-form [data-delivery-store-fields] { display: grid; grid-template-columns: 1fr; } .order-status-form { min-width: 180px; } .order-print { padding: 22px; } .order-print header, .order-print-grid { display: block; } .order-print header > div:last-child { margin-top: 16px; text-align: left; } .order-print-grid > div + div { margin-top: 22px; } .customer-order-progress { min-width: 160px; } .member-profile-dialog__header { padding: 20px 20px 16px; } .member-profile-dialog__footer { padding: 16px 20px 20px; } .newsletter-section__inner { grid-template-columns: 1fr; gap: 24px; padding: 38px 0; } .newsletter-section__form { justify-self: stretch; max-width: none; } }
@media (max-width: 420px) { .newsletter-section__form { flex-direction: column; } .newsletter-section__form button { width: 100%; } }
@media (max-width: 900px) { .shipping-method-settings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .shipping-method-settings, .bank-transfer-review dl, .pending-transfer-list { grid-template-columns: 1fr; } .bank-transfer-review, .transfer-proof-review { display: grid; align-items: stretch; } .bank-transfer-review .button, .transfer-proof-review .button { width: 100%; } .transfer-report-actions { flex-wrap: wrap; } .pending-transfer-panel__head { display: grid; } }

.account-status { display: inline-flex; align-items: baseline; gap: 5px; max-width: 150px; color: #6f587a; font-size: 13px; }
.account-status strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #493653; font-weight: 700; }
.account-status small { flex: 0 0 auto; color: #9a879f; font-size: 10px; }
@media (max-width: 900px) { .account-status { max-width: 104px; } }
@media (max-width: 680px) { .account-status { max-width: 92px; font-size: 12px; } .account-status small { display: none; } }
@media (max-width: 420px) { .account-status { max-width: 66px; } }

/* Member favorites and auth form interaction */
.favorite-form { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 10px 0 0; }
.favorite-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid #d9c9e0; border-radius: 999px; color: #654676; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.favorite-button > span:first-child { color: #9d7aac; font-size: 19px; line-height: 1; transition: transform .18s var(--ease); }
.favorite-button:hover, .favorite-button:focus-visible { border-color: #654676; color: #fff; background: #654676; }
.favorite-button:hover > span:first-child, .favorite-button:focus-visible > span:first-child { color: #fff; transform: scale(1.12); }
.favorite-button.is-favorited { border-color: #654676; color: #fff; background: #654676; }
.favorite-button.is-favorited > span:first-child { color: #f8dce9; }
.favorite-button:disabled { cursor: wait; opacity: .62; }
.favorite-feedback { min-width: 0; color: #796986; font-size: 11px; line-height: 1.4; }
.favorite-feedback.is-error { color: #a24c62; }
.detail-copy > .favorite-form { margin-top: 16px; }
.product-card > .favorite-form { padding: 0 18px; }
.favorite-grid { align-items: start; }
.account-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.account-intro { margin: 6px 0 0; color: var(--muted); }
.favorite-count { flex: 0 0 auto; padding: 8px 13px; border-radius: 999px; color: #654676; background: #f1eaf4; font-size: 12px; font-weight: 700; }
.favorite-empty { display: grid; justify-items: center; gap: 10px; margin-top: 28px; padding: 65px 24px; text-align: center; }
.favorite-empty h2 { margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 400; }
.favorite-empty p { max-width: 430px; margin: 0 0 10px; color: var(--muted); }
.favorite-empty-icon { color: #9b7daa; font-size: 56px; line-height: 1; }
.auth-captcha-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.auth-captcha-row input { width: min(180px, 100%); text-transform: uppercase; letter-spacing: .12em; }
.auth-captcha-code { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 10px; color: #4d3858; background: var(--lav); font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .22em; }
.auth-form-status { min-height: 22px; margin: 16px 0 0; color: #9b4058; font-size: 13px; line-height: 1.6; }
.auth-form-status:empty { min-height: 0; margin-top: 0; }
.field.is-invalid input { border-color: #bd647b; background: #fff8f9; }
.field.is-valid input { border-color: #7da080; }
.field-error { display: block; min-height: 20px; margin-top: 5px; color: #a24c62; font-size: 12px; line-height: 1.45; }
.field-error:empty { min-height: 0; margin-top: 0; }
.field-success { display: block; min-height: 20px; margin-top: 5px; color: #58785d; font-size: 12px; line-height: 1.45; }
.auth-box [aria-invalid="true"] { outline: 2px solid rgba(189, 100, 123, .18); outline-offset: 1px; }
.auth-submit { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 9px; }
.auth-submit[aria-busy="true"] { cursor: wait; opacity: .82; }
.auth-submit[aria-busy="true"] .button-label { opacity: .72; }
.auth-spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (max-width: 680px) { .account-heading-row { align-items: flex-start; flex-direction: column; gap: 10px; } .favorite-count { align-self: flex-start; } .favorite-form { flex-wrap: wrap; } .product-card > .favorite-form { padding: 0 14px; } }
@media (prefers-reduced-motion: reduce) { .favorite-button, .favorite-button > span:first-child, .auth-spinner { transition: none; animation: none; } }

.favorite-notification-form { margin: 10px 0 0; padding: 12px 14px; border-top: 1px solid rgba(91,69,98,.12); color: var(--muted); font-size: 12px; }
.favorite-notification-form fieldset { display: grid; gap: 7px; margin: 0 0 8px; padding: 0; border: 0; }
.favorite-notification-form legend { margin-bottom: 3px; color: var(--ink); font-size: 12px; font-weight: 700; }
.favorite-notification-form label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.favorite-notification-form input[type="checkbox"] { accent-color: #5b4562; }
.favorite-notification-form .text-link { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
@media (max-width: 600px) { .favorite-notification-form { padding-inline: 10px; } }

.favorite-delete-form { margin: 8px 0 0; }
.favorite-delete-button { width: 100%; padding: 9px 12px; border: 1px solid rgba(120, 70, 86, .24); border-radius: 999px; background: transparent; color: #805467; font: inherit; font-size: 12px; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.favorite-delete-button:hover { border-color: #805467; background: #fbf3f5; }
.favorite-delete-button:focus-visible { outline: 3px solid rgba(128, 84, 103, .28); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .favorite-delete-button { transition: none; } }