/**
 * MINORI SPORT — Product Card Styles (Phương án B)
 * Image header: #ffffff | Card body: #fff | Accent: #F75E00
 */

/* ══════════════════════════════════════════════════════════
   1. CARD WRAPPER
   Có 2 cấu trúc HTML tùy context:
   - Trang shop/danh mục (content-product.php): .product-small.col > .col-inner
   - [ux_products] shortcode (Flatsome template): .col > .col-inner
══════════════════════════════════════════════════════════ */
.product-small.col .col-inner,
.minori-brand-grid-wrapper .col-inner,
.minori-cat-grid-wrapper .col-inner {
    background:    #ffffff !important;
    border:        2px solid #F75E00 !important;
    border-radius: 14px !important;
    overflow:      hidden !important;
    box-shadow:    0 2px 8px rgba(247, 94, 0, 0.10) !important;
    transition:    transform 0.15s ease, box-shadow 0.15s ease !important;
}

.product-small.col:hover .col-inner,
.minori-brand-grid-wrapper .col:hover .col-inner,
.minori-cat-grid-wrapper .col:hover .col-inner {
    transform:  translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(24, 95, 165, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════
   2. IMAGE AREA — Nền trắng, bo góc trên
══════════════════════════════════════════════════════════ */
.product-small.col .box-image {
    background:    #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
}

/* ══════════════════════════════════════════════════════════
   2b. TEXT AREA — Nền trắng, bo góc dưới
══════════════════════════════════════════════════════════ */
.product-small.col .box-text,
.product-small.col .box-text-inner,
.product-small.col .product-info {
    background:    #ffffff !important;
    border-radius: 0 0 12px 12px !important;
}

/* ══════════════════════════════════════════════════════════
   3. TIÊU ĐỀ SẢN PHẨM
══════════════════════════════════════════════════════════ */
.product-small.col .woocommerce-loop-product__title {
    color:       #0d2340 !important;
    font-size:   13.5px !important;
    font-weight: 500 !important;
    text-align:  center !important;
}

/* ══════════════════════════════════════════════════════════
   4. ĐƯỜNG KẺ PHÂN CÁCH
══════════════════════════════════════════════════════════ */
.product-small.col .price {
    border-top:  1px solid #e5eef7 !important;
    padding-top: 5px !important;
    margin-top:  4px !important;
    text-align:  center !important;
}

/* Đảm bảo price-wrapper full width */
.product-small.col .price-wrapper {
    display: block !important;
    width:   100% !important;
}

/* ══════════════════════════════════════════════════════════
   5. GIÁ
══════════════════════════════════════════════════════════ */

/* Giá gốc gạch ngang */
.product-small.col .price del,
.product-small.col .price del .woocommerce-Price-amount,
.product-small.col .price del .amount {
    color:           #333 !important;
    font-size:       13px !important;
    font-weight:     500 !important;
    text-decoration: line-through !important;
    opacity:         1 !important;
}

/* Giá sale */
.product-small.col .price ins,
.product-small.col .price ins .woocommerce-Price-amount,
.product-small.col .price ins .amount {
    color:           #F75E00 !important;
    font-size:       18px !important;
    font-weight:     500 !important;
    text-decoration: none !important;
    background:      transparent !important;
}

/* Giá duy nhất */
.product-small.col .price > .woocommerce-Price-amount,
.product-small.col .price > .amount {
    color:       #F75E00 !important;
    font-size:   18px !important;
    font-weight: 500 !important;
}

/* ══════════════════════════════════════════════════════════
   6. KHUNG GIÁ THÀNH VIÊN — layout 3 dòng
══════════════════════════════════════════════════════════ */

/* Wrapper */
.minori-member-box-final {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    stretch !important;
    gap:            3px !important;
    margin:         0 !important;
    padding:        0 !important;
    width:          100% !important;
}

/* Dòng 1: label "GIÁ MEMBER" trên, giá cam dưới — căn giữa, nền xanh nhạt */
.minori-member-price-row {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            1px !important;
    background:     #EBF2FA !important;
    border:         1px solid #b8d4ed !important;
    border-radius:  8px !important;
    padding:        4px 8px !important;
    width:          100% !important;
    box-sizing:     border-box !important;
    overflow:       hidden !important;
}

.minori-member-label {
    color:       #185FA5 !important;
    font-size:   10px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.minori-member-price-value,
.minori-member-price-value span,
.minori-member-price-value bdi,
.minori-member-price-value .woocommerce-Price-amount,
.minori-member-price-value .woocommerce-Price-currencySymbol {
    color:       #F75E00 !important;
    font-size:   12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    display:     inline !important;
    line-height: 1.4 !important;
}

/* Dòng 2: Giá sale — đen đậm, căn giữa */
.minori-price-body {
    display:    block !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

.minori-sale-price-val,
.minori-sale-price-val span,
.minori-sale-price-val bdi,
.minori-sale-price-val .woocommerce-Price-amount {
    color:       #1a1a1a !important;
    font-size:   11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    display:     inline !important;
}

/* Dòng 3: MiXu — nền xanh nhạt, bo tròn */
.minori-mixu-tag {
    background:    #EBF2FA !important;
    color:         #185FA5 !important;
    border:        1px solid #b8d4ed !important;
    border-radius: 8px !important;
    padding:       4px 8px !important;
    font-size:     10px !important;
    font-weight:   500 !important;
    width:         100% !important;
    box-sizing:    border-box !important;
    text-align:    center !important;
    line-height:   1.4 !important;
    display:       block !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
}

/* ══════════════════════════════════════════════════════════
   7. ACTION WRAPPER & BUTTONS
══════════════════════════════════════════════════════════ */
.minori-loop-action-wrapper {
    padding:    0 10px 12px !important;
    width:      100% !important;
    box-sizing: border-box !important;
}

.minori-loop-add-to-cart {
    width:      100% !important;
    box-sizing: border-box !important;
}

.minori-compare-buttons-wrapper {
    display:    block !important;
    width:      100% !important;
    box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════
   8. NÚT "XEM BẢNG" — ẩn mặc định
══════════════════════════════════════════════════════════ */
.minori-compare-buttons-wrapper .minori-view-compare,
.minori-compare-buttons-wrapper a.minori-view-compare {
    display:    none !important;
    visibility: hidden !important;
}

.minori-compare-buttons-wrapper .minori-view-compare.xem-bang-active,
.minori-compare-buttons-wrapper a.minori-view-compare.xem-bang-active {
    display:         flex !important;
    visibility:      visible !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           100% !important;
    margin-top:      6px !important;
    box-sizing:      border-box !important;
    text-align:      center !important;
    text-decoration: none !important;
    padding:         0 !important;
}

/* ══════════════════════════════════════════════════════════
   9. NÚT "CHỌN PHÂN LOẠI" / "THÊM GIỎ HÀNG"
══════════════════════════════════════════════════════════ */
.minori-loop-add-to-cart .button,
.minori-loop-add-to-cart .add_to_cart_button {
    background:      #F75E00 !important;
    color:           #fff !important;
    border-radius:   9px !important;
    border:          none !important;
    font-size:       13.5px !important;
    font-weight:     500 !important;
    box-shadow:      none !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    text-align:      center !important;
    width:           100% !important;
    height:          40px !important;
    padding:         0 !important;
    box-sizing:      border-box !important;
}

.minori-loop-add-to-cart .button:hover,
.minori-loop-add-to-cart .add_to_cart_button:hover {
    background: #d94e00 !important;
    color:      #fff !important;
}

/* ══════════════════════════════════════════════════════════
   10. NÚT "+ SO SÁNH"
══════════════════════════════════════════════════════════ */
.minori-compare-buttons-wrapper .minori-add-to-compare {
    background:      transparent !important;
    color:           #185FA5 !important;
    border:          1px solid #c5daf0 !important;
    border-radius:   9px !important;
    font-size:       12px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    text-align:      center !important;
    width:           100% !important;
    height:          40px !important;
    padding:         0 !important;
    flex:            1 !important;
    box-sizing:      border-box !important;
}

.minori-compare-buttons-wrapper .minori-add-to-compare:hover {
    background:   #EBF2FA !important;
    color:        #185FA5 !important;
    border-color: #b8d4ed !important;
}

/* Đã thêm vào so sánh */
.minori-compare-buttons-wrapper .minori-add-to-compare.added {
    background:   #e0e0e0 !important;
    color:        #1a1a1a !important;
    border-color: #bbb !important;
}

.minori-compare-buttons-wrapper .minori-add-to-compare.added:hover {
    background:   #d32f2f !important;
    color:        #fff !important;
    border-color: #d32f2f !important;
}

/* Không thể so sánh */
.minori-compare-buttons-wrapper .minori-add-to-compare.incompatible {
    background:   #f5f5f5 !important;
    color:        #bbb !important;
    border-color: #e0e0e0 !important;
    cursor:       not-allowed !important;
}

/* ══════════════════════════════════════════════════════════
   11. BADGE GIẢM GIÁ
══════════════════════════════════════════════════════════ */
.product-small.col .onsale {
    background:    #F75E00 !important;
    color:         #fff !important;
    border-radius: 20px !important;
    font-weight:   600 !important;
    font-size:     12px !important;
    padding:       3px 10px !important;
    border:        none !important;
}

.product-small.col .label-giam-soc,
.product-small.col .label-km {
    border-radius: 20px !important;
    font-size:     11px !important;
    font-weight:   700 !important;
    padding:       3px 10px !important;
}

/* ══════════════════════════════════════════════════════════
   12. NÚT QUICK VIEW — pill nhỏ góc dưới trái
══════════════════════════════════════════════════════════ */
.product-small .quick-view-button,
.product-small .quick-view {
    all:             unset !important;
    position:        absolute !important;
    bottom:          10px !important;
    left:            10px !important;
    right:           auto !important;
    display:         flex !important;
    align-items:     center !important;
    gap:             5px !important;
    background:      rgba(255, 255, 255, 0.92) !important;
    color:           #1a1a1a !important;
    border-radius:   20px !important;
    padding:         5px 12px 5px 8px !important;
    font-size:       12px !important;
    font-weight:     500 !important;
    box-shadow:      0 2px 8px rgba(0, 0, 0, 0.18) !important;
    cursor:          pointer !important;
    transition:      background 0.15s, box-shadow 0.15s !important;
    width:           auto !important;
    max-width:       none !important;
    text-transform:  none !important;
    letter-spacing:  normal !important;
    line-height:     1.4 !important;
    z-index:         5 !important;
}

.product-small .quick-view-button::before,
.product-small .quick-view::before {
    content:     '';
    display:     inline-block !important;
    width:       15px !important;
    height:      15px !important;
    flex-shrink: 0 !important;
    background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

.product-small .quick-view-button:hover,
.product-small .quick-view:hover {
    background:  rgba(255, 255, 255, 1) !important;
    box-shadow:  0 4px 12px rgba(0, 0, 0, 0.22) !important;
    color:       #1a1a1a !important;
}

/* ══════════════════════════════════════════════════════════
   14. BRAND/CATEGORY GRID — ĐỒNG ĐỀU CHIỀU CAO CARD
══════════════════════════════════════════════════════════ */

/* Cố định tỷ lệ ảnh 1:1 — override inline padding-bottom của Flatsome */
.minori-brand-grid-wrapper .image-zoom-wrapper,
.minori-cat-grid-wrapper .image-zoom-wrapper {
    padding-bottom: 100% !important;
}

/* Col flex để stretch theo hàng */
.minori-brand-grid-wrapper .col,
.minori-cat-grid-wrapper .col {
    display: flex !important;
}

/* Col-inner flex column, cao 100% */
.minori-brand-grid-wrapper .col-inner,
.minori-cat-grid-wrapper .col-inner {
    display:        flex !important;
    flex-direction: column !important;
    height:         100% !important;
}

/* Box sản phẩm flex column, chiếm hết chiều cao */
.minori-brand-grid-wrapper .product-small.box,
.minori-cat-grid-wrapper .product-small.box {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
}

/* Box text chiếm phần còn lại */
.minori-brand-grid-wrapper .box-text,
.minori-cat-grid-wrapper .box-text {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
}

/* Giá và action đẩy xuống đáy */
.minori-brand-grid-wrapper .price-wrapper,
.minori-cat-grid-wrapper .price-wrapper {
    margin-top: auto !important;
}

/* ══════════════════════════════════════════════════════════
   13. MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .product-small.col .col-inner,
    .minori-brand-grid-wrapper .col-inner,
    .minori-cat-grid-wrapper .col-inner {
        border-width:  1px !important;
        border-radius: 10px !important;
    }

    .product-small.col:hover .col-inner,
    .minori-brand-grid-wrapper .col:hover .col-inner,
    .minori-cat-grid-wrapper .col:hover .col-inner {
        transform:  none !important;
        box-shadow: 0 2px 8px rgba(24, 95, 165, 0.08) !important;
    }
}