/* ============================================
   SOFIA MASTERY - MODERN CLEAN THEME
   Complete Website Redesign
   ============================================ */

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

/* ===== CSS VARIABLES ===== */
:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-black: #111827;
    --color-gray-900: #1f2937;
    --color-gray-700: #374151;
    --color-gray-600: #4b5563;
    --color-gray-500: #6b7280;
    --color-gray-400: #9ca3af;
    --color-gray-300: #d1d5db;
    --color-gray-200: #e5e7eb;
    --color-gray-100: #f3f4f6;
    --color-gray-50: #f9fafb;
    --color-white: #ffffff;
    --color-red: #dc2626;
    --color-green: #16a34a;
    --color-orange: #ea580c;
    
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    --max-width: 1400px;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--color-gray-900) !important;
    background: var(--color-gray-50) !important;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    color: var(--color-black) !important;
    line-height: 1.3 !important;
}

h1 { font-size: 2rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.25rem !important; }
h4 { font-size: 1.125rem !important; }

p {
    color: var(--color-gray-600) !important;
    line-height: 1.6 !important;
}

a {
    color: var(--color-gray-900) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

a:hover {
    color: var(--color-primary) !important;
}

/* ===== HEADER ===== */
.top, header, .navbar {
    background: var(--color-white) !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 12px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.top .navbar,
.navbar {
    max-width: var(--max-width) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.navbar a,
.top a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-gray-700) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius) !important;
    transition: all 0.15s ease !important;
}

.navbar a:hover,
.top a:hover {
    background: var(--color-gray-100) !important;
    color: var(--color-black) !important;
}

/* Logo */
.logo img {
    height: 40px !important;
    width: auto !important;
}

/* ===== SEARCH BAR ===== */
.searcharea,
.search,
.search_block .searcharea {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.searcharea form,
.search form {
    display: flex !important;
    align-items: center !important;
    background: var(--color-white) !important;
    border: 2px solid var(--color-gray-300) !important;
    border-radius: var(--radius-full) !important;
    padding: 4px 4px 4px 20px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.searcharea form:focus-within,
.search form:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.searcharea input[type="text"],
.search input[type="text"],
#search {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    background: transparent !important;
    color: var(--color-black) !important;
}

.searcharea input[type="text"]::placeholder,
#search::placeholder {
    color: var(--color-gray-400) !important;
}

#bsear,
.searcharea input[type="submit"] {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

#bsear:hover {
    background: var(--color-primary-dark) !important;
}

#iconsearch {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.5 !important;
}

/* ===== MAIN HERO SECTION ===== */
.main {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    padding: 60px 24px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.main #backmain {
    display: none !important;
}

.main .over-text {
    position: relative !important;
    z-index: 2 !important;
    max-width: 800px !important;
    margin: 0 auto 32px auto !important;
}

.main .bigtext img {
    max-width: 400px !important;
    height: auto !important;
}

.main .desc-text p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    max-width: 600px !important;
    margin: 16px auto 0 auto !important;
}

.main .search_block {
    position: relative !important;
    z-index: 2 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

.main .searcharea form {
    background: var(--color-white) !important;
    box-shadow: var(--shadow-lg) !important;
}

.undersearch {
    display: none !important;
}

/* ===== CONTAINER ===== */
.all-container,
.big-center {
    max-width: var(--max-width) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

.between {
    height: 24px !important;
}

.bigbetween {
    height: 48px !important;
}

/* ===== SECTION HEADERS ===== */
.section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid var(--color-gray-200) !important;
}

.section-header h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--color-black) !important;
}

.section-header a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
}

/* ===== PRODUCT GRID ===== */
.parent,
.parent_items,
.products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

@media (max-width: 1200px) {
    .parent,
    .parent_items,
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .parent,
    .parent_items,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .parent,
    .parent_items,
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ===== PRODUCT CARD ===== */
.item_part,
.item_li,
.product-card {
    background: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    float: none !important;
    margin: 0 !important;
}

.item_part:hover,
.item_li:hover,
.product-card:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-4px) !important;
}

/* Product Image */
.item_part > a,
.item_part > a.dark,
.item_li > a,
.product-card > a {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
}

.item_part > a img,
.item_part > a.dark img,
.item_li img.uimg,
.product-card .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.item_part:hover img:not(.printicon):not([src*="rating"]):not([src*="heart"]),
.item_li:hover img.uimg {
    transform: scale(1.05) !important;
}

/* Product Info */
.item_part #name,
.item_li #name,
.product-card .product-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-gray-900) !important;
    padding: 12px 16px 8px 16px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Rating */
.item_part .rating,
.item_li .rating {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 16px 8px 16px !important;
    flex-wrap: wrap !important;
}

.item_part .over-star img,
.item_li .over-star img {
    height: 14px !important;
    width: auto !important;
}

.item_part .rat_value p,
.item_li .rat_value p {
    font-size: 12px !important;
    color: var(--color-gray-500) !important;
    margin: 0 !important;
}

/* Price */
.item_part .price,
.item_li .price,
.product-card .price {
    padding: 8px 16px 16px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: auto !important;
}

.item_part .price #cost,
.item_li .price #cost,
.product-card .price .current-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-black) !important;
}

.item_part .price #after,
.item_li .price #after,
.product-card .price .old-price {
    font-size: 14px !important;
    color: var(--color-gray-400) !important;
    text-decoration: line-through !important;
}

/* Add to Cart Button */
.item_part .addcart,
.item_li .addcart {
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transform: translateY(100%) !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.item_part:hover .addcart,
.item_li:hover .addcart {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.item_part .addcart:hover,
.item_li .addcart:hover {
    background: var(--color-primary-dark) !important;
}

.item_part .remove_cart,
.item_li .remove_cart {
    display: none !important;
}

/* Heart/Wishlist */
.item_part .heart,
.item_li .heart {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
}

.item_part .heart img,
.item_li .heart img {
    width: 24px !important;
    height: 24px !important;
    background: var(--color-white) !important;
    border-radius: 50% !important;
    padding: 4px !important;
    box-shadow: var(--shadow) !important;
}

/* Print Icon - Hide */
.printicon {
    display: none !important;
}

/* Section Title Card - Show them properly */
.item_part.a,
.item_part.g,
.item_part.f,
.item_part.c {
    display: flex !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 200px !important;
}

.item_part.a img#sectionimg,
.item_part.g img#sectionimg,
.item_part.f img#sectionimg,
.item_part.c img#sectionimg {
    width: 80% !important;
    height: auto !important;
    object-fit: contain !important;
    position: static !important;
}

/* ===== PAGINATION ===== */
.pagination,
nav[aria-label="Pagination"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 40px 0 !important;
    flex-wrap: wrap !important;
}

.pagination a,
.pagination span,
.page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: var(--radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-gray-700) !important;
    transition: all 0.15s ease !important;
}

.pagination a:hover,
.page-link:hover {
    background: var(--color-gray-100) !important;
    border-color: var(--color-gray-400) !important;
}

.pagination .active span,
.pagination a.active,
.page-item.active .page-link {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* ===== BUTTONS ===== */
button,
.btn,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: var(--radius) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.btn-primary,
button.btn-primary {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.btn-primary:hover {
    background: var(--color-primary-dark) !important;
}

.btn-secondary {
    background: var(--color-white) !important;
    color: var(--color-gray-700) !important;
    border: 1px solid var(--color-gray-300) !important;
}

.btn-secondary:hover {
    background: var(--color-gray-100) !important;
}

/* ===== FORMS ===== */
input,
textarea,
select {
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: var(--radius) !important;
    background: var(--color-white) !important;
    color: var(--color-black) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    width: 100% !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-gray-700) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* ===== CARDS ===== */
.card {
    background: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
}

.card-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
    background: var(--color-gray-50) !important;
}

.card-body {
    padding: 20px !important;
}

/* ===== OFFER BANNER ===== */
.offer {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: var(--radius-xl) !important;
    padding: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin: 32px 0 !important;
}

.offer .text h1 {
    color: var(--color-white) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    max-width: 500px !important;
}

.offer .click {
    background: var(--color-white) !important;
    color: var(--color-primary) !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    transition: transform 0.15s ease !important;
}

.offer .click:hover {
    transform: scale(1.05) !important;
}

@media (max-width: 768px) {
    .offer {
        flex-direction: column !important;
        text-align: center !important;
        padding: 32px 24px !important;
    }
}

/* ===== SECTIONS GRID ===== */
.oursections {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin: 32px 0 !important;
}

.oursections .section {
    background: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    transition: transform 0.2s ease !important;
}

.oursections .section:hover {
    transform: translateY(-4px) !important;
}

.oursections .section img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

@media (max-width: 900px) {
    .oursections {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    .oursections {
        grid-template-columns: 1fr !important;
    }
}

/* ===== BANNER ===== */
.banner {
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
    margin: 32px 0 !important;
}

.banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ===== TOP VIEWED ===== */
.top4 {
    margin: 48px 0 !important;
}

.top4 .head h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
}

.top4 .bigbox {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.top4 .bigbox img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: var(--radius-lg) !important;
    transition: transform 0.2s ease !important;
}

.top4 .bigbox img:hover {
    transform: scale(1.02) !important;
}

.top4 .halfbox {
    display: contents !important;
}

@media (max-width: 900px) {
    .top4 .bigbox {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== PRICING ===== */
.pricing {
    background: var(--color-gray-100) !important;
    padding: 60px 24px !important;
    margin: 48px -24px !important;
    border-radius: 0 !important;
}

.pricing .head h1 {
    text-align: center !important;
    font-size: 2rem !important;
    margin-bottom: 16px !important;
}

.pricing .note p {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    color: var(--color-gray-600) !important;
}

.pricecenter {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
    margin-top: 40px !important;
}

.priceplane {
    background: var(--color-white) !important;
    border-radius: var(--radius-xl) !important;
    padding: 32px !important;
    width: 300px !important;
    box-shadow: var(--shadow-lg) !important;
    position: relative !important;
    transition: transform 0.2s ease !important;
}

.priceplane:hover {
    transform: translateY(-8px) !important;
}

.priceplane .saved {
    position: absolute !important;
    top: -12px !important;
    right: 20px !important;
    background: var(--color-orange) !important;
    color: var(--color-white) !important;
    padding: 6px 16px !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.priceplane .pricehead h1 {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
}

.priceplane .pricehead h1 span {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--color-gray-500) !important;
}

.priceplane .line {
    height: 2px !important;
    background: var(--color-gray-200) !important;
    margin: 16px 0 !important;
}

.priceplane .tplane b {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    color: var(--color-gray-700) !important;
}

.priceplane .tplane p {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

.priceplane .tplane p img {
    width: 16px !important;
    height: 16px !important;
}

.priceplane .btnplane,
.priceplane .btnplane_basic {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-top: 24px !important;
    transition: background 0.15s ease !important;
}

.priceplane .btnplane:hover,
.priceplane .btnplane_basic:hover {
    background: var(--color-primary-dark) !important;
}

.priceplane.basic {
    border: 2px solid var(--color-primary) !important;
}

/* ===== PARTNERS ===== */
.partners {
    text-align: center !important;
    padding: 48px 0 !important;
}

.partners .head h1 {
    font-size: 1.25rem !important;
    margin-bottom: 32px !important;
}

.partners .head h1 span {
    color: var(--color-primary) !important;
}

.partners img {
    height: 40px !important;
    width: auto !important;
    margin: 0 24px !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

.partners img:hover {
    opacity: 1 !important;
}

/* ===== REVIEWS ===== */
.review {
    padding: 48px 0 !important;
}

.review .head {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.review .head img {
    max-width: 300px !important;
    margin-bottom: 16px !important;
}

.review .head p {
    color: var(--color-gray-600) !important;
}

.review .view_part {
    background: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    box-shadow: var(--shadow) !important;
    margin-bottom: 24px !important;
    max-width: 400px !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin-right: 24px !important;
}

.review .review_star img {
    width: 16px !important;
    height: 16px !important;
}

.review .view_part p {
    margin: 16px 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.review .clientinfo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--color-gray-200) !important;
}

.review .clientinfo .pic img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

.review .cliinfo b {
    display: block !important;
    font-size: 14px !important;
}

.review .cliinfo #date {
    font-size: 12px !important;
    color: var(--color-gray-500) !important;
    font-weight: 400 !important;
}

/* ===== FOOTER ===== */
footer,
.footer {
    background: var(--color-gray-900) !important;
    color: var(--color-white) !important;
    padding: 48px 24px 24px 24px !important;
    margin-top: 48px !important;
}

footer a {
    color: var(--color-gray-400) !important;
}

footer a:hover {
    color: var(--color-white) !important;
}

/* ===== HIDE UNWANTED ELEMENTS ===== */
.ads,
.popup_print,
.parent_print,
.openchat,
.history_chat,
.mail_send,
.alert-msg-good,
.offer,
.offer * {
    display: none !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .main {
        padding: 40px 16px !important;
    }
    
    .main .desc-text p {
        font-size: 14px !important;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    
    .all-container,
    .big-center {
        padding: 0 16px !important;
    }
}

/* ===== FILTER SIDEBAR ===== */
.leftfilter {
    background: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    box-shadow: var(--shadow) !important;
}

.leftfilter .search {
    margin-bottom: 20px !important;
}

.leftfilter .parentfilter {
    margin-bottom: 20px !important;
}

.leftfilter .filterhead {
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
    color: var(--color-gray-700) !important;
}

.leftfilter .filter_link a {
    display: block !important;
    padding: 8px 12px !important;
    border-radius: var(--radius) !important;
    font-size: 14px !important;
    color: var(--color-gray-600) !important;
    transition: all 0.15s ease !important;
}

.leftfilter .filter_link a:hover {
    background: var(--color-gray-100) !important;
    color: var(--color-black) !important;
}

.leftfilter .cats h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    color: var(--color-gray-700) !important;
}

.leftfilter .cats a {
    display: block !important;
    padding: 8px 12px !important;
    border-radius: var(--radius) !important;
    font-size: 14px !important;
    color: var(--color-gray-600) !important;
}

.leftfilter .cats a:hover {
    background: var(--color-gray-100) !important;
}

/* ===== SEARCH PAGE LAYOUT ===== */
.all {
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    gap: 32px !important;
    max-width: var(--max-width) !important;
    margin: 32px auto !important;
    padding: 0 24px !important;
}

@media (max-width: 900px) {
    .all {
        grid-template-columns: 1fr !important;
    }
    
    .leftfilter {
        display: none !important;
    }
}

/* ===== PATH/BREADCRUMB ===== */
.path_product {
    padding: 16px 24px !important;
    background: var(--color-white) !important;
    margin-bottom: 24px !important;
}

.path_product .infopath p {
    font-size: 13px !important;
    color: var(--color-gray-600) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.path_product .infopath img {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.5 !important;
}

/* ===== DETAIL INFO ===== */
.detail_info {
    display: none !important;
}

/* ===== FILTER TAGS ===== */
.filtercontent {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
    padding: 0 24px !important;
}

.filtercontent .u {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--color-gray-100) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-full) !important;
    font-size: 13px !important;
}

.filtercontent .u a {
    color: var(--color-gray-700) !important;
}

.filtercontent .clo {
    cursor: pointer !important;
}

.filtercontent .clo img {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.5 !important;
}

/* ============================================
   HOMEPAGE SPECIFIC OVERRIDES
   Override old index.css styles
   ============================================ */

/* Force parent grid to work properly */
.all-container .parent,
.big-center .parent {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 !important;
}

@media (max-width: 1100px) {
    .all-container .parent,
    .big-center .parent {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 800px) {
    .all-container .parent,
    .big-center .parent {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    .all-container .parent,
    .big-center .parent {
        grid-template-columns: 1fr !important;
    }
}

/* Product card in homepage */
.parent .item_part {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Product image container */
.parent .item_part > a.dark {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
}

/* Product image */
.parent .item_part > a.dark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Product name */
.parent .item_part p#name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    padding: 12px 16px 8px 16px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Rating section */
.parent .item_part .rating {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 16px 8px 16px !important;
    flex-wrap: wrap !important;
}

.parent .item_part .rating .over-star img {
    height: 14px !important;
    width: auto !important;
}

.parent .item_part .rating .rat_value p {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    display: inline !important;
}

/* Price section */
.parent .item_part .price {
    padding: 8px 16px 16px 16px !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.parent .item_part .price b#cost {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.parent .item_part .price b#after {
    font-size: 14px !important;
    color: #9ca3af !important;
}

/* Add to cart button */
.parent .item_part .addcart {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    z-index: 10 !important;
}

.parent .item_part:hover .addcart {
    opacity: 1 !important;
}

.parent .item_part .remove_cart {
    display: none !important;
}

/* Heart/wishlist */
.parent .item_part .heart {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 5 !important;
}

.parent .item_part .heart .save img {
    width: 28px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    padding: 5px !important;
}

/* Hide print icon */
.parent .item_part .printicon {
    display: none !important;
}

/* Section header cards (AI, Graphics, Fonts, Crafts) */
.parent .item_part.a,
.parent .item_part.g,
.parent .item_part.f,
.parent .item_part.c {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    padding: 20px !important;
}

.parent .item_part.a img#sectionimg,
.parent .item_part.g img#sectionimg,
.parent .item_part.f img#sectionimg,
.parent .item_part.c img#sectionimg {
    width: 90% !important;
    height: auto !important;
    max-height: 80% !important;
    object-fit: contain !important;
    position: static !important;
}

/* Our sections grid (category icons) - FORCE PROPER SIZE */
.oursections {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin: 32px 0 !important;
    width: 100% !important;
}

.oursections .section {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    width: 100% !important;
    min-height: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    float: none !important;
}

.oursections .section img {
    width: 100% !important;
    height: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
}

@media (max-width: 900px) {
    .oursections {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    .oursections {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   HEADER - FORCE NAVIGATION VISIBLE
   ============================================ */

/* Header container */
.top {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 12px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Logo in header */
.top > a:first-child {
    display: block !important;
    flex-shrink: 0 !important;
}

.top > a:first-child img,
.top #logoimg {
    height: 40px !important;
    width: auto !important;
}

/* Navbar - navigation links container */
.top .navbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Navigation links */
.top .navbar a {
    display: inline-block !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.top .navbar a:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* Sign Up button */
.top .navbar #signup_shape {
    background: #2563eb !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
}

.top .navbar #signup_shape:hover {
    background: #1d4ed8 !important;
}

/* Login button */
.top .navbar #loginas {
    background: #ffffff !important;
    color: #111827 !important;
    border: 2px solid #d1d5db !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
}

.top .navbar #loginas:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* My Account link */
.top .navbar #myaccount {
    background: #2563eb !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
}

/* Language icon */
.top .navbar #language {
    width: 24px !important;
    height: 24px !important;
}

/* Cart */
.top .navbar .cartfix {
    display: inline-flex !important;
    align-items: center !important;
}

/* Mobile menu buttons - hide on desktop */
.menus,
.close_menus,
.bar {
    display: none !important;
}

@media (max-width: 900px) {
    .top {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    .top .navbar {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .top .navbar a {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}