/* ═══════════════════════════════════════════════════════════════════════════
   COREVERSE V71 — READABLE TYPE (QUEUE SECTION AND BELOW)

   Why the display faces cannot be used for Thai
   ─────────────────────────────────────────────
   Checked directly against the files in /element/fonts/:

     H1  Northwood High .... 0 Thai glyphs
     H2  Strange Dreams .... 0 Thai glyphs
     H3  Longa Iberica ..... 0 Thai glyphs
     TH  EkkamaiNew ....... 92 Thai glyphs
     TH  EkkamaiVibe ...... 92 Thai glyphs

   The three display faces are Latin-only by construction, which is why they
   also carry `unicode-range: U+0020-007E`. Setting them on Thai text does not
   render Thai in that style — it renders empty boxes, and the browser silently
   falls back per glyph. That per-glyph fallback IS the mismatch that was
   reported: English drew in Northwood, Thai dropped to Ekkamai, inside one
   sentence.

   So "same font for Thai and English" and "use the H1/H2/H3 display faces"
   cannot both hold. This file resolves it the only way the font data allows:
   the Ekkamai family (from /element/fonts/TH text/) covers BOTH scripts, so
   both render identically. Hierarchy is carried by weight instead of by
   switching family.

   V71 change: switched to EkkamaiVibe, which ships in the same TH text folder
   but had never been installed on the site. It adds a Heavy (850) master that
   EkkamaiNew has no equivalent for — that is what delivers the requested
   weight increase. EkkamaiNew stays as the fallback.

   Scope: #queue, #custom, #price, #sizeguide, .mobile-action-bar, .footer,
   plus the price example dialog those sections open. Everything above the
   queue section is deliberately untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EkkamaiVibe · /element/fonts/TH text/EkkamaiVibe ──────────────────

   PUNCTUATION PATCH — why every face below carries a unicode-range.

   The Ekkamai fonts have a badly corrupted character map outside ASCII and
   Thai. Scanning the glyph outlines in the binaries: of the 190 codepoints
   mapped outside those two ranges, 83 (44%) point at the wrong outline —
   mostly Thai combining marks and stray letters. Confirmed examples:

     U+00B0  °  DEGREE SIGN -> draws a letter-height outline on the baseline
     U+00B7  ·  MIDDLE DOT  -> draws an "n"
     U+00D7  ×  MULTIPLY    -> draws a Thai tone mark
     U+2122  ™  TRADEMARK   -> draws a Thai tone mark
     ...plus most accented Latin (É Ö ü ç …) and smart quotes/daggers

   This is not something a stylesheet can repair — the wrong shapes are baked
   into the font files. What a stylesheet CAN do is stop the browser from
   reaching for those faces in the first place: a codepoint outside a face's
   unicode-range makes the browser skip that face and continue down the stack.

   So the range is limited to exactly what these fonts draw correctly:
     U+0020-007E  basic Latin  (verified: 0 mis-mapped)
     U+0E00-0E7F  Thai         (verified: all 92 glyphs correct)
   Everything else — ° · × – — " " and any accented Latin — falls through to
   Inter / system-ui, which draw them properly.

   Do not widen this range to "fix" a missing character. Widening it brings
   back the corrupt glyphs; the correct fix is to let the fallback handle it.

   Ekkamai New is re-declared under its own name here for the same reason: the
   globally-declared "Ekkamai New" has no such exclusion, so the scoped stack
   uses this patched alias instead.
   ───────────────────────────────────────────────────────────────────── */
@font-face{font-family:"Ekkamai Vibe";src:url("assets/fonts/ekkamaivibe-thin.ttf") format("truetype");font-weight:100 200;font-display:swap;unicode-range:U+0020-007E, U+0E00-0E7F}
@font-face{font-family:"Ekkamai Vibe";src:url("assets/fonts/ekkamaivibe-light.ttf") format("truetype");font-weight:300;font-display:swap;unicode-range:U+0020-007E, U+0E00-0E7F}
@font-face{font-family:"Ekkamai Vibe";src:url("assets/fonts/ekkamaivibe-regular.ttf") format("truetype");font-weight:400 500;font-display:swap;unicode-range:U+0020-007E, U+0E00-0E7F}
@font-face{font-family:"Ekkamai Vibe";src:url("assets/fonts/ekkamaivibe-bold.ttf") format("truetype");font-weight:600 700;font-display:swap;unicode-range:U+0020-007E, U+0E00-0E7F}
@font-face{font-family:"Ekkamai Vibe";src:url("assets/fonts/ekkamaivibe-heavy.ttf") format("truetype");font-weight:800 900;font-display:swap;unicode-range:U+0020-007E, U+0E00-0E7F}

@font-face{font-family:"Ekkamai New TH";src:url("assets/fonts/ekkamainew-regular.ttf") format("truetype");font-weight:400 600;font-display:swap;unicode-range:U+0020-007E, U+0E00-0E7F}
@font-face{font-family:"Ekkamai New TH";src:url("assets/fonts/ekkamainew-bold.ttf") format("truetype");font-weight:700 900;font-display:swap;unicode-range:U+0020-007E, U+0E00-0E7F}

:root{--core-th:"Ekkamai Vibe","Ekkamai New TH","Inter",system-ui,sans-serif}

#queue,
#custom,
#price,
#sizeguide,
.mobile-action-bar,
.footer,
.price-image-dialog{
  /* One family for both scripts — this is what makes TH and EN match. */
  --font-display:var(--core-th);
  --font-body:var(--core-th);
  --font-mono:var(--core-th);
  --font-h1:var(--core-th);
  --font-h2:var(--core-th);
  --font-h3:var(--core-th);
  --serif:var(--core-th);
  font-family:var(--core-th);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Baseline weight lift. Ekkamai New maps 400–600 to its regular master and
   700–900 to bold, so 500 stays regular-crisp while headings get real bold. */
#queue :where(p,span,b,i,small,strong,li,label,figcaption,td,th,div,a,button,input,select,textarea),
#custom :where(p,span,b,i,small,strong,li,label,figcaption,td,th,div,a,button,input,select,textarea),
#price :where(p,span,b,i,small,strong,li,label,figcaption,td,th,div,a,button,input,select,textarea),
#sizeguide :where(p,span,b,i,small,strong,li,label,figcaption,td,th,div,a,button,input,select,textarea),
.footer :where(p,span,b,i,small,strong,li,label,figcaption,td,th,div,a,button),
.price-image-dialog :where(p,span,b,i,small,strong,figcaption){
  font-family:var(--core-th);
}

/* ── Section headings ───────────────────────────────────────────────────────
   The big `.h2` word (Queue / Custom Order / Price Rate) keeps its editorial
   scale but now renders in the same family as the Thai beneath it. */
#queue .h2,
#custom .h2,
#price .h2{
  font-family:var(--core-th);
  font-weight:800;          /* EkkamaiVibe Heavy — the strongest master available */
  letter-spacing:.005em;
}

/* `.lead` was 15px Longa Iberica, uppercased, tracked at .06em. Thai has no
   uppercase, so the transform did nothing but the tracking still shredded it.
   Tracking and transform go; size and weight go up. */
#queue .lead,
#custom .lead,
#price .lead{
  font-family:var(--core-th);
  font-size:clamp(15px,1.5vw,17px);
  font-weight:600;
  letter-spacing:.005em;
  text-transform:none;
  line-height:1.75;
  color:#3e3e46;
}
#queue .lead [lang="en"],
#custom .lead [lang="en"],
#price .lead [lang="en"]{font-weight:500;color:#6b6b74}

/* `.micro` labels were 10px (8–9px in places) with .24em tracking — the single
   hardest thing to read on the page. */
#queue .micro,
#custom .micro,
#price .micro,
#sizeguide .micro,
.footer .micro,
.price-image-dialog .micro{
  font-family:var(--core-th);
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
  color:#4a4a52;
}
#price .price-unit-alert .micro{font-size:12px;color:rgba(255,255,255,.78)}
#sizeguide .quick__card--fit .micro,
#sizeguide .quick__card--collection .micro{color:rgba(255,255,255,.85)}

#queue .section__number,
#custom .section__number,
#price .section__number{font-family:var(--core-th);font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   QUEUE — readability + the mobile month picker
   ══════════════════════════════════════════════════════════════════════════ */
#queue .queue-toolbar strong{
  font-family:var(--core-th);
  font-weight:700;
  letter-spacing:.06em;
}
#queue .queue-month h3{font-size:13px;font-weight:800;letter-spacing:.09em;color:#141419}
#queue .queue-week span{font-size:10px;font-weight:700;color:#7a7a83}
#queue .queue-day{font-size:11px;font-weight:700}
#queue .queue-legend span{font-size:13px;font-weight:500}
#queue .queue-detail b{font-size:15px;font-weight:800;line-height:1.55;color:#141419}
#queue .queue-detail span{font-size:14px;font-weight:500;line-height:1.7;color:#5c5c66}
#queue .queue-detail .linklike{font-size:13px;font-weight:700}

/* Month picker. Hidden on desktop, where all twelve months are already laid
   out in a grid; it only earns its space on the single-month mobile view. */
.queue-monthnav{display:none}
.queue-monthnav__head{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:2px 0 12px;
}
.queue-monthnav__head strong{
  font-family:var(--core-th);
  font-size:17px;font-weight:700;letter-spacing:.02em;
  min-width:150px;text-align:center;
}
.queue-monthnav__head button{
  width:42px;height:42px;flex:0 0 42px;
  border:1px solid rgba(20,20,25,.14);border-radius:50%;
  background:#fff;line-height:1;
  /* Arrow glyphs, not chevrons — chevrons render as hairlines in Ekkamai New. */
  font-family:system-ui,sans-serif;font-size:19px;font-weight:400;color:#141419;
  display:grid;place-items:center;
}
.queue-monthnav__head button:active{background:#f2f2f5}
.queue-monthbar{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 10px;margin:0 -2px 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.queue-monthbar::-webkit-scrollbar{display:none}
.queue-monthchip{
  flex:0 0 auto;scroll-snap-align:center;
  min-width:74px;min-height:52px;padding:7px 12px;
  border:1px solid rgba(20,20,25,.14);border-radius:14px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.queue-monthchip b{
  font-family:var(--core-th);
  font-size:13px;font-weight:800;letter-spacing:.07em;
}
.queue-monthchip i{
  font-family:var(--core-th);
  font-size:11px;font-style:normal;font-weight:500;color:#7a7a83;
  white-space:nowrap;
}
.queue-monthchip.is-active{background:#141419;border-color:#141419;color:#fff}
.queue-monthchip.is-active i{color:rgba(255,255,255,.72)}

/* ══════════════════════════════════════════════════════════════════════════
   PRICE — the left-hand labels
   ══════════════════════════════════════════════════════════════════════════ */
#price .price-row__name b{
  font-family:var(--core-th);
  font-size:19px;font-weight:800;line-height:1.4;color:#141419;
}
#price .price-row__name>span{
  /* was 8px uppercase display type — unreadable at arm's length */
  font-family:var(--core-th);
  font-size:12px;font-weight:600;letter-spacing:.08em;color:#55555e;
}
#price .price-row__unit{font-size:12px;font-weight:600;letter-spacing:.06em;color:#6b6b74}
#price .price-row__amount{
  font-family:var(--core-th);
  font-style:normal;font-weight:800;color:#141419;
}
#price .price-row__amount small{font-size:12px;font-weight:600;letter-spacing:.04em}

#price .price-tier-card h3{font-size:19px;font-weight:800;letter-spacing:.01em;color:#141419}
#price .price-tier-card h3 small{font-size:13px;font-weight:500;letter-spacing:.02em}
#price .price-tier-list span{font-size:14px;font-weight:500;line-height:1.65}
#price .price-tier-list span b{font-size:15px;font-weight:700}
#price .price-tier-list span small{font-size:12.5px;font-weight:500;color:#6b6b74}
#price .price-tier-list strong{font-size:15px;font-weight:700;line-height:1.5}
#price .price-tier-list strong small{font-size:11.5px;font-weight:600;letter-spacing:.06em}
#price .price-per-nail{font-size:14px;font-weight:700}
#price .price-per-nail small{font-size:11px;font-weight:600;letter-spacing:.08em}
#price .price-unit-alert strong{font-size:16px;font-weight:800;line-height:1.55}
#price .price-unit-alert p{font-size:14px;font-weight:500;line-height:1.7}
#price .price-unit-alert i{font-size:12px;font-weight:700;font-style:normal;letter-spacing:.1em}
#price .price-tier-note,
#price .price-note{font-size:14px;font-weight:500;line-height:1.75;letter-spacing:.005em}
#price .price-note span{color:#6b6b74}

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOM ORDER · QUICK CARDS · FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
#custom .custom-entry__copy p{font-size:15px;font-weight:500;line-height:1.75}
#custom .custom-entry__contact-note{font-size:14.5px;font-weight:500;line-height:1.8}
#custom .custom-entry__channel b{font-size:16px;font-weight:800}
#custom .custom-entry__channel i{font-size:13px;font-style:normal;font-weight:500;line-height:1.6;color:#6b6b74}

#sizeguide .quick__title{font-family:var(--core-th);font-weight:700}
#sizeguide .quick__bilingual-link{font-size:14px;font-weight:600;line-height:1.6}
#sizeguide .quick__bilingual-link i{font-size:12.5px;font-style:normal;font-weight:500}

.footer .footer__tag{font-weight:700;letter-spacing:.08em}
.footer .footer__social b{font-size:15px;font-weight:800}
.footer .footer__social i{font-size:12.5px;font-style:normal;font-weight:500;color:#8a8a93}
.footer .footer__thai{font-size:14.5px;font-weight:500;line-height:1.75}
.footer .footer__mail{font-size:14px;font-weight:600}
.mobile-action-bar a{font-family:var(--core-th);font-size:13.5px;font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* Month picker becomes the primary control on the single-month view.
     The year stepper stays (jumping 12 months one tap at a time is tedious)
     but drops to a secondary weight so the two arrow rows don't read as
     duplicates of each other. */
  .queue-monthnav{display:block}
  #queue .queue-toolbar{justify-content:center;gap:10px;margin-bottom:14px}
  #queue .queue-toolbar strong{font-size:15px;letter-spacing:.1em;color:#6b6b74}
  #queue .queue-toolbar>button:not(.queue-manage){
    width:32px;height:32px;min-height:32px;font-size:13px;
    border-color:rgba(20,20,25,.1);color:#6b6b74;
  }
  #queue .queue-toolbar::before{
    content:"\0e1b\0e35  / YEAR";
    font-weight:700;font-size:10.5px;line-height:1;font-family:var(--core-th);
    letter-spacing:.14em;color:#9a9aa3;margin-right:2px;
  }

  #queue .queue-month{padding:6px 4px 10px;border-radius:16px}
  #queue .queue-month h3{font-size:14px;margin-bottom:10px}
  #queue .queue-week{gap:2px}
  #queue .queue-week span{font-size:11px;padding:4px 0}
  #queue .queue-days{gap:4px}
  #queue .queue-day{font-size:14px;font-weight:700;min-height:0;border-radius:50%}
  #queue .queue-detail b{font-size:15.5px}
  #queue .queue-detail span{font-size:14px}
  #queue .queue-legend span{font-size:13px}

  /* The reported issue: left-hand price labels were far too small to read. */
  #price .price-row{
    grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:18px 2px;
  }
  #price .price-row__name{min-width:0}
  #price .price-row__name b{font-size:21px;font-weight:800;line-height:1.35;color:#141419}
  #price .price-row__name>span{font-size:13px;letter-spacing:.06em}
  #price .price-row__unit{font-size:12.5px}
  /* The base rule sets white-space:nowrap, so a long unit label
     ("บาท / เล็บ / THB / nail") pushed the column off the right edge of the
     screen. Dropping the unit onto its own line keeps the number big and
     the whole row inside the viewport. */
  #price .price-row__amount{
    font-size:30px;min-width:0;white-space:normal;text-align:right;
    display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  }
  #price .price-row__amount small{
    display:block;font-size:11.5px;line-height:1.35;white-space:normal;
    max-width:20ch;text-align:right;
  }

  #price .price-tier-card h3{font-size:18px}
  #price .price-tier-list span{font-size:14.5px}
  #price .price-tier-list span b{font-size:15.5px}
  #price .price-tier-list strong{font-size:15px}
  #price .price-unit-alert strong{font-size:16px}
  #price .price-unit-alert p{font-size:14.5px}

  #queue .lead,#custom .lead,#price .lead{font-size:15px;line-height:1.8}
  #queue .micro,#custom .micro,#price .micro,#sizeguide .micro,.footer .micro{
    font-size:12px;font-weight:800;letter-spacing:.11em;
  }
}

@media (max-width:420px){
  .queue-monthchip{min-width:66px;padding:6px 9px}
  .queue-monthchip i{font-size:10px}
  #price .price-row__name b{font-size:20px}
  #price .price-row__amount{font-size:27px}
  #price .price-row__amount small{max-width:16ch;font-size:11px}
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — collection media library (cover lock + album)
   ══════════════════════════════════════════════════════════════════════════ */
.admin-gallery-preview{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px;margin:12px 0 6px;
}
.admin-media{
  position:relative;margin:0;padding:8px;
  border:1px solid rgba(20,20,25,.14);border-radius:14px;
  background:rgba(255,255,255,.7);
  display:flex;flex-direction:column;gap:7px;
}
.admin-media.is-cover{
  border-color:#141419;
  box-shadow:0 0 0 2px rgba(20,20,25,.14);
  background:#fff;
}
.admin-media__thumb{
  position:relative;display:block;aspect-ratio:1;border-radius:9px;
  overflow:hidden;background:#f2f2f5;
}
.admin-media__thumb img,
.admin-media__thumb video{width:100%;height:100%;object-fit:cover}
.admin-media__badge{
  position:absolute;left:5px;top:5px;
  padding:2px 6px;border-radius:5px;
  background:rgba(10,10,11,.82);color:#fff;
  font-weight:700;font-size:9px;line-height:1;font-family:var(--core-th);letter-spacing:.1em;
}
.admin-media figcaption{
  font-weight:700;font-size:11.5px;line-height:1.3;font-family:var(--core-th);
  letter-spacing:.02em;text-align:center;color:#5a5a63;
}
.admin-media.is-cover figcaption{color:#141419}
.admin-media__tools{display:flex;gap:6px;align-items:stretch}
.admin-media__tools button{
  flex:1;min-height:32px;padding:5px 6px;
  border:1px solid rgba(20,20,25,.16);border-radius:8px;background:#fff;
  font-weight:600;font-size:11px;line-height:1.2;font-family:var(--core-th);
  cursor:pointer;
}
.admin-media__tools button[data-media-remove]{flex:0 0 34px;font-size:13px}
.admin-media__tools button[aria-pressed="true"]{
  background:#141419;border-color:#141419;color:#fff;cursor:default;
}
.admin-media__tools button[disabled]{opacity:.4;cursor:not-allowed}

/* Collection dialog: clips sit in the same frame as stills. */
.catalog-dialog__visual video{width:100%;height:100%;object-fit:cover;display:block}
.catalog-dialog__thumbs button{position:relative}
.catalog-thumb__play{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:13px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);
  pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════════════
   LANGUAGE SPANS
   Bilingual copy is marked up as <b><span lang="th">…</span></b>, so any rule
   written as `.parent span` also matches the inner language span and silently
   overrides the parent's size and weight. The scoped rules above use the child
   combinator for that reason; this makes the intent explicit and covers any
   remaining case: a [lang] span never sets its own type, it inherits.
   ══════════════════════════════════════════════════════════════════════════ */
#queue :where(b,strong,h3,.h2) [lang],
#custom :where(b,strong,h3,.h2) [lang],
#price :where(b,strong,h3,.h2) [lang],
#sizeguide :where(b,strong,h3,.h2) [lang],
.footer :where(b,strong,h3) [lang]{
  font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit;
}