@media (max-width: 850px){
#page-home .flickity-button.flickity-prev-next-button{
background: #fff !important;
    opacity: 1 !important;
    height: 20px !important;
}
#singlepage .woocommerce-tabs ul li {
        width: 100% !important;
    }
}

#tab-description ul li{
    font-size: 1rem;margin-left:0.7rem!important;
}
#tab-description ol li{
    font-size: 1rem;
    margin-left:0.7rem!important;
}

/* Mobile product sliders: show 2 full + a peek of the 3rd (2.5 per view) */
@media (max-width: 549px){
    #page-home .row-slider.small-columns-2 .col{
        flex-basis: 40% !important;
        max-width: 40% !important;
    }
    /* Header band spans full width on mobile too (title + ดูทั้งหมด in one column) */
    .headertextcol{
        flex-basis: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    }
}

/* Desktop product sliders: show 5 full + a peek of the 6th (5.5 per view) */
@media (min-width: 850px){
    #page-home .row-slider.large-columns-5 .col{
        flex-basis: 18.1818% !important;
        max-width: 18.1818% !important;
    }
}

/* Section title headers: full-width blue band, title left + "ดูทั้งหมด" right, no border.
   Painted on the two header columns (they sit side by side and join into one bar);
   the product slider column is left untouched. */
.headertextcol,
.readmoretextcol{
    background: #c8f3ff !important;
    justify-content: center !important;
    margin-bottom: 1.2rem;
}
.headertextcol{
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
}
.readmoretextcol{ border-radius: 0 14px 14px 0; }

/* Special case (หนังสือใหม่): title + "ดูทั้งหมด" live in ONE column -> full pill, side by side */
.headertextcol:has(.readmoretext){ border-radius: 14px; }
.headertextcol:has(.readmoretext) > .col-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Text colour on the band */
.titleheader h2,
.titleheader p,
.titleheader strong,
.titleheader h2 i{ color: #222 !important; margin: 0; }
.readmoretext,
.readmoretext p,
.readmoretext a{ color: #16386b !important; margin: 0; }

.headertextcol h2{
    padding-left: 14px;
}

.titleheader h2{ font-weight: 500; }

.headertextcol .readmoretext,
.headertextcol .readmoretext p,
.headertextcol .readmoretext a{ color: #222 !important; }

.readmoretext a{ margin: 0 4px 0 0; }

/* Add a circle-right icon after every "ดูทั้งหมด" link */
.readmoretext a::after{
    content: "\f35a"; /* fa-circle-right */
    font-family: "Font Awesome 7 Free";
    font-weight: 400;
    margin-left: 6px;
    font-size: 0.9em;
    vertical-align: middle;
}

.headertextcol .col-inner,
.readmoretextcol .col-inner{
    padding-top: 10px;
    padding-bottom: 10px;
}
/* ============ Book product card ============ */

/* No category label in the card design */
.product-small .box-text .category{ display: none !important; }

/* Title: dark, clamped to 2 lines with an ellipsis */
.product-small .box-text .product-title{
    margin: 0 0 6px;
}
.product-small .box-text .product-title a{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #222;
    font-weight: 400;
    font-size: 1.05em;
    line-height: 1.35;
    min-height: 2.7em;
}

/* Meta: author on its own full-width row, then rating left + icons right */
.fm-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    margin: 2px 0 10px;
    /* min-width:0 lets this shrink inside its flex parent instead of
       stretching the card when a long author name is present */
    min-width: 0;
    max-width: 100%;
}

.fm-author{
    flex: 0 0 100%;
    max-width: 100%;
    /* without this, min-width:auto keeps the nowrap text at full width
       and it spills over the neighbouring column */
    min-width: 0;
    font-size: 0.8em;
    line-height: 1.3;
    color: #5f5f5f;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-author a{ color: #5f5f5f; }
.fm-author a:hover{ color: #222; }

.fm-rating{
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    color: #8a8a8a;
    line-height: 1.2;
    white-space: nowrap;
}
.fm-rating .star-rating{ font-size: 0.85em; color: #f5a623; }
.fm-star-empty i{ color: #7a7a7a; }
.fm-rating-count{ color: #7a7a7a; }

/* Format icons: round, light blue */
.fm-formats{
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
}
.fm-format{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-decoration: none;
}
.fm-format.is-on{ background: #cfeaf7; color: #1a9ad1;margin-top: .1em; }
.fm-format.is-off{ background: #f0f1f2; color: #c8cbce; }
.fm-format[href]:hover{ color: #087ca8; transform: translateY(-1px); }
.fm-format > i{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 1;
}

/* Price row: price on the left, round cart button on the right */
.product-small .box-text{ min-width: 0; }
.product-small .price-wrapper{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}
.product-small .price-wrapper .fm-meta{ flex: 0 0 100%; }
.product-small .price-wrapper .price{
    line-height: 1.15;
    flex: 1 1 auto;
    min-width: 0;
}
/* Only stack when it's a sale price (has both original and sale); price
   ranges on variable products stay on one line. */
.product-small .price-wrapper .price:has(ins):has(del){
    display: flex;
    flex-direction: column;
}
/* Sale price big and cyan, original struck through underneath */
.product-small .price-wrapper .price ins{
    order: 1;
    text-decoration: none;
    color: #00AEEF;
    font-weight: 700;
    font-size: 1.2em;
}
.product-small .price-wrapper .price del{
    order: 2;
    color: #9aa0a6;
    font-size: 0.85em;
    opacity: 1;
}
.product-small .price-wrapper .price > .amount{
    color: #00AEEF;
    font-weight: 700;
    font-size: 1.2em;
}
.product-small .price-wrapper .price ins .amount,
.product-small .price-wrapper .price ins .amount bdi,
.product-small .price-wrapper .price > .amount bdi{ color: #00AEEF !important; }

.fm-cart-btn{
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #23b7e5;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 auto;
    transition: background .15s ease;
}
.product-small .add_to_cart_button{
    width: 20px;
    text-align: center;
    padding: 0 23px 0 10px;
    border-radius: 50%;
    margin: 0 0 0 0;
}
.fm-cart-btn:hover{ background: #0f9fcc; color: #fff; }
.fm-cart-btn.loading{ opacity: .6; }
.fm-cart-btn.added{ background: #0f9fcc; }
/* hide WooCommerce's "view cart" text link that follows the button */
.product-small .added_to_cart{ display: none !important; }

/* ---- Single product gallery: always show arrows + white background ---- */
.product-gallery-slider .flickity-prev-next-button{
    opacity: 1 !important;
    height: 60px !important;
}
.product-gallery-slider .flickity-prev-next-button:hover{
    background: #fff !important;
}
.product-gallery-slider .flickity-prev-next-button:disabled{
    opacity: 0.45 !important;
}
.product-gallery-slider .flickity-button-icon{
    fill: #111;
}