diff --git a/storefront/app/pages/product/[slug].vue b/storefront/app/pages/product/[slug].vue
index ac6d0cfa..cb626001 100644
--- a/storefront/app/pages/product/[slug].vue
+++ b/storefront/app/pages/product/[slug].vue
@@ -38,7 +38,7 @@
/>
{{ product?.price }} $
{{ t('cards.product.stock') }} {{ product?.quantity }}
-
{{ product?.description }}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
{{ t('product.characteristics') }}
+
+
+
{{ group.name }}
+
+ {{ item.name }}
+ {{ item.valuesStr }}
+
+
+
+
+
{{ t('product.similar') }}
@@ -569,27 +567,26 @@ watch(
}
.characteristics {
- padding-top: 100px;
-
- &__wrapper {
- background-color: $main;
- border-radius: $less_border_radius;
- box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
- padding: 20px;
- }
+ margin-top: 100px;
+ display: flex;
+ flex-direction: column;
+ gap: 25px;
+ padding: 45px 25px;
+ border-radius: $default_border_radius;
+ border: 1px solid $border;
&__title {
- padding-bottom: 10px;
- border-bottom: 2px solid $primary_dark;
+ font-family: "Playfair Display", sans-serif;
color: $primary_dark;
- font-size: 24px;
- font-weight: 700;
+ font-size: 30px;
+ font-weight: 600;
+ letter-spacing: -0.5px;
}
&__list {
margin-top: 20px;
display: grid;
- grid-template-columns: repeat(auto-fit,minmax(100px, 30%));
+ grid-template-columns: repeat(auto-fit,minmax(30%, 30%));
gap: 40px;
}
@@ -622,6 +619,11 @@ watch(
z-index: 1;
background-color: $main;
padding-bottom: 1px;
+
+ color: $text;
+ font-size: 16px;
+ font-weight: 400;
+ letter-spacing: -0.5px;
}
&::after {
@@ -635,6 +637,11 @@ watch(
}
&-value {
+ color: $primary_dark;
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.5px;
+
& span {
&:first-child {
& span {
@@ -687,14 +694,10 @@ watch(
padding-inline: 10px;
aspect-ratio: 1;
border-radius: 50%;
- background-color: $main;
+ background-color: transparent;
@include hover {
- background-color: $main_hover;
-
- & span {
- color: $main;
- }
+ background-color: $link_secondary;
}
& span {