:root{
  color-scheme: only light;
  /* Brand Identity Standards v1.0 — section 06 colour palette */
  --orange:#FF931E;        /* Play Orange  */
  --orange-deep:#EE7F28;   /* Deep Orange  */
  --yellow:#F5DC34;        /* Sun Yellow   */
  --lime:#B5CE49;          /* Play Lime    */
  --sky:#64B0D2;           /* Sky Blue     */
  --pink:#FF7BAC;          /* Play Pink    */
  --ink:#2F3136;           /* Graphite     */
  --cream:#FFF8F1;         /* Soft Cream   */
  --gray:#F3F4F5;          /* Light Gray   */
  --bg:#FFF8F1; --surface:#FFFFFF; --surface-2:#F3F4F5; --sunken:#F3F4F5;
  --ink-soft:color-mix(in srgb, #2F3136 72%, #FFF8F1);
  --line:color-mix(in srgb, #2F3136 12%, #F3F4F5);
  --on-bright:#2F3136; --on-dark:#FFF8F1;
  --sel:#F5DC34; --on-sel:#2F3136;   /* selected states: Sun Yellow, Graphite text */
  --price:#2F3136;         /* readable text is Graphite, never Orange */
  --ring:#64B0D2;
  --shadow:0 1px 2px rgba(47,49,54,.05), 0 8px 24px -12px rgba(47,49,54,.18);
  --r-s:12px; --r-m:16px; --r-l:24px;
  --display:'Mitr', 'Noto Sans Thai', system-ui, sans-serif;
  --body:'Noto Sans Thai','Mitr', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; line-height:1.25; margin:0; text-wrap:balance; letter-spacing:.005em}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
svg{display:block}
:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.wrap{width:100%; max-width:1200px; margin:0 auto; padding-inline:32px}
.eyebrow{font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:normal; text-transform:uppercase; color:var(--ink-soft)}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:14px; padding-block:10px}
.brandmark{display:flex; align-items:center; gap:0; flex:none}
.brandmark img{width:140px; height:auto}
.brandmark .lg-mark{display:none; width:40px; height:40px}

.spacer{flex:1}
.iconbtn{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); font-size:14px; font-weight:600}
.iconbtn:hover{border-color:var(--orange)}
.cartbtn{background:var(--orange); border-color:var(--orange); color:var(--on-bright)}
.cartbtn .count{background:#FFFFFF; color:var(--ink); border-radius:999px; min-width:20px; text-align:center; font-size:12px; padding:1px 6px; font-variant-numeric:tabular-nums}
.langsw{display:inline-flex; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface)}
.langsw button{padding:8px 13px; font-size:14px; font-weight:700; color:var(--ink-soft)}
.langsw button[aria-pressed="true"]{background:var(--sel); color:var(--on-sel)}
.nav{border-bottom:1px solid var(--line); background:var(--surface)}
.nav .wrap{display:flex; gap:6px; overflow-x:auto; padding-block:8px; scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav button{white-space:nowrap; padding:9px 15px; border-radius:999px; font-size:15px; font-weight:600; color:var(--ink-soft)}
.nav button[aria-current="page"]{background:var(--sunken); color:var(--ink)}
.nav button.hot[aria-current="page"]{background:var(--orange); color:var(--on-bright); text-decoration:none}
.nav button.hot{color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:3px; text-underline-offset:5px}

/* ---------- layout blocks ---------- */
.page[hidden]{display:none}
section.band{padding-block:48px}
section.band.tight{padding-block:32px}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.head h2{font-size:clamp(22px,3.2vw,28px)}
.head .sub{color:var(--ink-soft); font-size:16px; max-width:52ch}
.link{font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; text-decoration-color:var(--orange)}

/* ---------- hero ---------- */
.hero{padding-block:44px 8px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center}
.hero h1{font-size:clamp(32px,5.2vw,50px); font-weight:600}
.hero .lead{margin-top:14px; font-size:17px; color:var(--ink-soft); max-width:42ch}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:12px 22px; border-radius:999px; font-weight:700; font-size:15px; transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
a.btn,a.btn:hover{text-decoration:none}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-primary{background:var(--orange); color:var(--on-bright); box-shadow:var(--shadow)}
.btn-secondary{background:var(--orange); color:var(--on-bright)}
.btn-ink{background:var(--orange); color:var(--on-bright)}
.btn-ghost{border:1.5px solid var(--line); background:var(--surface)}
.btn-line{background:#06C755; color:#0B2B16}
.hero-art{position:relative; aspect-ratio:1/1; max-width:100%; border-radius:var(--r-l); background:
   radial-gradient(circle at 9% 10%, var(--yellow) 0 5%, transparent 5.4%),
   radial-gradient(circle at 91% 12%, var(--sky) 0 4%, transparent 4.4%),
   radial-gradient(circle at 90% 90%, var(--lime) 0 4.5%, transparent 4.9%),
   radial-gradient(circle at 10% 89%, var(--pink) 0 3.5%, transparent 3.9%),
   #FFFFFF;
   display:grid; place-items:center; border:1px solid var(--line)}
.hero-art img{width:60%; max-width:100%}
.hero-art.mosaic{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:8px; padding:12px; background:var(--surface); place-items:stretch}
.hero-art.mosaic span{background:#fff; border-radius:12px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--line)}
.hero-art.mosaic img{width:100%; height:100%; object-fit:contain; padding:7%; box-sizing:border-box; display:block}
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin-top:34px}
.stat-strip div{background:var(--surface); padding:16px 14px}
.stat-strip .n{font-family:var(--display); font-weight:500; font-size:21px; font-variant-numeric:tabular-nums}
.stat-strip .l{font-size:13px; color:var(--ink-soft); line-height:1.4; margin-top:2px}

/* ---------- sale banner ---------- */
.salebar{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-top:5px solid var(--orange); box-shadow:var(--shadow); border-radius:var(--r-l); padding:26px; display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center}
.salebar h3{font-size:clamp(20px,3vw,27px); color:var(--ink)}
.salebar p{color:var(--ink-soft); font-size:14.5px; margin-top:6px; max-width:48ch}
.countdown{display:flex; gap:8px}
.cd{background:var(--orange); color:var(--on-bright); border-radius:14px; padding:10px 12px; text-align:center; min-width:62px}
.cd .v{font-family:var(--display); font-weight:500; font-size:24px; line-height:1; font-variant-numeric:tabular-nums}
.cd .u{font-size:13px; font-weight:700; letter-spacing:normal; margin-top:4px}

/* ---------- age tiles ---------- */
.ages{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.age{border-radius:var(--r-m); padding:20px 18px 18px; color:var(--on-bright); display:flex; flex-direction:column; gap:10px; min-height:158px; text-align:left; transition:transform .15s ease}
.age:hover{transform:translateY(-3px)}
.age .yrs{font-family:var(--display); font-weight:500; font-size:27px; line-height:1}
.age .who{font-size:14px; font-weight:600; opacity:.85}
.age .n{margin-top:auto; font-size:13px; font-weight:700; background:rgba(255,255,255,.80); border-radius:999px; padding:4px 10px; align-self:flex-start}

/* ---------- product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; display:flex; flex-direction:column}
.thumb{aspect-ratio:1/1; max-width:100%; display:grid; place-items:center; position:relative}
.thumb svg{width:44%; height:44%}
.thumb.pic{overflow:hidden}
.thumb.pic img{width:100%; height:100%; object-fit:contain; padding:8%; box-sizing:border-box; display:block}
.hero-art.pic{display:grid; place-items:center; overflow:hidden}
.hero-art.pic img{width:100%; height:100%; object-fit:contain; padding:6%; box-sizing:border-box; max-width:100%}
.tag{position:absolute; top:10px; left:10px; background:var(--surface); color:var(--ink); border:1px solid var(--line); font-size:13px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:999px}
.tag.off{background:var(--orange); color:var(--on-bright)}
.card .body{padding:14px; display:flex; flex-direction:column; gap:6px; flex:1}
.card .brand{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.card .name{font-size:15px; font-weight:600; line-height:1.45}
.card .prices{display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:8px}
.card .now{font-family:var(--display); font-weight:600; font-size:19px; color:var(--price); font-variant-numeric:tabular-nums}
.card .was{font-size:13px; color:var(--ink-soft); text-decoration:line-through}
.card .left{font-size:13px; color:var(--ink-soft)}
.card .left b{color:var(--ink)}
.add{margin:0 14px 14px; padding:10px; border-radius:var(--r-s); background:var(--sunken); font-weight:700; font-size:14px; text-align:center}
.add:hover{background:var(--orange); color:var(--on-bright)}
.add.added{background:var(--lime); color:var(--on-bright)}

/* ---------- filters ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.chip{padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); font-size:14px; font-weight:600; color:var(--ink-soft)}
.chip[aria-pressed="true"]{background:var(--sel); border-color:var(--ink); color:var(--on-sel)}

/* ---------- generic panels ---------- */
.panels{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:22px}
.panel h3{font-size:18px; margin-bottom:8px}
.panel p{font-size:16px; color:var(--ink-soft)}
.panel .mark{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px; color:var(--on-bright)}
.panel .mark svg{width:20px; height:20px}
.listrows{border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:var(--surface)}
.row{display:grid; grid-template-columns:120px 1fr auto; gap:16px; padding:15px 18px; border-bottom:1px solid var(--line); align-items:center; font-size:15.5px}
.row:last-child{border-bottom:0}
.row .d{font-weight:700; font-variant-numeric:tabular-nums}
.row .x{color:var(--ink-soft)}
.row .pill{font-size:13px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--sunken); white-space:nowrap}
.row .pill.now{background:var(--orange); color:var(--on-bright)}

/* ---------- trust ---------- */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.tr{display:flex; gap:11px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:15px}
.tr svg{width:21px; height:21px; flex:none; margin-top:2px}
.tr b{display:block; font-size:14px}
.tr span{font-size:13px; color:var(--ink-soft); line-height:1.45}
.brands{display:flex; flex-wrap:wrap; gap:8px}
.brands span{font-family:var(--display); font-weight:500; font-size:14px; color:var(--ink-soft); border:1px solid var(--line); background:var(--surface); border-radius:var(--r-s); padding:7px 13px}

/* ---------- form ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:22px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13px; font-weight:700}
.field input,.field select,.field textarea{font:inherit; font-size:14.5px; padding:11px 13px; border-radius:var(--r-s); border:1.5px solid var(--line); background:var(--bg); color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ring); outline-offset:1px; border-color:var(--orange)}

/* ---------- cart drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(28,29,32,.45); z-index:60}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(400px,92vw); background:var(--bg); z-index:61; display:flex; flex-direction:column; box-shadow:-20px 0 50px -20px rgba(0,0,0,.4)}
.drawer header{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line)}
.drawer header h3{font-size:19px}
.drawer .items{flex:1; overflow-y:auto; padding:8px 20px}
.citem{display:grid; grid-template-columns:44px 1fr auto; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); align-items:center; font-size:14px}
.citem .sw{width:44px; height:44px; border-radius:10px}
.citem .q{font-size:13px; color:var(--ink-soft)}
.citem .rm{font-size:13px; color:var(--ink-soft); text-decoration:underline}
.drawer footer{padding:18px 20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
.ship{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); padding:11px 13px; font-size:13px}
.bar{height:7px; border-radius:999px; background:var(--sunken); margin-top:8px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--lime); width:0%; transition:width .3s ease}
.totals{display:flex; justify-content:space-between; font-family:var(--display); font-weight:500; font-size:19px}
.empty{padding:40px 0; text-align:center; color:var(--ink-soft); font-size:15px}

/* ---------- footer ---------- */
footer.site{background:var(--surface-2); color:var(--ink); border-top:1px solid var(--line); margin-top:50px; padding-block:40px 30px}
footer.site .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px}
footer.site h4{font-size:15px; margin-bottom:10px; color:var(--ink)}
footer.site a,footer.site p{color:var(--ink-soft); font-size:14px; text-decoration:none; display:block; margin-bottom:6px}
footer.site .nolink{display:block; margin-bottom:6px; font-size:14px; color:var(--ink-soft)}
footer.site .nolink i{font-style:normal; font-size:12px; opacity:.65}
footer.site a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--orange)}
footer.site .base{border-top:1px solid var(--line); margin-top:26px; padding-top:18px; font-size:13px; color:var(--ink-soft); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
/* the logo sits directly on the light footer; no holding shape needed */
footer.site .logohold{background:transparent; padding:0; border-radius:0}

@media (max-width:900px){
  .wrap{padding-inline:24px}
  .hero-grid{grid-template-columns:1fr; gap:24px}
  .hero-art{max-width:320px}
  .grid,.ages,.trust{grid-template-columns:repeat(2,1fr)}
  .panels{grid-template-columns:1fr}
  .salebar{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:86px 1fr; }
  .row .pill{grid-column:2}
}
@media (max-width:520px){
  .wrap{padding-inline:24px}
  .grid{gap:12px}
  .form{grid-template-columns:1fr}
  .brandmark .lg-full{display:none}
  .brandmark .lg-mark{display:block}
  .countdown{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

.toolbar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.search{flex:1; min-width:200px; font:inherit; font-size:15px; padding:11px 15px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.search:focus{outline:2px solid var(--ring); outline-offset:1px; border-color:var(--orange)}
.sortsel{font:inherit; font-size:14.5px; padding:11px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.badge{position:absolute; top:10px; right:10px; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:700; padding:3px 8px; border-radius:999px}
.packs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.pack{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:20px; display:flex; flex-direction:column; gap:9px}
.pack h3{font-size:17px}
.pack .who{font-size:13px; color:var(--ink-soft); font-weight:600}
.pack .what{font-size:15px; color:var(--ink-soft); line-height:1.5}
.pack .nums{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:9px}
.pack .price{font-family:var(--display); font-weight:600; font-size:21px; color:var(--price); font-variant-numeric:tabular-nums}
.pack .was{font-size:13px; color:var(--ink-soft); text-decoration:line-through}
.pack .meta{font-size:13px; color:var(--ink-soft)}
.modal{position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%); width:min(430px,92vw); max-height:88vh; background:var(--bg); border-radius:var(--r-l); display:flex; flex-direction:column; box-shadow:0 30px 70px -20px rgba(0,0,0,.45); overflow:hidden}
.modal header{display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line)}
.modal header h3{font-size:19px}
.modalbody{padding:18px 20px 22px; overflow-y:auto}
.paytabs{display:flex; gap:7px; margin-bottom:16px}
.paytab{flex:1; padding:10px; border-radius:var(--r-s); border:1.5px solid var(--line); background:var(--surface); font-size:14px; font-weight:700; color:var(--ink-soft)}
.paytab[aria-pressed="true"]{background:var(--sel); border-color:var(--ink); color:var(--on-sel)}
.qrbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:20px; text-align:center}
.qrsim{width:158px; height:158px; margin:0 auto; border-radius:10px; background:
  repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0/15px 15px,
  #FFFFFF; border:7px solid #FFFFFF; box-shadow:0 0 0 1px var(--line)}
.qrnote{font-size:13px; color:var(--ink-soft); margin-top:12px}
.qramt{font-family:var(--display); font-weight:500; font-size:27px; margin-top:4px; font-variant-numeric:tabular-nums}
.drop{border:2px dashed var(--line); border-radius:var(--r-s); padding:22px; text-align:center; font-size:13.5px; color:var(--ink-soft); background:var(--surface)}
.cardsim{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:16px}
.modal .field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.modal .field label{font-size:13px; font-weight:700}
.modal .field input,.modal .field select{font:inherit; font-size:14.5px; padding:11px 13px; border-radius:var(--r-s); border:1.5px solid var(--line); background:var(--bg); color:var(--ink)}
.note{font-size:13px; color:var(--ink-soft)}
@media (max-width:900px){.packs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.packs{grid-template-columns:1fr}}

/* --- phone sizing: keep the top of the home page short --- */
@media (max-width:900px){
  .hero-art.mosaic{grid-template-columns:repeat(3,1fr); grid-template-rows:1fr; aspect-ratio:3/1; max-width:100%; gap:6px; padding:8px}
  .hero-art.mosaic span:nth-child(n+4){display:none}
}
@media (max-width:620px){
  .hero-art.mosaic{display:none}
}

/* multi-page additions */
.logohold{display:inline-flex; align-items:center; background:#FFF8F1; border-radius:12px; padding:8px 12px}
.logohold img{display:block; filter:none!important}

.card .name{text-decoration:none; color:inherit; display:block}
.card .name:hover{text-decoration:underline; text-underline-offset:3px}
a.thumb{text-decoration:none}
.brands a{text-decoration:none}
.eyebrow a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line)}
.eyebrow a:hover{border-color:var(--orange)}
.nav a{white-space:nowrap; padding:9px 15px; border-radius:999px; font-size:15px; font-weight:600; color:var(--ink-soft); text-decoration:none}
.nav a[aria-current="page"]{background:var(--sunken); color:var(--ink)}
.nav a.hot[aria-current="page"]{background:var(--orange); color:var(--on-bright); text-decoration:none}
.nav a.hot{color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:3px; text-underline-offset:5px}
.grid .card[hidden]{display:none!important}

/* fix: category tiles are links */
.age{text-decoration:none}
.age .who,.age .n{text-decoration:none}