@media (max-width:420px) {
  .product-grid-4 .col-12 {
    width: 50% !important;
  }
}

/* Footer small tweaks to match reference design */
footer.main {
  background: transparent;
}

footer.main .widget-about .contact-lines p {
  margin: 0 0 .35rem 0;
  color: #ffffff;
}

footer.main .widget-about a img {
  vertical-align: middle;
}

footer.main .list-unstyled {
  padding: 0;
  margin: 0;
}

footer.main .gap-2 {
  gap: .5rem;
}

footer.main .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

footer.main .btn-icon img {
  width: 18px;
  height: 18px;
}

footer.main .widget-title {
  font-weight: 600;
  margin-bottom: .5rem;
}

footer.main .download-app img {
  max-width: 140px;
  margin-right: .5rem;
}

footer.main .footer-bottom {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

footer.main small,
footer.main .text-muted,
footer.main a {
  color: #ffffff !important;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* tetap rata kanan */
  text-align: right;
  padding-right: 30px;
}

/* ===== Tombol Login & Daftar ===== */
.auth-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.auth-buttons .btn {
  background-color: #ff6600; /* kuning default (Bootstrap warning) */
  border: none;
  color: #000;
  transition: all 0.3s ease;
}

.auth-buttons .btn:hover,
.auth-buttons .btn:focus {
  background-color: #ffffff !important; /* putih */
  color: #000000 !important; /* teks hitam */
  border: none;
}


/* ===== Menu Footer (Beranda, Tentang, Kontak) ===== */
.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin-bottom: 10px;
}

.footer-nav li a,
.footer-nav li a:link,
.footer-nav li a:visited {
  font-size: 18px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav li a:hover,
.footer-nav li a:focus {
  color: #ff6600 !important; /* oranye saat hover */
  outline: none;
  cursor: pointer;
}

/* ===== Rekomendasi Mobil (link terpisah) ===== */
.footer-rekomend {
  font-size: 18px;
  margin-top: 10px;
  text-align: right;
}

.footer-rekomend li a,
.footer-rekomend li a:link,
.footer-rekomend li a:visited {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-rekomend li a:hover,
.footer-rekomend li a:focus {
  color: #ff6600 !important; /* efek hover oranye */
  outline: none;
  cursor: pointer;
}

/* ===== Penyesuaian posisi di layar besar ===== */
@media (min-width: 992px) {
  .footer-right {
    padding-right: 20px;
  }

  .footer-right .footer-nav {
    transform: translateX(-76px);
    -webkit-transform: translateX(-76px);
  }

  .footer-rekomend {
    transform: translateX(-28px);
    -webkit-transform: translateX(-28px);
  }
}

@media (max-width:768px) {
  footer.main .d-md-flex {
    display: block !important;
  }

  footer.main .text-lg-end {
    text-align: left !important;
  }
}

/* Hero wave canvas styles */
.hero-wave-canvas {
  position: fixed;
  /* cover entire viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
  /* make sure canvas sits behind page content */
  pointer-events: none;
  /* allow clicks through the canvas */
}

/* Ensure main layout content sits above the canvas */
header.header-area,
main.main,
footer.main,
.mobile-header-active,
.mobile-header-wrapper-style {
  position: relative;
  z-index: 1;
}

/* Move header bottom border down so it doesn't overlap the logo box */
@media (min-width: 992px) {
  .header-area {
    padding-bottom: 28px !important;
  }

  .header-area .logo {
    position: relative;
    z-index: 5;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .header-area {
    padding-bottom: 18px !important;
  }

  .header-area .logo {
    position: relative;
    z-index: 5;
  }
}

/* Make page background transparent so canvas is visible behind everything */
html,
body {
  background: transparent !important;
}

/* Force footer text and links to white and remove extra spacing */
footer.main {
  background: transparent !important;
  color: #fff !important;
  margin-top: 0 !important;
  padding-top: .5rem !important;
}

footer.main,
footer.main * {
  color: #ffffff !important;
}

footer.main a {
  color: #ffffff !important;
  text-decoration: none;
}

footer.main a:hover {
  text-decoration: underline;
  opacity: .9;
}

/* Reduce extra spacing above footer sections so footer sits tight to content */
footer.main .border-top {
  margin-top: 0 !important;
  padding-top: .5rem !important;
}

footer.main .container.pb-4.mt-4,
footer.main .container.pb-4.mt-0 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

footer.main .footer-bottom {
  margin: 0 !important;
}

/* Shift footer contact block to the right on larger screens so text lines up
   with footer links below (adjust values if you need further fine-tuning) */
@media (min-width: 768px) {
  footer.main .contact-col {
    padding-left: 0.5rem;
  }
}

@media (min-width: 992px) {
  footer.main .contact-col {
    padding-left: 1.5rem;
  }
}

/* Slightly reduce logo size inside footer to avoid pushing contact text too far left */
footer.main .contact-col img {
  max-width: 140px;
  height: auto;
}

/* Reduce product card bottom spacing so grid is tighter */
.product-cart-wrap {
  margin-bottom: 1rem !important;
}

/* If any large spacer elements exist, hide them (safe fallback) */
.spacer,
.page-spacer,
.big-space {
  display: none !important;
}

/* --------------------------------------------------
   Header auth buttons (desktop) and separator tweak
   - Keep mobile header buttons unchanged
   - On desktop, show login and register side-by-side on the right
   - Move header bottom border slightly upward by reducing padding
--------------------------------------------------- */

/* FLEX WRAP agar sejajar horizontal */
.header-right .auth-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Style umum tombol login & daftar */
.header-right .auth-buttons .categori-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  color: #ffffff !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.header-right .auth-buttons .categori-button:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* Tombol Login */
.header-right .auth-buttons .login-btn {
  border: 1px solid #ff7f00;
  background: transparent;
  color: #ffffff !important;
}

.header-right .auth-buttons .login-btn:hover {
  background: #ff7f00;
}

/* Tombol Daftar */
.header-right .auth-buttons .register-btn {
  background: #ff7f00;
  border: 1px solid #ff7f00;
  color: #fff !important;
  transition: all 0.3s ease;
}

.header-right .auth-buttons .register-btn:hover {
  background: #ffffff;
  color: #ff7f00 !important;
  border-color: #ff7f00;
}

/* ✅ Tombol Beli */
.header-right .auth-buttons .checkout-btn {
  background: #ff7f00;
  border: 1px solid #ff7f00;
  color: #fff !important;
  transition: all 0.3s ease;
}

.header-right .auth-buttons .checkout-btn:hover {
  background: #ffffff;
  color: #ff7f00 !important;
  border-color: #ff7f00;
}

section.text-center h2 {
  font-size: 28px;
  font-weight: 700;
  color: #222;
}

section.text-center p {
  color: #777;
  font-size: 15px;
  margin-bottom: 10px;
}

/* Desktop: move header bottom border up slightly and reduce padding so the line appears closer to the logo */
@media (min-width: 992px) {
  .header-area {
    padding-bottom: 12px !important;
    /* reduced from 28px to bring the border up */
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* ensure the logo stays on top of the border */
  .header-area .logo {
    position: relative;
    z-index: 6;
  }
}