/* !!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/*Important Notes */
/*Do not attempt to animate with @keyframes animatetop */
/*It may conflict with other styles. */
/*An example is https://www.acornsandtwigs.com/ */
/*See README.md for more information */
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/*Prevents the vertical scroll from appearing when modal is opened */
/*This actually needs to be on the body of the page and not scoped to socialphotos */

body.slpht-modal-open {
    overflow: hidden !important;
}


/* Need both as legacy users have their base CSS as #socialphotos-root. */
/* Newer users become .socialphotos-widget-root */
#socialphotos-root,
.socialphotos-widget-root {
    /*/////////////////////////////////////////////
    /// Default styles for HTML elements
    ///////////////////////////////////////////// */
    color: #222;
    /* Elements are pushed below both left and right floated elements */
    clear: both !important;
}

/* Bringing styles from bootstrap 3.4 with some modifications */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* normalize.less */
/* Only the forms section was copied over since we only require the buttons section */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* Forms */
/* ========================================================================== */

/*
 *//* Known limitation: by default, Chrome and Safari on OS X allow very limited */
/* styling of `select`, unless a `border` property is set. */
/*
 */
/*
 *//* 1. Correct color not being inherited. */
/*    Known issue: affects color of disabled elements. */
/* 2. Correct font properties not being inherited. */
/* 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */

#socialphotos-root button,
.socialphotos-widget-root button {
    color: inherit; /* 1 */
    font: inherit; /* 2 */
    margin: 0; /* 3 */
    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11. */

    /*
    // Address inconsistent `text-transform` inheritance for `button` and `select`.
    // All other form control elements do not inherit `text-transform` values.
    // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
    // Correct `select` style inheritance in Firefox.
    */
    text-transform: none;
    -webkit-appearance: button;
    cursor: pointer;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* glyphicons.less */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* Import the glpyhicons */


#socialphotos-root .slpht-glyphicon,
.socialphotos-widget-root .slpht-glyphicon {
    font-family: 'Socialphotos Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#socialphotos-root .slpht-glyphicon-social-fb:before,
.socialphotos-widget-root .slpht-glyphicon-social-fb:before {
    content: "\e800";
}

#socialphotos-root .slpht-glyphicon-social-twitter:before,
.socialphotos-widget-root .slpht-glyphicon-social-twitter:before {
    content: "\e801";
}

#socialphotos-root .slpht-glyphicon-social-pinterest:before,
.socialphotos-widget-root .slpht-glyphicon-social-pinterest:before {
    content: "\e802";
}

#socialphotos-root .slpht-glyphicon-chevron-left:before,
.socialphotos-widget-root .slpht-glyphicon-chevron-left:before {
    content: "\e807";
}

#socialphotos-root .slpht-glyphicon-chevron-right:before,
.socialphotos-widget-root .slpht-glyphicon-chevron-right:before {
    content: "\e805";
}

#socialphotos-root .slpht-glyphicon-chevron-down:before,
.socialphotos-widget-root .slpht-glyphicon-chevron-down:before {
    content: "\e808";
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!
   scaffolding.less
   !!!!!!!!!!!!!!!!!!!!!!!!!!!!

   Reset the box-sizing

   *Heads up! This reset may cause conflicts with some third-party widgets.
   For recommendations on resolving such conflicts, see
   http://getbootstrap.com/getting-started/#third-box-sizing
*/

#socialphotos-root *,
.socialphotos-widget-root * {
    box-sizing: border-box;
}

#socialphotos-root *:before,
.socialphotos-widget-root *:before,
#socialphotos-root *:after,
.socialphotos-widget-root *:after {
    box-sizing: border-box;
}

/* Reset fonts for relevant elements */

#socialphotos-root button,
.socialphotos-widget-root button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Default p: unused by Socialphotos */
#socialphotos-root p,
.socialphotos-widget-root p {
    font-size: 12px;
}

#socialphotos-root a,
.socialphotos-widget-root a {
    border: none;
}

/* Responsive images (ensure images don't scale beyond their parents) */
/* Keep images from scaling beyond the width of their parents. */
#socialphotos-root .slpht-img-responsive,
.socialphotos-widget-root .slpht-img-responsive {
    display: block;
    max-width: 100%; /* Part 1: Set a maximum relative to the parent */
    height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Gallery
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!

// The next few styles is to undo any type of floats that a baseline CSS may provide
// It may even be a default Shopify theme
// For example, https://www.starrily.com/collections/nailpolish/products/bioluminescence
// .gridlock .row [class*="desktop-"] { float: left; margin-left: 1.0416666666666667%; margin-right: 1.0416666666666667%; }
//
// For example, https://amoretti.com/collections/best-sellers/products/raspberry-artisan-flavor?variant=6348283805728 has this:
// .gridlock .row [class*=desktop-], .gridlock .row [class*=mobile-], .gridlock .row [class*=tablet-]
/
*/

#socialphotos-root .slpht-caption-header,
.socialphotos-widget-root .slpht-caption-header {
    clear: both !important;
    float: none !important;

    /* Have no spacing between the header or upload/thumbnails */
    margin: 0;
}

#socialphotos-root .slpht-upload,
.socialphotos-widget-root .slpht-upload {
    clear: both !important;
    float: none !important;
}

/* .spw-thumbnails is a legacy class for backwards compatibility */
/* Some users use classes to customize the gallery. See https://ikaw.me/ */

#socialphotos-root .slpht-thumbnails,
.socialphotos-widget-root .slpht-thumbnails {
    clear: both !important;
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* This is to handle any SHOGUN customers that have div:empty to be display:none
// See https://hinemos.tokyo/pages/tastingset2020-lp2 */
#socialphotos-root .slpht-thumbnail div:empty,
.socialphotos-widget-root .slpht-thumbnail div:empty {
    display: block;
}

#socialphotos-root .socialphotos-view,
.socialphotos-widget-root .socialphotos-view {
    cursor: pointer;

    /* Setting block because the background-image div is empty and Shopify base styling sets it to display: none */
    display: block;
}

#socialphotos-root .slpht-thumbnail div.socialphotos-view,
.socialphotos-widget-root .slpht-thumbnail div.socialphotos-view {

    /* padding-top is needed because the div has nothing inside of it. */
    padding-top: 100%;
    background-size: cover;
    background-position: center;
}

#socialphotos-root .slpht-carousel,
.socialphotos-widget-root .slpht-carousel {
    clear: both !important;
    float: none !important;

    /* Position has to be relative since control elements are absolutely positioned against this parent container
    // Otherwise, the height will be 0
    // FIXME: this may no longer be needed. this class used to be used in the modal and now is only on the thumbnails. */
    position: relative;
}

/*
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Gallery - Vertical Controls
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
#socialphotos-root .slpht-carousel-load-more,
.socialphotos-widget-root .slpht-carousel-load-more {
    /* Some website CSS specifies a float: left on all desktop-*, tablet-*, and mobile-* */
    /* See https://amoretti.com/collections/best-sellers/products/wild-strawberry-artisan-flavor?variant=6348045942816 */
    clear: both !important;
    float: none !important;
    cursor: pointer;
    margin-top: 10px;
}

#socialphotos-root .slpht-carousel-load-more p,
.socialphotos-widget-root .slpht-carousel-load-more p {
    margin: 0 !important;
}

#socialphotos-root .slpht-glyphicon-chevron-down,
.socialphotos-widget-root .slpht-glyphicon-chevron-down {
    padding: 6px !important;
    font-size: 30px;
    margin-bottom: 10px !important;
}

/*
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Gallery - Horizontal Controls
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
#socialphotos-root .slpht-carousel-control,
.socialphotos-widget-root .slpht-carousel-control {
    cursor: pointer;
    font-size: 30px;
    color: #fff;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.7);
}

#socialphotos-root .slpht-carousel-control:hover,
.socialphotos-widget-root .slpht-carousel-control:hover {
    opacity: 0.7;
}

#socialphotos-root .slpht-horizontal-control-right,
.socialphotos-widget-root .slpht-horizontal-control-right {
    cursor: pointer;

    /* The position has to be absolute as it "hovers" over the gallery */
    position: absolute;
    /* This vertically centers the element. We cannot use flex as its position is absolute */
    top: 50%;
    transform: translateY(-50%);
    z-index: 55;

    /* Pin the icon to the right */
    left: auto;
    right: 0;
    margin: 0 2% 0 0;
    font-size: 30px;
    color: #fff;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.7);
}

#socialphotos-root .slpht-horizontal-control-right .slpht-glyphicon-chevron-right,
.socialphotos-widget-root .slpht-horizontal-control-right .slpht-glyphicon-chevron-right {
    /* Vertically and horizontally center the icons within its container */
    display: flex;
    align-items: center;
    justify-content: center;
}

#socialphotos-root .slpht-horizontal-control-left,
.socialphotos-widget-root .slpht-horizontal-control-left {
    cursor: pointer;

    /* The position has to be absolute as it "hovers" over the gallery */
    position: absolute;

    /* This vertically centers the element. We cannot use flex as its position is absolute */
    top: 50%;
    transform: translateY(-50%);
    z-index: 55;

    /* Pin the icon to the left */
    left: 0;
    right: auto;
    margin: 0 0 0 2%;
    font-size: 30px;
    color: #fff;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.7);
}

#socialphotos-root .slpht-horizontal-control-left .slpht-glyphicon-chevron-left,
.socialphotos-widget-root .slpht-horizontal-control-left .slpht-glyphicon-chevron-left {
    /* Vertically and horizontally center the icons within its container */
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Modal
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
#socialphotos-root .slpht-modal,
.socialphotos-widget-root .slpht-modal {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* We need to set z-index as there are banners and we want our modals to be on top of it
    // There is a known issue where a customer uses privvy pop up and now we have two modals,
    // but they hijack the clicks and the page freezes up
    // There is no easy solution, but thankfully, it's a one time aggresive pop up */
    z-index: 9999999999;
    background: rgba(0, 0, 0, 0.75);

    /* Prevent Chrome on Windows from adding a focus outline. For details, see */
    /* https://github.com/twbs/bootstrap/pull/10951. */
    outline: 0;
    overflow: scroll;
}

#socialphotos-root .slpht-modal-background,
.socialphotos-widget-root .slpht-modal-background {

    /* Without this, sometimes the modal width will be too wide and goes out of bound.
    // See https://github.com/socialphotosapp/socialphotos/pull/1221 */
    width: 100%;
    background-color: white;
    border-radius: 3px;
}

/* Used by upload modal */
#socialphotos-root .slpht-modal-close,
.socialphotos-widget-root .slpht-modal-close {
    /* Placing the close modal button at the top right corner */
    /* Make the clickable area bigger so its easier to click (using `em` as it is more responsive) */
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5em;
    height: 2.5em;
    z-index: 100000;
    color: #999;
}

#socialphotos-root .slpht-modal-close .slpht-glyphicon-remove,
.socialphotos-widget-root .slpht-modal-close .slpht-glyphicon-remove {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA4ElEQVQ4y2NgZ2dnYmBgmM3IyBjGQDxoBuJ+GGc+EP8H4t9AQyII6QSqqYOqB+FukEAekgDIkCg8+muQ1H4HqvWAmZqDZkgMFpurkNT8BPK90BVkAam/UAV/gfw4JLkKNM0+uPyXgWZIAhCXoGn2IxRIaciGoGkOICqOgApT0DSDwiWI6EhGixmYd9KI1YwSI2hhkkFIcxaas8OgsQH3DlQNwRhASZXQdIFsSB7ekMeWGqFiv5EMKYBJJKFpxkiFSIZEoBlSBBLvZ8CS+vAYEgYzBJqxwKAflOpIiOYQmGYAQ21i2yU7K60AAAAASUVORK5CYII=') no-repeat center; /* image data for `X` */

    /* Vertically and horizontally place the icon */
    /* Cannot use flex as its parent is position: absolute */
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Height and width are needed as the parent is position: absolute */
    height: 15px;
    width: 15px;
    opacity: 0.4;
}

#socialphotos-root .slpht-modal-close .slpht-glyphicon-remove:hover,
.socialphotos-widget-root .slpht-modal-close .slpht-glyphicon-remove:hover {
    opacity: 1;
    cursor: pointer;
}

/*
// Used by mobile and tablet
// FIXME: refactor this
*/
#socialphotos-root h4.slpht-media-heading,
.socialphotos-widget-root h4.slpht-media-heading {
    /* brought in from bootstrap h4 */
    font-family: inherit;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.1;
    color: inherit;

    /* brought in from #socialphotos-username */
    width: 100%;
    display: inline-block;
    height: 22px;
    padding: 0;
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-align: left;
    border: none;

    /* Do not let bigger font sizes to show any scroll */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
}

/* instagram icon */
#socialphotos-root .slpht-media-heading img,
.socialphotos-widget-root .slpht-media-heading img {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin: 0;
}

#socialphotos-root .slpht-modal-sharing a,
.socialphotos-widget-root .slpht-modal-sharing a {
    text-decoration: none;
}

#socialphotos-root .slpht-modal-sharing a:hover,
.socialphotos-widget-root .slpht-modal-sharing a:hover {
    cursor: pointer;
}

#socialphotos-root .slpht-modal-sharing .slpht-glyphicon,
.socialphotos-widget-root .slpht-modal-sharing .slpht-glyphicon {
    font-size: 20px;
}

/* Shell div to position the modal with bottom padding */
@media (min-width: 0px) and (max-width: 767px) {
    /*
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    // Show mobile gallery and modal and hide tablet and desktop
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    */
    #socialphotos-root .slpht-mobile,
    .socialphotos-widget-root .slpht-mobile {
        display: block !important;
        clear: both !important;
        float: none !important;
    }

    #socialphotos-root .slpht-tablet,
    .socialphotos-widget-root .slpht-tablet {
        display: none !important;
    }

    #socialphotos-root .slpht-desktop,
    .socialphotos-widget-root .slpht-desktop {
        display: none !important;
    }

    #socialphotos-root #slpht-mobile-modal,
    .socialphotos-widget-root #slpht-mobile-modal {
        display: block !important;
    }

    #socialphotos-root #slpht-tablet-modal,
    .socialphotos-widget-root #slpht-tablet-modal {
        display: none !important;
    }

    #socialphotos-root #slpht-desktop-modal,
    .socialphotos-widget-root #slpht-desktop-modal {
        display: none !important;
    }

    /*
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    // Show mobile gallery and modal and hide tablet and desktop
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    */
    #socialphotos-root .slpht-mobile-modal,
    .socialphotos-widget-root .slpht-mobile-modal {
        margin: 8px;
        background-color: white;
        border-radius: 3px;
    }

    #socialphotos-root .slpht-mobile-modal-close,
    .socialphotos-widget-root .slpht-mobile-modal-close {

        /*
        // Set the close button to be on top right of modal.
        // 18px is exactly what Instagram uses
        // z-index has be higher than the left/right navigation
         */
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 10001;
    }

    #socialphotos-root .slpht-mobile-header,
    .socialphotos-widget-root .slpht-mobile-header {
        /* Cannot use margin because it simply pushes down the modal and create a bigger shadow gap at the top */
        padding-top: 10px;

        /* margin-left works and the background stays. Unsure why */
        margin-left: 10px;
    }

    #socialphotos-root .slpht-mobile-logo-username-container a,
    .socialphotos-widget-root .slpht-mobile-logo-username-container a {
        color: #000;
        text-decoration: none;
    }

    #socialphotos-root .slpht-mobile-logo-username,
    .socialphotos-widget-root .slpht-mobile-logo-username {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #socialphotos-root .slpht-mobile-logo,
    .socialphotos-widget-root .slpht-mobile-logo {
        height: 32px;
        width: 32px;
        border-radius: 50%;

        /* Undo weird CSS by coquetry clothing */
        margin: 0;
    }

    #socialphotos-root .slpht-mobile-logo img,
    .socialphotos-widget-root .slpht-mobile-logo img {
        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0. */
        opacity: 1 !important;
    }

    #socialphotos-root .slpht-mobile-username,
    .socialphotos-widget-root .slpht-mobile-username {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        margin-left: 10px;
    }

    #socialphotos-root .slpht-mobile-upload-sharing,
    .socialphotos-widget-root .slpht-mobile-upload-sharing {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    #socialphotos-root .slpht-mobile-modal-upload,
    .socialphotos-widget-root .slpht-mobile-modal-upload {
        /*
         // This is needed to prevent a long button to overflow.
         // We also need to set the button to max-width: 100%
         // Weird magic explain on this post: https://stackoverflow.com/a/66689926/384964
        */
        min-width: 0;

        /* Use margin-right since the button may be hidden */
        margin-right: 10px;

        /* Have some space between upload button and photo if it exists */
        margin-top: 10px;
    }

    #socialphotos-root .slpht-mobile-modal-upload-button,
    .socialphotos-widget-root .slpht-mobile-modal-upload-button {
        font-size: 12px;

        /* min-height and height set to fit-content to override existing button styles */
        /* Example: https://amoretti.com/collections/best-sellers/products/wild-strawberry-artisan-flavor?variant=6348045942816 */
        min-height: fit-content;
        height: fit-content;
        color: #333;
        background-color: #fff;
        border: 1px solid transparent;
        border-color: #ccc;
        border-radius: 3px;
        padding: 1px 5px;

        /* This is needed to prevent the button from overflowing and keeping it in one line */
        max-width: 100%;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #socialphotos-root .slpht-mobile-modal-sharing,
    .socialphotos-widget-root .slpht-mobile-modal-sharing {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;

        /* Have some space between sharing buttons and photo if it exists */
        margin-top: 10px;
        margin-right: 10px;
    }

    #socialphotos-root .slpht-mobile-photo-container,
    .socialphotos-widget-root .slpht-mobile-photo-container {
        /* position relative so that the navigation can be fixed to the image */
        position: relative;
    }

    #socialphotos-root .slpht-mobile-photo,
    .socialphotos-widget-root .slpht-mobile-photo {
        margin-top: 10px;
    }

    #socialphotos-root .slpht-mobile-photo img,
    .socialphotos-widget-root .slpht-mobile-photo img {
        /* This is for images whose width is less than the width of the modal. */
        width: 100%;

        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0. */
        opacity: 1 !important;
    }

    #socialphotos-root .slpht-mobile-modal-caption,
    .socialphotos-widget-root .slpht-mobile-modal-caption {
        font-size: 11px;
        font-weight: 300;
        color: #888;
        letter-spacing: 0.01em;
        line-height: 21px;
        display: inline-block;
        margin: 10px 10px 0 10px;

        /* Converts \n into newlines */
        /* See https://stackoverflow.com/questions/5782409/why-doesn-t-javascript-newlines-work-inside-html */
        white-space: pre-wrap;
    }

    #socialphotos-root .slpht-mobile-products,
    .socialphotos-widget-root .slpht-mobile-products {
        font-size: 11px;
        line-height: 1.4;
        margin: 10px 10px 0 10px;
    }

    #socialphotos-root .slpht-products-header,
    .socialphotos-widget-root .slpht-products-header {
        font-size: 12px;
        font-weight: bold;
        border-bottom: 1px solid #000;
    }

    #socialphotos-root .slpht-mobile-product,
    .socialphotos-widget-root .slpht-mobile-product {
        margin-top: 10px;
    }

    #socialphotos-root .slpht-mobile-product img,
    .socialphotos-widget-root .slpht-mobile-product img {

        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0 */
        opacity: 1 !important;
    }

    #socialphotos-root a.slpht-product-caption,
    .socialphotos-widget-root a.slpht-product-caption {
        /* block display so that we can set margins */
        display: block;
        margin-top: 3px;
        color: #888;

        /* Ensure that the links are not underlined */
        text-decoration: none;
    }

    /* product image */
    #socialphotos-root .slpht-product-img,
    .socialphotos-widget-root .slpht-product-img {
        padding: 8px 10px 0 0;
    }

    #socialphotos-root .slpht-mobile-carousel-control-left,
    .socialphotos-widget-root .slpht-mobile-carousel-control-left {
        display: block;

        /* Position has to be absolute as we are placing it on modal */
        position: absolute;

        /* Pin the icon to the left */
        left: 0;
        right: auto;

        /* Vertically center the icon */
        /* WARNING: Set height 50% to be clickable to NOT interfere with the video controls on mobile */
        top: 50%;
        transform: translateY(-50%);
        height: 50%;
        width: 15%;
    }

    #socialphotos-root .slpht-mobile-carousel-control-left .slpht-glyphicon-chevron-left,
    .socialphotos-widget-root .slpht-mobile-carousel-control-left .slpht-glyphicon-chevron-left {
        /* Vertically and horizontally center the icon since the parent is position: absolute */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /*
    // Vertically center the icon
    // on mobile, we do want the height to be 100% as it can interfere with the video controls
    // 25% height provides a decent space to tap
     */
    #socialphotos-root .slpht-mobile-carousel-control-right,
    .socialphotos-widget-root .slpht-mobile-carousel-control-right {
        display: block;

        /* Position has to be absolute as we are placing it on modal */
        position: absolute;

        /* Pin the arrow to the right */
        left: auto;
        right: 0;

        /* Vertically center the icon */
        /* WARNING: Set height 50% to be clickable to NOT interfere with the video controls on mobile */
        top: 50%;
        transform: translateY(-50%);
        height: 50%;
        width: 15%;
    }

    #socialphotos-root .slpht-mobile-carousel-control-right .slpht-glyphicon-chevron-right,
    .socialphotos-widget-root .slpht-mobile-carousel-control-right .slpht-glyphicon-chevron-right {
        /* Vertically and horizontally center the icon since the parent is position: absolute */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #socialphotos-root .slpht-mobile-poweredby,
    .socialphotos-widget-root .slpht-mobile-poweredby {
        /* Must use padding bottom because of the modal background. */
        /* Using margin bottom simply increases the dark background. */
        margin: 10px 10px 0px 10px;
        padding-bottom: 10px;
        font-size: 10px;
    }

    #socialphotos-root .slpht-mobile-poweredby a,
    .socialphotos-widget-root .slpht-mobile-poweredby a {
        color: #333;
        text-decoration: none;
    }

    /* Upload */
    #socialphotos-root .slpht-upload-modal,
    .socialphotos-widget-root .slpht-upload-modal {
        position: relative;
        width: auto;
        margin: 10px;
        border-radius: 3px;
        background: white;
        padding: 8px;
    }

    /* This is from trial and error to set the frame size to not be bigger than the height of a mobile phone */
    #socialphotos-root .upload-iframe,
    .socialphotos-widget-root .upload-iframe {
        max-height: 640px;
        width: 100%;
        height: 100%;
        border: 0;
    }
}

/*
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Tablet
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
@media (min-width: 768px) and (max-width: 991px) {
    /*
      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
      // Show tablet gallery and modal and hide mobile and desktop
      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
     */
    #socialphotos-root .slpht-mobile,
    .socialphotos-widget-root .slpht-mobile {
        display: none !important;
    }

    #socialphotos-root .slpht-tablet,
    .socialphotos-widget-root .slpht-tablet {
        display: block !important;
        clear: both !important;
        float: none !important;
    }

    #socialphotos-root .slpht-desktop,
    .socialphotos-widget-root .slpht-desktop {
        display: none !important;
    }

    #socialphotos-root #slpht-mobile-modal,
    .socialphotos-widget-root #slpht-mobile-modal {
        display: none !important;
    }

    #socialphotos-root #slpht-desktop-modal,
    .socialphotos-widget-root #slpht-desktop-modal {
        display: none !important;
    }

    /*
       // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
      //  Show tablet gallery and modal and hide mobile and desktop
      //  !!!!!!!!!!!!!!!!!!!!!!!!!!!!
     */
    #socialphotos-root .slpht-tablet-modal,
    .socialphotos-widget-root .slpht-tablet-modal {
        display: flex;
        flex-direction: row;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        /*
        // We need to set z-index as there are banners and we want our modals to be on top of it
        // There is a known issue where a customer uses privvy pop up and now we have two modals,
        // but they hijack the clicks and the page freezes up
        // There is no easy solution, but thankfully, it's a one time aggresive pop up
         */
        z-index: 9999999999;
        background: rgba(0, 0, 0, 0.75);
    }

    #socialphotos-root .slpht-tablet-modal-prev,
    .socialphotos-widget-root .slpht-tablet-modal-prev {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 15%;

        /* Fix the nav to ~1/4 screen */
        height: 50%;
    }

    #socialphotos-root .slpht-tablet-modal-dialog,
    .socialphotos-widget-root .slpht-tablet-modal-dialog {
        width: 70%;

        /* Scroll if the modal content is over the page */
        overflow: scroll;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
        border-radius: 6px;
    }

    #socialphotos-root .slpht-tablet-modal-next,
    .socialphotos-widget-root .slpht-tablet-modal-next {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 15%;

        /* Fix the nav to ~1/4 screen */
        height: 50%;
    }

    #socialphotos-root .slpht-tablet-modal-close,
    .socialphotos-widget-root .slpht-tablet-modal-close {
        /*
        // Set the close button to be on top right of modal.
        // 18px is exactly what Instagram uses
        // z-index has be higher than the left/right navigation
         */
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 10001;
    }

    #socialphotos-root .slpht-tablet-modal-close:hover,
    .socialphotos-widget-root .slpht-tablet-modal-close:hover {
        cursor: pointer;
    }

    #socialphotos-root .slpht-tablet-logo-username-container,
    .socialphotos-widget-root .slpht-tablet-logo-username-container {
        margin: 16px 16px 0 16px;
    }

    #socialphotos-root .slpht-tablet-logo-username,
    .socialphotos-widget-root .slpht-tablet-logo-username {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #socialphotos-root .slpht-tablet-logo-username a,
    .socialphotos-widget-root .slpht-tablet-logo-username a {
        color: #000;
        text-decoration: none;
    }

    #socialphotos-root .slpht-tablet-logo,
    .socialphotos-widget-root .slpht-tablet-logo {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        /* Undo weird CSS by coquetry clothing */
        margin: 0;

        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0. */
        opacity: 1 !important;
    }

    #socialphotos-root .slpht-tablet-username,
    .socialphotos-widget-root .slpht-tablet-username {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        margin-left: 16px;
    }

    #socialphotos-root .slpht-tablet-upload-share,
    .socialphotos-widget-root .slpht-tablet-upload-share {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    #socialphotos-root .slpht-tablet-modal-upload,
    .socialphotos-widget-root .slpht-tablet-modal-upload {
        /*
        // This is needed to prevent a long button to overflow.
        // We also need to set the button to max-width: 100%
        // Weird magic explain on this post: https://stackoverflow.com/a/66689926/384964
         */
        min-width: 0;
        margin: 16px 0px 0 16px;
    }

    #socialphotos-root .slpht-tablet-modal-upload-button,
    .socialphotos-widget-root .slpht-tablet-modal-upload-button {
        font-size: 12px;

        /* min-height and height set to fit-content to override existing button styles */
        /* Example: https://amoretti.com/collections/best-sellers/products/wild-strawberry-artisan-flavor?variant=6348045942816 */
        min-height: fit-content;
        height: fit-content;
        color: #333;
        background-color: #fff;
        border: 1px solid transparent;
        border-color: #ccc;
        border-radius: 3px;
        padding: 1px 5px;

        /* This is needed to prevent the button from overflowing and keeping it in one line */
        max-width: 100%;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #socialphotos-root .slpht-tablet-modal-sharing,
    .socialphotos-widget-root .slpht-tablet-modal-sharing {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        margin: 16px 16px 0 16px;
    }

    #socialphotos-root .slpht-tablet-photo,
    .socialphotos-widget-root .slpht-tablet-photo {
        margin-top: 16px;
    }

    #socialphotos-root .slpht-tablet-photo img,
    .socialphotos-widget-root .slpht-tablet-photo img {
        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0. */
        opacity: 1 !important;
    }

    #socialphotos-root .slpht-tablet-modal-caption,
    .socialphotos-widget-root .slpht-tablet-modal-caption {
        margin: 16px 16px 0px 16px;
        font-size: 11px;
        font-weight: 300;
        color: #888;
        letter-spacing: 0.01em;
        line-height: 21px;
    }

    #socialphotos-root .slpht-tablet-products,
    .socialphotos-widget-root .slpht-tablet-products {
        margin: 16px 16px 0px 16px;
        font-size: 11px;
        line-height: 1.4;
    }

    #socialphotos-root .slpht-tablet-product,
    .socialphotos-widget-root .slpht-tablet-product {
        margin-top: 16px;
    }

    #socialphotos-root .slpht-tablet-product img,
    .socialphotos-widget-root .slpht-tablet-product img {
        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0. */
        opacity: 1 !important;
    }

    #socialphotos-root .slpht-products-header,
    .socialphotos-widget-root .slpht-products-header {
        font-size: 12px;
        font-weight: bold;
        border-bottom: 1px solid #000;
    }

    #socialphotos-root a.slpht-product-caption,
    .socialphotos-widget-root a.slpht-product-caption {
        color: #888;
        text-decoration: none;
    }

    #socialphotos-root .slpht-tablet-poweredby,
    .socialphotos-widget-root .slpht-tablet-poweredby {
        font-size: 10px;
        margin: 16px;
    }

    #socialphotos-root .slpht-tablet-poweredby a,
    .socialphotos-widget-root .slpht-tablet-poweredby a {
        color: #333;
        text-decoration: none;
    }

    /* Upload */
    #socialphotos-root .upload-iframe,
    .socialphotos-widget-root .upload-iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    #socialphotos-root .slpht-upload-modal,
    .socialphotos-widget-root .slpht-upload-modal {
        position: relative;
        width: 700px;
        margin: 30px auto;
        border-radius: 3px;
        background: white;
        padding: 8px;
    }
}

/*
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Desktops
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
@media (min-width: 992px) {
    /*
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    // Show desktop gallery and modal and hide mobile and tablet
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
     */
    #socialphotos-root .slpht-mobile,
    .socialphotos-widget-root .slpht-mobile {
        display: none !important;
    }

    #socialphotos-root .slpht-tablet,
    .socialphotos-widget-root .slpht-tablet {
        display: none !important;
    }

    #socialphotos-root .slpht-desktop,
    .socialphotos-widget-root .slpht-desktop {
        display: block !important;
        clear: both !important;
        float: none !important;
    }

    #socialphotos-root #slpht-mobile-modal,
    .socialphotos-widget-root #slpht-mobile-modal {
        display: none !important;
    }

    #socialphotos-root #slpht-tablet-modal,
    .socialphotos-widget-root #slpht-tablet-modal {
        display: none !important;
    }

    #socialphotos-root #slpht-desktop-modal,
    .socialphotos-widget-root #slpht-desktop-modal {
        display: block !important;
    }

    /*
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    // Show desktop gallery and modal and hide mobile and tablet
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
     */
    #socialphotos-root .slpht-desktop-modal,
    .socialphotos-widget-root .slpht-desktop-modal {
        /* Force the modal to take the full height; centering the modal */
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        /*
        // We need to set z-index as there are banners and we want our modals to be on top of it
        // There is a known issue where a customer uses privvy pop up and now we have two modals,
        // but they hijack the clicks and the page freezes up
        // There is no easy solution, but thankfully, it's a one time aggresive pop up
         */
        z-index: 9999999999;
        background: rgba(0, 0, 0, 0.75);
    }

    #socialphotos-root .slpht-desktop-modal-dialog,
    .socialphotos-widget-root .slpht-desktop-modal-dialog {
        /*
        // Lays the photo and the details side by side
        // No longer setting fixed width as it was too small and we had to object-fit: cover the image.
        // People were complaining that their images do not match what they see on Instagram.
         */
        display: flex;
        flex-direction: row;
        max-width: 90%;
        width: 100%;

        /* Setting max height to be 85% so portraits do not take up the full screen. */
        max-height: 85%;
        height: 100%;
    }

    #socialphotos-root .slpht-desktop-modal-header-caption-products,
    .socialphotos-widget-root .slpht-desktop-modal-header-caption-products {
        /* Split photo/description 60/40 */
        /* Sets the elements header, caption, products as columns */
        width: 35%;
        display: block;
        overflow: auto;
        margin: 16px;
    }

    /* Hide scrollbar as it looks ugly. Instagram does this and people assume you can scroll? */
    /* A little bit of a hack. See https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */
    #socialphotos-root .slpht-desktop-modal-header-caption-products::-webkit-scrollbar,
    .socialphotos-widget-root .slpht-desktop-modal-header-caption-products::-webkit-scrollbar {
        display: none;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #socialphotos-root .slpht-desktop-modal-photo,
    .socialphotos-widget-root .slpht-desktop-modal-photo {
        /*
        // for videos, we stretch the video to fit the container's width or height and put a black background.
        // this matches what instagram and ios do
        // we found a way to do that by setting the parent container to display flex with height 100%,
        // and the video itself to be 100% width with height auto
        // source: https://stackoverflow.com/questions/64529121/resize-html-video-to-fit-into-parent-container-height-and-width
        //
        // note that we do not have to do this for mobile and tablet as it will take the full width,
        // and the height will match so there is no black ground
         */
        background-color: black;

        /* Photo/description is 60/40 split */
        width: 65%;

        /*
        // We are "centering" the image
        // The best way is to use position: relative on the parent and position: absolute on the image
        // We have tried flex, margin: auto and none of it works.
        // Margin only works for horizontal, but breaks for vertical
        // https://www.freecodecamp.org/news/how-to-center-an-image-in-css/
         */
        position: relative;
    }

    #socialphotos-root .slpht-desktop-modal-photo img,
    .socialphotos-widget-root .slpht-desktop-modal-photo img {
        /* Fit photo inside its container and we need to set either width or height to 100% */
        /* We choose height because it looks better since most photos are portrait */
        max-height: 100%;
        height: 100%;

        /* We cannot set width 100% because it will stretch the images */
        max-width: 100%;

        /* We set the height to 100% since most photos are portrait and it looks best */
        /* We need to set object-fit: contain otherwise, it will stretch the image to vertically */
        object-fit: contain;

        /*
        // Center image vertical and horizontal
        // For some website, the image may become black because the image width/height becomes 0.
        // Angel curves website used to do that but now it seems to work with position: absolute
        // DO NOT USE position: relative because it breaks for https://heiressbeverlyhills.com/pages/gallery
         */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0. */
        opacity: 1 !important;
    }

    #socialphotos-root .slpht-desktop-modal-close,
    .socialphotos-widget-root .slpht-desktop-modal-close {

        /*
        // Set the close button to be on top right of modal.
        // 18px is exactly what Instagram uses
        // z-index has be higher than the left/right navigation
         */
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 10001;
    }

    #socialphotos-root .slpht-desktop-modal-close:hover,
    .socialphotos-widget-root .slpht-desktop-modal-close:hover {
        cursor: pointer;
    }

    #socialphotos-root .slpht-desktop-username-link,
    .socialphotos-widget-root .slpht-desktop-username-link {
        color: #000;
        text-decoration: none;
    }

    #socialphotos-root .slpht-desktop-logo-username,
    .socialphotos-widget-root .slpht-desktop-logo-username {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #socialphotos-root .slpht-desktop-logo-username img,
    .socialphotos-widget-root .slpht-desktop-logo-username img {
        cursor: auto;

        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0. */
        opacity: 1 !important;
    }

    #socialphotos-root .slpht-desktop-logo,
    .socialphotos-widget-root .slpht-desktop-logo {
        height: 32px;
        width: 32px;
        margin: 0;
        border-radius: 50%;
    }

    #socialphotos-root .slpht-desktop-username,
    .socialphotos-widget-root .slpht-desktop-username {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        margin-left: 12px;
    }

    #socialphotos-root .slpht-desktop-modal-upload-sharing,
    .socialphotos-widget-root .slpht-desktop-modal-upload-sharing {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    #socialphotos-root .slpht-desktop-modal-upload,
    .socialphotos-widget-root .slpht-desktop-modal-upload {
        /* This is needed to prevent a long button to overflow. */
        /* Weird magic explain on this post: https://stackoverflow.com/a/66689926/384964 */
        min-width: 0;
        margin-top: 16px;
        margin-right: 10px;
    }

    #socialphotos-root .slpht-desktop-modal-upload-button,
    .socialphotos-widget-root .slpht-desktop-modal-upload-button {
        display: inline-block;
        font-size: 12px;
        font-weight: normal;
        line-height: 1.5;

        /* max-width is set to leave space for social buttons */
        /* max-width: 218px; */
        width: 100%;

        /* min-height and height set to fit-content to override existing button styles */
        /* Example: https://amoretti.com/collections/best-sellers/products/wild-strawberry-artisan-flavor?variant=6348045942816 */
        min-height: fit-content;
        height: fit-content;
        text-align: center;
        text-overflow: ellipsis;
        vertical-align: middle;
        cursor: pointer;
        white-space: nowrap;
        color: #333;
        background-color: #fff;
        border: 1px solid transparent;
        border-color: #ccc;
        border-radius: 3px;
        padding: 1px 5px;

        /* Do not allow scroll to appear if the text is too long */
        overflow-x: hidden;

        /* Do not allow users to select the text */
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/user-select */
        user-select: none;

        /* Allow zoom gestures, but disable double-tap to zoom */
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#manipulation */
        touch-action: manipulation;
    }

    #socialphotos-root .slpht-desktop-modal-upload-button:hover,
    .socialphotos-widget-root .slpht-desktop-modal-upload-button:hover,
    #socialphotos-root .slpht-desktop-modal-upload-button:focus,
    .socialphotos-widget-root .slpht-desktop-modal-upload-button:focus,
    #socialphotos-root .slpht-desktop-modal-upload-button:active,
    .socialphotos-widget-root .slpht-desktop-modal-upload-button:active {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
        text-decoration: none;
    }

    #socialphotos-root .slpht-desktop-modal-sharing,
    .socialphotos-widget-root .slpht-desktop-modal-sharing {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: 16px;
        gap: 10px;
    }

    #socialphotos-root .slpht-desktop-modal-sharing .slpht-glyphicon,
    .socialphotos-widget-root .slpht-desktop-modal-sharing .slpht-glyphicon {
        /* span needs to be display: block so it can be centered vertically */
        display: block;
    }

    #socialphotos-root .slpht-upload-photo-viewer,
    .socialphotos-widget-root .slpht-upload-photo-viewer {
        margin-right: 10px;
    }

    #socialphotos-root .slpht-desktop-modal-caption,
    .socialphotos-widget-root .slpht-desktop-modal-caption {
        font-size: 11px;
        font-weight: 300;
        color: #888;
        letter-spacing: 0.01em;
        line-height: 21px;
        margin-top: 16px;
        /* Breaks it up if a long word such as URL appears so a scroll does not appear */
        word-break: break-word;

        /* Converts \n into newlines */
        /* See https://stackoverflow.com/questions/5782409/why-doesn-t-javascript-newlines-work-inside-html */
        white-space: pre-wrap;
    }

    #socialphotos-root .slpht-products-header,
    .socialphotos-widget-root .slpht-products-header {
        font-size: 12px;
        font-weight: bold;
        border-bottom: 1px solid #000;
    }

    #socialphotos-root .slpht-desktop-modal-products,
    .socialphotos-widget-root .slpht-desktop-modal-products {
        margin-top: 16px;
        font-size: 11px;
        line-height: 1.4;
        width: 100%;
    }

    #socialphotos-root .slpht-desktop-modal-products .slpht-product,
    .socialphotos-widget-root .slpht-desktop-modal-products .slpht-product {
        margin-top: 16px;
    }

    #socialphotos-root .slpht-desktop-modal-products .slpht-product img,
    .socialphotos-widget-root .slpht-desktop-modal-products .slpht-product img {
        /* https://elissajay.com.au/ has theme.css that was setting opacity to 0. */
        opacity: 1 !important;
    }

    /* product caption */
    #socialphotos-root .slpht-desktop-modal-products .slpht-product .slpht-product-caption,
    .socialphotos-widget-root .slpht-desktop-modal-products .slpht-product .slpht-product-caption {
        width: 100%;
        color: #888;
        text-decoration: none;
    }

    #socialphotos-root .slpht-desktop-modal-products .slpht-product .slpht-product-caption:hover,
    .socialphotos-widget-root .slpht-desktop-modal-products .slpht-product .slpht-product-caption:hover {
        text-decoration: none;
    }

    #socialphotos-root .slpht-desktop-poweredby,
    .socialphotos-widget-root .slpht-desktop-poweredby {
        margin-top: 16px;
        font-size: 10px;
    }

    #socialphotos-root .slpht-desktop-poweredby a,
    .socialphotos-widget-root .slpht-desktop-poweredby a {
        color: #333;
        text-decoration: none;
    }

    #socialphotos-root .slpht-desktop-carousel-control-left,
    .socialphotos-widget-root .slpht-desktop-carousel-control-left {

        /* We want the entire vertical to be clickable */
        height: 100%;
        width: 15%;
        z-index: 10000;
        /* Vertically and horizontally align */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    #socialphotos-root .slpht-desktop-carousel-control-left .slpht-glyphicon-chevron-left,
    .socialphotos-widget-root .slpht-desktop-carousel-control-left .slpht-glyphicon-chevron-left {
        /* Vertically and horizontally center the icons within its container */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #socialphotos-root .slpht-desktop-carousel-control-right,
    .socialphotos-widget-root .slpht-desktop-carousel-control-right {
        /* We want the entire vertical to be clickable */
        height: 100%;
        width: 15%;
        z-index: 10000;
        /* Vertically align */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    #socialphotos-root .slpht-desktop-carousel-control-right .slpht-glyphicon-chevron-right,
    .socialphotos-widget-root .slpht-desktop-carousel-control-right .slpht-glyphicon-chevron-right {
        /* Vertically and horizontally center the icons within its container */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Upload */
    #socialphotos-root .upload-iframe,
    .socialphotos-widget-root .upload-iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    #socialphotos-root .slpht-upload-modal,
    .socialphotos-widget-root .slpht-upload-modal {
        position: relative;
        width: 700px;
        margin: 30px auto;
        border-radius: 3px;
        background: white;
        padding: 8px;
    }
}