.elementor-807 .elementor-element.elementor-element-6d05cc0 > .elementor-container{max-width:600px;}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.products-heading-show .related-products > h2, .elementor-widget-wc-archive-products.products-heading-show .upsells > h2, .elementor-widget-wc-archive-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product{text-align:center;}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:0px;}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#000000;}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#000000;}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Inter", Sans-serif;font-weight:600;}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product .price{color:#E46E6E;font-family:"Inter", Sans-serif;font-weight:600;}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product .price ins{color:#E46E6E;}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product .price ins .amount{color:#E46E6E;}.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-807 .elementor-element.elementor-element-dcf20af.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:0px;}}/* Start custom CSS for wc-archive-products, class: .elementor-element-dcf20af *//* ========================================= */
/* FULL CSS FOR PRODUCT CARD DESIGN (IMAGE-LEFT, TEXT-RIGHT, BUTTONS ALONGSIDE) */
/* Termasuk perbaikan Margin, Padding, dan KONSISTENSI LEBAR KARTU di Mobile */
/* ========================================= */

/* Main Product Card Container (the <li> element in the WooCommerce grid) */
.woocommerce ul.products li.product {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px!important; /* Jarak 20px antara konten dan border kartu di SEMUA SISI */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;             /* Make the li a flex container for its internal sections */
    flex-direction: column;    /* Stack the image+info block and buttons wrapper vertically */
    justify-content: flex-start; /* Align content to the top */
    align-items: flex-start; /* Align entire card content (including internal flex items) to the left */
    text-align: left; /* Default text alignment for children */
    min-height: 200px; /* Reduced min-height, let content flow naturally but prevent collapse */
    box-sizing: border-box; /* Pastikan padding dan border masuk dalam perhitungan total lebar/tinggi */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative; /* Useful for general positioning */

    /* PENTING: Pengaturan margin eksternal antar kartu */
    margin: 10px !important; /* Memberikan margin 10px di SEMUA sisi, dengan !important untuk override default */
    float: none !important; /* Pastikan tidak ada floating yang mengganggu flexbox layout */
    width: auto !important; /* Biarkan flex/grid container Elementor yang mengatur lebar item */
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Container for the entire WooCommerce product grid */
.woocommerce ul.products {
    margin: 0 -10px !important; /* Negative margin to compensate for li.product's margin, centering the grid */
    padding: 0 !important; /* Ensure no default padding from the ul */
    list-style: none !important; /* Remove any default list styling */
    display: flex !important; /* Make the ul a flex container for grid layout */
    flex-wrap: wrap !important; /* Allow product cards to wrap to the next line */
    justify-content: center !important; /* Center the grid items if there's extra space */
    /* Untuk konsistensi tinggi kartu di grid */
    align-items: stretch !important; /* Makes all flex items in a row the same height */
}

/* Ensure Elementor columns or widgets don't add extra padding */
.elementor-column.elementor-col-100 { /* Or the specific column class containing your product widget */
    padding: 0 !important; /* Remove default padding from Elementor columns */
}
.elementor-widget-wc-archive-products .woocommerce {
    width: 100% !important; /* Ensure the WooCommerce wrapper within Elementor widget takes full width */
}


/* Inner Wrapper for Image and Info (this is the flex row for image and text details) */
/* This element should be created by your PHP functions */
.woocommerce ul.products li.product .bs-product-card-inner {
    display: flex;             /* This creates the image-left, text-right layout */
    flex-direction: row;       /* Horizontal layout */
    align-items: flex-start;   /* Align items to the top (important for varying text height) */
    width: 100%;               /* Take full width of parent card */
    margin-bottom: 0;          /* No bottom margin here, spacing will be managed by internal elements */
    flex-grow: 1;              /* Allow this section to grow, pushing other direct content (like buttons if they were outside) down */
    height: 100%;              /* Ensure it takes full available height from parent */
}

/* Product Image Wrapper */
/* This element should be created by your PHP functions */
.woocommerce ul.products li.product .bs-product-image-wrapper {
    flex-shrink: 0; /* Prevent image from shrinking */
    margin-right: 20px; /* Space between image and text block */
    width: 150px; /* Fixed width for the image column */
    height: auto;
    display: flex; /* Use flex to center image within its wrapper */
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
}
.woocommerce ul.products li.product .bs-product-image-wrapper img {
    max-width: 100%; /* Ensure image fits wrapper */
    height: auto;
    display: block;
}
.woocommerce ul.products li.product .bs-product-image-wrapper a {
    display: block; /* Ensure link wraps image properly */
}

/* Product Info Wrapper (Title, Warranty, Model, Price, AND Buttons) */
/* This element should be created by your PHP functions */
.woocommerce ul.products li.product .bs-product-info-wrapper {
    flex-grow: 1; /* Allow this block to take remaining space */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack info (title, warranty, model, price) and buttons vertically */
    justify-content: space-between; /* Push buttons to the bottom of this info area */
    align-items: flex-start; /* Align text items to the left */
    text-align: left; /* Align text content to the left */
    height: 100%; /* Ensure it takes full available height from parent */
}

/* --- Content WITHIN Product Info Wrapper (text-based info) --- */

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Arial', sans-serif; /* Replace with your theme's primary font, e.g., 'Poppins' */
    font-size: 20px; /* Adjust font size for better fit */
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 5px; /* Space below title */
    line-height: 1.2;
    width: 100%; /* Ensure title takes full width for consistent alignment */
    text-decoration: none; /* Remove underline from title link */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: inherit; /* Ensure title link color is inherited */
    text-decoration: none; /* No underline */
}

/* Custom Fields (Warranty & Model Number) */
/* These classes (bs-product-warranty, bs-battery-model-number)
   are assumed to be added by your PHP functions in functions.php */
.woocommerce ul.products li.product .bs-product-warranty,
.woocommerce ul.products li.product .bs-battery-model-number {
    font-family: 'Arial', sans-serif; /* Replace with your theme's primary font */
    font-size: 14px;
    color: #666;
    margin-bottom: 5px; /* Space between lines */
    font-weight: normal;
    width: 100%; /* Ensure they take full width for consistent alignment */
}

/* Product Price */
.woocommerce ul.products li.product .price {
    font-family: 'Arial', sans-serif; /* Replace with your theme's primary font */
    font-size: 24px;
    font-weight: bold;
    color: #d62828; /* Your specific red color for the price */
    margin-top: 10px;
    margin-bottom: 15px; /* Space between price and the buttons below it */
    display: block; /* Ensure it takes full width of its container */
    width: 100%;
}
.woocommerce ul.products li.product .price .woocommerce-price-suffix {
    font-size: 12px;
    font-weight: normal;
    color: #888;
    display: block;
    margin-top: 2px;
}

/* --- Action Buttons Wrapper (Inside bs-product-info-wrapper) --- */
/* This is the container for the "Check Specs" and "Select" buttons */
/* This element should be created by your PHP functions */
.woocommerce ul.products li.product .bs-action-buttons-wrapper {
    display: flex; /* Make this wrapper a flex container to arrange buttons horizontally */
    justify-content: flex-start; /* Align buttons to the left */
    gap: 10px; /* Space between the two buttons */
    width: 100%; /* Take full width */
    flex-wrap: wrap; /* Allow buttons to wrap to next line on small screens */
    margin-top: auto; /* Pushes this button wrapper to the bottom of the .bs-product-info-wrapper */
    padding: 0; /* Pastikan tidak ada padding ekstra pada wrapper tombol */
    box-sizing: border-box;
}

/* General Button Styling (applies to both buttons) */
.woocommerce ul.products li.product .button {
    font-family: 'Arial', sans-serif; /* Replace with your theme's primary font */
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    display: flex; /* Use flex on buttons themselves to center text/content */
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* Allow buttons to grow */
    max-width: 160px; /* Max width for each button */
    box-sizing: border-box;
    margin: 0; /* Reset default button margins, spacing handled by gap on parent */
}

/* "CHECK SPECS" Button Styling */
/* This class (bs-check-specs-button) is assumed to be added by your PHP functions */
.woocommerce ul.products li.product .bs-check-specs-button {
    background-color: #333; /* Dark grey */
    color: #fff;
    border: 2px solid #333;
}
.woocommerce ul.products li.product .bs-check-specs-button:hover {
    background-color: #555;
    border-color: #555;
}

/* "SELECT" (Add to Cart) Button Styling */
/* This targets the default WooCommerce Add to Cart button class */
.woocommerce ul.products li.product .add_to_cart_button {
    background-color: #d62828; /* Your specific red color */
    color: #fff;
    border: 2px solid #d62828;
}
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background-color: #b81c1c;
    border-color: #b81c1c;
}

/* --- HIDE "VIEW BASKET" AND OTHER MESSAGES --- */
/* This will hide the default WooCommerce message that appears after adding to cart */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: none !important; /* Hide all WooCommerce notices/messages */
}

/* ========================================= */
/* Responsive Adjustments for Smaller Screens */
/* ========================================= */
@media (max-width: 767px) {
    .woocommerce ul.products li.product {
        padding: 15px; /* Slightly less padding on mobile */
        min-height: unset; /* Revert min-height to unset, let content define height */
        align-items: center; /* Center items for stacked layout */
        /* PENTING: Pengaturan lebar agar kartu mengisi ruang penuh */
        width: calc(100% - 50px) !important; /* Ambil 100% lebar layar minus 20px (10px margin kiri + 10px margin kanan) */
        margin: 10px auto !important; /* Center individual cards horizontally with 10px top/bottom margin */
        float: none !important; /* Pastikan tidak ada floating yang mengganggu */
    }
    /* Stack image and info vertically on mobile */
    .woocommerce ul.products li.product .bs-product-card-inner {
        flex-direction: column;
        align-items: center; /* Center them */
        text-align: center; /* Center text within info block */
        margin-bottom: 10px;
    }
    .woocommerce ul.products li.product .bs-product-image-wrapper {
        margin-right: 0;
        margin-bottom: 5px;
        width: 150px; /* Smaller image width on mobile */
    }
    .woocommerce ul.products li.product .bs-product-info-wrapper {
        align-items: center; /* Center text info on mobile */
        text-align: center;
        flex-grow: 1; /* Ensure it takes available vertical space */
        justify-content: flex-start; /* Start content from top */
    }
    /* Ensure all text is centered for stacked mobile layout */
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .bs-product-warranty,
    .woocommerce ul.products li.product .bs-battery-model-number,
    .woocommerce ul.products li.product .price {
        text-align: center;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 18px;
        margin-bottom:-10px;
    }
    .woocommerce ul.products li.product .bs-product-warranty,
    .woocommerce ul.products li.product .bs-battery-model-number {
        font-size: 13px;
    }
    .woocommerce ul.products li.product .price {
        font-size: 22px;
        margin-bottom: 10px; /* Reduce space before buttons on mobile */
    }
    .woocommerce ul.products li.product .price .woocommerce-price-suffix {
        font-size: 11px;
    }
    /* Stack buttons vertically on mobile */
    .woocommerce ul.products li.product .bs-action-buttons-wrapper {
       /* flex-direction: column;*/
        gap: 8px;
        justify-content: center; /* Center stacked buttons */
        margin-top: auto; /* Push buttons to the bottom */
    }
    .woocommerce ul.products li.product .button {
        /* REVISI: Paksa lebar 100% untuk tombol yang menumpuk */
        width: 100% !important; /* Full width for buttons on mobile (they will stack) */
        max-width: unset !important; /* Remove max-width constraint for stacking */
        flex-grow: 0 !important; /* Jangan biarkan tumbuh secara fleksibel saat menumpuk */
        flex-shrink: 0 !important; /* Jangan biarkan menyusut saat menumpuk */
        padding: 10px 15px;
        font-size: 14px;
    }
}/* End custom CSS */