*,
::before,
::after {
  box-sizing: border-box;
}

:root {
  /* Core colors */
  --primary: #3f4a3c;
  --on-primary: #ffffff;

  --secondary: #8a8576;
  --on-secondary: #1f1f1f;

  --tertiary: #6b8f84;
  --on-tertiary: #1f1f1f;

  --error: #ba1a1a;
  --on-error: #ffffff;

  /* Containers */
  --primary-container: #f9e88b;
  --on-primary-container: #221b00;

  --secondary-container: #efe7c6;
  --on-secondary-container: #221e0c;

  --tertiary-container: #cbeed6;
  --on-tertiary-container: #002113;

  --error-container: #ffdad6;
  --on-error-container: #410002;

  /* Surfaces */
  --surface: #fdf8f2;
  --surface-dim: #e6e1d9;
  --surface-bright: #fdf8f2;

  --surface-container-lowest: #ffffff;
  --surface-container-low: #f7f2ea;
  --surface-container: #f1ece4;
  --surface-container-high: #ebe6de;
  --surface-container-highest: #e5e0d8;

  /* Text / outlines */
  --on-surface: #1d1c16;
  --on-surface-variant: #4a4739;
  --outline: #7b7767;
  --outline-variant: #cbc6b4;

  /* Inverse */
  --inverse-surface: #323027;
  --inverse-on-surface: #f5f1e8;
  --inverse-primary: #e0c84f;

  /* Utility */
  --scrim: #000000;
  --shadow: #000000;

  /* Sizing */
  --column-width: 1080px;
  --gap-size: 1.5rem;

  /* Font */
  --font-light: 200;
  --font-medium: 500;
  --font-bold: 800;
}

body {
  margin: unset;
  font-family: Helvetica, Arial, sans-serif;
  background-color: var(--surface);
  color: var(--on-surface);
}

dialog {
  background-color: var(--surface);
  padding: 1em;
  width: 50ch;
  margin: auto auto;
  position: relative;
}

dialog form input,
dialog form button {
  display: block;
  inline-size: 100%;
}

dialog form textarea {
  display: block;
  inline-size: 100%;
}

dialog .close-modal {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  cursor: pointer;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
}

ul.stack {
  list-style-type: none;
  padding-inline-start: 0;
}

footer {
  margin-block-start: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer > .social-links {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  padding-inline-start: 0;
  gap: var(--gap-size);
}

footer > .policy {
  display: block;
}

.T-layout {
  display: flex;
  gap: var(--gap-size);
}

.T1-layout {
  flex: 2;
}

.T2-layout {
  flex: 4;
}

.social-links > li > a {
  display: block;
  text-decoration: none;
}

footer li > a > img {
  width: 1.2rem;
}

.stack > * + * {
  margin-block-start: 1.5em;
}

.container {
  max-inline-size: var(--column-width);
  margin-inline: auto;
}

.site-nav {
  display: flex;
  gap: var(--gap-size);
  padding: 0.5rem;
  list-style-type: none;
  background-color: var(--surface-container);
}

.site-nav > li > a {
  display: block;
  padding: 0.5em 1em;
  color: var(--on-surface);
  text-decoration: none;
}

.site-nav > .nav-left {
  margin-inline-end: auto;
  font-weight: var(--font-bold);
}

.site-nav > .nav-right {
  margin-inline-start: auto;
  font-weight: var(--font-bold);
}

.flex {
  display: flex;
  gap: var(--gap-size);
}

.page-header {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

.page-header h1 {
  max-inline-size: var(--column-width);
  margin-inline: auto;
}
main {
  display: flex;
  flex-direction: column;
}

.home-content {
  flex: 4;
}

.site-nav .selected-nav {
  font-weight: var(--font-bold);
  border-bottom: 0.2rem solid var(--primary);
}

.admin-nav .selected-nav {
  font-weight: var(--font-bold);
  border-left: 0.2rem solid var(--primary);
}

.admin-nav ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-size);
  list-style-type: none;
  background-color: var(--surface-container);
  padding-inline-start: 0;
  padding: 1rem;
  margin-block: 0;
}

.admin-nav li {
  padding: 0.5em 1em;
  text-transform: capitalize;
}

.admin-nav a {
  text-decoration: none;
}

.admin-header {
  display: flex;
}

.admin-header button {
  margin-inline-start: auto;
}

ul.admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-size);
  list-style-type: none;
  padding-inline-start: 0;
}

.admin-list li form {
  display: inline;
}

ul.categories-carousel {
  display: flex;
  gap: var(--gap-size);
  list-style-type: none;
  padding-inline-start: 0;
  flex-wrap: wrap;
  justify-content: space-between;
}

.categories-carousel li {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  background-color: var(--surface-container);
  text-transform: capitalize;
}

.categories-carousel__item img {
  max-inline-size: 8rem;
}

.categories-carousel__item > div {
  padding: 0.5em 0;
}

.banner-items ul {
  display: flex;
  gap: var(--gap-size);
  flex-wrap: wrap;
  list-style-type: none;
  padding-inline-start: 0;
}

.banner-items__item {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-container);
  padding: 1em;
}

.banner-items__item__info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner-items__item__info * {
  display: block;
}

.banner-items__item__info img {
  max-inline-size: 8rem;
}

.banner-items__item__info span {
  max-inline-size: 8rem;
  overflow: hidden;
}

.banner-items__item__actions {
  justify-self: flex-end;
}

input[type='submit'] {
  border: 1px solid var(--tertiary);
  background-color: white;
  cursor: pointer;
  padding: 0.5em 1rem;
  text-transform: uppercase;
}

button {
  border: 1px solid var(--tertiary);
  background-color: white;
  cursor: pointer;
  padding: 0.5em 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
}

a.button {
  border: 1px solid var(--tertiary);
  background-color: white;
  cursor: pointer;
  padding: 0.5em 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  text-decoration: none;
}

button.icon-button {
  padding: unset;
  background-color: unset;
  border: none;
}

button.icon-button > img {
  width: 24px;
}

.banner-items__item__actions button {
  border: 1px solid var(--tertiary);
  background-color: white;
  cursor: pointer;
  padding: 0.5em 1rem;
  text-transform: uppercase;
}

.brand-category ul {
  display: flex;
  gap: var(--gap-size);
  flex-wrap: wrap;
  list-style-type: none;
  padding-inline-start: 0;
}

.brand-category__item {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-container);
  padding: 1em;
}

.brand-category__item__info {
  display: flex;
  gap: var(--gap-size);
  align-items: center;
}

.brand-category__item__info > img {
  display: flex;
  gap: var(--gap-size);
  align-items: center;
  max-inline-size: 2.5rem;
  border-radius: 50%;
}

.brand-category__item__actions {
  display: flex;
  gap: var(--gap-size);
  align-items: center;
}

.brand-category__item__actions button {
  border: 1px solid var(--tertiary);
  background-color: white;
  cursor: pointer;
  padding: 0.5em 1rem;
  text-transform: uppercase;
}

.item__horiz {
  display: flex;
  gap: var(--gap-size);
  padding: 1rem;
  background-color: var(--surface-container);
}

.item__horiz > .item__info {
  max-width: 24rem;
}

.item__horiz > img {
  display: block;
  width: 4rem;
}
.item__horiz > .item__info {
  max-width: 24rem;
}

.item__horiz > .item__actions {
  margin-inline-start: auto;
}

.item__actions button {
  border: 1px solid var(--tertiary);
  background-color: white;
  cursor: pointer;
  padding: 0.5em 1rem;
  text-transform: uppercase;
}

.home-side ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-size);
  list-style-type: none;
}

.home-side li {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding: 1em;
  gap: calc(var(--gap-size) / 2);
  background-color: var(--surface-container);
}

.home-side li * {
  display: block;
  inline-size: 100%;
}

.home-side button {
  border: 1px solid var(--tertiary);
  background-color: white;
  cursor: pointer;
  padding: 0.5em 1rem;
  text-transform: uppercase;
}

#logout {
  display: block;
  padding: 0.5em 1em;
}

#hero {
  background-image: url('https://thumbs.dreamstime.com/b/woman-ties-shoelaces-outdoors-hijab-modern-life-fitness-european-setting-muslim-woman-blue-hijab-ties-her-shoes-418482712.jpg');
  height: 35vh;
}

/* THEMING */

.primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
}

.error {
  background-color: var(--error);
  color: var(--on-error);
}

.variant {
  color: var(--on-surface-variant);
}