/*
  Custom stylesheet for the Desk up demo site.
  The design embraces a retro 8‑bit aesthetic through the use of a
  pixelated typeface (Press Start 2P) and a dark colour palette with blue
  highlights. Flexbox and responsive media queries ensure the layout
  adapts gracefully across screen sizes.
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #0a192f;
  color: #e0f2ff;
  line-height: 1.6;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #001f3f;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-container img {
  width: 50px;
  height: auto;
  margin-right: 10px;
}

.logo-container h1 {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.4rem;
  color: #00aaff;
  letter-spacing: 1px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

nav a {
  color: #e0f2ff;
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #00aaff;
}

.hero {
  position: relative;
}

.hero img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  display: block;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border: 2px solid #00aaff;
}

.hero-text h2 {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.8rem;
  color: #00aaff;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 #003b6f;
}

.hero-text p {
  font-size: 1rem;
  color: #e0f2ff;
}

main {
  padding: 40px 20px;
}

.category {
  margin-bottom: 60px;
}

.category h2 {
  font-family: 'Press Start 2P', cursive;
  color: #00aaff;
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.category p {
  max-width: 800px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product-card {
  background-color: #112f4a;
  border: 2px solid #004f80;
  border-radius: 6px;
  padding: 15px;
  /* Display exactly three cards per row. We subtract the total horizontal gap
     (40px) from the container width and divide the remainder by three. This
     ensures that there is no leftover space and all cards have equal width. */
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Group container for multiple buttons */
.btn-group {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.product-card img {
  width: 100%;
  /* Increase height to allow more room for uncropped images */
  height: 280px;
  /* Ensure the entire image is visible without cropping */
  object-fit: contain;
  /* Provide a subtle background so images with transparent areas look neat */
  background-color: #0a192f;
  margin-bottom: 10px;
  border: 1px solid #004f80;
  border-radius: 4px;
}

.product-card h3 {
  font-size: 1.5rem;
  color: #00aaff;
  margin-bottom: 10px;
  text-align: center;
}

.product-card p {
  font-size: 0.9rem;
  margin-bottom: 15px;
  text-align: center;
  flex-grow: 1;
}

/* Shopee button (default) styled with orange */
.btn {
  background-color: #f16c20; /* bright orange reminiscent of Shopee */
  color: #ffffff;
  padding: 8px 15px;
  text-decoration: none;
  font-size: 0.8rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

/* Hover state for Shopee button */
.btn:hover {
  background-color: #d85714;
}

/* Lazada button with different accent colour */
/* Lazada button styled with pink */
.btn.lazada {
  background-color: #e91e63;
  color: #ffffff;
}
.btn.lazada:hover {
  background-color: #c2185b;
}

footer {
  text-align: center;
  padding: 20px;
  background-color: #001f3f;
  font-size: 0.8rem;
  color: #7da8cf;
}

/* Horizontal scrollable product carousel wrapper */
.product-carousel {
  display: flex;
  align-items: center;
  /* ensure full width for arrows and items */
  width: 100%;
}

/* Container of cards inside carousel */
.product-carousel .products {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* Scrollbar styling for webkit browsers */
.product-carousel .products::-webkit-scrollbar {
  height: 8px;
}

.product-carousel .products::-webkit-scrollbar-thumb {
  background-color: #004f80;
  border-radius: 4px;
}

/* Buttons to scroll left/right */
.product-carousel .scroll-btn {
  background-color: #001f3f;
  color: #00aaff;
  border: 1px solid #004f80;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 50%;
  margin: 0 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.product-carousel .scroll-btn:hover {
  background-color: #004f80;
  color: #ffffff;
}

/* Ensure product cards within carousels use the same sizing as the default */
.product-carousel .product-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 280px;
}

@media (max-width: 768px) {
  .products {
    flex-direction: column;
  }
  .product-card {
    flex: 1 1 100%;
  }
  nav ul {
    gap: 10px;
    justify-content: center;
  }
  .hero img {
    height: 40vh;
  }
  .hero-text h2 {
    font-size: 1.3rem;
  }
  .logo-container h1 {
    font-size: 1rem;
  }
}