/*
 * Tenant theme API. Define custom properties on :root or body so they also
 * reach the desktop panel and toast, which are portaled outside the card.
 * See protected/views/fast-add-to-cart/README.md for the supported variables.
 */
.fastAddToCartV2Trigger {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--fast-add-font-family, inherit);
    font-size: var(--fast-add-trigger-font-size, 12px);
    font-weight: var(--fast-add-trigger-font-weight, 600);
    justify-content: center;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    z-index: 3;
}

.fastAddToCartV2Trigger--icon {
    background: var(--fast-add-trigger-background, #fff);
    border: 1px solid var(--fast-add-trigger-border-color, rgba(0, 0, 0, .06));
    border-radius: var(--fast-add-trigger-radius, 50%);
    bottom: var(--fast-add-trigger-offset, 16px);
    box-shadow: var(--fast-add-trigger-shadow, none);
    color: var(--fast-add-trigger-color, #111);
    height: var(--fast-add-trigger-size, 38px);
    padding: 0;
    position: absolute;
    right: var(--fast-add-trigger-offset, 16px);
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    width: var(--fast-add-trigger-size, 38px);
}

.fastAddToCartV2TriggerIcon {
    background-image: var(--fast-add-trigger-icon-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: var(--fast-add-trigger-icon-size, 14px);
    position: relative;
    width: var(--fast-add-trigger-icon-size, 14px);
}

.fastAddToCartV2TriggerIcon::before,
.fastAddToCartV2TriggerIcon::after {
    background: currentColor;
    border-radius: 2px;
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: var(--fast-add-trigger-default-icon-opacity, 1);
}

.fastAddToCartV2TriggerIcon::before {
    height: 2px;
    width: 14px;
}

.fastAddToCartV2TriggerIcon::after {
    height: 14px;
    width: 2px;
}

.fastAddToCartV2Trigger--icon .fastAddToCartV2TriggerText,
.fastAddToCartV2Trigger--text .fastAddToCartV2TriggerIcon {
    display: none;
}

.fastAddToCartV2Trigger--text {
    background: var(--fast-add-button-background-color, var(--fast-add-trigger-background, var(--fast-add-primary-color, #79002d)));
    border: 1px solid var(--fast-add-button-border-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d)));
    border-radius: var(--fast-add-button-border-radius, var(--fast-add-trigger-radius, 4px));
    color: var(--fast-add-button-text-color, var(--fast-add-trigger-color, var(--fast-add-primary-text-color, #fff)));
    min-height: 36px;
    padding: 8px 16px;
    position: relative;
}

@media (hover: hover) {
    .fastAddToCartV2Trigger--icon:hover {
        background: var(--fast-add-trigger-hover-background, var(--fast-add-trigger-background, #fff));
        border-color: var(--fast-add-trigger-hover-border-color, var(--fast-add-trigger-border-color, rgba(0, 0, 0, .06)));
        box-shadow: var(--fast-add-trigger-hover-shadow, none);
        color: var(--fast-add-trigger-hover-color, var(--fast-add-trigger-color, #111));
        transform: var(--fast-add-trigger-hover-transform, none);
    }
}

.fastAddToCartV2Trigger--icon:active {
    transform: scale(.96);
}

.fastAddToCartV2Trigger:focus-visible,
#fastAddToCartV2Panel button:focus-visible,
#fastAddToCartV2Panel select:focus-visible,
#fastAddToCartV2Panel input:focus-visible {
    outline: 2px solid var(--fast-add-focus-color, #2185d0);
    outline-offset: 2px;
}

#fastAddToCartV2Toast {
    background: var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d));
    border: 1px solid var(--fast-add-button-border-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d)));
    border-radius: var(--fast-add-button-border-radius, var(--fast-add-trigger-radius, 4px));
    box-shadow: var(--fast-add-toast-shadow, 0 8px 24px rgba(0, 0, 0, .2));
    box-sizing: border-box;
    color: var(--fast-add-button-text-color, var(--fast-add-primary-text-color, #fff));
    font-family: var(--fast-add-font-family, inherit);
    font-size: var(--fast-add-font-size, 13px);
    line-height: 1.35;
    max-width: calc(100% - 32px);
    opacity: 0;
    padding: 12px 18px;
    pointer-events: none;
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    top: calc(16px + env(safe-area-inset-top, 0px));
    transform: translate3d(calc(100% + 32px), 0, 0);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
    visibility: hidden;
    z-index: var(--fast-add-toast-z-index, 100000);
}

#fastAddToCartV2Toast.open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
    visibility: visible;
}

#fastAddToCartV2Toast.fastAddToCartV2Toast--interactive {
    pointer-events: auto;
}

#fastAddToCartV2Toast .fastAddToCartConfirmationPrimary {
    display: block;
    font-weight: 600;
}

#fastAddToCartV2Toast .fastAddToCartPromotionMessage {
    align-items: center;
    color: inherit;
    display: flex;
    font-size: .88em;
    gap: 6px;
    margin-top: 4px;
    max-width: 100%;
    min-width: 0;
    opacity: .9;
    text-decoration: none;
}

#fastAddToCartV2Toast .fastAddToCartPromotionMessageText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#fastAddToCartV2Toast .fastAddToCartPromotionMessageArrow {
    flex: 0 0 auto;
    font-size: 1.25em;
    line-height: 1;
}

#fastAddToCartV2Toast a.fastAddToCartPromotionMessage:hover,
#fastAddToCartV2Toast a.fastAddToCartPromotionMessage:focus-visible {
    color: inherit;
    text-decoration: underline;
}

.fastAddToCartV2HostPositioned {
    position: relative;
}

.fastAddToCartV2CardHost {
    position: absolute;
    pointer-events: none;
    overflow: hidden;
    z-index: var(--fast-add-local-panel-z-index, 50);
}

.fastAddToCartV2CardHost #fastAddToCartV2Panel {
    pointer-events: auto;
}

#fastAddToCartV2Backdrop {
    background: rgba(0, 0, 0, .42);
    bottom: 0;
    display: none;
    inset: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: var(--fast-add-backdrop-z-index, 99998);
}

#fastAddToCartV2Backdrop.open {
    display: block;
}

#fastAddToCartV2Panel {
    background: var(--fast-add-panel-background, #fff);
    border: 1px solid var(--fast-add-border-color, #e5e5e5);
    border-radius: var(--fast-add-panel-radius, 8px);
    box-shadow: var(--fast-add-panel-shadow, none);
    box-sizing: border-box;
    color: var(--fast-add-text-color, #202020);
    display: none;
    font-family: var(--fast-add-font-family, inherit);
    font-size: var(--fast-add-font-size, 13px);
    max-height: calc(100% - 24px);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px;
    text-align: left;
}

/* Checkout's global .desktop/.mobile utilities use !important. Keep the
 * panel in block flow and ensure those utilities cannot reveal a closed panel. */
#fastAddToCartV2Panel:not(.open) {
    display: none !important;
}

#fastAddToCartV2Panel.open {
    display: block !important;
}

#fastAddToCartV2Panel.desktop {
    bottom: 12px;
    left: 12px;
    position: absolute;
    right: 12px;
    width: auto;
    z-index: var(--fast-add-local-panel-z-index, 50);
}

#fastAddToCartV2Panel.desktop.fastAddToCartV2Portaled {
    z-index: var(--fast-add-panel-z-index, 3);
}

#fastAddToCartV2Panel.mobile {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    left: 0;
    max-height: 85vh;
    max-height: min(85vh, 680px);
    padding: 16px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    position: fixed;
    right: 0;
    width: 100%;
    z-index: var(--fast-add-mobile-panel-z-index, 99999);
}

body.fastAddToCartV2BodyOpen {
    overflow: hidden;
}

.fastAddToCartV2Close {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    height: 26px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 6px;
    top: 4px;
    width: 26px;
}

.fastAddToCartV2ProductTitle {
    font-size: var(--fast-add-title-font-size, 16px);
    font-weight: var(--fast-add-title-font-weight, 400);
    line-height: 1.3;
    margin: 0 28px 10px 0;
}

.fastAddToCartV2ProductTitleSpecs {
    font-weight: var(--fast-add-title-spec-font-weight, 700);
}

.fastAddToCartV2ProductTitle:empty {
    display: none;
}

.fastAddToCartV2Status {
    color: var(--fast-add-muted-color, #6b6b6b);
    font-size: 12px;
    min-height: 0;
}

#fastAddToCartV2Panel.loading .fastAddToCartV2Status {
    min-height: 40px;
    padding: 12px 0;
    text-align: center;
}

.fastAddToCartV2Group + .fastAddToCartV2Group {
    margin-top: 8px;
}

.fastAddToCartV2GroupTitle {
    font-size: var(--fast-add-group-title-font-size, 14px);
    font-weight: var(--fast-add-group-title-font-weight, 400);
    margin-bottom: 8px;
    text-transform: none;
}

.fastAddToCartV2SelectWrapper {
    position: relative;
}

.fastAddToCartV2SelectWrapper::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--fast-add-select-arrow-color, rgba(32, 32, 32, .6));
    content: "";
    margin-top: -3px;
    pointer-events: none;
    position: absolute;
    right: 14px;
    top: 50%;
}

.fastAddToCartV2Select {
    appearance: none;
    background-color: var(--fast-add-control-background, #fff);
    border: 1px solid var(--fast-add-border-color, #dedede);
    border-radius: var(--fast-add-control-radius, 6px);
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    font-size: var(--fast-add-select-font-size, 13px);
    height: 40px;
    padding: 0 36px 0 10px;
    width: 100%;
}

.fastAddToCartV2Select--placeholder {
    color: var(--fast-add-placeholder-color, rgba(32, 32, 32, .55));
}

.fastAddToCartV2Select option {
    color: var(--fast-add-text-color, #202020);
}

.fastAddToCartV2Select option[value=""] {
    color: var(--fast-add-placeholder-color, rgba(32, 32, 32, .55));
}

.fastAddToCartV2ButtonOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.fastAddToCartV2Option {
    appearance: none;
    background: var(--fast-add-option-background, transparent);
    border: 1px solid transparent;
    border-radius: var(--fast-add-option-radius, 3px);
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: var(--fast-add-option-font-size, 12px);
    line-height: 1.2;
    min-height: 30px;
    min-width: 36px;
    padding: 5px 8px;
}

.fastAddToCartV2Option:hover:not(:disabled),
.fastAddToCartV2Option.selected {
    background: var(--fast-add-option-selected-background, #f4eeeb);
    border-color: var(--fast-add-option-selected-border, #f4eeeb);
}

.fastAddToCartV2Option:disabled {
    background: var(--fast-add-disabled-background, #f2f2f2);
    border-color: var(--fast-add-disabled-border-color, #dedede);
    color: var(--fast-add-disabled-color, #b9b9b9);
    cursor: not-allowed;
    opacity: .8;
    text-decoration: line-through;
}

.fastAddToCartV2Select option:disabled {
    background-color: var(--fast-add-disabled-background, #f2f2f2);
    color: var(--fast-add-disabled-color, #999);
}

.fastAddToCartV2Price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.fastAddToCartV2CurrentPrice {
    font-size: 16px;
    font-weight: 700;
}

.fastAddToCartV2OldPrice {
    color: var(--fast-add-muted-color, #777);
    font-size: 12px;
    text-decoration: line-through;
}

.fastAddToCartV2Preorder {
    background: var(--fast-add-preorder-background, #fff4d8);
    border-radius: var(--fast-add-preorder-radius, 4px);
    color: var(--fast-add-preorder-color, #6b4b00);
    font-size: 11px;
    margin-top: 8px;
    overflow: hidden;
    padding: 6px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fastAddToCartV2Message {
    color: var(--fast-add-muted-color, #666);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 8px;
}

.fastAddToCartV2Actions {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(82px, .85fr) minmax(0, 1.15fr);
    margin-top: 12px;
    min-width: 0;
}

.fastAddToCartV2QuantityWithUnit {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.fastAddToCartV2Quantity {
    border: 1px solid var(--fast-add-border-color, #dedede);
    border-radius: var(--fast-add-control-radius, 6px);
    display: grid;
    font-size: 12px;
    grid-template-columns: 28px minmax(26px, 1fr) 28px;
    height: 38px;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 82px;
    width: auto;
}

.fastAddToCartV2QuantityUnit {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.fastAddToCartV2Quantity button,
.fastAddToCartV2Quantity input {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    min-width: 0;
    padding: 0;
    text-align: center;
}

.fastAddToCartV2Quantity button {
    cursor: pointer;
}

.fastAddToCartV2Quantity input {
    width: 100%;
}

/* Focus the quantity group as a whole instead of outlining the number field. */
#fastAddToCartV2Panel .fastAddToCartV2Quantity:focus-within {
    border-color: var(--fast-add-quantity-focus-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d)));
}

#fastAddToCartV2Panel .fastAddToCartV2Quantity input:focus {
    outline: none;
    box-shadow: none;
}

/* Keep the individual +/- keyboard target visible inside the clipped group. */
#fastAddToCartV2Panel .fastAddToCartV2Quantity button:focus-visible {
    outline-color: var(--fast-add-quantity-focus-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d)));
    outline-offset: -3px;
}

.fastAddToCartV2Primary {
    appearance: none;
    background: var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d));
    border: 1px solid var(--fast-add-button-border-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d)));
    border-radius: var(--fast-add-button-border-radius, var(--fast-add-control-radius, 6px));
    box-sizing: border-box;
    color: var(--fast-add-button-text-color, var(--fast-add-primary-text-color, #fff));
    cursor: pointer;
    font: inherit;
    font-size: var(--fast-add-button-font-size, 12px);
    font-weight: var(--fast-add-button-font-weight, 700);
    min-height: 38px;
    min-width: 0;
    padding: 6px 10px;
    width: 100%;
}

.fastAddToCartV2Primary.viewProduct {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d));
    display: inline;
    font-size: var(--fast-add-unsupported-font-size, 14px);
    font-weight: var(--fast-add-view-product-font-weight, 400);
    min-height: 0;
    padding: 0;
    text-align: left;
    width: auto;
}

.fastAddToCartV2Primary:disabled:not(.loading) {
    background: var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d));
    border-color: var(--fast-add-button-border-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d)));
    color: var(--fast-add-button-text-color, var(--fast-add-primary-text-color, #fff));
    cursor: not-allowed;
    opacity: var(--fast-add-disabled-button-opacity, .45);
}

.fastAddToCartV2Primary.loading {
    cursor: not-allowed;
    opacity: .55;
}

#fastAddToCartV2Panel.fastAddToCartV2ViewProductMode .fastAddToCartV2Status,
#fastAddToCartV2Panel.fastAddToCartV2ViewProductMode .fastAddToCartV2Message {
    font-size: var(--fast-add-unsupported-font-size, 14px);
    line-height: 1.4;
}

#fastAddToCartV2Panel.fastAddToCartV2ViewProductMode .fastAddToCartV2Actions {
    display: block;
    margin-top: 10px;
}

@media (hover: hover) {
    .fastAddToCartV2Trigger--text:hover,
    .fastAddToCartV2Primary:not(:disabled):not(.viewProduct):hover {
        background: var(--fast-add-button-hover-background-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d)));
        border-color: var(--fast-add-button-hover-border-color, var(--fast-add-button-border-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d))));
        color: var(--fast-add-button-hover-text-color, var(--fast-add-button-text-color, var(--fast-add-primary-text-color, #fff)));
        filter: var(--fast-add-button-hover-filter, brightness(.9));
    }

    .fastAddToCartV2Primary.viewProduct:hover {
        background: transparent;
        color: var(--fast-add-view-product-hover-color, var(--fast-add-button-background-color, var(--fast-add-primary-color, #79002d)));
        filter: none;
        text-decoration: underline;
    }
}

@media (max-width: 768px) {
    .fastAddToCartV2Select {
        height: 44px;
    }

    .fastAddToCartV2Quantity,
    .fastAddToCartV2Primary {
        min-height: 42px;
    }
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal {
    padding: 10px;
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2ProductTitle {
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2ProductTitleSpecs {
    font-weight: 400;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Groups {
    margin-top: 16px;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2ProductTitle:not(:empty) ~ .fastAddToCartV2Groups {
    margin-top: 0;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Group + .fastAddToCartV2Group {
    margin-top: 6px;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2GroupTitle {
    font-size: 12px;
    margin-bottom: 4px;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Select {
    font-size: var(--fast-add-minimal-select-font-size, 12px);
    height: 34px;
    padding-left: 28px;
    padding-right: 28px;
    text-align: center;
    text-align-last: center;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Select option {
    font-size: var(--fast-add-minimal-select-font-size, 12px);
    text-align: left;
    text-align-last: auto;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Select--placeholder,
#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Select option[value=""] {
    color: #000;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Quantity input,
#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Quantity button {
    font-size: var(--fast-add-minimal-quantity-font-size, 12px);
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 6px;
}

#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Quantity,
#fastAddToCartV2Panel.fastAddToCartV2Minimal .fastAddToCartV2Primary:not(.viewProduct) {
    height: 34px;
    min-height: 34px;
}

@media (prefers-reduced-motion: reduce) {
    .fastAddToCartV2Trigger--icon,
    #fastAddToCartV2Toast {
        transition: none;
    }
}