@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-Thin.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-ExtraLight.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-Light.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-Regular.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-Medium.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-SemiBold.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-Bold.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-ExtraBold.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Einstellung';
  src: url('/fonts/NeueEinstellung-Black.woff2') format('woff2'),
       url('/fonts/NeueEinstellung-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

body {
  font-family: 'Neue Einstellung', sans-serif;
  font-size: 16px;
  background-color: #fff3e1;
  background-image: url(./bg-dusty.png);
  background-position: top left; 
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  color: #2f272a;
}

.container {
    display: grid;
    grid-template-rows: 140px auto 50px;
    grid-template-columns: 175px auto;
    gap: 0px;
    margin: 0px auto;
    height: 100vh;
    grid-template-areas:
    "h h"
    "s m"
    "f f";
}

header {
  background-color: #cf5533;
  background-image: url(./texture-woodgrain.png);
  background-repeat: repeat;
  background-size: auto auto;
  color: #2f272a;
  padding: 0px;
  grid-area: h;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 0 20px;
}

aside {
    grid-area: s;
    padding: 0px;
    margin-top: 85px;
}

.nav-list {
  list-style-type: none;
  padding: 0px;
  margin: 0px 0px;
}

.nav-list li {
  margin: 10px 0px;
}

.nav-list li a {
  font-family: 'Neue Einstellung', sans-serif;
  font-weight: 600;
  font-size: 26px;
  text-decoration: none;
  color: #2f272a;
  background-color: #eaa133;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 4px 15px;
  display: block;
  text-align: right;
  margin: 0px 24px 18px -10px;
  transition: background-color 0.2s ease, color .2s ease, margin .5s ease;
}

.nav-list li a.active {
  background-color: #1dbdbb;
  color: #fff3e1; 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  margin: 0px -20px 18px;
}

.nav-list li a:hover {
  background-color: #1dbdbb;
  color: #fff3e1; 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  margin: 0px -20px 18px -10px;
}

main {
  color: #2f272a;
  grid-area: m;
  padding: 50px;
  margin: 0px 30px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  column-width: auto;
  columns: auto;
  aspect-ratio: 1 / 1;
  gap: 20px;
  margin-top: 20px;
}

.product {
  border: 1px solid #ddd;
  background: #f2e0c8;
  background-image: url(./bg-woodgrain-light.png);
  background-position: center center;
  background-size: cover;
  padding: 15px;
  text-align: left;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.product img {
  width: 100%;
  max-height: 200px;
  aspect-ratio: 1 / 1;
  padding: 5px;
  object-fit: contain;
  border-radius: 10px;
  align-self: center;
}

.product h4 {
  margin: 5px 0px;
  font-weight: 400;
}

.product p {
  font-weight: 400;
  color: #76696c;

}

.buy-button {
  background: #1dbdbb;
  color: #fff3e1;
  border: none;
  padding: 10px 15px;
  margin-top: 10px;
  margin-left: -15px; /* Make the left side flush with the product border */
  border-top-right-radius: 5px; /* Round the top-right corner */
  border-bottom-right-radius: 5px; /* Round the bottom-right corner */
  border-top-left-radius: 0; /* Keep the top-left corner squared */
  border-bottom-left-radius: 0; /* Keep the bottom-left corner squared */
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  position: relative; /* Position relative to contain the pseudo-element */
  overflow: hidden; /* Hide overflow to contain the pseudo-element */
  z-index: 0; /* Ensure the pseudo-element is behind the text */
  transition: color 0.2s ease; /* Transition for text color */
  display: inline-block; /* Ensure the button's width is consistent */
  align-self: start;
}

.buy-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #1a9b9b; /* Hover background color */
  transition: left 0.5s ease; /* Transition for the swipe effect */
  z-index: -1; /* Ensure the pseudo-element is behind the text */
}

.buy-button:hover::before {
  left: 0; /* Move the pseudo-element to the right */
}

.buy-button:hover {
  color: #fff3e1; /* Ensure text color remains the same on hover */
}

header .h {
    display: flex;
}

header .logo img {
  max-width: 225px;
  flex-shrink: 20;
  height: auto;
  margin: 10px 5px;
}

header .text {
  color: #2f272a;
  flex-grow: 1;
  white-space: nowrap;
  text-align: center;
  margin-top: 30px;
  margin-right: 100px;
}

header .text h1, header .text h2 {
  margin: 0;
}

header h1 {
  font-family: 'Neue Einstellung', sans-serif;
  font-weight: 300;
  font-size: 30px;
}

header h2 {
  font-family: 'Neue Einstellung', sans-serif;
  font-weight: 900;
  font-size: 16px;
}

h3 {
  font-family: 'Neue Einstellung', sans-serif;
  font-weight: 800;
  text-align: center;
}

footer {
  background-color: #2f272a;
  color: #fff3e1;
  grid-area: f;
  text-align: center;
  padding: 5px;
}

p {
  margin: 0;
  padding: 0;
  margin-bottom: 0px;
}