/* VisionD Modern AI Commerce Design System v1 — v0.14.89 */
:root{
  color-scheme:light;
  --vd-ai-midnight:#062f2d;
  --vd-ai-midnight-hover:#0a4542;
  --vd-primary:#0abab5;
  --vd-primary-hover:#078e89;
  --vd-primary-active:#067b77;
  --vd-primary-glow:#5fe0da;
  --vd-primary-soft:#ddf8f5;
  --vd-page:#f4faf9;
  --vd-surface:#fff;
  --vd-surface-subtle:#eef8f7;
  --vd-text:#102f2d;
  --vd-text-secondary:#607674;
  --vd-border:#cfe3e1;
  --vd-border-strong:#9bcac6;
  --vd-promotion:#f2c14e;
  --vd-promotion-hover:#dda92f;
  --vd-success:#16845b;
  --vd-warning:#b7790b;
  --vd-danger:#c83c3c;
  --vd-danger-hover:#a92f2f;
  --vd-focus:#177ddc;
  --vd-line:#cfe3e1;
  --vd-space-1:4px;
  --vd-space-2:8px;
  --vd-space-3:12px;
  --vd-space-4:16px;
  --vd-space-5:24px;
  --vd-space-6:32px;
  --vd-space-7:48px;
  --vd-radius-sm:10px;
  --vd-radius-md:16px;
  --vd-radius-lg:24px;
  --vd-radius-pill:999px;
  --vd-shadow-sm:0 4px 14px rgba(6,47,45,.06);
  --vd-shadow-md:0 12px 32px rgba(6,47,45,.09);
  --vd-shadow-ai:0 18px 48px rgba(10,186,181,.18);
  --vd-font-body:"Noto Sans Thai",Arial,sans-serif;
  --vd-font-display:"Noto Sans Thai",Arial,sans-serif;
  --vd-text-xs:12px;
  --vd-text-sm:14px;
  --vd-text-md:16px;
  --vd-text-lg:20px;
  --vd-text-xl:clamp(30px,4vw,52px);
  --vd-motion-fast:160ms ease;
}

.vds-stack{display:grid;gap:var(--vd-space-4)}
.vds-cluster{display:flex;align-items:center;gap:var(--vd-space-3);flex-wrap:wrap}
.vds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--vd-space-4)}
.vds-text-secondary{color:var(--vd-text-secondary)}

.vds-btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--vd-space-2);
  min-height:44px;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:var(--vd-radius-sm);
  background:transparent;
  color:var(--vd-text);
  font:900 var(--vd-text-sm)/1.25 var(--vd-font-body);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--vd-motion-fast),border-color var(--vd-motion-fast),color var(--vd-motion-fast),box-shadow var(--vd-motion-fast),transform var(--vd-motion-fast);
}
.vds-btn:hover:not(:disabled):not([aria-disabled="true"]){transform:translateY(-1px)}
.vds-btn:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(0)}
.vds-btn:focus-visible{outline:3px solid var(--vd-focus);outline-offset:3px}
.vds-btn:disabled,.vds-btn[aria-disabled="true"]{border-color:var(--vd-border);background:#e8efee;color:#607674;box-shadow:none;cursor:not-allowed;transform:none}
.vds-btn--large{min-height:52px;padding:0 24px;border-radius:var(--vd-radius-md);font-size:var(--vd-text-md)}
.vds-btn--small{min-height:36px;padding:0 12px;font-size:var(--vd-text-xs)}
.vds-btn--wide{width:100%}
.vds-btn--primary{background:var(--vd-primary);color:var(--vd-ai-midnight);box-shadow:none}
.vds-btn--primary:hover:not(:disabled):not([aria-disabled="true"]){background:var(--vd-primary-hover);color:#fff;box-shadow:none}
.vds-btn--primary:active:not(:disabled):not([aria-disabled="true"]){background:var(--vd-primary-active);color:#fff}
.vds-btn--secondary{border-color:var(--vd-primary);background:var(--vd-surface);color:var(--vd-primary-active)}
.vds-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]){background:var(--vd-primary-soft);border-color:var(--vd-primary-hover)}
.vds-btn--tonal{background:var(--vd-primary-soft);color:var(--vd-ai-midnight)}
.vds-btn--tonal:hover:not(:disabled):not([aria-disabled="true"]){background:#c8f0ec}
.vds-btn--text{min-height:36px;padding:0 8px;color:var(--vd-primary-active)}
.vds-btn--text:hover:not(:disabled):not([aria-disabled="true"]){background:var(--vd-primary-soft)}
.vds-btn--promotion{background:var(--vd-promotion);color:var(--vd-ai-midnight);box-shadow:0 9px 22px rgba(183,121,11,.17)}
.vds-btn--promotion:hover:not(:disabled):not([aria-disabled="true"]){background:var(--vd-promotion-hover)}
.vds-btn--danger{border-color:var(--vd-danger);background:var(--vd-surface);color:var(--vd-danger)}
.vds-btn--danger:hover:not(:disabled):not([aria-disabled="true"]){background:#fff0f0;border-color:var(--vd-danger-hover);color:var(--vd-danger-hover)}
.vds-btn--danger.vds-btn--confirmed{background:var(--vd-danger);color:#fff}
.vds-btn[aria-pressed="true"],.vds-btn[aria-selected="true"]{border-color:var(--vd-primary-active);background:var(--vd-primary-soft);color:var(--vd-ai-midnight);box-shadow:inset 0 0 0 1px var(--vd-primary-active)}

.vds-card{box-sizing:border-box;padding:var(--vd-space-5);border:1px solid var(--vd-border);border-radius:var(--vd-radius-md);background:var(--vd-surface);color:var(--vd-text);box-shadow:var(--vd-shadow-sm)}
.vds-card--hero{position:relative;overflow:hidden;padding:clamp(28px,5vw,64px);border-color:rgba(95,224,218,.28);border-radius:var(--vd-radius-lg);background:linear-gradient(135deg,var(--vd-ai-midnight),#075a56 62%,#067b77);color:#fff;box-shadow:var(--vd-shadow-ai)}
.vds-card--hero:before{content:"";position:absolute;inset:-45% -20% auto 45%;height:180%;background:radial-gradient(circle,rgba(95,224,218,.34),transparent 64%);pointer-events:none}
.vds-card--hero>*{position:relative}
.vds-card--feature{border-color:var(--vd-border-strong);border-radius:var(--vd-radius-lg);background:linear-gradient(160deg,var(--vd-surface),var(--vd-primary-soft));box-shadow:var(--vd-shadow-md)}
.vds-card--product{padding:0;overflow:hidden;border-radius:var(--vd-radius-md);transition:border-color var(--vd-motion-fast),box-shadow var(--vd-motion-fast),transform var(--vd-motion-fast)}
.vds-card--product:hover,.vds-card--product:focus-within{transform:translateY(-3px);border-color:var(--vd-primary);box-shadow:var(--vd-shadow-md)}
.vds-card--information{background:var(--vd-surface);box-shadow:none}
.vds-card--status{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--vd-space-3);align-items:start;box-shadow:none}
.vds-card--status[data-status="success"]{border-color:#8fd3b6;background:#effaf5;color:#0c6544}
.vds-card--status[data-status="warning"]{border-color:#e3c37f;background:#fff9eb;color:#765007}
.vds-card--status[data-status="danger"]{border-color:#e4a2a2;background:#fff3f3;color:#8f2727}
.vds-card--status[data-status="pending"]{border-color:var(--vd-border-strong);background:var(--vd-primary-soft);color:var(--vd-ai-midnight)}

.vds-field{display:grid;gap:var(--vd-space-2);color:var(--vd-text);font:800 var(--vd-text-sm)/1.4 var(--vd-font-body)}
.vds-field :is(input,select,textarea){box-sizing:border-box;width:100%;min-height:44px;padding:11px 13px;border:1px solid var(--vd-border-strong);border-radius:var(--vd-radius-sm);background:var(--vd-surface);color:var(--vd-text);font:400 var(--vd-text-md)/1.4 var(--vd-font-body);transition:border-color var(--vd-motion-fast),box-shadow var(--vd-motion-fast)}
.vds-field textarea{min-height:110px;resize:vertical}
.vds-field :is(input,select,textarea):focus{outline:0;border-color:var(--vd-primary);box-shadow:0 0 0 4px rgba(10,186,181,.15)}
.vds-field :is(input,select,textarea):disabled{background:#e8efee;color:#607674;cursor:not-allowed}

@media(max-width:620px){
  .vds-card{padding:var(--vd-space-4)}
  .vds-card--product{padding:0}
  .vds-card--hero{padding:var(--vd-space-5)}
  .vds-btn--large{min-height:50px;padding:0 18px}
  .vds-btn--small{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.vds-btn,.vds-card--product{transition:none}.vds-btn:hover,.vds-card--product:hover{transform:none}}
@media(forced-colors:active){.vds-btn,.vds-card,.vds-field :is(input,select,textarea){border:1px solid ButtonText}.vds-btn:focus-visible{outline:3px solid Highlight}.vds-btn:disabled,.vds-btn[aria-disabled="true"]{color:GrayText}}