@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"); html { scroll-behavior: smooth; } .flatpickr-calendar { background: transparent; opacity: 0; display: none; text-align: center; visibility: hidden; padding: 0; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; border-radius: 5px; position: absolute; width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-touch-action: manipulation; touch-action: manipulation; background: #fff; -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); } .flatpickr-calendar.open, .flatpickr-calendar.inline { opacity: 1; max-height: 640px; visibility: visible; } .flatpickr-calendar.open { display: inline-block; z-index: 99999; } .flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.inline { display: block; position: relative; top: 2px; } .flatpickr-calendar.static { position: absolute; top: calc(100% + 2px); } .flatpickr-calendar.static.open { z-index: 999; display: block; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { -webkit-box-shadow: none !important; box-shadow: none !important; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .flatpickr-calendar .hasWeeks .dayContainer { border-left: 0; } .flatpickr-calendar.hasTime .flatpickr-time { height: 40px; border-top: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; } .flatpickr-calendar:before, .flatpickr-calendar:after { position: absolute; display: block; pointer-events: none; border: solid transparent; content: ""; height: 0; width: 0; left: 22px; } .flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after { left: auto; right: 22px; } .flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after { left: 50%; right: 50%; } .flatpickr-calendar:before { border-width: 5px; margin: 0 -5px; } .flatpickr-calendar:after { border-width: 4px; margin: 0 -4px; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { bottom: 100%; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #e6e6e6; } .flatpickr-calendar.arrowTop:after { border-bottom-color: #fff; } .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { top: 100%; } .flatpickr-calendar.arrowBottom:before { border-top-color: #e6e6e6; } .flatpickr-calendar.arrowBottom:after { border-top-color: #fff; } .flatpickr-calendar:focus { outline: 0; } .flatpickr-wrapper { position: relative; display: inline-block; } .flatpickr-months { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-months .flatpickr-month { background: transparent; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); height: 34px; line-height: 1; text-align: center; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; cursor: pointer; position: absolute; top: 0; height: 34px; padding: 10px; z-index: 3; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); } .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled { display: none; } .flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i { position: relative; } .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /* /*rtl:begin:ignore*/ left: 0; } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /* /*rtl:begin:ignore*/ right: 0; } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: #959ea9; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #f64747; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; } .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path { -webkit-transition: fill 0.1s; transition: fill 0.1s; fill: inherit; } .numInputWrapper { position: relative; height: auto; } .numInputWrapper input, .numInputWrapper span { display: inline-block; } .numInputWrapper input { width: 100%; } .numInputWrapper input::-ms-clear { display: none; } .numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .numInputWrapper span { position: absolute; right: 0; width: 14px; padding: 0 4px 0 2px; height: 50%; line-height: 50%; opacity: 0; cursor: pointer; border: 1px solid rgba(57, 57, 57, 0.15); -webkit-box-sizing: border-box; box-sizing: border-box; } .numInputWrapper span:hover { background: rgba(0, 0, 0, 0.1); } .numInputWrapper span:active { background: rgba(0, 0, 0, 0.2); } .numInputWrapper span:after { display: block; content: ""; position: absolute; } .numInputWrapper span.arrowUp { top: 0; border-bottom: 0; } .numInputWrapper span.arrowUp:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid rgba(57, 57, 57, 0.6); top: 26%; } .numInputWrapper span.arrowDown { top: 50%; } .numInputWrapper span.arrowDown:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(57, 57, 57, 0.6); top: 40%; } .numInputWrapper span svg { width: inherit; height: auto; } .numInputWrapper span svg path { fill: rgba(0, 0, 0, 0.5); } .numInputWrapper:hover { background: rgba(0, 0, 0, 0.05); } .numInputWrapper:hover span { opacity: 1; } .flatpickr-current-month { font-size: 135%; line-height: inherit; font-weight: 300; color: inherit; position: absolute; width: 75%; left: 12.5%; padding: 7.48px 0 0 0; line-height: 1; height: 34px; display: inline-block; text-align: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 700; color: inherit; display: inline-block; margin-left: 0.5ch; padding: 0; } .flatpickr-current-month span.cur-month:hover { background: rgba(0, 0, 0, 0.05); } .flatpickr-current-month .numInputWrapper { width: 6ch; width: 7ch\0 ; display: inline-block; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month input.cur-year { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; cursor: text; padding: 0 0 0 0.5ch; margin: 0; display: inline-block; font-size: inherit; font-family: inherit; font-weight: 300; line-height: inherit; height: auto; border: 0; border-radius: 0; vertical-align: initial; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .flatpickr-current-month input.cur-year:focus { outline: 0; } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgba(0, 0, 0, 0.5); background: transparent; pointer-events: none; } .flatpickr-current-month .flatpickr-monthDropdown-months { appearance: menulist; background: transparent; border: none; border-radius: 0; box-sizing: border-box; color: inherit; cursor: pointer; font-size: inherit; font-family: inherit; font-weight: 300; height: auto; line-height: inherit; margin: -1px 0 0 0; outline: none; padding: 0 0 0 0.5ch; position: relative; vertical-align: initial; -webkit-box-sizing: border-box; -webkit-appearance: menulist; -moz-appearance: menulist; width: auto; } .flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active { outline: none; } .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(0, 0, 0, 0.05); } .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: transparent; outline: none; padding: 0; } .flatpickr-weekdays { background: transparent; text-align: center; overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 28px; } .flatpickr-weekdays .flatpickr-weekdaycontainer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } span.flatpickr-weekday { cursor: default; font-size: 90%; background: transparent; color: rgba(0, 0, 0, 0.54); line-height: 1; margin: 0; text-align: center; display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-weight: bolder; } .dayContainer, .flatpickr-weeks { padding: 1px 0 0 0; } .flatpickr-days { position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 307.875px; } .flatpickr-days:focus { outline: 0; } .dayContainer { padding: 0; outline: 0; text-align: left; width: 307.875px; min-width: 307.875px; max-width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .dayContainer + .dayContainer { -webkit-box-shadow: -1px 0 0 #e6e6e6; box-shadow: -1px 0 0 #e6e6e6; } .flatpickr-day { background: none; border: 1px solid transparent; border-radius: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #393939; cursor: pointer; font-weight: 400; width: 14.2857143%; -webkit-flex-basis: 14.2857143%; -ms-flex-preferred-size: 14.2857143%; flex-basis: 14.2857143%; max-width: 39px; height: 39px; line-height: 39px; margin: 0; display: inline-block; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { cursor: pointer; outline: 0; background: #e6e6e6; border-color: #e6e6e6; } .flatpickr-day.today { border-color: #959ea9; } .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: #959ea9; background: #959ea9; color: #fff; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: #569ff7; -webkit-box-shadow: none; box-shadow: none; color: #fff; border-color: #569ff7; } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 50px 0 0 50px; } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 0 50px 50px 0; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { -webkit-box-shadow: -10px 0 0 #569ff7; box-shadow: -10px 0 0 #569ff7; } .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 50px; } .flatpickr-day.inRange { border-radius: 0; -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(57, 57, 57, 0.3); background: transparent; border-color: transparent; cursor: default; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { cursor: not-allowed; color: rgba(57, 57, 57, 0.1); } .flatpickr-day.week.selected { border-radius: 0; -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; } .flatpickr-day.hidden { visibility: hidden; } .rangeMode .flatpickr-day { margin-top: 1px; } .flatpickr-weekwrapper { float: left; } .flatpickr-weekwrapper .flatpickr-weeks { padding: 0 12px; -webkit-box-shadow: 1px 0 0 #e6e6e6; box-shadow: 1px 0 0 #e6e6e6; } .flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 28px; } .flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover { display: block; width: 100%; max-width: none; color: rgba(57, 57, 57, 0.3); background: transparent; cursor: default; border: none; } .flatpickr-innerContainer { display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .flatpickr-rContainer { display: inline-block; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .flatpickr-time { text-align: center; outline: 0; display: block; height: 0; line-height: 40px; max-height: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-time:after { content: ""; display: table; clear: both; } .flatpickr-time .numInputWrapper { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 40%; height: 40px; float: left; } .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #393939; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #393939; } .flatpickr-time.hasSeconds .numInputWrapper { width: 26%; } .flatpickr-time.time24hr .numInputWrapper { width: 49%; } .flatpickr-time input { background: transparent; -webkit-box-shadow: none; box-shadow: none; border: 0; border-radius: 0; text-align: center; margin: 0; padding: 0; height: inherit; line-height: inherit; color: #393939; font-size: 14px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .flatpickr-time input.flatpickr-hour { font-weight: bold; } .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { font-weight: 400; } .flatpickr-time input:focus { outline: 0; border: 0; } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { height: inherit; float: left; line-height: inherit; color: #393939; font-weight: bold; width: 2%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 400; } .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #eee; } .flatpickr-input[readonly] { cursor: pointer; } @-webkit-keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /** * Swiper 12.0.3 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: October 21, 2025 */ :root { --swiper-theme-color:#007aff; } :host { display: block; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .swiper { display: block; list-style: none; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0; position: relative; z-index: 1; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { box-sizing: initial; display: flex; height: 100%; position: relative; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); width: 100%; z-index: 1; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translateZ(0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { display: block; flex-shrink: 0; height: 100%; position: relative; transition-property: transform; width: 100%; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { backface-visibility: hidden; transform: translateZ(0); } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; .swiper-cube-shadow, .swiper-slide { transform-style: preserve-3d; } } .swiper-css-mode { > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } &.swiper-horizontal { > .swiper-wrapper { scroll-snap-type: x mandatory; } } &.swiper-vertical { > .swiper-wrapper { scroll-snap-type: y mandatory; } } &.swiper-free-mode { > .swiper-wrapper { scroll-snap-type: none; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } } &.swiper-centered { > .swiper-wrapper:before { content: ""; flex-shrink: 0; order: 9999; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } } &.swiper-centered.swiper-horizontal { > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } > .swiper-wrapper:before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } } &.swiper-centered.swiper-vertical { > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } > .swiper-wrapper:before { height: var(--swiper-centered-offset-after); min-width: 1px; width: 100%; } } } .swiper-3d { .swiper-slide-shadow, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 10; } .swiper-slide-shadow { background: rgba(0, 0, 0, 0.1490196078); } .swiper-slide-shadow-left { background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-right { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-top { background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-bottom { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0)); } } .swiper-lazy-preloader { border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top: 4px solid rgba(0, 0, 0, 0); box-sizing: border-box; height: 42px; left: 50%; margin-left: -21px; margin-top: -21px; position: absolute; top: 50%; transform-origin: 50%; width: 42px; z-index: 10; } .swiper-watch-progress .swiper-slide-visible, .swiper:not(.swiper-watch-progress) { .swiper-lazy-preloader { animation: swiper-preloader-spin 1s linear infinite; } } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode { .swiper-wrapper:after { content: ""; left: 0; pointer-events: none; position: absolute; top: 0; } } .swiper-virtual.swiper-css-mode.swiper-horizontal { .swiper-wrapper:after { height: 1px; width: var(--swiper-virtual-size); } } .swiper-virtual.swiper-css-mode.swiper-vertical { .swiper-wrapper:after { height: var(--swiper-virtual-size); width: 1px; } } :root { --swiper-navigation-size:44px; } .swiper-button-next, .swiper-button-prev { align-items: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); cursor: pointer; display: flex; height: var(--swiper-navigation-size); justify-content: center; position: absolute; width: var(--swiper-navigation-size); z-index: 10; &.swiper-button-disabled { cursor: auto; opacity: 0.35; pointer-events: none; } &.swiper-button-hidden { cursor: auto; opacity: 0; pointer-events: none; } .swiper-navigation-disabled & { display: none !important; } svg { height: 100%; object-fit: contain; transform-origin: center; width: 100%; fill: currentColor; pointer-events: none; } } .swiper-button-lock { display: none; } .swiper-button-next, .swiper-button-prev { margin-top: calc(0px - var(--swiper-navigation-size) / 2); top: var(--swiper-navigation-top-offset, 50%); } .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 4px); right: auto; .swiper-navigation-icon { transform: rotate(180deg); } } .swiper-button-next { left: auto; right: var(--swiper-navigation-sides-offset, 4px); } .swiper-horizontal { .swiper-button-next, .swiper-button-prev, ~ .swiper-button-next, ~ .swiper-button-prev { margin-left: 0; margin-top: calc(0px - var(--swiper-navigation-size) / 2); top: var(--swiper-navigation-top-offset, 50%); } &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next, & ~ .swiper-button-prev, .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 4px); right: auto; } &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev, & ~ .swiper-button-next, .swiper-button-next { left: auto; right: var(--swiper-navigation-sides-offset, 4px); } &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next, & ~ .swiper-button-prev, .swiper-button-prev { .swiper-navigation-icon { transform: rotate(180deg); } } &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev { .swiper-navigation-icon { transform: rotate(0deg); } } } .swiper-vertical { .swiper-button-next, .swiper-button-prev, ~ .swiper-button-next, ~ .swiper-button-prev { left: var(--swiper-navigation-top-offset, 50%); margin-left: calc(0px - var(--swiper-navigation-size) / 2); margin-top: 0; right: auto; } .swiper-button-prev, ~ .swiper-button-prev { bottom: auto; top: var(--swiper-navigation-sides-offset, 4px); .swiper-navigation-icon { transform: rotate(-90deg); } } .swiper-button-next, ~ .swiper-button-next { bottom: var(--swiper-navigation-sides-offset, 4px); top: auto; .swiper-navigation-icon { transform: rotate(90deg); } } } .swiper-pagination { position: absolute; text-align: center; transform: translateZ(0); transition: opacity 0.3s; z-index: 10; &.swiper-pagination-hidden { opacity: 0; } &.swiper-pagination-disabled, .swiper-pagination-disabled > & { display: none !important; } } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: var(--swiper-pagination-bottom, 8px); left: 0; top: var(--swiper-pagination-top, auto); width: 100%; } .swiper-pagination-bullets-dynamic { font-size: 0; overflow: hidden; .swiper-pagination-bullet { position: relative; transform: scale(0.33); } .swiper-pagination-bullet-active, .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } } .swiper-pagination-bullet { background: var(--swiper-pagination-bullet-inactive-color, #000); border-radius: var(--swiper-pagination-bullet-border-radius, 50%); display: inline-block; height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); button& { appearance: none; border: none; box-shadow: none; margin: 0; padding: 0; } .swiper-pagination-clickable & { cursor: pointer; } &:only-child { display: none !important; } } .swiper-pagination-bullet-active { background: var(--swiper-pagination-color, var(--swiper-theme-color)); opacity: var(--swiper-pagination-bullet-opacity, 1); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { left: var(--swiper-pagination-left, auto); right: var(--swiper-pagination-right, 8px); top: 50%; transform: translate3d(0, -50%, 0); .swiper-pagination-bullet { display: block; margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; } &.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; .swiper-pagination-bullet { display: inline-block; transition: transform 0.2s, top 0.2s; } } } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets { .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } &.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; .swiper-pagination-bullet { transition: transform 0.2s, left 0.2s; } } } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform 0.2s, right 0.2s; } .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.2509803922)); position: absolute; .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); height: 100%; left: 0; position: absolute; top: 0; transform: scale(0); transform-origin: left top; width: 100%; } .swiper-rtl & .swiper-pagination-progressbar-fill { transform-origin: right top; } &.swiper-pagination-horizontal, &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-horizontal > &, .swiper-vertical > &.swiper-pagination-progressbar-opposite { height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; width: 100%; } &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, &.swiper-pagination-vertical, .swiper-horizontal > &.swiper-pagination-progressbar-opposite, .swiper-vertical > & { height: 100%; left: 0; top: 0; width: var(--swiper-pagination-progressbar-size, 4px); } } .swiper-pagination-lock { display: none; } .swiper-scrollbar { background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1019607843)); border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; &.swiper-scrollbar-disabled, .swiper-scrollbar-disabled > & { display: none !important; } &.swiper-scrollbar-horizontal, .swiper-horizontal > & { bottom: var(--swiper-scrollbar-bottom, 4px); height: var(--swiper-scrollbar-size, 4px); left: var(--swiper-scrollbar-sides-offset, 1%); position: absolute; top: var(--swiper-scrollbar-top, auto); width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2); z-index: 50; } &.swiper-scrollbar-vertical, .swiper-vertical > & { height: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2); left: var(--swiper-scrollbar-left, auto); position: absolute; right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); width: var(--swiper-scrollbar-size, 4px); z-index: 50; } } .swiper-scrollbar-drag { background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5019607843)); border-radius: var(--swiper-scrollbar-border-radius, 10px); height: 100%; left: 0; position: relative; top: 0; width: 100%; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { align-items: center; display: flex; height: 100%; justify-content: center; text-align: center; width: 100%; > canvas, > img, > svg { max-height: 100%; max-width: 100%; object-fit: contain; } } .swiper-slide-zoomed { cursor: move; touch-action: none; } .swiper .swiper-notification { left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { margin: 0 auto; transition-timing-function: ease-out; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-direction: column; flex-wrap: wrap; } .swiper-fade { &.swiper-free-mode { .swiper-slide { transition-timing-function: ease-out; } } .swiper-slide { pointer-events: none; transition-property: opacity; .swiper-slide { pointer-events: none; } } .swiper-slide-active { pointer-events: auto; & .swiper-slide-active { pointer-events: auto; } } } .swiper.swiper-cube { overflow: visible; } .swiper-cube { .swiper-slide { backface-visibility: hidden; height: 100%; pointer-events: none; transform-origin: 0 0; visibility: hidden; width: 100%; z-index: 1; .swiper-slide { pointer-events: none; } } &.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-slide-active { &, & .swiper-slide-active { pointer-events: auto; } } .swiper-slide-active, .swiper-slide-next, .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube-shadow { bottom: 0; height: 100%; left: 0; opacity: 0.6; position: absolute; width: 100%; z-index: 0; &:before { background: #000; bottom: 0; content: ""; filter: blur(50px); left: 0; position: absolute; right: 0; top: 0; } } } .swiper-cube { .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } } .swiper-cube { .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-slide-shadow-cube.swiper-slide-shadow-top { backface-visibility: hidden; z-index: 0; } } .swiper.swiper-flip { overflow: visible; } .swiper-flip { .swiper-slide { backface-visibility: hidden; pointer-events: none; z-index: 1; .swiper-slide { pointer-events: none; } } .swiper-slide-active { &, & .swiper-slide-active { pointer-events: auto; } } } .swiper-flip { .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-slide-shadow-flip.swiper-slide-shadow-top { backface-visibility: hidden; z-index: 0; } } .swiper-creative { .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } } .swiper.swiper-cards { overflow: visible; } .swiper-cards { .swiper-slide { backface-visibility: hidden; overflow: hidden; transform-origin: center bottom; } } :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-550: #674fcc; --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: #f43e01; /* Red */ --red-200: #ffdbd8; --red-400: #c7382a; /* White */ --white: #ffffff; --black: #000000; } /* Moniker font is self-hosted. */ /* ExtraLight */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; } /* Light */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebLight.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebLightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; } /* Medium */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebMediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; } /* Regular */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebRegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; } /* Bold */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebBold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebBoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; } /*.container { max-width: 1370px; margin: 50px auto; padding: 0 16px; }*/ .button-outline, a.button-outline { font-size: 16px; line-height: 38px; min-height: 40px; border: 1px solid var(--fuchsia-700); background-color: var(--fuchsia-50); color: var(--fuchsia-600); display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border-radius: 20px; transition: 0.1s; min-width: 250px; min-height: auto; } .button-outline:hover, a.button-outline:hover { background-color: var(--fuchsia-200); color: var(--fuchsia-600); } .button-fill, a.button-fill { font-size: 16px; background-color: var(--fuchsia-600); color: var(--white); display: inline-flex; align-items: center; justify-content: center; line-height: 40px; min-height: 40px; padding: 0 24px; border-radius: 20px; transition: 0.1s; min-width: 250px; min-height: auto; border: unset; cursor: pointer; } .button-fill:hover, a.button-fill:hover { background-color: var(--fuchsia-800); color: var(--white); } @media (max-width: 768px) { .button-outline, a.button-outline { min-width: unset; font-size: 14px; } .button-fill, a.button-fill { min-width: unset; font-size: 14px; } } .flatpickr-calendar { box-shadow: rgba(105, 99, 134, 0.2) 0px 5px 10px 0px; border: 1px solid var(--fuchsia-300); } .flatpickr-months .flatpickr-month { color: var(--fuchsia-800); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background-color: var(--fuchsia-800); border-color: var(--fuchsia-800); } .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: var(--fuchsia-450); background: var(--fuchsia-450); } .infineat-form-group { display: flex; flex-direction: column; gap: 4px; position: relative; margin-bottom: 20px; } .infineat-form-group > label { font-size: 14px; font-weight: 400; position: absolute; top: 13px; left: 13px; line-height: 26px; font-family: var(--font-ubuntu); transition: 0.1s; color: var(--gray-700); pointer-events: none; display: flex; align-items: center; gap: 4px; margin-bottom: unset; z-index: 5; } .infineat-form-group > label .required { color: var(--red-400); } .infineat-form-group .warning { font-size: 14px; color: var(--gray-600); display: flex; align-items: center; gap: 4px; margin: 0; } .infineat-form-group .warning .required { color: var(--red-400); } .infineat-form-group > input[type=text], .infineat-form-group > input[type=date], .infineat-form-group > input[type=number], .infineat-form-group > input[type=email], .infineat-form-group > input[type=password], .infineat-form-group > input[type=tel], .infineat-form-group > input[type=url], .infineat-form-group > input[type=search], .infineat-form-group > input[type=color], .infineat-form-group > input[type=range], .infineat-form-group > input[type=file], .infineat-form-group > input[type=time] { width: 100%; line-height: 50px; height: auto; padding: 0 12px; border-radius: 6px; border: 1px solid var(--gray-400); font-family: var(--font-ubuntu); transition: 0.15s; color: var(--blue-500); font-size: 16px; } .infineat-form-group > input[type=text]::placeholder, .infineat-form-group > input[type=date]::placeholder, .infineat-form-group > input[type=number]::placeholder, .infineat-form-group > input[type=email]::placeholder, .infineat-form-group > input[type=password]::placeholder, .infineat-form-group > input[type=tel]::placeholder, .infineat-form-group > input[type=url]::placeholder, .infineat-form-group > input[type=search]::placeholder, .infineat-form-group > input[type=color]::placeholder, .infineat-form-group > input[type=range]::placeholder, .infineat-form-group > input[type=file]::placeholder, .infineat-form-group > input[type=time]::placeholder { font-size: 14px; font-family: var(--font-ubuntu); color: var(--fuchsia-250); opacity: 0; } .infineat-form-group > input[type=text]:focus, .infineat-form-group > input[type=date]:focus, .infineat-form-group > input[type=number]:focus, .infineat-form-group > input[type=email]:focus, .infineat-form-group > input[type=password]:focus, .infineat-form-group > input[type=tel]:focus, .infineat-form-group > input[type=url]:focus, .infineat-form-group > input[type=search]:focus, .infineat-form-group > input[type=color]:focus, .infineat-form-group > input[type=range]:focus, .infineat-form-group > input[type=file]:focus, .infineat-form-group > input[type=time]:focus { outline: none; border-color: var(--gray-900); box-shadow: unset; } .infineat-form-group > input[type=text]:focus::placeholder, .infineat-form-group > input[type=date]:focus::placeholder, .infineat-form-group > input[type=number]:focus::placeholder, .infineat-form-group > input[type=email]:focus::placeholder, .infineat-form-group > input[type=password]:focus::placeholder, .infineat-form-group > input[type=tel]:focus::placeholder, .infineat-form-group > input[type=url]:focus::placeholder, .infineat-form-group > input[type=search]:focus::placeholder, .infineat-form-group > input[type=color]:focus::placeholder, .infineat-form-group > input[type=range]:focus::placeholder, .infineat-form-group > input[type=file]:focus::placeholder, .infineat-form-group > input[type=time]:focus::placeholder { opacity: 1; } .infineat-form-group > textarea { font-size: 16px; width: 100%; line-height: 26px; height: auto; padding: 0 12px; border-radius: 6px; color: var(--blue-500); border: 1px solid var(--gray-400); font-family: var(--font-ubuntu); min-width: 100%; max-width: 100%; } .infineat-form-group > textarea::placeholder { font-size: 14px; font-family: var(--font-ubuntu); color: var(--gray-700); opacity: 0; } .infineat-form-group > textarea:focus { outline: none; border-color: var(--gray-900); box-shadow: unset; } .infineat-form-group > textarea:focus::placeholder { opacity: 1; } .infineat-form-group > select { width: 100%; line-height: 50px; height: 52px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--gray-400); font-family: var(--font-ubuntu); transition: 0.15s; color: var(--blue-500); font-size: 16px; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } .infineat-form-group > select:focus { outline: none; border-color: var(--gray-900); box-shadow: unset; } .infineat-form-group.focused > label, .infineat-form-group.filled > label, .infineat-form-group.forced-filled > label { top: 0; font-size: 11px; opacity: 1; line-height: 20px; } .infineat-form-group.focused > input[type=text], .infineat-form-group.focused > input[type=date], .infineat-form-group.focused > input[type=number], .infineat-form-group.focused > input[type=email], .infineat-form-group.focused > input[type=password], .infineat-form-group.focused > input[type=tel], .infineat-form-group.focused > input[type=url], .infineat-form-group.focused > input[type=search], .infineat-form-group.focused > input[type=color], .infineat-form-group.focused > input[type=range], .infineat-form-group.focused > input[type=file], .infineat-form-group.focused > input[type=time], .infineat-form-group.filled > input[type=text], .infineat-form-group.filled > input[type=date], .infineat-form-group.filled > input[type=number], .infineat-form-group.filled > input[type=email], .infineat-form-group.filled > input[type=password], .infineat-form-group.filled > input[type=tel], .infineat-form-group.filled > input[type=url], .infineat-form-group.filled > input[type=search], .infineat-form-group.filled > input[type=color], .infineat-form-group.filled > input[type=range], .infineat-form-group.filled > input[type=file], .infineat-form-group.filled > input[type=time], .infineat-form-group.forced-filled > input[type=text], .infineat-form-group.forced-filled > input[type=date], .infineat-form-group.forced-filled > input[type=number], .infineat-form-group.forced-filled > input[type=email], .infineat-form-group.forced-filled > input[type=password], .infineat-form-group.forced-filled > input[type=tel], .infineat-form-group.forced-filled > input[type=url], .infineat-form-group.forced-filled > input[type=search], .infineat-form-group.forced-filled > input[type=color], .infineat-form-group.forced-filled > input[type=range], .infineat-form-group.forced-filled > input[type=file], .infineat-form-group.forced-filled > input[type=time] { padding-top: 8px; line-height: 42px; } .infineat-form-group.focused > textarea, .infineat-form-group.filled > textarea, .infineat-form-group.forced-filled > textarea { padding-top: 12px; } .infineat-form-group.focused select, .infineat-form-group.filled select, .infineat-form-group.forced-filled select { padding-top: 8px; line-height: 42px; } .infineat-form-group.forced-filled > input[type=text]::placeholder, .infineat-form-group.forced-filled > input[type=date]::placeholder, .infineat-form-group.forced-filled > input[type=number]::placeholder, .infineat-form-group.forced-filled > input[type=email]::placeholder, .infineat-form-group.forced-filled > input[type=password]::placeholder, .infineat-form-group.forced-filled > input[type=tel]::placeholder, .infineat-form-group.forced-filled > input[type=url]::placeholder, .infineat-form-group.forced-filled > input[type=search]::placeholder, .infineat-form-group.forced-filled > input[type=color]::placeholder, .infineat-form-group.forced-filled > input[type=range]::placeholder, .infineat-form-group.forced-filled > input[type=file]::placeholder, .infineat-form-group.forced-filled > input[type=time]::placeholder, .infineat-form-group.forced-filled > textarea::placeholder { opacity: 1; } .infineat-form-group.has-error > input[type=text], .infineat-form-group.has-error > input[type=date], .infineat-form-group.has-error > input[type=number], .infineat-form-group.has-error > input[type=email], .infineat-form-group.has-error > input[type=password], .infineat-form-group.has-error > input[type=tel], .infineat-form-group.has-error > input[type=url], .infineat-form-group.has-error > input[type=search], .infineat-form-group.has-error > input[type=color], .infineat-form-group.has-error > input[type=range], .infineat-form-group.has-error > input[type=file], .infineat-form-group.has-error > input[type=time] { border-color: var(--red-400); } .infineat-form-group.has-error > textarea { border-color: var(--red-400); } .infineat-form-group.has-error > label { color: var(--red-400); } .infineat-form-group:last-child:not(:first-child) { margin-bottom: 0; } .infineat-form-label { margin-bottom: 12px; } .infineat-form-label label { font-size: 16px; font-weight: 400; line-height: 26px; font-family: var(--font-ubuntu); color: var(--fuchsia-600); pointer-events: none; display: flex; align-items: center; gap: 4px; } .infineat-form-label label .required { color: var(--red-400); } .infineat-form-checkbox { margin-bottom: 20px; } .infineat-form-checkbox:first-of-type { margin-top: 20px; } .infineat-form-checkbox--inline { display: flex; align-items: center; gap: 24px; } .infineat-form-checkbox > input[type=radio] { display: none; } .infineat-form-checkbox > input[type=radio]:checked + label { cursor: default; } .infineat-form-checkbox > input[type=radio]:checked + label:before { background-color: var(--fuchsia-600); } .infineat-form-checkbox > input[type=radio] + label { font-size: 16px; color: var(--fuchsia-600); cursor: pointer; display: flex; align-items: center; gap: 8px; } .infineat-form-checkbox > input[type=radio] + label > span { font-weight: 500; margin: 0 -6px; } .infineat-form-checkbox > input[type=radio] + label:before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--white); background-color: var(--white); box-shadow: 0 0 0 2px var(--gray-800); } .infineat-form-checkbox > input[type=checkbox] { display: none; } .infineat-form-checkbox > input[type=checkbox] + label { font-size: 16px; color: var(--fuchsia-600); cursor: pointer; position: relative; padding-left: 32px; line-height: 22px; display: inline-block; } .infineat-form-checkbox > input[type=checkbox] + label > a { color: var(--blue-500); text-decoration: underline; } .infineat-form-checkbox > input[type=checkbox] + label::before { content: ""; display: block; width: 20px; height: 20px; position: absolute; left: 0; top: 0; border-radius: 4px; border: 1px solid var(--blue-550); background-color: var(--white); } .infineat-form-checkbox > input[type=checkbox] + label:after { content: ""; display: block; width: 5px; height: 10px; position: absolute; left: 11px; top: 9px; pointer-events: none; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: translate(-50%, -50%) rotate(45deg); } .infineat-form-checkbox > input[type=checkbox]:checked + label::before { background-color: var(--blue-550); } .infineat-error-message { display: none; font-size: 12px; margin-top: unset; color: var(--red-400); } @media (max-width: 768px) { .infineat-form-group { margin-bottom: 12px; } .infineat-form-group > input[type=text], .infineat-form-group > input[type=date], .infineat-form-group > input[type=number], .infineat-form-group > input[type=email], .infineat-form-group > input[type=password], .infineat-form-group > input[type=tel], .infineat-form-group > input[type=url], .infineat-form-group > input[type=search], .infineat-form-group > input[type=color], .infineat-form-group > input[type=range], .infineat-form-group > input[type=file], .infineat-form-group > input[type=time] { font-size: 14px; line-height: 40px; } .infineat-form-group > select { line-height: 32px; height: 42px; font-size: 14px; } .infineat-form-group > label { font-size: 12px; top: 8px; } .infineat-form-group.focused > input[type=text], .infineat-form-group.focused > input[type=date], .infineat-form-group.focused > input[type=number], .infineat-form-group.focused > input[type=email], .infineat-form-group.focused > input[type=password], .infineat-form-group.focused > input[type=tel], .infineat-form-group.focused > input[type=url], .infineat-form-group.focused > input[type=search], .infineat-form-group.focused > input[type=color], .infineat-form-group.focused > input[type=range], .infineat-form-group.focused > input[type=file], .infineat-form-group.focused > input[type=time], .infineat-form-group.filled > input[type=text], .infineat-form-group.filled > input[type=date], .infineat-form-group.filled > input[type=number], .infineat-form-group.filled > input[type=email], .infineat-form-group.filled > input[type=password], .infineat-form-group.filled > input[type=tel], .infineat-form-group.filled > input[type=url], .infineat-form-group.filled > input[type=search], .infineat-form-group.filled > input[type=color], .infineat-form-group.filled > input[type=range], .infineat-form-group.filled > input[type=file], .infineat-form-group.filled > input[type=time], .infineat-form-group.forced-filled > input[type=text], .infineat-form-group.forced-filled > input[type=date], .infineat-form-group.forced-filled > input[type=number], .infineat-form-group.forced-filled > input[type=email], .infineat-form-group.forced-filled > input[type=password], .infineat-form-group.forced-filled > input[type=tel], .infineat-form-group.forced-filled > input[type=url], .infineat-form-group.forced-filled > input[type=search], .infineat-form-group.forced-filled > input[type=color], .infineat-form-group.forced-filled > input[type=range], .infineat-form-group.forced-filled > input[type=file], .infineat-form-group.forced-filled > input[type=time] { line-height: 32px; } .infineat-form-group.focused > label, .infineat-form-group.filled > label, .infineat-form-group.forced-filled > label { line-height: 18px; font-size: 10px; } .infineat-form-group.focused > select, .infineat-form-group.filled > select, .infineat-form-group.forced-filled > select { line-height: 32px; height: 42px; font-size: 14px; } .infineat-form-checkbox { margin-bottom: 16px; } .infineat-form-checkbox:first-of-type { margin-top: 16px; } .infineat-form-checkbox > input[type=radio] + label { font-size: 14px; gap: 6px; flex-wrap: wrap; } .infineat-form-checkbox > input[type=radio] + label:before { width: 12px; height: 12px; border: 2px solid var(--white); } .infineat-form-checkbox > input[type=checkbox] + label { padding-left: 24px; font-size: 14px; line-height: 18px; } .infineat-form-checkbox > input[type=checkbox] + label::before { width: 16px; height: 16px; } .infineat-form-checkbox > input[type=checkbox] + label:after { left: 9px; top: 8px; } .infineat-form-checkbox--inline { gap: 16px; } .infineat-form-label { margin-bottom: 6px; } .infineat-form-label label { font-size: 12px; } } .row { display: flex; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; } .col-12 { flex: 0 0 100%; width: 100%; padding-right: 10px; padding-left: 10px; } .col-6 { flex: 0 0 50%; width: 50%; padding-right: 10px; padding-left: 10px; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; } .side-shape { background-color: #212121; padding: 16px; min-height: 100vh; display: flex; justify-content: center; gap: 64px; } .side-shape__wrapper { width: 100%; max-width: 340px; height: 800px; } @media (max-width: 768px) { .row { margin-right: -6px; margin-left: -6px; } .col-12 { padding-right: 6px; padding-left: 6px; } .col-6 { padding-right: 6px; padding-left: 6px; } .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 576px) { .col-6 { flex: 0 0 100%; width: 100%; } } .infineat-cart { font-size: 12px; font-family: var(--font-moniker); } .infineat-cart .amount { color: inherit; font-weight: inherit; } .infineat-cart a:not([class^=button]), .infineat-cart a:not([class^=button]):visited, .infineat-cart a:not([class^=button]):hover, .infineat-cart a:not([class^=button]):active { color: var(--blue-600); } .infineat-cart__header { background-color: var(--fuchsia-600); border: 1px solid var(--fuchsia-300); border-radius: 6px; display: flex; align-items: center; line-height: 50px; color: var(--white); padding: 0 24px; margin-bottom: 24px; gap: 12px; font-family: var(--font-ubuntu); } .infineat-cart__header svg { width: 24px; height: 24px; color: #fff; } .infineat-cart__header span { font-weight: 400; font-size: 24px; } .infineat-cart__header small { margin-left: auto; font-size: 18px; } .infineat-cart__box { border: 0.5px solid var(--fuchsia-300); border-radius: 12px; padding: 0 12px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); margin-bottom: 16px; background: var(--white); } .infineat-cart__box--with-background { background-color: var(--gray-100); } .infineat-cart__box--dropdown .infineat-cart__vendor-header { cursor: pointer; } .infineat-cart__box--dropdown .infineat-cart__vendor-header svg { transition: 0.15s; } .infineat-cart__box--dropdown .infineat-cart__total-header { cursor: pointer; } .infineat-cart__box--dropdown .infineat-cart__total-header svg { transition: 0.15s; } .infineat-cart__box--dropdown[data-status=collapse] .infineat-cart__vendor-body[data-visible=collapse], .infineat-cart__box--dropdown[data-status=collapse] .infineat-cart__total-body[data-visible=collapse] { display: block; } .infineat-cart__box--dropdown[data-status=collapse] .infineat-cart__vendor-body[data-visible=expand], .infineat-cart__box--dropdown[data-status=collapse] .infineat-cart__total-body[data-visible=expand] { display: none; } .infineat-cart__box--dropdown[data-status=expand] .infineat-cart__vendor-header svg, .infineat-cart__box--dropdown[data-status=expand] .infineat-cart__total-header svg { transform: rotateX(180deg); } .infineat-cart__box--dropdown[data-status=expand] .infineat-cart__vendor-body[data-visible=expand], .infineat-cart__box--dropdown[data-status=expand] .infineat-cart__total-body[data-visible=expand] { display: block; } .infineat-cart__box--dropdown[data-status=expand] .infineat-cart__vendor-body[data-visible=collapse], .infineat-cart__box--dropdown[data-status=expand] .infineat-cart__total-body[data-visible=collapse] { display: none; } .infineat-cart__shipping-header { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--fuchsia-300); padding: 0 16px; } .infineat-cart__shipping-header svg { color: var(--blue-400); width: 28px; height: 28px; } .infineat-cart__shipping-header span { line-height: 46px; font-size: 14px; color: var(--fuchsia-600); } .infineat-cart__shipping-body { padding: 8px; } .infineat-cart__shipping-item { display: flex; justify-content: space-between; padding: 8px 0; } .infineat-cart__shipping-item__title { display: flex; align-items: flex-start; flex-direction: column; line-height: 24px; } .infineat-cart__shipping-item__title span { color: var(--fuchsia-800); font-size: 22px; font-weight: 400; } .infineat-cart__shipping-item__title small { color: var(--gray-600); font-size: 14px; } .infineat-cart__shipping-item__title small a { text-decoration: underline; } .infineat-cart__shipping-item__detail { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; line-height: 24px; color: var(--fuchsia-800); } .infineat-cart__shipping-item__detail span { font-size: 22px; font-weight: 400; } .infineat-cart__shipping-item__detail small { color: var(--red-400); font-size: 14px; } .infineat-cart__shipping-buttons { padding: 8px 32px; display: flex; align-items: center; justify-content: center; } .infineat-cart__vendor-header { display: flex; align-items: center; gap: 6px; padding: 12px 16px 6px; color: var(--fuchsia-600); font-family: var(--font-ubuntu); font-size: 18px; } .infineat-cart__vendor-header__image { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; } .infineat-cart__vendor-header__image img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; background-color: var(--gray-50); } .infineat-cart__vendor-header__title { flex: 0 1 100%; display: flex; gap: 4px; justify-content: space-between; } .infineat-cart__vendor-header__title small { font-family: var(--font-moniker); color: var(--fuchsia-800); } .infineat-cart__vendor-header svg { width: 24px; height: 24px; } .infineat-cart__vendor-desc { border: 1px solid var(--fuchsia-300); line-height: 28px; text-align: center; border-radius: 6px; font-size: 14px; color: var(--fuchsia-600); background-color: var(--white); } .infineat-cart__vendor-desc span { display: block; } .infineat-cart__vendor-summary { font-size: 20px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; line-height: 44px; padding: 0 16px; color: var(--fuchsia-600); } .infineat-cart__vendor-list { padding: 4px 0; font-size: 16px; } .infineat-cart__vendor-list__item { display: flex; align-items: center; justify-content: space-between; line-height: 24px; padding: 0 16px; color: var(--fuchsia-600); font-size: 14px; } .infineat-cart__vendor-list__item--minus { color: var(--red-400); } .infineat-cart__vendor-list__item--plus { color: var(--blue-400); } .infineat-cart__vendor-list__some { border-top: 1px solid var(--fuchsia-400); padding: 0 8px; margin-top: 8px; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; line-height: 44px; color: var(--fuchsia-600); } .infineat-cart__vendor-table { background-color: var(--white); border-radius: 8px; padding: 12px; margin: 6px -4px 0; } .infineat-cart__vendor-table-wrapper { border: 1px solid var(--fuchsia-400); border-radius: 8px; padding: 8px; position: relative; margin-bottom: 16px; } .infineat-cart__vendor-table-wrapper:last-of-type { margin-bottom: 0; } .infineat-cart__vendor-table-title { text-align: center; border-radius: 6px; line-height: 32px; color: var(--blue-500); position: relative; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); } .infineat-cart__vendor-table-title span { font-family: var(--font-baloo); padding: 0 4px; background-color: var(--white); z-index: 2; position: relative; } .infineat-cart__vendor-item { display: flex; padding: 8px 0; gap: 12px; position: relative; } .infineat-cart__vendor-item:first-of-type { border-top: unset; } .infineat-cart__vendor-item + .infineat-cart__vendor-item { border-top: 1px solid var(--fuchsia-300); } .infineat-cart__vendor-item:last-of-type { border-bottom: unset; } .infineat-cart__vendor-item__discount { position: absolute; background-image: url("../img/sale-badge.png"); background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; width: 79px; height: 39px; left: -21px; top: 16px; color: #fff; font-family: var(--font-voltair); font-weight: 400; font-size: 15px; padding-bottom: 2px; padding-left: 8px; z-index: 50; } .infineat-cart__vendor-item__image { width: 100px; flex: 0 0 100px; text-align: center; display: flex; flex-direction: column; gap: 8px; position: relative; } .infineat-cart__vendor-item__image img { height: auto; width: 100%; aspect-ratio: 1/1; border-radius: 6px; background-color: var(--gray-50); object-fit: cover; } .infineat-cart__vendor-item__quantity { transform: translateX(-50%); position: relative; left: 50%; height: 28px; width: 64px; border: 1px solid var(--fuchsia-450); color: var(--fuchsia-600); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; border-radius: 14px; background-color: var(--fuchsia-50); margin-bottom: -18px; margin-top: -4px; corner-shape: squircle; } .infineat-cart__vendor-item__content { width: calc(100% - 100px - 140px - 24px); flex: 0 0 calc(100% - 100px - 140px - 24px); display: flex; flex-direction: column; gap: 2px; } .infineat-cart__vendor-item__content > small { font-size: 14px; color: var(--fuchsia-600); font-family: var(--font-ubuntu); } .infineat-cart__vendor-item__content > small a:not([class^=button]), .infineat-cart__vendor-item__content > small a:not([class^=button]):visited, .infineat-cart__vendor-item__content > small a:not([class^=button]):hover, .infineat-cart__vendor-item__content > small a:not([class^=button]):active { color: inherit; } .infineat-cart__vendor-item__content > span { font-size: 16px; color: var(--fuchsia-800); } .infineat-cart__vendor-item__content > span a:not([class^=button]), .infineat-cart__vendor-item__content > span a:not([class^=button]):visited, .infineat-cart__vendor-item__content > span a:not([class^=button]):hover, .infineat-cart__vendor-item__content > span a:not([class^=button]):active { color: inherit; } .infineat-cart__vendor-item__content__price { line-height: 28px; padding: 4px 0; display: flex; gap: 16px; align-self: flex-start; } .infineat-cart__vendor-item__content__price > span { color: var(--fuchsia-800); font-size: 18px; } .infineat-cart__vendor-item__content__price > span:last-child:not(:first-child) { margin-left: auto; } .infineat-cart__vendor-item__content__price--has-discount { font-size: 18px; } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(1) { color: var(--red-400); } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(2) { color: var(--gray-600); text-decoration: line-through; } .infineat-cart__vendor-item__content__discount { padding: 0 8px; border: 1px solid var(--fuchsia-500); border-radius: 4px; color: var(--red-400); line-height: 18px; font-family: var(--font-sans); font-weight: 400; font-size: 12px; align-self: flex-start; } .infineat-cart__vendor-item__content__notice { color: var(--orange-800); line-height: 24px; display: flex; align-items: center; gap: 8px; font-family: var(--font-voltair); } .infineat-cart__vendor-item__content__notice svg { width: 16px; height: 16px; } .infineat-cart__vendor-item__content__shipping { font-family: var(--font-voltair); color: var(--green-400); display: flex; align-items: center; gap: 2px; padding: 4px 0; margin-left: -6px; } .infineat-cart__vendor-item__content__shipping svg { width: 28px; height: 28px; } .infineat-cart__vendor-item__content__shipping div { display: flex; flex-direction: column; } .infineat-cart__vendor-item__content--full-width { width: calc(100% - 100px - 12px); flex: 0 0 calc(100% - 100px - 12px); } .infineat-cart__vendor-item__content--full-width .infineat-cart__vendor-item__content__price { align-self: stretch; } .infineat-cart__vendor-item__content--full-width .infineat-cart__vendor-item__content__discount { align-self: stretch; } .infineat-cart__vendor-item__actions { width: 140px; flex: 0 0 140px; display: flex; align-items: center; flex-direction: column; position: relative; gap: 4px; } .infineat-cart__vendor-item__actions__quantity { display: inline-flex; align-items: center; background-color: var(--gray-100); color: var(--fuchsia-800); line-height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-450); } .infineat-cart__vendor-item__actions__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; } .infineat-cart__vendor-item__actions__quantity button svg { width: 36px; height: 36px; border-radius: 50%; } .infineat-cart__vendor-item__actions__quantity button:hover { background-color: unset; border: unset; } .infineat-cart__vendor-item__actions__quantity button:active { background-color: var(--fuchsia-100); } .infineat-cart__vendor-item__actions__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-cart__vendor-item__actions__quantity input[type=number]::-webkit-inner-spin-button, .infineat-cart__vendor-item__actions__quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-cart__vendor-item__actions__quantity input[type=number]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-cart__vendor-item__actions__quantity input[type=number]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } .infineat-cart__vendor-item__actions__quantity-notice { line-height: 24px; min-height: 24px; font-family: var(--font-voltair); } .infineat-cart__vendor-item__actions__quantity-notice span { color: var(--red-400); font-size: 14px; } .infineat-cart__vendor-item__actions__total-price { margin-top: 12px; color: var(--fuchsia-800); font-size: 18px; line-height: 24px; text-align: center; } .infineat-cart__vendor-item__actions__total-price span { display: inline-block; } .infineat-cart__vendor-item__actions__remove { position: absolute; right: -8px; top: 76px; } .infineat-cart__vendor-item__actions__remove a { background: unset; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--fuchsia-600); padding: 0; cursor: pointer; transition: 0.1s; } .infineat-cart__vendor-item__actions__remove a svg { width: 36px; height: 36px; color: var(--fuchsia-600); } .infineat-cart__vendor-item__actions__total-price-notice { min-height: 18px; text-align: center; font-family: var(--font-sans); } .infineat-cart__vendor-item__actions__total-price-notice > span { font-size: 12px; font-weight: 400; line-height: 18px; padding: 0 8px; border-radius: 4px; color: var(--red-400); border: 1px solid var(--fuchsia-500); } .infineat-cart__vendor-item-mini { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--fuchsia-300); } .infineat-cart__vendor-item-mini:last-of-type { border-bottom: unset; } .infineat-cart__vendor-item-mini__image { width: 52px; flex: 0 0 52px; display: flex; } .infineat-cart__vendor-item-mini__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background-color: var(--gray-50); } .infineat-cart__vendor-item-mini__title { display: flex; flex-direction: column; gap: 2px; flex: 0 0 calc(100% - 52px - 160px - 80px - 80px - 32px); } .infineat-cart__vendor-item-mini__title small { font-size: 15px; color: var(--fuchsia-600); font-family: var(--font-baloo); line-height: 18px; } .infineat-cart__vendor-item-mini__title span { font-size: 16px; color: var(--fuchsia-800); } .infineat-cart__vendor-item-mini__price { display: flex; flex-direction: column; flex: 0 0 160px; width: 160px; gap: 4px; line-height: 22px; } .infineat-cart__vendor-item-mini__price > div { display: flex; gap: 12px; } .infineat-cart__vendor-item-mini__price > div span { font-size: 18px; color: var(--red-400); } .infineat-cart__vendor-item-mini__price > div span:nth-child(2) { color: var(--gray-600); text-decoration: line-through; } .infineat-cart__vendor-item-mini__price > div span:first-child:last-child { color: var(--fuchsia-600); } .infineat-cart__vendor-item-mini__price span { font-size: 14px; color: var(--fuchsia-600); } .infineat-cart__vendor-item-mini__stock { flex: 0 0 80px; width: 80px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; text-align: right; color: var(--fuchsia-800); line-height: 22px; } .infineat-cart__vendor-item-mini__stock span { display: flex; align-items: center; gap: 4px; font-weight: 300; } .infineat-cart__vendor-item-mini__stock span b { font-size: 18px; font-weight: 500; } .infineat-cart__vendor-item-mini__final-price { flex: 0 0 80px; width: 80px; display: flex; align-items: center; justify-content: flex-end; text-align: right; color: var(--fuchsia-600); font-size: 18px; line-height: 22px; } .infineat-cart__total-header { font-size: 18px; font-weight: 500; padding: 0 8px; line-height: 32px; padding-top: 8px; color: var(--fuchsia-600); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .infineat-cart__total-header svg { width: 24px; height: 24px; color: var(--fuchsia-500); } .infineat-cart__total-body-content { margin: 8px -4px 0; background-color: var(--white); border-radius: 8px; padding: 8px; } .infineat-cart__total-body-header { display: flex; align-items: center; border-bottom: 1px solid var(--fuchsia-300); padding: 0 12px; gap: 8px; } .infineat-cart__total-body-header svg { color: var(--blue-400); width: 24px; height: 24px; } .infineat-cart__total-body-header span { line-height: 40px; font-size: 12px; color: var(--gray-600); font-family: var(--font-moniker); } .infineat-cart__total-list__header { font-size: 16px; padding: 0 10px; color: var(--fuchsia-600); font-weight: 500; line-height: 32px; margin-bottom: -16px; } .infineat-cart__total-list__header span { position: relative; z-index: 1; background-color: var(--white); padding: 0 4px; } .infineat-cart__total-list__list { padding: 12px 0 8px; border: 1px solid var(--fuchsia-300); border-radius: 6px; margin-bottom: 12px; } .infineat-cart__total-list__list > span { padding: 0 14px; color: var(--fuchsia-600); font-weight: 500; line-height: 32px; font-size: 16px; } .infineat-cart__total-list__list ul { list-style: none; padding: 0; margin: 0; } .infineat-cart__total-list__list ul li { display: flex; justify-content: space-between; line-height: 26px; font-size: 14px; padding: 0 20px; color: var(--fuchsia-800); } .infineat-cart__total-list__list ul li.minus { color: var(--red-400); } .infineat-cart__total-list__list ul li.plus { color: var(--blue-400); } .infineat-cart__total-list__list ul li:has(small) { display: flex; flex-direction: column; line-height: 24px; } .infineat-cart__total-list__item { display: flex; justify-content: space-between; line-height: 24px; font-size: 16px; padding: 0 20px; color: var(--fuchsia-800); margin-bottom: 8px; } .infineat-cart__total-list__item:last-of-type { margin-bottom: 0; } .infineat-cart__total-list__item span.minus { color: var(--green-300); } .infineat-cart__total-list__item span:has(small) { display: flex; flex-direction: column; line-height: 24px; } .infineat-cart__total-list__item span:has(small) small { font-weight: 400; font-size: 14px; line-height: 18px; } .infineat-cart__total-list__group { border-top: 1px solid var(--fuchsia-300); padding: 8px 0; } .infineat-cart__total-list__group .infineat-cart__total-list__item { padding: 0 12px; margin-bottom: 12px; } .infineat-cart__total-list__group .infineat-cart__total-list__item span:first-child { font-size: 18px; font-family: var(--font-sans); font-weight: 500; } .infineat-cart__total-list__group .infineat-cart__total-list__item span:last-child { font-weight: 500; } .infineat-cart__total-list__coupon-item { display: flex; align-items: center; line-height: 34px; gap: 12px; padding: 0 18px; margin-bottom: 8px; font-size: 16px; } .infineat-cart__total-list__coupon-item a { border: 1px solid var(--fuchsia-600); border-radius: 17px; padding: 0 8px 0 4px; display: flex; align-items: center; gap: 8px; color: var(--fuchsia-600); background-color: var(--fuchsia-50); font-family: var(--font-baloo); corner-shape: squircle; font-size: 16px; font-weight: 500; } .infineat-cart__total-list__coupon-item a:not([class^=button]), .infineat-cart__total-list__coupon-item a:not([class^=button]):visited, .infineat-cart__total-list__coupon-item a:not([class^=button]):hover, .infineat-cart__total-list__coupon-item a:not([class^=button]):active { color: var(--fuchsia-600); } .infineat-cart__total-list__coupon-item a svg { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--fuchsia-600); background-color: #fff; } .infineat-cart__total-list__coupon-item span { color: var(--fuchsia-600); } .infineat-cart__total-list__coupon-item span:last-child { margin-left: auto; font-size: 14px; } .infineat-cart__total-list__coupon-item span:last-child.minus { color: var(--green-300); } .infineat-cart__total-list__description { color: var(--gray-600); line-height: 24px; padding: 4px 12px; } .infineat-cart__total-list__description a { text-decoration: underline; } .infineat-cart__total-grand { display: flex; justify-content: space-between; margin-top: 12px; line-height: 32px; font-size: 24px; font-weight: 500; color: var(--fuchsia-600); padding: 0 6px; } .infineat-cart__total-grand-description { line-height: 20px; padding: 0 6px; } .infineat-cart__total-grand-description small { color: var(--fuchsia-800); font-size: 14px; } .infineat-cart__total-grand-description small a { text-decoration: underline; } .infineat-cart__total-grand-rules { margin-top: 46px; padding: 0 6px; color: var(--gray-600); font-size: 14px; } .infineat-cart__total-grand-rules a { text-decoration: underline; } .infineat-cart__total-button { display: flex; align-items: center; justify-content: center; padding: 16px 0; } .infineat-cart__total-button button { font-weight: 500; corner-shape: squircle; } .infineat-cart__footer { padding: 12px 4px; } .infineat-cart__footer p { font-size: 12px; color: var(--blue-600); line-height: 18px; margin: 0; text-align: justify; hyphens: auto; } .infineat-cart__coupon { background-color: var(--white); border-radius: 6px; border: 1px solid var(--fuchsia-300); margin: 16px 0; } .infineat-cart__coupon__header { display: flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; } .infineat-cart__coupon__header span { font-size: 14px; color: var(--fuchsia-800); } .infineat-cart__coupon__header svg { width: 32px; height: 32px; } .infineat-cart__coupon__header svg.dropdown-toggle { color: var(--fuchsia-500); margin-left: auto; width: 24px; height: 24px; transition: 0.15s; } .infineat-cart__coupon__notification { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background-color: var(--white); border-radius: 6px; border: 1px solid var(--fuchsia-300); margin: 16px 0; } .infineat-cart__coupon__notification span { font-size: 14px; color: var(--fuchsia-800); } .infineat-cart__coupon__notification svg { width: 32px; height: 32px; } .infineat-cart__coupon__body { display: flex; align-items: center; gap: 16px; padding: 12px 16px; color: var(--fuchsia-600); font-size: 18px; font-weight: 500; } .infineat-cart__coupon__body .infineat-form-group { width: 100%; flex: 0 1 100%; margin-bottom: 0; max-width: 200px; } .infineat-cart__coupon__body button { min-width: 180px; } .infineat-cart__coupon[data-status=collapse] .infineat-cart__coupon__body { display: none; } .infineat-cart__coupon[data-status=expand] .infineat-cart__coupon__body { display: flex; } .infineat-cart__coupon[data-status=expand] .infineat-cart__coupon__header svg.dropdown-toggle { transform: rotateX(180deg); } .infineat-cart__referral { background-color: var(--white); border-radius: 6px; border: 1px solid var(--fuchsia-300); margin: 16px 0; } .infineat-cart__referral__header { display: flex; align-items: center; gap: 8px; padding: 8px 16px; } .infineat-cart__referral__header span { font-size: 14px; color: var(--fuchsia-800); } .infineat-cart__referral__header svg { width: 32px; height: 32px; } .infineat-cart__referral__body { display: flex; align-items: center; gap: 16px; padding: 12px 16px; color: var(--fuchsia-600); font-size: 18px; font-weight: 500; } .infineat-cart__referral__body .infineat-form-group { width: 100%; flex: 0 1 100%; margin-bottom: 0; max-width: 200px; } .infineat-cart__referral__body button { min-width: 180px; } @media (max-width: 768px) { .infineat-cart__shipping-header { padding: 0; } .infineat-cart__shipping-header span { line-height: 32px; } .infineat-cart__shipping-header svg { width: 24px; height: 24px; } .infineat-cart__vendor-desc { font-size: 12px; } .infineat-cart__shipping-body { padding: 6px 0; } .infineat-cart__shipping-item { padding: 0; } .infineat-cart__shipping-item__title span { font-size: 16px; } .infineat-cart__shipping-item__title small { font-size: 12px; } .infineat-cart__shipping-item__detail span { font-size: 16px; } .infineat-cart__shipping-item__detail small { font-size: 12px; } .infineat-cart__header { line-height: 40px; padding: 0 12px; margin-bottom: 16px; } .infineat-cart__header svg { width: 20px; height: 20px; } .infineat-cart__header span { font-size: 16px; } .infineat-cart__header small { font-size: 14px; } .infineat-cart__box { padding: 4px 10px; } .infineat-cart__vendor-table { padding: 6px; } .infineat-cart__vendor-table-title span { line-height: 16px; display: inline-block; } .infineat-cart__vendor-header { padding: 4px 0; } .infineat-cart__vendor-header__title { flex-direction: column; align-items: flex-start; justify-content: center; } .infineat-cart__vendor-header__title span { font-size: 14px; } .infineat-cart__vendor-header__title small { font-size: 12px; } .infineat-cart__vendor-header svg { width: 20px; flex: 0 0 20px; height: 20px; } .infineat-cart__vendor-item-mini { flex-wrap: wrap; padding: 4px 0; gap: 6px; } .infineat-cart__vendor-item-mini__image { width: 40px; flex: 0 0 40px; } .infineat-cart__vendor-item-mini__title { width: calc(100% - 40px - 8px); flex: 0 0 calc(100% - 40px - 8px); } .infineat-cart__vendor-item-mini__title small { font-size: 12px; } .infineat-cart__vendor-item-mini__title span { font-size: 14px; } .infineat-cart__vendor-item-mini__price { flex: 0 0 calc(100% - 65px - 8px - 65px - 8px); width: calc(100% - 65px - 8px - 65px - 8px); } .infineat-cart__vendor-item-mini__price div span { font-size: 16px; } .infineat-cart__vendor-item-mini__stock { flex: 0 0 65px; width: 65px; } .infineat-cart__vendor-item-mini__stock span { font-size: 14px; } .infineat-cart__vendor-item-mini__final-price { flex: 0 0 65px; width: 65px; } .infineat-cart__vendor-item-mini__final-price span { font-size: 16px; } .infineat-cart__vendor-item { padding: 8px 0; gap: 8px; flex-wrap: wrap; } .infineat-cart__vendor-item__image { width: 60px; flex: 0 0 60px; } .infineat-cart__vendor-item__quantity { font-size: 14px; line-height: 20px; width: 48px; height: 22px; } .infineat-cart__vendor-item__content { gap: 1px; width: calc(100% - 60px - 36px - 8px); flex: 0 0 calc(100% - 60px - 36px - 8px); } .infineat-cart__vendor-item__content--full-width { width: calc(100% - 60px - 8px); flex: 0 0 calc(100% - 60px - 8px); } .infineat-cart__vendor-item__content > span { font-size: 14px; order: 2; } .infineat-cart__vendor-item__content > small { font-size: 12px; order: 1; } .infineat-cart__vendor-item__content__price { padding: 0; order: 5; line-height: 22px; } .infineat-cart__vendor-item__content__price > span { font-size: 16px; } .infineat-cart__vendor-item__content__notice { order: 3; gap: 6px; font-size: 12px; } .infineat-cart__vendor-item__content__notice svg { width: 14px; height: 14px; } .infineat-cart__vendor-item__content__shipping { order: 4; gap: 2px; margin-left: -2px; font-size: 12px; padding: 0; } .infineat-cart__vendor-item__content__shipping svg { width: 20px; height: 20px; } .infineat-cart__vendor-item__content__discount { order: 5; } .infineat-cart__vendor-item__discount { left: -15px; top: 8px; width: 55px; font-size: 12px; padding-left: 4px; } .infineat-cart__vendor-item__actions { z-index: 2; width: 100%; flex: 0 0 100%; flex-wrap: wrap; flex-direction: row-reverse; position: static; } .infineat-cart__vendor-item__actions__total-price { margin: 0; order: 4; margin-right: auto; } .infineat-cart__vendor-item__actions__quantity { order: 3; } .infineat-cart__vendor-item__actions__quantity button { width: 30px; height: 30px; } .infineat-cart__vendor-item__actions__quantity-notice { width: calc(100% - 108px - 4px); flex: 0 0 calc(100% - 108px - 4px); order: 2; text-align: left; margin-right: auto; } .infineat-cart__vendor-item__actions__total-price-notice { width: 108px; flex: 0 0 108px; text-align: center; order: 1; } .infineat-cart__vendor-item__actions__remove { right: 0; top: 0; } .infineat-cart__vendor-list { padding-bottom: 0; } .infineat-cart__vendor-list__item { padding: 0 4px; } .infineat-cart__vendor-list__some { padding: 0; line-height: 36px; margin-top: 6px; font-size: 16px; } .infineat-cart__total-header { padding: 0; line-height: 32px; } .infineat-cart__total-header span { font-size: 14px; } .infineat-cart__total-header svg { width: 20px; height: 20px; } .infineat-cart__total-body-content { padding: 6px; } .infineat-cart__total-list__header span { font-size: 14px; } .infineat-cart__total-list__list { font-size: 14px; } .infineat-cart__total-list__list ul li { padding: 0 8px; line-height: 22px; } .infineat-cart__total-list__item { padding: 0 8px; line-height: 22px; font-size: 14px; } .infineat-cart__total-list__coupon-item { padding: 0 8px; gap: 6px; font-size: 14px; } .infineat-cart__total-list__coupon-item a { padding: 0 6px 0 4px; gap: 4px; font-size: 12px; line-height: 30px; } .infineat-cart__total-list__coupon-item a svg { width: 24px; height: 24px; } .infineat-cart__total-list__coupon-item span { font-size: 12px; } .infineat-cart__total-grand { font-size: 20px; } .infineat-cart__coupon__header { padding: 8px; } .infineat-cart__coupon__header svg { width: 24px; height: 24px; } .infineat-cart__coupon__header svg.dropdown-toggle { width: 20px; height: 20px; } .infineat-cart__coupon__body .button-fill { min-width: unset; white-space: nowrap; } } .infineat-product-card { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--fuchsia-300); box-shadow: 0 5px 10px 0 rgba(105, 99, 134, 0.2); font-size: 12px; background-color: var(--white); position: relative; z-index: 1; transition: z-index 0s linear 0.5s, transform 0.15s linear, box-shadow 0.15s linear, border-color 0.15s linear; } .infineat-product-card__image { width: 100%; aspect-ratio: 1/1; border-radius: 11px 11px 0 0; overflow: hidden; position: relative; background-color: var(--fuchsia-50); } .infineat-product-card__image img { width: 100%; height: 100%; object-fit: cover; } .infineat-product-card__image img:nth-child(2) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: 0.25s ease-in-out; } .infineat-product-card__image:hover img:last-child { opacity: 1; visibility: visible; } .infineat-product-card__content { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 4px; } .infineat-product-card__offer { font-size: 14px; line-height: 18px; min-height: 18px; color: var(--red-400); font-family: var(--font-voltair); } .infineat-product-card__out-of-stock { font-size: 14px; line-height: 18px; min-height: 18px; color: var(--fuchsia-light-400); } .infineat-product-card__price { margin-top: 4px; margin-bottom: 4px; display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--fuchsia-800); font-family: var(--font-moniker); line-height: 18px; min-height: 18px; } .infineat-product-card__price span.old-price { text-decoration: line-through; color: var(--gray-600); } .infineat-product-card__price span.sale-price { color: var(--red-400); } .infineat-product-card__price span .amount, .infineat-product-card__price span.amount { color: inherit; font-weight: inherit; } .infineat-product-card__price-info { font-weight: 300; margin-top: -4px; line-height: 16px; min-height: 32px; } .infineat-product-card__price-info span, .infineat-product-card__price-info .amount { display: block; color: var(--fuchsia-500); font-weight: 400; } .infineat-product-card__price-info span:last-child:not(:first-child), .infineat-product-card__price-info .amount:last-child:not(:first-child) { color: var(--fuchsia-400); } .infineat-product-card__vendor { margin-top: 8px; } .infineat-product-card__vendor a { display: flex; align-items: center; gap: 6px; color: var(--fuchsia-600); font-family: var(--font-voltair); line-height: 32px; min-height: 32px; font-size: 14px; } .infineat-product-card__vendor a:hover { color: var(--fuchsia-700); } .infineat-product-card__vendor a img { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; } .infineat-product-card__category { position: relative; display: flex; align-items: center; justify-content: center; } .infineat-product-card__category span { color: var(--blue-500); font-family: var(--font-baloo); font-size: 12px; padding: 0 4px; background-color: var(--white); line-height: 14px; min-height: 14px; z-index: 2; position: relative; } .infineat-product-card__category::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; z-index: 1; background-color: var(--fuchsia-300); } .infineat-product-card__title { line-height: 18px; min-height: 56px; } .infineat-product-card__title span { font-size: 14px; line-height: 16px; color: var(--fuchsia-600); font-family: var(--font-ubuntu); } .infineat-product-card__title h2, .infineat-product-card__title h3, .infineat-product-card__title h4 { font-weight: 400; margin: 0; } .infineat-product-card__title h2 a, .infineat-product-card__title h3 a, .infineat-product-card__title h4 a { font-size: 14px; color: var(--fuchsia-800); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .infineat-product-card__title h2 a:hover, .infineat-product-card__title h3 a:hover, .infineat-product-card__title h4 a:hover { color: var(--fuchsia-800); } .infineat-product-card__title--without-brand h2 a, .infineat-product-card__title--without-brand h3 a, .infineat-product-card__title--without-brand h4 a { -webkit-line-clamp: 3; } .infineat-product-card__discount { position: absolute; background-image: url("../img/sale-badge.png"); background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; width: 79px; height: 39px; left: -13px; top: 12px; color: #fff; font-family: var(--font-voltair); font-weight: 400; font-size: 15px; padding-bottom: 2px; padding-left: 8px; } .infineat-product-card__add-to-wishlist { position: absolute; right: 16px; top: 16px; font-size: 24px; cursor: pointer; } .infineat-product-card__add-to-wishlist a { color: var(--white); } .infineat-product-card__add-to-wishlist a svg.icon-heart-default, .infineat-product-card__add-to-wishlist a svg.icon-heart-filled { stroke: var(--red-400); stroke-width: 2px; width: 32px; height: 32px; } .infineat-product-card__add-to-wishlist a:hover { color: var(--white); } .infineat-product-card__notice { color: var(--orange-800); line-height: 16px; display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-voltair); } .infineat-product-card__notice svg { flex: 0 0 16px; width: 16px; height: 16px; } .infineat-product-card__shipping { font-family: var(--font-voltair); color: var(--green-400); display: flex; align-items: center; gap: 2px; padding-bottom: 4px; margin-left: -6px; } .infineat-product-card__shipping svg { width: 28px; height: 28px; } .infineat-product-card__shipping div { display: flex; flex-direction: column; } .infineat-product-card__sku { padding-top: 6px; border-top: 1px solid var(--fuchsia-300); } .infineat-product-card__sku span { font-size: 12px; color: var(--gray-600); } .infineat-product-card__product-star { display: flex; align-items: center; gap: 4px; } .infineat-product-card__add-to-cart { position: absolute; top: 50%; right: 16px; opacity: 0; visibility: hidden; transform: translateY(-50%) scale(0.5); transition: 0.25s ease-in-out; z-index: 10; } .infineat-product-card__add-to-cart a { color: var(--white); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--fuchsia-600); transition: 0.25s ease-in-out; } .infineat-product-card__add-to-cart a:hover { color: var(--white); background-color: var(--fuchsia-800); } .infineat-product-card__add-to-cart a svg { width: 20px; height: 20px; } .infineat-product-card__add-to-cart--loading { cursor: default; transform: translateY(-50%) scale(1); opacity: 1; visibility: visible; } .infineat-product-card__add-to-cart--loading::before { content: ""; position: absolute; top: calc(50% - 20px); left: calc(50% - 20px); border: 2px solid var(--white); border-color: var(--white) transparent transparent transparent; animation: spin 0.75s infinite linear; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; } .infineat-product-card__quantity { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 66px; transform-origin: right; display: inline-flex; align-items: center; background-color: var(--gray-50); color: var(--fuchsia-800); line-height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-450); box-shadow: 0 0 5px 0 rgba(105, 99, 134, 0.35); opacity: 0; visibility: hidden; transition: width 0.25s 1s, opacity 0.1s 1s, visibility 0.1s 1s; z-index: 30; overflow: hidden; } .infineat-product-card__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; } .infineat-product-card__quantity button svg { width: 36px; height: 36px; border-radius: 50%; } .infineat-product-card__quantity button:hover { background-color: unset; border: unset; } .infineat-product-card__quantity button:active { background-color: var(--fuchsia-100); } .infineat-product-card__quantity .icon-trash { display: none; } .infineat-product-card__quantity .minus.is-trash .icon-trash { display: block; } .infineat-product-card__quantity .minus.is-trash .icon-minus { display: none; } .infineat-product-card__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: 0.5px solid transparent; border-radius: 8px; font-family: var(--font-moniker); margin: 0 -2px; padding: 0; appearance: textfield; z-index: 20; } .infineat-product-card__quantity input[type=number]::-webkit-inner-spin-button, .infineat-product-card__quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-product-card__quantity input[type=number]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-product-card__quantity input[type=number]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } .infineat-product-card__cart-count { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; background-color: var(--gray-50); color: var(--fuchsia-800); line-height: 36px; border-radius: 20px; border: 1px solid var(--fuchsia-450); box-shadow: 0 0 5px 0 rgba(105, 99, 134, 0.35); font-family: var(--font-moniker); font-size: 20px; font-weight: 500; opacity: 0; visibility: hidden; min-width: 65px; transition: min-width 0.25s 1s, opacity 0.1s 1s, visibility 0.1s 1s; } .infineat-product-card__cart-count svg { width: 20px; height: 20px; color: var(--fuchsia-600); } .infineat-product-card__actions { position: relative; } .infineat-product-card__actions[data-has-in-cart=loading] .infineat-product-card__add-to-cart { display: none; } .infineat-product-card__actions[data-has-in-cart=loading] .infineat-product-card__quantity { opacity: 1; visibility: visible; width: 120px; transition: width 0.25s 0s, opacity 0.25s 0s, visibility 0.25s 0s; } .infineat-product-card__actions[data-has-in-cart=loading] .infineat-product-card__quantity:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--fuchsia-500); border-radius: 20px; animation: clippath 1.5s infinite linear; z-index: 100; } .infineat-product-card__actions[data-has-in-cart=loading] .infineat-product-card__cart-count { opacity: 0; visibility: hidden; min-width: 120px; box-shadow: 0 0 5px 0 rgba(105, 99, 134, 0); transition: min-width 0.25s 0s, opacity 0.25s 0s, visibility 0.25s 0s; } .infineat-product-card__actions[data-has-in-cart=true] .infineat-product-card__add-to-cart { display: none; } .infineat-product-card__actions[data-has-in-cart=true] .infineat-product-card__cart-count { opacity: 1; visibility: visible; transition: min-width 0.25s 0s, opacity 0.25s 0s, visibility 0.25s 0s; } .infineat-product-card__actions[data-has-in-cart=true]:hover .infineat-product-card__quantity { opacity: 1; visibility: visible; width: 120px; transition: width 0.25s 0s, opacity 0.25s 0s, visibility 0.25s 0s; } .infineat-product-card__actions[data-has-in-cart=true]:hover .infineat-product-card__cart-count { opacity: 0; visibility: hidden; min-width: 120px; box-shadow: 0 0 5px 0 rgba(105, 99, 134, 0); transition: min-width 0.25s 0s, opacity 0.25s 0s, visibility 0.25s 0s; } /* Product Archive block layout and pagination. */ .infineat-product-grid-wrapper { display: grid; grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr)); gap: 1rem; width: 100%; } .infineat-product-grid-wrapper .infineat-product-card { min-width: 0; } .infineat-plus-pagination { grid-column: 1 / -1; margin-top: 30px; text-align: center; } .infineat-plus-pagination .page-numbers { padding: 8px 12px; margin: 0 2px; border: 1px solid #ddd; text-decoration: none; border-radius: 4px; } .infineat-plus-pagination .page-numbers.current { background-color: #3160df; color: #fff; border-color: #3160df; } /* Product Archive wishlist button: Woodmart owns the component outside this card. */ .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn { position: relative; width: 32px; height: 32px; } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a { position: absolute; inset: 0; z-index: 10; color: transparent; font-size: 0; } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a::before, .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a.added::before, .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a:hover::before { display: none; content: ""; } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > svg.icon-heart-default, .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > svg.icon-heart-filled { position: absolute; inset: 0; width: 32px; height: 32px; pointer-events: none; } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > svg.icon-heart-default { display: block; color: var(--white); stroke: var(--red-400); stroke-width: 2px; } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > svg.icon-heart-filled { display: none; fill: var(--red-400); stroke: var(--white); color: var(--white); } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a.added ~ svg.icon-heart-default { display: none; } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a.added ~ svg.icon-heart-filled { display: block; } /* Related-products carousel wishlist button. */ .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn { position: relative; width: 32px; height: 32px; } .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a { position: absolute; inset: 0; z-index: 10; color: transparent; font-size: 0; } .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a::before, .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a.added::before, .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a:hover::before { display: none; content: ""; } .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > svg.icon-heart-default, .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > svg.icon-heart-filled { position: absolute; inset: 0; width: 32px; height: 32px; pointer-events: none; } .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > svg.icon-heart-default { display: block; color: var(--white); stroke: var(--red-400); stroke-width: 2px; } .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > svg.icon-heart-filled { display: none; fill: var(--red-400); stroke: var(--white); color: var(--white); } .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a.added ~ svg.icon-heart-default { display: none; } .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn > a.added ~ svg.icon-heart-filled { display: block; } @media (max-width: 767px) { .infineat-product-grid-wrapper { grid-template-columns: repeat(var(--mobile-columns, 2), minmax(0, 1fr)); } } @media (min-width: 768px) { .infineat-product-grid-wrapper { grid-template-columns: repeat(var(--desktop-columns, 5), minmax(0, 1fr)); } } .infineat-product-card__hide-elements { position: absolute; left: -1px; right: -1px; top: calc(100% - 72px); background-color: var(--white); border-radius: 0 0 12px 12px; border: 1px solid var(--fuchsia-300); border-top: none; box-shadow: 0 5px 10px 0 rgba(105, 99, 134, 0.2); padding: 0 16px 8px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: 0.25s 0.25s ease-in-out; gap: 0; } .infineat-product-card__hide-elements:before { content: ""; position: absolute; top: -8px; height: 8px; left: 0; right: 0; background-color: var(--white); } .infineat-product-card__hide-elements .infineat-product-card__title h2, .infineat-product-card__hide-elements .infineat-product-card__title h3, .infineat-product-card__hide-elements .infineat-product-card__title h4 { font-weight: 400; margin: 0; } .infineat-product-card__hide-elements .infineat-product-card__title h2 a, .infineat-product-card__hide-elements .infineat-product-card__title h3 a, .infineat-product-card__hide-elements .infineat-product-card__title h4 a { -webkit-line-clamp: unset; } .infineat-product-card__hide-elements .infineat-product-card__title--without-brand h2 a, .infineat-product-card__hide-elements .infineat-product-card__title--without-brand h3 a, .infineat-product-card__hide-elements .infineat-product-card__title--without-brand h4 a { -webkit-line-clamp: unset; } .infineat-product-card--out-of-stock .infineat-product-card__image img { opacity: 0.3; } .infineat-product-card--out-of-stock .infineat-product-card__image:hover img:last-child { opacity: 0; visibility: hidden; } .infineat-product-card--out-of-stock .infineat-product-card__add-to-cart { cursor: not-allowed; } .infineat-product-card--out-of-stock .infineat-product-card__add-to-cart a { background-color: var(--fuchsia-300); pointer-events: none; } .infineat-product-card:hover { z-index: 100; transition-delay: 0s; transform: translateY(-5px); box-shadow: 0 5px 20px 0 rgba(105, 99, 134, 0.25); } .infineat-product-card:hover .infineat-product-card__hide-elements { opacity: 1; visibility: visible; gap: 6px; } .infineat-product-card:hover .infineat-product-card__add-to-cart { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } @media (max-width: 768px) { .infineat-product-card__content { padding: 8px 10px 10px; } .infineat-product-card__hide-elements { padding: 0 10px 6px; top: calc(100% - 66px); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes clippath { 0%, 100% { clip-path: inset(95% 0 0 0); } 25% { clip-path: inset(0 95% 0 0); } 50% { clip-path: inset(0 0 95% 0); } 75% { clip-path: inset(0 0 0 95%); } } .product-card-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background-color: var(--white); border: 1px solid #d7c7d7; border-radius: 12px; padding: 12px; box-shadow: 0 0 20px 0 rgba(105, 99, 134, 0.2); position: relative; } .product-card-mini__image { width: 70px; height: 70px; flex: 0 0 70px; border-radius: 6px; border: 1px solid #dccbdc; } .product-card-mini__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .product-card-mini__price { width: calc(100% - 70px - 12px); flex: 0 0 calc(100% - 70px - 12px); color: #800080; font-size: 16px; font-weight: 500; } .product-card-mini__title { width: 100%; flex: 0 0 100%; display: flex; flex-direction: column; gap: 2px; } .product-card-mini__title small { color: #8f6b8f; } .product-card-mini__title span { color: #3a003a; font-weight: 500; } .product-card-mini > a { position: absolute; inset: 0; z-index: 10; border-radius: 12px; } .infineat-checkout__dropdown { margin-bottom: 24px; border-radius: 12px; background-color: var(--white); box-shadow: 0 0 20px rgba(105, 99, 134, 0.2); padding: 1px 12px; } .infineat-checkout__dropdown__item { border: 1px solid transparent; border-bottom: 1px solid var(--fuchsia-300); border-top: 1px solid var(--fuchsia-300); transition: 0.15s; margin-top: -1px; padding: 0; } .infineat-checkout__dropdown__item:first-child { border-radius: 12px 12px 0 0; border-top-color: transparent; } .infineat-checkout__dropdown__item:last-child { border-bottom-color: transparent; border-radius: 0 0 12px 12px; } .infineat-checkout__dropdown__item:last-child:first-child { border-radius: 12px; } .infineat-checkout__dropdown__item__header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid transparent; padding: 12px 8px 6px; transition: 0.15s; } .infineat-checkout__dropdown__item__header > span { font-family: var(--font-ubuntu); font-size: 16px; font-weight: 400; line-height: 28px; color: var(--fuchsia-800); display: flex; align-items: center; gap: 8px; } .infineat-checkout__dropdown__item__header > span svg { width: 20px; height: 20px; color: var(--orange-200); } .infineat-checkout__dropdown__item__header svg { color: #3a609f; width: 24px; height: 24px; } .infineat-checkout__dropdown__item__header svg.dropdown-toggle { width: 24px; height: 24px; color: var(--fuchsia-500); margin-left: auto; transition: 0.15s; } .infineat-checkout__dropdown__item__header div { flex: 0 0 100%; padding-left: 36px; padding-bottom: 12px; transition: 0.15s; font-family: var(--font-ubuntu); } .infineat-checkout__dropdown__item__header div p { margin: 0; font-size: 14px; font-weight: 300; color: var(--fuchsia-900); } .infineat-checkout__dropdown__item__header div.placeholder p { color: var(--orange-800); font-size: 14px; font-weight: 400; } .infineat-checkout__dropdown__item__content { display: none; padding: 12px 10px; transition: 0.15s; } .infineat-checkout__dropdown__item[data-status=expand] { border-radius: 12px; border-color: var(--fuchsia-450); margin: 16px 4px; padding: 0 12px; } .infineat-checkout__dropdown__item[data-status=expand]:first-child { border-top-color: var(--fuchsia-450); } .infineat-checkout__dropdown__item[data-status=expand]:last-child { border-bottom-color: var(--fuchsia-450); } .infineat-checkout__dropdown__item[data-status=expand] .infineat-checkout__dropdown__item__content { display: block; } .infineat-checkout__dropdown__item[data-status=expand] .infineat-checkout__dropdown__item__header { border-color: var(--fuchsia-450); padding-bottom: 12px; } .infineat-checkout__dropdown__item[data-status=expand] .infineat-checkout__dropdown__item__header svg.dropdown-toggle { transform: rotateX(180deg); } .infineat-checkout__dropdown__item[data-status=expand] .infineat-checkout__dropdown__item__header div { display: none; } .infineat-checkout__box:last-child { margin-bottom: 0; } .infineat-checkout__box__header { font-family: var(--font-ubuntu); } .infineat-checkout__box__header span { font-size: 18px; color: var(--fuchsia-600); display: block; line-height: 32px; } .infineat-checkout__box__content { display: flex; flex-direction: column; padding: 4px 0; gap: 4px; } .infineat-checkout__box__content p { font-size: 14px; color: var(--gray-600); margin: 0 0 12px; } .infineat-checkout__box__content__title { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--fuchsia-300); padding-top: 12px; } .infineat-checkout__box__content__title:first-child { padding-top: 0; border-top: none; } .infineat-checkout__box__content__title svg { width: 24px; height: 24px; color: var(--blue-500); } .infineat-checkout__box__content__title span { font-size: 16px; font-family: var(--font-ubuntu); font-weight: 400; color: var(--fuchsia-800); line-height: 32px; } .infineat-checkout__box__content__address__content { display: flex; flex-direction: column; padding-left: 36px; padding-right: 36px; } .infineat-checkout__box__content__address__content p { font-size: 14px; color: var(--fuchsia-900); margin: 0 0 4px; } .infineat-checkout__box__content__delivery-address__item { border-radius: 8px; padding: 8px 36px; position: relative; border: 1px solid transparent; } .infineat-checkout__box__content__delivery-address__item__header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .infineat-checkout__box__content__delivery-address__item__header label { font-size: 16px; display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--fuchsia-800); } .infineat-checkout__box__content__delivery-address__item__header label:before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--white); background-color: var(--white); box-shadow: 0 0 0 2px var(--gray-800); } .infineat-checkout__box__content__delivery-address__item__header span { margin-left: auto; cursor: pointer; color: var(--blue-600); text-decoration: underline; display: none; } .infineat-checkout__box__content__delivery-address__item__content { display: none; padding: 12px 0; color: var(--fuchsia-900); } .infineat-checkout__box__content__delivery-address__item__content p { font-size: 14px; margin: 0 0 12px; color: var(--fuchsia-900); } .infineat-checkout__box__content__delivery-address__item__content ul { list-style: none; padding: 0; margin: 0; } .infineat-checkout__box__content__delivery-address__item__content ul li { font-size: 14px; margin: 0 0 12px; display: flex; gap: 6px; } .infineat-checkout__box__content__delivery-address__item__content ul li span { color: var(--gray-600); } .infineat-checkout__box__content__delivery-address__item__edit { display: none; padding: 12px 0 0; color: var(--fuchsia-900); } .infineat-checkout__box__content__delivery-address__item__edit p { font-size: 16px; margin: 0 0 12px; } .infineat-checkout__box__content__delivery-address__content { padding-top: 12px; } .infineat-checkout__box__content__delivery-address__content > input[type=radio] { display: none; } .infineat-checkout__box__content__delivery-address__content > input[type=radio]:checked + .infineat-checkout__box__content__delivery-address__item .infineat-checkout__box__content__delivery-address__item__header label { cursor: default; } .infineat-checkout__box__content__delivery-address__content > input[type=radio]:checked + .infineat-checkout__box__content__delivery-address__item .infineat-checkout__box__content__delivery-address__item__header label:before { background-color: var(--fuchsia-600); } .infineat-checkout__box__content__delivery-address__content > input[type=radio]:checked + .infineat-checkout__box__content__delivery-address__item .infineat-checkout__box__content__delivery-address__item__header label + span { display: block; } .infineat-checkout__box__content__delivery-address__content > input[type=radio]:checked + .infineat-checkout__box__content__delivery-address__item:not(.edit-mode) .infineat-checkout__box__content__delivery-address__item__content { display: block; } .infineat-checkout__box__content__delivery-address__content > input[type=radio]:checked + .infineat-checkout__box__content__delivery-address__item.edit-mode { background-color: var(--fuchsia-50); border-color: var(--fuchsia-600); } .infineat-checkout__box__content__delivery-address__content > input[type=radio]:checked + .infineat-checkout__box__content__delivery-address__item.edit-mode .infineat-checkout__box__content__delivery-address__item__content { display: none; } .infineat-checkout__box__content__delivery-address__content > input[type=radio]:checked + .infineat-checkout__box__content__delivery-address__item.edit-mode .infineat-checkout__box__content__delivery-address__item__edit { display: block; } .infineat-checkout__box__content__note__content { padding-left: 36px; padding-right: 36px; } .infineat-checkout__box__content__note__content textarea { width: 100%; height: 100px; } .infineat-checkout__box__content__delivery-time__header { display: flex; align-items: center; gap: 12px; } .infineat-checkout__box__content__delivery-time__header svg { width: 24px; height: 24px; color: var(--blue-500); } .infineat-checkout__box__content__delivery-time__header span { font-size: 16px; color: var(--fuchsia-800); font-family: var(--font-ubuntu); display: block; line-height: 30px; } .infineat-checkout__box__content__delivery-time__content { padding-left: 36px; padding-right: 36px; margin-bottom: 12px; } .infineat-checkout__box__content__delivery-time__content:last-child { margin-bottom: 0; } .infineat-checkout__box__content__delivery-time__content .infineat-form-group { margin-bottom: 12px; } .infineat-checkout__box__content__delivery-time__content .infineat-form-checkbox > div { margin-top: 24px; } .infineat-checkout__box__content__delivery-time__content > p { font-size: 14px; color: var(--gray-600); margin-bottom: 24px; } .infineat-checkout__box__content__delivery-time__content > p:last-child { margin-bottom: 0; } .infineat-checkout__box__content__delivery-time__content .infineat-form-group { max-width: 380px; } .infineat-checkout__box__content__delivery-time__content .flatpickr-calendar.inline { margin: 0 16px; } .infineat-checkout__box__content__delivery-time__time-picker__item { border-radius: 8px; padding: 12px 32px 12px 36px; position: relative; border: 1px solid transparent; } .infineat-checkout__box__content__delivery-time__time-picker__item > label { font-size: 16px; color: var(--fuchsia-800); cursor: pointer; display: flex; align-items: center; gap: 8px; } .infineat-checkout__box__content__delivery-time__time-picker__item > label > span { font-weight: 500; margin: 0 -6px; } .infineat-checkout__box__content__delivery-time__time-picker__item > label:before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--white); background-color: var(--white); box-shadow: 0 0 0 2px var(--gray-800); } .infineat-checkout__box__content__delivery-time__time-picker__item > div { display: none; } .infineat-checkout__box__content__delivery-time__time-picker__item > div > div { border-bottom: 1px solid var(--fuchsia-300); padding: 12px 0 20px; } .infineat-checkout__box__content__delivery-time__time-picker__item > div > div:last-child { border-bottom: none; } .infineat-checkout__box__content__delivery-time__time-picker__item > div > div > span { color: var(--fuchsia-600); font-size: 16px; line-height: 30px; display: block; } .infineat-checkout__box__content__delivery-time__time-picker__item > div > div > p { color: var(--blue-500); font-weight: 300; } .infineat-checkout__box__content__delivery-time__time-picker > input[type=radio] { display: none; } .infineat-checkout__box__content__delivery-time__time-picker > input[type=radio]:checked + .infineat-checkout__box__content__delivery-time__time-picker__item { background-color: var(--fuchsia-50); border-color: var(--fuchsia-600); } .infineat-checkout__box__content__delivery-time__time-picker > input[type=radio]:checked + .infineat-checkout__box__content__delivery-time__time-picker__item > div { display: block; } .infineat-checkout__box__content__delivery-time__time-picker > input[type=radio]:checked + .infineat-checkout__box__content__delivery-time__time-picker__item > label { cursor: default; } .infineat-checkout__box__content__delivery-time__time-picker > input[type=radio]:checked + .infineat-checkout__box__content__delivery-time__time-picker__item > label:before { background-color: var(--fuchsia-600); } .infineat-checkout__box__content__delivery-time__items { display: flex; flex-wrap: wrap; gap: 12px; max-width: 600px; } .infineat-checkout__box__content__delivery-time__items > div { flex: 0 0 calc(50% - 6px); } .infineat-checkout__box__content__delivery-time__items > div label { cursor: pointer; display: flex; align-items: center; background-color: #fff; border: 1px solid var(--fuchsia-450); padding: 0 16px; border-radius: 6px; line-height: 42px; font-size: 16px; color: var(--fuchsia-800); transition: 0.15s; cursor: pointer; position: relative; } .infineat-checkout__box__content__delivery-time__items > div label span { color: var(--fuchsia-600); margin-left: auto; font-size: 20px; } .infineat-checkout__box__content__delivery-time__items > div input[type=radio] { display: none; } .infineat-checkout__box__content__delivery-time__items > div input[type=radio]:checked + label { background-color: var(--fuchsia-600); color: var(--white); cursor: default; } .infineat-checkout__box__content__delivery-time__items > div input[type=radio]:checked + label span { color: var(--white); } .infineat-checkout__box__content__delivery-time__items > div input[type=radio].loading { pointer-events: none; } .infineat-checkout__box__content__delivery-time__items > div input[type=radio].loading + label { cursor: wait; pointer-events: none; } .infineat-checkout__box__content__delivery-time__items > div input[type=radio].loading + label:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--fuchsia-500); border-radius: 6px; animation: clippath 1.5s infinite linear; z-index: 100; } .infineat-checkout__box__content__delivery-preferences__content { padding-left: 36px; padding-right: 36px; } .infineat-checkout__box__content__delivery-preferences__content .infineat-form-checkbox { margin-bottom: 32px; } .infineat-checkout__box__content__delivery-preferences__content .infineat-form-checkbox:last-child { margin-bottom: 12px; } .infineat-checkout__box__content__delivery-preferences__content .infineat-form-checkbox p { display: none; margin-top: 12px; } .infineat-checkout__box__content__delivery-preferences__content .infineat-form-checkbox label { display: flex; align-items: center; gap: 12px; } .infineat-checkout__box__content__delivery-preferences__content .infineat-form-checkbox label svg { width: 24px; height: 24px; } .infineat-checkout__box__content__delivery-preferences__content .infineat-form-checkbox input:checked + label + p { display: block; } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox { margin: 0; } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox:first-child label { border-top: none; } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox label { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; cursor: pointer; padding: 20px 20px 20px 36px; border-width: 1px; border-style: solid; border-color: var(--fuchsia-300) transparent transparent transparent; font-size: 16px; color: var(--fuchsia-600); } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox label:before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--white); background-color: var(--white); box-shadow: 0 0 0 2px var(--gray-800); } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox label div { align-items: flex-start; margin-left: auto; display: flex; gap: 16px; } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox label div p { display: none; } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox label div img { margin-left: auto; max-width: 120px; } .infineat-checkout__box__content__payment-method__content input { display: none; } .infineat-checkout__box__content__payment-method__content input:checked + .payment-method-checkbox label { border: 1px solid var(--fuchsia-600); background-color: var(--fuchsia-50); border-radius: 6px; } .infineat-checkout__box__content__payment-method__content input:checked + .payment-method-checkbox label:before { background-color: var(--fuchsia-600); } .infineat-checkout__box__content__payment-method__content input:checked + .payment-method-checkbox label div { flex: 0 0 100%; margin-left: unset; } .infineat-checkout__box__content__payment-method__content input:checked + .payment-method-checkbox label div p { display: block; } .infineat-checkout__box__content__payment-method__content input:checked + .payment-method-checkbox + input { color: red; } .infineat-checkout__box__content__payment-method__content input:checked + .payment-method-checkbox + input + .payment-method-checkbox label { border-color: transparent transparent transparent transparent; } @media (max-width: 768px) { .infineat-checkout__dropdown { padding: 1px 8px; margin-bottom: 16px; } .infineat-checkout__dropdown__item__header { padding: 8px 4px 4px; } .infineat-checkout__dropdown__item__header svg { width: 22px; height: 22px; } .infineat-checkout__dropdown__item__header svg.dropdown-toggle { width: 20px; height: 20px; } .infineat-checkout__dropdown__item__header span { font-size: 14px; } .infineat-checkout__dropdown__item__header div { padding-left: 0; padding-right: 0; padding-bottom: 4px; } .infineat-checkout__dropdown__item__header div p { font-size: 12px; } .infineat-checkout__dropdown__item__content { padding: 6px 2px; } .infineat-checkout__dropdown__item[data-status=expand] { margin: 8px 0; padding: 0 8px; } .infineat-checkout__dropdown__item[data-status=expand] .infineat-checkout__dropdown__item__header { padding-bottom: 8px; } .infineat-checkout__box__header span { font-size: 16px; } .infineat-checkout__box__content { padding: 6px 0; } .infineat-checkout__box__content p { font-size: 14px; } .infineat-checkout__box__content__title { gap: 8px; } .infineat-checkout__box__content__title svg { width: 22px; height: 22px; } .infineat-checkout__box__content__title span { font-size: 14px; } .infineat-checkout__box__content__address__content { padding-left: 0; padding-right: 0; } .infineat-checkout__box__content__address__content p { font-size: 12px; } .infineat-checkout__box__content__delivery-address__item { padding: 8px; } .infineat-checkout__box__content__delivery-address__item__header label { font-size: 14px; } .infineat-checkout__box__content__delivery-address__item__header label:before { width: 12px; height: 12px; border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--gray-800); } .infineat-checkout__box__content__delivery-time__header { gap: 8px; } .infineat-checkout__box__content__delivery-time__header svg { width: 22px; height: 22px; } .infineat-checkout__box__content__delivery-time__header span { font-size: 14px; } .infineat-checkout__box__content__delivery-time__content { padding-left: 0; padding-right: 0; } .infineat-checkout__box__content__delivery-time__items > div label { font-size: 14px; line-height: 40px; padding: 0 8px; } .infineat-checkout__box__content__delivery-time__items > div label span { font-size: 16px; } .infineat-checkout__box__content__delivery-time__time-picker__item { padding: 8px; } .infineat-checkout__box__content__delivery-time__time-picker__item > label { font-size: 14px; } .infineat-checkout__box__content__delivery-time__time-picker__item > label:before { width: 12px; height: 12px; border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--gray-800); } .infineat-checkout__box__content__delivery-time__time-picker__item > div > div > span { font-size: 14px; } .infineat-checkout__box__content__delivery-preferences__content { padding-left: 0; padding-right: 0; } .infineat-checkout__box__content__delivery-preferences__content .infineat-form-checkbox label svg { width: 20px; height: 20px; } .infineat-checkout__box__content__note__content { padding: 0; } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox label { padding: 6px; font-size: 14px; } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox label div img { max-width: 80px; } .infineat-checkout__box__content__payment-method__content .payment-method-checkbox label:before { width: 12px; height: 12px; border: 2px solid var(--white); } } @keyframes clippath { 0%, 100% { clip-path: inset(95% 0 0 0); } 25% { clip-path: inset(0 95% 0 0); } 50% { clip-path: inset(0 0 95% 0); } 75% { clip-path: inset(0 0 0 95%); } } /* Restored from the former mini-cart.css entry point. These rules were * omitted during bundle consolidation and are required for the Woodmart * side-cart layout and quantity loading state. */ .cart-widget-side .wd-heading, .cart-widget-side .widget-title { display: none !important; } a.added_to_cart.wc-forward { display: none !important; } .cart-widget-side .widget_shopping_cart_content, .cart-widget-side .widget_shopping_cart { height: 100% !important; display: flex !important; flex-direction: column !important; } .cart-widget-side, .cart-widget-side .widget, .cart-widget-side .widget_shopping_cart, .cart-widget-side .widget_shopping_cart_content { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; } .infineat-mini-cart__item.updating { opacity: 0.7; pointer-events: none; transition: opacity 0.2s ease; position: relative; } .infineat-mini-cart__item.updating::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.8); border-radius: 4px; display: flex; align-items: center; justify-content: center; } .infineat-mini-cart__item.updating::before { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 3px solid var(--fuchsia-200); border-top-color: var(--fuchsia-600); border-radius: 50%; animation: spin 0.8s linear infinite; z-index: 1; } .infineat-mini-cart__item.removing { opacity: 0.4; pointer-events: none; transition: opacity 0.3s ease; } .infineat-mini-cart { background-color: var(--gray-100); padding: 0 8px; border-radius: 12px; border: 1px solid var(--fuchsia-400); display: flex; flex-direction: column; height: calc(100% - 8px); min-height: calc(100% - 8px); margin: 4px; } .infineat-mini-cart__header { display: flex; align-items: center; justify-content: center; line-height: 46px; border-bottom: 1px solid var(--fuchsia-450); position: relative; color: var(--fuchsia-600); font-weight: 500; font-size: 16px; flex: 0 0 47px; z-index: 100; } .infineat-mini-cart__header:before { content: ""; position: absolute; z-index: 100; left: 0; right: 0; bottom: -9px; height: 8px; background: linear-gradient(to bottom, #e4e1ec, transparent); } .infineat-mini-cart__header svg { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--fuchsia-400); cursor: pointer; } .infineat-mini-cart__body { flex: 1 1 auto; overflow-y: auto; padding: 22px 2px 0 0; scrollbar-gutter: stable; margin-right: -3px; } .infineat-mini-cart__body::-webkit-scrollbar { width: 3px; } .infineat-mini-cart__body::-webkit-scrollbar-track { background: transparent; border-radius: 2px; } .infineat-mini-cart__body::-webkit-scrollbar-thumb { background: #bbb; border-radius: 2px; } .infineat-mini-cart__body::-webkit-scrollbar-thumb:hover { background: #aaa; } .infineat-mini-cart__items-wrapper { border: 1px solid var(--fuchsia-400); border-radius: 8px; padding: 0 8px; background-color: var(--white); position: relative; display: flex; flex-direction: column; margin-bottom: 24px; position: relative; } .infineat-mini-cart__title { height: 26px; line-height: 24px; border-radius: 12px; background-color: var(--gray-100); border: 1px solid var(--fuchsia-400); align-self: center; padding: 0 8px; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); corner-shape: squircle; } .infineat-mini-cart__title a { color: var(--blue-400); font-size: 14px; text-decoration: none; font-family: var(--font-voltair); } .infineat-mini-cart__title + .infineat-mini-cart__item { padding-top: 16px; } .infineat-mini-cart__item { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--fuchsia-300); position: relative; } .infineat-mini-cart__item:before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; background-color: transparent; } .infineat-mini-cart__item:after { content: ""; position: absolute; right: -8px; top: 0; bottom: 0; width: 8px; background-color: transparent; } .infineat-mini-cart__item:last-of-type { border-bottom: unset; } .infineat-mini-cart__item:last-of-type:before { border-bottom-left-radius: 7px; } .infineat-mini-cart__item:last-of-type:after { border-bottom-right-radius: 7px; } .infineat-mini-cart__item:hover { background-color: rgba(224, 220, 224, 0.2); } .infineat-mini-cart__item:hover:before { background-color: rgba(224, 220, 224, 0.2); } .infineat-mini-cart__item:hover:after { background-color: rgba(224, 220, 224, 0.2); } .infineat-mini-cart__item__header { display: flex; align-items: center; gap: 6px; } .infineat-mini-cart__item__image { width: 60px; flex: 0 0 60px; display: flex; align-self: flex-start; } .infineat-mini-cart__item__image a { display: flex; } .infineat-mini-cart__item__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background-color: var(--gray-50); } .infineat-mini-cart__item__price { display: flex; flex-direction: column; flex: 0 0 160px; width: 160px; line-height: 22px; flex: 0 0 calc(100% - 60px - 104px - 6px - 6px); width: calc(100% - 60px - 104px - 6px - 6px); } .infineat-mini-cart__item__price > div { display: flex; gap: 12px; } .infineat-mini-cart__item__price > div span { font-size: 16px; color: var(--red-400); } .infineat-mini-cart__item__price > div span:nth-child(2) { color: var(--gray-600); text-decoration: line-through; } .infineat-mini-cart__item__price > div span:first-child:last-child { color: var(--fuchsia-600); } .infineat-mini-cart__item__price > span { font-size: 12px; color: var(--fuchsia-600); } .infineat-mini-cart__item__actions { display: flex; flex-direction: column; align-items: center; flex: 0 0 104px; width: 104px; align-self: flex-start; } .infineat-mini-cart__item__actions__quantity { display: inline-flex; align-items: center; background-color: var(--gray-50); color: var(--fuchsia-800); line-height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-450); } .infineat-mini-cart__item__actions__quantity button { width: 32px; height: 32px; 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; z-index: 10; } .infineat-mini-cart__item__actions__quantity button svg { width: 32px; height: 32px; border-radius: 50%; } .infineat-mini-cart__item__actions__quantity button:hover { background-color: unset; border: unset; } .infineat-mini-cart__item__actions__quantity button:active { background-color: var(--fuchsia-100); } .infineat-mini-cart__item__actions__quantity input[type=number] { background-color: unset; border: unset; width: 50px; font-size: 18px; text-align: center; color: var(--fuchsia-800); height: 28px; line-height: 28px; border: 0.5px solid var(--fuchsia-300); border-radius: 8px; font-family: var(--font-moniker); margin: 0 -6px; padding: 0; appearance: textfield; background-color: var(--white); } .infineat-mini-cart__item__actions__quantity input[type=number]::-webkit-inner-spin-button, .infineat-mini-cart__item__actions__quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-mini-cart__item__actions__quantity input[type=number]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-mini-cart__item__actions__quantity input[type=number]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } .infineat-mini-cart__item__actions__total-price { margin-top: 6px; } .infineat-mini-cart__item__actions__total-price span { color: var(--fuchsia-600); font-size: 18px; line-height: 24px; display: inline-block; } .infineat-mini-cart__item__actions__remove { position: absolute; right: -4px; bottom: 4px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--fuchsia-600); cursor: pointer; transition: 0.1s; border-radius: 18px; } .infineat-mini-cart__item__actions__remove svg { width: 32px; height: 32px; color: var(--fuchsia-600); } .infineat-mini-cart__item__actions__remove:hover { background-color: var(--fuchsia-100); } .infineat-mini-cart__item__title { display: flex; flex-direction: column; gap: 2px; flex: 0 0 calc(100% - 28px); max-width: calc(100% - 28px); } .infineat-mini-cart__item__title small { font-size: 15px; color: var(--fuchsia-600); font-family: var(--font-baloo); line-height: 18px; } .infineat-mini-cart__item__title span, .infineat-mini-cart__item__title a { font-size: 16px; color: var(--fuchsia-800); } .infineat-mini-cart__item__title span:hover, .infineat-mini-cart__item__title a:hover { color: var(--fuchsia-800); } .infineat-mini-cart__item__remove-confirmation { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; backdrop-filter: blur(5px); background-color: rgba(251, 234, 244, 0.75); color: var(--fuchsia-800); display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; text-align: center; padding: 12px; opacity: 0; visibility: hidden; transition: 0.15s; transform: scale(0); } .infineat-mini-cart__item__remove-confirmation div { display: flex; align-items: center; gap: 6px; } .infineat-mini-cart__item__remove-confirmation a { color: #fff; padding: 0 12px; line-height: 24px; border-radius: 12px; display: inline-block; min-width: 55px; text-align: center; } .infineat-mini-cart__item__remove-confirmation a:first-child { background-color: var(--fuchsia-200); color: var(--fuchsia-600); } .infineat-mini-cart__item__remove-confirmation a:last-child { color: var(--white); background-color: var(--fuchsia-600); } .infineat-mini-cart__item.confirmation .infineat-mini-cart__item__remove-confirmation { opacity: 1; visibility: visible; transform: scale(1); } .infineat-mini-cart__footer { border-top: 1px solid var(--fuchsia-450); flex: 0 0 114px; margin-top: auto; display: flex; flex-direction: column; padding: 6px 0 12px; background-color: var(--gray-100); gap: 4px; position: relative; z-index: 100; } .infineat-mini-cart__footer:before { content: ""; position: absolute; z-index: 100; left: 0; right: 0; top: -9px; height: 8px; background: linear-gradient(to top, #e4e1ec, transparent); } .infineat-mini-cart__total-item { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; } .infineat-mini-cart__total-item span { font-size: 18px; color: var(--fuchsia-800); } .infineat-mini-cart__total-item-description { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; } .infineat-mini-cart__total-item-description span { color: var(--fuchsia-800); } .infineat-mini-cart__total-item-description span:last-child.minus { color: var(--red-400); } .infineat-mini-cart__button { display: flex; align-items: center; justify-content: center; padding-top: 8px; } .infineat-mini-cart__button .button-fill { min-width: 165px; corner-shape: squircle; } .infineat-mini-cart-empty { background-color: var(--gray-100); padding: 0 8px 16px; border-radius: 12px; border: 1px solid var(--fuchsia-400); display: flex; flex-direction: column; margin: 4px; } .infineat-mini-cart-empty__header { display: flex; align-items: center; justify-content: center; height: 47px; position: relative; flex: 0 0 47px; } .infineat-mini-cart-empty__header svg { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--fuchsia-400); cursor: pointer; } .infineat-mini-cart-empty__content { display: flex; flex-direction: column; align-items: center; gap: 12px; background-color: var(--white); border-radius: 8px; border: 1px solid var(--fuchsia-400); padding: 24px 16px; text-align: center; } .infineat-mini-cart-empty__content svg { width: 100px; height: 100px; } .infineat-mini-cart-empty__content span { font-size: 18px; color: var(--fuchsia-600); line-height: 24px; } .infineat-mini-cart-empty__content p { font-size: 12px; color: var(--fuchsia-600); line-height: 18px; margin: 0; } .infineat-mini-cart-empty__footer { display: flex; align-items: center; justify-content: center; padding-top: 16px; } .infineat-mini-cart-empty__footer a { min-width: 165px; corner-shape: squircle; } .infineat-product-variations { border: 1px solid #ccbbcc; border-radius: 16px; padding: 12px 0; margin-top: 46px; } .infineat-product-variations__header { display: flex; align-items: center; justify-content: center; line-height: 30px; border: 1px solid #bc82bc; border-radius: 18px; font-size: 15px; corner-shape: squircle; margin: -30px 20px 12px; text-align: center; background-color: #f7f5fb; color: #990990; font-family: var(--font-ubuntu); } .infineat-product-variations__list { display: flex; padding: 1px 20px; flex-direction: column; } .infineat-product-variations__list.scroll { max-height: 254px; overflow-y: auto; scrollbar-gutter: stable; } .infineat-product-variations__list.scroll::-webkit-scrollbar { width: 3px; } .infineat-product-variations__list.scroll::-webkit-scrollbar-track { background: transparent; border-radius: 2px; } .infineat-product-variations__list.scroll::-webkit-scrollbar-thumb { background: #bbb; border-radius: 2px; } .infineat-product-variations__list.scroll::-webkit-scrollbar-thumb:hover { background: #aaa; } .infineat-product-variations__item { display: flex; align-items: center; border: 1px solid #d9c7d9; border-width: 1px 0; gap: 8px; margin-top: -1px; padding: 8px 0; cursor: pointer; position: relative; } .infineat-product-variations__item:first-of-type { border-top: 1px solid #d9c7d9; } .infineat-product-variations__item__image { width: 46px; height: 46px; border: 0.5px solid #ab63ab; border-radius: 20px; corner-shape: squircle; position: relative; overflow: hidden; } .infineat-product-variations__item__image img { width: 100%; height: 100%; object-fit: cover; } .infineat-product-variations__item__title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; } .infineat-product-variations__item__title span { color: #550550; font-size: 15px; transition: 0.1s; line-height: 20px; } .infineat-product-variations__item__price { height: 0; line-height: 24px; opacity: 0; visibility: hidden; transition: 0.1s; display: flex; gap: 8px; } .infineat-product-variations__item__price > span.range { display: inline-flex; align-items: baseline; gap: 8px; } .infineat-product-variations__item__price > span:not(.range) { gap: 0; } .infineat-single-product__price .range { display: inline-flex; align-items: baseline; gap: 8px; } .infineat-product-variations__item__price span { font-size: 16px; color: #800080; } .infineat-product-variations__item__price span.sale { color: var(--red-400); } .infineat-product-variations__item__price span.old { color: var(--gray-600); text-decoration: line-through; font-weight: 300; } .infineat-product-variations__item__quantity { display: none; align-items: center; background-color: #fdfaff; color: var(--fuchsia-800); line-height: 32px; border-radius: 20px; corner-shape: squircle; border: 1px solid #ab63ab; } .infineat-product-variations__item__quantity button { width: 32px; height: 32px; 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; z-index: 10; corner-shape: squircle; } .infineat-product-variations__item__quantity button svg { width: 32px; height: 32px; border-radius: 50%; } .infineat-product-variations__item__quantity button.variation-minus .icon-minus, .infineat-product-variations__item__quantity button.variation-minus .icon-trash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s ease; } .infineat-product-variations__item__quantity button.variation-minus .icon-trash { opacity: 0; pointer-events: none; } .infineat-product-variations__item__quantity button.variation-minus.is-trash .icon-minus { opacity: 0; pointer-events: none; } .infineat-product-variations__item__quantity button.variation-minus.is-trash .icon-trash { opacity: 1; pointer-events: auto; } .infineat-product-variations__item__quantity button:hover { background-color: unset; border: unset; } .infineat-product-variations__item__quantity button:active { background-color: var(--fuchsia-100); } .infineat-product-variations__item__quantity input[type=number] { border: unset; width: 50px; font-size: 18px; text-align: center; color: #990990; height: 28px; line-height: 28px; border: 0.5px solid var(--fuchsia-300); border-radius: 8px; font-family: var(--font-moniker); margin: 0 2px; padding: 0; appearance: textfield; background-color: var(--white); } .infineat-product-variations__item__quantity input[type=number]::-webkit-inner-spin-button, .infineat-product-variations__item__quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-product-variations__item__quantity input[type=number]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-product-variations__item__quantity input[type=number]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } .infineat-product-variations__item__add { display: none; align-items: center; gap: 4px; line-height: 34px; background-color: #990990; padding: 0 6px; border-radius: 20px; corner-shape: squircle; color: var(--white); cursor: pointer; font-size: 18px; position: relative; transition: 0.1s; min-width: 47px; } .infineat-product-variations__item__add svg { height: 20px; width: 20px; flex: 0 0 20px; } .infineat-product-variations__item__add:hover { background-color: var(--fuchsia-800); color: var(--white); } .infineat-product-variations__item__add.loading:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; corner-shape: squircle; border: 1px solid var(--white); border-radius: 20px; animation: clippath 1.5s infinite linear; z-index: 100; } .infineat-product-variations__item__number { line-height: 32px; background-color: #fdfaff; corner-shape: squircle; color: #990990; border: 1px solid #ab63ab; padding: 0 6px; min-width: 47px; text-align: center; font-size: 18px; border-radius: 20px; corner-shape: squircle; display: none; align-items: center; justify-content: center; } .infineat-product-variations__item.active { margin: -1px -9px 0; padding: 8px; border-radius: 12px; border-width: 1px; border-color: #ab63ab; background-color: #faf9fd; cursor: default; z-index: 20; } .infineat-product-variations__item.active .infineat-product-variations__item__add { display: flex; } .infineat-product-variations__item.active .infineat-product-variations__item__title span { font-size: 16px; } .infineat-product-variations__item.active .infineat-product-variations__item__price { height: 22px; visibility: visible; opacity: 1; } .infineat-product-variations__item.has-in-cart .infineat-product-variations__item__title span { font-size: 16px; } .infineat-product-variations__item.has-in-cart .infineat-product-variations__item__price { height: 22px; visibility: visible; opacity: 1; } .infineat-product-variations__item.has-in-cart .infineat-product-variations__item__add { display: none; } .infineat-product-variations__item.has-in-cart .infineat-product-variations__item__number { display: flex; } .infineat-product-variations__item.active.has-in-cart .infineat-product-variations__item__quantity { display: inline-flex; } .infineat-product-variations__item.active.has-in-cart .infineat-product-variations__item__number { display: none; } .infineat-product-variations__item__quantity.loading { position: relative; } .infineat-product-variations__item__quantity.loading:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--fuchsia-500); border-radius: 20px; animation: clippath 1.5s infinite linear; z-index: 100; pointer-events: none; } @keyframes clippath { 0%, 100% { clip-path: inset(95% 0 0 0); } 25% { clip-path: inset(0 95% 0 0); } 50% { clip-path: inset(0 0 95% 0); } 75% { clip-path: inset(0 0 0 95%); } } .infineat-single-product { background-color: var(--gray-200); padding-bottom: 240px; } .infineat-single-product__box { display: flex; align-items: flex-start; gap: 64px; background-color: var(--white); border-radius: 16px; padding: 40px; border: 1px solid var(--fuchsia-300); box-shadow: 0 0 20px 0 rgba(105, 99, 134, 0.2); flex-wrap: wrap; position: relative; margin-bottom: 24px; } .infineat-single-product__left { display: flex; flex-direction: column; gap: 16px; flex: 0 0 calc(45% - 32px); width: calc(45% - 32px); position: sticky; top: 32px; } body.fullscreen-gallery .infineat-single-product__left { z-index: 2000; } .infineat-single-product__right { display: flex; flex-direction: column; gap: 12px; flex: 0 0 calc(55% - 32px); width: calc(55% - 32px); } .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: 1px; background-color: var(--gray-100); border-radius: 20px; corner-shape: squircle; } .infineat-single-product__main-gallery .swiper-slide { aspect-ratio: 1/1; max-height: 100%; text-align: center; } .infineat-single-product__main-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid #d9c7d9; } .infineat-single-product__main-gallery .swiper-button-next, .infineat-single-product__main-gallery .swiper-button-prev { background-color: rgba(247, 245, 252, 0.3); border-radius: 50%; color: var(--black); opacity: 1; width: 36px; height: 36px; transition: 0.15s; } .infineat-single-product__main-gallery .swiper-button-next:hover, .infineat-single-product__main-gallery .swiper-button-prev:hover { background-color: rgba(247, 245, 252, 0.75); } .infineat-single-product__main-gallery .swiper-button-next svg, .infineat-single-product__main-gallery .swiper-button-prev svg { width: 16px; height: 16px; } .infineat-single-product__main-gallery .swiper-button-next { right: 16px; } .infineat-single-product__main-gallery .swiper-button-prev { left: 16px; } .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: 1/1; cursor: pointer; max-height: 100%; max-width: calc(25% - 8px); } .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; border: 1px solid #d9c7d9; background-color: #f9f8fd; } .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; } body.fullscreen-gallery .infineat-single-product__gallery { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--white); z-index: 1000; } body.fullscreen-gallery .infineat-single-product__gallery > svg { display: block; } body.fullscreen-gallery .infineat-single-product__gallery .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; } body.fullscreen-gallery .infineat-single-product__gallery .infineat-single-product__main-gallery .swiper > svg { display: none; } body.fullscreen-gallery .infineat-single-product__gallery .infineat-single-product__main-gallery .swiper-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; } body.fullscreen-gallery .infineat-single-product__gallery .infineat-single-product__thumbs-gallery { flex: 0 0 160px; height: 160px; padding: 16px; border-top: 1px solid var(--fuchsia-300); } body.fullscreen-gallery .infineat-single-product__gallery .infineat-single-product__thumbs-gallery .swiper-wrapper { justify-content: center; } body.fullscreen-gallery .infineat-single-product__gallery .infineat-single-product__thumbs-gallery .swiper-slide { max-width: 127px; } .infineat-single-product__vendor { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .infineat-single-product__vendor__title { display: flex; align-items: center; gap: 12px; } .infineat-single-product__vendor__title img { width: 36px; height: 36px; } .infineat-single-product__vendor__title a { font-size: 20px; font-family: var(--font-ubuntu); color: var(--blue-500); } .infineat-single-product__vendor__follow { margin-left: auto; } .infineat-single-product__vendor__follow a { display: flex; align-items: center; padding: 0 12px; gap: 8px; border-radius: 20px; line-height: 38px; border: 1px solid #9e719e; color: #884488; background-color: #fefcff; transition: 0.15s; } .infineat-single-product__vendor__follow a:hover { background-color: #e8dded; } .infineat-single-product__vendor__follow a svg { width: 30px; height: 30px; flex: 0 0 30px; } .infineat-single-product__vendor__follow a span { font-size: 15px; } .infineat-single-product__category { position: relative; display: flex; align-items: center; justify-content: center; } .infineat-single-product__category span { color: #887788; font-family: var(--font-baloo); font-size: 16px; padding: 0 4px; background-color: var(--white); line-height: 14px; min-height: 14px; z-index: 2; position: relative; } .infineat-single-product__category::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; z-index: 1; background-color: #daccda; } .infineat-single-product__title { margin-bottom: 16px; } .infineat-single-product__title small { font-size: 20px; color: #884488; display: block; margin-bottom: 6px; } .infineat-single-product__title h1 { font-size: 26px; font-weight: 400; margin: unset; color: #550550; } .infineat-single-product__offer { color: #c7382a; font-family: var(--font-voltair); font-size: 18px; } .infineat-single-product__short-description { font-size: 16px; color: var(--fuchsia-600); margin-bottom: 46px; } .infineat-single-product__buy { display: flex; align-items: center; margin: -12px 0; gap: 12px; } .infineat-single-product__button { margin-left: auto; display: flex; flex-direction: column; gap: 8px; width: 160px; flex: 0 0 160px; margin-bottom: -44px; } .infineat-single-product__button > button, .infineat-single-product__button > 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; min-height: unset; position: relative; } .infineat-single-product__button > button svg, .infineat-single-product__button > a svg { width: 20px; height: 20px; } .infineat-single-product__button > button:hover, .infineat-single-product__button > a:hover { background-color: var(--fuchsia-800); color: var(--white); } .infineat-single-product__button > button.loading:before, .infineat-single-product__button > a.loading:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--white); border-radius: 20px; animation: clippath 1.5s infinite linear; z-index: 100; } .infineat-single-product__button .price { align-self: center; margin: 0 auto; font-size: 24px; color: #800080; line-height: 36px; } .infineat-single-product__button .price.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; } .infineat-single-product__button .price.is-visible { visibility: visible; opacity: 1; } .infineat-single-product__button .sold-out { display: flex; align-items: center; justify-content: center; line-height: 36px; background-color: #f5f5f5; color: #887788; border: 1px solid #7a5a7a; border-radius: 20px; font-family: var(--font-voltair); font-size: 15px; } .infineat-single-product__price { display: flex; gap: 18px; line-height: 36px; } .infineat-single-product__price span { font-size: 24px; color: #800080; } .infineat-single-product__price span.sale { color: var(--red-400); } .infineat-single-product__price span.old { color: var(--gray-600); text-decoration: line-through; font-weight: 300; } .infineat-single-product__like { width: 38px; flex: 0 0 38px; gap: 8px; display: flex; flex-direction: column; } .infineat-single-product__like a { height: 38px; width: 38px; border-radius: 20px; background-color: #fefcff; display: flex; align-items: center; justify-content: center; color: #800080; border: 1px solid #9e719e; transition: 0.15s; } .infineat-single-product__like a:hover { background-color: #e8dded; } .infineat-single-product__like a svg.icon-heart-default, .infineat-single-product__like a svg.icon-heart-filled { width: 24px; height: 24px; flex: 0 0 24px; } .infineat-single-product__like .wd-wishlist-btn { position: relative; width: 38px; height: 38px; } .infineat-single-product__like .wd-wishlist-btn > a { position: absolute; inset: 0; z-index: 2; color: transparent; font-size: 0; } .infineat-single-product__like .wd-wishlist-btn > a::before, .infineat-single-product__like .wd-wishlist-btn > a.added::before, .infineat-single-product__like .wd-wishlist-btn > a:hover::before { display: none; content: ""; } .infineat-single-product__like .wd-wishlist-btn > svg.icon-heart-default, .infineat-single-product__like .wd-wishlist-btn > svg.icon-heart-filled { pointer-events: none; } .infineat-single-product__like .wd-wishlist-btn > svg.icon-heart-default { display: block; color: #800080; stroke: #800080; } .infineat-single-product__like .wd-wishlist-btn > svg.icon-heart-filled { display: none; fill: #800080; stroke: #800080; } .infineat-single-product__like .wd-wishlist-btn > a.added ~ svg.icon-heart-default { display: none; } .infineat-single-product__like .wd-wishlist-btn > a.added ~ svg.icon-heart-filled { display: block; } /* Keep WooCommerce/ Woodmart amount markup inside Infineat components on-brand. */ .infineat-product-card .infineat-product-card__price .woocommerce-Price-amount.amount, .infineat-product-card .infineat-product-card__price .amount { color: var(--fuchsia-800); } .infineat-product-card .infineat-product-card__price--has-discount > span:first-child .woocommerce-Price-amount.amount, .infineat-product-card .infineat-product-card__price .sale-price .woocommerce-Price-amount.amount, .infineat-product-card .infineat-product-card__price .infineat-cart__vendor-item__content__price--has-discount > span:first-child .woocommerce-Price-amount.amount { color: var(--red-400); } .infineat-product-card .infineat-product-card__price--has-discount > span:last-child .woocommerce-Price-amount.amount, .infineat-product-card .infineat-product-card__price .old-price .woocommerce-Price-amount.amount, .infineat-product-card .infineat-product-card__price .infineat-cart__vendor-item__content__price--has-discount > span:last-child .woocommerce-Price-amount.amount { color: var(--gray-600); } .infineat-product-card.infineat-product-card--out-of-stock .infineat-product-card__price .woocommerce-Price-amount.amount { color: var(--fuchsia-light-400); } .infineat-product-card.infineat-product-card--out-of-stock .infineat-product-card__price--has-discount > span:first-child .woocommerce-Price-amount.amount, .infineat-product-card.infineat-product-card--out-of-stock .infineat-product-card__price .sale-price .woocommerce-Price-amount.amount, .infineat-product-card.infineat-product-card--out-of-stock .infineat-product-card__price .infineat-cart__vendor-item__content__price--has-discount > span:first-child .woocommerce-Price-amount.amount { color: var(--red-400); } .infineat-single-product .infineat-single-product__price .woocommerce-Price-amount.amount, .infineat-single-product .infineat-single-product__button > .price .woocommerce-Price-amount.amount, .infineat-single-product .infineat-single-product__table .woocommerce-Price-amount.amount { color: #800080; } .infineat-single-product .infineat-single-product__price span.sale .woocommerce-Price-amount.amount, .infineat-single-product .infineat-single-product__table span.sale .woocommerce-Price-amount.amount { color: var(--red-400); } .infineat-single-product .infineat-single-product__price span.old .woocommerce-Price-amount.amount, .infineat-single-product .infineat-single-product__table span.old .woocommerce-Price-amount.amount { color: var(--gray-600); } .infineat-single-product .infineat-single-product__table tbody tr:hover .woocommerce-Price-amount.amount, .infineat-single-product .infineat-single-product__table tbody tr.active .woocommerce-Price-amount.amount { color: #884488; } .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__price .woocommerce-Price-amount.amount, .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__bottom-shape .infineat-single-product__price .woocommerce-Price-amount.amount { color: var(--fuchsia-light-400); } .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__price span.sale .woocommerce-Price-amount.amount, .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__bottom-shape .infineat-single-product__price span.sale .woocommerce-Price-amount.amount { color: var(--red-400); } .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__price span.old .woocommerce-Price-amount.amount, .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__bottom-shape .infineat-single-product__price span.old .woocommerce-Price-amount.amount { color: var(--gray-600); } /* WooCommerce/Woodmart price wrappers must inherit Infineat typography. */ .infineat-single-product .infineat-single-product__price, .infineat-single-product .infineat-single-product__price .price, .infineat-single-product .infineat-single-product__price .woocommerce-Price-amount, .infineat-single-product .infineat-single-product__price .amount, .infineat-single-product .infineat-single-product__price bdi, .infineat-single-product .infineat-single-product__price ins, .infineat-single-product .infineat-single-product__price del, .infineat-product-variations__item__price, .infineat-product-variations__item__price .woocommerce-Price-amount, .infineat-product-variations__item__price .amount, .infineat-product-variations__item__price bdi, .infineat-mini-cart__item__price, .infineat-mini-cart__item__price .woocommerce-Price-amount, .infineat-mini-cart__item__price .amount, .infineat-mini-cart__item__price bdi, .infineat-mini-cart__item__price ins, .infineat-mini-cart__item__price del, .infineat-mini-cart__item__actions__total-price, .infineat-mini-cart__item__actions__total-price .woocommerce-Price-amount, .infineat-mini-cart__item__actions__total-price .amount, .infineat-mini-cart__item__actions__total-price bdi, .infineat-cart__vendor-item__content__price, .infineat-cart__vendor-item__content__price .woocommerce-Price-amount, .infineat-cart__vendor-item__content__price .amount, .infineat-cart__vendor-item__content__price bdi { font-weight: 400; } .infineat-product-card__price, .infineat-product-card__price .woocommerce-Price-amount, .infineat-product-card__price .amount, .infineat-product-card__price bdi, .infineat-product-card__price ins, .infineat-product-card__price del, .infineat-single-product__table .woocommerce-Price-amount, .infineat-single-product__table .amount, .infineat-single-product__table bdi { font-weight: 400; } .infineat-single-product .infineat-single-product__price .old, .infineat-single-product .infineat-single-product__price .old *, .infineat-product-variations__item__price .old, .infineat-product-variations__item__price .old *, .infineat-mini-cart__item__price .old, .infineat-mini-cart__item__price .old, .infineat-mini-cart__item__price .old *, .infineat-cart__vendor-item__content__price .old, .infineat-cart__vendor-item__content__price .old *, .infineat-product-card__price .old, .infineat-product-card__price .old *, .infineat-single-product__table .old, .infineat-single-product__table .old * { font-weight: 300; } .infineat-single-product .infineat-single-product__bottom-shape .infineat-single-product__price .woocommerce-Price-amount.amount, .infineat-single-product .infineat-single-product__bottom-shape .infineat-single-product__button .price .woocommerce-Price-amount.amount { color: #800080; } .infineat-single-product .infineat-single-product__bottom-shape .infineat-single-product__price span.sale .woocommerce-Price-amount.amount { color: var(--red-400); } .infineat-single-product .infineat-single-product__bottom-shape .infineat-single-product__price span.old .woocommerce-Price-amount.amount { color: var(--gray-600); } /* Re-assert the sticky out-of-stock state after the sticky base selectors above. */ .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__bottom-shape .infineat-single-product__price .woocommerce-Price-amount.amount { color: var(--fuchsia-light-400); } .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__bottom-shape .infineat-single-product__price span.sale .woocommerce-Price-amount.amount { color: var(--red-400); } .infineat-single-product.infineat-single-product--out-of-stock .infineat-single-product__bottom-shape .infineat-single-product__price span.old .woocommerce-Price-amount.amount { color: var(--gray-600); } /* WooCommerce gives the currency symbol its own span. Keep it inheriting * the semantic price color from the complete Infineat price output. */ .infineat-single-product .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol, .infineat-product-card .infineat-product-card__price .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol, .infineat-single-product__table .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol, .infineat-cart__vendor-item__content__price .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol { color: inherit; } /* Keep Woodmart's required wishlist classes functional while scoping its visual reset * to Infineat controls only. */ .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn.wd-action-btn.wd-style-icon, .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn.wd-action-btn.wd-style-icon { width: 32px; height: 32px; min-height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; line-height: 1; } .infineat-single-product__like .wd-wishlist-btn.wd-action-btn.wd-style-icon { width: 38px; height: 38px; min-height: 38px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; line-height: 1; } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn.wd-action-btn.wd-style-icon::before, .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn.wd-action-btn.wd-style-icon::before, .infineat-single-product__like .wd-wishlist-btn.wd-action-btn.wd-style-icon::before { display: none; content: none; } .infineat-product-grid-wrapper .infineat-product-card__add-to-wishlist .wd-wishlist-btn.wd-action-btn.wd-style-icon > a, .infineat-products-carousel .infineat-product-card__add-to-wishlist .wd-wishlist-btn.wd-action-btn.wd-style-icon > a { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .infineat-single-product__like .wd-wishlist-btn.wd-action-btn.wd-style-icon > a { margin: 0; padding: 0; border: 0; box-shadow: none; } .infineat-single-product__price-description { display: flex; flex-direction: column; gap: 6px; font-size: 18px; } .infineat-single-product__price-description span { color: #806080; } .infineat-single-product__price-description small { color: #9a909a; font-weight: 300; font-size: 15px; } .infineat-single-product__vat { color: #887788; font-size: 15px; font-weight: 300; } .infineat-single-product__vat a { color: #2953a6; text-decoration: underline; } .infineat-single-product__vat a:hover { color: #295fcc; text-decoration: none; } .infineat-single-product table { margin-top: auto; width: 100%; border: 1px solid #d7c7d7; border-radius: 12px; border-spacing: 0; border-collapse: separate; table-layout: fixed; background-color: #f7f5fc; margin-bottom: 16px; } .infineat-single-product table thead tr th, .infineat-single-product table thead tr td { line-height: 32px; font-weight: 400; color: #806080; font-size: 15px; text-align: left; padding: 2px 12px 0; border-bottom: unset; text-transform: none; } .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 #d7c7d7; border-radius: 11px; } .infineat-single-product table tbody tr td { line-height: 36px; position: relative; padding: 0 12px; border-right: 1px #d7c7d7; border-bottom: unset; color: #776677; } .infineat-single-product table tbody tr td:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background-color: #e6dae6; 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:hover td { color: #884488; background-color: #fbfafd; font-weight: 500; } .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: 8px 16px; } .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; border-bottom: unset; text-transform: none; } .infineat-single-product__table table tbody tr td { border-right: unset; text-align: center; border-bottom: unset; } .infineat-single-product__table table tbody tr:hover td { background-color: unset; font-weight: 400; color: #776677; } .infineat-single-product__table table tbody tr.active td { color: #884488; background-color: #fbfafd; font-weight: 500; font-size: 15px; } .infineat-single-product__table table tbody tr.active td:first-child { position: relative; } .infineat-single-product__table table tbody tr.active td:first-child:after { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); height: 26px; width: 3px; border-radius: 3px; background-color: #884488; } .infineat-single-product__table table tbody tr.active td:last-child { position: relative; } .infineat-single-product__table table tbody tr.active td:last-child:after { content: ""; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); height: 26px; width: 3px; border-radius: 3px; background-color: #884488; } .infineat-single-product__divider { border-top: 1px solid #daccda; } .infineat-single-product__specifications { margin-top: 8px; } .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; font-size: 15px; color: #884488; background-color: #f7f5fc; border: 1px solid #ccadcc; corner-shape: squircle; margin-bottom: 0; } .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 { color: #887788; font-size: 15px; line-height: 16px; } .infineat-single-product__star__content span { font-weight: 300; } .infineat-single-product__star__content small { font-size: 15px; font-weight: 300; } .infineat-single-product__sku { color: #887788; font-size: 15px; font-weight: 300; } .infineat-single-product__notice { color: #d06928; line-height: 24px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-family: var(--font-voltair); } .infineat-single-product__notice svg { width: 16px; height: 16px; } .infineat-single-product__shipping { font-family: var(--font-voltair); color: #2e7d5b; font-size: 16px; display: flex; align-items: center; gap: 2px; margin-left: -6px; } .infineat-single-product__shipping svg { width: 28px; height: 28px; } .infineat-single-product__quantity { display: inline-flex; align-items: center; justify-content: space-between; background-color: var(--gray-50); color: var(--fuchsia-800); line-height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-450); position: relative; } .infineat-single-product__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; z-index: 10; } .infineat-single-product__quantity button svg { width: 36px; height: 36px; border-radius: 50%; } .infineat-single-product__quantity button.quantity-minus .icon-minus, .infineat-single-product__quantity button.quantity-minus .icon-trash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s ease; } .infineat-single-product__quantity button.quantity-minus .icon-trash { opacity: 0; pointer-events: none; } .infineat-single-product__quantity button.quantity-minus.is-trash .icon-minus { opacity: 0; pointer-events: none; } .infineat-single-product__quantity button.quantity-minus.is-trash .icon-trash { opacity: 1; pointer-events: auto; } .infineat-single-product__quantity button:hover { background-color: unset; border: unset; } .infineat-single-product__quantity button:active { background-color: var(--fuchsia-100); } .infineat-single-product__quantity input[type=number] { background-color: unset; border: unset; width: calc(100% - 72px + 4px); font-size: 20px; text-align: center; color: var(--fuchsia-800); height: 30px; line-height: 30px; border: 0.5px solid var(--fuchsia-300); border-radius: 8px; font-family: var(--font-moniker); margin: 0 -2px; padding: 0; appearance: textfield; background-color: var(--white); } .infineat-single-product__quantity input[type=number]::-webkit-inner-spin-button, .infineat-single-product__quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-single-product__quantity input[type=number]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-single-product__quantity input[type=number]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } .infineat-single-product__quantity.loading:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--fuchsia-500); border-radius: 20px; animation: clippath 1.5s infinite linear; z-index: 100; pointer-events: none; } .infineat-single-product__discount { position: absolute; background-image: url("../img/sale-badge.png"); background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; width: 79px; height: 39px; left: -13px; top: 48px; color: #fff; z-index: 100; font-family: var(--font-voltair); font-weight: 400; font-size: 15px; padding-bottom: 2px; padding-left: 8px; } .infineat-single-product__content { margin-top: 40px; position: relative; } .infineat-single-product__content__title { color: #990990; font-size: 20px; font-family: var(--font-ubuntu); line-height: 40px; background-color: #f7f5fb; border: 1px solid #bc82bc; margin-bottom: 12px; padding: 0 20px; border-radius: 12px; } .infineat-single-product__content__body { font-size: 16px; color: #806080; line-height: 26px; font-weight: 300; } .infineat-single-product__content__body p { margin-top: unset; } .infineat-single-product__variation a { display: flex; align-items: center; justify-content: space-between; background-color: var(--gray-50); color: var(--fuchsia-800); height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-450); position: relative; padding: 0 12px; text-align: center; font-size: 12px; } .infineat-single-product__variation a[href="#"] { cursor: default; pointer-events: none; } .infineat-single-product__variation a svg { width: 24px; height: 24px; } .infineat-single-product__variation--has-in-cart a { padding: 0 12px 0 24px; } .infineat-single-product__variation--has-in-cart a span { width: calc(100% - 30px - 12px); font-size: 20px; text-align: center; color: var(--fuchsia-800); height: 30px; line-height: 30px; border: 0.5px solid var(--fuchsia-300); border-radius: 8px; font-family: var(--font-moniker); background-color: var(--white); } .infineat-single-product__dropdown__item { border-bottom: 1px solid #ccadcc; transition: 0.15s; } .infineat-single-product__dropdown__item:first-child { border-top: 1px solid #ccadcc; } .infineat-single-product__dropdown__item__header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; transition: 0.15s; } .infineat-single-product__dropdown__item__header > span { font-size: 18px; font-weight: 400; line-height: 56px; color: #884488; } .infineat-single-product__dropdown__item__header svg.dropdown-toggle { width: 20px; height: 20px; color: #884488; 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; transition: 0.15s; font-size: 15px; color: #776677; font-weight: 300; line-height: 26px; } .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 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__bottom-shape { display: flex; align-items: center; gap: 12px; background-color: var(--white); border-radius: 16px; padding: 12px 64px; border: 1px solid #884488; box-shadow: 0 0 20px 0 rgba(105, 99, 134, 0.2); position: fixed; left: 50%; bottom: 16px; transition: 0.25s; transform: translateX(-50%) translateY(calc(100% + 16px)); max-width: 1354px; width: calc(100% - 16px); z-index: 800; } .infineat-single-product__bottom-shape.active { transform: translateX(-50%) translateY(0); } .infineat-single-product__bottom-shape .infineat-single-product__image { width: 70px; height: 70px; flex: 0 0 70px; border-radius: 6px; border: 1px solid #dccbdc; } .infineat-single-product__bottom-shape .infineat-single-product__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .infineat-single-product__bottom-shape .infineat-single-product__title { margin-bottom: unset; } .infineat-single-product__bottom-shape .infineat-single-product__title small { font-size: 16px; } .infineat-single-product__bottom-shape .infineat-single-product__title span { font-size: 18px; color: #550550; } .infineat-single-product__bottom-shape .infineat-single-product__price span { font-size: 20px; } .infineat-single-product__bottom-shape .infineat-single-product__price-description span { font-size: 16px; } .infineat-single-product__bottom-shape .infineat-single-product__offer { font-size: 16px; } .infineat-single-product__bottom-shape .infineat-single-product__price-wrapper { margin-left: auto; margin-right: 64px; } .infineat-single-product__bottom-shape .infineat-single-product__button { margin-left: unset; margin-bottom: 0; } .infineat-single-product__bottom-shape .infineat-single-product__button .price { font-size: 20px; } .infineat-single-product .infineat-product-variations { scroll-margin-top: 50px; } @media (max-width: 1200px) { .infineat-single-product__box { gap: 32px; padding: 32px; } .infineat-single-product__left { width: 45%; flex: 0 0 45%; } .infineat-single-product__right { width: calc(55% - 32px); flex: 0 0 calc(55% - 32px); } .infineat-single-product__bottom-shape { padding: 10px 16px; } } @media (max-width: 992px) { .infineat-single-product__left { width: calc(100% - 450px - 32px); flex: 0 0 calc(100% - 450px - 32px); } .infineat-single-product__right { width: 450px; flex: 0 0 450px; } .infineat-single-product__bottom-shape .infineat-single-product__price-wrapper { margin-left: auto; margin-right: 32px; } .infineat-single-product__bottom-shape .infineat-single-product__price span { line-height: 26px; } .infineat-single-product__bottom-shape .infineat-single-product__price-description { font-size: 16px; } .infineat-single-product__bottom-shape .infineat-single-product__offer { font-size: 16px; } } @media (max-width: 768px) { .infineat-single-product__left, .infineat-single-product__right { width: 100%; flex: 0 0 100%; gap: 8px; } .infineat-single-product__left { position: static; } .infineat-single-product__box { gap: 12px; padding: 12px; } .infineat-single-product__vendor a { font-size: 18px; } .infineat-single-product__category { margin: 0; } .infineat-single-product__title small { font-size: 18px; } .infineat-single-product__title h1 { font-size: 20px; } .infineat-single-product__divider { margin: 0; } .infineat-single-product__content__title { font-size: 16px; } .infineat-single-product__content__body { font-size: 16px; } .infineat-single-product__dropdown { margin: 0; } .infineat-single-product__dropdown__item__header { padding: 0; } .infineat-single-product__dropdown__item__content { padding: 0; } .infineat-single-product__bottom-shape { flex-wrap: wrap; padding: 8px; row-gap: 4px; width: calc(100% - 16px); bottom: 8px; } .infineat-single-product__bottom-shape .infineat-single-product__image { width: 65px; height: 65px; flex: 0 0 65px; } .infineat-single-product__bottom-shape .infineat-single-product__price-wrapper { margin-left: unset; margin-right: unset; } .infineat-single-product__bottom-shape .infineat-single-product__button { margin-left: auto; gap: 4px; } .infineat-single-product__bottom-shape .infineat-single-product__button > span { font-size: 18px; line-height: 26px; } .infineat-single-product__bottom-shape .infineat-single-product__price span { font-size: 18px; line-height: 20px; } .infineat-single-product__bottom-shape .infineat-single-product__price-description { font-size: 14px; } .infineat-single-product__bottom-shape .infineat-single-product__offer { font-size: 14px; } .infineat-single-product__bottom-shape .infineat-single-product__title { order: 5; width: 100%; flex: 0 0 100%; } .infineat-single-product__bottom-shape .infineat-single-product__title small { font-size: 12px; margin-bottom: unset; } .infineat-single-product__bottom-shape .infineat-single-product__title span { font-size: 14px; } .infineat-single-product__bottom-shape .infineat-single-product__title span br { display: none; } } @keyframes clippath { 0%, 100% { clip-path: inset(95% 0 0 0); } 25% { clip-path: inset(0 95% 0 0); } 50% { clip-path: inset(0 0 95% 0); } 75% { clip-path: inset(0 0 0 95%); } } .infineat-products-carousel { padding: 12px 60px; position: relative; } .infineat-products-carousel__header { margin: 0 -10px 20px; } .infineat-products-carousel__header span { color: #8c0383; font-size: 18px; } .infineat-products-carousel__content { padding: 12px 18px 130px; margin: -12px -18px -120px; position: relative; overflow: hidden; } .infineat-products-carousel__content .swiper { overflow: visible; margin: 0 -12px; } .infineat-products-carousel__navigation .swiper-button-next, .infineat-products-carousel__navigation .swiper-button-prev { background-color: #f2eef3; border-radius: 50%; color: #550550; opacity: 1; width: 36px; height: 36px; transition: 0.15s; border: 1px solid #d5c2d5; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 4px rgba(105, 99, 134, 0.35); } .infineat-products-carousel__navigation .swiper-button-next:hover, .infineat-products-carousel__navigation .swiper-button-prev:hover { background-color: rgba(247, 245, 252, 0.75); } .infineat-products-carousel__navigation .swiper-button-next svg, .infineat-products-carousel__navigation .swiper-button-prev svg { width: 16px; height: 16px; } .infineat-products-carousel__navigation .swiper-button-next::after, .infineat-products-carousel__navigation .swiper-button-prev::after { font-size: 16px; line-height: 1; } .infineat-products-carousel__navigation .swiper-button-next { right: 0; } .infineat-products-carousel__navigation .swiper-button-prev { left: 0; } @media (max-width: 576px) { .infineat-products-carousel { padding: 12px; } .infineat-products-carousel__navigation { display: none; } } .infineat-register__header { display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--fuchsia-600); border-radius: 12px; margin-bottom: 16px; } .infineat-register__header h1 { font-size: 24px; line-height: 80px; font-weight: 300; color: var(--white); margin: 0; padding: 0; font-family: var(--font-ubuntu); } .infineat-register__box { border: 0.5px solid var(--fuchsia-300); border-radius: 12px; padding: 0 12px 8px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); margin-bottom: 16px; background: var(--white); } .infineat-register__box__header { display: flex; align-items: center; gap: 12px; border-bottom: 0.5px solid var(--fuchsia-450); color: var(--fuchsia-800); padding: 0 12px; } .infineat-register__box__header span { line-height: 56px; font-size: 20px; } .infineat-register__box__header svg { width: 28px; height: 28px; } .infineat-register__box__content { padding: 16px 12px 0; } .infineat-register__box__content > p { font-size: 16px; color: var(--fuchsia-600); margin: 0 0 12px; } .infineat-register__box__content__checkbox-wrapper { padding: 12px; background-color: var(--gray-100); border-radius: 8px; border: 1px solid var(--fuchsia-400); margin-bottom: 16px; } .infineat-register__box__content__checkbox-wrapper .infineat-form-checkbox { margin-bottom: 0; margin-top: 0; } .infineat-register__box--with-background { background-color: var(--gray-100); } .infineat-register__box--with-background .infineat-register__box__header { border: unset; } .infineat-register__box--with-background .infineat-register__box__content { padding: 12px 32px; margin: 0 -6px; background-color: var(--white); border-radius: 8px; } .infineat-register__box__inner { background-color: var(--white); border-radius: 6px; padding: 0 16px; margin: 24px 16px; border: 1px solid var(--fuchsia-400); } .infineat-register__box__inner__header { display: flex; align-items: center; gap: 10px; line-height: 46px; color: var(--fuchsia-800); } .infineat-register__box__inner__header svg { width: 28px; height: 28px; } .infineat-register__box__footer { display: flex; align-items: center; justify-content: center; padding: 0 12px 20px; } .infineat-register__box__footer .button-fill { corner-shape: squircle; min-width: 200px; } @media (max-width: 768px) { .infineat-register__header { padding: 0 12px; border-radius: 6px; margin-bottom: 16px; } .infineat-register__header h1 { line-height: 40px; font-size: 18px; } .infineat-register__box { padding: 0 8px 4px; } .infineat-register__box__header { padding: 0 4px; } .infineat-register__box__header span { line-height: 40px; font-size: 14px; } .infineat-register__box__header svg { width: 22px; height: 22px; } .infineat-register__box__content { padding: 12px 4px 0; } .infineat-register__box__content > p { font-size: 12px; } .infineat-register__box--with-background .infineat-register__box__content { padding: 2px 8px; margin: 0 -4px; border-radius: 6px; } .infineat-register__box__inner { margin: 12px 0; padding: 0 8px; } .infineat-register__box__inner__header { line-height: 32px; } } .infineat-login { margin: 32px auto; display: flex; flex-direction: column; gap: 12px; max-width: 480px; } .infineat-login__header { display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--fuchsia-600); border-radius: 12px; } .infineat-login__header h1 { font-size: 24px; line-height: 80px; font-weight: 300; color: var(--white); margin: 0; padding: 0; font-family: var(--font-ubuntu); } .infineat-login__form { border: 0.5px solid var(--fuchsia-300); border-radius: 12px; padding: 24px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); background: var(--white); display: flex; flex-direction: column; } .infineat-login__form .infineat-form-group > a { margin-left: auto; text-decoration: underline; } .infineat-login__form .toggle-password { position: absolute; right: 6px; top: 6px; border: unset; background-color: unset; width: 40px; height: 40px; cursor: pointer; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .infineat-login__form .toggle-password svg { fill: none; flex: 0 0 24px; width: 24px; height: 24px; color: var(--gray-800); } .infineat-login__buttons { display: flex; flex-direction: column; gap: 12px; } .infineat-login__buttons button, .infineat-login__buttons a { corner-shape: squircle; min-width: 200px; align-self: center; margin: 0 auto; } .infineat-login__buttons div { text-align: center; position: relative; display: flex; align-items: center; justify-content: center; } .infineat-login__buttons div:before { content: ""; position: absolute; height: 1px; top: 50%; left: 0; right: 0; z-index: 5; background-color: var(--gray-300); } .infineat-login__buttons span { line-height: 40px; color: var(--gray-400); background-color: var(--white); padding: 0 12px; z-index: 10; position: relative; } .infineat-login__text { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 20px; } .infineat-login__text a { color: var(--gray-600); text-decoration: underline; } .infineat-login__form-options { margin-bottom: 20px; } .infineat-login__form-options .infineat-form-checkbox { margin-bottom: 0; margin-top: 0; } .infineat-login__register { display: flex; flex-direction: column; background-color: var(--gray-100); padding: 0 12px; border-radius: 12px; border: 1px solid var(--fuchsia-400); display: flex; flex-direction: column; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out, margin 0.4s ease-out; gap: 12px; } .infineat-login__register a { background-color: var(--white); border: 1px solid var(--fuchsia-220); padding: 12px; display: flex; flex-direction: column; border-radius: 8px; transition: 0.15s; gap: 6px; } .infineat-login__register a span { font-size: 18px; color: var(--fuchsia-800); line-height: 24px; font-weight: 600; } .infineat-login__register a p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; color: var(--gray-400); } .infineat-login__register a:hover { border-color: var(--fuchsia-400); } .infineat-login__register.active { padding: 12px; max-height: 218px; opacity: 1; margin-top: 20px; } @media (max-width: 768px) { .infineat-login__header { padding: 0 12px; border-radius: 6px; } .infineat-login__header h1 { line-height: 40px; font-size: 18px; } .infineat-login__form { border-radius: 8px; padding: 12px; } .infineat-login__form .toggle-password { right: 5px; top: 5px; width: 32px; height: 32px; } .infineat-login__text { border-radius: 8px; padding: 12px; } } .infineat-otp { margin: 32px auto; display: flex; flex-direction: column; gap: 12px; max-width: 480px; } .infineat-otp__header { display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--fuchsia-600); border-radius: 12px; } .infineat-otp__header h1 { font-size: 24px; line-height: 80px; font-weight: 300; color: var(--white); margin: 0; padding: 0; font-family: var(--font-ubuntu); } .infineat-otp__wrapper { border: 0.5px solid var(--fuchsia-300); border-radius: 12px; padding: 24px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); background: var(--white); display: flex; flex-direction: column; } .infineat-otp__wrapper p { font-size: 14px; color: var(--fuchsia-600); margin: 0 0 12px; } .infineat-otp__email-display { color: var(--gray-800); margin-bottom: 16px; } .infineat-otp__form { display: flex; flex-direction: column; gap: 16px; } .infineat-otp__form > button { corner-shape: squircle; min-width: 200px; margin: 0 auto; align-self: center; } .infineat-otp__inputs { display: flex; gap: 12px; } .infineat-otp__inputs input { width: 100%; line-height: 50px; height: auto; padding: 0 6px; border-radius: 6px; border: 1px solid var(--gray-400); font-family: var(--font-ubuntu); transition: 0.15s; color: var(--blue-500); font-size: 28px; font-weight: 600; text-align: center; } .infineat-otp__resend { text-align: center; display: flex; flex-direction: column; gap: 12px; color: var(--gray-600); margin-top: 20px; } .infineat-otp__resend a { display: none; color: var(--gray-600); text-decoration: underline; } @media (max-width: 768px) { .infineat-otp__header { padding: 0 12px; border-radius: 6px; } .infineat-otp__header h1 { line-height: 40px; font-size: 18px; } .infineat-otp__inputs { gap: 8px; } .infineat-otp__wrapper { border-radius: 8px; padding: 12px; } } .infineat-reset-password { margin: 32px auto; display: flex; flex-direction: column; gap: 12px; max-width: 480px; } .infineat-reset-password__header { display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--fuchsia-600); border-radius: 12px; } .infineat-reset-password__header h1 { font-size: 24px; line-height: 80px; font-weight: 300; color: var(--white); margin: 0; padding: 0; font-family: var(--font-ubuntu); } .infineat-reset-password__form { border: 0.5px solid var(--fuchsia-300); border-radius: 12px; padding: 24px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); background: var(--white); display: flex; flex-direction: column; } .infineat-reset-password__form > button { corner-shape: squircle; min-width: 200px; margin: 0 auto; align-self: center; } .infineat-reset-password__form .toggle-password { position: absolute; right: 6px; top: 6px; border: unset; background-color: unset; width: 40px; height: 40px; cursor: pointer; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .infineat-reset-password__form .toggle-password svg { fill: none; flex: 0 0 24px; width: 24px; height: 24px; color: var(--gray-800); } @media (max-width: 768px) { .infineat-reset-password__header { padding: 0 12px; border-radius: 6px; } .infineat-reset-password__header h1 { line-height: 40px; font-size: 18px; } .infineat-reset-password__form { border-radius: 8px; padding: 12px; } } .infineat-forget-password { margin: 32px auto; display: flex; flex-direction: column; gap: 12px; max-width: 480px; } .infineat-forget-password__header { display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--fuchsia-600); border-radius: 12px; } .infineat-forget-password__header h1 { font-size: 24px; line-height: 80px; font-weight: 300; color: var(--white); margin: 0; padding: 0; font-family: var(--font-ubuntu); } .infineat-forget-password__form { border: 0.5px solid var(--fuchsia-300); border-radius: 12px; padding: 24px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); background: var(--white); display: flex; flex-direction: column; } .infineat-forget-password__form > button { corner-shape: squircle; min-width: 200px; margin: 0 auto; align-self: center; } .infineat-forget-password__text { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 20px; } .infineat-forget-password__text a { color: var(--gray-600); text-decoration: underline; } @media (max-width: 768px) { .infineat-forget-password__header { padding: 0 12px; border-radius: 6px; } .infineat-forget-password__header h1 { line-height: 40px; font-size: 18px; } .infineat-forget-password__form { border-radius: 8px; padding: 12px; } .infineat-forget-password__text { border-radius: 8px; padding: 12px; } } .infineat-alert { margin: 16px 0; background-color: var(--white); border-radius: 8px; font-size: 14px; font-weight: 300; line-height: 24px; border: 1px solid var(--fuchsia-300); padding-left: 60px; padding-right: 16px; position: relative; text-align: justify; hyphens: auto; } .infineat-alert > svg { width: 28px; height: 28px; color: var(--orange-400); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); } .infineat-alert--warning { background-color: var(--orange-300); color: var(--white); } .infineat-alert--warning > svg { color: var(--white); } .cart-widget-side { background-color: unset; } #wcfmmp-store { box-shadow: unset; } #wcfmmp-store .body_area { padding: 32px 0 0 0; } #wcfmmp-store .right_side { padding: 0 0 0 16px; } #wcfmmp-store .left_sidebar { padding: 0 16px 0 0; background: unset !important; border: unset; } #wcfmmp-store .tab_area .tab_links { background-color: unset; border: unset; float: unset; display: flex; align-items: center; gap: 16px; } #wcfmmp-store .tab_area .tab_links li { padding: 0; margin: 0; border: unset; border-radius: unset; background: unset; } #wcfmmp-store .tab_area .tab_links li:after { display: none; } #wcfmmp-store .tab_area .tab_links li a { background-color: var(--fuchsia-50); color: var(--fuchsia-600) !important; letter-spacing: 0; padding: 0 16px; font-size: 14px; font-weight: 500; line-height: 36px; text-transform: none; border-radius: 24px; corner-shape: squircle; border: 1px solid var(--fuchsia-300); } #wcfmmp-store .tab_area .tab_links li a:hover { background-color: var(--fuchsia-200); color: var(--fuchsia-600); } #wcfmmp-store .tab_area .tab_links li.active { border-top: unset !important; border-bottom: unset !important; background: unset; } #wcfmmp-store .tab_area .tab_links li.active a { color: var(--white) !important; background-color: var(--fuchsia-600); border-color: var(--fuchsia-600); } #wcfmmp-store #wcfm_store_header { background-color: var(--white) !important; box-shadow: 0 10px 15px -5px rgba(105, 99, 134, 0.1); border: 1px solid var(--fuchsia-300); border-radius: 0 0 12px 12px; border-top: unset; padding: 12px 0; min-height: unset; } #wcfmmp-store .header_left { margin: 0; padding: 0; } #wcfmmp-store .logo_area { width: 100px; height: 100px; top: -120px; left: 24px; } #wcfmmp-store .address { position: static; width: auto; } #wcfmmp-store .address a, #wcfmmp-store .address span { color: var(--fuchsia-800) !important; } #wcfmmp-store .address p { padding: 0; } #wcfmmp-store .wcfm_banner_area { border-radius: 12px 12px 0 0; background-color: var(--white); box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); border: 1px solid var(--fuchsia-300); border-bottom: unset; } #wcfmmp-store .banner_text { text-align: left; padding: 12px 16px 12px 140px; position: static; transform: unset; } #wcfmmp-store .banner_text h1 { font-size: 24px; font-weight: 500; line-height: 32px; color: var(--fuchsia-600) !important; margin: 0; text-transform: none; padding: 0; font-family: var(--font-voltair); } #wcfmmp-store .banner_text h1:before, #wcfmmp-store .banner_text h1:after { display: none; } #wcfmmp-store .banner_img { border-radius: 11px 11px 0 0; height: 240px !important; max-height: 240px !important; } #wcfmmp-store .widget { border-radius: 12px; background-color: var(--white); box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); border: 1px solid var(--fuchsia-300); padding: 20px; } #wcfmmp-store .sidebar_heading h4 { text-transform: none; color: var(--fuchsia-600); border-bottom: 1px solid var(--fuchsia-300); padding-bottom: 16px; } .wd-my-account-sidebar { padding: unset; border-inline-end: unset; } .wd-my-account-links { display: none; } .woocommerce-MyAccount-title { font-size: 18px; padding-inline: unset; padding-bottom: unset; padding: 0 16px; margin-bottom: 16px; border-bottom: unset; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--fuchsia-600); border-radius: 12px; color: var(--white); font-family: var(--font-ubuntu); line-height: 46px; font-weight: 300; } .woocommerce-my-account-wrapper { margin-inline: unset; gap: 32px; } .woocommerce-MyAccount-navigation { border: 0.5px solid var(--fuchsia-300); border-radius: 12px; padding: 12px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); background: var(--white); margin-bottom: unset; } .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 4px; } .woocommerce-MyAccount-navigation ul li > a { font-family: var(--font-ubuntu); font-size: 16px; font-weight: 400; line-height: 28px; color: var(--fuchsia-800); display: flex; align-items: center; gap: 8px; padding: 0 16px; line-height: 40px; border-radius: 6px; } .woocommerce-MyAccount-navigation ul li > a:hover { background-color: var(--fuchsia-200); color: var(--fuchsia-800); } .woocommerce-MyAccount-navigation ul li.is-active > a { background-color: var(--fuchsia-600); color: var(--white); font-weight: 600; } .woocommerce-MyAccount-navigation ul li:last-child > a { background-color: var(--red-200); color: var(--red-400); } .woocommerce-MyAccount-content { flex: 1 0 calc(75% - 32px); max-width: calc(75% - 32px); width: calc(75% - 32px); padding: 16px; border: 0.5px solid var(--fuchsia-300); border-radius: 12px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); background: var(--white); } .woocommerce-MyAccount-content p { color: var(--gray-600); font-size: 16px; } .woocommerce-MyAccount-content p a { color: var(--blue-600); text-decoration: underline; } table.woocommerce-MyAccount-orders { border: 1px solid var(--fuchsia-300); border-radius: 12px; border-spacing: 0; border-collapse: separate; background-color: var(--gray-100); } table.woocommerce-MyAccount-orders thead tr :is(td, th):first-child { padding-inline-start: 8px; } table.woocommerce-MyAccount-orders thead tr :is(td, th):last-child { padding-inline-end: 8px; } table.woocommerce-MyAccount-orders thead tr th { line-height: 32px; color: var(--fuchsia-800); text-align: left; padding: 2px 8px 0; font-size: 14px; border-bottom: unset; text-transform: none; font-weight: 400; } table.woocommerce-MyAccount-orders tbody { background-color: var(--white); box-shadow: 0 -1px 0 0 var(--fuchsia-220); border-radius: 11px; } table.woocommerce-MyAccount-orders tbody tr { background-color: unset; } table.woocommerce-MyAccount-orders tbody tr :is(td, th):first-child { padding-inline-start: 8px; } table.woocommerce-MyAccount-orders tbody tr :is(td, th):last-child { padding-inline-end: 8px; } table.woocommerce-MyAccount-orders tbody tr:not(:last-child):before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background-color: var(--fuchsia-220); height: 1px; } table.woocommerce-MyAccount-orders tbody tr td, table.woocommerce-MyAccount-orders tbody tr th { color: var(--fuchsia-600); line-height: 36px; position: relative; padding: 0 8px; font-size: 14px; border: unset; } table.woocommerce-MyAccount-orders tbody tr td:first-child:before, table.woocommerce-MyAccount-orders tbody tr th:first-child:before { left: 8px; } table.woocommerce-MyAccount-orders tbody tr td:last-child:before, table.woocommerce-MyAccount-orders tbody tr th:last-child:before { right: 8px; } table.woocommerce-MyAccount-orders tbody tr td p, table.woocommerce-MyAccount-orders tbody tr th p { font-size: 14px; color: var(--fuchsia-600); margin-bottom: unset; line-height: 36px; } table.woocommerce-MyAccount-orders tbody tr td a, table.woocommerce-MyAccount-orders tbody tr th a { color: var(--blue-600); text-decoration: underline; } table.woocommerce-MyAccount-orders tbody tr td:is(.product-btn, .woocommerce-orders-table__cell-order-actions) { white-space: nowrap; } table.woocommerce-MyAccount-orders tbody tr td:is(.product-btn, .woocommerce-orders-table__cell-order-actions) a { min-height: 36px; font-size: 12px; background-color: var(--fuchsia-600); border-radius: 18px; line-height: 36px; padding: 0 12px; margin: 0; border: unset; color: var(--white); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 300; transition: 0.15s; white-space: nowrap; text-transform: none; } table.woocommerce-MyAccount-orders tbody tr:first-child td:first-child, table.woocommerce-MyAccount-orders tbody tr:first-child th:first-child { border-radius: 11px 0 0 0; } table.woocommerce-MyAccount-orders tbody tr:first-child td:last-child, table.woocommerce-MyAccount-orders tbody tr:first-child th:last-child { border-radius: 0 11px 0 0; } table.woocommerce-MyAccount-orders tbody tr:last-child td:first-child, table.woocommerce-MyAccount-orders tbody tr:last-child th:first-child { border-radius: 0 0 0 11px; } table.woocommerce-MyAccount-orders tbody tr:last-child td:last-child, table.woocommerce-MyAccount-orders tbody tr:last-child th:last-child { border-radius: 0 0 11px 0; } table.woocommerce-MyAccount-orders tbody tr:first-child:last-child td:first-child, table.woocommerce-MyAccount-orders tbody tr:first-child:last-child th:first-child { border-radius: 11px 0 0 11px; } table.woocommerce-MyAccount-orders tbody tr:first-child:last-child td:last-child, table.woocommerce-MyAccount-orders tbody tr:first-child:last-child th:last-child { border-radius: 0 11px 11px 0; } .woocommerce-MyAccount-content > h2, .woocommerce-MyAccount-content header > h2 { text-transform: none; line-height: 32px; font-weight: 500; font-size: 16px; color: var(--fuchsia-800); margin-bottom: 0; } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; } .woocommerce-Address-title .edit { font-size: 14px; text-decoration: underline; color: var(--blue-600); } .woocommerce-Addresses { gap: 24px; } .woocommerce-Address { border: 1px solid var(--fuchsia-300); border-radius: 12px; padding: 12px; } .woocommerce-Address address { background-color: var(--gray-100); padding: 12px; border-radius: 8px; border: 1px solid var(--fuchsia-300); color: var(--fuchsia-600); margin-bottom: 0; } button[name=save_account_details], button[name=save_address] { font-size: 16px; background-color: var(--fuchsia-600); color: var(--white); display: inline-flex; align-items: center; justify-content: center; line-height: 40px; min-height: 40px; padding: 0 24px; border-radius: 20px; transition: 0.1s; min-width: 250px; min-height: auto; border: unset; cursor: pointer; font-weight: 500; corner-shape: squircle; } button[name=save_account_details]:hover, button[name=save_address]:hover { background-color: var(--fuchsia-800); color: var(--white); } fieldset { padding: 16px; border: 1px solid var(--fuchsia-300); border-radius: 12px; } fieldset legend { line-height: 32px; color: var(--fuchsia-600); font-size: 18px; font-weight: 500; } .password-input input[type=email], .password-input input[type=date], .password-input input[type=search], .password-input input[type=number], .password-input input[type=text], .password-input input[type=tel], .password-input input[type=url], .password-input input[type=password], .password-input :root textarea, .password-input :root select { width: 100%; line-height: 50px; height: auto; padding: 0 12px; border-radius: 6px; border: 1px solid var(--gray-400); font-family: var(--font-ubuntu); transition: 0.15s; color: var(--blue-500); font-size: 16px; } .show-password-input { top: 5px; inset-inline-end: 5px; } @media (max-width: 1200px) { .woocommerce-Addresses { flex-direction: column; } } @media (max-width: 1024px) { .wd-my-account-sidebar { flex-basis: 25%; max-width: 25%; width: 25%; } } @media (max-width: 768px) { .wd-my-account-sidebar, .woocommerce-MyAccount-content { flex: 1 0 100%; max-width: 100%; width: 100%; } .password-input input[type=email], .password-input input[type=date], .password-input input[type=search], .password-input input[type=number], .password-input input[type=text], .password-input input[type=tel], .password-input input[type=url], .password-input input[type=password], .password-input :root textarea, .password-input :root select { font-size: 14px; line-height: 40px; } .password-input input[type=email]::placeholder, .password-input input[type=date]::placeholder, .password-input input[type=search]::placeholder, .password-input input[type=number]::placeholder, .password-input input[type=text]::placeholder, .password-input input[type=tel]::placeholder, .password-input input[type=url]::placeholder, .password-input input[type=password]::placeholder, .password-input :root textarea::placeholder, .password-input :root select::placeholder { font-size: 14px; font-family: var(--font-ubuntu); color: var(--fuchsia-250); opacity: 0; } .password-input input[type=email]:focus, .password-input input[type=date]:focus, .password-input input[type=search]:focus, .password-input input[type=number]:focus, .password-input input[type=text]:focus, .password-input input[type=tel]:focus, .password-input input[type=url]:focus, .password-input input[type=password]:focus, .password-input :root textarea:focus, .password-input :root select:focus { outline: none; border-color: var(--gray-900); box-shadow: unset; } .password-input input[type=email]:focus::placeholder, .password-input input[type=date]:focus::placeholder, .password-input input[type=search]:focus::placeholder, .password-input input[type=number]:focus::placeholder, .password-input input[type=text]:focus::placeholder, .password-input input[type=tel]:focus::placeholder, .password-input input[type=url]:focus::placeholder, .password-input input[type=password]:focus::placeholder, .password-input :root textarea:focus::placeholder, .password-input :root select:focus::placeholder { opacity: 1; } .show-password-input { top: 0; inset-inline-end: 0; } } /*# sourceMappingURL=style.css.map */ /* Infineat Plus plugin-critical rules preserved during master-style merge. */ /* ---- protected: assets/css/cart-fees.css ---- */ .infineat-plus-custom-message { background-color: #ffebee; border: 1px solid #f5c6cb; color: #721c24; padding: 15px; margin-bottom: 20px; border-radius: 5px; font-size: 14px; font-weight: 400; } .infineat-plus-custom-message p { margin: 0 0 10px 0; } .infineat-plus-custom-message p:last-child { margin-bottom: 0; } /* ---- protected: assets/css/cart-packing-styles.css ---- */ .vendor-group { margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px; } .vendor-group h3 { font-size: 1.5em; margin: 0 0 10px; } .packing-category-group { margin-left: 20px; margin-bottom: 15px; } .packing-category-group h4 { font-size: 1.2em; margin: 0 0 5px; } .cart-items, .checkout-items { list-style: none; padding: 0; margin: 0; } .cart-items td, .checkout-items li { padding: 5px 0; } /* ---- protected: assets/css/wsi-cart-message.css ---- */ #wsi-cart-message-placeholder { position: relative; margin-bottom: 20px; } .wsi-cart-message-box { background: #e0f7e9; color: #333; border-left: 5px solid #00b67a; padding: 15px 20px; position: relative; font-size: 15px; } .wsi-cart-message-close { position: absolute; right: 10px; top: 10px; background: transparent; border: none; font-size: 18px; cursor: pointer; } .wsi-hidden { display: none; } /* TEST */ /* ---- protected: assets/css/wsi-shopping-list.css ---- */ .wsi-shopping-list-container { display: flex; flex-direction: column; gap: 12px; } .wsi-shopping-list { border-radius: 12px; border: 1px solid var(--fuchsia-450); margin: 16px 4px; padding: 0 12px; } .wsi-list-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid transparent; padding: 12px 8px; transition: 0.15s; } .wsi-list-header.open { border-color: var(--fuchsia-450); } .wsi-list-header-title { display: flex; align-items: center; gap: 12px; font-family: var(--font-ubuntu); } .wsi-list-header-title h3 { font-family: var(--font-ubuntu); font-size: 18px; font-weight: 500; line-height: 28px; color: var(--fuchsia-800); display: flex; align-items: center; gap: 8px; margin: 0; } .wsi-list-toggle-icon { font-size: 20px; color: var(--fuchsia-500); transition: transform 0.2s ease-in-out; } .wsi-list-header.open .wsi-list-toggle-icon { transform: rotate(180deg); } .wsi-list-header-actions { margin-left: auto; } .wsi-list-header-actions button { font-size: 16px; background-color: var(--fuchsia-600); color: var(--white); display: inline-flex; align-items: center; justify-content: center; line-height: 40px; min-height: 40px; padding: 0 24px; border-radius: 20px; transition: 0.1s; min-height: auto; border: unset; cursor: pointer; } .wsi-update-cart-form { padding-top: 12px; } .wsi-list-actions-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; } .wsi-add-product-section { border-radius: 12px; padding: 16px; position: relative; border: 1px solid var(--fuchsia-600); background-color: var(--fuchsia-50); margin-bottom: 12px; } .wsi-add-product-section h4 { font-size: 16px; display: flex; gap: 8px; align-items: center; color: var(--fuchsia-800); } .wsi-add-product-section input[type="text"] { width: 100%; line-height: 50px; height: auto; padding: 0 12px; border-radius: 6px; border: 1px solid var(--gray-400); font-family: var(--font-ubuntu); transition: 0.15s; color: var(--blue-500); font-size: 16px; } .wsi-add-product-section input[type="text"]:focus { outline: none; border-color: var(--gray-900); box-shadow: unset; } .wsi-search-results { display: flex; flex-direction: column; } .wsi-search-result-item { padding: 8px 0; display: flex; align-items: center; gap: 12px; } .wsi-search-result-item img { width: 60px; flex: 0 0 60px; aspect-ratio: 1 / 1; border-radius: 6px; background-color: var(--gray-50); object-fit: cover; } .wsi-search-result-item span { font-size: 16px; color: var(--fuchsia-800); } .wsi-search-result-item button { margin-left: auto; min-width: unset; } .wsi-search-result-item + .wsi-search-result-item { border-top: 1px solid var(--fuchsia-300); } /* TODO: Button Styles (Remove this after add general styles) */ /* Start button styles */ .button-outline, a.button-outline { font-size: 16px; line-height: 38px; min-height: 40px; border: 1px solid var(--fuchsia-700); background-color: var(--fuchsia-50); color: var(--fuchsia-600); display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border-radius: 20px; transition: 0.1s; min-width: 250px; min-height: auto; } .button-outline:hover, a.button-outline:hover { background-color: var(--fuchsia-200); color: var(--fuchsia-600); } .button-fill, a.button-fill { font-size: 16px; background-color: var(--fuchsia-600); color: var(--white); display: inline-flex; align-items: center; justify-content: center; line-height: 40px; min-height: 40px; padding: 0 24px; border-radius: 20px; transition: 0.1s; min-width: 250px; min-height: auto; border: unset; cursor: pointer; } .button-fill:hover, a.button-fill:hover { background-color: var(--fuchsia-800); color: var(--white); } @media (max-width: 768px) { .button-outline, a.button-outline { min-width: unset; font-size: 14px; } .button-fill, a.button-fill { min-width: unset; font-size: 14px; } } /* Start button styles */ /* TODO: Cart item Styles (Remove this after add general styles) */ /* Start cart styles */ .infineat-cart__vendor-item { display: flex; padding: 8px 0; gap: 12px; position: relative; } .infineat-cart__vendor-item:first-of-type { border-top: unset; } .infineat-cart__vendor-item + .infineat-cart__vendor-item { border-top: 1px solid var(--fuchsia-300); } .infineat-cart__vendor-item:last-of-type { border-bottom: unset; } .infineat-cart__vendor-item__discount { position: absolute; background-image: url("../img/sale-badge.png"); background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; width: 79px; height: 39px; left: -21px; top: 16px; color: #fff; font-family: var(--font-voltair); font-weight: 400; font-size: 15px; padding-bottom: 2px; padding-left: 8px; z-index: 50; } .infineat-cart__vendor-item__image { width: 100px; flex: 0 0 100px; text-align: center; display: flex; flex-direction: column; gap: 8px; position: relative; } .infineat-cart__vendor-item__image img { height: auto; width: 100%; aspect-ratio: 1/1; border-radius: 6px; background-color: var(--gray-50); object-fit: cover; } .infineat-cart__vendor-item__quantity { transform: translateX(-50%); position: relative; left: 50%; height: 28px; width: 64px; border: 1px solid var(--fuchsia-450); color: var(--fuchsia-600); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; border-radius: 14px; background-color: var(--fuchsia-50); margin-bottom: -18px; margin-top: -4px; corner-shape: squircle; } .infineat-cart__vendor-item__content { width: calc(100% - 100px - 140px - 24px); flex: 0 0 calc(100% - 100px - 140px - 24px); display: flex; flex-direction: column; gap: 2px; } .infineat-cart__vendor-item__content > small { font-size: 14px; color: var(--fuchsia-600); font-family: var(--font-ubuntu); } .infineat-cart__vendor-item__content > small a:not([class^="button"]), .infineat-cart__vendor-item__content > small a:not([class^="button"]):visited, .infineat-cart__vendor-item__content > small a:not([class^="button"]):hover, .infineat-cart__vendor-item__content > small a:not([class^="button"]):active { color: inherit; } .infineat-cart__vendor-item__content > span { font-size: 16px; color: var(--fuchsia-800); } .infineat-cart__vendor-item__content > span a:not([class^="button"]), .infineat-cart__vendor-item__content > span a:not([class^="button"]):visited, .infineat-cart__vendor-item__content > span a:not([class^="button"]):hover, .infineat-cart__vendor-item__content > span a:not([class^="button"]):active { color: inherit; } .infineat-cart__vendor-item__content__price { line-height: 28px; padding: 4px 0; display: flex; gap: 16px; align-self: flex-start; } .infineat-cart__vendor-item__content__price > span { color: var(--fuchsia-800); font-size: 18px; } .infineat-cart__vendor-item__content__price > span:last-child:not(:first-child) { margin-left: auto; } .infineat-cart__vendor-item__content__price--has-discount { font-size: 18px; } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(1) { color: var(--red-400); } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(2) { color: var(--gray-600); text-decoration: line-through; } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(1) .amount { color: var(--red-400); } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(2) .amount { color: var(--gray-600); } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(1) .woocommerce-Price-currencySymbol, .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(2) .woocommerce-Price-currencySymbol { color: inherit; } .infineat-cart__vendor-item__content__discount { padding: 0 8px; border: 1px solid var(--fuchsia-500); border-radius: 4px; color: var(--red-400); line-height: 18px; font-family: var(--font-sans); font-weight: 400; font-size: 12px; align-self: flex-start; } .infineat-cart__vendor-item__content__notice { color: var(--orange-800); line-height: 24px; display: flex; align-items: center; gap: 8px; font-family: var(--font-voltair); } .infineat-cart__vendor-item__content__notice svg { width: 16px; height: 16px; } .infineat-cart__vendor-item__content__shipping { font-family: var(--font-voltair); color: var(--green-400); display: flex; align-items: center; gap: 2px; padding: 4px 0; margin-left: -6px; } .infineat-cart__vendor-item__content__shipping svg { width: 28px; height: 28px; } .infineat-cart__vendor-item__content__shipping div { display: flex; flex-direction: column; } .infineat-cart__vendor-item__content--full-width { width: calc(100% - 100px - 12px); flex: 0 0 calc(100% - 100px - 12px); } .infineat-cart__vendor-item__content--full-width .infineat-cart__vendor-item__content__price { align-self: stretch; } .infineat-cart__vendor-item__content--full-width .infineat-cart__vendor-item__content__discount { align-self: stretch; } .infineat-cart__vendor-item__actions { width: 140px; flex: 0 0 140px; display: flex; align-items: center; flex-direction: column; position: relative; gap: 4px; } .infineat-cart__vendor-item__actions__quantity { display: inline-flex; align-items: center; background-color: var(--gray-100); color: var(--fuchsia-800); line-height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-450); } .infineat-cart__vendor-item__actions__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; } .infineat-cart__vendor-item__actions__quantity button svg { width: 36px; height: 36px; border-radius: 50%; } .infineat-cart__vendor-item__actions__quantity button:hover { background-color: unset; border: unset; } .infineat-cart__vendor-item__actions__quantity button:active { background-color: var(--fuchsia-100); } .infineat-cart__vendor-item__actions__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-cart__vendor-item__actions__quantity input[type="number"]::-webkit-inner-spin-button, .infineat-cart__vendor-item__actions__quantity input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-cart__vendor-item__actions__quantity input[type="number"]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-cart__vendor-item__actions__quantity input[type="number"]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } .infineat-cart__vendor-item__actions__quantity-notice { line-height: 24px; min-height: 24px; font-family: var(--font-voltair); } .infineat-cart__vendor-item__actions__quantity-notice span { color: var(--red-400); font-size: 14px; } .infineat-cart__vendor-item__actions__total-price { margin-top: 12px; color: var(--fuchsia-800); font-size: 18px; line-height: 24px; text-align: center; } .infineat-cart__vendor-item__actions__total-price span { display: inline-block; } .infineat-cart__vendor-item__actions__remove { position: absolute; right: -8px; top: 76px; } .infineat-cart__vendor-item__actions__remove a { background: unset; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--fuchsia-600); padding: 0; cursor: pointer; transition: 0.1s; } .infineat-cart__vendor-item__actions__remove a svg { width: 36px; height: 36px; color: var(--fuchsia-600); } .infineat-cart__vendor-item__actions__total-price-notice { min-height: 18px; text-align: center; font-family: var(--font-sans); } .infineat-cart__vendor-item__actions__total-price-notice > span { font-size: 12px; font-weight: 400; line-height: 18px; padding: 0 8px; border-radius: 4px; color: var(--red-400); border: 1px solid var(--fuchsia-500); } .infineat-cart__vendor-item-mini { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--fuchsia-300); } .infineat-cart__vendor-item-mini:last-of-type { border-bottom: unset; } .infineat-cart__vendor-item-mini__image { width: 52px; flex: 0 0 52px; display: flex; } .infineat-cart__vendor-item-mini__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background-color: var(--gray-50); } .infineat-cart__vendor-item-mini__title { display: flex; flex-direction: column; gap: 2px; flex: 0 0 calc(100% - 52px - 160px - 80px - 80px - 32px); } .infineat-cart__vendor-item-mini__title small { font-size: 15px; color: var(--fuchsia-600); font-family: var(--font-baloo); line-height: 18px; } .infineat-cart__vendor-item-mini__title span { font-size: 16px; color: var(--fuchsia-800); } .infineat-cart__vendor-item-mini__price { display: flex; flex-direction: column; flex: 0 0 160px; width: 160px; gap: 4px; line-height: 22px; } .infineat-cart__vendor-item-mini__price > div { display: flex; gap: 12px; } .infineat-cart__vendor-item-mini__price > div span { font-size: 18px; color: var(--red-400); } .infineat-cart__vendor-item-mini__price > div span:nth-child(2) { color: var(--gray-600); text-decoration: line-through; } .infineat-cart__vendor-item-mini__price > div span:first-child:last-child { color: var(--fuchsia-600); } .infineat-cart__vendor-item-mini__price span { font-size: 14px; color: var(--fuchsia-600); } .infineat-cart__vendor-item-mini__stock { flex: 0 0 80px; width: 80px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; text-align: right; color: var(--fuchsia-800); line-height: 22px; } .infineat-cart__vendor-item-mini__stock span { display: flex; align-items: center; gap: 4px; font-weight: 300; } .infineat-cart__vendor-item-mini__stock span b { font-size: 18px; font-weight: 500; } .infineat-cart__vendor-item-mini__final-price { flex: 0 0 80px; width: 80px; display: flex; align-items: center; justify-content: flex-end; text-align: right; color: var(--fuchsia-600); font-size: 18px; line-height: 22px; } @media (max-width: 768px) { .infineat-cart__vendor-item { padding: 8px 0; gap: 8px; flex-wrap: wrap; } .infineat-cart__vendor-item__image { width: 60px; flex: 0 0 60px; } .infineat-cart__vendor-item__quantity { font-size: 14px; line-height: 20px; width: 48px; height: 22px; } .infineat-cart__vendor-item__content { gap: 1px; width: calc(100% - 60px - 36px - 8px); flex: 0 0 calc(100% - 60px - 36px - 8px); } .infineat-cart__vendor-item__content--full-width { width: calc(100% - 60px - 8px); flex: 0 0 calc(100% - 60px - 8px); } .infineat-cart__vendor-item__content > span { font-size: 14px; order: 2; } .infineat-cart__vendor-item__content > small { font-size: 12px; order: 1; } .infineat-cart__vendor-item__content__price { padding: 0; order: 5; line-height: 22px; } .infineat-cart__vendor-item__content__price > span { font-size: 16px; } .infineat-cart__vendor-item__content__notice { order: 3; gap: 6px; font-size: 12px; } .infineat-cart__vendor-item__content__notice svg { width: 14px; height: 14px; } .infineat-cart__vendor-item__content__shipping { order: 4; gap: 2px; margin-left: -2px; font-size: 12px; padding: 0; } .infineat-cart__vendor-item__content__shipping svg { width: 20px; height: 20px; } .infineat-cart__vendor-item__content__discount { order: 5; } .infineat-cart__vendor-item__discount { left: -15px; top: 8px; width: 55px; font-size: 12px; padding-left: 4px; } .infineat-cart__vendor-item__actions { z-index: 2; width: 100%; flex: 0 0 100%; flex-wrap: wrap; flex-direction: row-reverse; position: static; } .infineat-cart__vendor-item__actions__total-price { margin: 0; order: 4; margin-right: auto; } .infineat-cart__vendor-item__actions__quantity { order: 3; } .infineat-cart__vendor-item__actions__quantity button { width: 30px; height: 30px; } .infineat-cart__vendor-item__actions__quantity-notice { width: calc(100% - 108px - 4px); flex: 0 0 calc(100% - 108px - 4px); order: 2; text-align: left; margin-right: auto; } .infineat-cart__vendor-item__actions__total-price-notice { width: 108px; flex: 0 0 108px; text-align: center; order: 1; } .infineat-cart__vendor-item__actions__remove { right: 0; top: 0; } } /* end cart styles */ /* ---- protected: includes/wishlist/assets/wishlist.css ---- */ /** * Infineat+ card presentation for Woodmart's native wishlist output. * * Woodmart retains ownership of: * - the My Account navigation and content shell; * - wishlist groups and pagination; * - remove/add-to-cart AJAX events. */ .infineat-wishlist-layout .wd-wishlist-content .wd-products-element { width: 100%; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-grid-wrapper { --grid-columns: 3; --desktop-columns: 3; --mobile-columns: 2; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem; align-items: start; margin: 0; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card.wd-product { width: auto !important; min-width: 0; max-width: none; margin: 0 !important; padding: 0 !important; text-align: start; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__content, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__offer, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__price, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__price-info, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__vendor, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__title, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__sku, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__notice, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__shipping { text-align: start; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__category { justify-content: center; text-align: center; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__price, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__vendor a, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__title h3, .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__title h3 a { justify-content: flex-start; text-align: start; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__add-to-wishlist .wd-wishlist-btn { display: block !important; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__add-to-wishlist .wd-wishlist-btn a { cursor: pointer; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card__add-to-wishlist .wd-wishlist-btn a.loading { pointer-events: none; opacity: 0.65; } .infineat-wishlist-layout .wd-wishlist-content .infineat-product-card.infineat-wishlist-removing { pointer-events: none; opacity: 0.35; transform: scale(0.98); } @media (min-width: 1025px) { .infineat-wishlist-layout--account .wd-wishlist-content .infineat-product-grid-wrapper, .infineat-wishlist-layout--logged-in .wd-wishlist-content .infineat-product-grid-wrapper { --desktop-columns: 4; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .infineat-wishlist-layout--guest .wd-wishlist-content .infineat-product-grid-wrapper { --desktop-columns: 5; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } @media (min-width: 768px) and (max-width: 1024px) { .infineat-wishlist-layout .wd-wishlist-content .infineat-product-grid-wrapper { --desktop-columns: 3; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { .infineat-wishlist-layout .wd-wishlist-content .infineat-product-grid-wrapper { --mobile-columns: 2; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }