/*
 * BestTopZone — Responsive CSS
 * WP-specific overrides (rules NOT in freshcart.min.css)
 */

/* ==========================================================================
   Custom spacing not in freshcart.min.css
   ========================================================================== */
.my-lg-14 { margin-top: 2rem; margin-bottom: 2rem; }
@media (min-width: 992px) {
    .my-lg-14 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
}
.my-8 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.py-8 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* ==========================================================================
   Cursor pointer util (typo matches đối thủ)
   ========================================================================== */
.cursor-ponter { cursor: pointer; }

/* ==========================================================================
   Responsive Product Grid (mobile-specific)
   ========================================================================== */
@media (max-width: 575.98px) {
    .card-product picture img {
        max-height: 120px;
    }
    .card-product .brand {
        font-size: 0.625rem;
    }
    .card-product .title small {
        font-size: 0.75rem;
    }
    .card-product .btn-sm {
        font-size: 0.6875rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .card-product picture img {
        max-height: 160px;
    }
}

/* ==========================================================================
   Footer responsive (mobile)
   ========================================================================== */
@media (max-width: 767.98px) {
    .footer .row .col.flex-nowrap {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 1rem;
    }
}

/* ==========================================================================
   WP Pagination — WordPress-specific (not in đối thủ)
   ========================================================================== */
.page-numbers {
    list-style: none;
    display: flex;
    padding: 0;
    gap: 0.25rem;
}
.page-numbers li a,
.page-numbers li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--fc-gray-300);
    border-radius: var(--fc-border-radius-sm);
    color: var(--fc-gray-800);
    text-decoration: none;
    transition: background-color 0.15s;
}
.page-numbers li a:hover {
    background-color: var(--fc-gray-100);
}
.page-numbers li span.current {
    background-color: var(--fc-primary);
    border-color: var(--fc-primary);
    color: #fff;
}

/* ==========================================================================
   Form select sm — supplement
   ========================================================================== */
.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.8125rem;
}

/* ==========================================================================
   Alert info — WP-specific
   ========================================================================== */
.alert-info {
    --fc-alert-bg: var(--fc-light-info, #cce1fd);
    --fc-alert-border-color: var(--fc-info-border-subtle, #99c3fc);
    --fc-alert-color: var(--fc-dark-info, #002b63);
}