.web-editor-paged-menu {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    /* Prevent collapse during transition */
}

.web-editor-paged-menu ul {
    display: grid;
    grid-template-columns: repeat(var(--paged-menu-cols, 4), 1fr);
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: translateX(0);
}

/* Responsive grid */
@media (max-width: 1024px) {
    .web-editor-paged-menu ul {
        grid-template-columns: repeat(var(--paged-menu-cols-tablet, 3), 1fr);
    }
}

@media (max-width: 767px) {
    .web-editor-paged-menu ul {
        grid-template-columns: repeat(var(--paged-menu-cols-mobile, 2), 1fr);
    }
}

.web-editor-paged-menu ul.wd-fade-out {
    opacity: 0;
    transform: translateX(-20px);
}

.web-editor-paged-menu ul.wd-fade-in {
    opacity: 0;
    transform: translateX(20px);
    animation: fadeInSlide 0.3s ease-in-out forwards;
}

@keyframes fadeInSlide {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wd-menu-item {
    display: block;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    /* Ensure it fills grid cell */
    box-sizing: border-box;
}

.wd-menu-item.wd-main-category {
    grid-column: 1 / -1;
    /* Full width for 'All products in X' */
    height: auto;
    /* Main category usually just one banner-like item */
}

.wd-menu-item.wd-no-subcategories,
.wd-menu-item.wd-no-categories {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
}

/* Link Styling */
.wd-menu-item a {
    display: flex;
    align-items: center;
    column-gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-direction: column;
    /* Stack image and text by default? Or keep row? user didn't specify, keeping row as per original CSS implies */
    text-align: center;
}

/* Original CSS had row layout, let's keep it flexible or stacked? 
   Original: display: flex; align-items: center; 
   Let's default to column for grid items usually, but original was row.
   Let's keep row but maybe column for mobile? 
   Actually, looking at original image usage, standard is often image on top or side. 
   Original CSS: flex-direction: row; (implied default)
   Let's keep it row for now, controls can change it later if requested.
*/
.wd-menu-item a {
    flex-direction: column;
    justify-content: var(--wd-v-align, center);
    align-items: var(--wd-h-align, center);
    padding: 10px;
    background: #fff;
    /* Default bg */
    border: 1px solid #eee;
    border-radius: 5px;
    transition: all 0.3s;
    height: 100%;
    gap: 10px;
}

/* Row Override */
.web-editor-direction-row .wd-menu-item a,
.web-editor-direction-tablet-row .wd-menu-item a,
.web-editor-direction-mobile-row .wd-menu-item a {
    justify-content: var(--wd-h-align, flex-start);
    align-items: var(--wd-v-align, center);
}

/* Column Override (Restoring default if needed responsively) */
.web-editor-direction-tablet-column .wd-menu-item a,
.web-editor-direction-mobile-column .wd-menu-item a {
    justify-content: var(--wd-v-align, center);
    align-items: var(--wd-h-align, center);
}

.wd-menu-item a:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.wd-menu-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Back Button */
.web-editor-back-button {
    display: inline-block;
    margin-bottom: 15px;
    padding: 8px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}