/*
|--------------------------------------------------------------------------
| AllDigitalCart
| Responsive CSS
|--------------------------------------------------------------------------
|
| Additional responsive rules.
|
| Tailwind responsive utilities remain the primary responsive system.
| This file is reserved for layout behavior, component adjustments,
| and edge cases that require CSS media queries.
|
*/


/*
|--------------------------------------------------------------------------
| Base / Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 374px) {

    html {
        font-size: 15px;
    }

    .site-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #site-header .h-16 {
        height: 3.75rem;
    }

    #site-header a {
        -webkit-tap-highlight-color: transparent;
    }

    /*
    |--------------------------------------------------------------------------
    | Product grids
    |--------------------------------------------------------------------------
    */

    .product-grid {
        grid-template-columns: 1fr;
    }

    /*
    |--------------------------------------------------------------------------
    | Product card
    |--------------------------------------------------------------------------
    */

    .product-card-title {
        font-size: 0.875rem;
    }

    /*
    |--------------------------------------------------------------------------
    | Buttons
    |--------------------------------------------------------------------------
    */

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 639px) {

    /*
    |--------------------------------------------------------------------------
    | Prevent horizontal overflow
    |--------------------------------------------------------------------------
    */

    body {
        overflow-x: hidden;
    }

    /*
    |--------------------------------------------------------------------------
    | Containers
    |--------------------------------------------------------------------------
    */

    .site-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /*
    |--------------------------------------------------------------------------
    | Product cards
    |--------------------------------------------------------------------------
    */

    .product-card {
        border-radius: 0.625rem;
    }

    .product-card-image {
        aspect-ratio: 1 / 1;
    }

    /*
    |--------------------------------------------------------------------------
    | Product content
    |--------------------------------------------------------------------------
    */

    .product-content {
        padding: 0.875rem;
    }

    /*
    |--------------------------------------------------------------------------
    | Sticky sidebar
    |--------------------------------------------------------------------------
    */

    .sticky-sidebar {
        position: static;
    }

    /*
    |--------------------------------------------------------------------------
    | Breadcrumbs
    |--------------------------------------------------------------------------
    */

    [aria-label="Breadcrumb"] {
        overflow: hidden;
    }

    [aria-label="Breadcrumb"] ol {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.125rem;
        scrollbar-width: none;
        white-space: nowrap;
    }

    [aria-label="Breadcrumb"] ol::-webkit-scrollbar {
        display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | Pagination
    |--------------------------------------------------------------------------
    */

    [data-pagination] {
        width: 100%;
    }

    [data-pagination] > div {
        align-items: stretch;
    }

    [data-pagination] ul {
        width: 100%;
        justify-content: center;
    }

    /*
    |--------------------------------------------------------------------------
    | Hide some pagination text on very small screens
    |--------------------------------------------------------------------------
    */

    [data-pagination] .pagination-label {
        display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | Mini cart
    |--------------------------------------------------------------------------
    */

    [data-mini-cart] {
        max-width: 100%;
    }

    /*
    |--------------------------------------------------------------------------
    | Newsletter
    |--------------------------------------------------------------------------
    */

    [data-newsletter-section] input,
    [data-newsletter-section] button {
        width: 100%;
    }

    /*
    |--------------------------------------------------------------------------
    | Promotional popup
    |--------------------------------------------------------------------------
    */

    [data-popup] {
        padding: 0.75rem;
    }

    [data-popup-dialog] {
        max-height: calc(100vh - 1.5rem);
        overflow-y: auto;
    }

    /*
    |--------------------------------------------------------------------------
    | Forms
    |--------------------------------------------------------------------------
    */

    .form-actions {
        flex-direction: column;
    }

    .form-actions > * {
        width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (min-width: 640px) and (max-width: 1023px) {

    /*
    |--------------------------------------------------------------------------
    | Product grid
    |--------------------------------------------------------------------------
    */

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
    |--------------------------------------------------------------------------
    | Sidebar
    |--------------------------------------------------------------------------
    */

    .shop-sidebar {
        margin-bottom: 2rem;
    }

}


/*
|--------------------------------------------------------------------------
| Tablet / Small Desktop
|--------------------------------------------------------------------------
*/

@media (min-width: 768px) {

    /*
    |--------------------------------------------------------------------------
    | Product grid
    |--------------------------------------------------------------------------
    */

    .product-grid-md {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

@media (min-width: 1024px) {

    /*
    |--------------------------------------------------------------------------
    | Product grid
    |--------------------------------------------------------------------------
    */

    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /*
    |--------------------------------------------------------------------------
    | Sticky shop sidebar
    |--------------------------------------------------------------------------
    */

    .shop-sidebar {
        position: sticky;
        top: 5.5rem;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile-only components
    |--------------------------------------------------------------------------
    */

    #mobile-menu {
        display: none !important;
    }

}


/*
|--------------------------------------------------------------------------
| Large Desktop
|--------------------------------------------------------------------------
*/

@media (min-width: 1280px) {

    /*
    |--------------------------------------------------------------------------
    | Product grid
    |--------------------------------------------------------------------------
    */

    .product-grid-xl {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

}


/*
|--------------------------------------------------------------------------
| Very Large Screens
|--------------------------------------------------------------------------
*/

@media (min-width: 1536px) {

    .site-container {
        max-width: 90rem;
    }

}


/*
|--------------------------------------------------------------------------
| Landscape Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 896px) and (orientation: landscape) {

    [data-popup-dialog] {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

}


/*
|--------------------------------------------------------------------------
| Touch Devices
|--------------------------------------------------------------------------
*/

@media (hover: none) and (pointer: coarse) {

    /*
    |--------------------------------------------------------------------------
    | Avoid hover-only interactions on touch devices
    |--------------------------------------------------------------------------
    */

    .product-card:hover {
        border-color: var(--adc-border);
        box-shadow: none;
    }

    .product-card:hover .product-card-image img {
        transform: none;
    }

    /*
    |--------------------------------------------------------------------------
    | Comfortable touch targets
    |--------------------------------------------------------------------------
    */

    button,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 2.75rem;
    }

}


/*
|--------------------------------------------------------------------------
| High Resolution Displays
|--------------------------------------------------------------------------
*/

@media (min-resolution: 2dppx) {

    /*
    |--------------------------------------------------------------------------
    | Keep borders visually consistent on high-density displays
    |--------------------------------------------------------------------------
    */

    .product-card,
    .form-control {
        border-width: 1px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    #site-header,
    .product-card,
    .product-card-image img,
    [data-popup],
    [data-popup-dialog] {
        transition: none !important;
    }

}