/* upsell.css — reduced to the CSS used by the cart-offers tiles grid and the product cross-sell block. */

.up-product-details {
    font-size: var(--upsell-text_font_size, 14px)
}

.up-product-details .up-product-url {
    color: var(--upsell-text_color, var(--color-primary));
    font-family: var(--template-headings-font),sans-serif;
    padding-bottom: 2px;
    hyphens: auto
}

.up-product-details .up-product-url:hover {
    text-decoration: underline !important;
    cursor: pointer
}

.up-product-details .up-price {
    font-weight: 600;
    color: var(--upsell-price_color, #333)
}

.up-product-details .up-price.up-price-type-cart_product,
.up-product-details .up-price.up-price-type-cart {
    color: var(--upsell-price_color_cart, #808080)
}

.up-product-details .up-price .up-price-common {
    text-decoration: line-through;
    color: var(--upsell-before_price_color, var(--upsell-sale_price_color, #e81616));
    font-weight: normal;
    margin-right: 8px;
    white-space: nowrap
}

.up-product-details .up-price .up-price-common-percentage {
    padding: 0 4px;
    background: var(--upsell-sale_price_background, #e81616);
    color: var(--upsell-sale_price_color, #fff);
    font-weight: normal;
    margin-right: 8px;
    text-align: center;
    max-width: 56px;
    white-space: nowrap
}

.up-product-details .up-price .up-price-current {
    white-space: nowrap
}

.up-cart-offers-slot {
    --upsell-title_font_size: var(--upsell-crt-title_font_size);
    --upsell-title_font_weight: var(--upsell-crt-title_font_weight);
    --upsell-text_font_size: var(--upsell-crt-text_font_size);
    --upsell-text_length_limit: var(--upsell-crt-text_length_limit);
    --upsell-text_color: var(--upsell-crt-text_color);
    --upsell-header_color: var(--upsell-crt-header_color);
    --upsell-price_color: var(--upsell-crt-price_color);
    --upsell-price_color_cart: var(--upsell-crt-price_color_cart);
    --upsell-header_background_color: var(--upsell-crt-header_background_color);
    --upsell-sale_price_color: var(--upsell-crt-sale_price_color, var(--upsell-default-sale_price_color));
    --upsell-before_price_color: var(--upsell-crt-before_price_color);
    --upsell-sale_price_background: var(--upsell-crt-sale_price_background, var(--upsell-default-sale_price_background));
    --upsell-disabled_quantity_color: var(--upsell-crt-disabled_quantity_color);
    --upsell-button_text_color: var(--upsell-crt-button_text_color);
    --upsell-button_text_hover_color: var(--upsell-crt-button_text_hover_color);
    --upsell-button_background_color: var(--upsell-crt-button_background_color);
    --upsell-button_background_hover_color: var(--upsell-crt-button_background_hover_color);
    --upsell-button_border_color: var(--upsell-crt-button_border_color);
    --upsell-button_rounded_corners: var(--upsell-crt-button_rounded_corners);
    --upsell-padding_top: var(--upsell-crt-padding_top);
    --upsell-padding_bottom: var(--upsell-crt-padding_bottom);
    --upsell-padding_left: var(--upsell-crt-padding_left);
    --upsell-padding_right: var(--upsell-crt-padding_right);
    --upsell-margin_top: var(--upsell-crt-margin_top);
    --upsell-margin_bottom: var(--upsell-crt-margin_bottom);
    --upsell-margin_left: var(--upsell-crt-margin_left);
    --upsell-margin_right: var(--upsell-crt-margin_right);
    --upsell-header_margin_top: var(--upsell-crt-header_margin_top);
    --upsell-header_margin_bottom: var(--upsell-crt-header_margin_bottom);
    --upsell-border: var(--upsell-crt-border);
    --upsell-border_radius: var(--upsell-crt-border_radius);
    --upsell-has_box_shadow: var(--upsell-crt-has_box_shadow);
    --upsell-header_alignment: var(--upsell-crt-header_alignment);
    --upsell-image_size: var(--upsell-crt-image_size);
    --upsell-image_margin_right: var(--upsell-crt-image_margin_right);
    --upsell-cart_border_radius: var(--upsell-crt-cart_border_radius);
    --upsell-cart_drop_shadow: var(--upsell-crt-cart_box_shadow);
    --upsell-cart_table_container_background_color: var(--upsell-crt-cart_table_container_background_color);
    --upsell-cart_carousel_slide_image_object_fit: var(--upsell-crt-cart_carousel_image_crop, none);
    --upsell-cart_block_columns: var(--upsell-crt-cart_block_columns);
    --upsell-cart_block_size: var(--upsell-crt-cart_block_size);
    --upsell-cart_block_carousel_image_border: var(--upsell-crt-cart_block_carousel_image_border);
    --upsell-widget_title: var(--upsell-crt-widget_title);
    --upsell-show_more_text: var(--upsell-crt-show_more_text);
    --upsell-cart_buy_header: var(--upsell-crt-cart_buy_header);
    --upsell-cart_added_header: var(--upsell-crt-cart_added_header);
    --upsell-add_to_cart_prompt_text: var(--upsell-crt-add_to_cart_prompt_text);
    --upsell-add_to_cart_prompt_color: var(--upsell-crt-add_to_cart_prompt_color);
    --upsell-cart_addon_label_text: var(--upsell-crt-cart_addon_label_text);
    --upsell-addon_border_color: var(--upsell-crt-addon_border_color);
    --upsell-in-stock-label-color: var(--upsell-crt-stock_text_color);
    width: 100%
}

.up-cart-offers-slot .up-in-stock-label {
    color: var(--upsell-stock_text_color, rgb(40, 146, 34));
    display: block;
    font-weight: 400;
    line-height: 1.5;
    font-size: 13px;
    padding-bottom: 2px
}

.up-cart-offers-slot.up-cart-offers-slot-template-disco {
    margin-top: 10px
}

.up-cart-offers-slot.up-cart-offers-slot-template-disco.up-cart-offers-slot-template-disco--with-order {
    order: 3
}

.up-product-wrapper {
    container-type: inline-size;
    container-name: up-product-wrapper;
    margin: var(--upsell-margin_top, 20px) var(--upsell-margin_right, 0) var(--upsell-margin_bottom, 20px) var(--upsell-margin_left, 0);
    width: 100%
}

.up-container {
    width: 100%;
    border: 1px solid #f2f2f2;
    border-radius: var(--upsell-border_radius, 0px);
    padding: 0 12px 0 12px;
    container-type: inline-size
}

.up-container .up-in-stock-label {
    color: var(--upsell-stock_text_color, rgb(40, 146, 34));
    display: block;
    font-weight: 400;
    line-height: 1.5;
    font-size: 13px;
    padding-bottom: 2px
}

@container (min-width: 440px) {
  .up-container {
        padding: 0 24px 0 24px
  }

}

.up-container.template-disco .up-products .up-product .up-variants {
    line-height: 30px;
    padding: 5px !important
}

.up-container .up-products {
    margin-top: 10px;
    padding-left: 0
}

.up-container .up-products .up-product {
    position: relative;
    width: 100%;
    min-height: 74px;
    align-items: center;
    display: grid;
    grid-template-areas: "information information add-to-cart" "quantity quantity quantity" "variants variants variants";
    grid-auto-columns: auto auto min-content;
    padding: var(--upsell-padding_top, 10px) var(--upsell-padding_right, 10px) var(--upsell-padding_bottom, 10px) var(--upsell-padding_left, 10px);
    gap: var(--upsell-product-gap, 6px);
    border: 1px solid rgba(0,0,0,0);
    border-bottom: 1px solid #d3d3d3
}

@container (min-width: 353px) {
  .up-container .up-products .up-product {
        grid-template-areas: "information quantity quantity" "variants variants variants";
        grid-auto-columns: auto auto min-content
  }

}

@container (min-width: 440px) {
  .up-container .up-products .up-product {
        grid-template-areas: "information variants quantity add-to-cart";
        grid-auto-columns: auto auto min-content min-content
  }

  .up-container .up-products .up-product.has-variants.active {
        grid-template-areas: "information information add-to-cart" "variants variants quantity";
        grid-auto-columns: auto auto min-content
  }

}

.up-container .up-products .up-product:last-child {
    border: 1px solid rgba(0,0,0,0)
}

.up-container .up-products .up-product.active {
    border: 1px solid var(--upsell-addon_border_color, #239CEB)
}

@media(min-width: 1200px)and (max-width: 1440px) {
  .up-container .up-products .up-product.active.has-variants {
        flex-wrap:wrap
  }

  .up-container .up-products .up-product.active.has-variants .up-product-details {
        width: 100%
  }

}

@media(min-width: 1px)and (max-width: 1439px) {
  .up-container .up-products .up-product.active.has-variants {
        flex-wrap:wrap
  }

  .up-container .up-products .up-product.active.has-variants .up-product-details {
        width: 100%
  }

}

.up-container .up-products .up-product input[type=checkbox]:disabled+label:before,
.up-container .up-products .up-product input[type=radio]:disabled+label:before {
    background-color: #f2f2f2;
    border-color: #bdbdbd
}

.up-container .up-products .up-product .up-product-variants {
    grid-area: variants;
    justify-self: end
}

.up-container .up-products .up-product .up-product-variants select.up-variants {
    max-width: 100% !important
}

.up-container .up-products .up-product .up-product-information,
.up-container .up-products .up-product .up-product-settings {
    display: flex;
    align-items: center;
    grid-area: information
}

.up-container .up-products .up-product .up-image {
    display: grid;
    flex: 0 0 var(--upsell-image_size, 70px);
    align-items: center;
    justify-content: center;
    margin-right: var(--upsell-image_margin_right, 5px)
}

.up-container .up-products .up-product .up-product-details {
    width: 100%;
    display: block;
    text-align: left
}

.up-container .up-products .up-product .up-product-details .up-product-name {
    display: block;
    line-height: 20px
}

.up-container .up-products .up-product .up-product-details .up-price {
    font-family: var(--template-headings-font),sans-serif;
    color: var(--upsell-price_color, #5B5B5B)
}

.up-container .up-products .up-product .up-variants {
    display: none;
    width: 160px;
    height: 40px;
    border-radius: 3px;
    padding: 5px 45px 5px 10px !important
}

@media(pointer: coarse) {
  .up-container .up-products .up-product .up-variants {
        height:48px
  }

}

@media(min-width: 1200px)and (max-width: 1440px) {
  .up-container .up-products .up-product .up-variants {
        right:20px;
        top: 70px
  }

}

.up-products-header.products-related-header {
    font-size: var(--upsell-title_font_size, 16px) !important;
    font-weight: var(--upsell-title_font_weight, 400) !important;
    color: var(--upsell-header_color, #333333) !important;
    margin-top: var(--upsell-header_margin_top, 24px) !important;
    margin-bottom: var(--upsell-header_margin_bottom, 0) !important;
    text-align: var(--upsell-header_alignment, left) !important;
    display: block !important;
    padding: 0 !important;
    opacity: 1 !important
}

.up-products-header.products-related-header:after {
    content: none !important
}

.up-tiles-grid-container {
    container-type: inline-size;
    padding-bottom: 6px
}

.up-tiles-grid {
    display: grid;
    grid-template-columns: repeat(var(--upsell-crt-cart_block_columns, 2), 1fr);
    align-items: stretch;
    gap: var(--upsell-tiles_gap, 24px)
}

.up-tiles-grid:has(.up-tile-medium) {
    gap: var(--upsell-tiles_gap, 16px)
}

@container (max-width: 580px) {
  .up-tiles-grid {
        grid-template-columns: repeat(2, 1fr)
  }

}

@container (max-width: 370px) {
  .up-tiles-grid {
        grid-template-columns: 1fr
  }

}

@media(max-width: 1200px) {
  .up-tiles-grid {
        grid-template-columns:1fr
  }

}

.up-tiles-grid .up-tile-container {
    container-type: inline-size;
    height: 100%
}

.up-tiles-grid .up-tile-container .up-tile {
    border: var(--upsell-border, none);
    display: grid;
    grid-template-columns: calc(50% - 12px) calc(50% - 12px);
    padding: var(--upsell-tile_wrapper_padding, 24px);
    row-gap: var(--upsell-tile_wrapper_gap, 32px);
    column-gap: var(--upsell-tile_wrapper_gap, 24px);
    height: 100%;
    border-radius: var(--upsell-cart_border_radius, 12px);
    background-color: var(--upsell-cart_table_container_background_color, #fff);
    box-shadow: var(--upsell-cart_drop_shadow, 2px 0px 8px 0 rgba(0, 0, 0, 0.1));
    overflow: hidden
}

@media(max-width: 992px) {
  .up-tiles-grid .up-tile-container .up-tile {
        column-gap:var(--upsell-tile_wrapper_gap, 12px)
  }

}

@media(width >= 40rem) {
  .up-tiles-grid .up-tile-container .up-tile .up-product-stock-price-container {
        display: flex;
        gap: 6px
  }

}

.up-tiles-grid .up-tile-container .up-tile .up-product-stock-price-container .up-in-stock-label {
    color: var(--upsell-stock_text_color, rgb(40, 146, 34));
    display: inline;
    font-weight: 400;
    line-height: 1.5;
    font-size: 13px;
    padding-bottom: 2px
}

.up-tiles-grid .up-tile-container .up-tile.up-tile-medium {
    grid-template-columns: max-content auto;
    padding: var(--upsell-tile_wrapper_padding, 12px)
}

.up-tiles-grid .up-tile-container .up-tile.up-tile-medium .up-image {
    width: 120px
}

.up-tiles-grid .up-tile-container .up-tile.up-tile-medium .up-product-content {
    justify-content: space-between
}

.up-tiles-grid .up-tile-container .up-tile .up-product-url {
    padding-bottom: 0px;
    max-width: 250px;
    width: 100%;
    overflow: hidden;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal
}

.up-tiles-grid .up-tile-container .up-tile .up-product-url:hover .up-image {
    transform: scale(1.05)
}

.up-tiles-grid .up-tile-container .up-tile .up-image {
    width: 100%;
    aspect-ratio: 5/4;
    object-fit: var(--upsell-tile_image_object_fit, contain);
    transition: all .2s ease-in-out
}

.up-tiles-grid .up-tile-container .up-tile.up-tile-medium .up-product-content {
    grid-template-areas: "description description" "price price"
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content {
    row-gap: 14px;
    column-gap: 4px;
    display: grid;
    grid-template-areas: "description variants price";
    min-width: 0
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-description-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-area: description;
    align-self: start
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-description-container a {
    max-width: unset
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-price-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    grid-area: price
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart {
    width: 32px;
    height: 32px;
    flex-shrink: 0
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart.up-add-to-cart-type-text {
    width: auto
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart.up-add-to-cart-type-text a {
    padding: 0 8px
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart a {
    width: 100%;
    height: 100%
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart a,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-remove-from-cart a,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-select-addon-button a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 0px;
    border: 1px solid var(--upsell-button_border_color, var(--upsell-button_background_color, var(--color-secondary, #666)));
    background-color: var(--upsell-button_background_color, transparent);
    color: var(--upsell-button_text_color, var(--color-secondary))
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart a:hover,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-remove-from-cart a:hover,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-select-addon-button a:hover {
    background: var(--upsell-button_background_hover_color, var(--color-secondary, #666));
    color: var(--upsell-button_text_hover_color, var(--colors-foregrounds-content-inverted, #fff));
    border-color: var(--upsell-button_background_hover_color, var(--color-secondary-hover, #666))
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart a:hover svg,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-remove-from-cart a:hover svg,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-select-addon-button a:hover svg {
    fill: var(--upsell-button_text_hover_color, #fff) !important
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart a svg,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-remove-from-cart a svg,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-select-addon-button a svg {
    width: 14px;
    height: 14px;
    fill: var(--upsell-button_text_color, var(--color-secondary))
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-add-to-cart svg,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-remove-from-cart svg,
.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-product-select-addon-button svg {
    color: #fff;
    text-align: center
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-price-current {
    font-size: 16px;
    display: block;
    font-weight: 600;
    white-space: nowrap
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-price {
    font-size: 12px;
    text-align: right
}

.up-tiles-grid .up-tile-container .up-tile .up-product-content .up-price .up-price-current {
    margin-right: 8px;
    text-align: right
}

@container (max-width: 309px) {
  .up-tiles-grid .up-tile-container .up-tile {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr
  }

  .up-tiles-grid .up-tile-container .up-tile .up-product-content {
        display: flex
  }

  .up-tiles-grid .up-tile-container .up-tile .up-product-url {
        max-width: unset
  }

  .up-tiles-grid .up-tile-container .up-tile.up-tile-small,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-medium {
        grid-template-rows: auto
  }

  .up-tiles-grid .up-tile-container .up-tile.up-tile-small .up-product-url,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-medium .up-product-url {
        padding-bottom: 0
  }

  .up-tiles-grid .up-tile-container .up-tile.up-tile-small .up-product-content,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-medium .up-product-content {
        flex-direction: column;
        align-items: flex-end
  }

  .up-tiles-grid .up-tile-container .up-tile.up-tile-small.up-tile-columns-3,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-small.up-tile-columns-2,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-medium.up-tile-columns-3,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-medium.up-tile-columns-2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto
  }

  .up-tiles-grid .up-tile-container .up-tile.up-tile-small.up-tile-columns-3 .up-image,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-small.up-tile-columns-2 .up-image,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-medium.up-tile-columns-3 .up-image,
  .up-tiles-grid .up-tile-container .up-tile.up-tile-medium.up-tile-columns-2 .up-image {
        width: 100%;
        height: auto
  }

}

.up-after-cart-container {
    margin: var(--upsell-crt-margin_top, 10px) var(--upsell-crt-margin_right, 0) var(--upsell-crt-margin_bottom, 20px) var(--upsell-crt-margin_left, 0)
}

.up-cart-offers-slot h4 {
    display: block !important;
    padding-top: 0;
    margin-top: var(--upsell-crt-header_margin_top, 10px);
    margin-bottom: var(--upsell-crt-header_margin_bottom, 10px);
    color: var(--upsell-crt-header_color, #333333);
    font-size: var(--upsell-crt-title_font_size, 18px);
    font-weight: var(--upsell-crt-title_font_weight, 700);
    text-align: var(--upsell-crt-header_alignment, left) !important
}