@charset "UTF-8"; /* Google Fonts (Ubuntu, Open Sans, Voltaire) are imported in the of index.html. The font families are defined as CSS variables in variables.scss. */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Voltaire&display=swap&family=Baloo+2:wght@400..800"); :root { /* ——— Font families ——— */ --font-sans: 'Open Sans', sans-serif; --font-ubuntu: 'Ubuntu', sans-serif; --font-voltair: 'Voltaire', sans-serif; --font-moniker: 'Moniker', sans-serif; --font-baloo: 'Baloo 2', sans-serif; /* ——— Colors ——— */ /* Blue */ --blue-400: #3160df; --blue-500: #5d44c9; --blue-600: #265096; --blue-800: #0c2773; --fuchsia-light-50: #c7c0e8; --fuchsia-light-400: #5d44c9; /* Fuchsia */ --fuchsia-50: #fef9fc; --fuchsia-100: #fbeaf4; --fuchsia-200: #f3d9e7; --fuchsia-220: #e6dae6; --fuchsia-250: #c1bbe6; --fuchsia-300: #d9c7d9; --fuchsia-400: #bc96bc; --fuchsia-450: #ab63ab; --fuchsia-500: #8c0383; --fuchsia-600: #990990; --fuchsia-700: #88007e; --fuchsia-800: #660660; --fuchsia-900: #380435; /* Gray */ --gray-50: #fdfcfe; --gray-100: #f7f5fc; --gray-200: #f6f6f6; --gray-300: #ccb8cc; --gray-400: #928992; --gray-600: #7f727f; --gray-700: #666666; --gray-800: #52525f; --gray-900: #414141; /* Green */ --green-300: #008c09; --green-400: #17773c; /* Orange */ --orange-200: #e5aa45; --orange-300: #f0906e; --orange-800: #d06928; /* Red */ --red-400: #c7382a; /* White */ --white: #ffffff; --black: #000000; } /* Moniker font is self-hosted. */ /* ExtraLight */ @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; } @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; } /* Light */ @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebLight.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebLightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; } /* Medium */ @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebMediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; } /* Regular */ @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebRegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; } /* Bold */ @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebBold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "Moniker"; src: url("./assets/fonts/moniker/MonikerWebBoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; } .infineat-single-product { background-color: var(--gray-200); } .infineat-single-product__box { display: flex; gap: 32px; background-color: var(--white); border-radius: 16px; padding: 28px 20px; border: 1px solid var(--fuchsia-300); box-shadow: 0 0 20px 0 rgba(105, 99, 134, 0.2); margin-bottom: 32px; flex-wrap: wrap; } .infineat-single-product__box:last-child { margin-bottom: 0; } .infineat-single-product__left { display: flex; flex-direction: column; flex: 0 0 calc(45% - 16px); width: calc(45% - 16px); gap: 16px; } .infineat-single-product__right { flex: 0 0 calc(55% - 16px); width: calc(55% - 16px); } .infineat-single-product__main-gallery .swiper { height: 100%; } .infineat-single-product__main-gallery .swiper-wrapper { height: 100%; } .infineat-single-product__main-gallery .swiper > svg { position: absolute; z-index: 200; left: 16px; bottom: 16px; width: 36px; height: 36px; cursor: pointer; color: var(--fuchsia-400); padding: 6px; border: 1px solid var(--fuchsia-400); background-color: var(--gray-100); border-radius: 20px; corner-shape: squircle; } .infineat-single-product__main-gallery .swiper-slide { aspect-ratio: 4/3; max-height: 100%; text-align: center; } .infineat-single-product__main-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } .infineat-single-product__main-gallery .swiper-button-next, .infineat-single-product__main-gallery .swiper-button-prev { color: var(--black); opacity: 0.75; } .infineat-single-product__main-gallery .swiper-button-next svg, .infineat-single-product__main-gallery .swiper-button-prev svg { width: 24px; height: 24px; } .infineat-single-product__thumbs-gallery .swiper { height: 100%; } .infineat-single-product__thumbs-gallery .swiper-wrapper { height: 100%; } .infineat-single-product__thumbs-gallery .swiper-slide { aspect-ratio: 4/3; cursor: pointer; max-height: 100%; } .infineat-single-product__thumbs-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; opacity: 0.5; transition: opacity 0.3s ease-in-out; } .infineat-single-product__thumbs-gallery .swiper-slide-thumb-active img { opacity: 1; } .infineat-single-product__gallery { display: flex; flex-direction: column; gap: 16px; position: relative; } .infineat-single-product__gallery > svg { position: absolute; z-index: 200; top: 16px; right: 16px; width: 36px; height: 36px; cursor: pointer; color: var(--fuchsia-400); display: none; } .infineat-single-product__gallery.fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--white); z-index: 1000; } .infineat-single-product__gallery.fullscreen > svg { display: block; } .infineat-single-product__gallery.fullscreen .infineat-single-product__main-gallery { flex: 0 0 calc(100% - 160px - 16px); height: calc(100% - 160px - 16px); display: flex; align-items: center; justify-content: center; padding: 16px; } .infineat-single-product__gallery.fullscreen .infineat-single-product__main-gallery .swiper > svg { display: none; } .infineat-single-product__gallery.fullscreen .infineat-single-product__main-gallery .swiper-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .infineat-single-product__gallery.fullscreen .infineat-single-product__thumbs-gallery { flex: 0 0 160px; height: 160px; padding: 16px; border-top: 1px solid var(--fuchsia-300); } .infineat-single-product table { margin-top: auto; width: 100%; border: 1px solid var(--fuchsia-300); border-radius: 12px; border-spacing: 0; border-collapse: separate; table-layout: fixed; background-color: var(--gray-100); margin-bottom: 16px; } .infineat-single-product table thead tr th, .infineat-single-product table thead tr td { line-height: 32px; font-weight: 500; color: var(--fuchsia-800); text-align: left; padding: 2px 8px 0; border-right: 1px solid var(--fuchsia-220); } .infineat-single-product table thead tr th:last-child, .infineat-single-product table thead tr td:last-child { border-right: unset; } .infineat-single-product table tbody { background-color: var(--white); box-shadow: 0 -1px 0 0 var(--fuchsia-220); border-radius: 11px; } .infineat-single-product table tbody tr td { line-height: 36px; position: relative; padding: 0 8px; border-right: 1px solid var(--fuchsia-220); } .infineat-single-product table tbody tr td:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background-color: var(--fuchsia-220); height: 1px; } .infineat-single-product table tbody tr td:first-child:before { left: 8px; } .infineat-single-product table tbody tr td:last-child { border-right: unset; } .infineat-single-product table tbody tr td:last-child:before { right: 8px; } .infineat-single-product table tbody tr:first-child td:first-child { border-radius: 11px 0 0 0; } .infineat-single-product table tbody tr:first-child td:last-child { border-radius: 0 11px 0 0; } .infineat-single-product table tbody tr:last-child td:before { display: none; } .infineat-single-product table tbody tr:last-child td:first-child { border-radius: 0 0 0 11px; } .infineat-single-product table tbody tr:last-child td:last-child { border-radius: 0 0 11px 0; } .infineat-single-product__table { margin-top: auto; margin-bottom: 32px; } .infineat-single-product__table table { margin-bottom: unset; } .infineat-single-product__table table thead tr td, .infineat-single-product__table table thead tr th { border-right: unset; text-align: center; font-weight: 400; } .infineat-single-product__table table tbody tr td { color: var(--fuchsia-600); border-right: unset; text-align: center; } .infineat-single-product__table table tbody tr td:last-child { color: var(--fuchsia-800); font-weight: 500; } .infineat-single-product__description { max-width: 850px; width: 100%; margin: 0 auto; line-height: 22px; text-align: justify; } .infineat-single-product__description > span { font-size: 24px; color: var(--fuchsia-600); padding: 0 8px; display: block; line-height: 52px; border-bottom: 1px solid var(--fuchsia-450); font-family: var(--font-ubuntu); } .infineat-single-product__description p { margin-top: unset; } .infineat-single-product__dropdown { margin-bottom: 24px; } .infineat-single-product__dropdown__item { border: 1px solid transparent; border-bottom: 1px solid var(--fuchsia-300); transition: 0.15s; } .infineat-single-product__dropdown__item:first-child { border-radius: 12px 12px 0 0; border-top-color: transparent; } .infineat-single-product__dropdown__item:last-child { border-bottom-color: transparent; border-radius: 0 0 12px 12px; } .infineat-single-product__dropdown__item:last-child:first-child { border-radius: 12px; } .infineat-single-product__dropdown__item__header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; padding: 0 12px; transition: 0.15s; } .infineat-single-product__dropdown__item__header > span { font-size: 18px; font-weight: 400; line-height: 52px; color: var(--fuchsia-600); } .infineat-single-product__dropdown__item__header svg.dropdown-toggle { width: 20px; height: 20px; color: var(--fuchsia-500); margin-left: auto; transition: 0.15s; } .infineat-single-product__dropdown__item__header div { flex: 0 0 100%; padding-left: 36px; padding-bottom: 12px; transition: 0.15s; } .infineat-single-product__dropdown__item__header div p { margin: 0; font-size: 14px; font-weight: 300; color: var(--fuchsia-900); } .infineat-single-product__dropdown__item__content { display: none; padding: 0 12px; transition: 0.15s; } .infineat-single-product__dropdown__item[data-status=expand] .infineat-single-product__dropdown__item__content { display: block; padding-top: 4px; padding-bottom: 4px; } .infineat-single-product__dropdown__item[data-status=expand] .infineat-single-product__dropdown__item__header { padding-bottom: 4px; } .infineat-single-product__dropdown__item[data-status=expand] .infineat-single-product__dropdown__item__header > span { font-weight: 500; } .infineat-single-product__dropdown__item[data-status=expand] .infineat-single-product__dropdown__item__header svg.dropdown-toggle { transform: rotateX(180deg); } .infineat-single-product__dropdown__item[data-status=expand] .infineat-single-product__dropdown__item__header div { display: none; } .infineat-single-product__title { padding-top: 16px; } .infineat-single-product__title small { font-size: 20px; font-family: var(--font-ubuntu); color: var(--fuchsia-600); display: block; margin-bottom: 6px; } .infineat-single-product__title h1 { font-size: 22px; font-weight: 400; margin-top: unset; color: var(--fuchsia-800); } .infineat-single-product__star { display: flex; align-items: center; gap: 4px; } .infineat-single-product__star__wrapper { position: relative; width: 84px; } .infineat-single-product__star svg { width: 16px; height: 16px; flex: 0 0 16px; } .infineat-single-product__star__empty { color: var(--gray-400); display: flex; align-items: center; gap: 1px; } .infineat-single-product__star__fill { color: var(--orange-200); display: flex; align-items: center; gap: 1px; position: absolute; left: 0; top: 0; right: 0; overflow: hidden; } .infineat-single-product__star__content span { color: var(--blue-400); } .infineat-single-product__star__content small { color: var(--fuchsia-800); } .infineat-single-product__short-description { font-size: 16px; color: var(--fuchsia-600); margin-bottom: 46px; } .infineat-single-product__specifications { margin-bottom: 16px; } .infineat-single-product__specifications > span { color: var(--fuchsia-600); font-family: var(--font-ubuntu); font-size: 16px; display: block; margin-bottom: 8px; } .infineat-single-product__specifications ul { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; } .infineat-single-product__specifications ul li { padding: 0 12px; border-radius: 16px; line-height: 24px; color: var(--fuchsia-800); background-color: var(--fuchsia-50); border: 1px solid var(--fuchsia-400); corner-shape: squircle; } .infineat-single-product__vendor { border: 1px solid var(--fuchsia-220); border-radius: 16px; background-color: var(--gray-100); box-shadow: -3px 0 5px 0 rgba(105, 99, 134, 0.1); max-width: 450px; } .infineat-single-product__vendor__header { border-radius: 15px 15px 0 0; padding: 8px 12px; display: flex; align-items: center; gap: 12px; } .infineat-single-product__vendor__header img { width: 36px; height: 36px; } .infineat-single-product__vendor__header div { display: flex; flex-direction: column; } .infineat-single-product__vendor__header div small { color: var(--fuchsia-light-400); font-size: 14px; } .infineat-single-product__vendor__header div span { font-size: 18px; font-weight: 500; font-family: var(--font-ubuntu); color: var(--fuchsia-600); } .infineat-single-product__vendor__body { box-shadow: 0 -1px 0 0 var(--fuchsia-220); border-radius: 15px; background-color: var(--white); padding: 12px; } .infineat-single-product__vendor__top { display: flex; align-items: center; border-bottom: 1px solid var(--fuchsia-300); padding: 0 0 8px 8px; } .infineat-single-product__vendor__left-col { display: flex; flex-direction: column; } .infineat-single-product__vendor__offer { color: var(--orange-800); font-family: var(--font-voltair); } .infineat-single-product__vendor__price { display: flex; gap: 12px; padding: 8px 0; } .infineat-single-product__vendor__price span { font-size: 24px; color: var(--red-400); } .infineat-single-product__vendor__price span:nth-child(2) { color: var(--gray-600); text-decoration: line-through; } .infineat-single-product__vendor__price span:first-child:last-child { color: var(--fuchsia-600); } .infineat-single-product__vendor__price-description { display: flex; flex-direction: column; margin-bottom: 12px; font-size: 16px; } .infineat-single-product__vendor__price-description span { color: var(--fuchsia-600); } .infineat-single-product__vendor__price-description small { color: var(--gray-400); font-weight: 300; } .infineat-single-product__vendor__vat { color: var(--gray-400); } .infineat-single-product__vendor__vat a { color: var(--blue-600); text-decoration: underline; } .infineat-single-product__vendor__sku { color: var(--gray-400); } .infineat-single-product__vendor__stock-status { color: var(--fuchsia-light-400); font-size: 16px; font-weight: 300; } .infineat-single-product__vendor__right-col { margin-left: auto; display: flex; flex-direction: column; gap: 8px; } .infineat-single-product__vendor__right-col > button, .infineat-single-product__vendor__right-col > a { background-color: var(--fuchsia-600); border-radius: 18px; line-height: 36px; padding: 0 12px; margin: 0; border: unset; color: var(--white); display: flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 300; transition: 0.15s; white-space: nowrap; } .infineat-single-product__vendor__right-col > button svg, .infineat-single-product__vendor__right-col > a svg { width: 20px; height: 20px; } .infineat-single-product__vendor__right-col > button:hover, .infineat-single-product__vendor__right-col > a:hover { background-color: var(--fuchsia-800); } .infineat-single-product__vendor__bottom { padding: 8px 0 0 8px; } .infineat-single-product__vendor__notice { color: var(--red-400); line-height: 24px; display: flex; align-items: center; gap: 8px; font-family: var(--font-voltair); padding: 8px 0; } .infineat-single-product__vendor__notice svg { width: 16px; height: 16px; } .infineat-single-product__vendor__shipping { font-family: var(--font-voltair); color: var(--green-400); display: flex; align-items: center; gap: 2px; padding: 4px 0; margin-left: -6px; } .infineat-single-product__vendor__shipping svg { width: 28px; height: 28px; } .infineat-single-product__vendor__shipping div { display: flex; flex-direction: column; } .infineat-single-product__vendor__quantity { display: inline-flex; align-items: center; justify-content: space-between; background-color: var(--fuchsia-50); color: var(--fuchsia-800); line-height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-500); } .infineat-single-product__vendor__quantity button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; background-color: unset; border: unset; cursor: pointer; border-radius: 50%; font-size: 18px; font-weight: 500; transition: 0.1s; color: var(--fuchsia-800); min-height: auto; position: relative; } .infineat-single-product__vendor__quantity button svg { width: 36px; height: 36px; border-radius: 50%; } .infineat-single-product__vendor__quantity button.quantity-minus .icon-minus, .infineat-single-product__vendor__quantity button.quantity-minus .icon-trash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s ease; } .infineat-single-product__vendor__quantity button.quantity-minus .icon-trash { opacity: 0; pointer-events: none; } .infineat-single-product__vendor__quantity button.quantity-minus.is-trash .icon-minus { opacity: 0; pointer-events: none; } .infineat-single-product__vendor__quantity button.quantity-minus.is-trash .icon-trash { opacity: 1; pointer-events: auto; } .infineat-single-product__vendor__quantity button:hover { background-color: unset; border: unset; } .infineat-single-product__vendor__quantity button:active { background-color: var(--fuchsia-100); } .infineat-single-product__vendor__quantity input[type=number] { background-color: unset; border: unset; width: 50px; font-size: 20px; text-align: center; font-weight: 500; color: var(--fuchsia-800); height: 30px; line-height: 30px; border: 1px solid transparent; border-radius: 4px; font-family: var(--font-moniker); margin: 0 -2px; padding: 0; appearance: textfield; } .infineat-single-product__vendor__quantity input[type=number]::-webkit-inner-spin-button, .infineat-single-product__vendor__quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-single-product__vendor__quantity input[type=number]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-single-product__vendor__quantity input[type=number]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } @media (max-width: 992px) { .infineat-single-product__left, .infineat-single-product__right { width: calc(50% - 16px); flex: 0 0 calc(50% - 16px); } } @media (max-width: 768px) { .infineat-single-product__left, .infineat-single-product__right { width: 100%; flex: 0 0 100%; } .infineat-single-product__table { margin-bottom: unset; } .infineat-single-product__box { gap: 16px; padding: 16px; } .infineat-single-product__vendor { max-width: 100%; } } /*# sourceMappingURL=single-product-build.css.map */