/** Shopify CDN: Minification failed
Line 25:19 Expected identifier but found whitespace
Line 25:21 Unexpected "{"
Line 25:30 Expected ":"
Line 26:8 Expected identifier but found whitespace
Line 26:10 Unexpected "{"
Line 26:19 Expected ":"
Line 77:0 Unexpected "<"
Line 82:0 Unexpected "<"
Line 115:2 Unexpected "<"
Line 247:21 Expected identifier but found whitespace
... and 5 more hidden warnings
**/
/* CSS from section stylesheet tags */
.doubt-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 40px; /* Increased horizontal padding for desktop */
padding-bottom: 40px;
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
}
.doubt-banner__content {
flex-grow: 1;
margin-right: 20px;
}
.doubt-banner__heading {
font-size: 30px;
margin-bottom: 10px;
font-weight: bold;
}
.doubt-banner__subheading {
font-size: 16px;
}
.doubt-banner__button {
background-color: #000000; /* Black Button */
color: #ffffff; /* White Text */
padding: 12px 24px;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.doubt-banner__button:hover {
background-color: #333333;
color: #ffffff; /* White Text */
}
/* Mobile view adjustments */
@media screen and (max-width: 768px) {
.doubt-banner {
flex-direction: column;
text-align: center;
padding: 30px 20px;
}
.doubt-banner__content {
margin-right: 0;
margin-bottom: 20px;
}
.doubt-banner__heading {
font-size: 24px;
}
}
.instant-relief-section {
margin: 0 auto;
font-family: Arial, sans-serif;
}
.instant-relief-header {
text-align: center;
margin-bottom: 2rem;
}
.instant-relief-title {
font-size: 32px;
font-weight: bold;
color: #000;
margin-bottom: 0.5rem;
}
.instant-relief-subtitle {
font-size: 16px;
color: #666;
max-width: 600px;
margin: 0 auto;
}
.instant-relief-steps {
display: flex;
flex-direction: column;
gap: 40px;
position: relative;
}
.instant-relief-step-number::before {
content: '';
position: absolute;
bottom: 1%;
left: 50%;
width: 3px;
height: 82%;
background-color: #0E0311;
transform: translateX(-50%);
}
/* .instant-relief-step {
display: flex;
align-items: stretch;
border-radius: 10px;
overflow: hidden;
position: relative;
gap: 60px;
} */
.instant-relief-step {
display: grid
;
align-items: stretch;
border-radius: 10px;
overflow: hidden;
position: relative;
gap: 60px;
justify-content: space-between;
justify-items: stretch;
padding: 10px;
}
.instant-relief-step-number {
width: 55px;
height: 55px;
background-color: #000;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 20px;
z-index: 1;
border: 5px solid white;
}
.instant-relief-step-content {
flex: auto;
padding: 3rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
background: white;
border-radius: 20px;
display: flex;
justify-content: center;
flex-direction: column;
}
.instant-relief-step-label {
width: fit-content;
background: #000;
color: #fff;
display: inline-block;
padding: 0.25rem 0.5rem;
font-size: 12px;
margin-bottom: 0.5rem;
border-radius: 4px;
}
.instant-relief-step-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 0.5rem;
}
.instant-relief-step-description {
color: #666;
font-size: 14px;
}
.instant-relief-step-image {
flex: auto;
max-width: 100%;
}
.instant-relief-step-image img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 20px;
}
.instant-relief-cta-container {
text-align: center;
margin-top: 2rem;
}
.instant-relief-cta {
display: inline-block;
background-color: {{ section.settings.cta_bg_color }};
color: {{ section.settings.cta_text_color }};
padding: 12px 24px;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: all 0.3s ease;
}
.instant-relief-cta:hover {
opacity: 0.9;
transform: scale(1.05);
}
.instant-relief-testimonials {
text-align: center;
margin-top: 1rem;
}
.instant-relief-testimonial-rating {
color: #ffc107;
font-size: 20px;
}
@media (min-width: 769px) {
.instant-relief-step {
grid-template-columns: 1fr auto 1fr;
}
}
@media (max-width: 768px) {
.instant-relief-step {
grid-template-rows: 1fr auto 1fr;
gap: 25px;
}
.instant-relief-steps::before {
left: 15px;
}
.instant-relief-step-number {
width: 40px;
height: 40px;
font-size: 16px;
left: 0;
border: 5px solid white;
}
.instant-relief-step-content {
padding-left: 3rem;
}
.instant-relief-step-content,
.instant-relief-step-image {
max-width: 100%;
width: 100%;
}
.instant-relief-title {
font-size: 24px;
}
.instant-relief-subtitle {
font-size: 14px;
}
.instant-relief-step-number::before {
content: '';
position: absolute;
bottom: 0;
left: 95%;
top: 14%;
width: 3px;
height: 72%;
background-color: #0E0311;
transform: translateX(-50%);
rotate: 90deg;
}
}
/* CSS from snippet stylesheet tags */
.element-badge {
/* Layout & Typography */
--_radius: var(--element-badge-radius, var(--chip-radius, var(--radius-xs)));
--_px: var(--element-badge-px, var(--size-3));
--_py: var(--element-badge-py, var(--size-1));
--_border-width: var(--element-badge-border-width, var(--size-0-25));
--_font-family: var(
--element-badge-font-family,
var(--element-text-font-family--body),
var(--element-text-font-family-fallback--body)
);
--_font-size: var(--element-badge-font-size, var(--element-text-font-size--body-sm));
--_letter-spacing: var(--element-badge-letter-spacing, var(--element-text-letter-spacing--body-sm));
--_line-height: var(--element-badge-line-height, var(--element-text-line-height--body-sm));
/* Colors */
--_base-primary: var(--color-secondary);
--_base-secondary: var(--color-primary);
--_color-primary: var(--_base-primary);
--_color-secondary: var(--_base-secondary);
--_color-background: var(--_color-primary);
--_color-text: var(--_color-secondary);
--_color-border: var(--_color-secondary);
--_shade-inset-box-shadow: var(--element-badge-shade-inset-box-shadow, 12%);
--_inset-box-shadow: inset 0 0 0 var(--_border-width)
color-mix(in srgb, var(--_color-border) var(--_shade-inset-box-shadow), transparent);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--_radius);
padding-inline: var(--_px);
padding-block: var(--_py);
font-family: var(--_font-family);
font-size: var(--_font-size);
letter-spacing: var(--_letter-spacing);
background-color: var(--_color-background);
color: var(--_color-text);
box-shadow: var(--_inset-box-shadow);
text-transform: uppercase;
width: fit-content;
white-space: nowrap;
}
.element-badge--inverted {
--_color-primary: var(--_base-secondary);
--_color-secondary: var(--_base-primary);
& > * {
--color-primary: currentColor;
}
}
.element-badge--sale {
--_base-primary: var(--color-sale-tag-text);
--_base-secondary: var(--color-sale-tag);
}
:root {
/* Base Layout Variables */
--element-button-display: inline-flex;
--element-button-width: fit-content;
--element-button-height: auto;
--element-button-radius: var(--radius-xs);
--element-button-flex-direction: row;
--element-button-gap: var(--size-2);
--element-button-justify-content: center;
--element-button-align-items: center;
--element-button-white-space: nowrap;
/* Base Spacing Variables */
--element-button-padding-block: var(--size-3);
--element-button-padding-inline: var(--size-5);
--element-button-border-width: var(--size-0-25);
/* Base Color Variables */
--element-button-color-primary: initial;
--element-button-color-secondary: initial;
--element-button-shade-background: 0%;
--element-button-shade-text: 0%;
--element-button-shade-border: 20%;
/* Typography Overrides */
/* By default, the button will inherit the typography styles from element.text. Set these to other values to override. */
/* --element-button-font-family: initial; */
/* --element-button-font-family-fallback: initial; */
/* --element-button-font-weight: initial; */
/* --element-button-letter-spacing: initial; */
/* --element-button-text-transform: initial; */
/* --element-button-line-height: initial; */
/* --element-button-color: initial; */
/* Base Effect Variables */
--element-button-box-shadow: initial;
--element-button-transition-duration: 200ms;
--element-button-transition-timing: ease;
--element-button-transform: none;
--element-button-backdrop-filter: none;
--element-button-opacity: 1;
/* Hover State Variables */
--element-button-shade-background--hover: 8%;
--element-button-shade-border--hover: 30%;
/* Focus State Variables */
--element-button-color-focus: var(--color-focus);
--element-button-border-width--focus: var(--size-0-5);
/* Active State Variables */
--element-button-shade-background--active: 16%;
--element-button-shade-border--active: var(--element-button-shade-border);
/* Disabled State Variables */
--element-button-shade-background--disabled: 12%;
--element-button-shade-text--disabled: 70%;
--element-button-shade-border--disabled: 12%;
}
/* Component Implementation */
.element-button,
.element-button--shopify-payment-wrapper .shopify-payment-button .shopify-payment-button__button--unbranded {
/* Base Layout */
--_display: var(--element-button-display);
--_width: var(--element-button-width);
--_height: var(--element-button-height);
--_radius: var(--element-button-radius);
--_flex-direction: var(--element-button-flex-direction);
--_gap: var(--element-button-gap);
--_justify-content: var(--element-button-justify-content);
--_align-items: var(--element-button-align-items);
--_white-space: var(--element-button-white-space);
/* Base Spacing */
--_padding-block: var(--element-button-padding-block);
--_padding-inline: var(--element-button-padding-inline);
--_border-width: var(--element-button-border-width);
/* Base Colors */
--_color-primary: var(--element-button-color-primary, var(--color-primary));
--_color-secondary: var(--element-button-color-secondary, var(--color-secondary));
--_color-focus: var(--element-button-color-focus, var(--color-focus, #4a9afc));
--_color-text: var(--_color-secondary);
--_color-background: var(--_color-primary);
--_outline: none;
--_border: none;
--_shade-background: var(--element-button-shade-background);
--_shade-text: var(--element-button-shade-text);
--_shade-border: var(--element-button-shade-border);
--_box-shadow: var(--element-button-box-shadow, inset 0 0 0 var(--_border-width) color-mix(in srgb, var(--_color-text) var(--_shade-border), transparent));
/* Base Effects */
--_transition-duration: var(--element-button-transition-duration);
--_transition-timing: var(--element-button-transition-timing);
--_transform: var(--element-button-transform);
--_backdrop-filter: var(--element-button-backdrop-filter);
--_opacity: var(--element-button-opacity);
/* Text Styles */
--element-text-font-family: var(--element-button-font-family);
--element-text-font-family-fallback: var(--element-button-font-family-fallback);
--element-text-font-weight: var(--element-button-font-weight);
--element-text-letter-spacing: var(--element-button-letter-spacing);
--element-text-text-transform: var(--element-button-text-transform);
--element-text-line-height: var(--element-button-line-height);
--element-text-color: var(--element-button-color);
--element-text-font-size: var(--element-button-font-size);
/* Icon Styles */
--element-icon-size: var(--element-text-font-size--body-md);
/* Base Styles */
display: var(--_display);
width: var(--_width);
height: var(--_height);
justify-content: var(--_justify-content);
align-items: var(--_align-items);
white-space: var(--_white-space);
flex-direction: var(--_flex-direction);
gap: var(--_gap);
padding-block: var(--_padding-block);
padding-inline: var(--_padding-inline);
border-radius: var(--_radius);
background-color: color-mix(in srgb, var(--_color-text) var(--_shade-background), var(--_color-background));
color: color-mix(in srgb, var(--_color-background) var(--_shade-text), var(--_color-text));
box-shadow: var(--_box-shadow);
outline: var(--_outline);
border: var(--_border);
transform: var(--_transform);
backdrop-filter: var(--_backdrop-filter);
opacity: var(--_opacity);
transition: all var(--_transition-duration) var(--_transition-timing);
cursor: pointer;
&:is(button.shopify-payment-button__button--unbranded) {
width: 100%;
line-height: var(--element-text-line-height--body-md);
min-height: 32px;
}
&:has(> svg:only-child) {
--_padding-inline: var(--_padding-block);
--_display: flex;
}
/* Hover State */
&:hover {
--_shade-background: var(--element-button-shade-background--hover);
--_shade-border: var(--element-button-shade-border--hover);
}
/* Focus State */
&:focus-visible,
input[type='radio']:focus-visible + & {
--_border-width: var(--element-button-border-width--focus);
--_box-shadow: inset 0 0 0 var(--_border-width) var(--_color-focus);
}
/* Disabled State */
&:disabled,
input[type='radio']:disabled + &,
.disabled > input[type='radio'] + &,
shopify-buy-it-now-button[disabled] > & {
--_shade-background: var(--element-button-shade-background--disabled);
--_shade-text: var(--element-button-shade-text--disabled);
--_shade-border: var(--element-button-shade-border--disabled);
&:is(:disabled),
shopify-buy-it-now-button[disabled] > & {
cursor: not-allowed;
}
}
/* Active State */
&:active,
input[type='radio']:checked + & {
--_shade-background: var(--element-button-shade-background--active);
--_shade-border: var(--element-button-shade-border--active);
}
/* Variants */
&.element-button--size-sm {
--_padding-block: var(--size-2);
--_padding-inline: var(--size-4);
}
&.element-button--size-lg {
--_padding-block: var(--size-4);
--_padding-inline: var(--size-6);
}
&.element-button--inverted {
--_color-text: var(--_color-primary);
--_color-background: var(--_color-secondary);
}
&.element-button--transparent {
--_color-background: transparent;
&:disabled {
--_shade-border: var(--element-button-shade-border--disabled);
--_shade-background: 0%;
}
&:disabled:active {
--_border-width: var(--element-button-border-width);
--_shade-border: var(--element-button-shade-border--disabled);
}
}
&:is(.shopify-payment-button__button--unbranded):hover:not([disabled]) {
background-color: color-mix(in srgb, var(--_color-secondary) var(--_shade-background), var(--_color-primary));
color: color-mix(in srgb, var(--_color-background) var(--_shade-text), var(--_color-text));
}
}
.element-button--shopify-payment-wrapper {
--_radius: var(--element-button-radius);
--_padding-block: var(--element-button-padding-block);
--_line-height: var(--element-button-line-height, var(--element-text-line-height--body));
--_font-size: var(--element-button-font-size, var(--element-text-font-size--body-md));
--shopify-accelerated-checkout-button-border-radius: var(--_radius);
--shopify-accelerated-checkout-button-block-size: calc((2 * var(--_padding-block)) + (var(--_line-height) * var(--_font-size)));
font-family: var(--element-button-font-family, var(--element-text-font-family));
}
.element-checkbox {
/* Layout & Typography */
--_size: var(--element-checkbox-size, var(--size-5));
--_icon-size: var(--element-checkbox-icon-size, var(--size-3-5));
--_radius: var(--element-checkbox-radius, 1px);
--_gap: var(--element-checkbox-gap, var(--size-2));
--_outline-width: var(--element-checkbox-outline-width, 1px);
--_outline-width-active: var(--element-checkbox-outline-width-active, 2px);
--_font-family: var(
--element-checkbox-font-family,
var(--element-text-font-family--body),
var(--element-text-font-family-fallback--body)
);
--_font-size: var(--element-checkbox-font-size, var(--element-text-font-size--body-md));
--_letter-spacing: var(--element-checkbox-letter-spacing, var(--element-text-letter-spacing--body));
--_line-height: var(--element-checkbox-line-height, var(--element-text-line-height--body));
--_font-weight: var(--element-checkbox-font-weight, normal);
/* Colors */
--_color-primary: var(--color-primary);
--_color-secondary: var(--color-secondary);
--_color-active: var(--color-focus);
--_color-shadow: var(
--element-checkbox-shadow-color,
color-mix(in srgb, var(--root-color-primary) var(--_outline-shade), var(--root-color-secondary))
);
--_color-background: var(--root-color-secondary);
--_color-text: var(--_color-primary);
--_outline-shade: var(--element-checkbox-outline-shade, 12%);
--_shadow-inset: var(--element-checkbox-shadow-inset, inset);
--_shadow-h-offset: var(--element-checkbox-shadow-horizontal-offset, 0);
--_shadow-v-offset: var(--element-checkbox-shadow-vertical-offset, 0);
--_shadow-blur: var(--element-checkbox-shadow-blur-radius, 0);
--_shadow-spread: var(--element-checkbox-shadow-spread-radius, var(--_outline-width));
--_icon-opacity: var(--element-checkbox-icon-opacity, 0);
@media (max-width: 768px) {
--_size: var(--element-checkbox-size, var(--size-4));
--_icon-size: var(--element-checkbox-icon-size, var(--size-3));
}
position: relative;
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--_gap);
color: var(--_color-text);
font-family: var(--_font-family);
font-size: var(--_font-size);
letter-spacing: var(--_letter-spacing);
line-height: var(--_line-height);
font-weight: var(--_font-weight);
cursor: pointer;
input[type='checkbox'] {
position: absolute;
opacity: 0;
pointer-events: none;
}
&:hover {
--_color-background: color-mix(in srgb, var(--_color-primary) 4%, var(--_color-secondary));
}
&:hover:has(input[type='checkbox']:checked) {
--_color-shadow: color-mix(in srgb, var(--_color-secondary) 12%, var(--_color-primary));
--_color-background: color-mix(in srgb, var(--_color-secondary) 4%, var(--_color-primary));
}
&:has(input[type='checkbox']:checked) {
--_icon-opacity: 1;
--_color-background: var(--_color-primary);
--_color-shadow: var(--_color-primary);
}
&:has(input[type='checkbox']:focus-visible) {
--_color-shadow: var(--_color-active);
--_outline-width: var(--_outline-width-active);
}
&:not(.element-checkbox--with-icon):has(input[type='checkbox']:focus-visible) {
outline: 3px solid var(--color-focus);
}
&:has(input[type='checkbox']:disabled) {
--_color-background: color-mix(in srgb, var(--_color-primary) 8%, var(--_color-secondary));
--_color-shadow: color-mix(in srgb, var(--_color-primary) 8%, var(--_color-secondary));
}
}
.element-checkbox__icon {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: var(--_size);
height: var(--_size);
border-radius: var(--_radius);
box-shadow: var(--_shadow-inset) var(--_shadow-h-offset) var(--_shadow-v-offset) var(--_shadow-blur)
var(--_shadow-spread) var(--_color-shadow);
background-color: var(--_color-background);
.element-icon {
width: var(--_icon-size);
height: var(--_icon-size);
color: var(--_color-secondary);
opacity: var(--_icon-opacity);
}
}
.element-divider {
/* Layout & Typography */
--_width: var(--element-divider-width, 100%);
--_margin: var(--element-divider-margin, 0);
--_border-width: var(--element-divider-border-width, var(--size-0-25));
/* Colors */
--_color-primary: var(--color-primary);
--_color-secondary: var(--color-secondary);
--_shade-border: var(--element-divider-border-shade, var(--shade-12));
--_border-color: var(
--element-divider-border-color,
color-mix(in srgb, var(--_color-primary) var(--_shade-border), var(--_color-secondary))
);
width: var(--_width);
margin: var(--_margin) auto;
border: 0;
border-top: var(--_border-width) solid var(--_border-color);
}
.element-divider--small {
--_margin: var(--size-4);
}
.element-divider--medium {
--_margin: var(--size-7-5);
}
.element-divider--large {
--_margin: var(--size-7-5);
@media (min-width: 769px) {
--_margin: calc(var(--size-7-5) * 1.5);
}
}
:root {
--element-icon-size: 20px;
--element-icon-width: initial;
--element-icon-height: initial;
--element-icon-stroke-width: 2px;
--element-icon-stroke-linejoin: miter;
--element-icon-color: inherit;
--element-icon-opacity: 1;
}
.element-icon {
/* Layout & Typography */
--_size: var(--element-icon-size);
--_width: var(--element-icon-width, var(--_size));
--_height: var(--element-icon-height, var(--_size));
--_stroke-width: var(--element-icon-stroke-width);
--_stroke-linejoin: var(--element-icon-stroke-linejoin);
/* Colors */
--_color: var(--element-icon-color);
--_opacity: var(--element-icon-opacity);
display: inline-block;
vertical-align: middle;
width: var(--_width);
height: var(--_height);
color: var(--_color);
opacity: var(--_opacity);
&.element-icon--line {
stroke-width: var(--_stroke-width);
stroke-linejoin: var(--_stroke-linejoin);
}
}
:root {
/* Base Layout Variables */
--element-input-width: auto;
--element-input-height: auto;
--element-input-radius: var(--radius-xs);
--element-input-padding-inline: var(--size-3);
--element-input-padding-block: var(--size-3);
--element-input-font-family: var(--element-text-font-family--body), var(--element-text-font-family-fallback--body);
--element-input-font-size: var(--element-text-font-size--body-md);
--element-input-line-height: var(--element-text-line-height--body);
--element-input-letter-spacing: var(--element-text-letter-spacing--body-md);
/* Base Outline Variables */
--element-input-box-shadow-horizontal-offset: 0;
--element-input-box-shadow-vertical-offset: 0;
--element-input-box-shadow-blur-radius: 0;
--element-input-box-shadow-spread-radius: 1px;
/* Base Colors Variables */
--element-input-color-primary: initial;
--element-input-color-secondary: initial;
--element-input-box-shadow-shade: 12%;
--element-input-background-shade: 0%;
--element-input-text-shade: 70%;
--element-input-text-shade-placeholder: 50%;
/* Active State Variables */
--element-input-box-shadow-spread-radius--active: 2px;
--element-input-box-shadow-shade--active: var(--element-input-box-shadow-shade);
--element-input-background-shade--active: var(--element-input-background-shade);
--element-input-text-shade--active: 100%;
--element-input-box-shadow-color--active: var(--color-focus, #4a9afc);
/* Focus State Variables */
--element-input-box-shadow-spread-radius--focus: 2px;
--element-input-box-shadow-shade--focus: var(--element-input-box-shadow-shade);
--element-input-background-shade--focus: var(--element-input-background-shade);
--element-input-text-shade--focus: var(--element-input-text-shade);
--element-input-box-shadow-color--focus: var(--color-focus, #4a9afc);
/* Hover State Variables */
--element-input-box-shadow-spread-radius--hover: 2px;
--element-input-box-shadow-shade--hover: var(--element-input-box-shadow-shade);
--element-input-background-shade--hover: 4%;
--element-input-text-shade--hover: 100%;
/* Disabled State Variables */
--element-input-box-shadow-spread-radius--disabled: 2px;
--element-input-box-shadow-shade--disabled: 8%;
--element-input-background-shade--disabled: 8%;
--element-input-text-shade--disabled: 20%;
/* Error State Variables */
--element-input-box-shadow-spread-radius--error: 2px;
--element-input-box-shadow-shade--error: 8%;
--element-input-background-shade--error: initial;
--element-input-text-shade--error: 100%;
--element-input-box-shadow-color--error: var(--color-error, #ff0000);
}
.element-input {
/* Base Layout*/
--_width: var(--element-input-width);
--_height: var(--element-input-height);
--_radius: var(--element-input-radius);
--_padding-inline: var(--element-input-padding-inline);
--_padding-block: var(--element-input-padding-block);
/* Base Typography */
--_font-family: var(--element-input-font-family);
--_font-size: var(--element-input-font-size);
--_line-height: var(--element-input-line-height);
--_letter-spacing: var(--element-input-letter-spacing);
/* Base Colors */
--_color-primary: var(--element-input-color-primary, var(--root-color-primary, #000));
--_color-secondary: var(--element-input-color-secondary, var(--root-color-secondary, #fff));
--_color-error: var(--element-input-color-error);
--_color-active: var(--element-input-color-active);
--_shade-box-shadow: var(--element-input-box-shadow-shade);
--_shade-background: var(--element-input-background-shade);
--_shade-text: var(--element-input-text-shade);
--_shade-text-placeholder: var(--element-input-text-shade-placeholder);
--_color-background: color-mix(in srgb, var(--_color-primary) var(--_shade-background), var(--_color-secondary));
--_color-text: color-mix(in srgb, var(--_color-primary) var(--_shade-text), var(--_color-secondary));
--_color-text-placeholder: color-mix(
in srgb,
var(--_color-primary) var(--_shade-text-placeholder),
var(--_color-secondary)
);
--_color-box-shadow: color-mix(in srgb, var(--_color-primary) var(--_shade-box-shadow), var(--_color-secondary));
/* Base Outline */
--_box-shadow-horizontal-offset: var(--element-input-box-shadow-horizontal-offset);
--_box-shadow-vertical-offset: var(--element-input-box-shadow-vertical-offset);
--_box-shadow-blur-radius: var(--element-input-box-shadow-blur-radius);
--_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius);
--_box-shadow: inset var(--_box-shadow-horizontal-offset) var(--_box-shadow-vertical-offset)
var(--_box-shadow-blur-radius) var(--_box-shadow-spread-radius) var(--_color-box-shadow);
display: flex;
align-items: center;
position: relative;
border: none;
outline: none;
padding-inline: var(--_padding-inline);
padding-block: var(--_padding-block);
width: var(--_width);
height: var(--_height);
border-radius: var(--_radius);
box-shadow: var(--_box-shadow);
background-color: var(--_color-background);
color: var(--_color-text);
font-family: var(--_font-family);
font-size: var(--_font-size);
line-height: var(--_line-height);
letter-spacing: var(--_letter-spacing);
&::placeholder {
color: var(--_color-text-placeholder);
}
&:hover:not(:disabled) {
--_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--hover);
--_shade-box-shadow: var(--element-input-box-shadow-shade--hover);
--_shade-background: var(--element-input-background-shade--hover);
--_shade-text: var(--element-input-text-shade--hover);
}
&:active {
--_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--active);
--_shade-box-shadow: var(--element-input-box-shadow-shade--active);
--_shade-background: var(--element-input-background-shade--active);
--_shade-text: var(--element-input-text-shade--active);
--_color-box-shadow: var(--element-input-box-shadow-color--active);
}
&:focus {
--_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--focus);
--_shade-box-shadow: var(--element-input-box-shadow-shade--focus);
--_shade-background: var(--element-input-background-shade--focus);
--_shade-text: var(--element-input-text-shade--focus);
--_color-box-shadow: var(--element-input-box-shadow-color--focus);
}
&:disabled {
--_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--disabled);
--_shade-box-shadow: var(--element-input-box-shadow-shade--disabled);
--_shade-background: var(--element-input-background-shade--disabled);
--_shade-text: var(--element-input-text-shade--disabled);
cursor: not-allowed;
}
&[aria-invalid='true'] {
--_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--error);
--_shade-box-shadow: var(--element-input-box-shadow-shade--error);
--_shade-background: var(--element-input-background-shade--error);
--_shade-text: var(--element-input-text-shade--error);
--_color-box-shadow: var(--element-input-box-shadow-color--error);
}
& ~ button {
--element-button-height: 100%;
}
}
.element-input--inverted {
--_color-secondary: var(--element-input-color-primary, var(--color-primary, #000));
--_color-primary: var(--element-input-color-secondary, var(--color-secondary, #fff));
}
.element-input--transparent {
--_color-primary: var(--element-input-color-primary, var(--color-primary, #000));
--_color-secondary: transparent;
}
.element-input--inverted.element-input--transparent {
--_color-primary: var(--element-input-color-secondary, var(--rootcolor-secondary, #fff));
--_color-secondary: transparent;
}
.element-input--inline {
--_radius: var(--radius-none);
--_box-shadow: inset 0 calc(var(--_box-shadow-spread-radius) * -1) 0 0 var(--_color-box-shadow);
}
.element-input--full {
--_width: 100%;
}
/* Date input specific styles */
.element-input[type="date"] {
text-align: left;
padding-right: var(--size-8); /* Space for calendar icon */
}
.element-input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
right: var(--_padding-inline);
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: var(--size-4);
height: var(--size-4);
}
.element-input[type="date"]::-webkit-datetime-edit {
width: 100%;
}
.element-input[type="date"]::-webkit-datetime-edit-fields-wrapper {
width: 100%;
}
.element-placeholder {
fill: #999;
background-color: #e1e1e1;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
padding: 30px 0;
}
.element-placeholder--no-padding {
padding: 0;
}
.element-quantity-selector {
--element-input-color-primary: var(--color-primary, #000);
--element-input-color-secondary: var(--color-secondary, #fff);
width: fit-content;
display: inline-block;
position: relative;
overflow: visible;
pointer-events: auto;
&.is-loading {
opacity: 0.5;
pointer-events: none;
}
}
.element-quantity-selector__input {
--element-input-radius: var(--element-button-radius);
--element-input-padding-inline: calc(
var(--element-input-line-height) * var(--element-input-font-size) + 2 * var(--element-input-padding-block)
);
--element-input-width: max(calc(var(--digit-count, 1ch) + 2 * var(--size-1)), 32px);
box-sizing: content-box;
text-align: center;
}
.element-quantity-selector__button {
--element-button-border-width: 0;
--element-button-color-primary: var(--element-input-color-primary, var(--root-color-primary, #000));
--element-button-color-secondary: var(--element-input-color-secondary, var(--root-color-secondary, #fff));
position: absolute;
top: 0;
height: 100%;
aspect-ratio: 1;
border: 1px solid transparent;
background-clip: padding-box;
z-index: 1;
&:has(+ .element-quantity-selector__input:focus),
.element-quantity-selector__input:focus + & {
border-width: var(--element-input-box-shadow-spread-radius--hover);
}
&:is(.element-quantity-selector__button--minus) {
border-radius: var(--element-button-radius) 0 0 var(--element-button-radius);
left: 0;
}
&:is(.element-quantity-selector__button--plus) {
border-radius: 0 var(--element-button-radius) var(--element-button-radius) 0;
right: 0;
}
}
:root {
--element-radio-size: var(--size-5);
--element-radio-dot-size: var(--size-2-5);
--element-radio-dot-opacity: 0;
--element-radio-radius: 50%;
--element-radio-gap: var(--size-2);
--element-radio-border-width: 1px;
--element-radio-border-width--focus: 2px;
--element-radio-color-primary: initial;
--element-radio-color-secondary: initial;
--element-radio-color-focus: var(--color-focus);
--element-radio-shade-background: 0%;
--element-radio-shade-background--hover: 4%;
--element-radio-shade-background--checked: 100%;
--element-radio-shade-background--disabled: 8%;
--element-radio-shade-border: 12%;
--element-radio-shade-border--disabled: 8%;
}
.element-radio {
/* Layout & Typography */
--_size: var(--element-radio-size);
--_dot-size: var(--element-radio-dot-size);
--_dot-opacity: var(--element-radio-dot-opacity);
--_radius: var(--element-radio-radius);
--_gap: var(--element-radio-gap);
--_border-width: var(--element-radio-border-width);
/* Colors */
--_color-primary: var(--element-radio-color-primary, var(--color-primary));
--_color-secondary: var(--element-radio-color-secondary, var(--color-secondary));
--_color-focus: var(--element-radio-color-focus, var(--color-focus, #4a9afc));
--_shade-background: var(--element-radio-shade-background);
--_shade-border: var(--element-radio-shade-border);
--_box-shadow: 0 0 0 var(--_border-width) color-mix(in srgb, var(--_color-primary) var(--_shade-border), var(--_color-secondary));
@media (max-width: 768px) {
--_size: var(--radio-size, var(--size-4));
--_dot-size: var(--radio-dot-size, var(--size-2));
}
position: relative;
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--_gap);
cursor: pointer;
input[type='radio'] {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
&:hover {
--_shade-background: var(--element-radio-shade-background--hover);
}
&:has(input[type='radio']:checked) {
--_dot-opacity: 1;
--_shade-background: var(--element-radio-shade-background--checked);
}
&:has(input[type='radio']:focus-visible) {
--_border-width: var(--element-radio-border-width--focus);
--_box-shadow: 0 0 0 var(--_border-width) var(--_color-focus);
}
&:has(input[type='radio']:disabled) {
--_shade-background: var(--element-radio-shade-background--disabled);
--_shade-border: var(--element-radio-shade-border--disabled);
cursor: not-allowed;
}
}
.element-radio__icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: var(--_size);
height: var(--_size);
border-radius: var(--_radius);
box-shadow: var(--_box-shadow);
background-color: color-mix(in srgb, var(--_color-primary) var(--_shade-background), var(--_color-secondary));
&::before {
content: '';
width: var(--_dot-size);
height: var(--_dot-size);
background-color: var(--_color-secondary);
border-radius: 50%;
opacity: var(--_dot-opacity);
}
}
element-select {
display: inline-block;
position: relative;
}
/* Ensure the custom element inherits the wrapper styles */
element-select.element-select__wrapper {
position: relative;
display: inline-block;
}
element-select.element-select__wrapper select {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
/* Ensure the select is focusable and visible to screen readers */
pointer-events: auto;
}
/* Focus state for the wrapper */
element-select.element-select__wrapper--focused .element-button {
--_box-shadow: 0 0 0 var(--element-input-box-shadow-spread-radius--focus) color-mix(in srgb, var(--color-primary) var(--element-input-box-shadow-shade--focus), transparent);
}
element-select select:focus-visible + .element-button {
--_border-width: var(--element-input-box-shadow-spread-radius--focus);
--_box-shadow: inset 0 0 0 var(--_border-width) var(--_color-focus);
}
/* Ensure the button takes full width */
element-select .element-button {
width: 100%;
justify-content: space-between;
}
.element-swatch {
/* Layout */
--_size-small: var(--element-swatch-size-small, var(--size-4));
--_size-large: var(--element-swatch-size-large, var(--size-8));
--_size-mobile-ratio: var(--element-swatch-size-mobile-ratio, 0.875); /* 3.5/4 for small, 6/8 for large (0.75) */
--_size: var(--_size-small);
--_radius: var(--element-swatch-radius, var(--radius-full));
--_border-width: var(--element-swatch-border-width, var(--size-0-25));
--_outline-width: var(--element-swatch-outline-width, 3px);
--_line-disabled-width: var(
--element-swatch-line-disabled-width,
max(var(--size-0-25), calc(var(--_size) * 0.0625))
);
/* Colors */
--_color-primary: var(--color-primary, #000);
--_color-secondary: var(--color-secondary, #fff);
--_color-background: var(--element-swatch-color-background, var(--_color-primary));
--_color-background-image: var(--element-swatch-color-background-image, none);
--_color-border: var(--element-swatch-color-border, var(--_color-primary));
--_color-disabled: var(--element-swatch-color-disabled, none);
--_color-focus: var(--element-swatch-color-focus, var(--color-focus, #4a9afc));
--_shade-inset: var(--element-swatch-shade-inset, 16%);
--_shade-outer: var(--element-swatch-shade-outer, 0%);
--_shade-outer-hover: var(--element-swatch-shade-outer-hover, 20%);
--_shade-outer-selected: var(--element-swatch-shade-outer-selected, 100%);
display: inline-block;
background: var(--_color-disabled), var(--_color-background-image) center / cover, var(--_color-background);
width: var(--_size);
height: var(--_size);
border-radius: var(--_radius);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--_color-secondary) 100%, transparent),
0 0 0 var(--_outline-width) color-mix(in srgb, var(--_color-primary) var(--_shade-outer), transparent),
inset 0 0 0 var(--_border-width) color-mix(in srgb, var(--_color-border) var(--_shade-inset), transparent);
outline: 0;
@media only screen and (max-width: 768px) {
--_size: calc(var(--_size-small) * var(--_size-mobile-ratio));
}
label:hover &,
&:hover {
--_outline-width: 4px;
--_shade-outer: var(--_shade-outer-hover);
}
&:focus,
input:checked ~ &,
.element-swatch--selected {
--_shade-outer: var(--_shade-outer-selected);
}
/* Focus State */
&:focus-visible,
input[type='radio']:focus-visible ~ & {
--_color-primary: var(--_color-focus);
--_outline-width: 4px;
}
}
.element-swatch--large {
--_size: var(--_size-large);
@media only screen and (max-width: 768px) {
--_size: calc(var(--_size-large) * var(--_size-mobile-ratio));
}
}
.element-swatch--disabled,
.disabled > input[type='radio'] ~ &,
input:disabled + & {
--_color-disabled: linear-gradient(
to bottom right,
transparent calc(50% - var(--_line-disabled-width)),
var(--color-secondary) calc(50% - var(--_line-disabled-width)) calc(50% + var(--_line-disabled-width)),
transparent calc(50% + var(--_line-disabled-width))
);
}
/* Public Body Variables */
:root {
/* Body Font Styles */
--element-text-font-family--body: 'Arial';
--element-text-font-family-fallback--body: 'sans-serif';
--element-text-font-weight--body: var(--font-weight-400);
--element-text-letter-spacing--body: var(--letter-space-md);
--element-text-text-transform--body: none;
/* Body Color */
--element-text-color--body: initial;
/* Body Font Sizes */
--element-text-font-size--body: initial;
--element-text-font-size--body-xs: var(--text-size-3);
--element-text-font-size--body-sm: var(--text-size-3-5);
--element-text-font-size--body-md: var(--text-size-4);
--element-text-font-size--body-lg: var(--text-size-4-5);
/* Body Line Heights */
--element-text-line-height--body: var(--line-height-md);
--element-text-line-height--body-xs: initial;
--element-text-line-height--body-sm: initial;
--element-text-line-height--body-md: initial;
--element-text-line-height--body-lg: initial;
}
.element-text:is([class*="element-text--body"]) {
/* Body Font Styles */
--_font-family--body: var(--_font-family, var(--element-text-font-family--body));
--_font-family-fallback--body: var(--_font-family-fallback, var(--element-text-font-family-fallback--body));
--_font-weight--body: var(--_font-weight, var(--element-text-font-weight--body));
--_letter-spacing--body: var(--_letter-spacing, var(--element-text-letter-spacing--body));
--_text-transform--body: var(--_text-transform, var(--element-text-text-transform--body));
/* Body Color */
--_color--body: var(--_color, var(--element-text-color--body, currentColor));
/* Body Font Sizes */
--_font-size--body: var(--_font-size, var(--element-text-font-size--body));
--_font-size--body-xs: var(--_font-size--body, var(--element-text-font-size--body-xs));
--_font-size--body-sm: var(--_font-size--body, var(--element-text-font-size--body-sm));
--_font-size--body-md: var(--_font-size--body, var(--element-text-font-size--body-md));
--_font-size--body-lg: var(--_font-size--body, var(--element-text-font-size--body-lg));
/* Body Line Heights */
--_line-height--body: var(--_line-height, var(--element-text-line-height--body));
--_line-height--body-xs: var(--element-text-line-height--body-xs, var(--_line-height--body));
--_line-height--body-sm: var(--element-text-line-height--body-sm, var(--_line-height--body));
--_line-height--body-md: var(--element-text-line-height--body-md, var(--_line-height--body));
--_line-height--body-lg: var(--element-text-line-height--body-lg, var(--_line-height--body));
font-family: var(--_font-family--body), var(--_font-family-fallback--body);
font-weight: var(--_font-weight--body);
letter-spacing: var(--_letter-spacing--body);
text-transform: var(--_text-transform--body);
color: var(--_color--body);
&:where(.element-text--body-xs) {
--_font-size: var(--_font-size--body-xs);
line-height: var(--_line-height--body-xs);
}
&:where(.element-text--body-sm) {
font-size: var(--_font-size--body-sm);
line-height: var(--_line-height--body-sm);
}
&:where(.element-text--body-md) {
font-size: var(--_font-size--body-md);
line-height: var(--_line-height--body-md);
}
&:where(.element-text--body-lg) {
font-size: var(--_font-size--body-lg);
line-height: var(--_line-height--body-lg);
}
}
/* Public Heading Variables */
:root {
/* Heading Font Styles */
--element-text-font-family--heading: 'Arial';
--element-text-font-family-fallback--heading: 'sans-serif';
--element-text-font-weight--heading: var(--font-weight-700);
--element-text-letter-spacing--heading: var(--letter-space-md);
--element-text-text-transform--heading: none;
/* Heading Color */
--element-text-color--heading: initial;
/* Heading Font Sizes */
--element-text-font-size--heading: initial;
--element-text-font-size--heading-2xl: var(--text-size-12);
--element-text-font-size--heading-xl: var(--text-size-8);
--element-text-font-size--heading-lg: var(--text-size-6);
--element-text-font-size--heading-md: var(--text-size-5);
--element-text-font-size--heading-sm: var(--text-size-4-5);
--element-text-font-size--heading-xs: var(--text-size-4);
--element-text-font-size--heading-2xs: var(--text-size-3-5);
/* Heading Line Heights */
--element-text-line-height--heading: var(--line-height-md);
--element-text-line-height--heading-2xl: initial;
--element-text-line-height--heading-xl: initial;
--element-text-line-height--heading-lg: initial;
--element-text-line-height--heading-md: initial;
--element-text-line-height--heading-sm: initial;
--element-text-line-height--heading-xs: initial;
--element-text-line-height--heading-2xs: initial;
}
.element-text:is([class*="element-text--heading"]) {
/* Heading Font Styles */
--_font-family--heading: var(--_font-family, var(--element-text-font-family--heading));
--_font-family-fallback--heading: var(--_font-family-fallback, var(--element-text-font-family-fallback--heading));
--_font-weight--heading: var(--_font-weight, var(--element-text-font-weight--heading));
--_letter-spacing--heading: var(--_letter-spacing, var(--element-text-letter-spacing--heading));
--_text-transform--heading: var(--_text-transform, var(--element-text-text-transform--heading));
/* Heading Color */
--_color--heading: var(--_color, var(--element-text-color--heading, currentColor));
/* Heading Font Sizes */
--_font-size--heading: var(--_font-size, var(--element-text-font-size--heading));
--_font-size--heading-2xl: var(--_font-size--heading, var(--element-text-font-size--heading-2xl));
--_font-size--heading-xl: var(--_font-size--heading, var(--element-text-font-size--heading-xl));
--_font-size--heading-lg: var(--_font-size--heading, var(--element-text-font-size--heading-lg));
--_font-size--heading-md: var(--_font-size--heading, var(--element-text-font-size--heading-md));
--_font-size--heading-sm: var(--_font-size--heading, var(--element-text-font-size--heading-sm));
--_font-size--heading-xs: var(--_font-size--heading, var(--element-text-font-size--heading-xs));
/* Heading Line Heights */
--_line-height--heading: var(--_line-height, var(--element-text-line-height--heading));
--_line-height--heading-2xl: var(--element-text-line-height--heading-2xl, var(--_line-height--heading));
--_line-height--heading-xl: var(--element-text-line-height--heading-xl, var(--_line-height--heading));
--_line-height--heading-lg: var(--element-text-line-height--heading-lg, var(--_line-height--heading));
--_line-height--heading-md: var(--element-text-line-height--heading-md, var(--_line-height--heading));
--_line-height--heading-sm: var(--element-text-line-height--heading-sm, var(--_line-height--heading));
--_line-height--heading-xs: var(--element-text-line-height--heading-xs, var(--_line-height--heading));
font-family:var(--_font-family--heading), var(--_font-family-fallback--heading);
font-weight: var(--_font-weight--heading);
letter-spacing: var(--_letter-spacing--heading);
text-transform: var(--_text-transform--heading);
color: var(--_color--heading);
&:where(.element-text--heading-2xs) {
font-size: var(--_font-size--heading-2xs);
line-height: var(--_line-height--heading-2xs);
}
&:where(.element-text--heading-xs) {
font-size: var(--_font-size--heading-xs);
line-height: var(--_line-height--heading-xs);
}
&:where(.element-text--heading-sm) {
font-size: var(--_font-size--heading-sm);
line-height: var(--_line-height--heading-sm);
}
&:where(.element-text--heading-md) {
font-size: var(--_font-size--heading-md);
line-height: var(--_line-height--heading-md);
}
&:where(.element-text--heading-lg) {
font-size: var(--_font-size--heading-lg);
line-height: var(--_line-height--heading-lg);
}
&:where(.element-text--heading-xl) {
font-size: var(--_font-size--heading-xl);
line-height: var(--_line-height--heading-xl);
}
&:where(.element-text--heading-2xl) {
font-size: var(--_font-size--heading-2xl);
line-height: var(--_line-height--heading-2xl);
}
}
/* Public RTE Variables */
:root {
/* Body Font Stack */
--element-text-font-family--rte-body: var(--element-text-font-family--body);
--element-text-font-family-fallback--rte-body: var(--element-text-font-family-fallback--body);
--element-text-font-weight--rte-body: var(--element-text-font-weight--body);
--element-text-letter-spacing--rte-body: var(--element-text-letter-spacing--body);
--element-text-line-height--rte-body: var(--element-text-line-height--body);
--element-text-text-transform--rte-body: var(--element-text-text-transform--body);
/* Body Font Sizes */
--element-text-font-size--rte-body: var(--element-text-font-size--body-md);
--element-text-line-height--rte-body: var(--element-text-line-height--body);
/* Heading Font Stack */
--element-text-font-family--rte-heading: var(--element-text-font-family--heading);
--element-text-font-family-fallback--rte-heading: var(--element-text-font-family-fallback--heading);
--element-text-font-weight--rte-heading: var(--element-text-font-weight--heading);
--element-text-letter-spacing--rte-heading: var(--element-text-letter-spacing--heading);
--element-text-text-transform--rte-heading: var(--element-text-text-transform--heading);
/* Heading Font Sizes */
--element-text-font-size--rte-heading-h1: var(--element-text-font-size--heading-xl);
--element-text-line-height--rte-heading-h1: var(--element-text-line-height--heading-xl);
--element-text-font-size--rte-heading-h2: var(--element-text-font-size--heading-lg);
--element-text-line-height--rte-heading-h2: var(--element-text-line-height--heading-lg);
--element-text-font-size--rte-heading-h3: var(--element-text-font-size--heading-md);
--element-text-line-height--rte-heading-h3: var(--element-text-line-height--heading-md);
--element-text-font-size--rte-heading-h4: var(--element-text-font-size--heading-sm);
--element-text-line-height--rte-heading-h4: var(--element-text-line-height--heading-sm);
--element-text-font-size--rte-heading-h5: var(--element-text-font-size--heading-xs);
--element-text-line-height--rte-heading-h5: var(--element-text-line-height--heading-xs);
--element-text-font-size--rte-heading-h6: var(--element-text-font-size--heading-xs);
}
.element-text.element-text--rte {
/* Body Font Stack */
--_font-family--rte-body: var(--element-text-font-family--rte-body);
--_font-family-fallback--rte-body: var(--element-text-font-family-fallback--rte-body);
--_font-weight--rte-body: var(--element-text-font-weight--rte-body);
--_letter-spacing--rte-body: var(--element-text-letter-spacing--rte-body);
--_text-transform--rte-body: var(--element-text-text-transform--rte-body);
/* Body Font Sizes */
--_line-height--rte-body: var(--element-text-line-height--rte-body);
--_font-size--rte-body: var(--element-text-font-size--rte-body);
/* Heading Font Stack */
--_font-family--rte-heading: var(--element-text-font-family--rte-heading);
--_font-family-fallback--rte-heading: var(--element-text-font-family-fallback--rte-heading);
--_font-weight--rte-heading: var(--element-text-font-weight--rte-heading);
--_letter-spacing--rte-heading: var(--element-text-letter-spacing--rte-heading);
--_text-transform--rte-heading: var(--element-text-text-transform--rte-heading);
/* Heading Font Sizes */
--_font-size--rte-heading-h1: var(--element-text-font-size--rte-heading-h1);
--_line-height--rte-heading-h1: var(--element-text-line-height--rte-heading-h1);
--_font-size--rte-heading-h2: var(--element-text-font-size--rte-heading-h2);
--_line-height--rte-heading-h2: var(--element-text-line-height--rte-heading-h2);
--_font-size--rte-heading-h3: var(--element-text-font-size--rte-heading-h3);
--_line-height--rte-heading-h3: var(--element-text-line-height--rte-heading-h3);
--_font-size--rte-heading-h4: var(--element-text-font-size--rte-heading-h4);
--_line-height--rte-heading-h4: var(--element-text-line-height--rte-heading-h4);
--_font-size--rte-heading-h5: var(--element-text-font-size--rte-heading-h5);
--_line-height--rte-heading-h5: var(--element-text-line-height--rte-heading-h5);
--_font-size--rte-heading-h6: var(--element-text-font-size--rte-heading-h6);
--_line-height--rte-heading-h6: var(--element-text-line-height--rte-heading-h6);
font-size: var(--_font-size--rte-body);
font-family: var(--_font-family--rte-body), var(--_font-family-fallback--rte-body);
font-weight: var(--_font-weight--rte-body);
letter-spacing: var(--_letter-spacing--rte-body);
text-transform: var(--_text-transform--rte-body);
line-height: var(--_line-height--rte-body);
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--_font-family--rte-heading), var(--_font-family-fallback--rte-heading);
font-weight: var(--_font-weight--rte-heading);
letter-spacing: var(--_letter-spacing--rte-heading);
text-transform: var(--_text-transform--rte-heading);
margin: 0 0 var(--size-4);
@media only screen and (min-width: 769px) {
margin: 0 0 var(--size-5);
}
}
h6 {
font-size: var(--_font-size--rte-heading-h6);
line-height: var(--_line-height--rte-heading-h6);
}
h5 {
font-size: var(--_font-size--rte-heading-h5);
line-height: var(--_line-height--rte-heading-h5);
}
h4 {
font-size: var(--_font-size--rte-heading-h4);
line-height: var(--_line-height--rte-heading-h4);
}
h3 {
font-size: var(--_font-size--rte-heading-h3);
line-height: var(--_line-height--rte-heading-h3);
}
h2 {
font-size: var(--_font-size--rte-heading-h2);
line-height: var(--_line-height--rte-heading-h2);
}
h1 {
font-size: var(--_font-size--rte-heading-h1);
line-height: var(--_line-height--rte-heading-h1);
}
a {
text-decoration: underline;
}
p {
margin-bottom: var(--size-8);
&:last-child {
margin-bottom: 0;
}
}
& table {
@media only screen and (max-width: 768px) {
& td,
& th {
padding: 6px 8px;
}
}
}
.table-wrapper {
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.video-wrapper {
position: relative;
overflow: hidden;
max-width: 100%;
padding-bottom: 56.25%;
& iframe,
& video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
:root {
--element-text-font-family: initial;
--element-text-font-family-fallback: initial;
--element-text-font-weight: initial;
--element-text-letter-spacing: initial;
--element-text-text-transform: initial;
--element-text-line-height: initial;
--element-text-color: initial;
--element-text-font-size: initial;
}
.element-text {
/* Base Typography Variables */
--_font-family: var(--element-text-font-family);
--_font-family-fallback: var(--element-text-font-family-fallback);
--_font-weight: var(--element-text-font-weight);
--_letter-spacing: var(--element-text-letter-spacing);
--_text-transform: var(--element-text-text-transform);
--_line-height: var(--element-text-line-height);
--_color: var(--element-text-color, currentColor);
--_font-size: var(--element-text-font-size);
font-family: var(--_font-family), var(--_font-family-fallback);
font-weight: var(--_font-weight);
letter-spacing: var(--_letter-spacing);
text-transform: var(--_text-transform);
line-height: var(--_line-height);
color: var(--_color);
font-size: var(--_font-size);
margin: 0;
-webkit-font-smoothing: antialiased;
&.element-text--price {
sup {
top: -0.5em;
font-size: 60%;
}
}
&.element-text--align-start {
text-align: start;
}
&.element-text--align-center {
text-align: center;
}
&.element-text--align-end {
text-align: end;
}
&.element-text--align-justify {
text-align: justify;
}
&.element-text--break-word {
word-break: break-word;
}
&.element-text--truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.element-text--visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
&.element-text--line-through {
text-decoration: line-through;
}
&.element-text--line-through.element-text--price-superscript {
text-decoration: none;
span {
text-decoration: line-through;
}
sup {
text-decoration: line-through;
position: relative;
top: -0.5em;
font-size: 60%;
}
}
&.element-text--underline {
text-decoration: underline;
}
&.element-text--uppercase {
text-transform: uppercase;
}
&.element-text--lowercase {
text-transform: lowercase;
}
&.element-text--capitalize {
text-transform: capitalize;
}
}
video-media {
--default-aspect-ratio: 16 / 9;
display: block;
position: relative;
width: 100%;
aspect-ratio: var(--aspect-ratio, var(--default-aspect-ratio));
}
video-media > :is(video, iframe, img, svg) {
border-radius: inherit;
width: 100%;
height: 100%;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
video-media > img,
video-media > svg,
video-media > video:not(:fullscreen) {
object-fit: cover;
object-position: center;
}
.element-video[data-background='true'] > video-media,
.element-video[data-background='true'] > .element-placeholder {
position: absolute;
height: 100%;
width: 100%;
}
.element-video.aspect-ratio--square {
--aspect-ratio: 1 / 1;
aspect-ratio: 1 / 1;
}
.element-video.aspect-ratio--portrait {
--aspect-ratio: 9 / 16;
aspect-ratio: 9 / 16;
}
.element-video.aspect-ratio--landscape,
.element-video.aspect-ratio--16-9 {
--aspect-ratio: 16 / 9;
aspect-ratio: 16 / 9;
}
video-media:not([loaded]) > :is(video, iframe),
video-media[loaded] > img,
video-media[loaded] > svg {
visibility: hidden;
opacity: 0;
}
.product-form__submit-button--pulsing {
animation: product-form-pulse 1.5s ease-in-out infinite;
pointer-events: none;
opacity: 0.6;
}
@keyframes product-form-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
product-form-messages {
display: inline;
}
product-form-messages.hide {
display: none;
}
/* Public Layout Grid Tokens */
:root {
/* Layout Grid Gap Sizes - These are assigned by the value passed to the 'gap' param */
--layout-grid-gap-size-none: 0px;
--layout-grid-gap-size-3xs: var(--gap-size-3xs);
--layout-grid-gap-size-2xs: var(--gap-size-2xs);
--layout-grid-gap-size-xs: var(--gap-size-xs);
--layout-grid-gap-size-sm: var(--gap-size-sm);
--layout-grid-gap-size-md: var(--gap-size-md);
--layout-grid-gap-size-lg: var(--gap-size-lg);
--layout-grid-gap-size-xl: var(--gap-size-xl);
--layout-grid-gap-size-2xl: var(--gap-size-2xl);
/* Layout Grid Line Sizes - These are assigned by the value passed to the 'lines' param */
--layout-grid-line-size-none: 0px;
--layout-grid-line-size-xs: var(--line-size-xs);
--layout-grid-line-size-sm: var(--line-size-sm);
--layout-grid-line-size-md: var(--line-size-md);
--layout-grid-line-size-lg: var(--line-size-lg);
--layout-grid-line-size-xl: var(--line-size-xl);
--layout-grid-line-color-shade: 12%;
}
:root {
--layout-section-max-inline-size: var(--page-width, 1500px);
--layout-section-padding-inline: var(--size-4);
--layout-section-padding-inline--xs: initial;
--layout-section-padding-inline--sm: initial;
--layout-section-padding-inline--md: initial;
--layout-section-padding-inline--lg: initial;
--layout-section-padding-inline--xl: initial;
--layout-section-padding-block: var(--size-8);
--layout-section-padding-block--xs: initial;
--layout-section-padding-block--sm: initial;
--layout-section-padding-block--md: initial;
--layout-section-padding-block--lg: initial;
--layout-section-padding-block--xl: initial;
--layout-section-color: initial;
--layout-section-background: initial;
}
.layout-section {
--_max-inline-size: var(--layout-section-max-inline-size);
--_padding-inline--xs: var(--layout-section-padding-inline--xs, var(--layout-section-padding-inline));
--_padding-inline--sm: var(--layout-section-padding-inline--sm, var(--_padding-inline--xs));
--_padding-inline--md: var(--layout-section-padding-inline--md, var(--_padding-inline--sm));
--_padding-inline--lg: var(--layout-section-padding-inline--lg, var(--_padding-inline--md));
--_padding-inline--xl: var(--layout-section-padding-inline--xl, var(--_padding-inline--lg));
--_padding-inline: var(--_padding-inline--xs);
--_padding-block--xs: var(--layout-section-padding-block--xs, var(--layout-section-padding-block));
--_padding-block--sm: var(--layout-section-padding-block--sm, var(--_padding-block--xs));
--_padding-block--md: var(--layout-section-padding-block--md, var(--_padding-block--sm));
--_padding-block--lg: var(--layout-section-padding-block--lg, var(--_padding-block--md));
--_padding-block--xl: var(--layout-section-padding-block--xl, var(--_padding-block--lg));
--_padding-block: var(--_padding-block--xs);
--_color: var(--layout-section-color, var(--color-primary, #000));
--_background: var(--layout-section-background, var(--color-secondary, #fff));
display: flex;
width: 100%;
position: relative;
justify-content: center;
background: var(--_background);
color: var(--_color);
padding-inline: var(--_padding-inline);
padding-block: var(--_padding-block);
& > .layout-section__content {
display: block;
max-inline-size: var(--_max-inline-size);
z-index: 1;
width: 100%;
flex-grow: 1;
}
&.layout-section--full-width > .layout-section__content {
max-inline-size: 100%;
}
&.layout-section--padding-none {
padding-block: 0;
}
&.layout-section--padding-top {
padding-block-end: 0;
}
&.layout-section--padding-bottom {
padding-block-start: 0;
}
}
/* Public Layout Stack Tokens */
:root {
/* Layout Stack Gap Sizes - These are assigned by the value passed to the 'gap' param */
--layout-stack-gap-size-none: 0px;
--layout-stack-gap-size-3xs: var(--gap-size-3xs);
--layout-stack-gap-size-2xs: var(--gap-size-2xs);
--layout-stack-gap-size-xs: var(--gap-size-xs);
--layout-stack-gap-size-sm: var(--gap-size-sm);
--layout-stack-gap-size-md: var(--gap-size-md);
--layout-stack-gap-size-lg: var(--gap-size-lg);
--layout-stack-gap-size-xl: var(--gap-size-xl);
--layout-stack-gap-size-2xl: var(--gap-size-2xl);
/* Layout Stack Default Layout */
--layout-stack-margin: 0;
}
:root {
--layout-sticky-scroller-top: 20px;
}
sticky-scroller {
--_top: var(--layout-sticky-scroller-top);
display: block;
position: sticky;
top: var(--_top);
}
:root {
--overlay-drawer-size: 480px;
--overlay-drawer-gutter: var(--gap-size-none); /* better name? */
--overlay-drawer-label-margin-bottom: var(--size-4);
--overlay-drawer-padding-inline: var(--size-4);
--overlay-drawer-padding-inline--xs: initial;
--overlay-drawer-padding-inline--sm: initial;
--overlay-drawer-padding-inline--md: initial;
--overlay-drawer-padding-inline--lg: initial;
--overlay-drawer-padding-inline--xl: initial;
--overlay-drawer-padding-block: var(--size-8);
--overlay-drawer-padding-block--xs: initial;
--overlay-drawer-padding-block--sm: initial;
--overlay-drawer-padding-block--md: initial;
--overlay-drawer-padding-block--lg: initial;
--overlay-drawer-padding-block--xl: initial;
--overlay-drawer-background: initial;
--overlay-drawer-overlay-color: rgba(0, 0, 0, 0.5);
--overlay-drawer-z-index: 9999;
--overlay-drawer-transition-duration: 0.3s;
--overlay-drawer-transition-timing-function: ease-in-out;
}
/* Scroll lock when drawer is open */
body:has(.overlay-drawer[open='true']) {
overflow: hidden;
}
.overlay-drawer {
--_width: calc(100% - var(--overlay-drawer-gutter));
--_max-width: var(--overlay-drawer-size);
--_padding-inline--xs: var(--overlay-drawer-padding-inline--xs, var(--overlay-drawer-padding-inline));
--_padding-inline--sm: var(--overlay-drawer-padding-inline--sm, var(--_padding-inline--xs));
--_padding-inline--md: var(--overlay-drawer-padding-inline--md, var(--_padding-inline--sm));
--_padding-inline--lg: var(--overlay-drawer-padding-inline--lg, var(--_padding-inline--md));
--_padding-inline--xl: var(--overlay-drawer-padding-inline--xl, var(--_padding-inline--lg));
--_padding-inline: var(--_padding-inline--xs);
--_padding-block--xs: var(--overlay-drawer-padding-block--xs, var(--overlay-drawer-padding-block));
--_padding-block--sm: var(--overlay-drawer-padding-block--sm, var(--_padding-block--xs));
--_padding-block--md: var(--overlay-drawer-padding-block--md, var(--_padding-block--sm));
--_padding-block--lg: var(--overlay-drawer-padding-block--lg, var(--_padding-block--md));
--_padding-block--xl: var(--overlay-drawer-padding-block--xl, var(--_padding-block--lg));
--_padding-block: var(--_padding-block--xs);
--_background: var(--overlay-drawer-background, var(--color-secondary, #fff));
display: block;
position: fixed;
inset: 0;
height: 100%;
width: 100%;
transition-property: background-color;
transition-duration: var(--overlay-drawer-transition-duration);
transition-timing-function: var(--overlay-drawer-transition-timing-function);
cursor: pointer;
z-index: var(--overlay-drawer-z-index);
&[open='false'] {
pointer-events: none;
}
&[open='true'] {
background-color: var(--overlay-drawer-overlay-color);
}
}
.overlay-drawer__inner {
background: var(--_background);
cursor: initial;
position: absolute;
width: var(--_width);
max-width: var(--_max-width);
top: 0;
transition-property: transform;
transition-duration: var(--overlay-drawer-transition-duration);
transition-timing-function: var(--overlay-drawer-transition-timing-function);
height: 100%;
overflow-y: auto;
padding-inline: var(--_padding-inline);
padding-block: var(--_padding-block);
.overlay-drawer--start & {
left: max(calc(-1 * var(--_width)), calc(-1 * var(--_max-width)));
}
.overlay-drawer--start[open='true'] & {
transform: translateX(100%);
}
.overlay-drawer--end & {
right: max(calc(-1 * var(--_width)), calc(-1 * var(--_max-width)));
}
.overlay-drawer--end[open='true'] & {
transform: translateX(-100%);
}
}
.overlay-drawer__header {
display: flex;
justify-content: flex-end;
align-items: center;
margin-block-end: var(--overlay-drawer-label-margin-bottom);
&:has(.overlay-drawer__label) {
justify-content: space-between;
}
}
.overlay-drawer__close-button {
line-height: 0;
}
overlay-lightbox {
display: contents;
}
.overlay-lightbox__trigger {
display: contents;
cursor: pointer;
}
.overlay-lightbox__overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.95);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
}
.overlay-lightbox__overlay--open {
opacity: 1;
visibility: visible;
}
.overlay-lightbox__content {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.overlay-lightbox__content img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
object-fit: contain;
}
.overlay-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.overlay-lightbox__nav--prev {
left: 1rem;
}
.overlay-lightbox__nav--next {
right: 1rem;
}
/* Hide navigation buttons when there's only one item in the group */
.overlay-lightbox__overlay--single-item .overlay-lightbox__nav {
display: none;
}
.lightbox-close {
position: absolute;
top: 1rem;
right: 1rem;
}
product-hot-reload {
contain: layout style paint;
}
.product-hot-reload--loading {
opacity: 0.6;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* View Transitions API support */
@supports (view-transition-name: none) {
product-hot-reload {
view-transition-name: product-content;
}
}
gift-recipient-form {
display: block;
position: relative;
& .recipient-fields {
display: none;
}
}
.media-gallery {
--media-gallery-thumb-size: 80px;
--media-gallery-thumb-gap: var(--gap-size-xs);
display: block;
position: relative;
overflow: hidden;
}
.media-gallery__main {
position: relative;
width: 100%;
flex: 1;
overflow: hidden;
min-height: 400px;
aspect-ratio: 1;
touch-action: pan-y pinch-zoom;
transition: height 0.3s ease-in-out;
}
/* Disable transition when setting height programmatically */
.media-gallery__main--no-transition {
transition: none;
}
.media-gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.media-gallery__main:hover .media-gallery__nav {
opacity: 1;
}
.media-gallery__nav--prev {
left: var(--gap-size-sm);
}
.media-gallery__nav--next {
right: var(--gap-size-sm);
}
.media-gallery__nav:focus-visible {
opacity: 1;
}
.media-gallery__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
}
.media-gallery__slide--is-animating {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.media-gallery__slide--active {
opacity: 1;
transform: translateX(0);
z-index: 2;
}
.media-gallery__slide--prev {
transform: translateX(-100%);
}
.media-gallery__slide--next {
transform: translateX(100%);
}
.media-gallery__slide img:not(.overlay-lightbox__overlay img) {
width: 100%;
height: 100%;
object-fit: cover;
}
.media-gallery__thumbnails {
display: block;
width: fit-content;
max-width: 100%;
max-height: 650px;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.media-gallery__thumbnails--top,
.media-gallery__thumbnails--bottom {
overflow-x: auto;
}
.media-gallery__thumbnails--left,
.media-gallery__thumbnails--right {
overflow-y: auto;
}
/* Webkit scrollbar styling */
.media-gallery__thumbnails::-webkit-scrollbar {
height: 4px;
width: 4px;
}
.media-gallery__thumbnails::-webkit-scrollbar-track {
background: transparent;
}
.media-gallery__thumbnails::-webkit-scrollbar-thumb {
background: var(--color-border);
}
.media-gallery__thumbnails::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
.media-gallery__thumb {
position: relative;
border: 2px solid transparent;
background: none;
padding: 0;
cursor: pointer;
overflow: hidden;
transition: border-color 0.2s ease;
flex-shrink: 0;
width: var(--media-gallery-thumb-size);
height: var(--media-gallery-thumb-size);
}
.media-gallery__thumb--active {
border-color: var(--color-primary);
}
.media-gallery__thumb:hover {
border-color: var(--color-primary);
opacity: 0.8;
}
.media-gallery__thumb:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.media-gallery__thumb-image {
position: relative;
width: 100%;
max-width: var(--media-gallery-thumb-size);
max-height: var(--media-gallery-thumb-size);
height: var(--media-gallery-thumb-size);
aspect-ratio: 1;
}
.media-gallery__thumb-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.media-gallery__thumb-icon {
display: flex;
position: absolute;
top: var(--gap-size-2xs);
right: var(--gap-size-2xs);
background: var(--color-primary);
color: var(--color-secondary);
border-radius: 0;
padding: var(--gap-size-2xs);
z-index: 1;
}
.media-gallery__thumb-icon .element-icon {
width: 12px;
height: 12px;
}
.media-gallery .shopify-model-viewer-ui,
.media-gallery .shopify-model-viewer-ui model-viewer {
width: 100%;
height: 100%;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.media-gallery__main {
min-height: 300px;
}
.media-gallery__nav {
opacity: 1;
}
}
.media-grid {
overflow-x: auto;
overflow-y: hidden;
}
.media-grid__container {
min-width: 350px;
flex: 1 1 300px;
& img:not(.overlay-lightbox__overlay img) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.media-grid .shopify-model-viewer-ui,
.media-grid .shopify-model-viewer-ui model-viewer {
width: 100%;
height: 100%;
}
.element-icon-in-stock {
fill: var(--success-green, #56ad6a);
}
.element-icon-out-of-stock {
fill: var(--color-error, #ba4444);
}
.element-text__store-address p {
margin: 0;
}
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/
html {
font-family:
system-ui,
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji'; /* 1 */
line-height: 1.15; /* 2 */
-webkit-text-size-adjust: 100%; /* 3 */
tab-size: 4; /* 4 */
}
/*
Sections
========
*/
/**
Remove the margin in all browsers.
*/
body {
margin: 0;
}
/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
border-color: currentcolor;
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
:root {
/* Core Sizes */
--size-0-25: 0.0625rem; /* 1px */
--size-0-5: 0.125rem; /* 2px */
--size-1: 0.25rem; /* 4px */
--size-1-5: 0.375rem; /* 6px */
--size-2: 0.5rem; /* 8px */
--size-2-5: 0.625rem; /* 10px */
--size-3: 0.75rem; /* 12px */
--size-3-5: 0.875rem; /* 14px */
--size-4: 1rem; /* 16px */
--size-4-5: 1.125rem; /* 18px */
--size-5: 1.25rem; /* 20px */
--size-5-5: 1.375rem; /* 22px */
--size-6: 1.5rem; /* 24px */
--size-6-5: 1.625rem; /* 26px */
--size-7: 1.75rem; /* 28px */
--size-7-5: 1.875rem; /* 30px */
--size-8: 2rem; /* 32px */
--size-8-5: 2.125rem; /* 34px */
--size-9: 2.25rem; /* 36px */
--size-9-5: 2.375rem; /* 38px */
--size-10: 2.5rem; /* 40px */
--size-11: 2.75rem; /* 44px */
--size-12: 3rem; /* 48px */
--size-14: 3.5rem; /* 56px */
--size-16: 4rem; /* 64px */
--size-18: 4.5rem; /* 72px */
--size-20: 5rem; /* 80px */
--size-24: 6rem; /* 96px */
--size-28: 7rem; /* 112px */
--size-32: 8rem; /* 128px */
/* Text Sizes */
--text-size-2: 0.5rem; /* 8px */
--text-size-2-5: 0.625rem; /* 10px */
--text-size-3: 0.75rem; /* 12px */
--text-size-3-5: 0.875rem; /* 14px */
--text-size-4: 1rem; /* 16px */
--text-size-4-5: 1.125rem; /* 18px */
--text-size-5: 1.25rem; /* 20px */
--text-size-5-5: 1.375rem; /* 22px */
--text-size-6: 1.5rem; /* 24px */
--text-size-6-5: 1.625rem; /* 26px */
--text-size-7: 1.75rem; /* 28px */
--text-size-7-5: 1.875rem; /* 30px */
--text-size-8: 2rem; /* 32px */
--text-size-8-5: 2.125rem; /* 34px */
--text-size-9: 2.25rem; /* 36px */
--text-size-9-5: 2.375rem; /* 38px */
--text-size-10: 2.5rem; /* 40px */
--text-size-11: 2.75rem; /* 44px */
--text-size-12: 3rem; /* 48px */
--text-size-14: 3.5rem; /* 56px */
--text-size-16: 4rem; /* 64px */
--text-size-18: 4.5rem; /* 72px */
--text-size-20: 5rem; /* 80px */
--text-size-24: 6rem; /* 96px */
--text-size-28: 7rem; /* 112px */
--text-size-32: 8rem; /* 128px */
/* Line */
--line-size-none: 0px;
--line-size-xs: 0.5px;
--line-size-sm: 1px;
--line-size-md: 2px;
--line-size-lg: 4px;
--line-size-xl: 8px;
/* Gap */
--gap-size-none: 0px;
--gap-size-3xs: var(--size-0-5);
--gap-size-2xs: var(--size-1);
--gap-size-xs: var(--size-2);
--gap-size-sm: var(--size-4);
--gap-size-md: var(--size-8);
--gap-size-lg: var(--size-12);
--gap-size-xl: var(--size-16);
--gap-size-2xl: var(--size-24);
/* Radius */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-none: 0px;
--radius-full: 999px;
/* Dropshadow */
--shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0);
--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
--shadow-md: 0px 2px 4px -1px rgba(0, 0, 0, 0.08);
--shadow-lg: 0px 8px 16px -4px rgba(0, 0, 0, 0.08);
--shadow-xl: 0px 16px 32px -6px rgba(0, 0, 0, 0.12);
--shadow-2xl: 0px 16px 64px -12px rgba(0, 0, 0, 0.22);
/* Font Weights */
--font-weight-100: 100;
--font-weight-200: 200;
--font-weight-300: 300;
--font-weight-400: 400;
--font-weight-500: 500;
--font-weight-600: 600;
--font-weight-700: 700;
--font-weight-800: 800;
--font-weight-900: 900;
/* Letter Spacings */
--letter-space-2xs: -0.05em;
--letter-space-xs: -0.03em;
--letter-space-sm: -0.015em;
--letter-space-md: 0em;
--letter-space-lg: 0.015em;
--letter-space-xl: 0.03em;
--letter-space-2xl: 0.05em;
--letter-space-3xl: 0.08em;
--letter-space-4xl: 0.12em;
/* Line Heights */
--line-height-2xs: 0.9;
--line-height-xs: 1;
--line-height-sm: 1.1;
--line-height-md: 1.2;
--line-height-lg: 1.5;
--line-height-xl: 1.7;
--line-height-2xl: 2;
/* Color Shades */
--shade-0: 0%;
--shade-4: 4%;
--shade-8: 8%;
--shade-12: 12%;
--shade-16: 16%;
--shade-20: 20%;
--shade-30: 30%;
--shade-40: 40%;
--shade-50: 50%;
--shade-60: 60%;
--shade-70: 70%;
--shade-80: 80%;
--shade-90: 90%;
--shade-100: 100%;
}
.scheme-image,
.scheme-darken,
.scheme-squiggle,
.scheme-swirl,
.scheme-dots,
.scheme-notebook,
.scheme-wave,
.scheme-minimal-wave,
.scheme-plants,
.scheme-cold-blur,
.scheme-warm-blur,
.scheme-custom-texture-1,
.scheme-custom-texture-2,
.scheme-custom-texture-3 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
[data-animate].scheme-image {
object-fit: cover;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 1;
/*Specific styles on some textures*/
&[data-texture='space.jpg'] {
mix-blend-mode: screen;
}
}
[data-animate].scheme-texture--linen,
[data-animate].scheme-texture--sand,
[data-animate].scheme-texture--stone,
[data-animate].scheme-texture--wildflower {
opacity: 0.24;
}
/*Darken is CSS, not image*/
.scheme-darken {
--z-index-overlay: 1;
z-index: 1;
pointer-events: none;
&:after {
background-color: rgba(0, 0, 0, 0.027);
pointer-events: none;
}
}
/*
SVG images as backgrounds
- larger images are cached external assets that are only loaded when used
*/
.scheme-swirl {
background-image: url(swirl.svg);
opacity: 0.12;
}
.scheme-squiggle {
background: url("data:image/svg+xml,%3Csvg width='150' height='75' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.scheme-dots {
background-image: radial-gradient(rgba(0, 0, 0, 0.15) 0.5px, transparent 2px);
background-size: 16px 16px;
}
.scheme-notebook {
background-image: url(notebook.svg);
opacity: 0.5;
}
.scheme-wave {
background-image: url(wave.svg);
background-size: cover;
opacity: 0.5;
}
.scheme-minimal-wave {
background-image: url(minimal-wave.svg);
opacity: 0.5;
background-size: cover;
}
.scheme-plants {
background-image: url(plants.svg);
background-size: cover;
}
.scheme-cold-blur {
background-image: url(cold-blur.svg);
background-size: cover;
}
.scheme-warm-blur {
background-image: url(warm-blur.svg);
background-size: cover;
}
.scheme-custom-texture-1 {
background-image: url(custom-texture-1.svg);
background-size: cover;
}
.scheme-custom-texture-2 {
background-image: url(custom-texture-2.svg);
background-size: cover;
}
.scheme-custom-texture-3 {
background-image: url(custom-texture-3.svg);
background-size: cover;
}