body.single-product {
--feeding-guide-height: 281px;
}
@media(max-width: 1620px) {
body.single-product {
--feeding-guide-height: 260px;
}
} .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;
} ul.product-ingredients {
padding: 0 10px;
}
ul.product-ingredients li {
padding-left: 10px;
padding-bottom: 10px;
}
ul.product-ingredients li::marker {
content: url(//tankopetfood.com/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_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 {
--design-width: 1920;
--wrapper-padding-vertical: 50px;
--wrapper-padding-horizontal: 0; --img-width: 240px;
--img-height: 560px;
--img-wrapper-width: 540px;
--img-wrapper-padding-left: 0;
--img-wrapper-padding-bottom: 0; --single-row-item-width: calc(200 / var(--design-width) * 100vw);
--single-row-gap: calc(32 / var(--design-width) * 100vw); --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-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-size-padding-left: 24px;
--right-side-width: 200px;
}
@media(max-width: 1400px) {
.product-cover { --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); --two-columns-width: 100vw;
}
}
@media(max-width: 1200px) {
.product-cover { --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-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; --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);  --single-row-item-width: calc(110 / var(--design-width) * 100vw);
--single-row-gap: calc(24 / var(--design-width) * 100vw); --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-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-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 {
--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;
}