/* Site fonts (SIL Open Font License, see fonts/LICENSE.txt)
   Rajdhani = large text: titles, shirt names, prices, menu, big buttons
   Michroma = small text: descriptions, shirt options, labels, notes */
@font-face { font-family: "Rajdhani"; src: url(/fonts/rajdhani-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(/fonts/rajdhani-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(/fonts/rajdhani-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Michroma"; src: url(/fonts/michroma-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --font-large: "Rajdhani", "Helvetica Neue", Arial, sans-serif;
  --font-small: "Michroma", "Helvetica Neue", Arial, sans-serif;
}

/* small text everywhere by default. Michroma is a wide font, so small text is set a touch smaller */
body { font-family: var(--font-small) !important; }
button, input, select, textarea { font-family: inherit; }
.description, .label, .options button, .item-options, .note, .remove, .qty, .empty,
.motion-toggle, .error { font-size: 0.86em; }
input { font-size: 1.05rem !important; letter-spacing: 0.08em; }
.toggle { font-size: 0.85rem !important; letter-spacing: 0.1em; }

/* large text */
h1, .price, .item-name, .summary, .cart-link, .add-to-cart, .checkout, button[type=submit],
.menu-panel nav a, .menu-close, .construction, #colors button, #sizes button, #variants button {
  font-family: var(--font-large) !important;
  font-weight: 600;
}
h1 { font-size: 2rem !important; letter-spacing: 0.04em; }
.price { font-size: 1.5rem !important; font-weight: 500; }
.add-to-cart, .checkout, button[type=submit] { font-size: 1.05rem !important; letter-spacing: 0.18em; }
.menu-panel nav a { font-size: 1.35rem !important; letter-spacing: 0.12em; }
.menu-close { font-size: 0.95rem !important; }
.item-name { font-size: 1.05rem !important; }

/* password page: password box, its placeholder and SHOW/HIDE in Rajdhani; REDUCE MOTION stays Michroma */
input, input::placeholder, .toggle { font-family: var(--font-large) !important; font-weight: 600; }
.motion-toggle { font-family: var(--font-small) !important; }
.construction { font-size: 0.95rem !important; letter-spacing: 0.25em; text-align: center; margin: -20px 0 0; color: #111; }
/* shirt page: color and size buttons in Rajdhani, a bit larger */
#colors button, #sizes button, #variants button { font-size: 1rem !important; letter-spacing: 0.08em; }
/* Michroma is wide: keep the placeholder clear of the SHOW button */
.field input::placeholder { letter-spacing: 0.08em; }
.field input { padding-right: 60px !important; }

/* header logo: the plain image is only a placeholder that logo-anim.js swaps for the 3D logo.
   Keep it invisible from the first paint so it never flashes between pages (it still holds its space). */
header .logo, .topbar .logo { visibility: hidden; }   /* no flash */