.elementor-2633 .elementor-element.elementor-element-611bf3a{--display:flex;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-2633 .elementor-element.elementor-element-611bf3a{--min-height:900px;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS *//* ===========================================================
   Modern styling untuk shortcode bawaan WooCommerce [product_categories]
   Tidak mengubah HTML — hanya menimpa tampilan default
   (li.product-category, h2.woocommerce-loop-category__title, mark.count)
   menjadi card modern dengan layout CSS GRID kolom tetap.

   Kenapa grid (bukan flex) di sini: dengan flex + flex-grow, kartu sisa
   di baris terakhir otomatis melar mengisi sisa ruang baris. Dengan grid
   kolom tetap (repeat(4, 1fr)), setiap kartu — termasuk sisa di baris
   terakhir — ukurannya SELALU sama dengan kartu lain, tidak ada yang
   membesar sendiri.
   =========================================================== */

.woocommerce .row.clearfix,
.woocommerce ul.products{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

li.product-category,
li.product-category *{
    box-sizing: border-box;
}

li.product-category{
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(17,17,17,.07);
    box-shadow: 0 1px 2px rgba(17,17,17,.05);
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
    position: relative;
}

li.product-category:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(17,17,17,.14);
}

li.product-category > a{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
}

li.product-category img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
    background: #f3f4f6;
}

li.product-category:hover img{
    transform: scale(1.08);
}

/* tombol panah muncul saat hover, murni CSS, tanpa ubah HTML */
li.product-category > a::after{
    content: "→";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #111315;
    font-size: 15px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

li.product-category:hover > a::after{
    opacity: 1;
    transform: translateY(0);
}

h2.woocommerce-loop-category__title{
    margin: 0 !important;
    padding: 16px 18px 18px;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

mark.count{
    background-color: #f3f4f6;
    color: #6b7280 !important;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* RESPONSIVE — hanya ubah jumlah kolom grid, kartu tetap seragam */
@media (max-width: 1024px){
    .woocommerce .row.clearfix,
    .woocommerce ul.products{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
    .woocommerce .row.clearfix,
    .woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
    h2.woocommerce-loop-category__title{ font-size: 14.5px; padding: 12px 14px 14px; }
}
@media (max-width: 480px){
    .woocommerce .row.clearfix,
    .woocommerce ul.products{ grid-template-columns: 1fr; }
}/* End custom CSS */