/* CUTOSM CSS*/

/* For thumbnails on desktop screens */
@media screen and (min-width: 768px) {

    .product-gallery-thumbs .product-gallery-thumb-wrap {
        position: relative; /* Needed for positioning the overlay */
        padding: 0px 5px; /* Vertical padding */
        margin-top: 45px; /* Moves all thumbnails down by 45px and creates 45px margin between them */
        transform: scale(1.2); /* Scaling the thumbnails */
        transform-origin: top left; /* Ensures correct scaling alignment */
    }

    .product-gallery-thumbs .product-gallery-thumb-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(https://www.gearfactor.com.hk/wp-content/uploads/2023/12/square-2.png) no-repeat center center; /* Add your image URL here */
        background-size: contain; /* Ensures the image is fully contained within the thumbnail */
        z-index: 1; /* Ensures the overlay is above the thumbnail */
    }
}

/* Overlay a larger logo image for vertical mobile view */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .logo, #logo {
        background: url('https://www.gearfactor.com.hk/wp-content/uploads/2023/12/av-logo-2.png') no-repeat center center;
        background-size: contain; /* Adjust as needed */
        display: block;
        width: 120px; /* Adjust to fit the size of your new logo */
        height: 120px; /* Adjust to fit the size of your new logo */
    }

    .logo img, #logo img {
        display: none; /* Hide the original img element */
    }
}

/* Custom CSS for thumbnails on all screens */
.product-gallery-thumbs .product-gallery-thumb-wrap {
    position: relative; /* Needed for positioning the overlay */
    padding: 0px 5px; /* Vertical padding */
}

/* Desktop Screens */
@media screen and (min-width: 768px) {
    .product-gallery-thumbs .product-gallery-thumb-wrap {
        margin-top: 34px; /* Moves all thumbnails down by 34px and creates 34px margin between them. Its the highest value before the bottom thumb gest cut off*/
        transform: scale(1.2); /* Scaling the thumbnails */
        transform-origin: top left; /* Ensures correct scaling alignment */
    }
}

/* Overlay for both Desktop and Mobile Screens */
.product-gallery-thumbs .product-gallery-thumb-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(https://www.gearfactor.com.hk/wp-content/uploads/2023/12/square-2.png) no-repeat center center; /* Image URL */
    background-size: contain; /* Ensures the image is fully contained within the thumbnail */
    z-index: 1; /* Ensures the overlay is above the thumbnail */
}


@media screen and (max-width: 767px) {
    .mobile-menu-open-button {
        position: relative;
        display: inline-block;
        padding: 16px; /* Retained padding */
        left: 6px; /* Adjusted to move the button 5px to the left */
        height: 33px; /* Original height */
        width: 48px; /* Original width */
        outline: none;
        transform: scale(1.25); /* Scale up by 125% */
        transform-origin: center; /* Ensures the button scales from its center */
        top: -20px; /* Moves the button up by 20px */
    }
}

/* Custom CSS for thumbnails on mobile screens */
@media screen and (max-width: 767px) {
    .product-gallery-thumbs .product-gallery-thumb-wrap {
        position: relative; /* Maintains relative positioning */
        left: -5px; /* Moves thumbnails 4px to the left */
    }
}


/* Targeting horizontal mobile view with increased specificity */
@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Assuming .container is a parent element - replace with actual parent class if different */
    .container .social-icon, 
    .container .icon_share, 
    .container .menu-footer-text {
        display: none; /* Hides the elements in horizontal mobile view */
    }
}

/* Adjusting the mobile menu button for horizontal mobile view */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .mobile-menu-open-button {
        display: block !important; /* Ensure the button is visible */
        position: fixed !important; /* Fix the position to the viewport */
        top: 10px !important; /* Align to the top of the viewport with a little space */
        left: 10px !important; /* Align to the left of the viewport with a little space */
        z-index: 1000 !important; /* Ensure the button is above other elements */
    }
}

/* Increase point-size of mobile menu list by 2 points */
@media screen and (max-width: 767px) {
    .mobile-menu-panel .category-title, 
    .mobile-menu-panel .item, 
    .mobile-menu-panel .subitem {
        padding: 5px 10px;
        margin-right: calc(10vw);
        font-size: 18px !important; /* Increased font size to 16px */
        line-height: 22px !important; /* Adjust line height accordingly */
    }
}

/* On mobile: increase point-size of back-to-store link by 2 points */
@media only screen and (max-width: 768px) {
    .f-back-to-store-link {
        margin-left: 20px;
        font-size: 16px !important; /* Increase font size by 2px */
    }
}

/* Custom CSS for larger screens, targeting specific path for .small-text */
@media screen and (min-width: 992px) {
    html.gecko.mac.js body.page_12281269.content_page.content.protected_images div.container div#wrapper.no-transition div#page_content.listing div#content_page_wrapper._4ORMAT_content_wrapper div._4ORMAT_content_page_container._4ormat_sort div._4ORMAT_content_page_row._4ormat_sort_item._4ORMAT_module_text_01.in-viewport div.sixcol div#text_1 p.small-text {
        font-size: 20px !important; /* Increase font size to 15px */
    }
}

/* Double the size of the logo in landscape mode on small screens */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .logo, #logo {
        background: url('https://www.gearfactor.com.hk/wp-content/uploads/2023/12/av-logo-2.png') no-repeat center center;
        background-size: contain;
        display: block;
        width: 120px; /* Double the width */
        height: 120px; /* Double the height */
    }
}

/* Adjust the mobile menu button for landscape mode on small screens */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .mobile-menu-open-button {
        position: fixed !important;
        top: 40px !important;
        right: 30px !important; /* Positioned 30px from the right */
        left: auto !important; /* Reset left positioning */
        z-index: 1000 !important;
    }
}


/* Overlay a larger logo image for landscape mobile view */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .logo, #logo {
        background: url('https://www.gearfactor.com.hk/wp-content/uploads/2023/12/av-logo-2.png') no-repeat center center;
        background-size: contain;
        display: block;
        width: 120px; /* Double the size for landscape */
        height: 120px; /* Double the size for landscape */
        z-index: 2000 !important; /* Higher z-index */
    }

    .logo img, #logo img {
        display: none !important; /* Hide the original img element */
    }
}

/* Retain the existing portrait orientation rules */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .logo, #logo {
        /* Existing styles for portrait */
    }
    .logo img, #logo img {
        /* Hide the original img element in portrait as well */
    }
}

/* END OF WORKING CSS RULES */

/* Making Table of Murti Jung page responsive */

@media screen and (max-width: 767px) {
  .small-text table {
    width: 100% !important;
  }
}

@media screen and (min-width: 768px) {
  .small-text table {
    width: 100% !important; /* Table takes full width of its container */
  }
}

/* Making Poem on Murti Page 2px smaller on mobile screens*/
@media screen and (max-width: 768px) {
  .poem-container {
    margin-top 0px !important;
    padding 0px 0px !important;
    font-size: 11px !important; /* Reduced from 16px to 11px */
  }
}

/* changing alignment and size of Murti image on Murti Page on mobile*/
@media screen and (max-width: 768px) {
    .centered-image {
        display: block;
        margin-bottom: -25px !important;
        margin-top: -90px !important;
        margin-left: -9px !important; /* Aligns the image to the left */
        margin-right: 30px;
        width: 70% !important; /* Reduces the image size to 50% of its container */
    }
    
    .image-caption {
        text-align: left; /* Aligns the caption to the left */
        position: relative; /* Enables relative positioning */
        margin-top: 20px !important; /* Moves the caption down by 20 pixels */
        margin-left: -55px; /* Adjusts the horizontal position to align with the image */
        width: 100%; /* Optional: Adjusts the width to match the image width */
    }
}

/* Targeting the image with specific Alt Text "StoreFrontTopBanner" */
[data-editable-type="image"] img[alt="StoreFrontTopBanner"] {
    /* General styles for the image can be added here if needed */
}

/* Applying styles to the Store Fron Top Banner specifically for mobile devices in portrait orientation */
@media screen and (orientation: portrait) {
    [data-editable-type="image"] img[alt="StoreFrontTopBanner"] {
        transform: scale(1.6); /* Enlarges the image to 2x its original size */
        margin-left: -6%; /* Adjusts the position to keep the image centered */
        /* Other mobile-specific styles can be added here if needed */
    }
}

/* Reduce box shadow around logo and footer */

.menu-logo { box-shadow:0 0 0px 0px green!important; }

.menu-footer { box-shadow:0 0 0px 0px green!important; }

/* ends */

/* To remove Store Shipping message */
.product-shipping {
display: none !important;
}
/* ends */

/* Makes Sub Menue smaller */
.menu-nav .dropdown a {
  padding: 2px 25px 2px 22px;
  margin: 0;
  font-size: 13px !important; /* This sets the font size to 12px */
  line-height: 1.0 !important; /* Adjust this value as needed for line spacing */
}
/* END Makes Sub Menue smaller */

/* TEST TEST TEST TEST TEST PLAYGROUND*/