/* Cart, checkout and account screens share the existing TKM visual system. */
.commerce-page,.auth-page {background:#f6f8fc; color:#24334e; padding:0 0 70px}
.commerce-container {width:min(1260px,calc(100% - 48px)); margin-inline:auto}
.commerce-page .breadcrumb,.auth-page .breadcrumb {padding-block:24px; margin:0; font-size:11px}
.commerce-heading {display:flex; align-items:center; justify-content:space-between; gap:20px; margin:27px 0 29px}
.commerce-eyebrow {display:block; font-size:9px; letter-spacing:.16em; font-weight:600; color:#6982ac; margin-bottom:10px}
.commerce-heading h1 {font-size:32px; letter-spacing:-1px; color:#172d50; margin:0 0 8px}
.commerce-heading p {font-size:12px; color:#79869a; margin:0}
.demo-pill {display:inline-flex; align-items:center; gap:6px; flex:none; padding:5px 10px; color:#79869a; border:1px solid #dce3ed; background:#fff; font-size:9px; border-radius:6px}
.demo-pill::before {content:''; width:5px; height:5px; border-radius:50%; background:#d2a849}
.purchase-steps {display:flex; align-items:center; list-style:none; padding:17px 24px; margin:0; border:1px solid #e0e6f0; background:white; border-radius:14px; gap:0}
.purchase-steps li {flex:1; display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; font-weight:500; color:#9aa5b7}
.purchase-steps li+li {border-left:1px solid #e7ebf2}
.purchase-steps li>span {display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#f0f3f8; font-size:11px}
.purchase-steps .is-current {color:#254daa; font-weight:600}
.purchase-steps .is-current>span {color:white; background:#315ac0; box-shadow:0 3px 8px #315ac026}
.purchase-steps .is-done {color:#3e836d}
.purchase-steps .is-done>span {background:#e9f5ef}
.purchase-steps .icon {width:16px; height:16px}
.commerce-layout {display:grid; grid-template-columns:minmax(0,1fr) 345px; gap:25px; align-items:start}
.cart-panel,.order-summary,.checkout-panel,.auth-form-card {border:1px solid #e0e6f0; background:#fff; border-radius:18px; box-shadow:0 7px 24px #213b6b05}
.cart-panel-heading {display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid #edf0f5; padding:23px 25px}
.cart-panel-heading h2 {font-size:17px; color:#22375a; display:flex; align-items:center; gap:8px}
.cart-panel-heading h2>span {display:grid; place-items:center; background:#edf2ff; color:#4264ab; min-width:23px; height:23px; border-radius:6px; font-size:10px}
.cart-panel-heading>span {font-size:10px; color:#8d99ad}
.cart-product {display:grid; grid-template-columns:82px minmax(0,1fr) auto; gap:19px; padding:25px; align-items:center; border-bottom:1px solid #edf0f5}
.cart-product-image {display:block; border-radius:9px; overflow:hidden; background:#f5f7fa}
.cart-product-image img {width:82px; height:108px; object-fit:contain}
.cart-product-copy .product-kind {display:inline-flex; padding:3px 7px; color:#4b6eaf; background:#eef4ff; border-radius:4px; font-size:8px; margin-bottom:7px}
.cart-product-copy h3 {font-size:13px; line-height:1.65; font-weight:600; color:#253a5e; max-width:430px}
.cart-product-copy h3 a:hover {color:#315ac0}
.cart-product-copy>p {color:#8a95a8; font-size:10px; margin:5px 0 12px}
.cart-quantity {display:inline-flex; align-items:center; border:1px solid #dce3f0; border-radius:7px; overflow:hidden; height:32px}
.cart-quantity button {width:31px; height:32px; font-size:17px; color:#39547c; background:#f9faff}
.cart-quantity button:hover {background:#eaf0fc}
.cart-quantity output {min-width:31px; padding:0 4px; text-align:center; font-size:11px; font-weight:600}
.cart-product-price {display:flex; flex-direction:column; align-items:flex-end; gap:15px}
.cart-product-price strong {font-size:17px; color:#213d77; font-weight:600; white-space:nowrap}
.cart-remove {font-size:10px; color:#9b6d79; padding:4px 0}
.cart-remove:hover {color:#b53d53; text-decoration:underline}
.coupon-form {padding:23px 25px; background:#fafbfe; border-radius:0 0 18px 18px}
.coupon-form>label {display:block; margin-bottom:10px; font-size:12px; font-weight:600; color:#405879}
.coupon-controls {display:flex; gap:10px; max-width:470px}
.coupon-controls input {flex:1; min-width:0; width:100%; border:1px solid #d4deef; border-radius:9px; background:white; color:#2d4569; padding:12px 14px; font:inherit; font-size:12px; outline-offset:2px}
.coupon-controls input::placeholder {color:#95a1b5}
.coupon-controls input[aria-invalid="true"] {border-color:#bd7180}
.coupon-controls button {flex:none; min-height:44px; padding:12px 18px; font-size:11px}
.coupon-message {font-size:10px; line-height:1.8; color:#9b5366}
.coupon-message:not(:empty) {margin-top:12px}
.order-sidebar {position:sticky; top:194px; min-width:0}
.order-summary {padding:25px}
.summary-heading {display:flex; align-items:center; justify-content:space-between; margin-bottom:23px}
.summary-heading h2 {font-size:18px; letter-spacing:-.4px; color:#263c60}
.summary-heading>.icon {width:20px; height:20px; color:#91a2bf}
.summary-line {display:flex; justify-content:space-between; gap:15px; font-size:11px; color:#7a879c; margin-bottom:15px}
.summary-line strong {color:#465975; font-weight:500; white-space:nowrap}
.summary-total {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 0; margin-top:18px; border-top:1px solid #e8edf5; color:#2a4062; font-size:12px}
.summary-total strong {font-size:24px; letter-spacing:-.8px; color:#20418e; font-weight:600}
.commerce-primary,.commerce-secondary {display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 20px; min-height:47px; border-radius:9px; font-size:12px; font-weight:600; line-height:1.5; text-align:center; transition:background .18s,box-shadow .18s}
.commerce-primary {color:white; background:linear-gradient(110deg,#315cc1,#274aab); box-shadow:0 4px 10px #315cc11a}
.commerce-primary:hover {background:#254aa4; box-shadow:0 5px 14px #315cc12a}
.commerce-primary .icon,.commerce-secondary .icon {width:17px; height:17px}
.commerce-secondary {color:#355798; background:white; border:1px solid #cfdaf0}
.commerce-secondary:hover {background:#eff4ff}
.order-summary>.commerce-primary {width:100%}
.continue-shopping {display:block; text-align:center; font-size:10px; color:#7b8ba5; margin:14px 0 20px}
.summary-foot {display:flex; gap:10px; align-items:center; padding-top:20px; border-top:1px solid #e9edf5; color:#6f819e; font-size:10px}
.summary-foot>.icon {color:#688bc4; width:23px; height:23px}
.summary-foot strong {font-weight:400; font-size:9px; color:#9aa4b5}
.commerce-support {display:flex; align-items:center; justify-content:center; gap:11px; margin-top:19px; font-size:10px; color:#8c9ab0}
.commerce-support strong {display:block; font-weight:400}
.commerce-support a {display:inline-block; color:#405d8f; font-size:12px; font-weight:600; margin-top:3px}
.commerce-support>.icon {width:24px; height:24px; color:#6e88b4}
.commerce-demo-note {font-size:9px; color:#8b96aa; line-height:1.8; text-align:center; margin:20px 0 0}
.commerce-empty {grid-column:1/-1; padding:58px 20px; border:1px solid #e0e6f0; border-radius:18px; background:#fff; text-align:center}
.empty-icon,.result-check {display:grid; place-items:center; width:70px; height:70px; margin:0 auto 22px; border-radius:22px; background:#edf3ff; color:#446bc0}
.empty-icon>.icon {width:31px; height:31px}
.commerce-empty h2 {font-size:24px; color:#284267; letter-spacing:-.5px; margin-bottom:12px}
.commerce-empty p {font-size:12px; color:#8190a6; margin-bottom:25px}
.checkout-login {display:flex; align-items:center; gap:12px; padding:16px 20px; border:1px solid #d7e3fb; border-radius:12px; color:#5b739c; background:#eef4ff; margin-bottom:18px}
.checkout-login>.icon {width:23px; height:23px}
.checkout-login p {font-size:12px}
.checkout-login a {color:#315ac0; font-weight:600; margin-left:4px}
.checkout-login small {display:block; font-size:10px; margin-top:3px; color:#8b9bb4}
.checkout-panel {padding:28px}
.checkout-panel-title {display:flex; gap:14px; align-items:center; margin-bottom:27px}
.checkout-panel-title>span {display:grid; place-items:center; width:37px; height:37px; border:1px solid #dce6fa; background:#f0f4fd; border-radius:10px; color:#4e72ba; font-size:12px; font-weight:600; flex:none}
.checkout-panel-title h2 {font-size:18px; color:#263e62; letter-spacing:-.35px}
.checkout-panel-title p {font-size:10px; color:#8c99ad; margin-top:5px}
.commerce-fields {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 17px; border:0; padding:0; margin:0; min-width:0}
.commerce-field {display:flex; flex-direction:column; gap:7px; min-width:0; font-size:11px; font-weight:500; color:#4c607f}
.field-full {grid-column:1/-1; min-width:0}
.commerce-field input,.commerce-field textarea {display:block; width:100%; min-width:0; padding:12px 13px; min-height:46px; border:1px solid #dce3ee; border-radius:8px; background:#fbfcff; color:#2c4061; font:inherit; font-weight:400; outline:0; transition:border-color .15s,box-shadow .15s}
.commerce-field textarea {resize:vertical; line-height:1.7}
.commerce-field input::placeholder,.commerce-field textarea::placeholder {color:#a5aec0; font-weight:400}
.commerce-field input:focus,.commerce-field textarea:focus {border-color:#7695d4; background:#fff; box-shadow:0 0 0 3px #315ac00e}
.commerce-field input:user-invalid,.commerce-field textarea:user-invalid {border-color:#cc7080}
.checkout-actions {display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:27px; padding-top:23px; border-top:1px solid #edf0f6}
.checkout-actions>a {font-size:11px; color:#7f8da4}
.billing-review {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding:15px 19px; border:1px solid #cfe8df; background:#f0f8f5; border-radius:11px; color:#53826f; font-size:11px}
.billing-review>div {display:flex; align-items:center; gap:9px}
.billing-review .icon {width:18px; height:18px}
.billing-review button {font-size:10px; font-weight:600; color:#39745e; text-decoration:underline; text-underline-offset:3px}
.payment-options {display:grid; grid-template-columns:1fr 1fr; gap:13px; border:0; padding:0; margin:0 0 24px}
.payment-choice {display:flex; align-items:center; gap:10px; padding:16px 13px; border:1px solid #e0e6f0; border-radius:11px; cursor:pointer; color:#8e9cb0}
.payment-choice:has(input:checked) {border-color:#7e9edc; background:#f1f5ff; color:#3a5f9f; box-shadow:0 0 0 2px #315ac009}
.payment-choice input {accent-color:#315ac0; margin:0; width:14px; height:14px}
.payment-choice>.icon {width:22px; height:22px}
.payment-choice strong {display:block; font-size:11px; font-weight:600}
.payment-choice small {display:block; font-size:9px; color:#8799b4; margin-top:4px}
.payment-choice:last-child small {color:#419075}
.demo-card-banner {display:flex; align-items:center; justify-content:space-between; gap:15px; border-radius:8px; background:#f7f8fc; padding:12px; margin-bottom:18px; font-size:9px; color:#8d99ad}
.demo-card-banner>span {display:flex; align-items:center; gap:8px}
.demo-card-banner .icon {width:18px; height:18px}
.demo-card-banner button {color:#4266aa; font-size:9px; font-weight:600; white-space:nowrap; text-decoration:underline}
.field-help {font-size:9px; color:#909bb0; margin-top:10px}
.transfer-panel {text-align:center; padding:26px 22px; background:#f8fbfa; border:1px solid #deeee7; border-radius:12px}
.transfer-panel>.icon {width:35px; height:35px; color:#6c9c87; margin-bottom:12px}
.transfer-panel h3 {font-size:16px; color:#3f6f5d; margin-bottom:9px}
.transfer-panel p {font-size:11px; color:#7b958b; line-height:1.9}
.transfer-panel>span {display:block; font-size:9px; color:#49856e; margin-top:17px}
.commerce-check {display:flex; align-items:flex-start; gap:10px; margin:23px 0 0; font-size:10px; color:#8995a8; line-height:1.9}
.commerce-check input {accent-color:#315ac0; flex:none; margin:3px 0 0; width:15px; height:15px}
.commerce-check button {padding:0; display:inline; font:inherit; font-weight:500; color:#4b6faa; text-decoration:underline; text-underline-offset:2px}
.form-message {color:#b74d64; font-size:11px; line-height:1.7}
.form-message:not(:empty) {margin:15px 0}
.payment-submit {width:100%; margin-top:20px}
.payment-submit>span {margin-left:auto; font-size:13px; white-space:nowrap}
.checkout-item {display:flex; align-items:center; gap:11px; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #edf0f6}
.checkout-item img {width:46px; height:60px; object-fit:contain; border-radius:5px; background:#f8f9fc}
.checkout-item h3 {font-size:10px; line-height:1.7; color:#526681; font-weight:500}
.checkout-item small {display:block; font-size:9px; color:#97a3b5; margin-top:3px}
.commerce-result {max-width:740px; margin:0 auto; padding:48px 35px; background:#fff; border:1px solid #dfe6f1; border-radius:20px; text-align:center}
.result-check {background:#eaf6ef; color:#398d67; border-radius:50%; width:63px; height:63px}
.result-check .icon {width:29px; height:29px}
.commerce-result h2 {font-size:28px; color:#253d65; letter-spacing:-.6px}
.commerce-result>p {font-size:12px; line-height:1.9; margin:15px 0 24px; color:#8290a5}
#checkout-result-summary {max-width:350px; margin:0 auto 22px}
.result-actions {display:flex; justify-content:center; flex-wrap:wrap; gap:13px}
.auth-page {padding:36px 0 56px}
.auth-layout {width:100%; max-width:460px; margin:0 auto; border-radius:16px; border:1px solid #e1e7f1; background:#fff; box-shadow:0 6px 22px #233f6a06}
.auth-form-card {border:0; border-radius:16px; box-shadow:none; padding:28px 32px}
.auth-tabs {display:flex; gap:0; margin:0 0 24px; border-bottom:1px solid #e6ebf4}
.auth-tabs a {flex:1; text-align:center; padding:0 8px 13px; font-size:13px; color:#7a8aa3; position:relative}
.auth-tabs a.active {color:#315bb2; font-weight:600}
.auth-tabs a.active::after {content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:#315bb2}
.auth-form-card h1 {font-size:25px; color:#243a60; letter-spacing:-.6px; margin:0 0 8px}
.auth-intro {font-size:12px; line-height:1.7; color:#8190a7; margin-bottom:24px}
.auth-form-card .commerce-fields {gap:18px 14px}
.auth-form-card .commerce-field {font-size:12px}
.auth-form-card .commerce-field input {font-size:14px; min-height:46px}
.auth-form-card .commerce-check {font-size:10px}
.auth-form-card .auth-submit {font-size:13px}
.password-wrap {position:relative}
.password-wrap input {padding-right:45px}
.password-toggle {position:absolute; right:6px; top:4px; bottom:4px; width:34px; display:grid; place-items:center; color:#9aa8c0; border-radius:6px}
.password-toggle:hover {background:#edf2fc; color:#4768a7}
.password-toggle .icon {width:18px; height:18px}
.forgot-link {display:block; margin:12px 0 0 auto; padding:3px 0; font-size:11px; color:#5878b2}
.auth-submit {width:100%; margin-top:19px}
.auth-switch {font-size:11px; text-align:center; color:#8190a7; margin-top:22px; padding-top:20px; border-top:1px solid #edf0f6}
.auth-switch a {color:#476cae; font-weight:600; margin-left:4px}
.auth-result {text-align:center; padding:24px 0}
.auth-result h1 {font-size:24px}
.auth-result>p {font-size:12px; color:#8292aa; line-height:1.9; margin:15px 0 26px}
.auth-result>.commerce-primary {width:100%}
.auth-retry {display:block; margin:19px auto 0; color:#7188ac; font-size:11px}
.password-dialog {padding:33px; width:min(440px,calc(100% - 32px)); border:1px solid #dbe4f2; border-radius:18px; color:#294163; box-shadow:0 25px 80px #10254a3d}
.password-dialog::backdrop {background:#172b4f70; backdrop-filter:blur(3px)}
.password-dialog-icon {display:grid; place-items:center; width:43px; height:43px; background:#edf3ff; color:#4a72bd; border-radius:12px; margin-bottom:20px}
.password-dialog h2 {font-size:23px; color:#284268; letter-spacing:-.5px}
.password-dialog>p {font-size:11px; color:#8c9bb2; line-height:1.9; margin:11px 0 23px}
.password-dialog .commerce-primary {width:100%; margin-top:18px}
.password-dialog #password-result {color:#4d826f; padding:16px; border-radius:9px; background:#f1f8f5; margin-bottom:0}
@media(max-width:1050px) {
  .commerce-layout {grid-template-columns:minmax(0,1fr) 300px; gap:18px}
  .cart-product {grid-template-columns:65px minmax(0,1fr); gap:15px; padding:20px}
  .cart-product-image img {width:65px; height:90px}
  .cart-product-price {grid-column:2; flex-direction:row; justify-content:space-between; align-items:center}
  .order-summary {padding:21px}
  .checkout-panel {padding:23px}
  .payment-choice {padding:13px 10px; gap:7px}
  .payment-choice>.icon {display:none}
}
@media(max-width:800px) {
  .commerce-layout {grid-template-columns:minmax(0,1fr)}
  .order-sidebar {position:static}
  .order-summary {padding:24px}
  .cart-product {grid-template-columns:75px minmax(0,1fr) auto}
  .cart-product-image img {width:75px; height:102px}
  .cart-product-price {grid-column:auto; flex-direction:column; align-items:flex-end}
}
@media(max-width:600px) {
  .commerce-container {width:calc(100% - 32px)}
  .commerce-page,.auth-page {padding-bottom:35px}
  .commerce-page .breadcrumb,.auth-page .breadcrumb {padding-block:18px; font-size:10px}
  .purchase-steps {padding:14px 9px; border-radius:11px}
  .purchase-steps li {gap:6px; font-size:10px}
  .purchase-steps li>span {width:23px; height:23px; font-size:10px}
  .commerce-heading {margin:25px 0 22px; align-items:flex-start; flex-direction:column; gap:12px}
  .commerce-heading h1 {font-size:26px; letter-spacing:-.7px}
  .commerce-heading p {font-size:11px; line-height:1.8}
  .commerce-eyebrow {font-size:8px; margin-bottom:8px}
  .commerce-heading .demo-pill {font-size:8px}
  .cart-panel,.order-summary,.checkout-panel {border-radius:13px}
  .cart-panel-heading {padding:18px}
  .cart-panel-heading h2 {font-size:15px}
  .cart-panel-heading>span {font-size:9px}
  .cart-product {grid-template-columns:68px minmax(0,1fr); gap:12px; padding:20px 17px}
  .cart-product-image img {width:68px; height:91px}
  .cart-product-copy h3 {font-size:12px; line-height:1.65}
  .cart-product-copy>p {font-size:9px; margin-bottom:9px}
  .cart-product-price {grid-column:2; flex-direction:row; align-items:center; margin-top:2px}
  .cart-product-price strong {font-size:16px}
  .cart-remove {font-size:9px}
  .coupon-form {padding:19px 17px; border-radius:0 0 13px 13px}
  .coupon-form>label {font-size:11px}
  .coupon-controls {gap:8px}
  .coupon-controls input {padding:11px; font-size:11px}
  .coupon-controls button {padding:11px 12px; font-size:10px}
  .order-summary {padding:22px}
  .order-sidebar {margin-top:3px}
  .summary-total strong {font-size:23px}
  .checkout-panel {padding:21px 18px}
  .checkout-panel-title {gap:10px; margin-bottom:23px}
  .checkout-panel-title h2 {font-size:16px}
  .checkout-panel-title p {font-size:9px}
  .checkout-panel-title>span {width:32px; height:32px; font-size:11px}
  .commerce-fields {gap:16px 12px}
  .commerce-field {font-size:10px; gap:6px}
  .commerce-field input,.commerce-field textarea {font-size:12px; padding:11px; min-height:44px}
  .checkout-actions {flex-direction:column-reverse; align-items:stretch; text-align:center; margin-top:23px; gap:18px}
  .commerce-primary,.commerce-secondary {font-size:11px; min-height:45px; padding:12px 16px}
  .payment-options {gap:9px}
  .payment-choice {padding:12px 9px; gap:6px}
  .payment-choice strong {font-size:10px}
  .payment-choice small {font-size:8px}
  .payment-choice input {width:12px; height:12px}
  .demo-card-banner {flex-direction:column; align-items:flex-start; gap:7px}
  .demo-card-banner button {margin-left:26px}
  .payment-submit {gap:7px; flex-wrap:wrap}
  .payment-submit>span {font-size:12px}
  .commerce-result {padding:35px 20px}
  .commerce-result h2 {font-size:24px}
  .commerce-result>p {font-size:11px}
  .commerce-empty {padding:38px 20px}
  .commerce-empty h2 {font-size:21px}
  .commerce-empty p {font-size:11px; line-height:1.9}
  .auth-page {padding:24px 0 35px}
  .auth-form-card {padding:24px 22px}
  .auth-form-card .commerce-field input {font-size:16px}
  .auth-form-card .auth-submit {font-size:13px}
  .auth-form-card h1 {font-size:24px}
  .auth-form-card .commerce-check {font-size:10px; gap:8px}
  .auth-form-card .commerce-fields {gap:16px 12px}
  .password-dialog {padding:28px 23px}
}
@media(prefers-reduced-motion:reduce) {.commerce-primary,.commerce-secondary,.commerce-field input,.commerce-field textarea {transition:none}}