/* ========================================
   CUSTOM SHOPTREES STYLES
   ======================================== */

/* --------------------------------------------------
   BREADCRUMB STYLES - Eco-friendly pill design
   -------------------------------------------------- */
.breadcrumb-custom {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  background: linear-gradient(135deg, rgba(228, 235, 205, 0.3) 0%, rgba(216, 229, 195, 0.3) 100%);
  padding: 0.75rem 1.25rem;
  border-radius: 30px;
  border: 1px solid rgba(45, 134, 89, 0.15);
}

.breadcrumb-custom-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  font-size: 0.9rem;
}

.breadcrumb-custom-item {
  display: flex;
  align-items: center;
}

.breadcrumb-custom-item a {
  color: var(--color-primary-dark);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 15px;
  transition: all 0.2s ease;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb-custom-item a:hover {
  background: rgba(45, 134, 89, 0.1);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.breadcrumb-custom-item + .breadcrumb-custom-item::before {
  content: "›";
  color: var(--color-primary-light);
  margin: 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 300;
}

.breadcrumb-custom-item.active {
  color: var(--color-forest-green);
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  background: rgba(45, 134, 89, 0.15);
  border-radius: 15px;
}

.breadcrumb-custom-item.active a {
  color: var(--color-forest-green);
  cursor: default;
  pointer-events: none;
}

.breadcrumb-custom-item.active::before {
  content: "›";
  color: var(--color-primary-light);
  margin: 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 300;
}

/* Bootstrap breadcrumb enhancement */
.breadcrumb {
  background: linear-gradient(135deg, rgba(228, 235, 205, 0.3) 0%, rgba(216, 229, 195, 0.3) 100%);
  padding: 0.75rem 1.25rem;
  border-radius: 30px;
  border: 1px solid rgba(45, 134, 89, 0.15);
  margin-bottom: 1rem;
}

.breadcrumb-item a {
  color: var(--color-primary-dark);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 15px;
  transition: all 0.2s ease;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb-item a:hover {
  background: rgba(45, 134, 89, 0.1);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.breadcrumb-item.active {
  color: var(--color-forest-green);
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-primary-light);
  font-weight: 300;
}

/* --------------------------------------------------
   NAVBAR STYLES (from navbar.html)
   -------------------------------------------------- */
.navbar-logo > img {
  width: 55px;
  height: auto;
  border-radius: 4px;
}

.navbar-nav .nav-link,
.navbar-brand,
.navbar-nav .dropdown-toggle {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #333;
}

/* --------------------------------------------------
   HOME PAGE STYLES (from home.html)
   -------------------------------------------------- */
header.minimal-hero {
  background-color: #e4ebcd;
  border-bottom: 1px solid #d0d0d0;
  padding: 2rem 0;
}

.minimal-hero h1 {
  letter-spacing: 0.5px;
}

header.minimal-hero p {
  color: #333;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-img-wrap {
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.product-name {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.product-desc {
  color: #6c757d;
  font-size: 0.9rem;
  min-height: 2.5em;
}

.price {
  font-weight: bold;
  color: #333;
}

.price .strike {
  text-decoration: line-through;
  color: #999;
  margin-right: 0.5rem;
}

.sale-badge {
  background-color: #dc3545;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
}

.object-cover {
  object-fit: cover;
}

/* --------------------------------------------------
   PRODUCT DETAIL STYLES (from product.html & product_detail.html)
   -------------------------------------------------- */
.thumbs-wrap {
  gap: 0.5rem;
}

.thumb {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.thumb img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.thumb.active {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.main-image {
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* --------------------------------------------------
   ABOUT PAGE STYLES (from about.html)
   -------------------------------------------------- */
header.minimal-hero.about-hero {
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 3rem 0;
}

header.minimal-hero.about-hero p {
  color: #6c757d;
}

.about-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.about-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.about-media {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.about-media .ratio > img {
  object-fit: cover;
}

/* --------------------------------------------------
   ALBUM/CATEGORY STYLES (from album_cat.html)
   -------------------------------------------------- */
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

.object-fit-cover {
  object-fit: cover;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.fade-in.loaded {
  opacity: 1;
}

/* --------------------------------------------------
   UTILITY CLASSES (for common inline styles)
   -------------------------------------------------- */

/* Brand background color */
.bg-brand {
  background-color: #e4ebcd !important;
}

/* Logo sizing */
.logo-lg {
  max-height: 120px;
}

.logo-sm {
  max-height: 50px;
}

/* Thumbnail wrapper spacing */
.thumb-wrapper-margin {
  margin-top: 5mm;
}

/* Padding reset */
.pl-0 {
  padding-left: 0 !important;
}

/* Badge positioning */
.badge-top-right {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.badge-top-right-sm {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Iframe styling */
.iframe-rounded {
  border: 0;
  border-radius: 8px;
}

/* Coming soon page */
.coming-soon-container {
  text-align: center;
  padding: 4rem;
}

/* Button variant with brand color */
.btn-brand {
  background-color: #e4ebcd;
  font-size: 0.9rem;
  white-space: nowrap;
  border: 1px solid #d0d0d0;
  color: #333;
}

.btn-brand:hover {
  background-color: #d8dfbd;
  color: #000;
}

/* Footer styling */
.footer-brand {
  background-color: #e4ebcd;
}

/* Navbar background */
.navbar-brand-bg {
  background-color: #e4ebcd;
}

/* Max-width container */
.max-w-700 {
  max-width: 700px;
}

/* Table header with brand background */
.thead-brand {
  background-color: #e4ebcd;
  color: #000;
}

/* ========================================
   ECO-FRIENDLY THEME ENHANCEMENTS
   Natural, Organic Design for Tree Nursery
   ======================================== */

/* --------------------------------------------------
   ENHANCED COLOR PALETTE
   -------------------------------------------------- */
:root {
  /* Primary brand colors - earthy greens */
  --color-primary: #2d8659;
  --color-primary-light: #3da570;
  --color-primary-dark: #1a5f1a;

  /* Secondary - warm earth tones */
  --color-secondary: #8b7355;
  --color-accent: #e4ebcd;
  --color-accent-dark: #d8dfbd;

  /* Nature-inspired neutrals */
  --color-earth-brown: #6b5444;
  --color-forest-green: #2c5f2d;
  --color-leaf-green: #7cb342;
  --color-bark: #4a3728;

  /* Functional colors */
  --color-success: #4caf50;
  --color-info: #5c9ead;
  --color-warning: #ff9800;

  /* Text */
  --text-primary: #2c3e2c;
  --text-secondary: #5a6c5a;
  --text-muted: #8a9a8a;

  /* Backgrounds */
  --bg-light: #f8faf8;
  --bg-white: #ffffff;

  /* Shadows - soft, natural */
  --shadow-sm: 0 2px 8px rgba(45, 134, 89, 0.08);
  --shadow-md: 0 4px 16px rgba(45, 134, 89, 0.12);
  --shadow-lg: 0 8px 24px rgba(45, 134, 89, 0.16);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* --------------------------------------------------
   IMPROVED TYPOGRAPHY
   -------------------------------------------------- */
body {
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background-color: var(--bg-light);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-forest-green);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  color: var(--color-forest-green);
}

/* --------------------------------------------------
   ENHANCED NAVBAR
   -------------------------------------------------- */
.navbar-brand-bg {
  background: linear-gradient(135deg, #e4ebcd 0%, #d8e5c3 100%);
  box-shadow: 0 2px 12px rgba(45, 134, 89, 0.08);
  border-bottom: 2px solid rgba(45, 134, 89, 0.1);
}

.navbar-nav .nav-link {
  position: relative;
  padding: 0.4rem 0.9rem;
  border-radius: 25px;
  background: transparent;
  border: 1.5px solid transparent;
  transition: all var(--transition-normal);
  margin: 0 0.15rem;
}

.navbar-nav .nav-link:hover {
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.08) 0%, rgba(124, 179, 66, 0.08) 100%);
  border-color: rgba(45, 134, 89, 0.2);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.12) 0%, rgba(124, 179, 66, 0.12) 100%);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark) !important;
  font-weight: 600;
}

/* Dropdown toggle styling */
.navbar-nav .dropdown-toggle {
  padding: 0.4rem 0.9rem;
  border-radius: 25px;
  background: transparent;
  border: 1.5px solid transparent;
  transition: all var(--transition-normal);
  margin: 0 0.15rem;
}

.navbar-nav .dropdown-toggle:hover {
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.08) 0%, rgba(124, 179, 66, 0.08) 100%);
  border-color: rgba(45, 134, 89, 0.2);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.navbar-nav .dropdown-toggle.active {
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.12) 0%, rgba(124, 179, 66, 0.12) 100%);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark) !important;
  font-weight: 600;
}

/* --------------------------------------------------
   ORGANIC PRODUCT CARDS
   -------------------------------------------------- */
.product-card {
  border: 2px solid #e8f0e8;
  border-radius: 12px;
  overflow: hidden;
  transition: all var(--transition-normal);
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.product-img-wrap {
  background: linear-gradient(135deg, #f0f4f0 0%, #e8f0e8 100%);
  border-bottom: 2px solid #e8f0e8;
  position: relative;
  overflow: hidden;
}

.product-img-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.product-card img {
  transition: transform var(--transition-slow);
}

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

/* --------------------------------------------------
   ENHANCED BUTTONS
   -------------------------------------------------- */
.btn-dark {
  background: linear-gradient(135deg, var(--color-forest-green) 0%, var(--color-primary-dark) 100%);
  border: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 12px rgba(45, 134, 89, 0.2);
}

.btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 134, 89, 0.3);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, #145214 100%);
}

.btn-success {
  background: linear-gradient(135deg, var(--color-leaf-green) 0%, var(--color-success) 100%);
  border: none;
  font-weight: 600;
  border-radius: 8px;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
}

.btn-brand {
  background: linear-gradient(135deg, #e4ebcd 0%, #d8e5c3 100%);
  border: 2px solid var(--color-primary);
  color: var(--color-forest-green);
  font-weight: 600;
  transition: all var(--transition-normal);
}

.btn-brand:hover {
  background: linear-gradient(135deg, #d8e5c3 0%, #ccd9b7 100%);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45, 134, 89, 0.15);
}

/* --------------------------------------------------
   ENVIRONMENTAL TRUST BADGES
   -------------------------------------------------- */
.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.1) 0%, rgba(124, 179, 66, 0.1) 100%);
  border: 2px solid var(--color-primary-light);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-forest-green);
  transition: all var(--transition-fast);
}

.eco-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(45, 134, 89, 0.2);
}

.eco-badge::before {
  content: '\2022';
  font-size: 1.2em;
  color: var(--color-primary);
}

.organic-certified {
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.15) 0%, rgba(76, 175, 80, 0.15) 100%);
  border-color: var(--color-leaf-green);
}

.organic-certified::before {
  content: '\2713';
  color: var(--color-leaf-green);
}

.royal-heritage {
  background: linear-gradient(135deg, rgba(139, 115, 85, 0.15) 0%, rgba(107, 84, 68, 0.15) 100%);
  border-color: var(--color-earth-brown);
}

.royal-heritage::before {
  content: '\2605';
  color: var(--color-earth-brown);
}

/* --------------------------------------------------
   ENHANCED HERO SECTION
   -------------------------------------------------- */
header.minimal-hero {
  background: linear-gradient(135deg, #e4ebcd 0%, #f0f5e4 50%, #e4ebcd 100%);
  border-bottom: 3px solid rgba(45, 134, 89, 0.2);
  box-shadow: 0 4px 12px rgba(45, 134, 89, 0.08);
  position: relative;
  overflow: hidden;
}

header.minimal-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 40%;
  height: 200%;
  background: radial-gradient(circle, rgba(45, 134, 89, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

header.minimal-hero::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -10%;
  width: 40%;
  height: 200%;
  background: radial-gradient(circle, rgba(124, 179, 66, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------
   NATURE-INSPIRED ANIMATIONS
   -------------------------------------------------- */
@keyframes gentle-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

@keyframes leaf-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.animate-sway {
  animation: gentle-sway 3s ease-in-out infinite;
}

.animate-float {
  animation: leaf-float 2s ease-in-out infinite;
}

/* --------------------------------------------------
   ENHANCED CARDS & SECTIONS
   -------------------------------------------------- */
.card {
  border-radius: 12px;
  border: 2px solid #e8f0e8;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.about-card {
  border: 2px solid #e8f0e8;
  border-radius: 12px;
  background: var(--bg-white);
}

/* --------------------------------------------------
   FOOTER ENHANCEMENTS
   -------------------------------------------------- */
.footer-brand {
  background: linear-gradient(135deg, #e4ebcd 0%, #d8e5c3 100%);
  border-top: 3px solid rgba(45, 134, 89, 0.2);
  box-shadow: 0 -4px 12px rgba(45, 134, 89, 0.08);
}

.footer-brand a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-brand a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --------------------------------------------------
   SALE BADGES - ORGANIC STYLE
   -------------------------------------------------- */
.sale-badge {
  background: linear-gradient(135deg, #e63946 0%, #d62828 100%);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------
   TABLE ENHANCEMENTS
   -------------------------------------------------- */
.table {
  border-radius: 8px;
  overflow: hidden;
}

.thead-brand {
  background: linear-gradient(135deg, #e4ebcd 0%, #d8e5c3 100%);
  color: var(--color-forest-green);
  font-weight: 600;
  border-bottom: 3px solid var(--color-primary);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(228, 235, 205, 0.2);
}

.table-bordered {
  border: 2px solid #e8f0e8;
}

/* --------------------------------------------------
   FORM ENHANCEMENTS
   -------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem rgba(45, 134, 89, 0.15);
}

/* --------------------------------------------------
   BREADCRUMB ENHANCEMENTS - Already defined above
   -------------------------------------------------- */
/* All breadcrumb styles are now in the main breadcrumb section at the top */

/* --------------------------------------------------
   LOADING STATES & TRANSITIONS
   -------------------------------------------------- */
.fade-in {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.fade-in.loaded {
  opacity: 1;
}

/* --------------------------------------------------
   RESPONSIVE IMPROVEMENTS
   -------------------------------------------------- */
@media (max-width: 768px) {
  .product-card:hover {
    transform: translateY(-4px);
  }

  .btn:hover {
    transform: none;
  }
}

/* --------------------------------------------------
   ACCESSIBILITY ENHANCEMENTS
   -------------------------------------------------- */
*:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-forest-green);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------
   LOGO ENHANCEMENTS
   -------------------------------------------------- */
.logo-lg, .logo-sm {
  transition: transform var(--transition-normal);
}

.logo-lg:hover {
  transform: scale(1.05) rotate(2deg);
}

.logo-sm:hover {
  transform: scale(1.1);
}

/* Subtle pulse animation for SKAL certification logo */
.logo-sm[alt*="SKAL"],
.logo-sm[alt*="Small Logo 2"] {
  animation: subtle-pulse 3s ease-in-out infinite;
}

@keyframes subtle-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* --------------------------------------------------
   ENHANCED ALERT MESSAGES
   -------------------------------------------------- */
.alert-warning {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 193, 7, 0.1) 100%);
  border-left: 4px solid var(--color-warning);
  border-radius: 8px;
}

.alert-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(124, 179, 66, 0.1) 100%);
  border-left: 4px solid var(--color-success);
  border-radius: 8px;
}

.alert-info {
  background: linear-gradient(135deg, rgba(92, 158, 173, 0.1) 0%, rgba(92, 158, 173, 0.15) 100%);
  border-left: 4px solid var(--color-info);
  border-radius: 8px;
}

/* --------------------------------------------------
   PRODUCT DETAIL ENHANCEMENTS
   -------------------------------------------------- */
.main-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.main-image {
  border-radius: 12px;
  border: 2px solid #e8f0e8;
  transition: transform var(--transition-slow);
}

.main-image:hover {
  transform: scale(1.02);
}

/* Enhanced thumbnails */
.thumb {
  border: 2px solid #e8f0e8;
  transition: all var(--transition-fast);
}

.thumb:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.thumb.active {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* --------------------------------------------------
   CART PAGE ENHANCEMENTS
   -------------------------------------------------- */
.btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  border: none;
  transition: all var(--transition-normal);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-danger {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  border: none;
  transition: all var(--transition-normal);
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* --------------------------------------------------
   SEARCH PAGE ENHANCEMENTS
   -------------------------------------------------- */
.form-select {
  border: 2px solid #e8f0e8;
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.form-select:hover {
  border-color: var(--color-primary-light);
}

.form-control {
  border: 2px solid #e8f0e8;
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.form-control:hover {
  border-color: var(--color-primary-light);
}

/* --------------------------------------------------
   CATEGORY CARDS
   -------------------------------------------------- */
.card.shadow-sm {
  border: 2px solid #e8f0e8;
  transition: all var(--transition-normal);
}

.card.shadow-sm:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--color-primary-light);
}

/* --------------------------------------------------
   SUBTLE BACKGROUND PATTERNS
   -------------------------------------------------- */
.bg-body-tertiary {
  background: linear-gradient(135deg, #f8faf8 0%, #f0f4f0 100%) !important;
}

/* Nature-inspired subtle pattern overlay - desktop only */
@media (min-width: 992px) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(circle at 20% 50%, rgba(45, 134, 89, 0.02) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(124, 179, 66, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
  }
}

/* ========================================
   MOBILE-SPECIFIC FIXES
   ======================================== */

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover,
  .btn:hover,
  .eco-badge:hover,
  .thumb:hover,
  .logo-lg:hover,
  .logo-sm:hover {
    transform: none;
    box-shadow: initial;
  }

  .navbar-nav .nav-link,
  .navbar-nav .dropdown-toggle {
    margin: 0.25rem 0;
    width: 100%;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .dropdown-toggle:hover {
    transform: none;
  }
}

/* Mobile Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix for iOS Safari rendering */
  * {
    -webkit-tap-highlight-color: rgba(45, 134, 89, 0.1);
  }

  /* Ensure smooth scrolling on iOS */
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile performance optimizations */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  .product-card:hover img,
  .main-image:hover {
    transform: none;
  }

  /* Simplify shadows on mobile */
  .product-card,
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  /* Ensure eco-badges are readable on mobile */
  .eco-badge {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }

  /* Fix header spacing on mobile */
  header.minimal-hero {
    padding: 1.5rem 0 !important;
  }

  /* Ensure buttons are touch-friendly */
  .btn {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
  }
}

/* Fix for very small screens */
@media (max-width: 576px) {
  .eco-badge {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
  }

  .logo-lg {
    max-height: 80px !important;
  }

  .logo-sm {
    max-height: 35px !important;
  }
}