.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.product-header-wrapper {
    /* ensure consistent behavior */
    gap: 1rem !important;
}

@media (max-width: 757px) {

    /* override flex behavior: allow wrapping and reorder */
    .product-header-wrapper {
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap: 1rem !important;
    }

    /* reset flex-shrink on all children to allow width control */
    .product-header-wrapper>div {
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        max-width: 100% !important;
    }

    /* --- Action buttons container (external + all brands) --- */
    /* both share one row: 50% width each, side by side */
    #externalDiv,
    #brandsDiv {
        width: 50% !important;
        flex: 0 0 45% !important;
        order: -1 !important;
        /* bring both above title & search */
        margin-bottom: 0 !important;
    }

    /* ensure buttons inside fill the container and align properly */
    #externalDiv .btn,
    #brandsDiv .btn {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem;
        white-space: nowrap;
    }

    /* hide text labels (words) on mobile – only icons remain */
    .btn-text-mobile-hidden {
        display: none !important;
    }

    /* optional: fine-tune icon sizing and remove extra spacing from icon margin */
    #externalDiv .btn i,
    #brandsDiv .btn i {
        margin-right: 0 !important;
        font-size: 1.4rem;
        /* slightly bigger icon for touch */
    }

    /* Title div: full width row, after the action buttons row */
    #titleDiv {
        width: 100% !important;
        flex: 0 0 100% !important;
        order: 0 !important;
        /* placed after order -1 buttons, before search */
        text-align: center !important;
        margin-top: 2.25rem;
        margin-bottom: 0;
    }

    #titleDiv h2 {
        font-size: 1.8rem;
        /* balanced on mobile */
        margin-bottom: 0;
    }

    /* Search div: full width row, appears below title */
    #searchDiv {
        width: 100% !important;
        flex: 0 0 100% !important;
        order: 1 !important;
        margin-top: 0;
    }

    /* improve spacing inside input group on mobile */
    #searchDiv .input-group {
        width: 100%;
    }

    #searchDiv .form-control {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    #searchDiv .btn-primary {
        padding: 0.75rem 1rem;
    }

    /* remove any residual background gradient override for consistency */
    #show-all-brands-btn.bg-gradient-gray {
        background: #6c757d !important;
    }

    /* ensure external link and show all brands buttons have consistent padding */
    .btn-outline-primary,
    .btn-secondary {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

@media (max-width: 480px) {
    #titleDiv h2 {
        font-size: 1.5rem;
    }

    #externalDiv .btn i,
    #brandsDiv .btn i {
        font-size: 1.2rem;
    }
}

@media (min-width: 758px) {

    /* show text labels normally on desktop/tablet */
    .btn-text-mobile-hidden {
        display: inline !important;
    }

    /* restore original icon margin for desktop */
    #externalDiv .btn i,
    #brandsDiv .btn i {
        margin-right: 0.5rem !important;
    }

    /* any additional desktop fine-tuning */
    .product-header-wrapper {
        flex-wrap: nowrap !important;
    }

    .product-header-wrapper>div {
        flex-shrink: 0 !important;
    }
}

/* Product cards consistent height */
.card-product {
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* custom wrapper to ensure clean override without affecting other elements */
.action-stack-wrapper {
    margin-top: 1rem;
    /* equivalent to mt-4 (1.5rem) but we'll keep base */
}

/* desktop default: inline buttons, icons visible, horizontal spacing */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.action-buttons .btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* preserve original mx-2 margin on desktop (Bootstrap spacing) 
           but we'll apply via class or keep original structure */
.action-buttons .btn {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* first button left margin reset for alignment */
.action-buttons .btn:first-child {
    margin-left: 0;
}

/* ----- MOBILE (below 758px) ----- */
@media (max-width: 757px) {
    .action-buttons {
        /* stack vertically, full width, descending order */
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        /* push the entire block lower on the page */
        margin-top: 2rem;
    }

    .action-buttons .btn {
        /* full width buttons, centered text, remove inline spacing */
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: center;
        white-space: normal;
        /* allow text wrap if needed */
    }

    /* HIDE ICONS on mobile – only text remains */
    .action-buttons .btn i {
        display: none !important;
    }

    /* optional: adjust padding for better touch target */
    .action-buttons .btn {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

/* optional: for very narrow screens (extra polish) */
@media (max-width: 480px) {
    .action-buttons {
        margin-top: 2.5rem;
        /* even lower on small phones */
    }
}

@media (max-width: 757px) {
    .responsive-img {
        width: 100% !important;
        max-width: 100%;
        height: auto;
    }
}