/* already included via elementor */
/*@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');*/

/* fix elementor when global isnt working*/
div.elementor-button,a.elementor-button,button.elementor-button{
    background-color: var(--e-global-color-accent,green);
}

/*fix elementor padding issue for legacy headers*/
.io_header .elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated>.elementor-widget-wrap
{
    padding:0px;
}

figure.featured-media,
header.wp-post-image
/*,header.entry-header*/
{
    display:none;
}

/* embeded videos in froala */
@media (max-width: 600px) {
    span.fr-rv iframe {
        width: 100%;
        height: 100%;
    }
}

@keyframes cartEnter {
    from {right: -600px}
    to {right: 1px}
}

@keyframes cartExit {
    from {right: 1px}
    to {right: -600px}
}

/* Cart - main positioning */
.ioCart,.ioCart_link{
    cursor: pointer;
}
.cartInfo {
    top: 7px;
    display: initial !important;
    white-space: nowrap;
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-size: 13px;
    font-weight: bold;
    background-color: white;
    color: #6e6e6e;
    text-shadow: 1px 1px 0 #fff;
    border-radius: 3px;
    box-shadow: inset 0 0 1px 0px rgba(0, 0, 0, .20), 0 1px 0 #fff;
    padding: 7px 8px 6px 10px;
    line-height: 18px;
    position: fixed;
    right: 20px;
    z-index: 999999;
    margin: 10px;
    cursor: pointer;
    transition: background-color .2s linear;
    max-width: 90px !important;
}
#cartPopover input[name=dateStart],
#cartPopover input[name=dateEnd],
#cartPopover input[name=timeStart],
#cartPopover input[name=timeEnd]{
    display:inline-block;
    padding:1px;
    color: black;
}

#cartPopover {
    --io-cart-border: rgba(255, 255, 255, .18);
    --io-cart-field: rgba(255, 255, 255, .1);
    --io-cart-field-hover: rgba(255, 255, 255, .15);
    --io-cart-surface: #2a2b2c;
    --io-cart-text: #f8f9fa;
    --io-cart-text-soft: #c4c8cc;
    position: fixed;
    box-sizing: border-box;
    right: -600px;
    top: 63px;
    float: right;
    width: 450px;
    z-index: 9999;
    display: none;
    color: var(--io-cart-text);
    /*text-shadow:1px 1px 0 rgba(0,0,0,.8);*/
    font-family: var(--e-global-typography-primary-font-family, inherit);
    border: 1px solid #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 0, 0, .5);
    background: var(--io-cart-surface);
    max-height: 87vh;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
}

#cartCalendarTimePickerContainer{
    width: 100%;
    max-width: 100%;
    position: relative;
}

#cartCalendar {
    max-width: 100%;
    box-sizing: border-box;
}

#cartCalendarContinueWarning {
    color: #ffdf80;
    font-size: 14px;
    line-height: 1.35;
    min-width: 0;
}

.io-cart-calendar-actions {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
    width: 100%;
}

#cartCalendarContinueContainer {
    min-width: 126px;
}

#cartCalendarContinueButton {
    /* Keep the primary action readable on both light and dark calendar panels. */
    background: var(--e-global-color-accent, green);
    border: 1px solid currentColor;
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--e-global-color-text, #fff);
    cursor: pointer;
    font: 600 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
    width: 100%;
}

#cartCalendarContinueButton:hover,
#cartCalendarContinueButton:focus,
#cartCalendarContinueButton:active {
    background: var(--e-global-color-accent, green);
    border-color: currentColor;
    color: var(--e-global-color-text, #fff);
    text-decoration: underline;
}

#cartCalendarContinueButton:focus-visible {
    box-shadow: 0 0 0 2px #fff;
    outline: 2px solid #171717;
    outline-offset: 2px;
}

#ioCartOvernightUpsellButton,
#ioCartOvernightUpsellButton:hover,
#ioCartOvernightUpsellButton:focus,
#ioCartOvernightUpsellButton:active {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    margin: 0;
    padding: 0;
    text-align: left;
    text-transform: none;
    width: auto;
}

#ioCartOvernightUpsellButton:hover {
    text-decoration: underline;
}

#ioCartOvernightUpsellButton:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

#ioCartOvernightUpsellAmount {
    display: block;
    float: right;
}

#cartCalendar.ioCartOvernightSelected .mbsc-range-end {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .45;
}

#cartCalendar.mbsc-datepicker-control-time .mbsc-datepicker-tab-wrapper{
    flex-wrap: nowrap !important;
}

/* Responsive cart width for different screen sizes */
@media (max-width: 450px) {
    #cartPopover {
        width: 100%;
    }
    .ui-datepicker .ui-datepicker-title{
        margin: 0 2vw;
    }
    .ui-datepicker-title.day-options-on #whatday {
        margin-left: 5vw;
    }
}

.cartIn {
    animation: cartEnter 1s forwards;
}

.cartOut {
    animation: cartExit 1s forwards;
}


/* Calendar */
.calTimeLabel {
    min-width: 35px;
    display: inline-block;
}

.calDeliveryMethodLabel{
    display: inline-block;
    margin-right: 5px;
    min-width: 35px;
}

#cartCalendar .ui-state-default {
    border: none;
    background: none;
    color: white;
    text-align: center;
}

#cartCalendar .ui-widget-header .ui-icon,
#cartCalendar .ui-icon {
    background-image: none;
}

#cartDateRange {
    text-align: center;
    padding: 20px;
    cursor: pointer;
    padding-bottom:0px;
}

#cartPopover.ioCartCalendarOpen #cartDateRange {
    display: none !important;
}
.ioDateRange {
    text-align: center;
    cursor: pointer;
    padding-bottom:0px;
    font-family: var(--e-global-typography-primary-font-family, inherit);
}
.ioDateRangeHeader{
    text-align: center;
    padding-bottom:0px;
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-weight: 500;
    font-size: 20px;
}
.pageDateRangeWrapper{
    margin:auto !important;
    margin-bottom:15px !important;;
    margin-top:10px !important;;
    max-width:366px;
    padding: 2px;
    cursor: pointer;
}
@media screen and (min-width:771px) {
    .pageDateRangeWrapper{
        margin-right:16px !important;
    }
}
@media screen and (max-width:366px) {
    .pageDateRangeWrapper{
        max-width:95% !important;
    }
}
.changeDateLinkWrapper{
    margin:auto !important;
    max-width:126px;
}
/* hide extras on all-items */
div.pageDateRangeWrapper ~ .pageDateRangeWrapper {
    display: none;
}

#changeDateLink{
    font-size:smaller;
    margin:0;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    min-width:125px;
}
#cartCalendar .ui-datepicker-next.ui-state-hover {
    background: none;
    font-weight: inherit;
    border: none;
    cursor: pointer;
    top: 2px;
    transform: scale(1.1);
}

#cartCalendar .ui-datepicker-prev.ui-state-hover {
    background: none;
    font-weight: inherit;
    border: none;
    cursor: pointer;
    top: 2px;
    transform: scale(1.1);
}

#cartCalendar .ui-datepicker-prev,
#cartCalendar .ui-datepicker-next {
    margin-top: 35%;
    text-align: center;
}
#cartCalendar .ui-datepicker-prev{
    left: -17px;
}

#cartCalendar .ui-datepicker-next{
    right: -17px;
}

.ui-datepicker-title.day-options-on{
    display:flex;
    flex-direction: row;
}

.ui-datepicker-title.day-options-on #whatday{
    margin-left: 75px;
}

.ui-datepicker-month{
    width: 60px !important;
}

.ui-datepicker-year{
    width: 70px !important;
}

/* Buttons */
.io_button {
    text-decoration: none;
}

.io_access_button {
    text-align: center;
}

/* Generated pages */

.io_phshow {
    text-align: left;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#cartCalendar {
    padding: 10px 8px; /* the month is fluid now; wide side padding only took width from it */
}

#cartCalendar>div {
    width: 100%;
    margin: auto;
    background: rgba(0, 0, 0, 0.0);
    margin-bottom: 10px;
    border: none;
    font-size: medium;
}

#cartCalendar>div>div {
    background: none;
    text-shadow: none;
    color: #fff;
    border: none;
}

.ui-datepicker-calendar th {
    text-shadow: none;
    /*color: #fff;*/
}

#cartTimePicker {
    text-align: center;
    font-size: medium;
    display:none;
}

#cartTimePicker, #cartTimePicker > * {
    margin-left: 2px;
    margin-right: 2px;
}

#ioCartTimeSelectContainer{
    display: inline-flex;
    flex-direction: row;
    align-items: flex-end;
}

#ioCartTimeSelectContainer input{
    text-align: center;
}

#ioCartTimeSelectContainer td{
    flex-direction: row;
    align-items: center;
}

.item_add {
    display: inline-block !important;
}
.item_add_off {
    background-color: grey !important;
    cursor: not-allowed;
}
.simpleCart_checkout_off{
    cursor: not-allowed;
}
.io_button.simpleCart_checkout_off{
    background-color: grey !important;
}

.simpleCart_input{
    width: 4ch !important;
    border-width: 1px 0 1px 0;
    text-align: center;
    height: 28px;
}
.simpleCart_input:focus{
    outline: none;
}
.simpleCart_input:disabled{
    background-color: inherit;
}

.simpleCart_map {
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 5px;
    font-size: small;
    cursor: pointer;
}

#perimeter_height_contianer {
    display:none;
}


[class^="unavailable_message"]{
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    display:none;
}

@media (max-width: 400px) {
    .unavailable_message{
        padding-left: 15% !important;
    }
}

.item-image-thumb {
    max-height: 70px;
    max-width: 50px;
}

.cartInfo:hover {
    background-color: #e8eaed;
}

.cartInfo.open {
    background-position: -218px -26px;
}

#cartCloseButton {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid var(--io-cart-border);
    border-radius: 50%;
    color: var(--io-cart-text);
    cursor: pointer;
    display: flex;
    font: 400 26px/1 Arial, sans-serif;
    height: 34px;
    justify-content: center;
    padding: 0 0 2px;
    position: absolute;
    right: 12px;
    top: 10px;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
    width: 34px;
    z-index: 50;
}

#cartCloseButton:hover,
#cartCloseButton:focus-visible {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .36);
    outline: none;
}

#cartCloseButton:active {
    transform: scale(.94);
}

#cartPopover .itemRow {
    padding: 1px;
    height: 12px;
    clear: both;
}

#cartPopover .itemRow div {
    float: left;
}

#cartPopover .itemRow .hidden_availability{
    display: none;
}

#cartPopover .item-custom {
    width: 35px;
    margin-right: 6px;
}

#cartPopover .item-custom span {
    float: left;
    height: 13px;
    display: block;
    font-family: var(--e-global-typography-primary-font-family, inherit);
    width: 23px;
    text-align: right;
}

#cartPopover .item-custom div {
    float: left;
    height: 13px;
    margin-left: 3px;
}

#cartPopover .simpleCart_remove{
    color: var( --e-global-color-accent,green );
}

#cartPopover .simpleCart_increment,
#cartPopover .simpleCart_decrement {
    line-height: 1;
    display: block;
    height: 5px;
    margin-top: 3px;
    color: var( --e-global-color-accent,green );
}

#cartPopover .simpleCart_increment.disabled_cart_increment{
    color: grey;
}
#cartPopover .simpleCart_continue {
    margin-right:10px;
    background-color: grey;
}
#cartPopover .simpleCart_cancel {
    background-color: grey;
}

#cartPopover .item-accessories{
    cursor: pointer;
    position: relative;
}

#cartPopover .item-accessories p{
    margin: 0;
    font-size: smaller;
    text-decoration: underline;
}

#cartPopover .item-accessories p:hover{
    color: var(--e-global-color-accent, grey);
}

#cartPopover .item-name {
    float: left;
    width: 162px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
}

#cartPopover .itemRow .item-total,
#cartPopover .itemRow .item-remove{
    float: right;
}
#cartPopover .item-total{
    min-width:54px;
}
#cartPopover .itemRow .item-timeslots{
    clear: left;
}

.simpleCart_timeslots.timepicker{
    width:80px;
    display: inline-block !important;
}

#cartData {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    padding: 10px;
    overflow: auto;
    max-width: 100%;
    max-height: 55vh;
    color: #111827;
}

#cartPopover #cartData strong {
    color: #111827;
    font-family: var(--e-global-typography-primary-font-family, inherit);
}

#cartData .simpleCart_input {
    background: #fff;
    color: #111827;
}

#cartEmptyMessage {
    display: none;
    padding: 34px 16px;
    color: #6b7280;
    font: 500 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: center;
}

#cartCheckoutButton {
    padding: 10px;
}

#cartPopover strong {
    color: #fff;
}

#cartData .headerRow,
#cartData .item-price,
#cartData .item-qtyincrement,
#cartData .item-inputtype,
#cartData .item-qtytype,
#cartData .item-encoded,
#cartData .item-rentalid,
#cartData .item-vendorid,
#cartData .item-required,
#cartData .item-linkqty,
#cartData .item-overrideprice,
#cartData .item-timeslots-orig,
#cartData .item-href,
#cartData .item-acc_dd_parent_limit
{
    display: none;
}

#cartData .item-name {
    padding-right: 5px;
    width: 80%;
    clear: right;
    min-width: 185px;
    font-weight: 700;
    max-width:364px;
}
@media screen and (max-width:430px) {
    #cartData .item-name {
        width: 78%;
    }
}

#cartWarning {
    color: #ff3030;
    display: none;
    text-align: center;
    margin-bottom: 5px;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
}

#cartDaysOfNoticeWarning {
    color: #5c4300;
    background: #ffe08a;
    display: none;
    text-align: center;
    margin: 8px 20px 0;
    padding: 8px;
    border: 1px solid #f4b400;
    border-radius: 3px;
}

#deliveryMethodWarning {
    color: #ff3030;
    display: none;
    text-align: center;
    margin-bottom: 5px;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
}

#cartData .item-image {
    min-width: 50px;
    max-width: 63px;
    min-height: 50px;
    padding: 5px;
    margin-top: 10px;
}

.noTitleStuff .ui-dialog-titlebar {
    display: none;
}

.item-quantity {
    min-width: 22px;
    text-align: center;
}

.item-availability {
    /*width: 250px;*/
    margin-left: 15px;
    font-size: small;
}

.simpleCart_decrement {
    margin-left: 10px;
}

.item-decrement {
    position: relative;
    top: -3px;
}
@media screen and (max-width:320px) {
    .item-decrement {
        clear:both;
    }
}

.item-decrement i {
    border: 1px solid gray;
    border-radius: 15px 0 0 15px;
    padding: 7px 7px 7px 10px;
}

.item-increment {
    position: relative;
    top: -3px;
}

.item-increment i {
    border: 1px solid gray;
    border-radius: 0 15px 15px 0;
    padding: 7px 10px 7px 7px;
}

.item-remove {
    margin-left: 2px;
}

.cartSubtotalBox {
    clear: both;
    padding: 10px 10px 0px;
    display: inline-block;
    width: 94%;
}

.cartDeliverytotalBox {
    clear: both;
    padding: 10px 10px 0px;
    display: inline-block;
    width: 94%;
}

#cartSubtotal {
    display: block;
    float: right;
    /*margin-right:15px;*/
}

.cat_div_wrapper{
    margin: 20px;
}
.io_category_wrapper {
    text-align: center;
}

/* Quick-zoom Container */
.cat_div img {
    transform-origin: 50 0;
    transition: transform .50s, visibility .25s ease-in;
}
@media (hover: hover) and (pointer: fine) {
    /* The Transformation */
    .cat_div:hover .category_big_img {
        transform: scale(1.04);
    }
}

.cat_div {
    overflow: hidden;
}

/* View Toggle Buttons */
.io_view_toggle_container {
    display: flex;
    justify-content: flex-end;
    margin: 20px 50px 10px;
    align-items: center;
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

.io_view_toggle_buttons {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

.io_view_toggle_btn {
    background: #fff;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-right: 1px solid #ddd;
    transition: all 0.3s ease;
    color: #666;
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

.io_view_toggle_btn:last-child {
    border-right: none;
}

.io_view_toggle_btn:hover {
    background: #f5f5f5;
}

.io_view_toggle_btn.active {
    background: var(--e-global-color-primary, #007cba);
    color: white;
}

.io_catdiv2 {
    max-width: 100% !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
    grid-gap: 24px;
    margin: 32px 24px;
    justify-content: space-evenly;
}

/* Tile View (default) improvements */
.io_catdiv2.tile-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
    grid-gap: 24px;
    margin: 32px 24px;
    justify-content: space-evenly;
}

/* List View Styles */
.io_catdiv2.list-view {
    display: block !important;
    margin: 20px auto;
    max-width: 50% !important;
}

.io_catdiv2.list-view .io_item2_list {
    display: flex !important;
    flex-direction: row !important;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 15px;
    align-items: flex-start;
    text-align: left !important;
    min-height: 180px;  /* ← Added this line to override the 450px base value */
}

.io_catdiv2.list-view .cat_div {
    flex: 0 0 200px;
    margin-right: 20px;
    position: relative;
    overflow: visible !important;
    height: auto;
}

.io_catdiv2.list-view .cat_img {
    width: auto;
    max-width: 100%;
    height: 150px;
    max-height: 150px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    margin: auto;
}

.io_catdiv2.list-view .io_item2_list_inner {
    flex: 1;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    height: auto;
}

.io_catdiv2.list-view .rentNameIO {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
}

.io_list_view_content {
    display: none;
    margin: 10px 0;
}

.io_catdiv2.list-view .io_list_view_content {
    display: block;
}

.io_item_description {
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    color: #666;
    font-size: 0.9em;
    margin-bottom: 8px;
    line-height: 1.4;
}

.io_item_details {
    display: flex;
    flex-direction: column;
    /*gap: 8px;*/
    margin-bottom: 10px;
}

.io_item_detail_row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.io_item_dimensions,
.io_item_footprint,
.io_item_capacity,
.io_item_electric,
.io_item_staff,
.io_item_volunteer {
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    font-size: 0.8em;
    color: #555;
    background: #f8f9fa;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    white-space: nowrap;
    min-width: fit-content;
}

.io_item_rating {
    display: flex;
    align-items: center;
    /*gap: 8px;*/
    margin-top: 4px;
}

.io_rating_stars img {
    height: 16px;
    width: auto;
}

.io_rating_text {
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    font-size: 0.8em;
    color: #666;
    font-style: italic;
}

.io_catdiv2.list-view .rentNameIO_price {
    text-align: left;
    margin-bottom: 10px;
}

.io_catdiv2.list-view .elementor-widget-button {
    align-self: flex-start;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .io_catdiv2.list-view .io_item2_list {
        flex-direction: column !important;
        text-align: center;
        padding: 10px; /* Reduce padding on mobile */
    }

    .io_catdiv2.list-view .cat_div {
        flex: none;
        margin: 0 auto 15px auto; /* Center the image */
        max-width: 200px;
    }

    .io_catdiv2.list-view .io_item2_list_inner {
        height: auto;
    }

    .io_view_toggle_container {
        margin: 20px 20px 10px;
    }
}
/* This is for the filtered project widget on category pages IO-10361*/
.io_catdiv3 {
    max-width: 100% !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
    grid-gap: 10px;
    margin: 50px;
    justify-content: space-evenly;
}

.io_item2_list,
.io_item2_listcat,
.io_item2_listrent {
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(20, 30, 45, 0.16), 0 8px 18px rgba(20, 30, 45, 0.06);
    margin-bottom: 24px;
    padding: 14px 14px 18px;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    background-color: #fff;
    box-sizing: border-box;
}

/* Override min-height for mega menu items to prevent oversized dropdown elements */
.io_mm_item .io_item2_list,
.io_mm_item .io_item2_listcat,
.io_mm_item .io_item2_listrent,
.io_mm_item_scrolling .io_item2_list,
.io_mm_item_scrolling .io_item2_listcat,
.io_mm_item_scrolling .io_item2_listrent {
    min-height: auto;
    height: auto;
}
.io_item2_list a,
.io_item2_listcat a,
.io_item2_listrent a {
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
    .io_item2_list:hover,
    .io_item2_listcat:hover,
    .io_item2_listrent:hover {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -1px -1px 1px rgba(0, 0, 0, 0.2);
    }
}

@media (hover: none) and (pointer: coarse) {
    /* Disable Elementor grow animation on hover */
    .elementor-animation-grow:hover,
    .elementor-animation-grow:focus,
    .elementor-animation-grow:active {
        transform: none !important;
    }

    /* Disable any hover effects on the button wrapper */
    .elementor-widget-button:hover {
        background: inherit !important;
        box-shadow: inherit !important;
    }

    /* Disable hover on all IO buttons */
    .io_button.elementor-animation-grow:hover {
        transform: none !important;
        -webkit-transform: none !important;
    }
}

.io_item2_list.nohover:hover,
.io_item2_list_scrolling.nohover:hover{
    box-shadow: none !important;
}

.io_item2_list_inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin-top: 0;
}

.io_item2_listrent .cat_div_inner > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Badge circles hang 22px below the product image; keep the title text
   clear of them (applied to all cards so grid titles stay aligned). */
.io_item2_list .cat_div_inner,
.io_item2_listrent .cat_div_inner {
    margin-top: 26px;
}

.io_mm_item_scrolling .io_item2_list{
    height: 100% !important;
}

/* view product hover */
@media (hover: hover) and (pointer: fine) {
    .cat_div:hover > div.view-product-button{
        opacity: 1;
    }

    .io_mm_item div.view-product-button,
    .io_mm_item_scrolling div.view-product-button,
    .io_item2_list div.view-product-button:hover,
    .io_item2_listcat div.view-product-button:hover,
    .io_item2_list:hover div.view-product-button{
        opacity:100;
        background-color: var(--e-global-color-primary, #717171);
    }

    .io_mm_item div.view-product-button a,
    .io_mm_item_scrolling div.view-product-button a,
    .io_item2_list div.view-product-button:hover a,
    .io_item2_listcat div.view-product-button:hover a,
    .io_item2_list:hover div.view-product-button a{
        color: white;
    }
}
.io_mm_item div.view-product-button,
.io_mm_item_scrolling div.view-product-button,
.io_item2_list div.view-product-button,
.io_item2_listcat div.view-product-button{
    outline: 0;
    border: 0;
    padding:8px;
    display:block;
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: .4s all linear;
    transition: .4s all linear;
    border-radius: 2px;
    font-family:var(--e-global-typography-primary-font-family, inherit);
    font-size: .95rem;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    background-color: var( --e-global-color-accent, #676767);
    max-width:140px;
}

.io_mm_item div.view-product-button a,
.io_mm_item_scrolling div.view-product-button a,
.io_item2_list div.view-product-button a,
.io_item2_listcat div.view-product-button a{
    color: var( --e-global-color-text, #ffffff);
}

div .cat_div .view-product-button2 {
    left: 25%;
    top: 40%;
}
.rentNameIO {
    display: block;
    text-align: center;
    margin: 0;
    line-height: 1.25;
}

.rentNameIO a {
    color: black;
}

.rentNameIO_price {
    display: inline-block;
    text-align: left;
    margin: 0;
    color: #444;
    font-family: var(--e-global-typography-text-font-family), sans-serif;
}

.rentNameIO_button {
    text-align: center;
    margin: 0;
}

.ioLink {
    display: block;
    float: right;
    margin-top: 29px;
}

.ioLink a {
    font-size: small;
    color: #7d7d7d;
    text-decoration: none;
}

.io_catdiv2 .cat_img{
    width: auto;
    height: 250px;
    max-width: 100%;
    max-height: 250px;
    object-fit:contain;
    display: block;
    margin: auto;
}

.io_item2_list .cat_div,
.io_item2_listrent .cat_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 0;
    width: 100%;
    /* Corner banners sit slightly outside the image container. */
    overflow: visible;
}

.io_item2_list .cat_div > a:first-of-type {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 250px;
}

/* Gallery-only links stay available to the lightbox without taking up flex space. */
.io_item2_list .cat_div > a[id^="io_img_big"],
.io_item2_listrent .cat_div > a[id^="io_img_big"] {
    display: none;
}

@media screen and (max-width:400px) {
    .io_catdiv2 .cat_img{
        max-width: 270px;
    }
}

@media (max-width: 600px) {
    .io_catdiv2,
    .io_catdiv2.tile-view {
        grid-gap: 18px;
        margin: 24px 12px;
    }

    .io_item2_list,
    .io_item2_listcat,
    .io_item2_listrent {
        padding: 12px;
        gap: 12px;
    }
}

/* Category tiles on main inventory page */
.io_item2_listcat .cat_img {
    width: auto;
    height: 250px;
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    display: block;
    margin: auto;
}

.io_product_container {
    display: block;
    width: 95%;
    max-width:100% !important;
    margin: auto;
    margin-top: 25px;
    padding-top: 25px;
}

@media screen and (max-width:415px) {
    .io_product_container{
        width: 80%;
    }
}

.io_product_infobox {
    display: inline-block;
    width: 47%;
    vertical-align: top;
    padding: 10px;
    padding-top: 20px;
}

.io_product_picbox {
    display: inline-block;
    position: sticky;
    width: 47%;
    vertical-align: top;
    padding: 10px;
    top: 10px;
}

@media (max-width: 771px) {
    .io_product_picbox {
        position: relative !important;
    }
}
.io_product_accessories,
.io_product_detailbox,
.io_product_upsell,
.io_product_reviewbox,
.io_product_requiredDD_accessories {
    display: block;
    width: 95%;
    margin: auto;
    text-align: center;
    margin-top: 50px;
}
/*.io_acc_h3{
    cursor: pointer;
    background-color: var( --e-global-color-accent,green );
}
.io_product_acc_pkg{
    text-align: center;
}*/
.io_product_acc_pkg .io_acc_li_name{
    padding: 4px;
}

.io_product_detailbox {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    width: 100%;
    text-align: left;
}
.io_product_desc{
    overflow-x: auto;
    min-height:30px;
}

.io_star_rating {
    margin-top: 10px;
}

.io_product_title {
    font-family: inherit;
}

.io_image_big {
    height: auto;
    /*width: 100%;*/
    max-width: 100%;
    max-height: 540px;
    display: block;
    margin: auto;
}

/* rental video integration css */
#io_main_media_container
{
    position: relative;
    width: 100%;
    min-height: 1px;
}

.cat_div,
.io_item2_list,
.io_item2_listrent,
.io_product_picbox,
#io_main_media_container {
    position: relative;
    /* Corner banners hang past the card edge; don't clip them. */
    overflow: visible;
}

/* Banner size is driven by custom properties so a site can retune it without a
   plugin release — Appearance > Customize > Additional CSS:

       .io_corner_banner { --io-banner-max: 80px; }

   The artwork scales with the card rather than sitting at a fixed pixel width,
   so a banner claims the same share of a 200px list-view thumbnail as it does
   of a wide two-column card and never swallows the photo. All banner art is
   square (500x500), so aspect-ratio pins the wrapper's box before the image
   loads and the offsets can ride along as percentages of that box, keeping
   each shape's placement identical at every size. */
.io_corner_banner {
    --io-banner-min: 80px;
    --io-banner-ideal: 36%;
    --io-banner-max: 132px;
    --io-banner-size: clamp(var(--io-banner-min), var(--io-banner-ideal), var(--io-banner-max));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 132px;
    width: var(--io-banner-size);
    aspect-ratio: 1;
    /* -21% / -19.5% of the artwork reproduces the original -42px / -39px
       offsets that hang the ribbon over the photo's top-left corner. */
    transform: translate(-21%, -19.5%);
    pointer-events: none;
}

/* Page builders ship a blanket `.elementor img { max-width: 100%; height: auto }`,
   which outranks a single-class rule and lifted the old `max-width: 200px` cap:
   the wrapper shrink-wrapped to the artwork's natural 500px, so an Elementor
   category page rendered a ~370px banner on a 330px card. The descendant
   selector wins the cascade back, and the wrapper's explicit width bounds the
   artwork whatever the theme declares. */
.io_corner_banner .io_corner_banner_img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Banner artwork comes in three shapes, tagged by io_badges.js. The base rule
   above is tuned for the corner ribbons (art anchored at the very corner, so it
   wraps the photo's top-left corner). Flags and tags are a different shape and
   are repositioned/resized here so each sits nicely on the corner. */

/* Hanging flag (e.g. Package Discount): a centered pennant that hangs down from
   the top edge, its top peeking just above the photo and inset from the left
   corner (per the designer's placement). */
.io_corner_banner_flag {
    --io-banner-min: 72px;
    --io-banner-ideal: 32%;
    --io-banner-max: 116px;
    transform: translate(16.9%, -19.1%);
}

/* Horizontal tag (Delivery Only / Pickup Available): a wide banner that reads
   left-to-right and straddles the top-left corner, overhanging past the left
   edge (per the designer's placement). */
.io_corner_banner_tag {
    --io-banner-min: 96px;
    --io-banner-ideal: 42%;
    --io-banner-max: 154px;
    transform: translate(-12.5%, -12.5%);
}

/* Label with no artwork: the wrapper holds a text chip, so drop the square box
   the artwork rules impose and let it size to its own text. */
.io_corner_banner_text {
    width: auto;
    aspect-ratio: auto;
    transform: translate(-12px, -12px);
}

/* Narrower screens stack the product column to nearly full width, so the photo
   sits close to the viewport's left edge; trim the caps here so the tag's
   rounded left end never gets clipped off-screen. Every shape is restated
   because these share the base rule's specificity and win on source order. */
@media (max-width: 600px) {
    .io_corner_banner {
        --io-banner-max: 108px;
    }

    .io_corner_banner_flag {
        --io-banner-max: 96px;
    }

    .io_corner_banner_tag {
        --io-banner-ideal: 36%;
        --io-banner-max: 128px;
    }
}

.io_promo_badges:empty {
    display: none;
}

/* Circle diameter is inherited by both the item box and the trigger so a site
   can retune it in Additional CSS with a single line:

       .io_promo_badges { --io-badge-circle-size: 34px; }

   44px is the accessible touch-target floor, so treat that as the default. */
.io_promo_badges {
    --io-badge-circle-size: 44px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
}

.io_promo_badge_item {
    position: relative;
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.io_promo_badge_full_img {
    display: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.io_promo_badge_icon_trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--io-badge-circle-size, 44px);
    min-width: var(--io-badge-circle-size, 44px);
    max-width: var(--io-badge-circle-size, 44px);
    height: var(--io-badge-circle-size, 44px);
    min-height: var(--io-badge-circle-size, 44px);
    margin: 0;
    padding: 3px;
    border: 1px solid #fff;
    border-radius: 50%;
    outline: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(20, 30, 45, .3);
    color: #222;
    box-sizing: border-box;
    cursor: help;
    font: inherit;
    line-height: 1;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

.io_promo_badge_icon_trigger:focus {
    outline: 0;
}

.io_promo_badge_icon_trigger:focus-visible {
    outline: 3px solid rgba(34, 113, 177, .72);
    outline-offset: 2px;
}

/* Same page-builder guard as the corner banners: `.elementor img { height: auto }`
   outranks a single-class rule, which let the taller icon artwork (Our Choice,
   Wet-Dry) grow past the circle instead of being fitted inside it. */
.io_promo_badge_icon_trigger .io_promo_badge_icon_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.io_promo_badge_icon_fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f5f5f5;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.io_promo_badge_tooltip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    z-index: 40;
    width: max-content;
    max-width: 150px;
    padding: 5px 8px;
    border-radius: 4px;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 4px);
    background: rgba(20, 30, 45, .94);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.io_promo_badge_icon_trigger:focus-visible:not(.io_promo_badge_tooltip_dismissed) .io_promo_badge_tooltip,
.io_promo_badge_icon_trigger[aria-expanded="true"] .io_promo_badge_tooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (hover: hover) and (pointer: fine) {
    .io_promo_badge_icon_trigger:hover .io_promo_badge_tooltip {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.io_promo_badge_icon_trigger.io_promo_badge_tooltip_dismissed .io_promo_badge_tooltip {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 4px);
}

/* Hovering (desktop) or tapping (touch) grows the badge artwork out of the
   circle. Only transform and opacity are animated — never layout — so the
   effect stays smooth, and io_badges.js sizes every badge in a row to the
   same uniform box before it opens. */
.io_promo_badge_morph {
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.io_promo_badge_morph .io_promo_badge_icon_img,
.io_promo_badge_morph .io_promo_badge_icon_fallback {
    transition: opacity .25s ease;
}

/* Extra specificity so the generic ".cat_div img" transition cannot
   override the pop animation; max-width: none guards against theme
   img { max-width: 100% } rules shrinking the artwork. */
.io_promo_badge_morph .io_promo_badge_morph_img {
    position: absolute;
    bottom: 0;
    left: var(--io-badge-expand-shift, 0);
    width: var(--io-badge-expand-width, 150px);
    height: var(--io-badge-expand-height, 70px);
    max-width: none;
    max-height: none;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transform: scale(.25);
    transform-origin: var(--io-badge-expand-origin, bottom left);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1.05), opacity .22s ease;
}

/* The aria-expanded and :focus-visible states are deliberately separate
   rules: a browser that rejects :focus-visible would otherwise drop the
   whole selector list, breaking tap-to-expand. */
.io_promo_badge_morph[aria-expanded="true"] {
    z-index: 30;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.io_promo_badge_morph:focus-visible:not(.io_promo_badge_tooltip_dismissed) {
    z-index: 30;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.io_promo_badge_morph[aria-expanded="true"] .io_promo_badge_icon_img,
.io_promo_badge_morph[aria-expanded="true"] .io_promo_badge_icon_fallback {
    opacity: 0;
}

.io_promo_badge_morph:focus-visible:not(.io_promo_badge_tooltip_dismissed) .io_promo_badge_icon_img,
.io_promo_badge_morph:focus-visible:not(.io_promo_badge_tooltip_dismissed) .io_promo_badge_icon_fallback {
    opacity: 0;
}

.io_promo_badge_morph[aria-expanded="true"] .io_promo_badge_morph_img {
    opacity: 1;
    transform: scale(1);
    /* Stay click-through so the enlarged artwork never traps the pointer over
       neighboring badges — hovering a sibling circle switches instantly. */
    pointer-events: none;
}

.io_promo_badge_morph:focus-visible:not(.io_promo_badge_tooltip_dismissed) .io_promo_badge_morph_img {
    opacity: 1;
    transform: scale(1);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .io_promo_badge_morph:hover {
        z-index: 30;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .io_promo_badge_morph:hover .io_promo_badge_icon_img,
    .io_promo_badge_morph:hover .io_promo_badge_icon_fallback {
        opacity: 0;
    }

    .io_promo_badge_morph:hover .io_promo_badge_morph_img {
        opacity: 1;
        transform: scale(1);
        pointer-events: none;
    }
}

/* Tapping an expanded badge closed keeps it collapsed until the pointer
   leaves and re-enters, matching the tooltip dismissal behavior. */
.io_promo_badge_morph.io_promo_badge_tooltip_dismissed {
    z-index: auto;
    border-color: #fff;
    background: #fff;
    box-shadow: 0 1px 4px rgba(20, 30, 45, .3);
}

.io_promo_badge_morph.io_promo_badge_tooltip_dismissed .io_promo_badge_icon_img,
.io_promo_badge_morph.io_promo_badge_tooltip_dismissed .io_promo_badge_icon_fallback {
    opacity: 1;
}

.io_promo_badge_morph.io_promo_badge_tooltip_dismissed .io_promo_badge_morph_img {
    opacity: 0;
    transform: scale(.25);
    pointer-events: none;
}

/* Keep the open badge's item above its siblings even when theme styles
   create stacking contexts on the items. Separate rules on purpose: see
   the :focus-visible note above. */
.io_promo_badge_item:hover {
    z-index: 31;
}

.io_promo_badge_item:focus-within {
    z-index: 31;
}

.io_promo_badge_item_open {
    z-index: 31;
}

@media (prefers-reduced-motion: reduce) {
    .io_promo_badge_morph,
    .io_promo_badge_morph .io_promo_badge_icon_img,
    .io_promo_badge_morph .io_promo_badge_icon_fallback,
    .io_promo_badge_morph .io_promo_badge_morph_img {
        transition-duration: 0s;
    }
}

.io_item2_list .cat_div {
    --io-category-media-height: 250px;
}

.io_item2_list .cat_div > .io_promo_badges_overlay,
.io_item2_listrent .cat_div > .io_promo_badges_overlay {
    position: absolute;
    right: 6px;
    left: 6px;
    z-index: 25;
    gap: 4px;
    width: auto;
    pointer-events: none;
}

/* The badge circles straddle the bottom edge of the product image: roughly
   three quarters over the picture, a quarter hanging below it. */
.io_item2_list .cat_div > .io_promo_badges_overlay {
    top: var(--io-category-media-height);
    bottom: auto;
    transform: translateY(-75%);
}

.io_item2_listrent .cat_div > .io_promo_badges_overlay {
    bottom: -11px;
}

.io_promo_badges_overlay .io_promo_badge_item {
    flex: 0 0 var(--io-badge-circle-size, 44px);
    width: var(--io-badge-circle-size, 44px);
    height: var(--io-badge-circle-size, 44px);
    pointer-events: auto;
}

.io_catdiv2.list-view .io_item2_list .cat_div {
    --io-category-media-height: 150px;
}

.io_catdiv2.list-view .io_item2_list .cat_div > a:first-of-type {
    min-height: 150px;
}

/* ---------- Product-detail promo badges ----------
   Mobile-first base on every screen: compact circles that expand to the full
   badge artwork on tap/hover (see .io_promo_badge_morph), straddling the
   photo's bottom-left corner. io_badges.js measures the available width and
   adds .io_promo_badges_fullart to the media container whenever the full
   labeled-artwork row actually fits; otherwise the circles stay, so the badges
   never break the layout. The straddle clearance (margin-bottom) is set inline
   by io_badges.js to match whichever mode is active. */
#io_main_media_container > .io_promo_badges_product {
    position: absolute;
    right: 8px;
    bottom: -22px;
    left: 8px;
    z-index: 25;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: none;
    margin: 0;
    /* Row is click-through; the individual circles re-enable pointer events. */
    pointer-events: none;
}

#io_main_media_container.io_has_promo_badges {
    margin-bottom: 32px;
}

/* The straddling badges would cover the video controls. */
#io_main_media_container.is-video-active > .io_promo_badges_product {
    display: none;
}

#io_main_media_container > .io_promo_badges_product .io_promo_badge_item {
    flex: 0 0 var(--io-badge-circle-size, 44px);
    width: var(--io-badge-circle-size, 44px);
    max-width: var(--io-badge-circle-size, 44px);
    height: var(--io-badge-circle-size, 44px);
    pointer-events: auto;
}

#io_main_media_container > .io_promo_badges_product .io_promo_badge_full_img,
#io_main_media_container > .io_promo_badges_product .io_promo_badge_full_fallback {
    display: none;
}

#io_main_media_container > .io_promo_badges_product .io_promo_badge_icon_trigger {
    display: flex;
}

/* Full-artwork mode (added by io_badges.js when the row fits): the labeled
   badge artwork in a single centered row straddling the bottom edge, each
   badge sharing the available width equally. */
#io_main_media_container.io_promo_badges_fullart > .io_promo_badges_product {
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(50%);
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin: 0 auto;
    pointer-events: auto;
}

#io_main_media_container.io_promo_badges_fullart > .io_promo_badges_product .io_promo_badge_item {
    flex: 1 1 auto;
    width: auto;
    max-width: 320px;
    height: auto;
}

#io_main_media_container.io_promo_badges_fullart > .io_promo_badges_product .io_promo_badge_icon_trigger {
    display: none;
}

#io_main_media_container.io_promo_badges_fullart > .io_promo_badges_product .io_promo_badge_full_img,
#io_main_media_container.io_promo_badges_fullart > .io_promo_badges_product .io_promo_badge_full_fallback {
    display: block;
    max-height: 160px;
}

.io_banner_fallback,
.io_badge_fallback {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 3px;
    background: #f5f5f5;
    color: #333;
    font-size: 14px;
    line-height: 1.2;
}

.io_banner_fallback {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.io_tab_container {
    display: flex;
    gap: 24px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #eaeaea;
}

.io_tab_menu {
    display: flex;
    flex: 0 0 210px;
    flex-direction: column;
}

.io_tab_btn {
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid #eaeaea;
    border-left: 4px solid transparent;
    background: transparent;
    color: #666;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: left;
}

.io_tab_btn:hover,
.io_tab_btn.active {
    background: #f9f9f9;
    color: #333;
}

.io_tab_btn.active {
    border-left-color: #2271b1;
}

.io_tab_content {
    flex: 1 1 auto;
    min-width: 0;
}

.io_tab_panel[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .io_tab_container {
        flex-direction: column;
        gap: 14px;
        margin-top: 16px;
        padding-top: 16px;
    }

    .io_tab_menu {
        flex-direction: row;
        flex-basis: auto;
        overflow-x: auto;
    }

    .io_tab_btn {
        flex: 0 0 auto;
        border-bottom: 4px solid transparent;
        border-left: 0;
        white-space: nowrap;
    }

    .io_tab_btn.active {
        border-bottom-color: #2271b1;
    }
}
#io_main_media_container #single_image,
#io_main_media_container #io_main_video
{
    display: block;
    width: 100%;
}
#io_main_media_container #single_image
{
    position: relative;
    z-index: 2;
}
#io_main_media_container #io_main_video
{
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 540px;
    object-fit: contain;
    background: transparent;
}
#io_main_media_container .io_image_big
{
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 540px;
    object-fit: contain;
    margin: auto;
}
#io_main_media_container.is-video-active #single_image
{
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    inset: 0;
}
#io_main_media_container.is-video-active #io_main_video
{
    position: relative;
    z-index: 2;
    visibility: visible;
}
#io_main_media_container:not(.is-video-active) #io_main_video
{
    visibility: hidden;
    pointer-events: none;
}
.io_media_thumb_wrapper
{
    display: inline-block;
    position: relative;
    cursor: pointer;
}
.io_video_play_icon
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    pointer-events: none;
    text-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.io_video_thumb
{
    width: auto;
    max-height: 80px;
}
/* end */

.category_big_img{
    display: block;
    margin: auto;
    height: 250px;
    width: auto;
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
}
div.io_image_thumbbox img.io_image_thumb {
    height: auto;
    max-width: 75px;
    max-height:75px;
    cursor: pointer;
}

.io_product_price_top_left {
    font-size: x-large;
    margin-top: 20px;
    margin-bottom: 0px;
}

.io_product_price_top_right {
    font-size: smaller;
    margin-top: 30px;
    margin-bottom: 0px
}

.io_product_price_left {
    font-size: medium;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 5px;
}

.io_product_price_right {
    font-size: smaller;
    margin-top: 12px;
    margin-bottom: 0px;
}

.io_product_price_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    width: 65%;
}

div.io_product_detail_box:first-of-type {
    margin-top: 40px;
}

.io_product_circuits_left,
.io_product_dimensions_left,
.io_product_footprint_left {
    margin: 2px;
    font-weight: 700;
}

.io_product_circuits_right,
.io_product_dimensions_right,
.io_product_footprint_right {
    margin: 2px
}

.io_product_detail_box {
    display: grid;
    grid-template-columns: 2fr 1fr;
    width: 50%;
    max-width: 325px;
    min-width: 285px;
}


.io_product_detail_box p {
    background: rgba(0, 0, 0, 0.03);
    padding: 5px 0px;
    border-radius: 6px;
}

/* accessories */
.io_upsell_li,
.io_acc_li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.io_acc_ul,
.io_upsell_ul,
.io_review_ul {
    list-style: none;
}

.io_acc_li_name,
.io_upsell_li_name {
    display: block;
    text-align: center;
    margin-top: 10px
}

.io_acc_li_img_thumb,
.io_upsell_li_img_thumb,
.io_upsell_li_img_thumb {
    display: block;
    margin: auto;
    height: auto;
    max-width: 55%
}

.io_acc_ul,
.io_upsell_ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
    grid-gap: 20px;
    margin: 20px;
    padding-left: 0px;
    justify-content: center;
}

.io_review_ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    margin: 20px;
    padding-left: 0px;
}

.io_acc_ul li,
.io_upsell_ul li {
    border: 1px solid #bbb;
    padding: 10px;
    border-radius: 6px;
}

.io_acc_ul li:hover,
.io_upsell_ul li:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

body {
    quotes: '\201c''\201d';
}

.io_review_li_desc:before {
    content: open-quote;
}

.io_review_li_desc:after {
    content: close-quote;
}

.io_review_li_name:before {
    content: ' by ';
}

.io_review_li_date:before {
    content: ' on ';
}

.io_review_li_desc {
    display: block;
}

#bookNowBtn {
    margin-top: 50px;
    display: inline-block;
}

.io_product_reviewbox {
    margin-bottom: 75px;
}

.io_image_thumbbox {
    text-align: center;
}

.io_image_thumbbox img {
    margin-left: 5px;
    margin-right: 5px;
}

.io_featured_widget .io_featured_additional_images_carousel {
    width: 170px;
    margin-left: auto;
    margin-right: auto;
}

.io_featured_widget .io_featured_additional_images_carousel .io_image_thumb {
    width: 75px;
}

.io_featured_widget.io_featured_sidebar {
    display: block;
    overflow: hidden;
    background-color: var(--e-global-color-primary, #2f5bc4);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.io_featured_widget.io_featured_sidebar_float {
    float: left;
    width: 280px;
    max-width: calc(100% - 20px);
    margin: 0 20px 20px 0;
}

.io_featured_sidebar_layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 20px;
}

.io_featured_sidebar_layout > .io_featured_sidebar_layout_widget {
    flex: 0 0 auto;
    width: auto;
}

.io_featured_sidebar_layout > .io_featured_sidebar_sticky_widget {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.io_featured_sidebar_layout > .io_featured_sidebar_layout_widget ~ * {
    flex: 1 1 0;
    min-width: 0;
}

.io_featured_sidebar_layout_widget .io_featured_sidebar_float {
    float: none;
    max-width: none;
    margin-right: 0;
}

@media (max-width: 767px) {
    .io_featured_sidebar_layout {
        flex-direction: column !important;
    }

    .io_featured_sidebar_layout > .io_featured_sidebar_layout_widget,
    .io_featured_sidebar_layout > .io_featured_sidebar_layout_widget ~ * {
        flex-basis: auto;
        width: 100%;
    }

    .io_featured_sidebar_layout > .io_featured_sidebar_sticky_widget {
        position: static;
    }

    .io_featured_widget.io_featured_sidebar_float {
        float: none;
        width: 100%;
        max-width: none;
        margin-right: 0;
    }
}

.io_featured_sidebar_list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 12px 0;
    list-style: none;
}

.io_featured_sidebar_item {
    margin: 0;
    padding: 0;
}

.io_featured_sidebar_item a {
    display: block;
    padding: 10px 20px;
    color: var(--e-global-color-text, #fff);
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.io_featured_sidebar_item a:hover,
.io_featured_sidebar_item a:focus-visible {
    color: var(--e-global-color-text, #fff);
    background-color: var(--e-global-color-accent, #ff6b00);
}

.io_all_item_cat {
    margin-bottom: 25px !important;
    margin-top: 25px !important;
}

.ioai_datetime_box {
    margin-top: 20px;
}

#cartData::-webkit-scrollbar {
    width: 10px;
}

#cartData::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#cartData::-webkit-scrollbar-thumb {
    background: #888;
}

#cartData::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.io_inventory img.cat_img {
    min-width: 50px;
    max-width: 90px;
    max-height: 90px;
    min-height: 50px;
}


.home header.io_phshow {
	display: none;
}

/* IO-15215 */
.jquery-datepicker .ui-state-default{
    border: 1px solid #c5c5c5 !important;
    background: #f6f6f6 !important;
    font-weight: normal !important;
    color: #454545 !important;
}

.jquery-datepicker .ui-state-active{
    border: 1px solid #003eff !important;
    background: #007fff !important;
    font-weight: normal !important;
    color: #ffffff !important;
}

.elementor-button{
	font-family: var(--e-global-typography-primary-font-family, inherit);
    font-weight: 500;
    background-color: #199323;
	    font-size: 15px;
    padding: 12px 24px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
			color: white;
}
.elementor-widget-button{
	margin:10px 0;
}

.io_product_price_1h,
.io_product_price_2h,
.io_product_price_3h,

.io_product_price_5h,
.io_product_price_6h,
.io_product_price_7h,
.io_product_price_8h,
.io_product_price_9h,
.io_product_price_10h,
.io_product_price_11h,
.io_product_price_12h,
.io_product_price_13h,
.io_product_price_14h,
.io_product_price_15h,
.io_product_price_16h,

.io_product_price_48h,
.io_product_price_72h,
.io_product_price_96h,
.io_product_price_120h,
.io_product_price_168h,
.io_product_price_336h,
.io_product_price_504h,
.io_product_price_720h,
.io_product_price_additionalhour{
    display:none;
}
.io_acc_li_desc,
.io_upsell_li_desc{
    display: none;
}

.io_sc_container{
    display: block;
    margin: auto;
}

.io_mm_outer{
    display: grid;
    grid-gap: 10px;
    margin: 0px;
    justify-content: space-evenly;
}
.io_mm_item {
    border-radius: 6px;
    text-align: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    padding: 10px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color:white;
}
.io_mm_item_scrolling{
    border-radius: 6px;
    text-align: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    background-color:white;
    margin-left: 20px;
    width: 200px !important;
    height: 350px;
}
.io_mm_title{
    display: block;
    width: 100%;
    margin-top: 10px;
}
.io_mm_item a {
    text-decoration: none;
}

.io_mm_item:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -1px -1px 1px rgba(0, 0, 0, 0.2);
}
.io_mm_outer .cat_img {
    width: auto;
    min-height: 80px;
    max-height: 120px;
}
.io_mm_item > a > div.cat_div{
    min-height: 203px;
}
.mega-menu-wrap * .io_mm_item > a > div.cat_div{
    min-height: 40px;
}

.catDescriptionIO_small {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 70px;
    min-height:53px;
}

/*
.searchio-live-search-result {
	margin-top: 10px;
	margin-bottom: 10px;
}*/
/* try to get google to ignore it as it gets picked up for meta description */
.searchio-live-search-instructions{display:none !important;}
/*
.searchio-live-search-results-showing{
    width: auto !important;
}

@media screen and (min-width:771px) {
.searchio-live-search-results-showing{
    min-width: 350px;
}
}
 */

.search-field::-webkit-search-cancel-button {
    display: none;
}


.searchio-live-search-result a {
    text-decoration: none;
    max-height: 75px;
}

.searchio-list {
    list-style-type: none !important;
    padding-left: 0 !important;
    width: 100%;
}

.searchio-list > li:nth-child(2n+2) {
    background: #eaeaea;
}

.searchio-link{
    text-decoration: none; !important;
    max-height: 100px;
}

.seachio-container{
    padding-bottom: 2%;
    padding-top: 4%;
    white-space: nowrap;
    width: auto;
    display: inline-flex;
    max-width: 73%;
}

.io_searchres_img {
	margin-left: 5px;
	height: 50px;
	width: 50px;
}

.searchio-text {
	text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
@media screen and (min-width:771px) {
    .searchio-text {
        min-width: 220px;
    }
}
 */

.searchio-subtext {
    font-size: 0.8em !important;
    color: #8e8e8e;
}

.searchio-price {
    color: #8e8e8e;
    display: inline-block;
    float: right;
    padding-top: 4%;
    padding-right: 1%;
}

.searchio-price-text {
    text-align: right;
    display: inline-block;
    color: #444;
}

.io_searchres_restext {
	position: relative;
}

.searchio-live-search-result p {
	font-size: 0.75rem;
}
.io_searchres_restext p.searchio-text{
    margin-top:11px;
}

@media screen and (max-width:771px) {

    .io_product_picbox,
    .io_product_infobox {
        width: 98%;
    }

    .io_product_title {
        text-align: center;
    }

    .io_star_rating {
        text-align: center;
    }

    .io_product_price_box {
        width: 90%;
        text-align:center;
    }

    .io_product_detail_box {
        width: 100%;
        text-align:left;
    }

    #bookNowBtn {
        margin-top: 50px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

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



#io_testimonials {

    max-height: auto;
    overflow: auto;
}

#io_testimonials img {
}
#io_testimonials h2 {
    text-align: center;
    font-size: 1.2rem;
    text-transform: uppercase;
    /*color:#fff;*/
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-weight: 600;
    margin: 10 0 20px 0;
}
#io_testimonials ul {
    list-style: none;
    text-align: center;
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.09);
    padding: 25px;
    margin:1%;

}
#io_testimonials ul:hover {
    background: #fff;
}
#io_testimonials li {
    font-family: var(--e-global-typography-primary-font-family, inherit);
    color : var( --e-global-color-text, black);
    font-weight: var( --e-global-typography-text-font-weight );
    font-size: 1rem;
    line-height: 1.25rem;
    margin: 5px;
}


.testi_wrapper {
    background:none;
    padding: 10px;
    border-radius: 10px;
    border:none;
}
.io_testimonials {
    overflow: auto;
    position:relative;
    display:flex;
}

.io_testimonials::-webkit-scrollbar {
    width: .75em;
}

.io_testimonials::-webkit-scrollbar-track {
    background:rgb(237, 237, 237, 0.5);
    border-radius:30px;
}

.io_testimonials::-webkit-scrollbar-thumb {
    background-color: #eaeaea;
    border-radius:30px;
}

.io_testimonials img {
}
.io_testimonials .review_avg_img{
    display:none;
}
.io_testimonials h2 {
    display:none;
    text-align: center;
    font-size: 1.2rem;
    text-transform: uppercase;
    color:#fff;
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-weight: 600;
    margin: 10 0 20px 0;
}
.io_testimonials ul {
    list-style: none;
    text-align:left;
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.09);
    padding:10px 20px;
    margin:5px;
    border:none;
    border-radius:30px;
    width:600px;

}
.io_testimonials ul:hover {
    background: #fff;
}
.io_testimonials li {
    font-family: var(--e-global-typography-primary-font-family, inherit);
    color : var( --e-global-color-text, black);
    font-weight: var( --e-global-typography-text-font-weight );
    font-size: 1rem;
    line-height: 1.25rem;
    margin: 5px;
}

.io_testimonials li:nth-child(4){
    height:11ch;
    overflow: hidden;
    white-space: wrap;
    text-overflow: ellipsis;
}

.io_testimonials li:nth-child(1){
    font-weight:500;
    font-size:20px !important;
}

.io_testimonials li:nth-child(2){
    color:gray;
}

.io_testimonials li:nth-child(3){
    color:gray;
}

@media (max-width:700px)
{
    .io_testimonials ul{
        width:100%;
        padding:10px;
    }
    .io_testimonials ul li p{
        font-size:14px !important;
    }
    .io_testimonials {
        display:block;
        overflow:unset;
    }
    .testi_wrapper{height:200px; overflow-y:scroll !important;}
}

.w3-ul{
    position: relative;
}

.io_review_readmore{
    cursor: pointer;
    bottom: -4%;
    position: absolute;
    right: 3%;
    color: #777979;
    font-size: 13px;
}

.io_landingpages,
.io_cat_longdescription{
    margin:20px;
    margin-top: 50px;
}
.io_landimg{
    width: auto;
    min-height: 150px;
    max-height: 250px;
    max-width: 330px;
    margin-right:20px;
    display: inline-block;
}

/* Filter Tool Styles */
.io_filter_details_horizontal{
    border-right: 1px lightgray solid;
    border-bottom: 1px lightgray solid;
    padding: 10px;
}

.io_filter_details_vertical{
    border-bottom: 1px lightgray solid;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.io_filter_details_vertical summary{
    margin-bottom: 10px
}
.io_filter_details_horizontal summary{
    margin-bottom: 10px
}

.io_filter_options_grid{
    display:grid;
    grid-auto-columns: 120px;
    grid-template-areas: "a a";
}

.io_filter_price{
    width: 80px
}

#deliverySubtotal {
    display: block;
    float: right;
    /*margin-right:15px;*/
}

#deliverSubtotalContainer{
    display: none;
}

.checkDeliveryCartContainer{
    display: none;
}

#checkDeliveryButton{
    margin-top: 50px;
    margin-left: 50px;
    display: inline-block;
}

#calcPriceOpenMap{
    margin-top: 50px;
    margin-left: 50px;
    display: inline-block;
}

input.ioCartDateInput{
    width: 90px;
    background-color: #45484a !important;
    border: none;
    color: #F2F2F2 !important;
    outline: none;
}

#ioCartTimeInstructions{
    text-align: center;
}

#cartCalendar > #ioCartCompanyTimeslotContainer {
    --io-timeslot-background: var(--mbsc-ios-surface-3, #fff);
    --io-timeslot-field-background: var(--mbsc-ios-surface-6, #f8f8f8);
    --io-timeslot-text: var(--mbsc-ios-text, #000);
    --io-timeslot-text-soft: var(--mbsc-ios-text-soft, #8c8c8c);
    --io-timeslot-border: var(--mbsc-ios-border, #ccc);
    --io-timeslot-accent: var(--e-global-color-accent, var(--mbsc-ios-accent, #007aff));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: -10px;
    padding: 12px 16px 16px;
    border-top: 0 !important;
    border-bottom: 1px solid var(--io-timeslot-border) !important;
    background: var(--io-timeslot-background) !important;
    color: var(--io-timeslot-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#ioCartCompanyTimeslotContainer .calTimeLabel {
    display: block;
    margin: 0;
    color: var(--io-timeslot-text-soft);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

#ioCartCompanyTimeslotContainer .ioCartCompanyTimeslotField {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 8px;
}

#ioCartCompanyTimeslotContainer select.ioCartCompanyTimeslots {
    box-sizing: border-box;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--io-timeslot-border);
    border-radius: 8px;
    outline: none;
    background-color: var(--io-timeslot-field-background);
    color: var(--io-timeslot-text);
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#ioCartCompanyTimeslotContainer .ioCartCompanyTimeslotInfoButton {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--io-timeslot-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--io-timeslot-accent);
    font: 700 18px/30px Georgia, serif;
    text-align: center;
    cursor: pointer;
}

#ioCartCompanyTimeslotContainer .ioCartCompanyTimeslotInfoButton:hover,
#ioCartCompanyTimeslotContainer .ioCartCompanyTimeslotInfoButton:focus-visible {
    background: var(--io-timeslot-accent);
    color: var(--io-timeslot-background);
}

#ioCartCompanyTimeslotContainer .ioCartCompanyTimeslotInfoButton.io-timeslot-info-pulse[aria-expanded="false"] {
    animation: io-timeslot-info-pulse 2.8s ease-in-out infinite;
}

@keyframes io-timeslot-info-pulse {
    0%, 35%, 100% { transform: scale(1); }
    17% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    #ioCartCompanyTimeslotContainer .ioCartCompanyTimeslotInfoButton.io-timeslot-info-pulse {
        animation: none;
    }
}

#ioCartCompanyTimeslotContainer .ioCartCompanyTimeslotInfoText {
    overflow-wrap: anywhere;
    color: var(--io-timeslot-text);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}

#ioCartCompanyTimeslotContainer select.ioCartCompanyTimeslots:hover {
    border-color: var(--io-timeslot-accent);
}

#ioCartCompanyTimeslotContainer select.ioCartCompanyTimeslots:focus-visible {
    border-color: var(--io-timeslot-accent);
    box-shadow: 0 0 0 2px var(--io-timeslot-accent);
}

#ioCartCompanyTimeslotContainer select.ioCartCompanyTimeslots option {
    background: var(--io-timeslot-background);
    color: var(--io-timeslot-text);
}

#cartCalendar > .mbsc-ios-dark ~ #ioCartCompanyTimeslotContainer,
#cartCalendar > .mbsc-material-dark ~ #ioCartCompanyTimeslotContainer,
#cartCalendar > .mbsc-windows-dark ~ #ioCartCompanyTimeslotContainer {
    --io-timeslot-background: #1c1c1c;
    --io-timeslot-field-background: #383838;
    --io-timeslot-text: #fff;
    --io-timeslot-text-soft: #aaa;
    --io-timeslot-border: #444;
}

.cartLink{
    text-decoration: none;
    cursor: pointer;
    color: #fff;
}
.cartLink:hover {
    text-decoration: underline;
}

.invalid_address_field{
    border-color: red;
}

#delivery_charge_info_box{
    display: none;
}

.delivery_info_continue {
    margin-right:10px;
    background-color: grey !important;
}

.address_entry{
    display: none;
}

#map_container{
    height: 70%;
    width: 95%;
}

#io_map_additional_instructions{
    display: none;
}

#io_show_more_instructions{
    cursor: pointer;
}

#io_map_instructions{
    width: 95%;
}


#io_map_new_line_container{
    display:none;
}

.approx_area{
    margin-left:5px;
}

.approx_perimeter{
    margin-left:5px;
}

.map_fancybox{
    display:none;
    height: 80vh;
    width: 50vw;
}
@media (max-width: 600px){
    .map_fancybox{
        display:none;
        height: 80vh;
        width: 90vw;
    }
}


.approx_area_container{
    display:none;
}

/* Cart upsells ("Some items you may be interested in"): a row of product cards instead of the old grey strip. */
#cart-carousel-container {
    box-sizing: border-box;
    margin: 20px 0 4px;
    padding: 0 0 6px;
    position: relative;
    text-align: left;
}

#cart-carousel-container > label {
    color: var(--io-cart-text, #17233a);
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 0 0 12px;
}

#cart-carousel-container > br {
    display: none;
}

.cart-carousel {
    background: transparent;
    margin: 0;
    min-height: 0;
    width: 100%;
}

.io_cart_carousel_cell {
    box-sizing: border-box;
    margin-right: 12px;
    width: 136px;
}

#cartPartyBuilderFormContainer{
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    padding: 12px 16px 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#cartPartyBuilderFormContainer.flickity-enabled {
    padding-left: 38px;
    padding-right: 38px;
}

#cartPartyBuilderFormContainer .flickity-prev-next-button {
    width: 24px;
    height: 24px;
}

#cartPartyBuilderFormContainer .flickity-prev-next-button.previous {
    left: 2px;
}

#cartPartyBuilderFormContainer .flickity-prev-next-button.next {
    right: 2px;
}

#cartPartyBuilderEmailContainer,
#cartPartyBuilderPhoneContainer,
#cartPartyBuilderAddressContainer {
    box-sizing: border-box;
    margin-bottom: 14px;
    padding: 0 0 12px;
}

#cartPartyBuilderFormContainer p {
    margin: 0 0 10px;
    color: var(--io-cart-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

#cartPartyBuilderEmailWarning,
#cartPartyBuilderPhoneWarning {
    margin-top: 8px;
    color: #fecaca;
    font-size: 13px;
    font-weight: 600;
}

#cartPartyBuilderFormContainer .io-cart-party-field {
    box-sizing: border-box;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--io-cart-border);
    border-radius: 9px;
    outline: none;
    background: var(--io-cart-field);
    color: var(--io-cart-text);
    font: 500 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#cartPartyBuilderFormContainer .io-cart-party-field::placeholder {
    color: var(--io-cart-text-soft);
    opacity: 1;
}

#cartPartyBuilderFormContainer .io-cart-party-field:hover {
    background: var(--io-cart-field-hover);
}

#cartPartyBuilderFormContainer .io-cart-party-field:focus-visible {
    border-color: var(--e-global-color-accent, #66a940);
    box-shadow: 0 0 0 3px rgba(102, 169, 64, .28);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-global-color-accent, #66a940) 32%, transparent);
}

#cartPartyBuilderEmailInput,
#cartPartyBuilderPhoneInput {
    width: min(100%, 290px);
    margin: 0 6px 8px 0 !important;
    vertical-align: middle;
}

.io-cart-address-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;
}

#cartPartyBuilderStreetInput{
    width: 100%;
}
#cartPartyBuilderStateInput{
    flex: 0 0 76px;
    width: 76px;
    color-scheme: dark;
}
#cartPartyBuilderZipInput{
    flex: 0 0 92px;
    width: 92px;
}
#cartPartyBuilderCityInput{
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

@media (max-width: 450px) {
    #cartPartyBuilderFormContainer {
        padding-left: 10px;
        padding-right: 10px;
    }

    #cartPartyBuilderEmailInput,
    #cartPartyBuilderPhoneInput {
        width: 100%;
        margin-right: 0 !important;
    }

    #cartPartyBuilderEmailContainer .elementor-widget-button,
    #cartPartyBuilderPhoneContainer .elementor-widget-button {
        display: block !important;
    }

    #cartPartyBuilderEmailContainer .elementor-button,
    #cartPartyBuilderPhoneContainer .elementor-button {
        width: 100%;
    }
}

.page-carousel{
    width: 90%;
    margin-left: 5%;
    min-height:130px;
    margin-top:2px;
}

.io_info_modal_data_container{
    display: none;
}


/* cart carousel cell styles: each upsell is a card (square photo on a soft field, two-line name) that links to its page */
.cart-carousel-link {
    background: var(--io-cart-surface, #fff);
    border: 1px solid var(--io-cart-border, #e1e6ed);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23, 35, 58, .05);
    color: var(--io-cart-text, #17233a);
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.cart-carousel-link:hover,
.cart-carousel-link:focus-visible {
    border-color: #c7d0db;
    box-shadow: 0 10px 24px rgba(23, 35, 58, .12);
    color: var(--io-cart-text, #17233a);
    text-decoration: none;
    transform: translateY(-2px);
}

.cart-carousel-image {
    aspect-ratio: 1 / 1;
    background: var(--io-cart-field, #f7f9fc);
    box-sizing: border-box;
    display: block;
    height: auto;
    margin: 0;
    max-height: none;
    max-width: none;
    object-fit: contain;
    padding: 10px;
    width: 100%;
}

.cart-carousel-name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font-family: var(--e-global-typography-primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    min-height: calc(2.6em + 20px);
    overflow: hidden;
    padding: 10px 12px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: normal;
    width: auto;
}

/* Flickity chrome inside the cart: small round arrows on the row's edges, a pill for the active page dot. */
#cart-carousel-container .flickity-prev-next-button {
    background: #fff;
    border: 1px solid var(--io-cart-border, #e1e6ed);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(23, 35, 58, .14);
    color: var(--io-cart-text, #17233a);
    height: 36px;
    top: 68px; /* the middle of the square photo */
    transform: none;
    width: 36px;
}

#cart-carousel-container .flickity-prev-next-button:hover {
    background: var(--io-cart-field-hover, #edf2f7);
}

#cart-carousel-container .flickity-prev-next-button:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}

#cart-carousel-container .flickity-prev-next-button.previous {
    left: -12px;
}

#cart-carousel-container .flickity-prev-next-button.next {
    right: -12px;
}

#cart-carousel-container .flickity-page-dots {
    bottom: auto;
    line-height: 0;
    margin: 12px 0 0;
    position: static;
}

#cart-carousel-container .flickity-page-dots .dot {
    background: #cbd5e1;
    border-radius: 4px;
    height: 7px;
    margin: 0 3px;
    opacity: 1;
    transition: background-color .15s ease; /* the pill's width snaps; animating width would relayout the row */
    width: 7px;
}

#cart-carousel-container .flickity-page-dots .dot.is-selected {
    background: var(--io-button-bg, var(--e-global-color-accent, #61ce70));
    width: 20px;
}

@media (max-width: 600px) {
    .io_cart_carousel_cell {
        width: 42%;
    }

    /* Phones swipe the row; the dots show the pages and the arrows get out of the way. */
    #cart-carousel-container .flickity-prev-next-button {
        display: none;
    }

    #cart-carousel-container .flickity-page-dots {
        display: block !important;
    }
}

/* page carousel cell styles */
.page-carousel-image {
    width: 200px !important;
    height: 200px !important;
    margin-top: 10px;
    object-fit: cover;
}

.page-carousel-link {
    text-decoration: none;
    color: #1d2124;
}

.page-carousel-name {
    margin-top: 2px;
    width: 200px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--e-global-typography-primary-font-family, inherit);
    text-align:center;
}

.io_cart_carousel_cell {
    margin-right: 10px;
    text-align:center;
}

.io_page_carousel_cell {
    margin-right: 20px;
    text-align:center;
}

/*! Flickity v2.2.2
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
    position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
    position: absolute;
    background: hsla(0, 0%, 100%, 0.75);
    border: none;
    color: #333;
}

.flickity-button:hover {
    background: white;
    cursor: pointer;
}

.flickity-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
    opacity: 0.6;
}

.flickity-button:disabled {
    opacity: 0.3;
    cursor: auto;
    /* prevent disabled button from capturing pointer up event. #716 */
    pointer-events: none;
}

.flickity-button-icon {
    fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    /* vertically center */
    transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px;
}

.flickity-prev-next-button.previous {
    left: -40px;
}
.flickity-prev-next-button.next {
    right: -40px;
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
}

@media (max-width: 600px) {
    .flickity-page-dots{
        display: none !important;
    }
    .flickity-prev-next-button.previous {
        left: 0px;
    }
    .flickity-prev-next-button.next {
        right: 0px;
    }
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    opacity: 0.25;
    cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
    opacity: 1;
}

#ioInfoHeader {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    justify-content: center;
    font-family:var(--e-global-typography-primary-font-family, inherit);
}

#ioInfoHeader > div {
    display: flex;
    flex-direction: column;
    padding: 15px;
    flex-basis: auto;
    align-content: center;
    justify-content: center;
}

.io-step {
    background-color: #073CF0;
    padding-top: 15px;
    position: relative;
    color: white;

}

.io-step-done {
    background-color: #30AA0F;
    padding-top: 15px;
    position: relative;
    color: white;
}

.io-step:not(:last-child)::after {
    border-bottom: 90px solid rgba(0, 0, 0, 0);
    border-left: 40px solid #073CF0;
    border-top: 90px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    width: 0;
    right: -30px;
    position: absolute;
    z-index:300;
}

.io-step-done:not(:last-child)::after {
    border-bottom: 90px solid rgba(0, 0, 0, 0);
    border-left: 40px solid #30AA0F;
    border-top: 90px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    width: 0;
    right: -30px;
    position: absolute;
    z-index:300;
}

.io-step-active:not(:last-child)::after {
    border-bottom: 90px solid rgba(0, 0, 0, 0);
    border-left: 40px solid #30AA0F;
    border-top: 90px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    width: 0;
    right: -30px;
    position: absolute;
    z-index:300;
}

.io-step:not(:last-child)::before{
    border-bottom: 90px solid rgba(0, 0, 0, 0);
    border-left: 40px solid white;
    border-top: 90px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    width: 0;
    right: -35px;
    position: absolute;
    z-index:250;
}


.io-step:not(:first-child){
    padding-left:50px !important;
}

.io-step > content{
    display:none !important;
}


.io-step-active {
    background-color: #30AA0F;
    z-index:100;
}

.io-step:last-child, .io-step:first-child {
    border-bottom-left-radius: 5px;    border-top-left-radius: 5px;
}


.io-step-active > content{
    display:block !important;
}

.io-step-active{
    transition:ease 1s;
}

#ioInfoHeader h4 {
    text-align: center;
    font-size: 25px;
    font-family:var(--e-global-typography-primary-font-family, inherit);
    margin: 0;
}

#ioInfoHeader input {
    padding: 10px;
    border: none;
    border-radius: 3px;
    background: #f7f7f7;
    text-align: center;
    width:95px;
}

#ioInfoHeader form.io-zipcode {
    margin-left:10px;
}

#ioInfoHeader .forms{display:flex;}

#ioInfoHeader .simpleCart_checkout{
    cursor: pointer;
}

#ioHeaderTimeStart,
#ioHeaderTimeEnd {
    border-radius: 0 3px 3px 0px;
    border-left: 1px solid lightgray;
}

#ioHeaderDateStart,
#ioHeaderDateEnd {
    border-radius: 3px 0 0 3px;
}

.fa {
    font-size: 20px;
    padding: 0 10px;
    color:white;
}

#ioInfoHeader form.io-zipcode input[type=button] {
    width: 70px;
}

#ioInfoHeader .forms{display:flex;flex-wrap:wrap;}

@media (max-width:700px){
    #ioInfoHeader h4{font-size:16px;}

    #ioInfoHeader input{width:69px;}

    #ioInfoHeader content{font-size:14px;}

    #ioInfoHeader > div {    padding: 8px;}

    .io-step:not(:first-child) {padding-left: 30px !important;}

    #ioInfoHeader > div:first-child{padding:15px 5px;}

    #ioInfoHeader i {margin:0; padding:0;}

    #ioInfoHeader form.io-zipcode{margin-top:10px;}

    #ioInfoHeader{flex-wrap:wrap;}

    .io-step:not(:last-child)::after {
        border-bottom: 38px solid rgba(0, 0, 0, 0);
        border-left: 19px solid #073CF0;
        border-top: 38px solid rgba(0, 0, 0, 0);
        right:-18px;
    }

    .io-step:not(:last-child)::before{
        border-bottom: 38px solid rgba(0, 0, 0, 0);
        border-left: 19px solid white;
        border-top: 38px solid rgba(0, 0, 0, 0);
        right:-20px;
    }
    .io-step-done:not(:last-child)::after{
        border-bottom: 38px solid rgba(0, 0, 0, 0);
        border-left: 19px solid #30AA0F;
        border-top: 38px solid rgba(0, 0, 0, 0);
        right:-18px;
    }
    .io-step-active:not(:last-child)::after{
        border-bottom: 38px solid rgba(0, 0, 0, 0);
        border-left: 19px solid #30AA0F;
        border-top: 38px solid rgba(0, 0, 0, 0);
        right:-18px;
    }
}

div#ui-datepicker-div{
    background-color: white;
    z-index: 600 !important;
}

input[type=range] .multi-range {
    position: absolute;
}

input[type=range] {
    box-sizing: border-box;
    appearance: none;
    /* IO-31583 was a flat width:400px, which overflows any viewport narrower
       than that. max-width keeps the desktop appearance identical. */
    width: 100%;
    max-width: 400px;
    margin: 0;
    padding: 0 2px;
    overflow: hidden;
    border: 0;
    border-radius: 1px;
    outline: none;
    background: linear-gradient(grey, grey) no-repeat center;
    background-size: 100% 2px;
    pointer-events: none;
}

input[type=range]:focus {
     outline: none;
 }
input[type=range]:active{
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    height: 15px;
    width: 15px;
    border-radius: 10px;
    background-color: var(--e-global-color-secondary);
    position: relative;
    margin: 5px 0;
    cursor: pointer;
    appearance: none;
    pointer-events: all;
    box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);

}

#io_filter_size_container{
    display: none;
}

.multi-range {
    position: relative;
    height: 50px;
}

.multi-range input[type=range] {
    position: absolute;
}

.multi-range input[type=range]:nth-child(2) {
    background: none;
}

.io_filter_slider_text_input{
    width: 7ch;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.25em; /* Make the author text larger */
}

.card-header {
    padding: 0.5em 1em;
}

.card-text {
    scrollbar-width: thin;
    scrollbar-color: #888 #ddd;
    border-radius: 0; /* Remove border-radius */
    overflow: hidden; /* Hide scrollbar by default */
}

.card-text:hover {
    overflow-y: auto; /* Show scrollbar on hover */
}

.card {
    border-radius: 0.625rem; /* 10px to rem */
    transition: box-shadow 0.3s; /* Smooth transition for shadow */
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.card:hover {
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; /* Enhanced shadow on hover */
}

.card-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0.5em 1em; /* Add padding to card body */
    font-size: 1em; /* Ensure review text is smaller than author text */
}

.io-reviews-header
{
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 0.625rem;
	margin-bottom: 1ex;
box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}

/* Adjustments for portrait mode */
.io-reviews-header > div
{
    flex-direction: row;
    align-items: center;
    text-align: center;
    margin: 10px 0; /* Add spacing between stacked elements */
}

.io-reviews-header > div img
{
    margin: 0 auto; /* Center the logos */
    max-width: 100%; /* Ensure logos fit within the container */
    height: auto;
}

.io-reviews-header > div > div
{
    justify-content: center; /* Ensure inner flex items are centered */
}

.io-reviews-grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media(max-width: 600px)
{

    /* Adjustments for portrait mode */
    .io-reviews-header > div
    {
        display: block !important;
    }

    .io-reviews-header > div > div
    {
        margin-left: 0 !important;
    }

    .io-reviews-grid
    {
        grid-template-columns: 1fr;
    }

    .io-review-card
    {
        width: auto;
    }
}

.io_locationRedirectLink{
    display:none;
    cursor: pointer;
    color: red;
    font-weight: bold;
    text-align: center;
}

#cart_acc_required_main{
    display:flex;
    gap:10px;
}

#cart_acc_select_dialog{
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-size: 62.5%;
    position: relative;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#cart_acc_select_dialog h3{
    font-size: 2em;
    text-align: center;
}

#cart_acc_dialog_top{
    display: flex;
    justify-content: space-between;
    align-content: center;
}

#cart_acc_dialog_top{
    background-color: var(--e-global-color-accent,green);
    padding: 15px 20px;
}

#cart_acc_dialog_top span{
    font-size: 30px;
    font-weight: 600;
    cursor: pointer;
}

@media(max-width: 600px){
    #cart_acc_dialog_top span{
        font-size: 20px;
    }
}

#cart_acc_top_name{
    font-weight: bold;
    font-size: 2.5em;
    margin: auto 0;
    max-width: 75%;
}

.acc_dialog_container{
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
}
@media(max-width: 600px){
    #cart_acc_dialog_top span{
        font-size: 20px;
    }
}


.acc_dialog_image{
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.dialog_acc_selectable_card{
    border: solid rgb(214, 214, 214) 2px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    width: 200px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.select_card_container{
    display: flex;
    justify-content: center;
    align-items: start;
    width: 80%;
    gap: 10px;
    margin: auto;
    flex-wrap:wrap;
    align-items:stretch;
}

.acc_name{
    font-size: 1.6em;
    text-align: center;
    font-weight: 500;
    margin: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 10px);
    white-space: nowrap;
}

.io_acc_live_price{
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
    margin: 0 5px 8px;
}

.acc_selected_message{
    display: none;
}

.cart_acc_quantity{
    margin: 5px auto;
    width: 100px;
    background-color: white;
    border-radius: 30px;
    border:solid 1px rgb(146, 146, 146);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.cart_acc_quantity .cart_acc_main_qty{
    margin-left: 10%
}

.cart_acc_quantity.io-hidden{
    display:none;
}

.cart_acc_quantity_control{
    background-color: #fff;
    border: none;
    padding: 4px 10px;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    border-radius: 30px;
    float: none !important;
}

.cart_acc_quantity_input {
    padding: 6px;
    border: none;
    width: 3ch;
    vertical-align: middle;
    text-align: center;
}

.cart_acc_quantity_input:focus-visible{
    outline: solid 1px #dadada;
    box-shadow: none;
}

.cart_acc_quantity input[type=number]::-webkit-inner-spin-button,
.cart_acc_quantity input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/* Hide arrows in Firefox */
.cart_acc_quantity input[type=number] {
    -moz-appearance: textfield;
}

.dialog_acc_selectable_card.selected{
    border: var(--e-global-color-accent,green) solid 4px;
}

.dialog_acc_selectable_card .selected_check{
    display: none;
}

.dialog_acc_selectable_card.selected .selected_check{
    display: block;
    color: white;
    position: absolute;
    right: -3px;
    top: -3px;
    font-size: 15px;
    padding: 3px;
    background-color: var(--e-global-color-accent,green);
    border-radius: 3px;
}

.dialog_acc_selectable_card.disabled_select_card{
    opacity: 50%;
    cursor: not-allowed;
}

#cart_acc_dialog_total{
    width: 100%;
    text-align: center;
    font-size: large;
}

#cart_acc_controls i{
    cursor: pointer;
}

#cart_acc_controls a{
    font-size: 3em;
}

#cart_acc_controls .simpleCart_add_acc_dialog a{
    font-size: 3em;
}
#cart_acc_controls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0px;
    flex-shrink: 0;
    background-color: #f9f9f9;
}

.simpleCart_progress{
    width: 50%;
    margin-top: -19px;
}

.simpleCart_progress_outer{
    height: 15px;
    margin: auto 0;
    border-radius: 30px;
    background-color: #E7E7E7FF;
    margin-inline: 20px;
}

.simpleCart_progress_inner{
    background-color: var(--e-global-color-accent,green);
    height:100%;
    border-radius: 30px;
}

.simpleCart_progress{
    width: 50%;
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 10px;
}

.hidden{
    display: none;
}

.acc_error_message{
    color: red;
    text-align: center;
    font-size: 1.4em;
    width: 200px;
    margin: 0 auto;
    line-height: 1em;
    margin-top: 5px;
}

.

@media (max-width:800px) {
    .dialog_acc_selectable_card{
        max-width: unset;
    }

}

#cart_acc_controls .io_button{
    cursor: pointer;
}

.io_acc_done{
    font-size: x-large;
    border: 3px solid var(--e-global-color-accent, green);
    padding: 4px;
    border-radius: 10px;
}

.simpleCart_next_acc_dialog i,
.simpleCart_back_acc_dialog i,
.simpleCart_finish_acc_dialog i{
    color: var(--e-global-color-accent,green);
}

.simpleCart_next_acc_dialog.disabled_next i,
.simpleCart_finish_acc_dialog.disabled_finish i{
    color: grey !important;
}

.simpleCart_add_acc_dialog.disabled_add{
    background-color: grey !important;
}

#progress_message_add_more,
#progress_message_all_added{
    display:none;
}

/*start of finish screen CSS*/
#io_acc_dialog_confirm_screen{
    padding-inline: 20px;
}

.io_acc_dialog_desc{
    width: 100%;
    max-height: 80px;
}

.io_acc_dialog_card_desc{
    max-height: 50px;
    overflow: auto;
}

.io_cs_section_image{
    width: 50px;
}

.io_cs_section_editable{
    display: flex;
    justify-content: space-between;
}

.io_cs_required{
    justify-content: start !important;
    gap:10px;
}

.io_cs_required_title, .io_cs_editable_title{
    margin: 0;
    font-weight: 700;
    font-size: 1.4em;
}

.io_cs_editable_group{
    border: solid #BFBCBCFF 2px;
    border-radius: 17px;
    box-shadow: rgb(214, 214, 214) 0 2px 5px 0;
}

.io_cs_editable_group_title{
    font-size: 1.6em;
    margin-block:10px;
}

.confirm_screen_included_container h4{
    font-size: 1.6em;
    margin-top: 0px;

}

.io_cs_section,
.io_cs_required_section{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 7px;
}

.simpleCart_confirm_screen_edit{
    cursor: pointer;
    font-size: 1.4em !important;
    color: black;
    padding: 0 !important;
}

.io_cs_acc_title{
    font-weight: 600;
    font-size: 1.3em;
}

#cart_acc_select_dialog hr{
    height: 1px; /* Adjust thickness as desired */
    background-color: #e0e0e0; /* Set your desired color */
    border: none;
}

.cs_add_missing_accs{
    display: flex;
    justify-content: center;
    margin-top: 5vh;
    margin-bottom: 5vh;
    font-size: larger;
    text-align: center;
}

.io_cs_content_row{
    display: flex;
    justify-content: space-between;
}

.io_cs_editable_group .io_cs_content_row:nth-of-type(even){
    background-color: #ebebeb;
}

.io_cs_editable_group .edit_button_header{
    display: flex;
    justify-content: flex-end;
    background-color: #BFBCBCFF;
    border: #BFBCBCFF 1px solid;
    border-radius: 10px 10px 0 0;
    padding: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 3px 2px 6px -1px, rgba(0, 0, 0, 0.06) 0px 5px 4px -1px;
}

.io_cs_qty {
    font-size: 15px;
    margin-right: 10px;
}

.io_cs_price {
    font-size: 15px;
}

#cart_acc_dialog_top .top_text_dark{
    color: #222;
}
#cart_acc_dialog_top .top_text_light{
    color: #f5f5f5;
}
#cart_acc_select_bottom{
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.ui-datepicker-trigger{display:none}
#ioCartTimeInstructions {
    margin: 4px;
}
#cartCalendar {
    padding-bottom: 0 !important;
}
#cartDateRange{
    color:var( --e-global-color-accent );
    padding-bottom: 20px !important;
}
#cartDateRange:hover{
    text-decoration:underline;
}
.ui-timepicker-input {
    text-align: right;
}
.calTimeLabel {
    min-width: auto !important;
}
#ioDeliveryMethodContainer {
    text-align: left !important;
    padding: 10px 10px 0 10px !important;
}
.ioDeliveryMethods {
    display: block !important;
    float: right !important;
}
/* Minimal CSS similar to Bootstrap's dropdown styling */
.io-cart-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 0.25rem;
}
.io-cart-dropdown.show > .io-cart-dropdown-menu {
    display: block;
}
.io-cart-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.io-cart-dropdown-item:hover,
.io-cart-dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

/* IO-27757: display-only fee lines under the cart subtotal */
#cartFeesBox { margin: 2px 0 6px; }
.ioCartFeeRow { display: flex; justify-content: space-between; gap: 12px; font-size: .85em; padding: 1px 0; }
.ioCartFeeRow .ioCartFeeName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ioCartFeeRow .ioCartFeeAmount { flex: none; }

/* IO-27757: package contents listed under a package item in the cart */
.ioCartPackageContents { margin: 2px 0 4px; padding-left: 16px; font-size: .8em; opacity: .8; }
.ioCartPackageContents li { margin: 0; list-style: disc; }

/* IO-27757: item-count bubble on the cart icon. Deliberately NOT the .ioCartSonar
   class — that legacy rule's ::before would override the FontAwesome glyph. */
.ioCartCount { position: relative; }
.ioCartCount:not([cnt="0"]):not([cnt=""])::after {
    content: attr(cnt);
    position: absolute;
    right: -9px;
    top: -9px;
    z-index: 3;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-style: normal;
    color: #fff;
    background-color: var(--e-global-color-accent, green);
    border-radius: 999px;
}

.ioCartSonar:not([cnt="0"]):before {
    content: "";
    width: 20px;
    height: 20px;
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: var(--e-global-color-accent,green);
    border-radius: 30px;
    right: 0;
    isolation: isolate;
    --ring: var(--e-global-color-accent, green);
    --sonar-scale: 2.6;
    --sonar-time: 2s;
    animation: sonar-pulse 1.8s ease-in-out infinite;
    border: 2px solid var(--ring);
    animation: cart_sonar var(--sonar-time) ease-out infinite;
}

@keyframes cart_sonar{
    from { transform: scale(1); opacity: .55; }
    80%  { opacity: 0; }
    to   { transform: scale(var(--sonar-scale)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
    .ioCartSonar::after, .ioCartSonar::before { animation: none; opacity: 0; }
}

#ioCartLoadingOverlay,
#ioCartConsentOverlay
{
    display:none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(255,255,255,0.8);
    z-index: 10000;
    align-items:center;
    justify-content:center;
}
#ioCartConsentOverlay {
    background: rgba(255, 255, 255, 0.95);
    flex-direction: column;
    padding: 20px;
}
.io-consent-content {
    text-align: center;
    max-width: 80%;
}
#ioCartLoadingOverlay .io-spinner,
.io-filter-overlay .io-spinner
{
    width:48px;
    height:48px;
    border:4px solid rgba(0,0,0,0.1);
    border-top-color: var( --e-global-color-accent, green);
    border-radius:50%;
    animation: ioSpin 0.8s linear infinite;
}
@keyframes ioSpin
{
    to
    {
        transform: rotate(360deg);
    }
}

/* Hide sections with empty content (valid CSS only) */
.io_item_dimensions:empty,
.io_item_footprint:empty,
.io_item_capacity:empty {
    display: none !important;
}

/* Note: Hiding sections with zero values and rating logic is handled by JavaScript in io_category_shortcode.html */

/* New Labeled List View Styles */
.io_catdiv2.list-view .io_item2_list {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.io_item_description_line {
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    display: -webkit-box;
    color: #666;
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-width: 100%;
}

.io_item_details_labeled {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
    flex: 1;
}

.io_detail_item {
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.9em;
    line-height: 1.5;
}

.io_detail_label {
    font-weight: 600;
    color: #666;
    min-width: 80px;
    flex-shrink: 0;
}

.io_detail_value {
    color: #333;
    flex: 1;
}

.io_buttons_container {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 2px;
}

.io_more_info_button {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    display: inline-block;
    background-color: var( --e-global-color-primary, #2b78e4);
    color: white !important;
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
    margin: 0;
}

.io_more_info_button:hover {
    filter: brightness(0.85);
    color: white !important;
}

/* Hide MORE INFO button in tile view (shown only in list view) */
.io_more_info_button {
    display: none;
}

.io_catdiv2.list-view .io_more_info_button {
    display: inline-block;
}

/* Center Add to Cart button in tile view */
.io_buttons_container {
    justify-content: center;
}

/* Left-align buttons in list view */
.io_catdiv2.list-view .io_buttons_container {
    justify-content: flex-start;
}

/* Adjust list view content layout */
.io_catdiv2.list-view .io_list_view_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Hide View Product button in list view */
.io_catdiv2.list-view .view-product-button {
    display: none !important;
}

/* Make description line full width and allow text wrapping in list view */
.io_catdiv2.list-view .io_item_description_line {
    white-space: normal;
    width: 100%;
}

/* Hide old emoji-based detail styles in list view */
.io_catdiv2.list-view .io_item_details {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .io_catdiv2.list-view {
        max-width: 100%;
        margin: 20px;
    }

    .io_catdiv2.list-view .io_item2_list {
        flex-direction: column;
    }

    .io_catdiv2.list-view .cat_div {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 15px;
    }

    .io_detail_label {
        min-width: 70px;
    }
}

.io-checking-availability {
    position: relative;
}

.io-cart-initializing {
    cursor: wait !important;
    filter: grayscale(50%);
    opacity: 0.5;
    pointer-events: none;
}

.io-checking-availability::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--e-global-color-accent, green);
    border-radius: 50%;
    animation: io-spin 1s linear infinite;
}

@keyframes io-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes io-pulse {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

/* Grey out add-to-cart buttons while checking availability */
.io-checking-availability .item_add,
.io-checking-availability .item_add_off,
.io_product_container.io-checking-availability .item_add,
.io_product_container.io-checking-availability .item_add_off {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(50%);
    position: relative;
}

.io-checking-availability .item_add::after,
.io_product_container.io-checking-availability .item_add::after {
    content: " ...";
    display: inline;
    animation: io-pulse 1.4s infinite ease-in-out;
}

.io_set_date_alert{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}
.io_set_date_alert p{
    white-space: nowrap;
}

.item_add_set_date {
    cursor: pointer;
}

/* Client Credentials (CC) confirmation modal */
#wo_confirm_modal.wo-cc-modal-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wo-cc-modal-box
{
    background: #fff;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.wo-cc-modal-text
{
    margin: 0 0 12px;
    font-size: 15px;
}

.wo-cc-modal-warning
{
    margin: 0 0 24px;
    font-size: 16px;
    font-weight: 700;
    color: #c00;
}

.wo-cc-btn-confirm
{
    background: #c00;
    color: #fff;
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 3px;
}

.wo-cc-btn-cancel
{
    background: #eee;
    color: #333;
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
}

.mbsc-ios.mbsc-selected .mbsc-calendar-cell-text{
    background-color: var( --e-global-color-accent, green) !important;
    border-color: var(--e-global-color-accent, green) !important;
}

.mbsc-ios.mbsc-calendar-today,
.mbsc-ios.mbsc-range-control-value.active{
    color: var(--e-global-color-accent, green) !important;
}

#cartCalendar .mbsc-ios.mbsc-selected .mbsc-calendar-today {
    color: #000 !important;
}

.mbsc-icon>svg {
    fill: var(--e-global-color-accent, green) !important;
}

#cartCalendar .mbsc-ios.mbsc-range-day:after {
    background-color: var(--e-global-color-accent, green) !important;
    opacity: .25 !important;
}

/* The hosted calendar's day numbers sit lower and larger than Mobiscroll expects (cell padding, 2.1rem circles), so
   the range band and the grey dashed range preview (shown while the end date is being chosen) follow them instead of
   the theme's default offset, which left both riding high and short; their rounded ends match the circle too. */
.io-cart-calendar-inline #cartCalendar .mbsc-range-day:after,
.io-cart-calendar-inline #cartCalendar .mbsc-range-hover:before {
    bottom: auto;
    height: calc(2.1rem + 4px); /* the day number's box: 2.1rem plus its 2px top and bottom borders */
    top: calc(.4rem + .065625rem); /* cell padding plus the day number's top margin */
}

.io-cart-calendar-inline #cartCalendar .mbsc-range-day-start.mbsc-ltr:after,
.io-cart-calendar-inline #cartCalendar .mbsc-range-day-end.mbsc-rtl:after,
.io-cart-calendar-inline #cartCalendar .mbsc-range-hover-start.mbsc-ltr:before,
.io-cart-calendar-inline #cartCalendar .mbsc-range-hover-end.mbsc-rtl:before {
    border-radius: calc(2.1rem + 4px) 0 0 calc(2.1rem + 4px);
    margin-left: calc(-1.05rem - 2px); /* half the day number's box */
}

.io-cart-calendar-inline #cartCalendar .mbsc-range-day-end.mbsc-ltr:after,
.io-cart-calendar-inline #cartCalendar .mbsc-range-day-start.mbsc-rtl:after,
.io-cart-calendar-inline #cartCalendar .mbsc-range-hover-end.mbsc-ltr:before,
.io-cart-calendar-inline #cartCalendar .mbsc-range-hover-start.mbsc-rtl:before {
    border-radius: 0 calc(2.1rem + 4px) calc(2.1rem + 4px) 0;
    margin-right: calc(-1.05rem - 2px);
}

#cartCalendar .mbsc-calendar-cell-inner {
    position: relative;
}

#cartCalendar .io-cart-calendar-day-details {
    display: block;
    line-height: 1;
    min-height: 0.8em;
    text-align: center;
}

#cartCalendar .mbsc-calendar-cell-inner:has(.io-cart-availability-warning) .mbsc-calendar-day-text {
    background-color: #c62828 !important;
    border-color: #c62828 !important;
    color: #fff !important;
    font-weight: 600;
}

#cartCalendar .io-cart-availability-warning {
    background: transparent;
    cursor: help;
    display: block;
    height: 1.85em;
    left: 50%;
    position: absolute;
    top: 0.2em;
    transform: translateX(-50%);
    width: 1.85em;
    z-index: 1;
}

#cartCalendar .io-cart-calendar-day-price {
    display: block;
    font-size: 0.6em;
    margin-top: 0.15em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.io-item-pricing-tabs {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    display: inline-flex;
    gap: 0.2rem;
    margin: 0.75rem 0 1.1rem;
    padding: 0.25rem;
}

.io-item-pricing-tab {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #4b5563;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.65rem 1.1rem;
    transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.io-item-pricing-tabs .io-item-pricing-tab:not(.is-active),
.io-item-pricing-tabs .io-item-pricing-tab:not(.is-active):hover,
.io-item-pricing-tabs .io-item-pricing-tab:not(.is-active):focus {
    background: transparent;
}

.io-item-pricing-tabs .io-item-pricing-tab.is-active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
    color: var(--e-global-color-accent, #398900);
}

.io-item-pricing-tab:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #398900);
    outline-offset: 2px;
}

.io-item-pricing-calendar-panel {
    margin: 0.25rem 0 1.5rem;
    max-width: 44rem;
    width: 100%;
}

.io-item-pricing-range-summary {
    align-items: center;
    background: linear-gradient(135deg, rgba(82, 194, 0, 0.1), rgba(82, 194, 0, 0.04));
    border: 1px solid rgba(82, 194, 0, 0.3);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem;
}

.io-item-pricing-range-summary[hidden] {
    display: none;
}

.io-item-pricing-range-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.io-item-pricing-range-copy > strong {
    color: #111827;
    font-size: 0.92rem;
}

.io-item-pricing-range-dates {
    color: #6b7280;
    font-size: 0.8rem;
}

.io-item-pricing-range-total {
    color: var(--e-global-color-accent, #398900);
    font-size: 1.35rem;
    line-height: 1;
    white-space: nowrap;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-datepicker-inline {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar,
:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-slide {
    background: #fff;
    color: #111827;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-controls {
    padding: 0.35rem 0.5rem 0;
}

#ioItemPricingCalendar .mbsc-calendar-button,
#ioItemPricingCalendar .mbsc-calendar-button:hover,
#ioItemPricingCalendar .mbsc-calendar-button:focus,
#cartCalendar .mbsc-calendar-button,
#cartCalendar .mbsc-calendar-button:hover,
#cartCalendar .mbsc-calendar-button:focus {
    background: transparent;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-week-day {
    font-size: 0.82rem;
    padding-bottom: 0.35rem;
    padding-top: 0.35rem;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-day {
    cursor: pointer;
}

#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-range-control-wrapper {
    display: none;
}

#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-range-day:after {
    background: transparent !important;
    border-top: 1px dashed var(--e-global-color-accent, green);
    border-bottom: 1px dashed var(--e-global-color-accent, green);
    border-radius: 0;
    height: 2.1rem;
    left: 0;
    right: 0;
    margin: 0;
    opacity: .7;
    top: calc(.4rem + .065625rem);
    pointer-events: none;
}

#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-range-day-start.mbsc-ltr:after,
#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-range-day-end.mbsc-rtl:after {
    left: calc(50% - 1.05rem);
    margin-left: 0;
    border-left: 1px dashed var(--e-global-color-accent, green);
    border-radius: 1.05rem 0 0 1.05rem;
}

#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-range-day-end.mbsc-ltr:after,
#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-range-day-start.mbsc-rtl:after {
    right: calc(50% - 1.05rem);
    margin-right: 0;
    border-right: 1px dashed var(--e-global-color-accent, green);
    border-radius: 0 1.05rem 1.05rem 0;
}

#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-range-hover:before {
    display: none;
}

/* Past days stay visible in Mobiscroll's disabled styling (like the cart calendar) instead of leaving a blank month. */
#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-calendar-day:has(.io-item-pricing-past-date) {
    pointer-events: none;
}

#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-range-day .mbsc-calendar-day-text,
#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-ios.mbsc-selected .mbsc-calendar-cell-text {
    background: transparent !important;
    border: 1px solid var(--e-global-color-accent, green) !important;
    box-sizing: border-box;
    color: #111827;
}

#ioItemPricingCalendar:not(.mbsc-datepicker-control-timegrid) .mbsc-ios.mbsc-selected .mbsc-calendar-today {
    color: #000 !important;
}

#ioItemPricingCalendar .mbsc-calendar-cell-inner {
    position: relative;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-day-inner {
    box-sizing: border-box;
    min-height: 4.5rem;
    padding-bottom: 0.4rem;
    padding-top: 0.4rem;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-day-text {
    font-size: 1.05rem;
    font-weight: 700;
    height: 2.1rem;
    line-height: 2.1rem;
    margin: .065625rem .065625rem 0;
    width: 2.1rem;
}

/* Hosted calendars use larger day circles than Mobiscroll's default 30px range strip. Keep their outer sizes
   equal and include the day-inner border, padding and top margin when positioning the strip. */
.io-cart-calendar-inline #cartCalendar .mbsc-calendar-day-text {
    box-sizing: border-box;
    line-height: calc(2.1rem - 4px);
}

.io-cart-calendar-inline #cartCalendar .mbsc-range-day:after {
    height: 2.1rem;
    top: calc(.4rem + .065625rem + 1px);
}

.io-cart-calendar-inline #cartCalendar .mbsc-range-day-start.mbsc-ltr:after,
.io-cart-calendar-inline #cartCalendar .mbsc-range-day-end.mbsc-rtl:after {
    margin-left: -1.05rem;
    border-radius: 1.05rem 0 0 1.05rem;
}

.io-cart-calendar-inline #cartCalendar .mbsc-range-day-end.mbsc-ltr:after,
.io-cart-calendar-inline #cartCalendar .mbsc-range-day-start.mbsc-rtl:after {
    margin-right: -1.05rem;
    border-radius: 0 1.05rem 1.05rem 0;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .io-item-pricing-calendar-day-details {
    display: block;
    line-height: 1.15;
    min-height: 1rem;
    text-align: center;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-cell-inner:has(.io-item-pricing-availability-warning) .mbsc-calendar-day-text {
    background-color: #c62828 !important;
    border-color: #c62828 !important;
    color: #fff !important;
    font-weight: 700;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-day:has(.io-item-pricing-invalid-date) {
    cursor: not-allowed;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .mbsc-calendar-day:has(.io-item-pricing-invalid-date) .mbsc-calendar-day-text {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
}

.io-item-pricing-calendar-message {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .io-item-pricing-availability-warning {
    background: transparent;
    display: block;
    height: 1.85em;
    left: 50%;
    position: absolute;
    top: 0.2em;
    transform: translateX(-50%);
    width: 1.85em;
    z-index: 1;
}

:is(#ioItemPricingCalendar, .io-cart-calendar-inline #cartCalendar) .io-item-pricing-calendar-price {
    display: block;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    margin-top: 0.15rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.io-item-pricing-calendar-legend {
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: 1rem;
    margin-top: 0.75rem;
}

.io-item-pricing-calendar-legend span {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.io-item-pricing-legend-swatch {
    background: var(--e-global-color-accent, #398900);
    border-radius: 50%;
    display: inline-block;
    height: 0.7rem;
    width: 0.7rem;
}

.io-item-pricing-legend-swatch.is-selected {
    opacity: 0.65;
}

.io-item-pricing-legend-swatch.is-unavailable {
    background: #c62828;
    opacity: 1;
}

/* A product page that shows its pricing calendar hosts the cart calendar itself (one calendar per page). The block keeps
   the product calendar's light card instead of the popover's dark chrome; the popover offers "Change dates" instead. */
.io-cart-calendar-inline #cartCloseButton {
    display: none;
}

.io-cart-calendar-inline #cartCalendar {
    padding: 0;
}

.io-cart-calendar-inline #cartCalendar > div {
    margin: 0;
    width: 100%;
}

.io-cart-calendar-inline #cartCalendar > div > div {
    color: inherit;
}

.io-cart-calendar-inline .io-cart-calendar-actions {
    padding: 12px 0 0;
}

.io-cart-calendar-inline #cartCalendarContinueWarning {
    color: #b45309;
}

/* Keep dates and times beside each other in narrow product columns and carts. The month takes the remaining
   width instead of Mobiscroll's fixed 18.5em; only the smallest hosts stack to keep the dates readable. */
#cartCalendar {
    container-type: inline-size;
}

#cartCalendar.mbsc-datepicker-control-time .mbsc-datepicker-tab-wrapper,
#cartCalendar .mbsc-datepicker-control-time .mbsc-datepicker-tab-wrapper {
    flex-wrap: nowrap !important;
    min-width: 0;
    width: 100%;
}

#cartCalendar .mbsc-datepicker-tab-calendar {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

#cartCalendar .mbsc-datepicker-tab-time {
    flex: 0 0 auto;
    width: auto;
}

#cartCalendar .mbsc-calendar {
    max-width: none;
    width: 100%;
}

.io-cart-calendar-inline {
    container-type: inline-size;
}

@container (max-width: 359px) {
    #cartCalendar.mbsc-datepicker-control-time .mbsc-datepicker-tab-wrapper,
    #cartCalendar .mbsc-datepicker-control-time .mbsc-datepicker-tab-wrapper {
        flex-wrap: wrap !important;
    }

    #cartCalendar .mbsc-datepicker-tab-calendar,
    #cartCalendar .mbsc-datepicker-tab-time {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* The Compact style collapses the hosted calendar behind its toggle; the Apply row waits with it, but IO's Add to Cart
   (hosted under the calendar on product pages) stays reachable. */
.io-cart-calendar-inline:not(.io-cart-calendar-books):has(#cartCalendar.iox-mb-collapsed) .io-cart-calendar-actions,
.io-cart-calendar-inline.io-cart-calendar-books:has(#cartCalendar.iox-mb-collapsed) #cartCalendarContinueWarning {
    display: none;
}

/* On product pages IO's own Add to Cart sits where Apply dates was: it applies the picked dates and adds the item. */
.io-cart-calendar-books #cartCalendarContinueContainer .elementor-widget-button {
    margin: 0;
}

.io-cart-calendar-books #cartCalendarContinueContainer .item_add,
.io-cart-calendar-books #cartCalendarContinueContainer .item_add_set_date,
.io-cart-calendar-books #cartCalendarContinueContainer .item_add_off {
    box-sizing: border-box;
    display: block;
    text-align: center;
    width: 100%;
}

.io-cart-calendar-books #cartCalendarContinueContainer [class*="unavailable_message"] {
    margin-top: 6px;
    text-align: center;
}

/* The Range style moves the hosted pricing block (tabs, table, calendar) to a full-width row under the gallery. */
.io-item-pricing-row {
    box-sizing: border-box;
    clear: both;
    display: block;
    padding: 10px;
    width: 100%;
}

.simpleCart_ioShelfItem.iox-pl-on > .io-item-pricing-row {
    grid-column: 1 / -1;
}

.io-item-pricing-row .io-item-pricing-calendar-panel {
    max-width: 66rem;
}

.io-item-pricing-calendar-panel {
    border-radius: 14px;
}

.io-item-pricing-calendar-panel.is-attention {
    animation: io-item-pricing-calendar-attention 1.8s ease-out;
}

@keyframes io-item-pricing-calendar-attention {
    0% {
        box-shadow: 0 0 0 4px rgba(82, 194, 0, 0.55);
    }
    100% {
        box-shadow: 0 0 0 14px rgba(82, 194, 0, 0);
    }
}

#cartDateRange .io-cart-change-dates {
    display: block;
    font-size: 0.8em;
    margin-top: 2px;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .io-item-pricing-tabs {
        display: flex;
        width: 100%;
    }

    .io-item-pricing-tab {
        flex: 1;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .io-item-pricing-range-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.65rem;
    }
}

#cartCalendar .mbsc-datepicker-tab-time .mbsc-ios.mbsc-scroller-wheel-line {
    background: var(--e-global-color-accent, green) !important;
    opacity: .25!important;
}

#cartCalendar .mbsc-datepicker-tab-time .mbsc-ios.mbsc-scroller-wheel-item.mbsc-hover,
#cartCalendar .mbsc-datepicker-tab-time .mbsc-ios.mbsc-scroller-wheel-item:hover {
    background-color: var(--e-global-color-accent, green) !important;
}

#cartCalendar .mbsc-datepicker-tab-time .mbsc-scroller-wheel-item.mbsc-disabled {
    visibility: hidden;
}

@media (max-width: 450px) {
    #cartPopover {
        border-right: 0;
        box-sizing: border-box;
        max-width: 100vw;
        right: 0;
        width: 100vw;
    }

    #cartPopover.ioCartCalendarOpen {
        max-height: calc(100dvh - 63px);
    }

    /* Reserve room for Continue while the calendar and time wheels scroll. */
    #cartPopover.ioCartCalendarOpen #cartCalendarTimePickerContainer {
        display: flex !important;
        flex-direction: column;
        max-height: calc(100vh - 63px);
        max-height: calc(100dvh - 63px);
    }

    #cartPopover.ioCartCalendarOpen #cartCalendar {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow-y: auto;
    }

    #cartPopover.ioCartCalendarOpen .io-cart-calendar-actions {
        flex: 0 0 auto;
        background: var(--io-cart-surface);
    }

    #cartCalendarTimePickerContainer,
    #cartCalendar {
        box-sizing: border-box;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    #cartCalendar > div {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    /* Let the controls size naturally inside the scrolling calendar.
       Percentage heights can otherwise squeeze the Start/End row to zero. */
    #cartCalendar .mbsc-datepicker-inline,
    #cartCalendar .mbsc-datepicker-tab-expand {
        height: auto;
    }

    #cartCalendar .mbsc-range-control-wrapper,
    #cartCalendar .mbsc-datepicker-tab-wrapper {
        flex: 0 0 auto;
    }

    #cartCalendar .mbsc-calendar {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    #cartCalendar .mbsc-datepicker-control-calendar.mbsc-datepicker-control-time
    .mbsc-range-control-wrapper .mbsc-segmented {
        max-width: 100%;
        width: 100%;
    }

    .io-cart-calendar-actions {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        text-align: center;
    }

    #cartCalendarContinueContainer {
        min-width: 0;
        width: 100%;
    }
}

.cmplz-document .cookie-statement{
    margin: auto;
}

.io-reviews-carousel{
    font-family: var(--e-global-typography-text-font-family);
}

.io-review-logo{
    width: 20px;
    height: 20px;
    margin-right: 0.5em;
    object-fit:contain;
}

/* The Start / End values ("12/03/26 3:00 pm") share a narrow segmented button with the clear icon. Mobiscroll cuts them to
   "12/03/26 3:0…" when they do not fit; on phones the time was lost. Let the value wrap onto a second line (date, then time)
   and let the button grow with it. Where it fits on one line nothing changes. */
#cartCalendar .mbsc-range-control-wrapper .mbsc-segmented-button {
    height: auto;
    min-height: 56px;
    white-space: normal;
}

#cartCalendar .mbsc-range-control-wrapper .mbsc-button-txt {
    height: auto;
    white-space: normal;
}

#cartCalendar .mbsc-range-control-value {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-wrap: balance; /* two even lines: the date, then the whole time, never "4:00 / am" */
}

@media (max-width: 599px) {
    #cartCalendar .mbsc-range-control-wrapper .mbsc-segmented-button {
        padding-right: 30px; /* the clear icon is 17px wide; leave the value the rest */
    }
}