/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
.add-to-cart-modal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 430px
}

.add-to-cart-modal .container {
    display: flex;
    align-items: center;
    height: 16px;
    font-family: "Lab Grotesque-Regular", Helvetica;
    font-weight: 400;
    color: #495565;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 16px
}

.add-to-cart-modal .delivery-date-wrapper {
    flex: 0 0 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.add-to-cart-modal .delivery-date {
    white-space: nowrap
}

.add-to-cart-modal .size-wrapper {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.add-to-cart-modal .size {
    white-space: nowrap
}

.add-to-cart-modal .stock-wrapper {
    flex: 0 0 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.add-to-cart-modal .stock {
    white-space: nowrap
}

.add-to-cart-modal .quantity-wrapper {
    flex: 0 0 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.add-to-cart-modal .quantity {
    white-space: nowrap
}

.add-to-cart-modal .div-wrapper {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.add-to-cart-modal .text-wrapper {
    white-space: nowrap
}

.add-to-cart-modal .div {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.add-to-cart-modal .container-2,
.add-to-cart-modal .container-7 {
    display: flex;
    align-items: center;
    height: 36px;
    border: 1px solid #e5e7eb
}

.add-to-cart-modal .container-2 {
    background-color: #f3f4f6
}

.add-to-cart-modal .container-7 {
    background-color: #fff;
    box-shadow: 0 1px 2px -1px #0000001a, 0 1px 3px #0000001a
}

.add-to-cart-modal .container-3,
.add-to-cart-modal .container-8 {
    flex: 0 0 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lab Grotesque-Regular", Helvetica;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px
}

.add-to-cart-modal .text-wrapper-2 {
    color: #99a1ae;
    white-space: nowrap
}

.add-to-cart-modal .text-wrapper-6 {
    color: #697282;
    white-space: nowrap
}

.add-to-cart-modal .container-4 {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.add-to-cart-modal .container-4>div:first-child {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    background-color: #101828;
    font-family: "Lab Grotesque-Regular", Helvetica;
    font-weight: 400;
    color: #fff;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 24px;
    white-space: nowrap
}

.add-to-cart-modal .rectangle,
.add-to-cart-modal .rectangle-2 {
    flex: 0 0 8px;
    height: 30px
}

.add-to-cart-modal .rectangle {
    background-color: #99a1af
}

.add-to-cart-modal .rectangle-2 {
    background-color: #00c850
}

.add-to-cart-modal .container-5,
.add-to-cart-modal .element-wrapper {
    flex: 0 0 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lab Grotesque-Regular", Helvetica;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px
}

.add-to-cart-modal .text-wrapper-4 {
    color: #99a1ae;
    white-space: nowrap
}

.add-to-cart-modal .element {
    color: #00c850;
    white-space: nowrap
}

.add-to-cart-modal .container-6,
.add-to-cart-modal .container-9 {
    flex: 0 0 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.add-to-cart-modal .number-input,
.add-to-cart-modal .number-input-2 {
    width: 56px;
    height: 28px;
    border-radius: 4px;
    border: .67px solid #d0d5db;
    font-family: "Lab Grotesque-Regular", Helvetica;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px;
    padding: 0;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield
}

.add-to-cart-modal .number-input {
    background-color: #f9fafb;
    color: #99a1ae
}

.add-to-cart-modal .number-input-2 {
    background-color: #fff;
    color: #354152
}

.add-to-cart-modal .number-input::-webkit-inner-spin-button,
.add-to-cart-modal .number-input::-webkit-outer-spin-button,
.add-to-cart-modal .number-input-2::-webkit-inner-spin-button,
.add-to-cart-modal .number-input-2::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.add-to-cart-modal .button-column {
    display: flex;
    flex-direction: column;
    gap: 0
}

.add-to-cart-modal .light-button {
    width: 20px;
    height: 14px;
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.add-to-cart-modal .light-button-up {
    border-radius: 3px 3px 0 0;
    border-bottom: none
}

.add-to-cart-modal .light-button-down {
    border-radius: 0 0 3px 3px
}

.add-to-cart-modal .light-button .fas {
    font-size: 8px;
    color: #6b7280
}

.add-to-cart-modal .light-button:hover {
    background-color: #d0d5db
}

.add-to-cart-modal .button {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer
}

.add-to-cart-modal .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px
}

.add-to-cart-modal .icon .fas,
.add-to-cart-modal .icon svg {
    font-size: 16px;
    color: #101828
}

.add-to-cart-modal>.container {
    padding: 0 !important;
}

.add-to-cart-modal .medium-stock {
    background-color: #FF9A52;
}

.add-to-cart-modal .low-stock {
    background-color: #FB2C36;
}

.add-to-cart-modal .medium-stock-text {
    color: #FF9A52 !important;
}

.add-to-cart-modal .low-stock-text {
    color: #FB2C36 !important;
}

/* Add to cart animations */
.add-to-cart-modal .button.adding-to-cart {
    opacity: 0.6;
    pointer-events: none;
}

.add-to-cart-modal .button.cart-success {
    animation: cartSuccessPulse 0.5s ease-out;
}

.add-to-cart-modal .button.cart-error {
    animation: cartErrorShake 0.5s ease-out;
}

@keyframes cartSuccessPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes cartErrorShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Cart header pulse animation */
.cart-pulse {
    animation: cartPulse 0.6s ease-out !important;
}

@keyframes cartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.delivery-date-wrapper>div,
.size-wrapper>div,
.stock-wrapper>div,
.quantity-wrapper>div,
.div-wrapper>.text-wrapper {
    text-transform: uppercase !important;
}

/* Product list price styling */
.product-list-price {
    margin-bottom: 6px;
}

.product-list-price .price {
    font-size: 26px;
    color: #e53935;
    line-height: 1.2;
}

.product-list-retail-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 300;
    color: #9ca3af;
    line-height: 1.4;
}

.product-list-retail-price .label {
    font-size: 12px;
    font-weight: 300;
    color: #9ca3af;
    text-transform: none;
    letter-spacing: 0;
}

.product-list-retail-price .price {
    font-size: 12px;
    font-weight: 300;
    color: #9ca3af;
}
.product-miniature .product-description-short ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 1.2em; /* Controls distance from left edge */
    margin-left: 0;
}
