PATH:
home
/
niazsaze
/
public_html
/
wp-content
/
plugins
/
flatsome-plus
/
assets
/
css
/* @import 'all.css'; @import 'fontawesome.css'; @import 'hint.min.css'; @import 'global-styles.css'; @import 'global-fonts.css'; */ *, *::after, *::before { margin: 0 ; padding: 0 ; box-sizing: border-box; background-repeat: no-repeat; font-family: inherit; list-style: none; list-style-type: none; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; } body { overflow-x: hidden; min-height: 100vh; background-color: #f2f2f2; /* @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } */ } body.preload * { transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; } body.scroll_hidden--mobile { overflow-y: visible; } body.bg-white { background-color: var(--white-0); } @media (max-width: 997px) { body.scroll_hidden--mobile { overflow-y: hidden; } } ul { list-style: none; padding: 0; margin: 0; } img { user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -o-user-drag: none; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } body a { text-decoration: none; color: inherit; } .d-none{ display:none; } button, input[type=submit], input[type=reset], input[type=button] { appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; outline: none; border: none; display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; line-height: 1rem; text-align: center; font-family: inherit; background: transparent; } button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover { cursor: pointer; } button i, input[type=submit] i, input[type=reset] i, input[type=button] i { font-size: 18px; } a.btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 350ms ease-in; } .btn { transition: all 350ms ease-in; } .btn:disabled { -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; cursor: not-allowed; } .btn:active { background-color: var(--red-1); } .btn.full { width: var(--width-100); } .btn.xsmall { padding: 0.5rem 1rem; height: 32px; } .btn.small { padding: 0.75rem 1rem; height: 40px; } .btn.medium { padding: 1.25rem 1rem; height: 50px; } .btn.h-48 { padding: 1.25rem 1rem; height: 48px; } .btn.large { padding: 1.5rem 1rem; height: 60px; } .btn.loading { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: default; } .btn.loading.outline .loading_item, .btn.loading.link .loading_item, .btn.loading.underline .loading_item { background-color: var(--main-color); } .btn.loading .loading_item { display: block; width: 10px; height: 10px; background-color: var(--white-0); border-radius: 50%; animation: loading 1s ease-in infinite alternate; } .btn.loading .loading_item:nth-child(2) { animation-delay: 0.25s; } .btn.loading .loading_item:nth-child(3) { animation-delay: 0.5s; } .btn.solid { background-color: var(--main-color); color: var(--white-0); border-radius: 0.75rem; } .btn.solid:hover { background-color: var(--red-5); } .btn.solid:disabled { background-color: var(--gray-211) !important; } .btn.solid:active { background-color: var(--red-1); } .btn.outline { background-color: transparent; color: var(--main-color); border-radius: 0.75rem; border: 1px solid var(--main-color); } .btn.outline:disabled { background-color: transparent !important; color: var(--gray-211); border-color: var(--gray-211) !important; } .btn.outline:hover { border-color: var(--red-5); color: var(--red-5); } .btn.outline:active { border-color: var(--red-1); color: var(--red-1); } .btn.underline { position: relative; background-color: transparent; color: var(--gray-201); } .btn.underline::after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; width: var(--width-100); height: 1px; background-color: var(--main-color); transition: all 250ms; } .btn.underline:hover::after { transform: translateY(5px); background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%), var(--red-1); box-shadow: 0px 4px 4px 0px rgba(230, 18, 61, 0.4); } .btn.underline:active::after { background: var(--red-1); } .btn.underline:disabled { color: var(--gray-211); border-bottom-color: var(--gray-211); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: not-allowed; } .btn.underline:disabled::after { background: var(--gray-211); } .btn.underline.loading { border-bottom: none; } .btn.link { background-color: transparent; color: var(--main-color); } .btn.link:hover { color: var(--red-5); } .btn.link:active { color: var(--red-1); } .btn.link:disabled { color: var(--gray-211); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: not-allowed; } .btn.gradient { position: relative; z-index: 0; background-color: var(--main-color); color: var(--white-0); border-radius: 0.75rem; overflow: hidden; } .btn.gradient > * { position: relative; z-index: 3; } .btn.gradient::after { content: " "; position: absolute; z-index: 1; width: var(--width-100); height: 100%; left: 0; bottom: 0; right: 0; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="142" height="32" viewBox="0 0 142 32" fill="none"><g clip-path="url(%23clip0_1788_70826)"><ellipse cx="97.5" cy="16" rx="97.5" ry="16" transform="matrix(1 0 0 -1 -27 47)" fill="%23CF1037"/></g><defs><clipPath id="clip0_1788_70826"><rect width="142" height="32" rx="8" transform="matrix(1 0 0 -1 0 32)" fill="white"/></clipPath></defs></svg>'); background-size: cover; background-position: top center; } .btn.gradient:hover::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="142" height="32" viewBox="0 0 142 32" fill="none"><g clip-path="url(%23clip0_1788_70846)"><ellipse cx="97.5" cy="16" rx="97.5" ry="16" transform="matrix(1 0 0 -1 -27 48)" fill="%23CF1037"/><ellipse cx="97.5" cy="16" rx="97.5" ry="16" transform="matrix(1 0 0 -1 -27 48)" fill="%23EB4164"/></g><defs><clipPath id="clip0_1788_70846"><rect width="142" height="32" rx="8" transform="matrix(1 0 0 -1 0 32)" fill="white"/></clipPath></defs></svg>'); } .btn.gradient:disabled { background-color: var(--gray-211) !important; } .btn.gradient:disabled::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="142" height="32" viewBox="0 0 142 32" fill="none"><g clip-path="url(%23clip0_1788_70846)"><ellipse cx="97.5" cy="16" rx="97.5" ry="16" transform="matrix(1 0 0 -1 -27 48)" fill="%23CF1037"/><ellipse cx="97.5" cy="16" rx="97.5" ry="16" transform="matrix(1 0 0 -1 -27 48)" fill="%23999999"/></g><defs><clipPath id="clip0_1788_70846"><rect width="142" height="32" rx="8" transform="matrix(1 0 0 -1 0 32)" fill="white"/></clipPath></defs></svg>'); } .btn.gradient:active { background-color: var(--red-1); } .btn.gradient:active::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="142" height="32" viewBox="0 0 142 32" fill="none"><g clip-path="url(%23clip0_1788_70846)"><ellipse cx="97.5" cy="16" rx="97.5" ry="16" transform="matrix(1 0 0 -1 -27 48)" fill="%23CF1037"/><ellipse cx="97.5" cy="16" rx="97.5" ry="16" transform="matrix(1 0 0 -1 -27 48)" fill="%23e6123d"/></g><defs><clipPath id="clip0_1788_70846"><rect width="142" height="32" rx="8" transform="matrix(1 0 0 -1 0 32)" fill="white"/></clipPath></defs></svg>'); } .btn.solid_animate { background-color: var(--main-color); color: var(--white-0); border-radius: 0.75rem; overflow: hidden; gap: 0; } .btn.solid_animate.loading { gap: 0.5rem; } .btn.solid_animate .icon { width: 0; opacity: 0; visibility: hidden; transform: translateX(100%); transition: opacity 250ms, transform 250ms, visibility 0ms 250ms, width 250ms; } .btn.solid_animate:hover { background-color: var(--red-5); gap: 0.5rem; } .btn.solid_animate:hover .icon { width: auto; opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 250ms, transform 250ms, width 250ms; } .btn.solid_animate:disabled { background-color: var(--gray-211) !important; } .btn.solid_animate:active { background-color: var(--red-1); } .btn.rounded { border-radius: 0.5rem; } .btn.rounded-full { border-radius: 999px; } .btn_gray.small { padding: 0.75rem 1rem; height: 40px; } .btn_gray.medium { padding: 1.25rem 1rem; height: 50px; } .btn_gray.large { padding: 1.5rem 1rem; height: 60px; } .btn_gray.outline { background-color: transparent; color: var(--gray-200); border-radius: 0.75rem; border: 1px solid var(--gray-200); transition: all 350ms ease-in; } .btn_gray.outline:hover { background-color: var(--gray-200); color: var(--white-0); } .btn_gray.link { color: var(--gray-200); } .link_primary { color: var(--red-1); } .link_primary:hover { text-transform: underline; } .link_primary.bold { font-weight: 600; } .link_blue { display: flex; align-items: center; gap: 0.5rem; color: var(--blue-3); } .link_blue:hover { text-transform: underline; } .link_blue i { font-size: 20px; } .link_blue.bold { font-weight: 600; } .link_white { display: flex; align-items: center; gap: 0.5rem; color: var(--white-0); } .link_white:hover { text-transform: underline; } .link_white i { font-size: 20px; } .link_white.bold { font-weight: 600; } .link_gray { display: flex; align-items: center; gap: 0.5rem; background-color: transparent; color: var(--gray-201); } .link_gray.small svg { width: 18px; height: 18px; } .link_gray.small i { font-size: 18px; } .link_gray.small p { width: calc(var(--width-100) - 18px - 0.5rem); font-size: 0.85rem; } .link_gray svg { width: 22px; height: 22px; } .link_gray i { font-size: 22px; } .link_gray p { width: calc(var(--width-100) - 22px - 0.5rem); } .link_gray.underline { text-decoration: underline; } .counter_container { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 4px; border: 1px solid var(--gray-207); } .counter_container .counter_button { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background-color: var(--black-10); color: var(--gray-211); } .counter_container .counter_text { width: 35px; color: var(--black-0); text-align: center; font-size: 1rem; font-weight: 600; } .counter_container .counter_input { background-color: var(--white-0); outline-color: transparent; padding: 0.3rem 0.5rem; width: 35px; color: var(--black-0); text-align: center; font-size: 1rem; font-weight: 600; border: none; transition: outline-color 250ms ease-in; } .counter_container .counter_input:focus { outline-color: var(--blue-1); transition: outline-color 250ms ease-in; } .btn_close__circle--white { width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; background-color: var(--white-0); color: var(--gray-200); border-radius: 50%; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1); } .btn_close__circle--white svg { width: 30px; height: 30px; } .btn_close__circle--white i { font-size: 25px; } .btn_close__circle--primary { width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; background-color: var(--red-1); color: var(--white-0); border-radius: 50%; } .btn_close__circle--primary svg { width: 25px; height: 25px; } .btn_close__circle--primary i { font-size: 22px; } .btn_login__google { flex-direction: column; border-radius: 8px; padding: 0.75rem 1.2rem; border: 1px solid var(--gray-211); } @media (min-width: 420px) { .btn_login__google { flex-direction: row; } } .header_btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; } .header_btn.without_text p { display: none; } .header_btn.reverse { flex-direction: row-reverse; } .header_btn.col-btn { flex-direction: column; } .header_btn.col-btn.reverse { flex-direction: column-reverse; } .header_btn.rounded { border-radius: 0.5rem; } .header_btn.rounded.two_side .icon_side { border-radius: 0.5rem 0 0 0.5rem; } .header_btn.rounded-full { border-radius: 100px; } .header_btn.rounded-full.two_side .icon_side { border-radius: 100px 0 0 100px; } .header_btn .icon { display: flex; position: relative; } .header_btn .icon svg { width: 25px; height: 25px; } .header_btn .icon i { font-size: 22px; } .header_btn .icon .badge_icon { position: absolute; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--red-1); border: 1px solid var(--white-0); border-radius: 3px; color: var(--white-0); font-size: 0.8rem; font-weight: 500; } .header_btn .icon .badge_icon.tr { top: -3px; right: -3px; } .header_btn .icon .badge_icon.tl { top: -3px; left: -3px; } .header_btn .icon .badge_icon.br { bottom: -3px; right: -3px; } .header_btn .icon .badge_icon.bl { bottom: -3px; left: -3px; } .header_btn.outline_bg { background-color: transparent; border-width: 1px; border-color: var(--gray-202); } .header_btn.outline_bg p { margin: 0; padding: 0; color: var(--gray-200); } .header_btn.outline_bg.solid_br { border-style: solid; } .header_btn.outline_bg.dashed_br { border-style: dashed; } .header_btn.solid_bg { background-color: var(--red-1); color: var(--white-0); } .header_btn.solid_bg .badge_icon { background-color: var(--white-0); width: 20px; height: 20px; color: var(--black-201); border-radius: 4px; padding: 3px; } .header_btn.two_side { padding: 0; gap: 0; } .header_btn.two_side.light_bg { background-color: var(--red-7); } .header_btn.two_side.light_bg .text_side { color: var(--red-1); font-weight: 600; text-align: center; } .header_btn.two_side.light_bg .icon_side .badge_icon { position: relative; background-color: var(--white-0); width: 20px; height: 20px; color: var(--black-201); border-radius: 4px; padding: 3px; } .header_btn.two_side.dark_bg { background-color: var(--red-6); } .header_btn.two_side.dark_bg .text_side { border-left: 1px dashed var(--white-0); position: relative; color: var(--white-0); } .header_btn.two_side.dark_bg .icon_side { position: relative; } .header_btn.two_side.dark_bg .icon_side .badge_icon { background-color: var(--white-0); color: var(--red-1); border: 1px solid var(--red-1); } .header_btn.two_side.dark_bg .icon_side svg { width: 22px; height: 22px; } .header_btn.two_side.dark_bg .icon_side i { font-size: 20px; } .header_btn.two_side.dark_bg.reverse .text_side { border-right: 1px dashed var(--white-0); } .header_btn.two_side .text_side { position: relative; padding: 0.75rem 1rem; font-weight: 600; } .header_btn.two_side .icon_side { padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--white-0); background-color: var(--red-1); } .header_btn.two_side .icon_side .icon .badge_icon { border-color: var(--red-1); } .btn_like__product { color: var(--black-201); } .btn_like__product.liked { color: var(--red-4); animation: likeEffect ease-in 500ms forwards; } .btn_copy__code { position: relative; z-index: 2; cursor: pointer; } .btn_copy__code .box { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 0.5rem; background-color: var(--gray-204); color: var(--gray-200); } .btn_copy__code .box svg { width: 22px; height: 22px; transition: color 250ms; } .btn_copy__code .box i { font-size: 20px; transition: color 250ms; } .btn_copy__code .box p { width: calc(var(--width-100) - 22px - 0.5rem); flex: 0 0 calc(100% - 22px - 0.5rem); font-size: 0.9rem; } .btn_copy__code .status { position: absolute; z-index: -3; right: 0; width: 80px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--gray-204); color: var(--main-color); border-radius: 0.5rem; text-align: center; transition: right 250ms; } .btn_copy__code.active .box i { color: var(--main-color); } .btn_copy__code.active .status { right: -75px; } .btn_copy__code:hover .box i { color: var(--main-color); } .btn_copy__code:hover .status { right: -75px; } .btn_tag__sub.opened .accordion_button p { color: var(--red-1); } .btn_tag__sub.opened .accordion_button .fa-plus-square { display: none; } .btn_tag__sub.opened .accordion_button .fa-minus-square { display: block; } .btn_tag__sub.opened .accordion_content .btn_tag__content { padding: 0.5rem 0; max-height: -moz-fit-content; max-height: fit-content; } .btn_tag__sub .accordion_button { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .btn_tag__sub .accordion_button i { font-size: 20px; } .btn_tag__sub .accordion_button .fa-plus-square { display: block; } .btn_tag__sub .accordion_button .fa-minus-square { display: none; } .btn_tag__sub .btn_tag__content { padding: 0; margin-top: 0.5rem; background-color: var(--gray-204); border-radius: 1rem; max-height: 0; overflow: hidden; transition: max-height 250ms, padding 250ms; } .btn_tag__sub .btn_tag__content .btn_tag__items { width: var(--width-100); font-size: 0.9rem; color: var(--black-200); padding: 0.75rem 1.2rem; cursor: pointer; } .btn_cityfilter--desktop { display: none; padding: 0.75rem 1rem; align-items: center; gap: 0.5rem; border-radius: 0.5rem; width: 200px; border: 1px solid var(--black-201); text-align: right; cursor: pointer; transition: color 250ms, border 250ms; } .btn_cityfilter--desktop i { font-size: 22px; } .btn_cityfilter--desktop .button_left { width: calc(var(--width-100) - 0.5rem - 24px); } .btn_cityfilter--desktop .button_left .text_title { font-size: 0.9rem; margin-bottom: 0.45rem; font-weight: 500; } .btn_cityfilter--desktop .button_left .text_filter { font-size: 0.8rem; } .btn_cityfilter--desktop:hover { border-color: var(--red-1); color: var(--red-1); } .btn_cityfilter--desktop:hover .text_filter { color: var(--red-6); } @media (min-width: 756px) { .btn_cityfilter--desktop { display: flex; } } .btn_cityfilter--mobile { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--black-10); cursor: pointer; } .btn_cityfilter--mobile .button_right { display: flex; align-items: center; gap: 0.75rem; } .btn_cityfilter--mobile .button_right i { color: var(--red-1); font-size: 22px; } @media (min-width: 756px) { .btn_cityfilter--mobile { display: none; } } .float_product__buttons { display: none; flex-direction: column; gap: 0.75rem; position: fixed; left: 1rem; top: 50%; z-index: 10; transform: translateY(-50%); } .float_product__buttons .float_button { position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--white-0); width: 52px; height: 52px; border-radius: 8px; background: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .float_product__buttons .float_button .icon { display: flex; align-items: center; justify-content: center; position: relative; } .float_product__buttons .float_button .icon i { font-size: 20px; color: var(--black-0); } .float_product__buttons .float_button .icon .badge { position: absolute; top: -5px; right: -5px; background-color: var(--blue-8); color: var(--white-0); padding: 0 3px; font-size: 0.75rem; } @media (min-width: 881px) { .float_product__buttons { display: flex; } } .goup_button { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; overflow: hidden; --after-width: 0%; --before-width: 0%; --after-height: 0%; --before-height: 0%; --before-visible: "hidden"; --after-visible: "hidden"; } .goup_button::after { position: absolute; content: ""; width: var(--after-width); height: var(--after-height); visibility: var(--after-visible); z-index: 4; } .goup_button::before { position: absolute; content: ""; width: var(--before-width); height: var(--before-height); visibility: var(--before-visible); z-index: 4; } .goup_button::after { bottom: 0; right: 0; border-left: 3px solid var(--blue-8); border-bottom: 3px solid var(--blue-8); transition: width 0.1s ease 0.1s, height 0.1s ease, visibility 0s 0.2s; } .goup_button::before { top: 0; left: 0; border-top: 3px solid var(--blue-8); border-right: 3px solid var(--blue-8); transition: width 0.1s ease 0.3s, height 0.1s ease 0.2s, visibility 0s 0.4s; } .goup_button .goup_button__container { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; } @keyframes loading { 0% { transform: translateY(-5px); } 50% { transform: translateY(0); } 100% { transform: translateY(5px); } } @keyframes likeEffect { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } .white_card { display: flex; flex-direction: column; gap: 2rem; border-radius: 1rem; padding: 1.5rem; background-color: white; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .white_card.no_gap { gap: 0; } .white_card--border_row { display: flex; flex-direction: column; border-radius: 1rem; padding: 0 1.5rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .white_card--border_row .item { border-bottom: 1px solid var(--black-10); padding: 1rem 0; } .white_card--border_row .item:last-child { border-bottom-width: 0; } .outline_card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--black-10); } .outline_card.sharp_top { border-radius: 0 0 0.5rem 0.5rem; } .outline_card__space_between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--black-10); } .outline_card__space_between.sharp_top { border-radius: 0 0 0.5rem 0.5rem; } .outline_card--border_2 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); border-radius: 0.5rem; border: 1px solid var(--black-10); } .outline_card--border_2.rounded-t-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .outline_card--border_2 .item { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--black-10); } .outline_card--border_2 .item:last-child { border-bottom-width: 0; } @media (min-width: 556px) { .outline_card--border_2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .outline_card--border_2 .item { border-left: 1px solid var(--black-10); } .outline_card--border_2 .item:nth-child(2n) { border-left-width: 0; } .outline_card--border_2 .item:nth-last-child(-n+2) { border-bottom-width: 0; } .outline_card--border_2 .item:last-child { border-left-width: 0; border-bottom-width: 0; } } .outline_card--border_row { display: flex; flex-direction: column; padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--black-10); } .outline_card--border_row .item { border-bottom: 1px solid var(--black-10); padding: 0.75rem 0; } .outline_card--border_row .item:first-child { padding: 0 0 0.75rem; } .outline_card--border_row .item:last-child { border-bottom-width: 0; padding: 0.75rem 0 0; } .dash_card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 0.5rem; border: 1px dashed var(--black-10); } .gray_card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 0.5rem; background-color: var(--default-bg-color); } .gray_card.sharp_top { border-radius: 0 0 0.5rem 0.5rem; } .post_card--1 { display: block; position: relative; overflow: hidden; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 1rem; height: 300px; } .post_card--1 img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_card--1 .post_card__body { display: flex; flex-direction: column; gap: 1rem; position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; color: var(--white-0); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 95.83%); } .post_card--1 .post_card__body .post_card__title { font-size: 1.3rem; text-align: center; } .post_card--1 .post_card__body .post_card__details { display: flex; align-items: center; justify-content: space-between; } .post_card--1 .post_card__body .post_card__details .post_card__detail { display: flex; align-items: center; gap: 0.5rem; } .post_card--1 .post_card__body .post_card__details .post_card__detail svg { width: 17px; height: 17px; } .post_card--1 .post_card__body .post_card__details .post_card__detail i { font-size: 18px; } .post_card--1.zoomin_effect img { transition: transform 350ms; transform: scale(1); } .post_card--1.zoomin_effect:hover img { transform: scale(1.15); } .post_card--1.zoomout_effect img { transition: transform 350ms; transform: scale(1.15); } .post_card--1.zoomout_effect:hover img { transform: scale(1); } .post_card--1.align_right .post_card__body .post_card__title { text-align: right; } .post_card--1.align_center .post_card__body .post_card__title { text-align: center; } .post_card--1.align_left .post_card__body .post_card__title { text-align: left; } .post_card--2 { display: block; position: relative; } .post_card--2 .post_card__cover { display: flex; align-items: center; justify-content: center; border-radius: 1rem; overflow: hidden; height: 250px; } .post_card--2 .post_card__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_card--2 .post_card__body { display: flex; flex-direction: column; align-items: center; width: 92%; margin: -5rem auto 0; } .post_card--2 .post_card__body .post_card__tag { margin: 0 auto; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: var(--black-200); color: var(--white-0); text-align: center; padding: 0.5rem 0.75rem; font-size: 0.8rem; } .post_card--2 .post_card__body .post_card__card { display: flex; flex-direction: column; gap: 1rem; width: var(--width-100); padding: 1rem; background-color: var(--white-0); border-radius: 1rem; box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.1); } .post_card--2 .post_card__body .post_card__card .post_card__details { display: flex; align-items: center; justify-content: space-between; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem 1rem; color: var(--gray-201); font-size: 0.8rem; } .post_card--2 .post_card__body .post_card__card .post_card__details .post_card__detail { display: flex; align-items: center; gap: 0.5rem; } .post_card--2 .post_card__body .post_card__card .post_card__details .post_card__detail svg { width: 17px; height: 17px; } .post_card--2 .post_card__body .post_card__card .post_card__details .post_card__detail i { font-size: 18px; } .post_card--2 .post_card__body .post_card__card .post_card__details .line_vertical { width: 1px; height: 20px; background-color: var(--gray-201); } .post_card--2 .post_card__body .post_card__card .post_card__title { font-size: 1rem; font-weight: 500; text-align: center; } .post_card--2 .post_card__body .post_card__card .post_card__description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.8rem; line-height: 1.5rem; text-align: center; color: var(--gray-211); } .post_card--2 .post_card__body .post_card__card .link_container { display: flex; justify-content: center; } .post_card--2 .post_card__body .post_card__card .link_container .post_card__link { display: flex; align-items: center; gap: 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem; } .post_card--2 .post_card__body .post_card__card .link_container .post_card__link p { color: var(--black-0); font-weight: 500; font-size: 0.8rem; } .post_card--2 .post_card__body .post_card__card .link_container .post_card__link svg { width: 20px; height: 20px; color: var(--red-1); } .post_card--2 .post_card__body .post_card__card .link_container .post_card__link i { font-size: 20px; color: var(--red-1); } .post_card--2.zoomin_effect .post_card__cover img { transition: transform 350ms ease-in; transform: scale(1); } .post_card--2.zoomin_effect:hover img { transform: scale(1.15); } .post_card--2.zoomout_effect .post_card__cover { transition: transform 350ms ease-in; } .post_card--2.zoomout_effect .post_card__cover img { transform: scale(1.15); } .post_card--2.zoomout_effect:hover img { transform: scale(1); } .post_card--2.bgblack_button__effect .post_card__cover { cursor: pointer; } .post_card--2.bgblack_button__effect .post_card__cover .post_cover__button { background-color: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--2.bgblack_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; } .post_card--2.bgblur_button__effect .post_card__cover { cursor: pointer; } .post_card--2.bgblur_button__effect .post_card__cover .post_cover__button { opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--2.bgblur_button__effect .post_card__cover img { filter: blur(0); -webkit-filter: blur(0); transition: all 300ms ease-in; } .post_card--2.bgblur_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; transition: all 300ms ease-in; } .post_card--2.bgblur_button__effect:hover .post_card__cover img { filter: blur(7.5px); -webkit-filter: blur(7.5px); transition: all 300ms ease-in; } .post_card--2.bgwhite_button__effect .post_card__cover { cursor: pointer; transform: all 350ms ease-in; } .post_card--2.bgwhite_button__effect .post_card__cover .post_cover__button { background-color: rgba(255, 255, 255, 0.4); opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--2.bgwhite_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; } .post_card--2.border_dark__effect .post_card__cover { position: relative; cursor: pointer; } .post_card--2.border_dark__effect .post_card__cover::after { content: " "; position: absolute; inset: 0; background: transparent; border: 0 solid rgba(0, 0, 0, 0.4); border-radius: 1rem; transition: border 350ms ease-in; } .post_card--2.border_dark__effect:hover .post_card__cover::after { border-width: 10px; } .post_card--2.border_white__effect .post_card__cover { position: relative; cursor: pointer; } .post_card--2.border_white__effect .post_card__cover::after { content: " "; position: absolute; inset: 0; background: transparent; border: 0 solid rgba(255, 255, 255, 0.4); border-radius: 1rem; transition: border 350ms ease-in; } .post_card--2.border_white__effect:hover .post_card__cover::after { border-width: 10px; } .post_card--2.align_center .post_card__body .post_card__title, .post_card--2.align_center .post_card__body .post_card__description { text-align: center; } .post_card--2.align_center .post_card__body .link_container { justify-content: center; } .post_card--2.align_left .post_card__body .post_card__title, .post_card--2.align_left .post_card__body .post_card__description { text-align: left; } .post_card--2.align_left .post_card__body .link_container { justify-content: left; } .post_card--2.align_right .post_card__body .post_card__title, .post_card--2.align_right .post_card__body .post_card__description { text-align: right; } .post_card--2.align_right .post_card__body .link_container { justify-content: right; } .post_card--3 { display: block; padding: 1rem; border-radius: 1rem; overflow: hidden; background-color: var(--white-0); } .post_card--3 .post_card__cover { position: relative; overflow: hidden; border-radius: 1rem; height: 250px; } .post_card--3 .post_card__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_card--3 .post_card__cover .post_card__tag { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: var(--black-200); color: var(--white-0); text-align: center; padding: 0.5rem 0.75rem; font-size: 0.8rem; } .post_card--3 .post_card__body { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; } .post_card--3 .post_card__body .post_card__details { display: flex; align-items: center; justify-content: space-between; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem 1rem; color: var(--gray-201); font-size: 0.8rem; } .post_card--3 .post_card__body .post_card__details .post_card__detail { display: flex; align-items: center; gap: 0.5rem; } .post_card--3 .post_card__body .post_card__details .post_card__detail svg { width: 17px; height: 17px; } .post_card--3 .post_card__body .post_card__details .post_card__detail i { font-size: 18px; } .post_card--3 .post_card__body .post_card__details .line_vertical { width: 1px; height: 20px; background-color: var(--gray-201); } .post_card--3 .post_card__body .post_card__title { font-size: 0.9rem; text-align: center; color: var(--black-200); } .post_card--3 .post_card__body .post_card__description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.8rem; line-height: 1.5rem; text-align: center; color: var(--gray-211); } .post_card--3 .post_card__body .link_container { display: flex; justify-content: center; } .post_card--3 .post_card__body .link_container .post_card__link { display: flex; align-items: center; gap: 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem; } .post_card--3 .post_card__body .link_container .post_card__link p { color: var(--black-0); font-weight: 500; font-size: 0.8rem; } .post_card--3 .post_card__body .link_container .post_card__link svg { width: 20px; height: 20px; color: var(--red-1); } .post_card--3 .post_card__body .link_container .post_card__link i { font-size: 18px; color: var(--red-1); } .post_card--3.zoomin_effect .post_card__cover img { transition: transform 350ms ease-in; transform: scale(1); } .post_card--3.zoomin_effect:hover img { transform: scale(1.15); } .post_card--3.zoomout_effect .post_card__cover img { transition: transform 350ms ease-in; transform: scale(1.15); } .post_card--3.zoomout_effect:hover img { transform: scale(1); } .post_card--3.bgblack_button__effect .post_card__cover { cursor: pointer; } .post_card--3.bgblack_button__effect .post_card__cover .post_cover__button { background-color: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--3.bgblack_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; } .post_card--3.bgblur_button__effect .post_card__cover { cursor: pointer; } .post_card--3.bgblur_button__effect .post_card__cover .post_cover__button { opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--3.bgblur_button__effect .post_card__cover img { filter: blur(0); -webkit-filter: blur(0); } .post_card--3.bgblur_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; } .post_card--3.bgblur_button__effect:hover .post_card__cover img { filter: blur(7.5px); -webkit-filter: blur(7.5px); } .post_card--3.bgwhite_button__effect .post_card__cover { cursor: pointer; transform: all 350ms ease-in; } .post_card--3.bgwhite_button__effect .post_card__cover .post_cover__button { background-color: rgba(255, 255, 255, 0.4); opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--3.bgwhite_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; } .post_card--3.border_dark__effect .post_card__cover { position: relative; cursor: pointer; } .post_card--3.border_dark__effect .post_card__cover::after { content: " "; position: absolute; inset: 0; background: transparent; border: 0 solid rgba(0, 0, 0, 0.4); border-radius: 1rem; transition: border 350ms ease-in; } .post_card--3.border_dark__effect:hover .post_card__cover::after { border-width: 10px; } .post_card--3.border_white__effect .post_card__cover { position: relative; cursor: pointer; } .post_card--3.border_white__effect .post_card__cover::after { content: " "; position: absolute; inset: 0; background: transparent; border: 0 solid rgba(255, 255, 255, 0.4); border-radius: 1rem; transition: border 350ms ease-in; } .post_card--3.border_white__effect:hover .post_card__cover::after { border-width: 10px; } .post_card--3.align_center .post_card__title, .post_card--3.align_center .post_card__description { text-align: center; } .post_card--3.align_center .link_container { justify-content: center; } .post_card--3.align_left .post_card__title, .post_card--3.align_left .post_card__description { text-align: left; } .post_card--3.align_left .link_container { justify-content: left; } .post_card--3.align_right .post_card__title, .post_card--3.align_right .post_card__description { text-align: right; } .post_card--3.align_right .link_container { justify-content: right; } .post_card--3.last_title .post_card__details { order: -1; } .post_card--4 { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: 1rem; background-color: var(--white-0); box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.1); } .post_card--4 .post_card__cover { width: var(--width-100); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; } .post_card--4 .post_card__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_card--4 .post_card__body { width: var(--width-100); display: flex; flex-direction: column; gap: 0.75rem; } .post_card--4 .post_card__body .post_card__title { font-size: 0.9rem; font-weight: 500; color: var(--black-202); } .post_card--4 .post_card__body .post_card__desc { font-size: 0.8rem; font-weight: 500; color: var(--gray-203); text-align: justify; display: -webkit-box; -webkit-line-clamp: 3; /* number of lines to show */ line-clamp: 3; -webkit-box-orient: vertical; } .post_card--4 .post_card__body .post_card__bottom { display: flex; align-items: center; justify-content: space-between; } .post_card--4 .post_card__body .post_card__bottom .post_card__detail { display: flex; align-items: center; gap: 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem; color: var(--gray-201); font-size: 0.8rem; } .post_card--4 .post_card__body .post_card__bottom .post_card__detail svg { width: 17px; height: 17px; } .post_card--4 .post_card__body .post_card__bottom .post_card__detail i { font-size: 18px; } .post_card--4 .post_card__body .post_card__bottom .post_card__link { display: flex; align-items: center; gap: 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem; } .post_card--4 .post_card__body .post_card__bottom .post_card__link p { color: var(--black-0); font-weight: 500; font-size: 0.8rem; } .post_card--4 .post_card__body .post_card__bottom .post_card__link svg { width: 20px; height: 20px; color: var(--red-1); } .post_card--4 .post_card__body .post_card__bottom .post_card__link i { font-size: 20px; color: var(--red-1); } @media (min-width: 556px) { .post_card--4 { flex-direction: row; } .post_card--4 .post_card__cover { width: 35%; } .post_card--4 .post_card__body { width: 65%; } } .post_card--5 { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--black-10); } .post_card--5 .post_cover { display: flex; align-items: center; justify-content: center; height: 130px; overflow: hidden; border-radius: 0.5rem; } .post_card--5 .post_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_card--5 .post_title { color: var(--black-201); text-align: center; font-size: 12px; font-weight: 500; } .post_card--5 .post_buttons { display: flex; align-items: center; justify-content: space-between; } .post_card--6 { display: block; padding: 1rem; border-radius: 1rem; overflow: hidden; background-color: var(--white-0); } .post_card--6 .post_card__cover { position: relative; overflow: hidden; border-radius: 1rem; height: 250px; } .post_card--6 .post_card__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_card--6 .post_card__cover .post_card__details { position: absolute; left: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: space-between; background-color: transparent; border-radius: 0.5rem; padding: 1.2rem; color: var(--white-0); font-size: 0.8rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); } .post_card--6 .post_card__cover .post_card__details .post_card__detail { display: flex; align-items: center; gap: 0.5rem; } .post_card--6 .post_card__cover .post_card__details .post_card__detail svg { width: 17px; height: 17px; } .post_card--6 .post_card__cover .post_card__details .post_card__detail i { font-size: 17px; } .post_card--6 .post_card__cover .post_cover__button { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: all 350ms ease-in; } .post_card--6 .post_card__cover .post_cover__button a { display: flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; border-radius: 50%; width: 72px; height: 72px; font-size: 1.1rem; color: var(--white-0); background-color: var(--red-1); transition: background 300ms ease-in; cursor: pointer; } .post_card--6 .post_card__cover .post_cover__button a:hover { background-color: var(--red-6); } .post_card--6 .post_card__cover .post_cover__button a i { font-size: 25px; } .post_card--6 .post_card__body { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-top: 1rem; } .post_card--6 .post_card__body .post_card__tag { border-radius: 0.5rem; background-color: var(--black-200); color: var(--white-0); text-align: center; padding: 0.5rem 0.75rem; font-size: 0.8rem; } .post_card--6 .post_card__body .post_card__title { font-size: 0.9rem; text-align: center; color: var(--black-200); } .post_card--6 .post_card__body .post_card__description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.8rem; line-height: 1.5rem; text-align: center; color: var(--gray-211); } .post_card--6 .post_card__body .link_container { display: flex; justify-content: center; } .post_card--6 .post_card__body .link_container .post_card__link { display: flex; align-items: center; gap: 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem; } .post_card--6 .post_card__body .link_container .post_card__link p { color: var(--black-0); font-weight: 500; font-size: 0.8rem; } .post_card--6 .post_card__body .link_container .post_card__link svg { width: 20px; height: 20px; color: var(--red-1); } .post_card--6 .post_card__body .link_container .post_card__link i { font-size: 20px; color: var(--red-1); } .post_card--6.zoomin_effect .post_card__cover img { transition: transform 350ms ease-in; transform: scale(1); } .post_card--6.zoomin_effect:hover img { transform: scale(1.15); } .post_card--6.zoomout_effect .post_card__cover img { transition: transform 350ms ease-in; transform: scale(1.15); } .post_card--6.zoomout_effect:hover img { transform: scale(1); } .post_card--6.bgblack_button__effect .post_card__cover { cursor: pointer; } .post_card--6.bgblack_button__effect .post_card__cover .post_cover__button { background-color: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--6.bgblack_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; } .post_card--6.bgblur_button__effect .post_card__cover { cursor: pointer; } .post_card--6.bgblur_button__effect .post_card__cover .post_cover__button { opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--6.bgblur_button__effect .post_card__cover img { filter: blur(0); -webkit-filter: blur(0); } .post_card--6.bgblur_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; } .post_card--6.bgblur_button__effect:hover .post_card__cover img { filter: blur(7.5px); -webkit-filter: blur(7.5px); } .post_card--6.bgwhite_button__effect .post_card__cover { cursor: pointer; transform: all 350ms ease-in; } .post_card--6.bgwhite_button__effect .post_card__cover .post_cover__button { background-color: rgba(255, 255, 255, 0.4); opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .post_card--6.bgwhite_button__effect:hover .post_card__cover .post_cover__button { opacity: 1; visibility: visible; } .post_card--6.border_dark__effect .post_card__cover { position: relative; cursor: pointer; } .post_card--6.border_dark__effect .post_card__cover::after { content: " "; position: absolute; inset: 0; background: transparent; border: 0 solid rgba(0, 0, 0, 0.4); border-radius: 1rem; transition: border 350ms ease-in; } .post_card--6.border_dark__effect:hover .post_card__cover::after { border-width: 10px; } .post_card--6.border_white__effect .post_card__cover { position: relative; cursor: pointer; } .post_card--6.border_white__effect .post_card__cover::after { content: " "; position: absolute; inset: 0; background: transparent; border: 0 solid rgba(255, 255, 255, 0.4); border-radius: 1rem; transition: border 350ms ease-in; } .post_card--6.border_white__effect:hover .post_card__cover::after { border-width: 10px; } .post_card--6.inline_card { display: flex; flex-direction: column; gap: 1rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .post_card--6.inline_card .post_card__cover { width: var(--width-100); height: 250px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } .post_card--6.inline_card .post_card__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_card--6.inline_card .post_card__cover .post_card__details { display: none; } .post_card--6.inline_card .post_card__body { width: var(--width-100); display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; padding: 0; } .post_card--6.inline_card .post_card__body .post_card__title { text-align: right; padding: 0; } .post_card--6.inline_card .post_card__body .post_card__description { text-align: right; font-size: 0.9rem; } .post_card--6.inline_card .post_card__body .post_card__bottom { display: flex; align-items: center; justify-content: space-between; width: var(--width-100); } .post_card--6.inline_card .post_card__body .post_card__bottom .post_card__date { display: flex; align-items: center; gap: 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem; color: var(--gray-201); font-size: 0.8rem; } .post_card--6.inline_card .post_card__body .post_card__bottom .post_card__date svg { width: 17px; height: 17px; } .post_card--6.inline_card .post_card__body .post_card__bottom .post_card__date i { font-size: 18px; } .post_card--6.inline_card .post_card__body .post_card__bottom .post_card__link { display: flex; align-items: center; gap: 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem; } .post_card--6.inline_card .post_card__body .post_card__bottom .post_card__link p { color: var(--black-0); font-weight: 500; font-size: 0.8rem; } .post_card--6.inline_card .post_card__body .post_card__bottom .post_card__link svg { width: 20px; height: 20px; color: var(--red-1); } .post_card--6.inline_card .post_card__body .post_card__bottom .post_card__link i { font-size: 20px; color: var(--red-1); } .post_card--6.inline_card.align_right .post_card__body .post_card__title, .post_card--6.inline_card.align_right .post_card__body .post_card__description { text-align: right; } .post_card--6.inline_card.align_center .post_card__body .post_card__title, .post_card--6.inline_card.align_center .post_card__body .post_card__description { text-align: center; } .post_card--6.inline_card.align_left .post_card__body .post_card__title, .post_card--6.inline_card.align_left .post_card__body .post_card__description { text-align: left; } @media (min-width: 675px) { .post_card--6.inline_card { flex-direction: row; } .post_card--6.inline_card .post_card__cover { width: 140px; height: 100%; } .post_card--6.inline_card .post_card__body { width: calc(var(--width-100) - 140px - 1rem); } } .post_card--6.align_center .post_card__body { align-items: center; } .post_card--6.align_center .post_card__body .post_card__title, .post_card--6.align_center .post_card__body .post_card__description { text-align: center; } .post_card--6.align_center .post_card__body .link_container { justify-content: center; } .post_card--6.align_right .post_card__body { align-items: flex-start; } .post_card--6.align_right .post_card__body .post_card__title, .post_card--6.align_right .post_card__body .post_card__description { text-align: right; } .post_card--6.align_right .post_card__body .link_container { justify-content: right; } .post_card--6.align_left .post_card__body { align-items: flex-end; } .post_card--6.align_left .post_card__body .post_card__title, .post_card--6.align_left .post_card__body .post_card__description { text-align: left; } .post_card--6.align_left .post_card__body .link_container { justify-content: left; } .post_card--7 { display: block; padding: 1rem; border-radius: 1rem; overflow: hidden; background-color: var(--white-0); } .post_card--7 .post_card__cover { position: relative; overflow: hidden; border-radius: 1rem; height: 250px; } .post_card--7 .post_card__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_card--7 .post_card__cover .post_card__tag { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: var(--black-200); color: var(--white-0); text-align: center; padding: 0.5rem 0.75rem; font-size: 0.8rem; } .post_card--7 .post_card__body { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; } .post_card--7 .post_card__body .post_body__container { display: flex; gap: 0.75rem; } .post_card--7 .post_card__body .post_body__container .post_date { display: flex; align-items: center; justify-content: center; text-align: center; width: 50px; padding: 2rem 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; color: var(--red-1); font-size: 0.9rem; font-weight: 500; } .post_card--7 .post_card__body .post_body__container .post_body__text { width: calc(var(--width-100) - 0.75rem - 50px); display: flex; flex-direction: column; gap: 0.5rem; } .post_card--7 .post_card__body .post_body__container .post_body__text .post_card__title { font-size: 0.9rem; text-align: right; color: var(--black-200); } .post_card--7 .post_card__body .post_body__container .post_body__text .post_card__description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; /* number of lines to show */ line-clamp: 3; -webkit-box-orient: vertical; font-size: 0.8rem; line-height: 1.5rem; text-align: right; color: var(--gray-211); } .post_card--7 .post_card__body .link_container { display: flex; justify-content: center; } .post_card--7 .post_card__body .link_container .post_card__link { display: flex; align-items: center; gap: 0.5rem; background-color: var(--gray-204); border-radius: 0.5rem; padding: 0.5rem; } .post_card--7 .post_card__body .link_container .post_card__link p { color: var(--black-0); font-weight: 500; font-size: 0.8rem; } .post_card--7 .post_card__body .link_container .post_card__link svg { width: 20px; height: 20px; color: var(--red-1); } .post_card--7 .post_card__body .link_container .post_card__link i { font-size: 20px; color: var(--red-1); } .article_item--1 { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .article_item--1 .article_item--1__cover { display: flex; align-items: center; justify-content: center; width: var(--width-100); overflow: hidden; position: relative; border-radius: 0.5rem; } .article_item--1 .article_item--1__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .article_item--1 .article_item--1__body { width: var(--width-100); font-size: 0.9rem; font-weight: 500; color: var(--black-201); word-wrap: wrap; } @media (min-width: 360px) { .article_item--1 { flex-direction: row; } .article_item--1 .article_item--1__cover { width: 25%; } .article_item--1 .article_item--1__body { width: var(--width-75); } } .article_item--2 { display: block; padding: 16px 12px; border-radius: 0.5rem; border: 1px solid var(--black-10); color: var(--gray-200); text-align: justify; font-size: 13px; line-height: 1.7rem; } .article_item--3 { display: flex; flex-direction: column; gap: 0.75rem; } .article_item--3 .article_cover { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 0.5rem; height: 300px; } .article_item--3 .article_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .article_item--3 .article_text { color: var(--gray-211); text-align: justify; font-size: 0.9rem; font-style: normal; font-weight: 400; line-height: 1.7rem; } .product_card { display: flex; flex-direction: column; padding: 1rem; gap: 1.2rem; border-radius: 1rem; overflow: hidden; background: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1); } .product_card .product_cover { position: relative; height: 230px; border-radius: 1rem; } .product_card .product_cover .product_cover__image { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 1rem; height: 100%; overflow: hidden; } .product_card .product_cover .product_cover__image .product_offer__box { position: absolute; top: 1rem; left: 1rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--red-4); color: var(--white-0); font-size: 0.9rem; font-weight: 500; } .product_card .product_cover .product_cover__image .product_offer__box.circle { border-radius: 50%; } .product_card .product_cover .product_cover__image .product_offer__box.rect { border-radius: 0; width: 60px; height: 40px; } .product_card .product_cover .product_cover__image .product_offer__box.rounded-rect { border-radius: 4px; width: 60px; height: 40px; } .product_card .product_cover .product_cover__image .product_offer__box.rounded-tl-br-rect { border-radius: 20px 0px; width: 60px; height: 40px; } .product_card .product_cover .product_cover__image .product_offer__box.rounded-tr-bl-rect { border-radius: 0px 20px; width: 60px; height: 40px; } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-l { border-radius: 0 4px 4px 0; width: 60px; height: 40px; left: 0; } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-l::before { content: " "; position: absolute; width: 6px; height: 6px; top: -6px; left: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0V6H6C2.68629 6 0 3.31371 0 0Z' fill='%23CE0000'/%3E%3C/svg%3E"); } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-l::after { content: " "; position: absolute; width: 6px; height: 6px; bottom: -6px; left: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 6V0H6C2.68629 0 0 2.68629 0 6Z' fill='%23CE0000'/%3E%3C/svg%3E"); } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-r { border-radius: 4px 0 0 4px; width: 60px; height: 40px; right: 0; } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-r::before { content: " "; position: absolute; width: 6px; height: 6px; top: -6px; right: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 0V6H0C3.31371 6 6 3.31371 6 0Z' fill='%23CE0000'/%3E%3C/svg%3E"); } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-r::after { content: " "; position: absolute; width: 6px; height: 6px; bottom: -6px; right: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 6V0H0C3.31371 0 6 2.68629 6 6Z' fill='%23CE0000'/%3E%3C/svg%3E"); } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-lb { border-radius: 0 4px 4px 0; width: 60px; height: 40px; left: 0; } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-lb::after { content: " "; position: absolute; width: 6px; height: 6px; bottom: -6px; left: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 6V0H6C2.68629 0 0 2.68629 0 6Z' fill='%23CE0000'/%3E%3C/svg%3E"); } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-rb { border-radius: 4px 0 0 4px; width: 60px; height: 40px; right: 0; } .product_card .product_cover .product_cover__image .product_offer__box.rounded-out-rb::after { content: " "; position: absolute; width: 6px; height: 6px; bottom: -6px; right: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 6V0H0C3.31371 0 6 2.68629 6 6Z' fill='%23CE0000'/%3E%3C/svg%3E"); } .product_card .product_cover .product_cover__image .product_colors { position: absolute; top: 1rem; right: 1rem; display: flex; flex-direction: column; } .product_card .product_cover .product_cover__image .product_colors .product_color { width: 16px; height: 16px; border: 2px solid var(--white-0); border-radius: 50%; } .product_card .product_cover .product_cover__image .product_colors .product_color:nth-child(2) { transform: translateY(-6px); } .product_card .product_cover .product_cover__image .product_colors .product_color:nth-child(3) { transform: translateY(-12px); } .product_card .product_cover .product_cover__image .product_colors .product_color:nth-child(4) { transform: translateY(-18px); } .product_card .product_cover .product_cover__image .product_colors .product_color.green { background-color: green; } .product_card .product_cover .product_cover__image .product_colors .product_color.blue { background-color: blue; } .product_card .product_cover .product_cover__image .product_colors .product_color.yellow { background-color: yellow; } .product_card .product_cover .product_cover__image .product_colors .product_color.red { background-color: var(--red-12); } .product_card .product_cover .product_cover__image .product_colors .product_color.white { background-color: var(--white-0); border-color: var(--black-0); } .product_card .product_cover .product_cover__image .product_colors .product_color.black { background-color: var(--black-0); } .product_card .product_cover .product_cover__image .product_colors .product_color.pink { background-color: pink; border-color: var(--black-0); } .product_card .product_cover .product_cover__image .product_colors .product_color.brown { background-color: brown; } .product_card .product_cover .product_cover__image .product_colors .product_color.purple { background-color: blueviolet; } .product_card .product_cover .product_cover__image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .product_card .product_cover .product_tag { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 4px 4px 0px 0px; background: var(--black-200); color: var(--white-0); font-size: 0.8rem; padding: 0.3rem 0.5rem; } .product_card .product_body { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .product_card .product_body .product_tag { background: var(--black-200); color: var(--white-0); font-size: 0.8rem; padding: 0.3rem 0.5rem; border-radius: 0.5rem; } .product_card .product_body .product_title { text-align: center; color: var(--black-203); font-size: 0.9rem; font-weight: 500; } .product_card .product_body .product_rating { display: flex; align-items: center; justify-content: center; gap: 0.3rem; } .product_card .product_body .product_rating p { color: var(--gray-200); font-size: 0.8rem; } .product_card .product_body .product_rating .circle { width: 10px; height: 10px; background-color: var(--black-10); border-radius: 50%; margin: 0 0.5rem; } .product_card .product_body .unavailable_text { width: var(--width-100); padding: 0.5rem 0; } .product_card .product_body .product_middle { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; position: relative; } .product_card .product_body .product_middle .product_menu i { font-size: 16px; } .product_card .product_body .product_middle .product_price { display: flex; flex-direction: column; gap: 0.45rem; } .product_card .product_body .product_middle .product_price .product_offer { display: flex; align-items: center; justify-content: space-between; } .product_card .product_body .product_middle .product_price .product_offer .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .product_card .product_body .product_middle .product_price .product_price__text { font-weight: 500; color: var(--green-6); font-size: 0.9rem; } .product_card .product_body .product_timing { width: var(--width-100); display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-radius: 1rem; background-color: var(--gray-204); } .product_card .product_body .product_timing .product_timer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } .product_card .product_body .product_timing .product_timer .product_timer__item { display: flex; align-items: center; justify-content: center; gap: 0.2rem; color: var(--gray-200); padding: 0.5rem 0.75rem; border-radius: 0.5rem; background-color: var(--white-0); } .product_card .product_body .product_timing .product_timer .product_timer__item p { margin: 0; } .product_card .product_body .product_timing .product_timer .product_timer__item .time { font-weight: 500; font-size: 0.85rem; } .product_card .product_body .product_timing .product_timer .product_timer__item .desc { font-size: 0.8rem; } .product_card .product_body .product_timing .product_timer .product_timer__item:first-child { color: var(--red-1); } .product_card .product_body .product_timing .product_stock { background-color: var(--white-0); padding: 0.75rem 1rem; } .product_card .product_body .product_timing .product_stock .product_stock__texts { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: 0.8rem; } .product_card .product_body .product_timing .product_stock .product_stock__texts span { font-weight: 500; color: var(--black-200); font-size: 0.85rem; } .product_card .product_body .product_timing .product_stock .product_stock__progress { width: var(--width-100); background-color: var(--gray-204); height: 3px; border-radius: 50px; overflow: hidden; } .product_card .product_body .product_timing .product_stock .product_stock__progress .progress_outer { height: 100%; max-width: var(--width-100); background-color: var(--red-1); } .product_card.side_button .product_body .product_menu { display: flex; align-items: center; gap: 1.5rem; transform: translateX(1rem); padding: 0.5rem 1rem 0.5rem 0.5rem; background-color: var(--gray-204); border-bottom-left-radius: 1rem; border-top-left-radius: 1rem; position: relative; cursor: pointer; } .product_card.side_button .product_body .product_menu .mainButton { z-index: 1; } .product_card.side_button .product_body .product_menu .product_menu__items { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; background-color: var(--gray-204); padding: 0 1rem; border-bottom-left-radius: 1rem; border-top-left-radius: 1rem; transform: translateX(40%); opacity: 0; transition: opacity 350ms, transform 350ms ease-in, overflow 0s 350ms; } .product_card.side_button .product_body .product_menu .product_menu__items i { font-size: 20px; } .product_card.side_button .product_body .product_menu .product_menu__items .product_counter__container { position: absolute; right: 0; top: 0; bottom: 0; background-color: var(--gray-204); } .product_card.side_button .product_body .product_menu .product_menu__items .product_counter__container.hide { display: none; } .product_card.side_button .product_body .product_menu .product_menu__items .product_menu__options, .product_card.side_button .product_body .product_menu .product_menu__items .product_counter__container { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; height: 100%; padding: 0 1.5rem 0 0.5rem; } .product_card.side_button .product_body .product_menu .product_menu__items .product_menu__options i, .product_card.side_button .product_body .product_menu .product_menu__items .product_counter__container i { font-size: 18px; } .product_card.side_button .product_body .product_menu .product_menu__items .product_menu__options .display_counter, .product_card.side_button .product_body .product_menu .product_menu__items .product_counter__container .display_counter { min-width: 35px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); } .product_card.side_button:hover .product_body .product_menu .product_menu__items { transform: translateX(-30%); opacity: 1; overflow: visible; transition: opacity 350ms, transform 350ms ease-in, overflow 0s 350ms; } .product_card.full_button .product_cover { cursor: pointer; } .product_card.full_button .product_cover .product_menu__items { position: absolute; left: 50%; bottom: 1.5rem; transform: translate(-50%, 200px); display: flex; align-items: center; gap: 1rem; background-color: var(--white-0); border-radius: 0.5rem; padding: 0.75rem 1rem; opacity: 0; transition: opacity 350ms ease-in, transform 350ms ease-in; } .product_card.full_button .product_cover .product_menu__items i { font-size: 20px; } .product_card.full_button .product_body .product_middle { position: relative; z-index: 1; width: var(--width-100); align-items: stretch; flex-direction: column; } .product_card.full_button .product_body .product_middle .product_upbutton { width: var(--width-100); border-radius: 0.5rem 0.5rem 0 0; display: flex; align-items: center; justify-content: center; gap: 0.75rem; background-color: var(--gray-204); padding: 0.5rem; } .product_card.full_button .product_body .product_middle .product_upbutton .product_offer { display: flex; align-items: center; } .product_card.full_button .product_body .product_middle .product_upbutton .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .product_card.full_button .product_body .product_middle .product_upbutton .product_price__text { font-weight: 500; color: var(--green-6); font-size: 0.9rem; } .product_card.full_button .product_body .product_middle .product_upbutton .unavailable_text { padding: 0; text-align: center; font-size: 0.9rem; } .product_card.full_button .product_body .product_middle .product_upbutton::after { content: ""; position: absolute; z-index: -2; background-color: var(--gray-204); width: var(--width-100); height: 10px; bottom: -10px; left: 0; } .product_card.full_button .product_body .product_middle > * { position: relative; z-index: 10; } .product_card.full_button .product_body .product_middle .btn_shop { width: var(--width-100); } .product_card.full_button .product_body .product_counter__container { position: relative; display: flex; align-items: center; gap: 1rem; } .product_card.full_button .product_body .product_counter__container .display_counter { min-width: 35px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); border: 1px solid var(--black-10); } .product_card.full_button.align_center .product_body .product_middle { align-items: center; } .product_card.full_button.align_left .product_body .product_middle { align-items: flex-end; } .product_card.full_button.align_right .product_body .product_middle { align-items: flex-start; } .product_card.full_button:hover .product_cover .product_menu__items { opacity: 1; transform: translate(-50%, 0); transition: opacity 350ms ease-in, transform 350ms ease-in; } .product_card.small_button .product_body .product_middle { position: relative; } .product_card.small_button .product_body .product_middle .product_menu { position: absolute; left: 0; bottom: 0; right: 0; background: var(--white-0); display: none; align-items: center; gap: 0.5rem; cursor: default; } .product_card.small_button .product_body .product_middle .product_menu .product_menu__items { cursor: default; position: absolute; left: 0; bottom: 0; right: 0; background: var(--white-0); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 1rem; } .product_card.small_button .product_body .product_middle .product_menu .product_counter__container { cursor: default; position: absolute; left: 0; bottom: 0; right: 0; background: var(--white-0); display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.2rem 1rem; z-index: 5; } .product_card.small_button .product_body .product_middle .product_menu .product_counter__container .display_counter { min-width: 35px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); border: 1px solid var(--black-10); } .product_card.small_button .product_body .product_middle .product_price { width: var(--width-100); padding: 0.5rem 0; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; } .product_card.small_button:hover .product_body .product_middle .product_menu { display: flex; } .product_card.small_button.align_center .product_body .product_price { justify-content: center; } .product_card.small_button.align_center .product_body .unavailable_text { text-align: center; } .product_card.small_button.align_left .product_body .product_price { justify-content: flex-end; } .product_card.small_button.align_left .product_body .unavailable_text { text-align: left; } .product_card.small_button.align_right .product_body .product_price { justify-content: flex-start; } .product_card.small_button.align_right .product_body .unavailable_text { text-align: right; } .product_card.small_button.unavailable .product_body .product_price, .product_card.small_button.unavailable .product_body .product_menu { display: none; } .product_card.hide_button .product_body .unavailable_text { text-align: left; } .product_card.hide_button .product_body .product_menu { display: flex; align-items: center; gap: 2rem; transform: translateX(-1rem); padding: 0.5rem 0.5rem 0.5rem 1rem; background-color: var(--white-0); position: relative; cursor: pointer; } .product_card.hide_button .product_body .product_menu .mainButton { z-index: 1; } .product_card.hide_button .product_body .product_menu .product_menu__items { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; background-color: var(--white-0); padding: 0 1rem; border-bottom-left-radius: 1rem; border-top-left-radius: 1rem; transform: translateX(-60%); opacity: 0; transition: opacity 350ms, transform 350ms ease-in, overflow 0s 350ms; } .product_card.hide_button .product_body .product_menu .product_menu__items i { font-size: 20px; } .product_card.hide_button .product_body .product_menu .product_menu__items .product_counter__container { position: absolute; right: 0; top: 0; bottom: 0; background-color: var(--white-0); } .product_card.hide_button .product_body .product_menu .product_menu__items .product_counter__container.hide { display: none; } .product_card.hide_button .product_body .product_menu .product_menu__items .product_menu__options, .product_card.hide_button .product_body .product_menu .product_menu__items .product_counter__container { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; height: 100%; padding: 0 1.5rem 0 0.75rem; } .product_card.hide_button .product_body .product_menu .product_menu__items .product_menu__options i, .product_card.hide_button .product_body .product_menu .product_menu__items .product_counter__container i { font-size: 18px; } .product_card.hide_button .product_body .product_menu .product_menu__items .product_menu__options .display_counter, .product_card.hide_button .product_body .product_menu .product_menu__items .product_counter__container .display_counter { min-width: 35px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); } .product_card.hide_button.unavailable .product_body .product_menu { display: none; } .product_card.hide_button:hover .product_body .product_menu .product_menu__items { transform: translateX(100%); opacity: 1; overflow: visible; transition: opacity 350ms, transform 350ms ease-in, overflow 0s 350ms; } .product_card.colorize_price .product_cover { cursor: pointer; } .product_card.colorize_price .product_cover .product_menu__items { position: absolute; left: 50%; bottom: 1.5rem; transform: translate(-50%, 200px); display: flex; align-items: center; gap: 1rem; background-color: var(--white-0); border-radius: 0.5rem; padding: 0.75rem 1rem; opacity: 0; transition: opacity 350ms ease-in, transform 350ms ease-in; } .product_card.colorize_price .product_cover .product_menu__items i { font-size: 20px; } .product_card.colorize_price .product_tag { background-color: transparent; color: var(--black-201); padding: 0; } .product_card.colorize_price .product_middle { display: flex; justify-content: space-between; align-items: center !important; gap: 0.75rem; } .product_card.colorize_price .product_middle button { height: 100%; } .product_card.colorize_price .product_middle .product_price { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; } .product_card.colorize_price .product_middle .product_price .product_offer__price { font-size: 0.8rem; color: var(--gray-201); text-decoration: line-through; } .product_card.colorize_price .product_middle .product_price .product_price__box { overflow: hidden; display: flex; border-radius: 0.75rem; font-size: 0.9rem; color: var(--white-0); } .product_card.colorize_price .product_middle .product_price .product_price__box .price_text { padding: 0.2rem 0.5rem; background-color: var(--black-201); } .product_card.colorize_price .product_middle .product_price .product_price__box .offer_percent { padding: 0.2rem 0.5rem; background-color: var(--red-1); } .product_card.colorize_price .product_middle .product_counter__container { position: relative; display: flex; align-items: center; gap: 1rem; } .product_card.colorize_price .product_middle .product_counter__container .display_counter { min-width: 35px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); border: 1px solid var(--black-10); } .product_card.colorize_price .product_middle .unavailable_text { padding: 0.75rem 0; text-align: left; } .product_card.colorize_price.align_center .product_body .product_middle { align-items: center; } .product_card.colorize_price.align_left .product_body .product_middle { align-items: flex-end; } .product_card.colorize_price.align_right .product_body .product_middle { align-items: flex-start; } .product_card.colorize_price:hover .product_cover .product_menu__items { opacity: 1; transform: translate(-50%, 0); transition: opacity 350ms ease-in, transform 350ms ease-in; } .product_card.capsule_price .product_cover { cursor: pointer; } .product_card.capsule_price .product_cover .product_menu__items { position: absolute; left: 50%; bottom: 1.5rem; transform: translate(-50%, 200px); display: flex; align-items: center; gap: 1rem; background-color: var(--white-0); border-radius: 0.5rem; padding: 0.75rem 1rem; opacity: 0; transition: opacity 350ms ease-in, transform 350ms ease-in; } .product_card.capsule_price .product_cover .product_menu__items i { font-size: 20px; } .product_card.capsule_price .product_tag { background-color: transparent; color: var(--black-201); padding: 0; } .product_card.capsule_price .product_middle { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.75rem; } .product_card.capsule_price .product_middle .product_price { width: var(--width-100); display: flex; flex-direction: row; justify-content: space-between; overflow: hidden; border-radius: 100px; border: 1px solid var(--main-color); background-color: var(--red-1); } .product_card.capsule_price .product_middle .product_price .price_text { flex-grow: 1; padding: 0.2rem 0.75rem; border-radius: 100px; background-color: var(--white-0); color: var(--green-4); font-weight: 600; text-align: center; } .product_card.capsule_price .product_middle .product_price .offer_percent { padding: 0.2rem 0.75rem; color: var(--white-0); text-decoration: line-through; text-align: center; } .product_card.capsule_price .product_middle .product_menu { width: var(--width-100); position: relative; display: flex; align-items: center; justify-content: space-between; } .product_card.capsule_price .product_middle .product_menu .buy_button { background-color: var(--green-4); } .product_card.capsule_price .product_middle .product_menu .product_menu__items { display: flex; gap: 1rem; padding: 0.75rem 1rem; opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; } .product_card.capsule_price .product_middle .product_menu .product_menu__items i { color: var(--gray-201); font-size: 22px; } .product_card.capsule_price .product_middle .product_counter__container { position: relative; display: flex; align-items: center; gap: 1rem; } .product_card.capsule_price .product_middle .product_counter__container .display_counter { min-width: 35px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); border: 1px solid var(--black-10); } .product_card.capsule_price .product_middle .unavailable_text { width: var(--width-100); border: 1px solid var(--main-color); border-radius: 100px; padding: 0.2rem 0.75rem; text-align: center; } .product_card.capsule_price.align_center .product_body .product_middle { align-items: center; } .product_card.capsule_price.align_left .product_body .product_middle { align-items: flex-end; } .product_card.capsule_price.align_right .product_body .product_middle { align-items: flex-start; } .product_card.capsule_price:hover .product_middle .product_menu .product_menu__items { opacity: 1; visibility: visible; transition: opacity 250ms; } .product_card.reverse_card { flex-direction: column-reverse; padding: 0; gap: 0; } .product_card.reverse_card .product_body { padding: 1rem 1rem 0.75rem; } .product_card.reverse_card .product_body .unavailable_text { text-align: left; } .product_card.reverse_card .product_body .product_menu { display: flex; align-items: center; gap: 2rem; transform: translateX(-1rem); padding: 0.5rem 0.5rem 0.5rem 1rem; background-color: var(--white-0); position: relative; cursor: pointer; } .product_card.reverse_card .product_body .product_menu .mainButton { z-index: 1; } .product_card.reverse_card .product_body .product_menu .product_menu__items { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; background-color: var(--white-0); padding: 0 1rem; border-bottom-left-radius: 1rem; border-top-left-radius: 1rem; transform: translateX(-60%); opacity: 0; transition: opacity 350ms, transform 350ms ease-in, overflow 0s 350ms; } .product_card.reverse_card .product_body .product_menu .product_menu__items i { font-size: 20px; } .product_card.reverse_card .product_body .product_menu .product_menu__items .product_counter__container { position: absolute; right: 0; top: 0; bottom: 0; background-color: var(--white-0); } .product_card.reverse_card .product_body .product_menu .product_menu__items .product_counter__container.hide { display: none; } .product_card.reverse_card .product_body .product_menu .product_menu__items .product_menu__options, .product_card.reverse_card .product_body .product_menu .product_menu__items .product_counter__container { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; height: 100%; padding: 0 1.5rem 0 0.75rem; } .product_card.reverse_card .product_body .product_menu .product_menu__items .product_menu__options i, .product_card.reverse_card .product_body .product_menu .product_menu__items .product_counter__container i { font-size: 18px; } .product_card.reverse_card .product_body .product_menu .product_menu__items .product_menu__options .display_counter, .product_card.reverse_card .product_body .product_menu .product_menu__items .product_counter__container .display_counter { min-width: 35px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); } .product_card.reverse_card:hover .product_body .product_menu .product_menu__items { transform: translateX(100%); opacity: 1; overflow: visible; transition: opacity 350ms, transform 350ms ease-in, overflow 0s 350ms; } .product_card.inline_box { flex-direction: row; align-items: center; gap: 0.75rem; } .product_card.inline_box .product_cover { width: 90px; height: 90px; } .product_card.inline_box .product_body { width: calc(var(--width-100) - 90px - 0.75rem); flex-direction: row; align-items: center; justify-content: space-between; } .product_card.inline_box .product_body .product_text { display: flex; flex-direction: column; gap: 0.75rem; flex-grow: 1; } .product_card.inline_box .product_body .product_price { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; } .product_card.inline_box .product_body .product_price .product_offer { display: flex; align-items: center; gap: 0.75rem; } .product_card.inline_box .product_body .product_price .product_offer .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .product_card.inline_box .product_body .product_price .product_price__text { font-weight: 500; color: var(--green-6); font-size: 0.9rem; } .product_card.inline_box.align_center .product_body { align-items: center; } .product_card.inline_box.align_center .product_body .product_price { align-items: center; } .product_card.inline_box.align_center .product_body .product_title, .product_card.inline_box.align_center .product_body .unavailable_text { text-align: center; } .product_card.inline_box.align_left .product_body { align-items: center; } .product_card.inline_box.align_left .product_body .product_price { align-items: flex-end; } .product_card.inline_box.align_left .product_body .product_title, .product_card.inline_box.align_left .product_body .unavailable_text { text-align: left; } .product_card.inline_box.align_right .product_body { align-items: center; } .product_card.inline_box.align_right .product_body .product_price { align-items: flex-start; } .product_card.inline_box.align_right .product_body .product_title, .product_card.inline_box.align_right .product_body .unavailable_text { text-align: right; } .product_card.inline_box.unavailable .product_body .product_price { display: none; } .product_card.transparent { background-color: transparent; border-radius: 0; box-shadow: none; padding: 0.5rem 0; } .product_card.big_preview { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-radius: 1rem; height: 250px; background-color: transparent; padding: 0; cursor: pointer; } .product_card.big_preview img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .product_card.big_preview .product_text { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0; visibility: hidden; transition: all 350ms ease-in; } .product_card.big_preview .product_text .product_title { color: var(--white-0); } .product_card.big_preview .product_text .product_price { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; } .product_card.big_preview .product_text .product_price .product_offer { display: flex; align-items: center; gap: 0.75rem; } .product_card.big_preview .product_text .product_price .product_offer .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--white-0); } .product_card.big_preview .product_text .product_price .product_price__text { font-weight: 500; color: var(--green-6); font-size: 0.9rem; } .product_card.big_preview:hover .product_text { visibility: visible; opacity: 1; } .product_card.big_preview.align_center .product_text { align-items: center; } .product_card.big_preview.align_center .product_text .product_title { text-align: center; } .product_card.big_preview.align_left .product_text { align-items: flex-end; } .product_card.big_preview.align_left .product_text .product_title { text-align: left; } .product_card.big_preview.align_right .product_text { align-items: flex-start; } .product_card.big_preview.align_right .product_text .product_title { text-align: right; } .product_card.small_preview { display: flex; flex-direction: column; gap: 0.75rem; background: transparent; overflow: visible; box-shadow: none; border-radius: 0; padding: 0; } .product_card.small_preview .product_cover { width: var(--width-100); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 0.5rem; position: relative; } .product_card.small_preview .product_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .product_card.small_preview .product_offer { background-color: var(--red-1); color: var(--white-0); text-align: center; padding: 0.5rem 1rem; border-radius: 0.5rem; } .product_card.tag_image .product_cover .product_tag { bottom: 0; border-radius: 0.5rem 0.5rem 0 0; } .product_card.tag_image__between .product_cover .product_tag { bottom: -0.75rem; border-radius: 0.5rem; } .product_card.no_tag .product_cover .product_tag, .product_card.no_tag .product_body .product_tag { display: none; } .product_card.unavailable .product_cover .product_offer__box { display: none; } .product_card.unavailable .product_body .product_middle .product_menu { cursor: default; } .product_card.unavailable .product_body .product_middle .product_menu .buy_button p { color: var(--white-0); padding: 0; } .product_card.unavailable .product_body .product_middle .product_menu .mainButton { display: none; } .product_card.unavailable .product_body .product_middle .product_menu p { font-size: 1rem; color: var(--black-200); padding: 0.75rem 0 0.75rem 0.5rem; } .product_card.unavailable .product_body .product_middle .product_menu .product_menu__items { display: none; } .product_card.unavailable .product_body .product_middle .product_price { display: none; } .product_card.without_offer .product_cover .product_offer__box { display: none; } .product_card.without_offer .product_body .product_price .product_offer { display: none; } .product_card.without_timer .product_body .product_timing { display: none; } .product_card.without_rating .product_body .product_rating { display: none; } .product_card.align_center .product_body { align-items: center; } .product_card.align_center .product_body .product_title { text-align: center; } .product_card.align_left .product_body { align-items: flex-end; } .product_card.align_left .product_body .product_title { text-align: left; } .product_card.align_right .product_body { align-items: flex-start; } .product_card.align_right .product_body .product_title { text-align: right; } .product_condition__card { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .product_condition__card .card_cover { position: relative; display: flex; align-items: center; justify-content: center; width: var(--width-100); height: 170px; border-radius: 0.5rem; overflow: hidden; } .product_condition__card .card_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .product_condition__card .card_cover .btn_remove { width: 30px; height: 30px; position: absolute; top: 1rem; left: 1rem; display: flex; justify-content: center; align-items: center; background-color: var(--white-0); color: var(--gray-200); border-radius: 50%; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1); } .product_condition__card .card_cover .btn_remove svg { width: 20px; height: 20px; } .product_condition__card .card_cover .btn_remove i { font-size: 20px; } .product_condition__card .price_offer { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .product_condition__card .price { font-weight: 500; color: var(--green-6); font-size: 0.85rem; } .product_condition--select_card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; align-self: flex-start; gap: 2rem; padding: 3rem 1rem; max-width: 200px; width: var(--width-100); margin: 0 auto; border-radius: 0.5rem; background: var(--gray-204); color: var(--gray-200); } .product_card__horizontal { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1rem; position: relative; padding: 0.75rem; } .product_card__horizontal .card_cover { display: flex; align-items: center; justify-content: center; overflow: hidden; width: var(--width-100); height: 170px; border-radius: 0.5rem; } .product_card__horizontal .card_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .product_card__horizontal .card_body { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .product_card__horizontal .card_body .card_title { font-size: 1rem; } .product_card__horizontal .card_body .price_offer { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .product_card__horizontal .card_body .price { font-weight: 500; color: var(--green-6); font-size: 0.85rem; } .product_card__horizontal .selected_box { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity 250ms, visibility 0s 250ms; } .product_card__horizontal .selected_box .icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--white-0); background-color: var(--main-color); border-radius: 50%; cursor: pointer; } .product_card__horizontal .selected_box .icon i { font-size: 22px; } .product_card__horizontal:hover .selected_box { opacity: 1; visibility: visible; transition: opacity 250ms; } @media (min-width: 756px) { .product_card__horizontal { flex-direction: row; } .product_card__horizontal .card_cover { width: 88px; height: 88px; } .product_card__horizontal .card_body { align-items: flex-start; } } .category_product__card--1 { height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: 1.5rem 0.75rem; border-radius: 1rem; background: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .category_product__card--1 .card_cover { width: 109px; height: 109px; } .category_product__card--1 .card_cover img { height: 100%; } .category_product__card--1 .card_body { display: flex; flex-direction: column; gap: 0.75rem; } .category_product__card--1 .card_body .card_title { color: var(--black-200); font-size: 16px; font-weight: 400; } .category_product__card--1 .card_body .card_title--sub { display: flex; justify-content: center; position: relative; color: var(--gray-201); font-size: 14px; font-weight: 400; } .category_product__card--1 .card_body .card_title--sub .hoverd { position: absolute; min-width: 140px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--white-0); opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; } .category_product__card--1:hover { border: 2px solid var(--main-color); } .category_product__card--1:hover .card_body .card_title--sub .hoverd { opacity: 1; visibility: visible; transition: opacity 250ms; } .category_product__card--2 { display: flex; align-items: center; text-align: right; gap: 0.75rem; padding: 1rem 1.5rem; border-radius: 1rem; background: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .category_product__card--2 .card_cover { width: 109px; height: 109px; } .category_product__card--2 .card_cover img { height: 100%; } .category_product__card--2 .card_body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; } .category_product__card--2 .card_body .card_title { color: var(--black-200); font-size: 16px; font-weight: 400; } .category_product__card--2 .card_body .card_title--sub { display: flex; justify-content: center; position: relative; color: var(--gray-201); font-size: 14px; font-weight: 400; } .category_product__card--2 .card_body .card_title--sub .hoverd { position: absolute; right: 0; min-width: 140px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--white-0); opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; } .category_product__card--2:hover { border: 2px solid var(--main-color); } .category_product__card--2:hover .card_body .card_title--sub .hoverd { opacity: 1; visibility: visible; transition: opacity 250ms; } .category_product__card--3 { display: flex; flex-direction: row-reverse; align-items: center; text-align: left; gap: 0.75rem; padding: 1rem 1.5rem; border-radius: 1rem; background: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .category_product__card--3 .card_cover { width: 109px; height: 109px; } .category_product__card--3 .card_cover img { height: 100%; } .category_product__card--3 .card_body { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; } .category_product__card--3 .card_body .card_title { color: var(--black-200); font-size: 16px; font-weight: 400; } .category_product__card--3 .card_body .card_title--sub { display: flex; justify-content: center; position: relative; color: var(--gray-201); font-size: 14px; font-weight: 400; } .category_product__card--3 .card_body .card_title--sub .hoverd { position: absolute; left: 0; min-width: 140px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--white-0); opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; } .category_product__card--3:hover { border: 2px solid var(--main-color); } .category_product__card--3:hover .card_body .card_title--sub .hoverd { opacity: 1; visibility: visible; transition: opacity 250ms; } .product_card--1 { display: block; padding: 1rem; border-radius: 1rem; overflow: hidden; background-color: var(--white-0); } .product_card--1 .product_card__cover { position: relative; overflow: hidden; border-radius: 1rem; height: 150px; } .product_card--1 .product_card__cover .product_card__image { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .product_card--1 .product_card__cover .product_card__tag { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: var(--black-200); color: var(--white-0); text-align: center; padding: 0.5rem 0.75rem; font-size: 0.8rem; } .product_card--1 .product_card__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 0.75rem; } .product_card--1 .product_card__body .product_card__title { text-align: center; color: var(--black-203); font-size: 13px; font-weight: 500; } .product_card--1 .product_card__body .product_card__stars { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8rem; } .product_card--1 .product_card__body .product_card__bottom { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .product_card--1 .product_card__body .product_card__bottom.button_right { flex-direction: row-reverse; } .product_card--1 .product_card__body .product_card__bottom .product_card__price .offer { display: flex; align-items: center; justify-content: space-between; } .product_card--1 .product_card__body .product_card__bottom .product_card__price .offer p { color: var(--gray-211); text-decoration-line: line-through; font-size: 0.8rem; } .product_card--1 .product_card__body .product_card__bottom .product_card__price .price { font-size: 0.9rem; font-weight: 500; color: var(--green-6); } .product_card--2 { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--black-10); background: var(--white-0); } .product_card--2 .card_cover { display: flex; align-items: center; justify-content: center; height: 150px; overflow: hidden; border-radius: 0.5rem; } .product_card--2 .card_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .product_card--2 .product_title { text-align: center; color: var(--black-201); font-size: 12px; font-weight: 500; } .product_card--2 .product_offer { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .product_card--2 .product_offer p { color: var(--gray-211); font-size: 13px; font-weight: 400; text-decoration: line-through; } .product_card--2 .product_price { color: var(--green-6); text-align: center; font-size: 13px; font-weight: 500; } .product_card--2 .product_buttons { display: flex; align-items: center; justify-content: space-between; } .product_cover__card { width: var(--width-100); height: 100px; border-radius: 0.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; } .product_cover__card img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 350ms ease-in; } .product_cover__card:hover img { transform: scale(1.1); } .tag_container { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .tag_container .tag_item { display: flex; background-color: var(--gray-204); color: var(--gray-201); border-radius: 4px; padding: 1px 8px; font-size: 0.9rem; } .active_filter { display: flex; align-items: center; gap: 1rem; padding: 5px 10px; border-radius: 16px; border: 1px solid var(--blue-3); background: var(--blue-2); color: var(--blue-3); } .active_filter .active_filter__text { font-size: 13px; font-weight: 400; } .active_filter .active_filter__close { color: var(--blue-3); } .active_filter .active_filter__close svg { width: 18px; height: 18px; } .active_filter .active_filter__close i { font-size: 18px; } .small_badge { font-weight: 500; border-radius: 5px; padding: 0 0.4rem; font-size: 0.8rem; } .small_badge.green { background: var(--gray-212); color: var(--green-6); } .small_badge.blue { background: var(--blue-2); color: var(--blue-3); } .small_badge.red { background: var(--red-7); color: var(--red-1); } .badge_green { padding: 0.5rem 1rem; border-radius: 0.5rem; background: var(--gray-212); color: var(--green-6); } .badge_green--border { display: flex; flex-direction: column; gap: 0.75rem; border-radius: 1rem; padding: 1rem 1.5rem; border: 1px solid var(--green-6); color: var(--green-6); background: var(--gray-214); } .badge_green--border .bold { font-weight: 500; } .badge_green--oneline_border { display: flex; align-items: center; gap: 0.5rem; border-radius: 1rem; padding: 1rem 1.5rem; border: 1px solid var(--green-6); color: var(--green-6); background: var(--gray-214); } .badge_green--oneline_border svg { width: 25px; height: 25px; } .badge_green--oneline_border i { font-size: 22px; } .badge_green--oneline_border p { width: calc(var(--width-100) - 25px - 0.5rem); } .badge_green--oneline_border .bold { font-weight: 500; } .badge_gray { padding: 1rem; border-radius: 0.5rem; background: var(--gray-204); color: var(--gray-200); } .badge_gray--oneline { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 0.5rem; background: var(--gray-204); color: var(--gray-200); } .badge_gray--oneline svg { width: 22px; height: 22px; } .badge_gray--oneline i { font-size: 22px; } .badge_gray--oneline p { width: calc(var(--width-100) - 22px - 0.5rem); flex: 0 0 calc(100% - 22px - 0.5rem); } .badge_danger--border { display: flex; flex-direction: column; gap: 0.75rem; border-radius: 1rem; padding: 1rem 1.5rem; border: 1px solid var(--red-4); color: var(--red-4); background: var(--red-3); } .badge_danger--border .bold { font-weight: 500; } .badge_danger--small { display: flex; flex-direction: column; gap: 0.75rem; border-radius: 1rem; padding: 0.5rem; color: var(--red-4); background: var(--red-3); font-size: 0.8rem; } .badge_danger--small .bold { font-weight: 500; } .badge_danger { display: flex; flex-direction: column; gap: 0.75rem; border-radius: 1rem; padding: 1rem 1.5rem; color: var(--red-4); background: var(--red-3); } .badge_danger .bold { font-weight: 500; } .badge_blue { display: flex; flex-direction: column; gap: 0.75rem; border-radius: 1rem; padding: 1rem 1.5rem; color: var(--blue-3); background: var(--blue-4); } .badge_blue--oneline { display: flex; align-items: center; gap: 0.75rem; border-radius: 1rem; padding: 1rem 1.5rem; color: var(--blue-3); background: var(--blue-4); } .badge_blue--small { border-radius: 0.5rem; padding: 0 0.5rem; font-size: 0.8rem; color: var(--blue-3); background: var(--blue-4); } .badge_blue--border { display: flex; flex-direction: column; gap: 0.75rem; border-radius: 1rem; padding: 1rem 1.5rem; border: 1px solid var(--blue-3); color: var(--blue-3); background: var(--blue-4); } .box_with__loadmore__container { display: flex; flex-wrap: wrap; gap: 0.75rem; } .box_with__loadmore__container .box_item, .box_with__loadmore__container .btn_loadmore { width: calc(50% - 0.75rem); flex: 0 0 calc(50% - 0.75rem); cursor: pointer; } .box_with__loadmore__container .loadmore_box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1rem 0.75rem; border-radius: 1rem; background: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .box_with__loadmore__container .loadmore_box .number { font-weight: 500; font-size: 1.2rem; color: var(--red-1); } .box_with__loadmore__container .box_item { display: none; } .box_with__loadmore__container .box_item:nth-child(-n+1) { display: block; } .box_with__loadmore__container .btn_loadmore { display: flex; align-items: center; justify-content: center; text-align: center; } .box_with__loadmore__container.show .box_item { display: block; } .box_with__loadmore__container.show .btn_loadmore { display: none; } @media (min-width: 456px) and (max-width: 556px) { .box_with__loadmore__container.orders .box_item, .box_with__loadmore__container.orders .btn_loadmore { width: calc(25% - 0.75rem); flex: 0 0 calc(25% - 0.75rem); } .box_with__loadmore__container.orders .box_item:nth-child(-n+3) { display: block; } } @media (min-width: 1100px) { .box_with__loadmore__container.orders .box_item, .box_with__loadmore__container.orders .btn_loadmore { width: calc(12.5% - 0.75rem); flex: 0 0 calc(12.5% - 0.75rem); } .box_with__loadmore__container.orders .box_item:nth-child(-n+7) { display: block; } } @media (min-width: 420px) { .box_with__loadmore__container .box_item, .box_with__loadmore__container .btn_loadmore { width: calc(33.3333333333% - 0.75rem); flex: 0 0 calc(33.3333333333% - 0.75rem); } .box_with__loadmore__container .box_item:nth-child(-n+2) { display: block; } } @media (min-width: 556px) { .box_with__loadmore__container .box_item, .box_with__loadmore__container .btn_loadmore { width: calc(25% - 0.75rem); flex: 0 0 calc(25% - 0.75rem); } .box_with__loadmore__container .box_item:nth-child(-n+3) { display: block; } } @media (min-width: 756px) { .box_with__loadmore__container .box_item, .box_with__loadmore__container .btn_loadmore { width: calc(20% - 0.75rem); flex: 0 0 calc(20% - 0.75rem); } .box_with__loadmore__container .box_item:nth-child(-n+4) { display: block; } } @media (min-width: 881px) { .box_with__loadmore__container .box_item, .box_with__loadmore__container .btn_loadmore { width: calc(16.6666666667% - 0.75rem); flex: 0 0 calc(16.6666666667% - 0.75rem); } .box_with__loadmore__container .box_item:nth-child(-n+5) { display: block; } } @media (min-width: 980px) { .box_with__loadmore__container .box_item, .box_with__loadmore__container .btn_loadmore { width: calc(14.2857142857% - 0.75rem); flex: 0 0 calc(14.2857142857% - 0.75rem); } .box_with__loadmore__container .box_item:nth-child(-n+6) { display: block; } } .quick_show__container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .quick_show__container .quick_show__right { display: flex; flex-direction: column; gap: 1rem; } .quick_show__container .quick_show__right .quick_show__cover { width: var(--width-100); height: 300px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 1rem; } .quick_show__container .quick_show__right .quick_show__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .quick_show__container .quick_show__left { display: flex; flex-direction: column; gap: 0.75rem; } .quick_show__container .quick_show__left .quick_show__tag { align-self: flex-start; padding: 5px 8px; border-radius: 2px; background: var(--gray-204); color: var(--gray-211); } .quick_show__container .quick_show__left .quick_show__tag span { color: var(--black-201); font-weight: 500; } .quick_show__container .quick_show__left .quick_show__title { font-size: 1.1rem; font-weight: 500; color: var(--black-0); } .quick_show__container .quick_show__left .quick_show__model { display: flex; align-items: center; gap: 0.75rem; } .quick_show__container .quick_show__left .quick_show__model p { font-size: 0.85rem; color: var(--gray-200); } .quick_show__container .quick_show__left .quick_show__model hr { flex-grow: 1; } @media (min-width: 881px) { .quick_show__container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .seller_info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } .seller_info .seller_info__number { color: var(--green-4); font-size: 1rem; font-weight: 500; } .seller_info .seller_info__desc { color: var(--black-201); } .seller_info__charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; width: var(--width-100); max-width: 657px; margin: 0 auto; } @media (min-width: 756px) { .seller_info__charts { gap: 1rem; } .seller_info__charts .progress_container { width: 70%; margin: 0 auto; } } .progress_container { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; } .progress_container p { color: var(--black-201); font-size: 0.8rem; } .progress_container svg { color: var(--green-6); } .progress_container svg.blue { color: var(--blue-1); } .progress_container svg .arc_progress__path { stroke-linecap: round; stroke-width: 6; } .progress_container svg .arc_progress__path.green { stroke-dasharray: 198; } .info_container { display: flex; flex-direction: column; gap: 1rem; } .info_container .product_title { font-size: 1.2rem; font-weight: 500; } .info_container .product_title__sub { font-size: 1rem; font-weight: 500; } .info_container .product_properties { display: flex; flex-direction: column; gap: 0.4rem; } .info_container .product_properties li { display: flex; font-size: 0.8rem; color: var(--gray-200); position: relative; padding-right: 20px; } .info_container .product_properties li::before { content: " "; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--gray-208); border-radius: 50%; } .positive_box__item { display: flex; padding: 0.5rem 1rem; justify-content: space-between; align-items: center; border-radius: 0.5rem; background: rgba(204, 234, 211, 0.5); } .positive_box__item p { font-size: 0.9rem; color: var(--green-4); } .positive_box__item button { color: var(--green-4); } .negative_box__item { display: flex; padding: 0.5rem 1rem; justify-content: space-between; align-items: center; border-radius: 0.5rem; background: rgba(247, 209, 210, 0.5); } .negative_box__item p { font-size: 0.9rem; color: var(--red-12); } .negative_box__item button { color: var(--red-12); } input, textarea { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; } input[type=radio] { cursor: pointer; width: 20px; height: 20px; border-radius: 50%; position: relative; background-color: var(--white-0); border: 1px solid var(--gray-202); transition: all 0.2s ease-in-out; } input[type=radio]::after { content: " "; position: absolute; top: 6px; left: 6px; transform: scale(0); width: 6px; height: 6px; background-color: var(--white-0); border-radius: 50%; } input[type=radio]:hover { border: 1px solid var(--gray-203); } input[type=radio]:disabled { border: 1px solid var(--gray-202); background-color: var(--black-10); } input[type=radio]:disabled:checked { border: 1px solid var(--gray-202); background-color: var(--black-10); } input[type=radio]:checked { background-color: var(--blue-3); border: 1px solid var(--blue-3); } input[type=radio]:checked::after { transform: scale(1); } input[type=radio]:checked:hover { background-color: var(--blue-8); } input[type=checkbox] { cursor: pointer; width: 24px; height: 24px; border-radius: 4px; position: relative; background-color: var(--white-0); border: 1px solid var(--gray-202); transition: all 0.2s ease-in-out; } input[type=checkbox]::after { content: " "; position: absolute; top: 5px; left: 5px; width: 12px; height: 12px; background: url('data:image/svg+xml;charset=utf-8,%3Csvg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.6875 4.99989L5.22505 8.53737L12.3127 1.4624" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E'); background-repeat: no-repeat; opacity: 0; transition: opacity 250ms; } input[type=checkbox]:hover { border: 1px solid var(--gray-203); } input[type=checkbox]:disabled { border: 1px solid var(--gray-202); background-color: var(--black-10); } input[type=checkbox]:disabled:checked { border: 1px solid var(--gray-202); background-color: var(--black-10); } input[type=checkbox]:disabled:checked::after { opacity: 1; } input[type=checkbox]:checked { background-color: var(--blue-3); border: 1px solid var(--blue-3); } input[type=checkbox]:checked::after { opacity: 1; } input[type=checkbox]:checked:hover { background-color: var(--blue-8); } input[type=checkbox].switch { width: 40px; height: 24px; background-color: var(--black-10); border-color: var(--black-10); border-radius: 20px; } input[type=checkbox].switch::after { content: " "; position: absolute; left: 1px; top: 1px; width: 20px; height: 20px; border-radius: 100px; background-color: var(--white-0); box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.15); opacity: 1; } input[type=checkbox].switch:hover::after { box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.25); } input[type=checkbox].switch:checked { background-color: var(--blue-3); border-color: var(--blue-3); } input[type=checkbox].switch:checked::after { left: 18px; transition: left 250ms 100ms; animation: checkedSwitch 250ms 0s forwards; } input[type=checkbox].switch:disabled { background-color: var(--gray-204); border-color: var(--gray-204); } input[type=checkbox].switch:disabled::after { background-color: var(--default-bg-color); } input[type=checkbox].switch:disabled:checked { background-color: var(--black-10); border-color: var(--black-10); } @keyframes checkedSwitch { 0%, 100% { width: 20px; } 50%, 70% { width: 32px; } } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-position: left 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; cursor: pointer; -webkit-print-color-adjust: exact; display: block; width: var(--width-100); padding: 1rem 1.2rem 1rem 2.5rem; outline: none; border-radius: 1rem; color: var(--black-201); border-radius: 0.5rem; border: 1px solid var(--gray-202); font-family: inherit; transition: all 250ms ease-in; } select:focus { border: 1px solid var(--blue-3); box-shadow: 0 0 3px 1px rgba(18, 128, 230, 0.2); } .select_box { position: relative; cursor: pointer; transition: background 250ms; } .select_box .select_box__content { display: flex; flex-direction: column; padding: 1rem 3rem 1rem 1rem; gap: 1rem; border-radius: 4px; border: 1px solid var(--black-10); transform: all 250ms ease-in; } .select_box .select_box__content .select_box__desc { position: relative; padding: 0.5rem; border-radius: 0.5rem; background: var(--gray-204); font-size: 0.85rem; color: var(--gray-211); text-align: justify; } .select_box .select_box__content .select_box__desc::before { content: ""; position: absolute; top: -8px; right: 8px; width: 21px; height: 10px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='10' viewBox='0 0 19 10' fill='none'%3E%3Cpath d='M8.81034 0.656815L0.810345 8.27586C0.156658 8.89842 0.59729 10 1.5 10H17.5C18.4027 10 18.8433 8.89842 18.1897 8.27586L10.1897 0.656815C9.80345 0.288998 9.19655 0.288998 8.81034 0.656815Z' fill='%23F2F2F2'/%3E%3C/svg%3E"); } .select_box input { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); } .select_box input:checked + .select_box__content { border: 1px solid var(--blue-3); box-shadow: 0 0 3px 1px rgba(18, 128, 230, 0.2); background: var(--blue-4); } .select_box input:checked + .select_box__content .select_box__desc { background: var(--blue-9) !important; color: var(--blue-1); } .select_box input:checked + .select_box__content .select_box__desc::before { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='10' viewBox='0 0 19 10' fill='none'%3E%3Cpath d='M8.81034 0.656815L0.810345 8.27586C0.156658 8.89842 0.59729 10 1.5 10H17.5C18.4027 10 18.8433 8.89842 18.1897 8.27586L10.1897 0.656815C9.80345 0.288998 9.19655 0.288998 8.81034 0.656815Z' fill='%23B8D9F7'/%3E%3C/svg%3E"); } .animate_input { position: relative; } .animate_input input { height: 50px; } .animate_input input, .animate_input textarea { width: var(--width-100); padding: 1rem 1.2rem; border-radius: 0.5rem; border: 1px solid var(--gray-202); outline: none; font-family: inherit; transition: all 250ms ease-in; } .animate_input input.withClose, .animate_input textarea.withClose { padding: 1rem 1.2rem 1rem 2.5rem; } .animate_input input.withIcon, .animate_input textarea.withIcon { padding: 1rem 2.5rem 1rem 1.2rem; } .animate_input input.withClose.withIcon, .animate_input textarea.withClose.withIcon { padding: 1rem 2.5rem; } .animate_input input + label, .animate_input textarea + label { display: flex; align-items: center; gap: 0.5rem; position: absolute; top: 50%; right: 13px; transform: translateY(-50%); background-color: var(--white-0); font-size: 0.9rem; padding: 0 0.5rem; color: var(--gray-200); transition: top 250ms ease-in, transform 250ms, font-size 200ms ease-in; } .animate_input input:focus, .animate_input textarea:focus { border: 1px solid var(--blue-3); box-shadow: 0 0 3px 1px rgba(18, 128, 230, 0.2); } .animate_input input:focus + label, .animate_input textarea:focus + label { top: 0; font-size: 0.8rem; } .animate_input textarea + label { top: 25px; right: 13px; } .animate_input .btn_clear, .animate_input .btn_input { position: absolute; top: 0; left: 0; bottom: 0; cursor: pointer; background-color: transparent; padding: 0 0.6rem; color: var(--gray-203); } .animate_input .btn_clear i, .animate_input .btn_input i { font-size: 20px; } .animate_input.withIcon input:focus ~ .input_icon, .animate_input.withIcon textarea:focus ~ .input_icon { color: var(--blue-3); } .animate_input.withIcon input + label { top: 50%; transform: translate(-20px, -50%); } .animate_input.withIcon input:focus + label { top: 0; transform: translate(0, -50%); } .animate_input.withIcon textarea + label { top: 13px; right: 13px; transform: translateX(-20px); } .animate_input.withIcon textarea:focus + label { top: -10px; transform: translateX(0); } .animate_input.withIcon .input_icon { position: absolute; top: 16px; right: 5px; display: flex; justify-content: center; align-items: center; background-color: transparent; padding: 0 0.6rem; color: var(--gray-203); } .animate_input.fill { width: var(--width-100); } .animate_input.has_error input, .animate_input.has_error textarea { border: 1px solid var(--red-4); box-shadow: 0 0 3px 1px rgba(234, 47, 47, 0.2); } .animate_input.has_error input + label, .animate_input.has_error textarea + label { top: 0; font-size: 0.8rem; } .animate_input.has_error .text_error, .animate_input.has_error + .text_error { display: flex; align-items: center; gap: 0.5rem; color: var(--red-4); padding-top: 0.5rem; } .animate_input.has_error .text_error i, .animate_input.has_error + .text_error i { width: 18px; font-size: 18px; padding-top: 3px; } .animate_input.has_error .text_error p, .animate_input.has_error + .text_error p { width: calc(100% - 0.5rem - 18px); font-size: 0.8rem; } .animate_input.has_error.withIcon input + label { top: 0; transform: translate(0, -50%); } .animate_input.has_error.withIcon textarea + label { top: -10px; transform: translateX(0); } .animate_input.has_error.withIcon .input_icon { color: var(--red-4); } .solid_input { display: flex; flex-direction: column; gap: 0.5rem; } .solid_input input, .solid_input textarea { width: var(--width-100); padding: 1rem 1.2rem; border-radius: 0.5rem; border: 1px solid var(--gray-202); outline: none; font-family: inherit; transition: all 250ms ease-in; } .solid_input input.withClose, .solid_input textarea.withClose { padding: 1rem 1.2rem 1rem 2.5rem; } .solid_input input.small, .solid_input textarea.small { height: 42px; } .solid_input input.input_48, .solid_input textarea.input_48 { height: 48px; } .solid_input input.medium, .solid_input textarea.medium { height: 50px; } .solid_input input.h-48, .solid_input textarea.h-48 { height: 50px; } .solid_input input + label, .solid_input textarea + label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--gray-202); } .solid_input input:focus, .solid_input textarea:focus { border: 1px solid var(--blue-3); box-shadow: 0 0 3px 1px rgba(18, 128, 230, 0.2); } .solid_input label { display: flex; align-items: center; gap: 0.5rem; } .solid_input.oneline { width: var(--width-100); } .solid_input.oneline label { width: var(--width-100); flex: 0 0 100%; } .solid_input.oneline input, .solid_input.oneline textarea { width: var(--width-100); flex: 0 0 100%; } @media (min-width: 756px) { .solid_input.oneline { flex-direction: row; align-items: center; } .solid_input.oneline label { width: 200px; flex: 0 0 200px; } .solid_input.oneline input, .solid_input.oneline textarea { width: calc(100% - 200px - 0.5rem); flex: 0 0 calc(100% - 200px - 0.5rem); } } .solid_input .input_container { position: relative; } .solid_input .btn_clear{ display: flex; align-items: center; } .solid_input .btn_clear, .solid_input .btn_input { position: absolute; top: 0; left: 0; bottom: 0; cursor: pointer; background-color: transparent; padding: 0 0.6rem; color: var(--gray-203); } .solid_input .btn_clear i, .solid_input .btn_input i { font-size: 20px; } .solid_input.has_error input, .solid_input.has_error textarea { border: 1px solid var(--red-4); box-shadow: 0 0 3px 1px rgba(234, 47, 47, 0.2); } .solid_input.has_error .text_error { display: flex; align-items: center; gap: 0.5rem; color: var(--red-4); } .solid_input.has_error .text_error i { width: 18px; font-size: 18px; } .solid_input.has_error .text_error p { width: calc(100% - 0.5rem - 18px); font-size: 14px; font-weight: 500; } .dropdown-select { position: relative; } .dropdown-select::after { content: "\f078"; font-family: "Font Awesome 6 Pro"; position: absolute; top: 50%; transform: translateY(-50%); left: 1rem; color: var(--black-0); } .dropdown_select { position: relative; width: var(--width-100); border-radius: 0.5rem; border: 1px solid var(--gray-202); background-color: var(--white-0); outline: none; font-family: inherit; transition: all 250ms ease-in; } .dropdown_select .arrow { color: var(--black-0); font-size: 18px; position: absolute; top: 50%; left: 1rem; z-index: 5; transform: translateY(-50%); } .dropdown_select .dropdown { position: relative; } .dropdown_select .dropdown-select { position: relative; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: var(--width-100); height: auto; padding: 0.75rem 1.25rem; border: none; outline: none; border-radius: 0.25rem; color: var(--black-200); background-clip: padding-box; background-color: var(--white-0); box-shadow: var(--shadow-medium); transition: all 0.3s ease-in-out; } .dropdown_select .dropdown-menu { position: absolute; display: none; top: 100%; left: 0; width: var(--width-100); z-index: 10; border-radius: 0 0 0.5rem 0.5rem; background-color: var(--white-0); border: 1px solid var(--black-10); transition: all 0.3s ease-in-out; } .dropdown_select .dropdown-menu-inner { max-height: 16rem; overflow-y: scroll; overflow-x: hidden; background-color: var(--white-0); border-top: 1px solid var(--black-10); } .dropdown_select .dropdown-menu-inner::-webkit-scrollbar { width: 5px; height: auto; } .dropdown_select .dropdown-menu-inner::-webkit-scrollbar-thumb { border-radius: 0.25rem; background-color: var(--color-greys); box-shadow: var(--shadow-small); } .dropdown_select .dropdown-menu-item { font-family: inherit; font-size: 1rem; font-weight: normal; line-height: inherit; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; padding: 0.65rem 1.25rem; background-color: var(--white-0); transition: all 0.2s ease-in-out; } .dropdown_select .dropdown-menu-item:hover { color: var(--red-5); background-color: var(--light-red-color); } .dropdown_select .dropdown-menu-item.is-select, .dropdown_select .dropdown-menu-item.is-select:hover { color: var(--red-6); background-color: var(--red-7); } .dropdown_select .dropdown-menu-search { display: block; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; width: calc(100% - 1rem); height: auto; padding: 0.65rem 1.25rem; outline: none; border-radius: 0.5rem; border: 1px solid var(--gray-202); background-color: var(--white-0); margin: 0.5rem; } .form_inline { width: var(--width-100); display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; } @media (min-width: 360px) { .form_inline { flex-direction: row; } .form_inline .solid_input, .form_inline .animate_input { flex-grow: 1; } } .form_inline__offer { width: var(--width-100); display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; } .form_inline__offer button { width: var(--width-100); } @media (min-width: 675px) { .form_inline__offer { flex-direction: row; } .form_inline__offer button { width: 180px; } .form_inline__offer .solid_input, .form_inline__offer .animate_input { flex-grow: 1; } } .agree_checkbox__container { display: flex; align-items: center; gap: 0.5rem; } .agree_checkbox__container .agree_checkbox__label { width: calc(100% - 0.5rem - 24px); padding: 1rem 0 0.75rem; font-size: 0.9rem; color: var(--gray-200); } .product_search__container { display: flex; align-items: center; position: relative; gap: 0.75rem; border: 1px solid var(--black-10); border-radius: 0.5rem; padding: 0.3rem 0.75rem; } .product_search__container input { min-width: 100px; width: auto; flex: 1 1 auto; flex-grow: 1; border: none; outline: none; padding: 0.5rem; } .product_search__container .category_container { display: flex; align-items: center; gap: 0.5rem; } .product_search__container .category_container > p { color: var(--gray-200); } .product_search__container .category_container .category_item { display: flex; padding: 0.25rem 0.5rem; justify-content: center; align-items: center; gap: 0.5rem; border-radius: 4px; background: var(--black-10); } .product_search__container .btn_clear { padding: 0.2rem 0.5rem; transition: color 250ms; } .product_search__container .btn_clear:hover { color: var(--main-color); } #slider-range { width: var(--width-100); margin: 0.75rem 0 1.2rem; } .ui-widget-content { height: 4px; background-color: var(--black-10); border: none !important; position: relative; } .ui-widget-header { background-color: var(--red-1) !important; position: absolute; height: 100%; } .ui-slider-handle { top: -12px !important; height: 25px !important; width: 25px !important; background-color: var(--white-0) !important; border-radius: 50%; border-color: var(--black-10) !important; position: absolute; } .ui-slider-handle:nth-child(1)::after, .ui-slider-handle:nth-child(2)::after { content: "\f053"; font-family: "Font Awesome 6 Pro"; position: absolute; inset: 0; padding-top: 5px; color: var(--black-201); text-align: center; vertical-align: middle; font-size: 12px; } .ui-slider-handle:last-child:after { content: "\f054"; font-family: "Font Awesome 6 Pro"; position: absolute; inset: 0; padding-top: 5px; color: var(--black-201); vertical-align: middle; text-align: center; font-size: 12px; } .price_input__container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.5rem; } .price_input__container p { font-size: 0.8rem; text-align: right; align-self: center; } .price_input__container .price_input { display: flex; grid-column: span 2/span 2; width: var(--width-100); border: 1px solid var(--gray-204); border-radius: 4px; overflow: hidden; } .price_input__container .price_input input[type=text] { direction: ltr; width: calc(100% - 60px); padding: 0.5rem 1rem; outline-color: transparent; color: var(--black-0); border: 1px solid var(--gray-204); } .price_input__container .price_input .input_badge { width: 60px; height: 100%; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.8rem; background-color: var(--default-bg-color); color: var(--gray-200); } .star_rating { display: flex; align-items: center; gap: 0.5rem; color: var(--yellow-2); } .star_rating input { display: none; } .star_rating label { color: var(--black-10); cursor: pointer; font-size: 30px; } .star_rating :checked ~ label, .star_rating label:hover, .star_rating label:hover ~ label { color: var(--yellow-2); } .select_color__radio { cursor: pointer; } .select_color__radio input { width: 0; display: none; } .select_color__radio .select_color__box { background-color: var(--white-0); display: flex; align-items: center; border: 1px solid var(--black-10); gap: 0.75rem; border-radius: 0.5rem; padding: 0.5rem 1rem; } .select_color__radio .select_color__box .circle_color { width: 24px; height: 24px; position: relative; border-radius: 300px; } .select_color__radio .select_color__box .circle_color::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 17px; height: 11px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="9" viewBox="0 0 13 9" fill="none"><path d="M1 4.53748L4.53755 8.07497L11.6252 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-size: 100% 100%; background-position: bottom center; opacity: 0; transition: opacity 250ms; color: var(--white-0); } .select_color__radio .select_color__box .circle_color.blue { background: var(--blue-6); } .select_color__radio .select_color__box .circle_color.red { background: var(--red-9); } .select_color__radio .select_color__box .circle_color.navy { background: var(--blue-7); } .select_color__radio .select_color__box .circle_color.green { background: var(--green-7); } .select_color__radio .select_color__box .circle_color.primary { background: var(--white-0); border: 1px solid var(--black-10); } .select_color__radio input:checked + .select_color__box { border: 2px solid var(--blue-8); } .select_color__radio input:checked + .select_color__box .circle_color::after { opacity: 1; } .select_color__radio input:checked + .select_color__box .circle_color.primary { background: var(--blue-8); border: 1px solid var(--blue-8); } .review_image__upload__button input { display: none; width: 0; } .review_image__upload__button label { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-200); cursor: pointer; margin-top: 1rem; } .review_image__upload__button label i { width: 20px; font-size: 20px; } .review_image__upload__button label p { width: calc(100% - 22px - 0.5rem); } .review_images__uploaded { direction: rtl; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .review_images__uploaded .review_image { width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; border-radius: 4px; border: 1px solid var(--black-10); } .review_images__uploaded .review_image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .review_images__uploaded .review_image .uploading_status { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1.2rem; font-weight: 600; background-color: rgba(77, 77, 77, 0.5); color: var(--white-0); opacity: 0; visibility: hidden; } .review_images__uploaded .review_image.uploading .uploading_status { opacity: 1; visibility: visible; } .otp_input__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .otp_input__grid input { text-align: center; } .shopping_step__container { display: flex; align-items: center; overflow: hidden; border-radius: 0.5rem; } .shopping_step__container .soppping_step__button { position: relative; z-index: 1; width: 33.3333333333%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 0; background-color: var(--gray-204); color: var(--gray-201); cursor: pointer; } .shopping_step__container .soppping_step__button:nth-child(1) { -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 5% 100%, 0% 50%, 5% 0%); clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 5% 100%, 0% 50%, 5% 0%); } .shopping_step__container .soppping_step__button:nth-child(2) { -webkit-clip-path: polygon(100% 0%, 95% 50%, 100% 100%, 5% 100%, 0% 50%, 5% 0%); clip-path: polygon(100% 0%, 95% 50%, 100% 100%, 5% 100%, 0% 50%, 5% 0%); } .shopping_step__container .soppping_step__button:nth-child(3) { -webkit-clip-path: polygon(100% 0%, 95% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%); clip-path: polygon(100% 0%, 95% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%); } .shopping_step__container .soppping_step__button.active { background-color: var(--red-1); color: var(--white-0); } .shopping_step__container .soppping_step__button.active:after { content: " "; position: absolute; top: 50%; transform: translateY(-50%); right: -5px; border-radius: 1000000px; width: calc(100% + 100px); height: 200px; animation: ripple 2s forwards infinite; } @keyframes ripple { 0% { transform: translateY(-50%) translateX(0); background-color: var(--red-1); } 50% { background-color: var(--red-6); } 0% { transform: translateY(-50%) translateX(calc(100% + 100px)); background-color: var(--red-1); } } .shopping_step__container .soppping_step__button > * { position: relative; z-index: 3; } .shopping_step__container .soppping_step__button svg { width: 22px; height: 22px; display: none; } @media (min-width: 956px) { .shopping_step__container .soppping_step__button svg { display: block; } } .shopping_step__container .soppping_step__button p { font-size: 0.8rem; } @media (min-width: 956px) { .shopping_step__container .soppping_step__button p { font-size: 1rem; } } .shopping_step__container .soppping_step__button i { font-size: 22px; display: none; } @media (min-width: 956px) { .shopping_step__container .soppping_step__button i { display: block; } } .tabbar_container--1 .tabbar_container__buttons { display: flex; align-items: center; gap: 1.5rem; } .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button { width: 50%; position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.5rem; background-color: var(--black-10); color: var(--gray-200); border-radius: 1rem 1rem 0 0; cursor: pointer; font-weight: 500; } .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button.show { color: var(--red-1); box-shadow: 0 -20px 20px 10px rgba(229, 229, 229, 0.3); } .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button.show .shop_badge { background: var(--red-1); } .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button.show:after { bottom: 0; } .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button:after { content: ""; width: var(--width-100); height: 100%; position: absolute; bottom: -100%; left: 0; background-color: var(--white-0); transition: bottom 250ms; } .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button .shop_badge { display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; color: var(--white-0); background: var(--gray-200); line-height: 0; font-size: 13px; font-weight: 600; } @media (min-width: 380px) { .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button .shop_badge { display: flex; } } .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button > * { position: relative; z-index: 3; } .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button p { font-size: 0.85rem; } @media (min-width: 756px) { .tabbar_container--1 .tabbar_container__buttons .tabbar_container__button p { font-size: 1rem; } } .tabbar_container--1 .tabbar_container__contents .tabbar_container__content { display: none; padding: 1rem; background-color: var(--white-0); width: var(--width-100); border-radius: 0 0 1rem 1rem; } .tabbar_container--1 .tabbar_container__contents .tabbar_container__content.show { display: block; } .tabbar_container--2 { overflow-x: hidden; } .tabbar_container--2 .tabbar_container__buttons { display: flex; overflow-x: auto; padding: 0 1rem; } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button { display: flex; align-items: center; gap: 0.5rem; position: relative; min-width: 100px; text-align: center; padding: 1rem 1.2rem; font-weight: 500; cursor: pointer; } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button.col { flex-direction: column; gap: 0.5rem; } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button p.desc { color: var(--gray-211); font-size: 0.8rem; } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: var(--width-100); height: 4px; border-radius: 2px 2px 0px 0px; background: transparent; } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button .badge { display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; text-align: center; background-color: var(--black-10); color: var(--gray-200); } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button.show { color: var(--blue-3); } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button.show p.desc { color: inherit; } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button.show .badge { background-color: var(--blue-3); color: var(--white-0); } .tabbar_container--2 .tabbar_container__buttons .tabbar_container__button.show::after { background: var(--blue-3); } .tabbar_container--2 .tabbar_container__contents .tabbar_container__content { display: none; padding: 1rem; width: var(--width-100); } .tabbar_container--2 .tabbar_container__contents .tabbar_container__content.show { display: block; } .tabbar_container--3 .tabbar_container__buttons { display: none; align-items: center; gap: 1.5rem; } .tabbar_container--3 .tabbar_container__buttons .tabbar_container__button { width: 25%; position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.5rem; background-color: var(--black-10); color: var(--gray-200); border-radius: 1rem 1rem 0 0; cursor: pointer; font-weight: 500; } .tabbar_container--3 .tabbar_container__buttons .tabbar_container__button.show { background-color: var(--white-0); color: var(--red-1); } .tabbar_container--3 .tabbar_container__buttons .tabbar_container__button.show .shop_badge { background: var(--red-1); } .tabbar_container--3 .tabbar_container__buttons .tabbar_container__button .shop_badge { display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; color: var(--white-0); background: var(--gray-200); line-height: 0; font-size: 13px; font-weight: 600; } @media (min-width: 756px) { .tabbar_container--3 .tabbar_container__buttons .tabbar_container__button .shop_badge { display: flex; } } .tabbar_container--3 .tabbar_container__contents { display: flex; flex-direction: column; gap: 1rem; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background-color: var(--white-0); width: var(--width-100); border-radius: 0 0 1rem 1rem; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .display_desktop, .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .display_desktop__block { display: none !important; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content.description_product__section { max-height: 700px; overflow: hidden; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content.open { max-height: -moz-max-content; max-height: max-content; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content.open .loadmore_descproduct__button { position: relative; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .tabbar_header { width: var(--width-100); display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.5rem; background-color: var(--gray-204); color: var(--red-1); border-radius: 1rem 1rem 0 0; cursor: pointer; font-weight: 500; margin-bottom: 1rem; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .loadmore_descproduct__button { display: none; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), var(--white-0), var(--white-0)); } @media (min-width: 881px) { .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .loadmore_descproduct__button { display: flex; } } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .loadmore_descproduct__button--mobile { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), var(--white-0), var(--white-0)); } @media (min-width: 881px) { .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .loadmore_descproduct__button--mobile { display: none; } } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .loadmore_button { padding: 1rem; display: flex; align-items: center; justify-content: center; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .loadmore_button.hide_mobile { display: none; } @media (min-width: 881px) { .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .display_mobile { display: none !important; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .display_desktop { display: flex !important; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .display_desktop__block { display: block !important; } } @media (min-width: 881px) { .tabbar_container--3 .tabbar_container__buttons { display: flex; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content { display: none; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content.show { display: flex; } .tabbar_container--3 .tabbar_container__contents .tabbar_container__content .tabbar_header { display: none; } } hr { border-color: rgba(229, 229, 229, 0.3); } .offer_box { display: flex; padding: 2px 4px; justify-content: center; align-items: center; gap: 10px; border-radius: 0.5rem; color: var(--white-0); text-align: center; font-size: 0.8rem; font-weight: 500; background-color: var(--red-1); } .text_xlarge { font-size: 1.2rem; } .text_large { font-size: 1rem; } .text_sm { font-size: 0.9rem; } .text_xs { font-size: 0.8rem; } .text_right { text-align: right; } .text_center { text-align: center; } .text_left { text-align: left; } .text_gray { color: var(--gray-211); } .text_darkgray { color: var(--black-201); } .text_black { font-weight: 600; color: var(--black-0); } .text_blue { color: var(--blue-3); } .text_danger { color: var(--red-1); } .text_dark { color: var(--black-0); } .text_white { color: var(--white-0); } .text_yellow { color: var(--yellow-5); } .text_green { color: var(--green-6); } .text_green.bold { font-weight: 600; } .text_red { color: var(--red-14); } .text_red.bold { font-weight: 600; } .font_semibold { font-weight: 500; } .font_bold { font-weight: 600; } .icon-16 { width: 16px; height: 16px; font-size: 16px; } .icon-18 { width: 18px; height: 18px; font-size: 18px; } .icon-20 { width: 20px; height: 20px; font-size: 20px; } .icon-22 { width: 22px; height: 22px; font-size: 22px; } .icon-25 { width: 25px; height: 25px; font-size: 25px; } .icon-40 { width: 40px; height: 40px; font-size: 40px; } .w-16 { width: 16px; } .w-20 { width: 20px; } .outline_card .shop_payment-btn{ display: flex; justify-content: center; align-items: center; } .arrowgif_image { width:20px; height: 40px; line-height: 40px; -o-object-fit: cover; object-fit: cover; transform: rotate(90deg); } .circle_icon__gray { width: 6px; height: 6px; border-radius: 50%; background-color: var(--black-10); } .doran-font { @supports ( (--a: 0)) { font-family: var(--font-doran-regular); } @supports ( not (--a: 0)) { font-family: "Doran", sans-serif; } } .yekanbakh-font { @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } } .cursor_pointer { cursor: pointer; } .separator_or { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-200); } .separator_or hr { flex-grow: 1; } .stars_containner { direction: ltr; display: flex; align-items: center; } .stars_containner.one i:nth-child(1) { color: var(--yellow-5); } .stars_containner.two i:nth-child(-n+2) { color: var(--yellow-5); } .stars_containner.three i:nth-child(-n+3) { color: var(--yellow-5); } .stars_containner.four i:nth-child(-n+4) { color: var(--yellow-5); } .stars_containner.five i { color: var(--yellow-5); } .stars_containner i { width: 22px; height: 22px; color: var(--black-10); } .blue_circle { background-color: blue; width: 24px; height: 24px; border: 1px solid var(--white-0); border-radius: 50%; } .green_square { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--black-10); background: var(--green-6); } .relative { position: relative; } .positive_list { display: flex; flex-direction: column; gap: 0.75rem; } .positive_list li { font-size: 0.9rem; padding-right: 1.5rem; color: var(--black-201); } .positive_list li::before { content: "\f058"; /* FontAwesome Unicode */ font-family: "Font Awesome 6 Pro"; margin-right: -1.5rem; width: 1.5rem; color: var(--green-3); } .negative_list { display: flex; flex-direction: column; gap: 0.75rem; } .negative_list li { font-size: 0.9rem; padding-right: 1.5rem; color: var(--black-201); } .negative_list li::before { content: "\f057"; /* FontAwesome Unicode */ font-family: "Font Awesome 6 Pro"; margin-right: -1.5rem; width: 1.5rem; color: var(--red-14); } .list_with__dot { list-style: disc; padding-right: 1rem; } .list_with__dot li { list-style: disc; } .list_properties { display: flex; flex-direction: column; gap: 0.4rem; } .list_properties li { display: flex; font-size: 0.8rem; color: var(--gray-200); position: relative; padding-right: 20px; } .list_properties li::before { content: " "; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--gray-208); border-radius: 50%; } .text_with__chart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .text_with__chart .text { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; grid-column: span 2/span 2; } #homeChart { font-family: inherit !important; width: 100% !important; height: 100% !important; } table { min-width: var(--width-100); border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; border: 1px solid var(--black-10); } table thead { background-color: var(--gray-204); color: var(--black-0); border-top-left-radius: 1rem; border-top-right-radius: 1rem; } table thead td, table thead th { min-width: 170px; padding: 0.75rem 1.2rem; color: var(--black-0); font-weight: 500; } table tbody { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } table tbody tr { border-bottom: 1px solid var(--black-10); } table tbody tr:last-child { border-bottom-width: 0; } table tbody td { padding: 0.75rem 1rem; } .table_container { overflow-x: hidden; } .table_container .table_container__sub { overflow-x: auto; overflow-y: hidden; border-radius: 0.5rem; border: 1px solid var(--gray-204); } .shoppingcard_table thead td, .shoppingcard_table thead th { min-width: 170px; padding: 0.75rem 1.2rem; } .shoppingcard_table thead td:nth-child(1), .shoppingcard_table thead th:nth-child(1) { min-width: 300px; } .shoppingcard_table thead td:last-child, .shoppingcard_table thead th:last-child { min-width: 200px; } .shoppingcard_table__long thead td, .shoppingcard_table__long thead th { min-width: 170px; padding: 0.75rem 1.2rem; text-align: center; } .shoppingcard_table__long thead td:nth-child(1), .shoppingcard_table__long thead th:nth-child(1) { min-width: 300px; } .shoppingcard_table__long thead td:nth-child(2), .shoppingcard_table__long thead th:nth-child(2) { min-width: 150px; } .shoppingcard_table__long thead td:nth-child(3), .shoppingcard_table__long thead th:nth-child(3) { min-width: 150px; } .shoppingcard_table__long thead td:nth-child(4), .shoppingcard_table__long thead th:nth-child(4) { min-width: 200px; } .shoppingcard_table__long thead td:last-child, .shoppingcard_table__long thead th:last-child { min-width: 200px; } .shoppingcard_table--desktop { border-radius: 8px 8px 0px 0px; border-top: 1px solid var(--black-10); border-right: 1px solid var(--black-10); border-left: 1px solid var(--black-10); padding: 16px; } .shoppingcard_table--desktop .table_header { display: flex; justify-content: center; align-items: center; width: var(--width-100); padding: 1rem; border-radius: 0.5rem 0.5rem 0 0; background: var(--black-10); color: var(--gray-201); font-size: 14px; text-align: center; } .shoppingcard_table--desktop .table_body__item { display: flex; justify-content: space-between; } .shoppingcard_table--desktop .shopcart-h-line-separator { width: var(--width-100); height: 1px; background: var(--gray-204); margin: 8px 0 8px 0; } .shoppingcard_table--desktop .table_body__item .product_info { width: 40%; flex: 0 0 40%; display: flex; align-items: flex-start; gap: 0.75rem; color: var(--black-201); } .shoppingcard_table--desktop .table_body__item .product_info .product_image { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; overflow: hidden; border-radius: 0.5rem; } .shoppingcard_table--desktop .table_body__item .product_info .product_image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .shoppingcard_table--desktop .table_body__item .product_info .product_title { width: calc(100% - 1rem - 72px); display: flex; flex-direction: column; gap: 0.75rem; } .shoppingcard_table--desktop .table_body__item .product_info .product_title .shoppingcard_item__desc { display: flex; flex-direction: column; gap: 0.75rem; } .shoppingcard_table--desktop .table_body__item .product_num__price { width: 60%; flex: 0 0 60%; display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-end; justify-content: space-between; } .shoppingcard_table--desktop .table_body__item .product_num__price .product_counter__container { display: flex; align-items: center; gap: 0.75rem; border-radius: 4px; border: 1px solid var(--gray-207); padding: 0 0.8rem; } .shoppingcard_table--desktop .table_body__item .product_num__price .product_counter__container .btn_add, .shoppingcard_table--desktop .table_body__item .product_num__price .product_counter__container .btn_low { display: flex; align-items: center; justify-content: center; background-color: var(--black-10); width: 26px; height: 26px; color: var(--black-201); border-radius: 0.5rem; } .shoppingcard_table--desktop .table_body__item .product_num__price .product_counter__container .btn_add i, .shoppingcard_table--desktop .table_body__item .product_num__price .product_counter__container .btn_low i { font-size: 18px; } .shoppingcard_table--desktop .table_body__item .product_num__price .product_counter__container .btn_delete { color: var(--black-201); } .shoppingcard_table--desktop .table_body__item .product_num__price .product_counter__container .btn_delete i { font-size: 20px; } .shoppingcard_table--desktop .table_body__item .product_num__price .product_counter__container .display_counter { min-width: 30px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); } .shoppingcard_table--desktop .table_body__item .product_num__price .product_price { display: flex; flex-direction: column; align-items: flex-end; } .shoppingcard_table--desktop .table_body__item .product_num__price .product_price .product_offer { display: flex; align-items: center; justify-content: space-between; } .shoppingcard_table--desktop .table_body__item .product_num__price .product_price .product_offer .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .shoppingcard_table--desktop .table_body__item .product_num__price .product_price .product_price__text { font-weight: 600; color: var(--green-6); font-size: 0.9rem; } .shoppingcard_table--desktop .table_body__item .product_unavailable { text-align: left; font-size: 1.05rem; color: var(--black-200); } .shoppingcard_table--desktop .table_body .line_vertical { width: 2px; height: 15px; background-color: var(--black-10); } @media (min-width: 998px) { .shoppingcard_table--desktop { display: block; } } .shoppingcard_table--mobile { display: block; } .shoppingcard_table--mobile .table_header { display: flex; justify-content: center; align-items: center; width: var(--width-100); padding: 1rem; border-radius: 0.5rem 0.5rem 0 0; background: var(--black-10); color: var(--gray-201); font-size: 14px; text-align: center; } .shoppingcard_table--mobile .table_body__item { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--black-10); } .shoppingcard_table--mobile .table_body__item:last-child { border-bottom-width: 0; } .shoppingcard_table--mobile .table_body__item .product_info { display: flex; align-items: flex-start; gap: 1rem; color: var(--black-201); } .shoppingcard_table--mobile .table_body__item .product_info .product_image { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; overflow: hidden; border-radius: 0.5rem; } .shoppingcard_table--mobile .table_body__item .product_info .product_image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .shoppingcard_table--mobile .table_body__item .product_info .product_title { width: calc(100% - 1rem - 72px); display: flex; flex-direction: column; gap: 0.75rem; } .shoppingcard_table--mobile .table_body__item .product_info .product_title .shoppingcard_item__desc { display: flex; flex-direction: column; gap: 0.75rem; } .shoppingcard_table--mobile .table_body__item .product_num__price { display: flex; align-items: center; justify-content: space-between; } .shoppingcard_table--mobile .table_body__item .product_num__price .product_counter__container { display: flex; align-items: center; gap: 0.75rem; border-radius: 4px; border: 1px solid var(--gray-207); padding: 0 0.8rem; } .shoppingcard_table--mobile .table_body__item .product_num__price .product_counter__container .btn_add { display: flex; align-items: center; justify-content: center; background-color: var(--black-10); width: 26px; height: 26px; color: var(--black-201); border-radius: 0.5rem; } .shoppingcard_table--mobile .table_body__item .product_num__price .product_counter__container .btn_add i { font-size: 20px; } .shoppingcard_table--mobile .table_body__item .product_num__price .product_counter__container .btn_delete { color: var(--black-201); } .shoppingcard_table--mobile .table_body__item .product_num__price .product_counter__container .btn_delete i { font-size: 22px; } .shoppingcard_table--mobile .table_body__item .product_num__price .product_counter__container .display_counter { min-width: 30px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); } .shoppingcard_table--mobile .table_body__item .product_num__price .product_price { display: flex; flex-direction: column; align-items: flex-end; } .shoppingcard_table--mobile .table_body__item .product_num__price .product_price .product_offer { display: flex; align-items: center; justify-content: space-between; } .shoppingcard_table--mobile .table_body__item .product_num__price .product_price .product_offer .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .shoppingcard_table--mobile .table_body__item .product_num__price .product_price .product_price__text { font-weight: 600; color: var(--green-6); font-size: 0.9rem; } .shoppingcard_table--mobile .table_body__item .product_unavailable { text-align: left; font-size: 1.05rem; color: var(--black-200); } @media (min-width: 998px) { .shoppingcard_table--mobile { display: none; } } .table_order--mobile { display: block; border-radius: 0.5rem; border: 1px solid var(--black-10); padding: 0.5rem; } .table_order--mobile .order_detail { border-top: 1px solid var(--black-10); display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; } .table_order--mobile .order_detail .end { width: 110px; } @media (min-width: 881px) { .table_order--mobile { display: none; } } .table_order--desktop { display: none; } @media (min-width: 881px) { .table_order--desktop { display: block; } } @media (min-width: 881px) { .table_order--desktop { display: block; } } .order_table thead td { min-width: 170px; padding: 0.75rem 1.2rem; } .order_table thead td:nth-child(1) { min-width: 300px; } @media (min-width: 756px) { .order_table thead td:nth-child(1) { min-width: 50%; } } .condition_table { border: 1px solid var(--black-10); border-radius: 0.5rem; } .condition_table.two_column .condition_table__row { grid-template-columns: repeat(2, 1fr); } .condition_table.three_column .condition_table__row { grid-template-columns: repeat(3, 1fr); } .condition_table.four_column .condition_table__row { grid-template-columns: repeat(4, 1fr); } .condition_table .condition_table__separate { border: 1px solid var(--black-10); background: var(--gray-204); padding: 0.75rem 1.5rem; color: var(--black-0); font-weight: 500; } .condition_table .condition_table__row { display: grid; } .condition_table .condition_table__row.border-b { border-bottom: 1px solid var(--black-10) !important; } .condition_table .condition_table__row.border-b-none { border-bottom-width: 0; } .condition_table .condition_table__row > div { width: var(--width-100); border-left: 1px solid var(--black-10); } .condition_table .condition_table__row > div:last-child { border-left: none; } .condition_table .condition_table__row .header_title { width: var(--width-100); display: flex; align-items: center; justify-content: center; text-align: center; background: var(--default-bg-color); color: var(--gray-200); border-bottom: 1px solid var(--black-10); } .condition_table .condition_table__row .header_title.border-b-none { border-bottom-width: 0; } .condition_table .condition_table__row .table_content { width: var(--width-100); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; padding: 1.5rem 0.5rem; border-bottom: 1px solid var(--black-10); } .condition_table .condition_table__row .table_content.add_content__box { justify-content: flex-start; } .condition_table .condition_table__row .table_content:last-child { border-bottom-width: 0; } .condition_table .condition_table__row .table_content .rating_condition { display: flex; align-items: center; gap: 0.5rem; } .condition_table .condition_table__row .table_content .rating_condition p { font-size: 0.85rem; color: var(--gray-200); } .condition_table .condition_table__row .table_content .rating_condition i { font-size: 20px; color: var(--yellow-5); } .condition_table .condition_table__row .table_content .badge_green__condition { padding: 0.35rem 0.75rem; border-radius: 0.5rem; background: var(--gray-212); color: var(--green-6); font-size: 0.85rem; font-weight: 600; } .condition_table .condition_table__row .table_content .badge_red__condition { padding: 0.35rem 0.75rem; border-radius: 0.5rem; background: var(--light-red-color); color: var(--red-6); font-size: 0.85rem; font-weight: 600; } .condition_table .condition_table__row.last .table_content, .condition_table .condition_table__row.last .header_title, .condition_table .condition_table__row:first-child .table_content, .condition_table .condition_table__row:first-child .header_title { border-bottom-width: 0 !important; } .compare-products-main-container { display: grid; grid-template-columns: minmax(130px,250px) auto; } .compare-products-main-content { display: grid; grid-auto-flow: column; } .compare-products-main-container .gray-side { display: grid; grid-gap: 0; align-content: start; align-items: center; background-color: var(--gray-205); padding-top: 16px; padding-bottom: 16px; } .compare-products-main-container .product-column { display: grid; grid-gap: 0; align-content: start; align-items: center; } .compare-products-main-container .gray-side .product-general-info .product-title { align-self: center; } .compare-products-main-container .gray-side .product-general-info { display: grid; grid-template-columns: 1fr; grid-template-rows: 311px 32px 35px 32px 35px; justify-content: center; justify-items: center; } .compare-products-main-container .product-general-info { height: 443px; } .compare-products-main-container .gray-side span { color: var(--gray-201); text-align: center; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } } .compare-products-main-content .product-features-item { max-width: 217px; height: auto; } .compare-products-main-content .product-general-info { display: grid; grid-template-rows: 311px 32px 35px 32px 35px; justify-content: center; justify-items: center; grid-gap: 0; align-content: start; align-items: center; } .compare-products-main-container .gray-side span { color: var(--gray-201); text-align: center; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } } .compare-products-main-container .compare-products-main-content .product-features span { color: var(--gray-203); text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } } .compare-products-main-container .box-border{ border: 1px solid var(--black-10); } .compare-products-main-container .product-column,.add-product-column { padding-top: 16px; padding-bottom: 16px; } .compare-products-main-container .table_content { height: 311px; } .compare-products-main-container .product-features { display: grid; justify-content: center; justify-items: center; } .compare-products-main-content .product-column .rating_condition { display: flex; align-items: center; gap: 0.5rem; } .compare-products-main-content .product-column .rating_condition p { font-size: 0.85rem; color: var(--gray-200); } .compare-products-main-content .product-column .rating_condition i { font-size: 20px; color: var(--yellow-5); } .compare-products-main-content .product-column .badge_green__condition { padding: 0.35rem 0.75rem; border-radius: 0.5rem; background: var(--gray-212); color: var(--green-6); font-size: 0.85rem; font-weight: 600; line-height: 1.2rem; } .compare-products-main-content .product-column .badge_red__condition { padding: 0.35rem 0.75rem; border-radius: 0.5rem; background: var(--light-red-color); color: var(--red-6); font-size: 0.85rem; font-weight: 600; } .condition_sticky__header { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; background: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .condition_sticky__header .product_condition--select_card { padding: 1rem; gap: 1rem; width: var(--width-100); max-width: 250px; } .condition_sticky__header .condition_sticky__container { padding: 0 2rem; display: grid; } .condition_sticky__header .condition_sticky__container.two_column { grid-template-columns: repeat(2, 1fr); } .condition_sticky__header .condition_sticky__container.three_column { grid-template-columns: repeat(3, 1fr); } .condition_sticky__header .condition_sticky__container.four_column { grid-template-columns: repeat(4, 1fr); } .condition_sticky__header .condition_sticky__container .header_title { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--gray-204); color: var(--gray-200); } .condition_sticky__header .condition_sticky__container .header_product { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .condition_sticky__header .condition_sticky__container .header_product .image_cover { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; overflow: hidden; } .condition_sticky__header .condition_sticky__container .header_product .image_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .condition_sticky__header.opened { display: block; } .condition_table__mobile { position: fixed; inset: 0; z-index: 10; width: var(--width-100); height: 100%; background-color: var(--white-0); display: block; } .condition_table__mobile .modal_head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--black-10); } .condition_table__mobile .modal_body { width: var(--width-100); height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0.75rem 1rem; } .condition_table__mobile .modal_body::-webkit-scrollbar { display: none; /* Hide scrollbars */ } .condition_table__mobile .table_header { text-align: center; padding: 0.75rem; } .condition_table__mobile .table_header.seperate { background-color: var(--gray-204); } .condition_table__mobile .table_row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: 0.75rem; } .condition_table__mobile .table_content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0.75rem; } .condition_table__mobile .table_item { margin-top: 0.5rem; border-top: 1px solid var(--gray-204); } @media (min-width: 881px) { .condition_table__mobile { display: none; } } @media (max-width: 880px) { .condition_table__desktop { display: none; } } .list_product--border_2 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); border-radius: 0.5rem; border: 1px solid var(--black-10); } .list_product--border_2 .item { padding: 1rem; border-bottom: 1px solid var(--black-10); } .list_product--border_2 .item:last-child { border-bottom-width: 0; } @media (min-width: 340px) { .list_product--border_2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .list_product--border_2 .item { border-left: 1px solid var(--black-10); } .list_product--border_2 .item:nth-child(2n) { border-left-width: 0; } .list_product--border_2 .item:nth-last-child(-n+2) { border-bottom-width: 0; } .list_product--border_2 .item:last-child { border-left-width: 0; border-bottom-width: 0; } } .review_table__container { display: flex; flex-direction: column; gap: 0.5rem; } .review_table__container .review_table__header { width: var(--width-100); display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--black-10); border-radius: 0.5rem; background-color: var(--white-0); padding: 1rem; } .review_table__container .review_table__header i { width: 20px; font-size: 20px; color: var(--main-color); } .review_table__container .review_table__header p { width: calc(100% - 20px - 0.75rem); color: var(--black-201); } .review_table__container .review_table__body { width: var(--width-100); max-width: 1150px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem; } .review_table__container .review_table__body .review_table__row { --title-width: 150px; display: flex; gap: 0.5rem; color: var(--black-201); } .review_table__container .review_table__body .review_table__row .review_table__title { width: var(--title-width); padding: 0.75rem 1rem; background-color: var(--default-bg-color); border-radius: 0.5rem; } .review_table__container .review_table__body .review_table__row .review_table__desc { width: calc(100% - var(--title-width) - 0.5rem); padding: 0.75rem 1rem; background-color: var(--default-bg-color); border-radius: 0.5rem; } @media (min-width: 881px) { .review_table__container .review_table__body .review_table__row { --title-width: 250px; } } .ranking_container { display: flex; flex-direction: column; gap: 0.75rem; } .ranking_container .ranking_row { display: flex; flex-direction: column; gap: 1rem; color: var(--gray-200); } .ranking_container .ranking_row .ranking_title { width: var(--width-100); text-align: right; } .ranking_container .ranking_row .ranking_chart__container { display: flex; align-items: center; gap: 0.5rem; width: var(--width-100); } .ranking_container .ranking_row .ranking_chart__container .ranking_progress__container { width: calc(100% - 40px - 0.5rem); height: 6px; overflow: hidden; border-radius: 10px; background-color: var(--black-10); } .ranking_container .ranking_row .ranking_chart__container .ranking_progress__container .ranking_progress { height: 100%; background-color: var(--main-color); } .ranking_container .ranking_row .ranking_chart__container input[type=range] { width: calc(100% - 40px - 0.5rem); -moz-appearance: none; appearance: none; -webkit-appearance: none; height: 6px; background: var(--black-10); border-radius: 10px; } .ranking_container .ranking_row .ranking_chart__container input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: var(--main-color); box-shadow: 0 0 2px 0 var(--gray-210); } .ranking_container .ranking_row .ranking_chart__container input[type=range]::-webkit-slider-runnable-track { appearance: none; -webkit-appearance: none; box-shadow: none; border: none; background: transparent; } .ranking_container .ranking_row .ranking_chart__container > p { width: 40px; text-align: left; } .ranking_container .ranking_row .ranking_chart__container.ranking_input__container { position: relative; } .ranking_container .ranking_row .ranking_chart__container.ranking_input__container .tooltip { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 80px; text-align: center; background-color: var(--gray-200); border-radius: 5rem; font-size: 0.8rem; color: var(--white-0); box-shadow: 0 1px 3px rgba(102, 102, 102, 0.3); transform: translateY(10px); opacity: 0; visibility: hidden; transition: opacity 250ms, transform 250ms, visibility 0s 250ms; } .ranking_container .ranking_row .ranking_chart__container.ranking_input__container .tooltip.hintShow { transform: translateY(0); opacity: 100; visibility: visible; transition: opacity 250ms, transform 250ms; } @media (min-width: 881px) { .ranking_container .ranking_row { flex-direction: row; align-items: center; } .ranking_container .ranking_row .ranking_title { width: 40%; } .ranking_container .ranking_row .ranking_chart__container { width: 60%; } } .sellers_table__container { display: flex; flex-direction: column; } .sellers_table__container .seller_table__row { display: flex; align-items: center; padding: 0.75rem 1.2rem; } .sellers_table__container .seller_table__row:nth-child(even) { background-color: var(--default-bg-color); } .sellers_table__container .seller_table__row .seller_table__title { width: 33%; flex: 0 0 33%; display: flex; flex-direction: column; gap: 0.75rem; } .sellers_table__container .seller_table__row .seller_table__title .seller_name { display: flex; align-items: center; gap: 0.75rem; } .sellers_table__container .seller_table__row .seller_table__title .seller_name .icon { position: relative; display: flex; align-items: center; justify-content: center; } .sellers_table__container .seller_table__row .seller_table__title .seller_name .icon > i { width: 22px; font-size: 22px; } .sellers_table__container .seller_table__row .seller_table__title .seller_name .icon .icon_badge { display: none; position: absolute; bottom: -5px; left: -6px; background-color: var(--white-0); border-radius: 50%; font-size: 13px; color: var(--green-6); } .sellers_table__container .seller_table__row .seller_table__title .seller_name .text_badge { display: none; background-color: rgba(204, 234, 211, 0.5); border-radius: 100px; padding: 0.3rem 1rem; color: var(--green-4); font-size: 0.85rem; } .sellers_table__container .seller_table__row .seller_table__title .seller_status { display: flex; align-items: center; gap: 1rem; } .sellers_table__container .seller_table__row .seller_table__title .seller_status .line_vertical { width: 2px; height: 15px; background-color: var(--black-10); } .sellers_table__container .seller_table__row .seller_table__title .seller_status p { font-size: 0.9rem; } .sellers_table__container .seller_table__row .buy_section { width: 35%; flex: 0 0 35%; display: flex; align-items: center; justify-content: space-between; } .sellers_table__container .seller_table__row .buy_section .prices { display: flex; align-items: center; gap: 0.5rem; } .sellers_table__container .seller_table__row .buy_section .prices .price_offer { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .sellers_table__container .seller_table__row .buy_section .prices .price_end { font-size: 0.85rem; color: var(--green-4); } .sellers_table__container .seller_table__row .status_product { width: 16%; flex: 0 0 16%; display: flex; align-items: center; gap: 0.3rem; } .sellers_table__container .seller_table__row .status_product i { font-size: 18px; color: var(--blue-5); } .sellers_table__container .seller_table__row .status_product p { font-size: 0.85rem; } .sellers_table__container .seller_table__row.excellent .seller_table__title .seller_name .icon_badge, .sellers_table__container .seller_table__row.excellent .seller_table__title .seller_name .text_badge { display: flex; } .sellers_table__container .seller_table__row.excellent .seller_table__title .status_text .seller_table__title { color: var(--green-4); } .sellers_table__container .seller_table__row.good .status_text { color: var(--green-1); } .sellers_table__container .seller_table__row.medium .status_text { color: var(--yellow-1); } .sellers_table__container .seller_table__row.bad .status_text { color: var(--red-8); } .slider_container { margin: 1rem 0; } .slider_container .swiper { border-radius: 1rem; margin-bottom: 2rem; } .slider_container .swiper:last-child { margin-bottom: 0; } .slider_withmenu__pagination { position: relative; margin-bottom: 4rem; height: 350px; } .slider_withmenu__pagination .swiper { height: 100%; } .slider_withmenu__pagination .swiper-slide { display: flex; align-items: center; justify-content: center; width: var(--width-100); height: 100%; } .slider_withmenu__pagination .swiper-slide img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .slider_withmenu__pagination .pagination_menu__container { width: var(--width-90); position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; background-color: var(--black-201); color: var(--white-0); padding: 0.75rem 0.5rem; border-radius: 0.5rem; } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item { position: relative; display: flex; justify-content: center; width: 33.3333333333%; flex: 0 0 33.3333333333%; text-align: center; padding: 0.5rem 0.75rem; cursor: pointer; } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item .pagination_icon { position: absolute; z-index: 0; top: -8.5px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item .pagination_icon .pagination_icon__bg { width: 28px; height: 32px; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="0 0 26 20" fill="none"><path d="M13 1.32453e-06C22.3464 9.05512e-07 20.5833 10 26 10C26 15.5228 20.1797 20 13 20C5.8203 20 -1.9081e-07 15.5228 -4.26186e-07 10C5.41667 10 3.65363 1.74355e-06 13 1.32453e-06Z" fill="%23E6123D"/></svg>'); background-size: 100% 100%; background-position: center; opacity: 0; visibility: hidden; transition: opacity 250ms ease-in, visibility 0s 250ms; } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item .pagination_icon i { position: absolute; color: var(--white-0); font-size: 12px; opacity: 0; visibility: hidden; transition: opacity 250ms ease-in, visibility 0s 250ms; } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item p { background-color: var(--black-201); border-radius: 0.5rem; font-size: 0.8rem; padding: 0.3rem 0.5rem; transition: background 250ms ease-in; } @media (min-width: 675px) { .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item p { font-size: 0.95rem; padding: 0.5rem 0.75rem; } } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item:nth-child(2) { border-left: 1px solid var(--gray-201); border-right: 1px solid var(--gray-201); } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item:hover .pagination_icon i { opacity: 1; visibility: visible; transition: opacity 250ms ease-in; } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item.active .pagination_icon i, .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item.active .pagination_icon .pagination_icon__bg { opacity: 1; visibility: visible; transition: opacity 250ms ease-in; } .slider_withmenu__pagination .pagination_menu__container .pagination_menu__item.active p { background-color: var(--red-1); } @media (min-width: 675px) { .slider_withmenu__pagination .pagination_menu__container { padding: 1rem; } } .swiper .swiper-slide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .swiper .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .swiper_homepage { height: 350px; border-radius: 1rem; } .swiper_homepage .swiper-slide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .swiper_homepage .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .swiper_homepage.bottom .swiper_control { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .swiper_homepage.bottom .swiper_control .swiper-button-prev, .swiper_homepage.bottom .swiper_control .swiper-button-next, .swiper_homepage.bottom .swiper_control .swiper-pagination { position: relative; } .swiper_homepage.bottom .swiper_control .swiper-pagination { left: 0; transform: translateX(0); } .swiper_homepage.bottom .swiper_control .swiper_control__navigation { display: flex; align-items: center; justify-content: center; gap: 2.5rem; } .swiper_homepage.arrow_rectangle .swiper-button-prev, .swiper_homepage.arrow_rectangle .swiper-button-next { width: 40px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; } .swiper_homepage .swiper-button-prev, .swiper_homepage .swiper-button-next { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--white-0); color: var(--black-201); } .swiper_homepage .swiper-button-prev::after, .swiper_homepage .swiper-button-next::after { font-size: 0.85rem; color: var(--black-201); } .swiper_homepage .swiper-pagination { display: flex; width: auto !important; left: 50%; transform: translateX(-50%); background-color: var(--white-0); padding: 0.75rem; border-radius: 50px; } .swiper_homepage .swiper-pagination .swiper-pagination-bullet { padding: 5px !important; } .swiper_homepage .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--red-1) !important; width: 25px !important; border-radius: 50px !important; } .swiper_fadein { height: 350px; } .swiper_fadein .swiper-slide { display: flex; align-items: center; justify-content: center; width: var(--width-100); height: 100%; } .swiper_fadein .swiper-slide img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .swiper-custom-fade { height: 350px; } .swiper-custom-fade .swiper-slide { display: flex; align-items: center; justify-content: center; width: var(--width-100); height: 100%; } .swiper-custom-fade .swiper-slide img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .swiper-custom-fade.bottom .swiper_control { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .swiper-custom-fade.bottom .swiper_control .swiper-button-prev, .swiper-custom-fade.bottom .swiper_control .swiper-button-next, .swiper-custom-fade.bottom .swiper_control .swiper-pagination { position: relative; } .swiper-custom-fade.bottom .swiper_control .swiper-pagination { left: 0; transform: translateX(0); } .swiper-custom-fade.bottom .swiper_control .swiper_control__navigation { display: flex; align-items: center; justify-content: center; gap: 2.5rem; } .swiper-custom-fade.arrow_rectangle .swiper-button-prev, .swiper-custom-fade.arrow_rectangle .swiper-button-next { width: 40px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; } .swiper-custom-fade .swiper-button-prev, .swiper-custom-fade .swiper-button-next { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--white-0); color: var(--black-201); } .swiper-custom-fade .swiper-button-prev::after, .swiper-custom-fade .swiper-button-next::after { font-size: 0.85rem; color: var(--black-201); } .swiper-custom-fade .swiper-pagination { display: flex; width: auto !important; left: 50%; transform: translateX(-50%); background-color: var(--white-0); padding: 0.75rem; border-radius: 50px; } .swiper-custom-fade .swiper-pagination .swiper-pagination-bullet { padding: 5px !important; } .swiper-custom-fade .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--red-1) !important; width: 25px !important; border-radius: 50px !important; } .custom-placeholders { position: relative; z-index: 0; height: 370px; } .custom-placeholders .custom-placeholders__images { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: 0; height: 100%; } .custom-placeholders .custom-placeholders__images img { height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1rem; } .custom-placeholders .custom-placeholders__images .custom-placeholders__img1 { width: calc(100% - 2rem); position: absolute; left: 16px; right: 16px; z-index: -1; } .custom-placeholders .custom-placeholders__images .custom-placeholders__img2 { width: calc(100% - 4rem); position: absolute; top: 16px; bottom: -16px; left: 32px; right: 32px; z-index: -2; } .swiper_product--4, .swiper_product--3, .swiper_product--6 { padding-bottom: 4rem !important; margin-bottom: 2rem; direction: rtl; } .swiper_product--4 .swiper-button-next, .swiper_product--4 .swiper-pagination, .swiper_product--4 .swiper-button-prev, .swiper_product--3 .swiper-button-next, .swiper_product--3 .swiper-pagination, .swiper_product--3 .swiper-button-prev, .swiper_product--6 .swiper-button-next, .swiper_product--6 .swiper-pagination, .swiper_product--6 .swiper-button-prev { position: relative; } .swiper_product--4 .swiper_control, .swiper_product--3 .swiper_control, .swiper_product--6 .swiper_control { position: absolute; bottom: 0; width: var(--width-100); display: flex; align-items: center; justify-content: space-between; } .swiper_product--4 .swiper-pagination, .swiper_product--3 .swiper-pagination, .swiper_product--6 .swiper-pagination { display: flex; width: auto !important; padding-left: 1.5rem; padding-right: 1.5rem; padding: 0.75rem; } .swiper_product--4 .swiper-pagination .swiper-pagination-bullet, .swiper_product--3 .swiper-pagination .swiper-pagination-bullet, .swiper_product--6 .swiper-pagination .swiper-pagination-bullet { padding: 5px !important; } .swiper_product--4 .swiper-pagination .swiper-pagination-bullet-active, .swiper_product--3 .swiper-pagination .swiper-pagination-bullet-active, .swiper_product--6 .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--red-1) !important; width: 25px !important; border-radius: 50px !important; } .swiper_product--4 .swiper-button-prev, .swiper_product--4 .swiper-button-next, .swiper_product--3 .swiper-button-prev, .swiper_product--3 .swiper-button-next, .swiper_product--6 .swiper-button-prev, .swiper_product--6 .swiper-button-next { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background-color: var(--white-0); color: var(--black-201); } .swiper_product--4 .swiper-button-prev::after, .swiper_product--4 .swiper-button-next::after, .swiper_product--3 .swiper-button-prev::after, .swiper_product--3 .swiper-button-next::after, .swiper_product--6 .swiper-button-prev::after, .swiper_product--6 .swiper-button-next::after { font-size: 0.85rem; color: var(--black-201); } .suggest_offer__box { display: flex; flex-direction: column; border-radius: 1rem; background: var(--white-0); } .suggest_offer__box .suggest_offer__right { width: var(--width-100); border-bottom: 1px dashed var(--gray-201); border-left-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: 16px 24px; position: relative; } .suggest_offer__box .suggest_offer__right::before { content: " "; position: absolute; bottom: -20px; right: -20px; width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23FAFAFB' /%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; } .suggest_offer__box .suggest_offer__right::after { content: " "; position: absolute; bottom: -20px; left: -20px; width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23FAFAFB' /%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; } .suggest_offer__box .suggest_offer__right .suggest_offer__image { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 1rem; } .suggest_offer__box .suggest_offer__right .suggest_offer__image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .suggest_offer__box .suggest_offer__right .suggest_offer__body { display: flex; flex-direction: column; gap: 0.8rem; } .suggest_offer__box .suggest_offer__right .suggest_offer__body .title { font-size: 1.2rem; } .suggest_offer__box .suggest_offer__right .suggest_offer__body .desc { font-size: 0.85rem; color: var(--gray-201); margin-top: 5px; } .suggest_offer__box .suggest_offer__right .suggest_offer__body .offer_timer { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; } .suggest_offer__box .suggest_offer__right .suggest_offer__body .offer_timer .offer_timer__item { text-align: center; color: var(--gray-201); } .suggest_offer__box .suggest_offer__right .suggest_offer__body .offer_timer .offer_timer__item:first-child { color: var(--red-1); } .suggest_offer__box .suggest_offer__right .suggest_offer__body .offer_timer .offer_timer__item:first-child .time, .suggest_offer__box .suggest_offer__right .suggest_offer__body .offer_timer .offer_timer__item:first-child .desc { color: var(--red-1); } .suggest_offer__box .suggest_offer__right .suggest_offer__body .offer_timer .offer_timer__item .time { font-weight: 500; font-size: 1.2rem; color: var(--black-0); } .suggest_offer__box .suggest_offer__right .suggest_offer__body .offer_timer .offer_timer__item .desc { font-size: 0.8rem; } .suggest_offer__box .suggest_offer__left { width: var(--width-100); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px; } @media (min-width: 675px) { .suggest_offer__box { flex-direction: row; align-items: center; } .suggest_offer__box .suggest_offer__right { width: 70%; border-left: 1px dashed var(--gray-201); border-bottom-width: 0; } .suggest_offer__box .suggest_offer__right::before { top: -20px; left: -20px; right: auto; } .suggest_offer__box .suggest_offer__right::after { bottom: -20px; left: -20px; } .suggest_offer__box .suggest_offer__left { flex-direction: column; align-items: stretch; width: 30%; } } .circular-progress { position: absolute; height: 1rem; width: 1rem; border-radius: 50%; background: conic-gradient(var(--white-0) 3.6deg, transparent 0deg); display: flex; rotate: 90deg; align-items: center; justify-content: center; background-clip: content-box; top: 1.4rem; left: 1.4rem; z-index: 2; } .directional-slider { position: relative !important; z-index: 0; height: 350px !important; margin-bottom: 2rem; } .directional-slider .swiper-wrapper { height: 100%; } .directional-slider .circular-progress { position: absolute; z-index: 2; } .directional-slider.vertical-slider .circular-progress { top: 1.4rem; left: 1.4rem; } .directional-slider.horizontal-slider .circular-progress { top: 1.4rem; left: 2.8rem; } .directional-slider .swiper-slide img { display: block; border-radius: 16px; -o-object-fit: cover; object-fit: cover; height: 100%; } .directional-slider.vertical-slider .swiper-slide img { width: var(--width-100); } .directional-slider.horizontal-slider .swiper-slide { justify-content: center; align-items: center; } .directional-slider.horizontal-slider .swiper-slide img { width: calc(100% - 2.5rem); margin: auto; } .directional-slider .placeholders { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; } .directional-slider .placeholders img { position: absolute; border-radius: 1rem; height: 100%; -o-object-fit: cover; object-fit: cover; } .directional-slider.vertical-slider .placeholders .img-1 { width: 88%; z-index: 0; top: 2.5%; left: 6%; right: 6%; opacity: 0.6; } .directional-slider.vertical-slider .placeholders .img-2 { width: 76%; z-index: -1; top: 5%; left: 12%; right: 12%; opacity: 0.4; } .directional-slider.horizontal-slider .placeholders img { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .directional-slider.horizontal-slider .placeholders .img-1 { width: calc(100% - 1.25rem); height: 85%; z-index: 0; opacity: 0.6; } .directional-slider.horizontal-slider .placeholders .img-2 { width: var(--width-100); height: 70%; z-index: -1; opacity: 0.4; } .directional-slider .controllers { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem 1rem; position: absolute; bottom: 0; z-index: 2; } .directional-slider .controllers .buttons { display: flex; justify-items: center; gap: 0.8rem; } .directional-slider .controllers .buttons button { background-color: var(--white-0); padding: 0.2rem 0.4rem; border-radius: 10rem; } .directional-slider .controllers .pagination { display: flex !important; flex-direction: row-reverse !important; align-items: center; width: -moz-fit-content; width: fit-content; background-color: var(--white-0); height: 28px; border-radius: 12px; padding: 0 11px 0 11px; } .directional-slider .controllers .pagination .swiper-pagination-bullet { background-color: var(--black-50); transition: width 300ms; } .directional-slider .controllers .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.5rem; border-radius: 100rem; background-color: var(--red-1); } .directional-slider.vertical-slider .controllers { right: 0; left: 0; } .directional-slider.horizontal-slider .controllers { right: 2rem; left: 2rem; } .frame-slider { position: relative !important; z-index: 0; height: 350px; margin-bottom: 2rem; } .frame-slider .swiper-wrapper { height: 100%; } .frame-slider .swiper-slide img { border-radius: 1rem; width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .frame-slider .next-btn, .frame-slider .prev-btn { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); height: 7rem; width: 2rem; align-items: center; } .frame-slider .next-btn { left: -1px; justify-content: flex-end; background: url("../../public/images/left-eclipse.png") left/contain no-repeat; } .frame-slider .prev-btn { right: -1px; justify-content: flex-start; background: url("../../public/images/right-eclipse.png") right/contain no-repeat; } .frame-slider .pagination-container { width: -moz-fit-content; width: fit-content; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); z-index: 2; background-color: var(--white-0); padding: 0.1rem 1rem; } .frame-slider .pagination-container .hill-left, .frame-slider .pagination-container .hill-right { position: absolute; z-index: -1; top: 0; bottom: 0; height: 100%; -o-object-fit: fill; object-fit: fill; } .frame-slider .pagination-container .swiper-pagination-bullet-active { width: 1.5rem; border-radius: 100rem; background-color: var(--red-1); } .frame-slider .hill-left { right: 0; transform: translateX(50%); } .frame-slider .hill-right { left: 0; transform: translateX(-50%); } .bottom-bar-slider { position: relative !important; z-index: 0; height: 350px; margin-bottom: 2rem; } .bottom-bar-slider .swiper-wrapper { height: 100%; } .bottom-bar-slider .swiper-slide img { border-radius: 1rem; height: 100%; width: var(--width-100); -o-object-fit: cover; object-fit: cover; } .bottom-bar-slider .bottom-bar { display: flex; align-items: center; justify-content: space-between; position: absolute; z-index: 2; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; background: var(--black-201); padding: 0.3rem; border-radius: 999rem; } .bottom-bar-slider .bottom-bar .thumbs { display: flex; gap: 0.3rem; } .bottom-bar-slider .bottom-bar .thumbs img { display: block; height: 2rem; aspect-ratio: 1; border-radius: 50%; } .bottom-bar-slider .bottom-bar .thumbs img.active { border: solid 2px var(--red-1); } .bottom-bar-slider .bottom-bar .pagination-container { width: -moz-fit-content; width: fit-content; display: flex; align-items: center; gap: 0.6rem; } .bottom-bar-slider .bottom-bar .pagination-container .pagination { display: flex; align-items: center !important; gap: 0.4rem; } .bottom-bar-slider .bottom-bar .pagination-container .pagination .swiper-pagination-bullet { border-radius: 100rem; background-color: var(--gray-211); transition: height 300ms; height: 1rem; width: 0.2rem; margin: 0; } .bottom-bar-slider .bottom-bar .pagination-container .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { height: 1.5rem; background-color: var(--red-1); } .bottom-bar-slider .bottom-bar .pagination-container .prev-btn, .bottom-bar-slider .bottom-bar .pagination-container .next-btn { background-color: var(--red-1); aspect-ratio: 1; border-radius: 22rem; padding: 0.4rem; } .bottom-bar-slider .bottom-bar .pagination-container .prev-btn img, .bottom-bar-slider .bottom-bar .pagination-container .next-btn img { width: 1.3rem; height: 1.3rem; } .gradient-slider { position: relative; z-index: 0; border-radius: 1rem; padding-bottom: 1rem; background: linear-gradient(to bottom right, var(--purple-4), var(--purple-5)); overflow: hidden; } .gradient-slider .swiper-wrapper { padding: 2rem 0; } .gradient-slider .swiper-wrapper .swiper-slide .mobile-phone { display: flex; width: var(--width-100); justify-content: center; align-items: center; position: relative; z-index: 0; } .gradient-slider .swiper-wrapper .swiper-slide .mobile-phone .real-img { width: 80%; margin-bottom: 2rem; } .gradient-slider .swiper-wrapper .swiper-slide .mobile-phone .place { position: absolute; bottom: 0; left: 0; right: 50%; transform: translateX(50%); width: var(--width-90); max-height: 100%; z-index: -1; } .gradient-slider .title-container { width: -moz-fit-content; width: fit-content; position: relative; top: -1px; margin: 0 auto; background: var(--white-0); padding: 0.5rem 0.5rem; } .gradient-slider .title-container img { position: absolute; z-index: -1; top: 0; bottom: 0; height: 100%; } .gradient-slider .title-container img.right-hill { right: 0; transform: translateX(50%); } .gradient-slider .title-container img.left-hill { left: 0; transform: translateX(-50%); } .gradient-slider .title-container .title { text-align: center; width: -moz-fit-content; width: fit-content; font-size: 0.8rem; } @media screen and (min-width: 560px) { .gradient-slider .title-container .title { font-size: 1rem; } } @media screen and (min-width: 800px) { .gradient-slider .title-container .title { font-size: 1.25rem; } } .gradient-slider .bottom-bar { width: calc(100% - 2rem); margin: 0 1rem; padding: 0.4rem; border-radius: 0.6rem; background: var(--white-0); display: flex; align-items: center; justify-content: center; position: relative; margin-top: 31.2px; } .gradient-slider .bottom-bar .top-title { position: absolute; z-index: 1; bottom: calc(100% - 1px); padding: 0.2rem; background: var(--white-0); } .gradient-slider .bottom-bar .top-title p { text-align: center; background: var(--black-200); color: var(--white-0); border-radius: 22rem; padding: 0 1.4rem; font-size: 0.8rem; max-width: 20ch; text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden; } @media screen and (min-width: 550px) { .gradient-slider .bottom-bar .top-title p { max-width: 60ch; } } .gradient-slider .bottom-bar .top-title .hill { position: absolute; top: 0; height: 100%; z-index: -1; } .gradient-slider .bottom-bar .top-title .hill.hill-right { right: 0; transform: translateX(50%); } .gradient-slider .bottom-bar .top-title .hill.hill-left { left: 0; transform: translateX(-50%); } .gradient-slider .bottom-bar .bottom-bar__text { text-align: center; flex-grow: 1; } .gradient-slider .bottom-bar .prev-btn, .gradient-slider .bottom-bar .next-btn { display: flex; align-items: center; background: var(--red-1); border-radius: 0.6rem; padding: 0.5rem 0.75rem; color: var(--white-0); transition: max-width 250ms; } @media screen and (min-width: 800px) { .gradient-slider .bottom-bar .prev-btn, .gradient-slider .bottom-bar .next-btn { max-width: 48px; height: 48px; } .gradient-slider .bottom-bar .prev-btn:hover, .gradient-slider .bottom-bar .next-btn:hover { max-width: 130px; } .gradient-slider .bottom-bar .prev-btn:hover span, .gradient-slider .bottom-bar .next-btn:hover span { opacity: 1; visibility: visible; transition: opacity 250ms; } } .gradient-slider .bottom-bar .prev-btn span, .gradient-slider .bottom-bar .next-btn span { display: none; } @media screen and (min-width: 800px) { .gradient-slider .bottom-bar .prev-btn span, .gradient-slider .bottom-bar .next-btn span { display: flex; opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; } } .gradient-slider .bottom-bar .prev-btn { justify-content: flex-start; } .gradient-slider .bottom-bar .next-btn { justify-content: flex-end; } .offer_product__slider_container .offer_slider--1 { padding: 1.5rem 0 !important; } .offer_product__slider_container .offer_slider--1 .swiper-slide { display: block; width: var(--width-100); margin: 0; } .offer_product__slider_container .offer_slider--1 .swiper-slide.first_slide { border-radius: 24px; height: auto; background: linear-gradient(161deg, var(--red-1) 0%, rgba(230, 18, 61, 0.7) 100%), var(--white-0); padding: 1rem; color: var(--white-0); } .offer_product__slider_container .offer_slider--1 .swiper-slide.first_slide .image { padding-top: 2rem; width: var(--width-100); display: flex; align-items: center; justify-content: center; } .offer_product__slider_container .offer_slider--1 .swiper-slide.first_slide .image img { width: 200px; margin: 0 auto; } .offer_product__slider_container .offer_product__slider_buttons { display: flex; align-items: center; gap: 1rem; justify-content: flex-start; } .offer_product__slider_container .offer_product__slider_buttons button { height: 42px; width: 42px; color: var(--main-color); border: 2px solid var(--main-color); border-radius: 10000px; } .offer_product__slider_container .offer_product__slider_buttons button:first-child { width: auto; padding: 0 1rem; } .offer_product__slider_container .offer_slider--2 { padding: 1.5rem 0 !important; background-color: var(--main-color); border: 2px solid var(--main-color); border-radius: 1rem; } .offer_product__slider_container .offer_slider--2 .swiper-slide { display: block; width: var(--width-100); margin: 0; } .offer_product__slider_container .offer_slider--2 .swiper-slide.first_slide { border-radius: 24px; height: auto; padding: 1rem; color: var(--white-0); } .offer_product__slider_container .offer_slider--2 .swiper-slide.first_slide .image { padding-top: 2rem; width: var(--width-100); display: flex; align-items: center; justify-content: center; } .offer_product__slider_container .offer_slider--2 .swiper-slide.first_slide .image img { width: 200px; margin: 0 auto; } .offer_product__slider_container .offer_slider--2 .swiper-slide.first_slide .product_showmore__button { width: var(--width-100); margin-top: 0.75rem; border: 2px solid var(--white-0); padding: 0.5rem 1.2rem; color: var(--white-0); border-radius: 10000px; } .offer_product__slider_container .offer_slider--2 .swiper-slide .product_card { border-radius: 0; } .offer_product__slider_container .offer_slider--2 .swiper-slide:nth-child(2) .product_card { border-radius: 0 1rem 1rem 0; } .offer_product__slider_container .offer_slider--2 .swiper-slide:last-child .product_card { border-radius: 1rem 0 0 1rem; } .suggestion_container { position: relative; display: flex; flex-direction: column-reverse; gap: 1.5rem; padding: 1.5rem 0; } .suggestion_container .suggestion_now__container { position: relative; } .suggestion_container .suggestion_now__container .suggestion_card__main { width: var(--width-100); background: transparent; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item { width: var(--width-100); display: none; flex-direction: column; gap: 0.75rem; bottom: 0; background-color: var(--white-0); border-radius: 1rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); padding: 1rem 0.75rem; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .card_top { position: relative; z-index: -1; width: var(--width-100); padding: 8px 16px; border-radius: 0.5rem; background-color: var(--red-1); color: var(--white-0); text-align: center; font-size: 18px; font-weight: 600; @supports ( (--a: 0)) { font-family: var(--font-doran-regular); } @supports ( not (--a: 0)) { font-family: "Doran", sans-serif; } } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .card_top > * { z-index: 1; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .card_top::after { content: " "; position: absolute; inset: 0; z-index: 0; width: var(--width-100); height: 100%; background-image: url("../../public/images/awesomeslider-back-overlay.png"); background-size: cover; background-position: center center; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_cover { position: relative; display: flex; align-items: center; justify-content: center; height: 250px; overflow: hidden; border-radius: 1rem; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_cover .progress_circle { position: absolute; left: 0.75rem; top: 0.75rem; display: flex; align-items: center; justify-content: center; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_cover .progress_circle svg { color: var(--red-1); } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_cover .progress_circle svg.circle_progress__timer { transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s ease; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_cover .progress_circle p { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; padding: 2px 0 0 2px; text-align: center; vertical-align: middle; color: var(--black-0); font-weight: 500; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item.show { display: flex; animation: fadeIn 0.5s ease-in forwards; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_body { display: flex; flex-direction: column; gap: 0.5rem; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_body .product_title { text-align: center; color: var(--gray-200); } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_body .product_bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_body .product_bottom .product_offer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_body .product_bottom .product_offer p { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_body .product_bottom .price { font-weight: 500; color: var(--green-6); font-size: 0.85rem; } @media (min-width: 420px) { .suggestion_container .suggestion_now__container .suggestion_card__main .suggestion_card__item .product_body .product_bottom { flex-direction: row; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .suggestion_container .suggestion_now__container, .suggestion_container .suggestion_slider__container { width: var(--width-100); position: relative; } .suggestion_container.type_one .suggestion_now__container .suggestion_card__under { width: var(--width-90); height: 470px; margin: 0 auto; position: relative; z-index: -1; background-color: var(--red-1); color: var(--white-0); font-weight: 600; text-align: center; padding-top: 1.2rem; border-radius: 1rem; font-size: 1.2rem; @supports ( (--a: 0)) { font-family: var(--font-doran-regular); } @supports ( not (--a: 0)) { font-family: "Doran", sans-serif; } } .suggestion_container.type_one .suggestion_now__container .suggestion_card__under > * { z-index: 1; } .suggestion_container.type_one .suggestion_now__container .suggestion_card__under::after { content: " "; position: absolute; inset: 0; z-index: 0; width: var(--width-100); height: 100%; background-image: url("../../public/images/awesomeslider-back-overlay.png"); background-size: cover; background-position: center center; } .suggestion_container.type_one .suggestion_now__container .suggestion_card__main { position: absolute; top: 4rem; left: 50%; transform: translateX(-50%); } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__button { display: flex; align-items: center; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__button .icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--white-0); border-radius: 0.5rem; border: 1px solid var(--red-1); color: var(--red-1); } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__button .icon svg { width: 24px; height: 24px; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__button .icon i { font-size: 22px; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__button p { color: var(--black-0); font-weight: 500; } .suggestion_container.type_one .suggestion_slider__container .suggestion_under { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: var(--width-90); max-width: 340px; min-height: 500px; background-color: var(--red-1); padding: 1.5rem 0.6rem; border-radius: 1rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_under p { color: var(--white-0); font-weight: 600; text-align: left; font-size: 1.2rem; z-index: 10; writing-mode: vertical-rl; text-orientation: mixed; @supports ( (--a: 0)) { font-family: var(--font-doran-regular); } @supports ( not (--a: 0)) { font-family: "Doran", sans-serif; } } .suggestion_container.type_one .suggestion_slider__container .suggestion_under .suggestion_slider__buttons--mobile { display: flex; flex-direction: column; position: relative; z-index: 10; gap: 1rem; align-items: center; } .suggestion_container.type_one .suggestion_slider__container .suggestion_under .suggestion_slider__buttons--mobile .suggestion_slider__button .icon { width: 37px; height: 37px; border-radius: 0.5rem; border-color: var(--white-0); } .suggestion_container.type_one .suggestion_slider__container .suggestion_under::after { content: " "; position: absolute; inset: 0; z-index: 1; width: var(--width-100); height: 100%; background-image: url("../../public/images/awesomeslider-back-overlay.png"); background-size: cover; background-position: center center; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main { width: calc(100% - 3.5rem); position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: var(--white-0); border-radius: 1rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top { background-color: var(--white-0); position: relative; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); border-bottom: 1px solid var(--black-10); padding: 24px 20px; border-radius: 1rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .awesome_end { display: none; justify-content: center; align-items: center; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 1rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .awesome_end img { width: 200px; height: 200px; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__info { display: none; flex-direction: column; gap: 1rem; align-self: flex-start; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__info .product_title { font-size: 1.2rem; font-weight: 500; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__info .product_title__sub { font-size: 1rem; font-weight: 500; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__info .product_properties { display: flex; flex-direction: column; gap: 0.4rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__info .product_properties li { display: flex; font-size: 0.8rem; color: var(--gray-200); position: relative; padding-right: 20px; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__info .product_properties li::before { content: " "; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--gray-208); border-radius: 50%; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__cover { width: var(--width-100); height: 250px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 1rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end { display: none; flex-direction: column; gap: 1.5rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main { position: relative; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container { position: relative; overflow: hidden; background-color: var(--black-10); border-radius: 1rem; --after-width: 0%; --before-width: 0%; --after-height: 0%; --before-height: 0%; --before-visible: "hidden"; --after-visible: "hidden"; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer { border-radius: 0.5rem; margin: 0.5rem; padding: 0 0.5rem; position: relative; background-color: var(--white-0); z-index: 7; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item { padding: 0.6rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--black-10); font-size: 0.8rem; color: var(--gray-200); } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item:last-child { border-bottom-width: 0; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .timer { display: flex; align-items: center; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .timer p { margin: 0; font-size: 0.8rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .timer p:first-child { color: var(--red-1); } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .timer:nth-child(2n) { font-size: 1.2rem; font-weight: 500; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .product_offer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .product_offer p { color: var(--gray-211); font-size: 13px; font-weight: 400; text-decoration: line-through; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .price { color: var(--green-6); text-align: center; font-size: 13px; font-weight: 500; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container::after { position: absolute; content: ""; width: var(--after-width); height: var(--after-height); visibility: var(--after-visible); z-index: 5; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container::before { position: absolute; content: ""; width: var(--before-width); height: var(--before-height); visibility: var(--before-visible); z-index: 5; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container::after { bottom: 0; right: 0; border-left: 12px solid var(--red-1); border-bottom: 12px solid var(--red-1); transition: width 0.1s ease 0.1s, height 0.1s ease, visibility 0s 0.2s; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .suggestion_product_timer__container::before { top: 0; left: 0; border-top: 12px solid var(--red-1); border-right: 12px solid var(--red-1); transition: width 0.1s ease 0.3s, height 0.1s ease 0.2s, visibility 0s 0.4s; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end .suggestion_product_timer__main .circle_timer { --x-position: 0; --y-position: 0; position: absolute; left: var(--x-position, 0); top: var(--y-position, 0); background-color: var(--red-1); filter: drop-shadow(0px 0px 10px rgba(230, 18, 61, 0.4)); -webkit-filter: drop-shadow(0px 0px 10px rgba(230, 18, 61, 0.4)); border-radius: 50%; width: 16px; height: 16px; z-index: 8; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile { display: flex; flex-direction: column; gap: 1rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_title--mobile { display: block; text-align: center; color: var(--black-0); font-weight: 500; font-size: 1rem; padding-top: 1rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_timer__container { display: flex; align-items: center; justify-content: space-between; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_timer__container .title { color: var(--red-1); font-weight: 500; font-size: 0.8rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_timer__container .timer { display: flex; align-items: center; gap: 0.2rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_timer__container .timer p { margin: 0; font-size: 0.8rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_timer__container .timer p:first-child { color: var(--red-1); } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_timer__container .timer:nth-child(2n) { font-size: 1.2rem; font-weight: 500; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_timer__container .timer .timer_item { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: var(--gray-204); border-radius: 0.5rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_price__container { display: flex; align-items: center; justify-content: space-between; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_price__container .product_offer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_price__container .product_offer p { color: var(--gray-211); font-size: 13px; font-weight: 400; text-decoration: line-through; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile .suggestion_price__container .price { color: var(--green-6); text-align: center; font-size: 13px; font-weight: 500; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top.has_end .awesome_end { display: flex; z-index: 10; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom { width: var(--width-100); display: none; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 16px 20px; position: relative; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom::before { content: "\f062"; position: absolute; top: -8px; left: 50%; z-index: 10; transform: translateX(-50%); font-family: "Font Awesome 6 Pro"; font-weight: 400; color: var(--white-0); width: 35px; height: 25px; text-align: center; padding-top: 4px; border-radius: 120rem 120rem 0 0; background-color: var(--red-1); font-size: 0.85rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom .suggestion_slider__button:disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom .suggestion_slider__button .icon { font-size: 1.2rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom .suggestion_product__main--thumb-h { height: 70px; width: var(--width-100); overflow: hidden; position: relative; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom .suggestion_product__main--thumb-h .swiper-slide { display: flex; align-items: center; justify-content: center; width: var(--width-100); height: 100%; border-radius: 0.5rem; overflow: hidden; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom .suggestion_product__main--thumb-h .swiper-slide img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom .suggestion_product__main--thumb-h::before { content: " "; position: absolute; left: 0; top: 0; bottom: 0; width: 40%; z-index: 5; background: linear-gradient(90deg, var(--white-0) 0%, rgba(255, 255, 255, 0) 100%); } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom .suggestion_product__main--thumb-h::after { content: " "; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; z-index: 5; background: linear-gradient(-90deg, var(--white-0) 0%, rgba(255, 255, 255, 0) 100%); } .suggestion_container.type_one .suggestion_slider__thumb .swiper-slide { position: relative; width: var(--width-100); height: 100%; overflow: hidden; } .suggestion_container.type_one .suggestion_slider__thumb .swiper-slide.swiper-slide-active { border: 1px solid var(--gray-211); } .suggestion_container.type_two .suggestion_slider__container { position: relative; display: flex; justify-content: flex-end; } .suggestion_container.type_two .suggestion_slider__container .suggestion_under { position: relative; z-index: -1; display: none; width: 95%; max-width: 350px; min-height: 100%; background-color: var(--red-1); border-radius: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_under > * { z-index: 1; } .suggestion_container.type_two .suggestion_slider__container .suggestion_under::after { content: " "; position: absolute; inset: 0; z-index: 0; width: var(--width-100); height: 100%; background-image: url("../../public/images/awesomeslider-back-overlay.png"); background-size: cover; background-position: center center; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start { display: flex; gap: 1rem; background-color: var(--white-0); border-radius: 1rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); width: var(--width-100); padding: 1rem; position: relative; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .suggestion_title { width: 55px; background-color: var(--red-1); color: var(--white-0); font-weight: 600; font-size: 1.2rem; border-radius: 0.5rem; padding: 0.75rem 0.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .suggestion_title p { color: var(--white-0); font-weight: 600; text-align: left; font-size: 1.2rem; writing-mode: vertical-rl; text-orientation: mixed; @supports ( (--a: 0)) { font-family: var(--font-doran-regular); } @supports ( not (--a: 0)) { font-family: "Doran", sans-serif; } } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .suggestion_title .suggestion_slider__buttons--mobile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .suggestion_title .suggestion_slider__buttons--mobile .suggestion_slider__button .icon { width: 37px; height: 37px; border-radius: 0.5rem; background-color: var(--white-0); color: var(--red-1); display: flex; align-items: center; justify-content: center; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 { position: relative; overflow: hidden; width: var(--width-100); } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content { width: calc(100% - 55px); background-color: var(--white-0); display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content.has_end .awesome_end { display: flex; z-index: 10; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .awesome_end { display: none; justify-content: center; align-items: center; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .awesome_end img { width: 200px; height: 200px; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer { width: var(--width-100); height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 0 0.5rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main { display: none; position: relative; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container { position: relative; overflow: hidden; background-color: var(--black-10); border-radius: 1rem; --after-width: 0%; --before-width: 0%; --after-height: 0%; --before-height: 0%; --before-visible: "hidden"; --after-visible: "hidden"; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer { border-radius: 0.5rem; margin: 0.5rem; position: relative; background-color: var(--white-0); z-index: 7; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item { padding: 0.6rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--black-10); font-size: 0.8rem; color: var(--gray-200); } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item:last-child { border-bottom-width: 0; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .timer { display: flex; align-items: center; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .timer p { margin: 0; font-size: 0.8rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .timer p:first-child { color: var(--red-1); } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .timer:nth-child(2n) { font-size: 1.2rem; font-weight: 500; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .product_offer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .product_offer p { color: var(--gray-211); font-size: 13px; font-weight: 400; text-decoration: line-through; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container .suggestion_product_timer .item .price { color: var(--green-6); text-align: center; font-size: 13px; font-weight: 500; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container::after { position: absolute; content: ""; width: var(--after-width); height: var(--after-height); visibility: var(--after-visible); z-index: 5; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container::before { position: absolute; content: ""; width: var(--before-width); height: var(--before-height); visibility: var(--before-visible); z-index: 5; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container::after { bottom: 0; right: 0; border-left: 12px solid var(--red-1); border-bottom: 12px solid var(--red-1); transition: width 0.1s ease 0.1s, height 0.1s ease, visibility 0s 0.2s; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .suggestion_product_timer__container::before { top: 0; left: 0; border-top: 12px solid var(--red-1); border-right: 12px solid var(--red-1); transition: width 0.1s ease 0.3s, height 0.1s ease 0.2s, visibility 0s 0.4s; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main .circle_timer { --x-position: 0; --y-position: 0; position: absolute; left: var(--x-position, 0); top: var(--y-position, 0); background-color: var(--red-1); filter: drop-shadow(0px 0px 10px rgba(230, 18, 61, 0.4)); -webkit-filter: drop-shadow(0px 0px 10px rgba(230, 18, 61, 0.4)); border-radius: 50%; width: 16px; height: 16px; z-index: 8; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product__cover { width: var(--width-100); height: 250px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_title--mobile { display: block; text-align: center; color: var(--black-0); font-weight: 500; font-size: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_timer__container { display: flex; align-items: center; justify-content: space-between; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_timer__container .title { color: var(--red-1); font-weight: 500; font-size: 0.8rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_timer__container .timer { display: flex; align-items: center; gap: 0.2rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_timer__container .timer p { margin: 0; font-size: 0.8rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_timer__container .timer p:first-child { color: var(--red-1); } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_timer__container .timer:nth-child(2n) { font-size: 1.2rem; font-weight: 500; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_timer__container .timer .timer_item { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: var(--gray-204); border-radius: 0.5rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_price__container { display: flex; align-items: center; justify-content: space-between; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_price__container .product_offer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_price__container .product_offer p { color: var(--gray-211); font-size: 13px; font-weight: 400; text-decoration: line-through; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_price__container .price { color: var(--green-6); text-align: center; font-size: 13px; font-weight: 500; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info { width: 50%; height: 100%; display: none; flex-direction: column; justify-content: space-between; gap: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_container { display: flex; flex-direction: column; gap: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_container .product_title { font-size: 1.2rem; font-weight: 500; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_container .product_title__sub { font-size: 1rem; font-weight: 500; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_container .product_properties { display: flex; flex-direction: column; gap: 0.4rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_container .product_properties li { display: flex; font-size: 0.8rem; color: var(--gray-200); position: relative; padding-right: 20px; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_container .product_properties li::before { content: " "; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--gray-208); border-radius: 50%; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_bottom { width: var(--width-100); display: flex; flex-direction: column; gap: 0.5rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_bottom .info_price { width: var(--width-100); display: flex; justify-content: space-between; align-items: center; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_bottom .info_price .title { color: var(--gray-200); font-size: 0.8rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_bottom .info_price .product_price { display: flex; flex-direction: column; gap: 0.45rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_bottom .info_price .product_price .product_offer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_bottom .info_price .product_price .product_offer .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info .info_bottom .info_price .product_price .product_price__text { font-weight: 500; color: var(--green-6); font-size: 0.9rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main { width: var(--width-100); position: relative; display: flex; align-items: center; gap: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end { width: 30%; display: none; flex-direction: column; justify-content: space-between; align-items: center; gap: 1rem; background-color: var(--white-0); border-radius: 1rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); padding: 1rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__button { background-color: var(--gray-204); width: var(--width-100); text-align: center; border-radius: 0.5rem; padding: 0.75rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb { width: var(--width-100); height: 100%; display: flex; justify-content: space-between; flex-direction: column; gap: 0.75rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_slider__button { background-color: var(--gray-204); width: var(--width-100); text-align: center; border-radius: 0.5rem; padding: 0.5rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v { width: var(--width-100); height: 100%; position: relative; overflow: hidden; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: var(--width-100); max-height: 60px; border-radius: 0.5rem; padding: 0.5rem; position: relative; cursor: pointer; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide .slide_image { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 0.5rem; position: relative; overflow: hidden; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide .slide_image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide .slide_text { width: calc(100% - 60px - 0.75rem); text-align: right; color: var(--black-0); font-size: 0.85rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide::before { content: " "; width: 4px; height: 6px; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); background-color: transparent; border-radius: 0 10px 10px 0; transition: background 250ms ease-in; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide.swiper-slide-active .slide_image { outline: 1px solid var(--white-0); border: 1px solid var(--red-1); } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide.swiper-slide-active .slide_text { color: var(--red-1); } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide.swiper-slide-active::before { background-color: var(--red-1); } .suggestion_container.type_three .suggestion_now__container .suggestion_card__under { position: relative; z-index: -1; width: calc(100% - 2px); height: 200px; margin: 0 auto; background-color: var(--red-1); color: var(--white-0); font-weight: 600; text-align: center; padding-top: 1.2rem; border-radius: 1rem; font-size: 1.2rem; @supports ( (--a: 0)) { font-family: var(--font-doran-regular); } @supports ( not (--a: 0)) { font-family: "Doran", sans-serif; } } .suggestion_container.type_three .suggestion_now__container .suggestion_card__under > * { z-index: 1; } .suggestion_container.type_three .suggestion_now__container .suggestion_card__under::after { content: " "; position: absolute; inset: 0; z-index: 0; width: var(--width-100); height: 100%; background-image: url("../../public/images/awesomeslider-back-overlay.png"); background-size: cover; background-position: center center; } .suggestion_container.type_three .suggestion_now__container .suggestion_card__main { position: absolute; top: 4rem; left: 50%; transform: translateX(-50%); } .suggestion_container.type_three .suggestion_slider__container { position: relative; display: flex; flex-direction: column; padding-bottom: 5rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__under { position: relative; z-index: 0; width: var(--width-100); height: 450px; padding: 1rem; background-color: var(--red-1); border-radius: 1rem; text-align: center; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__under p { z-index: 10; color: var(--white-0); font-weight: 600; text-align: left; font-size: 0.9rem; padding: 0.5rem; @supports ( (--a: 0)) { font-family: var(--font-doran-regular); } @supports ( not (--a: 0)) { font-family: "Doran", sans-serif; } } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__under .suggestion_slider__buttons--mobile { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 1rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__under .suggestion_slider__buttons--mobile .suggestion_slider__button .icon { width: 37px; height: 37px; border-radius: 0.5rem; background-color: var(--white-0); color: var(--red-1); display: flex; align-items: center; justify-content: center; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__under::after { content: " "; position: absolute; inset: 0; z-index: 1; width: var(--width-100); height: 100%; background-image: url("../../public/images/awesomeslider-back-overlay.png"); background-size: cover; background-position: center center; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main { width: var(--width-100); display: flex; gap: 0.75rem; position: absolute; left: 0; top: 4rem; margin-bottom: 7rem; background-color: var(--white-0); border-radius: 1rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); overflow-y: hidden; padding: 1rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 { width: var(--width-100); position: relative; overflow: hidden; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start { display: flex; flex-direction: column; width: var(--width-100); gap: 0.75rem; position: relative; background-color: var(--white-0); } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start.has_end .awesome_end { display: flex; width: var(--width-100); } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .awesome_end { display: none; justify-content: center; align-items: center; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 1rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .awesome_end img { width: 200px; height: 200px; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__cover { width: var(--width-100); height: 250px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 1rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__info { width: var(--width-100); display: none; flex-direction: column; gap: 1rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__info .product_title { font-size: 1.2rem; font-weight: 500; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__info .product_title__sub { font-size: 1rem; font-weight: 500; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__info .product_properties { display: flex; flex-direction: column; gap: 0.4rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__info .product_properties li { display: flex; font-size: 0.8rem; color: var(--gray-200); position: relative; padding-right: 20px; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__info .product_properties li::before { content: " "; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--gray-208); border-radius: 50%; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container { width: var(--width-100); display: none; flex-direction: column; gap: 1rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details { background-color: var(--gray-204); border-radius: 1rem; padding: 0.75rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item { border-bottom: 1px solid var(--gray-202); padding: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item:last-child { border-bottom-width: 0; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item .timer { display: flex; align-items: center; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item .timer p { margin: 0; font-size: 0.8rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item .timer p:first-child { color: var(--red-1); } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item .timer:nth-child(2n) { font-size: 1.2rem; font-weight: 600; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item .product_offer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item .product_offer p { color: var(--gray-211); font-size: 13px; font-weight: 400; text-decoration: line-through; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container .product_details .item .price { color: var(--green-6); text-align: center; font-size: 13px; font-weight: 500; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile { display: flex; flex-direction: column; gap: 1rem; width: var(--width-100); } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_title--mobile { display: block; text-align: center; color: var(--black-0); font-weight: 500; font-size: 1rem; padding-top: 1rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_timer__container { display: flex; align-items: center; justify-content: space-between; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_timer__container .title { color: var(--red-1); font-weight: 500; font-size: 0.8rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_timer__container .timer { display: flex; align-items: center; gap: 0.2rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_timer__container .timer p { margin: 0; font-size: 0.8rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_timer__container .timer p:first-child { color: var(--red-1); } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_timer__container .timer:nth-child(2n) { font-size: 1.2rem; font-weight: 500; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_timer__container .timer .timer_item { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: var(--gray-204); border-radius: 0.5rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_price__container { display: flex; align-items: center; justify-content: space-between; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_price__container .product_offer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_price__container .product_offer p { color: var(--gray-211); font-size: 13px; font-weight: 400; text-decoration: line-through; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile .suggestion_price__container .price { color: var(--green-6); text-align: center; font-size: 13px; font-weight: 500; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end { width: 70px; display: none; gap: 0.75rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb { width: 90px; height: 100%; display: flex; justify-content: space-between; flex-direction: column; gap: 0.75rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_slider__button { background-color: var(--gray-204); width: var(--width-100); text-align: center; border-radius: 0.5rem; padding: 0.5rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v { width: var(--width-100); height: 100%; padding: 0 0.5rem; position: relative; overflow: hidden; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide { display: flex; align-items: center; justify-content: center; position: relative; width: var(--width-100); max-height: 60px; border-radius: 0.5rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide::before { content: " "; width: 4px; height: 6px; position: absolute; top: 50%; right: -4px; transform: translateY(-50%); background-color: transparent; border-radius: 0 10px 10px 0; transition: background 250ms ease-in; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide.swiper-slide-active { outline: 1px solid var(--white-0); border: 1px solid var(--red-1); } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end .suggestion_slider__thumb .suggestion_product__main--thumb-v .swiper-slide.swiper-slide-active::before { background-color: var(--red-1); } @media (min-width: 1024px) { .suggestion_container { flex-direction: row; } .suggestion_container .suggestion_now__container { width: 25%; } .suggestion_container .suggestion_slider__container { width: 75%; } .suggestion_container.type_one .suggestion_now__container .suggestion_card__under { height: 470px; } .suggestion_container.type_one .suggestion_slider__container .suggestion_under { justify-content: center; min-height: 470px; } .suggestion_container.type_one .suggestion_slider__container .suggestion_under p { text-align: center; font-size: 1.2rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_under .suggestion_slider__buttons--mobile { display: none; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__info, .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_product__end { display: flex; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__top .suggestion_slider__bottom--mobile { display: none; } .suggestion_container.type_one .suggestion_slider__container .suggestion_slider__main .suggestion_slider__bottom { display: flex; } .suggestion_container.type_two .suggestion_slider__container .suggestion_under { display: block; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main { align-items: stretch; width: calc(100% - 1.5rem); position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start { width: 70%; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .suggestion_title { justify-content: center; padding: 1.5rem 0; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .suggestion_title p { text-align: center; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .suggestion_title .suggestion_slider__buttons--mobile { display: none; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content { display: flex; gap: 0.5rem; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer { width: 50%; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_product_timer__main { display: block; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_title--mobile, .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_timer__container, .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_slider__with__timer .suggestion_price__container { display: none; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__start .awesome_main_slider_2 .suggestion_slider__start--content .suggestion_product__info { width: 50%; display: flex; } .suggestion_container.type_two .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end { width: 30%; display: flex; } .suggestion_container.type_three .suggestion_slider__container { position: relative; display: flex; flex-direction: column; padding-bottom: 0; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__under { height: 400px; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__under p { font-size: 1.2rem; padding-top: 0; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__under .suggestion_slider__buttons--mobile { display: none; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main { top: 4rem; margin-bottom: 4rem; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 { width: calc(100% - 60px); } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start { flex-direction: row; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__cover { width: 30%; height: 100%; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_product__info { width: 35%; display: flex; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .product_details__container { width: 35%; display: flex; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .awesome_main_slider_3 .suggestion_slider__start .suggestion_slider__bottom--mobile { display: none; } .suggestion_container.type_three .suggestion_slider__container .suggestion_slider__container--main .suggestion_slider__end { display: flex; } } .searchbox_container--mode_1 { display: flex; align-items: center; gap: 1rem; width: 881px; } .searchbox_container--mode_1 .searchbox_fields__container { width: 881px; display: flex; background-color: var(--white-0); border-radius: 0.5rem; border: 1px solid var(--black-10); } .searchbox_container--mode_1 .searchbox_fields__container .input { position: relative; width: 60%; border-left: 1px solid var(--black-10); } .searchbox_container--mode_1 .searchbox_fields__container .input input { width: var(--width-100); border: none; outline: none; padding: 0.75rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container { position: absolute; top: 50px; right: 0; left: 0; z-index: 9; height: 300px; padding-bottom: 1rem; background-color: var(--white-0); border: 1px solid var(--black-10); border-top: none; border-radius: 0 0 0.5rem 0.5rem; opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; overflow-y: auto; scrollbar-width: auto; scrollbar-color: var(--gray-204) var(--white-0); } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container::-webkit-scrollbar { width: 12px; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container::-webkit-scrollbar-track { background: var(--white-0); } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container::-webkit-scrollbar-thumb { background-color: var(--gray-204); border-radius: 10px; border: 3px solid var(--white-0); } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container.show { opacity: 1; visibility: visible; transition: opacity 250ms; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__header { padding: 0.75rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__header > .head { background-color: var(--gray-204); border-radius: 0.5rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__header > .head i { font-size: 20px; color: var(--main-color); } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__header > .head p { font-size: 0.9rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__header > .head_right { background-color: var(--gray-204); border-radius: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__header > .head_right .head { display: flex; align-items: center; gap: 0.5rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__header > .head_right i { font-size: 20px; color: var(--main-color); } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__header > .head_right p { font-size: 0.9rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider { position: relative; padding: 0.5rem 1.5rem 0.5rem 0.5rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .btn_searchslider__prev, .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .btn_searchslider__next { position: absolute; z-index: 11; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; background-color: var(--white-0); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray-200); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); cursor: pointer; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .btn_searchslider__prev.swiper-button-disabled, .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .btn_searchslider__next.swiper-button-disabled { display: none; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .btn_searchslider__prev { right: 1rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .btn_searchslider__next { left: 1rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .latest_search__items { width: var(--width-100); } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .latest_search__items .latest_search__item { min-width: 80px; width: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 20px; border: 1px solid var(--black-10); cursor: pointer; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .latest_search__items .latest_search__item p { font-size: 0.85rem; } .searchbox_container--mode_1 .searchbox_fields__container .input .search_dropdown__container .latest_search__slider .latest_search__items .latest_search__item i { font-size: 18px; } .searchbox_container--mode_1 .searchbox_fields__container .dropdown_select { width: 40%; border: none; } .searchbox_container--mode_1 .searchbox_submit { position: relative; z-index: 2; width: 50px; height: 50px; border-radius: 0.5rem; background-color: var(--main-color); color: var(--white-0); display: flex; align-items: center; justify-content: center; } .searchbox_container--mode_1 .searchbox_submit i { font-size: 22px; } .searchbox_container--mode_1.absolute_menu { width: auto; position: relative; z-index: 1; gap: 0; } .searchbox_container--mode_1.absolute_menu .searchbox_fields__container { width: 881px; position: absolute; z-index: 0; top: 0; bottom: 0; left: 60px; opacity: 0; visibility: hidden; transform: translateX(-60px); transition: opacity 250ms, transform 250ms, visibility 0s 250ms; } .searchbox_container--mode_1.absolute_menu:hover .searchbox_fields__container { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 250ms, transform 250ms; } .searchbox_container--mode_2 .searchbox_fields__container { display: flex; width: 881px; background-color: var(--white-0); border-radius: 0.5rem; border: 1px solid var(--black-10); } .searchbox_container--mode_2 .searchbox_fields__container .input { position: relative; display: flex; width: 60%; border-left: 1px solid var(--black-10); padding: 0.2rem; } .searchbox_container--mode_2 .searchbox_fields__container .input .searchbox_submit { width: 45px; height: 45px; border-radius: 0.5rem; background-color: var(--main-color); color: var(--white-0); display: flex; align-items: center; justify-content: center; } .searchbox_container--mode_2 .searchbox_fields__container .input .searchbox_submit i { font-size: 22px; } .searchbox_container--mode_2 .searchbox_fields__container .input input { width: calc(100% - 45px); border: none; outline: none; padding: 0.75rem; } .searchbox_container--mode_2 .searchbox_fields__container .dropdown_select { display: flex; flex-direction: column; justify-content: center; width: 40%; border: none; } .searchbox_container--mode_3 .searchbox_fields__container { display: flex; width: 881px; background-color: var(--white-0); border-radius: 0.5rem; border: 1px solid var(--black-10); } .searchbox_container--mode_3 .searchbox_fields__container .input { position: relative; display: flex; width: 60%; border-left: 1px solid var(--black-10); padding: 0.2rem; } .searchbox_container--mode_3 .searchbox_fields__container .input input { width: calc(100% - 45px); border: none; outline: none; padding: 0.75rem; } .searchbox_container--mode_3 .searchbox_fields__container .dropdown_select { display: flex; flex-direction: column; justify-content: center; width: 40%; border: none; } .searchbox_container--mode_3 .searchbox_fields__container .searchbox_submit { width: 45px; height: 45px; border-radius: 0.5rem; color: var(--gray-200); display: flex; align-items: center; justify-content: center; } .searchbox_container--mode_3 .searchbox_fields__container .searchbox_submit i { font-size: 22px; } .searchbox_container--mode_4 .searchbox_fields__container { display: flex; align-items: center; gap: 0.5rem; width: 881px; background-color: var(--white-0); border-radius: 100px; border: 1px solid var(--black-10); padding: 0.3rem; } .searchbox_container--mode_4 .searchbox_fields__container .input { position: relative; display: flex; width: calc(60% - 48px - 1rem); padding: 0.2rem; border: 1px solid var(--black-10); border-radius: 100px; } .searchbox_container--mode_4 .searchbox_fields__container .input input { width: var(--width-100); border: none; outline: none; padding: 0.75rem; } .searchbox_container--mode_4 .searchbox_fields__container .dropdown_select { display: flex; flex-direction: column; justify-content: center; width: 40%; border: 1px solid var(--black-10); border-radius: 100px; } .searchbox_container--mode_4 .searchbox_fields__container .searchbox_submit { width: 48px; height: 48px; border-radius: 100px; background-color: var(--main-color); color: var(--white-0); display: flex; align-items: center; justify-content: center; } .searchbox_container--mode_4 .searchbox_fields__container .searchbox_submit i { font-size: 22px; } .search_noresult__container { display: flex; flex-direction: column; gap: 1rem; align-items: center; padding: 3rem 1rem; } .search_noresult__container img { max-width: 100px; } .search_noresult__container p { text-align: center; font-size: 0.9rem; color: var(--gray-200); } .search_product__card { min-width: 150px; width: auto !important; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 20px; border: 1px solid var(--black-10); cursor: pointer; } .search_product__card .product_cover { width: 50px; height: 50px; overflow: hidden; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; } .search_product__card .product_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .search_product__card .product_body { width: calc(100% - 0.5rem - 50px); display: flex; flex-direction: column; gap: 0.5rem; } .search_modal { position: fixed; inset: 0; width: var(--width-100); height: 100vh; z-index: -20; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.4); transition: opacity 350ms ease-in, z-index 0s 350ms, visibility 0s 350ms; } .search_modal.show { z-index: 20; opacity: 1; visibility: visible; transition: opacity 350ms ease-in; } .search_modal .modal__content { background-color: var(--white-0); width: var(--width-100); height: 100vh; padding: 0 0.75rem; } .search_modal .modal__content .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 70px; padding: 0.75rem 0; width: var(--width-100); border-bottom: 1px solid var(--black-10); } .search_modal .modal__content .modal__header .btn_close { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; font-size: 1.15rem; background-color: var(--red-1); border-radius: 50%; color: var(--white-0); cursor: pointer; } .search_modal .modal__content .modal__header .modal__title { display: flex; align-items: center; gap: 0.5rem; width: calc(100% - 0.5rem - 45px); font-size: 1rem; font-weight: 500; color: var(--black-201); } .search_modal .modal__content .modal__body { position: relative; width: var(--width-100); height: calc(100vh - 70px); overflow-y: auto; padding: 0.75rem 0; display: flex; flex-direction: column; overflow-x: hidden; } @media (min-width: 881px) { .search_modal { display: none; } } .search_form { padding: 0.5rem; } .search_form .input { position: relative; position: relative; color: var(--black-200); } .search_form .input input { width: var(--width-100); height: 48px; padding: 0.75rem 2.5rem 0.75rem 1rem; border-radius: 0.5rem; background: var(--gray-204); border: none; outline: none; } .search_form .input .icon { position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); font-size: 20px; } .latest_search__container { display: flex; flex-direction: column; } .latest_search__container .latest_search__header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; } .latest_search__container .latest_search__header i { width: 20px; font-size: 20px; color: var(--gray-200); } .latest_search__container .latest_search__header p { width: calc(100% - 20px - 0.5rem); color: var(--black-200); } .latest_search__container .latest_search__slider { position: relative; } .latest_search__container .latest_search__slider .latest_search__items { width: var(--width-100); display: flex; gap: 0.5rem; padding: 0 1rem 0 0.5rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .latest_search__container .latest_search__slider .latest_search__items::-webkit-scrollbar { display: none; /* Hide scrollbars */ } .latest_search__container .latest_search__slider .latest_search__items .latest_search__item { min-width: 80px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 20px; border: 1px solid var(--black-10); cursor: pointer; } .latest_search__container .latest_search__slider .latest_search__items .latest_search__item p { font-size: 0.85rem; } .latest_search__container .latest_search__slider .latest_search__items .latest_search__item i { font-size: 18px; } .search_banner__container { padding: 1rem; } .search_banner__container .search_banner { width: var(--width-100); height: 200px; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; overflow: hidden; } .search_banner__container .search_banner img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .listproduct_modal__body { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; width: var(--width-100); height: calc(100vh - 70px); background-color: var(--white-0); display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .listproduct_modal__body::-webkit-scrollbar { display: none; /* Hide scrollbars */ } .listproduct_modal__body.show { opacity: 1; visibility: visible; transition: opacity 250ms; } .listproduct_modal__body .head { display: flex; align-items: center; justify-content: space-between; background-color: var(--gray-204); padding: 0.75rem 1rem; border-radius: 0.5rem; } .listproduct_modal__body .head .head_right { display: flex; align-items: center; gap: 0.5rem; } .listproduct_modal__body .head .head_right i { color: var(--main-color); font-size: 20px; } .listproduct_modal__body .head .head_right p { font-size: 0.9rem; } .listproduct_modal__body .head .link { font-size: 0.9rem; color: var(--main-color); } .listproduct_modal__body .search_result { display: flex; flex-direction: column; gap: 0.5rem; } .listproduct_modal__body .search_result__item { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--black-10); border-radius: 0.5rem; padding: 0.75rem; } .listproduct_modal__body .search_result__item .product_cover { width: 90px; height: 90px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; } .listproduct_modal__body .search_result__item .product_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .listproduct_modal__body .search_result__item .product_body { display: flex; flex-direction: column; gap: 0.5rem; } .listproduct_modal__body .search_result__item .product_body .product_price { color: var(--green-3); } .modal__container { position: fixed; inset: 0; width: var(--width-100); height: 100vh; z-index: -20; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.4); transition: opacity 350ms ease-in, z-index 0s 350ms, visibility 0s 350ms; } .modal__container.show { z-index: 20; opacity: 1; visibility: visible; transition: opacity 350ms ease-in; } .modal__container.seller_modal { justify-content: flex-end; } .modal__container.seller_modal .modal__content { max-height: 480px; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .modal__container.seller_modal .modal__content .modal__body { height: calc(100% - 70px); } .modal__container.modal_share { justify-content: center; } .modal__container.modal_share .modal__content { max-height: 480px; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .modal__container.modal_share .modal__content .modal__body { height: calc(100% - 70px); } .modal__container .modal__content { background-color: var(--white-0); width: var(--width-100); height: 100vh; padding: 0 0.75rem; } .modal__container .modal__content .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 70px; padding: 0.75rem 0; width: var(--width-100); border-bottom: 1px solid var(--black-10); } .modal__container .modal__content .modal__header .btn_close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; font-size: 22rem; background-color: var(--red-1); border-radius: 50%; color: var(--white-0); cursor: pointer; } .modal__container .modal__content .modal__header .modal__title { display: flex; align-items: center; gap: 0.5rem; width: calc(100% - 0.5rem - 45px); font-size: 1rem; font-weight: 500; color: var(--black-201); } .modal__container .modal__content .modal__body { width: var(--width-100); height: calc(100vh - 70px); overflow-y: auto; padding: 0.75rem 0; scrollbar-width: auto; scrollbar-color: var(--gray-204) var(--white-0); } .modal__container .modal__content .modal__body::-webkit-scrollbar { width: 12px; } .modal__container .modal__content .modal__body::-webkit-scrollbar-track { background: var(--white-0); } .modal__container .modal__content .modal__body::-webkit-scrollbar-thumb { background-color: var(--gray-204); border-radius: 10px; border: 3px solid var(--white-0); } @media (min-width: 881px) { .modal__container { padding: 1rem 0; } .modal__container.seller_modal { justify-content: center; } .modal__container.seller_modal .modal__content { max-height: 480px; } } @media (min-width: 881px) and (max-height: 480px) { .modal__container.seller_modal .modal__content { max-height: 100vh; } } @media (min-width: 881px) { .modal__container.modal_share { justify-content: center; } .modal__container.modal_share .modal__content { max-height: 370px; } } @media (min-width: 881px) and (max-height: 370px) { .modal__container.modal_share .modal__content { max-height: 100vh; } } @media (min-width: 881px) { .modal__container.modal_chart { justify-content: center; } .modal__container.modal_chart .modal__content { max-height: 650px; } } @media (min-width: 881px) and (max-height: 650px) { .modal__container.modal_chart .modal__content { max-height: 100vh; } } @media (min-width: 881px) { .modal__container.modal_conditions { justify-content: center; } .modal__container.modal_conditions .modal__content { max-height: 500px; } } @media (min-width: 881px) and (max-height: 500px) { .modal__container.modal_conditions .modal__content { max-height: 100vh; } } @media (min-width: 881px) { .modal__container.modal_betterprice, .modal__container.modal_report { justify-content: center; } .modal__container.modal_betterprice .modal__content, .modal__container.modal_report .modal__content { max-height: 500px; } } @media (min-width: 881px) and (max-height: 500px) { .modal__container.modal_betterprice .modal__content, .modal__container.modal_report .modal__content { max-height: 100vh; } } @media (min-width: 881px) { .modal__container.modal_betterprice .details_with__product__modal .right_side, .modal__container.modal_report .details_with__product__modal .right_side { display: flex; flex-direction: column; position: sticky; position: -webkit-sticky; right: 0; top: 0; } .modal__container .modal__content { padding: 0.5rem 1rem; border-radius: 1rem; max-width: 756px; max-height: 400px; } } @media (min-width: 881px) and (max-height: 400px) { .modal__container .modal__content { max-height: 100vh; } } @media (min-width: 881px) { .modal__container .modal__content .modal__body { height: calc(100% - 70px); } } .modal__container--mobile { position: fixed; inset: 0; width: var(--width-100); height: 100vh; z-index: -20; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.4); transition: opacity 350ms ease-in, z-index 0s 350ms, visibility 0s 350ms; } .modal__container--mobile.show { z-index: 20; opacity: 1; visibility: visible; transition: opacity 350ms ease-in; } .modal__container--mobile .modal__content { width: var(--width-100); height: 100vh; padding: 0 0.75rem; background-color: var(--white-0); } .modal__container--mobile .modal__content .modal__header__container { padding: 1rem 0.5rem 0; height: 70px; } .modal__container--mobile .modal__content .modal__header__container .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; width: var(--width-100); border-radius: 1rem 1rem 0 0; border: 1px solid var(--black-10); background-color: var(--gray-204); } .modal__container--mobile .modal__content .modal__header__container .modal__header .btn_close { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; font-size: 1.15rem; background-color: var(--red-1); border-radius: 50%; color: var(--white-0); cursor: pointer; } .modal__container--mobile .modal__content .modal__header__container .modal__header .modal__title { display: flex; align-items: center; gap: 0.5rem; width: calc(100% - 0.5rem - 45px); font-size: 1rem; font-weight: 500; color: var(--black-201); } .modal__container--mobile .modal__content .modal__body { width: var(--width-100); height: calc(100vh - 70px); overflow-y: auto; padding: 0.75rem 0; scrollbar-width: auto; scrollbar-color: var(--gray-204) var(--white-0); } .modal__container--mobile .modal__content .modal__body::-webkit-scrollbar { width: 12px; } .modal__container--mobile .modal__content .modal__body::-webkit-scrollbar-track { background: var(--white-0); } .modal__container--mobile .modal__content .modal__body::-webkit-scrollbar-thumb { background-color: var(--gray-204); border-radius: 10px; border: 3px solid var(--white-0); } @media (min-width: 881px) { .modal__container--mobile { display: none; } } .btn_allsellers__open { display: flex; align-items: center; gap: 0.5rem; color: var(--blue-1); } .modal_allsellers .seller_title { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem; } .modal_allsellers .seller_title .seller_name { display: flex; align-items: center; gap: 0.75rem; } .modal_allsellers .seller_title .seller_name .icon { position: relative; display: flex; align-items: center; justify-content: center; } .modal_allsellers .seller_title .seller_name .icon > i { width: 22px; font-size: 22px; } .modal_allsellers .seller_title .seller_name .icon .icon_badge { display: none; position: absolute; bottom: -5px; left: -6px; background-color: var(--white-0); border-radius: 50%; font-size: 13px; color: var(--green-6); } .modal_allsellers .seller_title .seller_name .text_badge { display: none; background-color: rgba(204, 234, 211, 0.5); border-radius: 100px; padding: 0.3rem 1rem; color: var(--green-4); font-size: 0.85rem; } .modal_allsellers .seller_title .seller_status { display: flex; align-items: center; gap: 1rem; } .modal_allsellers .seller_title .seller_status .line_vertical { width: 2px; height: 15px; background-color: var(--black-10); } .modal_allsellers .seller_title .seller_status p { font-size: 0.9rem; } .modal_allsellers .seller_title.excellent .seller_name .icon_badge, .modal_allsellers .seller_title.excellent .seller_name .text_badge { display: flex; } .modal_allsellers .seller_title.excellent .status_text { color: var(--green-4); } .modal_allsellers .seller_title.good .status_text { color: var(--green-1); } .modal_allsellers .seller_title.medium .status_text { color: var(--yellow-1); } .modal_allsellers .seller_title.bad .status_text { color: var(--red-8); } .modal_allsellers .price_container { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem; border-top: 1px solid var(--black-10); } .modal_allsellers .price_container .prices { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; } .modal_allsellers .price_container .prices .price_offer { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .modal_allsellers .price_container .price_last { font-weight: 500; color: var(--green-6); font-size: 1rem; text-align: left; } .modal_allreview .floated_button, .modal_allquestions .floated_button { position: fixed; bottom: 2rem; left: 2rem; } .share_body { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; } .share_body .share_qrcode { width: var(--width-100); display: flex; align-items: center; justify-content: center; } .share_body .share_qrcode img { width: 120px; height: 120px; } .share_body .share_qrcode #qrcode { width: 120px; height: 120px; } .share_body .share_links_container { width: var(--width-100); display: flex; flex-direction: column; gap: 1.2rem; } .share_body .share_links_container .share_social__links { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .share_body .share_links_container .share_social__links .share_social__link a { display: flex; align-items: center; justify-content: center; color: var(--white-0); width: 50px; height: 50px; border-radius: 0.5rem; transition: opacity 250ms; } .share_body .share_links_container .share_social__links .share_social__link a:hover { opacity: 0.7; } .share_body .share_links_container .share_social__links .share_social__link a i { font-size: 22px; } .share_body .share_links_container .share_social__links .share_social__link.facebook a { background: var(--blue-1); } .share_body .share_links_container .share_social__links .share_social__link.pinterest a { background: var(--red-11); } .share_body .share_links_container .share_social__links .share_social__link.instagram a { background: linear-gradient(135deg, var(--purple-2) 0%, var(--purple-3) 31.77%, var(--red-13) 62.5%, var(--yellow-6) 100%); } .share_body .share_links_container .share_social__links .share_social__link.linkedin a { background: var(--blue-3); } .share_body .share_links_container .share_social__links .share_social__link.whatsapp a { background: var(--green-3); } .share_body .share_links_container .btn_share__copy { display: flex; align-items: center; width: var(--width-100); gap: 1rem; position: relative; padding: 0.5rem 0.75rem 0.5rem 1.2rem; border-radius: 0.5rem; border: 1px solid var(--black-10); } .share_body .share_links_container .btn_share__copy button { width: 35px; height: 35px; border-radius: 100px; display: flex; align-items: center; justify-content: center; transition: background 250ms; } .share_body .share_links_container .btn_share__copy button:hover { background-color: var(--gray-204); } .share_body .share_links_container .btn_share__copy button i { font-size: 18px; } .share_body .share_links_container .btn_share__copy .content { width: calc(100% - 1rem - 35px); font-size: 0.8rem; color: var(--gray-200); text-align: left; } @media (min-width: 881px) { .share_body { flex-direction: row; } .share_body .share_qrcode { width: var(--width-40); display: flex; align-items: flex-end; justify-content: flex-start; } .share_body .share_links_container { width: var(--width-60); } } .chart_labels__container .chart_prices { display: flex; } .chart_labels__container .chart_prices .chart_price { display: flex; flex-direction: column; gap: 0.5rem; } .chart_labels__container .chart_prices .chart_price_separator { width: 1px; height: 45px; background: var(--black-10); margin: 0 24px; } .chart_labels__container .chart_prices .chart_price_title { color: var(--blue-3); text-align: right; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } } .chart_labels__container .chart_prices .chart_price_value { color: var(--blue-3); text-align: right; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } } .chart_labels__container .chart_prices .chart_price_value span { color: var(--blue-3); font-size: 10px; font-style: normal; font-weight: 400; line-height: normal; @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } } .chart_labels__container .chart_prices .color_discount { color: var(--black-30, var(--gray-203)) !important; font-weight: 400; } .chart_labels__container .chart_prices .price_unit { font-size: 10px; } .chart_labels__container .chart_price_row_separator { background: var(--black-10); height: 1px; align-self: stretch; } .chart_labels__container .chart_lines__container { display: flex; align-items: center; gap: 20px; } .chart_labels__container .chart_lines__container .item { display: flex; flex-direction: column; justify-content: center; gap: 8px; } .chart_labels__container .chart_lines__container .item p{ color: var(--gray-201); text-align: right; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; @supports ( (--a: 0)) { font-family: var(--font-yekan-bakh-regular); } @supports ( not (--a: 0)) { font-family: "Yekan BakhRegular", sans-serif; } } .chart_labels__container .chart_lines__container .line_dashed { width: 60px; border-top: 2px dashed var(--gray-203); } .chart_labels__container .chart_lines__container .line_gray { width: 60px; border-top: 2px solid var(--gray-203); } .chart_labels__container .chart_lines__container .line_blue { width: 60px; border-top: 2px solid var(--blue-3); } .modal_chart .product_attributes .selected-label { border-radius: 6px; border: 2px solid var(--blue-3); background: var(--white-0); } @media (min-width: 881px) { .modal_chart.modal__container .modal__content{ padding: 0 32px 32px 32px; } .modal_chart.modal__container .modal__body{ padding: 0; margin-top: 16px; } .chart_labels__container { max-width: var(--width-95); width: var(--width-90); display: flex; padding: 8px 16.5px 9px 16px; justify-content: flex-start; align-items: center; gap: 50px; border-radius: 8px; border: 1px solid var(--black-10); background: var(--white-0); } .chart_labels__container .label-item { flex-shrink: 0; } } @media (max-width: 880px) { .chart_labels__container { display: flex; padding: 8px 16px; flex-direction: column; gap: 16px; border-radius: 8px; border: 1px solid var(--black-10); background: var(--white-0); margin-top: 16px; } .modal_chart .modal__container .modal__content { padding: 32px; border-radius: 1rem; max-width: 756px; max-height: 400px; } } .modal_chart .chart__info { display: flex; flex-direction: column; gap: 8px; } .details_with__product__modal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; height: 100%; overflow: hidden; } .details_with__product__modal .right_side { display: flex; flex-direction: column; gap: 1rem; } .details_with__product__modal .right_side .product_cover { width: var(--width-100); flex-grow: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 1rem; } .details_with__product__modal .right_side .product_cover img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .details_with__product__modal .left_side { display: flex; flex-direction: column; gap: 1.2rem; padding-bottom: 1rem; overflow-y: auto; scrollbar-width: auto; scrollbar-color: var(--gray-204) var(--white-0); } .details_with__product__modal .left_side::-webkit-scrollbar { width: 12px; } .details_with__product__modal .left_side::-webkit-scrollbar-track { background: var(--white-0); } .details_with__product__modal .left_side::-webkit-scrollbar-thumb { background-color: var(--gray-204); border-radius: 10px; border: 3px solid var(--white-0); } .details_with__product__modal .left_side label { font-size: 0.8rem; } .details_with__product__modal .left_side .betterprice_input__container { display: flex; flex-direction: column; gap: 0.5rem; } .details_with__product__modal .left_side .betterprice_input__container .betterprice_input { position: relative; } .details_with__product__modal .left_side .betterprice_input__container .betterprice_input input { width: var(--width-100); padding: 1rem 1.2rem 1rem 3.5rem; border-radius: 0.5rem; border: 1px solid var(--gray-202); outline: none; font-family: inherit; transition: all 250ms ease-in; } .details_with__product__modal .left_side .betterprice_input__container .betterprice_input input:focus { border: 1px solid var(--blue-3); box-shadow: 0 0 3px 1px rgba(18, 128, 230, 0.2); } .details_with__product__modal .left_side .betterprice_input__container .betterprice_input .unit_label { position: absolute; top: 1px; left: 1px; bottom: 1px; background-color: var(--white-0); border-radius: 0.5rem; color: var(--black-0); font-size: 0.8rem; padding: 0 0.75rem; display: flex; align-items: center; justify-content: center; text-align: center; } .details_with__product__modal .left_side .only_onlineshop__inputs, .details_with__product__modal .left_side .no_onlineshop__inputs { display: flex; flex-direction: column; gap: 0.75rem; } .details_with__product__modal .left_side .only_onlineshop__inputs.hide, .details_with__product__modal .left_side .no_onlineshop__inputs.hide { display: none; } @media (min-width: 881px) { .details_with__product__modal { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .breadcrumb_container { display: flex; align-items: center; gap: 0.5rem; color: var(--black-200); padding: 2.5rem 0 1rem; } .breadcrumb_container a { color: var(--gray-201); } .breadcrumb_container i { color: var(--black-200); font-size: 18px; } .navbar { background-color: var(--white-0); padding: 1rem; } .navbar .navbar_container { width: var(--width-90); max-width: 1290px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .navbar .navbar_container .navbar_start { flex-grow: 1; display: flex; align-items: center; justify-content: center; gap: 2rem; } .navbar .navbar_container .navbar_start .navbar_logo a { display: flex; align-items: center; justify-content: center; } .navbar .navbar_container .navbar_start .navbar_logo a img { width: 150px; } .navbar .navbar_container .navbar_start .navbar_menu { display: none; align-items: center; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item { position: relative; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item > a { position: relative; display: flex; align-items: center; gap: 0.5rem; color: var(--black-201); color: inherit; padding: 1rem; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item > a i { font-size: 18px; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item > a svg { width: 16px; height: 16px; color: inherit; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item > a p { font-size: 0.9rem; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item > .navbar_menu__dropdown { top: 4rem; right: 0; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item .navbar_menu__dropdown { position: absolute; width: 170px; border-radius: 1rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; height: 48px; cursor: pointer; border-bottom: 1px solid var(--black-10); transition: background 250ms; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item > a { display: flex; align-items: center; width: var(--width-100); height: 100%; font-size: 0.9rem; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item > p { font-size: 0.9rem; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item:hover { background-color: var(--gray-204); } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item:hover > .navbar_menu__dropdown { opacity: 1; visibility: visible; transition: opacity 250ms; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item:last-child { border-bottom-width: 0; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item > .navbar_menu__dropdown { position: absolute; top: 0; right: 175px; } .navbar .navbar_container .navbar_start .navbar_menu > .navbar_menu__item:hover > .navbar_menu__dropdown { opacity: 1; visibility: visible; transition: opacity 250ms; } .navbar .navbar_container .navbar_start .navbar_menu.link--1 > .navbar_menu__item > a::after { content: " "; position: absolute; bottom: 0; left: 0; width: var(--width-100); height: 3px; background-color: transparent; transition: background 250ms; } .navbar .navbar_container .navbar_start .navbar_menu.link--1 > .navbar_menu__item > a:hover::after { background-color: var(--main-color); } .navbar .navbar_container .navbar_start .navbar_menu.link--1 > .navbar_menu__item.active > a { background-color: var(--main-color); color: var(--white-0); } .navbar .navbar_container .navbar_start .navbar_menu.link--2 > .navbar_menu__item > a { transition: color 250ms; } .navbar .navbar_container .navbar_start .navbar_menu.link--2 > .navbar_menu__item > a:hover { color: var(--main-color); } .navbar .navbar_container .navbar_start .navbar_menu.link--2 > .navbar_menu__item.active > a { color: var(--red-1); } .navbar .navbar_container .navbar_start .navbar_menu.link--3 > .navbar_menu__item > a { margin: 0.5rem; } .navbar .navbar_container .navbar_start .navbar_menu.link--3 > .navbar_menu__item > a::after { content: " "; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 4px; border-radius: 30px; background: transparent; transition: background 250ms; } .navbar .navbar_container .navbar_start .navbar_menu.link--3 > .navbar_menu__item > a:hover::after { background-color: var(--main-color); } .navbar .navbar_container .navbar_start .navbar_menu.link--3 > .navbar_menu__item.active > a { background-color: var(--main-color); color: var(--white-0); border-radius: 0.5rem; } .navbar .navbar_container .navbar_start .navbar_menu.link--4 > .navbar_menu__item > a { margin: 0.5rem; } .navbar .navbar_container .navbar_start .navbar_menu.link--4 > .navbar_menu__item > a::after { content: " "; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 23px; height: 10px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="10" viewBox="0 0 17 10" fill="none"><path d="M14.6521 10H2.34795C0.498174 10 -0.360257 7.70457 1.03559 6.49079L7.18764 1.14118C7.94019 0.486795 9.05982 0.486795 9.81236 1.14118L15.9644 6.49079C17.3603 7.70457 16.5018 10 14.6521 10Z" fill="%23E6123D"/></svg>'); background-size: 100% 100%; background-position: center top; opacity: 0; transition: opacity 250ms; } .navbar .navbar_container .navbar_start .navbar_menu.link--4 > .navbar_menu__item > a:hover { color: var(--main-color); } .navbar .navbar_container .navbar_start .navbar_menu.link--4 > .navbar_menu__item > a:hover::after { opacity: 1; } .navbar .navbar_container .navbar_start .navbar_menu.link--4 > .navbar_menu__item.active > a { color: var(--red-1); } .navbar .navbar_container .navbar_start .navbar_menu.link--4 > .navbar_menu__item.active > a::after { opacity: 1; } @media (min-width: 980px) { .navbar .navbar_container .navbar_start { flex-grow: 0; justify-content: flex-start; } .navbar .navbar_container .navbar_start .navbar_menu { display: flex; } } .navbar .navbar_container .navbar_end { position: relative; display: flex; align-items: center; gap: 1.5rem; } .navbar .navbar_container .navbar_end .navbar_callus { display: none; flex-direction: column; align-items: center; gap: 0.45rem; } .navbar .navbar_container .navbar_end .navbar_callus .navbar_callus--top { display: flex; align-items: center; gap: 0.5rem; } .navbar .navbar_container .navbar_end .navbar_callus .navbar_callus--top i { font-size: 25px; color: var(--yellow-3); } .navbar .navbar_container .navbar_end .navbar_callus .navbar_callus--top svg { width: 25px; height: 25px; color: var(--yellow-3); } .navbar .navbar_container .navbar_end .navbar_callus .navbar_callus--top p { font-size: 0.8rem; color: var(--gray-206); } .navbar .navbar_container .navbar_end .navbar_callus .navbar_callus--phone { font-size: 0.8rem; font-weight: 600; color: var(--black-0); letter-spacing: 0.3rem; } .navbar .navbar_container .navbar_end .nav_link--huge { display: none; align-items: center; justify-content: center; height: 40px; padding: 1rem 1.5rem; border-radius: 40px; color: var(--white-0); background-color: var(--main-color); box-shadow: 0 4px 40px 0 rgba(187, 105, 119, 0.3); cursor: pointer; transition: background 350ms ease-in; } .navbar .navbar_container .navbar_end .nav_link--huge:hover { background-color: var(--red-5); } .navbar .navbar_container .navbar_menu__button { display: flex; align-items: center; justify-content: center; cursor: pointer; } @media (min-width: 980px) { .navbar .navbar_container .navbar_menu__button { display: none; } .navbar .navbar_container .navbar_menu { display: flex; } .navbar .navbar_container .navbar_end .navbar_callus, .navbar .navbar_container .navbar_end .nav_link--huge { display: flex; } } .dropdownmenu_list { display: flex; flex-direction: column; position: relative; } .dropdownmenu_list .dropdownmenu_title { width: 250px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.2rem; background-color: var(--red-1); color: var(--white-0); cursor: pointer; } .dropdownmenu_list .dropdownmenu_title .dropdownmenu_title__text { display: flex; align-items: center; gap: 0.5rem; } .dropdownmenu_list .dropdownmenu_menu { position: absolute; top: 3rem; right: 0; z-index: 10; width: 250px; border-radius: 0px 0px 16px 16px; background: var(--white-0); display: flex; flex-direction: column; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 250ms ease-in, transform 250ms ease-in, visibility 0s 250ms; } .dropdownmenu_list .dropdownmenu_menu.open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 250ms ease-in, transform 250ms ease-in; } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1rem; background-color: var(--white-0); border-bottom: 1px solid var(--black-10); cursor: pointer; transition: background 250ms ease-in; } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item:hover { background-color: var(--default-bg-color); } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item:hover .dropdownmenu_menu__sub { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 250ms ease-in, transform 250ms ease-in; } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item:last-child { border-bottom: none; } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item .dropdownmenu_menu__item--text { display: flex; align-items: center; gap: 0.75rem; } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item .dropdownmenu_menu__sub { position: absolute; top: 0; right: 260px; z-index: 10; width: 250px; border-radius: 0px 0px 16px 16px; background: var(--white-0); display: flex; flex-direction: column; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 250ms ease-in, transform 250ms ease-in, visibility 0s 250ms; } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item .dropdownmenu_menu__sub .dropdownmenu_menu__sub--item { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1rem; background-color: var(--white-0); border-bottom: 1px solid var(--black-10); cursor: pointer; transition: background 250ms ease-in; } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item .dropdownmenu_menu__sub .dropdownmenu_menu__sub--item:hover { background-color: var(--default-bg-color); } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__item .dropdownmenu_menu__sub .dropdownmenu_menu__sub--item .dropdownmenu_menu__sub--title { display: flex; align-items: center; gap: 0.75rem; } .dropdownmenu_list .dropdownmenu_menu .dropdownmenu_menu__bottom { padding: 1rem; display: flex; flex-direction: column; } .sidebar_mobile__container::after { content: " "; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: -10; opacity: 0; translate: opacity 350ms; } .sidebar_mobile__container.opened::after { opacity: 1; z-index: 10; } .sidebar_mobile__container.opened .sidebar_container { visibility: visible; transform: translateY(0); } .sidebar_mobile__container .sidebar_container { position: fixed; inset: 10px; z-index: 30; background-color: var(--white-0); display: flex; flex-direction: column; gap: 1rem; border-radius: 1rem; padding: 2rem 1rem; transform: translateY(-100vh); visibility: hidden; transition: all 300ms ease-in; } .sidebar_mobile__container .sidebar_container .btn_close { width: 40px; height: 40px; background-color: var(--red-1); color: var(--white-0); border-radius: 50%; } .sidebar_mobile__container .sidebar_container .btn_close svg { width: 25px; height: 25px; } .sidebar_mobile__container .sidebar_container .sidebar_header { display: flex; align-items: center; justify-content: space-between; } .sidebar_mobile__container .sidebar_container .sidebar_menu { display: flex; flex-direction: column; } .sidebar_mobile__container .sidebar_container .sidebar_menu .sidebar_menu__item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--black-10); cursor: pointer; } .sidebar_mobile__container .sidebar_container .sidebar_menu .sidebar_menu__item:last-child { border-bottom-width: 0; } .sidebar_mobile__container .sidebar_container--sub { position: fixed; inset: 10px; z-index: 40; background-color: var(--white-0); display: flex; flex-direction: column; gap: 1rem; border-radius: 1rem; padding: 2rem 1rem; transform: translateY(-100vh); visibility: hidden; transition: all 300ms ease-in; } .sidebar_mobile__container .sidebar_container--sub.opened { transform: translateY(0); visibility: visible; } .sidebar_mobile__container .sidebar_container--sub .btn_close { width: 40px; height: 40px; background-color: var(--red-1); color: var(--white-0); border-radius: 50%; } .sidebar_mobile__container .sidebar_container--sub .btn_close svg { width: 25px; height: 25px; } .sidebar_mobile__container .sidebar_container--sub .sidebar_header { display: flex; align-items: center; justify-content: space-between; } .sidebar_mobile__container .sidebar_container--sub .sidebar_header--second { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; } .sidebar_mobile__container .sidebar_container--sub .sidebar_menu { display: flex; flex-direction: column; } .sidebar_mobile__container .sidebar_container--sub .sidebar_menu .sidebar_menu__item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--black-10); cursor: pointer; } .sidebar_mobile__container .sidebar_container--sub .sidebar_menu .sidebar_menu__item:last-child { border-bottom-width: 0; } .contact_container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 20; } .contact_container .contact_overlay { content: ""; position: fixed; inset: 0; z-index: -10; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all 350ms ease-in; } .contact_container .contact_list { height: 0; padding: 0.5rem 1rem 0.5rem 0.5rem; opacity: 0; visibility: hidden; transform: translateY(0); transition: all 350ms ease-in; } .contact_container .contact_list .contact_item { width: 50px; height: 50px; flex: 0 0 50px; margin-bottom: -50px; overflow: hidden; display: flex; align-items: center; background-color: var(--white-0); border-radius: 100px; cursor: pointer; transition: all 350ms ease-in; } .contact_container .contact_list .contact_item .contact_item__icon { width: 50px; height: 50px; flex: 0 0 50px; background-color: green; border-radius: 50%; } .contact_container .contact_list .contact_item .contact_item__text { white-space: nowrap; padding: 0 0.5rem; color: var(--black-0); font-size: 0.8rem; font-weight: 600; } .contact_container .contact_list .contact_item:hover { width: var(--width-100); } .contact_container.show .contact_overlay { opacity: 1; visibility: visible; } .contact_container.show .contact_list { height: 100%; opacity: 1; visibility: visible; transform: translateY(-10px); } .contact_container.show .contact_list .contact_item { margin-bottom: 0.75rem; } .contact_container .contact_button { position: relative; z-index: 30; flex-direction: column; gap: 0.3rem; width: 80px; height: 80px; border-radius: 50%; background-color: var(--blue-3); color: var(--white-0); font-size: 0.8rem; } .accordion_container .accordion_button svg, .accordion_container .accordion_button i { font-size: 20px; transform: rotate(0); transition: color 250ms ease-in, transform 350ms ease-in; } .accordion_container .accordion_button svg:hover, .accordion_container .accordion_button i:hover { color: var(--red-1); } .accordion_container .accordion_content { width: var(--width-100); max-height: 0; overflow: hidden; transition: padding 250ms, max-height 0.5s cubic-bezier(0, 1, 0, 1), overflow 0s 500ms; } .accordion_container.opened .accordion_button svg, .accordion_container.opened .accordion_button i { transform: rotate(180deg); transition: transform 350ms ease-in; } .accordion_container.opened .accordion_content { overflow: visible; max-height: 1000px; transition: padding 250ms, max-height 1s ease-in-out, overflow 0s 1s; } .pagination_container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; padding: 1rem 0; } .pagination_container .pagination_menu { display: flex; align-items: center; gap: 0.75rem; } .pagination_container .pagination_button { display: flex; padding: 0.5rem 1rem; justify-content: center; align-items: center; gap: 0.5rem; border-radius: 4px; background: var(--white-0); color: var(--gray-200); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); cursor: pointer; transition: color 350ms ease-in; } .pagination_container .pagination_button.active { background-color: var(--red-1); color: var(--white-0); } .pagination_container .pagination_button.active:hover { color: var(--gray-200); } .pagination_container .pagination_button:hover { color: var(--red-1); } .changeaddress_form .accordion_button { width: var(--width-100); background-color: var(--black-10); color: var(--black-0); text-align: center; padding: 0.75rem; cursor: pointer; } .changeaddress_form .accordion_content { padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; } .changeaddress_form.opened .accordion_content { padding: 1rem 0; } .shoppingcard_sidebar__container { position: fixed; z-index: 20; inset: 0; visibility: hidden; } .shoppingcard_sidebar__container.opened { visibility: visible; } .shoppingcard_sidebar__container.opened .shoppingcard_sidebar__overlay { opacity: 1; visibility: visible; transition: all 350ms ease-in; } .shoppingcard_sidebar__container.opened .shoppingcard_sidebar { visibility: visible; transform: translateX(0); transition: all 350ms ease-in; } .shoppingcard_sidebar__container.left.opened .shoppingcard_sidebar { transform: translateX(0); } .shoppingcard_sidebar__container.left .shoppingcard_sidebar { left: 0; right: auto; transform: translateX(-130%); } .shoppingcard_sidebar__container.left .shoppingcard_sidebar .sidebar_header { display: flex; justify-content: flex-start; background-color: var(--white-0); } .shoppingcard_sidebar__container.left .btn_close--desktop { right: -3.7rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: all 350ms ease-in; cursor: pointer; } .shoppingcard_sidebar__container .shoppingcard_sidebar { position: absolute; top: 0; bottom: 0; left: auto; right: 0; width: var(--width-100); max-width: 410px; background-color: var(--white-0); padding: 1rem; visibility: hidden; transform: translateX(130%); transition: all 350ms ease-in; } .shoppingcard_sidebar__container .shoppingcard_sidebar .btn_close { position: absolute; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: var(--white-0); color: var(--gray-201); } .shoppingcard_sidebar__container .shoppingcard_sidebar .btn_close svg { width: 32px; height: 32px; } .shoppingcard_sidebar__container .shoppingcard_sidebar .btn_close i { font-size: 25px; } .shoppingcard_sidebar__container .shoppingcard_sidebar .btn_close--desktop { display: none; position: absolute; top: 1.5rem; left: -3.7rem; border-radius: 50%; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_header { display: flex; justify-content: flex-end; background-color: var(--white-0); } .shoppingcard_sidebar__container .shoppingcard_sidebar .btn_close--mobile { position: relative; display: flex; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body { display: flex; flex-direction: column; gap: 1rem; height: 100vh; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_body__header { border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.9rem; color: var(--black-201); background-color: var(--gray-204); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_body__header .bold { font-size: 1.05rem; font-weight: 600; color: var(--red-1); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items { height: calc(100vh - 310px); overflow-y: auto; border: 1px solid var(--black-10); border-radius: 0.5rem; scrollbar-width: none; -ms-overflow-style: none; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items::-webkit-scrollbar { display: none; /* Hide scrollbars */ } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--black-10); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item:last-child { border-bottom-width: 0; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_info { display: flex; align-items: flex-start; gap: 1rem; color: var(--black-201); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_info .product_image { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; overflow: hidden; border-radius: 0.5rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_info .product_image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_info .product_title { width: calc(var(--width-100) - 1rem - 72px); display: flex; flex-direction: column; gap: 0.75rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_info .product_title > p { color: inherit; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_info .product_title .product_color { display: flex; align-items: center; gap: 0.5rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_info .product_title .product_color p { color: inherit; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price { display: flex; align-items: center; justify-content: space-between; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_counter__container { display: flex; align-items: center; gap: 0.75rem; border-radius: 4px; border: 1px solid var(--gray-207); padding: 0 0.8rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_counter__container .btn_add { display: flex; align-items: center; justify-content: center; background-color: var(--black-10); width: 26px; height: 26px; color: var(--black-201); border-radius: 0.5rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_counter__container .btn_add i { font-size: 20px; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_counter__container .btn_delete { color: var(--black-201); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_counter__container .btn_delete i { font-size: 22px; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_counter__container .display_counter { min-width: 30px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_price { display: flex; flex-direction: column; gap: 0.45rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_price .product_offer { display: flex; align-items: center; justify-content: space-between; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_price .product_offer .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_num__price .product_price .product_price__text { font-weight: 600; color: var(--green-6); font-size: 0.9rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item .product_unavailable { text-align: left; font-size: 1.05rem; color: var(--black-200); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items .item.unavailable .product_info { color: var(--gray-203); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_footer__price { display: flex; align-items: center; justify-content: space-between; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_footer__price > p { color: var(--gray-201); } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_footer__price .price { color: var(--green-6); font-weight: 500; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_footer__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body__empty { display: flex; flex-direction: column; height: 100%; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body__empty .nocontent_section { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } @media (min-width: 556px) { .shoppingcard_sidebar__container .shoppingcard_sidebar .btn_close--desktop { display: flex; } .shoppingcard_sidebar__container .shoppingcard_sidebar .btn_close--mobile { display: none; } .shoppingcard_sidebar__container .shoppingcard_sidebar .sidebar_body .sidebar_list__items { height: calc(100vh - 250px); } } .shoppingcard_popup__container { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; height: 100vh; background-color: var(--white-0); width: var(--width-100); padding: 1rem; visibility: hidden; transform: translateX(130%); transition: all 350ms ease-in; } .shoppingcard_popup__container.show { visibility: visible; transform: translateX(0); } .shoppingcard_popup__container .shoppingcard_header--mobile { display: flex; align-items: center; justify-content: flex-end; } .shoppingcard_popup__container .shoppingcard_header--mobile button { width: 48px; height: 48px; color: var(--gray-201); } .shoppingcard_popup__container .shoppingcard_header--mobile button i { font-size: 25px; } .shoppingcard_popup__container .shoppingcard_header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0.5rem; border-bottom: 1px solid var(--black-10); } .shoppingcard_popup__container .shoppingcard_header > p { color: var(--gray-201); } .shoppingcard_popup__container .shoppingcard_header > p .bold { color: var(--black-0); font-weight: 600; } .shoppingcard_popup__container .shoppingcard_header .link_blue p { font-size: 0.8rem; } .shoppingcard_popup__container .shoppingcard_header .link_blue i { font-size: 18px; } .shoppingcard_popup__container .shoppingcard_main { height: calc(100vh - 150px); overflow-y: auto; border-radius: 0.5rem; scrollbar-width: none; -ms-overflow-style: none; } .shoppingcard_popup__container .shoppingcard_main::-webkit-scrollbar { display: none; /* Hide scrollbars */ } .shoppingcard_popup__container .shoppingcard_main .product_item { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--black-10); } .shoppingcard_popup__container .shoppingcard_main .product_item:last-child { border-bottom-width: 0; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_info { display: flex; align-items: flex-start; gap: 1rem; color: var(--black-201); } .shoppingcard_popup__container .shoppingcard_main .product_item .product_info .product_image { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; overflow: hidden; border-radius: 0.5rem; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_info .product_image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_info .product_title { width: calc(var(--width-100) - 1rem - 72px); display: flex; flex-direction: column; gap: 0.75rem; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_info .product_title > p { color: inherit; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_info .product_title .product_color { display: flex; align-items: center; gap: 0.5rem; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_info .product_title .product_color p { color: inherit; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price { display: flex; align-items: center; justify-content: space-between; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_counter__container { display: flex; align-items: center; gap: 0.75rem; border-radius: 4px; border: 1px solid var(--gray-207); padding: 0 0.8rem; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_counter__container .btn_add { display: flex; align-items: center; justify-content: center; background-color: var(--black-10); width: 26px; height: 26px; color: var(--black-201); border-radius: 0.5rem; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_counter__container .btn_add i { font-size: 20px; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_counter__container .btn_delete { color: var(--black-201); } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_counter__container .btn_delete i { font-size: 22px; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_counter__container .display_counter { min-width: 30px; background-color: var(--white-0); text-align: center; padding: 0.5rem; color: var(--black-201); } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_price { display: flex; flex-direction: column; gap: 0.45rem; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_price .product_offer { display: flex; align-items: center; justify-content: space-between; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_price .product_offer .offer_price { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .shoppingcard_popup__container .shoppingcard_main .product_item .product_num__price .product_price .product_price__text { font-weight: 600; color: var(--green-6); font-size: 0.9rem; } .shoppingcard_popup__container .shoppingcard_main .product_item .product_unavailable { text-align: left; font-size: 1.05rem; color: var(--black-200); } .shoppingcard_popup__container .shoppingcard_main .product_item.unavailable .product_info { color: var(--gray-203); } .shoppingcard_popup__container .shoppingcard_footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--black-10); gap: 1rem; } .shoppingcard_popup__container .shoppingcard_footer .price { font-size: 1.1rem; color: var(--green-6); font-weight: 500; } .shoppingcard_popup__container .shoppingcard_footer button { width: var(--width-50); } @media (min-width: 556px) { .shoppingcard_popup__container { position: absolute; top: 4.5rem; left: 0; right: auto; bottom: auto; z-index: 10; width: 350px; height: auto; border-radius: 0.5rem; visibility: hidden; transform: translate(0, 0); opacity: 0; transition: opacity 250ms ease-in, visiblity 0s 250ms; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1); } .shoppingcard_popup__container.show { visibility: visible; opacity: 1; transition: opacity 250ms ease-in, visiblity 0s 250ms; } .shoppingcard_popup__container::before { content: " "; position: absolute; left: 20%; top: -18px; width: 44px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='21' viewBox='0 0 36 21' fill='none'%3E%3Cpath d='M15.8787 1.12132L1.12132 15.8787C-0.768574 17.7686 0.569928 21 3.24264 21H32.7574C35.4301 21 36.7686 17.7686 34.8787 15.8787L20.1213 1.12132C18.9497 -0.0502525 17.0503 -0.0502504 15.8787 1.12132Z' fill='white'/%3E%3C/svg%3E"); } .shoppingcard_popup__container .shoppingcard_header--mobile { display: none; } .shoppingcard_popup__container .shoppingcard_header { padding: 0 0 1rem; } .shoppingcard_popup__container .shoppingcard_main { height: 200px; } } .accordion_dropdown__container { display: flex; flex-direction: column; gap: 0.75rem; } .accordion_dropdown__container .accordion_dropdown { width: var(--width-100); max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), overflow 0s 500ms; } .accordion_dropdown__container .accordion_dropdown.opened { overflow: visible; max-height: 10000px; transition: max-height 1s ease-in-out, overflow 0s 1ms; } .accordion_dropdown__container.with_padding { gap: 0; } .accordion_dropdown__container.with_padding .accordion_dropdown { padding-top: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), padding 0.5s 250ms, overflow 0s 500ms; } .accordion_dropdown__container.with_padding .accordion_dropdown.opened { padding-top: 1rem; transition: max-height 1s ease-in-out, padding 0.5s, overflow 0s 1ms; } /*.megamenu_container {*/ /* width: var(--width-100);*/ /* max-width: var(--width-width1);*/ /* margin: 0 auto;*/ /* position: relative;*/ /*}*/ /*.megamenu_container .megamenu_menu {*/ /* display: flex;*/ /* align-items: center;*/ /* gap: 1rem;*/ /* padding: 1.5rem 2rem;*/ /* background-color: var(--black-0);*/ /* color: var(--white-0);*/ /* border-radius: 0 0 1rem 1rem;*/ /*}*/ /*.megamenu_container .megamenu_menu .megamenu_item {*/ /* position: relative;*/ /* display: flex;*/ /* align-items: center;*/ /* gap: 0.6rem;*/ /* cursor: pointer;*/ /*}*/ /*.megamenu_container .megamenu_menu .megamenu_item::after {*/ /* content: "";*/ /* position: absolute;*/ /* top: 2rem;*/ /* left: 50%;*/ /* transform: translateX(-50%);*/ /* width: 39px;*/ /* height: 19px;*/ /* opacity: 0;*/ /* background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="35" height="19" viewBox="0 0 35 19" fill="none"><path d="M16.1043 1.35994L1.52279 15.5675C0.237614 16.8198 1.12416 19 2.91852 19H32.0815C33.8758 19 34.7624 16.8198 33.4772 15.5675L18.8957 1.35994C18.1191 0.60322 16.8809 0.603221 16.1043 1.35994Z" fill="white"/></svg>');*/ /* background-size: 100% 100%;*/ /*}*/ /*.megamenu_container .megamenu_menu .megamenu_item p {*/ /* font-size: 0.8rem;*/ /* -webkit-user-select: none;*/ /* -moz-user-select: none;*/ /* user-select: none;*/ /*}*/ /*.megamenu_container .megamenu_menu .megamenu_item i {*/ /* font-size: 18px;*/ /* font-weight: 500;*/ /*}*/ /*.megamenu_container .megamenu_menu .megamenu_item.active::after {*/ /* opacity: 1;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown {*/ /* width: var(--width-100);*/ /* position: absolute;*/ /* top: 4.5rem;*/ /* left: 0;*/ /* right: 0;*/ /* background-color: var(--white-0);*/ /* box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);*/ /* border-radius: 1rem;*/ /* padding: 1rem;*/ /* display: none;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown.open {*/ /* display: block;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item {*/ /* background-color: var(--gray-204);*/ /* border-radius: 1rem;*/ /* padding: 1rem;*/ /* display: flex;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu {*/ /* width: var(--width-20);*/ /* display: flex;*/ /* flex-direction: column;*/ /* gap: 0.5rem;*/ /* padding: 1.5rem 0;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item {*/ /* position: relative;*/ /* display: flex;*/ /* align-items: center;*/ /* gap: 1rem;*/ /* padding: 1rem 1.2rem;*/ /* cursor: pointer;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item::before {*/ /* content: " ";*/ /* position: absolute;*/ /* top: -10px;*/ /* left: 0;*/ /* width: 10px;*/ /* height: 10px;*/ /* opacity: 0;*/ /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 10H0V0C0 5.52285 4.47715 10 10 10Z' fill='white'/%3E%3C/svg%3E");*/ /* background-size: 100% 100%;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item::after {*/ /* content: " ";*/ /* position: absolute;*/ /* bottom: -10px;*/ /* left: 0;*/ /* width: 10px;*/ /* height: 10px;*/ /* opacity: 0;*/ /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0H0V10C0 4.47715 4.47715 0 10 0Z' fill='white'/%3E%3C/svg%3E");*/ /* background-size: 100% 100%;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item .arrow {*/ /* display: none;*/ /* position: absolute;*/ /* width: 24px;*/ /* height: 58px;*/ /* left: 0;*/ /* top: 50%;*/ /* transform: translateY(-50%);*/ /* background-image: url('data:image/svg+xml,<svg width="24" height="58" viewBox="0 0 24 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4C0 1.79086 1.79086 0 4 0C8.41828 0 12 3.58172 12 8V50C12 54.4183 8.41828 58 4 58C1.79086 58 0 56.2091 0 54V4Z" fill="%23E6123D"/><path d="M24 29C24 40.5032 12 38.3333 12 45C5.37258 45 0 37.8366 0 29C0 20.1634 5.37258 13 12 13C12 19.6667 24 17.4968 24 29Z" fill="%23E6123D"/><path d="M9.5838 25.459L6.04297 28.9998L9.5838 32.5407" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.9581 29H6.14062" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');*/ /* background-size: 100% 100%;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active {*/ /* border-radius: 0 1rem 1rem 0;*/ /* background-color: var(--white-0);*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active::after, .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active::before {*/ /* opacity: 1;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active .arrow {*/ /* display: block;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active .icon {*/ /* background-color: var(--red-1);*/ /* color: var(--white-0);*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item .icon {*/ /* width: 40px;*/ /* height: 40px;*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: center;*/ /* border-radius: 50%;*/ /* background-color: var(--white-0);*/ /* color: var(--gray-200);*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item .icon i {*/ /* font-size: 18px;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content {*/ /* width: var(--width-80);*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content {*/ /* width: var(--width-100);*/ /* display: none;*/ /* gap: 0.5rem;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content.active {*/ /* display: flex;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu {*/ /* width: var(--width-50);*/ /* display: grid;*/ /* grid-template-columns: repeat(2, 1fr);*/ /* gap: 0.75rem;*/ /* padding: 1rem;*/ /* background-color: var(--white-0);*/ /* border-radius: 1rem;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list {*/ /* display: flex;*/ /* flex-direction: column;*/ /* gap: 2rem;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header {*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: space-between;*/ /* width: var(--width-100);*/ /* background-color: var(--gray-204);*/ /* border-radius: 1rem;*/ /* padding: 0.75rem 1.2rem;*/ /* transition: opacity 250ms;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header .menu_header__right {*/ /* display: flex;*/ /* align-items: center;*/ /* gap: 0.5rem;*/ /* transition: color 250ms;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header .arrow {*/ /* color: var(--red-1);*/ /* opacity: 0;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header:hover .menu_header__right {*/ /* color: var(--red-1);*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header:hover .arrow {*/ /* opacity: 1;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_list {*/ /* display: flex;*/ /* flex-direction: column;*/ /* gap: 1.2rem;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_list .menu_list__item a {*/ /* display: flex;*/ /* align-items: center;*/ /* gap: 0.5rem;*/ /* color: var(--gray-200);*/ /* font-weight: 500;*/ /* transition: color 250ms;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_list .menu_list__item a:hover {*/ /* color: var(--red-1);*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .product_conteiner {*/ /* width: var(--width-35);*/ /* display: flex;*/ /* flex-direction: column;*/ /* gap: 0.75rem;*/ /* padding: 1rem;*/ /* background-color: var(--white-0);*/ /* border-radius: 1rem;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_banner {*/ /* width: var(--width-15);*/ /* border-radius: 1rem;*/ /* overflow: hidden;*/ /*}*/ /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_banner img {*/ /* width: var(--width-100);*/ /* height: 100%;*/ /* -o-object-fit: cover;*/ /* object-fit: cover;*/ /*}*/ /*********/ .megamenu_container { width: var(--width-100); max-width: var(--width-width1); margin: 0 auto; position: relative; } .megamenu_container .megamenu_menu { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem; background-color: var(--black-0); color: var(--white-0); border-radius: 0 0 1rem 1rem; position: relative; } .megamenu_container .megamenu_menu .megamenu_item { /*position: relative;*/ display: flex; align-items: center; gap: 0.6rem; cursor: pointer; } .megamenu_container .megamenu_menu .megamenu_item p { font-size: 0.8rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .megamenu_container .megamenu_menu .megamenu_item > p { position: relative; } .megamenu_container .megamenu_menu .megamenu_item i { font-size: 18px; font-weight: 500; } .megamenu_container .megamenu_menu .megamenu_item > p:after { content: ""; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); width: 39px; height: 19px; opacity: 0; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="35" height="19" viewBox="0 0 35 19" fill="none"><path d="M16.1043 1.35994L1.52279 15.5675C0.237614 16.8198 1.12416 19 2.91852 19H32.0815C33.8758 19 34.7624 16.8198 33.4772 15.5675L18.8957 1.35994C18.1191 0.60322 16.8809 0.603221 16.1043 1.35994Z" fill="white"/></svg>'); background-size: 100% 100%; transition: 0.35s ease-out; } /*.megamenu_container .megamenu_menu .megamenu_item.active .megamenu_dropdown__item{*/ /* position: relative;*/ /*}*/ .megamenu_container .megamenu_menu .megamenu_item.active > p:after { opacity: 1; } /*.megamenu_container .megamenu_menu .megamenu_item.active::after {*/ /*.megamenu_container .megamenu_menu .megamenu_item:focus > .megamenu_dropdown__item__container{*/ .megamenu_container .megamenu_menu .megamenu_item.active .megamenu_dropdown__item__container{ opacity: 1; visibility: visible; } /*.megamenu_container .megamenu_menu .megamenu_item cd2:focus > .megamenu_dropdown__item__container{*/ .megamenu_container .megamenu_menu .megamenu_item .megamenu_dropdown__item__container{ opacity: 0; visibility: hidden; } .megamenu_container .megamenu_dropdown__item__container { position: absolute; /*top: 68px;*/ top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: 0.35s ease-out; } .megamenu_container .megamenu_menu .megamenu_item:active > .megamenu_dropdown__item__container { opacity: 1; visibility: visible; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown { width: var(--width-100); position: absolute; top: 4.5rem; left: 0; right: 0; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); border-radius: 1rem; padding: 1rem; display: none; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown.open { display: block; width: var(--width-100); } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item { background-color: var(--gray-204); border-radius: 1rem; padding: 1rem; display: flex; position: relative; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu { width: var(--width-20); display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 0; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item { /*position: relative;*/ display: flex; align-items: center; gap: 1rem; /*padding: 1rem 1.2rem;*/ cursor: pointer; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item_title { display: flex; align-items: center; position: relative; width: var(--width-100); padding: 1rem 1.2rem; } /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item::before {*/ .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item_title::before { content: " "; position: absolute; top: -10px; left: 10px; width: 10px; height: 10px; opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 10H0V0C0 5.52285 4.47715 10 10 10Z' fill='white'/%3E%3C/svg%3E"); background-size: 100% 100%; } /*.megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item::after {*/ .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item .megamenu_dropdown__item__menu__item_title::after { content: " "; position: absolute; bottom: -10px; left: 10px; width: 10px; height: 10px; opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0H0V10C0 4.47715 4.47715 0 10 0Z' fill='white'/%3E%3C/svg%3E"); background-size: 100% 100%; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item .megamenu_dropdown__item__menu__item_title .arrow { display: none; position: absolute; width: 24px; height: 58px; /*left: 0;*/ left: 11px; top: 50%; transform: translateY(-50%); background-image: url('data:image/svg+xml,<svg width="24" height="58" viewBox="0 0 24 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4C0 1.79086 1.79086 0 4 0C8.41828 0 12 3.58172 12 8V50C12 54.4183 8.41828 58 4 58C1.79086 58 0 56.2091 0 54V4Z" fill="%23E6123D"/><path d="M24 29C24 40.5032 12 38.3333 12 45C5.37258 45 0 37.8366 0 29C0 20.1634 5.37258 13 12 13C12 19.6667 24 17.4968 24 29Z" fill="%23E6123D"/><path d="M9.5838 25.459L6.04297 28.9998L9.5838 32.5407" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.9581 29H6.14062" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-size: 100% 100%; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active { border-radius: 0 1rem 1rem 0; background-color: var(--white-0); } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active::after, .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active::before { opacity: 1; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active .arrow { display: block; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item.active .icon { background-color: var(--red-1); color: var(--white-0); } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--white-0); color: var(--gray-200); } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu .megamenu_dropdown__item__menu__item .icon i { font-size: 18px; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content { /*width: var(--width-80);*/ width: 79%; padding-left:6px; position: absolute; top: 18px; right: 20%; display: none; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content.active { display: block; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content { width: var(--width-100); display: none; gap: 0.5rem; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content.active { display: flex; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu { width: var(--width-50); /*width: 46%;*/ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding: 1rem; background-color: var(--white-0); border-radius: 1rem; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list { display: flex; flex-direction: column; gap: 2rem; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__item_title p { color: var(--black-0); margin-right: 12px; font-size: 16px; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header { display: flex; align-items: center; justify-content: space-between; width: var(--width-100); background-color: var(--gray-204); border-radius: 1rem; padding: 0.75rem 1.2rem; transition: opacity 250ms; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list p { font-size: 16px } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header .menu_header__right p { color: var(--black-0); } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header .menu_header__right i { color: var(--black-0); } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header .menu_header__right { display: flex; align-items: center; gap: 0.5rem; transition: color 250ms; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header .arrow { color: var(--red-1); opacity: 0; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header:hover .menu_header__right, .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header:hover .menu_header__right p, .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header:hover .menu_header__right i { color: var(--red-1); } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_header:hover .arrow { opacity: 1; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_list { display: flex; flex-direction: column; gap: 1.2rem; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_list .menu_list__item a { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-200); font-weight: 500; transition: color 250ms; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_menu .content_menu__list .menu_list .menu_list__item a:hover { color: var(--red-1); } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .product_conteiner { width: var(--width-35); display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; background-color: var(--white-0); border-radius: 1rem; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_banner { width: var(--width-15); border-radius: 1rem; overflow: hidden; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .content_banner img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .megamenu_container .megamenu_dropdown__item__container .megamenu_dropdown .megamenu_dropdown__item .megamenu_dropdown__item__menu__content .megamenu_dropdown__item__content .product_conteiner h3 { font-weight: 700 !important; color: var(--black-0); } /*********/ .dropdown_header__container { position: absolute; z-index: 10; top: 4rem; left: 0; width: 220px; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background-color: var(--white-0); border-radius: 0.5rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1); visibility: hidden; transform: translateY(-10px); opacity: 0; transition: opacity 250ms, transform 250ms, visibility 0ms 250ms; } .dropdown_header__container.opened { visibility: visible; transform: translateY(0); opacity: 1; transition: opacity 250ms, transform 250ms; } .dropdown_header__container .dropdown_header__menu { display: flex; flex-direction: column; gap: 1.3rem; } .dropdown_header__container .dropdown_header__menu__item a { display: flex; align-items: center; gap: 0.5rem; color: var(--black-200); transition: color 250ms; } .dropdown_header__container .dropdown_header__menu__item a:hover { color: var(--blue-3); } .dropdown_header__container .dropdown_header__menu__item a .icon { position: relative; width: 20px; display: flex; align-items: center; justify-content: center; } .dropdown_header__container .dropdown_header__menu__item a .icon i { font-size: 20px; } .dropdown_header__container .dropdown_header__menu__item a .icon.badge::after { content: " "; position: absolute; width: 7px; height: 7px; top: 0; right: 0; border-radius: 50%; background-color: var(--red-1); } .dropdown_header__container .dropdown_header__menu__item a p { width: calc(var(--width-100) - 0.5rem - 20px); } .cityfilter_container::after { content: " "; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: -10; opacity: 0; translate: opacity 350ms; } .cityfilter_container.opened::after { opacity: 1; z-index: 10; } .cityfilter_container.opened .cityfilter_main__container { visibility: visible; transform: translateY(0); } .cityfilter_container .cityfilter_main__container { position: fixed; inset: 0; z-index: 30; background-color: var(--white-0); display: flex; flex-direction: column; gap: 1rem; padding: 1rem; transform: translateY(-100vh); visibility: hidden; transition: all 300ms ease-in; } .cityfilter_container .cityfilter_main__container .cityfilter_header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0.5rem; } .cityfilter_container .cityfilter_main__container .cityfilter_search { padding-bottom: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .cityfilter_container .cityfilter_main__container .cityfilter_list { position: relative; display: flex; flex-direction: column; height: calc(100vh - 280px); overflow-y: auto; scrollbar-width: auto; scrollbar-color: var(--gray-213) var(--white-0); } .cityfilter_container .cityfilter_main__container .cityfilter_list::-webkit-scrollbar { width: 12px; } .cityfilter_container .cityfilter_main__container .cityfilter_list::-webkit-scrollbar-track { background: var(--white-0); } .cityfilter_container .cityfilter_main__container .cityfilter_list::-webkit-scrollbar-thumb { background-color: var(--gray-213); border-radius: 10px; border: 3px solid var(--white-0); } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .item_button { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--black-10); cursor: pointer; transition: color 250ms; } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .item_button:last-child { border-bottom-width: 0; } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .item_button:hover > i, .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .item_button:hover > p { color: var(--red-1); } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details { display: flex; flex-direction: column; gap: 0.5rem; position: fixed; bottom: 85px; left: 1rem; right: 1rem; height: calc(100vh - 280px); opacity: 0; visibility: hidden; transition: opacity 250ms, visiblity 0s 250ms; background-color: var(--white-0); } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details.opened { visibility: visible; opacity: 1; transition: opacity 250ms, visiblity 0s 250ms; } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .list_nav { background-color: var(--white-0); } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .list_nav .btn_close { display: flex; align-items: center; gap: 0.5rem; color: var(--red-1); padding: 0.5rem; } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .cityfilter_list__details__list { overflow-y: auto; scrollbar-width: auto; scrollbar-color: var(--gray-213) var(--white-0); } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .cityfilter_list__details__list::-webkit-scrollbar { width: 12px; } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .cityfilter_list__details__list::-webkit-scrollbar-track { background: var(--white-0); } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .cityfilter_list__details__list::-webkit-scrollbar-thumb { background-color: var(--gray-213); border-radius: 10px; border: 3px solid var(--white-0); } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .cityfilter_list__details__list .cityfilter_list__details__list_item { display: flex; align-items: center; justify-content: space-between; color: var(--gray-200); padding: 1rem 1.2rem; border-bottom: 1px solid var(--black-10); cursor: pointer; transition: color 250ms; } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .cityfilter_list__details__list .cityfilter_list__details__list_item:last-child { border-bottom-width: 0; } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details .cityfilter_list__details__list .cityfilter_list__details__list_item:hover { color: var(--red-1); } .cityfilter_container .cityfilter_main__container .cityfilter_footer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 756px) { .cityfilter_container .cityfilter_main__container { width: 556px; margin: 0 auto; top: 24px; bottom: 24px; border-radius: 1rem; } .cityfilter_container .cityfilter_main__container .cityfilter_list { height: calc(100vh - 328px); } .cityfilter_container .cityfilter_main__container .cityfilter_list .cityfilter_list__item .cityfilter_list__details { height: calc(100vh - 328px); } } .footer { position: relative; padding: 8rem 0.5rem 1rem; background-color: var(--light-red-color); margin-top: 7rem; } @media (max-width: 880px) { .footer { position: relative; padding: 8rem 0.5rem 1rem; background-color: var(--light-red-color); margin-top: 7rem; margin-bottom: 7rem; box-shadow: 2px 8px 60px 0px var(--yellow-4); } } .footer_head { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); width: var(--width-90); max-width: var(--width-max-width); margin: -12rem auto 0; padding: 1.5rem; background-color: var(--white-0); border-radius: 10px 30px 30px 30px; box-shadow: 0px 4px 60px 0px rgba(187, 105, 119, 0.3); } .footer_head .footer_head__item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; } .footer_head .footer_head__item .footer_head__item--icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 4px 20px 20px 20px; background: linear-gradient(0deg, var(--main-color) 0%, var(--main-color) 100%); -webkit-background: linear-gradient(0deg, var(--main-color) 0%, var(--main-color) 100%); -moz-background: linear-gradient(0deg, var(--main-color) 0%, var(--main-color) 100%); color: var(--white-0); } .footer_head .footer_head__item .footer_head__item--icon i { font-size: 30px; } .footer_head .footer_head__item .footer_head__item--icon svg { width: 30px; height: 30px; } .footer_head .footer_head__item .footer_head__item--text { display: flex; flex-direction: column; gap: 0.5rem; } .footer_head .footer_head__item .footer_head__item--text h4 { font-size: 0.95rem; font-weight: 600; } .footer_head .footer_head__item .footer_head__item--text p { font-size: 0.8rem; } @media (min-width: 881px) { .footer_head { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer_head .footer_head__item { border-left: 1px solid var(--gray-202); } .footer_head .footer_head__item:nth-child(3) { border-left-color: transparent; } } .footer_body { width: var(--width-90); max-width: var(--width-max-width); margin: 0 auto; padding: 2rem 0 1rem; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; } .footer_body .footer_body__start { display: flex; flex-direction: column; gap: 1rem; grid-column: span 1/span 1; } .footer_body .footer_body__start .footer_body__start--top { display: flex; align-items: center; justify-content: space-between; flex-direction: column; font-size: 1.2rem; } .footer_body .footer_body__start .footer_body__start--top .footer_body__start--social { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .footer_body .footer_body__start .footer_body__start--top .footer_body__start--social a { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; color: var(--red-1); } .footer_body .footer_body__start .footer_body__start--top .footer_body__start--social a i { font-size: 23px; } .footer_body .footer_body__start .footer_body__start--top .footer_body__start--social a svg { width: 45px; height: 45px; fill: var(--red-1); } .footer_body .footer_body__start .footer_body__start--desc { color: var(--black-204); text-align: justify; font-size: 0.9rem; line-height: 1.7rem; } .footer_body .footer_body__end { display: flex; flex-direction: column; gap: 1.25rem; padding: 0.75rem 0; } .footer_body .footer_body__end .footer_body__end--links { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.2rem; } .footer_body .footer_body__end .footer_body__end--links .footer_body__end--link { display: flex; flex-direction: column; gap: 0.5rem; } .footer_body .footer_body__end .footer_body__end--links .footer_body__end--link a { color: var(--gray-200); transition: all 350ms ease-in; } .footer_body .footer_body__end .footer_body__end--links .footer_body__end--link a:hover { text-decoration: underline; text-underline-offset: 0.5rem; } .footer_body .footer_body__end .footer_body__end--links .footer_body__end--link a img { width: 50px; margin: 0 auto; } @media (min-width: 756px) { .footer_body { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer_body .footer_body__start { grid-column: span 2/span 2; } .footer_body .footer_body__start .footer_body__start--top { flex-direction: row; } .footer_body .footer_body__end .footer_body__end--links { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 998px) { .footer_body { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .shoppingcard_footer__container--mobile { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; bottom: 0; right: 0; background-color: var(--white-0); padding: 1rem 0.75rem; } .shoppingcard_footer__container--mobile .price { font-size: 1.1rem; color: var(--green-6); font-weight: 500; } .shoppingcard_footer__container--mobile button { width: var(--width-50); } @media (min-width: 881px) { .shoppingcard_footer__container--mobile { display: none; } } .footer_mobile { position: fixed; background-color: var(--white-0); display: grid; gap: 0.5rem; grid-template-columns: repeat(5, minmax(0, 1fr)); box-shadow: 0 4px 40px rgba(0, 0, 0, 0.05); } .footer_mobile.solid { bottom: 0; left: 0; right: 0; border-radius: 0; padding: 0 0.75rem; } .footer_mobile.gap { display: grid; gap: 0.5rem; grid-template-columns: repeat(5, minmax(0, 1fr)); bottom: 1rem; left: 1rem; right: 1rem; border-radius: 0.5rem; padding: 0; } .footer_mobile .footer_mobile__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1.3rem 0.5rem; cursor: pointer; } .footer_mobile .footer_mobile__item.active--1 { color: var(--red-1); } .footer_mobile .footer_mobile__item.active--1::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: var(--width-100); height: 4px; border-radius: 2px 2px 0px 0px; background: var(--red-1); } .footer_mobile .footer_mobile__item.active--2 { color: var(--red-1); } .footer_mobile .footer_mobile__item.active--2::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: var(--width-100); height: 20px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='4' viewBox='0 0 33 4' fill='none'%3E%3Ccircle cx='16.5' cy='16.5' r='16.5' fill='%23E6123D'/%3E%3C/svg%3E"); background-size: 70%; background-position: center bottom; } .footer_mobile .footer_mobile__item.active--3 { background-color: var(--red-1); color: var(--white-0); } .footer_mobile .footer_mobile__item.square { justify-content: center; width: 64px; height: 64px; margin: 0 auto; background: var(--red-1); color: var(--white-0); transform: translateY(-30px); border-radius: 0.5rem; } .footer_mobile .footer_mobile__item.circle { justify-content: center; width: 64px; height: 64px; margin: 0 auto; background: var(--red-1); color: var(--white-0); transform: translateY(-30px); border-radius: 50%; } .footer_mobile .footer_mobile__item .footer_mobile__icon { position: relative; } .footer_mobile .footer_mobile__item .footer_mobile__icon svg { width: 25px; height: 25px; } .footer_mobile .footer_mobile__item .footer_mobile__icon i { font-size: 22px; } .footer_mobile .footer_mobile__item .footer_mobile__icon .icon_badge { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid var(--white-0); background: var(--red-1); color: var(--white-0); font-weight: 500; font-size: 13px; line-height: 0; } .footer_mobile .footer_mobile__item .footer_mobile__text { font-size: 0.8rem; font-weight: 500; } @media (min-width: 756px) { .footer_mobile { display: none; } } .section_container { width: var(--width-97); max-width: var(--width-max-width); margin: 0 auto; padding: 1rem 0.5rem; } @media (min-width: 881px) { .section_container { width: var(--width-90); } } .section_container--withside { width: var(--width-97); max-width: var(--width-max-width); margin: 0 auto; padding: 1rem 0.5rem; display: flex; justify-content: space-between; flex-direction: column; gap: 2rem; } .section_container--withside .section_aside { width: var(--width-100); display: flex; flex-direction: column; gap: 1rem; } .section_container--withside .section_main { width: var(--width-100); display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 881px) { .section_container--withside { width: var(--width-90); } } @media (min-width: 1024px) { .section_container--withside { flex-direction: row; } .section_container--withside .section_aside { width: var(--width-30); } .section_container--withside .section_main { width: var(--width-70); } } .section_withside { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; gap: 2rem; } .section_withside .section_aside, .section_withside .section_main { width: var(--width-100); display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 980px) { .section_withside { flex-direction: row; } .section_withside .section_aside { width: var(--width-30); } .section_withside .section_main { width: var(--width-70); } } .sticky_side { position: sticky; top: 1rem; align-self: flex-start; } .container_fixed { width: var(--width-90); max-width: var(--width-max-width); margin: 0 auto; } .blog_header { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); gap: 1.5rem; } .blog_header .post_card--1:nth-child(1) { grid-row: span 1/span 1; height: auto; } @media (min-width: 881px) { .blog_header { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .blog_header .post_card--1:nth-child(1) { grid-row: span 2/span 2; height: 100%; } } .section_head { width: var(--width-100); display: flex; align-items: center; gap: 0.5rem; color: var(--black-201); } .section_head i { font-size: 20px; } .section_head svg { width: 25px; height: 25px; } .section_head hr { flex-grow: 1; } .items_container--2 { box-sizing: border-box; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 881px) { .items_container--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .items_container--2__nowrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .items_container--3 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 980px) { .items_container--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .items_container--4 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 756px) { .items_container--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .items_container--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .items_container--withside { display: flex; flex-direction: column; gap: 1.5rem; } .items_container--withside .section_side { width: var(--width-100); } .items_container--withside .section_main { width: var(--width-100); } @media (min-width: 881px) { .items_container--withside { flex-direction: row; } .items_container--withside .section_side { width: var(--width-25); } .items_container--withside .section_main { width: var(--width-75); } } .items_container--5 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 420px) { .items_container--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 657px) { .items_container--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 881px) { .items_container--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .items_container--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .list_separate__vertical { display: flex; flex-direction: column; } .list_separate__vertical.line .item { border-bottom: 1px solid var(--black-10); } .list_separate__vertical.line .item:last-child { border-bottom-width: 0; } .list_separate__vertical .item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; } .list_separate__vertical .item svg { width: 20px; height: 20px; color: var(--gray-211); } .list_separate__vertical .item p { width: calc(100% - 20px - 0.5rem); color: var(--gray-201); } .list_separate__vertical .item p .dark { color: var(--black-202); font-weight: 500; } .item_container--5__separate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .item_container--5__separate .item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem 0.5rem; border-left: 1px solid var(--black-10); border-bottom: 1px solid var(--black-10); } .item_container--5__separate .item:nth-child(2n) { border-left-width: 0; } .item_container--5__separate .item:last-child { border-left-width: 0; border-bottom-width: 0; grid-column: span 2/span 2; } @media (min-width: 756px) { .item_container--5__separate .item { border-bottom-width: 0; } .item_container--5__separate .item:last-child { grid-column: span 1/span 1; } } @media (min-width: 980px) { .item_container--5__separate { grid-template-columns: repeat(5, minmax(0, 1fr)); } .item_container--5__separate .item { border-left: 1px solid var(--black-10); } .item_container--5__separate .item:nth-child(2n) { border-left-width: 1px; } .item_container--5__separate .item:last-child { border-left-width: 0; } } .text_with__icon { display: flex; align-items: center; gap: 0.5rem; } .text_with__icon svg { width: 18px; height: 18px; } .text_with__icon i { width: 18px; font-size: 18px; } .text_with__icon p { width: calc(var(--width-100) - 18px - 0.5rem); } .gap-y { display: flex; flex-direction: column; row-gap: 0.5rem; } .gap-y-2 { display: flex; flex-direction: column; row-gap: 1rem; } .gap-y-3 { display: flex; flex-direction: column; row-gap: 1.5rem; } .gap-y-4 { display: flex; flex-direction: column; row-gap: 2rem; } .gap-y-5 { display: flex; flex-direction: column; row-gap: 2.5rem; } .gap-y-6 { display: flex; flex-direction: column; row-gap: 3rem; } .gap-x { display: flex; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .gap-x-2 { display: flex; align-items: center; -moz-column-gap: 1rem; column-gap: 1rem; } .gap-x-3 { display: flex; align-items: center; -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .gap-x-4 { display: flex; align-items: center; -moz-column-gap: 2rem; column-gap: 2rem; } .gap-x-wrap { display: flex; flex-wrap: wrap; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .gap-x-2-wrap { display: flex; flex-wrap: wrap; align-items: center; -moz-column-gap: 1rem; column-gap: 1rem; } .gap-x-3-wrap { display: flex; flex-wrap: wrap; align-items: center; -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .gap-x-4-wrap { display: flex; flex-wrap: wrap; align-items: center; -moz-column-gap: 2rem; column-gap: 2rem; } .gap { display: flex; align-items: center; gap: 0.5rem; } .gap-2 { display: flex; align-items: center; gap: 1rem; } .gap-3 { display: flex; align-items: center; gap: 1.5rem; } .gap-4 { display: flex; align-items: center; gap: 2rem; } .gap-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .gap-2-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; } .gap-3-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .gap-4-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; } .all_center { display: flex; align-items: center; justify-content: center; } .all_center__column { display: flex; flex-direction: column; align-items: center; justify-content: center; } .space_between { display: flex; align-items: center; justify-content: space-between; } .space_between--wrap_gap { display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; } @media (min-width: 980px) { .space_between--wrap_gap { flex-direction: row; } } .justify_start { display: flex; align-items: center; justify-content: flex-start; } .justify_center { display: flex; align-items: center; justify-content: center; } .justify_end { display: flex; align-items: center; justify-content: flex-end; } .w-full { width: var(--width-100); } .items_start { display: flex; align-items: start; } .items_center { display: flex; align-items: center; } .items_end { display: flex; align-items: end; } .lg_block { display: none; } @media (min-width: 998px) { .lg_block { display: block; } } .lg_flex { display: none; } @media (min-width: 998px) { .lg_flex { display: flex; } } .lg_hidden { display: block; } @media (min-width: 998px) { .lg_hidden { display: none; } } .p { padding: 0.5rem; } .p-2 { padding: 1rem; } .p-3 { padding: 1.5rem; } .p-4 { padding: 2rem; } .pt { padding-top: 0.5rem; } .pt-2 { padding-top: 1rem; } .pt-3 { padding-top: 1.5rem; } .pt-4 { padding-top: 2rem; } .pb { padding-bottom: 0.5rem; } .pb-2 { padding-bottom: 1rem; } .pb-3 { padding-bottom: 1.5rem; } .pb-4 { padding-bottom: 2rem; } .py { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2 { padding-top: 1rem; padding-bottom: 1rem; } .py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-4 { padding-top: 2rem; padding-bottom: 2rem; } .px { padding-left: 0.5rem; padding-right: 0.5rem; } .px-2 { padding-left: 1rem; padding-right: 1rem; } .px-3 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-4 { padding-left: 2rem; padding-right: 2rem; } .text_side__button { display: flex; flex-direction: row; gap: 0.75rem; } .text_side__button > p { flex: calc(100% - 300px - 0.75rem); } .text_side__button > button { flex: 250px; } @media (max-width: 556px) { .text_side__button { flex-direction: column; } .text_side__button > p, .text_side__button > button { flex: 100%; } } .post_header__section { width: var(--width-90); max-width: var(--width-width2); margin: 0 auto; padding: 1rem 0.5rem; } .post_header { position: relative; height: 500px; } .post_header .post_header__cover { border-radius: 1rem; width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; filter: blur(6.5px) grayscale(1); -webkit-filter: blur(6.5px) grayscale(1); } .post_header .post_header__container { position: absolute; inset: 0; width: var(--width-100); padding: 0.75rem 1rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.7); border-radius: 20px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%); } .post_header .post_header__container .post_title__box { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; color: var(--white-0); } .post_header .post_header__container .post_title__box .post_title__text { font-size: 1.1rem; font-weight: 600; } .post_header .post_header__container .post_title__box .post_title__icons { width: var(--width-100); display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .post_header .post_header__container .post_title__box .post_title__icons a, .post_header .post_header__container .post_title__box .post_title__icons button { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; color: var(--white-0); background-color: transparent; transition: color 250ms ease-in; } .post_header .post_header__container .post_title__box .post_title__icons a:hover, .post_header .post_header__container .post_title__box .post_title__icons button:hover { color: var(--red-1); } .post_header .post_header__container .post_title__box .post_title__icons a i, .post_header .post_header__container .post_title__box .post_title__icons button i { font-size: 24px; } .post_header .post_header__container .post_title__box .post_title__icons a svg, .post_header .post_header__container .post_title__box .post_title__icons button svg { width: 25px; height: 25px; color: inherit; } .post_header .post_header__container .post_header__image { border-radius: 1rem; overflow: hidden; width: var(--width-100); height: 250px; } .post_header .post_header__container .post_header__image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .post_header .post_header__container .post_desc__card { width: var(--width-100); overflow: hidden; border-radius: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.1); } .post_header .post_header__container .post_desc__card .post_desc__item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .post_header .post_header__container .post_desc__card .post_desc__item:last-child { border-bottom-color: transparent; } .post_header .post_header__container .post_desc__card .post_desc__item .post_desc__item--start { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-202); } .post_header .post_header__container .post_desc__card .post_desc__item .post_desc__item--start svg { width: 25px; height: 25px; color: inherit; } .post_header .post_header__container .post_desc__card .post_desc__item .post_desc__item--start i { font-size: 18px; } .post_header .post_header__container .post_desc__card .post_desc__item .post_desc__item--start p { color: inherit; font-size: 13px; font-weight: 400; } .post_header .post_header__container .post_desc__card .post_desc__item .post_desc__item--end { color: var(--white-0); font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; } @media (min-width: 980px) { .post_header { height: 300px; } .post_header .post_header__container { padding: 2rem; } .post_header .post_header__container .post_header__image { height: 350px; } .post_header .post_header__container .post_title__box { flex-direction: row; } .post_header .post_header__container .post_title__box .post_title__icons { width: auto; } } .post_main { margin-top: 150px; } .post_main .psot_body p { font-weight: 400; color: var(--black-201); line-height: 27px; } @media (min-width: 980px) { .post_main { margin-top: 130px; } } .comment_card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--black-10); } .comment_card .comment_card__head { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; gap: 49px; border-radius: 0.5rem; background: var(--gray-205); font-size: 0.85rem; } @media (min-width: 360px) { .comment_card .comment_card__head { flex-direction: row; } } .comment_card .comment_card__text { color: var(--black-201); text-align: justify; font-size: 0.9rem; font-weight: 400; line-height: 1.7rem; } .comment_card .comment_card__action { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem; color: var(--gray-200); font-size: 0.9rem; cursor: pointer; } .comment_card .comment_card__action svg { width: 20px; height: 20px; } .comment_review__container { display: flex; flex-direction: column; gap: 0.75rem; } .comment_review__container .comment_review__item { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--black-10); } .comment_review__container .comment_review__item .comment_card__head { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; gap: 49px; border-radius: 0.5rem; background: var(--gray-205); font-size: 0.85rem; } .comment_review__container .comment_review__item .comment_card__head .right { display: flex; align-items: center; gap: 0.5rem; } .comment_review__container .comment_review__item .comment_card__head .right .badge { background-color: var(--black-10); color: var(--gray-200); font-size: 0.8rem; padding: 0.25rem 0.5rem; border-radisu: 0.5rem; } @media (min-width: 360px) { .comment_review__container .comment_review__item .comment_card__head { flex-direction: row; } .comment_review__container .comment_review__item .comment_card__head > p { width: auto; } } .comment_review__container .comment_review__item .comment_card__title { display: flex; align-items: center; gap: 0.75rem; } .comment_review__container .comment_review__item .comment_card__title .comment_card__rating { display: flex; align-items: center; gap: 0.5rem; border-radius: 0.5rem; color: var(--white-0); padding: 0.25rem 0.5rem; } .comment_review__container .comment_review__item .comment_card__title .comment_card__rating i { font-size: 18px; } .comment_review__container .comment_review__item .comment_card__title .comment_card__rating p { padding-top: 3px; } .comment_review__container .comment_review__item .comment_card__title .comment_card__rating.five { background-color: var(--green-4); } .comment_review__container .comment_review__item .comment_card__text { color: var(--black-201); text-align: justify; font-size: 0.9rem; font-weight: 400; line-height: 1.7rem; } .comment_review__container .comment_review__item .comment_review__images { display: flex; flex-wrap: wrap; gap: 0.75rem; } .comment_review__container .comment_review__item .comment_review__images .comment_review__image { width: 60px; height: 60px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } .comment_review__container .comment_review__item .comment_review__images .comment_review__image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .comment_review__container .comment_review__item .comment_review__bottom { display: none; align-items: center; justify-content: flex-end; gap: 1rem; } .comment_review__container .comment_review__item .comment_review__bottom .line_vertical { width: 2px; height: 20px; background-color: var(--black-10); } .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-200); } .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container > p { font-size: 0.8rem; padding-left: 0.5rem; } .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container .line_vertical { width: 2px; height: 10px; background-color: var(--black-10); } .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container .like_button, .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container .dislike_button { display: flex; align-items: center; gap: 0.2rem; } .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container .like_button > p, .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container .dislike_button > p { font-size: 0.75rem; } .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container .like_button i, .comment_review__container .comment_review__item .comment_review__bottom .like_dislike__container .dislike_button i { font-size: 14px; } .comment_review__container .comment_review__item .comment_card__action { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem; color: var(--gray-200); font-size: 0.9rem; cursor: pointer; } .comment_review__container .comment_review__item .comment_card__action svg { width: 20px; height: 20px; } @media (min-width: 756px) { .comment_review__container .comment_review__item .comment_review__bottom { display: flex; } } .nocontent_section { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1rem; } .nocontent_section .nocontent_section__image { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; background-color: var(--black-10); border-radius: 50%; margin-bottom: 1rem; } .nocontent_section .nocontent_section__image img { width: 130px; } .nocontent_section .nocontent_section__title { color: var(--black-201); font-weight: 500; font-size: 1rem; } .nocontent_section .nocontent_section__desc { color: var(--gray-211); font-size: 0.9rem; } .shoppingcard_item { display: flex; gap: 1rem; } .shoppingcard_item .shoppingcard_item__image { display: flex; align-items: center; justify-content: center; width: 100px; max-height: 100px; border-radius: 0.5rem; } .shoppingcard_item .shoppingcard_item__image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .shoppingcard_item .shoppingcard_item__desc { width: calc(var(--width-100) - 1rem - 100px); display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; } .shoppingcard_offer__green { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; gap: 1rem; border-radius: 0.5rem; background: var(--gray-212); color: var(--green-6); font-weight: 500; } .shoppingcard_next__container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 360px) { .shoppingcard_next__container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 556px) { .shoppingcard_next__container { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 765px) { .shoppingcard_next__container { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 881px) { .shoppingcard_next__container { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 998px) { .shoppingcard_next__container { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .paymentstatus_container { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1rem; } .paymentstatus_container img { width: var(--width-90); max-width: 300px; } .paymentstatus_container button { width: 170px; } .notfound_container { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1rem 3rem; margin: 1rem 0; gap: 2rem; } .notfound_container img { width: var(--width-100); max-width: 738px; } .notfound_container p { font-size: 1.5rem; color: var(--black-201); } .map_container { overflow: hidden; width: var(--width-100); height: 250px; border-radius: 1rem; } .map_container #map { height: 250px; } .map_container img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .login_background { position: relative; } .login_background::after { content: ""; position: absolute; left: 0; top: 0; right: 0; z-index: -1; width: var(--width-100); height: 100vh; background-image: url("../../../public/images/login-background.png"); background-size: 100% 50%; background-position: top center; } .login_container { display: flex; flex-direction: column; gap: 1.5rem; width: var(--width-95); max-width: 450px; padding: 1rem; } @media (min-width: 556px) { .login_container { padding: 6rem 1rem; } } .filter_container { display: flex; flex-direction: column; gap: 2.5rem; width: var(--width-90); max-width: var(--width-max-width); margin: 0 auto; padding: 1rem 0.5rem; } .filter_container .filter_container__products { width: var(--width-100); display: flex; flex-direction: column; gap: 1rem; } .filter_container .filter_container__side { width: var(--width-100); height: 100vh; position: fixed; z-index: -20; inset: 0; display: flex; flex-direction: column; background-color: var(--white-0); padding: 0 0.75rem; transform: translateY(100vh); visibility: hidden; transition: transform 250ms ease-in, z-index 0s 250ms, visibility 0s 250ms; } .filter_container .filter_container__side > * { flex-wrap: nowrap; white-space: nowrap; } .filter_container .filter_container__side .filter_container__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--black-10); } .filter_container .filter_container__side .filter_container__header .header_title { display: flex; align-items: center; gap: 0.5rem; transform-origin: right; transition: transform 250ms; } .filter_container .filter_container__side .filter_container__header .header_title p { font-weight: 400; color: var(--black-0); font-size: 0.9rem; } .filter_container .filter_container__side .filter_container__header .btn_clear__filter { display: none; color: var(--red-1); } .filter_container .filter_container__side .filter_container__header .btn_close { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; font-size: 1.15rem; background-color: var(--red-1); border-radius: 50%; color: var(--white-0); cursor: pointer; } .filter_container .filter_container__side .filter_container__body { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .filter_container .filter_container__side .filter_container__body::-webkit-scrollbar { display: none; /* Hide scrollbars */ } .filter_container .filter_container__side .num_of__filter { display: flex; gap: 0.5rem; } .filter_container .filter_container__side .active_filter__container { display: flex; flex-direction: column; gap: 0.75rem; } .filter_container .filter_container__side .active_filter__container .active_filter__header { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; } .filter_container .filter_container__side .active_filter__container .active_filters { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filter_container .filter_container__side .active_filter__container .btn_delete__filter { font-size: 0.8rem; background-color: var(--red-10); color: var(--red-4); border-radius: 5px; padding: 0.3rem 0.5rem; } .filter_container .filter_container__side .filter_side__button { display: none; position: absolute; left: -30px; top: 30px; width: 30px; height: 112px; display: flex; align-items: center; justify-content: center; color: var(--gray-200); background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='112' viewBox='0 0 30 112' fill='none'%3E %3Cpath d='M30 56C30 86.928 30 112 30 112C30 92 0 86.928 0 56C0 25.0721 30 20 30 0C30 0 30 25.0721 30 56Z' fill='white'/%3E%3C/svg%3E"); } .filter_container .filter_container__side .filter_side__button i { color: var(--black-201); font-size: 20px; transform: rotate(180deg); transition: transform 250ms; } .filter_container .filter_container__side .filter_side__button svg { width: 25px; height: 25px; } .filter_container .filter_container__side .filter_side__button:hover i { color: var(--red-1); } .filter_container .filter_container__side .filter_mobile__border { border: 1px solid var(--black-10); border-radius: 1rem; padding: 16px; } .filter_container .filter_container__side .filter_input__container { display: flex; flex-direction: column; gap: 0.75rem; width: var(--width-100); } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container { max-height: 300px; overflow-y: auto; } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item .filter_checkbox { display: flex; align-items: center; gap: 0.5rem; } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item .filter_checkbox label { display: flex; align-items: center; gap: 0.5rem; } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item .filter_checkbox .checkbox_box { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--gray-202); border-radius: 4px; } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item .filter_checkbox .checkbox_box.red { background-color: var(--red-2); } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item .filter_checkbox .checkbox_box.green { background-color: var(--green-5); } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item .filter_checkbox .checkbox_box.orange { background-color: var(--orange-1); } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item .filter_checkbox .checkbox_box.purple { background-color: var(--purple-1); } .filter_container .filter_container__side .filter_input__container .filter_checkbox__container .filter_checkbox__item .filter_checkbox__num { display: flex; align-items: center; justify-content: center; height: 24px; min-width: 24px; background-color: var(--gray-204); color: var(--black-200); text-align: center; } .filter_container .filter_container__side.opened { transform: translateY(0); visibility: visible; z-index: 10; transition: transform 250ms ease-in; } .filter_container .sort_menu__container { width: var(--width-100); height: 100vh; position: fixed; z-index: -20; inset: 0; display: flex; flex-direction: column; background-color: var(--white-0); padding: 0 0.75rem; transform: translateY(100vh); visibility: hidden; transition: transform 250ms ease-in, z-index 0s 250ms, visibility 0s 250ms; } .filter_container .sort_menu__container .sort_menu__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--black-10); } .filter_container .sort_menu__container .sort_menu__header .header_title { display: flex; align-items: center; gap: 0.5rem; } .filter_container .sort_menu__container .sort_menu__header .header_title i { font-size: 20px; } .filter_container .sort_menu__container .sort_menu__header .header_title p { font-weight: 400; color: var(--black-0); font-size: 1rem; } .filter_container .sort_menu__container .sort_menu__header .btn_close { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; font-size: 1.15rem; background-color: var(--red-1); border-radius: 50%; color: var(--white-0); cursor: pointer; } .filter_container .sort_menu__container .sort_menu__content { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; height: calc(100vh - 80px); overflow-y: auto; } .filter_container .sort_menu__container.opened { transform: translateY(0); visibility: visible; z-index: 10; transition: transform 250ms ease-in; } @media (min-width: 998px) { .filter_container { flex-direction: row; align-items: flex-start; } .filter_container .sort_menu__container { display: none; } .filter_container .filter_container__side { gap: 1rem; position: relative; z-index: 5; padding: 1rem; border-radius: 1rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); min-height: 400px; height: auto; transform: translateY(0); visibility: visible; width: 40px; transition: width 250ms, min-height 250ms; } .filter_container .filter_container__side .filter_container__header { padding: 0; border-bottom-width: 0; } .filter_container .filter_container__side .filter_container__header .header_title { transform: rotate(-90deg); } .filter_container .filter_container__side .filter_container__header .btn_close, .filter_container .filter_container__side .filter_container__header .btn_clear__filter { display: none; } .filter_container .filter_container__side .filter_container__body { display: none; height: auto; } .filter_container .filter_container__side .filter_container__body .num_of__filter, .filter_container .filter_container__side .filter_container__body .active_filter__container { display: none; } .filter_container .filter_container__side .filter_mobile__border { border: none; padding: 0; } .filter_container .filter_container__side.opened { width: 370px; z-index: 0; transition: width 250ms; } .filter_container .filter_container__side.opened .filter_container__header .header_title { transform: rotate(0deg); } .filter_container .filter_container__side.opened .filter_container__header .btn_clear__filter { display: flex; } .filter_container .filter_container__side.opened .filter_container__body { display: flex; } .filter_container .filter_container__side.opened .filter_side__button i { transform: rotate(0deg); } .filter_container .filter_container__product { flex-grow: 1; } } .category_product__header { width: var(--width-100); display: flex; align-items: center; gap: 0.5rem; } .category_product__header .filter_product__button--mobile { width: 25%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 1rem; padding: 1rem 0.5rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .category_product__header .filter_product__button--mobile p { font-size: 0.8rem; } .category_product__header .filter_product__button--mobile svg { width: 20px; height: 20px; } .category_product__header .category_product__mobile { width: 75%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 1rem; padding: 1rem 0.5rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .category_product__header .category_product__mobile p { font-size: 0.8rem; } .category_product__header .category_product__mobile .sort_product__button--mobile { color: var(--black-0); } .category_product__header .category_product__mobile .sort_product__button--mobile p { font-weight: 600; } .category_product__header .category_product__section { width: var(--width-100); display: none; align-items: center; justify-content: space-between; gap: 0.5rem; border-radius: 1rem; padding: 1.5rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .category_product__header .category_product__section .category_product__section--right { display: flex; align-items: center; gap: 0.5rem; } .category_product__header .category_product__section .category_product__section--right .btn_category { display: flex; align-items: center; justify-content: center; padding: 0.3rem 0.5rem; border-radius: 5px; background-color: transparent; cursor: pointer; transition: background 250ms; } .category_product__header .category_product__section .category_product__section--right .btn_category:hover { background-color: var(--gray-204); } .category_product__header .category_product__section .category_product__section--right .btn_category.active { color: var(--white-0); background-color: var(--red-1); } @media (min-width: 998px) { .category_product__header .filter_product__button--mobile { display: none; } .category_product__header .category_product__mobile { display: none; } .category_product__header .category_product__section { display: flex; } } .search_filter__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; } .search_filter__head p { font-size: 0.85rem; } .search_filter__head hr { flex-grow: 1; } .search_filter__head .btn_gray { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: var(--gray-204); color: var(--gray-201); } .search_filter__head .btn_gray svg { width: 20px; height: 20px; } .search_filter__head .btn_gray i { font-size: 16px; } .product_container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 556px) { .product_container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .product_container { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .product_container { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .product_container.unfill { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .seller_info__container { display: flex; flex-direction: column; border-radius: 1rem; padding: 1.5rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .seller_info__container .seller_info__item { border-bottom: 1px solid var(--black-10); border-left: none; width: var(--width-100); } .seller_info__container .seller_info__item:nth-child(1) { padding: 0 0 1rem; } .seller_info__container .seller_info__item:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left-width: 0; border-bottom-width: 0; } .seller_info__container .seller_info__item:last-child .item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; border-left: 1px solid var(--black-10); border-bottom: 1px solid var(--black-10); } .seller_info__container .seller_info__item:last-child .item:first-child { padding: 1rem 0; } .seller_info__container .seller_info__item:last-child .item:nth-child(2) { padding: 1rem 0; border-left-width: 0; } .seller_info__container .seller_info__item:last-child .item:last-child { display: flex; flex-direction: row; align-items: center; justify-content: center; padding-top: 1rem; grid-column: span 2/span 2; border-left-width: 0; border-bottom-width: 0; cursor: pointer; } .seller_info__container .seller_info__item:last-child .item:last-child i { font-size: 20px; color: var(--red-1); } @media (min-width: 881px) { .seller_info__container .seller_info__item:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)); } .seller_info__container .seller_info__item:last-child:nth-child(1) { padding: 0; } .seller_info__container .seller_info__item:last-child .item { border-bottom-width: 0 !important; padding: 0.5rem !important; } .seller_info__container .seller_info__item:last-child .item:nth-child(2) { border-left-width: 1px; } .seller_info__container .seller_info__item:last-child .item:last-child { padding: 0; flex-direction: column; grid-column: span 1/span 1; } } @media (min-width: 881px) { .seller_info__container { padding: 0.75rem 1.5rem 0.75rem 0; flex-direction: row; } .seller_info__container .seller_info__item { border-bottom: none; border-left: 1px solid var(--black-10); grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.5rem; } .seller_info__container .seller_info__item:first-child { width: 25%; padding: 0.5rem; } .seller_info__container .seller_info__item:nth-child(2) { width: 40%; padding: 0.5rem 1.3rem; } .seller_info__container .seller_info__item:last-child { width: 35%; } } .btn_showmore { position: relative; z-index: 1; display: flex; align-items: center; height: 42px; overflow: hidden; padding: 0 1rem; gap: 1.5rem; transition: color 250ms; } .btn_showmore > * { position: relative; z-index: 3; } .btn_showmore::after { content: " "; position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; width: 42px; height: 42px; border-radius: 50px; background-color: var(--main-color); transition: width 250ms; } .btn_showmore .icon { color: var(--white-0); } .btn_showmore:hover { color: var(--white-0); } .btn_showmore:hover::after { width: var(--width-100); } .blog_slider .slider_tabbar__container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: var(--width-100); } .blog_slider .slider_tabbar__container .text_head { display: flex; align-items: center; gap: 0.75rem; color: var(--gray-200); font-size: 1.1rem; } .blog_slider .slider_tabbar__container .text_head i { font-size: 20px; } .blog_slider .slider_tabbar__container .text_head .bold { color: var(--red-1); font-weight: 600; } .blog_slider .slider_tabbar__container .slider_tabbar__buttons { position: relative; display: none; background-color: var(--gray-204); padding: 0.5rem 0.75rem; border-radius: 0.5rem 0.5rem 0 0; } .blog_slider .slider_tabbar__container .slider_tabbar__buttons::before { content: " "; position: absolute; bottom: 0; right: -10px; width: 10px; height: 10px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 -4.37114e-07C-2.41411e-07 5.52285 4.47715 10 10 10L-4.37114e-07 10L0 -4.37114e-07Z" fill="%23F2F2F2"/></svg>'); background-size: 100% 100%; background-position: center; } .blog_slider .slider_tabbar__container .slider_tabbar__buttons::after { content: " "; position: absolute; bottom: 0; left: -10px; width: 10px; height: 10px; transform: rotate(-90deg); background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 -4.37114e-07C-2.41411e-07 5.52285 4.47715 10 10 10L-4.37114e-07 10L0 -4.37114e-07Z" fill="%23F2F2F2"/></svg>'); background-size: 100% 100%; background-position: center; } .blog_slider .slider_tabbar__container .slider_tabbar__buttons .slider_tabbar__button { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background-color: transparent; color: var(--gray-200); cursor: pointer; transition: background 250ms, color 250ms; } .blog_slider .slider_tabbar__container .slider_tabbar__buttons .slider_tabbar__button.active { background-color: var(--main-color); color: var(--white-0); border-radius: 1rem 1rem 0 0; } @media (min-width: 881px) { .blog_slider .slider_tabbar__container { display: flex; align-items: center; justify-content: space-between; } .blog_slider .slider_tabbar__container .slider_tabbar__buttons { display: flex; } .blog_slider .slider_tabbar__container .slider_tabbar__buttons--mobile { display: none; } } .blog_slider .blog_slider__content { display: none; padding: 1rem 1rem 0.25rem; border-radius: 1rem; background-color: var(--gray-204); } .blog_slider .blog_slider__content.show { display: block; animation: fade-in 500ms ease-in-out forwards; } @keyframes fade-in { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .blog_slider.type_two .slider_tabbar__container { display: flex; justify-content: space-between; gap: 1rem; } .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right { display: flex; background-color: var(--main-color); border-radius: 100px; } .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right .text_head { padding: 0 0.75rem; } .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right .text_head i { color: var(--white-0); } .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right .text_head p { color: var(--black-0); font-weight: 600; } .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right .text_head p .bold { color: var(--white-0); } .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right .slider_tabbar__buttons { border-radius: 100px; padding: 0.5rem; } .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right .slider_tabbar__buttons::after, .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right .slider_tabbar__buttons::before { display: none; } .blog_slider.type_two .slider_tabbar__container .slider_tabbar__right .slider_tabbar__buttons .slider_tabbar__button { border-radius: 100px; } .blog_slider.type_two .blog_slider__content { margin-top: 1rem; background-color: transparent; } .blog_slider.type_three .slider_tabbar__container .slider_tabbar__buttons { padding-bottom: 0; } .blog_slider.type_three .slider_tabbar__container .slider_tabbar__buttons .slider_tabbar__button { position: relative; } .blog_slider.type_three .slider_tabbar__container .slider_tabbar__buttons .slider_tabbar__button::before { content: " "; position: absolute; display: none; bottom: 0; right: -10px; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 16C7.16344 16 0 8.83656 0 0V16H16Z' fill='%23E6123D'/%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; } .blog_slider.type_three .slider_tabbar__container .slider_tabbar__buttons .slider_tabbar__button::after { content: " "; position: absolute; display: none; bottom: 0; left: -10px; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 16C8.83656 16 16 8.83656 16 0V16H0Z' fill='%23E6123D'/%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; } .blog_slider.type_three .slider_tabbar__container .slider_tabbar__buttons .slider_tabbar__button.active::before, .blog_slider.type_three .slider_tabbar__container .slider_tabbar__buttons .slider_tabbar__button.active::after { display: block; } .blog_slider.type_three .blog_slider__content { background-color: var(--main-color); padding: 1rem; } .blog_slider__withside { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; gap: 2rem; } .blog_slider__withside .blog_slider__side { width: var(--width-100);; display: flex; flex-direction: column; gap: 1rem; } .blog_slider__withside .blog_slider__side .head { display: flex; align-items: center; gap: 0.75rem; color: var(--gray-200); font-size: 1.1rem; } .blog_slider__withside .blog_slider__side .head i { font-size: 20px; } .blog_slider__withside .blog_slider__side .head .bold { color: var(--red-1); font-weight: 600; } .blog_slider__withside .blog_slider__side .menu { position: relative; display: flex; flex-direction: column; background-color: var(--gray-204); padding: 1rem 0.75rem; gap: 0.5rem; } .blog_slider__withside .blog_slider__side .menu::after { content: " "; position: absolute; bottom: -10px; left: 0; width: 10px; height: 10px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C-2.41411e-07 4.47715 4.47715 2.41411e-07 10 0L-4.37114e-07 4.37114e-07L0 10Z" fill="%23F2F2F2"/></svg>'); background-size: 100% 100%; background-position: bottom right; } .blog_slider__withside .blog_slider__side .menu .menu_item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; color: var(--gray-200); border-radius: 0.5rem; transition: color 250ms, background 250ms; } .blog_slider__withside .blog_slider__side .menu .menu_item__right { display: flex; align-items: center; gap: 0.5rem; } .blog_slider__withside .blog_slider__side .menu .menu_item .icon { opacity: 0; transition: opacity 250ms; } .blog_slider__withside .blog_slider__side .menu .menu_item.active { background-color: var(--main-color); color: var(--white-0); } .blog_slider__withside .blog_slider__side .menu .menu_item.active .icon { opacity: 1; } .blog_slider__withside .blog_slider__side .menu .menu_item:hover { background-color: var(--main-color); color: var(--white-0); } .blog_slider__withside .blog_slider__side .menu .menu_item:hover .icon { opacity: 1; } .blog_slider__withside .blog_slider__container { width: var(--width-100);; } .blog_slider__withside .blog_slider__container .blog_slider__main { display: none; } .blog_slider__withside .blog_slider__container .blog_slider__main.show { display: block; animation: fade-in 500ms ease-in-out forwards; } @keyframes fade-in { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .blog_slider__withside.type_two .blog_slider__side { position: relative; z-index: 1; gap: 0; } .blog_slider__withside.type_two .blog_slider__side .head { position: relative; z-index: 1; padding: 0.75rem 1rem; border-radius: 1rem 1rem 0 0; background-color: var(--main-color); color: var(--white-0); } .blog_slider__withside.type_two .blog_slider__side .head::before { content: ""; position: absolute; z-index: -1; width: var(--width-100); height: 30px; bottom: -30px; left: 0; right: 0; background-color: var(--main-color); } .blog_slider__withside.type_two .blog_slider__side .head i { color: var(--white-0); } .blog_slider__withside.type_two .blog_slider__side .head p { color: var(--black-0); font-weight: 600; } .blog_slider__withside.type_two .blog_slider__side .head .bold { color: var(--white-0); } .blog_slider__withside.type_two .blog_slider__side .menu { position: relative; z-index: 3; border-radius: 1rem; } .blog_slider__withside.type_three { gap: 1rem; } .blog_slider__withside.type_three .blog_slider__side .menu { padding-left: 0; } .blog_slider__withside.type_three .blog_slider__side .menu .menu_item { position: relative; border-radius: 0 0.5rem 0.5rem 0; } .blog_slider__withside.type_three .blog_slider__side .menu .menu_item::before { content: " "; position: absolute; opacity: 0; top: -12px; left: 0; width: 12px; height: 12px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 -5.24537e-07C0.00261278 6.62787 5.37419 12 12 12L-5.24537e-07 12L0 -5.24537e-07Z" fill="%23E6123D"/></svg>'); background-size: 100% 100%; background-position: center; transition: opacity 250ms; } .blog_slider__withside.type_three .blog_slider__side .menu .menu_item::after { content: " "; position: absolute; opacity: 0; left: 0; bottom: -12px; width: 12px; height: 12px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37258 0 0 5.37258 0 12V0H12Z" fill="%23E6123D"/></svg>'); background-size: 100% 100%; background-position: center; transition: opacity 250ms; } .blog_slider__withside.type_three .blog_slider__side .menu .menu_item.active::before, .blog_slider__withside.type_three .blog_slider__side .menu .menu_item.active::after, .blog_slider__withside.type_three .blog_slider__side .menu .menu_item:hover::before, .blog_slider__withside.type_three .blog_slider__side .menu .menu_item:hover::after { opacity: 1; } .blog_slider__withside.type_three .blog_slider__main { background-color: var(--main-color); padding: 1rem; border-radius: 1rem; } @media (min-width: 980px) { .blog_slider__withside { flex-direction: row; } .blog_slider__withside .blog_slider__side { width: 30%; } .blog_slider__withside .blog_slider__container { width: 70%; } .blog_slider__withside.type_three { gap: 0; } } .shop_slider__side { position: relative; } .shop_slider__side.mode--1 .body { border-radius: 0 0 1rem 1rem; } .shop_slider__side.mode--2 .body { border-radius: 1rem; } .shop_slider__side .head { position: relative; z-index: 1; border-radius: 1rem 1rem 0 0; background-color: var(--main-color); color: var(--white-0); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; } .shop_slider__side .head_right { display: flex; align-items: center; gap: 0.5rem; } .shop_slider__side .head::before { content: ""; position: absolute; z-index: -1; width: var(--width-100); height: 30px; bottom: -30px; left: 0; right: 0; background-color: var(--main-color); } .shop_slider__side .body { position: relative; z-index: 3; background-color: var(--white-0); border-radius: 0 0 1rem 1rem; padding: 0 0.75rem; max-height: 400px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .shop_slider__side .body::-webkit-scrollbar { display: none; /* Hide scrollbars */ } .shop_slider__side .body .active { border-radius: 1rem; border-top: 3px solid var(--main-color); border-bottom: 3px solid var(--main-color); } .shop_slider__side .body .item { background-color: var(--white-0); margin-bottom: 0.75rem; } .shop_slider__side .body .item:last-child { margin-bottom: 3rem; } .shop_slider__side .body_bottom { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 62px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white-0) 76.58%); cursor: pointer; } .shop_slider__side .body_bottom .icon { display: flex; align-items: center; justify-content: center; width: var(--width-100); padding: 0.75rem; color: var(--black-0); transition: color 250ms; } .shop_slider__side .body_bottom .icon i { font-size: 22px; } .shop_slider__side .body_bottom:hover .icon { color: var(--main-color); } .category_slider__head { display: flex; align-items: center; justify-content: space-between; } .category_slider__head .text_head { display: flex; align-items: center; gap: 0.75rem; color: var(--gray-200); font-size: 1.1rem; } .category_slider__head .text_head i { font-size: 20px; } .category_slider__head .text_head .bold { color: var(--red-1); font-weight: 600; } .justify_between--mob { width: var(--width-100); display: flex; flex-direction: column; gap: 0.75rem; align-items: center; justify-content: space-between; } @media (min-width: 556px) { .justify_between--mob { flex-direction: row; } } .openproduct_container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; border-radius: 1rem; padding: 1rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .openproduct_container .openproduct_main { display: flex; flex-direction: column; gap: 0.75rem; } .openproduct_container .openproduct_main .openproduct_main__awesome { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background-color: var(--main-color); border-radius: 0.5rem; padding: 0.5rem 0 0.5rem 1rem; } .openproduct_container .openproduct_main .openproduct_main__awesome .right { display: flex; align-items: center; color: var(--white-0); @supports ( (--a: 0)) { font-family: var(--font-doran-regular); } @supports ( not (--a: 0)) { font-family: "Doran", sans-serif; } } .openproduct_container .openproduct_main .openproduct_main__awesome .right .right_image { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; } .openproduct_container .openproduct_main .openproduct_main__awesome .right .right_image img { width: var(--width-100); height: 100%; } .openproduct_container .openproduct_main .openproduct_main__awesome .right .title { font-weight: 600; font-size: 0.8rem; margin-bottom: 5px; } .openproduct_container .openproduct_main .openproduct_main__awesome .right .desc { font-size: 0.7rem; } .openproduct_container .openproduct_main .openproduct_main__awesome .timer { display: flex; align-items: center; gap: 0.2rem; } .openproduct_container .openproduct_main .openproduct_main__awesome .timer span { font-size: 1.3rem; color: var(--white-0); } .openproduct_container .openproduct_main .openproduct_main__awesome .timer .box { background-color: var(--white-0); border-radius: 0.5rem; padding: 4px 8px; font-size: 1.05rem; color: var(--gray-200); } .openproduct_container .openproduct_main .openproduct_main__awesome .timer .box.second { color: var(--main-color); } .openproduct_container .openproduct_main .openproduct_main__container { display: flex; flex-direction: column; gap: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__controls { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border: 1px solid var(--black-10); border-radius: 0.5rem; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__controls button { padding: 0.75rem; color: var(--gray-200); } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__controls button i { font-size: 18px; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__controls .line { width: 20px; height: 1px; background-color: var(--black-10); } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__slider { position: relative; height: 330px; grid-column: 5 span/5 span; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__slider .openproduct_main__image { height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--black-10); border-radius: 0.5rem; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__slider .openproduct_main__image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__slider .openproduct_main__imagezoom img { position: absolute; top: 0; left: 0; height: 400px; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__thumb { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__thumb .thumb_item { position: relative; height: 72px; padding: 0.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--black-10); cursor: pointer; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__thumb .thumb_item img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__thumb .thumb_item .badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 0.5rem; color: var(--white-0); background-color: rgba(26, 26, 26, 0.6); } .openproduct_container .openproduct_main .openproduct_main__container .product_stock .product_stock__texts { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: 0.9rem; color: var(--gray-200); } .openproduct_container .openproduct_main .openproduct_main__container .product_stock .product_stock__texts span { font-weight: 600; color: var(--main-color); font-size: 1.1rem; } .openproduct_container .openproduct_main .openproduct_main__container .product_stock .product_stock__progress { width: var(--width-100); background-color: var(--black-10); height: 4px; border-radius: 50px; overflow: hidden; } .openproduct_container .openproduct_main .openproduct_main__container .product_stock .product_stock__progress .progress_outer { height: 100%; max-width: var(--width-100); background-color: var(--red-1); } .openproduct_container .openproduct_details { display: flex; flex-direction: column; gap: 1rem; } .openproduct_container .openproduct_details .desktop_details, .openproduct_container .openproduct_details .desktop_details__block { display: none !important; } .openproduct_container .openproduct_details .product_tag { align-self: flex-start; padding: 5px 8px; border-radius: 2px; background: var(--gray-204); color: var(--gray-211); } .openproduct_container .openproduct_details .product_tag span { color: var(--black-201); font-weight: 500; } .openproduct_container .openproduct_details .product_title { font-size: 1.1rem; font-weight: 500; color: var(--black-0); } .openproduct_container .openproduct_details .product_model { display: flex; align-items: center; gap: 0.75rem; } .openproduct_container .openproduct_details .product_model p { font-size: 0.85rem; color: var(--gray-200); } .openproduct_container .openproduct_details .product_model hr { flex-grow: 1; } @media (min-width: 881px) { .openproduct_container .openproduct_details .desktop_details { display: flex !important; } .openproduct_container .openproduct_details .desktop_details__block { display: block !important; } } .openproduct_container .openproduct_buy { display: none; flex-direction: column; gap: 0.75rem; padding-top: 2rem; } .openproduct_container .openproduct_buy .openproduct_buy__box { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 0.5rem; background-color: var(--default-bg-color); border: 1px solid var(--black-10); } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title { display: flex; flex-direction: column; gap: 0.75rem; } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title .seller_name { display: flex; align-items: center; gap: 0.75rem; } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title .seller_name .icon { position: relative; display: flex; align-items: center; justify-content: center; } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title .seller_name .icon > i { width: 22px; font-size: 22px; } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title .seller_name .icon .icon_badge { display: none; position: absolute; bottom: -5px; left: -6px; background-color: var(--white-0); border-radius: 50%; font-size: 13px; color: var(--green-6); } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title .seller_name .text_badge { display: none; background-color: rgba(204, 234, 211, 0.5); border-radius: 100px; padding: 0.3rem 1rem; color: var(--green-4); font-size: 0.85rem; } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title .seller_status { display: flex; align-items: center; gap: 1rem; } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title .seller_status .line_vertical { width: 2px; height: 15px; background-color: var(--black-10); } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title .seller_status p { font-size: 0.9rem; } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title.excellent .seller_name .icon_badge, .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title.excellent .seller_name .text_badge { display: flex; } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title.excellent .status_text { color: var(--green-4); } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title.good .status_text { color: var(--green-1); } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title.medium .status_text { color: var(--yellow-1); } .openproduct_container .openproduct_buy .openproduct_buy__box .seller_title.bad .status_text { color: var(--red-8); } .openproduct_container .openproduct_buy .openproduct_buy__box .price_container { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .openproduct_container .openproduct_buy .openproduct_buy__box .price_container .prices { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; } .openproduct_container .openproduct_buy .openproduct_buy__box .price_container .prices .price_offer { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .openproduct_container .openproduct_buy .openproduct_buy__box .price_container .price_last { font-weight: 500; color: var(--green-6); font-size: 1rem; text-align: left; } @media (min-width: 998px) { .openproduct_container { grid-template-columns: repeat(3, minmax(0, 1fr)); } .openproduct_container .openproduct_buy { display: flex; } } .openproduct_condition__container { display: none; position: fixed; z-index: 10; left: 0; bottom: 0; right: 0; background-color: var(--white-0); } .openproduct_condition__container .openproduct_condition { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; width: var(--width-97); max-width: var(--width-max-width); margin: 0 auto; padding: 1rem 0.5rem; } .openproduct_condition__container .openproduct_condition .right { display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; cursor: pointer; } .openproduct_condition__container .openproduct_condition .center { width: var(--width-100); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; cursor: pointer; } .openproduct_condition__container .openproduct_condition .center .product { height: 72px; border: 1px solid var(--black-10); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } .openproduct_condition__container .openproduct_condition .center .product img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .openproduct_condition__container .openproduct_condition .center .product .icon { font-size: 25px; color: var(--gray-200); } .openproduct_condition__container .openproduct_condition .left { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } @media (min-width: 881px) { .openproduct_condition__container .openproduct_condition { width: var(--width-90); } } @media (min-width: 881px) { .openproduct_condition__container.show { display: block; } } .sellers_openproduct__table { display: none; flex-direction: column; gap: 1.5rem; border-radius: 1rem; padding: 1.5rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } @media (min-width: 881px) { .sellers_openproduct__table { display: flex; } } .sellers_openproduct__table--mobile { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 2rem; padding: 1rem; border-radius: 0.5rem; background-color: var(--white-0); } .sellers_openproduct__table--mobile .seller_title { display: flex; flex-direction: column; gap: 0.75rem; } .sellers_openproduct__table--mobile .seller_title .seller_name { display: flex; align-items: center; gap: 0.75rem; } .sellers_openproduct__table--mobile .seller_title .seller_name .icon { position: relative; display: flex; align-items: center; justify-content: center; } .sellers_openproduct__table--mobile .seller_title .seller_name .icon > i { width: 22px; font-size: 22px; } .sellers_openproduct__table--mobile .seller_title .seller_name .icon .icon_badge { display: none; position: absolute; bottom: -5px; left: -6px; background-color: var(--white-0); border-radius: 50%; font-size: 13px; color: var(--green-6); } .sellers_openproduct__table--mobile .seller_title .seller_name .text_badge { display: none; background-color: rgba(204, 234, 211, 0.5); border-radius: 100px; padding: 0.3rem 1rem; color: var(--green-4); font-size: 0.85rem; } .sellers_openproduct__table--mobile .seller_title .seller_status { display: flex; align-items: center; gap: 1rem; } .sellers_openproduct__table--mobile .seller_title .seller_status .line_vertical { width: 2px; height: 15px; background-color: var(--black-10); } .sellers_openproduct__table--mobile .seller_title .seller_status p { font-size: 0.9rem; } .sellers_openproduct__table--mobile .seller_title.excellent .seller_name .icon_badge, .sellers_openproduct__table--mobile .seller_title.excellent .seller_name .text_badge { display: flex; } .sellers_openproduct__table--mobile .seller_title.excellent .status_text { color: var(--green-4); } .sellers_openproduct__table--mobile .seller_title.good .status_text { color: var(--green-1); } .sellers_openproduct__table--mobile .seller_title.medium .status_text { color: var(--yellow-1); } .sellers_openproduct__table--mobile .seller_title.bad .status_text { color: var(--red-8); } .sellers_openproduct__table--mobile .price_container { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .sellers_openproduct__table--mobile .price_container .prices { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; } .sellers_openproduct__table--mobile .price_container .prices .price_offer { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .sellers_openproduct__table--mobile .price_container .price_last { font-weight: 500; color: var(--green-6); font-size: 1rem; text-align: left; } @media (min-width: 881px) { .sellers_openproduct__table--mobile { display: none; } } .product_info__mobile__container { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 2rem; padding: 1rem; border-radius: 0.5rem; background-color: var(--white-0); } @media (min-width: 881px) { .product_info__mobile__container { display: none; } } .buy_product__mobile__container { display: block; position: fixed; z-index: 10; left: 0; bottom: 0; right: 0; background-color: var(--white-0); box-shadow: 2px 18px 60px 5px var(--gray-209); } .buy_product__mobile__container .buy_product__mobile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; width: var(--width-97); max-width: var(--width-max-width); margin: 0 auto; padding: 1.2rem 0.5rem; } .buy_product__mobile__container .buy_product__mobile .prices { display: flex; flex-direction: column; gap: 0.5rem; } .buy_product__mobile__container .buy_product__mobile .prices .price_offer { font-size: 0.8rem; text-decoration: line-through; color: var(--gray-211); } .buy_product__mobile__container .buy_product__mobile .prices .price_last { font-weight: 600; color: var(--green-6); font-size: 1rem; } .buy_product__mobile__container .buy_product__mobile button { align-self: center; } @media (min-width: 881px) { .buy_product__mobile__container { display: none; } } .dashboard_sidebar__container .btn_toggle__sidebar { position: absolute; left: -50px; top: 150px; width: 50px; height: 90px; z-index: 10; padding-left: 1rem; display: flex; align-items: center; justify-content: center; color: var(--gray-200); background-image: url("../img/ellipse-dashboard.png"); background-position: center right; background-size: 100% 100%; cursor: pointer; fill: var(--white-0); filter: drop-shadow(0px 4px 40px rgba(0, 0, 0, 0.05)); } .blob{ position:relative; height: 32px; width: 32px; background: transparent; z-index:0; } .blob:after { position: absolute; margin:auto; content:''; background: transparent; top: 50%; left: 9px; transform: translate(-50%, -50%); width: 38px; height: 66px; border-radius: 100% / 57%; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); animation: pulse 3s infinite; z-index:-1; } @-webkit-keyframes pulse { 0% { z-index:0; -webkit-box-shadow: -2px 0 5px 0 rgba(102,102,102, 0.7); } 20% { z-index:0; -webkit-box-shadow: -7px 0 6px 0 rgba(255,255,255, 0.2); } 40% { z-index:0; -webkit-box-shadow: -12px 0 8px 0 rgba(255,255,255, 0.2); } 100% { z-index:0; -webkit-box-shadow: -18px 0 12px 0 rgba(77,77,77, 0); } } @keyframes pulse { 0% { -moz-box-shadow: -2px 0 5px 0 rgba(102,102,102, 0.7); box-shadow: -2px 0 5px 0 rgba(102,102,102, 0.7); } 20% { -moz-box-shadow: -7px 0 6px 0 rgba(255,255,255, 0.2); box-shadow: -7px 0 6px 0 rgba(255,255,255, 0.2); } 40% { -moz-box-shadow: -12px 0 8px 0 rgba(255,255,255, 0.2); box-shadow: -12px 0 8px 0 rgba(255,255,255, 0.2); } 100% { -moz-box-shadow: -18px 0 12px 0 rgba(77,77,77, 0); box-shadow: -18px 0 12px 0 rgba(77,77,77, 0); } } .fa-ellipsis-vertical-advanced{ background: url('../img/more.svg'); background-repeat: no-repeat; background-size: cover; display: flex; width: 20px; height: 20px; justify-content: center; align-items: center; flex-shrink: 0; } .dashboard_sidebar__container .btn_toggle__sidebar i { color: var(--black-201); font-size: 25px; } .dashboard_sidebar__container::after { content: " "; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: -10; opacity: 0; translate: opacity 350ms; } .dashboard_sidebar__container.opened::after { opacity: 1; z-index: 10; } .dashboard_sidebar__container.opened .sidebar_container { transform: translateX(0); } .dashboard_sidebar__container .sidebar_container { --sidebar-width: 300px; position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; background-color: var(--white-0); display: flex; flex-direction: column; gap: 1rem; padding: 0 1rem 2rem 1rem; width: var(--sidebar-width); transform: translateX(var(--sidebar-width)); transition: all 300ms ease-in; } @media (min-width: 420px) { .dashboard_sidebar__container .sidebar_container { --sidebar-width: 370px; } } .dashboard_sidebar__container .dashboard_side__main { height: 100vh; display: flex; flex-direction: column; gap: 1.2rem; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .dashboard_sidebar__container .dashboard_side__main::-webkit-scrollbar { display: none; /* Hide scrollbars */ } .dashboard_sidebar__container .dashboard_side__main .dashboard_side__user { position: relative; display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--black-10); border-radius: 0.5rem; padding: 3rem 1rem 1rem 1rem; } .dashboard_sidebar__container .dashboard_side__main .dashboard_side__user::before { content: " "; position: absolute; z-index: 40; top: -1px; left: 50%; transform: translateX(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='40' viewBox='0 0 130 40' fill='none'%3E%3Cpath d='M130 0C110.507 2.39837e-06 108.357 40 65 40C21.643 40 19.4928 0 0 0C0 0 37.3858 5.15588e-06 65 5.15588e-06C92.6142 5.15588e-06 130 0 130 0Z' fill='white'/%3E%3C/svg%3E"); background-size: 100% 100%; width: 130px; height: 40px; } .dashboard_sidebar__container .dashboard_side__main .dashboard_side__user::after { content: " "; position: absolute; z-index: 30; top: 0; left: 50%; transform: translateX(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='40' viewBox='0 0 130 40' fill='none'%3E%3Cpath d='M130 0C110.507 2.39837e-06 108.357 40 65 40C21.643 40 19.4928 0 0 0C0 0 37.3858 5.15588e-06 65 5.15588e-06C92.6142 5.15588e-06 130 0 130 0Z' fill='white' stroke='%23e5e5e5'/%3E%3C/svg%3E"); background-size: 100% 100%; width: 130px; height: 40px; } .dashboard_sidebar__container .dashboard_side__main .dashboard_avatar { margin: 0 auto; position: relative; z-index: 45; transform: translateY(40px); width: 80px; height: 80px; border-radius: 50%; border: 1px solid var(--black-10); } .dashboard_sidebar__container .dashboard_side__main .dashboard_avatar img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu { display: flex; flex-direction: column; gap: 1rem; } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item { display: flex; align-items: center; justify-content: space-between; position: relative; cursor: pointer; padding: 0.5rem 1.2rem 0.5rem 0; color: var(--gray-200); } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item .arrow_button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 4px; border-radius: 0.5rem; visibility: hidden; background-color: var(--blue-3); color: var(--white-0); } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item .arrow_button svg { width: 18px; height: 18px; } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 0; border-radius: 2px; background-color: var(--blue-3); transition: width 350ms ease-in; } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item.is-active { color: var(--blue-3); } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item.is-active .arrow_button { visibility: visible; } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item.is-active::before { width: 3px; } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item .icon { position: relative; } .dashboard_sidebar__container .dashboard_side__main .dashboard_menu .dashboard_menu__item .icon.new::after { content: " "; position: absolute; top: 0; right: -1px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--red-1); } @media (min-width: 881px) { .dashboard_sidebar__container { display: none; } } .dashboard_container { width: var(--width-100); max-width: var(--width-width3); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 3rem 0.5rem 1rem; } .dashboard_container .dashboard_user__status { display: flex; } .dashboard_container .dashboard_main { width: var(--width-100); display: flex; flex-direction: column; gap: 1.5rem; } .dashboard_container .dashboard_side { width: var(--width-100); display: flex; flex-direction: column; gap: 1.5rem; position: relative; background-color: var(--white-0); border-radius: 1rem; padding: 3rem 1rem 1rem; margin-top: 3.75rem; } .dashboard_container .dashboard_side::before { content: " "; position: absolute; width: 153px; height: 38px; top: 0; left: 50%; transform: translateX(-50%); background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width="183" height="58" viewBox="0 0 183 58" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M183 0C155.56 3.45505e-06 152.533 57.6234 91.5 57.6234C30.4667 57.6234 27.4398 0 0 0C0 0 52.6277 7.42748e-06 91.5 7.42748e-06C130.372 7.42748e-06 183 0 183 0Z" fill="%23F2F2F2"/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: left top; background-size: 100% 100%; } .dashboard_container .dashboard_side .signout_button { position: absolute; left: 0.75rem; top: -2rem; display: flex; align-items: center; gap: 0.5rem; color: var(--red-1); } .dashboard_container .dashboard_side .signout_button:hover { text-transform: underline; } .dashboard_container .dashboard_side .signout_button p { font-size: 0.85rem; } .dashboard_container .dashboard_side .signout_button i { font-size: 18px; } .dashboard_container .dashboard_side .dashboard_side__body { display: none; } .dashboard_container .dashboard_side .dashboard_avatar { position: absolute; top: -55px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 1px solid var(--black-10); } .dashboard_container .dashboard_side .dashboard_avatar img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .dashboard_container .dashboard_side .dashboard_menu { display: flex; flex-direction: column; gap: 1rem; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item { display: flex; align-items: center; justify-content: space-between; position: relative; cursor: pointer; padding: 0.5rem 1.2rem 0.5rem 0; color: var(--gray-200); transition: color 250ms; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item:hover { color: var(--blue-3); } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item:hover::before { width: 3px; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item .arrow_button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 4px; border-radius: 0.5rem; visibility: hidden; background-color: var(--blue-3); color: var(--white-0); } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item .arrow_button svg { width: 18px; height: 18px; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 0; border-radius: 2px; background-color: var(--blue-3); transition: width 350ms ease-in; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item.is-active { color: var(--blue-3); } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item.is-active .arrow_button { visibility: visible; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item.is-active::before { width: 3px; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item .icon { position: relative; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item .icon.new::after { content: " "; position: absolute; top: 0; right: -1px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--red-1); } @media (min-width: 881px) { .dashboard_container { flex-direction: row; } .dashboard_container .dashboard_user__status { display: none; } .dashboard_container .dashboard_main { width: calc(100% - 320px - 1rem); } .dashboard_container .dashboard_side { padding: 5rem 1rem 1rem; width: 320px; flex: 0 0 320px; } .dashboard_container .dashboard_side::before { width: 183px; height: 58px; } .dashboard_container .dashboard_side .signout_button { display: none; } .dashboard_container .dashboard_side .dashboard_avatar { top: -60px; width: 114px; height: 114px; } .dashboard_container .dashboard_side .dashboard_side__body { display: flex; flex-direction: column; gap: 2rem; } } .outline_card__roundedb-bordertnone { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-top: none; border-right: 1px solid var(--black-10); border-left: 1px solid var(--black-10); border-bottom: 1px solid var(--black-10); border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .main_dashboard__head { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; } @media (min-width: 886px) { .main_dashboard__head { flex-direction: row; align-items: center; } } .box_with__icon { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; position: relative; padding: 0.75rem 1.2rem; border-radius: 1rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .box_with__icon.link { padding-left: 3rem; } .box_with__icon.link .box_left { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; color: var(--red-1); } .box_with__icon.link .box_left i { font-size: 20px; } .box_with__icon.link .box_left svg { width: 25px; height: 25px; } .box_with__icon .box_right { display: flex; align-items: center; gap: 0.75rem; } .box_with__icon .box_right .icon_container { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .box_with__icon .box_right .icon_container.blue { background-color: var(--blue-2); color: var(--blue-3); } .box_with__icon .box_right .icon_container.green { background-color: var(--green-2); color: var(--green-6); } .box_with__icon .box_right .icon_container.red { background-color: #FAD0D8; color: #E6123D; } .box_with__icon .box_right .icon_container i { font-size: 28px; } .box_with__icon .box_right .icon_container svg { width: 32px; height: 32px; } .box_with__icon .box_right .box_right__text { width: calc(100% - 56px - 0.75rem); display: flex; flex-direction: column; gap: 0.5rem; } .download_section__header { display: flex; flex-wrap: wrap; border-radius: 0.5rem; color: var(--black-0); background-color: var(--gray-204); } .download_section__header .head { padding: 0.75rem 0.5rem; width: 50%; flex: 0 0 50%; font-size: 0.8rem; } .download_section__header .head:first-child { width: var(--width-100); flex: 0 0 100%; } @media (min-width: 881px) { .download_section__header .head { font-size: 0.9rem; width: 20%; flex: 0 0 20%; } .download_section__header .head:first-child { width: calc(40% - 1.5rem); flex: 0 0 calc(40% - 1.5rem); } } .accordion_download__container .accordion_button { width: var(--width-100); display: flex; flex-wrap: wrap; position: relative; padding-left: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--gray-202); background-color: var(--white-0); } .accordion_download__container .accordion_button .accordion_button__text { width: 45%; flex: 0 0 45%; color: var(--gray-201); text-align: right; padding: 0 0.5rem 1.2rem; } .accordion_download__container .accordion_button .accordion_button__text:first-child { width: calc(100% - 1.5rem); flex: 0 0 calc(100% - 1.5rem); transition: color 350ms ease-in; text-overflow: ellipsis; overflow-x: hidden; padding: 1.2rem 0.5rem; } @media (min-width: 881px) { .accordion_download__container .accordion_button .accordion_button__text { width: 20%; flex: 0 0 20%; padding: 1.2rem 0.5rem; } .accordion_download__container .accordion_button .accordion_button__text:first-child { width: calc(40% - 1.5rem); flex: 0 0 calc(40% - 1.5rem); } } .accordion_download__container .accordion_button .accordion_button__icon { display: flex; align-items: center; justify-content: center; position: absolute; left: 0.5rem; top: 0.75rem; width: 32px; height: 32px; background-color: var(--gray-204); color: var(--red-1); border-radius: 50%; } .accordion_download__container .accordion_button .accordion_button__icon svg { width: 22px; height: 22px; transition: transform 350ms ease-in; } @media (min-width: 881px) { .accordion_download__container .accordion_button .accordion_button__icon { top: 50%; transform: translateY(-50%); } } .accordion_download__container .accordion_download__contents { width: 97%; max-height: 0; margin: 0 auto; border: 1px solid transparent; border-radius: 0 0 0.5rem 0.5rem; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .accordion_download__container .accordion_download__contents .accordion_download__content { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background-color: var(--white-0); } .accordion_download__container .accordion_download__contents .accordion_download__content:nth-child(even) { background-color: var(--gray-204); } @media (min-width: 881px) { .accordion_download__container .accordion_download__contents { width: 95%; } } .accordion_download__container.opened .accordion_button .accordion_button__text:first-child { color: var(--red-1); font-weight: 600; } .accordion_download__container.opened .accordion_button .accordion_button__icon svg { transform: rotate(180deg); } .accordion_download__container.opened .accordion_download__contents { border: 1px solid var(--gray-202); border-top-width: 0; max-height: -moz-max-content; max-height: max-content; transition: max-height 1s ease-in-out; } .avatar_container { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 1rem; background: var(--gray-204); color: var(--gray-200); } .avatar_container .avatar_image { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gray-203); } .avatar_container .avatar_image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .avatar_container .avatar_body { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .avatar_container .avatar_body .avatar_body__buttons { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .avatar_container .avatar_body .avatar_body__buttons input { display: none; width: 0; } @media (min-width: 881px) { .avatar_container { flex-direction: row; } .avatar_container .avatar_body { align-items: flex-start; gap: 1rem; } .avatar_container .avatar_body .avatar_body__buttons { flex-direction: row; gap: 1rem; } } .ticket_card__container { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.75rem 0; scrollbar-width: auto; scrollbar-color: var(--gray-204) var(--white-0); } .ticket_card__container::-webkit-scrollbar { width: 12px; } .ticket_card__container::-webkit-scrollbar-track { background: var(--white-0); } .ticket_card__container::-webkit-scrollbar-thumb { background-color: var(--gray-204); border-radius: 10px; border: 3px solid var(--white-0); } .ticket_card__container .ticket_card { width: 250px; flex: 0 0 250px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1.2rem 2rem; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="240" height="99" viewBox="0 0 240 99" fill="none"%3E%3Cmask id="path-1-inside-1_2856_39780" fill="white"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M240 0H0V30C11.0457 30 20 38.9543 20 50C20 61.0457 11.0457 70 0 70V99H240V70C228.954 70 220 61.0457 220 50C220 38.9543 228.954 30 240 30V0Z"/%3E%3C/mask%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M240 0H0V30C11.0457 30 20 38.9543 20 50C20 61.0457 11.0457 70 0 70V99H240V70C228.954 70 220 61.0457 220 50C220 38.9543 228.954 30 240 30V0Z" fill="white"/%3E%3Cpath d="M0 0V-1H-1V0H0ZM240 0H241V-1H240V0ZM0 30H-1V31H0V30ZM0 70V69H-1V70H0ZM0 99H-1V100H0V99ZM240 99V100H241V99H240ZM240 70H241V69H240V70ZM240 30V31H241V30H240ZM0 1H240V-1H0V1ZM1 30V0H-1V30H1ZM21 50C21 38.402 11.598 29 0 29V31C10.4934 31 19 39.5066 19 50H21ZM0 71C11.598 71 21 61.598 21 50H19C19 60.4934 10.4934 69 0 69V71ZM1 99V70H-1V99H1ZM240 98H0V100H240V98ZM239 70V99H241V70H239ZM219 50C219 61.598 228.402 71 240 71V69C229.507 69 221 60.4934 221 50H219ZM240 29C228.402 29 219 38.402 219 50H221C221 39.5066 229.507 31 240 31V29ZM239 0V30H241V0H239Z" fill="%23E5E5E5" mask="url(%23path-1-inside-1_2856_39780)"/%3E%3C/svg%3E'); background-size: 100% 100%; } .ticket_card__container .ticket_card.gray .ticket_card__icon { background: var(--black-10); color: var(--black-201); } .ticket_card__container .ticket_card.gray .ticket_card__body .ticket_card__number { color: var(--black-201); } .ticket_card__container .ticket_card.blue .ticket_card__icon { background: var(--blue-2); color: var(--blue-1); } .ticket_card__container .ticket_card.blue .ticket_card__body .ticket_card__number { color: var(--blue-1); } .ticket_card__container .ticket_card.green .ticket_card__icon { background: var(--green-2); color: var(--green-3); } .ticket_card__container .ticket_card.green .ticket_card__body .ticket_card__number { color: var(--green-3); } .ticket_card__container .ticket_card.red .ticket_card__icon { background: var(--red-10); color: var(--red-11); } .ticket_card__container .ticket_card.red .ticket_card__body .ticket_card__number { color: var(--red-11); } .ticket_card__container .ticket_card .ticket_card__icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--black-10); color: var(--black-201); } .ticket_card__container .ticket_card .ticket_card__icon svg { width: 26px; height: 26px; } .ticket_card__container .ticket_card .ticket_card__body { width: calc(100% - 50px - 1rem); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.8rem; font-weight: 500; } @media (min-width: 1100px) { .ticket_card__container .ticket_card { width: calc(25% - 0.5rem); flex: 0 0 calc(25% - 0.5rem); } } .ticket_table__container { overflow-x: hidden; } .ticket_table { display: flex; flex-direction: column; gap: 0.75rem; overflow-x: auto; } .ticket_table .ticket_table__header { min-width: 940px; display: flex; align-items: center; border-radius: 0.5rem; color: var(--black-0); background-color: var(--gray-204); font-size: 0.85rem; } .ticket_table .ticket_table__header .item { text-align: right; padding: 1rem 0.75rem; } .ticket_table .ticket_table__header .item:nth-child(1) { min-width: 90px; flex: 0 0 90px; } .ticket_table .ticket_table__header .item:nth-child(2) { min-width: 320px; flex: 0 0 320px; } .ticket_table .ticket_table__header .item:nth-child(3) { min-width: 200px; flex: 0 0 200px; } .ticket_table .ticket_table__header .item:nth-child(4) { min-width: 150px; flex: 0 0 150px; } .ticket_table .ticket_table__header .item:nth-child(5) { min-width: 180px; flex: 0 0 180px; } .ticket_table .ticket_table__item { min-width: 940px; display: flex; align-items: center; position: relative; border-radius: 0.5rem; border: 1px solid var(--black-10); } .ticket_table .ticket_table__item .item { text-align: right; padding: 1.5rem 0.75rem; font-size: 0.85rem; } .ticket_table .ticket_table__item .item:nth-child(1) { min-width: 90px; flex: 0 0 90px; } .ticket_table .ticket_table__item .item:nth-child(2) { min-width: 320px; flex: 0 0 320px; display: flex; align-items: center; gap: 0.5rem; } .ticket_table .ticket_table__item .item:nth-child(3) { min-width: 200px; flex: 0 0 200px; } .ticket_table .ticket_table__item .item:nth-child(4) { min-width: 150px; flex: 0 0 150px; color: var(--gray-201); } .ticket_table .ticket_table__item .item:nth-child(5) { min-width: 180px; flex: 0 0 180px; display: flex; } .ticket_table .ticket_table__item.green::before { content: " "; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background-color: var(--green-6); } .ticket_table .ticket_table__item.green .badge_ticket { background: var(--gray-212); color: var(--green-6); font-weight: 500; border-radius: 5px; padding: 0 0.4rem; font-size: 0.8rem; } .ticket_table .ticket_table__item.blue::before { content: " "; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background-color: var(--blue-3); } .ticket_table .ticket_table__item.blue .badge_ticket { background: var(--blue-2); color: var(--blue-3); font-weight: 500; border-radius: 5px; padding: 0 0.4rem; font-size: 0.8rem; } .ticket_table .ticket_table__item.red::before { content: " "; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background-color: #E6123D; } .ticket_table .ticket_table__item.red .badge_ticket { background: var(--red-7); color: #E6123D; font-weight: 500; border-radius: 5px; padding: 0 0.4rem; font-size: 0.8rem; } .accordion_notice_container .accordion_button { width: var(--width-100); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-radius: 0.5rem; padding: 1rem; background-color: var(--gray-204); border: 1px solid var(--black-10); } .accordion_notice_container .accordion_button .accordion_button__text { display: flex; align-items: center; gap: 0.5rem; color: var(--black-201); width: calc(100% - 32px - 0.75rem); transition: color 250ms ease-in; } .accordion_notice_container .accordion_button .accordion_button__text i { font-size: 20px; transition: transform 250ms; } .accordion_notice_container .accordion_button .accordion_button__text svg { width: 22px; height: 22px; } .accordion_notice_container .accordion_button .accordion_button__text p { color: var(--gray-200); text-align: right; font-weight: 500; } .accordion_notice_container .accordion_button .accordion_button__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: var(--black-10); color: var(--red-1) !important; border-radius: 50%; } .accordion_notice_container .accordion_button .accordion_button__icon i { font-size: 22px; color: var(--red-1) !important; transition: transform 350ms ease-in; } .accordion_notice_container .accordion_button .accordion_button__icon i.fa-minus { display: none; } .accordion_notice_container .accordion_button .accordion_button__icon i.fa-plus { display: block; } .accordion_notice_container .accordion_button .accordion_button__icon svg { width: 22px; height: 22px; color: var(--red-1) !important; transition: transform 350ms ease-in; } .accordion_notice_container .accordion_button:hover .accordion_button__text I { transform: rotate(180deg); } .accordion_notice_container .accordion_button:hover .accordion_button__text i, .accordion_notice_container .accordion_button:hover .accordion_button__text p { color: var(--red-1); transition: all 100ms 0s ease-in; } .accordion_notice_container .accordion_notice__contents { width: 97%; max-height: 0; margin: 0 auto; border: 1px solid transparent; border-radius: 0 0 0.5rem 0.5rem; padding: 0 1rem; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), padding 250ms; } .accordion_notice_container .accordion_notice__contents p { text-align: justify; color: var(--gray-201); font-size: 0.9rem; line-height: 1.7rem; } .accordion_notice_container .accordion_notice__contents .accordion_notice__content { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background-color: var(--white-0); padding: 0 1rem; } @media (min-width: 881px) { .accordion_notice_container .accordion_notice__contents { width: 95%; } } .accordion_notice_container.opened .accordion_button .accordion_button__text i, .accordion_notice_container.opened .accordion_button .accordion_button__text p { color: var(--red-1); } .accordion_notice_container.opened .accordion_button .accordion_button__icon i, .accordion_notice_container.opened .accordion_button .accordion_button__icon svg { color: var(--red-1); transform: rotate(180deg); } .accordion_notice_container.opened .accordion_button .accordion_button__icon i.fa-minus { display: block; } .accordion_notice_container.opened .accordion_button .accordion_button__icon i.fa-plus { display: none; } .accordion_notice_container.opened .accordion_notice__contents { border: 1px solid var(--gray-202); border-top-width: 0; max-height: -moz-fit-content; max-height: fit-content; padding: 1rem; transition: max-height 1s ease-in-out, padding 250ms; } .add_ticket__form { display: flex; flex-direction: column; gap: 0.75rem; } .ticket_images__uploaded { direction: ltr; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ticket_images__uploaded .ticket_image { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; border-radius: 4px; border: 1px solid var(--black-10); } .ticket_images__uploaded .ticket_image img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .ticket_images__uploaded .ticket_image .uploading_status { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1.2rem; font-weight: 600; background-color: rgba(77, 77, 77, 0.5); color: var(--white-0); opacity: 0; visibility: hidden; } .ticket_images__uploaded .ticket_image.uploading .uploading_status { opacity: 1; visibility: visible; } .upload_image__button input { display: none; width: 0; } .upload_image__button button { width: var(--width-100); display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--black-0); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--black-10); background: var(--gray-205); transition: background 250ms ease-in; } .upload_image__button button:hover { background: var(--black-10); } .upload_image__button button svg { width: 20px; height: 20px; } .upload_image__button button p { font-size: 0.85rem; } .ticket_seperator { display: flex; align-items: center; gap: 0.5rem; } .ticket_seperator svg { color: var(--red-1); width: 25px; height: 25px; } .ticket_seperator hr { flex-grow: 1; } .ticket_chatbox__container { display: flex; flex-direction: column; gap: 1.2rem; } .ticket_chatbox__container .ticket_chatbox { display: flex; align-items: flex-end; gap: 1rem; } .ticket_chatbox__container .ticket_chatbox .chatbox_avatar { display: none; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gray-203); margin-bottom: 2rem; } .ticket_chatbox__container .ticket_chatbox .chatbox_avatar img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .ticket_chatbox__container .ticket_chatbox .chat_container { display: flex; flex-direction: column; gap: 0.5rem; } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_message { width: var(--width-100); max-width: 640px; padding: 24px 18px; border-radius: 16px 16px 2px 16px; background: var(--black-201); } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_message p { color: var(--white-0); font-size: 0.9rem; } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_message .chat_attach__container { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 0.75rem; margin-top: 0.75rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_message .chat_attach__container .chat_attach__item { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; padding: 5px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.2); } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_message .chat_attach__container .chat_attach__item .photo { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 0.5rem; overflow: hidden; } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_message .chat_attach__container .chat_attach__item .photo img { width: var(--width-100); height: 100%; -o-object-fit: cover; object-fit: cover; } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_message .chat_attach__container .chat_attach__item .icon { display: flex; justify-content: center; align-items: center; color: var(--white-0); text-align: center; } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_message .chat_attach__container .chat_attach__item .icon i { font-size: 32px; } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_end { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; color: var(--gray-201); } .ticket_chatbox__container .ticket_chatbox .chat_container .chat_end .vertical_line { display: none; } @media (min-width: 756px) { .ticket_chatbox__container .ticket_chatbox .chat_container .chat_end .vertical_line { display: block; width: 1px; height: 10px; background-color: var(--gray-203); } } .ticket_chatbox__container .ticket_chatbox.send .chat_message { background: var(--black-201); border-radius: 16px 16px 2px 16px; } .ticket_chatbox__container .ticket_chatbox.send .chat_message .chat_attach__container { justify-content: flex-end; } .ticket_chatbox__container .ticket_chatbox.receive { flex-direction: row-reverse; } .ticket_chatbox__container .ticket_chatbox.receive .chat_container { align-items: flex-end; } .ticket_chatbox__container .ticket_chatbox.receive .chat_container .chat_message { background: var(--blue-3); border-radius: 16px 16px 16px 2px; } @media (min-width: 881px) { .ticket_chatbox__container .ticket_chatbox .chatbox_avatar { display: flex; } } .ticket_chat__header { display: flex; flex-direction: column; gap: 0.75rem; } .ticket_chat__header .ticket_chat__items { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .ticket_chat__header .ticket_chat__items .ticket_chat__item { display: flex; align-items: center; gap: 0.5rem; } .ticket_chat__header .ticket_chat__items .vertical_seperator { display: none; width: 2px; height: 15px; background-color: var(--gray-203); } @media (min-width: 756px) { .ticket_chat__header .ticket_chat__items .vertical_seperator { display: block; } } .card_header { display: flex; align-items: center; gap: 0.5rem; } .card_header hr { flex-grow: 1; } .card_header .title { display: flex; align-items: center; gap: 0.5rem; color: var(--black-0); font-size: 0.9rem; } .card_header .title i { font-size: 20px; } @media (max-width: 997px) { .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__slider .openproduct_main__imagezoom{ position: absolute; bottom: 0; display: none; z-index: 10; width: 60%; height: 60%; overflow: hidden; border: 1px solid var(--gray-200); } } @media (min-width: 998px) { .openproduct_container .openproduct_main .openproduct_main__container .openproduct_main__slidercontrols .openproduct_main__slider .openproduct_main__imagezoom { position: absolute; bottom: 0; right: 100%; display: none; z-index: 10; width: var(--width-100); height: 100%; overflow: hidden; border: 1px solid var(--gray-200); } } .fa-arrow-right-from-bracket-advanced{ background: url('../img/logout.svg'); background-repeat: no-repeat; background-size: cover; display: flex; width: 20px; height: 20px; justify-content: center; align-items: center; } .modal_share.modal__container .modal__content { background-color: var(--white-0); width: 70%; height: 70vh; padding: 0 0.75rem; } .modal_chart .single-product.modal__content .gap-2-wrap{ display: flex; align-items: center; flex-wrap: nowrap; gap: 1rem; } .modal_chart .single-product.modal__content .select_color__box{ background-color: var(--white-0); display: flex; align-items: center; border: 1px solid var(--black-10); gap: 0.75rem; border-radius: 0.5rem; padding: 0.5rem 1rem; flex-wrap: nowrap; } .modal_chart .single-product.modal__content .select_color__box p{ white-space: nowrap; } .fa-chart-bar-advanced{ background: url('./../public/icons/filter-square.svg'); background-repeat: no-repeat; background-size: cover; display: flex; width: 20px; height: 20px; justify-content: center; align-items: center; } .single-product-price-chart-container { width: var(--width-100); margin-top: 23px; display: flex; justify-content: center; } .fa-swap-arrows-advanced{ background: url('./../public/icons/frame.svg'); background-repeat: no-repeat; background-size: cover; display: flex; width: 20px; height: 20px; justify-content: center; align-items: center; } .compare-products-container .card_header { display: flex; height: 28px; align-items: center; gap: 8px; } .compare-products-container .card_header .v-line { width: var(--width-100); height: 1px; background: var(--black-10); } .white_card.compare-products-container { display: flex; flex-direction: column; gap: 16px; border-radius: 1rem; padding: 1.5rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .compare-products-container .card_header .title { display: flex; width: var(--width-100); align-items: center; gap: 0.5rem; color: var(--black-0); font-size: 0.9rem; } .compare-products-container .title p { white-space: nowrap; } .compare-products-container .h-line-separator { width: var(--width-80); height: 1px; background: var(--black-10); margin-top: 16px; margin-bottom: 16px; } .compare-products-container .h-line-full-separator { width: var(--width-100); height: 1px; background: var(--black-10); margin-top: 16px; margin-bottom: 16px; } .compare-products-main-container .product-column .product_condition_price_box .price { margin-right: 4px; } .compare-products-main-container .product-column .product_condition_price_box { display: flex; } @media (max-width: 1100px) { .compare-products-main-container .product-column .product_condition_price_box { display: flex; flex-direction: column; margin-top: 10px; } .compare-products-main-container .product_condition__card .card_title { font-size:12px; } .compare-products-main-container .product_condition__card .add-to-cart-btn { padding: 0.5rem 0.7rem; height: 30px; } } .shoppingcard_container .dropdown_textarea { position: relative; width: var(--width-100); border-radius: 0.5rem; border: 1px solid var(--gray-202); background-color: var(--white-0); outline: none; font-family: inherit; transition: all 250ms ease-in; padding: 13px 16px 13px; font-size: 14px; line-height: 9px; } @media (max-width: 880px) { section.dashboard_container .dashboard_side.other-sections { display: none; } } @media (min-width: 881px) { .section_container.condition_table__desktop { max-width: calc(var(--width-max-width) + 3rem); width: calc(var(--width-90) + 3rem); } .compare-products-main-container { max-width: var(--width-max-width); } } /******** header-dropdown conponent********/ .navbar.header-dropdown-nav.navbar_container { flex-grow: 1; display: flex; align-items: center; justify-content: center; gap: 2rem; } .navbar.header-dropdown-nav .navbar_container .navbar_logo a { display: flex; align-items: center; justify-content: center; } .navbar.header-dropdown-nav .navbar_container .navbar_logo a img { width: 150px; } .navbar.header-dropdown-nav .navbar_container .navbar_menu { display: none; align-items: center; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item { position: relative; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item > a { position: relative; display: flex; align-items: center; gap: 0.5rem; color: var(--black-201); padding: 1rem; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item > a i { font-size: 18px; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item > a svg { width: 16px; height: 16px; color: inherit; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item > a p { font-size: 0.9rem; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item > .navbar_menu__dropdown { top: 4rem; right: 0; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item .navbar_menu__dropdown { position: absolute; width: 170px; border-radius: 1rem; background-color: var(--white-0); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; height: 48px; cursor: pointer; border-bottom: 1px solid var(--black-10); transition: background 250ms; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item > a { display: flex; align-items: center; width: var(--width-100); height: 100%; font-size: 0.9rem; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item > p { font-size: 0.9rem; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item:hover { background-color: var(--gray-204); } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item:hover > .navbar_menu__dropdown { opacity: 1; visibility: visible; transition: opacity 250ms; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item:last-child { border-bottom-width: 0; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item .navbar_menu__dropdown .navbar_dropdown__item > .navbar_menu__dropdown { position: absolute; top: 0; right: 175px; } .navbar.header-dropdown-nav .navbar_container .navbar_menu > .navbar_menu__item:hover > .navbar_menu__dropdown { opacity: 1; visibility: visible; transition: opacity 250ms; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--1 > .navbar_menu__item > a::after { content: " "; position: absolute; bottom: 0; left: 0; width: var(--width-100); height: 3px; background-color: transparent; transition: background 250ms; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--1 > .navbar_menu__item > a:hover::after { background-color: var(--main-color); } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--1 > .navbar_menu__item.active > a { background-color: var(--main-color); color: var(--white-0); } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--2 > .navbar_menu__item > a { transition: color 250ms; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--2 > .navbar_menu__item > a:hover { color: var(--main-color); } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--2 > .navbar_menu__item.active > a { color: var(--red-1); } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--3 > .navbar_menu__item > a { margin: 0.5rem; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--3 > .navbar_menu__item > a::after { content: " "; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 4px; border-radius: 30px; background: transparent; transition: background 250ms; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--3 > .navbar_menu__item > a:hover::after { background-color: var(--main-color); } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--3 > .navbar_menu__item.active > a { background-color: var(--main-color); color: var(--white-0); border-radius: 0.5rem; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--4 > .navbar_menu__item > a { margin: 0.5rem; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--4 > .navbar_menu__item > a::after { content: " "; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 23px; height: 10px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="10" viewBox="0 0 17 10" fill="none"><path d="M14.6521 10H2.34795C0.498174 10 -0.360257 7.70457 1.03559 6.49079L7.18764 1.14118C7.94019 0.486795 9.05982 0.486795 9.81236 1.14118L15.9644 6.49079C17.3603 7.70457 16.5018 10 14.6521 10Z" fill="%23E6123D"/></svg>'); background-size: 100% 100%; background-position: center top; opacity: 0; transition: opacity 250ms; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--4 > .navbar_menu__item > a:hover { color: var(--main-color); } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--4 > .navbar_menu__item > a:hover::after { opacity: 1; } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--4 > .navbar_menu__item.active > a { color: var(--red-1); } .navbar.header-dropdown-nav .navbar_container .navbar_menu.link--4 > .navbar_menu__item.active > a::after { opacity: 1; } @media (min-width: 980px) { .navbar.header-dropdown-nav .navbar_container { flex-grow: 0; justify-content: flex-start; } .navbar.header-dropdown-nav .navbar_container .navbar_menu { display: flex; } } .dashboard_container { padding-top: 0px !important; } .dashboard_container .dashboard_main { gap: 1rem; } .dashboard_container { gap: 0.8rem; } .white_card { padding: 13px; } .fa-home-alt:before, .fa-home-lg-alt:before, .fa-home:before, .fa-house:before { content: "\e933"; font-family: "iconly"; vertical-align: middle !important; } .dashboard_menu__item i{ font-weight: 500; font-family: "iconly"; font-size: 20px; } .fa-box:before { content: "\e916"; } .fa-arrow-down-to-line:before, .fa-arrow-to-bottom:before { content: "\e929"; } .fa-ballot-check:before { content: "\e954"; } .fa-heart:before { } .fa-bell:before { content: "\e93f"; } .fa-ticket:before { content: "\e921"; } .fa-location-dot:before, .fa-map-marker-alt:before { content: "\e938"; } .fa-circle-info:before, .fa-info-circle:before { content: "\e949"; } .fa-arrow-left:before { content: "\e907"; font-family: iconly; } .text_gray { color: #454242de; font-size: 13px; } .dashboard_container .dashboard_side .dashboard_menu { } .dashboard_container .dashboard_side { padding: 4rem 0.9rem 1rem; width: 300px; flex: 0 0 300px; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item:hover { color: var(--blue-3); background-color: #423f400f; border-radius: 10px; } body { background-color: #ffffff; } .icondate::before { font-family: iconly; content: "\e940"; padding-left: 3px; font-size: 20px; vertical-align: middle; } .ordericonshoping:before { font-family: iconly; content: "\e916"; font-style: normal; } .fa-basket-shopping:before, .fa-shopping-basket:before { font-family: iconly; content: "\e962"; font-style: normal; } .fa-basket:before{ font-family: iconly; content: "\e955"; font-style: normal; } i.fa-regular.fa-bell::after { content: ' '; position: absolute; top: -2px; right: 1px; border-radius: 100%; width: 7px; height: 7px; background-color:var(--main-color); box-shadow: unset; } .iconlysite::after { content: ' '; position: absolute; border-radius: 100%; width: 7px; height: 7px; background-color: var(--main-color); box-shadow: unset; } .factorshow { padding: 10px; background-color: #4b4a4a; color: white; font-weight: 600; border-radius: 10px; } .fa-heart:before { content: "\e931"; font-family: 'iconly'; } .dashboard_container .dashboard_side { /* width: var(--width-100); */ display: flex; flex-direction: column; gap: 1.5rem; position: relative; background-color: white !important; border-radius: 1rem; padding: 3rem 1rem 1rem; margin-top: 3.75rem; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0); } body { background-color: #f2f2f2 !important; } .white_card { display: flex; flex-direction: column; gap: 1rem; border-radius: 1rem; padding: 1.5rem; background-color: white; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1); } .box_with__icon { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; position: relative; padding: 0.75rem 1.2rem; border-radius: 1rem; background-color: white; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1); } .box_with__icon .box_right .icon_container.blue { background-color: var(--blue-2); color: var(--blue-8); } .fa-b:before { font-family: iconly; content: "\e922"; font-style: normal; } .dashboard_container .dashboard_side .dashboard_menu .dashboard_menu__item.is-active { color: var(--blue-3); background: #f2f2f2 !important; padding-left: 6px; border-radius: 10px; } .dashboard_container .dashboard_side .dashboard_menu { padding-bottom:1rem; border-bottom: 1px solid #A1A1A1; } .badge_gray--oneline{ height: 36px; } .dashboard_container .dashboard_side .dashboard_side__body { display: flex; flex-direction: column; gap: 1rem; } .btn_copy__code .status { position: absolute; z-index: -3; right: 0; width: 80px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: var(--gray-204); color: var(--main-color); border-radius: 0.5rem; text-align: center; transition: right 250ms; } .outline_card:hover { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--black-10); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05); } .card_header { display: flex; align-items: center; gap: 0.5rem; background-color:#f2f2f2 !important; border-radius:10px; padding:8px; } .box_with__icon:hover { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; position: relative; padding: 0.75rem 1.2rem; border-radius: 1rem; background-color: white; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.2)!important; } .white_card:hover { display: flex; flex-direction: column; gap: 1rem !important; border-radius: 1rem; padding: 1.5rem; background-color: white; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.2); } .product_card.transparent { background-color: transparent; box-shadow: none; padding: 1rem; border-radius:0.5rem !important; border: 1px solid var(--black-10); } .product_card.transparent:hover { background-color: transparent; padding: 1rem; border-radius:0.5rem !important; border: 1px solid var(--black-10); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05) !important; } .box_with__icon .box_right .icon_container.blue { background-color: var(--blue-8); color: white; border: 4px solid rgba(255, 255, 255, 0.50);} .box_with__icon .box_right .icon_container.green { background-color: var(--green-6); color: white; border: 4px solid rgba(255, 255, 255, 0.50);} .box_with__icon .box_right .icon_container.red { background-color: #E6123D; color: white; border: 4px solid rgba(255, 255, 255, 0.50);} /* new login register */ /* start css login */ body { height: 982px; } input[type=checkbox]::after { top: 3px; left: 2px; } body .wrapper { /* background-image: url(../../public/images/login/ثبت\ نام\ با\ رمز.png); */ height: 100%; background-size: cover; } .img-responsive { width: 100%; height: auto; } .login-section { position: absolute; top: 60%; left: 70%; transform: translate(-50%, -50%); max-width: 390px; height: 737px; } .login-header { position: relative; height: 100px; } a.close { position: absolute; left: 7%; top: 60%; transform: translate(-50%, -50%); background-color: #ffff; width: 48px; height: 48px; border-radius: 254px; } .close:hover i { color: red; font-size: 16px; font-weight: bold; } i.fa-x { position: absolute; left: 12%; top: 85%; transform: translate(-50%, -50%); width: 48px; height: 48px; color: #808080; transition: all .5s linear; } .login-header img { position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); } .login-header .img-compani { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); width: 190px; height: 190px; background-color: rgb(255 255 255 / 9%); border-radius: 50%; } .login-section .login-body { background-image: url(../../public/images/login/Subtract.png); border-radius: 20px; padding: 80px 30px 40px 30px; width: 100%; background-size: 100%; background-color: #fff; } .login-body .enter { /* border: 1px solid red; */ width: 330px; text-align: center; font-size: 18px; font-weight: bold; color: rgb(53, 53, 53); padding-bottom: 12px; } .login-body .number span { font-weight: bold; } .login-body .input-login { padding: 20px 0px 0px 0px; position: relative; } .input-login .text-password { position: absolute; top: 24%; right: -6%; transform: translate(-50%, -50%); color: #B2B2B2; font-size: 11px; width: 75px; height: 17px; background-color: white; text-align: center; } .input-login i.fa-message { position: absolute; top: 63%; right: 3%; transform: translate(-50%, -50%); color: #B2B2B2; } .input-login input.One-time-password { padding: 10px 42px; width: 100%; height: 48px; border: 1px solid #cacaca; border-radius: 8px; } .One-time-password::placeholder { color: rgb(135, 135, 135); font-size: 14px; } .correct { padding-top: 5px; color: red; font-size: 13px; padding-left: 5px; visibility: hidden; /* visibility: visible; */ } .correct i.fa-square-exclamation { margin-left: 10px; } .login-body .send-again { padding: 15px 5px; display: flex; justify-content: space-between; } .send-again .edit { font-size: 14px; cursor: pointer; transition: all .3s linear; color: rgb(82, 82, 82); } .send-again .edit:hover { color: red; transform: translateX(-3px) } .send-again .second { font-size: 12px; color: #b0b0b0; } .send-again .second span { color: rgb(60, 60, 60); } .login-body .btn-login { position: relative; cursor: pointer; } .btn-login button { width: 100%; height: 48px; border-radius: 8px; border: none; background-color: #1280E6; color: white; font-size: 14px; font-weight: bold; cursor: pointer; transition: all .5s linear; animation: chang 2 linear; } .btn-login button:hover { background-color: rgba(0, 0, 0, .4); } .btn-login i.fa-right-to-bracket { position: absolute; top: 54%; right: 36%; transform: translate(-50%, -50%); color: white; font-size: 16px; } .btn-login .icon-button { position: absolute; top: 43%; right: 33%; transform: translate(-50%, -50%); color: white; font-size: 14px; } .login-body p { width: 310px; margin-top: 15px; font-size: 14px; color: gray; text-align: justify; } .login-section .login-footer { background-color: white; max-width: 390px; height: 196px; border-radius: 20px; margin-top: 15px; padding: 20px 30px; } .left-img { width: 500px; height: 300px; position: absolute; top: 57%; left: 28%; transform: translate(-50%, -50%); } .left-img .rocket { width: 100%; } @media only screen and (max-width:900px) { .left-img { display: none; } .login-section { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 390px; height: 737px; } .login-body .number { font-size: 14px; color: rgb(53, 53, 53); } .login-footer p { font-size: 14px; color: rgb(79, 79, 79); line-height: 24px; text-align: justify; } } @media only screen and (min-width:900px) { .login-body .number { font-size: 15px; color: rgb(53, 53, 53); text-align: justify; /* border: 1px solid red; */ width: 330px; } .login-footer p { font-size: 15px; color: rgb(79, 79, 79); line-height: 24px; text-align: justify; } } .error-input { -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-horizontal { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 80% { -webkit-transform: translateX(8px); transform: translateX(8px); } 90% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } } .dashboard_menu__item .gap-x { width: 100%; } .dashboard_menu__item .gap-x p{ width: 100%; } .dashboard_menu__item .gap-x p a{ display: block; width: 100%; } @keyframes shake-horizontal { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 80% { -webkit-transform: translateX(8px); transform: translateX(8px); } 90% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } } /* .input-password-login-register{ display: none; flex-direction: column; justify-content: space-between; gap: 12px; } .items_container--4{ display: none; } .mobile_login_register .items_container--4{ display: block; } .login_email_password .input-password-login-register{ display: flex; } */ /* end new css login */ .right__section{ width: 390px; text-align: center; display: flex; flex-direction: column; position: relative; } .header__section { display: flex; align-items: center; justify-content: center; position: relative; } .close__section{ position: absolute; background: white; border-radius: 50%; height: 50px; width: 50px; line-height: 59px; left: 0; top: -65px; font-size: 18px; } .login_register__body{ background-image: url(../img/Subtract.png); padding: 80px 27px; width: 100%; height: 35rem; background-size: cover; border-radius: 20px; } .form__login_register,.form_login_email,.form_register_email,.login_register_otp,.login_register_otp_email{ display: flex; flex-direction: column; justify-content: space-between; height: 22rem; gap: 15px; } .form_register_email{ gap: 10px; } button.login_register__submitbtn{ padding: 1rem; border-radius: 8px; border: none; background-color: var(--main-color); color: white; font-size: 14px; font-weight: bold; cursor: pointer; transition: all .5s linear; animation: chang 2 linear; position: relative; height: 51px; } .form_register_email .login_register__submitbtn{ padding: 1.8rem !important; } button.login_register__submitbtn.loading:before, button.aramis__login_btn.loading:before, button.aramis__register_btn.loading:before { content: ''; background-image: url(../img/Ellipsis-2.6s-200px.svg); width: 120px; height: 60px; position: absolute; left: 50%; transform: translate(-50%); } .login_register__input{ position: relative; } .login_register__input label{ position: absolute; right: 31px; top: 50%; transform: translate(1px, -11px); font-size: 13px; color: #8a8585; transition: all .3s ease; } .login_register__input i{ position: absolute; right: 0; bottom: 50%; transform: translate(-10px, 7px); } body .login_register__input input{ width: 100%; padding: 10px 30px; width: 100%; height: 48px; border: 1px solid #cacaca; border-radius: 8px; outline: none; } .login_register__input input:focus{ border-color: var(--main-color); } .login_register__input input:focus + label{ top: 1px; right: 12px; font-size: 11px; background: #fff; padding: 0 6px; } p.login_register__description{ font-size: 15px; color: rgb(53, 53, 53); text-align: right; } .login_register__description_after_btn{ font-size: 14px; color: gray; text-align: right; } p.login_register___text{ font-size: 18px; font-weight: bold; color: rgb(53, 53, 53); padding-bottom: 12px; } .logo__section{ margin-bottom: -46px; width: 100%; /* margin-left: 18px; */ } .logo__section img{ width: 100px; } .container { max-width: 80rem; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; } .close__section___btn{ position: relative; top: 77%; } .close__section.layout-2 .close__section___btn{ right: 42px; top: 80%; } .alert_message{ color: red; text-align: right; display: flex; align-items: center; gap: 4px; } .alert_message.success{ color: #1bd01b; } .alert_message.error{ color: red; } .footer__section { background-color: white; height: 196px; border-radius: 20px; margin-top: 15px; padding: 20px 30px; } .footer__section p { font-size: 15px; color: rgb(79, 79, 79); line-height: 24px; text-align: justify; } .container_login_register_layout2 { max-width: 1350px; margin: 0 auto; height: 100%; display: flex; align-items: center; } /* new css style 2 */ .background-wrapper{ height: 100%; } .container_login_register_layout2{ max-width: 1350px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: center; } .close__section.layout-2{ top: -68px; } .wplus-row { display: flex; flex-direction: column; align-items: center; gap: 23px; position: relative; } .wplus__top_row { display: flex; width: 800px; } .wplus__bottom_row { background-color: white; border-radius: 20px; margin-top: 20px; padding: 20px 30px; max-width: 100%; font-size: 15px; color: gray; text-align: justify; max-width: 800px; } .wplus__bottom_row p{ font-size: 15px; color: rgb(79, 79, 79); line-height: 24px; text-align: justify; } .right__section.layout-2 { width: 50%; position: relative; } .left__section.layout-2 { width: 50%; } .logo__section.layout-2 { margin-left:0px; margin-bottom: 0px; position: absolute; left: 50%; transform: translate(-50%); top: -58px; } .left__section.layout-2 { background-image: url(../img/default-sidebar-img.png); background-size: cover; background-position: center; border-radius: 1.2rem 1.2rem 1.2rem 1.2rem; } .right__section.layout-2::before { content: ''; background: #ffffff; width: 24px; height: 36px; position: absolute; left: 0; } .right__section.layout-2:after { content: ''; background: #ffffff; width: 24px; height: 36px; position: absolute; bottom: 0; left: 0; } .right__section__register { text-align: center; position: relative; width: 50%; } @media only screen and (max-width:900px) { .right__section { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 390px; height: 737px; } .left__section { display: none; } .wplus__top_row { display: flex; justify-content: center; width: 400px; } .right__section__register { width: 100%; } .close__section { left: 5%; z-index: 999; } .left-img { display: none; } .login-section { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 390px; height: 737px; } .login-body .number { font-size: 14px; color: rgb(53, 53, 53); } .login-footer p { font-size: 14px; color: rgb(79, 79, 79); line-height: 24px; text-align: justify; } } @media only screen and (min-width:900px) { .login-body .number { font-size: 15px; color: rgb(53, 53, 53); text-align: justify; /* border: 1px solid red; */ width: 330px; } .login-footer p { font-size: 15px; color: rgb(79, 79, 79); line-height: 24px; text-align: justify; } } .have_ticket a:before { content: ''; width: 10px; height: 10px; background: red; position: absolute; right: 5px; top: 1px; border-radius: 50%; } /* custom filan */ body p{ margin: 0; } body .card_header hr { max-width: unset; margin: 0; } body .link_primary { color: #1e73be; } a.btn{ padding: 0; min-height: 0; line-height: unset; text-transform: unset; text-shadow: none; font-weight: unset; font-family: unset; font-style: unset; } body ol,body ul,body li{ padding: 0; margin: 0; } .card_header .title{ margin: 0; font-family: inherit; font-style: inherit; line-height: unset; } .alfashop_container { width: var(--width-100); max-width: var(--width-width3); margin: 0 auto; } body :is(.btn,.button,button,[type="submit"],[type="button"]):hover { color: unset; background-color: unset; } .dashboard_menu__item .icon svg{ width: 15px; } .show_avatar_yes .dashboard_side:before { content: unset; } body h1, body h2,body h3,body h4,body h5,body h6 { margin-bottom: unset; color: unset; text-transform: unset; font-weight: unset; font-style: unset; font-family: unset; line-height: unset; } .show_avatar_yes .dashboard_side .dashboard_avatar { display: none; } .deactive-logo-yes .logo__section { display: none; } .remove-background-yes .login_register__body{ background-image: unset; } .deactive-close-btn-yes .close__section{ display: none; } .elementor .swiper_homepage.bottom .swiper_control .swiper_control__navigation{ flex-direction: row-reverse; } .elementor .swiper_homepage.bottom .swiper_control .swiper-pagination{ gap: 7px; } .elementor-widget-container .login_register__body{ background-image: unset; }
[-] hint.min.css
[edit]
[-] fontawesome.css
[edit]
[+]
webfonts
[-] swiper.min.css
[edit]
[-] all.css
[edit]
[-] icon-bulk-style.css
[edit]
[-] global.css
[edit]
[-] factor.css
[edit]
[-] global-fonts.css
[edit]
[+]
..
[-] loginpic.png
[edit]
[-] icon-style.css
[edit]