/*
Theme Name: Osmani Optic
Theme URI: https://example.com/osmani-optic
Author: Osmani Team
Author URI: https://example.com
Description: یک قالب فروشگاهی حرفه‌ای با مگامنو، اسلایدر، استوری، پنل تنظیمات کامل، و سازگاری کامل با ووکامرس. بهینه‌شده برای Core Web Vitals و سئو تکنیکال.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: osmani
Tags: e-commerce, rtl-language-support, customizer, theme-options, accessibility-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap');

/* Kapakana Fantasy Font */
@font-face {
    font-family: 'Kapakana';
    src: url('assets/fonts/Kapakana.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* SnappPay widget font override to keep theme isolation */
.snapppay-widget-title, .snapppay-widget-description { font-family: var(--body-font) !important; }
.snapppay-widget { margin-top: 0px; }
@font-face {
    font-family: 'Yekan-Bakh';
    src: url('assets/fonts/bakh-regular.woff') format('woff'),
         url('assets/fonts/Yekan-Bakh-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Radin3';
    src: url('assets/fonts/Radin3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Enhanced Search Result Cards */
.search-result-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid #e5e7eb;
/* Search Notifications */
.search-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #3b82f6;
    min-width: 250px;
}

.search-notification.success {
    border-left-color: #10b981;
}

.search-notification.success i {
    color: #10b981;
}

.search-notification.error {
    border-left-color: #ef4444;
}

.search-notification.error i {
    color: #ef4444;
}

.search-notification.show {
    transform: translateX(0);
}

.search-notification i {
    font-size: 18px;
    color: #3b82f6;
}

.search-notification span {
    font-weight: 500;
    color: #1f2937;
}

/* Bookmarked state */
.search-result-item .bookmark-btn.bookmarked {
    background: #fef3c7 !important;
    color: #f59e0b !important;
}

.search-result-item .bookmark-btn.bookmarked:hover {
    background: #fde68a !important;
    color: #d97706 !important;
}

/* Performance optimizations */
.search-results-container {
    contain: layout style paint;
    will-change: transform;
}

.search-result-item {
    contain: layout style;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* Loading states */
.search-result-item.loading {
    opacity: 0.6;
    pointer-events: none;
}

.search-result-item.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Search term highlighting */
.search-highlight {
    background: #fef3c7;
    color: #92400e;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .search-notification {
        right: 10px;
        left: 10px;
        min-width: auto;
        transform: translateY(-100%);
    }
    
    .search-notification.show {
        transform: translateY(0);
    }
    
    .search-result-item .result-actions {
        opacity: 1;
        transform: translateY(0);
    }
}

}

.search-result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #3b82f6;
}

.search-result-item .search-result-thumbnail {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    margin: 15px;
}

.search-result-item .search-result-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.search-result-item:hover .search-result-thumbnail img {
    transform: scale(1.05);
}

.search-result-item .no-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.search-result-item .result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 18px;
}

.search-result-item:hover .result-overlay {
    opacity: 1;
}

.search-result-item .stock-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-result-item .stock-badge.in-stock {
    background: #10b981;
}

.search-result-item .stock-badge.out-of-stock {
    background: #ef4444;
}

.search-result-item .search-result-content {
    flex: 1;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-result-item .result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.search-result-item .search-result-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.4;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-item .search-result-price {
    background: #f59e0b;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-result-item .search-result-excerpt {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-item .search-result-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-result-item .meta-primary {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.search-result-item .meta-secondary {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.search-result-item .search-result-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6b7280;
}

.search-result-item .search-result-meta i {
    font-size: 12px;
    opacity: 0.7;
}

.search-result-item .search-result-type {
    background: #e5e7eb;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
    color: #374151 !important;
}

.search-result-item .result-categories {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.search-result-item .category-tag {
    background: #dbeafe;
    color: #1e40af !important;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.search-result-item .more-categories {
    background: #f3f4f6;
    color: #6b7280 !important;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.search-result-item .result-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.search-result-item .result-actions button {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-result-item .view-result-btn {
    background: #3b82f6;
    color: white;
    flex: 1;
}

.search-result-item .view-result-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.search-result-item .bookmark-btn,
.search-result-item .share-btn {
    background: #f3f4f6;
    color: #6b7280;
    padding: 8px;
}

.search-result-item .bookmark-btn:hover,
.search-result-item .share-btn:hover {
    background: #e5e7eb;
    color: #374151;
    transform: translateY(-1px);
}
@media (max-width: 1024px) {
    .woocommerce-cart .cart-collaterals .cart_totals,
    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-page .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
}
@media (max-width: 768px) {
    .woocommerce-cart .cart-collaterals,
    .woocommerce .cart-collaterals,
    .woocommerce-page .cart-collaterals { padding: 0 12px; }
    .woocommerce-cart .cart-collaterals .cart_totals .shop_table,
    .woocommerce .cart-collaterals .cart_totals .shop_table,
    .woocommerce-page .cart-collaterals .cart_totals .shop_table { width: 100% !important; }
    .woocommerce-cart .cart .actions .coupon { display: flex; flex-direction: column; gap: 8px; }
    .woocommerce-cart .cart .actions .coupon input[type="text"],
    .woocommerce-cart .cart .actions .button { width: 100% !important; }
    .woocommerce-cart .product-thumbnail img { max-width: 72px; height: auto; object-fit: cover; }
}

/* Responsive Design for Result Cards */
@media (max-width: 768px) {
    .search-result-item {
        flex-direction: column;
    }
    
    .search-result-item .search-result-thumbnail {
        width: 100%;
        height: 200px;
        margin: 0;
        border-radius: 0;
    }
    
    .search-result-item .result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .search-result-item .search-result-price {
        align-self: flex-start;
    }
    
    .search-result-item .meta-primary,
    .search-result-item .meta-secondary {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .search-result-item .result-actions {
        flex-direction: column;
    }
    
    .search-result-item .view-result-btn {
        flex: none;
    }
}

/* Animation for new results */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-result-item.animated {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Search term highlighting */
.search-highlight {
    background: #fef3c7;
    color: #92400e;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 600;
}

/* Product CTA Glassmorphism */
.cta-buttons{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.cta-buttons .osmani-add-to-cart{flex:1 1 320px}
.cta-buttons .osmani-add-to-cart form.cart{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.cta-buttons .snapppay-widget,.cta-buttons .osmani-installment{flex:1 1 320px}
.cta-buttons .osmani-vto-btn{flex:1 1 240px}

.osmani-add-to-cart .single_add_to_cart_button,
.osmani-installment,
.snapppay-widget,
.osmani-vto-btn{position:relative !important;border-radius:10px !important;border:1px solid rgba(247,166,89,.45) !important;background:linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.10)) !important;backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 24px rgba(247,166,89,.18) !important;color:#111827 !important;font-family:'Radin3', sans-serif !important;transition:all .25s ease !important}

.osmani-add-to-cart .single_add_to_cart_button{height:var(--cta-height) !important;line-height:calc(var(--cta-height) - 2px) !important;padding:0 16px !important;display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;box-sizing:border-box !important;font-weight:700 !important}
.osmani-add-to-cart .qty{height:44px !important;border-radius:12px !important}

.osmani-vto-btn{height:var(--cta-height) !important;line-height:calc(var(--cta-height) - 2px) !important;right: 2px;padding:10 15px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:.55rem !important;width:100% !important;box-sizing:border-box !important;font-weight:700 !important}
.osmani-vto-btn i{font-size:1rem !important}

.osmani-installment{display:inline-flex !important;align-items:center !important;gap:.55rem !important;padding:.9rem 1.2rem !important;font-weight:700 !important}
.osmani-installment img{height:18px !important}

.snapppay-widget{padding:12px 14px !important}
.snapppay-widget-title,.snapppay-widget-description{color:#1f2937 !important}

.osmani-add-to-cart .single_add_to_cart_button:hover,
.osmani-installment:hover,
.snapppay-widget:hover,
.osmani-vto-btn:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 14px 28px rgba(247,166,89,.26) !important;background:linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.12)) !important;transform:translateY(-1px) !important}

.osmani-add-to-cart .single_add_to_cart_button:active,
.osmani-installment:active,
.snapppay-widget:active,
.osmani-vto-btn:active{transform:translateY(0) scale(.995) !important}

/* CTA accent ring */
.osmani-add-to-cart .single_add_to_cart_button::before,
.osmani-installment::before,
.snapppay-widget::before,
.osmani-vto-btn::before{content:'' !important;position:absolute !important;inset:0 !important;border-radius:inherit !important;padding:1px !important;background:linear-gradient(135deg, rgba(247,166,89,.55), rgba(247,166,89,.15)) !important;mask:linear-gradient(#000, #000) content-box, linear-gradient(#000, #000) !important;mask-composite:exclude !important}

/* Responsive CTA layout */
@media (max-width: 992px){
  .cta-buttons{gap:10px}
  .cta-buttons .osmani-add-to-cart,
  .cta-buttons .snapppay-widget,
  .cta-buttons .osmani-installment,
  .cta-buttons .osmani-vto-btn{flex:1 1 48%}
  .osmani-add-to-cart form.cart{flex-wrap:wrap}
  .osmani-add-to-cart .single_add_to_cart_button{flex:1 0 auto}
}

@media (max-width: 640px){
  .cta-buttons{flex-direction:column}
  .cta-buttons .osmani-add-to-cart,
  .cta-buttons .snapppay-widget,
  .cta-buttons .osmani-installment,
  .cta-buttons .osmani-vto-btn{flex:1 1 100%}
  .osmani-add-to-cart form.cart{gap:10px}
  .osmani-add-to-cart .qty{width:100% !important}
  .osmani-add-to-cart .single_add_to_cart_button{width:100% !important}
}

/* CTA Grid layout: left 50% SnappPay, right stacked two buttons */
.cta-buttons{--cta-height:64px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:var(--cta-height) var(--cta-height);gap:12px;align-items:stretch}
.cta-buttons .snapppay-widget,.cta-buttons .osmani-installment{grid-column:1 / 2;grid-row:1 / span 2;align-self:stretch;height:100% !important;display:flex;align-items:center;justify-content:center}
.cta-buttons .osmani-add-to-cart{grid-column:2 / 3;grid-row:1}
.cta-buttons .osmani-vto-btn{grid-column:2 / 3;grid-row:2}
.cta-buttons .osmani-add-to-cart form.cart{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;height:var(--cta-height)}
.osmani-add-to-cart .single_add_to_cart_button{height:var(--cta-height) !important;width:100% !important}
.osmani-add-to-cart .qty{height:calc(var(--cta-height) - 20px) !important}

@media (max-width: 992px){
  .cta-buttons{--cta-height:60px;gap:10px}
}

@media (max-width: 640px){
  .cta-buttons{display:flex;flex-direction:column}
  .cta-buttons .snapppay-widget,.cta-buttons .osmani-installment,.cta-buttons .osmani-add-to-cart,.cta-buttons .osmani-vto-btn{width:100%}
  .cta-buttons .osmani-add-to-cart form.cart{grid-template-columns:1fr}
  .osmani-add-to-cart .single_add_to_cart_button{width:100% !important}
}

}

/* ===== SHOP FILTERS RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    .shop-filters {
        display: none;
    }
    
    .mobile-filter-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 1rem;
    }
    
    .mobile-filters-panel {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: white;
        z-index: 1000;
        transition: right 0.3s ease;
        overflow-y: auto;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    }
    
    .mobile-filters-panel.active {
        right: 0;
    }
    
    .mobile-filters-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #eee;
        background: #f8f9fa;
    }
    
    .close-panel {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #666;
    }
    
    .panel-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .panel-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .products-section {
        width: 100%;
    }
    
.products-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

.tryon-modal-container { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; }
.tryon-modal-container .modal-body { width: 100%; height: calc(100vh - 64px); padding: 0; }
.tryon-modal-container #root { width: 100%; height: 100%; }
@media (max-width: 768px) {
  .tryon-modal-container .modal-body { height: calc(100vh - 56px); }
}
    
    .products-count {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .filter-options {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .filter-option {
        width: 100%;
    }
    
    .price-range-inputs {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .price-range-inputs input {
        width: 100%;
    }
}

/* Filter Dropdown Styles */
.filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.filter-option.active .filter-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter-dropdown a {
    display: block;
    padding: 0.75rem 1rem;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.filter-dropdown a:hover {
    background-color: #f8f9fa;
}

.filter-dropdown a:last-child {
    border-bottom: none;
}

/* Category Description Styles */
.category-description {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border-left: 4px solid var(--primary-color);
    position: relative;
}

.category-description h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.category-description-wrapper {
    position: relative;
    max-height: 320px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.category-description-wrapper.expanded {
    max-height: 2000px;
}

.category-description-content {
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
     margin-top: 8% !important;
}

.category-description-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, #f8f9fa);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.category-description-wrapper.expanded .category-description-fade {
    opacity: 0;
}

.category-description-toggle {
    margin-top: 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.category-description-toggle i {
    transition: transform 0.3s ease;
}

.category-description-toggle.expanded i {
    transform: rotate(180deg);
}

/* Responsive adjustments for category description */
@media (max-width: 768px) {
    .category-description-wrapper {
        max-height: 250px;
    }
    
    .category-description-fade {
        height: 60px;
    }
    
    .category-description-toggle {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .category-description-wrapper {
        max-height: 200px;
    }
    .product-main-section {
    margin-bottom: 0rem !important;
}
.product-tabs-section {
    margin-top: 1rem !important;
}
    .category-description-fade {
        height: 50px;
    }
    
    .category-description {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .category-description h3 {
        font-size: 1.3rem;
    }
    
    .category-description-content {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .category-description-toggle {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .category-description {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .category-description h3 {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    
    .category-description-wrapper {
        max-height: 250px;
    }
    
    .category-description-fade {
        height: 60px;
    }
    
    .category-description-toggle {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .category-description {
        padding: 0.8rem;
    }
    
    .category-description h3 {
        font-size: 1.2rem;
    }
    
    .category-description-wrapper {
        max-height: 200px;
    }
    
    .category-description-fade {
        height: 50px;
    }
}

/* Products Header */
.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.woocommerce-mini-cart.cart_list.product_list_widget {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

.woocommerce-mini-cart .mini_cart_item {
    position: relative;
    display: grid !important;
    grid-template-columns: 72px 1fr 28px;
    gap: 12px;
    align-items: start;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.osmani-mini-cart-img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.osmani-mini-cart-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

.osmani-mini-cart-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    line-height: 1.5 !important;
}

.osmani-mini-cart-content .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    color: #111 !important;
}
.digits-form_container, .digits-form_page {
    background-color: #ffffff00 !important;
}
.digits-form_heading {
    color: #ffffff !important;font-family: var(--body-font) !important;
}
.modal-tabs__label{font-family: var(--body-font) !important;}
.modal-tab-btn{font-family: var(--body-font) !important;padding: 15px; border-radius: 30%;}
.digits-form_container * {font-family: var(--body-font) !important;
}
.osmani-mini-cart-attrs .variation {
    margin: 4px 0 0 0 !important;
    display: grid !important;
    grid-template-columns: 30px 1fr;
    row-gap: 6px !important;
    column-gap: 0px !important;
    align-items: start !important;
    direction: rtl;
}

.osmani-mini-cart-attrs .variation dt {
    margin: 0 !important;
    color: #666 !important;
    font-weight: 500 !important;
    float: none !important;
    display: block !important;
    grid-column: 1;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
}

.osmani-mini-cart-attrs .variation dd {
    margin: 0 !important;
    color: #111 !important;
    font-weight: 600 !important;
    float: none !important;
    display: block !important;
    grid-column: 2;
    writing-mode: horizontal-tb !important;
    word-break: break-word;
}

.osmani-mini-cart-price {
    margin-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.osmani-mini-cart-price .quantity {
    background: rgba(255,255,255,0.06);
    color: #111;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
}

.osmani-mini-cart-remove {
    position: static !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 5px !important;
}

.osmani-mini-cart-remove .remove {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #111 !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .woocommerce-mini-cart .mini_cart_item {
        grid-template-columns: 56px 1fr 24px;
        gap: 10px;
        padding: 10px 10px;
    }
    .osmani-mini-cart-img,
    .osmani-mini-cart-img img {
        width: 56px !important;
        height: 56px !important;
    }
    .osmani-mini-cart-attrs .variation { grid-template-columns: 56px 1fr;display: none !important; }
}

@media (max-width: 768px) {
    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-page .cart-collaterals .cart_totals {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        clear: both !important;
    }

    .woocommerce .cart-collaterals,
    .woocommerce-page .cart-collaterals {
        display: block !important;
    }

    .woocommerce .cart-collaterals .cross-sells,
    .woocommerce-page .cart-collaterals .cross-sells {
        float: none !important;
        width: 100% !important;
    }
}

@media (max-width: 992px) {
    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-page .cart-collaterals .cart_totals {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        clear: both !important;
    }
    .woocommerce .cart-collaterals,
    .woocommerce-page .cart-collaterals {
        display: block !important;
    }
    .woocommerce .cart-collaterals .cross-sells,
    .woocommerce-page .cart-collaterals .cross-sells {
        float: none !important;
        width: 100% !important;
    }
}

.products-count {
    font-weight: 600;
    color: #333;
}

.products-sort select {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}

/* No Products Found */
.no-products-found {
    text-align: center;
    padding: 3rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 2rem 0;
}

.no-products-found h3 {
    color: #666;
    margin-bottom: 1rem;
}

.no-products-found p {
    color: #999;
}

/* Filter Button Styles */
.btn-apply-filters {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-apply-filters:hover {
    background: var(--primary-color-dark);
}

/* Price Input Improvements */
.price-inputs {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.price-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 120px;
}

.price-input input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

.price-input input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.price-value-display {
    font-size: 0.9rem;
    color: #666;
    white-space: nowrap;
}

/* Filter Options Improvements */
.filter-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-option {
    position: relative;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
}

.filter-option:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.filter-option__main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-icon {
    color: var(--primary-color);
    font-size: 1rem;
}

.filter-option__text {
    flex: 1;
}

.filter-option__text .label {
    font-size: 0.85rem;
    color: #666;
    display: block;
}

.filter-option__text .value {
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.add-icon {
    color: var(--primary-color);
    font-weight: bold;
    margin-left: 0.5rem;
}

/* Price Filter Box Improvements */
.price-filter-box {
    flex-basis: 30%;
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.filter-box__title {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

:root {
    --header-height: 4.5rem;
    --primary-color: #f7a659;
    --primary-color-alt: #ffe8d1;
    --dark-color: #1a1a1a;
    --dark-color-alt: #2c2c2c;
    --body-color-dark: #000000;
    --body-color-light: #ffffff;
    --container-color-light: #f5f5f5;
    --text-color-light: #ffffff;
    --text-color-dark: #333;
    --text-color-muted: #d1d1d1;
    --body-font: 'Yekan-Bakh', sans-serif;
    --z-modal: 1000;
    --z-tooltip: 10;
    --z-fixed: 100;
}

/* ============================================= */
/*                   0. BASE & GLOBAL STYLES     */
/* ============================================= */
* { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--body-font);
    font-size: .938rem;
    background-color: var(--body-color-dark);
    color: var(--text-color-light);
    direction: rtl;
    transition: background-color .4s;
}
body.blur #main-content,
body.blur .footer { 
    filter: blur(5px);
    transition: filter .4s;
}
.bestsellers__title-part h2 {
     color: hsl(0, 0%, 100%);
}
.category-carousel-section h2{ text-decoration: none; color: #ccc; }
.ro__description {
    color: hsl(0, 0%, 100%);
}
h1, h2, h3, h4 { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { font-family: 'Radin3', sans-serif !important; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 1rem; }
.section__title-container { text-align: center; margin-bottom: 3rem; }
.section__title { font-size: 2.25rem; font-weight: 900; margin-bottom: 0.5rem; }
.section__subtitle { color: var(--primary-color); letter-spacing: 2px; font-weight: 500; }
.btn { display: inline-block; padding: 0.8rem 1.8rem; border-radius: 30px; font-weight: 500; cursor: pointer; border: none; transition: .3s; font-family: var(--body-font);}
.btn--primary { background-color: var(--primary-color); color: var(--dark-color); }
.btn--primary:hover { filter: brightness(1.1); }
.btn--secondary { background-color: var(--primary-color); color: var(--dark-color); }
.btn--secondary:hover { background-color: #e0954e; }
.btn--secondary-light { background-color: #fff; color: var(--dark-color); }
.btn--outline { background-color: transparent; border: 1px solid #d08b53; color: #d08b53; }
.btn--outline:hover { background-color: #d1762b; color: var(--body-color-light); }
.btn--dark { background-color: var(--dark-color); color: var(--text-color-light); border: 2px solid var(--dark-color); }
.btn--dark:hover { background-color: #333; }
.color-primary { color: var(--primary-color); }

/* .footer h1, h2, h3, h4 {
color: #fff;
} */
/* ============================================= */
/*                  1. SHARED COMPONENTS         */
/* ============================================= */

/* ----- 1A. HEADER & NAVIGATION ----- */
.header { width: 100%; background-color: rgb(10 10 10 / 85%) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); position: fixed; top: 0; left: 0; z-index: var(--z-fixed); border-bottom: 0px solid rgba(255, 255, 255, 0.1); }
.nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; }
.nav__logo { flex-shrink: 0; }
.nav__logo img { max-height: 40px;    max-width: fit-content; }
.nav__menu { flex: 1; display: flex; justify-content: center; margin: 0 2rem; }
.nav__list { display: flex ; gap: 2rem; align-items: stretch; flex-wrap: nowrap; justify-content: center; align-content: space-around; }
.nav__item { white-space: nowrap; }
.nav__link { color: var(--text-color-muted); transition: .3s; display: flex; align-items: center; gap: .25rem; white-space: nowrap; }
.nav__link:hover, .nav__item.active .nav__link { color: var(--primary-color); }
.nav__link-icon { font-size: .7rem; transition: .3s; }
.megamenu-parent:hover .nav__link-icon { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.nav__icon { font-size: 1.2rem; cursor: pointer; transition: .3s; }
.nav__icon:hover { color: var(--primary-color); }
.nav__toggle { font-size: 1.5rem; color: var(--text-color-light); display: none; cursor: pointer; }
/* body.lightee .btn--primary {
  position: absolute !important;
} */
/* ----- 1B. MEGA MENU (Desktop) ----- */
.megamenu-parent { position: relative; }
.mega-menu { position: absolute; top: 100%; right: 0; background: rgba(30, 30, 30, 0.95); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 1.5rem; display: flex; gap: 1.5rem; width: 700px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .3s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); z-index: 100; }
.megamenu-parent:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu__column { flex: 1; padding: 1rem; }
.mega-menu__column-title { color: var(--primary-color); margin-bottom: 1rem; padding-bottom: .5rem; font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mega-menu__column-title a { color: var(--primary-color); text-decoration: none; transition: .3s; }
.mega-menu__column-title a:hover { color: white; }
.mega-menu__column h4 { color: var(--primary-color); margin-bottom: 1rem; padding-bottom: .5rem; font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mega-menu__list { list-style: none; margin: 0; padding: 0; }
.mega-menu__column ul li a, .mega-menu__list li a { display: block; padding: 0.7rem 0; color: var(--text-color-muted); transition: .3s; font-size: 0.95rem; text-decoration: none; }
.mega-menu__column ul li a:hover, .mega-menu__list li a:hover { color: white; padding-right: 8px; }
.mega-menu__column ul li a i, .mega-menu__list li a i { margin-left: 0.5rem; font-size: 0.7rem; }
.mega-menu__image { flex-basis: 220px; flex-shrink: 0; }
.mega-menu__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

/* ----- 1C. MODALS & OVERLAYS ----- */
.modal-overlay, .filter-modal-overlay, .panel-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.8); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    z-index: var(--z-modal); 
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
    opacity: 0; 
    visibility: hidden; 
    transition: opacity .4s, visibility .4s; 
}
.modal-overlay.active, .filter-modal-overlay.active, .panel-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}

/* Prevent page scroll while any modal is open */
body.modal-open { 
    overflow: hidden; 
}

/* ----- TRY-ON MODAL CONTAINER (placed outside overlay) ----- */
.tryon-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001; /* ensure above overlay/backdrop */
    width: clamp(540px, 92vw, 860px);
    max-width: 860px;
    min-width: 540px;
    max-height: clamp(540px, 85vh, 860px);
    min-height: 540px;
    padding: 16px;
    border-radius: 20px;
    color: var(--light-color);
    /* Glassmorphism */
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px rgba(255,255,255,0.06);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tryon-modal__content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .tryon-modal__content { grid-template-columns: 1fr; }
    .tryon-modal-container { width: 95vw; max-height: 85vh; padding: 12px; }
}

/* Search Overlay Enhanced Styles */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 50px 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-overlay .search-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.search-overlay .search-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg) scale(1.1);
}

.search-container {
    width: 100%;
    max-width: 900px;
    height: 80vh;
    max-height: 700px;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    transform: translateY(-50px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideUp 0.5s ease-out;
    display: flex;
    flex-direction: column;
}

.search-overlay.active .search-container {
    transform: translateY(0) scale(1);
}

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

.search-box { 
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%; 
    padding: 2rem;
    background: linear-gradient(135deg, #f7f7f7 0%, #e8e8e8 100%);
    border-bottom: 1px solid #e0e0e0;
}
.back-to-search-btn {display: none !important; }
.search-box input { 
    width: 100%; 
    padding: 20px 60px 20px 24px; 
    background: white; 
    border: 2px solid #e0e0e0; 
    border-radius: 16px; 
    color: #333; 
    font-size: 18px; 
    font-family: var(--body-font); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    direction: rtl;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.search-box input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 8px 30px rgba(247, 166, 89, 0.15);
    transform: translateY(-2px);
}

.search-box input::placeholder {
    color: #999;
    font-size: 16px;
}

.search-box i { 
    position: absolute; 
    right: 24px; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 20px; 
    color: #666; 
    pointer-events: none;
}

/* Back to Search Button Styles */
.back-to-search-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(247, 166, 89, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.back-to-search-btn:hover {
    background: #e0954e;
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(247, 166, 89, 0.4);
}

.back-to-search-btn i {
    font-size: 16px;
    position: static;
    transform: none;
}

@media (max-width: 768px) {
    .back-to-search-btn {
        bottom: 20px;
        right: 20px;
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .back-to-search-btn i {
        font-size: 14px;
    }
}

/* Search Results Enhanced Styles */
.search-results-container {
    background: white;
    flex: 1;
    display: none;
    flex-direction: column;
    animation: fadeInUp 0.3s ease-out;
    overflow: hidden;
    min-height: 0; /* اجازه کوچک شدن به flex items */
}

.search-results-container.show {
    display: flex;
}

/* رفع مشکل موبایل - تغییر flex behavior */
@media (max-width: 768px) {
    .search-results-container {
        flex: none; /* حذف flex: 1 در موبایل */
        height: auto; /* ارتفاع خودکار */
        min-height: 300px; /* حداقل ارتفاع برای نمایش نتایج */
        max-height: calc(100vh - 200px); /* حداکثر ارتفاع با در نظر گیری header و tabs */
        overflow-y: auto; /* اسکرول عمودی برای محتوای اضافی */
        overflow-x: hidden; /* مخفی کردن اسکرول افقی */
    }
}

@media (max-width: 480px) {
    .search-results-container {
        min-height: 250px;
        max-height: calc(100vh - 180px);
    }
}

.search-results-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 10;
}

.search-results-header h3 {
    color: #333;
    font-size: 18px;
    margin: 0;
    font-weight: 600;
}

.results-count {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    background: rgba(247, 166, 89, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.search-results-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.search-results-list::-webkit-scrollbar {
    width: 6px;
}

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

.search-results-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.search-results-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.search-result-item {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    align-items: flex-start;
    position: relative;
}

.search-result-item:hover {
    background: #f8f9fa;
    transform: translateX(-4px);
    box-shadow: inset 4px 0 0 var(--primary-color);
}

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

.search-result-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-result-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.search-result-item:hover .search-result-thumbnail img {
    transform: scale(1.05);
}

.search-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.search-result-title {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.search-result-item:hover .search-result-title {
    color: var(--primary-color);
}

.search-result-excerpt {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
}

.search-result-type {
    background: linear-gradient(135deg, var(--primary-color), #e0954e);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-price {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 15px;
    background: rgba(247, 166, 89, 0.1);
    padding: 4px 10px;
    border-radius: 8px;
}

.search-result-date {
    color: #999;
    font-size: 12px;
    margin-left: auto;
}

/* Loading Animation Enhanced */
.search-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px;
    color: #666;
    flex-direction: column;
    background: white;
}

.search-loading.show {
    display: flex;
}
}

.search-loading i {
    font-size: 32px;
    color: var(--primary-color);
    animation: spin 1s linear infinite;
}

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

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

.search-loading span {
    font-size: 16px;
    font-weight: 500;
}

/* Load More Button Enhanced */
.load-more-container {
    display: none;
    text-align: center;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    background: #f8f9fa;
}

.load-more-container.show {
    display: block;
}

.load-more-btn {
    background: linear-gradient(135deg, var(--primary-color), #e0954e);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(247, 166, 89, 0.3);
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247, 166, 89, 0.4);
}

.load-more-btn:disabled {
    background: #e0e0e0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    color: #999;
}

/* Trending Hashtags Enhanced */
.trending-hashtags { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    justify-content: center; 
    padding: 20px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.trending-hashtags a { 
    color: #666; 
    background: white; 
    padding: 8px 16px; 
    border-radius: 20px; 
    font-size: 14px; 
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.trending-hashtags a:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(247, 166, 89, 0.3);
    border-color: var(--primary-color);
}

/* No Results Message Enhanced */
.no-results {
    text-align: center;
    padding: 60px 32px;
    color: #666;
    background: white;
}

.no-results i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 20px;
    opacity: 0.7;
}

.no-results h3 {
    color: #333;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
}

.no-results p {
    font-size: 16px;
    margin: 0;
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}

/* Responsive Design Enhanced */
@media (max-width: 768px) {
    .search-overlay {
        padding: 20px 10px;
    }
    
    .search-container {
        width: 100%;
        border-radius: 16px;
        max-height: 90vh;
    }
    
    .search-overlay .search-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .search-box {
        padding: 16px;
    }
    
    .search-box input {
        padding: 16px 50px 16px 20px;
        font-size: 16px;
    }
    
    .search-box i {
        right: 20px;
        font-size: 18px;
    }
    
    .search-result-item {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    
    .search-result-thumbnail {
        width: 100%;
        height: 120px;
    }
    
    .search-results-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 16px;
    }
    
    .trending-hashtags {
        gap: 8px;
        padding: 16px;
    }
    
    .trending-hashtags a {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {

    .search-container {
        width: 100%;
        border-radius: 12px;
        margin: 10px;
    }
    
    .search-box {
        padding: 12px;
    }
    
    .search-result-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .search-result-date {
        margin-left: 0;
    }
    
    .load-more-container {
        padding: 16px;
    }
    
    .no-results {
        padding: 40px 20px;
    }
    .result-header {flex-direction: column !important;}
}

/* ----- 1D. FOOTER ----- */
.footer { background-color: var(--dark-color-alt); padding-top: 8rem; position: relative; margin-top: 10rem;}
.floating-contact-bar { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 1100px; background-color: #333; border-radius: 1rem; padding: 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 1rem; }
.floating-contact-bar > div { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.floating-contact-bar i { font-size: 1.5rem; color: var(--primary-color); background-color: rgba(247, 166, 89, 0.1); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; }
.floating-contact-bar h4 { font-size: .9rem; color: #ffffff;} .floating-contact-bar span { font-size: .8rem; color: var(--text-color-muted); }
.footer__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding-bottom: 4rem; }
.footer__col h4 { margin-bottom: 1rem; font-size: 1.1rem;color: #ffffff; }
.footer__col p, .footer__col li, .footer__col span { color: var(--text-color-muted); font-size: .9rem; line-height: 1.8; }
.footer__col li { margin-bottom: .5rem; }
.footer__col li a:hover { color: var(--primary-color); padding-right: 5px; }
.newsletter-form { display: flex; margin: 1rem 0; }
.newsletter-form input { width: 100%; padding: .8rem; border: none; border-radius: 0 8px 8px 0; background-color: #444; color: white; }
.newsletter-form button { background-color: var(--primary-color); border: none; padding: 0 1rem; border-radius: 8px 0 0 8px; cursor: pointer; font-size: 1.2rem; color: var(--dark-color); }
.footer__bottom { background-color: #111; padding: 1.5rem 0; }
.footer__bottom-content { display: flex; justify-content: space-between; align-items: center; color: var(--text-color-muted); font-size: .85rem; }
.social-icons { display: flex; gap: 1rem; } .social-icons a { font-size: 1.2rem; }

/* ----- 1E. SCROLL UP BUTTON ----- */
.scrollup { position: fixed; right: 1rem; bottom: -20%; background-color: var(--primary-color); color: var(--dark-color); padding: .5rem .8rem; border-radius: .4rem; z-index: var(--z-tooltip); transition: .4s; }
.scrollup:hover { background-color: #e0954e; }
.show-scroll { bottom: 3rem; }


/* ============================================= */
/*                BLOG SINGLE PAGE STYLES       */
/* ============================================= */
.blog-single {
    padding-top: var(--header-height);
    min-height: 100vh;
    background: #000;
}

/* Breadcrumb Section */
.breadcrumb-section {
    background: rgba(26, 26, 26, 0.95);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb-item {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item:hover {
    color: var(--primary-color);
}

.breadcrumb-item.active {
    color: #fff;
    font-weight: 500;
}

.breadcrumb-separator {
    color: #666;
    margin: 0 0.25rem;
}

/* Hero Section */
.blog-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.blog-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.blog-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.6) 100%);
    z-index: 2;
}

.blog-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 2rem 0;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.blog-category {
    background: var(--primary-color);
    color: #000;
    padding: 0.5rem 1.25rem;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-date,
.blog-read-time {
    background: rgba(255,255,255,0.15);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}

.blog-title {
    color: white;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    text-shadow: 0 4px 8px rgba(0,0,0,0.3);
    max-width: 800px;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255,255,255,0.1);
    padding: 1rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 400px;
}

.author-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid white;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.author-info {
    color: white;
}

.author-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.author-role {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 400;
}

/* Content Wrapper */
.blog-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 1rem;
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 4rem;
    align-items: start;
}

/* Main Article Content */
.blog-article {
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 3rem;
    margin-bottom: 3rem;
}

.article-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 2rem;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    color: #fff;
    margin: 2rem 0 1rem 0;
    font-weight: 700;
}

.article-content h2 {
    font-size: 1.8rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
}

.article-content h3 {
    font-size: 1.5rem;
}

.article-content h4 {
    font-size: 1.3rem;
}

/* Product Showcase */
.product-showcase {
    background: linear-gradient(135deg, rgba(247, 166, 89, 0.1) 0%, rgba(247, 166, 89, 0.05) 100%);
    border: 1px solid rgba(247, 166, 89, 0.2);
    border-radius: 1.5rem;
    padding: 2.5rem;
    margin: 3rem 0;
    text-align: center;
}

.product-showcase h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.product-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(247, 166, 89, 0.2);
}

/* Disabled options style */
.color-dot-single.disabled,
.size-item.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}
.color-dot-single.disabled::after,
.size-item.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 2px;
    background: #555;
    transform: translate(-50%, -50%) rotate(45deg);
}

.product-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.product-item h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.product-item .price {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 700;
}

/* =========================================
   NEW CART PAGE STYLES (Glassmorphism & Sticky)
   ========================================= */

/* Global Wrapper */
.cart-page-wrapper {
    max-width: 1200px;
    margin: 40px auto 30px;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Glassmorphism / Card Base */
.glassmorphism-box {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
    padding: 25px;
    position: relative;
    overflow: hidden;
}

/* 1. Product List Styles */
.cart-items-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cart-product-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
}

.cart-product-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f9f9f9;
}

.cart-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-product-details {
    flex-grow: 1;
}

.cart-product-details .product-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.cart-product-details .product-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.cart-product-details .product-meta {
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
}

.cart-product-details .product-price {
    font-weight: 700;
    color: #333;
}

.cart-product-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Quantity Input */
.quantity-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.quantity-btn {
    background: #fff;
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #555;
    transition: background 0.2s;
}

.quantity-btn:hover {
    background: #f5f5f5;
}

.quantity-input {
    width: 40px;
    text-align: center;
    border: none;
    -moz-appearance: textfield;
    font-weight: 700;
    color: #333;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-remove-item {
    color: #999;
    font-size: 18px;
    transition: color 0.3s;
}

.btn-remove-item:hover {
    color: #e53935;
}

/* 2. Address Card */
.cart-section-card .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.cart-section-card .header-icon {
    width: 40px;
    height: 40px;
    background: #fff3e0;
    color: #ff9800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.cart-section-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #333;
}

.address-content p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.btn-edit-address {
    display: inline-block;
    background: #f5f5f5;
    color: #555;
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-edit-address:hover {
    background: #e0e0e0;
    color: #333;
}

/* 3. Shipping Methods */
.shipping-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.shipping-method-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 25px;
    border: 1px solid #ffcc80; /* Orange border like screenshot */
    background: #fff8e1; /* Light orange bg */
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    min-height: 80px;
    height: auto;
}

/* Inactive state needs different style? Screenshot shows both orange */
/* But usually inactive is white. Let's make inactive white with gray border */
.shipping-method-card:not(.active) {
    background: #fff;
    border-color: #eee;
}

.shipping-method-card input[type="radio"]{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    border:2px solid #ff9800;
    border-radius:50%;
    background:#fff;
    position:relative;
    flex-shrink:0;
}
.shipping-method-card input[type="radio"]:checked::after{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ff9800;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

.shipping-check{display:none !important;}

.shipping-info {
    flex-grow: 1;
    text-align: right;
}

.shipping-name {
    font-weight: 800;
    color: #333;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}

.shipping-desc {
    font-size: 13px;
    color: #777;
    white-space: nowrap; /* Keep on one line if possible */
}

.shipping-icon {
    width: 60px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shipping-icon img {
    max-height: 40px;
    width: auto;
}

/* 4. Sticky Footer */
.cart-sticky-footer {
    position: sticky;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between Actions (Left) and Summary (Right) */
    padding: 15px 40px;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    margin-top: 20px;
}

/* Left Side: Actions (Checkout Button + Coupon) */
.cart-actions-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    order: 1; /* Left side in LTR, but we are RTL so this is actually Right? No, Flex order follows direction. */
    /* In RTL: order 1 is Right, order 2 is Left. */
    /* Screenshot: Green Button (Left), Coupon (Next to it), Summary (Right) */
    /* So in RTL code structure: Actions should be first (Right), Summary second (Left)? */
    /* Wait, Flexbox in RTL: Start is Right. */
    /* Screenshot shows: [Green Button] [Red Coupon] ... [Totals] */
    /* That means Buttons are on the LEFT visually. */
    /* In RTL, Left is Flex-End. */
}
/* Let's force order visually using flex-direction or just rely on DOM order */
/* DOM: Actions, Summary. RTL: Actions(Right), Summary(Left). */
/* We want Actions on Left. So Summary(Right), Actions(Left). */
/* Swap DOM order or use flex-direction: row-reverse? */
/* Better to swap DOM content in PHP? I did that in previous step. */
/* PHP Structure: Actions, Summary. */
/* RTL: Actions (Right), Summary (Left). */
/* Screenshot: Actions (Left), Summary (Right). */
/* So we need to reverse them in CSS */

.cart-sticky-footer {
    flex-direction: row-reverse; /* Put Actions on Left, Summary on Right in RTL */
}

.cart-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wc-proceed-to-checkout {
    margin: 0;
    padding: 0;
}

.wc-proceed-to-checkout a.checkout-button {
    background: #7cb342 !important;
    color: white !important;
    padding: 12px 35px !important;
    border-radius: 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    min-width: fit-content;
    flex-shrink: 0;
}

.coupon-wrapper {
    margin: 0;
}

.coupon-input-group{
    background:#f5f5f5;
    border-radius:40px;
    padding:6px 6px 6px 15px;
    display:flex;
    align-items:center;
    gap:8px;
}

.coupon-input-group input {
    border: none;
    background: transparent;
    padding: 0 15px;
    font-size: 13px;
    width: 100px;
    color: #555;
    outline: none;
}

.coupon-input-group .btn-apply {
    background: #e53935;
    color: white;
    border: none;
    padding: 8px 25px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
ul#shipping_method{display:flex;flex-wrap:wrap;gap:20px;margin:0;padding:0;list-style:none;}
ul#shipping_method li{flex:1 1 calc(50% - 20px);max-width:calc(50% - 20px);background:#fff8e1;border:1px solid #ffcc80;border-radius:15px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;}
ul#shipping_method li label{flex:1;margin:0 12px;color:#333;font-weight:800;}
ul#shipping_method li input[type="radio"]{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:2px solid #ff9800;border-radius:50%;background:#fff;position:relative;flex-shrink:0;}
ul#shipping_method li input[type="radio"]:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:#ff9800;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
@media (max-width: 992px){ul#shipping_method li{flex:1 1 100%;max-width:100%;}}


/* Right Side: Summary */
.cart-summary-bar {
    display: flex;
    align-items: center;
    gap: 25px;
    order: 2;
    flex-wrap: wrap;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    white-space: nowrap;
}

.summary-item .label {
    font-weight: 700;
    color: #000;
}

.summary-item .value {
    font-weight: 800;
    color: #7cb342; /* Green for all values in screenshot? No, some black. */
}

/* Specific Colors from Screenshot */
.summary-item.total-payable .value { color: #7cb342; font-size: 16px; }
.summary-item.discount .value { color: #7cb342; }
.summary-item.subtotal .value { color: #7cb342; }
.summary-item.item-count .value { color: #d32f2f; /* Red for count? Screenshot shows Red text '3 عدد' */ }
.summary-item.item-count .label { color: #000; }




/* Mobile/Tablet Override for Cart Totals */
@media (max-width: 992px) {
    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-page .cart-collaterals .cart_totals {
        float: none !important;
        width: 100% !important;
        display: block !important;
        margin-top: 20px; /* Add spacing on mobile */
    }
    
    /* Ensure Coupon Button is Visible */
    .coupon-input-group .btn-apply {
        white-space: nowrap;
        min-width: fit-content;
    }
}

/* Responsive */
@media (max-width: 992px) {
.osmani-mini-cart .woocommerce-mini-cart-item {
    grid-template-columns: 5px 1fr 224px !important;
}

    .cart-sticky-footer {
        flex-direction: column;
        height: auto;
        padding: 20px;
        gap: 20px;
        position: static !important;
        bottom: auto !important;
    }
    
    .cart-actions-bar,
    .cart-summary-bar {
        width: 100%;
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .cart-summary-bar {
        order: 1; /* Summary first */
    }
    .cart-actions-bar {
        order: 2; /* Buttons second */
    }

    .summary-item {
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        display: flex;
        flex-direction: row; /* Ensure label and value are in a row */
        align-items: center;
        white-space: normal; /* Allow wrapping if needed */
    }
    .summary-item:last-child {
        border-bottom: none;
    }

    .wc-proceed-to-checkout a.checkout-button {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        white-space: nowrap !important;
        min-width: fit-content;
    }
    
    .coupon-wrapper {
        width: 100%;
    }
    .coupon-input-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
    }
    .coupon-input-group input {
        flex-grow: 1;
        width: auto;
        min-width: 0;
    }
    
    /* Adjust grid for mobile */
    .shipping-methods-grid {
        grid-template-columns: 1fr;
    }
    
    .cart-product-card {
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }
    .cart-product-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9; /* Maintain aspect ratio */
        margin-bottom: 15px;
    }
    .cart-product-details {
        width: 100%;
    }
    .cart-product-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 15px;
        flex-direction: row-reverse; /* Put remove button on left, quantity on right */
    }
    
    .address-card {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        align-items: stretch;
    }
    .address-content {
        text-align: center;
        padding: 0;
    }
    .btn-edit-address {
        width: 100%;
        text-align: center;
    }
    
    /* Fix Mobile Sticky Footer Height/Padding */
    .cart-sticky-footer {
        padding: 20px 15px;
        margin-bottom: 0;
        border-radius: 20px;
    }
    
    /* Ensure enough space for sticky footer */
    .cart-page-wrapper {
        padding-bottom: 180px; /* Add extra padding at bottom of page content */
    }

    .shipping-card {
        width: 100% !important;
    }

    .woocommerce .cart_totals .shipping th,
    .woocommerce-page .cart_totals .shipping th,
    .woocommerce .cart_totals .shipping td,
    .woocommerce-page .cart_totals .shipping td {
        display: block !important;
        width: 100% !important;
    }
}

@media (max-width: 992px) {
    .woocommerce-cart table.shop_table tr.cart_item {
        display: block !important;
        background: #fff !important;
        padding: 16px !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.06) !important;
        margin-bottom: 12px !important;
        border: 1px solid #eee !important;
    }
    .woocommerce-cart table.shop_table tr.cart_item td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0 !important;
        border: none !important;
    }
    .woocommerce-cart table.shop_table tr.cart_item td + td {
        border-top: 1px solid #f0f0f0 !important;
    }
}


/* =========================================
   CART PAGE IMPROVEMENTS (PIXEL PERFECT)
   ========================================= */

/* Fix Page Background */
.woocommerce-cart .main {
    background: #fcfcfc; /* Light gray background like Figma */
}

/* Remove default table styles if any remain */
.woocommerce-cart table.shop_table {
    border: none !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}
.woocommerce-cart table.shop_table td,
.woocommerce-cart table.shop_table th {
    border: none !important;
    padding: 0 !important;
}
/* Ensure normal row heights */
.woocommerce-cart table.shop_table tr { height: auto !important; }
@media (min-width: 993px) {
    .woocommerce-cart table.shop_table {
        border-collapse: separate !important;
        border-spacing: 0 12px !important;
    }
    .woocommerce-cart table.shop_table tr.cart_item {
        background: #fff !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
        position: relative;
    }
    .woocommerce-cart table.shop_table tr.cart_item td {
        background: transparent;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    .woocommerce-cart table.shop_table tr.cart_item td:first-child {
        border-right: 1px solid #eee;
        border-radius: 12px 0 0 12px;
    }
    .woocommerce-cart table.shop_table tr.cart_item td:last-child {
        border-left: 1px solid #eee;
        border-radius: 0 12px 12px 0;
    }
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: cover !important;
    display: block !important;
    padding: 5px !important;
    margin: 5px !important;
}

#add_payment_method table.cart td.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-checkout table.cart td.product-thumbnail {
    width: 120px !important;
    min-width: 120px !important;
}

#add_payment_method table.cart td.product-thumbnail a,
.woocommerce-cart table.cart td.product-thumbnail a,
.woocommerce-checkout table.cart td.product-thumbnail a {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

/* Header Spacing */
.cart-page-wrapper {
    margin-top: 60px;
}
.page-title {
    text-align: right;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px;
    color: #333;
}

/* Product Card Refinements */
.cart-product-card {
    padding: 20px 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
}

.cart-product-thumb {
    width: 90px;
    height: 90px;
    border-radius: 15px;
}

.cart-product-details .product-title {
    font-size: 15px;
    margin-bottom: 10px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-product-details .product-meta {
    font-size: 12px;
    color: #888;
    background: #f9f9f9;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.cart-product-details .product-price {
    font-size: 16px;
    color: #333;
}

/* Quantity Button Styling */
.quantity-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 2px;
}

.quantity-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #ff9800; /* Orange color */
    background: #fff3e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.quantity-btn:hover {
    background: #ff9800;
    color: white;
}

.quantity-input {
    font-size: 14px;
    color: #333;
    width: 35px;
}

.btn-remove-item {
    color: #ccc;
    font-size: 16px;
    margin-right: 15px;
}
.btn-remove-item:hover {
    color: #ff5252;
}


/* Address Section Refinements */
.address-card {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
}
.cart-section-card .card-header {
    margin: 0;
    gap: 15px;
}
.cart-section-card .header-icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
}
.address-content {
    flex-grow: 1;
    padding: 0 20px;
    text-align: right;
}
.address-content p {
    margin: 0;
    color: #777;
    font-size: 14px;
}
.btn-edit-address {
    background: white;
    border: 1px solid #eee;
    padding: 8px 25px;
    color: #777;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Shipping Section Refinements */
.shipping-card {
    margin-top: 30px;
    padding: 30px;
}
.shipping-card .card-header {
    margin-bottom: 25px;
}
.shipping-method-card {
    background: #fdfdfd;
    border: 1px solid #eaeaea;
    padding: 20px;
    border-radius: 15px;
}
.shipping-method-card.active {
    background: #fff8e1;
    border-color: #ffb74d;
}
.shipping-info {
    text-align: right;
}
.shipping-name {
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
}
.shipping-desc {
    color: #999;
}
.shipping-check {
    color: #ff9800; /* Force orange checkbox */
}

/* Footer Refinements */
.cart-sticky-footer {
    border-radius: 20px;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.05);
    background: #fff;
    padding: 20px 40px;
    margin-bottom: 0;
}
.cart-summary-bar {
    gap: 40px;
}
.summary-item .label {
    color: #333;
    font-weight: 700;
}
.summary-item .value {
    color: #4caf50;
    font-size: 16px;
}
.summary-item.subtotal .value,
.summary-item.discount .value {
    color: #333; /* Regular color for subtotal */
}
.summary-item.total-payable .value {
    font-size: 18px;
    color: #4caf50;
}

/* Coupon & Checkout Buttons */
.coupon-input-group {
    background: #f5f5f5;
    border-radius: 40px;
    padding: 6px 6px 6px 15px;
}
.coupon-input-group input {
    font-size: 14px;
}
.coupon-input-group .btn-apply {
    background: #ef5350; /* Red/Pink from screenshot */
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 600;
}
.wc-proceed-to-checkout a.checkout-button {
    background: #66bb6a !important; /* Lighter Green */
    border-radius: 12px !important;
    padding: 12px 40px !important;
    font-size: 16px !important;
    white-space: nowrap !important; /* Fix wrapping */
    min-width: fit-content;
}

/* Increase specificity for desktop to fix alignment */
@media (min-width: 993px) {
    .cart-summary-bar {
        justify-content: flex-end; /* Align to right in RTL */
    }
    .summary-item {
        flex-direction: row;
        gap: 5px;
    }
    .summary-item .label {
        margin-left: 5px;
    }
}

/* Tips Box */
.tips-box {
    background: rgba(0, 100, 200, 0.1);
    border: 1px solid rgba(0, 150, 255, 0.3);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2rem 0;
    border-right: 4px solid #0096ff;
}

.tips-box h4 {
    color: #0096ff;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tips-box ul {
    list-style: none;
    padding: 0;
}

.tips-box li {
    margin-bottom: 0.75rem;
    padding-right: 1.5rem;
    position: relative;
    color: #e0e0e0;
}

.tips-box li::before {
    content: '✓';
    position: absolute;
    right: 0;
    color: #0096ff;
    font-weight: bold;
}

/* Table Container */
.table-container {
    background: rgba(26, 26, 26, 0.8);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2rem 0;
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table th {
    background: rgba(247, 166, 89, 0.1);
    color: var(--primary-color);
    font-weight: 700;
}

.comparison-table td {
    color: #e0e0e0;
}

.comparison-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, #e0954e 100%);
    border-radius: 1.5rem;
    padding: 3rem;
    margin: 3rem 0;
    text-align: center;
    color: #000;
}

.cta-section h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #000;
}

.cta-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    background: #000;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #000;
}

.cta-btn:hover {
    background: transparent;
    color: #000;
    transform: translateY(-2px);
}

.cta-btn.secondary {
    background: transparent;
    color: #000;
    border: 2px solid #000;
}

.cta-btn.secondary:hover {
    background: #000;
    color: #fff;
}

/* Article Footer */
.article-footer {
    background: rgba(26, 26, 26, 0.6);
    border-radius: 1rem;
    padding: 2rem;
    margin: 3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.article-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tag {
    background: rgba(247, 166, 89, 0.2);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tag:hover {
    background: var(--primary-color);
    color: #000;
}

.article-share {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

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

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

.share-btn.linkedin {
    background: #0077b5;
    color: #fff;
}

.share-btn.telegram {
    background: #0088cc;
    color: #fff;
}

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.woocommerce-cart table.cart .product-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.coupon-input-group .btn-apply {
    white-space: nowrap !important;
}



.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
    float: none !important;
    width: 100% !important;
    clear: both !important;
}

.woocommerce .cart-collaterals .cross-sells ul.products,
.woocommerce-page .cart-collaterals .cross-sells ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1024px) {
    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-page .cart-collaterals .cart_totals,
    .woocommerce .cart-collaterals .cross-sells,
    .woocommerce-page .cart-collaterals .cross-sells {
        width: 100% !important;
        float: none !important;
    }
    .woocommerce .cart-collaterals .cross-sells ul.products,
    .woocommerce-page .cart-collaterals .cross-sells ul.products {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cart-sticky-footer {
        flex-direction: column !important;
        padding: 16px 12px !important;
        border-radius: 16px !important;
        position: static !important;
    }
    .cart-actions-bar,
    .cart-summary-bar {
        width: 100% !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
.wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    text-align: center !important;
}
    .coupon-input-group {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 10px !important;
    }
}

.product-gallery-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:10000;display:none}
.product-gallery-lightbox{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.25);width:min(96vw,1200px);max-height:92vh;padding:12px;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}
.product-gallery-lightbox .gallery-close{position:absolute;top:10px;right:10px;background:#111827;color:#fff;border:none;border-radius:8px;width:36px;height:36px;line-height:36px;text-align:center;font-size:18px;cursor:pointer}
.product-gallery-lightbox .gallery-main{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:10px}
.product-gallery-lightbox .gallery-main img{width:auto !important;height:auto !important;max-width:92vw;max-height:72vh;border-radius:8px;object-fit:contain !important}
.product-gallery-lightbox .gallery-thumbs{display:flex;gap:8px;overflow-x:auto;width:100%;padding-top:8px}
.product-gallery-lightbox .gallery-thumbs .lt{flex:0 0 auto;border:2px solid #eee;border-radius:8px;padding:4px;cursor:pointer}
.product-gallery-lightbox .gallery-thumbs .lt img{width:80px;height:60px;object-fit:cover;border-radius:6px}
.product-gallery-lightbox .gallery-prev,.product-gallery-lightbox .gallery-next{position:absolute;top:50%;transform:translateY(-50%);background:#111827;color:#fff;border:none;border-radius:50%;width:40px;height:40px;line-height:40px;text-align:center;font-size:20px;cursor:pointer}
.product-gallery-lightbox .gallery-prev{left:12px}
.product-gallery-lightbox .gallery-next{right:12px}

@media (max-width: 768px){
  .product-gallery-lightbox{width:96vw;max-height:90vh;padding:10px}
  .product-gallery-lightbox .gallery-main img{max-width:95vw;max-height:60vh}
  .product-gallery-lightbox .gallery-thumbs .lt img{width:64px;height:48px}
}

@media (max-width: 576px){
  .product-gallery-lightbox{width:96vw;max-height:88vh;padding:8px}
  .product-gallery-lightbox .gallery-main img{max-width:95vw;max-height:55vh}
  .product-gallery-lightbox .gallery-thumbs{gap:6px}
  .product-gallery-lightbox .gallery-thumbs .lt{padding:3px}
  .product-gallery-lightbox .gallery-thumbs .lt img{width:56px;height:44px}
  .product-gallery-lightbox .gallery-prev,.product-gallery-lightbox .gallery-next{width:34px;height:34px;line-height:34px;font-size:18px}
}

@media (max-width: 992px) {
    .woocommerce-cart td.product-price,
    .woocommerce-cart td.product-subtotal,
    .woocommerce-cart .product-price,
    .woocommerce-cart .product-subtotal {
        font-size: 14px !important;
    }
}

.blog-article__excerpt {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-color-muted);
    margin-bottom: 2rem;
}

.blog-article__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.blog-article__read-more:hover {
    gap: 1rem;
}

.blog-article__read-more i {
    transition: transform 0.3s ease;
}

.blog-article__read-more:hover i {
    transform: translateX(5px);
}

/* Blog Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-widget {
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 2.5rem;
    transition: all 0.3s ease;
}

.sidebar-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.sidebar-widget h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #380d00;
    position: relative;
    padding-bottom: 0.75rem;
}

.sidebar-widget h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #e0954e);
    border-radius: 2px;
}

/* Author Widget */
.author-widget {
    text-align: center;
}

.author-widget .author-avatar {
    margin: 0 auto 1.5rem;
    position: relative;
}

.author-widget .author-avatar::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    opacity: 0.5;
}

.author-widget .author-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.author-widget .author-bio {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.author-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.author-social a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(247, 166, 89, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.author-social a:hover {
    background: var(--primary-color);
    color: #000;
    transform: translateY(-2px);
}

/* Categories Widget */
.categories-widget ul {
    list-style: none;
    padding: 0;
}

.categories-widget li {
    margin-bottom: 0.75rem;
}

.categories-widget a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    text-decoration: none;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.categories-widget a:hover {
    background: rgba(247, 166, 89, 0.1);
    border-color: rgba(247, 166, 89, 0.3);
    color: var(--primary-color);
    transform: translateX(5px);
}

.category-count {
    background: rgba(247, 166, 89, 0.2);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Recent Posts Widget */
.recent-posts-widget .recent-post {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.recent-posts-widget .recent-post:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.recent-posts-widget .recent-post:hover {
    transform: translateX(5px);
}

.recent-post-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
}

.recent-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recent-posts-widget .recent-post:hover .recent-post-image img {
    transform: scale(1.1);
}

.recent-post-content {
    flex: 1;
}

.recent-post-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: #fff;
    transition: color 0.3s ease;
    text-decoration: none;
    display: block;
}

.recent-posts-widget .recent-post:hover .recent-post-title {
    color: var(--primary-color);
}

.recent-post-date {
    font-size: 0.8rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Tags Widget */
.tags-widget {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tag-item {
    background: rgba(0, 0, 0, 0.3);
    color: #ccc;
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tag-item:hover {
    background: var(--primary-color);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(247, 166, 89, 0.3);
}

/* Search Widget */
.sidebar-search {
    position: relative;
}

.sidebar-search input {
    width: 100%;
    padding: 1rem 1.5rem;
    padding-left: 3rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    color: var(--text-color-light);
    font-family: var(--body-font);
    transition: border-color 0.3s ease;
}

.sidebar-search input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.sidebar-search input::placeholder {
    color: var(--text-color-muted);
}

.sidebar-search button {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}

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

/* Categories Widget */
.sidebar-categories ul {
    list-style: none;
}

.sidebar-categories li {
    margin-bottom: 0.75rem;
}

.sidebar-categories a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color-muted);
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.sidebar-categories a:hover {
    background: rgba(247, 166, 89, 0.1);
    color: var(--primary-color);
    transform: translateX(5px);
}

.sidebar-categories .count {
    background: rgba(247, 166, 89, 0.2);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Recent Posts Widget */
.recent-post {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.recent-post__image {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 0.5rem;
    overflow: hidden;
}

.recent-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recent-post:hover .recent-post__image img {
    transform: scale(1.1);
}

.recent-post__content {
    flex: 1;
}

.recent-post__title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: var(--text-color-light);
    transition: color 0.3s ease;
}

.recent-post:hover .recent-post__title {
    color: var(--primary-color);
}

.recent-post__date {
    font-size: 0.8rem;
    color: var(--text-color-muted);
}

/* Related Posts Section */
.related-posts-section {
    margin-top: 5rem;
    padding: 4rem 0;
    background: rgba(26, 26, 26, 0.4);
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.related-posts-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: #fff;
    position: relative;
}

.related-posts-section h2::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), #e0954e);
    border-radius: 2px;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    padding: 0 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.related-post-card {
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}

.related-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(247, 166, 89, 0.3);
}

.related-post-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

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

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

.related-post-category {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary-color);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.related-post-content {
    padding: 2rem;
}

.related-post-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #999;
}

.related-post-meta i {
    color: var(--primary-color);
}

.related-post-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #fff;
    transition: color 0.3s ease;
}

.related-post-card:hover .related-post-title {
    color: var(--primary-color);
}

.related-post-excerpt {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.related-post-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.related-post-link:hover {
    gap: 1rem;
    color: #fff;
}

.related-post-link i {
    transition: transform 0.3s ease;
}

.related-post-link:hover i {
    transform: translateX(5px);
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .blog-content-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 3rem 1rem;
    }
    
    .blog-sidebar {
        order: -1;
    }
    
    .blog-title {
        font-size: 2.5rem;
    }
    
    .related-posts-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .blog-hero {
        height: 50vh;
        min-height: 400px;
    }
    
    .blog-hero-content {
        padding: 1.5rem 0;
    }
    
    .blog-title {
        font-size: 2rem;
    }
    
    .blog-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .blog-author {
        max-width: 100%;
    }
    
    .blog-article {
        padding: 2rem;
    }
    
    .product-grid {
        grid-template-columns: 1fr;
    }
    
    .home .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 4rem 2rem 3rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .article-footer {
        flex-direction: column;
        text-align: center;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
    
    .related-posts-section {
        padding: 3rem 0;
    }
    
    .related-posts-section h2 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 480px) {
.nav__actions {
    left: 15% !important;
    position: absolute !important;
}
.nav__actions {
    gap: 0.6rem !important;}
.home .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 3rem 1rem 2rem;
}
    .breadcrumb-section {
        padding: 0.75rem 0;
    }

    .breadcrumb {
        font-size: 0.8rem;
    }
    
    .blog-hero {
        height: 40vh;
        min-height: 300px;
    }
    
    .blog-title {
        font-size: 1.75rem;
    }
    
    .blog-category,
    .blog-date,
    .blog-read-time {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .author-avatar img {
        width: 50px;
        height: 50px;
    }
    
    .author-name {
        font-size: 1rem;
    }
    
    .blog-article {
        padding: 1.5rem;
    }
    
    .article-content {
        font-size: 1rem;
    }
    
    .sidebar-widget {
        padding: 2rem;
    }
    
    .product-showcase {
        padding: 2rem;
    }
    
    .cta-section {
        padding: 2rem;
    }
    
    .cta-section h3 {
        font-size: 1.5rem;
    }
    
    .related-post-content {
         padding: 1.5rem;
     }
 }

.related-post__content {
    padding: 1.5rem;
}

.related-post__title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color-light);
    transition: color 0.3s ease;
}

.related-post:hover .related-post__title {
    color: var(--primary-color);
}

.related-post__excerpt {
    font-size: 0.9rem;
    color: var(--text-color-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .blog-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .blog-article__content {
        padding: 1.5rem;
    }
    
    .blog-article__title {
        font-size: 1.8rem;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .blog-article__title {
        font-size: 1.5rem;
    }
    
    .blog-article__excerpt {
        font-size: 1rem;
    }
    
    .sidebar-widget {
        padding: 1.5rem;
    }
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blog-article,
.sidebar-widget,
.related-post {
    animation: fadeInUp 0.6s ease forwards;
}

/* Loading Animation */
.loading-skeleton {
    background: linear-gradient(90deg, #2c2c2c 25%, #3c3c3c 50%, #2c2c2c 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* ============================================= */
/*             2. HOMEPAGE SECTIONS (`aiy.html`)   */
/* ============================================= */

/* ----- 2A. HERO SLIDER ----- */
.hero { position: relative; height: 100vh; overflow: hidden; }
.hero-slider { width: 100%; height: 100vh; }
.hero-slider .swiper-slide { display: flex ; align-items: flex-end; justify-content: center; position: relative; height: 90vh;   }
.hero__bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; }
.hero__model-img { position: absolute; bottom: 0; height: 90%; object-fit: contain; z-index: 5; }
.hero__text { z-index: 10; text-align: center; max-width: 650px; padding: 0 1rem; position: relative }
.hero__title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); line-height: 1.2;color:  #ffffff ; }
.hero__title span { color: var(--primary-color); }
.hero__description { font-size: 1.1rem; color: var(--text-color-muted); margin-top: 1rem; max-width: 500px; margin: 1rem auto 0; }
.hero__social, .hero__support { position: absolute; z-index: 20; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); border-radius: 50px; padding: .5rem; }
.hero__social { top: 30%; left: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--text-color-muted); font-size: .8rem; } .hero__social a { font-size: 1.2rem; }
.hero__support { bottom: 5rem; left: 3rem; padding: 15px 20px 12px 20px; font-size: 1.5rem; cursor: pointer; background-color: #f6a660; border-radius: 60%; border: solid 5px #9f4a00;}

/* ============================================= */
/*    HERO SLIDER ADVANCED EFFECTS & ANIMATIONS  */
/* ============================================= */

/* Enhanced Background Layer Effects */
.hero__bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    /* Advanced Effects */
    transform: scale(1.1);
    filter: brightness(0.7) contrast(1.1) saturate(1.2);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active Slide Background Animation */
.swiper-slide-active .hero__bg-layer {
    transform: scale(0.9);
    filter: brightness(1) contrast(1) saturate(1);
}

/* Parallax Effect on Scroll */
.hero-slider.swiper {
    overflow: hidden;
}

.hero-slider .swiper-slide {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    height: 90vh;
    overflow: hidden;
}

/* Enhanced Model Image Effects */
.hero__model-img {
    position: absolute;
    bottom: 0;
    height: 90%;
    object-fit: contain;
    z-index: 5;
    /* Advanced Animation Effects */
    transform: translateY(100px) scale(0.8);
    opacity: 0;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active Slide Model Animation */
.swiper-slide-active .hero__model-img {
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: floatModelActive 8s ease-in-out infinite;
}

/* Floating Animation for Model - RTL Compatible */
@keyframes floatModelActive {
    0%, 100% { transform: translateY(0) scale(1); }
    33% { transform: translateY(-8px) scale(1); }
    66% { transform: translateY(-12px) scale(1); }
}

/* Enhanced Text Animation */
.hero__text {
    z-index: 10;
    text-align: center;
    max-width: 650px;
    padding: 0 1rem;
    position: relative;
    /* Advanced Text Effects */
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

/* Active Slide Text Animation */
.swiper-slide-active .hero__text {
    transform: translateY(0);
    opacity: 1;
}

/* Text Reveal Animation */
.hero__title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    color: #ffffff;
    /* Text Reveal Effect */
    overflow: hidden;
}

.hero__title span {
    color: var(--primary-color);
    display: inline-block;
    animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
    from { text-shadow: 0 0 10px var(--primary-color); }
    to { text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); }
}

/* Description Animation */
.hero__description {
    font-size: 1.1rem;
    color: var(--text-color-muted);
    margin-top: 1rem;
    max-width: 500px;
    margin: 1rem auto 0;
    /* Slide Up Animation */
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}

.swiper-slide-active .hero__description {
    transform: translateY(0);
    opacity: 1;
}

/* Slide Transition Effects */
.hero-slider .swiper-slide {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide Enter Animation (Next) */
.hero-slider .swiper-slide-next .hero__bg-layer {
    transform: translateX(-100%) scale(1.2);
}

.hero-slider .swiper-slide-next .hero__model-img {
    transform: translateX(-100px) scale(1);
    opacity: 0;
}

.hero-slider .swiper-slide-next .hero__text {
    transform: translateX(-100px);
    opacity: 0;
}

/* Slide Exit Animation (Previous) */
.hero-slider .swiper-slide-prev .hero__bg-layer {
    transform: translateX(100%) scale(1.2);
}

.hero-slider .swiper-slide-prev .hero__model-img {
    transform: translateX(100px) scale(1);
    opacity: 0;
}

.hero-slider .swiper-slide-prev .hero__text {
    transform: translateX(100px);
    opacity: 0;
}

/* Advanced Overlay Effects */
.hero__bg-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.swiper-slide-active .hero__bg-layer::before {
    opacity: 0.7;
}

/* Particle Effect Simulation */
.hero__bg-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at 30% 20%,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%
    );
    z-index: 3;
    opacity: 0;
    transition: opacity 1s ease;
}

.swiper-slide-active .hero__bg-layer::after {
    opacity: 1;
    animation: particleFloat 8s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(120deg); }
    66% { transform: translateY(-10px) rotate(240deg); }
}

/* RTL Support for Slider */
html[dir="rtl"] .hero-slider .swiper-slide-next .hero__bg-layer {
    transform: translateX(100%) scale(1.2);
}

html[dir="rtl"] .hero-slider .swiper-slide-next .hero__model-img {
    transform: translateX(100px) scale(1);
}

html[dir="rtl"] .hero-slider .swiper-slide-next .hero__text {
    transform: translateX(100px);
}

html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__bg-layer {
    transform: translateX(-100%) scale(1.2);
}

html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__model-img {
    transform: translateX(-100px) scale(1);
}

html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__text {
    transform: translateX(-100px);
}

/* RTL Support for Navigation Arrows */
html[dir="rtl"] .hero-next::after {
    content: '\f104'; /* فلش به چپ در RTL */
}

html[dir="rtl"] .hero-prev::after {
    content: '\f105'; /* فلش به راست در RTL */
}

html[dir="rtl"] .hero-next {
    right: 30px;
    left: auto  !important;
}

html[dir="rtl"] .hero-prev {
    left: 30px;
    right: auto !important;
}

/* Enhanced Navigation Buttons */
.hero-next,
.hero-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    z-index: 100;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    display: flex !important;
}

.hero-next::after {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
}

.hero-prev::after {
    content: '\f104';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
}

.hero-next {
    right: 30px;
}

.hero-prev {
    left: 30px;
}

.hero-next:hover,
.hero-prev:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

/* Pagination Enhancements */
.hero-slider .swiper-pagination {
    bottom: 30px;
    z-index: 20;
}

.hero-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    width: 12px;
    height: 12px;
    transition: all 0.3s ease;
}

.hero-slider .swiper-pagination-bullet-active {
    background: var(--primary-color);
    width: 30px;
    border-radius: 6px;
}

/* ----- 2B. STORY SECTION & VIEWER (ADVANCED STYLES) ----- */
.story-section { padding: 2rem 0; display: flex; gap: 1rem; justify-content: center; overflow-x: auto; scrollbar-width: none; background-color: #000000; margin: 0 auto; width: 100%; max-width: 100%; }
.story-section::-webkit-scrollbar { display: none; }
.story-item { cursor: pointer; text-align: center; flex-shrink: 0; }
.story-item__img-wrapper { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); display: grid; place-items: center; margin: 0 auto; transition: .3s; }
.story-item:hover .story-item__img-wrapper { transform: scale(1.05); }
.story-item img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--body-color-dark); }
.story-item span { display: block; margin-top: .75rem; font-size: .8rem; color: #ffffff; }

.story-viewer-overlay { position: fixed; inset: 0; background-color: #000; z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: .4s; }
.story-viewer-overlay.active { opacity: 1; visibility: visible; }
.story-viewer-close { position: absolute; top: 2rem; left: 2rem; font-size: 1.5rem; color: #fff; z-index: 10; cursor: pointer; }
.story-viewer-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 1000px; }
.story-viewer-main { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.story-viewer-slider-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.story-viewer-slider { width: 100%; height: 100%; position: relative; z-index: 2; }
.story-viewer-slider,
.story-viewer-slider .swiper,
.story-viewer-slider .swiper-wrapper { direction: ltr !important; }
.story-viewer-slider .swiper-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; transition: transform 0.5s, opacity 0.5s; opacity: 0.4; transform: scale(0.8); position: relative; }
.story-viewer-slider .swiper-slide-active { opacity: 1; transform: scale(1); z-index: 3; }
.story-slide-content { position: relative; width: 90%; max-width: 450px; height: 80vh; max-height: 800px; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.story-slide-image { width: 100%; height: 100%; object-fit: cover; border-radius: 1.5rem; }
.story-slide-info { position: absolute; bottom: 1.5rem; right: 1.5rem; left: 1.5rem; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); padding: 1rem; border-radius: 1rem; display: flex; align-items: center; gap: 1rem; }
.story-slide-info img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--primary-color); flex-shrink: 0; }
.story-slide-info h4 { font-size: 1rem; color: #fff; margin: 0; } 
.story-slide-info p { font-size: .8rem; color: #ccc; margin: 0; }
.story-progress-bar { position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem; height: 3px; background: rgba(255,255,255,0.3); border-radius: 3px; z-index: 4; }
.story-progress { height: 100%; width: 0%; background: #fff; border-radius: 3px; transition: width 5s linear; }
.story-navigation { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; z-index: 5; pointer-events: none; }
.story-section { background-color: #000000; padding: 2rem 0; margin: 0;max-width: 2000px !important;padding: 4rem !important; }
.story-nav-btn { width: 50px; height: 50px; background: rgba(0,0,0,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: all 0.3s ease; pointer-events: all; backdrop-filter: blur(10px); }
.story-nav-btn:hover { background: rgba(0,0,0,0.9); transform: scale(1.1); }
.story-nav-btn i { font-size: 1.2rem; }
.story-preview { position: absolute; top: 50%; transform: translateY(-50%); width: 200px; height: 300px; border-radius: 1rem; overflow: hidden; opacity: 0.6; transition: all 0.3s ease; z-index: 1; }
.story-preview-prev { left: 2rem; transform: translateY(-50%) translateX(-50px) rotateY(45deg) scale(0.8); }
.story-preview-next { right: 2rem; transform: translateY(-50%) translateX(50px) rotateY(-45deg) scale(0.8); }
.story-preview img { width: 100%; height: 100%; object-fit: cover; }
.story-thumbnails-container { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; background: rgba(0,0,0,0.5); padding: .75rem; border-radius: 1rem; backdrop-filter: blur(10px); }
.story-bottom-thumb { width: 50px; height: 50px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: .3s; object-fit: cover; flex-shrink: 0;}
.story-bottom-thumb.active { border-color: var(--primary-color); transform: scale(1.1); }
.story-section-container { display: flex; justify-content: center; gap: 1.5rem; padding: 1rem 0; background-color: #000000; margin: 0; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; }
.story-item__img-wrapper { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 2px solid var(--primary-color); padding: 3px; background-color: #000000; }
.story-item__img-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.story-item span { font-size: 0.8rem; color: #fff; }
.story-viewer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); z-index: 1000; display: none; }
.story-viewer-overlay.active { display: block; }
.hero {    background-color: #000000 !important;}
/*.swiper-wrapper {background-color: #000000 !important;}

 ----- 2C. CATEGORY CAROUSEL ----- */
.category-carousel-section { padding: 1rem 0; background-color: var(--dark-color); overflow: hidden; position: relative; background-image: url('images/assets/category-bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.category-carousel-section::before { content: 'CATEGORY'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(8rem, 20vw, 15rem); font-weight: 900; color: rgba(255, 255, 255, 0.03); z-index: 1; pointer-events: none; }
.category-carousel__wrapper { position: relative; z-index: 2;}
.category-carousel { width: 100%; height: 600px; padding: 2rem 0; position: relative; overflow: hidden; }
.category-carousel .swiper-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; position: relative; }
.category-carousel .swiper-slide { width: 500px; height: 500px; transition: all 0.5s ease; filter: grayscale(100%) brightness(0.4); border-radius: 1rem; overflow: hidden; position: absolute; opacity: 0; transform: scale(0.8) translateX(0); }
.category-carousel .swiper-slide.active { filter: grayscale(0%) brightness(1); transform: scale(1.1) translateX(0); z-index: 3; opacity: 1;background: linear-gradient(to bottom,  rgba(125,126,125,0) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
.category-carousel .swiper-slide.prev { filter: grayscale(100%) brightness(0.4); transform: scale(0.9) translateX(-60%); z-index: 1; opacity: 1; }
.category-carousel .swiper-slide.next { filter: grayscale(100%) brightness(0.4); transform: scale(0.9) translateX(60%); z-index: 1; opacity: 1; }
.category-carousel .swiper-slide img { width: 85%; height: 100%; object-fit: cover; border-radius: 1rem; }
.category-carousel__text-overlay { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); z-index: 4; text-align: center; color: white; pointer-events: none; opacity: 0; transition: opacity 0.5s ease-in-out; width: 100%; max-width: 600px; }
.category-carousel__text-overlay.active { opacity: 1; }
.home .category-carousel-section .section__title { color: #ffffff !important; }
.home .new-experience-section .section__title { color: #000000 !important; }
#cat-carousel-title { font-size: 1.2rem; font-weight: 400; margin-bottom: 0.5rem; color: #fff; } 
#cat-carousel-subtitle { 
    font-size: 3rem; 
    font-weight: 900; 
    line-height: 1; 
    font-family: 'Kapakana', fantasy !important; 
    font-style: normal; 
    background: linear-gradient(135deg, #ff6b35, #f7931e, #ffd700); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    margin: 0; 
}
.cat-next, .cat-prev { color: var(--primary-color); background: rgba(255, 255, 255, 0.9); width: 50px; height: 50px; border-radius: 50%; backdrop-filter: blur(10px); z-index: 5; }
.cat-next:hover, .cat-prev:hover { background: rgba(255, 255, 255, 1); transform: scale(1.1); }
.cat-next::after, .cat-prev::after { font-size: 1.2rem; color: var(--dark-color); }

/* ----- 2D. DISCOUNT SECTION ----- */
.discount-section { padding: 0; background: #ffffff; color: var(--text-color-dark); position: relative; overflow: hidden; }
.discount-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000000; clip-path:polygon(0 0, 100% 0, 100% 45%, 0 11%); z-index: 1; }
.discount-section__content { position: relative; z-index: 2; padding: 0; }

/* Desktop Layout - Title and Timer in one line */
.discount__header { 
display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 4rem;
    background: transparent;
    color: #fff;
    position: relative;
    z-index: 3;
    gap: 2rem;
    flex-wrap: wrap;
    align-content: center;
}

.discount__title {
flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.discount__title .title { text-align: center; }

.discount__title h2 { 
    font-size: clamp(1.8rem, 5vw, 2.5rem); 
    font-weight: 700; 
    margin: 0; 
    color: #fff; 
    line-height: 1.2;
}

.discount__title span { 
    color: #ccc; 
    font-size: 1.1rem; 
    letter-spacing: 3px; 
    display: block; 
    font-weight: 500; 
}

/* Timer Text Section - Below title and subtitle */
.timer-text-section {
    margin-top: 1rem;
}

.timer-text-link,
.timer-text-display {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    display: inline-block;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.15);
}

.timer-text-link:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* FLIP COUNTDOWN STYLES - Compact desktop layout */
.flip-countdown-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
    direction: rtl;
    font-family: var(--body-font);
    flex-shrink: 0;
}

.countdown-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
    width: 100%;
}

/* Timer Text Row (at top) */
.timer-text-row {
    justify-content: center;
    margin-bottom: 0.5rem;
}

.timer-text-link,
.timer-text-display {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    display: inline-block;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.2);
}

.timer-text-link:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Days and Date Row (combined) */
.days-date-row {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
}

.days-section,
.date-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 200px;
}

.countdown-label {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 100px;
    text-align: right;
    flex-shrink: 0;
}

/* Days Display - Timer-style with Gray Background */
.flip-days {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.flip-item-days-container {
    position: relative;
    width: 50px;
    height: 60px;
    perspective: 300px;
    margin: 0 1px;
}

.flip-item-days-digit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    font-weight: 700;
    color: #fff;
    background-color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    overflow: hidden;
    z-index: 2;
}

.flip-item-days-digit::before,
.flip-item-days-digit::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: inherit;
    border-radius: inherit;
    z-index: -1;
}

.flip-item-days-digit::before {
    top: 0;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #000;
}

.flip-item-days-digit::after {
    bottom: 0;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #000;
}

/* Date Display - Same style as Days */
.flip-date {
    display: flex;
    align-items: center;
    gap: 0;
}

.flip-item-date-container {
    position: relative;
    width: 35px;
    height: 50px;
    perspective: 300px;
    margin: 0 1px;
}

.flip-item-date-digit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background-color: #333;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    overflow: hidden;
    z-index: 2;
}

.flip-item-date-digit::before,
.flip-item-date-digit::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: inherit;
    border-radius: inherit;
    z-index: -1;
}

.flip-item-date-digit::before {
    top: 0;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #000;
}

.flip-item-date-digit::after {
    bottom: 0;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid #000;
}

/* Date separators (/) */
.date-separator {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

/* Days and Date Row Layout Improvements */
.days-date-row {
    flex-wrap: nowrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
}

.days-section,
.date-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: auto;
    justify-content: center;
}

.flip-countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.countdown-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.time-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.countdown-label {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    min-width: auto;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Time Row - Original flip-clock structure with consistent sizing */
.time-row {
    justify-content: center;
    margin-top: 0.5rem;
}

.time-row .countdown-label {
    margin-right: 1rem;
}

.flip-clock-container {
    direction: ltr;
    font-family: 'Courier New', monospace;
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    --flip-bg-color: #333;
    --flip-text-color: #fff;
    --flip-dots-color: #fff;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.flip-clock-container * {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.flip-clock-container *::before,
.flip-clock-container *::after {
    box-sizing: border-box;
}

.flip-clock-container [class|="flip-item"] {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    padding-bottom: 22px; /* space for unit label */
}

.flip-clock-container [class|="flip-item"]::before {
    content: ":";
    font-family: 'Courier New', monospace;
    font-size: 60px;
    color: var(--flip-dots-color);
    line-height: 50px;
    margin: 0 -8px;
    animation: blink 1s infinite;
}

.flip-clock-container [class|="flip-item"]:first-child::before {
    content: none;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.flip-clock-container [class|="flip-item"] .flip-digit {
    width: 50px;
    height: 75px;
    position: relative;
    margin: 0 2px;
}

.flip-clock-container [class|="flip-item"] .flip-digit > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    display: block;
    perspective: 300px;
}

.flip-clock-container [class|="flip-item"] .flip-digit > span::after,
.flip-clock-container [class|="flip-item"] .flip-digit > span::before {
    content: attr(data-digit);
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    font-size: 60px;
    font-weight: bolder;
    text-align: center;
    color: var(--flip-text-color);
    background-color: var(--flip-bg-color);
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Default visibility: show only current, hide next until flipping */
.flip-clock-container [class|="flip-item"] .flip-digit .flip-digit-current { opacity: 1; visibility: visible; }
.flip-clock-container [class|="flip-item"] .flip-digit .flip-digit-next { opacity: 0; visibility: hidden; display: none; }
.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-next { opacity: 1; visibility: visible; display: block; }

.flip-clock-container [class|="flip-item"] .flip-digit > span::before {
    top: 0;
    line-height: 78px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #000;
    transform-origin: bottom;
}

.flip-clock-container [class|="flip-item"] .flip-digit > span::after {
    bottom: 0;
    line-height: 4px;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #000;
    transform-origin: top;
}

/* Simple display for flip items without digits */
.flip-clock-container [class|="flip-item"]:not(:has(.flip-digit)) {
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--flip-text-color);
    background: var(--flip-bg-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin: 2px;
}

/* Flipping Animation */
.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-next {
    z-index: 0;
    animation: afterZIndexAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-next::before {
    animation: afterUpShadowAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-next::after {
    animation: afterFlipAnim 0.9s linear forwards, afterDownShadowAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-current {
    z-index: 1;
    animation: currentZIndexAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-current::before {
    animation: currentFlipAnim 0.9s linear forwards, currentUpShadowAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-current::after {
    animation: currentDownShadowAnim 0.9s linear forwards;
}

@keyframes afterZIndexAnim {
    0% { z-index: 0; }
    100% { z-index: 1; }
}

@keyframes currentZIndexAnim {
    0% { z-index: 1; }
    100% { z-index: 0; }
}

@keyframes afterFlipAnim {
    0% { transform: rotateX(180deg); }
    100% { transform: rotateX(0); }
}

@keyframes currentFlipAnim {
    0% { transform: rotateX(0); }
    100% { transform: rotateX(-180deg); }
}

@keyframes afterUpShadowAnim {
    0% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
    50% { box-shadow: inset 0 -15px 25px rgba(0, 0, 0, 0.4); }
    100% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes afterDownShadowAnim {
    0% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
    50% { box-shadow: inset 0 15px 25px rgba(0, 0, 0, 0.4); }
    100% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes currentUpShadowAnim {
    0% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
    50% { box-shadow: inset 0 -15px 25px rgba(0, 0, 0, 0.4); }
    100% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes currentDownShadowAnim {
    0% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
    50% { box-shadow: inset 0 15px 25px rgba(0, 0, 0, 0.4); }
    100% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
}

/* Days element styling for Persian layout */
.flip-clock-container .flip-item-days {}
.flip-clock-container .flip-item-hours {}
.flip-clock-container .flip-item-minutes {}
.flip-clock-container .flip-item-seconds {}

/* Days element specific styling */
.flip-clock-container .flip-item-days::before { content: none; }

.flip-clock-container .flip-item-days::after {
    content: "روز";
    font-size: 14px;
    color: var(--flip-text-color);
    font-weight: 600;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

.flip-clock-container .flip-item-hours::after {
    content: "ساعت";
    font-size: 12px;
    color: var(--flip-text-color);
    font-weight: 600;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

.flip-clock-container .flip-item-minutes::after {
    content: "دقیقه";
    font-size: 12px;
    color: var(--flip-text-color);
    font-weight: 600;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

.flip-clock-container .flip-item-seconds::after {
    content: "ثانیه";
    font-size: 12px;
    color: var(--flip-text-color);
    font-weight: 600;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

/* Date Display - Timer-style */
.flip-date {
align-items: center;
    gap: 0;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.date-display-container {
    position: relative;
    min-width: 140px;
    height: 75px;
    perspective: 300px;
    margin: 0 2px;
}

.date-display-digit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--flip-bg-color, #2d5a87);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    overflow: hidden;
    padding: 0 0.5rem;
    z-index: 2;
}

.date-display-digit::before,
.date-display-digit::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: inherit;
    border-radius: inherit;
    z-index: -1;
}

.date-display-digit::before {
    top: 0;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #000;
}

.date-display-digit::after {
    bottom: 0;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #000;
}
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    overflow: hidden;
    padding: 0 0.5rem;
}

.date-display-digit::before,
.date-display-digit::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: inherit;
    border-radius: inherit;
}

.date-display-digit::before {
    top: 0;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #000;
}

.date-display-digit::after {
    bottom: 0;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #000;
}

.timer-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.timer-text:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Expired State */
.countdown-expired {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #9E9E9E, #616161);
    padding: 1rem 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(158, 158, 158, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .flip-countdown-container {
        gap: 1rem;
        max-width: 100%;
        padding: 0 1rem;
    }
    .floating-contact-bar{
      display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-content: stretch !important;
    justify-content: center !important;
    align-items: flex-start !important;  
}

/* استایل‌های بخش نظرات تایید شده */
.approved-comments-section {
    margin-bottom: 40px;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
}

.approved-comments-title {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

.approved-comments-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.approved-comment-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.comment-author {
    display: flex;
    flex-direction: column;
}

.comment-rating {
    margin-top: 5px;
}

.comment-rating .star {
    color: #ccc;
    font-size: 16px;
}

.comment-rating .star.filled {
    color: #ffb400;
}

.comment-date {
    color: #888;
    font-size: 12px;
}

.comment-content {
    margin-bottom: 15px;
    line-height: 1.6;
}

.comment-attachments {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
}

.comment-audio audio {
    width: 100%;
    height: 40px;
}
    }
    /* Timer Text Row - Mobile */
    .timer-text-row {
        margin-bottom: 1rem;
    }
    
    .timer-text-link,
    .timer-text-display {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
    }
    
    /* Days and Date Row - Mobile (stack vertically) */
    .days-date-row {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .days-section,
    .date-section {
        justify-content: center;
        min-width: auto;
        flex: none;
    }
    
    .countdown-label {
        font-size: 0.95rem;
        min-width: 20px;
    }
    
    /* Days Display - Mobile */
    .flip-item-days-container {
        width: 60px;
        height: 55px;
    }
    
    .flip-item-days-digit {
        font-size: 1.4rem;
    }
    
    /* Date Display - Mobile */
    .date-display-container {
        min-width: 120px;
        height: 55px;
    }
    
    .date-display-digit {
        font-size: 1rem;
        padding: 0 0.3rem;
    }
    
    /* Time Row - Mobile */
    .flip-clock-container [class|="flip-item"] .flip-digit {
        width: 40px;
        height: 60px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::after,
    .flip-clock-container [class|="flip-item"] .flip-digit > span::before {
        font-size: 48px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::before {
        line-height: 62px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::after {
        line-height: 3px;
    }
    
    .flip-clock-container [class|="flip-item"]::before {
        font-size: 60px;
        line-height: 50px;
        margin: 0 -8px;
    }
}

@media (max-width: 480px) {
    .flip-countdown-container {
        gap: 0.8rem;
    }
    
    .timer-text-link,
    .timer-text-display {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    .countdown-label {
        font-size: 0.85rem;
        min-width: 80px;
    }
    
    .flip-item-days-container {
        width: 50px;
        height: 45px;
    }
    
    .flip-item-days-digit {
        font-size: 1.2rem;
    }
    
    .date-display-container {
        min-width: 100px;
        height: 45px;
    }
    
    .date-display-digit {
        font-size: 0.9rem;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit {
        width: 35px;
        height: 50px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::after,
    .flip-clock-container [class|="flip-item"] .flip-digit > span::before {
        font-size: 40px;
    }
    
    .flip-clock-container [class|="flip-item"]::before {
        font-size: 50px;
        line-height: 40px;
        margin: 0 -6px;
    }
}
    
    .date-display {
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .flip-countdown-container {
        gap: 1rem;
    }
    
    .countdown-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .countdown-label {
        font-size: 0.9rem;
        min-width: auto;
        width: 100%;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit {
        width: 35px;
        height: 50px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::after,
    .flip-clock-container [class|="flip-item"] .flip-digit > span::before {
        font-size: 36px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::before {
        line-height: 52px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::after {
        line-height: 2px;
    }
    
    .flip-clock-container [class|="flip-item"]::before {
        font-size: 45px;
        line-height: 40px;
        margin: 0 -6px;
    }
    
    .flip-item-days {
        font-size: 1.3rem;
        padding: 0.5rem 1rem;
        min-width: 60px;
    }
    
    .date-display {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Extra Small Mobile Devices - Under 440px */
@media (max-width: 440px) {
    .flip-countdown-container {
                gap: 0px;
        padding: 0rem 0rem 2rem 0rem;
    }
    
    .countdown-row {
/* flex-direction: row; align-items: center; gap: 0; */
flex-direction: column;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
        display: flex;
        align-content: center;
        justify-content: space-between;
    }
    
    .days-date-row {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
    }
    
    .days-section,
    .date-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;

    }
    
    .countdown-label {
        font-size: 0.8rem;
        text-align: center;
        margin-bottom: 0;
        font-weight: 500;
    }
    
    /* Days Display - Extra Small Mobile */
    .flip-item-days-container {
        width: 50px;
        height: 40px;
        margin: 0 auto;
    }
    
    .flip-item-days-digit {
        font-size: 1.2rem;
        border-radius: 8px;
        font-weight: 700;
    }
    
    .flip-item-days-digit::before {
        border-radius: 8px 8px 0 0;
    }
    
    .flip-item-days-digit::after {
        border-radius: 0 0 8px 8px;
    }
    
    /* Date Display - Extra Small Mobile */
    .date-display-container {
        min-width: 120px;
        height: 40px;
        margin: 0 auto;
    }
    
    .date-display-digit {
        font-size: 0.85rem;
        padding: 0 0.4rem;
        border-radius: 8px;
        font-weight: 600;
    }
    
    .date-display-digit::before {
        border-radius: 8px 8px 0 0;
    }
    
    .date-display-digit::after {
        border-radius: 0 0 8px 8px;
    }
    
    /* Time Row - Extra Small Mobile */
    .flip-clock-container {
        justify-content: center;
        gap: 0.2rem;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit {
        width: 25px;
        height: 40px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::after,
    .flip-clock-container [class|="flip-item"] .flip-digit > span::before {
        font-size: 32px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::before {
        line-height: 42px;
    }
    
    .flip-clock-container [class|="flip-item"] .flip-digit > span::after {
        line-height: 2px;
    }
    
    .flip-clock-container [class|="flip-item"]::before {
        font-size: 35px;
        line-height: 32px;
        margin: 0 -4px;
    }
    
    .timer-text-link,
    .timer-text-display {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Timer Info Styles */
.timer-info { margin-top: 1rem; text-align: center; }
.timer-date { color: #fff; font-size: 1rem; margin-bottom: 0.5rem; font-weight: 500; }
.timer-text { color: #fff; font-size: 1.1rem; font-weight: 600; text-decoration: none; padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); border-radius: 8px; display: inline-block; transition: all 0.3s ease; }
.timer-text:hover { background: rgba(255,255,255,0.2); color: #fff; text-decoration: none; }
/* قانون CSS اضافی حذف شد - تداخل با ul.products.columns-4 */

/* استایل مخصوص صفحه اصلی */
.home .product-grid {
    padding: 7rem 3rem 4rem;
    margin-top: -100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.close-filters-mobile {
    display:none;
}

/* استایل کارت محصول با ارتفاع ثابت */
.product-card-discount { 
    background: white; 
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    border: 0px solid #f0f0f0; 
    display: flex; 
    flex-direction: column; 
    height: 450px; /* ارتفاع ثابت برای همه کارت‌ها */
}

/* استایل مخصوص WooCommerce - گرید محصولات فروشگاه - فقط در صفحه فروشگاه */
.woocommerce ul.products.columns-4,
.woocommerce-page ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    padding: 3rem 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Responsive design برای ul.products.columns-4 - فقط در صفحات WooCommerce */
@media screen and (max-width: 1024px) {
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media screen and (max-width: 768px) {
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 1rem 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4 {
        grid-template-columns:repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 1rem 0 !important;
    }
    .product-card__body {
    padding: 0.1rem !important;
}
.product-card__footer {
    margin-top: -20px !important;
}
.product-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 145px;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
}
.product-card__footer button.btn {
    padding: 0.2rem 0rem !important;
    margin: 10px !important;
}
    .product-card-discount {
        height: 340px !important;
    }
    .btn--add-to-cart {
            padding: 5px !important;
        margin: 14px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 20px !important;
    }

    .custom-logo-link img {
        max-width: 105px !important;
}
}


.products-count{display:none !important;}
.orderby option {font-family: var(--body-font) !important;}
.orderby {font-family: var(--body-font) !important;}
/* حذف استایل‌های پیش‌فرض WooCommerce - فقط در صفحات WooCommerce */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}

.product-card-discount:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.18); 
}

.product-card-discount img { 
    /* margin: 0 auto; 
    width: 85%; 
    height: 220px; 
    object-fit: contain; 
    border-radius: 8px; 
    margin-top: 1rem; 
    padding: 0.5rem;  */
    margin: 0 auto;
    width: 85%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    margin-top: 1rem;
    padding: 0.5rem;
}

.product-card__body { 
    /* padding: 1rem; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-height: 0; اجازه انقباض */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-height: 0;
    align-items: center;
}
.product-card-discount h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: #333; line-height: 1.4; border-right: 3px solid #da7720; padding-right: .5rem; }
.product-card-discount .product-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: #333; line-height: 1.4; border-right: 3px solid #da7720; padding-right: .5rem; }

.product-card__price {
    display: flex;
    align-items: center;
    gap: 0..1rem;
    margin: 0;
    flex-wrap: wrap;
}
/* .product-card__price { display: flex; align-items: center; gap: 1.2rem; margin: 1.5rem 0; flex-wrap: wrap; } */
.new-price { font-weight: 700; font-size: 1.1rem; color: #27ae60; }
.old-price { text-decoration: line-through; color: #e74c3c; font-size: 0.9rem; }
.product-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid #f0f0f0; }
.rating { color: #d08b53; font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 0.3rem; }
.rating .rating-number { font-size: 1rem; font-weight: 700; }
.rating i { color: #d08b53; font-size: 0.9rem; }
.btn--add-to-cart { 
    background: #d08b53; 
    color: #fff; 
    border: none; 
    padding: 0.8rem 1.2rem; 
    font-size: 0.85rem; 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    transition: all 0.3s ease; 
    border-radius: 8px; 
    font-weight: 600; 
    cursor: pointer;
    text-decoration: none;
}
.btn--add-to-cart:hover { 
    background: #e67e22; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn--add-to-cart.btn--out-of-stock {
    background: #999;
    color: #ccc;
    cursor: not-allowed;
}

.btn--add-to-cart.btn--out-of-stock:hover {
    background: #999;
    transform: none;
    box-shadow: none;
}

.btn--add-to-cart i { font-size: 0.75rem; color: #fff; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 2rem 1.5rem; position: relative; z-index: 2; align-items: center; }
.feature-item { background: transparent; padding: 0.25rem 0; display: flex; flex-direction: row; align-items: center; gap: 0.75rem; text-align: right; box-shadow: none; border: none; }
.feature-item:hover { transform: none; box-shadow: none; }
.feature-item i { font-size: 1.3rem; color: #d08b53; }
.feature-icon { width: 60px; height: 60px; border-radius: 30%; display: inline-flex; align-items: center; justify-content: center; background: #fff5ea; border: 1px solid #f4e1cc; box-shadow: 0 3px 10px rgba(208,139,83,0.12); }
.feature-text { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; }
.feature-title { font-size: 1rem; color: #222; font-weight: 700; }
.feature-subtitle { font-size: 0.95rem; color: #666; font-weight: 500; }

/* ----- 2E. OTHER HOMEPAGE SECTIONS ----- */
.brands-section { padding: 1rem 0; background-color: var(--body-color-light); color: var(--text-color-dark); text-align: center; overflow: hidden; }
.brands-section__content { position: relative; }
.brands-section__bg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -70%); width: 90%; height: 112%; background-image: url(images/Group1000007942.png); background-size: contain; background-position: center; background-repeat: no-repeat;}
.brands__model-img { position: relative; z-index: 3; max-width: 450px; margin: -5rem auto 0; }
.rating-box { position: absolute; z-index: 4; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); padding: 1rem; border-radius: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,0.1); display: flex; align-items: center; gap: .5rem; }
.rating-box-1 { top: 30%; left: 15%; } .rating-box-2 { top: 40%; right: 15%; }
.rating-box span { font-size: 1.2rem; font-weight: 700; } .rating-box .stars { color: #d08b53; } .rating-box .avatars { height: 30px; }
.brand-logo-slider { margin: 2rem 0; } .brand-logo-slider .swiper-wrapper { align-items: center; } .brand-logo-slider .swiper-slide { width: 150px; }
.brand-logo-slider img { max-height: 40px; filter: grayscale(100%); opacity: 0.6; transition: .3s; } .brand-logo-slider img:hover { filter: grayscale(0%); opacity: 1; }

.new-experience-section { padding: 5rem 0; background-color:#ffffff; color: var(--text-color-dark); text-align: center; }
.product-grid-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin: 3rem 0; }
.product-card-alt { background-color: transparent; text-align: center; }
.product-card-alt img { 
    width: 100%; 
    max-width: 300px;
    height: auto;
    border-radius: 1rem; 
    margin-bottom: 1rem; 
    object-fit: cover;
}
.product-card-alt h3 { font-size: 1rem; }
.product-card-alt .product-title { font-size: 1rem; }
.product-card-alt .price { font-weight: 700; color: var(--primary-color); margin-top: .5rem; }

.trust-section { padding: 6rem 0 0; background: url(images/Groupy.jpg), var(--dark-color); position: relative; background-repeat: no-repeat; background-size: 80% 60%;}
.trust-section__content { text-align: center; padding-bottom: 4rem; }
.trust-section .section__title-container { margin-bottom: 4rem; }
.trust-section .section__title { color: #fff; font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
.trust-section .section__subtitle { color: var(--primary-color); font-size: 1.1rem; letter-spacing: 2px; font-weight: 500; }
.trust-gallery { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 1.5rem; margin-bottom: 3rem; padding: 0 1rem; }
.ro__title { font-size: 2rem; font-weight: 900; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); line-height: 1.2;color: #ffffff; }
.ro__description { font-size: 16px;}
.trust-gallery__item { width: 100%; height: auto; aspect-ratio: 3/5; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.3); transition: all 0.4s ease; }
.trust-gallery__item:nth-child(2), .trust-gallery__item:nth-child(4) { transform: translateY(-30px); }
.trust-gallery__item:hover { transform: translateY(-40px) scale(1.03); z-index: 10; }
.trust-gallery__item img { width: 100%; height: 100%;object-fit: none; border-radius: 60px;}
.trust-button-container { text-align: center; margin-bottom: 2rem; }
.trust-button-container .btn--dark { background: #333; border: none; color: #fff; padding: 1rem 2.5rem; font-size: 1rem; font-weight: 600; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; }
.trust-button-container .btn--dark:hover { background: #444; transform: translateY(-2px); }
.guarantee-section { background-color: #111; padding: 3rem 0; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; }
.guarantee__content { max-width: 800px; z-index: 2; padding: 0 2rem; }
.guarantee__crown-left, .guarantee__crown-right { position: absolute; width: 110px; z-index: 1; opacity: 1; }
.guarantee__crown-left { left: 25%; bottom: -2rem; transform: rotate(315deg); }
.guarantee__crown-right { right: 25%; top: -2rem; }

.shop-by-category-section { padding: 2rem 1rem 3rem 1rem; background-color: var(--body-color-light); color: var(--text-color-dark); }
.category-grid { display: grid ; grid-template-columns: repeat(auto-fit, minmax(120px, 2fr)); gap: 0rem; }
.category-item { position: relative; text-align: center; padding-top: 2rem; }
.category-item__bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; background-color: #FFA963; border-radius: 50%; z-index: 1; transition: .4s; }
.category-item:hover .category-item__bg { border-radius: 50%; }
.category-item img { position: relative; z-index: 2; height: 200px; object-fit: contain; } .category-item h3 { margin-top: 1rem; }
.category-item .category-title { display: block; margin-top: 1rem; }
/* Enforce two-column grid for mid-width range to avoid 3-column wrapping */
@media (min-width: 422px) and (max-width: 542px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

.medical-section { padding:0rem 1rem 1rem 1rem; background-color: var(--body-color-light); color: var(--text-color-dark); }
.medical-section__container { display: flex; align-items: center; gap: 4rem; }
.medical-section__content { flex: 1; } .medical-section__content h2 { font-size: 2rem; } .medical-section__content h3 { color: #555; margin: .5rem 0 1.5rem; font-weight: 500; } .medical-section__content p { line-height: 1.8; margin-bottom: 2rem; }
.medical-section__image { flex: 1; position: relative; max-width: 500px; }
.medical-section__image img { position: relative; z-index: 2; width: 100%; }

.bestsellers-section { padding: 8rem 0; background-color: var(--body-color-dark); background-image: url('images/assets/bestseller-bg.png'); background-position: left; background-repeat: no-repeat; background-size: contain; clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); }
.bestsellers-section__content { display: flex; align-items: center; gap: 2rem; }
.bestsellers__title-part { flex: 0 0 300px; text-align: center; }
.bestsellers__title-part img { width: 135px; margin-bottom: -1rem; } .bestsellers__title-part h2 { font-size: 2rem; } .bestsellers__title-part span { color: var(--text-color-muted); letter-spacing: 2px; }
.bestsellers__products-part { flex: 1; overflow: hidden; }
.bestsellers-slider { padding: 1rem 0; }
.product-card-bestseller { background: #ffffff; color: var(--text-color-light); height: 100%; border-radius: 1rem; overflow: hidden; }
.product-card-bestseller .product-card__body { color: var(--text-color-dark); padding: 1rem; }
.product-card-bestseller .product-card__footer { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid #f0f0f0;}
.product-card-bestseller .product-card__price { 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    margin: 0; 
    flex-wrap: wrap; 
}
.product-card-bestseller img{ margin: 0 auto; width: 90%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 5%; margin-top: 5%;     max-height: 250px;}
.product-card-bestseller h3 { 
    font-size: 1rem; 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
    color: #333; 
    line-height: 1.4; 
    border-right: 3px solid #da7720; 
    padding-right: .5rem; 
}
.product-card-bestseller .btn--secondary { display: flex; align-items: center; gap: .5rem; }

.showcase-section { padding: 2rem 0; background-color: var(--container-color-light); color: var(--text-color-dark); }
.showcase__main { display: grid; grid-template-columns: 100px 1fr 50px; align-items: center; gap: 1rem; position: relative; }
.showcase__color-picker { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
.color-dot { width: 35px; height: 35px; border-radius: 50%; cursor: pointer; transition: .3s; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); }
.color-dot.active { transform: scale(1.2); }
.showcase__image-container { position: relative; text-align: center; padding: 2rem; }
#showcase-img { max-width: 100%; height: auto; }
.info-box { position: absolute; z-index: 10; opacity: 1; transition: opacity .3s; }
.info-text { background: white; padding: 10px 15px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-size: 14px; min-width: 180px; text-align: center; }
.info-dot { width: 8px; height: 8px; background: #333; border-radius: 50%; position: absolute; }
.info-line { width: 1px; height: 50px; background: #333; position: absolute; }
.info-box-right-top { top: 20%; right: 10%; }
.info-box-right-top .info-line { bottom: -120%; right: 10%; transform: rotate(15deg); }
.info-box-right-top .info-dot { bottom: -54px; right: 17px; }
.info-box-right-bottom { bottom: 30%; right: 15%; }
.info-box-right-bottom .info-line { top: -105%; right: 21%; transform: rotate(-15deg); }
.info-box-right-bottom .info-dot { top: -45px; right: 55px; }
.info-box-left { top: 25%; left: 10%; }
.info-box-left .info-line { bottom: -120%; left: 100%; transform: rotate(-15deg); }
.info-box-left .info-dot { bottom: -105%; left: 101%; }
.showcase__slider-nav { display: flex; justify-content: center; }
.nav-bar { width: 4px; height: 120px; background: #ddd; border-radius: 2px; }
.showcase__details { text-align: center; margin: 1rem 0; padding: 1rem; border-radius: 16px; }
.showcase__details h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; color: #333; }
.showcase__details .price { font-size: 1.8rem; font-weight: 700; color: var(--primary-color); margin-top: 1rem; }
.showcase-thumb-slider { margin-top: 2rem; }
.showcase-thumb-slider .swiper-slide { background: white; border: 2px solid #f0f0f0; padding: 0.8rem; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; overflow: hidden; }
.showcase-thumb-slider .swiper-slide:hover { border-color: var(--primary-color); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.showcase-thumb-slider .swiper-slide-thumb-active { border-color: var(--primary-color); background: var(--primary-color-alt); }
.showcase-thumb-slider .swiper-slide img { width: 100%; height: 60px; object-fit: cover; border-radius: 8px; }

/* ----- 2F. SHARED SECTIONS (INSTAGRAM, TRY-ON, BLOG) ----- */
.instagram-promo-section { padding:  0; background: linear-gradient(135deg, #4c0082, #a64ca6); position: relative; overflow: hidden; color: var(--text-color-light); }
.instagram-promo__bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(8rem, 20vw, 14rem); font-weight: 900; color: rgba(255, 255, 255, 0.05); z-index: 1; pointer-events: none; font-family: 'Times New Roman', Times, serif; font-style: italic; }
.instagram-promo__container { display: flex; align-items: center; justify-content: space-between; gap: 3rem; position: relative; z-index: 2; }
.instagram-promo__visual { flex-basis: 50%; position: relative; }
.instagram-promo__visual img { width: 100%; max-width: 550px; margin: 0 auto; }
.instagram-promo__tag { position: absolute; top: 25%; right: 75%; background-color: #e91e63; color: white; padding: .6rem 1.2rem; border-radius: 20px; font-size: .9rem; font-weight: 500; transform: rotate(-15deg); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.instagram-promo__text { flex-basis: 45%; text-align: right; }
.instagram-promo__text h2 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; margin-bottom: 1.5rem; line-height: 1.3; }
.instagram-promo__text p { font-size: 1.1rem; color: #e0e0e0; margin-bottom: 2.5rem; line-height: 1.8; max-width: 450px; }
.btn--promo { background: transparent; border: 2px solid white; color: white; padding: .8rem 2rem; font-size: 1rem; display: inline-flex; align-items: center; gap: .5rem; }
.btn--promo:hover { background: white; color: var(--dark-color); }

.try-on-section { padding: 0rem 0; background-color: var(--body-color-light); color: var(--text-color-dark); }
.try-on__mockup { position: relative; max-width: 700px; margin: 3rem auto 0; border: 12px solid #e9ecef; border-radius: 40px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15); aspect-ratio: 16 / 9; }
.try-on__mockup-bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.try-on__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; text-align: center; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: white; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.try-on__overlay h3 { font-size: 1.8rem; font-weight: 700; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); }
.try-on__overlay .btn { padding: 1rem 2.5rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.try-on__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 180px; height: 25px; background: #e9ecef; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }

.blog-section { padding: 6rem 0; background-color: var(--body-color-light); color: var(--text-color-dark); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.blog-card { border-radius: 1rem; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: .3s; background: #fff;}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.blog-card img { width: 100%; height: 180px; object-fit: cover; }
.blog-card h4 { padding: 1rem; font-size: .9rem; line-height: 1.6; }


/* ============================================= */
/*           3. SHOP PAGE SECTIONS (`shop.html`) */
/* ============================================= */

/* ----- 3A. SHOP HERO & FILTERS ----- */
.shop-hero { background-image: url('images/shop-hero-bgn.jpg'); background-size: cover; background-position: center 40%; padding: 7.5rem 0rem 7.5rem; text-align: center; position: relative; margin-top: auto; color: var(--text-color-light); }
/* .shop-hero::before { content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 1; } */
.shop-hero__content { position: relative; z-index: 2; margin-bottom: 5rem; }
.shop-hero__subtitle { font-size: 2.5rem; font-weight: 200; color: var(--primary-color); opacity: 0.5; letter-spacing: 5px; margin: 0; font-family: 'Times New Roman', Times, serif; }
.shop-hero__title { font-size: 3.5rem; font-weight: 900; margin: -1rem 0 0 0; }
.filters-container-desktop { display: flex; gap: 1.5rem; background-color: var(--body-color-light); color: var(--text-color-dark); padding: 1.5rem; border-radius: 1.25rem; width: 95%; max-width: 1200px; position: absolute; bottom: -5rem; left: 50%; transform: translateX(-50%); z-index: 3; box-shadow: 0 8px 30px rgba(0,0,0,0.1);  }
.filter-box { padding: 1rem; border-radius: 0.75rem; }
.general-filters-box { flex-basis: 70%; background-color: transparent; padding: 0; }
.price-filter-box { flex-basis: 30%; background-color: #f9f9f9; overflow: hidden; }
.filter-box__title { font-size: 1rem; margin-bottom: 1rem; color: #585858; font-weight: 600; }
.general-filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.reset-filters { font-size: 0.85rem; color: #888; display: flex; align-items: center; gap: .4rem; text-decoration: none; transition: color 0.3s ease; }
.reset-filters:hover { color: var(--primary-color); }
.filter-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.filter-option { display: flex; align-items: center; justify-content: space-between; background-color: #f9f9f9; padding: 0.75rem; border-radius: 0.75rem; cursor: pointer; transition: all 0.3s ease; position: relative; }
.filter-option:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.05); background-color: #f0f0f0; }
.filter-option__main { gap: 0.2rem; display: flex; align-items: center; flex: 1; }
.filter-icon { font-size: 1.2rem; width: 28px; text-align: center; color: #bbb; }
.brand-logo-img { 
    width: 28px; 
    height: 28px; 
    object-fit: contain;
    display: block;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.filter-option:hover .brand-logo-img {
    opacity: 1;
}
.filter-option__text { flex: 1; }
.filter-option__text .label { font-size: 0.75rem; display: block; color: #888; margin-bottom: 2px; }
.filter-option__text .value { font-size: 0.85rem; font-weight: 700; display: block; color: var(--text-color-dark); }
.add-icon { font-size: 0.8rem; background-color: #e9e9e9; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; transition: all 0.3s ease; }
.filter-option:hover .add-icon { background-color: #ff7a00; color: white; }
.price-inputs { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; align-items: center; }
.price-input { background-color: #ededed; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.8rem; flex: 1; display: flex; align-items: center; gap: 0.5rem; }
.price-input input[type="number"] { border: none; background: transparent; font-size: 0.8rem; font-weight: 600; color: var(--text-color-dark); width: 80px; text-align: center; }
.price-input input[type="number"]:focus { outline: none; }
.price-value-display { font-size: 0.8rem; color: #666; }
.price-value-display strong { font-weight: 900; color: var(--text-color-dark); }
.price-inputs .btn { padding: 0.5rem 1rem; font-size: 0.8rem; white-space: nowrap; }
.range-slider { position: relative; height: 4px; background-color: #ddd; border-radius: 2px;  }
.slider-track { position: absolute; height: 100%; background-color: var(--primary-color); border-radius: 2px; max-width: 100%; }
.slider-handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background-color: white; border-radius: 50%; border: 3px solid var(--primary-color); box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: grab; }
.slider-handle:active { cursor: grabbing; }

/* ----- 3B. SHOP PRODUCT GRID & PAGINATION ----- */
.shop-products-section { 
    padding-top: 2rem; 
    background: white; 
}

.shop-product-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 2rem; 
    margin-bottom: 2rem;
}

.product-card-discount { 
    background: white; 
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    border: 0px solid #f0f0f0; 
    display: flex; 
    flex-direction: column; 
    height: 480px; /* ارتفاع ثابت */
} 
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    border: 0px solid #f0f0f0; 
    display: flex; 
    flex-direction: column; 
    height: 100%; /* اضافه کردن ارتفاع یکسان */
}
.product-card-shop { background-color: #ffffff; border: 1px solid #f0f0f0; border-radius: 1.25rem; overflow: hidden; transition: box-shadow .3s, transform .3s; color: var(--text-color-dark); display: flex; flex-direction: column; }
.product-card-shop:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); }
.product-card-shop .product-card__image { position: relative; overflow: hidden; aspect-ratio: 1/1; }
.product-card-shop .product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__hover-overlay { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; gap: 1rem; opacity: 0; transition: opacity .3s; }
.product-card-shop:hover .product-card__hover-overlay { opacity: 1; }
.hover-icon { width: 45px; height: 45px; background-color: #ffffff; color: var(--text-color-dark); border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform .2s; }
.hover-icon:hover { transform: scale(1.1); }
.product-card-shop .product-card__content { padding: 1rem; border-top: 1px solid #f0f0f0; display: flex; flex-direction: column; flex-grow: 1; }
.product-card-shop .product-card__title { font-size: 0.9rem; margin: 0; font-weight: 700; }
.product-card-shop .product-card__price-container { margin-bottom: 0.75rem; font-weight: 700; font-size: .9rem; }
.product-card-shop .price-label { color: #888; margin-left: 0.5rem; }
.product-card-shop .product-card__old-price { text-decoration: line-through; color: #e74c3c; margin-left: 0.5rem; font-size: 0.85rem; }
.product-card-shop .product-card__new-price { color: #27ae60; font-size: 1rem; }
.product-card-shop .product-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.product-card-shop .product-card__rating { display: flex; align-items: center; gap: 0.5rem; color: #f39c12; font-weight: 700; font-size: .9rem; }
.btn-add-to-cart { background-color: var(--primary-color); color: var(--dark-color); border: none; padding: 0.6rem 1rem; border-radius: 2rem; font-family: var(--body-font); font-weight: 700; cursor: pointer; transition: background-color .3s; display: flex; align-items: center; gap: 0.5rem; font-size: .8rem; }
.btn-add-to-cart:hover { background-color: #e0954e; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin: 4rem 0 2rem 0; }
.page-number, .page-arrow { width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 50%; display: grid; place-items: center; font-weight: 500; color: var(--text-color-dark); transition: all .3s; }
.page-number:hover, .page-arrow:hover { background-color: #f0f0f0; border-color: #ccc; }
.page-number.active { background-color: var(--primary-color); color: var(--dark-color); border-color: var(--primary-color); font-weight: 700; }

/* ----- 3C. FILTER MODAL & MOBILE PANEL ----- */
.filter-modal-container { background-color: white; color: var(--text-color-dark); width: 90%; max-width: 400px; border-radius: 1rem; overflow: hidden; transform: scale(0.9); transition: all .3s; }
.filter-modal-overlay.active .filter-modal-container { transform: scale(1); }
.filter-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #eee; }
.filter-modal-header h3 { font-size: 1.1rem; margin: 0; }
.filter-modal-header i { cursor: pointer; font-size: 1.2rem; }
.filter-modal-body ul { max-height: 60vh; overflow-y: auto; }
.filter-modal-body li { padding: 1rem 1.5rem; cursor: pointer; transition: background-color .2s; }
.filter-modal-body li:hover { background-color: #f5f5f5; }
.filter-modal-body li:not(:last-child) { border-bottom: 1px solid #f0f0f0; }

.filters-mobile-trigger { display: none; margin: 2rem auto 0; padding: 0.8rem 1.5rem; background-color: var(--primary-color); color: var(--dark-color); border: none; border-radius: 2rem; font-family: var(--body-font); font-weight: 700; font-size: 1rem; gap: 0.5rem; align-items: center; z-index: 2; position: relative; }
.mobile-filters-panel { position: fixed; top: 0; right: -100%; width: 85%; max-width: 350px; height: 100%; background-color: white; z-index: 1010; transition: right .4s ease; display: flex; flex-direction: column; color: var(--text-color-dark); }
.mobile-filters-panel.active { right: 0; }
.mobile-filters-header { padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; flex-shrink: 0; }
.mobile-filters-header h3 { font-size: 1.1rem; }
.mobile-filters-header i { font-size: 1.2rem; cursor: pointer; }
.mobile-filters-content { padding: 1.5rem; flex-grow: 1; overflow-y: auto; }
.mobile-filters-content .filter-options { grid-template-columns: 1fr; }
.mobile-filters-content .price-filter-box { background-color: transparent; padding: 0; }
.mobile-filters-content .filter-box { margin-bottom: 2rem; }
.mobile-filters-footer { padding: 1rem 1.5rem; border-top: 1px solid #eee; flex-shrink: 0; }
.mobile-filters-footer .btn { width: 100%; padding: 1rem; border-radius: 0.75rem; }

.ticket_content input,input {
    background: #f7f3ed;
    border: 1px solid #e9e4dc;
    border-radius: .75rem;
    padding: 15px;
    display: grid;
    margin: 10px;    width: -webkit-fill-available;    font-size: 16px;
    font-family: var(--body-font);
}
.ticket_content input,textarea {
    background: #f7f3ed;
    border: 1px solid #e9e4dc;
    border-radius: .75rem;
    padding: 15px;
    display: grid;
    margin: 10px;    width: -webkit-fill-available;    font-size: 16px;
    font-family: var(--body-font);
}

.products-header
 {
    display: none !important;
}
/* ============================================= */
/*           4. RESPONSIVE DESIGN                */
/* ============================================= */

/* ----- 4A. TABLET & MOBILE VIEW (from ~992px down) ----- */
@media screen and (max-width: 992px) {
    .container { padding: 0 1.5rem; }
    
    /* REFINED MOBILE/TABLET MENU PANEL */
    .nav__menu {
        position: fixed;
        top: var(--header-height, 80px);
        right: -100%;
        width: 90%;
        max-width: 350px;
        height: calc(100vh - var(--header-height, 80px));
        background-color: var(--dark-color-alt);
        padding: 1rem 0;
        transition: right .4s ease-in-out;
        z-index: 101;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        font-size: 1.5rem;
        line-height: 60px;
    }

    .nav__menu.show-menu {
        right: -8%;
        z-index: 101;
    }
    
    .nav__list {
        flex-direction: column;
        gap: 0;
        padding: 0 1rem;
        width: 100%;
    }

    .nav__item .nav__link {
padding: 0.2rem 0.9rem;
        display: flex;
        justify-content: space-between;
        border-radius: 8px;
        margin-bottom: 0.2rem;
    }

    .nav__toggle { 
        display: block;
        z-index: 102;
        padding: 0px 5px;
        margin: 0;
        border: none;
        background: transparent;
        color: var(--text-color-light);
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.3s ease;
        font-size: 1.5rem;
    }
    .nav__toggle:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--primary-color);
    }
    
    /* Mobile navigation overlay */
     .nav__menu::before {
         content: '';
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         /* background: rgba(0, 0, 0, 0.5); */
         pointer-events: none !important;
         z-index: -1;
         opacity: 0;
         transition: opacity 0.3s ease;
         pointer-events: none;
     }
     
     .nav__menu.show-menu::before {
         opacity: 1;
         pointer-events: all;
     }
     
     /* Prevent body scroll when mobile menu is open */
     body.menu-open {
         overflow: hidden;
     }
     
     /* Mobile navigation header */
     .nav__menu .nav__header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 1rem 1.5rem;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         margin-bottom: 1rem;
         background: rgba(0, 0, 0, 0.1);
     }
     
     .nav__menu .nav__title {
         font-size: 1.2rem;
         font-weight: 600;
         color: var(--text-color-light);
     }
     
     .nav__menu .nav__close {
         background: none;
         border: none;
         color: var(--text-color-light);
         font-size: 1.5rem;
         cursor: pointer;
         padding: 8px;
         border-radius: 4px;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 40px;
         height: 40px;
     }
     
     .nav__menu .nav__close:hover {
         background: rgba(255, 255, 255, 0.1);
         color: var(--primary-color);
     }
     
     /* Mobile navigation responsive adjustments */
     @media screen and (max-width: 480px) {
         .nav__menu {
             width: 100%;
             max-width: none;
             right: -150%;
         }
         
         .nav__menu {
        /* top: var(--header-height, 80px);
        right: -100%;
        width: 90%;
        max-width: 350px; */
        height: calc(65vh - var(--header-height, 110px));
        }
         .nav__menu .nav__header {
             padding: 0.8rem 1rem;
         }
         
         .nav__menu .nav__title {
             font-size: 1.1rem;
         }
     }

    @media screen and (max-width: 390px) {
        .nav__menu {
            height: calc(85vh - var(--header-height, 110px));
        }
    }
#suggestions-box {display: none !important;}
     /* ===== ENHANCED MOBILE SUBMENU FIXES ===== */
     
     /* Fix submenu container positioning and overflow */
     .nav__menu .mega-menu {
         position: relative !important;
         width: 100% !important;
         max-width: 100% !important;
         left: 0 !important;
         right: 0 !important;
         margin: 0 !important;
         padding: 0 !important;
         overflow: visible !important;
         box-sizing: border-box !important;
     }
     
     /* Ensure submenu columns don't overflow */
     .nav__menu .mega-menu__column {
         width: 100% !important;
         max-width: 100% !important;
         padding: 0 !important;
         margin: 0 0 0.5rem 0 !important;
         box-sizing: border-box !important;
     }
     
     /* Fix submenu link positioning and clickability */
     .nav__menu .mega-menu__column ul li,
     .nav__menu .mega-menu__list li {
         position: relative !important;
         width: 100% !important;
         margin: 0 !important;
         padding: 0 !important;
     }
     
     .nav__menu .mega-menu__column ul li a,
     .nav__menu .mega-menu__list li a {
         position: relative !important;
         width: 100% !important;
         display: block !important;
         box-sizing: border-box !important;
         margin: 2px 0 !important;
         padding: 0.6rem 1rem !important;
         font-size: 0.8rem !important;
         line-height: 1.4 !important;
         z-index: 10 !important;
         overflow: visible !important;
     }
     
     /* Enhanced touch targets for mobile */
     @media screen and (max-width: 992px) {
         .nav__menu .mega-menu__column ul li a,
         .nav__menu .mega-menu__list li a {
             min-height: 44px !important;
             display: flex !important;
             align-items: center !important;
             padding: 0.8rem 1.2rem !important;
             font-size: 0.85rem !important;
         }
     }
     
     /* Fix column headers */
     .nav__menu .mega-menu__column-title,
     .nav__menu .mega-menu__column h4 {
         width: 100% !important;
         box-sizing: border-box !important;
         margin: 0 0 0.3rem 0 !important;
         padding: 0.7rem 1rem !important;
         font-size: 0.9rem !important;
         line-height: 1.3 !important;
     }
     
     /* Remove any potential overflow issues */
     .nav__menu .nav__item {
         position: relative !important;
         overflow: visible !important;
     }
     
     .nav__menu .megamenu-parent {
         position: relative !important;
         overflow: visible !important;
     }
     
     /* Ensure proper spacing and no overlap */
     .nav__menu .megamenu-parent.active > .mega-menu {
         margin-top: 0.3rem !important;
         margin-bottom: 0.3rem !important;
         padding: 0.5rem !important;
         max-height: 60vh !important;
         overflow-y: auto !important;
         -webkit-overflow-scrolling: touch !important;
     }
     
     /* Fix for very small screens */
     @media screen and (max-width: 360px) {
         .nav__menu .mega-menu__column ul li a,
         .nav__menu .mega-menu__list li a {
             font-size: 0.75rem !important;
             padding: 0.6rem 0.8rem !important;
         }
         
         .nav__menu .mega-menu__column-title,
         .nav__menu .mega-menu__column h4 {
             font-size: 0.8rem !important;
             padding: 0.6rem 0.8rem !important;
         }
     }
     
     /* Tablet specific fixes */
     @media screen and (min-width: 481px) and (max-width: 992px) {
         .nav__menu .mega-menu__column {
             margin-bottom: 0.8rem !important;
         }
         
         .nav__menu .mega-menu__column ul li a,
         .nav__menu .mega-menu__list li a {
             font-size: 0.9rem !important;
             padding: 0.7rem 1.1rem !important;
         }
     }
     
     /* Ensure proper click behavior */
     .nav__menu .mega-menu__column ul li a:active,
     .nav__menu .mega-menu__list li a:active {
         background-color: rgba(0,0,0,0.4) !important;
         transform: scale(0.98) !important;
     }
     
     /* Fix z-index issues */
     .nav__menu .mega-menu {
         z-index: 5 !important;
     }
     
     .nav__menu .mega-menu__column {
         z-index: 6 !important;
     }
     
     .nav__menu .mega-menu__column ul li a,
     .nav__menu .mega-menu__list li a {
         z-index: 7 !important;
     }
     
     /* Mobile menu overlay */
     .nav__overlay {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         /* background-color: rgba(0,0,0,0.7);
         backdrop-filter: blur(2px); */
         z-index: 999;
         opacity: 0;
         transition: opacity 0.3s ease;
     }
     
     .nav__overlay.active {
         display: block;
         opacity: 1;
     }
     
     /* Adjust nav menu z-index */
     .nav__menu {
         z-index: 1000 !important;
     }
     
     /* Visual feedback for clicked submenu items */
     .submenu-clicked {
         background-color: rgba(0,0,0,0.4) !important;
         transform: scale(0.98) !important;
         transition: all 0.1s ease !important;
     }
     
     /* Mobile simple submenu styles */
     .mobile-simple-submenu {
         display: none;
         list-style: none;
         margin: 0;
         padding: 0;
         background-color: rgba(0,0,0,0.1);
         border-radius: 8px;
         margin-top: 0.5rem;
         margin-bottom: 0.5rem;
         overflow: hidden;
     }
     
     .mobile-simple-submenu .mobile-submenu-item {
         margin: 0;
         padding: 0;
         border-bottom: 1px solid rgba(255,255,255,0.1);
     }
     
     .mobile-simple-submenu .mobile-submenu-item:last-child {
         border-bottom: none;
     }
     
     .mobile-simple-submenu .mobile-submenu-link {
         display: block;
         padding: 0.8rem 1.5rem !important;
         color: #fff !important;
         text-decoration: none;
         font-size: 0.9rem !important;
         font-weight: 400 !important;
         transition: all 0.2s ease;
         position: relative;
         min-height: 44px !important;
         line-height: 1.4 !important;
     }
     
     .mobile-simple-submenu .mobile-submenu-link:hover,
     .mobile-simple-submenu .mobile-submenu-link:focus {
         background-color: rgba(255,255,255,0.1) !important;
         padding-right: 1.8rem !important;
     }
     
     .mobile-simple-submenu .mobile-submenu-link::before {
         content: '→';
         position: absolute;
         right: 1rem;
         top: 50%;
         transform: translateY(-50%);
         opacity: 0;
         transition: opacity 0.2s ease;
     }
     
     .mobile-simple-submenu .mobile-submenu-link:hover::before {
         opacity: 1;
     }
     
     /* Landscape mobile optimization */
     @media screen and (max-width: 992px) and (orientation: landscape) {
         .nav__menu {
             height: 100vh !important;
             max-height: 100vh !important;
             overflow-y: auto !important;
         }
         
         .nav__menu .megamenu-parent.active > .mega-menu {
             max-height: 50vh !important;
             overflow-y: auto !important;
         }
         
         .nav__menu .mega-menu__column ul li a,
         .nav__menu .mega-menu__list li a {
             min-height: 38px !important;
             padding: 0.5rem 1rem !important;
             font-size: 0.8rem !important;
         }
         
         .mobile-simple-submenu .mobile-submenu-link {
             min-height: 38px !important;
             padding: 0.5rem 1rem !important;
             font-size: 0.8rem !important;
         }
     }
     
     /* Tablet portrait optimization */
     @media screen and (min-width: 601px) and (max-width: 992px) and (orientation: portrait) {
         .nav__menu {
             max-width: 400px !important;
         }
          .nav__menu.show-menu {
                    right: 22%;
            margin-top: -25%;
            z-index: -40 !important;
    }
        .nav__menu .nav__header {
        display: none;}
         .nav__menu .mega-menu__column {
             display: block !important;
             width: 100% !important;
             margin-bottom: 1rem !important;
         }
         
         .nav__menu .mega-menu__column ul li a,
         .nav__menu .mega-menu__list li a {
             font-size: 0.95rem !important;
             padding: 0.8rem 1.3rem !important;
         }
     }
    
    /* MOBILE MEGA MENU (ACCORDION) */
    .mega-menu {
        position: relative;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        border: none;
        padding: 0;
        display: none !important; 
        flex-direction: column;
        gap: 0;
        box-shadow: none;
        height: auto;
        max-height: none;
        overflow-y: visible;
        min-height: auto;
        top: 0;
    }

    .megamenu-parent.active > .mega-menu {
        display: flex !important;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.8rem;
        background-color: rgba(0,0,0,0.1);
        border-radius: 8px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .megamenu-parent.active > .nav__link {
        color: var(--primary-color);
        background-color: rgba(0,0,0,0.1);
        border-radius: 8px;
    }
    
    .megamenu-parent.active .nav__link .nav__link-icon {
        transform: rotate(180deg);
    }

    .mega-menu__column { padding: 0; margin-bottom: 0.5rem; }
    .mega-menu__column-title { display: block; font-size: 0.9rem; padding: 0.6rem 1rem; margin-bottom: 0.3rem; background-color: rgba(0,0,0,0.15); border-radius: 8px; }
    .mega-menu__column-title a { color: var(--primary-color); text-decoration: none; }
    .mega-menu__column h4 { display: block; font-size: 0.9rem; padding: 0.6rem 1rem; margin-bottom: 0.3rem; background-color: rgba(0,0,0,0.15); border-radius: 8px; }
    .mega-menu__column ul, .mega-menu__list { margin-bottom: 0.5rem; }
    .mega-menu__column ul li a, .mega-menu__list li a { 
        padding: 0.5rem 1rem; 
        font-size: 0.85rem; 
        background-color: rgba(0,0,0,0.2); 
        border-radius: 4px; 
        margin: 3px 0; 
        display: block;
        width: 100%;
        text-decoration: none;
    }
    .mega-menu__column ul li a:hover, .mega-menu__list li a:hover { 
        background-color: rgba(0,0,0,0.3); 
        padding-right: 1.5rem; 
        color: var(--primary-color);
    }
    .mega-menu__image { display: none !important; }
    
    /* Other responsive fixes */
    .nav__actions .btn { display: inline-block; }
    .product-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem;
        padding: 2rem 1rem; 
    }
    /* New Experience section: force two columns on tablet/mobile */
    .product-grid-alt {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin: 2rem 0;
        padding: 0 1rem;
        overflow: visible;
    }
    .product-card-alt { width: 100%; min-width: 0; }
    .product-card-discount { 
        height: 400px; /* ارتفاع کمتر برای تبلت */
    }
.features-grid { grid-template-columns: repeat(2, 1fr); padding: 2rem 1rem; gap: 1rem; }
    .brands__model-img { max-width: 350px; }
    .rating-box { display: none; }
    .trust-gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .trust-gallery__item:nth-child(n) { transform: translateY(0) !important; }
    .trust-gallery__item:nth-child(4), .trust-gallery__item:nth-child(5) { display: none; }
    .medical-section__container { flex-direction: column; }
    .bestsellers-section__content { flex-direction: column; }
    .bestsellers__title-part { flex: 0 0 auto; margin-bottom: 2rem; }
    .bestsellers__products-part { width: 100%; }
    .showcase__main { grid-template-columns: 1fr; gap: 2rem; }
    .showcase__color-picker { flex-direction: row; justify-content: center; order: 2; margin-top: 2rem; }
    .showcase__image-container { order: 1; }
    .showcase__slider-nav, .info-box { display: none; }
    .showcase__details { margin-top: 0; }
    .instagram-promo__container { flex-direction: column; text-align: center; }
    .instagram-promo__text { text-align: center; order: 1; }
    .instagram-promo__text p { margin-right: auto; margin-left: auto; }
    .instagram-promo__visual { order: 2; }
    .instagram-promo__tag { top: 10%; right: auto; left: 5%; transform: rotate(-10deg); }
    .try-on__overlay h3 { font-size: 1.4rem; }
    .try-on__overlay .btn { padding: 0.8rem 1.8rem; font-size: .9rem; }
    .floating-contact-bar { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .shop-product-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem;
    }
    .product-card-discount { 
        height: 400px; /* تنظیم ارتفاع برای تبلت */
    }
    .filter-options { grid-template-columns: repeat(2, 1fr); }
    .filters-container-desktop { flex-direction: column; bottom: auto; position: relative; margin: -6rem auto 3rem auto; }
	
    .shop-products-section { 
        padding-top: 0; 
    }
}
.osmani-filter-select {
    border: 0px !important;
    background-color: #ffffff00 !important;}
@media screen and (min-width: 1024px) {
    .woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li {
        padding: 0 !important;
    }

    .osmani-mini-cart .woocommerce-mini-cart-item {
        grid-template-columns: 0px 1fr 180px !important;
    }
    .osmani-mini-cart {
        left: 10% !important;
        right: auto !important;
        transform-origin: top right;
    }
}
/* ----- 4B. MOBILE (LARGE) ~768px ----- */
@media screen and (max-width: 768px) {
    .story-section {
    padding: 15px 10px 5px 5px !important;
}
    /* Fix for mobile layout shifting issue */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Ensure hero slider does not cause horizontal overflow */
    .hero-slider {
        overflow: hidden;
    }
    /* Additional fixes for hero section and swiper */
    .hero {
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    .swiper-wrapper {
        width: 100%;
        overflow-x: hidden;
    }
    /* Fixes for modals and overlays */
    .modal-overlay, .filter-modal-overlay, .panel-overlay, .search-overlay {
        overflow-x: hidden;
        width: 100vw;
        box-sizing: border-box;
    }
    .search-container {
        max-width: 95vw;
    }
    
    /* Fix for transform issues in mobile */
    .category-carousel .swiper-slide.prev { 
        transform: scale(0.8) translateX(-30%) !important; 
    }
    .category-carousel .swiper-slide.next { 
        transform: scale(0.8) translateX(30%) !important; 
    }
    
    /* Keep header fixed without causing overflow */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        /* overflow-x: hidden; */
    }
    
    /* Additional fixes for header elements */
    .nav {
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .nav__menu,
    .nav__actions {
        flex-wrap: nowrap;
        overflow-x: hidden;
    }
    
    .nav__logo img {
        max-width: 100%;
        height: auto;
    }
    
    .nav__toggle,
    .nav__icon {
        flex-shrink: 0;
    }
    
    .btn--primary {
        white-space: nowrap;
        flex-shrink: 0;
    }
    body { font-size: .9rem; }
    .section__title { font-size: 1.8rem; color: #000000;}
    .hero__social, .hero__support { display: none; }
    .hero__model-img { height: 75%; }
    .hero__description { font-size: 1rem; }
    .story-preview { display: none; }
    .story-navigation { padding: 0 .5rem; }
    .story-nav-btn { width: 40px; height: 40px; }
    .discount-section, .bestsellers-section { clip-path: none; padding: 4rem 0; }
    
    /* Mobile responsive for discount header */
    .discount__header { 
        flex-direction: column; 
        gap: 1.5rem; 
        padding: 2rem 1.5rem; 
        align-items: center;
        text-align: center;
    }
    
    .discount__title {
        align-items: center;
        text-align: center;
    }
    
    .flip-countdown-container {
        align-items: center;
        width: 100%;
    }
    
    .product-grid { 
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 1.5rem;
        padding: 2rem 1.5rem 4rem; /* کاهش padding بالا از 7rem به 2rem */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .product-grid::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }
    
    .product-grid .product-card-discount {
        flex: 0 0 280px; /* عرض ثابت برای هر کارت */
        min-width: 280px;
        max-width: 280px;
        height: 480px; /* ارتفاع ثابت برای موبایل */
    }
    /* چیدمان دو ستونه برای بخش "وقتی تجربه، برندی نو خلق میکند" در موبایل */
    .product-grid-alt {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        margin: 2rem 0;
        padding: 0 1rem;
        overflow: visible;
    }
    .product-grid-alt::-webkit-scrollbar { display: none; }
    .product-card-alt { width: 100%; min-width: 0; }
    
    .category-carousel .swiper-slide { width: 350px; height: 400px; }
    .category-carousel .swiper-slide.prev { transform: scale(0.8) translateX(-50%); }
    .category-carousel .swiper-slide.next { transform: scale(0.8) translateX(50%); }
    #cat-carousel-subtitle { 
    font-size: 2.5rem; 
    font-family: 'Kapakana', fantasy !important; 
    background: linear-gradient(135deg, #ff6b35, #f7931e, #ffd700); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    font-weight: 900; 
}
    .cat-next, .cat-prev { display: none; }
    .trust-gallery { grid-template-columns: repeat(2, 1fr); }
    .trust-gallery__item:nth-child(3) { display: none; }
    .guarantee__content { flex-direction: column; gap: 2rem; }
    .guarantee__crown-left, .guarantee__crown-right { display: none; }
    .footer { padding-top: 2rem; }
    .floating-contact-bar { position: static; transform: none; width: 100%; border-radius: 0; grid-template-columns: 1fr; padding: 2rem 1.5rem; }
    .footer__bottom-content { flex-direction: column; gap: 1.5rem; text-align: center; }
    .filters-container-desktop { display: none; }
    .filters-mobile-trigger { display: inline-flex; }
    .shop-products-section { 
        padding-top: 2rem; 
    }
    .shop-product-grid { 
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 1.5rem;
        padding: 0 1.5rem;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .shop-product-grid::-webkit-scrollbar {
        display: none;
    }
    
    .shop-product-grid .product-card-discount {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
        height: 380px; /* ارتفاع ثابت برای موبایل */
    }
    /* چیدمان دو ستونه برای بخش برندها (mobile) */
    .product-grid-alt {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        margin: 2rem 0;
        padding: 0 1rem;
        overflow: visible;
    }
    .product-grid-alt::-webkit-scrollbar { display: none; }
    .product-card-alt { width: 100%; min-width: 0; }
    .shop-hero { padding-bottom: 8rem; }
    .shop-hero__title { font-size: 3rem; }
    .shop-hero__subtitle { font-size: 2rem; }
    
    /* Product Detail Page Tablet Optimizations */
    .product-detail-container { padding: 1.5rem; }
    .product-gallery { margin-bottom: 2rem; }
    .main-image { height: 400px; }
    .thumbnails { gap: 0.75rem; margin-top: 1rem; }
    .thumb-item { width: 80px; height: 80px; }
    
    .product-info { padding: 1.5rem 0; }
    .product-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
    .product-price { font-size: 2rem; margin-bottom: 2rem; }
    
    .product-options { gap: 1.5rem; margin-bottom: 2rem; }
    .option-group { margin-bottom: 2rem; }
    .color-options, .size-options { gap: 0.75rem; }
    .color-option { width: 40px; height: 40px; }
    .size-option { padding: 0.75rem 1.25rem; }
    
    .quantity-selector { margin-bottom: 2rem; }
    .quantity-controls { gap: 0.75rem; }
    .quantity-btn { width: 40px; height: 40px; }
    .quantity-input { width: 80px; height: 40px; }
    
    .action-buttons { gap: 1rem; margin-bottom: 2rem; }
    .btn-add-to-cart, .btn-installment { padding: 1rem 2rem; }
    
    .product-tabs { margin-top: 2rem; }
    .tab-buttons { gap: 0.75rem; }
    .tab-btn { padding: 0.75rem 1.25rem; }
    
    .comments-section { margin-top: 2rem; }
    .comment-item { padding: 1.25rem; margin-bottom: 1.25rem; }
    .comment-form { padding: 1.25rem; }
}

/* ----- 4C. MOBILE (SMALL) ~576px ----- */
@media screen and (max-width: 576px) {
    .container { padding: 0 1rem; }
    .btn {         padding:0.3rem 1.3rem;  font-size: 1.0rem;}
    .modal-container { padding: 1.5rem; }
    .code-inputs { gap: .5rem; }
    .code-inputs input { width: 40px; height: 40px; font-size: 1.2rem; }
    /* Story Section Mobile Optimization */
    .story-section { 
        padding: 1.5rem 1rem; 
        display: flex; 
        gap: 1rem; 
        justify-content: flex-start; 
        overflow-x: auto; 
        overflow-y: hidden;
        scrollbar-width: none; 
        background-color: #000000; 
        margin: 0; 
        width: 100%; 
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .osmani-mini-cart-attrs{display: none !important;}
    .story-section::-webkit-scrollbar { 
        display: none; 
    }
    
    .story-item { 
        cursor: pointer; 
        text-align: center; 
        flex-shrink: 0; 
        min-width: 90px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        white-space: normal;
    }
    
    .story-item__img-wrapper { 
        width: 70px; 
        height: 70px; 
        border-radius: 50%; 
        background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); 
        display: grid; 
        place-items: center; 
        margin: 0 auto; 
        transition: .3s; 
        position: relative;
        padding: 3px;
    }
    
    .story-item:hover .story-item__img-wrapper { 
        transform: scale(1.05); 
    }
    
    .story-item img { 
        width: 64px; 
        height: 64px; 
        border-radius: 50%; 
        object-fit: cover; 
        border: 2px solid #000; 
    }
    
    .story-item span { 
        display: block; 
        margin-top: .5rem; 
        font-size: .75rem; 
        color: #ffffff; 
        line-height: 1.2;
        max-width: 80px;
        word-wrap: break-word;
        text-align: center;
    }
    
    /* Story Slide Content Mobile */
    .story-slide-content { 
        max-width: 320px; 
        border-radius: 1rem; 
    }
    
    /* Story Thumbnails Container Mobile */
    .story-thumbnails-container { 
        position: absolute; 
        bottom: 2rem; 
        left: 50%; 
        transform: translateX(-50%); 
        display: flex; 
        gap: 0.75rem; 
        background: rgba(0,0,0,0.7); 
        padding: 0.75rem 1rem; 
        border-radius: 1.5rem; 
        backdrop-filter: blur(15px); 
        max-width: 90%;
        overflow-x: auto;
        scrollbar-width: none;
        z-index: 1000;
    }
    
    .story-thumbnails-container::-webkit-scrollbar { 
        display: none; 
    }
    
    .story-bottom-thumb { 
        width: 45px; 
        height: 45px; 
        border-radius: 50%; 
        cursor: pointer; 
        border: 2px solid transparent; 
        transition: all 0.3s ease; 
        object-fit: cover; 
        flex-shrink: 0;
        position: relative;
    }
    
    .story-bottom-thumb.active { 
        border: 3px solid var(--primary-color); 
        transform: scale(1.1); 
        box-shadow: 0 0 15px rgba(243, 156, 18, 0.5);
    }
    
    .story-bottom-thumb.active::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: 50%;
        background: conic-gradient(from 0deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
        z-index: -1;
        animation: story-border-rotate 2s linear infinite;
    }
    
    @keyframes story-border-rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .category-carousel .swiper-slide { width: 280px; height: 350px; }
    /* موبایل: گرید دو ستونه برای شگفت‌انگیزها */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        padding: 1rem;
        overflow: visible;
    }
    /* حفظ رفتار اسکرولی برای گرید فروشگاه */
    .shop-product-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 1.5rem;
        padding: 2rem 1.5rem 4rem; /* کاهش padding بالا از 7rem به 2rem */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .product-grid::-webkit-scrollbar,
    .shop-product-grid::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }
    
    .product-grid .product-card-discount { width: 100%; min-width: 0; max-width: none; }
    .shop-product-grid .product-card-discount {
        flex: 0 0 280px; /* عرض ثابت برای هر کارت */
        min-width: 280px;
        max-width: 280px;
    }
    .product-grid-alt {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        margin: 2rem 0;
        padding: 0 1rem;
        overflow: visible;
    }
    
    .product-grid-alt::-webkit-scrollbar {
        display: none;
    }
    
    .product-card-alt { width: 100%; min-width: 0; }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.feature-item { padding: 0.25rem 0; flex-direction: row; align-items: center; gap: 0.5rem; text-align: right; direction: rtl; }
.feature-item i { margin-bottom: 0; }
.feature-item span { color: #fff; line-height: 1.5; }
    .brands-section { padding: 4rem 0; }
    .brands-section__bg { display: none; }
    .brands__model-img { max-width: 80%; margin-top: -2rem; }
    .brand-logo-slider .swiper-slide { width: 120px; }
    .brand-logo-slider img { max-height: 30px; }
.trust-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.trust-gallery__item { aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.trust-gallery__item img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
.trust-gallery__item:nth-child(2) { display: block; }
    .bestsellers__title-part h2 { font-size: 1.5rem; }
    .showcase__details h3 { font-size: 1.2rem; }
    .showcase__details .price { font-size: 1.5rem; }
    .instagram-promo-section { padding: 4rem 1rem; }
    .instagram-promo__tag { display: none; }
    .try-on-section { padding: 4rem 0; }
    .try-on__mockup { border-width: 8px; border-radius: 25px; margin-top: 2rem;}
    .try-on__notch { width: 120px; height: 20px; }
    .try-on__overlay { padding: 1.5rem 1rem; gap: 1rem; }
    .try-on__overlay h3 { font-size: 1.1rem; }
    .try-on__overlay .btn { width: 90%; justify-content: center; }
    .category-item { margin: 0 auto; }
    .blog-grid { grid-template-columns: 1fr; }
    .floating-contact-bar { grid-template-columns: 1fr; }
    .filter-options { grid-template-columns: 1fr; }
    /* Hero Section - Mobile Optimization */
    .hero { 
        height: 55vh; 
        margin-top: 0;
        min-height: 500px;
    }
    
    .hero-slider { 
        height: 70vh; 
        min-height: 500px;
    }
    
    .hero-slider .swiper-slide { 
        height: 70vh; 
        min-height: 500px;
        align-items: center;
        justify-content: center;
    }
    
    .hero__bg-layer { 
        height: 70vh; 
        min-height: 500px;
        background-size: cover;
        background-position: center center;
    }
    
    .hero__model-img { 
        height: 65%; 
        max-height: 350px;
        bottom: 10%;
        /* left: 50%;
        transform: translateX(-50%); */
        object-fit: contain;
        object-position: center bottom; margin:  0 auto !important;
    }
    
    .hero__text { 
        position: absolute;
        bottom: 15%;
        /* left: 20%; 
        transform: translateX(-30%);*/
        width: 90%;
        max-width: 400px;
        z-index: 10;
        text-align: center;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        margin:  0 auto !important;
    }
    
    .hero__title { 
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important; 
        font-weight: 900; 
        text-shadow: 2px 2px 15px rgba(0,0,0,0.8) !important; 
        line-height: 1.1 !important;
        color: #ffffff !important; 
        margin-bottom: 0.8rem !important;
        text-align: center !important;
    }
    
    .hero__title span { 
        color: var(--primary-color) !important; 
        text-shadow: 2px 2px 15px rgba(0,0,0,0.8) !important;
    }
    
    .hero__description { 
        font-size: 0.9rem !important; 
        color: #ffffff !important; 
        margin: 0 !important; 
        line-height: 1.4 !important;
        text-shadow: 1px 1px 10px rgba(0,0,0,0.8) !important;
        text-align: center !important;
        font-weight: 500 !important;
    }
    .herext {margin-top: -10% !important;    }
.category-carousel { height: 400px;padding: 1rem 0;}
.category-carousel-section {   padding: 1rem 0;}
.discount-section::before {clip-path: none;}
.discount__title h2 {    text-align: center;}
.new-experience-section {padding: 0rem 0;}
.section__title-container {   margin-bottom: 2rem;}
.discount__title span {text-align: center; }

    /* Force two-column grid for Amazing Offers section on mobile */
    .discount-section .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Product Detail Page Mobile Optimizations */
    .product-detail-container { padding: 1rem; }
    .product-gallery { margin-bottom: 2rem; }
    .main-image { height: 300px; }
    .thumbnails { gap: 0.5rem; margin-top: 1rem; }
    .thumb-item { width: 60px; height: 70px; }
    
    .product-info { padding: 1rem 0; }
    .product-title { font-size: 18px; margin-bottom: 1rem; }
    .product-price { font-size: 1.8rem; margin-bottom: 1.5rem; }
    
    .product-options { gap: 1rem; margin-bottom: 2rem; }
    .option-group { margin-bottom: 1.5rem; }
    .option-group label { font-size: 0.9rem; margin-bottom: 0.5rem; }
    .color-options, .size-options { gap: 0.5rem; }
    .color-option { width: 35px; height: 35px; }
    .size-option { padding: 0.5rem 1rem; font-size: 0.9rem; }
    
    .quantity-selector { margin-bottom: 1.5rem; }
    .quantity-controls { gap: 0.5rem; }
    .quantity-btn { width: 35px; height: 35px; font-size: 1rem; }
    .quantity-input { width: 60px; height: 35px; font-size: 0.9rem; }
    
    .action-buttons { flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
    .btn-add-to-cart, .btn-installment { width: 100%; padding: 1rem; font-size: 1rem; }
    
    .product-tabs { margin-top: 2rem; }
    .tab-buttons { flex-wrap: wrap; gap: 0.5rem; }
    .tab-btn { padding: 0.7rem 1rem; font-size: 0.9rem; }
    
    .comments-section { margin-top: 2rem; }
    .comment-item { padding: 1rem; margin-bottom: 1rem; }
    .comment-author { font-size: 0.9rem; }
    .comment-body { font-size: 0.85rem; line-height: 1.6; }
    .comment-form { padding: 1rem; }
    .comment-form input, .comment-form textarea { font-size: 0.9rem; }
    
    /* Modal Optimizations */
    .image-modal-content { width: 95%; height: 80%; }
    .installment-modal-content { width: 95%; padding: 1.5rem; }
    .installment-table { font-size: 0.8rem; }
    .installment-table th, .installment-table td { padding: 0.5rem; }
    
    /* Validation Messages */
    .validation-message { font-size: 0.8rem; padding: 0.5rem; }
}
nav.breadcrumbs {
    margin-bottom: 2%;
    margin-top: -5%;
}
/* ============================================= */
/* Footer: responsive 1-2-1 layout on tablet/mobile */
@media (max-width: 992px) {
  /* دو ستون در موبایل/تبلت؛ ستون اول و آخر تمام عرض */
  .footer__container {
    display: grid; /* اطمینان از گرید بودن */
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .footer__col {
    width: 100%;
  }

  /* ستون‌های اول و آخر تمام عرض؛ دوم و سوم هرکدام 50% */
  .footer__col:first-child,
  .footer__col:last-child {
    grid-column: 1 / -1;
  }
}
/* ============================================= */
/*           5. USERCO PAGE SECTIONS (CORRECTED) */
/* ============================================= */

/* ----- 5A. GENERAL & PUZZLE GALLERY ----- */
.customers-story-section .story-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.section-button-container {
    text-align: center;
    margin-top: 2.5rem;
    margin-bottom: 5rem;
}

.puzzle-gallery-section {
    padding: 3rem 1rem;
}
/* Hero Navigation Buttons - Mobile Optimization */
    .hero-next, .hero-prev { 
        color: var(--primary-color); 
        z-index: 100 !important;
        width: 35px !important;
        height: 35px !important;
        margin-top: -17.5px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .hero-next::after, .hero-prev::after {
        content: '\f105' !important;
        font-family: 'Font Awesome 6 Free' !important;
        font-weight: 900 !important;
        font-size: 14px !important;
        color: var(--primary-color) !important;
    }
    
    .hero-prev::after {
        content: '\f104' !important;
    }
    
    .hero-next {
        right: 10px !important;
    }
    
    .hero-prev {
        left: 10px !important;
    }
    
    /* General Swiper Button Styles for Mobile */
    .swiper-button-next, .swiper-button-prev {
        color: var(--primary-color) !important;
        width: 35px !important;
        height: 35px !important;
        margin-top: -17.5px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    .swiper-button-next::after, .swiper-button-prev::after {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--primary-color) !important;
    }
.puzzle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px; /* ارتفاع پایه هر سلول گرید */
    gap: 1.5rem;
}

.puzzle-item {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform .3s ease;
}

.puzzle-item:hover {
    transform: scale(1.03);
    z-index: 10;
}

.puzzle-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* کلاس‌های مربوط به اندازه آیتم‌ها در گرید */
.puzzle-item--large {
    grid-column: span 2;
    grid-row: span 2;
}

.puzzle-item--small-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: none;
    border-radius: 0;
}
.puzzle-item--small-stack:hover {
    transform: none; /* استک اصلی حرکت نمی‌کند */
}

.puzzle-item__stacked {
    flex: 1;
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform .3s ease;
}
.puzzle-item__stacked:hover {
    transform: scale(1.05); /* هر آیتم داخل استک جداگانه حرکت می‌کند */
    z-index: 10;
}

.puzzle-item__icon-wrapper {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 40px;
    height: 40px;
    background-color: #3598db;
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    z-index: 2;
}

/* ----- 5B. VIDEO GRID STYLES ----- */
.video-grid .puzzle-item,
.video-grid .puzzle-item__stacked {
    cursor: pointer;
}

.video-item__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 2;
    transition: background-color .3s;
}

.video-item__play-btn i {
    font-size: 1.5rem;
    color: #fff;
    margin-left: 4px; /* visual center alignment */
}

.puzzle-item:hover .video-item__play-btn,
.puzzle-item__stacked:hover .video-item__play-btn {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ----- 5C. TESTIMONIALS & FORM (FROM PREVIOUS) ----- */
.testimonials-section { padding: 3rem 1rem; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; }
.testimonial-card { background-color: var(--dark-color-alt); padding: 2rem; border-radius: 1.5rem; border-left: 5px solid var(--primary-color); }
.testimonial-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.testimonial-card__date { font-size: 0.8rem; color: var(--text-color-muted); direction: ltr; display: block; }
.testimonial-card__name { font-size: 1.1rem; margin-top: .25rem; }
.testimonial-card__quote-icon { width: 40px; height: auto; }
.testimonial-card__text { font-size: 0.9rem; line-height: 1.9; color: var(--text-color-muted); }

.audio-player { display: flex; align-items: center; gap: 1rem; background-color: rgba(0,0,0,0.25); padding: .75rem; border-radius: .75rem; margin-top: 1.5rem; }
.audio-player__play-btn { background-color: var(--primary-color); color: var(--dark-color); border: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; }
.audio-player__track { position: relative; flex-grow: 1; cursor: pointer; height: 35px; display: flex; align-items: center; }
.audio-player__waveform { width: 100%; height: 100%; object-fit: contain; filter: brightness(0.7); }
.audio-player__progress { position: absolute; top: 0; left: 0; height: 100%; width: 10%; background-image: url('images/assets/waveform.png'); background-size: cover; background-position: left; -webkit-mask-image: url('images/assets/waveform.png'); mask-image: url('images/assets/waveform.png'); mask-size: cover; mask-repeat: no-repeat; filter: brightness(1.5) contrast(1.2); pointer-events: none; }
.audio-player__time { font-size: 0.85rem; color: var(--text-color-muted); font-weight: 500; direction: ltr; }
.audio-player__volume i { font-size: 1.2rem; color: var(--text-color-muted); }

.feedback-form-section { padding: 3rem 1rem; margin-bottom: 4rem; }
.feedback-form { max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.feedback-form input, .feedback-form textarea { width: 100%; background-color: var(--dark-color-alt); border: 1px solid #333; border-radius: 1rem; padding: 1.2rem; color: var(--text-color-light); font-family: var(--body-font); font-size: 1rem; }
.feedback-form textarea { grid-column: 1 / -1; }
.feedback-form button { grid-column: 1 / -1; justify-self: center; padding: 1rem 4rem; font-size: 1rem; }
::placeholder { color: #888; }


/* ----- 5D. RESPONSIVE FOR PUZZLE GALLERY ----- */
@media screen and (max-width: 992px) {
    .puzzle-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 250px;
    }
    .testimonials-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
    .feedback-form { grid-template-columns: 1fr; }
}

@media screen and (max-width: 576px) {
    .puzzle-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 300px;
    }
    .puzzle-item--large {
        grid-column: span 1;
        grid-row: span 1;
        height: 400px;
    }
    .puzzle-item--small-stack {
        display: none;
    }
}

/* ----- 5B. TESTIMONIALS SECTION ----- */
.testimonials-section {
    padding: 3rem 1rem;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}
.testimonial-card {
    background-color: var(--dark-color-alt);
    padding: 2rem;
    border-radius: 1.5rem;
    border-left: 5px solid var(--primary-color);
}
.testimonial-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.testimonial-card__date {
    font-size: 0.8rem;
    color: var(--text-color-muted);
    direction: ltr;
    display: block;
}
.testimonial-card__name {
    font-size: 1.1rem;
    margin-top: .25rem;
}
.testimonial-card__quote-icon {
    width: 40px;
    height: auto;    border-radius: 50%;
}
.testimonial-card__text {
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--text-color-muted);
}

/* ----- 5C. AUDIO PLAYER ----- */
.audio-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(0,0,0,0.25);
    padding: .75rem;
    border-radius: .75rem;
    margin-top: 1.5rem;
}
.audio-player__play-btn {
    background-color: var(--primary-color);
    color: var(--dark-color);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.audio-player__track {
    position: relative;
    flex-grow: 1;
    cursor: pointer;
    height: 35px;
    display: flex;
    align-items: center;
}
.audio-player__waveform {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0.7);
}
.audio-player__progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 10%; /* Initial progress */
    background-image: url('images/assets/waveform.png'); /* Same image for progress */
    background-size: cover;
    background-position: left;
    -webkit-mask-image: url('images/assets/waveform.png');
    mask-image: url('images/assets/waveform.png');
    mask-size: cover;
    mask-repeat: no-repeat;
    filter: brightness(1.5) contrast(1.2);
    pointer-events: none;
}
.audio-player__time {
    font-size: 0.85rem;
    color: var(--text-color-muted);
    font-weight: 500;
    direction: ltr;
}
.audio-player__volume i {
    font-size: 1.2rem;
    color: var(--text-color-muted);
}

/* ----- 5D. FEEDBACK FORM SECTION ----- */
.feedback-form-section {
    padding: 3rem 1rem;
    margin-bottom: 4rem;
}
/* ----- 5D. FEEDBACK FORM SECTION ----- */
.feedback-form-section {
    padding: 5rem 0;
    background-color: #000000;
}

.feedback-form {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: right;
}

.feedback-form input,
.feedback-form textarea {
    width: 100%;
    background-color: var(--dark-color-alt);
    border: 1px solid rgb(0 0 0 / 13%);
    border-radius: 0.5rem;
    padding: 1rem;
    color: var(--text-color-light);
    font-family: var(--body-font);
    font-size: 1rem;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    direction: rtl;
}

.feedback-form textarea {
    resize: vertical;
    min-height: 120px;
}

.feedback-form button {
    justify-self: center;
    padding: 1rem 4rem;
    font-size: 1rem;
    background-color: #c48347;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: var(--body-font);
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.feedback-form button:hover {
    background-color: #d98e48;
}
::placeholder {
    color: #888;
}

/* ----- 5E. RESPONSIVE ADJUSTMENTS FOR USERCO ----- */
@media screen and (max-width: 992px) {
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .feedback-form {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .feedback-form-section {
        padding: 3rem 0;
    }
	.section-button-container {
    margin-top: 11.5rem;
    margin-bottom: -3rem;
}
}

@media screen and (max-width: 576px) {
    .video-grid {
        gap: 1rem;
    }
    .video-item__play-btn {
        width: 45px;
        height: 45px;
    }
     .video-item__play-btn i {
        font-size: 1.2rem;
     }
    .feedback-form-section {
        padding: 2rem 0;
    }
    .feedback-form {
        gap: 1rem;
        padding: 0 1rem;
    }
    .feedback-form input,
    .feedback-form textarea {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    .feedback-form button {
        padding: 0.8rem 3rem;
        font-size: 0.9rem;
    }
}


/* ============================================= */
/*           6. SEFARESH (CHECKOUT) PAGE         */
/* ============================================= */

/* ----- 6A. THEME & WRAPPER ----- */
body.light-theme {
    background-color: #f7f3ed;
    color: #3d3d3d;
}
body.light-theme .header {
    background-color: rgba(247, 243, 237, 0.85); /* کرم روشن نیمه‌شفاف */
    border-bottom-color: #e7e1d8;
}
body.light-theme .nav__link,
body.light-theme .nav__icon,
body.light-theme .nav__toggle {
    color: #3d3d3d;
}
body.light-theme .nav__link:hover,
body.light-theme .nav__link.active {
    color: #c78648;
}

.checkout-page-wrapper {
    padding-top: calc(var(--header-height) + 3rem);
    padding-bottom: 5rem;
}
.checkout-section {
    margin-bottom: 1.5rem;
}
.checkout-box {
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}

/* ----- 6B. ADDRESS BOX ----- */
.address-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.address-box__current {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.address-box__icon {
    width: 50px;
    height: 50px;
    background-color: #f7f3ed;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: #c78648;
}
.address-box__info h4 {
    font-size: 1.1rem;
    margin-bottom: .25rem;
}
.address-box__info p {
    color: #888;
    margin: 0;
}
.address-box__change-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: .75rem;
    padding: .8rem 1.2rem;
    font-family: var(--body-font);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: background-color .3s;
}
.address-box__change-btn:hover {
    background-color: #f8f8f8;
}

/* ----- 6C. SHIPPING & PAYMENT BOX ----- */
.shipping-payment-box__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    color: #c78648;
}
.shipping-payment-box__header i {
    font-size: 1.2rem;
}
.shipping-options {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.shipping-option {
    flex: 1;
    border: 1px solid #e7e1d8;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.shipping-option__info h4 {
    font-size: 1rem;
    margin-bottom: .4rem;
}
.shipping-option__info p {
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}
.shipping-option__logo {
    margin-right: auto;
    height: 35px;
    object-fit: contain;
}
/* Custom Radio Button */
.radio-custom {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}
.radio-custom input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.radio-custom__checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border-radius: 50%;
    border: 1px solid #ddd;
}
.radio-custom input:checked ~ .radio-custom__checkmark {
    background-color: #f7a659;
    border-color: #e0954e;
}
.radio-custom__checkmark:after {
    content: "";
    position: absolute;
    display: none;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}
.radio-custom input:checked ~ .radio-custom__checkmark:after {
    display: block;
}

/* ----- 6D. PAYMENT SUMMARY ----- */
.payment-summary {
    border-top: 1px dashed #e7e1d8;
    padding-top: 1.5rem;
}
.payment-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0;
}
.payment-summary__row span {
    color: #666;
}
.payment-summary__total {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3d3d3d !important;
}
.payment-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.coupon-field {
    position: relative;
}
.coupon-field input {
    background-color: #f7f3ed;
    border: 1px solid #e7e1d8;
    border-radius: 2rem;
    padding: .8rem 3rem .8rem 1.2rem;
    width: 200px;
    font-family: var(--body-font);
}
.coupon-field i {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
}
.btn-apply-coupon {
    background-color: #d7d7d7;
    color: #666;
    padding: .8rem 1.5rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-family: var(--body-font);
}
.btn-checkout {
    background-color: #64b157;
    color: #fff;
    padding: .8rem 2.5rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-family: var(--body-font);
    font-weight: 700;
}

/* ----- 6E. SUGGESTED PRODUCTS ----- */
.suggested-products__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
    color: #c78648;
}
.suggested-products__header i { font-size: 1.2rem; }
.suggested-products-slider {
    padding: 1rem 0;
}
/* Use existing card styles but override button */
.btn-add-to-cart-alt {
    background-color: #d3965b;
    color: #fff;
    border-radius: 2rem;
    padding: .6rem 1rem;
    font-family: var(--body-font);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .3s;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    border: none;
}
.btn-add-to-cart-alt:hover {
    background-color: #c78648;
}
.product-card-bestseller .product-card__price .price-label {
    color: #888;
    font-weight: 400;
}
.product-card-bestseller .product-card__price .old-price {
    text-decoration: line-through; 
    color: #e74c3c;
    font-size: 0.9rem;
}
.product-card-bestseller .product-card__price .new-price {
    font-weight: 700; 
    font-size: 1.1rem; 
    color: #27ae60;
}
.product-card-bestseller .rating {
    color: #d08b53; 
    font-weight: 700; 
    font-size: 1rem; 
    display: flex; 
    align-items: center; 
    gap: 0.3rem;
}
.product-card-bestseller .rating .rating-number { 
    font-size: 1rem; 
    font-weight: 700; 
}
.product-card-bestseller .rating i { 
    color: #d08b53; 
    font-size: 0.9rem; 
}


/* ----- 6F. FOOTER FEATURES BAR ----- */
.footer-features-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 3rem 0;
    max-width: 1100px;
    margin: 0 auto;
}
.footer-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.footer-feature-item i {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    background-color: #3d3d3d;
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
}
.footer-feature-item span {
    color: #fff;
    font-weight: 500;
}
body.light-theme .footer {
    padding-top: 3%;
    margin-top: -60px; /* Overlap with the page */
    position: relative;
    z-index: -1;
    background: url(images/footer-bg.png) no-repeat center top / cover, var(--dark-color);
}
body.light-theme .footer .floating-contact-bar {
    display: none;
}
body.light-theme .nav__logo img{
    filter: brightness(0) invert(0);
}
.lightee{background-color: #ffffff;}
/* ----- 6G. RESPONSIVE FOR CHECKOUT PAGE ----- */
@media screen and (max-width: 992px) {
    .shipping-options {
        flex-direction: column;
    }
    .payment-summary__row {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }
    .payment-summary__row .payment-actions {
        width: 100%;
        flex-wrap: wrap;
    }
     .payment-actions .btn-checkout {
        flex-grow: 1;
     }
}
@media screen and (max-width: 768px) {
    .address-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .footer-features-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 576px) {
    .checkout-box {
        padding: 1.5rem;
    }
    .shipping-option {
        flex-direction: column;
        align-items: flex-start;
        text-align: right;
    }
    .shipping-option__logo {
        margin-right: 0;
        margin-top: 1rem;
        align-self: flex-end;
    }
    .payment-summary__row span {
        width: 100%;
    }
    .footer-features-bar {
        grid-template-columns: 1fr;
    }
}



/* ============================================= */
/*           7. CART PAGE STYLES                 */
/* ============================================= */

/* ----- 7A. WRAPPER & GENERAL ----- */
.cart-page-wrapper {
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 0;
    min-height: auto;
}
/* Re-use light theme header for this page as well */
body.light-theme .header {
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom-color: #eee;
}
body.light-theme .header .nav__logo img {
    filter: none; /* Remove dark logo filter */
}

/* ----- 7B. CART TABLE ----- */
.cart-box {
    padding: 2rem;
    margin-bottom: 1.5rem;
}
.cart-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 0 1rem 1.5rem;
    border-bottom: 2px solid #e7e1d8;
    color: #666;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.cart-header__title:not(:first-child) {
    text-align: center;
}
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1rem;
}
.cart-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    align-items: center;
    background-color: #fcfaf7;
    padding: 1.5rem;
    border-radius: 1.2rem;
    border: 1px solid #f0f0f0;
    transition: box-shadow 0.3s ease;
}
.cart-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.cart-item__product {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.cart-item__product img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background-color: #fff;
    border-radius: 1rem;
    border: 1px solid #eee;
    padding: 0.5rem;
}
.cart-item__info h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: #333;
}
.cart-item__info p {
    font-size: 0.85rem;
    color: #d3965b;
    margin: 0;
}
.cart-item__price {
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
}
.cart-item__quantity {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
}
.quantity-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #888;
    line-height: 1;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quantity-btn:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
}
.quantity-btn.plus {
    background-color: #f7a659;
    color: #fff;
    border-color: #f7a659;
}
.quantity-btn.plus:hover {
    background-color: #e6954d;
}
.quantity-input {
    width: 50px;
    text-align: center;
    border: 1px solid #ddd;
    background: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.5rem;
    border-radius: 8px;
    height: 36px;
}
.cart-item__remove {
    text-align: center;
}
.btn-remove {
    background-color: #f9e5e5;
    color: #e74c3c;
    border: none;
    padding: 0.8rem 1.2rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-family: var(--body-font);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-remove:hover {
    background-color: #f5d5d5;
    transform: translateY(-1px);
}

/* ----- 7C. CART TOTALS & CHECKOUT FORM ----- */
.cart-totals-box {
    margin-top: 0;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.cart-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f5f5f5;
}

.cart-summary__row:last-of-type {
    border-bottom: none;
}

.cart-summary__label {
    font-size: 1rem;
    color: #666;
    font-weight: 400;
}

.cart-summary__value {
    font-size: 1rem;
    color: #333;
}

.cart-summary__value strong {
    font-weight: 600;
    color: #2c3e50;
}

.cart-summary__discount strong {
    color: #e74c3c;
}

.cart-summary__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-top: 2px solid #f0f0f0;
    margin-top: 1rem;
}

.cart-summary__total-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

.cart-summary__total-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #e67e22;
}

.payment-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.coupon-section {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.coupon-field {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.coupon-field input {
    background-color: #f7f3ed;
    border: 1px solid #e7e1d8;
    border-radius: 2rem;
    padding: 1rem 3.5rem 1rem 1.5rem;
    width: 100%;
    font-family: var(--body-font);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.coupon-field input:focus {
    outline: none;
    border-color: #e67e22;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}

.coupon-field i {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
}

.btn-apply-coupon {
    background-color: #d7d7d7;
    color: #666;
    padding: 1rem 1.8rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-family: var(--body-font);
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-apply-coupon:hover {
    background-color: #c5c5c5;
    transform: translateY(-2px);
}

.btn-checkout {
    background: linear-gradient(135deg, #64b157, #5a9e4d);
    color: #fff;
    padding: 1.2rem 3rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-family: var(--body-font);
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(100, 177, 87, 0.3);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(100, 177, 87, 0.4);
}

.checkout-form-section {
    display: none; /* Initially hidden */
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: flex-start;
    margin-top: 2rem;
}
.checkout-form-section.visible {
    display: grid;
}
.login-prompt-box, .billing-details-box {
    padding: 2.5rem;
}
.form-divider {
    text-align: center;
    border-bottom: 1px solid #eee;
    line-height: 0.1em;
    margin: 2.5rem 0;
}
.form-divider span {
    background: #fff;
    padding: 0 15px;
    color: #aaa;
    font-size: 0.9rem;
}
.billing-form .form-row {
    display: flex;
    gap: 1.5rem;
}
.billing-form input, .billing-form select, .billing-form textarea {
    margin-bottom: 1.5rem;
    width: 100%;
    padding: 1.2rem;
    border-radius: 1rem;
    border: 1px solid #eee;
    background: #fcfaf7;
    font-family: var(--body-font);
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}
.billing-form input:focus, .billing-form select:focus, .billing-form textarea:focus {
    outline: none;
    border-color: #f7a659;
    box-shadow: 0 0 0 3px rgba(247, 166, 89, 0.1);
}

/* ----- 7D. RESPONSIVE FOR CART PAGE ----- */
@media screen and (max-width: 992px) {
    .cart-page-wrapper {
        padding-top: calc(var(--header-height) + 1rem);
        padding-bottom: 1rem;
    }
    .cart-header {
        display: none;
    }
    .cart-item {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        row-gap: 2rem;
        padding: 2rem 1.5rem;
    }
    .cart-item__product { 
        grid-column: 1 / -1; 
        margin-bottom: 1rem;
    }
    .cart-item__price { 
        text-align: right; 
        font-size: 1.2rem;
    }
    .cart-item__quantity { 
        justify-content: flex-start; 
    }
    .cart-item__remove { 
        text-align: left; 
    }
    .checkout-form-section { 
        grid-template-columns: 1fr; 
        gap: 1.5rem;
    }
    .payment-actions {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
    .coupon-field {
        width: 100%;
    }
    .btn-apply-coupon, .btn-checkout {
        width: 100%;
        justify-content: center;
    }
}

@media screen and (max-width: 576px) {
    .cart-box {
        padding: 1.5rem;
    }
    .cart-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .cart-item__product {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .cart-item__product img {
        width: 100px;
        height: 100px;
    }
    .cart-item > div {
        justify-content: center;
        text-align: center;
    }
    .billing-form .form-row { 
        flex-direction: column; 
        gap: 0; 
    }
    .login-prompt-box, .billing-details-box {
        padding: 1.5rem;
    }
    .payment-summary__row {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
        text-align: right;
    }
    .payment-summary__total {
        font-size: 1.1rem;
    }
}

/* ============================================= */
/*       8. PRODUCT DETAIL PAGE (REVISED)        */
/* ============================================= */

/* ----- 8A. WRAPPER & MAIN LAYOUT ----- */
.product-detail-page-wrapper { padding-top: calc(var(--header-height) + 3rem); padding-bottom: 5rem; }
.product-main-section { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: flex-start; }
.product-gallery__main-image { position: relative; background-color: #fff; padding: 1rem; border-radius: 1.5rem; box-shadow: 0 5px 25px rgba(0,0,0,0.05); }
.product-gallery__main-image img { width: 100%; height: auto; aspect-ratio: 1.5/1; object-fit: contain; }

/* Hotspots */
.hotspot { position: absolute; }
.hotspot__dot { width: 18px; height: 18px; background: #fff; border: 4px solid #3d3d3d; border-radius: 50%; }
.hotspot__line { display: none; /* Implemented with ::before for simplicity in demo */ }
.hotspot__text { position: absolute; background: #fff; padding: .6rem 1rem; border-radius: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-size: .8rem; min-width: 150px; text-align: center; opacity: 0; visibility: hidden; transition: all .3s; white-space: nowrap; }
.hotspot__text i { color: #64b157; margin-left: .4rem; }
.hotspot:hover .hotspot__text { opacity: 1; visibility: visible; }
/* Positioning text relative to dot */
.hotspot:nth-child(1) .hotspot__text, .hotspot:nth-child(2) .hotspot__text { bottom: 120%; right: 50%; transform: translateX(50%); }
.hotspot:nth-child(3) .hotspot__text { bottom: 120%; left: 50%; transform: translateX(-50%); }

.product-gallery__thumbnails { display: flex; gap: 1rem; margin-top: 1rem; }
.thumb-item { flex: 1; border: 2px solid #eee; border-radius: .75rem; padding: .5rem; cursor: pointer; transition: border-color .3s; background-color: #fff; }
.thumb-item.active, .thumb-item:hover { border-color: var(--primary-color); }
.thumb-item img { width: 100%; border-radius: .5rem; }

/* ----- 8B. PRODUCT INFO (REVISED) ----- */
.product-info__header { border-bottom: 1px solid #eee; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.product-info__header-main { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.product-info__title { font-size: 1.5rem; font-weight: 900; }
.product-info__stock-status { background-color: #fff1e6; color: #d3965b; padding: .3rem .8rem; border-radius: 2rem; font-size: .8rem; white-space: nowrap; }
.product-info__header-actions { display: flex; justify-content: space-between; align-items: center; }
.product-info__rating { color: #f39c12; }
.action-icons { display: flex; gap: 1.5rem; font-size: 1.2rem; color: #aaa; }
.action-icons i { cursor: pointer; transition: color .3s; }
.action-icons i:hover { color: #3d3d3d; }

.product-info__variant-selectors { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.product-info__colors { display: flex; align-items: center; gap: .75rem; }
.color-dot-single { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; transition: all .3s; position: relative; overflow: hidden; }
.color-dot-single.active { box-shadow: 0 0 0 2px var(--primary-color); border-color: var(--primary-color); }
.color-dot-single:hover { transform: scale(1.1); box-shadow: 0 0 0 2px var(--primary-color); }
.color-dot-single.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.color-dot-single.has-image.active { box-shadow: 0 0 0 3px var(--primary-color); }
.color-dot-single.has-image:hover { box-shadow: 0 0 0 3px var(--primary-color); transform: scale(1.1); }

/* ===== TWO DISPLAY MODES FOR CUSTOM FIELDS ===== */

/* Mode 1: Default Text Mode (Woodmart-style) */
.osmaniop-color-mode-text .color-dot-single {
    /* Base size - responsive and uniform */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    
    /* Text positioning and multi-line support */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Text styling for readability */
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #333;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    
    /* Spacing and positioning */
    margin: 5px;
    padding: 8px;
    
    /* Enhanced border and shadow */
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd, 0 2px 4px rgba(0,0,0,0.1);
    
    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Ensure text fits properly */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Responsive sizing for text mode */
@media (max-width: 768px) {
    .osmaniop-color-mode-text .color-dot-single {
        width: 60px;
        height: 60px;
        font-size: 11px;
        padding: 6px;
        margin: 4px;
    }
}

@media (min-width: 480px) {
.nav__header{display: none;}
    }
@media (max-width: 480px) {
    .osmaniop-color-mode-text .color-dot-single {
        width: 65px;
        height: 65px;
        font-size: 10px;
        padding: 5px;
        margin: 3px;
    }
}

/* Active state for text mode */
.osmaniop-color-mode-text .color-dot-single.active {
    box-shadow: 0 0 0 3px var(--primary-color), 0 4px 8px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* Hover state for text mode */
.osmaniop-color-mode-text .color-dot-single:hover:not(.disabled) {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px var(--primary-color), 0 4px 12px rgba(0,0,0,0.2);
}

/* Disabled state for text mode */
.osmaniop-color-mode-text .color-dot-single.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* Mode 2: Image Mode */
.osmaniop-color-mode-image .color-dot-single {
    /* Base size - uniform for images */
    width: 75px;
    height: 75px;
    border-radius: 50%;
    
    /* Image styling */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Spacing and positioning */
    margin: 5px;
    
    /* Enhanced border and shadow */
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd, 0 2px 4px rgba(0,0,0,0.1);
    
    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Hide any text content */
    text-indent: -9999px;
    overflow: hidden;
}

/* Responsive sizing for image mode */
@media (max-width: 768px) {
    .osmaniop-color-mode-image .color-dot-single {
        width: 60px;
        height: 60px;
        margin: 4px;
    }
}

@media (max-width: 480px) {
    .osmaniop-color-mode-image .color-dot-single {
        width: 50px;
        height: 50px;
        margin: 3px;
    }
}

/* Active state for image mode */
.osmaniop-color-mode-image .color-dot-single.active {
    box-shadow: 0 0 0 3px var(--primary-color), 0 4px 8px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* Hover state for image mode */
.osmaniop-color-mode-image .color-dot-single:hover:not(.disabled) {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px var(--primary-color), 0 4px 12px rgba(0,0,0,0.2);
}

/* Disabled state for image mode */
.osmaniop-color-mode-image .color-dot-single.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* Size items styling for both modes */
.osmaniop-size-mode-text .size-item {
    /* Base styling for text mode sizes */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 75px;
    height: 40px;
    padding: 8px 16px;
    margin: 5px;
    
    /* Text styling */
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    
    /* Border and background */
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    
    /* Transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.osmaniop-size-mode-text .size-item.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.osmaniop-size-mode-text .size-item:hover:not(.disabled) {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.osmaniop-size-mode-text .size-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}

.osmaniop-size-mode-image .size-item {
    /* Image mode for sizes - similar to color dots */
    width: 75px;
    height: 75px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    margin: 5px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-indent: -9999px;
    overflow: hidden;
}

.osmaniop-size-mode-image .size-item.active {
    box-shadow: 0 0 0 3px var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.osmaniop-size-mode-image .size-item:hover:not(.disabled) {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px var(--primary-color), 0 4px 12px rgba(0,0,0,0.2);
}

.osmaniop-size-mode-image .size-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* Container styling for better layout */
.product-info__colors,
.product-info__sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Ensure proper spacing in responsive layouts */
@media (max-width: 768px) {
    .product-info__colors,
    .product-info__sizes {
        justify-content: flex-start;
    }
}

.product-info__sizes { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.size-label { font-size: .9rem; color: #888; }
.size-line { height: 30px; width: 1px; background-color: #ddd; margin: 0 .5rem; }
.size-item { font-weight: 700; }

.installment-box-main { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.btn-installment { background-color: #0072ff; color: #fff; border: none; padding: .8rem 1.5rem; border-radius: .75rem; font-family: var(--body-font); cursor: pointer; display: flex; align-items: center; gap: .5rem; margin-left: .75rem; }
.installment-box-main img { height: 30px; }

.product-info__price-section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.price-box .price-label { color: #888; margin-left: .5rem; }
.price-box .price-value { font-size: 1.5rem; font-weight: 900; }
.discount-badge { display: flex; align-items: center; gap: .5rem; }
.discount-badge img { height: 35px; }
.discount-badge span { color: #e74c3c; font-size: .9rem; }

.btn-add-to-cart-main { background-color: #d3965b; color: #fff; width: 100%; padding: 1rem; border-radius: .75rem; font-size: 1rem; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .75rem; }

/* ----- 8C. MODERN PRODUCT TABS (COLORED VERSION) ----- */
.product-tabs-section { 
    margin-top: 4rem; 
    width: 100%;
    direction: rtl;
}

/* Tabbed Container - Colored Version with Round Corners */
.tabbed {
    width: 80%;
    min-width: 400px;
    margin: 0 auto;
    margin-bottom: 68px;
    border-bottom: 4px solid #1ABC9C;
    overflow: hidden;
    transition: border 250ms ease;
    direction: rtl;
}

.tabbed ul {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    float: right;
    padding-right: 48px;
    list-style-type: none;
}

.tabbed ul * {
    margin: 0px;
    padding: 0px;
}

/* Tab Items - Colored Version */
.tabbed li {
    display: block;
    float: left;
    padding: 10px 24px 8px;
    background-color: #34D6B6;
    margin-left: 46px;
    z-index: 2;
    position: relative;
    cursor: pointer;
    color: #FFF;
    text-shadow: rgba(0,0,0,.1) 0 1px;
    text-transform: uppercase;
    font: 600 13px/20px 'Inter', roboto, "Open Sans", Helvetica, sans-serif;
    transition: all 250ms ease;
    border: none;
}

/* Round Corners for Tabbed */
.tabbed.round li {
    border-radius: 8px 8px 0 0;
}

/* Skewed pseudo-elements for tab effect */
.tabbed li:before,
.tabbed li:after {
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    height: 100%;
    width: 44px;  
    background-color: #34D6B6;
    transition: all 250ms ease;
}

.tabbed li:before {
    right: -24px;
    transform: skew(30deg, 0deg);
    box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
}

.tabbed li:after {
    left: -24px;
    transform: skew(-30deg, 0deg);
    box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
}

/* Round Corners for pseudo-elements */
.tabbed.round li:before {
    border-radius: 0 8px 0 0;
}

.tabbed.round li:after {
    border-radius: 8px 0 0 0;
}

/* Hover Effects */
.tabbed li:hover,
.tabbed li:hover:before,
.tabbed li:hover:after {
    background-color: #40E2C2;
}

/* Active Tab Styling */
.tabbed li.active {
    z-index: 3;
    background-color: #1ABC9C;
}

.tabbed li.active:before,
.tabbed li.active:after {
    background-color: #1ABC9C;
}

/* Skin - Turquoise (Default) */
.tabbed.skin-turquoise {
    border-bottom-color: #1ABC9C;
}

.tabbed.skin-turquoise li {
    background-color: #34D6B6;
}

.tabbed.skin-turquoise li:before,
.tabbed.skin-turquoise li:after {
    background-color: #34D6B6;
}

.tabbed.skin-turquoise li:hover,
.tabbed.skin-turquoise li:hover:before,
.tabbed.skin-turquoise li:hover:after {
    background-color: #40E2C2;
}

.tabbed.skin-turquoise li.active,
.tabbed.skin-turquoise li.active:before,
.tabbed.skin-turquoise li.active:after {
    background-color: #1ABC9C;
}

/* Tab Content */
.tabs-content {
    direction: rtl;
    text-align: right;
}

.tab-panel { 
    display: none; 
    direction: rtl;
    text-align: right;
}

.tab-panel.active { 
    display: block; 
}

.content-box { 
    background-color: #fff; 
    padding: 2rem; 
    border-radius: 1.5rem; 
    line-height: 2; 
    position: relative;
    direction: rtl;
    text-align: right;
}

.content-box-icon { 
    position: absolute; 
    top: 1.5rem; 
    right: 1.5rem; 
    font-size: 2.5rem; 
    color: #f5f5f5; 
}

.specs-list { 
    list-style: none; 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.5rem 2.5rem;
    direction: rtl;
}

.specs-list li { 
    display: flex; 
    justify-content: space-between; 
    border-bottom: 1px dashed #eee; 
    padding-bottom: 1rem;
    direction: rtl;
}

.specs-list li span { 
    color: #888; 
}

.specs-list li .spec-icon { 
    display: none; 
}

/* RTL Responsive Adjustments */
@media screen and (max-width: 768px) {
    .tabs-header {
        width: 95%;
        min-width: 300px;
        padding-right: 20px;
    }
    
    .tabs-header ul {
        padding-right: 20px;
    }
    
    .tab-button {
        margin-left: 20px;
        padding: 8px 16px 6px;
        font-size: 12px;
    }
    
    .tab-button:before,
    .tab-button:after {
        width: 30px;
    }
    
    .tab-button:before {
        left: -16px;
    }
    
    .tab-button:after {
        right: -16px;
    }
    
    .specs-list {
        grid-template-columns: 1fr;
    }
}

/* ----- 8D. GUARANTEE BAR (NEW) ----- */
.guarantee-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background-color: #fff; padding: 1.5rem; border-radius: 1.5rem; margin-top: 4rem; }
.guarantee-item { display: flex; align-items: center; justify-content: center; gap: .75rem; color: #888; border-left: 1px solid #f0f0f0; }
.guarantee-item:last-child { border-left: none; }
.guarantee-item i { font-size: 1.2rem; color: #d3965b; }

/* ----- 8E. RELATED & COMMENTS (REVISED) ----- */
.related-products-section { margin-top: 4rem; }
.related-products-grid { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; }
.related-item { flex: 0 0 200px; border-radius: 1rem; overflow: hidden; }

/* Override old related products grid for proper 4-column layout */
.related-products-grid-proper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
}
.comments-section { margin-top: 4rem; }
.comments-wrapper { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: flex-start; }
.comment-form-container { background: #fff; border-radius: 1.5rem; padding: 2rem; position: relative; }
.comment-form-triangle { width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 20px solid #fff; position: absolute; left: -20px; top: 50px; }
.comment-form-container h4 { font-size: 1.2rem; margin-bottom: 1.5rem;     color: #000;}
.comment-form { display: flex; flex-direction: column; gap: 1rem; }
.comment-form input, .comment-form textarea { width: 100%; padding: 1rem; border-radius: 1rem; border: 1px solid #eee; background: #f7f3ed; font-family: var(--body-font); }
.comment-form button { align-self: flex-start; padding: .8rem 3rem; background-color: #f7a659; }

.comments-list { display: flex; flex-direction: column; gap: 1.5rem; }
.comment-item-new { background-color: #fff5eb; padding: 1.5rem; border-radius: 1rem; }
.comment-meta-new { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; color: #aaa; font-size: .8rem; }
.comment-meta-new div { display: flex; gap: .5rem; color: #f39c12; }
.comment-item-new p { line-height: 1.8; font-size: .9rem;color: #000000; }

/* ----- 8F. RESPONSIVE (REVISED) ----- */
@media screen and (max-width: 992px) {
    .product-main-section { grid-template-columns: 1fr; }
    .comments-wrapper { grid-template-columns: 1fr; }
    .comment-form-triangle { display: none; }
}

@media screen and (max-width: 768px) {
    .guarantee-bar { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .guarantee-item { border-left: none; }
    .guarantee-item:nth-child(odd) { padding-left: 1rem; border-left: 1px solid #f0f0f0; }
    .specs-list { grid-template-columns: 1fr; }
}

@media screen and (max-width: 576px) {
    .product-info__title { font-size: 1.4rem; }
    .product-info__header-main, .product-info__price-section, .discount-badge { flex-direction: column; align-items: flex-start; text-align: right; gap: 1rem; }
    .product-info__variant-selectors { flex-direction: column; align-items: flex-start; gap: 2rem; }
    .installment-box-main { justify-content: flex-start; }
    .guarantee-bar { grid-template-columns: 1fr; }
    .guarantee-item, .guarantee-item:nth-child(odd) { border: none; justify-content: flex-start; }
}

/* ============================================= */
/*       8. PRODUCT DETAIL PAGE (REBUILT)        */
/* ============================================= */

/* ----- 8A. WRAPPER & THEME ----- */
body.lightee {
    background-color: #f7f3ed;
    color: #3d3d3d;
}
body.lightee .header {
    background-color: rgba(247, 243, 237, 0.9);
    border-bottom-color: #e7e1d8;
}
body.lightee .nav__logo img {
    filter: none;
}
body.lightee .nav__link, 
body.lightee .nav__icon, 
body.lightee .nav__toggle {
    color: #f6a660;background-color: #2E2E2E;
}
body.lightee .nav__link:hover {
    color: #c78648;
}
body.lightee .btn--primary {
    background-color: #f7a659;
    color: #3d3d3d;
}

.product-detail-page-wrapper {
    padding-top: calc(var(--header-height) + 3rem);
    padding-bottom: 5rem;
}
.product-main-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: flex-start;
    margin-bottom: 3rem;
}

/* ----- 8B. PRODUCT GALLERY ----- */
.product-gallery__main-image {
    position: relative;
    background-color: #fff;
    padding: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}
.product-gallery__main-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.5/1;
    object-fit: cover;
}
.product-gallery__watermark {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    width: 100px;
    opacity: 0.5;
}
.product-gallery__actions {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.2rem;
    color: #aaa;
}
.product-gallery__actions i {
    cursor: pointer;
    transition: color .3s;
}
.product-gallery__actions i:hover {
    color: #3d3d3d;
}
.product-gallery__thumbnails {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.thumb-item {
    flex: 1;
    border: 2px solid #eee;
    border-radius: .75rem;
    padding: .5rem;
    cursor: pointer;
    transition: border-color .3s;
    background-color: #fff;
}
.thumb-item.active, .thumb-item:hover {
    border-color: #f7a659;
}
.thumb-item img {
    width: 100%;
    border-radius: .5rem;
}

/* ----- 8C. PRODUCT INFO ----- */
.product-info__title {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.product-info__meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed #e7e1d8;
}
.product-info__rating {
    color: #f39c12;
}
.product-info__stock-status {
    color: #d3965b;
    font-size: .9rem;
}
.product-info__short-description {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #d3965b;
}
.product-info__short-description p {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}
.product-info__short-description p:last-child {
    margin-bottom: 0;
}
.product-info__options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}
.product-info__colors {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.color-dot-single {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    transition: all .3s;
}
.color-dot-single.active {
    box-shadow: 0 0 0 2px #f7a659;
}
.product-info__sizes {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.size-item {
    border: 1px solid #ddd;
    padding: .6rem 1.2rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: all .3s;
    font-weight: 500;
}
.size-item.active, .size-item:hover {
    border-color: #f7a659;
    background-color: #fff5eb;
    color: #c78648;
}
.size-line {
    height: 25px;
    width: 1px;
    background-color: #e0e0e0;
}
.variant-label {
    font-size: .9rem;
    color: #888;
}

/* Purchase Actions */
.product-info__purchase-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}
.price-section {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem;
}
.price-label {
    color: #888;
    margin-left: .5rem;
}
.price-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: #3d3d3d;
}
.price-section__promo-badge {
    background-color: #e74c3c;
    color: white;
    padding: .5rem 1rem .5rem .5rem;
    border-radius: 2rem;
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.price-section__promo-badge img {
    height: 35px;
    width: 40px;
}
.btn-add-to-cart-main {
    background-color: #f7a659;
    color: #3d3d3d;
    border: none;
    font-family: var(--body-font);
    padding: 1rem;
    border-radius: .75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    transition: filter .3s;
}
.btn-add-to-cart-main:hover {
    filter: brightness(1.1);
}
.btn-installment {
    background-color: #0072ff;
    color: #fff;
    border: none;
    padding: 1rem;
    border-radius: .75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-installment img {
height: 35px;
    width: 35px;
}

/* ----- 8D. FEATURES BAR ----- */
.features-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background-color: #fff;
    padding: 1rem;
    border-radius: 1.5rem;
    margin-bottom: 3rem;
}
.feature-bar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: #555;
    padding: 1rem;
    border-left: 1px solid #f0f0f0;
}
.feature-bar-item:last-child {
    border-left: none;
}
.feature-bar-item i {
    font-size: 1.5rem;
    color: #c78648;
}
.feature-bar-item span {
    font-size: .9rem;
    font-weight: 500;
}

/* ----- 8E. PRODUCT TABS (as separate sections) ----- */
.product-tabs-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.content-box-wrapper {
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
}
.content-box-header {
    margin-bottom: 1.5rem;
}
.content-box-title {
    font-size: 1.3rem;
    position: relative;
    padding-right: 1.2rem;
}
.content-box-title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 80%;
    background-color: #f7a659;
    border-radius: 5px;
}
.content-box.with-quotes {
    position: relative;
    padding: 1rem;
}
.content-box.with-quotes::before,
.content-box.with-quotes::after {
    font-family: serif;
    font-size: 4rem;
    color: #f0ebe4;
    position: absolute;
}
.content-box.with-quotes::before {
    content: "\"";
    top: -1rem;
    right: 0;
}
.content-box.with-quotes::after {
    content: "\"";
    bottom: -2.5rem;
    left: 0;
    transform: rotate(180deg);
}
.content-box p {
    line-height: 2;
    color: #555;
}
.specs-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.specs-list li {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #eee;
}
.specs-list li span {
    color: #888;
}
.specs-list li strong {
    color: #3d3d3d;
}

/* ----- 8F. RELATED PRODUCTS & COMMENTS ----- */
.related-products-section {
    margin-top: 4rem;
}
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}
.related-item {
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1/1;
}
.related-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comments-section {
    margin-top: 4rem;
}
.comments-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: flex-start;
}
.comment-form-container {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
}
.comment-form-container::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #fff;
    top: 50px;
    right: -20px;
}
.comment-form-container h4 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: #3d3d3d;
}
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 1rem;
    border-radius: .75rem;
    border: 1px solid #eee;
    background: #f7f3ed;
    font-family: var(--body-font);
}
.comment-form button {
    align-self: flex-start;
    padding: .8rem 3rem;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.comment-item {
    background-color: #fff5eb;
    padding: 1.5rem;
    border-radius: 1.25rem;    margin: 1rem;
}
.comment-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.comment-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.comment-author__info h5 {
    font-size: 1rem;
    margin: 0 0 .25rem 0;
}
.comment-author__info span {
    font-size: .8rem;
    color: #888;
}
.comment-body {
    font-size: .9rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1rem;
}
.comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.comment-reactions {
    font-size: 1.1rem;
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .8rem;
    color: #888;
}
.comment-reply-link {
    color: #c78648;
    font-weight: 700;
}
.comment-reply {
    background-color: rgba(255,255,255,0.7);
    margin-top: 1rem;
    padding: 1.2rem;
    border-radius: 1rem;
    border-right: 3px solid #f7a659;
}
.comment-reply .comment-body {
    margin-bottom: 0;
}

/* ----- 8G. RESPONSIVE ----- */
@media screen and (max-width: 992px) {
    .product-main-section, .comments-wrapper {
        grid-template-columns: 1fr;
    }
    .comment-form-container {
        order: -1; /* Place form above comments on mobile */
    }
    .comment-form-container::after {
        display: none;
    }
    .related-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .features-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-bar-item {
        border-left: none;
        justify-content: flex-start;
        background-color: #fff5eb;
        border-radius: .75rem;
    }
    .specs-list, .related-products-grid {
        grid-template-columns:repeat(3, 1fr);
    }
    .product-info__options {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .product-info__sizes {
        width: 100%;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 576px) {
    .product-detail-page-wrapper {
        padding-top: calc(var(--header-height) + 1.5rem);
    }
    .product-info__title {
        font-size: 1.4rem;
    }
    .product-info__purchase-actions {
        grid-template-columns: 1fr;
    }
    .price-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .features-bar {
        grid-template-columns: 1fr;
    }
    .comments-wrapper {
        gap: 1.5rem;
    }
    .comment-form-container, .comment-item {
        padding: 1.5rem;
    }
}
/* ============================================= */
/*           9. SHOP/CATEGORY PAGE (`iner.jpg`)  */
/* ============================================= */

/* ----- 9A. MAIN HERO SECTION ----- */
.shop-hero-main {
    position: relative;
    padding: 15rem 0;
    background: url(images/shop-hero-bgn.jpg) no-repeat center center / cover;
    min-height: 404px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-hero-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgb(30 30 30 / 24%);
}
.shop-hero-main__container {
    position: relative;
    z-index: 2;
    text-align: center;
}
.shop-hero-main h1 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
}
.shop-hero-main__social {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0.75rem;
    border-radius: 3rem;
    backdrop-filter: blur(5px);
}
.shop-hero-main__social a {
    color: white;
    font-size: 1.2rem;
    transition: color .3s;
}
.shop-hero-main__social a:hover {
    color: var(--primary-color);
}
.shop-hero-main__social span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #ccc;
    font-size: .8rem;
    letter-spacing: 2px;
}

/* ----- 9B. CATEGORY GRID SECTION ----- */
.category-grid-main {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.category-grid__layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Set a base height for rows */
    grid-auto-rows: 200px; 
    gap: 1.5rem;    margin-top: -10%;
}
.grid-item {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    display: block;
    color: white;
}
.grid-item:hover .grid-item__bg {
    transform: scale(1.05);
}
.grid-item__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform .4s ease;
}
.grid-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
    z-index: 2;
}
.grid-item__text {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 3;
    border-right: 4px solid #d98e48;
    padding-right: 1rem;
}
.grid-item__text h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.grid-item__text span {
    font-size: 0.8rem;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Desktop Grid layout definitions (Original Layout) */
.category-grid__layout .grid-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
.category-grid__layout .grid-item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
.category-grid__layout .grid-item:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 3; }
.category-grid__layout .grid-item:nth-child(4) { grid-column: 1 / 2; grid-row: 2 / 3; }
.category-grid__layout .grid-item:nth-child(5) { grid-column: 2 / 3; grid-row: 2 / 3; }
.category-grid__layout .grid-item:nth-child(6) { grid-column: 1 / 3; grid-row: 3 / 4; }
.category-grid__layout .grid-item:nth-child(7) { grid-column: 3 / 4; grid-row: 3 / 4; }
.category-grid__layout .grid-item:nth-child(8) { grid-column: 4 / 5; grid-row: 3 / 4; }

/* ----- 9C. WHOLESALE SECTION ----- */
.wholesale-section {
    padding-bottom: 5rem;
}
.wholesale-section__container {
    display: flex;
    align-items: center;
    gap: 3rem;
    background-color: #fff;
    padding: 3rem;
    border-radius: 2rem;
    position: relative;
}
.wholesale-section__text {
    flex: 1;
    position: relative;
}
.wholesale-section__text::before {
    content: "\"";
    font-family: serif;
    font-size: 8rem;
    color: #f5f5f5;
    position: absolute;
    z-index: 1;
    line-height: 1;
    top: -3rem;
    right: -1rem;
}
.wholesale-section__text h2 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}
.wholesale-section__text p {
    font-size: .9rem;
    line-height: 2;
    color: #555;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}
.btn-contact {
    background-color: #c48347;
    color: white;
    padding: .8rem 2rem;
    border-radius: .75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    flex-direction: row-reverse;
}
.btn-contact:hover {
    background-color: #d98e48;
}
.wholesale-section__image {
    flex: 1;
    max-width: 50%;
}
.wholesale-section__image img {
    width: 100%;
    border-radius: 1.5rem;
}

/* ----- 9D. RESPONSIVE (THE FIX IS HERE) ----- */
@media screen and (max-width: 992px) {
    .shop-hero-main__social { display: none; }
    
    .category-grid__layout {
        /* Switch to 2 columns */
        grid-template-columns: repeat(2, 1fr);
        /* Redefine row height for tablet */
        grid-auto-rows: 220px;
    }

    /* IMPORTANT: Reset ALL specific placements and define new ones for tablet */
    .category-grid__layout .grid-item {
        grid-column: auto; /* Let items flow naturally */
        grid-row: auto;
    }
    
    /* Make the wide items span 2 columns in the new layout */
    .category-grid__layout .grid-item:nth-child(1),
    .category-grid__layout .grid-item:nth-child(6) {
        grid-column: span 2;
    }

    /* Make the tall item a standard 1x1 cell */
    .category-grid__layout .grid-item:nth-child(3) {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .wholesale-section__container {
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
    }
    .wholesale-section__image {
        max-width: 100%;
        order: -1; /* Image on top */
    }
}
.wholesale-section__text h2 {
    color:#565656 !important;
}
	.grid-item__text {
    background: #00000061;
    padding: 5px 15px 5px 15px;
}
@media screen and (max-width: 576px) {
.category-grid__layout {
    gap: 1.5rem;  margin-top: -40%;
}
    .shop-hero-main h1 {
        font-size: 2rem;
    }
    .category-grid__layout .grid-item {
    right: 10%;
}
    .category-grid__layout {
        /* Switch to a single column */
        grid-template-columns: 1fr;
        /* Redefine row height for mobile */
        grid-auto-rows: 250px;
    }

    /* Make ALL items span only 1 column */
    .category-grid__layout .grid-item,
    .category-grid__layout .grid-item:nth-child(1),
    .category-grid__layout .grid-item:nth-child(6) {
        grid-column: span 1;
    }
    
    .wholesale-section__text h2 {
        font-size: 1.3rem;
    }
    .wholesale-section__text::before {
        font-size: 6rem;
        top: -2rem;
    }
}



/* ============================================= */
/*           10. BLOG PAGE (`blog.jpg`)          */
/* ============================================= */

/* ----- 10A. THEME & GENERAL ----- */
body.dark-theme {
    background-color: var(--dark-color-alt);
    color: var(--text-color-light);
}

/* ----- 10B. BLOG HERO SECTION ----- */
.blog-hero-main {
    position: relative;
    padding: 6rem 0;
    background: url(images/blog-hero-bg.jpg) no-repeat center center/cover;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.blog-hero-main::before {
    content: 'OSMANI OPTIC';
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(6rem, 20vw, 12rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}
.blog-hero-main__container {
    position: relative;
    z-index: 2;
    text-align: center;
}
.blog-hero-main h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;color: #ffffff;
}
.breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: var(--text-color-muted);
    margin-bottom: 2.5rem;
}
.breadcrumb a:hover {
    color: var(--primary-color);
}
.breadcrumb-separator {
    font-size: .3rem;
    color: #555;
}
.blog-search-form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: .75rem;
    padding: .5rem;
}
.blog-search__category-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    color: #333;
    cursor: pointer;
    border-left: 1px solid #eee;
}
.blog-search__category-selector span {
    font-weight: 500;
}
.blog-search-form input {
    flex-grow: 1;
    border: none;
    background: none;
    padding: .8rem 1.5rem;
    font-family: var(--body-font);
    font-size: 1rem;
    color: #333;
}
.blog-search-form input::placeholder {
    color: #aaa;
}
.blog-search__submit-btn {
    background-color: var(--primary-color);
    border: none;
    color: var(--dark-color-alt);
    padding: 0 1.2rem;
    border-radius: .5rem;
    font-size: 1.2rem;
    cursor: pointer;
}
.blog-hero-main__social {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    color: #ccc;
}
.blog-hero-main__social span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .8rem;
    letter-spacing: 2px;
}
.blog-hero-main__social a {
    font-size: 1.2rem;
}

/* ----- 10C. LATEST ARTICLES SLIDER ----- */
.latest-articles-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.section-header-slider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.section-header-slider h2 {
    font-size: 1.5rem;
}
.slider-nav {
    display: flex;
    gap: .75rem;
}
.swiper-button-prev.latest-articles-prev,
.swiper-button-next.latest-articles-next {
    position: static;
    margin: 0;
    width: 40px;
    height: 40px;
    background-color: #3a3a3a;
    border-radius: 50%;
    color: #fff;
}
.swiper-button-prev::after, .swiper-button-next::after {
    font-size: .9rem;
}
.latest-articles-slider {
    padding-bottom: 1rem; /* For shadow */
}
.article-card-slider {
    display: block;
    background-color: #3a3a3a;
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}
.article-card-slider:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.article-card-slider__image-wrapper {
    position: relative;
    aspect-ratio: 16/9;
}
.article-card-slider__image-wrapper img {
    width: 100%;
    height: 150%;
    object-fit: cover;
}
.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}
.article-card-slider__content {
    padding: 1.5rem;
}
.article-card-slider__content h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}
.article-meta {
    display: flex;
    gap: 1.5rem;
    font-size: .8rem;
    color: var(--text-color-muted);
    margin-bottom: 1rem;
}
.article-card-slider__content p {
    font-size: .9rem;
    line-height: 1.8;
    color: #ccc;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* ----- 10D. ALL ARTICLES GRID ----- */
.all-articles-section {
    padding-bottom: 4rem;
}
.all-articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.article-card-grid {
    background-color: #3a3a3a;
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}
.article-card-grid:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.article-card-grid__image-link {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
}
.article-card-grid__image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-category-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #9b59b6;
    color: white;
    padding: .3rem .8rem;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 500;
}
.article-card-grid__content {
    padding: 1.5rem;
}
.article-card-grid__content h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.article-card-grid__content h3 a:hover {
    color: var(--primary-color);
}
.article-card-grid__content p {
    font-size: .9rem;
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.article-card-grid__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #4a4a4a;
}
.article-author span{    color: #ffffff;}
.article-author {
    display: flex;
    align-items: center;
    gap:0rem;
    font-size: .8rem;
}
.article-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.btn-read-more {
    font-size: .85rem;
    font-weight: 500;
    color: var(--primary-color);
}
.btn-read-more:hover {
    text-decoration: underline;
}
.blog-pagination {
    margin-top: 4rem;
    justify-content: center;
}
.blog-pagination .page-number,
.blog-pagination .page-arrow {
    background-color: #3a3a3a;
    border: none;
    color: var(--text-color-muted);
}
.blog-pagination .page-number.active {
    background-color: var(--primary-color);
    color: var(--dark-color-alt);
    font-weight: 700;
}

/* ----- 10E. RESPONSIVE ----- */
@media screen and (max-width: 992px) {
    .blog-hero-main__social {
        display: none;
    }
    .all-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
	.video-section-lenses {
    margin-top: 17%;
}
.video-container {
        padding-bottom: 25%;
}
    .blog-hero-main h1 {
        font-size: 2rem;
    }
    .blog-search__category-selector {
        display: none;
    }
    .all-articles-grid {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 576px) {
    .blog-hero-main::before {
        display: none;
    }
    .blog-search-form {
        flex-direction: column;
        background: transparent;
        gap: 1rem;
    }
    .blog-search-form input {
        background-color: #fff;
        border-radius: .75rem;
    }
    .blog-search__submit-btn {
        width: 100%;
        padding: 1rem;
        border-radius: .75rem;
    }
}




/* ============================================= */
/*       11. LENSES PAGE (`generate.jpg`)        */
/* ============================================= */

/* ----- 11A. VIDEO PLAYER SECTION ----- */
.video-section-lenses {
    width: 100%;
    background-color: #000;
}
.video-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}
#custom-video-player {
    width: 100%;
    display: block;
    aspect-ratio: 17/9;
}
.custom-video-controls {
    position: absolute;
    bottom: 7rem;
    left: 2rem;
    right: 2rem;
    background-color: rgba(44, 44, 44, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: .75rem;
    padding: 0.75rem 0.5rem;
    display: flex;
    justify-content: center;
    align-items: baseline;
    direction: ltr;
    flex-wrap: nowrap;
}
.video-container:hover .custom-video-controls {
    opacity: 1;
    visibility: visible;
}
.controls-left, .controls-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.control-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}
.time-display {
    font-size: .9rem;
    direction: ltr;
}
.progress-bar-container {
    flex-grow: 1;
    width: 400px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    cursor: pointer;
}
.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
}
.volume-slider {
    width: 80px;
    cursor: pointer;
}
.floating-call-btn {
    position: absolute;
    left: 0rem;
    bottom: 110%;
    transform: translateY(-100%);
    width: 45px;
    height: 45px;
    background-color: #3498db;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

/* ----- 11B. LENS SELECTION SECTION ----- */
.lens-selection-section {
    padding: 5rem 0;
    background-color: #fff;
    color: var(--dark-color-alt);
    margin-top: -6rem; /* Overlap effect */
    border-radius: 6rem 6rem 0 0;
    position: relative;
    z-index: 2;
}
.section-header-lenses {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}
.section-header-lenses::before {
    content: 'ZEISS';
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(4rem, 10vw, 6rem);
    font-weight: 900;
    color: #f7f3ed;
    z-index: -1;
}
.section-header-lenses h2 {
    font-size: 1.8rem;
    margin-bottom: .5rem;color: #444444;
}
.section-header-lenses h3 {
    font-size: 1.2rem;
    color: #888;
}
.lens-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.lens-option {
    background-color: #f7f3ed;
    border-radius: 1.25rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .3s ease;
}
.lens-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.lens-option.active {
    border-color: #f7a659;
    background-color: #fff;
}
.lens-option__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    color: #f7a659;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem auto;
    transition: transform .3s;
}
.lens-option.active .lens-option__icon {
    transform: rotate(45deg);
}
.lens-option__image img {
    height: 80px;
    margin: 0 auto 1rem auto;
}
.lens-option__title {
    font-weight: 700;
}
.lens-descriptions {
    position: relative;
}
.lens-description {
    background-color: #f7f3ed;
    border-radius: 1.25rem;
    padding: 2.5rem;
    position: relative;
    display: none;
}
.lens-description.active {
    display: block;
}
.lens-description::before, .lens-description::after {
    font-family: serif;
    font-size: 5rem;
    color: #e9e4dc;
    position: absolute;
    line-height: 1;
}
.lens-description::before {
    content: "\"";
    top: .5rem;
    right: 1.5rem;
}
.lens-description::after {
    content: "\"";
    bottom: -1.5rem;
    left: 1.5rem;
    transform: rotate(180deg);
}
.lens-description h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    display: none; /* Title is in the option box now */
}
.lens-description p {
    line-height: 2;
    color: #555;
    text-align: center;
}

/* ----- 11C. BESTSELLER SECTION (LENSES PAGE) ----- */
.lenses-bestseller {
    background: url(images/bestseller-curve-bg.png) no-repeat center top / 100% 100%;
    padding: 10rem 0;
    margin-top: -6rem;
    clip-path: none;
}
.lenses-bestseller .product-card-bestseller .product-card__price {
    display: flex;
    align-items: baseline;
     gap: 0.1rem;
}
.lenses-bestseller .product-card-bestseller .price-label {
    font-size: .8rem;
    color: #666;
}

body.lightee .nav__link, body.lightee .nav__icon, body.lightee .nav__toggle {
    background-color: transparent;
}

.woocommerce ul.products::after, .woocommerce ul.products::before, .woocommerce-page ul.products::after, .woocommerce-page ul.products::before {
    display: none !important;
}
/* ----- 11D. PRESCRIPTION UPLOAD FORM ----- */
.prescription-upload-section {
    padding: 5rem 0;
    background-color: #fff;
}
.prescription-upload-container {
    display: flex;
    align-items: center;
    gap: 3rem;
}
.prescription-form-wrapper {
    flex: 1;
    max-width: 50%;
}
.prescription-form-wrapper h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 2rem;color: #6a6a6a;
}
.prescription-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.prescription-form input, .prescription-form textarea {
    background-color: #f7f3ed;
    border: 1px solid #e9e4dc;
    border-radius: 1rem;
    padding: 1rem;
    font-family: var(--body-font);
    width: 100%;
}
.prescription-form textarea {
    grid-column: 1 / -1;
}
.upload-box {
    background-color: #f7f3ed;
    border: 2px dashed #e9e4dc;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    color: #888;
    transition: border-color .3s;
}
.upload-box:hover {
    border-color: var(--primary-color);
}
.btn-submit-prescription {
    grid-column: 1 / -1;
    background-color: #c48347;
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
}
.prescription-image-wrapper {
    flex: 1;
    max-width: 50%;
}
.prescription-image-wrapper img {
    width: 77%;
    border-radius: 1.5rem;
}


/* ----- 11D. PROCESS STEPS SECTION ----- */
.process-steps-section {
    padding: 5rem 0;
    background-color: #f8f9fa;
}

.process-steps-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: #333;
}

/* Lens Process Section */
.lens-process-section {
    padding: 5rem 0;
    background-color: #f8f9fa;
}

.process-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.process-step {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    position: relative;
}

.process-step:hover {
    transform: translateY(-5px);
}

.process-step-number {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #f7a659, #c48347);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
}

.process-step-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f7a659, #c48347);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.2rem;
}

.process-step-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #333;
    font-weight: 600;
}

.process-step-description {
    color: #666;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Legacy support for old classes */
.process-step__icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f7a659, #c48347);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.5rem;
}

.process-step h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #333;
}

.process-step p {
    color: #666;
    line-height: 1.6;
}

/* ----- 11E. CONTENT SECTION ----- */
.optoc-content-section {
    padding: 4rem 0;
    background-color: #fff;
}

.optoc-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.optoc-content h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.optoc-content p {
    line-height: 1.8;
    color: #666;
    font-size: 1.1rem;
}

/* ----- 11F. FORM SECTION IMPROVEMENTS ----- */
.optoc-form-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.optoc-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.optoc-form-wrapper h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.optoc-form-wrapper p {
    text-align: center;
    color: #666;
    margin-bottom: 2rem;
}

.optoc-form {
    display: grid;
    gap: 1.5rem;
}

.optoc-form input,
.optoc-form textarea {
    background-color: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1rem;
    font-family: var(--body-font);
    transition: border-color 0.3s ease;
}

.optoc-form input:focus,
.optoc-form textarea:focus {
    outline: none;
    border-color: #f7a659;
}

.optoc-form input[type="file"] {
    background-color: #f7f3ed;
    border: 2px dashed #e9e4dc;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
}

.optoc-form button {
    background: linear-gradient(135deg, #f7a659, #c48347);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.optoc-form button:hover {
    transform: translateY(-2px);
}

.optoc-form button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ----- 11G. RESPONSIVE ----- */
@media screen and (max-width: 992px) {
    .custom-video-controls {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    .progress-bar-container {
        width: 100%;
        order: -1;
    }
    .controls-left, .controls-right {
        width: 100%;
        justify-content: space-between;
    }
    .lens-options {
        grid-template-columns: repeat(2, 1fr);
    }
    .prescription-upload-container {
        flex-direction: column;
    }
    .prescription-form-wrapper, .prescription-image-wrapper {
        max-width: 100%;
    }
    .process-steps {
        flex-direction: column;
        align-items: center;
    }
    .process-step {
        max-width: 300px;
        width: 100%;
    }
    .optoc-form-wrapper {
        padding: 2rem;
        margin: 0 1rem;
    }
}

@media screen and (max-width: 768px) {
    .lenses-bestseller {
        padding: 8rem 0;
        margin-top: -4rem;
    }
}

@media screen and (max-width: 576px) {
    .custom-video-controls {
        bottom: 3rem; left: 1rem; right: 1rem;
    }
    .floating-call-btn {
        display: none;
    }
    .time-display { display: none; }
    .lens-options {
        grid-template-columns: 1fr;
    }
    .lens-selection-section {
        border-radius: 3rem 3rem 0 0;
        margin-top: -3rem;
        padding: 3rem 0;
    }
    .prescription-form {
        grid-template-columns: 1fr;
    }
    .process-steps {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    .process-step {
        max-width: 280px;
        width: 100%;
    }
    .process-steps-section {
        padding: 3rem 0;
    }
    .optoc-content-section {
        padding: 3rem 0;
    }
    .optoc-form-section {
        padding: 3rem 0;
    }
    .optoc-form-wrapper {
        padding: 1.5rem;
        margin: 0 0.5rem;
    }
    .section-header-lenses h2 {
        font-size: 1.5rem;
    }
    .section-header-lenses h3 {
        font-size: 1rem;
    }
}

/* ============================================= */
/*      12. SINGLE POST PAGE (`blog-1.jpg`)      */
/* ============================================= */

/* ----- 12A. HERO SECTION ----- */
.single-post-hero {
    height: 350px;
    position: relative;
    background-color: #1a1a1a;
    display: flex;
    align-items: flex-end;
}
.single-post-hero__social {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    color: #ccc;
}
.single-post-hero__social span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .8rem;
    letter-spacing: 2px;
}
.single-post-hero__social a {
    font-size: 1.2rem;
}
.single-post-hero__bg-image {
    width: 100%;
    height: 100%;
    margin-right: auto;
    border-bottom-left-radius: 120px;
    overflow: hidden;
}
.single-post-hero__bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- 12B. POST CONTENT & SIDEBAR ----- */
.post-content-section {
    padding: 3rem 1rem 5rem 1rem;
    background-color: #fff;
    color: var(--dark-color-alt);
    margin-top: -100px;
    border-radius: 15px;
    position: relative;
    z-index: 2;
}
.post-layout {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 75% - 25% */
    gap: 3rem;
    align-items: flex-start;
}

/* Main Content Area */
.post-content {
    color: #555;
}
.post-meta-header {
    margin-bottom: 2rem;
}
.post-date {
    font-size: .9rem;
    color: #888;
}
.post-title {
    font-size: 2rem;
    font-weight: 900;
    margin-top: .5rem;
    color: #3d3d3d;
}
.post-content p {
    line-height: 2.2;
    margin-bottom: 1.5rem;
}
.post-featured-image {
    margin: 2rem 0;
    border-radius: 1.5rem;
    overflow: hidden;
}
.post-subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2rem 0 1.5rem 0;
    color: #3d3d3d;
}

/* Sidebar Area */
.post-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}
.sidebar-widget {
    background-color: #f7f3ed;
    border-radius: 1.25rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9e4dc;
    color: #3d3d3d;
}
.category-list {
    list-style: none;
}
.category-list li {
    margin-bottom: 1rem;
}
.category-list li a {
    color: #555;
    display: flex;
    align-items: center;
    transition: color .3s;
}
.category-list li a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #d3965b;
    border-radius: 50%;
    margin-left: 1rem;
    transition: transform .3s;
}
.category-list li a:hover {
    color: #d3965b;
}
.category-list li a:hover::before {
    transform: scale(1.5);
}

/* ----- 12C. PODCAST PLAYER ----- */
.post-podcast-player {
    display: flex;
    gap: 1rem;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 1.25rem;
    padding: 1rem;
    margin: 3rem 0;
}
.podcast-player-image {
    width: 100px;
    height: 100px;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
}
.podcast-player-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.podcast-player-controls {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.podcast-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.podcast-title-wrapper {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.podcast-icon {
    font-size: 2rem;
    color: #d3965b;
}
.podcast-title-text h4 { font-size: 1rem; margin: 0; }
.podcast-title-text span { font-size: .8rem; color: #888; }
.podcast-audio-player {
    display: flex;
    align-items: center;
    gap: .75rem;
    background-color: #f7f3ed;
    padding: .5rem 1rem;
    border-radius: 2rem;
}
.podcast-play-btn {
    background-color: #d3965b;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}
.podcast-time {
    font-size: .8rem;
    color: #888;
    direction: ltr;
}
.podcast-waveform {
    width: 150px;
    height: 30px;
    position: relative;
    cursor: pointer;
}
.waveform-bg {
    position: absolute;
    inset: 0;
    background: url(images/waveform-light.svg) no-repeat center center / contain;
    opacity: 0.4;
}
.waveform-progress {
    position: absolute;
    inset: 0;
    background: url(images/waveform-light.svg) no-repeat center center / contain;
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 0%);
    mask-image: linear-gradient(to right, #000 0%, transparent 0%);
    width: 100%;
    height: 100%;
}
.podcast-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #aaa;
    cursor: pointer;
}
.podcast-player-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    color: #888;
}
.podcast-add-btn {
    background-color: #f0f0f0;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
}

/* ----- 12D. COMMENTS SECTION ----- */
.comments-section-post {
    background-color: #fff;
    padding-bottom: 5rem;
}
/* Re-using styles from product-detail.css */
/* No new styles needed if the structure is the same */

/* ----- 12E. RESPONSIVE ----- */
@media screen and (max-width: 992px) {
    .post-layout {
        grid-template-columns: 1fr;
    }
    .post-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .single-post-hero { height: 250px; }
    .single-post-hero__bg-image { border-bottom-left-radius: 80px; }
    .post-content-section { border-radius: 80px 0 0 0; margin-top: -80px; padding: 2rem 1rem 4rem; }
    .post-title { font-size: 1.5rem; }
    .post-sidebar { grid-template-columns: 1fr; }
    .post-podcast-player { flex-direction: column; align-items: flex-start; }
    .podcast-audio-player { flex-wrap: wrap; justify-content: center; padding: 1rem; width: 100%; border-radius: 1rem; }
}

@media screen and (max-width: 576px) {
    .single-post-hero__social { display: none; }
    .single-post-hero__bg-image { width: 100%; border-radius: 0; }
    .post-content-section { border-radius: 0; margin-top: 0; padding-top: 2rem; }
    .podcast-player-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
}


/* ============================================= */
/*           13. USER PANEL PAGES                */
/* ============================================= */

/* ----- 13A. WRAPPER & LAYOUT ----- */
.panel-wrapper {
    padding-top: calc(var(--header-height) + 0rem);
    padding-bottom: 5rem;
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar and main content */
    gap: 2rem;
    align-items: flex-start;
}

/* ----- 13B. SIDEBAR ----- */
.panel-sidebar {
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}
.user-profile-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #f7f3ed;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}
.user-profile-box__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}
.user-profile-box__info h4 { font-size: 1rem; margin: 0 0 .25rem 0; }
.user-profile-box__info span { font-size: .8rem; color: #888; direction: ltr; }
.user-profile-box__notif {
    margin-right: auto;
    font-size: 1.2rem;
    color: #888;
}
.panel-nav ul { list-style: none; }
.panel-nav li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: .75rem;
    margin-bottom: .5rem;
    color: #555;
    font-weight: 500;
    transition: all .3s;
}
.panel-nav li a:hover {
    background-color: #f7f3ed;
    color: #333;
}
.panel-nav li a.active {
    background-color: #f7a659;
    color: #3d3d3d;
}
.panel-nav li a.active i {
    color: #3d3d3d;
}
.panel-nav li a i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    color: #aaa;
}
.btn-logout {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    color: #e74c3c;
    font-weight: 500;
}

/* ----- 13C. MAIN CONTENT ----- */
.panel-main-content {
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
}
.panel-page-title {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 2rem;
}
.section-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Orders List */
.orders-list { display: flex; flex-direction: column; gap: 1.5rem; }
.order-item { border: 1px solid #eee; border-radius: 1rem; overflow: hidden; }
.order-item__header {
    background-color: #f7f3ed;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    color: #555;
}
.order-item__header .price-value { color: #27ae60; }
.order-item__body {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-products-preview { display: flex; }
.product-preview {
    width: 48px;
    height: 48px;
    border: 2px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin-right: -15px;
}
.product-preview img { width: 100%; height: 100%; object-fit: cover; }
.btn-view-order {
    background-color: #eee;
    color: #555;
    padding: .6rem 1.5rem;
    border-radius: 2rem;
    font-weight: 500;
    font-size: .9rem;
}

/* Order Tracking */
.order-tracking-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.btn-back { background: #eee; color: #555; padding: .6rem 1.2rem; border-radius: .75rem; font-size: .9rem; font-weight: 500; }
.order-details-box { background: #f7f3ed; padding: 1.5rem; border-radius: 1rem; margin-bottom: 2rem; }
.order-details-box p { margin-bottom: .75rem; }
.status-processing { color: #2980b9; background-color: rgba(41, 128, 185, 0.1); padding: 0.3rem 0.8rem; border-radius: 1rem; font-size: 0.85rem; }
.status-completed { color: #27ae60; background-color: rgba(39, 174, 96, 0.1); padding: 0.3rem 0.8rem; border-radius: 1rem; font-size: 0.85rem; }
.status-cancelled { color: #e74c3c; background-color: rgba(231, 76, 60, 0.1); padding: 0.3rem 0.8rem; border-radius: 1rem; font-size: 0.85rem; }
.order-status-timeline { margin-bottom: 2rem; }
.timeline-wrapper { display: flex; justify-content: space-between; text-align: center; position: relative; }
.timeline-wrapper::before { content: ''; position: absolute; top: 24px; right: 10%; width: 80%; height: 2px; background: repeating-linear-gradient(90deg, #ccc, #ccc 5px, transparent 5px, transparent 10px); z-index: 1; }
.timeline-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 20%; }
.timeline-icon { width: 50px; height: 50px; border-radius: 50%; background: #eee; color: #aaa; display: grid; place-items: center; font-size: 1.5rem; z-index: 2; border: 4px solid #fff; }
.timeline-item.completed .timeline-icon { background: #27ae60; color: #fff; }
.timeline-item p { font-weight: 500; font-size: .9rem; }
.timeline-item span { font-size: .8rem; color: #888; }
.ordered-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }

/* Favorites */
.favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }

/* Tickets */
.tickets-list { display: flex; flex-direction: column; gap: 1rem; }
.ticket-item { display: flex; justify-content: space-between; align-items: center; background: #f7f3ed; padding: 1.5rem; border-radius: 1rem; }
.ticket-id { font-size: .8rem; color: #888; }
.ticket-title { font-size: 1.1rem; margin: .25rem 0; }
.ticket-item__status { padding: .4rem 1rem; border-radius: 2rem; font-size: .8rem; font-weight: 500; }
.ticket-item__status.open { background-color: #e8f8f5; color: #27ae60; }
.ticket-item__status.closed { background-color: #fdedec; color: #e74c3c; }

/* Invoice */
.invoice-section { margin-top: 2rem; }
.invoice-table-wrapper { overflow-x: auto; margin-bottom: 1.5rem; }
.invoice-table { width: 100%; border-collapse: collapse; }
.invoice-table th, .invoice-table td { padding: 1rem; text-align: right; border-bottom: 1px solid #eee; }
.invoice-table th { background-color: #f7f3ed; font-weight: 700; color: #333; }
.invoice-table tbody tr:hover { background-color: #f9f9f9; }
.invoice-table tfoot td { font-weight: 500; }
.invoice-table tfoot tr.total-row { font-weight: 700; color: #f7a659; }
.invoice-table tfoot tr.total-row td { border-top: 2px solid #f7a659; padding-top: 1.2rem; }
.invoice-actions { display: flex; gap: 1rem; justify-content: flex-end; }

@media screen and (max-width: 768px) {
    .invoice-table th, .invoice-table td { padding: 0.8rem; font-size: 0.9rem; }
    .invoice-actions { flex-direction: column; width: 100%; }
    .invoice-actions button { width: 100%; }
}

/* Account Form */
.account-form { display: flex; flex-direction: column; gap: 1rem; }
.account-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.account-form .address-row { grid-template-columns: 1fr 1fr 2fr; }
.account-form input { width: 100%; background: #f7f3ed; border: 1px solid #e9e4dc; border-radius: .75rem; padding: 1rem; }
.account-form button { align-self: flex-start; }
.address-selection { display: flex; flex-direction: column; gap: 1rem; }
.address-option { display: block; background: #f7f3ed; padding: 1.5rem; border-radius: 1rem; cursor: pointer; }
.address-option input { display: none; }
.address-option h5 { margin-bottom: .5rem; }
.address-option p { color: #888; }
.address-option input:checked + .address-option__content { border-right: 4px solid #f7a659; padding-right: 1rem; }
.btn-add-new-address { background: none; border: 2px dashed #ddd; color: #888; padding: 1rem; border-radius: 1rem; text-align: center; cursor: pointer; }

/* ----- 13D. RESPONSIVE ----- */
@media screen and (max-width: 992px) {
    .panel-wrapper {
        grid-template-columns: 1fr;
    }
    .panel-sidebar {
        position: static;
        width: 100%;
    }
    .order-item__header { flex-direction: column; align-items: flex-start; gap: .5rem; }
    
    /* Mega Menu Responsive */
    .mega-menu {
        width: 90vw;
        max-width: 700px;
        flex-direction: column;
    }
    .mega-menu__image {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .timeline-wrapper::before { display: none; }
    .timeline-wrapper { flex-direction: column; align-items: flex-start; gap: 2rem; }
    .timeline-item { flex-direction: row; text-align: right; width: 100%; }
    .account-form .form-row, .account-form .address-row { grid-template-columns: 1fr; }
    
    /* Mega Menu Responsive */
    .mega-menu {
        width: 100%;
        right: 0;
        left: 0;
        position: relative; /* Changed from fixed to relative for better mobile experience */
        top: 0; /* Reset top position */
        border-radius: 0;
        max-height: none; /* Remove height restriction */
        overflow-y: visible;
    }
    .mega-menu__column {
        padding: 0.5rem;
    }
}
@media screen and (max-width: 576px) {
    .panel-sidebar { padding: 1rem; }
    .user-profile-box { flex-direction: column; text-align: center; }
    .user-profile-box__notif { position: absolute; top: 1.5rem; left: 1.5rem; }
    .panel-nav li a span { display: inline-block; margin-right: 0.5rem; }
    .panel-nav li a { justify-content: flex-start; padding: 0.8rem; }
    .btn-logout span { }
    .btn-logout { justify-content: center; }
    .order-item__body { flex-direction: column; gap: 1rem; }
    
    /* Mega Menu Responsive */
    .mega-menu {
        padding: 0.5rem;
    }
    .mega-menu__column {
        width: 100%;
        margin-bottom: 0.5rem; /* Reduced margin */
    }
    .mega-menu__column h4, .mega-menu__column-title {
        font-size: 1rem;
        margin-bottom: 0.3rem; /* Reduced margin */
        padding: 0.5rem 1rem; /* Reduced padding */
    }
    .mega-menu__column ul li, .mega-menu__list li {
        margin-bottom: 0.2rem; /* Reduced margin */
    }
    .mega-menu__column ul li a {
        font-size: 0.9rem;
        padding: 0.6rem 1.5rem; /* Reduced padding */
    }
}

/* ============================================= */
/*              USERCO PAGE STYLES              */
/* ============================================= */

/* تنظیم زمینه مشکی برای صفحه userco */
body.page-template-page-userco {
    background-color: #000000 !important;
}

body.page-template-page-userco .main {
    background-color: #000000;
}

body.page-template-page-userco .story-viewer-overlay {
    background-color: rgba(0, 0, 0, 0.95);
}

/* ----- TRUST FORM STYLES (SIMILAR TO FEEDBACK FORM) ----- */
.trust-form-section {
    padding: 3rem 1rem;
    margin-bottom: 4rem;
    background-color: var(--dark-color-alt);
}

.trust-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.trust-form-wrapper h3 {
    color: var(--text-color-light);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.trust-form-wrapper p {
    color: #888;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.trust-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    text-align: right;
}

.trust-form .form-group {
    display: flex;
    flex-direction: column;
}

.trust-form .form-group:nth-child(3),
.trust-form .form-group:nth-child(4),
.trust-form .form-group:nth-child(5),
.trust-form .form-group:nth-child(6) {
    grid-column: 1 / -1;
}

.trust-form label {
    color: var(--text-color-light);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.trust-form input,
.trust-form textarea {
    width: 100%;
    background-color: var(--dark-color-alt);
    border: 1px solid rgb(0 0 0 / 13%);
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: var(--text-color-light);
    font-family: var(--body-font);
    font-size: 1rem;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.trust-form textarea {
    resize: vertical;
    min-height: 120px;
}

.trust-form button {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 1rem 4rem;
    font-size: 1rem;
}

.rating-stars {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rating-stars i {
    color: #666;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.rating-stars i:hover,
.rating-stars i.active {
    color: #ffd700;
}

/* Responsive adjustments for trust form */
@media screen and (max-width: 768px) {
    .trust-form {
        grid-template-columns: 1fr;
    }
    
    .trust-form .form-group:nth-child(3),
    .trust-form .form-group:nth-child(4),
    .trust-form .form-group:nth-child(5),
    .trust-form .form-group:nth-child(6) {
        grid-column: 1;
    }
}

/* ==========================================================================
   DIGITS PLUGIN INTEGRATION STYLES - MATCHING ORIGINAL MODAL
   ========================================================================== */

/* Reset Digits Modal Container (legacy defaults) - no !important to allow redesign to override */
.digits-modal-container {
    background: rgba(44, 44, 44, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1.5rem;
    position: relative;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: none;
    overflow: visible;
}

/* Digits Form Wrapper */
.digits-modal-container .digits_ui {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.digits-modal-container .digits_embed-form {
    background: transparent !important;
}

/* Digits Form Container */
.digits-modal-container .dig_lrf_box {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.digits-modal-container .dig_form {
    background: transparent !important;
    padding: 0 !important;
}

/* Form Title Styling */
.digits-modal-container .dig_form h3,
.digits-modal-container .dig_form .dig_title {
    font-size: 1.2rem !important;
    margin-bottom: .5rem !important;
    color: #fff !important;
    font-family: var(--body-font) !important;
}

.digits-modal-container .dig_form p,
.digits-modal-container .dig_form .dig_subtitle {
    color: #ccc !important;
    margin-bottom: 1.5rem !important;
    font-family: var(--body-font) !important;
}

/* Mobile Number Input - Match modal-input style */
.digits-modal-container .dig_wc_mobcountrycode,
.digits-modal-container .dig_wc_countrycode,
.digits-modal-container .dig_mobile {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.92) !important;
    text-align: right !important;
    font-family: var(--body-font) !important;
    margin-bottom: 1rem !important;
    direction: rtl !important;
    font-size: .938rem !important;
    transition: box-shadow .2s ease, border-color .2s ease !important;
}

.digits-modal-container .dig_wc_mobcountrycode:focus,
.digits-modal-container .dig_wc_countrycode:focus,
.digits-modal-container .dig_mobile:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(247, 166, 89, 0.25) !important;
}

/* OTP Input Fields - Match code-inputs style */
.digits-modal-container .dig_otp_field {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.92) !important;
    text-align: center !important;
    font-size: 1.5rem !important;
    font-family: var(--body-font) !important;
    margin: 0 0.4rem !important;
    display: inline-block !important;
}

.digits-modal-container .dig_otp_field:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(247, 166, 89, 0.25) !important;
}

/* OTP Container */
.digits-modal-container .dig_otp_field_container {
    display: flex !important;
    gap: 0.6rem !important;
    justify-content: center !important;
    direction: ltr !important;
    margin-bottom: 1rem !important;
}

/* Buttons - Match btn btn--primary modal-btn style */
.digits-modal-container .dig_login_button,
.digits-modal-container .dig_signup_button {
    display: inline-block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: var(--dark-color) !important;
    font-family: var(--body-font) !important;
    cursor: pointer !important;
    background: linear-gradient(90deg, var(--primary-color), #ffc78f) !important;
    box-shadow: 0 12px 26px rgba(247, 166, 89, 0.38) !important;
    transition: transform .08s ease-in-out, box-shadow .2s ease !important;
}

.digits-modal-container .dig_login_button:hover,
.digits-modal-container .dig_signup_button:hover {
    filter: brightness(1.02) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 32px rgba(247, 166, 89, 0.48) !important;
}

/* Resend OTP Link - Match resend-code style */
.digits-modal-container .dig_resendotp {
    display: block !important;
    color: var(--primary-color) !important;
    margin-bottom: 1.5rem !important;
    font-size: .9rem !important;
    text-decoration: none !important;
    font-family: var(--body-font) !important;
}

.digits-modal-container .dig_resendotp:hover {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

/* Enforce phone-only login/register: hide non-phone fields if present */
.digits-modal-container input[type="email"],
.digits-modal-container input[type="password"],
.digits-modal-container .dig_email,
.digits-modal-container .dig_username,
.digits-modal-container .dig_user,
.digits-modal-container .dig_pass,
.digits-modal-container .dig_password,
.digits-modal-container .dig_login_fields .dig_username_fields,
.digits-modal-container .dig_login_fields .dig_password_fields {
    display: none !important;
}

/* Form Labels */
.digits-modal-container .dig_label {
    color: #ccc !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-size: .9rem !important;
    text-align: right !important;
    font-family: var(--body-font) !important;
}

/* Error Messages */
.digits-modal-container .dig_error {
    background: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
    padding: 10px !important;
    border-radius: .75rem !important;
    margin: 10px 0 !important;
    font-size: .9rem !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    font-family: var(--body-font) !important;
}

/* Success Messages */
.digits-modal-container .dig_success {
    background: rgba(40, 167, 69, 0.1) !important;
    color: #28a745 !important;
    padding: 10px !important;
    border-radius: .75rem !important;
    margin: 10px 0 !important;
    font-size: .9rem !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
    font-family: var(--body-font) !important;
}

/* Loading State */
.digits-modal-container .dig_load_overlay {
    background: rgba(44, 44, 44, 0.9) !important;
    border-radius: .75rem !important;
}

/* Country Code Selector */
.digits-modal-container .dig_countrycode {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 14px 0 0 14px !important;
    padding: 0.875rem 1rem !important;
    font-size: .938rem !important;
    color: rgba(255,255,255,0.92) !important;
    direction: rtl !important;
    transition: box-shadow .2s ease, border-color .2s ease !important;
}

/* Mobile Input Container */
.digits-modal-container .dig_mobile_wrapper {
    display: flex !important;
    margin-bottom: 1rem !important;
    direction: rtl !important;
}

/* Mobile Number Field in wrapper */
.digits-modal-container .dig_mobile_wrapper .dig_mobile {
    border-radius: 0 14px 14px 0 !important;
    border-right: none !important;
    flex: 1 !important;
}

/* Hide Digits Copyright */
.digits-modal-container .dig_copyright,
.digits-modal-container .dig_powered_by,
.digits-modal-container .dig_footer {
    display: none !important;
}

/* Set default country code to Iran (+98) */
.digits-modal-container .dig_countrycode {
    background: rgba(255,255,255,0.08) url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyMCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjE0IiBmaWxsPSIjMDA5NjM5Ii8+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSI0LjY2NjY3IiBmaWxsPSIjRkZGRkZGIi8+CjxyZWN0IHk9IjkuMzMzMzQiIHdpZHRoPSIyMCIgaGVpZ2h0PSI0LjY2NjY3IiBmaWxsPSIjREMxNDNDIi8+Cjwvc3ZnPgo=') no-repeat right 10px center !important;
    background-size: 20px 14px !important;
    padding-right: 40px !important;
}

/* Remember me checkbox styling */
.digits-modal-container input[type="checkbox"] {
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    background: transparent !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
}
.digits-modal-container input[type="checkbox"]:checked {
    background: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(247,166,89,0.3) !important;
    border-color: var(--primary-color) !important;
}
.digits-modal-container label { font-family: var(--body-font) !important; }

/* Responsive Design for Digits Forms */
@media screen and (max-width: 768px) {
    .digits-modal-container {
        width: 95%;
        padding: 1.5rem;
    }
    
    .digits-modal-container .dig_otp_field {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
        margin: 0 0.25rem !important;
    }
}

@media screen and (max-width: 576px) {
    .digits-modal-container {
        padding: 1rem;
    }
    
    .digits-modal-container .dig_otp_field {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        margin: 0 0.2rem !important;
    }
    
    .digits-modal-container .dig_login_button,
    .digits-modal-container .dig_signup_button {
        padding: 0.7rem 1.5rem !important;
        font-size: .9rem !important;
    }
}

/* ==================== BLOG SINGLE PROFESSIONAL STYLES ==================== */
.blog-single-professional {
    padding: 0;
    background: #ffffff;
    min-height: 100vh;
}

/* Breadcrumb Professional */
.breadcrumb-professional {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem 0;
    border-bottom: 1px solid #dee2e6;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.breadcrumb-link {
    color: #6c757d;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
}

.breadcrumb-link:hover {
    color: #495057;
    background: rgba(0,0,0,0.05);
}

.breadcrumb-separator {
    color: #adb5bd;
    font-size: 0.8rem;
}

.breadcrumb-current {
    color: #212529;
    font-weight: 600;
    background: rgba(13, 110, 253, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
}

/* Hero Section Professional */
.hero-professional {
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 50%, #6f42c1 100%);
    color: white;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.hero-professional::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
    z-index: 1;
}

.hero-professional::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    z-index: 1;
}

.hero-content-professional {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-professional h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: 1.3rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    font-weight: 300;
}

.hero-meta-professional {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.meta-item-professional {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255,255,255,0.15);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.meta-item-professional i {
    font-size: 1.1rem;
}

/* Content Grid Layout */
.content-grid-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.main-content-professional {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #f1f3f4;
}

.content-header {
    padding: 3rem 3rem 2rem;
    border-bottom: 1px solid #f1f3f4;
}

.content-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
}

.author-details h4 {
    margin: 0;
    color: #212529;
    font-weight: 600;
}

.author-details span {
    color: #6c757d;
    font-size: 0.9rem;
}

.content-stats {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.table-of-contents {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
}

.toc-title {
    color: #212529;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item {
    margin-bottom: 0.8rem;
}

.toc-link {
    color: #495057;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding-right: 1rem;
}

.toc-link:hover {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    padding-right: 1.5rem;
}

/* Article Content Professional */
.article-content-professional {
    padding: 3rem;
    line-height: 1.8;
    color: #212529;
}

.article-content-professional h2 {
    color: #212529;
    margin: 3rem 0 1.5rem;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 1rem;
}

.article-content-professional h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
    border-radius: 2px;
}

.article-content-professional h3 {
    color: #495057;
    margin: 2.5rem 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.article-content-professional p {
    margin-bottom: 1.8rem;
    font-size: 1.1rem;
    text-align: justify;
}

.article-content-professional ul {
    margin: 1.5rem 0;
    padding-right: 2rem;
}

.article-content-professional li {
    margin-bottom: 0.8rem;
    font-size: 1.05rem;
}

/* Recommendation Box */
.recommendation-box {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #90caf9;
    border-radius: 15px;
    padding: 2.5rem;
    margin: 3rem 0;
    position: relative;
    overflow: hidden;
}

.recommendation-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
}

.recommendation-content {
    position: relative;
    z-index: 2;
}

.recommendation-box h3 {
    color: #1565c0;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.recommendation-box p {
    color: #1976d2;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

/* Product Showcase Professional */
.product-showcase-professional {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem;
    border-radius: 20px;
    margin: 3rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.product-showcase-professional::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 60%;
    height: 160%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    z-index: 1;
}

.showcase-content {
    position: relative;
    z-index: 2;
}

.product-showcase-professional h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.product-showcase-professional p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.showcase-button {
    background: white;
    color: #667eea;
    padding: 1.2rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.showcase-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    color: #5a6fd8;
}

/* Comparison Table Professional */
.table-container-professional {
    overflow-x: auto;
    margin: 3rem 0;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.comparison-table-professional {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 15px;
    overflow: hidden;
}

.comparison-table-professional th {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    color: white;
    padding: 1.5rem;
    text-align: right;
    font-weight: 600;
    font-size: 1.1rem;
}

.comparison-table-professional td {
    padding: 1.2rem 1.5rem;
    text-align: right;
    border-bottom: 1px solid #f1f3f4;
    font-size: 1.05rem;
}

.comparison-table-professional tr:nth-child(even) {
    background: #f8f9fa;
}

.comparison-table-professional tr:hover {
    background: #e3f2fd;
    transform: scale(1.01);
    transition: all 0.3s ease;
}

/* Info Cards Grid */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.info-card {
    background: white;
    border: 1px solid #f1f3f4;
    border-radius: 15px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.info-card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: #1976d2;
    font-size: 1.8rem;
}

.info-card h4 {
    color: #212529;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.info-card p {
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
}

/* CTA Section Professional */
.cta-section-professional {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    padding: 4rem 3rem;
    border-radius: 20px;
    text-align: center;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
}

.cta-section-professional::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

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

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-section-professional h3 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.cta-section-professional p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.cta-button-professional {
    background: white;
    color: #ff6b35;
    padding: 1.5rem 3rem;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.cta-button-professional:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    color: #e55a2b;
}

/* Article Tags and Share */
.article-footer {
    padding: 3rem;
    border-top: 1px solid #f1f3f4;
    background: #f8f9fa;
}

.tags-share-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}

.article-tags {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tags-label {
    color: #495057;
    font-weight: 600;
    margin-left: 1rem;
}

.tag-item {
    background: #e9ecef;
    color: #495057;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.tag-item:hover {
    background: #0d6efd;
    color: white;
}

.share-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.share-label {
    color: #495057;
    font-weight: 600;
    margin-left: 1rem;
}

.share-button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
}

.share-button.facebook { background: #1877f2; }
.share-button.twitter { background: #1da1f2; }
.share-button.linkedin { background: #0077b5; }
.share-button.telegram { background: #0088cc; }

.share-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Professional Sidebar */
.sidebar-professional {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.sidebar-widget-professional {
    background: white;
    border: 1px solid #f1f3f4;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.sidebar-widget-professional:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.widget-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f1f3f4;
}

.widget-title-professional {
    color: #212529;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.widget-content {
    padding: 2rem;
}

/* Search Widget Professional */
.search-form-professional {
    position: relative;
}

.search-input-professional {
    width: 100%;
    padding: 1.2rem 1.5rem;
    border: 2px solid #f1f3f4;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.search-input-professional:focus {
    border-color: #0d6efd;
    background: white;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.search-button-professional {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #0d6efd;
    color: white;
    border: none;
    padding: 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-button-professional:hover {
    background: #0b5ed7;
}

/* Categories Widget Professional */
.categories-list-professional {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-item-professional {
    border-bottom: 1px solid #f1f3f4;
    transition: all 0.3s ease;
}

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

.category-item-professional:hover {
    background: #f8f9fa;
}

.category-link-professional {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    text-decoration: none;
    color: #495057;
    transition: all 0.3s ease;
}

.category-link-professional:hover {
    color: #0d6efd;
    padding-right: 1rem;
}

.category-name {
    font-weight: 500;
}

.category-count-professional {
    background: #e9ecef;
    color: #6c757d;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Recent Posts Widget Professional */
.recent-posts-list-professional {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.recent-post-item-professional {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.recent-post-item-professional:hover {
    background: #f8f9fa;
}

.recent-post-image-professional {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
}

.recent-post-image-professional img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recent-post-item-professional:hover .recent-post-image-professional img {
    transform: scale(1.1);
}

.recent-post-content-professional {
    flex: 1;
}

.recent-post-title-professional {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    line-height: 1.4;
}

.recent-post-title-professional a {
    color: #212529;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.recent-post-title-professional a:hover {
    color: #0d6efd;
}

.recent-post-meta-professional {
    color: #6c757d;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Newsletter Widget Professional */
.newsletter-description-professional {
    color: #6c757d;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.newsletter-form-professional {
    position: relative;
}

.newsletter-input-professional {
    width: 100%;
    padding: 1.2rem 1.5rem;
    border: 2px solid #f1f3f4;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.newsletter-input-professional:focus {
    border-color: #0d6efd;
    background: white;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.newsletter-button-professional {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: #0d6efd;
    color: white;
    border: none;
    padding: 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newsletter-button-professional:hover {
    background: #0b5ed7;
}

/* Related Posts Section Professional */
.related-posts-section-professional {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.section-header-professional {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title-professional {
    font-size: 2.8rem;
    color: #212529;
    margin-bottom: 1rem;
    font-weight: 800;
}

.section-subtitle-professional {
    color: #6c757d;
    font-size: 1.2rem;
    font-weight: 300;
}

.related-posts-grid-professional {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2.5rem;
}

.related-post-card-professional {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid #f1f3f4;
}

.related-post-card-professional:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.related-post-image-professional {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.related-post-image-professional img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-post-card-professional:hover .related-post-image-professional img {
    transform: scale(1.05);
}

.related-post-overlay-professional {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.8) 0%, rgba(102, 16, 242, 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.related-post-card-professional:hover .related-post-overlay-professional {
    opacity: 1;
}

.read-more-btn-professional {
    background: white;
    color: #0d6efd;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.read-more-btn-professional:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.related-post-content-professional {
    padding: 2rem;
}

.related-post-meta-professional {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.post-category-professional {
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.post-read-time-professional {
    color: #6c757d;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.related-post-title-professional {
    margin: 0 0 1.5rem;
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: 600;
}

.related-post-title-professional a {
    color: #212529;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-post-title-professional a:hover {
    color: #0d6efd;
}

.related-post-excerpt-professional {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.related-post-footer-professional {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f3f4;
}

.post-date-professional {
    color: #adb5bd;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.read-more-link-professional {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.read-more-link-professional:hover {
    color: #0b5ed7;
    gap: 1.2rem;
}

/* Responsive Design Professional */
@media (max-width: 1200px) {
    .content-grid-layout {
        grid-template-columns: 1fr 320px;
        gap: 3rem;
    }
}

@media (max-width: 992px) {
    .content-grid-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3rem 1.5rem;
    }

    .hero-professional h1 {
        font-size: 2.8rem;
    }

    .hero-meta-professional {
        flex-direction: column;
        gap: 1.5rem;
    }

    .main-content-professional {
        order: 1;
    }

    .sidebar-professional {
        order: 2;
    }
}

@media (max-width: 768px) {
    .hero-professional {
        padding: 3rem 0;
    }

    .hero-professional h1 {
        font-size: 2.2rem;
    }

    .content-header,
    .article-content-professional,
    .article-footer {
        padding: 2rem;
    }

    .content-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .tags-share-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .share-buttons {
        justify-content: center;
    }

    .related-posts-grid-professional {
        grid-template-columns: 1fr;
    }

    .section-title-professional {
        font-size: 2.2rem;
    }

    .info-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .content-grid-layout {
        padding: 2rem 1rem;
    }

    .hero-professional h1 {
        font-size: 1.8rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .content-header,
    .article-content-professional,
    .article-footer {
        padding: 1.5rem;
    }

    .article-content-professional h2 {
        font-size: 1.6rem;
    }

    .product-showcase-professional,
    .cta-section-professional {
        padding: 2rem 1.5rem;
    }

    .widget-content {
        padding: 1.5rem;
    }
}
/* ============================================= */
/*    PRODUCT DETAIL PAGE V3 (FINAL REVISION)    */
/* ============================================= */

/* ----- WRAPPER & THEME ----- */
body.lightee {
background: #FFFFFF;
    color: #3d3d3d;
}
.product-detail-page-wrapper {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 5rem;
}

/* ----- 1. PRODUCT GALLERY (FULL WIDTH) ----- */
.product-gallery-v3 {
    margin-bottom: 1.5rem;
}
.product-gallery-v3__header-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem; padding: 0 .5rem;
}
.action-icons-v3 { font-size: 1.2rem; color: #aaa; display: flex; gap: 1.5rem; }
.action-icons-v3 i { cursor: pointer; transition: color .3s; }
.action-icons-v3 i:hover { color: #3d3d3d; }
.product-rating-v3 { color: #f39c12; }
.product-gallery-v3__main-container {
    display: flex; align-items: flex-start; gap: 2rem;
}
.product-gallery-v3__color-selector { 
    display: flex; flex-direction: column; gap: 1rem; 
    min-width: 60px;
}
.color-dot-v3 {
    width: 45px; height: 45px; border-radius: 50%; cursor: pointer;
    border: 3px solid #f7f3ed; box-shadow: 0 0 0 1px #ddd; transition: all .3s;
    background-size: cover; background-position: center;
    position: relative;
    overflow: hidden;
}
.color-dot-v3::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all .3s;
}
.color-dot-v3.active::after { 
    border-color: #c48347;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c48347;
}
.product-gallery-v3__image-wrapper { 
    position: relative; 
    flex-grow: 1; 
    max-width: 550px;
    max-height: 450px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.main-product-image-v3 { 
    width: 100%; 
    height: auto;
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 0.5rem;
    transition: opacity 0.3s ease;
}

/* Gallery Navigation Buttons */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: 16px;
    color: #666;
}
.gallery-nav-btn:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    color: #c48347;
}
.gallery-nav-prev {
    left: 15px;
}
.gallery-nav-next {
    right: 15px;
}
.product-watermark-v3 {
    position: absolute; bottom: 1rem; right: 50%;
    transform: translateX(50%); width: 100px; opacity: 0.9;
}
.hotspot-v3 { position: absolute; z-index: 10; }
.hotspot-v3__dot {
    width: 16px; height: 16px; background: #fff;
    border: 3px solid rgba(61, 61, 61, 0.8); border-radius: 50%; cursor: pointer;
}
.hotspot-v3__text {
    position: absolute; background: #fff; padding: .6rem 1rem; border-radius: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-size: .8rem; min-width: 150px;
    text-align: center; opacity: 0; visibility: hidden; transition: all .3s;
    white-space: nowrap; bottom: 180%; left: 50%; transform: translateX(-50%);
}
.hotspot-v3__text i { color: #27ae60; margin-left: .4rem; }
.hotspot-v3:hover .hotspot-v3__text { opacity: 1; visibility: visible; }
.product-gallery-v3__size-selector { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.size-line-v3 { height: 60px; width: 3px; background-color: #e0e0e0; border-radius: 3px; }
.size-label-v3 { writing-mode: vertical-rl; color: #888; font-size: .9rem; }
.size-item-v3 { font-weight: 700; }
.product-gallery-v3__thumbnails { 
    display: flex; 
    flex-direction: column;
    gap: 1rem; 
    min-width: 80px;
    max-height: 450px;
    overflow-y: auto;
    padding-right: 5px;
}
.thumb-item-v3 {
    width: 75px; 
    height: 75px; 
    border: 2px solid #eee; 
    border-radius: .75rem;
    padding: .4rem; 
    cursor: pointer; 
    transition: all .3s; 
    background-color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.thumb-item-v3.active, .thumb-item-v3:hover { 
    border-color: #c48347; 
    transform: translateX(-3px);
    box-shadow: 0 4px 15px rgba(196, 131, 71, 0.25);
}
.thumb-item-v3 img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    border-radius: .4rem; 
}

/* ----- 2. PURCHASE INFO (FULL WIDTH) ----- */
.product-purchase-info-v3 {
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    margin-bottom: 4rem;
}
.purchase-info-v3__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.purchase-info-v3__details-box { text-align: right; }
.stock-status-v3 {
    background-color: #fff1e6; color: #d3965b; padding: .4rem 1rem; border-radius: .75rem;
    font-size: .9rem; display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
}
.stock-status-v3 i { font-size: 1.2rem; }
.title-v3 { font-size: 1.6rem; font-weight: 800; line-height: 1.6; color: #3d3d3d; }
.price-section-v3 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.price-box-v3 { display: flex; align-items: baseline; gap: .5rem; }
.price-label-v3 { color: #888; font-size: 1rem; }
.price-value-v3 { font-size: 1.8rem; font-weight: 900; color: #3d3d3d; }
.price-value-v3 span { font-size: .9rem; font-weight: 500; }
.promo-badge-v3 {
    background-color: #ffeaea; color: #e74c3c; padding: .3rem 1rem .3rem .3rem;
    border-radius: 2rem; font-size: .8rem; display: flex; align-items: center; gap: .5rem; font-weight: 500;
}
.promo-badge-v3 img { height: 30px; width: 30px; }
.action-buttons-v3 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.btn-add-to-cart-v3, .btn-snapp-pay-v3 {
    width: 100%; padding: 1rem; border-radius: .75rem; font-size: 1rem;
    font-weight: 700; border: none; cursor: pointer; display: flex;
    align-items: center; justify-content: center; gap: .75rem; transition: all .3s;
}
.btn-add-to-cart-v3 { background-color: #c48347; color: #fff; }
.btn-add-to-cart-v3:hover { background-color: #b07540; }
.btn-snapp-pay-v3 {
    background-color: #0072ff; color: #fff; justify-content: space-between; padding: .8rem 1.2rem;
}
.btn-snapp-pay-v3:hover { background-color: #005fdb; }
.btn-snapp-pay-v3 img { height: 28px; order: 3; }
.btn-snapp-pay-v3 span { order: 2; }
.btn-snapp-pay-v3 i { order: 1; font-size: .8rem; }

/* ----- 3. PRODUCT DETAILS ----- */
.product-details-section-v3 { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
.details-box-v3 { background-color: #fff; border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 5px 25px rgba(0,0,0,0.05); }
.details-box-v3 h3 { font-size: 1.3rem; margin-bottom: 1.5rem; color: #3d3d3d; text-align: right; }
.quote-box-v3 { position: relative; text-align: center; }
.quote-box-v3::before, .quote-box-v3::after {
    font-family: serif; font-size: 6rem; color: #f0ebe4;
    position: absolute; line-height: 1; z-index: 0;
}
.quote-box-v3::before { content: "”"; top: 1rem; right: 1.5rem; }
.quote-box-v3::after { content: "”"; bottom: -1.5rem; left: 1.5rem; transform: rotate(180deg); }
.quote-box-v3 p, .quote-box-v3 h3 { position: relative; z-index: 1; }
.quote-box-v3 p { line-height: 2; color: #555; }
.specs-list-v3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.5rem; }
.specs-list-v3 li { display: flex; align-items: center; gap: .75rem; }
.specs-list-v3 i { color: #c48347; font-size: 1.1rem; }
.specs-list-v3 span { color: #888; }
.specs-list-v3 strong { color: #3d3d3d; }

/* ----- 4. MEDIA GALLERY ----- */
.product-media-gallery-v3 { margin-bottom: 5rem; }
.section-title-v3 { font-size: 1.5rem; color: #3d3d3d; margin-bottom: 1.5rem; text-align: center; }
.media-grid-v3 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.media-item-v3 { border-radius: 1rem; overflow: hidden; aspect-ratio: 1/1; transition: transform .3s; }
.media-item-v3:hover { transform: scale(1.05); }
.media-item-v3 img { width: 100%; height: 100%; object-fit: cover; }

/* ----- 5. COMMENTS SECTION ----- */
.comments-section-v3__header { text-align: center; margin-bottom: 2.5rem; position: relative; }
.comments-section-v3__header::after {
    content: ''; position: absolute; bottom: -1.25rem; right: 50%; transform: translateX(50%);
    width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent;
    border-top: 20px solid #c48347;
}
.section-subtitle-v3 { color: #aaa; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; }
.comments-wrapper-v3 { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; align-items: flex-start; }
.comment-form-container-v3 {
    background: #fff; border-radius: 1.5rem; padding: 2rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}
.comment-form-container-v3 h4 { font-size: 1.2rem; margin-bottom: 1.5rem; color: #3d3d3d; text-align: center; }
.comment-form-v3 { display: flex; flex-direction: column; gap: 1rem; }
.comment-form-v3 input, .comment-form-v3 textarea {
    width: 100%; padding: 1rem; border-radius: .75rem; border: 1px solid #eee;
    background: #f7f3ed; font-family: var(--body-font);
}
.btn-submit-comment-v3 {
    background-color: #c48347; color: #fff; border: none; padding: 1rem;
    border-radius: .75rem; font-weight: 700; cursor: pointer;
}
.comments-list-v3 { display: flex; flex-direction: column; gap: 1rem; }
.comment-item-v3 { background-color: #fff; padding: 1.5rem; border-radius: 1.25rem; box-shadow: 0 5px 25px rgba(0,0,0,0.05); }
.comment-item-v3__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.comment-author-v3 { display: flex; align-items: center; gap: 1rem; order: 2; text-align: right;}
.comment-author-v3 img { width: 48px; height: 48px; border-radius: 50%; }
.comment-author-v3__info h5 { font-size: 1rem; margin: 0 0 .25rem 0; }
.comment-author-v3__info span { font-size: .8rem; color: #888; }
.comment-meta-v3 { text-align: left; order: 1; }
.comment-date-v3 { font-size: .8rem; color: #aaa; }
.comment-reactions-v3 { font-size: 1rem; margin-top: .25rem; }
.comment-body-v3 { font-size: .9rem; line-height: 1.8; color: #555; }
.comment-reply-v3 {
    background-color: #f7f3ed; margin-top: 1rem; padding: 1rem;
    border-radius: 1rem; border-right: 3px solid #c48347;
}
.comment-reply-v3__label { font-size: .9rem; color: #c48347; font-weight: 700; display: block; margin-bottom: .5rem; }
.comment-reply-v3 .comment-body-v3 { margin-bottom: 0; }

/* ----- RESPONSIVE ----- */
@media screen and (max-width: 1024px) {
    .purchase-info-v3__container, .comments-wrapper-v3 { grid-template-columns: 1fr; }
    .purchase-info-v3__details-box { text-align: center; }
    .specs-list-v3 { grid-template-columns: repeat(2, 1fr); }
    .media-grid-v3 { grid-template-columns: repeat(3, 1fr); }
    .comment-form-container-v3 { order: -1; }
}

@media screen and (max-width: 768px) {
    .specs-list-v3 { grid-template-columns: 1fr; }
    .media-grid-v3 { grid-template-columns: repeat(2, 1fr); }
    .product-gallery-v3__main-container { 
        flex-direction: column; 
        gap: 1rem;
    }
    .product-gallery-v3__color-selector { 
        flex-direction: row; 
        order: 3; 
        justify-content: center;
        margin-top: 1rem;
    }
    .product-gallery-v3__image-wrapper { 
        order: 1; 
        width: 100%; 
        max-width: 100%;
        height: 300px;
        padding: 0.75rem;
        position: relative;
    }
    .product-gallery-v3__thumbnails {
        order: 2;
        flex-direction: row;
        gap: 0.5rem;
        max-width: 100%;
        justify-content: center;
        overflow-x: auto;
        padding: 0.5rem 0;
    }
    .product-gallery-v3__size-selector { display: none; }
    .main-product-image-v3 {
        max-height: 280px;
        width: 100%;
        object-fit: contain;
    }
    .thumb-item-v3 {
        width: 60px;
        height: 60px;
        padding: 0.3rem;
        flex-shrink: 0;
    }
    .gallery-nav-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    .gallery-nav-btn.prev {
        left: 5px;
    }
    .gallery-nav-btn.next {
        right: 5px;
    }
    .color-dot-v3 {
        width: 35px;
        height: 35px;
        border-width: 2px;
    }
}

@media screen and (max-width: 576px) {
    .price-section-v3 { flex-direction: column-reverse; gap: 1rem; }
    .action-buttons-v3 { grid-template-columns: 1fr; }
    .details-box-v3 { padding: 1.5rem; }
    .comments-wrapper-v3 { gap: 1.5rem; }
    .comment-item-v3__header { flex-direction: column; align-items: flex-end; gap: .5rem; }
    .comment-meta-v3 { align-self: flex-start; }
}

/* ============================================= */
/*      ADDITIONAL PRODUCT PAGE ENHANCEMENTS    */
/* ============================================= */

/* Loading States */
.btn-add-to-cart-v3:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-add-to-cart-v3 .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Hover Effects */
.thumb-item-v3:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.color-dot-v3:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.size-item-v3:hover {
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
}

/* Lightbox Animations */
.gallery-fullscreen-overlay,
.media-lightbox {
    animation: fadeIn 0.3s ease;
}

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

/* Product Badge Styles */
.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
}

.product-badge.sale {
    background: #e74c3c;
}

.product-badge.new {
    background: #27ae60;
}

/* Enhanced Rating Display */
.rating-stars-v3 {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.rating-stars-v3 .star {
    color: #ffd700;
    font-size: 1rem;
}

.rating-stars-v3 .star.empty {
    color: #ddd;
}

.rating-count {
    font-size: 0.9rem;
    color: #666;
    margin-right: 0.5rem;
}

/* Stock Status Indicators */
.stock-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.stock-status.in-stock {
    color: #27ae60;
}

.stock-status.out-of-stock {
    color: #e74c3c;
}

.stock-status.low-stock {
    color: #f39c12;
}

.stock-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

/* Enhanced Form Styling */
.variations_form select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    background-color: white;
    transition: border-color 0.2s ease;
}

.variations_form select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Quantity Input Enhancement */
.quantity input[type="number"] {
    width: 80px;
    padding: 0.5rem;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-radius: 0.5rem;
    font-size: 1rem;
}

/* Product Navigation */
.product-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid #e0e0e0;
}

.product-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.product-nav-link:hover {
    opacity: 0.8;
}

/* Related Products Section */
.related-products-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.related-products-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Related Products Grid - 4 items per row */
.related-products-grid-proper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.related-product-item {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Responsive design for related products */
@media screen and (max-width: 1200px) {
    .related-products-grid-proper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .related-products-grid-proper {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .related-products-grid-proper {
        grid-template-columns: 1fr;
    }
    .home .product-grid {
    padding: 5rem 0rem 0rem !important;
    gap: 1rem !important;}
}

/* Accessibility Improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles for Better Accessibility */
.thumb-item-v3:focus,
.color-dot-v3:focus,
.size-item-v3:focus,
.btn-add-to-cart-v3:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .product-gallery-v3__color-selector,
    .product-gallery-v3__size-selector,
    .action-buttons-v3,
    .comments-section-v3 {
        display: none;
    }
    
    .product-gallery-v3__image-wrapper {
        width: 100%;
    }
}

.tab-btn {
    font-family: var(--body-font) !important;
}
/* ============================================= */
/*          USER PANEL STYLES (FINAL)            */
/* ============================================= */

/* ----- 1. MAIN LAYOUT & SIDEBAR ----- */
.up-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: flex-start;
    padding:  5rem 0rem;
    max-width: 1440px;
    margin: 0 auto;
}
.up-sidebar {
    background-color: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 80vh; /* For consistent height */
}
.up-sidebar__user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
}
.user-avatar { position: relative; }
.user-avatar img { width: 56px; height: 56px; border-radius: 50%; }
.status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: #2ecc71;
    border-radius: 50%;
    border: 2px solid #fff;
}
.user-details h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.user-details span { font-size: .8rem; color: #888; }
.up-sidebar__nav ul { list-style: none; }
.up-sidebar__nav li a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    color: #555;
    font-weight: 500;
    border-radius: .5rem;
    position: relative;
    transition: background-color .3s, color .3s;
}
.up-sidebar__nav li a i { font-size: 1.2rem; width: 25px; text-align: center; }
.up-sidebar__nav li a:hover { background-color: #f7f3ed; color: #3d3d3d; }
.up-sidebar__nav li.active a { color: #c48347; font-weight: 700; }
.up-sidebar__nav li.active a::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 0;
    width: 8px;
    height: 100%;
    background-color: #f7a659;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.up-sidebar__logout {
    margin-top: auto; /* Pushes to the bottom */
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    color: #888;
    border-top: 1px solid #f0f0f0;
    font-weight: 500;
}
.up-sidebar__logout i { font-size: 1.2rem; }
.up-content {
    background-color: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    padding: 2.5rem;
}
.up-content__title { font-size: 1.5rem; margin-bottom: 2rem; }

/* ----- 2. WISHLIST PAGE ----- */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}
.product-card-up {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.product-card-up__image { position: relative; }
.product-card-up__image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.wishlist-btn {
    position: absolute; top: -3.3rem;
    right: 0rem;
    background: rgba(255,255,255,0.7); backdrop-filter: blur(5px);
    border: 1px solid #eee; width: 36px; height: 36px;
    border-radius: 50%; color: #888; cursor: pointer;
}
.wishlist-btn.active { color: #e74c3c; }
.product-card-up__content { padding: 1rem; flex-grow: 1; }
.product-card-up__title { font-size: .9rem; line-height: 1.6; height: 45px; overflow: hidden; }
.product-card-up__price { margin-top: 1rem; }
.product-card-up__price span { font-size: .8rem; color: #888; }
.product-card-up__price strong { font-size: 1.1rem; color: #3d3d3d; }
.product-card-up__price strong span { font-size: .8rem; }
.product-card-up__price del { font-size: .8rem; color: #aaa; margin-right: .5rem; }
.product-card-up__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 1rem 1rem;
}
.product-card-up__rating { display: flex; align-items: center; gap: .5rem; color: #888; }
.product-card-up__rating i { color: #f39c12; }
.btn-add-to-cart-up {
    background-color: #c48347; color: #fff; border: none;
    padding: .6rem 1rem; border-radius: .5rem;
    font-weight: 700; cursor: pointer; transition: background-color .3s;
}
.btn-add-to-cart-up:hover { background-color: #b07540; }

/* ----- 3. ORDERS LIST PAGE ----- */
.orders-list { display: flex; flex-direction: column; gap: 1.5rem; }
.order-item {
    border: 1px solid #f0f0f0;
    border-radius: 1rem;
    padding: 1.5rem;
}
.order-item__header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px dashed #ddd;
}
.order-item__info { display: flex; gap: 1.5rem; font-size: .9rem; color: #555; }
.order-item__view-invoice { color: #c48347; font-weight: 700; }
.order-item__products { display: flex; gap: 1rem; }
.product-thumb {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: .5rem;
    overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); color: #fff;
    padding: .5rem; font-size: .7rem; line-height: 1.4;
    opacity: 0; transition: opacity .3s;
}
.product-thumb:hover .thumb-overlay { opacity: 1; }
.thumb-overlay span { font-weight: 700; }
.last-thumb {
    background-color: #f7f3ed; color: #555;
    display: grid; place-items: center; font-weight: 700;
}

/* ----- 4. ORDER DETAIL PAGE ----- */
.up-content__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.up-content__header .up-content__title { margin-bottom: 0; }
.btn-back { color: #888; }
.order-detail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.detail-card {
    border: 1px solid #f0f0f0; border-radius: 1rem; padding: 1.5rem;
    display: flex; gap: 1rem;
}
.card-icon { font-size: 1.5rem; color: #c48347; margin-top: .25rem; }
.card-content { flex-grow: 1; }
.card-content h4 { font-size: 1rem; margin-bottom: .5rem; }
.card-content p { font-size: .9rem; color: #555; line-height: 1.6; }
.card-content span { font-size: .9rem; color: #555; margin-left: 1.5rem; }
.card-meta { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; white-space: nowrap; }
.card-meta.price-meta { justify-content: center; }
.order-timeline-wrapper, .order-products-wrapper {
    border: 1px solid #f0f0f0; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem;
}
.timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.timeline-header h3 { font-size: 1.1rem; }
.timeline-header a { font-size: .9rem; color: #e74c3c; }
.order-timeline { display: flex; justify-content: space-between; position: relative; }
.order-timeline::before {
    content: ''; position: absolute; top: 20px; right: 5%; width: 90%;
    height: 4px; background-color: #f0f0f0;
}
.timeline-step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; position: relative; z-index: 1; }
.timeline-icon {
    width: 40px; height: 40px; border-radius: 50%; background-color: #f0f0f0;
    display: grid; place-items: center; font-size: 1.2rem; color: #aaa;
    border: 4px solid #fff; margin-bottom: .75rem;
}
.timeline-step p { font-size: .9rem; font-weight: 500; }
.timeline-step span { font-size: .8rem; color: #888; }
.timeline-step.completed .timeline-icon { background-color: #2ecc71; color: #fff; }
.timeline-step.active .timeline-icon { background-color: #f39c12; color: #fff; }
.timeline-step.active span { color: #f39c12; font-weight: 700; }
.order-products-wrapper h3 { font-size: 1.1rem; margin-bottom: 1.5rem; }
.order-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.product-card-simple { text-align: center; }
.product-card-simple img { width: 100%; border-radius: .75rem; border: 1px solid #f0f0f0; margin-bottom: .75rem; }
.product-card-simple p { font-size: .85rem; line-height: 1.5; color: #555; }

/* ----- RESPONSIVE ----- */
@media screen and (max-width: 1200px) {
    .up-layout { grid-template-columns: 240px 1fr; padding: 1.5rem; }
    .order-item__info { flex-direction: column; gap: .5rem; align-items: flex-start; }
    .order-detail-cards { grid-template-columns: 1fr; }
    .order-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media screen and (max-width: 992px) {
    .up-layout { grid-template-columns: 1fr; }
    .up-sidebar { min-height: auto; }
}
@media screen and (max-width: 768px) {
    .up-content { padding: 1.5rem; }
    .order-item__header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .order-item__products { overflow-x: auto; padding-bottom: 1rem; }
    .order-timeline::before { display: none; }
    .order-timeline { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .timeline-step { flex-direction: row; text-align: right; width: 100%; gap: 1rem; }
    .timeline-step::before {
        content: ''; position: absolute; right: 20px; top: 40px;
        width: 4px; height: calc(100% - 20px); background-color: #f0f0f0;
    }
    .timeline-step:last-child::before { display: none; }
    .timeline-step.completed::before { background-color: #2ecc71; }
    .timeline-step p { margin-bottom: .25rem; }
    .up-content__header { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ============================================= */
/*       PRODUCT DETAIL PAGE - ENHANCED STYLES  */
/* ============================================= */

/* ----- MAIN LAYOUT ----- */
.product-detail-page-wrapper {
    padding-top: calc(var(--header-height) + 0rem) !important;
    padding-bottom: 3rem;
    background-color: #f7f3ed;
    min-height: 100vh;border-radius: 15px;
}

.product-main-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: flex-start;
    margin-bottom: 3rem;
}

/* ----- PRODUCT GALLERY ENHANCED ----- */
.product-gallery {
    position: relative;
}

.product-gallery__main-image {
    position: relative;
    background-color: #fff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.product-gallery__main-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.2/1;
    object-fit: contain;
    border-radius: 0.5rem;
}

.product-gallery__watermark {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 80px;
    opacity: 0.3;
}

.product-gallery__actions {
    position: absolute;
    top: 4.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-gallery__actions i {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.product-gallery__actions i:hover {
    background-color: #f7a659;
    color: #fff;
    transform: scale(1.1);
}

.product-gallery__thumbnails {
    display: flex;
    gap: 1rem;
}

.thumb-item {
    flex: 1;
    border: 2px solid #e0e0e0;
    border-radius: 0.75rem;
    padding: 0.2rem;
    cursor: pointer;
    transition: all 0.3s;
    background-color: #fff;
    max-width: 80px;
}

.thumb-item.active {
    border-color: #f7a659;
    box-shadow: 0 0 0 2px rgba(247, 166, 89, 0.2);
}

.thumb-item:hover {
    border-color: #f7a659;
}

.thumb-item img {
    width: 100%;
    height: 60px;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* ----- PRODUCT INFO ENHANCED ----- */
.product-info {
    padding: 0;
}

.product-info__title {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.4;
    color: #2c2c2c;
}

.product-info__meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed #d0d0d0;
}

.product-info__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f39c12;
    font-size: 0.9rem;
}

.product-info__rating i {
    font-size: 1rem;
}

.product-info__stock-status {
    background-color: #fff1e6;
    color: #d3965b;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.product-info__stock-status.out-of-stock {
    background-color: #ffe6e6;
    color: #e74c3c;
}

.product-info__options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.product-info__colors {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.product-info__colors h4 {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.color-dots {
    display: flex;
    gap: 0.75rem;
}

.color-dot-single {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    transition: all 0.3s;
    position: relative;
}

.color-dot-single.active {
    box-shadow: 0 0 0 2px #f7a659;
    transform: scale(1.1);
}

.color-dot-single:hover {
    transform: scale(1.05);
}

.product-info__sizes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.product-info__sizes h4 {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.size-options {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.size-item {
    border: 1px solid #ddd;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    font-size: 0.9rem;
    background-color: #fff;
}

.size-item.active {
    border-color: #f7a659;
    background-color: #fff5eb;
    color: #c78648;
}

.size-item:hover {
    border-color: #f7a659;
    background-color: #fff5eb;
}

.size-line {
    height: 25px;
    width: 1px;
    background-color: #d0d0d0;
}

/* ----- PURCHASE ACTIONS ENHANCED ----- */
.product-info__purchase-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.price-section {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.price-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-label {
    color: #888;
    font-size: 0.9rem;
}

.price-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: #2c2c2c;
}

.discount-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #e74c3c;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.discount-badge img {
    height: 30px;
    width: 30px;
}

.btn-add-to-cart-main {
    background-color: #f7a659;
    color: #2c2c2c;
    border: none;
    font-family: var(--body-font);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s;    margin: 5px;
}

.btn-add-to-cart-main:hover {
    background-color: #e0954e;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(247, 166, 89, 0.3);
}

.btn-installment {
    background-color: #0072ff;
    color: #fff;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.btn-installment:hover {
    background-color: #0056cc;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 114, 255, 0.3);
}

.btn-installment img {
    height: 30px;
    width: 30px;
}

/* ----- FEATURES BAR ENHANCED ----- */
.features-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 1.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.feature-bar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #555;
    padding: 1rem;
    border-left: 1px solid #f0f0f0;
    text-align: center;
}

.feature-bar-item:last-child {
    border-left: none;
}

.feature-bar-item i {
    font-size: 1.5rem;
    color: #f7a659;
}

.feature-bar-item span {
    font-size: 0.9rem;
    font-weight: 500;
}

/* ----- PRODUCT TABS ENHANCED ----- */
.product-tabs-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.content-box-wrapper {
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.content-box-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1rem;
}

.content-box-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c2c2c;
    position: relative;
    padding-right: 1.5rem;
}

.content-box-title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background-color: #f7a659;
    border-radius: 2px;
}

.content-box-content {
    line-height: 1.8;
    color: #555;
}

/* ----- LIFESTYLE GALLERY ENHANCED ----- */
.lifestyle-gallery-section {
    margin-top: 3rem;
}

.lifestyle-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.lifestyle-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 1rem;
    transition: transform 0.3s;
}

.lifestyle-gallery img:hover {
    transform: scale(1.05);
}

/* ----- COMMENTS SECTION ENHANCED ----- */
.comments-section {
    margin-top: 3rem;
}

.comments-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: flex-start;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.comment-item-new {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.comment-meta-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    color: #888;
    font-size: 0.85rem;
}

.comment-rating {
    display: flex;
    gap: 0.25rem;
    color: #f39c12;
}

.comment-item-new p {
    line-height: 1.8;
    font-size: 0.95rem;
    color: #555;
}

.comment-form-container {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.comment-form-triangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #fff;
    position: absolute;
    left: -20px;
    top: 50px;
}

.comment-form-container h4 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: #2c2c2c;
    font-weight: 700;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid #e0e0e0;
    background: #f9f9f9;
    font-family: var(--body-font);
    font-size: 0.9rem;
    transition: all 0.3s;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #f7a659;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(247, 166, 89, 0.1);
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.rating-input {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0;
}

.rating-stars {
    display: flex;
    gap: 0.25rem;
}

.rating-stars i {
    font-size: 1.2rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
}

.rating-stars i.active,
.rating-stars i:hover {
    color: #f39c12;
}

.comment-form button {
    align-self: flex-start;
    padding: 0.8rem 2rem;
    background-color: #f7a659;
    color: #2c2c2c;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.comment-form button:hover {
    background-color: #e0954e;
    transform: translateY(-2px);
}

/* ----- RESPONSIVE DESIGN ENHANCED ----- */
@media screen and (max-width: 992px) {
    .product-main-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .comments-wrapper {
        grid-template-columns: 1fr;
    }
    
    .comment-form-triangle {
        display: none;
    }
    
    .features-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lifestyle-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .product-info__options {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    
    .product-info__sizes {
        align-items: flex-start;
    }
    
    .features-bar {
       grid-template-columns: repeat(2, 1fr);
        margin: 0px;
        padding: 10px;
    }
    
    .feature-bar-item {
        border-left: none;
        justify-content: flex-start;
    }
    
    .specs-list {
        grid-template-columns: 1fr;
    }
    
    .lifestyle-gallery {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 576px) {
    .product-detail-page-wrapper {
        padding-top: calc(var(--header-height) + 1rem);
    }
    
    .product-info__title {
        font-size: 1.4rem;
    }
    
    .product-info__purchase-actions {
        grid-template-columns: 1fr;
    }
    
    .price-section {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .product-gallery__thumbnails {
        flex-wrap: wrap;
    }
    
    .thumb-item {
         flex: 0 0 calc(25% - 0.75rem);
     }
 }

/* ----- VALIDATION MESSAGES ----- */
.validation-message,
.success-message,
.error-message {
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.validation-message.show,
.success-message.show,
.error-message.show {
    opacity: 1;
    transform: translateY(0);
}

.validation-message.error,
.error-message {
    background-color: #ffe6e6;
    color: #e74c3c;
    border: 1px solid #f5b7b1;
}

.success-message.success {
    background-color: #e8f5e8;
    color: #27ae60;
    border: 1px solid #a9dfbf;
}

/* ----- DISABLED BUTTON STATES ----- */
.btn-add-to-cart-main.disabled,
.btn-installment.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn-add-to-cart-main.disabled:hover,
.btn-installment.disabled:hover {
    background-color: #f7a659 !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-installment.disabled:hover {
    background-color: #0072ff !important;
}

/* ----- IMAGE MODAL ----- */
.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.image-modal {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.image-modal img {
    width: 90%;
    height: auto;
    border-radius: 0.5rem;
        max-width: fit-content;
    margin: 0 auto;
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #f7a659;
}

/* ----- INSTALLMENT MODAL ----- */
.installment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.installment-modal {
    background: #fff;
    border-radius: 1.5rem;
    width: 90%;
    max-width: 500px;
    max-height: 90%;
    overflow-y: auto;
}

.installment-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.installment-modal .modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #2c2c2c;
}

.installment-modal .modal-close {
    position: static;
    color: #666;
    font-size: 1.5rem;
    width: 30px;
    height: 30px;
}

.installment-modal .modal-body {
    padding: 2rem;
}

.installment-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.installment-form input {
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    font-family: var(--body-font);
    font-size: 0.9rem;
    transition: all 0.3s;
}

.installment-form input:focus {
    outline: none;
    border-color: #f7a659;
    box-shadow: 0 0 0 3px rgba(247, 166, 89, 0.1);
}

.btn-submit-installment {
    background-color: #0072ff;
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-submit-installment:hover {
    background-color: #0056cc;
    transform: translateY(-2px);
}

/* ----- FAVORITE BUTTON STATE ----- */
.product-gallery__actions i.favorited {
    background-color: #e74c3c;
    color: #fff;
}

/* ----- RATING HOVER EFFECTS ----- */
.rating-stars i.hover {
    color: #f39c12;
}

/* ===== NOTIFICATION MESSAGES ===== */
.validation-message,
.success-message,
.error-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.validation-message.show,
.success-message.show,
.error-message.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.validation-message.error,
.error-message {
    background-color: #fee;
    color: #c53030;
    border: 1px solid #feb2b2;
}

.success-message {
    background-color: #f0fff4;
    color: #22543d;
    border: 1px solid #9ae6b4;
}

.validation-message i,
.success-message i,
.error-message i {
    margin-left: 8px;
}

/* ===== ENHANCED OUT OF STOCK STYLES ===== */
.btn--add-to-cart.btn--out-of-stock,
.btn-add-to-cart-main.btn--out-of-stock {
    background-color: #e2e8f0 !important;
    color: #718096 !important;
    cursor: not-allowed !important;
    border: 1px solid #cbd5e0 !important;
    opacity: 0.7 !important;
}

.btn--add-to-cart.btn--out-of-stock:hover,
.btn-add-to-cart-main.btn--out-of-stock:hover {
    background-color: #e2e8f0 !important;
    color: #718096 !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn--add-to-cart.disabled,
.btn-add-to-cart-main.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f7fafc !important;
    color: #a0aec0 !important;
}

.btn--add-to-cart.disabled:hover,
.btn-add-to-cart-main.disabled:hover {
    background-color: #f7fafc !important;
    color: #a0aec0 !important;
    transform: none !important;
}

/* ===== ENHANCED STOCK STATUS STYLES ===== */
.product-info__stock-status.out-of-stock {
    background-color: #fed7d7 !important;
    color: #c53030 !important;
    border: 1px solid #feb2b2;
}

.product-info__stock-status.low-stock {
    background-color: #fef5e7 !important;
    color: #d69e2e !important;
    border: 1px solid #f6e05e;
}

.product-info__stock-status.in-stock {
    background-color: #f0fff4 !important;
    color: #22543d !important;
    border: 1px solid #9ae6b4;
}
@media screen and (min-width: 768px) {
    .product-detail-page-wrapper {
        margin-top: calc(var(--header-height) + 2rem) !important;
    }
    .shop-products-section { margin-top: 3%; padding-top: 0%; }
}
/* ----- RESPONSIVE MODAL STYLES ----- */
@media screen and (max-width: 768px) {
    .installment-modal {
        width: 95%;
        margin: 1rem;
    }
    
    .installment-modal .modal-header,
    .installment-modal .modal-body {
        padding: 1.5rem;
    }
    
    .image-modal {
        max-width: 95%;
        max-height: 85%;
    }
    
    .modal-close {
        top: -50px;
        right: -10px;
    }
}

/* ===== FILTER STYLES FOR SELECTED OPTIONS ===== */
.filter-dropdown a.selected {
    background-color: #007cba;
    color: white;
    font-weight: bold;
}

.filter-option.has-selection .value {
    color: #007cba;
    font-weight: bold;
}

/* ===== APPLY FILTERS BUTTON STYLES ===== */
.apply-filters-btn {
    background-color: #007cba;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin: 10px 5px;
    transition: background-color 0.3s ease;
    display: none;
}

.apply-filters-btn:hover {
    background-color: #005a87;
}

.apply-filters-btn i {
    margin-left: 5px;
}

/* ===== ENHANCED FILTER DROPDOWN STYLES ===== */
.filter-option {
    position: relative;
    margin-bottom: 10px;
}

.filter-dropdown {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.filter-dropdown a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.filter-dropdown a:hover {
    background-color: #f5f5f5;
}

.filter-dropdown a:last-child {
    border-bottom: none;
}


@media screen and (min-width: 768px) {
.blog-search-form input {
    padding: 0;
    font-size: 16px;
}
.blog-search__submit-btn {
    padding: 0;
font-size: 18px;}
}
@media screen and (max-width: 768px) {
    .custom-logo-link img {
        max-width: 120px;
        max-height: 50px;
        right: 2%;
}
}

@media screen and (min-width: 1366px)  and (max-width: 1966px) {
	    .custom-logo-link img {
max-width: 180px;
max-height:55px;
        right: 2%;
		}
}
#suggestions-box {    display: none !important;visibility: hidden !important; margin: -25px !important;}
/* Mobile and Tablet Responsive Design for Countdown */
@media (max-width: 768px) {
    .days-date-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }
    /* Simple display for flip items without digits */
.flip-clock-container [class|="flip-item"]:not(:has(.flip-digit)) {
    font-size: 2.0rem;
    font-weight: bold;
    color: var(--flip-text-color);
    background: var(--flip-bg-color);
    padding: 0.2rem 0.2rem;
    border-radius: 8px;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin: 1px;
}
    .days-section,
    .date-section {
        /* justify-content: center;
        gap: 0.4rem;
        flex: 1;
        min-width: 100%;
        text-align: center; */
                justify-content: center;
        gap: 0.9rem;
        flex: none;
        min-width: 100%;
        text-align: center;
    }
    
    .date-section {
        order: 2;
    }
    
    .days-section {
        order: 1;
    }
    
    .countdown-label {
        font-size: 0.9rem;
        text-align: center;
        margin-bottom: 0.3rem;
            padding-left: 5px;
    }
    
    .flip-item-days-container {
        width: 45px;
        height: 55px;
    }
    
    .flip-item-da
/* ============================================= */
/*            Modal Redesign (Figma Match)       */
/* ============================================= */
/* Overlay glass blur is already present; reinforcing here in case of overrides */
.modal-overlay {
  background: rgba(0,0,0,var(--modal-overlay-opacity));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.digits-modal-container {
  width: 100%;
  max-width: 480px;
  padding: 24px;
  position: relative;
  color: var(--light-color);
  border-radius: 20px;
  /* Glassmorphism */
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px rgba(255,255,255,0.06);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.digits-modal-container .digits_ui,
.digits-modal-container .digits_embed-form,
.digits-modal-container .dig_lrf_box,
.digits-modal-container .dig_lrf_head,
.digits-modal-container .dig_lrf_body,
.digits-modal-container .dig_form,
.digits-modal-container .dig_lrf_modal,
.digits-modal-container .dig_lrf_modal_inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.digits-modal-container, .digits-modal-container * { font-family: var(--body-font) !important; }
.digits-modal-container input, .digits-modal-container select, .digits-modal-container textarea {
  color: var(--light-color) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 12px !important;
}
.digits-modal-container input::placeholder, .digits-modal-container textarea::placeholder { color: rgba(255,255,255,0.7) !important; }
.digits-modal-container input:focus, .digits-modal-container select:focus, .digits-modal-container textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 4px rgba(247, 166, 89, 0.25) !important;
  outline: none !important;
}

.digits-modal-container .digits_login_use_phone,
.digits-modal-container .digits_login_use_email,
.digits-modal-container .digits_phone_toggle,
.digits-modal-container .dig_lrf_ic_con,
.digits-modal-container .dig_wc_login_with_whatsapp,
.digits-modal-container .digits_login_use_whatsapp { display: none !important; }

.modal-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.modal-tabs__label {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
}
.modal-tabs__actions { display: flex; gap: 10px; }
.modal-tab-btn {
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: wheat;
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 1rem;
  min-width: 98px;
  transition: all .2s ease;
}
.modal-tab-btn:hover { background: rgba(255,255,255,0.1); }
.modal-tab-btn.active {
  background: var(--primary-color);
  color: #000;
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(247,166,89,0.35);color: wheat;
}
.dig_login_signup_bar a {
    color: wheat;
}
/* Only show the active tab content; hide others */
.modal-content { position: relative; }
.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--light-color);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all .2s ease;
}
.modal-close:hover { background: rgba(255,255,255,0.14); }

/* Digits headings hidden to align with custom header/tab */
.dig_form h3, .dig_form h4, .dig_form .dig_title, .dig_form .dig_head { display: none; }
/* Extra guard inside our modal to ensure no duplicate titles */
.digits-modal-container h3, .digits-modal-container .dig_title, .digits-modal-container .dig_head { display: none !important; }

/* Inputs */
.dig_input, .dig_input input, .dig_input select, .dig_input textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--light-color);
  border-radius: 12px;
  outline: none;
  font-family: var(--body-font);
  transition: all .2s ease;
}
.dig_input input::placeholder { color: rgba(255,255,255,0.6); }
.dig_input input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(247, 166, 89, 0.25);
}

.dig_submit_btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 16px;
  color: var(--dark-color);
  font-weight: 700;
  font-family: var(--body-font);
  cursor: pointer;
  background: linear-gradient(90deg, var(--primary-color), #ffc78f);
  box-shadow: 0 12px 26px rgba(247, 166, 89, 0.38);
  transition: transform .08s ease-in-out, box-shadow .2s ease;
}
.dig_submit_btn:hover { box-shadow: 0 16px 32px rgba(247, 166, 89, 0.48); }
.dig_submit_btn:active { transform: translateY(1px); }

.otp_inputs input {
  width: 48px;
  height: 48px;
  text-align: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--light-color);
  border-radius: 12px;
  font-size: 1.1rem;
}
.otp_inputs input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(247, 166, 89, 0.25);
}
.digits-form_border.digits-row_active, .digits-form_input input:focus, .digits-form_input textarea:focus {
    border-color: transparent !important;
}
.dig_opt_mult label .dig_input_wrapper div, html[dir=rtl] .dig_login_rembe {
    color: wheat;
}
@media (max-width: 480px) {
  .digits-modal-container {
    max-width: 92vw;
    padding: 18px;
    border-radius: 18px;
    max-height: 88vh;
  }
  .modal-tabs { gap: 8px; }
  .modal-tabs__label { font-size: .9rem;            visibility: hidden; }
  .modal-tab-btn { padding: 6px 10px; font-size: .86rem; }
}
/* === Try-on Modal Integration (VirtualTry-on.html) === */
.tryon-iframe { width: 100%; flex: 1 1 auto; height: auto; min-height: 0; border: 0; background: transparent; }
.tryon-modal-container { max-width: 1200px; }
/* Reduce body padding inside try-on modal to let iframe use space */
.tryon-modal-container .modal-body { padding: 0; }
.tryon-modal-container .modal-header { margin-bottom: 8px; }
.tryon-modal-container .modal-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0; /* allow child to shrink if needed */
}
.tryon-modal-container .modal-body > .tryon-iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}
@media (max-width: 991px){
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals{float:none !important;width:100% !important;}
  .woocommerce .cart-collaterals,
  .woocommerce-page .cart-collaterals{display:block !important;margin-top:16px !important;}
}

@media (max-width: 576px){
  .woocommerce .cart-collaterals .cart_totals .shop_table,
  .woocommerce-page .cart-collaterals .cart_totals .shop_table{width:100% !important;}
  .woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button,
  .woocommerce-page .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button{width:100% !important;display:block !important;}
}

/* ============================================= */
/*    HERO SLIDER MOBILE & TABLET RESPONSIVE     */
/* ============================================= */

/* Tablet Responsive (768px - 1024px) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    /* Adjust hero slider height for tablets */
    .hero-slider {
        height: 70vh !important;
    }
    
    .hero-slider .swiper-slide {
        height: 70vh !important;
    }
    
    /* Optimized model image size for tablets */
    .hero__model-img {
        height: 85% !important;
        max-height: 500px !important;
        animation: floatModelTablet 8s ease-in-out infinite !important;
        transform: scale(1) !important;
        bottom: 2% !important;
    }
    
    @keyframes floatModelTablet {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-10px) scale(1); }
    }
    
    /* Adjust text size for tablets */
    .hero__title {
        font-size: clamp(2rem, 5vw, 3rem) !important;
    }
    
    .hero__description {
        font-size: 1rem !important;
        max-width: 400px !important;
    }
    
    /* Optimized animation timing for tablets */
    .hero__bg-layer {
        transform: scale(1.05) !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .swiper-slide-active .hero__bg-layer {
        transform: scale(1) !important;
    }
    
    /* Adjust navigation buttons for tablets */
    .hero-next,
    .hero-prev {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.1rem !important;
    }
    
    /* Adjust pagination for tablets */
    .hero-slider .swiper-pagination {
        bottom: 20px !important;
    }
    
    /* Tablet-optimized slide transitions */
    .hero-slider .swiper-slide-next .hero__bg-layer,
    .hero-slider .swiper-slide-prev .hero__bg-layer {
        transform: scale(1.08) !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .hero-slider .swiper-slide-next .hero__model-img {
        transform: translateX(-60px) scale(1) !important;
        opacity: 0.4 !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .hero-slider .swiper-slide-prev .hero__model-img {
        transform: translateX(60px) scale(1) !important;
        opacity: 0.4 !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .hero-slider .swiper-slide-next .hero__text,
    .hero-slider .swiper-slide-prev .hero__text {
        transform: translateY(25px) !important;
        opacity: 0.6 !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* RTL support for tablet slide transitions */
    html[dir="rtl"] .hero-slider .swiper-slide-next .hero__model-img {
        transform: translateX(60px) scale(1) !important;
    }
    
    html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__model-img {
        transform: translateX(-60px) scale(1) !important;
    }
    
    .hero-slider .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
    }
    
    .hero-slider .swiper-pagination-bullet-active {
        width: 25px !important;
    }
    
    /* RTL Support for tablet slide transitions */
    html[dir="rtl"] .hero-slider .swiper-slide-next .hero__bg-layer {
        transform: translateX(-100%) scale(1.05) !important;
    }
    
    html[dir="rtl"] .hero-slider .swiper-slide-next .hero__model-img {
        transform: translateX(-100px) scale(0.9) !important;
        opacity: 0.5 !important;
    }
    
    html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__bg-layer {
        transform: translateX(100%) scale(1.05) !important;
    }
    
    html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__model-img {
        transform: translateX(100px) scale(0.9) !important;
        opacity: 0.5 !important;
    }
}

/* Mobile Responsive (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Reduce hero slider height for mobile */
    .hero-slider {
        height: 60vh !important;
    }
    
    .hero-slider .swiper-slide {
        height: 60vh !important;
    }
    
    /* Optimized model image size for mobile */
    .hero__model-img {
        height: 80% !important;
        max-height: 400px !important;
        animation: floatModelMobile 8s ease-in-out infinite !important;
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)) !important;
        transform: scale(1) !important;
        bottom: 5% !important;
    }
    
    @keyframes floatModelMobile {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-8px) scale(1); }
    }
    
    /* Adjust text for mobile */
    .hero__title {
        font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5) !important;
    }
    
    .hero__description {
        font-size: 0.9rem !important;
        max-width: 300px !important;
        margin: 0.5rem auto 0 !important;
    }
    
    /* Sync animation timing for mobile */
    .hero__text {
        transform: translateY(30px) !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important;
    }
    
    .swiper-slide-active .hero__text {
        transform: translateY(0) !important;
    }
    
    .hero__bg-layer {
        transform: scale(1.02) !important;
        filter: brightness(0.8) contrast(1.05) saturate(1.1) !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .swiper-slide-active .hero__bg-layer {
        transform: scale(1) !important;
        filter: brightness(1) contrast(1) saturate(1) !important;
    }
    
    /* Disable complex overlay effects on mobile */
    .hero__bg-layer::after {
        animation: none !important;
        opacity: 0 !important;
    }
    
    /* Mobile-optimized slide transitions */
    .hero-slider .swiper-slide-next .hero__bg-layer,
    .hero-slider .swiper-slide-prev .hero__bg-layer {
        transform: scale(1.05) !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .hero-slider .swiper-slide-next .hero__model-img {
        transform: translateX(-50px) scale(1) !important;
        opacity: 0.3 !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .hero-slider .swiper-slide-prev .hero__model-img {
        transform: translateX(50px) scale(1) !important;
        opacity: 0.3 !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .hero-slider .swiper-slide-next .hero__text,
    .hero-slider .swiper-slide-prev .hero__text {
        transform: translateY(20px) !important;
        opacity: 0.5 !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* RTL support for mobile slide transitions */
    html[dir="rtl"] .hero-slider .swiper-slide-next .hero__model-img {
        transform: translateX(50px) scale(1) !important;
    }
    
    html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__model-img {
        transform: translateX(-50px) scale(1) !important;
    }
    
    /* Adjust navigation buttons for mobile */
    .hero-next,
    .hero-prev {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Adjust pagination for mobile */
    .hero-slider .swiper-pagination {
        bottom: 15px !important;
    }
    
    .hero-slider .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }
    
    .hero-slider .swiper-pagination-bullet-active {
        width: 20px !important;
    }
    
    /* Reduce slide transition effects on mobile */
    .hero-slider .swiper-slide-next .hero__bg-layer,
    .hero-slider .swiper-slide-prev .hero__bg-layer {
        transform: scale(1.05) !important;
    }
    
    .hero-slider .swiper-slide-next .hero__model-img,
    .hero-slider .swiper-slide-prev .hero__model-img {
        transform: scale(0.95) !important;
        opacity: 0.7 !important;
    }
    
    /* RTL Support for mobile slide transitions */
    html[dir="rtl"] .hero-slider .swiper-slide-next .hero__bg-layer {
        transform: translateX(-100%) scale(1.05) !important;
    }
    
    html[dir="rtl"] .hero-slider .swiper-slide-next .hero__model-img {
        transform: translateX(-100px) scale(0.9) !important;
        opacity: 0.5 !important;
    }
    
    html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__bg-layer {
        transform: translateX(100%) scale(1.05) !important;
    }
    
    html[dir="rtl"] .hero-slider .swiper-slide-prev .hero__model-img {
        transform: translateX(100px) scale(0.9) !important;
        opacity: 0.5 !important;
    }
    
    .hero-slider .swiper-slide-next .hero__text,
    .hero-slider .swiper-slide-prev .hero__text {
        transform: translateY(15px) !important;
        opacity: 0.5 !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media screen and (max-width: 480px) {
    /* Further reduce size for small mobile */
    .hero-slider {
        height: 50vh !important;
    }
    
    .hero-slider .swiper-slide {
        height: 50vh !important;
    }
    
    .hero__model-img {
        height: 50% !important;
        animation: floatModelSmallMobile 12s ease-in-out infinite !important;
    }
    
    @keyframes floatModelSmallMobile {
        0%, 100% { transform: translateY(0) scale(0.7); }
        50% { transform: translateY(-5px) scale(0.7); }
    }
    
    .hero__title {
        font-size: clamp(1.2rem, 3.5vw, 1.8rem) !important;
    }
    
    .hero__description {
        font-size: 0.8rem !important;
        max-width: 250px !important;
    }
    
    /* Minimal animation for small mobile */
    .hero__text {
        transform: translateY(20px) !important;
    }
    
    .hero__bg-layer {
        transform: scale(1.01) !important;
    }
}