/* assets/css/marketplace.css - FULL UPDATED VERSION (Reduced Gaps, 3 Banners, No Banner Section Border) */

/* --- Header Marketplace --- (No changes needed from your provided version) */
.header-marketplace {
    background-color: #ffffff; 
    color: var(--header-marketplace-text-color);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    /* KEY CHANGE: The border is moved to the inner container below */
    /* border-bottom: var(--header-marketplace-border); */ 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* KEY CHANGE: Added padding for vertical space and a border for separation */
.header-marketplace .container-marketplace { 
    display: flex; 
    align-items: center; 
    gap: 1.5rem; 
    padding-top: 1rem;      /* Adds space above the content */
    padding-bottom: 1rem;   /* Adds space below the content */
    border-bottom: 1px solid #e9ecef; /* The clean separator line */
}

/* assets/css/marketplace.css - CORRECTED LOGO STYLE (NO CHANGE NEEDED) */
.header-marketplace-logo img {
    max-height: 40px;
    width: auto;
    height: auto;
    max-width: 150px;
    filter: none;
}
.header-marketplace-logo a:hover img { opacity: 0.85; }

/* SEARCH BAR & ACTIONS STYLES (NO CHANGE NEEDED - YOURS ARE GOOD!) */
.header-marketplace-search { flex-grow: 1; display: flex; background-color: #f0f2f5; border-radius: var(--border-radius-lg); overflow: hidden; border: 1px solid var(--border-color); }
.header-marketplace-search:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2); }
.header-marketplace-search input[type="text"] { width: 100%; padding: 0.625rem 1rem; border: none; font-size: var(--font-size-sm); outline: none; background-color: transparent; color: var(--text-primary-color); }
.header-marketplace-search input[type="text"]::placeholder { color: var(--text-muted-color); }
.header-marketplace-search button { background-color: var(--primary-color); border: none; color: var(--white-color); padding: 0 1.25rem; cursor: pointer; transition: var(--transition-fast); }
.header-marketplace-search button:hover { background-color: var(--primary-dark-color); }
.header-marketplace-search button i { font-size: var(--font-size-base); }
.header-marketplace-actions { display: flex; align-items: center; gap: 1.75rem; }
.header-marketplace-actions .action-item { color: var(--text-secondary-color); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); display: flex; align-items: center; gap: 0.375rem; position: relative; transition: color var(--transition-fast); }
.header-marketplace-actions .action-item:hover { color: var(--primary-color); }
.header-marketplace-actions .action-item i { font-size: 1.25rem; line-height: 1; }
.header-marketplace-actions .action-item .cart-count { position: absolute; top: -5px; right: -8px; background-color: var(--danger-color); color: white; font-size: 0.625rem; padding: 2px 5px; border-radius: var(--border-radius-pill); font-weight: var(--font-weight-bold); line-height: 1; }
.header-marketplace-actions .dropdown-menu-custom { display: none; position: absolute; top: calc(100% + 10px); right: 0; background-color: var(--white-color); border: none; box-shadow: var(--box-shadow-lg); min-width: 220px; z-index: 1001; border-radius: var(--border-radius-lg); padding: 0.5rem 0; opacity: 0; visibility: hidden; transform-origin: top right; transition: opacity var(--transition-fast), visibility var(--transition-fast), transform 0.2s ease-out; }
.header-marketplace-actions .action-item.open .dropdown-menu-custom { display: block; opacity: 1; visibility: visible; transform: translateY(0); }
.header-marketplace-actions .dropdown-item-custom { display: flex; align-items: center; padding: 0.625rem 1rem; color: var(--text-primary-color); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); transition: background-color var(--transition-fast), color var(--transition-fast); }
.header-marketplace-actions .dropdown-item-custom i { font-size: 1rem; color: var(--text-secondary-color); margin-right: 0.75rem; width: 1.25em; text-align: center; transition: color var(--transition-fast); }
.header-marketplace-actions .dropdown-item-custom:hover { background-color: var(--primary-light-color); color: var(--primary-color); text-decoration: none; }
.header-marketplace-actions .dropdown-item-custom:hover i { color: var(--primary-color); }
.header-marketplace-actions .dropdown-menu-custom hr { margin: 0.5rem 0; border-top: 1px solid var(--border-light-color); }

/* Add this to your marketplace.css file */

/* --- Prominent Vertical Sales Badge --- */
.badge-sales-vertical {
    position: absolute;
    top: -1px; /* Align perfectly with the top edge */
    left: -1px; /* Align perfectly with the left edge */
    background-color: var(--danger-color); /* Bright red for attention */
    color: var(--white-color);
    font-size: 0.6875rem; /* 11px */
    font-weight: var(--font-weight-bold);
    padding: 0.8rem 0.25rem; /* More vertical padding */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
    line-height: 1;
    z-index: 2; /* Ensure it's above the image */
    white-space: nowrap;
    text-transform: uppercase; /* e.g., "15% OFF" */
}

/* --- Navigation Marketplace --- (No changes needed) */
.nav-marketplace {
    background-color: var(--white-color);
    /* box-shadow: var(--box-shadow-sm); -- This was already here, ensure it's the desired shadow */
    /* If you want a different or more pronounced shadow for the nav bar: */
    box-shadow: var(--box-shadow-md); /* Example: Using a medium shadow */
    /* Or a custom shadow:
       box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04);
    */
    height: 48px;
    display: flex;
    align-items: center;
    position: sticky; /* << ADD THIS */
    top: var(--header-height); /* << ADD THIS: Make it sticky below the top header */
    z-index: 1029; /* << ADD THIS: Ensure it's above content but below top header's dropdowns */
}
.nav-marketplace .container-marketplace { padding: 0; height: 100%; }
.nav-marketplace-list { display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 0 0.5rem; list-style: none; height: 100%; overflow-x: auto; white-space: nowrap; }
.nav-marketplace-list > li { height: 100%; display: flex; align-items: center; }
.nav-marketplace-list > li > a, .nav-marketplace-list > li > span { display: flex; align-items: center; padding: 0 1rem; height: 100%; color: var(--text-secondary-color); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); text-decoration: none; position: relative; cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); }
.nav-marketplace-list > li:hover > a, .nav-marketplace-list > li:hover > span, .nav-marketplace-list > li.active > a, .nav-marketplace-list > li.active > span, .nav-marketplace-list > li.hover-open > a, .nav-marketplace-list > li.hover-open > span { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.nav-marketplace-list > li > a i.fa-angle-down, .nav-marketplace-list > li > span i.fa-angle-down { font-size: 0.7em; margin-left: 0.3em; transition: transform var(--transition-fast); }
.nav-marketplace-list > li:hover > a i.fa-angle-down, .nav-marketplace-list > li:hover > span i.fa-angle-down, .nav-marketplace-list > li.hover-open > a i.fa-angle-down, .nav-marketplace-list > li.hover-open > span i.fa-angle-down { transform: rotate(180deg); }
.mega-menu { display: none; position: absolute; left: 0; top: calc(100% - 2px); width: 100%; background-color: var(--white-color); border: 1px solid var(--border-color); border-top: none; box-shadow: var(--box-shadow-md); z-index: 1020; padding: 1.5rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--transition-fast), visibility var(--transition-fast), transform 0.2s ease-out; }
.nav-marketplace-list > li.hover-open .mega-menu { display: flex; opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu-column { flex: 1; padding: 0 1rem; }
.mega-menu-column:first-child { padding-left: 0; } .mega-menu-column:last-child { padding-right: 0; }
.mega-menu-column h6 { font-family: var(--font-family-headings); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-color); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light-color); }
.mega-menu-column ul li a { display: block; padding: 0.375rem 0; color: var(--text-secondary-color); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); }
.mega-menu-column ul li a:hover { color: var(--primary-color); text-decoration: none; transform: translateX(3px); }
.mega-menu-column .mega-menu-ad img { border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-sm); transition: transform 0.3s ease; }
.mega-menu-column .mega-menu-ad img:hover { transform: scale(1.03); }

/* --- Footer Marketplace (Updated) --- */
.footer-marketplace {
    background-color: #1c2838; /* Your existing dark blue */
    color: #adb5bd;
    padding: var(--section-padding-y) 0 calc(var(--section-padding-y) / 1.5); /* Reduced bottom padding a bit */
    font-size: var(--font-size-sm);
}
.footer-marketplace a {
    color: #adb5bd;
    transition: color var(--transition-fast);
}
.footer-marketplace a:hover {
    color: var(--white-color);
    text-decoration: none;
}

.footer-logo img {
    max-height: 40px; /* Adjust as needed */
    /* If using a light version of the logo on dark background, no filter needed */
    /* If using dark logo on dark bg, you might need: filter: brightness(0) invert(1); */
}

.footer-column h6 {
    font-family: var(--font-family-headings);
    color: var(--white-color);
    font-weight: var(--font-weight-medium);
    margin-bottom: 1rem;
    font-size: var(--font-size-base);
    text-transform: none;
}
.footer-column ul {
    list-style: none;
    padding-left: 0;
}
.footer-column ul li {
    margin-bottom: 0.625rem;
}
.footer-column address {
    font-style: normal; /* Reset browser default italic for address */
}

.footer-social-icons a { /* No changes here, but ensure they are styled */
    display: inline-flex; /* For better icon alignment */
    align-items: center;
    margin-right: 0.75rem;
    font-size: 1.125rem; /* For icon size if text is used */
    opacity: 0.8;
}
.footer-social-icons a i { /* If only icon, size it directly */
    font-size: 1.25rem;
}
.footer-social-icons a:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
    margin-top: 2rem; /* Increased margin before bottom bar */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-bottom-links a {
    margin-right: 1.5rem;
    font-size: var(--font-size-xs);
    display: inline-flex;
    align-items: center;
}
.footer-bottom-links a i {
    margin-right: 0.375em;
}
.payment-methods img {
    height: 24px;
    margin-left: 0.5rem;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}
.payment-methods img:hover {
    opacity: 1;
}
.copyright-text {
    color: #869ab8;
    font-size: var(--font-size-xs);
}

/* Responsive adjustments for footer columns */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .footer-column-left {
        margin-bottom: 2rem; /* Add space below logo/address block before links stack */
        text-align: center; /* Center logo/address on smaller screens if desired */
    }
    .footer-column-left .footer-logo {
        justify-content: center; /* If logo is display:flex */
        text-align: center;
    }
    .footer-column {
        margin-bottom: 1.5rem;
    }
}
@media (max-width: 767.98px) { /* Small devices (landscape phones) */
    .footer-column {
        text-align: center; /* Center all footer column content */
    }
    .footer-column ul {
        padding-left: 0; /* Ensure lists are centered if text-align center is on parent */
    }
    .footer-social-icons {
        justify-content: center; /* Center social icons */
        display: flex;
        gap: 1rem;
    }
    .footer-social-icons li { margin-bottom: 0 !important; } /* Remove bottom margin from li */
    .footer-social-icons a { margin-right: 0; } /* Remove margin from individual links if gap is used */
}
@media (max-width: 575.98px) { /* Extra small devices (portrait phones) */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom-links, .payment-methods {
        margin-bottom: 0.75rem; /* Adjust spacing */
        justify-content: center; /* Center links and payment icons */
        display: flex;
        flex-wrap: wrap;
    }
    .footer-bottom-links a {
        margin-right: 0.75rem;
        margin-left: 0.75rem;
        margin-bottom: 0.5rem;
    }
}

/* --- MODIFIED General Section Styling --- */
.hero-slider-section,
.category-icons-grid-section,
.trending-products-section,
.deal-grid-section,
.promo-banners-grid-section,
.single-full-width-banner-section,
.product-grid-section {
    background-color: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin-bottom: calc(var(--section-padding-y) / 1.5); /* REDUCED GAP BETWEEN SECTIONS */
    transition: none;
}

/* --- ++ NEW: Features/Services Bar ++ --- */
.features-bar-section {
    background-color: var(--secondary-color); /* Light grey background for the whole bar */
    padding-top: var(--section-padding-y);    /* Use existing padding variables */
    padding-bottom: var(--section-padding-y);
    margin-bottom: calc(var(--section-padding-y) / 1.5); /* Consistent reduced gap */
    /* No border or shadow on the section itself */
}
/* The container within features-bar-section will NOT have the default boxed styling
   that other .container-marketplace divs get. We make it transparent. */
.features-bar-section .container-marketplace {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* Let the row and columns handle internal padding */
}

.feature-item {
    display: flex;
    align-items: flex-start; /* Align icon and text content to the top */
    gap: 1rem; /* 16px space between icon and text content */
    background-color: var(--white-color); /* White background for each card */
    padding: 1.25rem; /* 20px padding inside each feature card */
    border-radius: var(--border-radius-lg); /* Rounded corners like screenshot */
    box-shadow: var(--box-shadow-sm); /* Subtle shadow */
    transition: var(--transition-base);
    height: 100%; /* For equal height cards in a row */
}
.feature-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-md); /* Slightly more pronounced shadow on hover */
}

.feature-icon {
    flex-shrink: 0; /* Prevent icon from shrinking */
    color: var(--primary-color); /* Icon color, can be customized */
    font-size: 1.75rem; /* 28px icon size, adjust as needed */
    line-height: 1; /* Ensure proper alignment */
    /* Optional: background circle for icon if desired
    width: 50px;
    height: 50px;
    background-color: var(--primary-light-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    */
}
.feature-icon i {
    /* No specific styles needed if direct font awesome icon */
}

.feature-content {
    flex-grow: 1;
}
.feature-title {
    font-size: var(--font-size-base); /* 16px */
    font-weight: var(--font-weight-semibold); /* Semibold for title */
    color: var(--text-primary-color);
    margin-bottom: 0.25rem; /* 4px space below title */
    line-height: 1.3;
}
.feature-text {
    font-size: var(--font-size-sm); /* 14px */
    color: var(--text-secondary-color);
    line-height: 1.5;
    margin-bottom: 0; /* No bottom margin for the paragraph */
}

/* Responsive adjustments for feature items if needed */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .feature-item {
        /* padding: 1rem; */ /* Slightly less padding on smaller cards */
    }
    .feature-icon {
        /* font-size: 1.5rem; */
    }
}
@media (max-width: 767.98px) { /* Small devices (landscape phones) */
    /* The col-md-6 will stack them 2x2. They should look good. */
    /* If stacking to 1 column on xs, they will take full width. */
}

/* Ensure the general section styling doesn't add an unwanted border to .features-bar-section */
.features-bar-section {
    border: none !important; /* Override general section border */
}


/* --- Styling for Content Boxes within Sections --- */
.category-icons-grid-section .container-marketplace,
.trending-products-section .container-marketplace,
.deal-grid-section .container-marketplace,
.product-grid-section .container-marketplace {
    background-color: var(--white-color);
    border: 1px solid var(--border-light-color); /* Thin default border */
    border-radius: var(--border-radius-xl);
    padding: var(--section-padding-y);
    box-shadow: var(--box-shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-base);
}
/* Hover effect for these content boxes */
.category-icons-grid-section .container-marketplace:hover,
.trending-products-section .container-marketplace:hover,
.deal-grid-section .container-marketplace:hover,
.product-grid-section .container-marketplace:hover {
    border-color: var(--primary-color);
    box-shadow: var(--box-shadow-md);
}

/* --- BANNER SECTIONS - NO BORDER/BACKGROUND ON CONTAINER --- */
.promo-banners-grid-section .container-marketplace,
.single-full-width-banner-section .container-marketplace {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* Banners usually span the container's width */
}
/* Banner sections might need their own padding if content inside them needs it, or set section padding */
.promo-banners-grid-section,
.single-full-width-banner-section {
    padding-top: calc(var(--section-padding-y) / 2); /* Add some padding directly to banner sections if needed */
    padding-bottom: calc(var(--section-padding-y) / 2);
}


/* Hero Slider Section */
.hero-slider-section { margin-bottom: calc(var(--section-padding-y) / 1.5); } /* Reduced gap */
#mainHeroSlider .carousel-item img { border-radius: var(--border-radius-lg); }
#mainHeroSlider .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(var(--primary-rgb), 0.5); border: none; margin: 0 5px; }
#mainHeroSlider .carousel-indicators .active { background-color: var(--primary-color); }
#mainHeroSlider .carousel-control-prev-icon, #mainHeroSlider .carousel-control-next-icon { background-color: rgba(var(--black-color), 0.3); border-radius: 50%; width: 2.5rem; height: 2.5rem; background-size: 50% 50%; }

/* --- Section Header Styling --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: calc(-1 * var(--section-padding-y));
    margin-right: calc(-1 * var(--section-padding-y));
    margin-top: calc(-1 * var(--section-padding-y));
    padding-left: var(--section-padding-y);
    padding-right: var(--section-padding-y);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light-color);
}
.section-header .section-title { font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); margin-bottom: 0; }

.section-header-highlight {
    background-image: linear-gradient(90deg, #f0f5ff 0%, #e9efff 100%);
}
.section-header-highlight .section-title { color: var(--primary-dark-color); }
.section-header-highlight .btn-marketplace-outline-primary { border-color: var(--primary-dark-color); color: var(--primary-dark-color); }
.section-header-highlight .btn-marketplace-outline-primary:hover { background-color: rgba(var(--primary-rgb), 0.1); color: var(--primary-dark-color); }

.product-grid-section .section-header,
.deal-grid-section .section-header {
    background-color: var(--primary-light-color);
}
.product-grid-section .section-header .section-title,
.deal-grid-section .section-header .section-title {
    color: var(--text-primary-color);
}

/* Category Icons Grid Section */
.category-icons-grid-section .container-marketplace .section-title-container { margin-bottom: 2rem; margin-left: 0; margin-right: 0; margin-top: 0; padding-left: 0; padding-right: 0; padding-top: 0; }
.category-icons-grid-section .section-title-container h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.category-grid-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1.5rem; }
.category-grid-item a { display: flex; flex-direction: column; align-items: center; padding: 1rem; border-radius: var(--border-radius-lg); transition: var(--transition-base); background-color: #f8f9fa; border: 1px solid transparent; }
.category-grid-item a:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-md); background-color: var(--white-color); border-color: var(--border-color); }
.category-icon-image img { width: 64px; height: 64px; border-radius: var(--border-radius-lg); object-fit: contain; margin-bottom: 0.75rem; background-color: var(--white-color); padding: 0.25rem; box-shadow: var(--box-shadow-xs); }
.category-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary-color); text-align: center; line-height: 1.3; }

/* --- Product Card v2 --- */
.product-card-v2 { background-color: var(--white-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); overflow: hidden; transition: var(--transition-base); height: 100%; display: flex; flex-direction: column; position: relative; box-shadow: var(--box-shadow-sm); }
.product-card-v2:hover { border-color: var(--primary-color); box-shadow: var(--box-shadow-lg); }
.product-card-v2:hover .product-card-v2-actions-overlay { opacity: 1; visibility: visible; }
.product-card-v2-image-wrapper { position: relative; background-color: #f7f7f7; padding: 1rem; text-align: center; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.product-card-v2-image { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform 0.3s ease; }
.product-card-v2:hover .product-card-v2-image { transform: scale(1.03); }
.product-card-v2 .badge-verified { position: absolute; top: 0.75rem; left: 0.75rem; background-color: rgba(var(--primary-rgb), 0.1); color: var(--primary-color); font-size: 0.6875rem; padding: 0.25rem 0.5rem; border-radius: var(--border-radius-sm); font-weight: var(--font-weight-medium); line-height: 1; z-index: 2; }
.product-card-v2 .badge-verified i { margin-right: 0.25rem; font-size: 0.8em; }
.product-card-v2 .badge-sales-vertical { position: absolute; top: 0; left: -1px; background-color: var(--danger-color); color: var(--white-color); font-size: 0.625rem; font-weight: var(--font-weight-bold); padding: 0.75rem 0.2rem 0.75rem 0.3rem; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); border-top-right-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); line-height: 1; z-index: 1; height: auto; display: inline-block; white-space: nowrap; }
.product-card-v2 .btn-wishlist-v2-image { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--border-light-color); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary-color); font-size: 0.9rem; transition: var(--transition-base); z-index: 2; }
.product-card-v2 .btn-wishlist-v2-image:hover, .product-card-v2 .btn-wishlist-v2-image.active { color: var(--danger-color); background-color: var(--white-color); border-color: var(--danger-color); transform: scale(1.1); }
.product-card-v2-actions-overlay { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; background-color: rgba(var(--white-color-rgb, 255, 255, 255), 0.85); backdrop-filter: blur(3px); padding: 0.5rem 0.75rem; border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-md); opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; z-index: 3; }
.product-card-v2-actions-overlay .action-btn-overlay { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-secondary-color); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: var(--transition-base); }
.product-card-v2-actions-overlay .action-btn-overlay:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white-color); }
.product-card-v2-actions-overlay .action-btn-overlay.wishlist-btn:hover { background-color: var(--danger-color); border-color: var(--danger-color); color: var(--white-color); }
.product-card-v2-content { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; text-align: left; }
.product-card-v2-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary-color); margin-bottom: 0.375rem; line-height: 1.4; min-height: calc(1.4em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.product-card-v2-title a { color: inherit; text-decoration: none; }
.product-card-v2-title a:hover { color: var(--primary-color); }
.product-card-v2-rating { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.375rem; }
.product-card-v2-rating .rating-badge { background-color: var(--success-color); color: var(--white-color); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 0.15rem 0.4rem; border-radius: var(--border-radius-sm); line-height: 1; }
.product-card-v2-rating .rating-badge i.fa-star { font-size: 0.8em; margin-left: 0.1em; }
.product-card-v2-rating .rating-count { font-size: var(--font-size-xs); color: var(--text-muted-color); }
.product-card-v2-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.product-card-v2-price .current-price { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary-color); }
.product-card-v2-price .original-price { font-size: var(--font-size-sm); color: var(--text-muted-color); text-decoration: line-through; }
.product-card-v2-price .discount-off { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--success-color); }
.product-card-v2-tags { margin-top: auto; }
.product-card-v2-tags .tag-new-arrival { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--success-color); }
.stock-indicator-wrapper { margin-top: 0.75rem; }
.stock-indicator-details { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.375rem; }
.stock-indicator-label { font-size: var(--font-size-xs); color: var(--text-muted-color); }
.stock-indicator-label strong { color: var(--danger-color); }
.stock-indicator-sold-count { font-size: var(--font-size-xs); color: var(--text-secondary-color); font-weight: var(--font-weight-medium); }
.stock-indicator-bar { height: 6px; background-color: var(--border-light-color); border-radius: var(--border-radius-pill); overflow: hidden; }
.stock-indicator-progress { height: 100%; border-radius: var(--border-radius-pill); transition: width 0.5s ease; background-image: linear-gradient(to right, var(--danger-color) 0%, var(--warning-color) 50%, var(--success-color) 100%); }

/* --- Promotional Banners Grid Section Items --- */
.promo-banner-item { display: block; position: relative; overflow: hidden; border-radius: var(--border-radius-lg); transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: var(--box-shadow-md); }
.promo-banner-item img { transition: transform 0.4s ease; width: 100%; display: block; }
.promo-banner-item:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-lg); }
.promo-banner-item:hover img { transform: scale(1.03); }
.promo-banner-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); color: var(--white-color); border-bottom-left-radius: var(--border-radius-lg); border-bottom-right-radius: var(--border-radius-lg); }
.promo-banner-content h3 { font-size: var(--font-size-lg); margin-bottom: 0.25rem; color: var(--white-color); font-weight: var(--font-weight-bold); }
.promo-banner-content p { font-size: var(--font-size-sm); margin-bottom: 0.75rem; opacity: 0.9; }
.btn-marketplace-light { background-color: rgba(255,255,255,0.9); color: var(--text-primary-color); border-color: transparent; }
.btn-marketplace-light:hover { background-color: var(--white-color); }

/* --- Deal of the Day (Multi-Product Grid) Section --- */
.product-deal-grid-card { display: flex; background-color: var(--white-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 0.75rem; gap: 0.75rem; transition: var(--transition-base); height: 100%; overflow: hidden; position: relative; box-shadow: var(--box-shadow-xs); }
.product-deal-grid-card:hover { border-color: var(--primary-color); box-shadow: var(--box-shadow-md); transform: translateY(-2px); }
.product-deal-grid-card-image-col { flex-shrink: 0; width: 80px; position: relative; display: flex; align-items: center; justify-content: center; }
.product-deal-grid-card-img-link { display: block; text-align: center; }
.product-deal-grid-card-image { max-width: 100%; max-height: 80px; object-fit: contain; }
.product-deal-grid-card .badge-sale-v { position: absolute; top: 0; left: -1px; background-color: var(--danger-color); color: var(--white-color); font-size: 0.625rem; font-weight: var(--font-weight-bold); padding: 0.75rem 0.2rem; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); border-top-right-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); line-height: 1; z-index: 1; white-space: nowrap; height: auto; display: inline-block; }
.product-deal-grid-card-content-col { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.product-deal-grid-card-price-group { margin-bottom: 0.25rem; display: flex; align-items: baseline; gap: 0.375rem; }
.product-deal-grid-card .original-price { font-size: var(--font-size-xs); color: var(--text-muted-color); text-decoration: line-through; font-weight: var(--font-weight-normal); }
.product-deal-grid-card .current-price { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--danger-color); }
.product-deal-grid-card-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--text-secondary-color); line-height: 1.4; margin-bottom: 0.375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(1.4em * 2); }
.product-deal-grid-card-title a { color: inherit; text-decoration: none; }
.product-deal-grid-card-title a:hover { color: var(--primary-color); }
.deal-grid-card-countdown { margin-bottom: 0.5rem; font-size: var(--font-size-xs); display: flex; align-items: center; gap: 0.3rem; }
.deal-grid-card-countdown .time-segment-deal { background-color: rgba(var(--danger-rgb, 220, 53, 69), 0.08); color: var(--danger-color); font-weight: var(--font-weight-semibold); padding: 0.15rem 0.3rem; border-radius: var(--border-radius-sm); line-height: 1.1; }
.deal-grid-card-countdown .time-unit-deal { font-size: 0.8em; color: var(--text-muted-color); margin-left: 0.1em; }
.product-deal-grid-card-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; }
.product-deal-grid-card-actions .action-btn { font-size: var(--font-size-xs); color: var(--text-secondary-color); font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; padding: 0.25rem 0; transition: color var(--transition-fast); }
.product-deal-grid-card-actions .action-btn:hover { color: var(--primary-color); }
.product-deal-grid-card-actions .action-btn i { margin-right: 0.25rem; font-size: 0.875em; }
.product-deal-grid-card-actions .action-btn.wishlist:hover, .product-deal-grid-card-actions .action-btn.wishlist.active { color: var(--danger-color); }

/* --- Product Carousel Section --- */
.product-carousel-section .product-carousel-wrapper { padding-top: 0; }
.product-carousel-items { display: flex; gap: 1.5rem; }
.product-carousel-item { flex: 0 0 auto; width: 280px; margin-bottom: 0.5rem; }
.product-carousel-controls { position: absolute; top: 50%; transform: translateY(-50%); right: 1.5rem; display: flex; gap: 0.5rem; }
.product-carousel-section .section-header .product-carousel-controls { position: static; transform: none; }
.product-carousel-controls button { background-color: var(--white-color); border: 1px solid var(--border-color); color: var(--text-secondary-color); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; transition: var(--transition-base); box-shadow: var(--box-shadow-sm); }
.product-carousel-controls button:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white-color); }

/* --- Product Grid Card (Style for Best Rated - Horizontal) --- */
.product-card-h { display: flex; background-color: var(--white-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 0.75rem; gap: 0.75rem; transition: var(--transition-base); height: 100%; overflow: hidden; box-shadow: var(--box-shadow-xs); }
.product-card-h:hover { border-color: var(--primary-color); box-shadow: var(--box-shadow-md); transform: translateY(-2px); }
.product-card-h-image-col { flex-shrink: 0; width: 80px; position: relative; display: flex; align-items: center; justify-content: center; }
.product-card-h-img-link { display: block; text-align: center; }
.product-card-h-image { max-width: 100%; max-height: 80px; object-fit: contain; }
.product-card-h .badge-sale-v { position: absolute; top: 0; left: -1px; background-color: var(--danger-color); color: var(--white-color); font-size: 0.625rem; font-weight: var(--font-weight-bold); padding: 0.75rem 0.2rem; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); border-top-right-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); line-height: 1; z-index: 1; white-space: nowrap; height: auto; display: inline-block; }
.product-card-h-content-col { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.product-card-h-price-group { margin-bottom: 0.25rem; display: flex; align-items: baseline; gap: 0.375rem; }
.product-card-h .original-price-h { font-size: var(--font-size-xs); color: var(--text-muted-color); text-decoration: line-through; font-weight: var(--font-weight-normal); }
.product-card-h .current-price-h { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--text-primary-color); }
.product-card-h-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--text-secondary-color); line-height: 1.4; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(1.4em * 2); }
.product-card-h-title a { color: inherit; text-decoration: none; }
.product-card-h-title a:hover { color: var(--primary-color); }
.product-card-h-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; }
.product-card-h-actions .action-btn { font-size: var(--font-size-xs); color: var(--text-secondary-color); font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; padding: 0.25rem 0; transition: color var(--transition-fast); }
.product-card-h-actions .action-btn:hover { color: var(--primary-color); }
.product-card-h-actions .action-btn i { margin-right: 0.25rem; font-size: 0.875em; }
.product-card-h-actions .action-btn.wishlist:hover, .product-card-h-actions .action-btn.wishlist.active { color: var(--danger-color); }
.product-card-h-actions .action-btn.compare:hover { color: var(--info-color); }

/* --- General Grid Section column padding and card width --- */
.product-grid-section .row > [class*="col-"],
.deal-grid-section .row > [class*="col-"] {
    display: flex;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.product-grid-section .product-card-v2,
.product-grid-section .product-card-h,
.deal-grid-section .product-deal-grid-card {
    width: 100%;
}

/* --- ++ NEW: Popular Brands Section ++ --- */
.popular-brands-section {
    background-color: var(--secondary-color); /* Light grey background for the whole bar */
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    margin-bottom: calc(var(--section-padding-y) / 1.5); /* Consistent reduced gap */
    /* No border or shadow on the section itself to match general style */
    border: none !important;
}
/* The container within popular-brands-section will NOT have the default boxed styling */
.popular-brands-section .container-marketplace {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;    /* Remove extra padding from container itself */
    padding-bottom: 0 !important;
    /* Keep left/right padding for container alignment */
}

.section-header-simple {
    position: relative; /* For the separator */
}
.section-header-simple .section-title {
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    margin-bottom: 0.5rem; /* Space before separator */
}
/* Optional: Title separator */
.title-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem; /* Space after separator */
}
.title-separator span {
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color); /* Or var(--accent-color) */
    border-radius: var(--border-radius-pill);
}
/* Hide full-width section border for this section if it was general */
.popular-brands-section {
    border: none !important;
}

.popular-brands-carousel-wrapper {
    position: relative; /* For prev/next buttons */
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1rem; /* Space for scrollbar if visible and card hover */
    margin-bottom: -1rem;
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.popular-brands-carousel-wrapper::-webkit-scrollbar {
    display: none;
}
.popular-brands-carousel-items {
    display: flex;
    gap: 1rem; /* 16px spacing between brand items */
    padding-left: 5px;  /* Small padding for first item shadow */
    padding-right: 5px; /* Small padding for last item shadow */
}

.popular-brand-item {
    flex: 0 0 auto; /* Prevent items from shrinking or growing */
    width: 180px; /* Adjust width as needed, matches screenshot feel */
    background-color: var(--white-color);
    border: 1px solid var(--border-light-color);
    border-radius: var(--border-radius-lg); /* Rounded corners like screenshot */
    padding: 1rem; /* Padding around the logo */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    box-shadow: var(--box-shadow-xs); /* Very subtle shadow */
    min-height: 100px; /* Ensure a minimum height */
}
.popular-brand-item:hover {
    border-color: var(--primary-color); /* Primary color border on hover */
    box-shadow: var(--box-shadow-md);
    transform: translateY(-2px);
}
.popular-brand-item img {
    max-width: 100%;
    max-height: 60px; /* Adjust max height for logos */
    object-fit: contain;
    filter: grayscale(100%); /* Make logos initially grayscale */
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.popular-brand-item:hover img {
    filter: grayscale(0%); /* Color on hover */
    opacity: 1;
}

/* Custom Prev/Next Controls for Brand Carousel */
.brand-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Vertically center */
    background-color: rgba(var(--white-color-rgb, 255,255,255), 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: var(--transition-base);
    box-shadow: var(--box-shadow-sm);
    z-index: 5; /* Ensure they are above items */
    cursor: pointer;
}
.brand-carousel-control.prev {
    left: -10px; /* Adjust position */
}
.brand-carousel-control.next {
    right: -10px; /* Adjust position */
}
.brand-carousel-control:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}
@media (max-width: 991.98px) { /* Hide on medium and below if wrapper is too narrow */
    .brand-carousel-control.prev { left: 0px; }
    .brand-carousel-control.next { right: 0px; }
}
@media (max-width: 767.98px) {
    .popular-brand-item { width: 150px; }
    .brand-carousel-control { display: none !important; } /* Rely on swipe for mobile */
}

/* Ensure container boxing doesn't apply to this specific section's container */
.popular-brands-section .container-marketplace {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    /* Padding is fine for the container to align content */
}
/* Media Queries (Consolidated and refined) */
@media (max-width: 1199.98px) { .product-carousel-item { width: 260px; } }
@media (max-width: 991.98px) { .product-carousel-item { width: 240px; } .footer-marketplace .footer-column { margin-bottom: 1.5rem; } }
@media (max-width: 767.98px) {


    .header-marketplace-actions .login-item span { display: inline-block; }
    .header-marketplace .container-marketplace { gap: 0.75rem; }
    .header-marketplace-actions { gap: 1rem; } .header-marketplace-logo img { height: 28px; }
    .header-marketplace-search { border-radius: var(--border-radius); }
    .header-marketplace-search input[type="text"] { padding: 0.5rem 0.75rem; }
    .header-marketplace-search button { padding: 0 1rem; } .header-marketplace-search button i { font-size: var(--font-size-sm); }
    .category-grid-items { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 1rem; }
    .category-icon-image img { width: 50px; height: 50px; } .category-name { font-size: var(--font-size-xs); }
    .product-carousel-item { width: 220px; }
    .section-header .section-title { font-size: var(--font-size-lg) !important; }
    .product-carousel-controls { display: none !important; }
    .category-icons-grid-section .container-marketplace,
    .trending-products-section .container-marketplace,
    .deal-grid-section .container-marketplace,
    .product-grid-section .container-marketplace {
        padding: calc(var(--section-padding-y) / 1.5);
    }
    /* Banner sections on mobile might still need some container padding if not full bleed */
    .promo-banners-grid-section .container-marketplace,
    .single-full-width-banner-section .container-marketplace {
        padding-left: var(--bs-gutter-x, 0.75rem) !important; /* Bootstrap gutter or fallback */
        padding-right: var(--bs-gutter-x, 0.75rem) !important;
    }

    .section-header {
        margin-left: calc(-1 * var(--section-padding-y) / 1.5);
        margin-right: calc(-1 * var(--section-padding-y) / 1.5);
        margin-top: calc(-1 * var(--section-padding-y) / 1.5);
        padding-left: calc(var(--section-padding-y) / 1.5);
        padding-right: calc(var(--section-padding-y) / 1.5);
    }
}
@media (max-width: 575.98px) {
    .product-carousel-item { width: calc(80% - 0.5rem); }
    .product-carousel-wrapper { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links, .payment-methods { margin-bottom: 0.5rem; }
    .hero-slider-section, .category-icons-grid-section, .trending-products-section,
    .deal-grid-section, .promo-banners-grid-section, .single-full-width-banner-section,
    .product-grid-section {
        margin-bottom: calc(var(--section-padding-y) / 1.5);
    }
    .category-icons-grid-section .container-marketplace,
    .trending-products-section .container-marketplace,
    .deal-grid-section .container-marketplace,
    .product-grid-section .container-marketplace {
        padding: calc(var(--section-padding-y) / 2);
    }
    .section-header {
        margin-left: calc(-1 * var(--section-padding-y) / 2);
        margin-right: calc(-1 * var(--section-padding-y) / 2);
        margin-top: calc(-1 * var(--section-padding-y) / 2);
        padding-left: calc(var(--section-padding-y) / 2);
        padding-right: calc(var(--section-padding-y) / 2);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .section-header .section-title { font-size: var(--font-size-md) !important; }
    .product-card-v2-actions-overlay { padding: 0.375rem 0.5rem; gap: 0.375rem; }
    .product-card-v2-actions-overlay .action-btn-overlay { width: 32px; height: 32px; font-size: 0.875rem; }
}
/* --- Product Detail Page (PDP) Styles --- */
.pdp-page-container {
    background-color: var(--secondary-color); /* Overall page background */
    padding-top: 1.5rem; /* Consistent top padding for the page */
    padding-bottom: 2rem; /* Consistent bottom padding */
}

.pdp-breadcrumb {
    margin-bottom: 1rem; /* Reduced margin below breadcrumbs */
}
.pdp-breadcrumb .breadcrumb-item a { color: var(--text-secondary-color); font-size: var(--font-size-sm); }
.pdp-breadcrumb .breadcrumb-item.active { color: var(--text-primary-color); font-weight: var(--font-weight-medium); }

.pdp-main-layout {
    /* This is the main white card for product info and gallery */
    padding: 1.5rem; /* Reduced internal padding for a tighter look */
}

/* Image Gallery Column Spacing */
.pdp-gallery-column .pdp-image-gallery-sticky {
    position: sticky;
    top: calc(var(--header-height) + 1rem); /* Reduced top offset for sticky */
}
.pdp-main-image-slider-wrapper {
    margin-bottom: 0.75rem; /* Space between main image and thumbnails */
}
.pdp-main-image-slider-wrapper .slick-slide img { max-height: 420px; /* Adjusted max height */ margin: 0 auto; object-fit: contain; }
.pdp-main-slick-arrow { background-color: rgba(var(--black-color-rgb, 0,0,0), 0.3); width: 36px; height: 36px; } /* Slightly smaller arrows */
.pdp-main-slick-arrow:hover { background-color: rgba(var(--black-color-rgb, 0,0,0), 0.55); }
.pdp-main-image-slider-wrapper .slick-prev { left: 10px; } .pdp-main-image-slider-wrapper .slick-next { right: 10px; }

.pdp-thumbnail-slider-wrapper { margin-top: 0.5rem; } /* Consistent spacing */
.pdp-thumbnail-slider .slick-slide { padding: 0 3px; } /* Tighter thumbnail spacing */
.pdp-thumbnail-slider img { border: 2px solid var(--border-light-color); border-radius: var(--border-radius-sm); height: 65px; width: 100%; object-fit: cover; } /* Slightly smaller thumbs */
.pdp-thumbnail-slider .slick-current img { border-color: var(--primary-color); }

/* Info Column Spacing */
.pdp-info-column .pdp-title { line-height: 1.25; margin-bottom: 0.35rem !important; /* Tighter title spacing */ }
.pdp-info-column .pdp-meta-info { margin-bottom: 0.5rem; /* Space after brand/SKU */ }
.pdp-info-column .pdp-rating-reviews { margin-bottom: 0.75rem; /* Space after rating/reviews */ }
.pdp-info-column hr.my-2.my-lg-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; /* Tighter HR */ }
.pdp-info-column .pdp-price-block { margin-bottom: 1rem; /* Space after price */ }
.pdp-info-column .pdp-price-block .pdp-current-price { font-size: 2rem; /* Slightly adjust if needed */ }
.pdp-info-column .pdp-short-description { margin-bottom: 1rem; /* Space after short desc */ line-height: 1.5; }

.pdp-info-column .pdp-variants-section { margin-bottom: 1rem; }
.pdp-info-column .variant-group { margin-bottom: 0.75rem; /* Space between variant groups */ }
.pdp-info-column .variant-group .form-label { margin-bottom: 0.25rem; /* Tighter label spacing */ }
.pdp-info-column .variant-options.color-swatches { gap: 0.375rem; /* Tighter color swatches */ }
.pdp-info-column .variant-swatch.color { width: 26px; height: 26px; } /* Slightly smaller swatches */
.pdp-info-column .form-select-sm { max-width: 160px; /* Adjust width if needed */ }

.pdp-info-column .pdp-stock-qty-row {
    gap: 1rem; /* Reduced gap between stock and qty */
    margin-bottom: 1rem; /* Space after stock/qty */
}
.pdp-info-column .pdp-quantity-selector .input-group { max-width: 90px; } /* Compact quantity selector */

.pdp-info-column .pdp-actions-row {
    gap: 0.75rem; /* Tighter button spacing */
    margin-bottom: 1rem; /* Space after action buttons */
}
.pdp-info-column .pdp-actions-row .btn-lg { padding: 0.55rem 1.1rem; /* Slightly adjusted padding */ }

.pdp-info-column .pdp-seller-info-box {
    padding: 0.5rem 0.75rem; /* Reduced padding */
    margin-bottom: 0.75rem; /* Tighter spacing */
}
.pdp-info-column .pdp-delivery-info { margin-bottom: 0.75rem; /* Tighter spacing */ }
.pdp-info-column .pdp-delivery-info .input-group { max-width: 280px; /* Adjust if needed */ }
.pdp-info-column .pdp-delivery-info small.text-muted { margin-top: 0.25rem; }

.pdp-info-column .pdp-social-share { margin-top: 1rem; /* Ensure some space above share icons */ }
.pdp-info-column .pdp-social-share .social-icon { margin-right: 0.6rem; }

/* Product Tabs Section Spacing */
.pdp-details-tabs-section {
    margin-top: 1.8rem; /* Reduced margin above tabs section */
    /* Ensure padding is handled within this component's structure if it's a white box */
}
.pdp-custom-tabs { /* This is the ul.nav-tabs */
    border-bottom: 1px solid var(--border-color); /* Keeps the overall bottom line for the tab bar */
    margin-bottom: 0; /* No margin below the tab bar itself */
}
.pdp-custom-tabs .nav-link { /* Styles for all tab links (active and inactive) */
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-medium);
    border: none; /* Remove all default borders first */
    border-bottom: 2px solid transparent; /* Transparent bottom border for inactive, reserve space */
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-base); /* Or var(--font-size-sm) if you prefer smaller */
    border-top-left-radius: var(--border-radius-sm); /* Slight rounding for top corners of inactive tabs */
    border-top-right-radius: var(--border-radius-sm);
    margin-bottom: -1px; /* To make active tab's border overlap the main border-bottom */
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.pdp-custom-tabs .nav-link.active { /* Styles for the ACTIVE tab */
    color: var(--primary-color); /* Active tab text color (primary blue) */
    font-weight: var(--font-weight-semibold); /* Slightly bolder for active tab */
    background-color: var(--primary-light-color); /* VERY LIGHT background for active tab */
    border-color: var(--border-color) var(--border-color) var(--primary-color); /* Top/Sides light, Bottom primary */
    /* Explicitly set border for active tab: */
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 2px solid var(--primary-color); /* THIN primary color bottom border */
    /* Ensure top corners are rounded to match the visual */
    border-top-left-radius: var(--border-radius-md); /* Match the screenshot's rounded top */
    border-top-right-radius: var(--border-radius-md);
}
.pdp-details-tabs-section .tab-content {
    padding: 1.5rem; /* Padding for the content area below tabs */
    border: 1px solid var(--border-color); /* Border around the content area */
    border-top: none; /* Remove top border as tabs handle it */
    border-bottom-left-radius: var(--border-radius-lg); /* Match section rounding */
    border-bottom-right-radius: var(--border-radius-lg);
    background-color: var(--white-color); /* Ensure content area is white */
    min-height: 250px;
    font-size: var(--font-size-sm);
}
.pdp-custom-tabs .nav-link:hover { /* Hover for inactive tabs */
    color: var(--primary-color);
    border-bottom-color: var(--primary-light-color); /* Light primary bottom line on hover */
    background-color: transparent; /* Ensure no background on hover for inactive */
}
.pdp-details-tabs-section .tab-content h5 { margin-bottom: 0.5rem; }
.pdp-details-tabs-section .tab-content h6 { margin-top: 0.75rem; }
.pdp-details-tabs-section .tab-content ul { padding-left: 1rem; }
.pdp-details-tabs-section .tab-content ul li { margin-bottom: 0.25rem; }

/* "You May Also Like" / Related Products Section Spacing */
.related-products-outer-section {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: var(--section-padding-y);
}

.related-products-container { /* This is the white box for the section */
    background-color: var(--white-color);
    border: 1px solid var(--border-light-color); /* Default border for the whole section box */
    border-radius: var(--border-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--box-shadow-sm); /* Default shadow for the whole section box */
    transition: box-shadow var(--transition-base); /* Only transition shadow, not border */
    margin-top: 2rem;
}
.related-products-slider-v2 .product-card-v2:hover {
    border-color: var(--primary-color) !important; /* Added !important as a last resort if specificity is complex */
    box-shadow: var(--box-shadow-lg);
}

.related-products-container .section-header {
    padding: 0 0 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-light-color);
}
.related-products-container .section-header .section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary-color);
    margin-bottom: 0;
    padding: 15px;
}

.related-products-carousel-controls {
    display: flex;
    gap: 0.5rem;
    padding: 15px;
}
.related-products-carousel-controls .slick-arrow,
.related-products-carousel-controls .related-prev-btn,
.related-products-carousel-controls .related-next-btn {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: var(--transition-base);
    box-shadow: var(--box-shadow-xs);
    padding: 0;
}
.related-products-carousel-controls .slick-arrow:hover,
.related-products-carousel-controls .related-prev-btn:hover,
.related-products-carousel-controls .related-next-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    transform: scale(1.05);
}

.related-products-container .product-carousel-wrapper {
    padding-top: 0.5rem;
    margin-left: -0.375rem; /* Offset for item padding */
    margin-right: -0.375rem; /* Offset for item padding */
}
.product-carousel-item { /* This is the slick-slide wrapper */
    padding: 0 0.375rem; /* Creates the gap between cards */
    /* The actual product card inside this will get the hover border */
}


/* Responsive Spacing Adjustments for PDP */
@media (max-width: 991.98px) {
    .pdp-gallery-column .pdp-image-gallery-sticky { position: static; }
    .pdp-main-layout { padding: 1rem; } /* Further reduce padding on medium */
}
@media (max-width: 767.98px) {
    .pdp-page-container { padding-top: 1rem; padding-bottom: 1.5rem; }
    .pdp-main-layout { padding: 0.75rem; } /* Tighter padding on mobile */
    .pdp-info-column .pdp-title { font-size: 1.15rem; }
    .pdp-info-column .pdp-price-block .pdp-current-price { font-size: 1.5rem; }
    .pdp-info-column .pdp-actions-row { flex-direction: column; gap: 0.5rem; }
    .pdp-info-column .pdp-actions-row .btn-lg { width: 100%; padding: 0.5rem 1rem; }
    .pdp-info-column .pdp-wishlist-btn { width: 100% !important; margin-top: 0.5rem; }
    .pdp-custom-tabs .nav-link { font-size: 0.8rem; padding: 0.5rem 0.6rem; }
    .pdp-details-tabs-section .tab-content { padding: 0.75rem; }
    .related-products-container { padding: 0.75rem; }
    .related-products-container .section-header { padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
    .product-carousel-item { padding: 0 0.25rem; }
}

/* Page Title Area */
.plp-page-title-area {
    background-color: var(--secondary-color); /* Fallback */
    background-size: cover;
    background-position: center center;
    padding: 2.5rem 0; /* 40px */
    text-align: center;
    color: var(--white-color); /* Text color on background image */
    margin-bottom: var(--section-padding-y); /* Same as other sections for consistency */
}
.plp-page-title-area .container-marketplace {
    position: relative; /* For pseudo-overlay if needed */
    z-index: 1;
}
.plp-page-title {
    font-size: 2.5rem; /* 40px */
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5rem; /* 8px */
    color: inherit;
}
.plp-breadcrumb .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
    justify-content: center;
}
.plp-breadcrumb .breadcrumb-item a {
    color: rgba(var(--white-color-rgb, 255,255,255), 0.8);
    font-size: var(--font-size-sm);
}
.plp-breadcrumb .breadcrumb-item a:hover {
    color: var(--white-color);
    text-decoration: underline;
}
.plp-breadcrumb .breadcrumb-item.active {
    color: var(--white-color);
    font-weight: var(--font-weight-medium);
}
.plp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(var(--white-color-rgb, 255,255,255), 0.6);
    content: "//"; /* Custom separator */
    padding: 0 0.5rem;
}

/* PLP Main Content Area */
.plp-main-content .container-marketplace {
    /* Re-apply boxing if desired, or let sidebar/grid handle their own backgrounds */
    /* background-color: var(--white-color); */
    /* border: 1px solid var(--border-light-color); */
    /* border-radius: var(--border-radius-xl); */
    /* padding: var(--section-padding-y); */ /* This padding is on the section, container here is just for layout */
    /* box-shadow: var(--box-shadow-sm); */
}

/* Sidebar Widgets */
.plp-sidebar .widget-title {
    font-size: var(--font-size-md); /* 18px */
    font-weight: var(--font-weight-semibold);
    margin-bottom: 1rem; /* 16px */
    padding-bottom: 0.75rem; /* 12px */
    border-bottom: 1px solid var(--border-light-color);
    position: relative;
}
.plp-sidebar .widget-title::after { /* Small accent line */
    content: '';
    position: absolute;
    bottom: -1px; /* Align with border */
    left: 0;
    width: 50px;
    height: 2px;
    background-color: var(--primary-color); /* Accent color from reference (reddish) */
}

/* Category List Widget */
.categories-widget .category-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.categories-widget .category-item {
    border-bottom: 1px solid var(--border-light-color);
}
.categories-widget .category-item:last-child {
    border-bottom: none;
}
.categories-widget .category-link {
    display: block;
    padding: 0.625rem 0; /* 10px */
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}
.categories-widget .category-link:hover,
.categories-widget .category-item.active > .category-link {
    color: var(--primary-color); /* Reddish color from reference */
}
.categories-widget .category-link i {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}
.categories-widget .category-item.active > .category-link i {
    transform: rotate(0deg); /* Minus icon doesn't rotate */
}
.categories-widget .subcategory-list {
    list-style: none;
    padding-left: 1rem; /* Indent subcategories */
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    display: none; /* Hidden by default */
}
.categories-widget .subcategory-list li a {
    display: block;
    padding: 0.375rem 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted-color);
}
.categories-widget .subcategory-list li a:hover {
    color: var(--primary-color);
}


/* Price Range Slider (noUiSlider) */
.price-range-widget .noUi-target {
    border: none;
    background: var(--border-light-color); /* Track color */
    box-shadow: none;
    height: 6px; /* Slider height */
}
.price-range-widget .noUi-connect {
    background: var(--primary-color); /* Reddish color for selected range */
}
.price-range-widget .noUi-handle {
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background: var(--white-color);
    box-shadow: var(--box-shadow-sm);
    width: 18px;
    height: 18px;
    right: -9px;
    top: -6px;
    cursor: grab;
}
.price-range-widget .noUi-handle:focus { outline: none; }
.price-range-widget .noUi-handle::before,
.price-range-widget .noUi-handle::after { display: none; }
.price-range-widget #price-range-values { text-align: center; }
.price-range-widget .btn-marketplace-primary { /* "Apply Filter" button */
    background-color: var(--primary-color); /* Reddish from reference */
    border-color: var(--primary-color);
}
.price-range-widget .btn-marketplace-primary:hover {
    background-color: var(--primary-dark-color); /* Darker reddish */
    border-color: var(--primary-dark-color);
}
.price-range-widget .btn-outline-secondary { /* "Clear Filter" button */
    border-color: var(--text-primary-color);
    color: var(--text-primary-color);
    background-color: var(--text-primary-color); /* Dark button from reference */
    color: var(--white-color);
}
.price-range-widget .btn-outline-secondary:hover {
    background-color: #333;
    border-color: #333;
    color: var(--white-color);
}


/* Warranty & Other Checkbox/Radio Filters */
.filter-list .form-check {
    margin-bottom: 0.5rem;
}
.filter-list .form-check-input {
    border-color: var(--border-color);
    margin-top: 0.2em; /* Align better with text */
}
.filter-list .form-check-input:checked {
    background-color: var(--primary-color); /* Reddish */
    border-color: var(--primary-color);
}
.filter-list .form-check-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    padding-left: 0.3rem;
}

/* Recent Products Widget */
.recent-product-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light-color);
}
.recent-product-item:last-child { border-bottom: none; }
.recent-product-img img {
    width: 50px; /* Size from reference */
    height: 50px;
    object-fit: contain;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-light-color);
}
.recent-product-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary-color);
    display: block;
    margin-bottom: 0.1rem;
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.recent-product-title:hover { color: var(--primary-color); }
.recent-product-price .current-price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color); /* Reddish */
}
.recent-product-price .original-price {
    font-size: var(--font-size-xs);
    color: var(--text-muted-color);
    text-decoration: line-through;
}
.recent-product-info .star-rating i { margin-right: 0; }


/* PLP Top Bar */
.plp-top-bar {
    border: 1px solid var(--border-light-color);
    /* background-color: #f8f9fa; -- Already set by bg-light utility class from Bootstrap */
    /* Ensure padding and rounded corners are applied by Bootstrap's p-2 and rounded-sm or your custom classes */
}

.plp-top-bar .product-count {
    /* Existing styles are fine */
}

.plp-top-bar .sort-by-group {
    /* No specific styles needed if Bootstrap's d-flex align-items-center is sufficient */
}

.plp-top-bar .sort-by-group .form-label {
    color: var(--text-secondary-color); /* Ensures the "Sort by:" text is grey */
    font-weight: var(--font-weight-normal); /* Not bold */
    white-space: nowrap; /* Prevent "Sort by:" from wrapping */
}

.plp-top-bar .form-select-sm {
    font-size: var(--font-size-sm);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-color: var(--border-color); /* Match other input borders */
    box-shadow: none; /* Remove default Bootstrap focus shadow if desired */
}
.plp-top-bar .form-select-sm:focus {
    border-color: var(--primary-color); /* Primary color border on focus */
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15); /* Subtle focus shadow */
}


.plp-top-bar .view-toggle-group .btn {
    border-color: var(--border-color);
    color: var(--text-secondary-color);
    padding: 0.375rem 0.6rem; /* Adjust padding for a tighter look if needed */
}
.plp-top-bar .view-toggle-group .btn.active {
    background-color: var(--primary-color); /* Primary color for active button (blue in screenshot) */
    border-color: var(--primary-color);
    color: var(--white-color);
}
.plp-top-bar .view-toggle-group .btn:not(.active):hover {
    background-color: var(--secondary-color); /* Light grey hover for non-active buttons */
}



/* Product Listing Card (for PLP Grid) */

.sidebar-widget.card-style-widget {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-sm);
    padding: 0;
    overflow: hidden;
}

.sidebar-widget.card-style-widget .widget-content-wrapper {
    padding: 1.25rem; /* 20px internal padding */
}
.sidebar-widget.card-style-widget .widget-title {
    padding-bottom: 0.75rem; /* Consistent padding for title bottom */
    margin-bottom: 1rem;    /* Consistent margin after title */
    border-bottom: 1px solid var(--border-light-color); /* Keep this for separation */
    /* The ::after accent line will still work */
}

/* --- Product Listing Page (PLP) Styles --- */
.plp-page-title-area { background-color: var(--secondary-color); background-size: cover; background-position: center center; padding: 2.5rem 0; text-align: center; color: var(--white-color); margin-bottom: var(--section-padding-y); }
.plp-page-title-area .container-marketplace { position: relative; z-index: 1; }
.plp-page-title { font-size: 2.5rem; font-weight: var(--font-weight-bold); margin-bottom: 0.5rem; color: inherit; }
.plp-breadcrumb .breadcrumb { background-color: transparent; padding: 0; margin: 0; justify-content: center; }
.plp-breadcrumb .breadcrumb-item a { color: rgba(var(--white-color-rgb, 255,255,255), 0.8); font-size: var(--font-size-sm); }
.plp-breadcrumb .breadcrumb-item a:hover { color: var(--white-color); text-decoration: underline; }
.plp-breadcrumb .breadcrumb-item.active { color: var(--white-color); font-weight: var(--font-weight-medium); }
.plp-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(var(--white-color-rgb, 255,255,255), 0.6); content: "//"; padding: 0 0.5rem; }
.plp-sidebar .widget-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-light-color); position: relative; }
.plp-sidebar .widget-title::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 50px; height: 2px; background-color: var(--primary-color); }
.categories-widget .category-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.categories-widget .category-item { border-bottom: 1px solid var(--border-light-color); } .categories-widget .category-item:last-child { border-bottom: none; }
.categories-widget .category-link { display: block; padding: 0.625rem 0; font-size: var(--font-size-sm); color: var(--text-secondary-color); text-decoration: none; transition: color 0.2s ease; }
.categories-widget .category-link:hover, .categories-widget .category-item.active > .category-link { color: var(--primary-color); }
.categories-widget .category-link i { font-size: 0.8em; transition: transform 0.2s ease; }
.categories-widget .category-item.active > .category-link i { transform: rotate(0deg); }
.categories-widget .subcategory-list { list-style: none; padding-left: 1rem; margin-top: 0.25rem; margin-bottom: 0.5rem; display: none; }
.categories-widget .subcategory-list li a { display: block; padding: 0.375rem 0; font-size: var(--font-size-xs); color: var(--text-muted-color); }
.categories-widget .subcategory-list li a:hover { color: var(--primary-color); }
.price-range-widget .noUi-target { border: none; background: var(--border-light-color); box-shadow: none; height: 6px; }
.price-range-widget .noUi-connect { background: var(--primary-color); }
.price-range-widget .noUi-handle { border: 2px solid var(--primary-color); border-radius: 50%; background: var(--white-color); box-shadow: var(--box-shadow-sm); width: 18px; height: 18px; right: -9px; top: -6px; cursor: grab; }
.price-range-widget .noUi-handle:focus { outline: none; } .price-range-widget .noUi-handle::before, .price-range-widget .noUi-handle::after { display: none; }
.price-range-widget #price-range-values { text-align: center; }
.price-range-widget .btn-marketplace-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
.price-range-widget .btn-marketplace-primary:hover { background-color: var(--primary-dark-color); border-color: var(--primary-dark-color); }
.price-range-widget .btn-outline-secondary { background-color: var(--text-primary-color); color: var(--white-color); border-color: var(--text-primary-color); }
.price-range-widget .btn-outline-secondary:hover { background-color: #333; border-color: #333; color: var(--white-color); }
.filter-list .form-check { margin-bottom: 0.5rem; }
.filter-list .form-check-input { border-color: var(--border-color); margin-top: 0.2em; }
.filter-list .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.filter-list .form-check-label { font-size: var(--font-size-sm); color: var(--text-secondary-color); padding-left: 0.3rem; }
.recent-product-item { padding: 0.75rem 0; border-bottom: 1px solid var(--border-light-color); }
.recent-product-item:last-child { border-bottom: none; }
.recent-product-img img { width: 50px; height: 50px; object-fit: contain; border-radius: var(--border-radius-sm); border: 1px solid var(--border-light-color); }
.recent-product-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-primary-color); display: block; margin-bottom: 0.1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-product-title:hover { color: var(--primary-color); }
.recent-product-price .current-price { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--primary-color); }
.recent-product-price .original-price { font-size: var(--font-size-xs); color: var(--text-muted-color); text-decoration: line-through; }
.recent-product-info .star-rating i { margin-right: 0; }
.plp-top-bar { border: 1px solid var(--border-light-color); }
.plp-top-bar .form-label { color: var(--text-secondary-color); }
.plp-top-bar .form-select-sm { font-size: var(--font-size-sm); padding-top: 0.375rem; padding-bottom: 0.375rem; }
.plp-top-bar .view-toggle-group .btn { border-color: var(--border-color); color: var(--text-secondary-color); }
.plp-top-bar .view-toggle-group .btn.active { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white-color); }

/* Product Listing Card (PLP Grid) - UPDATED with new buttons */
.product-listing-card {
    background-color: var(--white-color); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); transition: var(--transition-base);
    height: 100%; display: flex; flex-direction: column; position: relative;
    box-shadow: var(--box-shadow-xs);
}
.product-listing-card:hover {
    box-shadow: var(--box-shadow-lg); border-color: var(--primary-color);
    transform: translateY(-3px);
}
.product-listing-card:hover .btn-quick-view-overlay {
    opacity: 1; visibility: visible; transform: translate(-50%, -50%); /* Centered overlay */
}
.product-listing-card-image-wrapper {
    position: relative; aspect-ratio: 1/1; display: flex;
    align-items: center; justify-content: center; padding: 0.5rem;
    background-color: #fdfdfd; border-bottom: 1px solid var(--border-light-color);
    overflow: hidden;
}
.product-listing-card-image-wrapper .product-listing-image-link { display: block; width: 100%; height: 100%; }
.product-listing-card-image { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease-out; }
.product-listing-card:hover .product-listing-card-image { transform: scale(1.05); }
.product-listing-card .badge-sales-vertical {
    position: absolute; top: 0; left: -1px; background-color: var(--danger-color);
    color: var(--white-color); font-size: 0.6875rem; font-weight: var(--font-weight-bold);
    padding: 0.75rem 0.2rem 0.75rem 0.3rem; writing-mode: vertical-rl;
    text-orientation: mixed; transform: rotate(180deg);
    border-top-right-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm);
    line-height: 1; z-index: 1; white-space: nowrap;
}
.product-listing-card .btn-wishlist-listing {
    position: absolute; top: 0.5rem; right: 0.5rem; background-color: rgba(var(--white-color-rgb), 0.8);
    border: 1px solid var(--border-light-color); border-radius: 50%;
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary-color); font-size: 0.9rem; transition: var(--transition-base);
    box-shadow: var(--box-shadow-xs); z-index: 2; /* Above sales badge if overlaps */
}
.product-listing-card .btn-wishlist-listing:hover,
.product-listing-card .btn-wishlist-listing.active { color: var(--danger-color); background-color: var(--white-color); border-color: var(--danger-color); }

/* Quick View Button Overlay */
.btn-quick-view-overlay {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, 20px); /* Start below center, slide up */
    background-color: rgba(var(--black-color-rgb, 0,0,0), 0.7);
    color: var(--white-color);
    border: none;
    border-radius: var(--border-radius-md);
    padding: 0.5rem 1rem; /* 8px 16px */
    font-size: var(--font-size-xs); /* 12px */
    font-weight: var(--font-weight-medium);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
    z-index: 3; /* Above image */
    display: inline-flex;
    align-items: center;
}
.btn-quick-view-overlay i { margin-right: 0.375rem; }
.btn-quick-view-overlay:hover { background-color: rgba(var(--black-color-rgb, 0,0,0), 0.9); }

.product-listing-card-content {
    padding: 0.75rem; text-align: center; flex-grow: 1;
    display: flex; flex-direction: column; justify-content: space-between;
}
.product-listing-card-title {
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
    color: var(--text-primary-color); line-height: 1.4; margin-bottom: 0.375rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(1.4em * 2);
}
.product-listing-card-title a { color: inherit; text-decoration: none; }
.product-listing-card-title a:hover { color: var(--primary-color); }
.product-listing-card-price { margin-bottom: 0.375rem; }
.product-listing-card-price .current-price { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--primary-color); }
.product-listing-card-price .original-price { font-size: var(--font-size-xs); color: var(--text-muted-color); text-decoration: line-through; margin-left: 0.375rem; }
.product-listing-card-rating { font-size: var(--font-size-xs); color: var(--text-muted-color); }
.product-listing-card-rating i.fa-star { color: var(--warning-color); margin-right: 0.1rem; }

/* Add to Cart Button (PLP card) */
.btn-add-to-cart-listing {
    background-color: var(--primary-light-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-light-color);
    font-weight: var(--font-weight-medium);
    padding: 0.5rem 0.75rem; /* Adjust padding */
    font-size: var(--font-size-xs);
    width: 100%; /* Full width within its content area */
    border-radius: var(--border-radius-sm);
    transition: var(--transition-base);
}
.btn-add-to-cart-listing:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}
.btn-add-to-cart-listing i { font-size: 0.9em; }


#productListingGrid.list-view-active .product-listing-card { flex-direction: row; align-items: center; text-align: left; }
#productListingGrid.list-view-active .product-listing-card-image-wrapper { flex-shrink: 0; width: 120px; height: 120px; aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--border-light-color); padding: 0.5rem; }
#productListingGrid.list-view-active .product-listing-card-image { max-height: 100%; }
#productListingGrid.list-view-active .product-listing-card-content { padding: 0.75rem 1rem; }
#productListingGrid.list-view-active .product-listing-card-title { min-height: auto; margin-bottom: 0.5rem; }
#productListingGrid.list-view-active .btn-add-to-cart-listing { width: auto; /* Not full width in list view */ }

.pagination .page-item .page-link { color: var(--text-secondary-color); border-color: var(--border-light-color); margin: 0 2px; border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); }
.pagination .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white-color); z-index: 3; }
.pagination .page-item.disabled .page-link { color: var(--text-muted-color); background-color: var(--border-light-color); }
.pagination .page-item .page-link:hover { background-color: var(--secondary-color); border-color: var(--border-color); color: var(--primary-color); }

.plp-newsletter-section { background-color: var(--secondary-color); padding: var(--section-padding-y) 0; text-align: center; margin-top: var(--section-padding-y); }
.newsletter-title { font-size: 1.75rem; font-weight: var(--font-weight-bold); margin-bottom: 1.5rem; color: var(--text-primary-color); }
.newsletter-form { display: flex; max-width: 500px; margin: 0 auto; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; box-shadow: var(--box-shadow-sm); }
.newsletter-form .form-control { border: none; border-radius: 0; padding: 0.75rem 1rem; font-size: var(--font-size-base); }
.newsletter-form .form-control:focus { box-shadow: none; }
.newsletter-form .btn-dark-custom { background-color: var(--text-primary-color); color: var(--white-color); border: none; border-radius: 0; padding: 0.75rem 1.5rem; font-weight: var(--font-weight-medium); transition: background-color 0.2s ease; }
.newsletter-form .btn-dark-custom:hover { background-color: #333; }

/* Media Queries for PLP - (As previously provided) */
@media (max-width: 991.98px) { .plp-sidebar { margin-bottom: 2rem; } }
@media (max-width: 767.98px) { /* ... (existing mobile styles) ... */ }

/* ---PDP Specific Styles (ensure these are present and correct from previous PDP CSS)--- */
.pdp-page-container { background-color: var(--secondary-color); }
.pdp-breadcrumb .breadcrumb-item a { color: var(--text-secondary-color); font-size: var(--font-size-sm); }
/* ... (All other PDP styles from previous complete response) ... */
.pdp-main-layout { /* This is the white card for product info and gallery */ }
.pdp-gallery-column .pdp-image-gallery-sticky { position: sticky; top: calc(var(--header-height) + 20px); }
.pdp-main-image-slider-wrapper .slick-slide img { max-height: 450px; margin: 0 auto; object-fit: contain; }
.pdp-main-slick-arrow { background-color: rgba(var(--black-color-rgb, 0,0,0), 0.35); color: var(--white-color); border: none; border-radius: 50%; width: 40px; height: 40px; z-index: 10; transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; }
.pdp-main-slick-arrow:hover { background-color: rgba(var(--black-color-rgb, 0,0,0), 0.6); }
.pdp-main-image-slider-wrapper .slick-prev { left: 15px; } .pdp-main-image-slider-wrapper .slick-next { right: 15px; }
.pdp-thumbnail-slider-wrapper { margin-top: 0.75rem; }
.pdp-thumbnail-slider .slick-slide { padding: 0 4px; cursor: pointer; }
.pdp-thumbnail-slider img { border: 2px solid var(--border-light-color); border-radius: var(--border-radius-sm); transition: border-color 0.2s ease; height: 70px; width: 100%; object-fit: cover; }
.pdp-thumbnail-slider .slick-current img { border-color: var(--primary-color); }
.pdp-info-column .pdp-title { line-height: 1.3; margin-bottom: 0.25rem !important; }
.pdp-info-column .pdp-meta-info .pdp-brand a:hover { text-decoration: underline; }
.pdp-info-column .pdp-rating-reviews .star-rating i { font-size: 0.9em; }
.pdp-info-column .pdp-rating-reviews a:hover { text-decoration: underline; }
.pdp-info-column .pdp-price-block .pdp-current-price { color: var(--danger-color); }
.pdp-info-column .pdp-price-block .pdp-discount-badge { font-weight: var(--font-weight-semibold); }
.bg-success-soft { background-color: rgba(var(--success-rgb, 32,201,151), 0.1); }
.bg-danger-soft { background-color: rgba(var(--danger-rgb, 220,53,69), 0.1); }
.pdp-info-column .variant-group .form-label { margin-bottom: 0.3rem; }
.pdp-info-column .variant-options.color-swatches { display: flex; gap: 0.5rem; }
.pdp-info-column .variant-swatch.color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-color); cursor: pointer; transition: var(--transition-base); padding: 0; outline: none; }
.pdp-info-column .variant-swatch.color:hover { transform: scale(1.1); }
.pdp-info-column .variant-swatch.color.active { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--white-color), 0 0 0 4px var(--primary-color); }
.pdp-info-column .form-select-sm { font-size: var(--font-size-sm); padding: 0.375rem 1.5rem 0.375rem 0.75rem; }
.pdp-info-column .pdp-stock-status { font-weight: var(--font-weight-medium); padding: 0.3em 0.6em; }
.pdp-info-column .pdp-quantity-selector .quantity-btn { min-width: 30px; border-color: var(--border-color); }
.pdp-info-column .pdp-quantity-selector .quantity-input { border-left: none; border-right: none; height: calc(1.5em + 0.5rem + 2px); }
.pdp-info-column .pdp-actions-row .btn-lg { padding: 0.6rem 1.25rem; font-size: var(--font-size-base); }
.pdp-info-column .pdp-wishlist-btn { border-color: var(--border-color); }
.pdp-info-column .pdp-wishlist-btn:hover, .pdp-info-column .pdp-wishlist-btn.active { background-color: rgba(var(--danger-rgb), 0.05); border-color: var(--danger-color); color: var(--danger-color); }
.pdp-info-column .pdp-seller-info-box a:hover { text-decoration: underline; }
.pdp-info-column .pdp-delivery-info .input-group .form-control { border-right: none; }
.pdp-info-column .pdp-delivery-info .input-group .btn { border-left: none; border-color: var(--border-color); }
.pdp-info-column .pdp-social-share .social-icon { margin-right: 0.75rem; font-size: 1.1rem; }
.pdp-info-column .pdp-social-share .social-icon:hover { color: var(--primary-color); }
.pdp-details-tabs-section {}
.pdp-custom-tabs { border-bottom: 1px solid var(--border-color); margin-bottom: 0; }
.pdp-custom-tabs .nav-link { color: var(--text-secondary-color); font-weight: var(--font-weight-medium); border: none; border-bottom: 3px solid transparent; padding: 0.75rem 1.25rem; font-size: var(--font-size-base); border-radius: 0; }
.pdp-custom-tabs .nav-link:hover { color: var(--primary-color); border-bottom-color: var(--primary-light-color); }
.pdp-custom-tabs .nav-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background-color: transparent; }
.pdp-details-tabs-section .tab-content { min-height: 250px; font-size: var(--font-size-sm); }
.pdp-details-tabs-section .tab-content h5 { font-weight: var(--font-weight-semibold); color: var(--text-primary-color); margin-bottom: 0.75rem; }
.pdp-details-tabs-section .tab-content h6 { font-weight: var(--font-weight-medium); margin-top: 1rem; margin-bottom: 0.5rem; }
.pdp-details-tabs-section .tab-content ul { padding-left: 1.25rem; }
.pdp-details-tabs-section .tab-content ul li { margin-bottom: 0.3rem; }
.pdp-details-tabs-section table th { background-color: var(--secondary-color); font-weight: var(--font-weight-medium); }

.related-products-section .product-carousel-slick-arrow,
.related-products-section .related-controls button { background-color: var(--white-color); color: var(--text-secondary-color); border: 1px solid var(--border-color); box-shadow: var(--box-shadow-sm); width: 40px; height: 40px; z-index: 10; border-radius: 50%; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; }
.related-products-section .product-carousel-slick-arrow:hover,
.related-products-section .related-controls button:hover { background-color: var(--primary-color); color: var(--white-color); border-color: var(--primary-color); }
.related-products-section .container-fluid { position: relative; }
.related-products-section .slick-prev.related-prev { left: 0px; }
.related-products-section .slick-next.related-next { right: 0px; }
.related-products-section .related-controls { position: absolute; top: -50px; right: 0; }

@media (max-width: 991.98px) { .pdp-gallery-column .pdp-image-gallery-sticky { position: static; } }
@media (max-width: 767.98px) {
    .pdp-main-layout { padding: 1rem; }
    .pdp-info-column .pdp-title { font-size: 1.25rem; }
    .pdp-info-column .pdp-price-block .pdp-current-price { font-size: 1.75rem; }
    .pdp-info-column .pdp-actions-row { flex-direction: column; }
    .pdp-info-column .pdp-actions-row .btn-lg { width: 100%; }
    .pdp-info-column .pdp-wishlist-btn { width: 100% !important; margin-top: 0.5rem; }
    .pdp-custom-tabs .nav-link { font-size: var(--font-size-sm); padding: 0.6rem 0.75rem; }
    .pdp-details-tabs-section .tab-content { padding: 1rem; }
    /* Ensure other mobile styles from the full CSS are here too */
    .header-marketplace-actions .action-item span:not(.cart-count) { display: none; }
    .header-marketplace-actions .login-item span { display: inline-block; }
    .header-marketplace .container-marketplace { gap: 0.75rem; }
    .header-marketplace-actions { gap: 1rem; } .header-marketplace-logo img { height: 28px; }
    .header-marketplace-search { border-radius: var(--border-radius); }
    .header-marketplace-search input[type="text"] { padding: 0.5rem 0.75rem; }
    .header-marketplace-search button { padding: 0 1rem; } .header-marketplace-search button i { font-size: var(--font-size-sm); }
    .category-grid-items { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 1rem; }
    .category-icon-image img { width: 50px; height: 50px; } .category-name { font-size: var(--font-size-xs); }
    .product-carousel-item { width: 220px; }
    .section-header .section-title { font-size: var(--font-size-lg) !important; }
    .product-carousel-controls { display: none; }
}
@media (max-width: 575.98px) {
    .product-carousel-item { width: calc(80% - 0.5rem); }
    .product-carousel-wrapper { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links, .payment-methods { margin-bottom: 0.5rem; }
    .hero-slider-section, .category-icons-grid-section, .trending-products-section,
    .deal-grid-section, .promo-banners-grid-section, .single-full-width-banner-section,
    .product-grid-section {
        padding-top: calc(var(--section-padding-y) / 1.5);
        padding-bottom: calc(var(--section-padding-y) / 1.5);
        margin-bottom: calc(var(--section-padding-y) / 1.5);
    }
    .section-header { padding: 0.75rem 1rem !important; }
}
/* ==========================================================================
   Cart Page Specific Styles
   ========================================================================== */

/* Overall Cart Page Content Area Background */
.cart-page-content {
    background-color: var(--secondary-color); /* Light grey background for the main content area */
    /* section-padding class is assumed to provide top/bottom padding for this section */
}

/* Page Title Area for Cart (Simple version) */
.page-title-area-simple {
    background-color: var(--bs-light); /* Using Bootstrap's bg-light variable if you added it to the class */
    /* Or use your own: background-color: var(--white-color); or var(--secondary-color); */
    border-bottom: 1px solid var(--border-light-color);
    padding-top: 50px;
    padding-bottom: 50px;
    /* The class .section-padding-sm will handle its own top/bottom padding */
    /* No margin-bottom here; we'll add margin-top to the next section */
}

/* Ensure content within .page-title-area-simple is aligned if needed */
.page-title-area-simple .container-marketplace {
    /* Default container behavior is usually fine */
}

.page-title-area-simple .page-main-title {
    color: var(--text-primary-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    margin-bottom: 0.25rem;
}
.page-title-area-simple .page-breadcrumb .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
}
.page-title-area-simple .page-breadcrumb .breadcrumb-item a {
    color: var(--text-secondary-color);
    font-size: var(--font-size-sm);
}
.page-title-area-simple .page-breadcrumb .breadcrumb-item a:hover {
    color: var(--primary-color);
}
.page-title-area-simple .page-breadcrumb .breadcrumb-item.active {
    color: var(--text-primary-color);
    font-weight: var(--font-weight-normal);
}
.page-title-area-simple .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted-color);
}


/* Card Styling for main blocks on Cart Page */
/* This assumes .card-style-widget and .widget-content-wrapper are defined globally for sidebar widgets
   If not, you can define them here or ensure they are in your style.css / main marketplace.css */
.cart-items-block.card-style-widget,
.order-summary-block.card-style-widget {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-md);
    padding: 0; /* Padding handled by inner wrapper */
    margin-bottom: 1.5rem; /* Space between cards if stacked on mobile */
}
.cart-items-block.card-style-widget:last-child,
.order-summary-block.card-style-widget:last-child {
    margin-bottom: 0;
}

.cart-items-block.card-style-widget .widget-content-wrapper,
.order-summary-block.card-style-widget .widget-content-wrapper {
    padding: 1.5rem; /* e.g., 24px */
}

/* Titles within these main cards */
.cart-items-block.card-style-widget .widget-title,
.order-summary-block.card-style-widget .widget-title {
    font-size: var(--font-size-lg);
    color: var(--text-primary-color);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light-color);
    position: relative;
}
.cart-items-block.card-style-widget .widget-title::after,
.order-summary-block.card-style-widget .widget-title::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Align with border */
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--primary-color); /* Primary color for accent line */
}


/* Cart Items Table-like Layout */
.cart-items-table {
    /* Acts as a container for item rows */
}
.cart-item-row {
    display: flex;
    align-items: center; /* Vertically align items in the row */
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light-color);
}
.cart-item-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cart-item-col-product {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Takes most space */
    padding-right: 1rem; /* Space before quantity */
    min-width: 0; /* For flex text truncation */
}
.cart-item-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-light-color);
}
.cart-item-details {
    padding-left: 1rem;
}
.cart-item-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary-color);
    margin-bottom: 0.25rem;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-title a { color: inherit; text-decoration: none; }
.cart-item-title a:hover { color: var(--primary-color); }
.cart-item-meta { font-size: var(--font-size-xs); color: var(--text-muted-color); }
.cart-item-price-single {
    color: var(--text-secondary-color); /* Muted color for single item price */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}
.cart-item-price-single .text-danger { /* If showing discounted single price */
    font-weight: var(--font-weight-medium);
}


.cart-item-col-quantity {
    flex-shrink: 0;
    width: 120px; /* Adjust as needed */
    text-align: center;
}
.quantity-selector-cart .form-control.quantity-input-cart {
    height: 32px;
    font-size: var(--font-size-sm);
    padding-left: 0.25rem; padding-right: 0.25rem;
    border-color: var(--border-color);
    box-shadow: none;
    text-align: center;
}
.quantity-selector-cart .btn.quantity-btn-cart {
    padding: 0.25rem 0.6rem;
    font-size: var(--font-size-sm);
    border-color: var(--border-color);
    color: var(--text-secondary-color);
    background-color: var(--white-color); /* Ensure buttons are clearly clickable */
}
.quantity-selector-cart .btn.quantity-btn-cart:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.cart-item-col-subtotal {
    flex-shrink: 0;
    width: 100px; /* Adjust as needed */
    text-align: right;
    font-size: var(--font-size-base);
    color: var(--text-primary-color);
    font-weight: var(--font-weight-semibold); /* Bolder subtotal like reference */
    padding-left: 1rem; /* Space before remove button */
}

.cart-item-col-remove {
    flex-shrink: 0;
    width: 30px; /* Compact remove button */
    text-align: right;
}
.cart-item-remove {
    padding: 0.25rem; /* Make clickable area slightly larger */
}
.cart-item-remove i {
    font-size: 1.1rem; /* Red X icon size */
    color: var(--danger-color); /* Red color for X */
    transition: var(--transition-fast);
}
.cart-item-remove:hover i {
    opacity: 0.7;
    transform: scale(1.1);
}

.cart-actions {
    /* Styles for Continue Shopping / Clear Cart buttons */
}
.cart-actions .btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-secondary-color);
}
.cart-actions .btn-outline-secondary:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}
.cart-actions .btn-outline-danger {
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.cart-actions .btn-outline-danger:hover {
    background-color: var(--danger-color);
    color: var(--white-color);
}

/* Order Summary */
.order-summary-block .summary-item span:first-child {
    color: var(--text-secondary-color);
    font-size: var(--font-size-sm);
}
.order-summary-block .summary-item .summary-value {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--text-primary-color);
}
.order-summary-block .summary-item .summary-value.text-success {
    color: var(--success-color) !important;
}
.order-summary-block .summary-item.h5 span { /* For "Total" row */
    color: var(--text-primary-color);
    font-size: var(--font-size-lg); /* Larger total */
    font-weight: var(--font-weight-bold);
}
.order-summary-block hr {
    border-top-color: var(--border-color);
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.order-summary-block .coupon-form .form-label {
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
}
.order-summary-block .coupon-form .form-control-sm {
    border-right: none;
    border-color: var(--border-color);
    box-shadow: none;
    font-size: var(--font-size-sm);
}
.order-summary-block .coupon-form .coupon-apply-btn {
    border-left: none;
    border-color: var(--border-color);
    color: var(--text-secondary-color); /* Matches "Apply" text in reference */
    background-color: var(--white-color); /* White background for apply button */
    font-size: var(--font-size-sm);
}
.order-summary-block .coupon-form .coupon-apply-btn:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}
.order-summary-block .btn-marketplace-primary {
    font-size: var(--font-size-base); /* Primary button size */
    padding: 0.75rem 1.25rem; /* Larger padding for primary button */
    font-weight: var(--font-weight-medium);
}
.order-summary-block .secure-checkout-info {
    /* Styles already in global or okay as is */
}
.order-summary-block .secure-checkout-info i {
    color: var(--success-color);
}

/* Responsive adjustments for cart page */
@media (max-width: 767.98px) {
    .cart-item-row {
        flex-wrap: wrap;
        position: relative;
        padding-bottom: 0.75rem; /* Ensure space below wrapped items */
    }
    .cart-item-col-product {
        flex-basis: 100%;
        margin-bottom: 0.75rem;
    }
    .cart-item-image img { width: 50px; height: 50px; }
    .cart-item-col-quantity {
        flex-basis: calc(60% - 0.5rem);
        order: 2;
        padding: 0; margin: 0;
        justify-content: flex-start;
        margin-bottom: 0.5rem; /* Space below quantity on mobile */
    }
    .quantity-selector-cart { max-width: 130px; }
    .cart-item-col-subtotal {
        flex-basis: calc(40% - 0.5rem);
        order: 3;
        padding: 0; margin: 0;
        font-size: var(--font-size-sm);
        text-align: right !important;
        margin-bottom: 0.5rem; /* Space below subtotal on mobile */
    }
    .cart-item-col-remove {
        position: absolute;
        top: 0.5rem; /* Adjust for better alignment */
        right: 0rem;
        order: 1;
        width: auto;
        z-index: 5; /* Ensure it's clickable */
    }
    .order-summary-block.sticky-lg-top {
        position: static !important;
    }
    .cart-actions {
        flex-direction: column;
        gap: 0.75rem; /* Increased gap */
        align-items: stretch;
    }
}
@media (max-width: 575.98px) {
    .cart-item-col-quantity {
        flex-basis: 100%;
    }
    .cart-item-col-subtotal {
        flex-basis: 100%;
        text-align: left !important;
        margin-top: 0.25rem; /* Space above subtotal when it's below quantity */
    }
    .page-title-area-simple .page-main-title { font-size: 1.5rem; } /* Smaller title on very small screens */
}
/* assets/css/marketplace.css */

/* ... (All your existing styles for header, footer, nav, homepage cards, PLP, etc.) ... */

/* ==========================================================================
   Checkout Page Specific Styles
   ========================================================================== */

.checkout-page-content {
    background-color: var(--secondary-color); /* Light grey background for the main content area */
}

/* Page Title Area for Checkout (Shared with cart if same style) */
.page-title-area-simple { /* This class is used for Cart and Checkout title bars */
    background-color: var(--white-color); /* Or var(--bs-light) */
    border-bottom: 1px solid var(--border-light-color);
    /* .section-padding-sm handles its own top/bottom padding */
}
.page-title-area-simple .page-main-title {
    color: var(--text-primary-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    margin-bottom: 0.25rem;
}
.page-title-area-simple .page-breadcrumb .breadcrumb {
    background-color: transparent; padding: 0; margin-bottom: 0;
}
.page-title-area-simple .page-breadcrumb .breadcrumb-item a {
    color: var(--text-secondary-color); font-size: var(--font-size-sm);
}
.page-title-area-simple .page-breadcrumb .breadcrumb-item a:hover { color: var(--primary-color); }
.page-title-area-simple .page-breadcrumb .breadcrumb-item.active {
    color: var(--text-primary-color); font-weight: var(--font-weight-normal);
}
.page-title-area-simple .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted-color);
}


/* Main Card Styles for Checkout Steps and Order Summary */
.checkout-steps-wrapper.card-style-widget,
.order-summary-block.card-style-widget {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg); /* More prominent shadow for main blocks */
    padding: 0; /* Padding handled by .widget-content-wrapper */
    margin-bottom: 1.5rem;
}
.checkout-steps-wrapper.card-style-widget:last-child,
.order-summary-block.card-style-widget:last-child {
    margin-bottom: 0;
}

.checkout-steps-wrapper.card-style-widget .widget-content-wrapper,
.order-summary-block.card-style-widget .widget-content-wrapper {
    padding: 1.75rem; /* Slightly more padding for checkout main cards (e.g., 28px) */
}

.checkout-steps-wrapper.card-style-widget .widget-title {
    font-size: 1.375rem; /* e.g., 22px */
    color: var(--text-primary-color);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light-color);
    position: relative;
}
.checkout-steps-wrapper.card-style-widget .widget-title::after { /* Accent line */
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 70px; height: 3px; background-color: var(--primary-color);
}
.order-summary-block.card-style-widget .widget-title { /* Same as above for consistency */
    font-size: 1.375rem; color: var(--text-primary-color); font-weight: var(--font-weight-bold);
    margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-light-color); position: relative;
}
.order-summary-block.card-style-widget .widget-title::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 70px; height: 3px; background-color: var(--primary-color);
}


/* Checkout Step Indicator */
.checkout-steps-indicator {
    list-style: none; padding: 0;
    /* border-bottom: 1px solid var(--border-light-color); -- Moved to hr */
    /* padding-bottom: 1rem; */
}
.checkout-steps-indicator .step-item {
    text-align: center; color: var(--text-muted-color); flex: 1; position: relative;
}
.checkout-steps-indicator .step-item::before { /* Connector line */
    content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px;
    background-color: var(--border-color); z-index: 0;
}
.checkout-steps-indicator .step-item:first-child::before { display: none; }
.checkout-steps-indicator .step-icon {
    width: 40px; height: 40px; border-radius: 50%; background-color: var(--white-color);
    border: 2px solid var(--border-color); color: var(--text-muted-color);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.375rem; font-size: 1.1rem; position: relative; z-index: 1;
    transition: all 0.3s ease;
}
.checkout-steps-indicator .step-label { transition: color 0.3s ease; }

.checkout-steps-indicator .step-item.active .step-icon { /* Completed or Current */
    border-color: var(--primary-color); background-color: var(--primary-color); color: var(--white-color);
}
.checkout-steps-indicator .step-item.active .step-label {
    color: var(--text-primary-color); /* Label for completed step */
}
.checkout-steps-indicator .step-item.current .step-icon { /* Specific for current step if different */
    /* background-color: var(--primary-dark-color); */ /* Example if current is darker */
    /* border-color: var(--primary-dark-color); */
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.2); /* Glow for current */
}
.checkout-steps-indicator .step-item.current .step-label {
    font-weight: var(--font-weight-semibold); color: var(--primary-color);
}
.checkout-steps-indicator .step-item.active::before { /* Color connector line for active/completed */
    background-color: var(--primary-color);
}

/* Address & Shipping Method Selection (List Group Radio) */
.list-group-radio .list-group-item {
    cursor: pointer; padding: 0.75rem 1.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    border-color: var(--border-light-color);
}
.list-group-radio .list-group-item:hover { background-color: var(--primary-light-color); }
.list-group-radio .form-check-input { margin-top: 0.3em; margin-right: 0.75em; }
.list-group-radio .form-check-input:checked + .form-check-label { /* font-weight: var(--font-weight-medium); */ }
.list-group-radio .list-group-item input:checked {
    /* border-color: var(--primary-color) !important; */
    /* background-color: var(--primary-color) !important; */
}
.list-group-radio .list-group-item.active-selection { /* JS can add this class */
    border-color: var(--primary-color) !important;
    background-color: var(--primary-light-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}
.list-group-radio .list-group-item .badge { font-size: 0.7em; padding: 0.25em 0.5em; }


/* Checkout Forms */
.checkout-steps-wrapper form .form-control-sm,
.checkout-steps-wrapper form .form-select-sm {
    font-size: var(--font-size-sm); padding: 0.4rem 0.75rem;
    border-color: var(--border-color);
}
.checkout-steps-wrapper form .form-control-sm:focus,
.checkout-steps-wrapper form .form-select-sm:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
}
.checkout-steps-wrapper form .form-label { font-size: var(--font-size-sm); margin-bottom: 0.3rem; color: var(--text-secondary-color); }
.checkout-steps-wrapper form .form-label .text-danger { font-weight: normal; }


/* Payment Method Selection */
.payment-method-option .form-check-input {
    margin-top: 0.5em;
}
.payment-method-option .payment-method-icon {
    max-height: 24px; margin-left: 0.5rem;
}
.payment-method-details { /* For CC form etc. */
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    margin-top: 0.5rem;
}

/* Order Review Section */
.order-review-section .review-item {
    padding-bottom: 0.75rem; margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border-light-color);
}
.order-review-section .review-item:last-child { border-bottom: none; margin-bottom: 0; }
.order-review-section .review-item-label { font-weight: var(--font-weight-medium); color: var(--text-primary-color); }
.order-review-section .review-item-value { color: var(--text-secondary-color); }
.order-review-section .review-edit-link { font-size: var(--font-size-xs); }
.order-review-section .product-review-item img { width: 50px; height: 50px; object-fit: cover; border-radius: var(--border-radius-sm); }


/* Order Summary in Checkout (Simplified Item List) */
.checkout-summary-items .summary-cart-item {
    border-bottom: 1px dashed var(--border-light-color);
    padding-bottom: 0.75rem; margin-bottom: 0.75rem !important;
}
.checkout-summary-items .summary-cart-item:last-child { border-bottom: none; margin-bottom: 0 !important; padding-bottom: 0; }
.checkout-summary-items .summary-cart-item h6 {
    line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.order-summary-block .summary-item span:first-child { color: var(--text-secondary-color); font-size: var(--font-size-sm); }
.order-summary-block .summary-item .summary-value { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--text-primary-color); }
.order-summary-block .summary-item .summary-value.text-success { color: var(--success-color) !important; }
.order-summary-block .summary-item.h5 span { color: var(--text-primary-color); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.order-summary-block hr { border-top-color: var(--border-color); margin-top: 1rem; margin-bottom: 1rem; }
.order-summary-block .coupon-form .form-label { color: var(--text-secondary-color); font-weight: var(--font-weight-normal); font-size: var(--font-size-sm); }
.order-summary-block .coupon-form .form-control-sm { border-right: none; border-color: var(--border-color); box-shadow: none; font-size: var(--font-size-sm); }
.order-summary-block .coupon-form .coupon-apply-btn { border-left: none; border-color: var(--border-color); color: var(--text-secondary-color); background-color: var(--white-color); font-size: var(--font-size-sm); }
.order-summary-block .coupon-form .coupon-apply-btn:hover { background-color: var(--secondary-color); color: var(--primary-color); }
.order-summary-block .btn-marketplace-primary { font-size: var(--font-size-base); padding: 0.75rem 1.25rem; font-weight: var(--font-weight-medium); }
.order-summary-block .secure-checkout-info i { color: var(--success-color); }


/* Responsive adjustments for checkout page */
@media (max-width: 767.98px) {
    .checkout-steps-indicator .step-label { display: none; }
    .checkout-steps-indicator .step-icon { width: 36px; height: 36px; font-size: 1rem; }
    .checkout-steps-indicator .step-item::before { top: 16px; }
    .checkout-steps-wrapper.card-style-widget .widget-title { font-size: var(--font-size-lg); }
    .order-summary-block.sticky-lg-top { position: static !important; margin-top: 1.5rem; /* Add space if it stacks */ }
}
/* --- Auth Page (Login/Register) Styles --- */
.auth-page-content {
    background-color: var(--secondary-color); /* Light grey page background */
}

.auth-card.card-style-widget {
    max-width: 550px; /* Max width for the auth card */
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--box-shadow-lg); /* More prominent shadow */
}
.auth-card.card-style-widget .widget-content-wrapper {
    padding: 2rem; /* e.g., 32px */
}
.auth-card .widget-title { /* For "Welcome Back!" and "Create Your Account" */
    font-size: var(--font-size-xl); /* Larger title */
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    border-bottom: none; /* No border for these titles */
    padding-bottom: 0;
    margin-bottom: 1.5rem !important; /* Space after title */
}
.auth-card .widget-title::after {
    display: none; /* No accent line for these titles */
}

/* Tab Navigation */
.auth-card .nav-pills .nav-link {
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-md); /* Rounded tabs */
    padding: 0.6rem 1rem;
    font-size: var(--font-size-base);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.auth-card .nav-pills .nav-link.active,
.auth-card .nav-pills .show > .nav-link {
    color: var(--white-color);
    background-color: var(--primary-color);
    box-shadow: var(--box-shadow-sm);
}
.auth-card .nav-pills .nav-link:not(.active):hover {
    background-color: var(--primary-light-color);
    color: var(--primary-color);
}

/* Form elements */
.auth-card form .form-label {
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-medium);
}
.auth-card form .form-control-sm {
    padding: 0.5rem 0.75rem; /* Slightly larger sm inputs */
    border-color: var(--border-color);
}
.auth-card form .form-control-sm:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
}
.auth-card .btn-password-toggle {
    border-left: none;
    color: var(--text-muted-color);
}
.auth-card .btn-password-toggle:hover {
    color: var(--primary-color);
}
.auth-card .form-check-label a,
.auth-card p a {
    text-decoration: none;
}
.auth-card p a:hover {
    text-decoration: underline;
}

/* Password Strength Meter */
.password-strength-meter {
    /* Styles set in previous response or are fine */
}
.password-strength-meter .strength-bar {
    height: 6px;
    background-color: var(--border-light-color);
    border-radius: var(--border-radius-pill);
    transition: width 0.3s ease, background-color 0.3s ease;
}
.password-strength-meter .strength-bar.weak { background-color: var(--danger-color); }
.password-strength-meter .strength-bar.medium { background-color: var(--warning-color); }
.password-strength-meter .strength-bar.strong { background-color: #52c41a; } /* Bright Green */
.password-strength-meter .strength-bar.very-strong { background-color: var(--success-color); }
.password-strength-meter .strength-text {
    display: block;
    text-align: right;
    font-weight: var(--font-weight-medium);
}
.password-strength-meter .strength-text.weak { color: var(--danger-color); }
.password-strength-meter .strength-text.medium { color: var(--warning-color); }
.password-strength-meter .strength-text.strong { color: #52c41a; }
.password-strength-meter .strength-text.very-strong { color: var(--success-color); }


/* Social Login */
.social-login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted-color);
}
.social-login-divider::before,
.social-login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-light-color);
}
.social-login-divider:not(:empty)::before {
    margin-right: .5em;
}
.social-login-divider:not(:empty)::after {
    margin-left: .5em;
}
.btn-social-login {
    font-weight: var(--font-weight-medium);
    border-color: var(--border-color);
    color: var(--text-primary-color);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.btn-social-login:hover {
    background-color: var(--secondary-color);
}
.btn-social-login.btn-google:hover { border-color: #DB4437; color: #DB4437; }
.btn-social-login.btn-facebook:hover { border-color: #3b5998; color: #3b5998; }
.btn-social-login i { font-size: 1.1em; }

/* Responsive */
@media (max-width: 575.98px) {
    .auth-card.card-style-widget .widget-content-wrapper {
        padding: 1.5rem;
    }
    .auth-card .widget-title {
        font-size: var(--font-size-lg);
    }
    .auth-card .nav-pills .nav-link {
        font-size: var(--font-size-sm);
        padding: 0.5rem 0.75rem;
    }
}
/* ==========================================================================
   Become a Seller Page Styles
   ========================================================================== */

/* Seller Hero Section */
.seller-hero-section {
    background-color: var(--primary-dark-color); /* Darker primary for impact, adjust as needed */
    /* Example background image:
    background-image: linear-gradient(rgba(var(--primary-rgb),0.7), rgba(var(--primary-rgb),0.9)), url('../assets/images/seller-hero-bg-abstract.jpg');
    background-size: cover;
    background-position: center center;
    */
    padding: 5rem 0; /* More padding */
    color: var(--white-color);
}
.seller-hero-section .display-4 {
    margin-bottom: 1.5rem; /* More space after main title */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.seller-hero-section .lead {
    max-width: 750px; /* Wider lead text */
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
    font-size: 1.125rem; /* Slightly larger lead */
    margin-bottom: 2rem; /* More space before button */
}
.seller-hero-section .btn-marketplace-accent {
    padding: 0.9rem 2.5rem; /* Larger button */
    font-size: 1.15rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.seller-hero-section .btn-marketplace-accent:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}


/* General Section Title for this page (if different from global .section-main-title) */
.seller-page-content .section-main-title {
    font-size: 2.25rem; /* e.g., 36px */
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    margin-bottom: 0.75rem;
}
.seller-page-content .lead.text-muted {
    font-size: var(--font-size-md);
    margin-bottom: 0;
}


/* Benefits Section */
.benefits-section.bg-light {
    background-color: var(--secondary-color) !important; /* Use a very light grey */
}
.benefit-item.card-style-widget {
    /* Uses existing .card-style-widget for basic card appearance */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-color: var(--border-light-color); /* Lighter border for these cards */
}
.benefit-item.card-style-widget:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-lg);
    border-color: var(--primary-color);
}
.benefit-item.card-style-widget .widget-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.benefit-icon i {
    color: var(--primary-color); /* Explicitly set icon color */
    transition: transform 0.3s ease;
}
.benefit-item.card-style-widget:hover .benefit-icon i {
    transform: scale(1.1);
}
.benefit-item.card-style-widget .fs-sm {
    flex-grow: 1; /* Make paragraph take space to align titles if heights vary */
}


/* How It Works Section */
.how-it-works-section {
    /* Styles for this section */
}
.how-it-works-section .step-item {
    position: relative;
    border: 1px solid var(--border-light-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    transition: var(--transition-base);
}
.how-it-works-section .step-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-md);
    border-color: var(--border-color);
}
.how-it-works-section .step-number {
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 40px;
    border-radius: 50%;
    background-color: var(--primary-light-color);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    border: 2px solid var(--primary-color);
    margin-bottom: 1rem; /* Increased space */
}
.how-it-works-section .step-icon i {
    /* Color already set by text-primary */
}


/* Secondary CTA Section */
.secondary-cta-section {
    background-color: var(--white-color);
    border-top: 1px solid var(--border-light-color);
    border-bottom: 1px solid var(--border-light-color);
}
.secondary-cta-section .btn-marketplace-primary {
    padding: 0.9rem 2.5rem;
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
}


/* Styles for Seller Registration Modal */
#sellerRegistrationModal .modal-header {
    background-color: var(--primary-light-color); /* Light header for modal */
    border-bottom: 1px solid var(--border-color);
}
#sellerRegistrationModal .modal-title {
    color: var(--primary-dark-color); /* Darker primary for title */
    font-size: 1.375rem; /* Modal title size */
}
#sellerRegistrationModal .modal-body {
    padding: 1.5rem 2rem 2rem; /* More bottom padding */
}
.auth-card.seller-modal-form { /* Styles for form when inside the modal */
    border: none;
    box-shadow: none;
    padding: 0;
}
.auth-card.seller-modal-form .widget-content-wrapper {
    padding: 0;
}
#sellerRegistrationModal .form-label { /* Ensure labels in modal form are styled well */
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}
#sellerRegistrationModal .form-control-sm,
#sellerRegistrationModal .form-select-sm {
    font-size: var(--font-size-sm);
    padding: 0.5rem 0.75rem;
    border-color: var(--border-color);
}
#sellerRegistrationModal .form-control-sm:focus,
#sellerRegistrationModal .form-select-sm:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
}
#sellerRegistrationModal .modal-footer {
    background-color: var(--secondary-color); /* Light grey footer for modal */
    border-top: 1px solid var(--border-color);
    padding: 1rem 2rem;
}


/* Responsive adjustments for seller page */
@media (max-width: 767.98px) {
    .seller-hero-section { padding: 3.5rem 0; }
    .seller-hero-section .display-4 { font-size: 2rem; }
    .seller-hero-section .lead { font-size: 1rem; }
    .seller-page-content .section-main-title { font-size: 1.75rem; }
    .seller-page-content .lead.text-muted { font-size: var(--font-size-base); }
    .benefits-section .col-md-6.col-lg-3.d-flex { margin-bottom: 1rem; } /* Ensure spacing when stacked */
    .benefit-item.card-style-widget { margin-bottom: 0; } /* Override general margin if col handles it */
    .how-it-works-section .step-item { margin-bottom: 1.5rem; }
    .how-it-works-section .step-item:last-child { margin-bottom: 0; }
    #sellerRegistrationModal .modal-dialog { margin: 0.5rem; } /* Smaller margin for modal on mobile */
    #sellerRegistrationModal .modal-body { padding: 1.5rem; }
    #sellerRegistrationModal .modal-footer { padding: 1rem 1.5rem; }
}
/* ==========================================================================
   Contact Page Enhancements
   ========================================================================== */

.contact-page-content {
    background-color: var(--secondary-color); /* Light grey page background */
}

.contact-page-content .section-main-title { /* For "Get In Touch With Us" */
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5rem; /* Tighter margin */
}
.contact-page-content .lead.text-muted {
    font-size: 1.05rem; /* Slightly larger lead */
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* Enhanced Card Styling for Contact Info and Form Blocks */
.contact-info-wrapper.card-style-widget,
.contact-form-wrapper.card-style-widget {
    background-color: var(--white-color);
    border: 1px solid var(--border-light-color); /* Lighter border for a softer look */
    border-radius: var(--border-radius-xl); /* More rounded if desired */
    box-shadow: var(--box-shadow-lg); /* More pronounced shadow */
    padding: 0; /* Padding handled by .widget-content-wrapper */
    /* height: 100%; -- Already applied by d-flex on parent col if using Bootstrap grid for equal height */
}

.contact-info-wrapper .widget-content-wrapper,
.contact-form-wrapper .widget-content-wrapper {
    padding: 2rem; /* e.g., 32px internal padding */
}

/* Titles within these cards */
.contact-info-wrapper .widget-title,
.contact-form-wrapper .widget-title {
    font-size: 1.375rem; /* 22px, matches screenshot */
    color: var(--text-primary-color);
    font-weight: var(--font-weight-bold); /* Bolder title */
    margin-bottom: 1rem; /* Space after title */
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color); /* Thicker accent line like screenshot */
    display: inline-block; /* Make border only as wide as text */
}
/* Remove the default ::after pseudo-element if .widget-title normally has one */
.contact-info-wrapper .widget-title::after,
.contact-form-wrapper .widget-title::after {
    display: none;
}


/* Contact Information Block - Enhanced */
.contact-info-wrapper .fs-sm.text-muted.mb-4 { /* "Fill up the form..." text */
    line-height: 1.6;
    font-size: 0.9rem; /* Slightly larger */
}

.contact-info-item {
    /* display: flex; align-items: start; mb-3; -- from HTML */
    padding-bottom: 0.75rem; /* Add padding below each item */
    margin-bottom: 0.75rem; /* Add margin below each item */
    border-bottom: 1px dashed var(--border-light-color); /* Dashed separator for items */
}
.contact-info-item:last-of-type { /* For the last info item before "Follow Us" */
    border-bottom: none;
    margin-bottom: 1.5rem; /* More space before "Follow Us" */
}

.contact-info-icon {
    /* text-primary, me-3, fs-4 from HTML */
    /* fs-4 might be too big, reference looks smaller, like 1.25rem or 1.5rem */
    font-size: 1.375rem !important; /* Override fs-4 if needed, to match screenshot */
    width: 35px; /* Ensure consistent alignment */
    text-align: center;
}
.contact-info-item h6.fs-sm { /* "Our Office Address", "General Enquiries", "Call Us" */
    font-size: var(--font-size-base) !important; /* 16px, more prominent */
    font-weight: var(--font-weight-bold) !important; /* Bolder */
    color: var(--text-primary-color);
    margin-bottom: 0.125rem !important; /* Tighter margin */
}
.contact-info-item p.fs-sm,
.contact-info-item a.fs-sm {
    font-size: var(--font-size-sm) !important; /* 14px */
    color: var(--text-secondary-color); /* Slightly darker muted text */
    line-height: 1.5;
}
.contact-info-item a.fs-sm:hover {
    color: var(--primary-color);
}

/* "Follow Us" part */
.contact-info-wrapper h6.fs-sm.fw-semibold.mb-2 { /* "Follow Us" title */
    font-size: var(--font-size-base) !important; /* 16px */
    font-weight: var(--font-weight-bold) !important;
    color: var(--text-primary-color);
    margin-bottom: 0.75rem !important; /* Space after "Follow Us" title */
    /* Remove any bottom border if it was part of contact-info-item style */
    border-bottom: none;
    padding-bottom: 0;
}

.contact-social-icons {
    /* Container for the icons */
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between icons (e.g., 16px) */
}

.social-icon-link {
    display: inline-flex; /* Or inline-block */
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; /* Size of the icon itself (e.g., 20px) - Adjust as needed */
    color: var(--text-muted-color); /* Default muted color for icons */
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0.25rem; /* Small clickable area around the icon */
}

.social-icon-link:hover {
    color: var(--primary-color); /* Change to primary color on hover */
    transform: translateY(-2px); /* Slight lift effect on hover */
}



/* Contact Form Block - Enhanced */
.contact-form-wrapper .widget-title { /* "Send Us a Message" title */
    /* Uses same style as contact info title */
}

#contactFormPage .form-label.fs-sm {
    font-size: var(--font-size-xs) !important; /* 12px for form labels, as in reference */
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
}
#contactFormPage .form-control-sm {
    padding: 0.6rem 0.9rem; /* More padding for form fields */
    font-size: var(--font-size-sm); /* 14px input text */
    border: 1px solid var(--border-color); /* Slightly more visible border */
    border-radius: var(--border-radius-sm); /* Softer radius */
}
#contactFormPage .form-control-sm:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.1); /* Softer focus */
}
#contactFormPage textarea.form-control-sm {
    min-height: 120px; /* Min height for textarea */
}

#contactFormPage .btn-lg { /* "Send Message" button */
    background-color: var(--primary-color); /* Blue button like reference */
    border-color: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--font-weight-semibold); /* Bolder text */
    font-size: var(--font-size-base); /* 16px */
    padding: 0.75rem 1.5rem; /* Standard large button padding */
    border-radius: var(--border-radius-md); /* Match input radius */
}
#contactFormPage .btn-lg:hover {
    background-color: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
}
#contactFormPage .btn-lg i.fa-paper-plane {
    transform: rotate(15deg); /* Slight angle for paper plane icon */
    font-size: 0.9em;
}

/* Google Map Section */
.contact-map-section .card-style-widget {
    /* Uses existing card style */
    /* Ensure no top margin if section-padding from main handles it */
    margin-top: 0;
}
.contact-map-section .widget-title {
    font-size: 1.375rem;
    color: var(--text-primary-color);
    font-weight: var(--font-weight-bold);
    border-bottom: 2px solid var(--primary-color); /* Match other titles */
    display: inline-block;
    padding-bottom: 0.75rem;
    margin-bottom: 0 !important; /* Remove margin if p-3 on parent handles it */
}
.contact-map-section .widget-title::after { display: none; }


/* Responsive adjustments for Contact Page Cards */
@media (max-width: 991.98px) {
    .contact-info-wrapper.card-style-widget {
        margin-bottom: 2rem; /* Ensure good space when stacked */
    }
}
@media (max-width: 767.98px) {
    .contact-info-wrapper .widget-content-wrapper,
    .contact-form-wrapper .widget-content-wrapper {
        padding: 1.5rem; /* Adjust padding for smaller cards */
    }
    .contact-page-content .section-main-title { font-size: 1.75rem; }
    .contact-info-item {
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .contact-info-item:last-of-type { margin-bottom: 1rem; }
    .contact-social-icons { text-align: center; } /* Center social icons on mobile */
}
/* ==========================================================================
   About Us Page Specific Styles
   ========================================================================== */

/* Overall About Page Content Area */
.about-page-content {
    background-color: var(--white-color); /* Default background for sections unless overridden */
}
.about-page-content .section-padding { /* Ensure utility class provides adequate padding */
    padding-top: var(--section-padding-y, 3rem);
    padding-bottom: var(--section-padding-y, 3rem);
}

/* About Us Hero Section */
.about-hero-section {
    background-color: var(--primary-dark-color); /* Example: Dark primary */
    /* OR use an image with an overlay:
    background-image: linear-gradient(rgba(var(--primary-rgb, 40, 116, 240),0.65), rgba(var(--primary-rgb, 40, 116, 240),0.85)), url('../assets/images/your-about-hero-image.jpg');
    background-size: cover;
    background-position: center center;
    */
    padding: 5rem 0;
    color: var(--white-color);
}
.about-hero-section .display-4 {
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.about-hero-section .lead {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
    font-size: 1.125rem;
}

/* General Section Title Styling for About Page */
.about-page-content .section-main-title {
    font-size: 2.25rem; /* ~36px */
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    margin-bottom: 1rem; /* Space after title */
    position: relative;
    padding-bottom: 0.75rem; /* Space for accent line */
}
/* Accent line for section titles */
.about-page-content .section-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 70px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}
/* Centered titles */
.about-page-content .text-center .section-main-title::after {
    left: 50%;
    transform: translateX(-50%);
}
/* Left-aligned titles (default) */
.about-page-content .section-main-title:not(.text-center)::after {
    left: 0;
    transform: translateX(0);
}
.about-page-content .lead.text-muted { /* Lead paragraph under section titles */
    font-size: 1.1rem;
    color: var(--text-secondary-color) !important; /* Ensure muted color */
}


/* Our Story Section */
.our-story-section {
    background-color: var(--white-color); /* Ensures contrast if page bg is grey */
}
.our-story-image-wrapper {
    /* Add styles if you want a frame or special effect around the image */
    /* Example:
    padding: 0.5rem;
    background-color: var(--white-color);
    box-shadow: var(--box-shadow-lg);
    border-radius: var(--border-radius-xl);
    */
}
.our-story-image-wrapper img {
    /* img-fluid, rounded-lg, shadow-lg from Bootstrap are good */
}

.our-story-content-card.card-style-widget {
    background-color: var(--white-color);
    border: 1px solid var(--border-light-color); /* Lighter border for subtle card */
    border-radius: var(--border-radius-xl);
    box-shadow: var(--box-shadow-lg);
    padding: 0; /* Padding handled by .widget-content-wrapper */
    height: 100%; /* If in a d-flex row to match heights */
}
.our-story-content-card .widget-content-wrapper {
    padding: 2.5rem; /* Generous padding for content card */
}
.our-story-content-card .section-main-title { /* Title inside this card */
    font-size: 2rem; /* Slightly smaller than page-level section titles */
    margin-bottom: 1.25rem !important;
}
.our-story-content-card p.text-muted {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary-color) !important;
}
.our-story-content-card .btn-marketplace-primary.btn-lg {
    font-weight: var(--font-weight-semibold);
    padding: 0.75rem 2rem;
    font-size: 1rem;
}


/* Our Values Section */
.our-values-section.bg-light {
    background-color: var(--secondary-color) !important; /* Light grey background */
}
.value-card.card-style-widget {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center; /* Center content within value cards */
    height: 100%; /* For equal height cards in a row */
}
.value-card.card-style-widget:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-xl); /* More pronounced shadow on hover */
    border-color: var(--primary-color);
}
.value-card .widget-content-wrapper {
    padding: 2rem 1.5rem; /* Internal padding for value cards */
    display: flex;
    flex-direction: column;
    height: 100%;
}
.value-card .value-icon {
    margin-bottom: 1rem; /* Space below icon */
}
.value-card .value-icon i {
    color: var(--primary-color);
    transition: transform 0.3s ease;
    font-size: 2.5rem; /* Size of value icons */
}
.value-card:hover .value-icon i {
    transform: scale(1.1) rotate(-5deg);
}
.value-card h5.fw-semibold {
    color: var(--text-primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.125rem; /* 18px */
}
.value-card p.fs-sm {
    color: var(--text-secondary-color);
    line-height: 1.6;
    font-size: 0.9rem; /* Slightly smaller text for descriptions */
    flex-grow: 1; /* Pushes content down if title length varies */
}


/* Meet The Team Section (If enabled) */
.meet-the-team-section {
    background-color: var(--white-color);
}
.team-member-card.card-style-widget {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-md);
    overflow: hidden;
    transition: var(--transition-base);
    text-align: center;
    height: 100%;
}
.team-member-card.card-style-widget:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-xl);
}
.team-member-card .widget-content-wrapper {
    padding: 0; /* Image touches edges */
}
.team-member-image {
    width: 100%;
    aspect-ratio: 1/1; /* Square images */
    object-fit: cover;
    border-bottom: 3px solid var(--primary-color); /* Accent below image */
}
.team-member-card .p-3 { /* Padding for text content below image */
    padding: 1.25rem !important;
}
.team-member-card h5.fw-semibold {
    color: var(--text-primary-color);
    font-size: 1.125rem;
}
.team-member-card .fs-sm.text-primary {
    color: var(--primary-color) !important;
    font-weight: var(--font-weight-medium);
    font-size: 0.9rem;
}
.team-member-card .fs-xs.text-muted {
    line-height: 1.5;
    font-size: 0.8rem;
    min-height: calc(1.5em * 3); /* Placeholder for a few lines of text */
}


/* Call to Action Section */
.cta-about-section {
    background-image: linear-gradient(45deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
    padding: 5rem 0; /* More padding */
    color: var(--white-color);
}
.cta-about-section h2 {
    font-size: 2.25rem; /* Larger CTA title */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
}
.cta-about-section .lead {
    color: rgba(var(--white-color-rgb), 0.9);
    font-size: 1.125rem;
}
.cta-about-section .btn { /* General style for buttons in this CTA */
    font-weight: var(--font-weight-semibold);
    padding: 0.8rem 2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cta-about-section .btn-light {
    color: var(--primary-dark-color) !important;
}
.cta-about-section .btn-light:hover {
    background-color: var(--white-color) !important;
    opacity: 0.95;
}
.cta-about-section .btn-outline-light:hover {
    background-color: var(--white-color) !important;
    color: var(--primary-dark-color) !important;
}


/* Responsive adjustments for About Page */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .our-story-content-card .widget-content-wrapper {
        padding: 2rem;
    }
    .value-card .widget-content-wrapper {
        padding: 1.5rem;
    }
}

@media (max-width: 767.98px) { /* Small devices (landscape phones) */
    .about-hero-section { padding: 3.5rem 0; }
    .about-hero-section .display-4 { font-size: 2rem; }
    .about-hero-section .lead { font-size: 1rem; }

    .about-page-content .section-main-title { font-size: 1.75rem; }
    .about-page-content .section-main-title::after { width: 50px; height: 2px; }
    .about-page-content .lead.text-muted { font-size: var(--font-size-base); }

    .our-story-section .col-lg-6 img { margin-bottom: 2rem; }
    .our-story-content-card .widget-content-wrapper { padding: 1.5rem; }
    .our-story-content-card .section-main-title { font-size: 1.75rem; }

    .value-card.card-style-widget { margin-bottom: 1.5rem; } /* Ensure spacing when stacked */
    .value-card.card-style-widget:last-child { margin-bottom: 0; }
    .value-card .value-icon i { font-size: 2rem; }
    .value-card h5.fw-semibold { font-size: 1rem; }


    .team-member-card.card-style-widget { margin-bottom: 1.5rem; }

    .cta-about-section { padding: 3.5rem 0; }
    .cta-about-section h2 { font-size: 1.75rem; }
    .cta-about-section .lead { font-size: 1rem; }
    .cta-about-section .btn { font-size: 0.9rem; padding: 0.7rem 1.5rem; }
    .cta-about-section .btn + .btn { margin-top: 0.75rem; margin-left: 0 !important; }
}

/*
=================================================
= PROFESSIONAL MOBILE HEADER & HAMBURGER MENU   =
=================================================
*/

/* 1. The Mobile Header Wrapper */
.mobile-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1010;
    background-color: #fff;
    padding: 10px 15px;
    height: 60px; /* Standard mobile header height */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.mobile-header-wrapper .mobile-logo img {
    max-height: 35px; /* Adjust logo size for mobile */
    width: auto;
}

.mobile-header-wrapper .hamburger-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: #333;
    padding: 0;
}
.mobile-header-wrapper .mobile-actions {
    font-size: 22px;
}
.mobile-header-wrapper .mobile-actions a {
    color: #333;
}


/* 2. The Off-Canvas (Slide-in) Menu */
.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.offcanvas-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* Width of the slide-in menu */
    height: 100%;
    background-color: #fff;
    z-index: 1050;
    transform: translateX(-100%); /* Start off-screen */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.offcanvas-menu.active {
    transform: translateX(0); /* Slide into view */
}

.offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}
.offcanvas-header .close-btn {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    padding: 0;
}
.offcanvas-body {
    padding: 20px;
    overflow-y: auto;
}

/* 3. Adapt the Desktop Nav for Vertical Layout in Off-Canvas */
.offcanvas-menu .nav-marketplace-container {
    border-bottom: none;
}
.offcanvas-menu .nav-marketplace-list {
    flex-direction: column; /* This is the key change */
    align-items: flex-start;
    height: auto;
}
.offcanvas-menu .nav-marketplace-item {
    width: 100%;
}
.offcanvas-menu .nav-marketplace-link {
    width: 100%;
    padding: 12px 0;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
}
.offcanvas-menu .nav-marketplace-item:hover > .nav-marketplace-link,
.offcanvas-menu .nav-marketplace-item.active > .nav-marketplace-link {
    border-bottom-color: transparent; /* Remove bottom border on hover */
    background-color: #f8f9fa; /* Use a light background instead */
}

/*
=================================================================
== FINAL PWA VISIBILITY FIX
== This CSS block is the definitive solution to the PWA nav issue.
=================================================================
*/

/* 1. By default on ALL screen sizes, hide the PWA nav bar. */
.mobile-bottom-nav-marketplace {
    display: none !important;
}

/* 2. ONLY on mobile screens (less than 992px), IF PWA is active,
      force the navigation bar to be visible. */
@media (max-width: 991.98px) {
    body.pwa-nav-active .mobile-bottom-nav-marketplace {
        display: flex !important;
    }
}