/*
Theme Name: Tyche
Theme URI: https://colorlib.com/wp/themes/tyche/
Author: Colorlib
Author URI: https://colorlib.com/
Description: Tyche is a WooCommerce block theme for fashion, lifestyle and independent stores. Every store page is designed: a header with a slide-out cart, product grids with filters, a product page with a gallery, a focused checkout and an order confirmation. Includes homepage sections for collections, promotions, reviews and stories, eight colour palettes and self-hosted fonts. Edit everything in the Site Editor.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tyche
Tags: e-commerce, full-site-editing, block-patterns, block-styles, style-variations, template-editing, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, featured-images, one-column, two-columns, left-sidebar, translation-ready, threaded-comments

Tyche WordPress Theme, (C) 2017-2026 Colorlib.
Tyche is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   Tyche. Component styles.

   theme.json carries the design system: palette, type, spacing, buttons and
   element styles. This file holds what theme.json has no property for, and every
   value in it reads a theme.json token so the eight palettes restyle it too.
   WooCommerce components live in assets/css/woocommerce.css.
   ========================================================================== */

/* Base ------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Keyboard focus on links and buttons: a clear ring that only keyboard users see. */
:where(a, button, summary, [role="button"], [role="radio"], [role="checkbox"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Fields: a darker border and a soft halo instead of an outline. A 2px outline
   three pixels outside the field's own border drew a heavy double ring around
   every select and search box a shopper clicked into. */
:where(input, select, textarea):focus,
:where(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	outline: none;
}

:where(.has-dark-background-color, .wp-block-cover) :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--overlay);
}

::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.tyche-main {
	margin-block-start: 0;
}

/* Type helpers ---------------------------------------------------------- */

.is-style-tyche-eyebrow {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--wp--preset--font-size--tiny) !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.is-style-tyche-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.tyche-page-title {
	font-size: var(--wp--preset--font-size--huge);
	margin: 0;
}

/* Buttons ---------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button {
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.wp-block-button.is-style-tyche-outline > .wp-block-button__link {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.wp-block-button.is-style-tyche-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-tyche-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

/* An outline button on a photograph has nothing behind its label but the
   picture, so it reads at whatever contrast that part of the photograph
   happens to give: on the skate-park underpass it measured 3.8:1. A dark
   ground behind it costs nothing on a photograph that is already dimmed, and
   it is the one place the outline style cannot simply be trusted. */
.wp-block-cover .wp-block-button.is-style-tyche-outline > .wp-block-button__link {
	background: rgba(12, 10, 8, 0.45);
}

.wp-block-cover .wp-block-button.is-style-tyche-outline > .wp-block-button__link:hover {
	background: rgba(12, 10, 8, 0.62);
}

.wp-block-button.is-style-tyche-link > .wp-block-button__link {
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	padding: 0.25rem 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4em;
}

.wp-block-button.is-style-tyche-link > .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.4em;
	transition: transform var(--wp--custom--transition);
}

.wp-block-button.is-style-tyche-link > .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

[dir="rtl"] .wp-block-button.is-style-tyche-link > .wp-block-button__link::after {
	content: "\2190";
}

[dir="rtl"] .wp-block-button.is-style-tyche-link > .wp-block-button__link:hover::after {
	transform: translateX(-3px);
}

/* Header ----------------------------------------------------------------- */

.tyche-site-header {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--tyche-bar-height, 0px));
	z-index: 60;
}

.tyche-announcement p {
	margin: 0;
}

.tyche-announcement a {
	color: var(--wp--preset--color--overlay);
	margin-inline-start: 0.5em;
}

.tyche-header {
	border-bottom: 1px solid transparent;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.tyche-site-header.is-scrolled .tyche-header {
	border-bottom-color: var(--wp--preset--color--divider);
	box-shadow: 0 6px 24px -18px rgba(20, 16, 12, 0.35);
}

/* Three columns so the brand sits on the true centre however long the menu is. */
.tyche-header__bar.tyche-header__bar {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.tyche-header__nav {
	justify-self: start;
}

.tyche-header__brand {
	justify-self: center;
}

.tyche-header__actions {
	justify-self: end;
}

.tyche-header .wp-block-site-title a,
.tyche-checkout-header .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
}

.tyche-header__nav .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	position: relative;
	text-decoration: none;
}

.tyche-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	background: currentColor;
	bottom: 0;
	content: "";
	height: 1px;
	inset-inline-start: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--transition);
	width: 100%;
}

[dir="rtl"] .tyche-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	transform-origin: right;
}

.tyche-header__nav .wp-block-navigation-item__content:hover::after,
.tyche-header__nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.tyche-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--divider) !important;
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: 0.5rem !important;
}

.tyche-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.tyche-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Logo above a centred menu */

.tyche-header--stacked .tyche-header__bar--stacked {
	align-items: center;
}

/* The brand is centred against the whole bar, so the empty span on the left has
   to weigh what the icons weigh on the right. */
.tyche-header__spacer {
	flex: 0 0 auto;
	width: 8.5rem;
}

.tyche-header--stacked .tyche-header__subnav {
	margin-top: var(--wp--preset--spacing--20);
}

@media (max-width: 1199px) {
	/* The menu folds into its button, and the button is the only thing left on
	   the second line -- so the line is lifted onto the brand's row rather than
	   hidden, which would take the only way into the menu with it. */
	.tyche-header--stacked {
		position: relative;
	}

	.tyche-header--stacked .tyche-header__subnav {
		inset-block-start: 50%;
		inset-inline: 0;
		justify-content: flex-start;
		margin: 0;
		/* An absolute box hangs off the padding edge, so it takes the header's
		   own inline padding to line the button up with everything else. */
		padding-inline: inherit;
		position: absolute;
		transform: translateY(-50%);
	}

	/* The spacer still weighs the icons, so the brand stays centred and the
	   button, which is out of flow, sits over the empty half of it. */
	.tyche-header__spacer {
		width: 5.5rem;
	}
}

/* Icon buttons in the header: search, account, cart. */
.tyche-header__search .wp-block-search__button,
.tyche-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	background: transparent;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	height: 2.75rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 2.75rem;
}

/* Core hides the menu toggle on wide screens; only give it a flex box where it shows. */
.tyche-header__search .wp-block-search__button {
	display: inline-flex;
}

/* Core collapses the menu into the button at 600px, which is right for a short
   menu and wrong for a store: six or seven categories beside a wordmark wrap
   onto a second line somewhere around a tablet. The menu folds away here
   instead, and the button takes over. 1200px rather than 1100: seven items
   beside a wordmark still wrapped at 1152, an ordinary laptop width.

   Both halves are inside the query on purpose: giving the button a display
   outside one puts a hamburger next to the open menu on every desktop. */
@media (max-width: 1199px) {
	.tyche-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.has-modal-open) {
		display: none;
	}

	.tyche-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}
}

.tyche-header__search .wp-block-search__button:hover,
.tyche-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--surface);
}

.tyche-header__search .wp-block-search__button svg {
	height: 1.5rem;
	width: 1.5rem;
}

.tyche-header__search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}

/* The three header controls share one 44px box so their icons sit on one line.
   The search form was 50px tall with its button pinned to the top, the account
   link 40px and the cart 44px, which put the glyphs up to 3px apart. */
.tyche-header__actions > * {
	align-items: center;
	display: flex;
	margin: 0;
	min-height: 2.75rem;
}

.tyche-header__search.wp-block-search,
.tyche-header__search .wp-block-search__inside-wrapper {
	align-items: center;
	display: flex;
	margin: 0;
	min-height: 2.75rem;
}

.tyche-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--pill);
	height: 2.5rem;
	margin-inline-end: 0.25rem;
	padding: 0 1rem;
}

/* Sections --------------------------------------------------------------- */

.tyche-section-head {
	align-items: flex-end !important;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

.tyche-section-head h2 {
	margin: 0;
}

.tyche-section-head .is-style-tyche-eyebrow {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.tyche-section:not(.has-background) + .tyche-section:not(.has-background) {
	padding-top: 0 !important;
}

.tyche-hero .wp-block-cover__inner-container {
	padding-bottom: var(--wp--preset--spacing--70);
}

/* A cover with a content position shrinks its inner container to the text
   (core doubles the class to win), which left nothing for the wide wrapper to
   span. Full width, so the text lines up with the header at every screen size. */
.tyche-hero.tyche-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
}

.tyche-hero__title {
	line-height: 0.95;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}

.tyche-hero__lede {
	max-width: 34rem;
}

/* A whole tile is the link; the heading's anchor stretches over it. */
.tyche-tile,
.tyche-promo {
	border-radius: var(--wp--custom--media--radius);
	overflow: hidden;
}

.tyche-tile .wp-block-cover__inner-container,
.tyche-promo .wp-block-cover__inner-container {
	position: static;
}

.tyche-tile .wp-block-cover__inner-container > *,
.tyche-promo .wp-block-cover__inner-container > * {
	position: relative;
	z-index: 2;
}

.tyche-tile__title {
	margin: 0 0 0.25rem;
}

.tyche-tile__title a {
	color: inherit;
	text-decoration: none;
}

.tyche-tile__title a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 3;
}

.tyche-tile p {
	margin: 0;
}

.is-style-tyche-zoom .wp-block-cover__image-background,
.is-style-tyche-zoom img {
	transition: transform 700ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-tyche-zoom:hover .wp-block-cover__image-background,
	.wp-block-image.is-style-tyche-zoom:hover img {
		transform: scale(1.04);
	}
}

.wp-block-image.is-style-tyche-zoom {
	overflow: hidden;
}

.tyche-story__image img {
	width: 100%;
}

/* Lists, cards, icons ---------------------------------------------------- */

.is-style-tyche-checks {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-tyche-checks li {
	padding-inline-start: 2rem;
	position: relative;
}

.is-style-tyche-checks li + li {
	margin-top: 0.6rem;
}

.is-style-tyche-checks li::before {
	background: currentColor;
	content: "";
	height: 1.25rem;
	inset-inline-start: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
	position: absolute;
	top: 0.2rem;
	width: 1.25rem;
}

.is-style-tyche-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--large);
	height: 100%;
	padding: var(--wp--preset--spacing--50);
}

/* Tyche's icons are outline drawings. The Icon block paints SVGs with
   fill: currentColor, which turned every one into a solid blob. */
.tyche-icon svg {
	display: block;
	fill: none;
	height: 1.25rem;
	stroke: currentColor;
	width: 1.25rem;
}

.tyche-usp h3,
.tyche-usp p {
	margin: 0;
}

.tyche-icon--large svg {
	height: 2rem;
	width: 2rem;
}

.tyche-stars {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.2em;
	margin: 0;
}

.tyche-review__quote {
	flex-grow: 1;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.3;
	margin: 0;
}

.tyche-review__author p {
	margin: 0;
}

.tyche-review__avatar {
	flex-shrink: 0;
	margin: 0;
	width: 3rem;
}

.tyche-review__avatar img {
	border-radius: 50%;
}

/* Journal ---------------------------------------------------------------- */

.tyche-post-cards {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.tyche-post-cards > li > * {
	margin-block: 0 0.6rem;
}

.tyche-post-card__media {
	margin-bottom: var(--wp--preset--spacing--30) !important;
	overflow: hidden;
}

.tyche-post-card__media img {
	border-radius: var(--wp--custom--media--radius);
}

.tyche-post-cards .wp-block-post-title a {
	text-decoration: none;
}

.tyche-post-cards .wp-block-post-title a:hover {
	text-decoration: underline;
}

.tyche-post-card__excerpt {
	color: var(--wp--preset--color--muted);
}

.tyche-post-card__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.tyche-post-cards .wp-block-post-date {
	color: var(--wp--preset--color--muted);
}

.tyche-post-head {
	margin-bottom: var(--wp--preset--spacing--60);
}

.tyche-post-hero img {
	border-radius: var(--wp--custom--media--radius);
}

.tyche-post-meta {
	color: var(--wp--preset--color--muted);
}

.tyche-page-head {
	margin-bottom: var(--wp--preset--spacing--60) !important;
}

.wp-block-query-pagination {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-query-pagination-numbers .page-numbers {
	border-radius: var(--wp--custom--radius--pill);
	display: inline-grid;
	min-width: 2.5rem;
	padding: 0.45rem 0.6rem;
	place-items: center;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Forms ------------------------------------------------------------------ */

:where(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"],
	input[type="password"], input[type="url"], select, textarea) {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--medium);
	box-sizing: border-box;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	padding: 0.7rem 0.9rem;
}

/* Footer ----------------------------------------------------------------- */

.tyche-footer a {
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
}

.tyche-footer a:hover {
	color: var(--wp--preset--color--overlay);
	text-decoration: underline;
}

.tyche-footer__title a,
.tyche-footer__title {
	color: var(--wp--preset--color--overlay) !important;
	font-size: var(--wp--preset--font-size--xx-large);
}

.tyche-footer__heading {
	color: var(--wp--preset--color--overlay);
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.14em;
	margin: 0 0 var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

.tyche-footer__about {
	max-width: 22rem;
}

.tyche-footer .wp-block-social-links {
	margin-top: var(--wp--preset--spacing--40);
}

.tyche-footer__rule {
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-dark) 22%, transparent) !important;
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	opacity: 1;
}

.tyche-footer__legal {
	margin: 0;
}

/* Checkout header -------------------------------------------------------- */

.tyche-checkout-header__back {
	justify-self: start;
	margin: 0;
}

.tyche-checkout-header__back a {
	color: var(--wp--preset--color--contrast);
}

.tyche-checkout-header__back a::before {
	content: "\2190";
	margin-inline-end: 0.4em;
}

[dir="rtl"] .tyche-checkout-header__back a::before {
	content: "\2192";
}

.tyche-checkout-header__secure {
	color: var(--wp--preset--color--muted);
	justify-self: end;
}

.tyche-checkout-header__secure p {
	margin: 0;
}

.tyche-checkout-header {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

/* Small screens ---------------------------------------------------------- */

@media (max-width: 599px) {
	/* The account icon stays: a shop's header is the search, the account and the
	   cart, and on a phone the row is four icons wide, which fits. */
	.tyche-checkout-header__secure p {
		display: none;
	}

	.tyche-header__actions {
		gap: 0 !important;
	}

	.tyche-header .wp-block-site-title {
		font-size: var(--wp--preset--font-size--large);
	}
}

@media (max-width: 781px) {
	.tyche-section-head {
		align-items: flex-start !important;
	}

	/* Four stacked portrait tiles make a phone scroll past four screens of photographs. */
	.tyche-tiles.wp-block-columns {
		display: grid;
		gap: var(--wp--preset--spacing--30);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tyche-tiles .tyche-tile__title {
		font-size: var(--wp--preset--font-size--x-large) !important;
	}

	.tyche-tiles .tyche-tile p {
		display: none;
	}
}

.tyche-hero__content {
	max-width: 40rem;
}

/* Page patterns ------------------------------------------------------------ */

.tyche-page-intro .tyche-page-title {
	font-size: var(--wp--preset--font-size--colossal);
	line-height: 1;
}

.tyche-page-intro > * {
	margin-block: 0;
}

.tyche-icon-items .tyche-usp p,
.tyche-icon-items .tyche-usp h3 {
	margin: 0;
}

.tyche-about-gallery img,
.tyche-page-intro + * img {
	border-radius: var(--wp--custom--media--radius);
}

.tyche-step__number {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	margin: 0;
}

.tyche-step h3,
.tyche-step p {
	margin: 0;
}

/* Accordions: product details and FAQ share one look. */
.wp-block-accordion .wp-block-accordion-item {
	border-top: 1px solid var(--wp--preset--color--divider);
}

.wp-block-accordion .wp-block-accordion-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.wp-block-accordion .wp-block-accordion-heading {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.tyche-faq .wp-block-accordion-heading {
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 500;
}

.wp-block-accordion .wp-block-accordion-heading__toggle {
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-accordion .wp-block-accordion-panel > p {
	color: var(--wp--preset--color--muted);
	margin-top: 0;
}

/* Tables. */
.wp-block-table table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	width: 100%;
}

.wp-block-table th {
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	font-weight: 600;
	text-align: start;
}

.wp-block-table th,
.wp-block-table td {
	border-left: 0;
	border-right: 0;
	border-top: 0;
	padding: 0.85rem 1rem 0.85rem 0;
}

.wp-block-table td {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface);
}

.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes td:first-child,
.wp-block-table.is-style-stripes th:first-child {
	padding-inline-start: 1rem;
}

@media (max-width: 599px) {
	.wp-block-table {
		overflow-x: auto;
	}
}

/* Header layouts ------------------------------------------------------------ */

.tyche-header__bar--left.tyche-header__bar {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.tyche-header__bar--left .tyche-header__brand,
.tyche-header__bar--minimal .tyche-header__brand {
	justify-self: start;
}

.tyche-header__bar--left .tyche-header__nav {
	justify-self: start;
	margin-inline-start: var(--wp--preset--spacing--50);
}

.tyche-header__bar--minimal.tyche-header__bar {
	grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 599px) {
	/* One layout on phones whatever the desktop one: menu, brand, icons. */
	.tyche-header__bar--left.tyche-header__bar {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.tyche-header__bar--left .tyche-header__nav {
		grid-column: 1;
		grid-row: 1;
		margin-inline-start: 0;
	}

	.tyche-header__bar--left .tyche-header__brand {
		grid-column: 2;
		justify-self: center;
	}
}

.tyche-footer--simple .tyche-footer__links {
	justify-content: center;
}

.tyche-footer--simple .tyche-footer__title,
.tyche-footer--simple .tyche-footer__legal {
	margin: 0;
}

/* A hero that opens on categories */

.tyche-tiles-hero__words {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Aligned wide so the words start where the tiles start, but a headline and a
   sentence still want a readable measure rather than the full width. */
.tyche-tiles-hero__words > * {
	max-width: 46rem;
}

.tyche-tiles-hero__words > p:not(.is-style-tyche-eyebrow) {
	max-width: 34rem;
}

/* Numbered steps ------------------------------------------------------------ */

/* A rule over each step, so four columns read as a sequence rather than as four
   loose paragraphs, and the number carries the order instead of decorating it. */
.tyche-steps > .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--20);
}

/* Muted, not accent: the terracotta accent on the light palettes' paper is
   3.8:1, which the rendered contrast audit catches on any page with steps. */
.tyche-step__number {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
}

.tyche-steps h3 {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Details table -------------------------------------------------------------- */

.tyche-spec__row.wp-block-columns {
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.tyche-spec__row:first-child {
	border-top: 1px solid var(--wp--preset--color--divider);
}

.tyche-spec__row p {
	margin: 0;
}

.tyche-spec__label {
	font-weight: 600;
}

/* Two columns of a table must not stack into two unlabelled lines on a phone:
   the label keeps its own line, the value follows it, and the row still reads. */
@media (max-width: 599px) {
	.tyche-spec__row.wp-block-columns {
		gap: var(--wp--preset--spacing--10);
	}
}

/* Details table beside a photograph */

.tyche-spec-split.wp-block-columns {
	align-items: center;
}

/* The words column is a vertical flex box, and a flex box that aligns its
   children to the start lets them shrink to their content: the table of
   percentage-width rows collapsed to a 110px strip beside a wide empty gap.
   Both the heading and the table take the full column. */
.tyche-spec-split > .wp-block-column > .wp-block-group,
.tyche-spec-split .tyche-spec,
.tyche-spec-split .tyche-spec__row {
	align-self: stretch;
	width: 100%;
}

/* The table already rules its own rows, so the first one does not need a rule
   above it when it sits under a heading rather than a section head. */
.tyche-spec-split .tyche-spec__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.tyche-spec__photo img {
	border-radius: var(--wp--custom--radius--medium);
}

@media (max-width: 781px) {
	/* Stacked, the photograph comes first and the numbers follow it. */
	.tyche-spec-split.wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* Facts worth saying in two words ------------------------------------------- */

/* A row of small pills: "Fragrance-free", "30 ml", "Pet safe". They carry a
   fact a shopper filters on, so they read as labels rather than as buttons --
   no link, no hover, and the ground of the page behind them. */
.tyche-chips {
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}

.tyche-chip.tyche-chip {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	padding: 0.45rem 0.9rem;
}

/* Two photographs and a headline ------------------------------------------- */

/* A shop whose product only makes sense in a room, and whose quality only
   shows up close, opens on both: the room on one side, the joint on the other,
   and the words between them. The second photograph drops below the first so
   the three columns read as a composition rather than a row. */
.tyche-collage.wp-block-columns {
	align-items: center;
}

.tyche-collage__late {
	margin-block-start: var(--wp--preset--spacing--60);
}

.tyche-collage img {
	border-radius: var(--wp--custom--radius--medium);
}

@media (max-width: 781px) {
	/* Stacked, an offset is just a gap. */
	.tyche-collage__late {
		margin-block-start: 0;
	}
}

/* One product, held up ------------------------------------------------------ */

/* A shop with one thing worth opening on -- a serum, a single release -- gives
   it the whole right-hand side, on the tinted ground the product sits on in
   its own photographs. */
.tyche-spotlight {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

.tyche-spotlight > .wp-block-column {
	margin-block: 0;
}

.tyche-spotlight__words {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tyche-spotlight__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 781px) {
	.tyche-spotlight__words {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* Store promises ------------------------------------------------------------ */

.tyche-promises {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--large);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.tyche-promises__items.wp-block-columns {
	margin: 0;
}

.tyche-promises__items > .wp-block-column {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.tyche-promises__items > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var(--wp--preset--color--divider);
}

/* Icons line up with the titles, so all four sit on one line however the
   copy under each title wraps. */
.tyche-promise {
	align-items: flex-start !important;
}

.tyche-promise__copy {
	padding-top: 0.35rem;
}

.tyche-promise__icon {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	display: flex;
	flex-shrink: 0;
	height: 3.25rem;
	justify-content: center;
	width: 3.25rem;
}

.tyche-promise__icon svg {
	height: 1.5rem;
	width: 1.5rem;
}

.tyche-promise__title {
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.tyche-promise__text {
	line-height: 1.45;
	margin: 0;
}

@media (max-width: 1023px) {
	.tyche-promises__items.wp-block-columns {
		display: grid;
		gap: var(--wp--preset--spacing--30);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tyche-promises__items > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
	}
}

@media (max-width: 599px) {
	.tyche-promises__items.wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.tyche-promises__items > .wp-block-column {
		padding-inline: var(--wp--preset--spacing--20);
	}

	.tyche-promises__items > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--divider);
		padding-top: var(--wp--preset--spacing--30);
	}
}

/* Account sign-up card ------------------------------------------------------ */

.tyche-cta.wp-block-columns {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

.tyche-cta__media-column {
	align-self: stretch !important;
}

.tyche-cta__media.wp-block-cover {
	border-radius: 0;
	height: 100%;
}

.tyche-cta__content {
	padding: var(--wp--preset--spacing--60);
}

.tyche-cta__content > * {
	margin-block: 0;
}

.tyche-cta__content h2 {
	line-height: 1.02;
}

.tyche-cta__content .is-style-tyche-eyebrow {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.tyche-cta__media.wp-block-cover {
		min-height: 260px !important;
	}

	.tyche-cta__content {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}