/* Browser-native base styles. Product CSS is served directly; no build step. */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
[hidden] { display:none !important; }
img,svg { display:block; max-width:100%; }
ul,ol { margin:0; padding:0; list-style:none; }
table { border-collapse:collapse; border-color:inherit; text-indent:0; }
textarea { resize:vertical; }
body { margin:0; background:var(--color-canvas); color:var(--color-text); font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading); }
h1,h2,h3 { font-family:var(--font-heading); font-weight:600; line-height:1.4; margin:0 0 var(--space-4); text-wrap:balance; }
h1 { font-size:var(--text-title); } h2 { font-size:1.25rem; } h3 { font-size:1.125rem; }
p { margin:0 0 var(--space-3); } a { color:inherit; text-underline-offset:.2em; }
button,input,select,textarea { font:inherit; } button,a,input,select,textarea { touch-action:manipulation; }
:focus-visible { outline:var(--focus-ring); outline-offset:3px; }
main#main-content[tabindex="-1"]:focus-visible { outline:none; }
main { max-width:80rem; margin:auto; padding:var(--space-6) var(--space-5); overflow-wrap:anywhere; }
section + section { margin-top:var(--space-6); }
.ui-muted { color:var(--color-muted); } .ui-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.ui-stack > * + * { margin-top:var(--space-3); }
.ui-specimen { font-weight:600; border-bottom:1px solid var(--color-border); padding-block:var(--space-4); }
.ui-serif { font-family:"Noto Serif Thai",serif; }
.ui-skip { position:fixed; left:var(--space-4); top:var(--space-2); z-index:1000; transform:translateY(calc(-100% - var(--space-4))); background:var(--color-surface); padding:var(--space-3); transition:transform var(--motion-short); }
.ui-skip:focus-visible { transform:translateY(0); }
.ui-skip:focus:not(:focus-visible) { transform:translateY(calc(-100% - var(--space-4))); }

input,select,textarea { max-width:100%; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-control-border); border-radius:var(--radius-control); padding:var(--space-2) var(--space-3); min-height:2.75rem; }
button { min-height:2.75rem; cursor:pointer; }
button:disabled { cursor:default; }
.ui-icon { display:inline-block; width:1.125rem; height:1.125rem; vertical-align:-.15em; flex-shrink:0; }
::selection { color:var(--color-on-accent); background:var(--color-accent); }
input,textarea { caret-color:var(--color-primary); }
dt,dd,td { font-variant-numeric:tabular-nums; }
wa-dialog { --width:36rem; --spacing:var(--space-4); --show-duration:var(--motion-short); --hide-duration:var(--motion-short); }
wa-dialog:not(:defined) { display:none; }
wa-dialog::part(dialog) { max-inline-size:calc(100vw - 2rem); max-block-size:calc(100dvh - 2rem); border-radius:var(--radius-control); box-shadow:var(--elevation-dialog); }
wa-dialog::part(body) { overflow:auto; }