.single-prod {
padding-top: 4rem;
padding-bottom: 4rem;
}
.single-prod .cover {
display: flex;
flex-direction: column;
}
.single-prod .top {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
}
.single-prod .top .gallery {
display: flex;
flex: 1;
height: 40rem;
gap: 1rem;
}
.single-prod .top .gallery .list {
display: flex;
flex-direction: column;
flex: 0 0 8rem;
gap: 0.5rem;
}
.single-prod .top .gallery .list .item {
border: 1px solid #e9e9e9;
flex: 0 0 calc((100% - 2rem) / 5);
overflow: hidden;
display: flex;
cursor: pointer;
}
.single-prod .top .gallery .list .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-prod .top .gallery .main {
display: flex;
overflow: hidden;
border: 1px solid #e9e9e9;
}
.single-prod .top .gallery .main img {
width: 100%;
height: 100%;
object-fit: contain;
}
.single-prod .top .info-base {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 0 0 20rem;
}
.single-prod .top .info-base .brand,
.single-prod .top .info-base .sku,
.single-prod .top .info-base .stock {
font-size: 0.9rem;
}
.single-prod .top .info-base .name {
font-size: 1rem;
font-family: "Gotham Rounded";
}
.single-prod .top .info-base .price {
font-size: 1rem;
font-family: "Gotham Rounded";
color: var(--sky);
}
.single-prod .top .info-base .models {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.single-prod .top .info-base .models .mod {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem 1rem 0.1rem 1rem;
background: var(--black);
border: 1px solid var(--black);
border-radius: 2rem;
color: var(--white);
font-size: 0.9rem;
font-weight: normal;
}
.single-prod .top .info-base .product-variation .product-compatibility {
display: flex;
padding: 0.5rem;
font-size: 0.9rem;
border: 1px solid var(--black);
border-radius: 0.5rem;
text-transform: uppercase;
cursor: pointer;
}
.single-prod .top .info-base .add-cart {
display: flex;
gap: 1rem;
}
.single-prod .top .info-base .add-cart .quantity {
display: flex;
border: 1px solid #c9c9c9;
}
.single-prod .top .info-base .add-cart .quantity .btn-q {
border: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
cursor: pointer;
}
.single-prod
.top
.info-base
.add-cart
.quantity
input[type="number"]::-webkit-inner-spin-button,
.single-prod
.top
.info-base
.add-cart
.quantity
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.single-prod .top .info-base .add-cart .quantity .stk {
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
outline: none;
text-align: center;
padding: 0;
margin: 0;
border: 1px solid #c9c9c9;
border-top: 0;
border-bottom: 0;
width: 3rem;
}
.single-prod .top .info-base .add-cart .btn-add {
display: flex;
border: 0;
align-items: center;
justify-content: center;
padding: 0.5rem;
background-color: var(--black);
color: var(--white);
flex: 1;
cursor: pointer;
position: relative;
transition: opacity 0.2s ease;
}
.single-prod .top .info-base .add-cart .btn-add.is-loading {
color: var(--black);
pointer-events: none;
}
.single-prod .top .info-base .add-cart .btn-add.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #ffffff;
border-radius: 50%;
animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
.page-loading-lock {
position: fixed;
inset: 0;
z-index: 9998;
cursor: wait;
background: transparent;
}
.single-prod .top .info-base .space-error-cart {
display: none;
}
.single-prod .top .info-base .space-error-cart.is-visible {
display: block;
opacity: 0;
color: red;
font-size: 0.9rem;
font-family: "Gotham Rounded";
transition: opacity 0.2s ease;
}
.single-prod .top .info-base .space-error-cart.is-visible {
opacity: 1;
}
.single-prod .tabs {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 6rem;
}
.single-prod .tabs .options {
display: flex;
gap: 1rem;
border-top: 2px solid #e9e9e9;
}
.single-prod .tabs .options .btn-tab {
padding: 0.5rem;
background: none;
border: 0;
text-transform: uppercase;
position: relative;
font-family: "Gotham Rounded";
color: #a3a3a3;
cursor: pointer;
transition: all 0.3s ease;
}
.single-prod .tabs .options .btn-tab:hover {
color: var(--black);
}
.single-prod .tabs .options .btn-tab::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 100%;
height: 2px;
background: #e9e9e9;
}
.single-prod .tabs .options .btn-tab.active {
background-color: var(--sky);
color: var(--white);
border-radius: 0 0 0.5rem 0.5rem;
}
.single-prod .tabs .options .btn-tab:hover::before,
.single-prod .tabs .options .btn-tab.active::before {
background: var(--sky);
}
.single-prod .tabs .content .product-tab {
display: none;
}
.single-prod .tabs .content .product-tab strong,
.single-prod .tabs .content .product-tab h4 {
font-family: "Gotham Rounded";
font-weight: normal;
}
.single-prod .tabs .content .product-tab h4 {
margin-bottom: 1rem;
}
.single-prod .tabs .content .product-tab.active {
display: block;
font-size: 0.9rem;
}
.single-prod .related {
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
}
.single-prod .related .title-rel {
font-family: "Gotham Rounded";
}
.single-prod .related .carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--white);
border: 1px solid #e9e9e9;
border-radius: 50%;
cursor: pointer;
z-index: 3;
transition: all 0.3s ease;
}
.single-prod .related .carousel-btn.prev {
left: -1.25rem;
}
.single-prod .related .carousel-btn.next {
right: -1.25rem;
}
.single-prod .related .carousel-btn:hover {
background-color: var(--yellow);
border-color: var(--yellow);
}
.single-prod .related .carousel-btn.disabled {
opacity: 0.3;
cursor: auto;
}
.single-prod .related .carousel-btn.disabled:hover {
background-color: var(--white);
border-color: #e9e9e9;
}
.single-prod .related .list-rel {
display: flex;
width: 100%;
gap: 2rem;
align-content: flex-start;
flex-wrap: nowrap;
overflow-x: hidden;
scroll-behavior: smooth;
}
.single-prod .related .list-rel .product-card {
width: calc((100% - 6rem) / 4);
flex: 0 0 calc((100% - 6rem) / 4);
overflow: hidden;
position: relative;
}
.single-prod .related .list-rel .product-card .link {
display: flex;
flex-direction: column;
height: 100%;
}
.single-prod .related .list-rel .product-card .product-image {
height: 20rem;
display: flex;
align-items: center;
justify-content: center;
background-color: #efefef;
margin-bottom: 1rem;
overflow: hidden;
position: relative;
}
.single-prod .related .list-rel .product-card .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-prod .related .list-rel .product-card .brand {
font-size: 0.9rem;
color: #858585;
margin-bottom: 0.5rem;
}
.single-prod .related .list-rel .product-card .name {
color: var(--blue);
font-size: 0.85rem;
margin-bottom: 0.5rem;
font-family: "Gotham Rounded", sans-serif;
}
.single-prod .related .list-rel .product-card .price {
color: var(--black);
font-size: 1rem;
font-family: "Gotham Rounded", sans-serif;
margin-top: auto;
}
.single-prod .related .list-rel .product-card .add-item {
position: absolute;
top: calc(20rem - 3rem);
left: 50%;
background-color: var(--yellow);
color: var(--black);
opacity: 0;
transform: translate(-50%, 2rem);
transition: all 0.3s ease;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 0.5rem;
font-family: "Gotham Rounded";
font-size: 0.9rem;
z-index: 2;
text-wrap: nowrap;
cursor: pointer;
}
.single-prod .related .list-rel .product-card .add-item:hover {
background-color: var(--white);
}
.single-prod .related .list-rel .product-card:hover .add-item {
opacity: 1;
transform: translate(-50%, 0);
}
.single-prod .related .list-rel .product-card .add-item.is-loading {
opacity: 1;
color: transparent;
}
.single-prod .related .list-rel .product-card .add-item.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid #9a9a9a66;
border-top-color: var(--black);
border-radius: 50%;
animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
} @media (max-width: 100rem) { }
@media (max-width: 75rem) { .single-prod .related .list-rel .product-card {
flex: 0 0 calc((100% - 4rem) / 3);
width: calc((100% - 4rem) / 3);
}
}
@media (max-width: 62rem) { .single-prod .top {
flex-direction: column;
margin-bottom: 0;
}
.single-prod .top .gallery {
height: auto;
}
.single-prod .top .info-base {
flex: auto;
}
.single-prod .tabs {
margin-top: 2rem;
margin-bottom: 3rem;
}
}
@media (max-width: 48rem) { .single-prod .top .gallery .list {
flex: 0 0 6rem;
}
.single-prod .related .list-rel .product-card {
flex: 0 0 calc((100% - 2rem) / 2);
width: calc((100% - 2rem) / 2);
}
}
@media (max-width: 36rem) { .single-prod {
padding-top: 2rem;
padding-bottom: 2rem;
}
.single-prod .top .gallery {
flex-direction: column-reverse;
}
.single-prod .top .gallery .list {
flex: 0 0 4rem;
flex-direction: row;
}
.single-prod .top .gallery .list .item img {
object-fit: contain;
}
.single-prod .top .info-base {
gap: 0.5rem;
}
.single-prod .top .info-base .price {
font-size: 1.5rem;
}
.single-prod .top .info-base .add-cart .btn-add {
font-size: 1rem;
}
.single-prod .related .list-rel {
gap: 1rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.single-prod .related .list-rel::-webkit-scrollbar {
display: none;
}
.single-prod .related .list-rel .product-card {
flex: 0 0 calc((100% - 2rem) / 2.5);
width: calc((100% - 2rem) / 2.5);
}
.single-prod .related .list-rel .product-card .product-image {
height: 12rem;
}
.single-prod .related .list-rel .product-card .product-image img {
object-fit: contain;
}
.single-prod .related .list-rel .product-card .add-item {
display: none;
}
.single-prod .related .carousel-btn {
display: none;
}
.single-prod .top .info-base .product-variation .product-compatibility {
width: 100%;
text-align: center;
}
}