/* KHONCHAIHERB V1 — sell-now commerce polish
   Truth-first: this layer adapts to however many sale-ready products the API actually returns.
   It never creates catalogue items, reviews, stock counts, promotions or medical claims. */

/* Sparse real catalog: give one or two verified products enough visual weight instead of
   leaving a four-column shell full of empty space. */
.kch-products:has(> .kch-product-card:only-child){
  grid-template-columns:minmax(0,1fr);
  max-width:980px;
}
.kch-products:has(> .kch-product-card:nth-child(2):last-child){
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:940px;
}
.kch-products > .kch-product-card:only-child{
  display:grid;
  grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr);
  min-height:390px;
}
.kch-products > .kch-product-card:only-child .kch-product-media{
  aspect-ratio:auto;
  min-height:390px;
  padding:36px;
}
.kch-products > .kch-product-card:only-child .kch-product-media img{
  max-height:320px;
}
.kch-products > .kch-product-card:only-child .kch-product-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px;
}
.kch-products > .kch-product-card:only-child .kch-product-title{
  min-height:0;
  font-size:clamp(24px,2.5vw,34px);
  line-height:1.35;
}
.kch-products > .kch-product-card:only-child .kch-product-price{
  margin-top:18px;
}
.kch-products > .kch-product-card:only-child .kch-product-price strong{
  font-size:32px;
}
.kch-products > .kch-product-card:only-child .kch-product-actions{
  max-width:430px;
  margin-top:24px;
}
.kch-products > .kch-product-card:only-child .kch-product-actions button{
  min-height:50px;
  font-size:13px;
}

/* Product detail: make price, availability and the purchase path the visual hierarchy. */
.kch-detail-copy{
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#fbfdfb 100%);
}
.kch-detail-price{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:48px;
  color:#12372c;
  letter-spacing:-.035em;
}
.kch-detail-stock{
  width:max-content;
  min-height:30px;
  padding:0 11px;
  border:1px solid #d9e8dd;
  border-radius:999px;
  background:#eff7f2;
}
.kch-detail-assurance{
  margin-top:22px;
}
.kch-detail-actions{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:12px;
}
.kch-detail-actions .kch-btn{
  min-height:56px;
  border-radius:15px;
  font-size:14px;
}
.kch-detail-actions [data-detail-buy]{
  box-shadow:0 14px 30px rgba(23,57,47,.19);
}

/* Cart: keep the verified amount and checkout action visible as the decision point. */
.kch-drawer-foot{
  background:linear-gradient(180deg,#fff 0%,#f8fbf9 100%);
  box-shadow:0 -12px 34px rgba(23,57,47,.055);
}
.kch-cart-summary{
  min-height:58px;
  align-items:center;
  padding:0 2px;
}
.kch-cart-summary span{
  font-size:13px;
  font-weight:750;
  color:var(--kch-ink-2);
}
.kch-cart-summary strong{
  font-size:28px;
  letter-spacing:-.035em;
}
.kch-drawer-foot [data-start-checkout]{
  min-height:56px;
  font-size:14px;
  box-shadow:0 12px 28px rgba(23,57,47,.18);
}
.kch-cart-note{
  max-width:360px;
  margin:10px auto 0;
  line-height:1.55;
}

/* Checkout: clear sections, a calmer summary and a persistent final action while scrolling. */
.kch-checkout-body{
  background:#fbfcfb;
}
.kch-form-section{
  box-shadow:0 7px 22px rgba(23,57,47,.035);
}
.kch-payment-option{
  min-height:68px;
}
.kch-order-review{
  gap:11px;
}
.kch-review-row{
  min-height:28px;
  align-items:center;
}
.kch-review-row:last-child{
  padding-top:10px;
  border-top:1px solid #edf1ee;
}
.kch-checkout-actions{
  position:sticky;
  bottom:-32px;
  z-index:3;
  margin:18px -32px -32px;
  padding:16px 32px 22px;
  border-top:1px solid var(--kch-line);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  box-shadow:0 -12px 32px rgba(23,57,47,.06);
}
.kch-checkout-actions [data-place-order]{
  min-height:56px;
  box-shadow:0 12px 28px rgba(23,57,47,.18);
}

/* Post-purchase order tracking. Uses the existing secure order-status endpoint and never
   exposes a customer order unless both order number and matching phone are supplied. */
.kch-nav-order{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--kch-ink-2);
  font-size:13px;
  font-weight:750;
}
.kch-nav-order:hover,.kch-nav-order:focus-visible{background:#f2f6f3;color:var(--kch-green)}
.kch-footer-order{
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  color:#b8c8c1;
  font-size:12px;
}
.kch-footer-order:hover{color:#fff}
.kch-mobile-nav.kch-mobile-nav-5{grid-template-columns:repeat(5,1fr)}
.kch-order-status{width:min(760px,100%)}
.kch-order-status-head{padding:28px 32px 18px;border-bottom:1px solid var(--kch-line)}
.kch-order-status-head>span{font-size:10px;color:var(--kch-green);font-weight:900;letter-spacing:.08em}
.kch-order-status-head h2{margin:4px 0 7px;font-size:30px;letter-spacing:-.035em}
.kch-order-status-head p{margin:0;max-width:620px;color:var(--kch-muted);font-size:12px;line-height:1.75}
.kch-order-status-body{padding:24px 32px 32px;background:#fbfcfb}
.kch-order-lookup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.kch-order-lookup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kch-order-lookup .kch-field span{font-size:11px;font-weight:800;color:var(--kch-ink-2)}
.kch-order-lookup .kch-field input{height:48px}
.kch-order-lookup>.kch-btn{min-height:48px;white-space:nowrap}
.kch-order-lookup-note{margin-top:9px;color:var(--kch-muted);font-size:10px;line-height:1.6}
.kch-order-status-error{margin-top:12px;color:#99463f;font-size:11px;font-weight:750}
.kch-order-status-error:not(:empty){padding:10px 12px;border:1px solid #efd3cf;border-radius:12px;background:#fff4f2}
.kch-track-loading{margin-top:18px;padding:24px;border:1px dashed #ccd9d0;border-radius:16px;background:#fff;text-align:center;color:var(--kch-muted);font-size:12px}
.kch-track-card{margin-top:20px;border:1px solid var(--kch-line);border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 10px 30px rgba(23,57,47,.045)}
.kch-track-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid #edf1ee}
.kch-track-summary>div:first-child{display:grid;gap:2px}
.kch-track-summary span{font-size:10px;color:var(--kch-muted)}
.kch-track-summary strong{font-size:17px;color:var(--kch-ink)}
.kch-track-summary small{font-size:10px;color:var(--kch-muted)}
.kch-track-status{flex:0 0 auto;min-height:32px;display:flex;align-items:center;padding:0 12px;border-radius:999px;font-size:10px;font-weight:900}
.kch-track-status.is-active{background:#eef6f1;color:var(--kch-green)}
.kch-track-status.is-success{background:#e9f6ed;color:#236843}
.kch-track-status.is-danger{background:#fff1ef;color:#a34e46}
.kch-track-progress{display:grid;grid-template-columns:repeat(3,1fr);padding:22px;border-bottom:1px solid #edf1ee}
.kch-track-progress>div{position:relative;display:grid;justify-items:center;gap:7px;color:#9aa7a0;font-size:10px;font-weight:800;text-align:center}
.kch-track-progress>div:not(:last-child):after{content:"";position:absolute;left:calc(50% + 20px);right:calc(-50% + 20px);top:16px;height:2px;background:#e2e9e4}
.kch-track-progress b{position:relative;z-index:1;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#edf1ee;color:#85948c}
.kch-track-progress b svg{width:17px;height:17px}
.kch-track-progress .is-done{color:var(--kch-green)}
.kch-track-progress .is-done b{background:var(--kch-green);color:#fff}
.kch-track-progress .is-done:not(:last-child):after{background:#a9c9b4}
.kch-track-financial{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 22px}
.kch-track-financial>div{display:grid;gap:2px;padding:13px 14px;border:1px solid #e9efeb;border-radius:13px;background:#fafcfb}
.kch-track-financial span,.kch-track-info span{font-size:10px;color:var(--kch-muted)}
.kch-track-financial strong{font-size:13px;color:var(--kch-ink)}
.kch-track-info{margin:0 22px 18px;padding:14px 16px;border-radius:14px;background:#eef6f1;border:1px solid #dbe9df;display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center}
.kch-track-info strong{font-size:13px;color:var(--kch-green);word-break:break-all}
.kch-track-info small{font-size:10px;color:var(--kch-muted)}
.kch-track-items{padding:0 22px 18px}
.kch-track-items h3{margin:0 0 9px;font-size:13px}
.kch-track-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid #edf1ee}
.kch-track-item>div{display:grid;gap:2px;min-width:0}
.kch-track-item strong{font-size:12px;line-height:1.45}
.kch-track-item small{font-size:9px;color:var(--kch-muted)}
.kch-track-item span{font-size:10px;color:var(--kch-muted)}
.kch-track-item b{font-size:12px}
.kch-track-time{margin:0 22px 18px;padding:9px 12px;border-radius:10px;background:#fafcfb;color:var(--kch-muted);font-size:10px}
.kch-success-actions:has([data-success-track]){display:grid;grid-template-columns:1fr 1fr;max-width:440px;margin-left:auto;margin-right:auto}

@media(max-width:840px){
  .kch-products:has(> .kch-product-card:only-child),
  .kch-products:has(> .kch-product-card:nth-child(2):last-child){
    max-width:none;
  }
  .kch-products > .kch-product-card:only-child{
    display:block;
    min-height:0;
  }
  .kch-products > .kch-product-card:only-child .kch-product-media{
    min-height:330px;
    aspect-ratio:1/.86;
    padding:28px;
  }
  .kch-products > .kch-product-card:only-child .kch-product-media img{
    max-height:285px;
  }
  .kch-products > .kch-product-card:only-child .kch-product-body{
    display:block;
    padding:26px;
  }
  .kch-products > .kch-product-card:only-child .kch-product-title{
    font-size:24px;
  }
  .kch-detail-actions{
    grid-template-columns:1fr 1.2fr;
  }
}

@media(max-width:560px){
  .kch-products:has(> .kch-product-card:only-child){
    grid-template-columns:1fr;
  }
  .kch-products:has(> .kch-product-card:nth-child(2):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .kch-products > .kch-product-card:only-child .kch-product-media{
    min-height:270px;
    aspect-ratio:1/.82;
    padding:20px;
  }
  .kch-products > .kch-product-card:only-child .kch-product-media img{
    max-height:235px;
  }
  .kch-products > .kch-product-card:only-child .kch-product-body{
    padding:20px;
  }
  .kch-products > .kch-product-card:only-child .kch-product-title{
    font-size:21px;
  }
  .kch-products > .kch-product-card:only-child .kch-product-price strong{
    font-size:27px;
  }
  .kch-products > .kch-product-card:only-child .kch-product-actions{
    grid-template-columns:1fr;
  }
  .kch-products > .kch-product-card:only-child .kch-buy{
    min-height:50px;
  }
  .kch-detail-actions{
    grid-template-columns:1fr;
  }
  .kch-detail-actions [data-detail-buy]{
    order:-1;
    min-height:56px;
  }
  .kch-checkout-actions{
    bottom:calc(-24px - env(safe-area-inset-bottom));
    margin:14px -16px calc(-24px - env(safe-area-inset-bottom));
    padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .kch-order-status-head{padding:22px 20px 14px}
  .kch-order-status-head h2{font-size:26px}
  .kch-order-status-body{padding:18px 16px calc(24px + env(safe-area-inset-bottom))}
  .kch-order-lookup{grid-template-columns:1fr}
  .kch-order-lookup-grid{grid-template-columns:1fr}
  .kch-order-lookup>.kch-btn{min-height:52px}
  .kch-track-summary{align-items:flex-start;padding:17px 16px}
  .kch-track-summary strong{font-size:14px}
  .kch-track-progress{padding:18px 12px}
  .kch-track-progress>div{font-size:8.5px}
  .kch-track-financial{grid-template-columns:1fr;padding:14px 16px}
  .kch-track-info{margin:0 16px 14px;grid-template-columns:1fr}
  .kch-track-items{padding:0 16px 14px}
  .kch-track-item{grid-template-columns:minmax(0,1fr) auto}
  .kch-track-item b{grid-column:2;grid-row:2}
  .kch-track-time{margin:0 16px 14px}
  .kch-success-actions:has([data-success-track]){grid-template-columns:1fr}
}