@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --primary-color: #8c6239;
  --primary-hover: #6f4e2d;
  --bg-light: #fdf8f5;
  --dark-footer: #1a202c;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-light);
}

/* Navbar & Top Header Styling */
.navbar-brand {
  font-weight: 700;
  color: #000;
}

/* Hero Section */
.hero-section {
  background-color: var(--bg-light);
  padding: 60px 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Buttons */
.btn-chocolate {
  background-color: var(--primary-color) !important;
  color: white !important;
  border: none !important;
  transition: all 0.3s;
  box-shadow: 0 6px 18px rgba(140, 98, 57, 0.18);
  border-radius: 8px;
}
.btn-chocolate:hover {
  background-color: var(--primary-hover) !important;
  color: white !important;
}
.btn-outline-custom {
  border: 1px solid #333;
  color: #333;
  background: transparent;
  transition: all 0.3s;
}
.btn-outline-custom:hover {
  background-color: #333;
  color: white;
}

/* Cards */
.custom-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.custom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

/* Product Image & Badge */
.product-img-container {
  position: relative;
  background-color: #8fa9a9; /* Background to match image placeholder */
  border-radius: 8px;
  overflow: hidden;
  height: 200px;
}
.badge-sale {
  background-color: #e84a5f;
  color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: bold;
}

/* Sale Banner */
.sale-banner {
  background-color: var(--primary-color);
  color: white;
  padding: 30px 0;
}

/* Footer */
footer {
  background-color: var(--dark-footer);
  color: #a0aec0;
  padding: 40px 0 20px 0;
}
footer h6 {
  color: #ffffff;
  font-weight: 600;
}
footer a {
  color: #a0aec0;
  text-decoration: none;
}
footer a:hover {
  color: #ffffff;
}
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #a0aec0;
  border-radius: 50%;
  color: #a0aec0;
  margin-right: 8px;
  transition: all 0.3s;
}
.social-icons a:hover {
  color: #fff;
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
.nav-link:hover{
        color:#8c6239 !important;
        background:#f8f4ef;
    }
        .category-card {
          position: relative;
          transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
          border: 1px solid #efefef;
          border-radius: 12px;
          background-color: #8c6239;
          color: #fff;
          overflow: hidden;
        }
        .category-card::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 0;
          height: 4px;
          background: linear-gradient(90deg, #8c6239 0%, #c8a165 100%);
          transition: width 0.25s ease;
        }
        .category-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important;
        }
        .category-card:active,
        .category-card.active {
          transform: translateY(0) scale(0.99);
          box-shadow: 0 6px 12px rgba(0,0,0,0.08) !important;
          border-color: #c8a165;
          background-color: #7c4f2b;
        }
        .category-card:active::after,
        .category-card.active::after {
          width: 100%;
        }
        .category-card h6 {
          color: #fff;
        }
        .category-card .cat-image {
          border-bottom: 1px solid #f4f4f4;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #ffffff;
          height: 80px;
        }
        .category-card .cat-image img.cat-img { max-width: 60%; height: auto; }
        .no-cat-placeholder { width: 100%; height: 100%; background: #fafafa; }
        .category-card h5 { font-size: 14px; letter-spacing: 0.2px; margin-bottom: 0.15rem; font-weight:600; }
        .category-card .card-body { padding: 0.75rem; }
        .category-card .text-muted.small { opacity: 0.8; font-size: 12px; }

        :root {
            --primary-color: #8c6239;
            --primary-hover: #6f4e2d;
            --primary-soft: #f3e6d6;
            --bg-light: #fdf8f5;
            --brass: #c8a165;
            --ink: #32241a;
            --hairline: #ecdfcc;
            --shadow-soft: 0 10px 26px rgba(63, 46, 25, 0.08);
            --shadow-lift: 0 20px 40px -14px rgba(63, 46, 25, 0.24);
            --ease: cubic-bezier(.22, 1, .36, 1);
        }

        body {
            background-color: #fcfaf7;
            background-image: radial-gradient(circle at 10% 0%, rgba(200, 161, 101, 0.08), transparent 40%);
            background-attachment: fixed;
            color: var(--ink);
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        @media (min-width: 576px) {
            .category-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (min-width: 992px) {
            .category-grid { grid-template-columns: repeat(6, 1fr); }
        }

        .cat-card-modern {
            background: #fff;
            border: 1px solid var(--hairline);
            border-radius: 16px;
            padding: 20px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            text-decoration: none;
            color: var(--ink);
            transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
        }

        .cat-card-modern:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lift);
            border-color: var(--brass);
            color: var(--ink);
        }

        .cat-card-modern .cat-icon-box {
            width: 64px;
            height: 64px;
            border-radius: 14px;
            background-color: #f8f2eb;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            transition: background-color .3s var(--ease), color .3s var(--ease);
        }

        .cat-card-modern:hover .cat-icon-box {
            background-color: var(--primary-color);
        }

        .cat-card-modern .cat-icon-box .cat-initial {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--primary-color);
            transition: color .3s var(--ease);
        }

        .cat-card-modern:hover .cat-icon-box .cat-initial {
            color: #fff;
        }

        .cat-card-modern .cat-thumb-img {
            width: 64px;
            height: 64px;
            border-radius: 14px;
            object-fit: cover;
            margin-bottom: 12px;
        }

        .cat-card-modern .cat-title {
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 4px;
            line-height: 1.2;
        }

        .cat-card-modern .cat-qty {
            font-size: 0.8rem;
            color: #8a7a6e;
        }

        .custom-card {
            border: 1px solid var(--hairline);
            border-radius: 16px;
            overflow: hidden;
            transition: transform .3s var(--ease), box-shadow .3s var(--ease);
        }

        .custom-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lift);
        }

        .btn-outline-custom {
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            background-color: transparent;
            border-radius: 999px;
            font-weight: 600;
            padding: 8px 18px;
            transition: all .25s var(--ease);
        }

        .btn-outline-custom:hover {
            background-color: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(140, 98, 57, 0.28);
        }

        .product-img-container {
            position: relative;
            background-color: #f8f2eb;
            border-radius: 12px;
            overflow: hidden;
        }

        .product-img-container img {
            transition: transform .5s var(--ease);
        }

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

        .badge-sale {
            position: absolute;
            top: 12px;
            left: 12px;
            background: linear-gradient(135deg, #d64545, #b93737);
            color: #fff;
            padding: 0.35rem 0.7rem;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            z-index: 2;
            box-shadow: 0 4px 10px rgba(214, 69, 69, 0.35);
        }