/**
 * dir assets/css/
 * file woo-shop.css
 * ไฟล์จัดการสไตล์หน้าร้านค้า (Shop / Archive) รวมถึงการ์ดสินค้า 4 สไตล์, แถบหมวดหมู่สินค้า, แบนเนอร์ปก, และระบบฟิลเตอร์ค้นหาสินค้า
 * Update: แยกไฟล์จาก style.css เดิม, คงโครงสร้างเดิม 100% และเปลี่ยนรหัสสีเป็น CSS Variables
*/

/* =========================================
   UNIVERSAL Styles (พื้นฐาน)
   ========================================= */
ul.products::before, ul.products::after { content: none !important; display: none !important; }
ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important; padding: 10px !important; margin: 0 !important;
}
@media (min-width: 768px) { ul.products { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } }
ul.products li.product { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }

/* Base Card */
.mp-card-inner {
    background: #fff; border-radius: 8px; overflow: hidden; position: relative;
    height: 100%; display: flex; flex-direction: column; border: 1px solid var(--border-light);
}
.mp-img-box { position: relative; width: 100%; padding-top: 100%; background: var(--bg-gray); overflow: hidden; }
.mp-img-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-content { padding: 10px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.mp-title { font-size: 13px !important; line-height: 1.3 !important; color: var(--text-dark) !important; margin: 0 0 5px !important; font-weight: 500 !important; overflow: hidden; height: 34px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.mp-title-link { text-decoration: none !important; }
.mp-price { font-size: 15px; font-weight: 700; color: var(--primary-color); }
.mp-price del { font-size: 12px; color: #ccc; margin-right: 5px; font-weight: normal; }
.mp-badge-sale { position: absolute; top: 0; right: 0; background: var(--color-sale); color: #000; font-size: 10px; font-weight: 800; padding: 3px 6px; z-index: 5; }

/* =========================================
   STYLE 1: MARKETPLACE (With View Button)
   ========================================= */
.style-1 .mp-card-inner { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.style-1 .mp-sales { font-size: 10px; color: #999; margin-bottom: 5px; }

/* จัดราคาซ้าย ปุ่มขวา */
.style-1 .mp-footer-row { display: flex; justify-content: space-between; align-items: center; }

/* จัดกลุ่มปุ่มให้อยู่ติดกัน */
.style-1 .mp-action-group { display: flex; gap: 6px; }

/* ทรงปุ่มวงกลม (ใช้ร่วมกัน) */
.style-1 .circle-btn {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s; cursor: pointer;
}
.style-1 .circle-btn:active { transform: scale(0.9); }
.style-1 .circle-btn svg { width: 16px; height: 16px; }

/* สีปุ่มดูสินค้า (สีเทาจางๆ) */
.style-1 .mp-view-btn {
    background: #f3f3f3; color: #666;
}
.style-1 .mp-view-btn:hover { background: #e0e0e0; color: #333; }

/* สีปุ่มสั่งซื้อ (สีธีม) */
.style-1 .mp-add-btn {
    background: var(--primary-color); color: #fff;
    box-shadow: 0 2px 5px rgba(4,163,156,0.3);
}
.style-1 .mp-add-btn:hover { background: var(--primary-hover); }

/* =========================================
   STYLE 2: SUPERMARKET (Compact Row)
   ========================================= */
.style-2 .mp-card-inner { border: 1px solid var(--border-color); }
.style-2 .mp-content { padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; }
.style-2 .big-price { font-weight: 700; color: #333; }

/* กล่องครอบให้เป็นแถวเดียวกัน */
.style-2-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px; /* ระยะห่างระหว่างปุ่มเลข กับ ปุ่มตะกร้า */
    margin-top: auto;
}

/* กลุ่มปุ่ม +/- (ปรับให้มนๆ เล็กๆ) */
.style-2 .qty-selector-compact {
    display: flex; align-items: center;
    border: 1px solid #ddd; border-radius: 20px; /* ทรงแคปซูล */
    overflow: hidden; height: 32px;
    flex: 1; /* ให้ยืดเต็มพื้นที่ที่เหลือ */
    max-width: 100px; /* จำกัดความกว้างไม่ให้ยาวเกิน */
}

.style-2 .qty-btn {
    width: 28px; height: 100%; border: none; background: #fff;
    color: var(--primary-color); font-weight: bold; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.style-2 .qty-btn:active { background: #f0f0f0; }

.style-2 .qty-input {
    width: 100%; height: 100%; border: none; text-align: center;
    font-size: 13px; font-weight: 600; padding: 0;
    background: #fff; color: #333;
    -moz-appearance: textfield;
    appearance: textfield;
}
.style-2 .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ปุ่มใส่ตะกร้า (เป็นปุ่มเขียวขวาสุด) */
.style-2 .compact-add-btn {
    width: 36px; height: 32px; /* สูงเท่าปุ่มเลข */
    background: var(--primary-color); color: #fff;
    border-radius: 8px; /* มนนิดหน่อย */
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; /* ห้ามหด */
    transition: 0.2s;
}
.style-2 .compact-add-btn:active { transform: scale(0.95); }
.style-2 .compact-add-btn svg { width: 18px; height: 18px; }

/* =========================================
   STYLE 3: FASHION (NEW FIX!)
   ========================================= */
.style-3 .portrait-img { padding-top: 133%; /* รูปแนวตั้ง 3:4 */ }
.style-3 .mp-content { text-align: left; justify-content: flex-end; }
.style-3 .fashion-cat { font-size: 10px; color: #999; text-transform: uppercase; margin-bottom: 2px; }
.style-3 .fashion-cat a { color: #999; text-decoration: none; }
.style-3 .mp-title { margin-bottom: 2px !important; font-weight: normal !important; height: auto; -webkit-line-clamp: 1; line-clamp: 1; }
.style-3 .mp-price { color: #333; font-weight: 600; }

/* =========================================
   STYLE 4: MINIMAL
   ========================================= */
.style-4 .mp-card-inner { border: none; background: transparent; }
.style-4 .radius-img { border-radius: 12px; }
.style-4 .mp-content { padding: 10px 0; }
.style-4 .mp-footer-row { display: flex; justify-content: space-between; gap: 10px; }
.style-4 .insta-wishlist { position: absolute; top: 10px; right: 10px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }


/* =========================================
   CUSTOM FILTER CSS (Premium App Style Bottom Sheet)
   ========================================= */

/* 1. ฉากหลัง (Overlay) */
.custom-filter-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.4); /* Dark slate transparent */
    z-index: 9990;
    opacity: 0; visibility: hidden; transition: 0.3s ease;
    backdrop-filter: blur(4px);
}
.custom-filter-overlay.is-visible { opacity: 1; visibility: visible; }

/* 2. ตัวกล่อง Panel */
.custom-filter-panel {
    position: fixed; bottom: -100%; left: 0; width: 100%; max-height: 85vh;
    background: #ffffff; z-index: 9999;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    display: flex; flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), bottom 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    transform: translateY(100%);
}
.custom-filter-panel.is-visible { bottom: 0; transform: translateY(0); }

/* 3. Drag Handle (ขีดด้านบนเหมือน iOS) */
.custom-filter-panel::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 5px;
    background-color: #e2e8f0;
    border-radius: 10px;
    z-index: 10000;
}

/* ห้ามเลื่อนหน้าจอหลักตอนเปิด Filter */
body.no-scroll { overflow: hidden; }

/* Header */
.filter-header {
    padding: 28px 24px 15px 24px;
    display: flex; justify-content: space-between; align-items: center;
    position: relative;
    border-bottom: none; /* เอาขอบออกให้ดูคลีน */
}
.filter-header h3 { margin: 0; font-size: 20px; font-weight: 700; color: #0f172a; letter-spacing: -0.02em; }
.close-icon { 
    font-size: 22px; color: #64748b; cursor: pointer; line-height: 1;
    width: 36px; height: 36px; background: #f1f5f9; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.close-icon:active { background: #e2e8f0; transform: scale(0.9); }

/* Body (Scroll ได้) */
.filter-body {
    flex: 1; overflow-y: auto; padding: 10px 24px 30px 24px;
    -webkit-overflow-scrolling: touch;
}

/* Sections */
.filter-section { margin-bottom: 32px; }
.section-title { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 16px; }

/* Inputs ราคา */
.price-range-inputs { display: flex; align-items: center; gap: 12px; }
.price-range-inputs input {
    width: 100%; text-align: center; border: 1.5px solid #e2e8f0;
    border-radius: 12px; padding: 10px; font-size: 15px; background: #fff;
    color: #0f172a; font-weight: 500; transition: all 0.2s;
}
.price-range-inputs input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(4,163,156,0.1); }
.price-range-inputs .sep { color: #94a3b8; font-weight: 500; }

/* ตัวเลือกแบบปุ่ม (Chips/Pills) */
.options-grid { display: flex; flex-wrap: wrap; gap: 10px; }

.option-pill { cursor: pointer; position: relative; margin: 0; }
.option-pill input { position: absolute; opacity: 0; width: 0; height: 0; } /* ซ่อน Checkbox จริง */

/* หน้าตาปุ่มปกติ */
.option-pill span {
    display: block; padding: 10px 18px;
    background: #f8fafc; border: 1.5px solid #e2e8f0;
    border-radius: 30px; font-size: 14px; color: #475569;
    font-weight: 500; transition: 0.2s;
}

/* หน้าตาปุ่มตอนเลือก (Active) */
.option-pill input:checked + span {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(4,163,156,0.25);
    font-weight: 600;
}



/* =========================================
   2. APP ACTION BAR ปุ่มคู่แฝด (จัดแถวเดียวกัน + สวยงาม)
   ========================================= */
.app-action-bar {
    display: flex;
    justify-content: space-between; /* ซ้าย-ขวา ชนขอบ */
    align-items: center;
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    gap: 10px;
}

/* ฝั่งซ้าย (จำนวนสินค้า) */
.action-left .result-count-text {
    font-size: 12px; color: #888; white-space: nowrap;
}

/* ฝั่งขวา (Filter + Sort) */
.action-right {
    display: flex;
    align-items: center;
    gap: 8px; /* ระยะห่างระหว่างปุ่ม Filter กับ Sort */
    flex: 1; /* ให้ยืดพื้นที่ได้เต็มที่ */
    justify-content: flex-end; /* ดันไปขวาสุด */
}

/* --- A. ปุ่ม Filter (แต่งใหม่ให้สวย) --- */

.action-right { display: flex; gap: 8px; }

/* ดีไซน์ปุ่มมาตรฐาน (ใช้ทั้ง Filter และ Sort) */
.app-action-btn {
    display: flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px;
    background: #fff; border: 1px solid #e0e0e0;
    border-radius: 20px; /* ทรงแคปซูล */
    font-size: 13px; color: #333; font-weight: 500;
    cursor: pointer; transition: 0.2s; white-space: nowrap;
}
.app-action-btn:active { background: #f5f5f5; transform: scale(0.98); }
.app-action-btn svg { color: #555; }

/* Sort Panel (เฉพาะส่วนลิสต์รายการ) */
.sort-panel-height { height: auto !important; max-height: 60vh; } /* ไม่ต้องสูงมาก */
.sort-options-list { list-style: none; margin: 0; padding: 0; }
.sort-options-list li { border-bottom: 1px solid #f9f9f9; }

.sort-option-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 0;
    text-decoration: none; color: #333; font-size: 14px;
}
.sort-option-item.active {
    font-weight: 700; color: var(--primary-color); /* สีธีม */
}
.sort-option-item .check-icon { stroke: var(--primary-color); }


/* =========================================
   CATEGORY SCROLLER (Drag Fix Version)
   ========================================= */

.app-category-scroller {
    width: 100%;
    overflow-x: auto;
    padding: 15px 0 5px 0; /* เว้นบนเยอะหน่อยให้เงาไม่ขาด */
    background: #fff;
    
    /* ซ่อน Scrollbar */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 

    /* ★ เพิ่ม: เปลี่ยนเมาส์เป็นรูปมือจับ */
    cursor: grab;
    cursor: -webkit-grab;
    user-select: none; /* ห้ามคลุมดำ */
}
.app-category-scroller::-webkit-scrollbar { display: none; }

/* ตอนกำลังกำมือลาก (JS จะเติม class นี้ให้) */
.app-category-scroller.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.cat-scroll-track {
    display: flex; /* เรียงแนวนอน */
    padding: 0 15px; /* เว้นขอบซ้ายขวา */
    gap: 15px; /* ระยะห่างระหว่างการ์ด */
}

/* ตัวการ์ด (Card) */
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 70px; /* ความกว้างของการ์ด */
    flex-shrink: 0; /* ห้ามหด */
    gap: 6px;
    
    /* ป้องกันการลาก Link */
    -webkit-user-drag: none;
}

/* กล่องรูปภาพ (วงกลมมนๆ) */
.cat-img-box {
    width: 55px; height: 55px;
    background: #f7f7f7;
    border-radius: 18px; /* ปรับเป็น 50% ถ้าอยากได้วงกลม */
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: 0.2s;
    position: relative;
}

/* รูปภาพข้างใน */
.cat-img-box img {
    width: 100%; height: 100%;
    object-fit: cover; /* บังคับรูปให้เต็มกล่องสวยๆ */
    
    /* ★ สำคัญมาก: ป้องกันเมาส์ไปจับโดนรูป ไม่งั้นลากไม่ไป */
    pointer-events: none; 
}

/* ไอคอน (สำหรับปุ่ม All หรือหมวดไม่มีรูป) */
.cat-img-box svg { 
    width: 24px; height: 24px; stroke: #888; 
    pointer-events: none; /* กันจับโดนไอคอนด้วย */
}

.cat-img-box.all-items { background: var(--primary-light); border-color: #b2ebf2; }
.cat-img-box.all-items svg { stroke: var(--primary-color); }

/* ชื่อหมวดหมู่ */
.cat-name {
    font-size: 11px; color: #666;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* ตัดคำถ้ายาวเกิน */
}

/* Active State (เมื่อเลือกหมวดนั้นอยู่) */
.cat-card.active .cat-img-box {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(4,163,156,0.2); /* มีเงาเรืองแสงนิดๆ */
    background: #fff;
}
.cat-card.active .cat-name {
    color: var(--primary-color);
    font-weight: 700;
}

/* =========================================
   MINIMAL FILTER & DUAL SLIDER (Final Version)
   ========================================= */

/* 1. Reset พื้นฐาน (กัน Theme แม่แทรก) */
.custom-filter-panel.minimal-theme * {
    box-sizing: border-box;
}
/* ล้างค่า Input เดิมของ Theme */
.custom-filter-panel input, 
.custom-filter-panel button {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Slider Track (หลอดสไลด์แบบหลอดคู่) */
.range-slider-wrapper {
    position: relative;
    width: 100%;
    padding: 10px 0 25px 0; /* เว้นที่ด้านล่างให้ปุ่มลาก */
}
.slider-container {
    position: relative;
    width: 100%;
    height: 6px; /* ความหนาหลอด */
    margin-top: 15px;
}
/* เส้นพื้นหลัง (สีเทา) */
.slider-track {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    position: absolute;
    top: 0; bottom: 0;
    z-index: 1;
}

/* ตัวก้อนกลมๆ (Thumb) - ซ้อนกัน 2 อัน */
.slider-container input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none; /* เพื่อให้คลิกทะลุได้ */
    z-index: 2;
    height: 6px; /* สูงเท่าหลอด */
    border: none !important;
}

/* แต่งปุ่มลาก (Chrome/Safari) */
.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px; width: 24px; /* ขนาดปุ่มลาก */
    background-color: #fff;
    border: 2px solid var(--primary-color); /* สีขอบปุ่ม */
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto; /* ให้ลากได้ */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    margin-top: 0; /* ปรับให้ตรงกลาง */
}
/* แต่งปุ่มลาก (Firefox) */
.slider-container input[type="range"]::-moz-range-thumb {
    height: 24px; width: 24px;
    background-color: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 3. กล่องตัวเลขราคา (Minimal Inputs) */
.price-display {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 5px;
}
.price-box {
    display: flex; align-items: center;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 6px 12px;
    border: 1px solid transparent;
    transition: 0.2s;
    width: 45%;
}
/* เวลาคลิกพิมพ์ ให้กรอบเป็นสีเขียว */
.price-box:focus-within {
    background: #fff; border-color: var(--primary-color);
}
.price-box .currency {
    font-size: 14px; color: #999; margin-right: 5px; font-family: sans-serif;
}
.price-box input {
    border: none !important; background: transparent !important;
    padding: 0 !important; margin: 0 !important;
    font-size: 15px; font-weight: 600; color: #333;
    width: 100%;
    -moz-appearance: textfield; /* ซ่อนลูกศรขึ้นลง */
    appearance: textfield;
    height: auto !important;
}
.price-box input::-webkit-outer-spin-button,
.price-box input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.sep { color: #ccc; font-weight: 300; }


/* =========================================
   1. ส่วนสวิตช์ (ลดราคา/พร้อมส่ง) - แบบแนวนอนคู่
   ========================================= */
.toggle-row {
    display: flex;
    gap: 12px; /* ระยะห่างระหว่าง 2 กล่อง */
    width: 100%;
    margin-bottom: 20px;
}

.minimal-toggle {
    flex: 1; /* แบ่งพื้นที่กันคนละครึ่ง (50/50) */
    display: flex;
    justify-content: space-between; /* ตัวหนังสือซ้าย สวิตช์ขวา */
    align-items: center;
    padding: 12px 15px; /* เพิ่มพื้นที่หายใจ */
    border: 1px solid #eee; /* ใส่กรอบบางๆ */
    border-radius: 16px; /* มุมมนสวยๆ */
    background: #fff;
    margin: 0; /* ลบระยะเดิม */
    transition: 0.2s;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ */
.minimal-toggle:hover {
    border-color: var(--primary-color);
    background: #fcfcfc;
}

.minimal-toggle .label-text {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

/* ปรับขนาดสวิตช์ให้พอดีกับกล่อง */
.switch-box {
    width: 40px; height: 22px;
}
.switch-box .slider:before {
    height: 16px; width: 16px; left: 3px; bottom: 3px;
}
.switch-box input:checked + .slider:before {
    transform: translateX(18px);
}


/* =========================================
   2. ส่วนปุ่ม Footer (Clear / Apply) - แก้ทับธีมแม่ 100%
   ========================================= */
.filter-footer {
    padding: 20px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    gap: 12px;
    background: #fff;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* สไตล์พื้นฐานของทั้ง 2 ปุ่ม */
.custom-filter-panel .btn-reset, 
.custom-filter-panel .btn-apply {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px !important;       /* บังคับความสูง */
    border-radius: 12px !important; /* บังคับความมน (แก้ 3px ของธีม) */
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0 20px !important;    /* จัด Padding ใหม่ */
    line-height: normal !important;
    
    /* ล้างค่าเดิมของ Hello Elementor */
    -webkit-appearance: none;
    appearance: none;
}

/* ปุ่มล้างค่า (สีเทาอ่อน) */
.custom-filter-panel .btn-reset {
    flex: 1;
    background: #f5f7f9 !important;      /* ทับค่า transparent */
    color: #666 !important;              /* ทับสีชมพู #c36 */
    border: 1px solid transparent !important; /* ทับขอบสีชมพู */
}
.custom-filter-panel .btn-reset:hover {
    background: #e9ecef !important;
    color: #333 !important;
}

/* ปุ่มดูผลลัพธ์ (สีเขียว) */
.custom-filter-panel .btn-apply {
    flex: 2;
    /* ทับค่าพื้นหลังและขอบด้วย !important */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(4,163,156,0.25) !important;
}
.custom-filter-panel .btn-apply:active {
    transform: scale(0.98);
    box-shadow: none !important;
}


/* =========================================
   1. ส่วนสถานะแบบปุ่มกด (Button Pills)
   ========================================= */
.status-btn-row {
    display: flex;
    gap: 10px; /* ระยะห่างระหว่างปุ่ม */
    width: 100%;
    margin-bottom: 25px;
}

.status-btn-pill {
    flex: 1; /* ขยายเต็มพื้นที่เท่าๆ กัน */
    cursor: pointer;
    margin: 0;
}

/* ซ่อน Checkbox ของจริง */
.status-btn-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ดีไซน์ตัวปุ่ม (สถานะปกติ = ยังไม่เลือก) */
.status-btn-pill .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* ระยะห่างไอคอนกับตัวหนังสือ */
    width: 100%;
    padding: 12px 10px;
    background-color: #f5f7f9; /* สีเทาอ่อน */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* สถานะเมื่อเอาเมาส์ชี้ (Hover) */
.status-btn-pill:hover .btn-content {
    background-color: #eee;
    border-color: #ccc;
}

/* --- สถานะเมื่อถูกเลือก (Checked) --- */
/* เปลี่ยนสีพื้นหลังเป็นสีธีม (เขียว) ตัวหนังสือขาว */
.status-btn-pill input:checked + .btn-content {
    background-color: var(--primary-light); /* สีพื้นเขียวอ่อนๆ (ดูสบายตากว่าเขียวทึบ) */
    color: var(--primary-color);            /* สีตัวหนังสือเขียวเข้ม */
    border-color: var(--primary-color);     /* ขอบสีเขียว */
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(4, 163, 156, 0.15); /* เงาเรืองแสง */
}

/* จัดไอคอนให้สวย */
.status-btn-pill .btn-content svg {
    stroke-width: 2px;
    transition: 0.2s;
}

/* พอเลือกแล้ว ไอคอนขยับนิดนึงให้รู้ว่ากดแล้ว */
.status-btn-pill input:checked + .btn-content svg {
    transform: scale(1.1);
}



/* =========================================
   SHOP PAGE COVER (Clean Full Width)
   ========================================= */
.shop-cover-wrapper {
    width: 100%;           /* เต็มจอโดยธรรมชาติ */
    height: 250px;         /* ความสูง */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f1f1f1;
    margin-bottom: 0;      /* ติดกับส่วนล่าง */
}

/* ตัวรูปภาพ (IMG Tag) */
.shop-cover-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center; /* จัดกลางรูป */
    z-index: 1;
}

/* กล่องข้อความ */
.shop-cover-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    width: 100%;
    max-width: 1200px;
}

.shop-cover-title {
    color: #fff !important;
    font-size: 36px !important;
    font-weight: 800;
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 15px rgba(0,0,0,0.6);
}

.shop-cover-desc {
    color: #fff;
    font-size: 16px;
    margin-top: 10px;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}