/* Quick View corner radius overrides (strong selector) */
.quick-view-popup.mfpbox.mfp-with-anim,
.quick-view-popup .ptContainer {
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Ensure inner images also respect the rounded corners */
.quick-view-popup.mfpbox.mfp-with-anim .product-photoslider img,
.quick-view-popup.mfpbox.mfp-with-anim .product-single__thumbnail-image,
.quick-view-popup.mfpbox.mfp-with-anim picture img {
  border-radius: var(--radius-card);
}

/* Quick View Add to Cart Button */
.quick-view-popup .product-quickview-submit,
.quick-view-popup #AddToCart-quickView,
#AddToCart-quickView {
  border-radius: var(--radius-button) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* Quick View Info & Stock Alignment */
.quick-view-popup .product-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
.quick-view-popup .product-stock {
  margin: 0;
}

/* Quick View Content Layout & Alignment */
.quick-view-popup .product-single__meta {
  display: flex;
  flex-direction: column;
  padding-right: var(--spacing-md);
}

.quick-view-popup .product-single__title {
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
}

.quick-view-popup .product-single__price {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-size: 20px;
  color: var(--color-primary);
  font-weight: 700;
}

.quick-view-popup .product-single__description {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 14px;
}

/* Form Actions Row (Qty + Cart) */
.quick-view-popup .product-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.quick-view-popup .qtyField {
  border-radius: var(--radius-button);
  border: 1px solid #ddd;
  height: 44px; /* Match button height */
  display: flex;
  align-items: center;
  overflow: hidden;
}

.quick-view-popup .qtyField input {
  border: none;
  text-align: center;
  height: 100%;
}

/* Wishlist Button - Secondary Action */
.quick-view-popup .wishlist.addto-wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  margin-top: var(--spacing-sm);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-button);
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
}

.quick-view-popup .wishlist.addto-wishlist:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.quick-view-popup .wishlist.addto-wishlist i {
  margin-right: 8px;
  font-size: 16px;
}

/* ========================================
   PRODUCT PAGE TEMPLATE STYLES
   ======================================== */

/* Product Images - Rounded Corners */
.product-single__photos .prod-large-img,
.product-single__photos .primgSlider .slick-slide img,
.product-single__thumbnails .prThumb img,
.product-single__thumbnails .product-single__thumbnail {
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Product Page Add to Cart Button */
.product-form__cart-submit,
#AddToCart-product-template,
[id^="AddToCart-template"] {
  border-radius: var(--radius-button) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* Product Page Actions Layout - Align Qty & Add to Cart */
.product-single__meta .product-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.product-single__meta .qtyField {
  border-radius: var(--radius-button);
  border: 1px solid #ddd;
  height: 44px; /* Consistent height */
  display: flex;
  align-items: center;
  overflow: hidden;
}

.product-single__meta .qtyField input {
  border: none;
  text-align: center;
  height: 100%;
}

/* Info Links Layout (Wishlist, Delivery, Enquiry) */
.infolinks {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin: var(--spacing-md) 0;
  flex-wrap: wrap;
}

.infolinks .wishlist.addto-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-button);
  color: var(
    --color-text
  ); /* Usually dark text for outline buttons, or primary if requested */
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
  background-color: transparent;
  width: auto; /* Allow auto width unlike quickview */
}

.infolinks .wishlist.addto-wishlist:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.infolinks .wishlist.addto-wishlist i {
  margin-right: 8px;
  font-size: 16px;
  color: var(--color-primary); /* Icon primary color */
}

.infolinks .wishlist.addto-wishlist:hover i {
  color: var(--color-white);
}

.infolinks .inLink:not(.wishlist) {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition);
}

.infolinks .inLink:not(.wishlist):hover {
  color: var(--color-primary);
}

.infolinks .inLink i {
  margin-right: 6px;
  font-size: 18px;
  color: var(--color-text);
}
.infolinks .inLink:hover i {
  color: var(--color-primary);
}

/* ========================================
   PRODUCT DESCRIPTION SANITIZATION
   Fixes "dirty" HTML issues (nested lists, inline styles)
   ======================================== */
.product-description ul {
  margin-bottom: 1em;
}

/* Fix double-nested ULs from copy-paste */
.product-description ul ul {
  margin: 0;
  padding-left: 20px; /* Standardize indent */
  list-style-type: disc; /* Force solid bullets */
}

.product-description li {
  margin-bottom: 5px;
  line-height: 1.6;
}

/* Override hardcoded inline green colors to use Theme Primary */
.product-description span[style*="color"],
.product-description span[color] {
  color: var(--color-primary) !important;
  font-weight: 600; /* Make ingredients slightly bolder/cleaner */
  font-family: inherit !important; /* Reset any weird fonts */
}

/* Clean up headers inside description (like 'Quantity') */
.product-description h4 {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-text);
}

/* Shipping Message Styling */
.shippingMsg {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}
.shippingMsg i {
  color: var(--color-primary);
  font-size: 16px;
}

/* Product Meta Info (Type, Collections) */
.product-info.other {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid #eee;
}

.product-info.other p {
  margin-bottom: var(--spacing-xs);
  font-size: 14px;
  color: var(--color-text);
}

.product-info.other .lbl {
  font-weight: 600;
  color: var(--color-heading);
  margin-right: 5px;
}

.product-info.other a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.product-info.other a:hover {
  color: var(--color-primary);
}

/*
 * NeoSoils Custom Theme Styles
 *
 * Structure:
 * 1. CSS Variables (Design Tokens)
 * 2. Utility Classes
 * 3. Component Styles (Organized by section)
 *    - Navigation & Dropdowns
 *    - Slideshow & Banners
 *    - Headers & Sticky Navigation
 *    - Cards & Content Blocks
 *    - Quotes & Testimonials
 *    - Features & Store Features
 *    - Collections & Banners
 *    - Products & Sliders
 *    - Blog Posts & Articles
 *    - Video Sections
 *    - Header Icons & Actions
 * 4. Responsive Breakpoints
 * 5. Accessibility & Motion Preferences
 */

:root {
  --color-primary: #6aa842;
  --color-primary-dark: #5a9238;
  --color-accent: #d0b875;
  --color-text: #333333;
  --color-white: #ffffff;
  --color-light-bg: #f5f5f5;
  --color-lighter-bg: #fafafa;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 40px;
  --radius-card: 8px;
  --radius-button: 4px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-header-active: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 3px 8px rgba(106, 168, 66, 0.3);
  --transition: 0.3s ease-in-out;
  --transition-fast: 0.2s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  --size-icon-desktop: 44px;
  --size-icon-tablet: 42px;
  --size-icon-mobile: 40px;
  --size-svg-desktop: 20px;
  --size-svg-tablet: 19px;
  --size-svg-mobile: 18px;
  --gap-desktop: 16px;
  --gap-tablet: 14px;
  --gap-mobile: 12px;
}

/* Utility Classes */
.radius-card {
  border-radius: var(--radius-card);
}

.radius-button {
  border-radius: var(--radius-button);
}

/* Navigation & Dropdown Elements */
.nav-dropdown,
.details,
.collection-grid-item,
.collection-grid-item .img,
.megamenu-wrapper,
.megamenu,
.dropdown-menu,
.submenu,
.navbar-nav .dropdown-menu,
.navbar-nav .megamenu,
.dropdown-submenu > .dropdown-menu,
.collection-grid-item:hover,
.collection-grid-item:hover .img {
  border-radius: var(--radius-card);
}
/* ========================================
   ANNOUNCEMENT BAR
   ======================================== */
@media (max-width: 768px) {
  .announcement-bar,
  .announcement-bar p,
  .announcement-bar a {
    font-size: 11px;
  }
}

/* ========================================
   SLIDESHOW & HERO SECTIONS
   ======================================== */
.slide-caption,
.slide-caption-bg,
.slide-text-wrapper,
.slideshow-caption,
.slideshow .caption-bg,
.slideshow-text-bg,
.slideshow .slide-overlay,
.slideshow .caption-overlay,
.slideshow-overlay,
.slideshow .slide-text,
.slideshow .slide-content,
.slideshow-content,
.wrap-caption.text-center.anim-tru.style2,
.wrap-caption.text-center.anim-tru.style2 > div {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.slideshow .btn,
.slideshow .slide-button,
.slideshow button {
  background-color: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
  border-radius: var(--radius-button);
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition);
}
.slideshow .btn:hover,
.slideshow .slide-button:hover,
.slideshow button:hover {
  background-color: #c4a563;
  color: var(--color-text);
  border-color: #c4a563;
}
/* ========================================
   STICKY HEADER & NAVIGATION
   ======================================== */
.sticky-header,
.header.sticky,
.sticky-nav {
  box-shadow: var(--shadow-header);
  transition: box-shadow var(--transition);
  background-color: var(--color-white);
  border-bottom: 1px solid #f0f0f0;
}
.sticky-header.active,
.header.sticky.active {
  box-shadow: var(--shadow-header-active);
}
.sticky-header .logo,
.sticky-header .site-logo,
.header.sticky .logo,
.header.sticky .site-logo {
  padding: var(--spacing-sm) 0;
  transition: all var(--transition);
}
.sticky-header nav,
.sticky-header .navbar,
.header.sticky nav,
.header.sticky .navbar {
  padding: 0 15px;
  transition: all var(--transition);
}
.sticky-header .nav-item,
.sticky-header .navbar-nav > li,
.header.sticky .nav-item,
.header.sticky .navbar-nav > li {
  padding: 0 12px;
  transition: all var(--transition);
}
.sticky-header .header-icon,
.sticky-header .cart-icon,
.sticky-header .search-icon,
.header.sticky .header-icon,
.header.sticky .cart-icon,
.header.sticky .search-icon {
  margin: 0 var(--spacing-sm);
  transition: all var(--transition);
}
/* ========================================
   CARD COMPONENTS
   ======================================== */
.card,
.quote-item,
.testimonial-card,
.quote-box,
.feature-item,
.feature-card,
.store-feature-box,
.product-item,
.product-card,
.slider-card,
.blog-item,
.blog-card,
.post-card,
.collection-item,
.collection-card,
.banner-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-white);
  padding: var(--spacing-xl);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover,
.quote-item:hover,
.testimonial-card:hover,
.quote-box:hover,
.feature-item:hover,
.feature-card:hover,
.store-feature-box:hover,
.product-item:hover,
.product-card:hover,
.slider-card:hover,
.blog-item:hover,
.blog-card:hover,
.post-card:hover,
.collection-item:hover,
.collection-card:hover,
.banner-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* ========================================
   QUOTES & TESTIMONIALS
   ======================================== */
.quotes-section,
.testimonials-section {
  background-color: var(--color-light-bg);
}
.quote-text,
.testimonial-text,
.quote-item p {
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}
.quote-author,
.testimonial-author,
.quote-item .author {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
}
.quote-rating,
.testimonial-rating,
.star-rating {
  color: var(--color-primary);
}
.quotes-section .arrow,
.testimonials-section .arrow,
.quote-nav-arrow {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transition: background-color var(--transition), color var(--transition);
}
.quotes-section .arrow:hover,
.testimonials-section .arrow:hover,
.quote-nav-arrow:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.quotes-section .dots,
.testimonials-section .dots,
.quote-dots {
  background-color: #ddd;
  transition: background-color var(--transition);
}
.quotes-section .dots.active,
.testimonials-section .dots.active,
.quote-dots.active {
  background-color: var(--color-primary);
}
.quotes-section h2,
.testimonials-section h2,
.quote-section-title {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--spacing-xxl);
}
@media (max-width: 768px) {
  .quote-item,
  .testimonial-card,
  .quote-box {
    padding: var(--spacing-lg);
  }
  .quote-text,
  .testimonial-text,
  .quote-item p {
    font-size: 14px;
  }
}
/* ========================================
   STORE FEATURES
   ======================================== */
.store-features-section,
.store-features,
.features-section {
  background-color: var(--color-light-bg);
}
.feature-icon,
.store-feature-icon,
.feature-item i {
  color: var(--color-primary);
  font-size: 55px;
  transition: transform var(--transition);
  display: block;
  margin-bottom: var(--spacing-lg);
}
.feature-item:hover .feature-icon,
.feature-card:hover .store-feature-icon,
.store-feature-box:hover i {
  transform: scale(1.1);
}
.feature-title,
.store-feature-title,
.feature-item h3 {
  color: var(--color-text);
  font-weight: 700;
  font-size: 16px;
  margin: var(--spacing-lg) 0 var(--spacing-md) 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.feature-text,
.store-feature-text,
.feature-item p {
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
}
.store-features-section h2,
.store-features h2,
.features-section h2 {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}
.store-features-section h3,
.store-features h3,
.features-section h3 {
  color: var(--color-primary);
  font-weight: 400;
  font-size: 16px;
  margin-bottom: var(--spacing-xxl);
}
@media (max-width: 768px) {
  .feature-item,
  .feature-card,
  .store-feature-box {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }
  .feature-icon,
  .store-feature-icon,
  .feature-item i {
    font-size: 45px;
  }
  .feature-title,
  .store-feature-title,
  .feature-item h3 {
    font-size: 14px;
  }
  .feature-text,
  .store-feature-text,
  .feature-item p {
    font-size: 13px;
  }
}
/* ========================================
   COLLECTIONS & BANNERS
   ======================================== */
.collection-banner-section,
.collection-banner,
.banner-section {
  background-color: var(--color-white);
}
.collection-detail,
.collection-info,
.banner-detail {
  background-color: var(--color-light-bg);
  color: var(--color-text);
  padding: var(--spacing-xl);
  transition: all var(--transition);
}
.collection-title,
.banner-title,
.collection-item h3 {
  color: var(--color-text);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: var(--spacing-sm);
}
.collection-subtitle,
.banner-subtitle,
.collection-item p {
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--spacing-lg);
}
/* Primary Button Styles */
.collection-btn,
.banner-btn,
.collection-item .btn,
.product-btn,
.slider-btn,
.product-item .btn,
.blog-btn,
.post-btn,
.blog-item .btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  border-radius: var(--radius-button);
  transition: background-color var(--transition), border-color var(--transition),
    box-shadow var(--transition);
  padding: 10px 16px;
  font-size: 13px;
}

.collection-btn:hover,
.banner-btn:hover,
.collection-item .btn:hover,
.product-btn:hover,
.slider-btn:hover,
.product-item .btn:hover,
.blog-btn:hover,
.post-btn:hover,
.blog-item .btn:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-hover);
}
.product-image,
.slider-image,
.product-item img {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  transition: transform var(--transition);
}
.collection-banner-section h2,
.collection-banner h2,
.banner-section h2 {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}
.collection-banner-section h3,
.collection-banner h3,
.banner-section h3 {
  color: var(--color-primary);
  font-weight: 400;
  font-size: 16px;
  margin-bottom: var(--spacing-xxl);
}
@media (max-width: 768px) {
  .collection-item,
  .collection-card,
  .banner-card {
    margin-bottom: var(--spacing-lg);
  }
  .collection-detail,
  .collection-info,
  .banner-detail {
    padding: var(--spacing-lg);
  }
  .collection-title,
  .banner-title,
  .collection-item h3 {
    font-size: 16px;
  }
  .collection-subtitle,
  .banner-subtitle,
  .collection-item p {
    font-size: 13px;
  }
}
/* ========================================
   PRODUCT SLIDERS
   ======================================== */
.product-slider-section,
.products-slider,
.slider-section {
  background-color: var(--color-lighter-bg);
}
.product-title,
.slider-title,
.product-item h3 {
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}
.product-price,
.slider-price,
.product-item .price {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: var(--spacing-sm);
}
/* Product button styles consolidated above */
.color-swatch,
.product-swatch,
.swatch-item {
  border-radius: var(--radius-button);
  border: 2px solid #ddd;
  transition: border-color var(--transition), transform var(--transition),
    box-shadow var(--transition);
}
.color-swatch.active,
.product-swatch.active,
.swatch-item.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--shadow-hover);
}
.color-swatch:hover,
.product-swatch:hover,
.swatch-item:hover {
  border-color: var(--color-primary);
  transform: scale(1.05);
}
.product-slider-section h2,
.products-slider h2,
.slider-section h2 {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}
.product-slider-section h3,
.products-slider h3,
.slider-section h3 {
  color: var(--color-primary);
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 30px;
  line-height: 1.6;
}
/* View All Button Styles */
.view-all-btn,
.slider-view-all,
.product-slider .view-all,
.blog-view-all-btn,
.post-view-all,
.blog-section .view-all,
.video-section .btn,
.video-wrapper .btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  border-radius: var(--radius-button);
  transition: background-color var(--transition), border-color var(--transition),
    box-shadow var(--transition);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
}

.view-all-btn:hover,
.slider-view-all:hover,
.product-slider .view-all:hover,
.blog-view-all-btn:hover,
.post-view-all:hover,
.blog-section .view-all:hover,
.video-section .btn:hover,
.video-wrapper .btn:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-hover);
}
@media (max-width: 768px) {
  .product-item,
  .product-card,
  .slider-card {
    margin-bottom: var(--spacing-lg);
  }
  .product-title,
  .slider-title,
  .product-item h3 {
    font-size: 13px;
  }
  .product-price,
  .slider-price,
  .product-item .price {
    font-size: 13px;
  }
  .product-btn,
  .slider-btn,
  .product-item .btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}
/* ========================================
   BLOG & POSTS
   ======================================== */

/* ===== MODERN 2026 BLOG PAGE STYLING ===== */
/*
 * Comprehensive blog styling with guaranteed 8px border radius
 * on all image elements across:
 * - Blog listing pages
 * - Article detail pages
 * - Featured images, thumbnails, author avatars
 * - Content images (inline, hero, featured)
 * - All Shopify-specific blog classes
 * - Picture elements and image wrappers
 */

/* ===== BLOG CONTAINER & LAYOUT ===== */
.blog-container,
.blog-posts-wrapper,
.blog-grid,
.blog--list-view {
  background-color: transparent;
}

.blog-posts-wrapper {
  padding: 60px 20px;
}

/* Main blog content area spacing */
.fl1.w_100 {
  margin-left: var(--spacing-xxl);
}

.fl.f-col.f-row-md > .fl1.w_100 {
  padding-left: var(--spacing-xl);
}

/* ===== BREADCRUMBS NAVIGATION ===== */
.bredcrumbWrap {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  padding: var(--spacing-md) 0;
  margin-bottom: var(--spacing-xl);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: 13px;
  line-height: 1.4;
}

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

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

.breadcrumbs span[aria-hidden="true"] {
  color: #ccc;
  margin: 0 var(--spacing-xs);
  user-select: none;
}

.breadcrumbs .title-bold {
  color: var(--color-text);
  font-weight: 600;
}

/* ===== BLOG PAGE TITLE ===== */
.page-title,
h1.page-title,
.blog--list-view .page-title,
.blog-page .page-title {
  color: var(--color-text);
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--spacing-xxl) 0;
  padding: var(--spacing-xxl) 0 var(--spacing-lg) 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
  position: relative;
}

.page-title::after,
h1.page-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  );
  margin: var(--spacing-lg) auto 0;
  border-radius: 2px;
}

/* ===== ARTICLE CARDS STYLING ===== */
.article,
.blog--list-view .article {
  background-color: #ffffff;
  border-radius: 8px;
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xxl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow var(--transition), transform var(--transition);
}

.article:hover,
.blog--list-view .article:hover {
  box-shadow: 0 8px 24px rgba(106, 168, 66, 0.12);
  transform: translateY(-4px);
}

/* Article Featured Image */
.article_featured-image,
.article .article_featured-image {
  display: block;
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
  border-radius: 8px;
}

.article_featured-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform var(--transition);
}

.article:hover .article_featured-image img {
  transform: scale(1.02);
}

.article img,
.blog--list-view .article img {
  border-radius: 8px;
}

/* Article Title */
.article h3 {
  margin: 0 0 var(--spacing-md) 0;
  padding: 0;
}

.article h3 a {
  color: var(--color-text);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
  transition: color var(--transition);
  display: block;
}

.article h3 a:hover {
  color: var(--color-primary);
}

/* Article Metadata (publish-detail) */
.article .publish-detail {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: 13px;
  color: #999;
}

.article .publish-detail li {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-md);
}

.article .publish-detail li:last-child {
  margin-right: 0;
}

.article .publish-detail li::before {
  content: "•";
  margin-right: var(--spacing-sm);
  color: var(--color-primary);
  font-weight: bold;
}

.article .publish-detail li:first-child::before {
  content: none;
}

.article__author {
  color: #666;
}

/* Article Tags */
.article__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin-top: var(--spacing-sm);
}

.article__tags span {
  color: #999;
  margin-right: var(--spacing-sm);
}

.article__tags a {
  display: inline-block;
  padding: 4px 12px;
  background-color: #f0f0f0;
  color: var(--color-text);
  font-size: 12px;
  text-decoration: none;
  border-radius: 16px;
  margin-right: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  transition: background-color var(--transition), color var(--transition);
}

.article__tags a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Article Excerpt (RTE) */
.article .rte {
  margin-bottom: var(--spacing-lg);
}

.article .rte p {
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* Article Read More Button */
.article > p:last-child {
  margin: 0;
}

.article .btn {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 12px 24px;
  border-radius: var(--radius-button);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--transition), box-shadow var(--transition);
}

.article .btn:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-hover);
}

/* ===== SINGLE ARTICLE PAGE STYLING ===== */

/* Article Header Section */
.section-header {
  margin-bottom: var(--spacing-xxl);
}

.section-header h1,
.section-header .h2 {
  color: var(--color-text);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

.section-header .publish-detail {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: 14px;
  color: #999;
}

.section-header .publish-detail li {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-md);
}

.section-header .publish-detail li::before {
  content: "•";
  margin-right: var(--spacing-sm);
  color: var(--color-primary);
  font-weight: bold;
}

.section-header .publish-detail li:first-child::before {
  content: none;
}

/* Single Article Featured Image */
.blog--list-view > .article_featured-image {
  margin-bottom: var(--spacing-xxl);
  border-radius: 8px;
  overflow: hidden;
}

.blog--list-view > .article_featured-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Article Content (RTE) */
.blog--list-view > .rte {
  margin-bottom: var(--spacing-xxl);
}

.blog--list-view > .rte p {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.blog--list-view > .rte p:last-child {
  margin-bottom: 0;
}

.blog--list-view > .rte b,
.blog--list-view > .rte strong {
  font-weight: 700;
  color: var(--color-text);
}

.blog--list-view > .rte blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  font-style: italic;
  color: #666;
}

.blog--list-view > .rte blockquote p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
}

.blog--list-view > .rte ul,
.blog--list-view > .rte ol {
  margin: var(--spacing-lg) 0;
  padding-left: var(--spacing-xxl);
}

.blog--list-view > .rte li {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: var(--spacing-sm);
}

.blog--list-view > .rte ul li {
  list-style-type: disc;
}

.blog--list-view > .rte a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition);
}

.blog--list-view > .rte a:hover {
  color: var(--color-primary-dark);
}

/* Article Tags (Bottom) */
.blog--list-view > .publish-detail[aria-label] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xxl);
  padding: var(--spacing-lg) 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.blog--list-view > .publish-detail[aria-label] span {
  color: #999;
  font-size: 14px;
  font-weight: 600;
}

.blog--list-view > .publish-detail[aria-label] a {
  display: inline-block;
  padding: 6px 14px;
  background-color: #f0f0f0;
  color: var(--color-text);
  font-size: 13px;
  text-decoration: none;
  border-radius: 20px;
  transition: background-color var(--transition), color var(--transition);
}

.blog--list-view > .publish-detail[aria-label] a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Social Sharing Buttons */
.social-sharing {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xxl);
  padding: var(--spacing-lg) 0;
}

.btn--share {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 18px;
  border-radius: var(--radius-button);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: transform var(--transition), box-shadow var(--transition);
  color: var(--color-white);
}

.btn--share:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-facebook {
  background-color: #1877f2;
}

.share-twitter {
  background-color: #1da1f2;
}

.share-pinterest {
  background-color: #e60023;
}

.share-whatsapp {
  background-color: #25d366;
}

.btn--share i {
  font-size: 16px;
}

.share-title {
  font-weight: 600;
}

/* Blog Navigation (Previous/Next) */
.blog-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xxl);
  padding: var(--spacing-lg) 0;
}

.blog-nav .btn--link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 20px;
  background-color: #f5f5f5;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-button);
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--transition), color var(--transition);
}

.blog-nav .btn--link:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.blog-nav .btn--link i {
  font-size: 14px;
}

/* Return Link */
.return-link-wrapper {
  padding: var(--spacing-xxl) 0;
}

.return-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 24px;
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-button);
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--transition), color var(--transition);
}

.return-link:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.return-link i {
  font-size: 14px;
}

/* ===== PAGINATION STYLING ===== */
.pagination {
  margin: var(--spacing-xxl) 0;
  padding: var(--spacing-xl) 0;
  display: flex;
  justify-content: center;
}

.pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.pagination li {
  margin: 0;
}

.pagination li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--spacing-md);
  background-color: #f5f5f5;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-button);
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--transition), color var(--transition),
    transform var(--transition);
}

.pagination li a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Active Page */
.pagination li.active a {
  background-color: var(--color-primary);
  color: var(--color-white);
  cursor: default;
  pointer-events: none;
}

/* Disabled/Ellipsis */
.pagination li.ellipsis.disabled a,
.pagination li.disabled a {
  background-color: transparent;
  color: #999;
  cursor: default;
  pointer-events: none;
}

.pagination li.ellipsis.disabled a:hover,
.pagination li.disabled a:hover {
  background-color: transparent;
  color: #999;
  transform: none;
}

/* Next/Previous Buttons */
.pagination li.next a,
.pagination li.prev a {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination li.next a:hover,
.pagination li.prev a:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-hover);
}

.pagination li.next a i,
.pagination li.prev a i {
  font-size: 16px;
}

/* ===== PRODUCT COLLECTION PAGE STYLING ===== */

/* Product List Container */
.productList {
  margin: var(--spacing-xxl) 0;
}

/* Filters Toolbar */
.filters-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}

.filters-toolbar__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Filter Button (Mobile) */
.btn-filter {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 20px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-button);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition), box-shadow var(--transition);
}

.btn-filter:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-hover);
}

.btn-filter i {
  font-size: 16px;
}

/* View Switcher (Grid/List Toggle) */
.collection-view-as {
  display: flex;
  gap: var(--spacing-xs);
  background-color: #f5f5f5;
  padding: 4px;
  border-radius: var(--radius-button);
}

.change-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-button);
  color: #666;
  cursor: pointer;
  transition: all var(--transition);
}

.change-view i {
  font-size: 18px;
}

.change-view:hover {
  color: var(--color-primary);
  background-color: rgba(106, 168, 66, 0.1);
}

.change-view--active {
  background-color: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Product Count */
.filters-toolbar__product-count {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}

/* Sort Dropdown */
.filters-toolbar__input--sort {
  padding: 10px 16px;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-button);
  font-size: 14px;
  color: var(--color-text);
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition);
  min-width: 180px;
}

.filters-toolbar__input--sort:focus {
  outline: none;
  border-color: var(--color-primary);
}

.filters-toolbar__input--sort:hover {
  border-color: var(--color-primary);
}

/* Active Facets/Filters */
.active-facets.crFilters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md) 0;
}

.actFilter {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px 16px;
  background-color: var(--color-white);
  color: var(--color-text);
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}

.actFilter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: rgba(106, 168, 66, 0.05);
}

.actFilter i {
  font-size: 12px;
}

.actFilter:first-child {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.actFilter:first-child:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* Product Grid */
.grid-products {
  margin-top: var(--spacing-xl);
}

/* Product Card */
.grid-view-item {
  transition: transform var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grid-view-item:hover {
  transform: translateY(-4px);
}

/* Product Image Container */
.grid-view_image {
  position: relative;
  margin-bottom: var(--spacing-lg);
  border-radius: 8px;
  overflow: visible;
}

.grid-view-item__link {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

/* Product Images */
.grid-view-item__image {
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding-bottom: 100%;
  position: relative;
  transition: opacity var(--transition);
}

.grid-view-item__image.hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition);
}

.grid-view-item:hover .grid-view-item__image.hover {
  opacity: 1;
}

.grid-view-item__image picture,
.grid-view-item__image img {
  border-radius: 8px;
}

/* Button Set (Wishlist, Add to Cart, Quick View) */
.button-set {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 20;
  pointer-events: none;
  width: max-content;
}

.grid-view-item:hover .button-set {
  opacity: 1;
  pointer-events: auto;
}

.button-set .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.button-set .btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(106, 168, 66, 0.3);
}

.button-set .btn i {
  font-size: 18px;
}

/* Tooltip Labels */
.button-set .tooltip-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background-color: rgba(0, 0, 0, 0.85);
  color: var(--color-white);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 100;
}

.button-set .btn:hover .tooltip-label {
  opacity: 1;
}

/* Product Details */
.grid-view-item .details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.grid-view-item__title {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
  display: block;
  transition: color var(--transition);
}

.grid-view-item__title:hover {
  color: var(--color-primary);
}

/* Product Meta (Price) */
.grid-view-item__meta {
  margin-bottom: var(--spacing-sm);
}

.product-price__price {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Grid Swatches (Color Options) */
.gridSwatches {
  list-style: none;
  padding: 0;
  margin: var(--spacing-sm) 0 0 0;
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.gridSwatches li {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}

.gridSwatches li:hover {
  border-color: var(--color-primary);
  transform: scale(1.1);
}

/* Responsive Styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .filters-toolbar {
    padding: var(--spacing-md);
  }

  .grid-view-item__title {
    font-size: 14px;
  }

  .product-price__price {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .filters-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .filters-toolbar__item {
    width: 100%;
    justify-content: space-between;
  }

  .filters-toolbar__item.text-right {
    text-align: left;
  }

  .filters-toolbar__input--sort {
    width: 100%;
  }

  .flbarCount {
    display: none !important;
  }

  .grid-view-item__title {
    font-size: 13px;
  }

  .product-price__price {
    font-size: 14px;
  }

  .button-set {
    opacity: 1;
    position: static;
    transform: none;
    margin-top: var(--spacing-sm);
    justify-content: center;
  }

  .button-set .btn {
    width: 40px;
    height: 40px;
  }

  .button-set .btn i {
    font-size: 16px;
  }

  .tooltip-label {
    display: none;
  }

  .active-facets.crFilters {
    padding: var(--spacing-sm) 0;
  }

  .actFilter {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ===== QUICK VIEW MODAL STYLING ===== */
.quick-view-popup.mfpbox {
  background-color: var(--color-white);
  border-radius: 12px;
  max-width: 900px;
  width: 90%;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.quick-view-popup .mfp-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background-color: var(--color-white);
  color: var(--color-text);
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 100;
  opacity: 1;
}

.quick-view-popup .mfp-close:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: rotate(90deg);
}

.ptContainer {
  padding: var(--spacing-xxl);
}

.product-single {
  display: flex;
  gap: var(--spacing-xxl);
  flex-wrap: wrap;
}

/* Product Photos Section */
.product-single__photos {
  flex: 1;
  min-width: 300px;
}

.product-photos {
  margin-bottom: var(--spacing-lg);
}

.product-photoslider img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.view-full.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 24px;
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
  margin-top: var(--spacing-md);
}

.view-full.btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-hover);
}

.view-full.btn i {
  font-size: 16px;
}

/* Product Meta Section */
.product-single__meta {
  flex: 1;
  min-width: 300px;
}

.product-vendor {
  display: inline-block;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.5px;
  transition: color var(--transition);
}

.product-vendor:hover {
  color: var(--color-primary-dark);
}

.product-single__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.product-single__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.product-single__title a:hover {
  color: var(--color-primary);
}

/* Product Info */
.product-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid #f0f0f0;
}

.product-stock span.instock {
  display: inline-block;
  padding: 4px 12px;
  background-color: rgba(106, 168, 66, 0.1);
  color: var(--color-primary);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

.product-stock span.outstock {
  display: inline-block;
  padding: 4px 12px;
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

/* Price */
.product-single__price {
  margin-bottom: var(--spacing-lg);
}

.product-price__price-quickView #ProductPrice-quickView {
  color: var(--color-primary);
  font-size: 28px;
  font-weight: 700;
  display: block;
  margin-bottom: var(--spacing-xs);
}

.product-price__sale-label {
  display: inline-block;
  padding: 4px 10px;
  background-color: #dc3545;
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  margin-left: var(--spacing-sm);
  text-transform: uppercase;
}

#ComparePrice-quickView {
  color: #999;
  font-size: 18px;
  margin-left: var(--spacing-sm);
}

.product__policies {
  color: #666;
  font-size: 13px;
  margin-bottom: var(--spacing-lg);
}

/* Description */
.product-single__description {
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid #f0f0f0;
}

/* Product Form */
.productForm {
  margin-bottom: var(--spacing-lg);
}

.product-form__variants {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-button);
  font-size: 14px;
  color: var(--color-text);
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition);
  margin-bottom: var(--spacing-lg);
}

.product-form__variants:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Product Action */
.product-action {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.qtyField {
  display: flex;
  align-items: center;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-button);
  overflow: hidden;
  background-color: var(--color-white);
}

.qtyBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 48px;
  background-color: #f5f5f5;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}

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

.qtyBtn i {
  font-size: 14px;
}

.product-form__input.qty {
  width: 60px;
  height: 48px;
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-white);
}

.product-form__input.qty:focus {
  outline: none;
}

/* Add to Cart Button */
.product-quickview-submit,
#AddToCart-quickView {
  flex: 1;
  padding: 14px 28px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-button);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.5px;
}

.product-quickview-submit:hover,
#AddToCart-quickView:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Wishlist Link */
.wishlist.addto-wishlist {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 24px;
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
}

.wishlist.addto-wishlist:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-hover);
}

.wishlist.addto-wishlist i {
  font-size: 18px;
}

/* Responsive Quick View */
@media (max-width: 768px) {
  .quick-view-popup.mfpbox {
    width: 95%;
    margin: 20px auto;
    border-radius: 8px;
  }

  .ptContainer {
    padding: var(--spacing-lg);
  }

  .product-single {
    gap: var(--spacing-lg);
  }

  .product-single__photos,
  .product-single__meta {
    min-width: 100%;
  }

  .product-single__title {
    font-size: 20px;
  }

  .product-price__price-quickView #ProductPrice-quickView {
    font-size: 24px;
  }

  .product-action {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .qtyField {
    justify-content: center;
  }

  .product-quickview-submit,
  #AddToCart-quickView {
    width: 100%;
  }

  .wishlist.addto-wishlist {
    width: 100%;
    justify-content: center;
  }
}

/* ===== BLOG SIDEBAR STYLING ===== */
.blog-right.sidebar,
.sidebar {
  padding: 0 var(--spacing-xl) 0 0;
}

/* Sidebar Widgets */
.sidebar_widget {
  background-color: #ffffff;
  border-radius: 8px;
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow var(--transition);
}

.sidebar_widget:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Widget Titles */
.widget-title {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Category List */
.blog-category,
.no-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-category li {
  margin-bottom: var(--spacing-sm);
}

.blog-category li a {
  color: var(--color-text);
  font-size: 14px;
  text-decoration: none;
  display: block;
  padding: var(--spacing-sm) 0;
  transition: color var(--transition), padding-left var(--transition);
  position: relative;
}

.blog-category li a::before {
  content: "›";
  position: absolute;
  left: -10px;
  color: var(--color-primary);
  opacity: 0;
  transition: opacity var(--transition), left var(--transition);
}

.blog-category li a:hover {
  color: var(--color-primary);
  padding-left: 12px;
}

.blog-category li a:hover::before {
  opacity: 1;
  left: 0;
}

/* Recent Posts */
.recentPost {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid #f0f0f0;
  transition: transform var(--transition);
}

.recentPost:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.recentPost:hover {
  transform: translateX(4px);
}

.recentPost .grid-view_image {
  flex-shrink: 0;
}

.recentPost .grid-view_image a {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.recentPost .grid-view_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform var(--transition);
}

.recentPost:hover .grid-view_image img {
  transform: scale(1.05);
}

.recentPost .details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.recentPost .article-name {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
  transition: color var(--transition);
}

.recentPost .article-name:hover {
  color: var(--color-primary);
}

.recentPost .article__date {
  color: #999;
  font-size: 12px;
}

/* Trending Products in Sidebar */
.list-columns.flex {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid #f0f0f0;
  transition: transform var(--transition);
}

.list-columns.flex:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.list-columns.flex:hover {
  transform: translateX(4px);
}

.list-columns .grid-view_image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.list-columns .grid-view-item__link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition);
}

.list-columns:hover .grid-view-item__link {
  transform: scale(1.05);
}

.list-columns .details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.list-columns .grid-view-item__title {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
  transition: color var(--transition);
}

.list-columns .grid-view-item__title:hover {
  color: var(--color-primary);
}

.list-columns .product-price__price {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
}

.list-columns .grid-view-item__meta {
  margin-bottom: var(--spacing-xs);
}

/* Article image links in sidebar */
.article-img,
.article-img img {
  border-radius: 8px;
  overflow: hidden;
}

/* Ensure all sidebar images have rounded corners */
.sidebar img,
.sidebar_widget img,
.blog-right img,
.widget-content img {
  border-radius: 8px;
}

.sidebar .grid-view_image,
.sidebar_widget .grid-view_image,
.sidebar .grid-view-item__link,
.sidebar_widget .grid-view-item__link {
  border-radius: 8px;
  overflow: hidden;
}

/* ===== BLOG POST CARDS ===== */
.blog-post-card,
.blog-item,
.article-card,
.post-card,
[class*="blog"][class*="card"],
[class*="article"][class*="card"] {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-post-card:hover,
.blog-item:hover,
.article-card:hover,
.post-card:hover,
[class*="blog"][class*="card"]:hover,
[class*="article"][class*="card"]:hover {
  box-shadow: 0 8px 24px rgba(106, 168, 66, 0.12);
  transform: translateY(-4px);
}

/* ===== BLOG POST IMAGES - COMPREHENSIVE COVERAGE ===== */
/* Featured/Hero images on article pages */
.article-featured-image,
.article_featured-image,
.blog-featured-image,
.blog_featured-image,
.post-featured-image,
.post_featured-image,
.article-hero-image,
.blog-hero-image,
.article-main-image,
.blog-main-image {
  border-radius: 8px;
  overflow: hidden;
  display: block;
}

.article-featured-image img,
.article_featured-image img,
.blog-featured-image img,
.blog_featured-image img,
.post-featured-image img,
.post_featured-image img,
.article-hero-image img,
.blog-hero-image img,
.article-main-image img,
.blog-main-image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

/* Blog post card images */
.blog-post-image,
.blog-image,
.article-image,
.post-image,
.blog-post-card img,
.blog-item img,
.article-card img,
.post-card img {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: auto;
  display: block;
}

/* Inline content images within articles */
.article-content img,
.blog-content img,
.post-content img,
.article-body img,
.blog-body img,
.post-body img,
.rte img,
.article-text img,
.blog-text img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Thumbnail images */
.article-thumbnail,
.blog-thumbnail,
.post-thumbnail,
.article-thumb img,
.blog-thumb img,
.post-thumb img,
.thumbnail img {
  border-radius: 8px;
  overflow: hidden;
}

/* Author images */
.article-author-image,
.blog-author-image,
.post-author-image,
.author-avatar,
.author-image,
.author-photo,
.author-pic img {
  border-radius: 8px;
  overflow: hidden;
}

/* Generic image containers and wrappers */
.image-wrapper,
.img-wrapper,
.image-container,
.img-container,
.article-image-wrapper,
.blog-image-wrapper,
.post-image-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

.image-wrapper img,
.img-wrapper img,
.image-container img,
.img-container img,
.article-image-wrapper img,
.blog-image-wrapper img,
.post-image-wrapper img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

/* Shopify-specific blog image classes */
.article__featured-image,
.article_featured-image,
.article__image,
.article_image,
.blog__image,
.blog_image,
.blog__featured-image,
.blog_featured-image,
.article__author img,
.article_author img,
[class*="article"][class*="image"],
[class*="blog"][class*="image"] {
  border-radius: 8px;
  overflow: hidden;
}

.article__featured-image img,
.article_featured-image img,
.article__image img,
.article_image img,
.blog__image img,
.blog_image img,
.blog__featured-image img,
.blog_featured-image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

/* Picture elements for responsive images */
picture {
  border-radius: 8px;
  overflow: hidden;
  display: block;
}

picture img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

/* Fallback for any remaining image elements on blog pages */
.blog-section img,
.article-section img,
.blog-page img,
.article-page img,
.blog--list-view img,
.blog--grid-view img,
div[class*="blog"] img,
div[class*="article"] img {
  border-radius: 8px;
}

/* Legacy blog section styles */
.blog-section,
.featured-blog,
.blog-posts-section {
  background-color: var(--color-lighter-bg);
}

/* Legacy blog images - updated to match modern 8px radius */
.blog-image,
.post-image,
.blog-item img {
  border-radius: 8px;
  transition: transform var(--transition);
}
.blog-title,
.post-title,
.blog-item h3 {
  color: var(--color-text);
  font-weight: 600;
  font-size: 15px;
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}
.blog-meta,
.post-meta,
.blog-item .meta {
  color: var(--color-primary);
  font-size: 12px;
  margin-bottom: var(--spacing-sm);
}
.blog-excerpt,
.post-excerpt,
.blog-item p {
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--spacing-lg);
}
/* Blog button styles consolidated above */
.blog-section h2,
.featured-blog h2,
.blog-posts-section h2 {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}
.blog-section h3,
.featured-blog h3,
.blog-posts-section h3 {
  color: var(--color-primary);
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 30px;
  line-height: 1.6;
}
/* Blog view-all button styles consolidated above */
@media (max-width: 768px) {
  .blog-item,
  .blog-card,
  .post-card {
    margin-bottom: var(--spacing-lg);
  }
  .blog-title,
  .post-title,
  .blog-item h3 {
    font-size: 14px;
  }
  .blog-excerpt,
  .post-excerpt,
  .blog-item p {
    font-size: 12px;
  }
  .blog-btn,
  .post-btn,
  .blog-item .btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}
/* ========================================
   VIDEO SECTIONS
   ======================================== */
.video-section,
.video-wrapper {
  background-color: transparent;
}
.video-container,
.video-wrapper iframe,
.video-section iframe {
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.video-section .details.wd-50.center,
.video-wrapper .details.wd-50.center {
  border-radius: 0;
  padding: var(--spacing-xl);
  transition: all var(--transition);
}
.content-indent .page-width,
.video-section .page-width {
  background-color: transparent;
}
.player.right-content-area-supported {
  border-radius: var(--radius-card);
}
.video-section h2,
.video-wrapper h2 {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}
/* Video button styles consolidated above */
@media (max-width: 768px) {
  .video-section .details.wd-50.center,
  .video-wrapper .details.wd-50.center {
    padding: var(--spacing-lg);
  }
}
/* ========================================
   HEADER ICONS & ACTIONS
   ======================================== */
.header-icons,
.header-icon-group,
.header-actions,
.site-header-icons {
  display: flex;
  gap: var(--gap-desktop);
  align-items: center;
  padding: 0 var(--spacing-lg);
}

.header-icon,
.header-action-icon,
.icon-link,
.header-search,
.header-account,
.header-wishlist,
.header-cart,
.site-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-desktop);
  height: var(--size-icon-desktop);
  color: var(--color-text);
  font-size: 20px;
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
  border-radius: var(--radius-button);
  position: relative;
  text-decoration: none;
}

.header-icon:hover,
.header-action-icon:hover,
.icon-link:hover,
.header-search:hover,
.header-account:hover,
.header-wishlist:hover,
.header-cart:hover,
.site-header-icon:hover {
  color: var(--color-primary);
  transform: scale(1.05);
}

.header-icon a,
.header-action-icon a,
.icon-link a,
.site-header-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.header-icon svg,
.header-action-icon svg,
.icon-link svg,
.site-header-icon svg {
  width: var(--size-svg-desktop);
  height: var(--size-svg-desktop);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.cart-count,
.cart-badge,
.badge,
.header-cart .badge,
.header-cart-count,
.site-header-icon .badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
  min-width: 20px;
  padding: 0 var(--spacing-xs);
  line-height: 1;
}
.header-cart:hover .cart-count,
.header-cart:hover .cart-badge,
.header-cart:hover .badge,
.site-header-icon:hover .badge {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-hover);
  transform: scale(1.1);
}
.header-icon.active,
.header-action-icon.active,
.icon-link.active,
.site-header-icon.active {
  color: var(--color-primary);
}
.grid-view-item__image,
.article__grid-image {
  border-radius: 8px;
  overflow: hidden;
}
.quote-bg .slick-track .slick-slide {
  border-radius: 8px;
  overflow: hidden;
}
.header-icon:focus,
.header-action-icon:focus,
.icon-link:focus,
.site-header-icon:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Blog page title responsive */
  .page-title,
  h1.page-title {
    font-size: 40px;
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
  }

  .page-title::after,
  h1.page-title::after {
    width: 55px;
    margin: var(--spacing-md) auto 0;
  }

  /* Blog sidebar responsive */
  .blog-right.sidebar,
  .sidebar {
    padding: 0 var(--spacing-md) 0 0;
  }

  .sidebar_widget {
    padding: var(--spacing-lg);
  }

  /* Blog content spacing on tablet */
  .fl1.w_100 {
    margin-left: var(--spacing-lg);
  }

  .fl.f-col.f-row-md > .fl1.w_100 {
    padding-left: var(--spacing-md);
  }

  /* Article cards responsive */
  .article,
  .blog--list-view .article {
    padding: var(--spacing-lg);
  }

  .article h3 a {
    font-size: 22px;
  }

  .article .rte p {
    font-size: 14px;
  }

  /* Single article page responsive */
  .section-header h1,
  .section-header .h2 {
    font-size: 30px;
  }

  .blog--list-view > .rte p {
    font-size: 15px;
  }

  .social-sharing {
    gap: var(--spacing-sm);
  }

  .btn--share {
    padding: 8px 14px;
    font-size: 13px;
  }

  .header-icons,
  .header-icon-group,
  .header-actions,
  .site-header-icons {
    gap: var(--gap-tablet);
  }
  .header-icon,
  .header-action-icon,
  .icon-link,
  .header-search,
  .header-account,
  .header-wishlist,
  .header-cart,
  .site-header-icon {
    width: var(--size-icon-tablet);
    height: var(--size-icon-tablet);
    font-size: 19px;
  }
  .header-icon svg,
  .header-action-icon svg,
  .icon-link svg,
  .site-header-icon svg {
    width: var(--size-svg-tablet);
    height: var(--size-svg-tablet);
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  /* Blog page title responsive */
  .page-title,
  h1.page-title {
    font-size: 32px;
    padding: var(--spacing-lg) 0 var(--spacing-md) 0;
    margin: 0 0 var(--spacing-lg) 0;
  }

  .page-title::after,
  h1.page-title::after {
    width: 50px;
    height: 3px;
    margin: var(--spacing-md) auto 0;
  }

  /* Blog sidebar responsive */
  .blog-right.sidebar,
  .sidebar {
    padding: var(--spacing-lg) 0 0 0;
    margin-top: var(--spacing-xl);
  }

  .sidebar_widget {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .widget-title {
    font-size: 16px;
  }

  .recentPost .grid-view_image a,
  .list-columns .grid-view_image {
    width: 70px;
    height: 70px;
  }

  .recentPost .article-name,
  .list-columns .grid-view-item__title {
    font-size: 13px;
  }

  .blog-category li a {
    font-size: 13px;
  }

  /* Remove blog content spacing on mobile (sidebar stacks below) */
  .fl1.w_100 {
    margin-left: 0;
  }

  .fl.f-col.f-row-md > .fl1.w_100 {
    padding-left: 0;
  }

  /* Article cards responsive */
  .article,
  .blog--list-view .article {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .article h3 a {
    font-size: 20px;
  }

  .article .publish-detail {
    font-size: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .article .publish-detail li {
    margin-right: 0;
  }

  .article .publish-detail li::before {
    content: none;
  }

  .article .rte p {
    font-size: 14px;
    line-height: 1.6;
  }

  .article .btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  /* Single article page mobile responsive */
  .section-header h1,
  .section-header .h2 {
    font-size: 24px;
  }

  .section-header .publish-detail {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .section-header .publish-detail li::before {
    content: none;
  }

  .blog--list-view > .rte p {
    font-size: 15px;
    line-height: 1.7;
  }

  .blog--list-view > .rte blockquote p {
    font-size: 16px;
  }

  .social-sharing {
    gap: var(--spacing-sm);
  }

  .btn--share {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1 1 calc(50% - var(--spacing-sm));
    justify-content: center;
  }

  .share-title {
    display: none;
  }

  .btn--share i {
    font-size: 18px;
  }

  .blog-nav {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .blog-nav .btn--link {
    width: 100%;
    justify-content: center;
  }

  .return-link {
    width: 100%;
    justify-content: center;
  }

  /* Pagination responsive */
  .pagination ul {
    justify-content: center;
    gap: var(--spacing-xs);
  }

  .pagination li a {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-sm);
    font-size: 13px;
  }

  .pagination li.next a i,
  .pagination li.prev a i {
    font-size: 14px;
  }

  /* Breadcrumbs responsive */
  .bredcrumbWrap {
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
  }

  .breadcrumbs {
    font-size: 12px;
    gap: var(--spacing-xs);
  }

  .breadcrumbs span[aria-hidden="true"] {
    margin: 0 2px;
  }

  .header-icons,
  .header-icon-group,
  .header-actions,
  .site-header-icons {
    gap: var(--gap-mobile);
    padding: 0 var(--spacing-sm);
  }
  .header-icon,
  .header-action-icon,
  .icon-link,
  .header-search,
  .header-account,
  .header-wishlist,
  .header-cart,
  .site-header-icon {
    width: var(--size-icon-mobile);
    height: var(--size-icon-mobile);
    font-size: 18px;
  }
  .header-icon svg,
  .header-action-icon svg,
  .icon-link svg,
  .site-header-icon svg {
    width: var(--size-svg-mobile);
    height: var(--size-svg-mobile);
  }
  .cart-count,
  .cart-badge,
  .badge,
  .header-cart .badge,
  .header-cart-count,
  .site-header-icon .badge {
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
}

/* ========================================
   ACCESSIBILITY & MOTION PREFERENCES
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .header-icon,
  .header-action-icon,
  .icon-link,
  .site-header-icon,
  .cart-count,
  .cart-badge,
  .badge,
  .card,
  .quote-item,
  .testimonial-card,
  .feature-item,
  .product-item,
  .blog-item,
  .collection-item {
    transition: none;
  }
  .header-icon:hover,
  .header-action-icon:hover,
  .icon-link:hover,
  .site-header-icon:hover,
  .card:hover,
  .quote-item:hover,
  .testimonial-card:hover,
  .feature-item:hover,
  .product-item:hover,
  .blog-item:hover,
  .collection-item:hover {
    transform: none;
  }
}