/*
Theme Name: Hueman Child
Theme URI: https://presscustomizr.com
Description: Child theme for the Hueman WordPress theme
Author: Dream
Template: hueman
Version: 1.0.0
*/
.shelf-wrapper { overflow-x: auto; padding: 20px 0; width: 100%; -webkit-overflow-scrolling: touch; }
            .shelf { background: #8d6e63; height: 350px; border-bottom: 20px solid #5d4037; border-radius: 8px; display: flex; align-items: flex-end; padding: 0 30px 20px 30px; gap: 30px; white-space: nowrap; min-width: min-content; position: relative; }
            
            .book { 
                flex: 0 0 220px; 
                height: 330px; 
                border-radius: 6px; 
                transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
                background-size: cover; 
                background-position: center; 
                background-repeat: no-repeat;
                background-color: #f0f0f0; 
                box-shadow: 8px 8px 15px rgba(0,0,0,0.3); 
                border: 1px solid rgba(0,0,0,0.1); 
                display: flex; 
                flex-direction: column; 
                justify-content: flex-end; 
                text-decoration: none; 
                overflow: hidden; 
            }
            .book:hover { transform: translateY(-30px); }
            
            .book-title-label { 
                background: rgba(0,0,0,0.7);
    			color: #fff;
   				padding: 10px;
				font-size: 0.9rem;
   				 text-align: center;
    width: 100%;

    /* Show max 2 lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;

    line-height: 1.4em;
    max-height: 2.4em; /* 2 lines × 1.2em */

    word-break: break-word;
            }
.shelf-title { color: #5d4037; font-size: 1.5rem; font-weight: bold; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; padding: 10px; align-self: flex-start; height: 100%; }
/* Row wrapper to clear floats */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Adjust spacing between images */
}

.image-grid a {
    /* (100% / 3 images) - gap size = 33.33% - 10px */
    flex: 0 0 calc(33.333% - 10px);
    text-decoration: none;
}

.image-grid a img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s;
}

/* Hover effect */
.image-grid a:hover img {
    transform: scale(1.03);
}

/* Responsive for Tablet */
@media (max-width: 768px) {
    .image-grid a {
        flex: 0 0 calc(50% - 8px);
    }
}

/* Responsive for Mobile */
@media (max-width: 480px) {
    .image-grid a {
        flex: 0 0 100%;
    }
}

#menu-sidebar_menu .menu-item-has-children > .sub-menu{
    display:none;
    margin-top:5px;
}

#menu-sidebar_menu .menu-item-has-children.open > .sub-menu{
    display:block;
}

/* ลูกศร */
#menu-sidebar_menu .menu-item-has-children > a::after{
    content:"▸";
    float:right;
    transition:.2s;
}

#menu-sidebar_menu .menu-item-has-children.open > a::after{
    transform:rotate(90deg);
}