/* Shared page basics. Each page's own layout styles sit in its <style> block,
   copied from the approved mockups: .v-desk = desktop layout, .v-phone = phone layout. */
html, body { margin: 0; background: #F5EEDD; }
.v-phone { display: none; }
@media (max-width: 760px) {
  .v-desk { display: none; }
  .v-phone { display: block; }
}
/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Tablets / small laptops (761–1000px): the desktop layouts were designed at 1440px wide,
   so the Store's two side-by-side blocks stack here instead of squeezing. */
@media (min-width: 761px) and (max-width: 1000px) {
  .theme-store .v-desk .hero { grid-template-columns: 1fr; gap: 44px; }
  .theme-store .v-desk .grid { margin-top: 0; }
  .theme-store .v-desk .merch { grid-template-columns: 1fr; gap: 28px; }
  .theme-about .v-desk .h1 { font-size: 52px !important; }
  .theme-about .v-desk .three { gap: 32px; }
  .theme-about .v-desk .three .go { overflow-wrap: anywhere; font-size: 17px; }
}