/**
Theme Name: ShopByCartz Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shopbycartz-child
Template: astra
*/

/* ==========================================
   SHOPBYCARTZ GLOBAL COLOR PALETTE (:ROOT)
   ========================================== */
:root {
    /* 10% Accent / Call To Action (Buttons, Badges) */
    --sb-primary: #050301;         /* High-trust Royal Blue */
    --sb-primary-hover: #708090;   /* Deeper Blue for interactive hover states */
    --sb-accent: #E11D48;          /* Crisp Rose/Red for Sale badges or urgent alerts */

    /* 30% Structural Layout (Text, Headings, Borders) */
    --sb-heading: #111827;         /* Sleek Off-Black for sharp typography */
    --sb-text: #374151;            /* Charcoal body text (easier on eyes than pure black) */
    --sb-borders: #E5E7EB;         /* Clean, faint gray lines for input borders */

    /* 60% Dominant Base (Backgrounds) */
    --sb-bg-main: #FFFFFF;         /* Crisp main content background */
    --sb-bg-alt: #F9FAFB;          /* Soft off-white for structural sections/footers */
}

/* ==========================================================================
   HIDE BACKEND DASHBOARD CLUTTER NOTICES
   ========================================================================== */
.wp-admin .notice-warning,
.wp-admin .astra-notice,
.wp-admin #setting-error-tgmpa,
.wp-admin .welcome-panel {
    display: none !important;
}

/* ==========================================
   GLOBAL STRUCTURE & TYPOGRAPHY
   ========================================== */
body, html {
    overflow-x: hidden;
    background-color: transparent;
}

body {
    background: var(--sb-bg-main) !important;
    color: var(--sb-text);
}
a{
	color: var(--sb-primary);
}
a:hover{
	color: var(--sb-primary-hover) !important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--sb-heading);
}

/* Base default h2 setup */
h2 {
    font-size: 2.5rem;
    color: var(--sb-heading);
}

/* Global Button Class Helper */
.custom-btn,  {
    background-color: var(--sb-primary);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    transition: background 0.2s ease-in-out;
}

.custom-btn:hover, .button:hover {
    background-color: var(--sb-primary-hover);
}
.button{
	background-color: var(--sb-primary) !important;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    transition: background 0.2s ease-in-out;
}
.button:hover{
	background-color: var(--sb-primary-hover) !important;
}
/* ==========================================
   HEADER NAVIGATION SECTION
   ========================================== */
.custom-shop-header {
    background: var(--sb-bg-main);
    border-bottom: 1px solid var(--sb-borders);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo-text { 
    font-size: 1.5rem; 
    font-weight: 800; 
    color: var(--sb-heading); 
    text-decoration: none; 
}
.logo-text span { 
    color: var(--sb-primary); 
}

.main-menu-list { 
    display: flex; 
    list-style: none; 
    gap: 25px; 
    margin: 0; 
}
.main-menu-list a { 
    text-decoration: none; 
    color: var(--sb-text); 
    font-weight: 600; 
    transition: color 0.3s ease; 
}
.main-menu-list a:hover { 
    color: var(--sb-primary); 
}

.header-utilities { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}
.cart-contents { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    text-decoration: none; 
    color: var(--sb-text); 
    font-weight: bold; 
}
.cart-icon-wrapper { 
    position: relative; 
}
.cart-count { 
    position: absolute; 
    top: -8px; 
    right: -10px; 
    background: var(--sb-text); 
    color: white; 
    font-size: 10px; 
    padding: 2px 6px; 
    border-radius: 50%; 
}
.cart-count:hover{background: var(--sb-primary);}
.mobile-menu-toggle { 
    display: none; 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 5px; 
}
.bar { 
    display: block; 
    width: 25px; 
    height: 3px; 
    background: var(--sb-heading); 
    margin: 5px 0; 
    transition: 0.4s; 
}
/* --- 1. Base Setup for Astra Navigation Items --- */
.main-navigation ul li {
    position: relative; /* Essential for relative positioning of dropdowns */
}

/* --- 2. First-Level Dropdown (The Main "Shop" Menu) --- */
.main-navigation ul li ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;             /* Drops directly below the "Shop" link */
    left: 0;
    background-color: #ffffff;
    min-width: 240px;      /* Set a standard uniform width */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    margin: 0;
    list-style: none;
    z-index: 99999;
    border-top: 2px solid #4a6b82; /* Optional styling line to match site branding */
}

/* Reveal first dropdown level on hover */
.main-navigation ul li:hover > ul.sub-menu {
    display: block;
}

/* Dropdown list item layouts */
.main-navigation ul.sub-menu li {
    width: 100%;
}

.main-navigation ul.sub-menu li a {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333333;
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.2s ease;
}

/* --- 3. Second-Level Dropdown (Sub-categories Flyout) --- */
/* This handles the inner sub-menus for Living Room & Bedroom Furniture */
.main-navigation ul.sub-menu li ul.sub-menu {
    top: 0;
    left: 100%;           /* Pushes the sub-category menu strictly to the right side */
    margin-top: -10px;    /* Aligns perfectly with the parent item top padding */
    border-top: none;
    border-left: 1px solid #eaeaea; 
}

/* Reveal second dropdown layer ONLY when hovering over its specific parent */
.main-navigation ul.sub-menu li:hover > ul.sub-menu {
    display: block;
}

/* --- 4. Hover states and layout polish --- */
.main-navigation ul.sub-menu li:hover > a {
    background-color: #f7f9fa; /* Light tint color on hover */
    color: #000000;
}

/* Adjusting the default Astra dropdown arrows to face right for sub-menus */
.main-navigation ul.sub-menu .menu-item-has-children .ast-header-navigation-arrow {
    transform: rotate(-90deg); /* Makes the arrow point to the right */
    font-size: 10px;
    opacity: 0.6;
}

/* Ensure mobile menu toggles or default button wrappers don't distort alignment */
.main-navigation ul.sub-menu button.ast-menu-toggle {
    display: none; /* Hides desktop redundancy if Astra's theme features conflict */
}
.main-menu-list li ul.sub-menu + ul{left: 50px !important;}
/* ==========================================
   PREMIUM NAVIGATION DROPDOWN CLEANUP
   ========================================== */


/* ==========================================
   HEADER ACCOUNT ICON COLOR FIX
   ========================================== */
/* Targets Astra theme and standard WooCommerce account icons */
.ast-header-account-wrap,
.ast-header-account-link,
.ast-header-account-type-icon .ahfb-svg-icon,
.ast-header-account-link svg,
.account-icon-wrapper svg {
    color: var(--sb-primary) !important;
    fill: var(--sb-primary) !important;
}

/* Hover state for the account icon */
.ast-header-account-link:hover .ahfb-svg-icon,
.ast-header-account-link:hover svg,
.account-icon-wrapper a:hover svg {
    color: var(--sb-primary-hover) !important;
    fill: var(--sb-primary-hover) !important;
}
.account-link svg{
    stroke: var(--sb-text);
}
.account-link:hover svg{
    stroke: var(--sb-primary);
}
.cart-icon-wrapper svg{stroke: var(--sb-text);}
.cart-icon-wrapper:hover svg{stroke: var(--sb-primary);}

/* ==========================================
   HERO / BANNER SLIDER SECTION
   ========================================== */
#page, .site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hero-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 600px !important;
    overflow: hidden;
    clear: both !important;
}

.hero-slider .slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity 1s ease-in-out !important;
    z-index: 1;
    background-size: cover !important; 
    background-position: center !important;
    background-repeat: no-repeat;
}

.hero-slider .slide:first-child {
    opacity: 1 !important;
    z-index: 2 !important;
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.45); 
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.hero-content {
    max-width: 850px;
    text-align: center;
    color: #ffffff !important;
    margin-right: auto;
}

.hero-content h1 {
    font-size: 4rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

.hero-content p {
    font-size: 1.2rem !important;
    color: #eeeeee !important;
    margin-bottom: 30px !important;
    line-height: 1.6 !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-button {
    display: inline-block !important;
    background-color: var(--sb-primary) !important; 
    color: #ffffff !important;
    padding: 15px 40px !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
    text-transform: uppercase;
}

.hero-button:hover {
    background-color: var(--sb-primary-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* ==========================================
   ABOUT BRAND SECTION
   ========================================== */
.about-section { 
    padding: 80px 20px; 
    background: var(--sb-bg-main); 
}

.about-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 60px; 
    align-items: center; 
    max-width: 1100px;
    margin: 0 auto;
}

.about-image { 
    width: 50%;
    max-width: 550px; 
}

.about-image img { 
    width: 100%; 
    height: auto; 
    border-radius: 12px;
    display: block;
}

.about-content { 
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: flex-start; 
}

.sub-heading { 
    color: var(--sb-primary); 
    font-weight: 700; 
    letter-spacing: 0.5px; 
    font-size: 16px;
    margin-bottom: 10px;
}

.about-content h2 { 
    font-size: 2.5rem; 
    margin: 0 0 20px 0; 
    line-height: 1.2;
    color: var(--sb-heading);
}

.about-content p { 
    font-size: 1.1rem; 
    line-height: 1.7; 
    color: var(--sb-text); 
    margin-bottom: 25px;
}

.btn {
    display: inline-block !important;
    background-color: var(--sb-primary) !important;
    color: #ffffff !important;
    padding: 15px 40px !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
    text-transform: uppercase;
    margin-top: 10px; 
}

.btn:hover { 
    background-color: var(--sb-primary-hover) !important; 
    transform: translateY(-2px);
}

/* ==========================================
   WHY CHOOSE US VALUE SECTION
   ========================================== */
.why-choose-us {
    padding: 80px 20px;
    background: #33363d;
    color: #ffffff; 
}

/* Fixed: Keeps why choose us title cleanly readable white */
.why-choose-us .section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #ffffff !important; 
}

.section-header p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 50px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 16px;
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

.feature-item {
    flex: 1 1 300px; 
    max-width: 350px;
    background: var(--sb-bg-main);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    text-align: center;
}

.feature-item:hover {
    transform: translateY(-10px);
}

.feature-icon img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--sb-heading);
}

.feature-item p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--sb-text);
}

/* ==========================================
   FEATURED PRODUCTS GRID SECTION
   ========================================== */
.featured-products { 
    padding: 80px 20px; 
    background: #33363d; 
}
.featured-products .section-header h2{color: #fff;}
.featured-products .section-header .sub-heading{color: #fff;}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-card {
    background: var(--sb-bg-main);
    border: 1px solid var(--sb-borders);
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.product-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

.product-image { 
    margin-bottom: 15px; 
    position: relative; 
    overflow: hidden; 
}
.product-image img { 
    width: 100%; 
    height: auto; 
    transition: transform 0.5s; 
}
.product-card:hover .product-image img { 
    transform: scale(1.05); 
}

.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--sb-accent);
    color: #fff;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 10;
    border-radius: 2px;
}

.product-info h3 { 
    font-size: 1.1rem; 
    margin: 10px 0; 
    color: var(--sb-heading); 
}
.price { 
    font-weight: 700; 
    color: var(--sb-primary); 
    font-size: 1.2rem; 
    display: block; 
    margin-bottom: 15px; 
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

/* ==========================================
   TESTIMONIAL REVIEWS SECTION
   ========================================== */
.testimonials-section {
    padding: 80px 20px;
    background-color: var(--sb-bg-alt);
}
.testimonial-header { 
    text-align: center; 
}

.testimonials-section h2 {
    color: var(--sb-heading) !important;
}

.testimonial-slider {
    width: 100%;
    height: auto;
    overflow: hidden; 
    padding: 50px 0 !important;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    background: var(--sb-bg-main) !important;
    padding: 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    display: block !important; 
    margin: 10px;
}

.rating-stars {
    color: var(--sb-primary); 
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.review-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--sb-text);
    margin-bottom: 25px;
    min-height: 80px;
}

.client-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--sb-borders);
    padding-top: 20px;
}

.client-img, .client-img-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sb-borders);
}

.client-meta h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--sb-heading);
    font-weight: 700;
}
.testimonial-header h2 { 
    margin-bottom: 10px; 
}
.section-subtitle {
    color: var(--sb-primary);
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 16px;
    margin-bottom: 10px;
}
.swiper-pagination-bullet-active { 
    background: var(--sb-primary) !important; 
}

/* ==========================================
   NEWSLETTER MARKETING SECTION
   ========================================== */
.newsletter-section {
    padding: 80px 0;
    background: #33363d;
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.newsletter-card {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 40px;
    background: var(--sb-bg-main);
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.newsletter-card .section-title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--sb-heading) !important;
}

.newsletter-card .section-desc {
    font-size: 1.1rem;
    color: var(--sb-text);
    margin-bottom: 35px;
    line-height: 1.6;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.newsletter-form input {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid var(--sb-borders); 
    border-radius: 4px;
    background: var(--sb-bg-main);
    transition: border-color 0.3s;
}

.newsletter-form input:focus {
    border-color: var(--sb-primary);
    outline: none;
}

.btn-subscribe {
    background: var(--sb-primary); 
    color: #ffffff;
    padding: 14px 30px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto; 
}

.btn-subscribe:hover {
    background: var(--sb-primary-hover); 
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ==========================================
   PRODUCT CATEGORY SECTIONS
   ========================================== */
/* ==========================================================================
   DYNAMIC SHOP BY CATEGORY - CORE DESKTOP LAYOUT
   ========================================================================== */
.category-section {
    padding: 60px 0;
    background-color: #ffffff;
    width: 100%;
}

.category-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #021b33;
    margin: 0 0 10px 0;
}

.section-subtitle {
    text-align: center;
    font-size: 15px;
    color: #666666;
    margin: 0 0 40px 0;
}

/* Perfect 4 Column Desktop Alignment Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

.category-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background: #fcfcfc;
    display: block;
    height: 280px; /* Uniform height for cards */
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-image-wrapper {
    width: 100%;
    height: 100%;
}

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

/* Beautiful dark gradient vignette matching your image examples */
.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    box-sizing: border-box;
    z-index: 2;
}

.category-overlay h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 0 4px 0;
}

.explore-btn {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

/* Zoom effect on card hover */
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(2, 27, 51, 0.15);
}

.category-card:hover .category-image-wrapper img {
    transform: scale(1.05);
}

/* ==========================================
   MAIN FOOTER LAYOUT AREA
   ========================================== */
.main-footer {
    position: relative !important;
    display: block !important;
    clear: both !important;
    z-index: 99;
    padding: 80px 20px 0 20px;
    background: var(--sb-bg-main);
}

.footer-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.footer-col {
    flex: 1;
    min-width: 250px;
    padding: 20px;
    box-sizing: border-box;
}

.footer-col h4 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sb-heading);
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: var(--sb-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--sb-primary); 
}

.social-links a {
    display: inline-block;
    margin-right: 15px;
    font-size: 20px;
    color: var(--sb-text);
    transition: color 0.3s;
}
.social-links a:hover {
    color: var(--sb-primary);
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--sb-borders);
    font-size: 14px;
    color: #999;
}
.main-footer ul { margin: 0; }

.home .site-content .ast-container {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* ==========================================
   ABOUT PAGE CUSTOM TEMPLATE VIEW
   ========================================== */
.page-template-page-about .site-content .ast-container {
    display: block !important; 
    max-width: 100% !important; 
    padding: 0 !important;
    margin: 0 !important;
}

.shopbycartz-about-wrapper .container {
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.thin-page-banner {
    width: 100%;
    text-align: center;
    background: var(--sb-bg-alt); 
    padding: 40px 0;
    border-bottom: 1px solid var(--sb-borders);
}

.thin-page-banner h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--sb-heading);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 1px;
}

.about-breadcrumbs {
    background: var(--sb-bg-main);
    padding: 15px 0;
    border-bottom: 1px solid var(--sb-bg-alt);
}

.breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    font-size: 0.9rem;
}

.breadcrumb-list li a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb-list li a:hover {
    color: var(--sb-primary); 
}

.breadcrumb-list .separator {
    margin: 0 10px;
    color: #ccc;
}

.breadcrumb-list .active {
    color: var(--sb-heading);
    font-weight: 500;
}

.about-content-section {
    padding: 60px 0;
}

.description-text {
    max-width: 100%;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--sb-text);
    text-align: justify;
}

.values-section {
    padding: 60px 0;
    background-color: var(--sb-bg-main);
}

.values-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
    justify-content: center;
}

.value-item {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    text-align: center;
    padding: 30px;
    background: var(--sb-bg-alt);
    border: 1px solid var(--sb-borders);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.value-icon {
    font-size: 35px;
    color: var(--sb-primary); 
    margin-bottom: 20px;
    display: block;
}

.value-item h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--sb-heading);
}

.value-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--sb-text);
}
.site-content .ast-container {
    display: block;
}

/* ==========================================
   CONTACT PAGE AND SUBMISSION SYSTEM CSS
   ========================================== */
.shopbycartz-contact-wrap {
    max-width: 650px;
    margin: 40px auto;
    padding: 0 20px;
}
.shopbycartz-contact-wrap .contact-intro {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
    color: var(--sb-text);
}
.shopbycartz-contact-wrap .ff-t-container { 
    display: flex !important; 
    gap: 20px !important; 
    width: 100% !important; 
}
.shopbycartz-contact-wrap .ff-t-cell { 
    flex: 1 !important; 
    width: 50% !important; 
}
.shopbycartz-contact-wrap .fluentform .ff-el-form-control { 
    width: 100% !important; 
    padding: 12px !important; 
    border-radius: 4px !important; 
    border: 1px solid var(--sb-borders);
}
.shopbycartz-contact-wrap .ff-el-group { 
    margin-bottom: 20px !important; 
}
.contact-form p { 
    text-align: center; 
    font-size: 16px; 
    margin-bottom: 30px; 
}
/*Shop Page css*/

/* ==========================================
   1. BREAK THE MAIN CONTAINER WIDE OPEN
   ========================================== */
.archive.woocommerce #page,
.archive.woocommerce .site,
.archive.woocommerce #primary,
.archive.woocommerce #main,
.archive.woocommerce .site-content,
.archive.woocommerce .content-area {
    width: 100% !important;
    max-width: 1300px !important; /* Premium wide desktop look */
    margin: 0 auto !important;
    float: none !important;
    padding: 0 20px !important;
}

/* Force the outer structure to allow wide layouts */
.archive.woocommerce .content-width-container {
    max-width: 1300px !important;
}


.custom-shop-wrapper .page-title{
	color: var(--sb-heading);
}
.woocommerce-result-count, .orderby, .woocommerce-Price-amount{color: var(--sb-primary);font-weight: 400;}

/* ==========================================   PREMIUM WOOCOMMERCE PAGINATION
1163
   ========================================== */
Submit

Save

Save and resume

Save as ...


   PREMIUM WOOCOMMERCE PAGINATION
   ========================================== */
/* Center the entire pagination container on the page */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
    text-align: center !important;
    margin: 50px 0 20px 0 !important;
    padding: 0 !important;
    display: block !important;
    clear: both !important;
}

/* Remove default theme border lines if any exist */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
    border: none !important;
    display: inline-flex !important;
    gap: 8px !important; /* Premium clean spacing between buttons */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
    border: none !important;
    float: none !important;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Style the base pagination button shapes */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    border-radius: 4px !important; /* Smooth subtle rounded corners */
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

/* Unselected/Inactive Numbers Styling */
.woocommerce nav.woocommerce-pagination ul li a {
    background: #ffffff !important;
    color: #444444 !important;
    border: 1px solid #dddddd !important;
}

/* Active Page Number Styling (The page you are currently viewing) */
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #111111 !important; /* Premium solid dark block */
    color: #ffffff !important;
    border: 1px solid #111111 !important;
}

/* Hover effect for unselected numbers and arrows */
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: #f5f5f5 !important;
    color: #111111 !important;
    border-color: #111111 !important;
}

/* Fix spacing specifically for next/prev arrows if text is used */
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
    font-size: 16px !important;
}
/* Break out the top container area for full-width sections */
.archive.woocommerce .site-content,
.page-template-template-custom-shop .site-content {
    padding-top: 0 !important;
}

/* Ensure the banner background colors spread 100% edge-to-edge */
header.thin-page-banner {
    width: 100% !important;
    display: block !important;
    float: none !important;
    background-color: #f8f9fa !important; /* Matches your premium off-white banner background */
    padding: 30px 0 !important;
}

nav.about-breadcrumbs {
    width: 100% !important;
    display: block !important;
    float: none !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #eaeaea !important;
}

/*Shop Main Category css*/

/* ==========================================================================
   1. MAIN SHOP PAGE LAYOUT RULES (ONLY AFFECTS THE CUSTOM MAIN SHOP)
   ========================================================================== */
.premium-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.shop-flat-category-card {
    background: #ffffff !important;
    border: 1px solid #59736e !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
}

.shop-flat-category-card a {
    text-decoration: none !important;
    display: block !important;
    padding: 35px 25px !important;
}

.card-interior-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.cat-name-heading {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #021b33 !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.cat-count-badge {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-bottom: 16px !important;
}

.cat-arrow-icon {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #021b33 !important;
    text-transform: uppercase !important;
}

.shop-flat-category-card:hover {
    border-color: #021b33 !important;
    box-shadow: 0 10px 25px rgba(2, 27, 51, 0.05) !important;
}

.categories-loadmore-wrapper {
    max-height: 2500px;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out !important;
}

.categories-loadmore-wrapper.hide-extra-rows {
    max-height: 180px !important;
}

.premium-loadmore-btn {
    background: #021b33 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 35px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* ==========================================================================
   2. CATEGORY ARCHIVE PAGES FIX (FOR MEN'S CLOTHES, ELECTRONICS, ETC.)
   ========================================================================== */

/* Fixes spacing under breadcrumbs on category pages */
.tax-product_cat .site-main,
.tax-product_cat #primary {
    padding-top: 50px !important;
    background-color: #ffffff !important;
}

/* Pushes the "Showing all 4 results" safely to the left */
.tax-product_cat .woocommerce-result-count {
    display: inline-block !important;
    float: left !important;
    margin: 0 0 40px 0 !important;
    font-size: 15px !important;
    color: #444444 !important;
}

/* Pushes the "Default sorting" dropdown safely to the right */
.tax-product_cat .woocommerce-ordering {
    display: inline-block !important;
    float: right !important;
    margin: 0 0 40px 0 !important;
}

/* Fixes the layout dropdown filter styles */
.tax-product_cat .woocommerce-ordering select {
    padding: 8px 12px !important;
    border: 1px solid #eaeaea !important;
    border-radius: 4px !important;
}

/* Clears the alignment blocks and creates a professional 3-column product grid */
.tax-product_cat ul.products {
    clear: both !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Fixes the product list items inside the layout grid */
.tax-product_cat ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
/* 1. Make the category page thin banner full width */


/* 2. Add top padding to the "Showing all results" text to unstick it from the border */
.tax-product_cat .woocommerce-result-count {
    padding-top: 30px !important;
}
.woocommerce-ordering{ padding-top: 30px;}

/* Forces the thin category banner to break out of theme constraints and sit completely flat */
/* ==========================================
   PERFECT FULL-WIDTH CATEGORY BANNER FIX
   ========================================== */

/* Unconstrains the specific container blocks on WooCommerce category views */
.tax-product_cat .site-content .container,
.tax-product_cat .site-main .container,
.tax-product_cat #content .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tax-product_cat .thin-page-banner{
	width: 100% !important;
    display: block !important;
    float: none !important;
    background-color: #f8f9fa !important;
    padding: 30px 0 !important;
}

/*new css main category page*/

    .sbc-custom-layout-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px; /* Generous space between sidebar and main column content */
        margin-top: 40px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* --- Left Sidebar UI Styles --- */
    .sbc-hardcoded-sidebar {
        width: 100%;
    }
    .sbc-filter-group {
        margin-bottom: 5px;
    }
    .sbc-filter-title {
        font-size: 1.15rem;
        font-weight: 600;
        color: #222;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        letter-spacing: -0.2px;
    }
    .sbc-filter-title span {
        font-size: 1.3rem;
        color: #aaa;
        font-weight: 300;
    }
    .sbc-sidebar-divider {
        border: 0;
        border-top: 1px solid #eeeeee;
        margin: 25px 0;
    }
    
    /* Native Price Filter Input Spacing Fixes */
    .sbc-hardcoded-sidebar .widget_price_filter {
        background: transparent !important;
        padding: 0 !important;
    }
    .sbc-hardcoded-sidebar .widget_price_filter h2 {
        display: none !important;
    }
    .sbc-hardcoded-sidebar .price_slider_amount {
        margin-top: 15px !important;
    }

    /* --- Right Content Area: Sub-Categories Grid Display --- */
    .sbc-subcat-section-title {
        font-size: 1.4rem;
        font-weight: 600;
        color: #111;
        margin-bottom: 25px;
    }
    .sbc-subcat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 25px;
    }
    .sbc-subcat-card {
        background: #ffffff;
        border-radius: 20px;
        overflow: hidden;
        text-decoration: none;
        display: block;
        box-shadow: 0 4px 20px rgba(0,0,0,0.03);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .sbc-subcat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }
    .sbc-subcat-img-wrapper {
        width: 100%;
        height: 240px;
        background: #f5f5f5;
        overflow: hidden;
    }
    .sbc-subcat-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sbc-subcat-info-box {
        background-color: #59736e; /* Slate Sage Green Match */
        padding: 20px;
        text-align: center;
    }
    .sbc-subcat-info-box h3 {
        color: #ffffff !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
        font-weight: 500;
    }
    .sbc-subcat-info-box span {
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.85rem;
        display: block;
        margin-top: 4px;
    }

    /* --- Lower Section: Full Width New Arrivals 4-Column Grid --- */
    .sbc-bottom-grid-section {
        margin-top: 80px; /* Deliberate spacing section separation */
        border-top: 1px solid #59736e;
        padding-top: 50px;
        width: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    .sbc-grid-header-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: #021b33;
        margin-bottom: 35px;
    }

    /* Balanced 4-Column Row Array Overrides */
    .sbc-na-products-grid ul.products {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 25px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .sbc-na-products-grid ul.products::before,
    .sbc-na-products-grid ul.products::after {
        display: none !important;
    }

    /* Premium Product Item Display Shell Styles */
    .sbc-na-products-grid ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        background: #59736e !important; /* Premium Sage Green card back */
        border-radius: 24px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    }
    .sbc-na-products-grid ul.products li.product a img {
        border-radius: 24px 24px 0 0 !important;
        height: 250px !important;
        object-fit: cover !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .sbc-na-products-grid ul.products li.product .woocommerce-loop-product__title {
        color: #ffffff !important;
        padding: 20px 20px 6px 20px !important;
        font-size: 1rem !important;
        margin: 0 !important;
        font-weight: 400;
        line-height: 1.4 !important;
    }
    .sbc-na-products-grid ul.products li.product .price {
        color: #ffffff !important;
        padding: 0 20px 24px 20px !important;
        margin: 0 !important;
        font-size: 1.05rem !important;
    }
    .sbc-na-products-grid ul.products li.product .price del { color: rgba(255,255,255,0.55) !important; }
    .sbc-na-products-grid ul.products li.product .price ins { text-decoration: none !important; font-weight: bold; }
    
    /* Automatically hide native standard unpolished WooCommerce components */
    .sbc-na-products-grid ul.products li.product .button.add_to_cart_button { display: none !important; }
.sbc-bottom-grid-section .page-numbers{margin-top:30px;}
nav.woocommerce-pagination {
    display: flex;
    justify-content: center;
}
.sbc-na-products-grid .add_to_cart_button, 
.sbc-na-products-grid .ajax_add_to_cart {
    display: inline-block !important;
    visibility: visible !important;
    margin-top: 10px;
}
.sbc-custom-product-card {border: 1px solid #59736e !important;}
.price_slider_amount button.button{margin-top: 15px;}

/*Blog Page CSS*/

/* ==========================================
   PREMIUM BLOG GRID STYLING
   ========================================== */
.blog-posts-flex-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    margin-bottom: 40px !important;
}

/* Individual card container alignment */
.premium-blog-card {
    width: calc(33.333% - 20px) !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.01) !important;
    transition: all 0.3s ease-in-out !important;
}

.premium-blog-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.06) !important;
    border-color: #e2e2e2 !important;
}

/* Image scaling and sizing uniformity */
.blog-card-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    transition: transform 0.3s ease;
}

/* Typography elements */
.blog-card-content {
    padding: 24px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card-date {
    font-size: 11px !important;
    text-transform: uppercase;
    color: #999999 !important;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.blog-card-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
}

.blog-card-title a {
    color: #111111 !important;
    text-decoration: none !important;
}

.blog-card-title a:hover {
    color: #021b33 !important;
}

.blog-card-excerpt {
    font-size: 14px !important;
    color: #666666 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

/* Minimalist elegant link action */
.blog-read-more-btn {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    text-decoration: none !important;
    margin-top: auto; /* Aligns to bottom */
    display: inline-block;
    transition: color 0.2s;
}

.blog-read-more-btn:hover {
    color: #666666 !important;
}

/* Reusing your clean numbers layout for pagination alignment */
.blog-custom-pagination {
    text-align: center !important;
    margin-top: 40px !important;
}
.blog-custom-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #444;
    font-weight: 600;
}
.blog-custom-pagination .page-numbers.current {
    background: #111111 !important;
    color: #fff !important;
    border-color: #111111 !important;
}
/*cart page*/
.cart_item .product-name a{
	color: var(--sb-text);
}
.product-remove a span svg{
	fill: var(--sb-text);
}

/*badge css*/
/* ==========================================================================
   PREMIUM SALE BADGE DESIGN (DESKTOP)
   ========================================================================== */
.woocommerce span.onsale,
.featured-products .sale-badge {
    background-color: #021b33 !important; /* Dark premium corporate blue */
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    
    /* Layout styling to make it a perfect circle */
    line-height: 42px !important;
    height: 42px !important;
    width: 42px !important;
    min-height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    text-align: center !important;
    
    /* Elegant alignment positioning */
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    z-index: 10 !important;
    
    /* Subtle drop shadow depth */
    box-shadow: 0 4px 10px rgba(2, 27, 51, 0.15) !important;
    transition: transform 0.2s ease !important;
}

/* Dynamic subtle pop effect when hovering over the product item card wrapper */
.product-card:hover .sale-badge,
ul.products li.product:hover span.onsale {
    transform: scale(1.08) !important;
}
.ast-left-sidebar #primary {
    border-left: 0px solid var(--ast-border-color);
}