/*
Theme Name: Flatsome Child
Description: Child theme for Flatsome. Styling only.
Template: flatsome
Version: 1.0.0
*/

/* ==========================================================================
   Contents
   1. Settings
   2. Base
   3. Headings and text
   4. Buttons
   5. Forms
   6. Accordion
   7. Header
   8. Footer
   9. Page titles
   10. Shop
   11. Layout classes
   12. Focus
   13. Motion
   ========================================================================== */

/* 1. Settings
   Change colours and navigation size here. */
:root {
	color-scheme: only light;

	--ink: #111;
	--paper: #faf6ec;
	--cream: #f4efe3;
	--line: #e4dcc6;
	--chalk: #333;
	--yellow: #fdd023;
	--green: #4fa95d;
	--green-deep: #2e7d46;
	--red: #e94b2a;
	--brick: #b5432b;

	--font-head: "Londrina Solid", impact, sans-serif;
	--font-body: "Jost", system-ui, sans-serif;
	--nav-size: clamp(1.1rem, 0.35rem + 1.15vw, 1.35rem);
	--nav-side-size: clamp(0.8rem, 0.4rem + 0.4vw, 0.95rem);

	--mask-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9Q28 3 55 9T110 8T165 9T220 7T297 8' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
	--mask-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='22' viewBox='0 0 260 22'%3E%3Cpath d='M0 22V12Q22 5 48 11T104 10T158 13T208 8T260 12V22Z'/%3E%3C/svg%3E");
	--mask-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpolygon points='0,3.8 5,4.3 10,5.9 15,3.8 20,4.0 25,4.4 30,2.6 35,4.1 40,4.6 45,5.3 50,2.2 55,3.1 60,2.2 65,5.4 70,4.9 75,2.0 80,6.1 85,6.0 90,4.7 95,4.5 100,2.5 100,23.9 95,26.1 90,24.1 85,24.6 80,24.9 75,23.9 70,25.8 65,25.7 60,27.5 55,26.1 50,26.6 45,26.0 40,26.7 35,25.8 30,25.0 25,28.2 20,28.2 15,27.5 10,26.9 5,25.2 0,24.8'/%3E%3C/svg%3E");
}

/* Fonts. Files are in the fonts folder. */
@font-face {
	font-display: swap;
	font-family: "Londrina Solid";
	font-style: normal;
	font-weight: 400;
	src: url("fonts/londrina-solid-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Londrina Solid";
	font-style: normal;
	font-weight: 900;
	src: url("fonts/londrina-solid-latin-900-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	src: url("fonts/jost-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Jost";
	font-style: italic;
	font-weight: 400;
	src: url("fonts/jost-latin-400-italic.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Jost";
	font-style: normal;
	font-weight: 600;
	src: url("fonts/jost-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Jost";
	font-style: italic;
	font-weight: 600;
	src: url("fonts/jost-latin-600-italic.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Jost";
	font-style: normal;
	font-weight: 700;
	src: url("fonts/jost-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Jost";
	font-style: italic;
	font-weight: 700;
	src: url("fonts/jost-latin-700-italic.woff2") format("woff2");
}

/* 2. Base */
html {
	background: var(--paper);
}

html body {
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.125rem;
}

#wrapper,
#main {
	background-color: transparent;
}

::selection {
	background: var(--yellow);
	color: var(--ink);
}

/* 3. Headings and text */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ink);
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: uppercase;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .banner h1,
html body .banner h2,
html body .heading-font {
	font-family: var(--font-head);
	font-weight: 900;
}

html body .nav > li > a,
html body .mobile-sidebar-levels-2 .nav > li > ul > li > a {
	font-family: var(--font-head);
	font-weight: 400;
}

html body .alt-font {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 700;
}

h1 {
	font-size: clamp(2.6em, 1.2em + 5vw, 5.2em);
}

h2 {
	font-size: clamp(2.1em, 0.9em + 3.4vw, 3.4em);
}

h3 {
	font-size: clamp(1.7em, 1.2em + 1.4vw, 2.2em);
}

h4 {
	font-size: 1.5em;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4 {
	color: #fff;
}

.is-divider {
	background-color: var(--ink);
	height: 4px;
	opacity: 1;
}

.widget-title {
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 1.4em;
	text-transform: uppercase;
}

/* 4. Buttons */
.button,
.button.alt,
.button.checkout,
.checkout-button,
input[type="submit"],
.wpcf7-submit {
	background-color: var(--ink);
	border: 2px solid var(--ink);
	box-shadow: none;
	color: var(--yellow);
	font-family: var(--font-head);
	font-size: 1.2em;
	font-weight: 400;
	letter-spacing: 0.05em;
	min-height: 2.6em;
	text-shadow: none;
	text-transform: uppercase;
}

.button:not(.circle) {
	border-radius: 0;
}

/* Customise > Header > Button sets a rounded radius inline. */
.header-button .button {
	border-radius: 0 !important;
}

.button.is-xsmall {
	font-size: 0.9em;
}

.button.is-smaller {
	font-size: 1em;
}

.button.is-small {
	font-size: 1.05em;
}

.button.is-large {
	font-size: 1.35em;
}

.button.is-larger {
	font-size: 1.5em;
}

.button.is-xlarge {
	font-size: 1.7em;
}

.button.is-xxlarge {
	font-size: 2.2em;
}

.button:hover,
.button.alt:hover,
.button.checkout:hover,
.checkout-button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
	background-color: var(--yellow);
	border-color: var(--ink);
	box-shadow: none;
	color: var(--ink);
}

.button.secondary {
	background-color: var(--yellow);
	border-color: var(--ink);
	color: var(--ink);
}

.button.secondary:hover {
	background-color: var(--ink);
	color: var(--yellow);
}

.button.alert {
	background-color: var(--brick);
	border-color: var(--brick);
	color: #fff;
}

.button.success {
	background-color: var(--green-deep);
	border-color: var(--green-deep);
	color: #fff;
}

.button.alert:hover,
.button.success:hover {
	background-color: var(--ink);
	border-color: var(--ink);
	color: var(--yellow);
}

.button.is-outline {
	background-color: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

.button.is-outline:hover {
	background-color: var(--ink);
	color: var(--yellow);
}

.dark .button:not(.is-outline),
.is-chalk .button:not(.is-outline),
.footer-wrapper .button:not(.is-outline) {
	background-color: var(--yellow);
	border-color: var(--ink);
	color: var(--ink);
}

.dark .button:not(.is-outline):hover,
.is-chalk .button:not(.is-outline):hover,
.footer-wrapper .button:not(.is-outline):hover {
	background-color: #fff;
}

.dark .button.is-outline,
.is-chalk .button.is-outline,
.footer-wrapper .button.is-outline {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

.dark .button.is-outline:hover,
.is-chalk .button.is-outline:hover,
.footer-wrapper .button.is-outline:hover {
	background-color: #fff;
	color: var(--ink);
}

/* 5. Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
	background-color: #fff;
	border: 2px solid var(--ink);
	border-radius: 0;
	box-shadow: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	height: auto;
	max-width: 100%;
	min-height: 48px;
	padding: 0.55em 0.8em;
}

textarea {
	min-height: 150px;
}

select {
	padding-right: 2.2em;
}

::placeholder {
	color: #595959;
	opacity: 1;
}

label {
	color: var(--ink);
	font-weight: 600;
}

.dark label,
.is-chalk label,
.footer-wrapper label {
	color: #fff;
}

/* Contact Form 7 */
.wpcf7-not-valid {
	border-color: var(--brick);
	border-width: 3px;
	color: var(--ink);
}

.wpcf7 .wpcf7-not-valid-tip,
body div.wpforms-container-full .wpforms-form label.wpforms-error,
body div.wpforms-container-full .wpforms-form em.wpforms-error {
	background: none;
	border-radius: 0;
	color: var(--brick);
	font-size: 0.95em;
	font-weight: 600;
	margin-top: 6px;
	opacity: 1;
	padding: 0;
}

.wpcf7 .wpcf7-not-valid-tip::after {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: 0;
	margin: 1em 0 0;
	padding: 0.8em 1em;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--brick);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--green);
}

.wpcf7 .wpcf7-not-valid-tip::before,
body div.wpforms-container-full .wpforms-form label.wpforms-error::before,
body div.wpforms-container-full .wpforms-form em.wpforms-error::before {
	background: var(--red);
	content: "";
	display: inline-block;
	height: 0.5em;
	margin-right: 0.6em;
	transform: rotate(45deg);
	vertical-align: 0.08em;
	width: 0.5em;
}

/* WPForms */
body div.wpforms-container-full .wpforms-form input[type="text"],
body div.wpforms-container-full .wpforms-form input[type="email"],
body div.wpforms-container-full .wpforms-form input[type="tel"],
body div.wpforms-container-full .wpforms-form input[type="url"],
body div.wpforms-container-full .wpforms-form input[type="number"],
body div.wpforms-container-full .wpforms-form input[type="password"],
body div.wpforms-container-full .wpforms-form select,
body div.wpforms-container-full .wpforms-form textarea {
	background-color: #fff;
	border: 2px solid var(--ink);
	border-radius: 0;
	box-shadow: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	height: auto;
	max-width: 100%;
	min-height: 48px;
	padding: 0.55em 0.8em;
}

body div.wpforms-container-full .wpforms-form textarea {
	min-height: 150px;
}

body div.wpforms-container-full .wpforms-form select {
	padding-right: 2.2em;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-label {
	color: var(--ink);
	font-weight: 600;
}

body div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--brick);
}

body div.wpforms-container-full .wpforms-form input.wpforms-error,
body div.wpforms-container-full .wpforms-form select.wpforms-error,
body div.wpforms-container-full .wpforms-form textarea.wpforms-error {
	border-color: var(--brick);
	border-width: 3px;
}

body div.wpforms-container-full .wpforms-form .wpforms-submit {
	background-color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: 0;
	color: var(--yellow);
	font-family: var(--font-head);
	font-size: 1.2em;
	font-weight: 400;
	letter-spacing: 0.05em;
	min-height: 2.6em;
	padding: 0 1.3em;
	text-transform: uppercase;
}

body div.wpforms-container-full .wpforms-form .wpforms-submit:hover,
body div.wpforms-container-full .wpforms-form .wpforms-submit:focus {
	background-color: var(--yellow);
	color: var(--ink);
}

body div.wpforms-container-full .wpforms-confirmation-container-full {
	background: #fff;
	border: 2px solid var(--ink);
	color: var(--ink);
}

/* 6. Accordion */
.accordion .accordion-item > a.accordion-title {
	background: #fff;
	border: 2px solid var(--ink);
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin-bottom: -2px;
	padding: 0.55em 2.6em;
	text-decoration: none;
	text-transform: uppercase;
}

.accordion .accordion-item > a.accordion-title:hover {
	background: var(--cream);
	border-color: var(--ink);
	color: var(--ink);
}

.accordion .accordion-item > a.accordion-title.active,
.accordion .accordion-item > a.accordion-title.active:hover {
	background: var(--yellow);
	border-color: var(--ink);
	color: var(--ink);
	font-weight: 400;
}

.dark .accordion .accordion-item > a.accordion-title,
.is-chalk .accordion .accordion-item > a.accordion-title,
.dark .accordion .accordion-item > a.accordion-title:hover,
.is-chalk .accordion .accordion-item > a.accordion-title:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.accordion .toggle {
	color: var(--ink);
	opacity: 1;
	top: 0.15em;
}

.accordion .accordion-inner {
	background: #fff;
	border: 2px solid var(--ink);
	border-top: 0;
	color: var(--ink);
	margin-bottom: -2px;
	padding: 1.2em 2.6em;
}

.accordion .accordion-inner h1,
.accordion .accordion-inner h2,
.accordion .accordion-inner h3,
.accordion .accordion-inner h4,
.accordion .accordion-inner h5,
.accordion .accordion-inner h6 {
	color: var(--ink);
}

.accordion .accordion-inner a:not(.button) {
	color: var(--green-deep);
}

.accordion .accordion-inner a:not(.button):hover {
	color: var(--ink);
}

/* 7. Header
   Set the header height in Customise > Header > Header Main. */
.header-wrapper:not(.transparent),
.header-wrapper:not(.transparent) .header-main {
	background-color: var(--paper);
}

.header-wrapper .header-top {
	background-color: var(--ink);
	color: var(--yellow);
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.header-top .nav > li > a {
	color: var(--yellow);
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 600;
	letter-spacing: inherit;
	text-transform: inherit;
}

.header-main .nav > li:not(.menu-item) > a {
	color: var(--ink);
	font-family: var(--font-body);
	flex-wrap: nowrap;
	font-size: var(--nav-side-size);
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.cart-icon strong {
	border-color: var(--ink);
	color: var(--ink);
}

.cart-icon strong::after {
	border-color: var(--ink);
}

.cart-icon:hover strong,
.current-dropdown .cart-icon strong {
	background-color: var(--ink);
	color: var(--yellow);
}

.header-main .header-nav-main {
	flex-wrap: nowrap;
}

.header-main .nav > li.menu-item > a {
	color: var(--ink);
	font-size: var(--nav-size);
	flex-wrap: nowrap;
	isolation: isolate;
	letter-spacing: 0.03em;
	white-space: nowrap;
	position: relative;
}

.header-main .nav > li.menu-item > a::after {
	background: var(--yellow);
	bottom: 0.05em;
	content: "";
	height: 0.5em;
	left: -0.3em;
	position: absolute;
	right: -0.3em;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s;
	z-index: -1;
}

.header-main .nav > li.menu-item.active > a::after,
.header-main .nav > li.menu-item:hover > a::after,
.header-main .nav > li.menu-item > a:focus-visible::after {
	transform: scaleX(1);
}

.nav-dropdown {
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: 0;
	box-shadow: none;
}

.nav-dropdown > li > a {
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 1.15em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.nav-dropdown > li > a:hover {
	background: var(--yellow);
	color: var(--ink);
}

.mobile-sidebar .nav-sidebar.nav-vertical > li > a {
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 1.5em;
	text-transform: uppercase;
}

/* 8. Footer */
.footer-wrapper {
	background: var(--chalk);
	color: #f2f2f2;
}

.footer-wrapper .footer-widgets {
	background: transparent;
}

.footer-widgets .widget-title,
.footer-widgets h3 {
	color: var(--yellow);
	font-family: var(--font-head);
	font-size: 1.6em;
	text-transform: uppercase;
}

.footer-wrapper .absolute-footer {
	background: rgba(0, 0, 0, 0.35);
	color: #e6e6e6;
}

/* 9. Page titles */
.page-title-bg {
	display: none;
}

.page-title-inner {
	padding-bottom: 1.5rem;
	padding-top: 3rem;
}

.page-title h1 {
	font-size: clamp(2.8em, 1.6em + 4vw, 5em);
}

.breadcrumbs {
	font-family: var(--font-body);
	font-size: 0.8em;
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.breadcrumbs a {
	color: inherit;
}

.woocommerce-result-count {
	color: #3a3a3a;
	font-size: 0.95em;
}

/* 10. Shop */
.product-small.box {
	background: #fff;
	border: 2px solid var(--line);
	transition:
		border-color 0.15s,
		transform 0.15s;
}

.product-small.box:hover {
	border-color: var(--ink);
	transform: translateY(-4px);
}

.product-small .box-image {
	background: var(--cream);
}

.product-small .box-text {
	padding: 14px 12px 22px;
	text-align: center;
}

.product-small .product-title a {
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
}

.product-small .category {
	color: #3a3a3a;
	font-size: 0.85em;
	letter-spacing: 0.12em;
	opacity: 1;
}

.price {
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 600;
}

.price del {
	color: #595959;
	font-weight: 400;
}

.price ins {
	color: var(--brick);
	font-weight: 700;
	text-decoration: none;
}

.star-rating::before {
	color: #c8c0a8;
}

.star-rating span::before {
	color: var(--ink);
}

.badge {
	height: auto;
	min-width: 2.8em;
	width: auto;
}

.badge-inner {
	background: var(--yellow);
	border: 2px solid var(--ink);
	border-radius: 0;
	color: var(--ink);
	font-family: var(--font-head);
	font-weight: 400;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	text-transform: uppercase;
	width: auto;
}

.badge-inner.on-sale {
	background: var(--brick);
	border-color: var(--brick);
	color: #fff;
}

.nav-pagination > li > a,
.nav-pagination > li > span {
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: 0;
	color: var(--ink);
}

.nav-pagination > li > .current,
.nav-pagination > li > a:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--yellow);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #fff;
	border: 2px solid var(--ink);
	border-left-width: 8px;
	color: var(--ink);
	list-style: none;
	margin-bottom: 1em;
	padding: 0.9em 1.2em;
}

.container .message-container {
	padding-left: 1.2em;
	padding-right: 1.2em;
}

.woocommerce-message {
	border-left-color: var(--green);
}

.woocommerce-info {
	border-left-color: var(--yellow);
}

.woocommerce-error {
	border-left-color: var(--brick);
}

.ux-quantity input.ux-quantity__button {
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: 0;
	color: var(--ink);
	text-shadow: none;
}

.ux-quantity input.ux-quantity__button:hover {
	background: var(--yellow);
	color: var(--ink);
}

.shop_table,
.shop_table th,
.shop_table td {
	border-color: var(--line);
}

/* 11. Layout classes
   Type these into the Class box of an element in UX Builder. */

/* Links */
.entry-content a:not(.button),
.text a:not(.button) {
	color: var(--green-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content a:not(.button):hover,
.text a:not(.button):hover {
	color: var(--ink);
}

.dark a:not(.button),
.is-chalk a:not(.button),
.is-ticker a:not(.button),
.footer-wrapper a:not(.button) {
	color: #fff;
}

.dark a:not(.button):hover,
.is-chalk a:not(.button):hover,
.footer-wrapper a:not(.button):hover {
	color: var(--yellow);
}

.dark .product-small.box a:not(.button),
.is-band a:not(.button) {
	color: var(--ink);
}

/* Text and headings */
.is-eyebrow p {
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.9em;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 0.5em;
	text-transform: uppercase;
}

.is-eyebrow p::before {
	background: var(--red);
	content: "";
	display: inline-block;
	height: 0.5em;
	margin-right: 0.75em;
	transform: rotate(45deg);
	vertical-align: 0.1em;
	width: 0.5em;
}

.text mark,
.entry-content mark {
	background: var(--yellow);
	color: inherit;
	display: inline-block;
	padding: 0 0.2em;
	transform: rotate(-1.5deg);
}

/* Sections */
.section.is-chalk {
	background: var(--chalk);
	color: #f4f4f4;
}

.is-chalk h1,
.is-chalk h2,
.is-chalk h3,
.is-chalk h4,
.is-chalk .is-eyebrow p {
	color: var(--yellow);
}

.is-chalk .product-small.box {
	background: transparent;
	border-color: transparent;
}

.is-chalk .product-small.box a:not(.button),
.is-chalk .price {
	color: #fff;
}

.is-chalk .price ins {
	color: var(--yellow);
}

.is-chalk .price del {
	color: #e6e6e6;
}

.is-chalk .product-small .category {
	color: #e6e6e6;
}

.section.is-band {
	background: var(--yellow);
	color: var(--ink);
}

.section.is-ticker {
	background: var(--ink);
	color: var(--yellow);
}

.is-ticker .row {
	justify-content: center;
}

.is-ticker .col {
	flex: 0 0 auto;
	max-width: none;
	padding: 0 1.5em;
	position: relative;
	width: auto;
}

.is-ticker .col:not(:last-child)::after {
	background: var(--red);
	content: "";
	height: 8px;
	position: absolute;
	right: -4px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
}

.is-ticker p {
	color: var(--yellow);
	font-family: var(--font-body);
	font-size: 0.9em;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

/* Images, cards and shapes */
.img.is-frame {
	margin-bottom: 12px;
	margin-right: 12px;
}

.is-frame .img-inner {
	background: #fff;
	border: 3px solid var(--ink);
	box-shadow: 12px 12px 0 var(--yellow);
}

.col.is-card > .col-inner {
	background: #fff;
	border: 2px solid var(--ink);
	padding: 2.4em 2.6em;
}

.is-chalk .col.is-card > .col-inner,
.dark .col.is-card > .col-inner {
	color: var(--ink);
}

.is-chalk .col.is-card h1,
.is-chalk .col.is-card h2,
.is-chalk .col.is-card h3,
.is-chalk .col.is-card h4,
.dark .col.is-card h1,
.dark .col.is-card h2,
.dark .col.is-card h3,
.dark .col.is-card h4 {
	color: var(--ink);
}

.is-chalk .col.is-card a:not(.button),
.dark .col.is-card a:not(.button) {
	color: var(--green-deep);
}

.is-disc {
	align-items: center;
	aspect-ratio: 1;
	background: var(--yellow);
	border: 3px solid var(--ink);
	border-radius: 50%;
	display: flex;
	font-family: var(--font-head);
	font-size: 1.3em;
	justify-content: center;
	line-height: 1.05;
	margin-left: auto;
	margin-right: auto;
	padding: 0.6em;
	text-align: center;
	text-transform: uppercase;
	width: 5em;
}

.is-disc p {
	margin: 0;
}

.is-timeline ul {
	border-left: 4px solid var(--ink);
	list-style: none;
	margin: 0 0 0 0.5em;
	padding-left: 1.5em;
}

.is-timeline li {
	margin-bottom: 1.4em;
	margin-left: 0;
	position: relative;
}

.is-timeline li::before {
	background: var(--red);
	content: "";
	height: 12px;
	left: calc(-1.5em - 8px);
	position: absolute;
	top: 0.45em;
	transform: rotate(45deg);
	width: 12px;
}

.is-timeline strong {
	display: block;
	font-family: var(--font-head);
	font-size: 1.6em;
	font-weight: 400;
	line-height: 1;
}

/* Hand-drawn shapes. Only used where the browser supports masks. */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
	.header-wrapper:not(.transparent) .header-main::after {
		background: var(--ink);
		bottom: -4px;
		content: "";
		height: 9px;
		left: 0;
		-webkit-mask: var(--mask-line) center / 100% 100% no-repeat;
		mask: var(--mask-line) center / 100% 100% no-repeat;
		position: absolute;
		right: 0;
	}

	.page-title h1::after,
	.is-underline h1::after,
	.is-underline h2::after,
	.is-underline h3::after {
		background: currentcolor;
		content: "";
		display: block;
		height: 11px;
		margin-top: 0.35em;
		-webkit-mask: var(--mask-line) center / 100% 100% no-repeat;
		mask: var(--mask-line) center / 100% 100% no-repeat;
		width: 90px;
	}

	.page-title h1::after {
		width: min(300px, 60%);
	}

	.text-center.is-underline h1::after,
	.text-center.is-underline h2::after,
	.text-center.is-underline h3::after,
	.text-center .is-underline h1::after,
	.text-center .is-underline h2::after,
	.text-center .is-underline h3::after {
		margin-left: auto;
		margin-right: auto;
	}

	.text mark,
	.entry-content mark {
		background: none;
		isolation: isolate;
		position: relative;
	}

	.text mark::before,
	.entry-content mark::before,
	.box-category .header-title::before {
		background: var(--yellow);
		bottom: 0.02em;
		content: "";
		left: -0.1em;
		-webkit-mask: var(--mask-brush) center / 100% 100% no-repeat;
		mask: var(--mask-brush) center / 100% 100% no-repeat;
		position: absolute;
		right: -0.1em;
		top: 0.02em;
		z-index: -1;
	}

	.box-category .header-title {
		color: var(--ink);
		display: inline-block;
		font-family: var(--font-head);
		font-size: 1.7em;
		isolation: isolate;
		padding: 0.05em 0.5em 0.1em;
		position: relative;
		transform: rotate(-2deg);
	}

	.section.is-chalk::before,
	.section.is-chalk::after,
	.section.is-band::before,
	.section.is-band::after {
		content: "";
		height: 22px;
		left: 0;
		-webkit-mask: var(--mask-wave) repeat-x 0 100% / 260px 22px;
		mask: var(--mask-wave) repeat-x 0 100% / 260px 22px;
		position: absolute;
		right: 0;
	}

	.section.is-chalk::before,
	.section.is-band::before {
		top: -21px;
	}

	.section.is-chalk::after,
	.section.is-band::after {
		bottom: -21px;
		transform: scaleY(-1);
	}

	.section.is-chalk::before,
	.section.is-chalk::after {
		background: var(--chalk);
	}

	.section.is-band::before,
	.section.is-band::after {
		background: var(--yellow);
	}
}

@media (max-width: 1099px) {
	.header-cart-title {
		display: none;
	}
}

@media (max-width: 849px) {
	.page-title .medium-text-center h1::after {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 549px) {
	.is-ticker .col {
		padding: 0 0.8em;
	}

	.is-ticker p {
		font-size: 0.8em;
	}

	.is-frame .img-inner {
		box-shadow: 8px 8px 0 var(--yellow);
	}

	.col.is-card > .col-inner {
		padding: 1.6em;
	}
}

/* 12. Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	box-shadow: 0 0 0 6px var(--yellow);
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

.dark :focus-visible,
.is-chalk :focus-visible,
.is-ticker :focus-visible,
.footer-wrapper :focus-visible {
	outline-color: #fff;
}

/* 13. Motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.product-small.box:hover {
		transform: none;
	}
}