/* 1. IMPORTS & VARIABLES
-------------------------------------------------- */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');
@font-face {
    font-family: 'amsterdam-one-regular';
    src: url('/fonts/amsterdam-one-regular.ttf') format('truetype');
    font-weight: normal;
    font-style:normal;
}
/* Custom CSS Variables */
:root {
  --bs-orange: #EA580C;
  --bs-orange-dark: #C2410C;
  --bs-stone-100: #f5f5f4;
  --bs-stone-500: #78716c;
  --bs-stone-600: #57534e;
  --bs-stone-700: #44403c;
  --bs-amber-50: #fffbeb;
}


/* 2. BASE STYLES
-------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: #292524; /* text-stone-800 */
  background-color: #fafaf9; /* bg-stone-50 */
}

.font-logo-mine {
  font-family: 'amsterdam-one-regular', sans-serif;
  color: #000;
}
h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Merriweather', serif;
}

/* 3. LAYOUT & SECTION DEFAULTS
-------------------------------------------------- */

/* Default padding for content sections */
#categories, #bestsellers, #products, #about {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Responsive padding for larger screens */
@media (min-width: 992px) {
  #categories, #bestsellers, #products, #about {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}


/* 4. COMPONENT STYLES
-------------------------------------------------- */

/* 4.1 Header & Navigation */
header.sticky-top {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.navbar-brand {
  color: var(--bs-orange) !important;
}

.font-logo-mine {
  font-family: 'amsterdam-one-regular', sans-serif;
  color: #000;
  font-weight:bold;
}

.navbarlogo {
  height: 50px;
  width: 50px;
}
.nav-link-custom {
  color: var(--bs-stone-600);
  text-decoration: none;
  transition: color 0.3s;
}

.nav-link-custom:hover {
  color: var(--bs-orange);
}

.cart-button {
  color: var(--bs-stone-700);
  transition: color 0.3s;
  text-decoration: none;
  padding: 0;
}

.cart-button:hover {
  color: var(--bs-orange);
}

.cart-button .badge {
  background-color: var(--bs-orange);
  font-size: 0.75rem;
  height: 1.25rem;
  width: 1.25rem;
  padding: 0; /* Override BS padding to make it a circle */
}

/* 4.2 Buttons */
.btn-cta {
  background-color: var(--bs-orange);
  border-color: var(--bs-orange);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 2rem;
  font-size: 1.125rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.btn-cta:hover {
  background-color: var(--bs-orange-dark);
  border-color: var(--bs-orange-dark);
  color: #fff;
  transform: translateY(-0.25rem);
}

.btn-outline-orange {
  color: var(--bs-orange);
  border-color: var(--bs-orange);
  font-weight: 600;
}

.btn-outline-orange:hover {
  background-color: var(--bs-orange);
  border-color: var(--bs-orange);
  color: #fff;
}

/* 4.3 Filter Buttons */
.filter-button {
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  border: none;
}

.filter-button.active {
  background-color: var(--bs-orange);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.filter-button:not(.active) {
  background-color: #fff;
  color: var(--bs-stone-700);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.filter-button:not(.active):hover {
  background-color: var(--bs-stone-100);
}

/* 4.4 Category & Product Cards */
.category-card,
.product-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.category-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

.product-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

.category-card .card-img-top,
.product-card .card-img-top {
  height: 12rem;
  object-fit: cover;
}

.category-filter-link {
  color: var(--bs-orange);
}

.category-filter-link:hover {
  color: var(--bs-orange-dark);
}

/* 4.5 Helper Classes */
.text-orange {
  color: var(--bs-orange);
}

/* 4.6 Misc Components (Divider) */
.traditional-divider-svg {
 width: 100%;
 height: 25px; /* Adjust height as needed */
 margin: 2rem 0; /* Add space above and below */
 
 /* This is an embedded, URL-encoded SVG of a repeating floral pattern.
  The 'fill' color is set to a soft, traditional tan (%23E0CDB6).
 */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15 0 C0 0 0 15 15 15 S30 0 15 0 z M15 30 C0 30 0 15 15 15 S30 30 15 30 z' fill='%23E0CDB6'/%3E%3C/svg%3E");
background-repeat: repeat-x; /* Repeats it horizontally */
 background-position: center;
 background-size: auto 100%; /* Scales to fit the height */
 opacity: 0.6; /* Soften it slightly */
}


/* 5. PAGE-SPECIFIC SECTIONS
-------------------------------------------------- */

/* 5.1 Hero Section (#home) */
#home {
 min-height: 60vh; /* A shorter height works well for this style */
 background-color: #FCFBF8; /* Light cream background */
 padding-top: 5rem;
 padding-bottom: 5rem;
}

/* This pseudo-element adds the faint dot pattern *behind* the content */
#home::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 
 /* Embedded SVG dot pattern */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='1' fill='%23000'/%3E%3C/svg%3E");
 
 background-repeat: repeat;
 opacity: 0.04; /* Make it VERY faint */
 z-index: 0;
}

/* 5.2 Section Backgrounds */
#categories {
  background-color: var(--bs-amber-50);
}

#products {
  background-color: var(--bs-stone-100);
}

/* 5.3 About Section (#about) */
#about-image {
  object-fit: cover;
  min-height: 400px;
}
/* 6. COMMENTED-OUT CODE (For Review)
-------------------------------------------------- */


.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hero-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.hero-background-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to top, #fafaf9, rgba(250, 250, 249, 0.8), transparent);
}
/**
#home {
  padding-top: 6rem;
  padding-bottom: 8rem;
}

@media (min-width: 768px) {
  #home {
    padding-top: 8rem;
    padding-bottom: 10rem;
  }
}

*/

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px; /* spacing between links */
  margin-bottom: 10px;
}

.footer-links a {
  color: #bfbfbf;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease, border-bottom 0.3s ease;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
}

.footer-links a:active {
  color: #cccccc;
}

@media (max-width: 600px) {
  .footer-links {
    gap: 8px;
    font-size: 13px;
  }
}