@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

:root {
  --primary: #007bff;
  /* Blue like the image */
  --secondary: #0056b3;
  --accent: #ff6b00;
  /* Orange for buttons */
  --dark: #2d3436;
  --light: #f5f6fa;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #f9f9f9;
  color: var(--dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- NAVIGATION UPDATED --- */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  background: var(--primary);
  /* Blue Background */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 80px;
  gap: 20px;
}

.logo h1 {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  letter-spacing: -1px;
}

.logo span {
  color: #ffeb3b;
}

/* Nav Search Bar */
.nav-search-container {
  flex: 1;
  max-width: 700px;
  display: flex;
  background: white;
  border-radius: 40px;
  padding: 2px;
  height: 45px;
  align-items: center;
}

.nav-search-container input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 20px;
  border-radius: 40px 0 0 40px;
  font-size: 0.95rem;
  height: 100%;
}

.search-category-select {
  border: none;
  outline: none;
  background: #eee;
  padding: 0 15px;
  height: 100%;
  border-left: 1px solid #ddd;
  color: #555;
  cursor: pointer;
  display: none;
}

@media (min-width: 900px) {
  .search-category-select {
    display: block;
  }
}

.search-btn {
  background: var(--accent);
  color: white;
  border: none;
  width: 50px;
  height: 100%;
  border-radius: 0 40px 40px 0;
  cursor: pointer;
  font-size: 1.1rem;
  transition: 0.3s;
}

.search-btn:hover {
  background: #e65e00;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 600;
  font-size: 0.95rem;
}

.nav-links a,
.nav-links button,
.nav-links span {
  text-decoration: none;
  color: white !important;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-links a:hover {
  opacity: 0.8;
}

/* CURVED BUTTONS IN NAV */
.nav-links .btn {
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 30px;
  /* Highly curved */
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-block;
  text-align: center;
}

.nav-links .btn:hover {
  background: white;
  color: var(--primary) !important;
}

.user-greeting {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.user-greeting strong {
  font-size: 1rem;
  color: white;
}

/* --- HERO SECTION --- */
.hero {
  background: linear-gradient(180deg, var(--primary) 0%, #f9f9f9 100%);
  color: var(--dark);
  text-align: center;
  padding: 0px 20px 0px;
}

.hero h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: white;
}

.categories {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.categories button {
  padding: 8px 20px;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 30px;
  /* Curved */
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.categories button:hover {
  background: white;
  color: var(--primary);
}

/* --- PRODUCTS GRID --- */
.products {
  padding: 20px 5%;
  flex: 1;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* Products nathi / Loading welawe container eka his wena eka nawaththanna */
.product-grid:empty,
.product-grid p {
  grid-column: 1 / -1;
  text-align: left;
  width: 100%;
}

/* =========================================
   PREMIUM PRODUCT CARDS (ADAPTIVE DESIGN)
   ========================================= */
.product-card {
  background: #ffffff;
  width: 260px;
  height: 420px;
  /* ✅ කාඩ් එකේ උස Fix කළා */
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #edf2f7;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 123, 255, 0.12);
  border-color: #cce5ff;
}

.badge-group {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ff6b00, #ff8e3c);
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(255, 107, 0, 0.3);
}

.wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b2bec3;
  z-index: 2;
  transition: 0.2s;
}

.wishlist-btn:hover,
.wishlist-btn.active {
  color: #ff4757;
}

.card-img {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
}

.card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.product-card:hover .card-img img {
  transform: scale(1.05);
}

.card-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.category {
  font-size: 0.75rem;
  color: #6c5ce7;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 5px;
}

.title {
  font-size: 1.05rem;
  color: #2d3436;
  margin: 0 0 5px 0;
  font-weight: 600;
  line-height: 1.3;
  height: 2.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ⭐ RATING SECTION */
.rating {
  font-size: 0.8rem;
  color: #f1c40f;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rating span {
  color: #636e72;
  font-size: 0.75rem;
  font-weight: 600;
}

/* 🟢 DYNAMIC PRICE BOX */
.price-box {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 15px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  margin-top: auto;
}

.price-box.has-group {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #fff0e6;
  border: 1px solid #ffd8b8;
}

.retail-side p {
  margin: 0;
  font-size: 0.7rem;
  color: #636e72;
  font-weight: 600;
}

.retail-side strong {
  font-size: 0.95rem;
  color: #2d3436;
}

.price-divider {
  width: 1px;
  height: 30px;
  background-color: #ffb880;
  opacity: 0.6;
  margin: 0 5px;
}

.group-side {
  text-align: right;
}

.group-side p {
  margin: 0;
  font-size: 0.7rem;
  color: #ff6b00;
  font-weight: bold;
}

.group-side strong {
  font-size: 1.2rem;
  color: #d35400;
  font-weight: 800;
}

.price-box.no-group {
  align-items: flex-start;
}

.price-box.no-group p {
  margin: 0;
  font-size: 0.75rem;
  color: #636e72;
  font-weight: 600;
}

.price-box.no-group strong {
  font-size: 1.2rem;
  color: #007bff;
  font-weight: 800;
}

/* Product Card Button */
.card-btn {
  width: 100%;
  background: #ff6b00;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.card-btn:hover {
  background: #e65c00;
}

/* GENERAL CURVED BUTTON STYLE */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 30px;
  /* Highly curved */
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
  background: var(--primary);
  color: white;
}

.btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.heart-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  color: #dfe6e9;
  cursor: pointer;
  background: white;
  padding: 5px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}

.heart-btn:hover {
  color: #ff7675;
}

.heart-btn.active {
  color: #d63031;
}

.zoom-container {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  cursor: crosshair;
}

.zoom-container img {
  width: 100%;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.zoom-container:hover img {
  transform: scale(2);
}

.timer-box {
  background: #d63031;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.1rem;
  font-family: monospace;
}

/* --- MODAL --- */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 15px;
  /* Curved corners */
  width: 450px;
  max-width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: slideDown 0.3s ease;
  margin: auto;
}

@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  z-index: 10;
}

/* --- TOAST --- */
.toast-box {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: #2d3436;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  min-width: 250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideInRight 0.3s ease forwards;
}

.toast.success {
  border-left: 5px solid #00b894;
}

.toast.error {
  border-left: 5px solid #d63031;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* --- AUTH FORMS --- */
.auth-container {
  padding: 10px 10px;
  text-align: center;
}

.auth-container h2 {
  color: var(--dark);
  margin-bottom: 25px;
  font-size: 1.8rem;
}

.input-group {
  position: relative;
  margin-bottom: 15px;
}

.input-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #dfe6e9;
  border-radius: 12px;
  font-size: 0.95rem;
  outline: none;
  transition: 0.3s;
  background: #fdfdfd;
}

.input-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

.input-group i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #b2bec3;
  cursor: pointer;
}

.forgot-pass {
  display: block;
  text-align: right;
  font-size: 0.85rem;
  color: #636e72;
  margin-bottom: 20px;
  text-decoration: none;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: #ff6b00;
  color: white;
  border: none;
  border-radius: 30px;
  /* CURVED BUTTON */
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  text-transform: uppercase;
}

.divider {
  display: flex;
  align-items: center;
  color: #b2bec3;
  margin: 25px 0;
  font-size: 0.9rem;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dfe6e9;
}

.divider span {
  padding: 0 10px;
}

.social-login {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid #dfe6e9;
  background: white;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
  color: var(--dark);
  flex: 1;
}

.social-btn:hover {
  background: #f9f9f9;
  transform: translateY(-2px);
}

.switch-auth {
  margin-top: 20px;
  font-size: 0.9rem;
  color: #636e72;
}

.switch-auth a {
  color: #00b894;
  font-weight: bold;
  text-decoration: none;
}

/* --- FOOTER --- */
footer {
  background: #2d3436;
  color: white;
  padding: 40px 10% 20px;
  margin-top: auto;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.footer-col h3 {
  color: var(--accent);
  margin-bottom: 15px;
}

.footer-col p,
.footer-col a {
  color: #b2bec3;
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: white;
  padding-left: 5px;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  color: #636e72;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  nav {
    flex-direction: column;
    height: auto;
    padding: 10px 5%;
    gap: 10px;
  }

  .nav-search-container {
    width: 100%;
    order: 2;
  }

  .nav-links {
    width: 100%;
    justify-content: space-between;
    order: 1;
  }
}

/* --- ORDER TIMELINE STYLES --- */
.timeline {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #dfe6e9;
  z-index: 0;
}

.timeline-step {
  position: relative;
  z-index: 1;
  text-align: center;
  background: white;
  padding: 0 10px;
}

.step-icon {
  width: 35px;
  height: 35px;
  background: #dfe6e9;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 5px;
  font-size: 0.9rem;
}

/* Status Colors */
.timeline-step.completed .step-icon {
  background: #00b894;
  /* Green for completed */
}

.timeline-step.active .step-icon {
  background: #0984e3;
  /* Blue for current step */
  box-shadow: 0 0 0 4px rgba(9, 132, 227, 0.2);
}

.step-label {
  font-size: 0.8rem;
  color: #636e72;
  font-weight: 500;
}

/* ========================================= */
/* --- NEW: SHOP PAGE STYLES --- */
/* ========================================= */
.shop-layout {
  display: flex;
  max-width: 1300px;
  margin: 40px auto;
  gap: 25px;
  padding: 0 5%;
}

.shop-sidebar {
  width: 260px;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  height: fit-content;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
}

.shop-main {
  flex: 1;
  width: 100%;
  min-height: 50vh;
}

.filter-group {
  margin-bottom: 25px;
}

.filter-group h4 {
  margin-bottom: 12px;
  color: var(--dark);
  font-size: 1.1rem;
  border-bottom: 2px solid #f1f2f6;
  padding-bottom: 8px;
}

.price-inputs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.price-inputs input[type="number"] {
  width: 48%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.filter-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f9f9f9;
}

@media (max-width: 900px) {
  .shop-layout {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 1300px;
    margin: 40px auto;
    gap: 25px;
    padding: 0 5%;
    box-sizing: border-box;
  }

  .shop-sidebar {
    width: 260px;
    min-width: 260px;
    flex-shrink: 0;
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    height: fit-content;
    position: sticky;
    top: 100px;
  }
}

/* SECONDARY NAV BAR STYLES */
.secondary-nav {
  background-color: #ffffff;
  border-bottom: 1px solid #f1f2f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  width: 100%;
  z-index: 990;
}

.sec-nav-container {
  display: flex;
  justify-content: center;
  gap: 35px;
  padding: 12px 5%;
  overflow-x: auto;
  white-space: nowrap;
}

.sec-nav-container::-webkit-scrollbar {
  display: none;
}

.sec-nav-container a {
  text-decoration: none;
  color: #4a5568;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.sec-nav-container a i {
  color: #007bff;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.sec-nav-container a:hover {
  color: #ff6b00;
}

.sec-nav-container a:hover i {
  transform: scale(1.15);
}

/* ========================================= */
/* --- MOBILE SECONDARY NAV (ICONS ONLY) --- */
/* ========================================= */
@media (max-width: 768px) {

  /* වචන ටික (span) ෆෝන් එකේදී සඟවන්න */
  .sec-nav-container a span {
    display: none !important;
  }

  /* අයිකන් ටික ලොකු කරන්න */
  .sec-nav-container a i {
    font-size: 1.5rem !important;
    margin: 0;
  }

  /* අයිකන් ගොඩක් තියෙන නිසා ස්ක්‍රෝල් කරන්න ඉඩ දීම */
  .sec-nav-container {
    gap: 20px !important;
    /* පරතරය පොඩ්ඩක් අඩු කළා */
    padding: 15px 5% !important;
    justify-content: center !important;
    /* මැදට ගත්තා */
    overflow-x: auto !important;
    scroll-behavior: smooth;
  }

  /* ස්ක්‍රෝල් බාර් එක නොපෙනී යාමට හැදීම (පිරිසිදු පෙනුමට) */
  .sec-nav-container::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {

  /* 1. උඩ නිල් පාට බාර් එකේ තියෙන Join Group සහ My Ads බලෙන් හැංගීම */
  .hide-on-mobile,
  .nav-links button[onclick="openJoinModal()"],
  .nav-links a[href*="my-ads"] {
    display: none !important;
  }

  /* 2. යට මෙනු එකේ වචන හැංගීම */
  .sec-nav-container a span {
    display: none !important;
  }

  /* 3. යට අයිකන් 7 හරියටම සමාන දුරින් මැදට කිරීම (Perfect Center) */
  .secondary-nav .sec-nav-container {
    display: flex !important;
    justify-content: space-evenly !important;
    /* තිරය පුරා සමානව බෙදීම */
    align-items: center !important;
    gap: 0 !important;
    padding: 12px 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    /* ස්ක්‍රෝල් වීම නවතා මැදටම ගැනීම */
  }

  .secondary-nav .sec-nav-container a {
    flex: 1;
    /* හැම අයිකන් එකකටම එක සමාන ඉඩක් ලබා දීම */
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 0 !important;
  }

  .secondary-nav .sec-nav-container a i {
    font-size: 1.5rem !important;
  }
}

/* ========================================= */
/* --- MOBILE CAROUSEL & NAV CENTERING --- */
/* ========================================= */
@media (max-width: 768px) {

  /* 1. අයිකන් මෙනු එක හැම පේජ් එකකම හරියටම මැදට ගැනීම */
  .secondary-nav .sec-nav-container {
    display: flex !important;
    justify-content: center !important;
    /* අනිවාර්යයෙන්ම මැදට ගන්නවා */
    align-items: center !important;
    gap: 25px !important;
    /* අයිකන් අතර පරතරය */
    padding: 12px 10px !important;
    overflow-x: auto !important;
    /* ඉඩ මදි වුණොත් විතරක් ස්ක්‍රෝල් වෙන්න දෙනවා */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .secondary-nav .sec-nav-container a {
    flex: 0 0 auto !important;
    /* අයිකන් ඇකිලෙන්නේ නැතුව ස්ථාවරව තියාගන්නවා */
    margin: 0 !important;
  }

  /* 2. Related Products ටික වමට/දකුණට Swipe කරන්න පුළුවන් විදිහට හැදීම */
  #related-products .product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* පහළට කඩන එක නවත්වනවා */
    overflow-x: auto !important;
    /* තිරස් අතට ස්ක්‍රෝල් වෙන්න දෙනවා */
    overflow-y: hidden !important;
    gap: 15px !important;
    padding-bottom: 15px !important;
    scroll-snap-type: x mandatory;
    /* හරියටම කාඩ් එක ගාවින් නවතින්න හදනවා */
    -webkit-overflow-scrolling: touch;
    /* ෆෝන් එකේ ස්මූත් ස්වයිප් එකට */
  }

  #related-products .product-card {
    flex: 0 0 240px !important;
    /* එක කාඩ් එකක පළල (Swipe කරද්දී පේන ගාණ) */
    scroll-snap-align: center;
    /* ස්වයිප් කළාම කාඩ් එක මැදින් නවතින්න */
    margin-bottom: 5px !important;
  }

  /* ස්ක්‍රෝල් බාර් එක (Scrollbar) නොපෙනී යාමට හැදීම */
  #related-products .product-grid::-webkit-scrollbar {
    display: none;
  }
}

/* ========================================= */
/* --- MOBILE CART ICON & LOGOUT BUTTON FIX --- */
/* ========================================= */
@media (max-width: 768px) {

  /* Cart ලින්ක් එකේ වචනය හැංගීම සහ ළං කිරීම */
  .nav-links a[href*="cart.html"] {
    font-size: 0 !important;
    /* "Cart" කියන වචනය නොපෙනී යයි */
    margin-right: 5px !important;
    /* Logout බොත්තමට ගොඩක් ළං කරයි */
    margin-left: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Cart අයිකන් එක ලස්සනට පෙන්වීම */
  .nav-links a[href*="cart.html"] i {
    font-size: 1.5rem !important;
    /* අයිකන් එකේ සයිස් එක */
    margin-right: 2px !important;
  }

  /* රතු පාටින් පෙන්වන බඩු ගාණ (Badge) එක පෙන්වීම */
  .nav-links a[href*="cart.html"] span {
    font-size: 0.8rem !important;
    /* Badge එකේ අකුරු සයිස් එක */
    position: relative;
    top: -8px;
    /* අයිකන් එකට උඩින් පේන්න හදයි */
  }

  /* Logout බොත්තම පොඩි කිරීම (ඉඩ ඉතුරු කරගන්න) */
  .nav-links button[onclick="logout()"] {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
  }
}

/* ========================================= */
/* --- CART & LOGOUT BUTTON CLOSER FIX --- */
/* ========================================= */
@media (max-width: 768px) {

  /* Cart අයිකන් එකේ දකුණු පැත්තේ හිඩැස අයින් කිරීම */
  .nav-links a[href*="cart.html"] {
    margin-right: 0 !important;
  }

  /* Logout බොත්තමේ වම් පැත්තේ හිඩැස අඩු කර Cart එකට ගොඩක් ළං කිරීම */
  .nav-links button[onclick="logout()"] {
    margin-left: 8px !important;
  }
}

/* ======================================================= */
/* --- ALL MOBILE RESPONSIVE STYLES (CLEANED UP & MERGED) --- */
/* ======================================================= */

@media (max-width: 768px) {

  /* --- 0. පේජ් එක දකුණට ඇදෙන එක (Horizontal Scroll) බලෙන් නැවැත්වීම --- */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- 1. SECONDARY NAV BAR --- */
  .sec-nav-container a span {
    display: none !important;
  }

  .secondary-nav .sec-nav-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 25px !important;
    padding: 15px 5% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
  }

  .secondary-nav .sec-nav-container a {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .secondary-nav .sec-nav-container a i {
    font-size: 1.5rem !important;
    margin: 0;
  }

  .sec-nav-container::-webkit-scrollbar {
    display: none;
  }

  /* --- 2. HEADER BUTTONS --- */
  .hide-on-mobile,
  .nav-links button[onclick="openJoinModal()"],
  .nav-links a[href*="my-ads"] {
    display: none !important;
  }

  .nav-links a[href*="cart.html"] {
    font-size: 0 !important;
    margin-right: 0 !important;
    margin-left: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .nav-links a[href*="cart.html"] i {
    font-size: 1.5rem !important;
    margin-right: 2px !important;
  }

  .nav-links a[href*="cart.html"] span {
    font-size: 0.8rem !important;
    position: relative;
    top: -8px;
  }

  .nav-links button[onclick="logout()"] {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    margin-left: 8px !important;
  }

  /* --- 3. SHOP PAGE LAYOUT --- */
  /* --- 3. SHOP PAGE & MOBILE FILTER (OFF-CANVAS) --- */
  .shop-container,
  .shop-layout,
  body>div[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .shop-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ෆිල්ටර් මෙනුව තිරයෙන් එළියට කර හැංගීම */
  .shop-sidebar,
  .filter-sidebar,
  aside {
    position: fixed !important;
    top: 0 !important;
    left: -120% !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: white !important;
    z-index: 4000 !important;
    overflow-y: auto !important;
    transition: left 0.3s ease-in-out !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3) !important;
    padding-top: 50px !important;
    box-sizing: border-box !important;
  }

  /* බොත්තම එබුවාම මෙනුව තිරයට ඒම */
  .shop-sidebar.active,
  .filter-sidebar.active,
  aside.active {
    left: 0 !important;
  }

  /* "Filter" කියලා තියෙන අලුත් කළු පාට බොත්තම */
  .mobile-filter-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #2d3436;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 15px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* මෙනුව වහන 'X' බොත්තම */
  .close-filter-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 15px;
    background: #ffeaa7;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.2rem;
    color: #d63031;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* පිටිපස්සේ තියෙන කළු පසුබිම */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3999;
  }

  .sidebar-backdrop.active {
    display: block;
  }

  /* --- 4. PRODUCT CARDS (2-COLUMN GRID & FIXING HEIGHT) --- */
  #shop-product-container,
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-card {
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    /* ✅ කාඩ් එකේ අමතර හිඩැස නැති කරයි */
    min-height: 250px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .product-card .badge-group {
    font-size: 0.6rem !important;
    padding: 3px 6px !important;
    top: 5px !important;
    left: 5px !important;
  }

  .product-card .wishlist-btn {
    top: 5px !important;
    right: 5px !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 0.8rem !important;
  }

  .product-card .card-img {
    margin-top: 15px !important;
    height: 120px !important;
    /* පින්තූර කොටසේ උස සීමා කළා */
    padding: 5px !important;
  }

  .product-card .card-img img {
    height: 100px !important;
    max-height: 100px !important;
    object-fit: contain !important;
  }

  .product-card .category {
    font-size: 0.6rem !important;
    margin-top: 5px !important;
    margin-bottom: 2px !important;
  }

  .product-card .title {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    height: 2.6em !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 5px !important;
  }

  .product-card .rating,
  .product-card .rating span {
    font-size: 0.6rem !important;
    margin-bottom: 5px !important;
  }

  /* --- CENTERED PRICE BOX FOR MOBILE (100% PERFECT) --- */
  .product-card .price-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    /* ගණන් දෙක අතර පොඩි පරතරයක් */
    padding: 6px !important;
    border-radius: 6px !important;
    height: auto !important;
    margin-top: auto !important;
  }

  .product-card .price-divider {
    display: none !important;
  }

  /* මෙතනින් තමයි වචන සහ ගණන් හරියටම මැදට ගන්නේ */
  .product-card .retail-side,
  .product-card .group-side {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* අකුරු මැදට ගනී */
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .product-card .retail-side p,
  .product-card .group-side p {
    text-align: center !important;
    font-size: 0.65rem !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .product-card .retail-side {
    font-size: 0.7rem !important;
  }

  .product-card .group-side b {
    font-size: 1rem !important;
  }

  .product-card .card-btn {
    padding: 6px !important;
    font-size: 0.75rem !important;
    margin-top: 8px !important;
    border-radius: 5px !important;
  }

  /* --- 5. RELATED PRODUCTS (SWIPE CAROUSEL) --- */
  #related-products>div {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    padding-bottom: 15px !important;
  }

  #related-products .product-card {
    flex: 0 0 150px !important;
    scroll-snap-align: start !important;
  }

  #related-products>div::-webkit-scrollbar {
    display: none !important;
  }

  /* --- 6. SPECIAL DEAL MOBILE FIX (SHOW ONLY 1 ITEM) --- */
  #special-deal-product {
    grid-template-columns: 1fr !important;
    /* තීරු 2ක් වෙනුවට 1 තීරුවක් බවට පත් කරයි */
  }

  #special-deal-product>div:nth-child(2) {
    display: none !important;
    /* දෙවැනි කාඩ් එක ෆෝන් එකේදී පමණක් සඟවයි */
  }
}

/* ========================================= */
/* --- HIDE MOBILE FILTER BUTTONS ON PC --- */
/* ========================================= */
@media (min-width: 769px) {

  .mobile-filter-btn,
  .close-filter-btn,
  .sidebar-backdrop {
    display: none !important;
  }
}

/* ================================================= */
/* --- SHOP CATEGORY CHECKBOXES (FIXED LAYOUT) ---*/
/* ================================================= */
.category-list-box {
  margin-top: 25px;
}

.category-list-box h4 {
  font-size: 1.1rem;
  color: #2d3436;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 8px;
}

.custom-category-list {
  display: flex;
  flex-direction: column;
  /* මේකෙන් තමයි පල්ලෙහාට වැටෙන්නේ */
  gap: 12px;
  /* Checkboxes අතර පරතරය */
}

.cat-label {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Checkbox එකයි අකුරුයි අතර පරතරය */
  font-size: 0.95rem;
  color: #2d3436;
  cursor: pointer;
  font-weight: 500;
}

.cat-label:hover {
  color: #ff6b00;
}

.cat-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #ff6b00;
  /* තැඹිලි පාට Checkbox එක */
  margin: 0;
}

/* ================================================= */
/* --- PRODUCT PAGE: SCROLLABLE DESCRIPTION BOX ---  */
/* ================================================= */

.product-description-box {
  max-height: 200px;
  /* පෙට්ටියේ උපරිම උස (ඔයාට ඕන නම් මේක 250px වගේ කරන්න පුළුවන්) */
  overflow-y: auto;
  /* අකුරු ගොඩක් තිබ්බොත් විතරක් ස්ක්‍රෝල් එක එයි */
  padding-right: 15px;
  /* ස්ක්‍රෝල් බාර් එකට ඉඩක් */
  margin-bottom: 20px;
  border-top: 1px dashed #eee;
  border-bottom: 1px dashed #eee;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* ස්ක්‍රෝල් බාර් එක ලස්සන කිරීම (Custom Scrollbar) */
.product-description-box::-webkit-scrollbar {
  width: 6px;
}

.product-description-box::-webkit-scrollbar-track {
  background: #f1f2f6;
  border-radius: 10px;
}

.product-description-box::-webkit-scrollbar-thumb {
  background: #b2bec3;
  border-radius: 10px;
}

.product-description-box::-webkit-scrollbar-thumb:hover {
  background: #007bff;
}

/* ✅ PRODUCT NAME: පේළි 2කට සීමා කර Hover එකේදී සම්පූර්ණ නම පෙන්වීම */
#pm-name {
  font-size: 1.6rem !important;
  color: #2d3436;
  margin-bottom: 10px;
  font-weight: 800;
  line-height: 1.3;
  cursor: help;
  /* මවුස් එක ගෙනිච්චම උදව්වක් වගේ පේන්න */

  /* මුලින් පේළි 2යි පෙන්වන්නේ */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
}

/* මවුස් එක උඩින් ගෙනියද්දී (Hover) සම්පූර්ණ නම එළියට ඒම */
#pm-name:hover {
  display: block;
  /* පේළි ගණන ලිමිට් එක අයින් කරයි */
  overflow: visible;
  -webkit-line-clamp: unset;
  max-height: none;
  color: #007bff;
  /* පාට පොඩ්ඩක් වෙනස් වෙනවා එතකොට පේනවා වැඩේ වෙනවා කියලා */
}

/* ✅ Image Upload Box Style */
.upload-add-box {
  width: 80px;
  height: 80px;
  border: 2px dashed #b2bec3;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #636e72;
  transition: 0.3s;
  background: #fdfdfd;
}

.upload-add-box:hover {
  border-color: #007bff;
  color: #007bff;
  background: #e8f0fe;
}

.upload-add-box i {
  font-size: 1.5rem;
  margin-bottom: 2px;
}

.upload-add-box span {
  font-size: 0.65rem;
  font-weight: 700;
}