/* Sumjai type system: display lettering = the logo's (Lilita One for Latin, Kanit ExtraBold Italic for Thai).
   Body copy stays Anuphan. Fonts are self-hosted in /fonts (both SIL Open Font License). */
@font-face{font-family:'Kanit';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/kanit-thai-700-italic.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:italic;font-weight:800;font-display:swap;src:url(/fonts/kanit-thai-800-italic.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/kanit-latin-700-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Kanit';font-style:italic;font-weight:800;font-display:swap;src:url(/fonts/kanit-latin-800-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lilita-one-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+0E3F}

:root{--display:'Lilita One','Kanit','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
  --yel:#FFD23F;
  --pop:.035em 0 0 var(--night),-.035em 0 0 var(--night),0 .035em 0 var(--night),0 -.035em 0 var(--night),.025em .025em 0 var(--night),-.025em .025em 0 var(--night),.025em -.025em 0 var(--night),-.025em -.025em 0 var(--night),.085em .085em 0 var(--violet),.11em .11em 0 var(--night)}
.d,h1,h2,h3,.case .lab b,.tt-cap .nm,.carton b,.q-big,.panel h2,summary,.btn,.cartbtn,.nav nav a,.tabs button,.chips button,.topics button,.kick,.priceRow b,.priceRow em,.mcard .pr b,.mcard .br,.tt-cap .pr,.case .lab span,.stage-foot .meta,.trust b,.vs .mono,.carton span,.langs a,.backbtn,.spec dt,.bp-spec,.tt-bp text{
  font-family:var(--display)!important;font-style:italic;font-weight:800;font-synthesis:style;letter-spacing:.01em}
h1 i,h2 i,.panel h2 i,.case .lab b i{font-family:inherit;font-style:italic}
/* the "pop" treatment = the logo itself: yellow face, ink outline, violet block shadow */
h1 i,h2 i,.carton b,.q-big,.tt-cap .nm{color:var(--yel)!important;text-shadow:var(--pop)}
.q-big{text-shadow:var(--pop),0 0 60px rgba(255,210,63,.35)}
.panel h2{color:#fff;text-shadow:.07em .07em 0 var(--violet)}
.stage-foot h1{font-size:clamp(40px,6vw,76px);line-height:1.05;text-shadow:.06em .06em 0 var(--violet)}
.sh h2,.spin h2{color:var(--night)}
.case .lab b{font-size:clamp(22px,2.4vw,32px)}
.case .lab span,.priceRow b,.mcard .pr b,.tt-cap .pr{letter-spacing:.02em}
.priceRow b{font-size:38px;color:var(--yel);text-shadow:.06em .06em 0 var(--violet)}
.kick,.mcard .br,.stage-foot .meta,.spec dt,.vs .mono,.carton span{letter-spacing:.08em}
.btn,.cartbtn{font-size:16px;letter-spacing:.02em}
.btn.v{box-shadow:0 4px 0 var(--night)}
.btn.v:active{transform:translateY(2px);box-shadow:0 2px 0 var(--night)}
.mcard h3{font-size:17px}
.tt-cap .nm{font-size:46px}
.carton b{font-size:clamp(100px,15vw,170px)}
.logo img{height:46px}
@media (max-width:480px){.logo img{height:34px}}
.ws .sh h2{color:#fff}
h2 i,h1 i{margin-left:.12em;margin-right:.06em}
.langs a{white-space:nowrap}
@media (max-width:480px){.logo img{height:26px}.langs a{padding:5px 5px}}

/* ---- checkout / order / policy pages (kit.css) ---- */
header.top a img{height:40px;width:auto;display:block}
@media (max-width:480px){header.top a img{height:30px}}
.wrap>h1,.box h2,.doc h2,.sum.total,.steps li.now,.pay label b,.codebox button,.empty b{font-family:var(--display);font-style:italic;font-weight:800;font-synthesis:style;letter-spacing:.01em}
.wrap h1{font-size:clamp(30px,4.6vw,42px)}