/* ========================================
   Base typography
======================================== */

body {
	font-family: var(--font-base);
	font-size: var(--text-size-base);
	font-weight: var(--font-normal);
	line-height: var(--leading);
	color: var(--body-color);
	background-color: var(--body-background-color);
}

/* ========================================
   Headings
======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--heading-font-family);
	font-weight: var(--heading-font-weight);
	line-height: var(--heading-line-height);
	color: var(--heading-color, var(--body-color));
}

h1,
.h1 {
	font-size: var(--heading-xl);
}

h2,
.h2 {
	font-size: var(--heading-l);
}

h3,
.h3 {
	font-size: var(--heading-m);
}

h4,
.h4 {
	font-size: var(--heading-s);
}

/* ========================================
   Body text
======================================== */

p,
ul,
ol,
dl,
blockquote {
	font-size: inherit;
	line-height: inherit;
}

small {
	font-size: var(--text-body-s);
	line-height: var(--leading-short);
}

.meta {
	font-size: var(--text-meta);
	line-height: var(--leading-short);
}

/* ========================================
   Links
======================================== */

a {
	color: var(--body-link-color);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.12em;
	text-decoration-skip-ink: auto;
}

a:hover {
	color: var(--body-link-hover-color);
}

a:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

button:focus-visible,
.bc-account-panel__link:focus-visible,
.sub-menu-link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 0;
}

.single_add_to_cart_button:focus-visible {
	outline-offset: 2px;
}

/* ========================================
   Strong and emphasis
======================================== */

strong,
b {
	font-weight: var(--font-bold);
}

em,
i {
	font-style: italic;
}

/* ========================================
   Optional helper classes
======================================== */

.lede {
	font-size: var(--text-body-l);
	line-height: var(--leading);
}

.ui-text {
	font-size: var(--text-ui);
	line-height: var(--leading-short);
}

.small,
.small-text {
	font-size: var(--text-body-s);
	line-height: var(--leading-short);
}

.caption {
	font-weight: 400;
	display: block;
	margin-bottom: 5px;
	color: var(--secondary-text-colour,#484949);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.caption-xl {
	font-size: var(--caption-xl);
	line-height: 1.18;
}

.caption-l {
	font-size: var(--caption-l);
	line-height: 1.25;
}

.caption-m {
	font-size: var(--caption-m);
	line-height: 1.3;
}