/* KSOM shop pages (cart / checkout / order success) — same design system as the September 2026
   product page (page 4259): Inter, white page, sticky header with pill buttons, 20px cards with a
   #e5e7eb border, purple #7c3aed primary pills, amber #fbbf24 buy pills. Everything is scoped under #kx. */
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#111827;-webkit-font-smoothing:antialiased;}
#kx,#kx *,#kx *::before,#kx *::after{box-sizing:border-box;}
#kx{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:#111827;min-height:70vh;}
#kx a{text-decoration:none;color:inherit;}
#kx img{max-width:100%;display:block;}
#kx button,#kx input,#kx select{font-family:inherit;}
#kx h1,#kx h2,#kx h3,#kx p{margin:0;}
#kx svg{flex-shrink:0;}

/* Header (as .pdp-header) */
.kx-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #f3f4f6;padding:0 24px;}
.kx-header-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;}
.kx-logo{display:flex;align-items:center;gap:8px;}
.kx-logo img{height:36px;width:auto;}
.kx-header-actions{display:flex;align-items:center;gap:12px;}
#kx .kx-pill{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9999px;border:1px solid #e5e7eb;background:#fff;font-size:13px;font-weight:600;color:#374151;transition:all .2s;cursor:pointer;white-space:nowrap;}
#kx .kx-pill:hover{border-color:#7c3aed;color:#7c3aed;}
.kx-pill svg{width:16px;height:16px;}
.kx-secure{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#059669;}
.kx-secure svg{width:16px;height:16px;}

/* Breadcrumb (as .pdp-breadcrumb) */
.kx-crumbs{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap;color:#9ca3af;}
#kx .kx-crumbs a{color:#7c3aed;font-weight:600;}
.kx-crumbs span:last-child{color:#4b5563;}

.kx-main{max-width:1280px;margin:0 auto;padding:4px 24px 64px;}
.kx-h1{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.01em;color:#111827;}
.kx-sub{font-size:14px;color:#6b7280;margin-top:4px;}
.kx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}

.kx-layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;}
@media(min-width:1024px){.kx-layout{grid-template-columns:minmax(0,1fr) 380px;}}

/* Cards (as .pdp-buybox) */
.kx-card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:24px;}
.kx-card+.kx-card{margin-top:16px;}
.kx-card-title{font-size:16px;font-weight:800;color:#111827;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.kx-hint{font-size:13px;color:#6b7280;line-height:1.55;}
@media(min-width:1024px){.kx-sticky{position:sticky;top:80px;}}

/* Buttons (as .pdp-btn-cart / .pdp-btn-buy) */
#kx .kx-btn{width:100%;padding:14px 20px;border-radius:9999px;border:none;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .3s;line-height:1.2;text-align:center;}
#kx .kx-btn svg{width:18px;height:18px;}
#kx .kx-btn-cart{background:#7c3aed;color:#fff;}
#kx .kx-btn-cart:hover{background:#6d28d9;box-shadow:0 8px 24px rgba(124,58,237,.25);}
#kx .kx-btn-buy{background:#fbbf24;color:#111827;}
#kx .kx-btn-buy:hover{background:#f59e0b;}
#kx .kx-btn-ghost{background:#fff;color:#374151;border:1px solid #e5e7eb;}
#kx .kx-btn-ghost:hover{border-color:#7c3aed;color:#7c3aed;}
#kx .kx-btn[disabled]{opacity:.65;cursor:not-allowed;box-shadow:none;}
#kx .kx-btn.kx-busy{cursor:wait;}
#kx .kx-link{background:none;border:none;padding:0;color:#7c3aed;font-weight:700;font-size:13px;cursor:pointer;}
#kx .kx-link:hover{color:#6d28d9;text-decoration:underline;}
.kx-spin{width:18px;height:18px;border:2px solid rgba(17,24,39,.25);border-top-color:#111827;border-radius:50%;animation:kxspin .7s linear infinite;}
.kx-btn-cart .kx-spin{border-color:rgba(255,255,255,.4);border-top-color:#fff;}
@keyframes kxspin{to{transform:rotate(360deg)}}

/* Chips / badges */
.kx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#f5f3ff;color:#6d28d9;font-size:12px;font-weight:700;}
.kx-chip svg{width:13px;height:13px;}
.kx-chip.kx-green{background:#ecfdf5;color:#047857;}
.kx-chip.kx-amber{background:#fffbeb;color:#92400e;}
.kx-chip.kx-red{background:#fef2f2;color:#b91c1c;}
.kx-chip.kx-gray{background:#f3f4f6;color:#374151;}

/* Summary rows */
.kx-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#6b7280;padding:7px 0;}
.kx-row span:last-child{color:#111827;font-weight:600;text-align:right;}
.kx-row small{font-size:12px;color:#9ca3af;font-weight:500;}
.kx-free{color:#10b981!important;font-weight:700!important;}
.kx-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #f3f4f6;margin-top:8px;padding-top:14px;font-weight:800;font-size:15px;}
.kx-total span:last-child{font-size:28px;font-weight:900;}
.kx-total small{font-size:12px;font-weight:600;color:#6b7280;}
.kx-note{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7280;line-height:1.5;margin-top:14px;}
.kx-note svg{width:15px;height:15px;color:#10b981;margin-top:2px;}
.kx-stack{display:flex;flex-direction:column;gap:10px;margin-top:18px;}

/* Line items */
.kx-item{display:flex;gap:16px;padding:18px 0;border-top:1px solid #f3f4f6;}
.kx-item:first-child{border-top:none;padding-top:4px;}
.kx-img{width:104px;height:104px;border-radius:16px;overflow:hidden;background:#f3f4f6;border:1px solid #f0f0f0;flex-shrink:0;}
.kx-img img{width:100%;height:100%;object-fit:cover;}
.kx-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.kx-item-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.kx-item-name{font-size:15px;font-weight:700;color:#111827;line-height:1.4;}
#kx a.kx-item-name:hover{color:#7c3aed;}
.kx-item-var{font-size:13px;color:#6b7280;}
.kx-item-price{font-size:13px;color:#6b7280;}
.kx-item-line{font-size:17px;font-weight:800;color:#111827;white-space:nowrap;}
.kx-item-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;flex-wrap:wrap;}
.kx-stock{font-size:12.5px;font-weight:700;color:#10b981;}
.kx-stock.kx-low{color:#d97706;}
.kx-stock.kx-out{color:#ef4444;}
.kx-qty{display:inline-flex;align-items:center;border:1px solid #e5e7eb;border-radius:9999px;overflow:hidden;background:#fff;}
#kx .kx-qty button{width:36px;height:36px;border:none;background:#fff;color:#374151;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;}
#kx .kx-qty button:hover:not([disabled]){background:#f5f3ff;color:#7c3aed;}
#kx .kx-qty button[disabled]{color:#d1d5db;cursor:not-allowed;}
.kx-qty span{min-width:34px;text-align:center;font-size:14px;font-weight:700;}
#kx .kx-remove{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:#6b7280;font-size:13px;font-weight:600;cursor:pointer;padding:6px 0;}
#kx .kx-remove:hover{color:#ef4444;}
.kx-remove svg{width:15px;height:15px;}

/* Compact items (summary) */
.kx-mini{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #f3f4f6;}
.kx-mini:first-child{border-top:none;padding-top:6px;}
.kx-mini-img{position:relative;width:56px;height:56px;border-radius:12px;background:#f3f4f6;flex-shrink:0;}
.kx-mini-img img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.kx-mini-qty{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#7c3aed;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.kx-mini-name{font-size:13.5px;font-weight:700;line-height:1.35;}
.kx-mini-sub{font-size:12px;color:#6b7280;margin-top:2px;}
.kx-mini-total{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap;}

/* Steps */
.kx-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600;color:#9ca3af;margin-bottom:18px;}
.kx-step{display:flex;align-items:center;gap:8px;}
.kx-step i{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:800;background:#f3f4f6;color:#6b7280;}
.kx-step i svg{width:12px;height:12px;}
.kx-step.kx-on{color:#111827;}
.kx-step.kx-on i{background:#7c3aed;color:#fff;}
.kx-step.kx-done{color:#7c3aed;}
.kx-step.kx-done i{background:#f5f3ff;color:#7c3aed;}
.kx-sep{width:24px;height:2px;background:#e5e7eb;border-radius:2px;}

/* Forms */
.kx-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
.kx-full{grid-column:1/-1;}
@media(max-width:600px){.kx-grid{grid-template-columns:1fr;}}
.kx-f label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;}
.kx-f label em{font-style:normal;font-weight:500;color:#9ca3af;}
#kx .kx-f input,#kx .kx-f select{width:100%;height:48px;border:1px solid #e5e7eb;border-radius:12px;padding:0 14px;font-size:15px;color:#111827;background:#fff;transition:border-color .2s,box-shadow .2s;appearance:auto;}
#kx .kx-f input:focus,#kx .kx-f select:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.12);}
#kx .kx-f input[readonly]{background:#f9fafb;color:#4b5563;}
#kx .kx-f.kx-err input,#kx .kx-f.kx-err select{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.08);}
.kx-f .kx-e{display:block;color:#dc2626;font-size:12px;font-weight:600;margin-top:6px;}
.kx-section{margin-top:26px;}
.kx-kv{font-size:14px;line-height:1.65;color:#374151;}

/* Notices */
.kx-notice{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:14px 16px;margin-bottom:18px;font-size:14px;line-height:1.5;}
.kx-notice svg{width:18px;height:18px;margin-top:1px;}
.kx-notice b{display:block;}
.kx-notice.kx-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;}
.kx-notice.kx-bad{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;}
.kx-notice.kx-info{background:#f5f3ff;border:1px solid #ede9fe;color:#5b21b6;}

/* Empty / status hero */
.kx-hero{text-align:center;padding:40px 24px;}
.kx-hero-icon{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.kx-hero-icon svg{width:36px;height:36px;}
.kx-hero-ok{background:#ecfdf5;color:#10b981;animation:kxpop .5s cubic-bezier(.34,1.56,.64,1);}
.kx-hero-bad{background:#fef2f2;color:#ef4444;}
.kx-hero-wait{background:#f5f3ff;color:#7c3aed;}
.kx-hero-neutral{background:#f3f4f6;color:#6b7280;}
@keyframes kxpop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.kx-hero h1{font-size:clamp(26px,3.4vw,34px);font-weight:900;letter-spacing:-.01em;}
.kx-hero p{font-size:15px;color:#6b7280;margin:8px auto 0;max-width:560px;line-height:1.6;}
.kx-hero .kx-spin{width:32px;height:32px;border-width:3px;border-color:rgba(124,58,237,.2);border-top-color:#7c3aed;}
.kx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px;margin:24px auto 0;text-align:left;}
@media(max-width:600px){.kx-facts{grid-template-columns:1fr;}}
.kx-fact{border:1px solid #e5e7eb;border-radius:16px;padding:14px 16px;}
.kx-fact small{display:block;font-size:12px;color:#6b7280;font-weight:600;margin-bottom:4px;}
.kx-fact b{font-size:15px;font-weight:800;color:#111827;word-break:break-word;}
.kx-fact b.kx-g{color:#10b981;}
.kx-fact b.kx-r{color:#ef4444;}
.kx-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;}
#kx .kx-actions .kx-btn{width:auto;min-width:200px;}

/* My Orders */
.kx-order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #f3f4f6;}
.kx-order-no{font-size:16px;font-weight:800;color:#111827;}
.kx-order-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.kx-order-body{display:flex;align-items:center;gap:16px;padding-top:14px;flex-wrap:wrap;}
.kx-order-thumbs{display:flex;gap:10px;align-items:center;}
.kx-order-names{flex:1;min-width:180px;font-size:14px;font-weight:600;line-height:1.45;color:#111827;}
.kx-order-total small{display:block;font-size:12px;color:#6b7280;font-weight:600;}
.kx-order-total b{font-size:18px;font-weight:900;color:#111827;}
#kx .kx-order-btn{width:auto;padding:12px 24px;}
@media(max-width:640px){#kx .kx-order-btn{width:100%;}}

/* Skeleton */
.kx-sk{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%);background-size:400% 100%;animation:kxsk 1.4s ease infinite;border-radius:16px;}
@keyframes kxsk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Toast (as .pdp-toast) */
.kx-toast{position:fixed;bottom:24px;right:24px;background:#111827;color:#fff;padding:14px 24px;border-radius:14px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 12px 32px rgba(0,0,0,.2);z-index:200;transform:translateY(100px);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;max-width:calc(100vw - 48px);}
.kx-toast.kx-show{transform:translateY(0);opacity:1;}

@media(max-width:640px){
.kx-header{padding:0 16px;}
.kx-header-actions{gap:8px;}
#kx .kx-pill span{display:none;}
#kx .kx-pill{padding:8px 10px;}
.kx-crumbs{padding:14px 16px;}
.kx-main{padding:0 16px 48px;}
.kx-card{padding:18px;border-radius:18px;}
.kx-img{width:84px;height:84px;border-radius:14px;}
.kx-item{gap:12px;}
.kx-secure span{display:none;}
.kx-toast{left:16px;right:16px;bottom:16px;}
}