body.single-product {
    --feeding-guide-height: 281px;
}

@media(max-width: 1620px) {
    body.single-product {
        --feeding-guide-height: 260px;
    }
}

/* Product Transition */
.product_transition {
    --header-border_color: var(--Main-Green, #76BC21);
    --header-default_text_color: var(--Dark-Blue, #020938);
    --header-category_text_color: var(--Main-Green, #76BC21);

    --days-bg: linear-gradient(147.56deg, #EBFFD3 4.77%, #CBF994 100.47%);
    --days-size: 64px;
    --days_day-text_color: var(--Dark-Blue, #020938);
    --days-range-text_color: var(--Main-Green, #76BC21);

    --percentage-text_color: var(--Dark-Blue, #020938);

    --percentage-category-text_color: var(--Dark-Blue, #020938);

    --border-color: #C8D0ED;
}

.product_transition.blue {
    --header-border_color: var(--Main-Blue, #1226AA);
    --header-default_text_color: var(--Dark-Blue, #020938);
    --header-category_text_color: var(--Main-Blue, #1226AA);

    --days-bg: linear-gradient(160.84deg, #F9F9FF 3%, #D4D8EF 96.37%);
    --days_day-text_color: #020938;
    --days-range-text_color: var(--Main-Blue, #1226AA);
}

.product_transition {
    display: flex;
    flex-direction: row;
    height: var(--feeding-guide-height);
}

.product_transition .header {
    writing-mode: vertical-lr;
    border: 1px solid var(--header-border_color);
    font-family: Manrope;
    font-weight: 800;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--header-default_text_color);
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    text-align: center;
    padding: 20px 8px;
}

.product_transition .header>* {
    transform: rotate(180deg);
}

.product_transition .header .category {

    text-transform: uppercase;
    color: var(--header-category_text_color);
}

@media(max-width: 991px) {
    .product_transition {
        flex-direction: column;
        height: auto;
    }

    .product_transition .header,
    .product_transition .header>* {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
    }
}

@media(max-width: 768px) {
    .product_transition {
        flex-direction: column;
        height: auto;
    }

    .product_transition .header,
    .product_transition .header>* {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
    }
}

.product_transition ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.product_transition ul li {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product_transition ul li .days {
    width: var(--days-size);
    height: var(--days-size);
    background: var(--days-bg);
    color: black;
    border-radius: 100px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    margin: auto;
}

.product_transition ul li .days span:first-child {
    font-family: Manrope;
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--days_day-text_color)
}

.product_transition ul li .days span:last-child {
    font-family: Manrope;
    font-weight: 800;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--header-category_text_color);
    padding-top: 5px;
}

.product_transition ul li .middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.product_transition ul li .percentage {
    font-family: Manrope;
    font-weight: 800;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--percentage-text_color);
}

.product_transition ul li .category {
    font-family: Manrope;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--percentage-category-text_color);
}

.product_transition ul li img {
    max-width: 90%;
    width: 123px;
    height: 64px;
    margin: auto;
    object-fit: contain;
}



/* Product Ingridients */
ul.product-ingredients {
    padding: 0 10px;
}

ul.product-ingredients li {
    padding-left: 10px;
    padding-bottom: 10px;
}

ul.product-ingredients li::marker {
    content: url(/wp-content/uploads/2025/04/Rectangle-6.svg);
}

ul.product-ingredients li span {
    font-weight: bold;
}

ul.product-ingredients li label::after {
    content: ": ";
    display: inline;
}

/* Product Available Sizes */
.product-available_sizes_wrapper {
    display: flex;
    flex-direction: row;
    --label-color: var(--e-global-color-secondary);
    --li-color: var(--e-global-color-secondary);
    --li-bg: #1226AA26;
}

.product-available_sizes_wrapper label {
    font-weight: 500;
    font-size: 18;
    color: var(--label-color);
    border-radius: 10px;
    padding: 5px 10px;
    padding-top: 10px;
    padding-right: 10px;
}

.product-available_sizes_wrapper label::after {
    content: ": ";
    display: inline;
}

.product-available_sizes_wrapper ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    gap: 2px;
}

.product-available_sizes_wrapper ul li {
    color: var(--li-color);
    background-color: var(--li-bg);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
}

/* Product Cover */
.product-cover {
    --design-width: 1920;
    --wrapper-padding-vertical: 50px;
    --wrapper-padding-horizontal: 0;
    /* Left side */
    --img-width: 240px;
    --img-height: 560px;
    --img-wrapper-width: 540px;
    --img-wrapper-padding-left: 0;
    --img-wrapper-padding-bottom: 0;

    /* Middle section | Single Row */
    --single-row-item-width: calc(200 / var(--design-width) * 100vw);
    --single-row-gap: calc(32 / var(--design-width) * 100vw);
    /* Middle section | Two Columns */
    --two-columns-gap: 20px;
    --two-columns-width: 488px;
    --two-columns-padding-right: 50px;
    --two-columns-padding-left: 24px;
    --two-columns-padding-top: 0;
    --two-columns-padding-bottom: 0;
    /* Middle section | No Right side */
    --middle-section-no-right-side-width: calc((821 / var(--design-width)) * 100vw);
    --middle-section-no-right-side-image-width: 90px;
    --middle-section-no-right-side-image-margin: calc(-0.075 * var(--middle-section-no-right-side-image-width));
    --middle-section-no-right-side-font-size: calc((16 / var(--design-width)) * 100vw);

    /** Right side **/
    --right-size-padding-left: 24px;
    --right-side-width: 200px;
}

@media(max-width: 1400px) {
    .product-cover {
        /* Middle section | No Right side */
        --middle-section-no-right-side-width: calc((830 / var(--design-width)) * 100vw);
        --middle-section-no-right-side-image-width: auto;
        --middle-section-no-right-side-image-margin: calc(-0.075 * var(--middle-section-no-right-side-image-width));
        --middle-section-no-right-side-font-size: calc((16 / var(--design-width)) * 100vw);
		/* Middle section | Two Columns */
    --two-columns-width: 100vw;
    }
}

@media(max-width: 1200px) {
    .product-cover {
        /* Middle section | No Right side */
        --middle-section-no-right-side-width: calc((840 / var(--design-width)) * 100vw);
        --middle-section-no-right-side-image-width: calc((370 / var(--design-width)) * 100vw);
        --middle-section-no-right-side-image-margin: calc(-0.065 * var(--middle-section-no-right-side-image-width));
        --middle-section-no-right-side-font-size: calc((16 / var(--design-width)) * 100vw);
    }
}

@media(max-width: 1100px) {
    .product-cover {
        /* Middle section | No Right side */
        --middle-section-no-right-side-width: 50%;
        --middle-section-no-right-side-image-width: calc((350 / var(--design-width)) * 100vw);
        --middle-section-no-right-side-image-margin: calc(-0.05 * var(--middle-section-no-right-side-image-width));
        --middle-section-no-right-side-font-size: calc((16 / var(--design-width)) * 100vw);
    }
}

@media(max-width: 991px) {
    .product-cover {
        --design-width: 393;
        --wrapper-padding-vertical: 24px;
        --wrapper-padding-horizontal: 24px;

        /* Left side */
        --img-width: calc((109 / var(--design-width)) * 100vw);
        --img-height: calc((240 / var(--design-width)) * 100vw);
        --img-wrapper-width: calc((148 / var(--design-width)) * 100vw);
        --img-wrapper-padding-left: calc((37.5 / var(--design-width)) * 100vw);
        --img-wrapper-padding-bottom: calc((32 / var(--design-width)) * 100vw);

        /** Middle section **/
        /* Middle section | Single Row */
        --single-row-item-width: calc(110 / var(--design-width) * 100vw);
        --single-row-gap: calc(24 / var(--design-width) * 100vw);
        /* Middle section | Two Columns */
        --two-columns-gap: 20px;
        --two-columns-padding-right: 0;
        --two-columns-padding-left: 0;
        --two-columns-padding-top: 32px;
        --two-columns-padding-bottom: 40px;
        /* Middle section | No Right side */
        --middle-section-no-right-side-width: calc((313 / var(--design-width)) * 100vw);
        --middle-section-no-right-side-image-width: calc((178 / var(--design-width)) * 100vw);
        --middle-section-no-right-side-image-margin: calc(-0.05 * var(--middle-section-no-right-side-image-width));
        --middle-section-no-right-side-font-size: calc((24 / 991) * 100vw);

        
        /** Right side **/
        --right-size-padding-left: 24px;
        --right-side-width: calc((148.5 / var(--mobile-design-width)) * 100vw);
    }
}

.product-cover {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    padding-bottom: var(--wrapper-padding-vertical);
    padding-top: var(--wrapper-padding-vertical);
    padding-left: var(--wrapper-padding-horizontal);
    padding-right: var(--wrapper-padding-horizontal);
}

.product-cover>.featured_image_wrapper {
    grid-area: image;
    text-align: center;
    width: var(--img-wrapper-width);
    height: var(--img-height);
    padding-left: var(--img-wrapper-padding-left);
    padding-bottom: var(--img-wrapper-padding-bottom);
    padding: 0 !important;
}

.product-cover>.featured_image_wrapper img {
    width: var(--img-width);
    height: var(--img-height);
    object-fit: contain;
}

.product-cover .right_image_wrapper {
    width: var(--right-side-width);
    padding-left: var(--right-size-padding-left);
}

.product-cover>ul {
    grid-area: list;
}

.product-cover>.right_image_wrapper {
    grid-area: right_image;
}

.product-cover.no-right_side ul {
    width: var(--middle-section-no-right-side-width);
}
.product-cover.no-right_side ul li {
    position: relative;
    margin-top: var(--middle-section-no-right-side-image-margin);
}
.product-cover.no-right_side ul img {
    width: var(--middle-section-no-right-side-image-width);
    height: auto;
    object-fit: contain;
}

.product-cover.two_columns.no-right_side ul img {
    width: 100%;
}

.product-cover.no-right_side ul li .text_wrapper {
    font-size: var(--middle-section-no-right-side-font-size);
    justify-content: center !important;
}

@media (max-width:1024px) {
    .product-cover .featured_image_wrapper img {
        max-width: 75%;
    }
}

.product-cover ul {
    list-style: none;
    padding-left: 0;
}

.product-cover ul li .text_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    text-align: left;
    padding-left: 20px;
}

.product-cover ul li .text_wrapper .title {
    font-weight: bold;
}

.product-cover ul li .text_wrapper .descr {
    font-weight: normal;
}

.product-cover.image_text ul,
.product-cover.text_image ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    padding-right: 50px;
}

.product-cover.text_image ul li .text_wrapper {
    justify-content: right;
    text-align: right;
}

.product-cover.single_row ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--single-row-gap);
}

@media(min-width: 992px) {
    .product-cover.single_row ul {
        flex-wrap: nowrap;
    }

}
@media(max-width: 991px) {
    .product-cover.single_row ul {
        flex-wrap: wrap !important;
    }
    .product-cover.single_row ul li {
        width: calc(50% - var(--single-row-gap));
    }

}
.product-cover.single_row ul li {
    width: var(--single-row-item-width);
}

.product-cover.two_columns ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: var(--two-columns-width);
    gap: var(--two-columns-gap);
}

.product-cover.two_columns ul li {
    width: calc(50% - 20px);
}

.product-cover.single_row ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	align-items:baseline;
}

.product-cover.image_text ul li {
    display: flex;
    flex-direction: row;
}

.product-cover.text_image ul li {
    display: flex;
    flex-direction: row-reverse;
}

.product-cover .right_image_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    padding-left: var(--right-size-padding-left);
}

.product-cover.image_text ul,
.product-cover.two_columns ul {
    padding-left: var(--two-columns-padding-left);
    padding-right: var(--two-columns-padding-right);
    padding-top: var(--two-columns-padding-top);
    padding-bottom: var(--two-columns-padding-bottom);
}

.product-cover.text_image ul{
    padding-left: var(--two-columns-padding-left);
    padding-right: 0px;
    padding-top: var(--two-columns-padding-top);
    padding-bottom: var(--two-columns-padding-bottom);
}

@media(min-width: 992px) {

    .product-cover.image_text ul{
		border-top: none !important;
        max-width: 37%;
	}
    .product-cover.two_columns ul {
        border-top: none !important;
        max-width: 50%;
    }
    .product-cover.has-right_side ul {
        border-right: 1px solid var(--border-color, #C8D0ED);        
    }
}

@media (max-width:991px) {

    .product-cover {
        --first_row-magin: 20px;
    }

    .product-cover {
        display: grid;
        grid-template-areas:
            "image right_image"
            "list list";
        grid-template-columns: 1fr 1fr;
    }

    .product-cover:not(.has-right_side) {
        display: flex;
        flex-direction: column;
    }

    .product-cover ul {
        padding: 50px 0;
        border-top: 1px solid var(--border-color, #C8D0ED);
        border-right: none !important;
        margin: 50px auto;
        width: 80vw;
        text-align: center;
    }

    .product-cover>.featured_image_wrapper {
        margin: auto;
    }

    .product-cover>.right_image_wrapper {
        margin: auto;
    }
	
	.product-cover .right_image_wrapper{
		width:120px;
	}
}

/**
 * Feeding guide
 **/

.feeding_guide {
    --border-color: var(--Main-Green, #76BC21);

    --header-text-color: white;
    --header-bg: var(--Main-Green, #76BC21);
    --body-weight-text-color: var(--Main-Green, #76BC21);
    --body-weight-text-size: 24px;
    --daily_feeding_amount-text-size: 18px;

    --feeding-guide-attr-name-max-width: 150px;
    --table-cell-padding: 12px;
}

@media(max-width: 1620px) {
    .feeding_guide {
        --body-weight-text-size: 20px;
        --daily_feeding_amount-text-size: 14px;
        --feeding-guide-attr-name-max-width: 100px;
    }
}

@media(max-width: 1230px) {
    .feeding_guide {
        --table-cell-padding: 4px;
    }
}

.feeding_guide.blue {
    --border-color: var(--Main-Blue, #1226AA);
    --header-bg: var(--Main-Blue, #1226AA);
    --body-weight-text-color: var(--Main-Blue, #1226AA);
}

.feeding_guide {
    width: 100%;
    border-collapse: separate;
    text-align: center;
    margin-bottom: 0;
    height: var(--feeding-guide-height);
}

.feeding_guide,
.feeding_guide tr,
.feeding_guide td,
.feeding_guide th {
    border: 1px solid var(--border-color, #C8D0ED);
    border-color: var(--border-color, #C8D0ED);
    border-top-color: var(--border-color, #C8D0ED);
    border-bottom-color: var(--border-color, #C8D0ED);
    border-left-color: var(--border-color, #C8D0ED);
    border-right-color: var(--border-color, #C8D0ED);
}

.feeding_guide .header>div {
    margin: 4px;
    background: var(--header-bg);
    color: white;
    font-weight: 800;
    font-size: var(--daily_feeding_amount-text-size);
    padding: 18px;
    letter-spacing: 2%;
    gap: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.feeding_guide tbody tr th {
    background-color: white !important;
}

.feeding_guide td,
.feeding_guide th {
    border: 1px solid var(--border-color, #C8D0ED);
    padding: var(--table-cell-padding);
}

.feeding_guide .body_weight th {
    white-space: nowrap;
    color: var(--body-weight-text-color);
    font-size: 18px;
    vertical-align: middle;
}

.feeding_guide .body_weight th:first-child,
.feeding_guide .daily_feeding_amount th:first-child {
    font-family: Manrope;
    font-weight: 800;
    font-size: var(--feeding-amount-text-size);
    line-height: 20px;
    letter-spacing: 0%;
    color: black !important;
    text-align: left;
    padding-left: var(--table-cell-padding);
    align-items: center;
}

.feeding_guide .body_weight th:first-child img,
.feeding_guide .daily_feeding_amount th:first-child img {
    width: 48px;
    height: auto;
    object-fit: contain;
}

.feeding_guide .body_weight th:first-child div,
.feeding_guide .daily_feeding_amount th:first-child div {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-content: center;
}
@media(min-width: 768px) {
    .feeding_guide.mobile-show {
        display: none;
    }
}
@media (max-width:767px) {
    .feeding_guide.mobile-hide {
        display: none;
    }

    .feeding_guide .body_weight th:first-child div,
    .feeding_guide .daily_feeding_amount th:first-child div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .feeding_guide .body_weight th:first-child span,
    .feeding_guide .daily_feeding_amount th:first-child span {
        font-size: 10px;
        line-height: 1.2;
        padding-bottom: 10px;
    }

    .product_transition .header {
        flex-direction: row;
        align-items: center;
        display: flex;
        text-align: center;
        justify-content: center;
        padding: 5px 8px;
    }

    .product_transition .header div:last-child {
        padding-left: 7px;
    }

    .product_transition ul {
        margin-top: 20px;
    }

    .product_transition ul li .middle {
        padding-bottom: 20px;
        padding-top: 20px;
    }
}

.feeding_guide .body_weight th:first-child span,
.feeding_guide .daily_feeding_amount th:first-child span {
    max-width: var(--feeding-guide-attr-name-max-width, 150px);
    white-space: wrap;
    align-content: center;
}

.feeding_guide .daily_feeding_amount th {
    font-weight: 700;
    color: var(--body-weight-text-color);
    font-size: 18px;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width:767px){
	.feeding_guide .daily_feeding_amount th,
	.feeding_guide .body_weight th{
		font-size:12px;
	}
}

.feeding_guide .daily_feeding_amount th:first-child {
    font-weight: 800;
}

.has-text.has-image img{
	max-width:90px;
}
li.has-text.has-image{
	padding-bottom:20px;
}

.single_row ul li img{
	width:140px!important;
}

.text_image ul li img{
	width:320px!important;
	max-width:320px!important;
}
.product-cover.text_image ul li .text_wrapper .title {
	font-weight: 900 !important;
	    font-size: 18px;
    line-height: 1.2;
}

@media (max-width:767px){
	.text_image ul li img{
	width:40vw!important;
}
	.product-cover.text_image ul li .text_wrapper .title {
	    font-size: 14px;
}
}

.no-description .title{
	font-size:18px;
	line-height:1.2;
}

.feeding_guide.puppy .body_weight div,
.feeding_guide.puppy .daily_feeding_amount div{
	display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
}
.feeding_guide.puppy img{
	width:50px;
}
.feeding_guide.puppy td{
	background-color:white;
	vertical-align:middle;
}