/*============================================================================   #Typography ==============================================================================*/       @font-face {   font-family: Fredoka;   font-weight: 400;   font-style: normal;   font-display: swap;   src: url("//classemoderne.ca/cdn/fonts/fredoka/fredoka_n4.eb35fd8d4bb8056d7499b912e19fc60e645e4373.woff2") format("woff2"),        url("//classemoderne.ca/cdn/fonts/fredoka/fredoka_n4.bc34ad1871d4011d11d39d0d6c4f34a458b5ead4.woff") format("woff"); }  @font-face {   font-family: Fredoka;   font-weight: 400;   font-style: normal;   font-display: swap;   src: url("//classemoderne.ca/cdn/fonts/fredoka/fredoka_n4.eb35fd8d4bb8056d7499b912e19fc60e645e4373.woff2") format("woff2"),        url("//classemoderne.ca/cdn/fonts/fredoka/fredoka_n4.bc34ad1871d4011d11d39d0d6c4f34a458b5ead4.woff") format("woff"); }     @font-face {   font-family: Fredoka;   font-weight: 700;   font-style: normal;   font-display: swap;   src: url("//classemoderne.ca/cdn/fonts/fredoka/fredoka_n7.842b106c433b574443776fb1365d851cc19a6eb6.woff2") format("woff2"),        url("//classemoderne.ca/cdn/fonts/fredoka/fredoka_n7.8fc71823b315e9debc947e4127957b41db40a150.woff") format("woff"); }       @font-face {   font-family: Fredoka;   font-weight: 700;   font-style: normal;   font-display: swap;   src: url("//classemoderne.ca/cdn/fonts/fredoka/fredoka_n7.842b106c433b574443776fb1365d851cc19a6eb6.woff2") format("woff2"),        url("//classemoderne.ca/cdn/fonts/fredoka/fredoka_n7.8fc71823b315e9debc947e4127957b41db40a150.woff") format("woff"); }              /*============================================================================   #General Variables ==============================================================================*/  :root {    --font-weight-normal: 400;   --font-weight-bold: 700;   --font-weight-header-bold: 700;    --header-font-stack: Fredoka, sans-serif;   --header-font-weight: 400;   --header-font-style: normal;    --header-font-case: normal;   --header-font-size: 16;   --header-font-size-px: 16px;    --heading-spacing: -0.01em;   --heading-line-height: 1.2;   --heading-font-case: normal;   --heading-font-stack: FontDrop;    --body-font-stack: Fredoka, sans-serif;   --body-font-weight: 400;   --body-font-style: normal;    --button-font-stack: Fredoka, sans-serif;   --button-font-weight: 400;   --button-font-style: normal;    --label-font-stack: Fredoka, sans-serif;   --label-font-weight: 400;   --label-font-style: normal;   --label-font-case: uppercase;   --label-spacing: 0px;    --navigation-font-stack: Fredoka, sans-serif;   --navigation-font-weight: 400;   --navigation-font-style: normal;   --navigation-font-letter-spacing: 0px;    --base-font-size-int: 16;   --base-font-size: 16px;    --body-font-size-12-to-em: 0.75em;   --body-font-size-16-to-em: 1.0em;   --body-font-size-22-to-em: 1.38em;   --body-font-size-28-to-em: 1.75em;   --body-font-size-36-to-em: 2.25em;    /* Heading Sizes */       --h1-size: 35px;   --h2-size: 28px;   --h3-size: 25px;   --h4-size: 21px;   --h5-size: 18px;   --h6-size: 16px;    --h1-size-mobile: 38px;   --h2-size-mobile: 30px;   --h3-size-mobile: 26px;   --h4-size-mobile: 23px;   --h5-size-mobile: 19px;   --h6-size-mobile: 16px;    --sale-badge-color: rgba(126 145 115 / 1.0);   --sold-out-badge-color: rgba(36 36 36 / 1.0);   --custom-badge-color: rgba(36 36 36 / 1.0);   --preorder-badge-color: rgba(73 73 73 / 1.0);   --countdown-badge-color: rgba(108 117 108 / 1.0);   --badge-font-color: rgba(255 255 255 / 1.0);    --primary-btn-text-color: rgba(248 248 248 / 1.0);   --primary-btn-text-color-opacity50: color-mix(in srgb, var(--primary-btn-text-color), transparent 50%);   --primary-btn-bg-color: rgba(126 145 115 / 1.0);   --primary-btn-bg-color-opacity50: color-mix(in srgb, var(--primary-btn-bg-color), transparent 50%);    --button-text-case: uppercase;   --button-font-size: 14;   --button-font-size-px: 14px;   --button-text-spacing-px: 1px;         --text-line-clamp: none;            --alt-btn-border-radius: 1.875rem;         --text-color: rgba(126 145 115 / 1.0);   --text-color-transparent05: color-mix(in srgb, var(--text-color), transparent 95%);   --text-color-transparent10: color-mix(in srgb, var(--text-color), transparent 90%);   --text-color-transparent15: color-mix(in srgb, var(--text-color), transparent 85%);   --text-color-transparent25: color-mix(in srgb, var(--text-color), transparent 75%);   --text-color-transparent30: color-mix(in srgb, var(--text-color), transparent 70%);   --text-color-transparent40: color-mix(in srgb, var(--text-color), transparent 60%);   --text-color-transparent50: color-mix(in srgb, var(--text-color), transparent 50%);   --text-color-transparent5: color-mix(in srgb, var(--text-color), transparent 50%);   --text-color-transparent6: color-mix(in srgb, var(--text-color), transparent 40%);   --text-color-transparent7: color-mix(in srgb, var(--text-color), transparent 30%);   --text-color-transparent8: color-mix(in srgb, var(--text-color), transparent 20%);         --small-body-font-size: 14px;       --link-color: rgba(126 145 115 / 1.0);   --on-sale-color: rgba(202 24 24 / 1.0);    --body-color: rgba(248 248 248 / 1.0);   --body-color-darken10: #dfdfdf;   --body-color-transparent00: color-mix(in srgb, var(--body-color), transparent 100%);   --body-color-transparent40: color-mix(in srgb, var(--body-color), transparent 60%);   --body-color-transparent50: color-mix(in srgb, var(--body-color), transparent 50%);   --body-color-transparent90: color-mix(in srgb, var(--body-color), transparent 10%);    --body-overlay-color: color-mix(in srgb, var(--body-color-darken10), transparent 30%);    --body-secondary-color: rgba(126 145 115 / 1.0);   --body-secondary-color-transparent00: color-mix(in srgb, var(--body-secondary-color), transparent 100%);   --body-secondary-color-darken05: color-mix(in srgb, var(--body-secondary-color), transparent 95%);    --color-primary-background: #f8f8f8;   --color-primary-background-rgb: 248, 248, 248;   --color-secondary-background: rgba(126 145 115 / 1.0);    --border-color: rgba(126, 145, 115, 0.25);   --link-border-color: color-mix(in srgb, var(--link-color), transparent 50%);   --border-color-darken10: #65755c;   --view-in-space-button-background: #f2f4f1;    --header-color: rgba(126 145 115 / 1.0);   --header-color-darken5-filter: #718367;   --header-color-darken5: color-mix(in srgb, var(--header-color-darken5-filter), transparent 0%);    --header-border-color: rgba(126 145 115 / 1.0);    --announcement-text-size: 14px;   --announcement-text-spacing: 0px;    --logo-font-size: 18px;    --overlay-header-text-color: rgba(255 255 255 / 1.0);   --nav-text-color: rgba(255 255 255 / 1.0);   --nav-text-color-transparent5: color-mix(in srgb, var(--nav-text-color), transparent 95%);   --nav-text-color-transparent10: color-mix(in srgb, var(--nav-text-color), transparent 90%);   --nav-text-color-transparent30: color-mix(in srgb, var(--nav-text-color), transparent 70%);   --nav-text-color-transparent50: color-mix(in srgb, var(--nav-text-color), transparent 50%);    --nav-text-hover: rgba(89 89 89 / 1.0);    --color-scheme-light-background: rgba(248 248 248 / 1.0);   --color-scheme-light-background-transparent40: color-mix(in srgb, var(--color-scheme-light-background), transparent 60%);   --color-scheme-light-background-transparent50: color-mix(in srgb, var(--color-scheme-light-background), transparent 50%);   --color-scheme-light-background-rgb: 248, 248, 248;    --color-scheme-light-text: rgba(36 36 36 / 1.0);   --color-scheme-light-text-transparent10: color-mix(in srgb, var(--color-scheme-light-text), transparent 90%);   --color-scheme-light-text-transparent25: color-mix(in srgb, var(--color-scheme-light-text), transparent 75%);   --color-scheme-light-text-transparent40: color-mix(in srgb, var(--color-scheme-light-text), transparent 60%);   --color-scheme-light-text-transparent50: color-mix(in srgb, var(--color-scheme-light-text), transparent 50%);   --color-scheme-light-text-transparent60: color-mix(in srgb, var(--color-scheme-light-text), transparent 40%);   --color-scheme-light-text-transparent80: color-mix(in srgb, var(--color-scheme-light-text), transparent 20%);    --color-scheme-feature-background: rgba(126 145 115 / 1.0);   --color-scheme-feature-background-transparent40: color-mix(in srgb, var(--color-scheme-feature-background), transparent 60%);   --color-scheme-feature-background-transparent50: color-mix(in srgb, var(--color-scheme-feature-background), transparent 50%);   --color-scheme-feature-background-rgb: 126, 145, 115;    --color-scheme-feature-text: rgba(248 248 248 / 1.0);   --color-scheme-feature-text-transparent10: color-mix(in srgb, var(--color-scheme-feature-text), transparent 90%);   --color-scheme-feature-text-transparent25: color-mix(in srgb, var(--color-scheme-feature-text), transparent 75%);   --color-scheme-feature-text-transparent40: color-mix(in srgb, var(--color-scheme-feature-text), transparent 60%);   --color-scheme-feature-text-transparent50: color-mix(in srgb, var(--color-scheme-feature-text), transparent 50%);   --color-scheme-feature-text-transparent60: color-mix(in srgb, var(--color-scheme-feature-text), transparent 40%);   --color-scheme-feature-text-transparent80: color-mix(in srgb, var(--color-scheme-feature-text), transparent 20%);    --homepage-sections-accent-secondary-color-transparent60: color-mix(in srgb, var(--color-scheme-feature-text), transparent 40%);    --color-scheme-dark-background: rgba(248 248 248 / 1.0);   --color-scheme-dark-background-transparent40: color-mix(in srgb, var(--color-scheme-dark-background), transparent 60%);   --color-scheme-dark-background-transparent50: color-mix(in srgb, var(--color-scheme-dark-background), transparent 50%);   --color-scheme-dark-background-rgb: 248, 248, 248;    --color-scheme-dark-text: rgba(126 145 115 / 1.0);   --color-scheme-dark-text-transparent10: color-mix(in srgb, var(--color-scheme-dark-text), transparent 90%);   --color-scheme-dark-text-transparent25: color-mix(in srgb, var(--color-scheme-dark-text), transparent 75%);   --color-scheme-dark-text-transparent40: color-mix(in srgb, var(--color-scheme-dark-text), transparent 60%);   --color-scheme-dark-text-transparent50: color-mix(in srgb, var(--color-scheme-dark-text), transparent 50%);   --color-scheme-dark-text-transparent60: color-mix(in srgb, var(--color-scheme-dark-text), transparent 40%);   --color-scheme-dark-text-transparent80: color-mix(in srgb, var(--color-scheme-dark-text), transparent 20%);    --filter-bg-color: rgba(126, 145, 115, 0.1);    --menu-drawer-color: rgba(255 255 255 / 1.0);   --menu-drawer-text-color: rgba(36 36 36 / 1.0);   --menu-drawer-text-color-transparent10: color-mix(in srgb, var(--menu-drawer-text-color), transparent 90%);   --menu-drawer-text-color-transparent30: color-mix(in srgb, var(--menu-drawer-text-color), transparent 70%);   --menu-drawer-border-color: color-mix(in srgb, var(--menu-drawer-text-color), transparent 75%);   --menu-drawer-text-hover-color: rgba(159 159 159 / 1.0);    --cart-drawer-color: rgba(255 255 255 / 1.0);   --cart-drawer-color-transparent50: color-mix(in srgb, var(--cart-drawer-color), transparent 50%);   --cart-drawer-text-color: rgba(126 145 115 / 1.0);   --cart-drawer-text-color-transparent10: color-mix(in srgb, var(--cart-drawer-text-color), transparent 90%);   --cart-drawer-text-color-transparent25: color-mix(in srgb, var(--cart-drawer-text-color), transparent 75%);   --cart-drawer-text-color-transparent40: color-mix(in srgb, var(--cart-drawer-text-color), transparent 60%);   --cart-drawer-text-color-transparent50: color-mix(in srgb, var(--cart-drawer-text-color), transparent 50%);   --cart-drawer-text-color-transparent70: color-mix(in srgb, var(--cart-drawer-text-color), transparent 30%);   --cart-drawer-border-color: color-mix(in srgb, var(--cart-drawer-text-color), transparent 75%);    --success-color: #28a745;   --error-color: #DC3545;   --warning-color: #EB9247;    /* Shop Pay Installments variables */   --color-body: rgba(126 145 115 / 1.0);   --color-bg: rgba(126 145 115 / 1.0);    /* Checkbox */   --checkbox-size: 16px;   --inline-icon-size: 16px;   --line-height-base: 1.6;    /* Grid spacing */   --grid-spacing: 10px;        --grid-spacing-tight: 10px;     --grid-spacing-loose: 10px;       /* Border radius */   --block-border-radius: 0;   --input-border-radius: 0;   --thumbnail-border-radius: 0;   --badge-border-radius: 0;        --block-border-radius: 1.4rem;     --input-border-radius: 1.5rem;     --thumbnail-border-radius: 0.7rem;     --badge-border-radius: 1rem;     --swatch-border-radius: 0.4rem;       --swatch-border-radius: 0;        --swatch-border-radius: 50%;       --card-swatch-size: 20px; }