/*
Theme Name:        DevVardaan — Astra Child
Theme URI:         https://devvardaan.in/
Description:       Custom child theme for DevVardaan religious & spiritual store, built on Astra.
Author:            DevVardaan Team
Author URI:        https://devvardaan.in/
Template:          astra
Version:           1.0.0
Text Domain:       devvardaan
*/

/* ==========================================================================
   0. BRAND CSS VARIABLES & DESIGN TOKENS
   ========================================================================== */
:root {
  --dv-primary:          #8B1E2D; /* Rich Vedic Maroon */
  --dv-primary-dark:     #5E1420; /* Deep Maroon */
  --dv-primary-light:    #FAF0F1; /* Soft Maroon Tint */
  --dv-accent:           #C9A84C; /* Sacred Gold */
  --dv-accent-hover:     #B39239; /* Rich Burnished Gold */
  --dv-accent-light:     #FFF9E6; /* Pale Gold Tint */
  --dv-bg:               #FFFAF1; /* Warm Cream Background */
  --dv-section-bg:       #FDF6EC; /* Secondary Section Cream */
  --dv-card-bg:          #FFFFFF; /* Crisp Card Surface */
  --dv-footer-bg:        #7B0000; /* Imperial Dark Maroon */
  --dv-text-main:        #1A1A1A; /* Charcoal Black */
  --dv-text-muted:       #666666; /* Subdued Grey */
  --dv-border-color:     #EADBC8; /* Sandstone Border */
  --dv-success:          #2E7D32; /* Vedic Green */
  --dv-white:            #FFFFFF;

  --dv-font-heading:     'Poppins', sans-serif;
  --dv-font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --dv-radius-sm:        4px;
  --dv-radius:           8px;
  --dv-radius-lg:        16px;
  --dv-radius-full:      9999px;

  --dv-shadow-sm:        0 2px 6px rgba(139, 30, 45, 0.05);
  --dv-shadow:           0 6px 20px rgba(139, 30, 45, 0.08);
  --dv-shadow-hover:     0 12px 28px rgba(139, 30, 45, 0.14);

  --dv-transition:       all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   1. GLOBAL RESET & BASE STYLES
   ========================================================================== */
body {
  background-color: var(--dv-bg);
  color: var(--dv-text-main);
  font-family: var(--dv-font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dv-font-heading);
  color: var(--dv-primary);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
}

a {
  color: var(--dv-primary);
  text-decoration: none;
  transition: var(--dv-transition);
}

a:hover, a:focus {
  color: var(--dv-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   2. ANNOUNCEMENT BAR
   ========================================================================== */
.dv-announcement-bar {
  background: linear-gradient(90deg, #6B1416 0%, var(--dv-primary) 50%, #6B1416 100%);
  color: var(--dv-white);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  position: relative;
  z-index: 1001;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.dv-announcement-bar .dv-ann-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dv-announcement-bar strong {
  color: var(--dv-accent);
  font-weight: 700;
}

.dv-ann-dismiss {
  position: absolute;
  right: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  transition: var(--dv-transition);
}

.dv-ann-dismiss:hover {
  color: var(--dv-white);
  transform: scale(1.15);
}

/* ==========================================================================
   3. SITE HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  background-color: var(--dv-bg);
  border-bottom: 1px solid var(--dv-border-color);
  transition: var(--dv-transition);
  z-index: 1000;
}

.site-header.dv-sticky {
  position: sticky;
  top: 0;
  background: rgba(255, 250, 241, 0.98);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.main-header-bar {
  background: transparent !important;
}

/* ==========================================================================
   4. NAVIGATION LINKS
   ========================================================================== */
.main-navigation a,
.ast-menu-shadow .main-navigation a {
  font-family: var(--dv-font-heading);
  font-weight: 500;
  font-size: 14px;
  color: var(--dv-text-main) !important;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  transition: var(--dv-transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--dv-primary) !important;
}

/* ==========================================================================
   5. CART COUNT BADGE
   ========================================================================== */
.ast-site-header-cart .ast-cart-count,
.dv-cart-count {
  background-color: var(--dv-primary) !important;
  color: var(--dv-white) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--dv-radius-full) !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
  box-shadow: 0 2px 5px rgba(139, 30, 45, 0.3) !important;
  transition: transform 0.2s ease !important;
}

.dv-cart-bump {
  animation: dvCartBump 0.4s ease;
}

/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */
.dv-hero {
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 80% 50%, rgba(201, 168, 76, 0.15) 0%, transparent 60%),
              linear-gradient(135deg, var(--dv-bg) 0%, var(--dv-section-bg) 100%);
  border-bottom: 1px solid var(--dv-border-color);
  padding: 60px 20px;
  overflow: hidden;
}

.dv-hero::before {
  content: '🕉';
  position: absolute;
  right: -50px;
  bottom: -60px;
  font-size: 320px;
  color: rgba(201, 168, 76, 0.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.dv-hero-content {
  max-width: 640px;
  position: relative;
  z-index: 2;
}

.dv-hero-tag {
  display: inline-block;
  background-color: var(--dv-accent-light);
  color: var(--dv-primary);
  border: 1px solid var(--dv-accent);
  padding: 6px 16px;
  border-radius: var(--dv-radius-full);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.dv-hero h1 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--dv-primary);
  margin-bottom: 18px;
}

.dv-hero-subtitle {
  font-size: 17px;
  color: var(--dv-text-muted);
  line-height: 1.6;
  margin-bottom: 30px;
}

.dv-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   7. BUTTON VARIANTS (.dv-btn, .dv-btn--gold, .dv-btn--outline)
   ========================================================================== */
.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--dv-primary);
  color: var(--dv-white) !important;
  font-family: var(--dv-font-heading);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--dv-radius);
  border: 2px solid var(--dv-primary);
  cursor: pointer;
  transition: var(--dv-transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(139, 30, 45, 0.2);
}

.dv-btn:hover {
  background-color: var(--dv-primary-dark);
  border-color: var(--dv-primary-dark);
  color: var(--dv-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(139, 30, 45, 0.3);
}

.dv-btn--gold {
  background-color: var(--dv-accent);
  border-color: var(--dv-accent);
  color: var(--dv-primary-dark) !important;
}

.dv-btn--gold:hover {
  background-color: var(--dv-accent-hover);
  border-color: var(--dv-accent-hover);
  color: var(--dv-primary-dark) !important;
  box-shadow: 0 6px 18px rgba(201, 168, 76, 0.35);
}

.dv-btn--outline {
  background-color: transparent;
  color: var(--dv-primary) !important;
  border-color: var(--dv-primary);
  box-shadow: none;
}

.dv-btn--outline:hover {
  background-color: var(--dv-primary);
  color: var(--dv-white) !important;
  box-shadow: 0 4px 12px rgba(139, 30, 45, 0.2);
}

/* ==========================================================================
   8. SECTION TITLES
   ========================================================================== */
.dv-section-title {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.dv-section-title h2 {
  font-size: 32px;
  color: var(--dv-primary);
  font-weight: 700;
  display: inline-block;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 8px;
}

.dv-section-title h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background-color: var(--dv-accent);
  border-radius: var(--dv-radius-full);
}

.dv-section-title p {
  color: var(--dv-text-muted);
  font-size: 15px;
  max-width: 550px;
  margin: 8px auto 0;
}

/* ==========================================================================
   9. CATEGORY GRID (.dv-cat-grid)
   ========================================================================== */
.dv-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ==========================================================================
   10. CATEGORY CARD (.dv-cat-card)
   ========================================================================== */
.dv-cat-card {
  background: var(--dv-card-bg);
  border: 1px solid var(--dv-border-color);
  border-radius: var(--dv-radius);
  padding: 20px 14px;
  text-align: center;
  transition: var(--dv-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  box-shadow: var(--dv-shadow-sm);
}

.dv-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--dv-shadow-hover);
  border-color: var(--dv-accent);
}

.dv-cat-card__img-wrap {
  width: 90px;
  height: 90px;
  border-radius: var(--dv-radius-full);
  border: 2px solid var(--dv-accent);
  padding: 4px;
  background-color: var(--dv-bg);
  margin-bottom: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dv-cat-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--dv-radius-full);
  transition: transform 0.4s ease;
}

.dv-cat-card:hover .dv-cat-card__img-wrap img {
  transform: scale(1.1);
}

.dv-cat-card__title {
  font-family: var(--dv-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--dv-text-main);
  margin: 0;
  transition: color 0.2s ease;
}

.dv-cat-card:hover .dv-cat-card__title {
  color: var(--dv-primary);
}

/* ==========================================================================
   11. PRODUCT CARDS (WOOCOMMERCE LOOP)
   ========================================================================== */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 1200px !important;
}

ul.products::before,
ul.products::after {
  display: none !important;
}

ul.products li.product,
.dv-product-card {
  background: var(--dv-card-bg) !important;
  border: 1px solid var(--dv-border-color) !important;
  border-radius: var(--dv-radius) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--dv-shadow-sm) !important;
  transition: var(--dv-transition) !important;
  position: relative !important;
  width: 100% !important;
  float: none !important;
}

ul.products li.product:hover,
.dv-product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--dv-shadow-hover) !important;
  border-color: var(--dv-accent) !important;
}

/* ==========================================================================
   12. PRODUCT IMAGE & HOVER ZOOM
   ========================================================================== */
.dv-product-card__img-wrap,
ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #FAFAFA;
}

.dv-product-card__img-wrap img,
ul.products li.product img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  margin: 0 !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

ul.products li.product:hover img,
.dv-product-card:hover .dv-product-card__img-wrap img {
  transform: scale(1.06) !important;
}

/* ==========================================================================
   13. SALE BADGE
   ========================================================================== */
.dv-sale-badge,
ul.products li.product .onsale,
.woocommerce span.onsale {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  background: var(--dv-primary) !important;
  color: var(--dv-white) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: var(--dv-radius-sm) !important;
  min-height: auto !important;
  line-height: 1.2 !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(139, 30, 45, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}

/* ==========================================================================
   14. PRODUCT TITLE, PRICE, & ADD TO CART
   ========================================================================== */
.dv-product-card__info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dv-product-card__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--dv-font-heading) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--dv-text-main) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 42px !important;
}

.dv-product-card__title a {
  color: inherit !important;
}

.dv-product-card__title a:hover {
  color: var(--dv-primary) !important;
}

/* Star Rating */
.woocommerce .star-rating,
.dv-product-card .star-rating {
  font-size: 12px !important;
  color: var(--dv-accent) !important;
  margin-bottom: 8px !important;
}

/* Price styling */
.dv-product-card__price,
ul.products li.product .price {
  font-family: var(--dv-font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--dv-primary) !important;
  margin: 4px 0 14px 0 !important;
}

.dv-product-card__price del,
ul.products li.product .price del {
  color: var(--dv-text-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin-right: 6px !important;
}

.dv-product-card__price ins,
ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--dv-primary) !important;
}

/* Add to cart button */
ul.products li.product .button,
.dv-product-card .button {
  background-color: var(--dv-primary) !important;
  color: var(--dv-white) !important;
  border-radius: var(--dv-radius) !important;
  font-family: var(--dv-font-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  text-align: center !important;
  width: 100% !important;
  margin-top: auto !important;
  transition: var(--dv-transition) !important;
  border: 1px solid var(--dv-primary) !important;
}

ul.products li.product .button:hover,
.dv-product-card .button:hover {
  background-color: var(--dv-primary-dark) !important;
  border-color: var(--dv-primary-dark) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   15. USP TRUST BADGES (.dv-usp-grid)
   ========================================================================== */
.dv-usp-section {
  padding: 50px 20px;
  background-color: var(--dv-section-bg);
  border-top: 1px solid var(--dv-border-color);
  border-bottom: 1px solid var(--dv-border-color);
}

.dv-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.dv-usp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--dv-card-bg);
  padding: 20px 18px;
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-border-color);
  box-shadow: var(--dv-shadow-sm);
  transition: var(--dv-transition);
}

.dv-usp-card:hover {
  transform: translateY(-4px);
  border-color: var(--dv-accent);
  box-shadow: var(--dv-shadow);
}

.dv-usp-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: var(--dv-radius-full);
  border: 2px solid var(--dv-accent);
  background-color: var(--dv-accent-light);
  color: var(--dv-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.dv-usp-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--dv-primary);
  margin: 0 0 4px 0;
}

.dv-usp-info p {
  font-size: 12px;
  color: var(--dv-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   16. TESTIMONIAL CARDS (.dv-testimonial-card)
   ========================================================================== */
.dv-testimonials-section {
  padding: 60px 20px;
  background-color: var(--dv-bg);
}

.dv-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.dv-testimonial-card {
  background: var(--dv-card-bg);
  border: 1px solid var(--dv-border-color);
  border-radius: var(--dv-radius);
  padding: 28px 24px;
  box-shadow: var(--dv-shadow-sm);
  transition: var(--dv-transition);
  position: relative;
  display: flex;
  flex-direction: column;
}

.dv-testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--dv-shadow-hover);
  border-color: var(--dv-accent);
}

.dv-testimonial-card .dv-stars {
  color: var(--dv-accent);
  font-size: 16px;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.dv-testimonial-card blockquote {
  font-style: italic;
  color: var(--dv-text-main);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.dv-testimonial-card .dv-author {
  font-weight: 700;
  color: var(--dv-primary);
  font-size: 14px;
}

.dv-testimonial-card .dv-author-product {
  font-size: 12px;
  color: var(--dv-text-muted);
}

/* ==========================================================================
   17. OFFER BANNER (.dv-offer-banner)
   ========================================================================== */
.dv-offer-banner {
  background: linear-gradient(135deg, #6B1416 0%, var(--dv-primary) 50%, #5E1420 100%);
  color: var(--dv-white);
  padding: 60px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 40px 0;
}

.dv-offer-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(201, 168, 76, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.dv-offer-banner-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.dv-offer-banner h2 {
  color: var(--dv-white);
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 12px;
}

.dv-offer-banner p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  margin-bottom: 24px;
}

.dv-coupon-box {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 2px dashed var(--dv-accent);
  color: var(--dv-accent);
  padding: 10px 24px;
  border-radius: var(--dv-radius);
  font-family: var(--dv-font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 24px;
}

/* ==========================================================================
   18. SITE FOOTER
   ========================================================================== */
.site-footer,
.site-footer .site-footer-primary-section-1 {
  background-color: var(--dv-footer-bg) !important;
  color: #F8EFE0 !important;
  padding-top: 50px;
}

.site-footer h4,
.site-footer h3,
.site-footer .widget-title {
  color: var(--dv-accent) !important;
  font-family: var(--dv-font-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.5px !important;
}

.site-footer a {
  color: #F8EFE0 !important;
  transition: var(--dv-transition);
}

.site-footer a:hover {
  color: var(--dv-accent) !important;
  padding-left: 4px;
}

.site-footer .site-primary-footer-wrap {
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  padding-bottom: 40px;
}

.site-footer .site-below-footer-wrap {
  background-color: #550000;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  padding: 16px 0;
  text-align: center;
}

/* ==========================================================================
   19. WOOCOMMERCE FORM INPUTS
   ========================================================================== */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select {
  border: 1px solid var(--dv-border-color) !important;
  border-radius: var(--dv-radius) !important;
  padding: 10px 14px !important;
  background-color: var(--dv-card-bg) !important;
  color: var(--dv-text-main) !important;
  transition: var(--dv-transition) !important;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: var(--dv-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139, 30, 45, 0.15) !important;
}

/* ==========================================================================
   20. LAB CERTIFICATE PILL BADGE (.dv-lab-cert)
   ========================================================================== */
.dv-lab-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #E8F5E9;
  color: #1B5E20;
  border: 1px solid #A5D6A7;
  padding: 6px 14px;
  border-radius: var(--dv-radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 12px 0;
}

.dv-lab-cert svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ==========================================================================
   21. WHATSAPP FLOATING BUTTON
   ========================================================================== */
.dv-whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 54px;
  height: 54px;
  background-color: #25D366;
  color: var(--dv-white);
  border-radius: var(--dv-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: var(--dv-transition);
  text-decoration: none !important;
}

.dv-whatsapp-btn:hover {
  transform: scale(1.1);
  background-color: #20BA5A;
  color: var(--dv-white);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.dv-whatsapp-btn svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

/* Scroll to top button */
#dv-scroll-top {
  position: fixed;
  bottom: 88px;
  right: 26px;
  width: 44px;
  height: 44px;
  background-color: var(--dv-primary);
  color: var(--dv-white);
  border-radius: var(--dv-radius-full);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(139, 30, 45, 0.25);
  z-index: 9998;
  transition: var(--dv-transition);
}

#dv-scroll-top:hover {
  background-color: var(--dv-primary-dark);
  transform: translateY(-3px);
}

/* Toast notice */
.dv-toast-notice {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 99999;
  background: var(--dv-primary);
  color: var(--dv-white);
  padding: 12px 20px;
  border-radius: var(--dv-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 4px solid var(--dv-accent);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dv-toast-notice.dv-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.dv-toast-notice.dv-toast--success {
  background: #1B5E20;
  border-left-color: #4CAF50;
}

/* ==========================================================================
   22. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 992px) {
  ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .dv-usp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dv-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dv-hero h1 {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .dv-cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .dv-testimonials-grid {
    grid-template-columns: 1fr;
  }
  .dv-hero {
    min-height: 420px;
    padding: 40px 16px;
    text-align: center;
  }
  .dv-hero-content {
    margin: 0 auto;
  }
  .dv-hero-actions {
    justify-content: center;
  }
  .dv-hero h1 {
    font-size: 28px;
  }
  .dv-section-title h2 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  ul.products li.product img,
  .dv-product-card__img-wrap img {
    height: 170px !important;
  }
  .dv-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dv-usp-grid {
    grid-template-columns: 1fr;
  }
  .dv-announcement-bar {
    font-size: 11px;
    padding: 6px 12px;
  }
}

/* ==========================================================================
   23. UTILITY CLASSES
   ========================================================================== */
.dv-text-primary    { color: var(--dv-primary) !important; }
.dv-text-accent     { color: var(--dv-accent) !important; }
.dv-text-muted      { color: var(--dv-text-muted) !important; }
.dv-bg-primary      { background-color: var(--dv-primary) !important; }
.dv-bg-accent       { background-color: var(--dv-accent) !important; }
.dv-bg-cream        { background-color: var(--dv-bg) !important; }
.dv-bg-section      { background-color: var(--dv-section-bg) !important; }
.dv-shadow          { box-shadow: var(--dv-shadow) !important; }
.dv-rounded         { border-radius: var(--dv-radius) !important; }
.dv-rounded-full    { border-radius: var(--dv-radius-full) !important; }