/* Frequently Bought Together Styles */
.section-frequently-bought {
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.03);
}

.frequently-product-item {
    position: relative;
    padding: 1rem;
    background: #fff;
    border-radius: 1rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.frequently-product-item:hover {
    border-color: #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Ghim tiêu đề luôn cao đúng 2 dòng (line-clamp-2) để các card thẳng hàng dù
   tên sản phẩm dài ngắn khác nhau. Dùng em theo leading-snug (1.375) thay vì
   rem/px vì root font-size của theme là 10px, dễ tính nhầm. */
.frequently-product-item .card-product__title {
    min-height: calc(2 * 1.375em);
}

/* Sản phẩm hết hàng: vẫn hiện để gợi ý nhưng làm mờ, checkbox bị khoá */
.frequently-product-item--sold-out .card-product__image,
.frequently-product-item--sold-out .card-product__body > *:not(:last-child) {
    opacity: 0.5;
}

.frequently-product-item--sold-out .frequently-checkbox {
    opacity: 0.4;
    cursor: not-allowed;
}

.frequently-product-item .frequently-checkbox-wrapper {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.frequently-product-item .frequently-checkbox {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: all 0.2s ease;
}

.frequently-product-item .frequently-checkbox:checked {
    background-color: var(--color-secondary, #094eff);
    border-color: var(--color-secondary, #094eff);
}

.frequently-product-item .frequently-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.frequently-bundle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .frequently-bundle-grid {
        grid-template-columns: 1fr 320px;
        gap: 3rem;
    }
}

.frequently-summary {
    position: sticky;
    top: 100px;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
}

.frequently-summary h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.frequently-add-to-cart {
    height: 50px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 0.5rem;
}

.frequently-total-price {
    color: var(--color-price, #ee1926);
    font-size: 2rem;
    font-weight: 800;
}

.frequently-selected-items {
    max-height: 16rem;
    overflow-y: auto;
}

/* Fix carousel overflow on mobile */
.frequently-products-carousel .embla {
    overflow: hidden;
}

.frequently-products-carousel .embla__viewport {
    overflow: visible;
}

.frequently-products-carousel .embla__container {
    display: flex;
}

/* Mobile: mọi slide phải cùng padding thì card mới rộng bằng nhau. Trước đây
   bỏ padding riêng slide đầu để card không lẹm mép trái, nhưng card đầu vì thế
   rộng hơn 8px -> ảnh (aspect-ratio cố định) cao hơn ~10px -> phần thông tin
   bên dưới ngắn lại, lệch hẳn so với các card sau. Giữ padding đều và kéo cả
   dải sang trái đúng 8px để mép trái vẫn thẳng. */
@media (max-width: 767px) {
    .frequently-products-carousel .embla__container {
        margin-left: -8px !important;
    }
}

.frequently-add-to-cart.loading {
    opacity: 0.6;
    pointer-events: none;
}