/* ============================================
   COMPLETE STYLE.CSS - MODURASPACE v3.0.4
   WITH PROFESSIONAL SEARCH BAR UPDATES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #B76E3E;
    --primary-dark: #9B5A32;
    --primary-light: #E2C2A3;
    --secondary: #2C5F4A;
    --secondary-dark: #1E3D2F;
    --bg-light: #FDFBF7;
    --bg-white: #FFFFFF;
    --bg-gray: #F5F3EF;
    --text-dark: #2C3E2F;
    --text-light: #6B7B6E;
    --text-muted: #8A9A8D;
    --border: #E8E0D5;
    --shadow: 0 8px 24px rgba(0,0,0,0.05);
    --shadow-lg: 0 20px 35px -8px rgba(0,0,0,0.1);
    --shadow-hover: 0 25px 40px -12px rgba(0,0,0,0.15);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --rating-color: #F5A623;
    --rating-bg: #FFF4E0;
    --trend-high: #E74C3C;
    --trend-trending: #F39C12;
    --trend-stable: #27AE60;
    --trend-low: #3498DB;
    --trend-bestseller: #8E44AD;
    --badge-shadow: 0 2px 8px rgba(0,0,0,0.12);
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --logo-gradient-start: #B76E3E;
    --logo-gradient-end: #2C5F4A;
}

[data-theme="dark"] {
    --bg-light: #0f0f1a;
    --bg-white: #1a1a2e;
    --bg-gray: #12121f;
    --text-dark: #e8e8f0;
    --text-light: #a8a8b8;
    --text-muted: #8888a0;
    --border: #2a2a3e;
    --shadow: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 35px -8px rgba(0,0,0,0.5);
    --shadow-hover: 0 25px 40px -12px rgba(0,0,0,0.6);
    --rating-bg: rgba(245, 166, 35, 0.15);
    --badge-shadow: 0 2px 8px rgba(0,0,0,0.4);
    --logo-gradient-start: #D4A574;
    --logo-gradient-end: #4A8A6A;
    --border-light: rgba(255,255,255,0.06);
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.5;
    transition: var(--transition);
}

/* Header */
.main-header {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    padding: 0.9rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

[data-theme="dark"] .main-header {
    background: rgba(26, 26, 46, 0.96);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--primary);
    width: 44px;
    height: 44px;
    border-radius: 40px;
    transition: var(--transition);
}

.sidebar-toggle:hover {
    background: rgba(183,110,62,0.1);
}

.header-actions {
    display: flex;
    gap: 0.5rem;
}

.theme-toggle {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--primary);
    width: 44px;
    height: 44px;
    border-radius: 40px;
    transition: var(--transition);
}

.theme-toggle:hover {
    background: rgba(183,110,62,0.1);
}

.logo-container {
    text-align: center;
}

.site-logo {
    font-size: 1.9rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--logo-gradient-start), var(--logo-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: var(--transition);
    letter-spacing: -0.5px;
}

[data-theme="dark"] .site-logo {
    background: linear-gradient(135deg, #D4A574, #4A8A6A);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(212, 165, 116, 0.15);
}

.tagline {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: var(--text-light);
    transition: var(--transition);
}

[data-theme="dark"] .tagline {
    color: rgba(168, 168, 184, 0.7);
}

/* ============================================
   MODURASPACE - SIDEBAR FLEX LAYOUT OVERRIDES
   ============================================ */

/* Scope to Category Sidebars only to keep Navigation Sidebar strictly untouched */
.right-sidebar,
.subcategory-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Fixed Top Header */
.right-sidebar .sidebar-header,
.subcategory-sidebar .sidebar-header {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    padding: 1.2rem 1.5rem 0.8rem 1.5rem !important;
}

/* Sidebar Top Header */
.sidebar .sidebar-header {
  padding: 12px 16px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--primary, #B76E3E) !important;
    font-family: 'Playfair Display', serif !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Fixed Top Search Container */
.right-sidebar .search-container,
.subcategory-sidebar .search-container {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    padding: 0.8rem 1.25rem !important;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    background: var(--bg-white, #ffffff) !important;
}

/* Scrollable Middle Content Area */
.right-sidebar .categories-nav,
.subcategory-sidebar .categories-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
}

/* Fixed Bottom Control Footers */
.right-sidebar .sidebar-footer,
.subcategory-sidebar .subcategory-back {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    background: var(--bg-white, #ffffff) !important;
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08)) !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Footer Typography & Polish */
.right-sidebar .sidebar-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.right-sidebar .sidebar-footer .footer-brand {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--primary, #B76E3E) !important;
}

.right-sidebar .sidebar-footer .footer-brand span {
    font-size: 0.75rem !important;
    margin-left: 2px !important;
    vertical-align: super !important;
    opacity: 0.85 !important;
}

.subcategory-sidebar .subcategory-back a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    background: var(--bg-light, #f8f9fa) !important;
    color: var(--text-dark, #2c3e50) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08)) !important;
}

.subcategory-sidebar .subcategory-back a:hover {
    background: var(--primary, #B76E3E) !important;
    color: #ffffff !important;
    border-color: var(--primary, #B76E3E) !important;
    box-shadow: 0 4px 10px rgba(183, 110, 62, 0.25) !important;
}

/* Custom Scrollbar Styling */
.right-sidebar .categories-nav::-webkit-scrollbar,
.subcategory-sidebar .categories-nav::-webkit-scrollbar {
    width: 5px;
}

.right-sidebar .categories-nav::-webkit-scrollbar-track,
.subcategory-sidebar .categories-nav::-webkit-scrollbar-track {
    background: transparent;
}

.right-sidebar .categories-nav::-webkit-scrollbar-thumb,
.subcategory-sidebar .categories-nav::-webkit-scrollbar-thumb {
    background: var(--border, rgba(0, 0, 0, 0.15));
    border-radius: 10px;
}

.right-sidebar .categories-nav::-webkit-scrollbar-thumb:hover,
.subcategory-sidebar .categories-nav::-webkit-scrollbar-thumb:hover {
    background: var(--primary, #B76E3E);
}


/* Sidebars */
.sidebar {
    position: fixed;
    top: 0;
    width: 340px;
    height: 100vh;
    background: var(--bg-white);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar.open {
    transform: translateX(0);
}

.left-sidebar {
    left: 0;
}

.right-sidebar {
    right: 0;
    transform: translateX(100%);
}

.right-sidebar.open {
    transform: translateX(0);
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h3 {
    color: var(--primary);
    font-size: 1.3rem;
}

[data-theme="dark"] .sidebar-header h3 {
    color: var(--primary-light);
}

.close-sidebar {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-light);
    transition: var(--transition);
}

.close-sidebar:hover {
    color: var(--primary);
}

.sidebar-nav, .categories-nav {
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-link, .category-link {
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--text-dark);
    border-radius: 14px;
    transition: var(--transition);
    cursor: pointer;
    font-weight: 500;
}

[data-theme="dark"] .nav-link,
[data-theme="dark"] .category-link {
    color: var(--text-dark);
}

.nav-link i, .category-link i {
    width: 24px;
    color: var(--primary);
}

[data-theme="dark"] .nav-link i,
[data-theme="dark"] .category-link i {
    color: var(--primary-light);
}

.nav-link:hover, .category-link:hover {
    background: rgba(183,110,62,0.08);
    transform: translateX(5px);
    color: var(--primary);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .category-link:hover {
    background: rgba(183,110,62,0.15);
    color: var(--primary-light);
}

.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 0.8rem 0;
}

.search-container {
    padding: 1rem 1.2rem;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 0.7rem 2rem 0.7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 40px;
    font-family: inherit;
    background: var(--bg-light);
    color: var(--text-dark);
}

[data-theme="dark"] .search-input {
    background: rgba(255,255,255,0.05);
    border-color: var(--border);
    color: var(--text-dark);
}

[data-theme="dark"] .search-input::placeholder {
    color: var(--text-light);
}

.search-icon {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1050;
    display: none;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    display: block;
}

/* Main content */
.main-content {
    min-height: 70vh;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   HERO BANNER - PROFESSIONAL & RESPONSIVE
   ============================================ */
.hero-banner-wrapper {
    width: 100%;
    margin-bottom: 2.5rem;
    position: relative;
    background: var(--bg-gray);
    overflow: hidden;
    border-radius: 12px;
}

.hero-banner-wrapper .hero-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg-gray);
}

.hero-banner-wrapper .hero-banner img,
.hero-banner-wrapper .hero-banner video {
    width: 100%;
    height: auto;
    display: block;
    background: var(--bg-gray);
}

.hero-banner-wrapper .hero-banner video {
    background: var(--bg-gray);
    width: 100%;
    height: auto;
    display: block;
}

.hero-banner-wrapper .hero-banner img {
    background: var(--bg-gray);
    width: 100%;
    height: auto;
    display: block;
}

.hero-banner-wrapper .hero-banner-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gray);
    z-index: 2;
    overflow: hidden;
}

.hero-banner-wrapper .hero-banner-loading .skeleton-loader {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, 
        var(--bg-gray) 0%, 
        var(--border) 20%, 
        var(--bg-gray) 40%, 
        var(--bg-gray) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.hero-banner-wrapper .hero-banner-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.hero-banner-wrapper .hero-banner img,
.hero-banner-wrapper .hero-banner video {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.hero-banner-wrapper .hero-banner img.loaded,
.hero-banner-wrapper .hero-banner video.loaded {
    opacity: 1;
}

.hero-banner-wrapper .hero-banner video[poster] {
    background-size: cover;
    background-position: center;
}

.hero-banner-wrapper .hero-banner video:not([data-loaded="true"]) {
    opacity: 0;
}

.hero-banner-wrapper .hero-banner video[data-loaded="true"] {
    opacity: 1;
}

.hero-banner-default {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    padding: 2.5rem;
    text-align: center;
    color: white;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-banner-default h2 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
    font-family: 'Cormorant Garamond', serif;
}

.hero-banner-default p {
    font-size: 1rem;
    opacity: 0.95;
}

/* ============================================
   PROFESSIONAL SEARCH BAR STYLES
   ============================================ */

.search-container-wrapper {
    margin: 1.8rem 0 2.5rem;
    padding: 0 0.5rem;
    width: 100%;
}

.search-box-wrapper {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
}

/* ============================================
   PROFESSIONAL SEARCH INPUT GROUP - CLEAN DESIGN
   ============================================ */
.search-input-group {
    display: flex;
    align-items: center;
    background: var(--bg-white);
    border-radius: 60px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.02);
    border: 2px solid var(--border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    padding: 0 4px 0 18px;
}

[data-theme="dark"] .search-input-group {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

/* HOVER EFFECT - Professional subtle glow */
.search-input-group:hover {
    border-color: rgba(183, 110, 62, 0.35);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .search-input-group:hover {
    border-color: rgba(212, 165, 116, 0.3);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* FOCUS STATE - Professional glow border */
.search-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(183, 110, 62, 0.12), 0 4px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

[data-theme="dark"] .search-input-group:focus-within {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 4px rgba(183, 110, 62, 0.18), 0 4px 28px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

/* SEARCH ICON - Clean, professional, no background */
.search-icon-left {
    color: var(--text-muted);
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: color 0.3s ease;
    opacity: 0.6;
}

.search-input-group:focus-within .search-icon-left {
    color: var(--primary);
    opacity: 1;
}

[data-theme="dark"] .search-input-group:focus-within .search-icon-left {
    color: var(--primary-light);
}

/* SEARCH INPUT FIELD */
.search-input-field {
    flex: 1;
    border: none;
    padding: 0.85rem 0.8rem;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    background: transparent;
    color: var(--text-dark);
    outline: none;
    min-width: 0;
    letter-spacing: 0.2px;
}

[data-theme="dark"] .search-input-field {
    color: var(--text-dark);
}

.search-input-field::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.search-input-field:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--bg-white) inset !important;
    -webkit-text-fill-color: var(--text-dark) !important;
}

[data-theme="dark"] .search-input-field:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--bg-white) inset !important;
}

/* CLEAR BUTTON */
.search-clear-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem;
    font-size: 0.85rem;
    transition: all 0.25s ease;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-right: 2px;
}

.search-clear-btn:hover {
    color: var(--primary);
    background: rgba(183, 110, 62, 0.08);
}

[data-theme="dark"] .search-clear-btn:hover {
    color: var(--primary-light);
    background: rgba(183, 110, 62, 0.15);
}

/* SEARCH SUBMIT BUTTON - Clean icon, no background */
.search-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    min-width: 44px;
    opacity: 0.5;
}

.search-submit-btn:hover {
    color: var(--primary);
    opacity: 1;
    transform: scale(1.05);
}

[data-theme="dark"] .search-submit-btn:hover {
    color: var(--primary-light);
}

.search-input-group:focus-within .search-submit-btn {
    color: var(--primary);
    opacity: 1;
}

[data-theme="dark"] .search-input-group:focus-within .search-submit-btn {
    color: var(--primary-light);
}

/* LOADING INDICATOR */
.search-loading-indicator {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    flex-shrink: 0;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

[data-theme="dark"] .spinner-small {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-light);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* SEARCH HINT */
.search-hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.3rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 0.3rem;
}

[data-theme="dark"] .search-hint {
    color: var(--text-muted);
}

.search-hint span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.search-hint i {
    font-size: 0.65rem;
    opacity: 0.5;
}

.search-results-count {
    font-weight: 500;
    color: var(--primary);
    font-size: 0.78rem;
}

[data-theme="dark"] .search-results-count {
    color: var(--primary-light);
}

/* SEARCH SUGGESTIONS DROPDOWN */
.search-suggestions {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border);
    max-height: 380px;
    overflow-y: auto;
    z-index: 100;
    animation: searchFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.4rem 0;
}

[data-theme="dark"] .search-suggestions {
    background: var(--bg-white);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

@keyframes searchFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-suggestions::-webkit-scrollbar {
    width: 5px;
}

.search-suggestions::-webkit-scrollbar-track {
    background: transparent;
}

.search-suggestions::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

[data-theme="dark"] .search-suggestions::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .suggestion-item {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: rgba(183, 110, 62, 0.05);
}

[data-theme="dark"] .suggestion-item:hover {
    background: rgba(183, 110, 62, 0.08);
}

.suggestion-item i {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    opacity: 0.4;
}

.suggestion-content {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    font-size: 0.88rem;
    color: var(--text-dark);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .suggestion-title {
    color: var(--text-dark);
}

.suggestion-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.05rem;
    opacity: 0.7;
}

[data-theme="dark"] .suggestion-desc {
    color: var(--text-muted);
}

.suggestion-item .search-highlight {
    background: rgba(183, 110, 62, 0.15);
    color: var(--primary);
    padding: 0 0.1rem;
    border-radius: 3px;
}

[data-theme="dark"] .suggestion-item .search-highlight {
    background: rgba(183, 110, 62, 0.25);
    color: var(--primary-light);
}

.suggestion-item.no-results {
    cursor: default;
    justify-content: center;
    padding: 1.2rem;
    color: var(--text-muted);
}

.suggestion-item.no-results:hover {
    background: transparent;
}

.suggestion-item.no-results strong {
    color: var(--text-dark);
}

[data-theme="dark"] .suggestion-item.no-results strong {
    color: var(--text-dark);
}

.suggestion-more {
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .suggestion-more {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
}

.suggestion-more:hover {
    background: rgba(183, 110, 62, 0.03) !important;
}

/* RESPONSIVE - SEARCH BAR */
@media (max-width: 768px) {
    .search-container-wrapper {
        margin: 1.2rem 0 1.8rem;
    }
    
    .search-input-group {
        border-radius: 50px;
        padding: 0 4px 0 14px;
    }
    
    .search-input-field {
        padding: 0.7rem 0.6rem;
        font-size: 0.92rem;
    }
    
    .search-icon-left {
        font-size: 0.95rem;
    }
    
    .search-submit-btn {
        font-size: 0.95rem;
        padding: 0.4rem 0.8rem 0.4rem 0.4rem;
        min-width: 38px;
    }
    
    .search-hint {
        font-size: 0.7rem;
        padding: 0.4rem 0.2rem 0;
    }
    
    .search-suggestions {
        border-radius: 16px;
        max-height: 300px;
        top: calc(100% + 8px);
    }
    
    .suggestion-item {
        padding: 0.6rem 1rem;
    }
    
    .suggestion-title {
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .search-container-wrapper {
        margin: 0.8rem 0 1.2rem;
    }
    
    .search-input-group {
        border-radius: 40px;
        padding: 0 3px 0 12px;
        border-width: 1.5px;
    }
    
    .search-input-field {
        padding: 0.6rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .search-icon-left {
        font-size: 0.85rem;
    }
    
    .search-submit-btn {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem 0.3rem 0.3rem;
        min-width: 34px;
    }
    
    .search-input-group:focus-within {
        box-shadow: 0 0 0 3px rgba(183, 110, 62, 0.12), 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    
    [data-theme="dark"] .search-input-group:focus-within {
        box-shadow: 0 0 0 3px rgba(183, 110, 62, 0.15), 0 4px 20px rgba(0, 0, 0, 0.25);
    }
    
    .search-hint {
        font-size: 0.62rem;
        padding: 0.3rem 0.1rem 0;
        gap: 0.2rem;
    }
    
    .search-suggestions {
        border-radius: 14px;
        max-height: 260px;
        top: calc(100% + 6px);
    }
    
    .suggestion-item {
        padding: 0.5rem 0.8rem;
        gap: 0.6rem;
    }
    
    .suggestion-title {
        font-size: 0.78rem;
    }
    
    .suggestion-desc {
        font-size: 0.68rem;
    }
    
    .suggestion-item i {
        font-size: 0.7rem;
    }
}

@media (min-width: 1400px) {
    .search-box-wrapper {
        max-width: 920px;
    }
    
    .search-input-field {
        padding: 1rem 1rem;
        font-size: 1.1rem;
    }
    
    .search-icon-left {
        font-size: 1.15rem;
    }
    
    .search-submit-btn {
        font-size: 1.15rem;
        padding: 0.5rem 1.2rem 0.5rem 0.6rem;
        min-width: 50px;
    }
}

/* HIGH CONTRAST / ACCESSIBILITY */
@media (prefers-contrast: high) {
    .search-input-group {
        border-width: 2.5px;
    }
    
    .search-input-group:focus-within {
        border-color: var(--text-dark);
        box-shadow: 0 0 0 3px var(--text-dark);
    }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .search-input-group,
    .search-input-group:focus-within,
    .search-submit-btn,
    .search-clear-btn,
    .search-icon-left {
        transition: none !important;
        transform: none !important;
    }
    
    .search-suggestions {
        animation: none !important;
    }
}

/* PRINT STYLES */
@media print {
    .search-container-wrapper {
        display: none !important;
    }
}

/* ============================================
   HERO BANNER - DESKTOP (min-width 769px)
   ============================================ */
@media (min-width: 769px) {
    .hero-banner-wrapper .hero-banner {
        min-height: 280px;
        max-height: 600px;
    }
    
    .hero-banner-wrapper .hero-banner img,
    .hero-banner-wrapper .hero-banner video {
        min-height: 280px;
        max-height: 600px;
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
}

/* ============================================
   HERO BANNER - TABLET & MOBILE (max-width 768px)
   ============================================ */
@media (max-width: 768px) {
    .hero-banner-wrapper .hero-banner {
        min-height: auto;
        max-height: none;
        height: auto;
    }
    
    .hero-banner-wrapper .hero-banner img,
    .hero-banner-wrapper .hero-banner video {
        min-height: auto;
        max-height: none;
        height: auto;
        width: 100%;
        object-fit: contain;
        position: relative;
    }
    
    .hero-banner-default h2 {
        font-size: 1.4rem;
    }
    .hero-banner-default p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .hero-banner-wrapper {
        margin-bottom: 1.5rem;
        border-radius: 8px;
    }
    
    .hero-banner-wrapper .hero-banner {
        min-height: auto;
        max-height: none;
    }
    
    .hero-banner-wrapper .hero-banner img,
    .hero-banner-wrapper .hero-banner video {
        min-height: auto;
        max-height: none;
        height: auto;
        width: 100%;
        object-fit: contain;
    }
    
    .hero-banner-default {
        padding: 1.8rem 1rem;
        margin-bottom: 1.5rem;
        min-height: 150px;
    }
    
    .hero-banner-default h2 {
        font-size: 1.2rem;
    }
    .hero-banner-default p {
        font-size: 0.8rem;
    }
}

/* ============================================
   HERO BANNER - LARGE DESKTOP (min-width 1400px)
   ============================================ */
@media (min-width: 1400px) {
    .hero-banner-wrapper .hero-banner {
        max-height: 650px;
        min-height: 280px;
    }
    
    .hero-banner-wrapper .hero-banner img,
    .hero-banner-wrapper .hero-banner video {
        max-height: 650px;
        min-height: 280px;
        object-fit: cover;
        height: 100%;
    }
}

/* Home page grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.product-card {
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

[data-theme="dark"] .product-card {
    background: var(--bg-white);
    border: 1px solid rgba(255,255,255,0.04);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.product-image-wrapper {
    position: relative;
    overflow: hidden;
}

.product-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.product-info {
    padding: 1rem 1rem 1.2rem;
}

.product-title {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: 'Cormorant Garamond', serif;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-dark);
    line-height: 1.4;
}

[data-theme="dark"] .product-title {
    color: var(--text-dark);
}

.price-bubble {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: var(--primary);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 10px rgba(183, 110, 62, 0.3);
}

[data-theme="dark"] .price-bubble {
    box-shadow: 0 2px 10px rgba(183, 110, 62, 0.4);
}

/* ============================================
   ⭐ PROFESSIONAL RATING STYLES - PRODUCT CARD
   ============================================ */
.product-card .stars-container {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0.5rem 0 0.3rem;
}

.product-card .stars-container .star-filled,
.product-card .stars-container .star-half {
    color: var(--rating-color);
    font-size: 0.78rem;
    filter: drop-shadow(0 1px 3px rgba(245, 166, 35, 0.35));
}

.product-card .stars-container .star-empty {
    color: var(--border);
    font-size: 0.78rem;
}

[data-theme="dark"] .product-card .stars-container .star-empty {
    color: rgba(255,255,255,0.15);
}

.product-card .stars-container .rating-value {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-left: 0.4rem;
    letter-spacing: 0.2px;
    background: linear-gradient(135deg, var(--rating-bg), #FFE3AF);
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    border: 1px solid rgba(245, 166, 35, 0.3);
    box-shadow: 0 2px 6px rgba(245, 166, 35, 0.18);
}

[data-theme="dark"] .product-card .stars-container .rating-value {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(245, 166, 35, 0.08));
    color: #F5C842;
    border: 1px solid rgba(245, 166, 35, 0.25);
}

/* ============================================
   🏷️ PROFESSIONAL TREND BADGE - PRODUCT CARD
   ============================================ */
.product-card .trend-badge {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    padding: 0.45rem 1rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 50px;
    color: #fff;
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 0 0 1px rgba(255,255,255,0.15);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transform: translateY(0) scale(1);
}

.product-card .trend-badge i {
    font-size: 0.6rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.product-card:hover .trend-badge {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 
        0 8px 24px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 0 2px rgba(255,255,255,0.2);
}

.product-card .trend-high {
    background: linear-gradient(145deg, #E8594E, #C62828);
    box-shadow: 0 4px 16px rgba(198, 40, 40, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.product-card .trend-trending {
    background: linear-gradient(145deg, #FFB648, #E67E22);
    box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    animation: pulse-trending 2.5s ease-in-out infinite;
}

@keyframes pulse-trending {
    0%, 100% { 
        box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 6px 28px rgba(230, 126, 34, 0.5), inset 0 1px 0 rgba(255,255,255,0.35);
        transform: scale(1.02);
    }
}

.product-card .trend-stable {
    background: linear-gradient(145deg, #2ECC71, #1E8449);
    box-shadow: 0 4px 16px rgba(30, 132, 73, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.product-card .trend-low {
    background: linear-gradient(145deg, #5DADE2, #2E86C1);
    box-shadow: 0 4px 16px rgba(46, 134, 193, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.product-card .trend-bestseller {
    background: linear-gradient(145deg, #BB6BD9, #7B2FBE);
    box-shadow: 0 4px 16px rgba(123, 47, 190, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    animation: shimmer-bestseller 3.5s ease-in-out infinite;
}

@keyframes shimmer-bestseller {
    0%, 100% { 
        background: linear-gradient(145deg, #BB6BD9, #7B2FBE);
        box-shadow: 0 4px 16px rgba(123, 47, 190, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    }
    50% { 
        background: linear-gradient(145deg, #CE93D8, #8E24AA);
        box-shadow: 0 6px 28px rgba(123, 47, 190, 0.5), inset 0 1px 0 rgba(255,255,255,0.35);
    }
}

[data-theme="dark"] .product-card .trend-badge {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 
        0 4px 16px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 0 1px rgba(255,255,255,0.05);
}

[data-theme="dark"] .product-card:hover .trend-badge {
    box-shadow: 
        0 8px 28px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 0 0 2px rgba(255,255,255,0.08);
}

/* ============================================
   🏪 PROFESSIONAL AFFILIATE PROGRAM - PRODUCT CARD
   ============================================ */
.product-card .product-affiliate {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--secondary-dark);
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(44, 95, 74, 0.1), rgba(44, 95, 74, 0.04));
    padding: 0.3rem 0.9rem 0.3rem 0.4rem;
    border-radius: 50px;
    border: 1px solid rgba(44, 95, 74, 0.2);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(44, 95, 74, 0.05);
}

[data-theme="dark"] .product-card .product-affiliate {
    color: #8AB8A0;
    background: linear-gradient(135deg, rgba(44, 95, 74, 0.2), rgba(44, 95, 74, 0.06));
    border: 1px solid rgba(44, 95, 74, 0.3);
}

.product-card .product-affiliate i {
    font-size: 0.65rem;
    color: #fff;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(44, 95, 74, 0.4);
    transition: all 0.3s ease;
}

[data-theme="dark"] .product-card .product-affiliate i {
    background: linear-gradient(135deg, #4A8A6A, #2C5F4A);
    box-shadow: 0 2px 8px rgba(44, 95, 74, 0.3);
}

.product-card:hover .product-affiliate {
    border-color: var(--secondary);
    background: linear-gradient(135deg, rgba(44, 95, 74, 0.18), rgba(44, 95, 74, 0.06));
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 14px rgba(44, 95, 74, 0.15);
}

.product-card:hover .product-affiliate i {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(44, 95, 74, 0.5);
}

/* ============================================
   ⭐ PROFESSIONAL RATING STYLES - BLOG PRODUCT
   ============================================ */
.blog-product-rating {
    margin: 0.6rem 0 0.35rem;
    display: inline-flex;
}

.blog-product-rating .stars-container {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background: var(--bg-white);
    padding: 0.35rem 0.8rem 0.35rem 0.6rem;
    border-radius: 50px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

[data-theme="dark"] .blog-product-rating .stars-container {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.blog-product-rating .stars-container:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-color: rgba(245, 166, 35, 0.3);
}

[data-theme="dark"] .blog-product-rating .stars-container:hover {
    border-color: rgba(245, 166, 35, 0.4);
}

.blog-product-rating .star-filled,
.blog-product-rating .star-half {
    color: var(--rating-color);
    font-size: 0.95rem;
    filter: drop-shadow(0 1px 3px rgba(245, 166, 35, 0.35));
}

.blog-product-rating .star-empty {
    color: var(--border);
    font-size: 0.95rem;
}

[data-theme="dark"] .blog-product-rating .star-empty {
    color: rgba(255,255,255,0.12);
}

.blog-product-rating .rating-value {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-left: 0.45rem;
    letter-spacing: 0.2px;
    background: linear-gradient(135deg, var(--rating-bg), #FFE3AF);
    padding: 0.15rem 0.65rem;
    border-radius: 20px;
    border: 1px solid rgba(245, 166, 35, 0.3);
}

[data-theme="dark"] .blog-product-rating .rating-value {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(245, 166, 35, 0.08));
    color: #F5C842;
    border: 1px solid rgba(245, 166, 35, 0.25);
}

/* ============================================
   🏷️ PROFESSIONAL TREND BADGE - BLOG PRODUCT
   ============================================ */
.blog-product-trend {
    margin: 0.5rem 0 0.3rem;
}

.blog-product-trend .trend-badge {
    padding: 0.45rem 1.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 50px;
    color: #fff;
    box-shadow: 
        0 4px 16px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 0 0 1px rgba(255,255,255,0.12);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.blog-product-trend .trend-badge i {
    font-size: 0.65rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.blog-product-trend .trend-badge:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 28px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 0 2px rgba(255,255,255,0.15);
}

.blog-product-trend .trend-high {
    background: linear-gradient(145deg, #E8594E, #C62828);
    box-shadow: 0 4px 16px rgba(198, 40, 40, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.blog-product-trend .trend-trending {
    background: linear-gradient(145deg, #FFB648, #E67E22);
    box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    animation: pulse-trending 2.5s ease-in-out infinite;
}

.blog-product-trend .trend-stable {
    background: linear-gradient(145deg, #2ECC71, #1E8449);
    box-shadow: 0 4px 16px rgba(30, 132, 73, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.blog-product-trend .trend-low {
    background: linear-gradient(145deg, #5DADE2, #2E86C1);
    box-shadow: 0 4px 16px rgba(46, 134, 193, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.blog-product-trend .trend-bestseller {
    background: linear-gradient(145deg, #BB6BD9, #7B2FBE);
    box-shadow: 0 4px 16px rgba(123, 47, 190, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    animation: shimmer-bestseller 3.5s ease-in-out infinite;
}

[data-theme="dark"] .blog-product-trend .trend-badge {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 
        0 4px 16px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 0 1px rgba(255,255,255,0.05);
}

[data-theme="dark"] .blog-product-trend .trend-badge:hover {
    box-shadow: 
        0 8px 28px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 0 0 2px rgba(255,255,255,0.08);
}

/* ============================================
   🏪 PROFESSIONAL AFFILIATE PROGRAM - BLOG PRODUCT
   ============================================ */
.blog-product-affiliate {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--secondary-dark);
    margin: 0.6rem 0 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: linear-gradient(135deg, rgba(44, 95, 74, 0.1), rgba(44, 95, 74, 0.04));
    padding: 0.35rem 1rem 0.35rem 0.45rem;
    border-radius: 50px;
    border: 1px solid rgba(44, 95, 74, 0.2);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(44, 95, 74, 0.05);
}

[data-theme="dark"] .blog-product-affiliate {
    color: #8AB8A0;
    background: linear-gradient(135deg, rgba(44, 95, 74, 0.2), rgba(44, 95, 74, 0.06));
    border: 1px solid rgba(44, 95, 74, 0.3);
}

.blog-product-affiliate i {
    font-size: 0.75rem;
    color: #fff;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(44, 95, 74, 0.4);
    transition: all 0.3s ease;
}

[data-theme="dark"] .blog-product-affiliate i {
    background: linear-gradient(135deg, #4A8A6A, #2C5F4A);
    box-shadow: 0 2px 8px rgba(44, 95, 74, 0.3);
}

.blog-product-affiliate:hover {
    border-color: var(--secondary);
    background: linear-gradient(135deg, rgba(44, 95, 74, 0.18), rgba(44, 95, 74, 0.06));
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 16px rgba(44, 95, 74, 0.15);
}

.blog-product-affiliate:hover i {
    transform: scale(1.12);
    box-shadow: 0 3px 12px rgba(44, 95, 74, 0.5);
}

/* ============================================
   QUILL RICH TEXT DESCRIPTION STYLES
   ============================================ */
.blog-product-description {
    line-height: 1.7;
    color: var(--text-dark);
    font-size: 0.95rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

[data-theme="dark"] .blog-product-description {
    color: #e8e8f0;
}

.blog-product-description p {
    margin-bottom: 0.8rem;
    line-height: 1.7;
    color: var(--text-dark);
}

[data-theme="dark"] .blog-product-description p {
    color: #e8e8f0;
}

.blog-product-description ul,
.blog-product-description ol {
    padding-left: 1.8rem;
    margin: 0.8rem 0 0.8rem 0;
    line-height: 1.7;
    color: var(--text-dark);
}

[data-theme="dark"] .blog-product-description ul,
[data-theme="dark"] .blog-product-description ol {
    color: #e8e8f0;
}

.blog-product-description li {
    margin-bottom: 0.3rem;
    line-height: 1.7;
    color: var(--text-dark);
}

[data-theme="dark"] .blog-product-description li {
    color: #e8e8f0;
}

.blog-product-description strong,
.blog-product-description b {
    font-weight: 700;
    color: var(--text-dark);
}

[data-theme="dark"] .blog-product-description strong,
[data-theme="dark"] .blog-product-description b {
    color: #e8e8f0;
}

.blog-product-description em,
.blog-product-description i {
    font-style: italic;
    color: var(--text-dark);
}

[data-theme="dark"] .blog-product-description em,
[data-theme="dark"] .blog-product-description i {
    color: #e8e8f0;
}

.blog-product-description u {
    text-decoration: underline;
    color: var(--text-dark);
}

[data-theme="dark"] .blog-product-description u {
    color: #e8e8f0;
}

.blog-product-description h1,
.blog-product-description h2,
.blog-product-description h3,
.blog-product-description h4,
.blog-product-description h5,
.blog-product-description h6 {
    font-family: 'Cormorant Garamond', serif;
    margin: 1.2rem 0 0.6rem 0;
    line-height: 1.3;
    color: var(--secondary);
}

[data-theme="dark"] .blog-product-description h1,
[data-theme="dark"] .blog-product-description h2,
[data-theme="dark"] .blog-product-description h3,
[data-theme="dark"] .blog-product-description h4,
[data-theme="dark"] .blog-product-description h5,
[data-theme="dark"] .blog-product-description h6 {
    color: #8AB8A0;
}

.blog-product-description h1 { font-size: 2rem; }
.blog-product-description h2 { font-size: 1.6rem; }
.blog-product-description h3 { font-size: 1.3rem; }
.blog-product-description h4 { font-size: 1.1rem; }
.blog-product-description h5 { font-size: 1rem; }
.blog-product-description h6 { font-size: 0.9rem; }

.blog-product-description a {
    color: var(--primary);
    text-decoration: underline;
    transition: var(--transition);
}

[data-theme="dark"] .blog-product-description a {
    color: var(--primary-light);
}

.blog-product-description a:hover {
    color: var(--primary-dark);
}

[data-theme="dark"] .blog-product-description a:hover {
    color: #D4A574;
}

.blog-product-description blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.8rem 1.2rem;
    margin: 0.8rem 0;
    background: var(--bg-gray);
    border-radius: 0 8px 8px 0;
    color: var(--text-dark);
    font-style: italic;
}

[data-theme="dark"] .blog-product-description blockquote {
    background: rgba(255,255,255,0.05);
    border-left-color: var(--primary-light);
    color: #e8e8f0;
}

.blog-product-description blockquote p {
    margin-bottom: 0;
    color: var(--text-dark);
}

[data-theme="dark"] .blog-product-description blockquote p {
    color: #e8e8f0;
}

.blog-product-description img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-gray);
}

[data-theme="dark"] .blog-product-description img {
    background: rgba(255,255,255,0.03);
}

.blog-product-description img.ql-image,
.blog-product-description img[style*="float"] {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-gray);
}

[data-theme="dark"] .blog-product-description img.ql-image,
[data-theme="dark"] .blog-product-description img[style*="float"] {
    background: rgba(255,255,255,0.03);
}

.blog-product-description img[style*="float: left"],
.blog-product-description img[style*="float:right"] {
    max-width: 50%;
    margin: 0.5rem 1rem 0.5rem 0;
    display: inline-block;
}

.blog-product-description img[style*="float:right"] {
    margin: 0.5rem 0 0.5rem 1rem;
}

.blog-product-description img[style*="width: 100%"],
.blog-product-description img[style*="width:100%"] {
    width: 100% !important;
    max-width: 100%;
}

.blog-product-description .ql-align-center {
    text-align: center;
}

.blog-product-description .ql-align-right {
    text-align: right;
}

.blog-product-description .ql-align-justify {
    text-align: justify;
}

.blog-product-description .ql-indent-1 { padding-left: 2rem; }
.blog-product-description .ql-indent-2 { padding-left: 4rem; }
.blog-product-description .ql-indent-3 { padding-left: 6rem; }
.blog-product-description .ql-indent-4 { padding-left: 8rem; }
.blog-product-description .ql-indent-5 { padding-left: 10rem; }
.blog-product-description .ql-indent-6 { padding-left: 12rem; }
.blog-product-description .ql-indent-7 { padding-left: 14rem; }
.blog-product-description .ql-indent-8 { padding-left: 16rem; }

.blog-product-description .ql-font-serif { font-family: Georgia, serif; }
.blog-product-description .ql-font-monospace { font-family: monospace; }

.blog-product-description .ql-size-small { font-size: 0.75rem; }
.blog-product-description .ql-size-large { font-size: 1.25rem; }
.blog-product-description .ql-size-huge { font-size: 1.75rem; }

[data-theme="dark"] .blog-product-description {
    color: #e8e8f0;
}

[data-theme="dark"] .blog-product-description * {
    color: #e8e8f0;
}

[data-theme="dark"] .blog-product-description h1,
[data-theme="dark"] .blog-product-description h2,
[data-theme="dark"] .blog-product-description h3,
[data-theme="dark"] .blog-product-description h4,
[data-theme="dark"] .blog-product-description h5,
[data-theme="dark"] .blog-product-description h6 {
    color: #8AB8A0;
}

[data-theme="dark"] .blog-product-description a {
    color: var(--primary-light);
}

[data-theme="dark"] .blog-product-description blockquote {
    background: rgba(255,255,255,0.05);
    border-left-color: var(--primary-light);
    color: #e8e8f0;
}

[data-theme="dark"] .blog-product-description blockquote p {
    color: #e8e8f0;
}

@media (max-width: 768px) {
    .blog-product-description img {
        max-width: 100% !important;
        margin: 1rem auto;
    }
    
    .blog-product-description img[style*="float: left"],
    .blog-product-description img[style*="float:right"] {
        float: none !important;
        max-width: 100% !important;
        margin: 1rem auto;
        display: block;
    }
    
    .blog-product-description h1 { font-size: 1.6rem; }
    .blog-product-description h2 { font-size: 1.3rem; }
    .blog-product-description h3 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .blog-product-description {
        font-size: 0.9rem;
    }
    
    .blog-product-description h1 { font-size: 1.4rem; }
    .blog-product-description h2 { font-size: 1.2rem; }
    .blog-product-description h3 { font-size: 1rem; }
    
    .blog-product-description ul,
    .blog-product-description ol {
        padding-left: 1.2rem;
    }
}

/* ============================================
   CATEGORY DESCRIPTION - QUILL RICH TEXT STYLES
   ============================================ */
.category-description {
    line-height: 1.8;
    color: var(--text-dark);
    font-size: 1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 850px;
    margin: 2rem auto 0;
    text-align: left;
}

[data-theme="dark"] .category-description {
    color: #e8e8f0;
}

.category-description p {
    margin-bottom: 0.8rem;
    line-height: 1.8;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description p {
    color: #e8e8f0;
}

.category-description ul,
.category-description ol {
    padding-left: 1.8rem;
    margin: 0.8rem 0 0.8rem 0;
    line-height: 1.8;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description ul,
[data-theme="dark"] .category-description ol {
    color: #e8e8f0;
}

.category-description li {
    margin-bottom: 0.3rem;
    line-height: 1.8;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description li {
    color: #e8e8f0;
}

.category-description strong,
.category-description b {
    font-weight: 700;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description strong,
[data-theme="dark"] .category-description b {
    color: #e8e8f0;
}

.category-description em,
.category-description i {
    font-style: italic;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description em,
[data-theme="dark"] .category-description i {
    color: #e8e8f0;
}

.category-description u {
    text-decoration: underline;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description u {
    color: #e8e8f0;
}

.category-description h1,
.category-description h2,
.category-description h3,
.category-description h4,
.category-description h5,
.category-description h6 {
    font-family: 'Cormorant Garamond', serif;
    margin: 1.2rem 0 0.6rem 0;
    line-height: 1.3;
    color: var(--secondary);
}

[data-theme="dark"] .category-description h1,
[data-theme="dark"] .category-description h2,
[data-theme="dark"] .category-description h3,
[data-theme="dark"] .category-description h4,
[data-theme="dark"] .category-description h5,
[data-theme="dark"] .category-description h6 {
    color: #8AB8A0;
}

.category-description h1 { font-size: 2rem; }
.category-description h2 { font-size: 1.6rem; }
.category-description h3 { font-size: 1.3rem; }
.category-description h4 { font-size: 1.1rem; }
.category-description h5 { font-size: 1rem; }
.category-description h6 { font-size: 0.9rem; }

.category-description a {
    color: var(--primary);
    text-decoration: underline;
    transition: var(--transition);
}

[data-theme="dark"] .category-description a {
    color: var(--primary-light);
}

.category-description a:hover {
    color: var(--primary-dark);
}

[data-theme="dark"] .category-description a:hover {
    color: #D4A574;
}

.category-description blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.8rem 1.2rem;
    margin: 0.8rem 0;
    background: var(--bg-gray);
    border-radius: 0 8px 8px 0;
    color: var(--text-dark);
    font-style: italic;
}

[data-theme="dark"] .category-description blockquote {
    background: rgba(255,255,255,0.05);
    border-left-color: var(--primary-light);
    color: #e8e8f0;
}

.category-description blockquote p {
    margin-bottom: 0;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description blockquote p {
    color: #e8e8f0;
}

.category-description img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-gray);
}

[data-theme="dark"] .category-description img {
    background: rgba(255,255,255,0.03);
}

.category-description img.ql-image,
.category-description img[style*="float"] {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-gray);
}

[data-theme="dark"] .category-description img.ql-image,
[data-theme="dark"] .category-description img[style*="float"] {
    background: rgba(255,255,255,0.03);
}

.category-description img[style*="float: left"],
.category-description img[style*="float:right"] {
    max-width: 50%;
    margin: 0.5rem 1rem 0.5rem 0;
    display: inline-block;
}

.category-description img[style*="float:right"] {
    margin: 0.5rem 0 0.5rem 1rem;
}

.category-description img[style*="width: 100%"],
.category-description img[style*="width:100%"] {
    width: 100% !important;
    max-width: 100%;
}

.category-description .ql-align-center {
    text-align: center;
}

.category-description .ql-align-right {
    text-align: right;
}

.category-description .ql-align-justify {
    text-align: justify;
}

.category-description .ql-indent-1 { padding-left: 2rem; }
.category-description .ql-indent-2 { padding-left: 4rem; }
.category-description .ql-indent-3 { padding-left: 6rem; }
.category-description .ql-indent-4 { padding-left: 8rem; }
.category-description .ql-indent-5 { padding-left: 10rem; }
.category-description .ql-indent-6 { padding-left: 12rem; }
.category-description .ql-indent-7 { padding-left: 14rem; }
.category-description .ql-indent-8 { padding-left: 16rem; }

.category-description .ql-font-serif { font-family: Georgia, serif; }
.category-description .ql-font-monospace { font-family: monospace; }

.category-description .ql-size-small { font-size: 0.75rem; }
.category-description .ql-size-large { font-size: 1.25rem; }
.category-description .ql-size-huge { font-size: 1.75rem; }

[data-theme="dark"] .category-description {
    color: #e8e8f0;
}

[data-theme="dark"] .category-description * {
    color: #e8e8f0;
}

[data-theme="dark"] .category-description h1,
[data-theme="dark"] .category-description h2,
[data-theme="dark"] .category-description h3,
[data-theme="dark"] .category-description h4,
[data-theme="dark"] .category-description h5,
[data-theme="dark"] .category-description h6 {
    color: #8AB8A0;
}

[data-theme="dark"] .category-description a {
    color: var(--primary-light);
}

[data-theme="dark"] .category-description blockquote {
    background: rgba(255,255,255,0.05);
    border-left-color: var(--primary-light);
    color: #e8e8f0;
}

[data-theme="dark"] .category-description blockquote p {
    color: #e8e8f0;
}

@media (max-width: 768px) {
    .category-description img {
        max-width: 100% !important;
        margin: 1rem auto;
    }
    
    .category-description img[style*="float: left"],
    .category-description img[style*="float:right"] {
        float: none !important;
        max-width: 100% !important;
        margin: 1rem auto;
        display: block;
    }
    
    .category-description h1 { font-size: 1.6rem; }
    .category-description h2 { font-size: 1.3rem; }
    .category-description h3 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .category-description {
        font-size: 0.9rem;
    }
    
    .category-description h1 { font-size: 1.4rem; }
    .category-description h2 { font-size: 1.2rem; }
    .category-description h3 { font-size: 1rem; }
    
    .category-description ul,
    .category-description ol {
        padding-left: 1.2rem;
    }
}

/* ============================================
   SECOND DESCRIPTION (description2Blocks) STYLES
   MATCHES FIRST DESCRIPTION EXACTLY
   ============================================ */

.category-description2-wrapper {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border);
    animation: fadeInUp 0.5s ease;
}

.category-description2 {
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
    padding: 1.5rem 0;
}

/* ===== SAME AS CATEGORY-DESCRIPTION ===== */
.category-description2 {
    line-height: 1.8;
    color: var(--text-dark);
    font-size: 1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
}

[data-theme="dark"] .category-description2 {
    color: #e8e8f0;
}

.category-description2 p {
    margin-bottom: 0.8rem;
    line-height: 1.8;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description2 p {
    color: #e8e8f0;
}

.category-description2 ul,
.category-description2 ol {
    padding-left: 1.8rem;
    margin: 0.8rem 0 0.8rem 0;
    line-height: 1.8;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description2 ul,
[data-theme="dark"] .category-description2 ol {
    color: #e8e8f0;
}

.category-description2 li {
    margin-bottom: 0.3rem;
    line-height: 1.8;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description2 li {
    color: #e8e8f0;
}

.category-description2 strong,
.category-description2 b {
    font-weight: 700;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description2 strong,
[data-theme="dark"] .category-description2 b {
    color: #e8e8f0;
}

.category-description2 em,
.category-description2 i {
    font-style: italic;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description2 em,
[data-theme="dark"] .category-description2 i {
    color: #e8e8f0;
}

.category-description2 u {
    text-decoration: underline;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description2 u {
    color: #e8e8f0;
}

.category-description2 h1,
.category-description2 h2,
.category-description2 h3,
.category-description2 h4,
.category-description2 h5,
.category-description2 h6 {
    font-family: 'Cormorant Garamond', serif;
    margin: 1.2rem 0 0.6rem 0;
    line-height: 1.3;
    color: var(--secondary);
}

[data-theme="dark"] .category-description2 h1,
[data-theme="dark"] .category-description2 h2,
[data-theme="dark"] .category-description2 h3,
[data-theme="dark"] .category-description2 h4,
[data-theme="dark"] .category-description2 h5,
[data-theme="dark"] .category-description2 h6 {
    color: #8AB8A0;
}

.category-description2 h1 { font-size: 2rem; }
.category-description2 h2 { font-size: 1.6rem; }
.category-description2 h3 { font-size: 1.3rem; }
.category-description2 h4 { font-size: 1.1rem; }
.category-description2 h5 { font-size: 1rem; }
.category-description2 h6 { font-size: 0.9rem; }

.category-description2 a {
    color: var(--primary);
    text-decoration: underline;
    transition: var(--transition);
}

[data-theme="dark"] .category-description2 a {
    color: var(--primary-light);
}

.category-description2 a:hover {
    color: var(--primary-dark);
}

[data-theme="dark"] .category-description2 a:hover {
    color: #D4A574;
}

.category-description2 blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.8rem 1.2rem;
    margin: 0.8rem 0;
    background: var(--bg-gray);
    border-radius: 0 8px 8px 0;
    color: var(--text-dark);
    font-style: italic;
}

[data-theme="dark"] .category-description2 blockquote {
    background: rgba(255,255,255,0.05);
    border-left-color: var(--primary-light);
    color: #e8e8f0;
}

.category-description2 blockquote p {
    margin-bottom: 0;
    color: var(--text-dark);
}

[data-theme="dark"] .category-description2 blockquote p {
    color: #e8e8f0;
}

.category-description2 img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-gray);
}

[data-theme="dark"] .category-description2 img {
    background: rgba(255,255,255,0.03);
}

.category-description2 img.ql-image,
.category-description2 img[style*="float"] {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-gray);
}

[data-theme="dark"] .category-description2 img.ql-image,
[data-theme="dark"] .category-description2 img[style*="float"] {
    background: rgba(255,255,255,0.03);
}

.category-description2 img[style*="float: left"],
.category-description2 img[style*="float:right"] {
    max-width: 50%;
    margin: 0.5rem 1rem 0.5rem 0;
    display: inline-block;
}

.category-description2 img[style*="float:right"] {
    margin: 0.5rem 0 0.5rem 1rem;
}

.category-description2 img[style*="width: 100%"],
.category-description2 img[style*="width:100%"] {
    width: 100% !important;
    max-width: 100%;
}

.category-description2 .ql-align-center {
    text-align: center;
}

.category-description2 .ql-align-right {
    text-align: right;
}

.category-description2 .ql-align-justify {
    text-align: justify;
}

.category-description2 .ql-indent-1 { padding-left: 2rem; }
.category-description2 .ql-indent-2 { padding-left: 4rem; }
.category-description2 .ql-indent-3 { padding-left: 6rem; }
.category-description2 .ql-indent-4 { padding-left: 8rem; }
.category-description2 .ql-indent-5 { padding-left: 10rem; }
.category-description2 .ql-indent-6 { padding-left: 12rem; }
.category-description2 .ql-indent-7 { padding-left: 14rem; }
.category-description2 .ql-indent-8 { padding-left: 16rem; }

.category-description2 .ql-font-serif { font-family: Georgia, serif; }
.category-description2 .ql-font-monospace { font-family: monospace; }

.category-description2 .ql-size-small { font-size: 0.75rem; }
.category-description2 .ql-size-large { font-size: 1.25rem; }
.category-description2 .ql-size-huge { font-size: 1.75rem; }

[data-theme="dark"] .category-description2 {
    color: #e8e8f0;
}

[data-theme="dark"] .category-description2 * {
    color: #e8e8f0;
}

[data-theme="dark"] .category-description2 h1,
[data-theme="dark"] .category-description2 h2,
[data-theme="dark"] .category-description2 h3,
[data-theme="dark"] .category-description2 h4,
[data-theme="dark"] .category-description2 h5,
[data-theme="dark"] .category-description2 h6 {
    color: #8AB8A0;
}

[data-theme="dark"] .category-description2 a {
    color: var(--primary-light);
}

[data-theme="dark"] .category-description2 blockquote {
    background: rgba(255,255,255,0.05);
    border-left-color: var(--primary-light);
    color: #e8e8f0;
}

[data-theme="dark"] .category-description2 blockquote p {
    color: #e8e8f0;
}

/* ============================================
   RESPONSIVE - SECOND DESCRIPTION
   ============================================ */

/* ===== Tablets (max-width: 768px) ===== */
@media (max-width: 768px) {
    .category-description2-wrapper {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
    
    .category-description2 {
        padding: 0 1.25rem;
        font-size: 0.95rem;
    }
    
    .category-description2 img {
        max-width: 100% !important;
        margin: 1rem auto;
    }
    
    .category-description2 img[style*="float: left"],
    .category-description2 img[style*="float:right"] {
        float: none !important;
        max-width: 100% !important;
        margin: 1rem auto;
        display: block;
    }
    
    .category-description2 h1 { font-size: 1.6rem; }
    .category-description2 h2 { font-size: 1.3rem; }
    .category-description2 h3 { font-size: 1.1rem; }
}

/* ===== Mobile (max-width: 480px) ===== */
@media (max-width: 480px) {
    .category-description2-wrapper {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top-width: 1.5px;
    }
    
    .category-description2 {
        padding: 0 1rem;
        font-size: 0.9rem;
    }
    
    .category-description2 h1 { font-size: 1.4rem; }
    .category-description2 h2 { font-size: 1.2rem; }
    .category-description2 h3 { font-size: 1rem; }
    
    .category-description2 ul,
    .category-description2 ol {
        padding-left: 1.2rem;
    }
}

/* ===== Large Desktop (min-width: 1400px) ===== */
@media (min-width: 1400px) {
    .category-description2 {
        max-width: 1000px;
        font-size: 1.05rem;
    }
    
    .category-description2 h1 { font-size: 2.2rem; }
    .category-description2 h2 { font-size: 1.8rem; }
    .category-description2 h3 { font-size: 1.4rem; }
}

/* ============================================
   HIGH CONTRAST / ACCESSIBILITY
   ============================================ */
@media (prefers-contrast: high) {
    .category-description2-wrapper {
        border-top-color: var(--text-dark);
        border-top-width: 3px;
    }
    
    .category-description2 blockquote {
        border-left-width: 6px;
    }
    
    .category-description2 a {
        text-decoration: underline !important;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .category-description2-wrapper {
        animation: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .category-description2-wrapper {
        border-top-color: #ccc !important;
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
    }
    
    .category-description2 {
        color: #000 !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    
    .category-description2 a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    .category-description2 blockquote {
        border-left-color: #999 !important;
        background: #f5f5f5 !important;
    }
    
    .category-description2 h1,
    .category-description2 h2,
    .category-description2 h3 {
        color: #000 !important;
    }
}

/* Category Page - Professional Blog Style */
.category-page {
    animation: fadeInUp 0.4s ease;
}

/* ============================================
   CATEGORY HEADER - FLEX LAYOUT FOR DESKTOP
   ============================================ */
.category-header {
    margin-bottom: 2.5rem;
    padding: 0;
    background: none;
    border-radius: 0;
}

.category-header .category-title {
    font-size: 2.8rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-align: center;
}

[data-theme="dark"] .category-header .category-title {
    color: var(--primary-light);
}

@media (max-width: 768px) {
    .category-header .category-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .category-header .category-title {
        font-size: 1.6rem;
    }
}

/* ============================================
   CATEGORY IMAGE & DESCRIPTION - SIDE BY SIDE ON DESKTOP
   ============================================ */

/* Desktop: Image and description side by side */
@media (min-width: 769px) {
    .category-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    
    .category-header .category-title {
        width: 100%;
        text-align: center;
    }
    
    .category-header .category-image-description-wrapper {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 2rem;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .category-header .category-image-wrapper,
    .category-header .category-image-slider {
        flex: 0 0 45%;
        max-width: 45%;
        margin: 0;
        aspect-ratio: 1 / 1;
        border-radius: 16px;
        overflow: hidden;
        background: var(--bg-gray);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .category-header .category-image-wrapper .category-image,
    .category-header .category-image-slider .slider-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 16px;
    }
    
    .category-header .category-image-slider .slider-container {
        width: 100%;
        height: 100%;
    }
    
    .category-header .category-image-slider .slider-track {
        height: 100%;
    }
    
    .category-header .category-image-slider .slider-slide {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-gray);
    }
    
    .category-header .category-image-slider .slider-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 0;
    }
    
    .category-header .category-description {
        flex: 1;
        margin: 0;
        max-width: 100%;
        padding: 0.5rem 0;
        font-size: 1.05rem;
        line-height: 1.9;
        text-align: left;
        align-self: center;
    }
}

/* Mobile: Image on top, description below */
@media (max-width: 768px) {
    .category-header .category-image-description-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }
    
    .category-header .category-image-wrapper,
    .category-header .category-image-slider {
        width: 100%;
        margin: 0 auto 1.5rem auto !important;
        aspect-ratio: 1 / 1 !important;
        min-height: unset !important;
        max-width: 100%;
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-gray);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .category-header .category-image-wrapper .category-image,
    .category-header .category-image-slider .slider-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 12px;
    }
    
    .category-header .category-image-slider .slider-container {
        width: 100%;
        height: 100%;
    }
    
    .category-header .category-image-slider .slider-track {
        height: 100%;
    }
    
    .category-header .category-image-slider .slider-slide {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-gray);
    }
    
    .category-header .category-image-slider .slider-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 0;
    }
    
    .category-header .category-description {
        margin: 0;
        max-width: 100%;
        text-align: left;
        padding: 0 1.25rem;
    }
}

@media (max-width: 480px) {
    .category-header .category-image-wrapper,
    .category-header .category-image-slider {
        border-radius: 10px;
        margin: 0 auto 1rem auto !important;
    }
    
    .category-header .category-image-wrapper .category-image,
    .category-header .category-image-slider .slider-slide img {
        border-radius: 10px;
    }
    
    .category-header .category-description {
        font-size: 0.95rem;
        line-height: 1.7;
        padding: 0 1rem;
    }
}

/* ============================================
   CATEGORY IMAGE SLIDER - OVERRIDES FOR HEADER
   ============================================ */
.category-header .category-image-slider .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
    opacity: 0.6;
}

.category-header .category-image-slider .slider-btn:hover {
    background: var(--primary);
    opacity: 1;
}

[data-theme="dark"] .category-header .category-image-slider .slider-btn:hover {
    background: var(--primary-light);
}

.category-header .category-image-slider .slider-prev {
    left: 10px;
}

.category-header .category-image-slider .slider-next {
    right: 10px;
}

.category-header .category-image-slider .slider-dots {
    display: none !important;
}

/* ============================================
   OLD CATEGORY IMAGE STYLES (KEPT FOR BACKWARD COMPATIBILITY)
   ============================================ */
.category-image-wrapper {
    width: 100%;
    margin: 1.5rem 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bg-gray);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    background: var(--bg-gray);
    object-fit: cover;
}

.category-image-slider {
    position: relative;
    width: 100%;
    margin: 1.5rem 0;
    overflow: hidden;
    background: var(--bg-gray);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .category-image-slider {
    background: rgba(255,255,255,0.03);
}

.category-image-slider .slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.category-image-slider .slider-track {
    display: flex;
    transition: transform 0.4s ease;
}

.category-image-slider .slider-slide {
    flex: 0 0 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gray);
    border-radius: 12px;
}

.category-image-slider .slider-slide img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    background: var(--bg-gray);
    object-fit: cover;
    border-radius: 12px;
}

[data-theme="dark"] .category-image-slider .slider-slide img {
    background: rgba(255,255,255,0.03);
}

.category-image-slider .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.category-image-slider .slider-btn:hover {
    background: var(--primary);
}

[data-theme="dark"] .category-image-slider .slider-btn:hover {
    background: var(--primary-light);
}

.category-image-slider .slider-prev {
    left: 0;
}

.category-image-slider .slider-next {
    right: 0;
}

.category-image-slider .slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1rem;
}

.category-image-slider .slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: all 0.3s;
}

[data-theme="dark"] .category-image-slider .slider-dot {
    background: rgba(255,255,255,0.15);
}

.category-image-slider .slider-dot.active {
    background: var(--primary);
    width: 30px;
    border-radius: 5px;
}

[data-theme="dark"] .category-image-slider .slider-dot.active {
    background: var(--primary-light);
}

/* ============================================
   OLD CATEGORY IMAGES - RESPONSIVE (KEPT FOR BACKWARD COMPATIBILITY)
   ============================================ */
@media (min-width: 769px) {
    .category-image-wrapper {
        max-height: 500px;
        min-height: 280px;
        aspect-ratio: 1 / 1;
        width: 100%;
        margin: 1.5rem 0;
        border-radius: 12px;
    }
    
    .category-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 12px;
        background: var(--bg-gray);
    }
    
    .category-image-slider {
        max-height: 500px;
        min-height: 280px;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
    }
    
    .category-image-slider .slider-slide {
        min-height: 280px;
        max-height: 500px;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-gray);
    }
    
    .category-image-slider .slider-slide img {
        min-height: 280px;
        max-height: 500px;
        object-fit: cover;
        height: 100%;
        width: 100%;
        display: block;
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .category-image-wrapper {
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        width: 100%;
        margin: 1rem 0;
    }
    
    .category-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 12px;
        background: var(--bg-gray);
    }
    
    .category-image-slider {
        max-height: 400px;
        min-height: 150px;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
    }
    
    .category-image-slider .slider-slide {
        min-height: 150px;
        max-height: 400px;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-gray);
    }
    
    .category-image-slider .slider-slide img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        display: block;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .category-image-wrapper {
        aspect-ratio: 1 / 1;
        border-radius: 10px;
        margin: 1rem 0;
    }
    
    .category-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
    
    .category-image-slider {
        max-height: 300px;
        min-height: 120px;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
    }
    
    .category-image-slider .slider-slide {
        min-height: 120px;
        max-height: 300px;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
    }
    
    .category-image-slider .slider-slide img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
}

@media (min-width: 1400px) {
    .category-image-wrapper {
        max-height: 600px;
        min-height: 280px;
        aspect-ratio: 1 / 1;
    }
    
    .category-image {
        max-height: 600px;
        object-fit: cover;
    }
    
    .category-image-slider {
        max-height: 600px;
        min-height: 280px;
        aspect-ratio: 1 / 1;
    }
    
    .category-image-slider .slider-slide {
        min-height: 280px;
        max-height: 600px;
        aspect-ratio: 1 / 1;
    }
    
    .category-image-slider .slider-slide img {
        min-height: 280px;
        max-height: 600px;
        object-fit: cover;
    }
}

.section-heading {
    font-size: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    text-align: center;
    margin: 2.5rem 0 2rem;
    color: var(--secondary);
    letter-spacing: -0.01em;
}

[data-theme="dark"] .section-heading {
    color: #8AB8A0;
}

@media (max-width: 768px) {
    .section-heading {
        font-size: 1.5rem;
    }
}

/* Blog Products List */
.blog-products-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-product-item {
    background: var(--bg-white);
    box-shadow: var(--shadow);
    transition: var(--transition);
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
}

[data-theme="dark"] .blog-product-item {
    background: var(--bg-white);
    border: 1px solid rgba(255,255,255,0.04);
}

.blog-product-item:hover {
    box-shadow: var(--shadow-hover);
}

.blog-product-header {
    display: flex;
    flex-wrap: wrap;
}

.product-image-slider {
    position: relative;
    flex: 0 0 35%;
    max-width: 35%;
    overflow: hidden;
    background: var(--bg-gray);
    border-radius: 12px 0 0 12px;
}

[data-theme="dark"] .product-image-slider {
    background: rgba(255,255,255,0.03);
}

.product-image-slider .slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.product-image-slider .slider-track {
    display: flex;
    transition: transform 0.4s ease;
}

.product-image-slider .slider-slide {
    flex: 0 0 100%;
}

.product-image-slider .slider-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.product-image-slider .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 0;
}

.product-image-slider .slider-btn:hover {
    background: var(--primary);
}

[data-theme="dark"] .product-image-slider .slider-btn:hover {
    background: var(--primary-light);
}

.product-image-slider .slider-prev {
    left: 10px;
}

.product-image-slider .slider-next {
    right: 10px;
}

.product-image-slider .slider-dots {
    display: none !important;
}

.blog-product-image {
    flex: 0 0 35%;
    max-width: 35%;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px 0 0 12px;
}

.blog-product-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.blog-product-image:hover img {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .product-image-slider {
        flex: 0 0 100%;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
    }
    .blog-product-image {
        flex: 0 0 100%;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
    }
}

.blog-product-details {
    flex: 1;
    padding: 1.5rem;
}

.blog-product-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
    font-family: 'Cormorant Garamond', serif;
    line-height: 1.3;
}

[data-theme="dark"] .blog-product-title {
    color: var(--text-dark);
}

.blog-product-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary);
    margin: 1rem 0 0.3rem;
}

[data-theme="dark"] .blog-product-price {
    color: var(--primary-light);
}

.price-note {
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: normal;
    margin-top: 0.2rem;
}

[data-theme="dark"] .price-note {
    color: var(--text-light);
}

/* ============================================
   🛒 PROFESSIONAL AFFILIATE BUY BUTTONS
   ============================================ */
.buy-button {
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 0.95rem;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.buy-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
    border-radius: 50px;
}

.buy-button i {
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}

.buy-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}

.buy-button:hover i {
    transform: scale(1.1) rotate(-5deg);
}

.buy-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.buy-button.amazon {
    background: linear-gradient(145deg, #FF9900, #E87A00);
    box-shadow: 0 4px 16px rgba(255, 153, 0, 0.35);
    color: #111;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

.buy-button.amazon::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 60%);
}

.buy-button.amazon:hover {
    background: linear-gradient(145deg, #FFA726, #F57C00);
    box-shadow: 0 8px 28px rgba(255, 153, 0, 0.45);
}

.buy-button.amazon i {
    color: #111;
}

.buy-button.etsy {
    background: linear-gradient(145deg, #F1641E, #D35400);
    box-shadow: 0 4px 16px rgba(241, 100, 30, 0.35);
}

.buy-button.etsy:hover {
    background: linear-gradient(145deg, #F57C3A, #E65100);
    box-shadow: 0 8px 28px rgba(241, 100, 30, 0.45);
}

.buy-button.wayfair {
    background: linear-gradient(145deg, #7B1FA2, #4A148C);
    box-shadow: 0 4px 16px rgba(123, 31, 162, 0.35);
}

.buy-button.wayfair:hover {
    background: linear-gradient(145deg, #9C27B0, #6A1B9A);
    box-shadow: 0 8px 28px rgba(123, 31, 162, 0.45);
}

.buy-button.walmart {
    background: linear-gradient(145deg, #0071CE, #0058A3);
    box-shadow: 0 4px 16px rgba(0, 113, 206, 0.35);
}

.buy-button.walmart:hover {
    background: linear-gradient(145deg, #1A84E0, #0066B3);
    box-shadow: 0 8px 28px rgba(0, 113, 206, 0.45);
}

.buy-button.target {
    background: linear-gradient(145deg, #CC0000, #A80000);
    box-shadow: 0 4px 16px rgba(204, 0, 0, 0.35);
}

.buy-button.target:hover {
    background: linear-gradient(145deg, #E60000, #B80000);
    box-shadow: 0 8px 28px rgba(204, 0, 0, 0.45);
}

.buy-button.ebay {
    background: linear-gradient(145deg, #E53238, #C41E3A);
    box-shadow: 0 4px 16px rgba(229, 50, 56, 0.35);
}

.buy-button.ebay:hover {
    background: linear-gradient(145deg, #F0444A, #D4283A);
    box-shadow: 0 8px 28px rgba(229, 50, 56, 0.45);
}

.buy-button.bestbuy {
    background: linear-gradient(145deg, #0046BE, #003399);
    box-shadow: 0 4px 16px rgba(0, 70, 190, 0.35);
}

.buy-button.bestbuy:hover {
    background: linear-gradient(145deg, #0055D4, #003DB3);
    box-shadow: 0 8px 28px rgba(0, 70, 190, 0.45);
}

.buy-button.homedepot {
    background: linear-gradient(145deg, #F96302, #D95300);
    box-shadow: 0 4px 16px rgba(249, 99, 2, 0.35);
}

.buy-button.homedepot:hover {
    background: linear-gradient(145deg, #FA7314, #E05A00);
    box-shadow: 0 8px 28px rgba(249, 99, 2, 0.45);
}

.buy-button.lowes {
    background: linear-gradient(145deg, #004B93, #003A73);
    box-shadow: 0 4px 16px rgba(0, 75, 147, 0.35);
}

.buy-button.lowes:hover {
    background: linear-gradient(145deg, #005AA8, #004283);
    box-shadow: 0 8px 28px rgba(0, 75, 147, 0.45);
}

.buy-button.default {
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 16px rgba(183, 110, 62, 0.35);
}

.buy-button.default:hover {
    background: linear-gradient(145deg, var(--primary-light), var(--primary));
    box-shadow: 0 8px 28px rgba(183, 110, 62, 0.45);
}

[data-theme="dark"] .buy-button.amazon {
    box-shadow: 0 4px 16px rgba(255, 153, 0, 0.25);
}
[data-theme="dark"] .buy-button.amazon:hover {
    box-shadow: 0 8px 28px rgba(255, 153, 0, 0.35);
}
[data-theme="dark"] .buy-button.etsy {
    box-shadow: 0 4px 16px rgba(241, 100, 30, 0.25);
}
[data-theme="dark"] .buy-button.etsy:hover {
    box-shadow: 0 8px 28px rgba(241, 100, 30, 0.35);
}
[data-theme="dark"] .buy-button.wayfair {
    box-shadow: 0 4px 16px rgba(123, 31, 162, 0.25);
}
[data-theme="dark"] .buy-button.wayfair:hover {
    box-shadow: 0 8px 28px rgba(123, 31, 162, 0.35);
}
[data-theme="dark"] .buy-button.walmart {
    box-shadow: 0 4px 16px rgba(0, 113, 206, 0.25);
}
[data-theme="dark"] .buy-button.walmart:hover {
    box-shadow: 0 8px 28px rgba(0, 113, 206, 0.35);
}
[data-theme="dark"] .buy-button.target {
    box-shadow: 0 4px 16px rgba(204, 0, 0, 0.25);
}
[data-theme="dark"] .buy-button.target:hover {
    box-shadow: 0 8px 28px rgba(204, 0, 0, 0.35);
}
[data-theme="dark"] .buy-button.ebay {
    box-shadow: 0 4px 16px rgba(229, 50, 56, 0.25);
}
[data-theme="dark"] .buy-button.ebay:hover {
    box-shadow: 0 8px 28px rgba(229, 50, 56, 0.35);
}
[data-theme="dark"] .buy-button.bestbuy {
    box-shadow: 0 4px 16px rgba(0, 70, 190, 0.25);
}
[data-theme="dark"] .buy-button.bestbuy:hover {
    box-shadow: 0 8px 28px rgba(0, 70, 190, 0.35);
}
[data-theme="dark"] .buy-button.homedepot {
    box-shadow: 0 4px 16px rgba(249, 99, 2, 0.25);
}
[data-theme="dark"] .buy-button.homedepot:hover {
    box-shadow: 0 8px 28px rgba(249, 99, 2, 0.35);
}
[data-theme="dark"] .buy-button.lowes {
    box-shadow: 0 4px 16px rgba(0, 75, 147, 0.25);
}
[data-theme="dark"] .buy-button.lowes:hover {
    box-shadow: 0 8px 28px rgba(0, 75, 147, 0.35);
}
[data-theme="dark"] .buy-button.default {
    box-shadow: 0 4px 16px rgba(183, 110, 62, 0.25);
}
[data-theme="dark"] .buy-button.default:hover {
    box-shadow: 0 8px 28px rgba(183, 110, 62, 0.35);
}

/* Category page buy button - simplified, professional */
.category-buy-button {
    margin-top: 1rem;
    padding: 0.7rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    letter-spacing: 0.5px;
    text-transform: none;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: auto;
    min-width: 140px;
    justify-content: center;
}

.category-buy-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: linear-gradient(145deg, var(--primary-light), var(--primary));
}

.category-buy-button i {
    font-size: 0.9rem;
}

/* Modal Gallery */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background: transparent;
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}

.gallery-modal-content {
    background: transparent;
    box-shadow: none;
}

.modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    font-size: 2rem;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.modal-close:hover {
    background: var(--primary);
}

.gallery-container {
    text-align: center;
}

.gallery-main-image {
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
}

.gallery-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.gallery-prev, .gallery-next {
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
    border-radius: 0;
}

.gallery-prev:hover, .gallery-next:hover {
    background: var(--primary);
}

.gallery-thumbnails {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.gallery-thumb.active, .gallery-thumb:hover {
    border-color: var(--primary);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* FAQ Styles */
.faq-item {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .faq-item {
    border-bottom-color: rgba(255,255,255,0.06);
}

.faq-question {
    padding: 1rem 0;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dark);
}

[data-theme="dark"] .faq-question {
    color: var(--text-dark);
}

.faq-question:hover {
    color: var(--primary);
}

[data-theme="dark"] .faq-question:hover {
    color: var(--primary-light);
}

.faq-question i {
    transition: transform 0.3s;
}

.faq-question.active i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0;
    line-height: 1.6;
    color: var(--text-light);
    font-size: 0.9rem;
}

[data-theme="dark"] .faq-answer {
    color: var(--text-light);
}

.faq-answer.active {
    max-height: 400px;
    padding-bottom: 1rem;
}

.faq-categories {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.faq-cat-btn {
    padding: 0.5rem 1.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: 0;
    color: var(--text-dark);
}

[data-theme="dark"] .faq-cat-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-dark);
}

.faq-cat-btn.active, .faq-cat-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[data-theme="dark"] .faq-cat-btn.active,
[data-theme="dark"] .faq-cat-btn:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
    border-color: var(--primary-light);
}

.faq-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.faq-section.active {
    display: block;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 400px;
    width: 100%;
    pointer-events: none;
}

.toast {
    background: var(--secondary);
    color: white;
    padding: 0.8rem 1.2rem;
    animation: slideInRight 0.35s ease forwards;
    box-shadow: var(--shadow-lg);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.9rem;
    border-radius: 12px;
    pointer-events: auto;
    min-height: 50px;
    word-break: break-word;
    line-height: 1.4;
    border: none;
    transition: all 0.3s ease;
}

[data-theme="dark"] .toast {
    background: var(--secondary);
    color: #e8e8f0;
}

.toast i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.toast span {
    flex: 1;
    font-weight: 400;
}

.toast.error {
    background: #c0392b;
}

.toast.success {
    background: #27ae60;
}

.toast.info {
    background: var(--primary);
}

.toast.warning {
    background: #e67e22;
}

[data-theme="dark"] .toast.error {
    background: #c0392b;
}
[data-theme="dark"] .toast.success {
    background: #27ae60;
}
[data-theme="dark"] .toast.info {
    background: var(--primary);
}
[data-theme="dark"] .toast.warning {
    background: #e67e22;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .toast-container {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: 100%;
        width: auto;
    }
    
    .toast {
        font-size: 0.85rem;
        padding: 0.7rem 1rem;
        border-radius: 10px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .toast {
        font-size: 0.8rem;
        padding: 0.6rem 0.8rem;
        border-radius: 8px;
        min-height: 40px;
        gap: 0.5rem;
    }
    
    .toast i {
        font-size: 0.9rem;
    }
}

/* Footer */
.main-footer {
    background: #2C1F14;
    color: #E2DACF;
    padding: 3rem 2rem 1.5rem;
    margin-top: 4rem;
}

[data-theme="dark"] .main-footer {
    background: #1A120E;
}

.footer-content {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.footer-section h4 {
    color: var(--primary-light);
    margin-bottom: 1rem;
    font-size: 1rem;
}

[data-theme="dark"] .footer-section h4 {
    color: var(--primary-light);
}

.footer-section a {
    display: block;
    color: #ccc;
    text-decoration: none;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
}

[data-theme="dark"] .footer-section a {
    color: #b0b0b8;
}

.footer-section a:hover {
    color: var(--primary);
    transform: translateX(4px);
}

[data-theme="dark"] .footer-section a:hover {
    color: var(--primary-light);
}

.footer-section .social-links {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.footer-section .social-links .social-link {
    display: inline-flex;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1rem;
}

[data-theme="dark"] .footer-section .social-links .social-link {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.footer-section .social-links .social-link:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .footer-section .social-links .social-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.newsletter-form input {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    border-radius: 0;
    background: rgba(255,255,255,0.08);
    color: #fff;
}

[data-theme="dark"] .newsletter-form input {
    background: rgba(255,255,255,0.05);
    color: #e8e8f0;
}

.newsletter-form input::placeholder {
    color: rgba(255,255,255,0.5);
}

.newsletter-form button {
    background: var(--primary);
    border: none;
    padding: 0.6rem 1.2rem;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
    border-radius: 0;
}

.newsletter-form button:hover {
    background: var(--primary-dark);
}

[data-theme="dark"] .newsletter-form button:hover {
    background: var(--primary-light);
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.75rem;
}

[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(255,255,255,0.04);
}

.affiliate-disclaimer {
    font-size: 0.65rem;
    margin-top: 0.3rem;
    opacity: 0.8;
}

.footer-unsubscribe {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-unsubscribe .unsubscribe-link {
    color: var(--primary-light);
    text-decoration: underline;
    cursor: pointer;
    transition: var(--transition);
}

.footer-unsubscribe .unsubscribe-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.home-screen-tip {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: var(--transition);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[data-theme="dark"] .home-screen-tip {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
}

.home-screen-tip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .home-screen-tip:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.home-screen-tip .tip-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(183, 110, 62, 0.2);
    border-radius: 6px;
    color: var(--primary-light);
    font-size: 0.8rem;
    transition: var(--transition);
}

[data-theme="dark"] .home-screen-tip .tip-icon {
    background: rgba(183, 110, 62, 0.15);
}

.home-screen-tip:hover .tip-icon {
    background: rgba(183, 110, 62, 0.3);
}

.home-screen-tip .tip-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.home-screen-tip .tip-label {
    font-weight: 600;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.home-screen-tip .tip-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.4rem;
    font-size: 0.65rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.home-screen-tip .tip-platform {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

[data-theme="dark"] .home-screen-tip .tip-platform {
    background: rgba(255, 255, 255, 0.03);
}

.home-screen-tip .tip-platform i {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
}

.home-screen-tip .tip-separator {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.5rem;
    padding: 0 0.1rem;
}

@media (max-width: 768px) {
    .home-screen-tip {
        padding: 0.65rem 0.85rem;
        font-size: 0.65rem;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .home-screen-tip .tip-icon {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .home-screen-tip .tip-label {
        font-size: 0.6rem;
    }

    .home-screen-tip .tip-text {
        font-size: 0.6rem;
        gap: 0.15rem 0.3rem;
    }

    .home-screen-tip .tip-platform {
        font-size: 0.55rem;
        padding: 0.05rem 0.35rem;
    }
}

@media (max-width: 480px) {
    .home-screen-tip {
        padding: 0.5rem 0.7rem;
        border-radius: 8px;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .home-screen-tip .tip-icon {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
        align-self: flex-start;
    }

    .home-screen-tip .tip-text {
        flex-direction: column;
        gap: 0.15rem;
    }

    .home-screen-tip .tip-platform {
        white-space: normal;
        display: inline-block;
        padding: 0.05rem 0.3rem;
    }

    .home-screen-tip .tip-separator {
        display: none;
    }
}

/* Form Styles */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-dark);
}

[data-theme="dark"] .form-group label {
    color: var(--text-dark);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border);
    font-family: inherit;
    background: var(--bg-light);
    color: var(--text-dark);
    transition: all 0.3s;
    font-size: 0.9rem;
    border-radius: 0;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
    background: rgba(255,255,255,0.04);
    border-color: var(--border);
    color: var(--text-dark);
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: var(--text-light);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--primary-light);
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    width: 100%;
    padding-right: 2.5rem;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-light);
    z-index: 2;
}

[data-theme="dark"] .password-toggle {
    color: var(--text-light);
}

.password-toggle:hover {
    color: var(--primary);
}

.btn {
    padding: 0.7rem 1.5rem;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    border-radius: 0;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-primary:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
}

.auth-status-card {
    text-align: center;
    padding: 2rem;
    background: var(--bg-white);
    box-shadow: var(--shadow);
    border-radius: 0;
}

[data-theme="dark"] .auth-status-card {
    background: var(--bg-white);
}

.auth-status-card h2 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
}

[data-theme="dark"] .auth-status-card h2 {
    color: var(--primary-light);
}

.auth-status-card p {
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 0.9rem;
    color: var(--text-dark);
}

[data-theme="dark"] .auth-status-card p {
    color: var(--text-dark);
}

.auth-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .auth-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .auth-buttons .btn {
        width: 100%;
        max-width: 220px;
    }
}

.tab-btn {
    transition: all 0.3s ease;
    background: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    color: var(--text-light);
}

[data-theme="dark"] .tab-btn {
    color: var(--text-light);
}

.tab-btn.active {
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
}

[data-theme="dark"] .tab-btn.active {
    border-bottom-color: var(--primary-light);
    color: var(--primary-light);
}

.product-highlight {
    animation: highlightPulse 0.6s ease-out;
}

@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(183, 110, 62, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(183, 110, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(183, 110, 62, 0); }
}

.loading-spinner {
    text-align: center;
    padding: 3rem;
    color: var(--text-light);
}

[data-theme="dark"] .loading-spinner {
    color: var(--text-light);
}

.spinner {
    width: 45px;
    height: 45px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

[data-theme="dark"] .spinner {
    border-color: rgba(255,255,255,0.1);
    border-top-color: var(--primary-light);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error {
    text-align: center;
    padding: 3rem;
    color: #c0392b;
    font-size: 0.9rem;
}

[data-theme="dark"] .error {
    color: #e74c3c;
}

.no-data {
    text-align: center;
    padding: 3rem;
    color: var(--text-light);
    font-size: 0.9rem;
}

[data-theme="dark"] .no-data {
    color: var(--text-light);
}

.category-count {
    margin-left: auto;
    font-size: 0.7rem;
    background: var(--bg-light);
    padding: 0.2rem 0.5rem;
    color: var(--text-light);
    border-radius: 20px;
}

[data-theme="dark"] .category-count {
    background: rgba(255,255,255,0.05);
    color: var(--text-light);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2.5rem 0;
    flex-wrap: wrap;
}

.page-btn {
    background: var(--bg-white);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-dark);
}

[data-theme="dark"] .page-btn {
    background: var(--bg-white);
    border-color: var(--border);
    color: var(--text-dark);
}

.page-btn.active, .page-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[data-theme="dark"] .page-btn.active,
[data-theme="dark"] .page-btn:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
    border-color: var(--primary-light);
}

/* Responsive */
@media (max-width: 768px) {
    .main-header {
        padding: 0.7rem 1rem;
    }
    
    .main-content {
        padding: 1rem;
    }
    
    .sidebar {
        width: 280px;
    }
    
    .blog-product-header {
        flex-direction: column;
    }
    
    .blog-product-details {
        padding: 1rem;
    }
    
    .blog-product-title {
        font-size: 1.2rem;
    }
    
    .blog-product-price {
        font-size: 1.1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .site-logo {
        font-size: 1.3rem;
    }
    
    .tagline {
        font-size: 0.55rem;
    }
    
    .main-header {
        padding: 0.5rem 0.8rem;
    }
    
    .sidebar {
        width: 260px;
    }
    
    .blog-product-title {
        font-size: 1rem;
    }
    
    .category-title {
        font-size: 1.6rem;
    }
    
    .section-heading {
        font-size: 1.3rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .buy-button {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Focus Styles */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

[data-theme="dark"] a:focus,
[data-theme="dark"] button:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    outline-color: var(--primary-light);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   SUBCATEGORY SIDEBAR (Second Left Sidebar)
   ============================================ */
.subcategory-sidebar {
    left: 0;
    transform: translateX(-100%);
    z-index: 1150;
}

.subcategory-sidebar.open {
    transform: translateX(0);
}

.subcategory-sidebar.open ~ #overlay {
    z-index: 1145;
}

.subcategory-sidebar .sidebar-header h3 {
    color: var(--secondary);
    font-size: 1.1rem;
}

[data-theme="dark"] .subcategory-sidebar .sidebar-header h3 {
    color: #8AB8A0;
}

.subcategory-back {
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

[data-theme="dark"] .subcategory-back {
    border-top-color: rgba(255,255,255,0.06);
}

.subcategory-back a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 0;
    transition: var(--transition);
    cursor: pointer;
}

[data-theme="dark"] .subcategory-back a {
    color: var(--primary-light);
}

.subcategory-back a:hover {
    color: var(--primary-dark);
    transform: translateX(-4px);
}

[data-theme="dark"] .subcategory-back a:hover {
    color: #D4A574;
}

.subcategory-back a i {
    font-size: 0.85rem;
}

.main-category-link {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.8rem 1rem !important;
    border-radius: 14px !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: var(--text-dark) !important;
}

[data-theme="dark"] .main-category-link {
    color: var(--text-dark) !important;
}

.main-category-link:hover {
    background: rgba(183,110,62,0.08) !important;
    transform: translateX(5px) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .main-category-link:hover {
    background: rgba(183,110,62,0.15) !important;
    color: var(--primary-light) !important;
}

.main-category-link i {
    color: var(--primary);
    width: 24px;
    text-align: center;
}

[data-theme="dark"] .main-category-link i {
    color: var(--primary-light);
}

.main-category-link .category-arrow {
    margin-left: auto;
    color: var(--text-light);
    font-size: 0.75rem;
    opacity: 0.6;
    transition: var(--transition);
}

.main-category-link:hover .category-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.subcategory-link {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.7rem 1rem !important;
    border-radius: 14px !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: var(--text-dark) !important;
}

[data-theme="dark"] .subcategory-link {
    color: var(--text-dark) !important;
}

.subcategory-link:hover {
    background: rgba(44, 95, 74, 0.08) !important;
    transform: translateX(5px) !important;
    color: var(--secondary) !important;
}

[data-theme="dark"] .subcategory-link:hover {
    background: rgba(44, 95, 74, 0.15) !important;
    color: #8AB8A0 !important;
}

.subcategory-link i {
    color: var(--secondary);
    width: 24px;
    text-align: center;
}

[data-theme="dark"] .subcategory-link i {
    color: #8AB8A0;
}

.subcategory-link .category-count {
    margin-left: auto;
    font-size: 0.65rem;
    background: var(--bg-light);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    color: var(--text-light);
}

[data-theme="dark"] .subcategory-link .category-count {
    background: rgba(255,255,255,0.05);
    color: var(--text-light);
}

/* ============================================
   CATEGORY BADGES - MULTI-CATEGORY SUPPORT
   FULL RESPONSIVE + DARK MODE
   ============================================ */

/* ===== Base Badge Styles ===== */
.product-category-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.35rem 0 0.25rem;
}

.category-badge {
    font-size: 0.6rem;
    background: var(--bg-gray);
    color: var(--text-light);
    padding: 0.15rem 0.65rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: var(--transition);
    line-height: 1.4;
    display: inline-block;
    white-space: nowrap;
}

.category-badge:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-1px);
}

.category-badge-more {
    font-size: 0.6rem;
    color: var(--text-light);
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    opacity: 0.7;
    display: inline-block;
    line-height: 1.4;
}

/* ===== DARK MODE - Category Badges ===== */
[data-theme="dark"] .category-badge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
}

[data-theme="dark"] .category-badge:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
    border-color: var(--primary-light);
}

[data-theme="dark"] .category-badge-more {
    color: var(--text-light);
}

/* ===== PRODUCT CARD BADGES (Home Page) ===== */
.product-card .product-category-badges {
    margin: 0.2rem 0 0.3rem;
    gap: 0.25rem;
}

.product-card .category-badge {
    font-size: 0.5rem;
    padding: 0.08rem 0.45rem;
    background: var(--bg-gray);
    color: var(--text-light);
    border-color: var(--border);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.product-card .category-badge:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-1px);
}

.product-card .category-badge-more {
    font-size: 0.5rem;
    color: var(--text-light);
    padding: 0.08rem 0.25rem;
    opacity: 0.6;
}

/* ===== DARK MODE - Product Card Badges ===== */
[data-theme="dark"] .product-card .category-badge {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-light);
}

[data-theme="dark"] .product-card .category-badge:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
    border-color: var(--primary-light);
}

[data-theme="dark"] .product-card .category-badge-more {
    color: var(--text-light);
}

/* ===== BLOG PRODUCT DETAILS BADGES (Category Page) ===== */
.blog-product-details .product-category-badges {
    margin: 0.45rem 0 0.35rem;
    gap: 0.4rem;
}

.blog-product-details .category-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.75rem;
    background: var(--bg-light);
    border-color: var(--border);
    font-weight: 600;
    letter-spacing: 0.4px;
}

.blog-product-details .category-badge:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.blog-product-details .category-badge-more {
    font-size: 0.65rem;
    color: var(--text-light);
    padding: 0.2rem 0.4rem;
    opacity: 0.7;
}

/* ===== DARK MODE - Blog Product Badges ===== */
[data-theme="dark"] .blog-product-details .category-badge {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
}

[data-theme="dark"] .blog-product-details .category-badge:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
    border-color: var(--primary-light);
    box-shadow: 0 4px 16px rgba(183, 110, 62, 0.2);
}

[data-theme="dark"] .blog-product-details .category-badge-more {
    color: var(--text-light);
}

/* ============================================
   RESPONSIVE - Category Badges
   ============================================ */

/* ===== Tablets (max-width: 768px) ===== */
@media (max-width: 768px) {
    .product-category-badges {
        gap: 0.3rem;
        margin: 0.3rem 0 0.2rem;
    }

    .category-badge {
        font-size: 0.55rem;
        padding: 0.12rem 0.5rem;
        letter-spacing: 0.2px;
    }

    .category-badge-more {
        font-size: 0.55rem;
        padding: 0.12rem 0.3rem;
    }

    /* Product Card - Tablet */
    .product-card .product-category-badges {
        gap: 0.2rem;
        margin: 0.15rem 0 0.25rem;
    }

    .product-card .category-badge {
        font-size: 0.45rem;
        padding: 0.06rem 0.35rem;
        letter-spacing: 0.2px;
    }

    .product-card .category-badge-more {
        font-size: 0.45rem;
        padding: 0.06rem 0.2rem;
    }

    /* Blog Product - Tablet */
    .blog-product-details .product-category-badges {
        gap: 0.3rem;
        margin: 0.35rem 0 0.3rem;
    }

    .blog-product-details .category-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.6rem;
        letter-spacing: 0.3px;
    }

    .blog-product-details .category-badge-more {
        font-size: 0.6rem;
        padding: 0.15rem 0.3rem;
    }
}

/* ===== Mobile (max-width: 480px) ===== */
@media (max-width: 480px) {
    .product-category-badges {
        gap: 0.25rem;
        margin: 0.25rem 0 0.15rem;
    }

    .category-badge {
        font-size: 0.5rem;
        padding: 0.1rem 0.4rem;
        letter-spacing: 0.2px;
        border-radius: 16px;
    }

    .category-badge-more {
        font-size: 0.5rem;
        padding: 0.1rem 0.25rem;
    }

    /* Product Card - Mobile */
    .product-card .product-category-badges {
        gap: 0.15rem;
        margin: 0.1rem 0 0.2rem;
    }

    .product-card .category-badge {
        font-size: 0.4rem;
        padding: 0.05rem 0.3rem;
        letter-spacing: 0.1px;
        border-radius: 12px;
        border-width: 0.5px;
    }

    .product-card .category-badge-more {
        font-size: 0.4rem;
        padding: 0.05rem 0.15rem;
    }

    /* Blog Product - Mobile */
    .blog-product-details .product-category-badges {
        gap: 0.25rem;
        margin: 0.3rem 0 0.25rem;
    }

    .blog-product-details .category-badge {
        font-size: 0.55rem;
        padding: 0.12rem 0.5rem;
        letter-spacing: 0.2px;
        border-radius: 16px;
    }

    .blog-product-details .category-badge-more {
        font-size: 0.55rem;
        padding: 0.12rem 0.25rem;
    }
}

/* ===== Small Mobile (max-width: 360px) ===== */
@media (max-width: 360px) {
    .category-badge {
        font-size: 0.45rem;
        padding: 0.08rem 0.3rem;
        letter-spacing: 0.1px;
        border-radius: 12px;
    }

    .category-badge-more {
        font-size: 0.45rem;
        padding: 0.08rem 0.2rem;
    }

    .product-card .category-badge {
        font-size: 0.35rem;
        padding: 0.04rem 0.25rem;
        border-radius: 10px;
    }

    .product-card .category-badge-more {
        font-size: 0.35rem;
        padding: 0.04rem 0.12rem;
    }

    .blog-product-details .category-badge {
        font-size: 0.5rem;
        padding: 0.1rem 0.4rem;
        border-radius: 14px;
    }

    .blog-product-details .category-badge-more {
        font-size: 0.5rem;
        padding: 0.1rem 0.2rem;
    }
}

/* ============================================
   LARGE DESKTOP (min-width: 1400px)
   ============================================ */
@media (min-width: 1400px) {
    .category-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.8rem;
        letter-spacing: 0.5px;
    }

    .category-badge-more {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    .blog-product-details .category-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.9rem;
        letter-spacing: 0.5px;
    }

    .blog-product-details .category-badge-more {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ============================================
   HIGH CONTRAST / ACCESSIBILITY
   ============================================ */
@media (prefers-contrast: high) {
    .category-badge {
        border-width: 2px;
        font-weight: 700;
    }

    .product-card .category-badge {
        border-width: 1.5px;
    }

    .blog-product-details .category-badge {
        border-width: 2px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .category-badge {
        transition: none !important;
    }

    .category-badge:hover {
        transform: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .product-category-badges {
        margin: 0.2rem 0;
    }

    .category-badge {
        background: #f0f0f0 !important;
        color: #333 !important;
        border: 1px solid #ccc !important;
        font-size: 0.5rem !important;
        padding: 0.1rem 0.4rem !important;
    }

    .category-badge-more {
        color: #666 !important;
        font-size: 0.5rem !important;
    }
}
/* ============================================
   RELATED PRODUCTS SECTION - PROFESSIONAL
   ============================================ */

.related-products-container {
    margin: 3rem 0 1.5rem;
    padding: 0 0.5rem;
    width: 100%;
    animation: fadeInUp 0.5s ease;
}

.related-products-wrapper {
    background: var(--bg-white);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: var(--transition);
}

[data-theme="dark"] .related-products-wrapper {
    background: var(--bg-white);
    border-color: rgba(255,255,255,0.06);
}

.related-products-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

[data-theme="dark"] .related-products-header {
    border-bottom-color: rgba(255,255,255,0.06);
}

.related-products-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

[data-theme="dark"] .related-products-title {
    color: #8AB8A0;
}

.related-products-title i {
    color: var(--primary);
    font-size: 1.4rem;
}

[data-theme="dark"] .related-products-title i {
    color: var(--primary-light);
}

.related-products-title .highlight {
    color: var(--primary);
    background: rgba(183,110,62,0.1);
    padding: 0.1rem 0.8rem;
    border-radius: 8px;
    font-weight: 800;
}

[data-theme="dark"] .related-products-title .highlight {
    background: rgba(183,110,62,0.2);
    color: var(--primary-light);
}

.related-products-subtitle {
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0;
}

[data-theme="dark"] .related-products-subtitle {
    color: var(--text-light);
}

/* Related Products Grid - 3 columns */
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}

/* Related Product Card */
.related-product-card {
    background: var(--bg-light);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--border);
    position: relative;
}

[data-theme="dark"] .related-product-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}

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

[data-theme="dark"] .related-product-card:hover {
    border-color: var(--primary-light);
}

.related-product-image-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--bg-gray);
    aspect-ratio: 1 / 1;
}

[data-theme="dark"] .related-product-image-wrapper {
    background: rgba(255,255,255,0.03);
}

.related-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.related-price-bubble {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(183, 110, 62, 0.3);
}

[data-theme="dark"] .related-price-bubble {
    box-shadow: 0 2px 8px rgba(183, 110, 62, 0.4);
}

/* Trend badge on related products */
.related-product-card .trend-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 50px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(255,255,255,0.15);
    z-index: 2;
}

.related-product-card .trend-high {
    background: linear-gradient(145deg, #E8594E, #C62828);
}
.related-product-card .trend-trending {
    background: linear-gradient(145deg, #FFB648, #E67E22);
}
.related-product-card .trend-stable {
    background: linear-gradient(145deg, #2ECC71, #1E8449);
}
.related-product-card .trend-low {
    background: linear-gradient(145deg, #5DADE2, #2E86C1);
}
.related-product-card .trend-bestseller {
    background: linear-gradient(145deg, #BB6BD9, #7B2FBE);
}

.related-product-info {
    padding: 0.8rem 0.9rem 1rem;
}

.related-product-title {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Cormorant Garamond', serif;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.2rem;
}

[data-theme="dark"] .related-product-title {
    color: var(--text-dark);
}

/* Category badges for related products */
.related-product-category-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin: 0.15rem 0 0.2rem;
}

.related-category-badge {
    font-size: 0.5rem;
    background: var(--bg-gray);
    color: var(--text-light);
    padding: 0.08rem 0.4rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    line-height: 1.3;
}

[data-theme="dark"] .related-category-badge {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
    color: var(--text-light);
}

.related-category-badge-more {
    font-size: 0.5rem;
    color: var(--text-light);
    padding: 0.08rem 0.2rem;
    opacity: 0.6;
    line-height: 1.3;
}

[data-theme="dark"] .related-category-badge-more {
    color: var(--text-light);
}

/* Stars on related products */
.related-product-card .stars-container {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin: 0.2rem 0 0.1rem;
}

.related-product-card .stars-container .star-filled,
.related-product-card .stars-container .star-half {
    color: var(--rating-color);
    font-size: 0.6rem;
}

.related-product-card .stars-container .star-empty {
    color: var(--border);
    font-size: 0.6rem;
}

[data-theme="dark"] .related-product-card .stars-container .star-empty {
    color: rgba(255,255,255,0.1);
}

.related-product-card .stars-container .rating-value {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-left: 0.2rem;
    background: var(--rating-bg);
    padding: 0.05rem 0.35rem;
    border-radius: 12px;
    border: 1px solid rgba(245, 166, 35, 0.2);
}

[data-theme="dark"] .related-product-card .stars-container .rating-value {
    background: rgba(245, 166, 35, 0.15);
    color: #F5C842;
    border-color: rgba(245, 166, 35, 0.2);
}

/* Affiliate on related products */
.related-product-affiliate {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--secondary-dark);
    margin-top: 0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(44, 95, 74, 0.08);
    padding: 0.1rem 0.5rem 0.1rem 0.2rem;
    border-radius: 30px;
    border: 1px solid rgba(44, 95, 74, 0.15);
}

[data-theme="dark"] .related-product-affiliate {
    color: #8AB8A0;
    background: rgba(44, 95, 74, 0.15);
    border-color: rgba(44, 95, 74, 0.2);
}

.related-product-affiliate i {
    font-size: 0.5rem;
    color: #fff;
    background: var(--secondary);
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

[data-theme="dark"] .related-product-affiliate i {
    background: #4A8A6A;
}

/* Related Products Footer */
.related-products-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

[data-theme="dark"] .related-products-footer {
    border-top-color: rgba(255,255,255,0.06);
}

.load-more-related-btn {
    background: var(--bg-light);
    color: var(--text-dark);
    border: 2px solid var(--border);
    padding: 0.7rem 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

[data-theme="dark"] .load-more-related-btn {
    background: rgba(255,255,255,0.04);
    color: var(--text-dark);
    border-color: rgba(255,255,255,0.1);
}

.load-more-related-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

[data-theme="dark"] .load-more-related-btn:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
    border-color: var(--primary-light);
}

.load-more-related-btn i {
    font-size: 1.1rem;
}

.related-products-count {
    font-size: 0.8rem;
    color: var(--text-light);
}

[data-theme="dark"] .related-products-count {
    color: var(--text-light);
}

/* ============================================
   RELATED PRODUCTS - RESPONSIVE
   ============================================ */

/* Tablets */
@media (max-width: 992px) {
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    
    .related-products-title {
        font-size: 1.5rem;
    }
    
    .related-products-wrapper {
        padding: 1.5rem 1rem;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .related-products-title {
        font-size: 1.2rem;
        gap: 0.3rem;
    }
    
    .related-products-title i {
        font-size: 1rem;
    }
    
    .related-products-title .highlight {
        padding: 0.05rem 0.5rem;
        font-size: 1rem;
    }
    
    .related-products-subtitle {
        font-size: 0.8rem;
    }
    
    .related-products-wrapper {
        padding: 1rem 0.7rem;
        border-radius: 14px;
    }
    
    .related-product-title {
        font-size: 0.7rem;
        min-height: 1.8rem;
    }
    
    .related-product-info {
        padding: 0.5rem 0.6rem 0.7rem;
    }
    
    .related-price-bubble {
        font-size: 0.55rem;
        padding: 0.15rem 0.4rem;
    }
    
    .related-product-card .trend-badge {
        font-size: 0.4rem;
        padding: 0.2rem 0.4rem;
    }
    
    .related-category-badge {
        font-size: 0.4rem;
        padding: 0.05rem 0.3rem;
    }
    
    .related-category-badge-more {
        font-size: 0.4rem;
    }
    
    .related-product-affiliate {
        font-size: 0.45rem;
        padding: 0.05rem 0.3rem 0.05rem 0.15rem;
    }
    
    .related-product-affiliate i {
        width: 12px;
        height: 12px;
        font-size: 0.4rem;
    }
    
    .related-product-card .stars-container .star-filled,
    .related-product-card .stars-container .star-half,
    .related-product-card .stars-container .star-empty {
        font-size: 0.5rem;
    }
    
    .related-product-card .stars-container .rating-value {
        font-size: 0.45rem;
        padding: 0.03rem 0.25rem;
    }
    
    .load-more-related-btn {
        padding: 0.5rem 1.2rem;
        font-size: 0.8rem;
    }
    
    .load-more-related-btn i {
        font-size: 0.9rem;
    }
    
    .related-products-count {
        font-size: 0.7rem;
    }
    
    .related-products-container {
        margin: 2rem 0 1rem;
    }
}

/* Small Mobile */
@media (max-width: 400px) {
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    
    .related-products-title {
        font-size: 1rem;
    }
    
    .related-products-title .highlight {
        font-size: 0.9rem;
        padding: 0.05rem 0.4rem;
    }
    
    .related-products-wrapper {
        padding: 0.8rem 0.5rem;
        border-radius: 12px;
    }
    
    .related-product-title {
        font-size: 0.6rem;
        min-height: 1.5rem;
    }
    
    .related-product-info {
        padding: 0.4rem 0.4rem 0.5rem;
    }
    
    .related-price-bubble {
        font-size: 0.45rem;
        padding: 0.1rem 0.3rem;
    }
    
    .related-product-card .trend-badge {
        font-size: 0.35rem;
        padding: 0.15rem 0.3rem;
    }
}

/* Large Desktop */
@media (min-width: 1400px) {
    .related-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .related-products-title {
        font-size: 2.2rem;
    }
    
    .related-products-wrapper {
        padding: 2.5rem 2rem;
    }
}

/* ============================================
   RELATED PRODUCTS - DARK MODE REFINEMENTS
   ============================================ */
[data-theme="dark"] .related-product-card .trend-badge {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .related-product-card:hover .trend-badge {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* ============================================
   RELATED PRODUCTS - ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.related-products-container {
    animation: fadeInUp 0.5s ease;
}

.related-product-card {
    animation: fadeInUp 0.4s ease;
}

/* Stagger animation for cards */
.related-product-card:nth-child(1) { animation-delay: 0.05s; }
.related-product-card:nth-child(2) { animation-delay: 0.10s; }
.related-product-card:nth-child(3) { animation-delay: 0.15s; }
.related-product-card:nth-child(4) { animation-delay: 0.20s; }
.related-product-card:nth-child(5) { animation-delay: 0.25s; }
.related-product-card:nth-child(6) { animation-delay: 0.30s; }
.related-product-card:nth-child(7) { animation-delay: 0.35s; }
.related-product-card:nth-child(8) { animation-delay: 0.40s; }
.related-product-card:nth-child(9) { animation-delay: 0.45s; }

/* ============================================
   HIGH CONTRAST / ACCESSIBILITY
   ============================================ */
@media (prefers-contrast: high) {
    .related-products-wrapper {
        border-width: 2px;
    }
    
    .related-product-card {
        border-width: 2px;
    }
    
    .related-product-card:hover {
        border-width: 2px;
    }
    
    .load-more-related-btn {
        border-width: 2px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .related-products-container,
    .related-product-card {
        animation: none !important;
    }
    
    .related-product-card:hover {
        transform: none !important;
    }
    
    .related-product-img {
        transition: none !important;
    }
    
    .load-more-related-btn:hover {
        transform: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .related-products-container {
        margin: 2rem 0;
        page-break-inside: avoid;
    }
    
    .related-products-wrapper {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        background: #fff !important;
        padding: 1.5rem !important;
    }
    
    .related-product-card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    
    .related-product-card:hover {
        transform: none !important;
    }
    
    .load-more-related-btn {
        display: none !important;
    }
    
    .related-products-footer {
        border-top-color: #ddd !important;
    }
}
/* ============================================
   CATEGORY PAGINATION - CURSOR STYLES
   ============================================ */

.category-pagination-container {
    margin: 2.5rem 0 1.5rem;
    padding: 0 0.5rem;
    width: 100%;
}

.category-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1rem;
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

[data-theme="dark"] .category-pagination {
    background: var(--bg-white);
    border-color: rgba(255,255,255,0.06);
}

.pagination-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 0.85rem;
    color: var(--text-light);
    flex-wrap: wrap;
    gap: 0.5rem;
}

[data-theme="dark"] .pagination-info {
    color: var(--text-light);
}

.pagination-status {
    font-size: 0.9rem;
}

.pagination-status strong {
    color: var(--primary);
    font-weight: 700;
}

[data-theme="dark"] .pagination-status strong {
    color: var(--primary-light);
}

.pagination-count {
    font-size: 0.8rem;
    opacity: 0.7;
    background: var(--bg-gray);
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
}

[data-theme="dark"] .pagination-count {
    background: rgba(255,255,255,0.05);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* ============================================
   PAGE BUTTONS WITH CURSOR INDICATORS
   ============================================ */

.category-pagination .page-btn {
    padding: 0.5rem 1.1rem;
    min-width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    position: relative;
    user-select: none;
}

[data-theme="dark"] .category-pagination .page-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-dark);
}

.category-pagination .page-btn:hover:not(.disabled):not(.active) {
    background: rgba(183, 110, 62, 0.08);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

[data-theme="dark"] .category-pagination .page-btn:hover:not(.disabled):not(.active) {
    background: rgba(183, 110, 62, 0.15);
    border-color: var(--primary-light);
}

.category-pagination .page-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    cursor: default;
    box-shadow: 0 4px 16px rgba(183, 110, 62, 0.35);
}

[data-theme="dark"] .category-pagination .page-btn.active {
    background: var(--primary-light);
    color: var(--bg-dark);
    border-color: var(--primary-light);
    box-shadow: 0 4px 16px rgba(183, 110, 62, 0.25);
}

.category-pagination .page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.category-pagination .page-btn .page-cursor-indicator {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: cursorPulse 1.2s ease-in-out infinite;
}

[data-theme="dark"] .category-pagination .page-btn .page-cursor-indicator {
    background: var(--primary-light);
}

@keyframes cursorPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateX(-50%) scale(1.6);
        opacity: 0.3;
    }
}

/* ============================================
   PAGE CLICK ANIMATION
   ============================================ */

.category-pagination .page-btn.page-clicked {
    animation: pageClick 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pageClick {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.85);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================
   PAGE NUMBERS - SMART TRUNCATION
   ============================================ */

.page-numbers {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.page-ellipsis {
    color: var(--text-light);
    padding: 0 0.2rem;
    font-size: 0.9rem;
}

[data-theme="dark"] .page-ellipsis {
    color: var(--text-light);
}

/* ============================================
   PREV / NEXT BUTTONS
   ============================================ */

.category-pagination .page-prev,
.category-pagination .page-next {
    padding: 0.5rem 1.2rem;
    min-width: auto;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.category-pagination .page-prev i,
.category-pagination .page-next i {
    font-size: 0.75rem;
    transition: var(--transition);
}

.category-pagination .page-prev:hover:not(.disabled) i {
    transform: translateX(-3px);
}

.category-pagination .page-next:hover:not(.disabled) i {
    transform: translateX(3px);
}

/* ============================================
   RESPONSIVE PAGINATION
   ============================================ */

@media (max-width: 768px) {
    .category-pagination-container {
        margin: 1.5rem 0 1rem;
    }
    
    .category-pagination {
        padding: 1rem 0.8rem;
        gap: 0.8rem;
        border-radius: 12px;
    }
    
    .pagination-info {
        font-size: 0.75rem;
        flex-direction: column;
        text-align: center;
        gap: 0.2rem;
    }
    
    .pagination-status {
        font-size: 0.8rem;
    }
    
    .pagination-count {
        font-size: 0.7rem;
        padding: 0.15rem 0.6rem;
    }
    
    .pagination-controls {
        gap: 0.3rem;
    }
    
    .category-pagination .page-btn {
        padding: 0.4rem 0.7rem;
        min-width: 32px;
        height: 32px;
        font-size: 0.7rem;
        border-radius: 6px;
    }
    
    .category-pagination .page-prev,
    .category-pagination .page-next {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
        min-width: auto;
    }
    
    .page-numbers {
        gap: 0.2rem;
    }
    
    .page-ellipsis {
        font-size: 0.7rem;
    }
    
    .category-pagination .page-btn .page-cursor-indicator {
        width: 4px;
        height: 4px;
        bottom: -3px;
    }
}

@media (max-width: 480px) {
    .category-pagination-container {
        margin: 1rem 0 0.8rem;
    }
    
    .category-pagination {
        padding: 0.8rem 0.5rem;
        gap: 0.6rem;
        border-radius: 10px;
    }
    
    .pagination-info {
        font-size: 0.65rem;
    }
    
    .pagination-status {
        font-size: 0.7rem;
    }
    
    .pagination-count {
        font-size: 0.6rem;
        padding: 0.1rem 0.5rem;
    }
    
    .pagination-controls {
        gap: 0.2rem;
    }
    
    .category-pagination .page-btn {
        padding: 0.3rem 0.5rem;
        min-width: 28px;
        height: 28px;
        font-size: 0.6rem;
        border-radius: 4px;
        border-width: 1px;
    }
    
    .category-pagination .page-prev,
    .category-pagination .page-next {
        padding: 0.3rem 0.6rem;
        font-size: 0.6rem;
        min-width: auto;
        gap: 0.2rem;
    }
    
    .category-pagination .page-prev i,
    .category-pagination .page-next i {
        font-size: 0.55rem;
    }
    
    .page-numbers {
        gap: 0.15rem;
    }
    
    .page-ellipsis {
        font-size: 0.6rem;
        padding: 0 0.1rem;
    }
    
    .category-pagination .page-btn .page-cursor-indicator {
        width: 3px;
        height: 3px;
        bottom: -2px;
    }
}

/* ============================================
   LARGE DESKTOP
   ============================================ */
@media (min-width: 1400px) {
    .category-pagination {
        padding: 2rem 2rem;
        border-radius: 20px;
    }
    
    .category-pagination .page-btn {
        padding: 0.6rem 1.4rem;
        min-width: 48px;
        height: 48px;
        font-size: 0.95rem;
        border-radius: 10px;
    }
    
    .category-pagination .page-prev,
    .category-pagination .page-next {
        padding: 0.6rem 1.6rem;
        font-size: 0.95rem;
    }
    
    .pagination-status {
        font-size: 1rem;
    }
    
    .pagination-count {
        font-size: 0.85rem;
        padding: 0.3rem 1rem;
    }
}

/* ============================================
   HIGH CONTRAST / ACCESSIBILITY
   ============================================ */
@media (prefers-contrast: high) {
    .category-pagination {
        border-width: 2px;
    }
    
    .category-pagination .page-btn {
        border-width: 2px;
        font-weight: 700;
    }
    
    .category-pagination .page-btn.active {
        border-color: var(--text-dark);
        outline: 2px solid var(--text-dark);
        outline-offset: 2px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .category-pagination .page-btn .page-cursor-indicator {
        animation: none !important;
    }
    
    .category-pagination .page-btn.page-clicked {
        animation: none !important;
    }
    
    .category-pagination .page-btn:hover:not(.disabled):not(.active) {
        transform: none !important;
    }
    
    .category-pagination .page-prev:hover:not(.disabled) i,
    .category-pagination .page-next:hover:not(.disabled) i {
        transform: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .category-pagination-container {
        display: none !important;
    }
}
/* ============================================
   LOAD MORE BUTTON - PROFESSIONAL
   ============================================ */

.load-more-container {
    margin: 2.5rem 0 1.5rem;
    padding: 0 0.5rem;
    width: 100%;
}

.load-more-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1.5rem 1rem;
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

[data-theme="dark"] .load-more-footer {
    background: var(--bg-white);
    border-color: rgba(255,255,255,0.06);
}

.load-more-btn {
    background: var(--bg-light);
    color: var(--text-dark);
    border: 2px solid var(--border);
    padding: 0.8rem 2.5rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 200px;
    justify-content: center;
}

[data-theme="dark"] .load-more-btn {
    background: rgba(255,255,255,0.04);
    color: var(--text-dark);
    border-color: rgba(255,255,255,0.1);
}

.load-more-btn:hover:not(:disabled) {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(183, 110, 62, 0.3);
}

[data-theme="dark"] .load-more-btn:hover:not(:disabled) {
    background: var(--primary-light);
    color: var(--bg-dark);
    border-color: var(--primary-light);
    box-shadow: 0 8px 28px rgba(183, 110, 62, 0.25);
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.load-more-btn.loading {
    opacity: 0.8;
    cursor: wait;
}

.load-more-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.load-more-btn:hover:not(:disabled) i {
    transform: scale(1.1) rotate(-5deg);
}

.load-more-btn .load-more-count {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
    background: rgba(0,0,0,0.06);
    padding: 0.1rem 0.6rem;
    border-radius: 20px;
    transition: var(--transition);
}

[data-theme="dark"] .load-more-btn .load-more-count {
    background: rgba(255,255,255,0.06);
}

.load-more-btn:hover:not(:disabled) .load-more-count {
    background: rgba(255,255,255,0.15);
    opacity: 1;
}

.load-more-info {
    font-size: 0.8rem;
    color: var(--text-light);
}

[data-theme="dark"] .load-more-info {
    color: var(--text-light);
}

.load-more-end {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

[data-theme="dark"] .load-more-end {
    color: var(--text-light);
}

.load-more-end i {
    font-size: 1.2rem;
}

/* ============================================
   LOAD MORE - RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .load-more-container {
        margin: 1.5rem 0 1rem;
    }
    
    .load-more-footer {
        padding: 1rem 0.8rem;
        gap: 0.6rem;
        border-radius: 12px;
    }
    
    .load-more-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
        min-width: 160px;
        gap: 0.5rem;
    }
    
    .load-more-btn i {
        font-size: 0.9rem;
    }
    
    .load-more-btn .load-more-count {
        font-size: 0.65rem;
        padding: 0.05rem 0.4rem;
    }
    
    .load-more-info {
        font-size: 0.7rem;
    }
    
    .load-more-end {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .load-more-container {
        margin: 1rem 0 0.8rem;
    }
    
    .load-more-footer {
        padding: 0.8rem 0.5rem;
        gap: 0.5rem;
        border-radius: 10px;
    }
    
    .load-more-btn {
        padding: 0.5rem 1.2rem;
        font-size: 0.75rem;
        min-width: 130px;
        gap: 0.4rem;
        border-width: 1.5px;
    }
    
    .load-more-btn i {
        font-size: 0.75rem;
    }
    
    .load-more-btn .load-more-count {
        font-size: 0.55rem;
        padding: 0.05rem 0.3rem;
    }
    
    .load-more-info {
        font-size: 0.6rem;
    }
    
    .load-more-end {
        font-size: 0.7rem;
    }
}

@media (min-width: 1400px) {
    .load-more-footer {
        padding: 2rem 2rem;
        border-radius: 20px;
    }
    
    .load-more-btn {
        padding: 1rem 3rem;
        font-size: 1.1rem;
        min-width: 240px;
    }
}

/* ============================================
   HIGH CONTRAST / ACCESSIBILITY   ============================================ */
@media (prefers-contrast: high) {
    .load-more-footer {
        border-width: 2px;
    }
    
    .load-more-btn {
        border-width: 2px;
        font-weight: 700;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .load-more-btn {
        transition: none !important;
    }
    
    .load-more-btn:hover:not(:disabled) {
        transform: none !important;
    }
    
    .load-more-btn i {
        transition: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .load-more-container {
        display: none !important;
    }
}

/* ============================================
   CATEGORY PAGE - HIDE PRICE, TREND, AFFILIATE, CATEGORY BADGES
   ============================================ */

/* Hide price bubble on category page product cards */
.category-page .blog-product-item .blog-product-price,
.category-page .blog-product-item .price-note,
.category-page .blog-product-item .blog-product-price {
    display: none !important;
}

/* Hide trend badge on category page product cards */
.category-page .blog-product-item .blog-product-trend,
.category-page .blog-product-item .trend-badge {
    display: none !important;
}

/* Hide affiliate program on category page product cards */
.category-page .blog-product-item .blog-product-affiliate,
.category-page .blog-product-item .product-affiliate {
    display: none !important;
}

/* Hide category badges on category page product cards */
.category-page .blog-product-item .product-category-badges,
.category-page .blog-product-item .category-badge,
.category-page .blog-product-item .category-badge-more {
    display: none !important;
}

/* Ensure rating is displayed and properly sized on category page */
.category-page .blog-product-item .blog-product-rating {
    display: inline-flex !important;
    margin: 0.6rem 0 0.35rem !important;
}

.category-page .blog-product-item .blog-product-rating .stars-container {
    padding: 0.25rem 0.6rem 0.25rem 0.5rem !important;
    border-radius: 40px !important;
}

.category-page .blog-product-item .blog-product-rating .star-filled,
.category-page .blog-product-item .blog-product-rating .star-half {
    font-size: 0.75rem !important;
}

.category-page .blog-product-item .blog-product-rating .star-empty {
    font-size: 0.75rem !important;
}

.category-page .blog-product-item .blog-product-rating .rating-value {
    font-size: 0.7rem !important;
    padding: 0.1rem 0.5rem !important;
}

/* Ensure buy button is properly styled on category page */
.category-page .blog-product-item .buy-button {
    margin-top: 1rem !important;
    padding: 0.7rem 1.8rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: auto !important;
    min-width: 140px !important;
    justify-content: center !important;
}

.category-page .blog-product-item .buy-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    background: linear-gradient(145deg, var(--primary-light), var(--primary)) !important;
}

.category-page .blog-product-item .buy-button i {
    font-size: 0.9rem !important;
}

/* Ensure product image and description are not affected */
.category-page .blog-product-item .blog-product-image,
.category-page .blog-product-item .product-image-slider {
    flex: 0 0 35% !important;
    max-width: 35% !important;
}

.category-page .blog-product-item .blog-product-details {
    flex: 1 !important;
    padding: 1.5rem !important;
}

.category-page .blog-product-item .blog-product-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.8rem !important;
    color: var(--text-dark) !important;
    font-family: 'Cormorant Garamond', serif !important;
    line-height: 1.3 !important;
}

.category-page .blog-product-item .blog-product-description {
    line-height: 1.7 !important;
    color: var(--text-dark) !important;
    font-size: 0.95rem !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

[data-theme="dark"] .category-page .blog-product-item .blog-product-description {
    color: #e8e8f0 !important;
}

[data-theme="dark"] .category-page .blog-product-item .blog-product-title {
    color: var(--text-dark) !important;
}

[data-theme="dark"] .category-page .blog-product-item .buy-button {
    background: linear-gradient(145deg, var(--primary-light), var(--primary)) !important;
}

[data-theme="dark"] .category-page .blog-product-item .buy-button:hover {
    background: linear-gradient(145deg, #D4A574, var(--primary-light)) !important;
}

/* Responsive adjustments for category page */
@media (max-width: 768px) {
    .category-page .blog-product-item .blog-product-image,
    .category-page .blog-product-item .product-image-slider {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .category-page .blog-product-item .blog-product-details {
        padding: 1rem !important;
    }
    
    .category-page .blog-product-item .blog-product-title {
        font-size: 1.2rem !important;
    }
    
    .category-page .blog-product-item .buy-button {
        padding: 0.6rem 1.5rem !important;
        font-size: 0.85rem !important;
        min-width: 120px !important;
    }
    
    .category-page .blog-product-item .blog-product-rating .star-filled,
    .category-page .blog-product-item .blog-product-rating .star-half {
        font-size: 0.7rem !important;
    }
    
    .category-page .blog-product-item .blog-product-rating .star-empty {
        font-size: 0.7rem !important;
    }
    
    .category-page .blog-product-item .blog-product-rating .rating-value {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 480px) {
    .category-page .blog-product-item .blog-product-title {
        font-size: 1rem !important;
    }
    
    .category-page .blog-product-item .blog-product-details {
        padding: 0.8rem !important;
    }
    
    .category-page .blog-product-item .buy-button {
        padding: 0.5rem 1.2rem !important;
        font-size: 0.8rem !important;
        min-width: 100px !important;
        gap: 0.4rem !important;
    }
    
    .category-page .blog-product-item .blog-product-rating .stars-container {
        padding: 0.15rem 0.4rem 0.15rem 0.35rem !important;
    }
    
    .category-page .blog-product-item .blog-product-rating .star-filled,
    .category-page .blog-product-item .blog-product-rating .star-half {
        font-size: 0.6rem !important;
    }
    
    .category-page .blog-product-item .blog-product-rating .star-empty {
        font-size: 0.6rem !important;
    }
    
    .category-page .blog-product-item .blog-product-rating .rating-value {
        font-size: 0.55rem !important;
        padding: 0.05rem 0.35rem !important;
    }
}

/* ============================================
   PROFESSIONAL AFFILIATE BUY BUTTON - V5 (FINAL)
   ============================================ */

/* Base Buy Button - Professional Affiliate Style */
.buy-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.8rem !important;
    padding: 0.9rem 2.5rem !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    border: 3px solid #8B5A2B !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    background: transparent !important;
    color: #8B5A2B !important;
    text-decoration: none !important;
    min-width: 180px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 15px rgba(139, 90, 43, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.buy-button i {
    font-size: 1.05rem !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
}

.buy-button .button-text {
    display: inline-block !important;
    max-width: 250px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
}

.buy-button:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 8px 40px rgba(139, 90, 43, 0.4) !important;
    background: #8B5A2B !important;
    color: #ffffff !important;
    border-color: #8B5A2B !important;
}

.buy-button:hover i {
    transform: scale(1.15) rotate(-5deg) !important;
}

.buy-button:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 2px 10px rgba(139, 90, 43, 0.15) !important;
}

/* ============================================
   PLATFORM-SPECIFIC COLORS (Dark Orange Border)
   ============================================ */

.buy-button.amazon {
    border-color: #8B5A2B !important;
    color: #8B5A2B !important;
    box-shadow: 0 2px 15px rgba(139, 90, 43, 0.25) !important;
}

.buy-button.amazon:hover {
    background: #8B5A2B !important;
    color: #ffffff !important;
    border-color: #8B5A2B !important;
    box-shadow: 0 8px 40px rgba(139, 90, 43, 0.45) !important;
}

.buy-button.etsy {
    border-color: #8B5A2B !important;
    color: #8B5A2B !important;
    box-shadow: 0 2px 15px rgba(139, 90, 43, 0.25) !important;
}

.buy-button.etsy:hover {
    background: #8B5A2B !important;
    color: #ffffff !important;
    border-color: #8B5A2B !important;
    box-shadow: 0 8px 40px rgba(139, 90, 43, 0.45) !important;
}

.buy-button.wayfair {
    border-color: #8B5A2B !important;
    color: #8B5A2B !important;
    box-shadow: 0 2px 15px rgba(139, 90, 43, 0.25) !important;
}

.buy-button.wayfair:hover {
    background: #8B5A2B !important;
    color: #ffffff !important;
    border-color: #8B5A2B !important;
    box-shadow: 0 8px 40px rgba(139, 90, 43, 0.45) !important;
}

.buy-button.walmart {
    border-color: #8B5A2B !important;
    color: #8B5A2B !important;
    box-shadow: 0 2px 15px rgba(139, 90, 43, 0.25) !important;
}

.buy-button.walmart:hover {
    background: #8B5A2B !important;
    color: #ffffff !important;
    border-color: #8B5A2B !important;
    box-shadow: 0 8px 40px rgba(139, 90, 43, 0.45) !important;
}

.buy-button.target {
    border-color: #8B5A2B !important;
    color: #8B5A2B !important;
    box-shadow: 0 2px 15px rgba(139, 90, 43, 0.25) !important;
}

.buy-button.target:hover {
    background: #8B5A2B !important;
    color: #ffffff !important;
    border-color: #8B5A2B !important;
    box-shadow: 0 8px 40px rgba(139, 90, 43, 0.45) !important;
}

.buy-button.default {
    border-color: #8B5A2B !important;
    color: #8B5A2B !important;
    box-shadow: 0 2px 15px rgba(139, 90, 43, 0.25) !important;
}

.buy-button.default:hover {
    background: #8B5A2B !important;
    color: #ffffff !important;
    border-color: #8B5A2B !important;
    box-shadow: 0 8px 40px rgba(139, 90, 43, 0.45) !important;
}

/* ============================================
   DARK MODE - Buy Button (HIGHLY VISIBLE)
   ============================================ */

[data-theme="dark"] .buy-button {
    border-color: #A67B5B !important;
    color: #D4A574 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 0 0 1.5px rgba(166, 123, 91, 0.15) !important;
}

[data-theme="dark"] .buy-button:hover {
    background: #A67B5B !important;
    color: #1a1a2e !important;
    border-color: #A67B5B !important;
    box-shadow: 0 8px 40px rgba(166, 123, 91, 0.4), 0 0 0 2px rgba(166, 123, 91, 0.2) !important;
}

[data-theme="dark"] .buy-button.amazon {
    border-color: #A67B5B !important;
    color: #D4A574 !important;
    background: rgba(166, 123, 91, 0.08) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 0 0 1.5px rgba(166, 123, 91, 0.12) !important;
}

[data-theme="dark"] .buy-button.amazon:hover {
    background: #A67B5B !important;
    color: #1a1a2e !important;
    border-color: #A67B5B !important;
    box-shadow: 0 8px 40px rgba(166, 123, 91, 0.4), 0 0 0 2px rgba(166, 123, 91, 0.2) !important;
}

[data-theme="dark"] .buy-button.etsy {
    border-color: #A67B5B !important;
    color: #D4A574 !important;
    background: rgba(166, 123, 91, 0.08) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 0 0 1.5px rgba(166, 123, 91, 0.12) !important;
}

[data-theme="dark"] .buy-button.etsy:hover {
    background: #A67B5B !important;
    color: #1a1a2e !important;
    border-color: #A67B5B !important;
    box-shadow: 0 8px 40px rgba(166, 123, 91, 0.4), 0 0 0 2px rgba(166, 123, 91, 0.2) !important;
}

[data-theme="dark"] .buy-button.default {
    border-color: #A67B5B !important;
    color: #D4A574 !important;
    background: rgba(166, 123, 91, 0.08) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 0 0 1.5px rgba(166, 123, 91, 0.12) !important;
}

[data-theme="dark"] .buy-button.default:hover {
    background: #A67B5B !important;
    color: #1a1a2e !important;
    border-color: #A67B5B !important;
    box-shadow: 0 8px 40px rgba(166, 123, 91, 0.4), 0 0 0 2px rgba(166, 123, 91, 0.2) !important;
}

/* ============================================
   CATEGORY PAGE - Buy Button (Right Bottom Corner)
   ============================================ */

.category-page .blog-product-item {
    position: relative !important;
}

.category-page .blog-product-item .blog-product-details {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    position: relative !important;
    padding-bottom: 1.5rem !important;
}

.category-page .blog-product-item .blog-product-details .blog-product-description {
    flex: 1 !important;
    margin-bottom: 0.5rem !important;
}

.category-page .blog-product-item .buy-button {
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-end !important;
    padding: 0.9rem 2.5rem !important;
    font-size: 1rem !important;
    border-radius: 50px !important;
    min-width: 180px !important;
    border-width: 3px !important;
    border-color: #8B5A2B !important;
    color: #8B5A2B !important;
    background: transparent !important;
    box-shadow: 0 2px 15px rgba(139, 90, 43, 0.2) !important;
    flex-shrink: 0 !important;
}

.category-page .blog-product-item .buy-button:hover {
    background: #8B5A2B !important;
    color: #ffffff !important;
    border-color: #8B5A2B !important;
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 8px 40px rgba(139, 90, 43, 0.4) !important;
}

.category-page .blog-product-item .blog-product-rating {
    margin-bottom: 0.5rem !important;
}

[data-theme="dark"] .category-page .blog-product-item .buy-button {
    border-color: #A67B5B !important;
    color: #D4A574 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 0 0 1.5px rgba(166, 123, 91, 0.12) !important;
}

[data-theme="dark"] .category-page .blog-product-item .buy-button:hover {
    background: #A67B5B !important;
    color: #1a1a2e !important;
    border-color: #A67B5B !important;
    box-shadow: 0 8px 40px rgba(166, 123, 91, 0.4), 0 0 0 2px rgba(166, 123, 91, 0.2) !important;
}

/* ============================================
   RESPONSIVE - Buy Button
   ============================================ */

@media (max-width: 992px) {
    .category-page .blog-product-item .buy-button {
        padding: 0.8rem 2rem !important;
        font-size: 0.95rem !important;
        min-width: 160px !important;
    }
}

@media (max-width: 768px) {
    .buy-button {
        padding: 0.75rem 1.8rem !important;
        font-size: 0.9rem !important;
        min-width: 150px !important;
        border-radius: 50px !important;
        border-width: 2.5px !important;
    }
    
    .buy-button i {
        font-size: 0.9rem !important;
    }
    
    .buy-button .button-text {
        max-width: 180px !important;
    }
    
    .category-page .blog-product-item .buy-button {
        padding: 0.7rem 1.8rem !important;
        font-size: 0.9rem !important;
        min-width: 150px !important;
        border-width: 2.5px !important;
        align-self: flex-start !important;
        margin-left: 0 !important;
    }
    
    .category-page .blog-product-item .blog-product-details {
        padding-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    .buy-button {
        padding: 0.6rem 1.4rem !important;
        font-size: 0.8rem !important;
        min-width: 120px !important;
        border-radius: 50px !important;
        gap: 0.5rem !important;
        border-width: 2px !important;
    }
    
    .buy-button i {
        font-size: 0.75rem !important;
    }
    
    .buy-button .button-text {
        max-width: 120px !important;
    }
    
    .category-page .blog-product-item .buy-button {
        padding: 0.55rem 1.2rem !important;
        font-size: 0.75rem !important;
        min-width: 120px !important;
        border-radius: 50px !important;
        border-width: 2px !important;
        align-self: flex-start !important;
        margin-left: 0 !important;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .buy-button {
        transition: none !important;
    }
    
    .buy-button:hover {
        transform: none !important;
    }
    
    .buy-button i {
        transition: none !important;
    }
}
/* ============================================
   PRODUCT CARD CAPTION - ABOVE IMAGE SLIDER
   ============================================ */

.blog-product-caption {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    padding: 0.2rem 0 0.5rem 0;
    display: block;
    width: 100%;
    order: -1;
}

[data-theme="dark"] .blog-product-caption {
    color: #8AB8A0;
}

.blog-product-caption .ql-align-center {
    text-align: center;
}
.blog-product-caption .ql-align-right {
    text-align: right;
}
.blog-product-caption .ql-align-justify {
    text-align: justify;
}

.blog-product-caption p {
    margin-bottom: 0.2rem;
    line-height: 1.5;
    color: var(--secondary);
}

[data-theme="dark"] .blog-product-caption p {
    color: #8AB8A0;
}

.blog-product-caption strong,
.blog-product-caption b {
    font-weight: 700;
    color: var(--secondary-dark);
}

[data-theme="dark"] .blog-product-caption strong,
[data-theme="dark"] .blog-product-caption b {
    color: #D4A574;
}

.blog-product-caption em,
.blog-product-caption i {
    font-style: italic;
}

.blog-product-caption u {
    text-decoration: underline;
}

.blog-product-caption h1,
.blog-product-caption h2,
.blog-product-caption h3,
.blog-product-caption h4,
.blog-product-caption h5,
.blog-product-caption h6 {
    font-family: 'Cormorant Garamond', serif;
    margin: 0.5rem 0 0.3rem 0;
    line-height: 1.3;
    color: var(--secondary);
}

[data-theme="dark"] .blog-product-caption h1,
[data-theme="dark"] .blog-product-caption h2,
[data-theme="dark"] .blog-product-caption h3,
[data-theme="dark"] .blog-product-caption h4,
[data-theme="dark"] .blog-product-caption h5,
[data-theme="dark"] .blog-product-caption h6 {
    color: #8AB8A0;
}

.blog-product-caption h1 { font-size: 1.8rem; }
.blog-product-caption h2 { font-size: 1.4rem; }
.blog-product-caption h3 { font-size: 1.2rem; }
.blog-product-caption h4 { font-size: 1.1rem; }
.blog-product-caption h5 { font-size: 1rem; }
.blog-product-caption h6 { font-size: 0.9rem; }

.blog-product-caption a {
    color: var(--primary);
    text-decoration: underline;
    transition: var(--transition);
}

[data-theme="dark"] .blog-product-caption a {
    color: var(--primary-light);
}

.blog-product-caption a:hover {
    color: var(--primary-dark);
}

[data-theme="dark"] .blog-product-caption a:hover {
    color: #D4A574;
}

.blog-product-caption blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    background: var(--bg-gray);
    border-radius: 0 8px 8px 0;
    color: var(--text-dark);
    font-style: italic;
}

[data-theme="dark"] .blog-product-caption blockquote {
    background: rgba(255,255,255,0.05);
    border-left-color: var(--primary-light);
    color: #e8e8f0;
}

.blog-product-caption blockquote p {
    margin-bottom: 0;
    color: var(--text-dark);
}

[data-theme="dark"] .blog-product-caption blockquote p {
    color: #e8e8f0;
}

.blog-product-caption ul,
.blog-product-caption ol {
    padding-left: 1.5rem;
    margin: 0.4rem 0 0.4rem 0;
    line-height: 1.5;
    color: var(--secondary);
}

[data-theme="dark"] .blog-product-caption ul,
[data-theme="dark"] .blog-product-caption ol {
    color: #8AB8A0;
}

.blog-product-caption li {
    margin-bottom: 0.2rem;
    line-height: 1.5;
    color: var(--secondary);
}

[data-theme="dark"] .blog-product-caption li {
    color: #8AB8A0;
}

@media (max-width: 768px) {
    .blog-product-caption {
        font-size: 1rem;
    }
    .blog-product-caption h1 { font-size: 1.5rem; }
    .blog-product-caption h2 { font-size: 1.2rem; }
    .blog-product-caption h3 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .blog-product-caption {
        font-size: 0.9rem;
    }
    .blog-product-caption h1 { font-size: 1.3rem; }
    .blog-product-caption h2 { font-size: 1.1rem; }
    .blog-product-caption h3 { font-size: 1rem; }
}

/* ============================================
   PRODUCT IMAGE SLIDER - DOTS HIDDEN
   ============================================ */

.product-image-slider .slider-dots {
    display: none !important;
}

.product-image-slider .slider-btn {
    background: rgba(0,0,0,0.55);
    color: white;
    border: none;
    width: 38px;
    height: 38px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
    opacity: 0.7;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.product-image-slider .slider-btn:hover {
    background: var(--primary);
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
}

[data-theme="dark"] .product-image-slider .slider-btn:hover {
    background: var(--primary-light);
}

.product-image-slider .slider-prev {
    left: 10px;
}

.product-image-slider .slider-next {
    right: 10px;
}

/* ============================================
   BLOG PRODUCT HEADER - RESPONSIVE
   ============================================ */

.blog-product-header {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.blog-product-header-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* When caption exists, it's at the top of wrapper */
.blog-product-header-wrapper .blog-product-caption {
    order: 0;
    margin: 0.5rem 0 0.2rem 0;
    padding: 0.3rem 1.5rem 0.5rem 1.5rem;
    width: 100%;
    flex-shrink: 0;
}

.blog-product-header-wrapper .blog-product-header {
    order: 1;
}

@media (max-width: 768px) {
    .blog-product-header-wrapper .blog-product-caption {
        padding: 0.2rem 1rem 0.4rem 1rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .blog-product-header-wrapper .blog-product-caption {
        padding: 0.15rem 0.8rem 0.3rem 0.8rem;
        font-size: 0.9rem;
    }
}


.blog-product-image {
    flex: 0 0 35%;
    max-width: 35%;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px 0 0 12px;
    background: var(--bg-gray);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-product-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.blog-product-image:hover img {
    transform: scale(1.03);
}

.product-image-slider {
    position: relative;
    flex: 0 0 35%;
    max-width: 35%;
    overflow: hidden;
    background: var(--bg-gray);
    border-radius: 12px 0 0 12px;
    min-height: 200px;
}

.product-image-slider .slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100%;
}

.product-image-slider .slider-track {
    display: flex;
    transition: transform 0.4s ease;
    height: 100%;
}

.product-image-slider .slider-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gray);
    min-height: 200px;
}

.product-image-slider .slider-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.blog-product-details {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.blog-product-details .blog-product-caption {
    order: -1;
    margin-top: 0;
}

.blog-product-details .blog-product-title {
    margin-top: 0;
}

/* ============================================
   RESPONSIVE - BLOG PRODUCT HEADER
   ============================================ */

@media (max-width: 768px) {
    .product-image-slider {
        flex: 0 0 100%;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        min-height: 180px;
    }
    
    .blog-product-image {
        flex: 0 0 100%;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        min-height: 180px;
    }
    
    .product-image-slider .slider-slide {
        min-height: 180px;
    }
    
    .blog-product-details {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .product-image-slider {
        min-height: 150px;
    }
    
    .product-image-slider .slider-slide {
        min-height: 150px;
    }
    
    .blog-product-image {
        min-height: 150px;
    }
    
    .blog-product-details {
        padding: 0.8rem;
    }
}

/* Professional runtime search suggestions */
.search-suggestion-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.72rem 1rem;color:var(--text-dark);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.045);transition:background .18s ease,transform .18s ease;box-sizing:border-box}.search-suggestion-item:last-child{border-bottom:0}.search-suggestion-item:hover{background:rgba(183,110,62,.07);transform:translateX(2px)}.search-suggestion-thumb{width:44px;height:44px;min-width:44px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--bg-light);color:var(--text-light)}.search-suggestion-thumb img{width:100%;height:100%;object-fit:cover;display:block}.search-suggestion-content{min-width:0;flex:1;display:flex;flex-direction:column;gap:.18rem}.search-suggestion-content strong{font-size:.86rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-suggestion-category{font-size:.68rem;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-suggestion-category i{margin-right:.28rem;color:var(--primary)}.search-suggestion-price{font-size:.76rem;font-weight:700;color:var(--primary);white-space:nowrap}.search-suggestion-arrow{color:var(--text-light);font-size:.68rem}.search-suggestion-empty{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;color:var(--text-light)}.search-suggestion-empty i{color:var(--primary)}.search-suggestion-empty div{display:flex;flex-direction:column;gap:.15rem}.search-suggestion-empty strong{color:var(--text-dark);font-size:.82rem}.search-suggestion-empty span{font-size:.72rem}
.page-scroll-toggle{position:fixed;right:18px;bottom:18px;z-index:1400;width:38px;height:38px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;background:var(--bg-white);color:var(--text-dark);box-shadow:0 5px 18px rgba(0,0,0,.14);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,background .2s ease}.page-scroll-toggle.visible{opacity:1;visibility:visible;transform:translateY(0)}.page-scroll-toggle:hover{background:var(--bg-light);transform:translateY(-1px)}.page-scroll-toggle i{font-size:.78rem}.hero-media-error{display:flex;flex-direction:column;align-items:center;gap:.45rem;color:var(--text-light);font-size:.82rem}.hero-media-error i{font-size:1.8rem;opacity:.4}@media(max-width:600px){.page-scroll-toggle{right:12px;bottom:12px;width:34px;height:34px}}


/* ============================================
   FINAL UX / ACCESSIBILITY POLISH
   ============================================ */
html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }

a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 2px;
}

/* Search: no artificial vertical focus bars; keep a refined field glow. */
.search-input-group { border-width: 1px; box-shadow: 0 8px 28px rgba(0,0,0,.055); }
.search-input-group:hover { border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.search-input-group:focus-within { border-color: color-mix(in srgb, var(--primary) 62%, var(--border)); box-shadow: 0 0 0 4px rgba(183,110,62,.08), 0 12px 32px rgba(0,0,0,.08); transform: none; }
.search-submit-btn, .search-clear-btn { outline: none !important; box-shadow: none !important; }
.search-submit-btn:focus, .search-clear-btn:focus { outline: none !important; }
.search-submit-btn:hover { transform: none; background: rgba(183,110,62,.07); border-radius: 50%; }
.search-clear-btn:hover { transform: none; }
.search-suggestions { border-color: rgba(0,0,0,.06); box-shadow: 0 18px 50px rgba(0,0,0,.12); }
.suggestion-item, .search-suggestion-item { border-bottom: 1px solid rgba(0,0,0,.045); }
.search-suggestion-item:hover, .suggestion-item:hover { transform: none; background: rgba(183,110,62,.055); }

/* Hero media: stable aspect ratio, true centered loader and polished fallback. */
.hero-banner-wrapper { background: var(--bg-gray); box-shadow: 0 16px 42px rgba(0,0,0,.08); }
.hero-banner-wrapper .hero-banner { min-height: clamp(210px, 38vw, 520px); aspect-ratio: 16 / 7; }
.hero-banner-wrapper .hero-banner img, .hero-banner-wrapper .hero-banner video { width:100%; height:100%; object-fit:cover; }
.hero-banner-wrapper .hero-banner-loading { position:absolute; inset:0; display:grid; place-items:center; }
.hero-banner-wrapper .hero-banner-loading .skeleton-loader { position:absolute; inset:0; width:100%; height:100%; }
.hero-banner-wrapper .hero-banner-loading .spinner { position:absolute; top:50%; left:50%; width:42px; height:42px; margin:-21px 0 0 -21px; z-index:3; background:rgba(255,255,255,.72); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.hero-banner-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; background:linear-gradient(135deg, rgba(183,110,62,.10), rgba(44,95,74,.12)); color:var(--text-dark); }
.hero-banner-placeholder[hidden] { display:none; }
.hero-placeholder-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:rgba(255,255,255,.72); color:var(--primary); box-shadow:0 10px 25px rgba(0,0,0,.08); margin-bottom:1rem; }
.hero-banner-placeholder h2 { font-family:'Playfair Display',serif; margin-bottom:.45rem; color:var(--secondary); }
.hero-banner-placeholder p { max-width:520px; color:var(--text-light); font-size:.92rem; }
.hero-media-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.4rem; padding:2rem; background:linear-gradient(135deg, rgba(183,110,62,.08), rgba(44,95,74,.10)); }
.hero-media-error .hero-placeholder-icon { margin-bottom:.3rem; }

/* Category affiliate CTA: larger, readable and anchored to the lower-right. */
.blog-product-details { display:flex; flex-direction:column; min-width:0; }
.category-buy-button { align-self:flex-end; margin-top:auto; min-height:46px; min-width:160px; max-width:100%; justify-content:center; padding:.75rem 1.25rem; white-space:nowrap; }
.blog-product-image a.single-image-affiliate { display:block; width:100%; height:100%; }
.blog-product-image a.single-image-affiliate img { width:100%; height:100%; object-fit:cover; display:block; }

/* Slider controls: quiet by default, clear on hover. */
.product-image-slider .slider-btn, .category-image-slider .slider-btn { width:34px; height:34px; border-radius:50%; background:rgba(20,20,20,.22); backdrop-filter:blur(5px); opacity:.38; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.product-image-slider .slider-btn:hover, .category-image-slider .slider-btn:hover { background:rgba(20,20,20,.58); opacity:.9; transform:translateY(-50%) scale(1.04); }
.product-image-slider .slider-btn:active, .category-image-slider .slider-btn:active { transform:translateY(-50%) scale(.97); }

/* Sidebars: smooth, understated navigation instead of border-like hover states. */
.nav-link, .category-link, .main-category-link, .subcategory-link { transform:none !important; border:1px solid transparent !important; }
.nav-link:hover, .category-link:hover, .main-category-link:hover, .subcategory-link:hover { transform:none !important; border-color:transparent !important; box-shadow:inset 3px 0 0 rgba(183,110,62,.55); background:rgba(183,110,62,.055) !important; }
.sidebar { transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease; }
.sidebar-overlay { transition:opacity .28s ease, visibility .28s ease; }
.sidebar-search-empty { display:flex; align-items:center; justify-content:center; gap:.55rem; padding:1.2rem 1rem; color:var(--text-light); font-size:.84rem; }
.sidebar-search-empty i { opacity:.55; }

/* Footer links: clean color/weight transition, no jumpy border. */
.footer-section a { border:0 !important; outline:none; }
.footer-section a:hover { transform:none; color:var(--primary) !important; }
.footer-section a:focus-visible { box-shadow:0 0 0 2px rgba(183,110,62,.28); border-radius:6px; }

/* Toasts: content stays above the surface and remains readable in every theme. */
.toast-container { right:1.25rem; bottom:1.25rem; width:min(420px, calc(100vw - 2.5rem)); max-width:420px; gap:.65rem; z-index:10000; }
.toast { position:relative; overflow:hidden; display:flex; align-items:center; width:100%; min-height:58px; padding:.85rem 1rem; border:1px solid rgba(255,255,255,.18); border-radius:16px; box-shadow:0 18px 45px rgba(0,0,0,.18); color:#fff !important; text-shadow:none; }
.toast::after { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:rgba(255,255,255,.72); }
.toast-content { position:relative; z-index:2; display:flex; align-items:center; gap:.75rem; width:100%; min-width:0; color:inherit; }
.toast-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; color:#fff; background:rgba(255,255,255,.14); border-radius:50%; }
.toast-text { display:block; flex:1; min-width:0; color:#fff !important; font-size:.9rem; font-weight:600; line-height:1.45; opacity:1 !important; visibility:visible !important; }
.toast.success { background:linear-gradient(135deg,#287b55,#1f6345); }
.toast.error { background:linear-gradient(135deg,#b83b32,#922c26); }
.toast.info { background:linear-gradient(135deg,#356b8a,#28566f); }
.toast.warning { background:linear-gradient(135deg,#b96b1f,#965318); }

/* Newsletter trust copy and post-subscribe state. */
.footer-unsubscribe { font-size:.76rem; color:#b9b1a8; }
.footer-unsubscribe a { color:#fff !important; text-decoration:underline; text-underline-offset:2px; }

/* Requested top/bottom control. */
.page-scroll-toggle { width:36px; height:36px; right:18px; bottom:18px; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 24px rgba(0,0,0,.14); background:var(--bg-white); color:var(--text-dark); }
.page-scroll-toggle:hover { transform:translateY(-2px); background:var(--bg-white); box-shadow:0 11px 28px rgba(0,0,0,.17); }

@media (max-width:768px){
  .hero-banner-wrapper .hero-banner { aspect-ratio:16/9; min-height:180px; }
  .category-buy-button { width:auto; min-width:145px; font-size:.84rem; padding:.7rem 1rem; }
  .toast-container { right:.75rem; left:.75rem; bottom:.85rem; width:auto; max-width:none; }
}
@media (max-width:480px){
  .category-buy-button { min-width:132px; max-width:100%; font-size:.78rem; padding:.65rem .85rem; }
  .page-scroll-toggle { width:34px; height:34px; right:12px; bottom:12px; }
}
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .sidebar, .sidebar-overlay, .toast, .search-suggestions { transition:none !important; animation:none !important; }
}
.section-subheading{max-width:760px;margin:-1rem auto 2rem;text-align:center;color:var(--text-light);font-size:.92rem;line-height:1.65}

/* Final polish: auth tabs, toasts, PWA install, hero placeholder and About social links. */
.auth-tabs{position:relative;display:flex;gap:.25rem;margin-bottom:2rem;border-bottom:1px solid var(--border);isolation:isolate}
.auth-tabs .tab-btn{position:relative;flex:1;min-height:48px;padding:.8rem 1rem;background:transparent;border:0;color:var(--text-light);font-weight:700;font-size:.92rem;cursor:pointer;transition:color .22s ease,background .22s ease}
.auth-tabs .tab-btn:hover{color:var(--text-dark);background:rgba(183,110,62,.045)}
.auth-tabs .tab-btn.active{color:var(--primary)}
.auth-tabs .tab-btn:focus-visible{outline:2px solid rgba(183,110,62,.35);outline-offset:-2px;border-radius:8px}
.auth-tab-indicator{position:absolute;left:0;bottom:-1px;width:50%;height:3px;border-radius:999px;background:var(--primary);transform:translateX(0);transition:transform .28s cubic-bezier(.22,1,.36,1);pointer-events:none}

.toast-container{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:min(390px,calc(100vw - 32px));z-index:2147483000;pointer-events:none}
.toast{pointer-events:auto;box-sizing:border-box;display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:center;column-gap:10px;width:100%;min-height:56px;height:auto;padding:10px 11px 10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:14px;box-shadow:0 16px 38px rgba(0,0,0,.18);color:#fff!important;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.toast::after{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:rgba(255,255,255,.78)}
.toast-icon{display:grid;place-items:center;width:32px;height:32px;min-width:32px;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:.9rem;line-height:1}
.toast-icon i{display:block;width:1em;height:1em;line-height:1;font-size:1em}
.toast-text{min-width:0;display:block;color:#fff!important;font-size:.88rem;font-weight:650;line-height:1.38;overflow-wrap:anywhere;word-break:normal;opacity:1!important;visibility:visible!important;text-shadow:none}
.toast-close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.72);cursor:pointer;transition:background .18s ease,color .18s ease}
.toast-close:hover{background:rgba(255,255,255,.12);color:#fff}
.toast-close:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:1px}
.toast.success{background:linear-gradient(135deg,rgba(35,112,76,.98),rgba(25,83,57,.98))}
.toast.error{background:linear-gradient(135deg,rgba(174,53,46,.98),rgba(128,39,34,.98))}
.toast.info{background:linear-gradient(135deg,rgba(48,101,132,.98),rgba(38,77,103,.98))}
.toast.warning{background:linear-gradient(135deg,rgba(181,104,27,.98),rgba(139,75,18,.98))}

.hero-banner-loading{position:absolute;inset:0;z-index:4;display:flex!important;align-items:stretch;justify-content:stretch;background:var(--bg-white);transition:opacity .38s ease,visibility .38s ease}
.hero-banner-loading.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.hero-loading-card{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,4vw,48px);box-sizing:border-box;background:linear-gradient(135deg,rgba(183,110,62,.07),rgba(44,95,74,.08))}
.hero-loading-image{position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.025) 20%,rgba(255,255,255,.55) 38%,rgba(0,0,0,.025) 56%);background-size:220% 100%;animation:heroSkeleton 1.55s ease-in-out infinite}
.hero-loading-copy{position:relative;z-index:1;display:grid;gap:9px;width:min(430px,72%)}
.hero-loading-copy span{display:block;height:10px;border-radius:999px;background:rgba(70,70,70,.10)}
.hero-loading-copy span:nth-child(1){width:72%;height:18px}.hero-loading-copy span:nth-child(2){width:92%}.hero-loading-copy span:nth-child(3){width:58%}
@keyframes heroSkeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}
.hero-banner-placeholder.is-visible{opacity:1;visibility:visible}

.pwa-install-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;flex:0 0 auto;min-height:38px;padding:.55rem .9rem;border:1px solid rgba(183,110,62,.35);border-radius:10px;background:var(--bg-white);color:var(--primary);font-weight:750;font-size:.82rem;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.08);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.pwa-install-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.12);background:var(--bg-light)}
.pwa-install-btn:disabled{opacity:.6;cursor:wait;transform:none}
.pwa-install-btn[hidden]{display:none!important}
.home-screen-tip{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.home-screen-tip .tip-content{flex:1;min-width:180px}

.about-social-links-grid{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:.8rem}
.about-social-link{display:inline-flex;align-items:center;gap:.55rem;padding:.62rem .9rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-light);color:var(--text-dark);text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.about-social-link:hover{transform:translateY(-2px);background:var(--bg-white);box-shadow:0 8px 20px rgba(0,0,0,.08);border-color:var(--border)!important}
.about-social-link i{font-size:1.05rem}.about-social-link span{font-size:.84rem;font-weight:650}.about-social-empty{color:var(--text-light);font-size:.9rem}

.category-buy-button .button-text{display:inline-block;font-weight:800;letter-spacing:.005em;line-height:1.15;color:inherit;white-space:nowrap}
.category-buy-button{margin-left:auto!important;margin-right:0!important;align-self:flex-end!important;justify-self:end!important}

@media(max-width:600px){
 .toast-container{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-width:none}
 .toast{grid-template-columns:32px minmax(0,1fr) 26px;min-height:54px;padding:9px 9px 9px 10px;border-radius:13px}
 .toast-icon{width:30px;height:30px;min-width:30px}.toast-text{font-size:.84rem}.toast-close{width:26px;height:26px}
 .home-screen-tip{align-items:flex-start}.pwa-install-btn{margin-left:auto}
 .hero-loading-copy{width:90%}
}
@media(prefers-reduced-motion:reduce){.hero-loading-image{animation:none}.auth-tab-indicator,.toast,.pwa-install-btn{transition:none}}


/* ============================================================
   FINAL FIXES - TOAST, MAIN-CATEGORY SEARCH, CATEGORY CTA, PWA TIP
   These rules intentionally live at the end of the stylesheet so earlier
   legacy/compatibility rules cannot override the final behavior.
   ============================================================ */

/* Toasts: fixed three-column layout. Never let the message collapse into
   the icon column or grow to half the viewport. */
.toast-container {
    position: fixed !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    top: auto !important;
    width: min(390px, calc(100vw - 32px)) !important;
    max-width: 390px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    pointer-events: none !important;
    z-index: 2147483000 !important;
}
.toast-container .toast {
    position: relative !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 10px 10px 10px 12px !important;
    margin: 0 !important;
    gap: 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}
.toast-container .toast-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    flex: none !important;
    border-radius: 9px !important;
    line-height: 1 !important;
}
.toast-container .toast-icon i {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    font-size: .9rem !important;
    line-height: 1 !important;
}
.toast-container .toast-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
}
.toast-container .toast-close {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 8px !important;
}
.toast-container .toast-close i { font-size: .72rem !important; line-height: 1 !important; }

/* Main-category search: hidden links must stay hidden even though legacy
   category-link rules use !important on display:flex. */
#categoriesList .main-category-link[hidden] { display: none !important; }
#categoriesList .main-category-link.is-search-hidden { display: none !important; }
#categoriesList .main-category-link:not([hidden]) { display: flex !important; }
.sidebar-search-empty { width: 100%; box-sizing: border-box; }

/* Category CTA: always bottom-right, natural width, and no ellipsis. */
.category-page .blog-product-item .blog-product-details {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    width: auto !important;
}
.category-page .blog-product-item .category-buy-button,
.category-page .blog-product-item .buy-button.category-buy-button {
    align-self: flex-end !important;
    justify-self: end !important;
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.category-page .blog-product-item .category-buy-button .button-text,
.category-page .blog-product-item .buy-button .button-text {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    flex: 0 0 auto !important;
}
.category-page .blog-product-item .category-buy-button i { flex: 0 0 auto !important; }

/* PWA quick-access card: keep Install on the same row as the instructions.
   The text area is allowed to wrap; the button is never pushed underneath. */
.home-screen-tip {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: .75rem !important;
}
.home-screen-tip .tip-content { min-width: 0 !important; width: auto !important; }
.home-screen-tip .tip-text { min-width: 0 !important; }
.home-screen-tip .tip-platform { white-space: normal !important; }
.home-screen-tip .pwa-install-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    white-space: nowrap !important;
}
@media (max-width: 600px) {
    .toast-container {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
    .toast-container .toast {
        grid-template-columns: 30px minmax(0, 1fr) 26px !important;
        column-gap: 8px !important;
        min-height: 52px !important;
        padding: 9px 8px 9px 10px !important;
    }
    .toast-container .toast-icon { width: 28px !important; min-width: 28px !important; height: 28px !important; }
    .toast-container .toast-text { font-size: .84rem !important; }
    .toast-container .toast-close { width: 26px !important; min-width: 26px !important; height: 26px !important; }
    .category-page .blog-product-item .category-buy-button { max-width: calc(100% - 4px) !important; font-size: .84rem !important; padding: .7rem 1rem !important; }
    .home-screen-tip { grid-template-columns: 24px minmax(0, 1fr) auto !important; gap: .55rem !important; padding: .6rem .7rem !important; }
    .home-screen-tip .tip-label { font-size: .6rem !important; }
    .home-screen-tip .tip-platform { font-size: .55rem !important; padding: .04rem .25rem !important; }
    .home-screen-tip .pwa-install-btn { min-height: 34px !important; padding: .45rem .65rem !important; font-size: .76rem !important; }
}
@media (max-width: 380px) {
    .home-screen-tip { grid-template-columns: 22px minmax(0, 1fr) auto !important; gap: .45rem !important; }
    .home-screen-tip .pwa-install-btn { padding: .4rem .55rem !important; font-size: .72rem !important; }
    .category-page .blog-product-item .category-buy-button { font-size: .8rem !important; padding: .65rem .8rem !important; }
}