/*
 * Schon — core stylesheet.
 *
 * Design tokens are lifted from the reference layout's computed styles, so the
 * numbers below are measurements rather than approximations. Breakpoints live
 * in responsive.css.
 *
 * Contents
 *   1.  Tokens
 *   2.  Reset and base
 *   3.  Typography
 *   4.  Layout primitives
 *   5.  Buttons and forms
 *   6.  Header
 *   7.  Navigation
 *   8.  Search overlay
 *   9.  Banners
 *   10. Sliders
 *   11. Product cards, tabs and the shop-by-age strip
 *   12. Partners
 *   13. Footer
 *   14. Page head and breadcrumbs
 *   15. Journal, comments, sidebar
 *   16. WooCommerce
 *   17. Utilities
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Brand */
	--schon-accent: #ff6060;
	--schon-accent-2: #ff8283;
	--schon-brand-yellow: #fbd60f;
	--schon-brand-red: #ed1e24;
	--schon-star: #c8a760;
	--schon-star-off: #d6d6d6;
	--schon-price-alt: #991015;
	--schon-offer: #62c5de;

	/* Neutrals, darkest to lightest */
	--schon-black: #010101;
	--schon-topbar: #282828;
	--schon-nav: #2e2e2e;
	--schon-ink: #353535;
	--schon-ink-2: #3a3a3a;
	--schon-heading: #535353;
	--schon-heading-2: #575757;
	--schon-chip: #696969;
	--schon-title: #757575;
	--schon-body: #868686;
	--schon-body-2: #8c8c8c;
	--schon-muted: #939393;
	--schon-muted-2: #a0a0a0;
	--schon-muted-3: #a1a1a1;
	--schon-muted-4: #b7b7b7;
	--schon-line: #eeeeee;
	--schon-line-2: #dadada;
	--schon-surface: #f6f6f6;
	--schon-white: #ffffff;

	/* Type */
	--schon-font-body: "Source Sans Pro", Arial, Helvetica, sans-serif;
	--schon-font-head: Montserrat, "Source Sans Pro", Arial, sans-serif;
	--schon-font-ui: Oxygen, "Source Sans Pro", Arial, sans-serif;

	/* Metrics */
	--schon-container: 1200px;
	--schon-gutter: 15px;
	--schon-banner-gap: 22px;
	--schon-radius-pill: 25px;
	--schon-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--schon-speed: 0.35s;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--schon-white);
	color: var(--schon-body);
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.schon-locked {
	overflow: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

img {
	border: 0;
}

a {
	color: var(--schon-ink);
	text-decoration: none;
	transition: color var(--schon-speed) var(--schon-ease);
}

a:hover,
a:focus {
	color: var(--schon-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--schon-accent);
	outline-offset: 2px;
}

ul,
ol {
	margin: 0 0 20px;
	padding-left: 20px;
}

.list-unstyled {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	margin: 0 0 20px;
}

figure {
	margin: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

hr {
	height: 1px;
	margin: 30px 0;
	border: 0;
	background: var(--schon-line);
}

blockquote {
	margin: 0 0 25px;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--schon-accent);
	color: var(--schon-heading);
	font-size: 17px;
	font-style: italic;
	line-height: 28px;
}

code,
kbd,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}

pre {
	overflow-x: auto;
	padding: 18px 20px;
	background: var(--schon-surface);
	border: 1px solid var(--schon-line);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
.h1 {
	margin: 0 0 14px;
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
}

h2,
.h2 {
	margin: 0 0 14px;
	color: var(--schon-muted);
	font-family: var(--schon-font-body);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 4.6px;
	line-height: 28px;
	text-transform: uppercase;
}

h3,
.h3 {
	margin: 0 0 12px;
	color: var(--schon-heading);
	font-family: var(--schon-font-body);
	font-size: 26px;
	font-weight: 300;
	line-height: 32px;
}

h4 {
	margin: 0 0 10px;
	color: var(--schon-heading);
	font-family: var(--schon-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

h5,
h6 {
	margin: 0 0 10px;
	color: var(--schon-heading);
	font-family: var(--schon-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 18px;
	text-transform: uppercase;
}

/* Editorial headings inside post/page content keep a readable scale. */
.entry-content h1 {
	font-size: 30px;
	line-height: 38px;
}

.entry-content h2 {
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 32px;
	text-transform: none;
}

.entry-content h3 {
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 19px;
	font-weight: 700;
	line-height: 28px;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content a {
	color: var(--schon-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.container {
	width: 100%;
	max-width: calc(var(--schon-container) + var(--schon-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--schon-gutter);
}

#wrapper {
	overflow-x: clip;
}

#mt-main {
	display: block;
	padding-bottom: 20px;
}

/*
 * The front page opens straight into the banner grid, so without this the first
 * row is glued to the bottom of the header bar. Inner views are fine as they
 * are: .schon-page-head is a tinted band that is meant to butt up to the bar.
 */
.home #mt-main {
	padding-top: var(--schon-banner-gap);
}

.schon-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	padding: 45px 0 70px;
	align-items: start;
}

.schon-layout.is-full,
.schon-no-sidebar .schon-layout {
	grid-template-columns: minmax(0, 1fr);
}

.schon-front-content {
	padding: 0 0 60px;
}

/* ==========================================================================
   5. Buttons and forms
   ========================================================================== */

/*
 * Every button in the reference is a pill. The theme's own button was square
 * with 12px/1px-tracked caps, which read as a different design language from
 * the add-to-cart and cart-overlay buttons sitting next to it.
 */
.schon-btn,
.entry-content .schon-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 11px 26px;
	background: var(--schon-ink);
	border: 1px solid var(--schon-ink);
	border-radius: var(--schon-radius-pill);
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 20px;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--schon-speed) var(--schon-ease), border-color var(--schon-speed) var(--schon-ease), color var(--schon-speed) var(--schon-ease);
}

.schon-btn:hover,
.schon-btn:focus {
	background: var(--schon-accent);
	border-color: var(--schon-accent);
	color: var(--schon-white);
}

.schon-btn.is-ghost {
	background: transparent;
	color: var(--schon-ink);
}

.schon-btn.is-ghost:hover,
.schon-btn.is-ghost:focus {
	background: var(--schon-ink);
	color: var(--schon-white);
}

/*
 * Admin edit shortcut.
 *
 * One component for every surface that shows a product to someone who can edit
 * it — card, quick view, single product, the gift and preorder feature blocks
 * and a product-linked banner. It is deliberately quieter than .schon-btn: it is
 * a staff tool sitting inside a customer-facing layout, not a call to action.
 *
 * Contexts that already style their own controls override this by specificity:
 * the card's action row and the banner toolbar both do.
 */
.schon-product-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 7px 14px;
	background: transparent;
	border: 1px dashed var(--schon-line);
	border-radius: var(--schon-radius-pill);
	color: var(--schon-muted);
	font-family: var(--schon-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	line-height: 18px;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
	transition: background var(--schon-speed) var(--schon-ease), border-color var(--schon-speed) var(--schon-ease), color var(--schon-speed) var(--schon-ease);
}

.schon-product-edit:hover,
.schon-product-edit:focus {
	background: var(--schon-ink);
	border-color: var(--schon-ink);
	border-style: solid;
	color: var(--schon-white);
}

/*
 * The reference's four small pill buttons. They are the design's real button
 * vocabulary — the cart overlay, the newsletter popup and the review form all
 * draw from this set — so they live here rather than being re-declared inside
 * each component.
 *
 *   1  grey filled, sentence case   — quiet default
 *   2  outlined dark, uppercase     — secondary next to a filled button
 *   3  dark filled, uppercase       — primary
 *   4  hairline outline, small caps — tertiary, used on forms
 */

.btn-type1,
.btn-type2,
.btn-type3,
.btn-type4 {
	display: inline-block;
	border-radius: 21px;
	outline: none;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	cursor: pointer;
	transition: background var(--schon-speed) var(--schon-ease), border-color var(--schon-speed) var(--schon-ease), color var(--schon-speed) var(--schon-ease);
}

.btn-type1 {
	padding: 8px 22px;
	background: #808080;
	border: 1px solid #808080;
	border-radius: 18px;
	color: var(--schon-white);
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
}

.btn-type1:hover,
.btn-type1:focus {
	background: var(--schon-accent);
	border-color: var(--schon-accent);
	color: var(--schon-white);
}

.btn-type2 {
	padding: 5px 22px;
	background: transparent;
	border: 1px solid var(--schon-black);
	border-radius: 18px;
	color: var(--schon-black);
	font-family: var(--schon-font-head);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
}

.btn-type2:hover,
.btn-type2:focus {
	background: var(--schon-black);
	color: var(--schon-white);
}

.btn-type3 {
	padding: 9px 20px;
	background: var(--schon-black);
	border: 1px solid var(--schon-black);
	color: var(--schon-white);
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	text-transform: uppercase;
}

.btn-type3:hover,
.btn-type3:focus {
	background: transparent;
	color: var(--schon-black);
}

.btn-type4 {
	padding: 5px 22px;
	background: transparent;
	border: 1px solid var(--schon-line-2);
	color: #aaaaaa;
	font-family: var(--schon-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
}

.btn-type4:hover,
.btn-type4:focus {
	background: var(--schon-black);
	border-color: var(--schon-black);
	color: var(--schon-white);
}

button {
	font-family: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	background: var(--schon-white);
	border: 1px solid var(--schon-line);
	color: var(--schon-heading);
	font-family: var(--schon-font-body);
	font-size: 14px;
	line-height: 20px;
	transition: border-color var(--schon-speed) var(--schon-ease);
}

textarea {
	min-height: 140px;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--schon-accent);
	outline: none;
}

::placeholder {
	color: var(--schon-muted-2);
	opacity: 1;
}

label {
	display: block;
	margin-bottom: 6px;
	color: var(--schon-heading);
	font-size: 13px;
	font-weight: 600;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

#mt-header {
	position: relative;
	z-index: 60;
	background: var(--schon-white);
}

.has-sticky-header #mt-header.is-stuck .mt-bottom-bar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 60;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
	animation: schon-drop 0.35s var(--schon-ease);
}

@keyframes schon-drop {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

/* --- Top bar --- */

.mt-top-bar {
	background: var(--schon-topbar);
	color: var(--schon-white);
}

.mt-top-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 37px;
}

.mt-top-bar .tel {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-right: 22px;
	color: var(--schon-muted-3);
	font-family: var(--schon-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 19px;
}

.mt-top-bar .tel:last-child {
	margin-right: 0;
}

.mt-top-bar .tel:hover,
.mt-top-bar .tel:focus {
	color: var(--schon-white);
}

.mt-top-bar .tel .schon-icon {
	color: var(--schon-muted-3);
	flex: none;
}

.mt-top-list {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
}

.mt-top-list a {
	display: inline-block;
	color: var(--schon-muted-3);
	font-family: var(--schon-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 20px;
}

/*
 * Checkout is a standing call to action in this bar, so it keeps a block of
 * lighter grey behind it whichever page you are on. schon_top_bar_checkout()
 * puts the `active` class there whether the bar is a real menu or the fallback.
 */
.mt-top-list .active > a {
	padding: 4px 15px;
	background: #3f3e43;
}

.mt-top-list a:hover,
.mt-top-list a:focus,
.mt-top-list .current-menu-item > a {
	color: var(--schon-white);
}

/* --- Bottom bar --- */

.mt-bottom-bar {
	padding: 18px 0;
	background: var(--schon-brand-yellow);
}

.mt-bottom-bar-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 39px;
}

.mt-logo {
	flex: none;
}

.schon-logo-link {
	display: inline-block;
}

.schon-logo-img {
	width: auto;
	max-height: 40px;
}

.mt-header-search {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	max-width: 340px;
	margin-left: auto;
}

.mt-header-search-field {
	flex: 1;
	min-width: 0;
	padding: 0 18px;
	background: var(--schon-white);
	border: 1px solid var(--schon-black);
	border-right: 0;
	border-radius: 22px 0 0 22px;
	color: var(--schon-ink);
	font-family: var(--schon-font-ui);
	font-size: 14px;
}

.mt-header-search-field::placeholder {
	color: var(--schon-muted-2);
}

.mt-header-search-field:focus {
	outline: none;
}

.mt-header-search-submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 0;
	background: var(--schon-white);
	border: 1px solid var(--schon-black);
	border-radius: 0 22px 22px 0;
	color: var(--schon-black);
	cursor: pointer;
}

.mt-header-search-submit:hover,
.mt-header-search-submit:focus {
	color: var(--schon-brand-red);
}

.mt-icon-list {
	display: flex;
	align-items: center;
	gap: 22px;
}

.mt-icon-list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--schon-black);
	font-family: var(--schon-font-ui);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.mt-icon-list a:hover,
.mt-icon-list a:focus {
	color: var(--schon-brand-red);
}

.mt-icon-list button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--schon-black);
	cursor: pointer;
}

.mt-icon-list button:hover,
.mt-icon-list button:focus {
	color: var(--schon-brand-red);
}

.mobile-toggle-item {
	display: none;
}

.bar-opener .bar {
	display: block;
	width: 20px;
	height: 2px;
	margin: 2px auto;
	background: currentColor;
	transition: transform var(--schon-speed) var(--schon-ease), opacity var(--schon-speed) var(--schon-ease), width var(--schon-speed) var(--schon-ease);
}

.bar-opener .bar.small {
	width: 14px;
	margin-right: 0;
	margin-left: auto;
}

.bar-opener[aria-expanded="true"] .bar:nth-child(2) {
	transform: translateY(6px) rotate(45deg);
}

.bar-opener[aria-expanded="true"] .bar.small {
	width: 20px;
	opacity: 0;
}

.bar-opener[aria-expanded="true"] .bar:nth-child(4) {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- Cart summary --- */

.mt-sh-cart {
	display: flex;
	position: relative;
	align-items: center;
	gap: 10px;
	flex: none;
	padding-left: 18px;
	border-left: 1px solid var(--schon-line);
	color: var(--schon-black);
	line-height: 1;
}

.mt-sh-cart .schon-cart-link {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mt-sh-cart > .schon-icon,
.mt-sh-cart .cart-icon {
	position: relative;
	color: var(--schon-nav);
}

.mt-sh-cart .cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background: var(--schon-accent);
	border-radius: 9px;
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
}

.mt-sh-cart .cart-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.mt-sh-cart strong {
	color: var(--schon-black);
	font-family: var(--schon-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 15px;
	text-transform: uppercase;
}

.mt-sh-cart .cart-meta {
	color: var(--schon-black);
	font-family: var(--schon-font-head);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 15px;
}

.mt-sh-cart .cart-meta .amount {
	color: var(--schon-accent);
}

.mt-sh-cart a:hover strong,
.mt-sh-cart a:focus strong {
	color: var(--schon-accent);
}

/* --- Cart overlay --- */

.mt-sh-cart .mt-drop {
	position: absolute;
	top: 100%;
	right: -20px;
	z-index: 80;
	width: 380px;
	padding-top: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--schon-speed) var(--schon-ease), transform var(--schon-speed) var(--schon-ease), visibility var(--schon-speed);
}

.mt-sh-cart:hover .mt-drop,
.mt-sh-cart:focus-within .mt-drop,
.mt-sh-cart.is-open .mt-drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mt-sh-cart .mt-drop-sub {
	background: var(--schon-white);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.mt-sh-cart .mt-side-widget {
	max-height: min(70vh, 560px);
	padding: 32px 24px 28px 30px;
	overflow-y: auto;
}

.mt-sh-cart .cart-empty {
	margin: 0 0 20px;
	color: var(--schon-title);
	font-size: 14px;
	line-height: 20px;
}

.mt-sh-cart .cart-row {
	display: flex;
	position: relative;
	align-items: flex-start;
	gap: 13px;
	margin: 0 0 17px;
	padding-right: 24px;
}

.mt-sh-cart .cart-row .remove {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--schon-accent);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.mt-sh-cart .cart-row .remove:hover,
.mt-sh-cart .cart-row .remove:focus {
	color: var(--schon-black);
}

.mt-sh-cart .cart-row .img {
	flex: none;
	width: 74px;
}

.mt-sh-cart .cart-row .img img {
	display: block;
	width: 100%;
	height: auto;
}

.mt-sh-cart .cart-row .mt-h {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 6px;
}

.mt-sh-cart .cart-row .title {
	color: var(--schon-nav);
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.mt-sh-cart .cart-row .title a {
	color: inherit;
}

.mt-sh-cart .cart-row .title a:hover,
.mt-sh-cart .cart-row .title a:focus {
	color: var(--schon-accent);
}

.mt-sh-cart .cart-row .price {
	color: var(--schon-accent);
	font-family: var(--schon-font-body);
	font-size: 14px;
	line-height: 20px;
}

.mt-sh-cart .cart-row .qty {
	color: var(--schon-body);
	font-size: 13px;
	line-height: 18px;
}

.mt-sh-cart .cart-row-total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
	padding: 16px 0 0;
	border-top: 1px solid var(--schon-line);
	color: var(--schon-title);
	font-size: 14px;
	font-weight: 600;
	line-height: 26px;
}

.mt-sh-cart .cart-row-total strong {
	color: var(--schon-black);
}

.mt-sh-cart .cart-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 22px 0 0;
	border-top: 1px solid var(--schon-line);
}

/* ==========================================================================
   7. Navigation
   ========================================================================== */

#nav {
	min-width: 0;
}

/*
 * The gap gives before the labels do. This menu carries longer names than the
 * reference's ("Ages Of India", "Cave Art TV") next to one more header icon, so
 * at a fixed 30px the row ran out of room and wrapped three items onto a second
 * line. Item labels never break — a two-line nav is worse than a tight one.
 */
#nav > ul {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav > ul > li {
	position: relative;
}

#nav > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 0;
	color: var(--schon-black);
	font-family: var(--schon-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
}

#nav > ul > li > a::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--schon-brand-red);
	transition: width var(--schon-speed) var(--schon-ease);
}

#nav > ul > li:hover > a,
#nav > ul > li:focus-within > a,
#nav > ul > li.is-current > a {
	color: var(--schon-brand-red);
}

#nav > ul > li:hover > a::after,
#nav > ul > li:focus-within > a::after,
#nav > ul > li.is-current > a::after {
	width: 100%;
}

#nav .drop-caret {
	flex: none;
	opacity: 0.7;
}

#nav .drop-toggle {
	display: none;
}

/* Single-column dropdown */

#nav .s-drop {
	position: absolute;
	top: 100%;
	left: -22px;
	z-index: 70;
	min-width: 210px;
	padding: 12px 0;
	background: var(--schon-white);
	border: 1px solid var(--schon-line);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--schon-speed) var(--schon-ease), transform var(--schon-speed) var(--schon-ease), visibility var(--schon-speed);
}

#nav li:hover > .s-drop,
#nav li:focus-within > .s-drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#nav .s-drop a {
	display: block;
	position: relative;
	padding: 0 22px;
	color: var(--schon-nav);
	font-family: var(--schon-font-body);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 35px;
	text-transform: uppercase;
	white-space: nowrap;
}

#nav .s-drop a:hover,
#nav .s-drop a:focus {
	color: var(--schon-accent);
}

#nav .s-drop .sub-menu {
	position: absolute;
	top: -12px;
	left: 100%;
	min-width: 200px;
	padding: 12px 0;
	background: var(--schon-white);
	border: 1px solid var(--schon-line);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--schon-speed) var(--schon-ease), visibility var(--schon-speed);
}

#nav .s-drop li:hover > .sub-menu,
#nav .s-drop li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

/*
 * Overlay panel — every top-level submenu.
 *
 * The panel is a full-width band with a centred 1200px white frame. It gets its
 * width from its containing block, which is why the parent item is switched to
 * `position: static`: that hands the panel up to the header, the nearest
 * positioned ancestor and the only element in the header tree that already
 * spans the page. Anchoring to the item instead would centre the frame on
 * whichever menu item was hovered.
 *
 * The reference does the same thing with `left: -9999px; right: -9999px`.
 * `left: 0; right: 0` against the header is the same result without a box wider
 * than the document — `.w1` clips horizontal overflow, so the 9999px version
 * would be trimmed here anyway.
 */

#nav > ul > li.has-drop {
	position: static;
}

#nav .mt-dropmenu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 70;
	padding: 30px 0 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--schon-speed) var(--schon-ease), transform var(--schon-speed) var(--schon-ease), visibility var(--schon-speed);
}

#nav li:hover > .mt-dropmenu,
#nav li:focus-within > .mt-dropmenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#nav .mt-dropmenu .mt-frame {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	max-width: var(--schon-container);
	margin: 0 auto;
	padding: 50px 72px 40px;
	background: var(--schon-white);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

#nav .mt-dropmenu .mt-f-box {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Promo column. Present only when the menu item points at a page that has
 * something to show, so the flex row above collapses to a plain link list
 * everywhere else without a second rule.
 */

#nav .mt-dropmenu__promo {
	display: flex;
	flex: 0 0 30%;
	align-items: flex-start;
	gap: 20px;
	max-width: 30%;
	padding-left: 1.9%;
	border-left: 1px solid var(--schon-line);
}

#nav .mt-dropmenu__promo-media {
	flex: 0 0 42%;
	max-width: 42%;
}

#nav .mt-dropmenu__promo-media img {
	display: block;
	width: 100%;
	height: auto;
}

#nav .mt-dropmenu__promo-body {
	flex: 1 1 auto;
	min-width: 0;
}

#nav .mt-dropmenu__promo-title {
	display: block;
	margin-bottom: 8px;
	font-family: var(--schon-font-head);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
}

#nav .mt-dropmenu__promo-title a {
	color: var(--schon-heading);
}

#nav .mt-dropmenu__promo-title a:hover,
#nav .mt-dropmenu__promo-title a:focus {
	color: var(--schon-accent);
}

#nav .mt-dropmenu__promo-text {
	margin: 0 0 16px;
	color: #757575;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
}

#nav .mt-dropmenu__promo-cta {
	white-space: nowrap;
}

/* Grouped panel: each child is a titled column over its own list. */

#nav .mt-dropmenu.is-grouped .mt-f-box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 31px 30px;
}

#nav .mt-dropmenu.is-grouped .mt-f-box > li > a {
	display: block;
	position: relative;
	margin-bottom: 18px;
	padding: 0 0 4px;
	color: var(--schon-heading);
	font-family: var(--schon-font-head);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 20px;
}

#nav .mt-dropmenu.is-grouped .mt-f-box > li > a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 68px;
	height: 2px;
	background: #5a5a5a;
	content: "";
}

/*
 * Flat panel: one level of links, so a column heading would be a heading over
 * nothing. Laid out as a single wrapping row inside the same frame.
 */

#nav .mt-dropmenu.is-flat .mt-f-box {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 60px;
}

#nav .mt-dropmenu.is-flat .mt-f-box > li > a {
	display: block;
	color: var(--schon-heading);
	font-family: var(--schon-font-head);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 20px;
	text-transform: uppercase;
	white-space: nowrap;
}

#nav .mt-dropmenu .mt-f-box > li > a:hover,
#nav .mt-dropmenu .mt-f-box > li > a:focus {
	color: var(--schon-accent);
}

#nav .mt-f-box .sub-menu {
	display: block;
	position: static;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
}

#nav .mt-f-box .sub-menu a {
	display: block;
	padding: 0;
	color: #757575;
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 24px;
	text-transform: capitalize;
	white-space: normal;
}

#nav .mt-f-box .sub-menu a:hover,
#nav .mt-f-box .sub-menu a:focus {
	color: var(--schon-accent);
	padding-left: 4px;
}

/* ==========================================================================
   8. Search overlay
   ========================================================================== */

.mt-search-popup {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.97);
	opacity: 0;
	transition: opacity var(--schon-speed) var(--schon-ease);
}

.mt-search-popup[hidden] {
	display: none;
}

.mt-search-popup.is-open {
	opacity: 1;
}

.mt-search-popup .search-close {
	position: absolute;
	top: 34px;
	right: 34px;
	padding: 10px;
	background: none;
	border: 0;
	color: var(--schon-ink);
	cursor: pointer;
}

.mt-search-form {
	display: flex;
	align-items: center;
	gap: 0;
	border-bottom: 2px solid var(--schon-ink);
}

.mt-search-form .search-field {
	flex: 1;
	min-height: 66px;
	padding: 0 10px 0 0;
	background: none;
	border: 0;
	color: var(--schon-ink);
	font-family: var(--schon-font-body);
	font-size: 34px;
	font-weight: 300;
	line-height: 44px;
}

.mt-search-form .search-field:focus {
	outline: none;
}

.mt-search-form .search-submit {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 6px;
	background: none;
	border: 0;
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.mt-search-form .search-submit:hover,
.mt-search-form .search-submit:focus {
	color: var(--schon-accent);
}

/* ==========================================================================
   9. Banners
   ========================================================================== */

.banner-frame {
	display: flex;
	flex-wrap: wrap;
	margin: 0 calc(var(--schon-banner-gap) / -2) 22px;
}

.banner-frame.toppadding-zero {
	padding-top: 0;
}

.banner-frame.mt-paddingsmzero {
	margin-bottom: 0;
}

.banner-frame.nospace {
	margin: 0;
	padding-top: 23px;
}

.banner-frame > div {
	position: relative;
	margin: 0 calc(var(--schon-banner-gap) / 2) var(--schon-banner-gap);
}

.banner-frame.nospace > div {
	margin: 0;
}

/*
 * Tiles nested inside a .banner-box (banner-7/8 in the stacked pair, banner-12/13
 * in the feature column) are NOT direct children of .banner-frame, so the
 * `position: relative` on the rule above never reached them. Their `.holder`
 * (position: absolute; inset: 0) then resolved against the whole .banner-box
 * column instead of its own tile — both holders filled the same box and the two
 * tiles' headings, prices and buttons rendered on top of each other.
 *
 * Do not merge this into the selector above by loosening `>` to a descendant
 * combinator: .banner-frame .holder would then match too and every holder would
 * become its own containing block.
 */
.banner-box > div {
	position: relative;
}

/* Shared banner media behaviour */

.banner-5,
.banner-6,
.banner-7,
.banner-8,
.banner-9,
.banner-10,
.banner-11,
.banner-12,
.banner-13 {
	overflow: hidden;
	background: var(--schon-surface);
}

.banner-5 > img,
.banner-6 > img,
.banner-7 > img,
.banner-8 > img,
.banner-9 > img,
.banner-10 > img,
.banner-11 > img,
.banner-12 > img,
.banner-13 > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--schon-ease);
}

.banner-frame > div:hover > img,
.banner-box > div:hover > img {
	transform: scale(1.05);
}

/*
 * No scrim over banner imagery.
 *
 * The tiles used to carry a gradient wash — dark under the .white copy, light
 * under the dark copy — so text stayed legible whatever was uploaded. It also
 * greyed out the product the tile exists to sell, which is the opposite of the
 * job, and the reference design has no wash at all. The picture wins.
 *
 * The trade this makes: a .white slot (hero, tall, feature-1, feature-2) prints
 * #fff copy, so it needs imagery dark enough to carry it. Put a pale photo in
 * one of those slots and the headline will disappear — pick a darker shot, or
 * move the promotion to a dark-copy slot.
 */
.banner-frame .holder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	pointer-events: none;
}

.banner-frame .holder a,
.banner-frame .holder button {
	pointer-events: auto;
}

/*
 * Full-tile click target.
 *
 * `z-index: 0` is deliberate and is not the same as `z-index: 1` here. Zero puts
 * this in the same painting layer as .holder (z-index: auto) and the overlay is
 * emitted earlier in the DOM, so the holder's own CTA and price links paint on
 * top and keep their clicks; everything else on the tile falls through to this.
 * Raising it to 1 would lift it above .holder and swallow those links instead.
 */
.schon-banner-link {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
}

/*
 * Editor shortcuts, rendered only for users who can edit_theme_options and never
 * inside the Customizer preview. They sit outside .holder so the holder's
 * `pointer-events: none` cannot swallow the click, and above both the scrim and
 * the full-tile link.
 */
.schon-banner-tools {
	position: absolute;
	z-index: 3;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: 0;
	transition: opacity 0.2s var(--schon-ease);
}

.schon-banner-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 40px;
	background: rgba(24, 22, 28, 0.72);
	color: #fff;
	font-family: var(--schon-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	line-height: 1;
	text-transform: uppercase;
	transition: background 0.2s var(--schon-ease);
}

/*
 * The second pill — jumps to the linked product rather than the slot's copy.
 * Held back a shade so the banner's own shortcut stays the primary one.
 */
.schon-banner-edit.is-product {
	background: rgba(24, 22, 28, 0.52);
}

.schon-banner-edit:hover,
.schon-banner-edit:focus,
.schon-banner-edit:focus-visible {
	background: var(--schon-accent);
	color: #fff;
}

.banner-frame > div:hover .schon-banner-tools,
.banner-box > div:hover .schon-banner-tools,
.slider-7 .s-holder:hover .schon-banner-tools,
.schon-banner-tools:focus-within {
	opacity: 1;
}

/* Touch devices get no hover, so the shortcuts stay visible there. */
@media (hover: none) {
	.schon-banner-tools {
		opacity: 1;
	}
}

.schon-banner-edit__text,
.schon-banner-edit .schon-product-edit__text {
	display: none;
}

@media (min-width: 768px) {
	.schon-banner-edit__text,
	.schon-banner-edit .schon-product-edit__text {
		display: inline;
	}
}

/* Row 1 sizing: 50% / 24.5% / 25.5% */

.banner-5 {
	flex: 0 0 calc(50% - var(--schon-banner-gap));
	max-width: calc(50% - var(--schon-banner-gap));
	aspect-ratio: 588 / 562;
}

.banner-6 {
	flex: 0 0 calc(24.5% - var(--schon-banner-gap));
	max-width: calc(24.5% - var(--schon-banner-gap));
	aspect-ratio: 276 / 563;
}

.banner-box.two {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(25.5% - var(--schon-banner-gap));
	max-width: calc(25.5% - var(--schon-banner-gap));
	margin: 0 calc(var(--schon-banner-gap) / 2) var(--schon-banner-gap);
}

.banner-box.two > div {
	flex: 1;
	margin: 0 0 var(--schon-banner-gap);
}

.banner-box.two > div:last-child {
	margin-bottom: 0;
}

/* Hero */

.banner-5 .holder {
	justify-content: flex-end;
	padding: 46px 56px 71px;
}

/*
 * The copy is capped at 65% of the tile so it stays clear of whatever the
 * artwork puts on the right. Without it the 55px headline runs the full width
 * and reads as a caption across the picture rather than a column beside it.
 */
.banner-5 .texts {
	max-width: 65%;
}

.banner-5.white .texts {
	color: var(--schon-white);
}

.banner-5 .title {
	display: block;
	margin-bottom: 16px;
	color: var(--schon-white);
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 4.1px;
	line-height: 21px;
	text-transform: uppercase;
}

.banner-5 .banner-display {
	margin: 0 0 14px;
	color: var(--schon-white);
	font-family: var(--schon-font-body);
	font-size: 55px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 60px;
	text-transform: none;
}

/*
 * The reference hero sets its first line in Montserrat 700 57/62 and the rest
 * in Source Sans Pro 300 55/60 — "New" heavy over "Collection" light. The lead
 * is whatever the operator types on line one of the Customizer's headline box;
 * a single-line headline simply renders heavy with nothing under it.
 */
.banner-5 .banner-display strong {
	display: block;
	font-family: var(--schon-font-head);
	font-size: 57px;
	font-weight: 700;
	line-height: 62px;
}

.banner-5 p {
	max-width: 380px;
	margin-bottom: 22px;
	color: var(--schon-white);
	font-size: 14px;
	line-height: 21px;
}

.banner-5 .price-add {
	display: inline-block;
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 30px;
	font-weight: 400;
	line-height: 35px;
}

.banner-5 .price-add:hover,
.banner-5 .price-add:focus {
	color: var(--schon-accent-2);
}

/* Tall banner */

.banner-6 .holder {
	justify-content: flex-start;
	padding: 24px 33px 28px 23px;
	text-align: left;
}

.banner-6 .sub-title {
	display: block;
	margin-bottom: 21px;
	color: var(--schon-white);
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 4.2px;
	line-height: 20px;
	text-transform: uppercase;
}

.banner-6 h3 {
	margin: 0 0 10px;
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 28px;
}

/*
 * The offer badge is a disc, not a line of text: 129px of #62c5de floated over
 * the right edge of the tile with the compare-at price struck through above the
 * live one. It is the reference's most recognisable piece of the tall banner.
 */
/*
 * Both selectors are deliberately long. They originally had to outrank
 * `.banner-frame .white > .holder > *`, the rule that lifted a tile's copy above
 * the legibility scrim; that scrim is gone, but the long form is kept because it
 * still pins these two children against anything else matching the holder path.
 */
.banner-frame .banner-6 > .holder > .offer {
	display: block;
	position: absolute;
	top: 50%;
	right: 19px;
	z-index: 1;
	width: 129px;
	height: 129px;
	padding: 34px 0 0;
	background: var(--schon-offer);
	border-radius: 100%;
	letter-spacing: 1px;
	text-align: center;
}

.banner-frame .banner-6 > .holder > .btn-shop {
	position: absolute;
	right: 31px;
	bottom: 30px;
	left: 31px;
	z-index: 1;
}

.price-less {
	display: inline-block;
	position: relative;
	color: rgba(255, 255, 255, 0.57);
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 18px;
}

.price-less::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -2px;
	left: -2px;
	height: 1px;
	background: currentColor;
}

.prices {
	display: block;
	color: var(--schon-white);
	font-size: 29px;
	letter-spacing: 1px;
	line-height: 32px;
}

/*
 * 29px is the reference's size and it was chosen for "$ 499.00". A rupee amount
 * with a thousands separator and paise is around 40% wider — "₹ 12,999.00" runs
 * to 147px against a 129px disc — so it wrapped onto two lines inside the
 * circle. Stepping down to 22px keeps every price in this catalogue on one
 * line; nowrap makes the failure obvious rather than silent if one ever cannot.
 */
.banner-6 .offer .prices {
	font-size: 22px;
	line-height: 26px;
	white-space: nowrap;
}

.banner-6 .offer .price-less {
	white-space: nowrap;
}

/* Shared shop link */

.btn-shop {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.8px;
	line-height: 16px;
	text-transform: uppercase;
}

/*
 * The arrow is ringed, not bare — a 24px circle outlined in the link's own
 * colour. Sizing the SVG down with padding rather than a wrapper keeps the
 * templates calling schon_icon() the same way everywhere else does.
 */
.btn-shop .schon-icon {
	box-sizing: border-box;
	flex: none;
	width: 24px;
	height: 24px;
	padding: 5px;
	border: 1px solid currentColor;
	border-radius: 100%;
	transition: transform var(--schon-speed) var(--schon-ease);
}

.btn-shop:hover .schon-icon,
.btn-shop:focus .schon-icon {
	transform: translateX(4px);
}

/* Stacked pair */

.banner-7 .holder,
.banner-8 .holder {
	align-items: flex-end;
	justify-content: flex-start;
	text-align: right;
}

.banner-7 .holder {
	padding: 26px 26px 28px;
}

.banner-8 .holder {
	padding: 29px 24px 28px;
}

/*
 * --schon-muted (#939393) over the pale catalogue art measures about 2.6:1,
 * which fails WCAG AA for text this size. --schon-heading (#535353) keeps the
 * same soft, non-shouty look and clears 4.5:1.
 */
.banner-7 h2,
.banner-8 h2 {
	margin: 0 0 1px;
	color: var(--schon-heading);
	font-family: var(--schon-font-body);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 4.6px;
	line-height: 28px;
	text-align: right;
	text-transform: uppercase;
}

.banner-7 h2 strong,
.banner-8 h2 strong {
	font-weight: 700;
}

.banner-7 .mt-stars,
.banner-8 .mt-stars {
	justify-content: flex-end;
}

.banner-7 .price-tag,
.banner-8 .price-tag {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/*
 * The reference pins banner 7's price to the corner and lets banner 8's sit in
 * flow. Same specificity note as .banner-6 .offer.
 */
.banner-frame .banner-7 > .holder > .price-tag {
	position: absolute;
	right: 29px;
	bottom: 29px;
	z-index: 1;
}

.banner-8 h2 {
	margin: 0 0 46px;
}

.banner-7 .price-tag .price,
.banner-8 .price-tag .price {
	display: block;
	padding: 10px 0 11px;
	color: var(--schon-price-alt);
	font-family: var(--schon-font-head);
	font-size: 27px;
	font-weight: 400;
	letter-spacing: -1.5px;
	line-height: 30px;
}

.banner-8 .price-off {
	display: inline-block;
	margin: 4px 0 6px;
	padding: 0 5px;
	color: #9f9f9f;
	font-size: 18px;
	line-height: 20px;
	text-decoration: line-through;
}

.banner-7 .shop-now {
	display: inline-block;
	padding: 2px 9px 1px;
	background: #2e2d32;
	color: var(--schon-white);
	font-family: var(--schon-font-body);
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 20px;
	text-transform: uppercase;
}

.banner-7 .shop-now:hover,
.banner-7 .shop-now:focus {
	background: var(--schon-accent);
	color: var(--schon-white);
}

.banner-8 .btn-shop {
	/* Right-aligned tile, so the reference's -3px optical nudge goes on the right. */
	margin: 16px -3px 0 0;
	color: var(--schon-heading);
}

.banner-8 .btn-shop:hover,
.banner-8 .btn-shop:focus {
	color: var(--schon-accent);
}

/* Row 2: 35.5% / 64.5% */

.banner-box.third {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(35.5% - var(--schon-banner-gap));
	max-width: calc(35.5% - var(--schon-banner-gap));
	margin: 0 calc(var(--schon-banner-gap) / 2) var(--schon-banner-gap);
}

.banner-box.third > div {
	margin: 0 0 25px;
}

.banner-box.third > div:last-child {
	margin-bottom: 0;
}

.banner-12 {
	aspect-ratio: 412 / 222;
}

.banner-13 {
	aspect-ratio: 412 / 332;
}

/*
 * Heading to the top, CTA to the bottom — as the reference lays these tiles out.
 * They inherited `justify-content: center` from .banner-frame .holder, which
 * bunched the copy and the "shop now" link together in the middle of the picture
 * instead of framing it. Every other tile family already sets its own alignment;
 * these two were the ones left on the default.
 */
.banner-12 .holder,
.banner-13 .holder {
	align-items: flex-start;
	justify-content: space-between;
	padding: 42px 38px 30px 41px;
}

/*
 * The trio is the shortest tile family on the front page (400 / 210) and its
 * products are photographed wide, so a 36/28px inset pushed the heading and the
 * CTA far enough inward that they sat on the toy rather than beside it. Pulling
 * both to the corners hands the middle of the picture back.
 *
 * Prefixed with .banner-frame on purpose: responsive.css resets
 * `.banner-frame .holder` to a uniform 32px at <= 1300px and 22px at <= 767px,
 * which matches this rule's specificity and, loading later, would win and undo
 * the corner framing on every screen narrower than a desktop.
 */
.banner-frame .banner-9 .holder,
.banner-frame .banner-10 .holder,
.banner-frame .banner-11 .holder {
	align-items: flex-start;
	justify-content: space-between;
	padding: 16px 20px 14px;
}

/*
 * The heading's own bottom margin is spacing between stacked lines. With the CTA
 * pushed to the far edge it becomes a second gap on top of the flex distribution.
 */
.banner-9 .holder h2,
.banner-10 .holder h2,
.banner-11 .holder h2,
.banner-12 .holder h2,
.banner-13 .holder h2 {
	margin-bottom: 0;
}

/* Row 3 rings its arrow at 18px, not the 24px the larger tiles use. */
.banner-9 .btn-shop,
.banner-10 .btn-shop,
.banner-11 .btn-shop {
	gap: 7px;
}

.banner-9 .btn-shop .schon-icon,
.banner-10 .btn-shop .schon-icon,
.banner-11 .btn-shop .schon-icon {
	width: 18px;
	height: 18px;
	padding: 3px;
}

.banner-12 h2,
.banner-13 h2,
.banner-9 h2,
.banner-10 h2,
.banner-11 h2 {
	margin: 0 0 14px;
	letter-spacing: 0;
	line-height: normal;
	text-transform: none;
}

.banner-12 h2 span,
.banner-13 h2 span,
.banner-9 h2 span,
.banner-10 h2 span,
.banner-11 h2 span {
	display: block;
	color: var(--schon-muted-4);
	font-family: var(--schon-font-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 5px;
	line-height: 18px;
	text-transform: capitalize;
}

.banner-12 h2 strong,
.banner-13 h2 strong,
.banner-9 h2 strong,
.banner-10 h2 strong,
.banner-11 h2 strong {
	display: block;
	padding-top: 4px;
	color: var(--schon-heading);
	font-family: var(--schon-font-head);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 26px;
	text-transform: uppercase;
}

.banner-12.white h2 span,
.banner-13.white h2 span {
	color: rgba(255, 255, 255, 0.72);
}

.banner-12.white h2 strong,
.banner-13.white h2 strong {
	color: var(--schon-white);
}

.banner-12 .btn-shop,
.banner-13 .btn-shop,
.banner-9 .btn-shop,
.banner-10 .btn-shop,
.banner-11 .btn-shop {
	color: #878787;
}

.banner-12.white .btn-shop,
.banner-13.white .btn-shop {
	color: var(--schon-white);
}

.banner-12 .btn-shop:hover,
.banner-13 .btn-shop:hover,
.banner-9 .btn-shop:hover,
.banner-10 .btn-shop:hover,
.banner-11 .btn-shop:hover,
.banner-12 .btn-shop:focus,
.banner-13 .btn-shop:focus,
.banner-9 .btn-shop:focus,
.banner-10 .btn-shop:focus,
.banner-11 .btn-shop:focus {
	color: var(--schon-accent);
}

/* Row 3 trio */

.banner-frame.nospace {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.banner-9,
.banner-10,
.banner-11 {
	aspect-ratio: 400 / 210;
}

/* Editorial slider column */

.slider-7 {
	flex: 0 0 calc(64.5% - var(--schon-banner-gap));
	max-width: calc(64.5% - var(--schon-banner-gap));
	margin: 0 calc(var(--schon-banner-gap) / 2) var(--schon-banner-gap);
}

.slider-7 .banner-slider {
	position: relative;
	height: 100%;
	background: var(--schon-surface);
}

.slider-7 .s-holder {
	position: relative;
	aspect-ratio: 765 / 579;
}

.slider-7 .s-holder > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Per-slot image fit, chosen from each banner's "Image fit" Customizer
 * control (schon_banner_image_fit() in inc/customizer.php) and applied as a
 * `fit-*` class by schon_banner_classes() / the slide loop in
 * feature-banners.php. `.banner-frame` scoping isn't decorative: every tile
 * and slide lives inside one, and that extra class is what gets these rules
 * to (0,2,1) specificity — enough to beat both the `object-fit: cover`
 * default on .banner-5..13 above (0,1,1) and .slider-7 .s-holder > img
 * (also 0,2,1, so this only wins because it comes later in the file).
 */
.banner-frame .fit-contain > img {
	object-fit: contain;
}

.banner-frame .fit-fill > img {
	object-fit: fill;
}

.banner-frame .fit-scale-down > img {
	object-fit: scale-down;
}

/*
 * The editorial copy sits high in the slide, not centred on it — the artwork in
 * this row is bottom-weighted and a vertically centred block lands on top of it.
 */
.slider-7 .s-box {
	position: absolute;
	top: 12%;
	right: 5%;
	left: 7.6%;
	/*
	 * The copy block is a transparent box covering most of the slide. Left as a
	 * hit target it would eat the clicks meant for the full-slide link beneath
	 * it, so it passes them through and only its own links take them — the same
	 * arrangement .banner-frame .holder uses.
	 */
	pointer-events: none;
}

.slider-7 .s-box a {
	pointer-events: auto;
}

.slider-7 .s-title {
	display: block;
	margin: 0 0 10px;
	color: #6a6a6a;
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 4px;
	line-height: 16px;
	text-transform: uppercase;
}

/* Line one is set heavy, line two light — the pairing is the whole device. */
.slider-7 .heading {
	display: block;
	margin: 0 0 3px -7px;
	color: var(--schon-heading);
	font-family: var(--schon-font-body);
	font-size: 59px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 59px;
}

.slider-7 .heading.add {
	margin: 0 0 6px -5px;
	font-weight: 200;
	letter-spacing: -2px;
}

.slider-7 .s-txt {
	max-width: 50%;
	margin: 0 0 0 -3px;
}

.slider-7 .s-txt p {
	margin: 0;
	color: var(--schon-body);
	font-size: 14px;
	line-height: 21px;
}

.slider-7 .s-shop {
	display: inline-block;
	position: relative;
	margin-top: 20px;
	color: var(--schon-heading);
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 16px;
	text-transform: uppercase;
}

/* Underline is a hover affordance only; the reference sets this link bare. */
.slider-7 .s-shop::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -6px;
	left: 0;
	height: 2px;
	background: var(--schon-heading);
	opacity: 0;
	transition: opacity var(--schon-speed) var(--schon-ease), background var(--schon-speed) var(--schon-ease);
}

.slider-7 .s-shop:hover::after,
.slider-7 .s-shop:focus::after {
	opacity: 1;
}

.slider-7 .s-shop:hover,
.slider-7 .s-shop:focus {
	color: var(--schon-accent);
}

.slider-7 .s-shop:hover::after,
.slider-7 .s-shop:focus::after {
	background: var(--schon-accent);
}

/* ==========================================================================
   10. Sliders
   ========================================================================== */

[data-schon-slider] {
	position: relative;
	overflow: hidden;
}

.schon-slider-track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.55s var(--schon-ease);
	will-change: transform;
}

[data-schon-slider]:not(.is-ready) .schon-slider-track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

[data-schon-slider]:not(.is-ready) .schon-slider-track::-webkit-scrollbar {
	display: none;
}

.schon-slide {
	flex: 0 0 calc(100% / var(--schon-per-view, 1));
	max-width: calc(100% / var(--schon-per-view, 1));
	scroll-snap-align: start;
}

/* Before JS boots, show the natural desktop count so there is no reflow jump. */
[data-schon-slider]:not(.is-ready)[data-slides="3"] {
	--schon-per-view: 3;
}

[data-schon-slider]:not(.is-ready)[data-slides="4"] {
	--schon-per-view: 4;
}

[data-schon-slider]:not(.is-ready)[data-slides="6"] {
	--schon-per-view: 6;
}

.schon-carousel {
	position: relative;
}

.schon-slider-nav {
	position: absolute;
	top: 38%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--schon-white);
	border: 1px solid var(--schon-line);
	color: var(--schon-heading);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--schon-speed) var(--schon-ease), background var(--schon-speed) var(--schon-ease), color var(--schon-speed) var(--schon-ease);
}

.schon-slider-nav.prev {
	left: 0;
}

.schon-slider-nav.next {
	right: 0;
}

[data-schon-slider]:hover .schon-slider-nav,
[data-schon-slider]:focus-within .schon-slider-nav,
.schon-carousel:hover .schon-slider-nav,
.schon-carousel:focus-within .schon-slider-nav {
	opacity: 1;
}

.schon-slider-nav:hover,
.schon-slider-nav:focus {
	background: var(--schon-accent);
	border-color: var(--schon-accent);
	color: var(--schon-white);
	opacity: 1;
}

.schon-slider-nav[disabled] {
	cursor: default;
	opacity: 0.25;
}

.schon-slider-dots {
	position: absolute;
	bottom: 22px;
	left: 8%;
	display: flex;
	gap: 8px;
}

.schon-slider-dots button {
	width: 26px;
	height: 3px;
	padding: 0;
	background: rgba(83, 83, 83, 0.28);
	border: 0;
	cursor: pointer;
	transition: background var(--schon-speed) var(--schon-ease);
}

.schon-slider-dots button.is-active {
	background: var(--schon-accent);
}

/* The editorial slider uses outlined discs rather than the default bars. */
.slider-7 .schon-slider-dots {
	bottom: 40px;
	left: 58px;
	gap: 2px;
}

.slider-7 .schon-slider-dots button {
	box-sizing: border-box;
	width: 17px;
	height: 17px;
	background: none;
	border: 2px solid #d2d2d2;
	border-radius: 100%;
	transition: border-color var(--schon-speed) var(--schon-ease);
}

.slider-7 .schon-slider-dots button.is-active {
	background: none;
	border-color: #aeaeae;
}

/* ==========================================================================
   11. Product cards, tabs and the shop-by-age strip
   ========================================================================== */

.mt-producttabs {
	position: relative;
}

.mt-producttabs.style2 {
	padding: 39px 0 53px;
}

/*
 * The carousel arrows sit above the row on a pale pill, level with the tab
 * labels, rather than floating over the artwork at the row's edges.
 *
 * Both the pill and the arrows hang off .schon-carousel — the same box — so
 * they cannot drift apart when the heading above them changes height. Anchoring
 * the pill to the section and the arrows to the slider looked right only for
 * one particular tab-label height.
 */
.mt-producttabs .schon-carousel::before {
	content: "";
	position: absolute;
	top: -42px;
	right: 0;
	width: 75px;
	height: 37px;
	background: var(--schon-line);
	border-radius: 19px;
}

.mt-producttabs .schon-slider-nav {
	top: -38px;
	width: 29px;
	height: 29px;
	background: var(--schon-white);
	border: 0;
	border-radius: 50%;
	color: var(--schon-muted-4);
	opacity: 1;
}

.mt-producttabs .schon-slider-nav.prev {
	right: 39px;
	left: auto;
}

.mt-producttabs .schon-slider-nav.next {
	right: 6px;
}

.mt-producttabs .schon-slider-nav:hover,
.mt-producttabs .schon-slider-nav:focus {
	background: var(--schon-accent);
	color: var(--schon-white);
}

.mt-producttabs.style3 {
	padding: 68px 0 87px;
}

.producttabs {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 28px;
	line-height: 20px;
}

.producttabs li {
	margin: 0 28px 0 0;
	padding: 0 0 0 30px;
	border-left: 1px solid #d8d8d8;
}

.producttabs li:first-child {
	padding-left: 0;
	border-left: 0;
}

.producttabs button {
	padding: 0;
	background: none;
	border: 0;
	color: #838182;
	font-family: var(--schon-font-head);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 20px;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.4s linear;
}

.producttabs button:hover,
.producttabs button:focus,
.producttabs button.active {
	color: var(--schon-ink-2);
}

.mt-producttabs.style3 .heading {
	margin: 0 0 7px;
	color: var(--schon-ink-2);
	font-family: var(--schon-font-head);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 30px;
	text-transform: uppercase;
}

.tab-panel[hidden] {
	display: none;
}

/* Card */

.mt-product1 {
	position: relative;
	display: block;
	padding: 0 11px;
	/*
	 * The card's layers (badge 3, action row 4, whole-card link 2) only order
	 * correctly against each other. Isolating keeps them inside this card
	 * instead of competing with the neighbouring one in a shared context.
	 */
	isolation: isolate;
}

/*
 * Whole-card link.
 *
 * The title's own anchor is stretched over the card, so the image, the category,
 * the price and the space between them all lead to the product. Done this way
 * rather than with a second overlay anchor: one link, one accessible name, and
 * nothing extra added to the tab order.
 *
 * Everything above z-index 2 keeps its own clicks — that is the action row (4)
 * and, with it, the admin edit shortcut. The badge and the star row are inert
 * decoration at z-index 3, so they are made click-through rather than left as
 * dead corners on an otherwise clickable card.
 */
.mt-product1 .schon-card-link::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
}

.mt-product1 .caption,
.mt-product1 .mt-stars {
	pointer-events: none;
}

/*
 * The admin shortcut has to sit above the stretched card link, or the card would
 * swallow its click and send the operator to the storefront page instead of the
 * editor. Compact, because it shares a two-up grid with a phone-width card.
 */
.mt-product1 .schon-product-edit {
	position: relative;
	z-index: 3;
	min-height: 0;
	margin-top: 10px;
	padding: 5px 11px;
	font-size: 11px;
	line-height: 16px;
}

.mt-product1 .box {
	position: relative;
	margin: 0 0 6px;
	overflow: hidden;
	background: var(--schon-surface);
}

.mt-product1 .b1,
.mt-product1 .b2 {
	position: relative;
	height: 100%;
}

.mt-product1 .schon-card-media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.mt-product1.large .schon-card-media {
	aspect-ratio: 1 / 1;
}

.mt-product1 .schon-card-media img,
.mt-product1 .schon-card-media .wp-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--schon-ease);
}

.mt-product1:hover .schon-card-media img {
	transform: scale(1.06);
}

.mt-product1 .caption {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
}

.mt-product1 .caption .new {
	display: inline-block;
	padding: 3px 6px;
	background: var(--schon-black);
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
}

.mt-product1 .caption .new.sale {
	background: var(--schon-accent);
}

.mt-product1 .caption .new.out {
	background: var(--schon-muted);
}

.mt-product1 .mt-stars {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	justify-content: flex-end;
}

.mt-product1 .links {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: flex;
	background: var(--schon-white);
	border: 1px solid var(--schon-line);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--schon-speed) var(--schon-ease), transform var(--schon-speed) var(--schon-ease);
}

.mt-product1:hover .links,
.mt-product1:focus-within .links {
	opacity: 1;
	transform: translateY(0);
}

.mt-product1 .links li {
	display: flex;
	flex: none;
	border-left: 1px solid var(--schon-line);
}

.mt-product1 .links li.links-cart {
	flex: 1;
	border-left: 0;
}

.mt-product1 .links a,
.mt-product1 .links button,
.mt-product1 .links > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 9px;
	background: none;
	border: 0;
	color: #8a8a8a;
	font-family: var(--schon-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	line-height: 18px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--schon-speed) var(--schon-ease), color var(--schon-speed) var(--schon-ease);
}

.mt-product1 .links a:hover,
.mt-product1 .links a:focus,
.mt-product1 .links button:hover,
.mt-product1 .links button:focus {
	background: var(--schon-accent);
	color: var(--schon-white);
}

.mt-product1 .links .added_to_cart {
	display: none;
}

.mt-product1 .links a.loading {
	opacity: 0.6;
}

.mt-product1 .txt {
	padding: 0 0 0 20px;
}

.mt-product1 .txt .cat {
	display: block;
	margin-bottom: 4px;
	color: var(--schon-muted-2);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/*
 * Card type is the reference's, to the pixel: 14/20 title over a 17/20 price.
 * It was previously 18/24 and 23/30, which read fine in a three-across shop
 * grid and fell apart in the five-across related row, where a normal product
 * name wrapped to four lines.
 */

.mt-product1 .title {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}

.mt-product1 .title,
.mt-product1 .title a {
	color: var(--schon-title);
	font-family: var(--schon-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-transform: capitalize;
}

.mt-product1 .title a:hover,
.mt-product1 .title a:focus {
	color: var(--schon-accent);
}

.mt-product1 .price {
	display: block;
	color: var(--schon-black);
	font-family: var(--schon-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 20px;
}

.mt-product1 .price del {
	margin-right: 6px;
	color: var(--schon-muted-2);
	font-size: 13px;
	font-weight: 400;
}

.mt-product1 .price ins {
	text-decoration: none;
}

/*
 * .large is the front page's card. The reference keeps the 20px leading and
 * only raises the type: 18px title, 23px price. The `a` selector has to be
 * repeated because the base rule targets it directly and would otherwise win.
 */
.mt-product1.large .title,
.mt-product1.large .title a {
	font-size: 18px;
}

.mt-product1.large .price {
	font-size: 23px;
}

/* Stars */

.mt-stars {
	display: flex;
	gap: 2px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.mt-stars li {
	display: inline-flex;
	color: var(--schon-star);
	line-height: 0;
}

.mt-stars li.is-off {
	color: var(--schon-star-off);
}

.mt-stars-count {
	margin-left: 8px;
	color: var(--schon-muted-2);
	font-size: 13px;
}

/* Shop by age */

/*
 * Sits between the feature banners and the product tabs, so it carries the
 * tabs' own top padding (39px) and hands the gap below to them rather than
 * doubling it.
 */
.mt-ages {
	padding: 39px 0 0;
}

/* Same 26/30 as .patners-heading and .mt-producttabs.style3 .heading. */
.ages-heading {
	margin: 0 0 26px;
	color: var(--schon-ink-2);
	font-family: var(--schon-font-head);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 30px;
	text-transform: uppercase;
}

/*
 * auto-fit rather than a fixed column count: the strip renders one circle per
 * populated `pa_age` term, and how many of those exist is a property of the
 * catalogue, not of the layout.
 */
.age-circles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--schon-banner-gap);
}

.age-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 170px;
	margin: 0 auto;
	padding: 10px;
	aspect-ratio: 1;
	background: var(--schon-ink);
	border-radius: 50%;
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	transition: background var(--schon-speed) var(--schon-ease),
		color var(--schon-speed) var(--schon-ease),
		transform var(--schon-speed) var(--schon-ease);
}

/* Typed as a.age-circle so the base a:hover colour does not win. */
a.age-circle:hover,
a.age-circle:focus {
	background: var(--schon-accent);
	color: var(--schon-white);
	transform: translateY(-4px);
}

/* Shop by category */

.mt-categories {
	padding: 39px 0 0;
}

/* Same 26/30 as .ages-heading and .patners-heading. */
.categories-heading {
	margin: 0 0 26px;
	color: var(--schon-ink-2);
	font-family: var(--schon-font-head);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 30px;
	text-transform: uppercase;
}

/*
 * Fixed four across rather than auto-fit. The strip's length is an operator
 * setting, so a column count derived from the available width would leave a
 * different number of cards stranded on the last row at every screen size;
 * four divides the default eight exactly and matches the reference layout.
 */
.category-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--schon-banner-gap);
}

.category-card {
	position: relative;
	isolation: isolate;
}

.category-card__link {
	display: block;
	color: var(--schon-ink-2);
}

/*
 * A square box the photograph is fitted inside, never cropped: these are
 * catalogue shots of one object on white, and cropping one to fill the box
 * cuts the object rather than the background.
 */
.category-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 14px;
	background: var(--schon-white);
	overflow: hidden;
}

.category-card__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform var(--schon-speed) var(--schon-ease);
}

.category-card__title {
	display: block;
	padding-top: 12px;
	font-family: var(--schon-font-head);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

a.category-card__link:hover .category-card__media img,
a.category-card__link:focus .category-card__media img {
	transform: scale(1.06);
}

a.category-card__link:hover .category-card__title,
a.category-card__link:focus .category-card__title {
	color: var(--schon-accent);
}

.category-card:hover .schon-banner-tools {
	opacity: 1;
}

/* ==========================================================================
   12. Partners
   ========================================================================== */

.mt-patners {
	padding: 0 0 36px;
	border-top: 1px solid var(--schon-line);
}

/*
 * Every other section on this page announces itself at 26/30; the brand strip
 * was the one heading still set as a small centred label, which made the row
 * read as a footnote rather than a section.
 */
.patners-heading {
	margin: 0 0 26px;
	color: var(--schon-ink-2);
	font-family: var(--schon-font-head);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 30px;
	text-transform: uppercase;
}

.patner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 74px;
	padding: 0 10px;
	color: var(--schon-muted-4);
	font-family: var(--schon-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	filter: grayscale(1);
	opacity: 0.75;
	transition: opacity var(--schon-speed) var(--schon-ease), color var(--schon-speed) var(--schon-ease);
}

a.patner-logo:hover,
a.patner-logo:focus {
	color: var(--schon-heading);
	opacity: 1;
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

#mt-footer {
	background: var(--schon-brand-yellow);
}

.f-promo-box {
	position: relative;
	padding: 65px 0 0;
	background: var(--schon-brand-yellow);
}

.f-promo-box .divider {
	padding-bottom: 42px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.promo-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.f-widget-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.f-widget-item .widget-icon {
	flex: none;
	color: var(--schon-black);
	line-height: 0;
}

.f-promo-box-heading {
	margin: 0 0 1px;
	color: var(--schon-black);
	font-family: var(--schon-font-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 20px;
	text-transform: uppercase;
}

.f-widget-item p {
	margin: 0;
	color: var(--schon-ink);
	font-size: 14px;
	line-height: 20px;
}

.footer-holder {
	position: relative;
	padding: 51px 0 60px;
	background: var(--schon-brand-yellow);
}

.footer-grid {
	display: grid;
	grid-template-columns: 33% minmax(0, 1fr) 25%;
	gap: 30px;
}

.f-widget-about .logo {
	position: relative;
	margin-bottom: 22px;
	padding-bottom: 14px;
}

.f-widget-about .logo::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 90px;
	height: 2px;
	background: var(--schon-brand-red);
}

.f-widget-about p {
	max-width: 380px;
	margin: 0 0 33px;
	color: var(--schon-ink);
	font-size: 14px;
	line-height: 20px;
}

.address-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	color: var(--schon-ink);
	font-size: 14px;
	line-height: 20px;
}

.address-list .schon-icon {
	margin-top: 3px;
	flex: none;
	color: var(--schon-ink);
}

.address-list address {
	margin: 0;
	font-style: normal;
}

.address-list a {
	color: var(--schon-ink);
}

.address-list a:hover,
.address-list a:focus {
	color: var(--schon-brand-red);
}

.footer-col--nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.f-widget-heading {
	margin: 0 0 35px;
	color: var(--schon-black);
	font-family: var(--schon-font-body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 16px;
	text-transform: none;
}

.f-widget-heading.follow {
	margin: 30px 0 16px;
}

.f-widget-nav li {
	margin-bottom: 9px;
}

.f-widget-nav a {
	color: var(--schon-ink);
	font-size: 14px;
	line-height: 20px;
}

.f-widget-nav a:hover,
.f-widget-nav a:focus {
	color: var(--schon-brand-red);
	padding-left: 3px;
}

.footer-col--newsletter {
	text-align: right;
}

.newsletter-form fieldset {
	display: flex;
	max-width: 300px;
	margin-left: auto;
}

.newsletter-form .form-control {
	flex: 1;
	min-height: 42px;
	padding: 7px 10px 7px 22px;
	background: var(--schon-white);
	border: 0;
	border-radius: var(--schon-radius-pill) 0 0 var(--schon-radius-pill);
	color: var(--schon-body-2);
	font-family: var(--schon-font-head);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: left;
}

.newsletter-form button {
	flex: none;
	min-height: 42px;
	padding: 0 18px;
	background: var(--schon-black);
	border: 0;
	border-radius: 0 var(--schon-radius-pill) var(--schon-radius-pill) 0;
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 11px;
	font-weight: 700;
	line-height: 13px;
	cursor: pointer;
	transition: background var(--schon-speed) var(--schon-ease);
}

.newsletter-form button:hover,
.newsletter-form button:focus {
	background: var(--schon-brand-red);
}

.social-network {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
}

.social-network a {
	display: inline-flex;
	color: var(--schon-black);
	line-height: 0;
}

.social-network a:hover,
.social-network a:focus {
	color: var(--schon-brand-red);
}

.footer-extra {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.footer-area {
	padding: 24px 0 20px;
	background: var(--schon-brand-yellow);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.footer-area-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.footer-area p {
	margin: 0;
	color: var(--schon-ink);
	font-size: 14px;
	line-height: 20px;
}

.footer-area a {
	color: var(--schon-black);
}

.footer-area a:hover,
.footer-area a:focus {
	color: var(--schon-brand-red);
}

.bank-card {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.pay-chip {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.4);
	color: var(--schon-black);
	font-family: var(--schon-font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* Back to top */

#back-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--schon-black);
	border: 0;
	color: var(--schon-white);
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--schon-speed) var(--schon-ease), transform var(--schon-speed) var(--schon-ease), background var(--schon-speed) var(--schon-ease);
}

#back-top[hidden] {
	display: none;
}

#back-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

#back-top:hover,
#back-top:focus {
	background: var(--schon-accent);
}

/* ==========================================================================
   14. Page head and breadcrumbs
   ========================================================================== */

.schon-page-head {
	padding: 34px 0 30px;
	background: var(--schon-surface);
	border-bottom: 1px solid var(--schon-line);
}

.schon-page-title {
	margin: 0 0 10px;
	color: var(--schon-ink-2);
	font-family: var(--schon-font-head);
	font-size: 26px;
	font-weight: 700;
	line-height: 32px;
	text-transform: uppercase;
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--schon-muted-2);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.breadcrumbs a {
	color: var(--schon-body);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
	color: var(--schon-accent);
}

.breadcrumbs .is-current {
	color: var(--schon-accent);
}

.schon-archive-description {
	padding: 28px 0 0;
	color: var(--schon-body);
}

/* ==========================================================================
   15. Journal, comments, sidebar
   ========================================================================== */

.schon-post-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 30px;
}

.schon-layout.is-full .schon-post-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schon-post-card {
	display: flex;
	flex-direction: column;
}

.schon-post-card.is-result {
	flex-direction: row;
	gap: 22px;
	grid-column: 1 / -1;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--schon-line);
}

.schon-post-card.is-result .schon-post-media {
	flex: 0 0 160px;
}

.schon-post-media {
	display: block;
	margin-bottom: 18px;
	overflow: hidden;
	background: var(--schon-surface);
}

.schon-post-media img {
	width: 100%;
	transition: transform 0.7s var(--schon-ease);
}

.schon-post-card:hover .schon-post-media img {
	transform: scale(1.05);
}

.schon-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 10px;
}

.schon-post-meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--schon-muted-2);
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.schon-post-meta a {
	color: var(--schon-muted-2);
}

.schon-post-meta a:hover,
.schon-post-meta a:focus {
	color: var(--schon-accent);
}

.schon-post-title {
	margin: 0 0 10px;
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 26px;
	text-transform: none;
}

.schon-post-title a {
	color: inherit;
}

.schon-post-title a:hover,
.schon-post-title a:focus {
	color: var(--schon-accent);
}

.schon-post-excerpt p {
	margin: 0 0 14px;
}

.schon-result-type {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--schon-accent);
	font-family: var(--schon-font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.schon-readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--schon-ink-2);
	font-family: var(--schon-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.schon-readmore:hover,
.schon-readmore:focus {
	color: var(--schon-accent);
}

.schon-result-count {
	margin-bottom: 24px;
	color: var(--schon-muted-2);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.schon-single-media {
	margin-bottom: 26px;
}

.schon-single-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--schon-line);
}

.schon-tags-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--schon-ink-2);
	font-family: var(--schon-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.schon-tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 12px;
	background: var(--schon-surface);
	color: var(--schon-body);
	font-size: 12px;
}

.schon-tags a:hover,
.schon-tags a:focus {
	background: var(--schon-accent);
	color: var(--schon-white);
}

.schon-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--schon-line);
}

.schon-post-nav .nav-links {
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 20px;
}

.schon-post-nav .nav-label {
	display: block;
	color: var(--schon-muted-2);
	font-family: var(--schon-font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.schon-post-nav .nav-title {
	display: block;
	color: var(--schon-ink);
	font-size: 15px;
	line-height: 22px;
}

.schon-post-nav .nav-next {
	text-align: right;
}

/* Pagination */

.schon-pagination,
.woocommerce-pagination {
	margin-top: 44px;
}

.schon-pagination ul,
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.schon-pagination a,
.schon-pagination span,
.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	background: var(--schon-white);
	border: 1px solid var(--schon-line);
	color: var(--schon-heading);
	font-family: var(--schon-font-head);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.schon-pagination .current,
.schon-pagination a:hover,
.schon-pagination a:focus,
.woocommerce-pagination .current,
.woocommerce-pagination a:hover,
.woocommerce-pagination a:focus {
	background: var(--schon-accent);
	border-color: var(--schon-accent);
	color: var(--schon-white);
}

/* Comments */

.schon-comments {
	margin-top: 50px;
	padding-top: 34px;
	border-top: 1px solid var(--schon-line);
}

.schon-comments-title {
	margin: 0 0 24px;
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 22px;
	text-transform: uppercase;
}

.schon-comment-list,
.schon-comment-list .children {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.schon-comment-list .children {
	margin: 20px 0 0 40px;
}

.schon-comment-list .comment-body {
	padding: 22px 0;
	border-bottom: 1px solid var(--schon-line);
}

.schon-comment-list .comment-author img {
	float: left;
	margin-right: 16px;
	border-radius: 50%;
}

.schon-comment-list .fn {
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
}

.schon-comment-list .comment-metadata {
	margin-bottom: 10px;
	color: var(--schon-muted-2);
	font-size: 12px;
}

.schon-comment-form p {
	margin-bottom: 16px;
}

.schon-comment-form .submit,
.comment-form .submit {
	min-height: 44px;
	padding: 12px 28px;
	background: var(--schon-ink);
	border: 0;
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.comment-form .submit:hover,
.comment-form .submit:focus {
	background: var(--schon-accent);
}

/* Sidebar and widgets */

.schon-layout-aside .widget {
	margin-bottom: 34px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--schon-line);
}

.schon-layout-aside .widget:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.widget-title {
	margin: 0 0 18px;
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 20px;
	text-transform: uppercase;
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	margin-bottom: 10px;
	color: var(--schon-body);
	font-size: 14px;
}

.widget a {
	color: var(--schon-body);
}

.widget a:hover,
.widget a:focus {
	color: var(--schon-accent);
}

.schon-search-form {
	display: flex;
}

.schon-search-form .search-field {
	border-right: 0;
}

.schon-search-form .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	background: var(--schon-ink);
	border: 0;
	color: var(--schon-white);
	cursor: pointer;
}

.schon-search-form .search-submit:hover,
.schon-search-form .search-submit:focus {
	background: var(--schon-accent);
}

/* Empty states */

.schon-no-results,
.schon-404 {
	padding: 60px 0 80px;
	text-align: center;
}

.schon-404-code {
	display: block;
	color: var(--schon-line);
	font-family: var(--schon-font-body);
	font-size: 120px;
	font-weight: 200;
	line-height: 1;
}

.schon-404-title,
.schon-no-results h2 {
	margin: 18px 0 12px;
	color: var(--schon-ink);
	font-family: var(--schon-font-head);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 30px;
	text-transform: uppercase;
}

.schon-404 .schon-search-form,
.schon-no-results .schon-search-form {
	max-width: 420px;
	margin: 24px auto;
}

.schon-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

/* ==========================================================================
   16. Utilities
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 10px;
	left: 10px;
	z-index: 300;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	background: var(--schon-ink);
	color: var(--schon-white);
	white-space: normal;
}

.schon-edit-link {
	display: block;
	margin-top: 20px;
	font-size: 12px;
	text-transform: uppercase;
}

/*
 * Scroll-reveal. Gated on the `.js` class the header sets before first paint,
 * so without JavaScript nothing is ever hidden.
 */

.js [data-anim] {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 0.7s var(--schon-ease), transform 0.7s var(--schon-ease);
}

.js [data-anim="fade-left"] {
	transform: translate3d(-28px, 0, 0);
}

.js [data-anim="fade-right"] {
	transform: translate3d(28px, 0, 0);
}

.js [data-anim="fade-down"] {
	transform: translate3d(0, -24px, 0);
}

.js [data-anim].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-anim] {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   18. Newsletter popup
   ========================================================================== */

.schon-popup {
	position: fixed;
	z-index: 200;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity var(--schon-speed) var(--schon-ease);
}

.schon-popup.is-open {
	opacity: 1;
}

.schon-popup[hidden] {
	display: none;
}

.schon-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.schon-popup__dialog {
	position: relative;
	width: 792px;
	max-width: 100%;
	max-height: calc(100vh - 40px);
	padding: 44px 20px 20px 42px;
	background: var(--schon-white);
	overflow-y: auto;
	transform: translateY(18px);
	transition: transform var(--schon-speed) var(--schon-ease);
}

.schon-popup.is-open .schon-popup__dialog {
	transform: none;
}

.schon-popup__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: none;
	border: 0;
	color: var(--schon-heading);
	cursor: pointer;
}

.schon-popup__close:hover,
.schon-popup__close:focus {
	color: var(--schon-accent);
}

/*
 * The oversized watermark word sits behind the copy. It is decorative — the
 * heading below carries the same meaning — so it is aria-hidden in the markup
 * and allowed to overflow rather than being squeezed into the dialog.
 */
.mt-newsletter-popup .title {
	display: block;
	position: relative;
	margin: 0;
	color: var(--schon-surface);
	font-family: var(--schon-font-head);
	font-size: 90px;
	font-weight: 700;
	line-height: 100px;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.mt-newsletter-popup .holder {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.mt-newsletter-popup .txt-holder {
	position: relative;
	z-index: 2;
	top: -59px;
	flex: 1 1 413px;
	max-width: 413px;
	padding-left: 40px;
}

.mt-newsletter-popup h2 {
	margin: 0 0 18px;
	color: var(--schon-black);
	font-family: var(--schon-font-head);
	font-size: 30px;
	font-weight: 700;
	line-height: 33px;
	text-transform: uppercase;
}

.mt-newsletter-popup .txt {
	display: block;
	margin: 0 0 40px;
	color: var(--schon-title);
	font-size: 18px;
	line-height: 21px;
}

.mt-newsletter-popup .txt b {
	color: #f53434;
}

.mt-newsletter-popup .newsletter-form {
	width: 100%;
	margin: 0 0 20px;
}

/*
 * The footer sign-up shares the `.newsletter-form` class and styles its
 * fieldset as a flex row with a 300px cap. The popup stacks its field over its
 * button, so those two declarations have to be undone here rather than
 * loosened there — the footer form is not broken and is not this module's.
 */
.mt-newsletter-popup .newsletter-form fieldset {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.mt-newsletter-popup .newsletter-form .form-control {
	flex: none;
	width: 100%;
	height: 47px;
	margin: 0 0 8px;
	padding: 11px 10px 10px 22px;
	background: #f2f2f2;
	border: 0;
	border-radius: var(--schon-radius-pill);
	box-shadow: none;
	color: var(--schon-title);
	font-size: 14px;
	line-height: 16px;
}

.mt-newsletter-popup .newsletter-form button {
	width: 122px;
	padding: 10px;
	background: var(--schon-accent-2);
	border: 0;
	border-radius: var(--schon-radius-pill);
	color: var(--schon-white);
	font-family: var(--schon-font-head);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s linear, color 0.25s linear;
}

.mt-newsletter-popup .newsletter-form button:hover,
.mt-newsletter-popup .newsletter-form button:focus {
	background: #f2f2f2;
	color: var(--schon-title);
}

.schon-popup__cta {
	margin: 0 0 20px;
}

.mt-newsletter-popup .img-holder {
	flex: 0 1 auto;
	position: relative;
	top: -40px;
	max-width: 45%;
}

.mt-newsletter-popup .img-holder img {
	display: block;
	width: 100%;
	height: auto;
}

.mt-newsletter-popup .popup-form {
	margin: 0;
	padding-left: 40px;
	color: #9a9a9a;
	font-family: var(--schon-font-ui);
	font-size: 11px;
	line-height: 13px;
}

.mt-newsletter-popup .popup-form label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
}

.mt-newsletter-popup .popup-form input {
	width: 16px;
	min-height: 0;
	height: 16px;
	margin: 0;
}