/*
 Theme Name:   Flatsome Child
 Description:  A child theme of Flatsome
 Template:     flatsome
 Version:      1.0.0
*/

/* ============================================
   SELF-HOSTED FONTS - Roboto
   ============================================ */

/* Roboto Light - 300 */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Roboto Regular - 400 */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Roboto Medium - 500 */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Roboto SemiBold - 600 */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Roboto Bold - 700 */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== SECTION SPACING - Desktop & Tablet (giống sesofoods.com) ===== */
/* Using high specificity to avoid !important */

/* Reduce section padding - top-heavy approach like sesofoods */
html body section,
html body .section,
body #content section,
body #content .section {
    padding-top: 30px;
    padding-bottom: 10px;
}

/* Section content areas */
body .section-content,
#content .section-content,
body section .section-content {
    padding-top: 15px;
    padding-bottom: 10px;
}

/* Reduce column padding for more space (từ 15px xuống 10px) */
html body .col,
html body .columns,
html body .gallery-item,
body #content .col,
body #content .columns,
body #content .gallery-item {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
}

/* Keep row margin at default for proper alignment with container */
/* Row margin stays at -15px (or theme default) - we only adjust column padding */

.slide_home .section-content,
.slide_home.section {
    padding-top: 0 !important;
}

/* Section title containers - tighter to content */
body .section-title-container,
#content .section-title-container,
body .container.section-title-container {
    margin-bottom: 15px;
    padding-bottom: 0;
}

/* Product category columns - extra compact */
body .product-category.col,
#content .product-category.col,
body .row .product-category.col {
    padding-bottom: 5px;
}

/* Slider wrapper - no extra margins */
body .slider-wrapper,
#content .slider-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

/* Col-inner - no extra padding */
body .col-inner,
#content .col-inner {
    padding-bottom: 0;
}

/* Box elements - minimal margins */
body .col .box,
body .col .box-image,
#content .col .box {
    margin-bottom: 0;
}

/* ============================================
   HOMEPAGE PRODUCT CARDS - Match sesofoods.com
   Mỗi card có border đầy đủ, dùng margin âm để liền nhau
   ============================================ */

/* Container - KHÔNG có border, chỉ reset margin */
.slider-wrapper,
.row.slider,
.products.row {
    margin-left: 0;
    margin-right: 0;
}

/* Column - padding reset (exclude .slide_news) */
.products .col,
.row.slider:not(.slide_news) .col,
.slider-wrapper:not(.slide_news) .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.slide_news h5 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.428;
}

/* Col-inner reset (exclude .slide_news) */
.products .col .col-inner,
.row.slider:not(.slide_news) .col .col-inner,
.slider-wrapper:not(.slide_news) .col .col-inner {
    padding: 0;
    height: 100%;
}

/* ===== SLIDE NEWS - Proper spacing ===== */
/* Target all possible structures where .slide_news might be applied */
.slide_news .col,
.slide_news.row .col,
.slide_news .row .col,
.slide_news.slider .col,
.slide_news .slider .col,
.slide_news.row.slider .col,
.slide_news .row.slider .col,
section.slide_news .col {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 15px !important;
}

.slide_news .col .col-inner,
.slide_news.row .col .col-inner,
.slide_news .row .col .col-inner,
section.slide_news .col .col-inner {
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Product card - BORDER đầy đủ 4 cạnh */
.products .product-small.box,
.row .product-small.box,
.slider .product-small.box {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    /* Border đầy đủ 4 cạnh */
    border: 1px solid #e5e5e5;
    border-radius: 0;
    /* Padding bên trong */
    padding: 15px;
    /* Margin âm để border chồng lên nhau */
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
    transition: box-shadow 0.3s ease, z-index 0.3s ease;
}

/* Hover effect - nâng z-index để thấy border đầy đủ */
.products .product-small.box:hover,
.row .product-small.box:hover,
.slider .product-small.box:hover {
    z-index: 2;
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Product image wrapper - có border radius riêng */
.product-small .box-image,
.product-small .col-inner .box-image {
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Product image */
.product-small .box-image img {
    border-radius: 5px;
    transition: transform 0.3s ease;
    width: 100%;
}

/* Image zoom on hover */
.product-small.box:hover .box-image img {
    transform: scale(1.03);
}

/* Product content area - flex grow to push price down */
.product-small .box-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: center;
}

/* Product title - min-height for equal alignment */
.product-small .box-text .name,
.product-small .box-text .product-title {
    min-height: 42px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
    margin-bottom: 8px;
    /* Limit to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price area - stays at bottom */
.product-small .box-text .price-wrapper,
.product-small .box-text .price {
    margin-top: auto;
    text-align: center;
}

/* Original price (strikethrough) */
.product-small .box-text .price del {
    color: #999;
    font-size: 12px;
    margin-right: 5px;
}

/* Sale price */
.product-small .box-text .price ins,
.product-small .box-text .price>.amount {
    color: #228B22;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

/* Badge positioning - inside padding */
.product-small .badge-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
}

/* Sale badge */
.product-small .callout.badge,
.product-small .onsale {
    background: #ff6b35;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.header-main {
    background: #f5f3eab3 !important;
}

.nav-dark .nav>li.html {
    color: #878787 !important;
}

.header-search-form .header-search-form-wrapper {
    min-width: 230px;
}

.box-text {
    color: #222;
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
}

.header-social-icons a {
    color: #878787;
}

.header-search-form-wrapper .form-flat input:not([type=submit]) {
    background-color: #fff !important;
    padding: 1.8em;
}

.slide_home .col {
    padding: 0 !important;
}

.header:not(.transparent) .header-nav-main.nav>li>a {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #222222;
    letter-spacing: normal;
    text-transform: uppercase;
    padding: 15px 12px;
    opacity: 1;
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    -webkit-transition: none;
    transition: none;
}

.logo-left .logo {
    margin-right: 0;
}

.header-cart-icon img {
    max-width: 25px;
}

.formhome form {
    width: 70%;
    display: block;
    margin: auto;
}

/* === Category Slider on Homepage (.fullw_home) === */
.fullw_home .slider_col .slider-wrapper .flickity-prev-next-button,
.fullw_home .slider_col .slider-wrapper .flickity-page-dots {
    display: none !important;
}

/* Rebuilt slider styles */
.category-slider-rebuilt {
    width: 100%;
}

.category-slider-rebuilt .category-slide {
    width: 35%;
    padding: 0 10px;
    box-sizing: border-box;
}

.fullw_home .slider_col .box-image img {
    border-radius: 12px;
    object-fit: cover;
    aspect-ratio: 3/4;
    width: 100%;
    height: auto;
}

.fullw_home .slider_col .box-text h4 {
    color: #173963;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}

.fullw_home .slider_col .box.has-hover {
    background: transparent;
}

.fullw_home .slider_col .box.has-hover .shade {
    display: none;
}

/* Custom Product Page Styles - REVISED */

/* Price Styling */
.product-info .price-wrapper .price,
.product-page-price .price-wrapper .price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.product-info .price-wrapper del .amount,
.product-page-price .price-wrapper del .amount {
    color: #999;
    font-weight: normal;
    font-size: 18px;
    opacity: 1;
}

.product-info .price-wrapper ins .amount,
.product-page-price .price-wrapper ins .amount {
    color: #1a2b5e;
    /* Dark Blue */
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
}

/* Fallback for simple price */
.product-info .price-wrapper>.amount,
.product-page-price .price-wrapper>.amount {
    color: #1a2b5e;
    font-size: 24px;
    font-weight: 700;
}

[data-icon-label]:after {
    background-color: #ff0000;
}

/* Buttons - SESO Style (matching sesofoods.com) */

/* Add to Cart Button - Primary Green */
.single_add_to_cart_button,
.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt,
.single_variation_wrap .single_add_to_cart_button.button,
.single_variation_wrap .single_add_to_cart_button.button.alt,
.product-info .quantity+.single_add_to_cart_button,
.buttons-row .single_add_to_cart_button {
    background-color: #228B22 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 40px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 0 20px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    font-family: 'Nunito Sans', sans-serif !important;
    min-width: auto;
    transition: background-color 0.3s ease;
}

.single_add_to_cart_button:hover,
.single_add_to_cart_button.button:hover,
.single_variation_wrap .single_add_to_cart_button.button:hover {
    background-color: #1a6b1a !important;
    color: #FFFFFF !important;
}

/* DevVN Quick Buy "Mua ngay" Button - Same Green Style as Add to Cart */
/* Override DevVN plugin's orange gradient with high specificity */
body a.devvn_buy_now_style,
body a.devvn_buy_now,
body .devvn_buy_now_style,
body .devvn_buy_now,
.product-info a.devvn_buy_now_style,
.product-summary a.devvn_buy_now_style,
.buttons-row a.devvn_buy_now_style,
.buttons-row .devvn_buy_now_style,
.buttons-row .devvn_buy_now {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* Override gradient with solid color */
    background: #228B22 !important;
    background-color: #228B22 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 40px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 0 20px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    font-family: 'Nunito Sans', sans-serif !important;
    min-width: auto;
    max-width: none !important;
    width: auto !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 0 !important;
}

/* Hide sub-text in DevVN button to match simple style */
body .devvn_buy_now_style span,
body .devvn_buy_now span {
    display: none !important;
}

/* Make the main text (strong) uppercase */
body .devvn_buy_now_style strong,
body .devvn_buy_now strong {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    display: block !important;
}

body a.devvn_buy_now_style:hover,
body a.devvn_buy_now:hover,
body .devvn_buy_now_style:hover,
body .devvn_buy_now:hover {
    background: #1a6b1a !important;
    background-color: #1a6b1a !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

/* Alternative: Outline style for secondary button */
/* Uncomment if you want "Thêm vào giỏ" to be outline style */
/*
.single_add_to_cart_button,
.single_add_to_cart_button.button {
    background-color: transparent !important;
    color: #228B22 !important;
    border: 2px solid #228B22 !important;
}

.single_add_to_cart_button:hover {
    background-color: #228B22 !important;
    color: #FFFFFF !important;
}
*/

/* Quantity Input */
.quantity .minus,
.quantity .plus {
    background: #f5f5f5 !important;
    border-radius: 4px 0 0 4px !important;
}

.quantity .plus {
    border-radius: 0 4px 4px 0 !important;
}

.quantity .qty {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
}

/* Variation Swatches - Corrected Selector */
/* Handling both standard and woo-variation-items-wrapper classes */
.variations td.value .variable-items-wrapper .variable-item,
.variations td.value.woo-variation-items-wrapper .variable-item {
    border-radius: 4px;
    box-shadow: 0 0 0 1px #ddd inset;
    transition: all 0.2s;
}

.variations td.value .variable-items-wrapper .variable-item.selected,
.variations td.value.woo-variation-items-wrapper .variable-item.selected {
    box-shadow: 0 0 0 1px #1a2b5e inset !important;
    color: #1a2b5e !important;
    position: relative;
    overflow: visible;
}

/* Checkmark */
.variations td.value .variable-items-wrapper .variable-item.selected::after,
.variations td.value.woo-variation-items-wrapper .variable-item.selected::after {
    content: "✓";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background-color: #1a2b5e;
    color: #fff;
    font-size: 10px;
    border-radius: 50%;
    display: flex;
    /* Flex is crucial for centering */
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
}

a.reset_variations {
    display: none !important;
}

/* ===== PHASE 2: Match inochi.vn Layout ===== */

/* Hide the top price range ONLY for variable products (show only variation price) */
/* Simple products don't have .variations class, so they'll show price normally */
.product-info.has-variations .price-wrapper {
    display: none !important;
}

/* Variation price styling */
.woocommerce-variation-price .price {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a2b5e !important;
}

/* Discount Badge */
.discount-badge {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    vertical-align: middle;
}

/* Savings Text */
.savings-text {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* Quantity Label */
.quantity-label {
    display: none !important;
    /* Hide PHP-generated label, use CSS ::before instead */
}

/* Layout for quantity and buttons - All in one row */
.woocommerce-variation-add-to-cart,
form.cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 10px;
}

/* Quantity selector inline - fixed width */
.woocommerce-variation-add-to-cart .ux-quantity,
form.cart .quantity {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Hide old quantity label */
.woocommerce-variation-add-to-cart .ux-quantity::before {
    display: none;
}

/* Buttons Row Container (created by JS) - share row with quantity */
.buttons-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    margin: 0 !important;
    flex: 1 1 auto !important;
}

/* Both buttons in the row - compact size */
.buttons-row .button,
.buttons-row .single_add_to_cart_button,
.buttons-row .devvn_buy_now_style,
.buttons-row .devvn_buy_now {
    flex: 1 1 auto !important;
    min-width: 100px !important;
    max-width: none !important;
    text-align: center;
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

/* Hide original button positions before JS reorganizes */
.woocommerce-variation-add-to-cart>.single_add_to_cart_button {
    display: none;
}

/* Short description styling */
.product-short-description {
    margin-bottom: 15px;
}

/* ============================================
   FOOTER SECTION - Match sesofoods.com
   ============================================ */

/* Footer Headings (h2) */
.footer_pho .col h2,
.footer_pho .col-inner h2 {
    color: #222222;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 15px;
    letter-spacing: normal;
    line-height: 1.43;
    text-transform: uppercase;
}

/* Footer Links */
.footer_pho .col a,
.footer_pho .col-inner a,
.footer_pho .ux-menu-link__text {
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer_pho .col a:hover,
.footer_pho .col-inner a:hover {
    color: #222222;
}

/* Footer Menu Items Spacing */
.footer_pho .ux-menu-link {
    padding: 2px 0;
}

.footer_pho .ux-menu-link__link {
    padding: 5px 0;
}

/* Footer Paragraphs (Address, Contact) */
.footer_pho .col p,
.footer_pho .col-inner p {
    font-family: 'Roboto', sans-serif;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 10px;
}

/* Footer Icons */
.footer_pho .col p i,
.footer_pho .col-inner p i {
    color: #878787;
    margin-right: 8px;
    width: 18px;
    text-align: center;
}

/* Padding left for address lines */
.footer_pho .pl__30 {
    padding-left: 26px;
    display: block;
}

/* Social Icons in Footer */
.footer_pho .social-icons a.icon {
    color: #878787;
    border-color: #878787;
}

.footer_pho .social-icons a.icon:hover {
    color: #222222;
    border-color: #222222;
}

/* Custom Breadcrumb - Above Product Row (Match sesofoods.com) */
/* Override Flatsome .product-main padding */
.single-product div.product-main,
.single-product .product-main {
    padding: 10px 0 !important;
}

.custom-breadcrumb-wrapper {
    padding: 15px 0;
    background-color: #f6f6f8;
    /* Light beige background like sesofoods.com */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

.custom-breadcrumb-wrapper .woocommerce-breadcrumb {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgb(34, 34, 34);
    margin: 0;
    padding: 0;
    text-transform: none !important;
    /* Override Flatsome uppercase */
}

.custom-breadcrumb-wrapper .woocommerce-breadcrumb a {
    color: rgb(34, 34, 34);
    text-decoration: none;
    transition: color 0.2s ease;
    text-transform: none !important;
    /* Override Flatsome uppercase */
}

.custom-breadcrumb-wrapper .woocommerce-breadcrumb a:hover {
    color: #173963;
    text-decoration: none;
}

/* Change separator from / to > */
.custom-breadcrumb-wrapper .woocommerce-breadcrumb .divider {
    display: inline-block;
    font-size: 0;
    /* Hide the / character */
    margin: 0 8px;
    color: rgb(34, 34, 34);
}

.custom-breadcrumb-wrapper .woocommerce-breadcrumb .divider::after {
    content: ">";
    font-size: 14px;
    color: rgb(34, 34, 34);
}

.custom-breadcrumb-wrapper .woocommerce-breadcrumb .breadcrumb-sep {
    color: rgb(34, 34, 34);
    margin: 0 5px;
    font-size: 12px;
}

/* Hide original breadcrumb in product summary */
.product-info .breadcrumbs,
.product-info .is-breadcrumbs {
    display: none !important;
}

/* ============================================
   CUSTOM CATEGORY PAGE STYLES
   ============================================ */

/* === Banner Section === */
.inochi-category-banner {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    margin-bottom: 0;
}

.inochi-category-banner .banner-image {
    width: 100%;
    height: 100%;
}

.inochi-category-banner .banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.inochi-category-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 20px;
}

.inochi-category-banner .banner-breadcrumb {
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
}

.inochi-category-banner .banner-breadcrumb .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #173963;
}

.inochi-category-banner .banner-breadcrumb .woocommerce-breadcrumb a {
    color: #173963;
    text-decoration: none;
}

.inochi-category-banner .banner-breadcrumb .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* === Toolbar Section === */
.inochi-category-toolbar {
    background: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.inochi-category-toolbar .toolbar-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
}

.inochi-category-toolbar .toolbar-inner.row {
    display: flex !important;
    flex-direction: row !important;
}

.inochi-category-toolbar .toolbar-left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.inochi-category-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    margin-left: auto;
}

/* Filter Section */
.filter-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-section .filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-section .filter-icon img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.filter-section .filter-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Dropdown Styles - Shared */
.filter-dropdown,
.sort-dropdown {
    position: relative;
}

.filter-dropdown .dropdown-toggle,
.sort-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #173963;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #173963;
    min-width: 140px;
    transition: all 0.2s ease;
}

.filter-dropdown .dropdown-toggle:hover,
.sort-dropdown .dropdown-toggle:hover {
    background: #f8f9fa;
}

.filter-dropdown.open .dropdown-toggle,
.sort-dropdown.open .dropdown-toggle {
    border-color: #173963;
    box-shadow: 0 0 0 2px rgba(23, 57, 99, 0.1);
}

.dropdown-arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.filter-dropdown.open .dropdown-arrow,
.sort-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.sort-dropdown .sort-icon {
    display: flex;
    align-items: center;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.filter-dropdown.open .dropdown-menu,
.sort-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sort-dropdown .dropdown-menu {
    right: 0;
    left: auto;
}

/* Dropdown Items */
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.dropdown-menu .dropdown-item:hover {
    background: #f5f5f5;
}

.dropdown-menu .dropdown-item.active {
    color: #173963;
    font-weight: 600;
}

.dropdown-menu .dropdown-item .check-icon {
    margin-right: 8px;
    color: #173963;
}

/* Price Filter Checkboxes */
.price-filter-dropdown .dropdown-item {
    gap: 10px;
}

.price-filter-dropdown .dropdown-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    accent-color: #173963;
}

.price-filter-dropdown .dropdown-item .item-label {
    flex: 1;
}

/* ===== FIX NESTED FLICKITY SLIDERS - ONLY FOR .slide_catehome ===== */
/* Desktop: Use flexbox to fix positioning issues */
/* Mobile/Tablet: Let Flickity work normally for swipe functionality */

/* Main container */
.slide_catehome {
    display: block;
    position: relative;
}

/* ===== DESKTOP ONLY FIX (992px and above) ===== */
@media (min-width: 992px) {

    /* Reset for nested slider - position relative instead of absolute */
    .slide_catehome .row.slider .product-category.col,
    .slide_catehome .row.row-slider .product-category.col {
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }

    /* Make inner slider use flexbox for category items */
    .slide_catehome .row.slider .flickity-slider,
    .slide_catehome .row.row-slider .flickity-slider {
        display: flex !important;
        flex-wrap: nowrap;
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }

    /* Category columns proper width for 8 columns */
    .slide_catehome .row.large-columns-8 .product-category.col {
        width: 12.5% !important;
        flex: 0 0 12.5% !important;
        max-width: 12.5% !important;
        padding: 0 5px !important;
    }

    /* Keep flickity-viewport with proper height */
    .slide_catehome .flickity-viewport {
        min-height: 200px;
    }

    /* Row container - proper overflow handling */
    .slide_catehome .row.slider,
    .slide_catehome .row.row-slider {
        overflow: hidden;
        position: relative;
    }
}

/* ===== TABLET (768px - 991px) - Let Flickity handle sizing ===== */
@media (min-width: 768px) and (max-width: 991px) {

    /* Only style appearance, don't override Flickity sizing */
    .slide_catehome .product-category .box-category {
        background: #f8f8f8;
        border-radius: 10px;
        padding: 15px 10px;
        margin: 0 8px;
    }
}

/* ===== MOBILE (below 768px) - Let Flickity handle sizing ===== */
@media (max-width: 767px) {

    /* Only style appearance, don't override Flickity sizing */
    .slide_catehome .product-category .box-category {
        background: #f8f8f8;
        border-radius: 10px;
        padding: 15px 10px;
        margin: 0 5px;
    }

    .slide_catehome .product-category .box-image img {
        max-width: 80px;
        margin: 0 auto;
        display: block;
    }

    .slide_catehome .product-category .header-title {
        font-size: 14px;
        margin-top: 10px;
    }

    .slide_catehome .product-category .count {
        font-size: 12px;
        color: #666;
    }
}



/* ===== FIX CATEGORY SLIDER - 8 COLUMNS ===== */
/* DISABLED - Causing Flickity conflicts
.row.slider.large-columns-8 .product-category.col,
.row.row-slider.large-columns-8 .product-category.col,
.row.slider.large-columns-8 .flickity-slider .product-category.col {
    width: calc(100% / 8) !important;
    flex: 0 0 calc(100% / 8) !important;
    max-width: calc(100% / 8) !important;
}

.slider-wrapper .row.slider .product-category.col {
    position: relative !important;
    left: auto !important;
}

.row.slider.large-columns-8 .flickity-viewport,
.row.row-slider.large-columns-8 .flickity-viewport {
    overflow: visible;
}

@media (max-width: 991px) {
    .row.slider.large-columns-8 .product-category.col,
    .row.row-slider.large-columns-8 .product-category.col {
        width: calc(100% / 4) !important;
        flex: 0 0 calc(100% / 4) !important;
        max-width: calc(100% / 4) !important;
    }
}

@media (max-width: 767px) {
    .row.slider.large-columns-8 .product-category.col,
    .row.row-slider.large-columns-8 .product-category.col {
        width: calc(100% / 2) !important;
        flex: 0 0 calc(100% / 2) !important;
        max-width: calc(100% / 2) !important;
    }
}
*/

/* === Product Grid - 4 columns === */
/* Flatsome uses div.products.row, not ul.products */
/* IMPORTANT: Exclude sliders (.slider, .row-slider) to not break Flickity */
.products.row:not(.slider):not(.row-slider),
.woocommerce .products:not(.slider):not(.row-slider),
.woocommerce-page .products:not(.slider):not(.row-slider),
div.products.row.large-columns-3:not(.slider):not(.row-slider),
div.products.row.large-columns-4:not(.slider):not(.row-slider),
.shop-container .products:not(.slider):not(.row-slider) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

/* Override Flatsome's flex-based column widths */
/* IMPORTANT: Exclude sliders to not break Flickity */
.products.row:not(.slider):not(.row-slider)>.product,
.products.row:not(.slider):not(.row-slider)>.col,
.woocommerce .products:not(.slider):not(.row-slider) .product,
.woocommerce-page .products:not(.slider):not(.row-slider) .product,
.shop-container .products:not(.slider):not(.row-slider) .product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    flex: none !important;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.products .product:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* === Responsive Styles === */
@media (max-width: 991px) {
    .inochi-category-banner {
        height: 250px;
    }

    .products.row:not(.slider):not(.row-slider),
    .woocommerce .products:not(.slider):not(.row-slider),
    .woocommerce-page .products:not(.slider):not(.row-slider),
    .shop-container .products:not(.slider):not(.row-slider),
    div.products.row:not(.slider):not(.row-slider) {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .products.row:not(.slider):not(.row-slider)>.product,
    .products.row:not(.slider):not(.row-slider)>.col,
    div.products:not(.slider):not(.row-slider)>.product {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
}

@media (max-width: 767px) {
    .inochi-category-banner {
        height: 200px;
    }

    .inochi-category-toolbar .toolbar-inner {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .inochi-category-toolbar .toolbar-left,
    .inochi-category-toolbar .toolbar-right {
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }

    .filter-section {
        justify-content: center;
        flex-wrap: wrap;
    }

    .sort-section {
        width: 100%;
    }

    .sort-dropdown {
        width: 100%;
    }

    .sort-dropdown .dropdown-toggle {
        width: 100%;
        justify-content: center;
    }

    .sort-dropdown .dropdown-menu {
        left: 0;
        right: 0;
        width: 100%;
    }

    /* Force 2 columns on mobile - exclude sliders */
    .products.row:not(.slider):not(.row-slider),
    .woocommerce .products:not(.slider):not(.row-slider),
    .woocommerce-page .products:not(.slider):not(.row-slider),
    .shop-container .products:not(.slider):not(.row-slider),
    div.products.row:not(.slider):not(.row-slider),
    .row.large-columns-3:not(.slider):not(.row-slider),
    .row.large-columns-4:not(.slider):not(.row-slider) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .products.row:not(.slider):not(.row-slider)>.product,
    .products.row:not(.slider):not(.row-slider)>.col,
    div.products:not(.slider):not(.row-slider)>.product,
    .row.large-columns-3:not(.slider):not(.row-slider)>.col,
    .row.large-columns-4:not(.slider):not(.row-slider)>.col {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 8px !important;
    }

    /* Fix product card on mobile */
    .products:not(.slider):not(.row-slider) .product .box-image {
        margin-bottom: 10px;
    }

    .products:not(.slider):not(.row-slider) .product .product-title {
        font-size: 13px !important;
        line-height: 1.3;
    }

    .products:not(.slider):not(.row-slider) .product .price {
        font-size: 14px !important;
    }
}

@media (max-width: 479px) {
    .inochi-category-banner {
        height: 150px;
    }

    .inochi-category-banner .banner-breadcrumb {
        padding: 6px 12px;
        font-size: 12px;
    }

    .filter-dropdown .dropdown-toggle,
    .sort-dropdown .dropdown-toggle {
        padding: 8px 12px;
        font-size: 13px;
        min-width: 120px;
    }

    /* Force 2 columns on small mobile - exclude sliders */
    .products.row:not(.slider):not(.row-slider),
    .woocommerce .products:not(.slider):not(.row-slider),
    div.products.row:not(.slider):not(.row-slider) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .products:not(.slider):not(.row-slider) .product {
        padding: 5px !important;
    }
}

/* Hide Flatsome default category header on archive pages */
.woocommerce-page.archive .shop-page-title,
.woocommerce-page.archive .category-page-title {
    display: none !important;
}

/* Hide reviews tab in the tabs section only (not the separate reviews section) */
.woocommerce-tabs #tab-reviews,
.woocommerce-tabs .reviews_tab {
    display: none !important;
}

/* ============================================
   INOCHI CATEGORY SLIDER SHORTCODE
   [inochi_category_slider]
   ============================================ */

.inochi-cat-slider {
    width: 100%;
    margin: 20px 0;
}

.inochi-cat-slider .inochi-cat-slide {
    width: 20%;
    padding: 0 10px;
    box-sizing: border-box;
}

.inochi-cat-slider .inochi-cat-box {
    display: block;
    text-decoration: none;
    text-align: center;
    transition: transform 0.3s ease;
}

.inochi-cat-slider .inochi-cat-box:hover {
    transform: translateY(-5px);
}

.inochi-cat-slider .inochi-cat-image {
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 12px;
}

.inochi-cat-slider .inochi-cat-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.inochi-cat-slider .inochi-cat-box:hover .inochi-cat-image img {
    transform: scale(1.05);
}

.inochi-cat-slider .inochi-cat-title {
    font-size: 16px;
    font-weight: 600;
    color: #173963;
    margin-top: 10px;
}

/* WooCommerce Reviews Styling */
.seso-reviews-section {
    background: #fff;
    padding: 40px 0;
}

.seso-reviews-section .woocommerce-Reviews-title {
    text-align: center;
    font-size: 21px !important;
    font-weight: 600 !important;
    color: #222222;
    margin-bottom: 30px;
    display: block;
    text-transform: none;
}

/* Review Summary Section */
.seso-review-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.seso-review-summary .summary-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.seso-review-summary .summary-stars {
    display: flex;
    align-items: center;
}

.seso-review-summary .summary-stars .star-rating {
    font-size: 18px;
    color: #ffc107;
}

.seso-review-summary .summary-text {
    color: #666;
    font-size: 14px;
}

.seso-review-summary .summary-right {
    flex-shrink: 0;
}

/* Write Review Button */
.seso-write-review-btn {
    background-color: #499F4A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    padding: 12px 30px !important;
    border-radius: 0px !important;
    border: none !important;
    text-transform: none !important;
    font-size: 14px;
    height: auto !important;
    line-height: normal !important;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    transition: background-color 0.2s;
}

.seso-write-review-btn:hover {
    background-color: #3d8a3e !important;
}

.seso-reviews-section .comment-reply-title {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 20px;
    display: block;
    color: #222222;
}

/* Remove borders from form container */
.seso-reviews-section .review-form-inner {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.seso-reviews-section #review_form .col-inner {
    padding: 0;
}

/* Style Submit Button */
.seso-reviews-section #submit,
.seso-reviews-section .submit {
    background-color: #499F4A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    padding: 12px 30px !important;
    border-radius: 0px !important;
    border: none !important;
    text-transform: none !important;
    font-size: 14px;
    height: auto !important;
    line-height: normal !important;
    cursor: pointer;
}

.seso-reviews-section #submit:hover,
.seso-reviews-section .submit:hover {
    background-color: #3d8a3e !important;
}

/* Form field styling */
.seso-reviews-section .comment-form input[type="text"],
.seso-reviews-section .comment-form input[type="email"],
.seso-reviews-section .comment-form textarea,
.seso-reviews-section .comment-form select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Nunito Sans', sans-serif;
}

.seso-reviews-section .comment-form label {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

.seso-reviews-section .comment-form-rating {
    margin-bottom: 20px;
}

/* Individual Review Styling */
.seso-reviews-section .commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.seso-reviews-section .commentlist li {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 0;
    list-style: none;
}

.seso-reviews-section .commentlist li:last-child {
    border-bottom: none;
}

.seso-reviews-section .commentlist li .meta {
    margin-bottom: 10px;
}

.seso-reviews-section .commentlist li .meta strong {
    color: #499F4A;
    font-size: 14px;
    font-weight: 600;
}

.seso-reviews-section .star-rating {
    float: none !important;
    display: inline-block;
    color: #f1c40f;
    font-size: 14px;
    margin-right: 10px;
}

.seso-reviews-section .comment-text {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.seso-reviews-section .comment-text p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.seso-reviews-section .woocommerce-noreviews {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 20px 0;
    margin: 0 0 30px 0;
}

/* Force show reviews if hidden globally */
.seso-reviews-section #reviews,
.seso-reviews-section #comments,
.seso-reviews-section .woocommerce-Reviews {
    display: block !important;
}

/* Ensure form fields are responsive */
@media (max-width: 767px) {
    .seso-reviews-section {
        padding: 30px 0;
    }

    .seso-reviews-section .woocommerce-Reviews-title {
        font-size: 18px !important;
        margin-bottom: 20px;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .inochi-cat-slider .inochi-cat-slide {
        width: 33.333%;
    }
}

@media (max-width: 767px) {
    .inochi-cat-slider .inochi-cat-slide {
        width: 50%;
    }

    .inochi-cat-slider .inochi-cat-title {
        font-size: 14px;
    }
}

/* ============================================
   SESO PRODUCT PAGE - PAYMENT BANNER & DELIVERY INFO
   ============================================ */

/* Payment Banner Section */
.seso-payment-banner {
    margin: 20px 0 15px 0;
    border-radius: 8px;
    overflow: hidden;
}

.seso-payment-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Delivery Info Section */
.seso-delivery-info {
    background: #FEF9E7;
    border-radius: 8px;
    padding: 15px 18px;
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.7;
    color: #5D4E37;
}

.seso-delivery-info .delivery-countdown {
    font-size: 15px;
    color: #5D4E37;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #E0D5C3;
}

.seso-delivery-info .delivery-countdown .countdown-icon {
    margin-right: 8px;
}

.seso-delivery-info .delivery-countdown strong {
    color: #D97706;
    font-weight: 700;
}

.seso-delivery-info .delivery-countdown u {
    color: #D97706;
    text-decoration: underline;
    font-weight: 600;
}

.seso-delivery-info .delivery-notes {
    color: #736555;
    font-size: 13px;
}

.seso-delivery-info .delivery-notes br {
    display: block;
    margin-bottom: 5px;
    content: "";
}

/* Mobile responsive */
@media (max-width: 767px) {
    .seso-payment-banner {
        margin: 15px 0 12px 0;
    }

    .seso-delivery-info {
        padding: 12px 15px;
        font-size: 13px;
    }

    .seso-delivery-info .delivery-countdown {
        font-size: 13px;
    }

    .seso-delivery-info .delivery-notes {
        font-size: 12px;
    }
}

/* ============================================
   SESO PRODUCT TABS - Full Width Beige Design
   ============================================ */

/* Full Width Background Hack */
.woocommerce-tabs {
    max-width: 100vw !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background: #fcfcf8 !important;
    padding: 60px 0 !important;
}

.woocommerce-tabs .wc-tabs-wrapper {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1170px;
    /* Standard container width */
    padding-left: 15px;
    padding-right: 15px;
}

/* Tab navigation container */
.woocommerce-tabs .wc-tabs,
.woocommerce-tabs ul.tabs.wc-tabs {
    display: flex !important;
    justify-content: center;
    gap: 20px;
    /* Increased spacing */
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    border-bottom: none !important;
    list-style: none !important;
    background: transparent !important;
}

/* Tab items */
.woocommerce-tabs .wc-tabs li,
.woocommerce-tabs ul.tabs li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50px !important;
    position: relative;
    box-shadow: none !important;
}

.woocommerce-tabs .wc-tabs li::before,
.woocommerce-tabs .wc-tabs li::after {
    display: none !important;
}

/* Tab links - Inactive State (Text Only) */
.woocommerce-tabs .wc-tabs li a,
.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 10px 25px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #888 !important;
    /* Grey text for inactive */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent !important;
    border: 1px solid transparent !important;
    /* Invisible border to prevent layout shift */
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.woocommerce-tabs .wc-tabs li a:hover {
    color: #333 !important;
}

/* Active tab - Outlined */
.woocommerce-tabs .wc-tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
    color: #333 !important;
    /* Dark text */
    background: transparent !important;
    /* Transparent background */
    border: 1px solid #333 !important;
    /* visible dark border */
    border-top: 1px solid #333 !important;
    box-shadow: none !important;
    outline: none !important;
    font-weight: 700 !important;
}

.woocommerce-tabs .wc-tabs li.active,
.woocommerce-tabs ul.tabs li.active {
    border: none !important;
    box-shadow: none !important;
}

/* Remove potential active tab indicators */
.woocommerce-tabs .wc-tabs li.active a::before,
.woocommerce-tabs ul.tabs li.active a::before,
.woocommerce-tabs .wc-tabs li.active a::after,
.woocommerce-tabs ul.tabs li.active a::after {
    display: none !important;
    content: none !important;
}

/* Tab content panel */
.woocommerce-tabs .wc-tab,
.woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 0 !important;
    /* Remove padding */
    border: none !important;
    background: transparent;
    /* Match beige section */
    max-width: 1000px;
    /* Optional: limit content width for readability */
    margin: 0 auto;
}

/* Styling for content */
.seso-tab-content {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    max-width: 100%;
}

.seso-tab-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 13px;
    background: #fff;
    /* Keep tables white for contrast */
}

.seso-tab-content table th,
.seso-tab-content table td {
    padding: 12px 15px;
    border: 1px solid #eee;
    text-align: center;
}

.seso-tab-content table th {
    background: #f8f8f8;
    font-weight: 700;
    color: #333;
    border-bottom: 2px solid #ddd;
}

.seso-tab-content table tr:nth-child(even) {
    background: #fcfcfc;
}

/* Responsive tabs */
@media (max-width: 767px) {

    .woocommerce-tabs .wc-tabs,
    .woocommerce-tabs ul.tabs.wc-tabs {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .woocommerce-tabs .wc-tabs li a,
    .woocommerce-tabs ul.tabs li a {
        width: 100%;
        min-width: 250px;
        text-align: center;
        padding: 12px 20px !important;
    }

    .woocommerce-tabs .wc-tab,
    .woocommerce-tabs .woocommerce-Tabs-panel {
        padding: 20px 0 !important;
    }
}

/* ============================================
   HOMEPAGE SECTION HEADER STYLES
   Matching sesofoods.com design
   ============================================ */

/* Container for title and viewmore - expects parent to have flexbox or use this wrapper */
.section_header_home {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

/* Title Style - Green, Italic, Bold */
.title_home {
    color: #228B22;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Viewmore Link Style */
.viewmore_home {
    color: #228B22;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
    text-decoration: underline;
    font-size: 14px;
}

.viewmore_home:hover {
    color: #1a6b1a;
    text-decoration: underline;
}

/* If title_home is inside a row/col structure, add flexbox to parent */
.title_home+p,
h2.title_home~p {
    margin: 0;
}

/* Alternative: If using UX Builder row structure */
.row:has(.title_home) {
    position: relative;
}

/* Make flexbox work when title and viewmore are in same row */
.col:has(.title_home),
.col:has(.viewmore_home) {
    display: flex;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .title_home {
        font-size: 18px;
    }

    .viewmore_home {
        font-size: 13px;
    }

    .section_header_home {
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
}

/* ===== SALE BADGE - MOVE TO RIGHT SIDE ===== */
.badge-container,
.badge-container.absolute.left.top,
.product-small .badge-container,
.product .badge-container,
.product-gallery .badge-container,
.box-image .badge-container {
    left: auto !important;
    right: 0 !important;
}

/* Badge styling to match sesofoods */
.badge-container .badge-inner.on-sale,
.badge-container .badge-inner.secondary.on-sale {
    background: #ff4e00;
    color: #fff;
    border-radius: 4px;
    /* padding: 4px 8px !important; */
    font-size: 12px;
    font-weight: 600;
}

span.amount {
    font-size: 15px;
    color: #10723a;
    font-weight: 700;
}

.badge-container .callout.badge.badge-frame {
    background: transparent !important;
    border: none !important;
}

/* Product page - larger badge */
.product-gallery .badge-container .badge-inner.on-sale,
.product-main .badge-container .badge-inner.on-sale {
    padding: 6px 12px !important;
    font-size: 14px !important;
}

/* ===== RELATED PRODUCTS - 6 ITEMS PER ROW ===== */
.related-products-wrapper .row.slider .product-small.col,
.related .row.slider .product-small.col {
    width: calc(100% / 6) !important;
    flex: 0 0 calc(100% / 6) !important;
    max-width: calc(100% / 6) !important;
}

/* Ensure Flickity treats 6 items as a group */
.related-products-wrapper .flickity-slider .product-small.col,
.related .flickity-slider .product-small.col {
    width: calc(100% / 6) !important;
}

/* Responsive - Tablet: 4 items per row */
@media (max-width: 991px) {

    .related-products-wrapper .row.slider .product-small.col,
    .related .row.slider .product-small.col,
    .related-products-wrapper .flickity-slider .product-small.col,
    .related .flickity-slider .product-small.col {
        width: calc(100% / 4) !important;
        flex: 0 0 calc(100% / 4) !important;
        max-width: calc(100% / 4) !important;
    }
}

/* Responsive - Mobile: 2 items per row */
@media (max-width: 767px) {

    .related-products-wrapper .row.slider .product-small.col,
    .related .row.slider .product-small.col,
    .related-products-wrapper .flickity-slider .product-small.col,
    .related .flickity-slider .product-small.col {
        width: calc(100% / 2) !important;
        flex: 0 0 calc(100% / 2) !important;
        max-width: calc(100% / 2) !important;
    }
}

/* ===== MOBILE SPACING ADJUSTMENTS ===== */
@media (max-width: 767px) {

    /* ======= FIX COL PADDING - Using high specificity ======= */
    /* Giảm padding-bottom của .col từ 30px xuống 15px như sesofoods */
    body .col,
    body .row .col,
    body .flickity-slider .col,
    body .section-content .col {
        padding-bottom: 15px !important;
    }

    /* Product columns - tighter spacing */
    body .product-small.col,
    body .row .product-small.col {
        padding-bottom: 10px !important;
    }

    /* ======= SECTION SPACING - Compact layout ======= */
    /* Giảm khoảng cách giữa các section xuống như sesofoods */

    /* Target section elements directly with high specificity */
    body section,
    body .section,
    body .ux-section,
    #content section,
    #content .section {
        padding-top: 15px !important;
        padding-bottom: 10px !important;
    }

    .section-content,
    section .section-content {
        padding-top: 10px !important;
        padding-bottom: 5px !important;
    }

    /* Slide home section - remove padding on mobile */
    #content section.slide_home.show-for-small,
    #content section.slide_home.show-for-small .section-content {
        padding: 0 !important;
    }

    /* Section title container */
    .section-title-container,
    .container.section-title-container {
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    /* Row margin inside sections */
    .section-content .row,
    body .section-content .row,
    section .row {
        margin-bottom: 0 !important;
    }

    /* Slider wrapper spacing */
    .slider-wrapper {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Category section - special compact */
    .product-category.col,
    body .product-category.col,
    .row .product-category.col {
        padding-bottom: 5px !important;
    }

    /* ======= PRODUCT CARD ADJUSTMENTS ======= */
    .product-small .box-text {
        padding: 5px 0;
    }

    .product-small .product-title {
        font-size: 12px;
        line-height: 1.3;
    }

    .product-small .price {
        font-size: 13px;
    }

    .product_8 .small-columns-2 .flickity-slider>.col,
    .product_8 .small-columns-2>.col {
        max-width: 100%;
    }

    /* Category box items - tighter spacing */
    .box.box-category,
    .product-category .box,
    .box-image {
        margin-bottom: 5px !important;
    }

    /* Box wrapper and image container */
    .col .box,
    .col .box-image,
    .product-category .col-inner {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Category text below icons */
    .box-text.box-text-category {
        padding: 5px 0 !important;
        margin: 0 !important;
    }

    /* Row collapse - no extra padding */
    .row-collapse .col {
        padding-bottom: 0 !important;
    }

    /* Ensure col-inner doesn't add extra space */
    .col-inner {
        padding-bottom: 0 !important;
    }
}

/* ============================================
   PRODUCT CARD BORDER/FRAME - Matching sesofoods.com
   ============================================ */

/* ===== SLIDER OUTER BORDER - Left and Right ===== */
/* Add border wrapper around entire slider */
.row.slider,
.row.row-slider {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

/* Product card frame - thin grey border around each product box */
/* Use only top and bottom borders to avoid double vertical borders */
.product-small.box,
.product-small .box {
    border: 1px solid #eee;
    background: #fff;
    margin-left: -1px;
    /* Overlap borders to prevent double border */
}

/* First item - restore left border */
.row.slider .col:first-child .product-small.box,
.row.slider .col:first-child .product-small .box,
.flickity-slider .col:first-child .product-small.box,
.flickity-slider .col:first-child .product-small .box {
    margin-left: 0;
}

/* Remove border from .col-inner to prevent double border */
.product-small .col-inner {
    border: none;
    background: #fff;
}

/* Remove double borders - only the outermost should have border */
.product-small.box .col-inner,
.product-small .box .box-image,
.product-small .box-text {
    border: none;
}

/* Product card padding for content spacing */
.product-small .box-text {
    padding: 10px 12px;
    overflow: visible;
    height: auto;
    min-height: auto;
}

/* Ensure product image container has no border */
.product-small .box-image {
    border: none;
    background: #fff;
}

/* Product title styling - ensure full display */
.product-small .product-title {
    overflow: visible;
    height: auto;
    max-height: none;
    -webkit-line-clamp: unset;
}

.product-small .product-title a {
    color: #333;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: block;
}

/* Price layout - ensure full display */
.product-small .price-wrapper,
.product-small .price {
    padding: 5px 0;
    overflow: visible;
    height: auto;
    white-space: normal;
}

.product-small .price .amount {
    display: inline-block;
}

/* Hover effect - subtle */
.product-small.box:hover,
.product-small .box:hover {
    border-color: #ddd;
}

/* ===== MOBILE - Product Card Border ===== */
@media (max-width: 767px) {

    /* Slider outer border on mobile */
    .row.slider,
    .row.row-slider {
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
    }

    /* Maintain border on mobile */
    .product-small.box,
    .product-small .box {
        border: 1px solid #eee;
        background: #fff;
        margin-left: -1px;
    }

    /* First item - restore left border on mobile */
    .row.slider .col:first-child .product-small.box,
    .row.slider .col:first-child .product-small .box,
    .flickity-slider .col:first-child .product-small.box,
    .flickity-slider .col:first-child .product-small .box {
        margin-left: 0;
    }

    /* Remove col-inner border on mobile */
    .product-small .col-inner {
        border: none;
        background: #fff;
    }

    /* Compact padding on mobile */
    .product-small .box-text {
        padding: 8px 10px;
    }

    .product-small .product-title a {
        font-size: 12px;
    }
}

/* ============================================
   MENU BUBBLE BADGES - Sale & New
   Matching sesofoods.com design
   ============================================ */

/* Menu item needs position relative for absolute bubble positioning */
/* Use .nav-left to only target main menu, not cart/account icons */
.nav-left>li>a {
    position: relative;
}

/* Bubble Sale - Menu item thứ 1 (DANH MỤC) */
.nav-left>li:nth-child(1)>a::after {
    content: "Sale";
    position: absolute;
    top: 5px;
    right: -14px;
    background: #ff6600;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
    z-index: 10;
}

/* Bubble New - Menu item thứ 3 (TIN TỨC) */
.nav-left>li:nth-child(3)>a::after {
    content: "New";
    position: absolute;
    top: 5px;
    right: -19px;
    background: #28a745;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
    z-index: 10;
}

/* Mobile - adjust bubble position */
@media (max-width: 767px) {

    .nav-left>li:nth-child(1)>a::after,
    .nav-left>li:nth-child(3)>a::after {
        top: -6px;
        right: -10px;
        font-size: 8px;
        padding: 1px 4px;
    }
}