/* Resolved from config/settings_data.json + snippets/theme-styles-variables.liquid. Fonts: body/subheading = Inter, heading = Oswald (loaded via Google Fonts in ). */ :root { /* Page Layout */ --sidebar-width: 25rem; --narrow-content-width: 36rem; --normal-content-width: 42rem; --wide-content-width: 46rem; --narrow-page-width: 90rem; --normal-page-width: 120rem; --wide-page-width: 150rem; --page-width: var(--narrow-page-width); --page-margin: 2rem; /* Section Heights */ --section-height-small: 15rem; --section-height-medium: 25rem; --section-height-large: 35rem; /* Font families */ --font-body--family: "Inter", -apple-system, system-ui, sans-serif; --font-body--style: normal; --font-body--weight: 400; --font-subheading--family: "Inter", -apple-system, system-ui, sans-serif; --font-subheading--style: normal; --font-subheading--weight: 500; --font-heading--family: "Oswald", Impact, sans-serif; --font-heading--style: normal; --font-heading--weight: 700; --font-accent--family: "Inter", -apple-system, system-ui, sans-serif; --font-accent--style: normal; --font-accent--weight: 400; --font-primary--family: var(--font-body--family); --font-primary--weight: var(--font-body--weight); /* Heading spacing */ --font-heading--spacing: 0.25em; --font-h1--spacing: var(--font-heading--spacing); --font-h2--spacing: var(--font-heading--spacing); --font-h3--spacing: var(--font-heading--spacing); --font-h4--spacing: var(--font-heading--spacing); --font-h5--spacing: var(--font-heading--spacing); --font-h6--spacing: var(--font-heading--spacing); --font-paragraph--spacing: 0.5em; /* Z-Index */ --layer-section-background: -2; --layer-lowest: -1; --layer-base: 0; --layer-flat: 1; --layer-raised: 2; --layer-heightened: 4; --layer-sticky: 8; --layer-window-overlay: 10; --layer-header-menu: 12; --layer-overlay: 16; --layer-menu-drawer: 18; --layer-temporary: 20; /* Measure */ --max-width--body-normal: 32.5em; --max-width--body-narrow: 22.75em; --max-width--heading-normal: 32.5em; --max-width--heading-narrow: 19.5em; --max-width--display-normal: 13em; --max-width--display-narrow: 9.75em; --max-width--display-tight: 3.25em; /* Letter spacing */ --letter-spacing-sm: 0.06em; --letter-spacing-md: 0.13em; --letter-spacing--display-tight: -0.03em; --letter-spacing--display-normal: 0em; --letter-spacing--display-loose: 0.03em; --letter-spacing--heading-tight: -0.03em; --letter-spacing--heading-normal: 0em; --letter-spacing--heading-loose: 0.03em; --letter-spacing--body-tight: -0.03em; --letter-spacing--body-normal: 0em; --letter-spacing--body-loose: 0.03em; /* Line height */ --line-height: 1; --line-height--display-tight: 1; --line-height--display-normal: 1.1; --line-height--display-loose: 1.2; --line-height--heading-tight: 1.15; --line-height--heading-normal: 1.25; --line-height--heading-loose: 1.35; --line-height--body-tight: 1.2; --line-height--body-normal: 1.4; --line-height--body-loose: 1.6; /* Typography presets (resolved) */ --font-paragraph--size: 1rem; --font-paragraph--family: var(--font-body--family); --font-paragraph--style: var(--font-body--style); --font-paragraph--weight: 400; --font-paragraph--line-height: var(--line-height--body-normal); --font-paragraph--letter-spacing: var(--letter-spacing--body-normal); --font-paragraph--case: none; --font-h1--size: clamp(2.5rem, 5vw, 3.5rem); --font-h1--family: var(--font-heading--family); --font-h1--style: var(--font-heading--style); --font-h1--weight: var(--font-heading--weight); --font-h1--line-height: var(--line-height--display-tight); --font-h1--letter-spacing: var(--letter-spacing--heading-tight); --font-h1--case: none; --font-h2--size: clamp(2rem, 4vw, 2.5rem); --font-h2--family: var(--font-body--family); --font-h2--style: var(--font-body--style); --font-h2--weight: var(--font-body--weight); --font-h2--line-height: var(--line-height--heading-normal); --font-h2--letter-spacing: var(--letter-spacing--heading-normal); --font-h2--case: none; --font-h3--size: clamp(1.5rem, 3vw, 2rem); --font-h3--family: var(--font-body--family); --font-h3--style: var(--font-body--style); --font-h3--weight: var(--font-body--weight); --font-h3--line-height: var(--line-height--heading-tight); --font-h3--letter-spacing: var(--letter-spacing--heading-tight); --font-h3--case: none; --font-h4--size: 1.5rem; --font-h4--family: var(--font-subheading--family); --font-h4--style: var(--font-subheading--style); --font-h4--weight: var(--font-subheading--weight); --font-h4--line-height: var(--line-height--heading-normal); --font-h4--letter-spacing: var(--letter-spacing--heading-normal); --font-h4--case: none; --font-h5--size: 1.125rem; --font-h5--family: var(--font-body--family); --font-h5--style: var(--font-body--style); --font-h5--weight: var(--font-body--weight); --font-h5--line-height: var(--line-height--heading-normal); --font-h5--letter-spacing: var(--letter-spacing--heading-normal); --font-h5--case: none; --font-h6--size: 1rem; --font-h6--family: var(--font-body--family); --font-h6--style: var(--font-body--style); --font-h6--weight: var(--font-body--weight); --font-h6--line-height: var(--line-height--heading-normal); --font-h6--letter-spacing: var(--letter-spacing--heading-normal); --font-h6--case: none; /* Font size scale */ --font-size--3xs: 0.625rem; --font-size--2xs: 0.75rem; --font-size--xs: 0.8125rem; --font-size--sm: 0.875rem; --font-size--md: 1rem; --font-size--lg: 1.125rem; --font-size--xl: 1.25rem; --font-size--2xl: 1.5rem; --font-size--3xl: 2rem; --font-size--4xl: 2.5rem; --font-size--5xl: 3rem; --font-size--6xl: 3.5rem; --font-size--paragraph: 1rem; --font-size--h1: clamp(2.5rem, 5vw, 3.5rem); --font-size--h2: clamp(2rem, 4vw, 2.5rem); --font-size--h3: clamp(1.5rem, 3vw, 2rem); --font-size--h4: 1.5rem; --font-size--h5: 1.125rem; --font-size--h6: 1rem; /* Menu font sizes */ --menu-font-sm--size: 0.875rem; --menu-font-sm--line-height: 1.5; --menu-font-md--size: 1rem; --menu-font-md--line-height: 1.6; --menu-font-lg--size: 1.125rem; --menu-font-lg--line-height: 1.6; --menu-font-xl--size: 1.25rem; --menu-font-xl--line-height: 1.5; --menu-font-2xl--size: 1.75rem; --menu-font-2xl--line-height: 1.4; /* Colors */ --color-error: #8B0000; --color-success: #006400; --color-white: #FFFFFF; --color-white-rgb: 255 255 255; --color-black: #000000; --color-instock: #3ED660; --color-lowstock: #EE9441; --color-outofstock: #C8C8C8; /* Opacity */ --opacity-5: 0.05; --opacity-8: 0.08; --opacity-10: 0.1; --opacity-15: 0.15; --opacity-20: 0.2; --opacity-25: 0.25; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-70: 0.7; --opacity-80: 0.8; --opacity-85: 0.85; --opacity-90: 0.9; --opacity-subdued-text: var(--opacity-70); --shadow-button: 0 2px 3px rgb(0 0 0 / 20%); --gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent); /* Spacing */ --margin-3xs: 0.125rem; --margin-2xs: 0.3rem; --margin-xs: 0.5rem; --margin-sm: 0.7rem; --margin-md: 0.8rem; --margin-lg: 1rem; --margin-xl: 1.25rem; --margin-2xl: 1.5rem; --margin-3xl: 1.75rem; --margin-4xl: 2rem; --margin-5xl: 3rem; --margin-6xl: 5rem; --scroll-margin: 50px; --padding-3xs: 0.125rem; --padding-2xs: 0.25rem; --padding-xs: 0.5rem; --padding-sm: 0.7rem; --padding-md: 0.8rem; --padding-lg: 1rem; --padding-xl: 1.25rem; --padding-2xl: 1.5rem; --padding-3xl: 1.75rem; --padding-4xl: 2rem; --padding-5xl: 3rem; --padding-6xl: 4rem; --gap-3xs: 0.125rem; --gap-2xs: 0.3rem; --gap-xs: 0.5rem; --gap-sm: 0.7rem; --gap-md: 0.9rem; --gap-lg: 1rem; --gap-xl: 1.25rem; --gap-2xl: 2rem; --gap-3xl: 3rem; --spacing-scale-sm: 0.6; --spacing-scale-md: 0.7; --spacing-scale-default: 1.0; --spacing-scale: 1.0; --checkout-button-gap: 10px; /* Borders (resolved from settings) */ --style-border-width: 1px; --style-border-radius-xs: 0.2rem; --style-border-radius-sm: 0.6rem; --style-border-radius-md: 0.8rem; --style-border-radius-50: 50%; --style-border-radius-lg: 1rem; --style-border-radius-pills: 100px; --style-border-radius-inputs: 8px; --style-border-radius-buttons-primary: 37px; --style-border-radius-buttons-secondary: 37px; --style-border-width-primary: 0px; --style-border-width-secondary: 1px; --style-border-width-inputs: 1px; --style-border-radius-popover: 4px; --style-border-popover: 1px none rgb(var(--color-border-rgb) / 100%); --style-border-drawer: 1px solid rgb(var(--color-border-rgb) / 100%); --style-border-swatch-opacity: 100%; --style-border-swatch-width: 1px; --style-border-swatch-style: solid; /* Animation */ --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --animation-speed-fast: 0.0625s; --animation-speed: 0.125s; --animation-speed-slow: 0.2s; --animation-speed-medium: 0.15s; --animation-easing: ease-in-out; --animation-slideshow-easing: cubic-bezier(0.4, 0, 0.2, 1); --drawer-animation-speed: 0.2s; --animation-values-slow: var(--animation-speed-slow) var(--animation-easing); --animation-values: var(--animation-speed) var(--animation-easing); --animation-values-fast: var(--animation-speed-fast) var(--animation-easing); --animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94); --animation-timing-active: cubic-bezier(0.5, 0, 0.75, 0); --animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --animation-timing-default: cubic-bezier(0, 0, 0.2, 1); /* Focus */ --focus-outline-width: 0.09375rem; --focus-outline-offset: 0.2em; /* Badges */ --badge-blob-padding-block: 4px; --badge-blob-padding-inline: 16px 12px; --badge-rectangle-padding-block: 4px; --badge-rectangle-padding-inline: 10px; /* Icons */ --icon-size-2xs: 0.6rem; --icon-size-xs: 0.85rem; --icon-size-sm: 1.25rem; --icon-size-md: 1.375rem; --icon-size-lg: 1.5rem; --icon-stroke-width: 1px; /* Input */ --input-email-min-width: 200px; --input-search-max-width: 650px; --input-padding-y: 0.8rem; --input-padding-x: 0.8rem; --input-padding: var(--input-padding-y) var(--input-padding-x); --input-box-shadow-width: var(--style-border-width-inputs); --input-box-shadow: 0 0 0 var(--input-box-shadow-width) var(--color-input-border); --input-box-shadow-focus: 0 0 0 calc(var(--input-box-shadow-width) + 0.5px) var(--color-input-border); --input-textarea-min-height: 55px; /* Checkbox */ --checkbox-size: 16px; --checkbox-border-radius: 5px; --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55)); --checkbox-label-padding: 6px; /* Buttons */ --button-size-sm: 30px; --button-size-md: 36px; --button-size: var(--minimum-touch-target); --button-padding-inline: 24px; --button-padding-block: 16px; --button-font-family-primary: var(--font-body--family); --button-font-family-secondary: var(--font-body--family); --button-text-case: none; --button-text-case-primary: none; --button-text-case-secondary: none; /* Borders */ --border-color: rgb(var(--color-border-rgb) / var(--opacity-50)); --border-width-sm: 1px; --border-width-md: 2px; --border-width-lg: 5px; --border-radius-sm: 0.25rem; /* Drawers */ --drawer-inline-padding: 25px; --drawer-menu-inline-padding: 2.5rem; --drawer-header-block-padding: 20px; --drawer-content-block-padding: 10px; --drawer-header-desktop-top: 0rem; --drawer-padding: calc(var(--padding-sm) + 7px); --drawer-height: 100dvh; --drawer-width: 95vw; --drawer-max-width: 500px; /* Variant Picker */ --variant-picker-swatch-width-unitless: 24; --variant-picker-swatch-height-unitless: 24; --variant-picker-swatch-width: 24px; --variant-picker-swatch-height: 24px; --variant-picker-swatch-radius: 24px; --variant-picker-border-width: 1px; --variant-picker-border-style: solid; --variant-picker-border-opacity: 100%; --variant-picker-button-radius: 0px; --variant-picker-button-border-width: 1px; /* Slideshow */ --slideshow-controls-size: 3.5rem; --slideshow-controls-icon: 2rem; --peek-next-slide-size: 3rem; /* Utilities */ --backdrop-opacity: 0.15; --backdrop-color-rgb: var(--color-shadow-rgb); --minimum-touch-target: 44px; --disabled-opacity: 0.5; --skeleton-opacity: 0.025; /* Buy buttons */ --height-buy-buttons: calc(var(--padding-lg) * 2 + var(--icon-size-sm)); /* Card image sizes */ --card-width-small: 10rem; --height-small: 17.5rem; --height-medium: 21.25rem; --height-large: 25rem; --height-full: 100vh; /* Modal */ --modal-max-height: 65dvh; --quick-add-modal-height: min(38.5rem, 96vh); --quick-add-modal-width: min(54rem, 96vw); --quick-add-modal-gallery-width: 24rem; /* Card styles for search */ --card-bg-hover: rgb(var(--color-foreground-rgb) / var(--opacity-5)); --card-border-hover: rgb(var(--color-foreground-rgb) / var(--opacity-30)); --card-border-focus: rgb(var(--color-foreground-rgb) / var(--opacity-10)); /* Cart */ --cart-primary-font-family: var(--font-body--family); --cart-primary-font-style: var(--font-body--style); --cart-primary-font-weight: var(--font-body--weight); --cart-secondary-font-family: var(--font-subheading--family); --cart-secondary-font-style: var(--font-subheading--style); --cart-secondary-font-weight: var(--font-subheading--weight); } @media screen and (min-width: 40em) { :root { --section-height-small: 40svh; --section-height-medium: 55svh; --section-height-large: 70svh; } } @media screen and (min-width: 60em) { :root { --section-height-small: 50svh; --section-height-medium: 65svh; --section-height-large: 80svh; } }