/* MITSUBISHI & Exclusive Products Styling - Desktop */

/* Common card styling for both MITSUBISHI and Exclusive products */
.box-home-section-exclusive #mitsubishiProductsRow .col-2,
.box-home-section-exclusive #exclusiveProductsRow .col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    display: flex;
    margin-bottom: 20px;
}

/* Horizontal scroll layout */
.box-home-section-exclusive #mitsubishiProductsRow,
.box-home-section-exclusive #exclusiveProductsRow {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 20px !important;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center;
}

.box-home-section-exclusive #mitsubishiProductsRow::-webkit-scrollbar,
.box-home-section-exclusive #exclusiveProductsRow::-webkit-scrollbar {
    height: 8px;
}

.box-home-section-exclusive #mitsubishiProductsRow::-webkit-scrollbar-track,
.box-home-section-exclusive #exclusiveProductsRow::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.box-home-section-exclusive #mitsubishiProductsRow::-webkit-scrollbar-thumb,
.box-home-section-exclusive #exclusiveProductsRow::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.box-home-section-exclusive #mitsubishiProductsRow::-webkit-scrollbar-thumb:hover,
.box-home-section-exclusive #exclusiveProductsRow::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Cards in horizontal layout */
.box-home-section-exclusive #mitsubishiProductsRow .col-exclusive-card,
.box-home-section-exclusive #exclusiveProductsRow .col-exclusive-card {
    flex: 0 0 280px !important;
    min-width: 297px !important;
    max-width: 280px !important;
    display: flex !important;
    padding: 0 !important;
}

.box-home-section-exclusive #mitsubishiProductsRow .box-list-htw,
.box-home-section-exclusive #exclusiveProductsRow .box-list-htw {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Ensure cards in col-exclusive-card also get proper styling */
.box-home-section-exclusive #mitsubishiProductsRow .col-exclusive-card .box-list-htw,
.box-home-section-exclusive #exclusiveProductsRow .col-exclusive-card .box-list-htw {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.box-home-section-exclusive #mitsubishiProductsRow .box-list-htw:hover,
.box-home-section-exclusive #exclusiveProductsRow .box-list-htw:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.box-home-section-exclusive #mitsubishiProductsRow .box-list-htw a,
.box-home-section-exclusive #exclusiveProductsRow .box-list-htw a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.box-home-section-exclusive #mitsubishiProductsRow .box-list-image,
.box-home-section-exclusive #exclusiveProductsRow .box-list-image {
    height: 250px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    flex-shrink: 0;
}

.box-home-section-exclusive #mitsubishiProductsRow .box-list-image img,
.box-home-section-exclusive #exclusiveProductsRow .box-list-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
    max-width: 180px;
    max-height: 220px;
}

.box-home-section-exclusive #mitsubishiProductsRow .box-list-content,
.box-home-section-exclusive #exclusiveProductsRow .box-list-content {
    padding: 15px;
    background: white;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header section - ให้มีความสูงเท่ากันทุกการ์ด */
.mitsubishi-header {
    min-height: 110px;
    margin-bottom: 8px;
}

/* Brand Label */
.box-home-section-exclusive #mitsubishiProductsRow .mitsubishi-brand-label,
.box-home-section-exclusive #exclusiveProductsRow .mitsubishi-brand-label {
    background: black;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 8px;
    margin-bottom: 6px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

/* Description - แสดงโดยไม่มี label */
.mitsubishi-description {
    font-size: 19px;
    color: #000000;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Desktop mitsubishi-row layout */
.mitsubishi-row {
    display: flex;
    font-size: 19px;
    margin-bottom: 6px;
    line-height: 1.4;
    align-items: flex-start;
}

.mitsubishi-label {
    width: 70px;
    flex-shrink: 0;
    font-weight: 600;
    text-transform: uppercase;
    color: #666 !important;
}

.mitsubishi-value {
    flex: 1;
    color: #000000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-weight: bold;

}

/* PRICE - สีแดง */
.mitsubishi-value.mitsubishi-price {
    color: #d32f2f !important;
    font-weight: bold;
}

/* MOQ - สีแดง */
.mitsubishi-value.mitsubishi-moq {
    color: #d32f2f !important;
    font-weight: bold;
}

/* *REMARK - ทั้ง LABEL และ VALUE สีแดง */
.mitsubishi-row:has(.mitsubishi-remark) .mitsubishi-label {
    color: #d32f2f !important;
}

.mitsubishi-value.mitsubishi-remark {
    color: #d32f2f !important;
    font-style: italic;
}

/* STOCK */
.mitsubishi-value.mitsubishi-stock {
    color: #000000;
    text-transform: uppercase;
    font-weight: bold;
}

/* DELIVERY */
.mitsubishi-value.mitsubishi-delivery {
    color: #000000;
    font-style: italic;
    font-weight: bold;
}

/* UNSPSC */
.mitsubishi-value.mitsubishi-unspsc {
    color: #000000;
    font-weight: bold;
}

/* Mobile MITSUBISHI & Exclusive Products Styling */
#mitsubishiProductsRowMobile .box-list-htw,
#exclusiveProductsRowMobile .box-list-htw {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#mitsubishiProductsRowMobile .box-list-htw a,
#exclusiveProductsRowMobile .box-list-htw a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

#mitsubishiProductsRowMobile .box-list-htw .box-list-content,
#exclusiveProductsRowMobile .box-list-htw .box-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Mobile Header section */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-header,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-header {
    min-height: 100px;
    margin-bottom: 10px;
}

#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-brand-label,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-brand-label {
    background: black;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 4px 8px;
    margin-bottom: 6px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

/* Mobile Description */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-description,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-description {
    font-size: 16px;
    color: #333;
    line-height: 1.3;
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile mitsubishi-row layout */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-row,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-row {
    display: flex;
    font-size: 16px;
    margin-bottom: 4px;
    line-height: 1.3;
    align-items: flex-start;
}

#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-label,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-label {
    width: 70px;
    flex-shrink: 0;
    font-weight: 600;
    text-transform: uppercase;
    color: #666 !important;
}

#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-value,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-value {
    flex: 1;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile PRICE - สีแดง */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-price,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-price {
    color: #d32f2f !important;
    font-weight: bold;
}

/* Mobile MOQ - สีแดง */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-moq,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-moq {
    color: #d32f2f !important;
    font-weight: bold;
}

/* Mobile REMARK - ทั้ง LABEL และ VALUE สีแดง */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-row:has(.mitsubishi-remark) .mitsubishi-label,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-row:has(.mitsubishi-remark) .mitsubishi-label {
    color: #d32f2f !important;
}

#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-remark,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-remark {
    color: #d32f2f !important;
    font-style: italic;
}

/* Mobile STOCK */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-stock,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-stock {
    color: #333;
    text-transform: uppercase;
}

/* Mobile DELIVERY */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-delivery,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-delivery {
    color: #333;
    font-style: italic;
}

/* Mobile UNSPSC */
#mitsubishiProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-unspsc,
#exclusiveProductsRowMobile .box-list-htw .mitsubishi-value.mitsubishi-unspsc {
    color: #333;
    font-weight: 500;
}

/* Styling for Scroll Arrows (Add this to your CSS file or <style> block) */
.box-exclusive-products {
    position: relative; /* ทำให้ปุ่มลูกศรอยู่ภายในขอบเขตนี้ */
}

/* Styling for Scroll Arrows */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* สไตล์ปุ่มสี่เหลี่ยมขอบมน */
    background: white; 
    border: 1px solid #e0eeef; 
    border-radius: 4px; /* <--- กำหนดให้เป็นสี่เหลี่ยมขอบมน */
    
    width: 40px;
    height: 40px;
    
    /* สไตล์ลูกศร */
    font-size: 16px; 
    font-weight: bold; 
    color: #6c6c6c; /* สีเทาเข้ม */
    
    cursor: pointer;
    z-index: 10;
    
    /* เงา */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); 
    
    /* จัดตำแหน่งลูกศรให้อยู่ตรงกลาง */
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: background-color 0.3s, box-shadow 0.3s;
}

.scroll-arrow:hover {
    background-color: #f9f9f9; /* สีพื้นหลังสว่างขึ้นเมื่อโฮเวอร์ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เงาเข้มขึ้นเมื่อโฮเวอร์ */
}

.left-arrow {
    left: -22px; /* เลื่อนออกไปทางซ้ายเล็กน้อยเพื่อให้อยู่กึ่งกลางขอบ */
}

.right-arrow {
    right: -22px; /* เลื่อนออกไปทางขวาเล็กน้อยเพื่อให้อยู่กึ่งกลางขอบ */
}

/* ปรับ padding-right ให้ container เล็กน้อยเพื่อไม่ให้ปุ่มทับเนื้อหา */
.box-home-section-exclusive .container {
    padding-left: 20px;
    padding-right: 20px;
}

/* เดิม: แสดง Scrollbar */
.box-home-section-exclusive #mitsubishiProductsRow::-webkit-scrollbar,
.box-home-section-exclusive #exclusiveProductsRow::-webkit-scrollbar {
    height: 8px; /* กำหนดความสูง */
}

/*... โค้ดอื่นๆ ที่เกี่ยวข้องกับการจัด Scrollbar ...*/


/* 💡 แก้ไข: ซ่อน Scrollbar (โดยการตั้งค่า height เป็น 0 หรือ display: none) */
.box-home-section-exclusive #mitsubishiProductsRow::-webkit-scrollbar,
.box-home-section-exclusive #exclusiveProductsRow::-webkit-scrollbar {
    /* สำหรับ WebKit (Chrome, Safari) */
    display: none;
    height: 0; /* เพิ่มเผื่อไว้ */
}

/* เพิ่มสำหรับการซ่อนใน Firefox */
.box-home-section-exclusive #mitsubishiProductsRow,
.box-home-section-exclusive #exclusiveProductsRow {
    /* สำหรับ Firefox */
    scrollbar-width: none;
}