:root {
--palette-slate-50: 248, 250, 252;
--palette-slate-100: 241, 245, 249;
--palette-slate-200: 226, 232, 240;
--palette-slate-300: 203, 213, 225;
--palette-slate-400: 148, 163, 184;
--palette-slate-500: 100, 116, 139;
--palette-slate-600: 71, 85, 105;
--palette-slate-700: 51, 65, 85;
--palette-slate-800: 30, 41, 59;
--palette-slate-900: 15 23, 42;
--palette-slate-950: 2, 6, 23;
--palette-gray-50: 249, 250, 251;
--palette-gray-100: 243, 244, 246;
--palette-gray-200: 229, 231, 235;
--palette-gray-300: 209, 213, 219;
--palette-gray-400: 156, 163, 175;
--palette-gray-500: 107, 114, 128;
--palette-gray-600: 75, 85, 99;
--palette-gray-700: 55, 65, 81;
--palette-gray-800: 31, 41, 55;
--palette-gray-900: 17, 24, 39;
--palette-gray-950: 3, 7, 18;
--palette-zinc-50: 250, 250, 250;
--palette-zinc-100: 244, 244, 245;
--palette-zinc-200: 228, 228, 231;
--palette-zinc-300: 212, 212, 216;
--palette-zinc-400: 161, 161, 170;
--palette-zinc-500: 113, 113, 122;
--palette-zinc-600: 82, 82, 91;
--palette-zinc-700: 63, 63, 70;
--palette-zinc-800: 39, 39, 42;
--palette-zinc-900: 24, 24, 27;
--palette-zinc-950: 9, 9, 11;
--palette-neutral-50: 250, 250, 250;
--palette-neutral-100: 245, 245, 245;
--palette-neutral-200: 229, 229, 229;
--palette-neutral-300: 212, 212, 212;
--palette-neutral-400: 163, 163, 163;
--palette-neutral-500: 115, 115, 115;
--palette-neutral-600: 82, 82, 82;
--palette-neutral-700: 64, 64, 64;
--palette-neutral-800: 38, 38, 38;
--palette-neutral-900: 23, 23, 23;
--palette-neutral-950: 10, 10, 10;
--palette-stone-50: 250, 250, 249;
--palette-stone-100: 245, 245, 244;
--palette-stone-200: 231, 229, 228;
--palette-stone-300: 214, 211, 209;
--palette-stone-400: 168, 162, 158;
--palette-stone-500: 120, 113, 108;
--palette-stone-600: 87, 83, 78;
--palette-stone-700: 68, 64, 60;
--palette-stone-800: 41, 37, 36;
--palette-stone-900: 28, 25, 23;
--palette-stone-950: 12, 10, 9;
--palette-red-50: 254, 242, 242;
--palette-red-100: 254, 226, 226;
--palette-red-200: 254, 202, 202;
--palette-red-300: 252, 165, 165;
--palette-red-400: 248, 113, 113;
--palette-red-500: 239, 68, 68;
--palette-red-600: 220, 38, 38;
--palette-red-700: 185, 28, 28;
--palette-red-800: 153, 27, 27;
--palette-red-900: 127, 29, 29;
--palette-red-950: 69, 10, 10;
--palette-orange-50: 255, 247, 237;
--palette-orange-100: 255, 237, 213;
--palette-orange-200: 254, 215, 170;
--palette-orange-300: 253, 186, 116;
--palette-orange-400: 251, 146, 60;
--palette-orange-500: 249, 115, 22;
--palette-orange-600: 234, 88, 12;
--palette-orange-700: 194, 65, 12;
--palette-orange-800: 154, 52, 18;
--palette-orange-900: 124, 45, 18;
--palette-orange-950: 67, 20, 7;
--palette-amber-50: 255, 251, 235;
--palette-amber-100: 254, 243, 199;
--palette-amber-200: 253, 230, 138;
--palette-amber-300: 252, 211, 77;
--palette-amber-400: 251, 191, 36;
--palette-amber-500: 245, 158, 11;
--palette-amber-600: 217, 119, 6;
--palette-amber-700: 180, 83, 9;
--palette-amber-800: 146, 64, 14;
--palette-amber-900: 120, 53, 15;
--palette-amber-950: 69, 26, 3;
--palette-yellow-50: 254, 252, 232;
--palette-yellow-100: 254, 249, 195;
--palette-yellow-200: 254, 240, 138;
--palette-yellow-300: 253, 224, 71;
--palette-yellow-400: 250, 204, 21;
--palette-yellow-500: 234, 179, 8;
--palette-yellow-600: 202, 138, 4;
--palette-yellow-700: 161, 98, 7;
--palette-yellow-800: 133, 77, 14;
--palette-yellow-900: 113, 63, 18;
--palette-yellow-950: 66, 32, 6;
--palette-lime-50: 247, 254, 231;
--palette-lime-100: 236, 252, 203;
--palette-lime-200: 217, 249, 157;
--palette-lime-300: 190, 242, 100;
--palette-lime-400: 163, 230, 53;
--palette-lime-500: 132, 204, 22;
--palette-lime-600: 101, 163, 13;
--palette-lime-700: 77, 124, 15;
--palette-lime-800: 63, 98, 18;
--palette-lime-900: 54, 83, 20;
--palette-lime-950: 26, 46, 5;
--palette-green-50: 240, 253, 244;
--palette-green-100: 220, 252, 231;
--palette-green-200: 187, 247, 208;
--palette-green-300: 134, 239, 172;
--palette-green-400: 74, 222, 128;
--palette-green-500: 34, 197, 94;
--palette-green-600: 22, 163, 74;
--palette-green-700: 21, 128, 61;
--palette-green-800: 22, 101, 52;
--palette-green-900: 20, 83, 45;
--palette-green-950: 5, 46, 22;
--palette-emerald-50: 236, 253, 245;
--palette-emerald-100: 209, 250, 229;
--palette-emerald-200: 167, 243, 208;
--palette-emerald-300: 110, 231, 183;
--palette-emerald-400: 52, 211, 153;
--palette-emerald-500: 16, 185, 129;
--palette-emerald-600: 5, 150, 105;
--palette-emerald-700: 4, 120, 87;
--palette-emerald-800: 6, 95, 70;
--palette-emerald-900: 6, 78, 59;
--palette-emerald-950: 2, 44, 34;
--palette-teal-50: 240, 253, 250;
--palette-teal-100: 204, 251, 241;
--palette-teal-200: 153, 246, 228;
--palette-teal-300: 94, 234, 212;
--palette-teal-400: 45, 212, 191;
--palette-teal-500: 20, 184, 166;
--palette-teal-600: 13, 148, 136;
--palette-teal-700: 15, 118, 110;
--palette-teal-800: 17, 94, 89;
--palette-teal-900: 19, 78, 74;
--palette-teal-950: 4, 47, 46;
--palette-cyan-50: 236, 254, 255;
--palette-cyan-100: 207, 250, 254;
--palette-cyan-200: 165, 243, 252;
--palette-cyan-300: 103, 232, 249;
--palette-cyan-400: 34, 211, 238;
--palette-cyan-500: 6, 182, 212;
--palette-cyan-600: 8, 145, 178;
--palette-cyan-700: 14, 116, 144;
--palette-cyan-800: 21, 94, 117;
--palette-cyan-900: 22, 78, 99;
--palette-cyan-950: 8, 51, 68;
--palette-sky-50: 240, 249, 255;
--palette-sky-100: 224, 242, 254;
--palette-sky-200: 186, 230, 253;
--palette-sky-300: 125, 211, 252;
--palette-sky-400: 56, 189, 248;
--palette-sky-500: 14, 165, 233;
--palette-sky-600: 2, 132, 199;
--palette-sky-700: 3, 105, 161;
--palette-sky-800: 7, 89, 133;
--palette-sky-900: 12, 74, 110;
--palette-sky-950: 8, 47, 73;
--palette-blue-50: 239, 246, 255;
--palette-blue-100: 219, 234, 254;
--palette-blue-200: 191, 219, 254;
--palette-blue-300: 147, 197, 253;
--palette-blue-400: 96, 165, 250;
--palette-blue-500: 59, 130, 246;
--palette-blue-600: 37, 99, 235;
--palette-blue-700: 29, 78, 216;
--palette-blue-800: 30, 64, 175;
--palette-blue-900: 30, 58, 138;
--palette-blue-950: 23, 37, 84;
--palette-indigo-50: 238, 242, 255;
--palette-indigo-100: 224, 231, 255;
--palette-indigo-200: 199, 210, 254;
--palette-indigo-300: 165, 180, 252;
--palette-indigo-400: 129, 140, 248;
--palette-indigo-500: 99, 102, 241;
--palette-indigo-600: 79, 70, 229;
--palette-indigo-700: 67, 56, 202;
--palette-indigo-800: 55, 48, 163;
--palette-indigo-900: 49, 46, 129;
--palette-indigo-950: 30, 27, 75;
--palette-violet-50: 245, 243, 255;
--palette-violet-100: 237, 233, 254;
--palette-violet-200: 221, 214, 254;
--palette-violet-300: 196, 181, 253;
--palette-violet-400: 167, 139, 250;
--palette-violet-500: 139, 92, 246;
--palette-violet-600: 124, 58, 237;
--palette-violet-700: 109, 40, 217;
--palette-violet-800: 91, 33, 182;
--palette-violet-900: 76, 29, 149;
--palette-violet-950: 46, 16, 101;
--palette-purple-50: 250, 245, 255;
--palette-purple-100: 243, 232, 255;
--palette-purple-200: 233, 213, 255;
--palette-purple-300: 216, 180, 254;
--palette-purple-400: 192, 132, 252;
--palette-purple-500: 168, 85, 247;
--palette-purple-600: 147, 51, 234;
--palette-purple-700: 126, 34, 206;
--palette-purple-800: 107, 33, 168;
--palette-purple-900: 88, 28, 135;
--palette-purple-950: 59, 7, 100;
--palette-fuchsia-50: 253, 244, 255;
--palette-fuchsia-100: 250, 232, 255;
--palette-fuchsia-200: 245, 208, 254;
--palette-fuchsia-300: 240, 171, 252;
--palette-fuchsia-400: 232, 121, 249;
--palette-fuchsia-500: 217, 70, 239;
--palette-fuchsia-600: 192, 38, 211;
--palette-fuchsia-700: 162, 28, 175;
--palette-fuchsia-800: 134, 25, 143;
--palette-fuchsia-900: 112, 26, 117;
--palette-fuchsia-950: 74, 4, 78;
--palette-pink-50: 253, 242, 248;
--palette-pink-100: 252, 231, 243;
--palette-pink-200: 251, 207, 232;
--palette-pink-300: 249, 168, 212;
--palette-pink-400: 244, 114, 182;
--palette-pink-500: 236, 72, 153;
--palette-pink-600: 219, 39, 119;
--palette-pink-700: 190, 24, 93;
--palette-pink-800: 157, 23, 77;
--palette-pink-900: 131, 24, 67;
--palette-pink-950: 80, 7, 36;
--palette-rose-50: 255, 241, 242;
--palette-rose-100: 255, 228, 230;
--palette-rose-200: 254, 205, 211;
--palette-rose-300: 253, 164, 175;
--palette-rose-400: 251, 113, 133;
--palette-rose-500: 244, 63, 94;
--palette-rose-600: 225, 29, 72;
--palette-rose-700: 190, 18, 60;
--palette-rose-800: 159, 18, 57;
--palette-rose-900: 136, 19, 55;
--palette-rose-950: 76, 5, 25;
--text-2xs: 10px;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 22px;
--text-3xl: 24px;
--text-4xl: 26px;
--text-5xl: 27px;
--text-6xl: 30px;
--text-7xl: 32px;
--text-8xl: 36px;
--text-9xl: 40px;
--text-10xl: 42px;
--text-11xl: 48px;
--text-12xl: 56px;
--text-13xl: 66px;
--text-14xl: 72px;
--text-15xl: 86px;
--text-16xl: 96px;
--text-17xl: 116px;
--text-18xl: 126px;
--shadow-2xs: 0 1px rgba(0, 0, 0, 0.0509803922);
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.0509803922);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1019607843), 0 1px 2px -1px rgba(0, 0, 0, 0.1019607843);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1019607843), 0 2px 4px -2px rgba(0, 0, 0, 0.1019607843);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1019607843), 0 4px 6px -4px rgba(0, 0, 0, 0.1019607843);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1019607843), 0 8px 10px -6px rgba(0, 0, 0, 0.1019607843);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2509803922);
--radius-none: 0;
--radius-xs: calc(var(--theme-radius) - 4px);
--radius-sm: calc(var(--theme-radius) - 2px);
--radius-base: var(--theme-radius);
--radius-lg: calc(var(--theme-radius) + 2px);
--radius-xl: calc(var(--theme-radius) + 4px);
--radius-full: 9999px;
}
:root {
--theme-width: 1360px;
--theme-padding: 32px;
--theme-screen-padding: 40px;
--theme-radius: 8px;
--theme-body-font: Inter, sans-serif;
--theme-body-font-size: 16px;
--theme-body-font-weight: 400;
--theme-body-letter-spacing: -0.025em;
--theme-body-line-height: 1.6;
--theme-body-text-align: start;
--theme-heading-font: Inter, sans-serif;
--theme-heading-font-weight: 500;
--theme-heading-letter-spacing: -0.02em;
--theme-heading-line-height: 1.5;
--theme-brand-font: Inter, sans-serif;
--theme-brand-font-size: 32px;
--theme-brand-font-weight: 700;
--theme-brand-letter-spacing: -0.02em;
--theme-brand-line-height: 1.5;
--theme-brand-image-base: 156px;
--theme-brand-image-mobile: 130px;
--theme-product-name-font: Inter, sans-serif;
--theme-product-price-font: Oswald, sans-serif;
--theme-product-hidden-padding: 16px;
--theme-primary-menu-font: Inter, sans-serif;
--theme-primary-menu-font-size: 15px;
--theme-primary-menu-font-weight: 600;
--theme-primary-menu-letter-spacing: -0.025em;
--theme-primary-submenu-font-size: 14px;
--theme-primary-menu-arrow-gap: 8px;
--theme-primary-menu-gap: 28px;
--theme-drawer-menu-font-size: 15px;
--theme-drawer-menu-font-weight: 600;
--theme-drawer-menu-letter-spacing: -0.025em;
--theme-drawer-menu-height: 42px;
--theme-drawer-submenu-font-size: 14px;
--theme-drawer-submenu-font-weight: 400;
--theme-drawer-submenu-height: 32px;
--theme-drawer-submenu-letter-spacing: -0.025em;
--theme-drawer-menu-icon: 23px;
--theme-drawer-menu-gap: 12px;
--theme-drawer-arrow: 18px;
--theme-footer-offset: 30px;
--theme-footer-offset-lg: 96px;
--theme-text-decoration-transition: text-decoration-color var(--theme-ease-time-fast) var(--theme-ease-primary);
--theme-ease-time-slow: 0.5s;
--theme-ease-time-medium: 0.3s;
--theme-ease-time-fast: 0.15s;
--theme-ease-primary: cubic-bezier(0.7, 0, 0.3, 1);
--theme-ease-secondary: cubic-bezier(0.3, 1, 0.3, 1);
--theme-ease-in: cubic-bezier(0.4, 0, 1, 1);
--theme-ease-out: cubic-bezier(0, 0, 0.2, 1);
--theme-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--theme-animate-spin: spin 1s linear infinite;
--theme-animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
--theme-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--theme-animate-bounce: bounce 1s infinite;
--colors-white: 255, 255, 255;
--colors-black: 0, 0, 0;
--colors-primary-background: 0, 103, 178;
--colors-primary-foreground: 255, 255, 255;
--colors-secondary-background: 223, 0, 36;
--colors-secondary-foreground: 255, 255, 255;
--colors-button-default-background: var(--colors-gray-200);
--colors-button-default-foreground: var(--colors-gray-800);
--colors-dropdown-border: var(--palette-slate-100);
--colors-dropdown-background: 255, 255, 255;
--colors-dropdown-foreground: 0, 0, 0;
--colors-dropdown-muted: var(--palette-slate-500);
--colors-drawer-background: 255, 255, 255;
--colors-drawer-foreground: 0, 0, 0;
--colors-drawer-muted-background: var(--palette-slate-100);
--colors-drawer-muted-foreground: var(--palette-slate-500);
--colors-drawer-inline-border: var(--palette-slate-200);
--colors-primary-menu-active-background: var(--palette-slate-100);
--colors-primary-menu-active-foreground: var(--palette-slate-500);
--colors-gray-50: var(--palette-slate-50);
--colors-gray-100: var(--palette-slate-100);
--colors-gray-200: var(--palette-slate-200);
--colors-gray-300: var(--palette-slate-300);
--colors-gray-400: var(--palette-slate-400);
--colors-gray-500: var(--palette-slate-500);
--colors-gray-600: var(--palette-slate-600);
--colors-gray-700: var(--palette-slate-700);
--colors-gray-800: var(--palette-slate-800);
--colors-gray-900: var(--palette-slate-900);
--colors-gray-950: var(--palette-slate-950);
--colors-blue-light: var(--palette-blue-50);
--colors-blue-base: var(--palette-blue-500);
--colors-blue-dark: var(--palette-blue-900);
--colors-green-light: var(--palette-emerald-50);
--colors-green-base: var(--palette-emerald-600);
--colors-green-dark: var(--palette-emerald-900);
--colors-orange-light: var(--palette-amber-50);
--colors-orange-base: var(--palette-amber-500);
--colors-orange-dark: var(--palette-amber-900);
--colors-red-light: var(--palette-rose-50);
--colors-red-base: var(--palette-rose-500);
--colors-red-dark: var(--palette-rose-900);
--colors-yellow-light: var(--palette-yellow-50);
--colors-yellow-base: var(--palette-yellow-500);
--colors-yellow-dark: var(--palette-yellow-900);
--form-button-font: Inter, sans-serif;
--form-button-font-size-xs: 11px;
--form-button-font-size-sm: 12px;
--form-button-font-size-base: 14px;
--form-button-font-size-lg: 14px;
--form-button-font-weight: 600;
--form-button-letter-spacing: -0.02em;
--form-button-text-transform: none;
--form-button-size-xs: 32px;
--form-button-size-sm: 34px;
--form-button-size-base: 42px;
--form-button-size-lg: 48px;
--form-input-font: Inter, sans-serif;
--form-input-font-size-sm: 13px;
--form-input-font-size-base: 14px;
--form-input-font-size-lg: 15px;
--form-input-font-weight: 500;
--form-input-letter-spacing: -0.02em;
--form-input-text-transform: none;
--form-input-size-sm: 34px;
--form-input-size-base: 42px;
--form-input-size-lg: 48px;
--form-checkbox-size: 16px;
--form-label-font-size: 13px;
--form-label-font-weight: 500;
--form-qty-size-xs: 30px;
--form-qty-size-sm: 34px;
--form-qty-size-base: 42px;
--form-qty-size-lg: 48px;
--form-qty-font-size-sm: 13px;
--form-qty-font-size-base: 14px;
--form-qty-font-size-lg: 15px;
--form-qty-font-weight: 500;
--form-qty-letter-spacing: -0.02em;
--form-qty-disabled-opacity: 0.2;
}
/*------------------------------------
Clearfix
------------------------------------*/
/* --- Default border clearfix --- */
*, :after, :before {
border: 0 solid #e5e7eb;
}
/* --- Html clearfix --- */
html {
-ms-touch-action: manipulation;
touch-action: manipulation;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: contain;
}
/* --- Body clearfix --- */
body {
font-family: var(--theme-body-font);
font-size: var(--theme-body-font-size);
font-weight: var(--theme-body-font-weight);
line-height: var(--theme-body-line-height);
letter-spacing: var(--theme-body-letter-spacing);
text-align: var(--theme-body-text-align);
}
body.action-enable {
overflow: hidden;
}
/* --- Image clearfix --- */
img {
max-width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast;
}
/* --- Heading clearfix --- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--theme-heading-font);
font-weight: var(--theme-heading-font-weight);
letter-spacing: var(--theme-heading-letter-spacing);
line-height: var(--theme-heading-line-height);
}
/* --- Container clearfix --- */
.container {
max-width: var(--theme-width);
margin: 0 auto;
}
@media screen and (min-width: 576.02px) {
.container {
--bs-gutter-x: var(--theme-padding);
padding-left: var(--theme-screen-padding);
padding-right: var(--theme-screen-padding);
}
}
.container.max-full {
max-width: 118.75rem;
}
/* --- Row clearfix --- */
@media screen and (min-width: 576.02px) {
.row {
--bs-gutter-x: var(--theme-padding);
}
}
/* --- Page content clearfix --- */
.page-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
min-height: 100dvh;
}
.page-content > * {
width: 100%;
}
.page-content .main-content {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
/* Content wrapper */
.site-content-wrapper {
--content-secondary-width: 300px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.site-content-wrapper {
gap: var(--theme-padding);
}
}
@media screen and (min-width: 1024.02px) {
.site-content-wrapper.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
.site-content-wrapper > * {
width: 100%;
}
@media screen and (min-width: 1024.02px) {
.site-content-wrapper > *.primary-column {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.site-content-wrapper > *.secondary-column {
width: var(--content-secondary-width);
}
}
@media screen and (min-width: 1024.02px) {
.site-content-wrapper:has(.secondary-column) .primary-column {
-webkit-padding-end: var(--theme-padding);
padding-inline-end: var(--theme-padding);
}
.site-content-wrapper:has(.secondary-column).reverse .primary-column {
-webkit-padding-start: var(--theme-padding);
padding-inline-start: var(--theme-padding);
-webkit-padding-end: 0;
padding-inline-end: 0;
}
}
.site-content-wrapper .secondary-column.sticky {
top: 1.25rem;
-ms-flex-item-align: start;
align-self: flex-start;
}
.site-content-wrapper.content-margin {
margin-top: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.site-content-wrapper.content-margin {
margin-top: 2.25rem;
}
}
/* Sup, Sub text clearfix */
.sub {
vertical-align: sub;
font-size: smaller;
}
.sup {
vertical-align: super;
font-size: smaller;
}
/*------------------------------------
Global
------------------------------------*/
/* Preloader */
.preloader {
--size: 36px;
--duration: 550ms;
--border-width: 1px;
--color: color(black);
width: var(----size, 2.25rem);
height: var(----size, 2.25rem);
border: var(--border-width, 1px) solid transparent;
border-inline-start-color: var(--color);
border-radius: 50%;
vertical-align: middle;
-webkit-animation: rotate var(--duration, 550ms) infinite linear;
animation: rotate var(--duration, 550ms) infinite linear;
}
.preloader-pseudo:after {
content: "";
width: var(----size, 2.25rem);
height: var(----size, 2.25rem);
border: var(--border-width, 1px) solid transparent;
border-inline-start-color: var(--color);
border-radius: 50%;
vertical-align: middle;
-webkit-animation: rotate var(--duration, 550ms) infinite linear;
animation: rotate var(--duration, 550ms) infinite linear;
}
/* Brand */
.site-brand .brand-text {
font-family: var(--theme-brand-font);
font-size: var(--theme-brand-font-size);
font-weight: var(--theme-brand-font-weight);
line-height: var(--theme-brand-line-height);
letter-spacing: var(--theme-brand-letter-spacing);
}
.site-brand img {
width: var(--theme-brand-image-mobile);
height: auto;
}
@media screen and (min-width: 1024.02px) {
.site-brand img {
width: var(--theme-brand-image-base);
}
}
/* Wrap link */
.wrap-link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
z-index: 2;
}
/* Close button */
.site-close {
--close-link-width: 30px;
--close-hover-transform: scale(1.2);
--close-width: 26px;
}
.site-close .site-close-button {
text-decoration: none;
color: currentColor;
width: var(--close-link-width);
height: var(--close-link-width);
cursor: pointer;
}
.site-close .site-close-button > * {
width: 1.375rem;
height: auto;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: var(--theme-ease-time-medium) all var(--theme-ease-primary);
transition: var(--theme-ease-time-medium) all var(--theme-ease-primary);
pointer-events: none;
}
@media screen and (min-width: 576.02px) {
.site-close .site-close-button > * {
width: var(--close-width);
}
}
.site-close .site-close-button:hover > * {
-webkit-transform: var(--close-hover-transform);
transform: var(--close-hover-transform);
}
/* Overlay */
.site-overlay {
--overlay-background: var(--colors-gray-900);
--overlay-opacity: 0.3;
position: absolute;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
background-color: rgba(var(--overlay-background), var(--overlay-opacity));
}
/* Overlay block */
.overlay-block {
display: grid;
}
.overlay-block > * {
grid-column: 1;
grid-row: 1;
}
/* Link decoration */
.link-decoration {
--decoration-offset: 3px;
--decoration-width: 1px;
--decoration-color: transparent;
--decoration-hover-color: currentColor;
--decoration-transition-duration: var(--theme-ease-time-fast);
--decoration-transition-timing: var(--theme-ease-in-out);
--decoration-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
text-underline-offset: var(--decoration-offset);
text-decoration-thickness: var(--decoration-width);
text-decoration-color: var(--decoration-color);
-webkit-transition-duration: var(--decoration-transition-duration);
transition-duration: var(--decoration-transition-duration);
-webkit-transition-timing-function: var(--decoration-transition-timing);
transition-timing-function: var(--decoration-transition-timing);
-webkit-transition-property: var(--decoration-transition-property);
transition-property: var(--decoration-transition-property);
}
@media (hover: hover) and (pointer: fine) {
.link-decoration:hover {
text-decoration-color: var(--decoration-hover-color);
}
}
/* Copyright */
.site-copyright {
--copyright-text: 12px;
--copyright-underline-offset: 4px;
font-size: var(--copyright-text);
margin-bottom: 0;
}
.site-copyright a {
font-weight: 600;
color: currentColor;
text-decoration: none;
}
/* Module header */
.site-module-header {
--module-header-gap: 20px;
--module-header-column-gap: 20px;
--module-header-title-gap: 20px;
--module-header-offset: 16px;
--module-header-offset-lg: 30px;
--module-header-padding: 10px;
--module-header-padding-lg: 20px;
--module-title-size-lg: 24px;
--module-title-size-sm: 22px;
--module-title-size-xs: 18px;
--module-title-weight: 600;
--module-title-background: rgb(var(--colors-white));
--module-title-border: rgb(var(--colors-gray-200));
--module-description-size: 13px;
--module-description-size-desktop: 13px;
--module-description-width: auto;
--module-header-color: rgb(var(--colors-gray-900));
--module-header-color-muted: rgb(var(--colors-gray-500));
--module-header-border: rgb(var(--colors-gray-200));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--module-header-gap);
margin-bottom: var(--module-header-offset);
padding-bottom: var(--module-header-padding);
border-bottom: 1px solid var(--module-header-border);
}
@media screen and (min-width: 1024.02px) {
.site-module-header {
margin-bottom: var(--module-header-offset-lg);
padding-bottom: var(--module-header-padding-lg);
}
}
.site-module-header > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--module-header-column-gap);
width: 100%;
}
@media screen and (min-width: 576.02px) {
.site-module-header > * {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
}
.site-module-header .site-module-header-title {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--module-header-title-gap);
}
.site-module-header .site-module-header-title .entry-title {
font-size: var(--module-title-size-xs);
font-weight: var(--module-title-weight);
line-height: 1.2;
color: var(--module-header-color);
margin-bottom: 0;
}
@media screen and (min-width: 576.02px) {
.site-module-header .site-module-header-title .entry-title {
font-size: var(--module-title-size-sm);
}
}
@media screen and (min-width: 1024.02px) {
.site-module-header .site-module-header-title .entry-title {
font-size: var(--module-title-size-lg);
}
}
.site-module-header .site-module-header-title:has(.entry-title.bordered) .entry-title {
background-color: var(--module-title-background);
padding-inline: 1rem;
}
.site-module-header .site-module-header-title:has(.entry-title.bordered)::before {
content: "";
position: absolute;
width: 100%;
height: 0.0625rem;
background-color: var(--module-title-border);
inset-inline-start: 0;
z-index: -1;
}
.site-module-header .entry-description {
font-size: var(--module-description-size);
line-height: 1.1;
color: var(--module-header-color-muted);
max-width: var(--module-description-width);
margin-bottom: 0;
}
@media screen and (min-width: 576.02px) {
.site-module-header .entry-description {
font-size: var(--module-description-size-desktop);
}
}
.site-module-header.justify-center .column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.site-module-header.justify-center .column .site-module-header-title {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.site-module-header.justify-center .column .site-module-header-title .entry-title {
width: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.site-module-header.justify-center .column .entry-description {
line-height: 1.6;
text-align: center;
margin-inline: auto;
}
.site-module-header .site-module-tab {
--tab-size: var(--text-sm);
--tab-weight: 500;
--tab-gap: 6px;
--tab-gap-lg: 18px;
}
.site-module-header .site-module-tab ul {
list-style: none;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--tab-gap);
margin: 0;
padding: 0;
}
@media screen and (min-width: 576.02px) {
.site-module-header .site-module-tab ul {
gap: var(--tab-gap-lg);
}
}
.site-module-header .site-module-tab ul a {
font-size: var(--tab-size);
font-weight: var(--tab-weight);
text-decoration: none;
-webkit-transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
@media screen and (min-width: 576.02px) {
.site-module-header .site-module-tab.style-1 ul {
-webkit-margin-start: 1.25rem;
margin-inline-start: 1.25rem;
}
}
.site-module-header .site-module-tab.style-1 ul a {
color: rgb(var(--colors-gray-400));
}
@media (hover: hover) and (pointer: fine) {
.site-module-header .site-module-tab.style-1 ul a:hover {
color: rgb(var(--colors-gray-700));
}
}
.site-module-header .site-module-tab.style-1 ul a.active {
color: rgb(var(--colors-black));
}
.site-module-header .site-module-tab.style-2 ul a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: rgb(var(--colors-gray-500));
border: 1px solid rgb(var(--colors-gray-200));
border-radius: 5.625rem;
padding: 0.25rem 0.75rem;
}
.site-module-header .site-module-tab.style-2 ul a:hover {
border-color: rgb(var(--colors-gray-300));
}
.site-module-header .site-module-tab.style-2 ul a.active {
color: rgb(var(--colors-primary-background));
border-color: rgba(var(--colors-primary-background), 0.5);
background-color: rgba(var(--colors-primary-background), 0.05);
}
/* Star rating */
.star-rating {
--star-size: 12px;
--star-gap: 1px;
--star-color: rgb(var(--colors-gray-300));
--star-active: rgb(var(--colors-yellow-base));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--star-gap);
}
.star-rating svg {
width: var(--star-size);
height: var(--star-size);
fill: var(--star-color);
}
.star-rating svg.filled {
fill: var(--star-active);
}
/* Emtpy */
.site-empty {
--empty-icon: 66px;
--empty-title: 16px;
--empty-title-weight: 500;
--empty-description: 12px;
text-align: center;
margin-block: 1.25rem;
}
.site-empty svg, .site-empty img {
width: var(--empty-icon);
height: auto;
margin-bottom: 1.25rem;
}
.site-empty .entry-title {
font-size: var(--empty-title);
font-weight: var(--empty-title-weight);
}
.site-empty p {
font-size: var(--empty-description);
}
/* Progressbar */
.site-progress {
--progress-height: 6px;
--progress-background: rgb(var(--colors-gray-100));
--progress-bar: rgb(var(--colors-primary-background));
--progress-dot: rgb(var(--colors-yellow-light));
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: var(--progress-height);
border-radius: 6.1875rem;
background-color: var(--progress-background);
}
.site-progress span {
position: absolute;
height: 100%;
top: 0;
inset-inline-start: 0;
background-color: var(--progress-bar);
border-radius: 6.1875rem;
}
.site-progress .progress-dot {
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: calc(var(--progress-height) * 3);
height: calc(var(--progress-height) * 3);
background-color: var(--progress-bar);
color: var(--progress-dot);
border-radius: 50%;
-webkit-margin-start: -0.125rem;
margin-inline-start: -0.125rem;
}
.site-progress .progress-dot svg {
width: calc(var(--progress-height) * 2.2);
height: calc(var(--progress-height) * 2.2);
}
/* Cart notification */
.cart-notification {
--notification-text: 12px;
--notification-text-weight: 500;
--notification-background: rgb(var(--colors-gray-50));
--notification-foreground: rgb(var(--colors-black));
--notification-border: rgb(var(--colors-gray-200));
--notification-radius: var(--radius-lg);
--notification-padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
gap: 0.625rem;
padding: var(--notification-padding);
border: 1px solid var(--notification-border);
background-color: var(--notification-background);
border-radius: var(--notification-radius);
}
.cart-notification p {
font-size: var(--notification-text);
font-weight: var(--notification-text-weight);
margin-bottom: 0;
}
.cart-notification .site-progress {
--progress-height: 4px;
}
/* Privacy policy text */
.privacy-text {
--text-color: rgb(var(--colors-gray-500));
--text-link-color: rgb(var(--colors-gray-700));
font-size: var(--text-xs);
color: var(--text-color);
}
.privacy-text a {
font-weight: 600;
color: var(--text-link-color);
text-underline-offset: 0.1875rem;
-webkit-transition: var(--theme-text-decoration-transition);
transition: var(--theme-text-decoration-transition);
}
.privacy-text a:hover {
text-decoration-color: transparent;
}
/* Excerpt text sizes */
.entry-excerpt {
font-size: var(--text-sm);
}
/* Content text sizes */
.entry-content {
font-size: var(--text-base);
}
/* Pseudo Gradient */
.pseudo-gradient {
--pseudo-gradient-width: 20%;
--pseudo-gradient-height: 100%;
--pseudo-gradient-direction-before: to right;
--pseudo-gradient-direction-after: to left;
--pseudo-gradient-start-color: 255, 255, 255;
--pseudo-gradient-start-opacity: 1;
--pseudo-gradient-end-color: 255, 255, 255;
--pseudo-gradient-end-opacity: 0;
position: relative;
}
.pseudo-gradient::before, .pseudo-gradient::after {
content: "";
position: absolute;
width: var(--pseudo-gradient-width);
height: var(--pseudo-gradient-height);
pointer-events: none;
z-index: 1;
}
.pseudo-gradient::before {
background: -webkit-gradient(linear, left top, left bottom, from(var(--pseudo-gradient-direction-before)), color-stop(0%, rgba(var(--pseudo-gradient-start-color), var(--pseudo-gradient-start-opacity))), to(rgba(var(--pseudo-gradient-end-color), var(--pseudo-gradient-end-opacity))));
background: linear-gradient(var(--pseudo-gradient-direction-before), rgba(var(--pseudo-gradient-start-color), var(--pseudo-gradient-start-opacity)) 0%, rgba(var(--pseudo-gradient-end-color), var(--pseudo-gradient-end-opacity)) 100%);
}
.pseudo-gradient::after {
background: -webkit-gradient(linear, left top, left bottom, from(var(--pseudo-gradient-direction-after)), color-stop(0%, rgba(var(--pseudo-gradient-start-color), var(--pseudo-gradient-start-opacity))), to(rgba(var(--pseudo-gradient-end-color), var(--pseudo-gradient-end-opacity))));
background: linear-gradient(var(--pseudo-gradient-direction-after), rgba(var(--pseudo-gradient-start-color), var(--pseudo-gradient-start-opacity)) 0%, rgba(var(--pseudo-gradient-end-color), var(--pseudo-gradient-end-opacity)) 100%);
}
.pseudo-gradient.pseudo-horizontal::before {
top: 0;
inset-inline-start: -2px;
}
.pseudo-gradient.pseudo-horizontal::after {
top: 0;
inset-inline-end: -2px;
inset-inline-start: auto;
}
.pseudo-gradient.pseudo-vertical::before {
top: 0;
inset-inline-start: auto;
}
.pseudo-gradient.pseudo-vertical::after {
bottom: 0;
inset-inline-start: auto;
}
/* Box grid */
.box-grid {
--box-grid-lg: 3;
--box-grid-sm: 3;
--box-grid-xs: 1;
--box-group-gap-lg: 0px;
--box-group-gap-sm: 0px;
--box-group-gap-xs: 0px;
--box-border-color: rgb(var(--colors-gray-200));
--box-padding-inline: 20px;
--box-padding-block: 20px;
--box-padding-inline-sm: 10px;
--box-padding-block-sm: 0;
--box-padding-inline-lg: 40px;
--box-padding-block-lg: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--box-group-gap-xs);
}
@media screen and (min-width: 576.02px) {
.box-grid {
gap: var(--box-group-gap-sm);
}
}
@media screen and (min-width: 1024.02px) {
.box-grid {
gap: var(--box-group-gap-lg);
}
}
.box-grid .box-grid-item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: calc((100% - var(--box-group-gap-xs) * (var(--box-grid-xs) - 1)) / var(--box-grid-xs));
border-color: var(--box-border-color);
padding-inline: var(--box-padding-inline);
padding-block: var(--box-padding-block);
}
@media screen and (min-width: 576.02px) {
.box-grid .box-grid-item {
width: calc((100% - var(--box-group-gap-sm) * (var(--box-grid-sm) - 1)) / var(--box-grid-sm));
}
}
@media screen and (min-width: 1024.02px) {
.box-grid .box-grid-item {
width: calc((100% - var(--box-group-gap-lg) * (var(--box-grid-lg) - 1)) / var(--box-grid-lg));
}
}
@media screen and (min-width: 576.02px) {
.box-grid .box-grid-item {
padding-inline: var(--box-padding-inline-sm);
padding-block: var(--box-padding-block-sm);
}
}
@media screen and (min-width: 1024.02px) {
.box-grid .box-grid-item {
padding-inline: var(--box-padding-inline-lg);
padding-block: var(--box-padding-block-lg);
}
}
/* Inview animation */
.inview-item {
--inview-duration: var(--theme-ease-time-slow);
--inview-ease: var(--theme-ease-primary);
--inview-property: all;
--inview-transform-x: 20px;
--inview-transform-y: 20px;
--inview-transform-scale: scale(1);
opacity: 0;
-webkit-transition: var(--inview-property) var(--inview-duration) var(--inview-ease);
transition: var(--inview-property) var(--inview-duration) var(--inview-ease);
}
.inview-item.inview-transform-x {
-webkit-transform: translateX(var(--inview-transform-x));
transform: translateX(var(--inview-transform-x));
}
.inview-item.inview-transform-x-reverse {
-webkit-transform: translateX(-var(--inview-transform-x));
transform: translateX(-var(--inview-transform-x));
}
.inview-item.inview-transform-y {
-webkit-transform: translateY(var(--inview-transform-y));
transform: translateY(var(--inview-transform-y));
}
.inview-item.inview-transform-y-reverse {
-webkit-transform: translateY(-var(--inview-transform-y));
transform: translateY(-var(--inview-transform-y));
}
.inview-item.inviewed {
opacity: 1;
-webkit-transform: translateY(0) translateX(0) scale(1);
transform: translateY(0) translateX(0) scale(1);
}
/* Accordion */
.accordion {
--bs-accordion-color: rgb(var(--colors-black));
--bs-accordion-bg: rgb(var(--colors-white));
--bs-accordion-border-color: rgb(var(--colors-gray-200));
--bs-accordion-border-width: 0;
--bs-accordion-border-radius: var(--theme-radius);
--bs-accordion-inner-border-radius: 0;
--bs-accordion-hover-border: rgb(var(--colors-gray-300));
--bs-accordion-btn-bg: transparent;
--bs-accordion-active-bg: transparent;
--bs-accordion-active-color: rgb(var(--colors-black));
--bs-accordion-active-border: rgb(var(--colors-gray-400));
--bs-accordion-button-size: 19px;
--bs-accordion-btn-padding-x: 30px;
--bs-accordion-btn-padding-y: 0;
--bs-accordion-body-size: 15px;
--bs-accordion-body-line-height: 1.76;
--bs-accordion-body-color: rgb(var(--colors-gray-600));
--bs-accordion-btn-icon-width: 14px;
}
@media screen and (min-width: 576.02px) {
.accordion {
--bs-accordion-btn-icon-width: 20px;
}
}
.accordion .accordion-header {
border-bottom: 1px solid var(--bs-accordion-border-color);
-webkit-transition: border-color var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: border-color var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.accordion .accordion-header > button {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-size: 1rem;
border-radius: 0;
color: var(--bs-accordion-color);
background-color: var(--bs-accordion-btn-bg);
-webkit-box-shadow: none;
box-shadow: none;
padding-block: var(--bs-accordion-btn-padding-x);
padding-inline: var(--bs-accordion-btn-padding-y);
}
.accordion .accordion-header > button:hover {
background-color: var(--bs-accordion-btn-bg);
}
@media screen and (min-width: 576.02px) {
.accordion .accordion-header > button {
font-size: var(--bs-accordion-button-size);
}
}
.accordion .accordion-header:hover {
border-color: var(--bs-accordion-hover-border);
}
.accordion .accordion-header:has([aria-expanded=true]) {
border-color: var(--bs-accordion-active-border);
}
.accordion .accordion-body {
font-size: var(--bs-accordion-body-size);
line-height: var(--bs-accordion-body-line-height);
padding-block: var(--bs-accordion-btn-padding-x);
padding-inline: var(--bs-accordion-btn-padding-y);
color: var(--bs-accordion-body-color);
}
/* Page header */
.site-page-header {
--page-header-gap: 6px;
--page-header-color: rgb(var(--colors-black));
--page-header-background-color: rgb(var(--colors-white));
--page-header-background: none;
--page-header-overlay: rgba(0, 0, 0, 0.4);
--page-header-muted: rgb(var(--colors-gray-500));
--page-header-border: rgb(var(--colors-gray-200));
--page-header-border-width: 1px;
--page-header-offset-xs: 16px;
--page-header-offset-sm: 20px;
--page-header-offset-lg: 30px;
--page-header-padding-xs: 10px;
--page-header-padding-sm: 20px;
--page-header-padding-lg: 40px;
--page-header-title-size-xs: 28px;
--page-header-title-size-sm: 36px;
--page-header-title-size-lg: 48px;
--page-header-title-weight: 600;
--page-title-description-size: 14px;
--page-title-description-size-lg: 18px;
--page-title-description-width: 560px;
position: relative;
color: var(--page-header-color);
border-bottom: var(--page-header-border-width) solid var(--page-header-border);
background-color: var(--page-header-background-color);
background: var(--page-header-background);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: var(--page-header-offset-xs);
overflow: hidden;
}
@media screen and (min-width: 576.02px) {
.site-page-header {
margin-bottom: var(--page-header-offset-sm);
}
}
@media screen and (min-width: 1024.02px) {
.site-page-header {
margin-bottom: var(--page-header-offset-lg);
}
}
.site-page-header .page-header-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--page-header-gap);
padding-block: var(--page-header-padding-xs);
}
@media screen and (min-width: 576.02px) {
.site-page-header .page-header-inner {
padding-block: var(--page-header-padding-sm);
}
}
@media screen and (min-width: 1024.02px) {
.site-page-header .page-header-inner {
padding-block: var(--page-header-padding-lg);
}
}
.site-page-header .page-header-inner .page-title {
font-size: var(--page-header-title-size-xs);
font-weight: var(--page-header-title-weight);
margin-bottom: 0;
}
@media screen and (min-width: 576.02px) {
.site-page-header .page-header-inner .page-title {
font-size: var(--page-header-title-size-sm);
}
}
@media screen and (min-width: 1024.02px) {
.site-page-header .page-header-inner .page-title {
font-size: var(--page-header-title-size-lg);
}
}
.site-page-header .page-header-inner .entry-teaser {
max-width: var(--page-title-description-width);
margin-inline: auto;
}
.site-page-header .page-header-inner p {
font-size: var(--page-title-description-size);
color: var(--page-header-muted);
}
@media screen and (min-width: 1024.02px) {
.site-page-header .page-header-inner p {
font-size: var(--page-title-description-size-lg);
}
}
.site-page-header .site-page-header-background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
z-index: -1;
}
.site-page-header .site-page-header-background img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.site-page-header .site-page-header-background::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
background-color: var(--page-header-overlay);
}
.site-page-header:has(.site-page-header-background) {
--page-header-padding-lg: 120px;
}
/* Pagination */
.pagination, .woocommerce-pagination {
--pagination-text-size: 12px;
--pagination-text-weight: 700;
--pagination-size: 36px;
--pagination-radius: var(--theme-radius);
--pagination-color: rgb(var(--colors-black));
--pagination-background-color: transparent;
--pagination-border-color: transparent;
--pagination-active-color: rgb(var(--colors-white));
--pagination-active-background-color: rgb(var(--colors-primary-background));
--pagination-active-border-color: transparent;
--pagination-hover-color: rgb(var(--colors-black));
--pagination-hover-background-color: rgb(var(--colors-gray-100));
--pagination-hover-border-color: transparent;
margin-top: 2.25rem;
}
@media screen and (min-width: 576.02px) {
.pagination, .woocommerce-pagination {
margin-top: 4.125rem;
}
}
.pagination ul, .woocommerce-pagination ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.pagination ul li a, .woocommerce-pagination ul li a {
text-decoration: none;
color: currentColor;
-webkit-transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.pagination ul li > *, .woocommerce-pagination ul li > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--pagination-text-size);
font-weight: var(--pagination-text-weight);
line-height: 1rem;
width: 2.125rem;
height: 2.125rem;
color: var(--pagination-color);
background-color: var(--pagination-background-color);
border-radius: var(--pagination-radius);
border: 1px solid var(--pagination-border-color);
}
@media screen and (min-width: 768.02px) {
.pagination ul li > *, .woocommerce-pagination ul li > * {
width: var(--pagination-size);
height: var(--pagination-size);
}
}
@media (hover: hover) and (pointer: fine) {
.pagination ul li > *:not(.current):not(.prev):not(.next):not(.dots):hover, .woocommerce-pagination ul li > *:not(.current):not(.prev):not(.next):not(.dots):hover {
color: var(--pagination-hover-color);
background-color: var(--pagination-hover-background-color);
border-color: var(--pagination-hover-border-color);
}
}
.pagination ul li > *.dots, .woocommerce-pagination ul li > *.dots {
font-size: calc(var(--pagination-text-size) + 0.1875rem);
line-height: calc(var(--pagination-text-size) + 0.1875rem);
background-color: transparent !important;
}
.pagination ul li > *.prev, .pagination ul li > *.next, .woocommerce-pagination ul li > *.prev, .woocommerce-pagination ul li > *.next {
font-size: 1.25rem;
background-color: transparent !important;
width: auto;
}
@media screen and (min-width: 768.02px) {
.pagination ul li > *.prev, .pagination ul li > *.next, .woocommerce-pagination ul li > *.prev, .woocommerce-pagination ul li > *.next {
font-size: 1.5rem;
}
}
.pagination ul li > *.current, .woocommerce-pagination ul li > *.current {
color: var(--pagination-active-color);
background-color: var(--pagination-active-background-color);
border-color: var(--pagination-active-border-color);
}
/* Content not found */
.content-not-found {
margin-top: 2.5rem;
}
@media screen and (min-width: 576.02px) {
.content-not-found {
margin-top: 3.75rem;
margin-bottom: 3.75rem;
}
}
@media screen and (min-width: 1024.02px) {
.content-not-found {
margin-top: 7.5rem;
margin-bottom: 5.625rem;
}
}
.content-not-found .entry-teaser {
margin-bottom: 1.875rem;
}
/* Contact content */
.site-contact-content > p {
font-size: var(--text-sm);
margin-bottom: 1.25rem;
color: rgb(var(--colors-gray-600));
}
@media screen and (min-width: 576.02px) {
.site-contact-content > p {
font-size: calc(var(--text-base) - 1px);
margin-bottom: 2.5rem;
}
}
/* Contact Detail */
.site-contact-detail ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
@media screen and (min-width: 576.02px) {
.site-contact-detail ul {
gap: 1.875rem;
}
}
@media screen and (min-width: 1024.02px) {
.site-contact-detail ul {
gap: 3rem;
}
}
.site-contact-detail ul > li {
width: 100%;
}
@media screen and (min-width: 576.02px) {
.site-contact-detail ul > li {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
}
.site-contact-detail .contact-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.site-contact-detail .contact-info span {
font-size: var(--text-2xs);
font-weight: 600;
text-transform: uppercase;
color: rgb(var(--colors-gray-400));
}
.site-contact-detail .contact-info h4 {
font-size: var(--text-lg);
}
.site-contact-detail .contact-info p {
font-size: var(--text-sm);
}
.site-contact-detail .contact-info a {
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
color: rgb(var(--colors-black));
margin-bottom: 0.25rem;
}
/* Site contact form */
.site-contact-form {
--form-padding-xs: 20px;
--form-padding-lg: 40px;
--form-border: rgb(var(--colors-gray-200));
--form-background: rgb(var(--colors-gray-100));
--form-radius: var(--theme-radius);
background-color: var(--form-background);
border: 1px solid var(--form-border);
border-radius: var(--form-radius);
padding: var(--form-padding-xs);
}
@media screen and (min-width: 576.02px) {
.site-contact-form {
padding: var(--form-padding-lg);
}
}
.site-contact-form > p {
font-size: var(--text-sm);
margin-bottom: 1.25rem;
color: rgb(var(--colors-gray-600));
}
@media screen and (min-width: 576.02px) {
.site-contact-form > p {
font-size: calc(var(--text-base) - 1px);
margin-bottom: 2.5rem;
}
}
.site-contact-form form .wpcf7-form-control-wrap {
display: block;
margin-bottom: 0.75rem;
}
.site-contact-form form .wpcf7-submit {
margin-top: 0.5rem;
color: rgb(var(--colors-primary-foreground)) !important;
background-color: rgb(var(--colors-primary-background)) !important;
}
/* Mini cart */
.site-mini-cart {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.625rem;
}
.site-mini-cart .mini-cart-products {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 1.125rem;
max-height: 260px;
overflow-x: auto;
}
.site-mini-cart .mini-cart-products .product {
--product-name-font-size-lg: 13px;
--product-body-gap: 4px;
}
.site-mini-cart .mini-cart-products .product .product-price-wrapper {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
gap: 0.375rem;
}
.site-mini-cart .mini-cart-products .product .product-price-wrapper .price {
--price-font-size-xs: var(--text-base);
--price-font-size-lg: var(--text-base);
}
.site-mini-cart .mini-cart-products .product .product-price-wrapper .product-quantity {
font-size: var(--text-sm);
font-weight: 500;
color: rgb(var(--colors-gray-500));
}
.site-mini-cart .mini-cart-products .product .product-price-wrapper .product-remove {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-margin-start: 0.625rem;
margin-inline-start: 0.625rem;
}
.site-mini-cart .mini-cart-products .product .product-price-wrapper .product-remove a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: calc(var(--text-sm) - 1px);
font-weight: 500;
line-height: 1.1;
gap: 0.25rem;
text-decoration: none;
color: rgb(var(--colors-red-base));
}
.site-mini-cart .mini-cart-products .product .product-price-wrapper .product-remove a svg {
width: 0.75rem;
height: auto;
}
.site-mini-cart .woocommerce-mini-cart__total {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: var(--text-sm);
margin-top: 0.375rem;
margin-bottom: 0;
padding-top: 1rem;
padding-bottom: 0.25rem;
border-top: 1px solid var(--dropdown-inline-border);
}
.site-mini-cart .woocommerce-mini-cart__buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.375rem;
margin-bottom: 0;
}
.site-mini-cart .woocommerce-mini-cart__buttons > * {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
/* ------------------------------ */
/* ---- Theme Detail Options ---- */
/* ------------------------------ */
/* Dropdown cart */
.dropdown-cart .site-empty p {
color: var(--dropdown-muted);
}
.dropdown-cart .cart-notification {
--notification-padding: 0;
--notification-foreground: currentColor;
--notification-background: transparent;
--notification-radius: 0;
--notification-border: var(--dropdown-inline-border);
margin-top: 1.25rem;
border-inline: 0;
border-bottom: 0;
padding-top: 1.25rem;
}
/* Garage form block */
.site-garage-form-block {
--form-border-width: 1px;
--form-border-color: rgb(var(--colors-gray-200));
--form-border-radius: var(--theme-radius);
--form-background: rgb(var(--colors-white));
--form-foreground: rgb(var(--colors-black));
--form-muted: rgb(var(--colors-gray-500));
--form-padding: 40px;
--form-title-size: 18px;
--form-title-size-lg: 24px;
--form-title-weight: 600;
--form-description-size: 13px;
--form-description-size-lg: 14px;
color: var(--form-foreground);
background-color: var(--form-background);
border: var(--form-border-width) solid var(--form-border-color);
border-radius: var(--form-border-radius);
padding: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.site-garage-form-block {
padding: var(--form-padding);
}
}
.site-garage-form-block .site-garage-form-header {
margin-bottom: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.site-garage-form-block .site-garage-form-header {
margin-bottom: 1.875rem;
}
}
.site-garage-form-block .site-garage-form-header .entry-title {
font-size: var(--form-title-size);
font-weight: var(--form-title-weight);
}
@media screen and (min-width: 1024.02px) {
.site-garage-form-block .site-garage-form-header .entry-title {
font-size: var(--form-title-size-lg);
}
}
.site-garage-form-block .site-garage-form-header p {
font-size: var(--form-description-size);
color: var(--form-muted);
}
@media screen and (min-width: 1024.02px) {
.site-garage-form-block .site-garage-form-header p {
font-size: var(--form-description-size-lg);
}
}
.site-garage-form-block .garage-form {
margin-bottom: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.site-garage-form-block .garage-form {
margin-bottom: 1.875rem;
}
}
.site-garage-form-block .site-garage-form-footer {
color: var(--form-muted);
}
.site-garage-form-block .site-garage-form-footer p {
margin-bottom: 0;
}
/* Garage form */
.garage-form {
--garage-form-width: 440px;
--garage-form-gap: 30px;
--garage-form-title-mobile: 20px;
--garage-form-title-desktop: 28px;
--garage-form-title-weight: 700;
--garage-form-description: 14px;
--garage-number-color: rgb(var(--colors-gray-400));
--garage-number-background: rgb(var(--colors-gray-200));
--garage-number-active-color: rgb(var(--colors-primary-foreground));
--garage-number-active-background: rgb(var(--colors-primary-background));
--garage-select-outline: rgba(var(--colors-primary-background), 0.6);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
gap: var(--garage-form-gap);
max-width: var(--garage-form-width);
width: 100%;
}
.garage-form > * {
width: 100%;
}
.garage-form .garage-form-header {
margin-bottom: 0.625rem;
}
.garage-form .garage-form-header .entry-title {
font-size: var(--garage-form-title-mobile);
font-weight: var(--garage-form-title-weight);
margin-bottom: 0.25rem;
}
@media screen and (min-width: 1024.02px) {
.garage-form .garage-form-header .entry-title {
font-size: var(--garage-form-title-desktop);
}
}
.garage-form .garage-form-header p {
font-size: var(--text-xs);
margin-bottom: 0;
opacity: 0.7;
}
@media screen and (min-width: 1024.02px) {
.garage-form .garage-form-header p {
font-size: var(--garage-form-description);
}
}
.garage-form .garage-form-body .form-garage .form-number {
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 0.5625rem;
font-weight: 600;
line-height: 1;
width: 1.375rem;
height: 1.375rem;
color: var(--garage-number-color);
background-color: var(--garage-number-background);
border-radius: 50%;
inset-inline-start: 0.625rem;
pointer-events: none;
z-index: 1;
}
.garage-form .garage-form-body .form-garage .form-number + select, .garage-form .garage-form-body .form-garage .form-number + .select2-hidden-accessible + .select2-container .select2-selection {
-webkit-padding-start: 2.875rem;
padding-inline-start: 2.875rem;
}
.garage-form .garage-form-body .form-garage select, .garage-form .garage-form-body .form-garage .select2-container .select2-selection {
--form-input-size-base: 42px;
--form-input-font-size-base: 13px;
}
@media screen and (min-width: 1024.02px) {
.garage-form .garage-form-body .form-garage select, .garage-form .garage-form-body .form-garage .select2-container .select2-selection {
--form-input-size-base: 46px;
}
}
.garage-form .garage-form-body .form-garage select[data-selected="-1"], .garage-form .garage-form-body .form-garage .select2-container .select2-selection[data-selected="-1"] {
color: rgb(var(--colors-gray-600));
font-weight: 400;
}
.garage-form .garage-form-body .form-garage select.select2-hidden-accessible[data-selected="-1"] + .select2-container .select2-selection .select2-selection__rendered, .garage-form .garage-form-body .form-garage .select2-container .select2-selection.select2-hidden-accessible[data-selected="-1"] + .select2-container .select2-selection .select2-selection__rendered {
color: rgb(var(--colors-gray-600));
font-weight: 400;
}
.garage-form .garage-form-body .form-garage button {
--form-button-size-base: 42px;
}
@media screen and (min-width: 1024.02px) {
.garage-form .garage-form-body .form-garage button {
--form-button-size-base: 46px;
}
}
.garage-form .garage-form-body .form-garage:not(.form-complete) .current .form-number {
color: var(--garage-number-active-color);
background-color: var(--garage-number-active-background);
}
.garage-form .garage-form-body .form-garage.form-complete .form-number {
color: var(--garage-number-active-color);
background-color: var(--garage-number-active-background);
}
.garage-form .garage-form-body .form-garage.form-focus .current select, .garage-form .garage-form-body .form-garage.form-focus .current .select2-container .select2-selection {
outline: 0.125rem solid var(--garage-select-outline);
outline-offset: 0.125rem;
}
.garage-form .garage-form-footer p {
font-size: 0.75rem;
margin-bottom: 0;
opacity: 0.5;
}
.garage-form.horizontal .form-garage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
@media screen and (min-width: 768.02px) {
.garage-form.horizontal .form-garage {
gap: 0.625rem;
}
}
@media screen and (min-width: 768.02px) {
.garage-form.horizontal .form-garage > * {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
margin-bottom: 0;
}
}
@media screen and (min-width: 768.02px) {
.garage-form.horizontal .form-garage button {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
padding-inline: 2rem;
}
}
/* Tease text sizes */
.entry-tease {
font-size: var(--text-base);
}
@media screen and (min-width: 576.02px) {
.entry-tease {
font-size: var(--text-lg);
}
}
/* Sale text */
.entry-sale-text {
--sale-gap: 4px;
--sale-font-size-mobile: 48px;
--sale-font-size-desktop: 60px;
--sale-font-weight: 800;
--sale-suffix-size: 70%;
--sale-width-mobile: auto;
--sale-height-mobile: auto;
--sale-width-desktop: auto;
--sale-height-desktop: auto;
--sale-text-color: rgb(var(--colors-secondary-background));
--sale-background: transparent;
--sale-gradient-start-color: var(--colors-secondary-background);
--sale-gradient-start-opacity: 1;
--sale-gradient-end-color: var(--colors-secondary-background);
--sale-gradient-end-opacity: 0.2;
--sale-gradient: linear-gradient(137deg, rgba(var(--sale-gradient-start-color),var(--sale-gradient-start-opacity)) 0%, rgba(var(--sale-gradient-end-color),var(--sale-gradient-end-opacity)) 100%);
--sale-margin-block-start: 0;
--sale-margin-block-end: 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
gap: var(--sale-gap);
font-size: var(--sale-font-size-mobile);
font-weight: var(--sale-font-weight);
line-height: 1;
color: var(--sale-text-color);
background-color: var(--sale-background);
width: var(--sale-width-mobile);
height: var(--sale-height-mobile);
-webkit-margin-before: var(--sale-margin-block-start);
margin-block-start: var(--sale-margin-block-start);
-webkit-margin-after: var(--sale-margin-block-end);
margin-block-end: var(--sale-margin-block-end);
}
@media screen and (min-width: 576.02px) {
.entry-sale-text {
font-size: var(--sale-font-size-desktop);
width: var(--sale-width-desktop);
height: var(--sale-height-desktop);
}
}
.entry-sale-text .text-suffix {
font-size: var(--sale-suffix-size);
padding-bottom: 0.0625rem;
}
.entry-sale-text.bg-gradient {
background: var(--sale-gradient);
}
.entry-sale-text.text-gradient {
background: var(--sale-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Hot products */
.hot-products .product {
--product-border: rgba(var(--colors-red-base), 0.2);
--product-border-radius: var(--theme-radius);
--product-inner-padding: 14px;
--product-body-gap: 6px;
}
.hot-products .product .product-inner {
background: linear-gradient(158deg, rgba(244, 63, 94, 0.03) 0%, rgba(244, 63, 94, 0) 100%);
-webkit-transition: border-color 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out;
}
.hot-products .product .product-thumbnail .product-badge .badge {
font-weight: 800;
}
.hot-products .product .product-progress .product-progress-stock {
font-size: calc(var(--text-xs) - 1px);
}
@media (hover: hover) and (pointer: fine) {
.hot-products .product:hover {
--product-border: rgba(var(--colors-red-base), 0.6);
}
}
.hot-products.hot-3-column .product {
--product-name-font-size-lg: 13px;
}
.hot-products.hot-3-column .product .price {
--price-font-size-lg: 20px;
--price-sale-color: rgb(var(--colors-red-base));
}
/* Featured Product */
.site-featured-product {
--featured-padding: 20px;
--featured-padding-sm: 40px;
--featured-padding-lg: 50px;
--featured-max-width: 100%;
--featured-max-width-sm: 100%;
--featured-max-width-lg: 100%;
--featured-border-width: 2px;
--featured-border-color: rgb(var(--colors-red-base));
--featured-background-color: transparent;
--featured-background: linear-gradient(158deg,rgba(244, 63, 94, 0.04) 0%, rgba(244, 63, 94, 0) 100%);
--featured-radius: var(--theme-radius);
--featured-shadow: 0 0 20px 3px rgba(244, 63, 94, 0.12);
padding: var(--featured-padding);
max-width: var(--featured-max-width);
border: var(--featured-border-width) solid var(--featured-border-color);
background-color: var(--featured-background-color);
background: var(--featured-background);
border-radius: var(--featured-radius);
-webkit-box-shadow: var(--featured-shadow);
box-shadow: var(--featured-shadow);
}
@media screen and (min-width: 576.02px) {
.site-featured-product {
padding: var(--featured-padding-sm);
max-width: var(--featured-max-width-sm);
}
}
@media screen and (min-width: 1024.02px) {
.site-featured-product {
padding: var(--featured-padding-lg);
max-width: var(--featured-max-width-lg);
}
}
/*------------------------------------
Navigation
------------------------------------*/
.site-navigation {
--nav-gap: 10px;
--nav-link-inline: 0;
--nav-link-block: 0;
--nav-link-arrow: 14px;
--nav-link-arrow-stroke: 2;
--nav-link-gap: 6px;
--nav-link-icon: 13px;
--nav-menu-item-border: rgb(var(--colors-gray-200));
--submenu-width: 12.5rem;
--submenu-font-size: 15px;
--submenu-background: rgb(var(--colors-dropdown-background));
--submenu-foreground: rgb(var(--colors-dropdown-foreground));
--submenu-foreground-muted: rgb(var(--colors-dropdown-muted));
--submenu-border: rgb(var(--colors-dropdown-border));
--submenu-border-radius: var(--radius-lg);
--submenu-shadow: var(--shadow-lg);
--submenu-link-padding-block: 6px;
--submenu-link-padding-inline: 24px;
--submenu-link-underline-offset: 5px;
--submenu-link-decoration-color: transparent;
--submenu-link-hover-color: rgb(var(--colors-primary-background));
--submenu-link-hover-decoration-color: transparent;
--submenu-label-font-size: 15px;
--submenu-label-font-weight: 500;
--submenu-label-padding: 10px;
--submenu-max-content: 200px;
--submenu-link-transition-duration: var(--theme-ease-time-fast);
--submenu-link-transition-property: all;
--submenu-link-transition-timing-function: var(--theme-ease-in-out);
--submenu-transformY: 10px;
--submenu-transformX: 0;
--submenu-transition-duration: var(--theme-ease-time-medium);
--submenu-transition-property: all;
--submenu-transition-timing-function: var(--theme-ease-primary);
}
.site-navigation > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: var(--nav-gap);
list-style: none;
margin: 0;
padding: 0;
}
.site-navigation > ul a {
line-height: 1;
color: currentColor;
}
.site-navigation > ul a .menu-icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.site-navigation > ul a .menu-icon > * {
position: relative;
width: var(--nav-link-icon);
height: auto;
top: -1px;
}
.site-navigation > ul a .badge {
line-height: 1.1;
}
.site-navigation.navigation-horizontal > ul {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.site-navigation.navigation-horizontal > ul .sub-menu {
position: absolute;
list-style: none;
margin-block: var(--submenu-transformY);
margin-inline: var(--submenu-transformX);
padding-block: calc(var(--submenu-link-padding-inline) - (var(--submenu-link-padding-block) + 0.0625rem));
padding-inline: 0;
top: 100%;
inset-inline-start: calc((var(--submenu-link-padding-inline) - 2px) * -1);
min-width: var(--submenu-width);
color: var(--submenu-foreground);
background-color: var(--submenu-background);
border: 1px solid var(--submenu-border);
border-radius: var(--submenu-border-radius);
-webkit-box-shadow: var(--submenu-shadow);
box-shadow: var(--submenu-shadow);
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition-duration: var(--submenu-transition-duration);
transition-duration: var(--submenu-transition-duration);
-webkit-transition-property: var(--submenu-transition-property);
transition-property: var(--submenu-transition-property);
-webkit-transition-timing-function: var(--submenu-transition-timing-function);
transition-timing-function: var(--submenu-transition-timing-function);
}
.site-navigation.navigation-horizontal > ul .sub-menu li {
position: relative;
white-space: nowrap;
}
.site-navigation.navigation-horizontal > ul .sub-menu li > a {
font-size: var(--submenu-font-size);
padding-block: var(--submenu-link-padding-block);
padding-inline: var(--submenu-link-padding-inline);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: var(--submenu-link-underline-offset);
text-decoration-color: var(--submenu-link-decoration-color);
-webkit-transition-duration: var(--submenu-link-transition-duration);
transition-duration: var(--submenu-link-transition-duration);
-webkit-transition-property: var(--submenu-link-transition-property);
transition-property: var(--submenu-link-transition-property);
-webkit-transition-timing-function: var(--submenu-link-transition-timing-function);
transition-timing-function: var(--submenu-link-transition-timing-function);
}
.site-navigation.navigation-horizontal > ul .sub-menu li > a .menu-arrow {
width: var(--submenu-font-size);
height: var(--submenu-font-size);
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.site-navigation.navigation-horizontal > ul .sub-menu li > a:hover {
color: var(--submenu-link-hover-color);
text-decoration-color: var(--submenu-link-hover-decoration-color);
}
.site-navigation.navigation-horizontal > ul > li > a {
padding-inline: var(--nav-link-inline);
padding-block: var(--nav-link-block);
}
.site-navigation.navigation-horizontal > ul > li:not(.mega-menu) {
position: relative;
}
.site-navigation.navigation-horizontal > ul > li:not(.mega-menu) .sub-menu .sub-menu {
top: calc((var(--submenu-link-padding-block) + var(--submenu-font-size) - 4px) * -1);
inset-inline-start: 100%;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu > .sub-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
padding-block: calc(var(--submenu-link-padding-inline) - (var(--submenu-link-padding-block) - 0.125rem));
inset-inline-start: 0;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu > .sub-menu > li {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
-webkit-padding-end: 1.25rem;
padding-inline-end: 1.25rem;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu > .sub-menu > li + li {
-webkit-padding-start: 1.25rem;
padding-inline-start: 1.25rem;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu > .sub-menu > li:last-child {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu > .sub-menu li.menu-item-has-children > a {
font-size: var(--submenu-label-font-size);
font-weight: var(--submenu-label-font-weight);
color: var(--submenu-foreground-muted);
padding-inline: 0;
margin-bottom: var(--submenu-label-padding);
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu > .sub-menu li.menu-item-has-children .menu-item-has-children {
margin-top: calc(var(--submenu-label-padding) * 2);
}
.site-navigation.navigation-horizontal > ul > li.mega-menu > .sub-menu .sub-menu {
position: relative;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
padding-block: 0;
padding-inline: 0;
border-radius: 0;
top: 0;
inset-inline-start: 0;
margin-block: 0;
margin-inline: 0;
opacity: 1;
visibility: visible;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu > .sub-menu .sub-menu li > a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding-inline: 0;
width: auto;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu:not(.mega-menu-content):not(.mega-menu-max) > .sub-menu {
padding-inline: calc((100vw - var(--theme-width) + 2 * var(--theme-screen-padding)) / 2);
padding-top: calc(var(--submenu-link-padding-block) * 4);
padding-bottom: calc(var(--submenu-link-padding-block) * 6);
border-radius: 0;
border-inline: 0;
clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
margin-block: 0;
margin-inline: 0;
opacity: 1;
visibility: visible;
-webkit-transition-duration: var(--theme-ease-time-medium);
transition-duration: var(--theme-ease-time-medium);
}
.site-navigation.navigation-horizontal > ul > li.mega-menu.mega-menu-content > .sub-menu {
max-width: calc(var(--theme-width) - 2 * var(--theme-screen-padding));
margin-inline: auto;
padding-inline: calc(var(--submenu-link-padding-inline) * 1.2);
inset-inline-start: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.site-navigation.navigation-horizontal > ul > li.mega-menu.mega-menu-max {
position: relative;
}
.site-navigation.navigation-horizontal > ul > li.mega-menu.mega-menu-max > .sub-menu {
width: auto;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
padding-inline: calc(var(--submenu-link-padding-inline) * 1.2);
inset-inline-start: calc(var(--submenu-link-padding-inline) * 1.2 * -1);
}
.site-navigation.navigation-horizontal > ul > li.mega-menu.mega-menu-max > .sub-menu > li {
min-width: var(--submenu-max-content);
}
.site-navigation.navigation-horizontal > ul > li.mega-menu.mega-menu-max.mega-menu-max-center > .sub-menu {
inset-inline-start: calc(var(--submenu-link-padding-inline) * 2);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.site-navigation.navigation-horizontal > ul > li.mega-menu.mega-menu-max.mega-menu-max-end > .sub-menu {
inset-inline-start: auto;
inset-inline-end: calc(var(--submenu-link-padding-inline) * 1.6 * -1);
}
.site-navigation.navigation-horizontal > ul li > a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--nav-link-gap);
text-decoration: none;
}
.site-navigation.navigation-horizontal > ul li > a .menu-arrow {
width: var(--nav-link-arrow);
height: auto;
}
.site-navigation.navigation-horizontal > ul li > a .menu-arrow > * {
stroke-width: var(--nav-link-arrow-stroke);
}
.site-navigation.navigation-horizontal > ul li:hover:not(.mega-menu) > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
margin-block: 0;
margin-inline: 0;
}
.site-navigation.navigation-horizontal > ul li:hover.mega-menu:not(.mega-menu-content):not(.mega-menu-max) > .sub-menu {
clip-path: polygon(0 0, 100% 0, 100% calc(100% + 15px), 0 calc(100% + 15px));
pointer-events: auto;
}
.site-navigation.navigation-horizontal > ul li:hover.mega-menu.mega-menu-content > .sub-menu, .site-navigation.navigation-horizontal > ul li:hover.mega-menu.mega-menu-max > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
margin-block: 0;
margin-inline: 0;
}
.site-navigation.navigation-vertical > ul ul {
list-style: none;
margin: 0;
-webkit-padding-start: 1.25rem;
padding-inline-start: 1.25rem;
}
.site-navigation.bordered > ul > li + li {
border-top: 1px solid var(--nav-menu-item-border);
}
/*------------------------------------
Components
------------------------------------*/
/* Search form */
.site-search-form {
--search-form-height: 46px;
--search-form-color: #000;
--search-form-background: #fff;
--search-form-background-hover: #fff;
--search-form-background-active: #fff;
--search-form-border-width: 1px;
--search-form-border: rgb(var(--colors-gray-300));
--search-form-border-hover: rgba(var(--colors-gray-400), 0.6);
--search-form-border-active: rgb(var(--colors-gray-400));
--search-form-border-radius: var(--radius-lg);
--search-form-shadow: var(--shadow-xs);
--search-form-shadow-hover: var(--shadow-xs);
--search-form-shadow-active: var(--shadow-xs);
--search-form-placeholder: rgb(var(--colors-gray-400));
--search-form-placeholder-active: rgb(var(--colors-gray-300));
--search-form-button-icon: 22px;
--search-form-button-background: transparent;
--search-form-button-background-active: transparent;
--search-form-button-foreground: #314350;
position: relative;
width: 100%;
}
.site-search-form .search-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: var(--search-form-height);
border: var(--search-form-border-width) solid var(--search-form-border);
background-color: var(--search-form-background);
-webkit-box-shadow: var(--search-form-shadow);
box-shadow: var(--search-form-shadow);
border-radius: var(--search-form-border-radius);
-webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
}
.site-search-form .search-form:hover {
background-color: var(--search-form-background-hover);
border-color: var(--search-form-border-hover);
-webkit-box-shadow: var(--search-form-shadow-hover);
box-shadow: var(--search-form-shadow-hover);
}
.site-search-form .search-form:focus-within {
background-color: var(--search-form-background-active);
border-color: var(--search-form-border-active);
-webkit-box-shadow: var(--search-form-shadow-active);
box-shadow: var(--search-form-shadow-active);
}
.site-search-form .search-form:focus-within .search-input::-webkit-input-placeholder {
color: var(--search-form-placeholder-active);
}
.site-search-form .search-form:focus-within .search-input::-moz-placeholder {
color: var(--search-form-placeholder-active);
}
.site-search-form .search-form:focus-within .search-input:-ms-input-placeholder {
color: var(--search-form-placeholder-active);
}
.site-search-form .search-form:focus-within .search-input::-ms-input-placeholder {
color: var(--search-form-placeholder-active);
}
.site-search-form .search-form:focus-within .search-input::placeholder {
color: var(--search-form-placeholder-active);
}
.site-search-form .search-form .search-input {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
height: 100%;
color: var(--search-form-color);
-webkit-padding-start: calc(var(--search-form-height) / 3);
padding-inline-start: calc(var(--search-form-height) / 3);
}
.site-search-form .search-form .search-input::-webkit-input-placeholder {
font-weight: 400;
color: var(--search-form-placeholder);
}
.site-search-form .search-form .search-input::-moz-placeholder {
font-weight: 400;
color: var(--search-form-placeholder);
}
.site-search-form .search-form .search-input:-ms-input-placeholder {
font-weight: 400;
color: var(--search-form-placeholder);
}
.site-search-form .search-form .search-input::-ms-input-placeholder {
font-weight: 400;
color: var(--search-form-placeholder);
}
.site-search-form .search-form .search-input::placeholder {
font-weight: 400;
color: var(--search-form-placeholder);
}
.site-search-form .search-form button {
width: var(--search-form-height);
height: 100%;
color: var(--search-form-button-foreground);
background-color: var(--search-form-button-background);
border-end-start-radius: var(--search-form-border-radius);
border-end-end-radius: var(--search-form-border-radius);
}
.site-search-form .search-form button svg {
width: var(--search-form-button-icon);
height: var(--search-form-button-icon);
}
.site-search-form .search-form button:hover {
background-color: var(--search-form-button-background-hover);
}
/* Dropdown */
.site-dropdown {
--dropdown-width: 320px;
--dropdown-position: -10px;
--dropdown-offset: 12px;
--dropdown-background: rgb(var(--colors-dropdown-background));
--dropdown-foreground: rgb(var(--colors-dropdown-foreground));
--dropdown-border: rgb(var(--colors-dropdown-border));
--dropdown-inline-border: rgb(var(--colors-gray-200));
--dropdown-muted: rgb(var(--colors-dropdown-muted));
--dropdown-radius: var(--radius-xl);
--dropdown-shadow: var(--shadow-lg);
--dropdown-pading-inline: 22px;
--dropdown-padding-block: 22px;
--dropdown-transformY: 10px;
--dropdown-transformX: 0;
--dropdown-transition-duration: var(--theme-ease-time-medium);
--dropdown-transition-property: all;
--dropdown-transition-timing-function: var(--theme-ease-primary);
position: absolute;
top: 100%;
padding-block: var(--dropdown-offset);
opacity: 0;
visibility: hidden;
pointer-events: none;
margin-block: var(--dropdown-transformY);
margin-inline: var(--dropdown-transformX);
-webkit-transition-duration: var(--dropdown-transition-duration);
transition-duration: var(--dropdown-transition-duration);
-webkit-transition-property: var(--dropdown-transition-property);
transition-property: var(--dropdown-transition-property);
-webkit-transition-timing-function: var(--dropdown-transition-timing-function);
transition-timing-function: var(--dropdown-transition-timing-function);
z-index: 10;
}
.site-dropdown[data-position=start] {
inset-inline-start: var(--dropdown-position);
}
.site-dropdown[data-position=end] {
inset-inline-end: var(--dropdown-position);
}
.site-dropdown[data-position=center] {
inset-inline-start: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.site-dropdown .site-dropdown-inner {
width: var(--dropdown-width);
color: var(--dropdown-foreground);
background-color: var(--dropdown-background);
border: 1px solid var(--dropdown-border);
border-radius: var(--dropdown-radius);
-webkit-box-shadow: var(--dropdown-shadow);
box-shadow: var(--dropdown-shadow);
padding-inline: var(--dropdown-pading-inline);
padding-block: var(--dropdown-padding-block);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.site-dropdown .dropdown-login .site-list {
--list-border-color: var(--dropdown-inline-border);
margin-bottom: 1.875rem;
}
.site-dropdown .dropdown-login .site-iconbox {
--iconbox-title: 14px;
--iconbox-description: 12px;
--iconbox-title-color: currentColor;
--iconbox-description-color: var(--dropdown-muted);
}
/* List style */
.site-list-style {
--list-font-size: 14px;
--list-gap: 20px;
--list-border-width: 1px;
--list-border-style: solid;
--list-border-color: rgb(var(--colors-gray-200));
position: relative;
font-size: var(--list-font-size);
list-style: none;
padding: 0;
}
.site-list-style li {
padding-block: var(--list-gap);
}
.site-list-style li:first-child {
-webkit-padding-before: 0;
padding-block-start: 0;
}
.site-list-style li:last-child {
-webkit-padding-after: 0;
padding-block-end: 0;
}
.site-list-style.list-inside {
list-style-position: inside;
}
.site-list-style.list-decimal {
list-style-type: decimal;
}
.site-list-style.list-disc {
list-style-type: disc;
}
.site-list-style.list-none {
list-style-type: none;
}
.site-list-style.margin-0 {
margin: 0;
}
.site-list-style.list-bordered li + li {
border-top-width: var(--list-border-width);
border-top-style: var(--list-border-style);
border-top-color: var(--list-border-color);
}
/* Iconbox */
.site-iconbox {
--iconbox-gap: 18px;
--iconbox-row-gap: 6px;
--iconbox-icon: 28px;
--iconbox-icon-color: currentColor;
--iconbox-number-size: 12px;
--iconbox-number-rounded: 50%;
--iconbox-number-background: rgb(var(--colors-gray-200));
--iconbox-number-foreground: rgb(var(--colors-gray-600));
--iconbox-title: 15px;
--iconbox-title-mobile: 15px;
--iconbox-title-font-weight: 500;
--iconbox-title-margin: 2px;
--iconbox-title-color: currentColor;
--iconbox-description: 13px;
--iconbox-description-color: rgb(var(--colors-gray-500));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--iconbox-gap);
row-gap: var(--iconbox-row-gap);
}
.site-iconbox .site-iconbox-icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--iconbox-icon-color);
}
.site-iconbox .site-iconbox-icon > * {
width: var(--iconbox-icon);
height: auto;
}
.site-iconbox .site-iconbox-icon > *.number {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--iconbox-number-size);
font-weight: 600;
line-height: 1.1;
height: var(--iconbox-icon);
border-radius: var(--iconbox-number-rounded);
color: var(--iconbox-number-foreground);
background-color: var(--iconbox-number-background);
}
.site-iconbox .site-iconbox-detail {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.site-iconbox .site-iconbox-detail .entry-title {
font-size: var(--iconbox-title-mobile);
font-weight: var(--iconbox-title-font-weight);
color: var(--iconbox-title-color);
margin-bottom: var(--iconbox-title-margin);
}
@media screen and (min-width: 576.02px) {
.site-iconbox .site-iconbox-detail .entry-title {
font-size: var(--iconbox-title);
}
}
.site-iconbox .site-iconbox-detail p {
font-size: var(--iconbox-description);
color: var(--iconbox-description-color);
margin-bottom: 0;
}
.site-iconbox .site-iconbox-footer {
width: 100%;
}
.site-iconbox .site-iconbox-footer p {
font-size: var(--iconbox-description);
color: var(--iconbox-description-color);
margin-bottom: 0;
}
.site-iconbox a {
color: currentColor;
text-decoration: none;
}
.site-iconbox .mb-0 {
margin-bottom: 0 !important;
}
/* Drawer */
.drawer {
--drawer-inner-width-mobile: 90%;
--drawer-inner-width-desktop: 380px;
--drawer-inner-padding: 26px;
--drawer-translate-x: -100%;
--drawer-transition-duration: var(--theme-ease-time-slow);
--drawer-transition-property: opacity, visibility, background-color, transform;
--drawer-transition-timing-function: var(--theme-ease-primary);
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
pointer-events: none;
z-index: 1000;
}
.drawer .site-drawer-inner {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: var(--drawer-inner-width-mobile);
height: 100%;
color: rgb(var(--colors-drawer-foreground));
background-color: rgb(var(--colors-drawer-background));
overflow-y: auto;
opacity: 0;
visibility: hidden;
-webkit-transform: translate(calc(var(--drawer-translate-x) * 1));
transform: translate(calc(var(--drawer-translate-x) * 1));
-webkit-transition-duration: var(--drawer-transition-duration);
transition-duration: var(--drawer-transition-duration);
-webkit-transition-property: var(--drawer-transition-property);
transition-property: var(--drawer-transition-property);
-webkit-transition-timing-function: var(--drawer-transition-timing-function);
transition-timing-function: var(--drawer-transition-timing-function);
z-index: 1;
}
@media screen and (min-width: 576.02px) {
.drawer .site-drawer-inner {
width: var(--drawer-inner-width-desktop);
}
}
.drawer .site-drawer-inner > * {
width: 100%;
}
.drawer .site-drawer-inner > *.site-drawer-body {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
@media screen and (min-width: 1024.02px) {
.drawer .site-drawer-inner:has(.navigation-on-hover) {
overflow-y: visible;
}
}
.drawer .site-drawer-inner .site-drawer-header, .drawer .site-drawer-inner .site-drawer-footer {
padding: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.drawer .site-drawer-inner .site-drawer-header, .drawer .site-drawer-inner .site-drawer-footer {
padding: var(--drawer-inner-padding);
}
}
.drawer .site-drawer-inner .site-drawer-body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.drawer .site-drawer-inner .site-drawer-body > * {
width: 100%;
}
.drawer .site-drawer-inner .site-drawer-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.drawer .site-drawer-inner .site-drawer-header .entry-title {
font-size: var(--text-base);
font-weight: 600;
margin-bottom: 0;
color: rgb(var(--colors-drawer-muted-foreground));
opacity: 0.6;
}
.drawer .site-drawer-inner .site-drawer-header .site-close {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.drawer .site-drawer-inner .site-copyright {
color: rgb(var(--colors-drawer-muted-foreground));
}
.drawer .site-drawer-inner .site-copyright a {
color: rgb(var(--colors-drawer-foreground));
}
.drawer .site-drawer-inner .site-navigation {
--link-underline-offset: 4px;
--link-decoraation-color: transparent;
--link-hover-color: rgb(var(--colors-primary-background));
--link-hover-background: transparent;
--link-decoraation-hover-color: transparent;
--nav-link-icon: var(--theme-drawer-menu-icon);
--nav-link-gap: var(--theme-drawer-menu-gap);
}
.drawer .site-drawer-inner .site-navigation > ul {
gap: 0;
}
.drawer .site-drawer-inner .site-navigation > ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.drawer .site-drawer-inner .site-navigation > ul li a {
gap: var(--nav-link-gap);
}
.drawer .site-drawer-inner .site-navigation .menu-icon > * {
top: 0;
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li > *:not(ul) {
font-size: var(--theme-drawer-menu-font-size);
font-weight: var(--theme-drawer-menu-font-weight);
letter-spacing: var(--theme-drawer-menu-letter-spacing);
height: var(--theme-drawer-menu-height);
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li > *:not(ul) a {
height: 100%;
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li ul {
width: 100%;
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li ul li > *:not(ul) {
font-size: var(--theme-drawer-submenu-font-size);
font-weight: var(--theme-drawer-submenu-font-weight);
letter-spacing: var(--theme-drawer-submenu-letter-spacing);
height: var(--theme-drawer-submenu-height);
}
@media (hover: hover) and (pointer: fine) {
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li:hover {
background-color: var(--link-hover-background);
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li:hover > a, .drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li:hover > .menu-item-wrapper > * {
color: var(--link-hover-color);
text-decoration-color: var(--link-decoraation-hover-color);
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li ul li:hover > a, .drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul > li ul li:hover > .menu-item-wrapper > * {
color: var(--link-hover-color);
text-decoration-color: var(--link-decoraation-hover-color);
}
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul li > *:not(ul) {
width: 100%;
padding-inline: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul li > *:not(ul) {
padding-inline: var(--drawer-inner-padding);
}
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul li > *:not(ul).menu-item-wrapper a {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
-webkit-padding-end: 0.625rem;
padding-inline-end: 0.625rem;
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul .menu-item-has-children > .sub-menu {
max-height: 0;
overflow: hidden;
-webkit-transition-duration: var(--theme-ease-time-slow);
transition-duration: var(--theme-ease-time-slow);
-webkit-transition-property: max-height;
transition-property: max-height;
-webkit-transition-timing-function: var(--theme-ease-primary);
transition-timing-function: var(--theme-ease-primary);
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown > ul .active > .menu-item-wrapper > .dropdown-icon-wrapper svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown a {
font-size: inherit;
color: rgb(var(--colors-dropdown-foreground));
text-underline-offset: var(--link-underline-offset);
text-decoration-color: var(--link-decoraation-color);
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
-webkit-transition-property: color, text-decoration-color;
transition-property: color, text-decoration-color;
-webkit-transition-timing-function: var(--theme-ease-primary);
transition-timing-function: var(--theme-ease-primary);
}
@media (hover: hover) and (pointer: fine) {
.drawer .site-drawer-inner .site-navigation.navigation-dropdown a:hover {
color: var(--link-hover-color);
text-decoration-color: var(--link-decoraation-hover-color);
}
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown .menu-item-wrapper, .drawer .site-drawer-inner .site-navigation.navigation-dropdown a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown .dropdown-icon-wrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 1.75rem;
height: 100%;
-webkit-margin-start: auto;
margin-inline-start: auto;
cursor: pointer;
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown .dropdown-icon-wrapper svg {
width: var(--theme-drawer-arrow);
height: var(--theme-drawer-arrow);
-webkit-transition-duration: var(--theme-ease-time-medium);
transition-duration: var(--theme-ease-time-medium);
-webkit-transition-property: color, -webkit-transform;
transition-property: color, -webkit-transform;
transition-property: color, transform;
transition-property: color, transform, -webkit-transform;
-webkit-transition-timing-function: var(--theme-ease-primary);
transition-timing-function: var(--theme-ease-primary);
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown .dropdown-icon-wrapper svg > * {
stroke-width: 1.6;
}
@media screen and (min-width: 1024.02px) {
.drawer .site-drawer-inner .site-navigation.navigation-dropdown.navigation-on-hover .dropdown-icon-wrapper svg, .drawer .site-drawer-inner .site-navigation.navigation-dropdown.navigation-on-hover .active > .menu-item-wrapper > .dropdown-icon-wrapper > svg svg {
-webkit-transform: rotate(-90deg) !important;
transform: rotate(-90deg) !important;
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown.navigation-on-hover .sub-menu {
position: absolute;
max-height: none !important;
height: 100%;
top: 0;
inset-inline-start: 100%;
padding-top: var(--drawer-inner-padding);
background-color: rgb(var(--colors-drawer-background));
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all 0.15s var(--theme-ease-in-out) !important;
transition: all 0.15s var(--theme-ease-in-out) !important;
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown.navigation-on-hover .sub-menu::before {
content: "";
position: absolute;
width: 0.0625rem;
height: 100%;
top: 0;
inset-inline-start: 0;
background-color: rgb(var(--colors-drawer-inline-border));
}
.drawer .site-drawer-inner .site-navigation.navigation-dropdown.navigation-on-hover .menu-item-has-children:hover > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
@media screen and (max-width: 1023.98px) {
.drawer .site-drawer-inner .site-navigation.navigation-dropdown.navigation-on-hover .sub-menu {
padding-inline: calc(var(--nav-link-icon) + var());
}
}
.drawer .site-drawer-inner .site-navigation.categories-menu {
--link-hover-background: rgb(var(--colors-gray-50));
--theme-drawer-menu-font-size: 14px;
--theme-drawer-menu-font-weight: 500;
--theme-drawer-menu-height: 50px;
--theme-drawer-submenu-font-size: 13px;
--theme-drawer-submenu-height: 34px;
--nav-menu-item-border: rgb(var(--colors-drawer-inline-border));
}
.drawer .site-drawer-inner .site-navigation.bordered .sub-menu > li:last-child {
padding-bottom: calc(var(--theme-drawer-submenu-height) / 2);
}
.drawer .site-drawer-inner .site-navigation .badge {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.drawer .site-drawer-inner .site-list {
margin-top: auto;
margin-bottom: 1.25rem;
padding-top: 1.875rem;
padding-inline: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.drawer .site-drawer-inner .site-list {
padding-inline: var(--drawer-inner-padding);
}
}
.drawer .site-drawer-inner .site-list .site-list-style {
--list-border-color: rgb(var(--colors-drawer-inline-border));
}
.drawer .site-drawer-inner .site-drawer-cart-inner, .drawer .site-drawer-inner .site-drawer-search-inner {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 100%;
height: 100%;
}
.drawer .site-drawer-inner .site-drawer-cart-inner > *, .drawer .site-drawer-inner .site-drawer-search-inner > * {
width: 100%;
}
.drawer .site-drawer-inner .site-drawer-cart-inner .site-empty {
--empty-title: 18px;
padding-inline: 1.25rem;
padding-top: 3.5rem;
}
@media screen and (min-width: 576.02px) {
.drawer .site-drawer-inner .site-drawer-cart-inner .site-empty {
padding-inline: var(--drawer-inner-padding);
}
}
.drawer .site-drawer-inner .site-drawer-cart-inner .site-empty p {
opacity: 0.7;
}
.drawer .site-drawer-inner .site-drawer-cart-inner .cart-notification {
--notification-text: 13px;
--notification-foreground: rgb(var(--colors-drawer-foreground));
--notification-background: transparent;
--notification-border: rgb(var(--colors-drawer-inline-border));
--notification-radius: 0;
--notification-padding: 1.25rem;
border-inline: 0;
}
.drawer .site-drawer-inner .site-drawer-cart-inner .cart-notification .site-progress {
--progress-background: rgb(var(--colors-drawer-inline-border));
}
.drawer .site-drawer-inner .site-drawer-cart-inner:has(.site-empty) .cart-notification {
display: none;
}
.drawer .site-drawer-inner .site-search-drawer-form {
padding-inline: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.drawer .site-drawer-inner .site-search-drawer-form {
padding-inline: var(--drawer-inner-padding);
}
}
.drawer .site-drawer-inner .site-search-drawer-form .site-search-form {
margin-bottom: 1.25rem;
}
.drawer .site-drawer-inner .site-search-drawer-form .site-search-tags {
--tag-gap: 4px;
--tag-size: 12px;
--tag-weight: 500;
--tag-icon: 12px;
--tag-padding-inline: 8px;
--tag-padding-block: 4px;
--tag-border-radius: var(--radius-sm);
--tag-border-width: 1px;
--tag-background: transparent;
--tag-foreground: rgb(var(--colors-drawer-foreground));
--tag-border: rgb(var(--colors-drawer-inline-border));
--tag-hover-background: rgb(var(--colors-drawer-muted-background));
--tag-hover-foreground: rgb(var(--colors-drawer-foreground));
--tag-hover-border: rgb(var(--colors-drawer-inline-border));
margin-top: 1.875rem;
}
.drawer .site-drawer-inner .site-search-drawer-form .site-search-tags span {
display: block;
font-size: 0.8125rem;
font-weight: 400;
color: rgb(var(--colors-drawer-muted-foreground));
margin-bottom: 0.625rem;
opacity: 0.8;
}
.drawer .site-drawer-inner .site-search-drawer-form .site-search-tags ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--tag-gap);
list-style: none;
margin: 0;
padding: 0;
}
.drawer .site-drawer-inner .site-search-drawer-form .site-search-tags ul li a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--tag-size);
font-weight: var(--tag-weight);
text-decoration: none;
gap: 0.25rem;
color: var(--tag-foreground);
background-color: var(--tag-background);
border: var(--tag-border-width) solid var(--tag-border);
border-radius: var(--tag-border-radius);
padding-inline: var(--tag-padding-inline);
padding-block: var(--tag-padding-block);
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.drawer .site-drawer-inner .site-search-drawer-form .site-search-tags ul li a svg, .drawer .site-drawer-inner .site-search-drawer-form .site-search-tags ul li a img {
width: var(--tag-icon);
height: auto;
opacity: 0.4;
}
@media (hover: hover) and (pointer: fine) {
.drawer .site-drawer-inner .site-search-drawer-form .site-search-tags ul li a:hover {
color: var(--tag-hover-foreground);
border-color: var(--tag-hover-border);
background-color: var(--tag-hover-background);
}
}
.drawer .site-drawer-inner .site-drawer-products {
padding: 1.25rem;
margin-top: auto;
border-top: 1px solid rgb(var(--colors-drawer-inline-border));
}
@media screen and (min-width: 576.02px) {
.drawer .site-drawer-inner .site-drawer-products {
padding: var(--drawer-inner-padding);
}
}
.drawer .site-drawer-inner .site-drawer-products .entry-title {
font-size: var(--text-base);
font-weight: 600;
margin-bottom: 1rem;
}
.drawer .site-drawer-inner .site-filter-drawer {
padding-inline: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.drawer .site-drawer-inner .site-filter-drawer {
padding-inline: var(--drawer-inner-padding);
}
}
.drawer .site-drawer-overlay {
opacity: 0;
visibility: hidden;
-webkit-transition-duration: calc(var(--drawer-transition-duration) + 0.2s);
transition-duration: calc(var(--drawer-transition-duration) + 0.2s);
-webkit-transition-property: var(--drawer-transition-property);
transition-property: var(--drawer-transition-property);
-webkit-transition-timing-function: var(--drawer-transition-timing-function);
transition-timing-function: var(--drawer-transition-timing-function);
}
.drawer.cart-drawer, .drawer.search-drawer {
--drawer-translate-x: 100%;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.drawer.cart-drawer .site-drawer-inner, .drawer.search-drawer .site-drawer-inner {
inset-inline-start: auto;
inset-inline-end: 0;
}
.drawer.active {
--drawer-translate-x: 0;
pointer-events: auto;
}
.drawer.active .site-drawer-overlay {
opacity: 1;
visibility: visible;
}
.drawer.active .site-drawer-inner {
opacity: 1;
visibility: visible;
}
/* Popup */
.popup {
--popup-inline: 16px;
--popup-width: 640px;
--popup-background: rgb(var(--colors-white));
--popup-radius: var(--radius-lg);
--popup-transformX: 0;
--popup-transformY: 20px;
--popup-scale: 1;
--popup-transition-duration: var(--theme-ease-time-medium);
--popup-transition-property: opacity, visibility, background-color, transform;
--popup-transition-timing-function: var(--theme-ease-primary);
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
z-index: 100;
padding-inline: var(--popup-inline);
pointer-events: none;
}
.popup .site-popup-overlay {
opacity: 0;
visibility: hidden;
-webkit-transition-duration: var(--popup-transition-duration);
transition-duration: var(--popup-transition-duration);
-webkit-transition-property: var(--popup-transition-property);
transition-property: var(--popup-transition-property);
-webkit-transition-timing-function: var(--popup-transition-timing-function);
transition-timing-function: var(--popup-transition-timing-function);
}
.popup .popup-inner {
position: relative;
background-color: var(--popup-background);
border-radius: var(--popup-radius);
max-width: var(--popup-width);
width: 100%;
overflow: hidden;
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(var(--popup-transformX)) translateY(var(--popup-transformY)) scale(var(--popup-scale));
transform: translateX(var(--popup-transformX)) translateY(var(--popup-transformY)) scale(var(--popup-scale));
-webkit-transition-duration: var(--popup-transition-duration);
transition-duration: var(--popup-transition-duration);
-webkit-transition-property: var(--popup-transition-property);
transition-property: var(--popup-transition-property);
-webkit-transition-timing-function: var(--popup-transition-timing-function);
transition-timing-function: var(--popup-transition-timing-function);
z-index: 1;
}
.popup .popup-inner .site-close {
position: absolute;
top: 0.625rem;
inset-inline-end: 0.625rem;
}
@media screen and (min-width: 1024.02px) {
.popup .popup-inner .site-close {
top: 1.25rem;
inset-inline-end: 1.25rem;
}
}
.popup .popup-inner .close-button-text {
font-size: var(--text-sm);
font-weight: 600;
color: currentColor;
text-underline-offset: 0.25rem;
-webkit-transition: var(--theme-text-decoration-transition);
transition: var(--theme-text-decoration-transition);
}
.popup .popup-inner .close-button-text:hover {
text-decoration-color: transparent;
}
.popup .popup-inner > * {
margin-inline: auto;
}
.popup .popup-inner > *.site-garage-form {
margin-block: 3rem;
padding-inline: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.popup .popup-inner > *.site-garage-form {
margin-block: 4.125rem;
}
}
@media screen and (min-width: 1024.02px) {
.popup .popup-inner > *.site-garage-form {
margin-block: 7.25rem;
}
}
.popup.popup-newsletter {
--popup-width: 900px;
}
.popup.active {
pointer-events: auto;
}
.popup.active .site-popup-overlay {
opacity: 1;
visibility: visible;
}
.popup.active .popup-inner {
opacity: 1;
visibility: visible;
-webkit-transform: translateX(0) translateY(0) scale(1);
transform: translateX(0) translateY(0) scale(1);
}
/* Newsletter Popup */
.site-popup-newsletter {
--newsletter-title-mobile: 24px;
--newsletter-title-desktop: 30px;
--newsletter-title-weight: 700;
--newsletter-description: 14px;
--newsletter-image-width: 300px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.site-popup-newsletter .column {
width: 100%;
}
.site-popup-newsletter .column.newsletter-image {
display: none;
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .column {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.site-popup-newsletter .column.newsletter-image {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: var(--newsletter-image-width);
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.site-popup-newsletter .column.newsletter-image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
.site-popup-newsletter .column.newsletter-content {
text-align: center;
padding-block: 3rem;
padding-inline: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.site-popup-newsletter .column.newsletter-content {
padding-block: 4.125rem;
padding-inline: 1.875rem;
}
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .column.newsletter-content {
padding-block: 7.25rem;
padding-inline: 3.25rem;
}
}
.site-popup-newsletter .site-popup-newsletter-header {
margin-bottom: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .site-popup-newsletter-header {
margin-bottom: 2.25rem;
}
}
.site-popup-newsletter .site-popup-newsletter-header .entry-title {
font-size: var(--newsletter-title-mobile);
font-weight: var(--newsletter-title-weight);
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .site-popup-newsletter-header .entry-title {
font-size: var(--newsletter-title-desktop);
}
}
.site-popup-newsletter .site-popup-newsletter-header p {
font-size: var(--newsletter-description);
opacity: 0.7;
max-width: 26.25rem;
margin-inline: auto;
}
.site-popup-newsletter .site-popup-newsletter-form {
margin-bottom: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .site-popup-newsletter-form {
margin-bottom: 2.25rem;
}
}
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.625rem;
width: 100%;
margin-bottom: 1.25rem;
}
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields > * {
width: 100%;
}
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields svg {
position: absolute;
width: 1rem;
height: auto;
top: 0.875rem;
inset-inline-start: 0.875rem;
color: rgb(var(--colors-gray-500));
pointer-events: none;
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields svg {
width: 1.125rem;
top: 1rem;
inset-inline-start: 1rem;
}
}
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields input {
--form-input-size-base: 42px;
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields input {
--form-input-size-base: 48px;
}
}
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields button {
--form-button-size-base: 42px;
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields button {
--form-button-size-base: 48px;
}
}
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields:has(svg) input {
-webkit-padding-start: 2.5rem;
padding-inline-start: 2.5rem;
}
@media screen and (min-width: 1024.02px) {
.site-popup-newsletter .site-popup-newsletter-form form .mc4wp-form-fields:has(svg) input {
-webkit-padding-start: 2.75rem;
padding-inline-start: 2.75rem;
}
}
.site-popup-newsletter .site-popup-newsletter-form .privacy-text {
max-width: 26.25rem;
margin-inline: auto;
}
/* Badge */
.badge {
--badge-font-size: 11px;
--badge-font-weight: 600;
--badge-inline: 7px;
--badge-block: 5px;
--badge-rounded: var(--radius-xs);
--badge-background: rgb(var(--colors-gray-200));
--badge-foreground: rgb(var(--colors-gray-600));
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
line-height: 1.1;
padding-inline: var(--badge-inline);
padding-block: var(--badge-block);
color: var(--badge-foreground);
background-color: var(--badge-background);
border-radius: var(--badge-rounded);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.badge.rounded-none {
border-radius: 0;
}
.badge.rounded-full {
border-radius: 62.4375rem;
}
.badge.badge-primary {
--badge-background: rgb(var(--colors-primary-background));
--badge-foreground: rgb(var(--colors-primary-foreground));
}
.badge.badge-primary-light {
--badge-background: rgba(var(--colors-primary-background), 0.1);
--badge-foreground: rgb(var(--colors-primary-background));
}
.badge.badge-secondary {
--badge-background: rgb(var(--colors-secondary-background));
--badge-foreground: rgb(var(--colors-secondary-foreground));
}
.badge.badge-secondary-light {
--badge-background: rgba(var(--colors-secondary-background), 0.1);
--badge-foreground: rgb(var(--colors-secondary-background));
}
.badge.badge-blue {
--badge-background: rgb(var(--colors-blue-base));
--badge-foreground: rgb(var(--colors-blue-light));
}
.badge.badge-blue-light {
--badge-background: rgb(var(--colors-blue-light));
--badge-foreground: rgb(var(--colors-blue-dark));
}
.badge.badge-red {
--badge-background: rgb(var(--colors-red-base));
--badge-foreground: rgb(var(--colors-red-light));
}
.badge.badge-red-light {
--badge-background: rgb(var(--colors-red-light));
--badge-foreground: rgb(var(--colors-red-dark));
}
.badge.badge-green {
--badge-background: rgb(var(--colors-green-base));
--badge-foreground: rgb(var(--colors-green-light));
}
.badge.badge-green-light {
--badge-background: rgb(var(--colors-green-light));
--badge-foreground: rgb(var(--colors-green-dark));
}
.badge.badge-orange {
--badge-background: rgb(var(--colors-orange-base));
--badge-foreground: rgb(var(--colors-orange-light));
}
.badge.badge-orange-light {
--badge-background: rgb(var(--colors-orange-light));
--badge-foreground: rgb(var(--colors-orange-dark));
}
.badge.style-1 {
--badge-border-width: 5px;
border-end-start-radius: 0;
padding-block: calc(var(--badge-block) + 2px);
}
.badge.style-1::before, .badge.style-1::after {
content: "";
position: absolute;
bottom: calc(var(--badge-border-width) * 2 * -1);
inset-inline-start: 0;
border-width: var(--badge-border-width);
border-style: solid;
}
.badge.style-1::before {
border-color: var(--badge-background) var(--badge-background) transparent transparent;
}
.badge.style-1::after {
border-color: rgba(0, 0, 0, 0.26) rgba(0, 0, 0, 0.26) transparent transparent;
}
/* Slider */
.site-slider-wrapper .site-slider {
z-index: 3;
}
.site-slider-wrapper .site-slider .slider-preloader {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
z-index: 10;
}
.site-slider-wrapper .site-slider:not(.swiper-initialized) > *:not(.slider-preloader) {
opacity: 0;
visibility: hidden;
}
.site-slider-wrapper .site-slider.swiper-initialized > *.slider-preloader {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.site-slider-wrapper .site-slider.swiper-initialized > *.slider-preloader .preloader {
-webkit-animation: none;
animation: none;
}
.site-slider-wrapper .site-slider > .swiper-pagination {
width: auto;
inset-inline-start: 50%;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
.site-slider-wrapper .swiper-pagination {
--slider-dots-offset: 16px;
--slider-dots: 6px;
--slider-dots-gap: 4px;
--slider-dots-border-width: 1px;
--slider-dots-outline-width: 1px;
--slider-dots-outline-offset: 2px;
--slider-dots-border-color: transparent;
--slider-dots-outline-color: transparent;
--slider-dots-opacity: .3;
--slider-dots-color: rgb(var(--colors-primary-background));
--slider-dots-active-color: rgb(var(--colors-primary-background));
--slider-dots-border-hover-color: transparent;
--slider-dots-outline-hover-color: transparent;
--slider-dots-opacity-hover: .5;
--slider-dots-hover-color: rgb(var(--colors-primary-background));
--slider-dots-border-active-color: transparent;
--slider-dots-outline-active-color: transparent;
--slider-dots-transition-duration: var(--theme-ease-time-fast);
--slider-dots-transition-timing-function: var(--theme-ease-in-out);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: var(--slider-dots);
bottom: var(--slider-dots-offset);
z-index: 3;
}
.site-slider-wrapper .swiper-pagination .swiper-pagination-bullet {
width: var(--slider-dots);
height: var(--slider-dots);
margin: 0 calc(var(--slider-dots-gap) / 2);
background-color: var(--slider-dots-color);
opacity: var(--slider-dots-opacity);
border: var(--slider-dots-border-width) solid var(--slider-dots-border-color);
outline: var(--slider-dots-outline-width) solid var(--slider-dots-outline-color);
outline-offset: var(--slider-dots-outline-offset);
-webkit-transition: all var(--slider-dots-transition-duration) var(--slider-dots-transition-timing-function);
transition: all var(--slider-dots-transition-duration) var(--slider-dots-transition-timing-function);
}
.site-slider-wrapper .swiper-pagination .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) {
background-color: var(--slider-dots-hover-color);
border-color: var(--slider-dots-border-hover-color);
outline-color: var(--slider-dots-outline-hover-color);
opacity: var(--slider-dots-opacity-hover);
}
.site-slider-wrapper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
opacity: 1;
background-color: var(--slider-dots-active-color);
border-color: var(--slider-dots-border-active-color);
outline-color: var(--slider-dots-outline-active-color);
}
.site-slider-wrapper .swiper-button-next, .site-slider-wrapper .swiper-button-prev {
--swiper-navigation-boxed: 0;
--swiper-navigation-size: 52px;
--swiper-navigation-font-size: 28px;
--swiper-navigation-weight: 500;
--swiper-navigation-color: #000;
--swiper-navigation-background: transparent;
--swiper-navigation-border: transparent;
--swiper-navigation-hover-color: #000;
--swiper-navigation-hover-background: transparent;
--swiper-navigation-hover-border: transparent;
--swiper-navigation-sides-offset: calc(((var(--swiper-navigation-size) * (0.5 + 0.5 * var(--swiper-navigation-boxed))) + (6px * (1 - var(--swiper-navigation-boxed)))) / 2);
--swiper-navigation-shadow: none;
--swiper-navigation-radius: 0;
--swiper-next-padding: 3px;
--swiper-prev-padding: 3px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: calc(var(--swiper-navigation-size) * (0.5 + 0.5 * var(--swiper-navigation-boxed)) + 6px * (1 - var(--swiper-navigation-boxed)));
background-color: var(--swiper-navigation-background);
border: 1px solid var(--swiper-navigation-border);
-webkit-box-shadow: var(--swiper-navigation-shadow);
box-shadow: var(--swiper-navigation-shadow);
border-radius: var(--swiper-navigation-radius);
-webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, visibility, transform3d, -webkit-transform;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, visibility, transform3d, -webkit-transform;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, visibility, transform, transform3d;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, visibility, transform, transform3d, -webkit-transform;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
-webkit-transition-duration: var(--theme-ease-time-medium);
transition-duration: var(--theme-ease-time-medium);
}
.site-slider-wrapper .swiper-button-next::after, .site-slider-wrapper .swiper-button-prev::after {
font-size: var(--swiper-navigation-font-size);
font-weight: var(--swiper-navigation-weight);
}
.site-slider-wrapper .swiper-button-next:hover, .site-slider-wrapper .swiper-button-prev:hover {
color: var(--swiper-navigation-hover-color);
background-color: var(--swiper-navigation-hover-background);
border-color: var(--swiper-navigation-hover-border);
}
.site-slider-wrapper .swiper-button-next.swiper-button-next, .site-slider-wrapper .swiper-button-prev.swiper-button-next {
-webkit-padding-start: var(--swiper-next-padding);
padding-inline-start: var(--swiper-next-padding);
}
.site-slider-wrapper .swiper-button-next.swiper-button-prev, .site-slider-wrapper .swiper-button-prev.swiper-button-prev {
-webkit-padding-end: var(--swiper-prev-padding);
padding-inline-end: var(--swiper-prev-padding);
}
.site-slider-wrapper .swiper-button-next.color-transparent-white, .site-slider-wrapper .swiper-button-prev.color-transparent-white {
color: rgb(var(--colors-black));
background-color: rgba(var(--colors-white), 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.site-slider-wrapper .swiper-button-next.color-transparent-black, .site-slider-wrapper .swiper-button-prev.color-transparent-black {
color: rgb(var(--colors-white));
background-color: rgba(var(--colors-black), 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.site-slider-wrapper .swiper-button-next.swiper-button-disabled, .site-slider-wrapper .swiper-button-prev.swiper-button-disabled {
pointer-events: auto;
-webkit-box-shadow: none;
box-shadow: none;
cursor: pointer;
}
.site-slider-wrapper .swiper-button-next.on-hover, .site-slider-wrapper .swiper-button-prev.on-hover {
opacity: 0;
}
.site-slider-wrapper .swiper-button-next.on-hover.swiper-button-prev, .site-slider-wrapper .swiper-button-prev.on-hover.swiper-button-prev {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
.site-slider-wrapper .swiper-button-next.on-hover.swiper-button-next, .site-slider-wrapper .swiper-button-prev.on-hover.swiper-button-next {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
.site-slider-wrapper .swiper-button-next.stick, .site-slider-wrapper .swiper-button-prev.stick {
--swiper-navigation-sides-offset: 0;
}
.site-slider-wrapper .swiper-button-next.swiper-button-lock, .site-slider-wrapper .swiper-button-prev.swiper-button-lock {
display: none;
}
@media screen and (min-width: 1024.02px) {
.site-slider-wrapper .swiper-button-next.half, .site-slider-wrapper .swiper-button-prev.half {
--swiper-navigation-sides-offset: calc(
(
(
(var(--swiper-navigation-size) * (0.5 + 0.5 * var(--swiper-navigation-boxed))) +
(6px * (1 - var(--swiper-navigation-boxed)))
) / 2
) * -1
);
}
.site-slider-wrapper .swiper-button-next.out, .site-slider-wrapper .swiper-button-prev.out {
--swiper-navigation-sides-offset: calc(
(
(
(var(--swiper-navigation-size) * (0.5 + 0.5 * var(--swiper-navigation-boxed))) +
(6px * (1 - var(--swiper-navigation-boxed)))
) * -1
) * 1.5
);
}
}
.site-slider-wrapper .site-slider-controls .swiper-pagination {
position: relative;
top: 0;
bottom: 0;
margin-top: var(--slider-dots-offset);
}
.site-slider-wrapper .site-slider-controls .swiper-scrollbar {
--slider-scrollbar-offset: 16px;
position: relative;
margin-top: var(--slider-scrollbar-offset);
}
@media screen and (max-width: 1023.98px) {
.site-slider-wrapper .site-slider-controls .swiper-button-next, .site-slider-wrapper .site-slider-controls .swiper-button-prev {
display: none;
}
}
@media screen and (min-width: 1024.02px) {
.site-slider-wrapper:has(.product-hidden-content) .site-slider {
margin-inline: calc(var(--theme-product-hidden-padding) * -1);
margin-top: calc(var(--theme-product-hidden-padding) * -1);
margin-bottom: calc(var(--product-hidden-offset, 0) * -1);
padding-inline: var(--theme-product-hidden-padding);
padding-top: var(--theme-product-hidden-padding);
padding-bottom: var(--product-hidden-offset, 0);
}
.site-slider-wrapper:has(.product-hidden-content):has(.product:hover) .swiper-pagination {
z-index: -1;
}
}
@media (hover: hover) and (pointer: fine) {
.site-slider-wrapper:hover .on-hover {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.site-slider-wrapper:hover .on-hover.swiper-button-disabled {
opacity: 0.3;
}
}
/* Banner */
.site-banner {
position: relative;
}
.site-banner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.site-banner.default-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.site-banner.overlay-block .site-banner-content {
z-index: 1;
}
.site-banner .site-banner-content.justify-center {
text-align: center;
}
.site-banner .site-banner-content.justify-center .site-banner-footer {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.site-banner .site-banner-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.375rem;
width: 100%;
}
.site-banner .site-banner-media img, .site-banner .site-banner-media video, .site-banner .site-banner-media audio, .site-banner .site-banner-media embed, .site-banner .site-banner-media iframe {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.site-banner.full-width .site-banner-content {
max-width: calc(var(--theme-width) - var(--theme-screen-padding) * 2);
width: 100%;
margin-inline: auto;
}
@media (hover: hover) and (pointer: fine) {
.site-banner:hover .link-decoration {
text-decoration-color: var(--decoration-hover-color);
}
}
/* Text banner */
.site-text-banner {
--text-banner-padding-block: 22px;
--text-banner-padding-inner: 30px;
--text-banner-background: rgb(var(--colors-gray-100));
--text-banner-foreground: rgb(var(--colors-black));
--text-banner-muted: rgb(var(--colors-gray-500));
--text-banner-border: transparent;
--text-banner-radius: var(--theme-radius);
--text-banner-background-pos: center center;
--text-banner-background-size: cover;
position: relative;
padding: 1.25rem;
color: var(--text-banner-foreground);
background-color: var(--text-banner-background);
border: 1px solid var(--text-banner-border);
border-radius: var(--text-banner-radius);
background-position: var(--text-banner-background-pos);
background-size: var(--text-banner-background-size);
background-repeat: no-repeat;
}
@media screen and (min-width: 768.02px) {
.site-text-banner {
padding: var(--text-banner-padding-block) var(--text-banner-padding-inner);
}
}
.site-text-banner .site-banner-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-negative: 0;
flex-shrink: 0;
gap: 0.75rem;
}
.site-text-banner .site-banner-inner > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
gap: 0.625rem;
}
@media screen and (min-width: 768.02px) {
.site-text-banner .site-banner-inner > * {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
gap: 1.875rem;
}
}
.site-text-banner .entry-text .entry-title {
margin-bottom: 0.125rem;
}
.site-text-banner .entry-text p {
color: var(--text-banner-muted);
margin-bottom: 0;
}
.site-text-banner .custom-content {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.site-text-banner .entry-phone {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
line-height: 1.1;
gap: 0.375rem;
}
@media screen and (min-width: 1024.02px) {
.site-text-banner .entry-phone {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.site-text-banner .entry-phone a {
font-size: var(--text-base);
font-weight: 700;
color: currentColor;
text-decoration: none;
}
@media screen and (min-width: 1024.02px) {
.site-text-banner .entry-phone a {
font-size: var(--text-2xl);
}
}
.site-text-banner .entry-phone span {
font-size: var(--text-xs);
color: var(--text-banner-muted);
}
.site-text-banner .discount-count {
font-size: 2.25rem;
font-weight: 800;
line-height: 1.1;
}
@media screen and (min-width: 576.02px) {
.site-text-banner .discount-count {
font-size: 2.875rem;
}
}
@media screen and (min-width: 1024.02px) {
.site-text-banner .discount-count {
font-size: 3.5rem;
}
}
.site-text-banner .discount-code {
line-height: 1;
border: 1px dashed var(--text-banner-foreground);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
}
@media screen and (min-width: 1024.02px) {
.site-text-banner .discount-code {
padding: 0.75rem 1rem;
}
}
/* Marquee */
.site-marquee {
--marquee-speed: 30s;
--marquee-direction: left;
--margquee-gap-inner: 0;
--margquee-gap-group: 10px;
--marquee-padding-inline: 24px;
--marquee-padding-block: 0;
--marquee-translate: -50%;
overflow: hidden;
position: relative;
}
.site-marquee .site-marquee-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
gap: var(--margquee-gap-inner);
}
.site-marquee .site-marquee-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-negative: 0;
flex-shrink: 0;
gap: var(--margquee-gap-group);
}
.site-marquee .site-marquee-group .site-marquee-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: var(--marquee-padding-block) var(--marquee-padding-inline);
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.site-marquee.pause-on-hover .site-marquee-inner:hover, .site-marquee.pause-on-hover .site-marquee-group:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
}
.site-marquee.direction-to-left .site-marquee-inner {
-webkit-animation-name: marquee-horizontal;
animation-name: marquee-horizontal;
-webkit-animation-direction: normal;
animation-direction: normal;
}
.site-marquee.direction-to-right .site-marquee-inner {
-webkit-animation-name: marquee-horizontal;
animation-name: marquee-horizontal;
animation-direction: reverse;
}
.site-marquee.direction-to-top .site-marquee-inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-animation-name: marquee-vertical;
animation-name: marquee-vertical;
-webkit-animation-direction: normal;
animation-direction: normal;
}
.site-marquee.direction-to-bottom .site-marquee-inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-animation-name: marquee-vertical;
animation-name: marquee-vertical;
animation-direction: reverse;
}
.site-marquee.animation-inner .site-marquee-inner {
-webkit-animation-name: marquee-horizontal;
animation-name: marquee-horizontal;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: var(--marquee-speed, 20s);
animation-duration: var(--marquee-speed, 20s);
}
.site-marquee.animation-group .site-marquee-group {
-webkit-animation-name: marquee-horizontal;
animation-name: marquee-horizontal;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: var(--marquee-speed, 20s);
animation-duration: var(--marquee-speed, 20s);
}
/* Clients */
.client-logo {
--clients-padding-inline: 0;
--clients-padding-block: 0;
--client-image-height-mobile: 38px;
--client-image-height-desktop: 46px;
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: var(--clients-padding-block) var(--clients-padding-inline);
}
.client-logo a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.client-logo img, .client-logo svg {
width: auto;
height: var(--client-image-height-mobile);
}
@media screen and (min-width: 1024.02px) {
.client-logo img, .client-logo svg {
height: var(--client-image-height-desktop);
}
}
/* Scroll snap */
.site-scroll-snap {
--scroll-gap: var(--theme-padding);
--scroll-gap-mobile: 16px;
--scroll-grid-lg: 4;
--scroll-grid-sm: 2;
--scroll-grid-xs: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
gap: var(--scroll-gap);
overflow-x: auto;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-snap-stop: always;
scrollbar-width: none;
}
@media screen and (max-width: 575.98px) {
.site-scroll-snap {
--scroll-gap: var(--scroll-gap-mobile);
}
}
.site-scroll-snap::-webkit-scrollbar {
display: none;
}
.site-scroll-snap > * {
scroll-snap-align: start;
}
.site-scroll-snap > *:last-child {
scroll-snap-align: end;
}
.site-scroll-snap:not(.custom-width) .site-scroll-item {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: calc((100% - (var(--scroll-grid-xs) - 0.6666666667) * var(--scroll-gap)) / (var(--scroll-grid-xs) + 0.3333333333));
}
.site-scroll-snap:not(.custom-width) .site-scroll-item:last-child {
-webkit-margin-end: calc(var(--scroll-gap) * -1);
margin-inline-end: calc(var(--scroll-gap) * -1);
}
@media screen and (min-width: 576.02px) {
.site-scroll-snap:not(.custom-width) .site-scroll-item {
width: calc((100% - (var(--scroll-grid-sm) - 0.6666666667) * var(--scroll-gap)) / (var(--scroll-grid-sm) + 0.3333333333));
}
}
@media screen and (min-width: 1024.02px) {
.site-scroll-snap:not(.custom-width) .site-scroll-item {
width: calc((100% - (var(--scroll-grid-lg) - 1) * var(--scroll-gap)) / var(--scroll-grid-lg));
}
}
/* Category */
.site-category {
--category-foreground: rgb(var(--colors-gray-900));
--category-background: rgb(var(--colors-gray-100));
--category-border: transparent;
--category-foreground-hover: rgb(var(--colors-gray-900));
--category-background-hover: rgb(var(--colors-gray-50));
--category-border-hover: transparent;
--category-muted-foreground: rgb(var(--colors-gray-500));
--category-muted-background: rgb(var(--colors-gray-200));
--category-border-radius: var(--theme-radius);
--category-shadow: none;
--category-media-padding: 20px;
--category-media-size: 120px;
--category-content-padding: 16px;
--category-content-align: center;
--categor-name-size: 15px;
--category-name-weight: 600;
position: relative;
background-color: var(--category-background);
border: 1px solid var(--category-border);
border-radius: var(--category-border-radius);
-webkit-box-shadow: var(--category-shadow);
box-shadow: var(--category-shadow);
-webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
}
.site-category:hover {
background-color: var(--category-background-hover);
border-color: var(--category-border-hover);
color: var(--category-foreground-hover);
}
.site-category .site-category-media a {
display: block;
text-align: center;
width: 100%;
height: 100%;
padding: var(--category-media-padding) var(--category-media-padding) 0;
}
.site-category .site-category-media a > * {
width: auto;
max-height: var(--category-media-size);
}
.site-category .site-category-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: var(--category-content-align);
-ms-flex-align: var(--category-content-align);
align-items: var(--category-content-align);
color: var(--category-foreground);
padding: var(--category-content-padding);
}
.site-category .site-category-content .entry-category-name {
font-size: var(--categor-name-size);
font-weight: var(--category-name-weight);
margin-bottom: 0;
}
.site-category .site-category-content .entry-category-count {
font-size: var(--text-2xs);
font-weight: 500;
color: var(--category-muted-foreground);
}
/* Testimonial */
.site-testimonial {
--testimonial-primary: rgb(var(--colors-green-base));
--testimonial-secondary: rgb(var(--colors-white));
position: relative;
}
.site-testimonial.style-1 {
--testimonial-gap: 26px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.625rem;
}
@media screen and (min-width: 576.02px) {
.site-testimonial.style-1 {
gap: var(--testimonial-gap);
}
}
.site-testimonial.style-1 > * {
width: 100%;
}
@media screen and (min-width: 768.02px) {
.site-testimonial.style-1 > * {
width: auto;
}
.site-testimonial.style-1 > *.site-testimonial-profile {
--testimonial-profile-width: 240px;
width: var(--testimonial-profile-width);
}
.site-testimonial.style-1 > *.site-testimonial-inner {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
min-width: 0;
}
}
.site-testimonial .testimonial-score {
--rating-size: 26px;
--rating-icon-size: 20px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.125rem;
margin-bottom: 0.375rem;
}
.site-testimonial .testimonial-score > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: var(--rating-size);
height: var(--rating-size);
color: var(--testimonial-secondary);
background-color: var(--testimonial-primary);
border-radius: 0.125rem;
}
.site-testimonial .testimonial-score > * > * {
width: var(--rating-icon-size);
height: var(--rating-icon-size);
}
.site-testimonial .site-testimonial-profile {
text-align: center;
}
.site-testimonial .site-testimonial-profile .entry-score {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.625rem;
}
@media screen and (min-width: 768.02px) {
.site-testimonial .site-testimonial-profile .entry-score {
font-size: 1.375rem;
}
}
.site-testimonial .site-testimonial-profile .testimonial-rating {
color: rgb(var(--colors-gray-500));
margin-bottom: 1rem;
}
.site-testimonial .site-testimonial-profile .testimonial-rating span {
font-size: var(--text-xs);
}
.site-testimonial .site-testimonial-profile .testimonial-rating span strong {
text-decoration: underline;
text-underline-offset: 0.1875rem;
}
.site-testimonial .site-testimonial-profile .testimonial-brand {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-inline: 0.375rem;
}
.site-testimonial .site-testimonial-box .testimonial-box-header {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.625rem;
}
.site-testimonial .site-testimonial-box .testimonial-box-header .testimonial-score {
--rating-size: 16px;
--rating-icon-size: 12px;
gap: 0.0625rem;
margin-bottom: 0;
}
.site-testimonial .site-testimonial-box .testimonial-box-header .testimonial-status {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.25rem;
font-size: calc(var(--text-xs) - 1px);
font-weight: 500;
color: rgb(var(--colors-gray-500));
pointer-events: none;
}
.site-testimonial .site-testimonial-box .testimonial-box-header .testimonial-status svg, .site-testimonial .site-testimonial-box .testimonial-box-header .testimonial-status img {
width: calc(var(--text-xs) - 1px);
height: auto;
}
.site-testimonial .site-testimonial-box .testimonial-box-body {
margin-bottom: 0.625rem;
}
.site-testimonial .site-testimonial-box .testimonial-box-body .entry-testimonial-title {
--title-size: 15px;
font-size: var(--title-size);
margin-bottom: 0.125rem;
}
.site-testimonial .site-testimonial-box .testimonial-box-body p {
margin-bottom: 0;
}
.site-testimonial .site-testimonial-box .testimonial-user {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
font-size: var(--text-xs);
color: rgb(var(--colors-gray-400));
}
.site-testimonial .site-testimonial-box .testimonial-user p {
font-weight: 600;
color: rgb(var(--colors-gray-600));
margin-bottom: 0;
}
.site-testimonial .site-testimonial-box .testimonial-user span {
font-size: calc(var(--text-xs) - 1px);
}
@media screen and (min-width: 1024.02px) {
.site-testimonial .site-slider-wrapper .swiper-pagination {
display: none;
}
}
.site-testimonial .site-testimonial-message {
font-size: var(--text-xs);
font-weight: 500;
text-align: center;
color: rgb(var(--colors-gray-400));
margin-top: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.site-testimonial .site-testimonial-message {
text-align: start;
}
}
/* Countdown */
.site-countdown {
--countdown-expired-size: var(--text-sm);
--countdown-expired-color: rgb(var(--colors-black));
--countdown-message-size: var(--text-xs);
--countdown-message-color: rgb(var(--colors-gray-500));
--countdown-block-gap: 10px;
--countdown-gap: 4px;
--countdown-item-gap: 2px;
--countdown-text-size: var(--text-xs);
--countdown-text-size-lg: var(--text-xs);
--countdown-text-weight: 600;
--countdown-suffix-size: calc(var(--text-xs) - 1px);
--countdown-suffix-weight: 400;
--countdow-item-width: 38px;
--countdow-item-padding: 8px;
--countdown-item-radius: var(--radius-sm);
--countdown-item-background: rgb(var(--colors-white));
--countdown-item-foreground: rgb(var(--colors-black));
--countdown-item-muted: rgb(var(--colors-gray-400));
--countdown-item-border-width: 1px;
--countdown-item-border: rgb(var(--colors-gray-200));
--countdown-item-box-shadow: var(--shadow-2xs);
--countdown-time-width: auto;
--countdown-time-width-lg: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--countdown-block-gap);
}
.site-countdown .site-countdown-message {
font-size: var(--countdown-message-size);
color: var(--countdown-message-color);
margin-bottom: 0;
}
.site-countdown .countdown-expired {
display: none;
font-size: var(--countdown-expired-size);
font-weight: 500;
margin-block: 0.625rem;
color: var(--countdown-expired-color);
}
.site-countdown .site-countdown-block {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--countdown-gap);
}
.site-countdown .site-countdown-block .countdown-item {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: var(--countdown-item-gap);
width: var(--countdow-item-width);
padding-block: var(--countdow-item-padding);
border-radius: var(--countdown-item-radius);
border: var(--countdown-item-border-width) solid var(--countdown-item-border);
background-color: var(--countdown-item-background);
color: var(--countdown-item-foreground);
-webkit-box-shadow: var(--countdown-item-box-shadow);
box-shadow: var(--countdown-item-box-shadow);
line-height: 1;
}
.site-countdown .site-countdown-block .countdown-item .countdown-time {
font-size: var(--countdown-text-size);
font-weight: var(--countdown-text-weight);
width: var(--countdown-time-width);
color: currentColor;
}
@media screen and (min-width: 1024.02px) {
.site-countdown .site-countdown-block .countdown-item .countdown-time {
font-size: var(--countdown-text-size-lg);
width: var(--countdown-time-width-lg);
}
}
.site-countdown .site-countdown-block .countdown-item .countdown-text {
font-size: var(--countdown-suffix-size);
font-weight: var(--countdown-suffix-weight);
color: var(--countdown-item-muted);
}
.site-countdown:has(.countdown-finished) .countdown-expired {
display: block;
}
.site-countdown:has(.countdown-finished) .site-countdown-block, .site-countdown:has(.countdown-finished) .site-countdown-message {
display: none;
}
/* Social Media */
.site-social {
--social-size: 36px;
--social-font-size: 16px;
--social-icon-gap: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--social-icon-gap);
list-style: none;
margin: 0;
padding: 0;
}
.site-social a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--social-font-size);
text-decoration: none;
color: currentColor;
width: var(--social-size);
height: var(--social-size);
-webkit-transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.site-social a i::before {
margin: 0;
}
.site-social:has(a span) {
gap: 0.25rem;
}
.site-social:has(a span) a {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
padding-inline: 1.125rem;
}
.site-social:has(a span) span {
font-size: var(--text-2xs);
font-weight: 600;
text-transform: uppercase;
}
.site-social:has(a span) span.social-label {
-webkit-margin-end: auto;
margin-inline-end: auto;
-webkit-margin-start: 1rem;
margin-inline-start: 1rem;
}
.site-social.social-rounded-default a {
border-radius: var(--theme-radius);
}
.site-social.social-rounded-full a {
border-radius: 6.1875rem;
}
.site-social.color-white a {
color: rgb(var(--colors-white));
}
.site-social.color-black a {
color: rgb(var(--colors-black));
}
.site-social.color-social a.alipay {
color: rgb(0, 113, 252);
}
.site-social.color-social a.bluesky {
color: rgb(32, 139, 254);
}
.site-social.color-social a.amazon {
color: rgb(255, 153, 0);
}
.site-social.color-social a.amazon-pay {
color: rgb(255, 153, 0);
}
.site-social.color-social a.ebay {
color: rgb(229, 50, 56);
}
.site-social.color-social a.paypal {
color: rgb(0, 48, 135);
}
.site-social.color-social a.stripe {
color: rgb(81, 103, 252);
}
.site-social.color-social a.shopify {
color: rgb(150, 191, 72);
}
.site-social.color-social a.google {
color: rgb(234, 67, 53);
}
.site-social.color-social a.google-play {
color: rgb(234, 67, 53);
}
.site-social.color-social a.google-wallet {
color: rgb(234, 67, 53);
}
.site-social.color-social a.dhl {
color: rgb(255, 205, 0);
}
.site-social.color-social a.ups {
color: rgb(53, 28, 21);
}
.site-social.color-social a.fedex {
color: rgb(255, 0, 0);
}
.site-social.color-social a.gratipay {
color: rgb(0, 0, 0);
}
.site-social.color-social a.apple {
color: rgb(0, 0, 0);
}
.site-social.color-social a.apple-pay {
color: rgb(0, 0, 0);
}
.site-social.color-social a.px {
color: rgb(0, 0, 0);
}
.site-social.color-social a.instagram {
color: rgb(225, 48, 108);
}
.site-social.color-social a.instagram-fill {
color: rgb(225, 48, 108);
}
.site-social.color-social a.facebook {
color: rgb(24, 119, 242);
}
.site-social.color-social a.facebook-circle {
color: rgb(24, 119, 242);
}
.site-social.color-social a.facebook-f {
color: rgb(24, 119, 242);
}
.site-social.color-social a.twitter {
color: rgb(0, 0, 0);
}
.site-social.color-social a.x {
color: rgb(0, 0, 0);
}
.site-social.color-social a.linkedin {
color: rgb(0, 119, 181);
}
.site-social.color-social a.linkedin-in {
color: rgb(0, 119, 181);
}
.site-social.color-social a.pinterest {
color: rgb(189, 8, 28);
}
.site-social.color-social a.reddit {
color: rgb(255, 87, 34);
}
.site-social.color-social a.snapchat {
color: rgb(255, 255, 0);
}
.site-social.color-social a.tiktok {
color: rgb(0, 0, 0);
}
.site-social.color-social a.youtube {
color: rgb(255, 0, 0);
}
.site-social.color-social a.dailymotion {
color: rgb(0, 0, 0);
}
.site-social.color-social a.vimeo {
color: rgb(26, 183, 234);
}
.site-social.color-social a.whatsapp {
color: rgb(37, 211, 102);
}
.site-social.color-social a.behance {
color: rgb(0, 0, 0);
}
.site-social.color-social a.figma {
color: rgb(0, 0, 0);
}
.site-social.color-social a.soundcloud {
color: rgb(255, 88, 0);
}
.site-social.color-social a.slack {
color: rgb(224, 21, 99);
}
.site-social.color-social a.dribbble {
color: rgb(244, 86, 255);
}
.site-social.color-social a.medium {
color: rgb(0, 0, 0);
}
.site-social.color-social a.product-hunt {
color: rgb(255, 87, 34);
}
.site-social.color-social a.twitch {
color: rgb(100, 65, 164);
}
.site-social.color-social a.discord {
color: rgb(88, 101, 242);
}
.site-social.color-social a.skype {
color: rgb(0, 175, 240);
}
.site-social.color-social a.telegram {
color: rgb(0, 136, 204);
}
.site-social.color-social a.viber {
color: rgb(89, 38, 124);
}
.site-social.color-social a.vk {
color: rgb(69, 102, 142);
}
.site-social.color-social a.airbnb {
color: rgb(253, 92, 99);
}
.site-social.color-social a.odnoklassniki {
color: rgb(237, 129, 43);
}
.site-social.color-social a.mastodon {
color: rgb(97, 94, 248);
}
.site-social.color-social a.meetup {
color: rgb(224, 57, 62);
}
.site-social.color-social a.spotify {
color: rgb(30, 215, 96);
}
.site-social.color-social a.baidu {
color: rgb(33, 23, 214);
}
.site-social.color-social a.blogger {
color: rgb(237, 120, 0);
}
.site-social.color-social a.disqus {
color: rgb(45, 154, 247);
}
.site-social.color-social a.kick {
color: rgb(80, 244, 23);
}
.site-social.color-social a.visa {
color: rgb(20, 50, 198);
}
.site-social.color-social a.mastercard {
color: rgb(228, 0, 26);
}
.site-social.bg-white a {
background-color: rgb(var(--colors-white));
}
.site-social.bg-white a:hover {
opacity: 0.9;
}
.site-social.bg-white-light a {
background-color: rgba(var(--colors-white), 0.1);
}
.site-social.bg-white-light a:hover {
opacity: 1;
background-color: rgba(var(--colors-white), 0.2);
}
.site-social.bg-black a {
background-color: rgb(var(--colors-black));
}
.site-social.bg-black a:hover {
opacity: 0.9;
}
.site-social.bg-black-light a {
background-color: rgba(var(--colors-black), 0.1);
}
.site-social.bg-black-light a:hover {
opacity: 1;
background-color: rgba(var(--colors-white), 0.2);
}
.site-social.bg-gray a {
background-color: rgb(var(--colors-gray-100));
}
.site-social.bg-gray a:hover {
opacity: 0.9;
}
.site-social.bg-gray-light a {
background-color: rgba(var(--colors-gray-200), 0.3);
}
.site-social.bg-gray-light a:hover {
opacity: 1;
background-color: rgba(var(--colors-gray-200), 0.4);
}
.site-social.bg-social a.alipay {
background-color: rgb(0, 113, 252);
}
.site-social.bg-social a.alipay:hover {
opacity: 0.9;
}
.site-social.bg-social a.bluesky {
background-color: rgb(32, 139, 254);
}
.site-social.bg-social a.bluesky:hover {
opacity: 0.9;
}
.site-social.bg-social a.amazon {
background-color: rgb(255, 153, 0);
}
.site-social.bg-social a.amazon:hover {
opacity: 0.9;
}
.site-social.bg-social a.amazon-pay {
background-color: rgb(255, 153, 0);
}
.site-social.bg-social a.amazon-pay:hover {
opacity: 0.9;
}
.site-social.bg-social a.ebay {
background-color: rgb(229, 50, 56);
}
.site-social.bg-social a.ebay:hover {
opacity: 0.9;
}
.site-social.bg-social a.paypal {
background-color: rgb(0, 48, 135);
}
.site-social.bg-social a.paypal:hover {
opacity: 0.9;
}
.site-social.bg-social a.stripe {
background-color: rgb(81, 103, 252);
}
.site-social.bg-social a.stripe:hover {
opacity: 0.9;
}
.site-social.bg-social a.shopify {
background-color: rgb(150, 191, 72);
}
.site-social.bg-social a.shopify:hover {
opacity: 0.9;
}
.site-social.bg-social a.google {
background-color: rgb(234, 67, 53);
}
.site-social.bg-social a.google:hover {
opacity: 0.9;
}
.site-social.bg-social a.google-play {
background-color: rgb(234, 67, 53);
}
.site-social.bg-social a.google-play:hover {
opacity: 0.9;
}
.site-social.bg-social a.google-wallet {
background-color: rgb(234, 67, 53);
}
.site-social.bg-social a.google-wallet:hover {
opacity: 0.9;
}
.site-social.bg-social a.dhl {
background-color: rgb(255, 205, 0);
}
.site-social.bg-social a.dhl:hover {
opacity: 0.9;
}
.site-social.bg-social a.ups {
background-color: rgb(53, 28, 21);
}
.site-social.bg-social a.ups:hover {
opacity: 0.9;
}
.site-social.bg-social a.fedex {
background-color: rgb(255, 0, 0);
}
.site-social.bg-social a.fedex:hover {
opacity: 0.9;
}
.site-social.bg-social a.gratipay {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.gratipay:hover {
opacity: 0.9;
}
.site-social.bg-social a.apple {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.apple:hover {
opacity: 0.9;
}
.site-social.bg-social a.apple-pay {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.apple-pay:hover {
opacity: 0.9;
}
.site-social.bg-social a.px {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.px:hover {
opacity: 0.9;
}
.site-social.bg-social a.instagram {
background-color: rgb(225, 48, 108);
}
.site-social.bg-social a.instagram:hover {
opacity: 0.9;
}
.site-social.bg-social a.instagram-fill {
background-color: rgb(225, 48, 108);
}
.site-social.bg-social a.instagram-fill:hover {
opacity: 0.9;
}
.site-social.bg-social a.facebook {
background-color: rgb(24, 119, 242);
}
.site-social.bg-social a.facebook:hover {
opacity: 0.9;
}
.site-social.bg-social a.facebook-circle {
background-color: rgb(24, 119, 242);
}
.site-social.bg-social a.facebook-circle:hover {
opacity: 0.9;
}
.site-social.bg-social a.facebook-f {
background-color: rgb(24, 119, 242);
}
.site-social.bg-social a.facebook-f:hover {
opacity: 0.9;
}
.site-social.bg-social a.twitter {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.twitter:hover {
opacity: 0.9;
}
.site-social.bg-social a.x {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.x:hover {
opacity: 0.9;
}
.site-social.bg-social a.linkedin {
background-color: rgb(0, 119, 181);
}
.site-social.bg-social a.linkedin:hover {
opacity: 0.9;
}
.site-social.bg-social a.linkedin-in {
background-color: rgb(0, 119, 181);
}
.site-social.bg-social a.linkedin-in:hover {
opacity: 0.9;
}
.site-social.bg-social a.pinterest {
background-color: rgb(189, 8, 28);
}
.site-social.bg-social a.pinterest:hover {
opacity: 0.9;
}
.site-social.bg-social a.reddit {
background-color: rgb(255, 87, 34);
}
.site-social.bg-social a.reddit:hover {
opacity: 0.9;
}
.site-social.bg-social a.snapchat {
background-color: rgb(255, 255, 0);
}
.site-social.bg-social a.snapchat:hover {
opacity: 0.9;
}
.site-social.bg-social a.tiktok {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.tiktok:hover {
opacity: 0.9;
}
.site-social.bg-social a.youtube {
background-color: rgb(255, 0, 0);
}
.site-social.bg-social a.youtube:hover {
opacity: 0.9;
}
.site-social.bg-social a.dailymotion {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.dailymotion:hover {
opacity: 0.9;
}
.site-social.bg-social a.vimeo {
background-color: rgb(26, 183, 234);
}
.site-social.bg-social a.vimeo:hover {
opacity: 0.9;
}
.site-social.bg-social a.whatsapp {
background-color: rgb(37, 211, 102);
}
.site-social.bg-social a.whatsapp:hover {
opacity: 0.9;
}
.site-social.bg-social a.behance {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.behance:hover {
opacity: 0.9;
}
.site-social.bg-social a.figma {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.figma:hover {
opacity: 0.9;
}
.site-social.bg-social a.soundcloud {
background-color: rgb(255, 88, 0);
}
.site-social.bg-social a.soundcloud:hover {
opacity: 0.9;
}
.site-social.bg-social a.slack {
background-color: rgb(224, 21, 99);
}
.site-social.bg-social a.slack:hover {
opacity: 0.9;
}
.site-social.bg-social a.dribbble {
background-color: rgb(244, 86, 255);
}
.site-social.bg-social a.dribbble:hover {
opacity: 0.9;
}
.site-social.bg-social a.medium {
background-color: rgb(0, 0, 0);
}
.site-social.bg-social a.medium:hover {
opacity: 0.9;
}
.site-social.bg-social a.product-hunt {
background-color: rgb(255, 87, 34);
}
.site-social.bg-social a.product-hunt:hover {
opacity: 0.9;
}
.site-social.bg-social a.twitch {
background-color: rgb(100, 65, 164);
}
.site-social.bg-social a.twitch:hover {
opacity: 0.9;
}
.site-social.bg-social a.discord {
background-color: rgb(88, 101, 242);
}
.site-social.bg-social a.discord:hover {
opacity: 0.9;
}
.site-social.bg-social a.skype {
background-color: rgb(0, 175, 240);
}
.site-social.bg-social a.skype:hover {
opacity: 0.9;
}
.site-social.bg-social a.telegram {
background-color: rgb(0, 136, 204);
}
.site-social.bg-social a.telegram:hover {
opacity: 0.9;
}
.site-social.bg-social a.viber {
background-color: rgb(89, 38, 124);
}
.site-social.bg-social a.viber:hover {
opacity: 0.9;
}
.site-social.bg-social a.vk {
background-color: rgb(69, 102, 142);
}
.site-social.bg-social a.vk:hover {
opacity: 0.9;
}
.site-social.bg-social a.airbnb {
background-color: rgb(253, 92, 99);
}
.site-social.bg-social a.airbnb:hover {
opacity: 0.9;
}
.site-social.bg-social a.odnoklassniki {
background-color: rgb(237, 129, 43);
}
.site-social.bg-social a.odnoklassniki:hover {
opacity: 0.9;
}
.site-social.bg-social a.mastodon {
background-color: rgb(97, 94, 248);
}
.site-social.bg-social a.mastodon:hover {
opacity: 0.9;
}
.site-social.bg-social a.meetup {
background-color: rgb(224, 57, 62);
}
.site-social.bg-social a.meetup:hover {
opacity: 0.9;
}
.site-social.bg-social a.spotify {
background-color: rgb(30, 215, 96);
}
.site-social.bg-social a.spotify:hover {
opacity: 0.9;
}
.site-social.bg-social a.baidu {
background-color: rgb(33, 23, 214);
}
.site-social.bg-social a.baidu:hover {
opacity: 0.9;
}
.site-social.bg-social a.blogger {
background-color: rgb(237, 120, 0);
}
.site-social.bg-social a.blogger:hover {
opacity: 0.9;
}
.site-social.bg-social a.disqus {
background-color: rgb(45, 154, 247);
}
.site-social.bg-social a.disqus:hover {
opacity: 0.9;
}
.site-social.bg-social a.kick {
background-color: rgb(80, 244, 23);
}
.site-social.bg-social a.kick:hover {
opacity: 0.9;
}
.site-social.bg-social a.visa {
background-color: rgb(20, 50, 198);
}
.site-social.bg-social a.visa:hover {
opacity: 0.9;
}
.site-social.bg-social a.mastercard {
background-color: rgb(228, 0, 26);
}
.site-social.bg-social a.mastercard:hover {
opacity: 0.9;
}
.site-social.bg-social-light a.alipay {
background-color: rgba(0, 113, 252, 0.1);
}
.site-social.bg-social-light a.alipay:hover {
background-color: rgba(0, 113, 252, 0.2);
}
.site-social.bg-social-light a.bluesky {
background-color: rgba(32, 139, 254, 0.1);
}
.site-social.bg-social-light a.bluesky:hover {
background-color: rgba(32, 139, 254, 0.2);
}
.site-social.bg-social-light a.amazon {
background-color: rgba(255, 153, 0, 0.1);
}
.site-social.bg-social-light a.amazon:hover {
background-color: rgba(255, 153, 0, 0.2);
}
.site-social.bg-social-light a.amazon-pay {
background-color: rgba(255, 153, 0, 0.1);
}
.site-social.bg-social-light a.amazon-pay:hover {
background-color: rgba(255, 153, 0, 0.2);
}
.site-social.bg-social-light a.ebay {
background-color: rgba(229, 50, 56, 0.1);
}
.site-social.bg-social-light a.ebay:hover {
background-color: rgba(229, 50, 56, 0.2);
}
.site-social.bg-social-light a.paypal {
background-color: rgba(0, 48, 135, 0.1);
}
.site-social.bg-social-light a.paypal:hover {
background-color: rgba(0, 48, 135, 0.2);
}
.site-social.bg-social-light a.stripe {
background-color: rgba(81, 103, 252, 0.1);
}
.site-social.bg-social-light a.stripe:hover {
background-color: rgba(81, 103, 252, 0.2);
}
.site-social.bg-social-light a.shopify {
background-color: rgba(150, 191, 72, 0.1);
}
.site-social.bg-social-light a.shopify:hover {
background-color: rgba(150, 191, 72, 0.2);
}
.site-social.bg-social-light a.google {
background-color: rgba(234, 67, 53, 0.1);
}
.site-social.bg-social-light a.google:hover {
background-color: rgba(234, 67, 53, 0.2);
}
.site-social.bg-social-light a.google-play {
background-color: rgba(234, 67, 53, 0.1);
}
.site-social.bg-social-light a.google-play:hover {
background-color: rgba(234, 67, 53, 0.2);
}
.site-social.bg-social-light a.google-wallet {
background-color: rgba(234, 67, 53, 0.1);
}
.site-social.bg-social-light a.google-wallet:hover {
background-color: rgba(234, 67, 53, 0.2);
}
.site-social.bg-social-light a.dhl {
background-color: rgba(255, 205, 0, 0.1);
}
.site-social.bg-social-light a.dhl:hover {
background-color: rgba(255, 205, 0, 0.2);
}
.site-social.bg-social-light a.ups {
background-color: rgba(53, 28, 21, 0.1);
}
.site-social.bg-social-light a.ups:hover {
background-color: rgba(53, 28, 21, 0.2);
}
.site-social.bg-social-light a.fedex {
background-color: rgba(255, 0, 0, 0.1);
}
.site-social.bg-social-light a.fedex:hover {
background-color: rgba(255, 0, 0, 0.2);
}
.site-social.bg-social-light a.gratipay {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.gratipay:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.apple {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.apple:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.apple-pay {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.apple-pay:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.px {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.px:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.instagram {
background-color: rgba(225, 48, 108, 0.1);
}
.site-social.bg-social-light a.instagram:hover {
background-color: rgba(225, 48, 108, 0.2);
}
.site-social.bg-social-light a.instagram-fill {
background-color: rgba(225, 48, 108, 0.1);
}
.site-social.bg-social-light a.instagram-fill:hover {
background-color: rgba(225, 48, 108, 0.2);
}
.site-social.bg-social-light a.facebook {
background-color: rgba(24, 119, 242, 0.1);
}
.site-social.bg-social-light a.facebook:hover {
background-color: rgba(24, 119, 242, 0.2);
}
.site-social.bg-social-light a.facebook-circle {
background-color: rgba(24, 119, 242, 0.1);
}
.site-social.bg-social-light a.facebook-circle:hover {
background-color: rgba(24, 119, 242, 0.2);
}
.site-social.bg-social-light a.facebook-f {
background-color: rgba(24, 119, 242, 0.1);
}
.site-social.bg-social-light a.facebook-f:hover {
background-color: rgba(24, 119, 242, 0.2);
}
.site-social.bg-social-light a.twitter {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.twitter:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.x {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.x:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.linkedin {
background-color: rgba(0, 119, 181, 0.1);
}
.site-social.bg-social-light a.linkedin:hover {
background-color: rgba(0, 119, 181, 0.2);
}
.site-social.bg-social-light a.linkedin-in {
background-color: rgba(0, 119, 181, 0.1);
}
.site-social.bg-social-light a.linkedin-in:hover {
background-color: rgba(0, 119, 181, 0.2);
}
.site-social.bg-social-light a.pinterest {
background-color: rgba(189, 8, 28, 0.1);
}
.site-social.bg-social-light a.pinterest:hover {
background-color: rgba(189, 8, 28, 0.2);
}
.site-social.bg-social-light a.reddit {
background-color: rgba(255, 87, 34, 0.1);
}
.site-social.bg-social-light a.reddit:hover {
background-color: rgba(255, 87, 34, 0.2);
}
.site-social.bg-social-light a.snapchat {
background-color: rgba(255, 255, 0, 0.1);
}
.site-social.bg-social-light a.snapchat:hover {
background-color: rgba(255, 255, 0, 0.2);
}
.site-social.bg-social-light a.tiktok {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.tiktok:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.youtube {
background-color: rgba(255, 0, 0, 0.1);
}
.site-social.bg-social-light a.youtube:hover {
background-color: rgba(255, 0, 0, 0.2);
}
.site-social.bg-social-light a.dailymotion {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.dailymotion:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.vimeo {
background-color: rgba(26, 183, 234, 0.1);
}
.site-social.bg-social-light a.vimeo:hover {
background-color: rgba(26, 183, 234, 0.2);
}
.site-social.bg-social-light a.whatsapp {
background-color: rgba(37, 211, 102, 0.1);
}
.site-social.bg-social-light a.whatsapp:hover {
background-color: rgba(37, 211, 102, 0.2);
}
.site-social.bg-social-light a.behance {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.behance:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.figma {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.figma:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.soundcloud {
background-color: rgba(255, 88, 0, 0.1);
}
.site-social.bg-social-light a.soundcloud:hover {
background-color: rgba(255, 88, 0, 0.2);
}
.site-social.bg-social-light a.slack {
background-color: rgba(224, 21, 99, 0.1);
}
.site-social.bg-social-light a.slack:hover {
background-color: rgba(224, 21, 99, 0.2);
}
.site-social.bg-social-light a.dribbble {
background-color: rgba(244, 86, 255, 0.1);
}
.site-social.bg-social-light a.dribbble:hover {
background-color: rgba(244, 86, 255, 0.2);
}
.site-social.bg-social-light a.medium {
background-color: rgba(0, 0, 0, 0.1);
}
.site-social.bg-social-light a.medium:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.site-social.bg-social-light a.product-hunt {
background-color: rgba(255, 87, 34, 0.1);
}
.site-social.bg-social-light a.product-hunt:hover {
background-color: rgba(255, 87, 34, 0.2);
}
.site-social.bg-social-light a.twitch {
background-color: rgba(100, 65, 164, 0.1);
}
.site-social.bg-social-light a.twitch:hover {
background-color: rgba(100, 65, 164, 0.2);
}
.site-social.bg-social-light a.discord {
background-color: rgba(88, 101, 242, 0.1);
}
.site-social.bg-social-light a.discord:hover {
background-color: rgba(88, 101, 242, 0.2);
}
.site-social.bg-social-light a.skype {
background-color: rgba(0, 175, 240, 0.1);
}
.site-social.bg-social-light a.skype:hover {
background-color: rgba(0, 175, 240, 0.2);
}
.site-social.bg-social-light a.telegram {
background-color: rgba(0, 136, 204, 0.1);
}
.site-social.bg-social-light a.telegram:hover {
background-color: rgba(0, 136, 204, 0.2);
}
.site-social.bg-social-light a.viber {
background-color: rgba(89, 38, 124, 0.1);
}
.site-social.bg-social-light a.viber:hover {
background-color: rgba(89, 38, 124, 0.2);
}
.site-social.bg-social-light a.vk {
background-color: rgba(69, 102, 142, 0.1);
}
.site-social.bg-social-light a.vk:hover {
background-color: rgba(69, 102, 142, 0.2);
}
.site-social.bg-social-light a.airbnb {
background-color: rgba(253, 92, 99, 0.1);
}
.site-social.bg-social-light a.airbnb:hover {
background-color: rgba(253, 92, 99, 0.2);
}
.site-social.bg-social-light a.odnoklassniki {
background-color: rgba(237, 129, 43, 0.1);
}
.site-social.bg-social-light a.odnoklassniki:hover {
background-color: rgba(237, 129, 43, 0.2);
}
.site-social.bg-social-light a.mastodon {
background-color: rgba(97, 94, 248, 0.1);
}
.site-social.bg-social-light a.mastodon:hover {
background-color: rgba(97, 94, 248, 0.2);
}
.site-social.bg-social-light a.meetup {
background-color: rgba(224, 57, 62, 0.1);
}
.site-social.bg-social-light a.meetup:hover {
background-color: rgba(224, 57, 62, 0.2);
}
.site-social.bg-social-light a.spotify {
background-color: rgba(30, 215, 96, 0.1);
}
.site-social.bg-social-light a.spotify:hover {
background-color: rgba(30, 215, 96, 0.2);
}
.site-social.bg-social-light a.baidu {
background-color: rgba(33, 23, 214, 0.1);
}
.site-social.bg-social-light a.baidu:hover {
background-color: rgba(33, 23, 214, 0.2);
}
.site-social.bg-social-light a.blogger {
background-color: rgba(237, 120, 0, 0.1);
}
.site-social.bg-social-light a.blogger:hover {
background-color: rgba(237, 120, 0, 0.2);
}
.site-social.bg-social-light a.disqus {
background-color: rgba(45, 154, 247, 0.1);
}
.site-social.bg-social-light a.disqus:hover {
background-color: rgba(45, 154, 247, 0.2);
}
.site-social.bg-social-light a.kick {
background-color: rgba(80, 244, 23, 0.1);
}
.site-social.bg-social-light a.kick:hover {
background-color: rgba(80, 244, 23, 0.2);
}
.site-social.bg-social-light a.visa {
background-color: rgba(20, 50, 198, 0.1);
}
.site-social.bg-social-light a.visa:hover {
background-color: rgba(20, 50, 198, 0.2);
}
.site-social.bg-social-light a.mastercard {
background-color: rgba(228, 0, 26, 0.1);
}
.site-social.bg-social-light a.mastercard:hover {
background-color: rgba(228, 0, 26, 0.2);
}
.site-social.bordered a {
border: 1px solid rgb(var(--colors-gray-200));
}
/* Product Grid */
.site-product-grid {
--grid-banner-gap: 0;
--grid-banner-gap-sm: 0;
--grid-banner-gap-lg: 0;
--grid-banner-column-flex-sm: none;
--grid-banner-column-flex-lg: none;
--grid-banner-column-width-sm: 100%;
--grid-banner-column-width-lg: 300px;
--grid-products-column-width-sm: 100%;
--grid-products-column-width-lg: auto;
--grid-products-column-flex-sm: none;
--grid-products-column-flex-lg: 1 0 0%;
position: relative;
}
.site-product-grid .product-grid-inner {
gap: var(--grid-banner-gap);
}
@media screen and (min-width: 576.02px) {
.site-product-grid .product-grid-inner {
gap: var(--grid-banner-gap-sm);
}
}
@media screen and (min-width: 1024.02px) {
.site-product-grid .product-grid-inner {
gap: var(--grid-banner-gap-lg);
}
}
.site-product-grid .column {
width: 100%;
}
@media screen and (min-width: 576.02px) {
.site-product-grid .column.column-banner {
-webkit-box-flex: var(--grid-banner-column-flex-sm);
-ms-flex: var(--grid-banner-column-flex-sm);
flex: var(--grid-banner-column-flex-sm);
width: var(--grid-banner-column-width-sm);
}
.site-product-grid .column.column-products {
-webkit-box-flex: var(--grid-products-column-flex-sm);
-ms-flex: var(--grid-products-column-flex-sm);
flex: var(--grid-products-column-flex-sm);
width: var(--grid-products-column-width-sm);
}
}
@media screen and (min-width: 1024.02px) {
.site-product-grid .column.column-banner {
-webkit-box-flex: var(--grid-banner-column-flex-lg);
-ms-flex: var(--grid-banner-column-flex-lg);
flex: var(--grid-banner-column-flex-lg);
width: var(--grid-banner-column-width-lg);
}
.site-product-grid .column.column-products {
-webkit-box-flex: var(--grid-products-column-flex-lg);
-ms-flex: var(--grid-products-column-flex-lg);
flex: var(--grid-products-column-flex-lg);
width: var(--grid-products-column-width-lg);
}
}
.site-product-grid .product:has(.product-hidden-content) {
--product-hidden-content-shadow: var(--shadow-xl);
}
/*------------------------------------
Form
------------------------------------*/
/* Input */
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea, select, .form-control, .form-select, .select2-container .select2-selection {
--input-background: rgb(var(--colors-white));
--input-background-hover: rgb(var(--colors-white));
--input-background-active: rgb(var(--colors-white));
--input-border: rgb(var(--colors-gray-300));
--input-border-hover: rgba(var(--colors-gray-400), 0.6);
--input-border-active: rgb(var(--colors-gray-400));
--input-border-width: 1px;
--input-outline: transparent;
--input-outline-active: transparent;
--input-outline-width: 2px;
--input-outline-offset: 1px;
--input-shadow: var(--shadow-xs);
--input-shadow-hover: var(--shadow-xs);
--input-shadow-active: var(--shadow-xs);
--input-placeholder: rgb(var(--colors-gray-400));
--input-placeholder-active: rgb(var(--colors-gray-300));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: var(--form-input-font);
font-size: var(--form-input-font-size-base);
font-weight: var(--form-input-font-weight);
letter-spacing: var(--form-input-letter-spacing);
text-transform: var(--form-input-text-transform);
width: 100%;
-webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
}
input[type=color]:not(.style-none), input[type=date]:not(.style-none), input[type=datetime-local]:not(.style-none), input[type=datetime]:not(.style-none), input[type=email]:not(.style-none), input[type=month]:not(.style-none), input[type=number]:not(.style-none), input[type=password]:not(.style-none), input[type=search]:not(.style-none), input[type=tel]:not(.style-none), input[type=text]:not(.style-none), input[type=time]:not(.style-none), input[type=url]:not(.style-none), input[type=week]:not(.style-none), textarea:not(.style-none), select:not(.style-none), .form-control:not(.style-none), .form-select:not(.style-none), .select2-container .select2-selection:not(.style-none) {
height: var(--form-input-size-base);
background-color: var(--input-background);
border: var(--input-border-width) solid var(--input-border);
-webkit-box-shadow: var(--input-shadow);
box-shadow: var(--input-shadow);
outline: var(--input-outline-width) solid var(--input-outline);
outline-offset: var(--input-outline-offset);
border-radius: var(--theme-radius);
padding-block: 0.25rem;
padding-inline: calc(var(--form-input-size-base) / 3);
}
input[type=color]:not(.style-none)::-webkit-input-placeholder, input[type=date]:not(.style-none)::-webkit-input-placeholder, input[type=datetime-local]:not(.style-none)::-webkit-input-placeholder, input[type=datetime]:not(.style-none)::-webkit-input-placeholder, input[type=email]:not(.style-none)::-webkit-input-placeholder, input[type=month]:not(.style-none)::-webkit-input-placeholder, input[type=number]:not(.style-none)::-webkit-input-placeholder, input[type=password]:not(.style-none)::-webkit-input-placeholder, input[type=search]:not(.style-none)::-webkit-input-placeholder, input[type=tel]:not(.style-none)::-webkit-input-placeholder, input[type=text]:not(.style-none)::-webkit-input-placeholder, input[type=time]:not(.style-none)::-webkit-input-placeholder, input[type=url]:not(.style-none)::-webkit-input-placeholder, input[type=week]:not(.style-none)::-webkit-input-placeholder, textarea:not(.style-none)::-webkit-input-placeholder, select:not(.style-none)::-webkit-input-placeholder, .form-control:not(.style-none)::-webkit-input-placeholder, .form-select:not(.style-none)::-webkit-input-placeholder, .select2-container .select2-selection:not(.style-none)::-webkit-input-placeholder {
font-weight: 400;
color: var(--input-placeholder);
}
input[type=color]:not(.style-none)::-moz-placeholder, input[type=date]:not(.style-none)::-moz-placeholder, input[type=datetime-local]:not(.style-none)::-moz-placeholder, input[type=datetime]:not(.style-none)::-moz-placeholder, input[type=email]:not(.style-none)::-moz-placeholder, input[type=month]:not(.style-none)::-moz-placeholder, input[type=number]:not(.style-none)::-moz-placeholder, input[type=password]:not(.style-none)::-moz-placeholder, input[type=search]:not(.style-none)::-moz-placeholder, input[type=tel]:not(.style-none)::-moz-placeholder, input[type=text]:not(.style-none)::-moz-placeholder, input[type=time]:not(.style-none)::-moz-placeholder, input[type=url]:not(.style-none)::-moz-placeholder, input[type=week]:not(.style-none)::-moz-placeholder, textarea:not(.style-none)::-moz-placeholder, select:not(.style-none)::-moz-placeholder, .form-control:not(.style-none)::-moz-placeholder, .form-select:not(.style-none)::-moz-placeholder, .select2-container .select2-selection:not(.style-none)::-moz-placeholder {
font-weight: 400;
color: var(--input-placeholder);
}
input[type=color]:not(.style-none):-ms-input-placeholder, input[type=date]:not(.style-none):-ms-input-placeholder, input[type=datetime-local]:not(.style-none):-ms-input-placeholder, input[type=datetime]:not(.style-none):-ms-input-placeholder, input[type=email]:not(.style-none):-ms-input-placeholder, input[type=month]:not(.style-none):-ms-input-placeholder, input[type=number]:not(.style-none):-ms-input-placeholder, input[type=password]:not(.style-none):-ms-input-placeholder, input[type=search]:not(.style-none):-ms-input-placeholder, input[type=tel]:not(.style-none):-ms-input-placeholder, input[type=text]:not(.style-none):-ms-input-placeholder, input[type=time]:not(.style-none):-ms-input-placeholder, input[type=url]:not(.style-none):-ms-input-placeholder, input[type=week]:not(.style-none):-ms-input-placeholder, textarea:not(.style-none):-ms-input-placeholder, select:not(.style-none):-ms-input-placeholder, .form-control:not(.style-none):-ms-input-placeholder, .form-select:not(.style-none):-ms-input-placeholder, .select2-container .select2-selection:not(.style-none):-ms-input-placeholder {
font-weight: 400;
color: var(--input-placeholder);
}
input[type=color]:not(.style-none)::-ms-input-placeholder, input[type=date]:not(.style-none)::-ms-input-placeholder, input[type=datetime-local]:not(.style-none)::-ms-input-placeholder, input[type=datetime]:not(.style-none)::-ms-input-placeholder, input[type=email]:not(.style-none)::-ms-input-placeholder, input[type=month]:not(.style-none)::-ms-input-placeholder, input[type=number]:not(.style-none)::-ms-input-placeholder, input[type=password]:not(.style-none)::-ms-input-placeholder, input[type=search]:not(.style-none)::-ms-input-placeholder, input[type=tel]:not(.style-none)::-ms-input-placeholder, input[type=text]:not(.style-none)::-ms-input-placeholder, input[type=time]:not(.style-none)::-ms-input-placeholder, input[type=url]:not(.style-none)::-ms-input-placeholder, input[type=week]:not(.style-none)::-ms-input-placeholder, textarea:not(.style-none)::-ms-input-placeholder, select:not(.style-none)::-ms-input-placeholder, .form-control:not(.style-none)::-ms-input-placeholder, .form-select:not(.style-none)::-ms-input-placeholder, .select2-container .select2-selection:not(.style-none)::-ms-input-placeholder {
font-weight: 400;
color: var(--input-placeholder);
}
input[type=color]:not(.style-none)::placeholder, input[type=date]:not(.style-none)::placeholder, input[type=datetime-local]:not(.style-none)::placeholder, input[type=datetime]:not(.style-none)::placeholder, input[type=email]:not(.style-none)::placeholder, input[type=month]:not(.style-none)::placeholder, input[type=number]:not(.style-none)::placeholder, input[type=password]:not(.style-none)::placeholder, input[type=search]:not(.style-none)::placeholder, input[type=tel]:not(.style-none)::placeholder, input[type=text]:not(.style-none)::placeholder, input[type=time]:not(.style-none)::placeholder, input[type=url]:not(.style-none)::placeholder, input[type=week]:not(.style-none)::placeholder, textarea:not(.style-none)::placeholder, select:not(.style-none)::placeholder, .form-control:not(.style-none)::placeholder, .form-select:not(.style-none)::placeholder, .select2-container .select2-selection:not(.style-none)::placeholder {
font-weight: 400;
color: var(--input-placeholder);
}
input[type=color]:not(.style-none).rounded-full, input[type=date]:not(.style-none).rounded-full, input[type=datetime-local]:not(.style-none).rounded-full, input[type=datetime]:not(.style-none).rounded-full, input[type=email]:not(.style-none).rounded-full, input[type=month]:not(.style-none).rounded-full, input[type=number]:not(.style-none).rounded-full, input[type=password]:not(.style-none).rounded-full, input[type=search]:not(.style-none).rounded-full, input[type=tel]:not(.style-none).rounded-full, input[type=text]:not(.style-none).rounded-full, input[type=time]:not(.style-none).rounded-full, input[type=url]:not(.style-none).rounded-full, input[type=week]:not(.style-none).rounded-full, textarea:not(.style-none).rounded-full, select:not(.style-none).rounded-full, .form-control:not(.style-none).rounded-full, .form-select:not(.style-none).rounded-full, .select2-container .select2-selection:not(.style-none).rounded-full {
border-radius: 62.4375rem;
}
input[type=color]:not(.style-none).rounded-none, input[type=date]:not(.style-none).rounded-none, input[type=datetime-local]:not(.style-none).rounded-none, input[type=datetime]:not(.style-none).rounded-none, input[type=email]:not(.style-none).rounded-none, input[type=month]:not(.style-none).rounded-none, input[type=number]:not(.style-none).rounded-none, input[type=password]:not(.style-none).rounded-none, input[type=search]:not(.style-none).rounded-none, input[type=tel]:not(.style-none).rounded-none, input[type=text]:not(.style-none).rounded-none, input[type=time]:not(.style-none).rounded-none, input[type=url]:not(.style-none).rounded-none, input[type=week]:not(.style-none).rounded-none, textarea:not(.style-none).rounded-none, select:not(.style-none).rounded-none, .form-control:not(.style-none).rounded-none, .form-select:not(.style-none).rounded-none, .select2-container .select2-selection:not(.style-none).rounded-none {
border-radius: 0;
}
@media (hover: hover) and (pointer: fine) {
input[type=color]:not(.style-none):hover, input[type=date]:not(.style-none):hover, input[type=datetime-local]:not(.style-none):hover, input[type=datetime]:not(.style-none):hover, input[type=email]:not(.style-none):hover, input[type=month]:not(.style-none):hover, input[type=number]:not(.style-none):hover, input[type=password]:not(.style-none):hover, input[type=search]:not(.style-none):hover, input[type=tel]:not(.style-none):hover, input[type=text]:not(.style-none):hover, input[type=time]:not(.style-none):hover, input[type=url]:not(.style-none):hover, input[type=week]:not(.style-none):hover, textarea:not(.style-none):hover, select:not(.style-none):hover, .form-control:not(.style-none):hover, .form-select:not(.style-none):hover, .select2-container .select2-selection:not(.style-none):hover {
background-color: var(--input-background-hover);
border-color: var(--input-border-hover);
-webkit-box-shadow: var(--input-shadow-hover);
box-shadow: var(--input-shadow-hover);
}
}
input[type=color]:not(.style-none):focus, input[type=color]:not(.style-none):active, input[type=date]:not(.style-none):focus, input[type=date]:not(.style-none):active, input[type=datetime-local]:not(.style-none):focus, input[type=datetime-local]:not(.style-none):active, input[type=datetime]:not(.style-none):focus, input[type=datetime]:not(.style-none):active, input[type=email]:not(.style-none):focus, input[type=email]:not(.style-none):active, input[type=month]:not(.style-none):focus, input[type=month]:not(.style-none):active, input[type=number]:not(.style-none):focus, input[type=number]:not(.style-none):active, input[type=password]:not(.style-none):focus, input[type=password]:not(.style-none):active, input[type=search]:not(.style-none):focus, input[type=search]:not(.style-none):active, input[type=tel]:not(.style-none):focus, input[type=tel]:not(.style-none):active, input[type=text]:not(.style-none):focus, input[type=text]:not(.style-none):active, input[type=time]:not(.style-none):focus, input[type=time]:not(.style-none):active, input[type=url]:not(.style-none):focus, input[type=url]:not(.style-none):active, input[type=week]:not(.style-none):focus, input[type=week]:not(.style-none):active, textarea:not(.style-none):focus, textarea:not(.style-none):active, select:not(.style-none):focus, select:not(.style-none):active, .form-control:not(.style-none):focus, .form-control:not(.style-none):active, .form-select:not(.style-none):focus, .form-select:not(.style-none):active, .select2-container .select2-selection:not(.style-none):focus, .select2-container .select2-selection:not(.style-none):active {
background-color: var(--input-background-active);
border-color: var(--input-border-active);
-webkit-box-shadow: var(--input-shadow-active);
box-shadow: var(--input-shadow-active);
outline-color: var(--input-outline-active);
}
input[type=color]:not(.style-none):focus::-webkit-input-placeholder, input[type=color]:not(.style-none):active::-webkit-input-placeholder, input[type=date]:not(.style-none):focus::-webkit-input-placeholder, input[type=date]:not(.style-none):active::-webkit-input-placeholder, input[type=datetime-local]:not(.style-none):focus::-webkit-input-placeholder, input[type=datetime-local]:not(.style-none):active::-webkit-input-placeholder, input[type=datetime]:not(.style-none):focus::-webkit-input-placeholder, input[type=datetime]:not(.style-none):active::-webkit-input-placeholder, input[type=email]:not(.style-none):focus::-webkit-input-placeholder, input[type=email]:not(.style-none):active::-webkit-input-placeholder, input[type=month]:not(.style-none):focus::-webkit-input-placeholder, input[type=month]:not(.style-none):active::-webkit-input-placeholder, input[type=number]:not(.style-none):focus::-webkit-input-placeholder, input[type=number]:not(.style-none):active::-webkit-input-placeholder, input[type=password]:not(.style-none):focus::-webkit-input-placeholder, input[type=password]:not(.style-none):active::-webkit-input-placeholder, input[type=search]:not(.style-none):focus::-webkit-input-placeholder, input[type=search]:not(.style-none):active::-webkit-input-placeholder, input[type=tel]:not(.style-none):focus::-webkit-input-placeholder, input[type=tel]:not(.style-none):active::-webkit-input-placeholder, input[type=text]:not(.style-none):focus::-webkit-input-placeholder, input[type=text]:not(.style-none):active::-webkit-input-placeholder, input[type=time]:not(.style-none):focus::-webkit-input-placeholder, input[type=time]:not(.style-none):active::-webkit-input-placeholder, input[type=url]:not(.style-none):focus::-webkit-input-placeholder, input[type=url]:not(.style-none):active::-webkit-input-placeholder, input[type=week]:not(.style-none):focus::-webkit-input-placeholder, input[type=week]:not(.style-none):active::-webkit-input-placeholder, textarea:not(.style-none):focus::-webkit-input-placeholder, textarea:not(.style-none):active::-webkit-input-placeholder, select:not(.style-none):focus::-webkit-input-placeholder, select:not(.style-none):active::-webkit-input-placeholder, .form-control:not(.style-none):focus::-webkit-input-placeholder, .form-control:not(.style-none):active::-webkit-input-placeholder, .form-select:not(.style-none):focus::-webkit-input-placeholder, .form-select:not(.style-none):active::-webkit-input-placeholder, .select2-container .select2-selection:not(.style-none):focus::-webkit-input-placeholder, .select2-container .select2-selection:not(.style-none):active::-webkit-input-placeholder {
color: var(--input-placeholder-active);
}
input[type=color]:not(.style-none):focus::-moz-placeholder, input[type=color]:not(.style-none):active::-moz-placeholder, input[type=date]:not(.style-none):focus::-moz-placeholder, input[type=date]:not(.style-none):active::-moz-placeholder, input[type=datetime-local]:not(.style-none):focus::-moz-placeholder, input[type=datetime-local]:not(.style-none):active::-moz-placeholder, input[type=datetime]:not(.style-none):focus::-moz-placeholder, input[type=datetime]:not(.style-none):active::-moz-placeholder, input[type=email]:not(.style-none):focus::-moz-placeholder, input[type=email]:not(.style-none):active::-moz-placeholder, input[type=month]:not(.style-none):focus::-moz-placeholder, input[type=month]:not(.style-none):active::-moz-placeholder, input[type=number]:not(.style-none):focus::-moz-placeholder, input[type=number]:not(.style-none):active::-moz-placeholder, input[type=password]:not(.style-none):focus::-moz-placeholder, input[type=password]:not(.style-none):active::-moz-placeholder, input[type=search]:not(.style-none):focus::-moz-placeholder, input[type=search]:not(.style-none):active::-moz-placeholder, input[type=tel]:not(.style-none):focus::-moz-placeholder, input[type=tel]:not(.style-none):active::-moz-placeholder, input[type=text]:not(.style-none):focus::-moz-placeholder, input[type=text]:not(.style-none):active::-moz-placeholder, input[type=time]:not(.style-none):focus::-moz-placeholder, input[type=time]:not(.style-none):active::-moz-placeholder, input[type=url]:not(.style-none):focus::-moz-placeholder, input[type=url]:not(.style-none):active::-moz-placeholder, input[type=week]:not(.style-none):focus::-moz-placeholder, input[type=week]:not(.style-none):active::-moz-placeholder, textarea:not(.style-none):focus::-moz-placeholder, textarea:not(.style-none):active::-moz-placeholder, select:not(.style-none):focus::-moz-placeholder, select:not(.style-none):active::-moz-placeholder, .form-control:not(.style-none):focus::-moz-placeholder, .form-control:not(.style-none):active::-moz-placeholder, .form-select:not(.style-none):focus::-moz-placeholder, .form-select:not(.style-none):active::-moz-placeholder, .select2-container .select2-selection:not(.style-none):focus::-moz-placeholder, .select2-container .select2-selection:not(.style-none):active::-moz-placeholder {
color: var(--input-placeholder-active);
}
input[type=color]:not(.style-none):focus:-ms-input-placeholder, input[type=color]:not(.style-none):active:-ms-input-placeholder, input[type=date]:not(.style-none):focus:-ms-input-placeholder, input[type=date]:not(.style-none):active:-ms-input-placeholder, input[type=datetime-local]:not(.style-none):focus:-ms-input-placeholder, input[type=datetime-local]:not(.style-none):active:-ms-input-placeholder, input[type=datetime]:not(.style-none):focus:-ms-input-placeholder, input[type=datetime]:not(.style-none):active:-ms-input-placeholder, input[type=email]:not(.style-none):focus:-ms-input-placeholder, input[type=email]:not(.style-none):active:-ms-input-placeholder, input[type=month]:not(.style-none):focus:-ms-input-placeholder, input[type=month]:not(.style-none):active:-ms-input-placeholder, input[type=number]:not(.style-none):focus:-ms-input-placeholder, input[type=number]:not(.style-none):active:-ms-input-placeholder, input[type=password]:not(.style-none):focus:-ms-input-placeholder, input[type=password]:not(.style-none):active:-ms-input-placeholder, input[type=search]:not(.style-none):focus:-ms-input-placeholder, input[type=search]:not(.style-none):active:-ms-input-placeholder, input[type=tel]:not(.style-none):focus:-ms-input-placeholder, input[type=tel]:not(.style-none):active:-ms-input-placeholder, input[type=text]:not(.style-none):focus:-ms-input-placeholder, input[type=text]:not(.style-none):active:-ms-input-placeholder, input[type=time]:not(.style-none):focus:-ms-input-placeholder, input[type=time]:not(.style-none):active:-ms-input-placeholder, input[type=url]:not(.style-none):focus:-ms-input-placeholder, input[type=url]:not(.style-none):active:-ms-input-placeholder, input[type=week]:not(.style-none):focus:-ms-input-placeholder, input[type=week]:not(.style-none):active:-ms-input-placeholder, textarea:not(.style-none):focus:-ms-input-placeholder, textarea:not(.style-none):active:-ms-input-placeholder, select:not(.style-none):focus:-ms-input-placeholder, select:not(.style-none):active:-ms-input-placeholder, .form-control:not(.style-none):focus:-ms-input-placeholder, .form-control:not(.style-none):active:-ms-input-placeholder, .form-select:not(.style-none):focus:-ms-input-placeholder, .form-select:not(.style-none):active:-ms-input-placeholder, .select2-container .select2-selection:not(.style-none):focus:-ms-input-placeholder, .select2-container .select2-selection:not(.style-none):active:-ms-input-placeholder {
color: var(--input-placeholder-active);
}
input[type=color]:not(.style-none):focus::-ms-input-placeholder, input[type=color]:not(.style-none):active::-ms-input-placeholder, input[type=date]:not(.style-none):focus::-ms-input-placeholder, input[type=date]:not(.style-none):active::-ms-input-placeholder, input[type=datetime-local]:not(.style-none):focus::-ms-input-placeholder, input[type=datetime-local]:not(.style-none):active::-ms-input-placeholder, input[type=datetime]:not(.style-none):focus::-ms-input-placeholder, input[type=datetime]:not(.style-none):active::-ms-input-placeholder, input[type=email]:not(.style-none):focus::-ms-input-placeholder, input[type=email]:not(.style-none):active::-ms-input-placeholder, input[type=month]:not(.style-none):focus::-ms-input-placeholder, input[type=month]:not(.style-none):active::-ms-input-placeholder, input[type=number]:not(.style-none):focus::-ms-input-placeholder, input[type=number]:not(.style-none):active::-ms-input-placeholder, input[type=password]:not(.style-none):focus::-ms-input-placeholder, input[type=password]:not(.style-none):active::-ms-input-placeholder, input[type=search]:not(.style-none):focus::-ms-input-placeholder, input[type=search]:not(.style-none):active::-ms-input-placeholder, input[type=tel]:not(.style-none):focus::-ms-input-placeholder, input[type=tel]:not(.style-none):active::-ms-input-placeholder, input[type=text]:not(.style-none):focus::-ms-input-placeholder, input[type=text]:not(.style-none):active::-ms-input-placeholder, input[type=time]:not(.style-none):focus::-ms-input-placeholder, input[type=time]:not(.style-none):active::-ms-input-placeholder, input[type=url]:not(.style-none):focus::-ms-input-placeholder, input[type=url]:not(.style-none):active::-ms-input-placeholder, input[type=week]:not(.style-none):focus::-ms-input-placeholder, input[type=week]:not(.style-none):active::-ms-input-placeholder, textarea:not(.style-none):focus::-ms-input-placeholder, textarea:not(.style-none):active::-ms-input-placeholder, select:not(.style-none):focus::-ms-input-placeholder, select:not(.style-none):active::-ms-input-placeholder, .form-control:not(.style-none):focus::-ms-input-placeholder, .form-control:not(.style-none):active::-ms-input-placeholder, .form-select:not(.style-none):focus::-ms-input-placeholder, .form-select:not(.style-none):active::-ms-input-placeholder, .select2-container .select2-selection:not(.style-none):focus::-ms-input-placeholder, .select2-container .select2-selection:not(.style-none):active::-ms-input-placeholder {
color: var(--input-placeholder-active);
}
input[type=color]:not(.style-none):focus::placeholder, input[type=color]:not(.style-none):active::placeholder, input[type=date]:not(.style-none):focus::placeholder, input[type=date]:not(.style-none):active::placeholder, input[type=datetime-local]:not(.style-none):focus::placeholder, input[type=datetime-local]:not(.style-none):active::placeholder, input[type=datetime]:not(.style-none):focus::placeholder, input[type=datetime]:not(.style-none):active::placeholder, input[type=email]:not(.style-none):focus::placeholder, input[type=email]:not(.style-none):active::placeholder, input[type=month]:not(.style-none):focus::placeholder, input[type=month]:not(.style-none):active::placeholder, input[type=number]:not(.style-none):focus::placeholder, input[type=number]:not(.style-none):active::placeholder, input[type=password]:not(.style-none):focus::placeholder, input[type=password]:not(.style-none):active::placeholder, input[type=search]:not(.style-none):focus::placeholder, input[type=search]:not(.style-none):active::placeholder, input[type=tel]:not(.style-none):focus::placeholder, input[type=tel]:not(.style-none):active::placeholder, input[type=text]:not(.style-none):focus::placeholder, input[type=text]:not(.style-none):active::placeholder, input[type=time]:not(.style-none):focus::placeholder, input[type=time]:not(.style-none):active::placeholder, input[type=url]:not(.style-none):focus::placeholder, input[type=url]:not(.style-none):active::placeholder, input[type=week]:not(.style-none):focus::placeholder, input[type=week]:not(.style-none):active::placeholder, textarea:not(.style-none):focus::placeholder, textarea:not(.style-none):active::placeholder, select:not(.style-none):focus::placeholder, select:not(.style-none):active::placeholder, .form-control:not(.style-none):focus::placeholder, .form-control:not(.style-none):active::placeholder, .form-select:not(.style-none):focus::placeholder, .form-select:not(.style-none):active::placeholder, .select2-container .select2-selection:not(.style-none):focus::placeholder, .select2-container .select2-selection:not(.style-none):active::placeholder {
color: var(--input-placeholder-active);
}
input[type=color].size-sm, input[type=date].size-sm, input[type=datetime-local].size-sm, input[type=datetime].size-sm, input[type=email].size-sm, input[type=month].size-sm, input[type=number].size-sm, input[type=password].size-sm, input[type=search].size-sm, input[type=tel].size-sm, input[type=text].size-sm, input[type=time].size-sm, input[type=url].size-sm, input[type=week].size-sm, textarea.size-sm, select.size-sm, .form-control.size-sm, .form-select.size-sm, .select2-container .select2-selection.size-sm {
font-size: var(--form-input-font-size-sm);
height: var(--form-input-size-sm);
padding-inline: calc(var(--form-input-size-sm) / 3);
}
@media screen and (min-width: 1024.02px) {
input[type=color].size-lg, input[type=date].size-lg, input[type=datetime-local].size-lg, input[type=datetime].size-lg, input[type=email].size-lg, input[type=month].size-lg, input[type=number].size-lg, input[type=password].size-lg, input[type=search].size-lg, input[type=tel].size-lg, input[type=text].size-lg, input[type=time].size-lg, input[type=url].size-lg, input[type=week].size-lg, textarea.size-lg, select.size-lg, .form-control.size-lg, .form-select.size-lg, .select2-container .select2-selection.size-lg {
font-size: var(--form-input-font-size-lg);
height: var(--form-input-size-lg);
padding-inline: calc(var(--form-input-size-lg) / 2.8);
border-radius: calc(var(--theme-radius) + 0.125rem);
}
}
input[type=color].style-none, input[type=date].style-none, input[type=datetime-local].style-none, input[type=datetime].style-none, input[type=email].style-none, input[type=month].style-none, input[type=number].style-none, input[type=password].style-none, input[type=search].style-none, input[type=tel].style-none, input[type=text].style-none, input[type=time].style-none, input[type=url].style-none, input[type=week].style-none, textarea.style-none, select.style-none, .form-control.style-none, .form-select.style-none, .select2-container .select2-selection.style-none {
height: auto;
background-color: transparent;
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
/* Select */
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.625rem center;
-webkit-padding-end: 2.375rem !important;
padding-inline-end: 2.375rem !important;
cursor: pointer;
}
select.size-sm {
background-image: url("data:image/svg+xml;utf8,");
}
select.size-lg {
background-image: url("data:image/svg+xml;utf8,");
}
select.field-content {
field-sizing: content;
width: auto;
}
/* Select 2 */
.select2-container .select2-selection {
text-align: start;
-webkit-padding-end: 2.375rem !important;
padding-inline-end: 2.375rem !important;
}
.select2-container .select2-selection .select2-selection__rendered {
color: rgb(var(--colors-black));
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.select2-container .select2-selection .select2-selection__rendered .select2-selection__placeholder {
color: rgb(var(--colors-gray-400));
}
.select2-container .select2-selection .select2-selection__arrow {
width: 2.375rem;
height: 100%;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.625rem center;
}
.select2-container .select2-selection .select2-selection__arrow > * {
display: none;
}
/* Select2 Dropdown */
.select2-dropdown {
background-color: rgb(var(--colors-white));
border-color: rgb(var(--colors-gray-300));
border-radius: var(--theme-radius);
}
.select2-dropdown .select2-search--dropdown .select2-search__field {
--input-border: rgb(var(--colors-gray-300));
--input-border-hover: rgba(var(--colors-gray-400), 0.6);
--input-border-active: rgb(var(--colors-gray-400));
border-color: var(--input-border);
}
.select2-dropdown .select2-results {
padding-top: 0.25rem;
}
.select2-dropdown .select2-results .select2-results__options {
max-height: 13.125rem;
}
.select2-dropdown .select2-results .select2-results__options .select2-results__option {
font-size: calc(var(--text-sm) - 1px);
padding: 0.4375rem 0.75rem;
}
.select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected {
background-color: rgb(var(--colors-gray-100));
}
.select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted.select2-results__option--selectable {
color: rgb(var(--colors-primary-foreground));
background-color: rgb(var(--colors-primary-background));
}
/* Label */
label {
display: block;
font-size: var(--form-label-font-size);
font-weight: var(--form-label-font-weight);
width: 100%;
}
label:not(.checkbox-label) {
margin-bottom: 0.375rem;
}
label.checkbox-label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.625rem;
margin-bottom: 0;
}
label.checkbox-label input {
position: relative;
top: 0.125rem;
}
label.checkbox-label p {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
/* Button */
.btn, .button, button, input[type=submit], .submit {
--button-hover-opacity: 0.87;
--button-icon-size: 20px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.375rem;
-ms-flex-negative: 0;
flex-shrink: 0;
font-family: var(--form-button-font);
font-size: var(--form-button-font-size-base);
font-weight: var(--form-button-font-weight);
line-height: 1;
letter-spacing: var(--form-button-letter-spacing);
text-transform: var(--form-button-text-transform);
text-decoration: none;
list-style: none;
color: currentColor;
white-space: nowrap;
-webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
}
.btn:not(.style-none), .button:not(.style-none), button:not(.style-none), input[type=submit]:not(.style-none), .submit:not(.style-none) {
color: rgb(var(--colors-button-default-foreground));
background-color: rgb(var(--colors-button-default-background));
height: var(--form-button-size-base);
-webkit-padding-start: calc(var(--form-button-size-base) / 2.3);
padding-inline-start: calc(var(--form-button-size-base) / 2.3);
-webkit-padding-end: calc(var(--form-button-size-base) / 2.3);
padding-inline-end: calc(var(--form-button-size-base) / 2.3);
border: 1px solid transparent;
border-radius: var(--theme-radius);
}
.btn:not(.style-none):hover, .button:not(.style-none):hover, button:not(.style-none):hover, input[type=submit]:not(.style-none):hover, .submit:not(.style-none):hover {
background-color: rgba(var(--colors-button-default-background), var(--button-hover-opacity));
}
.btn:not(.style-none).style-icon, .button:not(.style-none).style-icon, button:not(.style-none).style-icon, input[type=submit]:not(.style-none).style-icon, .submit:not(.style-none).style-icon {
width: var(--form-button-size-base);
padding-inline: 0;
}
.btn:not(.style-none).style-icon > *, .button:not(.style-none).style-icon > *, button:not(.style-none).style-icon > *, input[type=submit]:not(.style-none).style-icon > *, .submit:not(.style-none).style-icon > * {
width: var(--button-icon-size);
height: auto;
}
.btn:not(.style-none).variant-primary, .button:not(.style-none).variant-primary, button:not(.style-none).variant-primary, input[type=submit]:not(.style-none).variant-primary, .submit:not(.style-none).variant-primary {
color: rgb(var(--colors-primary-foreground));
background-color: rgb(var(--colors-primary-background));
}
.btn:not(.style-none).variant-primary:hover, .button:not(.style-none).variant-primary:hover, button:not(.style-none).variant-primary:hover, input[type=submit]:not(.style-none).variant-primary:hover, .submit:not(.style-none).variant-primary:hover {
background-color: rgba(var(--colors-primary-background), var(--button-hover-opacity));
}
.btn:not(.style-none).variant-secondary, .button:not(.style-none).variant-secondary, button:not(.style-none).variant-secondary, input[type=submit]:not(.style-none).variant-secondary, .submit:not(.style-none).variant-secondary {
color: rgb(var(--colors-secondary-foreground));
background-color: rgb(var(--colors-secondary-background));
}
.btn:not(.style-none).variant-secondary:hover, .button:not(.style-none).variant-secondary:hover, button:not(.style-none).variant-secondary:hover, input[type=submit]:not(.style-none).variant-secondary:hover, .submit:not(.style-none).variant-secondary:hover {
background-color: rgba(var(--colors-secondary-background), var(--button-hover-opacity));
}
.btn:not(.style-none).variant-black, .button:not(.style-none).variant-black, button:not(.style-none).variant-black, input[type=submit]:not(.style-none).variant-black, .submit:not(.style-none).variant-black {
color: rgb(var(--colors-white));
background-color: rgb(var(--colors-black));
}
.btn:not(.style-none).variant-black:hover, .button:not(.style-none).variant-black:hover, button:not(.style-none).variant-black:hover, input[type=submit]:not(.style-none).variant-black:hover, .submit:not(.style-none).variant-black:hover {
background-color: rgba(var(--colors-black), var(--button-hover-opacity));
}
.btn:not(.style-none).variant-white, .button:not(.style-none).variant-white, button:not(.style-none).variant-white, input[type=submit]:not(.style-none).variant-white, .submit:not(.style-none).variant-white {
color: rgb(var(--colors-black));
background-color: rgb(var(--colors-white));
}
.btn:not(.style-none).variant-white:hover, .button:not(.style-none).variant-white:hover, button:not(.style-none).variant-white:hover, input[type=submit]:not(.style-none).variant-white:hover, .submit:not(.style-none).variant-white:hover {
background-color: rgba(var(--colors-white), var(--button-hover-opacity));
}
.btn.size-xs, .button.size-xs, button.size-xs, input[type=submit].size-xs, .submit.size-xs {
font-size: var(--form-button-font-size-xs);
height: var(--form-button-size-xs);
padding-inline: calc(var(--form-button-size-xs) / 2.4);
}
.btn.size-xs.style-icon, .button.size-xs.style-icon, button.size-xs.style-icon, input[type=submit].size-xs.style-icon, .submit.size-xs.style-icon {
width: var(--form-button-size-xs);
}
.btn.size-sm, .button.size-sm, button.size-sm, input[type=submit].size-sm, .submit.size-sm {
font-size: var(--form-button-font-size-sm);
height: var(--form-button-size-sm);
padding-inline: calc(var(--form-button-size-sm) / 2.3);
}
.btn.size-sm.style-icon, .button.size-sm.style-icon, button.size-sm.style-icon, input[type=submit].size-sm.style-icon, .submit.size-sm.style-icon {
width: var(--form-button-size-sm);
}
@media screen and (min-width: 1024.02px) {
.btn.size-lg, .button.size-lg, button.size-lg, input[type=submit].size-lg, .submit.size-lg {
font-size: var(--form-button-font-size-lg);
height: var(--form-button-size-lg);
padding-inline: calc(var(--form-button-size-lg) / 2);
}
.btn.size-lg.style-icon, .button.size-lg.style-icon, button.size-lg.style-icon, input[type=submit].size-lg.style-icon, .submit.size-lg.style-icon {
width: var(--form-button-size-lg);
}
}
.btn.rounded-none, .button.rounded-none, button.rounded-none, input[type=submit].rounded-none, .submit.rounded-none {
border-radius: 0;
}
.btn.rounded-full, .button.rounded-full, button.rounded-full, input[type=submit].rounded-full, .submit.rounded-full {
border-radius: var(--radius-full);
}
.btn.style-none, .button.style-none, button.style-none, input[type=submit].style-none, .submit.style-none {
height: auto;
padding-inline: 0;
background-color: transparent;
}
.btn:disabled, .button:disabled, button:disabled, input[type=submit]:disabled, .submit:disabled {
opacity: 0.4;
pointer-events: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn.w-full, .button.w-full, button.w-full, input[type=submit].w-full, .submit.w-full {
width: 100%;
}
/* Link */
.link {
font-family: var(--form-button-font);
font-size: var(--form-button-font-size-base);
font-weight: var(--form-button-font-weight);
line-height: 1;
color: currentColor;
}
/* Form group */
.form-group {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin-bottom: 0.375rem;
}
.form-group > * {
width: 100%;
}
@media screen and (min-width: 1024.02px) {
.form-group {
margin-bottom: 0.625rem;
}
}
/* Quantity */
.quantity {
--qty-size: var(--form-qty-size-base);
--qty-font-size: var(--form-qty-font-size-base);
--qty-font-weight: var(--form-qty-font-weight);
--qty-color: #000;
--qty-background: #FFF;
--qty-background-hover: #FFF;
--qty-background-active: #FFF;
--qty-border: rgb(var(--colors-gray-300));
--qty-border-hover: rgb(var(--colors-gray-300));
--qty-border-active: rgb(var(--colors-gray-300));
--qty-border-width: 1px;
--qty-outline: transparent;
--qty-outline-active: transparent;
--qty-outline-width: 2px;
--qty-outline-offset: 0;
--qty-shadow: var(--shadow-xs);
--qty-shadow-hover: var(--shadow-xs);
--qty-shadow-active: var(--shadow-xs);
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
color: var(--qty-color);
background-color: var(--qty-background);
border: 1px solid var(--qty-border);
border-radius: var(--theme-radius);
outline: var(--qty-outline-width) solid var(--qty-outline);
outline-offset: var(--qty-outline-offset);
-webkit-box-shadow: var(--qty-shadow);
box-shadow: var(--qty-shadow);
line-height: 1;
-webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
}
.quantity.quantity-select label {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
}
.quantity.quantity-select select {
font-size: var(--qty-font-size);
font-weight: var(--qty-font-weight);
height: var(--qty-size);
background-image: none;
-webkit-padding-start: calc(var(--qty-size) / 3);
padding-inline-start: calc(var(--qty-size) / 3);
-webkit-padding-end: calc(var(--qty-size) / 1.2) !important;
padding-inline-end: calc(var(--qty-size) / 1.2) !important;
}
.quantity.quantity-select .select-trigger {
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
inset-inline-end: 0;
width: calc(var(--qty-size) / 1.2);
height: var(--qty-size);
pointer-events: none;
}
.quantity.quantity-select .select-trigger > * {
width: calc(var(--qty-size) / 2.8);
height: calc(var(--qty-size) / 2.8);
}
.quantity.quantity-select .select-trigger > * path {
stroke-width: 1.8;
}
@media (hover: hover) and (pointer: fine) {
.quantity:hover {
background-color: var(--qty-background-hover);
border-color: var(--qty-border-hover);
-webkit-box-shadow: var(--qty-shadow-hover);
box-shadow: var(--qty-shadow-hover);
}
}
.quantity:focus, .quantity:active, .quantity:focus-within {
background-color: var(--qty-background-active);
border-color: var(--qty-border-active);
-webkit-box-shadow: var(--qty-shadow-active);
box-shadow: var(--qty-shadow-active);
outline-color: var(--qty-outline-active);
}
.quantity.size-xs {
--qty-size: var(--form-qty-size-xs);
--qty-font-size: var(--form-qty-font-size-xs);
}
.quantity.size-xs.quantity-select select {
-webkit-padding-start: calc(var(--qty-size) / 2.6);
padding-inline-start: calc(var(--qty-size) / 2.6);
-webkit-padding-end: calc(var(--qty-size) / 1.1) !important;
padding-inline-end: calc(var(--qty-size) / 1.1) !important;
}
.quantity.size-xs.quantity-select .select-trigger {
width: calc(var(--qty-size) / 1.1);
}
.quantity.size-xs.quantity-select .select-trigger > * {
width: calc(var(--qty-size) / 2.6);
height: calc(var(--qty-size) / 2.6);
}
.quantity.size-sm {
--qty-size: var(--form-qty-size-sm);
--qty-font-size: var(--form-qty-font-size-sm);
}
.quantity.size-sm.quantity-select select {
-webkit-padding-start: calc(var(--qty-size) / 2.6);
padding-inline-start: calc(var(--qty-size) / 2.6);
-webkit-padding-end: calc(var(--qty-size) / 1.1) !important;
padding-inline-end: calc(var(--qty-size) / 1.1) !important;
}
.quantity.size-sm.quantity-select .select-trigger {
width: calc(var(--qty-size) / 1.1);
}
.quantity.size-sm.quantity-select .select-trigger > * {
width: calc(var(--qty-size) / 2.6);
height: calc(var(--qty-size) / 2.6);
}
@media screen and (min-width: 1024.02px) {
.quantity.size-lg {
--qty-size: var(--form-qty-size-lg);
--qty-font-size: var(--form-qty-font-size-lg);
}
}
.quantity.rounded-none {
border-radius: 0;
}
/* Checkbox */
input[type=checkbox], input.checkbox, .form-control[type=checkbox], .form-control.checkbox {
--check-icon: 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='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
--checkbox-background: rgb(var(--colors-white));
--checkbox-hover-background: rgb(var(--colors-white));
--checkbox-border: rgb(var(--colors-gray-300));
--checkbox-hover-border: rgba(var(--colors-gray-400), 0.6);
--checkbox-shadow: var(--shadow-xs);
--checkbox-checked-color: rgb(var(--colors-primary-foreground));
--checkbox-checked-background: rgb(var(--colors-primary-background));
--checkbox-checked-border: rgb(var(--colors-primary-background));
--checkbox-focus-outline: rgba(var(--colors-primary-background), 0.2);
width: var(--form-checkbox-size);
height: var(--form-checkbox-size);
}
input[type=checkbox]:not(.style-none), input.checkbox:not(.style-none), .form-control[type=checkbox]:not(.style-none), .form-control.checkbox:not(.style-none) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--checkbox-background);
border: 1px solid var(--checkbox-border);
border-radius: calc(var(--theme-radius) / 2);
-webkit-box-shadow: var(--checkbox-shadow);
box-shadow: var(--checkbox-shadow);
outline: 2px solid transparent;
outline-offset: 1px;
}
@media (hover: hover) and (pointer: fine) {
input[type=checkbox]:not(.style-none):hover, input.checkbox:not(.style-none):hover, .form-control[type=checkbox]:not(.style-none):hover, .form-control.checkbox:not(.style-none):hover {
border-color: var(--checkbox-hover-border);
background-color: var(--checkbox-hover-background);
}
}
input[type=checkbox]:not(.style-none):checked, input.checkbox:not(.style-none):checked, .form-control[type=checkbox]:not(.style-none):checked, .form-control.checkbox:not(.style-none):checked {
color: var(--checkbox-checked-color);
background-image: var(--check-icon);
background-color: var(--checkbox-checked-background);
border-color: var(--checkbox-checked-border);
background-repeat: no-repeat;
background-position: center;
background-size: var(--form-checkbox-size) var(--form-checkbox-size);
-webkit-box-shadow: none;
box-shadow: none;
}
input[type=checkbox]:not(.style-none):focus, input.checkbox:not(.style-none):focus, .form-control[type=checkbox]:not(.style-none):focus, .form-control.checkbox:not(.style-none):focus {
outline-color: var(--checkbox-focus-outline);
}
/* Radio */
input[type=radio], input.radio, .form-control[type=radio], .form-control.radio {
--radio-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
width: var(--form-checkbox-size);
height: var(--form-checkbox-size);
}
input[type=radio]:not(.style-none), input.radio:not(.style-none), .form-control[type=radio]:not(.style-none), .form-control.radio:not(.style-none) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid rgb(var(--colors-gray-300));
border-radius: 50%;
-webkit-box-shadow: var(--shadow-xs);
box-shadow: var(--shadow-xs);
outline: 2px solid transparent;
outline-offset: 1px;
}
@media (hover: hover) and (pointer: fine) {
input[type=radio]:not(.style-none):hover, input.radio:not(.style-none):hover, .form-control[type=radio]:not(.style-none):hover, .form-control.radio:not(.style-none):hover {
border-color: rgba(var(--colors-gray-400), 0.6);
}
}
input[type=radio]:not(.style-none):checked, input.radio:not(.style-none):checked, .form-control[type=radio]:not(.style-none):checked, .form-control.radio:not(.style-none):checked {
color: rgb(var(--colors-primary-foreground));
background-image: var(--radio-icon);
background-color: rgb(var(--colors-primary-background));
border-color: rgb(var(--colors-primary-background));
background-repeat: no-repeat;
background-position: center;
background-size: var(--form-checkbox-size) var(--form-checkbox-size);
-webkit-box-shadow: none;
box-shadow: none;
}
input[type=radio]:not(.style-none):focus-within, input.radio:not(.style-none):focus-within, .form-control[type=radio]:not(.style-none):focus-within, .form-control.radio:not(.style-none):focus-within {
outline-color: rgba(var(--colors-primary-background), 0.2);
}
input[type=radio]:not(.style-none).style-filled, input.radio:not(.style-none).style-filled, .form-control[type=radio]:not(.style-none).style-filled, .form-control.radio:not(.style-none).style-filled {
background-color: rgb(var(--colors-gray-200));
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
input[type=radio]:not(.style-none).style-filled:hover, input.radio:not(.style-none).style-filled:hover, .form-control[type=radio]:not(.style-none).style-filled:hover, .form-control.radio:not(.style-none).style-filled:hover {
background-color: rgba(var(--colors-gray-200), 0.8);
}
}
input[type=radio]:not(.style-none).style-filled:checked, input.radio:not(.style-none).style-filled:checked, .form-control[type=radio]:not(.style-none).style-filled:checked, .form-control.radio:not(.style-none).style-filled:checked {
background-color: rgb(var(--colors-primary-background));
border-color: rgb(var(--colors-primary-background));
}
/* Textarea */
textarea {
min-height: 5.625rem;
padding-block: 0.5rem !important;
}
textarea.size-sm {
min-height: 3.5rem;
}
textarea.size-lg {
min-height: 9.125rem;
}
/*------------------------------------
Mobile Navigation
------------------------------------*/
.site-mobile-navigation {
--mobile-nav-padding-inline: 8px;
--mobile-nav-padding-block: 6px;
--mobile-nav-background: rgb(var(--colors-white));
--mobile-nav-border: rgb(var(--colors-gray-200));
--mobile-nav-color: rgb(var(--colors-black));
--mobile-nav-label-color: rgb(var(--colors-gray-400));
--mobile-nav-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07);
--mobile-nav-radius: var(--radius-lg);
--mobile-nav-item-gap: 2px;
--mobile-nav-item-padding-inline: 2px;
--mobile-nav-item-padding-block: 2px;
--mobile-nav-icon: 21px;
--mobile-nav-label: 10px;
--mobile-nav-label-weight: 600;
--mobile-nav-label-transform: uppercase;
--mobile-nav-transition-duration: var(--theme-ease-time-slow);
--mobile-nav-transition-property: opacity, visibility, background-color, transform;
--mobile-nav-transition-timing-function: var(--theme-ease-primary);
position: fixed;
width: 100%;
bottom: 0;
inset-inline-start: 0;
-webkit-transition-duration: var(--mobile-nav-transition-duration);
transition-duration: var(--mobile-nav-transition-duration);
-webkit-transition-property: var(--mobile-nav-transition-property);
transition-property: var(--mobile-nav-transition-property);
-webkit-transition-timing-function: var(--mobile-nav-transition-timing-function);
transition-timing-function: var(--mobile-nav-transition-timing-function);
z-index: 100;
}
@media screen and (min-width: 768.02px) {
.site-mobile-navigation {
display: none;
}
}
.site-mobile-navigation .site-mobile-navigation-inner {
padding: var(--mobile-nav-padding-block) var(--mobile-nav-padding-inline);
background-color: var(--mobile-nav-background);
border-top: 1px solid var(--mobile-nav-border);
-webkit-box-shadow: var(--mobile-nav-shadow);
box-shadow: var(--mobile-nav-shadow);
border-start-start-radius: var(--mobile-nav-radius);
border-start-end-radius: var(--mobile-nav-radius);
}
.site-mobile-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-negative: 0;
flex-shrink: 0;
list-style: none;
padding: 0;
margin: 0;
}
.site-mobile-navigation ul li {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.site-mobile-navigation ul li a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--mobile-nav-item-gap);
text-decoration: none;
color: var(--mobile-nav-color);
padding: var(--mobile-nav-item-padding-block) var(--mobile-nav-item-padding-inline);
}
.site-mobile-navigation ul li a .mobile-navigation-icon > * {
width: var(--mobile-nav-icon);
height: auto;
}
.site-mobile-navigation ul li a .mobile-menu-label {
font-size: var(--mobile-nav-label);
font-weight: var(--mobile-nav-label-weight);
text-transform: var(--mobile-nav-label-transform);
color: var(--mobile-nav-label-color);
}
@media screen and (max-width: 767.98px) {
.site-mobile-navigation.close {
-webkit-transform: translateY(calc(100% + 0.625rem));
transform: translateY(calc(100% + 0.625rem));
}
}
/* IF opened another navigations */
@media screen and (max-width: 767.98px) {
body.action-enable .site-mobile-navigation {
-webkit-transform: translateY(calc(100% + 0.625rem));
transform: translateY(calc(100% + 0.625rem));
}
}
/*------------------------------------
Header
------------------------------------*/
/* Header global */
.site-header {
--header-row-background: rgb(255, 255, 255);
--header-row-foreground: rgb(0, 0, 0);
--header-row-foreground-muted: rgb(0, 0, 0);
--header-row-hover: rgb(0, 0, 0);
--header-row-border: #e7ecee;
--header-row-gap: var(--theme-padding);
position: relative;
z-index: 10;
}
.site-header .site-header-row {
position: relative;
}
.site-header .site-header-row.border-full::after {
content: "";
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: -0.0625rem;
inset-inline-start: 0;
pointer-events: none;
}
.site-header .site-header-row.border-content .site-header-inner::after {
content: "";
position: absolute;
width: 100%;
max-width: calc(var(--theme-width) - var(--theme-screen-padding) * 2);
height: 0.0625rem;
bottom: -0.0625rem;
inset-inline-start: auto;
inset-inline-end: auto;
pointer-events: none;
}
.site-header .site-header-row .site-header-inner {
gap: var(--header-row-gap);
}
.site-header .site-header-row .site-header-inner > .column {
gap: var(--header-row-gap);
}
.site-header:not(.header-transparent) .site-header-row {
color: var(--header-row-foreground);
background-color: var(--header-row-background);
border-color: var(--header-row-border);
}
.site-header:not(.header-transparent) .site-header-row .site-header-inner {
border-color: var(--header-row-border);
}
.site-header:not(.header-transparent) .site-header-row.border-full::after {
background-color: var(--header-row-border);
}
.site-header:not(.header-transparent) .site-header-row.border-content .site-header-inner::after {
background-color: var(--header-row-border);
}
.site-header .site-header-custom-button {
--custom-button-icon: 22px;
--custom-button-gap: 10px;
}
.site-header .site-header-custom-button > a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
gap: var(--custom-button-gap);
color: currentColor;
}
.site-header .site-header-custom-button > a > svg, .site-header .site-header-custom-button > a > img {
width: var(--custom-button-icon);
height: auto;
}
.site-header .header-sub {
--header-row-gap: 0;
--sub-padding: 6px;
--link-size: 12px;
--link-weight: 600;
--link-icon-size: 14px;
}
.site-header .header-sub .column + .column {
-webkit-border-start: 1px solid var(--header-row-border);
border-inline-start: 1px solid var(--header-row-border);
}
.site-header .header-sub p, .site-header .header-sub a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
gap: 0.5rem;
font-size: var(--link-size);
font-weight: var(--link-weight);
color: var(--header-row-foreground);
color: currentColor;
text-decoration: none;
margin-bottom: 0;
padding: var(--sub-padding);
}
.site-header .header-sub p > svg, .site-header .header-sub p > img, .site-header .header-sub a > svg, .site-header .header-sub a > img {
width: var(--link-icon-size);
height: auto;
}
.site-header.custom-style-2 .header-topbar {
--header-row-background: rgb(var(--colors-primary-background));
--header-row-foreground: rgb(var(--colors-primary-foreground));
--header-row-foreground-muted: #bbd7eb;
--header-row-foreground-active: #FFF;
--header-row-border: #127cca;
}
.site-header.custom-style-2 .header-topbar .star-rating {
--star-color: #73a3c6;
}
.site-header.custom-style-2 .header-main {
--header-row-background: rgb(var(--colors-primary-background));
--header-row-foreground: rgb(var(--colors-primary-foreground));
}
.site-header.custom-style-2 .header-main .site-action-button {
--action-icon-color: #fff;
--action-icon-background-color: #1977bb;
--action-icon-border-color: #288ed8;
--action-icon-hover-background-color: #2382c7;
--action-icon-hover-border-color: #288ed8;
--action-icon-hover-color: #fff;
--action-detail-color: #fff;
}
.site-header.custom-style-2 .header-main .site-action-button .site-action-count {
--action-count-background-color: rgb(var(--colors-yellow-base));
--action-count-color: rgb(var(--colors-yellow-dark));
}
.site-header.custom-style-3 .header-topbar {
--header-row-background: rgb(var(--colors-secondary-background));
--header-row-foreground: rgb(var(--colors-secondary-foreground));
--header-row-foreground-muted: #efa7b2;
--header-row-foreground-active: #FFF;
--header-row-border: #e35c71;
}
.site-header.custom-style-3 .header-topbar .star-rating {
--star-color: #e57e8f;
}
.site-header.custom-style-3 .header-main {
--header-row-background: rgb(var(--colors-secondary-background));
--header-row-foreground: rgb(var(--colors-secondary-foreground));
}
.site-header.custom-style-3 .header-main .site-action-button {
--action-icon-color: rgb(var(--colors-white));
--action-icon-background-color: #c80525;
--action-icon-border-color: #b90522;
--action-icon-hover-background-color: #bf0423;
--action-icon-hover-border-color: #b90522;
--action-icon-hover-color: rgb(var(--colors-white));
--action-detail-color: rgb(var(--colors-white));
}
.site-header.custom-style-3 .header-main .site-action-button .site-action-count {
--action-count-background-color: rgb(var(--colors-white));
--action-count-color: rgb(var(--colors-black));
}
.site-header.custom-style-4 .header-topbar {
--header-row-background: rgb(var(--colors-gray-950));
--header-row-foreground: rgb(var(--colors-gray-300));
--header-row-foreground-muted: rgb(var(--colors-gray-400));
--header-row-foreground-active: rgb(var(--colors-white));
--header-row-border: rgb(var(--colors-gray-800));
}
.site-header.custom-style-4 .header-topbar .star-rating {
--star-color: rgb(var(--colors-gray-600));
}
.site-header.custom-style-4 .header-main {
--header-row-background: rgb(var(--colors-gray-950));
--header-row-foreground: rgb(var(--colors-gray-300));
--header-row-border: rgb(var(--colors-gray-800));
}
.site-header.custom-style-4 .header-main .site-action-button {
--action-icon-color: rgb(var(--colors-white));
--action-icon-background-color: rgb(var(--colors-gray-800));
--action-icon-border-color: rgb(var(--colors-gray-700));
--action-detail-color: rgb(var(--colors-white));
--action-icon-hover-background-color: rgb(var(--colors-gray-700));
--action-icon-hover-border-color: rgb(var(--colors-gray-700));
--action-icon-hover-color: rgb(var(--colors-white));
}
.site-header.custom-style-5 .header-topbar {
--header-row-background: rgb(var(--colors-gray-100));
--header-row-foreground: rgb(var(--colors-gray-600));
--header-row-foreground-muted: rgb(var(--colors-gray-400));
--header-row-foreground-active: rgb(var(--colors-black));
--header-row-border: rgb(var(--colors-gray-200));
}
.site-header.custom-style-5 .header-topbar .star-rating {
--star-color: rgb(var(--colors-gray-300));
}
.site-header.custom-style-5 .header-main {
--header-row-background: rgb(var(--colors-white));
--header-row-foreground: rgb(var(--colors-black));
--header-row-border: rgb(var(--colors-gray-200));
}
.site-header.custom-style-5 .header-main .site-action-button {
--action-icon-background-color: rgb(var(--colors-gray-50));
--action-icon-border-color: rgb(var(--colors-gray-200));
--action-icon-hover-background-color: rgb(var(--colors-gray-100));
--action-icon-hover-border-color: rgb(var(--colors-gray-200));
}
/* Header topbar */
.header-topbar {
--topbar-font-size: 12px;
--topbar-font-weight: 400;
--topbar-letter-spacing: -0.02em;
--topbar-height: 40px;
--header-row-gap: 20px;
--header-row-foreground: #515d64;
--header-row-foreground-muted: #657580;
--header-row-foreground-active: #000;
--header-row-background: #eff4f7;
--header-row-border: #dee6eb;
font-size: var(--topbar-font-size);
font-weight: var(--topbar-font-weight);
letter-spacing: var(--topbar-letter-spacing);
z-index: 3;
}
.header-topbar .site-navigation {
--nav-link-arrow: 12px;
--submenu-font-size: var(--topbar-font-size);
--submenu-link-padding-block: 6px;
--submenu-link-padding-inline: 18px;
--submenu-width: auto;
--submenu-transformY: 3px;
}
.header-topbar .site-navigation > ul > li > a {
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
}
.header-topbar .site-navigation > ul > li > a:hover {
color: var(--header-row-foreground-active);
}
.header-topbar .site-navigation > ul > li > a .menu-arrow {
position: relative;
bottom: 0.0625rem;
}
.header-topbar .site-navigation > ul > li:hover > a {
color: var(--header-row-foreground-active);
}
.header-topbar .site-header-inner, .header-topbar .site-navigation > ul > li > a {
height: var(--topbar-height);
}
.header-topbar .site-header-inner, .header-topbar .column, .header-topbar .site-navigation > ul {
gap: var(--header-row-gap);
}
.header-topbar .header-content {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.375rem;
}
.header-topbar .header-content .star-rating {
--star-size: 12px;
--star-color: #cbd3d7;
position: relative;
top: -1px;
}
.header-topbar .header-content p {
line-height: 1;
margin-bottom: 0;
color: var(--header-row-foreground-muted);
}
/* Header main */
.header-main {
--header-row-background: #eff4f7;
--main-height-desktop: 76px;
--main-height-mobile: 56px;
z-index: 2;
}
.header-main .site-actions {
--actions-gap: 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--actions-gap);
}
.header-main .site-actions .site-action-button.default + .icon-style {
-webkit-margin-start: var(--actions-gap);
margin-inline-start: var(--actions-gap);
}
.header-main .site-header-inner, .header-main .site-navigation > ul > li > a {
height: var(--main-height-mobile);
}
@media screen and (min-width: 1024.02px) {
.header-main .site-header-inner, .header-main .site-navigation > ul > li > a {
height: var(--main-height-desktop);
}
}
/* Header bottom */
.header-bottom {
--header-bottom-height: 60px;
z-index: 1;
}
.header-bottom .site-header-inner, .header-bottom .site-navigation > ul > li > a, .header-bottom .site-header-custom-button > a {
height: var(--header-bottom-height);
}
.header-bottom .site-header-custom-button > a {
font-family: var(--theme-primary-menu-font);
font-size: var(--theme-primary-menu-font-size);
font-weight: var(--theme-primary-menu-font-weight);
letter-spacing: var(--theme-primary-menu-letter-spacing);
}
.header-bottom .site-header-custom-button.custom-gategories {
position: relative;
}
.header-bottom .site-header-custom-button.custom-gategories::after {
content: "";
width: 0.0625rem;
height: 1rem;
inset-inline-start: 0;
pointer-events: none;
background-color: currentColor;
-webkit-margin-start: var(--header-row-gap);
margin-inline-start: var(--header-row-gap);
opacity: 0.3;
}
.header-bottom .site-header-custom-button .site-custom-dropdown {
position: absolute;
width: 100%;
top: 100%;
inset-inline-start: 0;
background-color: rgb(var(--colors-white));
border-bottom: 1px solid rgb(var(--colors-gray-200));
-webkit-box-shadow: var(--shadow-lg);
box-shadow: var(--shadow-lg);
clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
pointer-events: none;
-webkit-transition: all var(--theme-ease-time-medium) var(--theme-ease-primary);
transition: all var(--theme-ease-time-medium) var(--theme-ease-primary);
}
.header-bottom .site-header-custom-button .site-custom-dropdown .custom-dropdown-inner {
max-width: calc(var(--theme-width) - var(--theme-screen-padding) * 2);
margin-inline: auto;
padding-top: 2.625rem;
padding-bottom: 3.5rem;
}
.header-bottom .site-header-custom-button .site-custom-dropdown .custom-dropdown-inner:has(.custom-dropdown-footer) {
padding-bottom: 0;
}
.header-bottom .site-header-custom-button .site-custom-dropdown .custom-dropdown-inner:has(.custom-dropdown-footer) .custom-dropdown-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.375rem;
text-align: center;
margin-top: 2.625rem;
padding-block: 1.5rem;
border-top: 1px solid rgb(var(--colors-gray-200));
}
.header-bottom .site-header-custom-button .site-custom-dropdown .custom-dropdown-inner:has(.custom-dropdown-footer) .custom-dropdown-footer p {
font-size: var(--text-sm);
margin-bottom: 0;
}
.header-bottom .site-header-custom-button:hover .site-custom-dropdown {
clip-path: polygon(0 0, 100% 0, 100% calc(100% + 15px), 0 calc(100% + 15px));
pointer-events: auto;
}
/* Header actions */
.site-action-button {
--action-font-size: 13px;
--action-font-weight: 600;
--action-line-height: 1.3;
--action-icon-gap: 8px;
--action-icon-desktop: 24px;
--action-icon-mobile: 22px;
--action-icon-stroke: 1.6;
--action-icon-width-desktop: 46px;
--action-icon-height-desktop: 46px;
--action-icon-width-mobile: 38px;
--action-icon-height-mobile: 38px;
--action-icon-border-width: 1px;
--action-icon-border-radius: 50%;
--action-icon-color: #314350;
--action-icon-border-color: #d4dee2;
--action-icon-background-color: #e2eaed;
--action-icon-hover-color: #314350;
--action-icon-hover-border-color: #cad0d2;
--action-icon-hover-background-color: #FFF;
--action-detail-color: #314350;
--action-transition-duration: var(--theme-ease-time-fast);
--action-transition-property: all;
--action-transition-timing-function: var(--theme-ease-in-out);
position: relative;
}
.site-action-button .site-action-link {
gap: var(--action-icon-gap);
text-decoration: none;
color: currentColor;
}
.site-action-button .site-action-icon {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: var(--action-icon-width-mobile);
height: var(--action-icon-height-mobile);
color: var(--action-icon-color);
border: var(--action-icon-border-width) solid var(--action-icon-border-color);
border-radius: var(--action-icon-border-radius);
background-color: var(--action-icon-background-color);
-webkit-transition: var(--action-transition-property) var(--action-transition-duration) var(--action-transition-timing-function);
transition: var(--action-transition-property) var(--action-transition-duration) var(--action-transition-timing-function);
}
@media screen and (min-width: 1024.02px) {
.site-action-button .site-action-icon {
width: var(--action-icon-width-desktop);
height: var(--action-icon-height-desktop);
}
}
.site-action-button .site-action-icon > svg, .site-action-button .site-action-icon > img {
width: var(--action-icon-mobile);
height: var(--action-icon-mobile);
}
@media screen and (min-width: 1024.02px) {
.site-action-button .site-action-icon > svg, .site-action-button .site-action-icon > img {
width: var(--action-icon-desktop);
height: var(--action-icon-desktop);
}
}
.site-action-button .site-action-icon > svg > *, .site-action-button .site-action-icon > img > * {
stroke-width: var(--action-icon-stroke);
}
.site-action-button .site-action-icon .site-action-count {
--action-count-top: -3px;
--action-count-end: -3px;
position: absolute;
top: var(--action-count-top);
inset-inline-end: var(--action-count-end);
z-index: 1;
}
@media screen and (min-width: 1024.02px) {
.site-action-button .site-action-icon .site-action-count {
--action-count-top: -4px;
--action-count-end: -4px;
}
}
.site-action-button .site-action-detail {
--action-sublabel-opacity: 0.6;
font-size: var(--action-font-size);
line-height: var(--action-line-height);
color: var(--action-detail-color);
}
.site-action-button .site-action-detail .site-action-sublabel {
font-size: calc(var(--action-font-size) - 2px);
opacity: var(--action-sublabel-opacity);
}
.site-action-button .site-action-detail .site-action-label {
font-weight: var(--action-font-weight);
margin-bottom: 0;
}
.site-action-button .site-action-count {
--action-count-font-size: 11px;
--action-count-font-size-mobile: 10px;
--action-count-font-weight: 600;
--action-count-size: 19px;
--action-count-size-mobile: 17px;
--action-count-radius: 50%;
--action-count-border-width: 1px;
--action-count-border-color: transparent;
--action-count-outline-color: var(--header-row-background);
--action-count-outline-width: 2px;
--action-count-outline-offset: 0;
--action-count-background-color: rgb(var(--colors-secondary-background));
--action-count-color: rgb(var(--colors-secondary-foreground));
--action-count-top: 0;
--action-count-end: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--action-count-font-size-mobile);
font-weight: var(--action-count-font-weight);
letter-spacing: 0;
text-align: center;
border: var(--action-count-border-width) solid var(--action-count-border-color);
border-radius: var(--action-count-radius);
background-color: var(--action-count-background-color);
outline: var(--action-count-outline-width) solid var(--action-count-outline-color);
color: var(--action-count-color);
min-width: var(--action-count-size-mobile);
padding-inline: 0.0625rem;
height: var(--action-count-size-mobile);
}
@media screen and (min-width: 1024.02px) {
.site-action-button .site-action-count {
font-size: var(--action-count-font-size);
min-width: var(--action-count-size);
height: var(--action-count-size);
}
}
.site-action-button:hover .site-action-icon {
color: var(--action-icon-hover-color);
background-color: var(--action-icon-hover-background-color);
border-color: var(--action-icon-hover-border-color);
}
.site-action-button:hover .site-action-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
margin: 0;
}
.site-action-button.text-style .site-action-detail {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--action-icon-gap);
}
/* Primary menu actions */
.site-navigation.primary-menu {
--nav-link-arrow: var(--theme-primary-menu-font-size);
--nav-link-gap: var(--theme-primary-menu-arrow-gap);
--nav-gap: var(--theme-primary-menu-gap);
--submenu-font-size: 14px;
--submenu-link-padding-block: 7px;
--submenu-link-padding-inline: 30px;
--submenu-label-font-size: 14px;
}
.site-navigation.primary-menu > ul > li > a {
font-family: var(--theme-primary-menu-font);
font-size: var(--theme-primary-menu-font-size);
font-weight: var(--theme-primary-menu-font-weight);
letter-spacing: var(--theme-primary-menu-letter-spacing);
}
/*------------------------------------
Footer
------------------------------------*/
/* Input */
.site-footer {
--footer-row-background: #eff4f7;
--footer-row-foreground: rgb(var(--colors-black));
--footer-row-muted-background: #e2eaed;
--footer-row-muted-foreground: rgb(var(--colors-black));
--footer-row-border: #e7ecee;
--footer-row-offset-top: 30px;
--footer-row-offset-top-lg: 56px;
--footer-row-offset-bottom: 30px;
--footer-row-offset-bottom-lg: 56px;
margin-top: var(--theme-footer-offset);
}
@media screen and (min-width: 1024.02px) {
.site-footer {
margin-top: var(--theme-footer-offset-lg);
}
}
.site-footer .site-footer-row {
color: var(--footer-row-foreground);
background-color: var(--footer-row-background);
}
.site-footer .site-footer-row .site-footer-inner {
padding-top: var(--footer-row-offset-top);
padding-bottom: var(--footer-row-offset-bottom);
}
@media screen and (min-width: 1024.02px) {
.site-footer .site-footer-row .site-footer-inner {
padding-top: var(--footer-row-offset-top-lg);
padding-bottom: var(--footer-row-offset-bottom-lg);
}
}
.site-footer .site-footer-row.bordered-full {
border-top: 1px solid var(--footer-row-border);
}
.site-footer .site-footer-row.bordered-content .site-footer-inner {
border-top: 1px solid var(--footer-row-border);
}
/* Newsletter */
.footer-newsletter {
--newsletter-gap: 16px;
--newsletter-title-size: 30px;
--newsletter-title-weight: 700;
--newsletter-title-color: rgb(var(--colors-gray-800));
--newsletter-description-size: 15px;
--newsletter-description-width: 480px;
--newsletter-description-color: rgb(var(--colors-gray-500));
--newsletter-form-width: 420px;
--newsletter-form-background: rgb(var(--colors-white));
--newsletter-form-border: rgb(var(--colors-gray-300));
--newsletter-form-border-hover: rgba(var(--colors-gray-400), 0.6);
--newsletter-form-border-width: 1px;
--newsletter-form-outline: transparent;
--newsletter-form-outline-width: 2px;
--newsletter-form-outline-offset: 1px;
--newsletter-form-active-background: rgb(var(--colors-white));
--newsletter-form-active-border: rgb(var(--colors-gray-400));
--newsletter-form-outline-active: rgb(var(--colors-gray-200));
--newsletter-form-placeholder: rgb(var(--colors-gray-400));
--newsletter-form-placeholder-active: rgb(var(--colors-gray-300));
--newsletter-form-radius: var(--radius-lg);
--newsletter-form-shadow: var(--shadow-xs);
--newsletter-form-active-shadow: none;
}
.footer-newsletter .site-footer-inner {
gap: var(--newsletter-gap);
}
.footer-newsletter .site-footer-inner .column {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
@media screen and (min-width: 576.02px) {
.footer-newsletter .site-footer-inner .column {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.footer-newsletter .site-footer-inner .column.newsletter-form {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
.footer-newsletter .newsletter-text .entry-title {
font-size: var(--text-3xl);
font-weight: var(--newsletter-title-weight);
color: var(--newsletter-title-color);
margin-bottom: 0.25rem;
}
@media screen and (min-width: 1024.02px) {
.footer-newsletter .newsletter-text .entry-title {
font-size: var(--newsletter-title-size);
}
}
.footer-newsletter .newsletter-text p {
font-size: calc(var(--text-sm) - 1px);
color: var(--newsletter-description-color);
max-width: var(--newsletter-description-width);
margin-bottom: 0;
}
@media screen and (min-width: 1024.02px) {
.footer-newsletter .newsletter-text p {
font-size: var(--newsletter-description-size);
}
}
.footer-newsletter .site-newsletter-form {
max-width: var(--newsletter-form-width);
}
.footer-newsletter .site-newsletter-form form {
position: relative;
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0.25rem;
background-color: var(--newsletter-form-background);
border: var(--newsletter-form-border-width) solid var(--newsletter-form-border);
outline: var(--newsletter-form-outline-width) solid var(--newsletter-form-outline);
outline-offset: var(--newsletter-form-outline-offset);
border-radius: var(--newsletter-form-radius);
-webkit-box-shadow: var(--newsletter-form-shadow);
box-shadow: var(--newsletter-form-shadow);
margin-bottom: 0.875rem;
-webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
}
@media (hover: hover) and (pointer: fine) {
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields:hover {
border-color: var(--newsletter-form-border-hover);
}
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields input {
background-color: transparent;
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields input::-webkit-input-placeholder {
color: var(--newsletter-form-placeholder);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields input::-moz-placeholder {
color: var(--newsletter-form-placeholder);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields input:-ms-input-placeholder {
color: var(--newsletter-form-placeholder);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields input::-ms-input-placeholder {
color: var(--newsletter-form-placeholder);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields input::placeholder {
color: var(--newsletter-form-placeholder);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields:focus-within {
background-color: var(--newsletter-form-active-background);
border-color: var(--newsletter-form-active-border);
-webkit-box-shadow: var(--newsletter-form-active-shadow);
box-shadow: var(--newsletter-form-active-shadow);
outline-color: var(--newsletter-form-outline-active);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields:focus-within input::-webkit-input-placeholder {
color: var(--newsletter-form-placeholder-active);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields:focus-within input::-moz-placeholder {
color: var(--newsletter-form-placeholder-active);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields:focus-within input:-ms-input-placeholder {
color: var(--newsletter-form-placeholder-active);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields:focus-within input::-ms-input-placeholder {
color: var(--newsletter-form-placeholder-active);
}
.footer-newsletter .site-newsletter-form form .mc4wp-form-fields:focus-within input::placeholder {
color: var(--newsletter-form-placeholder-active);
}
.footer-newsletter .site-newsletter-form .privacy-text {
margin-bottom: 0;
}
/* Widgets */
.footer-widgets {
--footer-row-offset-top-lg: 66px;
--footer-row-offset-bottom-lg: 66px;
--footer-row-muted-background: rgb(var(--colors-gray-500));
--footer-row-muted-foreground: rgb(var(--colors-gray-400));
--footer-row-background: rgb(var(--colors-gray-900));
--footer-row-foreground: rgb(var(--colors-white));
--footer-contact-width: 420px;
--footer-widgets-gap: 24px;
}
.footer-widgets .site-footer-inner {
gap: var(--footer-widgets-gap);
}
.footer-widgets .site-footer-contact {
width: 100%;
}
@media screen and (min-width: 576.02px) {
.footer-widgets .site-footer-contact {
width: 50%;
}
}
@media screen and (min-width: 1024.02px) {
.footer-widgets .site-footer-contact {
width: var(--footer-contact-width);
-webkit-padding-end: 2.5rem;
padding-inline-end: 2.5rem;
}
}
.footer-widgets .site-footer-widgets {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
gap: var(--footer-widgets-gap);
}
.footer-widgets .site-footer-widgets > * {
width: 100%;
}
@media screen and (min-width: 576.02px) {
.footer-widgets .site-footer-widgets > * {
width: calc(50% - var(--footer-widgets-gap));
}
}
@media screen and (min-width: 1024.02px) {
.footer-widgets .site-footer-widgets > * {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
}
.footer-widgets .widget {
--widget-menu-decoration-hover-color: var(--footer-row-muted-background);
}
.footer-widgets .widget a {
color: var(--footer-row-muted-foreground);
}
.footer-widgets .widget a:hover {
color: var(--footer-row-muted-foreground);
}
.footer-widgets .site-contact a {
color: var(--footer-row-foreground);
}
.footer-widgets .site-contact a p {
color: var(--footer-row-muted-foreground);
}
.footer-widgets .site-contact a:hover {
color: var(--footer-row-foreground);
}
/* Info */
.footer-info {
--footer-row-offset-top-lg: 36px;
--footer-row-offset-bottom-lg: 36px;
--footer-row-muted-background: rgb(var(--colors-gray-500));
--footer-row-muted-foreground: rgb(var(--colors-gray-400));
--footer-row-background: rgb(var(--colors-gray-900));
--footer-row-foreground: rgb(var(--colors-white));
--footer-row-border: rgb(var(--colors-gray-800));
--footer-info-gap: 16px;
--footer-info-logo-width: 126px;
}
.footer-info .site-footer-inner {
gap: var(--footer-info-gap);
}
.footer-info .site-footer-inner .column {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
}
@media screen and (min-width: 768.02px) {
.footer-info .site-footer-inner .column {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.footer-info .site-footer-inner .column:first-child {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.footer-info .site-footer-inner .column:last-child {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
.footer-info .site-brand img {
width: var(--footer-info-logo-width);
}
.footer-info .site-info-social {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.625rem;
}
.footer-info .site-info-social > span {
font-size: var(--text-xs);
font-weight: 600;
color: var(--footer-row-muted-foreground);
}
.footer-info .site-apps {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.625rem;
}
.footer-info .site-apps > span {
font-size: var(--text-xs);
font-weight: 600;
color: var(--footer-row-muted-foreground);
}
.footer-info .site-apps .site-app-buttons {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.25rem;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.footer-info .site-apps .site-app-buttons > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.footer-info .site-apps .site-app-buttons a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.footer-info .site-apps .site-app-buttons a img {
max-height: 2rem;
}
/* Copyright */
.footer-copyright {
--footer-row-offset-top-lg: 66px;
--footer-row-offset-bottom-lg: 66px;
--footer-row-muted-background: rgb(var(--colors-gray-500));
--footer-row-muted-foreground: rgb(var(--colors-gray-400));
--footer-row-background: rgb(var(--colors-gray-900));
--footer-row-foreground: rgb(var(--colors-white));
--footer-row-border: rgb(var(--colors-gray-800));
}
.footer-copyright .site-footer-inner {
gap: 1.125rem;
}
.footer-copyright .site-footer-inner .column {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.footer-copyright .site-copyright {
text-align: center;
}
@media screen and (min-width: 1024.02px) {
.footer-copyright .site-copyright {
text-align: start;
}
}
.footer-copyright .footer-card-icons {
--card-icons-gap: 16px;
gap: var(--card-icons-gap);
}
/*------------------------------------
Blog
------------------------------------*/
/* Post */
.post {
--post-thumbnail-width: 66px;
--post-thumbnail-offset: 16px;
--post-title-mobile: 20px;
--post-title-desktop: 24px;
--post-title-weight: 600;
--post-title-line-height: 1.3;
--post-title-letter-spacing: -0.025em;
--post-title-margin: 10px;
--post-title-clamp: 2;
--post-title-decoration-offset: 4px;
--post-title-decoration-width: 1px;
--post-title-color: rgb(var(--colors-black));
--post-title-decoration-color: transparent;
--post-title-decoration-transition-duration: var(--theme-ease-time-fast);
--post-title-decoration-transition-timing: var(--theme-ease-in-out);
--post-title-decoration-transition-property: color, text-decoration-color;
--post-title-hover-color: rgb(var(--colors-black));
--post-title-decoration-hover-color: rgb(var(--colors-gray-500));
--post-excerpt: 14px;
--post-excerpt-color: rgb(var(--colors-gray-700));
--post-excerpt-offset: 12px;
--post-meta-gap: 10px;
--post-meta-size: 12px;
--post-meta-color: rgb(var(--colors-gray-500));
}
.post .post-thumbnail {
margin-bottom: var(--post-thumbnail-offset);
}
.post .post-thumbnail a {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: var(--radius-base);
}
.post .entry-post-title {
font-size: var(--post-title-mobile);
font-weight: var(--post-title-weight);
line-height: var(--post-title-line-height);
letter-spacing: var(--post-title-letter-spacing);
margin-bottom: var(--post-title-margin);
}
@media screen and (min-width: 1024.02px) {
.post .entry-post-title {
font-size: var(--post-title-desktop);
}
}
.post .entry-post-title a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--post-title-clamp);
color: var(--post-title-color);
text-underline-offset: var(--post-title-decoration-offset);
text-decoration-thickness: var(--post-title-decoration-width);
text-decoration-color: var(--post-title-decoration-color);
-webkit-transition-duration: var(--post-title-decoration-transition-duration);
transition-duration: var(--post-title-decoration-transition-duration);
-webkit-transition-timing-function: var(--post-title-decoration-transition-timing);
transition-timing-function: var(--post-title-decoration-transition-timing);
-webkit-transition-property: var(--post-title-decoration-transition-property);
transition-property: var(--post-title-decoration-transition-property);
}
@media (hover: hover) and (pointer: fine) {
.post .entry-post-title a:hover {
color: var(--post-title-hover-color);
text-decoration-color: var(--post-title-decoration-hover-color);
}
}
.post .entry-excerpt {
color: var(--post-excerpt-color);
margin-bottom: var(--post-excerpt-offset);
}
@media screen and (min-width: 1024.02px) {
.post .entry-excerpt {
font-size: var(--post-excerpt);
}
}
.post .entry-excerpt p {
margin-bottom: 0;
}
.post .entry-post-meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--post-meta-size);
gap: var(--post-meta-gap);
color: var(--post-meta-color);
}
.post .entry-post-meta .meta-author a {
font-weight: 600;
text-decoration: none;
color: var(--post-title-color);
}
.post .entry-post-meta .meta-comments a {
text-decoration: none;
color: currentColor;
}
.post.post-module-list {
--post-title-mobile: 14px;
--post-title-desktop: 14px;
--post-title-line-height: 1.5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--post-thumbnail-offset);
}
.post.post-module-list .post-thumbnail {
width: var(--post-thumbnail-width);
height: var(--post-thumbnail-width);
margin-bottom: 0;
}
.post.post-module-list .post-content {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
/* Blog posts */
.blog-posts {
--post-offset-xs: 20px;
--post-offset-sm: 40px;
--post-offset-lg: 50px;
}
.blog-posts .post {
margin-bottom: var(--post-offset-xs);
}
@media screen and (min-width: 576.02px) {
.blog-posts .post {
margin-bottom: var(--post-offset-sm);
}
}
@media screen and (min-width: 1024.02px) {
.blog-posts .post {
margin-bottom: var(--post-offset-lg);
}
}
/* Single Post */
.post.single-post {
--post-title-mobile: 24px;
--post-title-desktop: 46px;
}
@media screen and (min-width: 1024.02px) {
.post.single-post {
--post-meta-gap: 16px;
}
}
.post.single-post .post-header {
margin-bottom: 1.25rem;
}
.post.single-post .post-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 1.25rem;
margin-top: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.post.single-post .post-footer {
margin-top: 1.875rem;
}
}
.post.single-post .post-footer > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.625rem;
}
.post.single-post .post-footer > * > span {
font-size: var(--text-sm);
font-weight: 600;
opacity: 0.4;
}
.post.single-post .post-footer .tags {
--tag-size: 12px;
--tag-weight: 600;
--tag-color: rgb(var(--colors-black));
--tag-border: rgb(var(--colors-gray-200));
--tag-background: rgb(var(--colors-white));
--tag-padding-x: 10px;
--tag-padding-y: 6px;
--tag-radius: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.post.single-post .post-footer .tags li a {
font-size: var(--tag-size);
font-weight: var(--tag-weight);
text-decoration: none;
color: var(--tag-color);
padding-inline: var(--tag-padding-x);
padding-block: var(--tag-padding-y);
background-color: var(--tag-background);
border: 1px solid var(--tag-border);
border-radius: var(--tag-radius);
}
.post.single-post .post-author-bio {
--author-font-size: 18px;
--author-description-size: 14px;
--author-gap: 24px;
--author-padding: 24px;
--author-radius: 8px;
--author-color: rgb(var(--colors-black));
--author-background: transparent;
--author-border: rgb(var(--colors-gray-200));
--author-avatar-sm: 66px;
--author-avatar-lg: 86px;
--author-avatar-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--author-gap);
margin-top: 1.25rem;
padding: var(--author-padding);
color: var(--author-color);
background-color: var(--author-background);
border: 1px solid var(--author-border);
border-radius: var(--author-radius);
}
@media screen and (min-width: 1024.02px) {
.post.single-post .post-author-bio {
margin-top: 2.5rem;
}
}
.post.single-post .post-author-bio .post-author-avatar {
position: relative;
width: var(--author-avatar-sm);
height: var(--author-avatar-sm);
overflow: hidden;
border-radius: var(--author-avatar-radius);
}
@media screen and (min-width: 1024.02px) {
.post.single-post .post-author-bio .post-author-avatar {
width: var(--author-avatar-lg);
height: var(--author-avatar-lg);
}
}
.post.single-post .post-author-bio .post-author-detail {
width: 100%;
}
@media screen and (min-width: 768.02px) {
.post.single-post .post-author-bio .post-author-detail {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
}
.post.single-post .post-author-bio .post-author-detail span {
font-size: var(--text-xs);
opacity: 0.4;
}
.post.single-post .post-author-bio .post-author-detail .author {
font-size: var(--author-font-size);
font-weight: 600;
}
.post.single-post .post-author-bio .post-author-detail .author a {
color: currentColor;
text-decoration: none;
}
.post.single-post .post-author-bio .post-author-detail p {
font-size: var(--author-description-size);
margin-bottom: 0;
}
.post.single-post .post-comments {
--comment-avatar: 56px;
--comment-avatar-lg: 66px;
--comment-avatar-gap: 16px;
--comment-avatar-radius: 50%;
margin-top: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.post.single-post .post-comments {
margin-top: 2.5rem;
}
}
.post.single-post .post-comments .comment-list {
list-style: none;
margin: 0;
padding: 0;
}
.post.single-post .post-comments .comment-list ul, .post.single-post .post-comments .comment-list ol {
list-style: none;
}
@media screen and (min-width: 1024.02px) {
.post.single-post .post-comments .comment-list ul, .post.single-post .post-comments .comment-list ol {
-webkit-padding-start: calc(var(--comment-avatar-lg) + var(--comment-avatar-gap));
padding-inline-start: calc(var(--comment-avatar-lg) + var(--comment-avatar-gap));
}
}
.post.single-post .post-comments .comment-list .comment {
position: relative;
margin-bottom: 1.5rem;
}
@media screen and (min-width: 768.02px) {
.post.single-post .post-comments .comment-list .comment {
margin-bottom: 2.625rem;
}
}
.post.single-post .post-comments .comment-list .comment .comment-body .comment-meta {
margin-bottom: 0.5rem;
}
.post.single-post .post-comments .comment-list .comment .comment-body .comment-author {
position: relative;
font-size: var(--text-sm);
line-height: 1.1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
gap: var(--comment-avatar-gap);
}
.post.single-post .post-comments .comment-list .comment .comment-body .comment-author img {
position: absolute;
top: 0;
inset-inline-start: 0;
width: var(--comment-avatar);
height: var(--comment-avatar);
border-radius: var(--comment-avatar-radius);
}
@media screen and (min-width: 768.02px) {
.post.single-post .post-comments .comment-list .comment .comment-body .comment-author img {
width: var(--comment-avatar-lg);
height: var(--comment-avatar-lg);
}
}
.post.single-post .post-comments .comment-list .comment .comment-body .comment-author a {
color: currentColor;
text-decoration: none;
}
.post.single-post .post-comments .comment-list .comment .comment-body .comment-author b {
-webkit-padding-start: calc(var(--comment-avatar) + var(--comment-avatar-gap));
padding-inline-start: calc(var(--comment-avatar) + var(--comment-avatar-gap));
}
@media screen and (min-width: 768.02px) {
.post.single-post .post-comments .comment-list .comment .comment-body .comment-author b {
-webkit-padding-start: calc(var(--comment-avatar-lg) + var(--comment-avatar-gap));
padding-inline-start: calc(var(--comment-avatar-lg) + var(--comment-avatar-gap));
}
}
.post.single-post .post-comments .comment-list .comment .comment-body .comment-author .comment-metadata {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: var(--text-xs);
color: rgb(var(--colors-gray-500));
}
.post.single-post .post-comments .comment-list .comment .comment-body .comment-author .comment-metadata a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0.0625rem;
}
.post.single-post .post-comments .comment-list .comment .comment-body .comment-content {
font-size: var(--text-sm);
-webkit-padding-start: calc(var(--comment-avatar) + var(--comment-avatar-gap));
padding-inline-start: calc(var(--comment-avatar) + var(--comment-avatar-gap));
}
@media screen and (min-width: 768.02px) {
.post.single-post .post-comments .comment-list .comment .comment-body .comment-content {
-webkit-padding-start: calc(var(--comment-avatar-lg) + var(--comment-avatar-gap));
padding-inline-start: calc(var(--comment-avatar-lg) + var(--comment-avatar-gap));
}
}
.post.single-post .post-comments .comment-list .comment .comment-body .reply {
-webkit-padding-start: calc(var(--comment-avatar) + var(--comment-avatar-gap));
padding-inline-start: calc(var(--comment-avatar) + var(--comment-avatar-gap));
}
@media screen and (min-width: 768.02px) {
.post.single-post .post-comments .comment-list .comment .comment-body .reply {
-webkit-padding-start: calc(var(--comment-avatar-lg) + var(--comment-avatar-gap));
padding-inline-start: calc(var(--comment-avatar-lg) + var(--comment-avatar-gap));
}
}
.post.single-post .post-comments .comment-list .comment .comment-body .reply a {
font-size: var(--text-xs);
font-weight: 600;
color: rgb(var(--colors-black));
text-decoration: none;
}
.post.single-post .post-comments .comment-respond {
margin-top: 1.25rem;
}
.post.single-post .post-comments .comment-respond .entry-title {
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: 0.25rem;
}
.post.single-post .post-comments .comment-respond .comment-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-inline: -0.3125rem;
}
.post.single-post .post-comments .comment-respond .comment-form > .comment-notes {
font-size: var(--text-sm);
font-weight: 500;
}
.post.single-post .post-comments .comment-respond .comment-form > * {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%;
padding-inline: 0.3125rem;
}
@media screen and (min-width: 768.02px) {
.post.single-post .post-comments .comment-respond .comment-form > *.comment-form-author, .post.single-post .post-comments .comment-respond .comment-form > *.comment-form-email {
width: 50%;
}
}
/*------------------------------------
Sidebar
------------------------------------*/
/*------------------------------------
Widgets
------------------------------------*/
.widget {
--widget-title: 15px;
--widget-title-weight: 700;
--widget-title-letter-spacing: -0.025em;
--widget-title-margin: 20px;
--widget-margin: 40px;
--widget-menu-gap: 6px;
--widget-menu-size: var(--text-sm);
--widget-menu-color: currentColor;
--widget-menu-hover-color: currentColor;
--widget-menu-decoration-offset: 5px;
--widget-menu-decoration-line: 1px;
--widget-menu-decoration-color: transparent;
--widget-menu-decoration-hover-color: currentColor;
position: relative;
margin-bottom: var(--widget-margin);
}
.widget:last-child {
margin-bottom: 0;
}
.widget .widget-title {
font-size: var(--widget-title);
font-weight: var(--widget-title-weight);
letter-spacing: var(--widget-title-letter-spacing);
margin-bottom: var(--widget-title-margin);
}
.widget nav {
--nav-gap: var(--widget-menu-gap);
}
.widget nav a {
font-size: var(--widget-menu-size);
text-underline-offset: var(--widget-menu-decoration-offset);
text-decoration-thickness: var(--widget-menu-decoration-line);
text-decoration-color: var(--widget-menu-decoration-color);
color: var(--widget-menu-color);
-webkit-transition: color var(--theme-ease-time-fast) var(--theme-ease-primary), var(--theme-text-decoration-transition);
transition: color var(--theme-ease-time-fast) var(--theme-ease-primary), var(--theme-text-decoration-transition);
}
.widget nav a:hover {
color: var(--widget-menu-hover-color);
text-decoration-color: var(--widget-menu-decoration-hover-color);
}
.widget .site-contact {
--contact-gap: 24px;
--contact-item-gap: 16px;
--contact-icon: 24px;
--contact-detail-size: var(--text-sm);
}
.widget .site-contact ul {
list-style: none;
margin: 0;
padding: 0;
}
.widget .site-contact ul li {
width: 100%;
}
.widget .site-contact ul li + li {
margin-top: var(--contact-gap);
}
.widget .site-contact ul li a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
text-decoration: none;
gap: var(--contact-item-gap);
}
.widget .site-contact ul li a .contact-icon > * {
width: var(--contact-icon);
height: auto;
}
.widget .site-contact ul li a .contact-detail {
font-size: var(--contact-detail-size);
text-decoration: none;
}
.widget .site-contact ul li a .contact-detail span {
font-weight: 700;
}
.widget .site-contact ul li a .contact-detail p {
margin-bottom: 0;
}
.widget .woocommerce-widget-layered-nav-list, .widget .widget-checkbox-list ul {
--checkbox-gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--widget-menu-gap);
font-size: var(--widget-menu-size);
list-style: none;
margin: 0;
padding: 0;
}
.widget .woocommerce-widget-layered-nav-list a, .widget .woocommerce-widget-layered-nav-list .type-button, .widget .widget-checkbox-list ul a, .widget .widget-checkbox-list ul .type-button {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--checkbox-gap);
color: var(--widget-menu-color);
text-decoration: none;
-webkit-transition: color var(--theme-ease-time-fast) var(--theme-ease-primary), var(--theme-text-decoration-transition);
transition: color var(--theme-ease-time-fast) var(--theme-ease-primary), var(--theme-text-decoration-transition);
}
.widget .woocommerce-widget-layered-nav-list a:hover, .widget .woocommerce-widget-layered-nav-list .type-button:hover, .widget .widget-checkbox-list ul a:hover, .widget .widget-checkbox-list ul .type-button:hover {
color: var(--widget-menu-hover-color);
}
.widget .woocommerce-widget-layered-nav-list a label, .widget .woocommerce-widget-layered-nav-list .type-button label, .widget .widget-checkbox-list ul a label, .widget .widget-checkbox-list ul .type-button label {
width: auto;
cursor: pointer;
margin-bottom: 0;
}
.widget .woocommerce-widget-layered-nav-list a .count, .widget .woocommerce-widget-layered-nav-list .type-button .count, .widget .widget-checkbox-list ul a .count, .widget .widget-checkbox-list ul .type-button .count {
font-size: var(--text-xs);
-webkit-margin-start: auto;
margin-inline-start: auto;
opacity: 0.5;
}
.widget .woocommerce-widget-layered-nav-list .type-button, .widget .widget-checkbox-list ul .type-button {
--check-icon: 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='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
--checkbox-background: rgb(var(--colors-white));
--checkbox-hover-background: rgb(var(--colors-white));
--checkbox-border: rgb(var(--colors-gray-300));
--checkbox-hover-border: rgba(var(--colors-gray-400), 0.6);
--checkbox-shadow: var(--shadow-xs);
--checkbox-checked-color: rgb(var(--colors-primary-foreground));
--checkbox-checked-background: rgb(var(--colors-primary-background));
--checkbox-checked-border: rgb(var(--colors-primary-background));
--checkbox-focus-outline: rgba(var(--colors-primary-background), 0.2);
width: 100%;
}
.widget .woocommerce-widget-layered-nav-list .type-button .button-box, .widget .widget-checkbox-list ul .type-button .button-box {
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: var(--form-checkbox-size);
height: var(--form-checkbox-size);
background-color: var(--checkbox-background);
border: 1px solid var(--checkbox-border);
border-radius: calc(var(--theme-radius) / 2);
-webkit-box-shadow: var(--checkbox-shadow);
box-shadow: var(--checkbox-shadow);
outline: 2px solid transparent;
outline-offset: 1px;
}
@media (hover: hover) and (pointer: fine) {
.widget .woocommerce-widget-layered-nav-list .type-button .button-box:hover, .widget .widget-checkbox-list ul .type-button .button-box:hover {
border-color: var(--checkbox-hover-border);
background-color: var(--checkbox-hover-background);
}
}
.widget .woocommerce-widget-layered-nav-list .type-button a, .widget .widget-checkbox-list ul .type-button a {
-webkit-padding-start: calc(var(--form-checkbox-size) + var(--checkbox-gap));
padding-inline-start: calc(var(--form-checkbox-size) + var(--checkbox-gap));
}
@media (hover: hover) and (pointer: fine) {
.widget .woocommerce-widget-layered-nav-list .type-button:has(a:hover) .button-box, .widget .widget-checkbox-list ul .type-button:has(a:hover) .button-box {
border-color: var(--checkbox-hover-border);
background-color: var(--checkbox-hover-background);
}
}
.widget .woocommerce-widget-layered-nav-list .chosen .type-button .button-box, .widget .widget-checkbox-list ul .chosen .type-button .button-box {
color: var(--checkbox-checked-color) !important;
background-image: var(--check-icon) !important;
background-color: var(--checkbox-checked-background) !important;
border-color: var(--checkbox-checked-border) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: var(--form-checkbox-size) var(--form-checkbox-size) !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.widget .woocommerce-widget-layered-nav-list .chosen .type-button a, .widget .widget-checkbox-list ul .chosen .type-button a {
font-weight: 500;
color: var(--checkbox-checked-background);
}
.widget .price_slider_wrapper {
--form-input-size-base: 40px;
--form-button-size-base: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0.75rem;
}
.widget .price_slider_wrapper > * {
width: 100%;
}
.widget .price_slider_wrapper .price_slider_amount {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin-top: 0.625rem;
}
.widget .price_slider_wrapper .price_slider_amount .min-price, .widget .price_slider_wrapper .price_slider_amount .max-price {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.widget .price_slider_wrapper .price_slider_amount .min-price .price-placeholder, .widget .price_slider_wrapper .price_slider_amount .max-price .price-placeholder {
display: none;
}
.widget .price_slider_wrapper .price_slider_amount .separator {
margin-inline: 0.5rem;
}
.widget .price_slider_wrapper .price_slider {
--range-height: 4px;
--range-background-color: rgb(var(--colors-gray-200));
--range-slider-color: rgb(var(--colors-primary-background));
--range-slider-dot-color: rgb(var(--colors-white));
--range-handle-size: 14px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: var(--range-height);
background-color: var(--range-background-color);
border-radius: 1.25rem;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.widget .price_slider_wrapper .price_slider .ui-slider-range {
position: absolute;
display: block;
width: 100%;
height: var(--range-height);
border-radius: 1.25rem;
background-color: var(--range-slider-color);
}
.widget .price_slider_wrapper .price_slider .ui-slider-handle {
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: var(--range-handle-size);
height: var(--range-handle-size);
border-radius: 50%;
background-color: var(--range-slider-color);
cursor: pointer;
z-index: 1;
}
.widget .price_slider_wrapper .price_slider .ui-slider-handle::before {
content: "";
display: block;
width: calc(var(--range-handle-size) / 2 - 3px);
height: calc(var(--range-handle-size) / 2 - 3px);
background-color: var(--range-slider-dot-color);
border-radius: 50%;
}
.widget .price_slider_wrapper .price_slider .ui-slider-handle:nth-child(3) {
-webkit-margin-start: calc(var(--range-handle-size) * -1);
margin-inline-start: calc(var(--range-handle-size) * -1);
}
.widget .price_slider_wrapper .price_slider_bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.widget .price_slider_wrapper .price_slider_bottom .price_label {
font-size: var(--text-sm);
-webkit-margin-end: auto;
margin-inline-end: auto;
}
.widget .post {
margin-bottom: 1.875rem;
}
.widget .post:last-child {
margin-bottom: 0;
}
/*------------------------------------
WooCommerce
------------------------------------*/
/* Product style */
.product {
--product-inner-padding: 0;
--product-color: rgb(var(--colors-black));
--product-background: transparent;
--product-border: transparent;
--product-border-radius: 0;
--product-thumbnail-offset: 16px;
--product-thumbnail-radius: var(--theme-radius);
--product-body-gap: 10px;
--product-header-gap: 10px;
--product-cart-gap: 12px;
--product-footer-gap: 12px;
--product-footer-border: rgb(var(--colors-gray-200));
--product-name-font-size-lg: 14px;
--product-name-font-size-xs: 13px;
--product-name-font-weight: 500;
--product-name-line-height: 1.55;
--product-name-letter-spacing: -0.02em;
--product-name-line-clamp: 2;
--product-name-hover-color: currentColor;
--product-name-decoration-offset: 3px;
--product-name-decoration-width: 1px;
--product-name-decoration-color: transparent;
--product-name-decoration-hover-color: rgb(var(--colors-gray-400));
--product-name-decoration-transition-duration: var(--theme-ease-time-fast);
--product-name-decoration-transition-timing: var(--theme-ease-in-out);
--product-name-decoration-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
--product-hidden-content-border: rgb(var(--colors-gray-200));
--product-hidden-content-background: rgb(var(--colors-white));
--product-hidden-content-shadow: var(--shadow-xs);
--product-hidden-content-rounded: var(--theme-radius);
position: relative;
}
.product * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.product .product-inner {
padding: var(--product-inner-padding);
color: var(--product-color);
background-color: var(--product-background);
border: 1px solid var(--product-border);
border-radius: var(--product-border-radius);
}
.product .product-inner.product-list {
--product-list-gap: 20px;
--product-thumbnail-width: 44%;
--product-thumbnail-width-sm: 44%;
--product-thumbnail-width-lg: 44%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: var(--product-list-gap);
}
.product .product-inner.product-list .product-thumbnail {
width: var(--product-thumbnail-width);
margin-bottom: 0;
}
@media screen and (min-width: 576.02px) {
.product .product-inner.product-list .product-thumbnail {
width: var(--product-thumbnail-width-sm);
}
}
@media screen and (min-width: 1024.02px) {
.product .product-inner.product-list .product-thumbnail {
width: var(--product-thumbnail-width-lg);
}
}
.product .product-inner.product-list .product-body {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.product .product-inner.product-list-archive {
--product-name-font-size-lg: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1rem;
}
@media screen and (min-width: 1024.02px) {
.product .product-inner.product-list-archive {
gap: 1.5rem;
}
}
.product .product-inner.product-list-archive .product-thumbnail {
width: 40%;
margin-bottom: 0;
}
@media screen and (min-width: 576.02px) {
.product .product-inner.product-list-archive .product-thumbnail {
width: 20%;
}
}
@media screen and (min-width: 1024.02px) {
.product .product-inner.product-list-archive .product-thumbnail {
width: 24%;
}
}
.product .product-inner.product-list-archive .product-body {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.product .product-inner.product-list-archive .product-body .product-excerpt {
display: none;
font-size: var(--text-xs);
color: rgb(var(--colors-gray-600));
}
@media screen and (min-width: 576.02px) {
.product .product-inner.product-list-archive .product-body .product-excerpt {
display: block;
}
}
@media screen and (min-width: 1024.02px) {
.product .product-inner.product-list-archive .product-body .product-excerpt {
margin-top: 0.625rem;
}
}
.product .product-inner.product-list-archive .product-body .product-price-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (min-width: 576.02px) {
.product .product-inner.product-list-archive .product-body .product-price-wrapper {
display: none;
}
}
.product .product-inner.product-list-archive .product-cart {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.625rem;
width: 100%;
}
@media screen and (min-width: 576.02px) {
.product .product-inner.product-list-archive .product-cart {
width: 12.5rem;
}
}
@media screen and (min-width: 1024.02px) {
.product .product-inner.product-list-archive .product-cart {
width: 16.25rem;
}
}
.product .product-inner.product-list-archive .product-cart .product-price-wrapper {
display: none;
}
@media screen and (min-width: 576.02px) {
.product .product-inner.product-list-archive .product-cart .product-price-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.product .product-inner.product-list-archive .product-cart .product-price-wrapper .price {
--price-font-size-lg: 26px;
}
@media screen and (min-width: 1024.02px) {
.product .product-inner.product-list-archive .product-cart .product-price-wrapper .price {
margin-top: -0.125rem;
}
}
@media screen and (min-width: 1024.02px) {
.product .product-inner.product-list-archive .product-cart .button {
--form-button-size-sm: 42px;
--form-button-font-size-sm: 14px;
}
}
.product .product-thumbnail {
--product-action-position: 10px;
position: relative;
margin-bottom: var(--product-thumbnail-offset);
}
.product .product-thumbnail .product-badge {
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.25rem;
top: var(--product-action-position);
inset-inline-start: var(--product-action-position);
pointer-events: none;
z-index: 1;
}
.product .product-thumbnail .product-badge .badge.style-1 {
-webkit-margin-start: calc((var(--product-action-position) + var(--badge-border-width) * 2) * -1);
margin-inline-start: calc((var(--product-action-position) + var(--badge-border-width) * 2) * -1);
}
.product .product-thumbnail .product-action {
--action-gap: 2px;
--action-size: 32px;
--action-icon-size: 21px;
--action-radius: 50%;
--action-background: transparent;
--action-border-color: transparent;
--action-color: rgb(var(--colors-black));
--action-background-hover: rgb(var(--colors-white));
--action-color-hover: var(--text-gray-600);
--action-border-color: transparent;
--action-transform: 8px;
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: var(--action-gap);
top: var(--product-action-position);
inset-inline-end: var(--product-action-position);
z-index: 1;
}
.product .product-thumbnail .product-action > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition: all var(--theme-ease-time-medium) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-medium) var(--theme-ease-in-out);
}
.product .product-thumbnail .product-action > * a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-decoration: none;
width: var(--action-size);
height: var(--action-size);
border-radius: var(--action-radius);
border: 1px solid var(--action-border-color);
background-color: var(--action-background);
color: var(--action-color);
-webkit-transition: all var(--theme-ease-time-medium) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-medium) var(--theme-ease-in-out);
}
.product .product-thumbnail .product-action > * a > * {
width: var(--action-icon-size);
height: var(--action-icon-size);
}
@media (hover: hover) and (pointer: fine) {
.product .product-thumbnail .product-action > * a:hover {
background-color: var(--action-background-hover);
color: var(--action-color-hover);
border-color: var(--action-border-color);
}
}
@media screen and (min-width: 1024.02px) {
.product .product-thumbnail .product-action.animation-all > *, .product .product-thumbnail .product-action.animation-after > *:not(:first-child) {
-webkit-transform: translateX(var(--action-transform));
transform: translateX(var(--action-transform));
opacity: 0;
}
.product .product-thumbnail .product-action.animation-all > *:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.product .product-thumbnail .product-action.animation-all > *:nth-child(3) {
-webkit-transition-delay: 0.075s;
transition-delay: 0.075s;
}
.product .product-thumbnail .product-action.animation-all > *:nth-child(4) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.product .product-thumbnail .product-action.animation-after > *:not(:first-child):nth-child(3) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.product .product-thumbnail .product-action.animation-after > *:not(:first-child):nth-child(4) {
-webkit-transition-delay: 0.075s;
transition-delay: 0.075s;
}
}
.product .product-thumbnail .product-media {
--product-media-border: rgb(var(--colors-gray-200));
--product-media-background: transparent;
}
.product .product-thumbnail .product-media a {
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: var(--product-thumbnail-radius);
background-color: var(--product-media-background);
border: 1px solid var(--product-media-border);
overflow: hidden;
}
.product .product-thumbnail .product-media a .secondary-media {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: all var(--theme-ease-time-medium) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-medium) var(--theme-ease-in-out);
}
.product .product-body {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 100%;
gap: var(--product-body-gap);
}
.product .product-body > * {
width: 100%;
}
.product .product-body .product-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: var(--product-header-gap);
}
.product .product-body .product-cart {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: var(--product-cart-gap);
}
.product .product-title {
font-family: var(--theme-product-name-font);
font-size: var(--product-name-font-size-xs);
font-weight: var(--product-name-font-weight);
letter-spacing: var(--product-name-letter-spacing);
line-height: var(--product-name-line-height);
margin-bottom: 0;
}
@media screen and (min-width: 1024.02px) {
.product .product-title {
font-size: var(--product-name-font-size-lg);
}
}
.product .product-title a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--product-name-line-clamp);
color: currentColor;
text-underline-offset: var(--product-name-decoration-offset);
text-decoration-thickness: var(--product-name-decoration-width);
text-decoration-color: var(--product-name-decoration-color);
-webkit-transition-duration: var(--product-name-decoration-transition-duration);
transition-duration: var(--product-name-decoration-transition-duration);
-webkit-transition-timing-function: var(--product-name-decoration-transition-timing);
transition-timing-function: var(--product-name-decoration-transition-timing);
-webkit-transition-property: var(--product-name-decoration-transition-property);
transition-property: var(--product-name-decoration-transition-property);
}
@media (hover: hover) and (pointer: fine) {
.product .product-title a:hover {
color: var(--product-name-hover-color);
text-decoration-color: var(--product-name-decoration-hover-color);
}
}
.product .product-meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1rem;
}
@media screen and (min-width: 1024.02px) {
.product .product-meta {
gap: 1.25rem;
}
}
.product .product-sku {
font-size: var(--text-xs);
}
.product .product-sku span:not(.sku) {
color: rgb(var(--colors-gray-500));
}
.product .product-sku span.sku {
font-weight: 600;
}
.product .product-delivery {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.375rem;
font-size: var(--text-xs);
}
.product .product-delivery p {
margin-bottom: 0;
}
.product .product-delivery svg, .product .product-delivery img {
width: 1rem;
height: auto;
}
.product .product-price-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.product .product-price-wrapper .price + .product-price-vat {
margin-top: 0.25rem;
}
.product .product-price-button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
gap: 0.625rem;
margin-bottom: 0.5rem;
}
.product .product-price-button a {
--form-button-size-base: 38px;
--button-icon-size: 18px;
}
.product .product-price-vat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
gap: 0.25rem;
}
.product .product-price-vat > * {
font-size: calc(var(--text-xs) - 1px);
line-height: 1.2;
}
.product .product-price-vat > *.price-unit {
color: rgb(var(--colors-gray-700));
}
.product .product-price-vat > *.price-vat-text {
color: rgb(var(--colors-gray-500));
}
.product .product-cart-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
gap: 0.5rem;
}
.product .product-cart-button > a {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.product .product-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: var(--product-footer-gap);
width: 100%;
}
.product .product-footer.padding {
padding-top: 0.625rem;
}
.product .product-footer.bordered {
border-top: 1px solid var(--product-footer-border);
}
.product .product-footer .product-excerpt {
font-size: var(--text-xs);
color: rgb(var(--colors-gray-700));
margin-bottom: 0;
}
.product .product-footer ul {
font-size: var(--text-xs);
margin: 0;
padding: 0 0 0 1rem;
color: rgb(var(--colors-gray-700));
}
.product .product-footer ul li + li {
margin-top: 0.125rem;
}
@media screen and (min-width: 1024.02px) {
.product .product-footer.hidden-content {
position: absolute;
opacity: 0;
visibility: hidden;
top: 100%;
}
}
.product .site-countdown {
padding-top: calc(var(--product-cart-gap) - 1px);
border-top: 1px solid rgb(var(--colors-gray-200));
}
.product .site-countdown .countdown-item:has(.countdown-time-seconds) {
--countdown-item-background: rgb(var(--colors-red-light));
--countdown-item-foreground: rgb(var(--colors-red-base));
--countdown-item-muted: rgba(var(--colors-red-base), 0.6);
--countdown-item-border: rgba(var(--colors-red-base), 0.2);
}
.product .product-progress {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.375rem;
width: 100%;
padding-top: calc(var(--product-cart-gap) - 1px);
border-top: 1px solid rgb(var(--colors-gray-200));
}
.product .product-progress > * {
width: 100%;
}
.product .product-progress .product-progress-message {
font-size: calc(var(--text-xs) - 1px);
}
.product .product-progress .site-progress {
--progress-height: 5px;
--progress-background: rgb(var(--colors-gray-200));
--progress-bar: rgb(var(--colors-red-base));
}
.product .product-progress .product-progress-stock {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: var(--text-xs);
color: rgb(var(--colors-gray-500));
}
.product .product-progress .product-progress-stock strong {
color: rgb(var(--colors-gray-700));
}
.product .product-hidden-content {
position: absolute;
display: none;
inset-block: calc(var(--theme-product-hidden-padding) * -1);
inset-inline: calc(var(--theme-product-hidden-padding) * -1);
background-color: var(--product-hidden-content-background);
border: 1px solid var(--product-hidden-content-border);
border-radius: var(--product-hidden-content-rounded);
-webkit-box-shadow: var(--product-hidden-content-shadow);
box-shadow: var(--product-hidden-content-shadow);
pointer-events: none;
z-index: -1;
}
.product .product-stock {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--text-xs);
font-weight: 500;
}
.product .product-stock::before {
content: "";
display: block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: rgb(var(--colors-gray-400));
-webkit-margin-end: 0.25rem;
margin-inline-end: 0.25rem;
}
.product .product-stock.in-stock {
color: rgb(var(--colors-green-base));
}
.product .product-stock.in-stock::before {
background-color: rgb(var(--colors-green-base));
}
.product .product-stock.out-of-stock {
color: rgb(var(--colors-red-base));
}
.product .product-stock.out-of-stock::before {
background-color: rgb(var(--colors-red-base));
}
.product:has(.product-footer.hidden-content.bordered) .product-body {
padding-bottom: var(--product-footer-gap);
}
.product:has(.product-footer.hidden-content.bordered) .product-body .product-footer > *:first-child.product-cart-button {
padding-top: 0.125rem;
}
@media (hover: hover) and (pointer: fine) {
.products .product:hover .product-thumbnail .product-action.animation-all > *, .products .product:hover .product-thumbnail .product-action.animation-after > * {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.products .product:hover .product-thumbnail .product-media a .secondary-media {
opacity: 1;
}
}
@media screen and (hover: hover) and (pointer: fine) and (min-width: 1024.02px) {
.products .product:hover:has(.product-hidden-content) {
z-index: 11;
}
.products .product:hover:has(.product-hidden-content) .product-footer.hidden-content {
opacity: 1;
visibility: visible;
}
.products .product:hover:has(.product-hidden-content) .product-hidden-content {
display: block;
}
}
/* Product rating */
.product-rating {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
}
.product-rating .rating-score {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--text-xs);
line-height: 1;
gap: 0.25rem;
top: 0.0625rem;
}
.product-rating .rating-score .score {
font-weight: 700;
}
.product-rating .rating-score .total-rating {
font-size: calc(var(--text-xs) - 1px);
color: rgb(var(--colors-gray-500));
}
/* Product price */
.price {
--price-gap: 6px;
--price-font-size-lg: 22px;
--price-font-size-xs: 20px;
--price-font-weight: 600;
--price-font-line-height: 1.55;
--price-font-letter-spacing: -0.02em;
--price-font-color: rgb(var(--colors-gray-900));
--price-font-color-secondary: rgb(var(--colors-gray-400));
--price-sale-font-size: 76%;
--price-sale-font-weight: 400;
--price-sale-color: rgb(var(--colors-green-base));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
gap: var(--price-gap);
font-family: var(--theme-product-price-font);
font-size: var(--price-font-size-xs);
font-weight: var(--price-font-weight);
line-height: var(--price-font-line-height);
letter-spacing: var(--price-font-letter-spacing);
color: var(--price-font-color);
}
@media screen and (min-width: 1024.02px) {
.price {
font-size: var(--price-font-size-lg);
}
}
.price ins {
text-decoration: none;
color: var(--price-sale-color);
}
.price del {
font-size: var(--price-sale-font-size);
font-weight: var(--price-sale-font-weight);
color: var(--price-font-color-secondary);
}
/* Shop style */
/* Breadcrumb */
.woocommerce-breadcrumb {
--breadcrumb-size: 12px;
--breadcrumb-color: rgb(var(--colors-gray-400));
}
.woocommerce-breadcrumb ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: var(--breadcrumb-size);
list-style: none;
margin: 0;
padding: 0.5rem 0;
}
@media screen and (min-width: 1024.02px) {
.woocommerce-breadcrumb ul {
padding: 0.75rem 0;
}
}
.woocommerce-breadcrumb ul li {
position: relative;
}
.woocommerce-breadcrumb ul li::after {
content: "/";
color: var(--breadcrumb-color);
margin-inline: 0.375rem;
}
.woocommerce-breadcrumb ul li:last-child::after {
display: none;
}
.woocommerce-breadcrumb ul li a {
color: var(--breadcrumb-color);
text-decoration: none;
}
@media screen and (max-width: 575.98px) {
.woocommerce-breadcrumb ul li:not(:has(a)) {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 240px;
}
}
/* Before shop loop */
.before-shop-loop {
--before-loop-muted: rgb(var(--colors-gray-500));
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.625rem;
margin-bottom: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.before-shop-loop {
margin-bottom: 1.875rem;
}
}
.before-shop-loop > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
gap: 0.625rem;
}
.before-shop-loop .woocommerce-result-count {
display: none;
font-size: var(--text-xs);
color: var(--before-loop-muted);
margin-bottom: 0;
}
@media screen and (min-width: 576.02px) {
.before-shop-loop .woocommerce-result-count {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
}
.before-shop-loop .sorting-wrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.375rem;
}
.before-shop-loop .sorting-wrapper > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.5rem;
}
.before-shop-loop .sorting-wrapper > * > span {
font-size: var(--text-xs);
color: var(--before-loop-muted);
}
.before-shop-loop .product-views {
--views-size: 32px;
--views-icon-size: 18px;
--views-radius: var(--radius-sm);
--views-border: rgb(var(--colors-gray-300));
--views-background: rgb(var(--colors-white));
--views-color: rgb(var(--colors-gray-500));
--views-hover-border: rgba(var(--colors-gray-400), 0.6);
--views-hover-background: rgb(var(--colors-white));
--views-hover-color: rgb(var(--colors-black));
--views-active-border: rgba(var(--colors-primary-background), 0.3);
--views-active-background: rgba(var(--colors-primary-background), 0.05);
--views-active-color: rgb(var(--colors-primary-background));
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.25rem;
}
.before-shop-loop .product-views > * {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-decoration: none;
width: var(--views-size);
height: var(--views-size);
color: var(--views-color);
background-color: var(--views-background);
border-radius: var(--views-radius);
border: 1px solid var(--views-border);
-webkit-transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.before-shop-loop .product-views > *:hover {
color: var(--views-hover-color);
background-color: var(--views-hover-background);
border-color: var(--views-hover-border);
}
.before-shop-loop .product-views > *.active {
color: var(--views-active-color);
background-color: var(--views-active-background);
border-color: var(--views-active-border);
}
.before-shop-loop .product-views > * > * {
width: var(--views-icon-size);
height: auto;
}
@media screen and (min-width: 576.02px) {
.before-shop-loop .product-views {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
}
.before-shop-loop .site-filter-button {
--filter-button-icon-size: 17px;
--filter-button-color: rgb(var(--colors-black));
--filter-button-color-hover: rgb(var(--colors-black));
--filter-button-background: rgb(var(--colors-white));
--filter-button-background-hover: rgb(var(--colors-white));
--filter-button-border: rgb(var(--colors-gray-300));
--filter-button-border-hover: rgba(var(--colors-gray-400), 0.6);
--filter-button-border-width: 1px;
--filter-button-shadow: var(--shadow-xs);
--filter-button-radius: var(--theme-radius);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.before-shop-loop .site-filter-button > a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--form-input-font-size-sm);
font-weight: var(--form-input-font-weight);
text-decoration: none;
gap: 0.375rem;
height: var(--form-input-size-sm);
padding-inline: calc(var(--form-input-size-sm) / 3);
color: var(--filter-button-color);
background-color: var(--filter-button-background);
border: var(--filter-button-border-width) solid var(--filter-button-border);
-webkit-box-shadow: var(--filter-button-shadow);
box-shadow: var(--filter-button-shadow);
border-radius: var(--filter-button-radius);
-webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-webkit-transition-timing-function: var(--theme-ease-in-out);
transition-timing-function: var(--theme-ease-in-out);
-webkit-transition-duration: var(--theme-ease-time-fast);
transition-duration: var(--theme-ease-time-fast);
}
.before-shop-loop .site-filter-button > a svg, .before-shop-loop .site-filter-button > a img {
position: relative;
width: var(--filter-button-icon-size);
height: auto;
inset-inline-start: -0.125rem;
}
@media (hover: hover) and (pointer: fine) {
.before-shop-loop .site-filter-button > a:hover {
color: var(--filter-button-color-hover);
background-color: var(--filter-button-background-hover);
border-color: var(--filter-button-border-hover);
}
}
@media screen and (min-width: 1024.02px) {
.before-shop-loop .site-filter-button:has(.toggle-button) {
display: none;
}
}
@media screen and (max-width: 1023.98px) {
.before-shop-loop .site-filter-button:has(.dropdown-button) {
display: none;
}
}
.before-shop-loop .site-filter-button .dropdown-holder {
--dropdown-holder-background: rgb(var(--colors-white));
--dropdown-holder-border: rgb(var(--colors-gray-200));
--dropdown-holder-shadow: var(--shadow-md);
position: absolute;
display: none;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2.5rem;
width: 100%;
top: calc(100% + 0.625rem);
background-color: var(--dropdown-holder-background);
border: 1px solid var(--dropdown-holder-border);
-webkit-box-shadow: var(--dropdown-holder-shadow);
box-shadow: var(--dropdown-holder-shadow);
border-radius: var(--theme-radius);
padding: 1.875rem;
z-index: 2;
}
.before-shop-loop .site-filter-button .dropdown-holder > * {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.before-shop-loop .site-filter-button .dropdown-holder.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.before-shop-loop.filled {
background-color: rgb(var(--colors-gray-100));
border-radius: var(--theme-radius);
padding: 0.625rem;
}
@media screen and (min-width: 1024.02px) {
.before-shop-loop.filled {
padding: 1rem;
}
}
/* Products */
.products:has(.product-list-archive).grid-bordered .product {
border-bottom: 1px solid rgb(var(--colors-gray-200));
padding-block: 1rem;
}
@media screen and (min-width: 1024.02px) {
.products:has(.product-list-archive).grid-bordered .product {
padding-block: 1.875rem;
}
}
.products:has(.product-list-archive).grid-bordered .product:first-child {
padding-top: 0 !important;
}
.products:has(.product-list-archive).grid-bordered .product:last-child {
border-bottom: 0;
padding-bottom: 0 !important;
}
/* Notice */
.woocommerce-notice {
--notice-size: 13px;
--notice-progress-height: 4px;
--notice-color: rgb(var(--colors-gray-900));
--notice-background: rgb(var(--colors-gray-50));
--notice-border: rgb(var(--colors-gray-200));
--notice-progress-background: rgb(var(--colors-gray-200));
--notice-progress-active: rgb(var(--colors-gray-900));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0.625rem;
color: var(--notice-color);
background-color: var(--notice-background);
border: 1px solid var(--notice-border);
border-radius: var(--theme-radius);
padding: 0.625rem;
}
@media screen and (min-width: 576.02px) {
.woocommerce-notice {
padding: 1.25rem;
}
}
.woocommerce-notice .notice-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
}
.woocommerce-notice .notice-header p {
font-size: var(--notice-size);
font-weight: 400;
margin-bottom: 0;
}
.woocommerce-notice .notice-header svg, .woocommerce-notice .notice-header img {
width: calc(var(--notice-size) + 0.1875rem);
}
.woocommerce-notice .shipping-progress {
position: relative;
width: 100%;
height: var(--notice-progress-height);
border-radius: 5.625rem;
background-color: var(--notice-progress-background);
}
.woocommerce-notice .shipping-progress span {
position: absolute;
top: 0;
height: var(--notice-progress-height);
inset-inline-start: 0;
background-color: var(--notice-progress-active);
border-radius: 5.625rem;
}
.woocommerce-notice.red {
--notice-color: rgb(var(--colors-red-dark));
--notice-background: rgba(var(--colors-red-light), 0.4);
--notice-border: rgba(var(--colors-red-base), 0.3);
--notice-progress-background: rgba(var(--colors-red-dark), 0.12);
--notice-progress-active: rgb(var(--colors-red-base));
}
.woocommerce-notice.green {
--notice-color: rgb(var(--colors-green-dark));
--notice-background: rgba(var(--colors-green-light), 0.4);
--notice-border: rgba(var(--colors-green-base), 0.3);
--notice-progress-background: rgba(var(--colors-green-dark), 0.12);
--notice-progress-active: rgb(var(--colors-green-base));
}
/* Quickview */
.quickview {
--quickview-width: 1024px;
position: relative;
max-width: var(--quickview-width);
background-color: rgb(var(--colors-white));
margin-left: auto;
margin-right: auto;
padding: 1.25rem;
border-radius: var(--theme-radius);
}
@media screen and (min-width: 768.02px) {
.quickview {
padding: 2rem;
}
}
.quickview .single-product-wrapper {
--product-gallery-thumbnail: 62px;
--product-title-lg: 27px;
}
.quickview .single-product-wrapper .woocommerce-product-details__short-description {
font-size: var(--text-sm) !important;
}
@media screen and (min-width: 1024.02px) {
.quickview .single-product-wrapper .product .product-gallery-column.vertical-gallery {
--product-gallery-width: 50%;
-webkit-padding-start: calc(var(--product-gallery-thumbnail) + 0.5rem);
padding-inline-start: calc(var(--product-gallery-thumbnail) + 0.5rem);
}
}
.quickview .mfp-close {
font-size: var(--text-2xl);
padding: 0;
background-color: transparent !important;
}
/* Cart style */
.cart-wrapper {
--cart-collaterals-width: 320px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.cart-wrapper {
gap: var(--theme-padding);
}
}
.cart-wrapper > * {
width: 100%;
}
@media screen and (min-width: 1024.02px) {
.cart-wrapper > *.woocommerce-cart-form, .cart-wrapper > *#customer_details {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
-webkit-padding-end: 1rem;
padding-inline-end: 1rem;
}
.cart-wrapper > *.cart-collaterals, .cart-wrapper > *.order-review-wrapper {
width: var(--cart-collaterals-width);
}
}
.cart-wrapper .woocommerce-cart-form .woocommerce-notice {
margin-bottom: 1.25rem;
}
/* Shop table */
.shop_table {
--table-border-color: rgb(var(--colors-gray-200));
font-size: var(--text-sm);
width: 100%;
}
.shop_table tr {
border-top: 1px solid var(--table-border-color);
}
.shop_table thead tr {
border-top: 0;
}
.shop_table th, .shop_table td {
padding-inline: 0.625rem;
padding-block: 0.75rem;
}
@media screen and (min-width: 1024.02px) {
.shop_table th, .shop_table td {
padding-inline: 1rem;
}
}
.shop_table th:first-child, .shop_table td:first-child {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.shop_table th:last-child, .shop_table td:last-child {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
@media screen and (max-width: 575.98px) {
.shop_table th.product-price, .shop_table td.product-price {
display: none;
}
}
.shop_table th.product-remove .product-remove-button, .shop_table td.product-remove .product-remove-button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-decoration: none;
width: 1.25rem;
height: 1.25rem;
color: rgb(var(--colors-black));
border: 1px solid rgb(var(--colors-gray-200));
background-color: rgb(var(--colors-white));
border-radius: var(--radius-xs);
-webkit-box-shadow: var(--shadow-xs);
box-shadow: var(--shadow-xs);
-webkit-transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.shop_table th.product-remove .product-remove-button svg, .shop_table td.product-remove .product-remove-button svg {
width: 0.875rem;
height: auto;
}
.shop_table th.product-remove .product-remove-button:hover, .shop_table td.product-remove .product-remove-button:hover {
border-color: rgb(var(--colors-gray-300));
}
.shop_table thead th {
font-size: var(--text-xs);
font-weight: 500;
color: rgb(var(--colors-gray-500));
}
.shop_table tbody td.product-thumbnail {
width: 0;
}
.shop_table tbody td.product-thumbnail a {
position: relative;
display: block;
width: 3.5rem;
border-radius: var(--theme-radius);
overflow: hidden;
border: 1px solid rgb(var(--colors-gray-100));
}
.shop_table tbody td.product-name {
--product-name-font-size-lg: 14px;
--product-name-font-size-xs: 13px;
--product-name-font-weight: 500;
--product-name-line-height: 1.55;
--product-name-letter-spacing: -0.02em;
--product-name-line-clamp: 2;
--product-name-hover-color: currentColor;
--product-name-decoration-offset: 3px;
--product-name-decoration-width: 1px;
--product-name-decoration-color: transparent;
--product-name-decoration-hover-color: rgb(var(--colors-gray-400));
--product-name-decoration-transition-duration: var(--theme-ease-time-fast);
--product-name-decoration-transition-timing: var(--theme-ease-in-out);
--product-name-decoration-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
}
.shop_table tbody td.product-name a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--product-name-line-clamp);
color: currentColor;
font-family: var(--theme-product-name-font);
font-size: var(--product-name-font-size-xs);
font-weight: var(--product-name-font-weight);
letter-spacing: var(--product-name-letter-spacing);
line-height: var(--product-name-line-height);
text-underline-offset: var(--product-name-decoration-offset);
text-decoration-thickness: var(--product-name-decoration-width);
text-decoration-color: var(--product-name-decoration-color);
-webkit-transition-duration: var(--product-name-decoration-transition-duration);
transition-duration: var(--product-name-decoration-transition-duration);
-webkit-transition-timing-function: var(--product-name-decoration-transition-timing);
transition-timing-function: var(--product-name-decoration-transition-timing);
-webkit-transition-property: var(--product-name-decoration-transition-property);
transition-property: var(--product-name-decoration-transition-property);
}
@media (hover: hover) and (pointer: fine) {
.shop_table tbody td.product-name a:hover {
color: var(--product-name-hover-color);
text-decoration-color: var(--product-name-decoration-hover-color);
}
}
.shop_table tbody td.product-remove {
width: 0;
}
.shop_table tbody td.product-subtotal {
font-weight: 600;
}
.shop_table .actions-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.5rem;
padding-block: 0.625rem;
}
.shop_table .actions-wrapper .coupon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.375rem;
}
@media screen and (min-width: 576.02px) {
.shop_table .actions-wrapper .coupon {
-webkit-margin-end: auto;
margin-inline-end: auto;
}
}
.shop_table .actions-wrapper .coupon label {
display: none;
}
.shop_table .actions-wrapper .coupon input {
width: auto;
min-width: 16.25rem;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.shop_table .actions-wrapper .coupon button {
color: rgb(var(--colors-white));
background-color: rgb(var(--colors-black));
}
.shop_table .actions-wrapper .coupon button:hover {
opacity: 0.9;
}
.shop_table .actions-wrapper button {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
@media screen and (min-width: 576.02px) {
.shop_table .actions-wrapper button {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
}
/* Cart totals */
.cart_totals .shop_table tbody tr {
border-top: 0;
}
.cart_totals .shop_table tbody tr.order-total {
border-top: 1px solid var(--table-border-color);
}
.cart_totals .shop_table th {
font-size: var(--text-xs);
font-weight: 600;
}
.cart_totals .shop_table td {
text-align: end;
}
.cart_totals .wc-proceed-to-checkout a {
width: 100%;
color: rgb(var(--colors-primary-foreground));
background-color: rgb(var(--colors-primary-background));
}
.cart_totals .wc-proceed-to-checkout a:hover {
color: rgb(var(--colors-primary-foreground));
background-color: rgb(var(--colors-primary-background));
opacity: 0.9;
}
/* Customer details */
#customer_details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 1.25rem;
}
#customer_details > * {
width: 100%;
}
/* Cart title */
.woocommerce-billing-fields > h3, .woocommerce-billing-fields > h2, .woocommerce-additional-fields > h3, .woocommerce-additional-fields > h2, .order-review-wrapper > h3, .order-review-wrapper > h2, .cart_totals > h3, .cart_totals > h2 {
font-size: var(--text-base);
font-weight: 500;
margin-bottom: 0.75rem;
}
@media screen and (min-width: 576.02px) {
.woocommerce-billing-fields > h3, .woocommerce-billing-fields > h2, .woocommerce-additional-fields > h3, .woocommerce-additional-fields > h2, .order-review-wrapper > h3, .order-review-wrapper > h2, .cart_totals > h3, .cart_totals > h2 {
font-size: var(--text-lg);
margin-bottom: 1.25rem;
}
}
@media screen and (min-width: 1024.02px) {
.woocommerce-billing-fields > h3, .woocommerce-billing-fields > h2, .woocommerce-additional-fields > h3, .woocommerce-additional-fields > h2, .order-review-wrapper > h3, .order-review-wrapper > h2, .cart_totals > h3, .cart_totals > h2 {
font-size: var(--text-xl);
}
}
/* Order review */
#order_review .shop_table thead {
display: none;
}
#order_review .shop_table tbody tr:first-child {
border-top: 0;
}
#order_review .shop_table tbody tr .product-name {
font-size: var(--text-xs);
}
#order_review .woocommerce-checkout-payment ul {
margin: 0 0 1.25rem;
padding: 0;
list-style: none;
}
#order_review .woocommerce-checkout-payment ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.625rem;
}
#order_review .woocommerce-checkout-payment ul li + li {
margin-top: 0.25rem;
}
#order_review .woocommerce-checkout-payment ul li input {
margin-top: 0.1875rem;
}
#order_review .woocommerce-checkout-payment ul li label {
font-size: var(--text-sm);
font-weight: 600;
text-transform: capitalize;
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
#order_review .woocommerce-checkout-payment ul li > div {
font-size: var(--text-xs);
color: rgb(var(--colors-gray-600));
}
#order_review .place-order .woocommerce-privacy-policy-text {
font-size: var(--text-xs);
}
#order_review .place-order .woocommerce-privacy-policy-text a {
font-weight: 600;
text-decoration-color: rgb(var(--colors-gray-500));
text-underline-offset: 0.1875rem;
color: currentColor;
}
#order_review .place-order .validate-required {
font-size: var(--text-xs);
}
#order_review .place-order .validate-required label {
font-size: inherit;
}
#order_review .place-order .validate-required a {
color: rgb(var(--colors-primary-background));
text-underline-offset: 0.25rem;
}
#order_review .place-order .validate-required input {
position: relative;
top: 0.125rem;
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
#order_review .place-order button {
width: 100%;
color: rgb(var(--colors-primary-foreground));
background-color: rgb(var(--colors-primary-background));
}
#order_review .place-order button:hover {
opacity: 0.9;
}
/* My Account style */
.my-account-inner {
--account-navigation-width: 260px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.my-account-inner > * {
width: 100%;
}
@media screen and (min-width: 1024.02px) {
.my-account-inner > *.my-account-navigation {
width: var(--account-navigation-width);
}
.my-account-inner > *.woocommerce-MyAccount-content {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
-webkit-padding-start: var(--theme-padding);
padding-inline-start: var(--theme-padding);
}
}
.my-account-inner .my-account-navigation .my-account-user {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.625rem;
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgb(var(--colors-gray-200));
}
.my-account-inner .my-account-navigation .my-account-user .user-avatar > * {
width: 1.5rem;
height: auto;
}
.my-account-inner .my-account-navigation .my-account-user .user-detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
line-height: 1.4;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.my-account-inner .my-account-navigation .my-account-user .user-detail span {
font-size: var(--text-2xs);
font-weight: 500;
color: rgb(var(--colors-gray-500));
}
.my-account-inner .my-account-navigation .my-account-user .user-detail p {
font-size: var(--text-sm);
font-weight: 600;
margin-bottom: 0;
}
@media screen and (min-width: 1024.02px) {
.my-account-inner .my-account-navigation .my-account-user .user-detail p {
font-size: var(--text-base);
}
}
.my-account-inner .my-account-navigation .my-account-user .user-menu-toggle {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
@media screen and (min-width: 1024.02px) {
.my-account-inner .my-account-navigation .my-account-user .user-menu-toggle {
display: none;
}
}
.my-account-inner .my-account-navigation .my-account-user .user-menu-toggle a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-decoration: none;
color: currentColor;
width: 1.625rem;
height: 1.625rem;
}
.my-account-inner .my-account-navigation .my-account-user .user-menu-toggle a > * {
width: 1.4375rem;
height: auto;
}
.my-account-inner .my-account-navigation ul {
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.125rem;
list-style: none;
margin: 0 0 1.25rem;
padding: 0 0 1.25rem;
border-bottom: 1px solid rgb(var(--colors-gray-200));
}
@media screen and (min-width: 1024.02px) {
.my-account-inner .my-account-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
border: 0;
}
}
.my-account-inner .my-account-navigation ul a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--text-sm);
font-weight: 500;
padding: 0.625rem 2.125rem;
color: currentColor;
text-decoration: none;
border-radius: var(--theme-radius);
-webkit-transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.my-account-inner .my-account-navigation ul a:hover {
background-color: rgb(var(--colors-gray-100));
}
.my-account-inner .my-account-navigation ul .is-active > a {
color: rgb(var(--colors-white));
background-color: rgb(var(--colors-black));
}
@media screen and (max-width: 1023.98px) {
.my-account-inner .my-account-navigation.active ul {
display: block;
}
}
.my-account-inner .woocommerce-MyAccount-content p {
font-size: var(--text-sm);
}
@media screen and (min-width: 1024.02px) {
.my-account-inner .woocommerce-MyAccount-content p {
font-size: var(--text-base);
}
}
.my-account-inner .woocommerce-MyAccount-content p a {
font-weight: 500;
color: rgb(var(--colors-blue-base));
text-underline-offset: 0.1875rem;
-webkit-transition: text-decoration-color var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: text-decoration-color var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.my-account-inner .woocommerce-MyAccount-content p a:hover {
text-decoration-color: transparent;
}
/* Login page */
.site-login {
--login-width: 480px;
--login-tab-size: 22px;
--login-tab-weight: 600;
--login-tab-color: rgb(var(--colors-gray-400));
--login-tab-hover-color: rgb(var(--colors-gray-500));
--login-tab-active-color: rgb(var(--colors-primary-background));
padding-block: 2.5rem;
}
@media screen and (min-width: 768.02px) {
.site-login {
padding-block: 5.625rem;
}
}
.site-login .site-login-inner {
max-width: var(--login-width);
margin-inline: auto;
}
.site-login .site-login-inner .site-login-overflow {
position: relative;
overflow: hidden;
padding-inline: 0.25rem;
}
.site-login .site-login-inner .login-page-tab {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
gap: 1.25rem;
margin-bottom: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.site-login .site-login-inner .login-page-tab {
margin-bottom: 1.875rem;
}
}
.site-login .site-login-inner .login-page-tab li a {
position: relative;
font-size: var(--login-tab-size);
font-weight: var(--login-tab-weight);
text-decoration: none;
color: var(--login-tab-color);
padding-inline: 0.25rem;
-webkit-transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.site-login .site-login-inner .login-page-tab li a:hover {
color: var(--login-tab-hover-color);
}
.site-login .site-login-inner .login-page-tab li a.active {
color: var(--login-tab-active-color);
}
.site-login .site-login-inner .login-form-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 200%;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: all var(--theme-ease-time-slow) var(--theme-ease-primary);
transition: all var(--theme-ease-time-slow) var(--theme-ease-primary);
}
.site-login .site-login-inner .login-form-container > * {
padding: 0.0625rem;
width: 100%;
-webkit-transition: opacity var(--theme-ease-time-slow) var(--theme-ease-primary), -webkit-transform var(--theme-ease-time-slow) var(--theme-ease-primary);
transition: opacity var(--theme-ease-time-slow) var(--theme-ease-primary), -webkit-transform var(--theme-ease-time-slow) var(--theme-ease-primary);
transition: transform var(--theme-ease-time-slow) var(--theme-ease-primary), opacity var(--theme-ease-time-slow) var(--theme-ease-primary);
transition: transform var(--theme-ease-time-slow) var(--theme-ease-primary), opacity var(--theme-ease-time-slow) var(--theme-ease-primary), -webkit-transform var(--theme-ease-time-slow) var(--theme-ease-primary);
}
.site-login .site-login-inner .login-form-container > *.register-form {
opacity: 0;
}
.site-login .site-login-inner .login-form-container > *.login-form > p {
font-size: var(--text-sm);
text-align: center;
color: rgb(var(--colors-gray-500));
margin-bottom: 1.875rem;
}
@media screen and (min-width: 1024.02px) {
.site-login .site-login-inner .login-form-container > *.login-form > p {
margin-bottom: 2.5rem;
}
}
.site-login .site-login-inner .login-form-container > *.login-form .lost-password {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0.625rem;
margin-bottom: 1rem;
}
.site-login .site-login-inner .login-form-container > *.login-form .lost-password label {
margin-bottom: 0;
}
.site-login .site-login-inner .login-form-container > *.login-form .lost-password label input {
position: relative;
top: 0.125rem;
-webkit-margin-end: 0.375rem;
margin-inline-end: 0.375rem;
}
.site-login .site-login-inner .login-form-container > *.login-form .lost-password p {
font-size: var(--text-xs);
margin-bottom: 0;
}
.site-login .site-login-inner .login-form-container > *.login-form .lost-password .lost_password a {
font-weight: 500;
color: rgb(var(--colors-blue-base));
text-decoration: none;
}
.site-login .site-login-inner .login-form-container > *.register-form > p {
font-size: var(--text-sm);
text-align: center;
color: rgb(var(--colors-gray-500));
margin-bottom: 1.875rem;
}
@media screen and (min-width: 1024.02px) {
.site-login .site-login-inner .login-form-container > *.register-form > p {
margin-bottom: 2.5rem;
}
}
.site-login .site-login-inner .login-form-container > *.register-form .woocommerce-privacy-policy-text {
font-size: var(--text-xs);
text-align: center;
}
.site-login .site-login-inner .login-form-container > *.register-form .woocommerce-privacy-policy-text a {
font-weight: 500;
text-decoration: none;
color: rgb(var(--colors-primary-background));
}
.site-login .site-login-inner .login-form-container.show-register-form {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.site-login .site-login-inner .login-form-container.show-register-form .login-form {
opacity: 0;
}
.site-login .site-login-inner .login-form-container.show-register-form .register-form {
opacity: 1;
}
.site-login .site-login-inner button {
width: 100%;
color: rgb(var(--colors-primary-foreground));
background-color: rgb(var(--colors-primary-background));
}
.site-login .site-login-inner button:hover {
color: rgb(var(--colors-primary-foreground));
background-color: rgb(var(--colors-primary-background));
opacity: 0.9;
}
/* Single style */
.single-product-wrapper {
--product-header-gap: 12px;
--product-title-xs: 22px;
--product-title-sm: 26px;
--product-title-lg: 32px;
--product-title-weight: 500;
--product-gallery-width: 50%;
--product-gallery-thumbnail: 86px;
position: relative;
}
.single-product-wrapper.in-page {
margin-block: 0.625rem;
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper.in-page {
margin-block: 1.25rem;
}
}
.single-product-wrapper .product .product-gallery-column {
position: relative;
}
.single-product-wrapper .product .product-gallery-column .product-gallery {
position: relative;
overflow: hidden;
border-radius: var(--theme-radius);
border: 1px solid rgb(var(--colors-gray-100));
}
.single-product-wrapper .product .product-gallery-column .product-gallery-thumbnail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: 0.375rem;
}
.single-product-wrapper .product .product-gallery-column .product-gallery-thumbnail > * {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
max-width: var(--product-gallery-thumbnail);
overflow: hidden;
border-radius: var(--radius-sm);
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .product-gallery-column.vertical-gallery {
--product-gallery-width: 55%;
-webkit-padding-start: calc(var(--product-gallery-thumbnail) + 1.25rem);
padding-inline-start: calc(var(--product-gallery-thumbnail) + 1.25rem);
}
.single-product-wrapper .product .product-gallery-column.vertical-gallery .product-gallery-thumbnail {
position: absolute;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
top: 0;
inset-inline-start: 0;
margin-top: 0;
}
}
.single-product-wrapper .product .product_title {
font-size: var(--product-title-xs);
font-weight: var(--product-title-weight);
margin-bottom: 0;
}
@media screen and (min-width: 576.02px) {
.single-product-wrapper .product .product_title {
font-size: var(--product-title-sm);
}
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .product_title {
font-size: var(--product-title-lg);
}
}
.single-product-wrapper .product .product-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--product-header-gap);
border-bottom: 1px solid rgb(var(--colors-gray-200));
padding-bottom: 0.625rem;
margin-bottom: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .product-header .product-meta {
gap: 1.5rem;
}
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .product-body {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: calc(var(--theme-padding) + 0.375rem);
}
.single-product-wrapper .product .product-body .product-gallery-column {
width: var(--product-gallery-width);
}
.single-product-wrapper .product .product-body .product-detail-column {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
}
.single-product-wrapper .product .product-detail-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.625rem;
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .product-detail-inner {
gap: 1rem;
}
}
.single-product-wrapper .product .woocommerce-product-details__short-description {
font-size: var(--text-sm);
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .woocommerce-product-details__short-description {
font-size: calc(var(--text-base) - 0.0625rem);
}
}
.single-product-wrapper .product .woocommerce-product-details__short-description p {
margin-bottom: 0;
}
.single-product-wrapper .product .product-price-wrapper {
margin-bottom: 0.625rem;
}
.single-product-wrapper .product .product-price-wrapper .price {
--price-font-size-lg: 32px;
}
.single-product-wrapper .product form.cart {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 1rem;
}
.single-product-wrapper .product form.cart .cart-actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.375rem;
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product form.cart .cart-actions select {
min-width: 70px;
}
}
.single-product-wrapper .product form.cart .cart-actions .button.single_add_to_cart_button {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
@media screen and (min-width: 576.02px) {
.single-product-wrapper .product form.cart .cart-actions .button.buy_now_button {
padding-inline: 2rem;
}
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product form.cart .cart-actions .button.buy_now_button {
padding-inline: 2.875rem;
}
}
.single-product-wrapper .product form.cart .cart-actions.actions-buttons {
gap: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.single-product-wrapper .product form.cart .cart-actions.actions-buttons {
gap: 1.875rem;
}
}
.single-product-wrapper .product form.cart .product-cart-action {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.single-product-wrapper .product form.cart .product-cart-action a {
color: currentColor;
text-decoration: none;
}
.single-product-wrapper .product form.cart .product-cart-action.product-compare, .single-product-wrapper .product form.cart .product-cart-action.product-wishlist {
margin-top: 0.375rem;
}
.single-product-wrapper .product form.cart .product-cart-action.product-compare a, .single-product-wrapper .product form.cart .product-cart-action.product-wishlist a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--text-sm);
font-weight: 500;
gap: 0.625rem;
}
.single-product-wrapper .product form.cart .product-cart-action.product-compare a svg, .single-product-wrapper .product form.cart .product-cart-action.product-compare a img, .single-product-wrapper .product form.cart .product-cart-action.product-wishlist a svg, .single-product-wrapper .product form.cart .product-cart-action.product-wishlist a img {
width: 1.25rem;
height: auto;
}
.single-product-wrapper .product .product-service {
margin-top: 0.625rem;
background-color: rgb(var(--colors-gray-100));
padding: 1.25rem;
border-radius: var(--radius-sm);
}
.single-product-wrapper .product .product-service ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.625rem;
list-style: none;
margin: 0;
padding: 0;
}
.single-product-wrapper .product .product-service ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.625rem;
}
.single-product-wrapper .product .product-service ul li .service-icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 1.25rem;
}
.single-product-wrapper .product .product-service ul li .service-icon > * {
width: 1rem;
height: auto;
}
.single-product-wrapper .product .product-service ul li .service-detail {
font-size: var(--text-xs);
}
.single-product-wrapper .product .product-service ul li .service-detail span {
color: rgb(var(--colors-gray-500));
}
.single-product-wrapper .product .product-call {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-top: 0.625rem;
}
.single-product-wrapper .product .product-call a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.75rem;
color: currentColor;
text-decoration: none;
}
.single-product-wrapper .product .product-call a .call-icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 2.875rem;
height: 2.875rem;
color: rgb(var(--colors-white));
background-color: rgb(var(--colors-green-base));
border-radius: 50%;
}
.single-product-wrapper .product .product-call a .call-icon > * {
width: 1.375rem;
height: auto;
}
.single-product-wrapper .product .product-call a .call-detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
line-height: 1.7;
}
.single-product-wrapper .product .product-call a .call-detail span {
font-size: var(--text-xs);
color: rgb(var(--colors-gray-500));
}
.single-product-wrapper .product .product-call a .call-detail p {
font-size: var(--text-sm);
margin-bottom: 0;
}
.single-product-wrapper .product .product-call a .call-detail p strong {
text-decoration: underline;
text-underline-offset: 0.25rem;
}
.single-product-wrapper .product .product-share {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: 1.25rem;
}
.single-product-wrapper .product .product-share > span {
font-size: var(--text-xs);
font-weight: 500;
}
.single-product-wrapper .product .single-product-tabs-wrapper {
margin-top: 1.875rem;
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .single-product-tabs-wrapper {
margin-top: 3.5rem;
}
}
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.125rem;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid rgb(var(--colors-gray-200));
}
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs li a {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--text-base);
font-weight: 500;
text-decoration: none;
color: rgb(var(--colors-gray-400));
padding-bottom: 0.625rem;
-webkit-transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
transition: all var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs li a:hover {
color: rgb(var(--colors-gray-600));
}
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs li.active a {
color: rgb(var(--colors-primary-background));
}
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-Tabs-panel {
padding-block: 1rem;
}
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-Tabs-panel > h2 {
display: none;
}
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-product-attributes {
width: 100%;
}
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-product-attributes tbody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0.625rem;
}
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-product-attributes tbody tr {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
font-size: 0.875rem;
width: 100%;
border-bottom: 1px solid rgb(var(--colors-gray-200));
}
@media screen and (min-width: 768.02px) {
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-product-attributes tbody tr {
width: 49%;
}
}
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-product-attributes tbody tr > * {
padding-bottom: 0.75rem;
}
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-product-attributes tbody tr th {
font-weight: 600;
min-width: 12.5rem;
}
.single-product-wrapper .product .single-product-tabs-wrapper .woocommerce-product-attributes tbody tr td p {
margin-bottom: 0;
}
.single-product-wrapper .product .single-product-tabs-wrapper.accordion {
margin-top: 0.625rem;
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .single-product-tabs-wrapper.accordion {
margin-top: 1rem;
}
}
.single-product-wrapper .product .single-product-tabs-wrapper.accordion .accordion-button {
font-size: var(--text-base);
font-weight: 500;
height: auto;
padding-block: 1.25rem;
}
@media screen and (min-width: 768.02px) {
.single-product-wrapper .product .single-product-tabs-wrapper.accordion .woocommerce-product-attributes tbody tr {
width: 100%;
}
}
.single-product-wrapper .product .product-iconboxes {
margin-top: 1.25rem;
}
@media screen and (min-width: 1024.02px) {
.single-product-wrapper .product .product-iconboxes {
margin-top: 1.875rem;
}
}