.product-single {
--bg-color: #f5d5eb;
--accent-color: #e795cd;
--hover-color: #e795cd1f;
padding-bottom: 0;
}
:is(.product-single + .product-similar, .product-similar) {
margin-top: 104px;
}
@media (max-width: 768px) {
:is(.product-single + .product-similar, .product-similar) {
margin-top: 32px;
}
}
.product-single .product-title span {
color: var(--accent-color);
}
.product-single.--acc-standart--ae .product-title span,
.panel-in-cart.--acc-standart--ae .product-title span,
.product-single.--food-standart--ae .product-title span,
.panel-in-cart.--food-standart--ae .product-title span,
.product-single.--treats-standart--ae .product-title span,
.panel-in-cart.--treats-standart--ae .product-title span {
color: #569ef0;
}
.product-single.--food-fish,
.panel-in-cart.--food-fish {
--bg-color: #C1DDE6;
--accent-color: #48c1ed;
--hover-color: #48c1ed1F;
}
.product-single.--food-lamb,
.panel-in-cart.--food-lamb {
--bg-color: #E6D7C1;
--accent-color: #863300;
--hover-color: #8633001F;
}
.product-single.--food-turkey,
.panel-in-cart.--food-turkey {
--bg-color: #F3D7D2;
--accent-color: #CD0003;
--hover-color: #CD00031F;
}
.product-single.--food-beef,
.panel-in-cart.--food-beef {
--bg-color: #E6C1D7;
--accent-color: #7e0092;
--hover-color: #7e00921F;
}
.product-single.--food-salmon,
.panel-in-cart.--food-salmon {
--bg-color: #F3D7C1;
--accent-color: #ff6b35;
--hover-color: #ff6b351F;
}
.product-single.--food-rabbit,
.panel-in-cart.--food-rabbit {
--bg-color: #E6D7C1;
--accent-color: #8b4513;
--hover-color: #8b45131F;
}
.product-single.--food-duck,
.panel-in-cart.--food-duck {
--bg-color: #F3E6D7;
--accent-color: #d2691e;
--hover-color: #d2691e1F;
}
.product-single.--treats-catnip,
.panel-in-cart.--treats-catnip {
--bg-color: #ccece1;
--accent-color: #3EB489;
--hover-color: #3EB4891F;
}
.product-single.--treats-duck-cranberries,
.panel-in-cart.--treats-duck-cranberries {
--bg-color: #dfcbca;
--accent-color: #A83930;
--hover-color: #A839301F;
}
.product-single.--treats-lamb,
.panel-in-cart.--treats-lamb {
--bg-color: #E6D7F3;
--accent-color: #44006c;
--hover-color: #44006c1F;
}
.product-single.--treats-rabbit,
.panel-in-cart.--treats-rabbit {
--bg-color: #F3D7E6;
--accent-color: #601094;
--hover-color: #6010941F;
}
.product-single.--treats-beef,
.panel-in-cart.--treats-beef {
--bg-color: #D7F3E6;
--accent-color: #004c31;
--hover-color: #004c311F;
}
.product-single.--treats-salmon,
.panel-in-cart.--treats-salmon {
--bg-color: #F3D7F3;
--accent-color: #7c007a;
--hover-color: #7c007a1F;
}
.product-single.--treats-duck,
.panel-in-cart.--treats-duck {
--bg-color: #D7F3F3;
--accent-color: #326e70;
--hover-color: #326e701F;
}
.product-single.--treats-fish,
.panel-in-cart.--treats-fish {
--bg-color: #F3D7F3;
--accent-color: #7c007a;
--hover-color: #7c007a1F;
}
.product-single.--treats-turkey,
.panel-in-cart.--treats-turkey {
--bg-color: #F3E6D7;
--accent-color: #cc3300;
--hover-color: #cc33001F;
}
.breadcrumbs{
margin: 24px auto;
display: flex;
align-items: center;
}
.breadcrumbs__item{
display: block;
padding: 0px 16px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-6);
text-decoration: none;
position: relative;
}
.breadcrumbs__item:not(.breadcrumbs__item--current) {
background: var(--gradient-main);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.breadcrumbs__item:first-child{
padding-left: 0;
}
.breadcrumbs__item:nth-child(n+2)::before{
content: '';
position: absolute;
top: -2px;
left: -12px;
width: 24px;
aspect-ratio: 1;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/arrow-breadcrumbs.svg);
background-repeat: no-repeat;
background-size: contain;
}
.back-btn {
display: none;
}
.product_main{
display: flex;
padding: 30px;
border-radius: 30px;
margin-top: 30px;
justify-content: space-between;
background-color: var(--bg-color);
}
.product-info{
width: 364px;
flex-direction: column;
justify-content: space-between;
display: flex;
padding-right: 24px;
}
.product-title{
font-weight: 700;
font-size: 24px;
text-transform: uppercase;
color: var(--text-black);
}
.product-block-title{
font-weight: 700;
font-size: 16px;
line-height: 20px;
color: var(--text-black);
text-transform: uppercase;
}
.product-contains:not(:first-child) {
margin-top: 24px;
}
.product-contains-text {
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: var(--text-black);
margin-top: 16px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.product-values{
margin-top: 30px;
}
.product-values-list{
display: flex;
flex-wrap: wrap;
margin-top: 10px;
gap: 4px;
}
.product-values-item{
border: 1px solid rgba(18, 18, 18, 0.1);
border-radius: 100px;
padding: 4px 4px 4px 10px;
height: 48px;
display: flex;
align-items: center;
font-weight: 700;
font-size: 14px;
line-height: 143%;
color: var(--text-black);
gap: 10px;
}
.product-values-item-val{
border: 1px solid #000;
border-radius: 100px;
min-width: 40px;
padding-left: 5px;
padding-right: 5px;
height: 40px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.product-values-title{
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
}
.product-vitamins{
border: 1px solid rgba(18, 18, 18, 0.1);
border-radius: 20px;
padding: 10px;
width: 100%;
font-weight: 700;
font-size: 14px;
line-height: 143%;
color: var(--text-black);
margin-top: 4px;
}
.product-vitamins-list{
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.product-vitamins-item{
border: 1px solid #000;
border-radius: 100px;
padding: 10px;
}
.product-constructor{
width: 395px;
display: flex;
flex-direction: column;
}
.product-constructor__block {
margin-bottom: 1.5rem;
gap: 2px;
}
.product-constructor__block.--treats_type .product-constructor__block-list{
flex-wrap: wrap;
}
.product-constructor__block.--treats_type .product-constructor__block-list .product-constructor__block-item{
width: calc(50% - 1px);
}
.product-constructor__block-title{
font-size: 16px;
line-height: 125%;
color: var(--text-black);
font-weight: 700;
text-transform: uppercase;
}
.product-constructor__block-list {
width: 100%;
display: flex;
margin-top: 10px;
border-radius: 30px;
padding: 4px;
background-color: #fff;
}
.product-constructor__block-item{
flex-grow: 1;
padding: 2px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50px;
font-weight: 700;
font-size: 14px;
color: rgba(18, 18, 18, 0.75);
border-radius: 100px;
transition: 0.5s all;
}
.product-constructor__block-item.disabled{
opacity: 0.5;
pointer-events: none;
}
.product-constructor__block-item svg, .product-constructor__block-item path{
fill: rgba(18, 18, 18, 0.75);
fill-opacity: 1;
}
.product-constructor__block-item:hover{
background-color: var(--hover-color);
}
.product-constructor__block-item.active{
color: #fff;
background-color: var(--accent-color);
}
.product-constructor__block-item.active svg, .product-constructor__block-item.active path{
fill: #fff;
}
.product-constructor__block-item img, .product-constructor__block-item svg{
height: 22px;
width: 22px;
}
.product-price {
display: flex;
gap: 10px;
align-items: center;
margin-top: auto;
}
.product-single.--acc-standart .product-price:not(:first-child){
margin-top: 24px;
}
.product-single.--acc-standart .product-price:first-child{
margin-top: 0;
}
.product-price-main {
border-radius: 100px;
padding: 14px 15px;
width: 135px;
background-color: #fff;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: #4d4d4d;
font-weight: 700;
}
.product-price-old {
font-weight: 700;
font-size: 16px;
line-height: 150%;
text-transform: uppercase;
text-decoration: line-through;
color: #666;
}
.product-price-percent{
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: #fa0505;
margin-top: 8px;
}
.product-btn, .button {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 16px;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
margin-top: 20px;
background-color: var(--accent-color);
}
.button::before{
display: none;
}
.to-know{
font-size: 24px;
text-transform: uppercase;
font-weight: 700;
margin-top: 20px;
text-decoration: underline;
}
.product-gallery {
width: 390px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
margin-right: 20px;
border: 2px solid #fff;
border-radius: 30px;
}
.product-constructor, .product-gallery, .product-info{
flex-grow: 1;
}
.product-gallery-item{
background-color: #fff;
border-radius: 24px;
display: flex;
justify-content: center;
align-items: center;
height: auto;
aspect-ratio: 1/1;
}
.product-gallery-slider{
margin-left: 10px;
margin-right: 10px;
position: relative;
}
.product-gallery__thumbsSlider::before,
.product-gallery__thumbsSlider::after {
content: "";
width: 65px;
height: 120%;
position: absolute;
top: -10%;
z-index: 2;
pointer-events: none;
background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 50%);
}
.product-gallery__thumbsSlider::before {
left: -10px;
}
.product-gallery__thumbsSlider::after {
right: -10px;
transform: scaleX(-1);
}
.product-gallery-item img{
height: 100%;
width: 100%;
object-fit: contain;
padding: 10px;
}
.product-gallery-arrows {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
justify-content: space-between;
pointer-events: none;
z-index: 3;
display: flex;
}
.product-gallery-arrow {
width: 44px;
height: 44px;
position: relative;
pointer-events: all;
background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
}
.product-gallery-prev{
transform: scaleX(-1);
}
.swiper-slide-active.product-gallery-item{
outline: 4px solid #48c1ed;
}
.product_main .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.product_main .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.product_main .product-gallery__mainSlider .swiper-slide img {
height: auto;
}
.product_main .swiper {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.product_main .swiper-slide {
background-size: cover;
background-position: center;
}
.product-gallery__mainSlider {
height: 80%;
width: 100%;
}
.product-gallery__thumbsSlider {
height: 20%;
box-sizing: border-box;
padding: 10px;
height: 110px;
}
.product-gallery__thumbsSlider .swiper-slide {
width: 90px;
height: 90px;
background-color: #fff;
border-radius: 24px;
padding: 10px 20px;
position: relative;
overflow: hidden;
}
.product-gallery__thumbsSlider .swiper-slide-thumb-active {
border: 4px solid var(--accent-color);
}
.product_main .product-gallery__thumbsSlider .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.product-desc{
margin-top: 55px;
}
.product-desc-text{
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--text-black);
margin-top: 20px;
}
.product-reviews {
margin-top: 40px;
padding-bottom: 60px;
margin-bottom: -60px;
overflow: hidden;
}
.product-reviews .product-block-title {
font-size: 20px;
}
.product-reviews .main-food_reviews-slide {
min-height: auto;
height: 100vh;
max-height: 500px;
border-radius: 40px !important;
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12);
background: var(--background-white);
overflow: hidden;
}
.product-reviews-slider {
overflow: visible !important;
margin-top: 22px;
}
.product-similar-slider, .product-cross-sales__slider{
margin-top: 40px;
}
.product-similar, .product-cross-sales{
overflow: hidden;
}
.product-single{
padding-top: 110px;
}
.product-similar-slider .swiper-wrapper,
.product-cross-sales__slider .swiper-wrapper {
align-items: stretch;
}
.product-similar-slider .swiper-slide, .product-cross-sales__slider .swiper-slide
{
height: auto;
display: flex;
flex-direction: column;
max-width: 340px;
width: 295px;
}
@media (max-width: 640px) {
.product-similar-slider .swiper-slide, 
.product-cross-sales__slider .swiper-slide {
max-width: 165px;
width: 100%;
}
}
.product-title.--m{
display: none;
}
@media (max-width: 1150px) {
.product-single {
padding-top: 0;
overflow: hidden;
width: 100%;
}
.back-btn {
display: flex;
align-items: center;
gap: 12px;
margin-block: 32px;
}
.back-btn__text {
font-size: 20px;
font-weight: 600;
line-height: 24px;
}
.product-single-title-wrapper {
padding-top: 140px;
background-color: var(--bg-color);
}
.product-single-title { 
margin-bottom: 0;
}
.product-single-title .product-title {
font-size: 16px;
line-height: 24px;
text-transform: none;
}
.product-show {
margin-top: 27px;
}
.product-gallery{
order: 0;
}
.product-info{
order: 3;
}
.product-info, .product-gallery, .product-constructor {
width: 100%;
margin-right: auto;
margin-left: 0;
}
.product-info, .product-constructor {
margin-top: 32px;
}
.product-gallery__thumbsSlider{
display: none;
}
.product-gallery__mainSlider{
width: 100%;
height: auto;
aspect-ratio: 1 / 1.25;
max-height: 420px;
}
.breadcrumbs{
display: none;
}
.product_main {
flex-direction: column;
padding-bottom: 24px;
margin-top: 0;
width: calc(48px + 100%);
margin-left: -24px;
border-radius: 0;
padding: 5px 10px 24px;
}
.product-title.--m{
display: block;
font-size: 18px;
margin-top: 20px;
margin-top: 32px;
margin-bottom: 14px;
}
.product-title.--pc{
display: none;
}
.product-constructor__block {
margin-bottom: 16px;
}
.product-constructor__block-title{
line-height: 143%;
}
.product-constructor__block-item-name{
font-size: 12px;
}
.product-info{
padding-right: 0;
}
.product-desc-text{
font-size: 14px;
}
.product-reviews{
margin-top: 48px;
}
.main-food_reviews-slide{
padding-left: 20px !important;
padding-right: 20px !important;
}
.product-reviews .main-food_reviews-slide {
max-height: 600px;
}
.main-food_products-card{
min-width: 0 !important;
}
}
.product-show{
display: flex;
flex-grow: 1;
max-width: calc(100% - 775px);
margin-right: 2rem;
}
@media (max-width: 1200px) {
.product-show{
margin-right: 0;
max-width: 100%;
flex-direction: column;
}
}
.product-gallery-bullets {
display: none;
}
@media (max-width: 1150px) {
.product-gallery-bullets{
position: absolute;
display: flex;
bottom: 35px !important;
top: unset !important;
width: 100%;
padding-left: 20px;
padding-right: 20px;
gap: 12px;
justify-content: center;
}
.product-gallery-bullets__item{
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #fff;
}
.product-gallery-bullets__item.--active{
background-color: var(--accent-color);
}
}
@media (max-width: 576px) {
.product_main {
margin-left: -10px;
width: calc(20px + 100%);
}
.product-show{
flex-direction: column; min-height: 420px;
height: 420px;
margin-right: 0;
max-width: 100%;
}
.product-gallery{
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 0px;
padding-top: 0;
position: relative;
border-radius: 16px;
border: none;
}
.product-gallery__mainSlider{
flex-grow: 1;
border-radius: 16px;
}
.product-gallery__mainSlider .swiper-slide:not([data-swiper-slide-index="0"]){
background-color: #f2f2f2;
overflow: hidden;
border-radius: 16px;
}
.product-gallery__mainSlider .swiper-slide[data-swiper-slide-index="0"]{
border: 2px solid #fff;
border-radius: 16px;
}
.product_main .swiper, .product-gallery{
overflow: visible;
width: calc(100% - 10px);
}
.product-gallery-bullets{
display:none;
}
}
.product-block-arrows--m{
display: none;
}
.product-similar__head, .product-reviews__head, .product-cross-sales__head{
display: flex;
justify-content: space-between;
align-items: center;
}
.product-block-arrows{
display: flex;
gap: 20px;
}
@media (max-width: 980px) {
.product-block-arrows--m{
display: flex;
gap: 10px;
margin-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
.product-block-arrows{
display: none;
}
.product-reviews-slider{
padding-right: 10px;
padding-left: 10px;
margin-top: 3rem;
}
}
.stock, .quantity{
display: none;
}
.product-pp-btn {
display: flex;
font-weight: 700;
font-size: 14px;
line-height: 24px;
margin-top: 16px;
text-decoration-line: underline;
color: var(--accent-color);
}
.mform__info__c{
display: flex;
justify-content: space-between;
margin-top: 2rem;
flex-wrap: wrap;
}
.mform__info__col {
width: 48.5%;
}
.mform__info__col .product-values{
margin-top: 0;
}
.mform__review-wrap{
max-height: 100vh;
overflow: auto;
}
.product-gallery{
position: relative;
}
.product-single-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-single-title__item--rating {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
cursor: pointer;
}
.product-single-title__item--rating-dot {
display: block;
background-color: rgb(from var(--text-black) r g b / 0.8);
width: 3px;
height: 3px;
border-radius: 50%;
}
.product-single-title__item--rating-average,
.product-single-title__item--rating-count {
font-size: 14px;
line-height: 24px;
font-weight: bold;
color: rgb(from var(--text-black) r g b / 0.8);
white-space: nowrap;
}
.product-single-title__item--rating:hover .product-single-title__item--rating-average,
.product-single-title__item--rating:hover .product-single-title__item--rating-count{
background: var(--gradient-main, radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.product-single-title__item--rating:hover .product-single-title__item--rating-dot{
background: var(--gradient-main, radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%));
}
@media(max-width:990px) {
.product-single-title {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.product-title.--m {
display: none;
}
}
.product-info-links {
margin-top: 50px;
}
.product-info-links .product-info-links_link {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border: 1px solid #fff;
border-radius: 800px;
padding: 8px 8px 8px 24px;
transition: all .3s;
}
.product-info-links .product-info-links_link:not(:last-child) {
margin-bottom: 8px;
}
.product-info-links .product-info-links_link-arrow {
transform: rotate(0deg);
transition: .3s;
}
.product-info-links .product-info-links_link:hover .product-info-links_link-arrow  {
transform: rotate(45deg);
transition: .3s;
}
.product-info-links .product-info-links_link-text {
font-weight: 700;
font-size: 16px;
line-height: 20px;
color: var(--accent-color);
display: flex;
gap: 5px;
text-align: left;
}
.product-constructor__block-list{
gap: 2px;
}
.product-constructor__block-list--count-4{
flex-wrap: wrap;
}
.product-constructor__block-list--count-6{
flex-wrap: wrap;
}
.product-constructor__block-list--count-5{
flex-wrap: wrap;
justify-content: space-around;
}
.product-constructor__block-list--count-5 .product-constructor__block-item{
width: calc(33.3333% - 1.5px);
}
.product-constructor__block-list--count-6 .product-constructor__block-item{
width: calc(33.3333% - 1.5px);
}
.product-constructor__block-list--count-4 .product-constructor__block-item{
width: calc(50% - 1px);
} .product-price-main {
width: max-content;
max-height: 52px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
color: var(--accent-color);
border-radius: 100px;
padding: 14px 15px;
background-color: #fff;
}
.product-price-main.--is-on-sale{
color: #CD0003;
}
.product-price-main .product-price-main__old-price-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.product-price-main .product-price-main__old-price {
font-size: 16px;
font-weight: bold;
line-height: 24px;
text-transform: uppercase;
text-decoration: line-through;
color: #666;
}
.product-price-main .product-price-main__discount-precent {
font-size: 14px;
font-weight: 600;
line-height: 16px;
padding: 2px;
color: var(--text-red);
}
#product-buy-block-wrapper .product-incart__wrap {
margin-top: 12px;
}
#product-buy-block-wrapper .button, .product-fixed-block__right .button {
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
text-align: center;
color: #fff;
border: none;
border-radius: 20px;
margin-top: 12px;
padding: 12px 16px;
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
}
.product-fixed-block__right .button{
padding-left: 48px;
padding-right: 48px;
}
#product-buy-block-wrapper .product-incart.counter {
min-width: 160px;
max-height: 48px;
border: 2px solid #fff;
border-radius: 100px;
padding: 2px;
background-color: rgba(from var(--accent-color) r g b / 0.12);
}
#product-buy-block-wrapper .product-incart__btn {
width: 38px;
height: 38px;
background-color: var(--accent-color);
}
#product-buy-block-wrapper .product-incart__count {
color: var(--text-white);
}
#product-buy-block-wrapper .product-incart__btn::before,
#product-buy-block-wrapper .product-incart__btn::after {
background: #fff;
}
#product-buy-block-wrapper .product-incart__label {
height: 48px;
border: none;
}
.product-single-info { 
max-width: 100%; 
margin-top: 88px; 
color: #0d0d0d; 
}
.product-single-info__tabs { 
display: flex; 
gap: 8px; 
margin-bottom: 20px; 
flex-wrap: wrap; 
}
.product-single-info__tab {
position: relative;
display: inline-flex; 
align-items: center; 
justify-content: center;
padding: 8px 14px; 
border-radius: 10px; 
font-weight: 600; 
font-size: 14px;
background: rgba(8, 8, 8, 0.04);
transition: transform .2s, box-shadow .2s, border-color .2s;
font-weight: 700;
font-size: 14px;
line-height: 143%;
text-transform: uppercase;
transition: all .3s;
}
#pi-desc {
max-width: 900px;
}
.product-single-info__tab:hover:not(.is-active) { 
background-color: #fff;
background: var(--gradient-main, radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.product-single-info__tab.is-active { 
background: #569ef0;
color: #fff; 
font-weight: 700;
font-size: 14px;
line-height: 143%;
text-transform: uppercase;
}
.product-single-info__text { 
line-height: 1.7; 
margin-bottom: 24px; 
}
.product-single-info__text li, .product-contains-text li{
list-style-type: disc;
margin-left: 1em;
}
.product-single-info__text span, .product-contains-text span{
display: inline;
}
.product-single-info__text strong, .product-contains-text strong, .product-single-info__text strong *, .product-contains-text strong *{
font-weight: 700;
}
.product-single-info__attrs { 
list-style: none; 
padding: 0; 
margin: 0 0 24px; 
display: grid; 
gap: 10px; 
}
.product-single-info__attr { 
display: grid; 
grid-template-columns: auto 1fr auto auto; 
align-items: baseline; 
gap: 10px; 
}
.product-single-info__attr-name { 
white-space: nowrap; 
font-weight: 700;
}
.product-single-info__attr-value { 
white-space: nowrap; 
font-weight: 700;
font-size: 14px;
line-height: 171%;
color: rgba(18, 18, 18, 0.4);
}
.product-single-info__attr-dots {
flex: 1;
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
height: 1px;
margin: 0 6px;
}
.product-single-info__copy {
width: 24px; 
height: 24px; 
border-radius: 50%; 
display: inline-flex; 
position: relative;
top: .3em;
align-items: center; 
justify-content: center; 
background: #fff; 
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.452 22H14.548C16.296 22 17.73 20.688 17.954 19H18.548C19.4632 18.9989 20.3406 18.6349 20.9878 17.9878C21.6349 17.3406 21.9989 16.4632 22 15.548V5.452C21.9989 4.5368 21.6349 3.65938 20.9878 3.01224C20.3406 2.36509 19.4632 2.00106 18.548 2H9.452C8.5368 2.00106 7.65938 2.36509 7.01224 3.01224C6.36509 3.65938 6.00106 4.5368 6 5.452V6H5.452C4.5368 6.00106 3.65938 6.36509 3.01224 7.01224C2.36509 7.65938 2.00106 8.5368 2 9.452V18.548C2.00106 19.4632 2.36509 20.3406 3.01224 20.9878C3.65938 21.6349 4.5368 21.9989 5.452 22ZM8 5.452C8 4.652 8.651 4 9.452 4H18.548C19.348 4 20 4.651 20 5.452V15.548C20 16.348 19.349 17 18.548 17H18V9.452C17.9989 8.5368 17.6349 7.65938 16.9878 7.01224C16.3406 6.36509 15.4632 6.00106 14.548 6H8V5.452ZM4 9.452C4 8.652 4.651 8 5.452 8H14.548C15.348 8 16 8.651 16 9.452V18.548C16 19.348 15.349 20 14.548 20H5.452C4.652 20 4 19.349 4 18.548V9.452Z' fill='black' fill-opacity='0.4'/%3E%3C/svg%3E%0A");
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.product-single-info__copy:hover { 
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.452 22H14.548C16.296 22 17.73 20.688 17.954 19H18.548C19.4632 18.9989 20.3406 18.6349 20.9878 17.9878C21.6349 17.3406 21.9989 16.4632 22 15.548V5.452C21.9989 4.5368 21.6349 3.65938 20.9878 3.01224C20.3406 2.36509 19.4632 2.00106 18.548 2H9.452C8.5368 2.00106 7.65938 2.36509 7.01224 3.01224C6.36509 3.65938 6.00106 4.5368 6 5.452V6H5.452C4.5368 6.00106 3.65938 6.36509 3.01224 7.01224C2.36509 7.65938 2.00106 8.5368 2 9.452V18.548C2.00106 19.4632 2.36509 20.3406 3.01224 20.9878C3.65938 21.6349 4.5368 21.9989 5.452 22ZM8 5.452C8 4.652 8.651 4 9.452 4H18.548C19.348 4 20 4.651 20 5.452V15.548C20 16.348 19.349 17 18.548 17H18V9.452C17.9989 8.5368 17.6349 7.65938 16.9878 7.01224C16.3406 6.36509 15.4632 6.00106 14.548 6H8V5.452ZM4 9.452C4 8.652 4.651 8 5.452 8H14.548C15.348 8 16 8.651 16 9.452V18.548C16 19.348 15.349 20 14.548 20H5.452C4.652 20 4 19.349 4 18.548V9.452Z' fill='%23569EF0' fill-opacity='0.4'/%3E%3C/svg%3E%0A");
}
.product-single-info__accordion { 
padding-top: 14px; 
}
.product-single-info__accordion-head {
width: 100%; 
display: flex; 
align-items: center; 
justify-content: space-between;
gap: 12px; 
padding: 10px 0; 
background: none; 
border: 0; 
cursor: pointer; 
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
text-transform: uppercase;
}
.product-single-info__accordion-arrow { 
transition: transform .25s; 
}
.product-single-info__accordion-head.is-open .product-single-info__accordion-arrow { 
transform: rotate(180deg); 
}
.product-single-info__accordion-body { 
margin-top: 6px; 
line-height: 1.7; 
}
@media (max-width: 640px) {
.product-single-info {
margin-top: 48px;
}
.product-single-info__attr { 
max-width: calc(100vw - 20px);
display: flex;
grid-template-columns: auto 1fr auto 28px;
font-size: 14px;
}
.product-single-info__attr-value{
white-space: pre-wrap;
text-align: right;
}
.product-single-info__attr-dots{
min-width: 24px;
}
.product-single-info__text{
font-size: 14px;
}
}
.product-single-reviews__card {
background:#fff;
border-radius:16px;
padding:16px
}
.product-single-reviews__card-head {
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:10px
}
.product-single-reviews__card-user {
display:flex;
align-items:center;
gap:12px
}
.product-single-reviews__card-avatar {
width:44px;
height:44px;
border-radius:50%
}
.product-single-reviews__card-user-info {
display: flex;
gap: 12px;
align-items: center;
}
.product-single-reviews__card-user-name {
font-weight:600
}
.product-single-reviews__card-date {
opacity:.6;
font-size:12px;
white-space:nowrap
}
.product-single-reviews__card-text {
margin-top: 16px;
line-height: 1.6;
margin-bottom: 16px;
font-weight: 600;
font-size: 14px;
line-height: 171%;
}
.product-single-reviews__card-media--grid {
display:flex;
gap:12px
}
.product-single-reviews__card-media {
width: 100%;
}
.product-single-reviews__card-media-img {
display: block;
width: 100%;
max-width: 262px;
height: 330px;
object-fit: cover;
border-radius: 16px;
background: #f5f5f5;
}
.product-single-reviews__card-media-video {
position:relative;
display:block;
border-radius:16px;
overflow:hidden
}
.product-single-reviews__card-media-play {
position:absolute;
inset:0;
margin:auto;
width:54px;
height:54px;
border-radius:50%;
box-shadow:0 6px 16px rgba(0,0,0,.2)
}
.product-single-reviews__aside-title {
margin:0 0 24px;
font-weight: 700;
font-size: 20px;
line-height: 120%;
}
.product-single-reviews__aside-row {
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px
}
.product-single-reviews__aside-score {
font-weight: 700;
font-size: 28px;
line-height: 143%;
color: #000;
}
.product-single-reviews__aside-note {
padding-top: 24px;
border-top: 1px solid rgba(0, 0, 0, 0.24);
opacity:.6;
margin:24px 0 24px;
font-weight: 700;
font-size: 14px;
line-height: 171%;
}
.product-single-reviews__aside-btn {
width:100%;
border-radius: 20px;
padding: 16px 24px;
background: rgba(18, 18, 18, 0.04);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
cursor:pointer;
transition:.2s
}
.product-single-reviews__stars {
position: relative;
inline-size: 120px;
block-size: 24px;
display: flex;
gap: 8px;
align-items: center;
font-weight: 700;
font-size: 14px;
line-height: 171%;
color: #999;
}
.product-single-reviews__stars--lg {
inline-size:160px;
block-size:28px
}
.product-single-info__panel[hidden] { 
display:none !important; 
}
.product-single-reviews {
display:flex; 
gap:32px;
}
.product-single-reviews__list {
flex:1; 
display:grid; 
gap:24px;
}
.product-single-reviews__aside {
flex:0 0 390px;
}
@media(max-width:900px){ 
.product-single-reviews {
flex-direction:column-reverse;
} 
.product-single-reviews__aside {
flex:0 0 auto;
} 
}
.product-single-qa {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 32px;
}
.product-single-qa__form-header {
margin-bottom: 16px;
}
.product-single-qa__title {
font-weight: 700;
font-size: 18px;
line-height: 1.3;
margin-bottom: 4px;
}
.product-single-qa__hint {
font-size: 13px;
line-height: 1.5;
color: rgba(18, 18, 18, 0.4);
}
.product-single-qa__form-body {
margin: 0;
}
.product-single-qa__form-row {
display: flex;
align-items: center;
gap: 12px;
}
.product-single-qa__input {
flex: 1;
height: 52px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 0 20px;
font-size: 15px;
line-height: 1.4;
outline: none;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.product-single-qa__input::placeholder {
color: rgba(18, 18, 18, 0.4);
}
.product-single-qa__input:focus {
border-color: #569ef0;
box-shadow: 0 0 0 1px rgba(86, 158, 240, 0.25);
background-color: #fff;
}
.product-single-qa__submit {
flex: 0 0 auto;
padding: 0 28px;
height: 52px;
border-radius: 999px;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 20px;
line-height: 1;
background: radial-gradient(154.31% 232.33% at 128.36% -48.29%, #EE6868 0%, #569EF0 57.69%); 
color: #fff;
transition: all .3s;
position: relative;
}
.product-single-qa__submit span{
position: relative;
z-index: 2;
}
.product-single-qa__submit:hover{
color: #569EF0;
}
.product-single-qa__submit::before{
border-radius: 30px;
height: calc(100% - 4px);
width: calc(100% - 4px);
top: 2px;
left: 2px;
content: '';
position: absolute;
background-color: #fff;
opacity: 0;
transition: all .3s;
}
.product-single-qa__submit:hover::before{
opacity: 1;
}
.product-single-qa__items {
display: flex;
flex-direction: column;
gap: 32px;
}
.product-single-qa__item {
display: flex;
flex-direction: column;
gap: 20px;
border-bottom: 1px solid rgba(0,0,0,0.04);
padding-bottom: 20px;
}
.product-single-qa__message {
max-width: 760px;
}
.product-single-qa__message-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.product-single-qa__message-user {
display: flex;
align-items: center;
gap: 10px;
}
.product-single-qa__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
.product-single-qa__avatar--user {
background: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/single-product/Avatar.svg) center center / cover no-repeat;
}
.product-single-qa__avatar--brand {
background: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/single-product/Avatar-cosmopet.svg) center center / cover no-repeat;
}
.product-single-qa__user-name {
font-weight: 600;
font-size: 14px;
}
.product-single-qa__date {
font-size: 12px;
color: rgba(18, 18, 18, 0.5);
white-space: nowrap;
}
.product-single-qa__text {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: var(--text-black);
}
.product-single-qa__message--answer .product-single-qa__text {
color: rgba(18, 18, 18, 0.8);
}
@media (max-width: 900px) {
.product-single-qa__form-row {
flex-direction: column;
align-items: stretch;
}
.product-single-qa__submit {
width: 100%;
}
}
@media (max-width: 640px) {
.product-single-qa__message-head { }
.product-single-qa__date {
margin-top: 2px;
}
}
.product-single-shipping {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 40px;
}
.product-single-shipping__section {
display: flex;
flex-direction: column;
gap: 20px;
}
.product-single-shipping__title {
font-weight: 700;
font-size: 20px;
line-height: 1.3;
}
.product-single-shipping__intro {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: rgba(18, 18, 18, 0.9);
max-width: 860px;
}
.product-single-shipping__list {
display: flex;
flex-direction: column;
gap: 18px;
}
.product-single-shipping__item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.product-single-shipping__badge {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #4c9cff, #569ef0);
}
.product-single-shipping__content {
max-width: 860px;
}
.product-single-shipping__subtitle {
margin: 0 0 6px;
font-weight: 700;
font-size: 16px;
line-height: 1.4;
}
.product-single-shipping__bullets {
margin: 0;
padding-left: 16px;
list-style: disc;
font-size: 14px;
line-height: 1.7;
color: rgba(18, 18, 18, 0.9);
}
.product-single-shipping__bullets li + li {
margin-top: 4px;
}
.product-single-qa__message-head.--answer-head, .product-single-qa__text.--answer-head {
margin-left: 10%;
}
.rv-stars {
--star-size: 16px;
--stars: 5;
position: relative;
width: calc(var(--star-size) * var(--stars));
height: var(--star-size);
display: inline-block;
}
.rv-stars::before,
.rv-stars::after {
content: "";
position: absolute;
inset: 0;
background-repeat: repeat-x;
background-size: var(--star-size) var(--star-size);
}
.rv-stars::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23E6E6E6' d='M12 2.5l2.9 6 6.6.6-5 4.3 1.5 6.4L12 16.6 6 19.8l1.5-6.4-5-4.3 6.6-.6L12 2.5z'/></svg>");
}
.rv-stars::after {
width: var(--star-fill-percent, 0%);
overflow: hidden;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFC107' d='M12 2.5l2.9 6 6.6.6-5 4.3 1.5 6.4L12 16.6 6 19.8l1.5-6.4-5-4.3 6.6-.6L12 2.5z'/></svg>");
}
@media (max-width: 900px) {
.product-single-shipping__item {
align-items: flex-start;
}
}
@media (max-width: 640px) {
.product-single-shipping {
gap: 32px;
}
.product-single-shipping__item {
gap: 10px;
}
.product-single-shipping__badge {
width: 24px;
height: 24px;
font-size: 13px;
}
}
@media (max-width: 900px) {
.product-single-info__tabs {
overflow-x: auto;
padding-bottom: 4px;
}
.product-single-info__tab {
white-space: nowrap;
}
}
@media (max-width: 768px) {
.product-single-reviews__card-media--grid {
overflow: auto;
min-width: calc(100% + 52px);
padding-left: 26px;
margin-left: -26px;
}
.product-single-reviews__card-media-img {
max-width: 104px;
height: 132px;
}
.product-single-reviews__card-media-play{
height: 23px;
width: 23px;
}
.product-single-reviews__card-media-play svg{
height: 100%;
width: 100%;
}
}
@media (max-width: 640px) {
.product-info-links {
margin-top: 32px;
}
.product-info-links .product-info-links_link {
padding: 8px 16px 8px 24px;
background-color: #fff;
}
.product-single-shipping__intro {
font-size: 13px;
}
.product-single-qa__input {
padding: 20px 20px;
}
}
.product-single-modal {
max-width: 880px;
width: 100%;
padding: 32px 32px 28px;
border-radius: 24px;
background: #ffffff;
}
.product-single-modal .is-close-button {
width: 20px;
height: 20px;
color: var(--placeholder);
top: 12px;
right: 12px;
padding: 6px;
}
.product-single-modal .is-close-button:hover {
color: var(--placeholder);
background-color: transparent;
}
.product-single-modal-feeding__title {
font-size: 20px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
margin-bottom: 44px;
}
.product-single-modal-feeding__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.product-single-modal-feeding__col-title {
font-weight: 600;
font-size: 20px;
margin-bottom: 20px;
}
.product-single-modal-feeding__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
.product-single-modal-feeding__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-radius: 12px;
background: #f5f7fb;
font-size: 14px;
}
.product-single-modal-feeding__weight {
color: #4c9cff;
}
.product-single-modal-feeding__weight,
.product-single-modal-feeding__amount {
font-size: 16px;
font-weight: 600;
font-weight: 24px;
} @media (max-width: 768px) {
.product-single-modal {
max-width: 100%;
padding: 44px 18px 20px;
}
.product-single-modal-feeding__title {
margin-bottom: 24px;
}
.product-single-modal-feeding__grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
.product-single-modal-eprotein__title {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
text-transform: uppercase;
}
.product-single-modal-eprotein__logo {
height: 22px;
width: auto;
}
.product-single-modal-eprotein__body {
max-width: 520px;
font-size: 14px;
line-height: 24px;
color: var(--text-black);
margin-block: 44px;
}
.product-single-modal-eprotein__body p:not(:last-child) {
margin: 0 0 24px;
}
.product-single-modal-eprotein__accent {
display: inline;
color: #4c9cff;
font-weight: 600;
}
.product-single-modal-eprotein__actions {
display: flex;
justify-content: center;
gap: 12px;
}
.product-single-modal-eprotein__btn {
width: 100%;
flex: 1 1;
padding: 12px 20px;
border-radius: 999px;
border: none;
border-radius: 20px;
font-size: 20px;
font-weight: 500;
line-height: 24px;
text-transform: none;
cursor: pointer;
text-align: center;
transition: all .3s;
}
.product-single-modal-eprotein__btn--secondary {
background: #f2f3f7;
color: var(--text-black);
}
.product-single-modal-eprotein__btn--primary {
background: radial-gradient(154.31% 232.33% at 128.36% -48.29%, #EE6868 0%, #569EF0 57.69%);
color: #ffffff;
position: relative;
}
.product-single-modal-eprotein__btn--primary::before{
background-color: #fff;
content: '';
border-radius: 19px;
height: calc(100% - 4px);
width: calc(100% - 4px);
position: absolute;
top: 2px;
left: 2px;
opacity: 0;
transition: all .3s;
}
.product-single-modal-eprotein__btn--primary span{
z-index: 2;
position: relative;
}
.product-single-modal-eprotein__btn--primary:hover{
color: #569EF0;
}
.product-single-modal-eprotein__btn--primary:hover:before{
opacity: 1;
} @media (max-width: 640px) {
.product-single-modal-eprotein__body {
margin-block: 24px;
}
.product-single-modal-eprotein__actions {
flex-direction: column-reverse;
}
.product-single-modal-eprotein__btn {
width: 100%;
}
}
.product-single-modal-review{
max-width: 540px;
}
.product-single-modal-review__product {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 18px;
}
.product-single-modal-review__product-thumb {
width: 76px;
height: 104px;
border-radius: 16px;
overflow: hidden;
flex-shrink: 0;
background: #f5f5f5;
}
.product-single-modal-review__product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-single-modal-review__product-info {
flex: 1;
}
.product-single-modal-review__product-title {
font-weight: 600;
font-size: 14px;
line-height: 1.4;
margin-bottom: 8px;
}
.product-single-modal-review__rating {
display: inline-flex;
gap: 4px;
}
.product-single-modal-review__star {
width: 22px;
height: 22px;
border: none;
padding: 0;
background: none;
cursor: pointer;
position: relative;
}
.product-single-modal-review__star::before {
content: "";
position: absolute;
inset: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: grayscale(1) opacity(.35);
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/single-product/rating-star.svg);
}
.product-single-modal-review__star.is-active::before,
.product-single-modal-review__star.is-active ~ .product-single-modal-review__star::before {
}
.product-single-modal-review__star.hover:not(.is-filled)::before {
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/single-product/star-hover.svg) !important;
filter: none !important;
}
.product-single-modal-review__star.is-filled::before {
filter: none;
}
.product-single-modal-review__field {
margin-bottom: 14px;
}
.product-single-modal-review__comment {
width: 100%;
height: 100%;
min-height: 48px;
border-radius: 30px;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 12px 18px;
font-size: 14px;
line-height: 1.4;
resize: vertical;
outline: none;
}
.product-single-modal-review__comment::placeholder {
color: rgba(18, 18, 18, 0.4);
}
.product-single-modal-review__comment:focus {
border-color: #569ef0;
box-shadow: 0 0 0 1px rgba(86, 158, 240, 0.25);
}
.product-single-modal-review__media {
display: flex;
gap: 12px;
margin-bottom: 18px;
}
.product-single-modal-review__media-item {
width: 72px;
height: 72px;
border-radius: 18px;
overflow: hidden;
background: #f2f3f7;
position: relative;
flex-shrink: 0;
}
.product-single-modal-review__media-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-single-modal-review__media-item--add {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.product-single-modal-review__media-item--add input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.product-single-modal-review__media-add {
font-size: 28px;
line-height: 1;
color: rgba(18, 18, 18, 0.4);
}
.product-single-modal-review__actions {
display: flex;
justify-content: space-between;
gap: 12px;
}
.product-single-modal-review__btn {
flex: 1;
padding: 12px 20px;
border-radius: 999px;
border: none;
font-size: 20px;
font-weight: 500;
cursor: pointer;
text-align: center;
transition: all .3s;
position: relative;
}
.product-single-modal-review__btn--secondary {
background: #f2f3f7;
color: var(--text-black);
}
.product-single-modal-review__btn--primary {
background: radial-gradient(154.31% 232.33% at 128.36% -48.29%, #EE6868 0%, #569EF0 57.69%);
color: #ffffff;
position: relative;
}
.product-single-modal-review__btn--primary::before{
background-color: #fff;
content: '';
border-radius: 30px;
height: calc(100% - 4px);
width: calc(100% - 4px);
position: absolute;
top: 2px;
left: 2px;
opacity: 0;
transition: all .3s;
}
.product-single-modal-review__btn--primary span{
z-index: 2;
position: relative;
}
.product-single-modal-review__btn--primary:hover{
color: #569EF0;
}
.product-single-modal-review__btn--primary:hover:before{
opacity: 1;
}
@media (max-width: 640px) {
.product-single-modal-review__product {
align-items: flex-start;
}
.product-single-modal-review__actions {
flex-direction: column;
}
.product-single-modal-review__btn {
width: 100%;
}
}
.product-single-modal-review__media-list {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.product-single-modal-review__media-item {
width: 72px;
height: 72px;
border-radius: 18px;
overflow: hidden;
background: #f2f3f7;
position: relative;
flex-shrink: 0;
}
.product-single-modal-review__media-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-single-modal-review__media-item--video::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(0,0,0,0.45);
}
.product-single-modal-review__media-item--video::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-40%, -50%);
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #fff;
}
.product-single-modal-review__media-remove {
position: absolute;
top: 4px;
right: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.55);
color: #fff;
font-size: 12px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.product-single-modal-review__media {
margin-bottom: 18px;
height: 100px;
align-items: center;
}
.product-single-modal-review__dropzone {
position: relative;
border-radius: 18px;
background: #f5f7fb;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 12px 14px;
cursor: pointer;
width: 100%;
height: 100%;
display: flex;
}
.product-single-modal-review__dropzone.is-dragover {
background: #e0ecff;
border-color: #569ef0;
}
.product-single-modal-review__media-input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.product-single-modal-review__placeholder {
display: flex;
align-items: center;
gap: 10px;
}
.product-single-modal-review__placeholder-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
}
.product-single-modal-review__placeholder-icon svg {
width: 100%;
height: 100%;
}
.product-single-modal-review__placeholder-texts {
display: flex;
flex-direction: column;
}
.product-single-modal-review__placeholder-title {
font-size: 14px;
font-weight: 600;
color: rgba(18,18,18,0.9);
}
.product-single-modal-review__placeholder-sub {
font-size: 12px;
color: rgba(18,18,18,0.4);
}
.product-single-modal-review__media-list {
display: none;
gap: 12px;
flex-wrap: wrap;
}
.product-single-modal-review__media-item {
width: 72px;
height: 72px;
border-radius: 18px;
overflow: hidden;
background: #f2f3f7;
position: relative;
flex-shrink: 0;
}
.product-single-modal-review__media-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-single-modal-review__media-item--video::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(0,0,0,0.45);
}
.product-single-modal-review__media-item--video::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-40%, -50%);
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #fff;
}
.product-single-modal-review__media-remove {
position: absolute;
top: 4px;
right: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.55);
color: #fff;
font-size: 12px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.product-single-modal-review__media-item--add {
display: inline-flex;
align-items: center;
justify-content: center;
}
.product-single-modal-review__media-add {
font-size: 28px;
line-height: 1;
color: rgba(18,18,18,0.4);
}
.product-single-reviews__stars{
--star-size: 48px;
--stars: 5;
position: relative;
width: calc(var(--star-size) * var(--stars));
height: var(--star-size);
display: inline-block;
}
.product-single-reviews__stars::before,
.product-single-reviews__stars::after{
content:"";
position:absolute;
inset:0;
background-repeat: repeat-x;
background-size: var(--star-size) var(--star-size);
}
.product-single-reviews__stars::before{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23E6E6E6' d='M12 2.5l2.9 6 6.6.6-5 4.3 1.5 6.4L12 16.6 6 19.8l1.5-6.4-5-4.3 6.6-.6L12 2.5z'/></svg>");
}
.product-single-reviews__stars::after{
width: var(--p, 0%);
overflow: hidden;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFC107' d='M12 2.5l2.9 6 6.6.6-5 4.3 1.5 6.4L12 16.6 6 19.8l1.5-6.4-5-4.3 6.6-.6L12 2.5z'/></svg>");
}
.product-single-reviews__pagination {
margin-top: 20px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.product-single-reviews__pagination .pagination-btn {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
background: #fff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: .2s;
}
.product-single-reviews__pagination .pagination-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.product-single-reviews__pagination .pagination-btn[disabled] {
opacity: .45;
cursor: default;
transform: none;
box-shadow: none;
}
.product-single-reviews__pagination .pagination-pages {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.product-single-reviews__pagination .pagination-link {
min-width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0,0,0,.12);
background: #fff;
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: .2s;
}
.product-single-reviews__pagination .pagination-link:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.product-single-reviews__pagination .pagination-link.is-active {
background: #569ef0;
color: #fff;
border-color: transparent;
box-shadow: 0 10px 24px rgba(86,158,240,.35);
}
@media (max-width: 640px) {
.product-single-reviews__pagination {
justify-content: center;
}
}
.product-info-links_link-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 32px;
height: 32px;
transition: all .3s;
flex-shrink: 0;
}
.product-info-links_link-circle {
position: absolute;
inset: 0;
border-radius: 50%;
background-color: var(--accent-color);
transition: background .3s, transform .3s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='product-info-links_link-arrow' width='14' height='14' viewBox='0 0 38 38'%3E%3Cpath d='M13.7969 14.6266C13.7969 14.0976 14.2265 13.668 14.7555 13.668L23.3761 13.6689C23.9052 13.6689 24.3339 14.0976 24.3339 14.6266L24.3348 23.2472C24.3348 23.7763 23.9052 24.2059 23.3761 24.2059C22.8471 24.2059 22.4175 23.7763 22.4175 23.2472L22.4184 16.939L15.7 23.6573C15.326 24.0314 14.7195 24.0314 14.3454 23.6573C13.9714 23.2833 13.9714 22.6768 14.3454 22.3027L21.0638 15.5844L14.7555 15.5852C14.2265 15.5852 13.7969 15.1556 13.7969 14.6266Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
background-size: contain;
}
.product-info-links_link-arrow {
position: relative;
width: 30px;
height: 30px;
color: #ffffff;
transition: transform .3s;
}
.product-info-links_link:hover {
background-color: #fff;
}
@media (max-width: 640px) {
.product-single-modal-review__dropzone {
padding: 10px 10px;
}
.product-info-links .product-info-links_link-text{
text-align: left;
font-size: 15px;
padding-right: 2rem;
}
} .panel-in-cart .product-price {
display: none;
}
@media (max-width: 1150px) {
.product-single-reviews__aside-row{
justify-content: space-between;
}
.product-single-reviews__stars{
--star-size: 32px;
}
.product-single-reviews__aside-score{
font-size: 24px;
}
.product-single-reviews__aside-title{
margin-bottom: 1rem;
}
.product-single-reviews__aside-note{
font-size: 12px;
padding-top: 15px;
margin-top: 16px;
margin-bottom: 16px;
}
.product-single-reviews__aside-btn{
font-size: 14px;
}
.product-single-reviews__card-avatar{
height: 24px;
width: 24px;
}
body:has(.panel-in-cart #product-buy-block-wrapper .button) .newFooter {
padding-bottom: 100px;
}
.product-single-info__tab{
padding: 8px;
}
body:has(.panel-in-cart .product-incart.counter) .newFooter {
padding-bottom: 180px;
}
.product-info-links_link-icon{
height: 38px;
width: 38px;
}
.panel-in-cart {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: fixed;
left: 0;
bottom: var(--bottom-promo-gap);
z-index: 10;
border: 1px solid #3333333D;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
padding: 16px;
background-color: var(--background-white);
}
.product-single-info__tabs{
margin-left: -10px;
padding-left: 10px;
flex-wrap: nowrap;
min-width: calc(100% + 20px);
padding-right: 10px;
}
.panel-in-cart .product-price {
display: flex;
}
.panel-in-cart .product-price-main {
font-size: 16px;
font-weight: 600;
line-height: 19px;
}
.panel-in-cart:has(.product-incart.counter) {
flex-direction: column;
gap: 0 12px;
padding-top: 0;
}
.panel-in-cart #product-buy-block-wrapper {
max-width: 360px;
width: 100%;
}
.panel-in-cart #product-buy-block-wrapper .button {
height: 56px;
font-size: 20px;
font-weight: 600;
line-height: 24px;
border-radius: 20px;
margin-top: 0;
background: var(--accent-color);
}
.panel-in-cart #product-buy-block-wrapper .product-incart__wrap {
margin-top: 0;
}
.panel-in-cart #product-buy-block-wrapper .product-incart.counter {
max-height: 60px;
padding: 5px;
}
.panel-in-cart #product-buy-block-wrapper .product-incart__btn {
width: 50px;
height: 50px;
background-color: var(--accent-color);
}
.panel-in-cart #product-buy-block-wrapper .product-incart__count {
color: var(--accent-color)
}
.panel-in-cart #product-buy-block-wrapper .product-incart__label {
height: 60px;
}
.product-block-title{
font-size: 20px;
line-height: 22px;
text-transform: none;
}
} #product-eprotein-modal {
max-width: 540px;
}
#product-eprotein-modal .product-single-modal-eprotein__title {
justify-content: flex-start;
}
.fancybox__slide {
transform: none !important;
cursor: default !important;
}
.product-reviews .main-food_reviews-slide{
position: relative;
overflow: visible;
}
.product-reviews .main-food_reviews-slide::after{
position: absolute;
height: 80px;
width: 80px;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/star.png);
background-size: contain;
background-repeat: no-repeat;
top: 0px;
right: 0px;
content: '';
}
.pagination{
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 24px;
padding-bottom: 60px;
}
.pagination a:hover:not(.pagination-link){
text-decoration: underline;
}
.pagination-next.disabled, .pagination-prev.disabled{
opacity: .4;
}
.pagination-pages{
display: flex;
gap: 8px;
}
.pagination-link{
height: 44px;
width: 44px;
display: flex;
align-items: center;
justify-content: center;  border-radius: 10px;
}
.pagination-link:hover:not(.dots){
background: rgba(86, 158, 240, 0.06);
}
.pagination .pagination-link.current{
background: #569EF0;
color: #fff;
}
.product-cross-sales{
margin-top: 72px;
}
@media (max-width: 640px) {
.mform__info__col{
width: 100%;
}
.product-cross-sales {
margin-top: 24px;
}
}
.rv-side{
max-width: 340px;
}
.product-info .product-block-title{
text-transform: uppercase;
}
@media (min-width: 1151px){
.product-single-reviews__card-media--grid{
flex-wrap: wrap;
}
}
.single_add_to_cart_button{
position: relative;
}
.single_add_to_cart_button span{
position: relative;
z-index: 2;
}
#product-buy-block-wrapper .single_add_to_cart_button{
position: relative;
}
.single_add_to_cart_button::after{
background-color: #fff;
border-radius: 18px;
left: 2px;
top: 2px;
position: absolute;
width: calc(100% - 4px);
height: calc(100% - 4px);
content: '';
opacity: 0;
}
#product-buy-block-wrapper .single_add_to_cart_button:hover::after, .product-fixed-block__right .single_add_to_cart_button:hover::after{
opacity: 1;
}
#product-buy-block-wrapper .single_add_to_cart_button:hover,
.product-fixed-block__right .single_add_to_cart_button:hover{
color: #4c9cff;
}
#product-buy-block-wrapper .single_add_to_cart_button.button.loading::after, 
.product-fixed-block__right .single_add_to_cart_button.button.loading::after{
opacity: 0;
}
.product-fixed-block{
background-color: #fff;
z-index: 101;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 24px 0;
gap: 24px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
border-radius: 0px 0px 24px 24px;
transform: translateY(-100%);
transition: all .5s;
}
.product-fixed-block.--visible{
transform: translateY(0%);
}
@media (max-width: 1150px) {
.product-fixed-block{
display: none;
}
}
.product-fixed-block__content{
display: flex;
justify-content: space-between;
align-items: center;
}
.product-fixed-block__left{
display: flex;
align-items: center;
}
.product-fixed-block__img{
background-color: var(--bg-color);
border-radius: 20px;
height: 76px;
width: 76px;
padding: 10px;
}
.product-fixed-block__img img{
height: 100%;
width: 100%;
object-fit: contain;
}
.product-fixed-block__title{
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #121212;
}
.product-fixed-block__details{
display: flex;
}
.product-fixed-block__details__item{
font-weight: 700;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #121212;
}
.product-fixed-block__details__item:not(:last-child)::after{
margin-left: 8px;
margin-right: 8px;
border-radius: 50%;
background-color: #121212;
content: '';
height: 4px;
width: 4px;
}
.product-fixed-block__left .product-single-title__item--rating{
width: max-content;
}
.product-fixed-block__info{
margin-left: 24px;
}
.product-fixed-block__right{
display: flex;
align-items: center;
}
.product-fixed-block__right .product-incart__wrap.loading::before{
background: #fff;
}
.product-fixed-block__right .single_add_to_cart_button{
width: 290px;
}
.product-fixed-block__right .to-know{
margin-top: 0;
}
.product-single-title__item--rate{
flex-shrink: 0;
}
.product-reviews .product-block-title{
text-transform: uppercase;
}
@media (max-width: 640px) {
.product-reviews .main-food_reviews-slide-name {
padding-right: 48px;
}
.product-reviews .main-food_reviews-slide::after{
top: -30px;
}
}
.pageProduct{
padding-bottom: 6rem;
}
.f-panzoom__viewport{
background-color: #fff;
border-radius: 30px;
}.main-food_reviews {
border-radius: 40px;
padding: 24px;
max-width: 395px;
height: 672px;
flex-grow: 1;
position: relative;
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12);
background: #fff;
}
.main-food_reviews-title {
font-weight: 700;
font-size: 32px;
text-transform: uppercase;
color: #121212;
}
.main-food_reviews-slider {
position: relative;
}
.main-food_reviews-slide {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-radius: 8px;
min-height: 580px;
}
.main-food_reviews-slide-img {
border: 2px solid #fff;
border-radius: 32px;
object-fit: cover;
margin-bottom: 10px;
}
.main-food_reviews-slide-name {
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slide-position {
font-weight: 500;
font-size: 14px;
line-height: 140%;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slide-position:not(.--no-min-height){
min-height: 60px;
}
.main-food_reviews-slide-text {
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slide-text a{
color: #569ef0;
font-weight: 600;
text-decoration: underline;
}
.main-food_reviews-slide-head, .main-food_reviews-slide-position{
width: 100%;
}
.main-food_reviews-slide-text p {
margin-bottom: .5em;
}
.main-food_reviews-slider {
position: relative;
height: 97%;
}
.main-food_reviews-slider-index {
position: absolute;
left: 40%;
transform: translateX(-50%);
bottom: 30px;
z-index: 100;
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: #121212;
}
.main-food_arrows .swiper-button-next{
right: var(--swiper-navigation-sides-offset, -65px)!important;
left: auto;
}
.main-food_arrows .swiper-button-prev{
left: var(--swiper-navigation-sides-offset, -65px)!important;
right: auto;
}
.main-food_reviews-star {
position: absolute;
top: 0%;
right: 0%;
z-index: 2;
}
.main-food_reviews-slide-top {
display: flex;
justify-content: flex-start;
gap: 20px;
align-items: center;
width: 100%;
}
.main-food_reviews-slide-top img {
width: 48px;
height: 48px;
border-radius: 100%;
}
@media(max-width: 940px){
.main-food_reviews-title{
font-size: 24px;
}
.main-food_reviews-star{
width: 82px;
top: -20px;
}
.main-reviews_title{
font-size: 32px;
}
}
@media (max-width: 767px) {
.main-food_reviews {
padding: 16px 24px;
border-radius: 30px;
}
.main-food_reviews-slide-img {
width: 100%;
}
.main-food_reviews-slide-name {
font-size: 18px;
}
.main-food_reviews-slide-position{
font-weight: 500;
font-size: 14px;
background: radial-gradient(278.91% 196.13% at 128.36%  -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main-food_reviews-slide-text {
font-size: 14px;
}
.main-food_reviews-slider-index {
font-size: 14px;
}
.main-food_reviews-slide{
padding-left: 0;
padding-right: 0;
}
.main-reviews_title{
font-size: 32px;
}
} .main-food_reviews-slide-head{
position: relative;
}
.main-food_reviews-slide-photo{
height: 48px;
width: 48px;
flex-shrink: 0;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
object-fit: cover;
}
.main-food_reviews-slide-name, .main-food_reviews-slide-position{
padding-left: 64px;
}
.main-food_reviews-slide-name.--no-padding-left, .main-food_reviews-slide-position.--no-padding-left{
padding-left: 0;
}
.main-food_reviews-slide-name, .main-food_reviews-slide-position, .main-food_reviews-slide-head{
width: 100%;
}
.main-food_reviews-slide-media_file{
height: 220px;
width: 100%;
border-radius: 32px;
margin-bottom: 1rem;
object-fit: cover;
}
.main-food_reviews-slide-media_file-wrap{
width: 100%;
display: block;
}
@media (max-width: 640px) {
.main-food_reviews-slide-name{
min-height: 48px;
display: flex;
align-items: center;
}
.main-food_reviews-slide-position{
padding-left: 0;
}
}
.main-food_reviews-slide-media_main{
border-radius: 25px;
width: 168px;
height: 115px;
overflow: hidden;
}
.main-food_reviews-slide-media_main img{
width: 168px;
height: 115px;
}
.main-food_reviews-slide-media_mini{
width: 56px;
height: 70px;
border-radius: 16px;
overflow: hidden;
}
.main-food_reviews-slide-media_wrap{
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 20px;
}
.main-food_reviews-slide-media_wrap img{
object-fit: cover;
}
.main-food_reviews-slide-media_mini img{
width: 56px;
height: 70px;
}
.mform__review{
max-height: 90vh;
overflow: auto;
}
.mform__review-wrap{
background-color: #fff;
max-width: 1200px;
width: calc(100% - 20px);
border-radius: 32px;
padding: 40px;
margin: auto;
max-width: 1200px;
width: calc(100% - 20px);    position: relative;
}
.read-more{
font-weight: 500;
font-size: 16px;
line-height: 140%;
text-decoration: underline;
text-decoration-skip-ink: none;
background: radial-gradient(278.91% 196.13% at 128.36%  -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 1rem;
border-bottom: 1px rgb(86, 158, 240) solid;
display: block;
width: max-content;
}
@media (max-width: 640px) {
.mform__review-wrap{
padding: 24px;
padding-top: 60px;
padding-right: 10px;
}
.mform__review{
padding-right: 16px;
}
} .mform__review::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.mform__review::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}
.mform__review::-webkit-scrollbar-thumb {
background-color: #81bafc;
border-radius: 10px;
border: 2px solid #f5f5f5;
}
.mform__review::-webkit-scrollbar-thumb:hover {
background-color: #63acff;
}
@media (max-width: 576px) {
.main-food_reviews {
min-height: 720px;
height: 80vh;
max-height: 850px;
}
.main-food_reviews-slide {
min-height: 640px;
height: calc(80vh - 80px);
max-height: 770px;
}
}
.mform__review__media{
display: block;
width: 100%;
max-width: 350px;
}