/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
--form-py: calc(var(--spacing) * 2);
--form-px: calc(var(--spacing) * 3);
--form-radius: var(--radius-lg);
--form-stroke: var(--color-slate-400);
--form-bg: #fff;
--form-color: currentcolor;
--form-active-color: var(--color-primary);
--select-icon: url('data:image/svg+xml,');
--select-icon-size: 1.25em;
--select-icon-offset: 0.8rem;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-50: oklch(97.1% 0.013 17.38);
--color-red-100: oklch(93.6% 0.032 17.717);
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-red-700: oklch(50.5% 0.213 27.518);
--color-red-800: oklch(44.4% 0.177 26.899);
--color-yellow-50: oklch(98.7% 0.026 102.212);
--color-yellow-300: oklch(90.5% 0.182 98.111);
--color-yellow-400: oklch(85.2% 0.199 91.936);
--color-yellow-500: oklch(79.5% 0.184 86.047);
--color-green-50: oklch(98.2% 0.018 155.826);
--color-green-400: oklch(79.2% 0.209 151.711);
--color-green-500: oklch(72.3% 0.219 149.579);
--color-green-600: oklch(62.7% 0.194 149.214);
--color-green-700: oklch(52.7% 0.154 150.069);
--color-sky-600: oklch(58.8% 0.158 241.966);
--color-sky-700: oklch(50% 0.134 242.749);
--color-blue-50: oklch(97% 0.014 254.604);
--color-blue-100: oklch(93.2% 0.032 255.585);
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-blue-700: oklch(48.8% 0.243 264.376);
--color-blue-800: oklch(42.4% 0.199 265.638);
--color-blue-900: oklch(37.9% 0.146 265.522);
--color-indigo-500: oklch(58.5% 0.233 277.117);
--color-slate-300: oklch(86.9% 0.022 252.894);
--color-slate-400: oklch(70.4% 0.04 256.788);
--color-slate-600: oklch(44.6% 0.043 257.281);
--color-slate-950: oklch(12.9% 0.042 264.695);
--color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-500: oklch(55.1% 0.027 264.364);
--color-gray-600: oklch(44.6% 0.03 256.802);
--color-gray-700: oklch(37.3% 0.034 259.733);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665);
--color-stone-300: oklch(86.9% 0.005 56.366);
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-base: 1rem;
--text-base--line-height: calc(1.5 / 1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-7xl: 4.5rem;
--text-7xl--line-height: 1;
--text-8xl: 6rem;
--text-8xl--line-height: 1;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--animate-spin: spin 1s linear infinite;
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--blur-sm: 8px;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-bg: var(--color-white);
--color-fg: var(--color-slate-950);
--color-fg-secondary: var(--color-slate-600);
--color-surface: var(--color-white);
--font-vietnam: 'Be Vietnam Pro', ui-sans-serif, sans-serif;
--font-vietnam-regular: 'Be Vietnam', ui-sans-serif, sans-serif;
--font-baskerville: 'Baskervville', ui-serif, serif;
--font-barlow: 'barlow_condensedregular';
--font-dance: 'dancing_scriptregular';
--color-container-lighter: var(--color-white);
--color-container: var(--color-gray-50);
--color-container-darker: var(--color-gray-100);
--gradient-gold-border: linear-gradient(180deg,
#F7D592 4%,
#BC913D 14.5%,
#FFF7E7 23%,
#FFDFA2 35.5%,
#F7D592 38%,
#CB9836 52.5%,
#FFDFA2 59.5%,
#BB903E 69.5%,
#F8D798 86.5%,
#A27724 100%);
--gradient-gold-fill: linear-gradient(180deg,
#FEF4E1 0%,
#E1CE98 100%);
--border-menu: 1px solid #e5e5e5;
--goldstroke: linear-gradient(270deg,
#F7D592 4%,
#BC913D 14.5%,
#FFF7E7 23%,
#FFDFA2 35.5%,
#F7D592 38%,
#CB9836 52.5%,
#FFDFA2 59.5%,
#BB903E 69.5%,
#F8D798 86.5%,
#A27724 100%);
--width-am-latter: 32px;
--width-am-popup-content: 600px;
--height-am-latter: 32px;
--height-am-popup-content: 415px;
--color-cornflower-100: #8392a7;
--padding-full: 100%;
--color-amsb_graystarts: #cbd5e0;
--color-amsb_yellowstars: #f6e05e;
--color-amsb_sl_gray: #dadada;
--color-amsb_sl_gray_1: #b6b6b6;
--color-amsb_sl_gray_2: #dfdedd;
--color-amsb_sl_gray_3: #4a4948;
--max-width-100-50: calc(100% - 50px);
--height-carousel-product-item: 540px;
--color-amscroll-border-color: var(--amscroll-border-color);
--color-amscroll-background-color: var(--amscroll-background-color);
--color-amscrollcounter-secondary-color: #B8C5E8;
--color-primary-lighter: oklch(52% 0.2 265);
--color-primary: oklch(46% 0.2 265);
--color-primary-darker: oklch(28% 0.2 265);
--color-secondary: oklch(53% 0.15 150);
--color-secondary-darker: oklch(39% 0.1 153);
--color-on-primary: #fff;
}
@layer base {
:is( input:where(:not([type])), [type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], textarea, select, .form-input, .form-textarea, .form-select, .form-multiselect ) {
appearance: none;
padding-block: var(--form-py);
padding-inline: var(--form-px);
border-radius: var(--form-radius);
border-width: 1px;
border-color: var(--form-stroke);
background-color: var(--form-bg);
color: var(--form-color);
--outline-size: 1px;
--outline-offset: 0px;
&:focus {
border-color: var(--form-active-color);
outline-color: var(--form-active-color);
}
}
:is(select:where(:not([size]:not([size="1"]), [multiple])), .form-select) {
--_icon-position: right;
padding-inline-end: calc( var(--select-icon-size) + var(--select-icon-offset) + 0.5ch );
background: var(--select-icon) var(--form-bg) var(--_icon-position) var(--select-icon-offset) center/var(--select-icon-size) no-repeat;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
&:dir(rtl) {
--_icon-position: left;
}
}
:is([type="checkbox"], [type="radio"], .form-checkbox, .form-radio) {
appearance: none;
flex-shrink: 0;
display: inline-block;
block-size: calc(var(--spacing) * 4);
inline-size: calc(var(--spacing) * 4);
padding: 0;
border-width: 2px;
border-color: var(--form-stroke);
background-color: var(--form-bg);
color: var(--form-color);
background-origin: border-box;
vertical-align: middle;
user-select: none;
print-color-adjust: exact;
block-size: calc(var(--spacing) * 4.5);
inline-size: calc(var(--spacing) * 4.5);
&:focus {
outline-color: var(--form-active-color);
}
&:focus, &:checked {
border-color: var(--form-active-color);
}
}
:is([type="checkbox"], .form-checkbox) {
&:checked, &:indeterminate {
border-color: transparent;
background: var(--form-active-color, currentColor) center/contain no-repeat;
}
&:indeterminate {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
}
&:checked {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}
}
:is([type="radio"], .form-radio) {
border-radius: 50%;
&:checked {
border-color: transparent;
background: var(--form-active-color, currentColor) center/contain no-repeat;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
}
}
}
@layer theme, base, components, utilities;
@layer theme;
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.collapse {
visibility: collapse;
}
.invisible {
visibility: hidden;
}
.visible {
visibility: visible;
}
.backdrop {
position: fixed;
inset: 0;
background-color: var(--backdrop, hsl(0 0 0 / 20%));
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
.\!relative {
position: relative !important;
}
.absolute {
position: absolute;
}
.absolute\! {
position: absolute !important;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
.static {
position: static;
}
.sticky {
position: sticky;
}
.-inset-4 {
inset: calc(var(--spacing) * -4);
}
.inset-0 {
inset: calc(var(--spacing) * 0);
}
.inset-x-0 {
inset-inline: calc(var(--spacing) * 0);
}
.inset-y-0 {
inset-block: calc(var(--spacing) * 0);
}
.\!top-0 {
top: calc(var(--spacing) * 0) !important;
}
.\!top-1\/2 {
top: calc(1/2 * 100%) !important;
}
.-top-1 {
top: calc(var(--spacing) * -1);
}
.-top-2 {
top: calc(var(--spacing) * -2);
}
.-top-3 {
top: calc(var(--spacing) * -3);
}
.top-0 {
top: calc(var(--spacing) * 0);
}
.top-1 {
top: calc(var(--spacing) * 1);
}
.top-1\/2 {
top: calc(1/2 * 100%);
}
.top-1\/2\! {
top: calc(1/2 * 100%) !important;
}
.top-1\/3 {
top: calc(1/3 * 100%);
}
.top-2 {
top: calc(var(--spacing) * 2);
}
.top-3 {
top: calc(var(--spacing) * 3);
}
.top-4 {
top: calc(var(--spacing) * 4);
}
.top-5 {
top: calc(var(--spacing) * 5);
}
.top-6 {
top: calc(var(--spacing) * 6);
}
.top-10 {
top: calc(var(--spacing) * 10);
}
.top-12 {
top: calc(var(--spacing) * 12);
}
.top-14 {
top: calc(var(--spacing) * 14);
}
.top-15 {
top: calc(var(--spacing) * 15);
}
.top-16 {
top: calc(var(--spacing) * 16);
}
.top-100 {
top: calc(var(--spacing) * 100);
}
.top-\[3\%\] {
top: 3%;
}
.top-full {
top: 100%;
}
.\!right-0 {
right: calc(var(--spacing) * 0) !important;
}
.-right-2 {
right: calc(var(--spacing) * -2);
}
.-right-3 {
right: calc(var(--spacing) * -3);
}
.-right-8 {
right: calc(var(--spacing) * -8);
}
.-right-40 {
right: calc(var(--spacing) * -40);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
.right-0\! {
right: calc(var(--spacing) * 0) !important;
}
.right-1 {
right: calc(var(--spacing) * 1);
}
.right-1\.5 {
right: calc(var(--spacing) * 1.5);
}
.right-2 {
right: calc(var(--spacing) * 2);
}
.right-2\.5 {
right: calc(var(--spacing) * 2.5);
}
.right-3 {
right: calc(var(--spacing) * 3);
}
.right-4 {
right: calc(var(--spacing) * 4);
}
.right-\[5px\] {
right: 5px;
}
.right-\[auto\] {
right: auto;
}
.-bottom-14 {
bottom: calc(var(--spacing) * -14);
}
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
.bottom-2\/4 {
bottom: calc(2/4 * 100%);
}
.bottom-5 {
bottom: calc(var(--spacing) * 5);
}
.bottom-20 {
bottom: calc(var(--spacing) * 20);
}
.bottom-\[140px\] {
bottom: 140px;
}
.bottom-px {
bottom: 1px;
}
.\!left-0 {
left: calc(var(--spacing) * 0) !important;
}
.left-0 {
left: calc(var(--spacing) * 0);
}
.left-0\! {
left: calc(var(--spacing) * 0) !important;
}
.left-1\.5 {
left: calc(var(--spacing) * 1.5);
}
.left-1\/2 {
left: calc(1/2 * 100%);
}
.left-1\/3 {
left: calc(1/3 * 100%);
}
.left-2 {
left: calc(var(--spacing) * 2);
}
.left-2\.5 {
left: calc(var(--spacing) * 2.5);
}
.left-2\/4 {
left: calc(2/4 * 100%);
}
.left-3 {
left: calc(var(--spacing) * 3);
}
.left-10 {
left: calc(var(--spacing) * 10);
}
.left-full {
left: 100%;
}
.isolate {
isolation: isolate;
}
.z-0 {
z-index: 0;
}
.z-2 {
z-index: 2;
}
.z-5 {
z-index: 5;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
.z-60 {
z-index: 60;
}
.z-99 {
z-index: 99;
}
.z-997 {
z-index: 997;
}
.z-998 {
z-index: 998;
}
.z-999 {
z-index: 999;
}
.z-1030 {
z-index: 1030;
}
.z-9999 {
z-index: 9999;
}
.z-\[9\] {
z-index: 9;
}
.z-\[99\] {
z-index: 99;
}
.z-\[998\] {
z-index: 998;
}
.z-\[1030\] {
z-index: 1030;
}
.z-\[9999\] {
z-index: 9999;
}
.z-\[99999\] {
z-index: 99999;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-first {
order: -9999;
}
.col-3 {
grid-column: 3;
}
.col-4 {
grid-column: 4;
}
.col-6 {
grid-column: 6;
}
.col-8 {
grid-column: 8;
}
.col-10 {
grid-column: 10;
}
.col-12 {
grid-column: 12;
}
.\!float-left {
float: left !important;
}
.float-right {
float: right;
}
.container {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
}
.page-main-full-width {
margin: 0 !important;
max-width: 100%;
width: 100%;
}
.\!m-0 {
margin: calc(var(--spacing) * 0) !important;
}
.-m-4 {
margin: calc(var(--spacing) * -4);
}
.m-0 {
margin: calc(var(--spacing) * 0);
}
.m-0\.5 {
margin: calc(var(--spacing) * 0.5);
}
.m-1 {
margin: calc(var(--spacing) * 1);
}
.m-4 {
margin: calc(var(--spacing) * 4);
}
.m-auto {
margin: auto;
}
.container {
margin-inline: auto;
padding-inline: calc(var(--spacing) * 6);
}
.-mx-2 {
margin-inline: calc(var(--spacing) * -2);
}
.-mx-3 {
margin-inline: calc(var(--spacing) * -3);
}
.mx-0 {
margin-inline: calc(var(--spacing) * 0);
}
.mx-1 {
margin-inline: calc(var(--spacing) * 1);
}
.mx-2 {
margin-inline: calc(var(--spacing) * 2);
}
.mx-2\.5 {
margin-inline: calc(var(--spacing) * 2.5);
}
.mx-4 {
margin-inline: calc(var(--spacing) * 4);
}
.mx-auto {
margin-inline: auto;
}
.my-0 {
margin-block: calc(var(--spacing) * 0);
}
.my-2 {
margin-block: calc(var(--spacing) * 2);
}
.my-3 {
margin-block: calc(var(--spacing) * 3);
}
.my-5 {
margin-block: calc(var(--spacing) * 5);
}
.my-8 {
margin-block: calc(var(--spacing) * 8);
}
.my-10 {
margin-block: calc(var(--spacing) * 10);
}
.my-12 {
margin-block: calc(var(--spacing) * 12);
}
.my-auto {
margin-block: auto;
}
.ms-0 {
margin-inline-start: calc(var(--spacing) * 0);
}
.ms-1 {
margin-inline-start: calc(var(--spacing) * 1);
}
.ms-2 {
margin-inline-start: calc(var(--spacing) * 2);
}
.me-1 {
margin-inline-end: calc(var(--spacing) * 1);
}
.\!mt-0 {
margin-top: calc(var(--spacing) * 0) !important;
}
.-mt-2 {
margin-top: calc(var(--spacing) * -2);
}
.-mt-3 {
margin-top: calc(var(--spacing) * -3);
}
.-mt-6 {
margin-top: calc(var(--spacing) * -6);
}
.mt-0 {
margin-top: calc(var(--spacing) * 0);
}
.mt-0\.5 {
margin-top: calc(var(--spacing) * 0.5);
}
.mt-1 {
margin-top: calc(var(--spacing) * 1);
}
.mt-1\.5 {
margin-top: calc(var(--spacing) * 1.5);
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mt-2\.5 {
margin-top: calc(var(--spacing) * 2.5);
}
.mt-3 {
margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
margin-top: calc(var(--spacing) * 5);
}
.mt-6 {
margin-top: calc(var(--spacing) * 6);
}
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mt-10 {
margin-top: calc(var(--spacing) * 10);
}
.mt-12 {
margin-top: calc(var(--spacing) * 12);
}
.mt-\[2px\] {
margin-top: 2px;
}
.mt-\[15px\] {
margin-top: 15px;
}
.mt-auto {
margin-top: auto;
}
.\!mr-5 {
margin-right: calc(var(--spacing) * 5) !important;
}
.mr-0 {
margin-right: calc(var(--spacing) * 0);
}
.mr-1 {
margin-right: calc(var(--spacing) * 1);
}
.mr-1\.5 {
margin-right: calc(var(--spacing) * 1.5);
}
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
.mr-3 {
margin-right: calc(var(--spacing) * 3);
}
.mr-4 {
margin-right: calc(var(--spacing) * 4);
}
.mr-5 {
margin-right: calc(var(--spacing) * 5);
}
.mr-6 {
margin-right: calc(var(--spacing) * 6);
}
.mr-\[3px\]\! {
margin-right: 3px !important;
}
.mr-\[5\%\] {
margin-right: 5%;
}
.mr-auto {
margin-right: auto;
}
.\!mb-3 {
margin-bottom: calc(var(--spacing) * 3) !important;
}
.mb-0 {
margin-bottom: calc(var(--spacing) * 0);
}
.mb-1 {
margin-bottom: calc(var(--spacing) * 1);
}
.mb-1\.5 {
margin-bottom: calc(var(--spacing) * 1.5);
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
.mb-2\.5 {
margin-bottom: calc(var(--spacing) * 2.5);
}
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-5 {
margin-bottom: calc(var(--spacing) * 5);
}
.mb-6 {
margin-bottom: calc(var(--spacing) * 6);
}
.mb-7 {
margin-bottom: calc(var(--spacing) * 7);
}
.mb-8 {
margin-bottom: calc(var(--spacing) * 8);
}
.mb-10 {
margin-bottom: calc(var(--spacing) * 10);
}
.mb-\[15px\] {
margin-bottom: 15px;
}
.mb-\[25px\] {
margin-bottom: 25px;
}
.mb-\[30px\] {
margin-bottom: 30px;
}
.ml-0 {
margin-left: calc(var(--spacing) * 0);
}
.ml-1 {
margin-left: calc(var(--spacing) * 1);
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-4 {
margin-left: calc(var(--spacing) * 4);
}
.ml-10 {
margin-left: calc(var(--spacing) * 10);
}
.ml-\[6px\] {
margin-left: 6px;
}
.ml-auto {
margin-left: auto;
}
.box-border {
box-sizing: border-box;
}
.box-content {
box-sizing: content-box;
}
.snap {
scroll-snap-type: x var(--tw-scroll-snap-strictness);
--tw-scroll-snap-strictness: mandatory;
scroll-behavior: smooth;
&>* {
scroll-snap-align: start;
}
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.btn {
--btn-stroke: #0000;
--btn-bg: color-mix(in srgb, oklch(46% 0.2 265) 10%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000);
}
--btn-hover-bg: color-mix(in srgb, oklch(46% 0.2 265) 20%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000);
}
--btn-active-bg: color-mix(in srgb, oklch(46% 0.2 265) 30%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000);
}
--btn-color: var(--color-fg);
display: inline-flex;
justify-content: center;
align-items: center;
gap: calc(var(--spacing) * 1.5);
padding-block: calc(var(--spacing) * 2);
padding-inline: calc(var(--spacing) * 4);
border-radius: var(--radius-lg);
border-width: 2px;
border-color: var(--btn-stroke);
background-color: var(--btn-bg);
color: var(--btn-color);
font-weight: 500;
user-select: none;
vertical-align: middle;
transition-property: color, background-color, border-color, outline-color;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
&:hover {
border-color: var(--btn-hover-stroke, var(--btn-stroke));
background-color: var(--btn-hover-bg, var(--btn-bg));
color: var(--btn-hover-color, var(--btn-color));
text-decoration: none;
}
&:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) {
border-color: var(--btn-active-stroke, var(--btn-stroke));
background-color: var(--btn-active-bg, var(--btn-bg));
color: var(--btn-active-color, var(--btn-color));
}
&:is(:disabled, [aria-disabled="true"]) {
border-color: var(--btn-disabled-stroke, var(--color-gray-200));
background-color: var(--btn-disabled-bg, var(--color-gray-50));
color: var(--btn-disabled-color, var(--color-gray-500));
}
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.\!block {
display: block !important;
}
.\!flex {
display: flex !important;
}
.\!hidden {
display: none !important;
}
.block {
display: block;
}
.contents {
display: contents;
}
.flex {
display: flex;
}
.flex\! {
display: flex !important;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.\!size-10 {
width: calc(var(--spacing) * 10) !important;
height: calc(var(--spacing) * 10) !important;
}
.size-2\! {
width: calc(var(--spacing) * 2) !important;
height: calc(var(--spacing) * 2) !important;
}
.size-10\! {
width: calc(var(--spacing) * 10) !important;
height: calc(var(--spacing) * 10) !important;
}
.h-1 {
height: calc(var(--spacing) * 1);
}
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
.h-5 {
height: calc(var(--spacing) * 5);
}
.h-5\/6 {
height: calc(5/6 * 100%);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-7 {
height: calc(var(--spacing) * 7);
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.h-14 {
height: calc(var(--spacing) * 14);
}
.h-16 {
height: calc(var(--spacing) * 16);
}
.h-32 {
height: calc(var(--spacing) * 32);
}
.h-90 {
height: calc(var(--spacing) * 90);
}
.h-96 {
height: calc(var(--spacing) * 96);
}
.h-100 {
height: calc(var(--spacing) * 100);
}
.h-\[30px\] {
height: 30px;
}
.h-\[44px\] {
height: 44px;
}
.h-\[85\%\] {
height: 85%;
}
.h-\[120px\] {
height: 120px;
}
.h-\[var\(--ambrands-img-height\)\] {
height: var(--ambrands-img-height);
}
.h-\[var\(--amshopby-category-slide-size\)\] {
height: var(--amshopby-category-slide-size);
}
.h-am-latter {
height: var(--height-am-latter);
}
.h-am-popup-content {
height: var(--height-am-popup-content);
}
.h-auto {
height: auto;
}
.h-carousel-product-item {
height: var(--height-carousel-product-item);
}
.h-fit {
height: fit-content;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.h-screen {
height: 100vh;
}
.max-h-\[70vh\] {
max-height: 70vh;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.max-h-\[85vh\] {
max-height: 85vh;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
.max-h-full {
max-height: 100%;
}
.min-h-8 {
min-height: calc(var(--spacing) * 8);
}
.min-h-10 {
min-height: calc(var(--spacing) * 10);
}
.min-h-\[22px\] {
min-height: 22px;
}
.min-h-\[40px\] {
min-height: 40px;
}
.\!w-\[auto\] {
width: auto !important;
}
.\!w-full {
width: 100% !important;
}
.w-0 {
width: calc(var(--spacing) * 0);
}
.w-1\/2 {
width: calc(1/2 * 100%);
}
.w-1\/3 {
width: calc(1/3 * 100%);
}
.w-1\/4 {
width: calc(1/4 * 100%);
}
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-4\/12 {
width: calc(4/12 * 100%);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-7 {
width: calc(var(--spacing) * 7);
}
.w-7\/12 {
width: calc(7/12 * 100%);
}
.w-8 {
width: calc(var(--spacing) * 8);
}
.w-9 {
width: calc(var(--spacing) * 9);
}
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-14 {
width: calc(var(--spacing) * 14);
}
.w-16 {
width: calc(var(--spacing) * 16);
}
.w-32 {
width: calc(var(--spacing) * 32);
}
.w-40 {
width: calc(var(--spacing) * 40);
}
.w-50 {
width: calc(var(--spacing) * 50);
}
.w-64 {
width: calc(var(--spacing) * 64);
}
.w-70 {
width: calc(var(--spacing) * 70);
}
.w-75 {
width: calc(var(--spacing) * 75);
}
.w-80 {
width: calc(var(--spacing) * 80);
}
.w-100 {
width: calc(var(--spacing) * 100);
}
.w-110 {
width: calc(var(--spacing) * 110);
}
.w-\[19px\]\! {
width: 19px !important;
}
.w-\[30px\] {
width: 30px;
}
.w-\[40\%\] {
width: 40%;
}
.w-\[44px\] {
width: 44px;
}
.w-\[68px\] {
width: 68px;
}
.w-\[90\%\] {
width: 90%;
}
.w-\[120px\] {
width: 120px;
}
.w-\[138px\] {
width: 138px;
}
.w-\[165px\] {
width: 165px;
}
.w-\[200px\] {
width: 200px;
}
.w-\[450px\] {
width: 450px;
}
.w-\[calc\(50\%-5px\)\] {
width: calc(50% - 5px);
}
.w-\[calc\(100\%-5rem\)\] {
width: calc(100% - 5rem);
}
.w-\[var\(--ambrands-slider-max-width\)\] {
width: var(--ambrands-slider-max-width);
}
.w-\[var\(--amshopby-category-slide-size\)\] {
width: var(--amshopby-category-slide-size);
}
.w-am-latter {
width: var(--width-am-latter);
}
.w-am-popup-content {
width: var(--width-am-popup-content);
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.w-max {
width: max-content;
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-3xl {
max-width: var(--container-3xl);
}
.max-w-5xl {
max-width: var(--container-5xl);
}
.max-w-6xl {
max-width: var(--container-6xl);
}
.max-w-7xl {
max-width: var(--container-7xl);
}
.max-w-\[30\%\] {
max-width: 30%;
}
.max-w-\[90\%\] {
max-width: 90%;
}
.max-w-\[100\%\] {
max-width: 100%;
}
.max-w-\[440px\] {
max-width: 440px;
}
.max-w-\[450px\] {
max-width: 450px;
}
.max-w-\[500px\] {
max-width: 500px;
}
.max-w-\[620px\] {
max-width: 620px;
}
.max-w-\[1030px\] {
max-width: 1030px;
}
.max-w-\[1320px\] {
max-width: 1320px;
}
.max-w-\[calc\(100vw-2rem\)\] {
max-width: calc(100vw - 2rem);
}
.max-w-\[var\(--ambrands-img-width\)\] {
max-width: var(--ambrands-img-width);
}
.max-w-\[var\(--amshopby-category-slide-size\)\] {
max-width: var(--amshopby-category-slide-size);
}
.max-w-full {
max-width: 100%;
}
.max-w-md {
max-width: var(--container-md);
}
.max-w-none {
max-width: none;
}
.\!min-w-\[inherit\] {
min-width: inherit !important;
}
.min-w-0 {
min-width: calc(var(--spacing) * 0);
}
.min-w-8 {
min-width: calc(var(--spacing) * 8);
}
.min-w-10 {
min-width: calc(var(--spacing) * 10);
}
.min-w-44 {
min-width: calc(var(--spacing) * 44);
}
.min-w-52 {
min-width: calc(var(--spacing) * 52);
}
.min-w-\[40px\] {
min-width: 40px;
}
.min-w-\[140px\] {
min-width: 140px;
}
.min-w-\[180px\] {
min-width: 180px;
}
.min-w-full {
min-width: 100%;
}
.flex-1 {
flex: 1;
}
.flex-\[0_0_25\%\] {
flex: 0 0 25%;
}
.flex-\[0_0_32\%\] {
flex: 0 0 32%;
}
.flex-none {
flex: none;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.basis-auto {
flex-basis: auto;
}
.basis-full {
flex-basis: 100%;
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-1\/4 {
--tw-translate-x: calc(calc(1/4 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-full {
--tw-translate-x: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-0 {
--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-full {
--tw-translate-x: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.\!-translate-y-1\/2 {
--tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;
translate: var(--tw-translate-x) var(--tw-translate-y) !important;
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2\! {
--tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;
translate: var(--tw-translate-x) var(--tw-translate-y) !important;
}
.-translate-y-2 {
--tw-translate-y: calc(var(--spacing) * -2);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-8 {
--tw-translate-y: calc(var(--spacing) * -8);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-full {
--tw-translate-y: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-0 {
--tw-translate-y: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-1\/4 {
--tw-translate-y: calc(1/4 * 100%);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-2 {
--tw-translate-y: calc(var(--spacing) * 2);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-\[-50\%\] {
--tw-translate-y: -50%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-full {
--tw-translate-y: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.scale-0 {
--tw-scale-x: 0%;
--tw-scale-y: 0%;
--tw-scale-z: 0%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-80 {
--tw-scale-x: 80%;
--tw-scale-y: 80%;
--tw-scale-z: 80%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-95 {
--tw-scale-x: 95%;
--tw-scale-y: 95%;
--tw-scale-z: 95%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-100 {
--tw-scale-x: 100%;
--tw-scale-y: 100%;
--tw-scale-z: 100%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.-rotate-90 {
rotate: calc(90deg * -1);
}
.rotate-90 {
rotate: 90deg;
}
.rotate-180 {
rotate: 180deg;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.animate-pulse {
animation: var(--animate-pulse);
}
.animate-spin {
animation: var(--animate-spin);
}
.cursor-default {
cursor: default;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-wait {
cursor: wait;
}
.resize {
resize: both;
}
.resize-none {
resize: none;
}
.snap-x {
scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
--tw-scroll-snap-strictness: mandatory;
}
.snap-start {
scroll-snap-align: start;
}
.appearance-none {
appearance: none;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1fr_1fr_\.95fr\] {
grid-template-columns: 1fr 1fr .95fr;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-row {
flex-direction: row;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap {
flex-wrap: wrap;
}
.place-items-center {
place-items: center;
}
.content-center {
align-content: center;
}
.content-start {
align-content: flex-start;
}
.\!items-center {
align-items: center !important;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.items-start {
align-items: flex-start;
}
.items-stretch {
align-items: stretch;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-evenly {
justify-content: space-evenly;
}
.justify-start {
justify-content: flex-start;
}
.gap-0 {
gap: calc(var(--spacing) * 0);
}
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.gap-2\.5 {
gap: calc(var(--spacing) * 2.5);
}
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.gap-6 {
gap: calc(var(--spacing) * 6);
}
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.gap-\[10px\] {
gap: 10px;
}
.gap-\[30px\] {
gap: 30px;
}
.gap-\[38px\] {
gap: 38px;
}
.space-y-1 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-3 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-6 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
}
.gap-x-2 {
column-gap: calc(var(--spacing) * 2);
}
.gap-x-4 {
column-gap: calc(var(--spacing) * 4);
}
.space-x-0\.5 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-x-reverse)));
}
}
.space-x-4 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
}
.gap-y-4 {
row-gap: calc(var(--spacing) * 4);
}
.gap-y-16 {
row-gap: calc(var(--spacing) * 16);
}
.divide-y {
:where(& > :not(:last-child)) {
--tw-divide-y-reverse: 0;
border-bottom-style: var(--tw-border-style);
border-top-style: var(--tw-border-style);
border-top-width: calc(1px * var(--tw-divide-y-reverse));
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}
}
.divide-gray-100 {
:where(& > :not(:last-child)) {
border-color: var(--color-gray-100);
}
}
.self-center {
align-self: center;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
.overscroll-contain {
overscroll-behavior: contain;
}
.overscroll-y-contain {
overscroll-behavior-y: contain;
}
.scroll-smooth {
scroll-behavior: smooth;
}
.btn-gold-gradient {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
}
.btn-gold-border-active {
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
.btn-gold-gradient-static {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
}
.btn-white-gold-border {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-\[4px\] {
border-radius: 4px;
}
.rounded-\[50\%\]\! {
border-radius: 50% !important;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-none {
border-radius: 0;
}
.rounded-sm {
border-radius: var(--radius-sm);
}
.rounded-xl {
border-radius: var(--radius-xl);
}
.rounded-xs {
border-radius: var(--radius-xs);
}
.rounded-t {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.rounded-t-2xl {
border-top-left-radius: var(--radius-2xl);
border-top-right-radius: var(--radius-2xl);
}
.rounded-l {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.rounded-l-full {
border-top-left-radius: calc(infinity * 1px);
border-bottom-left-radius: calc(infinity * 1px);
}
.rounded-tl {
border-top-left-radius: 0.25rem;
}
.rounded-r {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.rounded-tr {
border-top-right-radius: 0.25rem;
}
.rounded-b-lg {
border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
.rounded-br {
border-bottom-right-radius: 0.25rem;
}
.rounded-bl {
border-bottom-left-radius: 0.25rem;
}
.\!border-0 {
border-style: var(--tw-border-style) !important;
border-width: 0px !important;
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border\! {
border-style: var(--tw-border-style) !important;
border-width: 1px !important;
}
.border-0 {
border-style: var(--tw-border-style);
border-width: 0px;
}
.border-1 {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-2 {
border-style: var(--tw-border-style);
border-width: 2px;
}
.border-4 {
border-style: var(--tw-border-style);
border-width: 4px;
}
.border-\[0\.5px\] {
border-style: var(--tw-border-style);
border-width: 0.5px;
}
.border-\[0\.7px\] {
border-style: var(--tw-border-style);
border-width: 0.7px;
}
.border-t {
border-top-style: var(--tw-border-style);
border-top-width: 1px;
}
.border-b {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-b-2 {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
}
.border-l {
border-left-style: var(--tw-border-style);
border-left-width: 1px;
}
.border-none {
--tw-border-style: none;
border-style: none;
}
.border-solid\! {
--tw-border-style: solid !important;
border-style: solid !important;
}
.border-\[\#5c5c5c\] {
border-color: #5c5c5c;
}
.border-\[\#999\]\! {
border-color: #999 !important;
}
.border-\[\#aaa\] {
border-color: #aaa;
}
.border-\[\#f8efce\] {
border-color: #f8efce;
}
.border-\[\#f8efce\]\/30 {
border-color: color-mix(in oklab, #f8efce 30%, transparent);
}
.border-black {
border-color: var(--color-black);
}
.border-blue-400 {
border-color: var(--color-blue-400);
}
.border-blue-500 {
border-color: var(--color-blue-500);
}
.border-blue-900 {
border-color: var(--color-blue-900);
}
.border-container {
border-color: var(--color-container);
}
.border-container-darker {
border-color: var(--color-container-darker);
}
.border-container-lighter {
border-color: var(--color-container-lighter);
}
.border-current {
border-color: currentcolor;
}
.border-gray-100 {
border-color: var(--color-gray-100);
}
.border-gray-200 {
border-color: var(--color-gray-200);
}
.border-gray-300 {
border-color: var(--color-gray-300);
}
.border-gray-400 {
border-color: var(--color-gray-400);
}
.border-gray-500 {
border-color: var(--color-gray-500);
}
.border-gray-600 {
border-color: var(--color-gray-600);
}
.border-red-500 {
border-color: var(--color-red-500);
}
.border-red-600 {
border-color: var(--color-red-600);
}
.border-transparent {
border-color: transparent;
}
.border-t-black {
border-top-color: var(--color-black);
}
.\!bg-black {
&[class*="bg-opacity-"] {
background-color: #000 !important;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 ) !important;
}
}
}
.\!bg-black {
background-color: var(--color-black) !important;
}
.\!bg-sky-700 {
background-color: var(--color-sky-700) !important;
}
.bg-\[\#07182a\] {
background-color: #07182a;
}
.bg-\[\#f0f0f0\] {
background-color: #f0f0f0;
}
.bg-\[\#f4f2f2\] {
background-color: #f4f2f2;
}
.bg-\[\#f8efce\] {
background-color: #f8efce;
}
.bg-\[var\(--ambrands-bg-color\)\] {
background-color: var(--ambrands-bg-color);
}
.bg-bg-footer {
background-color: black;
}
.bg-black {
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
}
.bg-black {
background-color: var(--color-black);
}
.bg-black\/25 {
background-color: color-mix(in srgb, #000 25%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
}
}
.bg-black\/40 {
background-color: color-mix(in srgb, #000 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
}
}
.bg-black\/50 {
background-color: color-mix(in srgb, #000 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
}
}
.bg-black\/60 {
background-color: color-mix(in srgb, #000 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
}
}
.bg-black\/70 {
background-color: color-mix(in srgb, #000 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
}
}
.bg-black\/100 {
background-color: var(--color-black);
}
.bg-blue-50 {
background-color: var(--color-blue-50);
}
.bg-blue-100 {
background-color: var(--color-blue-100);
}
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-container-darker {
background-color: var(--color-container-darker);
}
.bg-container-lighter {
background-color: var(--color-container-lighter);
}
.bg-gray-50 {
background-color: var(--color-gray-50);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
.bg-red-100 {
background-color: var(--color-red-100);
}
.bg-red-500 {
background-color: var(--color-red-500);
}
.bg-sky-700\! {
background-color: var(--color-sky-700) !important;
}
.bg-stone-300\! {
background-color: var(--color-stone-300) !important;
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
}
.bg-white {
background-color: var(--color-white);
}
.bg-white\/70 {
background-color: color-mix(in srgb, #fff 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
}
}
.bg-white\/80 {
background-color: color-mix(in srgb, #fff 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
}
}
.bg-white\/90 {
background-color: color-mix(in srgb, #fff 90%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
}
}
.bg-yellow-300 {
background-color: var(--color-yellow-300);
}
.\!bg-none {
background-image: none !important;
}
.bg-cover {
background-size: cover;
}
.bg-\[-8px_-8px\] {
background-position: -8px -8px;
}
.bg-\[-55px_-8px\] {
background-position: -55px -8px;
}
.bg-\[-100px_-8px\] {
background-position: -100px -8px;
}
.bg-\[-144px_-8px\] {
background-position: -144px -8px;
}
.bg-\[-234px_-8px\] {
background-position: -234px -8px;
}
.bg-center {
background-position: center;
}
.bg-no-repeat {
background-repeat: no-repeat;
}
.fill-current {
fill: currentcolor;
}
.stroke-current {
stroke: currentcolor;
}
.stroke-2 {
stroke-width: 2;
}
.object-contain {
object-fit: contain;
}
.object-cover {
object-fit: cover;
}
.\!p-0 {
padding: calc(var(--spacing) * 0) !important;
}
.p-0 {
padding: calc(var(--spacing) * 0);
}
.p-0\! {
padding: calc(var(--spacing) * 0) !important;
}
.p-0\.5 {
padding: calc(var(--spacing) * 0.5);
}
.p-0\.5\! {
padding: calc(var(--spacing) * 0.5) !important;
}
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-1\.5 {
padding: calc(var(--spacing) * 1.5);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-2\.5 {
padding: calc(var(--spacing) * 2.5);
}
.p-3 {
padding: calc(var(--spacing) * 3);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
.p-5 {
padding: calc(var(--spacing) * 5);
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
.p-8 {
padding: calc(var(--spacing) * 8);
}
.p-\[4px\] {
padding: 4px;
}
.px-0 {
padding-inline: calc(var(--spacing) * 0);
}
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-1\.5 {
padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5);
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.px-16 {
padding-inline: calc(var(--spacing) * 16);
}
.px-\[10px\] {
padding-inline: 10px;
}
.px-\[15px\] {
padding-inline: 15px;
}
.px-\[var\(--ambrands-slider-padding\)\] {
padding-inline: var(--ambrands-slider-padding);
}
.py-0 {
padding-block: calc(var(--spacing) * 0);
}
.py-1 {
padding-block: calc(var(--spacing) * 1);
}
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-5 {
padding-block: calc(var(--spacing) * 5);
}
.py-6 {
padding-block: calc(var(--spacing) * 6);
}
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
.py-10 {
padding-block: calc(var(--spacing) * 10);
}
.py-12 {
padding-block: calc(var(--spacing) * 12);
}
.py-16 {
padding-block: calc(var(--spacing) * 16);
}
.py-\[3px\] {
padding-block: 3px;
}
.py-\[5px\] {
padding-block: 5px;
}
.py-\[7px\] {
padding-block: 7px;
}
.py-\[10px\] {
padding-block: 10px;
}
.ps-0 {
padding-inline-start: calc(var(--spacing) * 0);
}
.ps-4 {
padding-inline-start: calc(var(--spacing) * 4);
}
.pe-0 {
padding-inline-end: calc(var(--spacing) * 0);
}
.pe-4 {
padding-inline-end: calc(var(--spacing) * 4);
}
.pt-0 {
padding-top: calc(var(--spacing) * 0);
}
.pt-1 {
padding-top: calc(var(--spacing) * 1);
}
.pt-2 {
padding-top: calc(var(--spacing) * 2);
}
.pt-2\.5 {
padding-top: calc(var(--spacing) * 2.5);
}
.pt-3 {
padding-top: calc(var(--spacing) * 3);
}
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
.pt-5 {
padding-top: calc(var(--spacing) * 5);
}
.pt-6 {
padding-top: calc(var(--spacing) * 6);
}
.pt-8 {
padding-top: calc(var(--spacing) * 8);
}
.pt-10 {
padding-top: calc(var(--spacing) * 10);
}
.pt-20 {
padding-top: calc(var(--spacing) * 20);
}
.pt-\[6px\] {
padding-top: 6px;
}
.pt-full {
padding-top: var(--padding-full);
}
.pr-1 {
padding-right: calc(var(--spacing) * 1);
}
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
.pr-2\.5 {
padding-right: calc(var(--spacing) * 2.5);
}
.pr-4 {
padding-right: calc(var(--spacing) * 4);
}
.pr-8 {
padding-right: calc(var(--spacing) * 8);
}
.pr-10 {
padding-right: calc(var(--spacing) * 10);
}
.pr-\[15px\] {
padding-right: 15px;
}
.pb-0 {
padding-bottom: calc(var(--spacing) * 0);
}
.pb-1 {
padding-bottom: calc(var(--spacing) * 1);
}
.pb-2 {
padding-bottom: calc(var(--spacing) * 2);
}
.pb-2\.5 {
padding-bottom: calc(var(--spacing) * 2.5);
}
.pb-3 {
padding-bottom: calc(var(--spacing) * 3);
}
.pb-3\.5 {
padding-bottom: calc(var(--spacing) * 3.5);
}
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
.pb-5 {
padding-bottom: calc(var(--spacing) * 5);
}
.pb-6 {
padding-bottom: calc(var(--spacing) * 6);
}
.pb-12 {
padding-bottom: calc(var(--spacing) * 12);
}
.pb-15 {
padding-bottom: calc(var(--spacing) * 15);
}
.pb-16 {
padding-bottom: calc(var(--spacing) * 16);
}
.pb-\[3px\] {
padding-bottom: 3px;
}
.pb-\[6px\] {
padding-bottom: 6px;
}
.pb-\[8px\] {
padding-bottom: 8px;
}
.pl-1 {
padding-left: calc(var(--spacing) * 1);
}
.pl-2 {
padding-left: calc(var(--spacing) * 2);
}
.pl-2\.5 {
padding-left: calc(var(--spacing) * 2.5);
}
.pl-3 {
padding-left: calc(var(--spacing) * 3);
}
.pl-9 {
padding-left: calc(var(--spacing) * 9);
}
.text-center {
text-align: center;
}
.text-end {
text-align: end;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-start {
text-align: start;
}
.indent-\[-9999px\] {
text-indent: -9999px;
}
.align-bottom {
vertical-align: bottom;
}
.align-middle {
vertical-align: middle;
}
.align-top {
vertical-align: top;
}
.\!font-title {
font-family: var(--font-baskerville) !important;
font-weight: 400 !important;
}
.font-bold {
font-family: var(--font-vietnam);
font-weight: 600;
}
.font-light {
font-family: var(--font-vietnam);
font-weight: 300;
}
.font-pera {
font-family: var(--font-vietnam);
font-weight: 400;
}
.font-regular {
font-family: var(--font-vietnam-regular);
font-weight: 400;
}
.font-semi {
font-family: var(--font-vietnam);
font-weight: 500;
}
.font-title {
font-family: var(--font-baskerville);
font-weight: 400;
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-xs\! {
font-size: var(--text-xs) !important;
line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
}
.\!text-\[12px\] {
font-size: 12px !important;
}
.text-\[10px\] {
font-size: 10px;
}
.text-\[11px\] {
font-size: 11px;
}
.text-\[12px\] {
font-size: 12px;
}
.text-\[13px\] {
font-size: 13px;
}
.text-\[14px\] {
font-size: 14px;
}
.text-\[15px\] {
font-size: 15px;
}
.text-\[16px\] {
font-size: 16px;
}
.text-\[length\:var\(--ambrands-text-size\)\] {
font-size: var(--ambrands-text-size);
}
.leading-5 {
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
}
.leading-6 {
--tw-leading: calc(var(--spacing) * 6);
line-height: calc(var(--spacing) * 6);
}
.leading-7 {
--tw-leading: calc(var(--spacing) * 7);
line-height: calc(var(--spacing) * 7);
}
.leading-8 {
--tw-leading: calc(var(--spacing) * 8);
line-height: calc(var(--spacing) * 8);
}
.leading-10 {
--tw-leading: calc(var(--spacing) * 10);
line-height: calc(var(--spacing) * 10);
}
.leading-\[1\.5\] {
--tw-leading: 1.5;
line-height: 1.5;
}
.leading-\[15\.18px\] {
--tw-leading: 15.18px;
line-height: 15.18px;
}
.leading-\[17\.71px\] {
--tw-leading: 17.71px;
line-height: 17.71px;
}
.leading-\[20\.45px\] {
--tw-leading: 20.45px;
line-height: 20.45px;
}
.leading-\[20px\] {
--tw-leading: 20px;
line-height: 20px;
}
.leading-\[27\.03px\] {
--tw-leading: 27.03px;
line-height: 27.03px;
}
.leading-\[28\.2px\] {
--tw-leading: 28.2px;
line-height: 28.2px;
}
.leading-\[31\.03px\] {
--tw-leading: 31.03px;
line-height: 31.03px;
}
.leading-\[var\(--ambrands-img-width\)\] {
--tw-leading: var(--ambrands-img-width);
line-height: var(--ambrands-img-width);
}
.leading-none {
--tw-leading: 1;
line-height: 1;
}
.leading-normal {
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
}
.leading-snug {
--tw-leading: var(--leading-snug);
line-height: var(--leading-snug);
}
.leading-tight {
--tw-leading: var(--leading-tight);
line-height: var(--leading-tight);
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.font-light {
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-normal {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-\[0\.5px\] {
--tw-tracking: 0.5px;
letter-spacing: 0.5px;
}
.tracking-\[0\.75px\] {
--tw-tracking: 0.75px;
letter-spacing: 0.75px;
}
.tracking-\[1px\] {
--tw-tracking: 1px;
letter-spacing: 1px;
}
.tracking-normal {
--tw-tracking: var(--tracking-normal);
letter-spacing: var(--tracking-normal);
}
.tracking-wide {
--tw-tracking: var(--tracking-wide);
letter-spacing: var(--tracking-wide);
}
.tracking-wider {
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
}
.tracking-widest {
--tw-tracking: var(--tracking-widest);
letter-spacing: var(--tracking-widest);
}
.break-words {
overflow-wrap: break-word;
}
.hyphens-auto {
-webkit-hyphens: auto;
hyphens: auto;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre-line {
white-space: pre-line;
}
.btn-gold-gradient-active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
.\!text-red-500 {
color: var(--color-red-500) !important;
}
.\!text-red-600 {
color: var(--color-red-600) !important;
}
.\!text-white {
color: var(--color-white) !important;
}
.text-\[\#666\] {
color: #666;
}
.text-\[\#212529\] {
color: #212529;
}
.text-\[color\:var\(--ambrands-text-color\)\] {
color: var(--ambrands-text-color);
}
.text-amsb_graystarts {
color: var(--color-amsb_graystarts);
}
.text-amsb_yellowstars {
color: var(--color-amsb_yellowstars);
}
.text-amscrollcounter-secondary-color {
color: var(--color-amscrollcounter-secondary-color);
}
.text-black {
color: var(--color-black);
}
.text-blue-400 {
color: var(--color-blue-400);
}
.text-blue-500 {
color: var(--color-blue-500);
}
.text-blue-600 {
color: var(--color-blue-600);
}
.text-blue-700 {
color: var(--color-blue-700);
}
.text-blue-900 {
color: var(--color-blue-900);
}
.text-cornflower-100 {
color: var(--color-cornflower-100);
}
.text-gray-300 {
color: var(--color-gray-300);
}
.text-gray-400 {
color: var(--color-gray-400);
}
.text-gray-500 {
color: var(--color-gray-500);
}
.text-gray-600 {
color: var(--color-gray-600);
}
.text-gray-700 {
color: var(--color-gray-700);
}
.text-gray-800 {
color: var(--color-gray-800);
}
.text-gray-900 {
color: var(--color-gray-900);
}
.text-green-400 {
color: var(--color-green-400);
}
.text-green-600 {
color: var(--color-green-600);
}
.text-green-700 {
color: var(--color-green-700);
}
.text-primary {
color: var(--color-primary);
}
.text-red-500 {
color: var(--color-red-500);
}
.text-red-600 {
color: var(--color-red-600);
}
.text-red-700 {
color: var(--color-red-700);
}
.text-red-800 {
color: var(--color-red-800);
}
.text-secondary {
color: var(--color-secondary);
}
.text-secondary-darker {
color: var(--color-secondary-darker);
}
.text-slate-600 {
color: var(--color-slate-600);
}
.text-transparent {
color: transparent;
}
.text-white {
color: var(--color-white);
}
.text-white\! {
color: var(--color-white) !important;
}
.text-white\/50 {
color: color-mix(in srgb, #fff 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-white) 50%, transparent);
}
}
.capitalize {
text-transform: capitalize;
}
.lowercase {
text-transform: lowercase;
}
.uppercase {
text-transform: uppercase;
}
.not-italic {
font-style: normal;
}
.line-through {
text-decoration-line: line-through;
}
.no-underline {
text-decoration-line: none;
}
.underline {
text-decoration-line: underline;
}
.underline-offset-2 {
text-underline-offset: 2px;
}
.opacity-0 {
opacity: 0%;
}
.opacity-25 {
opacity: 25%;
}
.opacity-30 {
opacity: 30%;
}
.opacity-50 {
opacity: 50%;
}
.opacity-65 {
opacity: 65%;
}
.opacity-75 {
opacity: 75%;
}
.opacity-100 {
opacity: 100%;
}
.mix-blend-darken {
mix-blend-mode: darken;
}
.\!shadow-none {
--tw-shadow: 0 0 #0000 !important;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.shadow {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-none {
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xs {
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline-hidden {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.outline-0 {
outline-style: var(--tw-outline-style);
outline-width: 0px;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(var(--blur-sm));
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[left\,top\] {
transition-property: left,top;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[right\,top\] {
transition-property: right,top;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.delay-600 {
transition-delay: 600ms;
}
.duration-75 {
--tw-duration: 75ms;
transition-duration: 75ms;
}
.duration-100 {
--tw-duration: 100ms;
transition-duration: 100ms;
}
.duration-150 {
--tw-duration: 150ms;
transition-duration: 150ms;
}
.duration-200 {
--tw-duration: 200ms;
transition-duration: 200ms;
}
.duration-300 {
--tw-duration: 300ms;
transition-duration: 300ms;
}
.duration-500 {
--tw-duration: 500ms;
transition-duration: 500ms;
}
.duration-600 {
--tw-duration: 600ms;
transition-duration: 600ms;
}
.ease-in {
--tw-ease: var(--ease-in);
transition-timing-function: var(--ease-in);
}
.ease-in-out {
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
}
.ease-out {
--tw-ease: var(--ease-out);
transition-timing-function: var(--ease-out);
}
.btn-primary {
--btn-stroke: #0000;
--btn-bg: var(--color-primary);
--btn-color: var(--color-on-primary);
--btn-hover-stroke: #0000;
--btn-hover-bg: var(--color-primary-lighter);
--btn-hover-color: var(--color-on-primary);
--btn-active-stroke: #0000;
--btn-active-bg: var(--color-primary);
--btn-active-color: var(--color-on-primary);
}
.btn-secondary {
--btn-stroke: var(--color-primary-lighter);
--btn-bg: var(--color-on-primary);
--btn-color: var(--color-primary-darker);
--btn-hover-stroke: var(--color-primary-lighter);
--btn-hover-bg: var(--color-on-primary);
--btn-hover-color: var(--color-primary-lighter);
--btn-active-stroke: #0000;
--btn-active-bg: var(--color-primary);
--btn-active-color: var(--color-on-primary);
}
.outline-none {
--tw-outline-style: none;
outline-style: none;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.\[wire\:model\] {
wire: model;
}
.\[wire\:select\] {
wire: select;
}
.bg-opacity-25 {
--tw-bg-opacity: 25;
}
.bg-opacity-50 {
--tw-bg-opacity: 50;
}
.bg-opacity-70 {
--tw-bg-opacity: 70;
}
.bg-opacity-75 {
--tw-bg-opacity: 75;
}
.bg-opacity-90 {
--tw-bg-opacity: 90;
}
.bg-opacity-100 {
--tw-bg-opacity: 100;
}
.group-hover\:scale-105 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
.group-hover\:border-gray-300 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
border-color: var(--color-gray-300);
}
}
}
.group-hover\:underline {
&:is(:where(.group):hover *) {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
.group-hover\:opacity-100 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
opacity: 100%;
}
}
}
.group-hover\:shadow-amsb-hover {
&:is(:where(.group):hover *) {
@media (hover: hover) {
--tw-shadow: 3px 3px 4px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.3));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
.after\:ml-0\.5 {
&::after {
content: var(--tw-content);
margin-left: calc(var(--spacing) * 0.5);
}
}
.after\:content-\[\'\:\'\] {
&::after {
--tw-content: ':';
content: var(--tw-content);
}
}
.last\:mr-0 {
&:last-child {
margin-right: calc(var(--spacing) * 0);
}
}
.last\:mb-0 {
&:last-child {
margin-bottom: calc(var(--spacing) * 0);
}
}
.open\:flex {
&:is([open], :popover-open, :open) {
display: flex;
}
}
.hover\:border-blue-400 {
&:hover {
@media (hover: hover) {
border-color: var(--color-blue-400);
}
}
}
.hover\:border-gray-600 {
&:hover {
@media (hover: hover) {
border-color: var(--color-gray-600);
}
}
}
.hover\:border-primary {
&:hover {
@media (hover: hover) {
border-color: var(--color-primary);
}
}
}
.hover\:border-sky-600 {
&:hover {
@media (hover: hover) {
border-color: var(--color-sky-600);
}
}
}
.hover\:bg-black {
&:hover {
@media (hover: hover) {
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
}
}
}
.hover\:bg-black {
&:hover {
@media (hover: hover) {
background-color: var(--color-black);
}
}
}
.hover\:bg-gray-50 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-50);
}
}
}
.hover\:bg-gray-100 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-100);
}
}
}
.hover\:bg-gray-200 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-200);
}
}
}
.hover\:bg-gray-800 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-800);
}
}
}
.hover\:bg-gray-900 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-900);
}
}
}
.hover\:bg-sky-700\! {
&:hover {
@media (hover: hover) {
background-color: var(--color-sky-700) !important;
}
}
}
.hover\:bg-white {
&:hover {
@media (hover: hover) {
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
}
}
}
.hover\:bg-white {
&:hover {
@media (hover: hover) {
background-color: var(--color-white);
}
}
}
.hover\:text-black {
&:hover {
@media (hover: hover) {
color: var(--color-black);
}
}
}
.hover\:text-blue-400 {
&:hover {
@media (hover: hover) {
color: var(--color-blue-400);
}
}
}
.hover\:text-blue-600 {
&:hover {
@media (hover: hover) {
color: var(--color-blue-600);
}
}
}
.hover\:text-blue-800 {
&:hover {
@media (hover: hover) {
color: var(--color-blue-800);
}
}
}
.hover\:text-gray-300 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-300);
}
}
}
.hover\:text-gray-600 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-600);
}
}
}
.hover\:text-gray-700 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-700);
}
}
}
.hover\:text-primary-darker {
&:hover {
@media (hover: hover) {
color: var(--color-primary-darker);
}
}
}
.hover\:text-red-600 {
&:hover {
@media (hover: hover) {
color: var(--color-red-600);
}
}
}
.hover\:text-secondary-darker {
&:hover {
@media (hover: hover) {
color: var(--color-secondary-darker);
}
}
}
.hover\:text-white {
&:hover {
@media (hover: hover) {
color: var(--color-white);
}
}
}
.hover\:text-yellow-500 {
&:hover {
@media (hover: hover) {
color: var(--color-yellow-500);
}
}
}
.hover\:no-underline {
&:hover {
@media (hover: hover) {
text-decoration-line: none;
}
}
}
.hover\:underline {
&:hover {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
.hover\:opacity-80 {
&:hover {
@media (hover: hover) {
opacity: 80%;
}
}
}
.hover\:shadow-md {
&:hover {
@media (hover: hover) {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
.hover\:shadow-sm {
&:hover {
@media (hover: hover) {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
.focus\:not-sr-only {
&:focus {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
}
.focus\:absolute {
&:focus {
position: absolute;
}
}
.focus\:z-30 {
&:focus {
z-index: 30;
}
}
.focus\:border-gray-500 {
&:focus {
border-color: var(--color-gray-500);
}
}
.focus\:border-transparent {
&:focus {
border-color: transparent;
}
}
.focus\:bg-white {
&:focus {
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
}
}
.focus\:bg-white {
&:focus {
background-color: var(--color-white);
}
}
.focus\:pl-8 {
&:focus {
padding-left: calc(var(--spacing) * 8);
}
}
.focus\:opacity-100 {
&:focus {
opacity: 100%;
}
}
.focus\:ring-1 {
&:focus {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
.focus\:ring-black {
&:focus {
--tw-ring-color: var(--color-black);
}
}
.focus\:outline-hidden {
&:focus {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
}
.focus\:outline-black {
&:focus {
outline-color: var(--color-black);
}
}
.focus\:outline-none {
&:focus {
--tw-outline-style: none;
outline-style: none;
}
}
.disabled\:cursor-not-allowed {
&:disabled {
cursor: not-allowed;
}
}
.disabled\:opacity-50 {
&:disabled {
opacity: 50%;
}
}
.disabled\:opacity-60 {
&:disabled {
opacity: 60%;
}
}
.disabled\:opacity-75 {
&:disabled {
opacity: 75%;
}
}
.has-\[\#current-refinements_ul\:empty\]\:hidden {
&:has(*:is(#current-refinements ul:empty)) {
display: none;
}
}
.data-\[active\]\:border-primary {
&[data-active] {
border-color: var(--color-primary);
}
}
.max-\[1033px\]\:flex {
@media (width < 1033px) {
display: flex;
}
}
.max-\[1032px\]\:hidden {
@media (width < 1032px) {
display: none;
}
}
.group-\[\.bg-tab-black\]\:max-\[1032px\]\:invert {
&:is(:where(.group):is(.bg-tab-black) *) {
@media (width < 1032px) {
--tw-invert: invert(100%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
}
}
.max-md\:mt-5 {
@media (width < 48rem) {
margin-top: calc(var(--spacing) * 5);
}
}
.max-md\:mr-2\.5 {
@media (width < 48rem) {
margin-right: calc(var(--spacing) * 2.5);
}
}
.max-md\:mb-0 {
@media (width < 48rem) {
margin-bottom: calc(var(--spacing) * 0);
}
}
.max-md\:mb-5 {
@media (width < 48rem) {
margin-bottom: calc(var(--spacing) * 5);
}
}
.max-md\:h-\[80vh\] {
@media (width < 48rem) {
height: 80vh;
}
}
.max-md\:h-full {
@media (width < 48rem) {
height: 100%;
}
}
.max-md\:translate-y-0 {
@media (width < 48rem) {
--tw-translate-y: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.max-md\:translate-y-full {
@media (width < 48rem) {
--tw-translate-y: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.max-md\:items-end {
@media (width < 48rem) {
align-items: flex-end;
}
}
.max-md\:rounded-none {
@media (width < 48rem) {
border-radius: 0;
}
}
.max-md\:p-0 {
@media (width < 48rem) {
padding: calc(var(--spacing) * 0);
}
}
.max-md\:opacity-0 {
@media (width < 48rem) {
opacity: 0%;
}
}
.max-md\:opacity-100 {
@media (width < 48rem) {
opacity: 100%;
}
}
.max-md\:transition {
@media (width < 48rem) {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}
.max-md\:duration-1000 {
@media (width < 48rem) {
--tw-duration: 1000ms;
transition-duration: 1000ms;
}
}
.min-\[1033px\]\:w-\[300px\] {
@media (width >= 1033px) {
width: 300px;
}
}
.min-\[1445px\]\:max-\[1700px\]\:max-w-\[1360px\] {
@media (width >= 1445px) {
@media (width < 1700px) {
max-width: 1360px;
}
}
}
.min-\[1700px\]\:max-w-\[1580px\] {
@media (width >= 1700px) {
max-width: 1580px;
}
}
.sm\:mb-0 {
@media (width >= 40rem) {
margin-bottom: calc(var(--spacing) * 0);
}
}
.sm\:block {
@media (width >= 40rem) {
display: block;
}
}
.sm\:w-96 {
@media (width >= 40rem) {
width: calc(var(--spacing) * 96);
}
}
.sm\:w-auto {
@media (width >= 40rem) {
width: auto;
}
}
.sm\:max-w-screen-sm {
@media (width >= 40rem) {
max-width: var(--breakpoint-sm);
}
}
.sm\:grid-cols-2 {
@media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sm\:flex-row {
@media (width >= 40rem) {
flex-direction: row;
}
}
.sm\:p-8 {
@media (width >= 40rem) {
padding: calc(var(--spacing) * 8);
}
}
.sm\:pt-16 {
@media (width >= 40rem) {
padding-top: calc(var(--spacing) * 16);
}
}
.md\:absolute {
@media (width >= 48rem) {
position: absolute;
}
}
.md\:fixed {
@media (width >= 48rem) {
position: fixed;
}
}
.md\:relative {
@media (width >= 48rem) {
position: relative;
}
}
.md\:\!-top-3 {
@media (width >= 48rem) {
top: calc(var(--spacing) * -3) !important;
}
}
.md\:top-0 {
@media (width >= 48rem) {
top: calc(var(--spacing) * 0);
}
}
.md\:top-1\/2 {
@media (width >= 48rem) {
top: calc(1/2 * 100%);
}
}
.md\:top-auto {
@media (width >= 48rem) {
top: auto;
}
}
.md\:-right-8 {
@media (width >= 48rem) {
right: calc(var(--spacing) * -8);
}
}
.md\:right-3 {
@media (width >= 48rem) {
right: calc(var(--spacing) * 3);
}
}
.md\:right-5 {
@media (width >= 48rem) {
right: calc(var(--spacing) * 5);
}
}
.md\:right-\[-3\.5rem\] {
@media (width >= 48rem) {
right: -3.5rem;
}
}
.md\:bottom-5 {
@media (width >= 48rem) {
bottom: calc(var(--spacing) * 5);
}
}
.md\:bottom-20 {
@media (width >= 48rem) {
bottom: calc(var(--spacing) * 20);
}
}
.md\:bottom-\[140px\] {
@media (width >= 48rem) {
bottom: 140px;
}
}
.md\:bottom-auto {
@media (width >= 48rem) {
bottom: auto;
}
}
.md\:left-0 {
@media (width >= 48rem) {
left: calc(var(--spacing) * 0);
}
}
.md\:left-1\/2 {
@media (width >= 48rem) {
left: calc(1/2 * 100%);
}
}
.md\:left-full {
@media (width >= 48rem) {
left: 100%;
}
}
.md\:m-0 {
@media (width >= 48rem) {
margin: calc(var(--spacing) * 0);
}
}
.md\:-mt-4 {
@media (width >= 48rem) {
margin-top: calc(var(--spacing) * -4);
}
}
.md\:mt-0 {
@media (width >= 48rem) {
margin-top: calc(var(--spacing) * 0);
}
}
.md\:mt-3 {
@media (width >= 48rem) {
margin-top: calc(var(--spacing) * 3);
}
}
.md\:mt-4 {
@media (width >= 48rem) {
margin-top: calc(var(--spacing) * 4);
}
}
.md\:mr-0 {
@media (width >= 48rem) {
margin-right: calc(var(--spacing) * 0);
}
}
.md\:mr-4 {
@media (width >= 48rem) {
margin-right: calc(var(--spacing) * 4);
}
}
.md\:mr-6 {
@media (width >= 48rem) {
margin-right: calc(var(--spacing) * 6);
}
}
.md\:mb-0 {
@media (width >= 48rem) {
margin-bottom: calc(var(--spacing) * 0);
}
}
.md\:mb-1 {
@media (width >= 48rem) {
margin-bottom: calc(var(--spacing) * 1);
}
}
.md\:mb-4 {
@media (width >= 48rem) {
margin-bottom: calc(var(--spacing) * 4);
}
}
.md\:mb-6 {
@media (width >= 48rem) {
margin-bottom: calc(var(--spacing) * 6);
}
}
.md\:ml-0 {
@media (width >= 48rem) {
margin-left: calc(var(--spacing) * 0);
}
}
.md\:ml-6 {
@media (width >= 48rem) {
margin-left: calc(var(--spacing) * 6);
}
}
.md\:block {
@media (width >= 48rem) {
display: block;
}
}
.md\:flex {
@media (width >= 48rem) {
display: flex;
}
}
.md\:hidden {
@media (width >= 48rem) {
display: none;
}
}
.md\:inline-block {
@media (width >= 48rem) {
display: inline-block;
}
}
.md\:h-6 {
@media (width >= 48rem) {
height: calc(var(--spacing) * 6);
}
}
.md\:h-\[44px\] {
@media (width >= 48rem) {
height: 44px;
}
}
.md\:h-auto {
@media (width >= 48rem) {
height: auto;
}
}
.md\:min-h-\[18px\] {
@media (width >= 48rem) {
min-height: 18px;
}
}
.md\:w-1\/2 {
@media (width >= 48rem) {
width: calc(1/2 * 100%);
}
}
.md\:w-1\/4 {
@media (width >= 48rem) {
width: calc(1/4 * 100%);
}
}
.md\:w-1\/6 {
@media (width >= 48rem) {
width: calc(1/6 * 100%);
}
}
.md\:w-2\/3 {
@media (width >= 48rem) {
width: calc(2/3 * 100%);
}
}
.md\:w-2\/4 {
@media (width >= 48rem) {
width: calc(2/4 * 100%);
}
}
.md\:w-2\/5 {
@media (width >= 48rem) {
width: calc(2/5 * 100%);
}
}
.md\:w-5\/12 {
@media (width >= 48rem) {
width: calc(5/12 * 100%);
}
}
.md\:w-6 {
@media (width >= 48rem) {
width: calc(var(--spacing) * 6);
}
}
.md\:w-7\/12 {
@media (width >= 48rem) {
width: calc(7/12 * 100%);
}
}
.md\:w-96 {
@media (width >= 48rem) {
width: calc(var(--spacing) * 96);
}
}
.md\:w-\[44px\] {
@media (width >= 48rem) {
width: 44px;
}
}
.md\:w-\[300px\] {
@media (width >= 48rem) {
width: 300px;
}
}
.md\:w-\[calc\(100\%-300px\)\] {
@media (width >= 48rem) {
width: calc(100% - 300px);
}
}
.md\:w-auto {
@media (width >= 48rem) {
width: auto;
}
}
.md\:max-w-100-50 {
@media (width >= 48rem) {
max-width: var(--max-width-100-50);
}
}
.md\:max-w-md {
@media (width >= 48rem) {
max-width: var(--container-md);
}
}
.md\:max-w-screen-md {
@media (width >= 48rem) {
max-width: var(--breakpoint-md);
}
}
.md\:max-w-sm {
@media (width >= 48rem) {
max-width: var(--container-sm);
}
}
.md\:max-w-xs {
@media (width >= 48rem) {
max-width: var(--container-xs);
}
}
.md\:\!min-w-\[300px\] {
@media (width >= 48rem) {
min-width: 300px !important;
}
}
.md\:flex-1 {
@media (width >= 48rem) {
flex: 1;
}
}
.md\:-translate-x-1\/2 {
@media (width >= 48rem) {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.md\:-translate-x-1\/3 {
@media (width >= 48rem) {
--tw-translate-x: calc(calc(1/3 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.md\:translate-x-0 {
@media (width >= 48rem) {
--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.md\:translate-x-\[-100\%\] {
@media (width >= 48rem) {
--tw-translate-x: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.md\:-translate-y-1\/2 {
@media (width >= 48rem) {
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.md\:translate-y-0 {
@media (width >= 48rem) {
--tw-translate-y: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.md\:translate-y-1\/4 {
@media (width >= 48rem) {
--tw-translate-y: calc(1/4 * 100%);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.md\:grid-cols-4 {
@media (width >= 48rem) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.md\:flex-col {
@media (width >= 48rem) {
flex-direction: column;
}
}
.md\:flex-col-reverse {
@media (width >= 48rem) {
flex-direction: column-reverse;
}
}
.md\:flex-row {
@media (width >= 48rem) {
flex-direction: row;
}
}
.md\:flex-row-reverse {
@media (width >= 48rem) {
flex-direction: row-reverse;
}
}
.md\:flex-nowrap {
@media (width >= 48rem) {
flex-wrap: nowrap;
}
}
.md\:items-center {
@media (width >= 48rem) {
align-items: center;
}
}
.md\:justify-between {
@media (width >= 48rem) {
justify-content: space-between;
}
}
.md\:justify-center {
@media (width >= 48rem) {
justify-content: center;
}
}
.md\:justify-start {
@media (width >= 48rem) {
justify-content: flex-start;
}
}
.md\:gap-0 {
@media (width >= 48rem) {
gap: calc(var(--spacing) * 0);
}
}
.md\:gap-3 {
@media (width >= 48rem) {
gap: calc(var(--spacing) * 3);
}
}
.md\:gap-\[33px\] {
@media (width >= 48rem) {
gap: 33px;
}
}
.md\:overflow-hidden {
@media (width >= 48rem) {
overflow: hidden;
}
}
.md\:rounded-lg {
@media (width >= 48rem) {
border-radius: var(--radius-lg);
}
}
.md\:rounded-t-2xl {
@media (width >= 48rem) {
border-top-left-radius: var(--radius-2xl);
border-top-right-radius: var(--radius-2xl);
}
}
.md\:rounded-b-none {
@media (width >= 48rem) {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.md\:border {
@media (width >= 48rem) {
border-style: var(--tw-border-style);
border-width: 1px;
}
}
.md\:border-0 {
@media (width >= 48rem) {
border-style: var(--tw-border-style);
border-width: 0px;
}
}
.md\:border-r {
@media (width >= 48rem) {
border-right-style: var(--tw-border-style);
border-right-width: 1px;
}
}
.md\:border-none {
@media (width >= 48rem) {
--tw-border-style: none;
border-style: none;
}
}
.md\:bg-transparent {
@media (width >= 48rem) {
background-color: transparent;
}
}
.md\:p-0 {
@media (width >= 48rem) {
padding: calc(var(--spacing) * 0);
}
}
.md\:px-0 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 0);
}
}
.md\:px-5 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 5);
}
}
.md\:px-8 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 8);
}
}
.md\:py-0 {
@media (width >= 48rem) {
padding-block: calc(var(--spacing) * 0);
}
}
.md\:py-4 {
@media (width >= 48rem) {
padding-block: calc(var(--spacing) * 4);
}
}
.md\:pt-0 {
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 0);
}
}
.md\:pt-1 {
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 1);
}
}
.md\:pt-2 {
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 2);
}
}
.md\:pt-4 {
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 4);
}
}
.md\:pt-12 {
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 12);
}
}
.md\:pt-\[6px\] {
@media (width >= 48rem) {
padding-top: 6px;
}
}
.md\:pr-2 {
@media (width >= 48rem) {
padding-right: calc(var(--spacing) * 2);
}
}
.md\:pr-4 {
@media (width >= 48rem) {
padding-right: calc(var(--spacing) * 4);
}
}
.md\:pb-0 {
@media (width >= 48rem) {
padding-bottom: calc(var(--spacing) * 0);
}
}
.md\:pb-4 {
@media (width >= 48rem) {
padding-bottom: calc(var(--spacing) * 4);
}
}
.md\:pb-12 {
@media (width >= 48rem) {
padding-bottom: calc(var(--spacing) * 12);
}
}
.md\:pb-\[6px\] {
@media (width >= 48rem) {
padding-bottom: 6px;
}
}
.md\:pb-\[8px\] {
@media (width >= 48rem) {
padding-bottom: 8px;
}
}
.md\:pl-3 {
@media (width >= 48rem) {
padding-left: calc(var(--spacing) * 3);
}
}
.md\:pl-4 {
@media (width >= 48rem) {
padding-left: calc(var(--spacing) * 4);
}
}
.md\:pl-6 {
@media (width >= 48rem) {
padding-left: calc(var(--spacing) * 6);
}
}
.md\:text-center {
@media (width >= 48rem) {
text-align: center;
}
}
.md\:text-left {
@media (width >= 48rem) {
text-align: left;
}
}
.md\:text-right {
@media (width >= 48rem) {
text-align: right;
}
}
.md\:font-title {
@media (width >= 48rem) {
font-family: var(--font-baskerville);
font-weight: 400;
}
}
.md\:text-2xl {
@media (width >= 48rem) {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
}
.md\:text-lg {
@media (width >= 48rem) {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
}
.md\:whitespace-nowrap {
@media (width >= 48rem) {
white-space: nowrap;
}
}
.md\:group-hover\:block {
@media (width >= 48rem) {
&:is(:where(.group):hover *) {
@media (hover: hover) {
display: block;
}
}
}
}
.lg\:relative {
@media (width >= 64rem) {
position: relative;
}
}
.lg\:col-span-3 {
@media (width >= 64rem) {
grid-column: span 3 / span 3;
}
}
.lg\:col-span-9 {
@media (width >= 64rem) {
grid-column: span 9 / span 9;
}
}
.lg\:container {
@media (width >= 64rem) {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
}
}
.lg\:container {
@media (width >= 64rem) {
margin-inline: auto;
padding-inline: calc(var(--spacing) * 6);
}
}
.lg\:mt-8 {
@media (width >= 64rem) {
margin-top: calc(var(--spacing) * 8);
}
}
.lg\:mt-\[30px\] {
@media (width >= 64rem) {
margin-top: 30px;
}
}
.lg\:ml-2 {
@media (width >= 64rem) {
margin-left: calc(var(--spacing) * 2);
}
}
.lg\:\!block {
@media (width >= 64rem) {
display: block !important;
}
}
.lg\:\!hidden {
@media (width >= 64rem) {
display: none !important;
}
}
.lg\:block {
@media (width >= 64rem) {
display: block;
}
}
.lg\:block\! {
@media (width >= 64rem) {
display: block !important;
}
}
.lg\:flex {
@media (width >= 64rem) {
display: flex;
}
}
.lg\:grid {
@media (width >= 64rem) {
display: grid;
}
}
.lg\:hidden {
@media (width >= 64rem) {
display: none;
}
}
.lg\:inline {
@media (width >= 64rem) {
display: inline;
}
}
.lg\:h-\[95\%\] {
@media (width >= 64rem) {
height: 95%;
}
}
.lg\:\!w-\[150px\] {
@media (width >= 64rem) {
width: 150px !important;
}
}
.lg\:\!w-\[200px\] {
@media (width >= 64rem) {
width: 200px !important;
}
}
.lg\:w-1\/2 {
@media (width >= 64rem) {
width: calc(1/2 * 100%);
}
}
.lg\:w-1\/3 {
@media (width >= 64rem) {
width: calc(1/3 * 100%);
}
}
.lg\:w-1\/4 {
@media (width >= 64rem) {
width: calc(1/4 * 100%);
}
}
.lg\:w-3\/4 {
@media (width >= 64rem) {
width: calc(3/4 * 100%);
}
}
.lg\:w-10\/12 {
@media (width >= 64rem) {
width: calc(10/12 * 100%);
}
}
.lg\:w-50 {
@media (width >= 64rem) {
width: calc(var(--spacing) * 50);
}
}
.lg\:w-\[25\%\] {
@media (width >= 64rem) {
width: 25%;
}
}
.lg\:w-\[150px\]\! {
@media (width >= 64rem) {
width: 150px !important;
}
}
.lg\:w-\[200px\]\! {
@media (width >= 64rem) {
width: 200px !important;
}
}
.lg\:max-w-\[300px\] {
@media (width >= 64rem) {
max-width: 300px;
}
}
.lg\:max-w-\[1205px\] {
@media (width >= 64rem) {
max-width: 1205px;
}
}
.lg\:max-w-max {
@media (width >= 64rem) {
max-width: max-content;
}
}
.lg\:max-w-screen-lg {
@media (width >= 64rem) {
max-width: var(--breakpoint-lg);
}
}
.lg\:min-w-6xl {
@media (width >= 64rem) {
min-width: var(--container-6xl);
}
}
.lg\:min-w-\[450px\] {
@media (width >= 64rem) {
min-width: 450px;
}
}
.lg\:basis-1\/3 {
@media (width >= 64rem) {
flex-basis: calc(1/3 * 100%);
}
}
.lg\:basis-1\/4 {
@media (width >= 64rem) {
flex-basis: calc(1/4 * 100%);
}
}
.lg\:basis-3\/4 {
@media (width >= 64rem) {
flex-basis: calc(3/4 * 100%);
}
}
.lg\:grid-cols-2 {
@media (width >= 64rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lg\:grid-cols-4 {
@media (width >= 64rem) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.lg\:grid-cols-6 {
@media (width >= 64rem) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.lg\:flex-col-reverse {
@media (width >= 64rem) {
flex-direction: column-reverse;
}
}
.lg\:justify-center {
@media (width >= 64rem) {
justify-content: center;
}
}
.lg\:gap-0 {
@media (width >= 64rem) {
gap: calc(var(--spacing) * 0);
}
}
.lg\:gap-4 {
@media (width >= 64rem) {
gap: calc(var(--spacing) * 4);
}
}
.lg\:gap-5\! {
@media (width >= 64rem) {
gap: calc(var(--spacing) * 5) !important;
}
}
.lg\:bg-white {
@media (width >= 64rem) {
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
}
}
.lg\:bg-white {
@media (width >= 64rem) {
background-color: var(--color-white);
}
}
.lg\:px-5 {
@media (width >= 64rem) {
padding-inline: calc(var(--spacing) * 5);
}
}
.lg\:py-2 {
@media (width >= 64rem) {
padding-block: calc(var(--spacing) * 2);
}
}
.lg\:py-\[25px\] {
@media (width >= 64rem) {
padding-block: 25px;
}
}
.lg\:ps-6 {
@media (width >= 64rem) {
padding-inline-start: calc(var(--spacing) * 6);
}
}
.lg\:pt-4 {
@media (width >= 64rem) {
padding-top: calc(var(--spacing) * 4);
}
}
.lg\:pt-12 {
@media (width >= 64rem) {
padding-top: calc(var(--spacing) * 12);
}
}
.lg\:pt-\[42px\] {
@media (width >= 64rem) {
padding-top: 42px;
}
}
.lg\:pr-0 {
@media (width >= 64rem) {
padding-right: calc(var(--spacing) * 0);
}
}
.lg\:pr-\[50px\] {
@media (width >= 64rem) {
padding-right: 50px;
}
}
.lg\:pb-3 {
@media (width >= 64rem) {
padding-bottom: calc(var(--spacing) * 3);
}
}
.lg\:pb-8 {
@media (width >= 64rem) {
padding-bottom: calc(var(--spacing) * 8);
}
}
.lg\:pb-12 {
@media (width >= 64rem) {
padding-bottom: calc(var(--spacing) * 12);
}
}
.lg\:pb-\[15px\] {
@media (width >= 64rem) {
padding-bottom: 15px;
}
}
.lg\:pb-\[38px\] {
@media (width >= 64rem) {
padding-bottom: 38px;
}
}
.lg\:pl-\[34px\] {
@media (width >= 64rem) {
padding-left: 34px;
}
}
.lg\:text-xl {
@media (width >= 64rem) {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
.lg\:shadow-sm {
@media (width >= 64rem) {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
.xl\:col-span-9 {
@media (width >= 80rem) {
grid-column: span 9 / span 9;
}
}
.xl\:\!block {
@media (width >= 80rem) {
display: block !important;
}
}
.xl\:block {
@media (width >= 80rem) {
display: block;
}
}
.xl\:flex {
@media (width >= 80rem) {
display: flex;
}
}
.xl\:hidden {
@media (width >= 80rem) {
display: none;
}
}
.xl\:inline {
@media (width >= 80rem) {
display: inline;
}
}
.xl\:w-1\/4 {
@media (width >= 80rem) {
width: calc(1/4 * 100%);
}
}
.xl\:w-full {
@media (width >= 80rem) {
width: 100%;
}
}
.xl\:max-w-screen-xl {
@media (width >= 80rem) {
max-width: var(--breakpoint-xl);
}
}
.xl\:flex-none {
@media (width >= 80rem) {
flex: none;
}
}
.xl\:justify-end {
@media (width >= 80rem) {
justify-content: flex-end;
}
}
.xl\:gap-3 {
@media (width >= 80rem) {
gap: calc(var(--spacing) * 3);
}
}
.xl\:ps-4 {
@media (width >= 80rem) {
padding-inline-start: calc(var(--spacing) * 4);
}
}
.xl\:ps-6 {
@media (width >= 80rem) {
padding-inline-start: calc(var(--spacing) * 6);
}
}
.xl\:pr-5 {
@media (width >= 80rem) {
padding-right: calc(var(--spacing) * 5);
}
}
.xl\:pl-2\.5 {
@media (width >= 80rem) {
padding-left: calc(var(--spacing) * 2.5);
}
}
.\32 xl\:inline {
@media (width >= 96rem) {
display: inline;
}
}
.\32 xl\:max-w-screen-2xl {
@media (width >= 96rem) {
max-width: var(--breakpoint-2xl);
}
}
.dark\:bg-gray-800 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-800);
}
}
.midlapy\:px-3 {
@media (min-width: 1100px) and (max-width: 1445px) {
padding-inline: calc(var(--spacing) * 3);
}
}
.midlapy\:text-\[15px\] {
@media (min-width: 1100px) and (max-width: 1445px) {
font-size: 15px;
}
}
.min-screen\:hover\:text-\[\#e0d2b8\] {
@media only screen and (min-width: 1033px) {
&:hover {
@media (hover: hover) {
color: #e0d2b8;
}
}
}
}
.ipad-pro\:px-3 {
@media only screen and (max-width: 1032px) {
padding-inline: calc(var(--spacing) * 3);
}
}
.ipad-pro\:py-0 {
@media only screen and (max-width: 1032px) {
padding-block: calc(var(--spacing) * 0);
}
}
.mobile\:m-0 {
@media only screen and (max-width: 767px) {
margin: calc(var(--spacing) * 0);
}
}
.mobile\:w-full {
@media only screen and (max-width: 767px) {
width: 100%;
}
}
.mobile\:max-w-full {
@media only screen and (max-width: 767px) {
max-width: 100%;
}
}
.mobile\:flex-\[49\%\] {
@media only screen and (max-width: 767px) {
flex: 49%;
}
}
.mobile\:flex-col {
@media only screen and (max-width: 767px) {
flex-direction: column;
}
}
.\[\&_svg\]\:\!fill-white {
& svg {
fill: var(--color-white) !important;
}
}
.\[\&_svg\]\:fill-white\! {
& svg {
fill: var(--color-white) !important;
}
}
.\[\&\.is-active\]\:transform-none\! {
&.is-active {
transform: none !important;
}
}
.\[\&\.is-active\]\:bg-sky-700\! {
&.is-active {
background-color: var(--color-sky-700) !important;
}
}
.\[\&\:\:-webkit-slider-thumb\]\:pointer-events-auto {
&::-webkit-slider-thumb {
pointer-events: auto;
}
}
.\[\&\:\:-webkit-slider-thumb\]\:h-9 {
&::-webkit-slider-thumb {
height: calc(var(--spacing) * 9);
}
}
.\[\&\:\:-webkit-slider-thumb\]\:w-3 {
&::-webkit-slider-thumb {
width: calc(var(--spacing) * 3);
}
}
.\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
&::-webkit-slider-thumb {
appearance: none;
}
}
.\[\&\:\:-webkit-slider-thumb\]\:rounded-none {
&::-webkit-slider-thumb {
border-radius: 0;
}
}
.\[\&\:\:-webkit-slider-thumb\]\:border-2 {
&::-webkit-slider-thumb {
border-style: var(--tw-border-style);
border-width: 2px;
}
}
.\[\&\:\:-webkit-slider-thumb\]\:border-\[\#f3dfb0\] {
&::-webkit-slider-thumb {
border-color: #f3dfb0;
}
}
.\[\&\:\:-webkit-slider-thumb\]\:bg-\[\#d4b273\] {
&::-webkit-slider-thumb {
background-color: #d4b273;
}
}
.max-xl\:\[\[x-cloak\]\]\:hidden\! {
@media (width < 80rem) {
&:is([x-cloak]) {
display: none !important;
}
}
}
.xl\:\[\[x-cloak\]\]\:block\! {
@media (width >= 80rem) {
&:is([x-cloak]) {
display: block !important;
}
}
}
.\[\&\:nth-child\(n\+2\)\]\:max-md\:hidden {
&:nth-child(n+2) {
@media (width < 48rem) {
display: none;
}
}
}
}
@layer base {
:where(:focus-visible) {
outline: var(--outline-size, 2px) solid var(--color-primary);
outline-offset: var(--outline-offset, 2px);
}
:where(:active:focus-visible) {
outline-offset: 0;
transition: var( --outline-transition, outline-offset 150ms cubic-bezier(0.25, 0, 0.4, 1) );
}
:disabled {
cursor: not-allowed;
}
:target {
scroll-margin-block: var(--anchor-offset, 6ex);
}
@media (prefers-reduced-motion: no-preference) {
:where(html):has(:target) {
scroll-behavior: smooth;
}
}
html {
block-size: 100%;
scrollbar-gutter: stable;
}
body {
min-block-size: 100%;
}
:where( :any-link, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex^="-"]) ) {
touch-action: manipulation;
}
:where( :any-link, button, label[for], label:has(input:is([type="radio"], [type="checkbox"]):enabled), select:has(option:enabled), summary ) {
cursor: pointer;
}
:where(dialog) {
position: fixed;
max-block-size: calc(100% - 2rem);
max-inline-size: calc(100% - 2rem);
background-color: var(--color-surface, canvas);
color: var(--color-fg, canvastext);
border-radius: 1rem;
margin: auto;
padding: 1.5rem;
box-shadow: var(--shadow-lg);
&::backdrop {
background-color: var(--backdrop, hsl(0 0% 0% / 20%));
}
}
:where(:root:has(dialog[open]:modal)) {
overflow: hidden;
}
address {
font-style: normal;
}
}
@media print {
*, *::before, *::after {
box-shadow: none !important;
text-shadow: none !important;
}
:is(h1, h2, h3, h4, h5, h6) {
page-break-after: avoid;
}
:is(h2, h3, h4, h5, h6, p) {
orphans: 3;
widows: 3;
}
:is(tr, img, svg, pre, blockquote) {
page-break-inside: avoid;
}
abbr[title]::after {
content: " (" attr(title) ")";
}
:is(.columns, .container) {
max-width: 100% !important;
}
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url('../fonts/be-vietnam-pro-v12-latin-200.woff2') format('woff2');
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/be-vietnam-pro-v12-latin-300.woff2') format('woff2');
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/be-vietnam-pro-v12-latin-400.woff2') format('woff2');
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/be-vietnam-pro-v12-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/be-vietnam-pro-v12-latin-700.woff2') format('woff2');
}
@font-face {
font-family: 'Be Vietnam';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/be-vietnam-v10-latin-400.woff2') format('woff2');
}
@font-face {
font-family: 'Baskervville';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/baskervville-v20-latin-400.woff2') format('woff2');
}
@font-face {
font-family: 'barlow_condensedregular';
src: url('../fonts/barlowcondensed-regular-webfont.woff2') format('woff2'), url('../fonts/barlowcondensed-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'dancing_scriptregular';
src: url('../fonts/dancingscript-variablefont_wght-webfont.woff') format('woff2'), url('../fonts/dancingscript-variablefont_wght-webfont.woff2') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@layer base {
@view-transition {
navigation: auto;
}
:root {
scrollbar-color: var(--scrollthumb-color) var(--scrolltrack-color, Canvas);
accent-color: var(--color-primary);
caret-color: var(--color-primary);
interpolate-size: allow-keywords;
}
body {
background: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-vietnam-regular);
font-weight: 400;
line-height: 1.5;
font-size: 1rem;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
}
[x-cloak] {
display: none !important;
}
@layer components {
.actions-toolbar {
display: flex;
gap: calc(var(--spacing) * 4);
flex-direction: column;
margin-block-start: calc(var(--spacing) * 6);
padding-block-start: calc(var(--spacing) * 4);
border-block-start-width: 1px;
border-block-start-color: var(--color-gray-300);
@media (width >= 48rem) {
flex-direction: row-reverse;
align-items: center;
}
& a.back {
text-decoration-line: underline;
}
}
}
.btn-size-lg {
padding-inline: calc(var(--spacing) * 10);
padding-block: calc(var(--spacing) * 4);
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.btn-size-sm {
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 2);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
@layer components {
.card {
position: relative;
border-radius: var(--card-radius, var(--radius-lg));
border-width: 1px;
padding-block: var(--card-py, calc(var(--spacing) * 6));
padding-inline: var(--card-px, calc(var(--spacing) * 6));
border-color: var(--card-stroke, var(--color-gray-300));
background-color: var(--card-bg, var(--color-surface));
color: var(--card-color, var(--color-fg));
transition-property: color, background-color, border-color, box-shadow, outline-color;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
}
.card-interactive:is(:hover, :focus-within) {
--card-stroke: #0000;
box-shadow: var(--shadow-lg);
}
}
@layer base {
[type="checkbox"][role="switch"] {
--switch-width: calc(var(--spacing) * 9);
--switch-height: calc(var(--spacing) * 5);
--switch-thumb-offset: calc(var(--switch-width) - var(--switch-height));
border-radius: calc(infinity * 1px);
border-width: 2px;
block-size: var(--switch-height);
inline-size: var(--switch-width);
&:not(:disabled) {
cursor: pointer;
}
&::after {
content: "";
display: block;
aspect-ratio: 1;
height: 100%;
border-radius: calc(infinity * 1px);
border-width: 1px;
border-color: var(--form-bg);
background-color: var(--form-stroke);
transition: background-color 150ms, border-color 150ms, translate 150ms;
}
&:checked {
background-image: none;
&::after {
background-color: var(--form-bg);
translate: var(--switch-thumb-offset) 0%;
}
}
&:dir(rtl):checked::after {
translate: calc(var(--switch-thumb-offset) / -1) 0%;
}
}
}
@layer components {
.form-input.qty {
max-inline-size: calc(6ch + var(--form-px));
}
.field {
margin-top: calc(var(--spacing) * 1);
&.field-reserved {
--reserved-space: calc(var(--spacing) * 7);
margin-block-end: var(--reserved-space);
ul {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
&:last-of-type {
margin-block-end: calc(var(--reserved-space) * -1);
}
}
}
&.choice {
display: flex;
align-items: center;
label {
margin-bottom: calc(var(--spacing) * 0);
}
input {
margin-right: calc(var(--spacing) * 3);
}
}
&.field-error .messages {
color: var(--color-red-600);
max-width: fit-content;
}
&.required > label {
&::after {
content: var(--tw-content);
position: relative;
}
&::after {
content: var(--tw-content);
top: calc(var(--spacing) * -1);
}
&::after {
content: var(--tw-content);
--tw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 6v12M17.196 9 6.804 15M6.804 9l10.392 6'/%3E%3C/svg%3E");
--tw-icon-size: 1em;
display: inline-block;
width: var(--tw-icon-size);
height: var(--tw-icon-size);
background-color: currentcolor;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: var(--tw-icon);
}
&::after {
content: var(--tw-content);
--tw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 6v12M17.196 9 6.804 15M6.804 9l10.392 6'/%3E%3C/svg%3E");
--tw-icon-size: 1em;
display: inline-block;
width: var(--tw-icon-size);
height: var(--tw-icon-size);
background-color: currentcolor;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: var(--tw-icon);
}
&::after {
content: var(--tw-content);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
&::after {
content: var(--tw-content);
color: var(--color-red-600);
}
}
}
}
:root {
--Gold_Vertical: linear-gradient(180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100%);
--gold-border: linear-gradient(180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100%);
}
@layer components {
.btn-gold-gradient {
border: 1px solid transparent;
border-radius: 4px;
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
color: #fff;
}
.btn-gold-gradient:hover, .btn-gold-gradient.active {
background: linear-gradient(#000,#2a2a2a) padding-box,var(--Gold_Vertical) border-box !important;
color: #fff !important;
}
.btn-gold-gradient-active {
background: linear-gradient(#000,#2a2a2a) padding-box,var(--Gold_Vertical) border-box !important;
color: #fff !important;
}
.btn-white-gold-border, .white-btn-gold-border {
--gold-border: linear-gradient(180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100%);
border: 1px solid transparent;
border-radius: 4px;
color: #000;
background: linear-gradient(#fff, #fff) padding-box, var(--gold-border) border-box !important;
}
.btn-white-gold-border:hover, .btn-white-gold-border.active, .white-btn-gold-border:hover, .white-btn-gold-border.active {
color: #000;
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--gold-border) border-box !important;
}
.btn-white-gold-border-active {
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--gold-border) border-box !important;
}
}
@layer components {
.form-input-addon {
appearance: none;
padding-block: var(--form-py);
padding-inline: var(--form-px);
border-radius: var(--form-radius);
border-width: 1px;
border-color: var(--form-stroke);
background-color: var(--form-bg);
color: var(--form-color);
--outline-size: 1px;
--outline-offset: 0px;
&:first-child {
padding-inline-end: 0;
border-inline-end: 0;
}
&:last-child {
padding-inline-start: 0;
border-inline-start: 0;
}
}
.input-group {
position: relative;
display: flex;
border-radius: var(--form-radius);
vertical-align: middle;
&:focus-within {
--form-stroke: var(--form-active-color);
outline: var(--outline-size, 1px) solid var(--form-active-color);
outline-offset: var(--outline-offset, 0px);
}
& > * {
margin: 0;
border-radius: 0;
outline: none;
}
& > :first-child {
border-start-start-radius: inherit;
border-end-start-radius: inherit;
}
& > :last-child {
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
& > :not(template, [hidden]:where(:not([hidden="until-found"]))) + :not(button, .btn) {
border-inline-start-width: 0;
}
}
}
@layer components {
.message {
margin-bottom: calc(var(--spacing) * 2);
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
border-radius: 0.25rem;
background-color: var(--color-gray-100);
padding: calc(var(--spacing) * 2);
padding-left: calc(var(--spacing) * 5);
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: var(--color-black);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
&.error {
border-style: var(--tw-border-style);
border-width: 2px;
border-color: var(--color-red-500);
background-color: var(--color-red-50);
}
&.success {
border-style: var(--tw-border-style);
border-width: 2px;
border-color: var(--color-green-500);
background-color: var(--color-green-50);
}
&.info, &.notice {
border-style: var(--tw-border-style);
border-width: 2px;
border-color: var(--color-blue-500);
background-color: var(--color-blue-50);
}
&.warning {
border-style: var(--tw-border-style);
border-width: 2px;
border-color: var(--color-yellow-500);
background-color: var(--color-yellow-50);
}
a {
text-decoration-line: underline;
}
}
}
.page.messages {
position: sticky;
top: calc(var(--spacing) * 0);
z-index: 20;
.messages section#messages {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
padding-inline: calc(var(--spacing) * 6);
margin-inline: auto;
padding-block: calc(var(--spacing) * 3);
}
}
@layer components {
.rating-summary {
display: flex;
color: var(--color-rating, var(--color-yellow-400));
}
}
@layer components {
.snap-track {
--snap-cols: 1;
--snap-gap: calc(var(--spacing) * 4);
--snap-size: calc(
(100% - var(--snap-gap) * (var(--snap-cols) - 1)) / var(--snap-cols)
);
position: relative;
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--snap-size);
gap: var(--snap-gap);
padding-block: calc(var(--spacing) * 6);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
& > * {
scroll-snap-align: start;
}
}
.snap-pager {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: calc(var(--spacing) * 3);
min-block-size: calc(var(--spacing) * 11);
padding-block: calc(var(--spacing) * 2);
}
.snap-marker {
flex-shrink: 0;
block-size: calc(var(--spacing) * 4);
inline-size: calc(var(--spacing) * 4);
border-width: 1px;
border-color: var(--color-slate-600);
border-radius: 1rem;
transition-duration: 300ms;
transition-property: border-color, background-color;
@media (prefers-reduced-motion: no-preference) {
transition-property: inline-size, border-color, background-color;
will-change: inline-size;
}
&[aria-current="true"] {
inline-size: calc(var(--spacing) * 7);
border-color: #0000;
background-color: var(--color-primary);
}
}
}
@layer components {
.swatch-attribute-options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.swatch-option {
margin: calc(var(--spacing) * 1);
display: flex;
justify-content: center;
border-style: var(--tw-border-style);
border-width: 1px;
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 1);
--tw-ring-offset-width: 2px;
min-width: 40px;
}
}
@layer components {
:where(main:not(.product-main-full-width, .page-main-full-width)) {
& .columns {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
margin-inline: auto;
padding-inline: calc(var(--spacing) * 6);
}
}
}
@layer base {
:where(form label) {
margin-bottom: calc(var(--spacing) * 2);
display: block;
color: var(--color-fg-secondary);
}
:where(form legend) {
margin-bottom: calc(var(--spacing) * 3);
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
& + br {
display: none;
}
}
:where(fieldset ~ fieldset) {
margin-top: calc(var(--spacing) * 8);
}
}
.price-box {
& .price {
font-size: var(--price-font-size, var(--text-base));
font-weight: var(--price-font-weight, bolder);
}
& .old-price, & .special-price {
display: block;
& .price-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
}
& .old-price {
--price-font-size: 0.875em;
--price-font-weight: normal;
.price {
text-decoration: line-through;
}
}
& .price-excluding-tax {
display: block;
&::after {
content: " " attr(data-label);
font-size: var(--price-font-size-label, 0.875rem);
font-weight: var(--price-font-weight, normal);
}
}
& .price-tax-label {
font-size: var(--price-font-size-label, 0.875rem);
}
}
.price-including-tax + .price-excluding-tax {
--price-font-size: 1rem;
}
.price-container.price-tier_price {
display: flex;
gap: calc(var(--spacing) * 1);
& > .price-including-tax + .price-excluding-tax {
&::before {
content: "(" attr(data-label) ": ";
}
&::after {
content: ")";
}
}
}
@layer components {
.account-nav li {
& a, & strong {
display: flex;
justify-content: space-between;
padding-block: calc(var(--spacing) * 1);
color: var(--color-fg-secondary);
}
& a:hover {
text-decoration-line: underline;
color: var(--color-fg);
}
& strong {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
text-decoration-line: underline;
color: var(--color-fg);
}
}
}
.grecaptcha-badge {
visibility: hidden;
}
.page-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
overflow: hidden;
}
.page-main {
flex-grow: 1;
margin-block: calc(var(--spacing) * 8);
}
.columns {
display: grid;
grid-template-columns: minmax(0px, 1fr);
gap: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
}
@media (width >= 48rem) {
:is([class*="page-layout-2columns-"], .page-layout-3columns) {
--sidebar-width: 240px;
--main-width: minmax(0px, 1fr);
--page-layout: var(--sidebar-width) var(--main-width);
.columns {
grid-template-columns: var(--page-layout);
grid-template-rows: auto 1fr;
& > .column.main {
grid-row: span 2;
}
}
}
.page-layout-2columns-left {
.columns > .column.main {
grid-column-start: 2;
}
}
.page-layout-2columns-right {
--page-layout: var(--main-width) var(--sidebar-width);
.columns > .column.main {
order: -1;
}
}
}
@media (width >= 64rem) {
[class*="page-layout-2columns-"], .page-layout-3columns {
--sidebar-width: 320px;
}
}
@media (width >= 80rem) {
.page-layout-3columns {
--sidebar-width: 240px;
--page-layout: var(--sidebar-width) var(--main-width)
var(--sidebar-width);
}
}
@layer components {
.cms-content {
--text-flow: 1em 1rem;
--separator-flow: 2.5em;
--list-flow: 0.5em;
--h-color: initial;
--h-family: initial;
--h-size: 1.125em;
--h-weight: 600;
--h-line: 1.1;
--h1-size: 3em;
--h2-size: 2em;
--h3-size: 1.625em;
--h4-size: 1.375em;
--marker-color: var(--color-primary);
--link-color: var(--color-primary);
--link-weight: 500;
--blockquote-color: var(--color-primary);
--table-py: calc(var(--spacing) * 3);
--table-px: calc(var(--spacing) * 2);
--table-stroke: var(--color-gray-400);
--table-bg: canvas;
--table-color: canvastext;
:where(h1, h2, h3, h4, h5, h6, p, dl, ul, ol, pre, hgroup) {
margin-block: var(--text-flow);
}
:where(blockquote, figure, hr) {
margin-block: var(--separator-flow);
margin-inline: 0;
}
:where([class~="lead"]) {
font-size: 1.25em;
}
:where(h1, h2, h3, h4, h5, h6) {
color: var(--h-color);
font-family: var(--h-family);
font-size: var(--h-size);
font-weight: var(--h-weight);
line-height: var(--h-line);
text-wrap: balance;
}
:where(h1) {
--h-size: var(--h1-size);
}
:where(h2) {
--h-size: var(--h2-size);
}
:where(h3) {
--h-size: var(--h3-size);
}
:where(h4) {
--h-size: var(--h4-size);
}
::marker {
color: var(--marker-color);
}
:where(ul, ol) {
list-style: revert;
padding-inline-start: 2em;
}
:where(ol[type="a"]) {
list-style-type: lower-alpha;
}
:where(ol[type="i"]) {
list-style-type: lower-roman;
}
:where(ol[type="1"]) {
list-style-type: decimal;
}
:where(blockquote) {
border-inline-start: 4px solid var(--blockquote-color);
padding-inline-start: 1.5em;
padding-block: 0.25em;
}
:where(:any-link) {
color: var(--link-color);
font-weight: var(--link-weight);
&:hover {
text-decoration: underline;
}
}
:where(table) {
border-collapse: separate;
border-spacing: 0;
border-color: var(--table-stroke);
}
:where(thead, tbody, tfoot, tr, th, td) {
border-color: inherit;
text-align: inherit;
}
:where(th, td) {
padding-block: var(--table-py);
padding-inline: var(--table-px);
background: var(--table-bg);
color: var(--table-color);
}
:where(tr + tr :is(th, td)) {
border-block-start-width: 1px;
}
:where(thead tr:last-child :is(th, td)) {
border-block-end-width: 2px;
}
:where(tfoot tr:first-child :is(th, td)) {
border-block-start-width: 2px;
}
:where(table:not(:has(.table-wrapper, [class*="overflow-"]))) {
word-break: break-all;
}
> :where(:first-child) {
margin-block-start: 0;
}
> :where(:last-child) {
margin-block-end: 0;
}
max-width: 100%;
}
.table-wrapper {
overflow: auto;
}
}
#customer-login-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
column-gap: calc(var(--spacing) * 4);
row-gap: calc(var(--spacing) * 8);
padding-block: calc(var(--spacing) * 8);
@media (width >= 48rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.order-links {
display: flex;
flex-wrap: wrap;
gap: calc(var(--spacing) * 4);
a {
text-decoration: underline;
}
}
.product-info-main {
--price-font-size: clamp(1.5em, 2.5vw, 2.5em);
& .old-price {
--price-font-size: 1em;
}
.product-grouped-options, .price-from, .price-to {
--price-font-size: 1.5em;
}
}
.wishlist-widget .price-box {
& .price-label, & .old-price {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
}
.product-item {
--price-font-size: 1.25em;
.price-from, .price-to {
--price-font-size: 1em;
}
}
.product-image-container {
display: block;
margin-inline: auto;
}
.quick-view-postion {
.trend-label {
z-index: 2;
order: 3;
margin-left: calc(var(--spacing) * 1.5);
height: 19px;
border-radius: 0.25rem;
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 0);
text-align: center;
font-size: 12px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-white);
&.clearance {
background-color: var(--color-red-500);
font-weight: 600;
}
}
}
.listing_fallback {
position: relative;
}
.sudo-next {
display: none;
@media only screen and (max-width: 767px) {
display: block;
position: absolute;
top: 0;
right: 8px;
height: 100%;
padding: 1px 6px;
border: 0;
background: none;
font-size: 35px;
line-height: 1;
color: #666;
z-index: 2;
}
}
@media only screen and (max-width: 767px) {
.product-item .actions-secondary, .product-item .quick-view-postion {
z-index: 3;
}
.parent-gallery-listing .owl-prev, .parent-gallery-listing .owl-next {
opacity: 1;
padding: 1px 6px;
z-index: 1;
span {
font-size: 35px;
line-height: 1;
color: #666;
}
}
.parent-gallery-listing .owl-prev {
left: 8px;
}
.parent-gallery-listing .owl-next {
right: 8px;
}
}
.ai-quick-icons {
.ai-icon {
background: url(../images/try-me-icon.svg) no-repeat left top;
display: block;
width: 15px;
height: 20px;
cursor: pointer;
z-index: 1;
position: relative;
margin: 0 0 0 9px;
background-size: contain;
}
}
.magicicon {
width: 30px;
height: 30px;
cursor: pointer;
z-index: 9;
background: url(../images/icons/360_icon_white.svg) no-repeat left top;
}
.gallery_share .icon {
background: url(../images/icons/dh-share-icon.svg) no-repeat center center;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
position: relative;
margin-bottom: 0;
text-indent: -9999px;
background-size: 18px;
border-radius: 50%;
cursor: pointer;
}
.towishlist {
width: 23px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 50;
span {
display: block;
width: 100%;
height: 100%;
background-image: url(../images/icons/wishlist-icon.svg);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
transition: 0.5s all;
text-indent: -9999px;
}
&:hover span, &.active span {
background-image: url(../images/icons/wishlist.svg);
filter: brightness(0);
}
}
.static-banner {
position: relative;
.category-image {
position: relative;
padding: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 200px;
height: 20vw;
background-image: url(../images/herobanner/engagementrings.jpg);
background: linear-gradient(to bottom, rgba(65, 46, 46, 0.64) 0%, rgba(65, 46, 46, 0.64) 55%, rgba(0, 0, 0, 0.53) 100%), url(../images/herobanner/listing-banner-bg.jpg) -838.608px -577.039px / 167% no-repeat;
&::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(30, 30, 30, 0.5) 0%, rgba(30, 30, 30, 0.5) 100%);
pointer-events: none;
z-index: 1;
}
@media only screen and (max-width: 1032px) {
background-size: 179% !important;
}
}
}
.category-view {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.category-view > section.static-banner {
grid-row: 1;
grid-column: 1;
}
.category-view > div:has(> .container.category-hero) {
grid-row: 1;
grid-column: 1;
position: relative;
}
.gold-line {
position: relative;
&::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -15px;
width: 100%;
height: 2px;
max-width: 350px;
background: linear-gradient( 270deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% );
}
}
.category-hero {
z-index: 2;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
a {
color: #fff;
}
h1 {
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 28px;
margin-bottom: 40px;
margin-top: 20px;
text-transform: uppercase;
line-height: 31.03px;
letter-spacing: 1px;
@media only screen and (max-width: 1032px) {
font-size: 18px;
}
}
p {
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 14px;
line-height: 22px;
&.letter-space {
letter-spacing: 0.9px;
font-size: 18px;
font-family: var(--font-vietnam);
font-weight: 400;
text-transform: uppercase;
margin: 0;
height: auto;
}
a {
text-decoration: underline;
}
}
.catalog-options {
display: flex;
align-items: center;
justify-content: center;
a {
display: block;
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 12px;
line-height: 15.18px;
color: #000;
border: 1px solid #000;
border-radius: 2px;
padding: 7px 15px;
width: 160px;
text-align: center;
margin-right: 10px;
&:hover, &.active {
background: #000;
color: #fff;
}
}
}
&.no-banner {
border-top: 1px solid #B0B0B0;
}
&.category-hero--no-image {
width: 100%;
position: relative;
top: inherit;
left: inherit;
transform: inherit;
h1, p, a {
color: var(--color-black);
@media only screen and (max-width: 1032px) {
color: var(--color-black);
}
@media only screen and (max-width: 767px) {
margin-bottom: calc(var(--spacing) * 2.5);
}
}
.desc-sheet-panel {
h1, p, a {
color: var(--color-black);
@media only screen and (max-width: 1032px) {
color: var(--color-white);
}
}
}
}
}
@media (max-width: 767px) {
.category-hero:has(.desc-sheet-panel:not([style*="display: none"])) {
z-index: 999;
}
}
.category-description {
margin-top: calc(var(--spacing) * 2.5);
@media only screen and (max-width: 1032px) {
display: flex;
}
@media only screen and (max-width: 1032px) {
align-items: center;
}
@media only screen and (max-width: 1032px) {
justify-content: center;
}
.short-text p {
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 14px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
@media only screen and (max-width: 1032px) {
font-size: 12px;
}
@media only screen and (max-width: 1032px) {
--tw-leading: 17px;
line-height: 17px;
}
}
.read-toggle {
cursor: pointer;
font-size: 14px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
text-decoration-line: underline;
@media only screen and (max-width: 1032px) {
font-size: 12px;
}
}
.full-text p {
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 14px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
}
}
.trust_block {
margin-top: 30px;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 14px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
@media only screen and (max-width: 1032px) {
font-size: 12px;
}
}
.location-by-filter {
> button {
border-radius: 0.25rem;
border-color: transparent !important;
background-color: transparent !important;
padding-inline: 2px !important;
padding-block: 7px !important;
font-size: 14px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: #212529;
}
.dropdown-menu {
min-width: 160px;
border-radius: 0;
border-style: var(--tw-border-style) !important;
border-width: 0px !important;
padding-block: calc(var(--spacing) * 2);
--tw-shadow: 0 0 #0000 !important;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.dropdown-item {
padding-inline: calc(var(--spacing) * 4);
padding-block: calc(var(--spacing) * 1);
font-size: 16px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
}
.image-details {
> button {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
background-color: transparent;
padding: 10px;
color: #212529;
&[aria-expanded="true"] {
background-image: linear-gradient(#fff, #fff), var(--Gold_Vertical);
background-origin: border-box;
background-clip: padding-box, border-box;
}
}
.dropdown-menu {
z-index: 995;
min-width: 160px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding: 15px;
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-radius: 0 4px 4px 4px;
background-image: linear-gradient(#fff, #fff), var(--Gold_Vertical);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.dropdown-item {
margin-bottom: calc(var(--spacing) * 2);
display: block;
padding: 5px;
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 12px;
--tw-leading: 18px;
line-height: 18px;
color: var(--color-black);
}
}
.sortby-filter .filterhead span {
padding: 10px !important;
}
.am-swatch-wrapper[class*="-empty-value"] {
display: none !important;
}
@media only screen and (min-width: 1033px) {
.stock_filter .block-content.filter-content {
position: relative;
}
.stock_filter .block-content.filter-content > .filter-common.stock_cols.filter-options {
position: absolute;
right: -20px;
bottom: -10px;
}
.stock_filter .grouped_filters {
width: 100%;
justify-content: flex-start;
}
}
@media only screen and (max-width: 1032px) {
.budget-column .range-wrapper {
display: flex !important;
flex-direction: column;
}
.budget-column .range-slider {
order: 2;
margin-top: calc(var(--spacing) * 2);
}
.budget-column .range-labels {
order: 3;
margin-top: calc(var(--spacing) * 4);
color: var(--color-white);
}
.budget-column .range-slider ~ div:not(.range-labels) {
order: 1;
}
.budget-column .ui-slider-tooltip.range-values {
display: flex !important;
height: 34px;
min-width: 48px;
align-items: center;
justify-content: center;
padding-inline: calc(var(--spacing) * 2);
font-size: 12px;
color: var(--color-white);
background: #2b2b2b;
border: 1px solid #c5a76d;
}
.budget-column h3 {
margin-bottom: calc(var(--spacing) * 2.5);
text-align: left !important;
font-size: 14px !important;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-white) !important;
}
.budget-column .range-labels {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
font-size: 12px !important;
span {
white-space: nowrap;
}
}
.budget-column .range-slider input[type="range"] {
&::-webkit-slider-thumb {
width: 12px !important;
height: 36px !important;
border-radius: 0 !important;
background-color: #d4b273 !important;
background-image: linear-gradient(#111, #111), linear-gradient(#111, #111) !important;
background-repeat: no-repeat !important;
background-size: 1px 24px, 1px 24px !important;
background-position: left 4px center, right 4px center !important;
background-origin: border-box !important;
border: 2px solid #f3dfb0 !important;
box-shadow: none !important;
}
&::-moz-range-thumb {
width: 12px !important;
height: 36px !important;
border-radius: 0 !important;
background-color: #d4b273 !important;
background-image: linear-gradient(#111, #111), linear-gradient(#111, #111) !important;
background-repeat: no-repeat !important;
background-size: 1px 24px, 1px 24px !important;
background-position: left 4px center, right 4px center !important;
background-origin: border-box !important;
border: 2px solid #f3dfb0 !important;
box-shadow: none !important;
}
}
}
.stock_filter .price_filter {
margin-top: calc(var(--spacing) * 5);
margin-bottom: calc(var(--spacing) * 5);
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: #bebebe;
padding-bottom: calc(var(--spacing) * 5);
@media only screen and (max-width: 1032px) {
border-style: var(--tw-border-style);
border-width: 0px;
}
.filter-options-content.hide {
display: block !important;
}
.items.am-filter-items-attr_price {
margin-top: calc(var(--spacing) * 2);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--spacing) * 2);
> li > a {
display: inline-block;
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
padding-inline: calc(var(--spacing) * 4);
padding-block: calc(var(--spacing) * 1.5);
font-size: 13px;
text-decoration-line: none !important;
}
> li a.selected {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
span {
color: #fff;
}
}
> li.disabled {
span.label {
display: inline-block;
cursor: not-allowed;
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
padding-inline: calc(var(--spacing) * 4);
padding-block: calc(var(--spacing) * 1.5);
font-size: 13px;
text-decoration-line: none !important;
opacity: 60%;
}
}
> li > a:hover {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
color: #fff !important;
span {
color: #fff !important;
}
}
> li > input {
display: none;
}
}
}
@media only screen and (max-width: 1032px) {
.stock_filter .primary-filter.filter-options.filter-box {
position: relative;
margin-top: calc(var(--spacing) * 2.5);
margin-bottom: calc(var(--spacing) * 2.5);
border-radius: 0.25rem;
padding: calc(var(--spacing) * 2.5);
padding-top: calc(var(--spacing) * 6);
background: url('../images/dh-waves.jpg') 0 0 / 11px 11px repeat, linear-gradient(180deg, #323232 0%, #141414 100%), #d3d3d3;
&::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: 4px;
background: linear-gradient(#000, #2a2a2a) padding-box, var(--Gold_Vertical) border-box;
opacity: .95;
}
> * {
position: relative;
z-index: 2;
&:has(.slider-panel:not(.close_mobile)) {
z-index: 99999;
}
}
}
.stock_filter .price_filter {
order: 2;
}
.stock_filter .grouped_filters {
order: 1;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
> .filter-options-item {
min-width: calc(var(--spacing) * 0);
}
}
.quick-delivery-filter-btn {
position: relative;
display: flex !important;
height: 65px !important;
width: 100% !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--spacing) * 1);
border-radius: 0.25rem;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 12px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-white);
background: linear-gradient(#000, #2a2a2a) padding-box, var(--Gold_Vertical) border-box;
border: 1px solid transparent;
.fa-filter {
position: absolute;
top: 7px;
right: 3px;
font-size: 12px;
color: #555;
}
.sub-btn {
@media only screen and (max-width: 767px) {
display: flex;
justify-content: center;
}
span {
display: block;
font-size: 10px;
color: var(--color-white);
@media only screen and (max-width: 767px) {
width: 60%;
min-width: calc(var(--spacing) * 0);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.slider-panel:not(.close_mobile) {
position: fixed !important;
inset-inline: calc(var(--spacing) * 0);
bottom: calc(var(--spacing) * 0);
z-index: 9999;
display: block !important;
overflow-y: auto;
border-top-left-radius: var(--radius-2xl);
border-top-right-radius: var(--radius-2xl);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
top: auto !important;
max-height: 65vh;
padding: 20px 10px 80px;
}
.mobile-filter-overlay {
position: fixed;
inset: calc(var(--spacing) * 0);
z-index: 999;
background: rgba(0, 0, 0, .5);
}
.slider-panel .close-btn {
position: absolute;
top: calc(var(--spacing) * 2.5);
right: calc(var(--spacing) * 2.5);
display: block;
height: calc(var(--spacing) * 5);
width: calc(var(--spacing) * 5);
&::before, &::after {
content: "";
position: absolute;
top: calc(1/2 * 100%);
left: calc(1/2 * 100%);
height: 2px;
width: calc(var(--spacing) * 4);
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
}
&::before {
transform: translate(-50%, -50%) rotate(45deg);
}
&::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
.slider-panel .slider-title span {
margin-bottom: calc(var(--spacing) * 4);
display: block;
padding-bottom: calc(var(--spacing) * 1.5);
font-family: var(--font-vietnam);
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
}
.d-filter.stock_style_carousel {
max-width: 850px;
margin: 25px auto 20px;
.style-carousel-wrap {
position: relative;
padding: 0 25px;
@media only screen and (max-width: 1032px) {
padding: 0;
}
}
.style-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 9999px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
&.style-carousel-arrow--prev {
left: -18px;
}
&.style-carousel-arrow--next {
right: -18px;
}
}
#d_style_filter {
--carousel-items: 7;
--carousel-gap: calc(var(--spacing) * 6);
justify-content: center;
@media only screen and (max-width: 1032px) {
justify-content: flex-start;
}
@media only screen and (max-width: 1032px) {
gap: calc(var(--spacing) * 4) !important;
}
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
&.style-carousel-scrollable {
@media (width >= 64rem) {
justify-content: flex-start !important;
}
}
}
.alias-style-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
@media (width >= 64rem) {
flex: 0 0 auto !important;
width: calc((100% - (var(--carousel-items) - 1) * var(--carousel-gap)) / var(--carousel-items)) !important;
}
}
.am-swatch-link {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: calc(var(--spacing) * 1.5);
padding-left: calc(var(--spacing) * 0);
text-decoration-line: none;
&::before, &::after {
content: none !important;
}
&.selected {
background-image: linear-gradient(#fff, #fff), linear-gradient(#f7d592 4%, #bc913d 14.5%, #fff7e7 23%, #ffdfa2 35.5%, #f7d592 38%, #cb9836 52.5%, #ffdfa2 59.5%, #bb903e 69.5%, #f8d798 86.5%, #a27724 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
border: 1px solid #0000;
border-radius: 4px;
}
}
.swatch-option {
height: calc(var(--spacing) * 10);
width: 100%;
max-width: 100px;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 0px;
border-color: var(--color-gray-200);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
order: 1;
}
.alias-style-label {
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 13px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
white-space: nowrap;
color: var(--color-black);
order: 2;
}
.selected .swatch-option {
border-color: #BC913D;
}
}
.desc-sheet-panel {
border-radius: 15px 15px 0 0;
box-shadow: 0 -10px 10px -5px rgba(0, 0, 0, 0.3);
min-height: 36vh;
background: #000;
color: #fff;
z-index: 999;
p {
margin-bottom: calc(var(--spacing) * 4);
text-align: left;
font-size: 12px;
--tw-leading: 20.45px;
line-height: 20.45px;
a {
color: var(--color-black);
text-decoration-line: underline;
}
}
}
.breadcrumbs {
border-bottom: 1px solid #e2e2e2;
@media only screen and (max-width: 767px) {
display: none;
}
}
.category-view .nav-bottom-bar {
margin-bottom: 45px;
display: none;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: #bebebe;
background-color: #eee;
@media (width >= 48rem) {
display: block;
}
ul {
li a {
color: var(--color-black) !important;
&::before {
--tw-invert: invert(0%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
}
}
}
#amasty-shopby-product-list .container {
max-width: 100%;
}
@media (min-width: 1500px) {
#amasty-shopby-product-list .container {
max-width: 90%;
}
}
.style-carousel-wrap {
position: relative;
padding: 0 25px;
@media only screen and (max-width: 767px) {
padding: 0;
}
}
.style_filter_content {
@media only screen and (max-width: 767px) {
padding-inline: 0;
}
}
.style_carousel1 {
--carousel-items: 3;
--carousel-gap: calc(var(--spacing) * 2);
gap: var(--carousel-gap);
scroll-snap-type: x mandatory;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
@media only screen and (max-width: 767px) {
--carousel-items: 3.5;
}
> .item {
scroll-snap-align: start;
flex: 0 0 auto !important;
width: calc((100% - (var(--carousel-items) - 1) * var(--carousel-gap)) / var(--carousel-items)) !important;
margin-bottom: 20px;
display: flex;
align-items: center;
@media only screen and (max-width: 1032px) {
margin-bottom: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 1032px) {
padding: calc(var(--spacing) * 0);
}
&.checked {
border-radius: 4px;
border: 1px solid transparent;
background-image: linear-gradient(#fff, #fff), linear-gradient(180deg, #f7d592 4%, #bc913d 14.5%, #fff7e7 23%, #ffdfa2 35.5%, #f7d592 38%, #cb9836 52.5%, #ffdfa2 59.5%, #bb903e 69.5%, #f8d798 86.5%, #a27724 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
a {
font-weight: 600;
}
}
a {
display: block;
padding: calc(var(--spacing) * 1.25);
text-align: center;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 15px;
color: var(--color-black);
img {
margin-inline: auto;
margin-bottom: calc(var(--spacing) * 1.25);
max-width: 90%;
}
}
}
}
@media (width >= 64rem) {
.style_carousel1 {
--carousel-items: 10;
}
}
.style-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 9999px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
&.style-carousel-arrow--prev {
left: -18px;
}
&.style-carousel-arrow--next {
right: -18px;
}
}
.style-carousel-dot {
height: calc(var(--spacing) * 1.5);
width: calc(var(--spacing) * 1.5);
border-radius: calc(infinity * 1px);
border-style: var(--tw-border-style);
border-width: 0px;
background-color: #d9d9d9;
padding: calc(var(--spacing) * 0);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 200ms;
transition-duration: 200ms;
&.active {
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
}
}
.style_filter {
margin-top: calc(var(--spacing) * 5);
margin-bottom: calc(var(--spacing) * 2.5);
width: 100%;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: #bebebe;
@media only screen and (max-width: 767px) {
margin-top: calc(var(--spacing) * 0);
margin-bottom: calc(var(--spacing) * 0);
}
}
.d-flex {
display: flex;
}
.d-none {
display: none;
}
@media (min-width: 768px) {
.d-md-none {
display: none;
}
}
.row {
--bs-gutter-x: 1.5rem;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
&.g-0 {
--bs-gutter-x: 0;
}
}
section.common-pages.hub-page {
overflow: hidden;
}
.container-fluid {
margin-inline: auto;
width: 100%;
padding-inline: calc(var(--spacing) * 3);
}
.d-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.img-fluid {
display: block;
height: auto;
max-width: 100%;
}
.flex-column {
flex-direction: column;
}
@media (min-width: 768px) {
.flex-md-row-reverse {
flex-direction: row-reverse;
}
.text-md-end {
text-align: right;
}
.text-md-start {
text-align: left;
}
}
.hub-page {
.hhide {
display: none;
}
.listing-block {
margin-top: calc(var(--spacing) * 12);
@media only screen and (max-width: 1032px) {
padding-inline: calc(var(--spacing) * 3);
}
&__title {
margin-top: 5px;
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 28px;
color: var(--color-black);
}
&__pera {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: #B78F44;
}
p {
margin-bottom: calc(var(--spacing) * 3);
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 16px;
--tw-leading: 140%;
line-height: 140%;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: #636363;
@media only screen and (max-width: 1032px) {
font-size: 14px;
}
a {
color: #636363;
text-decoration-line: underline;
}
}
@media (min-width: 1033px) {
.pad-right {
padding-right: 42px;
}
.pad-left {
padding-left: 42px;
}
}
}
.btn-line {
display: inline-block;
cursor: pointer;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-black);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding-inline: calc(var(--spacing) * 8);
padding-block: calc(var(--spacing) * 2);
text-align: center;
font-family: var(--font-vietnam);
font-weight: 400;
color: var(--color-black);
text-decoration-line: none;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
&:hover {
border-color: var(--color-black);
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
color: var(--color-white);
}
}
.homline {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3);
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--spacing) * 3.5);
.line12 {
margin: calc(var(--spacing) * 0);
display: inline-block;
width: 100px;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
border-color: var(--color-black);
--tw-leading: calc(var(--spacing) * 0);
line-height: calc(var(--spacing) * 0);
}
img {
width: 25px;
}
}
.store-list {
margin-inline: auto;
margin-top: calc(var(--spacing) * 5);
display: flex;
max-width: 1200px;
flex-wrap: wrap;
gap: calc(var(--spacing) * 7);
@media only screen and (max-width: 1032px) {
gap: calc(var(--spacing) * 2.5);
}
li {
text-align: center;
@media only screen and (max-width: 1032px) {
width: 31.2%;
}
@media only screen and (max-width: 1032px) {
text-align: center;
}
}
h3, a {
margin: calc(var(--spacing) * 0);
font-size: 16px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-black);
text-transform: none;
}
h3 {
@media only screen and (max-width: 1032px) {
margin: calc(var(--spacing) * 1);
}
}
}
.hub-care {
.care-btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--spacing) * 5);
}
.care-cards {
.card {
position: relative;
height: 100%;
border-radius: 0.25rem;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
@media only screen and (max-width: 1032px) {
padding: calc(var(--spacing) * 0);
}
border: 2px solid transparent;
background-image: linear-gradient(#fff, #fff), var(--Gold_Vertical);
background-origin: border-box;
background-clip: padding-box, border-box;
.hub-title, h1, h3 {
margin-block: calc(var(--spacing) * 8);
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 20px;
--tw-leading: calc(var(--spacing) * 9);
line-height: calc(var(--spacing) * 9);
color: var(--color-black);
text-transform: uppercase;
@media only screen and (max-width: 1032px) {
margin-block: calc(var(--spacing) * 2.5);
}
@media only screen and (max-width: 1032px) {
font-size: 15px;
}
@media only screen and (max-width: 1032px) {
--tw-leading: calc(var(--spacing) * 6);
line-height: calc(var(--spacing) * 6);
}
}
.card-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 60px;
padding: calc(var(--spacing) * 0);
@media only screen and (max-width: 1032px) {
padding: calc(var(--spacing) * 2);
}
p {
font-weight: 300;
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 16px;
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
@media only screen and (max-width: 1032px) {
font-size: 14px;
}
}
}
}
}
}
.hub-promise {
.care-cards {
.row {
justify-content: center;
gap: 10px;
}
}
}
.home-categories {
h4 a {
display: block;
text-align: center;
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 18px;
color: var(--color-black);
text-transform: uppercase;
text-decoration-line: none;
.text {
margin-top: calc(var(--spacing) * 0);
display: block;
font-weight: 300;
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 12px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
--tw-tracking: 0.5px;
letter-spacing: 0.5px;
color: #B78F45;
text-transform: none;
}
}
}
}
.sort_filters {
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
.filter-content .filter-options {
position: relative;
margin-inline: auto;
display: flex;
max-width: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
}
}
.filter_parent, .filtertitle {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.filter_parent {
&.fp {
.filterselected {
@media only screen and (max-width: 1032px) {
width: 100%;
text-align: left;
padding-left: 10px;
}
}
span {
@media only screen and (max-width: 1032px) {
padding-top: 5px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
&:after {
content: inherit !important;
}
}
}
&.stone-type-parent {
.filtercontent {
z-index: 9;
ul {
width: auto;
li {
margin: calc(var(--spacing) * 0);
width: auto;
padding: calc(var(--spacing) * 0);
a {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
font-size: 14px;
&:hover {
@media (hover: hover) {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
}
}
&:hover {
@media (hover: hover) {
color: var(--color-white);
}
}
padding: 5px 20px;
margin-right: 10px;
min-width: 100px;
&:hover span {
color: var(--color-white);
}
}
&.checked {
a {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
span {
color: var(--color-white);
}
}
}
}
}
}
}
}
@media (min-width: 1033px) {
#other-filters .grouped_filters, #mob_filters {
column-gap: 0 !important;
}
}
.grouped_filters {
&[class*="tag-grouped_"] {
padding: 20px 10px;
min-width: 475px;
}
.filtercontent {
ol[class*="am-filter-items-attr_"] {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--spacing) * 2.5);
li {
input {
opacity: 0;
display: none;
}
a {
display: block;
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
font-size: 13px;
&:hover {
@media (hover: hover) {
color: var(--color-white);
}
}
padding: 5px 20px;
min-width: 100px;
&:hover {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
}
&:hover span {
color: var(--color-white);
}
}
&.disable {
span {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
border: 1px solid #999;
border-radius: 4px;
color: #000;
font-size: 13px;
padding: 5px 10px;
display: inline-block;
background: #fff;
cursor: not-allowed;
opacity: .6;
min-width: 100px;
}
}
}
}
.am-filter-items-ring_setting {
gap: 5px;
.am-swatch-wrapper {
a {
display: block !important;
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
font-size: 13px;
white-space: nowrap;
&:hover {
@media (hover: hover) {
color: var(--color-white);
}
}
min-width: 100px;
&:hover {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
}
&:hover span {
color: var(--color-white);
}
.am-swatch-image {
display: none !important;
}
}
}
}
}
}
.attribute_filters {
display: flex;
flex-direction: row-reverse;
align-items: center;
@media (max-width: 767px) {
display: block;
width: 100%;
}
}
#mob_filters {
min-width: 0;
}
.wedding_style_carousel1 {
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@media only screen and (max-width: 767px) {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
img {
max-width: 100px;
max-height: max-content;
@media only screen and (max-width: 767px) {
max-width: 100%;
}
}
}
}
#other-filters .grouped_filters, #mob_filters {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 15px;
row-gap: calc(var(--spacing) * 2.5);
@media only screen and (max-width: 1032px) {
column-gap: calc(var(--spacing) * 2);
}
}
.shape_filter {
.filter_parent {
.filtercontent {
@media only screen and (max-width: 1032px) {
position: absolute;
top: 35px;
min-width: 92vw;
border: 1px solid transparent;
background-image: linear-gradient(#fff, #fff), linear-gradient(180deg, #f7d592 4%, #bc913d 14.5%, #fff7e7 23%, #ffdfa2 35.5%, #f7d592 38%, #cb9836 52.5%, #ffdfa2 59.5%, #bb903e 69.5%, #f8d798 86.5%, #a27724 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
border-top-left-radius: 0;
}
}
@media only screen and (max-width: 1032px) {
.filterhead {
border: 0 !important;
padding: 0 !important;
}
.tag.flex {
display: flex;
align-items: center;
}
}
}
}
#mob_filters > .filter-option {
display: contents;
}
#mob_filters > .filter-option > form.cust-category-filter, #mob_filters > form.cust-category-filter {
display: contents;
}
.style_filter_content {
order: -3;
flex-basis: 100%;
}
.style_filter {
order: -2;
flex-basis: 100%;
}
.toolbar-main {
margin-left: auto;
}
.filter-grouping.SSSDS {
order: 10;
}
.ring_fills {
order: 11;
}
.filterhead {
cursor: pointer;
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 12px;
--tw-leading: 15.18px;
line-height: 15.18px;
color: var(--color-black);
@media (min-width: 1033px) {
position: relative;
display: flex;
align-items: center;
font-size: 14px;
white-space: nowrap;
}
span {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
padding-inline: calc(var(--spacing) * 2.5);
padding-top: 7px;
padding-bottom: 5px;
&.active {
position: relative;
background-image: linear-gradient(#fff, #fff), var(--Gold_Vertical);
background-origin: border-box;
background-clip: padding-box, border-box;
&::after {
position: absolute;
bottom: calc(var(--spacing) * 0.5);
left: 1px;
z-index: 1;
height: calc(var(--spacing) * 0.5);
width: 99%;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
--tw-content: '';
content: var(--tw-content);
@media only screen and (max-width: 1032px) {
background-color: inherit;
}
}
}
}
.filterlabel {
position: relative;
display: inline-flex;
align-items: center;
svg {
margin-left: calc(var(--spacing) * 1.25);
}
}
}
.filterselected {
border-style: var(--tw-border-style);
border-width: 1px;
border-color: #999;
padding-top: 7px;
padding-right: 30px;
padding-bottom: calc(var(--spacing) * 2);
padding-left: 13px;
font-size: 12px;
color: var(--color-black);
@media (min-width: 1033px) {
width: 130px;
overflow: hidden;
border-style: var(--tw-border-style);
border-width: 0px;
padding-inline: calc(var(--spacing) * 0);
padding-top: calc(var(--spacing) * 0);
padding-bottom: 1.2px;
text-align: left;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
color: #bda880;
}
}
#other-filters .filter_parent.fp, #other-filters .filter_parent.ring_setting_fitler {
@media (max-width: 1032px) {
width: 100%;
.filterhead {
margin-top: 5px;
width: 100%;
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: rgba(127,131,132,0.5);
padding-top: calc(var(--spacing) * 2.5);
padding-bottom: 5px;
span {
border-style: var(--tw-border-style);
border-width: 0px;
padding: calc(var(--spacing) * 0);
}
}
.filterselected {
margin-left: 7px;
width: 100%;
border-style: var(--tw-border-style);
border-width: 0px;
padding: calc(var(--spacing) * 0);
text-align: left;
font-size: 14px;
color: #bda880;
}
}
}
.shape_filter.filtertitle {
.filterhead span {
padding: 4px 5px !important;
}
}
@media only screen and (max-width: 1032px) {
.toolbar-main {
align-self: center;
}
}
.custom-tooltip {
display: inline-block;
height: 17px;
width: 17px;
background-size: contain;
background: url(../images/icons/info-button.svg) no-repeat left 1px;
}
.filterhead .custom-tooltip {
display: none;
}
#tag-sortby.filtercontent {
right: calc(var(--spacing) * 0);
left: inherit;
min-width: 170px;
@media only screen and (max-width: 767px) {
position: absolute;
top: 30px;
border-width: 1px;
}
}
.filtercontent {
position: absolute;
top: 42px;
left: calc(var(--spacing) * 0);
z-index: 999;
width: 100%;
min-width: 475px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding-inline: calc(var(--spacing) * 0);
padding-block: calc(var(--spacing) * 2.5);
background-image: linear-gradient(#fff, #fff), var(--Gold_Vertical);
background-origin: border-box;
background-clip: padding-box, border-box;
@media (max-width: 1032px) {
position: relative;
top: calc(var(--spacing) * 0);
left: calc(var(--spacing) * 0);
min-width: 84vw;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-style: var(--tw-border-style);
border-width: 0px;
--tw-shadow: 0 4px 2px 0 var(--tw-shadow-color, rgba(0,0,0,0.2));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
ul {
li {
a {
display: block;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-white);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding: calc(var(--spacing) * 2.5);
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 12px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-black);
text-decoration-line: none;
img {
margin: auto;
max-width: 75%;
}
&:hover {
border-color: var(--color-black);
}
}
&.checked {
a {
border-color: var(--color-black);
}
}
}
}
}
@media (min-width: 1033px) {
#tag-ring_setting {
top: 45px;
}
}
#tag-ring_setting.filtercontent {
.am-swatch-image {
display: none;
}
}
.filtercontent ul.items {
margin: calc(var(--spacing) * 0);
display: flex;
&::-webkit-details-marker {
display: none;
}
list-style-type: none;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
padding: calc(var(--spacing) * 0);
> .item {
margin-bottom: 15px;
width: calc(1/4 * 100%);
padding-inline: calc(var(--spacing) * 2.5);
}
}
#tag-width {
padding: 10px;
}
#tag-width .items.am-filter-items-attr_allowed_width {
margin: calc(var(--spacing) * 0);
display: flex;
&::-webkit-details-marker {
display: none;
}
list-style-type: none;
flex-wrap: wrap;
justify-content: flex-start;
gap: calc(var(--spacing) * 2);
padding: calc(var(--spacing) * 0);
> .item {
width: auto;
> a {
display: inline-block;
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
padding-inline: calc(var(--spacing) * 4);
padding-block: calc(var(--spacing) * 1.5);
font-size: 13px;
text-decoration-line: none !important;
&:hover {
@media (hover: hover) {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
}
}
&:hover {
@media (hover: hover) {
color: var(--color-white);
}
}
&:hover {
span {
color: var(--color-white);
}
}
}
> a.selected {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
}
> input {
display: none;
}
}
}
.filter-options-item {
&.allowed_width, &.allowed_depth {
margin-inline: calc(var(--spacing) * 2.5);
margin-block: calc(var(--spacing) * 0);
display: block;
width: auto;
max-width: 100%;
--tw-outline-style: none !important;
outline-style: none !important;
@media only screen and (max-width: 767px) {
margin: calc(var(--spacing) * 0);
}
&.active {
.filter-options-content {
right: calc(var(--spacing) * 0);
margin: auto;
min-width: 450px;
padding: calc(var(--spacing) * 2.5);
@media only screen and (max-width: 767px) {
position: absolute !important;
}
@media only screen and (max-width: 767px) {
top: 50px !important;
}
@media only screen and (max-width: 767px) {
right: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 767px) {
left: inherit !important;
}
@media only screen and (max-width: 767px) {
margin: auto;
}
@media only screen and (max-width: 767px) {
margin-left: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 767px) {
min-width: 97vw;
}
@media only screen and (max-width: 767px) {
border-style: var(--tw-border-style);
border-width: 0px;
}
}
}
.filterhead {
margin-inline: auto;
max-width: 220px;
@media only screen and (max-width: 767px) {
margin-inline: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 767px) {
margin-top: 10px;
}
@media only screen and (max-width: 767px) {
margin-bottom: 9px;
}
@media only screen and (max-width: 767px) {
width: 100%;
}
@media only screen and (max-width: 767px) {
max-width: 100%;
}
@media only screen and (max-width: 767px) {
margin-top: 5px;
width: 100%;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-bottom-color: rgba(127,131,132,0.5);
padding-top: calc(var(--spacing) * 2.5);
padding-bottom: 5px;
.filterlabel {
padding: calc(var(--spacing) * 0);
}
}
span {
@media only screen and (max-width: 767px) {
border-style: var(--tw-border-style);
border-width: 0px;
padding: calc(var(--spacing) * 0);
}
&.filterselected {
margin-left: calc(var(--spacing) * 1.5);
width: 100%;
text-align: left;
color: #bda880;
}
}
}
.filter-options-content {
margin: calc(var(--spacing) * 0);
@media only screen and (max-width: 767px) {
padding: calc(var(--spacing) * 3);
}
ol {
margin-bottom: calc(var(--spacing) * 0);
display: flex;
&::-webkit-details-marker {
display: none;
}
list-style-type: none;
flex-wrap: wrap;
justify-content: flex-start;
gap: calc(var(--spacing) * 2.5);
padding: calc(var(--spacing) * 0);
text-align: left;
li {
padding-inline: calc(var(--spacing) * 0);
padding-block: 3px;
@media only screen and (max-width: 767px) {
margin-bottom: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 767px) {
width: 28.33%;
}
input {
&:focus {
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
&.form-check-input:checked {
border-color: var(--color-black);
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
}
}
}
}
}
}
&.allowed_width {
&.active {
.filter-options-content {
@media only screen and (max-width: 767px) {
position: absolute !important;
}
@media only screen and (max-width: 767px) {
top: 50px !important;
}
@media only screen and (max-width: 767px) {
right: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 767px) {
left: calc(var(--spacing) * 0) !important;
}
@media only screen and (max-width: 767px) {
margin: auto;
}
@media only screen and (max-width: 767px) {
margin-left: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 767px) {
min-width: 97vw;
}
@media only screen and (max-width: 767px) {
border-style: var(--tw-border-style);
border-width: 0px;
}
}
}
}
}
.custom-scroll {
@media (max-width: 1032px) {
display: flex;
max-height: 290px;
align-items: flex-start;
overflow-y: auto;
}
.am-swatch-options {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
}
}
.am-swatch-wrapper {
position: relative;
margin-inline: 5px !important;
margin-top: calc(var(--spacing) * 0) !important;
margin-bottom: calc(var(--spacing) * 2.5) !important;
width: 22.33%;
border-radius: 0.25rem;
@media (max-width: 767px) {
width: 29.33%;
}
a {
position: relative;
display: block;
width: 100%;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-white);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding-block: 7px;
padding-right: calc(var(--spacing) * 0);
padding-left: 28px;
text-align: left;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 12px;
color: var(--color-black);
text-decoration-line: none;
&:hover {
border-color: var(--color-black);
}
&::after {
position: absolute;
top: calc(var(--spacing) * 2.5);
left: calc(var(--spacing) * 1.5);
display: block;
height: calc(var(--spacing) * 3);
width: calc(var(--spacing) * 3);
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-black);
--tw-content: '';
content: var(--tw-content);
}
}
label:has(input[type="checkbox"]:checked) + a, label:has(input[type="radio"]:checked) + a, .amshopby-link-selected {
border-style: var(--tw-border-style) !important;
border-width: 2px !important;
border-color: var(--color-black) !important;
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
border-style: solid !important;
&::after {
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
}
}
.filtercontent.mobi-wedding-filter ul {
margin: calc(var(--spacing) * 0);
display: flex;
&::-webkit-details-marker {
display: none;
}
list-style-type: none;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
padding: calc(var(--spacing) * 0);
> .item {
margin-bottom: 15px;
width: calc(1/4 * 100%);
padding-inline: calc(var(--spacing) * 2.5);
@media (max-width: 767px) {
width: calc(1/3 * 100%);
}
> a {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--spacing) * 1.5);
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-white);
padding: calc(var(--spacing) * 2);
text-align: center;
font-size: 12px;
color: var(--color-black);
text-decoration-line: none;
&:hover {
border-color: var(--color-black);
}
}
.am-category-image {
height: auto;
width: 100%;
max-width: 70px;
border-radius: 0.25rem;
}
&.checked > a {
border-color: var(--color-black);
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
}
}
.stocks-in-listing {
font-family: var(--font-vietnam-regular);
font-weight: 400;
max-width: 88%;
margin: 0 auto;
font-size: 18px;
margin-top: 50px;
@media only screen and (max-width: 767px) {
font-size: 15px;
}
}
.swatch-label-view {
.am-swatch-options {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-start;
column-gap: calc(var(--spacing) * 2.5);
row-gap: calc(var(--spacing) * 5);
padding-inline: calc(var(--spacing) * 2.5) !important;
}
.am-swatch-wrapper {
margin-inline: calc(var(--spacing) * 0) !important;
margin-block: calc(var(--spacing) * 0) !important;
width: 22% !important;
> label.hidden, > label.hidden input {
display: none !important;
appearance: none !important;
-webkit-appearance: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
position: absolute !important;
pointer-events: none !important;
}
}
.am-swatch-link {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--spacing) * 1.5);
padding: calc(var(--spacing) * 0) !important;
font-size: 13px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-black);
@media only screen and (max-width: 767px) {
text-align: center;
}
&::after {
content: none;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 13px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
white-space: nowrap;
color: var(--color-black);
@media only screen and (max-width: 1032px) {
--tw-content: none;
content: none;
}
}
}
.am-swatch-image {
height: 45px !important;
width: 50px;
border-color: transparent !important;
background-size: contain !important;
}
.amshopby-link-selected .am-swatch-image {
box-shadow: none !important;
border-style: var(--tw-border-style);
border-width: 0px;
@media (width >= 64rem) {
border-color: #BC913D !important;
}
@media only screen and (max-width: 767px) {
border-style: var(--tw-border-style) !important;
border-width: 0px !important;
}
@media only screen and (max-width: 767px) {
box-shadow: none !important;
}
}
}
.reset-filter-temp a {
margin: auto;
display: flex;
width: 140px;
align-items: center;
justify-content: center;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
--tw-leading: 20.45px;
line-height: 20.45px;
color: var(--color-black);
text-decoration-line: underline;
&::before {
margin-right: calc(var(--spacing) * 1);
height: calc(var(--spacing) * 4);
width: calc(var(--spacing) * 4);
--tw-content: '';
content: var(--tw-content);
background: url(../images/icons/reset.svg) no-repeat left top;
background-size: contain;
}
@media (max-width: 767px) {
margin-inline: auto;
margin-block: calc(var(--spacing) * 3.5);
width: auto;
justify-content: flex-end;
font-size: 12px;
}
}
.more-filter-btn {
position: relative;
display: none;
text-align: center;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
&.hide {
display: none;
}
&::after {
margin-left: calc(var(--spacing) * 2.5);
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
--tw-content: '+';
content: var(--tw-content);
}
&.up::after {
--tw-content: '-';
content: var(--tw-content);
}
@media (max-width: 767px) {
display: block;
width: calc(1/2 * 100%);
font-size: 12px;
.btn-text {
text-decoration-line: underline;
}
}
}
.toolbar-main.grid_last {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--spacing) * 4);
@media (max-width: 767px) {
gap: calc(var(--spacing) * 3);
}
}
.new-arrivals-check {
display: flex;
align-items: center;
gap: calc(var(--spacing) * 1.5);
input[type="checkbox"] {
position: relative;
height: calc(var(--spacing) * 3.5);
width: calc(var(--spacing) * 3.5);
flex-shrink: 0;
cursor: pointer;
appearance: none;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: #999;
&:checked {
border-color: var(--color-black);
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
&::after {
content: "";
position: absolute;
inset: calc(var(--spacing) * 0);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
}
}
label {
cursor: pointer;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
white-space: nowrap;
color: var(--color-black);
}
}
@media (max-width: 767px) {
.catalog-options {
min-width: calc(var(--spacing) * 0);
}
.bookapp-listing {
gap: calc(var(--spacing) * 1.5);
margin-bottom: 5px;
padding: 10px 0 5px;
}
.bookapp-listing > li {
margin: calc(var(--spacing) * 0) !important;
min-width: calc(var(--spacing) * 0);
}
.bookapp-listing > li > a {
width: 100% !important;
padding-inline: calc(var(--spacing) * 1) !important;
font-size: 14px !important;
line-height: 18px;
}
}
.sortby-filter {
.filterhead {
margin-top: calc(var(--spacing) * 0);
> span {
padding: calc(var(--spacing) * 2.5) !important;
@media only screen and (max-width: 1032px) {
padding: calc(var(--spacing) * 0) !important;
}
svg {
margin-left: calc(var(--spacing) * 1.25) !important;
height: calc(var(--spacing) * 1.75);
width: calc(var(--spacing) * 2);
}
}
}
}
.product-item {
.normal-gallery {
background: #f4f2f2;
}
.parent-gallery-listing {
background: #f4f2f2;
.magic-gallery {
.MagicToolboxContainer {
.Magic360-container {
max-width: 99% !important;
canvas {
mix-blend-mode: darken;
}
}
}
}
}
.metal-thumb-container {
span {
height: 19px;
background: #DDD7D2;
&[title="White Gold"] {
background: #fff;
}
&[title="Yellow Gold"] {
background: #F7D592;
}
&[title="Rose Gold"] {
background: #F5C1A0;
}
}
}
.product-item-info {
.product-item-details {
font-size: 12px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-black);
.product-item-link {
display: block;
padding-inline: calc(var(--spacing) * 3);
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 16px;
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
--tw-tracking: calc(var(--tracking-tight) * -1);
letter-spacing: calc(var(--tracking-tight) * -1);
.f-name {
font-size: 14px;
}
}
.price-container {
font-size: 12px;
.price-wrapper, .pl_finance_from {
span.price {
font-size: 12px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
}
.special_hyva_price {
--tw-font-weight: var(--font-weight-semibold) !important;
font-weight: var(--font-weight-semibold) !important;
color: var(--color-black) !important;
span.price {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: var(--color-black);
}
}
}
}
}
}
.filters-fixed {
&.active {
transform: translate(0%, -63vh);
z-index: 9999;
}
}
@media only screen and (max-width: 1032px) {
.sort_filters .filter-content .filter-options .filtertitle.other-filters {
display: block;
overflow-y: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 63vh;
background: #fff;
box-shadow: 0 -5px 20px rgba(0, 0, 0, .2);
padding-top: 20px;
transform: translateY(100%);
transition: transform .3s ease;
}
}
.filter-gold {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
padding-inline: 15px;
padding-block: calc(var(--spacing) * 2.5);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
color: var(--color-white);
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(270deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100%);
}
}
.filter-gold-icon {
display: inline-flex;
align-items: center;
}
.filter-gold-chevron {
rotate: 180deg;
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 300ms;
transition-duration: 300ms;
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
}
.filters-fixed.active .filter-gold-chevron {
rotate: 0deg;
}
.filters-overlay {
position: fixed;
inset: calc(var(--spacing) * 0);
z-index: 998;
display: none;
background-color: color-mix(in srgb, #000 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
}
&.active {
display: block;
}
}
.amscroll-load-button {
margin-inline: auto;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 18px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
text-transform: capitalize;
display: block !important;
margin: 90px auto 20px !important;
padding: 12px 65px !important;
border: 1px solid transparent !important;
border-radius: 4px;
img.amscroll-loading-icon, svg {
display: none;
}
&:hover {
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
color: var(--color-black) !important;
.amscroll-text {
color: var(--color-black) !important;
}
}
.amscroll-text {
pointer-events: none;
color: var(--color-white) !important;
}
}
.hubpage-seo-block-bottom {
.container {
max-width: 1320px;
}
margin-top: 25px;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 14px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
p {
margin-bottom: 15px;
text-align: left;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
--tw-leading: 22px;
line-height: 22px;
color: var(--color-white);
}
ol,ul {
margin: 10px 0;
padding-left: 2rem;
list-style: auto;
li {
margin-bottom: 5px;
text-align: left;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
}
}
.catalog_faq {
.faq_title {
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 22px;
}
.form-panel {
margin-bottom: calc(var(--spacing) * 3);
.form-panel-title {
margin: calc(var(--spacing) * 0);
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0.5px;
border-color: #AAA;
padding-block: calc(var(--spacing) * 4);
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 16px;
--tw-leading: 20.45px;
line-height: 20.45px;
color: var(--color-white);
text-transform: none;
&::after {
content: "+";
float: right;
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
&.active {
color: #f7d592;
&::after {
content: "-";
}
}
}
.option-content {
max-height: calc(var(--spacing) * 0);
overflow: hidden;
padding-top: calc(var(--spacing) * 0);
padding-right: calc(var(--spacing) * 5);
padding-bottom: calc(var(--spacing) * 0);
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
--tw-leading: 20.45px;
line-height: 20.45px;
color: var(--color-white);
transition: max-height 0.35s ease-in-out, padding-block 0.35s ease-in-out;
p a {
color: var(--color-white);
text-decoration-line: underline;
}
}
.form-panel-title.active + .option-content {
max-height: 2000px;
padding-block: calc(var(--spacing) * 4);
}
}
}
.card-grey {
margin-inline: auto;
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 18px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
text-transform: capitalize;
@media only screen and (max-width: 767px) {
margin-block: calc(var(--spacing) * 7);
}
h6 {
margin-bottom: calc(var(--spacing) * 0.5);
font-size: 15px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
p, a {
text-align: left;
color: var(--color-white);
text-transform: lowercase;
text-decoration-line: underline;
}
.btn-line {
padding: 8px 20px;
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
font-size: 16px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
text-transform: capitalize;
text-decoration-line: none;
&:hover {
@media (hover: hover) {
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
}
}
}
}
}
.wedding-hub, .category-wedding-rings {
.wshow {
display: block;
}
.whide {
display: none;
}
}
.eng-hub, .category-engagement-rings {
.eshow {
display: block;
}
.enghide {
display: none;
}
}
.eternity-hub, .category-eternity-rings {
.etshow {
display: block;
}
.ethide {
display: none;
}
.filter-actions {
text-align: center;
}
}
.diamond-hub, .category-diamond-rings {
.drshow {
display: block;
}
.drhide {
display: none;
}
}
.earrings-hub, .category-earrings-rings {
.earshow {
display: block;
}
.earhide {
display: none;
}
.abs-cards {
.card-pro {
max-width: 600px;
}
}
}
.listing-block {
.container {
max-width: 1320px;
}
.listing-block__title {
margin-block: 10px;
margin-bottom: calc(var(--spacing) * 0);
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 32px;
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
color: #5d5d5d;
@media only screen and (max-width: 767px) {
margin-block: 5px;
}
@media only screen and (max-width: 767px) {
font-size: 28px;
}
}
.bespoke_title {
margin-bottom: calc(var(--spacing) * 6);
font-family: var(--font-dance);
font-weight: 400;
font-family: 'dancing_scriptregular';
font-size: var(--text-8xl);
line-height: var(--tw-leading, var(--text-8xl--line-height));
@media only screen and (max-width: 767px) {
margin-bottom: 5px;
}
@media only screen and (max-width: 767px) {
font-size: 65px;
}
@media only screen and (max-width: 767px) {
--tw-leading: 70px;
line-height: 70px;
}
@media only screen and (max-width: 1358px) and (min-width: 960px) {
font-size: var(--text-7xl);
line-height: var(--tw-leading, var(--text-7xl--line-height));
}
@media only screen and (min-width: 1500px) {
font-size: var(--text-8xl);
line-height: var(--tw-leading, var(--text-8xl--line-height));
--tw-leading: calc(var(--spacing) * 28);
line-height: calc(var(--spacing) * 28);
}
}
p {
font-size: 16px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: #636363;
a.btn-mist, a.btn-line {
display: inline-block;
margin-top: 20px;
min-width: 280px;
text-decoration: none;
@media only screen and (max-width: 1032px) {
margin-top: calc(var(--spacing) * 1.5);
}
}
a {
color: #636363;
text-decoration: underline;
}
}
p.listing-block__pera {
margin-bottom: calc(var(--spacing) * 3);
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
color: #B78F44;
}
&.home-reviews {
.listing-block__title {
padding-top: calc(var(--spacing) * 5);
}
}
&.hub-care {
.btn-line {
@media only screen and (max-width: 1032px) {
width: 80%;
}
}
}
}
.dh-sort-loader .dh-sort-loader-spinner {
position: fixed;
top: calc(1/2 * 100%);
left: calc(1/2 * 100%);
height: 90px;
width: 90px;
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
border-radius: var(--radius-md);
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
background-position: center;
background-repeat: no-repeat;
opacity: 0.65;
z-index: 9999;
background-size: 65%;
}
body.categorypath-quick-delivery, body.categorypath-schnelle-lieferung, body.categorypath-ausverkauf, body.categorypath-clearance {
.static-banner {
.category-image {
@media only screen and (min-width: 1033px) {
height: 400px;
background-size: inherit !important;
}
}
}
.category-hero {
@media only screen and (min-width: 1033px) {
top: 68px;
left: 302px;
transform: none;
width: auto;
}
> div {
@media only screen and (min-width: 1033px) {
margin-inline: calc(var(--spacing) * 0);
max-width: 451px;
text-align: left;
}
}
.trust_block {
display: none;
}
h1 {
margin-top: calc(var(--spacing) * 5);
margin-bottom: calc(var(--spacing) * 2.5);
font-family: var(--font-dance);
font-weight: 400;
font-family: 'dancing_scriptregular';
font-size: 50px;
--tw-leading: 70.03px;
line-height: 70.03px;
color: var(--color-white);
text-transform: none;
&:after {
content: inherit;
}
@media only screen and (min-width: 1033px) {
margin-bottom: 25px;
font-size: 73px;
color: var(--color-black);
}
}
h2 {
margin-bottom: 14px;
font-family: var(--font-barlow);
font-weight: 400;
font-family: 'barlow_condensedregular';
font-size: 22px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-white);
text-transform: uppercase;
@media only screen and (min-width: 1033px) {
font-size: 30px;
color: var(--color-black);
}
}
.category-description {
.short-text p, .full-text p {
color: var(--color-black);
@media only screen and (min-width: 1033px) {
color: var(--color-black) !important;
}
}
}
}
.ready-filter-box {
background: url('../images/dh-waves.jpg') 0 0 / 11px 11px repeat, linear-gradient(180deg, #323232 0%, #141414 100%), #d3d3d3;
background-size: contain;
@media only screen and (max-width: 1032px) {
margin-top: calc(var(--spacing) * 5);
display: block;
padding: 24px;
}
h3 {
@media only screen and (max-width: 1032px) {
margin-bottom: 0;
margin-top: 10px;
font-size: 14px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
&.accordion-title {
&:after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-right: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
vertical-align: middle;
transform: rotate(45deg);
transition: transform 0.2s ease-in-out;
}
&.active:after {
transform: rotate(-135deg);
}
}
}
}
&::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: 4px;
background: linear-gradient(#000, #2a2a2a) padding-box, var(--Gold_Vertical) border-box;
opacity: .95;
}
> * {
position: relative;
z-index: 2;
}
.filter-tags {
button {
min-height: calc(var(--spacing) * 7);
border-radius: 4px;
background-color: #434141;
padding-right: calc(var(--spacing) * 3.5);
padding-left: calc(var(--spacing) * 3.5);
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 14px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-white);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 300ms;
transition-duration: 300ms;
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
&:hover {
@media (hover: hover) {
background-color: #d9cbb0;
}
}
&:hover {
@media (hover: hover) {
color: var(--color-black);
}
}
&.active {
background-color: #d9cbb0;
color: var(--color-black);
}
}
@media only screen and (max-width: 1032px) {
padding-bottom: 15px;
}
}
.stores-column {
border-left: 1px solid rgba(255, 255, 255, .14);
padding-left: 38px;
@media only screen and (max-width: 1032px) {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
padding-left: 0;
padding-top: 5px;
margin-top: 0;
}
}
.budget-column {
text-align: left;
border-left: 1px solid rgba(255, 255, 255, .14);
padding-left: 38px;
@media only screen and (max-width: 1032px) {
border-top: 1px solid rgba(255, 255, 255, .14);
padding-top: 5px;
margin-top: 0;
border-left: 0;
padding-left: 0;
}
.range-wrapper {
margin-bottom: 38px;
padding-top: 30px;
@media only screen and (max-width: 1032px) {
margin-bottom: 0;
margin-top: 18px;
}
.range-slider {
position: relative;
height: 34px;
margin-bottom: 16px;
}
}
.dh-dual-range__track {
height: 4px;
border: 1px solid #f8efce;
background: #07182a;
margin-top: 20px;
margin-bottom: 25px;
position: relative;
width: 100%;
border-radius: 8px;
margin-right: auto;
}
.dh-dual-range__fill {
position: absolute;
height: 4px;
background: #f8efce;
}
.dh-dual-range__input {
&::-webkit-slider-thumb {
width: 12px;
height: 36px;
border-radius: 0;
background: #d4b273;
border: 2px solid #f3dfb0;
box-shadow: none;
}
&::-moz-range-thumb {
width: 12px;
height: 36px;
border-radius: 0;
background: #d4b273;
border: 2px solid #f3dfb0;
box-shadow: none;
}
}
.range-values {
height: 0;
span {
position: absolute;
top: -41px;
transform: translateX(-50%);
min-width: 48px;
height: 34px;
background: #2b2b2b;
border: 1px solid #c5a76d;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
}
.range-labels {
display: flex;
justify-content: space-between;
padding: 0 0 8px;
font-size: 16px;
color: #fff;
span {
color: #d7d7d7;
font-size: 12px;
white-space: nowrap;
}
}
.search-btn {
margin-top: 15px;
display: inline-flex;
height: 56px;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 14px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-white);
background-image: linear-gradient(#303030, #111);
border: 1px solid #c5a76d;
}
}
}
#other-filters {
position: unset;
height: auto;
box-shadow: unset;
transform: unset;
transition: transform .3s ease;
display: block;
}
}
@layer utilities {
.am-filter-items-ring_setting .am-swatch-wrapper a {
padding: 5px 20px !important;
border: 1px solid transparent !important;
box-shadow: none !important;
}
}
.wedding-rings-grid {
.btns-row {
display: flex;
justify-content: flex-end;
.btn-next {
display: inline-block;
position: relative;
width: 25px;
height: 25px;
background: #000;
border: none;
border-radius: 3px;
&:before {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
top: 7px;
left: 6px;
}
&:focus {
outline: none;
}
&:disabled {
opacity: 0.8;
}
}
.btn-prev {
display: inline-block;
position: relative;
width: 25px;
height: 25px;
background: black;
border: none;
margin-right: 10px;
border-radius: 3px;
&:before {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
top: 7px;
left: 9px;
}
&:disabled {
opacity: 0.8;
}
&:focus {
outline: none;
}
}
}
.wedding-grid {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
display: flex;
border: 1px solid #000;
margin-bottom: 2.5rem;
.btn.btn-sm {
border: 1px solid #adb5bd;
width: 95%;
margin: auto;
padding: 0.1rem;
text-transform: uppercase;
&:focus {
box-shadow: none;
outline: none;
}
}
.btn.btn-sm.select {
background: Black;
color: #FFF;
}
.owl-dots {
position: absolute;
top: -32px;
right: 70px;
margin-top: 0px !important;
.owl-dot {
&:focus {
outline: none;
}
span {
&:hover {
background: black;
}
}
}
.owl-dot.active {
span {
background: black;
}
}
}
img {
margin: auto;
width: 110px;
margin-bottom: 5px;
}
.fixed-column {
width: 10%;
}
.scroll-column {
display: flex;
flex-wrap: nowrap;
width: 90%;
a {
text-decoration: none;
color: black;
transition: color 0.5s;
&:hover {
color: #5f5f5f;
}
}
.column-content {
text-align: center;
margin-bottom: 0 !important;
}
.columns {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-wrap: nowrap;
border-left: 1px solid #000;
gap: 0;
}
}
.column-content {
height: 200px;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #fff;
.product-image {
width: 100%;
img {
margin: auto;
}
}
&:not(:last-child) {
border-bottom: 1px solid #000;
}
}
.column-head {
height: 45px;
border-bottom: 1px solid #000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
}
}
.wedding-rings-grid {
.wedding-grid {
font-family: var(--font-vietnam);
font-weight: 400;
display: flex;
border: 1px solid #999;
margin-bottom: 2.5rem;
font-size: 14px;
.fixed-column {
width: 10%;
@media only screen and (max-width: 767px) {
width: 22%;
}
.column-head {
padding-top: 2px;
font-size: 12px;
position: relative;
justify-content: flex-start;
padding-left: 15px;
@media only screen and (max-width: 767px) {
padding-left: 1px;
font-size: 10px;
}
&::before {
content: "Width";
position: absolute;
top: 0;
width: 50%;
text-align: center;
background: #eee;
height: 100%;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.column-head {
height: 45px;
border-bottom: 1px solid #999;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
@media only screen and (max-width: 767px) {
font-size: 10px;
}
}
.column-content {
height: 200px;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #fff;
position: relative;
@media only screen and (max-width: 767px) {
padding: 5px;
font-size: 12px;
}
&:not(:last-child) {
border-bottom: 1px solid #999;
}
.product-image {
width: 100%;
}
.actions-secondary .towishlist {
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 50;
span.wishlist-icon {
width: 100%;
height: 100%;
background-image: url(../images/wishlist-icon-black.svg);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
transition: .5s all;
@media only screen and (max-width: 767px) {
display: none;
}
}
&.active {
span.wishlist-icon {
background-image: url(../images/wishlist_black.svg);
}
}
}
}
.scroll-column {
display: flex;
flex-wrap: nowrap;
width: 90%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
@media only screen and (max-width: 767px) {
width: 78%;
}
.column-head {
background: #eee;
}
.columns {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
flex-wrap: nowrap;
width: 160px;
border-left: 1px solid #999;
}
a {
text-decoration: none;
color: #000;
transition: color .5s;
text-align: center;
@media only screen and (max-width: 767px) {
font-size: 11px;
}
}
}
.owl-carousel .owl-item img {
width: 110px;
margin: auto;
}
}
.btns-row {
display: flex;
justify-content: flex-end;
.btn-prev {
display: inline-block;
position: relative;
width: 25px;
height: 25px;
background: #000;
border: none;
margin-right: 10px;
border-radius: 3px;
&::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
top: 7px;
left: 9px;
}
}
.btn-next {
display: inline-block;
position: relative;
width: 25px;
height: 25px;
background: #000;
border: none;
border-radius: 3px;
&::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
top: 7px;
left: 6px;
}
}
}
}
.homline {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
margin-top: 15px;
margin-bottom: 30px;
@media only screen and (max-width: 767px) {
margin-top: 0;
}
.line12 {
border: 0.2px solid #000;
width: 130px;
display: inline-block;
margin: 0;
line-height: 0px;
@media only screen and (max-width: 767px) {
width: 100px;
}
}
img {
width: 25px;
}
}
.spotlight-section {
padding: 40px 0 10px;
@media only screen and (max-width: 767px) {
padding: 20px 0 0;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
img {
width: 100%;
display: block;
}
.spotlight-top {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 18px;
align-items: flex-start;
margin-bottom: 55px;
@media (max-width: 991px) {
grid-template-columns: 1fr;
display: flex;
flex-direction: column-reverse;
margin-bottom: 0;
}
}
.spotlight-main-image {
height: 100%;
img, video {
width: 100%;
min-height: 100%;
object-fit: cover;
object-position: center;
}
@media only screen and (max-width: 767px) {
img, video {
width: 100%;
}
}
}
.spotlight-content {
display: flex;
flex-direction: column;
height: 100%;
}
.spotlight-title {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
font-size: 16px;
margin-bottom: 12px;
color: #000;
}
.spotlight-text {
padding-left: 8px;
margin-bottom: 18px;
@media (max-width: 991px) {
padding-left: 0;
}
h2 {
font-size: 38px;
line-height: 1.1;
margin-bottom: 18px;
color: #222;
font-family: var(--font-baskerville);
font-weight: 400;
@media only screen and (max-width: 767px) {
font-size: 16px;
margin-bottom: 12px;
line-height: 22.2px;
}
}
h4 {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
font-size: 16px;
margin-bottom: 12px;
color: #000;
}
p {
max-width: 430px;
text-align: left;
b {
font-family: var(--font-vietnam-regular);
font-weight: 400;
}
}
.spotlight-time {
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
display: block;
font-size: 14px;
color: #BB903E;
margin-bottom: 6px;
}
strong {
display: block;
font-size: 16px;
font-weight: 600;
color: #000;
margin-bottom: 18px;
}
}
.spotlight-btns {
display: flex;
flex-wrap: wrap;
gap: 10px;
a {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
&:hover {
@media (hover: hover) {
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
}
}
}
min-width: 120px;
display: block;
text-align: center;
padding: 10px;
border-radius: 8px;
color: #000;
margin-top: 25px;
@media only screen and (max-width: 767px) {
margin-top: 10px;
}
}
}
.spotlight-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: auto;
@media only screen and (max-width: 767px) {
grid-template-columns: repeat(2, 1fr);
display: none;
}
.gallery-item {
overflow: hidden;
min-height: 350px;
@media only screen and (max-width: 767px) {
&:last-of-type {
grid-column: 1 / -1;
}
}
img {
aspect-ratio: 1 / 1.2;
object-fit: cover;
transition: 0.4s ease;
height: 100%;
}
&:hover img {
transform: scale(1.05);
}
}
}
}
section.glassy-block {
text-align: center;
.col-lg-4 {
.glassy-content {
background: rgba(255, 255, 255, 0.80);
backdrop-filter: blur(6px);
padding: 8px 20px 25px;
}
}
p {
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
line-height: 22px;
font-size: 14px;
}
a {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
&:hover {
@media (hover: hover) {
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
}
}
}
width: 120px;
display: block;
text-align: center;
padding: 10px;
border-radius: 8px;
color: #000;
margin: auto;
margin-top: 18px;
@media only screen and (max-width: 767px) {
margin-top: 10px;
}
}
h4 {
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 24px;
margin: 18px 0 16px;
text-align: center;
}
.text-gold {
color: #CB9836 !important;
margin-bottom: 13px;
display: block;
font-size: 14px;
}
}
.glassy-img {
position: relative;
min-height: 510px;
img, video {
max-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: center;
}
@media only screen and (max-width: 767px) {
img, video {
width: 100%;
min-height: 590px;
}
video {
width: 100%;
min-height: 590px;
}
}
.glassy-content {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, #FFF 100%);
width: 100%;
position: absolute;
left: 0;
bottom: 0px;
padding: 24px 38px;
@media only screen and (max-width: 767px) {
padding: 22px 24px 12px;
}
h2 {
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 28px;
line-height: 1.5;
text-transform: capitalize;
margin-bottom: 4px;
}
}
}
@font-face {
font-family: 'magic360';
font-weight: 400;
font-style: normal;
src: url('../../../../../frontend/Hyva/default/en_US/MagicToolbox_Magic360/css/fonts/magic360.eot?#iefix') format('embedded-opentype');
}
@font-face {
font-family: 'magic360';
src: url('data:application/octet-stream;base64,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') format('woff'),url('data:application/octet-stream;base64,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') format('truetype');
}
.Magic360,.Magic360-container {
box-sizing: content-box !important;
}
.Magic360-container .Magic360,.Magic360-fullscreen .Magic360 {
border: 0 !important;
}
.Magic360 {
padding: 0 !important;
outline: 0 !important;
display: inline-block;
font-size: 0 !important;
line-height: 100% !important;
max-width: 100%;
}
.Magic360-container {
text-align: center !important;
max-width: 100%;
position: relative;
z-index: 1;
}
.Magic360-container .Magic360 {
display: inline-block !important;
vertical-align: middle;
touch-action: none;
}
.Magic360-container .Magic360.m360-spin-x {
touch-action: pan-y;
}
.Magic360-container .Magic360.m360-spin-y {
touch-action: pan-x;
}
.Magic360.desktop.zoom-in {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.Magic360 img {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
height: auto;
}
.Magic360>img {
width: 100%;
}
button.m360-icon {
color: #b4b4b4 !important;
font: normal 900 30px/1 'magic360' !important;
cursor: pointer;
z-index: 1000000 !important;
background-color: transparent !important;
border: 1px solid rgba(180,180,180,0) !important;
border-radius: 0 !important;
box-shadow: none !important;
position: absolute !important;
text-transform: none !important;
text-align: center;
speak: none;
width: 44px !important;
height: 44px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
outline: 0 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button.m360-icon:hover,.mobile-magic button.m360-icon:active {
color: #555 !important;
color: rgba(49,51,61,.76) !important;
}
button.m360-icon:before {
display: inline !important;
position: static !important;
color: inherit !important;
font: inherit !important;
-webkit-font-smoothing: inherit !important;
-moz-osx-font-smoothing: inherit !important;
}
button.m360-icon.m360-icon-fullscreen-open,button.m360-icon.m360-icon-fullscreen-close {
top: 0 !important;
right: 0 !important;
}
button.m360-icon.m360-icon-fullscreen-close {
width: 60px !important;
height: 60px !important;
}
button.m360-icon.m360-icon-fullscreen-open:before {
content: '\e800';
}
button.m360-icon.m360-icon-fullscreen-close:before {
content: '\e801';
}
.lt-ie9-magic button.m360-icon {
border: 0;
filter: alpha(opacity=75);
}
.lt-ie9-magic button.m360-icon:hover {
filter: alpha(opacity=100);
}
.Magic360-fullscreen:-webkit-full-screen {
touch-action: none;
}
.lt-ie7-magic .Magic360-container .Magic360 {
width: auto !important;
}
.Magic360-fullscreen {
background: #fff;
z-index: 2147483640 !important;
}
.Magic360-fullscreen:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
}
.Magic360-fullscreen:-ms-fullscreen {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
}
.Magic360-fullscreen:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Magic360-fullscreen .Magic360 {
display: inline-block !important;
vertical-align: middle;
}
.Magic360-message {
background-color: #fff;
background-image: none;
border: 1px solid #aaa;
display: block;
font-size: 10px;
color: #000;
overflow: hidden;
padding: 6px;
position: absolute;
text-align: center;
top: 50%;
width: 33%;
left: 33%;
z-index: 100;
box-shadow: 0 0 10px #000;
border-collapse: separate;
border-radius: 15px;
}
.Magic360-fullscreen .Magic360-message {
font-size: 18px;
background-color: #31333d;
background-color: rgba(49,51,61,.76);
border-color: #ccc;
color: #fff;
top: 15px;
}
.m360-hint-message,.m360-loader {
background: rgba(49,51,61,.76);
color: #fff;
font: normal 14px/1.2em 'Lucida Grande','Lucida Sans Unicode',Verdana,'Helvetica Neue',Arial,Helvetica,sans-serif;
text-decoration: none;
}
.m360-hint,.m360-loader {
direction: ltr;
text-align: center;
display: inline-block;
margin: 0;
position: absolute;
z-index: 1000;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.m360-hint {
bottom: 8px;
left: 0;
right: 0;
padding: 0 10%;
-webkit-transition: opacity .25s ease,z-index .25s ease;
transition: opacity .25s ease,z-index .25s ease;
}
.m360-hint-message {
display: inline-block;
border-radius: 2em;
padding: .3em 1.5em;
font-size: 14px;
line-height: 1.5;
}
.m360-hint-message:before {
content: '';
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAqCAYAAAB4Ip8uAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGOTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxQjhDODMzNkM3MEIxMUUzQkMzNEJCQzI2OUFGMUNCQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxQjhDODMzNUM3MEIxMUUzQkMzNEJCQzI2OUFGMUNCQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIvPiA8L3JkZjpEZXNjcmlwdGlv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');
background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAqCAYAAAB4Ip8uAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGOTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxQjhDODMzNkM3MEIxMUUzQkMzNEJCQzI2OUFGMUNCQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxQjhDODMzNUM3MEIxMUUzQkMzNEJCQzI2OUFGMUNCQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIvPiA8L3JkZjpEZXNjcmlwdGlv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') 1x,url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAABUCAYAAAC82LpqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGOTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNTQ2NDdEMUM3MEIxMUUzQjI2QkI2NTZEOUZDMjc2OSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNTQ2NDdEMEM3MEIxMUUzQjI2QkI2NTZEOUZDMjc2OSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTA1M0E3QjA4QzdFMzExOTUxQjhCNzcwMDhDQjMwOCIvPiA8L3JkZjpEZXNjcmlwdGlv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') 2x);
width: 40px;
height: 42px;
display: inline-block;
speak: none;
text-align: center;
vertical-align: middle;
margin-right: 4px;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.m360-spin-x .m360-hint-message:before {
background-position: -40px;
}
.m360-spin-y .m360-hint-message:before {
background-position: -80px;
}
.m360-loader {
border-radius: 100%;
font-size: 0;
opacity: 0;
padding: 0;
width: 50px;
height: 50px;
left: 8px;
bottom: 8px;
}
.m360-loader:after {
content: attr(data-progress);
font-size: 12px;
line-height: 1;
display: block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.m360-loader:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 44px;
height: 44px;
margin: auto;
text-indent: -9999em;
border-radius: 50%;
border: 2px solid rgba(255,255,255,1);
border-top-color: transparent;
box-sizing: border-box;
}
.m360-loader.shown {
opacity: 1;
z-index: 1000;
-webkit-transition: opacity 0s;
transition: opacity 0s;
}
.m360-loader.shown:before {
-webkit-animation: spin-loading 2s infinite linear;
animation: spin-loading 2s infinite linear;
}
@-webkit-keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.lt-ie10-magic .m360-loader {
border-radius: 2em;
font-size: 14px;
padding: .8em 1.2em;
width: auto;
height: auto;
}
.lt-ie10-magic .m360-loader:before {
display: none;
}
.lt-ie10-magic .m360-loader:after {
content: 'Loading... ' attr(data-progress);
text-align: center;
}
.lt-ie9-magic .m360-hint-message,.lt-ie9-magic .m360-loader.shown {
background: 0 0 !important;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c31333D',EndColorStr='#7c31333D');
}
.lt-ie9-magic .m360-hint-hidden {
filter: alpha(opacity=0);
}
.lt-ie9-magic .m360-loader {
filter: alpha(opacity=0);
right: 0;
left: 0;
width: 96px;
margin: auto;
}
.lt-ie9-magic .Magic360-fullscreen .m360-loader {
left: 8px;
right: auto;
}
.Magic360-container .m360-magnifier,.Magic360-fullscreen .m360-magnifier {
box-shadow: 0 0 10px #ccc;
border-collapse: separate;
background-color: #fff;
cursor: none;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle,#fff,#000);
}
.lt-ie9-magic .m360-magnifier {
border: 3px ridge #e7e7e7;
}
.lt-ie9-magic .m360-magnifier.m360-magnifier-inner {
border: none !important;
}
.Magic360-container.desktop .m360-magnifier.m360-magnifier-inner,.Magic360-fullscreen.desktop .m360-magnifier.m360-magnifier-inner {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
box-shadow: none;
}
.m360-magnifier img {
position: absolute !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
min-height: 0 !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
outline: 0 !important;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
.m360-magnifier-loader-holder {
background-color: transparent;
cursor: default;
position: absolute;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.ie9-magic .m360-magnifier-loader-holder,.lt-ie9-magic .m360-magnifier-loader-holder {
filter: alpha(opacity=60);
}
.m360-magnifier-loader-holder .m360-loader {
opacity: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transform: scale(.8);
transform: scale(.8);
}
.m360-magnifier-loader-holder .m360-loader:before {
-webkit-animation: spin-loading 2s infinite linear;
animation: spin-loading 2s infinite linear;
}
div.MagicToolboxContainer {
text-align: center;
}
.Magic360,.Magic360-container {
border: none !important;
}
div.MagicToolboxContainer>a {
margin: 0 auto;
}
div.MagicToolboxMessage {
text-align: center;
}
div.MagicToolboxContainer.selectorsLeft,div.MagicToolboxContainer.selectorsRight {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer {
min-height: 300px;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer,div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer {
flex-grow: 1;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer a,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer a {
margin: 0 0 10px;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer {
width: auto;
padding-left: 10px;
}
div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer {
width: auto;
padding-right: 10px;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer {
position: relative;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
@media only screen and (min-width:768px) {
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll {
height: 100%;
flex: 1;
}
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll a,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll a {
margin: 0;
}
@media only screen and (max-width:767px) {
div.MagicToolboxContainer.selectorsLeft,div.MagicToolboxContainer.selectorsRight {
flex-direction: column;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer {
order: 2;
width: 100% !important;
margin-bottom: 10px;
min-height: 0px;
flex: auto;
flex-basis: auto !important;
display: block !important;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer a,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer a {
margin: 10px 5px;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer,div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer {
order: 1;
padding: 0;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer:after,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer:after {
content: none;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll {
height: auto;
}
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll,div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll {
margin: 10px 0 0;
}
}
div.MagicToolboxContainer.placeholder {
width: auto !important;
height: auto !important;
}
div.MagicToolboxContainer.placeholder span.align-helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
div.MagicToolboxContainer.placeholder img {
display: inline-block;
vertical-align: middle;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
.fotorama__stage__shaft:focus .fotorama__stage__frame.fotorama__active.magic360-stage-frame:after {
display: none;
}
.m360-icon.m360-icon-fullscreen-open {
z-index: 100000;
}
.fotorama__html .fotorama__select {
height: 100%;
width: 100%;
position: relative;
}
.fotorama__html .fotorama__select .MagicToolboxContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.products-list .product-items .MagicToolboxContainer {
padding: 0 30px 30px 0;
display: table-cell;
}
.gift_video {
margin-bottom: 30px;
video {
max-height: 500px;
object-position: center;
object-fit: cover;
@media (min-width: 1100px) and (max-width: 1445px) {
max-height: 500px;
}
@media only screen and (max-width: 1024px) {
height: 400px;
max-height: inherit;
}
}
}
.luxury_packaging {
.luxury_box {
position: relative;
background: #DCCFB2;
width: 100%;
height: 100%;
display: flex;
&::before {
content: "";
position: absolute;
inset: 0;
background: url('../images/lux_bg.png') center/cover no-repeat;
opacity: 0.35;
pointer-events: none;
mix-blend-mode: soft-light;
}
.luxury_box__info {
background: #FFFFFFCC;
backdrop-filter: blur(12px);
width: 400px;
margin: auto;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 4px;
.luxury__box__title {
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 24px;
text-transform: uppercase;
color: #000;
text-align: center;
margin-bottom: 10px;
}
.luxury_box__button {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 180deg, #F7D592 4%, #BC913D 14.5%, #FFF7E7 23%, #FFDFA2 35.5%, #F7D592 38%, #CB9836 52.5%, #FFDFA2 59.5%, #BB903E 69.5%, #F8D798 86.5%, #A27724 100% ) border-box;
padding: 10px 40px;
}
}
}
}
body.category-gifts {
.category-hero {
> .container {
position: absolute;
bottom: 30px;
max-width: 450px;
background-color: rgba(255, 255, 255, .8);
backdrop-filter: blur(12px);
right: 0;
left: 0;
border-radius: 4px;
padding: 12px !important;
@media only screen and (max-width: 767px) {
bottom: 0;
border-radius: 0;
}
.gold-line {
&:after {
bottom: -3px;
}
}
}
}
}
body.category-gifts, body[class*="categorypath-gifts-"] {
.category-view {
.nav-bottom-bar {
display: none;
}
}
.category-hero .category-image {
@media only screen and (max-width: 1024px) {
margin-bottom: 0;
}
}
.sort_filters {
.filter-content {
.filter-wraps {
display: block;
max-width: 1320px;
.gift-finder-filter {
.gift-finder-columns {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr .95fr;
gap: 25px;
padding: 42px 50px 38px 20px;
border-radius: 4px;
overflow: hidden;
background: url(../images/home/dh-waves.jpg) 0% 0% / 11px 11px repeat, linear-gradient(180deg, #323232 0%, #141414 100%), #d3d3d3;
background-size: contain;
width: 100%;
margin: auto;
@media (max-width: 1024px) {
grid-template-columns: 1fr;
gap: 35px;
}
@media only screen and (max-width: 767px) {
display: block;
padding: 5px 15px 20px;
}
&::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid var(--goldstroke, #f7d592);
border: 1px solid transparent;
border-radius: 4px;
background: linear-gradient(#000, #2a2a2a) padding-box, var(--Gold_Vertical) border-box;
opacity: .95;
}
> * {
position: relative;
z-index: 2;
}
}
h3 {
font-family: var(--font-vietnam);
font-size: 16px;
color: #fff;
font-weight: 500;
margin-bottom: 30px;
text-align: left;
@media only screen and (max-width: 767px) {
margin-bottom: 0;
margin-top: 10px;
font-size: 14px;
padding-top: 10px;
padding-bottom: 15px;
display: flex;
justify-content: space-between;
&.accordion-title:after {
content: inherit;
display: inline-block;
width: 10px;
height: 10px;
border-right: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
vertical-align: middle;
transform: rotate(45deg);
}
&.accordion-title.active {
&:after {
transform: rotate(-135deg);
}
}
}
}
.filter-tags {
display: flex;
justify-content: space-evenly;
@media only screen and (max-width: 767px) {
padding-bottom: 15px;
flex-direction: column;
}
}
.recipient-col {
text-align: left;
@media only screen and (min-width: 1033px) {
border-right: 1px solid rgba(255, 255, 255, 0.14);
padding-right: 0px;
}
@media (max-width: 1024px) {
border-left: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
padding-right: 0;
padding-top: 5px;
margin-top: 0px;
}
.recipient-group {
display: inline-block;
margin-right: 20px;
width: 50%;
@media only screen and (max-width: 767px) {
width: 100%;
}
.recipient-group-heading-wrap {
input {
display: none;
}
a {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 15px;
color: #fff;
font-weight: 500;
margin-bottom: 10px;
text-align: left;
background: none;
padding-left: 0;
@media only screen and (max-width: 767px) {
font-size: 13px;
}
&:hover {
background: none;
color: #fff;
span {
color: var(--color-white);
}
}
}
}
a {
display: block;
border-radius: 4px;
background: #434141;
color: #fff;
min-height: 30px;
padding: 6px 14px 0;
font-size: 13px;
cursor: pointer;
transition: 0.3s ease;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
@media (max-width: 767px) {
font-size: 12px;
min-height: 25px;
padding: 3px 12px;
}
span {
color: var(--color-white);
}
&:hover {
color: #000;
border-radius: 4px;
background: linear-gradient(180deg, #F4E7CE 0%, #E7D4B1 100%);
backdrop-filter: blur(6px);
span {
color: var(--color-black);
}
}
&.active {
background: #D9CBB0;
color: #000000;
span {
color: var(--color-black);
}
}
}
}
}
.type-col {
@media (max-width: 1024px) {
border-left: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
padding-left: 0;
padding-top: 5px;
margin-top: 0px;
}
}
.gift-filter-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
@media only screen and (max-width: 767px) {
padding-bottom: 15px;
}
input {
display: none;
}
a {
display: block;
border-radius: 4px;
background: #434141;
color: #fff;
min-height: 30px;
padding: 6px 14px 0;
font-size: 14px;
cursor: pointer;
transition: 0.3s ease;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
span {
color: var(--color-white);
}
@media (max-width: 767px) {
font-size: 12px;
min-height: 25px;
padding: 3px 12px;
}
&:hover {
color: #000;
border-radius: 4px;
background: linear-gradient(180deg, #F4E7CE 0%, #E7D4B1 100%);
backdrop-filter: blur(6px);
span {
color: var(--color-black);
}
}
&.active {
background: #D9CBB0;
color: #000000;
span {
color: var(--color-black);
}
}
}
.checked {
a {
background: #D9CBB0;
color: #000000;
span {
color: var(--color-black);
}
}
}
}
}
}
}
}
.budget-column {
text-align: left;
border-left: 1px solid rgba(255, 255, 255, .14);
padding-left: 38px;
@media only screen and (max-width: 1032px) {
border-top: 1px solid rgba(255, 255, 255, .14);
padding-top: 5px;
margin-top: 0;
border-left: 0;
padding-left: 0;
}
.range-wrapper {
margin-bottom: 38px;
padding-top: 10px;
@media only screen and (max-width: 1032px) {
margin-bottom: 0;
margin-top: 18px;
}
.range-slider {
position: relative;
height: 34px;
margin-bottom: 16px;
}
}
.dh-dual-range {
position: relative;
}
.dh-dual-range__track {
height: 4px;
border: 1px solid #f8efce;
background: #07182a;
margin-top: 40px;
margin-bottom: 25px;
position: relative;
width: 100%;
border-radius: 8px;
margin-right: auto;
}
.dh-dual-range__fill {
position: absolute;
height: 4px;
background: #f8efce;
}
.dh-dual-range__input {
position: absolute !important;
top: 10px !important;
width: 100% !important;
pointer-events: none !important;
-webkit-appearance: none !important;
appearance: none !important;
height: 4px !important;
background: transparent !important;
outline: none !important;
}
.dh-dual-range__input::-webkit-slider-thumb {
-webkit-appearance: none !important;
pointer-events: all !important;
width: 12px !important;
height: 36px !important;
margin-top: -16px !important;
border-radius: 0 !important;
background: #d4b273 !important;
border: 2px solid #f3dfb0 !important;
box-shadow: none !important;
}
.dh-dual-range__input::-moz-range-thumb {
-moz-appearance: none !important;
pointer-events: all !important;
width: 12px !important;
height: 36px !important;
border-radius: 0 !important;
background: #d4b273 !important;
border: 2px solid #f3dfb0 !important;
box-shadow: none !important;
}
.range-values {
height: 0;
span {
position: absolute;
top: -55px;
transform: translateX(-50%);
min-width: 48px;
height: 34px;
background: #2b2b2b;
border: 1px solid #c5a76d;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
}
.range-labels {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
padding: 0 0 8px;
font-size: 16px;
color: #fff;
span {
color: #d7d7d7;
font-size: 11px;
white-space: nowrap;
}
}
.search-btn {
margin-top: 0;
display: inline-flex;
height: 56px;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 14px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-white);
background-image: linear-gradient(#303030, #111);
border: 1px solid #c5a76d;
width: 165px;
&:hover {
background: #c5a76d;
color: #000;
}
}
}
}
.gifts-banner {
img {
width: 100%;
}
}
.gifts-main-title {
text-align: center;
background: #F1EBDF;
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 32px;
text-transform: uppercase;
padding: 25px 0;
color: #000;
@media only screen and (max-width: 767px) {
font-size: 24px;
padding: 15px 2px;
}
}
.gift-sub-title {
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 24px;
text-transform: uppercase;
color: #000;
text-align: center;
margin-bottom: 30px;
@media only screen and (max-width: 767px) {
margin-bottom: 20px;
}
}
.gifts-occasion {
margin-top: 70px;
@media only screen and (max-width: 767px) {
margin-top: 20px;
}
.gift-item {
margin-bottom: 30px;
@media only screen and (max-width: 767px) {
margin-bottom: 15px;
}
a {
display: block;
span {
display: block;
background: #e7dcc6;
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
color: #000;
text-align: center;
padding: 15px 0;
@media only screen and (max-width: 767px) {
font-size: 16px;
padding: 15px 8px;
}
}
}
}
}
section.home-showroom {
background: #000000;
.container-fluid {
@media screen and (min-width: 1200px) {
padding: 0 !important;
}
@media only screen and (max-width: 767px) {
padding: 0;
}
}
.section-title {
font-family: var(--font-baskerville);
font-weight: 400;
color: var(--color-white);
font-size: 28px;
line-height: 36.2px;
letter-spacing: 1px;
@media only screen and (max-width: 767px) {
font-size: 18px;
}
}
a.callto-action {
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
&:hover, &.active {
color: var(--color-black);
background: linear-gradient(180deg, #FEF4E1 0%, #E1CE98 100%) padding-box, var(--Gold_Vertical) border-box;
}
font-family: var(--font-vietnam);
font-weight: 400;
color: #000;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
line-height: 21.71px;
letter-spacing: 1px;
margin: 20px 0 40px;
display: inline-block;
border: 1px solid #E0D2B8;
padding: 9px 20px 7px;
background: #E0D2B8;
border-radius: 4px;
@media only screen and (max-width: 767px) {
font-size: 12px;
margin: 10px 0 20px;
}
}
.inner {
padding: 7rem 0rem;
@media only screen and (max-width: 1032px) {
padding: 3em 0;
}
@media only screen and (max-width: 767px) {
padding: 10px 15px 30px;
}
}
p {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
color: var(--color-white);
@media only screen and (max-width: 767px) {
font-size: 12px;
line-height: 17.38px;
}
}
ul {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 0;
margin: 0;
li {
@media only screen and (max-width: 767px) {
flex: 0 0 50%;
width: 50%;
}
a {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
text-decoration: underline;
font-size: 14px;
line-height: 17.71px;
letter-spacing: 1px;
margin: 0 10px 20px;
display: inline-block;
&:hover {
text-decoration: underline;
}
@media only screen and (max-width: 767px) {
color: #fff;
font-size: 14px;
line-height: 17.38px;
margin: 5px;
border: 1px solid #E0D2B8;
display: block;
text-align: center;
text-decoration: none;
text-transform: capitalize;
padding: 10px 0;
}
}
}
}
.showroom-img {
height: 100%;
background-image: url(../../images/home-showroom.jpg);
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
@media only screen and (max-width: 1032px) {
height: 435px;
margin-bottom: 15px;
}
@media only screen and (max-width: 767px) {
background-image: none;
height: auto;
iframe {
height: 250px;
}
}
}
&.stores-page-showroom {
.inner {
padding: 6rem 0rem;
@media only screen and (max-width: 767px) {
padding: 2rem 0rem;
}
}
}
}
.gifts-recipient {
margin-top: 70px;
background: #000;
@media only screen and (max-width: 767px) {
margin-top: 20px;
.container-fluid {
padding: 0;
}
}
&.home-showroom {
.inner {
padding: 9rem 0rem;
@media only screen and (max-width: 767px) {
padding: 20px;
}
}
.showroom-img {
background-image: url(../images/gift/gift_recipient_banner.jpg);
@media only screen and (max-width: 767px) {
min-height: 280px;
}
}
ul {
li {
a {
margin: 10px;
text-decoration: none;
border: 1px solid #e0d2b8;
padding: 14px 0 7px;
width: 160px;
font-size: 12px;
@media only screen and (max-width: 767px) {
margin: 7px;
width: auto;
}
&:hover {
text-decoration: none;
background: #e0d2b8;
color: #000;
}
}
}
}
}
.gift-item {
margin-bottom: 30px;
@media only screen and (max-width: 767px) {
margin-bottom: 15px;
}
a {
display: flex;
align-items: center;
color: #000;
img {
width: 120px;
}
span.recipient_title {
font-family: "Baskervville";
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
}
span.test {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
font-size: 14px;
line-height: 22px;
color: #000000;
text-transform: initial;
}
}
}
}
.giftby-price {
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
-moz-column-gap: 1rem;
column-gap: 1rem;
@media only screen and (max-width: 767px) {
flex-wrap: wrap;
}
li {
@media only screen and (max-width: 767px) {
width: 47%;
margin-bottom: 16px;
text-align: center;
}
a {
border: 1px solid #000;
padding: 10px;
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
font-size: 14px;
line-height: 17.71px;
letter-spacing: 1px;
color: #000;
display: block;
@media only screen and (max-width: 767px) {
padding: 10px 8px;
}
&:hover {
background-color: #2c2c2c;
color: #fff;
}
}
}
}
}
.category-description {
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
font-size: 14px;
color: #000;
line-height: 22px;
margin-bottom: 24px;
padding: 0 15px 0 0;
@media only screen and (max-width: 767px) {
margin-bottom: 10px;
padding: 0 10px;
}
&.active {
> p {
@media only screen and (max-width: 767px) {
height: auto;
}
}
}
.readmore {
display: none;
text-transform: capitalize;
@media only screen and (max-width: 767px) {
display: block;
text-align: right;
}
}
a {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
color: #fff;
text-decoration: underline;
line-height: 20.45px;
@media only screen and (max-width: 767px) {
font-size: 12px;
}
}
.amshopby-descr {
padding: 2em 0 1em;
max-width: 1090px;
margin: auto;
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 16px;
text-align: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
@media only screen and (max-width: 767px) {
grid-template-columns: repeat(4, 1fr);
flex-wrap: wrap;
padding: 1em 0 0 !important;
width: 100%;
gap: 10px;
align-items: flex-start;
}
p {
text-align: center;
@media only screen and (max-width: 767px) {
text-align: center;
width: 22%;
margin: 0;
}
a {
color: #000;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
@media only screen and (max-width: 767px) {
gap: 0;
font-size: 12px;
}
&.active {
font-weight: 600;
letter-spacing: 1px;
}
}
span {
display: block;
display: flex;
align-items: flex-start;
justify-content: center;
margin: auto !important;
@media only screen and (max-width: 767px) {
line-height: 17.45px;
}
}
span.img-box {
height: 40px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
height: 30px;
margin: auto;
max-height: 100%;
max-width: 100%;
object-fit: contain;
@media only screen and (min-width: 1033px) {
max-width: 90px;
}
@media only screen and (max-width: 1032px) {
height: 20px;
width: 100%;
}
}
&:not(:last-child) {
@media only screen and (max-width: 767px) {
margin: 0 auto;
}
}
}
a {
&.active {
border-radius: 4px;
border: 1px solid transparent;
background-image: linear-gradient(#fff, #fff), linear-gradient(180deg, #f7d592 4%, #bc913d 14.5%, #fff7e7 23%, #ffdfa2 35.5%, #f7d592 38%, #cb9836 52.5%, #ffdfa2 59.5%, #bb903e 69.5%, #f8d798 86.5%, #a27724 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
}
@media only screen and (max-width: 767px) {
text-align: center;
}
}
&.collection_filters {
flex-wrap: wrap;
padding-top: 1em;
p {
width: auto;
margin: 0 30px 0 0;
@media only screen and (max-width: 767px) {
margin: 0 10px 10px 0;
width: 25%;
}
}
.category-description {
width: 100%;
flex: 0 0 100%;
p {
@media only screen and (max-width: 767px) {
width: 100%;
a {
gap: 5px;
}
}
}
}
p {
img {
height: 30px;
margin-bottom: 0;
@media only screen and (max-width: 767px) {
height: 20px;
}
}
&:nth-child(3), &:nth-child(4), &:nth-child(7) {
img {
height: 17px;
margin-top: 6px;
@media only screen and (max-width: 767px) {
height: 12px;
}
}
span {
margin-top: 7px;
}
}
&:nth-child(6) {
margin-right: 15px;
img {
height: 35px;
@media only screen and (max-width: 767px) {
height: 30px;
margin-top: -6px;
}
}
span {
margin-top: -5px;
@media only screen and (max-width: 767px) {
margin-top: -3px;
}
}
}
&:nth-child(7) {
a {
margin-top: -10px;
}
img {
height: 17px;
margin-bottom: 0;
margin-top: 12px;
@media only screen and (max-width: 767px) {
height: 12px;
}
}
span {
margin-top: 7px;
}
}
}
}
&.clearance_filter {
p {
&:last-child {
img {
height: 20px;
@media only screen and (max-width: 767px) {
height: 14px;
}
}
span {
margin-top: 7px;
}
}
}
}
&.sale-custom-filters {
p {
&:nth-child(3), &:nth-child(4), &:nth-child(8), &:nth-child(9) {
img {
height: 17px;
@media only screen and (max-width: 767px) {
height: 12px;
}
}
span {
margin-top: 7px;
}
}
&:nth-child(6), &:last-child {
img {
height: 40px;
@media only screen and (max-width: 767px) {
height: 30px;
}
}
span {
margin-top: -10px;
@media only screen and (max-width: 767px) {
margin-top: -7px;
}
}
}
&:nth-child(7) {
img {
height: 45px;
@media only screen and (max-width: 767px) {
height: 35px;
}
}
span {
margin-top: -15px;
@media only screen and (max-width: 767px) {
margin-top: -10px;
}
}
}
}
}
&.christmas-custom-filters {
p {
margin-bottom: 0;
&:nth-child(2), &:nth-child(6), &:nth-child(7) {
img {
height: 17px;
margin-top: 6px;
@media only screen and (max-width: 767px) {
height: 12px;
}
}
span {
margin-top: 7px;
}
}
&:nth-child(4), &:last-child {
img {
height: 40px;
@media only screen and (max-width: 767px) {
height: 30px;
}
}
span {
margin-top: -10px;
@media only screen and (max-width: 767px) {
margin-top: -7px;
}
}
}
&:nth-child(5) {
img {
height: 45px;
@media only screen and (max-width: 767px) {
height: 35px;
}
}
span {
margin-top: -15px;
@media only screen and (max-width: 767px) {
margin-top: -10px;
}
}
}
}
}
&.hub-page-filters {
p {
text-align: center;
&:not(:last-child) {
margin-right: 30px;
@media only screen and (max-width: 767px) {
margin-right: 0;
margin-bottom: 6px;
}
}
img {
display: block;
height: 30px;
margin: auto;
margin-bottom: 10px;
@media only screen and (max-width: 767px) {
height: 20px;
}
}
&:nth-child(3) {
img {
height: 17px;
@media only screen and (max-width: 767px) {
height: 12px;
margin-top: 0px;
}
}
span {
margin-top: 11px;
}
}
&:nth-child(4) {
img {
display: block;
height: 30px;
margin: auto;
margin-bottom: 10px;
}
span {
margin-top: 0;
}
}
&:nth-child(5) {
img {
height: 40px;
@media only screen and (max-width: 767px) {
height: 30px;
}
}
span {
margin-top: -10px;
@media only screen and (max-width: 767px) {
margin-top: -7px;
}
}
}
&:nth-child(6) {
img {
height: 43px;
@media only screen and (max-width: 767px) {
height: 35px;
}
}
span {
margin-top: -17px;
@media only screen and (max-width: 767px) {
margin-top: -10px;
}
}
}
&:nth-child(7) {
img {
height: 17px;
margin-bottom: 0;
margin-top: 12px;
@media only screen and (max-width: 767px) {
height: 12px;
}
}
span {
margin-top: 7px;
}
}
}
}
&.jewellery-custom-filters {
p {
&:nth-child(2) {
img {
height: 40px;
@media only screen and (max-width: 767px) {
height: 30px;
}
}
span {
margin-top: -10px;
@media only screen and (max-width: 767px) {
margin-top: -7px;
}
}
}
&:nth-child(3) {
img {
height: 43px;
@media only screen and (max-width: 767px) {
height: 35px;
}
}
span {
margin-top: -17px;
@media only screen and (max-width: 767px) {
margin-top: -10px;
}
}
}
&:nth-child(4) {
img {
height: 17px;
margin-bottom: 0;
margin-top: 12px;
@media only screen and (max-width: 767px) {
height: 12px;
}
}
span {
margin-top: 7px;
}
}
}
}
}
.mens-filters-svg {
display: flex;
align-items: center;
justify-content: center;
padding: 2em 0 1em;
@media only screen and (max-width: 767px) {
flex-wrap: wrap;
padding: 1em 0 0 !important;
width: 100%;
gap: 10px;
align-items: flex-start;
}
p {
text-align: center;
@media only screen and (max-width: 767px) {
width: 21%;
text-align: center;
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
}
a {
color: #000;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
@media only screen and (max-width: 767px) {
gap: 0;
font-size: 12px;
}
&.active {
font-weight: 600;
letter-spacing: 1px;
}
}
span {
display: block;
}
img {
display: block;
height: 30px;
margin: auto;
margin-bottom: 10px;
max-width: 100%;
@media only screen and (max-width: 1032px) {
height: 20px;
}
}
&:nth-child(3) {
img {
height: 35px;
@media only screen and (min-width: 1033px) {
margin-bottom: 5px;
}
@media only screen and (max-width: 767px) {
margin-bottom: 4px;
height: 26px;
}
}
span {
margin-top: -10px;
}
}
&:nth-child(4) {
img {
height: 20px;
margin-bottom: 9px;
margin-top: 10px;
@media only screen and (max-width: 767px) {
height: 12px;
}
}
span {
margin-top: 15px;
@media only screen and (max-width: 767px) {
margin-top: 7px;
}
}
}
&:last-child {
img {
height: 40px;
}
span {
@media only screen and (min-width: 1033px) {
margin-top: -10px !important;
}
margin-top: 0px;
}
}
&:not(:last-child) {
margin-right: 30px;
@media only screen and (max-width: 767px) {
margin-right: 0;
margin-left: 0;
}
}
}
}
}
[data-content-type="row"] {
&[data-appearance="contained"] {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
margin-inline: auto;
padding-inline: calc(var(--spacing) * 6);
[data-element="inner"] {
background-attachment: scroll !important;
}
}
&[data-appearance="full-bleed"] {
background-attachment: scroll !important;
}
&[data-appearance="full-width"] {
background-attachment: scroll !important;
> .row-full-width-inner {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
margin-inline: auto;
padding-inline: calc(var(--spacing) * 6);
}
}
}
body:where(:not([class*="-full-width"])) {
[data-content-type="row"][data-appearance="contained"] {
padding-inline: 0;
}
}
[data-content-type="column-group"], [data-content-type="column-line"] {
flex-wrap: wrap;
@media (width >= 48rem) {
flex-wrap: nowrap;
}
}
[data-content-type="column"] {
width: 100%;
max-width: 100%;
background-attachment: scroll !important;
flex-basis: 100%;
@media (width >= 48rem) {
flex-basis: auto;
}
}
[data-content-type="tabs"] {
.tabs-navigation {
margin-bottom: -1px;
display: block;
padding: calc(var(--spacing) * 0);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
li.tab-header {
position: relative;
margin-block: calc(var(--spacing) * 0);
margin-right: calc(var(--spacing) * 0);
margin-left: -1px;
display: inline-block;
max-width: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-style: var(--tw-border-style);
border-width: 1px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-gray-300);
background-color: var(--color-gray-100);
overflow-wrap: break-word;
&:first-child {
margin-left: calc(var(--spacing) * 0);
}
&.active {
z-index: 20;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
border-bottom: 1px solid white;
}
a.tab-title {
position: relative;
display: block;
cursor: pointer;
padding-inline: calc(var(--spacing) * 5);
padding-block: calc(var(--spacing) * 3);
vertical-align: middle;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
white-space: normal;
span {
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: var(--color-black);
}
}
}
}
.tabs-content {
position: relative;
z-index: 10;
overflow: hidden;
border-radius: var(--radius-sm);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-gray-300);
background-color: var(--color-container-lighter);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
[data-content-type="tab-item"] {
padding: calc(var(--spacing) * 8);
min-height: inherit;
background-attachment: scroll !important;
}
}
&.tab-align-left {
.tabs-content {
border-top-left-radius: 0 !important;
}
}
&.tab-align-right {
.tabs-content {
border-top-right-radius: 0 !important;
}
}
}
[data-content-type="text"], [data-content-type="heading"], [data-content-type="html"] {
overflow-wrap: break-word;
}
[data-content-type="buttons"] {
max-width: 100%;
[data-content-type="button-item"] {
margin-right: calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 2);
max-width: 100%;
[data-element="link"], [data-element="empty_link"] {
max-width: 100%;
overflow-wrap: break-word;
}
[data-element="empty_link"] {
cursor: default;
}
:is(a, button, div) {
display: inline-block;
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
:is(a, button, div) {
&.pagebuilder-button-primary {
--btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000);
--btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000);
--btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000);
--btn-color: var(--color-fg);
display: inline-flex;
justify-content: center;
align-items: center;
gap: calc(var(--spacing) * 1.5);
padding-block: calc(var(--spacing) * 2);
padding-inline: calc(var(--spacing) * 4);
border-radius: var(--radius-lg);
border-width: 2px;
border-color: var(--btn-stroke);
background-color: var(--btn-bg);
color: var(--btn-color);
font-weight: 500;
user-select: none;
vertical-align: middle;
transition-property: color, background-color, border-color, outline-color;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
&:hover {
border-color: var(--btn-hover-stroke, var(--btn-stroke));
background-color: var(--btn-hover-bg, var(--btn-bg));
color: var(--btn-hover-color, var(--btn-color));
text-decoration: none;
}
&:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) {
border-color: var(--btn-active-stroke, var(--btn-stroke));
background-color: var(--btn-active-bg, var(--btn-bg));
color: var(--btn-active-color, var(--btn-color));
}
&:is(:disabled, [aria-disabled="true"]) {
border-color: var(--btn-disabled-stroke, var(--color-gray-200));
background-color: var(--btn-disabled-bg, var(--color-gray-50));
color: var(--btn-disabled-color, var(--color-gray-500));
}
--btn-stroke: #0000;
--btn-bg: var(--color-primary);
--btn-color: var(--color-on-primary);
--btn-hover-stroke: #0000;
--btn-hover-bg: var(--color-primary-lighter);
--btn-hover-color: var(--color-on-primary);
--btn-active-stroke: #0000;
--btn-active-bg: var(--color-primary);
--btn-active-color: var(--color-on-primary);
}
&.pagebuilder-button-secondary {
--btn-stroke: #0000;
--btn-bg: color-mix(in srgb, oklch(46% 0.2 265) 10%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000);
}
--btn-hover-bg: color-mix(in srgb, oklch(46% 0.2 265) 20%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000);
}
--btn-active-bg: color-mix(in srgb, oklch(46% 0.2 265) 30%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000);
}
--btn-color: var(--color-fg);
display: inline-flex;
justify-content: center;
align-items: center;
gap: calc(var(--spacing) * 1.5);
padding-block: calc(var(--spacing) * 2);
padding-inline: calc(var(--spacing) * 4);
border-radius: var(--radius-lg);
border-width: 2px;
border-color: var(--btn-stroke);
background-color: var(--btn-bg);
color: var(--btn-color);
font-weight: 500;
user-select: none;
vertical-align: middle;
transition-property: color, background-color, border-color, outline-color;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
&:hover {
border-color: var(--btn-hover-stroke, var(--btn-stroke));
background-color: var(--btn-hover-bg, var(--btn-bg));
color: var(--btn-hover-color, var(--btn-color));
text-decoration: none;
}
&:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) {
border-color: var(--btn-active-stroke, var(--btn-stroke));
background-color: var(--btn-active-bg, var(--btn-bg));
color: var(--btn-active-color, var(--btn-color));
}
&:is(:disabled, [aria-disabled="true"]) {
border-color: var(--btn-disabled-stroke, var(--color-gray-200));
background-color: var(--btn-disabled-bg, var(--color-gray-50));
color: var(--btn-disabled-color, var(--color-gray-500));
}
--btn-stroke: var(--color-primary-lighter);
--btn-bg: var(--color-on-primary);
--btn-color: var(--color-primary-darker);
--btn-hover-stroke: var(--color-primary-lighter);
--btn-hover-bg: var(--color-on-primary);
--btn-hover-color: var(--color-primary-lighter);
--btn-active-stroke: #0000;
--btn-active-bg: var(--color-primary);
--btn-active-color: var(--color-on-primary);
}
}
[data-content-type="divider"] hr {
border-block-end: 0;
border-inline: 0;
}
[data-content-type="image"] {
> [data-element="link"], > [data-element="link"] img {
border-radius: inherit;
}
.pagebuilder-mobile-hidden {
display: none;
@media (width >= 48rem) {
display: inline-block;
}
}
.pagebuilder-mobile-only {
display: inline-block;
@media (width >= 48rem) {
display: none;
}
}
figcaption {
overflow-wrap: break-word;
}
}
[data-content-type="video"] {
.pagebuilder-video-wrapper {
overflow: hidden;
}
:is(iframe, video) {
aspect-ratio: 16/9;
}
}
:is([data-content-type="banner"], [data-content-type="slide"]) {
--pagebuilder-overlay-mx: 0;
.pagebuilder-overlay {
max-inline-size: var(--container-lg);
margin-inline: var(--pagebuilder-overlay-mx);
padding: calc(var(--spacing) * 8);
border-radius: inherit;
transition: background-color 500ms ease;
&.pagebuilder-poster-overlay {
display: flex;
justify-content: center;
align-items: center;
max-inline-size: 100%;
min-block-size: inherit;
}
}
&[data-appearance="collage-centered"] {
--pagebuilder-overlay-mx: auto;
}
&[data-appearance="collage-left"] {
--pagebuilder-overlay-mx: 0 auto;
}
&[data-appearance="collage-right"] {
--pagebuilder-overlay-mx: auto 0;
}
}
[data-content-type="banner"] {
& > :is([data-element="link"], [data-element="empty_link"]) {
color: inherit;
text-decoration: inherit;
&:hover {
color: inherit;
text-decoration: inherit;
}
}
.pagebuilder-banner-wrapper {
overflow-wrap: break-word;
background-clip: padding-box;
border-radius: inherit;
background-attachment: scroll !important;
.pagebuilder-overlay {
position: relative;
&:not(.pagebuilder-poster-overlay) {
max-width: none;
@media (width >= 48rem) {
max-width: var(--container-xl);
}
}
}
&.jarallax .video-overlay {
z-index: 0;
}
[data-element="content"] {
min-height: 50px;
overflow: auto;
}
.pagebuilder-banner-button {
margin: calc(var(--spacing) * 0);
margin-top: calc(var(--spacing) * 5);
display: inline-block;
max-width: 100%;
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 500ms;
transition-duration: 500ms;
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
overflow-wrap: break-word;
text-align: inherit;
}
.pagebuilder-poster-content {
width: 100%;
}
}
}
[data-content-type="slider"] {
position: relative;
padding-block-end: calc(var(--spacing) * 12);
&:not(:has(.snap-track)) {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
padding-block: calc(var(--spacing) * 6) calc(calc(var(--spacing) * 6) + calc(var(--spacing) * 12));
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
& > * {
scroll-snap-align: start;
}
}
[data-page-builder-slider-nav] {
position: absolute;
inset: auto 0 0;
}
}
[data-content-type="slide"] {
--overlay-align: initial;
position: relative;
.pagebuilder-slide-wrapper {
border-radius: inherit;
min-block-size: inherit;
overflow-wrap: break-word;
&.jarallax {
.video-overlay {
-webkit-transform: unset;
z-index: 1;
}
.pagebuilder-overlay {
position: relative;
z-index: 2;
}
[id*="jarallax-container"] > :is(div, img, video, iframe) {
margin: auto !important;
transform: none !important;
}
}
}
.pagebuilder-poster-content {
inline-size: 100%;
}
[data-element="content"] {
min-height: 50px;
overflow: auto;
}
}
[data-content-type="map"] {
block-size: 300px;
}
[data-content-type$="block"] {
.block {
p:last-child {
margin-block: 0 calc(var(--spacing) * 4);
}
}
}
[data-content-type="dynamic_block"] {
[data-content-type="image"] img {
display: inline-block;
}
.block-banners .banner-item-content, .block-banners-inline .banner-item-content {
margin-block-end: auto;
}
}
.dark\:bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
@media only screen and (max-width: 1032px) {
.ipad-dark\:bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
}
.promo-top:not(.hidden) ~ header.header {
&.bg-tab-black.top_cus .main-menu {
@media only screen and (max-width: 1032px) {
background: #000000;
}
}
}
.promo-top:not(.hidden) ~ .header .main-menu {
&.menu_zig, &.fixheader {
top: 39px;
}
@media only screen and (max-width: 1032px) {
top: 85px;
}
@media only screen and (max-width: 767px) {
top: 84px;
margin-top: 0px;
border-top: var(--border-menu);
}
}
.container {
padding-inline: 12px;
}
header.header {
@media only screen and (min-width: 1033px) {
margin-top: 38px;
}
@media only screen and (max-width: 1032px) {
&.fixheader {
top: 0px;
position: fixed;
transition: .1s ease;
}
background: #000000;
padding: 1px 0;
box-shadow: 0px 0px 5px rgba(0, 0, 0, .25);
top: 0;
left: 0;
z-index: 998;
transition: .1s ease;
}
.header__nav.navbar {
padding: 0;
.container {
max-width: 100%;
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
padding: 0;
}
.menu-left {
@media only screen and (max-width: 1032px) {
padding: 0;
}
&.w-full {
@media only screen and (max-width: 1720px) and (min-width: 1445px) {
width: 100%;
}
}
}
}
.container-fluid {
max-width: 1920px;
.banner-right, .col-lg-4 {
@media only screen and (min-width: 1500px) {
display: block !important;
}
@media (min-width: 1100px) and (max-width: 1445px) {
display: none !important;
}
&.bnr-xl-hide {
@media only screen and (max-width: 1720px) and (min-width: 1445px) {
display: none;
}
}
}
.popular-categories {
margin-top: 20px;
margin-bottom: 15px;
@media only screen and (max-width: 1024px) {
display: none;
}
@media only screen and (max-width: 767px) {
width: 100%;
margin-top: 15px;
max-width: 100% !important;
}
.info-blocks {
display: flex;
flex-wrap: wrap;
gap: 10px;
@media only screen and (max-width: 767px) {
padding-left: 10px;
}
.info-blocks-item {
width: 47%;
a {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
font-size: 12px;
text-transform: none;
color: #000;
display: block;
padding: 0;
@media only screen and (max-width: 767px) {
padding: 0;
}
}
img {
border-radius: 4px;
margin-bottom: 8px;
min-height: 180px;
@media only screen and (min-width: 1701px) {
max-height: 215px;
width: 100%;
}
@media only screen and (max-width: 767px) {
margin: 0 0 8px;
}
}
}
}
}
}
ul {
flex-direction: inherit;
align-items: center;
width: 100%;
justify-content: center;
@media only screen and (max-width: 1024px) {
display: block;
}
@media (max-width: 1500px) and (min-width: 1446px) {
padding: 0 18px;
}
li {
&.nav-item {
@media only screen and (min-width: 1033px) {
padding-bottom: 15px;
}
}
a {
line-height: 20px;
letter-spacing: 1px;
text-transform: capitalize;
font-family: var(--font-vietnam-regular);
font-weight: 400;
color: var(--text-black);
text-decoration: none;
font-size: 16px;
@media only screen and (max-width: 1700px) and (min-width: 1446px) {
font-size: 16px;
}
@media (min-width: 1100px) and (max-width: 1445px) {
font-size: 15px;
padding: 0 12px;
}
@media only screen and (max-width: 1032px) {
display: block;
width: 100%;
height: 100%;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 15px;
line-height: 22.24px;
padding: 10px 10px 12px;
letter-spacing: 1px;
color: #000;
}
}
>a {
@media only screen and (min-width: 1700px) {
padding: 0 22px;
}
@media only screen and (min-width: 1033px) {
font-family: var(--font-baskerville);
font-weight: 400;
}
@media only screen and (max-width: 1700px) and (min-width: 1500px) {
padding: 0 17px;
}
@media (max-width: 1500px) and (min-width: 1446px) {
padding: 0 9px;
}
}
.sub-nav {
@media only screen and (min-width: 1033px) {
position: absolute;
top: 38px;
left: calc(var(--spacing) * 0);
z-index: 99999;
display: none;
width: 100%;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
border-color: #B0B0B0;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 500ms;
transition-duration: 500ms;
}
@media only screen and (max-width: 1032px) {
position: absolute;
top: calc(var(--spacing) * 0);
left: calc(var(--spacing) * 0);
z-index: 999;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding-bottom: 260px;
}
&.sale-nav, &.education-nav, &.gifts-nav {
@media only screen and (min-width: 1033px) {
.container-fluid {
padding-left: 30px;
}
}
.sub-nav--inner.gifts_new {
@media only screen and (min-width: 1367px) {
padding-left: 12%;
}
@media only screen and (max-width: 1366px) and (min-width: 1033px) {
padding-left: 8%;
}
.subnav-items {
@media only screen and (min-width: 1033px) {
width: 33%;
}
}
}
.sub-nav--inner .subnav-items {
@media only screen and (min-width: 1033px) {
width: 25%;
}
&.gifts-section {
padding: 0;
.subnav-item:not(.no-images) {
@media only screen and (max-width: 1024px) {
&.sub-menu-dropdown-open {
padding: 10px 0px 0 10px;
}
}
a {
position: relative;
padding: 2px 0 8px 40px;
margin-bottom: 0 !important;
@media only screen and (max-width: 1024px) {
width: 50%;
padding: 10px 0 8px 40px;
}
&::before {
width: 30px;
content: "";
width: 34px;
height: 30px;
background-size: contain;
position: absolute;
left: 0;
top: 6px;
background-repeat: no-repeat;
}
&.birthday {
&::before {
background-image: url(../images/birthday.svg);
top: -7px;
@media only screen and (max-width: 1024px) {
top: 0;
}
}
}
&.graduation {
&::before {
background-image: url(../images/graduation.svg);
top: 0;
}
}
&.bridemaid {
&::before {
background-image: url(../images/bridesmaid.svg);
top: 0;
width: 28px;
}
}
&.wedding {
&::before {
background-image: url(../images/wedding.svg);
top: 0;
@media only screen and (max-width: 1024px) {
top: 6px;
}
}
}
&.anniversary {
&::before {
background-image: url(../images/anniversary.svg);
top: 0;
width: 23px;
left: 4px;
@media only screen and (max-width: 1024px) {
top: 6px;
}
}
}
&.christmas {
margin-bottom: 12px;
&::before {
background-image: url(../images/christmas.svg);
top: -5px;
left: -2px;
@media only screen and (max-width: 1024px) {
top: 0;
}
}
}
&.valentine {
&::before {
background-image: url(../images/valentinesicon.svg);
top: -4px;
background-size: contain;
width: 40px;
height: 35px;
@media only screen and (max-width: 1024px) {
top: 0;
}
}
}
&.mothersday {
margin-top: 8px;
&::before {
background-image: url(../images/mothersdayicon.png);
top: -12px;
background-size: contain;
width: 40px;
height: 35px;
opacity: 0.8;
@media only screen and (max-width: 1024px) {
top: 0;
}
}
}
&.milestones {
&::before {
background-image: url(../images/milestones-nav.svg);
top: -3px;
left: 3px;
width: 30px;
height: 25px;
@media only screen and (max-width: 1024px) {
width: 34px;
height: 30px;
top: 0;
left: 0;
}
}
}
&.giftcards {
&::before {
background-image: url(../images/giftcard.svg);
top: -4px;
width: 25px;
left: 0px;
}
}
}
}
}
}
}
&.discover-nav {
@media only screen and (min-width: 1033px) {
.discover-second-item {
width: 25% !important;
}
}
.no-images {
a {
line-height: normal !important;
}
}
.sub-menu-open a {
@media only screen and (max-width: 1024px) {
width: 50%;
}
}
}
.container-fluid {
padding: 0 0 0;
.col-lg-9, .menu-left {
padding-bottom: 1rem;
@media only screen and (max-width: 1032px) {
width: 100%;
}
}
.col-lg-3 {
.sub-nav--inner {
height: 100%;
width: 100%;
padding-top: 0;
.static-banner {
height: 100%;
width: 100%;
a {
position: relative;
span.link-text {
position: absolute;
width: 100%;
left: 0;
text-align: center;
bottom: 0;
top: 130px;
height: 100%;
color: #fff;
text-decoration: underline;
}
}
img {
width: 100%;
height: 100%;
}
}
}
}
}
.sub-nav--inner {
display: flex;
justify-content: flex-start;
padding: 28px 0 20px;
@media only screen and (max-width: 1032px) {
flex-direction: column;
padding: 0px 0 0;
}
@media (min-width: 1100px) and (max-width: 1445px) {
padding: 22px 0 10px;
}
.subnav-items {
@media only screen and (min-width: 1033px) {
width: 33%;
padding-right: 10px;
}
@media only screen and (max-width: 1366px) and (min-width: 1100px) {
width: 37%;
}
@media only screen and (max-width: 1032px) {
width: 100%;
padding-right: 0;
&.collections, &.stone-icons, &.metal-icons {
.subnav-items-title:nth-last-of-type(2n), .sub-menu-dropdown:nth-last-of-type(2n) {
border-bottom: var(--border-menu);
}
.subnav-item {
a {
padding: 8px 0px 2px 10px;
width: 100%;
&:first-child {
margin-top: 0;
}
}
}
}
}
.subnav-items-title {
margin-bottom: 15px;
display: block;
font-family: var(--font-vietnam);
font-weight: 500;
font-size: 12px;
--tw-tracking: 1px;
letter-spacing: 1px;
color: var(--text-black);
text-transform: uppercase;
@media only screen and (min-width: 1033px) {
.main-menu-item-arrow {
display: none;
}
}
@media only screen and (max-width: 1032px) {
margin-bottom: 10px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
text-transform: none;
}
@media only screen and (max-width: 389.98px) {
font-size: 14px;
}
a {
font-size: 12px;
@media only screen and (max-width: 389.98px) {
font-size: 12px;
}
color: #000;
font-family: var(--font-vietnam);
font-weight: 500;
line-height: 15.18px;
}
}
&:not(.essentials-block, .ring-builder-items) {
.subnav-items-title {
@media only screen and (max-width: 1032px) {
margin-bottom: calc(var(--spacing) * 0);
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: #e5e5e5;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 12px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
--tw-leading: 22.24px;
line-height: 22.24px;
}
}
}
.subnav-item {
display: flex;
flex-wrap: wrap;
flex-direction: column;
@media only screen and (max-width: 1032px) {
flex-direction: row;
}
a {
margin-block: 5px;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 12px;
--tw-leading: 20px;
line-height: 20px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--text-black);
text-transform: none;
@media (min-width: 1100px) and (max-width: 1445px) {
margin: 3px 0;
}
@media only screen and (max-width: 1024px) {
font-size: 12px;
padding: 4px 10px 4px 10px;
}
@media only screen and (max-width: 389.98px) {
font-size: 12px;
padding: 4px 10px 4px 10px;
}
&:hover {
color: #333;
}
&.browse_link {
font-family: var(--font-vietnam);
font-weight: 500;
@media only screen and (min-width: 1033px) {
padding-left: 4.5px !important;
}
@media (min-width: 1100px) and (max-width: 1445px) {
padding-left: 21px !important;
}
&::before {
content: inherit !important;
}
}
&.browse_link_book, &.browse_link {
font-family: var(--font-vietnam);
font-weight: 500;
&.book-txt {
font-family: var(--font-vietnam);
font-weight: 500;
}
&::before {
content: inherit !important;
}
@media only screen and (max-width: 1024px) {
width: 100% !important;
padding-left: 10px;
}
}
&.mens-icon {
&:after {
content: "";
background: url(../images/male-symbol.png) no-repeat center center #E0D2B8;
width: 20px;
height: 20px;
background-size: 14px;
padding: 10px;
border-radius: 5px;
margin-left: 8px;
}
}
}
&.extra-nav {
padding-bottom: 20px;
margin-top: 25px;
a {
width: 40%;
padding-left: 0 !important;
&:last-child {
width: 55% !important;
}
}
}
&.sub-chid-view {
flex-direction: row;
@media (max-width: 1500px) and (min-width: 1446px) {
flex-direction: inherit;
}
a {
width: 100%;
&:nth-child(-n+6) {
width: 50%;
@media (max-width: 1500px) and (min-width: 1446px) {
width: 100%;
}
}
}
}
&.sub-chid-view-second {
flex-direction: row;
@media (max-width: 1500px) and (min-width: 1446px) {
flex-direction: inherit;
}
a {
width: 50%;
}
}
&.no-images {
a {
@media only screen and (min-width: 1033px) {
margin: 1px 0;
}
padding: 8px 0px 2px 4px !important;
display: block;
line-height: 20px;
&::before {
content: inherit !important;
}
}
&.browseall {
a {
padding: 0px 0px 8px 0px !important;
line-height: 20px;
margin: 1px 0;
}
}
}
&.browseall {
a {
font-family: var(--font-vietnam);
font-weight: 500;
}
}
}
&.style-icons {
.subnav-item {
@media only screen and (max-width: 1024px) {
flex-direction: row;
align-items: center;
}
a {
position: relative;
display: block;
line-height: 30px;
margin: 0;
display: flex;
align-items: center;
white-space: nowrap;
@media only screen and (max-width: 1024px) {
line-height: 20px;
width: 50%;
white-space: wrap;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
width: 35px;
height: 20px;
background-size: contain;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 7px;
}
@media only screen and (max-width: 1024px) {
width: 45px;
}
}
&.solitaire {
&::before {
background-image: url(../images/nav-icons/style/SolitaireRings.svg);
}
}
&.anniversary-rings {
&::before {
background-image: url(../images/nav-icons/style/anniversaryrings.svg);
}
}
&.shoulder {
&::before {
background-image: url(../images/nav-icons/style/ShoulderSetRings.svg);
}
}
&.promise-rings {
&::before {
background-image: url(../images/nav-icons/style/promiserings.svg);
}
}
&.halo {
&::before {
background-image: url(../images/nav-icons/style/HaloRings.svg);
}
}
&.eng-hidden-halo {
&::before {
background-image: url(../images/nav-icons/style/hidden-halo-rings.svg);
background-size: 43px;
}
}
&.eng-bezel {
&::before {
background-image: url(../images/nav-icons/style/bezel-rings.svg);
background-size: 41px;
}
}
&.dress-rings {
&::before {
background-image: url(../images/nav-icons/style/dressrings.svg);
}
}
&.trilogy {
&::before {
background-image: url(../images/nav-icons/style/TrilogyRings.svg);
}
}
&.two-stone {
&::before {
background-image: url(../images/nav-icons/style/two-stone-ring.svg);
}
}
&.cluster-rings {
&::before {
background-image: url(../images/nav-icons/style/clusterrings.svg);
}
}
&.fourstone {
&::before {
background-image: url(../images/nav-icons/style/4stonerings.svg);
}
}
&.wishbone-rings {
&::before {
background-image: url(../images/nav-icons/style/wishbonerings.svg);
}
}
&.fivestone {
&::before {
background-image: url(../images/nav-icons/style/5stonerings.svg);
}
}
&.cocktail-rings {
&::before {
background-image: url(../images/nav-icons/style/cocktailrings.svg);
}
}
&.sevenstone {
&::before {
background-image: url(../images/nav-icons/style/7stonerings.svg);
}
}
&.crossover-rings {
&::before {
background-image: url(../images/nav-icons/style/crossoverrings.svg);
}
}
&.zirconium-diamond {
@media only screen and (max-width: 767px) {
white-space: nowrap !important;
}
&::before {
background-image: url(../images/nav-icons/style/zirconinum-daimond.svg);
background-size: 43px;
margin-top: 4px;
@media only screen and (max-width: 1500px) {
width: 48px;
}
}
}
&.desginer-rings {
&::before {
background-image: url(../images/nav-icons/style/designerrings.svg);
}
}
&.vintage {
&::before {
background-image: url(../images/nav-icons/style/vintagerings.svg);
}
}
&.bridal-set {
&::before {
background-image: url(../images/nav-icons/engagement/bridal-set-ring.svg);
background-size: cover;
}
}
&.sale-earrings {
&::before {
background-image: url(../images/nav-icons/style/diamond-studs.svg);
}
}
&.mens-stud {
&::before {
background-image: url(../images/nav-icons/style/diamond-studs_onestud.svg);
}
}
&.halo-earrings {
&::before {
background-image: url(../images/nav-icons/style/haloearrings.svg);
}
}
&.hidden-halo-earrings {
&::before {
background-image: url(../images/nav-icons/style/hidden-halo-earrings.svg);
background-size: 40px;
}
}
&.hoop-earrings {
&::before {
background-image: url(../images/nav-icons/style/hoopearrings.svg);
}
}
&.bezel-earrings {
&::before {
background-image: url(../images/nav-icons/style/bezel-earrings.svg);
background-size: 43px;
}
}
&.drop-earrings {
&::before {
background-image: url(../images/nav-icons/style/dropearrings.svg);
height: 35px;
@media only screen and (max-width: 767px) {
height: 28px;
}
}
}
&.circle-earrings {
&::before {
background-image: url(../images/nav-icons/style/diamond-studs.svg);
}
}
&.journey-earrings {
&::before {
background-image: url(../images/nav-icons/style/earrings-journey.svg);
height: 35px;
@media only screen and (max-width: 767px) {
height: 30px;
}
}
}
&.star-earrings {
&::before {
background-image: url(../images/nav-icons/style/starearrings.svg);
background-size: contain;
height: 30px;
@media only screen and (max-width: 767px) {
height: 26px;
}
}
}
&.cluster-earrings {
&::before {
background-image: url(../images/nav-icons/style/clusterearrings.svg);
}
}
&.flower-earrings {
&::before {
background-image: url(../images/nav-icons/style/flowerearrings.svg);
background-size: cover;
}
}
&.designer-earrings {
&::before {
background-image: url(../images/nav-icons/style/designerearrings.svg);
}
}
&.stackable-earrings {
&::before {
background-image: url(../images/nav-icons/style/stackable-earrings.png);
height: 28px;
opacity: 0.8;
}
}
&.gemstone-mens {
&::before {
background-image: url(../images/nav-icons/style/blue-sapphire-ring.svg);
}
}
&.balck-rings {
&::before {
background-image: url(../images/nav-icons/style/blackdiamondrings.svg);
}
}
&.half-icon {
&::before {
background-image: url(../images/nav-icons/eternity/half-eternity-ring.svg);
background-size: cover;
}
}
&.diamond-studs-mens {
&::before {
background-image: url(../images/nav-icons/earring/mens-stud-earrings.svg);
background-size: cover;
margin-right: 4px;
}
}
&.gold-signet {
&::before {
background-image: url(../images/nav-icons/style/gold-signet-rings.svg);
background-size: 170% 100%;
}
}
&.gold-cuff-mens {
&::before {
background-image: url(../images/nav-icons/style/goldcufflinks.svg);
background-position: center;
height: 25px;
width: 37px;
margin-right: 0;
}
}
&.silver-cuff-mens {
&::before {
background-image: url(../images/nav-icons/style/silvercufflinks.svg);
background-position: center;
height: 25px;
width: 37px;
margin-right: 0;
}
}
&.diamond-cuff-mens {
&::before {
background-image: url(../images/nav-icons/style/diamondcufflinks.svg);
background-position: center;
height: 25px;
width: 37px;
margin-right: 0;
}
}
&.gemstone-cuff-mens {
&::before {
background-image: url(../images/nav-icons/style/gemstonecufflinks.svg);
background-position: center;
height: 25px;
width: 37px;
margin-right: 0;
}
}
&.gold-studs-mens {
&::before {
background-image: url(../images/nav-icons/style/goldstuds.svg);
margin-right: 4px;
}
}
&.gemstone-studs-mens {
&::before {
background-image: url(../images/nav-icons/style/gemstonestuds.svg);
margin-right: 4px;
}
}
&.gemstone-earrings {
&::before {
background-image: url(../images/nav-icons/style/gemstone-earrings.svg);
}
}
&.gemstone-pendants {
&::before {
background-image: url(../images/nav-icons/style/gemstone-pendants.svg);
}
}
&.gemstone-rings {
&::before {
background-image: url(../images/nav-icons/style/gemstone-rings.svg);
}
}
&.gemstone-bracelets {
&::before {
background-image: url(../images/nav-icons/style/gemstone-bracelets.svg);
}
}
&.black-earrings {
&::before {
background-image: url(../images/nav-icons/style/black-earrings.svg);
margin-right: 4px;
background-size: cover;
}
}
}
}
}
&.shape-icons {
.subnav-item {
@media only screen and (max-width: 1024px) {
flex-direction: row;
align-items: center;
}
a {
position: relative;
display: block;
line-height: 33px;
margin: 0;
display: flex;
align-items: center;
@media only screen and (max-width: 1024px) {
line-height: 20px;
width: 50%;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 3px;
width: 35px;
height: 25px;
background-size: contain;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 2px;
}
@media only screen and (max-width: 1024px) {
width: 45px;
}
}
&.round {
&::before {
background-image: url(../images/nav-icons/shape/round.svg);
height: 31px;
background-size: contain;
}
}
&.princess {
&::before {
background-image: url(../images/nav-icons/shape/princess.svg);
height: 21px;
background-size: contain;
}
}
&.oval {
&::before {
background-image: url(../images/nav-icons/shape/oval.svg);
}
}
&.pear {
&::before {
background-image: url(../images/nav-icons/shape/pear.svg);
}
}
&.marquise {
&::before {
background-image: url(../images/nav-icons/shape/marquise.svg);
}
}
&.emerald {
&::before {
background-image: url(../images/nav-icons/shape/emerald.svg);
}
}
&.baguette {
&::before {
background-image: url(../images/nav-icons/shape/baguette.svg);
}
}
&.radiant {
&::before {
background-image: url(../images/nav-icons/shape/radiant.svg);
}
}
&.cushion {
&::before {
background-image: url(../images/nav-icons/shape/cushion.svg);
}
}
&.heart {
&::before {
background-image: url(../images/nav-icons/shape/heart.svg);
}
}
&.asscher {
&::before {
background-image: url(../images/nav-icons/shape/asscher.svg);
}
}
}
}
.wedding-wear {
a {
padding: 9px 0;
border-radius: 4px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
}
}
}
&.metal-icons {
.subnav-item {
a {
position: relative;
display: block;
line-height: 33px;
margin: 0;
display: flex;
align-items: center;
@media only screen and (min-width: 1033px) {
line-height: 15.18px;
padding-top: 5px;
padding-bottom: 5px;
letter-spacing: 0;
}
@media only screen and (max-width: 1024px) {
line-height: 20px;
width: 50%;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
width: 18px;
height: 18px;
background-size: contain;
margin-top: 3px;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 7px;
}
}
&.platinum {
&::before {
background-image: url(../images/nav-icons/platinum.svg);
}
}
&.white-gold {
&::before {
background-image: url(../images/nav-icons/white-gold.svg);
}
}
&.yellow-gold {
&::before {
background-image: url(../images/nav-icons/yellow-gold.svg);
}
}
&.rose-gold {
&::before {
background-image: url(../images/nav-icons/rose-gold.svg);
}
}
&.zirconium-metal {
&::before {
background-image: url(../images/nav-icons/zirconinum-metal.svg);
}
}
}
}
}
&.stone-icons {
.subnav-item {
@media only screen and (max-width: 1024px) {
flex-direction: row;
align-items: center;
}
a {
position: relative;
display: block;
line-height: 32px;
margin: 0;
display: flex;
align-items: center;
@media only screen and (min-width: 1033px) {
line-height: 15.18px;
padding-top: 5px;
padding-bottom: 5px;
letter-spacing: 0;
}
@media only screen and (max-width: 1024px) {
line-height: 20px !important;
width: 50%;
}
@media only screen and (max-width: 767px) {
line-height: 15.18px !important;
padding-top: 5px;
padding-bottom: 5px;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
width: 22px;
height: 22px;
background-size: contain;
margin-top: 3px;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 7px;
}
}
&.nat-diamond {
&::before {
background-image: url(../images/nav-icons/select-diamond.svg);
width: 26px;
margin-right: 5px;
}
}
&.lab-diamond {
&::before {
background-image: url(../images/nav-icons/select-lab-diamond.svg);
}
}
&.yellow-diamond {
&::before {
background-image: url(../images/nav-icons/yellow-diamond.svg);
}
}
&.black-diamond {
&::before {
background-image: url(../images/nav-icons/black-diamond.svg);
}
}
&.sapphire-diamond {
&::before {
background-image: url(../images/nav-icons/sapphire.svg);
}
}
&.ruby-diamond {
&::before {
background-image: url(../images/nav-icons/ruby.svg);
}
}
&.emerald-diamond {
&::before {
background-image: url(../images/nav-icons/emerald.svg);
}
}
&.aqu-diamond {
&::before {
background-image: url(../images/nav-icons/Aquamarine.svg);
}
}
&.tan-diamond {
&::before {
background-image: url(../images/nav-icons/Tanzanite.svg);
}
}
&.amethyst-diamond {
&::before {
background-image: url(../images/nav-icons/amethyst.svg);
}
}
&.topaz-diamond {
&::before {
background-image: url(../images/nav-icons/topaz.svg);
}
}
&.peridot-diamond {
&::before {
background-image: url(../images/nav-icons/peridot.svg);
}
}
&.morganite-diamond {
&::before {
background-image: url(../images/nav-icons/morganite.svg);
}
}
&.tourmaline-diamond {
&::before {
background-image: url(../images/nav-icons/tourmaline.svg);
}
}
&.pink-sapphire {
&::before {
background-image: url(../images/nav-icons/gemstones/pink_sapphire.svg);
}
}
&.blue-sapphire {
&::before {
background-image: url(../images/nav-icons/gemstones/blue_sapphire.svg);
}
}
&.yellow-sapphire {
&::before {
background-image: url(../images/nav-icons/gemstones/yellow_sapphire.svg);
}
}
&.ruby-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/ruby.svg);
}
}
&.emerald-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/emerald.svg);
}
}
&.citrine-diamond {
&::before {
background-image: url(../images/nav-icons/citrine.svg);
}
}
&.multistone {
&::before {
background-image: url(../images/nav-icons/emerald_cushion.svg);
width: 24px;
height: 24px;
}
}
&.round-diamond {
&::before {
background-image: url(../images/nav-icons/shape/round.svg);
}
}
&.aqu-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/aquamarine.svg);
}
}
&.tan-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/tanzanite.svg);
}
}
&.amethyst-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/amethyst.svg);
}
}
&.topaz-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/topaz.svg);
}
}
&.peridot-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/peridot.svg);
}
}
&.morganite-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/morganite.svg);
}
}
&.tourmaline-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/tourmaline.svg);
}
}
&.garnet-gemstone {
&::before {
background-image: url(../images/nav-icons/gemstones/garnet.svg);
}
}
&.opal {
&::before {
background-image: url(../images/nav-icons/opal.svg);
}
}
&.alexandrite-gemstone {
&::before {
background-image: url(../images/nav-icons/alexandrite.svg);
}
}
}
}
}
&.women-icons {
.subnav-item {
a {
position: relative;
display: block;
line-height: 33px;
margin: 0;
display: flex;
align-items: center;
@media only screen and (max-width: 1024px) {
line-height: 20px;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
width: 37px;
height: 25px;
background-size: contain;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 7px;
}
}
&.classic-wedding {
&::before {
background-image: url(../images/nav-icons/style/classic-wedding-rings.svg);
height: 16px;
}
}
&.women-twotone-wedding {
&::before {
background-image: url(../images/nav-icons/style/mens-twotoneWedding-rings.svg);
background-size: 64px;
margin-top: 4px !important;
}
}
&.diamond-wedding {
&::before {
background-image: url(../images/nav-icons/style/diamond-wedding-rings.svg);
}
}
&.shaped-wedding {
&::before {
background-image: url(../images/nav-icons/style/shapped-wedding-rings.svg);
background-size: 73px;
margin-top: 8px;
}
}
&.vintage {
&::before {
background-image: url(../images/nav-icons/style/vintagerings.svg);
}
}
&.designer-wedding {
&::before {
background-image: url(../images/nav-icons/engagement/solitaire-ring.svg);
}
}
&.carved-wedding {
&::before {
background-image: url(../images/nav-icons/style/carved-wedding-rings.svg);
background-size: 51px;
background-position: -4px -7px;
}
}
&.zirconium-wedding, &.zirconium-wedding-men {
white-space: normal;
line-height: normal;
margin-top: 5px;
@media only screen and (max-width: 1500px) {
white-space: nowrap;
margin-top: 0;
}
&::before {
background-image: url(../images/nav-icons/style/zirconium-wedding.svg);
background-size: 60px;
margin-top: 4px;
}
}
}
}
}
&.mens-icons {
.subnav-item {
a {
position: relative;
display: block;
line-height: 33px;
margin: 0;
}
}
}
&.necklaces-style-icons {
.subnav-item {
a {
position: relative;
display: block;
line-height: inherit;
margin: 0;
display: flex;
align-items: center;
padding-bottom: 5px;
@media only screen and (max-width: 1024px) {
line-height: 20px;
}
@media (min-width: 1100px) and (max-width: 1445px) {
line-height: 15.18px;
padding-top: 5px;
padding-bottom: 5px;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
width: 37px;
height: 25px;
background-size: contain;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 5px;
}
}
&.solitaire-pendants {
&::before {
background-image: url(../images/nav-icons/style/solitaire-pendants.svg);
}
}
&.halo-pendants {
&::before {
background-image: url(../images/nav-icons/style/halo-pendants.svg);
background-size: 60px;
background-position: -6px center;
}
}
&.hidden-halo-pendants {
&::before {
background-image: url(../images/nav-icons/style/hidden-haro-pendants.svg);
}
}
&.threestone-pendants {
&::before {
background-image: url(../images/nav-icons/style/trilogy-pendants.svg);
}
}
&.bezel-pendants {
&::before {
background-image: url(../images/nav-icons/style/bezel-pendants.svg);
}
}
&.journey-pendants {
&::before {
background-image: url(../images/nav-icons/style/journey-pendants.svg);
}
}
&.corss-pendants {
&::before {
background-image: url(../images/nav-icons/style/cross-pendants.svg);
}
}
&.heart-pendants {
&::before {
background-image: url(../images/nav-icons/style/heart-pendants.svg);
}
}
&.flower-pendants {
&::before {
background-image: url(../images/nav-icons/style/flower-pendants.svg);
}
}
&.circle-pendants {
&::before {
background-image: url(../images/nav-icons/style/cluster-pendants.svg);
}
}
&.key-pendants {
&::before {
background-image: url(../images/nav-icons/style/key-pendants.svg);
background-size: cover;
}
}
&.designer-pendants {
&::before {
background-image: url(../images/nav-icons/style/designer-pendants.svg);
background-size: cover;
}
}
&.alphabet-pendants {
&::before {
background-image: url(../images/nav-icons/pendants/alphabet-pendants.svg);
background-size: 50%;
}
}
&.prong-set-tennis {
&::before {
background-image: url(../images/nav-icons/style/prong-set-tennis.svg);
}
}
&.rub-over-tennis {
&::before {
background-image: url(../images/nav-icons/style/rub-over-tennis.svg);
}
}
&.illusions_icon {
&::before {
background-image: url(../images/nav-icons/style/illusion-nack.svg);
}
}
&.cluster-icon {
&::before {
background-image: url(../images/nav-icons/style/cluste-nack.svg);
background-size: 100%;
height: 36px;
}
}
&.gold-chain {
&::before {
background-image: url(../images/nav-icons/style/chainnecklace.svg);
height: 36px;
margin-top: 7px;
}
}
&.bow-tie {
&::before {
background-image: url(../images/nav-icons/style/Bow-Tie-Nack.svg);
background-size: cover;
height: 30px;
}
}
&.chain-necklaces-mens {
&::before {
background-image: url(../images/nav-icons/style/chainsnecklaces.svg);
}
}
&.gold-necklaces-mens {
&::before {
background-image: url(../images/nav-icons/style/goldnecklaces.svg);
}
}
&.silver-necklaces-mens {
&::before {
background-image: url(../images/nav-icons/style/silvernecklaces.svg);
}
}
&.balck-necklaces-mens {
&::before {
background-image: url(../images/nav-icons/style/black-diamond-necklaces.svg);
}
}
}
}
}
&.width-icons {
.subnav-item {
a {
position: relative;
display: block;
line-height: 33px;
margin: 0;
display: flex;
align-items: center;
@media only screen and (max-width: 1024px) {
line-height: 20px;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
height: 25px;
background-size: contain;
width: 40px;
background-size: cover;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 7px;
}
}
&.half-icon {
&::before {
background-image: url(../images/nav-icons/eternity/half-eternity-ring.svg);
}
}
&.full-icon {
&::before {
background-image: url(../images/nav-icons/eternity/full-eternity-ring.svg);
}
}
&.channel-et-icon {
&::before {
background-image: url(../images/nav-icons/eternity/channel-et-full.svg);
background-size: 130%;
}
}
&.pave-set-icon {
&::before {
background-image: url(../images/nav-icons/eternity/pav-et-full.svg);
background-size: 120%;
}
}
&.et-2mm-icon {
&::before {
background-image: url(../images/nav-icons/eternity/2mm.svg);
}
}
&.et-2-5mm-icon {
&::before {
background-image: url(../images/nav-icons/eternity/2-5mm.svg);
}
}
&.et-3mm-icon {
&::before {
background-image: url(../images/nav-icons/eternity/3mm.svg);
}
}
&.et-4mm-icon {
&::before {
background-image: url(../images/nav-icons/eternity/4mm.svg);
}
}
&.et-5mm-icon {
&::before {
background-image: url(../images/nav-icons/eternity/5mm.svg);
}
}
}
}
}
&.bracelets-icons {
.subnav-item {
a {
position: relative;
display: block;
line-height: 33px;
margin: 0;
display: flex;
align-items: center;
@media only screen and (max-width: 1024px) {
line-height: 20px;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
width: 37px;
height: 25px;
background-size: contain;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 5px;
width: 32px;
}
}
&.prong-bracelets {
&::before {
background-image: url(../images/nav-icons/style/prong-Bracelet.svg);
}
}
&.bazel-bracelets {
&::before {
background-image: url(../images/nav-icons/style/bezel-set-brac.svg);
}
}
&.designer-bracelets {
&::before {
background-image: url(../images/nav-icons/style/prong-Bracelet.svg);
}
}
&.claw-set-bracelets {
&::before {
background-image: url(../images/nav-icons/style/claw-set-bangle.svg);
}
}
&.channel-set-bracelets {
&::before {
background-image: url(../images/nav-icons/style/channel-set-bangle.svg);
}
}
&.pav-set-bracelets {
&::before {
background-image: url(../images/nav-icons/style/pav-set-bangle.svg);
}
}
&.fancy-bracelets {
&::before {
background-image: url(../images/nav-icons/style/fancy-set-bangle.svg);
}
}
&.delicate-bracelets {
&::before {
background-image: url(../images/nav-icons/style/delicate-bracelet.svg);
}
}
&.gold-bracelets-mens {
&::before {
background-image: url(../images/nav-icons/style/goldbracelets.svg);
}
}
&.silver-bracelets-mens {
&::before {
background-image: url(../images/nav-icons/style/silverbracelets.svg);
}
}
&.gemstone-bracelets-mens {
&::before {
background-image: url(../images/nav-icons/style/gemstone-bracelet.svg);
}
}
}
}
}
&.saletype-icons {
.subnav-item {
a {
position: relative;
display: block;
line-height: inherit;
margin: 0;
display: flex;
align-items: center;
padding-bottom: 5px;
@media only screen and (max-width: 1024px) {
line-height: 20px;
}
@media (min-width: 1100px) and (max-width: 1445px) {
line-height: 15.18px;
padding-top: 5px;
padding-bottom: 5px;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
width: 37px;
height: 25px;
background-size: contain;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 5px;
}
}
&.sale-engagementrings {
&::before {
background-image: url(../images/nav-icons/style/SolitaireRings.svg);
}
}
&.sale-diamondrings {
&::before {
background-image: url(../images/nav-icons/style/TrilogyRings.svg);
}
}
&.sale-weddingrings {
&::before {
background-image: url(../images/nav-icons/style/classic-wedding-rings.svg);
}
}
&.sale-etrings {
&::before {
background-image: url(../images/nav-icons/style/7stonerings.svg);
}
}
&.sale-earrings {
&::before {
background-image: url(../images/nav-icons/style/diamond-studs.svg);
}
}
&.sale-pendants {
&::before {
background-image: url(../images/nav-icons/style/solitaire-pendants.svg);
}
}
&.sale-necklaces {
&::before {
background-image: url(../images/nav-icons/style/prong-set-tennis.svg);
}
}
&.sale-bracelets {
&::before {
background-image: url(../images/nav-icons/style/prong-Bracelet.svg);
}
}
&.sale-mens {
&::before {
background-image: url(../images/nav-icons/style/2-tone-band.svg);
background-size: 57px;
}
}
&.sale-kids {
&::before {
background-image: url(../images/nav-icons/style/kids.svg);
}
}
}
.readyto-wear {
width: 200px;
.subnav-items-title {
margin-bottom: 8px;
}
a {
display: block;
border-radius: 4px;
padding: 6px 0;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 12px;
}
}
}
}
&.divider {
position: relative;
&:after {
content: "";
height: 100%;
width: 1px;
background: radial-gradient(50% 50% at 50% 50%, #B0B0B0 0%, rgba(0, 0, 0, 0) 100%);
position: absolute;
right: 15%;
top: 0;
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
right: 11.5%;
}
}
}
&.custom-width {
@media only screen and (min-width: 1033px) {
width: 60%;
}
@media (max-width: 1500px) and (min-width: 1446px) {
width: 45%;
}
}
.shop-by-store.sub-menu-dropdown-open {
@media only screen and (max-width: 767px) {
display: flex;
align-items: center;
}
a {
@media only screen and (max-width: 1024px) {
line-height: 20px;
width: 50% !important;
white-space: wrap;
padding-top: 0 !important;
}
}
}
.readyto-wear {
&.mens-rings {
width: 195px;
@media only screen and (min-width: 1033px) {
margin-top: 20px;
}
@media (min-width: 1100px) and (max-width: 1445px) {
width: 160px;
}
&.w-cus {
min-width: 150px;
width: 100%;
max-width: 250px;
@media (min-width: 1100px) and (max-width: 1445px) {
min-width: 110px;
}
}
a {
border-radius: 4px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 12px;
display: block;
width: 100%;
&::before {
content: inherit;
}
}
a.border-gold {
display: block;
margin-bottom: 0px;
text-align: center;
padding: 12px 10px;
background: #FCF9F2;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
&:hover {
@media (hover: hover) {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
}
border-radius: 8px;
&::before {
background: linear-gradient(#F7D592 0%, #BC913D 10%, #FFF7E7 20%, #FFECC6 30%, #FFDFA2 40%, #F7D592 50%, #CB9836 60%, #FFDFA2 70%, #BB903E 80%, #F8D798 90%, #A27724 100%);
width: auto;
height: auto;
}
.subnav-items-title {
margin-bottom: 5px;
font-size: 20px;
letter-spacing: 5px;
font-family: var(--font-barlow);
font-weight: 400;
font-family: 'barlow_condensedregular';
}
p {
color: #4F4F4F;
margin-bottom: 0;
line-height: normal;
font-size: 12px;
}
}
&.readyto-items {
a.border-gold {
background: #FFEEEE;
white-space: normal;
padding: 5px 5px 10px;
.subnav-items-title {
font-size: 18px;
letter-spacing: 3px;
}
}
}
}
p {
margin-bottom: 0;
}
}
&.essentials-block {
width: 100%;
margin-left: 0px;
@media only screen and (max-width: 1032px) {
border-bottom: none;
margin: 20px auto !important;
max-width: 90%;
}
@media only screen and (max-width: 767px) {
max-width: 320px;
}
@media only screen and (max-width: 389.98px) {
max-width: 300px;
}
.subnav-items-title {
margin-bottom: 5px;
font-size: 20px;
letter-spacing: 5px;
line-height: 16.18px;
font-family: var(--font-barlow);
font-weight: 400;
font-family: 'barlow_condensedregular';
@media only screen and (min-width: 1033px) {
color: #ffffff;
}
}
>a {
display: block;
margin: 11px 0;
text-align: center;
padding: 9px 8px 7px;
border-radius: 0px;
flex: 1;
@media only screen and (min-width: 1033px) {
background: transparent !important;
&:not(:last-child) {
border-right: 1px solid #ffffff;
}
}
@media only screen and (max-width: 1032px) {
padding: 10px;
margin: 0 0 15px;
border-radius: 8px;
background: #ffffff;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
&:hover {
@media (hover: hover) {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
}
}
}
p {
color: #e3e3e4;
margin-bottom: 0;
line-height: normal;
font-size: 12px;
@media (min-width: 1100px) and (max-width: 1445px) {
font-size: 11px;
}
@media only screen and (max-width: 1032px) {
color: #4f4f4f;
}
}
.essential-box {
@media only screen and (max-width: 1032px) {
background: #F2FAEA;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
&:hover {
@media (hover: hover) {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
}
.subnav-items-title {
color: #000000;
}
}
}
.readyto-wear {
background: #FFEEEE;
&.new-arrivals {
background: #F4EDDF;
}
&.mens-rings {
width: 195px;
background: #EEEEEE;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
&:hover {
@media (hover: hover) {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
}
@media (min-width: 1100px) and (max-width: 1445px) {
width: 160px;
}
a {
border-radius: 4px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
display: block;
width: 100%;
&::before {
content: inherit;
}
}
}
p {
margin-bottom: 0;
}
}
.bespoke {
.subnav-items-title {
font-family: var(--font-dance);
font-weight: 400;
font-family: 'dancing_scriptregular';
text-transform: capitalize;
font-size: 25px;
letter-spacing: -1.44px;
}
@media only screen and (max-width: 1032px) {
background: #F1FBF6;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
&:hover {
@media (hover: hover) {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
}
.subnav-items-title {
color: #104B41;
}
}
}
}
&.by-recipient {
.subnav-item {
@media only screen and (max-width: 1024px) {
flex-direction: row;
align-items: center;
}
a {
position: relative;
display: block;
line-height: 30px;
margin: 0;
display: flex;
align-items: center;
white-space: nowrap;
@media only screen and (max-width: 1024px) {
line-height: 25px;
width: 100%;
white-space: wrap;
padding-left: 0;
}
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
width: 35px;
height: 20px;
background-size: contain;
@media (min-width: 1100px) and (max-width: 1445px) {
margin-right: 7px;
}
@media only screen and (max-width: 1024px) {
width: 45px;
}
}
&.gifts-her, .gifts-girlfriend {
&::before {
background-image: url(../images/gift/for_girlfriend.svg);
opacity: 0.7;
}
}
&.gifts-him {
&::before {
background-image: url(../images/gift/for_boyfriend.svg);
}
}
&.gifts-wife, &.gifts-bride {
&::before {
background-image: url(../images/gift/for-wife.svg);
opacity: 0.6;
}
}
&.gifts-anniversary {
&::before {
background-image: url(../images/gift/for_anniversary.svg);
}
}
&.gifts-birthday {
&::before {
background-image: url(../images/gift/for_birthday.svg);
}
}
&.gifts-boyfriend {
&::before {
background-image: url(../images/gift/for_boyfriend.svg);
}
}
&.gifts-bridesmaids {
&::before {
background-image: url(../images/gift/for_bridesmaids.svg);
}
}
&.gifts-brother {
&::before {
background-image: url(../images/gift/for_brother.svg);
}
}
&.gifts-dad {
&::before {
background-image: url(../images/gift/for_dad.svg);
}
}
&.gifts-girlfriend {
&::before {
background-image: url(../images/gift/for_girlfriend.svg);
opacity: 0.6;
}
}
&.gifts-husband {
&::before {
background-image: url(../images/gift/for_husband.svg);
}
}
&.gifts-milestones {
&::before {
background-image: url(../images/gift/for_milestones.svg);
}
}
&.gifts-mum {
&::before {
background-image: url(../images/gift/for_mum.svg);
opacity: 0.6;
}
}
&.gifts-daughter, &.gifts-selfgift {
&::before {
background-image: url(../images/gift/for_sister.svg);
opacity: 0.6;
}
}
&.gifts-friends {
&::before {
background-image: url(../images/gift/for_boyfriend.svg);
}
}
&.gifts-bridesmaid, &.gifts-grandparents {
&::before {
background-image: url(../images/gift/for_bridesmaids.svg);
background-size: cover;
width: 29px;
height: 16px;
margin-left: 5px;
opacity: 0.6;
}
}
}
}
}
.needit_soon {
margin-top: 35px;
max-width: 220px;
@media only screen and (max-width: 1032px) {
margin-inline: calc(var(--spacing) * 2.5);
}
@media only screen and (max-width: 1032px) {
margin-block: 5px;
}
@media only screen and (max-width: 1032px) {
max-width: 100%;
}
& a {
display: block;
text-transform: unset;
&::before {
&::before {
content: var(--tw-content);
--tw-content: inherit !important;
content: var(--tw-content) !important;
}
}
}
& .sub-title {
margin-bottom: 5px;
display: block;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 15px;
color: var(--color-black);
@media (min-width: 1100px) and (max-width: 1445px) {
font-size: 13px;
}
@media only screen and (max-width: 767px) {
font-size: 13px;
}
}
& .menu-highlightext {
position: relative;
display: block;
border-radius: 0.25rem;
background-color: #e9e6dc;
padding-inline: calc(var(--spacing) * 4) !important;
padding-top: 5px !important;
padding-bottom: calc(var(--spacing) * 2.5) !important;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-leading: calc(var(--spacing) * 6);
line-height: calc(var(--spacing) * 6);
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
--tw-tracking: 1px;
letter-spacing: 1px;
color: #0d0900;
@media (min-width: 1100px) and (max-width: 1445px) {
font-size: 12px;
}
@media (min-width: 1100px) and (max-width: 1445px) {
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
}
@media (min-width: 1100px) and (max-width: 1445px) {
--tw-tracking: 0.5px;
letter-spacing: 0.5px;
}
@media (min-width: 1100px) and (max-width: 1445px) {
white-space: normal;
}
@media only screen and (max-width: 767px) {
width: 99%;
}
@media only screen and (max-width: 767px) {
border-radius: 0;
}
@media only screen and (max-width: 767px) {
padding-inline: calc(var(--spacing) * 2.5) !important;
}
@media only screen and (max-width: 767px) {
padding-top: 5px !important;
}
@media only screen and (max-width: 767px) {
padding-bottom: calc(var(--spacing) * 2) !important;
}
@media only screen and (max-width: 767px) {
font-size: 13px;
}
@media only screen and (max-width: 767px) {
--tw-leading: calc(var(--spacing) * 5) !important;
line-height: calc(var(--spacing) * 5) !important;
}
}
}
}
&.nav_btm {
@media only screen and (min-width: 1033px) {
border-bottom: 1px solid #ffffff;
background: #000000;
}
}
.build_bg {
@media only screen and (min-width: 1033px) {
background: #E9E6DC;
padding: 15px;
border-radius: 4px;
}
@media (min-width: 1100px) and (max-width: 1445px) {
padding: 14px 13px 10px 14px;
}
.own-rings-bg {
@media only screen and (min-width: 1033px) {
max-width: 275px;
}
}
}
&.ring-builder-nav {
.subnav-items {
&.custom-width {
@media only screen and (min-width: 1033px) {
width: 50%;
}
@media only screen and (max-width: 1032px) {
.subnav-item {
padding-left: 15px;
}
}
}
&.ring-builder-items {
padding: 0;
border-radius: 6px;
height: 100%;
@media only screen and (min-width: 1033px) {
min-width: 275px;
max-width: 275px;
margin-right: 30px;
}
@media only screen and (max-width: 1445px) and (min-width: 1366px) {
margin-right: 20px;
}
@media only screen and (min-width: 1500px) {
min-width: 310px;
max-width: 310px;
margin-right: 30px;
}
@media only screen and (min-width: 1700px) {
margin-right: 45px;
}
width: auto;
&.md-gold {
@media only screen and (max-width: 1032px) {
max-width: 100%;
background: #ffffff;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
&:hover {
@media (hover: hover) {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
}
padding-top: 5px;
visibility: visible;
height: auto;
&:not(.build-hide) {
margin: 10px 10px 5px 10px;
}
&::before {
background: linear-gradient(#F7D592 0%, #BC913D 10%, #f3a200 20%, #e7a31c 30%, #FFDFA2 40%, #F7D592 50%, #CB9836 60%, #FFDFA2 70%, #BB903E 80%, #F8D798 90%, #A27724 100%);
}
.subnav-item {
a {
width: 100%;
}
}
}
}
&.own-rings {
min-width: 250px;
@media only screen and (max-width: 1500px) and (min-width: 1100px) {
margin-right: 40px;
}
}
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
padding-left: 0px;
}
.subnav-items-title {
a {
text-transform: uppercase;
padding-left: 0;
}
@media only screen and (max-width: 1024px) {
padding-left: 10px;
}
}
.subnav-item {
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
padding-right: 0;
}
img.ringbuilder-img {
text-align: left;
width: 40%;
margin-left: 5px;
margin-bottom: 13px;
@media only screen and (max-width: 1024px) {
margin-bottom: 0;
}
}
.wedding-ringbuilder {
img.ringbuilder-img {
width: 14%;
@media only screen and (max-width: 1024px) {
margin-right: 5px;
width: 10%;
margin-bottom: 0px;
}
}
a.img-link {
padding-left: 0;
&::before {
content: inherit;
}
}
}
a {
position: relative;
padding: 2px 0 8px 40px;
@media (min-width: 1100px) and (max-width: 1445px) {
padding-left: 38px;
}
@media only screen and (max-width: 1024px) {
padding-bottom: 4px;
}
&::before {
content: "";
background: url(../images/nav-icons/select-setting1.svg) no-repeat left top;
width: 34px;
height: 30px;
background-size: contain;
position: absolute;
left: 0;
top: 6px;
}
&.solitaire-pendants-build {
&::before {
background-image: url(../images/nav-icons/solitair-pendant-builder.svg);
top: 0;
}
}
&.select-diamond {
&::before {
background-image: url(../images/nav-icons/select-diamond.svg);
top: 1px;
width: 35px;
}
}
&.select-lab-diamond {
&::before {
background-image: url(../images/nav-icons/select-lab-diamond.svg);
top: 0;
width: 28px;
}
}
&.select-gemstone {
&::before {
background-image: url(../images/nav-icons/select-genstone.svg);
top: 0;
}
}
&.select-fancy {
&::before {
background-image: url(../images/nav-icons/yellow-nav.svg);
top: 0;
}
}
&.coloured-natural {
&::before {
background-image: url(../images/nav-icons/natural-color.svg);
top: 0;
}
}
&.coloured-labgrown {
&::before {
background-image: url(../images/nav-icons/labgrown-colored.svg);
top: 0;
width: 28px;
}
}
&.wedding-women, &.wedding-classic {
&::before {
background-image: url(../images/nav-icons/style/classic-wedding-rings.svg);
width: 37px;
height: 25px;
top: 10px;
left: -2px;
}
}
&.wedding-men {
&::before {
background-image: url(../images/nav-icons/style/carved-wedding-rings.svg);
background-size: 51px;
background-position: -7px -12px;
width: 37px;
height: 25px;
}
}
&.wedding-twotone {
&::before {
background-image: url(../images/nav-icons/style/mens-twotoneWedding-rings.svg);
top: 2px;
left: -2px;
background-size: 64px;
width: 37px;
height: 25px;
background-position: center;
}
}
&.wedding-diamond {
&::before {
background-image: url(../images/nav-icons/style/diamond-wedding-rings.svg);
height: 31px;
top: 11px;
}
}
&.wedding-shaped {
&::before {
background-image: url(../images/nav-icons/style/shapped-wedding-rings.svg);
background-size: 73px;
top: 5px;
width: 37px;
height: 25px;
background-position: center;
}
}
&.wedding-gemstone {
&::before {
background-image: url(../images/half-eternity-ring.svg);
}
}
}
}
&.enternity_ringbuilder {
padding-left: 13px;
min-width: 289px;
width: auto;
@media only screen and (min-width: 1033px) {
max-width: 289px;
@media (min-width: 1100px) and (max-width: 1445px) {
max-width: 260px;
min-width: 260px;
margin-right: 10px;
}
.subnav-item {
padding-right: 18px;
img.ringbuilder-img {
width: 50%;
}
}
}
.subnav-items-title {
a {
padding-left: 0;
}
}
a {
padding-left: 45px;
&::before {
width: 40px;
height: 28px;
top: 2px;
background-position: center center;
background: url(../images/nav-icons/et-icon1.svg) no-repeat left top;
}
&.select-setting {
&::before {
background-image: url(../images/nav-icons/et-icon1.svg);
top: 5px;
width: 39px;
background-size: contain;
}
}
&.select-diamond {
&::before {
width: 36px;
background-image: url(../images/nav-icons/et-icon2.svg);
background-size: contain;
top: 6px;
}
}
&.select-lab-diamond {
&::before {
width: 40px;
background-image: url(../images/nav-icons/et-icon5.png);
background-size: cover;
top: -9px;
height: 44px;
left: -2px;
}
}
&.select-gemstone {
&::before {
background-image: url(../images/nav-icons/et-icon4.svg);
background-position: center center;
background-size: contain;
left: 4px;
top: -2px;
width: 35px;
}
}
}
}
&.gifts-section {
padding: 0;
@media only screen and (min-width: 1033px) {
min-width: 200px;
max-width: 200px;
background: none;
}
@media only screen and (min-width: 1366px) {
margin-right: 50px;
}
@media only screen and (min-width: 1700px) {
margin-right: 25px;
margin-left: 20px;
}
.subnav-items-title {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 10px 10px 10px 10px;
@media only screen and (min-width: 1033px) {
padding: 15px 0 15px 15px;
background: #F4EDDF;
}
}
.subnav-item:not(.no-images) {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
@media only screen and (max-width: 1024px) {
&.sub-menu-dropdown-open {
padding: 10px 0px 0 10px;
}
}
@media only screen and (min-width: 1033px) {
margin-bottom: 20px;
padding: 0 0 15px 15px;
background: #F4EDDF;
}
a {
@media only screen and (min-width: 1033px) {
padding-bottom: 0;
margin: 0;
margin-bottom: 8px;
line-height: 25px;
}
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
min-height: unset;
}
@media only screen and (max-width: 1024px) {
width: 50%;
}
&::before {
width: 30px;
}
&.birthday {
&::before {
background-image: url(../images/birthday.svg);
top: -7px;
}
}
&.graduation {
&::before {
background-image: url(../images/graduation.svg);
top: 0;
}
}
&.bridemaid {
&::before {
background-image: url(../images/bridesmaid.svg);
top: 0;
width: 28px;
}
}
&.wedding {
&::before {
background-image: url(../images/wedding.svg);
top: 0;
}
}
&.anniversary {
&::before {
background-image: url(../images/anniversary.svg);
top: 0;
width: 23px;
left: 4px;
}
}
&.christmas {
margin-bottom: 12px;
&::before {
background-image: url(../images/christmas.svg);
top: 0;
left: -2px;
}
}
&.valentine {
&::before {
background-image: url(../images/valentinesicon.svg);
top: -4px;
background-size: contain;
width: 40px;
height: 35px;
}
}
&.mothersday {
margin-top: 8px;
&::before {
background-image: url(../images/mothersdayicon.png);
top: -12px;
background-size: contain;
width: 40px;
height: 35px;
opacity: 0.8;
}
}
&.giftcards {
&::before {
background-image: url(../images/giftcard.svg);
top: -4px;
width: 25px;
left: 0px;
}
}
}
}
}
.dh-boutique {
background: #000;
border-radius: 4px;
padding: 15px;
.subnav-items-title {
background: none;
padding: 0;
border-radius: 0;
color: #fff;
}
p {
color: #E0D2B8;
font-size: 12px;
margin-top: 5px;
}
a {
border-radius: 4px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 13px;
text-transform: uppercase;
display: block;
width: 100%;
color: #fff;
border: 1px solid #fff;
padding: 9px 0;
text-align: center;
}
}
}
}
}
.buider-btn.subnav-items-title, .shop-all.subnav-items-title {
@media only screen and (min-width: 1033px) {
display: none;
}
padding: 5px 10px 5px 12px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
text-transform: unset;
border-bottom: var(--border-menu);
}
}
&.engement-rings {
.container-fluid {
.sub-nav--inner {
.subnav-items {
&.stone-icons {
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
width: 40%;
}
&.gem-stone-icons {
width: 45%;
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
width: 45%;
}
}
}
&.ring-builder-items {
@media only screen and (min-width: 1033px) {
min-width: 330px;
max-width: 330px;
}
}
}
}
}
}
&.diamond-rings {
.container-fluid {
.sub-nav--inner {
.subnav-items {
&.style-icons {
@media only screen and (min-width: 1033px) {
width: 65%;
}
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
width: 70%;
}
@media only screen and (max-width: 1660px) and (min-width: 1440px) {
width: 60%;
}
}
&.stone-icons {
@media only screen and (min-width: 1033px) {
.subnav-item {
flex-direction: row;
a {
width: 50%;
}
}
}
@media only screen and (min-width: 1366px) {
width: 70%;
}
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
width: 70%;
}
@media only screen and (min-width: 1700px) {
width: 65%;
}
@media only screen and (max-width: 1660px) and (min-width: 1440px) {
.med-hide {
display: none;
white-space: pre;
}
}
.med-hide {
white-space: pre;
}
}
&.collections {
@media only screen and (max-width: 1600px) and (min-width: 1440px) {
width: 30%;
}
@media only screen and (min-width: 1440px) {
width: 35%;
}
}
&.shape-icons {
@media only screen and (min-width: 1033px) {
width: 35%;
}
@media only screen and (max-width: 1660px) and (min-width: 1440px) {
width: 32%;
}
}
&.gifts-section {
@media only screen and (max-width: 1600px) and (min-width: 1440px) {
margin-right: 30px;
}
@media only screen and (min-width: 1366px) {
margin-right: 50px;
}
}
&.metal-icons {
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
width: 35%;
}
}
}
}
.banner-right {
&.bg-img {
@media only screen and (min-width: 1033px) {
.static-banner {
background: url(../images/nav-banners/dropdown_halo.jpg) no-repeat top center/cover;
}
}
}
}
}
}
&.wedding-rings {
.container-fluid {
.banner-right {
&.bg-img {
@media only screen and (min-width: 1033px) {
.static-banner {
background: url(../images/nav-banners/dropdown_weds.jpg) no-repeat top center/cover;
}
}
}
}
}
.sub-nav--inner {
.subnav-items {
@media only screen and (max-width: 1660px) and (min-width: 1440px) {
&.ring-builder-items {
margin-right: 30px;
}
.collections {
width: 36%;
}
}
}
}
}
&.gemstone-menu {
.sub-nav--inner {
.subnav-items {
&.stone-icons {
@media only screen and (max-width: 1500px) and (min-width: 1100px) {
width: 50%;
}
}
&.gem-stone-icons {
@media only screen and (min-width: 1033px) {
width: 52%;
}
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
width: 72%;
}
.browse_link {
width: 100%;
}
}
&.collections {
@media only screen and (min-width: 1033px) {
width: 35%;
}
@media only screen and (min-width: 1470px) {
width: 30%;
}
}
&.gifts-section {
@media only screen and (max-width: 1700px) and (min-width: 1440px) {
margin-right: 50px !important;
}
@media only screen and (min-width: 1700px) {
margin-left: 0px !important;
}
}
@media (min-width: 1100px) and (max-width: 1445px) {
&.essentials-block p {
font-size: 10px;
}
}
&.md-gold {
@media only screen and (max-width: 1032px) {
.subnav-item {
a {
margin: 5px 0;
}
}
}
}
@media only screen and (max-width: 1032px) {
&.gifts-section {
border-bottom: none;
.subnav-items-title {
line-height: 20px;
@media only screen and (max-width: 1032px) {
border-bottom: var(--border-menu);
}
}
}
&.build-parent {
border-bottom: none;
.subnav-items-title:not(.buider-btn) {
border-bottom: var(--border-menu);
}
.sub-menu-dropdown-open {
border-bottom: var(--border-menu);
}
}
.subnav-item.no-images {
padding-top: 0;
a {
width: 100%;
}
}
}
}
}
.banner-right {
&.bg-img {
@media only screen and (min-width: 1033px) {
.static-banner {
background: url(../images/nav-banners/dropdown_gemstone.jpg) no-repeat top center/cover;
}
}
}
}
}
&.necklaces-rings {
.container-fluid {
.sub-nav--inner {
.subnav-items {
.subnav-item {
padding-right: 10px;
}
.necklaces-style-icons {
@media only screen and (min-width: 1700px) {
width: 65%;
}
}
@media only screen and (min-width: 1033px) {
&:first-child {
width: 40%;
}
&:nth-child(2) {
width: 60%;
&::after {
right: 10%;
}
}
&:nth-child(3) {
width: 36%;
}
&:nth-child(4) {
width: 34%;
}
&.metal-icons {
width: 35%;
}
&.nav_btm {
width: 100%;
}
}
}
&.stone-icons {
.subnav-item {
a {
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
line-height: 15.18px;
padding-top: 5px;
padding-bottom: 5px;
}
}
}
}
}
}
.banner-right {
&.bg-img {
@media only screen and (min-width: 1033px) {
.static-banner {
background: url(../images/nav-banners/dropdown_pendant.jpg) no-repeat top center/cover;
}
}
}
}
}
&.pendant_builder {
.container-fluid {
.sub-nav--inner {
.subnav-items {
@media only screen and (min-width: 1033px) {
width: 15%;
&.popular-categories {
width: 38% !important;
@media only screen and (max-width: 767px) {
width: 100% !important;
}
}
&:first-child {
width: 40%;
}
&:nth-child(2) {
width: 60%;
margin-right: 20px;
&::after {
right: 10%;
}
}
&:nth-child(3) {
width: 26%;
}
&.stone-icons {
width: 20%;
}
&:nth-child(4) {
width: 15%;
}
&.metal-icons {
width: 35%;
}
&.nav_btm {
width: 100%;
}
}
&.ring-builder-items.build-hide {
min-width: 270px;
max-width: 270px;
@media (min-width: 1100px) and (max-width: 1445px) {
min-width: 250px;
max-width: 250px;
}
}
&.ring-builder-items.gifts-section {
margin-right: 20px;
margin-left: 0;
min-width: 180px;
max-width: 180px;
@media only screen and (max-width: 1024px) {
min-width: 100%;
max-width: 100%;
}
}
.readyto-wear.mens-rings {
width: 150px;
}
}
}
}
}
&.bralects-rings {
.container-fluid {
.sub-nav--inner {
.subnav-items {
.subnav-item {
padding-right: 25px;
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
padding-right: 0;
}
}
@media only screen and (min-width: 1033px) {
&:first-child {
width: 44%;
}
&.stone-icons {
width: 46%;
}
&.nav_btm {
width: 100%;
}
}
@media (min-width: 1100px) and (max-width: 1445px) {
&.gifts-section {
margin-right: 70px;
}
}
&.bracelets-icons, &.stone-icons, &.metal-icons {
.subnav-item {
a {
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
line-height: 15.18px;
padding-top: 5px;
padding-bottom: 5px;
}
}
}
}
}
}
.banner-right {
&.bg-img {
@media only screen and (min-width: 1033px) {
.static-banner {
background: url(../images/nav-banners/dropdown_bracelet.jpg) no-repeat top center/cover;
}
}
}
}
}
}
&.earrings-rings {
.container-fluid {
.sub-nav--inner {
.subnav-items {
&.style-icons {
@media only screen and (min-width: 1366px) {
width: 70%;
}
@media only screen and (max-width: 1500px) and (min-width: 1100px) {
width: 70%;
}
@media only screen and (min-width: 1501px) {
width: 65%;
}
}
&.stone-icons {
@media only screen and (min-width: 1366px) {
width: 70%;
}
@media only screen and (max-width: 1500px) and (min-width: 1100px) {
width: 88%;
}
@media only screen and (min-width: 1501px) {
width: 65%;
}
.subnav-item {
a {
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
line-height: 15.18px;
padding-top: 5px;
padding-bottom: 5px;
}
}
}
}
&.shape-icons {
@media only screen and (min-width: 1366px) {
width: 36%;
}
}
&.gifts-section {
@media only screen and (max-width: 1700px) and (min-width: 1445px) {
margin-right: 80px !important;
}
@media only screen and (min-width: 1700px) {
margin-left: 0px !important;
}
}
}
}
.banner-right {
&.bg-img {
@media only screen and (min-width: 1033px) {
.static-banner {
background: url(../images/nav-banners/dropdown_earrings.jpg) no-repeat top center/cover;
}
}
}
}
}
}
&.eternity-rings {
.container-fluid {
.sub-nav--inner {
.subnav-items {
&.stone-icons {
@media only screen and (min-width: 1033px) {
width: 42%;
}
}
&.stone-icons, &.metal-icons {
.subnav-item {
a {
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
line-height: 15.18px;
padding-top: 5px;
padding-bottom: 5px;
letter-spacing: 0;
}
}
}
}
}
}
.banner-right {
&.bg-img {
@media only screen and (min-width: 1033px) {
.static-banner {
background: url(../images/nav-banners/dropdown_eternity.jpg) no-repeat top center/cover;
}
}
}
}
}
}
&.mens-navigation {
.sub-nav--inner {
.subnav-items.style-icons {
.subnav-item {
a.zirconium-diamond {
@media only screen and (max-width: 767px) {
white-space: nowrap;
}
&::before {
@media only screen and (max-width: 1500px) {
width: 35px;
}
}
}
}
}
}
.banner-right {
&.bg-img {
@media only screen and (min-width: 1033px) {
.static-banner {
background: url(../images/nav-banners/dropdown_mens.jpg) no-repeat top center/cover;
}
}
}
}
}
&.support-nav {
.container {
.sub-nav--inner {
.subnav-items {
width: 100%;
.subnav-item {
a {
width: 100%;
}
&.extra-nav {
a {
width: 35%;
}
}
}
}
}
}
}
&.our-stores {
.container {
.sub-nav--inner {
.subnav-items {
width: 75%;
}
}
}
}
&.sale-nav, &.education-nav, &.discover-nav {
.container {
max-width: 1200px;
}
@media only screen and (max-width: 1032px) {
.menu-left {
padding-bottom: 0;
}
.sub-nav--inner {
.subnav-items {
.subnav-item a {
margin: 0;
width: 100%;
padding: 7px 7px 7px 7px;
}
}
}
}
}
&.discover-nav {
.container {
max-width: 1200px;
}
@media only screen and (max-width: 1032px) {
.menu-left {
padding-bottom: 0;
}
.sub-nav--inner {
.subnav-items {
.subnav-item a {
margin: 0;
width: 50%;
padding: 7px 7px 7px 7px;
}
}
}
}
}
&.sale-nav {
.container-fluid {
.col-xl-9 {
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
width: 100%;
}
}
}
}
}
&.rings-menu-li>.sub-nav {
border-top: none;
}
.ring-nav {
@media only screen and (min-width: 1033px) {
top: 46px;
border-top: 1px solid $bg-black;
}
}
@media only screen and (min-width: 1033px) {
&:hover {
.sub-nav {
display: block;
z-index: 999999;
}
>a {
font-weight: 700;
}
.banner-right, .col-lg-4 {
&.bg-img {
.sub-nav--inner {
width: 100%;
height: 100%;
}
.static-banner {
background: url(../images/nav-banners/engagment-queen.jpg) no-repeat top center;
background-size: cover;
width: 100%;
height: 100%;
img {
display: none;
}
}
}
}
}
}
img.discover-img {
width: 50px;
margin-left: 5px;
opacity: 0.75;
@media only screen and (max-width: 1445px) and (min-width: 1100px) {
width: 40px;
}
}
&.our-stores-nav {
.sub-nav {
@media (min-width: 1100px) and (max-width: 1445px) {
.menu-left {
padding-left: 2rem !important;
width: 100%;
}
}
.sub-nav--inner {
.subnav-items.our-stores-child-nav {
background: #e9e6dc;
padding: 15px;
border-radius: 4px;
width: 40%;
margin-right: 50px;
@media (min-width: 1100px) and (max-width: 1445px) {
width: 37%;
margin-right: 20px;
padding: 10px;
}
@media only screen and (max-width: 767px) {
width: 100%;
padding: 5px 0;
background: #fff;
}
.subnav-items-title {
@media (min-width: 1100px) and (max-width: 1445px) {
padding-left: 0;
}
}
.subnav-item {
flex-direction: inherit;
a {
width: 50%;
@media (min-width: 1100px) and (max-width: 1445px) {
padding-left: 0;
}
}
}
}
}
}
}
}
}
@media only screen and (max-width: 1032px) {
position: fixed;
top: calc(var(--spacing) * 10);
left: calc(var(--spacing) * 0);
z-index: 9999;
height: 100%;
width: 90%;
max-width: 440px;
overflow-x: hidden;
padding-bottom: 170px;
transition: 0.25s ease-in-out;
.nav-bottom-bar {
display: none;
}
.sub-menu-header {
padding: 5px 27px;
font-size: 14px;
width: 100%;
i {
position: absolute;
width: 25px;
height: 25px;
top: 9px;
left: 9px;
}
}
.main-menu-items {
padding-bottom: 100px;
.main-menu-item {
.main-menu-item-arrow {
margin-right: 10px;
margin-top: 8px;
color: #646464;
font-size: 12px;
}
.discover-img {
width: 48px;
margin-left: -2px;
opacity: .8;
}
}
}
.sub-menu {
left: calc(var(--spacing) * 0);
height: 100vh;
width: 100%;
padding-bottom: calc(var(--spacing) * 24);
.sub-sub-acitve {
border-bottom: $border-menu;
.fa-plus:before {
content: "\f068";
}
}
}
.sub-menu-dropdown {
visibility: hidden;
height: 0;
}
.main-menu-items {
.sub-menu-dropdown {
@media only screen and (max-width: 1032px) {
a {
width: 50%;
}
}
}
}
.build-hide {
visibility: hidden !important;
height: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
}
.sub-menu-dropdown-item {
border-bottom: 1px solid #E5E5E5;
}
.sub-menu-dropdown-open {
visibility: visible;
height: auto;
background: #fff;
list-style: none;
padding: 7px 0px 5px 5px;
.sub-menu-dropdown-item {
border-bottom: 0;
}
}
}
}
&.bg-tab-black {
@media only screen and (max-width: 1032px) {
background: #000000;
border-bottom: 0.5px solid;
border-image: var(--goldstroke) 1;
.header__logo {
.header_stores a {
color: #ffffff;
}
img {
filter: invert(1);
}
}
nav.navbar {
background: #000000;
ul li {
>a {
color: #ffffff;
}
.discover-img {
filter: invert(1);
}
}
}
.counter-label {
background: #ffffff;
color: #000;
}
.main-menu-items .main-menu-item {
background: #000;
border-bottom: 0.5px solid;
border-image: var(--goldstroke) 1;
>a {
color: #ffffff !important;
&.text-danger {
color: #dc3545 !important;
}
.main-menu-item-arrow {
color: #bdbbbb;
}
}
}
.header__nav.navbar {
border-top: 0.5px solid;
border-image: var(--goldstroke) 1;
.sub-nav .sub-nav--inner >.subnav-items-title:first-child, .sub-menu-header {
background: #000;
color: #fff;
border-bottom: 0.5px solid;
border-image: var(--goldstroke) 1;
}
.btm-navbar {
background: #000;
color: #fff;
border-top: 0.5px solid;
border-image: var(--goldstroke) 1;
img {
filter: invert(1);
}
p {
color: #fff;
}
}
}
}
}
&.top_cus {
top: 0px;
}
&.top_cus3 {
top: 76.5px;
top: 0;
}
img, svg {
display: inline-block;
}
}
p {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
color: var(--text-black);
line-height: 20.45px;
@media only screen and (max-width: 767px) {
font-size: 12px;
}
}
.hero-contact {
p {
font-family: var(--font-vietnam);
font-weight: 500;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-leading: calc(var(--spacing) * 6);
line-height: calc(var(--spacing) * 6);
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
color: var(--color-black);
a {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-leading: calc(var(--spacing) * 6);
line-height: calc(var(--spacing) * 6);
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
color: var(--color-black);
text-decoration-line: none;
}
&.phone-number {
a {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
--tw-leading: 40.91px;
line-height: 40.91px;
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
color: var(--color-black);
}
}
i {
margin-right: 5px;
vertical-align: middle;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
color: #363840;
}
}
.contact-stores {
ul {
margin-top: 0px;
flex-direction: row;
@media only screen and (max-width: 1032px) {
flex-wrap: wrap;
}
li {
@media only screen and (max-width: 1032px) {
width: 32%;
}
@media only screen and (max-width: 767px) {
width: 31.5%;
}
a {
padding: 6px 20px 8px;
&:hover {
color: #ffffff;
background: #000000;
}
@media only screen and (max-width: 767px) {
padding: 6px 0 8px;
}
}
}
}
}
}
.whish-list-title {
a {
background: url(../images/share-btn.svg) no-repeat left center;
padding-left: 26px;
font-size: 16px;
color: #000;
}
}
.tp-static {
position: relative;
margin-top: calc(3px * -1);
display: flex;
height: 22px;
width: 100%;
max-width: 180px;
align-items: flex-start;
gap: 5px;
padding: calc(var(--spacing) * 0);
svg {
height: 100%;
width: 100%;
max-width: 100px;
}
@media only screen and (max-width: 767px) {
display: block;
height: 34px;
max-width: 74px;
margin-top: 0;
svg {
height: 15px;
}
}
&.tp-stars--5 {
.tp-star:nth-of-type(-n + 5) .tp-star__canvas, .tp-star:nth-of-type(-n + 5) .tp-star__canvas--half {
fill: #00b67a;
}
}
}
.needit_soon {
@media only screen and (max-width: 1032px) {
margin: 5px 10px 5px;
}
}
.needit_soon .sub-title {
margin-bottom: 5px;
display: block;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 13px;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-black);
}
.needit_soon .menu-highlightext {
position: relative;
display: block;
border-radius: 0.25rem;
background-color: #e9e6dc;
padding-inline: calc(var(--spacing) * 2.5);
padding-top: 5px;
padding-bottom: calc(var(--spacing) * 2) !important;
font-size: 13px !important;
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
--tw-tracking: 1px;
letter-spacing: 1px;
color: #0d0900;
}
.nav-bottom-bar {
margin-bottom: 45px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: #000000;
background-color: #000;
ul {
display: flex;
align-items: center !important;
justify-content: space-around !important;
li {
text-align: left;
font-family: var(--font-vietnam) !important;
font-weight: 400 !important;
font-size: var(--text-sm) !important;
line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
--tw-leading: 20.45px !important;
line-height: 20.45px !important;
color: var(--color-white);
a {
display: flex;
align-items: center;
padding-inline: 1px !important;
padding-block: 13px !important;
font-family: var(--font-vietnam) !important;
font-weight: 400 !important;
font-size: 12px !important;
color: var(--color-white) !important;
text-transform: inherit !important;
&::before {
margin-right: calc(var(--spacing) * 0.5);
display: inline-block;
height: calc(var(--spacing) * 5);
width: 25px;
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
--tw-invert: invert(100%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
--tw-content: '';
content: var(--tw-content);
}
}
&:nth-child(1) a::before {
background-image: url(../images/icons/fiance-icon.svg);
}
a.price-match::before {
background-image: url(../images/icons/pound-icon.svg);
}
a.stores-wide::before {
background-image: url(../images/icons/stone-icon.svg);
}
a.warranty::before {
background-image: url(../images/icons/warranty_icon.svg);
}
a.in-store::before {
background-image: url(../images/icons/ring-icon.svg);
}
a.nhs-icon::before {
background-image: url(../images/icons/nhs-icon.svg);
}
}
}
}
.promo-top:not(.hidden) ~ .header.top_cus .main-menu.menu_zig {
top: 39px;
}
.promo-top:not(.hidden) ~ .header.top_cus.ireland_header .main-menu {
&.menu_zig, &.fixheader {
top: 53px;
}
}
:where(:focus-visible) {
--tw-outline-style: none !important;
outline-style: none !important;
}
.btn-gold-border-active {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
.location-dropdown-wrap {
.store-locator-stores {
@media only screen and (max-width: 1032px) {
li {
width: 15.33%;
}
}
@media only screen and (max-width: 767px) {
li {
width: 31.33%;
}
}
}
.store-locator-map {
margin-bottom: 40px;
@media only screen and (max-width: 767px) {
margin-bottom: 12px;
}
iframe {
width: 100%;
height: 320px;
}
img {
height: 310px;
@media only screen and (max-width: 767px) {
height: auto;
}
}
}
.store-locator-info {
text-align: center;
.store-locator-title {
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 24px;
line-height: 31.03px;
letter-spacing: 0.5px;
color: #000;
margin-bottom: 20px;
}
p {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
line-height: 20.45px;
text-align: center;
color: #000;
margin-bottom: 0;
&:last-child {
margin-bottom: 20px;
}
a {
color: #000;
text-decoration: underline !important;
margin-top: 8px;
display: block;
}
}
}
.store-locator-hours {
.store-title {
margin-bottom: 20px;
}
p {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
line-height: 20.45px;
color: #000;
margin-bottom: 2px;
}
.store-title.fs-6s {
font-size: 1rem !important;
}
}
#tab_element_content {
margin-top: 15px;
@media only screen and (max-width: 767px) {
margin-top: 5px;
}
}
.store-locator-contact {
ul {
&.list-group-horizontal {
margin-top: 20px;
flex-direction: row;
@media only screen and (max-width: 767px) {
align-items: center;
}
}
li {
a {
background: #FFFFFF;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 12px;
color: #000;
line-height: 17.53px;
position: relative;
display: block;
padding: 75px 10px 10px;
min-height: 103px;
white-space: nowrap;
border-radius: 4px;
&::before {
content: "";
background: url(../images/store/store-phone.png) no-repeat center center;
width: 100%;
height: 65px;
position: absolute;
top: 0;
margin: auto;
left: 0;
right: 0;
}
}
&:nth-child(2) {
a {
&::before {
background-image: url(../images/store/store-email.png);
height: 80px;
}
}
}
&:nth-child(3) {
a {
text-decoration: none;
&::before {
background-image: url(../images/store/store-whatsapp.png);
background-size: 35%;
top: 10px;
}
}
}
}
}
}
}
.float-right {
float: right;
}
.wishbackdrop {
@media only screen and (max-width: 1032px) {
z-index: 999999;
}
}
.flex-32 {
flex: 0 0 32%;
}
#messages a {
text-decoration-line: underline;
}
.actions-btns iframe {
height: 40px !important;
}
.cart-drawer {
.minicart-price span:first-child {
margin-bottom: calc(var(--spacing) * 1);
display: block;
color: var(--color-gray-700);
text-decoration-line: line-through;
}
}
.cart-drawer .paypal, .cart-drawer .paypal-buttons.paypal-buttons-context-iframe {
height: 40px !important;
}
@media only screen and (max-width: 962px) {
.buying-guide-style h3 {
margin-top: 30px;
}
}
.new-social-icons {
margin-top: 30px;
@media only screen and (max-width: 767px) {
margin: 10px 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
text-align: right;
@media only screen and (max-width: 767px) {
text-align: center;
}
li {
display: inline-block;
margin-right: 20px;
@media only screen and (max-width: 767px) {
margin-right: 8px;
}
a {
display: block;
color: #fff;
padding: 1px 0 0;
font-size: 22px;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
}
&:first-child {
a {
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
}
&:nth-child(2) {
a {
background-color: #2b4170;
background: -moz-linear-gradient(top, #3b5998, #2b4170);
background: -ms-linear-gradient(top, #3b5998, #2b4170);
background: -webkit-linear-gradient(top, #3b5998, #2b4170);
border: 1px solid #2b4170;
text-shadow: 0 -1px -1px #1f2f52;
}
}
&:nth-child(3) {
a {
background-image: -webkit-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -moz-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -o-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -ms-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: linear-gradient(bottom, #6D0202 22%, rgb(201, 0, 0) 61%);
text-shadow: 0 3px 0 #000;
}
}
&:nth-child(4) {
a {
background: #0077b5;
}
}
&:nth-child(5) {
a {
background: #1DA1F2;
}
}
&:nth-child(6) {
a {
background-color: #e60023;
}
}
&:last-child {
a {
background: #28D146;
}
}
}
}
}
footer {
.footer-main {
padding: 5% 0 3%;
background: #000000;
}
.container {
max-width: 80%;
@media only screen and (max-width: 1759px) and (min-width: 1501px) {
max-width: 85%;
}
@media only screen and (max-width: 1500px) and (min-width: 1100px) {
max-width: 90%;
}
@media only screen and (max-width: 1032px) {
max-width: 95%;
}
}
.footer-last-column {
width: 300px;
@media (min-width: 1100px) and (max-width: 1445px) {
width: 22%;
}
@media only screen and (max-width: 767px) {
text-align: center;
width: 100%;
border-top: 0 !important;
}
}
.footer-wrap {
display: flex;
justify-content: space-between;
.footer-new {
width: 70%;
justify-content: space-between;
@media (min-width: 1100px) and (max-width: 1445px) {
width: 70%;
}
@media only screen and (max-width: 1032px) {
flex-direction: column;
width: 40%;
justify-content: flex-start;
}
@media only screen and (max-width: 767px) {
width: 100%;
flex-direction: column;
order: 2;
}
.footer-title {
@media only screen and (max-width: 1032px) {
position: relative;
&:after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 10px;
height: 10px;
border-bottom: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
right: 4px;
top: 2px;
}
&.active_title {
&:after {
transform: rotate(-130deg);
}
color: #E0D2B8;
}
}
}
.d-flex.d-md-none {
@media only screen and (max-width: 767px) {
border-top: 1px solid #111;
padding: 10px;
}
}
.footer-column.footer_stores {
width: 250px;
@media (min-width: 1100px) and (max-width: 1445px) {
width: 140px;
}
@media only screen and (max-width: 767px) {
width: 100%;
}
ul {
display: flex;
flex-wrap: wrap;
li {
width: 50%;
@media (min-width: 1100px) and (max-width: 1445px) {
width: 100%;
}
@media only screen and (max-width: 767px) {
width: 100%;
}
}
}
}
}
@media only screen and (max-width: 767px) {
flex-direction: column;
text-align: center;
.footer-column {
margin-top: 30px;
margin-top: 0;
border-top: 1px solid #111;
padding: 10px 0;
}
}
.change-location-title {
font-family: var(--font-vietnam);
font-weight: 400;
color: #ffffff;
margin-bottom: 30px;
font-size: 16px;
line-height: normal;
letter-spacing: 1px;
@media only screen and (max-width: 767px) {
margin-bottom: 0;
margin-right: 10px;
}
}
.btn-group {
button {
background: none;
border: 1px solid #5c5c5c;
padding: 5px;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
font-size: 13px;
display: block;
text-align: left;
border-radius: 4px;
&:focus, &:focus:active, &:focus-visible {
box-shadow: none;
outline: 0;
}
.ger-flg {
border: 0.4px solid #666;
}
}
.uk-gb {
background: url(../images/location-icons.png) no-repeat 4px top;
width: 30px;
height: 18px;
display: inline-block;
background-size: 206%;
}
.ie-gb {
background: url(../images/location-icons.png) no-repeat -31px top;
width: 30px;
height: 18px;
display: inline-block;
background-size: 206%;
}
.ger-flg {
background: url(../images/germany.png) no-repeat left center;
width: 30px;
height: 18px;
display: inline-block;
background-size: cover;
}
ul {
background: #fff;
margin-top: 15px;
border-radius: 0;
padding: 5px 0;
display: none;
&.show {
display: block;
}
li {
a {
color: #000;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
font-size: 13px;
padding: 4px 10px;
&:hover {
background: #fff;
color: #000;
}
&:focus, &:focus:active, &:focus-visible {
box-shadow: none;
outline: 0;
}
}
}
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
@media only screen and (max-width: 1032px) {
margin-bottom: 15px;
margin-top: 15px;
}
}
.message.message-success.success {
color: #fff;
margin-top: 15px;
@media only screen and (max-width: 767px) {
color: green;
}
}
.message.message-error.error {
color: #fff;
margin-top: 15px;
@media only screen and (max-width: 767px) {
color: red;
}
}
.subscribe {
margin-top: 30px;
@media only screen and (max-width: 767px) {
text-align: center;
text-align: -webkit-center;
margin-top: 18px;
}
input {
display: block;
background: #424242;
color: #fff;
border: 0;
padding: 10px;
width: 100%;
&:focus {
outline: 0;
}
}
#newsletter-error {
color: #fff;
top: 0;
@media only screen and (max-width: 767px) {
color: red;
}
}
button {
background: #fff;
color: #000;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
padding: 8px 32px;
border: 1px solid #5C5C5C;
margin-top: 16px;
display: block;
border-radius: 4px;
transition-duration: 0.3s;
&:hover {
opacity: 0.75;
}
}
}
.get-intouch {
margin-top: 40px;
@media only screen and (max-width: 1032px) {
margin-top: 30px;
}
@media only screen and (max-width: 767px) {
margin-top: 20px;
}
.footer-title {
margin-bottom: 12px;
}
p {
font-family: var(--font-vietnam-regular);
font-weight: 400;
a {
color: #fff;
font-size: 16px;
text-decoration: none;
font-family: var(--font-vietnam);
font-weight: 400;
}
&:nth-child(2) {
line-height: normal;
margin-bottom: 2px;
a {
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 24px;
line-height: 30.36px;
letter-spacing: 1px;
}
}
}
a {
color: #fff;
font-size: 22px;
margin-right: 15px;
&:hover {
color: #e0d2b8;
}
}
.social-icons {
display: flex;
@media only screen and (max-width: 767px) {
justify-content: center;
}
a {
background-image: url(../images/icons_sprite.png);
}
}
}
.get-intouch-new {
margin-top: 60px;
.footer-title {
margin-bottom: 18px;
font-size: 12px;
}
p {
font-family: var(--font-vietnam-regular);
font-weight: 400;
a {
color: #fff;
font-size: 12px;
text-decoration: none;
line-height: 15.18px;
}
&:nth-child(2) {
line-height: normal;
margin-bottom: 0px;
a {
font-size: 24px;
}
}
}
a {
color: #fff;
font-size: 22px;
margin-right: 15px;
&:hover {
color: #e0d2b8;
}
}
}
}
.copy-right {
.container {
margin-top: 2em;
padding-top: 3em;
@media only screen and (max-width: 767px) {
margin-top: 0;
padding-top: 2em;
}
}
p {
color: #E0D2B8;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 13px;
text-align: center;
margin: 0;
position: relative;
&::before {
content: "";
width: 90%;
height: 1px;
background: #fff;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: -20px;
}
}
ul {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
padding: 0;
@media only screen and (max-width: 767px) {
flex-wrap: wrap;
}
li {
background: none;
padding: 0;
border-radius: 0;
margin-right: 7px;
a {
text-decoration: none;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
font-size: 13px;
color: #fff;
padding: 0 10px;
display: block;
line-height: normal;
letter-spacing: 1px;
position: relative;
@media only screen and (max-width: 767px) {
padding: 10px 5px;
text-align: center;
}
&:hover {
color: #E0D2B8;
}
&::before {
content: "";
width: 1px;
height: 100%;
position: absolute;
right: 0;
background: #fff;
@media only screen and (max-width: 767px) {
width: 0;
}
}
}
&:last-child {
a {
&::before {
width: 0;
}
}
}
}
}
.back-to-top {
position: fixed;
bottom: 140px;
right: 15px;
width: 45px;
height: 45px;
z-index: 99;
cursor: pointer;
text-decoration: none;
transition: opacity 0.2s ease-out;
color: #000;
border: 1px solid #E0D2B8;
border-radius: 50%;
font-size: 30px;
text-align: center;
padding-top: 0;
background: #E0D2B8;
display: none;
}
}
}
.popup-authentication {
display: none;
}
.join_us_social_media {
background: #ffffff;
padding: 0 0 0;
@media only screen and (max-width: 767px) {
padding: 25px 0 0;
iframe {
height: 360px !important;
}
}
.joinus_title {
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 28px;
line-height: 36.2px;
letter-spacing: 1px;
color: #000;
text-transform: uppercase;
margin-bottom: 15px;
@media only screen and (max-width: 767px) {
margin-top: 15px;
font-size: 22px;
}
}
p {
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
font-size: 14px;
line-height: 20.45px;
color: #000;
}
ul {
padding: 0;
margin: 25px 0 0;
list-style: none;
display: flex;
@media only screen and (max-width: 767px) {
flex-wrap: wrap;
}
li {
margin-right: 7px;
@media only screen and (max-width: 767px) {
margin-bottom: 7px;
width: 100px;
}
a {
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 12px;
line-height: 15.18px;
text-align: center;
color: #fff;
background: #000;
border: 0;
display: block;
padding: 8px 23px;
}
}
}
.home-trust-reviews {
.home-reviews {
.listing-block__title {
font-size: 20px;
}
.homline .line12 {
width: 90px;
}
}
}
}
.current_location {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
@media only screen and (max-width: 767px) {
flex-direction: column-reverse;
}
.btn-group {
button {
background: none;
border: 0;
padding: 0;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
font-size: 13px;
display: block;
&:focus, &:focus:active, &:focus-visible {
box-shadow: none;
outline: 0;
}
}
.uk-gb {
background: url(../images/location-icons.png) no-repeat 4px top;
width: 30px;
height: 18px;
display: inline-block;
background-size: 206%;
}
.ie-gb {
background: url(../images/location-icons.png) no-repeat -31px top;
width: 30px;
height: 18px;
display: inline-block;
background-size: 206%;
}
.ger-flg {
background: url(../images/germany.png) no-repeat;
width: 30px;
height: 18px;
display: inline-block;
background-size: cover;
}
ul {
background: #fff;
margin-top: 15px;
border-radius: 0;
padding: 5px 0;
width: 100%;
li {
a {
color: #000;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
font-size: 13px;
padding: 4px 10px;
&:hover {
background: #fff;
color: #000;
}
&:focus, &:focus:active, &:focus-visible {
box-shadow: none;
outline: 0;
}
}
}
}
}
}
.algolia-search-block {
display: none;
}
#bss-cookie-notice {
position: fixed;
bottom: calc(var(--spacing) * 0);
display: none;
width: 100% !important;
justify-content: space-between;
border-top-style: var(--tw-border-style);
border-top-width: 808080;
&[class*="bg-opacity-"] {
background-color: #fff !important;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 ) !important;
}
}
background-color: var(--color-white) !important;
padding-inline: calc(var(--spacing) * 3);
padding-block: calc(var(--spacing) * 1.5);
@media only screen and (max-width: 767px) {
align-items: center;
}
@media only screen and (max-width: 767px) {
padding-inline: calc(var(--spacing) * 1.5);
}
z-index: 2147483647;
p.cookie-title {
margin: calc(var(--spacing) * 0);
}
p.cookie-content {
float: left;
margin-bottom: calc(var(--spacing) * 1.5);
padding-top: calc(var(--spacing) * 1.5);
font-family: var(--font-vietnam);
font-weight: 400;
font-size: 14px;
--tw-leading: calc(var(--spacing) * 4);
line-height: calc(var(--spacing) * 4);
color: var(--color-black) !important;
@media only screen and (max-width: 767px) {
margin-bottom: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 767px) {
font-size: 11px;
}
@media only screen and (max-width: 767px) {
--tw-leading: calc(var(--spacing) * 3.5);
line-height: calc(var(--spacing) * 3.5);
}
a {
color: #b7ad8a !important;
}
}
.btn-cookie-accept {
float: right;
cursor: pointer;
border-bottom-right-radius: var(--radius-sm);
border-bottom-left-radius: var(--radius-sm);
border-style: var(--tw-border-style);
border-width: 0px;
background-color: #b7ad89 !important;
padding-inline: calc(var(--spacing) * 4);
padding-block: calc(var(--spacing) * 1.5);
text-align: center;
color: var(--color-white);
text-transform: uppercase;
@media only screen and (max-width: 767px) {
height: calc(var(--spacing) * 8);
}
@media only screen and (max-width: 767px) {
padding-inline: calc(var(--spacing) * 2.5);
}
@media only screen and (max-width: 767px) {
font-size: 14px;
}
}
}
.share_this_popup {
padding: calc(var(--spacing) * 7);
.share_title {
margin-bottom: calc(var(--spacing) * 3.5);
text-align: left;
font-family: var(--font-baskerville);
font-weight: 400;
font-size: 28px;
--tw-leading: calc(var(--spacing) * 9);
line-height: calc(var(--spacing) * 9);
text-transform: uppercase;
@media only screen and (max-width: 767px) {
font-size: 22px;
}
@media only screen and (max-width: 767px) {
--tw-leading: calc(var(--spacing) * 7);
line-height: calc(var(--spacing) * 7);
}
}
> button {
display: block;
height: calc(var(--spacing) * 7);
width: calc(var(--spacing) * 7);
border: 1px solid #5c5c5c;
border-radius: 50%;
svg {
margin-inline: auto;
display: block;
width: calc(var(--spacing) * 4);
}
}
.show_share {
.cursor-pointer {
margin-top: calc(var(--spacing) * 4);
display: flex;
gap: calc(var(--spacing) * 2.5);
p {
margin-bottom: calc(var(--spacing) * 0);
flex: 1;
border-radius: var(--radius-sm);
padding: calc(var(--spacing) * 2.5);
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
overflow-wrap: break-word;
border: 1px solid #5c5c5c;
}
.copy-btn {
display: flex;
align-items: center;
border-radius: var(--radius-sm);
padding-inline: calc(var(--spacing) * 4);
font-family: var(--font-vietnam);
font-weight: 300;
font-size: 14px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
white-space: nowrap;
color: var(--color-black);
border: 1px solid #5c5c5c;
}
}
.share-networks {
margin-top: calc(var(--spacing) * 6);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: calc(var(--spacing) * 4);
.st-custom-button {
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--spacing) * 1.5);
color: var(--color-black);
svg {
height: calc(var(--spacing) * 7);
width: calc(var(--spacing) * 7);
}
&[data-network="twitter"] {
border-radius: 0.25rem;
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
padding: calc(var(--spacing) * 1);
img {
width: calc(var(--spacing) * 5);
}
}
}
}
}
}
.recentlyview_listing_wrap {
padding: 20px 0;
background: #f2f4f4;
position: relative;
@media only screen and (min-width: 1033px) {
margin-bottom: 50px;
}
@media only screen and (max-width: 767px) {
border-bottom: 3px solid #ffff;
padding-bottom: 5px;
}
.recentlyview_heading {
height: 100%;
align-items: flex-start;
margin-top: -20px;
flex-direction: column;
justify-content: center;
@media only screen and (max-width: 767px) {
margin-top: -15px;
padding-left: 10px;
}
h2 {
font-family: "Baskervville";
font-weight: 400;
color: #000000;
font-size: 28px;
margin: 0 0 15px;
line-height: 34.03px;
letter-spacing: 1px;
padding-right: 20px;
@media only screen and (max-width: 767px) {
margin-bottom: 0;
font-size: 16px;
line-height: 20px;
margin-top: 10px;
}
}
p {
margin-bottom: 0;
}
}
.recentlyview-btn-close {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
font-size: 24px;
color: #000;
background: none;
border-radius: 0;
border: 0;
position: absolute;
top: 5px;
right: 13px;
@media only screen and (max-width: 767px) {
top: 5px;
right: 13px;
font-size: 16px;
}
}
.recentlyview_listing {
.owl-stage-outer {
.owl-stage {
@media only screen and (max-width: 767px) {
padding-left: 0px !important;
}
}
}
.owl-nav .owl-prev, .owl-nav .owl-next {
position: absolute;
top: 26%;
font-size: 60px;
opacity: 1;
&.disabled {
opacity: 0.5;
}
}
.owl-nav .owl-prev {
left: -40px;
}
.owl-nav .owl-next {
right: -40px;
}
.product-item-info {
padding: 5px;
a.product-item-photo {
background: #f4f2f2;
.product-image-photo {
mix-blend-mode: darken;
}
span.product-image-wrapper {
padding-bottom: 0 !important;
background: #fff !important;
display: block;
margin-bottom: 18px;
box-shadow: 0px 6px 32px 0px rgba(121,121,121,.0784313725);
@media only screen and (max-width: 767px) {
margin-bottom: 7px;
}
}
}
span {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
line-height: 17.18px;
letter-spacing: 1px;
}
.product-item-details {
.product-item-name {
a {
font-family: 'Be Vietnam', ui-sans-serif, sans-serif;
font-size: 14px;
line-height: normal;
letter-spacing: 1px;
min-height: 40px;
padding: 0 10px;
color: #000;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
@media only screen and (max-width: 767px) {
font-size: 11px;
}
}
}
.recently-view-detail-btn {
font-family: var(--font-vietnam-regular);
font-weight: 400;
display: none;
margin: 8px auto;
border-radius: 4px;
padding: 6px 0 !important;
font-size: 14px;
color: #000;
border: 1px solid #000 !important;
max-width: 128px;
line-height: 21px;
text-align: center;
&:hover {
background: #000;
color: #fff;
}
}
.product-item-actions {
.actions-secondary {
display: none;
}
}
}
}
}
}
@layer components {
@media (max-width: 1032px) {
.page-header .header__logo .logo img {
height: auto;
width: 200px;
max-width: 100%;
}
.header.bg-tab-black .header__logo img {
--tw-invert: invert(100%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
}
@media (min-width: 1033px) {
header.header .header__logo img {
width: 300px;
max-width: 100%;
}
}
}
.btn-gold-border-active {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
.btn-gold-border, .white-btn-gold-border {
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
&:hover {
@media (hover: hover) {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
}
}
.ipad-hide {
@media only screen and (max-width: 1032px) {
display: none !important;
}
}
.aa-DetachedContainer a {
color: var(--color-black);
text-decoration-line: underline;
&:hover {
@media (hover: hover) {
color: var(--color-black);
}
}
}
body.catalogsearch-result-index {
.products .toolbar-info .new-arrivals-check {
display: none;
}
.page-title-wrapper {
margin-block: calc(var(--spacing) * 10);
text-align: center;
font-family: var(--font-baskerville);
font-weight: 400;
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
--tw-leading: calc(var(--spacing) * 9);
line-height: calc(var(--spacing) * 9);
color: var(--color-black);
@media only screen and (min-width: 1200px) {
.h1, h1 {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
}
@media only screen and (max-width: 767px) {
margin-top: calc(var(--spacing) * 10);
margin-bottom: calc(var(--spacing) * 5);
.page-title {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
}
.custom-back-filters {
display: none;
}
.message.notice {
padding-bottom: calc(var(--spacing) * 8);
text-align: center;
.block-content {
margin-inline: auto;
margin-bottom: calc(var(--spacing) * -12);
max-width: var(--container-lg);
.form-control {
border-radius: 0;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-black);
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.btn.btn-dark {
border-radius: 0;
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
dl.block {
margin-top: calc(var(--spacing) * 4);
.item {
color: var(--color-black);
}
}
}
.search.results {
.minisearch {
@media only screen and (max-width: 767px) {
padding-inline: calc(var(--spacing) * 4);
}
}
.block-content {
margin-inline: auto;
margin-bottom: calc(var(--spacing) * 12);
max-width: 500px;
.form-control {
border-radius: 0;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-black);
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.btn.btn-dark {
border-radius: 0;
}
}
dl.block {
margin-inline: auto;
margin-block: calc(var(--spacing) * 2);
display: none;
max-width: var(--container-5xl);
text-align: center;
dt.title {
margin-block: calc(var(--spacing) * 4);
width: 100%;
text-transform: capitalize;
}
dd.item {
display: inline-block;
a {
display: block;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-black);
padding-inline: calc(var(--spacing) * 2.5);
padding-block: calc(var(--spacing) * 1);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
color: var(--color-black);
&:hover {
@media (hover: hover) {
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
}
}
&:hover {
@media (hover: hover) {
background-color: var(--color-black);
}
}
&:hover {
@media (hover: hover) {
color: var(--color-white);
}
}
}
}
}
}
.products {
.product-items {
ul {
grid-template-columns: repeat(auto-fill,minmax(330px,1fr));
margin-bottom: 50px;
@media (min-width: 1100px) and (max-width: 1445px) {
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
}
li .product-item-info a.product-item-photo {
height: auto;
}
}
}
}
}
.search .new-arrivals-check {
display: none;
}
body.aa-Detached {
overflow: hidden !important;
}
.aa-DetachedOverlay {
position: fixed;
inset: calc(var(--spacing) * 0);
z-index: 9998;
display: flex;
align-items: flex-start;
justify-content: center;
background-color: rgba(10,8,5,0.72);
padding-top: calc(var(--spacing) * 0);
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 20);
}
@media only screen and (max-width: 767px) {
padding-top: calc(var(--spacing) * 0);
}
}
.aa-DetachedContainer {
pointer-events: auto;
position: relative;
width: 100%;
max-width: 1100px;
overflow: hidden;
border-radius: 0.25rem;
background-color: #FDFAF5;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
--tw-shadow: 0 32px 80px var(--tw-shadow-color, rgba(0,0,0,0.45));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@media (max-width: 680px) {
.aa-DetachedContainer {
margin: calc(var(--spacing) * 0) !important;
height: 100%;
min-height: 100vh;
max-width: 100% !important;
overflow: auto;
border-radius: 0 !important;
}
}
@keyframes cubixPanelIn {
from {
opacity: 0;
transform: translateY(-12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: 769px) {
.aa-Panel .aa-PanelLayout.with-grid {
display: grid;
min-height: 280px;
grid-auto-columns: auto;
grid-template-columns: 3fr 7fr;
column-gap: calc(var(--spacing) * 0);
row-gap: calc(var(--spacing) * 0);
}
.aa-Panel .aa-PanelLayout.with-grid section {
grid-column: 1;
padding: 10px;
}
}
@media (max-width: 769px) {
.aa-Panel .aa-PanelLayout.with-grid {
display: block !important;
}
}
.autocomplete-panel .aa-Source[data-autocomplete-source-id="categories"] {
grid-row: 3;
@media only screen and (max-width: 767px) {
margin-bottom: 30px !important;
}
}
@media (min-width: 769px) {
.aa-Panel .aa-PanelLayout section:last-of-type:not([data-autocomplete-source-id=products]) {
margin-bottom: calc(var(--spacing) * 11);
}
}
.aa-Panel .aa-PanelLayout.with-grid {
grid-template-columns: 232px 1fr !important;
}
.aa-DetachedSearchButton {
display: none;
}
.aa-DetachedContainer .aa-Panel {
position: static !important;
--tw-border-style: none !important;
border-style: none !important;
background-color: transparent !important;
--tw-shadow: 0 0 #0000 !important;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.autocomplete-panel .aa-List {
margin: calc(var(--spacing) * 0);
&::-webkit-details-marker {
display: none;
}
list-style-type: none;
padding: calc(var(--spacing) * 0);
}
.aa-DetachedContainer .aa-Form {
display: flex;
flex: 1;
align-items: center;
border-radius: 0;
--tw-border-style: none;
border-style: none;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding-inline: calc(var(--spacing) * 4);
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.aa-InputWrapper {
width: 100%;
flex: 1;
}
.aa-DetachedContainer .aa-Input {
box-sizing: border-box;
height: 34px;
width: 100%;
border-radius: 0;
border-style: var(--tw-border-style);
border-width: 1px;
border-left-style: var(--tw-border-style);
border-left-width: 0px;
border-color: #c9c3c3;
background-color: #f8f8f8;
padding-inline: calc(var(--spacing) * 2);
padding-block: 9px;
padding-bottom: calc(var(--spacing) * 1.5);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-black);
@media (width >= 48rem) {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
}
button.aa-SubmitButton {
height: 34px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-right-style: var(--tw-border-style);
border-right-width: 0px;
border-color: #c9c3c3;
background-color: #f8f8f8;
padding-inline: calc(var(--spacing) * 2);
padding-top: calc(var(--spacing) * 1.5);
padding-bottom: calc(var(--spacing) * 1.5);
padding-left: calc(var(--spacing) * 3);
}
.aa-LoadingIndicator {
height: 34px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-right-style: var(--tw-border-style);
border-right-width: 0px;
border-color: #c9c3c3;
background-color: #f8f8f8;
padding-inline: calc(var(--spacing) * 3);
padding-top: calc(var(--spacing) * 1.5);
padding-bottom: calc(var(--spacing) * 1.5);
}
button.aa-ClearButton {
height: 34px;
border-top-left-radius: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0;
border-style: var(--tw-border-style);
border-width: 1px;
border-left-style: var(--tw-border-style);
border-left-width: 0px;
border-color: #c9c3c3;
background-color: #f8f8f8;
padding-inline: calc(var(--spacing) * 3);
padding-block: calc(var(--spacing) * 1);
color: var(--color-black);
}
input#autocomplete-0-input:focus {
--tw-outline-style: none;
outline-style: none;
}
input#autocomplete-0-input[aria-activedescendant="autocomplete-0-recentSearchesPlugin-item-0"] {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
button.aa-DetachedCancelButton {
--tw-border-style: none;
border-style: none;
background-image: none;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-tracking: 0.4px;
letter-spacing: 0.4px;
color: var(--color-black);
text-decoration-line: underline;
}
.aa-DetachedContainer .aa-Input::-webkit-search-cancel-button {
display: none !important;
}
.aa-DetachedContainer .aa-Input::placeholder {
color: #AAA;
}
.aa-DetachedContainer .aa-SubmitButton svg {
color: #aaaaaa;
}
.aa-Panel .aa-PanelLayout {
width: 100% !important;
}
.aa-DetachedFormContainer {
margin-bottom: 1px;
display: flex;
align-items: center;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: #E2D9C8;
padding-inline: calc(var(--spacing) * 2);
padding-block: 15px;
button {
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
}
}
.aa-Panel .aa-PanelLayout.with-grid {
grid-template-columns: 232px 1fr !important;
}
.aa-Panel .aa-PanelLayout.with-grid section:not([data-autocomplete-source-id=products]) {
margin-bottom: calc(var(--spacing) * 0);
display: flex;
flex-direction: column;
gap: 1px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
border-right: 1px solid var(--dh-border);
@media only screen and (max-width: 767px) {
padding-block: calc(var(--spacing) * 2.5);
padding-top: calc(var(--spacing) * 1.5);
padding-bottom: calc(var(--spacing) * 0);
}
}
.aa-Panel .aa-PanelLayout.with-grid section[data-autocomplete-source-id=products] {
position: relative;
grid-column: 2;
grid-row: 1/999;
margin-bottom: calc(var(--spacing) * 0);
display: block;
max-height: 500px;
overflow: hidden;
border-left-style: var(--tw-border-style);
border-left-width: 1px;
border-left-color: #E2D9C8 !important;
background-color: #FDFAF5;
padding: calc(var(--spacing) * 2.5);
@media only screen and (max-width: 767px) {
margin-top: calc(var(--spacing) * 2.5);
}
@media only screen and (max-width: 767px) {
padding: calc(var(--spacing) * 2.5);
}
}
.autocomplete-panel .aa-Source[data-autocomplete-source-id="products"] .aa-SourceNoResults {
display: block !important;
height: 100%;
min-height: 500px;
overflow-y: auto;
padding: calc(var(--spacing) * 0);
padding-bottom: 60px !important;
@media only screen and (max-width: 767px) {
min-height: 450px;
}
}
.aa-Panel .aa-PanelLayout.with-grid section:not([data-autocomplete-source-id="products"]) {
@media only screen and (max-width: 1024px) {
padding-inline: calc(var(--spacing) * 2.5);
padding-top: calc(var(--spacing) * 2.5);
padding-bottom: calc(var(--spacing) * 0);
}
}
.aa-DetachedContainer, .algolia-instant-results-wrapper {
.products {
.product-items {
ul {
margin: calc(var(--spacing) * 0);
display: flex;
&::-webkit-details-marker {
display: none;
}
height: auto;
list-style-type: none;
flex-wrap: wrap;
padding-left: calc(var(--spacing) * 0);
li {
position: relative;
z-index: 9;
margin: calc(var(--spacing) * 1.5);
display: inline-block;
width: calc(25% - 12px);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
text-align: center;
@media only screen and (max-width: 1032px) {
width: calc(33.33% - 12px);
}
@media only screen and (max-width: 767px) {
margin: calc(var(--spacing) * 0);
}
@media only screen and (max-width: 767px) {
width: 100%;
}
.product-item-info {
.product-image-container {
width: 100% !important;
}
a.product-item-photo {
display: block;
height: auto;
width: 100%;
background-color: #f4f2f2;
background-size: 110%;
background-position: center;
background-repeat: no-repeat;
@media only screen and (max-width: 767px) {
background-size: 150%;
}
}
img {
aspect-ratio: 1 / 1;
height: auto;
width: 100%;
max-width: 100%;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
color: var(--color-black);
@media only screen and (max-width: 767px) {
width: calc(4/5 * 100%);
}
}
.product-item-details {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
color: var(--color-black);
@media only screen and (max-width: 767px) {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
& a.product-item-link {
margin-top: calc(var(--spacing) * 5);
margin-bottom: calc(var(--spacing) * 2);
display: block;
padding-inline: calc(var(--spacing) * 3);
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
--tw-tracking: 1px;
letter-spacing: 1px;
color: var(--text-black);
text-transform: none;
text-decoration-line: none;
@media only screen and (max-width: 767px) {
margin-top: calc(var(--spacing) * 2.5);
}
@media only screen and (max-width: 767px) {
margin-bottom: calc(var(--spacing) * 1);
}
@media only screen and (max-width: 767px) {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
}
& .product-item-sku {
word-break: break-all;
}
& .price-box {
& .normal-price {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-leading: 15.18px;
line-height: 15.18px;
color: var(--text-black);
}
}
& span.pl_finance_from {
display: block;
color: #666;
@media only screen and (max-width: 767px) {
margin-bottom: calc(var(--spacing) * 5);
}
}
& .price-wrapper {
& .text-red {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: var(--color-black);
}
}
}
}
.quick-view-postion {
display: flex;
align-items: center;
position: absolute;
top: 8px;
left: 8px;
}
.quick-view {
z-index: 997;
a {
background: url(../images/quick-view.svg) no-repeat left top;
width: 20px;
height: 20px;
position: relative;
span {
display: none;
}
}
}
}
}
}
}
.products1 {
display: inline-block;
position: relative;
background: #fff;
text-align: center;
margin: 5px;
max-width: calc(25% - 10px);
z-index: 9;
min-width: calc(25% - 10px);
}
.products .product-items .trend-label {
background: #000;
border-radius: 4px;
padding: 0px 8px;
font-size: 12px;
font-weight: 400;
color: #ffffff;
margin-left: 6px;
text-align: center;
z-index: 2;
order: 3;
font-size: 11px;
}
.products .product-items, .autocomplete-panel .aa-Source[data-autocomplete-source-id="products"] {
ul {
@media only screen and (max-width: 767px) {
margin-bottom: 5px !important;
flex-wrap: nowrap !important;
gap: 6px;
li {
min-width: 43% !important;
}
}
}
.quick-view-postion {
display: flex;
align-items: center;
position: absolute;
top: 8px;
left: 8px;
}
}
.products .product-items ul li.product-item, .autocomplete-panel .aa-Source[data-autocomplete-source-id="products"] ul li.aa-Item, #instant-search-results-container, .ais-Hits-list .ais-Hits-item {
.product-item-info {
padding: 0 0 15px;
.product-image-container {
width: 100% !important;
}
a.product-item-photo {
width: 100%;
display: block;
height: auto;
background-repeat: no-repeat;
background-position: center;
background-size: 110%;
background: #f4f2f2;
@media only screen and (max-width: 767px) {
background-size: 150%;
}
}
img {
max-width: 100%;
color: #000;
font-size: 12px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
@media only screen and (max-width: 767px) {
width: 80%;
min-height: 155px;
}
}
a.Magic360tmp {
background: #f4f2f2;
}
img.product-image-photo, canvas {
mix-blend-mode: darken;
}
.product-item-details {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
color: #000;
@media only screen and (max-width: 767px) {
font-size: 12px;
}
.magicicon {
width: 27px;
height: 27px;
cursor: pointer;
z-index: 99;
background: url(../images/360_icon_white.svg) no-repeat left top;
}
a.product-item-link {
margin-top: calc(var(--spacing) * 5);
margin-bottom: calc(var(--spacing) * 2);
display: block;
padding-inline: calc(var(--spacing) * 3);
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
--tw-tracking: 1px;
letter-spacing: 1px;
color: var(--text-black);
text-transform: none;
text-decoration-line: none;
@media only screen and (max-width: 767px) {
margin-top: calc(var(--spacing) * 2.5);
}
@media only screen and (max-width: 767px) {
margin-bottom: calc(var(--spacing) * 1);
}
@media only screen and (max-width: 767px) {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
}
.price-box {
.normal-price {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-leading: 15.18px;
line-height: 15.18px;
color: var(--text-black);
}
}
span.pl_finance_from {
display: none;
color: #666;
@media only screen and (max-width: 767px) {
margin-bottom: calc(var(--spacing) * 5);
}
}
.product-item-actions {
.actions-primary {
a.btn-outline-dark {
border: 1px solid #000;
background: none;
color: #000;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 12px;
line-height: 15.18px;
padding: 8px 48px;
margin-top: 15px;
margin-bottom: 15px;
border-radius: 0;
@media only screen and (max-width: 767px) {
margin-top: 0;
margin-bottom: 45px;
}
&:hover {
background: #000;
color: #fff;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
}
}
.actions-secondary {
display: flex;
align-items: center;
position: absolute;
top: 0;
right: 5px;
.gallery_share {
display: none;
position: relative;
right: inherit;
top: inherit;
width: auto;
height: auto;
z-index: 9;
margin-left: 8px;
.icon {
border: 0;
width: 18px;
height: 18px;
background-color: inherit;
background-position: 0px center;
cursor: pointer;
background-size: contain;
margin: 0 2px 0 4px;
border-radius: 0;
@media only screen and (max-width: 767px) {
margin-top: -4px;
}
}
.show_share {
top: 28px;
right: -15px;
}
}
}
.towishlist {
width: 23px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 50;
span {
width: 100%;
height: 100%;
background-image: url(../images/wishlist-icon-black.svg);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
transition: .5s all;
text-indent: -9999px;
}
&:hover, &.active {
span {
background-image: url(../images/wishlist_black.svg);
}
}
}
}
.price-container {
.price-label {
display: none;
}
}
.price-wrapper {
.text-red {
color: #000;
font-weight: 600;
}
}
}
div[class^="cat-gallery-"] {
background: #f4f2f2;
min-height: 21.4vw;
@media only screen and (max-width: 767px) {
min-height: 90.4vw;
}
}
.parent-gallery-listing {
overflow: hidden;
background: #f4f2f2;
min-height: unset !important;
max-height: unset !important;
@media only screen and (max-width: 767px) {
min-height: 90.4vw;
max-height: 90.4vw;
}
.listing_fallback {
position: relative;
@media only screen and (min-width: 1033px) {
min-height: 14.4vw;
max-height: 14.4vw;
}
@media only screen and (max-width: 767px) {
min-height: 90.4vw;
max-height: 90.4vw;
}
.sudo-next {
display: none;
@media only screen and (max-width: 767px) {
display: block;
position: absolute;
top: 0;
font-size: 35px;
color: #666;
right: 8px;
height: 100%;
border: 0;
background: none;
}
}
}
.skeleton {
background: #f4f2f2;
}
}
}
}
}
.aa-Panel .aa-PanelLayout section.aa-Source .aa-SourceHeader {
font-family: var(--font-vietnam-regular);
font-weight: 400;
color: #686868;
padding: 2px;
@media only screen and (max-width: 767px) {
padding-bottom: 6px;
font-size: 12px;
}
p {
margin-bottom: 0px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
color: #686868;
}
}
.aa-Panel .aa-PanelLayout.with-grid section:not([data-autocomplete-source-id=products]) ul {
display: block;
a {
position: relative;
display: block !important;
overflow: hidden;
padding-top: 5px !important;
padding-right: calc(var(--spacing) * 0) !important;
padding-bottom: 5px !important;
padding-left: calc(var(--spacing) * 7) !important;
text-align: left;
font-family: var(--font-vietnam);
font-weight: 300;
font-family: be vietnam prolight;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-leading: 22px;
line-height: 22px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-black);
text-decoration-line: none;
}
@media only screen and (max-width: 767px) {
padding: 3px;
li.aa-Item {
overflow: unset;
}
}
}
a.aa-ItemLink.algolia-suggestions.algoliasearch-autocomplete-hit mark {
padding: calc(var(--spacing) * 0);
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.aa-Panel li.aa-Item a.aa-ItemLink {
position: relative;
display: block;
overflow: hidden;
padding-top: 5px;
padding-right: calc(var(--spacing) * 0);
padding-bottom: 5px;
padding-left: calc(var(--spacing) * 7);
text-align: left;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-leading: 22px;
line-height: 22px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-black);
text-decoration-line: none;
white-space-collapse: collapse;
@media only screen and (max-width: 767px) {
display: flex;
}
@media only screen and (max-width: 767px) {
align-items: center;
}
@media only screen and (max-width: 767px) {
overflow: visible !important;
}
@media only screen and (max-width: 767px) {
border-radius: 23px;
}
@media only screen and (max-width: 767px) {
background-color: #e3e5e6;
}
@media only screen and (max-width: 767px) {
padding-top: calc(var(--spacing) * 1) !important;
}
@media only screen and (max-width: 767px) {
padding-right: calc(var(--spacing) * 3.5) !important;
}
@media only screen and (max-width: 767px) {
padding-bottom: 3px !important;
}
@media only screen and (max-width: 767px) {
padding-left: calc(var(--spacing) * 7) !important;
}
@media only screen and (max-width: 767px) {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
@media only screen and (max-width: 767px) {
--tw-leading: 18px;
line-height: 18px;
}
@media only screen and (max-width: 767px) {
white-space: nowrap;
}
@media only screen and (max-width: 767px) {
color: #353131 !important;
}
& svg {
position: absolute;
top: 9px;
right: auto;
left: calc(var(--spacing) * 2);
display: block;
height: calc(var(--spacing) * 3);
width: calc(var(--spacing) * 3);
transform: translateY(3px);
fill: #A6A6A6;
@media only screen and (max-width: 767px) {
top: 7px;
}
@media only screen and (max-width: 767px) {
left: calc(var(--spacing) * 3);
}
}
}
.aa-Panel .aa-ItemLink.algolia-suggestions:has(svg.algolia-glass-suggestion) svg.algolia-glass-suggestion.magnifying-glass {
top: 6px !important;
}
.aa-Panel .aa-PanelLayout section[data-autocomplete-source-id=products] .aa-List {
display: flex !important;
height: 100%;
min-height: 500px;
flex-wrap: wrap;
gap: calc(var(--spacing) * 0) !important;
overflow-y: auto;
padding: calc(var(--spacing) * 0);
padding-bottom: calc(var(--spacing) * 15);
@media only screen and (max-width: 767px) {
min-height: 450px;
}
}
.aa-Panel .aa-PanelLayout section[data-autocomplete-source-id=products] .aa-List li {
position: relative;
z-index: 9;
margin: 5px;
display: inline-block;
max-width: calc(25% - 12px);
min-width: calc(25% - 12px);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
text-align: center;
}
.aa-Panel .aa-PanelLayout.with-grid section:not([data-autocomplete-source-id="products"]) ul li {
height: auto;
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.aa-Panel .algoliasearch-autocomplete-hit {
position: relative;
display: block !important;
overflow: hidden;
padding-top: 5px !important;
padding-right: calc(var(--spacing) * 0) !important;
padding-bottom: 5px !important;
padding-left: calc(var(--spacing) * 7) !important;
text-align: left;
font-family: var(--font-vietnam);
font-weight: 300;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-leading: 22px;
line-height: 22px;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-black);
text-decoration-line: none;
@media only screen and (max-width: 767px) {
display: flex;
}
@media only screen and (max-width: 767px) {
align-items: center;
}
@media only screen and (max-width: 767px) {
overflow: visible !important;
}
@media only screen and (max-width: 767px) {
border-radius: 23px;
}
@media only screen and (max-width: 767px) {
background-color: #e3e5e6;
}
@media only screen and (max-width: 767px) {
padding-top: calc(var(--spacing) * 1) !important;
}
@media only screen and (max-width: 767px) {
padding-right: calc(var(--spacing) * 3.5) !important;
}
@media only screen and (max-width: 767px) {
padding-bottom: 3px !important;
}
@media only screen and (max-width: 767px) {
padding-left: calc(var(--spacing) * 7) !important;
}
@media only screen and (max-width: 767px) {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
@media only screen and (max-width: 767px) {
--tw-leading: 18px;
line-height: 18px;
}
@media only screen and (max-width: 767px) {
white-space: nowrap;
}
@media only screen and (max-width: 767px) {
color: #353131 !important;
}
& svg {
position: absolute;
top: 9px;
right: auto;
left: calc(var(--spacing) * 2);
display: block;
height: calc(var(--spacing) * 3);
width: calc(var(--spacing) * 3);
fill: #A6A6A6;
@media only screen and (max-width: 767px) {
top: 6px;
}
@media only screen and (max-width: 767px) {
left: calc(var(--spacing) * 3);
}
}
}
.aa-Label {
margin-bottom: calc(var(--spacing) * 0);
}
.aa-Panel .aa-PanelLayout section .aa-SourceNoResults {
padding: 5px 0 6px !important;
}
@media (max-width: 768px) {
.aa-Panel .aa-List {
display: flex;
overflow: auto;
gap: 4px;
}
.aa-Panel .aa-PanelLayout section .aa-SourceNoResults {
display: flex;
overflow: scroll;
flex-direction: row;
width: 100%;
gap: 8px;
}
}
.aa-Panel .aa-SourceNoResults .aa-ItemLink.algolia-suggestions:has(svg.algolia-glass-suggestion) {
padding: 5px 0 5px 28px !important;
@media only screen and (max-width: 767px) {
padding: 4px 14px 3px 28px !important;
display: flex;
align-items: center;
overflow: visible;
white-space: nowrap;
font-size: 12px;
line-height: 18px;
background: #e3e5e6;
color: #353131;
border-radius: 23px;
}
}
.aa-Panel .aa-ItemLink svg.algolia-glass-suggestion.magnifying-glass {
position: absolute;
right: auto;
left: 5px;
top: 7px;
fill: #A6A6A6;
stroke: #A6A6A6;
@media only screen and (max-width: 767px) {
width: 20px;
}
}
.aa-Panel li.aa-Item a.bss-quickview, .ais-Hits-list a.bss-quickview, .ais-InfiniteHits-list a.bss-quickview {
background: #000;
border-radius: 4px;
padding: 0px 8px;
font-weight: 400;
color: #ffffff;
margin-left: 6px;
text-align: center;
z-index: 2;
font-size: 11px;
position: unset;
text-decoration: none;
}
.ais-Hits-list, .ais-InfiniteHits-list {
.towishlist {
display: none !important;
}
.quick-view-postion {
display: flex;
align-items: center;
position: absolute;
top: 8px;
left: 8px;
}
.quick-view {
display: none;
z-index: 997;
a {
background: url(../images/quick-view.svg) no-repeat left top;
width: 20px;
height: 20px;
position: relative;
span {
display: none;
}
}
}
}
.aa-SourceFooter a {
text-decoration: none;
font-size: 14px;
padding: 5px 12px 3px;
line-height: normal;
color: #000;
border: 1px solid #aaa;
border-radius: 4px;
text-align: center;
transition-duration: .3s;
font-family: 'be_vietnam_prolight';
font-weight: 400;
margin: 0px 4px;
display: inline-block;
&:hover {
background: #000000;
color: #fff;
border-color: #000;
}
}
.aa-Panel .aa-PanelLayout.with-grid section[data-autocomplete-source-id=products] .aa-SourceFooter {
border: 1px solid #ddd;
display: block;
width: 100%;
background: #F9F9F9;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
@media only screen and (max-width: 767px) {
position: unset;
}
#autocomplete-products-footer {
position: unset;
padding: 8px 0;
font-size: 14px;
display: block;
text-align: center;
}
}
input.ais-SearchBox-input {
background: #f8f8f8;
border: 1px solid #e0e0e0;
font-family: "be_vietnam_proregular";
font-weight: 400;
font-size: 14px;
padding: 16px 8px;
color: #000000;
border-radius: 4px;
height: 34px;
width: 100%;
box-sizing: border-box;
&:focus {
outline: none;
}
}
.algolia-instant-results-wrapper {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
a {
color: #000;
&:hover {
color: #000;
}
}
margin: auto;
@media only screen and (min-width: 1500px) {
max-width: 90%;
}
@media only screen and (min-width: 1440px) {
max-width: 95%;
}
}
.algolia-instant-selector-results {
#algolia-left-container {
max-width: 380px;
@media only screen and (max-width: 767px) {
max-width: 100%;
}
.ais-Panel-header {
background: #f2f4f4;
}
ul.ais-RefinementList-list {
li {
label {
input {
margin-right: 2px;
}
}
}
li.ais-RefinementList-item a {
position: relative;
color: #000;
text-align: left;
text-decoration: none;
overflow: hidden;
display: block !important;
padding: 5px 0 5px 28px !important;
line-height: 22px;
svg {
margin-right: 3px;
display: inline-block;
position: absolute;
right: auto;
left: 8px;
top: 11px;
fill: #989595;
width: 12px;
height: 12px;
}
}
}
@media only screen and (max-width: 767px) {
padding-right: 5px;
#refine-toggle {
text-align: center;
line-height: 20px;
border: none;
border-radius: 4px;
font-weight: 400;
cursor: pointer;
padding: 6px 5px 4px 5px;
width: 135px;
margin: 10px 0 10px auto;
background: #000;
color: #fff;
font-family: 'be_vietnam_prolight';
font-size: 14px;
}
}
}
#algolia-right-container {
flex: 1;
.algolia-infos {
background: #fff;
border: none;
color: #000;
padding: 6px 8px 0px 12px;
line-height: 26px;
select {
padding: 3px 2px 2px;
}
@media only screen and (min-width: 1033px) {
.pull-left {
margin-right: 5px;
}
}
@media only screen and (max-width: 767px) {
line-height: 20px;
.sort-by-label {
line-height: 23px;
}
}
.pull-left {
.ais-Stats-text {
@media only screen and (max-width: 767px) {
line-height: 23px;
margin-right: 5px;
}
}
}
}
#instant-search-results-container {
padding-top: 15px;
ol.ais-Hits-list, ol.ais-InfiniteHits-list {
display: flex;
flex-wrap: wrap;
li.ais-InfiniteHits-item {
@media only screen and (min-width: 1400px) {
width: calc(25% - 12px);
}
margin: 5px;
width: calc(33.33% - 10px);
z-index: 9;
@media only screen and (max-width: 767px) {
width: 100%;
margin: 0;
}
>.col-md-4 {
width: 100%;
}
}
}
.result-wrapper {
a {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: #000;
font-size: 14px;
}
.result-thumbnail img {
mix-blend-mode: darken;
max-width: 100%;
color: #000;
font-size: 12px;
font-family: var(--font-vietnam-regular);
font-weight: 400;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.result-thumbnail {
min-height: 20.4vw;
max-height: 20.4vw;
}
}
h3.result-title {
text-decoration: none;
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
line-height: normal;
letter-spacing: 1px;
text-transform: none;
color: #000;
margin: 20px 0 8px;
display: block;
padding: 0 12px;
overflow: visible;
white-space: unset;
}
}
.price-wrapper {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 14px;
color: #000;
@media only screen and (max-width: 767px) {
font-size: 12px;
}
}
.product-reviews-summary.short, .result-description {
display: none;
}
form .tocart {
display: none;
}
}
#instant-search-bar {
background: #f2f4f4;
padding: 7px;
margin-bottom: 0px;
.ais-SearchBox {
max-width: 90%;
margin: auto;
@media only screen and (max-width: 767px) {
max-width: 90%;
}
}
}
}
div#instant-search-facets-container {
@media only screen and (max-width: 767px) {
border: 1px solid #dddddd;
padding: 10px;
margin-bottom: 10px;
}
}
.popular-searches {
a {
text-decoration: underline;
color: #000;
}
}
.no-results {
a {
text-decoration: underline;
margin-left: 1px;
}
}
.ais-Pagination-link {
color: #000;
}
div#instant-search-bar {
input.ais-SearchBox-input {
background: #ffffff;
height: 36px !important;
border-radius: 4px;
padding: 14px 8px;
padding-left: 2.3em;
background-image: url(../images/search-grey.svg);
background-repeat: no-repeat;
background-size: 14px;
background-position: 10px center;
border: 1px solid #c9c3c3;
font-family: "be_vietnam_proregular";
font-weight: 400;
font-size: 14px;
color: #000000;
width: 100%;
box-sizing: border-box;
@media only screen and (max-width: 767px) {
height: 30px !important;
}
}
.ais-SearchBox-reset {
position: absolute;
right: 6px !important;
top: -2px;
height: 30px !important;
svg {
fill: #818181;
}
}
}
select {
border: 1px solid #c1c4c6;
background: #fff;
border-radius: 5px;
&:focus {
outline: none;
}
}
div#algolia_instant_selector {
padding: 10px 15px;
}
button.ais-InfiniteHits-loadMore.action.primary {
text-decoration: none;
font-size: 14px;
padding: 10px 25px;
line-height: normal;
color: #000;
background: #ffffff;
border: 1px solid #000000;
border-radius: 4px;
text-align: center;
transition-duration: .3s;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
font-weight: 400;
margin: 20px 4px;
text-transform: capitalize;
&:hover {
background: #000000;
color: #ffffff;
}
}
.ais-CurrentRefinements-item {
color: #636363;
border-radius: 2px;
border: none !important;
background-color: #ffffff !important;
display: inline-block;
overflow: auto !important;
max-width: 100%;
white-space: nowrap;
padding: .2em .5em .75em !important;
overflow: hidden;
margin-right: .4em;
margin-bottom: 0;
}
.ais-CurrentRefinements-category {
border: solid 1px #ddd;
background-color: #f4f4f4;
padding: 2px 3px 2px;
border-radius: 4px;
margin-right: 0 !important;
line-height: 22px;
font-size: 14px;
font-family: 'be_vietnam_prolight';
}
#algolia_instant_selector .ais-ClearRefinements-button {
margin-bottom: 15px;
padding: 4px 8px 3px;
border-radius: 4px;
font-size: 14px;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
line-height: 19px;
border: 1px solid #ddd;
@media only screen and (max-width: 767px) {
border-color: #000;
background: #000;
color: #ffffff;
position: absolute;
top: 11px;
left: 20px;
text-align: left;
width: auto !important;
font-size: 13px;
}
}
.ais-CurrentRefinements {
@media only screen and (min-width: 1033px) {
display: none;
}
}
.footer_algolia .algolia-search-by-label, .footer_algolia a[title="Search by Algolia"] {
display: none !important;
}
.aa-DetachedContainer .autocomplete-panel .aa-Source[data-autocomplete-source-id=products] {
ul li.aa-Item .product-item-info .product-item-details {
.price {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-leading: 15.18px;
line-height: 15.18px;
color: var(--text-black);
}
}
}
@layer components {
.appointment-close-btn {
position: absolute;
top: calc(var(--spacing) * 4);
right: calc(var(--spacing) * 4);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
height: calc(var(--spacing) * 8);
width: calc(var(--spacing) * 8);
border-radius: calc(infinity * 1px);
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-gray-300);
color: var(--color-gray-500);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
&:hover {
@media (hover: hover) {
border-color: var(--color-black);
}
}
&:hover {
@media (hover: hover) {
color: var(--color-black);
}
}
}
.appointment-title {
text-align: center;
font-family: 'Baskervville', ui-serif, serif;
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
color: var(--color-black);
text-transform: uppercase;
@media (width >= 40rem) {
font-size: 28px;
}
margin-bottom: calc(var(--spacing) * 6);
--tw-tracking: var(--tracking-wide);
letter-spacing: var(--tracking-wide);
@media (width >= 40rem) {
margin-bottom: calc(var(--spacing) * 8);
}
}
.appointment-section-label {
margin-bottom: calc(var(--spacing) * 3);
font-family: var(--font-vietnam);
font-weight: 600;
font-size: 16px;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
--tw-tracking: var(--tracking-wide);
letter-spacing: var(--tracking-wide);
color: var(--color-black);
text-transform: uppercase;
}
.appointment-store-tile {
margin-bottom: calc(var(--spacing) * 0);
display: block;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-black);
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 2);
text-align: center;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
color: var(--color-black);
&:hover {
@media (hover: hover) {
border-radius: 4px;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-white);
background: linear-gradient(#000, #2A2A2A) padding-box, var(--Gold_Vertical) border-box;
}
}
cursor: pointer;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
-webkit-user-select: none;
user-select: none;
}
.appointment-store-tile-label {
display: block;
}
.appointment-store-tile:hover {
border-color: var(--color-black);
}
.appointment-form label {
margin-bottom: calc(var(--spacing) * 2.5) !important;
color: var(--color-black);
}
.appointment-store-tile:has(input:checked) {
border-color: var(--color-black);
&[class*="bg-opacity-"] {
background-color: #000;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-black) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-black);
color: var(--color-white);
}
.appointment-store-tile:has(input:focus-visible) {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
--tw-ring-color: #c1c4c6;
--tw-ring-offset-width: 1px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.appointment-select-trigger {
width: 100%;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-gray-300);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding-inline: calc(var(--spacing) * 1.5);
padding-block: calc(var(--spacing) * 2.5);
text-align: left;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--spacing) * 2);
&:focus {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
&:focus {
--tw-outline-style: none;
outline-style: none;
}
}
.appointment-select-panel {
position: absolute;
z-index: 30;
margin-top: calc(var(--spacing) * 1);
max-height: calc(var(--spacing) * 56);
width: 100%;
overflow-y: auto;
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-gray-300);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.appointment-select-option {
display: flex;
cursor: pointer;
align-items: center;
gap: calc(var(--spacing) * 2);
padding-inline: calc(var(--spacing) * 1.5);
padding-block: calc(var(--spacing) * 2.5);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-50);
}
}
}
#appointmentPopup .address-block {
display: none;
}
#appointmentPopup .appointment-layout {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}
.actions-toolbar {
border-style: var(--tw-border-style);
border-width: 0px;
flex-direction: inherit;
button {
width: 200px;
}
}
.appointment-form {
.appointment-title {
@media only screen and (max-width: 767px) {
font-size: 18px;
}
}
}
.appointment-section-label {
margin-bottom: calc(var(--spacing) * 5);
display: block;
padding-top: calc(var(--spacing) * 2.5);
text-align: left;
font-size: 16px;
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-black);
@media only screen and (max-width: 767px) {
text-align: center;
font-size: 15px;
}
}
.appointment-store-tile {
@media only screen and (max-width: 767px) {
padding-inline: calc(var(--spacing) * 0);
padding-block: calc(var(--spacing) * 1.5);
font-size: 12px;
}
}
#appointmentPopup-dialog {
z-index: 999;
}
.appointment-form {
.appoint-befoer {
position: relative;
@media only screen and (max-width: 767px) {
text-align: left;
}
&::before {
background: #000;
position: absolute;
width: 26px;
height: 32px;
top: 0;
right: 0px;
z-index: 99;
}
&:after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-right: 0.4em solid transparent;
border-bottom: 0;
border-left: 0.4em solid transparent;
z-index: 997;
position: relative;
border-top: 0.4em solid #5c5c5c;
margin-left: 1px;
position: absolute;
right: 16px;
top: 18px;
}
}
.appointment-select-trigger {
&::before {
content: "";
position: absolute;
width: 26px;
height: 45px;
top: 0;
right: 0;
z-index: 97;
}
&:after {
content: "";
z-index: 98;
position: relative;
border-top: .5em solid #5c5c5c;
right: 16px;
top: 3px;
border-left: .5em solid transparent;
border-right: .5em solid transparent;
}
}
i.fas {
position: absolute;
right: 8px;
top: 42px;
z-index: 9;
&.fa-calendar-alt {
top: 20px;
}
}
.iti--inline-dropdown {
.iti__selected-dial-code {
display: none;
}
input[type="tel"] {
padding-left: 45px !important;
padding-right: 40px;
}
}
.input-symbol-euro {
position: relative;
display: block;
&::before {
position: absolute;
top: 9px;
content: "£";
left: 15px;
bottom: 0;
margin: auto;
font-size: 16px;
color: #000;
}
input {
padding-left: 34px;
}
}
}
.app-success {
margin-bottom: 30px;
width: 100%;
background: radial-gradient(58% 67% at 50% 50%, #2fc27e38 0%, rgba(0, 0, 0, 0) 100%);
padding: 15px 0;
}
.app-success-icon {
width: 3rem;
height: 3rem;
}
.btn-adds {
text-decoration: none;
margin: auto;
margin-top: 5px;
border: 1px solid #aeaeae;
display: flex;
align-items: center;
justify-content: center;
max-width: 230px;
min-width: 230px;
color: #000;
font-size: 13px;
font-family: var(--font-vietnam);
font-weight: 300;
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
.add-icns {
width: 22px;
height: 22px;
margin-right: 8px;
}
}
.btn-google-add {
font-family: "Google Sans", Roboto, Arial, sans-serif;
color: #1f1f1f;
}
.steps_top {
width: 100%;
z-index: 997;
transition: .1s ease;
width: calc(100% + 30px);
background: #fff;
margin: 0 -15px;
border-bottom: 1px solid #B0B0B0;
@media only screen and (max-width: 767px) {
width: calc(100% + 8px);
background: #fff;
margin: 0 -15px;
}
&.roll {
position: fixed;
top: 74px;
left: -2px;
top: 34.45px;
transition: .1s ease;
@media only screen and (max-width: 1032px) {
top: 36.03px;
}
.settings-steps {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
transition: .1s ease;
margin: 0;
@media only screen and (max-width: 767px) {
margin-left: 10px;
box-shadow: none;
}
}
}
.settings-steps {
margin: 0 auto;
width: 100%;
@media only screen and (max-width: 767px) {
margin-left: 10px;
}
.setting-item {
border: 0;
&::before {
border-left: 1px solid #000 !important;
top: 0;
margin-top: 0 !important;
}
&::after {
border: 0;
}
}
}
}
.steps_top.roll ~ .rb_onepage {
top: 63px;
@media only screen and (max-width: 1032px) {
top: 80px;
}
transition: .1s ease;
position: relative;
}
.settings-steps {
display: flex;
align-items: center;
justify-content: center;
width: 1024px;
margin: 25px auto;
height: 62px;
@media only screen and (max-width: 1032px) {
width: 92%;
height: 56px;
margin: 8px auto;
}
@media only screen and (max-width: 767px) {
width: 89%;
height: 48px;
margin-left: 10px;
}
.setting-item {
font-family: var(--font-vietnam);
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 1px solid #000;
-webkit-box-flex: 1;
-ms-flex: 1 0 33.33%;
flex: 1 0 33.33%;
height: 100%;
background: #EFEFEF;
font-weight: 400;
font-size: 11px;
line-height: 15.18px;
color: #777;
a {
display: flex;
align-items: center;
justify-content: flex-start;
color: #000;
font-size: 14px;
cursor: pointer;
@media only screen and (max-width: 767px) {
font-size: 12px;
}
&.extra-text {
align-items: flex-start;
flex-direction: column;
}
}
&::before, &::after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index: 9;
}
&::before {
border-width: 31px;
margin-top: -31px;
border-color: transparent;
border-left-color: #000;
@media only screen and (max-width: 1032px) {
border-width: 28px;
margin-top: -28px;
}
@media only screen and (max-width: 767px) {
border-width: 24px;
margin-top: -24px;
}
}
&::after {
border-width: 30px;
margin-top: -30px;
border-color: transparent;
border-left-color: #EFEFEF;
@media only screen and (max-width: 1032px) {
border-width: 27px;
margin-top: -27px;
}
@media only screen and (max-width: 767px) {
border-width: 23px;
margin-top: -23px;
}
}
small {
@media only screen and (max-width: 767px) {
display: none;
}
}
&.current {
background: #000;
color: #E0D2B8;
.step-number {
background: #E0D2B8;
color: #000;
border-color: #000;
}
.step_desc {
color: #E0D2B8;
}
p, small, a {
color: #E0D2B8;
}
&:after {
border-left-color: #000;
}
.sub-select-item {
.price_links {
.s-displayprice {
color: #E0D2B8;
@media only screen and (max-width: 767px) {
color: #000;
}
}
a {
@media only screen and (max-width: 767px) {
color: #000;
}
}
}
}
}
&.selecte-item {
.sub-select-item {
justify-content: flex-start;
@media only screen and (max-width: 767px) {
justify-content: space-between;
}
.stone_discription {
width: 350px;
@media only screen and (max-width: 767px) {
width: 100%;
white-space: nowrap;
margin-right: 5px;
}
button.final-summany-btn {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
position: absolute;
right: 110px;
top: 14px;
background: #E0D2B8;
border-radius: 4px;
color: #000000;
font-size: 14px;
line-height: normal;
padding: 7px 20px;
width: 130px;
@media only screen and (max-width: 767px) {
display: none;
}
}
}
&.setting-select-item {
justify-content: space-between;
}
}
}
&.setting_step {
.quick_icon {
background: url(../images/tooltip-icon.svg) no-repeat left top;
padding-left: 25px;
width: 54px;
height: 20px;
position: relative;
font-size: 12px;
text-decoration: underline;
@media only screen and (max-width: 767px) {
padding-left: 17px;
width: 18px;
height: 14px;
background-size: contain;
font-size: 12px;
margin-left: 3px;
}
}
&.current {
.quick_icon {
background-image: url(../images/tooltip-black.svg);
}
}
}
.step-number {
font-family: var(--font-vietnam);
width: 39px;
height: 39px;
border: 1px solid #666;
border-radius: 50%;
font-size: 20px;
font-weight: 400;
line-height: 1;
color: #777;
padding: 0px 0 0;
margin-right: 15px;
margin-left: 15px;
text-align: center;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
@media only screen and (max-width: 1032px) {
width: 20px;
height: 20px;
font-size: 12px;
margin-right: 5px;
line-height: 20px;
margin-left: 5px;
display: inline-block;
padding: 0 5px;
}
@media only screen and (max-width: 389.98px) {
margin-right: 5px;
}
}
.step_desc {
color: #686861;
letter-spacing: .05em;
font-weight: 400;
font-size: 11px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 50vw;
line-height: 15px;
@media only screen and (max-width: 767px) {
display: none;
}
.strike-through {
margin-right: 5px;
text-decoration: line-through;
}
}
p {
margin-bottom: 0;
}
&:nth-child(2) {
a {
padding-left: 0;
@media only screen and (max-width: 767px) {
padding-left: 0;
}
}
}
.step_details {
display: flex;
align-items: center;
font-family: "be_vietnamregular";
font-weight: 400;
font-size: 14px;
color: #000000;
line-height: 20.45px;
padding-left: 10px;
@media only screen and (max-width: 767px) {
padding-left: 5px;
}
}
.sub-select-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 20px;
@media only screen and (max-width: 767px) {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0;
}
p {
display: flex;
align-items: center;
}
.price_links {
display: block;
@media only screen and (max-width: 790px) {
display: none;
}
@media only screen and (max-width: 767px) {
display: none;
position: absolute;
top: 42px;
background: #fff;
width: 150px;
border: 0px solid #999;
padding: 15px;
z-index: 1111;
border-radius: 5px;
box-shadow: 0 3px 7px rgba(0,0,0,.21);
left: 5px;
.step_desc {
display: block;
color: #000;
max-width: 100%;
white-space: normal;
}
}
.s-displayprice {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
font-size: 14px;
display: block;
width: 100%;
color: #000;
}
a {
font-family: var(--font-vietnam-regular);
font-weight: 400;
font-size: 12px;
text-decoration: underline;
display: inline-block;
padding: 0 5px;
margin-top: 6px;
@media only screen and (max-width: 767px) {
padding: 0 5px 0 0;
}
&:nth-child(2) {
position: relative;
padding-right: 10px;
padding-left: 0;
&:after {
content: "|";
position: absolute;
right: 0;
font-size: 10px;
top: 1px;
}
}
}
}
.remove-step.rmv-desk {
position: absolute;
right: 20px;
font-size: 11px;
&:hover {
text-decoration: underline;
}
}
}
.info-text {
@media only screen and (max-width: 767px) {
position: absolute;
left: 44px;
bottom: -2px;
font-size: 10px;
&.second-info {
left: 64px;
}
}
}
&#feed-container-target {
.step_desc {
.rb-price {
position: absolute;
right: 33px;
top: 11px;
font-size: 13px;
.special_price {
text-decoration: line-through;
}
@media only screen and (max-width: 767px) {
position: relative;
right: unset;
top: unset;
font-size: 13px;
margin-top: 7px;
}
}
}
}
}
}
body.categorypath-build-your-pendant-by-setting, body.categorypath-build-your-pendant-stone-list, body.categorypath-build-your-pendant-by-stone {
@media only screen and (max-width: 767px) {
.settings-steps {
.setting-item {
a {
font-size: 11px;
width: 73px;
word-wrap: break-word;
white-space: break-spaces;
line-height: 14px;
text-transform: capitalize;
}
&#summary-container-target {
a {
width: 85px;
}
p {
font-size: 11px;
line-height: 15px;
}
}
}
}
}
.breadcrumbs {
display: none !important;
}
}
:root {
--iti-hover-color: rgba(0, 0, 0, 0.05);
--iti-border-color: #ccc;
--iti-dialcode-color: #999;
--iti-dropdown-bg: white;
--iti-spacer-horizontal: 8px;
--iti-flag-height: 12px;
--iti-flag-width: 16px;
--iti-border-width: 1px;
--iti-arrow-height: 4px;
--iti-arrow-width: 6px;
--iti-triangle-border: calc(var(--iti-arrow-width) / 2);
--iti-arrow-padding: 6px;
--iti-arrow-color: #555;
--iti-path-flags-1x: url("../images/flags.webp");
--iti-path-flags-2x: url("../images/flags@2x.webp");
--iti-path-globe-1x: url("../images/globe.webp");
--iti-path-globe-2x: url("../../../../../frontend/Hyva/default/en_US/MaxMage_InternationalTelephoneInput/images/globe@2x.webp");
--iti-flag-sprite-width: 3904px;
--iti-flag-sprite-height: 12px;
--iti-mobile-popup-margin: 30px;
}
.iti {
position: relative;
display: inline-block;
}
.iti * {
box-sizing: border-box;
}
.iti__hide {
display: none;
}
.iti__v-hide {
visibility: hidden;
}
.iti__a11y-text {
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
}
.iti input.iti__tel-input, .iti input.iti__tel-input[type=text], .iti input.iti__tel-input[type=tel] {
position: relative;
z-index: 0;
margin: 0 !important;
}
.iti__country-container {
position: absolute;
top: 0;
bottom: 0;
padding: var(--iti-border-width);
}
.iti__selected-country {
z-index: 1;
position: relative;
display: flex;
align-items: center;
height: 100%;
background: none;
border: 0;
margin: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
border-radius: 0;
font-weight: inherit;
line-height: inherit;
text-decoration: none;
}
.iti__selected-country-primary {
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}
.iti__arrow {
margin-left: var(--iti-arrow-padding);
width: 0;
height: 0;
border-left: var(--iti-triangle-border) solid transparent;
border-right: var(--iti-triangle-border) solid transparent;
border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
}
[dir=rtl] .iti__arrow {
margin-right: var(--iti-arrow-padding);
margin-left: 0;
}
.iti__arrow--up {
border-top: none;
border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
}
.iti__dropdown-content {
border-radius: 3px;
background-color: var(--iti-dropdown-bg);
}
.iti--inline-dropdown .iti__dropdown-content {
position: absolute;
z-index: 2;
margin-top: 3px;
margin-left: calc(var(--iti-border-width) * -1);
border: var(--iti-border-width) solid var(--iti-border-color);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.iti__search-input {
width: 100%;
border-width: 0;
border-radius: 3px;
}
.iti__search-input + .iti__country-list {
border-top: 1px solid var(--iti-border-color);
}
.iti__country-list {
list-style: none;
padding: 0;
margin: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.iti--inline-dropdown .iti__country-list {
max-height: 185px;
}
.iti--flexible-dropdown-width .iti__country-list {
white-space: nowrap;
}
@media (max-width: 500px) {
.iti--flexible-dropdown-width .iti__country-list {
white-space: normal;
}
}
.iti__country {
display: flex;
align-items: center;
padding: 8px var(--iti-spacer-horizontal);
outline: none;
}
.iti__dial-code {
color: var(--iti-dialcode-color);
}
.iti__country.iti__highlight {
background-color: var(--iti-hover-color);
}
.iti__country-list .iti__flag, .iti__country-name {
margin-right: var(--iti-spacer-horizontal);
}
[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
margin-right: 0;
margin-left: var(--iti-spacer-horizontal);
}
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
cursor: pointer;
}
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
background-color: var(--iti-hover-color);
}
.iti .iti__selected-dial-code {
margin-left: 4px;
}
[dir=rtl] .iti .iti__selected-dial-code {
margin-left: 0;
margin-right: 4px;
}
.iti--container {
position: fixed;
top: -1000px;
left: -1000px;
z-index: 1060;
padding: var(--iti-border-width);
}
.iti--container:hover {
cursor: pointer;
}
.iti--fullscreen-popup.iti--container {
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
padding: var(--iti-mobile-popup-margin);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.iti--fullscreen-popup .iti__dropdown-content {
display: flex;
flex-direction: column;
max-height: 100%;
position: relative;
}
.iti--fullscreen-popup .iti__country {
padding: 10px 10px;
line-height: 1.5em;
}
.iti__flag {
--iti-flag-offset: 100px;
height: var(--iti-flag-height);
width: var(--iti-flag-width);
border-radius: 1px;
box-shadow: 0px 0px 1px 0px #888;
background-image: var(--iti-path-flags-1x);
background-repeat: no-repeat;
background-position: var(--iti-flag-offset) 0;
background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
}
.iti__ac {
--iti-flag-offset: 0px;
}
.iti__ad {
--iti-flag-offset: -16px;
}
.iti__ae {
--iti-flag-offset: -32px;
}
.iti__af {
--iti-flag-offset: -48px;
}
.iti__ag {
--iti-flag-offset: -64px;
}
.iti__ai {
--iti-flag-offset: -80px;
}
.iti__al {
--iti-flag-offset: -96px;
}
.iti__am {
--iti-flag-offset: -112px;
}
.iti__ao {
--iti-flag-offset: -128px;
}
.iti__ar {
--iti-flag-offset: -144px;
}
.iti__as {
--iti-flag-offset: -160px;
}
.iti__at {
--iti-flag-offset: -176px;
}
.iti__au {
--iti-flag-offset: -192px;
}
.iti__aw {
--iti-flag-offset: -208px;
}
.iti__ax {
--iti-flag-offset: -224px;
}
.iti__az {
--iti-flag-offset: -240px;
}
.iti__ba {
--iti-flag-offset: -256px;
}
.iti__bb {
--iti-flag-offset: -272px;
}
.iti__bd {
--iti-flag-offset: -288px;
}
.iti__be {
--iti-flag-offset: -304px;
}
.iti__bf {
--iti-flag-offset: -320px;
}
.iti__bg {
--iti-flag-offset: -336px;
}
.iti__bh {
--iti-flag-offset: -352px;
}
.iti__bi {
--iti-flag-offset: -368px;
}
.iti__bj {
--iti-flag-offset: -384px;
}
.iti__bl {
--iti-flag-offset: -400px;
}
.iti__bm {
--iti-flag-offset: -416px;
}
.iti__bn {
--iti-flag-offset: -432px;
}
.iti__bo {
--iti-flag-offset: -448px;
}
.iti__bq {
--iti-flag-offset: -464px;
}
.iti__br {
--iti-flag-offset: -480px;
}
.iti__bs {
--iti-flag-offset: -496px;
}
.iti__bt {
--iti-flag-offset: -512px;
}
.iti__bw {
--iti-flag-offset: -528px;
}
.iti__by {
--iti-flag-offset: -544px;
}
.iti__bz {
--iti-flag-offset: -560px;
}
.iti__ca {
--iti-flag-offset: -576px;
}
.iti__cc {
--iti-flag-offset: -592px;
}
.iti__cd {
--iti-flag-offset: -608px;
}
.iti__cf {
--iti-flag-offset: -624px;
}
.iti__cg {
--iti-flag-offset: -640px;
}
.iti__ch {
--iti-flag-offset: -656px;
}
.iti__ci {
--iti-flag-offset: -672px;
}
.iti__ck {
--iti-flag-offset: -688px;
}
.iti__cl {
--iti-flag-offset: -704px;
}
.iti__cm {
--iti-flag-offset: -720px;
}
.iti__cn {
--iti-flag-offset: -736px;
}
.iti__co {
--iti-flag-offset: -752px;
}
.iti__cr {
--iti-flag-offset: -768px;
}
.iti__cu {
--iti-flag-offset: -784px;
}
.iti__cv {
--iti-flag-offset: -800px;
}
.iti__cw {
--iti-flag-offset: -816px;
}
.iti__cx {
--iti-flag-offset: -832px;
}
.iti__cy {
--iti-flag-offset: -848px;
}
.iti__cz {
--iti-flag-offset: -864px;
}
.iti__de {
--iti-flag-offset: -880px;
}
.iti__dj {
--iti-flag-offset: -896px;
}
.iti__dk {
--iti-flag-offset: -912px;
}
.iti__dm {
--iti-flag-offset: -928px;
}
.iti__do {
--iti-flag-offset: -944px;
}
.iti__dz {
--iti-flag-offset: -960px;
}
.iti__ec {
--iti-flag-offset: -976px;
}
.iti__ee {
--iti-flag-offset: -992px;
}
.iti__eg {
--iti-flag-offset: -1008px;
}
.iti__eh {
--iti-flag-offset: -1024px;
}
.iti__er {
--iti-flag-offset: -1040px;
}
.iti__es {
--iti-flag-offset: -1056px;
}
.iti__et {
--iti-flag-offset: -1072px;
}
.iti__fi {
--iti-flag-offset: -1088px;
}
.iti__fj {
--iti-flag-offset: -1104px;
}
.iti__fk {
--iti-flag-offset: -1120px;
}
.iti__fm {
--iti-flag-offset: -1136px;
}
.iti__fo {
--iti-flag-offset: -1152px;
}
.iti__fr {
--iti-flag-offset: -1168px;
}
.iti__ga {
--iti-flag-offset: -1184px;
}
.iti__gb {
--iti-flag-offset: -1200px;
}
.iti__gd {
--iti-flag-offset: -1216px;
}
.iti__ge {
--iti-flag-offset: -1232px;
}
.iti__gf {
--iti-flag-offset: -1248px;
}
.iti__gg {
--iti-flag-offset: -1264px;
}
.iti__gh {
--iti-flag-offset: -1280px;
}
.iti__gi {
--iti-flag-offset: -1296px;
}
.iti__gl {
--iti-flag-offset: -1312px;
}
.iti__gm {
--iti-flag-offset: -1328px;
}
.iti__gn {
--iti-flag-offset: -1344px;
}
.iti__gp {
--iti-flag-offset: -1360px;
}
.iti__gq {
--iti-flag-offset: -1376px;
}
.iti__gr {
--iti-flag-offset: -1392px;
}
.iti__gt {
--iti-flag-offset: -1408px;
}
.iti__gu {
--iti-flag-offset: -1424px;
}
.iti__gw {
--iti-flag-offset: -1440px;
}
.iti__gy {
--iti-flag-offset: -1456px;
}
.iti__hk {
--iti-flag-offset: -1472px;
}
.iti__hn {
--iti-flag-offset: -1488px;
}
.iti__hr {
--iti-flag-offset: -1504px;
}
.iti__ht {
--iti-flag-offset: -1520px;
}
.iti__hu {
--iti-flag-offset: -1536px;
}
.iti__id {
--iti-flag-offset: -1552px;
}
.iti__ie {
--iti-flag-offset: -1568px;
}
.iti__il {
--iti-flag-offset: -1584px;
}
.iti__im {
--iti-flag-offset: -1600px;
}
.iti__in {
--iti-flag-offset: -1616px;
}
.iti__io {
--iti-flag-offset: -1632px;
}
.iti__iq {
--iti-flag-offset: -1648px;
}
.iti__ir {
--iti-flag-offset: -1664px;
}
.iti__is {
--iti-flag-offset: -1680px;
}
.iti__it {
--iti-flag-offset: -1696px;
}
.iti__je {
--iti-flag-offset: -1712px;
}
.iti__jm {
--iti-flag-offset: -1728px;
}
.iti__jo {
--iti-flag-offset: -1744px;
}
.iti__jp {
--iti-flag-offset: -1760px;
}
.iti__ke {
--iti-flag-offset: -1776px;
}
.iti__kg {
--iti-flag-offset: -1792px;
}
.iti__kh {
--iti-flag-offset: -1808px;
}
.iti__ki {
--iti-flag-offset: -1824px;
}
.iti__km {
--iti-flag-offset: -1840px;
}
.iti__kn {
--iti-flag-offset: -1856px;
}
.iti__kp {
--iti-flag-offset: -1872px;
}
.iti__kr {
--iti-flag-offset: -1888px;
}
.iti__kw {
--iti-flag-offset: -1904px;
}
.iti__ky {
--iti-flag-offset: -1920px;
}
.iti__kz {
--iti-flag-offset: -1936px;
}
.iti__la {
--iti-flag-offset: -1952px;
}
.iti__lb {
--iti-flag-offset: -1968px;
}
.iti__lc {
--iti-flag-offset: -1984px;
}
.iti__li {
--iti-flag-offset: -2000px;
}
.iti__lk {
--iti-flag-offset: -2016px;
}
.iti__lr {
--iti-flag-offset: -2032px;
}
.iti__ls {
--iti-flag-offset: -2048px;
}
.iti__lt {
--iti-flag-offset: -2064px;
}
.iti__lu {
--iti-flag-offset: -2080px;
}
.iti__lv {
--iti-flag-offset: -2096px;
}
.iti__ly {
--iti-flag-offset: -2112px;
}
.iti__ma {
--iti-flag-offset: -2128px;
}
.iti__mc {
--iti-flag-offset: -2144px;
}
.iti__md {
--iti-flag-offset: -2160px;
}
.iti__me {
--iti-flag-offset: -2176px;
}
.iti__mf {
--iti-flag-offset: -2192px;
}
.iti__mg {
--iti-flag-offset: -2208px;
}
.iti__mh {
--iti-flag-offset: -2224px;
}
.iti__mk {
--iti-flag-offset: -2240px;
}
.iti__ml {
--iti-flag-offset: -2256px;
}
.iti__mm {
--iti-flag-offset: -2272px;
}
.iti__mn {
--iti-flag-offset: -2288px;
}
.iti__mo {
--iti-flag-offset: -2304px;
}
.iti__mp {
--iti-flag-offset: -2320px;
}
.iti__mq {
--iti-flag-offset: -2336px;
}
.iti__mr {
--iti-flag-offset: -2352px;
}
.iti__ms {
--iti-flag-offset: -2368px;
}
.iti__mt {
--iti-flag-offset: -2384px;
}
.iti__mu {
--iti-flag-offset: -2400px;
}
.iti__mv {
--iti-flag-offset: -2416px;
}
.iti__mw {
--iti-flag-offset: -2432px;
}
.iti__mx {
--iti-flag-offset: -2448px;
}
.iti__my {
--iti-flag-offset: -2464px;
}
.iti__mz {
--iti-flag-offset: -2480px;
}
.iti__na {
--iti-flag-offset: -2496px;
}
.iti__nc {
--iti-flag-offset: -2512px;
}
.iti__ne {
--iti-flag-offset: -2528px;
}
.iti__nf {
--iti-flag-offset: -2544px;
}
.iti__ng {
--iti-flag-offset: -2560px;
}
.iti__ni {
--iti-flag-offset: -2576px;
}
.iti__nl {
--iti-flag-offset: -2592px;
}
.iti__no {
--iti-flag-offset: -2608px;
}
.iti__np {
--iti-flag-offset: -2624px;
}
.iti__nr {
--iti-flag-offset: -2640px;
}
.iti__nu {
--iti-flag-offset: -2656px;
}
.iti__nz {
--iti-flag-offset: -2672px;
}
.iti__om {
--iti-flag-offset: -2688px;
}
.iti__pa {
--iti-flag-offset: -2704px;
}
.iti__pe {
--iti-flag-offset: -2720px;
}
.iti__pf {
--iti-flag-offset: -2736px;
}
.iti__pg {
--iti-flag-offset: -2752px;
}
.iti__ph {
--iti-flag-offset: -2768px;
}
.iti__pk {
--iti-flag-offset: -2784px;
}
.iti__pl {
--iti-flag-offset: -2800px;
}
.iti__pm {
--iti-flag-offset: -2816px;
}
.iti__pr {
--iti-flag-offset: -2832px;
}
.iti__ps {
--iti-flag-offset: -2848px;
}
.iti__pt {
--iti-flag-offset: -2864px;
}
.iti__pw {
--iti-flag-offset: -2880px;
}
.iti__py {
--iti-flag-offset: -2896px;
}
.iti__qa {
--iti-flag-offset: -2912px;
}
.iti__re {
--iti-flag-offset: -2928px;
}
.iti__ro {
--iti-flag-offset: -2944px;
}
.iti__rs {
--iti-flag-offset: -2960px;
}
.iti__ru {
--iti-flag-offset: -2976px;
}
.iti__rw {
--iti-flag-offset: -2992px;
}
.iti__sa {
--iti-flag-offset: -3008px;
}
.iti__sb {
--iti-flag-offset: -3024px;
}
.iti__sc {
--iti-flag-offset: -3040px;
}
.iti__sd {
--iti-flag-offset: -3056px;
}
.iti__se {
--iti-flag-offset: -3072px;
}
.iti__sg {
--iti-flag-offset: -3088px;
}
.iti__sh {
--iti-flag-offset: -3104px;
}
.iti__si {
--iti-flag-offset: -3120px;
}
.iti__sj {
--iti-flag-offset: -3136px;
}
.iti__sk {
--iti-flag-offset: -3152px;
}
.iti__sl {
--iti-flag-offset: -3168px;
}
.iti__sm {
--iti-flag-offset: -3184px;
}
.iti__sn {
--iti-flag-offset: -3200px;
}
.iti__so {
--iti-flag-offset: -3216px;
}
.iti__sr {
--iti-flag-offset: -3232px;
}
.iti__ss {
--iti-flag-offset: -3248px;
}
.iti__st {
--iti-flag-offset: -3264px;
}
.iti__sv {
--iti-flag-offset: -3280px;
}
.iti__sx {
--iti-flag-offset: -3296px;
}
.iti__sy {
--iti-flag-offset: -3312px;
}
.iti__sz {
--iti-flag-offset: -3328px;
}
.iti__tc {
--iti-flag-offset: -3344px;
}
.iti__td {
--iti-flag-offset: -3360px;
}
.iti__tg {
--iti-flag-offset: -3376px;
}
.iti__th {
--iti-flag-offset: -3392px;
}
.iti__tj {
--iti-flag-offset: -3408px;
}
.iti__tk {
--iti-flag-offset: -3424px;
}
.iti__tl {
--iti-flag-offset: -3440px;
}
.iti__tm {
--iti-flag-offset: -3456px;
}
.iti__tn {
--iti-flag-offset: -3472px;
}
.iti__to {
--iti-flag-offset: -3488px;
}
.iti__tr {
--iti-flag-offset: -3504px;
}
.iti__tt {
--iti-flag-offset: -3520px;
}
.iti__tv {
--iti-flag-offset: -3536px;
}
.iti__tw {
--iti-flag-offset: -3552px;
}
.iti__tz {
--iti-flag-offset: -3568px;
}
.iti__ua {
--iti-flag-offset: -3584px;
}
.iti__ug {
--iti-flag-offset: -3600px;
}
.iti__us {
--iti-flag-offset: -3616px;
}
.iti__uy {
--iti-flag-offset: -3632px;
}
.iti__uz {
--iti-flag-offset: -3648px;
}
.iti__va {
--iti-flag-offset: -3664px;
}
.iti__vc {
--iti-flag-offset: -3680px;
}
.iti__ve {
--iti-flag-offset: -3696px;
}
.iti__vg {
--iti-flag-offset: -3712px;
}
.iti__vi {
--iti-flag-offset: -3728px;
}
.iti__vn {
--iti-flag-offset: -3744px;
}
.iti__vu {
--iti-flag-offset: -3760px;
}
.iti__wf {
--iti-flag-offset: -3776px;
}
.iti__ws {
--iti-flag-offset: -3792px;
}
.iti__xk {
--iti-flag-offset: -3808px;
}
.iti__ye {
--iti-flag-offset: -3824px;
}
.iti__yt {
--iti-flag-offset: -3840px;
}
.iti__za {
--iti-flag-offset: -3856px;
}
.iti__zm {
--iti-flag-offset: -3872px;
}
.iti__zw {
--iti-flag-offset: -3888px;
}
.iti__globe {
background-image: var(--iti-path-globe-1x);
background-size: contain;
background-position: right;
box-shadow: none;
height: 19px;
}
@media (min-resolution: 2x) {
.iti__flag {
background-image: var(--iti-path-flags-2x);
}
.iti__globe {
background-image: var(--iti-path-globe-2x);
}
}
.border-gradient-top {
border-image: var(--Gold_Vertical) 1;
}
.gold-border {
border-radius: var(--radius-lg);
border-style: var(--tw-border-style);
border-width: 2px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
}
.btn-gold-border {
border-radius: 0.25rem;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: transparent;
color: var(--color-black);
background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold-border) border-box;
}
.btn-gold-border:hover, .btn-gold-border.active {
background: var(--gradient-gold-fill) padding-box, var(--gradient-gold-border) border-box;
}
@layer components {
.actions-toolbar {
display: flex;
gap: calc(var(--spacing) * 4);
flex-direction: column;
margin-block-start: calc(var(--spacing) * 6);
padding-block-start: calc(var(--spacing) * 4);
border-block-start-width: 1px;
border-block-start-color: var(--color-gray-300);
@media (width >= 48rem) {
flex-direction: row-reverse;
align-items: center;
}
& a.back {
text-decoration-line: underline;
}
}
}
.filter-content {
.items {
&.-am-singleselect, &.amshopby-fly-out-view {
.item {
> .filter-row {
> input[type='radio'] {
display: none;
}
}
.items-children {
.category-filter-row a {
width: 100%;
align-items: flex-start;
justify-content: flex-start;
img {
margin-top: 2px;
}
.label {
margin-right: calc(var(--spacing) * 1);
}
}
}
}
}
&.am-labels-folding.is-by-click {
button.filter-options-title {
position: absolute;
top: 5px;
left: calc(var(--spacing) * 0);
}
}
}
&.-am-by-click.-am-multiselect {
.item.am-without-children {
padding-left: calc(var(--spacing) * 8);
}
}
.amshopby-flyout-block {
.flyout-element {
padding-inline: calc(var(--spacing) * 4);
}
}
.items.-am-by-click {
.item {
padding-left: calc(var(--spacing) * 7) !important;
}
}
.am-labels-folding {
.item {
padding-left: calc(var(--spacing) * 6);
}
}
.tooltip-wrapper {
> div > div > div {
transform: translate(-20%, -100%);
}
div {
span {
display: block;
white-space: break-spaces;
}
}
}
.swatch-attribute {
.swatch-attribute-options {
.swatch-option {
&.amshopby-link-selected {
.am-swatch-image {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
--tw-ring-color: color-mix(in srgb, oklch(46% 0.2 265) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
}
}
}
.am-swatch-image {
img {
vertical-align: inherit;
}
}
}
}
}
}
.amshopby-remove-item {
.am-swatch-image {
min-width: 40px;
border-style: var(--tw-border-style);
border-width: 1px;
&:hover {
border-color: transparent;
--tw-shadow: 0 0 #0000;
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
--tw-ring-color: var(--color-primary);
--tw-ring-opacity: 50;
}
img {
vertical-align: inherit;
}
}
}
.amasty-catalog-topnav {
.amshopby-fromto-wrap {
min-width: 250px;
.am-fromto-widget {
padding-inline: calc(var(--spacing) * 0);
.amshopby-input-wrapper {
max-width: 100px;
}
}
}
.amshopby-flyout-block {
.flyout-element {
padding-inline: calc(var(--spacing) * 4);
}
}
.filter-options-title-level-1 {
left: calc(var(--spacing) * 6);
}
.-am-by-click {
.item.level-1 {
>.filter-row {
padding-left: calc(var(--spacing) * 7);
}
>.items.-folding {
padding-left: calc(var(--spacing) * 4);
}
}
}
.items:not(.amshopby-fly-out-view) {
ul.level-1, ol.level-1 {
padding-left: calc(var(--spacing) * 6);
}
}
.am-filter >.swatch-attribute, ol .item:not(.am-swatch-wrapper) {
padding-inline: calc(var(--spacing) * 4);
}
}
.filter-options-content {
.-am-overflow::-webkit-scrollbar-track, .am-filter-items-category_ids::-webkit-scrollbar-track {
border-radius: calc(infinity * 1px);
}
.-am-overflow::-webkit-scrollbar, .am-filter-items-category_ids::-webkit-scrollbar {
width: calc(var(--spacing) * 2);
background-color: var(--color-gray-200);
}
.-am-overflow::-webkit-scrollbar-thumb, .am-filter-items-category_ids::-webkit-scrollbar-thumb {
border-radius: calc(infinity * 1px);
background-color: var(--color-amsb_sl_gray_1);
background-clip: content-box;
}
}
#html-body {
&.-amshopby-sticky {
.columns {
position: relative;
> .sidebar-main {
position: sticky;
top: calc(var(--spacing) * 0);
z-index: 20;
background-color: var(--color-container);
.filter-content::-webkit-scrollbar-track {
border-radius: calc(infinity * 1px);
}
.filter-content::-webkit-scrollbar {
width: calc(var(--spacing) * 2);
background-color: var(--color-gray-200);
}
.filter-content::-webkit-scrollbar-thumb {
border-radius: calc(infinity * 1px);
background-color: var(--color-amsb_sl_gray_1);
background-clip: content-box;
color: red;
}
.swatch-attribute {
.min-w-20.z-10.text-sm.leading-tight.text-black {
left: calc(var(--spacing) * 5);
max-width: 200px !important;
+ svg {
right: calc(var(--spacing) * -8);
}
}
> div[class^='absolute'] {
transform: translate(28px, 5px);
}
}
}
}
}
}
.catalog-product-view .amshopby-option-link img:not([src*='resized/']) {
max-height: 30px;
max-width: 30px;
}
.product-info-main > section:first-child {
h1.page-title {
width: 100%;
}
.amshopby-option-link {
margin-top: calc(var(--spacing) * 2);
margin-right: calc(var(--spacing) * 2);
div[x-show="showTooltip"] .am-brand-image {
max-height: 100%;
max-width: 100%;
}
}
}
.filter-content.is-sidebar {
.swatch-attribute, .amshopby-search-box, .item.level-1, .am-show-more {
padding-inline: calc(var(--spacing) * 0);
}
}
.filter-content.is-sidebar {
.swatch-attribute, .amshopby-search-box, .am-filter > .items > .item, .am-filter > .items > .item-category {
padding-inline: calc(var(--spacing) * 0);
}
}
.amshopby-fromto-wrap input.am-filter-price {
&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
.amshopby-slider-container {
.noUi-handle::after, .noUi-handle::before {
display: none;
}
.noUi-horizontal {
.noUi-tooltip {
bottom: 130%;
}
}
.noUi-tooltip {
pointer-events: none;
border-radius: 0.25rem;
border-radius: var(--radius-sm);
--tw-border-style: none;
border-style: none;
padding: calc(var(--spacing) * 1);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
color: var(--color-white);
opacity: 0%;
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
border-color: inherit;
background-color: inherit;
&:after {
content: '';
position: absolute;
top: 100%;
left: calc(1/2 * 100%);
margin-left: -6px;
height: calc(var(--spacing) * 0);
width: calc(var(--spacing) * 0);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid;
border-top-color: inherit;
}
}
.noUi-handle {
--tw-border-style: none;
border-style: none;
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
&:hover {
.noUi-tooltip {
opacity: 100%;
}
}
}
.noUi-target {
--tw-border-style: none;
border-style: none;
}
&.-default {
.noUi-connect {
background-color: var(--color-amsb_sl_gray_1);
}
.noUi-target {
height: 10px;
background-color: var(--color-amsb_sl_gray);
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.noUi-handle {
top: -3px;
right: calc(var(--spacing) * -2);
height: calc(var(--spacing) * 4);
width: calc(var(--spacing) * 4);
cursor: pointer;
border-radius: calc(infinity * 1px);
border-style: var(--tw-border-style);
border-width: 0px;
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.noUi-tooltip {
background-color: transparent;
color: transparent;
&:after {
border-color: transparent;
}
}
}
&.-improved {
.noUi-connect {
background-color: var(--color-amsb_sl_gray_1);
}
.noUi-target {
height: calc(var(--spacing) * 1);
background-color: var(--color-amsb_sl_gray);
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.noUi-horizontal {
.noUi-tooltip {
margin-bottom: calc(var(--spacing) * 1);
}
}
.noUi-handle {
top: -6px;
right: calc(var(--spacing) * -2);
height: calc(var(--spacing) * 4);
width: calc(var(--spacing) * 4);
cursor: pointer;
border-radius: calc(infinity * 1px);
border-style: var(--tw-border-style);
border-width: 0px;
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
&.-volumetric {
.noUi-connect {
background-color: var(--color-amsb_sl_gray_1);
}
.noUi-target {
height: calc(var(--spacing) * 1);
background-color: var(--color-amsb_sl_gray_2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.noUi-horizontal {
.noUi-tooltip {
margin-bottom: calc(var(--spacing) * 1);
}
}
.noUi-handle {
top: calc(var(--spacing) * 3);
right: calc(var(--spacing) * -1);
height: calc(var(--spacing) * 3);
width: calc(var(--spacing) * 2);
cursor: pointer;
border-radius: var(--radius-sm);
border-style: var(--tw-border-style);
border-width: 0px;
&:before {
content: '';
position: absolute;
top: calc(var(--spacing) * 0);
left: calc(1/2 * 100%);
margin-top: calc(var(--spacing) * -2);
margin-left: calc(var(--spacing) * -1);
display: block;
height: calc(var(--spacing) * 0);
width: calc(var(--spacing) * 0);
border-left: 4px solid #fff;
border-right: 4px solid #fff;
border-top: 4px solid #fff;
border-bottom: 4px solid;
border-bottom-color: inherit;
}
}
.noUi-horizontal {
.noUi-tooltip {
margin-bottom: calc(var(--spacing) * 4);
}
}
}
&.-light {
.noUi-connect {
background-color: var(--color-amsb_sl_gray_1);
}
.noUi-target {
height: 2px;
background-color: var(--color-amsb_sl_gray_2);
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.noUi-handle {
top: -7px;
right: calc(var(--spacing) * -2);
height: calc(var(--spacing) * 4);
width: calc(var(--spacing) * 4);
cursor: pointer;
border-radius: calc(infinity * 1px);
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-amsb_sl_gray_2);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
&:not(:hover) {
border-color: #dfdedd !important;
}
}
.noUi-horizontal {
.noUi-tooltip {
margin-bottom: calc(var(--spacing) * 1);
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-amsb_sl_gray_2);
&:after {
margin-top: -2px;
margin-left: calc(var(--spacing) * -1);
height: 6px;
width: 6px;
transform-origin: center;
rotate: calc(45deg * -1);
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
border-top-style: var(--tw-border-style);
border-top-width: 0px;
border-right-style: var(--tw-border-style);
border-right-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-left-style: var(--tw-border-style);
border-left-width: 1px;
border-color: var(--color-amsb_sl_gray_2);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
}
}
}
}
&.-dark {
.noUi-target {
height: 3px;
background-color: var(--color-amsb_sl_gray_3);
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.noUi-horizontal {
.noUi-tooltip {
margin-bottom: calc(var(--spacing) * 1);
}
}
.noUi-handle {
top: -6px;
right: -5px;
height: 15px;
width: 10px;
cursor: pointer;
border-radius: var(--radius-sm);
border-style: var(--tw-border-style);
border-width: 0px;
}
.noUi-horizontal {
.noUi-tooltip {
margin-bottom: calc(var(--spacing) * 1);
}
}
}
}
.amsearch-related-terms {
margin-top: calc(var(--spacing) * 4);
.amsearch-title {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
}
}
.amsearch-related-suggestions, .amsearch-related-recommendations {
margin-top: calc(var(--spacing) * 4);
.title {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
}
}
.amtitles {
.amtitle {
min-width: 45%;
@media (min-width: 768px) {
min-width: unset;
}
&.active {
border-color: var(--color-gray-300);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
color: var(--color-black);
.amsearch-results-icon {
rotate: calc(90deg * -1);
}
}
}
}
.amcontents {
.amcontent {
animation-duration: 0.45s;
animation-fill-mode: both;
animation-name: slideIn;
.amsearch-item {
margin-bottom: calc(var(--spacing) * 1);
.amsearch-link {
font-family: var(--font-vietnam);
font-weight: 600;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
}
}
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform: translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
@-webkit-keyframes slideIn {
0% {
-webkit-transform: transform;
-webkit-opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-webkit-opacity: 1;
}
0% {
-webkit-transform: translateY(1rem);
-webkit-opacity: 0;
}
}
.amsearch-container {
background-color: var(--amsearch-color-background, #ffffff);
.amsearch-highlight {
color: var(--amsearch-color-highlight, #1c6f5a);
font-weight: 700;
}
.card-interactive {
background-color: var(--amsearch-color-background, #ffffff);
&:hover {
background-color: var(--amsearch-color-hover, #f4f5fa);
}
&:focus {
background-color: var(--amsearch-color-hover, #f4f5fa);
}
}
.amsearch-product-name, .am-search-view-all a {
color: var(--amsearch-color-text, #1c6f5a);
&:hover {
color: var(--amsearch-color-text-hover, #1c6f5a);
}
&:focus {
color: var(--amsearch-color-text-focus, #1c6f5a);
}
}
}
.am-search-item-list {
a:not(.reviews-link) {
color: var(--amsearch-color-text, #1c6f5a);
&:hover {
background: var(--amsearch-color-hover, #f4f5fa);
color: var(--amsearch-color-text-hover, #1c6f5a);
}
&:focus {
background: var(--amsearch-color-hover-focus, #f4f5fa);
color: var(--amsearch-color-text-focus, #1c6f5a);
}
}
}
#search_mini_form {
.product-item {
a:not(.reviews-link) {
color: var(--amsearch-color-text, rgba(59, 130, 246, 0.8));
&:hover {
color: var(--amsearch-color-hover-text-hover, rgba(59, 130, 246, 1));
}
}
&:hover {
background: var(--amsearch-color-hover, #f4f5fa);
}
}
}
.amtabs-wrapper {
.amcontent {
a:not(.product-item-link) {
color: #1979c2;
&:hover {
text-decoration: underline;
}
}
}
}
.am-search-content {
width: 100%;
&:not(.am-search-horizontal-view) {
@media (min-width: 768px) {
width: calc(100% - 283px);
}
}
&.am-search-sidebar-disabled {
@media (min-width: 768px) {
width: 100%;
}
}
}
.am-search-sidebar {
width: 100%;
&:not(.am-search-horizontal-view) {
@media (min-width: 768px) {
max-width: 283px;
}
}
}
.am-custom-search-button {
background: var(--amsearch-color-search_button, rgba(59, 130, 246, 1));
color: var(--amsearch-color-search_button_text, #fff);
&:hover {
background: var(--amsearch-color-search_button-hover, rgba(59, 130, 246, 1));
color: var(--amsearch-color-search_button_text-hover, #fff);
}
&:focus {
background: var(--amsearch-color-search_button-hover, #f4f5fa);
color: var(--amsearch-color-search_button_text-hover, #1c6f5a);
}
}
#header .navigation {
z-index: 10;
}
.product-item {
&.list-view {
width: 100%;
&:nth-child(even) {
margin-right: calc(var(--spacing) * 0);
}
@media (min-width: 1024px) {
width: 48%;
&:nth-child(even) {
margin-right: calc(var(--spacing) * 5);
}
}
}
}
#header {
&.a-header-type {
#search-content {
z-index: 110;
@media (min-width: 768px) {
padding-inline: calc(var(--spacing) * 0);
}
}
#menu-search-icon {
display: inline-block;
}
#header-notification {
z-index: 9;
}
#search_mini_form {
button[type="submit"] {
&[disabled] {
background-color: var(--color-indigo-500);
color: var(--color-slate-300);
opacity: 100%;
}
}
}
}
&.b-header-type {
#search-content {
@media (min-width: 768px) {
padding-inline: calc(var(--spacing) * 0);
}
}
}
&.c-header-type {
[x-ref="searchContainerDesktop"] {
&.c-header-type {
position: absolute;
left: calc(var(--spacing) * 0);
margin-inline: calc(var(--spacing) * 0);
width: 100%;
[x-ref="searchForm"] {
max-width: none;
}
}
}
}
}
.column.main {
&.a-header-type {
section {
z-index: 8;
}
}
}
.amsearch-search-page {
.message {
flex-wrap: wrap;
.amelsearch-further-section {
margin-bottom: calc(var(--spacing) * 4);
width: 100%;
.amelsearch-form-section {
color: var(--color-gray-900);
}
}
}
}
:root {
--amscroll-module--path: '../Amasty_Scroll';
--amscroll--transition-duration: .2s;
--amscroll--hover-filter: brightness(.8);
--amscroll-loader--size: 25px;
--amscroll--text--color: #252525;
--amscroll-border-color: #cccfd6;
--amscroll-background-color: white;
--amscroll--indent: 10px;
--amscroll--indent--m: @amscroll--indent + @amscroll--indent / 2;
--amscroll--indent--l: @amscroll--indent * 2;
--amscroll--indent--xl: @amscroll--indent--l + @amscroll--indent / 2;
}
.amscroll-page-num {
clear: both;
margin-top: calc(var(--spacing) * 4);
&.-amscroll-button {
display: inline-block;
border-radius: var(--radius-md);
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-amscroll-border-color);
background-color: var(--color-amscroll-background-color);
padding: calc(var(--spacing) * 3);
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
}
&.-amscroll-divider {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
border-color: var(--color-gray-300);
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
&.-amscroll-background {
background-color: var(--color-amscroll-background-color);
padding-inline: calc(var(--spacing) * 3);
padding-block: calc(var(--spacing) * 2);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
.amscroll-loading-block {
margin-inline: auto;
height: var(--amscroll-loader--size);
width: var(--amscroll-loader--size);
}
.amscroll-loading-icon {
height: var(--amscroll-loader--size);
width: var(--amscroll-loader--size);
}
.amscroll-load-button {
margin-inline: auto;
--btn-stroke: #0000;
--btn-bg: color-mix(in srgb, oklch(46% 0.2 265) 10%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-bg: color-mix(in srgb, var(--color-primary) 10%, #0000);
}
--btn-hover-bg: color-mix(in srgb, oklch(46% 0.2 265) 20%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-hover-bg: color-mix(in srgb, var(--color-primary) 20%, #0000);
}
--btn-active-bg: color-mix(in srgb, oklch(46% 0.2 265) 30%, #0000);
@supports (color: color-mix(in lab, red, red)) {
--btn-active-bg: color-mix(in srgb, var(--color-primary) 30%, #0000);
}
--btn-color: var(--color-fg);
display: inline-flex;
justify-content: center;
align-items: center;
gap: calc(var(--spacing) * 1.5);
padding-block: calc(var(--spacing) * 2);
padding-inline: calc(var(--spacing) * 4);
border-radius: var(--radius-lg);
border-width: 2px;
border-color: var(--btn-stroke);
background-color: var(--btn-bg);
color: var(--btn-color);
font-weight: 500;
user-select: none;
vertical-align: middle;
transition-property: color, background-color, border-color, outline-color;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
&:hover {
border-color: var(--btn-hover-stroke, var(--btn-stroke));
background-color: var(--btn-hover-bg, var(--btn-bg));
color: var(--btn-hover-color, var(--btn-color));
text-decoration: none;
}
&:is(:active, .is-active, [aria-current="page"], [aria-current="true"]) {
border-color: var(--btn-active-stroke, var(--btn-stroke));
background-color: var(--btn-active-bg, var(--btn-bg));
color: var(--btn-active-color, var(--btn-color));
}
&:is(:disabled, [aria-disabled="true"]) {
border-color: var(--btn-disabled-stroke, var(--color-gray-200));
background-color: var(--btn-disabled-bg, var(--color-gray-50));
color: var(--btn-disabled-color, var(--color-gray-500));
}
--btn-stroke: var(--color-primary-lighter);
--btn-bg: var(--color-on-primary);
--btn-color: var(--color-primary-darker);
--btn-hover-stroke: var(--color-primary-lighter);
--btn-hover-bg: var(--color-on-primary);
--btn-hover-color: var(--color-primary-lighter);
--btn-active-stroke: #0000;
--btn-active-bg: var(--color-primary);
--btn-active-color: var(--color-on-primary);
& > .amscroll-text {
pointer-events: none;
}
& > .amscroll-loading-icon {
margin-right: var(--amscroll--indent);
}
}
[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {
display: none;
}
[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {
display: none;
}
[wire\:offline] {
display: none;
}
[wire\:dirty]:not(textarea):not(input):not(select) {
display: none;
}
input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
animation-duration: 50000s;
animation-name: livewireautofill;
}
#livewire-error iframe {
background-color: rgb(255 255 255) !important;
border-radius: 0.375rem !important;
padding: 0.75rem 1rem !important;
}
.aa-Autocomplete {
.aa-Input {
width: 100%;
appearance: none;
padding: calc(var(--spacing) * 2);
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
--tw-leading: var(--leading-normal);
line-height: var(--leading-normal);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
&:focus {
border-color: transparent;
}
&:focus {
--tw-outline-style: none;
outline-style: none;
}
}
.aa-SubmitButton, .aa-ClearButton {
display: none;
}
}
.aa-Panel {
position: absolute;
top: calc(var(--spacing) * 0) !important;
z-index: 50;
background-color: var(--color-container-lighter);
}
.aa-PanelLayout {
padding: calc(var(--spacing) * 8);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.aa-Source {
margin-bottom: calc(var(--spacing) * 4);
&:has(.aa-SourceNoResults) {
display: none;
}
}
.aa-SourceHeader {
padding-bottom: calc(var(--spacing) * 4);
font-family: var(--font-vietnam);
font-weight: 600;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.aa-SourceFooter {
margin-top: calc(var(--spacing) * 4);
span {
font-family: var(--font-vietnam);
font-weight: 600;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
}
.aa-List {
gap: calc(var(--spacing) * 4);
}
.aa-Item {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 4);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-100);
}
}
}
#autocomplete-products-footer {
@media (width < 48rem) {
display: none;
}
}
@screen md {
.aa-Item {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 4);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-100);
}
}
}
.aa-Panel.productColumn2 .aa-PanelLayout section:nth-child(1) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
padding-top: calc(var(--spacing) * 5);
}
.aa-Panel.productColumn2 .aa-PanelLayout section:nth-child(2), .aa-Panel.productColumn1 .aa-PanelLayout section:nth-child(1) {
margin-left: calc(var(--spacing) * 10);
min-width: 570px;
}
.aa-Panel.productColumn2 .aa-PanelLayout section:nth-child(2) {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 5;
}
.aa-Panel .aa-PanelLayout section:nth-child(3) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.aa-Panel .aa-PanelLayout section:nth-child(4) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.aa-Panel .aa-PanelLayout {
display: grid;
column-gap: calc(var(--spacing) * 0);
row-gap: calc(var(--spacing) * 0);
padding-bottom: 45px;
}
}
#algoliaFooter {
display: flex;
align-items: center;
column-gap: calc(var(--spacing) * 1.5);
img {
min-width: calc(var(--spacing) * 20);
}
}
.ais-Hits-list, .ais-InfiniteHits-list, .aa-List {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ais-Hits-item, .ais-InfiniteHits-item, .auc-Recommend-item {
height: 100%;
width: 100%;
padding-inline: calc(var(--spacing) * 2);
padding-bottom: calc(var(--spacing) * 4);
}
mark {
background-color: transparent;
--tw-font-weight: var(--font-weight-extrabold);
font-weight: var(--font-weight-extrabold);
}
.hidden-xs, .hidden-sm {
display: none;
}
.search.results {
display: none;
}
.highlight * {
font-family: var(--font-vietnam);
font-weight: 600;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.ais-SearchBox-form {
position: relative;
display: flex;
width: 100%;
align-items: center;
}
.ais-SearchBox-input {
width: 100%;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-gray-400);
padding-left: calc(var(--spacing) * 2);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
}
button.ais-SearchBox-reset {
position: absolute;
right: calc(var(--spacing) * 0);
cursor: pointer;
padding-right: calc(var(--spacing) * 3);
}
input.ais-SearchBox-input::-webkit-search-decoration, input.ais-SearchBox-input::-webkit-search-cancel-button, input.ais-SearchBox-input::-webkit-search-results-button, input.ais-SearchBox-input::-webkit-search-results-decoration {
display: none;
}
.ais-SearchBox-submit {
display: none;
}
.ais-InfiniteHits-loadMore, .ais-InfiniteHits-loadPrevious {
margin: auto;
display: block;
border-radius: calc(infinity * 1px);
background-color: var(--color-blue-500);
padding-inline: calc(var(--spacing) * 4);
padding-block: calc(var(--spacing) * 2);
font-family: var(--font-vietnam);
font-weight: 600;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
color: var(--color-white);
&:hover {
@media (hover: hover) {
background-color: var(--color-blue-700);
}
}
}
.ais-InfiniteHits-loadMore--disabled, .ais-InfiniteHits-loadPrevious--disabled {
display: none;
}
.ais-Pagination {
display: flex;
justify-content: center;
}
.ais-Pagination-list {
display: inline-flex;
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ais-Pagination-list li.ais-Pagination-item a {
cursor: pointer;
}
.ais-Pagination-list li.ais-Pagination-item--selected a {
cursor: default;
}
.ais-Pagination-item {
margin-left: -1px;
display: inline-flex;
align-items: center;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-gray-300);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
color: var(--color-gray-700);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 150ms;
transition-duration: 150ms;
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
&:hover {
@media (hover: hover) {
color: var(--color-gray-500);
}
}
}
.ais-Pagination-item--previousPage {
position: relative;
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.ais-Pagination-item--nextPage {
position: relative;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.ais-Pagination-item--previousPage::after {
content: '\003C';
padding-inline: calc(var(--spacing) * 3);
padding-block: calc(var(--spacing) * 2);
}
.ais-Pagination-item--nextPage::after {
content: '\003E';
padding-inline: calc(var(--spacing) * 3);
padding-block: calc(var(--spacing) * 2);
}
.ais-Pagination-list .ais-Pagination-item--nextPage a {
position: absolute;
top: calc(var(--spacing) * 0);
left: calc(var(--spacing) * 0);
padding: calc(var(--spacing) * 0);
color: transparent;
}
.ais-Pagination-list .ais-Pagination-item--previousPage a {
position: absolute;
top: calc(var(--spacing) * 0);
left: calc(var(--spacing) * 0);
padding: calc(var(--spacing) * 0);
color: transparent;
}
.ais-Pagination-list .ais-Pagination-item--nextPage span {
position: absolute;
top: calc(var(--spacing) * 0);
left: calc(var(--spacing) * 0);
padding: calc(var(--spacing) * 0);
color: transparent;
}
.ais-Pagination-list .ais-Pagination-item--previousPage span {
position: absolute;
top: calc(var(--spacing) * 0);
left: calc(var(--spacing) * 0);
padding: calc(var(--spacing) * 0);
color: transparent;
}
.ais-Pagination-item--selected {
background-color: var(--color-gray-200);
}
l.ais-Pagination-item--selected a {
cursor: default;
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-blue-700);
font-family: var(--font-vietnam);
font-weight: 600;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
color: var(--color-gray-700);
}
.ais-Pagination-item .ais-Pagination-link {
padding-inline: calc(var(--spacing) * 4);
padding-block: calc(var(--spacing) * 2);
}
.ais-ClearRefinements-button {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
--tw-tracking: var(--tracking-normal);
letter-spacing: var(--tracking-normal);
}
.ais-ClearRefinements-button--disabled {
display: none;
}
.ais-RangeSlider {
margin-top: calc(var(--spacing) * 6);
margin-right: calc(var(--spacing) * 5);
margin-left: calc(var(--spacing) * 2);
padding-inline: calc(var(--spacing) * 2);
padding-top: calc(var(--spacing) * 4);
}
.ais-HierarchicalMenu-item--selected {
font-family: var(--font-vietnam);
font-weight: 600;
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.ais-HierarchicalMenu-count::before, .ais-RefinementList-count::before {
content: '(';
}
.ais-HierarchicalMenu-count::after, .ais-RefinementList-count::after {
content: ')';
}
.ais-HierarchicalMenu-list .ais-HierarchicalMenu-list {
margin-left: calc(var(--spacing) * 4);
}
.rheostat-background {
height: calc(var(--spacing) * 1.5);
background-color: var(--color-gray-200);
}
.rheostat-handle {
position: absolute;
top: calc(var(--spacing) * -2);
left: calc(var(--spacing) * 0);
z-index: 10;
height: calc(var(--spacing) * 5);
width: calc(var(--spacing) * 5);
cursor: pointer;
border-radius: calc(infinity * 1px);
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--color-black);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
}
.rheostat-handle .rheostat-tooltip {
position: absolute;
top: calc(var(--spacing) * -6);
left: calc(calc(2/3 * 100%) * -1);
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
white-space: nowrap;
}
.rheostat-progress {
position: absolute;
top: calc(var(--spacing) * 0);
left: calc(var(--spacing) * 0);
height: calc(var(--spacing) * 1.5);
background-color: var(--color-blue-500);
}
.ais-CurrentRefinements-list {
display: flex;
flex-direction: column;
padding-block: calc(var(--spacing) * 2);
}
.ais-CurrentRefinements-list li {
padding-bottom: calc(var(--spacing) * 1);
}
.ais-CurrentRefinements-item .ais-CurrentRefinements-label {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
--tw-tracking: var(--tracking-normal);
letter-spacing: var(--tracking-normal);
}
.ais-CurrentRefinements-item .ais-CurrentRefinements-category {
display: flex;
justify-content: space-between;
}
.ais-CurrentRefinements-category {
padding-bottom: calc(var(--spacing) * 1);
}
.ais-CurrentRefinements-category span {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-tracking: var(--tracking-normal);
letter-spacing: var(--tracking-normal);
}
.ais-RefinementList-searchBox .ais-SearchBox-input[disabled] {
display: none;
}
.ais-Panel {
margin-block: calc(var(--spacing) * 3);
&[class*="bg-opacity-"] {
background-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix( in srgb, var(--color-white) calc(100% / var(--tw-bg-opacity)), #0000 );
}
}
background-color: var(--color-white);
padding: calc(var(--spacing) * 4);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ais-Panel-header span .name {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
padding-bottom: calc(var(--spacing) * 4);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
@media (width >= 48rem) {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
}
.ais-HierarchicalMenu {
padding-top: calc(var(--spacing) * 4);
}
.ais-HierarchicalMenu-link {
display: flex;
padding-block: calc(var(--spacing) * 1);
}
.ais-HierarchicalMenu-count {
flex-grow: 1;
text-align: right;
}
.ais-RefinementList-searchBox .ais-SearchBox .ais-SearchBox-form {
margin-block: calc(var(--spacing) * 3);
border-style: var(--tw-border-style);
border-width: 1px;
}
.ais-SortBy .ais-SortBy-select {
border-radius: var(--radius-lg);
border-color: var(--color-gray-400);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
color: var(--color-black);
}
.auc-Recommend-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@media (width >= 64rem) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.auc-Recommend-title {
width: 100%;
text-align: center;
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
@media (width >= 48rem) {
text-align: left;
}
}
.mollie-buttons {
margin-top: 10%;
text-align: center;
opacity: 0;
animation: fadeIn 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.mollie-buttons .button {
display: inline-block;
margin: 20px;
max-width: 100%;
padding: 0 16px;
border: 0;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .19);
border-radius: 6px;
background-color: #0095FF;
color: #FFF;
font-size: 1.8rem;
font-weight: 700;
line-height: 4.4rem;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
text-overflow: ellipsis;
transition: background .15s;
white-space: nowrap;
user-select: none;
}
.mollie-buttons {
opacity: 0;
transition: opacity 2s ease-in;
}
.mollie-buttons .button:hover {
background-color: #0077CB;
}
.mollie-loading .redirect-block {
padding: 10%;
text-align: center;
}
.checkout-payment-method #mollie_methods_ideal-form .label {
height: 35px;
display: inline-block;
}
.checkout-payment-method #mollie_methods_ideal-form .payment-icon {
width: 35px;
max-height: 30px;
}
.checkout-payment-method #mollie_methods_kbc-form .label {
height: 35px;
display: inline-block;
}
.checkout-payment-method #mollie_methods_kbc-form .payment-icon {
width: 35px;
max-height: 30px;
}
.checkout-payment-method #mollie_methods_giftcard-form .label {
height: 40px;
display: inline-block;
}
.checkout-payment-method #mollie_methods_giftcard-form .payment-icon {
width: 35px;
max-height: 30px;
}
.mollie-payment-icon {
width: 25px;
margin-right: 5px;
vertical-align: middle;
}
.mollie-loading .loader {
border: 16px solid #E3F0FA;
border-top: 16px solid #31A8F0;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
margin-left: auto;
margin-right: auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.payment-method-content .card-container {
max-width: 400px;
overflow: auto;
background-color: #FFF;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
display: block;
padding: 20px;
margin-bottom: 10px;
}
.apple-pay-button {
-webkit-appearance: -apple-pay-button;
}
@supports (-webkit-appearance: -apple-pay-button) {
.apple-pay-button-with-text {
-webkit-appearance: -apple-pay-button;
-apple-pay-button-type: buy;
}
.apple-pay-button-with-text > * {
visibility: hidden;
}
.apple-pay-button-black-with-text {
-apple-pay-button-style: black;
}
.apple-pay-button-white-with-text {
-apple-pay-button-style: white;
cursor: pointer;
}
.apple-pay-button-white-with-line-with-text {
-apple-pay-button-style: white-outline;
}
.apple-pay-button-color-black {
-apple-pay-button-style: black;
}
.apple-pay-button-color-white {
-apple-pay-button-style: white;
}
.apple-pay-button-color-white-outline {
-apple-pay-button-style: white-outline;
}
.apple-pay-button-text-buy {
-apple-pay-button-type: buy;
}
.apple-pay-button-text-donate {
-apple-pay-button-type: donate;
}
.apple-pay-button-text-plain {
-apple-pay-button-type: plain;
}
.apple-pay-button-text-book {
-apple-pay-button-type: book;
}
.apple-pay-button-text-check-out {
-apple-pay-button-type: check-out;
}
.apple-pay-button-text-subscribe {
-apple-pay-button-type: subscribe;
}
.apple-pay-button-text-add-money {
-apple-pay-button-type: add-money;
}
.apple-pay-button-text-contribute {
-apple-pay-button-type: contribute;
}
.apple-pay-button-text-order {
-apple-pay-button-type: order;
}
.apple-pay-button-text-reload {
-apple-pay-button-type: reload;
}
.apple-pay-button-text-rent {
-apple-pay-button-type: rent;
}
.apple-pay-button-text-support {
-apple-pay-button-type: support;
}
.apple-pay-button-text-tip {
-apple-pay-button-type: tip;
}
.apple-pay-button-text-top-up {
-apple-pay-button-type: top-up;
}
}
.mollie-applepay-button-hidden {
display: none;
}
.mollie-applepay-minicart-button {
height: 40px;
}
@property --tw-scroll-snap-strictness {
syntax: "*";
inherits: false;
initial-value: proximity;
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-space-x-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-leading {
syntax: "*";
inherits: false;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-tracking {
syntax: "*";
inherits: false;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false;
}
@property --tw-ring-offset-width {
syntax: "";
inherits: false;
initial-value: 0px;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-blur {
syntax: "*";
inherits: false;
}
@property --tw-brightness {
syntax: "*";
inherits: false;
}
@property --tw-contrast {
syntax: "*";
inherits: false;
}
@property --tw-grayscale {
syntax: "*";
inherits: false;
}
@property --tw-hue-rotate {
syntax: "*";
inherits: false;
}
@property --tw-invert {
syntax: "*";
inherits: false;
}
@property --tw-opacity {
syntax: "*";
inherits: false;
}
@property --tw-saturate {
syntax: "*";
inherits: false;
}
@property --tw-sepia {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-drop-shadow-size {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-blur {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-brightness {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-contrast {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-grayscale {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-hue-rotate {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-invert {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-opacity {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-saturate {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-sepia {
syntax: "*";
inherits: false;
}
@property --tw-duration {
syntax: "*";
inherits: false;
}
@property --tw-ease {
syntax: "*";
inherits: false;
}
@property --tw-content {
syntax: "*";
initial-value: "";
inherits: false;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-scroll-snap-strictness: proximity;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-space-y-reverse: 0;
--tw-space-x-reverse: 0;
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
--tw-leading: initial;
--tw-font-weight: initial;
--tw-tracking: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-outline-style: solid;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
--tw-drop-shadow: initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-backdrop-blur: initial;
--tw-backdrop-brightness: initial;
--tw-backdrop-contrast: initial;
--tw-backdrop-grayscale: initial;
--tw-backdrop-hue-rotate: initial;
--tw-backdrop-invert: initial;
--tw-backdrop-opacity: initial;
--tw-backdrop-saturate: initial;
--tw-backdrop-sepia: initial;
--tw-duration: initial;
--tw-ease: initial;
--tw-content: "";
}
}
}