/* =========================================
   TABLET
   ========================================= */

@media (min-width:701px) and (max-width:1500px){

    .brand h1{
        font-size:36px;
    }

}

@media (min-width:701px) and (max-width:1500px){

    .brand h1{
        font-size:36px;
        white-space:nowrap;
    }

    .product button{
        width:100%;
        min-width:0;
        padding:8px 6px;
        font-size:12px;
        margin:4px 0;
    }

}
@media (max-width:700px){

    .header{
        display:grid;
        grid-template-columns:65px minmax(0, 1fr);
        align-items:center;
        gap:6px;
        width:100%;
        padding:4px 10px;
        text-align:left;
    }

    .logo2{
        width:55px;
        max-width:55px;
        margin:0;
    }

    .brand{
        width:auto;
        min-width:0;
        margin:0;
        padding-left:6px;
    }

    .brand h1{
        font-size:40px;
        line-height:1.05;
        margin:0;
        white-space:nowrap;
    }

    .brand p{
        font-size:11px;
        line-height:1.1;
        margin:2px 0 0;
    }

    .header-buttons{
        grid-column:1 / -1;
        width:100%;
        margin:0;
        transform:none !important;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:5px;
    }

    .cart-icon{
        position:static !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        margin:0 !important;
        transform:none !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:3px !important;
    }

    #cart-count{
        position:relative !important;
        top:-9px !important;
        margin:0 !important;
        transform:translateX(-8px) !important;
    }

    .contact-button{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:8px;
        margin-top:-2px !important;
    }

    .watch-banner span{
        display:inline-block;
        margin:5px 10px;
    }

    .layout{
        flex-direction:column;
        width:100%;
        padding:12px;
    }

    aside{
        width:100%;
    }

    aside a{
        display:inline-block;
        margin-right:18px;
        padding:7px 0;
        font-size:16px;
    }

    main{
        width:100%;
        padding-left:0;
    }

    .products{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
        width:100%;
    }

    .product-details{
        padding:0;
    }

    .gallery{
        flex-direction:column-reverse;
    }

    .thumbnails{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
    }

    .big-product{
        width:100%;
    }

    #mainProduct{
        width:100% !important;
        max-width:376px;
    }

    .description-box{
        padding:20px;
    }

    .product button,
    .cart button,
    .buy-button,
    .contact-button a,
    .enlarge-note{
        min-width:130px;
        font-size:14px;
    }

}


/* =========================================
   ACTUAL PHONE WIDTH
   ========================================= */

@media (max-width:600px){

    .header{
        display:grid;
        grid-template-columns:55px minmax(0, 1fr);
        align-items:center;
        gap:3px;
        width:100%;
        padding:3px 7px;
        text-align:left;
    }

    .logo2{
        width:50px;
        max-width:50px;
        margin:0;
    }

    .brand{
        width:auto;
        min-width:0;
        margin:0;
        padding-left:0;
    }

    .brand h1{
        font-size:20px !important;
        line-height:1 !important;
        margin:0 !important;
        white-space:normal !important;
    }

    .brand p{
        font-size:11px;
        line-height:1;
        margin:2px 0 0;
    }

    .header-buttons{
        grid-column:1 / -1;
        width:100%;
        margin:1px 0 0 !important;
        transform:none !important;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:1px;
    }

    .cart-icon{
        position:static !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        margin:0 !important;
        transform:none !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    #cart-count{
        position:relative !important;
        margin:0 !important;
        transform:translate(-25px,-5px) !important;
    }

    .contact-button{
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        gap:4px;
        width:100%;
        margin:0 !important;
    }

    .contact-button a{
        min-width:0 !important;
        margin:0 !important;
        padding:5px 8px;
        font-size:11px;
    }

    .products{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
        width:100%;
    }

    .product{
        min-width:0 !important;
        min-height:0 !important;
        height:auto !important;
        padding:6px !important;
    }


    /* COMPACT PRODUCT CARDS ON PHONES */

    .product img,
    .product video{
        width:100% !important;
        height:120px !important;
        max-width:100% !important;
        object-fit:contain !important;
    }

    .product h3{
        font-size:13px !important;
        line-height:1.15 !important;
        margin:6px 0 4px !important;
    }

    .product .old{
        margin:2px 0 !important;
        font-size:11px !important;
    }

    .product .price{
        margin:4px 0 6px !important;
        font-size:17px !important;
    }


    /* SHARED COMPACT PHONE BUTTON SIZE */

    .product button{
        width:100% !important;
        min-width:0 !important;
        padding:5px 3px !important;
        font-size:9px !important;
    }


    /* =========================================
       INDEX / MEN'S PAGE BUTTONS ONLY
       ========================================= */

    body.men .products .product > button{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:5px 3px !important;
        font-size:9px !important;
        border-radius:20px !important;
        box-sizing:border-box !important;
    }

    body.men .products .product > button + button{
        margin-top:10px !important;
    }


    .watch-banner{
        font-size:11px !important;
        padding:8px 4px !important;
    }

    .watch-banner span{
        margin:3px 6px !important;
    }


    /* =========================================
       SHARED PHONE CATEGORY MENU
       MATCH INDEX MENU SIZE / SPACING
       ========================================= */

    aside{
        width:100% !important;
        margin:0 0 10px !important;
        padding:7px 10px !important;
        box-sizing:border-box !important;
        border-radius:8px !important;
    }

    aside h3{
        margin:0 0 5px !important;
        padding-bottom:4px !important;
        font-size:16px !important;
        text-align:center !important;
    }

    aside a{
        display:inline-block !important;
        margin:1px 7px 1px 0 !important;
        padding:2px 1px !important;
        font-size:11px !important;
        line-height:1.2 !important;
    }

    .menu-divider{
        display:block !important;
        width:100% !important;
        margin:8px 0 6px !important;
    }


    /* =========================================
       VIEW DETAILS PAGE — PHONE
       ========================================= */

    .product-details{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
        padding:0 !important;

        gap:12px !important;
        box-sizing:border-box !important;
    }


    /* THUMBNAIL AREA */

    .gallery{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box !important;
    }

    .thumbnails{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;

        justify-content:center !important;
        align-items:center !important;

        width:100% !important;

        margin:0 0 8px !important;
        padding:0 !important;

        gap:6px !important;
    }

    .thumbnails img{
        width:55px !important;
        height:55px !important;

        max-width:55px !important;

        object-fit:cover !important;

        margin:0 !important;
        padding:0 !important;
    }


    /* MAIN PRODUCT IMAGE */

    .big-product{
        display:block !important;

        width:100% !important;
        max-width:376px !important;

        flex:none !important;

        margin:0 auto !important;
        padding:0 !important;

        text-align:center !important;

        box-sizing:border-box !important;
    }

    #mainProduct{
        display:block !important;

        width:100% !important;
        max-width:376px !important;
        height:auto !important;

        margin:0 auto !important;
    }


    /* CLICK PICTURE TO ENLARGE */

    .enlarge-note{
        display:inline-block !important;

        width:auto !important;
        min-width:0 !important;

        margin:10px auto 0 !important;
        padding:7px 14px !important;

        font-size:11px !important;
        line-height:1.15 !important;
    }


    /* PRODUCT INFORMATION BOX */

    .description-box{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        margin:12px 0 0 !important;
        padding:16px !important;

        box-sizing:border-box !important;
    }


    /* PRODUCT TITLE */

    .description-box h1,
    #title{
        width:100% !important;

        margin:0 0 14px !important;
        padding:0 !important;

        font-size:22px !important;
        line-height:1.15 !important;

        white-space:normal !important;
        overflow-wrap:break-word !important;
    }


    /* PRODUCT DESCRIPTION TEXT */

    #description{
        width:100% !important;

        margin:0 0 12px !important;

        font-size:14px !important;
        line-height:1.5 !important;

        overflow-wrap:break-word !important;
    }


    /* PRICES */

    .description-box .old,
    .description-box .price,
    .shipping-note{
        width:100% !important;
    }


    /* ADD TO CART BUTTON */

    .description-box .buy-button{
        width:auto !important;
        min-width:130px !important;

        margin:8px 0 0 !important;
        padding:8px 14px !important;

        font-size:12px !important;
    }

}

/* =========================================
   VIEW DETAILS ONLY — COMPACT PHONE MENU
   ========================================= */

@media (max-width:700px){

    .product-sidebar{
        width:100% !important;
        padding:8px 12px !important;
    }

    .product-sidebar h3{
        margin:2px 0 7px !important;
        padding-bottom:6px !important;
        font-size:18px !important;
        line-height:1.1 !important;
    }

    .product-sidebar a{
        display:inline-block !important;
        padding:3px 1px !important;
        margin-right:10px !important;
        margin-bottom:2px !important;
        font-size:12px !important;
        line-height:1.15 !important;
    }

    .product-sidebar .menu-divider{
        display:block !important;
        width:100% !important;
        margin:5px 0 3px !important;
    }
}