@import url("/components/header/header.css");
@import url("/components/header/mobileHeader.css");
@import url("/components/footer/footer.css");
@import url("./shop.css");
@import url("./product.css");
@import url("./cart.css");
@import url("./checkout.css");
@import url("./auth.css");
@import url("./addProduct.css");
@import url("./comingSoon.css");
@import url("./productsTable.css");
@import url("./dashboard.css");

@import url("../../fonts/fonts.css");


/* ================= ROOT ================= */
:root {
  --header-height: 96px;
  --mobile-header-height: 64px;
}

/* ================= BASE ================= */
html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: var(--header-height);
  font-family: 'Didot';
}

/* ================= LAYOUT ================= */
#globalLayout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#app {
  flex: 1;
  width: 100%;
  min-height: 200px;
}

/* ================= HEADER TOGGLE ================= */
.desktop-header {
  display: block;
}

.mobile-header {
  display: none;
}

/* ================= MOBILE ================= */
@media (max-width: 1024px) {

  .desktop-header {
    display: none !important;
  }

  .mobile-header {
    display: block !important;
  }

  body {
    padding-top: var(--mobile-header-height);
  }
}