face-age 2.2.4 → 2.3.1

package/dist/faceage.css

@@ -414,7 +414,7 @@ body {
 }
 
 .product_problem_support.swiper.myProductProblem {
-    margin-bottom: 10px !important;
+    margin-bottom: 0 !important;
 }
 
 .products {
@@ -437,7 +437,7 @@ body {
 }
 
 .product_item .routine_group {
-    margin-bottom: 6px;
+    margin-bottom: 0;
     font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
@@ -497,12 +497,15 @@ body {
 }
 
 .product_item .product_variables {
-    margin: 10px 0;
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 .product_item .product_variables .item{
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 0;
 }
 
 .product_item .product_variables label {
@@ -1967,7 +1970,7 @@ body {
     padding: 12px;
     width: 100%;
     margin: 21px auto 0;
-    border-radius: 0px 0px 15px 15px;
+    border-radius: 12px;
     display: block;
     color: #fff;
     font-weight: bold;
@@ -2031,9 +2034,10 @@ body {
 }
 .dZaMnF {
     display: flex;
+    gap: 8px;
     -webkit-box-align: stretch;
     align-items: stretch;
-    overflow: hidden;
+    overflow: visible;
     border-radius: 0px 0px 15px 15px;
 }
 
@@ -2074,6 +2078,7 @@ body {
     font-size: 14px;
     text-align: left;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
+    padding: 8px;
 }
 
 .modal_window .title {
@@ -2100,7 +2105,7 @@ body {
 }
 
 .form_window .title {
-    padding: 12px 12px 5px;
+    /* padding: 24px; */
     font-weight: bold;
 }
 
@@ -2125,7 +2130,9 @@ body {
     right: 0;
 }
 
-
+.face_age_form .elements .action {
+    margin-top: 24px !important;
+}
 
 .info_window {
     background: #fff;
@@ -2137,6 +2144,36 @@ body {
     font-size: 14px;
     text-align: left;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
+    padding: 8px;
+}
+
+.info_window .action {
+    width: 90%;
+    margin: 16px auto;
+}
+
+.info_window .action .goToBack {
+    max-width: 96px;
+}
+
+.info_window .action .sc-1x1y2bq-3.disable,
+.face_age_info .action .sc-1x1y2bq-3.disable {
+    border: 2px solid #a2a2a2;
+    background: #a2a2a2;
+    color: #f5f5f5;
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.info_window .action .sc-1x1y2bq-3.disable:hover,
+.face_age_info .action .sc-1x1y2bq-3.disable:hover {
+    background: #a2a2a2;
+    color: #f5f5f5;
+    opacity: 0.6;
+}
+
+.info_window .action .sc-1x1y2bq-3 {
+    width: 100%;
 }
 
 
@@ -2339,7 +2376,7 @@ body {
 }
 
 .routine_item {
-    margin-bottom: 25px;
+    margin: 36px 0;
     padding-bottom: 10px;
     border-bottom: 1px solid #e6e8f0;
 }
@@ -2350,24 +2387,49 @@ body {
 
 
 .textInput input {
-    background-color: transparent;
-    color: rgb(117 117 117 / 65%);
+    background-color: #ffffff;
+    color: #1f2933;
     font-size: 14px;
-    border-radius: 3.5px;
-    padding: 14px;
+    border-radius: 16px;
+    padding: 16px 18px;
     width: 100%;
     line-height: 1.22;
-    border: 1px solid var(--quiz_input_color);
+    border: 1px solid rgba(151, 162, 189, 0.45);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+    transition: background 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
+}
+.textInput input::placeholder {
+    color: rgba(79, 86, 101, 0.6);
+}
+.textInput input:focus {
+    outline: none;
+    border-color: var(--basic);
+    box-shadow: 0 0 0 2px var(--basic);
+    transform: translateY(-1px);
 }
 .textInput select {
-    background-color: transparent;
-    color: rgb(117 117 117);
+    background-color: #ffffff;
+    color: #1f2933;
     font-size: 14px;
-    border-radius: 3.5px;
-    padding: 14px;
+    border-radius: 16px;
+    padding: 16px 18px;
     width: 100%;
     line-height: 1.22;
-    border: 1px solid var(--quiz_input_color);
+    border: 1px solid rgba(151, 162, 189, 0.45);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+    transition: background 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
+    appearance: none;
+    background-image: none;
+    background-repeat: no-repeat;
+    background-position: right 18px center;
+    background-size: 12px 12px;
+}
+.textInput select:focus {
+    outline: none;
+    background: #ffffff;
+    border-color: var(--basic);
+    box-shadow: 0 0 0 2px var(--basic);
+    transform: translateY(-1px);
 }
 
 .app_bar .header_tools .title img {
@@ -2379,14 +2441,28 @@ body {
 }
 
 .textInput textarea {
-    background-color: transparent;
-    color: rgb(117 117 117 / 65%);
+    background-color: #ffffff;
+    color: #1f2933;
     font-size: 14px;
-    border-radius: 3.5px;
-    padding: 14px;
+    border-radius: 16px;
+    padding: 16px 18px;
     width: 100%;
-    line-height: 1.22;
-    border: 1px solid var(--quiz_input_color);
+    line-height: 1.5;
+    border: 1px solid rgba(151, 162, 189, 0.45);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+    transition: background 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
+    resize: vertical;
+    min-height: 120px;
+}
+.textInput textarea::placeholder {
+    color: rgba(79, 86, 101, 0.6);
+}
+.textInput textarea:focus {
+    outline: none;
+    background: #ffffff;
+    border-color: var(--basic);
+    box-shadow: 0 0 0 2px var(--basic);
+    transform: translateY(-1px);
 }
 
 .textInput {
@@ -2432,13 +2508,16 @@ body {
 .input_select .item .ico {
     pointer-events: none;
     flex-shrink: 0;
-    margin-right: 12px;
-    height: 31px;
-    width: 31px;
+    /* margin-right: 12px; */
+    height: 30px;
+    width: 30px;
 }
 
 .input_select .item .ico img {
-    width: 31px;
+    object-fit: cover;
+    aspect-ratio: 1 / 1;
+    width: 30px;
+    border-radius: 4px;
 }
 .input_select .item.active .ico img {
     /*filter: brightness(0) invert(1);*/
@@ -2448,6 +2527,9 @@ body {
 .bLwrg.disabale {
     opacity: 0.5;
     background: #a2a2a2;
+    border: 2px solid #a2a2a2;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 
 .skin_report .score {
@@ -2672,8 +2754,9 @@ body {
 
 .privacy_face_age {
     display: flex;
-    justify-content: space-between;
-    align-items: self-start;
+    align-items: flex-start;
+    gap: 12px;
+    justify-content: flex-start;
 }
 
 .privacy_face_age .text {
@@ -2703,8 +2786,10 @@ body {
 }
 .form_window .title {
     width: 100%;
-    margin-top: 4px;
-    margin-bottom: 10px;
+}
+
+.face_age_form > div > div > div.box_title {
+    padding:24px;
 }
 
 
@@ -2728,34 +2813,51 @@ body {
     width: 100%;
 }
 
+.face_age_info .title h2 {
+    color: var(--basic_action);
+}
+
+
 .privacy_face_age .check_box {
-    inset: 2px;
-    padding: 2px;
-    color: rgb(51, 51, 51);
-    height: 21px;
-    min-width: 21px;
-    width: 21px;
-    margin-right: 10px;
-    border: 2px solid #000;
-    border-radius: 4px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 26px;
+    height: 26px;
+    border: 2px solid #D1D5DB;
+    border-radius: 8px;
+    background: #fff;
+    transition: all .25s ease;
     cursor: pointer;
 }
 
-.check_box_input {width: 100%;height: 100%;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;}
+.privacy_face_age .check_box_input {
+    display: none;
+}
 
-.check_box_input svg {
+.privacy_face_age .check_box::after {
+    content: '';
     width: 100%;
     height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 14px 14px;
     opacity: 0;
-    -webkit-transition: all 0.2s;
-    -moz-transition: all 0.2s;
-    -ms-transition: all 0.2s;
-    -o-transition: all 0.2s;
-    transition: all 0.2s;
+    transition: all .25s ease;
+}
+
+.privacy_face_age .check_box.active {
+    border-color: #000000;
+    background-color: rgba(253, 253, 253, 0.3);
+    transform: scale(1.02);
+    box-shadow: 0 16px 40px rgba(0,0,0,0.10), 0 10px 24px rgba(0,0,0,0.06);
 }
 
-.privacy_face_age .check_box.active .check_box_input svg{
+.privacy_face_age .check_box.active::after {
     opacity: 1;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
 }
 
 .progress_box_problem {
@@ -2817,7 +2919,7 @@ body {
 }
 
 .el_box {
-    margin-bottom: 5px;
+    margin-bottom: 24px;
 }
 
 p.err {
@@ -2837,7 +2939,7 @@ p.err {
     background: var(--basic_action);
     color: var(--color_action);
     border: 0;
-    border-radius: 0px 0px 15px 15px;
+    border-radius: 16px;
     cursor: pointer;
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
@@ -3493,3 +3595,912 @@ p.err {
     display: block;
     max-width: 100%;
 }
+
+.faceage-feedback {
+    padding: 12px 0 0;
+    display: flex;
+    justify-content: center;
+}
+
+.faceage_feedback_host {
+    margin-top: 16px;
+}
+
+.faceage-feedback-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: 12px;
+    width: 100%;
+    max-width: 360px;
+}
+
+.faceage-feedback-title {
+    font-weight: 400;
+    font-size: 12px;
+    color: #747474;
+    flex: 1;
+    min-width: 120px;
+    text-align: center;
+}
+
+.faceage-feedback-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    width: 100%;
+}
+
+.faceage-feedback-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid #e0e4ec;
+    background: transparent;
+    color: #1d1b20;
+    border-radius: 14px;
+    padding: 10px 14px;
+    cursor: pointer;
+    font-weight: 600;
+    box-shadow: none;
+    transition: all 0.2s ease;
+}
+
+.faceage-feedback-btn .faceage-feedback-icon {
+    display: inline-flex;
+}
+
+.faceage-feedback-btn:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.faceage-feedback-btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
+}
+
+.faceage-feedback-btn--active {
+    background: var(--basic);
+    border-color: var(--basic);
+    color: #ffffff;
+}
+
+.faceage-feedback-btn--locked {
+    cursor: default;
+}
+
+.faceage-feedback-status {
+    font-size: 12px;
+    color: #747474;
+    font-weight: 300;
+    margin-top: 4px;
+}
+
+.faceage-feedback-status--error {
+    color: #d93025;
+}
+
+@media only screen and (max-width: 768px) {
+    .faceage-feedback-card {
+        flex-direction: column;
+        align-items: center;
+        max-width: 320px;
+    }
+    .faceage-feedback-actions {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+
+/* Styles moved from Core.js inline style */
+.mask_face_positoon_center .backdrop.svelte-wisvax::after {
+    -webkit-mask: linear-gradient(to right, #000, #000), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9IjM4OSIgdmlld0JveD0iMCAwIDMzNiAzODkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGVsbGlwc2UgY3g9IjE2OCIgY3k9IjE5NC41IiByeD0iMTY3IiByeT0iMTkzLjUiLz48L3N2Zz4K") center / auto 100% no-repeat;
+    mask: linear-gradient(to right, #000, #000), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9IjM4OSIgdmlld0JveD0iMCAwIDMzNiAzODkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGVsbGlwc2UgY3g9IjE2OCIgY3k9IjE5NC41IiByeD0iMTY3IiByeT0iMTkzLjUiLz48L3N2Zz4K") center / auto 100% no-repeat;
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+}
+.mask_face_positoon_center .before\:absolute:before {
+    content: " ";
+    position: absolute;
+}
+.mask_face_positoon_center .before\:shadow-\[0px_0px_0_100vmax_black\]:before {
+    content: " ";
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 100vmax black;
+}
+.mask_face_positoon_center .before\:w-auto:before {
+    content: " ";
+    width: auto;
+}
+.mask_face_positoon_center .before\:h-\[calc\(100\%-2px\)\]:before {
+    content: " ";
+    height: calc(100% - 2px);
+}
+.mask_face_positoon_center .before\:aspect-\[336\/389\]:before {
+    content: " ";
+    aspect-ratio: 336 / 389;
+}
+.mask_face_positoon_center .before\:top-\[1px\]:before {
+    content: " ";
+    top: 1px;
+}
+.mask_face_positoon_center .after\:bg-black:after {
+    content: " ";
+    background-color: rgb(0 0 0 / 1);
+}
+.mask_face_positoon_center .after\:w-auto:after {
+    content: " ";
+    width: auto;
+}
+.mask_face_positoon_center .after\:h-full:after {
+    content: " ";
+    height: 100%;
+}
+.mask_face_positoon_center .after\:aspect-\[336\/389\]:after {
+    content: " ";
+    aspect-ratio: 336 / 389;
+}
+.mask_face_positoon_center .after\:top-0:after {
+    content: " ";
+    top: 0;
+}
+.mask_face_positoon_center .after\:absolute:after {
+    content: " ";
+    position: absolute;
+}
+.mask_face_positoon_center .frame.svelte-wisvax {
+    -webkit-mask: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.29));
+    mask: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.29));
+}
+.mask_face_positoon_center .transition-\[color\] {
+    transition-property: color;
+    transition-timing-function: cubic-bezier(.5, 0, .5, 1);
+    transition-duration: .15s;
+}
+.mask_face_positoon_center .aspect-\[336\/389\] {
+    aspect-ratio: 336 / 389;
+}
+.mask_face_positoon_center .frame.svelte-wisvax > * {
+    height: 100%;
+    width: 100%;
+}
+.mask_face_positoon_center :where(.icon-ellipse-ea4be9f3) {
+    --icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9IjM4OSIgdmlld0JveD0iMCAwIDMzNiAzODkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxlbGxpcHNlIGN4PSIxNjgiIGN5PSIxOTQuNSIgcng9IjE2NyIgcnk9IjE5My41IiAvPjwvc3ZnPg==);
+    display: inline-block;
+    width: 21rem;
+    height: 24.3125rem;
+    background-color: currentColor;
+    -webkit-mask-image: var(--icon);
+    mask-image: var(--icon);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    color: #fff;
+}
+.mask_face_positoon_center .-translate-x-1\/2 {
+    transform: translate(-50%, 0) rotate(0) skew(0) skewY(0) scaleX(1) scaleY(1);
+}
+.mask_face_positoon_center .help_center svg {
+    display: block;
+    vertical-align: middle;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+    color: #fff;
+}
+.facePosition .helpTextPosition {
+    height: 68px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    width: 100%;
+    bottom: -65px;
+    position: absolute;
+    text-align: center;
+    color: white;
+    font-size: 14px;
+    display: flex;
+    padding: 0 37px;
+}
+.facePosition .helpTextPosition svg {
+    width: 24px;
+    height: 24px;
+    margin: 0 5px;
+    display: inline-block;
+    vertical-align: middle;
+    stroke: #fff;
+    color: #ffff;
+}
+.mask_face_positoon_center .help_center .direction-indicator-container svg {
+    position: relative;
+}
+.mask_face_positoon_center .help_center .direction-indicator-container {
+    transform-origin: center center calc(-1px * var(--radius));
+    transform: translateX(-50%) translateY(-50%) rotateY(calc(-1deg * var(--angle-y, 0))) rotateX(calc(-1deg * var(--angle-x, 0))) rotateZ(calc(-1deg * var(--angle-z, 0)));
+    width: 14.67%;
+    height: auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+}
+.product_item {
+    position: relative;
+}
+.product_item .product_media_box {
+    position: relative;
+    width: 100%;
+    display: block;
+}
+.fa-product-card.fa-preset-prime .product_media_box {
+    position: relative;
+    width: 100%;
+    display: block;
+}
+.fa-product-card.fa-preset-apex .routine_group {
+    top: 16px;
+    left: 16px;
+}
+.fa-product-card.fa-preset-apex .product_media_box {
+    position: relative;
+    width: 100%;
+    display: block;
+    overflow: hidden;
+    flex: 0 0 70%;
+    height: 70%;
+}
+.fa-product-card.fa-preset-apex .product_media_box::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
+    pointer-events: none;
+}
+.fa-product-card.fa-preset-apex .product_info_overlay {
+    position: relative;
+    margin-top:-55px;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    justify-content: center;
+    padding: 16px;
+    color: #fff;
+    flex: 1 1 30%;
+    min-height: 30%;
+}
+.fa-product-card.fa-preset-apex .product_action_row_apex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 16px;
+    width: 100%;
+}
+@media (max-width: 600px) {
+    .fa-product-card.fa-preset-apex .product_action_row_apex,
+    .fa-product-card.fa-preset-apex .product_action_row {
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 10px;
+    }
+    .fa-product-card.fa-preset-apex .product_action_row_apex .product_price,
+    .fa-product-card.fa-preset-apex .product_action_row .product_price {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        gap: 8px;
+    }
+}
+.fa-product-card.fa-preset-apex .product_header_row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+}
+.product_item .routine_group {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 0.2px;
+    z-index: 1;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    margin-bottom: 0;
+}
+.fa-product-card.fa-preset-prime .routine_group {
+    top: auto;
+    bottom: 12px;
+    left: 12px;
+    background: rgba(255, 255, 255, 0.45);
+    color: #0f172a;
+    padding: 6px 12px;
+    border-radius: 999px;
+    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
+}
+.fa-product-card.fa-preset-genesis {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.07);
+    border-radius: 24px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+}
+.fa-product-card.fa-preset-prime {
+    background: #fff;
+    border: 1px solid #e6e8f0;
+    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
+    border-radius: 24px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+}
+.fa-product-card.fa-preset-apex {
+    background: #000;
+    border: none;
+    box-shadow: 0 22px 60px rgba(0,0,0,0.35);
+    border-radius: 28px;
+    padding: 0;
+    overflow: hidden;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+}
+.fa-product-card.fa-preset-genesis .product_item_link,
+.fa-product-card.fa-preset-prime .product_item_link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+.fa-product-card.fa-preset-apex .product_item_link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.fa-product-card.fa-preset-genesis .fa-product-img,
+.fa-product-card.fa-preset-prime .fa-product-img {
+    width: 100%;
+    height: auto;
+    border-radius: 20px;
+    display: block;
+    object-fit: cover;
+}
+.fa-product-card.fa-preset-apex .fa-product-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.fa-product-card.fa-preset-genesis .routine_group {
+    top: 12px;
+    left: 12px;
+    padding: 4px 10px;
+    background: rgba(0, 0, 0, 0.3);
+    color: #fff;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.2px;
+    line-height: 1.2;
+    display: inline-flex;
+    gap: 6px;
+    z-index: 1;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+}
+.fa-product-card.fa-preset-genesis .product_title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 12px 0 4px 0;
+}
+.fa-product-card.fa-preset-genesis .product_description {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 0;
+}
+.fa-product-card.fa-preset-prime .product_title {
+    font-size: 18px;
+    font-weight: 700;
+    margin: 12px 0 6px 0;
+    color: #0f172a;
+}
+.fa-product-card.fa-preset-prime .product_description {
+    font-size: 14px;
+    color: #475569;
+    margin: 0;
+}
+.fa-product-card.fa-preset-apex .product_title {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+    color: #fff;
+}
+.fa-product-card.fa-preset-apex .product_description {
+    font-size: 15px;
+    color: #BEBEBE;
+    margin: 0;
+}
+.fa-product-card.fa-preset-genesis .product_problem_support,
+.fa-product-card.fa-preset-prime .product_problem_support,
+.fa-product-card.fa-preset-apex .product_problem_support {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+.fa-product-card.fa-preset-prime .product_problem_support {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    color: #808080;
+    font-size: 12px;
+}
+.fa-product-card.fa-preset-prime .product_problem_support .swiper-wrapper {
+    display: inline;
+}
+.fa-product-card.fa-preset-prime .product_problem_support .swiper-slide {
+    display: inline;
+    width: auto !important;
+}
+.fa-product-card.fa-preset-apex .product_problem_support {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    color: #BEBEBE;
+    font-size: 13px;
+}
+.fa-product-card.fa-preset-genesis .product_problem_item {
+    border: 1px solid var(--product_action);
+    color: var(--product_action);
+    background: #fff;
+    border-radius: 999px;
+    padding: 4px 10px;
+    font-weight: 400;
+    font-size: 12px;
+    box-shadow: none;
+    text-transform: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.fa-product-card.fa-preset-prime .product_problem_item {
+    border: none;
+    color: #808080;
+    background: transparent;
+    border-radius: 0;
+    padding: 0;
+    font-weight: 300;
+    font-size: 13px;
+    line-height: 1.5;
+    box-shadow: none;
+    text-transform: none;
+    display: inline;
+}
+.fa-product-card.fa-preset-apex .product_problem_item {
+    border: none;
+    color: #e2e8f0;
+    background: transparent;
+    border-radius: 0;
+    padding: 0;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 1.5;
+    box-shadow: none;
+    text-transform: none;
+    display: inline;
+}
+.fa-product-card.fa-preset-prime .product_variables select {
+    border-radius: 48px;
+}
+.fa-product-card.fa-preset-apex .product_variables select {
+    border-radius: 48px;
+    border: 1px solid #BEBEBE;
+    background: transparent;
+    color: #BEBEBE;
+}
+.fa-product-card.fa-preset-genesis .product_price {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    margin: 0;
+}
+.fa-product-card.fa-preset-prime .product_price {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin: 2px 0 0 0;
+}
+.fa-product-card.fa-preset-prime .product_action_row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 6px;
+}
+@media screen and (max-width: 600px) {
+    .fa-product-card.fa-preset-prime .product_action_row {
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 10px;
+    }
+    .fa-product-card.fa-preset-prime .product_action_row .product_price {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        gap: 8px;
+    }
+    .fa-product-card.fa-preset-prime  {
+        padding: 8px !important;
+    }
+    .fa-product-card.fa-preset-prime .fa-addToCart-btn {
+        font-size: 14px !important;
+        padding: 10px 12px !important;
+        font-weight: 500 !important;
+    }
+    .fa-product-card.fa-preset-prime .routine_group {
+        padding: 4px;
+        font-size: 10px;
+        bottom: 8px;
+        left: 8px;
+    }
+}
+.fa-product-card.fa-preset-prime .product_action_row .product_price {
+    margin: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: baseline;
+    gap: 0;
+    flex-direction: column;
+}
+@media (max-width: 600px) {
+    .fa-product-card.fa-preset-prime .product_action_row .product_price {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        gap: 8px;
+    }
+}
+.fa-product-card.fa-preset-apex .product_price {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+}
+@media (max-width: 600px) {
+    .fa-product-card.fa-preset-apex .product_action_row_apex .product_price,
+    .fa-product-card.fa-preset-apex .product_action_row .product_price {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        gap: 8px;
+    }
+}
+.fa-product-card.fa-preset-genesis .product_price .price {
+    color: var(--product_action);
+    font-size: 16px;
+    font-weight: 600;
+}
+.fa-product-card.fa-preset-prime .product_price .price {
+    color: var(--product_action);
+    font-size: 18px;
+    font-weight: 600;
+}
+.fa-product-card.fa-preset-apex .product_price .price {
+    color: var(--product_action);
+    font-size: 18px;
+    font-weight: 700;
+}
+.fa-product-card.fa-preset-genesis .product_price .old {
+    color: #94a3b8;
+    font-size: 14px;
+    text-decoration: line-through;
+    font-weight: 400;
+}
+.fa-product-card.fa-preset-prime .product_price .old {
+    color: #94a3b8;
+    font-size: 14px;
+    text-decoration: line-through;
+    font-weight: 500;
+    margin-left: 0;
+}
+.fa-product-card.fa-preset-apex .product_price .old {
+    color: #BEBEBE;
+    font-size: 14px;
+    text-decoration: line-through;
+    font-weight: 500;
+    opacity: 1;
+    margin-left: 0;
+}
+.fa-product-card.fa-preset-genesis .fa-addToCart-btn {
+    width: 100%;
+    background: var(--product_action);
+    color: #fff;
+    border: none;
+    border-radius: 12px;
+    padding: 14px 16px;
+    font-size: 16px;
+    font-weight: 700;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
+    cursor: pointer;
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+    /* min-height: 52px; */
+}
+.fa-product-card.fa-preset-prime .fa-addToCart-btn {
+    width: 100%;
+    background: var(--product_action);
+    color: #fff;
+    border: none;
+    border-radius: 128px;
+    padding: 14px 16px;
+    font-size: 16px;
+    font-weight: 700;
+    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
+    cursor: pointer;
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+    /* min-height: 50px; */
+}
+.fa-product-card.fa-preset-prime .product_action_row .fa-addToCart-btn {
+    width: 100%;
+    padding: 14px 20px;
+}
+.fa-product-card.fa-preset-apex .fa-addToCart-btn {
+    width: 100%;
+    background: var(--product_action);
+    color: #04111c;
+    border: none;
+    border-radius: 128px;
+    padding: 14px 18px;
+    font-size: 16px;
+    font-weight: 600;
+    box-shadow: 0 18px 40px rgba(0,0,0,0.32);
+    cursor: pointer;
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+    min-height: 54px;
+}
+.fa-product-card.fa-preset-genesis .fa-addToCart-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 14px 36px rgba(0,0,0,0.14);
+}
+.fa-product-card.fa-preset-genesis .fa-addToCart-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
+}
+@media screen and (max-width: 600px) {
+    .fa-product-card.fa-preset-genesis .fa-addToCart-btn {
+        font-size: 14px !important;
+        padding: 10px 12px !important;
+        font-weight: 500 !important;
+    }
+    .fa-product-card.fa-preset-genesis {
+        padding: 8px !important;
+    }
+    .fa-product-card.fa-preset-genesis .routine_group {
+        padding: 4px;
+        font-size: 10px;
+        top: 8px;
+        left: 8px;
+    }
+    .fa-product-card.fa-preset-genesis .product_problem_item {
+        padding: 4px 8px;
+        font-size: 11px;
+    }
+}
+.form_window {
+    position: relative;
+    background: rgba(255,255,255,0.88);
+    backdrop-filter: blur(12px);
+    border-radius: 24px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
+    overflow: hidden;
+}
+.form_window .box_title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.form_window .box_title-header {
+    padding: 24px;
+}
+.form_window .box_title .title {
+    font-weight: 800;
+    font-size: 18px;
+    letter-spacing: -0.01em;
+    color: var(--basic_action);
+}
+.form_window .box_title .step_indicator {
+    display:flex;
+    align-items:center;
+    gap:8px;
+    margin-left:auto;
+    font-size: 12px;
+    color:#6B7280;
+}
+.form_window .elements {
+    padding:0 24px;
+}
+.input_select {
+    display: grid;
+    grid-auto-rows: minmax(0, auto);
+    gap: 12px;
+}
+.input_select.normal {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+.input_select .item {
+    background: #fff;
+    border: 1.5px solid #E5E7EB;
+    border-radius: 18px;
+    padding: 16px;
+    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
+    color: #111827;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all .25s ease;
+    cursor: pointer;
+}
+.input_select .item:hover {
+    border-color: var(--basic);
+    transform: translateY(-1px);
+    box-shadow: 0 14px 28px rgba(0,0,0,0.10);
+}
+.input_select .radio.item::before {
+    content: '';
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    border: 2px solid #D1D5DB;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: inset 0 0 0 0 var(--color_action);
+    transition: all .25s ease;
+}
+.input_select .radio.item.active::before {
+    border-color: rgba(255,255,255,0.95);
+    background: rgba(255,255,255,0.30);
+    box-shadow: inset 0 0 0 6px var(--color_action);
+}
+.input_select .checkbox.item::before {
+    content: '';
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    border: 2px solid #D1D5DB;
+    border-radius: 8px;
+    background: #fff;
+    transition: all .25s ease;
+}
+.input_select .checkbox.item.active::before {
+    border-color: #ffffff;
+    background-color: rgba(255,255,255,0.30);
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 14px 14px;
+}
+.input_select .item.active {
+    color: var(--color_action);
+    background: var(--basic);
+    border-color: transparent;
+    transform: scale(1.02);
+    box-shadow: 0 16px 40px rgba(0,0,0,0.10), 0 10px 24px rgba(0,0,0,0.06);
+}
+.input_select .item .title {
+    font-weight: 600;
+}
+.bLwrg {
+    background: var(--basic_action);
+    color: var(--color_action);
+    border: 2px solid var(--basic_action);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
+    border-radius: 14px;
+    padding: 12px 16px;
+    text-align:center;
+    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
+}
+.bLwrg:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 16px 36px rgba(0,0,0,0.12);
+}
+.bLwrg.disable {
+    opacity: 0.5;
+    pointer-events: none;
+}
+.bLwrg.outline {
+    background: transparent;
+    color: var(--basic_action);
+    border: 2px solid var(--basic_action);
+    box-shadow: none;
+}
+.textInput input:focus,
+.textInput select:focus,
+.textInput textarea:focus {
+    outline: none;
+    border-color: var(--basic) !important;
+    box-shadow: 0 0 0 2px var(--basic) !important;
+    transform: translateY(-1px);
+}
+.form_window .progress {
+    margin: 10px 18px 18px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+.form_window .progress .step_indicator {
+    font-size: 12px;
+    color: #6B7280;
+}
+.form_window .progress .bars {
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+}
+.form_window .progress .bar {
+    height: 6px;
+    width: 6px;
+    border: 1px solid #E5E7EB;
+    background: #ffffff;
+    border-radius: 999px;
+    transition: all .25s ease;
+}
+.form_window .progress .bar.passed {
+    background: var(--basic_action);
+    opacity: .6;
+    border-color: var(--basic_action);
+}
+.form_window .progress .bar.current,
+.form_window .progress .bar.active {
+    background: var(--basic_action);
+    width: 18px;
+    opacity: 1;
+    border-color: var(--basic_action);
+}
+.form_window .action {
+    padding: 0 0 18px;
+}
+.form_window .action .dZaMnF {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+.form_window .action .bLwrg.next {
+    flex: 1;
+}
+.form_window .action .bLwrg.outline {
+    flex: 0 0 auto;
+}
+.header_tools .title {
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+}